/* DM Command Center — bright, mobile-first surface (BUILD-077/078).
 *
 * The CC program retires the dark execution aesthetic for human-facing
 * surfaces. Palette is the DM navy + Carolina blue established for /q/* ,
 * here taken full-bright (bright header too, not just the body). Self-
 * contained — does not depend on style.css or queries.css.
 */
:root {
  --navy:      #1b2a4e;
  --navy-2:    #2a3d6e;
  --carolina:  #4b9cd3;
  --carolina-d:#3a86c0;
  --paper:     #ffffff;
  --mute:      #6b7280;
  --line:      #e5e7eb;
  --tint:      #f3f6fb;
  --tint-2:    #eaf0f9;
  --good:      #16a34a;
  --bad:       #dc2626;
  --warn:      #d97706;
  --accent:    #d4ff3a; /* DM highlighter — used as a thin brand chip only */
  --radius:    16px;
  --shadow:    0 1px 2px rgba(15,23,42,.05), 0 4px 16px rgba(15,23,42,.04);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body.cc {
  background: var(--tint);
  color: var(--navy);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---- top bar ---- */
.cc-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  padding-top: max(14px, env(safe-area-inset-top));
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.cc-brand {
  font-size: 19px; font-weight: 800; letter-spacing: -.4px; color: var(--navy);
  display: flex; align-items: baseline; gap: 8px;
}
.cc-brand .sub {
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--carolina);
}
.cc-brand a { color: inherit; text-decoration: none; }
.cc-back {
  font-size: 14px; color: var(--carolina); text-decoration: none; font-weight: 600;
}
.cc-back:hover { color: var(--carolina-d); }
.cc-top form { margin: 0; }
.btn-ghost {
  background: transparent; border: 1px solid var(--line); color: var(--mute);
  border-radius: 10px; padding: 7px 12px; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.btn-ghost:hover { border-color: var(--carolina); color: var(--navy); }

/* ---- main column ---- */
.cc-main {
  max-width: 820px; margin: 0 auto;
  padding: 20px 18px calc(48px + env(safe-area-inset-bottom));
}

/* ---- flash ---- */
.cc-flash { list-style: none; margin: 0 0 16px; padding: 0; }
.cc-flash li {
  border-radius: 12px; padding: 11px 14px; margin-bottom: 8px; font-size: 14px;
  border: 1px solid var(--line); background: var(--paper);
}
.cc-flash li.ok    { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.cc-flash li.error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }

/* ---- briefing ---- */
.cc-briefing {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; margin-bottom: 18px;
}
.cc-brief-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--mute); margin-bottom: 8px;
}
.cc-brief-head .date { color: var(--carolina); font-weight: 600; letter-spacing: .5px; }
.cc-brief-placeholder { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.55; }

/* ---- hero action ---- */
.cc-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: linear-gradient(135deg, var(--navy), var(--carolina));
  color: #fff; text-decoration: none;
  border-radius: var(--radius); padding: 22px 24px; margin-bottom: 22px;
  box-shadow: var(--shadow);
}
.cc-hero:hover { filter: brightness(1.04); }
.cc-hero .h-title { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.cc-hero .h-sub { font-size: 13.5px; opacity: .85; margin-top: 3px; }
.cc-hero .h-arrow { font-size: 26px; opacity: .9; }

.cc-section-label {
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--mute); margin: 0 0 12px 2px;
}

/* ---- module grid ---- */
.cc-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.cc-tile {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 16px; text-decoration: none; color: var(--navy);
  box-shadow: var(--shadow); transition: transform .08s ease, border-color .12s ease;
  min-height: 64px;
}
.cc-tile:hover { transform: translateY(-2px); border-color: var(--carolina); }
.cc-tile .t-label { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.cc-tile .t-sub { font-size: 12px; color: var(--mute); }

/* =====================================================================
   Photo Desk
   ===================================================================== */
.pd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pd-title { font-size: 24px; font-weight: 800; letter-spacing: -.5px; margin: 0; }
.pd-sub { color: var(--mute); font-size: 14px; margin: 4px 0 0; }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; margin-bottom: 18px;
}

/* upload */
.pd-drop {
  display: block; cursor: pointer;
  border: 2px dashed #c7d2e4; border-radius: 14px; background: var(--tint-2);
  padding: 26px 20px; text-align: center; color: var(--mute);
}
.pd-drop:hover { border-color: var(--carolina); }
.pd-drop.drag { border-color: var(--carolina); background: #e3eefb; color: var(--navy); }
.pd-drop input[type=file] { display: none; }
.pd-browse { color: var(--carolina); font-weight: 700; text-decoration: underline; }
.pd-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.pd-input {
  flex: 1 1 200px; min-width: 0; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-size: 14px; color: var(--navy); background: #fff;
}
.pd-files { margin-top: 10px; font-size: 13px; color: var(--mute); }

.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  background: var(--carolina); color: #fff; border: 1px solid var(--carolina-d);
  border-radius: 11px; padding: 11px 18px; font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--carolina-d); }
.btn.navy { background: var(--navy); border-color: var(--navy); }
.btn.navy:hover { background: var(--navy-2); }
.btn.sm { padding: 8px 13px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: default; }

/* batch list */
.pd-batch-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
.pd-batch-list a {
  display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; text-decoration: none; color: var(--navy); box-shadow: var(--shadow);
}
.pd-batch-list a:hover { border-color: var(--carolina); }
.pd-batch-list .b-id { font-weight: 700; font-size: 14px; }
.pd-batch-list .b-meta { font-size: 12px; color: var(--mute); margin-top: 4px; }

/* image cards */
.pd-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.pd-toolbar .spacer { flex: 1 1 auto; }
.pd-cards { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .pd-cards { grid-template-columns: 1fr 1fr; } }

.pd-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.pd-card.approved { border-color: var(--good); }
.pd-card-name { padding: 10px 14px; font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.pd-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; padding: 3px 8px; border-radius: 999px; }
.pd-badge.ok { background: #f0fdf4; color: var(--good); border: 1px solid #bbf7d0; }
.pd-badge.pending { background: var(--tint-2); color: var(--mute); border: 1px solid var(--line); }

.pd-preview-wrap { position: relative; cursor: zoom-in; background: #0c1322; }
.pd-preview-wrap.transparent {
  background-color: #cfd6e4;
  background-image:
    linear-gradient(45deg, #aeb8cc 25%, transparent 25%), linear-gradient(-45deg, #aeb8cc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #aeb8cc 75%), linear-gradient(-45deg, transparent 75%, #aeb8cc 75%);
  background-size: 22px 22px; background-position: 0 0, 0 11px, 11px -11px, -11px 0;
}
.pd-preview { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; display: block; }
.pd-preview-wrap.loading .pd-preview { opacity: .35; }
.pd-zoom-hint {
  position: absolute; right: 8px; bottom: 8px; font-size: 11px; font-weight: 600;
  color: #fff; background: rgba(15,23,42,.55); padding: 3px 8px; border-radius: 999px;
  pointer-events: none;
}
.pd-fail {
  position: absolute; left: 8px; top: 8px; font-size: 11px; font-weight: 700;
  color: #fff; background: rgba(220,38,38,.92); padding: 4px 9px; border-radius: 999px;
  pointer-events: none; max-width: calc(100% - 16px);
}
.pd-hint { font-size: 12px; color: var(--mute); margin-top: 8px; }

/* background toggle (per card) */
.pd-bg { display: flex; gap: 6px; padding: 12px 14px 0; }
.pd-bg-btn {
  flex: 1; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  padding: 7px 4px; font-size: 12px; font-weight: 700; color: var(--mute); cursor: pointer;
}
.pd-bg-btn.sel { border-color: var(--carolina); color: var(--navy); box-shadow: 0 0 0 2px rgba(75,156,211,.25); }
.pd-tool-label { font-size: 13px; font-weight: 700; color: var(--navy); align-self: center; }
.pd-tool-note { font-size: 12px; color: var(--mute); align-self: center; }

/* lightbox */
.pd-lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(8,12,22,.94);
  display: flex; flex-direction: column;
}
.pd-lb-bar {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  padding-top: max(12px, env(safe-area-inset-top)); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.12); flex-wrap: wrap;
}
.pd-lb-bar .lb-name { font-size: 13px; font-weight: 700; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-lb-btn {
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2);
  border-radius: 9px; padding: 7px 12px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.pd-lb-btn.on { background: var(--carolina); border-color: var(--carolina); }
.pd-lb-stage { flex: 1; overflow: hidden; position: relative; touch-action: none; }
.pd-lb-stage.zoomed { cursor: grab; }
.pd-lb-stage.grabbing { cursor: grabbing; }
.pd-lb-stage.transparent {
  background-color: #cfd6e4;
  background-image:
    linear-gradient(45deg, #aeb8cc 25%, transparent 25%), linear-gradient(-45deg, #aeb8cc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #aeb8cc 75%), linear-gradient(-45deg, transparent 75%, #aeb8cc 75%);
  background-size: 28px 28px; background-position: 0 0, 0 14px, 14px -14px, -14px 0;
}
.pd-lb-img {
  position: absolute; top: 50%; left: 50%; transform-origin: center center;
  max-width: 100%; max-height: 100%; user-select: none; -webkit-user-drag: none; will-change: transform;
}
.pd-lb-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 600; pointer-events: none;
}

.pd-presets { display: flex; gap: 6px; padding: 10px 12px 0; }
.pd-preset {
  flex: 1; text-align: center; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; cursor: pointer; background: #fff; padding: 0;
}
.pd-preset img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.pd-preset .p-name { font-size: 11px; font-weight: 700; padding: 5px 2px; color: var(--mute); }
.pd-preset.sel { border-color: var(--carolina); box-shadow: 0 0 0 2px rgba(75,156,211,.3); }
.pd-preset.sel .p-name { color: var(--navy); }

.pd-sliders { padding: 10px 14px 4px; display: grid; gap: 9px; }
.pd-slider { display: grid; grid-template-columns: 64px 1fr 38px; align-items: center; gap: 10px; }
.pd-slider label { font-size: 12px; color: var(--mute); font-weight: 600; }
.pd-slider input[type=range] { width: 100%; accent-color: var(--carolina); }
.pd-slider .val { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--navy); text-align: right; }

.pd-actions { display: flex; gap: 8px; align-items: center; padding: 12px 14px 16px; flex-wrap: wrap; }
.pd-final-link { font-size: 13px; color: var(--carolina); font-weight: 600; text-decoration: none; }
.pd-final-link:hover { text-decoration: underline; }

@media (max-width: 420px) {
  .cc-hero { flex-direction: row; }
  .pd-slider { grid-template-columns: 58px 1fr 34px; }
}

/* =====================================================================
   Command Center spine (BUILD-077, Days 1-2)
   ===================================================================== */
.cc-top-actions { display: flex; align-items: center; gap: 8px; }
/* home content head: title left, the home's unique action (Enable alerts) right */
.cc-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cc-page-title { margin: 0; font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: .2px; }

/* generic inline form + link button */
form.inline { margin: 0; display: inline; }
.link-btn {
  background: none; border: none; padding: 0; color: var(--carolina);
  font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none;
}
.link-btn:hover { color: var(--carolina-d); text-decoration: underline; }
.btn.good { background: var(--good); border-color: #15803d; }
.btn.good:hover { background: #15803d; }
.btn.danger { background: var(--bad); border-color: #b91c1c; }
.btn.danger:hover { background: #b91c1c; }
.btn.ghost {
  background: #fff; color: var(--mute); border: 1px solid var(--line);
}
.btn.ghost:hover { border-color: var(--carolina); color: var(--navy); }

/* capture */
.cc-capture { display: flex; gap: 8px; margin-bottom: 16px; }
.cc-capture-input {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 15px; font-size: 15px; color: var(--navy); background: #fff; box-shadow: var(--shadow);
}
.cc-capture-input:focus { outline: none; border-color: var(--carolina); box-shadow: 0 0 0 3px rgba(75,156,211,.18); }

/* briefing items */
.cc-brief-items { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 12px; }
.cc-brief-items li { padding-left: 4px; }
.bi-what { font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.4; }
.bi-why { font-size: 13.5px; color: var(--mute); margin-top: 2px; }
.bi-action { font-size: 13.5px; color: var(--carolina-d); font-weight: 600; margin-top: 4px; }
.cc-brief-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--mute);
}
.cc-brief-tools { display: flex; align-items: center; gap: 12px; }

/* blocks */
.cc-block {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 18px;
}
.cc-block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--mute); margin-bottom: 12px;
}
.cc-count {
  background: var(--carolina); color: #fff; border-radius: 999px; font-size: 12px;
  font-weight: 700; padding: 2px 9px; letter-spacing: 0;
}
.cc-sub-label { font-size: 12px; font-weight: 700; color: var(--navy); margin: 14px 0 8px; }
.cc-empty { color: var(--mute); font-size: 14px; margin: 4px 0; }

/* decision cards */
.cc-card { border: 1px solid var(--line); border-radius: 13px; padding: 13px 14px; margin-bottom: 11px; background: #fff; }
.cc-card.greenlit { border-color: var(--warn); background: #fffbeb; }
.cc-card-top { display: flex; align-items: center; gap: 8px; }
.cc-chip {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 999px; background: var(--tint-2); color: var(--navy-2);
}
.cc-chip.proposal { background: #e0f2fe; color: #075985; }
.cc-chip.gate { background: #fef3c7; color: #92400e; }
.cc-chip.triage { background: #ede9fe; color: #5b21b6; }
.cc-chip.idea { background: #ecfccb; color: #3f6212; }
.cc-card-title { font-size: 14.5px; font-weight: 700; color: var(--navy); flex: 1 1 auto; }
.cc-age { font-size: 12px; color: var(--mute); }
.cc-card-body { font-size: 13.5px; color: #374151; line-height: 1.5; margin: 8px 0 6px; }
.cc-card-impact { font-size: 12.5px; color: var(--good); font-weight: 600; margin: 2px 0 6px; }
.cc-card-actions { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cc-staged { font-size: 12.5px; color: var(--warn); font-weight: 600; align-self: center; }

/* expandable modify/kill */
details.cc-modify { display: inline-block; }
details.cc-modify > summary { list-style: none; cursor: pointer; }
details.cc-modify > summary::-webkit-details-marker { display: none; }
details.cc-modify[open] > summary { margin-bottom: 8px; }
details.cc-modify textarea, details.cc-modify input[type=text], details.cc-modify input:not([type]) {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px;
  font-size: 13px; color: var(--navy); margin-bottom: 6px; font-family: inherit;
}
details.cc-modify textarea:focus, details.cc-modify input:focus { outline: none; border-color: var(--carolina); }

/* inbox */
.cc-inbox-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; margin-bottom: 9px; background: #fff;
}
.cc-inbox-text { font-size: 14px; color: var(--navy); flex: 1 1 200px; }
.cc-inbox-class { font-size: 12.5px; color: var(--carolina-d); font-weight: 600; }
.cc-inbox-class.muted { color: var(--mute); font-weight: 500; }
.cc-inbox-actions { margin: 0; }

/* branch board */
.cc-board { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cc-branch { border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; background: #fff; }
.cc-branch.red { border-color: #fecaca; background: #fef2f2; }
.cb-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.cb-name { font-size: 14px; font-weight: 800; color: var(--navy); }
.cb-when { font-size: 11.5px; color: var(--mute); white-space: nowrap; }
.cb-phase { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--carolina-d); margin-top: 3px; }
.cb-gate { font-size: 12.5px; color: #374151; margin-top: 4px; line-height: 1.4; }
.cb-flag { font-size: 12px; color: var(--bad); font-weight: 700; margin-top: 4px; }

/* correction diff */
.cc-diff { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .cc-diff { grid-template-columns: 1fr 1fr; } }
.cc-diff-col { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.cc-diff-col.new { border-color: var(--good); }
.cc-diff-h { font-size: 12px; font-weight: 700; padding: 7px 11px; background: var(--tint-2); color: var(--navy); }
.cc-diff-col.new .cc-diff-h { background: #f0fdf4; color: #166534; }
.cc-diff pre {
  margin: 0; padding: 11px; font-size: 12px; line-height: 1.45; white-space: pre-wrap;
  word-break: break-word; color: #374151; max-height: 420px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* =====================================================================
   APP SHELL + LEFT-SIDEBAR NAV  (BUILD-082 — bright reskin)
   The persistent left rail that fronts every reskinned ops page. Reuses
   the CC tokens above so there is one source of truth. The CC home
   (command.html) keeps its own single-column layout; everything else
   sits inside `.app` (sidebar + main).
   ===================================================================== */
/* Safety-net aliases: legacy dark-theme tokens mapped to bright equivalents, so
   any stray `var(--token)` from un-ported markup/JS degrades gracefully instead
   of resolving to an invalid (inherited) value. These names are NOT used by the
   CC home / Photo Desk, so this block is purely additive. */
:root {
  --danger:  #dc2626;
  --text:    #1f2937;
  --muted:   #6b7280;
  --border:  #e5e7eb;
  --panel:   #ffffff;
  --panel-2: #eaf0f9;
  --bg:      #f3f6fb;
}

.app { display: flex; min-height: 100vh; min-height: 100dvh; }
.app-main { flex: 1 1 auto; min-width: 0; background: var(--tint); display: flex; flex-direction: column; }
.app-main-inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 26px 30px calc(64px + env(safe-area-inset-bottom)); }

/* ---- the rail ---- */
.sidebar {
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; height: 100dvh;
  width: 252px; flex: 0 0 252px;
  background: var(--paper); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow-y: auto; z-index: 30;
}
.sb-head { padding: 18px 18px 14px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.sb-logo { display: inline-flex; align-items: center; text-decoration: none; }
.sb-logo .sb-wordmark { width: 188px; max-width: 82%; height: auto; display: block; }
.sb-logo .sb-badge { height: 34px; width: 34px; display: none; }
.sb-home-sub { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--carolina); margin-top: 7px; opacity: .85; }
/* home/logo "you are here" (on /) — no nav group expands; the brand head marks active */
.sb-head:has(.sb-logo.active) { background: var(--tint-2); box-shadow: inset 3px 0 0 var(--carolina); }
.sb-logo.active ~ .sb-home-sub { opacity: 1; color: var(--carolina-d); font-weight: 800; }
/* sidebar sub-label (Paid Media / Revenue Dashboards groupers inside a group) */
.sb-sublabel { display: block; padding: 9px 12px 3px 15px; font-size: 10px; font-weight: 700;
  letter-spacing: .9px; text-transform: uppercase; color: var(--mute); }

.sb-nav { flex: 1 1 auto; padding: 10px 10px 14px; }
.sb-group { margin-bottom: 2px; }
.sb-group > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--mute);
}
.sb-group > summary::-webkit-details-marker { display: none; }
.sb-group > summary:hover { background: var(--tint); color: var(--navy); }
.sb-group.has-active > summary { color: var(--navy-2); }
.sb-group .sb-chev { margin-left: auto; font-size: 10px; opacity: .55; transition: transform .15s ease; }
.sb-group[open] .sb-chev { transform: rotate(90deg); }
.sb-items { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 8px; }
.sb-link {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px 8px 15px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: #374151; text-decoration: none;
  border-left: 3px solid transparent;
}
.sb-link:hover { background: var(--tint); color: var(--navy); }
.sb-link.active { background: var(--tint-2); color: var(--navy); border-left-color: var(--carolina); font-weight: 700; }
.sb-link.sub { font-size: 13px; font-weight: 500; color: var(--mute); padding-left: 28px; }
.sb-link.sub:hover { color: var(--navy); }
.sb-link.sub.active { color: var(--navy); font-weight: 600; }
.sb-signout { margin: 4px 0 0; padding: 0; }
.sb-signout button {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font: inherit; color: #374151;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px 8px 15px; border-radius: 10px; border-left: 3px solid transparent;
  font-size: 14px; font-weight: 600;
}
.sb-signout button:hover { background: var(--tint); color: var(--bad); }

/* ---- mobile top bar + drawer ---- */
.app-topbar { display: none; }
.sb-backdrop { display: none; }
.hb { display: inline-flex; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 8px; }
.hb span { width: 22px; height: 2px; background: var(--navy); border-radius: 2px; display: block; }

@media (max-width: 880px) {
  .sidebar {
    position: fixed; top: 0; left: 0; transform: translateX(-100%);
    transition: transform .22s ease; box-shadow: 0 0 50px rgba(15,23,42,.28);
  }
  .app[data-nav-open="1"] .sidebar { transform: translateX(0); }
  .sb-backdrop {
    display: block; position: fixed; inset: 0; z-index: 25;
    background: rgba(8,12,22,.42); opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .app[data-nav-open="1"] .sb-backdrop { opacity: 1; pointer-events: auto; }
  .app-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: sticky; top: 0; z-index: 20;
    padding: 9px 12px; padding-top: max(9px, env(safe-area-inset-top));
    background: rgba(255,255,255,.95); backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--line);
  }
  .app-topbar .tb-badge img { height: 30px; width: auto; display: block; }
  .app-topbar form { margin: 0; }
  .app-main-inner { padding: 18px 16px calc(56px + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   Bright primitives shared across reskinned legacy pages (BUILD-082).
   These restyle the existing dark-theme class names in bright so page
   markup stays unchanged — presentation only. Loaded INSTEAD of
   style.css on reskinned pages (no dual-load, no conflicts).
   ===================================================================== */
.app-main-inner h1, .app-main-inner h2, .app-main-inner h3 { color: var(--navy); }
.app-main-inner a { color: var(--carolina-d); }
.flash { padding: 11px 14px; border-radius: 11px; font-size: 13px; margin-bottom: 10px;
  border: 1px solid var(--line); background: var(--paper); }
.flash-error { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.flash-ok    { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
button.ghost { background: var(--paper); color: var(--mute); border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer; font-size: 13px; padding: 8px 12px; font-weight: 600; }
button.ghost:hover { border-color: var(--carolina); color: var(--navy); }
button.link, .link { background: transparent; color: var(--carolina-d); border: none; padding: 4px 2px;
  cursor: pointer; font-size: 13px; font-weight: 600; text-decoration: none; font-family: inherit; }
button.link:hover, .link:hover { text-decoration: underline; }
.link.danger, button.link.danger { color: var(--bad); }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.muted { color: var(--mute); }
.small { font-size: 11px; }
.right { text-align: right; } .center { text-align: center; }
.badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge-on  { background: #f0fdf4; color: var(--good); border: 1px solid #bbf7d0; }
.badge-off { background: var(--tint-2); color: var(--mute); border: 1px solid var(--line); }
.you { color: var(--carolina-d); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-left: 4px; font-weight: 700; }
.app-main-inner form.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.app-main-inner form.inline select { background: var(--paper); color: var(--navy); border: 1px solid var(--line);
  padding: 6px 9px; border-radius: 8px; font-size: 13px; }

/* generic plan/status pill set (hermes plans etc.) */
.status-pill, .status-badge { display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.status-pending  { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.status-approved { background: var(--tint-2); color: var(--navy-2); border: 1px solid var(--line); }
.status-running  { background: #eff8fe; color: var(--carolina-d); border: 1px solid #bae0f7; }
.status-done     { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.status-failed   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.status-rejected { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.status-expired  { background: var(--tint-2); color: var(--mute); border: 1px solid var(--line); }

/* =====================================================================
   Build Tracker — bright port (BUILD-082 PoC target)
   ===================================================================== */
.builds-page { width: 100%; }
.builds-flashes { margin-bottom: 14px; }
.builds-header { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  align-items: flex-start; margin-bottom: 22px; }
.builds-h-left h1 { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.builds-stats { font-size: 13px; color: var(--mute); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.builds-stats b { color: var(--navy); font-variant-numeric: tabular-nums; }
.builds-stats .dot { opacity: .4; }
.builds-last-ranked { font-size: 12px; color: var(--mute); margin-top: 6px; }
.builds-last-ranked a { color: var(--carolina-d); text-decoration: none; }
.builds-last-ranked a:hover { text-decoration: underline; }
.builds-h-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.builds-tabs { display: inline-flex; background: var(--paper); border: 1px solid var(--line); border-radius: 11px; padding: 3px; }
.builds-tabs .tab { padding: 7px 13px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--mute); text-decoration: none; }
.builds-tabs .tab.active { background: var(--carolina); color: #fff; }
.builds-tabs .tab:hover:not(.active) { color: var(--navy); }
.builds-link { font-size: 13px; color: var(--navy); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 12px; text-decoration: none; background: var(--paper); font-weight: 600;
  display: inline-flex; gap: 7px; align-items: center; }
.builds-link:hover { border-color: var(--carolina); }
.builds-badge { background: var(--carolina); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; }
.builds-new-btn { background: var(--carolina); color: #fff; border: 1px solid var(--carolina-d);
  border-radius: 11px; padding: 9px 15px; font-size: 13px; font-weight: 700; cursor: pointer; }
.builds-new-btn:hover { background: var(--carolina-d); }
.builds-new-form, .brd-edit { background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; margin: 8px 0 18px; box-shadow: var(--shadow); }
.brd-edit { margin-top: 14px; }
.nf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nf-grid .nf-wide { grid-column: 1 / -1; }
.nf-grid label { margin: 0; display: block; }
.nf-grid label span { display: block; font-size: 11px; color: var(--mute); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 5px; font-weight: 600; }
.nf-grid input, .nf-grid select, .nf-grid textarea { width: 100%; border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 11px; font-size: 14px; color: var(--navy); background: #fff; font-family: inherit; }
.nf-grid input:focus, .nf-grid select:focus, .nf-grid textarea:focus { outline: none;
  border-color: var(--carolina); box-shadow: 0 0 0 3px rgba(75,156,211,.15); }
.nf-actions { margin-top: 14px; display: flex; gap: 8px; }
.nf-actions button { background: var(--carolina); color: #fff; border: 1px solid var(--carolina-d);
  border-radius: 10px; padding: 9px 16px; font-weight: 700; font-size: 14px; cursor: pointer; width: auto; margin: 0; }
.nf-actions button:hover { background: var(--carolina-d); }
.nf-actions button.ghost { background: var(--paper); color: var(--mute); border: 1px solid var(--line); }
@media (max-width: 640px) { .nf-grid { grid-template-columns: 1fr; } }

.builds-group { margin-bottom: 18px; }
.builds-group-h { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.builds-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; color: var(--navy); }
.builds-group-count { background: var(--tint-2); color: var(--navy-2); border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 8px; }
.builds-group-toggle { margin-left: auto; color: var(--mute); font-size: 12px; }
.builds-group-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mute); flex: 0 0 auto; }
.builds-group-active .builds-group-dot { background: #ef9f27; } .builds-group-active .builds-group-label { color: #b45309; }
.builds-group-next .builds-group-dot { background: var(--carolina); } .builds-group-next .builds-group-label { color: var(--carolina-d); }
.builds-group-backlog .builds-group-dot { background: #9aa3b2; }
.builds-group-hold .builds-group-dot { background: #d85a30; } .builds-group-hold .builds-group-label { color: #c2410c; }
.builds-group-done .builds-group-dot { background: var(--good); } .builds-group-done .builds-group-label { color: #15803d; }
.builds-group-body { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.builds-empty { padding: 14px; color: var(--mute); font-size: 13px; text-align: center; }

.builds-row { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 11px; box-shadow: var(--shadow); overflow: hidden; }
.builds-row-active   { border-left-color: #ef9f27; }
.builds-row-next     { border-left-color: var(--carolina); }
.builds-row-backlog  { border-left-color: #9aa3b2; }
.builds-row-hold     { border-left-color: #d85a30; }
.builds-row-done     { border-left-color: var(--good); }
.builds-row-proposed { border-left-color: #7f77dd; }
.builds-row-head { display: grid; grid-template-columns: auto 1fr auto auto auto auto; gap: 12px;
  align-items: center; width: 100%; padding: 12px 16px; background: none; border: none;
  cursor: pointer; text-align: left; font: inherit; color: var(--navy); }
.builds-row-head:hover { background: var(--tint); }
.builds-id { font-size: 11px; color: var(--mute); font-family: ui-monospace, Menlo, monospace; }
.builds-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--navy); }
.builds-owner { font-size: 11px; color: var(--mute); text-align: right; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.builds-chev { color: var(--mute); font-size: 12px; }
.builds-row-body { padding: 6px 16px 16px; border-top: 1px solid var(--line); }
.brd-grid { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 10px; }
.brd-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; font-size: 13px; }
.brd-label { font-size: 10px; text-transform: uppercase; color: var(--mute); letter-spacing: 1.2px; padding-top: 2px; font-weight: 600; }
.brd-value { color: #374151; line-height: 1.5; }
.brd-value.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.brd-value i { color: var(--mute); }
.brd-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 10px; }

.pillar-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 2px 8px; border-radius: 999px; border: 1px solid; }
.pillar-infra     { color: #475569; border-color: #cbd5e1; background: #f1f5f9; }
.pillar-intel     { color: #6d28d9; border-color: #ddd6fe; background: #f5f3ff; }
.pillar-commerce  { color: var(--carolina-d); border-color: #bae0f7; background: #eff8fe; }
.pillar-lifecycle { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; }
.pillar-creative  { color: #c2410c; border-color: #fed7aa; background: #fff7ed; }

.priority-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.priority-critical { background: #dc2626; box-shadow: 0 0 0 2px rgba(220,38,38,.2); }
.priority-high     { background: #ef9f27; }
.priority-medium   { background: var(--carolina); }
.priority-low      { background: #9aa3b2; }

.builds-seq-status { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line);
  text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.builds-seq-status.status-active   { color: #b45309; border-color: #fde68a; background: #fffbeb; }
.builds-seq-status.status-next     { color: var(--carolina-d); border-color: #bae0f7; background: #eff8fe; }
.builds-seq-status.status-backlog  { color: var(--mute); }
.builds-seq-status.status-hold     { color: #c2410c; border-color: #fed7aa; background: #fff7ed; }
.builds-seq-status.status-proposed { color: #6d28d9; border-color: #ddd6fe; background: #f5f3ff; }
.builds-seq { margin-top: 6px; }
.builds-seq-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.builds-seq-title { font-size: 17px; font-weight: 800; color: var(--navy); }
.builds-seq-sub { font-size: 12px; color: var(--mute); margin-top: 4px; }
.builds-rerank { background: var(--carolina); color: #fff; border: 1px solid var(--carolina-d);
  border-radius: 10px; padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer; }
.builds-rerank:disabled { opacity: .5; cursor: progress; }
.builds-seq-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.builds-seq-row { display: grid; grid-template-columns: 54px 1fr; gap: 14px; padding: 12px 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); align-items: flex-start; }
.builds-seq-rank { font-size: 22px; font-weight: 800; color: var(--carolina); text-align: center; font-variant-numeric: tabular-nums; line-height: 1.1; }
.builds-seq-rank.muted { color: var(--mute); }
.builds-seq-meta { min-width: 0; }
.builds-seq-line { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--navy); }
.builds-seq-name { font-weight: 600; } .builds-seq-name.muted { color: var(--mute); }
.builds-seq-reasoning { font-size: 12px; color: var(--mute); font-style: italic; margin-top: 5px; line-height: 1.5; }
.builds-seq-unranked-h { margin: 20px 0 8px; font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: 1.5px; }
.builds-seq-unranked .builds-seq-row { opacity: .6; }

/* =====================================================================
   Auth pages (login / magic-link sent) — bright, NO sidebar (logged out)
   ===================================================================== */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 24px; }
.auth-wrap { width: 100%; max-width: 380px; }
.login-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 32px 28px; }
.login-card .brand { text-align: center; margin-bottom: 20px; }
.login-card .brand h1 { margin: 0; font-size: 25px; font-weight: 800; color: var(--navy); letter-spacing: -.5px; }
.login-card .brand-sub { margin: 7px 0 0; color: var(--carolina); font-size: 12px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; }
.login-card form { margin-top: 8px; }
.login-card label { display: block; }
.login-card label span { display: block; font-size: 12px; color: var(--mute); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; }
.login-card input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
  font-size: 14px; color: var(--navy); background: #fff; }
.login-card input:focus { outline: none; border-color: var(--carolina); box-shadow: 0 0 0 3px rgba(75,156,211,.15); }
.login-card form button { width: 100%; margin-top: 14px; padding: 12px; background: var(--carolina);
  color: #fff; font-weight: 700; border: 1px solid var(--carolina-d); border-radius: 11px; cursor: pointer; font-size: 14px; }
.login-card form button:hover { background: var(--carolina-d); }
.login-help { font-size: 12px; color: var(--mute); text-align: center; margin-top: 16px; line-height: 1.5; }
a.ghost.block { display: block; text-align: center; margin-top: 14px; padding: 11px; border: 1px solid var(--line);
  border-radius: 11px; color: var(--navy); text-decoration: none; font-weight: 600; }
a.ghost.block:hover { border-color: var(--carolina); }

/* Proposals page (bright) */
.prop-row { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid #7f77dd;
  border-radius: 11px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); }
.prop-decided { border-left-color: var(--mute); opacity: .85; }
.prop-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.prop-title { font-weight: 700; font-size: 14px; color: var(--navy); }
.prop-source { font-size: 10px; color: var(--mute); padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--tint-2); }
.prop-when { font-size: 11px; color: var(--mute); }
.prop-goal { font-size: 13px; color: #374151; }
.prop-align { font-size: 12px; color: #374151; line-height: 1.5; }

/* "Yesterday" recap — backward-looking brief above the forward items (gateway
   teardown: recap merged into the CC briefing pass, 2026-06-28). */
.cc-recap {
  margin: 4px 0 14px;
  padding: 12px 14px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.cc-recap-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 6px;
}
.cc-recap-head .date {
  text-transform: none;
  letter-spacing: .5px;
  color: var(--carolina);
  font-weight: 600;
}
.cc-recap-body {
  white-space: pre-line;
  color: #374151;
  font-size: 14px;
  line-height: 1.6;
}