/* span — design foundation.
   Neutral-grey paper, Lato at hiccup-style sizes/weights (bold headings,
   black display), quiet and editorial. Activities carry deep-ink accent
   colors (11 muted hues + neutral grey); error red stays reserved.
   Dark theme follows replicant.fun/hiccup: soft blue-grey, not black.
   /styleguide is the living reference for everything in here. */

/* Lato has no CJK glyphs: Japanese and Chinese ride Noto Sans (JP/SC),
   applied by the page language below. Offline these fall back to system
   fonts, same as any external font. Lato itself stays vendored. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+SC:wght@100..900&display=swap');

/* The app font is the user's pick (Settings → Appearance → Font): Geist by
   default. Variable fonts, Latin subset; CJK pages lead with Noto. */
@font-face { font-family: "Geist"; src: url("/assets/geist-variable-90ac0fe7.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/inter-variable-1f021a24.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/space-grotesk-variable-3b2bde23.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/jetbrains-mono-variable-7c88d0cc.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face {
  font-family: "Lato";
  src: url("/assets/lato-light-93430320.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/assets/lato-regular-ed5505fb.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/assets/lato-bold-3cf28fc1.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/assets/lato-black-540da9ba.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

:root {
  /* Neutral paper + pure ink (light) */
  --paper: rgb(242, 242, 242);
  --ink: rgb(0, 0, 0);
  --ink-rgb: 0, 0, 0;

  --error: rgb(196, 43, 28);

  /* Activity palette — 11 hues + slate, tuned with the dataviz validator:
     the green/orange/coral/lime/amber family steps apart in lightness so
     they stay distinct under red-green colour blindness. Activity.tint
     indexes into these (0..11); dark-mode steps live in the dark blocks. */
  --activity-0: #04672D;  /* green */
  --activity-1: #098585;  /* teal */
  --activity-2: #0267C7;  /* azure */
  --activity-3: #5031A1;  /* violet */
  --activity-4: #BC70C8;  /* orchid */
  --activity-5: #B7376E;  /* rose */
  --activity-6: #E06351;  /* coral */
  --activity-7: #B56203;  /* orange */
  --activity-8: #E6B731;  /* amber */
  --activity-9: #94B32A;  /* lime */
  --activity-10: #024E47; /* pine */
  --activity-11: #6B7583; /* slate */

  /* Heatmap ramp — the user's year-map colour (green by default; see
     "Year map colour" below) at rising strength; level 0 is faint ink */
  --heat-rgb: 33, 177, 76;
  --mood-1: #23509a;
  --mood-2: #4f7dc6;
  --mood-3: #7ea2dc;
  --mood-4: #a19e96;
  --mood-5: #e0974a;
  --mood-6: #c46e1f;
  --mood-7: #94470c;
  --heat-0: rgba(var(--ink-rgb), 0.06);
  --heat-1: rgba(var(--heat-rgb), 0.18);
  --heat-2: rgba(var(--heat-rgb), 0.40);
  --heat-3: rgba(var(--heat-rgb), 0.68);
  --heat-4: rgba(var(--heat-rgb), 1);

  --subtle: rgba(var(--ink-rgb), 0.55);
  --hairline: rgba(var(--ink-rgb), 0.16);
  --surface: rgba(var(--ink-rgb), 0.05);
  /* Form-control boundary: stronger than the decorative hairline so inputs
     clear WCAG 1.4.11's 3:1 (adapts per theme via --ink-rgb). */
  --field-border: rgba(var(--ink-rgb), 0.44);
  /* Legible green for the "username available" hint (activity-0 as text is
     only 2.5:1 on paper). Dark theme's brighter green already passes. */
  --ok-text: #0F7A32;

  /* Spacing scale */
  --space-1: 0.2rem;
  --space-2: 0.4rem;
  --space-3: 0.8rem;
  --space-4: 1.2rem;
  --space-5: 1.6rem;
  --space-6: 2.4rem;
  --space-7: 3.2rem;
  --space-8: 4.8rem;
  --space-9: 6.4rem;

  /* Type scale — hiccup's ladder (12/14/16/20/24/30/48) on the 62.5% root */
  --text-tiny: 1.2rem;
  --text-small: 1.4rem;
  --text-body: 1.6rem;
  --text-large: 2rem;
  --text-heading: 2.4rem;
  --text-title: 3rem;
  --text-display: 4.8rem;
  --text-figure: 5.6rem;

  --radius: 0.2rem;
  --measure: 64rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* hiccup's dark: soft blue-grey paper, whitish ink */
    --paper: rgb(28, 28, 31);
    --ink: rgb(235, 236, 240);
    --ink-rgb: 235, 236, 240;
    --error: rgb(232, 90, 74);
    --activity-0: #218A45;
    --activity-1: #36BABA;
    --activity-2: #3186E9;
    --activity-3: #735ACC;
    --activity-4: #E495F0;
    --activity-5: #D25186;
    --activity-6: #FF806D;
    --activity-7: #D4771A;
    --activity-8: #FACA4B;
    --activity-9: #8EAD20;
    --activity-10: #00736A;
    --activity-11: #828D9C;
    --heat-rgb: 55, 199, 103;
    --mood-1: #8db3f2;
    --mood-2: #5583cc;
    --mood-3: #36598f;
    --mood-4: #5e6064;
    --mood-5: #7f5226;
    --mood-6: #c4782c;
    --mood-7: #f5a650;
    --ok-text: #37C767; /* dark theme's brighter green passes on dark paper */
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --paper: rgb(242, 242, 242);
  --ink: rgb(0, 0, 0);
  --ink-rgb: 0, 0, 0;
  --error: rgb(196, 43, 28);
  --activity-0: #04672D;
  --activity-1: #098585;
  --activity-2: #0267C7;
  --activity-3: #5031A1;
  --activity-4: #BC70C8;
  --activity-5: #B7376E;
  --activity-6: #E06351;
  --activity-7: #B56203;
  --activity-8: #E6B731;
  --activity-9: #94B32A;
  --activity-10: #024E47;
  --activity-11: #6B7583;
  --heat-rgb: 33, 177, 76;
  --mood-1: #23509a;
  --mood-2: #4f7dc6;
  --mood-3: #7ea2dc;
  --mood-4: #a19e96;
  --mood-5: #e0974a;
  --mood-6: #c46e1f;
  --mood-7: #94470c;
  --ok-text: #0F7A32;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: rgb(28, 28, 31);
  --ink: rgb(235, 236, 240);
  --ink-rgb: 235, 236, 240;
  --error: rgb(232, 90, 74);
  --activity-0: #218A45;
  --activity-1: #36BABA;
  --activity-2: #3186E9;
  --activity-3: #735ACC;
  --activity-4: #E495F0;
  --activity-5: #D25186;
  --activity-6: #FF806D;
  --activity-7: #D4771A;
  --activity-8: #FACA4B;
  --activity-9: #8EAD20;
  --activity-10: #00736A;
  --activity-11: #828D9C;
  --heat-rgb: 55, 199, 103;
  --mood-1: #8db3f2;
  --mood-2: #5583cc;
  --mood-3: #36598f;
  --mood-4: #5e6064;
  --mood-5: #7f5226;
  --mood-6: #c4782c;
  --mood-7: #f5a650;
  --ok-text: #37C767; /* dark theme's brighter green passes on dark paper */
}

/* ---- Base ---------------------------------------------------------- */

html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  /* A liquid feel: in-page jumps glide, and the page doesn't chain its
     scroll to whatever is behind it (no rubber-band bleed to the browser). */
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
}
/* Honour reduced-motion: no glide for those who ask for stillness — which
   also keeps the automated browser's scroll instant, so it doesn't race. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Phone-first sizes read small on big screens: scale the root and the
   whole rem-based rhythm (type, spacing, tiles) zooms coherently. */
@media (min-width: 880px) {
  html { font-size: 70%; }
}
@media (min-width: 1400px) {
  html { font-size: 75%; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* The signed-out landing: hero and a still-life of the home screen, with
   scribbble-style color accents (the only place span allows itself vivid
   ink). Phone-first; from 880px the hero goes two-column. */
:root {
  --scribble-coral: #FF6B4A;
  --scribble-amber: #FFB020;
  --scribble-azure: #3E8DF9;
}
.wrap--wide { max-width: 78rem; }
/* Shared by every signed-out page (landing, /why, auth) via
   shared/_public_header. */
.public-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0 var(--space-8);
}
.public-header__nav { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-small); }
.landing__hero-grid { display: grid; gap: var(--space-8); }
.landing__hero { position: relative; }
/* h1-qualified: .display (a later rule, same specificity) zeroes margins,
   and the scribble underline needs the room below. */
h1.landing__headline { position: relative; display: inline-block; margin-bottom: var(--space-7); }
.landing__sub { max-width: 34ch; }
.landing__cta-row { position: relative; display: inline-block; margin: 0; }
.landing__note { font-size: var(--text-small); margin-top: var(--space-3); }
.landing__scribble { position: absolute; pointer-events: none; }
.landing__scribble--underline { width: 12rem; left: 0; bottom: -1.1rem; }
.landing__scribble--spark { width: 2rem; right: -1.5rem; top: -1.1rem; }
/* #85 is a near-square hand loop; preserveAspectRatio:none lets it flatten
   into a wide ellipse that lassos the clock. z-index:-1 keeps it behind the
   digits so the brush ring never covers them. */
.landing__scribble--circle { width: 12rem; height: 5.2rem; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; }
/* #50's arrowhead points up-right; rotate it so the head dives down at the
   circled time from the top-left. */
.landing__scribble--arrow { width: 5.5rem; top: -2.2rem; left: 1.5rem; transform: rotate(68deg); }
.landing__mockwrap { position: relative; margin: var(--space-6) 0; }
.landing__mock {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-6);
}
/* z-index:0 makes this a stacking context so the circle scribble (z-index:-1)
   sits behind the digits instead of painting over them. */
.landing__clock { font-weight: 900; font-size: var(--text-title); margin: 0; position: relative; display: inline-block; z-index: 0; }
.landing__label { font-size: var(--text-small); margin: 0 0 var(--space-4); }
.landing__tiles { display: flex; gap: var(--space-4); margin-bottom: var(--space-4); }
.landing__tiles .tile__circ { width: 3rem; height: 3rem; }
.landing__heat { display: flex; gap: 3px; --heat-cell: 1.2rem; }
.landing__features {
  display: flex;
  gap: var(--space-6);
  margin: var(--space-9) 0;
}
.landing__features > div { flex: 1; }
.landing__illustration { display: inline-block; width: 4.4rem; }
.landing__illustration svg { width: 100%; height: auto; }
.landing__features h3 { font-size: var(--text-body); margin: var(--space-2) 0; }
.landing__features p { font-size: var(--text-small); }
.landing__foot { text-align: center; margin: var(--space-9) 0; }
.landing__foot .subtle { font-size: var(--text-small); margin-top: var(--space-4); }
@media (min-width: 880px) {
  .landing__hero-grid {
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: var(--space-9);
    min-height: 24rem;
  }
  h1.landing__headline { font-size: 3.6rem; line-height: 1.12; max-width: 16ch; }
  .landing__mockwrap { margin: 0; }
}
@media (max-width: 540px) {
  .landing__features { flex-direction: column; }
  .landing__scribble--spark { right: -1.3rem; }
}

/* The studio's quiet signature at the bottom of every page. */
.site-footer {
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.site-footer .subtle { font-size: var(--text-tiny); margin: 0; }
.site-footer__landmark {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  vertical-align: -0.3rem;
}
/* One quiet links row under the studio mark; the landing adds its
   illustration credit here, middot-separated only when present. */
.site-footer .site-footer__links {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.site-footer__links > * + *::before { content: "·"; margin-right: var(--space-2); }
.site-footer__credit { opacity: 0.7; }

/* /why — the maker's essay. It borrows the public chrome (public-header,
   landing__foot) and reads as one quiet column. */
.why__essay { max-width: 62ch; margin: 0 auto; }
/* h1-qualified: .display (a later rule, same specificity) zeroes margins. */
h1.why__headline { position: relative; display: inline-block; margin-bottom: var(--space-7); }
.why__essay p { margin: 0 0 var(--space-5); }
.why__scribble { position: absolute; pointer-events: none; }
.why__scribble--underline { width: 12rem; left: 0; bottom: -1.1rem; }
.why__squares {
  display: inline-flex;
  gap: 3px;
  margin-left: var(--space-1);
  vertical-align: baseline;
  --heat-cell: 0.85rem;
}
.why__signed { margin-top: var(--space-7); }
.why__reading { max-width: 62ch; margin: var(--space-9) auto; }
.why__reading h2 { font-size: var(--text-body); margin: 0 0 var(--space-3); }
.why__reading-list { list-style: none; padding: 0; margin: 0; font-size: var(--text-small); }
.why__reading-list li { margin-bottom: var(--space-2); }

/* /pricing — the values first, the numbers second. Sibling of /why:
   same public chrome, same quiet column, plus two hairline tier cards. */
.pricing__lead { max-width: 62ch; margin: 0 auto; }
/* h1-qualified: .display (a later rule, same specificity) zeroes margins. */
h1.pricing__headline { position: relative; display: inline-block; margin-bottom: var(--space-7); }
.pricing__lead p { margin: 0 0 var(--space-5); }
.pricing__scribble { position: absolute; pointer-events: none; width: 12rem; left: 0; bottom: -1.1rem; }
.pricing__values { max-width: 62ch; margin: var(--space-7) auto; display: grid; gap: var(--space-5); }
.pricing__values h2 { font-size: var(--text-body); margin: 0 0 var(--space-1); }
.pricing__values p { margin: 0; font-size: var(--text-small); }
.pricing__support { max-width: 62ch; margin: var(--space-8) auto 0; }
.pricing__support > .btn { margin-top: var(--space-4); }
.pricing__tiers { max-width: 62ch; margin: var(--space-8) auto; display: grid; gap: var(--space-5); }
.pricing__tier {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.pricing__tier h2 { font-size: var(--text-heading); margin: 0 0 var(--space-2); }
.pricing__tier > .subtle { font-size: var(--text-small); margin: 0 0 var(--space-4); }
.pricing__price { font-size: var(--text-large); margin: 0 0 var(--space-2); }
.pricing__price-alt { font-size: var(--text-small); }
.pricing__soon {
  font-size: var(--text-tiny);
  vertical-align: middle;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.pricing__feats { list-style: none; padding: 0; margin: 0 0 var(--space-5); font-size: var(--text-small); }
.pricing__feats li { margin-bottom: var(--space-2); padding-left: var(--space-4); position: relative; }
/* the heatmap's filled square as the bullet — the product's own mark */
.pricing__feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 2px;
  background: var(--scribble-amber);
}
.pricing__interest { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pricing__interest .field { flex: 1; min-width: 12rem; margin: 0; }
.pricing__note { font-size: var(--text-tiny); margin: var(--space-3) 0 0; }
@media (min-width: 880px) {
  .pricing__values { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-7); }
  .pricing__tiers { max-width: 76ch; grid-template-columns: 1fr 1fr; align-items: start; }
}

/* /donate — the coffee pitch. Sibling of /why and /pricing:
   same public chrome, same quiet column. */
.donate__lead { max-width: 62ch; margin: 0 auto; }

/* /privacy — the plain account of what span stores. Sibling of /why:
   same public chrome, same quiet column. English-only by design. */
.privacy__essay { max-width: 62ch; margin: 0 auto; }
/* h1-qualified: .display (a later rule, same specificity) zeroes margins. */
h1.privacy__headline { margin-bottom: var(--space-2); }
.privacy__essay h2 { font-size: var(--text-body); margin: var(--space-7) 0 var(--space-3); }
.privacy__essay p { margin: 0 0 var(--space-5); }
/* after the p rule and essay-qualified: outranks .privacy__essay p (0,1,1) */
.privacy__essay .privacy__updated { margin-bottom: var(--space-7); }
.privacy__essay ul { margin: 0 0 var(--space-5); padding-left: 1.2rem; }
.privacy__essay li { margin-bottom: var(--space-3); }

/* OAuth-first auth: stacked provider buttons, a quiet divider, the email
   form folded behind a disclosure. */
.oauth { display: flex; flex-direction: column; gap: var(--space-3); max-width: 24rem; }
.oauth__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
  cursor: pointer;
}
.oauth__btn:hover { border-color: var(--ink); }
.oauth__logo { width: 1.8rem; height: 1.8rem; flex: none; }
.oauth__or { font-size: var(--text-small); margin: var(--space-4) 0; }
.oauth-email summary {
  cursor: pointer;
  font-size: var(--text-small);
  text-decoration: underline;
  list-style: none;
}
.oauth-email summary::-webkit-details-marker { display: none; }
.oauth-email[open] summary { margin-bottom: var(--space-4); }

/* Auth pages: the tagline sits close under the heading; the motif is a
   quiet row of activity-ink dots echoing the tile grid. */
.auth-tagline { margin-top: calc(-1 * var(--space-4)); }
.auth-motif {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.auth-motif span { width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.auth-motif span:nth-child(1) { background: var(--activity-0); }
.auth-motif span:nth-child(2) { background: var(--activity-2); }
.auth-motif span:nth-child(3) { background: var(--activity-5); }
.auth-motif span:nth-child(4) { background: var(--activity-7); }
.auth-motif span:nth-child(5) { background: var(--activity-9); }
.auth-motif span:nth-child(6) { background: var(--activity-3); }

/* Onboarding's suggestion chips toggle instead of submitting: hidden
   checkbox, picked state rings the chip like a selected tile. */
.onboarding-pick { cursor: pointer; }
.onboarding-pick input { position: absolute; opacity: 0; pointer-events: none; }
.onboarding-pick:has(input:checked) {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}

/* The language switcher: a flag that unfolds into flag+name rows.
   Signed out it sits alone in a right-aligned bar above the auth card. */
.locale-menu { position: relative; }
.locale-menu summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.locale-menu summary::-webkit-details-marker { display: none; }
.locale-menu__flag {
  width: 2rem;
  height: 1.5rem;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--hairline);
  display: block;
}
.locale-menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 10;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--space-2);
  min-width: 16rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.locale-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-small);
  text-align: left;
  cursor: pointer;
}
.locale-menu__item:hover { background: var(--surface); }
.locale-menu__item.is-current { font-weight: 700; }
.locale-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-4);
}

/* The notification bell dropdown: same details-menu shape as the locale
   picker, with a wider panel for the longer notification lines. */
.notif-menu { position: relative; }
.notif-menu summary { list-style: none; cursor: pointer; }
.notif-menu summary::-webkit-details-marker { display: none; }
.notif-menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 10;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--space-2);
  min-width: 20rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.notif-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--text-small);
  text-decoration: none;
}
.notif-menu__item:hover { background: var(--surface); }
.notif-menu__empty {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
}
.notif-menu__all {
  display: block;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--hairline);
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: 700;
  text-decoration: none;
}
.notif-menu__all:hover { background: var(--surface); }
.notif-menu__sep {
  font-size: var(--text-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--subtle);
  margin: var(--space-3) var(--space-1) var(--space-1);
}
.notif-menu__list .notif-question { margin-bottom: var(--space-2); }

/* Notifications: questions pin as amber-edged cards; the feed is a quiet,
   day-grouped log. Same classes serve the page and the bell panel. */
.notif-questions { list-style: none; margin: 0; padding: 0; }
.notif-question {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--scribble-amber);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.notif-question__line { margin: 0; }
.notif-question__meta { margin: var(--space-1) 0 0; font-size: var(--text-tiny); color: var(--subtle); }
.notif-question__actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.notif-question__actions form { margin: 0; }

.notif-day {
  font-size: var(--text-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--subtle);
  margin: 0 0 var(--space-2);
}
.notif-feed { list-style: none; margin: 0; padding: 0; }
.notif-feed__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-1);
  border-bottom: 1px solid var(--hairline);
}
.notif-feed > .notif-feed__row:last-child { border-bottom: none; }
.notif-feed__icon {
  flex: none;
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
}
.notif-feed__icon svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
.notif-feed__line { flex: 1; margin: 0; }
.notif-feed__when { flex: none; font-size: var(--text-tiny); color: var(--subtle); }

/* CJK pages lead with their Noto family; the app font still covers Latin
   glyphs and numerals inside them. */
:lang(ja) body {
  font-family: "Noto Sans JP", var(--font), ui-sans-serif, system-ui, sans-serif;
}
:lang(zh-CN) body {
  font-family: "Noto Sans SC", var(--font), ui-sans-serif, system-ui, sans-serif;
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-title); }
h2 { font-size: var(--text-heading); }
h3 { font-size: var(--text-large); }

p { margin: 0 0 var(--space-4); }

a {
  color: var(--ink);
  text-decoration: underline;
  /* Quiet faint-ink underline at rest; a:hover lifts it to full ink. */
  text-decoration-color: rgba(var(--ink-rgb), 0.26);
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-color: var(--ink); }

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--space-7) 0;
}

strong, b { font-weight: 700; }

::selection { background: rgba(var(--ink-rgb), 0.14); }

/* Keyboard focus is always visible, on both themes; mouse stays quiet. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Layout -------------------------------------------------------- */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-5) var(--space-5) var(--space-9);
}

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) 0 var(--space-7);
}

.site-header__wordmark {
  font-weight: 900;
  font-size: var(--text-body);
  text-decoration: none;
}

/* Inline (not flex) so the link's baseline stays the text's — .site-header
   aligns wordmark and nav by baseline. The mark hangs off the text line,
   nudged to optically center on the lowercase x-height. */
.site-header__wordmark .logo-mark {
  vertical-align: -0.34em;
  margin-right: 7px;
}

.site-header nav {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  font-size: var(--text-small);
}

/* Primary nav links: text on desktop (icons hidden here); quiet by default,
   the current tab carries the ink. */
.site-header nav > a { display: inline-flex; align-items: center; color: var(--subtle); text-decoration: none; }
.site-header nav > a:hover { color: var(--ink); }
.site-header nav > a.is-current { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.site-header nav > a .icon { display: none; }

/* Hairline divider marking the boundary between the primary links and the
   bell + utilities cluster. */
.nav-divider {
  align-self: center;
  width: 1px;
  height: 1.1em;
  background: var(--hairline);
}

/* Phones: the primary links live in the bottom tab bar (layouts/_tabbar)
   and the header keeps status only — sync pill and bell. Language, theme
   and sign-out move to Settings. */
@media (max-width: 540px) {
  .site-header { align-items: center; padding-bottom: var(--space-5); }
  .site-header nav { align-items: center; gap: var(--space-4); }
  .site-header nav > a,
  .site-header nav > .nav-divider,
  .site-header nav > .locale-menu,
  .site-header nav > .theme-toggle,
  .site-header nav > form.button_to,
  .site-header nav > .cmdk { display: none; }
}

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-7); }

/* The board heading: name first, its activity mark trailing as an accent. */
.board-title .icon {
  width: 0.85em;
  height: 0.85em;
  margin-left: var(--space-3);
  vertical-align: -0.08em;
}

/* ---- Notification bell + badge -------------------------------------- */
.site-header__bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.site-header__bell .icon { width: 1.15em; height: 1.15em; }

.site-header__badge {
  position: absolute;
  top: -0.5em;
  right: -0.6em;
  min-width: 1.15em;
  padding: 0 0.3em;
  border-radius: 999px;
  background: var(--activity-6);
  color: var(--paper);
  font-size: 0.68em;
  line-height: 1.55;
  font-weight: 700;
  text-align: center;
}

.site-header__badge.is-empty { display: none; }

.site-header__badge.is-dot {
  width: 0.8rem;
  height: 0.8rem;
  min-width: 0; /* the base rule's 1.15em would stretch the dot into an ellipse */
  padding: 0;
  border-radius: 50%;
  background: var(--scribble-amber);
}

/* ---- Username search + accessibility hidden label ------------------- */
.search-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.search-row input[type="search"] { flex: 1; min-width: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.notification.is-unread .data-row__name { font-weight: 700; }

/* ---- Circle leaderboard --------------------------------------------- */
.leaderboard .stats__row.is-me .stats__name { font-weight: 700; }

.callout {
  padding: var(--space-4);
  border: 1px solid var(--ink);
  border-radius: var(--space-2);
}

/* ---- Type utilities ------------------------------------------------- */

.display {
  font-size: var(--text-display);
  font-weight: 900;
  line-height: 1.05;
  margin: 0;
}

.eyebrow, .label {
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
  margin: 0 0 var(--space-3);
}

.subtle { color: var(--subtle); }

.tnum {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ---- Figure — the signature element --------------------------------- */

.figure { display: flex; flex-direction: column; }

.figure__value {
  font-size: var(--text-figure);
  font-weight: 900;
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.figure--sm .figure__value { font-size: var(--text-display); }

.figure__value .unit {
  font-size: 0.45em;
  font-weight: 400;
  color: var(--subtle);
  margin-inline-start: 0.1em;
}

.figure__label {
  font-size: var(--text-small);
  color: var(--subtle);
  margin-top: var(--space-3);
}

.figure__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* ---- Focus veil — a quiet stage while a span runs -------------------- */

.focus-veil {
  position: fixed;
  inset: 0;
  z-index: 60; /* above the navbar (10) and the feedback fab (50) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-5);
  background: var(--paper); /* fallback when color-mix is unsupported */
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.focus-veil.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .focus-veil { transition: none; }
}

/* ---- Command menu ------------------------------------------------------ */

.command-menu {
  width: min(64rem, calc(100% - var(--space-5)));
  max-width: none;
  max-height: min(56rem, 76vh);
  margin: 12vh auto auto;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 1.2rem;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.command-menu[open] { animation: command-menu-in 120ms ease-out; }

@keyframes command-menu-in {
  from { opacity: 0; transform: translateY(-0.4rem) scale(0.98); }
}

.command-menu::backdrop {
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
  .command-menu[open] { animation: none; }
}

.command-menu__panel {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

.command-menu__search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--hairline);
}

.command-menu__search-icon { color: var(--subtle); }

.command-menu__crumb {
  flex: none;
  padding: var(--space-1) var(--space-3);
  border-radius: 0.6rem;
  background: var(--surface);
  font-size: var(--text-tiny);
  font-weight: 700;
  white-space: nowrap;
}

.command-menu__input {
  flex: 1;
  min-width: 0;
  min-height: 5.6rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-large);
}

.command-menu__input::placeholder { color: var(--subtle); }

.command-menu__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2) var(--space-3) var(--space-3);
  scroll-padding: var(--space-6) 0 var(--space-3);
}

.command-menu__section + .command-menu__section { margin-top: var(--space-2); }

.command-menu__group {
  margin: 0;
  padding: var(--space-3) var(--space-3) var(--space-2);
  font-size: var(--text-tiny);
  font-weight: 700;
  color: var(--subtle);
}

.command-menu__notice {
  margin: var(--space-2) var(--space-3) var(--space-3);
  font-size: var(--text-small);
  color: var(--subtle);
}

.command-menu__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 4rem;
  padding: 0 var(--space-3);
  border-radius: 0.8rem;
  color: var(--ink);
  font-size: var(--text-small);
  cursor: pointer;
  user-select: none;
}

.command-menu__row.is-active { background: var(--surface); }

.command-menu__row.is-active::before {
  content: "";
  position: absolute;
  inset: 0.8rem auto 0.8rem 0;
  width: 0.2rem;
  border-radius: 0.2rem;
  background: var(--ink);
}

.command-menu__icon {
  display: inline-flex;
  flex: none;
  color: var(--subtle);
}

.command-menu__row.is-active .command-menu__icon { color: var(--ink); }
.command-menu__icon .icon { width: 1.6rem; height: 1.6rem; vertical-align: 0; }

.command-menu__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-menu__label mark {
  background: none;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 0.3rem;
}

.command-menu__keys {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

.command-menu__keys kbd,
.command-menu__footer kbd {
  display: inline-flex;
  justify-content: center;
  min-width: 2rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: 0.4rem;
  background: var(--paper);
  color: var(--subtle);
  font: inherit;
  font-size: 1.1rem;
  line-height: 1.4;
}

.command-menu__then { font-size: 1.1rem; color: var(--subtle); }

.command-menu__row > .icon { width: 1.2rem; height: 1.2rem; color: var(--subtle); }

.command-menu__empty {
  margin: 0;
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--subtle);
  font-size: var(--text-small);
}

.command-menu__footer {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-tiny);
  color: var(--subtle);
}

.command-menu__footer span { display: inline-flex; align-items: center; gap: var(--space-2); }
.command-menu__footer [hidden] { display: none; }

@media (max-width: 540px) {
  .command-menu { margin-top: var(--space-5); max-height: 80vh; }
  .command-menu__keys,
  .command-menu__footer { display: none; }
}

/* ---- Tint bar — activity breakdown ---------------------------------- */

.tint-bar {
  display: flex;
  height: 1rem;
  border-radius: var(--radius);
  overflow: hidden;
  gap: 2px;
}

.tint-bar__seg { min-width: 2px; }

.tint-bar__seg.is-1, .data-row__swatch.is-1 { background: var(--activity-0); }
.tint-bar__seg.is-2, .data-row__swatch.is-2 { background: var(--activity-1); }
.tint-bar__seg.is-3, .data-row__swatch.is-3 { background: var(--activity-2); }
.tint-bar__seg.is-4, .data-row__swatch.is-4 { background: var(--activity-3); }
.tint-bar__seg.is-5, .data-row__swatch.is-5 { background: var(--activity-4); }
.tint-bar__seg.is-6, .data-row__swatch.is-6 { background: var(--activity-5); }
.tint-bar__seg.is-7, .data-row__swatch.is-7 { background: var(--activity-6); }
.tint-bar__seg.is-8, .data-row__swatch.is-8 { background: var(--activity-7); }
.tint-bar__seg.is-9, .data-row__swatch.is-9 { background: var(--activity-8); }
.tint-bar__seg.is-10, .data-row__swatch.is-10 { background: var(--activity-9); }
.tint-bar__seg.is-11, .data-row__swatch.is-11 { background: var(--activity-10); }
.tint-bar__seg.is-12, .data-row__swatch.is-12 { background: var(--activity-11); }

.activity-ink.is-1 { color: var(--activity-0); }
.activity-ink.is-2 { color: var(--activity-1); }
.activity-ink.is-3 { color: var(--activity-2); }
.activity-ink.is-4 { color: var(--activity-3); }
.activity-ink.is-5 { color: var(--activity-4); }
.activity-ink.is-6 { color: var(--activity-5); }
.activity-ink.is-7 { color: var(--activity-6); }
.activity-ink.is-8 { color: var(--activity-7); }
.activity-ink.is-9 { color: var(--activity-8); }
.activity-ink.is-10 { color: var(--activity-9); }
.activity-ink.is-11 { color: var(--activity-10); }
.activity-ink.is-12 { color: var(--activity-11); }

/* ---- Theme toggle ------------------------------------------------------ */

.theme-toggle {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--subtle);
  line-height: 1;
}
.theme-toggle:hover { color: var(--ink); }

/* Show the icon for the theme you'd switch to: moon in light, sun in dark.
   Doubled class keeps these ahead of the generic .icon display rule. */
.theme-toggle .icon.theme-toggle__sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon.theme-toggle__sun { display: inline-flex; }
  :root:not([data-theme="light"]) .theme-toggle .icon.theme-toggle__moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon.theme-toggle__sun { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle .icon.theme-toggle__moon { display: none; }

/* ---- Icons ------------------------------------------------------------ */

.icon {
  display: inline-flex;
  width: 1.8rem;
  height: 1.8rem;
  flex: none;
  vertical-align: -0.3rem;
}

.icon svg { width: 100%; height: 100%; }

.figure__label .icon { width: 1.4rem; height: 1.4rem; vertical-align: -0.2rem; }

/* ---- Avatars (vendored DiceBear thumbs, CC0) ------------------------ */
.avatar {
  display: inline-flex;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: 999px;
  overflow: hidden;
  vertical-align: -0.6rem;
}
.avatar svg { width: 100%; height: 100%; }

/* Row-leading avatar sits before a @username. */
.avatar--row { margin-right: var(--space-3); }

.avatar--lg { width: 5.6rem; height: 5.6rem; vertical-align: 0; }

/* Current face + Change, side by side. */
.avatar-trigger { display: flex; align-items: center; gap: var(--space-4); }

/* The shared turbo_confirm dialog: one quiet question, cancel first. */
.confirm-dialog {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-6);
  max-width: 30rem;
  width: calc(100% - var(--space-5));
}
.confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.confirm-dialog__message { margin: 0 0 var(--space-5); }
.confirm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* The face × color dialog, same paper as the feedback dialog. */
.avatar-dialog {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-6);
  max-width: 34rem;
  width: calc(100% - var(--space-5));
}
.avatar-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.avatar-dialog__title { margin: 0 0 var(--space-4); }
.avatar-dialog .label { margin: var(--space-5) 0 var(--space-3); }
.avatar-dialog .tint-picker { flex-wrap: wrap; }
.avatar-dialog > .btn { margin-top: var(--space-6); }

/* Same shape as the icon picker: hidden radios, ring on the pick. */
.avatar-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  max-width: 36rem;
}
.avatar-picker__option { cursor: pointer; }
.avatar-picker__option input { position: absolute; opacity: 0; }
.avatar-picker__option .avatar {
  width: 3.6rem;
  height: 3.6rem;
  vertical-align: 0;
}
.avatar-picker__option input:checked + .avatar {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
/* Dashed, so keyboard focus (which lands on the first radio the moment the
   dialog opens) doesn't read as a second checked face. */
.avatar-picker__option input:focus-visible + .avatar {
  outline: 2px dashed var(--subtle);
  outline-offset: 2px;
}

.icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  max-width: 32rem;
}

.icon-picker__option { cursor: pointer; }

.icon-picker__option input { position: absolute; opacity: 0; }

.icon-picker__option .icon {
  width: 2.4rem;
  height: 2.4rem;
  padding: var(--space-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--subtle);
}

.icon-picker__option input:checked + .icon {
  color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---- Heatmap — the year wall ----------------------------------------- */

.heatmap { --heat-cell: 1.1rem; }

.heatmap__scroll {
  overflow-x: auto;
  padding-bottom: var(--space-2);
  /* The wall pins to today (right edge); the oldest visible month clips at the
     left viewport edge. Fade that edge so the past recedes instead of hard-
     cutting a half-word — today's column stays crisp. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--space-6));
  mask-image: linear-gradient(to right, transparent 0, #000 var(--space-6));
}

.heatmap__months {
  display: grid;
  grid-template-columns: repeat(var(--weeks, 52), calc(var(--heat-cell) + 1px));
  font-size: var(--text-small);
  color: var(--subtle);
  margin-bottom: var(--space-2);
  width: max-content;
}

.heatmap__month { grid-row: 1; white-space: nowrap; }

.heatmap__grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, var(--heat-cell));
  grid-auto-columns: var(--heat-cell);
  gap: 1px;
  width: max-content;
}

.heatmap__cell { display: inline-block; width: var(--heat-cell); height: var(--heat-cell); }

.heatmap__cell.is-level-0 { background: var(--heat-0); }
.heatmap__cell.is-level-1 { background: var(--heat-1); }
.heatmap__cell.is-level-2 { background: var(--heat-2); }
.heatmap__cell.is-level-3 { background: var(--heat-3); }
.heatmap__cell.is-level-4 { background: var(--heat-4); }
.heatmap__cell.is-future { background: transparent; }

/* Filtered to one activity, the wall glows in that activity's ink. The
   ramp derives from currentColor (set by activity-ink is-N), mirroring the
   default alphas — no second palette to keep in sync, dark mode for free. */
.heatmap__filter { flex-wrap: wrap; }
.heatmap__filter .icon { width: 1.3rem; height: 1.3rem; vertical-align: -0.2rem; margin-right: var(--space-1); }
/* Cells are links, and links carry their own ink — inherit the wall's. */
.is-tinted .heatmap__cell { color: inherit; }
.is-tinted .heatmap__cell.is-level-1 { background: color-mix(in srgb, currentColor 18%, transparent); }
.is-tinted .heatmap__cell.is-level-2 { background: color-mix(in srgb, currentColor 40%, transparent); }
.is-tinted .heatmap__cell.is-level-3 { background: color-mix(in srgb, currentColor 68%, transparent); }
.is-tinted .heatmap__cell.is-level-4 { background: currentColor; }

/* The quiet beat: stopping a span deepens today's square (color eases in)
   with one soft pulse. The square is the reward — nothing else performs. */
.heatmap__cell.is-today { transition: background-color 0.6s ease; }
.heatmap__cell.is-fed { animation: heat-fed 0.6s ease; }
@keyframes heat-fed {
  50% { transform: scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  .heatmap__cell.is-today { transition: none; }
  .heatmap__cell.is-fed { animation: none; }
}

.heatmap__legend {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-small);
  margin-top: var(--space-3);
}

.heatmap__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.heatmap__head .label { margin: 0; }
.heatmap__lens { flex: none; }

/* The mood wall: each day in its mood (--mood from .mood-N), a hairline
   ring for a day not yet logged, and faded days outside an activity filter. */
:is(.heatmap__grid, .heatmap__legend).is-mood .heatmap__cell { background: var(--mood, transparent); }
.heatmap__grid.is-mood .heatmap__cell.is-empty { box-shadow: inset 0 0 0 1px var(--hairline); }
.heatmap__grid.is-mood .heatmap__cell.is-future { box-shadow: none; }
.heatmap__grid.is-mood .heatmap__cell.is-dim { opacity: 0.2; }

/* ---- Data rows ------------------------------------------------------- */

.data-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--hairline);
}

/* The section <hr> already closes the list — no hairline on the last row */
.data-list > .data-row:last-child,
.data-list > .day-group:last-child > summary.data-row {
  border-bottom: 0;
}

.data-row__name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.data-row__swatch {
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius);
  flex: none;
}

.data-row__value {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Activity tiles — the Streaks-style grid -------------------------- */

.tile-grid__heading { margin-top: var(--space-4); }

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.6rem, 1fr));
  gap: var(--space-6) var(--space-3);
}

.tile-grid form.button_to { display: contents; }

.tile {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* long names must not widen the grid track */
  min-width: 0;
  max-width: 100%;
}

.tile__circ {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}
.tile:hover .tile__circ { border-color: currentColor; }

.tile__circ .icon { width: 2.4rem; height: 2.4rem; }

/* Daily-budget progress: a ring in the activity's ink around the circle,
   set clear of the circle's border and the selected/running shadows */
.tile__circ { position: relative; }
.tile__ring {
  position: absolute;
  top: -7px;
  left: -7px;
  /* Explicit box, not inset-stretching: Safari sizes an absolutely
     positioned SVG by its intrinsic rules otherwise and misaligns it.
     The arc's 12-o'clock start is an SVG transform for the same reason.
     7px keeps the ring just clear of the selected-state shadow. */
  width: calc(100% + 14px);
  height: calc(100% + 14px);
}
.tile__ring circle { fill: none; stroke-width: 3.5; }
.tile__ring-track { stroke: var(--hairline); }
.tile__ring-arc { stroke: currentColor; stroke-linecap: round; }

/* A running budgeted tile's live ring IS the running signal — the shadow
   ring underneath would collide with it. */
.tile__circ.is-running:has(.tile__ring) {
  box-shadow: none;
  border-color: var(--hairline);
}

/* Armed but not started: a solid ring, quieter than the running one */
.tile__circ.is-selected {
  border-color: currentColor;
  box-shadow: 0 0 0 1px currentColor;
}

.picker__name {
  font-weight: 700;
  align-self: center;
}

/* Idle arming renders the name span empty (the headline carries the name);
   an empty span is still a flex item, so without this the row's gap pushes
   Start off the hero's left alignment edge. */
.picker__name:empty { display: none; }

/* Invisible, not display:none — the reserved box keeps the layout still
   when the Start button appears, so a tap never lands on shifted tiles. */
.picker { visibility: hidden; }
.picker.is-armed { visibility: visible; }

/* Manual entry: a quiet dashed circle that navigates, starts nothing */
.tile__circ--add {
  border-style: dashed;
  color: var(--subtle);
}
.tile:hover .tile__circ--add { color: var(--ink); }

/* The running badge wears its activity's color as a ring */
.tile__circ.is-running {
  border-color: transparent;
  box-shadow: 0 0 0 3px currentColor;
}

.tile__name {
  font-weight: 700;
  font-size: var(--text-small);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile__time { font-size: var(--text-small); }

/* ---- Suggestions — one-tap template chips ------------------------------ */

.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.suggestions form.button_to { display: contents; }

.suggestion {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-small);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}
.suggestion:hover { border-color: var(--ink); }

.suggestion .icon { width: 1.6rem; height: 1.6rem; }

/* ---- Day groups — today's unique activities, expandable -------------- */

.day-group summary {
  cursor: pointer;
  list-style: none;
}
.day-group summary::-webkit-details-marker { display: none; }

/* a quiet unfold affordance */
.day-group summary .data-row__value::after {
  content: "+";
  color: var(--subtle);
  font-weight: 700;
}
.day-group[open] summary .data-row__value::after { content: "–"; }

.day-group__breakdown {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-3) var(--space-7);
}

.day-group__span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-2) 0;
  font-size: var(--text-small);
}

/* quiet backfill affordance: per-group "add" link */
.day-group__add {
  padding: var(--space-2) 0;
  font-size: var(--text-small);
}

.add-span {
  font-size: var(--text-small);
  margin: var(--space-3) 0 0;
}

/* linked cells navigate to their day */
a.heatmap__cell:hover { outline: 1px solid var(--ink); }

/* prev / today / next stepping on the day view */
.day-nav {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-small);
  /* pull back the links' own padding so the row still aligns left */
  margin: var(--space-2) 0 0 calc(-1 * var(--space-3));
}

/* Roomy hit areas without changing the layout's look. */
.day-nav a {
  padding: var(--space-3);
  display: inline-flex;
  align-items: center;
}

/* ---- Buttons --------------------------------------------------------- */

.btn {
  display: inline-block;
  appearance: none;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { opacity: 0.85; }

.btn--secondary {
  background: transparent;
  color: var(--ink);
}

.btn--tertiary {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}
.btn--tertiary:hover { border-color: var(--ink); opacity: 1; }

/* Semantic ghosts: color says what the action does to you. Green = you gain
   (join, accept, invite), red = you lose (leave, decline, remove, delete).
   Same anatomy as tertiary — the hue *is* the signal — with the border
   tinted at rest so the pair reads apart before hover. */
.btn--danger {
  background: transparent;
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 45%, transparent);
}
.btn--danger:hover { border-color: var(--error); opacity: 1; }

.btn--positive {
  background: transparent;
  color: var(--ok-text);
  border-color: color-mix(in srgb, var(--ok-text) 45%, transparent);
}
.btn--positive:hover { border-color: var(--ok-text); opacity: 1; }

/* Ko-fi support: an amber ghost in the semantic-button family. Warmth without
   shouting — a donation is an invitation, not a demand. */
.btn--kofi {
  background: transparent;
  color: var(--ink);
  border-color: color-mix(in srgb, var(--scribble-amber) 55%, transparent);
}
.btn--kofi:hover { border-color: var(--scribble-amber); opacity: 1; }
.btn--kofi .icon {
  color: var(--scribble-amber);
  vertical-align: -0.15em;
  margin-right: var(--space-2);
}

/* The breakdown's × is icon-only: give it a comfortable square target. */
.day-group__span .btn--danger {
  min-width: 4.4rem;
  min-height: 4.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: var(--text-body);
}

/* button_to wraps its button in a form */
form.button_to { display: inline; margin: 0; }

/* ---- Forms ----------------------------------------------------------- */

.field { margin: 0 0 var(--space-5); }

.field label,
.field__label {
  display: block;
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--subtle);
  margin-bottom: var(--space-2);
}

/* Every control kind shares one box: hairline, radius, 44px touch target. */
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="time"],
.field select,
.field textarea,
.search-row input[type="search"] {
  width: 100%;
  min-height: 4.4rem;
  box-sizing: border-box;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: inherit;
  padding: var(--space-2) var(--space-3);
}

/* Text-like inputs drop native chrome; selects keep their chevron and
   date/time inputs their pickers (color-scheme keeps those theme-true). */
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.search-row input[type="search"] {
  appearance: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.search-row input[type="search"]:focus {
  border-color: var(--ink);
}

.field input[type="checkbox"] {
  width: 2rem;
  height: 2rem;
  accent-color: var(--ink);
  vertical-align: -0.4rem;
  margin-right: var(--space-2);
}

/* Inline label for checkbox rows (block labels sit above their control) */
.field--check label { display: inline; }

/* Live username feedback on settings — tints the hint line. */
.subtle.is-ok  { color: var(--ok-text); }
.subtle.is-bad { color: var(--error); }

/* Rails wraps invalid fields; mark the control, don't disturb layout. */
.field_with_errors { display: contents; }
.field_with_errors input,
.field_with_errors select,
.field_with_errors textarea {
  border-color: var(--error);
}

.form-errors {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--error);
  border-radius: var(--radius);
  color: var(--error);
  font-size: var(--text-small);
}

/* Duration picker — preset chips over a backing minutes input. */
.duration-picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.chip {
  appearance: none;
  min-height: 4rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-small);
  cursor: pointer;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"],
.chip[aria-pressed="true"]:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* With JS the raw input only shows for Custom; without it, it stays put. */
.duration-picker--ready .duration-picker__input[hidden] { display: none; }

.tint-picker { display: flex; gap: var(--space-3); }

.tint-picker__option { cursor: pointer; }

.tint-picker__option input { position: absolute; opacity: 0; }

.tint-picker__option .data-row__swatch {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--hairline);
}

.tint-picker__option input:checked + .data-row__swatch {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---- Flash + auth ---------------------------------------------------- */

/* Notifications: a quiet card on the surface tint, marked by an accent rail
   on the leading edge (ink for a notice, error red for an alert, amber for a
   gentle nag) — legible without shouting. */
.flash {
  font-size: var(--text-small);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-inline-start: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-5);
}
.flash--alert {
  color: var(--error);
  border-inline-start-color: var(--error);
}
/* The email-confirmation nag: an amber rail, still quiet. The resend button is
   a plain inline link, not a heavy .btn — the banner shouldn't shout. */
.flash--nag {
  border-inline-start-color: var(--scribble-amber);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.flash--nag .flash__resend { display: inline; }
.flash--nag .flash__resend button,
.timezone__use {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
}
/* The detected-zone suggestion sits just under the select, quiet. */
.timezone__prompt { margin-top: var(--space-2); }

.auth {
  max-width: 36rem;
  margin: var(--space-9) auto 0;
}
.auth h1 { margin-bottom: var(--space-6); }
.auth .subtle { font-size: var(--text-small); margin-top: var(--space-6); }

/* Feedback: a floating button on every signed-in page opens an in-place
   dialog, so a bug can be reported without leaving the view. */
.feedback-fab {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.feedback-fab .icon { width: 2rem; height: 2rem; }
.feedback-dialog {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-6);
  max-width: 34rem;
  width: calc(100% - var(--space-5));
}
.feedback-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.feedback-dialog__title { margin: 0 0 var(--space-2); }
.feedback-dialog .subtle { margin: 0 0 var(--space-5); font-size: var(--text-small); }
.feedback-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Stats — a ranked activity-share bar chart. Colour follows the activity's
   tint (identity, never rank); every row is named and numbered so the chart
   never leans on colour alone. Text stays in ink; only the bar fill is tinted. */
.stats__periods { display: flex; gap: var(--space-4); font-size: var(--text-small); }
.stats__periods a { color: var(--subtle); text-decoration: none; }
.stats__periods a.is-current { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.stats__groups { margin-top: var(--space-2); }
.stats__total { font-size: var(--text-large); margin: 0; }
.stats__total .tnum { font-weight: 700; }
.stats__bars { list-style: none; padding: 0; margin: var(--space-5) 0 0; }
.stats__row { margin-bottom: var(--space-4); }
.stats__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.stats__name { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-small); }
.stats__name .icon { width: 1.6rem; height: 1.6rem; }
.stats__value { font-size: var(--text-small); }
/* Recessive track, tinted fill with a rounded data-end anchored to the start. */
.stats__track { height: 0.8rem; background: var(--surface); border-radius: 0.4rem; overflow: hidden; }
.stats__fill { height: 100%; border-radius: 0 0.4rem 0.4rem 0; min-width: 2px; }
.stats__fill--category { background: rgba(var(--ink-rgb), 0.55); }
.stats__bars--categories { margin-bottom: var(--space-6); }
.stats__empty { margin-top: var(--space-6); }

/* Integrations (dev, flag-gated): one card per provider. */
.integrations-page { max-width: 40rem; }
.integrations-page__head { margin-bottom: var(--space-6); }
.integrations-page__head h1 { margin: 0 0 var(--space-2); }

.integration-card { border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--space-6); }
.integration-card + .integration-card { margin-top: var(--space-6); }
.integration-card__brand { display: flex; align-items: flex-start; gap: var(--space-4); }
.integration-card__brand h2 { margin: 0 0 var(--space-2); font-size: var(--text-large); }
.integration-card__brand > div { flex: 1; }
.integration-card__brand .subtle { font-size: var(--text-small); }
.integration-card__logo { flex: none; display: inline-flex; width: 2.75rem; height: 2.75rem; }
/* Controls hang from the text's indent line, clearing the logo column. */
.integration-card__actions, .integration-card__link, .integration-card__change-key { margin-left: calc(2.75rem + var(--space-4)); }
.integration-card__change-key .integration-card__link { margin-left: 0; }
.integration-card__logo svg { width: 100%; height: 100%; }
.integration-card__logo--wakatime { color: var(--ink); }
.integration-card__synced { font-size: var(--text-tiny); display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0 calc(2.75rem + var(--space-4)); }
.integration-card__actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.integration-card__link { margin-top: var(--space-5); }
.integration-card__hint { font-size: var(--text-tiny); margin-top: var(--space-2); }
.integration-card__change-key { margin-top: var(--space-3); font-size: var(--text-small); }
.integration-card__change-key summary { cursor: pointer; }
.integration-card__change-key .integration-card__link { margin-top: var(--space-3); }

.integrations-link { display: flex; align-items: center; gap: var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--space-4) var(--space-5); text-decoration: none; color: inherit; }
.integrations-link__logos { display: inline-flex; gap: var(--space-2); }
.integrations-link__logos .integration-card__logo { width: 1.5rem; height: 1.5rem; }
.integrations-link__text { flex: 1; display: flex; flex-direction: column; }
.integrations-link__chevron { font-size: var(--text-heading); color: var(--subtle); }

/* Settings: grouped hairline cards, instant apply. Airy on purpose. */
.settings__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.settings-saved { font-size: var(--text-small); color: var(--subtle); opacity: 0; transition: opacity 0.25s ease; }
.settings-saved.is-showing { opacity: 1; }
.settings-saved.is-error { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .settings-saved { transition: none; } }

.settings-card { border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--space-5); }
.settings-card + .settings-card { margin-top: var(--space-6); }
.settings-card__title { margin: 0 0 var(--space-5); font-size: var(--text-heading); }
.settings-email { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-5); }
.settings-email__label { font-weight: 600; font-size: var(--text-small); }
.settings-card .field + .field, .settings-card .field + .field--check { margin-top: var(--space-5); }

.settings select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-3) center;
  padding-right: var(--space-7);
}

.segmented { display: flex; border: 1px solid var(--field-border); border-radius: var(--radius); overflow: hidden; }
.segmented__option { flex: 1; }
.segmented__option input { position: absolute; opacity: 0; pointer-events: none; }
.segmented__option span {
  display: block; text-align: center; padding: var(--space-3) var(--space-2);
  font-size: var(--text-small); cursor: pointer;
}
.segmented__option + .segmented__option span { border-left: 1px solid var(--field-border); }
.segmented__option:has(input:checked) span { background: var(--ink); color: var(--paper); }
.segmented__option:has(input:focus-visible) span { outline: 2px solid var(--ink); outline-offset: -2px; }

.settings-integrations { margin-top: var(--space-8); border-top: 1px solid var(--hairline); padding-top: var(--space-6); }

/* Section label with a plain underlined link on the right — the same link
   vocabulary as the nav items, so "manage" reads as clickable. */
.section-head { display: flex; align-items: center; gap: var(--space-3); }
/* Label hugs the left; the actions (switch, gear Manage) cluster right. */
.section-head > .label { margin-inline-end: auto; }

/* ---- Section-head controls: gear Manage, grouping switch, tooltip ---- */

.section-head__manage { display: inline-flex; color: var(--subtle); }
.section-head__manage:hover { color: var(--ink); }
.section-head__manage .icon { width: 2rem; height: 2rem; }

.switch {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--text-small); color: var(--subtle);
}
/* The class display beats the UA [hidden] rule; restore it so the server
   and client can hide the switch when grouping isn't meaningful. */
.switch[hidden] { display: none; }
.switch__track {
  position: relative; width: 2.4rem; height: 1.4rem;
  border-radius: 1rem; background: var(--surface);
  border: 1px solid var(--hairline); transition: background 0.15s ease;
}
.switch__thumb {
  position: absolute; top: 1px; inset-inline-start: 1px;
  width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--ink); transition: transform 0.15s ease;
}
.switch[aria-checked="true"] .switch__track { background: var(--ink); border-color: var(--ink); }
.switch[aria-checked="true"] .switch__thumb { transform: translateX(1rem); background: var(--paper); }

/* Hand-rolled tooltip in span's idiom (the "Pico-style" pattern, no Pico). */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; top: calc(100% + 4px); inset-inline-end: 0;
  background: var(--ink); color: var(--paper);
  font-size: var(--text-tiny); white-space: nowrap;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius);
  opacity: 0; pointer-events: none; transition: opacity 0.12s ease; z-index: 20;
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .switch__track, .switch__thumb, [data-tooltip]::after { transition: none; }
}
/* The add-activity ghost tile: a big quiet "+" fills the dashed circle. */
.tile__circ--add { font-size: 3.2rem; font-weight: 300; }

/* Sync indicator: a Pico-style spinner while running, a ✓/✗ once settled. */
.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid var(--hairline);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.8s; } }
.sync-mark { font-weight: 700; }
.sync-mark--ok { color: var(--activity-0); }   /* the app's green */
.sync-mark--failed { color: var(--error); }

/* ---- App shell: tab bar, now-bar, sync pill, toast --------------------- */

.tabbar { display: none; }

@media (max-width: 540px) {
  .wrap--app { padding-bottom: calc(var(--space-9) + 5.6rem + env(safe-area-inset-bottom)); }
  .has-now-dock .wrap--app { padding-bottom: calc(var(--space-9) + 12.4rem + env(safe-area-inset-bottom)); }
  .wrap--app .site-footer { display: none; }

  .tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

.tabbar__tabs {
  flex: 1;
  display: flex;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
}

.tabbar__search {
  flex: none;
  display: grid;
  place-items: center;
  width: 5.6rem;
  height: 5.6rem;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.tabbar__search .icon { width: 2.2rem; height: 2.2rem; }

.tabbar__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-height: 5.6rem;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--subtle);
  text-decoration: none;
}
.tabbar__tab .icon { width: 2.2rem; height: 2.2rem; }
.tabbar__tab.is-current { color: var(--ink); }

/* The running span, in reach. Its ink is the activity's (set inline). */
.now[hidden] { display: none; }
.now__link { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.now__ring { width: 3.4rem; height: 3.4rem; flex: none; }
.now__ring circle { fill: none; stroke-width: 3; }
.now__ring-track { stroke: var(--hairline); }
.now__ring-arc { stroke: currentColor; stroke-linecap: round; }
.now__text { display: flex; flex-direction: column; min-width: 0; color: var(--ink); }
.now__clock { font-weight: 900; font-size: var(--text-large); line-height: 1.1; }
.now__label { font-size: var(--text-tiny); color: var(--subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.now--chip {
  display: inline-flex;
  align-items: center;
  align-self: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
}
.now--chip .now__ring { width: 2rem; height: 2rem; }
.now--chip .now__text { flex-direction: row; align-items: baseline; gap: var(--space-2); }
.now--chip .now__clock { font-size: var(--text-small); }
@media (max-width: 540px) { .now--chip { display: none !important; } }

.now--dock { display: none; }
@media (max-width: 540px) {
  .now--dock {
    position: fixed;
    z-index: 19;
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(5.6rem + env(safe-area-inset-bottom) + var(--space-3));
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    background: var(--ink);
    border-radius: var(--radius);
  }
  .now--dock[hidden] { display: none; }
  .now--dock .now__text { color: var(--paper); }
  .now--dock .now__label { color: color-mix(in srgb, var(--paper) 70%, transparent); }
  .now--dock .now__ring-track { stroke: color-mix(in srgb, var(--paper) 22%, transparent); }
}
.now__actions { display: flex; gap: var(--space-2); flex: none; }
.now__btn {
  appearance: none;
  width: 4.4rem;
  height: 4.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--paper) 40%, transparent);
  border-radius: var(--radius);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
}
.now__btn svg { width: 1.8rem; height: 1.8rem; fill: currentColor; }
.now__btn--primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
/* Paused: the left button resumes — a play triangle in place of the bars. */
.now__play, .now__btn.is-resume .now__bars { display: none; }
.now__btn.is-resume .now__play { display: inline; }

/* Sync pill: quiet when synced, amber when changes wait offline. */
.sync-pill { position: relative; align-self: center; }
.sync-pill summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 3.2rem;
  font-size: var(--text-tiny);
  font-weight: 700;
  color: var(--subtle);
  white-space: nowrap;
}
.sync-pill summary::-webkit-details-marker { display: none; }
.sync-pill__dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--activity-0); }
.sync-pill[data-mode="syncing"] .sync-pill__dot { background: var(--activity-2); }
.sync-pill[data-mode="offline"] summary {
  color: var(--activity-8);
  border: 1px solid currentColor;
  border-radius: 1.6rem;
  padding: 0 var(--space-3);
  background: color-mix(in srgb, var(--activity-8) 12%, transparent);
}
.sync-pill[data-mode="offline"] .sync-pill__dot { background: currentColor; }
.sync-pill__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 30;
  width: min(30rem, calc(100vw - 3.2rem));
  padding: var(--space-4);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 0.8rem 2.4rem rgba(var(--ink-rgb), 0.12);
}
.sync-pill__title { margin: 0 0 var(--space-3); font-weight: 700; font-size: var(--text-small); }
.sync-pill__list { list-style: none; margin: 0; padding: 0; font-size: var(--text-small); }
.sync-pill__list li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; }
.sync-pill__list li + li { border-top: 1px solid var(--hairline); }
.sync-pill__list li > span:first-child { min-width: 0; overflow-wrap: anywhere; }

.toast {
  position: fixed;
  z-index: 40;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  max-width: min(48rem, calc(100vw - 3.2rem));
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  font-size: var(--text-small);
}
.toast[hidden] { display: none; }
@media (max-width: 540px) { .wrap--app .toast { bottom: calc(5.6rem + env(safe-area-inset-bottom) + var(--space-3)); } }

/* Header command button: the palette, findable without knowing ⌘K. */
.cmdk {
  appearance: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 3.2rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: transparent;
  font: inherit;
  font-size: var(--text-tiny);
  color: var(--subtle);
  cursor: pointer;
}
.cmdk:hover { color: var(--ink); border-color: var(--ink); }
.cmdk kbd, .tile__key {
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--subtle);
}

/* ---- Home: hero dial and the two-column desktop ------------------------ */

.hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.home__hero .eyebrow { text-align: center; }
.hero__dial { position: relative; width: 24rem; height: 24rem; display: flex; align-items: center; justify-content: center; container-type: inline-size; }
.hero__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__ring circle { fill: none; stroke-width: 3; }
.hero__ring-track { stroke: var(--hairline); }
.hero__ring-arc { stroke: currentColor; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.hero.is-paused .hero__ring-arc { opacity: 0.45; }
.hero__figure { align-items: center; text-align: center; color: var(--ink); max-width: 18rem; }
/* One line inside the ring however long the clock gets: the face shrinks
   with its character count (--chars, set by home_controller) to fit the
   ring's inner width. */
.hero__figure .figure__value {
  font-size: min(var(--text-display), calc(68cqi / (var(--chars, 6) * 0.6)));
  white-space: nowrap;
}
.hero__figure .figure__label { margin-top: var(--space-2); }
.hero__budget { font-size: var(--text-tiny); color: var(--subtle); margin-top: var(--space-1); }
.hero__actions { width: 100%; margin-top: 0; }
.hero__actions .btn { flex: 1; min-height: 4.8rem; }
.hero__timer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--text-small); color: var(--subtle); }
.hero__timer-label { margin-inline-end: var(--space-1); font-weight: 700; }
.hero__timer-chip {
  min-height: 3.2rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: 1.6rem;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.hero__timer-chip:hover { border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .hero__ring-arc { transition: none; } }

/* Desktop hotkey badge on the tile's circle; the name stays just the name. */
.tile__key {
  display: none;
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  background: var(--paper);
  font-weight: 400;
}

.section-head__add { font-size: var(--text-small); font-weight: 700; color: var(--ink); text-decoration: none; }
.section-head__add:hover { text-decoration: underline; }

.home__col { display: flex; flex-direction: column; }
.home__col > * + * { margin-top: var(--space-7); }

@media (min-width: 880px) {
  .wrap--home { max-width: var(--app-frame); }
  .wrap--home .site-header,
  .wrap--home .site-footer { max-width: none; }

  .home {
    display: grid;
    grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
    column-gap: var(--space-9);
    align-items: start;
  }
  .home > * + * { margin-top: 0; }
  .home > .home__divider { display: none; }
  .home__col--now { grid-column: 1; }
  .home__col--day { grid-column: 2; }
  /* Today first, the year under it. */
  .home__col--day > .home__today { order: -1; margin-top: 0; }
  .home__col--day > .home__divider { order: -1; }
  .home__col--day > .heatmap { margin-top: var(--space-7); }
  .home__col--day > .home__divider { display: none; }

  .tile__key { display: inline-block; }
}

/* ---- Day shape: 24h strip, share bar, timeline, week strip --------------- */

.day-strip {
  --lane-h: 2.2rem;
  position: relative;
  height: calc(var(--lanes) * (var(--lane-h) + 0.4rem) + 2.2rem);
  margin-bottom: var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: rgba(var(--ink-rgb), 0.03);
}
.day-strip__seg {
  position: absolute;
  top: calc(0.4rem + var(--lane) * (var(--lane-h) + 0.4rem));
  height: var(--lane-h);
  min-width: 2px;
  border-radius: var(--radius);
  background: color-mix(in srgb, currentColor 30%, transparent);
}
.day-strip__seg.is-live { box-shadow: inset -2px 0 0 currentColor; }
.day-strip__now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.day-strip__tick { position: absolute; bottom: 0.3rem; padding-left: 0.4rem; font-size: 1.1rem; color: var(--subtle); font-variant-numeric: tabular-nums; }

.day-share {
  display: flex;
  height: 0.6rem;
  margin-top: var(--space-4);
  border-radius: 0.3rem;
  overflow: hidden;
  background: var(--surface);
}
.day-share__part { background: currentColor; min-width: 2px; }

.week-strip { display: flex; margin-top: var(--space-4); }
.week-strip__day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  font-size: var(--text-tiny);
  color: var(--subtle);
  text-decoration: none;
}
.week-strip__day b {
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: var(--text-body);
  color: var(--ink);
}
.week-strip__day.is-current { color: var(--ink); font-weight: 700; }
.week-strip__day.is-current b { background: var(--ink); color: var(--paper); }
.week-strip__day.is-future { opacity: 0.35; }
a.week-strip__day:hover b { background: var(--surface); }

.timeline {
  --gutter: 4.8rem;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline__hour {
  position: absolute;
  left: 0;
  right: 0;
  padding-right: var(--space-2);
  font-size: 1.1rem;
  color: var(--subtle);
  font-variant-numeric: tabular-nums;
  border-top: 1px solid rgba(var(--ink-rgb), 0.08);
  line-height: 1.6;
}
.timeline__block {
  position: absolute;
  left: calc(var(--gutter) + (100% - var(--gutter)) / var(--lanes) * var(--lane));
  width: calc((100% - var(--gutter)) / var(--lanes) - 0.4rem);
  box-sizing: border-box;
  padding: 0.3rem var(--space-3);
  border-radius: var(--radius);
  background: color-mix(in srgb, currentColor 20%, var(--paper));
  border-left: 3px solid currentColor;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  column-gap: var(--space-3);
  font-size: var(--text-tiny);
}
.timeline__block.is-live { border-bottom: 2px dashed currentColor; }
.timeline__name { font-weight: 700; color: var(--ink); }
.timeline__time { color: var(--subtle); }
.timeline__gap {
  position: absolute;
  left: var(--gutter);
  right: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
  box-sizing: border-box;
  overflow: hidden;
}
.timeline__gap a { font-size: var(--text-tiny); color: var(--subtle); white-space: nowrap; }
.timeline__gap a:hover { color: var(--ink); }
.day-timeline:empty { display: none; }

/* ---- Add-span sheet: a bottom sheet on phones, a dialog on desktop ----- */

.sheet {
  width: min(52rem, 100vw);
  max-width: 100vw;
  max-height: 92vh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 1.2rem 1.2rem 0 0;
  background: var(--paper);
  color: var(--ink);
  box-sizing: border-box;
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.4); }
@media (min-width: 541px) { .sheet { margin: auto; border-radius: var(--radius); } .sheet__grip { display: none; } }
.sheet__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
}
.sheet__grip { align-self: center; width: 4rem; height: 0.4rem; border-radius: 0.2rem; background: var(--hairline); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; }
.sheet__head h2 { margin: 0; font-size: var(--text-heading); font-weight: 900; }
.sheet__close {
  appearance: none;
  width: 4.4rem;
  height: 4.4rem;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.sheet__close svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sheet__group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.sheet__group legend { padding: 0; }
.sheet__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sheet__chip { position: relative; cursor: pointer; }
.sheet__chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sheet__chip-name {
  display: inline-flex;
  align-items: center;
  min-height: 4rem;
  padding: 0 var(--space-4) 0 3rem;
  border: 1px solid var(--hairline);
  border-radius: 2rem;
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--ink);
}
.sheet__chip-dot { position: absolute; left: 1.2rem; top: 50%; width: 1rem; height: 1rem; margin-top: -0.5rem; border-radius: 50%; background: currentColor; }
.sheet__chip input:checked ~ .sheet__chip-name { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.sheet__chip input:focus-visible ~ .sheet__chip-name { outline: 2px solid var(--ink); outline-offset: 2px; }
.sheet__when { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.sheet__field--date { grid-column: 1 / -1; }
.sheet__field { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-tiny); font-weight: 700; color: var(--subtle); }
.sheet__field input {
  min-height: 4.8rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-large);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sheet__quick { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sheet__quick-btn {
  appearance: none;
  min-height: 3.6rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-tiny);
  font-weight: 700;
  cursor: pointer;
}
.sheet__quick-btn.is-on { border-color: var(--ink); }
.sheet__hint { margin: 0; font-size: var(--text-tiny); }
.sheet__error { margin: 0; color: var(--error); font-size: var(--text-small); font-weight: 700; }
.sheet__error[hidden] { display: none; }
.sheet__note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border-radius: var(--radius);
  font-size: var(--text-tiny);
  color: var(--subtle);
}
.sheet__submit { min-height: 5.2rem; font-size: var(--text-body); }

/* ---- Day check-in: mood scale, sheet, prompt ------------------------------ */

.mood-1 { --mood: var(--mood-1); }
.mood-2 { --mood: var(--mood-2); }
.mood-3 { --mood: var(--mood-3); }
.mood-4 { --mood: var(--mood-4); }
.mood-5 { --mood: var(--mood-5); }
.mood-6 { --mood: var(--mood-6); }
.mood-7 { --mood: var(--mood-7); }

.mood-scale { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
.mood-scale__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-radius: 1.2rem;
  cursor: pointer;
}
.mood-scale__step input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mood-scale__swatch { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--mood); }
.mood-scale__name { font-size: 1.1rem; font-weight: 700; color: var(--subtle); text-align: center; line-height: 1.2; }
.mood-scale__step:has(input:checked) { background: var(--surface); }
.mood-scale__step:has(input:checked) .mood-scale__swatch { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.mood-scale__step:has(input:checked) .mood-scale__name { color: var(--ink); }
.mood-scale__step:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

.sheet__chip-name--plain { padding-left: var(--space-4); }
.check-in__more summary { cursor: pointer; }
.check-in__more[open] summary { margin-bottom: var(--space-3); }
.check-in__note {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: inherit;
  resize: vertical;
}
.check-in__actions { display: flex; align-items: center; gap: var(--space-3); }
.check-in__actions .sheet__submit { flex: 1; }
.check-in__actions [hidden] { display: none; }

.mood-prompt .label { margin: 0 0 var(--space-3); }
.mood-prompt--day { margin: 0 0 var(--space-5); }
.mood-prompt__row { display: flex; gap: var(--space-2); }
.mood-prompt__dot {
  flex: 1;
  max-width: 4.4rem;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mood);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.mood-prompt__dot:hover { transform: scale(1.08); }
.mood-prompt__dot:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mood-prompt__ends {
  display: flex;
  justify-content: space-between;
  max-width: calc(7 * 4.4rem + 6 * var(--space-2));
  margin-top: var(--space-2);
  font-size: var(--text-tiny);
}
.mood-prompt__logged {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.mood-prompt__swatch { flex: none; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--mood, var(--surface)); }
.mood-prompt__text { display: flex; flex-direction: column; }
.mood-prompt__line { font-weight: 700; }
.mood-prompt__text .subtle { font-size: var(--text-small); }

@media (prefers-reduced-motion: reduce) {
  .mood-prompt__dot { transition: none; }
}

/* ---- Stats: cards, ranked bars and columns (sync/stats_view) ------------ */

.stats__switches { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }
.stats__switches .stats__groups { margin-top: 0; }
.stats__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3); }
.stats__card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius); }
.stats__card .label { margin: 0; }
.stats__card-value { font-size: var(--text-title); font-weight: 900; line-height: 1.1; }
.stats__card-sub { font-size: var(--text-tiny); color: var(--subtle); }
.stats__card-sub.is-up { color: var(--ok-text); font-weight: 700; }
.stats__split { display: flex; flex-wrap: wrap; gap: var(--space-7); margin-top: var(--space-6); }
.stats__ranked { flex: 999 1 32rem; min-width: 0; }
.stats__columns-section { flex: 1 1 26rem; min-width: 0; }
.stats__dot { width: 1rem; height: 1rem; border-radius: 50%; background: currentColor; flex: none; }
.stats__columns { display: flex; align-items: flex-end; gap: var(--space-2); height: 18rem; margin-top: var(--space-5); }
.stats__columns.is-dense { gap: 2px; }
.stats__col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: var(--space-2); }
.stats__stack { display: flex; flex-direction: column-reverse; min-height: 2px; border-radius: 1px; overflow: hidden; background: var(--hairline); }
.stats__stack i { display: block; background: currentColor; flex-basis: 0; }
.stats__col.is-future .stats__stack { opacity: 0.4; }
.stats__col-label { min-height: 1.4rem; font-size: 1.1rem; color: var(--subtle); text-align: center; overflow: hidden; white-space: nowrap; }
.stats__col.is-current .stats__col-label { color: var(--ink); font-weight: 700; }
.stats__note { margin-top: var(--space-6); font-size: var(--text-tiny); }

.mood-stats__col { display: flex; flex-direction: column; gap: var(--space-6); }
.mood-stats__block .label { margin: 0 0 var(--space-3); }
.mood-stats__sub { margin: 0 0 var(--space-3); font-size: var(--text-tiny); }

.mood-mix { display: flex; gap: 2px; height: 1.6rem; }
.mood-mix__seg { min-width: 0.4rem; background: var(--mood); }
.mood-mix__seg:first-child { border-radius: 0.4rem 0 0 0.4rem; }
.mood-mix__seg:last-child { border-radius: 0 0.4rem 0.4rem 0; }
.mood-mix__seg:only-child { border-radius: 0.4rem; }
.mood-mix__legend { display: flex; justify-content: space-between; margin-top: var(--space-2); font-size: var(--text-small); color: var(--subtle); }
.mood-mix__legend b { color: var(--ink); }

.mood-deltas { list-style: none; margin: 0; padding: 0; }
.mood-deltas__row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(6rem, 1fr) minmax(4.4rem, max-content);
  align-items: center;
  gap: var(--space-3);
  min-height: 3.6rem;
  font-size: var(--text-small);
}
.mood-deltas__name { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mood-deltas__name .subtle { font-size: var(--text-tiny); }
.mood-deltas__track { position: relative; height: 1.2rem; }
.mood-deltas__track::before { content: ""; position: absolute; inset: -0.4rem auto -0.4rem 50%; width: 1px; background: var(--hairline); }
.mood-deltas__bar { position: absolute; top: 0; bottom: 0; width: var(--size); min-width: 2px; }
.mood-deltas__bar.is-up { left: 50%; background: var(--mood-6); border-radius: 0 0.4rem 0.4rem 0; }
.mood-deltas__bar.is-down { right: 50%; background: var(--mood-2); border-radius: 0.4rem 0 0 0.4rem; }
.mood-deltas__value { text-align: end; font-weight: 700; white-space: nowrap; }
.mood-deltas__value.subtle { font-weight: 400; font-size: var(--text-tiny); }

/* ---- Journal: the notes page and a day's notes --------------------------- */

.journal__search {
  width: 100%;
  box-sizing: border-box;
  min-height: 4.4rem;
  padding: 0 var(--space-4);
  border: 1px solid var(--field-border);
  border-radius: 2.2rem;
  background: transparent;
  color: var(--ink);
  font: inherit;
}
.journal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }
@media (max-width: 540px) { .journal { gap: var(--space-4); } }
.journal__date { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 900; color: var(--ink); text-decoration: none; }
.journal__date:hover { text-decoration: underline; }
.journal__mood { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--mood); }
.journal__note { margin: var(--space-2) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.journal__note mark, .journal__meta mark { background: color-mix(in srgb, var(--mood-5) 45%, transparent); color: inherit; border-radius: 0.2rem; }
.journal__span { margin-top: var(--space-4); }
.journal__meta { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-small); }
.journal__empty { margin: 0; }

.day-notes__day { margin-top: var(--space-3); }
.day-notes__edit {
  margin-top: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--subtle);
  font: inherit;
  font-size: var(--text-small);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.day-notes__edit:hover { color: var(--ink); }
.journal__span .day-notes__edit { display: block; }
.day-notes__more { margin-top: var(--space-4); }
.day-notes__more summary { list-style: none; }
.day-notes__more summary::-webkit-details-marker { display: none; }
.day-notes__picks { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.day-notes__pick {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: 2rem;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.day-notes__pick:hover { border-color: var(--ink); }
.span-note__meta { margin: 0; }
.journal__export { margin: 0; font-size: var(--text-small); }
.push-device { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.push-device__label { font-weight: 700; }
.push-device__status { flex: 1 1 100%; margin: 0; }


/* The feedback button rides above the tab bar (and the docked now-bar). */
@media (max-width: 540px) {
  .wrap--app .feedback-fab { bottom: calc(5.6rem + env(safe-area-inset-bottom) + var(--space-3)); }
  .has-now-dock .wrap--app .feedback-fab { bottom: calc(12.4rem + env(safe-area-inset-bottom) + var(--space-3)); }
}

/* Dense month columns: labels may overhang their narrow column. */
.stats__columns.is-dense .stats__col-label { overflow: visible; }

/* ---- Buttons, Cal.com-style ---------------------------------------------
   Soft depth rather than a chunky key: a 1px ring instead of a border, a
   faint highlight along the top edge, a small cast shadow, and a one-pixel
   press. Faces come from the palette (ink, paper) so both themes get it. */

.btn,
.now__btn,
.sheet__quick-btn,
.cmdk {
  --btn-radius: 0.8rem;
  --btn-ring: var(--ink);
  border: 0;
  border-radius: var(--btn-radius);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

/* Primary: an ink face, lit from above. */
.btn {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 86%, var(--paper)), var(--ink));
  color: var(--paper);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--paper) 22%, transparent),
    0 0 0 1px var(--btn-ring),
    0 1px 2px rgba(0, 0, 0, 0.16),
    0 2px 6px -1px rgba(0, 0, 0, 0.12);
}
.btn:hover {
  opacity: 1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 78%, var(--paper)), color-mix(in srgb, var(--ink) 92%, var(--paper)));
}

/* Secondary family: a lifted paper face, hairline ring, a whisper of shadow
   and an inner bottom edge. The variant's hue tints the ring and the text. */
.btn--secondary,
.btn--tertiary,
.btn--danger,
.btn--positive,
.btn--kofi,
.sheet__quick-btn,
.cmdk {
  --btn-ring: color-mix(in srgb, var(--ink) 16%, transparent);
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 70%, #fff);
  box-shadow:
    inset 0 -1px 0 rgba(var(--ink-rgb), 0.06),
    0 0 0 1px var(--btn-ring),
    0 1px 2px rgba(0, 0, 0, 0.06);
}
.btn--secondary:hover,
.btn--tertiary:hover,
.btn--danger:hover,
.btn--positive:hover,
.btn--kofi:hover,
.sheet__quick-btn:hover,
.cmdk:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--paper) 92%, var(--ink));
  --btn-ring: color-mix(in srgb, var(--ink) 28%, transparent);
}
.btn--secondary { --btn-ring: color-mix(in srgb, var(--ink) 30%, transparent); }
.btn--danger { --btn-ring: color-mix(in srgb, var(--error) 40%, transparent); color: var(--error); }
.btn--danger:hover { --btn-ring: var(--error); }
.btn--positive { --btn-ring: color-mix(in srgb, var(--ok-text) 40%, transparent); color: var(--ok-text); }
.btn--positive:hover { --btn-ring: var(--ok-text); }
.btn--kofi { --btn-ring: color-mix(in srgb, var(--scribble-amber) 55%, transparent); }
.sheet__quick-btn.is-on { --btn-ring: var(--ink); }

.btn:active,
.now__btn:active,
.sheet__quick-btn:active,
.cmdk:active { transform: translateY(1px); }
.btn:focus-visible,
.now__btn:focus-visible,
.sheet__quick-btn:focus-visible,
.cmdk:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Dark: the paper face lifts toward white a little less, the shadows deepen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.btn--secondary, .btn--tertiary, .btn--danger, .btn--positive, .btn--kofi, .sheet__quick-btn, .cmdk) {
    background: color-mix(in srgb, var(--paper) 88%, #fff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px var(--btn-ring), 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}
:root[data-theme="dark"] :is(.btn--secondary, .btn--tertiary, .btn--danger, .btn--positive, .btn--kofi, .sheet__quick-btn, .cmdk) {
  background: color-mix(in srgb, var(--paper) 88%, #fff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px var(--btn-ring), 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* The docked bar sits on ink: its keys invert. */
.now__btn {
  background: transparent;
  color: var(--paper);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper) 35%, transparent);
}
.now__btn--primary {
  background: linear-gradient(to bottom, var(--paper), color-mix(in srgb, var(--paper) 88%, var(--ink)));
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .btn, .now__btn, .sheet__quick-btn, .cmdk { transition: none; }
}
.cmdk { color: var(--subtle); }
.cmdk:hover { color: var(--ink); }

/* ==========================================================================
   Phone app (≤540px) — a native shell, not a narrow website.
   References (Mobbin): large left titles with a subtitle (Apple Health,
   Toggl Track), content on rounded white cards over the paper (Strava,
   Apple Fitness), a floating pill tab bar with a mini-player card above it
   (Matter, Tiimo), pill segmented controls (Apple Fitness), grouped lists
   for settings (XChat, Cosmos). Same palette and Lato as everywhere.
   ========================================================================== */

.page-head--home,
.settings__more { display: none; }

@media (max-width: 540px) {
  :root { --card: color-mix(in srgb, var(--paper) 30%, #fff); --card-radius: 1.8rem; --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --card: color-mix(in srgb, var(--paper) 88%, #fff); --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
  }
  :root[data-theme="dark"] { --card: color-mix(in srgb, var(--paper) 88%, #fff); --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }

  .wrap--app { padding: 0 var(--space-4) calc(17rem + env(safe-area-inset-bottom)); }
  .has-now-dock .wrap--app { padding-bottom: calc(24rem + env(safe-area-inset-bottom)); }
  .wrap--app .stack-lg > * + * { margin-top: var(--space-5); }

  /* ---- App bar: logo left, status right; the page title lives below. */
  .wrap--app .site-header {
    position: sticky;
    top: 0;
    z-index: 15;
    margin: 0 calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--paper) 85%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    backdrop-filter: saturate(1.6) blur(16px);
  }
  .wrap--app .site-header__wordmark { font-size: var(--text-large); }
  .wrap--app .flash { margin: var(--space-2) 0 var(--space-4); border-radius: 1.2rem; }
  .wrap--app .flash--nag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }

  /* ---- Large titles: every page's eyebrow becomes its title, the
     editorial h1 its subtitle. */
  .page-head--home { display: block; margin-top: var(--space-2); }
  /* Tab roots, whose h1 is a tagline: the eyebrow is the page's name. */
  .page-head__title,
  .page-head--tagline > .eyebrow,
  .settings__head .eyebrow,
  main > .stack-lg > section:has(> .week-strip) > .eyebrow {
    margin: var(--space-2) 0 0;
    font-size: 3.2rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--ink);
    line-height: 1.1;
  }
  .page-head__sub,
  .page-head--tagline > h1,
  .settings__head h1 {
    margin: var(--space-1) 0 0;
    font-size: var(--text-body);
    font-weight: 400;
    color: var(--subtle);
    line-height: 1.4;
  }

  main > .stack-lg > section:first-child:not(.page-head--tagline):has(> .eyebrow + h1) > .eyebrow {
    margin: var(--space-2) 0 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--text-small);
    color: var(--subtle);
  }
  main > .stack-lg > section:first-child:not(.page-head--tagline):has(> .eyebrow + h1) > h1 {
    margin: var(--space-1) 0 0;
    font-size: 3.2rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.1;
  }

  /* No sideways scroll, ever: anything wide scrolls inside its own box. */
  html, body { overflow-x: clip; }
  .tint-picker { flex-wrap: wrap; }
  /* The year card holds its content: chips wrap, the wall fits (the home
     controller draws only the weeks that fit), nothing scrolls sideways. */
  /* .heatmap qualifies these past the Stats segmented-control rule, which
     shares the stats__periods class and would force one unwrapping row. */
  .heatmap .heatmap__filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0;
    border-radius: 0;
    background: none;
  }
  .heatmap .heatmap__filter a {
    flex: none;
    padding: var(--space-2) var(--space-3);
    border-radius: 2rem;
    background: rgba(var(--ink-rgb), 0.06);
  }
  .heatmap .heatmap__filter a.is-current { background: var(--ink); color: var(--paper); box-shadow: none; }
  .home .heatmap__scroll { overflow-x: visible; -webkit-mask-image: none; mask-image: none; padding-bottom: 0; }
  /* A month's label may start in the last column; trim it at the wall's edge. */
  .home .heatmap__months { overflow: hidden; max-width: 100%; }
  .sync-pill__panel {
    position: fixed;
    top: 5.6rem;
    left: var(--space-4);
    right: var(--space-4);
    width: auto;
  }
  .segmented__option span { padding-inline: var(--space-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ---- Cards: the shared surface. */
  .home__hero,
  .home__col--now > section:not(.home__hero),
  .home__today,
  .home .heatmap,
  .home__week:not(:empty),
  .insights:not(:empty),
  .stats__card,
  .stats__ranked,
  .stats__columns-section,
  .stats__empty,
  .day-timeline:not(:empty),
  .day-journal,
  .journal__day,
  main > .stack-lg > section:has(> .week-strip) > .week-strip,
  .settings-card,
  .settings__more,
  .settings__sign-out,
  .settings-integrations,
  .wrap--app .data-list,
  .wrap--app .stats__switches ~ .stats__body > .stats__total {
    background: var(--card);
    border: 0;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-5);
  }
  .home .label,
  .stats__ranked .label,
  .stats__columns-section .label { text-transform: none; letter-spacing: 0; font-size: var(--text-body); color: var(--ink); margin-bottom: var(--space-4); }

  /* ---- Home: the now card. */
  .home__col > * + * { margin-top: var(--space-4); }
  .wrap--app .home > .home__col--day { margin-top: var(--space-4); }
  .home__col--day > .home__today { order: -1; }
  .home__col--day > .heatmap { margin-top: var(--space-4); }
  .home__hero > .eyebrow { display: none; }
  .home__hero .display { font-size: var(--text-title); line-height: 1.1; margin: 0; }
  .home__hero > .subtle { margin: var(--space-2) 0 0; }
  .hero { gap: var(--space-4); }
  .hero__dial { width: 21rem; height: 21rem; }
  .hero__actions .btn { min-height: 5rem; border-radius: 1.4rem; font-size: var(--text-body); }

  /* Arming a tile: Start rises as a bar above the tab bar instead of
     reserving a blank band in the card (and nothing under a thumb moves). */
  .home__hero .picker { display: none; }
  .home__hero .picker.is-armed {
    display: flex;
    position: fixed;
    z-index: 18;
    left: var(--space-4);
    right: var(--space-4);
    bottom: calc(8.4rem + env(safe-area-inset-bottom));
    margin: 0;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
    align-items: center;
    gap: var(--space-3);
    background: var(--card);
    border-radius: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
  }
  .home__hero .picker.is-armed .picker__name:empty { display: inline; }
  .home__hero .picker.is-armed .btn { margin-inline-start: auto; min-height: 4.4rem; padding: 0 var(--space-6); border-radius: 1.4rem; }
  .home__hero .picker.is-armed > a { font-size: var(--text-small); }

  /* Tiles: four to a row, tighter circles. */
  .tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5) var(--space-2); }
  .tile__circ { width: 5.6rem; height: 5.6rem; margin-bottom: var(--space-2); }
  .tile__circ .icon { width: 2.2rem; height: 2.2rem; }
  .tile__name { font-size: 1.3rem; }
  .tile__time { font-size: 1.2rem; }
  .section-head { margin-bottom: var(--space-4); }
  .section-head .label { margin: 0 auto 0 0; }

  /* Today: strip then an inset list. */
  .home__today .day-strip { margin-bottom: var(--space-3); border-radius: 1rem; border: 0; background: var(--surface); }
  .home__today .data-list { box-shadow: none; padding: 0; background: transparent; border-radius: 0; }
  .home__today .day-group { border: 0; }
  /* On a white card the paper's hairline reads heavy; halve it. */
  .wrap--app .data-row { padding: var(--space-4) 0; border-bottom-color: rgba(var(--ink-rgb), 0.08); }
  .settings-card .field + .field,
  .settings-card > * + .field { border-top-color: rgba(var(--ink-rgb), 0.08); }
  .home .heatmap__legend { margin-top: var(--space-3); }

  /* ---- Floating tab pill with a round search button beside it. */
  .tabbar {
    left: var(--space-4);
    right: var(--space-4);
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    padding: 0;
  }
  .tabbar__tabs,
  .tabbar__search {
    border: 0;
    background: color-mix(in srgb, var(--card) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(20px);
    backdrop-filter: saturate(1.6) blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(var(--ink-rgb), 0.06);
  }
  .tabbar__tabs { padding: var(--space-2); border-radius: 3.2rem; }
  .tabbar__search { width: 6rem; height: 6rem; border-radius: 50%; }
  .tabbar__search:active { transform: scale(0.96); }
  .tabbar__tab { min-height: 5.2rem; border-radius: 2.6rem; font-size: 1.1rem; }
  .tabbar__tab.is-current { background: rgba(var(--ink-rgb), 0.07); }

  /* ---- Mini-player: the running span as a floating card. */
  .now--dock {
    left: var(--space-4);
    right: var(--space-4);
    bottom: calc(8.4rem + env(safe-area-inset-bottom));
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    background: var(--card);
    border-radius: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(var(--ink-rgb), 0.05);
  }
  .now--dock .now__text { color: var(--ink); }
  .now--dock .now__label { color: var(--subtle); }
  .now--dock .now__ring-track { stroke: var(--hairline); }
  .now--dock .now__btn {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    box-shadow: none;
  }
  .now--dock .now__btn--primary { background: var(--ink); color: var(--paper); }

  .wrap--app .feedback-fab { display: none; }
  .wrap--app .toast { bottom: calc(8.4rem + env(safe-area-inset-bottom)); border-radius: 1.4rem; }

  /* ---- Day page. */
  main > .stack-lg > section:has(> .week-strip) .figure { margin-top: var(--space-3); }
  main > .stack-lg > section:has(> .week-strip) .figure__value { font-size: var(--text-display); }
  main > .stack-lg > section:has(> .week-strip) > .week-strip { padding: var(--space-3) var(--space-2); margin-top: var(--space-4); }
  .day-share { margin-top: var(--space-4); }
  .timeline__block { border-radius: 0.8rem; }
  /* Room for a short last span, whose minimum height runs past its hour. */
  .timeline { margin-bottom: var(--space-5); }
  /* Short spans keep one line: name, then the time trimmed to fit. */
  .timeline__block { flex-wrap: nowrap; align-items: baseline; white-space: nowrap; }
  .timeline__time { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

  /* Section labels read in sentence case on phones, like the card titles. */
  .wrap--app .label,
  .sheet .label {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--text-small);
    font-weight: 700;
  }

  /* ---- Stats: segmented controls, card grid. */
  .stats__switches { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .stats__periods {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.2rem;
    padding: 0.3rem;
    border-radius: 1.2rem;
    background: rgba(var(--ink-rgb), 0.07);
  }
  .stats__periods a {
    text-align: center;
    padding: var(--space-3) 0;
    border-radius: 0.9rem;
    font-weight: 700;
    text-decoration: none;
  }
  .stats__periods a.is-current { background: var(--card); color: var(--ink); text-decoration: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
  .stats__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .stats__card { padding: var(--space-4); }
  .stats__card:first-child { grid-column: 1 / -1; }
  .stats__card .label { text-transform: none; letter-spacing: 0; color: var(--subtle); }
  .stats__split { gap: var(--space-4); margin-top: var(--space-4); }
  .stats__ranked, .stats__columns-section { flex-basis: 100%; }
  .stats__note { text-align: center; }

  /* ---- Settings: grouped lists. */
  .settings__head { align-items: flex-end; }
  .settings-card { margin-top: var(--space-4); }
  .settings-card__title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-small);
    font-weight: 700;
    color: var(--subtle);
  }
  .settings-card .field { margin: 0; padding: var(--space-4) 0; }
  .settings-card .field + .field,
  .settings-card .field + .username-field,
  .settings-card > * + .field { border-top: 1px solid var(--hairline); }
  .settings__more { display: block; padding: 0; overflow: hidden; }
  .settings-row {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 5.2rem;
    padding: 0 var(--space-5);
    border: 0;
    background: none;
    font: inherit;
    color: var(--ink);
    text-align: start;
    cursor: pointer;
  }
  .settings-row::after { content: "›"; margin-inline-start: auto; color: var(--subtle); font-size: var(--text-large); }
  .settings__sign-out { padding: 0; overflow: hidden; }
  .settings__sign-out form, .settings__sign-out .btn { display: block; width: 100%; }
  .settings__sign-out .btn {
    min-height: 5.2rem;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--error);
    font-size: var(--text-body);
  }

  /* ---- Lists elsewhere (activities, circles). */
  .wrap--app .data-list { padding: 0 var(--space-5); }
  .wrap--app main > .stack-lg > .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 5rem;
    border-radius: 1.4rem;
    font-size: var(--text-body);
  }

  /* ---- Buttons: rounder, thumb-sized. */
  .wrap--app .btn { border-radius: 1.2rem; }
}

/* ---- Week board (wide screens): a paper planner, after Tweek ------------
   Monday–Friday as ruled columns, the weekend sharing the last. Spans are
   written on the lines with a soft wash of their activity's ink. */

.week-board { display: none; }

@media (min-width: 880px) {
  .week-board { display: block; }
  /* The board carries the week; the phone week strip would repeat it. */
  .week-board:not(:empty) ~ section > .week-strip { display: none; }

  .week { --rule: 3.4rem; }
  .week__head { display: flex; align-items: baseline; gap: var(--space-5); margin-bottom: var(--space-5); }
  .week__month { margin: 0; font-size: var(--text-title); font-weight: 900; letter-spacing: -0.01em; }
  .week__month::first-letter { text-transform: uppercase; }
  .week__total { color: var(--subtle); font-size: var(--text-small); }
  .week__nav { margin-inline-start: auto; display: flex; gap: var(--space-2); }
  .week__arrow {
    width: 3.6rem;
    height: 3.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--text-large);
    color: var(--ink);
    text-decoration: none;
  }
  a.week__arrow:hover { background: var(--surface); }
  .week__arrow.is-disabled { color: var(--hairline); }

  .week__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .week__grid > * + * { border-inline-start: 1px solid var(--hairline); }
  .week__weekend { display: flex; flex-direction: column; }
  .week__weekend > .week__day + .week__day { border-top: 1px solid var(--hairline); }

  .week__day { padding: 0 var(--space-3); }
  .week__day.is-selected { background: color-mix(in srgb, var(--ink) 3%, transparent); }
  .week__day-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: var(--rule);
    border-bottom: 2px solid var(--ink);
  }
  .week__date { color: var(--subtle); text-decoration: none; font-size: var(--text-small); white-space: nowrap; }
  .week__date b { color: var(--ink); font-size: var(--text-large); font-weight: 900; margin-inline-end: var(--space-1); }
  a.week__date:hover b { text-decoration: underline; text-underline-offset: 3px; }
  .week__day.is-today .week__date,
  .week__day.is-today .week__date b { color: var(--activity-6); }
  .week__day.is-future { opacity: 0.45; }
  .week__day-total { font-size: var(--text-tiny); color: var(--subtle); }

  .week__lines { list-style: none; margin: 0; padding: 0; }
  .week__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: var(--rule);
    border-bottom: 1px solid var(--hairline);
    font-size: var(--text-small);
  }
  .week__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.1rem var(--space-2);
    border-radius: 0.6rem;
    /* currentColor here is the activity's ink (activity-ink on the line). */
    background: color-mix(in srgb, currentColor 18%, transparent);
    box-shadow: inset 3px 0 0 currentColor;
  }
  .week__name > span { color: var(--ink); }
  .week__time { flex: none; font-size: var(--text-tiny); color: var(--subtle); }
  .week__line.is-live .week__time { color: var(--ink); font-weight: 700; }
  .week__line--add a { color: var(--subtle); text-decoration: none; font-size: var(--text-small); }
  .week__line--add a:hover { color: var(--ink); }
}

/* A folded stretch of empty hours: a quiet zigzag break in the axis. */
.timeline__fold {
  position: absolute;
  left: 0;
  right: 0;
  background:
    linear-gradient(135deg, transparent 0.6rem, var(--paper) 0.6rem) 0 0 / 1.2rem 1.2rem,
    linear-gradient(225deg, transparent 0.6rem, var(--paper) 0.6rem) 0 0 / 1.2rem 1.2rem,
    rgba(var(--ink-rgb), 0.08);
  background-repeat: repeat-x;
  background-position: 0 50%;
  opacity: 0.8;
}
/* The fill-it prompt sits at the top of its gap, where the eye arrives. */
.timeline__gap { align-items: flex-start; padding-top: var(--space-2); z-index: 1; }

/* ---- Quieter surfaces: fills and shadows, not outlines --------------------
   Containers and chips sit on a soft fill; floating layers lift on a shadow.
   Outlines stay only where they mean something: fields you type into, a
   chosen chip's ring, and the week planner's ruled lines. */

/* Phones already set these on white cards; this is the desktop surface. */
@media (min-width: 541px) {
  .stats__card,
  .settings-card,
  .integration-card,
  .integrations-link,
  .suggestion,
  .day-strip {
    border-color: transparent;
    background: var(--surface);
  }
}

.chip,
.sheet__chip-name,
.hero__timer-chip,
.day-notes__pick {
  border-color: transparent;
  background: var(--surface);
}

.journal__search,
.search-row input[type="search"] {
  border-color: transparent;
  background: var(--surface);
}
.journal__search:focus-visible,
.search-row input[type="search"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.command-menu,
.confirm-dialog,
.avatar-dialog,
.feedback-dialog,
.sync-pill__panel,
.locale-menu__list,
.notif-menu__list {
  border-color: transparent;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.wrap--app hr { display: none; }
.data-row { border-bottom-color: rgba(var(--ink-rgb), 0.07); }

/* ---- Scrollbars: a thin rounded thumb in the ink, no track -------------- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.22) padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--ink-rgb), 0.4); }

@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgba(var(--ink-rgb), 0.3) transparent; }
}

/* ---- Controls: one size scale for buttons, fields and toggles ------------
   Cal.com's anatomy throughout: 40px controls (44px on phones, for thumbs),
   a 32px small and a 48px large, one radius, semibold labels. Fields share
   the secondary button's lifted face and soft ring, and focus the same way
   everywhere: an ink ring with a faint halo. */

:root {
  --control-h: 4rem;
  --control-h-sm: 3.2rem;
  --control-h-lg: 4.8rem;
  --control-radius: 0.8rem;
  --control-ring: rgba(var(--ink-rgb), 0.16);
  --control-face: color-mix(in srgb, var(--paper) 70%, #fff);
  --control-focus: 0 0 0 1px var(--ink), 0 0 0 4px rgba(var(--ink-rgb), 0.12);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --control-face: color-mix(in srgb, var(--paper) 88%, #fff); } }
:root[data-theme="dark"] { --control-face: color-mix(in srgb, var(--paper) 88%, #fff); }
@media (max-width: 540px) { :root { --control-h: 4.4rem; } }

.btn,
.sheet__quick-btn,
.hero__timer-chip,
.day-notes__pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-4);
  border-radius: var(--control-radius);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* Small: chips and inline actions. */
.btn--sm,
.sheet__quick-btn,
.hero__timer-chip,
.day-notes__pick,
.settings-card .btn--secondary,
.settings-card .btn--tertiary,
.day-group__span .btn--danger {
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  font-size: 1.3rem;
}
.day-group__span .btn--danger { min-width: var(--control-h-sm); padding: 0; }

/* Large: the one primary action of a screen or sheet. */
.btn--lg,
.hero__actions .btn,
.sheet__submit,
.home__hero .picker.is-armed .btn {
  min-height: var(--control-h-lg);
  border-radius: 1rem;
  font-size: var(--text-body);
}

/* Option chips (budget presets, timer, span picks) speak the secondary
   button's language; a pressed one takes an ink ring, like a chosen chip. */
.chip {
  min-height: var(--control-h);
  border-radius: var(--control-radius);
  font-weight: 600;
}
.chip,
.hero__timer-chip,
.day-notes__pick {
  border: 0;
  color: var(--ink);
  background: var(--control-face);
  box-shadow: inset 0 -1px 0 rgba(var(--ink-rgb), 0.06), 0 0 0 1px var(--control-ring), 0 1px 2px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}
.chip[aria-pressed="true"],
.chip[aria-pressed="true"]:hover {
  background: var(--control-face);
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink), 0 1px 2px rgba(0, 0, 0, 0.06);
}
.chip:hover,
.hero__timer-chip:hover,
.day-notes__pick:hover { box-shadow: 0 0 0 1px rgba(var(--ink-rgb), 0.3), 0 1px 2px rgba(0, 0, 0, 0.06); }

/* Fields. */
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="time"],
.field select,
.field textarea,
.sheet__field input,
.check-in__note,
.journal__search,
.search-row input[type="search"] {
  min-height: var(--control-h);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--control-radius);
  background: var(--control-face);
  box-shadow: 0 0 0 1px var(--control-ring), 0 1px 2px rgba(0, 0, 0, 0.04);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-body);
}
.field textarea,
.check-in__note { padding: var(--space-3) var(--space-4); line-height: 1.5; }
/* Selects draw their own chevron once they wear the field face. */
.field select {
  appearance: none;
  padding-right: 3.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23878d96' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 1.6rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.sheet__field input:focus,
.check-in__note:focus,
.journal__search:focus,
.search-row input[type="search"]:focus { outline: none; box-shadow: var(--control-focus); }
.field input[type="checkbox"] { width: 1.8rem; height: 1.8rem; border-radius: 0.4rem; }

/* Toggle groups: a filled track, the current option raised on the face. */
.segmented,
.stats__periods:not(.heatmap__filter) {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.2rem;
  padding: 0.3rem;
  border: 0;
  border-radius: calc(var(--control-radius) + 0.3rem);
  background: rgba(var(--ink-rgb), 0.07);
  font-size: var(--text-small);
}
.segmented { display: grid; }
.segmented__option span,
.stats__periods:not(.heatmap__filter) a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--control-h) - 0.6rem);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--control-radius);
  color: var(--subtle);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.segmented__option + .segmented__option span { border-left: 0; }
.segmented__option:has(input:checked) span,
.stats__periods:not(.heatmap__filter) a.is-current {
  background: var(--control-face);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 0 0 1px var(--control-ring), 0 1px 3px rgba(0, 0, 0, 0.1);
}
.segmented__option:has(input:focus-visible) span { outline: none; box-shadow: var(--control-focus); }

/* The header's search: an icon and its key, sized like a small button. */
.cmdk { min-height: var(--control-h-sm); padding: 0 var(--space-3); gap: var(--space-2); white-space: nowrap; }
.cmdk .icon { width: 1.6rem; height: 1.6rem; }
.site-header__wordmark,
.site-header nav > a { white-space: nowrap; }

/* ---- Modal: create and edit forms over the page (layouts/_modal) ------- */

.modal { overflow: auto; }
.modal turbo-frame { display: block; padding: var(--space-3) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom)); }
.modal turbo-frame > .stack-lg > section:first-child { padding-inline-end: var(--space-7); }
.modal h1 { font-size: var(--text-heading); }
.modal .eyebrow { margin-bottom: var(--space-2); }
.modal__close { position: absolute; top: var(--space-4); right: var(--space-4); }
@media (min-width: 541px) { .modal { width: min(56rem, calc(100% - var(--space-6))); } }
.modal[open] { animation: command-menu-in 120ms ease-out; }
@media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } }

/* ---- Accent: the logo's amber, used sparingly ------------------------------
   One brand colour for "you are here" and "this is today": the current nav
   item, the current tab's icon, today's cell on the year wall, the command
   menu's active row and link hovers. Buttons stay ink. --accent-strong is
   the step that clears 3:1 on light paper, for thin rings and underlines. */

:root { --accent: #F5A800; --accent-strong: #AE7102; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent-strong: #F5A800; } }
:root[data-theme="dark"] { --accent-strong: #F5A800; }

a:hover { text-decoration-color: var(--accent-strong); }
.site-header nav > a.is-current { text-decoration-color: var(--accent-strong); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.tabbar__tab.is-current .icon { color: var(--accent-strong); }
.heatmap__cell.is-today { box-shadow: inset 0 0 0 1.5px var(--accent-strong); }
.command-menu__row.is-active::before { background: var(--accent); }

/* ---- Year map colour: the user's pick for the time heatmap -------------------
   <body data-heat="…"> carries the account's choice (green when unset); any
   [data-heat] element (the settings swatches) wears its own. The ramp steps
   are re-derived on body so they pick the choice up. */

body {
  --heat-1: rgba(var(--heat-rgb), 0.18);
  --heat-2: rgba(var(--heat-rgb), 0.40);
  --heat-3: rgba(var(--heat-rgb), 0.68);
  --heat-4: rgba(var(--heat-rgb), 1);
}
[data-heat="green"] { --heat-rgb: 33, 177, 76; }
[data-heat="blue"] { --heat-rgb: 36, 116, 207; }
[data-heat="purple"] { --heat-rgb: 112, 82, 214; }
[data-heat="orange"] { --heat-rgb: 214, 112, 20; }
[data-heat="pink"] { --heat-rgb: 214, 69, 126; }
[data-heat="graphite"] { --heat-rgb: 84, 92, 104; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-heat="green"] { --heat-rgb: 55, 199, 103; }
  :root:not([data-theme="light"]) [data-heat="blue"] { --heat-rgb: 79, 148, 240; }
  :root:not([data-theme="light"]) [data-heat="purple"] { --heat-rgb: 150, 130, 245; }
  :root:not([data-theme="light"]) [data-heat="orange"] { --heat-rgb: 242, 154, 69; }
  :root:not([data-theme="light"]) [data-heat="pink"] { --heat-rgb: 238, 110, 159; }
  :root:not([data-theme="light"]) [data-heat="graphite"] { --heat-rgb: 170, 178, 190; }
}
:root[data-theme="dark"] [data-heat="green"] { --heat-rgb: 55, 199, 103; }
:root[data-theme="dark"] [data-heat="blue"] { --heat-rgb: 79, 148, 240; }
:root[data-theme="dark"] [data-heat="purple"] { --heat-rgb: 150, 130, 245; }
:root[data-theme="dark"] [data-heat="orange"] { --heat-rgb: 242, 154, 69; }
:root[data-theme="dark"] [data-heat="pink"] { --heat-rgb: 238, 110, 159; }
:root[data-theme="dark"] [data-heat="graphite"] { --heat-rgb: 170, 178, 190; }

/* The picker: a mini ramp per option, the chosen one ringed in ink. */
.heat-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.heat-picker__option { position: relative; cursor: pointer; }
.heat-picker__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.heat-picker__face {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  border-radius: var(--control-radius);
  background: var(--control-face);
  box-shadow: 0 0 0 1px var(--control-ring), 0 1px 2px rgba(0, 0, 0, 0.06);
  font-size: var(--text-small);
  font-weight: 600;
}
.heat-picker__ramp { display: inline-flex; gap: 2px; }
.heat-picker__ramp i { width: 0.8rem; height: 0.8rem; border-radius: 0.2rem; background: rgba(var(--heat-rgb), var(--a)); }
.heat-picker__option input:checked + .heat-picker__face { box-shadow: 0 0 0 2px var(--ink), 0 1px 2px rgba(0, 0, 0, 0.06); }
.heat-picker__option input:focus-visible + .heat-picker__face { box-shadow: var(--control-focus); }
.field .heat-picker__option { display: inline-block; margin: 0; color: var(--ink); font-size: inherit; font-weight: inherit; }

/* ---- App frame: one width for every signed-in page ------------------------
   The header and the left edge stay put from page to page. Pages that lay
   out columns or charts (.page--full: Today, a day, Stats) use the frame;
   forms and lists keep a reading width inside it. */

:root { --app-frame: 112rem; }
@media (min-width: 541px) {
  .wrap--app { max-width: var(--app-frame); }
  .wrap--app main > :not(.page--full) { max-width: 72rem; }
}
@media (min-width: 541px) {
  .page--full .stats__ranked,
  .page--full .stats__columns-section { flex: 1 1 36rem; }
}
.flash--alert { display: flex; align-items: baseline; gap: var(--space-3); }
.flash__close { margin-inline-start: auto; padding: 0 var(--space-1); border: 0; background: none; color: inherit; font: inherit; font-size: var(--text-large); line-height: 1; cursor: pointer; }

/* ---- Colour themes, Monkeytype-style -----------------------------------------
   A preset sets paper, ink and one accent; every hairline, fill, control
   face and card derives from those. On <html> it themes the app (the page
   also carries the preset's data-theme, so activity and mood colours use
   their light or dark steps); on a settings swatch it paints the preview.
   The :root form outranks the theme blocks' :root[data-theme]. */

[data-palette="mustard"], :root[data-palette="mustard"] { --paper: #323437; --ink: #d1d0c5; --ink-rgb: 209, 208, 197; --accent: #e2b714; --accent-strong: #e2b714; }
[data-palette="frost"], :root[data-palette="frost"] { --paper: #2e3440; --ink: #d8dee9; --ink-rgb: 216, 222, 233; --accent: #88c0d0; --accent-strong: #88c0d0; }
[data-palette="nightshade"], :root[data-palette="nightshade"] { --paper: #282a36; --ink: #f8f8f2; --ink-rgb: 248, 248, 242; --accent: #bd93f9; --accent-strong: #bd93f9; }
[data-palette="carbon"], :root[data-palette="carbon"] { --paper: #313131; --ink: #f5e6c8; --ink-rgb: 245, 230, 200; --accent: #f66e0d; --accent-strong: #f66e0d; }
[data-palette="milkshake"], :root[data-palette="milkshake"] { --paper: #ffffff; --ink: #212b43; --ink-rgb: 33, 43, 67; --accent: #62cfe6; --accent-strong: #1f8aa6; }
[data-palette="rose"], :root[data-palette="rose"] { --paper: #faf4ed; --ink: #575279; --ink-rgb: 87, 82, 121; --accent: #d7827e; --accent-strong: #b4637a; }
[data-palette="sepia"], :root[data-palette="sepia"] { --paper: #f1e9da; --ink: #3b3024; --ink-rgb: 59, 48, 36; --accent: #c0762b; --accent-strong: #9a5a17; }
/* Neovim favourites, each in its own signature background, text and accent. */
[data-palette="tokyo_night"], :root[data-palette="tokyo_night"] { --paper: #1a1b26; --ink: #c0caf5; --ink-rgb: 192, 202, 245; --accent: #7aa2f7; --accent-strong: #7aa2f7; }
[data-palette="catppuccin_mocha"], :root[data-palette="catppuccin_mocha"] { --paper: #1e1e2e; --ink: #cdd6f4; --ink-rgb: 205, 214, 244; --accent: #cba6f7; --accent-strong: #cba6f7; }
[data-palette="catppuccin_latte"], :root[data-palette="catppuccin_latte"] { --paper: #eff1f5; --ink: #4c4f69; --ink-rgb: 76, 79, 105; --accent: #8839ef; --accent-strong: #8839ef; }
[data-palette="gruvbox"], :root[data-palette="gruvbox"] { --paper: #282828; --ink: #ebdbb2; --ink-rgb: 235, 219, 178; --accent: #fabd2f; --accent-strong: #fabd2f; }
[data-palette="gruvbox_light"], :root[data-palette="gruvbox_light"] { --paper: #fbf1c7; --ink: #3c3836; --ink-rgb: 60, 56, 54; --accent: #d79921; --accent-strong: #b57614; }
[data-palette="kanagawa"], :root[data-palette="kanagawa"] { --paper: #1f1f28; --ink: #dcd7ba; --ink-rgb: 220, 215, 186; --accent: #7e9cd8; --accent-strong: #7e9cd8; }
[data-palette="everforest"], :root[data-palette="everforest"] { --paper: #2d353b; --ink: #d3c6aa; --ink-rgb: 211, 198, 170; --accent: #a7c080; --accent-strong: #a7c080; }
[data-palette="rose_pine"], :root[data-palette="rose_pine"] { --paper: #191724; --ink: #e0def4; --ink-rgb: 224, 222, 244; --accent: #ebbcba; --accent-strong: #ebbcba; }
:root[data-palette] { background: var(--paper); color: var(--ink); }

/* The picker: each option previews its own paper, ink and accent. */
.palette-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-2); }
.field .palette-picker__option { position: relative; display: block; margin: 0; cursor: pointer; color: inherit; font-size: inherit; font-weight: inherit; }
.palette-picker__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.palette-picker__face {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--control-radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(var(--ink-rgb), 0.16), 0 1px 2px rgba(0, 0, 0, 0.08);
}
.palette-picker__sample { display: flex; align-items: center; gap: 0.4rem; }
.palette-picker__sample b { font-size: var(--text-large); font-weight: 900; line-height: 1; margin-inline-end: auto; }
.palette-picker__sample i { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: rgba(var(--ink-rgb), 0.5); }
.palette-picker__sample i:first-of-type { background: var(--accent); }
.palette-picker__sample i:last-of-type { background: rgba(var(--ink-rgb), 0.2); }
.palette-picker__name { font-size: var(--text-small); font-weight: 600; }
.palette-picker__option input:checked + .palette-picker__face { box-shadow: 0 0 0 2px var(--accent-strong), 0 0 0 4px rgba(var(--ink-rgb), 0.08); }
.palette-picker__option input:focus-visible + .palette-picker__face { outline: 2px solid var(--ink); outline-offset: 3px; }

/* A preset fixes its own mode, so the Light/Dark control sits out. */
[data-theme-modes][data-locked] { opacity: 0.45; pointer-events: none; }
.palette-picker__group { grid-column: 1 / -1; margin: var(--space-3) 0 0; font-size: var(--text-tiny); font-weight: 700; color: var(--subtle); }
.palette-picker__group:first-child { margin-top: 0; }

/* Chartkick canvases on Stats (lib/charts.js sizes each by its rows). */
.stats__chart { position: relative; width: 100%; margin-top: var(--space-3); }

/* ---- Font: the user's pick for the whole app -------------------------------- */

:root, [data-font="geist"] { --font: "Geist"; }
[data-font="inter"] { --font: "Inter"; }
[data-font="space_grotesk"] { --font: "Space Grotesk"; }
[data-font="lato"] { --font: "Lato"; }
[data-font="jetbrains_mono"] { --font: "JetBrains Mono"; }

.font-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-2); }
.field .font-picker__option { position: relative; display: block; margin: 0; cursor: pointer; color: var(--ink); font-size: inherit; font-weight: inherit; }
.font-picker__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.font-picker__face {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--control-radius);
  background: var(--control-face);
  box-shadow: 0 0 0 1px var(--control-ring), 0 1px 2px rgba(0, 0, 0, 0.06);
  font-family: var(--font), ui-sans-serif, system-ui, sans-serif;
}
.font-picker__sample { font-size: var(--text-large); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.font-picker__name { font-size: var(--text-small); font-weight: 500; color: var(--subtle); }
.font-picker__option input:checked + .font-picker__face { box-shadow: 0 0 0 2px var(--ink), 0 1px 2px rgba(0, 0, 0, 0.06); }
.font-picker__option input:focus-visible + .font-picker__face { box-shadow: var(--control-focus); }
/* Geist and friends read best a touch tighter at display sizes. */
h1, .display, .figure__value, .stats__card-value, .page-head__title { letter-spacing: -0.02em; }
[data-font="jetbrains_mono"] :is(h1, .display, .figure__value, .stats__card-value, .page-head__title) { letter-spacing: -0.04em; }

/* ---- Header: one row, one height ------------------------------------------
   Every item in the desktop header is a 32px box centred on the same line:
   page links, the search button, the sync pill, the language flag and the
   theme toggle. Page links and utilities sit in two groups. */

@media (min-width: 541px) {
  .site-header { align-items: center; }
  .site-header__wordmark { display: inline-flex; align-items: center; gap: 0.7rem; line-height: 1; }
  .site-header__wordmark .logo-mark { vertical-align: 0; margin: 0; }

  .site-header nav { align-items: center; gap: var(--space-1); }
  .site-header nav > * { flex: none; }
  .site-header nav > a {
    min-height: var(--control-h-sm);
    padding: 0 var(--space-3);
    border-radius: var(--control-radius);
    line-height: 1;
  }
  .site-header nav > a:hover { background: var(--surface); }
  .site-header nav > a.is-current { text-underline-offset: 7px; }

  .site-header nav > .cmdk { margin-inline-start: var(--space-4); }
  .site-header nav > .sync-pill summary { min-height: var(--control-h-sm); padding: 0 var(--space-2); }
  .site-header nav > .now--chip { min-height: var(--control-h-sm); box-sizing: border-box; padding-block: 0; border-radius: var(--control-radius); }
  .site-header nav > .nav-divider { margin: 0 var(--space-2); }

  .site-header nav > .locale-menu summary,
  .site-header nav > .theme-toggle,
  .site-header__bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    border-radius: var(--control-radius);
  }
  .site-header nav > .locale-menu summary:hover,
  .site-header nav > .theme-toggle:hover,
  .site-header__bell:hover { background: var(--surface); }
  .site-header nav > .theme-toggle .icon { width: 1.8rem; height: 1.8rem; vertical-align: 0; }
}

/* Year card head: label and Time | Mood switch, then the filter chips. On
   phones the switch takes its own full-width row, like Stats' switches. */
.heatmap__head { margin-bottom: var(--space-3); }
.heatmap__filter { margin-bottom: var(--space-3); }
@media (max-width: 540px) {
  .heatmap__head { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .heatmap .heatmap__lens { display: grid; width: 100%; }
}
.home__week .section-head .label { margin: 0; }

/* The armed picker: Start and "add manually" share one centre line. On
   phones the floating bar reads link-left, Start-right. */
.picker { align-items: center; }
.picker > a { line-height: 1.2; }
@media (max-width: 540px) {
  .home__hero .picker.is-armed .picker__name:empty { display: none; }
  .home__hero .picker.is-armed > a { order: -1; margin-inline-end: auto; }
  .home__hero .picker.is-armed .btn { order: 1; margin-inline-start: 0; }
}

.timeline__stamp {
  display: inline-block;
  margin-inline-start: var(--space-2);
  padding: 0 0.5rem;
  border: 1.5px solid currentColor;
  border-radius: 0.4rem;
  color: var(--subtle);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  vertical-align: 1px;
  transform: rotate(-3deg);
}

.insights .label { margin: 0 0 var(--space-3); }
.insights__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.insights__item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-small); }
.insights__item::before { content: ""; flex: none; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--accent); }
.insights__item.is-mood::before { background: var(--mood-2); }
.insights__text { flex: 1; min-width: 0; }
.insights__dismiss { flex: none; padding: 0 var(--space-1); border: 0; background: none; color: var(--subtle); font: inherit; font-size: var(--text-large); line-height: 1; cursor: pointer; }
.insights__dismiss:hover { color: var(--ink); }

.stats__periods[hidden] { display: none; }