/* ============================================================================
   redesign:web-F2 — shell chrome: global bar, sync hairline, rail, sub-nav
   strip, bottom bar, popovers (scope / quick capture / inbox / avatar / verdict
   "Why?" / sync sheet), search overlay, banners.

   Loaded AFTER styles.css (see index.html). The legacy rail / navcol / subnav /
   tabbar / header rules that this file replaces were deleted from styles.css.

   One CSS variable drives every sticky offset (the old file hard-coded 59px and
   56px in half a dozen places):
     --shell-top    bar + hairline            (55px)  — where the rail / strip stick (>=768)
     --shell-stick  everything above content  (99px at >=768, 44px below — only the strip
                    sticks on a phone, the bar scrolls away) — use this for a page's own
                    sticky headers: top: var(--shell-stick)
   They are declared on .shell, so anything inside #view can read them.

   Geometry (handoff README "Shell"): bar 52px, hairline 3px, strip 44px, rail
   72px, bottom bar 60px (+ safe area); breakpoints 768 and 1200. Controls draw
   34px (pills 30px) with an invisible padded hit area so the touch target is
   44px. Radius 0 everywhere except the 8px status dots. No animation: nothing
   in the shell pulses, blinks or slides; hover tints are instant.

   Tokens only (--c-*): theme switches and Auto-by-sun recolour live.
   ============================================================================ */

/* ---- layout ------------------------------------------------------------- */
.shell {
  --shell-bar-h: 52px;
  --shell-sync-h: 3px;
  --shell-subnav-h: 44px;
  --shell-rail-w: 72px;
  --shell-tabbar-h: 60px;
  --shell-top: calc(var(--shell-bar-h) + var(--shell-sync-h));
  --shell-stick: var(--shell-subnav-h);
  display: grid;
  min-height: 100svh;
  grid-template-columns: minmax(0, 1fr);
  /* the tab-bar track adds the safe-area inset on top of its 60px so the bar's own
     padding has room to grow (needs viewport-fit=cover in index.html) */
  grid-template-rows: var(--shell-bar-h) var(--shell-sync-h) var(--shell-subnav-h) minmax(0, 1fr) calc(var(--shell-tabbar-h) + env(safe-area-inset-bottom, 0px));
  grid-template-areas: "header" "sync" "subnav" "content" "tabbar";
}
@media (min-width: 768px) {
  .shell {
    --shell-stick: calc(var(--shell-top) + var(--shell-subnav-h));
    grid-template-columns: var(--shell-rail-w) minmax(0, 1fr);
    grid-template-rows: var(--shell-bar-h) var(--shell-sync-h) var(--shell-subnav-h) minmax(0, 1fr);
    grid-template-areas: "header header" "sync sync" "rail subnav" "rail content";
  }
}
.main {
  grid-area: content; min-width: 0;
  padding: 22px 26px 60px;
  max-width: calc(var(--content-max, 1240px) + 52px);   /* 1240px of content inside the 26px gutters */
}
@media (max-width: 767.98px) { .main { padding: 16px 14px 40px; } }

/* ---- global bar --------------------------------------------------------- */
.shell-header {
  grid-area: header; position: relative; z-index: 120;
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 0 14px; background: var(--c-bg); border-bottom: 1px solid var(--c-line);
}
@media (min-width: 768px) { .shell-header { position: sticky; top: 0; } }
@media (max-width: 767.98px) { .shell-header { gap: 6px; padding: 0 10px; } }

.wordmark {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: 1px;
  font-family: var(--font-heading); font-weight: 600; font-size: 22px; letter-spacing: -0.01em;
  color: var(--c-ink); line-height: 1.1; user-select: none;
}
.wordmark .wm-box { border: 1px solid var(--c-ink); padding: 0 4px; line-height: 1.1; }
.wordmark .wm-ai { color: var(--c-accent); }

/* every bar control: 34px drawn, 44px hit area */
.bar-btn {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 34px; padding: 0 10px; margin: 0;
  background: transparent; color: var(--c-ink); border: 1px solid var(--c-line-control); border-radius: 0;
  font: inherit; line-height: 1; cursor: pointer;
}
.bar-btn::before { content: ""; position: absolute; inset: -5px -2px; }
.bar-btn:hover { background: var(--c-hover-btn); }
.bar-btn[aria-expanded="true"] { background: var(--c-hover-btn); }
.bar-btn.sq { width: 34px; padding: 0; }
.bar-btn .ic { flex: none; }

/* scope chip */
.shell-scope { flex: 0 1 auto; min-width: 0; position: relative; }
.shell-plane, .shell-scope .scope-chip { position: relative; }
.scope-chip-btn { max-width: 100%; font: 600 13px var(--font-heading); letter-spacing: 0.04em; }
.scope-chip-label { min-width: 0; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-chip-sub { color: var(--c-ink-2); font-weight: 400; white-space: nowrap; }
.scope-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; }
.scope-dot.d-blocking { background: var(--c-blocking); }
.scope-dot.d-caution { background: var(--c-caution-fill); }
.scope-dot.d-advisory { background: var(--c-advisory); }
.scope-dot.d-satisfied { background: var(--c-satisfied); }
.scope-dot.d-none { border: 1.5px solid var(--c-ink-3); }
@media (max-width: 767.98px) { .scope-chip-sub { display: none; } .scope-chip-label { max-width: 110px; } }
@media (max-width: 400px) { .scope-chip-label { max-width: 84px; } }
/* "No aircraft yet" fallback (empty fleet) */
.shell-plane:not(.scope-chip) {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px;
  border: 1px dashed var(--c-line-control); color: var(--c-ink-2); font-size: 13px; white-space: nowrap;
}
.shell-plane:not(.scope-chip) .ps-label { font: 600 11px var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 480px) { .shell-plane:not(.scope-chip) .ps-label { display: none; } }

/* verdict chip + next-action line (>= 1200 only; below, the slot is just the spacer) */
.shell-verdict { flex: 1 1 0; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; }
@media (max-width: 1199.98px) { .shell-verdict > :not(.verdict-why) { display: none; } }
.vchip {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--c-ink);
  font: 600 12px var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.vchip::before { content: ""; position: absolute; inset: -8px -2px; }
.vchip.k-blocking { background: var(--c-blocking); color: var(--c-on-blocking); }
.vchip.k-caution { background: var(--c-caution-fill); color: var(--c-on-caution); }
.vchip.k-advisory { background: var(--c-advisory); color: var(--c-on-advisory); }
.vchip.k-satisfied { background: var(--c-satisfied); color: var(--c-on-satisfied); }
/* nothing flagged / no data / not tracked: outlined, never a colour fill ("No data" is never a colour) */
.vchip.k-none { border-color: var(--c-line-control); color: var(--c-ink); }
.vchip.k-unknown { border-color: var(--c-line-control); color: var(--c-ink-2); }
.vchip.k-notTracked { border: 1px dashed var(--c-nottracked); color: var(--c-ink-2); }
.vline {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; color: var(--c-ink-2);
}
.vline .v-arrow { vertical-align: -2px; margin: 0 3px; }
.vline a.v-next { color: var(--c-ink); font-weight: 500; }
.vline a.v-next .v-arrow { margin: 0 0 0 4px; }
.vline .v-retry { font: inherit; font-weight: 500; color: var(--c-accent-ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.verdict-why { top: 42px; left: 50%; transform: translateX(-50%); width: 420px; max-width: calc(100vw - 24px); padding: 10px 12px 12px; }
.verdict-why ul { margin: 2px 0 8px; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--c-ink); }
.verdict-why .why-none { margin: 2px 0 8px; font-size: 13px; color: var(--c-ink-2); }
.verdict-why .why-src { font-size: 12px; color: var(--c-ink-2); margin-bottom: 8px; }
.verdict-why .why-pic { font: 600 11px var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-2); border-top: 1px solid var(--c-line); padding-top: 8px; }

/* search trigger */
.search-trigger-btn { color: var(--c-ink-2); font-size: 13px; }
.search-trigger-kbd { font: 500 11px var(--font-heading); letter-spacing: 0.06em; border: 1px solid var(--c-line); padding: 1px 5px; color: var(--c-ink-2); }
@media (max-width: 1199.98px) {
  .search-trigger-btn { width: 34px; padding: 0; }
  .search-trigger-label, .search-trigger-kbd { display: none; }
}

/* quick capture "+" (>= 768): the one solid accent control */
.qc-wrap { position: relative; flex: none; }
.qc-btn { background: var(--c-accent-solid); border-color: var(--c-accent-solid); color: var(--c-on-accent); }
.qc-btn:hover, .qc-btn[aria-expanded="true"] { background: var(--c-accent-solid); filter: brightness(1.08); }
@media (max-width: 767.98px) { .qc-wrap { display: none; } }

/* inbox */
.mailbox-wrap { position: relative; flex: none; }
.mailbox-badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
  background: var(--c-blocking); color: var(--c-on-blocking);
  font: 600 11px/17px var(--font-heading); text-align: center; pointer-events: none;
}

/* avatar */
.avatar-wrap { position: relative; flex: none; }
.avatar-btn { background: var(--c-surface); font: 600 12px var(--font-heading); letter-spacing: 0.04em; }

/* ---- popovers (scope / quick capture / inbox / avatar / verdict / sync) --- */
.shell-pop {
  position: absolute; z-index: 200; box-sizing: border-box;
  background: var(--c-bg); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: 0;
  box-shadow: var(--shadow-lg); padding: 6px;
}
/* blueprint registration marks: 11px plus-signs, 55% ink, drawn 6px outside each corner by one
   pseudo-element (so they survive a panel's innerHTML being rewritten) */
.shell-pop::before, .search-box::before {
  content: ""; position: absolute; inset: -6px; pointer-events: none;
  --mk: color-mix(in srgb, var(--c-ink) 55%, transparent);
  background:
    linear-gradient(var(--mk), var(--mk)) left 5px top 0 / 1px 11px no-repeat,
    linear-gradient(var(--mk), var(--mk)) left 0 top 5px / 11px 1px no-repeat,
    linear-gradient(var(--mk), var(--mk)) right 5px top 0 / 1px 11px no-repeat,
    linear-gradient(var(--mk), var(--mk)) right 0 top 5px / 11px 1px no-repeat,
    linear-gradient(var(--mk), var(--mk)) left 5px bottom 0 / 1px 11px no-repeat,
    linear-gradient(var(--mk), var(--mk)) left 0 bottom 5px / 11px 1px no-repeat,
    linear-gradient(var(--mk), var(--mk)) right 5px bottom 0 / 1px 11px no-repeat,
    linear-gradient(var(--mk), var(--mk)) right 0 bottom 5px / 11px 1px no-repeat;
}
.pop-head { font: 600 11px var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-2); padding: 6px 8px; }
.menu-sep { border-top: 1px solid var(--c-line); margin: 6px 2px; }

/* scope popover */
.scope-chip-panel { top: 42px; left: 0; width: 300px; max-width: calc(100vw - 20px); }
.scope-chip-section { display: flex; flex-direction: column; }
.scope-chip-tails { max-height: 260px; overflow-y: auto; }
.scope-chip-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px;
  padding: 9px 8px; border: 0; border-radius: 0; background: none; color: var(--c-ink);
  font: inherit; text-align: left; cursor: pointer;
}
.scope-chip-opt b { font-family: var(--font-heading); font-size: 15px; font-weight: 700; }
.scope-chip-opt .sub { color: var(--c-ink-2); font-size: 12px; margin: 0; }
.scope-chip-opt:hover { background: var(--c-hover-row); }
.scope-chip-opt.active { background: var(--c-accent-tint); }
.opt-status { display: inline-flex; align-items: center; gap: 5px; flex: none; font: 600 11px var(--font-heading); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-2); }
.opt-status.s-blocking { color: var(--c-blocking); }
.opt-status.s-caution { color: var(--c-caution); }
.opt-status.s-advisory { color: var(--c-advisory); }
.opt-status.s-satisfied { color: var(--c-satisfied); }
.scope-chip-divider { border-top: 1px solid var(--c-line); margin: 6px 2px; }
.scope-chip-year-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 4px; font-size: 12px; color: var(--c-ink-2); }
.scope-chip-year-row label { margin: 0; font-size: 12px; }
.scope-chip-year-row select { width: auto; height: 32px; padding: 0 8px; font-size: 13px; }
@media (max-width: 767.98px) { .scope-chip-panel { position: fixed; top: 58px; left: 10px; right: 10px; width: auto; max-width: none; } }

/* quick capture + avatar menus */
.qc-panel { top: 42px; right: 0; width: 280px; max-width: calc(100vw - 20px); }
.avatar-panel { top: 42px; right: 0; width: 290px; max-width: calc(100vw - 20px); }
.menu-who { padding: 8px; font-size: 12px; color: var(--c-ink-2); word-break: break-all; }
.menu-who .chip { margin-left: 6px; }
.menu-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; box-sizing: border-box; min-height: 44px;
  padding: 9px 8px; border: 0; border-radius: 0; background: none; color: var(--c-ink);
  font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer;
}
.menu-link:hover { background: var(--c-hover-row); text-decoration: none; }
.menu-link .menu-sub { color: var(--c-ink-2); font-size: 12px; }
.menu-link .menu-count { font: 600 12px var(--font-heading); letter-spacing: 0.06em; color: var(--c-ink-3); }
.menu-link.danger:hover { color: var(--c-blocking); }
.menu-empty { padding: 8px; font-size: 13px; color: var(--c-ink-2); }
.menu-compact-only { display: none; }
@media (max-width: 767.98px) { .menu-compact-only { display: block; } }
/* redesign:web-D11 — the compact verdict in the avatar menu: only below 1200 px, where the bar's chip and next-action line are hidden.
   Its content is built by menuVerdictHtml (shell-chrome.js) and is never shown above 1200 px. The line wraps (no ellipsis) so a long
   trip or next-action label stays readable on a phone. */
.avatar-verdict { display: none; }
@media (max-width: 1199.98px) { .avatar-verdict { display: block; } }
.avatar-verdict-row { display: flex; align-items: center; padding: 2px 8px 4px; }
.avatar-verdict-row .vchip { cursor: default; }
.avatar-verdict-line { padding: 0 8px 6px; font-size: 13px; line-height: 1.45; color: var(--c-ink-2); overflow-wrap: anywhere; }
.avatar-verdict-line .v-next { color: var(--c-ink); font-weight: 500; }
.avatar-verdict-line .v-retry { font: inherit; font-weight: 500; color: var(--c-accent-ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.avatar-verdict-line .v-arrow { vertical-align: -2px; margin: 0 3px; }
/* redesign:web-qa-1 — the avatar menu is ONE scroller (it holds Sign out + the theme picker; unscrollable it was
   clipped on phone landscape / iPhone SE / 640px Androids). fitAvatarMenu() sets the exact max-height on open and
   on resize; these two rules are the fallback. The scroller is INSIDE .shell-pop so the corner marks (drawn
   outside the panel by ::before) are not clipped. */
.menu-scroll { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 767.98px) { .menu-scroll { max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); } }
.avatar-panel-theme { padding: 4px 8px 8px; }
.avatar-panel-theme-label { display: block; font: 600 11px var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-2); padding: 2px 0 6px; }
.theme-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.theme-seg-btn {
  position: relative; height: 36px; padding: 0 9px; background: transparent; color: var(--c-ink-2);
  border: 1px solid var(--c-line-control); border-radius: 0; cursor: pointer;
  font: 600 12px var(--font-heading); letter-spacing: 0.06em; text-transform: uppercase;
}
.theme-seg-btn::before { content: ""; position: absolute; inset: -4px 0; }   /* 44px hit area */
.theme-seg-btn:hover { color: var(--c-ink); background: var(--c-hover-btn); }
.theme-seg-btn.active { background: var(--c-accent-solid); border-color: var(--c-accent-solid); color: var(--c-on-accent); }
.theme-hint { margin: 6px 0 0; font-size: 12px; color: var(--c-ink-2); }

/* inbox dropdown */
.notif-panel { top: 42px; right: -44px; width: 340px; max-width: calc(100vw - 20px); padding: 0; }
@media (max-width: 767.98px) { .notif-panel { right: -40px; } }
.notif-head { padding: 10px 12px; font: 600 11px var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-2); border-bottom: 1px solid var(--c-line); }
.notif-scroll { max-height: min(70vh, 520px); max-height: min(70vh, 520px, calc(100dvh - 200px)); overflow-y: auto; }   /* redesign:web-qa-1 — also leaves room for the header + "Open Inbox" foot on a short (landscape) screen */
.notif-item { position: relative; padding: 10px 30px 10px 12px; border-bottom: 1px solid var(--c-line-2); border-left: 3px solid transparent; cursor: pointer; }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--c-hover-row); }
.notif-item.unread { border-left-color: var(--c-accent); }
.notif-item .t { font-weight: 700; font-size: 14px; }
.notif-item .b { font-size: 12px; color: var(--c-ink-2); margin-top: 2px; }
.notif-item .d { font-size: 12px; color: var(--c-ink-2); margin-top: 4px; }
.notif-del {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 0; background: none;
  color: var(--c-ink-2); cursor: pointer; font-size: 12px; line-height: 1;
}
.notif-del:hover { color: var(--c-blocking); background: var(--c-hover-btn); }
.notif-foot { padding: 8px 12px; border-top: 1px solid var(--c-line); font-size: 13px; }

/* ---- sync hairline (visual only: never takes a click) -------------------- */
.shell-sync {
  grid-area: sync; height: var(--shell-sync-h); pointer-events: none;
  background-color: var(--c-bg); background-image: linear-gradient(var(--c-line), var(--c-line));
}
@media (min-width: 768px) { .shell-sync { position: sticky; top: var(--shell-bar-h); z-index: 119; } }
.shell-sync[data-sync="pending"] { background-image: repeating-linear-gradient(90deg, var(--c-accent) 0 8px, transparent 8px 14px); }
.shell-sync[data-sync="offline"] { background-image: repeating-linear-gradient(90deg, var(--c-caution-fill) 0 8px, transparent 8px 14px); }
.shell-sync[data-sync="failed"] { background-image: linear-gradient(var(--c-blocking), var(--c-blocking)); }

/* ---- rail (>= 768) ------------------------------------------------------- */
.shell-rail {
  grid-area: rail; display: none; position: sticky; top: var(--shell-top); align-self: start; z-index: 80;
  height: calc(100svh - var(--shell-top)); overflow-y: auto; flex-direction: column; align-items: stretch;
  padding-top: 8px; background: var(--c-bg); border-right: 1px solid var(--c-line);
}
@media (min-width: 768px) { .shell-rail { display: flex; } }
.rail-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 4px 10px; border-left: 3px solid transparent; border-radius: 0; color: var(--c-ink-2);
  font: 600 11px var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; text-decoration: none;
}
.rail-item:hover { background: var(--c-hover-row); color: var(--c-ink); text-decoration: none; }
.rail-item.active { border-left-color: var(--c-accent); background: var(--c-accent-tint); color: var(--c-accent-ink); }
.rail-item .nav-ic, .rail-item .nav-ic svg { width: 22px; height: 22px; display: block; }
.rail-item-label { line-height: 1.15; }
/* status pips: caution = round, blocking = diamond — shape as well as colour; the word is in aria-label / title */
.pip { position: absolute; top: 8px; right: 10px; width: 8px; height: 8px; box-sizing: border-box; }
.pip-caution { border-radius: 50%; background: var(--c-caution-fill); box-shadow: 0 0 0 1.5px var(--c-bg); }
.pip-blocking { transform: rotate(45deg) scale(0.92); background: var(--c-blocking); box-shadow: 0 0 0 1.5px var(--c-bg); }
.tab-item .pip { right: 22%; }
.rail-item.active .pip { box-shadow: 0 0 0 1.5px var(--c-accent-tint); }

/* ---- sub-nav strip -------------------------------------------------------- */
.shell-subnav {
  grid-area: subnav; position: sticky; top: 0; z-index: 90;
  display: flex; align-items: center; min-width: 0; height: var(--shell-subnav-h);
  background: var(--c-bg); border-bottom: 1px solid var(--c-line);
}
@media (min-width: 768px) { .shell-subnav { top: var(--shell-top); } }
.subnav-scroll {
  position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px;
  height: 100%; overflow-x: auto; overflow-y: hidden; padding: 0 14px 0 0;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.subnav-scroll::-webkit-scrollbar { display: none; }
/* soft fade where the strip continues (classes set by pinSubnavActive's scroll listener) */
.subnav-scroll.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
/* redesign:web-D11 — the scroll-right control: a 44 px cell at the trailing edge, shown (subnavEdge in app.js) only while pills run past
   it. A scroll control, never a More menu. No transition: the scroll itself is smooth, or instant under reduced motion. */
.subnav-more {
  flex: none; width: 44px; height: 100%; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  padding: 0; background: var(--c-bg); border: 0; border-left: 1px solid var(--c-line); color: var(--c-ink-2); cursor: pointer;
}
.subnav-more:hover { color: var(--c-ink); background: var(--c-hover-row); }
.subnav-more[hidden] { display: none; }
.subnav-title {
  position: sticky; left: 0; z-index: 1; flex: none; margin-right: 8px; padding: 0 8px 0 14px; align-self: stretch;
  display: inline-flex; align-items: center; background: var(--c-bg);
  font: 600 13px var(--font-heading); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-2); white-space: nowrap;
}
.subnav-pill {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--c-ink-2);
  font: 500 13px var(--font-body); white-space: nowrap; text-decoration: none;
}
.subnav-pill::before { content: ""; position: absolute; inset: -7px 0; }
.subnav-pill:hover { background: var(--c-hover-row); color: var(--c-ink); text-decoration: none; }
.subnav-pill.active { border-color: var(--c-accent); background: var(--c-accent-tint); color: var(--c-accent-ink); }
.pill-count { font: 600 12px var(--font-heading); letter-spacing: 0.02em; color: var(--c-ink-3); }
.subnav-pill.active .pill-count { color: var(--c-accent-ink); }
/* written sync state, always visible at the strip's right end */
.subnav-sync {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; align-self: stretch;
  margin: 0; padding: 0 14px 0 12px; background: var(--c-bg); border: 0; border-left: 1px solid var(--c-line-2); border-radius: 0; cursor: pointer;
  font: 500 11px var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-2); white-space: nowrap;
}
.subnav-sync:hover { color: var(--c-ink); }
.sync-sq { display: inline-block; width: 7px; height: 7px; background: var(--c-ink-3); flex: none; }
.sync-sq.sq-accent { background: var(--c-accent); }
.sync-sq.sq-caution { background: var(--c-caution-fill); }
.sync-sq.sq-blocking { background: var(--c-blocking); }
.subnav-sync[data-sync="failed"] { color: var(--c-blocking); }
.s-short { display: none; }
@media (max-width: 767.98px) {
  .s-full { display: none; }
  .s-short { display: inline; }
  .subnav-sync { padding: 0 10px 0 8px; }
  .subnav-title { padding-left: 14px; }
}
.sync-sheet { top: calc(100% + 4px); right: 8px; width: 380px; max-width: calc(100vw - 20px); padding: 8px 12px 12px; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 400; }
.sync-sheet .sync-line { padding: 2px 0 8px; font-size: 14px; }
.sync-sheet .sync-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.sync-sheet .sync-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--c-line-2); font-size: 13px; }
.sync-sheet .sync-row-label { font-weight: 700; }
.sync-sheet .sync-row-state { font: 600 11px var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-2); }
.sync-sheet .sync-row-state.st-failed { color: var(--c-blocking); }
.sync-sheet .sync-row-msg { flex-basis: 100%; font-size: 12px; color: var(--c-ink-2); }
.sync-sheet .sync-none, .sync-sheet .sync-foot { font-size: 12px; color: var(--c-ink-2); line-height: 1.5; }
.sync-sheet .sync-none { padding-bottom: 8px; }

/* ---- bottom bar (< 768) ---------------------------------------------------- */
.shell-tabbar {
  grid-area: tabbar; display: flex; position: sticky; bottom: 0; z-index: 120;
  background: var(--c-bg); border-top: 1px solid var(--c-line); padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 768px) { .shell-tabbar { display: none; } }
.tab-item {
  position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 44px; border-top: 3px solid transparent; border-radius: 0; color: var(--c-ink-2);
  font: 600 11px var(--font-heading); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
}
.tab-item:hover { color: var(--c-ink); text-decoration: none; }
.tab-item.active { border-top-color: var(--c-accent); color: var(--c-accent-ink); }
.tab-item .nav-ic, .tab-item .nav-ic svg { width: 22px; height: 22px; display: block; }
.tab-item-label { line-height: 1.1; }

/* ---- search overlay (Cmd/Ctrl-K) ------------------------------------------- */
.search-ov {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 16px; background: var(--c-backdrop);
}
.search-box {
  position: relative; width: min(680px, 100%); max-height: 80vh; display: flex; flex-direction: column;
  background: var(--c-bg); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: 0; box-shadow: var(--shadow-lg);
}
.search-input-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--c-line); flex: 0 0 auto; }
.search-input-icon { display: flex; color: var(--c-ink-2); flex: 0 0 auto; }
.search-input { flex: 1 1 auto; min-width: 0; border: 0; background: none; padding: 0; font-size: 18px; color: var(--c-ink); }
.search-input:focus { outline: none; }
.search-mode-btn, .search-close-btn {
  position: relative; flex: 0 0 auto; padding: 4px 8px; background: none; color: var(--c-ink-2); cursor: pointer; white-space: nowrap;
  border: 1px solid var(--c-line-control); border-radius: 0; font: 600 11px var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase;
}
.search-mode-btn::before, .search-close-btn::before { content: ""; position: absolute; inset: -8px -2px; }
.search-mode-btn:hover, .search-close-btn:hover { color: var(--c-ink); background: var(--c-hover-btn); }
.search-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 8px 14px; }
.search-group { padding: 0; }
.search-group-h { font: 600 11px var(--font-heading); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-2); padding: 10px 8px 4px; }
.search-group-hint { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 12px; margin-left: 6px; }
.search-group-rows.clipped .search-row:last-child {
  max-height: 30px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}
.search-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px; border-radius: 0; cursor: pointer; }
.search-row:hover { background: var(--c-hover-row); }
.search-row.active { background: var(--c-accent-tint); }
.search-row-tab { flex: 0 0 52px; width: 52px; font: 600 11px var(--font-heading); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-accent-ink); }
.search-row-main { flex: 1 1 auto; min-width: 0; }
.search-row-label { font-size: 14px; color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-row-sub { font-size: 12px; color: var(--c-ink-2); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-row-note { font-size: 12px; color: var(--c-accent-ink); margin-top: 2px; }
.search-pin-btn { position: relative; flex: 0 0 auto; background: none; border: 0; color: var(--c-ink-2); font-size: 15px; cursor: pointer; padding: 2px 4px; border-radius: 0; line-height: 1; }
.search-pin-btn::before { content: ""; position: absolute; inset: -12px -8px; }
.search-pin-btn:hover { color: var(--c-caution); background: var(--c-hover-btn); }
.search-pin-btn.on { color: var(--c-caution); }
.search-pin-list .search-row[draggable="true"] { cursor: grab; }
.search-pin-list .search-row[draggable="true"]:active { cursor: grabbing; }
.search-empty-note { color: var(--c-ink-2); font-size: 13px; padding: 6px 8px 4px; }
.search-empty-state { padding: 28px 22px 8px; text-align: center; }
.search-empty-headline { font-size: 15px; color: var(--c-ink); margin-bottom: 14px; }
.search-empty-state .search-placement-rule { text-align: left; margin: 18px 0; }
.search-empty-state a.btn { margin-top: 6px; }
.search-placement-rule { border: 1px solid var(--c-line); border-radius: 0; padding: 10px 12px; margin: 12px 8px 0; background: transparent; }
.search-placement-rule-title { font: 600 12px var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink); margin-bottom: 6px; }
.search-placement-rule ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--c-ink-2); line-height: 1.6; }
.search-browse-head .search-placement-rule { margin: 4px 0 10px; }
.search-browse-count { font-size: 12px; color: var(--c-ink-2); padding: 0 8px 6px; }
.search-browse-head { padding: 8px 8px 2px; }
@media (max-width: 767.98px) {
  .search-ov { align-items: stretch; padding: 0; }
  .search-box { width: 100%; max-height: none; height: 100%; border: 0; }
  .search-box::before { display: none; }
}

/* ---- banners (admin announcements) ----------------------------------------- */
.banner-stack { display: flex; flex-direction: column; }
.banner-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 14px;
  background: var(--c-accent-tint); color: var(--c-ink); border-bottom: 1px solid var(--c-line);
}
.banner-bar + .banner-bar { border-top: 1px solid rgba(0, 0, 0, 0.15); }
.banner-bar .msg { text-align: center; }
.banner-bar a { text-decoration: underline; color: inherit; }
.banner-bar .x { position: relative; margin-left: auto; padding: 0; background: none; border: 0; border-radius: 0; color: inherit; font: inherit; cursor: pointer; opacity: 0.8; flex: 0 0 auto; }
.banner-bar .x::before { content: ""; position: absolute; inset: -14px; }
.banner-bar .x:hover { opacity: 1; }