@layer base, vendor, components;



:root {
  
  color-scheme: light dark;

  

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --text-xs:   0.9375rem;                                  
  --text-sm:   1rem;                                       
  --text-base: clamp(1.125rem, 0.3vw + 1.05rem, 1.1875rem); 
  --text-md:   clamp(1.25rem, 0.5vw + 1.13rem, 1.375rem);  
  --text-lg:   clamp(1.5rem, 1vw + 1.25rem, 1.875rem);     
  --text-xl:   clamp(2rem, 2.2vw + 1.4rem, 2.75rem);       
  --text-2xl:  clamp(2.5rem, 3.4vw + 1.6rem, 3.75rem);     

  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-body:  1.6;

  --tracking-tight:  -0.021em;
  --tracking-normal: 0;
  --tracking-label:   0.07em;
  --tracking-code:    0.3em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold:   600;
  --weight-heavy:  700;

  
  --space:     0.5rem;   
  --space-2:   1rem;     
  --space-3:   1.5rem;   
  --space-4:   2rem;     
  --space-5:   2.5rem;   
  --space-6:   3rem;     
  --space-8:   4rem;     
  --space-10:  5rem;     
  --space-12:  6rem;     

  
  
  --pounce-h:      4rem;     

  
  --pounce-gap:    var(--space-3);

  --control-h:     3.25rem;  
  --control-h-sm:  2.75rem;  
  --row-h:         4rem;     

  
  --face-md: 2.25rem;     

  --rail: 4.75rem;        
  --rail-status: 1.75rem; 
  --rail-when: 7rem;      
  --rail-who: 4rem;

  --rail-role: 8rem;      
  --rail-seen: 9rem;      
  --rail-kebab: var(--control-h-sm); 

  --list-indent: calc(var(--rail-status) + var(--rail) + var(--space-2) * 2);

  
  --floor: calc(var(--pounce-h) + var(--space-3) + var(--pounce-gap) + var(--safe-bottom));

  
  --gutter: var(--space-4);
  --masthead-h: calc(var(--control-h) + var(--space-2) * 2);

  
  

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  
  --panel-ceiling: calc(100vw - max(var(--space-3), var(--safe-left))
                              - max(var(--space-3), var(--safe-right)));

  
  --line-w:         1px;
  --line-w-control: 1.5px;
  --line-w-glyph:   2px;

  
  --z-prompt:    5;   
  --z-masthead: 10;
  --z-viewmenu: 20;
  --z-skip:     30;
  --z-flash:    40;

  
  --radius-xs:  0.125rem;
  --radius-sm:  0.5rem;
  --radius:     0.875rem;
  --radius-lg:  1.25rem;
  --radius-pill: 999px;

  
  --radius-inset: calc(var(--radius-lg) - var(--space));

  

  --canvas:        light-dark(#fcfbf8, #131417);
  --surface:       light-dark(#ffffff, #1b1d21);
  --surface-sunk:  light-dark(#f4f2ec, #16181b);
  --surface-hover: light-dark(#f6f4ee, #22252a);

  --ink:        light-dark(#191a1d, #f1f2f4);
  --ink-muted:  light-dark(#5c5f66, #a4a9b2);
  
  --ink-faint:  light-dark(#6b6e76, #8f949d);

  --line:        light-dark(#eae6dd, #262a2f);
  --line-strong: light-dark(#d9d4c8, #363b42);

  --accent:      light-dark(#7a6fd1, #9689f5);
  --accent-ink:  light-dark(#ffffff, #0f1116);
  --accent-sunk: light-dark(#f4f3fb, #222233);

  
  --accent-hover: light-dark(#665bb4, #b3aaf8);

  --go:        light-dark(#1c6b46, #6ec994);
  --go-sunk:   light-dark(#e6f2ea, #16251d);
  --warn:      light-dark(#96590a, #e3a651);
  --warn-sunk: light-dark(#fbf0dd, #2a2013);
  --danger:    light-dark(#a52a20, #f0837c);
  --danger-sunk: light-dark(#fbeceb, #2a1614);

  
  --new:       light-dark(#d2695e, #e59a92);

  
  --day:      light-dark(#96238f, #eb8dd9);
  --day-sunk: light-dark(#faeaf7, #2f1a2b);

  
  --sheen: conic-gradient(from 180deg at 50% 50%,
    hsl(268 100% 76%), hsl(349 100% 74%), hsl(12 100% 72%), hsl(52 100% 65%),
    hsl(136 100% 78%), hsl(186 100% 74%), hsl(192 100% 64%), hsl(268 100% 76%));

  

  --colour-rose:   light-dark(#b02744, #f0919f);
  --colour-amber:  light-dark(#a06808, #e0a95c);
  --colour-moss:   light-dark(#4f7e20, #9fca72);
  --colour-teal:   light-dark(#0a7b71, #6bc4d2);
  --colour-indigo: light-dark(#2e57ff, #93a8ff);
  --colour-violet: light-dark(#8047eb, #bfa2f5);
  --colour-plum:   light-dark(#be2d92, #e79ad0);
  --colour-slate:  light-dark(#606d80, #a7b0bd);

  --colour-rose-line:   color-mix(in oklab, var(--colour-rose)   50%, var(--canvas));
  --colour-amber-line:  color-mix(in oklab, var(--colour-amber)  50%, var(--canvas));
  --colour-moss-line:   color-mix(in oklab, var(--colour-moss)   50%, var(--canvas));
  --colour-teal-line:   color-mix(in oklab, var(--colour-teal)   50%, var(--canvas));
  --colour-indigo-line: color-mix(in oklab, var(--colour-indigo) 50%, var(--canvas));
  --colour-violet-line: color-mix(in oklab, var(--colour-violet) 50%, var(--canvas));
  --colour-plum-line:   color-mix(in oklab, var(--colour-plum)   50%, var(--canvas));
  --colour-slate-line:  color-mix(in oklab, var(--colour-slate)  50%, var(--canvas));

  --focus-ring: 2.5px solid var(--accent);
  --focus-offset: 3px;

  --focus-offset-inset: -3px;

  
  --masthead-tint: light-dark(rgb(252 251 248 / 88%), rgb(19 20 23 / 88%));
  --scrim:         light-dark(rgb(25 26 29 / 8%), rgb(0 0 0 / 40%));
  --scrim-strong:  light-dark(rgb(25 26 29 / 20%), rgb(0 0 0 / 55%));

  --shadow-card: 0 1px 2px light-dark(rgb(60 50 30 / 5%), rgb(0 0 0 / 40%)),
                 0 8px 24px light-dark(rgb(60 50 30 / 5%), rgb(0 0 0 / 28%));

  
  --measure: 42rem;
  --column: 68rem;

  --article: 54rem;

}


[data-colour="rose"]   { --colour: var(--colour-rose); --colour-line: var(--colour-rose-line); }
[data-colour="amber"]  { --colour: var(--colour-amber); --colour-line: var(--colour-amber-line); }
[data-colour="moss"]   { --colour: var(--colour-moss); --colour-line: var(--colour-moss-line); }
[data-colour="teal"]   { --colour: var(--colour-teal); --colour-line: var(--colour-teal-line); }
[data-colour="indigo"] { --colour: var(--colour-indigo); --colour-line: var(--colour-indigo-line); }
[data-colour="violet"] { --colour: var(--colour-violet); --colour-line: var(--colour-violet-line); }
[data-colour="plum"]   { --colour: var(--colour-plum); --colour-line: var(--colour-plum-line); }
[data-colour="slate"]  { --colour: var(--colour-slate); --colour-line: var(--colour-slate-line); }


:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

@media (width <= 48rem) {
  :root {
    --gutter: var(--space-2);
    --masthead-h: calc(var(--control-h) * 2 + var(--space) * 3);
    --pounce-gap: var(--space-2);
  }
}



:root {
  --ease:      cubic-bezier(0.2, 0, 0.1, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-land: cubic-bezier(0.2, 0.9, 0.3, 1.1);

  
  --responds: outline-color var(--transition),
              outline-offset var(--transition-focus);
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    --transition:       130ms var(--ease);  
    --transition-focus: 130ms var(--ease-land);
    --transition-enter: 220ms var(--ease);  
    --transition-exit:  150ms var(--ease-exit);
    --transition-slow:  340ms var(--ease);  
  }
}


@media (prefers-reduced-motion: reduce) {
  :root {
    --transition:       0s;
    --transition-focus: 0s;
    --transition-enter: 120ms linear;
    --transition-exit:  100ms linear;
    --transition-slow:  120ms linear;
  }
}