/* HERBINO / BIT — one consolidated stylesheet, v2.
 * Source: Brand & BIT SoT (2026-10-08), GPS Garden Map SoT, web release v1.
 * Font family contract only: no font binaries or third-party font requests are embedded.
 */
:root { color-scheme: light;
  --forest: #264b2e; --moss: #5b7f3c; --herb: #8daa6b;
  --paper: #f5ebd7; --card: #fcf7eb; --ink: #264b2e;
  --muted: #52634d; --line: #cec2a7; --gold: #80602f;
  --gold-decor: #d4a85b; --earth: #7a5a3b; --sky: #6b7ea1;
  --tomato: #c62828; --error: #a13030;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --nav-height: 68px; --sidebar-width: 218px; --notebook-width: 286px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --radius: 5px; }
/* Public entry and shared components. */
* { box-sizing:border-box }
html { scroll-behavior:smooth;scroll-padding-top:110px;background:var(--paper);font-family:var(--sans);color:var(--ink) }
body { margin:0 }
button,
input,
textarea,
select { font:inherit }
button,
a,
input,
select,
textarea { touch-action:manipulation }
button { cursor:pointer }
button:disabled { cursor:wait;opacity:.6 }
a { color:inherit }
img { display:block;max-width:100% }
button,
a,
input,
textarea,
select,
[tabindex]:not([tabindex="-1"]) { outline-offset:5px }
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible { outline:2px solid var(--moss) }
[hidden] { display:none!important }
.sr-only { position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap }
.skip-link { position:fixed;top:10px;left:16px;transform:translateY(-160%);z-index:200;background:var(--forest);color:white;padding:14px }
.skip-link:focus { transform:none }
.section-wrap { max-width:1256px;padding-inline:48px;margin-inline:auto }
.topbar { position:sticky;top:0;z-index:30;min-height:90px;display:flex;align-items:center;gap:24px;justify-content:space-between;padding:12px max(28px,calc((100vw - 1160px)/2));background:rgba(245,235,215,.98);border-bottom:1px solid var(--line) }
.brand { display:flex;align-items:center;gap:10px;text-decoration:none;font:600 29px var(--serif);white-space:nowrap }
.brand img { object-fit:contain }
.brand-dot { font:500 12px var(--sans);margin-left:2px;color:var(--gold) }
.public-nav { display:flex;gap:25px;font-size:13px }
.public-nav a { text-decoration:none;border-bottom:1px solid transparent;padding-block:10px }
.public-nav a:hover { border-color:var(--forest) }
.header-actions { display:flex;align-items:center;gap:20px }
.locale-control select { color:var(--ink);font-size:12px;background:transparent;border:0;min-height:44px;max-width:108px }
.button { display:inline-flex;align-items:center;justify-content:center;gap:26px;min-height:48px;padding:15px 23px;border:1px solid var(--forest);border-radius:4px;background:var(--forest);color:var(--card);text-decoration:none;font-size:14px;font-weight:550;line-height:1.3 }
.button:hover { background:#2f4b32;border-color:#2f4b32 }
.button-small { min-height:42px;padding:12px 16px;font-size:12px }
.button-outline { background:transparent;color:var(--forest) }
.button-outline:hover { background:#ececdc;color:var(--forest) }
.intro { display:grid;grid-template-columns:1.13fr .87fr;gap:64px;align-items:center;padding-top:66px;padding-bottom:72px }
.eyebrow { text-transform:uppercase;letter-spacing:.17em;font-size:10px;line-height:1.6;color:var(--gold);font-weight:650;margin:0 0 20px }
.intro .eyebrow { display:flex;align-items:center;gap:12px }
.tiny-rule { width:30px;height:1px;background:var(--gold) }
h1,
h2,
h3,
p { overflow-wrap:anywhere }
h1 { font:600 clamp(44px,5.3vw,72px)/1.03 var(--serif);letter-spacing:-.045em;margin:0 0 17px;max-width:640px }
h2 { font:600 clamp(30px,3.1vw,42px)/1.16 var(--serif);letter-spacing:-.022em;margin:0 }
h3 { font:400 24px/1.23 var(--serif);margin:18px 0 13px }
.intro-subtitle { font:italic clamp(21px,2.2vw,29px)/1.35 var(--serif);color:var(--moss);margin:0 0 23px }
.intro-text { font-size:15px;line-height:1.85;max-width:470px;color:var(--muted);margin:0 0 30px }
.intro-actions { display:flex;align-items:center;gap:28px;flex-wrap:wrap }
.text-link { font-size:13px;text-underline-offset:5px;display:inline-flex;gap:16px;padding-block:12px }
.fineprint { font-size:11px;line-height:1.6;color:var(--muted);margin:18px 0 0 }
.availability { font-size:11px;color:var(--gold);margin:8px 0 0;min-height:16px;line-height:1.5 }
.identity-plate { position:relative;align-self:stretch;max-height:500px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:3px;background:linear-gradient(145deg,#fcf7eb,#f0e4cb);padding:23px 26px 20px;box-shadow:8px 8px 0 -1px var(--paper),8px 8px 0 0 var(--line) }
.plate-heading { display:flex;width:100%;justify-content:space-between;gap:8px;font-size:9px;letter-spacing:.13em;color:var(--muted) }
.identity-art { width:min(100%,354px);height:auto;margin:7px auto 4px;object-fit:contain }
.plate-foot { display:flex;gap:12px;align-items:center;width:100%;color:var(--gold) }
.plate-foot p { font:italic 13px/1.5 var(--serif);text-align:center;margin:7px 0;flex-shrink:1 }
.plate-rule { height:1px;flex:1;background:var(--line) }
.journey { padding-top:54px;padding-bottom:32px;border-top:1px solid var(--line) }
.section-heading { display:flex;justify-content:space-between;gap:60px;align-items:end;margin-bottom:32px }
.section-heading>div { flex:1 }
.section-heading>p { flex:0 1 340px;font-size:14px;line-height:1.8;color:var(--muted);margin:0 }
.section-heading .eyebrow { margin-bottom:10px }
.fieldbook { border:1px solid var(--line);display:grid;grid-template-columns:225px 1fr;background:var(--card) }
.chapter-tabs { display:flex;flex-direction:column;border-right:1px solid var(--line);background:#efeedf }
.chapter-tabs button { position:relative;display:flex;align-items:center;gap:20px;border:0;border-bottom:1px solid var(--line);text-align:left;padding:24px 25px;min-height:69px;background:transparent;color:var(--ink);font-size:14px }
.chapter-tabs button:last-child { border-bottom:0 }
.chapter-tabs button span { font:italic 12px var(--serif);opacity:.7 }
.chapter-tabs button[aria-selected="true"] { background:var(--forest);color:var(--card) }
.chapter-tabs button[aria-selected="true"]:after { content:"";position:absolute;right:-9px;top:calc(50% - 9px);width:18px;height:18px;border-radius:50%;background:var(--forest);z-index:1 }
.chapter-panel { padding:32px 44px;display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:center;min-height:345px }
.chapter-panel .eyebrow { margin-bottom:12px }
.chapter-panel h3 { font-size:30px;margin-top:0 }
.chapter-panel p { font-size:14px;line-height:1.85;color:var(--muted);margin-bottom:0 }
.chapter-steps { list-style:none;margin:0;padding:0;counter-reset:step }
.chapter-steps li { position:relative;counter-increment:step;padding:16px 0 16px 39px;border-bottom:1px solid var(--line);font-size:12px;line-height:1.6 }
.chapter-steps li:last-child { border-bottom:0 }
.chapter-steps li:before { content:"0" counter(step);position:absolute;left:0;font:italic 17px var(--serif);color:var(--moss);top:16px }
.tour-notice { font-size:11px;color:var(--muted);line-height:1.6;margin:15px 0 0;max-width:900px }
.principles { display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding-block:34px 70px }
.principles article { padding:0 32px;border-left:1px solid var(--line) }
.principles article:first-child { border:0;padding-left:0 }
.principles article:last-child { padding-right:0 }
.index-number { font:italic 14px var(--serif);color:var(--gold) }
.principles p { font-size:13px;line-height:1.8;color:var(--muted);margin-bottom:0 }
.devices-section { padding:56px 0 62px;background:#e9eddf;border-block:1px solid #ced6bf }
.devices-section .eyebrow { margin-bottom:12px }
.section-lead { color:var(--muted);font-size:14px;line-height:1.8;margin-top:15px }
.devices-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:38px }
.devices-grid article { display:flex;flex-direction:column;align-items:start;border-top:1px solid #b7c4a6;padding-top:24px }
.devices-grid h3 { margin:15px 0 8px }
.devices-grid p { font-size:13px;line-height:1.8;color:var(--muted);margin:0 0 19px;flex:1 }
.device-state { font-size:10px;letter-spacing:.01em;line-height:1.7;color:#5c644e }
.device-state:before { content:"○";margin-right:8px }
.device-state.available:before { content:"●";color:var(--moss) }
.device-glyph { position:relative;height:37px;width:50px;margin-top:3px }
.device-glyph span { position:absolute;display:block;border:1.5px solid var(--moss);border-radius:2px }
.desktop-glyph span { inset:0 0 7px }
.desktop-glyph:after { content:"";position:absolute;bottom:0;left:12px;width:26px;border-top:1.5px solid var(--moss) }
.phone-glyph span { inset:0 12px }
.watch-glyph span { inset:5px 9px;border-radius:8px }
.watch-glyph:after { content:"";position:absolute;inset:0 16px;border-block:2px solid var(--moss) }
.next-section { display:flex;align-items:center;gap:80px;justify-content:space-between;padding-block:60px }
.next-section>div { max-width:680px }
.next-section .eyebrow { margin-bottom:13px }
.next-section p:not(.eyebrow) { font-size:14px;line-height:1.8;color:var(--muted);margin-bottom:0 }
.next-section .button { flex-shrink:0 }
.site-footer { border-top:1px solid var(--line);padding-top:28px;padding-bottom:34px;display:flex;justify-content:space-between;gap:32px;align-items:center }
.footer-brand { font:500 27px var(--serif) }
.footer-brand p { font:12px/1.6 var(--sans);color:var(--muted);margin-bottom:0 }
.footer-meta { display:flex;gap:12px;flex-direction:column;align-items:end;font-size:11px;color:var(--muted) }
.footer-meta a { text-underline-offset:3px }
.network-banner { padding:12px 28px;background:#fff2cf;color:#594613;font-size:13px;line-height:1.5 }
.form-error { color:var(--error) }
dialog { width:min(490px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:0;border:1px solid var(--line);border-radius:5px;background:var(--card);color:var(--ink);box-shadow:0 25px 80px #10251433 }
dialog::backdrop { background:#0e241e80 }
.dialog-inner { padding:38px 32px;position:relative;display:flex;flex-direction:column;gap:13px }
.dialog-inner h2 { font-size:32px;margin:0 }
.dialog-inner .eyebrow { margin-bottom:0 }
.dialog-inner>p:not(.eyebrow) { font-size:14px;line-height:1.75;margin:0 }
.close-button { position:absolute;right:9px;top:9px;min-height:40px;width:40px;border:0;background:transparent;color:var(--ink);font-size:25px }
.dialog-inner label { font-size:12px;font-weight:600;margin-top:6px }
input,
textarea { border:1px solid #a8b19a;padding:13px;background:#fffdf6;border-radius:3px;color:var(--ink);font-size:16px;max-width:100% }
textarea { resize:vertical;min-height:90px }
.form-error { font-size:12px;line-height:1.6 }
.toast { position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--forest);color:var(--card);padding:14px 23px;max-width:calc(100% - 32px);font-size:13px;line-height:1.6;z-index:80;border-radius:4px }
.noscript-note { margin:24px;padding:24px;border:1px solid var(--line) }
.consent { position:fixed;inset:auto 18px 18px;z-index:60;max-width:780px;margin:auto;padding:20px;background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:0 10px 40px #17312422;display:flex;gap:20px;align-items:center }
.consent p { font-size:12px;line-height:1.6;margin:6px 0 }
.consent-actions { display:flex;gap:10px;flex-shrink:0 }
.consent .primary,
.consent .secondary { font-size:12px;min-height:44px;padding:10px;border:1px solid var(--forest);background:var(--forest);color:var(--card);border-radius:3px }
.consent .secondary { background:transparent;color:var(--forest) }
@media (min-width:1500px) {
.intro { padding-top:85px;padding-bottom:90px }
}
@media (max-width:1080px) {
.public-nav { gap:15px }
.public-nav a { font-size:12px }
.section-wrap { padding-inline:32px }
.intro { gap:38px }
.header-actions { gap:10px }
.chapter-panel { padding:28px;gap:22px }
.fieldbook { grid-template-columns:190px 1fr }
.next-section { gap:34px }
}
@media (max-width:850px) {
.topbar { flex-wrap:wrap;gap:8px 16px;padding:10px 24px }
.public-nav { order:3;width:100%;justify-content:center;border-top:1px solid var(--line);gap:36px }
.topbar .brand { font-size:26px }
.brand img { width:43px;height:43px }
.intro { padding-top:42px;padding-bottom:52px;gap:28px }
.intro-actions { gap:10px }
.intro-text { font-size:14px }
.identity-plate { padding:18px;max-height:470px;align-self:center }
.plate-heading { font-size:8px }
.section-heading { gap:24px }
.section-heading>p { flex-basis:280px }
.chapter-panel { grid-template-columns:1fr;gap:12px }
.chapter-panel h3 { font-size:27px }
.chapter-tabs button { flex:1 }
.chapter-steps li { padding-top:10px;padding-bottom:10px }
.chapter-steps li:before { top:10px }
.principles article { padding:0 21px }
.devices-grid { gap:28px }
.next-section { align-items:start;flex-direction:column;gap:22px }
}
@media (max-width:620px) {
html { scroll-padding-top:122px }
.section-wrap { padding-inline:22px }
.topbar { padding-inline:16px }
.header-actions { gap:5px }
.header-actions .button { font-size:11px;padding:11px 10px }
.locale-control select { font-size:11px;max-width:89px }
.brand { gap:5px }
.topbar .brand { font-size:24px }
.brand-dot { font-size:10px }
.public-nav { gap:24px }
.public-nav a { font-size:11px }
.intro { grid-template-columns:1fr;gap:32px;padding-block:40px 47px }
.intro .eyebrow { margin-bottom:17px;font-size:9px }
h1 { font-size:51px;max-width:520px }
.intro-subtitle { font-size:23px }
.intro-text { font-size:14px;max-width:100%;margin-bottom:24px }
.intro-actions { gap:24px }
.intro-actions .button { font-size:13px;padding-inline:18px }
.text-link { font-size:12px }
.identity-plate { width:100%;max-height:none;padding:18px 22px;display:grid;grid-template-columns:1fr;justify-items:center }
.identity-art { width:245px;margin:7px auto 2px }
.plate-heading { font-size:9px }
.plate-foot { max-width:360px }
.journey { padding-top:36px }
.section-heading { display:block;margin-bottom:24px }
.section-heading h2 { font-size:33px }
.section-heading>p { margin-top:16px;font-size:13px }
.fieldbook { grid-template-columns:1fr }
.chapter-tabs { flex-direction:row;border:0;border-bottom:1px solid var(--line) }
.chapter-tabs button { display:flex;justify-content:center;padding:15px 3px;gap:0;min-width:0;min-height:51px;border:0;font-size:11px;flex:1 }
.chapter-tabs button span { display:none }
.chapter-tabs button[aria-selected="true"]:after { right:calc(50% - 6px);top:auto;bottom:-6px;width:12px;height:12px }
.chapter-panel { padding:27px 23px;min-height:365px;align-content:start }
.chapter-panel p { font-size:13px }
.chapter-panel h3 { font-size:29px }
.chapter-panel .eyebrow { font-size:9px }
.chapter-steps li { font-size:12px }
.principles { grid-template-columns:1fr;padding-top:22px;padding-bottom:37px }
.principles article,
.principles article:first-child,
.principles article:last-child { padding:22px 0;border:0;border-top:1px solid var(--line) }
.principles article:first-child { border:0 }
.principles h3 { margin-top:10px;font-size:25px }
.devices-section { padding-block:39px }
.devices-section h2 { font-size:33px }
.devices-grid { grid-template-columns:1fr;gap:26px;margin-top:26px }
.devices-grid article { position:relative;padding:23px 0 0 70px;min-height:120px }
.device-glyph { position:absolute;left:0;top:24px }
.devices-grid h3 { margin-top:0 }
.devices-grid p { margin-bottom:12px }
.device-state { font-size:10px }
.next-section { padding-block:38px;gap:24px }
.next-section h2 { font-size:34px }
.site-footer { padding-top:23px;flex-direction:column;align-items:start;gap:22px }
.footer-meta { align-items:start;gap:12px }
.footer-brand p { font-size:11px }
.toast { bottom:86px;width:calc(100% - 32px);text-align:center }
.dialog-inner { padding:34px 22px }
.consent { flex-direction:column;align-items:stretch }
.consent-actions { justify-content:end }
.network-banner { font-size:12px;padding:12px 18px }
}
@media (max-width:360px) {
.brand img { width:36px;height:36px }
.topbar .brand { font-size:21px }
.brand-dot { display:none }
.header-actions { gap:2px }
.header-actions .button { font-size:10px;padding-inline:7px }
.locale-control select { max-width:76px }
h1 { font-size:44px }
.intro-actions { gap:12px }
.section-wrap { padding-inline:18px }
.chapter-tabs button { font-size:10px }
.public-nav { gap:16px }
.identity-art { width:225px }
}
@media (prefers-reduced-motion:reduce) {
html { scroll-behavior:auto }
*,
*:before,
*:after { animation:none!important;transition:none!important }
}
@media print {
.topbar,
.intro-actions,
dialog,
.consent,
.network-banner,
.toast { display:none!important }
.intro { grid-template-columns:1fr 1fr }
.section-wrap { max-width:none;padding-inline:16px }
.devices-section { break-inside:avoid }
body { background:white }
.site-footer { font-size:10pt }
}

/* Canonical three-zone workspace. */
body[data-view="workspace"] {
  height: 100dvh; min-height: 0;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}
body[data-view="workspace"] .topbar { min-height: 68px; padding: 8px 26px; }
body[data-view="workspace"] .brand { font-size: 25px; }
body[data-view="workspace"] .brand img { width: 44px; height: 44px; }
body[data-view="workspace"] #entry,
body[data-view="workspace"] .site-footer { display: none; }
body[data-view="workspace"] #main { min-height: 0; grid-row: 3; overflow: hidden; }
body[data-view="workspace"] #networkBanner { grid-row: 2; }
.workspace {
  height: 100%; min-width: 0;
  display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--notebook-width);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "top top top" "explorer content context";
}
.workspace-top {
  grid-area: top; display: flex; gap: 16px; align-items: center; justify-content: space-between;
  padding: 14px 26px; min-width: 0; border-bottom: 1px solid var(--line);
  background: var(--card);
}
.workspace-identity { min-width: 0; }
.workspace-top .eyebrow { margin: 0 0 3px; font-size: 9px; }
.user-name { font: 600 20px/1.3 var(--serif); margin: 0; overflow-wrap: anywhere; }
.workspace-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.workspace-controls .button { min-height: 44px; }
#contextToggle { display: none; }
.shell-explorer {
  grid-area: explorer; min-height: 0; min-width: 0; padding: 28px 16px 24px;
  display: flex; flex-direction: column; background: var(--paper); border-right: 1px solid var(--line);
  overflow-y: auto; scrollbar-width: thin;
}
.explorer-heading { margin: 0 12px 24px; font-size: 9px; letter-spacing: .12em; }
.workspace-nav { display: flex; flex-direction: column; gap: 8px; }
.workspace-nav a {
  position: relative; display: flex; align-items: center; gap: 15px;
  min-height: 54px; padding: 13px 12px; border: 1px solid transparent; border-radius: var(--radius);
  font-size: 14px; line-height: 1.5; text-decoration: none; color: var(--ink);
}
.nav-index { min-width: 22px; font: italic 13px/1 var(--serif); color: var(--gold); }
.workspace-nav a:hover { background: var(--card); }
.workspace-nav a[aria-current="page"] {
  font-weight: 600; background: var(--forest); border-color: var(--forest); color: var(--card);
}
.workspace-nav a[aria-current="page"] .nav-index { color: var(--card); }
/* One quiet socket at the active connection, never a puzzle outline around every card. */
.workspace-nav a[aria-current="page"]::after {
  content: ''; position: absolute; right: -6px; top: calc(50% - 6px);
  width: 12px; height: 12px; background: var(--forest); border-radius: 50%; pointer-events: none;
}
.explorer-foot { margin-top: auto; padding: 38px 12px 0; color: var(--muted); }
.explorer-foot p { font: italic 16px/1.7 var(--serif); max-width: 20ch; margin: 0 0 22px; }
.explorer-foot a { font-size: 11px; line-height: 1.5; text-underline-offset: 4px; }
.workspace-panel {
  grid-area: content; min-width: 0; min-height: 0; overflow: auto;
  padding: 28px; overscroll-behavior: contain; scrollbar-gutter: stable; background: var(--card);
}
.workspace-panel > h2 { font-size: 34px; margin-bottom: 16px; }
.workspace-panel[aria-busy="true"] { cursor: progress; }
.panel-header { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 24px; }
.panel-header > div { min-width: 0; }
.panel-header .eyebrow { margin-bottom: 6px; }
.panel-header h2 { font-size: clamp(27px, 2.4vw, 36px); }
.panel-header .button { flex-shrink: 0; font-size: 12px; padding: 12px 15px; min-height: 44px; }
.garden-grid, .species-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: 16px; }
.garden-card, .species-card {
  min-width: 0; display: flex; flex-direction: column; align-items: start;
  padding: 24px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); text-decoration: none;
}
.garden-card:hover { border-color: var(--moss); }
.garden-card .eyebrow { margin: 0 0 12px; }
.garden-card h3, .species-card h3 { margin: 0 0 12px; font: 600 25px/1.25 var(--serif); }
.garden-card p, .species-card p { font-size: 14px; line-height: 1.8; color: var(--muted); white-space: pre-wrap; }
.card-action { margin-top: auto; padding-top: 16px; font-size: 12px; text-underline-offset: 4px; text-decoration: underline; }
.species-card .card-action { border: 0; background: transparent; color: var(--forest); min-height: 44px; padding: 12px 0; }
.species-card em { color: var(--muted); font: italic 18px/1.5 var(--serif); }
.empty-state { padding: clamp(24px, 4vw, 42px); border: 1px dashed var(--moss); border-radius: var(--radius); background: var(--paper); }
.empty-state h3 { font-size: 29px; margin: 0 0 14px; }
.empty-state p { max-width: 62ch; font-size: 14px; line-height: 1.85; color: var(--muted); }
.empty-state .button { margin-top: 16px; }
.state-message { font-size: 14px; line-height: 1.8; color: var(--muted); padding: 12px 0; }
.state-message.error { color: var(--error); }
.registry-help { max-width: 66ch; font-size: 14px; line-height: 1.8; color: var(--muted); }
.search-form { display: flex; gap: 12px; margin: 24px 0; max-width: 720px; }
.search-form input { flex: 1; min-width: 0; width: 100%; }
.search-form .button { flex-shrink: 0; }
.garden-stage { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.map-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; padding: 16px 20px; border-bottom: 1px solid var(--line); align-items: center; }
.map-toolbar h3 { margin: 0; font: 600 19px/1.3 var(--serif); }
.status-badge { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 3px; padding: 5px 9px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.status-badge::before { content: ''; width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; flex-shrink: 0; }
.map-host { position: relative; min-height: 290px; display: flex; flex-direction: column; justify-content: center; }
.boundary-preview { display: block; width: 100%; height: clamp(260px, 39dvh, 480px); }
.map-host > .state-message { margin: 0; padding: 42px 28px; text-align: center; }
.map-compass { position: absolute; top: 16px; right: 19px; margin: 0; color: var(--muted); font-size: 11px; }
.map-compass::before { content: '↑'; display: block; text-align: center; font-size: 22px; line-height: 1.3; }
.boundary-caption { margin: 0; padding: 14px 20px 18px; font-size: 12px; line-height: 1.7; color: var(--muted); border-top: 1px solid var(--line); }
.map-status { padding: 16px 20px; border-top: 1px solid var(--line); }
.map-status summary { cursor: pointer; font-size: 12px; min-height: 28px; line-height: 2.3; color: var(--forest); }
.map-status p { font-size: 13px; line-height: 1.8; color: var(--muted); }
.context-dock { grid-area: context; min-height: 0; min-width: 0; border-left: 1px solid var(--line); background: var(--paper); overflow: auto; scrollbar-width: thin; }
.workspace-context { min-width: 0; padding: 26px 23px; }
.context-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.context-top h2 { font: 600 25px/1.3 var(--serif); margin: 0; }
#contextClose { display: none; position: static; flex-shrink: 0; }
.context-body { padding-top: 24px; }
.context-body h3 { font: 600 25px/1.3 var(--serif); margin: 0 0 16px; }
.context-body h4 { font: 600 14px/1.5 var(--sans); margin: 25px 0 9px; }
.context-body p { font-size: 13px; line-height: 1.9; color: var(--muted); }
.context-body .eyebrow { font-size: 9px; margin-bottom: 12px; }
.context-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.context-body .context-explainer { font-size: 12px; padding-top: 18px; margin-top: 24px; border-top: 1px solid var(--line); }
.context-body .scientific-name { font: italic 19px/1.5 var(--serif); color: var(--muted); }
.context-dialog { margin: 0 0 0 auto; width: min(430px, 96vw); height: 100dvh; max-height: 100dvh; border-radius: 0; background: var(--paper); }
.context-dialog .workspace-context { padding: 22px 26px max(28px, env(safe-area-inset-bottom)); }
.context-dialog #contextClose { display: block; }
.workspace.is-focused { --sidebar-width: 76px; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-areas: "top top" "explorer content"; }
.workspace.is-focused .context-dock,
.workspace.is-focused .explorer-heading,
.workspace.is-focused .explorer-foot { display: none; }
.workspace.is-focused .shell-explorer { padding-inline: 10px; }
.workspace.is-focused .workspace-nav a { justify-content: center; padding-inline: 6px; }
.workspace.is-focused .nav-index { text-align: center; }
.workspace.is-focused .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.workspace.is-focused #contextToggle { display: inline-flex; }
@media (min-width: 1600px) { :root { --sidebar-width: 242px; --notebook-width: 328px; } .workspace-panel { padding: 34px 40px; } }
@media (max-width: 1179px) and (min-width: 901px) { :root { --sidebar-width: 180px; --notebook-width: 248px; } .workspace-panel { padding: 24px 20px; } .workspace-context { padding: 24px 18px; } .shell-explorer { padding-inline: 12px; } .workspace-nav a { gap: 9px; } }
@media (max-width: 900px) {
  body[data-view="workspace"] .topbar { flex-wrap: nowrap; padding: 8px 18px; }
  .workspace, .workspace.is-focused { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "content"; }
  .workspace-top { padding: 13px 20px; }
  .workspace-identity { max-width: 48%; }
  .workspace-panel { padding: 24px 20px calc(var(--nav-height) + 24px + env(safe-area-inset-bottom)); }
  .shell-explorer, .workspace.is-focused .shell-explorer { display: contents; }
  .explorer-heading, .explorer-foot, .context-dock, #focusWorkspace { display: none; }
  .workspace-nav {
    position: fixed; z-index: 35; inset: auto 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom)); gap: 5px;
    background: var(--paper); border-top: 1px solid var(--line);
  }
  .workspace-nav a, .workspace.is-focused .workspace-nav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; padding: 8px 2px; font-size: 12px; min-height: 53px; line-height: 1.4;
  }
  .workspace-nav a .nav-index { font-size: 10px; }
  .workspace.is-focused .nav-label { position: static; width: auto; height: auto; clip-path: none; white-space: normal; }
  .workspace-nav a[aria-current="page"]::after { right: calc(50% - 5px); top: -5px; width: 10px; height: 10px; }
  #contextToggle { display: inline-flex; }
  .context-dialog { margin: auto 0 0; width: 100%; max-width: 100%; height: auto; max-height: 80dvh; border-radius: 17px 17px 0 0; }
  .context-dialog .workspace-context { padding: 12px 22px max(24px, env(safe-area-inset-bottom)); }
  .context-dialog .context-top { position: sticky; top: -12px; padding-top: 12px; z-index: 1; background: var(--paper); }
  body[data-view="workspace"] .toast { bottom: calc(var(--nav-height) + 16px + env(safe-area-inset-bottom)); }
  body[data-view="workspace"] .consent { bottom: calc(var(--nav-height) + 12px + env(safe-area-inset-bottom)); }
}
@media (max-width: 620px) {
  .workspace-top { padding: 12px 16px; gap: 12px; align-items: start; }
  .workspace-top .eyebrow { font-size: 8px; letter-spacing: .08em; }
  .user-name { font-size: 18px; }
  .workspace-controls { gap: 5px; }
  .workspace-controls .button { font-size: 11px; padding: 10px 9px; }
  .workspace-panel { padding: 21px 16px calc(var(--nav-height) + 22px + env(safe-area-inset-bottom)); }
  .panel-header { flex-wrap: wrap; margin-bottom: 20px; gap: 13px; }
  .panel-header h2 { font-size: 29px; }
  .panel-header .button { font-size: 12px; }
  .garden-card, .species-card { padding: 23px; }
  .empty-state { padding: 25px; }
  .empty-state h3 { font-size: 26px; }
  .search-form { gap: 8px; }
  .search-form .button { padding: 12px 14px; }
  .map-toolbar { padding: 14px 16px; gap: 8px; }
  .map-toolbar h3 { font-size: 18px; }
  .map-host { min-height: 230px; }
  .boundary-preview { height: clamp(220px, 33dvh, 380px); }
  .boundary-caption { padding: 14px 16px; font-size: 11px; }
  .map-status { padding: 13px 16px; }
}
@media (max-width: 360px) {
  .workspace-top { flex-wrap: wrap; }
  .workspace-identity { max-width: 100%; }
  .workspace-controls { width: 100%; justify-content: flex-end; }
  .workspace-nav { gap: 3px; padding-inline: 6px; }
  .workspace-nav a { font-size: 11px; }
}
@media print {
  body[data-view="workspace"], body[data-view="workspace"] #main { display: block; height: auto; overflow: visible; }
  .workspace, .workspace.is-focused { display: block; height: auto; }
  .workspace-top, .shell-explorer, .workspace-nav, .workspace-controls, .context-dialog { display: none !important; }
  .workspace-panel, .context-dock, .workspace-context { display: block !important; overflow: visible; height: auto; padding: 16px; border: 0; }
  .workspace-panel .button, .species-card .card-action { display: none; }
  .garden-stage, .garden-card, .species-card { break-inside: avoid; }
  .boundary-preview { height: 300px; }
}