/* App shell: status strip, sidebar, top bar and page density. Colours come from Grove's variables. */
:root{--strip:30px;--bar:44px;--side:216px;--ok:#1d8a5f;--warn:#b26a00;--bad:#c62f42}
body.dark,body[data-ui=grove]{--ok:#57c79a;--warn:#e7ad52;--bad:#f58d9a}

/* Status strip: same place and meaning in every style */
#status-strip{position:fixed;inset:0 0 auto 0;height:var(--strip);z-index:40;display:flex;align-items:center;gap:6px;padding:0 10px;background:#030806;color:#d2e0d6;font-size:11.5px;border-top:2px solid var(--strip-band,#2b4a37);border-bottom:1px solid rgba(255,255,255,.05);white-space:nowrap;overflow:hidden}
#status-strip[hidden]{display:none}
body[data-shell-state=paper] #status-strip{--strip-band:#3d5e2a}
body[data-shell-state=halted] #status-strip,body[data-shell-state=offline] #status-strip{--strip-band:#ef4a5d}
.strip-chip{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--ui-radius-xs);color:inherit;text-decoration:none;background:rgba(255,255,255,.05);font-weight:500}
a.strip-chip:hover{background:rgba(255,255,255,.09)}
.strip-chip[data-tone=paper]{background:transparent;color:#d9f79a;font-weight:600;border:1px solid rgba(200,245,90,.3)}
.strip-chip[data-tone=ok]::before,.strip-chip[data-tone=warn]::before{content:'';width:7px;height:7px;border-radius:var(--ui-radius-round);margin-right:6px;background:#57c79a}
.strip-chip[data-tone=warn]::before{background:#e7ad52;border-radius:var(--ui-radius-xs)}
.strip-chip[data-tone=danger]{background:#a11e30;color:#fff;font-weight:700;letter-spacing:.02em}
.strip-moved a,.strip-moved span,#status-strip #queue-count,#status-strip #alert-badge{color:#a9bdb1!important;background:none!important;border:0!important;font-size:11.5px!important;padding:0 6px!important;min-height:0}
.strip-space{flex:1}
#strip-clock{color:#a9bdb1;font-variant-numeric:tabular-nums;padding:0 8px}
.strip-search{display:inline-flex;align-items:center;gap:10px;height:21px;min-height:0;padding:0 6px 0 9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--ui-radius-sm);color:#a9bdb1;font-size:11.5px;cursor:pointer}
.strip-search:hover{color:#fff;border-color:rgba(200,245,90,.4)}
.strip-search kbd{font:inherit;font-size:10px;opacity:.75}

/* Frame */
.sidebar{top:var(--strip);width:var(--side);padding:8px 8px 6px}
.main-shell{margin-left:var(--side)}
.topbar{top:var(--strip);height:var(--bar);padding:0 16px}
#app{padding-top:var(--strip)}
footer{display:none}
.brand{padding:2px 6px 8px;margin:0;gap:9px}
.brand .brand-mark,.sidebar .brand-mark{width:24px;height:24px;font-size:14px;border-radius:var(--ui-radius-sm)}
.brand span small{display:none}
.sidebar-bottom{display:none}
.breadcrumb{font-size:12.5px}

/* Navigation */
#navigation{overflow-y:auto;flex:1;margin:0 -2px;padding:0 2px;scrollbar-width:thin}
#navigation summary,#navigation a.shell-solo{display:flex;align-items:center;gap:9px;height:29px;padding:0 8px;border-radius:var(--ui-radius-xs);color:var(--nav-ink,#c1cddd);font-size:12.5px;font-weight:600;cursor:pointer;list-style:none;margin:1px 0;text-decoration:none}
#navigation summary::-webkit-details-marker{display:none}
#navigation summary::after{content:'';margin-left:auto;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);opacity:.55;transition:transform .1s}
#navigation details[open]>summary::after{transform:rotate(45deg)}
#navigation summary:hover,#navigation a.shell-solo:hover{background:var(--nav-selected,#25384e)}
.shell-icon{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.shell-links{padding:1px 0 5px 16px;margin-left:7px;border-left:1px solid color-mix(in srgb,var(--nav-ink,#c1cddd) 18%,transparent)}
.shell-links h4{margin:6px 0 2px 8px;font-size:10px;font-weight:600;color:var(--nav-ink,#c1cddd);opacity:.68}
#navigation .shell-links a{display:block;padding:4px 8px;margin:1px 0;font-size:12.5px;line-height:1.35;border-radius:var(--ui-radius-xs)}
#navigation a.active{font-weight:600}

/* Page search */
#serve-palette{width:min(560px,calc(100vw - 32px));padding:0;margin:12vh auto auto;border:1px solid var(--line);border-radius:var(--ui-radius-sm);background:var(--surface);color:var(--ink);box-shadow:0 18px 50px #0007;overflow:hidden}
#serve-palette::backdrop{background:#04090f88}
#serve-palette input{border:0;border-bottom:1px solid var(--line);border-radius:0;font-size:15px;padding:12px 14px;min-height:0;outline:none}
#serve-palette ul{list-style:none;margin:0;padding:4px;max-height:50vh;overflow:auto}
#serve-palette li{display:flex;justify-content:space-between;gap:12px;padding:7px 10px;border-radius:var(--ui-radius-xs);cursor:pointer;font-size:13px}
#serve-palette li small{color:var(--muted)}
#serve-palette li[aria-selected=true]{background:var(--teal);color:var(--surface)}
#serve-palette li[aria-selected=true] small{color:inherit}
#serve-palette li.shell-none{color:var(--muted);cursor:default}
#serve-palette p{margin:0;padding:6px 14px;font-size:11px;color:var(--muted);border-top:1px solid var(--line)}

/* Denser pages */
main{padding:16px 18px 40px}
h1{font-size:20px;letter-spacing:-.3px;margin:0 0 3px}
h2{font-size:13.5px;letter-spacing:0;margin:0}
.page-head{margin-bottom:12px;gap:14px}
.page-head p{font-size:12.5px;margin:0;max-width:90ch}
.panel{margin-bottom:12px;border-radius:var(--ui-radius-sm)}
.panel-head{padding:8px 12px;min-height:38px;gap:10px}
.panel-body{padding:12px}
.notice{padding:8px 12px;margin-bottom:12px;line-height:1.5}
.metric{padding:12px 14px}
th{padding:6px 10px;font-size:11px}
td{padding:6px 10px;font-size:12.5px;font-variant-numeric:tabular-nums}
input,select,textarea{min-height:31px;padding:5px 8px;font-size:12.5px}
label{font-size:11.5px}
button,.button{font-size:12.5px}
.topbar-actions{gap:10px;font-size:12px}

@media(max-width:1000px){:root{--side:190px}.main-shell{margin-left:var(--side)}.sidebar{width:var(--side)}}
@media(max-width:720px){
  .sidebar{width:232px;z-index:30}.main-shell{margin-left:0}
  main{padding:12px}
  #strip-clock,#strip-health,.strip-search span,#strip-alerts{display:none}
  .topbar{padding:0 10px}
}
@media print{#status-strip,.sidebar,.topbar{display:none}#app{padding:0}.main-shell{margin:0}}

/* UI rebuild: environment segments, sidebar counts, assistant card, grouped palette, jobs button */
.shell-env{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;margin:0 0 10px;border-radius:var(--ui-radius-field);background:color-mix(in srgb,var(--nav-ink,#c1cddd) 8%,transparent)}
.shell-env-seg{display:flex;align-items:center;justify-content:center;gap:6px;height:28px;border-radius:var(--ui-radius-field);color:var(--nav-ink,#c1cddd)!important;text-decoration:none;font-size:12px;font-weight:600}
.shell-env-seg:hover{background:var(--nav-selected,#25384e)}
.shell-env-seg b{font-size:11px;padding:0 6px;border-radius:var(--ui-radius-pill);background:color-mix(in srgb,var(--nav-ink,#c1cddd) 14%,transparent)}
.shell-env-seg[data-env=paper]::before{content:'P';font-size:10px;width:14px;height:14px;border-radius:var(--ui-radius-xs);display:grid;place-items:center;background:#8cc8ff;color:#06121f;font-weight:800}
.shell-env-seg[data-env=demo]::before{content:'D';font-size:10px;width:14px;height:14px;border-radius:var(--ui-radius-xs);display:grid;place-items:center;background:#f2c14e;color:#1d1400;font-weight:800}
.shell-count{margin-left:auto;min-width:20px;height:18px;padding:0 6px;border-radius:var(--ui-radius-pill);display:inline-grid;place-items:center;font-size:10.5px;font-weight:700;background:var(--nav-accent,#58b3b2);color:var(--nav,#142235)}
.shell-count[hidden]{display:none}
#navigation .shell-links a{display:flex!important;align-items:center;gap:6px}
.shell-assistant{display:flex;gap:10px;align-items:flex-start;margin:12px 2px 4px;padding:11px 12px;border-radius:var(--ui-radius-control);text-decoration:none;color:var(--nav-ink,#c1cddd)!important;background:color-mix(in srgb,var(--nav-accent,#58b3b2) 9%,transparent);border:1px solid color-mix(in srgb,var(--nav-accent,#58b3b2) 22%,transparent)}
.shell-assistant b{display:block;font-size:12.5px}.shell-assistant small{display:block;font-size:11px;line-height:1.4;opacity:.9;margin-top:2px}
.shell-assistant .shell-icon{color:var(--nav-accent,#58b3b2);opacity:1;margin-top:1px}
#serve-palette li.shell-palette-group{display:block;padding:8px 10px 3px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:default}
#serve-palette p{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
#serve-palette kbd{font:inherit;padding:0 4px;border:1px solid var(--line);border-radius:var(--ui-radius-xs)}
body[data-ui=grove] #serve-palette{background:#0b1610;border-color:rgba(255,255,255,.09);border-radius:var(--ui-radius);box-shadow:0 30px 80px -20px #000,0 0 0 1px rgba(200,245,90,.06)}
body[data-ui=grove] #serve-palette::backdrop{background:#020604b3;backdrop-filter:blur(3px)}
body[data-ui=grove] #serve-palette li[aria-selected=true]{background:linear-gradient(90deg,rgba(200,245,90,.16),rgba(200,245,90,.04));box-shadow:inset 2px 0 0 #c8f55a;color:#f1f7f2}
#strip-help{padding:0 6px}
@media(max-width:720px){#strip-help{display:none}}

/* Review fixes: top bar trail, phone menu, sidebar room for the assistant card */
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--ink);text-decoration:underline}
.breadcrumb>span{margin:0 8px}
#topbar-more{display:none;font-size:18px;line-height:1;padding:4px 10px}
#navigation{min-height:0;padding-bottom:8px}
.shell-assistant{flex:none}
@media(max-height:760px){.shell-assistant small{display:none}}
@media(max-width:720px){
  .topbar{position:sticky}
  .breadcrumb>a,.breadcrumb>span{display:none}
  #topbar-more{display:inline-flex;margin-left:auto}
  .topbar-actions{display:none}
  .topbar-actions.open{display:flex;flex-direction:column;align-items:stretch;gap:6px;position:absolute;top:100%;right:8px;z-index:35;min-width:200px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--ui-radius-field);box-shadow:0 14px 40px #0008}
}