/*
  Tactics Unit design tokens and base rules.
  Source: docs/prototypes/concept-b-dialogue.html (Concept B, Dialogue v3).
  Dark is the default. Light follows the system setting unless the page sets
  data-theme="dark" or data-theme="light" on the html element.
  Load Hanken Grotesk (weights 300 to 700) from the page head.
*/

/* ---------- palette ---------- */
:root{
  color-scheme: dark;
  --bg:#131518; --bg-1:#191C20; --bg-2:#1F2327; --bg-3:#262A2F; --bg-4:#2F343A;
  --pop-bg:#1F2327; --drawer-bg:#191C20; --toast-bg:#262A2F; --field-focus:#1F2327;
  --line:rgba(226,232,240,.075); --line-2:rgba(226,232,240,.12); --line-3:rgba(226,232,240,.2);
  --text:#E8EAED; --text-2:#A4AAB2; --text-3:#737A83; --text-4:#4E545B;
  --accent:#F2A33A; --accent-hi:#F7B658; --accent-ink:#1C1307; --accent-text:#F2A33A; --focus:#F2A33A;
  --accent-soft:rgba(242,163,58,.11); --accent-fill:rgba(242,163,58,.3); --accent-line:rgba(242,163,58,.5); --accent-glow:rgba(242,163,58,.24);
  --good:#7BC19A; --good-soft:rgba(123,193,154,.13); --good-ink:#0E1A13; --good-line:rgba(123,193,154,.4);
  --bad:#E5806F; --bad-soft:rgba(229,128,111,.12); --bad-line:rgba(229,128,111,.28);
  --info:#8FB2D8; --info-soft:rgba(143,178,216,.12); --info-line:rgba(143,178,216,.3);
  --team:#2A3037; --day-sel:#2B3037; --day-bg:#191C20; --day-ring:rgba(242,163,58,.14); --stripe:rgba(255,255,255,.014); --btn-edge:rgba(0,0,0,.35); --btn-hi:rgba(255,255,255,.22);
  --scrim:rgba(7,8,10,.64);
  --pop:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 56px -16px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.3);
  --r-xs:4px; --r:6px; --r-lg:8px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --font:"Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
  color-scheme: light;
  --bg:#FFFFFF; --bg-1:#F5F6F8; --bg-2:#ECEEF1; --bg-3:#E3E6EA; --bg-4:#D6DADF;
  --pop-bg:#FFFFFF; --drawer-bg:#FFFFFF; --toast-bg:#FFFFFF; --field-focus:#FFFFFF;
  --line:#E3E6EA; --line-2:#D9DDE2; --line-3:#C3C9D0;
  --text:#131517; --text-2:#4A5059; --text-3:#7D848D; --text-4:#A9AFB6;
  --accent:#F2A33A; --accent-hi:#F5B04F; --accent-ink:#1C1307; --accent-text:#B86E00; --focus:#B86E00;
  --accent-soft:rgba(242,163,58,.14); --accent-fill:rgba(242,163,58,.38); --accent-line:rgba(184,110,0,.45); --accent-glow:rgba(242,163,58,.22);
  --good:#2E7D52; --good-soft:rgba(46,125,82,.09); --good-ink:#FFFFFF; --good-line:rgba(46,125,82,.35);
  --bad:#BF4536; --bad-soft:rgba(191,69,54,.08); --bad-line:rgba(191,69,54,.28);
  --info:#3A6899; --info-soft:rgba(58,104,153,.08); --info-line:rgba(58,104,153,.3);
  --team:#DDE1E6; --day-sel:#FFFFFF; --day-bg:#F5F6F8; --day-ring:rgba(242,163,58,.22); --stripe:rgba(19,21,23,.03); --btn-edge:rgba(19,21,23,.14); --btn-hi:rgba(255,255,255,.35);
  --scrim:rgba(19,21,23,.28);
  --pop:0 1px 2px rgba(19,21,23,.06), 0 18px 44px -14px rgba(19,21,23,.2);
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#FFFFFF; --bg-1:#F5F6F8; --bg-2:#ECEEF1; --bg-3:#E3E6EA; --bg-4:#D6DADF;
  --pop-bg:#FFFFFF; --drawer-bg:#FFFFFF; --toast-bg:#FFFFFF; --field-focus:#FFFFFF;
  --line:#E3E6EA; --line-2:#D9DDE2; --line-3:#C3C9D0;
  --text:#131517; --text-2:#4A5059; --text-3:#7D848D; --text-4:#A9AFB6;
  --accent:#F2A33A; --accent-hi:#F5B04F; --accent-ink:#1C1307; --accent-text:#B86E00; --focus:#B86E00;
  --accent-soft:rgba(242,163,58,.14); --accent-fill:rgba(242,163,58,.38); --accent-line:rgba(184,110,0,.45); --accent-glow:rgba(242,163,58,.22);
  --good:#2E7D52; --good-soft:rgba(46,125,82,.09); --good-ink:#FFFFFF; --good-line:rgba(46,125,82,.35);
  --bad:#BF4536; --bad-soft:rgba(191,69,54,.08); --bad-line:rgba(191,69,54,.28);
  --info:#3A6899; --info-soft:rgba(58,104,153,.08); --info-line:rgba(58,104,153,.3);
  --team:#DDE1E6; --day-sel:#FFFFFF; --day-bg:#F5F6F8; --day-ring:rgba(242,163,58,.22); --stripe:rgba(19,21,23,.03); --btn-edge:rgba(19,21,23,.14); --btn-hi:rgba(255,255,255,.35);
  --scrim:rgba(19,21,23,.28);
  --pop:0 1px 2px rgba(19,21,23,.06), 0 18px 44px -14px rgba(19,21,23,.2);
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#131518; --bg-1:#191C20; --bg-2:#1F2327; --bg-3:#262A2F; --bg-4:#2F343A;
  --pop-bg:#1F2327; --drawer-bg:#191C20; --toast-bg:#262A2F; --field-focus:#1F2327;
  --line:rgba(226,232,240,.075); --line-2:rgba(226,232,240,.12); --line-3:rgba(226,232,240,.2);
  --text:#E8EAED; --text-2:#A4AAB2; --text-3:#737A83; --text-4:#4E545B;
  --accent:#F2A33A; --accent-hi:#F7B658; --accent-ink:#1C1307; --accent-text:#F2A33A; --focus:#F2A33A;
  --accent-soft:rgba(242,163,58,.11); --accent-fill:rgba(242,163,58,.3); --accent-line:rgba(242,163,58,.5); --accent-glow:rgba(242,163,58,.24);
  --good:#7BC19A; --good-soft:rgba(123,193,154,.13); --good-ink:#0E1A13; --good-line:rgba(123,193,154,.4);
  --bad:#E5806F; --bad-soft:rgba(229,128,111,.12); --bad-line:rgba(229,128,111,.28);
  --info:#8FB2D8; --info-soft:rgba(143,178,216,.12); --info-line:rgba(143,178,216,.3);
  --team:#2A3037; --day-sel:#2B3037; --day-bg:#191C20; --day-ring:rgba(242,163,58,.14); --stripe:rgba(255,255,255,.014); --btn-edge:rgba(0,0,0,.35); --btn-hi:rgba(255,255,255,.22);
  --scrim:rgba(7,8,10,.64);
  --pop:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 56px -16px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.3);
}

/* ---------- motion ---------- */
:root{
  --t-press:120ms; --t-panel:180ms; --t-view:240ms;
}

/* ---------- reset and base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;min-height:100vh}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
input,textarea,select{font:inherit;color:inherit}
em,i,cite,dfn,var,address{font:inherit}
code,pre,samp,kbd,tt{font-family:var(--font)}
::selection{background:var(--accent-fill);color:var(--text)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.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}
.tnum{font-variant-numeric:tabular-nums}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ic *{vector-effect:non-scaling-stroke}
.ic.sm{width:14px;height:14px}
.ic.lg{width:22px;height:22px}
.ic .dot{fill:var(--accent);stroke:none}
.mark{width:20px;height:20px;flex:none}
.mark .dot{fill:var(--accent)}

/*
  Reduced motion: movement goes, opacity and color changes stay.
  Transitions keep only non-moving properties, and the shared keyframes are
  redefined as fades (a later @keyframes with the same name wins).
*/
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-property:opacity,color,background-color,border-color,box-shadow,fill,stroke,visibility!important}
  @keyframes pop{from{opacity:0}to{opacity:1}}
  @keyframes sumIn{from{opacity:0}to{opacity:1}}
  @keyframes tlIn{from{opacity:0}to{opacity:1}}
  @keyframes nudge{0%,100%{opacity:1}50%{opacity:.6}}
  @keyframes grow{from{opacity:0}to{opacity:1}}
  @keyframes spin{0%,100%{opacity:1}50%{opacity:.4}}
  @keyframes shimmer{0%,100%{opacity:1}50%{opacity:.6}}
}