/* Canteen Design System 2.0 — the only values the site uses. Source: schema/tokens.ts */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root{
  /* color */
  --ink:#1A1A1A; --muted:#8A8884; --line:#DAD8D3; --canvas:#F4F3F0; --surface:#FFFFFF;
  --done:#5E8C4A; --behind:#D9A532; --focus:#E8562A;
  /* relief */
  --lip:#C9C6BF; --pressed-face:#DEDCD6;
  --raised-check:0 1px 0 #C9C6BF, 0 1px 2px rgba(0,0,0,.1);
  --raised-button:0 1px 0 #C9C6BF, 0 2px 5px rgba(0,0,0,.1);
  --raised-key-44:0 2px 0 #C9C6BF, 0 2px 4.9px rgba(0,0,0,.1);
  --raised-key-72:0 3.3px 0 #C9C6BF, 0 3.3px 8px rgba(0,0,0,.1);
  --pressed:inset 0 2px 4px rgba(30,28,24,.26), 0 1px 0 rgba(255,255,255,.9);
  --pressed-key-44:inset 0 4px 8px rgba(30,28,24,.26), 0 1px 0 rgba(255,255,255,.9);
  --pressed-key-72:inset 0 6.5px 13.1px rgba(30,28,24,.26), 0 1px 0 rgba(255,255,255,.9);
  --dark-key-face:radial-gradient(circle at 50% 30%, #4A4844 0%, #2A2927 45%, #1A1A1A 100%);
  --dark-key:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 3px rgba(0,0,0,.45), 0 2px 0 #000000, 0 3px 5px rgba(0,0,0,.28), 0 8px 14px rgba(0,0,0,.14);
  --dark-key-pressed:inset 0 2px 5px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.9);
  --dark-button-face:linear-gradient(180deg, #3A3936 0%, #1A1A1A 55%, #111111 100%);
  --dark-button:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 0 #000000, 0 2px 5px rgba(0,0,0,.18);
  --dark-button-pressed:inset 0 2px 5px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.9);
  --light-off:inset 0 1px 1.5px rgba(26,26,26,.4), 0 1px 0 #FFFFFF;
  /* type */
  --sans:"Hanken Grotesk", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
  /* space */
  --inner:8px; --gap:16px; --section:32px;
  /* radius */
  --r-control:12px; --r-large:16px; --r-sheet:28px;
  /* motion */
  --press:45ms linear;
  /* pattern */
  --dot-grid:radial-gradient(circle, #C9C6BF 1px, transparent 1.3px) 0 0 / 10px 10px;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.35;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* type */
.t-title{font-family:var(--sans);font-size:34px;font-weight:300;line-height:1.1;letter-spacing:-.03em;margin:0}
.t-body{font-size:16px;font-weight:400;line-height:1.35}
.t-meta{font-size:13px;font-weight:400;line-height:1.45;color:var(--muted);margin:0}
.t-data{font-family:var(--mono);font-size:11px;font-weight:400;line-height:1.2;letter-spacing:.04em;color:var(--muted)}

/* Header block */
.header{padding:0 var(--section);}
.header-top{height:48px;display:flex;align-items:center;justify-content:space-between;gap:var(--gap)}
.header-top .left{display:flex;align-items:center;gap:var(--inner)}
.header-top .keys{display:flex;gap:var(--inner)}
.header .t-title{margin-top:var(--inner)}
.back{display:flex;align-items:center;gap:6px;min-height:44px;color:var(--muted);text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.04em}

/* Mark (line bottle) */
.mark{display:block;color:var(--ink)}

/* Key */
.key{appearance:none;border:0;padding:0;margin:0;flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:9999px;background:var(--surface);box-shadow:var(--raised-key-44);color:var(--ink);font:400 16px/1 var(--sans);cursor:pointer;transition:transform var(--press),box-shadow var(--press),background var(--press)}
.key:active,.key[aria-pressed="true"],.key[aria-expanded="true"]{background:var(--pressed-face);box-shadow:var(--pressed-key-44);transform:translateY(1px)}
.key--72{width:72px;height:72px;box-shadow:var(--raised-key-72)}
.key--72:active,.key--72[aria-pressed="true"]{box-shadow:var(--pressed-key-72)}
.key--dark{background:var(--dark-key-face);box-shadow:var(--dark-key);color:var(--canvas)}
.key--dark:active{background:var(--ink);box-shadow:var(--dark-key-pressed);transform:translateY(2px)}
.dots{display:grid;grid-template-columns:repeat(3,3px);gap:3px}
.dots i{width:3px;height:3px;border-radius:50%;background:var(--ink);display:block}

/* Button */
.btn{appearance:none;border:0;margin:0;display:inline-flex;align-items:center;justify-content:center;gap:var(--inner);height:44px;padding:0 16px;border-radius:var(--r-control);font:500 13px/1 var(--sans);cursor:pointer;text-decoration:none;transition:transform var(--press),box-shadow var(--press),opacity var(--press)}
.btn--56{height:56px;padding:0 24px;border-radius:var(--r-large);font-size:15px}
.btn--full{width:100%}
.btn--primary{background:var(--dark-button-face);box-shadow:var(--dark-button);color:var(--canvas)}
.btn--primary:active{box-shadow:var(--dark-button-pressed);transform:translateY(1px)}
.btn--primary:disabled{background:var(--line);box-shadow:none;color:var(--muted);cursor:default;transform:none}
.btn--secondary{background:var(--surface);box-shadow:var(--raised-button);color:var(--ink)}
.btn--secondary:active,.btn--secondary[aria-pressed="true"]{background:var(--pressed-face);box-shadow:var(--pressed);transform:translateY(1px)}
.btn--quiet{background:transparent;color:var(--muted);padding:0 var(--inner)}
.btn--quiet:active{opacity:.55}

/* Segment */
.segment{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--inner);padding:var(--inner);background:var(--line);border-radius:var(--r-control)}
.segment .btn{height:44px}
.segment .btn[aria-pressed="false"]{background:transparent;box-shadow:none;color:var(--muted)}
.segment .btn[aria-pressed="true"]{background:var(--surface);box-shadow:var(--raised-button);color:var(--ink);transform:none}

/* Field */
.field{display:block;width:100%;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;padding:10px 0;min-height:44px;font:400 16px/1.35 var(--sans);color:var(--ink)}
.field::placeholder{color:var(--muted)}
.field:focus{outline:none;border-bottom-width:2px;padding-bottom:9px}

/* List + Row */
.list{list-style:none;margin:0;padding:0}
.row{display:flex;align-items:center;gap:12px;min-height:52px;border-bottom:1px solid var(--line);width:100%;background:transparent;border-left:0;border-right:0;border-top:0;padding:0;font:inherit;color:inherit;text-align:left;text-decoration:none;cursor:pointer}
.row--2{min-height:60px}
.row .text{flex:1;min-width:0;display:flex;flex-direction:column;padding:8px 0}
.row .title{font-size:16px;line-height:1.35}
.row .second{font-size:13px;line-height:1.45;color:var(--muted)}
.row .trail{display:flex;align-items:center;gap:var(--inner);color:var(--muted);font-size:13px}
.row.struck .title{text-decoration:line-through;text-decoration-color:var(--muted);color:var(--muted)}
.row.muted .title{color:var(--muted)}
.chev{width:8px;height:8px;border-right:1.5px solid var(--muted);border-top:1.5px solid var(--muted);transform:rotate(45deg);margin-right:4px}

/* Light */
.light{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none;background:var(--line);box-shadow:var(--light-off)}
.light--done{background:var(--done);box-shadow:inset 0 -1px 1px rgba(0,0,0,.2), 0 0 6px #5E8C4A99, 0 1px 0 #FFFFFF}
.light--behind{background:var(--behind);box-shadow:inset 0 -1px 1px rgba(0,0,0,.2), 0 0 6px #D9A53299, 0 1px 0 #FFFFFF}
.light--focus{background:var(--focus);box-shadow:inset 0 -1px 1px rgba(0,0,0,.2), 0 0 6px #E8562A99, 0 1px 0 #FFFFFF}

/* Sheet (Menu, Add Sheet) */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(26,26,26,.25);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:520px;max-height:calc(100dvh - 24px);overflow:auto;background:var(--canvas);border-radius:var(--r-sheet) var(--r-sheet) 0 0;padding:var(--inner) var(--section) calc(var(--section) + env(safe-area-inset-bottom));animation:sheet-in 220ms cubic-bezier(.2,.8,.2,1)}
.sheet-grip{width:36px;height:4px;border-radius:2px;background:var(--line);margin:0 auto var(--gap)}
.sheet-group{margin-top:var(--gap)}
.sheet-group:first-of-type{margin-top:0}
.sheet-foot{margin-top:var(--section);display:flex;align-items:center;justify-content:space-between;gap:var(--gap)}
@keyframes sheet-in{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}

/* Notice */
.notice{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;background:var(--ink);color:var(--canvas);font-size:13px;line-height:1.45;padding:10px 16px;border-radius:var(--r-control);max-width:calc(100vw - 48px)}

/* Card surface */
.card{background:var(--surface);border-radius:var(--r-large)}

/* Menu Key keeps its 44 size on pages with their own .key rules */
.key.cm-menu-key{width:44px;height:44px;box-shadow:var(--raised-key-44);background:var(--surface)}
.key.cm-menu-key[aria-expanded="true"],.key.cm-menu-key:active{background:var(--pressed-face);box-shadow:var(--pressed-key-44)}