/* coolendar — the jazz redesign (docs/REDESIGN-HANDOFF.md).
   §7 palette, amended: midnight navy night carrying a torn cream page, and the
   original bucket colors pushed more saturated. Everything decorative is
   static forever — no animation, no render-time randomness. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/fonts/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Shantell Sans';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/shantell-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Shantell Sans';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/shantell-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --night: #16223c;      /* the ground */
  --paper: #f6f0e4;      /* the lamplit page */
  --card: #fffdf6;       /* card paper */
  --card-edge: #d9cdb2;
  --ink: #2b2a26;
  --muted: #8d887c;
  --navy: #1c2b4a;
  --mustard-pale: #f2d98a;
  --family: #6aa562;      /* sage */
  --friends: #e0a92e;     /* mustard */
  --work: #5f86d8;        /* cornflower */
  --mind-munching: #a77fce;  /* lilac — absorbing: reading, studying, wandering */
  --wondercrafting: #c0384e; /* crimson — making. Nudged off pure red toward 350 deg
                                so it separates from the tangerine health bucket at 24 deg */
  --health: #e8813c;      /* tangerine */
  --maintenance: #6f4a34; /* dark umber. The teal it replaced sat 62deg from
                             family/sage — nominally fine — but both were the
                             only LOW-SATURATION, mid-dark colours on the board,
                             so they collapsed into one perceptual class. Umber
                             separates by value as well as hue: it is the darkest
                             bucket here, occupies a hue family nothing else uses,
                             and its nearest neighbours by deltaE are grey (42)
                             and crimson (43) rather than another muted cool. */
  --none: #b8b3a6;        /* grey */
  /* The graveyard is the one strictly colorless place, and the values do the
     work the hues can't: SMALL steps between the three ground planes so the
     cubist facets read as facets, one BIG step up to the stones so they read as
     objects sitting on that ground. All three greys are pulled off the page's
     warm cream toward neutral, so "colorless" reads as deliberate rather than
     merely faded. */
  --grave-1: #bcb9b4;
  --grave-2: #a9a6a1;
  --grave-3: #c6c3be;
  --stone-lit: #eeece8;
  --stone-shade: #dbd8d3;
  --stone-ink: #43413e;
  --radius: 10px;
  --disp: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --brush: 'Shantell Sans', 'Comic Sans MS', cursive;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--night);
  color: var(--ink);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}
button { font: inherit; cursor: pointer; }
.disp { font-family: var(--disp); }
.brush { font-family: var(--brush); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- §3.3 stage, night, the lamplit page ---------- */
/* flow-root stops .page's top margin collapsing out through .stage, which was
   leaving the document ~27px taller than the viewport for no reason */
.stage {
  position: relative; min-height: 100vh; max-width: 1460px; margin: 0 auto;
  /* column flex: .page grows to fill, with no viewport units resolved inside
     the zoomed subtree (engines disagree there). Also stops .page's top
     margin collapsing out, which is what flow-root used to do. */
  display: flex; flex-direction: column;
}

.moon { position: absolute; }
.moon-top { left: 9%; top: 0; width: 46%; height: 60px; }
.moon-bottom { left: 31%; bottom: 0; width: 56%; height: 62px; }
.moon-right { right: 22px; top: 21%; width: 60px; height: 37%; }

.star { position: absolute; width: 44px; height: 44px; }
.star.s1  { right: 36px; top: 8.4%; }
.star.s2  { right: 30px; top: 36.8%; }
.star.s3  { right: 42px; top: 61.4%; }
.star.s4  { right: 26px; top: 81.6%; }
.star.s5  { left: 15%; bottom: 12px; }
.star.s6  { left: 64%; bottom: 18px; }
.star.s7  { left: 44px; top: 4px; }
.star.s8  { left: 67%; top: 0; }
/* half-tucked behind the sheet's torn edge */
.star.s9  { left: 16px; top: 43.8%; }
.star.s10 { left: 50%; top: 20px; }

.page {
  position: relative; z-index: 1;
  margin: 34px 96px 48px 34px;
  flex: 1 1 auto;
  transform: rotate(-0.25deg);
}
.page-paper {
  position: absolute; inset: 0;
  background: var(--paper); border-radius: 6px;
  filter: url(#tear);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .28);
}
/* §3.5 the three sweeps + §3.7 stray notes, under the board content */
.sweeps, .strays {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.page-inner { position: relative; padding: 24px 32px 34px; }

/* The desktop board renders at 80% — the density the design was signed off at.
   `zoom` is what browser zoom itself does, so the whole composition (filters,
   type, the night margins) scales as one piece. Two consequences handled here:
   lengths inside .stage are in 80%-units, so viewport-relative ones are divided
   back out (inside the zoom, 125vh is the full stage); and the
   media queries below are in DEVICE px, so the four-across threshold moved from
   1280 units to 1024 device px. Modals and the toast sit outside .stage and stay
   at 100%, where form controls belong.
   This block must come AFTER the .stage/.page rules it overrides. */
@media (min-width: 820px) {
  .stage {
    zoom: 0.8;
    max-width: 1825px;   /* 1460 / 0.8 — same real-world cap as before */
    /* NOT vh: see the --vph note in index.html. Chrome and Safari disagree on
       what vh means inside a zoomed subtree; px does not vary. */
    min-height: calc(var(--vph, 100vh) / 0.8);
  }
}


/* §3.7 Autumn Leaves — starts on the page, ends as stars in the night */
.autumn { position: absolute; right: 0; bottom: 14px; z-index: 2; pointer-events: none; }

/* ---------- top bar ---------- */
/* both calendar hosts must out-rank the board: .qa-field carries a transform,
   so it is its own stacking context sitting at z-index:auto, and .rail's
   z-index:1 in the same context painted straight over the popover. */
.topbar { display: flex; align-items: center; gap: 26px; margin-bottom: 16px; flex-wrap: wrap;
  position: relative; z-index: 50; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.brand { font-weight: 800; font-size: 22px; position: relative; flex: none; }
.brand-blob {
  position: absolute; left: 26px; top: -4px; width: 30px; height: 24px;
  background: var(--mind-munching); opacity: .5; transform: rotate(-8deg);
  border-radius: 58% 42% 60% 40% / 45% 60% 40% 55%; filter: url(#wob);
}
.brand-name { position: relative; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted); align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 13px; height: 11px; display: inline-block; }
.legend span:nth-child(1) i { border-radius: 60% 40% 55% 45%; }
.legend span:nth-child(2) i { border-radius: 45% 55% 40% 60%; }
.legend span:nth-child(3) i { border-radius: 55% 45% 60% 40%; }
.legend span:nth-child(4) i { border-radius: 40% 60% 45% 55%; }
.legend span:nth-child(5) i { border-radius: 58% 42% 50% 50%; }
.legend span:nth-child(6) i { border-radius: 52% 48% 58% 42%; }
.legend span:nth-child(7) i { border-radius: 44% 56% 50% 50%; }
.legend span:nth-child(8) i { border-radius: 50% 50% 42% 58%; }

/* "skip to" — THE navigation control, and the only other calendar in the app */
  position: relative; border: 0; background: none; padding: 0;
  transform: rotate(-1.2deg); flex: none;
}
  position: relative; color: var(--paper); font-weight: 700; font-size: 13.5px;
  padding: 9px 18px; display: inline-flex; align-items: center; gap: 8px;
}
/* ---------- the calendar popover ----------
   Rendered in the DOM rather than using the native picker. Two reasons: the
   native popup is placed by the browser in device coordinates, so `zoom` on
   .stage anchored it near the top-left of the page instead of its trigger; and
   showPicker() threw on WebKit for a hidden input, which is why both date
   controls were dead on iOS. A popover mounted inside a positioned wrapper
   needs no coordinate maths at all and cannot mis-anchor. */
.cal-anchor { position: relative; }

.calpop {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 30;
  width: 268px; padding: 14px 16px 16px 26px;
  font-family: var(--disp);
}
.calpop-paper {
  position: absolute; inset: 0; background: var(--card);
  border: 2px solid var(--card-edge); border-radius: 12px;
  filter: url(#wobBig); box-shadow: 0 8px 0 rgba(43, 42, 38, .13);
}
.calpop-inner { position: relative; }
.calpop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.calpop-month { font-weight: 800; font-size: 14px; color: var(--navy); letter-spacing: .01em; }
.calpop-nav { border: 0; background: none; padding: 3px 8px; font-size: 16px; color: var(--navy); line-height: 1; }
.calpop-nav:hover { color: var(--wondercrafting); }
.calpop-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calpop-dow { font-size: 9.5px; font-weight: 700; color: var(--muted); text-align: center; padding-bottom: 3px; text-transform: lowercase; }
.calpop-day {
  border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ink); padding: 5px 0; border-radius: 7px; position: relative;
}
.calpop-day:hover { background: rgba(28, 43, 74, .09); }
.calpop-day.other { color: #c3bcab; font-weight: 500; }
.calpop-day.today { color: var(--wondercrafting); font-weight: 800; }
.calpop-day.today::after {
  content: ''; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px;
  margin-left: -2px; border-radius: 50%; background: var(--wondercrafting);
}
.calpop-day.sel { background: var(--navy); color: var(--paper); }
.calpop-day.sel::after { background: var(--paper); }
/* a vine down the left edge — same hand as the rest of the decor */
.calpop-vine { position: absolute; left: 4px; top: 8px; bottom: 8px; width: 20px; pointer-events: none; }

@media (max-width: 819px) {
  /* anchored to the viewport, not the trigger: the stamp sits near the screen
     edge, so a trigger-anchored popover ran 95px off it */
  .calpop {
    position: fixed; right: auto; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(304px, calc(100vw - 28px)); z-index: 60;
  }
  .calpop-paper { filter: none; }
}

/* back-to-today chip: only present while the board is away from today, so the
   mode is always visible rather than implied */
.backtoday {
  border: 0; background: none; padding: 0; flex: none;
  position: relative; transform: rotate(0.8deg);
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 12.5px; color: var(--navy);
  border: 1.6px dashed var(--navy); border-radius: 999px; padding: 7px 13px;
}
.backtoday:hover { background: rgba(28, 43, 74, .07); }

/* ---------- §3.9 composer: stamp + segmented control ---------- */
.quickadd { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
  position: relative; z-index: 50; }
.qa-field { flex: 1 1 300px; min-width: 0; position: relative; transform: rotate(-0.25deg); }
.qa-paper {
  position: absolute; inset: 0; background: var(--card);
  border: 2px solid var(--card-edge); border-radius: 12px; filter: url(#wobBig);
}
.qa-field input[type="text"] {
  position: relative; width: 100%; background: none; border: 0; outline: none;
  padding: 15px 108px 15px 18px; font-size: 16px; color: var(--ink); font: inherit; font-size: 16px;
}
.qa-field input::placeholder { color: #a49e8f; }
.qa-field:focus-within .qa-paper { border-color: var(--navy); }

/* the stamp: one tap opens the calendar popover. The anchor carries the
   absolute placement so the popover hangs off the stamp, not off the field. */
.stamp-anchor { position: absolute; right: -8px; top: -16px; z-index: 3; }
.stamp {
  position: relative;
  background: var(--card); border: 1.6px dashed var(--navy); border-radius: 0;
  padding: 7px 11px 6px; transform: rotate(4deg); text-align: center;
  box-shadow: 0 2px 0 rgba(28, 43, 74, .15);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.stamp-day { display: block; font-weight: 800; font-size: 12px; letter-spacing: .1em; color: var(--navy); }
.stamp-date { display: block; font-size: 9px; color: var(--muted); margin-top: 1px; }
.stamp:active { transform: rotate(4deg) scale(.96); }
/* Ideas are dateless, so the stamp detaches and goes inert. Deliberately dead
   rather than dimmed-but-live: a greyed control that still responds invites the
   reading that the date might attach to the idea after all. Consequence: the
   board cannot be moved while `idea` is selected — switch back to `commitment`
   to navigate. */
.stamp.detached {
  transform: rotate(11deg) translate(9px, -7px); opacity: .42;
  border-color: var(--muted); box-shadow: none; pointer-events: none;
}
.stamp.detached .stamp-day, .stamp.detached .stamp-date { color: var(--muted); }

.segmented {
  display: inline-flex; border: 2px solid var(--navy); border-radius: 999px;
  overflow: hidden; font-size: 13px; font-weight: 700; transform: rotate(0.6deg); flex: none;
}
.segmented .seg { border: 0; background: none; color: var(--navy); padding: 10px 18px; font-weight: 700; }
.segmented .seg.on { background: var(--navy); color: var(--paper); }

.qa-error { color: #a33d2e; font-size: 13px; padding: 0 4px 10px; }

/* ---------- board ---------- */
.board { display: flex; align-items: flex-start; gap: 14px; }
.col { min-width: 0; }
#col-yesterday { width: 246px; flex: none; transform: rotate(0.35deg); }
#col-tomorrow { width: 236px; flex: none; transform: rotate(0.5deg); position: relative; z-index: 0; }
#col-yesterday .wpaper { background: #faf5ea; }
#col-yesterday .blob { opacity: 1; }                 /* legend-exact, never tinted */

.col-head {
  border: 0; background: none; padding: 4px 6px 10px; text-align: left;
  font-family: var(--disp); font-weight: 700; font-size: 14px; color: var(--muted);
  text-transform: lowercase; letter-spacing: .02em; border-radius: 8px;
}
.col-head:hover { color: var(--navy); }
.col-head .head-date { font-weight: 700; color: var(--muted); }
.col-tasks, .rail-tasks { display: flex; flex-direction: column; gap: 9px; }

/* TODAY — primitivist, ornament contained inside the panel */
.col-today { flex: 1; min-width: 0; position: relative; transform: rotate(-0.4deg); }
.panel-paper {
  position: absolute; inset: 0; background: var(--card); border-radius: 16px;
  filter: url(#wobBig); box-shadow: 0 2px 0 rgba(43, 42, 38, .10);
}
.today-inner { position: relative; padding: 16px 20px 34px 44px; }
.today-title { position: relative; margin: 0 0 12px 4px; min-height: 42px; display: flex; align-items: center; }
.mask { position: absolute; left: -14px; top: -8px; height: 54px; width: 40px; transform: rotate(-17deg); }
.mask-draw, .mask-photo {
  position: absolute; left: 0; top: 0; height: 54px; width: auto;
  filter: drop-shadow(0 2px 0 rgba(43, 42, 38, 0.18));
}
.today-head {
  position: relative; margin-left: 38px; padding: 0;
  font-weight: 800; font-size: 29px; color: var(--navy); text-transform: none;
}
.today-head .head-date { font-size: 14px; font-weight: 700; color: var(--muted); }
.today-head:hover { color: #33507f; }
.col-today .col-tasks { gap: 10px; }
.col-today .wcard { font-size: 14.5px; }

/* mudcloth mark strips — clipped inside insets so the wobble never crosses out */
.marks { position: absolute; overflow: hidden; pointer-events: none; }
.marks svg { position: absolute; left: 0; top: 0; }
.marks-v { left: 14px; top: 70px; width: 22px; bottom: 30px; }
.marks-v svg { left: 2px; }
.marks-h { left: 46px; right: 22px; bottom: 12px; height: 18px; }

/* retry rail — overlaps tomorrow slightly, as in the mockup */
.rail {
  width: 210px; flex: none; margin-left: 10px; margin-top: 14px;
  position: relative; z-index: 1; transform: rotate(0.8deg);
}
.rail-paper {
  position: absolute; inset: 0; background: #efe6d2;
  border: 1.6px dashed #b8ab8d; border-radius: 12px; filter: url(#wobBig);
  box-shadow: 0 2px 0 rgba(43, 42, 38, .08);
}
.rail-inner { position: relative; padding: 12px; }
.rail-head { font-weight: 700; font-size: 14px; color: var(--navy); text-transform: lowercase; margin-bottom: 9px; }
.rail-tasks { gap: 8px; }
.rail .wcard { padding: 8px 26px 8px 11px; font-size: 12.5px; }
.rail .blob { width: 36px; height: 32px; right: -13px; top: -11px; }
.grave-note { color: var(--muted); font-size: 10.5px; display: block; margin-top: 3px; }
.rail-empty, .col-empty { display: none; }

/* ---------- §3.2 the wobble card ---------- */
/* padding-right keeps text clear of the bucket blob bleeding off the corner */
.wcard { position: relative; padding: 11px 30px 11px 14px; font-size: 13.5px; line-height: 1.35; cursor: pointer; }
.wpaper {
  position: absolute; inset: 0; background: var(--card);
  border: 1.6px solid var(--card-edge); border-radius: 10px;
  filter: url(#wob); overflow: hidden;
}
/* cap the measure: past ~52 characters a line gets hard to track back from */
.wtext { position: relative; display: block; overflow-wrap: anywhere; max-width: 52ch; }
.blob {
  position: absolute; width: 46px; height: 40px; right: -16px; top: -13px;
  background: var(--bc, var(--none));
  border-radius: 62% 38% 55% 45% / 48% 62% 38% 52%;
}
.b-family { --bc: var(--family); }
.b-friends { --bc: var(--friends); }
.b-work { --bc: var(--work); }
.b-wondercrafting { --bc: var(--wondercrafting); }
.b-mind-munching { --bc: var(--mind-munching); }
.b-health { --bc: var(--health); }
.b-maintenance { --bc: var(--maintenance); }
.b-none { --bc: var(--none); }
.wcard:hover .wpaper { border-color: #bfae87; }
.wcard:active { filter: brightness(.985); }
/* Muting is applied to the text and the paper, never to the card as a whole:
   an ancestor opacity blends the bucket blob toward the cream underneath and
   produces a colour that appears nowhere in the legend. Every blob on screen
   must be the exact legend swatch. */
.task.is-done .wtext { opacity: .45; }
.task.is-done .wpaper { background: #f7f3e8; border-color: #e3dac6; }
.task.is-done .task-text { text-decoration: line-through; text-decoration-thickness: 1px; }
.task.is-killed .wtext { opacity: .38; }
.task.is-killed .wpaper { background: #f4f1e6; border-color: #e3dac6; }
.task.is-killed .task-text { text-decoration: line-through wavy; }
.task .check { margin-right: 6px; vertical-align: -1px; }
/* the urgency mark rides inside the bucket blob, top-right. It stays a child of
   .wcard (never of the filtered .wpaper) so the glyph itself is crisp. */
.task .prio {
  position: absolute; right: 6px; top: 6px; font-family: var(--disp);
  font-weight: 800; font-size: 12.5px; line-height: 1; letter-spacing: -0.04em;
  color: #fff;
}
.rail .task .prio { right: 4px; top: 4px; font-size: 10.5px; }
.age-tag { font-family: var(--disp); font-weight: 700; font-size: 11px; color: var(--muted); margin-right: 7px; }

/* ---------- §3.8 ideas: fauvism, framed ---------- */
.ideas {
  position: relative; margin-top: 20px; min-height: 128px;
  padding: 22px 22px 42px 126px;
}
.ideas-frame {
  position: absolute; inset: 0; background: var(--card);
  border: 2px solid #a49e8f; border-radius: 8px; filter: url(#wob);
  box-shadow: inset 0 0 0 5px var(--card), inset 0 0 0 6.5px var(--card-edge);
}
.ideas-label {
  position: absolute; left: 18px; top: 10px; font-weight: 700; font-size: 20px;
  color: var(--health); transform: rotate(-3deg);
}
.ideas-tasks { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 20px; }
.idea-pill { position: relative; cursor: pointer; }
.ip-paper { position: absolute; inset: 0; background: var(--bc, var(--none)); filter: url(#wob); }
.ip-text {
  position: relative; display: inline-block; padding: 14px 23px;
  font-size: 13.5px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere;
  max-width: 40ch;
}
.idea-pill.on-dark .ip-text { color: var(--card); }
.idea-pill:hover .ip-paper { filter: url(#wob) brightness(1.06); }
.idea-pill.is-killed { opacity: .4; }
.idea-pill.is-killed .ip-text { text-decoration: line-through wavy; }
.ideas-empty { position: relative; color: var(--muted); font-size: 13px; padding: 14px 0; }

/* ---------- §3.8 graveyard: cubist, strictly colorless ---------- */
.graveyard { position: relative; margin-top: 16px; padding: 15px 18px 17px; }
.gy-plane { position: absolute; }
.gy-p1 { left: 0; top: 0; width: 62%; height: 100%; background: var(--grave-1); clip-path: polygon(0 4%, 100% 0, 98% 100%, 1% 97%); }
.gy-p2 { left: 52%; top: 0; width: 34%; height: 100%; background: var(--grave-2); clip-path: polygon(4% 0, 100% 6%, 98% 99%, 0 100%); }
.gy-p3 { left: 82%; top: 0; width: 18%; height: 100%; background: var(--grave-3); clip-path: polygon(0 7%, 96% 0, 100% 98%, 4% 100%); }
.gy-inner { position: relative; }
.gy-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 11px; flex-wrap: wrap; }
.gy-title { font-weight: 800; font-size: 15px; color: var(--navy); }
.gy-stones { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
/* stones sit lit on the dark ground, with the facet split wide enough to read */
.stone {
  position: relative; padding: 10px 14px; color: var(--stone-ink); font-size: 12.5px; cursor: pointer;
  background: linear-gradient(104deg,
    color-mix(in srgb, var(--bc, var(--none)) 20%, var(--stone-lit)) 0%,
    color-mix(in srgb, var(--bc, var(--none)) 20%, var(--stone-lit)) 54%,
    color-mix(in srgb, var(--bc, var(--none)) 26%, var(--stone-shade)) 54%,
    color-mix(in srgb, var(--bc, var(--none)) 26%, var(--stone-shade)) 100%);
  overflow-wrap: anywhere; max-width: 260px;
  filter: drop-shadow(1.5px 2.5px 0 rgba(43, 42, 38, .22));
}
.stone .age-tag { color: #6b6864; }
.stone:hover { filter: drop-shadow(1.5px 2.5px 0 rgba(43, 42, 38, .22)) brightness(1.04); }
.gy-more {
  font-family: var(--disp); font-size: 13px; font-weight: 700; color: var(--stone-ink);
  background: none; border: 0; padding: 4px 2px;
  text-decoration: underline; text-underline-offset: 3px;
}
.gy-empty { font-size: 12.5px; color: var(--stone-ink); }

/* ---------- overlays, sheets, modals ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(12, 18, 34, .58);
  display: flex; align-items: flex-end; justify-content: center; z-index: 40;
}
.sheet {
  background: var(--card); border-radius: 16px 16px 0 0;
  width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  border: 1.6px solid var(--card-edge);
}
@media (min-width: 640px) {
  .overlay { align-items: center; }
  .sheet { border-radius: 16px; }
}
.sheet h2 { margin: 2px 0 12px; font-size: 16px; color: var(--navy); font-family: var(--disp); }
.sheet .sheet-task-text { font-weight: 600; margin-bottom: 12px; }
.sheet .actions { display: flex; flex-direction: column; gap: 8px; }
.sheet .actions button, .login-sheet button {
  padding: 11px; border-radius: var(--radius); border: 1.5px solid var(--card-edge);
  background: var(--paper); color: var(--ink); text-align: left; font-size: 15px;
}
.sheet .actions button.primary, .login-sheet button { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.sheet .actions button.danger { color: #a33d2e; border-color: #d8a89e; }
.picker-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.picker-row .lbl { color: var(--muted); font-size: 12.5px; width: 52px; }
.dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; padding: 0; }
.dot.sel { border-color: var(--navy); box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--navy); }
.pri-btn { border: 1.5px solid var(--card-edge); background: var(--paper); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.pri-btn.sel { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.sheet input[type="text"], .login-sheet input {
  width: 100%; padding: 11px 12px; font-size: 16px; border: 1.5px solid var(--card-edge);
  border-radius: var(--radius); background: var(--paper); color: var(--ink); margin-bottom: 10px;
}

/* day editor rows */
.day-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.day-row .row-done { width: 30px; height: 30px; flex: none; border-radius: 8px; border: 1.5px solid var(--card-edge); background: var(--paper); }
.day-row .row-done.on { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.day-row input[type="text"] { flex: 1; margin-bottom: 0; border-left: 5px solid var(--bc, var(--none)); }
.day-row.b-family { --bc: var(--family); } .day-row.b-friends { --bc: var(--friends); }
.day-row.b-work { --bc: var(--work); } .day-row.b-wondercrafting { --bc: var(--wondercrafting); }
.b-mind-munching { --bc: var(--mind-munching); }
.day-row.b-health { --bc: var(--health); } .day-row.b-maintenance { --bc: var(--maintenance); }
.day-row.b-none { --bc: var(--none); }
.day-row.is-done input { opacity: .5; text-decoration: line-through; }
.day-row.is-killed input { opacity: .4; }
.day-row .row-btn { flex: none; border: 0; background: none; font-size: 17px; padding: 4px 6px; color: var(--muted); }

.login-sheet { text-align: center; }
.login-sheet h1 { color: var(--navy); margin: 6px 0 16px; font-size: 22px; font-weight: 800; }
.login-sheet button { width: 100%; text-align: center; }

.toast {
  position: fixed; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%); background: var(--navy); color: var(--paper);
  padding: 9px 16px; border-radius: 999px; font-size: 14px; z-index: 50; max-width: 88vw;
}

/* ---------- the twinkle ----------
   NOTE: this is the one place the redesign departs from "everything decorative
   is static forever" (handoff §1, reaffirmed in §2) — added on request.
   Kept honest: the timings are hardcoded per element (no render-time
   randomness), the filter sits on the <use> INSIDE the animated wrapper so
   feTurbulence is rasterised once instead of every frame, and anyone who asks
   for reduced motion gets the original static design. */
@media (prefers-reduced-motion: no-preference) {
  .star { animation: twinkle var(--t, 7s) ease-in-out var(--d, 0s) infinite; will-change: opacity; }
  .note { animation: shimmer var(--t, 7s) ease-in-out var(--d, 0s) infinite; will-change: opacity; }
}
@keyframes twinkle {
  0%, 100% { opacity: 1; }
  22% { opacity: .12; }
  46% { opacity: .95; }
  70% { opacity: .28; }
}
@keyframes shimmer {
  0%, 100% { opacity: 1; }
  30% { opacity: .22; }
  60% { opacity: .9; }
  80% { opacity: .4; }
}

/* ---------- desktop, but not wide enough for the four-across board.
   The night and the page stay; the columns re-stack. 1024 device px is where
   .stage gets the 1280 layout units the four-across row needs. ---------- */
@media (min-width: 820px) and (max-width: 1023px) {
  .board { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  #col-today { grid-column: 1 / -1; order: 1; }
  #col-yesterday { order: 2; width: auto; }
  #col-tomorrow { order: 3; width: auto; }
  .rail { grid-column: 1 / -1; order: 4; width: auto; margin: 0; transform: rotate(0.5deg); }
  .rail .rail-tasks { flex-direction: row; flex-wrap: wrap; }
  .rail .wcard { flex: 1 1 190px; }
}

/* ---------- mobile (<820px): the night is desktop-only for now (§3.10).
   Keep the v0 stacked layout on cream, flat — no wobble, no décor. ---------- */
@media (max-width: 819px) {
  body { background: #f7f2e9; }
  .stage { min-height: 0; }
  .night, .sweeps, .strays, .autumn, .page-paper, .marks, .mask, .brand-blob { display: none; }
  .page { margin: 0; transform: none; min-height: 0; }
  .page-inner {
    padding: max(10px, env(safe-area-inset-top)) 12px calc(20px + env(safe-area-inset-bottom));
    max-width: 720px; margin: 0 auto;
  }
  .wpaper, .qa-paper, .panel-paper, .rail-paper, .ideas-frame, .ip-paper { filter: none; }

  .topbar { gap: 8px 14px; margin-bottom: 12px; }
  .brand { font-size: 19px; }
  .legend { order: 3; width: 100%; }
  .quickadd { gap: 10px; margin-bottom: 16px; }
  .qa-field { transform: none; }
  /* no room for a stamp hanging off the paper on a phone — sit it on the field */
  /* centre with flex, NOT transform: a transformed ancestor becomes the
     containing block for position:fixed, which pinned the calendar to the
     stamp instead of the viewport and ran it 97px off the screen */
  .stamp-anchor { top: 0; bottom: 0; right: 8px; display: flex; align-items: center; }
  .stamp { transform: rotate(4deg); }
  .stamp:active { transform: rotate(4deg) scale(.96); }
  .stamp.detached { transform: rotate(11deg) translate(4px, -3px); }
  .segmented { transform: none; }
  .segmented .seg { padding: 9px 15px; font-size: 12.5px; }

  .board { display: grid; grid-template-columns: 1fr; gap: 10px; }
  #col-today { order: 1; transform: none; }
  .rail { order: 2; width: auto; margin: 0; transform: none; }
  #col-tomorrow { order: 3; width: auto; transform: none; }
  #col-yesterday { order: 4; width: auto; transform: none; }
  .today-inner { padding: 12px 12px 14px; }
  .today-title { margin-left: 0; min-height: 0; }
  .today-head { margin-left: 0; font-size: 22px; }
  .ideas { padding: 44px 12px 14px; min-height: 0; }
  .ideas-label { transform: none; }
  .idea-pill { transform: none !important; }
  .graveyard { padding: 12px 12px 14px; }
  .stone { transform: none !important; clip-path: none !important; border-radius: 8px; max-width: none; }
}