/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS
   Palette: SBB Red × Warm Neutrals
   Light source: 315° (top-left) — consistent across all surfaces
   Philosophy: Braun × Apple — nothing without purpose
══════════════════════════════════════════════════════════ */
:root {
  /* SBB Red */
  --red:      #EB0000;
  --red-dk:   #C40000;
  --red-a10:  rgba(235,0,0,.10);
  --red-a18:  rgba(235,0,0,.18);
  --red-a25:  rgba(235,0,0,.25);

  /* Signal (secondary) */
  --green:    #1A7F3C;
  --green-a10:rgba(26,127,60,.10);
  --amber:    #F97316;
  --amber-a10:rgba(249,115,22,.10);
  --blue:     #0055A5;

  /* Surfaces — light mode */
  --bg:       #EDEDED;
  --s0:       #FFFFFF;   /* highest surface */
  --s1:       #F6F6F6;   /* mid surface */
  --s2:       #EEEEEE;   /* recessed */
  --s3:       #E4E4E4;   /* deepest recess */
  --bdr:      rgba(0,0,0,.08);
  --bdr-md:   rgba(0,0,0,.13);
  --bdr-str:  rgba(0,0,0,.22);
  --ink:      #141414;
  --ink2:     #3C3C3C;
  --ink3:     #6C6C6C;
  --ink4:     #A0A0A0;
  --ink5:     #C8C8C8;

  /* Light-model shadows: source top-left */
  --sh-xs: 0 1px 2px rgba(0,0,0,.06), 0 .5px 1px rgba(0,0,0,.04);
  --sh-sm: 0 2px 6px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --sh-md: 0 4px 16px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
  --sh-lg: 0 12px 36px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.07);
  --sh-xl: 0 24px 64px rgba(0,0,0,.14), 0 6px 16px rgba(0,0,0,.08);
  /* Top-left light edge on raised elements */
  --lit:   inset 0 1px 0 rgba(255,255,255,.85), inset 1px 0 0 rgba(255,255,255,.4);
  /* Pressed / inset */
  --sh-in: inset 0 1px 3px rgba(0,0,0,.12), inset 0 .5px 1px rgba(0,0,0,.08);

  /* Type */
  --ff:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ffm: 'DM Mono', monospace;

  /* Radii system */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;

  /* Motion */
  --ease:    cubic-bezier(.4,0,.2,1);
  --spring:  cubic-bezier(.34,1.56,.64,1);
  --ease-in: cubic-bezier(.4,0,1,1);

  /* Layout */
  --topbar-h: 56px;
  --max-w: 660px;
}

[data-theme="dark"] {
  --bg:      #111111;
  --s0:      #1E1E1E;
  --s1:      #252525;
  --s2:      #2C2C2C;
  --s3:      #333333;
  --bdr:     rgba(255,255,255,.06);
  --bdr-md:  rgba(255,255,255,.10);
  --bdr-str: rgba(255,255,255,.18);
  --ink:     #F0F0F0;
  --ink2:    #CFCFCF;
  --ink3:    #909090;
  --ink4:    #585858;
  --ink5:    #363636;

  --sh-xs: 0 1px 2px rgba(0,0,0,.28), 0 .5px 1px rgba(0,0,0,.20);
  --sh-sm: 0 2px 6px rgba(0,0,0,.36), 0 1px 2px rgba(0,0,0,.24);
  --sh-md: 0 4px 16px rgba(0,0,0,.44), 0 1px 4px rgba(0,0,0,.30);
  --sh-lg: 0 12px 36px rgba(0,0,0,.52), 0 3px 8px rgba(0,0,0,.36);
  --sh-xl: 0 24px 64px rgba(0,0,0,.60), 0 6px 16px rgba(0,0,0,.40);
  --lit:   inset 0 1px 0 rgba(255,255,255,.07), inset 1px 0 0 rgba(255,255,255,.04);

  --red-a10: rgba(235,0,0,.13);
  --red-a18: rgba(235,0,0,.22);
  --green-a10:rgba(26,127,60,.15);
  --amber-a10:rgba(249,115,22,.15);
}

/* ══════════════════════════════════════════════════════════
   BASE
══════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; -webkit-text-size-adjust:100%; }
body {
  min-height:100%; background:var(--bg); color:var(--ink);
  font-family:var(--ff); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overscroll-behavior:none;
  transition:background .3s var(--ease), color .3s var(--ease);
}
button { font-family:var(--ff); cursor:pointer; }
textarea { font-family:var(--ff); }

/* ══════════════════════════════════════════════════════════
   TOPBAR
   Raised surface, light edge top, micro-shadow below
══════════════════════════════════════════════════════════ */
.topbar {
  position:sticky; top:0; z-index:100;
  height:var(--topbar-h);
  background:var(--s0);
  border-bottom:1px solid var(--bdr);
  box-shadow:var(--sh-sm);
  display:flex; align-items:center;
  padding:0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
  gap:10px;
}

/* Logo */
.logo { display:flex; align-items:center; gap:9px; flex-shrink:0; user-select:none; }

.logo-mark {
  width:32px; height:32px; border-radius:9px;
  background:var(--red);
  box-shadow:var(--sh-sm), var(--lit);
  position:relative; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
/* Swiss cross */
.logo-mark::before { content:''; position:absolute; width:5px; height:16px; background:#fff; border-radius:1px; }
.logo-mark::after  { content:''; position:absolute; width:16px; height:5px; background:#fff; border-radius:1px; }

.logo-text {
  font-size:17px; font-weight:700; letter-spacing:-.4px; color:var(--ink);
  line-height:1;
}
.logo-text em { font-style:normal; color:var(--red); }

/* Stats */
.topbar-stats {
  flex:1; display:flex; gap:5px;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
}
.topbar-stats::-webkit-scrollbar { display:none; }

.stat {
  display:flex; align-items:center; gap:7px;
  padding:5px 11px; border-radius:var(--r-sm);
  background:var(--s1); border:1px solid var(--bdr);
  box-shadow:var(--sh-xs), var(--lit);
  flex-shrink:0; white-space:nowrap;
}
.stat-lbl { font-size:10px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--ink4); }
.stat-val { font-family:var(--ffm); font-size:12px; font-weight:500; color:var(--ink2); }
.stat-pip { width:28px; height:3px; background:var(--s3); border-radius:99px; overflow:hidden; }
.stat-pip-fill { height:100%; border-radius:99px; background:var(--red); transition:width .5s var(--ease); }

/* Controls */
.topbar-right { display:flex; gap:7px; align-items:center; flex-shrink:0; }

.tb-btn {
  width:36px; height:36px; border-radius:var(--r-sm);
  background:var(--s1); border:1px solid var(--bdr); color:var(--ink3);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-xs), var(--lit); transition:all .18s var(--ease);
}
.tb-btn:hover { background:var(--s0); color:var(--ink); box-shadow:var(--sh-sm), var(--lit); transform:translateY(-1px); }
.tb-btn:active { transform:none; box-shadow:var(--sh-in); }
.tb-btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

/* Language picker */
.lang-wrap { position:relative; }
.lang-trigger {
  height:36px; padding:0 10px; border-radius:var(--r-sm);
  background:var(--s1); border:1px solid var(--bdr); color:var(--ink2);
  display:flex; align-items:center; gap:5px; font-size:15px;
  box-shadow:var(--sh-xs), var(--lit); transition:all .18s var(--ease);
}
.lang-trigger:hover { box-shadow:var(--sh-sm), var(--lit); transform:translateY(-1px); }
.lang-trigger:active { transform:none; box-shadow:var(--sh-in); }
.lang-caret { font-size:8px; color:var(--ink4); transition:transform .2s var(--ease); line-height:1; margin-top:1px; }
.lang-wrap.open .lang-caret { transform:rotate(180deg); }

.lang-menu {
  display:none; position:absolute; top:calc(100% + 6px); right:0;
  background:var(--s0); border:1px solid var(--bdr-md); border-radius:var(--r-md);
  overflow:hidden; z-index:200; min-width:155px;
  box-shadow:var(--sh-xl);
  animation:popIn .16s var(--spring);
}
@keyframes popIn { from { opacity:0; transform:translateY(-5px) scale(.97); } }
.lang-wrap.open .lang-menu { display:block; }

.lang-opt {
  display:flex; align-items:center; gap:9px;
  padding:10px 14px; width:100%; border:none;
  background:transparent; color:var(--ink2); font-size:13px; font-weight:400;
  text-align:left; transition:background .12s;
  border-bottom:1px solid var(--bdr);
}
.lang-opt:last-child { border-bottom:none; }
.lang-opt:hover { background:var(--s1); }
.lang-opt.sel { color:var(--red); font-weight:500; }
.lang-opt-flag { font-size:17px; }

/* ══════════════════════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════════════════════ */
.main {
  max-width:var(--max-w);
  margin:0 auto;
  padding:20px max(16px, env(safe-area-inset-left)) 140px;
}

/* Section header */
.sec-hd {
  display:flex; align-items:center; gap:9px;
  margin-bottom:14px;
}
.sec-lbl { font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--ink4); flex:1; }
.sec-badge {
  min-width:22px; height:22px; padding:0 7px;
  background:var(--red); border-radius:99px;
  font-size:10px; font-weight:700; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px var(--red-a25);
  transition:all .2s var(--ease);
}
.sec-badge.zero { background:var(--s2); color:var(--ink4); box-shadow:none; }
.sec-collapse {
  font-size:11px; font-weight:500; color:var(--ink4);
  background:transparent; border:none; padding:4px 8px; border-radius:var(--r-xs);
  transition:all .15s; display:flex; align-items:center; gap:4px;
}
.sec-collapse:hover { background:var(--s2); color:var(--ink2); }
.sec-collapse svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; }

/* ══════════════════════════════════════════════════════════
   TASK CARD
   No left border stripe — priority shown via dot + subtle tint
   Light model: card is raised, shadow bottom-right, lit top-left
══════════════════════════════════════════════════════════ */
.card {
  position:relative; overflow:hidden;
  background:var(--s0);
  border:1px solid var(--bdr);
  border-radius:var(--r-md);
  margin-bottom:8px;
  box-shadow:var(--sh-sm), var(--lit);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease), opacity .25s var(--ease);
  animation:cardIn .3s var(--spring) both;
}
.card:hover { box-shadow:var(--sh-md), var(--lit); transform:translateY(-1px); }
@keyframes cardIn { from { opacity:0; transform:translateY(10px) scale(.99); } }

/* Drain — bottom edge, drains from right as time runs out */
.card-drain {
  position:absolute; bottom:0; left:0; height:2px;
  border-radius:0 0 var(--r-md) var(--r-md);
  transition:width .12s linear, background .4s var(--ease);
  pointer-events:none; opacity:.75;
}

/* ── COLLAPSED row ── */
.card-row {
  display:flex; align-items:center; gap:11px;
  padding:14px 14px 14px 16px;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .12s;
  min-height:58px;
}
.card-row:hover { background:rgba(0,0,0,.02); }
[data-theme="dark"] .card-row:hover { background:rgba(255,255,255,.02); }

/* Priority dot — the ONLY priority indicator */
.prio-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  transition:background .2s, box-shadow .2s;
}
.card.pg .prio-dot { background:var(--green); }
.card.py .prio-dot { background:var(--amber); box-shadow:0 0 0 3px var(--amber-a10); }
.card.pr .prio-dot { background:var(--red);   box-shadow:0 0 0 3px var(--red-a10); }

.card-name {
  flex:1; min-width:0;
  font-size:15px; font-weight:400; letter-spacing:-.1px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .2s;
}
.card.pr.urgent .card-name { color:var(--red); }

.card-time {
  font-family:var(--ffm); font-size:12px; font-weight:500;
  color:var(--ink4); flex-shrink:0; transition:color .25s;
  letter-spacing:.2px; min-width:46px; text-align:right;
}
.card.warn   .card-time { color:var(--amber); }
.card.urgent .card-time { color:var(--red); }

/* Chevron */
.card-chev {
  width:22px; height:22px; border-radius:7px;
  background:var(--s2); border:1px solid var(--bdr);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:var(--sh-in);
  transition:all .2s var(--ease);
}
.card-chev svg { width:9px; height:9px; fill:none; stroke:var(--ink4); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s var(--ease); }
.card.open .card-chev svg { transform:rotate(90deg); }

/* Complete button in collapsed row */
.check-btn {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:var(--s1); border:1.5px solid var(--bdr-md);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-xs), var(--lit);
  transition:all .18s var(--ease);
}
.check-btn svg { width:15px; height:15px; fill:none; stroke:var(--ink5); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; transition:all .18s var(--ease); }
.check-btn:hover { border-color:var(--red); background:var(--red-a10); box-shadow:var(--sh-sm), 0 0 0 4px var(--red-a10); }
.check-btn:hover svg { stroke:var(--red); }
.check-btn:active { transform:scale(.92); box-shadow:var(--sh-in); }
.card.urgent .check-btn { border-color:var(--red); background:var(--red-a10); }
.card.urgent .check-btn svg { stroke:var(--red); opacity:.7; }

/* ── EXPANDED panel ── */
.card-body {
  display:none; padding:0 16px 16px;
  border-top:1px solid var(--bdr);
  animation:fadeIn .18s var(--ease);
}
@keyframes fadeIn { from { opacity:0; } }
.card.open .card-body { display:block; }

/* Dim collapsed row as soon as card is open */
.card.open .card-row .card-name,
.card.open .card-row .card-time,
.card.open .card-row .card-chev,
.card.open .card-row .prio-dot { opacity:.28; transition:opacity .2s var(--ease); }
.card.open .card-row .check-btn { opacity:.18; }
/* Block accidental collapse while actively editing */
.card.editing .card-row { pointer-events:none; }

/* Inline editable name */
.card-name-edit {
  font-size:18px; font-weight:400; letter-spacing:-.25px; color:var(--ink);
  line-height:1.4; outline:none; word-break:break-word;
  padding:13px 0 10px; border-bottom:1.5px solid transparent;
  cursor:text; transition:border-color .15s;
  min-height:52px;
}
.card-name-edit:focus { border-bottom-color:var(--red); cursor:text; }
.card-name-edit:empty::before { content:attr(data-ph); color:var(--ink5); }

/* Progress block */
.card-progress {
  display:flex; align-items:center; gap:14px;
  padding:12px 0 14px;
}

/* Pie timer */
.ring-wrap { position:relative; width:52px; height:52px; flex-shrink:0; }
.ring-wrap svg { transform:rotate(-90deg); width:52px; height:52px; border-radius:50%; overflow:hidden; }
.ring-bg   { fill:none; stroke:var(--s3); stroke-width:26; }
.ring-fg   { fill:none; stroke-width:26; stroke-linecap:butt; transition:stroke-dashoffset .12s linear, stroke .4s var(--ease); }
.ring-label { display:none; }

/* Time bar */
.card-timebar { flex:1; }
.card-timebar-row { display:flex; justify-content:space-between; margin-bottom:5px; }
.card-timebar-lbl { font-size:11px; color:var(--ink4); font-weight:500; }
.card-timebar-val { font-family:var(--ffm); font-size:11px; color:var(--ink3); }
.card-timebar-track {
  height:5px; background:var(--s3); border-radius:99px; overflow:hidden;
  box-shadow:var(--sh-in);
}
.card-timebar-fill { height:100%; border-radius:99px; transition:width .12s linear, background .4s var(--ease); }

/* Tags */
.card-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px; }
.card-tag {
  font-size:10px; font-weight:500; letter-spacing:.3px;
  padding:3px 8px; border-radius:99px;
  background:var(--s2); border:1px solid var(--bdr); color:var(--ink4);
  box-shadow:var(--sh-xs);
}
.card-tag-link { cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.card-tag-link:hover { background:var(--red-a10); border-color:var(--red-a18); color:var(--red); }

/* Actions */
.card-actions { display:flex; gap:6px; flex-wrap:wrap; }

.btn-done {
  display:flex; align-items:center; gap:6px;
  height:34px; padding:0 14px; border-radius:var(--r-sm); border:none;
  background:var(--green); color:#fff;
  font-size:13px; font-weight:500;
  box-shadow:0 2px 8px var(--green-a10), var(--lit);
  transition:all .18s var(--ease);
}
.btn-done svg { width:13px; height:13px; fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.btn-done:hover { filter:brightness(1.1); transform:translateY(-1px); }
.btn-done:active { transform:none; }

.btn-sec {
  display:flex; align-items:center; gap:6px;
  height:34px; padding:0 12px; border-radius:var(--r-sm);
  background:var(--s1); border:1px solid var(--bdr); color:var(--ink3);
  font-size:13px; font-weight:500;
  box-shadow:var(--sh-xs), var(--lit); transition:all .18s var(--ease);
}
.btn-sec svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn-sec:hover { box-shadow:var(--sh-sm), var(--lit); color:var(--ink); transform:translateY(-1px); }
.btn-sec:active { transform:none; box-shadow:var(--sh-in); }
.btn-sec.drag { cursor:ew-resize; user-select:none; touch-action:none; }
.btn-sec.drag.dragging { background:var(--blue); color:#fff; border-color:var(--blue); }

.btn-del {
  display:flex; align-items:center; gap:5px;
  height:34px; padding:0 12px; border-radius:var(--r-sm);
  background:transparent; border:1px solid var(--bdr); color:var(--ink4);
  font-size:13px; font-weight:400;
  box-shadow:var(--sh-xs); transition:all .18s var(--ease);
}
.btn-del svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.btn-del:hover { border-color:var(--red); color:var(--red); background:var(--red-a10); box-shadow:var(--sh-sm); }
.btn-del:active { transform:none; }

.btn-collapse-row {
  display:flex; align-items:center; gap:5px;
  height:34px; padding:0 10px; border-radius:var(--r-sm);
  background:transparent; border:1px solid var(--bdr); color:var(--ink4);
  font-size:12px; font-weight:400; margin-left:auto;
  box-shadow:var(--sh-xs); transition:all .15s;
}
.btn-collapse-row svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.btn-collapse-row:hover { background:var(--s2); color:var(--ink2); }

/* ── In-card priority switcher ── */
.card-prio-btns { display:flex; gap:4px; align-items:center; }
.cpb {
  width:30px; height:30px; border-radius:50%;
  background:var(--s1); border:1.5px solid var(--bdr);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s var(--ease);
  opacity:.35;
}
.cpb.sel { opacity:1; background:var(--s0); border-color:var(--bdr-md); transform:scale(1.15); box-shadow:var(--sh-sm); }
.cpb:hover:not(.sel) { opacity:.65; transform:scale(1.05); }
.cpb.pg .prio-dot-sm { background:var(--green); }
.cpb.py .prio-dot-sm { background:var(--amber); }
.cpb.pr .prio-dot-sm { background:var(--red); }

/* ── Segmented priority control ── */
.prio-seg {
  display:flex; border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--bdr); box-shadow:var(--sh-in);
  background:var(--s2);
}
.prio-seg-btn {
  display:flex; align-items:center; gap:6px;
  height:34px; padding:0 12px; border:none;
  background:transparent; color:var(--ink3);
  font-size:13px; font-weight:400; transition:all .15s;
  border-right:1px solid var(--bdr);
}
.prio-seg-btn:last-child { border-right:none; }
.prio-seg-btn:hover { background:var(--s1); color:var(--ink2); }
.prio-seg-btn.sel {
  background:var(--s0); color:var(--ink);
  font-weight:500; box-shadow:var(--sh-sm), var(--lit);
}
.prio-dot-sm {
  width:7px; height:7px; border-radius:50%;
  background:var(--ink5); transition:background .15s;
}
.prio-seg-btn.pg .prio-dot-sm { background:var(--green); }
.prio-seg-btn.py .prio-dot-sm { background:var(--amber); }
.prio-seg-btn.pr .prio-dot-sm { background:var(--red); }

/* ══════════════════════════════════════════════════════════
   ADD SHEET
══════════════════════════════════════════════════════════ */
.add-sheet {
  position:fixed; bottom:calc(36px + env(safe-area-inset-bottom)); left:0; right:0; z-index:120;
  background:var(--s0); border-top:1px solid var(--bdr-md);
  box-shadow:0 -4px 24px rgba(0,0,0,.10), 0 -1px 4px rgba(0,0,0,.06);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  transform:translateY(calc(100% - 64px));
  transition:transform .38s var(--spring);
}
.add-sheet.up { transform:translateY(0); }
/* Hide handle label when sheet is open — textarea placeholder takes over */
.add-sheet.up .sheet-handle-lbl { display:none; }

.sheet-pip {
  position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:36px; height:4px; border-radius:99px; background:var(--s3);
}
.sheet-handle-row {
  display:flex; align-items:center; gap:12px;
  padding:20px 18px 0; cursor:pointer; -webkit-tap-highlight-color:transparent;
  min-height:44px;
}
.sheet-plus {
  width:34px; height:34px; border-radius:50%;
  background:var(--red); border:none; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px var(--red-a25), var(--lit);
  transition:all .18s var(--ease); flex-shrink:0;
}
.sheet-plus svg { width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; }
.sheet-plus:hover { background:var(--red-dk); transform:scale(1.08); }
.sheet-plus:active { transform:scale(.94); }
.add-sheet.up .sheet-plus { transform:rotate(45deg); }
.add-sheet.up .sheet-plus:hover { transform:rotate(45deg) scale(1.08); }

.sheet-handle-lbl { flex:1; font-size:15px; font-weight:400; color:var(--ink3); }
.sheet-handle-time { font-family:var(--ffm); font-size:13px; color:var(--ink4); }

.sheet-body { padding:12px 18px 20px 18px; display:flex; flex-direction:column; gap:12px; }

/* Input with border ring */
.sheet-input-wrap {
  border:1.5px solid var(--bdr-md);
  border-radius:12px;
  padding:11px 14px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.add-sheet.up .sheet-input-wrap {
  animation:input-pulse 3s ease-in-out 1s infinite;
}
.add-sheet.up .sheet-input-wrap:focus-within {
  animation:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-a10);
}
@keyframes input-pulse {
  0%,100% { border-color:var(--bdr-md); box-shadow:none; }
  50%      { border-color:var(--ink2); box-shadow:0 0 0 3px var(--bdr-md); }
}
.sheet-input {
  width:100%; border:none; outline:none; resize:none; overflow:hidden;
  background:transparent; color:var(--ink);
  font-size:19px; font-weight:400; letter-spacing:-.3px; line-height:1.4;
  padding:0; min-height:28px;
}
.sheet-input::placeholder { color:var(--ink5); }

/* X/+ button greyed when a card is open */
.sheet-plus.dimmed {
  background:var(--s3);
  box-shadow:none;
  opacity:.4;
}

.sheet-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Time button + track */
.time-scrub { display:flex; align-items:center; gap:8px; flex:1; min-width:120px; }
.time-btn {
  display:flex; align-items:center; gap:6px;
  height:34px; padding:0 11px; border-radius:var(--r-sm);
  background:var(--s1); border:1px solid var(--bdr); color:var(--ink3);
  font-family:var(--ffm); font-size:13px;
  box-shadow:var(--sh-xs), var(--lit); transition:all .15s;
  cursor:ew-resize; user-select:none; touch-action:none;
}
.time-btn:hover { box-shadow:var(--sh-sm), var(--lit); }
.time-btn.dragging { background:var(--blue); color:#fff; border-color:var(--blue); }
.time-btn svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.time-track { flex:1; height:4px; background:var(--s3); border-radius:99px; overflow:hidden; box-shadow:var(--sh-in); }
.time-fill { height:100%; border-radius:99px; background:var(--red); transition:width .06s linear; }

.btn-submit {
  display:flex; align-items:center; gap:7px;
  height:36px; padding:0 16px; border-radius:var(--r-sm); border:none;
  background:var(--red); color:#fff;
  font-size:14px; font-weight:600;
  box-shadow:0 2px 10px var(--red-a25), var(--lit);
  transition:all .18s var(--ease);
}
.btn-submit svg { width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; }
.btn-submit:hover { background:var(--red-dk); transform:translateY(-1px); box-shadow:0 4px 16px var(--red-a25), var(--lit); }
.btn-submit:active { transform:none; box-shadow:var(--sh-in); }

/* ══════════════════════════════════════════════════════════
   HISTORY PANEL
══════════════════════════════════════════════════════════ */
.hist-scrim {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.35); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.hist-scrim.show { opacity:1; pointer-events:all; }

.hist-panel {
  position:fixed; top:0; right:0; bottom:0;
  width:min(360px, 88vw); z-index:201;
  background:var(--s0); border-left:1px solid var(--bdr-md);
  box-shadow:var(--sh-xl);
  transform:translateX(100%); transition:transform .32s var(--ease-in);
  overflow-y:auto; overscroll-behavior:contain;
}
.hist-panel.open { transform:translateX(0); transition:transform .36s var(--spring); }

.hist-head {
  position:sticky; top:0; background:var(--s0);
  border-bottom:1px solid var(--bdr); box-shadow:var(--sh-sm);
  padding:16px 18px; display:flex; align-items:center; gap:10px;
}
.hist-title { font-size:16px; font-weight:600; letter-spacing:-.2px; flex:1; }
.hist-close {
  width:28px; height:28px; border-radius:8px;
  background:var(--s2); border:1px solid var(--bdr); color:var(--ink3);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; box-shadow:var(--sh-xs), var(--lit); transition:all .15s;
}
.hist-close:hover { color:var(--ink); background:var(--s1); }

.hist-sec { padding:16px 18px; }
.hist-sec-hd { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.hist-sec-lbl { font-size:10px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--ink4); flex:1; }
.hist-sec-n { font-family:var(--ffm); font-size:11px; color:var(--ink4); }
.hist-clear {
  font-size:11px; font-weight:500; color:var(--ink4);
  background:transparent; border:1px solid var(--bdr); padding:3px 9px;
  border-radius:var(--r-xs); box-shadow:var(--sh-xs); transition:all .15s;
}
.hist-clear:hover { border-color:var(--red); color:var(--red); background:var(--red-a10); }
.hist-divider { height:1px; background:var(--bdr); margin:4px 0; }

.hist-item {
  display:flex; align-items:flex-start; gap:9px;
  padding:9px 11px; background:var(--s1); border:1px solid var(--bdr);
  border-radius:var(--r-sm); margin-bottom:5px;
  box-shadow:var(--sh-xs), var(--lit); transition:box-shadow .15s;
}
.hist-item:hover { box-shadow:var(--sh-sm), var(--lit); }
.hist-dot { width:7px; height:7px; border-radius:50%; margin-top:4px; flex-shrink:0; }
.done .hist-dot { background:var(--green); }
.miss .hist-dot { background:var(--red); }
.hist-body { flex:1; min-width:0; }
.hist-name { font-size:13px; color:var(--ink2); line-height:1.4; word-break:break-word; }
.hist-meta { font-family:var(--ffm); font-size:10px; color:var(--ink4); margin-top:2px; }
.hist-rm {
  width:22px; height:22px; border-radius:6px; border:1px solid var(--bdr);
  background:transparent; color:var(--ink5); font-size:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-xs); transition:all .12s;
}
.hist-rm:hover { border-color:var(--red); color:var(--red); background:var(--red-a10); }
.hist-empty { font-size:13px; color:var(--ink4); font-style:italic; padding:6px 0; }

/* ══════════════════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(0,0,0,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .22s var(--ease);
}
.modal-overlay.show { opacity:1; pointer-events:all; }
.modal-card {
  background:var(--s0); border:1px solid var(--bdr-md); border-radius:var(--r-xl);
  padding:28px 24px 22px; max-width:340px; width:100%;
  box-shadow:var(--sh-xl), var(--lit);
  transform:scale(.94) translateY(8px);
  transition:transform .24s var(--spring); text-align:center;
}
.modal-overlay.show .modal-card { transform:scale(1) translateY(0); }
.modal-icon {
  width:52px; height:52px; margin:0 auto 16px;
  background:var(--red-a10); border:1px solid var(--bdr); border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-sm), var(--lit);
}
.modal-icon svg { width:22px; height:22px; fill:none; stroke:var(--red); stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.modal-h { font-size:17px; font-weight:600; letter-spacing:-.25px; margin-bottom:6px; }
.modal-p { font-size:13px; color:var(--ink3); font-weight:300; line-height:1.55; margin-bottom:8px; }
.modal-name {
  display:inline-block; background:var(--s2); border:1px solid var(--bdr);
  border-radius:var(--r-xs); padding:5px 12px; font-size:13px; font-weight:500;
  color:var(--ink2); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  box-shadow:var(--sh-xs); margin-bottom:22px;
}
.modal-btns { display:flex; gap:8px; }
.modal-cancel {
  flex:1; height:42px; border-radius:var(--r-sm);
  border:1px solid var(--bdr); background:var(--s1); color:var(--ink2);
  font-size:14px; font-weight:500; font-family:var(--ff);
  box-shadow:var(--sh-xs), var(--lit); transition:all .15s;
}
.modal-cancel:hover { box-shadow:var(--sh-sm), var(--lit); color:var(--ink); }
.modal-ok {
  flex:1; height:42px; border-radius:var(--r-sm); border:none;
  background:var(--red); color:#fff; font-size:14px; font-weight:600; font-family:var(--ff);
  box-shadow:0 2px 8px var(--red-a25), var(--lit); transition:all .15s;
}
.modal-ok:hover { background:var(--red-dk); box-shadow:0 4px 14px var(--red-a25), var(--lit); }

/* ══════════════════════════════════════════════════════════
   TOAST — centred pill, above add sheet
══════════════════════════════════════════════════════════ */
#toast {
  position:fixed; bottom:80px;
  left:50%; transform:translateX(-50%) translateY(10px);
  z-index:300; background:var(--ink); color:var(--bg);
  font-size:13px; font-weight:500; letter-spacing:-.1px;
  padding:9px 18px; border-radius:99px;
  box-shadow:var(--sh-lg);
  opacity:0; pointer-events:none;
  transition:all .22s var(--spring);
  white-space:nowrap; max-width:calc(100vw - 40px);
  display:flex; align-items:center; gap:7px;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#toast svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
#toast.ok svg { stroke:#5fce85; }
#toast.err svg { stroke:#ff6b6b; }

/* Completion stamp */
.stamp {
  position:fixed; inset:0; z-index:500; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
}
.stamp.go { animation:stampShow .7s var(--ease) forwards; }
@keyframes stampShow { 0%{opacity:0} 15%{opacity:1} 65%{opacity:1} 100%{opacity:0} }
.stamp-inner {
  background:var(--red); color:#fff; border-radius:var(--r-lg);
  padding:18px 30px; display:flex; align-items:center; gap:10px;
  box-shadow:var(--sh-xl);
  transform:scale(.7) rotate(-3deg);
  animation:stampBounce .38s var(--spring) both;
}
@keyframes stampBounce { to { transform:scale(1) rotate(-2deg); } }
.stamp-check { font-size:28px; }
.stamp-text  { font-size:24px; font-weight:700; letter-spacing:-.5px; }

/* Flash */
#flash { position:fixed; inset:0; pointer-events:none; z-index:9999; background:var(--red); opacity:0; }
#flash.go { animation:flashGo .5s var(--ease); }
@keyframes flashGo { 0%{opacity:0} 18%{opacity:.14} 100%{opacity:0} }

/* ══════════════════════════════════════════════════════════
   CARD EXIT ANIMATIONS
══════════════════════════════════════════════════════════ */
@keyframes exitR { to { opacity:0; transform:translateX(48px) scale(.97); } }
@keyframes exitL { to { opacity:0; transform:translateX(-48px) scale(.95); } }
@keyframes exitS { to { opacity:0; transform:scaleY(.9); transform-origin:top; } }
.card.exit-done { animation:exitR .3s var(--ease-in) forwards; }
.card.exit-fail { animation:exitL .35s var(--ease-in) forwards; }
.card.exit-del  { animation:exitS .24s var(--ease-in) forwards; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width:600px) {
  .main { padding:14px max(12px, env(safe-area-inset-left)) 130px; }
  .topbar { padding:0 12px; gap:8px; }
  .topbar-stats .stat-lbl { display:none; }
  .topbar-stats .stat-pip { display:none; }
  .stat { padding:4px 9px; gap:6px; }
  .prio-seg-btn span:not(.prio-dot-sm) { display:none; }
  .prio-seg-btn { padding:0 9px; }
  .btn-collapse-row span { display:none; }
  .sheet-body { padding:4px 14px max(16px, env(safe-area-inset-bottom)) 14px; }
  .sheet-handle-row { padding:14px 14px 0; }
}
@media (max-width:380px) {
  .topbar-stats { display:none; }
  .btn-sec span,.btn-del span { display:none; }
}

/* ── FOOTER BAR ── */
.footer-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:105;
  display:flex; justify-content:center; align-items:center; gap:20px;
  padding:7px 20px max(8px, env(safe-area-inset-bottom));
  background:var(--s0);
  border-top:1px solid var(--bdr);
  pointer-events:none;
}
.footer-bar a, .footer-bar button {
  pointer-events:all;
  font-size:11px; font-weight:500; color:var(--ink4);
  background:transparent; border:none; padding:4px 2px;
  letter-spacing:.2px; text-decoration:none;
  transition:color .15s; cursor:pointer; font-family:var(--ff);
}
.footer-bar a:hover, .footer-bar button:hover { color:var(--ink2); }
.footer-sep { color:var(--ink5); font-size:10px; pointer-events:none; }

/* ── ONBOARDING (empty state) ── */
.onboard {
  padding:32px 24px 28px; text-align:left; max-width:420px;
}
.onboard-logo {
  display:flex; align-items:center; gap:10px; margin-bottom:24px;
}
.onboard-cross {
  width:40px; height:40px; border-radius:11px; background:var(--red);
  position:relative; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-md), var(--lit); flex-shrink:0;
}
.onboard-cross::before { content:''; position:absolute; width:6px; height:20px; background:#fff; border-radius:1px; }
.onboard-cross::after  { content:''; position:absolute; width:20px; height:6px; background:#fff; border-radius:1px; }
.onboard-wordmark { font-size:22px; font-weight:700; letter-spacing:-.4px; }
.onboard-wordmark em { font-style:normal; color:var(--red); }

.onboard-title { font-size:18px; font-weight:600; letter-spacing:-.3px; color:var(--ink); margin-bottom:18px; }
.onboard-steps { list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:28px; }
.onboard-steps li {
  font-size:14px; color:var(--ink2); font-weight:400; line-height:1.5;
  padding:11px 14px; background:var(--s1); border:1px solid var(--bdr);
  border-radius:var(--r-sm); box-shadow:var(--sh-xs), var(--lit);
}
.onboard-steps li strong { color:var(--red); font-weight:700; }
.onboard-steps li em { font-style:italic; color:var(--ink3); }
.onboard-cta {
  width:100%; height:44px; border-radius:var(--r-sm);
  background:var(--red); border:none; color:#fff;
  font-size:15px; font-weight:600; letter-spacing:-.1px;
  box-shadow:0 2px 10px var(--red-a25), var(--lit);
  transition:all .18s var(--ease); font-family:var(--ff);
  cursor:pointer;
}
.onboard-cta:hover { background:var(--red-dk); transform:translateY(-1px); box-shadow:0 4px 16px var(--red-a25), var(--lit); }
.onboard-cta:active { transform:none; box-shadow:var(--sh-in); }

/* ── ABOUT MODAL ── */
.about-overlay {
  position:fixed; inset:0; z-index:450;
  display:flex; align-items:flex-end; justify-content:center;
  padding:0; background:rgba(0,0,0,.45);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .22s var(--ease);
}
.about-overlay.show { opacity:1; pointer-events:all; }
.about-sheet {
  background:var(--s0); border-radius:var(--r-xl) var(--r-xl) 0 0;
  border:1px solid var(--bdr-md); border-bottom:none;
  padding:28px 28px max(28px, env(safe-area-inset-bottom)) 28px;
  width:100%; max-width:520px;
  box-shadow:var(--sh-xl);
  transform:translateY(100%);
  transition:transform .35s var(--spring);
}
.about-overlay.show .about-sheet { transform:translateY(0); }
.about-head { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.about-cross {
  width:36px; height:36px; border-radius:10px; background:var(--red);
  position:relative; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sh-sm), var(--lit); flex-shrink:0;
}
.about-cross::before { content:''; position:absolute; width:5px; height:18px; background:#fff; border-radius:1px; }
.about-cross::after  { content:''; position:absolute; width:18px; height:5px; background:#fff; border-radius:1px; }
.about-h { font-size:18px; font-weight:700; letter-spacing:-.3px; flex:1; }
.about-close {
  width:30px; height:30px; border-radius:9px;
  background:var(--s2); border:1px solid var(--bdr); color:var(--ink3);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; box-shadow:var(--sh-xs), var(--lit); transition:all .15s;
}
.about-close:hover { color:var(--ink); background:var(--s1); }
.about-text {
  font-size:15px; font-weight:300; color:var(--ink2); line-height:1.7;
  margin-bottom:18px; letter-spacing:-.1px;
}
.about-badges {
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px;
}
.about-badge {
  display:flex; align-items:center; gap:6px;
  padding:7px 13px; background:var(--s1); border:1px solid var(--bdr);
  border-radius:99px; font-size:12px; font-weight:500; color:var(--ink3);
  box-shadow:var(--sh-xs), var(--lit);
}
.about-badge svg { flex-shrink:0; }
.about-made {
  font-size:12px; color:var(--ink4); border-top:1px solid var(--bdr);
  padding-top:14px; line-height:1.6;
}
.about-made a { color:var(--red); text-decoration:none; }
.about-made a:hover { text-decoration:underline; }
.about-disclaimer {
  font-size:12px; color:var(--ink2); line-height:1.6;
  border-top:1px solid var(--bdr); margin-top:12px; padding-top:12px;
  letter-spacing:.1px;
}

/* ── SHARE MODAL ── */
.share-overlay {
  position:fixed; inset:0; z-index:450;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .22s var(--ease);
}
.share-overlay.show { opacity:1; pointer-events:all; }
.share-sheet {
  background:var(--s0); border-radius:var(--r-xl) var(--r-xl) 0 0;
  border:1px solid var(--bdr-md); border-bottom:none;
  padding:24px 24px max(28px, env(safe-area-inset-bottom)) 24px;
  width:100%; max-width:480px;
  box-shadow:var(--sh-xl);
  transform:translateY(100%);
  transition:transform .35s var(--spring);
}
.share-overlay.show .share-sheet { transform:translateY(0); }
.share-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px;
}
.share-h { font-size:17px; font-weight:700; letter-spacing:-.3px; }
.share-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;
}
.share-btn {
  display:flex; align-items:center; gap:10px;
  padding:13px 16px; border-radius:var(--r-md);
  border:1px solid var(--bdr); background:var(--s1);
  font-size:14px; font-weight:500; color:var(--ink2);
  text-decoration:none; cursor:pointer;
  box-shadow:var(--sh-xs),var(--lit); transition:all .15s var(--ease);
  font-family:var(--ff);
}
.share-btn:hover { transform:translateY(-1px); box-shadow:var(--sh-sm),var(--lit); }
.share-btn:active { transform:none; box-shadow:var(--sh-in); }
.share-btn svg { width:18px; height:18px; flex-shrink:0; }
.share-btn.fb  { --sc:#1877F2; }
.share-btn.x   { --sc:var(--ink); }
.share-btn.li  { --sc:#0A66C2; }
.share-btn.ig  { --sc:#E1306C; }
.share-btn svg { color:var(--sc); }
.share-copy {
  width:100%; height:44px; border-radius:var(--r-sm);
  background:var(--red); border:none; color:#fff;
  font-size:14px; font-weight:600; font-family:var(--ff);
  box-shadow:0 2px 10px var(--red-a25),var(--lit);
  transition:all .18s var(--ease); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.share-copy:hover { background:var(--red-dk); transform:translateY(-1px); }
.share-copy:active { transform:none; }
.share-copy svg { width:15px; height:15px; fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }

@media (max-width:600px) {
  .onboard { padding:24px 16px 20px; }
  .about-sheet { padding:24px 20px max(24px, env(safe-area-inset-bottom)) 20px; }
}

/* ── FILTER BAR ── */
.filter-bar {
  max-height:0; overflow:hidden; opacity:0;
  display:flex; gap:6px; flex-wrap:wrap; align-items:center;
  transition:max-height .25s var(--ease), opacity .2s var(--ease), margin .25s var(--ease);
  margin-bottom:0;
}
.filter-bar.open {
  max-height:120px; opacity:1; margin-bottom:12px;
}
.filter-chip {
  height:28px; padding:0 12px; border-radius:99px;
  background:var(--s1); border:1px solid var(--bdr); color:var(--ink3);
  font-size:12px; font-weight:500; font-family:var(--ff);
  box-shadow:var(--sh-xs),var(--lit); transition:all .15s var(--ease);
  cursor:pointer;
}
.filter-chip:hover { box-shadow:var(--sh-sm),var(--lit); color:var(--ink); background:var(--s0); }
.filter-chip.active {
  background:var(--red); border-color:var(--red); color:#fff;
  box-shadow:0 2px 8px var(--red-a25);
}
.sec-collapse.active { background:var(--red-a10); color:var(--red); }