/* 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 { 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; }
.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 .sent { display: inline-flex; align-items: center; gap: 4px; color: var(--hue); }

/* ── 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 .title { margin-top: 7px; background: transparent; border-color: transparent; padding: 2px 0; font-family: var(--font-heading); font-weight: 800; font-size: 21px; line-height: 1.24; letter-spacing: -0.015em; min-height: 54px; resize: none; overflow: hidden; }
.drawer-hd .title:hover, .drawer-hd .title:focus-visible { border-color: var(--color-divider); }
.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 { min-height: 110px; }
.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; 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; }
.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; }
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)); }
  .hdr { gap: 10px; padding: 0 12px; }
  .hdr .who, .hdr .wordmark, .hdr .vdiv { display: none; }
  .hdr .btn span { display: none; }
  .hdr .btn { padding-inline: 10px; }
}