/* FD-079 / job A: shared shell, extending boards 15/16 and home-boards.css.
   Keep the source --hb-* palette intact. Stronger functional borders and muted text
   are intentional: the boards' decorative hairline is not a control boundary.
   HYBRID's nested stage must be retargeted too, otherwise it retains shell grey. */
:root, [data-palette="HYBRID"], [data-palette="DARK"],
[data-palette="HYBRID"] .cine {
  --bg:var(--hb-ink); --bg-2:var(--hb-ink-2);
  --surf-1:var(--hb-ink-2); --surf-2:#131019; --surf-3:#1b1523;
  --line:var(--hb-line); --line-2:#8f7b56; --line-3:#a18b62; --line-4:var(--hb-gold-dim);
  --text:#fff; --text-1:#fff; --text-2:var(--hb-body);
  --text-3:#bdb4c8; --text-4:#b0a6bd; --text-5:#a99fb6;
  --accent:var(--hb-gold); --accent-hot:var(--hb-gold); --on-accent:var(--hb-ink);
  --ok-bg:#142119; --ok-fg:#b5dbb8; --ok-line:#76977a;
  --warn-bg:#291e16; --warn-fg:#ecc59b; --warn-line:#b39570;
  --info-bg:#17172c; --info-fg:#c9c4ed; --info-line:#8a83b4;
  --bad:#ffab9b; --good:#b5dbb8; --badge-fg:var(--hb-ink);
  --scrim:linear-gradient(180deg,rgba(7,6,10,0) 30%,rgba(7,6,10,.94) 100%);
  --ab-title:var(--hb-gold); --ab-link:#c4a7ff; --ab-focus:var(--hb-gold);
  color-scheme:dark;
}
/* Board 16's cream/black/gold direction remains a genuine palette switch.
   Text values are checked against the darkest light surface, not just white. */
[data-palette="LIGHT"] {
  --bg:#faf5ec; --bg-2:#f1e8db; --surf-1:#fffaf3; --surf-2:#f4ebdf; --surf-3:#e9dece;
  --line:rgba(118,85,29,.25); --line-2:#8b7753; --line-3:#806b46; --line-4:#76551d;
  --text:#17121f; --text-1:#17121f; --text-2:#42384b; --text-3:#574b60;
  --text-4:#62556b; --text-5:#695a70;
  --accent:#76551d; --accent-hot:#76551d; --on-accent:#fffaf3;
  --ok-bg:#e8f2e4; --ok-fg:#2f5c28; --ok-line:#54724d;
  --warn-bg:#f7ebe2; --warn-fg:#80401c; --warn-line:#94633f;
  --info-bg:#e9ecf7; --info-fg:#303c6b; --info-line:#667296;
  --bad:#a8301a; --good:#2f5c28; --badge-fg:#fff;
  --scrim:linear-gradient(180deg,rgba(7,6,10,0) 30%,rgba(7,6,10,.94) 100%);
  --ab-title:#17121f; --ab-link:#6331a4; --ab-focus:#76551d;
  color-scheme:light;
}
body { background:var(--bg); padding-bottom:calc(108px + env(safe-area-inset-bottom,0px)); }
[data-palette="LIGHT"] body:has(.hb-home) { background:var(--bg); }
body.has-plan { padding-bottom:calc(184px + env(safe-area-inset-bottom,0px)); }
/* These legacy wrappers painted literal dark surfaces outside the token ramp.
   In LIGHT, both their surface and direct text must switch together (PR 463). */
[data-palette="LIGHT"] .s0-set-list-hero { background:var(--bg); }
[data-palette="LIGHT"] .s0-set-list-hero .page-title { color:var(--ab-title); }
[data-palette="LIGHT"] .s0-set-list-hero .sl-row > .info { color:var(--text); }

/* Shared type and cards; no page-specific grid or timeline ownership here. */
.page-title, .section-title, .card h3, .empty h1, .empty h2, .nores h3 {
  font-family:"Playfair Display",Georgia,serif; font-weight:700;
  color:var(--ab-title); text-transform:none; letter-spacing:-.025em; line-height:1.15;
  overflow-wrap:break-word;
}
.display { color:var(--ab-title); }
.card { background:linear-gradient(145deg,var(--surf-2),var(--surf-1));
  border-color:var(--line); border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.12); }
.label { color:var(--accent-hot); letter-spacing:2px; }
h2.label, h3.label { display:flex; align-items:center; gap:10px; line-height:1.5; }
h2.label::before, h3.label::before { content:""; flex:0 0 5px; height:5px;
  border-radius:50%; background:var(--accent-hot); box-shadow:0 0 8px var(--accent-hot); }
h2.label::after, h3.label::after { content:""; flex:1 1 24px; min-width:12px;
  height:1px; background:var(--line); }
/* A long divider title must wrap between its bulb rules at 360/390. */
.hb-divider .k { min-width:0; white-space:normal; text-align:center; }

/* Secondary controls are outlined gold on ink. A 10% black veil on the exact
   board violet gradient raises WHITE small-label contrast above 4.5 at both ends. */
.btn, .btn-sm { background:var(--surf-1); border-color:var(--line-2);
  color:var(--accent-hot); border-radius:999px; min-height:44px; }
.btn.primary, .ask .go {
  background:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),
    linear-gradient(140deg,var(--hb-violet),var(--hb-violet-2));
  border:1px solid #b99af9; color:#fff;
}
.chip { background:var(--surf-1); color:var(--text-2); border-color:var(--line-2); }
.chip svg { color:var(--accent-hot); }
.chip.on { background:var(--surf-2); border-color:var(--accent-hot);
  color:var(--accent-hot); box-shadow:inset 0 -3px 0 var(--accent-hot); }
.ask { border-radius:999px; background:var(--surf-1); border-color:var(--line-2); padding:7px 7px 7px 16px; }
.ask .go { border-radius:50%; }
.ask:focus-within { outline:2px solid var(--ab-focus); outline-offset:3px; }
input, select, textarea { accent-color:var(--accent-hot); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
  color:var(--text); border-color:var(--line-2);
}
input::placeholder, textarea::placeholder { color:var(--text-5); opacity:1; }
/* The identity module injects an ID-specific border after the linked sheets. */
.sl-user-tools input#planTitle, .sl-user-tools input.js-plan-title { border-color:var(--line-2); }
/* Home has its own white ask pill; don't let the shared input rule invert it. */
.hb-home .hb-askwrap .ask input { color:#1d1826; }
.hb-home .hb-askwrap .ask input::placeholder { color:#665e70; }
:focus-visible { outline:2px solid transparent; outline-offset:2px;
  box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ab-focus); }

/* Existing header hooks and controls retained. CSS cannot rewrite the wordmark. */
.ghead { background:var(--bg); border-bottom:1px solid var(--line); }
.ghead .gh-brand { font-family:"Playfair Display",Georgia,serif; font-weight:700;
  letter-spacing:-.4px; color:var(--text); }
.ghead .gh-brand i { color:var(--accent-hot); }
.ghead .gh-ctx { color:var(--accent-hot); border-color:var(--line-2); border-radius:999px; }
.ghead .gh-back, .ghead .gh-act { color:var(--text-2); }
@media (max-width:767px) {
  .ghead { display:grid; grid-template-columns:44px minmax(0,1fr) 44px 44px;
    column-gap:6px; row-gap:0; padding:4px 12px; }
  .ghead .gh-back { grid-column:1; grid-row:1; }
  .ghead .gh-brand { grid-column:2; grid-row:1; text-align:left; }
  .ghead .gh-act { grid-row:1; }
  .ghead .gh-ctx { grid-column:2 / -1; grid-row:2; text-align:left;
    min-height:36px; font-size:12px; letter-spacing:.5px; }
}

/* Five board destinations, including the heart and sparkle orb. The centre
   remains THE SET LIST, preserving the existing data-v and delegated handlers. */
.tabs.ab-tabs { top:auto; bottom:0; background:var(--bg); border-top:1px solid var(--line); border-bottom:0;
  padding:10px max(8px,calc((100vw - 800px)/2)) calc(10px + env(safe-area-inset-bottom,0px));
  min-height:82px; gap:4px; }
.tabs.ab-tabs .tab { position:relative; flex:1; flex-direction:column; padding:0 4px; min-width:0; min-height:60px;
  color:var(--text-3); font-size:12px; gap:5px; background:transparent; }
.tabs.ab-tabs .tab .ti { width:26px; height:26px; align-items:center; justify-content:center; }
.tabs.ab-tabs .tab .ti svg { width:25px; height:25px; }
.tabs.ab-tabs .tab.on { color:var(--accent-hot); background:transparent; }
.tabs.ab-tabs .tab.on::after { content:""; position:absolute; bottom:0; width:5px;
  height:5px; background:currentColor; border-radius:50%; }
.tabs.ab-tabs .tab[data-v="home"].on svg { fill:currentColor; }
.tabs.ab-tabs .tab[data-v="setlist"] { flex:1; }
.tabs.ab-tabs .tab[data-v="setlist"] .ti { top:-15px; width:62px; height:62px;
  border:1px solid #d5baff;
  background:radial-gradient(circle at 30% 12%,#eccbff 0%,#a341ee 25%,#4b127c 58%,#242464 72%,#38bdf8 92%,#bdefff 100%);
  box-shadow:0 0 20px rgba(139,92,246,.5),inset 0 0 8px rgba(255,255,255,.6); }
.tabs.ab-tabs .tab[data-v="setlist"].on::after { color:var(--accent-hot); }
.tabs.ab-tabs .tab .badge { background:var(--accent); color:var(--on-accent);
  border:1px solid var(--bg); font:600 10px/1 var(--font-ui); min-width:18px; height:18px; }
.tabs.ab-tabs .tab:focus-visible { outline-color:var(--ab-focus); }

/* A native button adds keyboard activation. Keep the bar above the raised orb,
   with safe-area clearance and room for the final page action when scrolled. */
.planbar.ab-planbar { bottom:calc(110px + env(safe-area-inset-bottom,0px));
  width:min(640px,calc(100% - 32px)); min-height:54px; padding:10px 14px;
  background:var(--surf-1); color:var(--text-2); border:1px solid var(--line-2);
  border-radius:999px; gap:10px; text-align:left; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.planbar.ab-planbar .n { display:flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; padding:0 5px; border-radius:50%;
  background:var(--accent); color:var(--on-accent); font:600 13px var(--font-mono); }
.planbar.ab-planbar .l { color:var(--text-2); }
.planbar.ab-planbar .go { color:var(--accent-hot); font-size:11px; letter-spacing:.6px; white-space:nowrap; }
/* home-shell suppresses this with !important when an earned board exists.
   FD-079 explicitly asks for the same plan shortcut across all destinations. */
body:has(.home-plan-board:not([hidden])) #planbar.ab-planbar { display:flex !important; }
body.has-plan:has(.home-plan-board:not([hidden])) { padding-bottom:calc(184px + env(safe-area-inset-bottom,0px)); }
@media (min-width:900px) {
  /* app-boards.css loads after shell.css and .tabs.ab-tabs is more specific than
     shell's desktop .tabs rule. Restate the desktop contract at equal specificity
     so the mobile bottom dock cannot win the cascade on a wide screen. */
  body { padding-top:126px; padding-bottom:40px; }
  /* NI-2026-09-17: this override reset has-plan to the SAME 40px as the no-plan default --
     .planbar.ab-planbar's own geometry (bottom:calc(110px + safe-area), min-height:54px, up
     to ~80px once its "saved on this phone" notice wraps in, line 135-147 above) carries no
     desktop-specific reduction, so 40px left zero clearance for it. A real content-ending
     "Details & evidence" toggle on a dense city page landed permanently behind the bar with
     no scroll position that reveals it (confirmed live: covered at every scroll state once
     the page is short enough that its last content lands in the bar's reserved band).
     Dropping the override lets the base has-plan rule (line 39, already correctly sized for
     this exact bar) apply at desktop too, instead of restating a now-wrong number. */
  body[data-view="home"] { padding-top:62px; }
  .tabs.ab-tabs {
    top:0; bottom:auto; left:0; right:0; max-width:none; margin:0;
    border-top:0; border-bottom:1px solid var(--line); border-radius:0;
    min-height:62px; padding:9px 16px; justify-content:center; gap:6px;
    z-index:70;
  }
  .tabs.ab-tabs .tab {
    flex:0 0 auto; flex-direction:row; min-height:44px; padding:0 16px;
    font-size:13.5px; text-transform:none; gap:8px;
  }
  .tabs.ab-tabs .tab.on::after { bottom:2px; }
  /* NI-2026-09-18 (FD-131 follow-up): Howard, looking at the desktop nav -- "Ask Howie at the
     top is misplaced. It should be clearly under that purple symbol." Found live: the 36px
     icon plus the "Ask Howie" label's own 13px text box (home-boards.css's 24px top offset)
     summed to 49px, taller than this tab's 44px min-height, so the label rendered overlapping
     the bottom of the purple orb instead of sitting cleanly below it. Growing this one tab
     (not the whole bar, which still sizes to fit it) gives the label real room. */
  /* NI-2026-09-18: both .ti and .orb-label are position:absolute (out of normal flow), so this
     button's own flex content-box was computing to 0 and its whole 32px width came from padding
     alone -- confirmed live via getComputedStyle. An explicit width gives the label's real
     left:50%/transform centering (below) room to sit fully inside the button's own clickable
     bounds, which verify-tile-art.js's orbErrors check requires. */
  .tabs.ab-tabs .tab[data-v="setlist"] { flex:0 0 auto; min-height:56px; width:76px; }
  .tabs.ab-tabs .tab[data-v="setlist"] .ti {
    top:0; width:36px; height:36px; box-shadow:0 0 12px rgba(139,92,246,.4),inset 0 0 6px rgba(255,255,255,.5);
  }
  .tabs.ab-tabs .tab[data-v="setlist"] .ti svg { width:22px; height:22px; }
  .ghead { top:63px; }
  .ghead .gh-brand { font-size:26px; }
}
@media (prefers-reduced-motion:reduce) { .chip { transition:none; } }