body { grid-template-columns: 248px minmax(0, 1fr) }
.client-tools { display:grid; gap:.65rem }
.client-tools button { background:transparent; color:white; border-color:#57749b; justify-content:start }
.client-tools button:hover { background:#26466d }
.locale-buttons { display:flex; gap:.5rem }
.locale-buttons button { border-radius:50%; min-width:2.5rem; justify-content:center; padding:.25rem }
.locale-buttons [aria-pressed=true] { background:#b2f1dd; color:#10233c; border-color:#b2f1dd }
.client-hero { min-height:11.5rem }
.client-hero h1 { max-width:25ch }
.workspace-metrics { margin-top:1rem }
.delivery-pipeline { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(7rem,1fr)); gap:.6rem; padding:0 }
.delivery-pipeline li { display:grid; gap:.25rem; border-left:3px solid var(--blue); background:var(--sky); padding:.75rem }
.delivery-pipeline strong { font-size:1.45rem }
.workspace-form { display:grid; gap:.75rem; margin-top:1rem }
.workspace-form input,.workspace-form select { margin-top:.25rem }
.settings-form { gap:1.15rem }
.settings-form > button { justify-self:start }
.settings-group { min-width:0; margin:0; border:1px solid var(--line); border-radius:.75rem; padding:.8rem 1rem 1rem }
.settings-group legend { padding:0 .4rem; font-weight:700; color:var(--ink) }
.settings-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:.9rem 1rem }
.settings-fields select { display:block; width:100% }
.settings-fields .settings-permission { grid-column:1/-1; display:flex; align-items:center; gap:.5rem }
.workspace-metrics-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); gap:.9rem; margin:1rem 0 }
.workspace-chart { display:grid; gap:.4rem; margin:.75rem 0 0; padding:0; list-style:none; font-size:.84rem }
.workspace-chart li { display:grid; grid-template-columns: minmax(4rem,1fr) minmax(3rem,1.2fr) auto; align-items:center; gap:.4rem }
.workspace-chart progress { inline-size:100%; accent-color:var(--green) }
.thread-messages { list-style:none; padding:0; display:grid; gap:.5rem; max-height:20rem; overflow:auto }
.thread-messages li { background:var(--sky); border-radius:.45rem; padding:.65rem; overflow-wrap:anywhere }
.seasonal-panel { margin-bottom:1rem }
#product-view > .workspace { margin-bottom:1rem }
#view-title { overflow-wrap:normal }
[data-theme=dark] { color-scheme:dark; --ink:#e3eefe; --muted:#adc3de; --blue:#779af7; --deep:#183365;
 --sky:#17273f; --line:#354d6e; --white:#101f34; --green:#88efd5; --pale:#163c36 }
[data-theme=dark] .rail,[data-theme=dark] .top { background:#0d1c2e; color:var(--ink) }
[data-theme=dark] button,[data-theme=dark] input,[data-theme=dark] textarea,[data-theme=dark] select { background:#152842;color:var(--ink) }
[data-theme=dark] button.primary { color:#10233c;background:#8facfc }
[data-theme=dark] pre,[data-theme=dark] .tag { background:var(--sky);color:var(--ink) }
[data-theme=dark] .locale-buttons [aria-pressed=true] { background:#b2f1dd;color:#10233c }
@media(max-width:650px) {
  .client-tools { display:flex; flex-wrap:wrap;padding:0 }
  .client-tools button { min-height:2rem;font-size:.8rem }
  .locale-buttons button { min-width:2rem }
}

/* ---------------------------------------------------------------------------------------------
   Composition B: navy rail, white workspace, yellow reserved for the primary action/highlights.
   --------------------------------------------------------------------------------------------- */
:root {
  --navy-900:#0b2440; --navy-800:#0f2d4e;
  --ink:#0f2744; --muted:#5b6b80;
  --blue:#235e94; --deep:#0b2440;
  --page:#f7f9fc; --sky:#f4f7fb; --pale:#eef3fb;
  --line:#e3e9f2; --line-strong:#d5deea;
  --white:#ffffff; --green:#047857; --amber:#8a4b00;
  background:var(--page);
}
body { background:var(--page) }
a { color:var(--blue) }
a:hover { color:#0b57c7 }
:focus-visible { outline-color:var(--blue) }

/* sidebar */
.rail { position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto;
  background:#fff; color:var(--ink); border-right:1px solid var(--line); gap:1.75rem }
.brand { color:var(--ink) }
.brand small { color:var(--muted) }
.mark { background:var(--yellow); color:var(--navy-900); border-radius:.7rem }
.rail nav a { display:flex; align-items:center; gap:.75rem; color:#42556e; text-decoration:none; font-weight:500 }
.rail nav a svg { inline-size:1.1rem; block-size:1.1rem; flex:none; opacity:.85 }
.rail nav a:hover { background:#f1f5fa; color:var(--ink) }
.rail nav [aria-current], .rail nav [aria-current]:hover { background:var(--deep); color:#fff; box-shadow:inset 3px 0 var(--yellow) }
.rail nav [aria-current] svg { opacity:1 }
.rail-foot { color:var(--muted) }
.client-tools button { background:#fff; color:var(--ink); border-color:var(--line-strong); justify-content:start }
.client-tools button:hover { background:#f1f5fa; color:var(--ink) }
.locale-buttons [aria-pressed=true] { background:var(--yellow); color:var(--navy-900); border-color:#e6c200 }

/* top bar and page header */
.top { min-height:3.5rem; background:#fff; border-bottom:1px solid var(--line); color:var(--muted); padding:.65rem clamp(1.25rem,3vw,3.5rem) }
.crumbs { font-size:.82rem; color:var(--muted) }
.crumbs b { color:var(--ink); font-weight:600 }
.workspace-select { display:flex; align-items:center; gap:.6rem; font-size:.82rem; font-weight:600; color:var(--ink) }
.workspace-select select { min-height:2.2rem; padding:.3rem 2rem .3rem .6rem; border-color:var(--line); border-radius:.55rem; font-weight:600 }
.content { max-width:none; padding:1.75rem clamp(1.25rem,3vw,3.5rem) 2.75rem }
.page-head { display:flex; align-items:flex-start; gap:.85rem; margin-bottom:1.35rem }
.page-head .accent { inline-size:.3rem; min-block-size:2.9rem; border-radius:.2rem; background:var(--yellow); flex:none }
.page-head h1 { font-size:clamp(1.5rem,2vw,1.9rem); line-height:1.12; letter-spacing:-.02em }
.page-head p { margin-top:.35rem; color:var(--muted); font-size:.88rem; max-width:60ch }
[hidden] { display:none !important }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* cards */
.panel { background:#fff; border:1px solid var(--line); border-radius:1rem;
  box-shadow:0 1px 2px rgb(15 39 68 / .04), 0 8px 24px rgb(15 39 68 / .05); padding:1.5rem }
.panel-head h2 { font-size:1.15rem }
.workspace { grid-template-columns:minmax(0,1.6fr) minmax(19rem,.8fr); gap:1.25rem; align-items:start }
.workspace-main { display:grid; gap:1.15rem; min-width:0 }
.side { display:grid; gap:1.15rem; min-width:0 }
.workspace-studio { min-width:0 }
#product-panel > .panel-head { margin-bottom:.85rem }
#product-panel textarea { min-height:6.5rem; border-color:var(--line-strong); border-radius:.65rem; padding:.85rem; background:#fff }
#product-panel textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgb(31 111 235 / .14) }
.suggestions { gap:.5rem }
.suggestions button { min-height:2rem; border-radius:999px; border-color:var(--line); background:#f8fafc; color:#3c4e66; padding:.3rem .75rem; font-size:.78rem; font-weight:500 }
.suggestions button:hover { background:#f1f5fa; border-color:#c7d3e3 }
.form-row { margin-top:1rem; gap:.85rem }
.form-row label { color:var(--ink) }
.form-row input:not([type=checkbox]) { border-color:var(--line-strong); border-radius:.55rem; background:#fff }
.check { font-weight:500 }
.actions { gap:.65rem; margin-top:1.1rem }
button { background:#fff; border-color:var(--line-strong); border-radius:.55rem; color:var(--ink) }
button:hover { background:#f1f5fa }
button.primary { background:var(--yellow); border-color:#e6c200; color:var(--navy-900); font-weight:700; box-shadow:0 1px 2px rgb(15 39 68 / .08) }
button.primary:hover { background:#ffdf1f }
button.secondary { background:#fff; border-color:var(--line-strong); color:var(--ink); font-weight:600 }
button.secondary:hover { background:#f1f5fa }
.action-hint { color:var(--muted); font-size:.78rem; margin-top:.65rem }

/* seasonal strip + right rail */
.strip { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.05rem 1.35rem; background:var(--yellow-soft); border:1px solid #ecd77a; border-radius:1rem }
.card-head { display:flex; align-items:flex-start; gap:.75rem }
.card-head svg { inline-size:1.25rem; block-size:1.25rem; flex:none; margin-top:.1rem; color:var(--navy-800) }
.strip h3 { font-size:.95rem }
.strip p { margin-top:.2rem; color:#5c5426; font-size:.82rem }
.link-button { display:inline-flex; align-items:center; gap:.4rem; background:transparent; border:0; padding:.3rem 0; color:var(--navy-800); font-weight:700; font-size:.82rem; cursor:pointer }
.link-button:hover { background:transparent; text-decoration:underline }
.tag { background:var(--pale); color:var(--blue) }
#trust { padding:.25rem 0 0 }
#trust.empty { padding:1rem; background:var(--sky); border-radius:.5rem }
.limits { margin:0; border-top:1px solid var(--line) }
.limit-row { display:flex; justify-content:space-between; gap:1rem; padding:.62rem 0; border-bottom:1px solid var(--line); font-size:.82rem }
.limit-row:last-child { border-bottom:0 }
.limit-row dt { color:var(--muted) }
.limit-row dd { margin:0; color:var(--ink); font-weight:600; text-align:right }
.feedback { background:#eef4ff; border-left:3px solid var(--blue) }
.feedback.error { background:#fff0eb; border-left-color:#a0351e }
.empty, .metrics div, .delivery-pipeline li, .thread-messages li { background:var(--sky) }
pre { background:var(--sky) }
.ticket-total { border-top-color:var(--line) }
.dialog::backdrop { background:#0b2440cc }
dialog::backdrop { background:#0b2440cc }
.settings-integration { display:grid; gap:.6rem; margin-top:1.25rem }
.settings-integration pre { margin:0 }

/* boot gate: prevents the workspace shell flashing before session/settings resolve */
html.booting .rail, html.booting .top, html.booting .content { visibility:hidden }

@media(max-width:1000px) {
  .workspace { grid-template-columns:1fr }
  .side { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:650px) {
  .rail { position:static; height:auto; overflow:visible; border-right:0; border-bottom:1px solid var(--line) }
  .side { grid-template-columns:1fr }
  .top { padding:.6rem 1rem }
  .content { padding:1.25rem 1rem 2rem }
  .page-head h1 { font-size:1.55rem }
}
.sparkle { inline-size:1.35rem; block-size:1.35rem; color:var(--blue) }
.link-button svg { inline-size:.85rem; block-size:.85rem }
.panel-head .tag { flex:none }
.rail a, .rail a:hover, .rail a:focus, .rail a:focus-visible { text-decoration-line:none; border-bottom:0 }
.locale-buttons button { justify-content:center; text-align:center; padding:.25rem }
#draft-flyout { position:fixed; z-index:3; inset:5rem auto auto 15.75rem; width:min(21rem, calc(100vw - 17rem)); max-height:75vh; overflow:auto; display:grid; gap:.55rem }
#draft-flyout button { text-align:left; justify-content:start; overflow-wrap:anywhere }
.draft-nav-row { display:flex; align-items:stretch; gap:.25rem }
.draft-nav-row a { flex:1 }
.draft-flyout-toggle { min-width:2rem; padding:.3rem; font-size:1.2rem }
.draft-flyout-toggle[aria-expanded=true] { background:var(--yellow); color:var(--deep) }
@media(max-width:650px) { #draft-flyout { inset:8rem 1rem auto; width:auto } }