/* Doteira Social — brand theme.
   Dark (default): Phantom Epoch space navy with Doteira cyan. Light: publisher cream / navy / cyan.
   Game colours: Phantom Epoch = wordmark orange, Adventures = purple→orange, fulfillment lane = signal red. */
:root {
  --navy-900: #071020; --navy-800: #0b1a2e; --navy-700: #112640; --navy-600: #183556;
  --cyan: #19a9d8; --cyan-deep: #0a6fb5; --royal: #0d3f8a;
  --pe: #f2a65a; --pe-deep: #c77a2a; --adv: #8b2fc9; --adv-deep: #4b2a9e; --adv-sun: #f5a623;

  --bg: var(--navy-900); --bg-img: url(/brand/galaxy.jpg);
  --panel: #0f1f38; --panel-solid: #10203a; --ink: #e9f0fa; --muted: #9db0c8; --line: rgba(120, 160, 210, .22);
  --accent: var(--cyan); --accent-ink: #061322; --accent-soft: rgba(25, 169, 216, .16);
  --warn-bg: rgba(242, 166, 90, .18); --warn: #ffc98a; --danger: #ff8a8f; --danger-bg: rgba(255, 90, 100, .18);
  --ok: #6fe3a5; --ok-bg: rgba(60, 200, 130, .16); --chip: rgba(140, 175, 220, .14); --shadow: 0 6px 24px rgba(0, 0, 0, .35);
  --top-bg: linear-gradient(90deg, #0b1a2e 0%, #0d2f5a 60%, #0a4f8a 100%);
  --pe-chip-bg: rgba(242, 166, 90, .18); --pe-chip-ink: #ffc98a;
  --adv-chip-bg: rgba(139, 47, 201, .22); --adv-chip-ink: #d9b8ff;
  --ful-chip-bg: rgba(255, 90, 100, .18); --ful-chip-ink: #ffb3b7;
  color-scheme: dark;
}
/* Theme is resolved by a tiny script in index.html: data-theme = saved choice on this device, else dark. */
:root[data-theme="light"] {
    --bg: #f6f1e7; --bg-img: none;
    --panel: #ffffff; --panel-solid: #ffffff; --ink: #0f2440; --muted: #5a6b80; --line: #dcd6c8;
    --accent: var(--cyan-deep); --accent-ink: #ffffff; --accent-soft: rgba(10, 111, 181, .10);
    --warn-bg: #fff0d6; --warn: #8a4b00; --danger: #a4262c; --danger-bg: #fde7e9;
    --ok: #1b7f3b; --ok-bg: #e3f5e8; --chip: #ece6d8; --shadow: 0 1px 3px rgba(15, 36, 64, .10);
    --top-bg: linear-gradient(90deg, #0b1a2e 0%, #0d3f8a 70%, #0a6fb5 100%);
    --pe-chip-bg: #ffe8cf; --pe-chip-ink: #8a4b00;
    --adv-chip-bg: #eadcff; --adv-chip-ink: #4b2a9e;
    --ful-chip-bg: #fde7e9; --ful-chip-ink: #7f1d1d;
    color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; min-height: 100%; }
body { min-height: 100vh; background-image: var(--bg-img); background-size: cover; background-position: center; background-attachment: fixed; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 16, 32, .86) 0%, rgba(7, 16, 32, .94) 40%, rgba(7, 16, 32, .985) 100%); pointer-events: none; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.quick button { border-radius: 999px; padding: 6px 12px; }
.quick button.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.quick button b { margin-left: 4px; }
.flag.wait { background: var(--warn-bg); color: var(--warn); }
.post-head h1 { font-size: 22px; } .post-head .code { font-size: 14px; letter-spacing: .06em; }
details > summary { cursor: pointer; }
.approve-row details { margin-top: 4px; white-space: pre-wrap; }
:root[data-theme="light"] body::before { display: none; }
button.theme { margin-left: 8px; background: transparent; border-color: rgba(255, 255, 255, .25); color: #d6e4f5; padding: 4px 9px; font-size: 15px; line-height: 1; }
button.theme:hover { border-color: var(--cyan); color: #fff; }
.login .wordmark.wm-light { display: none; }
:root[data-theme="light"] .login .wordmark.wm-dark { display: none; }
:root[data-theme="light"] .login .wordmark.wm-light { display: block; }
a { color: var(--accent); }
button, select, input, textarea { font: inherit; color: inherit; }
a.button { display: inline-block; text-decoration: none; color: inherit; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
button { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
button:hover, a.button:hover { border-color: var(--accent); }
button.primary { background: linear-gradient(180deg, var(--cyan) 0%, var(--cyan-deep) 100%); color: #fff; border-color: transparent; font-weight: 600; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
button.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
button:disabled { opacity: .5; cursor: not-allowed; }
input, select, textarea { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
textarea { min-height: 110px; resize: vertical; white-space: pre-wrap; }
label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .06em; }

.top { position: sticky; top: 0; z-index: 5; background: var(--top-bg); color: #e9f0fa; border-bottom: 1px solid rgba(25, 169, 216, .35); display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 8px 14px; box-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.brand { font-weight: 700; display: flex; align-items: center; gap: 9px; white-space: nowrap; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; }
.brand .brand-name b { color: var(--cyan); font-weight: 800; }
.logo { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.banner { font-size: 14px; padding: 6px 10px; border-radius: 8px; text-align: center; }
.banner.hold { background: rgba(242, 166, 90, .22); color: #ffd9a8; font-weight: 600; border: 1px solid rgba(242, 166, 90, .45); }
.banner.kill { background: rgba(255, 90, 100, .3); color: #ffd0d3; font-weight: 700; border: 1px solid rgba(255, 90, 100, .6); }
.alerts { margin: 6px 16px 0; font-size: 14px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; background: var(--panel-solid); }
.alerts summary { cursor: pointer; }
.alerts ul { margin: 6px 0 4px; padding-left: 18px; }
.alerts li { margin: 2px 0; }
.alerts .kind { display: inline-block; min-width: 72px; color: var(--muted); text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }
.banner.clear { background: rgba(60, 200, 130, .22); color: #c6f5d9; font-weight: 600; border: 1px solid rgba(60, 200, 130, .45); }
.nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.nav-group { display: flex; gap: 2px; align-items: center; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .15); }
.nav-group:first-child { border-left: 0; padding-left: 0; }
.nav-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #8fa6c0; margin-right: 3px; }
@media (max-width: 1400px) { .nav-label { display: none; } }
.nav-count.warn { background: #e5a33a; }
.bottombar, .drawer { display: none; }
.nav a { text-decoration: none; padding: 6px 10px; border-radius: 8px; color: #d6e4f5; }
.nav a.active { background: rgba(25, 169, 216, .22); color: #fff; font-weight: 600; box-shadow: inset 0 -2px 0 var(--cyan); }

main { max-width: 1200px; margin: 0 auto; padding: 14px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.toolbar select, .toolbar input { width: auto; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: var(--shadow); margin-bottom: 12px; }
.muted { color: var(--muted); font-size: 14px; }
.chip { display: inline-block; background: var(--chip); border-radius: 999px; padding: 2px 9px; font-size: 12px; margin-right: 4px; }
.chip.adventures { background: var(--adv-chip-bg); color: var(--adv-chip-ink); } .chip.phantom_epoch { background: var(--pe-chip-bg); color: var(--pe-chip-ink); } .chip.fulfillment { background: var(--ful-chip-bg); color: var(--ful-chip-ink); }
.chip.doteira { background: var(--accent-soft); color: var(--accent); }
.status { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 5px; background: var(--chip); }
.status.idea { color: var(--muted); } .status.draft { color: var(--accent); } .status.in_review { background: var(--warn-bg); color: var(--warn); }
.status.changes_requested { background: var(--danger-bg); color: var(--danger); } .status.approved { background: var(--ok-bg); color: var(--ok); }
.status.scheduled { background: var(--accent-soft); color: var(--accent); } .status.published { background: var(--ok); color: #062a14; } .status.missed, .status.archived { background: var(--danger-bg); color: var(--danger); }
.flag { font-size: 12px; padding: 1px 6px; border-radius: 4px; background: var(--danger-bg); color: var(--danger); font-weight: 600; }
.flag.ok { background: var(--ok-bg); color: var(--ok); }
body:not(.owner) .owner-only { display: none !important; }
.copyable { cursor: copy; }
.thumb-wrap { position: relative; cursor: pointer; }
.thumb-wrap .preview.none { display: grid; place-items: center; aspect-ratio: 16/9; background: var(--line); font-size: 32px; }
.thumb-wrap .play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); pointer-events: none; }
.credit-card label { display: block; margin-top: 8px; }
.transcript { max-height: 60vh; overflow: auto; margin-top: 8px; }
.transcript .seg { padding: 4px 0; border-top: 1px solid var(--line); line-height: 1.45; }
.transcript .tc { font-variant-numeric: tabular-nums; margin-right: 6px; }
.conn { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr auto; gap: 10px 16px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.conn:first-of-type { border-top: 0; }
.conn .ctl { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.conn-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 8px; }
.conn-form[hidden] { display: none; }
@media (max-width: 700px) { .conn { grid-template-columns: 1fr; } .conn .ctl { justify-content: flex-start; } .conn-form { grid-template-columns: 1fr; } }
.dest { font-size: 12px; font-weight: 700; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line); margin-right: 3px; }

/* game marks (wordmarks) */
.game-mark { height: 18px; width: auto; vertical-align: middle; object-fit: contain; }
.game-mark.adventures { height: 34px; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; font-size: 12px; color: var(--muted); align-items: center; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.legend .adventures i { background: var(--adv); } .legend .phantom_epoch i { background: var(--pe); } .legend .fulfillment i { background: var(--danger); }

/* list */
.row { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.row:last-child { border-bottom: 0; }
.row:hover .title { color: var(--accent); }
.row .date { font-variant-numeric: tabular-nums; font-weight: 600; }
.row .title { font-weight: 600; }
.row .meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 3px; }

/* calendar */
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 12px; color: var(--muted); text-align: center; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .06em; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.day { min-height: 92px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px; font-size: 12px; }
.day.other { opacity: .45; } .day.today { outline: 2px solid var(--accent); }
.day .n { font-weight: 700; color: var(--muted); }
.ev { display: flex; gap: 6px; align-items: flex-start; margin-top: 3px; padding: 3px 5px; border-radius: 5px; background: var(--chip); color: var(--ink); text-decoration: none; font-size: 12px; line-height: 1.25; overflow: hidden; border-left: 3px solid var(--muted); }
.ev.adventures { border-left-color: var(--adv); background: var(--adv-chip-bg); } .ev.phantom_epoch { border-left-color: var(--pe); background: var(--pe-chip-bg); } .ev.fulfillment { border-left-color: var(--danger); background: var(--ful-chip-bg); }
.ev.scheduled { outline: 1px solid var(--accent); } .ev.approved { outline: 1px solid var(--ok); }
.ev .th { flex: none; width: 34px; height: 34px; object-fit: cover; border-radius: 4px; background: rgba(0, 0, 0, .35); }
.ev .th.none { display: grid; place-items: center; font-size: 14px; opacity: .6; }
.ev-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev-title { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ev-meta { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.ev-meta .status { font-size: 12px; padding: 0 4px; letter-spacing: .03em; } .ev-meta .dest { font-size: 12px; padding: 0 3px; margin: 0; }
.ev-meta .flag { font-size: 12px; padding: 0 4px; }
.ev.md { flex-direction: column; gap: 6px; padding: 6px; font-size: 12px; }
.ev.md .th { width: 100%; height: 110px; border-radius: 6px; }
.ev.md .ev-meta .status, .ev.md .ev-meta .dest, .ev.md .ev-meta .flag { font-size: 12px; }
.modes { margin-left: auto; margin-bottom: 0; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wk-day { min-height: 180px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.wk-day.today { outline: 2px solid var(--accent); }
.wk-head { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.wk-head b { color: var(--ink); font-size: 15px; margin-left: 4px; }
.agenda-day { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.agenda-day:last-child { border-bottom: 0; }
.agenda-day.past { opacity: .55; }
.agenda-day .d { font-weight: 600; font-variant-numeric: tabular-nums; } .agenda-day .d small { display: block; color: var(--muted); font-weight: 400; }
.agenda-day .ev { margin-top: 0; margin-bottom: 6px; font-size: 14px; } .agenda-day .ev .th { width: 56px; height: 56px; }
.backlog { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.backlog .ev { margin: 0; }

/* detail */
.detail { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.caption-head { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.counter { font-size: 12px; color: var(--muted); }
.preview { width: 100%; max-height: 420px; background: #000; border-radius: 10px; object-fit: contain; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.asset-grid .card { margin: 0; }
.asset-grid .preview { max-height: 240px; }
.gates { font-size: 14px; }
.gates li { list-style: none; padding: 3px 0; }
.gates .pass::before { content: "✔ "; color: var(--ok); } .gates .fail::before { content: "✖ "; color: var(--danger); }
pre { background: var(--chip); padding: 10px; border-radius: 8px; overflow: auto; font-size: 12px; white-space: pre-wrap; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--navy-700); color: #fff; border: 1px solid var(--accent); padding: 6px 6px 6px 16px; border-radius: 10px; z-index: 60; width: max-content; max-width: min(560px, calc(100vw - 24px)); box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px; }
.toast[hidden] { display: none; }
.toast .toast-msg { flex: 1; padding: 4px 0; }
.toast button { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .45); min-height: 40px; padding: 4px 12px; }
.toast .toast-act { font-weight: 700; border-color: #fff; }
.toast .toast-x { border: 0; min-width: 40px; padding: 4px; }
.ask .ask-field { margin: 10px 0; }
.ask .ask-field > label { display: block; font-weight: 600; margin-bottom: 4px; }
.ask .ask-field textarea, .ask .ask-field input:not([type=checkbox]), .ask .ask-field select { width: 100%; }
.ask .ask-help { margin: 4px 0 0; font-size: 14px; }
.ask .ask-actions { justify-content: flex-end; }
.toast.err { background: var(--danger); color: #fff; border-color: transparent; }
.approve-panel { border: 2px solid var(--ok); border-radius: 10px; padding: 10px; margin-top: 8px; background: var(--ok-bg); }
.approve-row { display: block; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); padding: 6px 0; border-bottom: 1px dashed var(--line); }
.approve-row.blocked { opacity: .6; }
.approve-row .excerpt { font-size: 12px; color: var(--muted); white-space: pre-wrap; margin-left: 22px; }
button.big { font-size: 15px; padding: 12px 18px; width: 100%; }
.rev { font-size: 12px; border-top: 1px dashed var(--line); padding: 6px 0; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 4px 10px; font-size: 14px; }
.kv > span, .kv > b { min-width: 0; overflow-wrap: anywhere; } /* long provider errors must wrap, not widen the page */
h1 { font-size: 22px; margin: 4px 0 10px; letter-spacing: .02em; } h2 { font-size: 15px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); } h3 { font-size: 14px; margin: 12px 0 6px; }

/* asset picker */
.attached { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.attached .row-a { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-solid); }
.attached .row-a img, .picker .pick img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: #000; }
.attached .row-a .t { font-weight: 600; } .attached .row-a .m { font-size: 12px; color: var(--muted); }
.attached .row-a .ctl { display: flex; gap: 4px; } .attached .row-a .ctl button { padding: 4px 8px; }
.attached .row-a.primary { border-color: var(--accent); }
.modal-back { position: fixed; inset: 0; background: rgba(3, 8, 18, .7); z-index: 30; display: flex; align-items: flex-start; justify-content: center; padding: 30px 12px; overflow: auto; }
.modal { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 14px; width: min(980px, 100%); padding: 14px; box-shadow: var(--shadow); }
.modal .toolbar input { flex: 1; min-width: 160px; }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; max-height: 60vh; overflow: auto; margin-top: 8px; }
.picker .pick { display: grid; grid-template-columns: 56px 1fr; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--panel); text-align: left; }
.picker .pick:hover { border-color: var(--accent); }
.picker .pick.used { opacity: .5; cursor: default; }
.picker .pick .t { font-weight: 600; font-size: 14px; } .picker .pick .m { font-size: 12px; color: var(--muted); }
.dest-opts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 6px 0 10px; }
.dest-opts label { margin: 0 0 2px; }
.dest-opts input, .dest-opts select { width: 100%; }
@media (max-width: 760px) { .dest-opts { grid-template-columns: 1fr; } .picker { grid-template-columns: 1fr; } }

/* inbox */
.nav-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--pe); color: #1a0d00; font-size: 12px; font-weight: 700; text-align: center; vertical-align: 1px; }
.inb { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.inb:last-child { border-bottom: 0; }
.inb.done, .inb.ignored { opacity: .6; }
.inb .who { font-weight: 600; } .inb .txt { white-space: pre-wrap; margin: 2px 0; }
.inb .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.inb .meta .chip { margin: 0; }
.inb .ctl { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.inb .ctl button, .inb .ctl select { padding: 4px 8px; font-size: 12px; }
.inb .kindmark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: var(--chip); }
.inb.comment .kindmark { background: var(--adv-chip-bg); } .inb.message .kindmark { background: var(--pe-chip-bg); } .inb.mention .kindmark { background: var(--accent-soft); }
.inb .note { font-size: 12px; color: var(--muted); font-style: italic; }
.sync-note { font-size: 12px; color: var(--muted); }
.inb .sent { font-size: 14px; margin: 4px 0; padding-left: 8px; border-left: 3px solid var(--ok); }
.inb .w { font-size: 12px; color: var(--muted); }
.reply-box { margin-top: 6px; } .reply-box textarea { min-height: 54px; font-size: 14px; }
.reply-box .actions { margin-top: 4px; align-items: center; }
.sync-note .warn { color: var(--warn); }

/* outcomes */
.metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin: 6px 0; }
.metrics label { margin: 0 0 2px; } .metrics input { width: 100%; padding: 5px 8px; }
.out-dest { border-top: 1px dashed var(--line); padding: 8px 0; }
.out-dest h3 { margin: 0 0 4px; }
.conv { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.conv .w { color: var(--muted); font-size: 12px; }
.conv.fu { border-left: 3px solid var(--pe); padding-left: 8px; }
table.out { width: 100%; border-collapse: collapse; font-size: 14px; }
table.out th, table.out td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.out th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
table.out td.num { text-align: right; font-variant-numeric: tabular-nums; }
.manual { border-top: 1px solid var(--line); padding: 10px 0; }
.hand { margin: 8px 0; }
.src-mark { font-size: 12px; color: var(--muted); margin-left: 4px; text-transform: none; letter-spacing: 0; }
.metric.na { opacity: .6; }
.caveat { font-size: 12px; color: var(--muted); border-left: 3px solid var(--line); padding-left: 8px; margin: 6px 0; }
.weekly h2 { margin-top: 0; }
.weekly ul { margin: 4px 0 0; padding-left: 18px; }
.manual:first-of-type { border-top: 0; }
.manual textarea { width: 100%; min-height: 110px; }
.manual .reminder { font-size: 14px; color: var(--muted); margin: 4px 0; }
.manual .reminder.bad { color: var(--warn, #d9a441); }
.com-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.com-form input, .com-form select { width: 100%; }
@media (max-width: 700px) { .com-form { grid-template-columns: 1fr; } }
.tracked { font-size: 12px; word-break: break-all; }

/* health */
.health .warn { background: var(--warn-bg); color: var(--warn); border-radius: 6px; padding: 6px 10px; margin-bottom: 6px; font-size: 14px; }
.health .kv { grid-template-columns: 130px 1fr; }

/* needs */
.need { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px dashed var(--line); text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); margin: 0; }
.need:last-of-type { border-bottom: 0; }
.need.done .need-text { text-decoration: line-through; opacity: .6; }
.need-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.need-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.need-meta .chip { margin: 0; }
.need-del { background: transparent; border-color: transparent; color: var(--muted); padding: 2px 6px; }
.need-del:hover { color: var(--danger); border-color: var(--danger); }
.need-form { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 6px; align-items: center; margin-top: 10px; }
.need-form select, .need-form input { width: auto; }
.need-form input { width: 100%; }
.flag.need-badge { background: var(--pe-chip-bg); color: var(--pe-chip-ink); }
details.card summary { cursor: pointer; font-weight: 600; }
@media (max-width: 760px) { .need-form { grid-template-columns: 1fr 1fr; } .need-form input { grid-column: 1 / -1; } }

/* login */
.login { max-width: 440px; margin: 40px auto; text-align: center; }
.login .wordmark { display: block; width: 240px; max-width: 70%; margin: 0 auto 6px; border-radius: 12px; }
.login h1 { margin-top: 0; }
.login input { text-align: center; letter-spacing: .08em; }
.login .pe-strip { display: flex; justify-content: center; gap: 18px; align-items: center; margin-top: 18px; opacity: .85; }
.login .pe-strip img { height: 16px; } .login .pe-strip img.adventures { height: 34px; }

@media (max-width: 760px) {
  .top { grid-template-columns: auto 1fr; gap: 6px; padding: 6px 10px; }
  .brand { font-size: 14px; gap: 6px; }
  .nav { justify-content: flex-end; gap: 2px; min-width: 0; }
  .nav a { padding: 5px 6px; font-size: 14px; }
  .detail, .cols { grid-template-columns: 1fr; }
  .row { grid-template-columns: 70px 1fr; } .row > :last-child { grid-column: 2; }
  .day { min-height: 64px; } .ev { font-size: 12px; }
  .day .ev .th, .day .ev .ev-meta { display: none; }
  .agenda-day .ev .th { width: 44px; height: 44px; }
  .week { grid-template-columns: 1fr; } .wk-day { min-height: 0; }
  .agenda-day { grid-template-columns: 1fr; gap: 4px; }
  .modes { margin-left: 0; }
  .legend { margin-left: 0; width: 100%; }
  body { background-attachment: scroll; }
  main { padding: 10px; }
}
@media (max-width: 430px) { .brand-name { display: none; } }

/* team (Status page, owner-only) */
.team-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.team-row:last-child { border-bottom: 0; }
.team-row.disabled { opacity: .55; }
.team-row .ctl { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.team-row .ctl select, .team-row .ctl button { width: auto; padding: 4px 8px; font-size: 12px; }
.team-add { grid-template-columns: 1fr auto auto; }
.token-modal { width: min(560px, 100%); }
.token-modal input { font-family: ui-monospace, Consolas, monospace; font-size: 14px; }
body.viewer main button:disabled, body.viewer main input:disabled, body.viewer main textarea:disabled, body.viewer main select:disabled { opacity: .6; }
@media (max-width: 760px) { .team-row { grid-template-columns: 1fr; } .team-row .ctl { justify-content: flex-start; } }

/* uploads (Assets page) */
.upload-progress { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.upload-progress .bar { flex: 1; height: 8px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.upload-progress .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--cyan-deep)); transition: width .2s; }

/* publishing readiness (Status) and need controls */
table.ready td { min-width: 120px; } table.ready td .muted { font-size: 12px; overflow-wrap: anywhere; }
.card:has(> table.ready) { overflow-x: auto; }
.need-req { background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; font-size: 12px; color: var(--muted); margin-left: auto; }
.need-req:hover { color: var(--accent); border-color: var(--accent); }

/* review mode */
.review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.review .preview.big { width: 100%; max-height: 70vh; object-fit: contain; background: #000; border-radius: 10px; }
.cap-view { white-space: pre-wrap; font-size: 15px; line-height: 1.5; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 10px; padding: 12px; max-height: 50vh; overflow: auto; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.tabs .tab { border-radius: 999px; padding: 6px 14px; }
.tabs .tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.review-bar .bar-note { flex-basis: 100%; text-align: center; margin: 0; font-size: 14px; color: var(--warn); }
.review-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--panel-solid); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0, 0, 0, .25); }
.review-bar button { min-height: 44px; }
body.has-bar main { padding-bottom: 96px; }
a.btn { display: inline-block; text-decoration: none; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; color: var(--ink); }
a.btn:hover { border-color: var(--accent); }
details.card > summary { margin: -2px 0; }
details.card[open] > summary { margin-bottom: 8px; }
details.card > .card { box-shadow: none; border: 0; padding: 0; margin: 0; }
@media (max-width: 900px) { .review { grid-template-columns: 1fr; } }

/* feed previews (approximation), diffs, comments */
.pv { max-width: 420px; margin: 0 auto; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.pv-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .pv-head img { width: 28px; height: 28px; border-radius: 50%; background: #fff; }
.pv-cap { white-space: pre-wrap; font-size: 14px; line-height: 1.4; margin: 6px 0; } .pv-cap .more { color: var(--muted); } .pv-cap .over { background: var(--danger-bg); color: var(--danger); }
.pv-frame, .pv-slide { position: relative; width: 100%; overflow: hidden; background: #000; border-radius: 8px; }

.pv-frame video, .pv-frame img, .pv-slide video, .pv-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-count { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; padding: 1px 6px; border-radius: 999px; }
.pv-none { padding: 30px; text-align: center; border: 1px dashed var(--line); border-radius: 8px; }
.changes { background: var(--warn-bg); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; font-size: 14px; }
.diff ins { background: var(--ok-bg); color: var(--ok); text-decoration: none; } .diff del { background: var(--danger-bg); color: var(--danger); }
.changes ins { color: var(--ok); text-decoration: none; } .changes del { color: var(--danger); }
#rvPreview.active { border-color: var(--accent); color: var(--accent); }

/* home */
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.home-grid .card { margin: 0; }
.home-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; min-height: 44px; }
.home-row:last-of-type { border-bottom: 0; }
.home-row img, .home-row .th { flex: none; width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: rgba(0, 0, 0, .35); display: grid; place-items: center; }
a.home-row:hover b { color: var(--accent); }
a.btn.primary-link { background: linear-gradient(180deg, var(--cyan) 0%, var(--cyan-deep) 100%); color: #fff; border-color: transparent; font-weight: 600; }

/* phones and the folded / unfolded Fold: touch targets, scrollable nav, readable copy */
@media (pointer: coarse) {
  button, select, a.btn, .nav a, .quick button, .tabs .tab { min-height: 44px; }
  input, select, textarea { font-size: 16px; } /* stops iOS/Android zooming into fields */
  .need-del, .need-req { min-width: 44px; min-height: 36px; }
  input[type="checkbox"] { width: 22px !important; height: 22px; }
}
@media (max-width: 760px) {
  .top { grid-template-columns: 1fr auto; }
  .nav { grid-column: 1 / -1; order: 4; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; display: inline-flex; align-items: center; }
  .home-grid { grid-template-columns: 1fr; }
  .cap-view { font-size: 15px; max-height: none; }
  .review-bar { gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
  .review-bar .muted { width: 100%; text-align: center; order: -1; }
  .review-bar button { flex: 1 1 auto; padding: 8px 10px; }
  body.has-bar main { padding-bottom: 140px; }
  table.out { display: block; overflow-x: auto; }
  .post-head { gap: 6px; } .post-head h1 { font-size: 22px; width: 100%; order: -1; }
}
@media (min-width: 761px) and (max-width: 900px) { /* unfolded Fold and small tablets */
  .detail { grid-template-columns: 1fr; }
  .nav a { padding: 6px 7px; }
}

/* conventions */
table.conv td { vertical-align: top; } tr.conv-notes td { border-top: 0; padding-top: 0; }

/* inbox triage */
.inb.hist { opacity: .75; } .inb.spammy { opacity: .6; }
.inb .ctl label.mini { display: flex; flex-direction: column; gap: 2px; font-size: 12px; text-transform: none; margin: 0; color: var(--muted); }
.inb .ctl label.mini input[type="date"] { padding: 3px 6px; font-size: 12px; }
.thread { margin: 4px 0; } .thread-body { padding: 6px 0; } .tmsg { padding: 4px 0; border-bottom: 1px dashed var(--line); } .tmsg.this { background: var(--accent-soft); border-radius: 6px; padding: 4px 6px; }
.chip.cat-customer_support { background: var(--warn-bg); color: var(--warn); } .chip.cat-creator_enquiry { background: var(--accent-soft); color: var(--accent); } .chip.cat-spam { background: var(--danger-bg); color: var(--danger); }

/* planning tools */
.cal-filters select { width: auto; } .mini-check { display: inline-flex; gap: 4px; align-items: center; text-transform: none; font-size: 14px; margin: 0; color: var(--muted); } .mini-check input { width: auto; }
.mix { margin: -4px 0 8px; } .mix .chip { margin-right: 4px; }
.drop.over { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft); }
.ev[draggable="true"] { cursor: grab; }

/* phone navigation: bottom bar with the four most used pages; everything else in the More drawer */
@media (max-width: 760px) {
  .top .nav { display: none; }
  .bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; background: var(--top-bg); border-top: 1px solid rgba(25, 169, 216, .35); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); gap: 2px; }
  .bottombar a, .bottombar button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 2px; color: #d6e4f5; text-decoration: none; font-size: 14px; padding: 10px 2px; background: transparent; border: 0; border-radius: 8px; min-height: 44px; }
  .bottombar a.active, .bottombar button.active { background: rgba(25, 169, 216, .22); color: #fff; font-weight: 600; }
  .drawer:not([hidden]) { display: block; position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 9; max-height: 70vh; overflow: auto; background: var(--top-bg); padding: 8px 14px 12px; border-top: 1px solid rgba(25, 169, 216, .35); box-shadow: 0 -6px 18px rgba(0, 0, 0, .35); }
  .drawer .nav-group { display: flex; flex-wrap: wrap; border: 0; padding: 4px 0; }
  .drawer .nav-label { display: block; width: 100%; margin: 4px 0 2px; }
  .drawer a { padding: 10px 12px; color: #d6e4f5; text-decoration: none; border-radius: 8px; min-height: 44px; display: inline-flex; align-items: center; }
  .drawer a.active { background: rgba(25, 169, 216, .22); color: #fff; font-weight: 600; }
  main { padding-bottom: 84px; }
  .review-bar { bottom: calc(56px + env(safe-area-inset-bottom)); }
  body.has-bar main { padding-bottom: 210px; }
}
/* needs page */
.needs-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.needs-tools select { width: auto; }
.needs-group h3 { margin: 10px 0 4px; font-size: 14px; }
.need.done .need-text { text-decoration: line-through; opacity: .7; }
.blocking { border-left: 3px solid #e5a33a; padding: 6px 10px; margin: 0 0 10px; }
.need-form.quick { grid-template-columns: 1fr auto auto auto; }
@media (max-width: 760px) { .need-form.quick { grid-template-columns: 1fr 1fr; } .need-form.quick input { grid-column: 1 / -1; } .need-form.quick button { grid-column: 1 / -1; } }

/* conventions on the calendar and their tags */
.con-ev { display: block; font-size: 12px; line-height: 1.3; padding: 1px 6px; margin: 1px -4px; text-decoration: none; color: #1b1035; background: #c9b8f5; border-radius: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.con-ev.event.start, .con-ev.event.single { border-top-left-radius: 6px; border-bottom-left-radius: 6px; margin-left: 0; }
.con-ev.event.end, .con-ev.event.single { border-top-right-radius: 6px; border-bottom-right-radius: 6px; margin-right: 0; }
.con-ev.open, .con-ev.deadline { background: transparent; color: var(--ink); border: 1px dashed #9b84e0; border-radius: 6px; margin: 1px 0; }
.con-ev.deadline { border-color: #e5a33a; }
.legend .convention i { background: #c9b8f5; }
.con-ev.tag-must-attend, .con-tag.tag-must-attend { background: #f2a65a; color: #2a1400; }
.con-ev.tag-maybe, .con-tag.tag-maybe { background: #9fd3f2; color: #06263a; }
.con-ev.tag-low-priority, .con-tag.tag-low-priority { background: #b9c2cc; color: #1c232b; }
.con-ev.tag-trade-only, .con-tag.tag-trade-only { background: #d9c27a; color: #2a2200; }
.con-ev.tag-exhibitor-friendly, .con-tag.tag-exhibitor-friendly { background: #8fdcae; color: #062814; }
.con-ev.tag-regional, .con-tag.tag-regional { background: #c9b8f5; color: #1b1035; }
.con-ev.open.tag-must-attend, .con-ev.deadline.tag-must-attend { background: transparent; color: var(--ink); }
.tag-suggest { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; }
.tag-suggest button { cursor: pointer; border: 0; }
.ad-chip { background: #f2a65a; color: #2a1400; }
.bell { position: relative; }
.bell-panel:not([hidden]) { position: fixed; top: 54px; right: 12px; z-index: 20; width: min(380px, calc(100vw - 24px)); max-height: 70vh; overflow: auto; background: var(--panel-solid); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); padding: 8px; }
.bell-panel .ntf { display: block; padding: 8px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 14px; }
.bell-panel .ntf.unread { background: rgba(25, 169, 216, .12); font-weight: 600; }
.bell-panel .ntf small { display: block; color: var(--muted); font-weight: 400; }
.notify-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }

/* ---------- UX pass (2026-11-07): one spacing scale, compact controls, details on demand, mobile first ---------- */
:root { --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; }
details:not(.help):not(.menu) > summary::before { content: "▸"; display: inline-block; width: 1em; color: var(--muted); }
details[open]:not(.help):not(.menu) > summary::before { content: "▾"; }
.empty { color: var(--muted); font-size: 14px; margin: 8px 0; }
button.icon { min-width: 36px; padding: 4px 9px; font-size: 18px; line-height: 1; }

/* header: hold pill, alerts and bell open small panels */
.hold-pill { border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1.2; white-space: nowrap; }
.hold-pill.hold { background: rgba(242, 166, 90, .22); color: #ffd9a8; border: 1px solid rgba(242, 166, 90, .55); }
.hold-pill.kill { background: rgba(255, 90, 100, .38); color: #ffe0e2; border: 1px solid rgba(255, 90, 100, .8); }
.hold-pill.clear { background: rgba(60, 200, 130, .22); color: #c6f5d9; border: 1px solid rgba(60, 200, 130, .5); }
.brand button.theme { margin-left: 0; letter-spacing: 0; }
.bell-panel p { margin: 6px 0; font-size: 14px; }
.pp-head { margin-bottom: 4px; }
.alert-list { margin: 4px 0; padding-left: 0; list-style: none; font-size: 14px; }
.alert-list li { padding: 6px 0; border-top: 1px solid var(--line); }
.alert-list .kind { display: inline-block; min-width: 64px; color: var(--muted); text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }

/* page shell: title row with one primary action, optional toolbar, content */
h1 { font-size: 22px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 2px 0 var(--s3); }
.page-head h1 { margin: 0; line-height: 1.2; }
.page-head .ph-sub { color: var(--muted); font-size: 14px; }
.page-head .ph-act { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.page-head .ph-act:empty { display: none; }
details.help, details.menu { position: relative; display: inline-block; }
details.help > summary, details.menu > summary { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 14px; font-weight: 700; background: var(--panel-solid); cursor: pointer; }
details.help[open] > summary, details.menu[open] > summary { color: var(--accent); border-color: var(--accent); }
details.help .pop-body, details.menu .pop-body { position: absolute; z-index: 12; top: calc(100% + 6px); left: 0; width: min(360px, calc(100vw - 24px)); background: var(--panel-solid); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); font-size: 14px; color: var(--ink); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.45; white-space: normal; }
details.menu .pop-body { left: auto; right: 0; width: max-content; max-width: min(320px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 6px; }
details.help .pop-body p { margin: 6px 0; }
details.help .legend { margin: 0 0 6px; }

/* segmented control (Month / Week / Agenda and friends) */
.seg { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--panel-solid); }
.seg button { border: 0; border-radius: 0; background: transparent; padding: 6px 12px; font-size: 14px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }

/* filters: one button with a count, removable chips for what is active, the panel on demand */
.fbar { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-bottom: var(--s2); }
.fbar .fsearch { flex: 1 1 160px; width: auto; min-width: 0; }
.fbtn { display: inline-flex; gap: 6px; align-items: center; border-radius: 999px; padding: 6px 12px; flex: none; }
.fbtn.on { border-color: var(--accent); color: var(--accent); }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 12px; text-align: center; line-height: 18px; }
.fchips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 var(--s2); }
.fchips::-webkit-scrollbar { display: none; }
.fchip { flex: none; border-radius: 999px; padding: 3px 10px; font-size: 12px; background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.fchip.clear { background: transparent; color: var(--muted); border-color: var(--line); }
.fpanel { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s2) var(--s3); padding: var(--s3); margin-bottom: var(--s3); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.fpanel[hidden] { display: none; }
.fpanel .fl { margin: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.fpanel select, .fpanel input:not([type="checkbox"]) { width: 100%; padding: 6px 8px; }
.fpanel .mini-check { align-self: end; min-height: 36px; }
.fpanel .wide { grid-column: 1 / -1; }

/* calendar */
.cal-title h1 { min-width: 0; }
.mixline { margin: 0 0 var(--s2); font-size: 12px; color: var(--muted); }
.mixline > summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 0; }
.mix-body { padding: 4px 0; line-height: 2; }

/* compact rows: what, when, state; details on tap */
.item { border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: 0; }
.item > summary { display: flex; gap: var(--s2); align-items: center; padding: 10px 0; min-height: 44px; cursor: pointer; }
.item > summary::before { flex: none; }
.item .it-main { min-width: 0; flex: 1; }
.item .it-title { font-weight: 600; overflow-wrap: anywhere; }
.item .it-sub { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 2px; }
.item .it-state { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.item .it-body { padding: 0 0 12px 1.2em; font-size: 14px; }
.sec > summary { font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.sec > summary .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
details.card.sec[open] > summary { margin-bottom: 10px; }

@media (pointer: coarse) {
  details.help > summary, details.menu > summary { min-width: 44px; height: 44px; }
}
@media (max-width: 760px) {
  .card { padding: 12px; }
  .quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: var(--s2); }
  .quick::-webkit-scrollbar { display: none; }
  .quick button { flex: none; }
  .fpanel { grid-template-columns: 1fr 1fr; }
  details.help .pop-body { position: fixed; top: 60px; left: 12px; right: 12px; width: auto; max-height: 70vh; overflow: auto; }
  .top { padding: 6px 10px; }
  .brand { gap: 6px; }
  /* More: a clean grouped list */
  .drawer:not([hidden]) { padding: 6px 12px 12px; }
  .drawer .more-group { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding: 2px 0 6px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .drawer .more-group:last-child { border-bottom: 0; }
  .drawer .more-group h2 { grid-column: 1 / -1; font-size: 12px; color: #8fa6c0; margin: 8px 4px 2px; letter-spacing: .08em; }
  .drawer .more-group a { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; min-height: 44px; border-radius: 8px; color: #e9f0fa; background: rgba(255, 255, 255, .04); }
}
.nav-count[hidden] { display: none; }
.cal, .cal-head, .week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.day, .wk-day { min-width: 0; }
@media (min-width: 761px) and (max-width: 1199px) { /* unfolded Fold and tablets: nav on its own scrollable row (R11 8: one row from 1200 px) */
  .top { grid-template-columns: 1fr; row-gap: 4px; }
  .nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-group { flex: none; }
  .nav a { flex: none; white-space: nowrap; }
}
@media (max-width: 760px) {
  .week { grid-template-columns: 1fr; }
  .backlog { grid-template-columns: 1fr; }
  .ev.md { flex-direction: row; gap: 8px; }
  .ev.md .th { width: 56px; height: 56px; }
  .wk-day .ev.md .th.none, .backlog .ev.md .th.none { width: 32px; height: 32px; }
}
@media (min-width: 761px) and (max-width: 1000px) { .day .ev .th { display: none; } }
@media (max-width: 760px) {
  .cal-title h1 { font-size: 17px; }
  .wk-day.empty-day { padding: 4px 8px; display: flex; align-items: center; gap: 8px; }
  .wk-day.empty-day .wk-head { margin: 0; }
  .wk-day.empty-day > .muted { display: none; }
  .week { gap: 4px; }
}
@media (max-width: 760px) { .cal { gap: 2px; } .cal-head { margin-bottom: 2px; } .day { padding: 2px; border-radius: 6px; } .day .ev { padding: 2px 3px; } .day .con-ev { padding: 1px 3px; } }
@media (max-width: 760px) { .agenda-day { padding: 8px 0; } .agenda-day .d small { display: inline; margin-left: 6px; } }

/* post rows (List and anywhere posts are listed) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card.rows { padding-top: 2px; padding-bottom: 2px; }
.prow { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0 9px 8px; min-height: 52px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; border-left: 3px solid transparent; }
.prow:last-child { border-bottom: 0; }
.prow.adventures { border-left-color: var(--adv); } .prow.phantom_epoch { border-left-color: var(--pe); } .prow.fulfillment { border-left-color: var(--danger); }
.prow:hover .pr-title { color: var(--accent); }
.pr-date { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; }
.pr-date small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.pr-title { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-sub { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-top: 3px; font-size: 12px; }
.pr-sub .muted { font-size: 12px; }
.pr-go { color: var(--muted); font-size: 20px; padding-right: 4px; }
@media (max-width: 760px) { .prow { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; } }

/* inbox rows: who, what, when, state; reply and triage on tap */
.inb { grid-template-columns: auto minmax(0, 1fr); }
.inb .txt { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.inb-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.inb-actions button, .inb-actions .btn { padding: 4px 10px; font-size: 14px; }
.inb-tog[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.inb-panel { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-solid); }
.inb-panel[hidden] { display: none; }
.inb-panel .ctl { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 10px; align-items: end; margin-top: 8px; flex-direction: row; }
.inb-panel .ctl select, .inb-panel .ctl input:not([type="checkbox"]) { width: 100%; }
.inb-panel .meta { margin-bottom: 4px; }
.syncline .mix-body { line-height: 1.6; }

/* needs rows */
.need .need-text { display: block; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); margin: 0; cursor: pointer; }
.need-ctl { display: flex; gap: 4px; align-items: center; }
.need-ctl .need-req { margin-left: 0; }
details.prov { display: inline; } details.prov > summary { display: inline; color: var(--muted); cursor: pointer; padding: 0 4px; }
details.prov > summary::before { content: none !important; }
details.prov[open] { display: inline; }
#needAdd[hidden] { display: none; }

/* assets: compact cards, two across on a phone */
.asset-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.asset-card { padding: 8px; }
.asset-card .preview { aspect-ratio: 16 / 10; object-fit: cover; max-height: none; }
.as-title { font-weight: 600; margin-top: 6px; overflow-wrap: anywhere; line-height: 1.3; }
.as-title a { color: var(--ink); text-decoration: none; } .as-title a:hover { color: var(--accent); }
.as-sub { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-top: 4px; font-size: 12px; }
.as-sub .muted { font-size: 12px; }
.as-more { margin-top: 4px; font-size: 14px; }
.as-more > summary { color: var(--muted); font-size: 14px; padding: 4px 0; }
.asset-card .actions { margin-top: 4px; }
.upload-card[hidden] { display: none; }
.pager { align-items: center; }
@media (max-width: 760px) { .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.page-head { flex-wrap: nowrap; }
.page-head h1 { flex: none; }
.page-head .ph-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head .ph-act { flex: none; flex-wrap: nowrap; }
.page-head details.help { flex: none; }
.cal-title { flex-wrap: wrap; }

/* home: four compact lists, up to five rows each */
.home-card h2 { margin-bottom: 4px; }
.home-row { min-height: 48px; padding: 6px 0; }
.home-row img, .home-row .th { width: 40px; height: 40px; }
.home-row .hr-main { min-width: 0; display: flex; flex-direction: column; }
.home-row .hr-main b { font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.home-row .hr-main .muted { font-size: 12px; }
.see-all { display: inline-block; margin-top: 6px; font-size: 14px; padding: 6px 0; }
@media (min-width: 761px) { .home-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } }

/* post page: compact head, state line, details on demand */
.post-top { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.post-top .back { margin-right: auto; text-decoration: none; padding: 6px 0; }
.post-title { margin: 0 0 4px; font-size: 22px; line-height: 1.25; }
.post-state { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-bottom: 10px; font-size: 14px; }
.post-more .chip { margin: 2px 2px 0 0; }
.rm-head { display: flex; justify-content: flex-end; margin: -4px 0 8px; }
.review-bar .icon { min-width: 44px; }
@media (max-width: 900px) { .review.text-only .review-copy { order: -1; } }
@media (max-width: 760px) {
  .review { gap: 8px; }
  .review-bar { flex-wrap: wrap; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .review-bar .bar-note { order: -1; flex: 1 1 100%; font-size: 12px; }
  .review-bar .muted { display: none; }
  .review-bar button { flex: 1 1 auto; white-space: nowrap; }
  .review-bar .icon { flex: 0 0 44px; }
  body.has-bar main { padding-bottom: 150px; }
}
/* the Approve button always names its destinations; on a narrow phone they wrap under the word */
@media (max-width: 460px) { #rvApprove { line-height: 1.15; padding: 4px 8px; } #rvApprove .ab-dests { display: block; font-size: 12px; font-weight: 600; } #rvChanges { white-space: normal; line-height: 1.15; } }
/* per-destination readiness chips (same gates as the dry run) */
.ready-row { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 10px; }
.ready-row details.help > summary { width: auto; height: auto; min-height: 32px; padding: 3px 10px; font-size: 12px; gap: 4px; display: inline-flex; align-items: center; }
.rd-ready > summary, .rd-sent > summary { border-color: var(--ok) !important; color: var(--ok) !important; background: var(--ok-bg) !important; }
.rd-needs_approval > summary { border-color: var(--accent) !important; color: var(--accent) !important; }
.rd-held > summary, .rd-by_hand > summary, .rd-sending > summary { border-color: #e5a33a !important; color: var(--warn) !important; background: var(--warn-bg) !important; }
.rd-blocked > summary, .rd-uncertain > summary { border-color: var(--danger) !important; color: var(--danger) !important; background: var(--danger-bg) !important; }
.rd-list { margin: 2px 0 6px; padding-left: 18px; } .rd-list li { margin: 2px 0; overflow-wrap: anywhere; } .rd-list code { font-size: 12px; color: var(--muted); }
@media (pointer: coarse) { .ready-row details.help > summary { min-height: 40px; } }
details.credit-card { margin: 10px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-solid); }
details.credit-card > summary { font-size: 14px; }
@media (max-width: 900px) { .review { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .review .preview.big { max-height: 52vh; }
  .card:has(> table.ready) { overflow-x: visible; }
  table.ready, table.ready tbody { display: block; }
  table.ready tr:first-child { display: none; }
  table.ready tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  table.ready td { border: 0; padding: 0; min-width: 0; }
  table.ready td.rd-name { grid-column: 1 / -1; }
  table.ready td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
}

/* outcomes and other tables: rows on a phone, tables on wider screens */
.narrow-only { display: none; }
.totals { margin: -4px 0 8px; }
@media (max-width: 760px) { .wide-only { display: none !important; } .narrow-only { display: block; } }
.conv-item .it-sub .flag { font-size: 12px; }
#cmCard[hidden], #fcCard[hidden] { display: none; }
.conn details { margin-top: 2px; }
.weekly .page-head + .muted { margin-top: -6px; }
@media (max-width: 900px) { .detail, .cols { grid-template-columns: minmax(0, 1fr); } .detail > div, .cols > div { min-width: 0; } }
@media (min-width: 480px) and (max-width: 900px) { #editor .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#editor label:has(> .dest-cb) { flex-wrap: wrap; }
/* package 16: automated "Blocked by" line above Outstanding requests; delivery chips */
.blocked-by { margin: 10px 0 4px; padding: 6px 10px; border: 1px solid var(--danger); border-radius: 10px; background: var(--danger-bg); color: var(--text); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.blocked-by > b:first-child { color: var(--danger); margin-right: 4px; }
.blocked-by .bb-item { margin-right: 8px; }
.flag.dlv { white-space: nowrap; }

/* accounts (package 17): header avatar, My account, Team permissions */
.me-btn { display: inline-grid; place-items: center; min-width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: 0; text-decoration: none; }
.me-btn[hidden] { display: none; }
.me-btn:hover { border-color: var(--cyan); }
@media (pointer: coarse) { .me-btn { min-width: 44px; height: 44px; } }
.login form { margin: 0; }
.login .actions a { align-self: center; }
.login-more summary { cursor: pointer; padding: 10px 0; }
.team-row .u-panel { grid-column: 1 / -1; border-top: 1px dashed var(--line); padding-top: 8px; }
.cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; margin: 8px 0; }
.cap-grid .mini-check { display: flex; gap: 8px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); margin: 0; padding: 6px 0; min-height: 44px; }
.cap-grid .mini-check input { width: auto; margin-top: 3px; }
.cap-grid .mini-check.extra b { color: var(--warn); }
.cap-list { list-style: none; padding: 0; margin: 6px 0; columns: 2 260px; font-size: 14px; }
.cap-list li { padding: 2px 0; break-inside: avoid; }
.cap-list li.off { color: var(--muted); }
.qr { background: #fff; display: inline-block; padding: 6px; border-radius: 8px; line-height: 0; }
.qr svg { width: min(220px, 70vw); height: auto; }
code.secret { font-family: ui-monospace, Consolas, monospace; font-size: 14px; word-break: break-all; }
.token-modal textarea.codes { font-family: ui-monospace, Consolas, monospace; font-size: 14px; }
ol.steps { padding-left: 20px; margin: 8px 0; }
/* Conventions page: List / Calendar (conventions only) */
.con-cal .cal-title { margin: 6px 0 6px; }
.con-cal .cal-title h2 { margin: 0; font-size: 17px; flex: 0 1 auto; text-transform: none; letter-spacing: 0; color: var(--ink); }
.con-cal .day { min-height: 70px; }
.con-cal .day .con-ev { cursor: pointer; }
.con-cal-foot { font-size: 12px; margin: 6px 0 0; }
.con-sheet .page-head { gap: 8px; align-items: center; }
@media (max-width: 640px) { .con-cal .day { min-height: 50px; } .con-cal .day .n { font-size: 12px; } }
/* Yours: the signed-in person's needs, on Home and on Needs */
.home-yours { border: 2px solid var(--accent); margin-bottom: 12px; }
.home-yours h2 .badge, .needs-who .badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #06121f; font-size: 12px; text-align: center; letter-spacing: 0; }
.home-yours .mine-row { display: flex; align-items: center; gap: 10px; }
.home-yours .mine-row .hr-main { flex: 1; min-width: 0; }
.home-yours .mine-row .hr-main a { color: inherit; text-decoration: underline; }
.mine-done { flex: none; min-height: 40px; white-space: nowrap; border-color: var(--accent); color: var(--accent); }
.needs-who { margin: 4px 0 8px; }
.needs-who .seg button { min-width: 96px; }
.mine-card { border: 2px solid var(--accent); }
.need.mine { box-shadow: inset 3px 0 0 var(--accent); padding-left: 8px; }
.nav-count.mine-count { background: var(--accent); color: #06121f; }

/* convention costs: one row each; form errors next to the field (toasts sit above modals: .toast z-index 60 > .modal-back 30) */
.cost-rows { display: grid; gap: 6px; }
.cost-row { display: grid; grid-template-columns: minmax(0, 1fr) 7em auto auto auto; gap: 6px; align-items: center; }
.cost-row .c-cur { width: auto; } .cost-row .c-cur-other { width: 5em; text-transform: uppercase; }
.cost-row .form-err { grid-column: 1 / -1; }
@media (max-width: 560px) { .cost-row { grid-template-columns: minmax(0, 1fr) 6em auto; } .cost-row .c-label { grid-column: 1 / -1; } .cost-row .c-cur-other { grid-column: 2; } }
#cv_cost_add { margin-top: 6px; }
.form-err { color: var(--danger); background: var(--danger-bg); border-radius: 8px; padding: 6px 10px; margin: 4px 0; font-size: 14px; }
.form-err[hidden] { display: none; }
.has-err { border-color: var(--danger) !important; box-shadow: 0 0 0 1px var(--danger); }

/* progressive forms: core first, sections on demand (remembered per device) */
details.fsec { border: 1px solid var(--line); border-radius: 10px; margin: 10px 0; background: var(--panel-solid); }
details.fsec[hidden] { display: none; }
details.fsec > summary { cursor: pointer; padding: 10px 12px; min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; font-weight: 600; }
details.fsec > summary::-webkit-details-marker { display: none; }
details.fsec > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
details.fsec[open] > summary::before { transform: rotate(90deg); }
details.fsec .fsec-sub { font-weight: 400; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
details.fsec > .fsec-body { padding: 0 12px 12px; }
.core { margin-bottom: 4px; }
.dest-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.dchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 40px; border: 1px solid var(--line); border-radius: 999px; text-transform: none; font-size: 14px; color: var(--ink); margin: 0; cursor: pointer; }
.dchip input { width: auto; margin: 0; }
.dchip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.copy-all { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; margin-bottom: 6px; }
.copy-all select { width: auto; }
.need-core { grid-template-columns: minmax(0, 1fr) auto auto auto; }
@media (max-width: 640px) { .need-core { grid-template-columns: 1fr 1fr; } .need-core #needText { grid-column: 1 / -1; } }
.need-more { grid-template-columns: auto auto minmax(0, 1fr) auto; }
@media (max-width: 640px) { .need-more { grid-template-columns: 1fr 1fr; } }

/* data tables: sortable, column picker, stacked rows on phones (the full table scrolls sideways only when chosen) */
.dtable { margin: 8px 0; }
table.dt { width: 100%; border-collapse: collapse; }
table.dt th { white-space: nowrap; }
.dt-sort { background: none; border: 0; padding: 4px 0; min-height: 32px; font: inherit; color: inherit; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
.dt-sort.on { color: var(--accent); }
table.dt tr.dt-row { cursor: pointer; }
table.dt tr.dt-row:hover, table.dt tr.dt-row:focus-visible { background: var(--accent-soft); outline: none; }
table.dt td { vertical-align: top; }
table.dt .dt-open { display: none; }
table.dt .dt-sel { width: 32px; } table.dt .dt-sel input { width: auto; }
table.dt tr.dt-group th { text-align: left; padding-top: 12px; color: var(--accent); }
table.dt select.cv-qs { width: auto; padding: 2px 6px; min-height: 32px; }
.colpick .pop-body { min-width: 260px; }
.colpick .cp-row { display: flex; align-items: center; gap: 4px; } .colpick .cp-row label { flex: 1; margin: 0; }
.colpick > summary { width: auto; padding: 0 12px; }
.dt-wide { overflow-x: auto; } .dt-wide table.dt { min-width: 900px; }
@media (max-width: 760px) {
  .dtable:not(.dt-wide) table.dt, .dtable:not(.dt-wide) table.dt tbody { display: block; }
  .dtable:not(.dt-wide) table.dt thead { display: block; overflow-x: auto; }
  .dtable:not(.dt-wide) table.dt thead tr { display: flex; gap: 10px; }
  .dtable:not(.dt-wide) table.dt thead th { border: 0; padding: 0; }
  .dtable:not(.dt-wide) table.dt tr.dt-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; padding: 8px 10px; }
  .dtable:not(.dt-wide) table.dt tr.dt-row > td { display: block; border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
  .dtable:not(.dt-wide) table.dt tr.dt-row > td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
  .dtable:not(.dt-wide) table.dt tr.dt-row > td.dt-first { grid-column: 1 / -1; font-size: 15px; }
  .dtable:not(.dt-wide) table.dt tr.dt-row > td.dt-first::before, .dtable:not(.dt-wide) table.dt tr.dt-row > td.dt-sel::before { display: none; }
  .dtable:not(.dt-wide) table.dt tr.dt-row > td.dt-sel { grid-column: 1 / -1; }
  .dtable:not(.dt-wide) table.dt tr.dt-row > td.dt-more, .dtable:not(.dt-wide) table.dt tr.dt-row > td.dt-open { display: none; }
  .dtable:not(.dt-wide) table.dt tr.dt-row.open > td.dt-more { display: block; }
  .dtable:not(.dt-wide) table.dt tr.dt-row.open > td.dt-open { display: block; grid-column: 1 / -1; }
  .dtable:not(.dt-wide) table.dt tr.dt-group { display: block; } .dtable:not(.dt-wide) table.dt tr.dt-group th { display: block; border: 0; }
  .dtable:not(.dt-wide) table.dt tr.dt-none, .dtable:not(.dt-wide) table.dt tr.dt-none td { display: block; border: 0; }
}
.dtable { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px 10px; }
@media (max-width: 760px) {
  .dtable:not(.dt-wide) { background: none; border: 0; padding: 0; }
  .dtable:not(.dt-wide) table.dt thead { background: var(--panel); border-radius: 10px; padding: 0 8px; }
  .dtable:not(.dt-wide) table.dt tr.dt-row { background: var(--panel-solid); }
}

/* Posts table: bulk actions, status grouping */
.bulk-bar { position: sticky; top: 96px; z-index: 4; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; margin: 6px 0; border: 1px solid var(--accent); border-radius: 10px; background: var(--panel-solid); }
.bulk-bar[hidden] { display: none; }
.grp-status { margin: 0; font-size: 14px; }
.dchip-s { font-size: 12px; padding: 1px 6px; margin: 0 2px 2px 0; }
.rd-sum { white-space: nowrap; }

/* display currency */
.amt { white-space: nowrap; }
.amt-orig { white-space: nowrap; }
select.cur-pick { width: auto; padding: 2px 6px; min-height: 36px; }
.cur-inline { display: inline-flex; gap: 6px; align-items: center; text-transform: none; margin: 0 0 0 6px; font-size: 14px; }

/* upload as a new version */
.version-banner { border-left: 3px solid var(--accent); }
.version-banner p { margin: 4px 0; }

/* end card review */
.end-card { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; }
.end-card h3 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0; }

/* review of 2026-11-07: quieter editor, Home and asset page */
.dest-sum { margin: 6px 0 2px; }
.more-opts { margin: 4px 0 6px; }
.more-opts > summary { cursor: pointer; font-size: 14px; }
.cap-prov { display: inline-block; margin-left: 4px; }
.cap-incomplete .mini-check { display: inline-flex; margin-left: 6px; }
.home-later { margin-top: 6px; }
.home-later > summary { cursor: pointer; }
.no-speech { margin: 4px 0; }
.add-more { margin: 8px 0; }
.add-more > summary { cursor: pointer; color: var(--accent); font-size: 14px; padding: 6px 2px; }

/* conventions: the application, said first */
.applied-banner { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 10px 12px; margin: 4px 0 10px; border: 1px solid var(--accent); border-radius: 10px; background: var(--panel-solid); }
.applied-banner.done { border-color: var(--ok, #3fb37f); justify-content: flex-start; }
.applied-chip { font-size: 14px; }
button.mini { padding: 2px 8px; min-height: 30px; font-size: 12px; margin-left: 4px; }
.link-btn { background: none; border: none; color: var(--muted); text-decoration: underline; padding: 0; min-height: 0; }

/* posted box, inline end card, asset approval */
.posted-box { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.posted-box.done { border-color: transparent; padding-left: 0; }
.ec-inline { margin: 6px 0 10px; }
.asset-approval { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -4px 0 10px; }
.need-ready { margin-left: 4px; }

.posted-box.native > summary { cursor: pointer; color: var(--muted); }
.posted-box.native > summary b { color: var(--accent); font-weight: 600; }

/* placement previews (package 19) */
.pv-views { margin: 0 0 8px; display: flex; justify-content: center; }
.pv-views .seg button { font-size: 12px; padding: 4px 10px; }
.pv-frame { margin: 0 auto; }
.pv-frame video, .pv-frame img { object-position: center; }
.pv-fs-cap { position: absolute; left: 4%; right: 18%; bottom: 6%; color: #fff; font-size: 12px; line-height: 1.35; text-shadow: 0 1px 3px #000; max-height: 22%; overflow: hidden; white-space: pre-wrap; pointer-events: none; }
.pv-note, .pv-acc { font-size: 12px; margin: 6px 0 0; }
.pv-acc a { color: var(--muted); text-decoration: underline; }

.pv-toggles { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; font-size: 14px; }
.pv-toggles .mini-check { text-transform: none; margin: 0; }
.pv-legend { font-size: 12px; text-align: center; margin: 2px 0 8px; }

.rd-review_request summary { border-color: var(--warn, #e0a030); color: var(--warn, #e0a030); }

.pv-rec { font-size: 12px; margin: 6px 0 0; padding: 6px 8px; border-left: 3px solid var(--warn, #e0a030); background: rgba(224, 160, 48, .08); border-radius: 6px; }

/* Placement preview (package 21): clean by default; crop, possible crop and interface overlap each look different. */
.pv:has(.pv-desktop) { max-width: 680px; }
.pv-approx { text-align: center; font-size: 12px; margin: 0 0 6px; }
.pv-shell { margin-top: 6px; }
.pv-frame { position: relative; overflow: hidden; background: #000; border-radius: 8px; margin: 0 auto; max-width: 100%; }
.pv-frame video, .pv-frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-position: center; }
.pv-round { border-radius: 16px; }
.pv-backdrop { background: radial-gradient(#333, #000); }
.pv-missing { aspect-ratio: 1; display: grid; place-items: center; color: #fff; }
.pv-cut { position: absolute; background: rgba(0, 0, 0, .62); pointer-events: none; }
.pv-cut span, .pv-maybe span, .pv-zone span { position: absolute; top: 3px; left: 5px; font-size: 12px; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.pv-maybe { position: absolute; border: 2px dashed rgba(255, 255, 255, .9); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .25); pointer-events: none; }
.pv-zone { position: absolute; pointer-events: none; background: repeating-linear-gradient(45deg, rgba(255, 176, 0, .45) 0 6px, rgba(255, 176, 0, .1) 6px 12px); border: 1px solid rgba(255, 176, 0, .9); }
.pv-zone span { color: #fff; }
.pv-fs-cap { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; max-height: none; }
.pv-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines); overflow: hidden; }
.pv-grid { position: relative; width: 100%; border-radius: 10px; overflow: hidden; background: var(--line); }
.pv-cell { position: absolute; overflow: hidden; box-shadow: 0 0 0 1px var(--panel-solid); background: #000; }
.pv-cell img, .pv-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-more { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; color: #fff; background: rgba(0, 0, 0, .5); }
.pv-strip { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.pv-strip .pv-slide-wrap { flex: 0 0 100%; scroll-snap-align: center; }
.pv-peek .pv-slide-wrap { flex-basis: 82%; }
.pv-viewer { background: #000; border-radius: 8px; }
.pv-strip .pv-frame { width: 100%; }
.pv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; max-width: 420px; margin: 0 auto; }
.pv-tile { aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; background: #000; overflow: visible; }
.pv-tile .pv-frame { border-radius: 0; height: 100%; width: auto !important; max-width: none; }
.pv-tile-ghost { aspect-ratio: 3 / 4; background: var(--line); opacity: .5; }
.pv-stage { display: flex; gap: 8px; background: #111; border-radius: 8px; padding: 8px; }
.pv-stage-media { flex: 1; display: flex; justify-content: center; align-items: center; min-height: 240px; }
.pv-stage-media .pv-frame { max-height: 56vh; }
.pv-side { flex: 0 0 34%; font-size: 12px; border-left: 1px solid #333; padding: 8px; color: #aaa; }
.pv-outer { display: flex; justify-content: center; align-items: center; width: 100%; background: transparent; }
.pv-outer .pv-frame { height: 100%; width: auto !important; }
.pv-original { margin-top: 8px; } .pv-orig-row { display: flex; gap: 6px; overflow-x: auto; }
.pv-orig { position: relative; flex: 0 0 auto; height: 140px; background: #000; border-radius: 6px; overflow: hidden; }
.pv-orig img, .pv-orig video { width: 100%; height: 100%; object-fit: contain; }
.pv-link { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; font-size: 12px; margin-top: 6px; }
.pv-yt-title { margin: 6px 0 2px; }
.pv-legend .lg { display: inline-block; width: 12px; height: 10px; vertical-align: middle; margin: 0 3px 0 8px; }
.lg-cut { background: rgba(0, 0, 0, .62); outline: 1px solid #888; }
.lg-maybe { border: 2px dashed currentColor; }
.lg-zone { background: repeating-linear-gradient(45deg, rgba(255, 176, 0, .7) 0 3px, rgba(255, 176, 0, .15) 3px 6px); }
.pv-details { font-size: 12px; margin-top: 8px; } .pv-details summary { cursor: pointer; color: var(--muted); }
.pv-details p { margin: 6px 0; }
.pv-frame .pv-fs-cap { bottom: 16%; }
.pv-thumbs { display: flex; gap: 4px; margin-top: 6px; overflow-x: auto; }
.pv-thumb { position: relative; flex: 0 0 44px; height: 44px; padding: 0; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.pv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pv-thumb span { position: absolute; left: 2px; bottom: 1px; font-size: 12px; color: #fff; text-shadow: 0 1px 2px #000; }
.assisted { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.assisted.bad { border-color: var(--danger); }
.assisted .actions { margin-top: 6px; }
.pkg-box { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.pkg-box p { margin: 6px 0; }
.pv-cw summary { cursor: pointer; padding: 6px 0; }
.pv-contrib { max-width: none; margin: 8px 0; }
.pv-contrib-title { font-size: 15px; margin: 4px 0; }
.pub-box { border: 1px solid var(--accent, #3a8ee6); border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.pub-box.bad { border-color: var(--danger); }
.pub-modal { width: min(560px, 100%); }
.pub-media { display: flex; gap: 6px; overflow-x: auto; margin: 6px 0; }
.pub-media figure { margin: 0; flex: 0 0 auto; width: 90px; font-size: 12px; }
.pub-media img { width: 90px; height: 90px; object-fit: cover; border-radius: 6px; background: #000; display: block; }
.pub-progress { display: flex; gap: 8px; align-items: center; }
.spin { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent, #3a8ee6); border-radius: 50%; display: inline-block; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.asset-rejected { margin: 6px 0; }
.as-rej { display: block; margin: 4px 0; white-space: normal; }
.as-review { margin: 4px 0; } .as-review button { font-size: 12px; padding: 3px 10px; }
.rj-picks { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; } .rj-picks .mini-check { text-transform: none; margin: 0; }
.down-banner { position: sticky; top: 0; z-index: 50; background: #b7791f; color: #fff; padding: 8px 14px; font-size: 14px; text-align: center; }
.ar-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; } .ar-filters select { width: auto; }
.ar-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
.ar-media .preview.big { width: 100%; max-height: 70vh; object-fit: contain; background: #000; border-radius: 8px; }
.ar-full { height: auto; }
.ar-this { outline: 2px solid var(--accent, #3a8ee6); }
@media (max-width: 760px) { .ar-grid { grid-template-columns: 1fr; } .ar-media .preview.big { max-height: 55vh; } }
#ntPushMsg.flag, .home-notify { display: block; font-size: 14px; line-height: 1.4; padding: 6px 8px; font-weight: 500; }
.home-notify { margin: 0 0 10px; }
.quick-labels { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; } .quick-labels .chip { cursor: pointer; border: 1px solid transparent; } .quick-labels .chip.active { border-color: var(--accent, #3a8ee6); }
.inb-facts { font-size: 12px; }
.gf-card .gf-stats { font-size: 15px; margin: 4px 0; }
.gf-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 8px 0; }
.gf-chart { margin: 0; } .gf-chart figcaption { font-size: 12px; color: var(--muted, #8a97a8); margin-bottom: 2px; }
.gf-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.gf-line { fill: none; stroke: var(--accent, #3a8ee6); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gf-dot { fill: var(--accent, #3a8ee6); } .gf-hit { fill: transparent; } .gf-hit:hover { fill: var(--accent, #3a8ee6); fill-opacity: .25; }
.gf-base { stroke: var(--line, rgba(128,128,128,.35)); stroke-width: 1; }
.gf-target { stroke: var(--muted, #8a97a8); stroke-width: 1.5; stroke-dasharray: 4 3; }
.gf-last, .gf-tl, .gf-ax { font-size: 12px; fill: var(--text, currentColor); } .gf-tl, .gf-ax { fill: var(--muted, #8a97a8); }
.gf-table table { width: 100%; font-size: 12px; margin: 6px 0; } .gf-form { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; }
.gf-check .mini-check { display: block; margin: 4px 0; text-transform: none; }
.gf-alert { display: block; font-size: 14px; line-height: 1.4; padding: 6px 8px; font-weight: 500; margin: 4px 0; }
.lc-table { width: 100%; font-size: 14px; } .lc-table td, .lc-table th { padding: 3px 6px; text-align: left; } .lc-table td:first-child { color: var(--muted, #8a97a8); }

/* The assistant panel (package 27): floating, pinned right or bottom; full screen on a phone. */
.as-btn { position: fixed; right: 18px; bottom: 18px; z-index: 25; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--accent); color: var(--accent-ink); font-size: 22px; box-shadow: var(--shadow); cursor: pointer; }
.as-panel { position: fixed; z-index: 26; background: var(--panel-solid); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; color: var(--ink); }
.as-float { right: 18px; bottom: 80px; width: 380px; height: 520px; min-width: 280px; min-height: 240px; max-width: calc(100vw - 24px); max-height: calc(100vh - 100px); border-radius: 14px; resize: both; }
.as-right { top: 0; right: 0; bottom: 0; width: 400px; min-width: 300px; max-width: 70vw; border-radius: 0; resize: horizontal; direction: rtl; }
.as-right > * { direction: ltr; }
.as-bottom { left: 0; right: 0; bottom: 0; height: 320px; min-height: 180px; max-height: 80vh; border-radius: 0; resize: vertical; }
.as-panel.as-min { height: auto !important; min-height: 0; resize: none; }
.as-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.as-head .muted { font-size: 12px; }
.as-tools { margin-left: auto; display: flex; gap: 4px; }
.as-tools button { min-width: 32px; min-height: 32px; padding: 2px 6px; }
.as-log { flex: 1; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.as-msg { padding: 8px 10px; border-radius: 10px; max-width: 92%; line-height: 1.4; overflow-wrap: anywhere; }
.as-user { align-self: flex-end; background: var(--accent-soft); }
.as-assistant { align-self: flex-start; border: 1px solid var(--line); }
.as-via { font-size: 12px; }
.as-confirm .actions { margin-top: 6px; }
.as-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.as-form textarea { flex: 1; resize: none; min-height: 44px; }
@media (max-width: 600px) {
  .as-btn { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .as-panel.as-float, .as-panel.as-right, .as-panel.as-bottom { inset: 0; width: auto; height: auto; max-width: none; max-height: none; border-radius: 0; resize: none; z-index: 40; direction: ltr; }
  .as-panel.as-min { inset: auto 0 0 0; }
}

.dc-steps { margin: 0 0 6px 18px; padding: 0; } .dc-steps li { margin: 2px 0; }

/* Package 28: wide tables scroll inside their own container, never the page. */
.tbl-wrap, .card:has(> table.out) { overflow-x: auto; max-width: 100%; }

/* ---------- Package 28 stage B: areas, subnavigation, Today, list/detail ---------- */
.subnav { position: sticky; top: var(--top-h, 56px); z-index: 4; background: var(--panel-solid); border-bottom: 1px solid var(--line); }
.subnav[hidden] { display: none; }
.subnav-in { max-width: 1200px; margin: 0 auto; padding: 0 14px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.subnav a { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; min-height: 44px; }
.subnav a:hover { color: var(--ink); }
.subnav a.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.nav-count.neutral, .quick b.neutral { background: var(--chip); color: var(--ink); }
.quick button b.neutral { background: none; }
.calm { color: var(--muted); margin: 6px 0; }
/* Today: the attention queue */
.today-queue h2 .badge, .today-grid h2 .badge { margin-left: 6px; }
.q-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.q-row:last-of-type { border-bottom: 0; }
.q-main { flex: 1; min-width: 0; display: grid; grid-template-columns: 7.5em 1fr auto; gap: 10px; align-items: center; padding: 8px 0; color: var(--ink); text-decoration: none; min-height: 44px; }
.q-main:hover .q-text b { color: var(--accent); }
.q-type { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--chip); text-align: center; }
.q-type.t-delivery, .q-type.t-blocked { background: var(--danger-bg); color: var(--danger); }
.q-type.t-review { background: var(--accent-soft); color: var(--accent); }
.q-type.t-deadline, .q-type.t-your-request { background: var(--warn-bg); color: var(--warn); }
.q-text { min-width: 0; display: flex; flex-direction: column; }
.q-text b { font-weight: 600; overflow-wrap: anywhere; }
.q-text .muted { font-size: 14px; }
.q-next { color: var(--accent); font-size: 14px; white-space: nowrap; }
.today-queue details.later { margin-top: 8px; }
.today-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; margin-top: 12px; }
.today-grid .card { margin: 0; }
.pub-state { font-size: 14px; font-weight: 600; }
.pub-state.p-auto, .pub-state.p-manual { color: var(--accent); } .pub-state.p-blocked { color: var(--danger); } .pub-state.p-approved { color: var(--ok); } .pub-state.p-planned, .pub-state.p-review { color: var(--warn); }
.home-row.compact { min-height: 0; }
@media (max-width: 760px) { .q-main { grid-template-columns: 1fr; gap: 2px; } .q-type { justify-self: start; } .q-next { display: none; } }
/* Community: list and one item in detail */
.ib-split { display: grid; gap: 12px; align-items: start; }
@media (min-width: 1024px) { .ib-split { grid-template-columns: minmax(300px, 400px) 1fr; } .ib-detail { position: sticky; top: calc(var(--top-h, 56px) + 56px); max-height: calc(100vh - var(--top-h, 56px) - 72px); overflow: auto; } .back-link { display: none; } }
@media (max-width: 1023px) { .ib-split.has-detail .ib-list, .ib-split:not(.has-detail) .ib-detail { display: none; } }
.ib-list, .ib-detail { margin: 0; }
.ib-list { padding: 4px; }
.ib-row { display: flex; gap: 8px; padding: 10px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.ib-row:hover { background: var(--accent-soft); }
.ib-row.active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.ib-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ib-who { font-size: 14px; overflow-wrap: anywhere; }
.ib-text { color: var(--muted); font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ib-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; }
.ib-none { color: var(--muted); }
.back-link { display: inline-block; margin-bottom: 8px; }
@media (min-width: 1024px) { .ib-detail .back-link { display: none; } }
.inb-actions select { width: auto; max-width: 100%; }
.assess { margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: var(--accent-soft); }
.assess .quick-labels { margin-top: 6px; }
.suggest { color: var(--muted); font-size: 14px; }
.suggest::before { content: "◇ "; }
/* Settings › Health dimensions */
.hdim { border-bottom: 1px solid var(--line); padding: 6px 0; }
.hdim:last-of-type { border-bottom: 0; }
.hdim > summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; min-height: 32px; }
.hstate { font-size: 14px; font-weight: 600; white-space: nowrap; }
.hstate.ok { color: var(--ok); } .hstate.info { color: var(--muted); } .hstate.attention { color: var(--warn); } .hstate.problem { color: var(--danger); }
.hitems { list-style: none; padding: 0; margin: 6px 0 4px; }
.hitems li { padding: 4px 0; overflow-wrap: anywhere; }
.hitems .tech { margin-top: 2px; } .hitems .tech summary { font-size: 12px; color: var(--muted); }
.scope { font-size: 14px; }
/* Drawer: area headings link to the area */
.more-group h2 a { color: inherit; text-decoration: none; }

.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; }
.dest-tabs { margin: 8px 0; }
.wf-summary .pub-state { margin: 0 4px; }

.status.fact-internal { background: var(--warn-bg); color: var(--warn); }
.group-h { font-size: 15px; margin: 18px 0 6px; color: var(--muted); }

/* ---------- Package 28 stage C: quieter working surfaces, readable text, accessibility ---------- */
/* The galaxy stays as a faint backdrop behind the header area; content sits on solid surfaces. */
body::before { background: linear-gradient(180deg, rgba(7, 16, 32, .93) 0%, rgba(7, 16, 32, .975) 220px, rgba(7, 16, 32, .992) 100%); }
:root { --muted: #a9bbd2; }
:root[data-theme="light"] { --muted: #4d5d71; }
.card, .modal, .bell-panel, .drawer { background: var(--panel-solid); }
.card { box-shadow: none; }
:root[data-theme="light"] .card { box-shadow: 0 1px 2px rgba(15, 36, 64, .06); }
/* Sentence case; colour is kept for meaning (status, actions), not for every heading. */
h2 { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 17px; font-weight: 650; }
.sec > summary { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 15px; font-weight: 650; }
label { text-transform: none; letter-spacing: 0; font-size: 14px; }
table.out th, table.dt th { text-transform: none; letter-spacing: 0; font-size: 14px; }
table.ready td[data-label]:not([data-label=""])::before, .dtable:not(.dt-wide) table.dt tr.dt-row > td::before { text-transform: none; letter-spacing: 0; font-size: 12px; }
.status { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.flag { font-size: 12px; border-radius: 999px; padding: 1px 8px; }
.alerts .kind, .alert-list .kind { text-transform: none; letter-spacing: 0; font-size: 12px; }
small, .muted, .it-sub { line-height: 1.45; }
/* Long titles, links, translated text and error messages wrap instead of pushing the page sideways. */
.cap-view, .txt, .note, .warn, .rev, .kv > span, .home-row b, .q-text, .ib-text, .it-title, .hitems li, .sent, .post-title, .pv-cap, .need-text, .toast, .gf-alert { overflow-wrap: anywhere; word-break: normal; }
pre, .code { white-space: pre-wrap; overflow-wrap: anywhere; }
main { overflow-wrap: break-word; }
img, video { max-width: 100%; }
/* Focus is always visible, also inside the subnavigation and lists. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.subnav a:focus-visible, .ib-row:focus-visible, .q-main:focus-visible { outline-offset: -2px; border-radius: 6px; }
/* Fixed bars never cover the assistant button or the last actions on a page. */
body.has-bar .as-btn { bottom: 86px; }
body.has-bar main { padding-bottom: 96px; }
@media (max-width: 760px) { body.has-bar .as-btn { bottom: calc(132px + env(safe-area-inset-bottom)); } main { padding-bottom: 90px; } }
/* Dialogs stay usable with an on-screen keyboard: they scroll inside the visible viewport. */
.modal-back { height: 100dvh; padding-bottom: max(30px, env(keyboard-inset-height, 0px)); }
.modal { max-width: 100%; }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } body { background-attachment: scroll; } }
/* Narrow screens: header actions and toolbars wrap; tables keep their own scroll. */
@media (max-width: 760px) { .page-head { flex-wrap: wrap; } .page-head .actions, .ph-actions { flex-wrap: wrap; } .fbar { flex-wrap: wrap; } .subnav-in { padding: 0 8px; } }

/* ---------- Package 28 follow-up: contrast (WCAG AA, measured in both themes) ---------- */
/* Primary actions: white text on the deep cyan (5.3:1) instead of a gradient from light cyan (2.7:1). */
button.primary, a.btn.primary-link { background: var(--cyan-deep); color: #fff; text-shadow: none; }
button.primary:hover, a.btn.primary-link:hover { background: #085a94; }
/* Light theme: accent and success text dark enough for chips and pale fills; header deep enough for its links. */
:root[data-theme="light"] { --accent: #085a94; --ok: #176b32; --top-bg: linear-gradient(90deg, #0b1a2e 0%, #0d3f8a 70%, #0b4f86 100%); --field-line: #8a826f; }
:root { --field-line: #6f87a6; }
.brand b { color: #8ad9f3; }
:root[data-theme="light"] .nav-count.mine-count, :root[data-theme="light"] .badge, :root[data-theme="light"] .home-yours h2 .badge { background: var(--accent); color: #fff; }
:root[data-theme="light"] .me-btn { color: #fff; background: rgba(255, 255, 255, .12); border-color: #8ad9f3; }
/* Dark theme: cyan status text on coloured cards uses a lighter cyan. */
.status.scheduled, .status.draft { color: #7fd3f2; }
:root[data-theme="light"] .status.scheduled, :root[data-theme="light"] .status.draft { color: var(--accent); }
/* Fields and checkboxes: boundaries at 3:1 against the surface; the active state of segmented and quick buttons is a
   solid accent edge, not only a tint. */
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { border-color: var(--field-line); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
.seg button.active, .quick button.active { box-shadow: inset 0 -3px 0 var(--accent); }
.quick button.active { border-color: var(--accent); }
/* Faded content keeps readable text: dim with colour, not opacity. */
.day.other, .agenda-day.past, .inb.done, .inb.ignored, .approve-row.blocked, .metric.na, .team-row.disabled { opacity: 1; }
.day.other { background: transparent; } .day.other > .n { color: var(--muted); font-weight: 400; }
.agenda-day.past, .inb.done, .inb.ignored, .approve-row.blocked, .metric.na, .team-row.disabled { color: var(--muted); }

h2.h3 { font-size: 15px; margin: 10px 0 6px; }
/* Keyboard walk (package 28 follow-up): focused table rows get a real ring, not only a tint; date and time fields keep
   their ring while focus is on one of their parts. */
table.dt tr.dt-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
input:focus-within, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.top .brand .brand-name b, .top .brand b { color: #8ad9f3; }

/* Approve dialog (package 28 addition) */
.approve-dlg fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 10px 0; }
.approve-dlg legend { font-weight: 650; padding: 0 4px; }
.approve-dlg .mini-check { display: flex; gap: 8px; align-items: center; margin: 6px 0; font-size: 14px; color: var(--ink); }
.approve-dlg .ad-sched-off { margin-top: 8px; }

/* ---------- Personal phone bar, Menu and finder (package 28, after Tyson's phone use) ---------- */
.bar-sc { display: contents; }
.bottombar a, .bottombar button { min-width: 0; position: relative; white-space: nowrap; text-align: center; line-height: 1.15; font-size: 12px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; display: block !important; padding-left: 2px; padding-right: 2px; }
.bottombar #moreBtn { flex: 0 0 56px; }
.bottombar .nav-count { position: absolute; top: 2px; right: 2px; margin: 0; font-size: 12px; min-width: 16px; line-height: 16px; padding: 0 4px; }
.find-btn[hidden] { display: none; }
.finder { margin: 4px 0 8px; }
.finder input { width: 100%; font-size: 16px; }
.find-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 50vh; overflow: auto; }
.find-list li { display: grid; grid-template-columns: 6.5em 1fr; gap: 2px 8px; padding: 9px 10px; border-radius: 8px; cursor: pointer; min-height: 44px; align-items: center; }
.find-list li.sel, .find-list li:hover { background: var(--accent-soft); outline: 1px solid var(--accent); }
.find-list .fi-type { font-size: 12px; color: var(--muted); }
.find-list .fi-label { overflow-wrap: anywhere; }
.find-list .fi-sub { grid-column: 2; font-size: 12px; }
.find-list .fi-empty { display: block; cursor: default; }
.find-dlg .finder { margin-top: 0; }
.drawer .finder input { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .35); }
.drawer .find-list li { color: #e9f0fa; } .drawer .find-list .fi-type, .drawer .find-list .fi-sub { color: #b9c9dc; }
.drawer .menu-sc, .drawer .menu-area, .drawer .menu-foot { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.drawer .menu-sc h2 { font-size: 12px; color: #b9c9dc; margin: 4px 4px; display: flex; justify-content: space-between; align-items: center; }
.drawer .menu-sc h2 .link-btn { color: #8ad9f3; background: none; border: 0; min-height: 32px; }
.drawer .menu-area { display: grid; grid-template-columns: 7.5em 1fr; align-items: center; gap: 2px 6px; }
.drawer .ma-name { font-weight: 650; color: #fff; }
.drawer .ma-tabs { display: flex; flex-wrap: wrap; gap: 2px; }
.drawer .ma-all { grid-column: 2; } .drawer .ma-all summary { color: #b9c9dc; padding: 8px 12px; min-height: 40px; }
.drawer .ma-all a { display: inline-flex; }
.drawer .menu-foot { border-bottom: 0; display: flex; gap: 4px; }
.drawer .menu-sc a, .drawer .ma-tabs a, .drawer .ma-all a, .drawer .menu-foot a { background: rgba(255, 255, 255, .06); margin: 2px; }
/* Tabs: nothing scrolls off-screen unannounced. Narrow screens show four tabs and a visible "⋯ More" menu. */
.subnav .sub-more { display: none; position: relative; flex: none; }
.sub-more > summary { list-style: none; padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; }
.sub-more > summary::-webkit-details-marker { display: none; }
.sub-more.on > summary { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.sub-more .pop-body { position: absolute; right: 0; top: 100%; z-index: 6; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 10px; padding: 4px; min-width: 200px; box-shadow: var(--shadow); }
.sub-more .pop-body a { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; color: var(--ink); text-decoration: none; border-radius: 8px; min-height: 44px; align-items: center; }
.sub-more .pop-body a[aria-current] { background: var(--accent-soft); font-weight: 600; }
@media (max-width: 760px) {
  .subnav a.ovf { display: none; }
  .subnav .sub-more { display: block; margin-left: auto; }
  .subnav .sub-more.only3 { display: none; }
  .sub-more .pop-body a.m3 { display: none; }
  .subnav-in { overflow: visible; }
}
@media (max-width: 480px) {
  .subnav a.ovf3 { display: none; }
  .subnav .sub-more.only3 { display: block; }
  .sub-more .pop-body a.m3 { display: flex; }
  .subnav a, .sub-more > summary { padding: 10px 9px; }
}
.rs-sheet .rs-group { margin: 8px 0; } .rs-sheet .rs-group h3 { font-size: 14px; color: var(--muted); margin: 6px 0 4px; }
.rs-sheet .rs-pick { margin: 3px; } .rs-sheet .rs-here { display: block; margin: 8px 0; font-weight: 600; }
/* Approve and schedule (Tyson, 2026-11-09) */
.ad-when.ad-off .ad-time, .ad-when.ad-off .ad-other { display: none; }
.ad-dests { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; margin: 8px 0; }
button.link { background: none; border: 0; color: var(--accent); text-decoration: underline; padding: 6px 0; min-height: 0; }
.sched-line { margin: 4px 0 0; font-size: 14px; }

.flag.overdue { background: var(--danger-bg); color: var(--danger); }

/* Visible labels on compact forms (2026-11-09 review, S-21 and others) */
.need-form.labelled, .need-form.need-more { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; }
.need-form.labelled > label.fl, .need-form.need-more > label.fl { flex: 1 1 200px; }
.need-form.labelled > label.fl:first-child { flex: 2 1 320px; }

label.fl { display: flex; flex-direction: column; gap: 3px; font-size: 14px; font-weight: 600; color: var(--muted); text-transform: none; margin: 0; min-width: 0; }
label.fl > input, label.fl > select, label.fl > textarea { font-weight: 400; color: var(--ink); }
.team-add { align-items: start; }

/* R6 phone (2026-11-09 review) */
.menu-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; }
.menu-head h2 { margin: 0; flex: 1; font-size: 17px; }
.menu-x { min-width: 44px; min-height: 44px; font-size: 18px; }
.rs-head { position: sticky; top: -14px; z-index: 2; background: var(--panel-solid); display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.rs-head h2 { flex: 1; margin: 0; }
.rs-sheet .rs-pick[disabled]::after { content: ' · on your bar'; font-size: 12px; }
body.menu-open::after { content: ''; position: fixed; inset: 0; z-index: 7; background: rgba(3, 8, 18, .5); }
@media (max-width: 760px) {
  /* S-06/T-61/T-65: the assistant opens from Menu; no floating button over rows, forms or the bar. */
  .as-btn { display: none !important; }
  .as-panel .as-min-btn, .as-panel .as-dock { display: none; }
  .as-panel .as-layout { display: none; }
  /* S-32: the count sits above the label, never on it; labels wrap instead of being cut. */
  .bottombar a, .bottombar button { white-space: normal !important; overflow: visible; text-overflow: clip; padding-top: 18px !important; font-size: 12px; hyphens: auto; overflow-wrap: anywhere; line-height: 1.1; }
  .bottombar .nav-count { top: 2px; right: 50%; transform: translateX(110%); }
}

.ev-move { display: none; font-size: 12px; min-height: 32px; padding: 2px 8px; margin: 2px 0 6px; }
@media (hover: none), (max-width: 760px) { .ev-move { display: inline-block; min-height: 44px; } }
.ev-time { font-weight: 700; }

/* M-28/M-29/M-30: conversations on a phone */
.ib-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ib-bar .ib-next { margin-left: auto; }
.quick .tab-more { display: none; }
@media (min-width: 1024px) { .ib-bar .back-link { display: none; } }
@media (max-width: 1023px) {
  #main:has(.ib-split.has-detail) > .page-head, #main:has(.ib-split.has-detail) > .quick, #main:has(.ib-split.has-detail) > .filter-bar, #main:has(.ib-split.has-detail) > .fbar, #main:has(.ib-split.has-detail) > .syncline, #main:has(.ib-split.has-detail) > .manual-src { display: none; }
}
@media (max-width: 760px) {
  .ib-tabs .tab-extra { display: none; }
  .quick .tab-more { display: inline-block; position: relative; }
  .ib-detail .reply-box textarea { min-height: 6.5em; }
}

.pv-opts > summary { cursor: pointer; padding: 4px 0; min-height: 44px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) {
  /* P-24: while the review bar shows, the phone bar steps aside so the picture and the decision have the room. */
  body.has-bar .bottombar { display: none; }
  body.has-bar .review-bar { bottom: 0 !important; }
  body.has-bar main { padding-bottom: 120px; }
}
/* R6: touch targets of at least 44 px on phones (S-24, P-52, M-31, C-34, C-54) and nothing wider than the screen (R-28). */
@media (max-width: 760px) {
  button.theme, .find-btn, #bellBtn, #meBtn, #alertsBtn { min-width: 44px; min-height: 44px; }
  .chip.as-yes, .chip.as-no, .chip.nr, .chip.rl { min-height: 44px; padding: 8px 14px; font-size: 14px; }
  details > summary { min-height: 44px; display: flex; align-items: center; }
  label.mini-check, .approve-row, .gf-check label { min-height: 44px; display: flex; align-items: center; gap: 8px; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
  .icon, button.icon, .need-del, .as-del, .ast-up, .ast-down { min-width: 44px; min-height: 44px; }
  .cv-applied, .link-btn { min-height: 44px; }
  .gf-entry textarea, .nl-form textarea, #gfCsv, #nlCsv { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
  .gf-table, .nl-table, .table-scroll { max-width: 100%; overflow-x: auto; }
  /* L-29: a fact's badge goes on its own line under the claim. */
  .fact-row .fact-head, .fact .fact-head { flex-wrap: wrap; }
  .fact-row .badge, .fact .fact-badge { flex-basis: 100%; }
}
@media (max-width: 760px) { .item > summary { flex-wrap: wrap; } .item .it-state { flex-basis: 100%; align-items: flex-start; } }

.warn-ink { color: var(--warn); font-weight: 600; }
.ib-decide { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 8px 40px; }
.ib-decide button { font-size: 14px; padding: 6px 10px; min-height: 40px; }
@media (max-width: 760px) { .ib-decide { padding-left: 8px; } .ib-decide button { min-height: 44px; } }
.page-lead { margin: -6px 0 10px; }
.day { position: relative; }
.day-add { position: absolute; top: 2px; right: 2px; min-width: 26px; min-height: 26px; padding: 0; font-size: 16px; line-height: 1; opacity: 0; }
.day:hover .day-add, .day-add:focus { opacity: 1; }
@media (hover: none) { .day-add { opacity: .7; min-width: 32px; min-height: 32px; } }

/* P-41: unsaved edits bar */
.unsaved-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 12; display: flex; gap: 8px; align-items: center; padding: 8px 10px 8px 16px; background: var(--panel-solid); border: 1px solid var(--accent); border-radius: 12px; box-shadow: var(--shadow); }
.unsaved-bar span { font-weight: 600; }
@media (max-width: 760px) { .unsaved-bar { left: 8px; right: 8px; transform: none; bottom: calc(64px + env(safe-area-inset-bottom)); justify-content: flex-end; } .unsaved-bar span { margin-right: auto; } }

.todo-line { margin: 4px 0 8px; }
.post-state .ed-primary { margin-left: auto; }
@media (min-width: 1024px) { .detail > div:last-child { position: sticky; top: calc(var(--top-h, 56px) + 50px); max-height: calc(100vh - 120px); overflow: auto; } }

/* R-03: stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.tile-n { font-size: 22px; font-weight: 700; }
.tile-l { color: var(--muted); font-size: 14px; }
.tile-d { font-size: 12px; color: var(--muted); } .tile-d.up { color: var(--ok); } .tile-d.down { color: var(--warn); }
.res-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.res-sort { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; min-height: 0; }

/* Charts (R-21, R-27, R-29): one series, the accent colour, a recessive baseline; light and dark from the tokens. */
.chart { margin: 8px 0 12px; }
.chart figcaption { font-weight: 600; margin-bottom: 4px; }
.chart-svg { width: 100%; height: 140px; display: block; }
.chart-svg .bar path { fill: var(--accent); }
.chart-svg .bar:hover path, .chart-svg .bar:focus path { fill: var(--cyan-deep, var(--accent)); opacity: .8; }
.chart-svg .bar:focus { outline: none; }
.chart-base { stroke: var(--line); stroke-width: 1; }
.chart-tick { fill: var(--muted); font-size: 12px; }
.chart-one { font-size: 15px; }
.chart-ticks { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }

.fact-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 6px 0 10px; }
.fact-q { flex: 1 1 260px; }

.cap-group { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; margin: 8px 0; }
.cap-key.extra, .mini-check.extra { background: var(--warn-bg); border-radius: 6px; }

.ln-wide { flex-basis: 100%; grid-column: 1 / -1; }
.ln-wide textarea { width: 100%; }

.ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; }

.btn-why { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; }

/* T-64/T-67/T-68: the assistant panel makes room when pinned, has worded controls, and moves by its header. */
@media (min-width: 601px) {
  body.as-pad-right { padding-right: var(--as-w, 400px); }
  body.as-pad-bottom { padding-bottom: var(--as-h, 320px); }
  body.as-pad-bottom .as-btn, body.as-pad-right .as-btn { display: none; }
  .as-float .as-head { cursor: move; touch-action: none; }
  .as-head.as-dragging { cursor: grabbing; }
}
.as-tools { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.as-tools > button, .as-layout > summary { font-size: 14px; padding: 4px 8px; min-height: 32px; }
.as-layout { position: relative; }
.as-layout > summary { list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; display: inline-flex; align-items: center; }
.as-layout > summary::after { content: ' ▾'; white-space: pre; }
.as-layout > summary::-webkit-details-marker { display: none; }
.as-layout-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 4px; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); min-width: 160px; }
.as-layout-menu button { text-align: left; }
.as-layout-menu button[aria-pressed="true"] { font-weight: 600; }
.as-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.as-chip { font-size: 14px; border-radius: 999px; padding: 6px 12px; }
.as-clear-row { text-align: center; margin: 6px 0 2px; }

/* L-07: drop files on the Assets page. */
.drop-zone { margin-top: 8px; border: 2px dashed var(--line); border-radius: 10px; padding: 14px; text-align: center; color: var(--muted); font-size: 14px; }
.upload-card.dragging .drop-zone { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, transparent); }
@media (hover: none) { .drop-zone { display: none; } }

/* C-42: the linked-posts picker. */
.post-picker .pp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.pp-chip { display: inline-flex; align-items: center; gap: 4px; }
.pp-x { border: 0; background: none; padding: 0 4px; min-height: 0; font-size: 12px; cursor: pointer; color: inherit; }
.pp-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; margin-top: 4px; }
.pp-opt { text-align: left; background: none; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; }
.pp-opt:hover, .pp-opt:focus-visible { border-color: var(--line); background: var(--panel); }

.rev details.raw { display: inline-block; margin-left: 6px; }
.rev details.raw[open] { display: block; }
.as-layout > summary::before { content: none !important; }

/* T-75: short forms keep a readable width on wide screens. */
@media (min-width: 900px) {
  #pwForm, .team-add, #uAddForm, .conn-form, #acPassword .need-form, #tfBox .need-form, .post-picker { max-width: 640px; }
}

/* S-43: five type steps (12 labels and pills, 14 meta, 15 body, 17 card titles, 22 page titles); nothing under 12 px. Phone inputs stay 16 px so the browser does not zoom. */
/* S-44/S-45: three kinds of small label. Count badges (.badge, .nav-count): round and filled. State chips (.status,
   .flag, .q-type): one shape, colour by meaning. Type tags (.chip, .dest): outlined unless a game or category colours
   them. Everything in sentence case. */
.status, .flag, .q-type { display: inline-block; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 600; line-height: 1.5; text-transform: none; letter-spacing: 0; }
.chip { background: transparent; border: 1px solid var(--line); padding: 1px 8px; font-size: 12px; line-height: 1.5; }
.dest { border-radius: 999px; padding: 1px 7px; font-weight: 600; }
.nav-label, .wk-head, .cal-head { text-transform: none; letter-spacing: 0; }
/* S-07: on a phone each Needs-you row is one line of pill and title, one meta line, and a chevron that says it opens. */
@media (max-width: 760px) {
  .q-main { grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; min-height: 56px; }
  .q-type { justify-self: start; }
  .q-text .muted { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .q-next { display: block; font-size: 0; }
  .q-next::after { content: '›'; font-size: 22px; color: var(--muted); }
}

/* S-30: the account menu under the initials. */
.me-panel { right: 12px; left: auto; min-width: 220px; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.me-panel[hidden] { display: none; }
.me-who { display: flex; flex-direction: column; padding: 6px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.me-link { display: block; text-align: left; padding: 10px; min-height: 44px; border-radius: 8px; background: none; border: 0; color: var(--ink); text-decoration: none; font: inherit; cursor: pointer; }
.me-link:hover, .me-link:focus-visible { background: var(--chip); }
/* S-39: signed out, only the logo and the theme switch. */
body.signed-out .nav, body.signed-out .bottombar, body.signed-out #subnav, body.signed-out .find-btn, body.signed-out #alertsBtn, body.signed-out #asBtn { display: none !important; }

/* S-16: on a wide screen the queue keeps a readable width and the other cards sit beside it. */
@media (min-width: 1200px) {
  .today-cols { display: grid; grid-template-columns: minmax(0, 760px) minmax(320px, 1fr); gap: 16px; align-items: start; }
  .today-cols .today-grid { grid-template-columns: 1fr; margin-top: 0; }
}
/* S-43 at phone width: 12 px bar labels stay whole words ("Conversations" must not break mid-word). */
@media (max-width: 760px) { .bottombar a, .bottombar button { overflow-wrap: normal; hyphens: manual; word-break: keep-all; letter-spacing: -.03em; padding-left: 0 !important; padding-right: 0 !important; } }

.fact-picks { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; max-height: 220px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.fact-picks legend { font-size: 14px; color: var(--muted); padding: 0 4px; }

/* P-49: full service names where there is room; short ones on a phone. */
.dn-short { display: none; }
@media (max-width: 600px) { .dchip .dn-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .dchip .dn-short { display: inline; } }

/* C-18/C-19: codes and statuses never wrap; table pages may use more of a wide screen; only waiting or blocked lines are coloured. */
table.dt td .code, table.dt td .status, table.out td .code { white-space: nowrap; }
@media (min-width: 1400px) { #main:has(.dtable) { max-width: 1500px; } }
.pub-state.p-planned { color: var(--muted); }

/* C-14: deadline and opening markers may wrap to two lines so the kind is never cut. */
.con-ev.deadline, .con-ev.open { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ag-month { margin: 14px 0 4px; font-size: 15px; }

/* C-43: Save and Cancel stay in reach at the bottom of a long dialog. */
.modal .sticky-actions { position: sticky; bottom: -16px; background: var(--panel-solid); padding: 10px 0; margin-bottom: -6px; border-top: 1px solid var(--line); z-index: 2; }

.gf-prefix { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .gf-prefix input { flex: 1; min-width: 10em; }

/* C-54: Mark applied is a full-size target on phones. */
@media (max-width: 760px) { .cv-applied { min-height: 44px; } }

.btn-sub { display: block; font-size: 12px; font-weight: 400; }

/* L-09: the asset page in two columns on a wide screen; a vertical video no wider than 420 px. */
@media (min-width: 1100px) {
  .asset-cols { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
  .asset-cols.tall { grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); }
  .asset-left { position: sticky; top: 110px; }
  .asset-cols .asset-media .preview.big { max-height: 70vh; width: 100%; object-fit: contain; }
}
.asset-cols.tall .asset-media .preview.big { max-width: 420px; margin: 0 auto; display: block; }

/* L-06: cards with no thumbnail yet. */
.preview.none.no-prev { background: var(--chip); color: var(--muted); font-size: 14px; }
/* L-30: a full-width transcript search. */
#trQ { flex: 1; min-width: 0; }

/* The next step under the title; the sticky bar only when it has scrolled away, one row with a filled primary. */
.next-step { margin: 8px 0 12px; border-color: var(--accent); }
.next-step .ns-state { margin: 0 0 4px; font-weight: 600; }
.next-step .ns-note { margin: 0 0 8px; }
.next-step .ns-actions { margin: 0; }
.review-bar.rb-hidden { display: none !important; }
.review-bar { background: var(--panel-solid); border-top: 1px solid var(--accent); box-shadow: 0 -6px 18px rgba(0, 0, 0, .35); }
.review-bar .bar-note { display: none; }
.pub-box.calm { border-color: var(--line); }
.rd-scheduled > summary { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
/* R11 A: page content never sits on the background photo. The main column is a solid surface (the galaxy shows only
   around it and behind the header); light theme has no photo. */
main { background: var(--bg); min-height: calc(100vh - 120px); box-shadow: 0 0 0 1px var(--line); }
@media (min-width: 1240px) { main { border-radius: 0 0 14px 14px; } }

/* R11 12: values under the bars. */
.chart-vals { display: flex; gap: 2px; margin-top: 2px; } .chart-vals span { flex: 1; text-align: center; font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* R11 B2: the review bar is one row of actions; previous and next live at the top. */
.q-nav { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.post-top .q-nav + .btn, .post-top .q-nav ~ .btn { margin-left: 8px; }
.review-bar #rvPrev, .review-bar #rvNext, .review-bar > span.muted:not(.ar-keys) { display: none; }
.review-bar { flex-wrap: nowrap; overflow-x: auto; }
@media (max-width: 760px) { .review-bar { flex-wrap: wrap; } .review-bar button { flex: 1 1 auto; } }
/* R11 C4: "When it publishes" is plain text for ordinary states; colour only for a problem (blocked, missed). */
.pub-state.p-auto, .pub-state.p-manual, .pub-state.p-approved, .pub-state.p-planned, .pub-state.p-review { color: var(--ink); }
table.dt .pub-state { font-weight: 400; } table.dt .pub-state.p-blocked { font-weight: 600; }
/* R11 D6: codes and destination chips never wrap in the posts table. */
table.dt td .code { display: inline-block; max-width: 10em; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
table.dt td:has(> .dchip-s) { white-space: nowrap; }
/* R11 D9: the assistant button never sits on a control: room under the page and beside bottom bars. */
@media (min-width: 761px) { main { padding-bottom: 96px; } .review-bar, .sticky-save, .bulk-bar, .unsaved-bar { padding-right: 84px !important; } }

/* R11 D10: an area with few tabs shows More only when the row cannot fit them (set by the fitting script). */
.subnav .sub-more.fit-only { display: none; }
/* R11 B2 on a phone: at most two rows. The main button has the first row; the rest share the second and may wrap
   their own text instead of taking a row each. */
@media (max-width: 760px) {
  .review-bar { flex-wrap: wrap; row-gap: 6px; }
  .review-bar button { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.2; }
  .review-bar button.primary { flex-basis: 100%; order: -1; }
}

/* Discoveries list: the three decisions on one row. */
.ib-decide { flex-wrap: nowrap; } .ib-decide button { white-space: nowrap; padding: 6px 9px; }
/* Post page top row on a phone: one tidy line. */
.post-top .back, .q-pos { white-space: nowrap; }
@media (max-width: 480px) { .q-pos .q-tail { display: none; } .post-top { gap: 6px; } }
/* Galaxy through the page (Tyson, 2026-11-09). Dark theme only (light has no photo). The main column is a see-through
   tint with a blur, on a layer behind it (a backdrop filter on main itself would trap its fixed bars). The tint is set
   by readability: muted text (#9db0c8) on this surface must reach 4.5:1 at the brightest point of the photo, which is
   near white even after a 12 px blur. 0.80 gives 4.6:1 there; without blur, 0.84. Cards keep their own surfaces. */
:root:not([data-theme="light"]) main { background: transparent; position: relative; }
:root:not([data-theme="light"]) main::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: rgba(7, 16, 32, .84); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:not([data-theme="light"]) main::before { background: rgba(7, 16, 32, .80); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
@media (prefers-reduced-transparency: reduce) { :root:not([data-theme="light"]) main::before { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* The calendar grids keep a solid backing, so no bright streaks show between day cells. */
:root:not([data-theme="light"]) .cal, :root:not([data-theme="light"]) .week { background: var(--bg); }
/* html and body both set a background, so the body's galaxy painted over any layer at z-index -1 (which is why the
   old body::before darkening never showed). body as its own stacking context paints its background first. The old
   overlay stays off: the gutters show the photo as they always have; the main column's tint does the readability. */
body { isolation: isolate; }
:root:not([data-theme="light"]) body::before { display: none; }