/* =====================================================================
   STF Taskboard — POLISH LAYER (loaded last)
   Global, low-risk visual refinements. Calm · Apple-like · premium.
   Only touches colour, shadow, radius, motion, micro-spacing — no layout.
   ===================================================================== */

/* --- refined elevation: softer, more diffuse, less "card-y" --------- */
:root {
  --shadow-xs: 0 1px 2px rgba(17,17,16,0.04);
  --shadow-sm: 0 1px 2px rgba(17,17,16,0.04), 0 4px 10px rgba(17,17,16,0.04);
  --shadow-md: 0 2px 4px rgba(17,17,16,0.03), 0 12px 30px rgba(17,17,16,0.07);
  --shadow-lg: 0 4px 10px rgba(17,17,16,0.05), 0 30px 70px rgba(17,17,16,0.10);
  --shadow-overlay: 0 40px 120px rgba(17,17,16,0.22);
}
[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.34);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.44), 0 14px 36px rgba(0,0,0,0.50);
  --shadow-lg: 0 6px 16px rgba(0,0,0,0.50), 0 34px 80px rgba(0,0,0,0.62);
  --shadow-overlay: 0 50px 130px rgba(0,0,0,0.72);
}

/* --- branded selection + smooth scroll ------------------------------ */
::selection { background: color-mix(in srgb, var(--stf-blueprint) 24%, transparent); color: var(--fg-1); }
html { scroll-behavior: smooth; }

/* --- whisper-thin, self-hiding scrollbars (premium calm) ------------ */
.tb-content, .tb-tp-main, .tb-brief-body, .tb-lw-body, .tb-sheet, .tb-menu, .tb-pop, .tb-credit {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fg-4) 40%, transparent) transparent;
}
.tb-content::-webkit-scrollbar, .tb-tp-main::-webkit-scrollbar, .tb-brief-body::-webkit-scrollbar,
.tb-lw-body::-webkit-scrollbar, .tb-sheet::-webkit-scrollbar, .tb-hscroll::-webkit-scrollbar { width: 9px; height: 9px; }
.tb-content::-webkit-scrollbar-thumb, .tb-tp-main::-webkit-scrollbar-thumb, .tb-brief-body::-webkit-scrollbar-thumb,
.tb-lw-body::-webkit-scrollbar-thumb, .tb-sheet::-webkit-scrollbar-thumb, .tb-hscroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--fg-4) 30%, transparent);
  border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
.tb-content:hover::-webkit-scrollbar-thumb, .tb-tp-main:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--fg-4) 50%, transparent); background-clip: padding-box;
}
*::-webkit-scrollbar-track { background: transparent; }

/* --- focus-visible: quiet blueprint ring everywhere ----------------- */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, .tb-nav-item:focus-visible, .tb-chip:focus-visible {
  outline: 2px solid var(--stf-blueprint);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
button:focus:not(:focus-visible) { outline: none; }

/* --- gentler, more consistent card lifts (Apple ease, less travel) --- */
.tb-tcard, .tb-pcard, .tb-res, .tb-slot, .tb-slot2, .tb-pcell, .tb-sub, .tb-metric, .tb-panel {
  transition: transform 360ms var(--ease-arch), box-shadow 360ms var(--ease-stf), border-color 240ms var(--ease-stf);
}
.tb-tcard:hover, .tb-pcard:hover, .tb-res:hover { transform: translateY(-3px); }
.tb-slot:hover, .tb-slot2.filled:hover, .tb-pcell:hover, .tb-sub:hover { transform: translateY(-2px); }
.tb-metric { transition: box-shadow 360ms var(--ease-stf), border-color 240ms var(--ease-stf); }
.tb-metric:hover { box-shadow: var(--shadow-sm); }

/* hairline that warms on hover instead of darkening hard */
.tb-panel:hover { border-color: var(--border-2); }

/* --- buttons: a touch more refined, springless ---------------------- */
.tb-btn { transition: background 200ms var(--ease-stf), color 200ms var(--ease-stf), border-color 200ms var(--ease-stf), box-shadow 200ms var(--ease-stf), transform 120ms var(--ease-precise); }
.tb-btn:active { transform: scale(0.985); }
.tb-btn--primary { box-shadow: var(--shadow-xs); }
.tb-btn--primary:hover { box-shadow: none; }
.tb-icon-btn:active, .tb-cbtn:active, .tb-mini-btn:active, .tb-tool:active { transform: scale(0.94); }
.tb-icon-btn, .tb-cbtn, .tb-mini-btn { transition: background 180ms var(--ease-stf), color 180ms var(--ease-stf), transform 120ms var(--ease-precise); }

/* --- avatars: subtle depth, crisp ring on light & dark -------------- */
.tb-ava, .tb-ava-sm, .tb-av-circle, .tb-cap-stack .av, .tb-pcell-author .ad {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 1px 2px rgba(17,17,16,0.12);
}
[data-theme="dark"] .tb-ava, [data-theme="dark"] .tb-ava-sm, [data-theme="dark"] .tb-av-circle {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.4);
}
.tb-av-more .tb-av-circle { box-shadow: inset 0 0 0 1px var(--border-1); }

/* --- progress bars: rounded caps, faint inner well, calmer green ----- */
.tb-meter, .tb-lb-bar, .tb-mini-bar, .tb-pcard-bar, .tb-bar, .tb-lw-pp .bar {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-4) 8%, transparent);
}
.tb-tcard-prog-fill { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); }
.tb-tcard-prog { background: rgba(8,10,12,0.30); }

/* --- tags / health indicators: flatter, quieter --------------------- */
.tb-tag { font-weight: 500; }
.tb-tag .dot { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent); }
.tb-tcard-amber, .tb-pcard-amber { box-shadow: 0 0 0 4px color-mix(in srgb, var(--stf-amber) 16%, transparent); }

/* --- tooltips: unified, refined type ------------------------------- */
.tb-days .tip, .tb-av .av-tip {
  letter-spacing: 0.01em; padding: 7px 11px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); font-weight: 450;
}

/* --- overlays: deeper, softer scrims; tighter modal radii ----------- */
.tb-credit, .tb-sheet { border-radius: var(--radius-xl); }
.tb-credit-scrim, .tb-sheet-scrim, .tb-lw-scrim { transition: opacity var(--dur-base) var(--ease-stf); }
.tb-menu, .tb-pop { border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }

/* --- drag & drop: calmer, more obvious target ----------------------- */
.tb-poolwrap.dragging { box-shadow: inset 0 0 0 1px var(--stf-blueprint); }
.tb-slot2.drop-ok { transform: translateY(-2px); }
.tb-tcard.drag-over { box-shadow: 0 0 0 2px var(--stf-blueprint), var(--shadow-md); }

/* --- sidebar: quiet active accent + smoother nav -------------------- */
.tb-nav-item { position: relative; }
.tb-nav-item.is-active {
  background: color-mix(in srgb, var(--stf-blueprint) 9%, var(--bg-3));
}
[data-theme="dark"] .tb-nav-item.is-active {
  background: color-mix(in srgb, var(--stf-blueprint) 16%, var(--bg-3));
}
.tb-nav-item.is-active::before {
  content: ""; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 17px; border-radius: 999px; background: var(--stf-blueprint); opacity: 0.9;
}
.tb-nav-item { transition: color 200ms var(--ease-stf); }
.tb-theme, .tb-user { transition: background 200ms var(--ease-stf), color 200ms var(--ease-stf); }

/* --- comment bubbles & pins: softer, friendlier --------------------- */
.tb-lb-pin .pd, .tb-pin-dot { box-shadow: 0 3px 10px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(255,255,255,0.2); }
.tb-cind.lit { box-shadow: 0 0 0 3px color-mix(in srgb, var(--stf-blueprint) 28%, transparent); }
.tb-lb-bubble, .tb-pin-bubble { border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }

/* --- empty states: lighter, airier ---------------------------------- */
.tb-placeholder-mark { box-shadow: var(--shadow-xs); }
.tb-slot2.empty { transition: border-color 240ms var(--ease-stf), background 240ms var(--ease-stf); }
.tb-slot2.empty:hover { border-color: color-mix(in srgb, var(--stf-blueprint) 40%, var(--border-2)); }

/* --- page titles: a hair more air ----------------------------------- */
.tb-page-sub, .tb-board-desc { text-wrap: pretty; }
/* light (300) body copy faux-renders jagged — use real Regular (400) */
.tb-page-sub, .tb-placeholder-body, .tb-board-desc, .tb-signin-sub { font-weight: 400; }

/* --- honour reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   FRAME SIZE — driven by the sidebar slider (var --frame-scale, default 1).
   Card & image frames grow/shrink; columns reflow to fit window width,
   so the slider doubles as "how many do I see at once / how zoomed in".
   ===================================================================== */
:root { --frame-scale: 0.5; --view-scale: 1; }

/* VIEW SCALE — the slider zooms the entire page body (content, text, tables,
   cards — everything), like browser zoom, reflowing as it goes. Frames stay at
   their baseline --frame-scale so they don't double-scale. */
.tb-content { zoom: var(--view-scale, 1); }
/* keep the floating zoom control itself at a constant on-screen size */
.tb-framefloat { zoom: calc(1 / var(--view-scale, 1)); }

/* board task cards — fixed-width frames so the scale slider zooms smoothly
   (column count reflows, but each card scales continuously without snapping) */
.tb-matrix {
  grid-template-columns: repeat(auto-fill, calc(244px * var(--frame-scale)));
  justify-content: start;
}
/* project cards — 1.5x the base task-card width */
.tb-pmatrix {
  grid-template-columns: repeat(auto-fill, calc(495px * var(--frame-scale)));
  justify-content: start;
}
/* banners keep a floor height as cards shrink, so stacked text never squeezes */
.tb-tcard-banner { min-height: 82px; }
.tb-pcard-banner { min-height: 80px; }
/* task-page submission pool */
.tb-pool2 {
  grid-template-columns: repeat(auto-fill, minmax(calc(196px * var(--frame-scale)), 1fr));
}
/* task-page slot matrix — fixed-size frames so the scale slider zooms them
   smoothly (count per row adapts; not pinned at 5). */
.tb-slotgrid, .tb-slotgrid.cols-3 {
  grid-template-columns: repeat(auto-fill, calc(240px * var(--frame-scale)));
  justify-content: start; max-width: none;
}

/* =====================================================================
   BRIEF BAR STATS — larger, lighter, clearly legible numerics
   ("5/13 slots", "Jun 06 due")
   ===================================================================== */
.tb-briefbar-stats .bstat b {
  font-family: var(--font-sans); font-size: 22px; font-weight: 400;
  letter-spacing: -0.01em; color: var(--fg-1); line-height: 1.05;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums lining-nums;
}
.tb-briefbar-stats .bstat i {
  font-size: 10px; letter-spacing: 0.14em; color: var(--fg-3);
}

/* task-page project title + status + eyebrow scale with the slider too */
.tb-briefbar-id .ttl { font-size: clamp(15px, calc(23px * var(--frame-scale)), 40px); }
.tb-briefbar-id .proj { font-size: clamp(9px, calc(10.5px * var(--frame-scale)), 17px); }
.tb-briefbar-id .meta .tb-tag { font-size: clamp(9px, calc(10.5px * var(--frame-scale)), 17px); }

/* "Helvetica Neue" has no weight 600 — the browser faux-synthesises it and
   warps the capital E (e.g. "ETHIOPIA", "ACTIVE"). Use the real Medium (500). */
.tb-tag { font-weight: 500; }