/* Task Board — the design's dark palette over the Modernist tokens (ds.css), plus the layout
   classes that replace the mockup's inline styles. Zero radius, strong rules, flush-left. */

:root {
  color-scheme: dark;
  --color-bg: #131416;
  --color-surface: #1d1f23;
  --color-text: #eceef1;
  --color-divider: color-mix(in srgb, #eceef1 15%, transparent);
  --well: #17191c;
  --band: #23262b;
  --muted: #949aa4;
  --danger: #ef6f6c;
  --color-accent: #e8eaee;
  --color-accent-100: #2a2d33;
  --color-accent-200: #33373e;
  --color-accent-300: #cfd3d9;
  --color-accent-400: #cfd3d9;
  --color-accent-500: #b9c0c9;
  --color-accent-600: #cfd3d9;
  --color-accent-700: #b6bcc5;
  --color-accent-800: #dfe3e8;
  --color-accent-900: #f4f5f7;
  --shadow-sm: 0 0 0 1px color-mix(in srgb, #f8f4f4 9%, transparent), 0 1px 3px color-mix(in srgb, #0d0c0c 55%, transparent);
  --shadow-md: 0 0 0 1px color-mix(in srgb, #f8f4f4 13%, transparent), 0 6px 18px color-mix(in srgb, #0d0c0c 60%, transparent);
  --shadow-lg: 0 0 0 1px color-mix(in srgb, #f8f4f4 14%, transparent), 0 18px 46px color-mix(in srgb, #0d0c0c 70%, transparent);
  --hue: #949aa4;
}
[data-brand="vegas"] { --hue: #ffc531; }
[data-brand="prime"] { --hue: #3da5ff; }
[data-brand="hera"] { --hue: #ff4d9d; }
[data-brand="betbooker"] { --hue: #35d07f; }

html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
a { color: var(--color-accent-400); text-decoration: none; }
a:hover { color: var(--color-accent-300); text-decoration: underline; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-neutral-400); }
::-webkit-scrollbar-track { background: transparent; }
.btn-primary { color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-300); }
.btn-primary:active { background: var(--color-accent-500); }
.btn-primary:disabled { background: var(--color-accent); }
button { font-family: inherit; }
.hidden { display: none !important; }

/* ── type helpers ─────────────────────────────────────────────────────── */
.kicker { font-size: 10px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); }
.mono-idx { font-family: var(--font-heading); font-weight: 800; font-size: 10px; letter-spacing: 0.16em; color: var(--muted); }
.wordmark { font-family: var(--font-heading); font-weight: 800; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; }
.sq { display: block; flex: none; background: var(--hue); }
.sq-12 { width: 12px; height: 12px; }
.sq-9 { width: 9px; height: 9px; }
.sq-8 { width: 8px; height: 8px; }
.sq-7 { width: 7px; height: 7px; }
.sq-6 { width: 6px; height: 6px; }
.muted { color: var(--muted); }
.dim { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── app frame ────────────────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100vh; }

/* ── login ────────────────────────────────────────────────────────────── */
.login { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); flex: 1; min-height: 0; }
.login-left { display: flex; flex-direction: column; padding: 40px 40px 34px; border-right: 1px solid var(--color-divider); background: var(--well); min-width: 0; }
.login-left .logo { display: flex; align-items: center; gap: 11px; }
.login-left .logo .sq { background: var(--muted); }
.login-left h2 { margin: auto 0 12px; max-width: 15ch; font-size: 34px; line-height: 1.08; letter-spacing: -0.025em; }
.login-left p { margin: 0 0 26px; max-width: 38ch; font-size: 13px; line-height: 1.6; color: var(--muted); }
.login-brands { display: flex; flex-direction: column; border-top: 1px solid var(--color-divider); }
.login-brand { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--color-divider); }
.login-brand .name { font-family: var(--font-heading); font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.login-brand .mono-idx { margin-left: auto; }
.login-right { display: flex; flex-direction: column; justify-content: center; padding: 40px; min-width: 0; }
.login-right form { width: 100%; max-width: 370px; }
.login-right h3 { margin: 0 0 4px; }
.login-right .lede { margin: 0 0 24px; font-size: 12px; color: var(--muted); }
.login-right .field { margin-bottom: 14px; }
.login-right .err { margin: 0 0 14px; padding: 9px 11px; border: 1px solid var(--danger); font-size: 12px; color: var(--danger); }
.login-right .btn-primary { width: 100%; justify-content: flex-start; gap: 9px; height: 40px; }
.login-right .note { margin: 12px 0 0; font-size: 11px; color: var(--muted); }

/* ── header ───────────────────────────────────────────────────────────── */
.hdr { position: relative; display: flex; align-items: center; gap: 18px; height: 54px; padding: 0 18px; border-bottom: 1px solid var(--color-divider); flex: none; }
.hdr .logo { display: flex; align-items: center; gap: 11px; margin-right: auto; min-width: 0; }
.hdr .search { position: relative; flex: 0 1 260px; min-width: 90px; }
.hdr .btn, .hdr .wordmark { white-space: nowrap; }
.hdr .search .ico { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); display: flex; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.hdr .search .input { padding-left: 28px; }
.hdr .btn { justify-content: flex-start; gap: 8px; }
.hdr .vdiv { width: 1px; height: 22px; background: var(--color-divider); flex: none; }
.hdr .who { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hdr .btn-icon { flex: none; justify-content: center; padding: 0; gap: 0; }
.btn-icon { justify-content: center; }

/* ── board ────────────────────────────────────────────────────────────── */
.board { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.brand-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: none; }
.brand-tab { position: relative; display: block; width: 100%; text-align: left; padding: 0; background: transparent; border: 0; border-right: 1px solid var(--color-divider); cursor: pointer; color: inherit; }
.brand-tab:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.brand-tab .band { position: absolute; inset: 0; background: var(--band); pointer-events: none; }
.brand-tab .inner { position: relative; display: block; padding: 13px 18px 14px; }
.brand-tab .row { display: flex; align-items: center; gap: 9px; }
.brand-tab .name { font-family: var(--font-heading); font-weight: 800; font-size: 19px; letter-spacing: -0.015em; line-height: 1; color: var(--muted); }
.brand-tab.active .name { color: var(--color-text); }
.brand-tab .mono-idx { margin-left: auto; }
.brand-tab .counts { display: flex; gap: 12px; margin-top: 8px; padding-left: 18px; font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.brand-tab .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--hue); }

.strip { display: flex; align-items: center; gap: 11px; height: 32px; padding: 0 18px; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); background: var(--well); flex: none; }
.strip .label { font-family: var(--font-heading); font-weight: 800; font-size: 10px; letter-spacing: 0.19em; text-transform: uppercase; }
.strip .meta { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-neutral-400); }

.cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 14px; flex: 1; min-height: 0; }
.col { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--color-divider); }
.col .share { display: block; height: 2px; background: color-mix(in srgb, var(--color-text) 9%, transparent); flex: none; }
.col .share > span { display: block; height: 2px; background: var(--hue); }
.col-hd { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--color-divider); background: var(--band); flex: none; }
.col-hd .idx { font-family: var(--font-heading); font-weight: 800; font-size: 16px; letter-spacing: 0.01em; line-height: 1; color: color-mix(in srgb, var(--color-text) 52%, transparent); }
.col-hd .lbl { font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.col-hd .cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 19px; padding: 0 5px; border: 1px solid var(--color-divider); font-size: 11px; font-weight: 600; }
.col-hd .archive-all { margin-left: auto; width: 26px; height: 26px; padding: 0; justify-content: center; flex: none; color: var(--color-neutral-400); }
.col-hd .archive-all:hover { color: var(--color-accent-400); background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.col-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--well); }
.col-body.is-over::after { content: ''; position: absolute; inset: 6px; outline: 2px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 7%, transparent); pointer-events: none; }
.col-body .empty { margin: 0; padding: 16px 14px; border: 1px dashed color-mix(in srgb, var(--color-text) 18%, transparent); font-size: 12px; line-height: 1.5; color: var(--muted); }
.col-body .register { margin-top: 2px; gap: 8px; background: var(--color-surface); }

.card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--color-surface); border: 1px solid var(--color-divider); cursor: grab; }
.card:hover { background: var(--band); border-color: color-mix(in srgb, var(--color-text) 30%, transparent); }
.card.selected::before { content: ''; position: absolute; inset: -1px; outline: 2px solid var(--hue); pointer-events: none; }
/* jumpTo (a notification, a linked chip): pulse the card / archive row it landed on. */
.spotlight { animation: spotlight 1.6s ease-out; }
@keyframes spotlight { 0%, 35% { box-shadow: 0 0 0 3px var(--hue); background: color-mix(in srgb, var(--hue) 16%, var(--color-surface)); } 100% { box-shadow: 0 0 0 0 transparent; } }
.card.dragging { opacity: 0.4; }
.card.drop-before { box-shadow: 0 -3px 0 0 var(--color-accent); }
.card .top { display: flex; align-items: center; gap: 7px; }
.card .app { flex: 1; min-width: 0; }
.card .ref { flex: none; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; color: var(--muted); }
.card h4 { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 15px; line-height: 1.38; letter-spacing: -0.005em; text-wrap: pretty; }
.card .meta { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--color-neutral-400); }
.card .meta .n { display: inline-flex; align-items: center; gap: 4px; }
.card .meta .age { margin-left: auto; }
.card .meta .by { min-width: 0; max-width: 40%; color: var(--color-text); font-weight: 600; }
.card .meta .by svg { flex: none; color: var(--color-neutral-400); }
.card .sent { display: inline-flex; align-items: center; gap: 4px; color: var(--hue); }
/* Linked cards (the same task registered on several boards): the sibling brands' squares. */
.card .meta .linked { gap: 3px; }
.card .meta .linked svg { margin-right: 2px; }
/* Multi-select (owner): a square tick box on each card and column header; ticked cards get a hue bar down the left
   edge and go to ONE Claude Code session from the bar under the strip. */
.pick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; padding: 0; border: 1.5px solid color-mix(in srgb, var(--color-text) 38%, transparent); background: transparent; color: var(--color-bg); cursor: pointer; }
.pick:hover { border-color: var(--hue); background: color-mix(in srgb, var(--hue) 14%, transparent); }
.pick.on { border-color: var(--hue); background: var(--hue); }
.pick.part { border-color: var(--hue); }
.pick .dash { width: 7px; height: 2px; background: var(--hue); }
.pick:focus-visible { outline: 2px solid var(--hue); outline-offset: 1px; }
.card .top .pick { margin: -2px 0; }
.col-hd .pick { margin-left: 2px; }
.card.picked { box-shadow: inset 3px 0 0 var(--hue); background: color-mix(in srgb, var(--hue) 6%, var(--color-surface)); }
.card.picked.drop-before { box-shadow: inset 3px 0 0 var(--hue), 0 -3px 0 0 var(--color-accent); }

/* The row under the strip: app filter chips (left), the selection bar (right). */
.tools { display: flex; align-items: center; gap: 14px; min-height: 40px; padding: 0 18px; border-bottom: 1px solid var(--color-divider); flex: none; }
.app-chips { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; padding: 6px 0; scrollbar-width: thin; }
.app-chips .lbl { flex: none; margin-right: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.app-chips .chip { flex: none; display: inline-flex; align-items: center; gap: 7px; max-width: 220px; height: 26px; padding: 0 9px; border: 1px solid var(--color-divider); background: transparent; color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.app-chips .chip:hover { color: var(--color-text); border-color: color-mix(in srgb, var(--color-text) 35%, transparent); }
.app-chips .chip.on { color: var(--color-text); border-color: var(--hue); background: color-mix(in srgb, var(--hue) 14%, transparent); }
.app-chips .chip .n { flex: none; font-size: 10px; color: var(--color-neutral-400); }
.app-chips .chip.on .n { color: var(--color-text); }
.selhint { flex: none; font-size: 11px; color: var(--color-neutral-400); }
.selbar { flex: none; display: flex; align-items: center; gap: 8px; max-width: 55%; }
.selbar .cnt { flex: none; font-family: var(--font-heading); font-weight: 800; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; }
.selbar .refs { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.selbar .mate { flex: none; padding: 1px 6px; border: 1px solid color-mix(in srgb, var(--hue) 55%, transparent); background: color-mix(in srgb, var(--hue) 9%, transparent); color: var(--color-text); font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; }
.selbar .mate:hover { background: color-mix(in srgb, var(--hue) 18%, transparent); }
.selbar .btn { flex: none; height: 28px; padding: 0 11px; gap: 7px; font-size: 12px; }

/* Adjustments: a NEW card linked to a finished one (tasks.parent_id) — "Adjusts #n" above the title, and on a
   Done card a footer strip with its adjustments + the Adjust button. */
.card .adj-of { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin: -1px 0; padding: 2px 7px 2px 6px; border: 1px solid color-mix(in srgb, var(--hue) 55%, transparent); background: color-mix(in srgb, var(--hue) 9%, transparent); color: var(--color-text); font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.card .adj-of svg { color: var(--hue); }
.card .adj-of:hover { background: color-mix(in srgb, var(--hue) 18%, transparent); }
.card .adj-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px -14px -12px; padding: 5px 6px 5px 14px; border-top: 1px solid var(--color-divider); }
.card .adj-kid { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.card .adj-kid svg { color: var(--hue); }
.card .adj-kid .st { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.card .adj-kid:hover { border-color: var(--hue); }
.card .adj-btn { margin-left: auto; height: 26px; padding: 0 8px; gap: 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.card .adj-btn:hover { color: var(--color-text); background: color-mix(in srgb, var(--hue) 14%, transparent); }
.card .adj-btn svg { color: var(--hue); }
.linked-chip.adj { max-width: 100%; min-width: 0; }
.linked-chip.adj .t { max-width: 300px; font-weight: 400; }
.linked-chip .st { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* ── archive ──────────────────────────────────────────────────────────── */
.archive { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 20px; }
.archive .head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; }
.archive .head h3 { margin: 0; }
.archive .head span { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.archive td.ref { font-weight: 600; }
.archive td.app { font-size: 12px; color: var(--color-accent-500); }
.archive td.when { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.archive .restore { font-size: 12px; color: var(--color-accent-400); }
.archive .nothing { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* ── drawer ───────────────────────────────────────────────────────────── */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(580px, 46vw); display: flex; flex-direction: column; background: var(--color-bg); border-left: 2px solid var(--color-divider); box-shadow: var(--shadow-lg); z-index: 40; }
.drawer-hd { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 2px solid var(--color-divider); flex: none; }
.drawer-hd .crumbs { display: flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.drawer-hd .crumbs .ref { margin-left: auto; color: var(--muted); }
.drawer-hd .linked-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.drawer-hd .linked-row .lbl { display: inline-flex; align-items: center; gap: 4px; margin-right: 2px; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.linked-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); font-size: 11px; font-weight: 600; cursor: pointer; }
.linked-chip:hover { border-color: var(--hue); background: color-mix(in srgb, var(--hue) 12%, transparent); }
.linked-chip .ref { font-size: 10px; letter-spacing: 0.05em; color: var(--muted); }
.linked-chip.archived { opacity: 0.55; }
.drawer-hd .title { margin: 7px 0 0; padding: 2px 0; font-family: var(--font-heading); font-weight: 800; font-size: 21px; line-height: 1.24; letter-spacing: -0.015em; white-space: pre-wrap; overflow-wrap: anywhere; }
.drawer-hd .grow { min-width: 0; flex: 1; }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 24px; }
.drawer-body h6 { margin: 22px 0 6px; }
.drawer-body .seg { display: flex; }
.drawer-body .seg-opt { flex: 1; justify-content: flex-start; padding: 8px 9px; font-family: var(--font-heading); font-weight: 800; font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
.drawer-body .desc { padding: 8px 10px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.drawer-body .desc.empty { color: var(--muted); font-style: italic; }
.dropzone { padding: 12px; border: 1px solid var(--color-divider); background: var(--color-surface); }
.dropzone.is-over { border-color: var(--color-accent); }
.file-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--color-divider); font-size: 13px; }
.file-row .ico { flex: none; color: var(--color-neutral-400); }
.file-row a, .file-row .nm { flex: 1; min-width: 0; color: var(--color-text); }
.file-row .sz { flex: none; font-size: 11px; color: var(--muted); }
.file-row .rm { flex: none; width: 24px; height: 24px; color: var(--color-neutral-400); }
.dropzone .actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.dropzone .actions .btn { justify-content: flex-start; gap: 8px; }
.dropzone .actions span { font-size: 11px; color: var(--muted); }
.comments { display: flex; flex-direction: column; gap: 14px; }
.comment { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--color-divider); }
.comment .by { display: flex; align-items: center; gap: 8px; }
.comment .by .tag { font-weight: 600; }
.comment .by .when { font-size: 11px; color: var(--muted); }
.comment p { margin: 0; font-size: 13px; line-height: 1.55; white-space: pre-wrap; text-wrap: pretty; }
.comment.system .tag { background: transparent; border: 1px solid var(--hue); color: var(--hue); }
.comment-box { margin-top: 14px; }
.comment-box textarea { min-height: 72px; }
.comment-box .row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.comment-box .row span { font-size: 11px; color: var(--muted); }
.drawer-ft { display: flex; flex-direction: column; gap: 9px; padding: 11px 20px 13px; border-top: 2px solid var(--color-divider); flex: none; }
.drawer-ft .info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; font-size: 11px; white-space: nowrap; color: var(--muted); }
.drawer-ft .info > span:first-child { flex: none; }
.drawer-ft .info .flash { margin-left: auto; font-weight: 600; color: var(--hue); }
.drawer-ft .info .flash.err { color: var(--danger); }
.drawer-ft .btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.drawer-ft .btns .btn { justify-content: flex-start; gap: 8px; flex: none; }
.drawer-ft .btns .del { margin-left: auto; gap: 6px; padding-inline: 8px; color: var(--danger); }
.drawer-ft .btns .del:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.target-box { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--color-divider); background: var(--well); font-size: 12px; line-height: 1.55; }
.target-box .kicker { display: block; margin-bottom: 4px; }
.target-box code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--color-accent-300); }
.target-box .line { display: block; }

/* ── new-task dialog ──────────────────────────────────────────────────── */
.dialog-backdrop { z-index: 60; background: color-mix(in srgb, #0d0c0c 72%, transparent); }
.dialog.new { width: min(620px, 100%); gap: 0; padding: 0; }
.dialog.new .dhd { padding: 18px 20px 14px; border-bottom: 2px solid var(--color-divider); }
.dialog.new .dhd h4 { margin: 0; }
.dialog.new .dhd p { margin: 4px 0 0; font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.dialog.new .dbd { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 16px; max-height: 70vh; overflow-y: auto; }
.dialog.new h6 { margin: 0 0 7px; }
.dialog.new h6 .opt { font-weight: 400; letter-spacing: 0; text-transform: none; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.pick-brands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--color-divider); }
.pick-brand { position: relative; padding: 12px 10px; text-align: left; background: transparent; border: 0; border-right: 1px solid var(--color-divider); cursor: pointer; font-family: var(--font-heading); font-weight: 800; font-size: 14px; color: var(--muted); }
.pick-brand:last-child { border-right: 0; }
.pick-brand:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.pick-brand.active { color: var(--color-text); }
.pick-brand.active::before { content: ''; position: absolute; inset: 0; background: var(--hue); opacity: 0.16; pointer-events: none; }
.pick-brand.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--hue); pointer-events: none; }
.pick-brand .in { position: relative; display: flex; align-items: center; gap: 8px; }
.pick-brand .tick { margin-left: auto; font-size: 11px; color: var(--hue); }
/* Priority picker (Jira's five, with Jira's icons). --pc is the priority colour; the active cell tints with it. */
.pick-prio { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--color-divider); }
.pick-p { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 8px; background: transparent; border: 0; border-right: 1px solid var(--color-divider); cursor: pointer; font-family: var(--font-heading); font-weight: 800; font-size: 12px; color: var(--muted); }
.pick-p:last-child { border-right: 0; }
.pick-p:hover:not(:disabled) { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.pick-p:disabled { cursor: default; }
.pick-p svg { flex: none; }
.pick-p.active { color: var(--color-text); }
.pick-p.active::before { content: ''; position: absolute; inset: 0; background: var(--pc); opacity: 0.14; pointer-events: none; }
.pick-p.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pc); pointer-events: none; }
.pick-p:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.pick-prio.compact .pick-p { padding: 7px 6px; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.card .prio { display: inline-flex; flex: none; align-items: center; }
.dialog.new .app-status { display: flex; flex-wrap: wrap; gap: 6px; }
.dialog.new .new-app { margin-top: 8px; border-color: var(--color-accent); }
.dialog.new .hint { margin: 6px 0 0; font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.dialog.new .app-desc { margin: 6px 0 0; font-size: 11px; color: var(--muted); }
.dialog.new .app-status { margin: 6px 0 0; }
.dialog.new .app-status .tag { border-color: var(--hue); color: var(--hue); font-size: 10px; letter-spacing: 0.04em; }
.dialog.new .details { min-height: 96px; }
.dialog.new .dft { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 2px solid var(--color-divider); }
.dialog.new .dft .sum { margin-right: auto; font-size: 11px; color: var(--muted); }
.dialog.new .dft .btn { justify-content: flex-start; }
.pick-brand:disabled { cursor: default; }
.pick-brand.not-ready { opacity: 0.45; }
/* Adjust dialog: the original, quoted up top; the "move it back out of Done?" question. */
.dialog.adjust .orig { padding: 10px 12px; border: 1px solid var(--color-divider); border-left: 3px solid var(--hue); background: var(--well); }
.dialog.adjust .orig .kicker { display: block; margin-bottom: 4px; }
.dialog.adjust .orig p { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: 1.4; }
.dialog.new.reopen { width: min(540px, 100%); }
.dialog.reopen .why { margin: 0; font-size: 13px; line-height: 1.55; }
.dialog.reopen .hint { margin: 0; }
.dialog.new .dft .btn svg { flex: none; }
.archive td.acts { white-space: nowrap; }
select.input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 15px, calc(100% - 11px) 15px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
select.input option { background: var(--color-surface); color: var(--color-text); }

/* ── toast ────────────────────────────────────────────────────────────── */
.toast { position: fixed; left: 18px; bottom: 18px; z-index: 80; padding: 10px 14px; background: var(--band); border: 1px solid var(--color-divider); box-shadow: var(--shadow-md); font-size: 12px; max-width: 46ch; }
.toast.err { border-color: var(--danger); color: var(--danger); }

@media (max-width: 1100px) {
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-y: auto; }
  .col { min-height: 320px; }
  .drawer { width: min(580px, 92vw); }
  .hdr .search { width: 180px; }
}
@media (max-width: 720px) {
  .login { grid-template-columns: 1fr; }
  .login-left { display: none; }
  .brand-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols { grid-template-columns: 1fr; }
  .pick-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pick-p span { display: none; }
  .hdr { gap: 10px; padding: 0 12px; }
  .hdr .who, .hdr .wordmark, .hdr .vdiv { display: none; }
  .hdr .btn span { display: none; }
  .hdr .btn { padding-inline: 10px; }
}

/* ── notifications (reporter accounts) ─────────────────────────────────── */
.hdr .bell { position: relative; }
.hdr .bell.has-unread { color: var(--hue); border-color: var(--hue); }
.hdr .bell .badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--hue); color: var(--color-bg); font-family: var(--font-heading); font-weight: 800; font-size: 10px; letter-spacing: 0.02em; line-height: 1; }
.notif-pop { position: absolute; top: calc(100% + 6px); right: 18px; width: min(420px, calc(100vw - 36px)); max-height: min(70vh, 560px); display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-divider); box-shadow: var(--shadow-lg); z-index: 50; }
.notif-pop .nhd { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 10px; border-bottom: 2px solid var(--color-divider); }
.notif-pop .nhd h6 { margin: 0; }
.notif-pop .nhd .btn { padding-inline: 8px; font-size: 11px; }
.notif-pop .nlist { overflow: auto; display: flex; flex-direction: column; }
.notif-pop .nitem { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--color-divider); background: transparent; color: var(--color-text); text-align: left; font: inherit; cursor: pointer; --hue: #949aa4; }
.notif-pop .nitem[data-brand="vegas"] { --hue: #ffc531; } .notif-pop .nitem[data-brand="prime"] { --hue: #3da5ff; } .notif-pop .nitem[data-brand="hera"] { --hue: #ff4d9d; } .notif-pop .nitem[data-brand="betbooker"] { --hue: #35d07f; }
.notif-pop .nitem:hover { background: var(--band); }
.notif-pop .nitem.unread { background: color-mix(in srgb, var(--hue) 7%, transparent); }
.notif-pop .nitem .nico { flex: none; display: flex; margin-top: 2px; color: var(--hue); }
.notif-pop .nitem .nbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; line-height: 1.4; }
.notif-pop .nitem .nline { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.notif-pop .nitem .nline .tt { font-family: var(--font-heading); font-weight: 800; letter-spacing: 0.02em; color: var(--hue); text-decoration: underline; text-underline-offset: 2px; }
.notif-pop .nitem .nstat { color: var(--hue); font-weight: 600; }
.notif-pop .nitem .nwhen { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.notif-pop .nitem .unread-dot { margin-top: 5px; }
.notif-pop .nothing { margin: 0; padding: 22px 14px; font-size: 12px; color: var(--muted); }
.unread-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.card .unread-dot { margin-right: 2px; }

/* ── @mentions ──────────────────────────────────────────────────────────── */
.mention { padding: 0 3px; background: color-mix(in srgb, var(--hue) 18%, transparent); color: var(--color-text); font-weight: 600; }
.mention-wrap { position: relative; }
.mention-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; max-height: 220px; overflow: auto; background: var(--color-bg); border: 1px solid var(--color-divider); box-shadow: var(--shadow-md); }
.mention-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; background: transparent; color: var(--color-text); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.mention-opt svg { color: var(--muted); }
.mention-opt.active { background: color-mix(in srgb, var(--hue) 14%, transparent); }
.mention-opt .role { margin-left: auto; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }