/* SEQUOIA "Ring" brand: the simple style the owner picked (14.11.2026, Cal AI-like).
   Black and white, Satoshi only, lots of air, light grey cards. Deep forest green is the brand color (owner, 14.11):
   the primary pill and selected rows on light screens, and the night background. Real sequoia photos only on a few
   moments (open, home header, the urge screen, milestones, tool cards), always under a dark green gradient.
   Fonts: <link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=satoshi@500,700,900&display=swap" referrerpolicy="no-referrer">
   Mark: design/icons/sequoia-ring.svg (currentColor). App icon: design/icons/app-icon-black.svg.
   Dark: put class="sq-dark" on any container (night screens). */

:root {
  /* color */
  --sq-bg: #FFFFFF;
  --sq-ink: #000000;          /* text, the primary pill */
  --sq-muted: #6B6B66;        /* secondary text: 5.4:1 on white */
  --sq-card: #F5F5F3;         /* grey cards, chips, option rows */
  --sq-line: #EAEAE6;         /* hairlines */
  --sq-green: #1F5B43;        /* the brand: primary pill, selected rows, links that act. White on it: 8.0:1 */
  --sq-deep: #0B2E22;         /* the deepest green: night background, photo gradients. White on it: 14.7:1 */
  --sq-mint: #E3EFE8;         /* a quiet green tint for chosen chips. Green on it: 6.7:1 */
  --sq-accent: var(--sq-green); /* lock-on dot, today's mark */
  --sq-pill-bg: var(--sq-green); --sq-pill-ink: #FFFFFF;
  --sq-future: #DADAD6;       /* days not reached yet */
  --sq-slip: #BDBDB8;         /* a slip day: quiet grey, never red */
  /* type: Satoshi only */
  --sq-font: Satoshi, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --sq-display: 900 44px/1.02 var(--sq-font);   /* letter-spacing -.04em */
  --sq-title: 900 34px/1.04 var(--sq-font);     /* letter-spacing -.04em */
  --sq-number: 900 92px/.84 var(--sq-font);     /* letter-spacing -.06em, tabular-nums */
  --sq-head: 700 19px/1.3 var(--sq-font);       /* letter-spacing -.01em */
  --sq-body: 500 16px/1.45 var(--sq-font);
  --sq-button: 700 17px/1 var(--sq-font);
  --sq-small: 500 13.5px/1.4 var(--sq-font);
  /* space: 4-point steps; screens use a 20px side gutter */
  --sq-1: 4px; --sq-2: 8px; --sq-3: 12px; --sq-4: 16px; --sq-5: 20px; --sq-6: 24px; --sq-8: 32px; --sq-10: 40px;
  --sq-gutter: 20px;
  /* shape */
  --sq-r-card: 26px; --sq-r-row: 22px; --sq-r-pill: 30px; --sq-r-chip: 16px;
  --sq-pill-h: 60px;
}
/* night: deep forest, not black. Muted text 7.0:1 on the background, 5.7:1 on cards */
.sq-dark { --sq-bg: #0B2E22; --sq-ink: #FFFFFF; --sq-muted: #9FB8AC; --sq-card: #123D2E; --sq-line: #1C4A39; --sq-future: #24533F; --sq-slip: #4E7362; --sq-accent: #7FC29B; --sq-mint: #1C4A39; --sq-pill-bg: #FFFFFF; --sq-pill-ink: #0B2E22; }
/* text over a photo: always on this gradient, never on a sharp detail */
.sq-photo { position: relative; overflow: hidden; background: var(--sq-deep); color: #FFFFFF; }
.sq-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sq-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,46,34,0) 30%, rgba(11,46,34,.55) 62%, rgba(11,46,34,.92) 100%); pointer-events: none; }
.sq-photo > :not(img) { position: relative; z-index: 1; }

.sq { background: var(--sq-bg); color: var(--sq-ink); font: var(--sq-body); -webkit-font-smoothing: antialiased; }
.sq-display { font: var(--sq-display); letter-spacing: -.04em; margin: 0; text-wrap: balance; }
.sq-title { font: var(--sq-title); letter-spacing: -.04em; margin: 0; text-wrap: balance; }
.sq-number { font: var(--sq-number); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.sq-head { font: var(--sq-head); letter-spacing: -.01em; margin: 0; }
.sq-sub { font: var(--sq-body); color: var(--sq-muted); margin: var(--sq-3) 0 0; text-wrap: pretty; }
.sq-small { font: var(--sq-small); color: var(--sq-muted); }

/* the wordmark: the ring mark + "sequoia" in Satoshi 900 */
.sq-word { display: inline-flex; align-items: center; gap: 8px; font: 900 23px/1 var(--sq-font); letter-spacing: -.035em; }
.sq-word svg { width: 1.04em; height: 1.04em; }

/* the one primary action: a green pill (white on night screens) */
.sq-pill { appearance: none; border: 0; width: 100%; height: var(--sq-pill-h); border-radius: var(--sq-r-pill); background: var(--sq-pill-bg); color: var(--sq-pill-ink); font: var(--sq-button); display: grid; place-items: center; cursor: pointer; }
.sq-pill:active { transform: scale(.985); }
.sq-pill--ghost { background: transparent; color: var(--sq-ink); box-shadow: inset 0 0 0 1.5px var(--sq-ink); }
.sq-pill[disabled] { opacity: .35; cursor: default; }
.sq-link { appearance: none; background: none; border: 0; font: 500 15px/1.4 var(--sq-font); color: var(--sq-muted); text-decoration: underline; text-underline-offset: 3px; padding: var(--sq-3); cursor: pointer; }

/* grey card, option row, chip */
.sq-card { border-radius: var(--sq-r-card); background: var(--sq-card); padding: 18px; }
.sq-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 18px; border-radius: var(--sq-r-row); background: var(--sq-card); font: 700 17px/1.25 var(--sq-font); }
.sq-row[aria-checked="true"], .sq-row.is-on { background: var(--sq-pill-bg); color: var(--sq-pill-ink); }
.sq-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: var(--sq-r-chip); background: var(--sq-card); font: 700 13.5px/1 var(--sq-font); }
.sq-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sq-accent); }

/* the safety line: quiet, never a popup, never tracked */
.sq-988 { font: 500 12.5px/1.4 var(--sq-font); color: var(--sq-muted); text-align: center; }
.sq-988 a { color: var(--sq-ink); font-weight: 700; text-decoration: none; }

:focus-visible { outline: 2.5px solid var(--sq-green); outline-offset: 3px; }
.sq-dark :focus-visible { outline-color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .sq-pill:active { transform: none; } }