/* ============================================================================
   MOMENTUM v2 — "The Workbench"

   WHY THIS IS STILL LIGHT
   Stark is dark for reading, Forge is dark for glancing across a room. This is
   the one you sit at and work in — dense lists, scanning, ticking things off.
   Parchment and brass suit that, and three dark apps would flatten all three
   into one look. The theme stays. What changes is that there is now a system
   underneath it.

   WHAT WAS ACTUALLY BROKEN IN v1
     - 34 distinct font sizes across 100 declarations, 39% of them under 12px
       (smallest 8.96px). Nine separate steps inside a 3-pixel band.
     - 25 distinct spacing values, only 36% on any grid. 7px used 21 times.
     - Radius tokens defined, then bypassed by 18 hardcoded rules.
     - 21% of the file dead, including a whole Learning module.
   Nothing was *wrong*; everything had been nudged by hand. That is what
   "half done" feels like. This file has 7 type steps and one 4px grid.

   THE SIGNATURE — THE PEGBOARD
   One device carries completion everywhere: a row of small squares. Habit
   heatmaps, project progress, the week strip. Filled = done. It is the same
   object at every scale, which is what makes a system read as designed.
   ============================================================================ */

/* ==========================================================================
   §1  TOKENS — the whole system. Nothing outside this block invents a value.
   ========================================================================== */
:root{
  /* --- surfaces: parchment, panel, inset --- */
  --parchment:   #F5F0E4;
  --panel:       #FFFDF7;
  --panel-sunk:  #EDE6D5;
  --ink-panel:   #24211B;   /* dark panels: hero, ledger head, gauge */
  --ink-panel-2: #322D24;

  /* --- ink --- */
  --ink:         #221F19;
  --ink-soft:    #5E574A;
  --ink-faint:   #736A59;   /* v1 was #9A9080 (3.09:1). 4.69:1 on parchment, 5.25 on panel. */
  --on-dark:     #F3EEE0;
  --on-dark-soft:#C4B99F;

  /* --- lines --- */
  --line:        #DDD3BC;
  --line-strong: #BFB194;

  /* --- brass: the accent, one job — emphasis and progress --- */
  --brass:       #8E6527;   /* text-safe on light — 4.57:1 on parchment */
  --brass-lit:   #C9963F;   /* only on dark panels or as a fill */
  --brass-wash:  #F0E6CE;

  /* --- state --- */
  --overdue:     #A83A25;
  --due:         #7C560F;
  --done:        #2C7550;
  --done-wash:   #E2F0E6;

  /* --- type: 7 steps. Nothing below 12px. --- */
  --t-xs:  0.75rem;    /* 12 — meta, labels, chips */
  --t-sm:  0.8125rem;  /* 13 — secondary */
  --t-md:  0.9375rem;  /* 15 — body, rows */
  --t-lg:  1.125rem;   /* 18 — card titles */
  --t-xl:  1.5rem;     /* 24 — page heading */
  --t-2xl: 2rem;       /* 32 — hero */
  --t-3xl: 2.75rem;    /* 44 — the one big number */

  /* --- spacing: 4px grid, 7 steps --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* --- geometry: machined, near-square --- */
  --r:3px; --r-lg:5px; --r-pill:999px;

  /* --- touch --- */
  --tap:44px;

  --shadow-1:0 1px 0 rgba(34,31,25,.07), 0 1px 3px rgba(34,31,25,.07);
  --shadow-2:0 2px 0 rgba(34,31,25,.07), 0 8px 20px rgba(34,31,25,.10);
  --shadow-3:0 4px 0 rgba(34,31,25,.09), 0 20px 44px rgba(34,31,25,.20);

  --f-display:'Space Grotesk', system-ui, sans-serif;
  --f-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --shell:1320px;
  --bar-h:56px;
  --fast:.15s ease;
}

/* ==========================================================================
   §2  BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--parchment);color:var(--ink);
  font-family:var(--f-body);font-size:var(--t-md);line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}
img{display:block;max-width:100%;}
::selection{background:var(--brass);color:#fff;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r-pill);}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:var(--r);}

.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--ink);color:var(--on-dark);padding:var(--s3) var(--s5);font-weight:700;}
.skip:focus{left:0;}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

/* ==========================================================================
   §3  TYPE ROLES
   ========================================================================== */
.dsp{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;line-height:1.1;}
.num{font-family:var(--f-mono);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.lbl{
  font-family:var(--f-mono);font-size:var(--t-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);
}
.t-xs{font-size:var(--t-xs);} .t-sm{font-size:var(--t-sm);} .t-md{font-size:var(--t-md);}
.t-lg{font-size:var(--t-lg);} .t-xl{font-size:var(--t-xl);} .t-2xl{font-size:var(--t-2xl);}
.t-3xl{font-size:var(--t-3xl);}
.soft{color:var(--ink-soft);} .faint{color:var(--ink-faint);}
.c-over{color:var(--overdue);} .c-due{color:var(--due);} .c-done{color:var(--done);}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ==========================================================================
   §4  SIGNATURE — THE PEGBOARD
   One device for completion, at every scale. Filled square = done.
   ========================================================================== */
.peg{display:flex;flex-wrap:wrap;gap:3px;}
.peg i{
  display:block;width:11px;height:11px;border-radius:2px;
  background:var(--panel-sunk);border:1px solid var(--line);
}
.peg i.on{background:var(--brass);border-color:var(--brass);}
.peg i.today{outline:1.5px solid var(--ink);outline-offset:1px;}
.peg-sm i{width:8px;height:8px;}
.peg-lg i{width:15px;height:15px;border-radius:var(--r);}
.peg-dark i{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.16);}
.peg-dark i.on{background:var(--brass-lit);border-color:var(--brass-lit);}

/* a continuous version, for when there are too many units to show as squares */
.bar{height:6px;background:var(--panel-sunk);border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;}
.bar i{display:block;height:100%;background:var(--brass);transition:width .4s ease;}
.bar-dark{background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.14);}
.bar-dark i{background:var(--brass-lit);}

/* ==========================================================================
   §5  CHROME
   ========================================================================== */
.bar-top{
  position:sticky;top:0;z-index:60;height:var(--bar-h);
  background:rgba(245,240,228,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.bar-in{max-width:var(--shell);margin:0 auto;height:100%;padding:0 var(--s4);display:flex;align-items:center;gap:var(--s5);}
@media(min-width:900px){.bar-in{padding:0 var(--s6);}}
.logo{display:flex;align-items:center;gap:var(--s2);flex:none;min-height:40px;}
.logo-mark{
  width:26px;height:26px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--ink);color:var(--brass-lit);font-family:var(--f-display);font-weight:700;font-size:var(--t-sm);
}
.logo-txt{font-family:var(--f-display);font-weight:700;font-size:var(--t-lg);letter-spacing:-.02em;}
.logo-txt b{color:var(--brass);}

.nav{display:none;gap:2px;}
@media(min-width:860px){.nav{display:flex;}}
.nav a{
  padding:var(--s2) var(--s3);border-radius:var(--r);font-size:var(--t-sm);font-weight:600;
  color:var(--ink-soft);transition:var(--fast);min-height:36px;display:flex;align-items:center;gap:var(--s2);
}
.nav a:hover{background:var(--panel);color:var(--ink);}
.nav a[aria-current="page"]{background:var(--ink);color:var(--on-dark);}
.nav a[aria-current="page"] svg{color:var(--brass-lit);}
.bar-end{margin-left:auto;display:flex;align-items:center;gap:var(--s3);}

/* level chip — the XP widget, promoted out of the sidebar footer */
.lvl-chip{display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s3) var(--s1) var(--s1);border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--panel);min-height:36px;}
.lvl-num{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--brass-lit);display:grid;place-items:center;font-family:var(--f-mono);font-weight:700;font-size:var(--t-xs);}
.lvl-meta{display:none;}
@media(min-width:640px){.lvl-meta{display:block;line-height:1.15;}}
.lvl-tier{font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;}
.lvl-xp{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-faint);}

.tabs{
  position:fixed;inset:auto 0 0 0;z-index:60;display:flex;
  background:rgba(255,253,247,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
@media(min-width:860px){.tabs{display:none;}}
.tabs a{
  flex:1;min-height:56px;                      /* v1 was 38px — under the 44px floor */
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:var(--t-xs);font-weight:600;color:var(--ink-faint);
}
.tabs a[aria-current="page"]{color:var(--brass);}
.tabs svg{width:19px;height:19px;}

.wrap{max-width:var(--shell);margin:0 auto;padding:var(--s5) var(--s4) var(--s7);}
@media(min-width:900px){.wrap{padding:var(--s6) var(--s6) var(--s7);}}
@media(max-width:859px){.wrap{padding-bottom:96px;}}

/* ==========================================================================
   §6  HEADS + PANELS
   ========================================================================== */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5);}
.head h1{font-family:var(--f-display);font-weight:700;font-size:var(--t-xl);letter-spacing:-.025em;}
.rule{height:1px;background:var(--line);margin:var(--s6) 0;}

.panel{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-1);}
.panel-head{
  display:flex;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);
}
.panel-head h2,.panel-head h3{font-family:var(--f-display);font-weight:700;font-size:var(--t-md);letter-spacing:-.01em;}
.panel-dark{background:linear-gradient(150deg,var(--ink-panel),var(--ink-panel-2));border:1px solid var(--ink-panel-2);border-radius:var(--r-lg);color:var(--on-dark);box-shadow:var(--shadow-2);}
.panel-dark .lbl{color:var(--on-dark-soft);}

/* hero */
.hero{padding:var(--s5);border-radius:var(--r-lg);position:relative;overflow:hidden;}
.hero h2{font-family:var(--f-display);font-weight:700;font-size:var(--t-2xl);letter-spacing:-.03em;line-height:1.05;}
.hero .quote{margin-top:var(--s3);font-family:var(--f-mono);font-size:var(--t-xs);color:var(--brass-lit);letter-spacing:.01em;}

/* ==========================================================================
   §7  CONTROLS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:40px;padding:0 var(--s4);border-radius:var(--r);
  font-family:var(--f-display);font-weight:700;font-size:var(--t-sm);letter-spacing:-.01em;
  white-space:nowrap;transition:var(--fast);border:1px solid transparent;
}
.btn:active{transform:translateY(1px);}
.btn-go{background:var(--ink);color:var(--on-dark);}
.btn-go:hover{background:#332E26;}
.btn-line{border-color:var(--line-strong);color:var(--ink);background:var(--panel);}
.btn-line:hover{border-color:var(--ink-faint);}
.btn-quiet{color:var(--ink-soft);}
.btn-quiet:hover{background:var(--panel-sunk);color:var(--ink);}
.btn-kill{border-color:var(--overdue);color:var(--overdue);}
.btn-kill:hover{background:var(--overdue);color:#fff;}
.btn-sq{width:40px;padding:0;flex:none;}
.btn[disabled]{opacity:.35;pointer-events:none;}
.btn svg{width:16px;height:16px;flex:none;}

/* every icon-only control gets a 44px hit area without growing visually */
.tapfix{position:relative;}
.tapfix::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--tap);height:var(--tap);}

.chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px var(--s2);border-radius:var(--r);
  font-size:var(--t-xs);font-weight:600;border:1px solid var(--line);
  background:var(--panel-sunk);color:var(--ink-soft);
}
.chip-dot{width:8px;height:8px;border-radius:2px;flex:none;}
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:4px var(--s2);border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:var(--t-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--line-strong);color:var(--ink-soft);
}
.pill-over{border-color:var(--overdue);color:var(--overdue);background:#FBEAE6;}
.pill-due{border-color:var(--due);color:var(--due);background:var(--brass-wash);}

.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;background:var(--panel);}
.seg button{
  padding:0 var(--s3);min-height:40px;font-size:var(--t-sm);font-weight:600;color:var(--ink-soft);
  border-right:1px solid var(--line);transition:var(--fast);
}
.seg button:last-child{border-right:0;}
.seg button:hover{background:var(--panel-sunk);}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--on-dark);}

.field{display:block;margin-bottom:var(--s4);}
.field > .lbl{display:block;margin-bottom:var(--s2);}
.inp{
  width:100%;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r);
  padding:var(--s3);font-size:var(--t-md);min-height:44px;transition:var(--fast);
}
.inp:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-wash);}
.inp::placeholder{color:var(--ink-faint);}
textarea.inp{min-height:76px;resize:vertical;}
.row2{display:grid;grid-template-columns:1fr;gap:var(--s3);}
@media(min-width:520px){.row2{grid-template-columns:1fr 1fr;}}

/* ==========================================================================
   §8  ROWS — the single task/habit row used across every page
   ========================================================================== */
.row-item{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:0 var(--s3);border-radius:var(--r);
  min-height:var(--tap);transition:background .12s;
}
/* A task row can carry a priority pill, a project pill, a repeat mark, a date
   and an edit button. On a phone those squeezed the title to zero width, so
   the title now reserves space and the meta wraps beneath it instead. */
@media(max-width:600px){
  .row-item{padding:var(--s2) var(--s3);gap:var(--s2);}
  .row-item > .row-acts{display:none;}          /* tapping the title edits it */
  .row-item > .pill,.row-item > .chip,.row-item > .row-meta{margin-left:34px;}
  .row-title{flex:1 1 100%;min-height:32px;}
}
.row-item + .row-item{border-top:1px solid var(--line);}
.row-item:hover{background:var(--panel-sunk);}
.row-title{flex:1 1 9rem;min-width:9rem;font-size:var(--t-md);text-align:left;min-height:var(--tap);display:flex;align-items:center;}
.row-title.done{text-decoration:line-through;color:var(--ink-faint);}
.row-meta{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-faint);flex:none;}
.row-acts{display:flex;gap:2px;flex:none;}

.check{
  width:22px;height:22px;flex:none;border:2px solid var(--line-strong);border-radius:var(--r);
  display:grid;place-items:center;background:var(--panel);
  color:transparent;font-size:13px;font-weight:700;transition:var(--fast);position:relative;
}
.check::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--tap);height:var(--tap);}
.check:hover{border-color:var(--brass);}
.check.on{background:var(--done);border-color:var(--done);color:#fff;}
@keyframes pop{0%{transform:scale(1);}45%{transform:scale(1.22);}100%{transform:scale(1);}}
.check.pop{animation:pop .32s ease;}

/* ==========================================================================
   §9  PROJECTS — the layer that stops Spaces duplicating Tasks
   ========================================================================== */
.proj-link{display:block;padding:var(--s2) var(--s3);margin-bottom:var(--s2);border-radius:var(--r);min-height:var(--tap);transition:background .12s;}
.proj-link:hover{background:var(--panel-sunk);}
.proj-grid{display:grid;grid-template-columns:1fr;gap:var(--s3);}
@media(min-width:760px){.proj-link{display:block;padding:var(--s2) var(--s3);margin-bottom:var(--s2);border-radius:var(--r);min-height:var(--tap);transition:background .12s;}
.proj-link:hover{background:var(--panel-sunk);}
.proj-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1180px){.proj-link{display:block;padding:var(--s2) var(--s3);margin-bottom:var(--s2);border-radius:var(--r);min-height:var(--tap);transition:background .12s;}
.proj-link:hover{background:var(--panel-sunk);}
.proj-grid{grid-template-columns:repeat(3,1fr);}}
.proj{
  background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);display:flex;flex-direction:column;overflow:hidden;
  border-top:3px solid var(--proj-color,var(--brass));transition:var(--fast);
}
.proj:hover{box-shadow:var(--shadow-2);}
.proj.archived{opacity:.55;}
.proj-head{padding:var(--s3) var(--s4);display:flex;align-items:flex-start;gap:var(--s2);}
.proj-name{font-family:var(--f-display);font-weight:700;font-size:var(--t-lg);letter-spacing:-.02em;line-height:1.2;flex:1;min-width:0;}
.proj-body{padding:0 var(--s4) var(--s3);}
.proj-tasks{padding:0 var(--s2) var(--s2);}
.proj-foot{margin-top:auto;padding:var(--s3) var(--s4);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:var(--s2);}

.space-tabs{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s5);}
.space-tab{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:0 var(--s3);min-height:40px;border-radius:var(--r);
  border:1px solid var(--line-strong);background:var(--panel);
  font-size:var(--t-sm);font-weight:600;color:var(--ink-soft);transition:var(--fast);
}
.space-tab:hover{border-color:var(--ink-faint);color:var(--ink);}
.space-tab[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-dark);}
.space-dot{width:9px;height:9px;border-radius:2px;flex:none;}

/* ==========================================================================
   §10  BOARD / GROUPS (tasks page)
   ========================================================================== */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(268px,1fr);gap:var(--s3);overflow-x:auto;padding-bottom:var(--s3);}
.col{background:var(--panel-sunk);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s2);min-height:180px;}
.col-head{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s2) var(--s3);border-bottom:2px solid var(--col-color,var(--line-strong));margin-bottom:var(--s2);}
.col-head h3{font-family:var(--f-display);font-weight:700;font-size:var(--t-sm);flex:1;min-width:0;}
.card{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--card-color,var(--line-strong));
  border-radius:var(--r);padding:var(--s3);margin-bottom:var(--s2);box-shadow:var(--shadow-1);
}
.card-top{display:flex;align-items:flex-start;gap:var(--s2);}
.card-title{flex:1;min-width:0;font-size:var(--t-sm);font-weight:600;text-align:left;line-height:1.35;min-height:24px;}
.card-title.done{text-decoration:line-through;color:var(--ink-faint);}
.card-meta{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2);padding-left:30px;}

.group-head{
  display:flex;align-items:center;gap:var(--s3);margin:var(--s5) 0 var(--s2);
  font-family:var(--f-display);font-weight:700;font-size:var(--t-sm);
}
.group-head::after{content:'';flex:1;height:1px;background:var(--line);}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line-strong);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--s5);}
@media(min-width:700px){.stats{grid-template-columns:repeat(4,1fr);}}
.stat{background:var(--panel);padding:var(--s4);border-top:3px solid var(--stat-color,var(--line-strong));}
.stat-n{font-family:var(--f-mono);font-weight:700;font-size:var(--t-xl);line-height:1;font-variant-numeric:tabular-nums;}
.stat-l{margin-top:var(--s2);font-family:var(--f-mono);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.09em;color:var(--ink-faint);}

/* ==========================================================================
   §11  CALENDAR
   ========================================================================== */
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s1);}
.cal-dow{font-family:var(--f-mono);font-size:var(--t-xs);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);text-align:center;padding:var(--s2) 0;}
.cal-cell{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  min-height:104px;padding:var(--s2);display:flex;flex-direction:column;gap:3px;text-align:left;
}
.cal-cell.dim{background:transparent;border-color:transparent;}
.cal-add{opacity:0;margin-top:auto;align-self:flex-start;min-height:32px;padding:0 var(--s2);border-radius:var(--r);color:var(--ink-faint);transition:opacity .12s;}
.cal-cell:hover .cal-add,.cal-add:focus-visible{opacity:1;}
@media(hover:none){.cal-add{opacity:1;}}
.cal-cell.today{border-color:var(--ink);border-width:2px;}
.cal-date{font-family:var(--f-mono);font-size:var(--t-xs);font-weight:600;color:var(--ink-soft);}
.cal-cell.today .cal-date{color:var(--ink);}
.cal-ev{font-size:var(--t-xs);font-weight:600;padding:4px 6px;min-height:26px;display:flex;align-items:center;border-radius:2px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.week-col{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s2);min-height:min(58vh,430px);display:flex;flex-direction:column;gap:var(--s1);}
.week-col.today{border-color:var(--ink);border-width:2px;}

/* ==========================================================================
   §12  HABITS
   ========================================================================== */
.habit{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:var(--s4);margin-bottom:var(--s3);}
.habit-top{display:flex;align-items:center;gap:var(--s3);}
.habit-name{font-family:var(--f-display);font-weight:700;font-size:var(--t-md);}
.streak{text-align:center;flex:none;min-width:52px;}
.streak-n{font-family:var(--f-mono);font-weight:700;font-size:var(--t-lg);line-height:1;}
.streak-l{font-family:var(--f-mono);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);margin-top:3px;}

.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s3);}
.badge{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg);}
.badge.locked{opacity:.5;background:transparent;border-style:dashed;}
.badge-ico{width:38px;height:38px;flex:none;border-radius:var(--r);display:grid;place-items:center;background:var(--brass-wash);font-size:var(--t-lg);}
.badge.locked .badge-ico{background:var(--panel-sunk);filter:grayscale(1);}
.badge-name{font-family:var(--f-display);font-weight:700;font-size:var(--t-sm);}
.badge-req{font-size:var(--t-xs);color:var(--ink-faint);margin-top:2px;}

/* ==========================================================================
   §13  MODAL / TOAST / EMPTY
   ========================================================================== */
.veil{position:fixed;inset:0;z-index:200;background:rgba(34,31,25,.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:var(--s4);}
.veil.on{display:flex;}
.sheet{
  width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  padding:var(--s5);box-shadow:var(--shadow-3);
}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line);}
.sheet-head h2{font-family:var(--f-display);font-weight:700;font-size:var(--t-lg);}
.sheet-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s5);}

.toast{
  position:fixed;left:50%;bottom:var(--s5);z-index:400;transform:translate(-50%,14px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:var(--s2);background:var(--ink);color:var(--on-dark);
  padding:var(--s3) var(--s4);border-radius:var(--r);font-size:var(--t-sm);font-weight:600;
  transition:opacity .2s,transform .2s;box-shadow:var(--shadow-2);
}
.toast.on{opacity:1;transform:translate(-50%,0);}
.toast.gold{background:var(--brass);}
.toast.warn{background:var(--overdue);}
@media(max-width:859px){.toast{bottom:76px;}}

.levelup{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;background:rgba(34,31,25,.6);}
.levelup.on{display:flex;}
.lu{background:var(--panel);border:1px solid var(--brass);border-radius:var(--r-lg);padding:var(--s6);text-align:center;box-shadow:var(--shadow-3);max-width:340px;}
.lu h2{font-family:var(--f-display);font-weight:700;font-size:var(--t-xl);color:var(--brass);margin-top:var(--s3);}
.lu p{margin-top:var(--s2);color:var(--ink-soft);font-size:var(--t-sm);}
.confetti{position:fixed;top:-12px;width:8px;height:14px;z-index:350;pointer-events:none;}

.empty{padding:var(--s6) var(--s4);text-align:center;border:1px dashed var(--line-strong);border-radius:var(--r-lg);color:var(--ink-faint);}
.empty p{margin-top:var(--s2);font-size:var(--t-sm);}
.empty svg{width:26px;height:26px;}

/* helpers */
.row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);}
.grow{flex:1;min-width:0;}
.stack>*+*{margin-top:var(--s4);}
.hide{display:none!important;}
.split{display:grid;grid-template-columns:1fr;gap:var(--s5);}
@media(min-width:1000px){.split{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);}}