/* Daily Planner landing page ---------------------------------------------------
   Self-contained: it mirrors the planner's tokens (styles/core.css, theme.css,
   horizon.css) but never loads the app's stylesheet. Replicas ("rp-") are sized
   in em and scale with their container. Every transition or animation inside a
   replica sits behind `.motion-ok`, which landing.js adds only when the visitor
   has not asked for reduced motion; without it, replicas show their final state.
   Pre-animation states (sections waiting to rise in, replicas waiting to play)
   sit behind `.js-anim`, set by the inline script in <head> before first paint,
   so nothing renders in its final state and then jumps back. */

:root {
  color-scheme: light;
  --paper: #f6f3ed;
  --surface: #fbfaf7;
  --surface-strong: #ffffff;
  --ink: #1c1a17;
  --muted: #6c665e;
  /* Quiet text: 4.5:1 on paper, cards and --soft, as in the planner (styles/core.css). Icons, dots and
     switch tracks use --faint-mark (3:1). */
  --faint: #706a62;
  --faint-mark: #8c867f;
  --line: #ddd8d0;
  --line-strong: #c7c0b6;
  --soft: #efebe4;
  --tint: #f0ece4;
  --accent: #8b6b4f;
  --danger: #8c4e45;
  --now: #9a5149;
  --on-now: #fffaf4;
  --misogi: #a5522e;
  --milestone: #b97a46;
  --adventure: #2f6d70;
  --keydate: #5d4f8f;
  --habit: #496b4a;
  --paint: var(--misogi);
  --on-paint: #fff;
  /* The palettes for the painted year (replica only; keep in step with the app). */
  --pal-ocean: #2b6a99;
  --pal-forest: #3b7552;
  --pal-plum: #7b4a8b;
  --pal-graphite: #454b54;
  --pal-sunset: #b9355f;
  --pal-graphite-1: color-mix(in srgb, #454b54 44%, var(--surface-strong));
  --pal-sunset-1: color-mix(in srgb, #eda23a 52%, var(--surface-strong));
  --pal-sunset-2: #e2704c;
  --pal-sunset-joker: #5b7ea3;
  --c-deep: #5f7084;
  --c-admin: #746e67;
  --c-health: #5f755b;
  --c-learn: #716786;
  --c-personal: #9a704e;
  --focus: #8b5a3c;
  --shadow-rp: 0 28px 70px -24px rgba(48, 38, 26, .28), 0 2px 8px rgba(48, 38, 26, .06);
  --shadow-pop: 0 18px 44px -12px rgba(48, 38, 26, .30), 0 1px 3px rgba(48, 38, 26, .08);
  --scrim: rgba(28, 26, 23, .22);
  --band-bg: #1c1a17;
  --band-ink: #f6f3ed;
  --band-muted: #bdb5aa;
  --band-line: rgba(246, 243, 237, .16);
  --band-field: rgba(246, 243, 237, .07);
  --band-accent: #e8a27f;
  --band-error: #f2aa98;
  /* The scrollbar: the planner's (styles/core.css), the same set in every stylesheet. */
  --scrollbar-size: 12px;
  --scrollbar-inset: 3px;
  --scrollbar-inset-active: 2px;
  --scrollbar-thumb-min: 2.5rem;
  --scrollbar-thumb: color-mix(in srgb, var(--line-strong) 62%, var(--paper));
  --scrollbar-thumb-hover: color-mix(in srgb, var(--muted) 46%, var(--paper));
  --gutter: 16px;
  --top-h: 60px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #151412;
    --surface: #1c1b18;
    --surface-strong: #24221f;
    --ink: #ece8e1;
    --muted: #aaa298;
    --faint: #9a9289;
    --faint-mark: #80796f;
    --line: #322f2a;
    --line-strong: #48433c;
    --soft: #2b2925;
    --tint: #1a1917;
    --accent: #cf9f74;
    --danger: #d9806f;
    --now: #d0695c;
    --on-now: #151412;
    --misogi: #e3916a;
    --on-paint: #151412;
    --milestone: #dcaa76;
    --adventure: #63b5af;
    --keydate: #a99be0;
    --habit: #8dbb8e;
    --pal-ocean: #6db0de;
    --pal-forest: #80c095;
    --pal-plum: #c69bd8;
    --pal-graphite: #b8bec8;
    --pal-sunset: #ee7d9c;
    --pal-graphite-1: color-mix(in srgb, #b8bec8 40%, var(--surface-strong));
    --pal-sunset-1: color-mix(in srgb, #f5a524 62%, var(--surface-strong));
    --pal-sunset-2: #e9805e;
    --pal-sunset-joker: #90b2d4;
    --c-deep: #8195ab;
    --c-admin: #9a928a;
    --c-health: #86a281;
    --c-learn: #9c90b3;
    --c-personal: #c09670;
    --focus: #e3a37f;
    --shadow-rp: 0 28px 70px -20px rgba(0, 0, 0, .65), 0 2px 8px rgba(0, 0, 0, .3);
    --shadow-pop: 0 18px 44px -10px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .4);
    --scrim: rgba(0, 0, 0, .5);
    --band-bg: #23211e;
    --band-ink: #ece8e1;
    --band-muted: #aaa298;
    --band-line: #3c3833;
    --band-field: rgba(236, 232, 225, .05);
  }
}

* { box-sizing: border-box; }

/* The planner's scrollbar (styles/core.css): no arrows, no track, a light
   rounded thumb in a 12px gutter, 6px at rest and 8px, darker, under the
   pointer or while dragged (the --scrollbar-* tokens), in both themes.
   Chromium and Safari draw it from the ::-webkit-scrollbar parts below, which
   Chromium ignores as soon as the standard properties are set (and then draws
   its own arrows on the page's scrollbar), so those are for the other
   browsers only: Firefox keeps `thin`, as in the planner. */
@supports not selector(::-webkit-scrollbar) {
  html,
  * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
}

*::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }

*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track-piece,
*::-webkit-scrollbar-corner { background: transparent; }

*::-webkit-scrollbar-thumb {
  min-height: var(--scrollbar-thumb-min);
  border: var(--scrollbar-inset) solid transparent;
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active {
  border-width: var(--scrollbar-inset-active);
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

html { scroll-padding-top: calc(var(--top-h) + 12px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  /* hidden first, for Safari before 16, which has no clip. */
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }

p { margin: 0; text-wrap: pretty; }

/* Beats single-class display rules, so the hidden attribute always wins. */
:root [hidden] { display: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

svg.i { width: 1.25em; height: 1.25em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: fixed;
  z-index: 100;
  left: 12px;
  top: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 650;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip:focus { transform: none; }

.wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }

@media (min-width: 760px) {
  :root { --gutter: 32px; --top-h: 64px; }
}

@media (min-width: 1200px) {
  :root { --gutter: 48px; }
}

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

h1 {
  font-size: clamp(2.05rem, 1.2rem + 4.4vw, 3.4rem);
  font-weight: 760;
  line-height: 1.03;
  letter-spacing: -.045em;
}

h2 {
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.7rem);
  font-weight: 740;
  line-height: 1.08;
  letter-spacing: -.038em;
}

h3 { font-size: 1.12rem; font-weight: 690; line-height: 1.3; letter-spacing: -.018em; }

.h3-lg { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.55rem); letter-spacing: -.028em; }

.lead { max-width: 36em; color: var(--muted); font-size: clamp(1.04rem, .98rem + .3vw, 1.18rem); line-height: 1.6; }

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

.btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 160ms cubic-bezier(.22, 1, .36, 1);
}

.btn:active { transform: scale(.98); }

.btn--primary { background: var(--ink); color: var(--paper); }

.btn--primary:hover { background: color-mix(in srgb, var(--ink) 84%, var(--paper)); }

.btn--ghost { border-color: var(--line-strong); color: var(--ink); }

.btn--ghost:hover { border-color: var(--ink); background: var(--surface-strong); }

.btn--sm { min-height: 40px; padding: 0 15px; border-radius: 10px; font-size: .9rem; }

.btn--light { background: var(--band-ink); color: var(--band-bg); }

.btn--light:hover { background: color-mix(in srgb, var(--band-ink) 86%, var(--band-bg)); }

.btn--text-light { padding-inline: 12px; color: var(--band-muted); }

.btn--text-light:hover { color: var(--band-ink); }

.btn[disabled] { opacity: .6; cursor: progress; }

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Header ---------------------------------------------------------------------- */

.top {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  backdrop-filter: saturate(1.2) blur(12px);
  transition: border-color 160ms ease;
}

.top.is-scrolled { border-bottom-color: var(--line); }

.top__inner { height: var(--top-h); display: flex; align-items: center; gap: 16px; }

.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; font-weight: 720; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }

.brand img { width: 28px; height: 28px; border-radius: 7px; }

@media (prefers-color-scheme: dark) {
  .brand img,
  .foot__brand img { box-shadow: 0 0 0 1px var(--line-strong); }
}

.top__nav { display: none; gap: 4px; }

.top__nav a {
  padding: 8px 11px;
  border-radius: 9px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.top__nav a:hover { background: var(--soft); color: var(--ink); }

.top__actions { display: flex; align-items: center; gap: 4px; }

@media (min-width: 960px) {
  .top__nav { display: flex; margin-right: 8px; }
}

/* The Menu button, last in the bar below 960px: two lines that turn into a
   cross while the menu is open. Its room is kept from the first paint, so
   nothing moves when welcome/top-menu.js makes it visible (`is-ready`);
   without JavaScript it never shows. */
.top__menu {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  margin-right: -6px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.top__menu:not(.is-ready) { visibility: hidden; }

.top__menu:hover,
.top__menu[aria-expanded="true"] { background: var(--soft); }

.top__menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.top__menu path { transform-box: fill-box; transform-origin: center; }

.top__menu[aria-expanded="true"] path:first-child { transform: translateY(3.5px) rotate(45deg); }

.top__menu[aria-expanded="true"] path:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (min-width: 960px) {
  .top__menu { display: none; }
}

/* A phone: room for the Menu button beside the brand and the bar's button. */
@media (max-width: 479.98px) {
  .top__inner { gap: 8px; }
  .top .brand { gap: 9px; font-size: .95rem; }
  .top__actions .btn--sm { padding-inline: 12px; font-size: .87rem; }
}

/* The narrowest phones keep the mark and drop the name beside it (the link keeps its label). */
@media (max-width: 355.98px) {
  .top .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* The menu: the bar's own section links, as a panel under the Menu button,
   over a light scrim that belongs to the bar (a tap on it closes the menu
   without reaching the page). Below 960px only: the desktop bar shows them. */
@media (max-width: 959.98px) {
  .top__nav {
    position: absolute;
    z-index: 2;
    top: calc(100% + 8px);
    right: var(--gutter);
    width: min(320px, calc(100% - 2 * var(--gutter)));
    max-height: calc(100dvh - var(--top-h) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-strong);
    box-shadow: var(--shadow-pop);
    opacity: 0;
    transform: translateY(-6px) scale(.985);
    transform-origin: top right;
  }
  .top.is-menu-open .top__nav { display: flex; }
  .top.is-menu-shown .top__nav { opacity: 1; transform: none; }
  .top__nav a { display: flex; align-items: center; min-height: 46px; padding: 10px 14px; border-radius: 10px; color: var(--ink); font-size: 1rem; }
  .top__nav a:hover { background: var(--soft); }
  .top__nav a:focus-visible { outline-offset: -2px; border-radius: 10px; }
  .top::after { content: ""; position: absolute; z-index: 1; top: 100%; left: 0; right: 0; height: 100vh; display: none; background: var(--scrim); opacity: 0; }
  .top.is-menu-open::after { display: block; }
  .top.is-menu-shown::after { opacity: 1; }
  /* The bar stays as it is over the scrim, with its hairline. */
  .top.is-menu-open { border-bottom-color: var(--line); background: var(--paper); }
}

@media (prefers-reduced-motion: no-preference) {
  .top__nav,
  .top::after { transition: opacity 160ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1); }
  .top__menu path { transition: transform 220ms cubic-bezier(.22, 1, .36, 1); }
}

html.has-menu { overflow: hidden; padding-right: var(--scrollbar-gap, 0px); }

/* Sections -------------------------------------------------------------------- */

.section { padding-block: clamp(72px, 9vw, 128px); }

.section--tint { background: var(--tint); }

.section__intro { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }

.split { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }

.split__copy { display: grid; align-content: start; gap: 18px; }

.split__copy > p:not(.lead) { color: var(--muted); max-width: 36em; }

@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--visual-first { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

@media (max-width: 959.98px) {
  .split--visual-first .split__visual { order: 2; }
}

.visual-note,
figcaption { margin-top: 18px; color: var(--muted); font-size: .88rem; line-height: 1.5; }

.ticks,
.kinds,
.features,
.squares,
.steps { margin: 0; padding: 0; list-style: none; }

.ticks { display: grid; gap: 12px; }

.ticks li { position: relative; padding-left: 30px; color: var(--muted); }

.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .3em;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.3 3.3 7.7-8' fill='none' stroke='%23f6f3ed' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}

@media (prefers-color-scheme: dark) {
  .ticks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.3 3.3 7.7-8' fill='none' stroke='%23151412' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}

/* Entrances ------------------------------------------------------------------- */

/* Waiting to rise in. Only with `.js-anim` (motion welcome, script on the way),
   only on screen: printed or without JS, everything is simply there. Replicas
   with `data-first-frame` are never hidden: CSS draws their first frame. */
@media screen {
  .js-anim [data-reveal]:not(.is-in),
  .js-anim [data-reveal-each]:not(.is-in) > *,
  .js-anim [data-scene]:not(.is-armed):not([data-first-frame]) { opacity: 0; }
}

/* A rising title (.rise-title, the hero's on /welcome/):
   each word comes up from behind its own clip, one after the other, on first
   paint and by CSS alone. The words stay opaque, so the title is painted at
   once, and only move: nothing waits for a script, nothing shifts. Each word
   is <span class="word" style="--w:N"><span>…</span></span>; the <h1> carries
   the sentence in aria-label and the lines of words are aria-hidden, so a
   screen reader reads one sentence. The clip is padded so ascenders and
   descenders are never cut; the negative margin takes the padding back.
   `overflow: hidden` first, for Safari before 16, which has no `clip`. */
.rise-title .word { display: inline-block; overflow: hidden; overflow: clip; padding: .2em .04em .14em; margin: -.2em -.04em -.14em; vertical-align: top; }

.rise-title .word > span { display: inline-block; }

/* The hero needs no script to arrive: its title rises word by word, then its
   copy fades up and the replica and its switch follow, already on the first
   frame. The caption is simply there: painted at once, it is the page's Largest
   Contentful Paint, and the turns only change its text (hero-views.js). */
@media screen and (prefers-reduced-motion: no-preference) {
  /* A soft start and a long settle; 40ms between words, the last one in place by 0.9s. */
  .rise-title .word > span { animation: rise-word 500ms cubic-bezier(.22, .8, .32, 1) calc(var(--w, 0) * 40ms) both; }
  /* The title's own words move; the title does not rise as a block as well. */
  h1.rise-title { animation: none; }
  .hero__copy > :not(h1),
  .hero__visual > :not(.hero-captions) { animation: rise-in 820ms cubic-bezier(.22, 1, .36, 1) both; }
  .hero__copy .lead { animation-delay: 380ms; }
  .hero__copy .cta-row { animation-delay: 460ms; }
  .hero__copy .devices { animation-delay: 540ms; }
  .hero__visual > :not(.hero-captions) { animation-duration: 1000ms; animation-delay: 180ms; }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
}

@keyframes rise-word {
  from { transform: translateY(calc(100% + .5em)); }
}

/* The hero's first frame, before landing.js arms the scene: nothing typed,
   nothing ticked, the new block and the "October, painted" card not there yet.
   The same look as the armed state below, so arming changes nothing on screen. */
.js-anim .rp--day:not(.is-armed) .rp-focus span { color: transparent; }

.js-anim .rp--day:not(.is-armed) .rp-focus em { opacity: 1; }

.js-anim .rp--day:not(.is-armed) .rp-tick .rp-check { background: var(--surface-strong); box-shadow: inset 0 0 0 1.5px var(--line-strong); }

.js-anim .rp--day:not(.is-armed) .rp-tick .rp-check svg.i { opacity: 0; transform: scale(.4); }

.js-anim .rp--day:not(.is-armed) .rp-tick .rp-txt { color: inherit; text-decoration-color: transparent; }

.js-anim .rp--day:not(.is-armed) .rp-block--new { opacity: 0; transform: translateX(30%); }

.js-anim .rp--day:not(.is-armed) .rp-pop--closed { opacity: 0; transform: translateY(1.2em) scale(.96); }

/* Hero ------------------------------------------------------------------------ */

.hero { padding: clamp(28px, 5vw, 72px) 0 clamp(64px, 8vw, 112px); }

.hero__grid { display: grid; gap: 44px; align-items: center; }

.hero__copy { display: grid; gap: 22px; }

.hero__copy h1 > span { display: inline; }

.hero__copy .cta-row { margin-top: 6px; }

/* "New · Plan 2027 in 30 minutes": a quiet link to the yearly ritual. */
.hero__news {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 36px;
  margin-bottom: -4px;
  padding: 4px 12px 4px 4px;
  border: 1px solid color-mix(in srgb, var(--paint) 28%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--paint) 5%, var(--surface-strong));
  color: var(--ink);
  font-size: .9rem;
  font-weight: 620;
  letter-spacing: -.005em;
  line-height: 1.25;
  text-decoration: none;
}

.hero__news:hover { border-color: color-mix(in srgb, var(--paint) 55%, var(--line)); }

.hero__news-tag { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: var(--paint); color: var(--paper); font-size: .76rem; font-weight: 720; letter-spacing: .01em; }

.hero__news svg.i { width: 17px; height: 17px; margin-left: -2px; color: var(--paint); }

@media (prefers-reduced-motion: no-preference) {
  .hero__news { transition: border-color 160ms ease; }
  .hero__news svg.i { transition: transform 220ms cubic-bezier(.22, 1, .36, 1); }
  .hero__news:hover svg.i { transform: translateX(3px); }
}

/* Computer, tablet and phone: under the calls to action, readable at a glance. */
.devices { display: flex; align-items: center; gap: 14px; margin-top: 4px; }

.devices__icons { flex: 0 0 auto; display: inline-flex; align-items: flex-end; gap: 2px; height: 50px; padding: 0 12px 10px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); color: var(--ink); }

.devices__icons svg.i { stroke-width: 1.5; }

/* Sized like the real things, standing on one line. */
.devices__icons svg.devices__laptop { width: 34px; height: 34px; margin-bottom: -5px; }

.devices__icons svg.devices__tablet { width: 25px; height: 25px; }

.devices__icons svg.devices__phone { width: 21px; height: 21px; }

.devices p { color: var(--muted); font-size: .92rem; line-height: 1.45; }

.devices b { display: block; color: var(--ink); font-size: 1rem; font-weight: 680; letter-spacing: -.01em; }

.hero__visual { margin: 0; container: hero-visual / inline-size; }

/* Your day, then your year: the Day view and Horizon share one box (the taller
   sets its height) and take turns (hero-views.js). The one coming in fades in
   over the one going out, whose window stays put underneath, so the window
   seems to stay and only its content changes. Without the script, the choice
   under the replica still switches them (CSS only). */
.hero-stage { display: grid; }

/* Each view stacks on its own, so nothing of the one going out (its line for
   now, its floating card) can show over the one coming in. */
.hero-view { z-index: 0; grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; }

.hero-view > .rp { flex: 1 1 auto; display: flex; flex-direction: column; }

.hero-view .rp-window { flex: 1 1 auto; }

.hero-view--year,
.hero-captions [data-hero-caption="year"] { visibility: hidden; }

.hero__visual:not(.is-live):has([data-hero-choice][value="year"]:checked) :is(.hero-view--day, [data-hero-caption="day"]) { visibility: hidden; }

.hero__visual:not(.is-live):has([data-hero-choice][value="year"]:checked) :is(.hero-view--year, [data-hero-caption="year"]) { visibility: visible; }

.hero__visual:not(.is-live):has([data-hero-choice][value="year"]:checked) .hero-switch__thumb { transform: translateX(100%); }

.hero__visual.is-live .hero-view { visibility: hidden; }

.hero__visual.is-live .hero-view.is-leaving { visibility: visible; }

.hero__visual.is-live .hero-view.is-shown { z-index: 1; visibility: visible; }

.hero__visual.is-live[data-view="year"] .hero-switch__thumb { transform: translateX(100%); }

/* A hidden view goes back to its first frame at once, with no transition
   running unseen (hero-views.js adds the class for that moment). */
.motion-ok .hero__visual.is-live .hero-view.is-resetting *,
.motion-ok .hero__visual.is-live .hero-view.is-resetting *::before,
.motion-ok .hero__visual.is-live .hero-view.is-resetting *::after { transition: none; }

/* Going out: its content and floating card fade first, its window stays.
   Coming in: no shadow of its own until the window underneath is gone, so the
   shadow never doubles; then its content fades in and settles. */
.hero-view.is-leaving :is(.rp-window > :not(.rp-bar), .rp-pop, .rp-cursor) { opacity: 0; }

.motion-ok .hero-view.is-leaving :is(.rp-window > :not(.rp-bar), .rp-cursor) { transition: opacity 220ms ease; }

.hero-view.is-entering .rp-window { box-shadow: none; }

.motion-ok .hero-view.is-entering { animation: hero-view-in 520ms cubic-bezier(.4, 0, .2, 1) 140ms both; }

.motion-ok .hero-view.is-entering :is(.rp-day, .rp-hz) { animation: hero-content-in 760ms cubic-bezier(.22, 1, .36, 1) 140ms both; }

@keyframes hero-view-in {
  from { opacity: 0; }
}

@keyframes hero-content-in {
  from { transform: translateY(.7em); }
}

/* What the replica shows: the app's Day · Week · Horizon switch, with a thin
   line filling under the current choice until the next one; and a pause. */
.hero-switch { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }

/* Wide enough, it rises into the room the Day view keeps under its window for
   its floating card, and sits beside that card. */
@container hero-visual (min-width: 520px) {
  .hero-switch { margin-top: calc(18px - 3.6 * clamp(9.5px, 2.15cqi, 13.5px)); }
}

.hero-switch__views {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.hero-switch__thumb {
  position: absolute;
  z-index: 0;
  left: 3px;
  top: 3px;
  bottom: 3px;
  width: calc(50% - 3px);
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-strong);
  box-shadow: 0 1px 2px rgba(28, 25, 21, .08), inset 0 0 0 1px var(--line);
  pointer-events: none;
}

.hero-switch__fill { position: absolute; left: 18px; right: 18px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--paint); opacity: 0; transform: scaleX(0); transform-origin: left center; }

.hero__visual.is-turning .hero-switch__fill { opacity: 1; }

.hero-switch__view {
  position: relative;
  z-index: 1;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-size: .84rem;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.hero-switch__view input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: inherit; opacity: 0; cursor: pointer; }

.hero-switch__view svg.i { width: 16px; height: 16px; stroke-width: 1.6; }

.hero-switch__view:hover,
.hero-switch__view:has(input:checked) { color: var(--ink); }

.hero-switch__view:has(input:focus-visible) { outline: 2.5px solid var(--focus); outline-offset: 2px; }

/* Shown from first paint when motion is welcome (`js-anim`), and while it is (`is-moving`). */
.hero-switch__pause {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--muted);
  cursor: pointer;
}

.js-anim .hero-switch__pause,
.hero__visual.is-moving .hero-switch__pause { display: grid; }

.hero__visual.is-live:not(.is-moving) .hero-switch__pause { display: none; }

.hero-switch__pause:hover { border-color: var(--line-strong); color: var(--ink); }

.hero-switch__pause:focus-visible { border-radius: 999px; }

.hero-switch__pause svg.i { width: 16px; height: 16px; }

.hero-switch__icon-pause { stroke-width: 2.4; }

.hero-switch svg.hero-switch__icon-play { fill: currentColor; stroke-width: 1.2; }

.hero-switch__icon-play,
.hero__visual.is-paused .hero-switch__icon-pause { display: none; }

.hero__visual.is-paused .hero-switch__icon-play { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .hero-switch__thumb { transition: transform 360ms cubic-bezier(.22, 1, .36, 1); }
  .hero-switch__fill { transition: opacity 240ms ease; }
  .hero-switch__view { transition: color 160ms ease; }
  .hero-switch__pause { transition: border-color 160ms ease, color 160ms ease; }
}

.hero-captions { display: grid; margin-top: 14px; }

/* The captions share a cell, which keeps the taller one's height. With the
   script, the first one shows each view's caption in turn (hero-views.js). */
.hero-captions > span { grid-area: 1 / 1; }

@media (min-width: 560px) {
  .hero__copy h1 > span { display: block; }
}

@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: 56px; }
  .hero__copy h1 { font-size: clamp(2rem, 4.1vw - .4rem, 3.3rem); }
}

@media (max-width: 559.98px) {
  .hero__copy .btn { width: 100%; }
}

/* The loop -------------------------------------------------------------------- */

.loop { display: grid; gap: 14px; margin: 0 0 clamp(48px, 7vw, 88px); padding: 0; list-style: none; }

.loop li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }

.loop__n { grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: .88rem; font-weight: 720; }

.loop li:last-child .loop__n { background: var(--ink); color: var(--paper); }

.loop p { color: var(--muted); font-size: .95rem; line-height: 1.55; }

@media (min-width: 960px) {
  .loop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.choices { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }

.choices div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }

.choices dt { font-weight: 700; }

.choices dd { margin: 0; color: var(--muted); }

/* Horizon --------------------------------------------------------------------- */

.ribbon-wrap { margin-bottom: clamp(40px, 6vw, 72px); }

.kinds { display: grid; gap: 14px; }

.kinds li { position: relative; padding-left: 26px; color: var(--muted); }

.kinds li::before { content: ""; position: absolute; left: 3px; top: .45em; width: 11px; height: 11px; border-radius: 3px; background: var(--k); }

.kinds b { color: var(--ink); font-weight: 680; }

.credit { padding: 12px 14px; border-left: 2px solid color-mix(in srgb, var(--misogi) 55%, transparent); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--misogi) 6%, transparent); color: var(--muted); font-size: .92rem; }

.print-note { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-strong); }

.print-note svg.i { width: 22px; height: 22px; margin-top: 1px; color: var(--ink); }

.print-note b { color: var(--ink); font-weight: 680; }

.credit a { color: var(--ink); font-weight: 620; text-decoration-color: color-mix(in srgb, var(--misogi) 60%, transparent); text-underline-offset: 3px; }

/* Progress -------------------------------------------------------------------- */

.trophies { margin-top: clamp(40px, 6vw, 64px); }

/* Yours ----------------------------------------------------------------------- */

.features { display: grid; gap: 0; border-top: 1px solid var(--line); }

.features li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--muted); }

.features svg.i { width: 22px; height: 22px; margin-top: 1px; color: var(--ink); }

.features b { color: var(--ink); font-weight: 680; }

/* The question form (the Contact page, welcome/contact-form.js) --------------
   On the Contact page's light card, which gives the --band-* tokens the
   page's own colours (contact/contact.css). */

.ask-form { display: grid; gap: 18px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

@media (min-width: 640px) {
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--wide { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
  .fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.field { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; min-width: 0; }

.field > span,
.field > label { font-size: .9rem; font-weight: 620; }

.field em { color: var(--band-muted); font-style: normal; font-weight: 500; }

.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--band-line);
  border-radius: 11px;
  background: var(--band-field);
  color: var(--band-ink);
  font-size: 1rem;
}

.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

/* The question: its box is the form's main field. */
.ask-form .field textarea { min-height: 144px; }

.field input::placeholder,
.field textarea::placeholder { color: color-mix(in srgb, var(--band-muted) 75%, transparent); }

.field input:focus-visible,
.field textarea:focus-visible { outline: 2.5px solid var(--band-accent); outline-offset: 1px; border-color: transparent; }

.field [aria-invalid="true"] { border-color: var(--band-error); }

.field__err { color: var(--band-error); font-size: .85rem; }

.field__err:empty { display: none; }

.field__count { justify-self: end; color: var(--band-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* The end of the form: the fine print on the left, the button on the right,
   where the eye finishes the form; stacked on a phone, button last. */
.ask-form__foot { display: grid; gap: 18px; margin-top: 4px; padding-top: 22px; border-top: 1px solid var(--band-line); }

.ask-form__fine { display: grid; align-content: center; justify-items: start; gap: 8px; min-width: 0; }

/* The information notice under the form (no box to tick): its lines of even
   length, and its link never broken in two. */
.form-privacy { max-width: 54em; color: var(--band-muted); font-size: .88rem; line-height: 1.5; text-wrap: balance; }

.form-privacy a { color: var(--band-ink); text-underline-offset: 3px; white-space: nowrap; }

.form-error { padding: 12px 14px; border-radius: 11px; background: color-mix(in srgb, var(--band-error) 14%, transparent); color: var(--band-ink); }

.ask-form__actions { display: flex; justify-content: flex-end; }

.btn--send { min-width: 13.5rem; }

.ask-form .btn[disabled] { opacity: .5; cursor: not-allowed; }

.form-off { color: var(--band-accent); font-weight: 600; }

@media (min-width: 640px) {
  .ask-form__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 40px; }
}

.form-done { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 1px solid var(--band-line); border-radius: 16px; background: var(--band-field); font-size: 1.05rem; }

.form-done > div { display: grid; justify-items: start; gap: 6px; }

.form-done .btn--text-light { min-height: 40px; padding-inline: 0; font-size: .95rem; }

.form-done svg.i { width: 26px; height: 26px; padding: 4px; border-radius: 999px; background: var(--band-accent); color: var(--band-bg); stroke-width: 2.4; }

.form-done:focus { outline: 0; }

@media (max-width: 639.98px) {
  .ask-form__actions .btn { width: 100%; }
}

/* Ticked lists: the app's ticked checkbox. */
.oks { display: grid; align-content: start; gap: 13px; margin: 0; padding: 0; list-style: none; }

.oks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font-weight: 560; line-height: 1.45; }

.ok { width: 20px; height: 20px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 6px; background: var(--ink); color: var(--paper); }

.oks .ok { margin-top: .1em; }

.ok svg.i { width: 14px; height: 14px; stroke-width: 2.6; }

/* FAQ: one answer at a time ---------------------------------------------------- */

.faq { display: grid; gap: 28px; }

.faq__intro { display: grid; align-content: start; gap: 12px; }

.faq__intro p { color: var(--muted); max-width: 26em; }

@media (min-width: 960px) {
  .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
  /* "Questions" stays in view, under the header, while the answers scroll by. */
  .faq__intro { position: sticky; top: calc(var(--top-h) + 32px); align-self: start; }
}

.faq__groups { display: grid; gap: 40px; }

.faq__label { margin-bottom: 8px; color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.faq__list { border-top: 1px solid var(--line); }

.qa { border-bottom: 1px solid var(--line); }

.qa summary {
  position: relative;
  display: block;
  padding: 18px 44px 18px 0;
  font-size: 1.06rem;
  font-weight: 650;
  letter-spacing: -.012em;
  cursor: pointer;
  list-style: none;
}

.qa summary::-webkit-details-marker { display: none; }

.qa summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m8 10 4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m8 10 4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

.qa summary:hover::after { background: var(--ink); }

.qa[open]:not(.is-closing) summary::after { transform: rotate(180deg); }

@media (prefers-reduced-motion: no-preference) {
  .qa summary::after { transition: transform 300ms cubic-bezier(.22, 1, .36, 1), background-color 140ms ease; }
}

/* Animated by height: padding lives on the content, never on this box. */
.qa__a { overflow: hidden; }

.qa__a > p { max-width: 40em; margin: 0; padding: 0 0 20px; color: var(--muted); }

/* Final CTA + footer ---------------------------------------------------------- */

.final { padding-block: clamp(80px, 10vw, 140px); }

.final__inner { display: grid; justify-items: start; gap: 20px; }

.final h2 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem); }

.final__mark { display: flex; gap: 5px; }

.final__mark i { width: 16px; height: 16px; border-radius: 4px; background: color-mix(in srgb, var(--paint) 34%, var(--surface-strong)); }

.final__mark i:nth-child(2),
.final__mark i:nth-child(4) { background: color-mix(in srgb, var(--paint) 66%, var(--surface-strong)); }

.final__mark i:nth-child(3),
.final__mark i:nth-child(5) { background: var(--paint); }

.final__mark i.is-rest { background: radial-gradient(circle, var(--line-strong) 0 2px, transparent 2.5px); }

.foot { padding: 32px 0 calc(32px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; }

.foot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

.foot__brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; }

.foot__brand img { border-radius: 6px; }

.foot__brand b { margin-right: 6px; color: var(--ink); }

.foot__links,
.foot__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }

.foot__links a:not(.btn),
.foot__legal a { color: var(--muted); font-weight: 560; text-decoration: none; }

.foot__links a:hover,
.foot__legal a:hover { color: var(--ink); text-decoration: underline; }

.foot__brand a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--misogi) 60%, transparent); text-underline-offset: 3px; }

.foot__brand a:hover { text-decoration-color: currentColor; }

.faq__intro a,
.qa__a a { color: var(--ink); font-weight: 620; text-decoration-color: color-mix(in srgb, var(--misogi) 60%, transparent); text-underline-offset: 3px; }

@media (max-width: 759.98px) {
  .foot__brand { flex-basis: 100%; }
}

/* The social links (welcome/page-kit.js): small buttons that say where they
   lead, the sprite's arrow turned to ↗ for a new tab, in the family of the
   pill below (What this page counts), a little firmer. No brand logos. */
.foot__social { display: flex; flex-wrap: wrap; gap: 8px; }

.foot__social a.foot__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .88rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }

.foot__social a.foot__btn:hover { border-color: color-mix(in srgb, var(--ink) 55%, var(--line-strong)); background: var(--surface-strong); text-decoration: none; }

.foot__social a.foot__btn:focus-visible { outline-offset: 2px; border-radius: 999px; }

.foot__btn svg.i { width: 15px; height: 15px; color: var(--muted); stroke-width: 2; transform: rotate(-45deg); }

.foot__btn:hover svg.i { color: var(--ink); }

/* A phone keeps all three on one line from 360px. */
@media (max-width: 759.98px) {
  .foot__social { gap: 6px; }
  .foot__social a.foot__btn { gap: 5px; padding: 0 9px 0 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  .foot__btn { transition: border-color 140ms ease, background-color 140ms ease; }
  .foot__btn svg.i { transition: color 140ms ease, transform 200ms cubic-bezier(.22, 1, .36, 1); }
  .foot__btn:hover svg.i { transform: translate(1.5px, -1.5px) rotate(-45deg); }
}

/* Every footer's second row: the legal pages and Contact, and what the page counts. */
.foot__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .88rem; }

.foot__counts { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; }

.foot__counts:hover { border-color: var(--line-strong); background: var(--surface-strong); color: var(--ink); }

.foot__counts svg.i { width: 16px; height: 16px; }

/* Privacy: the planner's own dialog (styles/core.css, guides.css), at the
   landing page's reading size. A native modal <dialog>; landing.js plays the
   way out (`is-closing`) before closing it. */

html.has-dialog { overflow: hidden; padding-right: var(--scrollbar-gap, 0px); }

.pv {
  width: min(600px, calc(100% - 2 * clamp(12px, 3vw, 24px)));
  max-width: none;
  max-height: min(820px, calc(100dvh - 2 * clamp(12px, 3vw, 24px)));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 70px -12px rgba(25, 22, 17, .28), 0 2px 8px rgba(25, 22, 17, .06);
}

.pv[open] { display: flex; }

.pv::backdrop { background: rgba(32, 29, 25, .32); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

@media (prefers-color-scheme: dark) {
  .pv { box-shadow: 0 24px 70px -10px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .3); }
  .pv::backdrop { background: rgba(6, 5, 4, .6); }
}

@media (prefers-reduced-motion: no-preference) {
  .pv[open] { animation: pv-in 260ms cubic-bezier(.22, 1, .36, 1) both; }
  .pv[open]::backdrop { animation: pv-fade 220ms ease both; }
  .pv.is-closing { animation: pv-out 180ms cubic-bezier(.4, 0, 1, 1) both; }
  .pv.is-closing::backdrop { animation: pv-fade 180ms ease reverse both; }
}

@keyframes pv-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
}

@keyframes pv-out {
  to { opacity: 0; transform: translateY(8px) scale(.99); }
}

@keyframes pv-fade {
  from { opacity: 0; }
}

.pv__panel { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; width: 100%; min-height: 0; }

.pv__close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--muted);
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.pv__close:hover { border-color: var(--line-strong); background: var(--surface-strong); color: var(--ink); }

.pv__close:active { transform: scale(.94); }

.pv__close svg.i { width: 20px; height: 20px; }

.pv__scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 12px; padding: 26px 26px 20px; }

.pv__head { display: grid; gap: 4px; padding-right: 48px; margin-bottom: 6px; }

.pv__eyebrow { color: var(--faint); font-size: .72rem; font-weight: 680; letter-spacing: .08em; text-transform: uppercase; }

.pv__head h2 { font-size: 1.3rem; font-weight: 720; letter-spacing: -.025em; line-height: 1.2; }

.pv__head p:last-child { color: var(--muted); font-size: .92rem; }

.pv [tabindex="-1"]:focus { outline: 0; }

/* Opened from the address (#privacy), the browser's own move to that fragment
   focuses the dialog itself once the page has loaded: like its heading, it is
   not a control, so no ring (Tab still goes to its first control). */
.pv:focus { outline: 0; }

/* Its parts, one under the other; side by side on a wide screen (below). */
.pv__grid { display: grid; gap: 12px; }

.pv__sec { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 16px 18px 16px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); scroll-margin-top: 12px; }

.pv__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--soft); color: var(--ink); }

.pv__icon svg.i { width: 19px; height: 19px; }

.pv__body { display: grid; align-content: start; gap: 8px; min-width: 0; }

.pv__body h3 { padding-top: 6px; font-size: 1rem; font-weight: 690; letter-spacing: -.012em; }

.pv__body p { color: var(--muted); font-size: .92rem; line-height: 1.55; }

.pv__moments { display: grid; margin: 0; padding: 0; list-style: none; }

.pv__moments { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 18px; padding: 2px 0; color: var(--ink); font-size: .88rem; line-height: 1.45; }

.pv__moments li { position: relative; padding-left: 14px; }

.pv__moments li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 999px; background: var(--accent); }

.pv code { padding: 1px 5px; border-radius: 5px; background: var(--soft); color: var(--ink); font: 600 .9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* The flash when the dialog opens on one part (from "How requests are handled"). */
.pv__sec.is-flash { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  .pv__sec { transition: border-color 600ms ease, box-shadow 600ms ease; }
}

/* The planner's privacy switch (styles/guides.css). */
.pv-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 4px; padding: 12px 14px 12px 16px; border-radius: 12px; background: var(--soft); cursor: pointer; }

.pv-toggle strong { display: block; font-size: .94rem; font-weight: 660; }

.pv-toggle small { display: block; margin-top: 2px; color: var(--muted); font-size: .82rem; line-height: 1.4; }

.pv-switch { position: relative; flex: 0 0 auto; width: 42px; height: 24px; margin: 0; border-radius: 999px; background: var(--faint-mark); cursor: pointer; -webkit-appearance: none; appearance: none; }

.pv-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 999px; background: var(--paper); box-shadow: 0 1px 3px rgba(25, 22, 17, .25); }

.pv-switch:checked { background: var(--accent); }

.pv-switch:checked::after { transform: translateX(18px); }

.pv-switch:focus-visible { outline: 2.5px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; border-radius: 999px; }

@media (prefers-reduced-motion: no-preference) {
  .pv-switch { transition: background-color 160ms ease; }
  .pv-switch::after { transition: transform 200ms cubic-bezier(.22, 1, .36, 1); }
}

.pv__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 20px 16px 26px; border-top: 1px solid var(--line); background: var(--surface); }

.pv__policy { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: .92rem; font-weight: 620; text-decoration: none; }

.pv__policy:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 3px; }

.pv__policy svg.i { width: 16px; height: 16px; color: var(--muted); }

.pv__foot .btn { min-width: 96px; }

/* A wide screen (1.35.1): the dialog takes the room, up to 1200px, and its
   parts sit in two columns: Anonymous counts, the longest, on one side,
   Questions on the other, each
   whole (a grid in the page's order, so reading and Tab order don't change;
   the left column is a little narrower, which evens the two heights). At
   1280 × 800 and up it all shows at once, without scrolling: the title and
   its line share a row, the icons sit beside the headings, and the type is a
   step denser. Below 1000px it is the single column above (narrower, the
   two columns would wrap almost every line). */
@media (min-width: 1000px) {
  .pv { width: min(1200px, calc(100% - 48px)); max-height: calc(100dvh - 20px); }
  .pv__scroll { gap: 14px; padding: 20px 24px 16px; }
  .pv__grid { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); grid-template-rows: auto auto 1fr; gap: 12px 14px; align-items: start; }
  .pv__grid > .pv__sec { break-inside: avoid; }
  .pv__sec[data-privacy-section="counts"] { grid-row: 1 / -1; }
  .pv__sec { position: relative; display: block; padding: 12px 18px 14px 16px; }
  .pv__icon { position: absolute; top: 12px; left: 14px; width: 28px; height: 28px; border-radius: 8px; }
  .pv__icon svg.i { width: 16px; height: 16px; }
  .pv__body { gap: 7px; }
  .pv__body h3 { min-height: 28px; display: flex; align-items: center; padding: 0 0 0 38px; }
  .pv__body p { font-size: .86rem; line-height: 1.47; }
  .pv__moments { gap: 2px 18px; padding: 0; font-size: .84rem; line-height: 1.38; }
  .pv-toggle { margin-top: 2px; padding: 9px 12px 9px 14px; }
  .pv__foot { padding: 10px 20px 10px 24px; }
}

@media (min-width: 1100px) {
  .pv__head { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 14px; margin-bottom: 2px; }
  .pv__eyebrow { grid-column: 1 / -1; }
}

@media (max-width: 559.98px) {
  .pv { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 14px; }
  .pv__close { top: 10px; right: 10px; }
  .pv__scroll { padding: 20px 16px 16px; }
  .pv__head { padding-right: 44px; }
  .pv__head h2 { font-size: 1.2rem; }
  .pv__sec { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
  .pv__icon { display: none; }
  .pv__body h3 { padding-top: 0; }
  .pv__moments { grid-template-columns: minmax(0, 1fr); }
  .pv__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
}

/* Mobile dock: a sticky call to action once the hero has scrolled away. */

.dock {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translateY(105%);
  visibility: hidden;
}

.dock .btn { width: 100%; }

@media (max-width: 759.98px) {
  .dock { display: block; }
  .dock.is-visible { transform: none; visibility: visible; }
  body { padding-bottom: 76px; }
}

.motion-ok .dock { transition: transform 260ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 260ms; }

.motion-ok .dock.is-visible { transition: transform 260ms cubic-bezier(.22, 1, .36, 1), visibility 0s; }

/* The yearly ritual ------------------------------------------------------------ */

.kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--paint); font-size: .95rem; font-weight: 680; }

.kicker svg.i { width: 20px; height: 20px; }

.split__copy p b { color: var(--ink); font-weight: 680; }

.yearly-split { margin-top: clamp(8px, 2vw, 16px); }

.yearly-split + .yearly-split { margin-top: clamp(64px, 8vw, 104px); }

/* The yearly ritual: plan it, print it, check in, look back, then again next year. */
.ritual { position: relative; display: grid; justify-items: center; gap: 14px; margin: 0 0 clamp(64px, 8vw, 104px); }

.ritual__steps { --gap: 36px; position: relative; display: grid; gap: 28px; width: 100%; margin: 0; padding: 0; list-style: none; }

.ritual__step { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: start; gap: 14px; padding: 16px 18px 16px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-strong); }

.ritual__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--paint) 11%, var(--surface-strong)); color: var(--paint); }

.ritual__icon svg.i { width: 24px; height: 24px; }

.ritual__text { display: grid; gap: 2px; min-width: 0; padding-top: 1px; }

.ritual__text b { display: flex; align-items: center; gap: 8px; font-size: 1.06rem; font-weight: 700; letter-spacing: -.016em; }

.ritual__text > span { color: var(--muted); font-size: .93rem; line-height: 1.45; }

.ritual__n { width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .7rem; font-weight: 750; letter-spacing: 0; }

/* Between two steps, an arrow in the gap: down when stacked, across side by side. */
.ritual__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 39px;
  top: 100%;
  width: 18px;
  height: 28px;
  background: var(--line-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 28'%3E%3Cpath d='M9 6v15M4.5 17 9 21.5 13.5 17' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 28px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 28'%3E%3Cpath d='M9 6v15M4.5 17 9 21.5 13.5 17' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 28px no-repeat;
}

.ritual__loop { display: flex; justify-content: center; color: var(--paint); font-size: .88rem; font-weight: 680; }

.ritual__loop span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--paint) 9%, var(--surface-strong)); }

.ritual__loop svg.i { width: 17px; height: 17px; }

@media (min-width: 860px) {
  .ritual { gap: 0; padding-bottom: 36px; }
  .ritual__steps { --gap: 28px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
  .ritual__step:not(:last-child)::after { left: calc(100% + 1px); top: 50%; width: calc(var(--gap) - 2px); height: 18px; margin-top: -9px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 18'%3E%3Cpath d='M6 9h15M17 4.5 21.5 9 17 13.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px 18px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 18'%3E%3Cpath d='M6 9h15M17 4.5 21.5 9 17 13.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px 18px no-repeat; }
  /* From the last step back to the first: a dashed return under the row. */
  .ritual__loop { position: absolute; left: calc((100% - 3 * 28px) / 8); right: calc((100% - 3 * 28px) / 8); top: calc(100% - 36px); height: 24px; border: 1.5px dashed color-mix(in srgb, var(--paint) 42%, var(--line-strong)); border-top: 0; border-radius: 0 0 18px 18px; }
  .ritual__loop::before { content: ""; position: absolute; left: -5.5px; top: -1px; width: 8px; height: 8px; border-left: 1.5px solid color-mix(in srgb, var(--paint) 70%, var(--line-strong)); border-top: 1.5px solid color-mix(in srgb, var(--paint) 70%, var(--line-strong)); transform: rotate(45deg); }
  .ritual__loop span { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); background: var(--paper); box-shadow: 0 0 0 5px var(--paper); }
}

/* Four in a row, but narrow: the icon above the words. */
@media (min-width: 860px) and (max-width: 1199.98px) {
  .ritual__step { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; padding: 16px 16px 18px; }
  .ritual__icon { width: 40px; height: 40px; border-radius: 12px; }
  .ritual__icon svg.i { width: 22px; height: 22px; }
}

/* "Step 2 · Print it", above each part of the ritual. */
.ritual-tag { color: var(--paint); font-size: .8rem; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }

.split__copy > p.ritual-tag { margin-bottom: -8px; color: var(--paint); }

.steps { display: grid; gap: 8px; counter-reset: step; }

.steps li { display: flex; align-items: center; gap: 12px; font-weight: 560; counter-increment: step; }

.steps li::before { content: counter(step); width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--paint) 12%, var(--surface-strong)); color: var(--paint); font-size: .8rem; font-weight: 740; }

/* Colours for the painted year beside “On all your devices”: one row on a wide
   screen, the palettes in full width above a horizontal card below that. */
.yearly-more { display: grid; gap: 18px; margin-top: clamp(64px, 8vw, 104px); }

@media (min-width: 1200px) {
  .yearly-more { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.yearly-card { display: grid; align-content: start; gap: 8px; min-width: 0; padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--line); border-radius: 22px; background: var(--surface-strong); }

.yearly-card h3 { display: flex; align-items: center; gap: 10px; font-size: clamp(1.1rem, 1.04rem + .25vw, 1.22rem); letter-spacing: -.02em; }

.yearly-card h3 svg.i { width: 22px; height: 22px; color: var(--paint); }

.yearly-card p { max-width: 36em; color: var(--muted); }

/* The palettes: each swatch is a button; the painted year takes the colours of
   the one under the pointer, the focused one, or the one pressed (palette-card.js). */
.yearly-card--paint { grid-template-areas: "head" "preview" "swatches"; gap: 20px; }

.pal__head { grid-area: head; display: grid; gap: 8px; }

.pal__swatches { grid-area: swatches; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 8px; }

.pal__preview { grid-area: preview; min-width: 0; }

.pal-sw { --paint-1: initial; --paint-2: initial; --paint-joker: initial; }

.pal-sw--terracotta,
.yearly-card--paint[data-palette="terracotta"] { --paint: var(--misogi); }

.pal-sw--ocean,
.yearly-card--paint[data-palette="ocean"] { --paint: var(--pal-ocean); }

.pal-sw--forest,
.yearly-card--paint[data-palette="forest"] { --paint: var(--pal-forest); }

.pal-sw--plum,
.yearly-card--paint[data-palette="plum"] { --paint: var(--pal-plum); }

.pal-sw--graphite,
.yearly-card--paint[data-palette="graphite"] { --paint: var(--pal-graphite); --paint-1: var(--pal-graphite-1); }

.pal-sw--sunset,
.yearly-card--paint[data-palette="sunset"] { --paint: var(--pal-sunset); --paint-1: var(--pal-sunset-1); --paint-2: var(--pal-sunset-2); --paint-joker: var(--pal-sunset-joker); }

.pal-sw {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ramp name";
  align-items: center;
  gap: 3px 11px;
  min-width: 0;
  min-height: 56px;
  padding: 8px 12px 8px 9px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
  color: var(--ink);
  font-size: .93rem;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.pal-sw:hover { border-color: color-mix(in srgb, var(--paint) 50%, var(--line-strong)); background: color-mix(in srgb, var(--paint) 4%, var(--surface-strong)); }

.pal-sw[aria-pressed="true"] { border-color: var(--paint); box-shadow: inset 0 0 0 1px var(--paint); background: color-mix(in srgb, var(--paint) 8%, var(--surface-strong)); }

.pal-sw:focus-visible { outline-offset: 2px; border-radius: 14px; }

/* A paint chip: the palette's three levels side by side. */
.pal-sw__ramp { grid-area: ramp; width: 34px; height: 34px; display: flex; overflow: hidden; border-radius: 9px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent); }

.pal-sw__ramp i { flex: 1 1 0; }

.pal-sw__ramp i:nth-child(1) { background: var(--paint-1, color-mix(in srgb, var(--paint) 34%, var(--surface-strong))); }

.pal-sw__ramp i:nth-child(2) { background: var(--paint-2, color-mix(in srgb, var(--paint) 66%, var(--surface-strong))); }

.pal-sw__ramp i:nth-child(3) { background: var(--paint); }

.pal-sw__name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The painted year, larger than in the Progress replica. */
.pal-year { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1.1em; height: 100%; padding: 1.3em 1.4em 1.25em; border: 1px solid var(--line); border-radius: 1.25em; background: var(--surface); font-size: clamp(9px, 2.6cqi, 13px); }

.pal-year__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }

.pal-year__title { display: grid; gap: .15em; min-width: 0; }

.pal-year__title small { color: var(--faint); font-size: max(.68em, 10px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.pal-year__title b { color: var(--paint); font-size: 1.75em; font-weight: 750; letter-spacing: -.04em; line-height: 1.05; }

.pal-year__grid { align-content: center; }

.pal-year .cell { border-radius: .26em; }

.pal-year .cell.l1,
.pal-year .pal-year__legend .l1::before { background: var(--paint-1, color-mix(in srgb, var(--paint) 34%, var(--surface-strong))); }

.pal-year .cell.l2,
.pal-year .pal-year__legend .l2::before { background: var(--paint-2, color-mix(in srgb, var(--paint) 66%, var(--surface-strong))); }

.pal-year .cell.joker { background: color-mix(in srgb, var(--paint-joker, var(--milestone)) 22%, var(--surface-strong)); box-shadow: inset 0 0 0 1.5px var(--paint-joker, var(--milestone)); }

.pal-year .pal-year__legend { margin-top: 0; }

.pal-year .pal-year__legend li { font-size: max(.7em, 10.5px); }

.pal-year .pal-year__legend li::before { width: 1.1em; height: 1.1em; }

/* Recolouring sweeps across the year, from January 1 to December 31. */
.motion-ok .pal-year .cell { transition: background-color 420ms ease calc(var(--w, 0) * 7ms), box-shadow 420ms ease calc(var(--w, 0) * 7ms); }

.motion-ok .pal-year .pal-year__legend li::before { transition: background-color 420ms ease 120ms; }

.motion-ok .yearly-card--paint :is(.pal-year__title b, h3 svg.i) { transition: color 300ms ease; }

.motion-ok .pal-sw { transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms cubic-bezier(.22, 1, .36, 1); }

.motion-ok .pal-sw:active { transform: scale(.98); }

@media (min-width: 640px) {
  .pal__swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pal-sw { min-height: 50px; }
  .pal-sw__ramp { width: 30px; height: 30px; border-radius: 8px; }
}

/* Wide enough: the swatches as a list beside the painted year. */
@media (min-width: 960px) {
  .yearly-card--paint { grid-template-columns: minmax(196px, 13.5rem) minmax(0, 1fr); grid-template-areas: "head head" "swatches preview"; gap: 24px 24px; }
  .pal__swatches { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* On all your devices: the same year on every device, then the words. Beside
   the palettes it fills its column: the devices centred, the words at the foot. */
.yearly-card--once { align-content: center; gap: 26px; }

.once__devices { display: flex; align-items: center; justify-content: center; min-height: 116px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }

.once__devices { --dev: 58px; --dev-gap: 28px; }

.once__device { position: relative; width: var(--dev); height: var(--dev); flex: 0 0 auto; display: grid; place-items: center; border-radius: 17px; background: color-mix(in srgb, var(--paint) 9%, var(--surface-strong)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paint) 16%, transparent); color: var(--paint); }

.once__device > svg.i { width: calc(var(--dev) * .48); height: calc(var(--dev) * .48); }

.once__device + .once__device { margin-left: var(--dev-gap); }

.once__device + .once__device::before { content: ""; position: absolute; right: calc(100% + 4px); top: 50%; width: calc(var(--dev-gap) - 8px); border-top: 1.5px dashed color-mix(in srgb, var(--paint) 45%, var(--line-strong)); }

.once__device > i { position: absolute; right: -6px; top: -6px; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 999px; background: var(--paint); box-shadow: 0 0 0 2.5px var(--surface-strong); color: var(--surface-strong); }

.once__device > i svg.i { width: 13px; height: 13px; stroke-width: 2.8; }

.once__copy { display: grid; gap: 8px; }

@media (min-width: 1200px) {
  .yearly-card--once { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
  .once__devices { --dev: 68px; --dev-gap: 34px; }
}

@media (min-width: 760px) and (max-width: 1199.98px) {
  .yearly-card--once { grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); align-items: center; gap: 24px; }
  .once__devices { --dev: 48px; --dev-gap: 22px; min-height: 100px; padding-inline: 12px; }
}

/* Free and open source: what it means, on the left; the way in, and the
   project's own links when they are set, on a raised card on the right
   (page-kit.js renderProjectLinks). On a phone: the words, the card, then
   the list. */
.oss {
  display: grid;
  grid-template-areas: "head" "aside" "list";
  gap: 24px;
  padding: clamp(22px, 3.6vw, 48px);
  border: 1px solid color-mix(in srgb, var(--paint) 26%, var(--line));
  border-radius: 28px;
  background: radial-gradient(110% 130% at 0% 0%, color-mix(in srgb, var(--paint) 9%, transparent), transparent 62%), var(--surface-strong);
}

.oss__head { grid-area: head; display: grid; align-content: start; gap: 12px; }

.oss__head h2 { max-width: 15em; }

.oss__head .lead { max-width: 34em; }

.oss__aside { grid-area: aside; min-width: 0; }

.oss__card {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid color-mix(in srgb, var(--paint) 38%, var(--line));
  border-radius: 20px;
  background: var(--surface-strong);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--paint) 10%, transparent), 0 28px 60px -38px color-mix(in srgb, var(--paint) 72%, transparent);
}

.oss__card-title { font-size: 1.08rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; text-wrap: balance; }

.oss__links { display: grid; gap: 10px; }

.oss__links .btn { width: 100%; }

.oss__links .btn svg.i { width: 19px; height: 19px; }

.oss__trust { display: flex; align-items: flex-start; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .87rem; line-height: 1.45; }

.oss__trust svg.i { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--paint); }

.oss__list { grid-area: list; gap: 16px; }

.oss__list li > span:last-child { display: grid; align-content: start; gap: 1px; }

.oss__list b { font-weight: 690; letter-spacing: -.012em; }

.oss__list b + span { color: var(--muted); font-size: .93rem; font-weight: 500; }

@media (min-width: 760px) {
  .oss { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); grid-template-areas: "head aside" "list aside"; gap: 30px clamp(32px, 5vw, 72px); }
  .oss__aside { align-self: start; }
}

/* Narrower: the words across the top, the list beside the card. */
@media (min-width: 760px) and (max-width: 1099.98px) {
  .oss { grid-template-areas: "head head" "list aside"; }
}

@media (min-width: 1100px) {
  /* The card spans the words and the list: the words keep their height, the list takes the rest. */
  .oss { grid-template-rows: auto 1fr; }
  .oss__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
}

/* Everything else: the compact tools ------------------------------------------ */

.minis { display: grid; gap: 36px; margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--line); }

@media (min-width: 760px) {
  .minis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

.mini { display: grid; align-content: start; gap: 8px; }

.mini__visual { margin-bottom: 14px; }

.mini h3 { display: flex; align-items: center; gap: 9px; font-size: 1.05rem; }

.mini h3 svg.i { width: 20px; height: 20px; color: var(--muted); }

.mini p { max-width: 30em; color: var(--muted); font-size: .95rem; }

/* Replicas: shared ------------------------------------------------------------ */

.rp-scale { position: relative; container-type: inline-size; }

.rp-scale--pad { padding: 0 0 2.5em; }

.rp-scale--close { padding-bottom: 8.6em; }

.rp {
  position: relative;
  font-size: clamp(9.5px, 2.15cqi, 13.5px);
  line-height: 1.35;
  color: var(--ink);
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
}

.rp svg.i { width: 1.15em; height: 1.15em; }

.rp-window {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 1.1em;
  background: var(--paper);
  box-shadow: var(--shadow-rp);
}

.rp-bar { position: relative; height: 2.3em; display: flex; align-items: center; gap: .42em; padding: 0 .9em; border-bottom: 1px solid var(--line); background: var(--surface); }

.rp-bar i { width: .62em; height: .62em; border-radius: 999px; background: var(--line-strong); }

.rp-bar span { position: absolute; left: 50%; transform: translateX(-50%); padding: .18em .9em; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: .7em; font-weight: 600; white-space: nowrap; }

.rp-top { display: flex; align-items: center; gap: .8em; margin: 0 1.3em; padding: .9em 0 .8em; border-bottom: 1px solid var(--line); }

.rp-iconbtn { width: 2.3em; height: 2.3em; display: grid; place-items: center; border: 1px solid var(--line); border-radius: .65em; background: var(--surface-strong); color: var(--muted); }

.rp-date { display: grid; margin-right: auto; }

.rp-date small { color: var(--faint); font-size: .58em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.rp-date b { font-size: 1.12em; font-weight: 720; letter-spacing: -.035em; white-space: nowrap; }

.rp-nav { display: inline-flex; align-items: center; gap: .5em; padding: .3em .6em; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }

.rp-nav b { font-size: .7em; font-weight: 650; color: var(--ink); }

.rp-tools { display: inline-flex; gap: .8em; margin-left: .6em; color: var(--muted); }

.rp-h { margin: 1.15em 0 .5em; font-size: .86em; font-weight: 700; letter-spacing: -.012em; }

.rp-h:first-child { margin-top: .2em; }

.rp-eyebrow { display: block; margin: 0 0 .3em; color: var(--faint); font-size: .6em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.rp-title { display: block; margin: 0; font-size: 1.12em; font-weight: 720; letter-spacing: -.03em; line-height: 1.2; }

.rp-check {
  width: 1.4em;
  height: 1.4em;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: .42em;
  background: var(--surface-strong);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--paper);
}

.rp .rp-check svg.i { width: .95em; height: .95em; stroke-width: 2.6; opacity: 0; transform: scale(.4); }

.rp-row { display: flex; align-items: center; gap: .65em; min-height: 2.9em; margin-bottom: .45em; padding: .5em .7em; border-radius: .75em; background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 82%, transparent); font-size: .92em; font-weight: 580; }

.rp-row--mit { background: color-mix(in srgb, var(--soft) 55%, var(--surface-strong)); font-weight: 680; letter-spacing: -.015em; }

.rp-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: transparent; }

/* Ticked rows (static .is-done, or animated through the scene's state classes). */
.rp-row.is-done .rp-check,
.rp--day.s-mit .rp-tick .rp-check,
.rp--sync.s-tap .rp-tick--phone .rp-check,
.rp--sync.s-done :is(.rp-tick--laptop, .rp-tick--tablet) .rp-check { background: var(--ink); box-shadow: none; }

.rp-row.is-done .rp-check svg.i,
.rp--day.s-mit .rp-tick .rp-check svg.i,
.rp--sync.s-tap .rp-tick--phone .rp-check svg.i,
.rp--sync.s-done :is(.rp-tick--laptop, .rp-tick--tablet) .rp-check svg.i { opacity: 1; transform: none; }

.rp-row.is-done .rp-txt,
.rp--day.s-mit .rp-tick .rp-txt,
.rp--sync.s-tap .rp-tick--phone .rp-txt,
.rp--sync.s-done :is(.rp-tick--laptop, .rp-tick--tablet) .rp-txt { color: var(--muted); }

.rp-row.is-done .rp-txt,
.rp--day.s-mit .rp-tick .rp-txt,
.rp--sync.s-tap .rp-tick--phone .rp-txt,
.rp--sync.s-done :is(.rp-tick--laptop, .rp-tick--tablet) .rp-txt { text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); }

.rp-row.is-done { opacity: .7; }

.motion-ok .rp .rp-check { transition: background-color 200ms ease, box-shadow 200ms ease; }

.motion-ok .rp .rp-check svg.i { transition: opacity 200ms ease, transform 320ms cubic-bezier(.34, 1.56, .64, 1); }

.motion-ok .rp .rp-txt { transition: color 300ms ease, text-decoration-color 300ms ease 100ms; }

.rp-pop { position: absolute; z-index: 3; border: 1px solid var(--line); border-radius: 1em; background: var(--surface-strong); box-shadow: var(--shadow-pop); }

.rp-field { display: block; min-height: 2.6em; padding: .6em .75em; border: 1px solid var(--line); border-radius: .6em; background: var(--surface-strong); color: var(--ink); font-size: .82em; font-style: normal; font-weight: 540; }

[data-type]::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: var(--ink); opacity: 0; }

.rp.is-playing [data-type].is-typing::after { animation: rp-caret 900ms steps(1) infinite; }

@keyframes rp-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Paint cells (shared by the hero pop-up and the Progress replica). */
.cell { display: block; aspect-ratio: 1; min-width: 0; border-radius: .22em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent); }

.cell.l1 { background: color-mix(in srgb, var(--paint) 34%, var(--surface-strong)); box-shadow: none; }

.cell.l2 { background: color-mix(in srgb, var(--paint) 66%, var(--surface-strong)); box-shadow: none; }

.cell.l3 { background: var(--paint); box-shadow: none; }

.cell.rest { background: radial-gradient(circle, color-mix(in srgb, var(--line-strong) 85%, transparent) 0 14%, transparent 18%); box-shadow: none; }

.cell.miss { background: color-mix(in srgb, var(--line) 55%, var(--soft)); box-shadow: none; }

.cell.joker { background: color-mix(in srgb, var(--milestone) 22%, var(--surface-strong)); box-shadow: inset 0 0 0 1.5px var(--milestone); }

.cell.before { opacity: .55; }

.cell.none { visibility: hidden; }

/* Hero: the Day view ---------------------------------------------------------- */

.rp--day { padding: 0 0 3.6em; }

.rp-day { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 1.6em; padding: 1em 1.3em 1.3em; }

.rp-focus { position: relative; min-height: 2.3em; display: flex; align-items: center; padding: .3em 0 .55em; border-bottom: 1px solid var(--line-strong); font-size: .95em; font-weight: 540; white-space: nowrap; }

.rp-focus em { position: absolute; left: 0; color: var(--faint); font-style: normal; opacity: 0; }

.rp-focus span:empty ~ em { opacity: 1; }

/* The pointer ticks the most important outcome: its box dips as it fills. */
.rp--day.d-tick .rp-row--mit .rp-check { box-shadow: 0 0 0 .3em color-mix(in srgb, var(--paint) 22%, transparent); transform: scale(.84); }

.motion-ok .rp--day .rp-row--mit .rp-check { transition: background-color 200ms ease, box-shadow 220ms ease, transform 160ms cubic-bezier(.22, 1, .36, 1); }

.rp-sched { position: relative; min-width: 0; }

.rp-sched__head { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin: .1em 0 .8em; }

.rp-sched__head b { font-size: .95em; font-weight: 720; letter-spacing: -.02em; }

.rp-closebtn { display: inline-flex; align-items: center; gap: .45em; padding: .45em .75em; border: 1px solid var(--line); border-radius: .6em; background: var(--surface); color: var(--muted); font-size: .74em; font-weight: 620; white-space: nowrap; }

.rp-closebtn svg.i { width: 1.4em; height: 1.4em; }

/* The pointer reaches it (hover), then presses it. */
.rp--day.d-hover .rp-closebtn,
.rp--day.d-press .rp-closebtn { border-color: var(--line-strong); background: var(--surface-strong); color: var(--ink); }

.rp--day.d-press .rp-closebtn { background: var(--soft); box-shadow: 0 0 0 .32em color-mix(in srgb, var(--paint) 22%, transparent); transform: scale(.93); }

.motion-ok .rp-closebtn { transition: transform 160ms cubic-bezier(.22, 1, .36, 1), background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 220ms ease; }

.rp-hours { --hh: 2.85em; position: relative; height: calc(var(--n) * var(--hh) + 1em); }

.rp-hours > span { position: absolute; left: 0; right: 0; top: calc(var(--h) * var(--hh)); border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }

.rp-hours > span b { position: absolute; left: 0; top: -.65em; padding-right: .4em; background: var(--paper); color: var(--faint); font-size: .62em; font-weight: 650; font-variant-numeric: tabular-nums; }

.rp-block {
  position: absolute;
  left: 3.4em;
  right: 0;
  top: calc(var(--s) * var(--hh) + 1px);
  height: calc(var(--d) * var(--hh) - 3px);
  display: flex;
  flex-direction: column;
  gap: .1em;
  overflow: hidden;
  padding: .35em .6em .35em .8em;
  border-radius: .55em;
  background: color-mix(in srgb, var(--c) 11%, var(--surface));
  box-shadow: inset .2em 0 0 var(--c), inset 0 0 0 1px color-mix(in srgb, var(--c) 15%, transparent);
}

.rp-block b { overflow: hidden; font-size: .76em; font-weight: 680; white-space: nowrap; text-overflow: ellipsis; }

.rp-block small { overflow: hidden; color: var(--muted); font-size: .62em; white-space: nowrap; text-overflow: ellipsis; }

.rp-block--short { flex-direction: row; align-items: center; gap: .6em; padding-block: 0; }

.rp--day:not(.s-block) .rp-block--new { opacity: 0; transform: translateX(30%); }

.motion-ok .rp-block--new { transition: opacity 360ms ease, transform 640ms cubic-bezier(.22, 1, .36, 1); }

.rp-now { position: absolute; z-index: 2; left: 2.9em; right: 0; top: calc(var(--s) * var(--hh)); border-top: 1.5px solid var(--now); }

.rp-now span { position: absolute; left: -.2em; top: -.75em; padding: .05em .45em; border-radius: .4em; background: var(--now); color: var(--on-now); font-size: .58em; font-weight: 700; transform: translateX(-100%); }

.rp-pop--closed { right: -1.2em; bottom: 0; width: 19em; padding: .95em 1em .9em; }

.rp--day:not(.s-closed) .rp-pop--closed { opacity: 0; transform: translateY(1.2em) scale(.96); }

.motion-ok .rp-pop--closed { transition: opacity 320ms ease, transform 520ms cubic-bezier(.22, 1, .36, 1); }

.rp-pop__head { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-bottom: .7em; }

.rp-pop__head > span { color: var(--muted); font-size: .72em; font-weight: 650; }

.rp-pop__head b { display: inline-flex; align-items: center; gap: .3em; color: var(--paint); font-size: .8em; font-weight: 720; }

.rp-month { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: .26em; }

.rp-month .cell { border-radius: .2em; }

.rp--day:not(.s-closed) .rp-month .is-today { background: transparent; box-shadow: inset 0 0 0 1.5px var(--paint); }

.motion-ok .rp--day.s-closed .rp-month .is-today { animation: rp-paint-in 900ms cubic-bezier(.34, 1.56, .64, 1) 350ms both; }

@keyframes rp-paint-in {
  0% { transform: scale(.2); opacity: 0; }
  60% { transform: scale(1.5); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

.rp-pop__foot { margin-top: .7em; color: var(--muted); font-size: .66em; }

.rp-pop__foot { display: flex; align-items: center; gap: .4em; }

.rp-pop__foot svg.i { color: var(--paint); }

.rp-pop__foot b { color: var(--ink); font-weight: 650; }

@container (max-width: 520px) {
  .rp--day .rp-optional,
  .rp--day .rp-tools,
  .rp--day .rp-nav { display: none; }
  .rp--day .rp-day { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1em; padding-inline: 1em; }
  .rp--day .rp-top { margin-inline: 1em; }
  .rp--day .rp-focus { font-size: .88em; }
  .rp-pop--closed { right: .6em; width: 17.5em; }
}

/* The hero's pointer and Close day sheet exist only while the scene plays:
   the final frame (reduced motion, no script, print) shows neither. */

.rp--day .rp-window { position: relative; }

.rp-scrim { position: absolute; z-index: 4; inset: 0; background: var(--scrim); opacity: 0; pointer-events: none; }

.rp-modal {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: min(25em, calc(100% - 2em));
  display: grid;
  gap: .7em;
  padding: 1.1em 1.1em 1em;
  border: 1px solid var(--line);
  border-radius: 1.1em;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -45%) scale(.97);
}

.rp--day.d-modal .rp-scrim { opacity: 1; }

.rp--day.d-modal .rp-modal { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }

.motion-ok .rp-scrim { transition: opacity 320ms ease; }

.motion-ok .rp-modal { transition: opacity 240ms ease, transform 440ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 440ms; }

.motion-ok .rp--day.d-modal .rp-modal { transition: opacity 260ms ease, transform 460ms cubic-bezier(.22, 1, .36, 1), visibility 0s; }

.rp-modal .rp-eyebrow { margin: 0; }

.rp-modal__title { margin: -.45em 0 0; font-size: 1em; font-weight: 720; letter-spacing: -.025em; line-height: 1.25; }

.rp-modal__sum { display: grid; grid-template-columns: 1fr 1fr 1.45fr; gap: .4em; }

.rp-modal__sum > span { display: flex; align-items: center; justify-content: space-between; gap: .4em; min-height: 2.8em; padding: .4em .7em; border: 1px solid var(--line); border-radius: .65em; background: var(--surface-strong); }

.rp-modal__sum small { color: var(--faint); font-size: .55em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }

.rp-modal__sum b { font-size: 1.05em; font-weight: 720; letter-spacing: -.03em; }

.rp-modal__to b { font-size: .76em; letter-spacing: -.01em; white-space: nowrap; }

.rp-mis { display: grid; gap: .4em; }

.rp-mi { display: flex; align-items: center; justify-content: space-between; gap: .6em; min-height: 3.1em; padding: .35em .4em .35em .75em; border: 1px solid var(--line); border-radius: .7em; background: var(--surface-strong); }

.rp-mi__body { display: grid; gap: .12em; min-width: 0; }

.rp-mi__body b { overflow: hidden; font-size: .78em; font-weight: 640; white-space: nowrap; text-overflow: ellipsis; text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: transparent; }

.rp-mi__body small { color: var(--muted); font-size: .54em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

.rp-mi__chips { display: inline-flex; flex: 0 0 auto; gap: .2em; }

.rp-mc { display: inline-flex; align-items: center; min-height: 2.3em; padding: 0 .62em; border-radius: .5em; color: var(--muted); font-size: .62em; font-weight: 640; white-space: nowrap; }

/* Carried to the next planning day unless something else is chosen. */
.rp-mc--date { background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

.rp--day.d-save .rp-mi--save .rp-mc--date,
.rp--day.d-forget .rp-mi--forget .rp-mc--date { background: transparent; color: var(--muted); }

.rp--day.d-save .rp-mi--save .rp-mc--save { background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }

.rp--day.d-forget .rp-mi--forget .rp-mc--forget { background: color-mix(in srgb, var(--danger) 9%, transparent); color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 26%, transparent); }

.rp--day.d-forget .rp-mi--forget .rp-mi__body { opacity: .55; }

.rp--day.d-forget .rp-mi--forget .rp-mi__body b { text-decoration-color: var(--muted); }

.motion-ok .rp-mc { transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }

.motion-ok .rp-mi__body { transition: opacity 300ms ease; }

.motion-ok .rp-mi__body b { transition: text-decoration-color 300ms ease; }

.rp-modal__field { display: grid; gap: .35em; }

.rp-modal__field small { color: var(--ink); font-size: .68em; font-weight: 680; }

.rp-modal .rp-field { min-height: 2.5em; }

.rp-modal__actions { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: .5em; }

.rp-modal__actions > span { color: var(--muted); font-size: .76em; font-weight: 620; text-align: center; }

.rp-modal__actions .rp-primary { padding: .72em 1em; border-radius: .6em; background: var(--ink); color: var(--paper); }

.rp--day.d-submit .rp-modal .rp-primary { background: color-mix(in srgb, var(--ink) 78%, var(--paper)); box-shadow: 0 0 0 .3em color-mix(in srgb, var(--paint) 24%, transparent); transform: scale(.95); }

.motion-ok .rp-modal .rp-primary { transition: transform 160ms cubic-bezier(.22, 1, .36, 1), background-color 160ms ease, box-shadow 220ms ease; }

/* The pointer (both hero views): a system arrow whose tip sits on (--cx, --cy). */
.rp-cursor { position: absolute; z-index: 6; left: 0; top: 0; width: 2.15em; height: 2.15em; opacity: 0; pointer-events: none; transform: translate(var(--cx, 30em), var(--cy, 24em)); }

.rp.d-cursor .rp-cursor { opacity: 1; }

.motion-ok .rp-cursor { transition: transform var(--move, 700ms) cubic-bezier(.55, .06, .25, 1), opacity 260ms ease; }

.rp-cursor__arrow { position: absolute; left: -.4em; top: -.22em; width: 100%; height: 100%; overflow: visible; fill: #1c1a17; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 .12em .28em rgba(0, 0, 0, .32)); transform-origin: .4em .22em; }

.rp-cursor__ripple { position: absolute; left: -1.7em; top: -1.7em; width: 3.4em; height: 3.4em; border-radius: 999px; background: color-mix(in srgb, var(--paint) 34%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--paint) 55%, transparent); opacity: 0; transform: scale(.15); }

.motion-ok .rp.d-click .rp-cursor__ripple { animation: rp-ripple 620ms cubic-bezier(.22, 1, .36, 1) both; }

.motion-ok .rp.d-click .rp-cursor__arrow { animation: rp-cursor-press 380ms ease both; }

@keyframes rp-ripple {
  0% { opacity: .95; transform: scale(.15); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes rp-cursor-press {
  35% { transform: scale(.8); }
}

@container (max-width: 520px) {
  .rp-modal { gap: .6em; padding: .95em .9em .85em; }
  .rp-modal__title,
  .rp-mc--date { display: none; }
  .rp-modal .rp-eyebrow { margin-bottom: .1em; }
}

/* Hero: Horizon --------------------------------------------------------------- */

/* The same window, Horizon open in it (styles/horizon.css): the section rail,
   the year at a glance, the Misogi and the mini-adventures. The scene fills
   the year in; the pointer presses Add and a key date lands on the map; it
   opens Mini-adventures (the section takes the place of the Overview, as in
   the planner) and ticks one as lived; back on the Overview, it ticks the
   last Misogi milestone. Every state the pointer passes through is a d-
   class: the last frame is the Overview. Same box as the Day view, whose card hangs
   below its window: wide enough, the switch rises into that room beside the
   card (.hero-switch), so Horizon keeps it free; narrower, its window fills
   the whole box, with no empty band above the switch. */
.rp--horizon { padding: 0 0 3.6em; }

@container hero-visual (max-width: 519.98px) {
  .rp--horizon { padding-bottom: 0; }
  /* The room it gains goes half to the year at a glance (around its content), half to the two tiles. */
  .rp--horizon .rp-hz-map { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
  /* Going out, its window is taller than the Day's: once the Day view is in
     over it, the part still showing below fades out too. */
  .hero-view.is-leaving .rp--horizon .rp-window { opacity: 0; }
  .motion-ok .hero-view.is-leaving .rp--horizon .rp-window { transition: opacity 220ms ease 660ms; }
}

.rp--horizon .rp-window { display: flex; flex-direction: column; }

.rp-hz-year { width: 11.5em; display: grid; gap: .4em; margin-right: .5em; }

.rp-hz-year small { color: var(--faint); font-size: .6em; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

.rp-hz-meter { display: block; height: .45em; overflow: hidden; border-radius: 999px; background: var(--soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 55%, transparent); }

.rp-hz-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--k, var(--accent)) 55%, transparent), var(--k, var(--accent))); transform: scaleX(calc(var(--w) / 100)); transform-origin: left center; }

.rp-hz-add { display: inline-flex; align-items: center; gap: .3em; padding: .55em 1em .55em .75em; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .72em; font-weight: 650; white-space: nowrap; }

.rp .rp-hz-add svg.i { width: 1.4em; height: 1.4em; stroke-width: 2; }

.rp-hz { flex: 1 1 auto; display: grid; grid-template-columns: 12.8em minmax(0, 1fr); gap: 1.1em; padding: 1em 1.3em 1.3em; }

/* The section rail: Overview is open, and Mini-adventures while the pointer
   has it open (d-adv). The open section sits on a card that slides to it. */
.rp-hz-nav { position: relative; display: grid; align-content: start; gap: .2em; padding-right: .9em; border-right: 1px solid var(--line); }

.rp-hz-pill { position: absolute; z-index: 0; left: 0; right: .9em; top: 0; height: 3em; border-radius: .75em; background: var(--surface-strong); box-shadow: 0 1px 2px rgba(25, 22, 17, .05), 0 .5em 1.4em rgba(25, 22, 17, .06), inset 0 0 0 1px var(--line); }

/* Mini-adventures is the third section: two rows (3em) and their gaps below Overview. */
.rp--horizon.d-adv .rp-hz-pill { transform: translateY(6.4em); }

.rp-hz-sec { position: relative; z-index: 1; display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; align-items: center; gap: .55em; padding: .5em .5em; border-radius: .75em; color: var(--muted); }

.rp-hz-sec > i { width: 2em; height: 2em; display: grid; place-items: center; border-radius: .55em; background: color-mix(in srgb, var(--soft) 85%, transparent); }

.rp .rp-hz-sec > i svg.i { width: 1.15em; height: 1.15em; }

.rp-hz-sec > span { min-width: 0; display: grid; gap: .1em; }

.rp-hz-sec b,
.rp-hz-sec small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.rp-hz-sec b { font-size: .76em; font-weight: 650; letter-spacing: -.01em; }

.rp-hz-sec small { color: var(--faint); font-size: .6em; font-variant-numeric: tabular-nums; }

/* The pointer over a section (hover), then pressing it. */
.rp--horizon.d-over-adv .rp-hz-sec--adv,
.rp--horizon.d-over-ov .rp-hz-sec--ov { background: color-mix(in srgb, var(--soft) 75%, transparent); color: var(--ink); }

.rp--horizon.d-go-adv .rp-hz-sec--adv,
.rp--horizon.d-go-ov .rp-hz-sec--ov { transform: scale(.97); }

.rp--horizon:not(.d-adv) .rp-hz-sec--ov,
.rp--horizon.d-adv .rp-hz-sec--adv { color: var(--ink); }

.rp--horizon:not(.d-adv) .rp-hz-sec--ov > i,
.rp--horizon.d-adv .rp-hz-sec--adv > i { background: color-mix(in srgb, var(--k) 13%, var(--surface-strong)); color: var(--k); }

.rp--horizon:not(.d-adv) .rp-hz-sec--ov small,
.rp--horizon.d-adv .rp-hz-sec--adv small { color: var(--muted); }

.motion-ok .rp--horizon .rp-hz-pill { transition: transform 460ms cubic-bezier(.34, 1.28, .64, 1); }

.motion-ok .rp--horizon .rp-hz-sec { transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, transform 160ms cubic-bezier(.22, 1, .36, 1); }

.motion-ok .rp--horizon .rp-hz-sec > i { transition: background-color 220ms ease, color 220ms ease; }

.motion-ok .rp--horizon .rp-hz-sec small { transition: color 200ms ease; }

.rp-ring { width: 1.3em; height: 1.3em; overflow: visible; transform: rotate(-90deg); }

.rp-ring circle { fill: none; stroke-width: 2.6; }

.rp-ring circle:first-child { stroke: color-mix(in srgb, var(--line) 85%, transparent); }

.rp-ring circle + circle { stroke: var(--k); stroke-linecap: round; stroke-dasharray: 100px 200px; stroke-dashoffset: calc(100px - var(--p, 0) * 1px); }

.rp--horizon:not(.s-in) .rp-ring circle + circle { opacity: 0; }

.rp--horizon.s-in .rp-ring { --p: var(--p0); }

.rp--horizon.s-step .rp-hz-sec--step .rp-ring { --p: var(--p1); }

/* The open section: the Overview (it sets the size), or Mini-adventures over it. */
.rp-hz-main { position: relative; min-width: 0; display: flex; flex-direction: column; }

.rp-hz-ov { flex: 1 1 auto; display: flex; flex-direction: column; gap: .8em; }

.rp--horizon.d-adv .rp-hz-ov { opacity: 0; transform: translateY(.6em); }

/* Going out, a section fades at once; coming in, it fades in and settles (as the planner's panels do). */
.motion-ok .rp--horizon .rp-hz-ov { transition: opacity 280ms ease 80ms, transform 440ms cubic-bezier(.22, 1, .36, 1) 80ms; }

.motion-ok .rp--horizon.d-adv .rp-hz-ov { transition: opacity 120ms ease, transform 0s linear 120ms; }

/* The year at a glance (the ribbon of the Horizon section, tighter). */

.rp-hz-map { padding: .85em 1em .3em; border: 1px solid var(--line); border-radius: 1em; background: var(--surface-strong); }

.rp-hz-map .rp-eyebrow { margin-bottom: .2em; }

.rp-hz-map__title { display: block; margin-bottom: .8em; font-size: .9em; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }

.rp--horizon .rp-rib { --lw: 5.1em; gap: .32em; padding-bottom: 1.7em; }

.rp--horizon .rp-rib__lane { grid-template-columns: var(--lw) minmax(0, 1fr); }

.rp--horizon .rp-rib__months span { padding-left: .3em; font-size: .56em; }

.rp--horizon .rp-rib__label { margin: 0; font-size: .64em; }

.rp--horizon .rp-rib__track { height: 1.85em; border-radius: .6em; }

.rp--horizon .rp-rib__quarters span { height: 2.6em; gap: .4em; padding: 0 .55em; font-size: .64em; }

/* Only this quarter's habit is named, clear of the line for today. */
.rp--horizon .rp-rib__quarters span:not(.is-now) em { display: none; }

.rp--horizon .rp-rib__quarters span.is-now { padding-left: 1.05em; }

.rp--horizon .rp-rib__today { top: 1.2em; }

.rp--horizon .rp-rib__today span { font-size: .56em; }

.rp--horizon .m { z-index: 1; }

/* The key date the scene adds, named beside it. */
.rp-hz-flag { position: absolute; z-index: 2; top: 50%; right: calc(100% - var(--x) * 1% + 1.3em); padding: .15em .6em; border-radius: 999px; background: var(--surface-strong); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--keydate) 40%, var(--line)); color: var(--keydate); font-size: .58em; font-weight: 700; white-space: nowrap; transform: translateY(-50%); }

/* Two tiles: the Misogi, then the mini-adventures. */
.rp-hz-cards { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8em; }

.rp-hz-card { min-width: 0; display: flex; flex-direction: column; gap: .42em; padding: .8em .9em .8em; border: 1px solid var(--line); border-radius: 1em; background: var(--surface-strong); }

.rp-hz-card__head { display: flex; align-items: center; gap: .55em; margin-bottom: .1em; }

.rp-hz-card__head i { width: 1.75em; height: 1.75em; display: grid; place-items: center; border-radius: .5em; background: color-mix(in srgb, var(--k) 12%, var(--surface-strong)); color: var(--k); }

.rp .rp-hz-card__head i svg.i { width: 1.05em; height: 1.05em; }

.rp-hz-card__head b { color: var(--k); font-size: .6em; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }

.rp .rp-hz-card__head > svg.i { width: 1em; height: 1em; margin-left: auto; color: var(--faint-mark); }

.rp-hz-card__title { overflow: hidden; font-size: .9em; font-weight: 680; letter-spacing: -.02em; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

.rp-hz-card__meta { overflow: hidden; margin-top: -.25em; color: var(--muted); font-size: .64em; white-space: nowrap; text-overflow: ellipsis; }

.rp-hz-card__meter { display: flex; align-items: center; gap: .6em; min-height: 1.1em; }

.rp-hz-card__meter .rp-hz-meter { flex: 1 1 auto; }

.rp-hz-card__meter small { color: var(--muted); font-size: .62em; font-weight: 650; font-variant-numeric: tabular-nums; }

.rp-hz-dots { display: flex; align-items: center; gap: .3em; min-height: 1.1em; }

.rp-hz-dots i { width: 1.55em; height: .45em; border-radius: 999px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }

.rp-hz-dots .is-idea { background: color-mix(in srgb, var(--k) 28%, var(--surface-strong)); box-shadow: none; }

.rp-hz-dots .is-planned { background: var(--k); box-shadow: none; }

.rp-hz-dots .is-done,
.rp--horizon.s-lived .rp-hz-dot--lived { background: color-mix(in srgb, var(--k) 60%, var(--ink)); }

.rp-hz-item { margin-top: auto; display: flex; align-items: center; gap: .55em; min-height: 2.5em; padding: .4em .6em; border-radius: .65em; background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 82%, transparent); font-size: .78em; font-weight: 600; }

.rp-hz-item .rp-check { width: 1.3em; height: 1.3em; border-radius: .38em; }

.rp-hz-item .rp-txt { flex: 1 1 auto; }

.rp-hz-item em { color: var(--faint); font-size: .84em; font-style: normal; white-space: nowrap; }

/* Mini-adventures, the section the pointer opens: its head, then the six,
   each with its status, its title and its dates (the planner's cards). */
.rp-hz-adv { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .8em; opacity: 0; transform: translateY(.6em); }

.rp--horizon.d-adv .rp-hz-adv { opacity: 1; transform: none; }

.motion-ok .rp--horizon .rp-hz-adv { transition: opacity 120ms ease, transform 0s linear 120ms; }

.motion-ok .rp--horizon.d-adv .rp-hz-adv { transition: opacity 280ms ease 80ms, transform 440ms cubic-bezier(.22, 1, .36, 1) 80ms; }

.rp-hz-adv__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; padding-top: .15em; }

.rp-hz-adv__intro { min-width: 0; display: grid; gap: .3em; }

.rp-hz-adv .rp-eyebrow { margin: 0; color: var(--k); }

.rp-hz-adv__title { font-size: .98em; font-weight: 720; letter-spacing: -.03em; line-height: 1.2; }

.rp-hz-adv__intro small { overflow: hidden; color: var(--muted); font-size: .64em; white-space: nowrap; text-overflow: ellipsis; }

.rp-hz-adv__stat { flex: 0 0 auto; display: grid; justify-items: end; gap: .2em; text-align: right; }

.rp-hz-adv__stat b { font-size: 1.3em; font-weight: 720; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }

.rp-hz-adv__stat b small { color: var(--faint); font-size: .56em; font-weight: 600; letter-spacing: 0; }

.rp-hz-adv__stat > small { color: var(--muted); font-size: .58em; white-space: nowrap; }

.rp-hz-advs { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .6em; }

.rp-adv { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .55em; overflow: hidden; padding: .75em .75em .8em; border: 1px solid var(--line); border-radius: .9em; background: var(--surface-strong); }

/* Planned: a line of the section's colour on top. */
.rp-adv::before { content: ""; position: absolute; inset: 0 0 auto; height: .2em; background: var(--k); opacity: 0; }

.rp-adv.is-planned,
.rp-adv--lived { border-color: color-mix(in srgb, var(--k) 24%, var(--line)); }

.rp-adv.is-planned::before,
.rp-adv--lived::before { opacity: 1; }

.rp-adv.is-done,
.rp--horizon.s-lived .rp-adv--lived { border-color: var(--line); background: color-mix(in srgb, var(--soft) 45%, var(--surface-strong)); }

.rp--horizon.s-lived .rp-adv--lived::before { opacity: 0; }

.rp-adv__top { min-width: 0; display: flex; align-items: center; gap: .45em; }

.rp-adv__top em { min-width: 0; overflow: hidden; color: var(--muted); font-size: .6em; font-style: normal; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

.rp-adv__status { display: inline-flex; align-items: center; gap: .3em; height: 2.1em; padding: 0 .8em; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: .52em; font-weight: 740; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

.rp .rp-adv__status svg.i { width: 1.3em; height: 1.3em; margin-left: -.15em; stroke-width: 2.6; }

.rp-adv__status--planned { background: color-mix(in srgb, var(--k) 12%, var(--surface-strong)); color: var(--k); }

.rp-adv__status--done { background: color-mix(in srgb, var(--habit) 14%, var(--surface-strong)); color: var(--habit); }

/* The weekend in Lisbon: Planned, then Lived once ticked. */
.rp-adv__swap { display: grid; }

.rp-adv__swap > * { grid-area: 1 / 1; justify-self: start; }

.rp-adv--lived .rp-adv__status--done { opacity: 0; transform: scale(.8); }

.rp--horizon.s-lived .rp-adv--lived .rp-adv__status--done { opacity: 1; transform: none; }

.rp--horizon.s-lived .rp-adv--lived .rp-adv__status--planned,
.rp--horizon.s-lived .rp-adv--lived .rp-adv__top em { opacity: 0; }

.motion-ok .rp--horizon .rp-adv--lived { transition: background-color 320ms ease 120ms, border-color 320ms ease 120ms; }

.motion-ok .rp--horizon .rp-adv--lived::before { transition: opacity 260ms ease 120ms; }

.motion-ok .rp--horizon .rp-adv__swap > * { transition: opacity 200ms ease 120ms, transform 420ms cubic-bezier(.34, 1.5, .64, 1) 120ms; }

.motion-ok .rp--horizon .rp-adv__top em { transition: opacity 200ms ease 120ms; }

.rp-adv__title { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .5em; font-size: .74em; font-weight: 640; letter-spacing: -.012em; line-height: 1.3; }

.rp-adv__title .rp-check { width: 1.3em; height: 1.3em; border-radius: .38em; }

.rp-adv__title .rp-txt { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.rp-adv__date { justify-self: start; max-width: 100%; display: inline-flex; align-items: center; gap: .4em; padding: .38em .8em .38em .6em; border: 1px solid color-mix(in srgb, var(--k) 28%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--k) 7%, var(--surface-strong)); font-size: .58em; font-weight: 620; white-space: nowrap; }

.rp .rp-adv__date svg.i { flex: 0 0 auto; width: 1.3em; height: 1.3em; color: var(--muted); }

.rp-adv__date span { overflow: hidden; text-overflow: ellipsis; }

.rp-adv__date--empty { border-style: dashed; border-color: var(--line-strong); background: transparent; color: var(--muted); }

/* Ticked: the mini-adventure lived (in its section and on its tile), then the last milestone. */
.rp-adv.is-done .rp-check,
.rp--horizon.s-lived .rp-hz-item--lived .rp-check,
.rp--horizon.s-lived .rp-adv--lived .rp-check,
.rp--horizon.s-step .rp-hz-item--step .rp-check { background: var(--ink); box-shadow: none; }

.rp-adv.is-done .rp-check svg.i,
.rp--horizon.s-lived .rp-hz-item--lived .rp-check svg.i,
.rp--horizon.s-lived .rp-adv--lived .rp-check svg.i,
.rp--horizon.s-step .rp-hz-item--step .rp-check svg.i { opacity: 1; transform: none; }

.rp-adv.is-done .rp-txt,
.rp--horizon.s-lived .rp-hz-item--lived .rp-txt,
.rp--horizon.s-lived .rp-adv--lived .rp-txt,
.rp--horizon.s-step .rp-hz-item--step .rp-txt { color: var(--muted); text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); }

/* The pointer ticks them: the box dips as it fills. */
.rp--horizon.d-tick-lived .rp-adv--lived .rp-check,
.rp--horizon.d-tick-step .rp-hz-item--step .rp-check { box-shadow: 0 0 0 .3em color-mix(in srgb, var(--paint) 22%, transparent); transform: scale(.84); }

.motion-ok .rp--horizon .rp-adv--lived .rp-check,
.motion-ok .rp--horizon .rp-hz-item--step .rp-check { transition: background-color 200ms ease, box-shadow 220ms ease, transform 160ms cubic-bezier(.22, 1, .36, 1); }

.rp--horizon.s-step .rp-hz-meter--step i { transform: scaleX(calc(var(--w1) / 100)); }

.rp--horizon.s-lived .m--lived,
.rp--horizon.s-step .m--step { background: color-mix(in srgb, var(--k) 30%, var(--surface-strong)); box-shadow: inset 0 0 0 .12em var(--k), 0 0 0 .16em var(--surface-strong); }

/* Before the scene: the year still to fill in, the key date not added, nothing ticked. */
/* The lanes are uncovered from January on (a cover, not a clip, so the
   markers and the key date's name stay above the line for today). */
.rp--horizon .rp-rib__track::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--surface-strong); transform: scaleX(0); transform-origin: right center; }

.rp--horizon:not(.s-in) .rp-rib__track::after { transform: none; }

.rp--horizon .rp-rib__quarters span { clip-path: inset(0 0 0 0 round .6em); }

.rp--horizon:not(.s-in) .rp-rib__quarters span { clip-path: inset(0 100% 0 0 round .6em); }

.rp--horizon:not(.s-in) .m { opacity: 0; scale: .2; }

.rp--horizon:not(.s-in) .rp-rib__today { opacity: 0; transform: translateY(-.8em); }

.rp--horizon:not(.s-in) .rp-hz-year .rp-hz-meter i { transform: scaleX(0); }

.rp--horizon:not(.s-key) .m--new { opacity: 0; translate: 0 -1.6em; }

.rp--horizon:not(.s-key) .rp-hz-flag { opacity: 0; translate: .8em 0; }

/* The pointer over Add, then pressing it. */
.rp--horizon.d-over-add .rp-hz-add { background: color-mix(in srgb, var(--ink) 88%, var(--paper)); }

.rp--horizon.d-add .rp-hz-add { background: color-mix(in srgb, var(--ink) 80%, var(--paper)); box-shadow: 0 0 0 .3em color-mix(in srgb, var(--paint) 22%, transparent); transform: scale(.93); }

.motion-ok .rp--horizon .rp-rib__track::after { transition: transform 1100ms cubic-bezier(.22, 1, .36, 1); }

.motion-ok .rp--horizon .rp-rib__quarters span { transition: clip-path 500ms cubic-bezier(.22, 1, .36, 1) calc(400ms + var(--i) * 140ms); }

.motion-ok .rp--horizon .m { transition: opacity 260ms ease calc(450ms + var(--i) * 110ms), scale 520ms cubic-bezier(.34, 1.56, .64, 1) calc(450ms + var(--i) * 110ms), background-color 320ms ease, box-shadow 320ms ease; }

.motion-ok .rp--horizon.s-in .m--new { transition: opacity 240ms ease, translate 620ms cubic-bezier(.34, 1.45, .64, 1), scale 520ms cubic-bezier(.34, 1.56, .64, 1); }

.motion-ok .rp--horizon .rp-hz-flag { transition: opacity 320ms ease 260ms, translate 520ms cubic-bezier(.22, 1, .36, 1) 260ms; }

.motion-ok .rp--horizon .rp-rib__today { transition: opacity 360ms ease 1300ms, transform 600ms cubic-bezier(.22, 1, .36, 1) 1300ms; }

.motion-ok .rp--horizon .rp-hz-meter i { transition: transform 1100ms cubic-bezier(.22, 1, .36, 1) 150ms; }

.motion-ok .rp--horizon .rp-hz-meter--step i { transition: transform 900ms cubic-bezier(.22, 1, .36, 1) 250ms; }

.motion-ok .rp--horizon .rp-ring circle + circle { transition: stroke-dashoffset 900ms cubic-bezier(.22, 1, .36, 1) 300ms, opacity 200ms ease 300ms; }

.motion-ok .rp--horizon .rp-hz-dot--lived { transition: background-color 360ms ease 200ms; }

.motion-ok .rp-hz-add { transition: transform 160ms cubic-bezier(.22, 1, .36, 1), background-color 160ms ease, box-shadow 220ms ease; }

/* Narrower, the rail becomes the tabs above the section, as in the planner
   on a phone: the open one is a pill, the last ones run off the edge. */
@container (max-width: 520px) {
  .rp--horizon .rp-top { margin-inline: 1em; }
  .rp--horizon .rp-hz-year { width: 8.4em; margin-right: .2em; }
  .rp--horizon .rp-hz { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: .75em; padding: .8em 1em 1em; }
  .rp--horizon .rp-hz-nav { display: flex; gap: .2em; overflow: hidden; margin-inline: -.2em; padding: .2em; border-right: 0; mask-image: linear-gradient(90deg, #000 84%, transparent); }
  .rp--horizon .rp-hz-pill,
  .rp--horizon .rp-hz-sec small,
  .rp--horizon .rp-hz-sec .rp-ring { display: none; }
  .rp--horizon .rp-hz-sec { flex: 0 0 auto; grid-template-columns: 1.8em auto; gap: .45em; padding: .25em .85em .25em .25em; border-radius: 999px; }
  .rp--horizon .rp-hz-sec > i { width: 1.8em; height: 1.8em; border-radius: 999px; }
  .rp--horizon:not(.d-adv) .rp-hz-sec--ov,
  .rp--horizon.d-adv .rp-hz-sec--adv { background: var(--surface-strong); box-shadow: 0 1px 2px rgba(25, 22, 17, .06), inset 0 0 0 1px var(--line); }
  .rp--horizon .rp-rib { --lw: 4.6em; }
  .rp--horizon .rp-rib__months b { display: none; }
}

/* Close day ------------------------------------------------------------------- */

.rp--close { padding: 0 0 0 0; }

.rp-panel { width: min(100%, 44em); padding: 1.5em 1.5em 1.3em; border: 1px solid var(--line); border-radius: 1.25em; background: var(--surface); box-shadow: var(--shadow-rp); }

.rp-panel .rp-title { margin-bottom: 1em; }

.rp-summary { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: .55em; margin-bottom: 1em; }

.rp-summary > span { display: flex; align-items: center; justify-content: space-between; gap: .5em; min-height: 3.6em; padding: .55em .8em; border: 1px solid var(--line); border-radius: .75em; background: var(--surface-strong); }

.rp-summary small { color: var(--faint); font-size: .58em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

.rp-summary b { font-size: 1.15em; font-weight: 720; letter-spacing: -.03em; }

.rp-summary__to b { margin-left: auto; font-size: 1em; }

.rp-summary__to i { width: 1.8em; height: 1.8em; display: grid; place-items: center; border-radius: .5em; background: var(--soft); color: var(--muted); }

.rp-reflect { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; margin-bottom: 1em; }

.rp-reflect > span { display: grid; gap: .4em; }

.rp-reflect small,
.rp-pop__field small { color: var(--ink); font-size: .7em; font-weight: 680; }

.rp-reflect .rp-field { min-height: 3.6em; }

.rp-listhead { display: flex; justify-content: space-between; margin: 0 0 .5em; color: var(--faint); font-size: .58em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.rp-items { display: grid; gap: .45em; }

.rp-item { display: flex; align-items: center; justify-content: space-between; gap: .8em; min-height: 3.6em; padding: .45em .5em .45em .85em; border: 1px solid var(--line); border-radius: .75em; background: var(--surface-strong); }

.rp-item__body { display: grid; gap: .15em; min-width: 0; }

.rp-item__body b { overflow: hidden; font-size: .82em; font-weight: 640; white-space: nowrap; text-overflow: ellipsis; text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: transparent; }

.rp-item__body small { color: var(--muted); font-size: .56em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

.rp-triage { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .2em; }

.rp-tri { display: inline-flex; align-items: center; gap: .35em; min-height: 2.5em; padding: .3em .65em; border-radius: .55em; color: var(--muted); font-size: .66em; font-weight: 640; white-space: nowrap; }

.rp-tri--date { box-shadow: inset 0 0 0 1px var(--line); background: color-mix(in srgb, var(--soft) 60%, transparent); }

.rp-tri--date svg.i:first-child { visibility: hidden; }

.rp-tri.is-on,
.rp--close.s-save .rp-item--save .rp-tri--save { background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

.rp-tri.is-on svg.i:first-child { visibility: visible; }

.rp--close:not(.s-save) .rp-item--save .rp-tri--date,
.rp--close:not(.s-forget) .rp-item--forget .rp-tri--date { background: var(--soft); color: var(--ink); }

.rp--close:not(.s-save) .rp-item--save .rp-tri--date svg.i:first-child,
.rp--close:not(.s-forget) .rp-item--forget .rp-tri--date svg.i:first-child { visibility: visible; }

.rp--close.s-forget .rp-item--forget .rp-tri--forget { background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 24%, transparent); }

/* Let go: the item recedes, its words in ink under the opacity so they still reach 4.5:1. */
.rp--close.s-forget .rp-item--forget .rp-item__body { opacity: .62; }

.rp--close.s-forget .rp-item--forget .rp-item__body small { color: var(--ink); }

.rp--close.s-forget .rp-item--forget .rp-item__body b { text-decoration-color: var(--muted); }

.motion-ok .rp-tri { transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }

.motion-ok .rp-item__body { transition: opacity 300ms ease; }

.motion-ok .rp-item__body b { transition: text-decoration-color 300ms ease; }

.rp-actions { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: .6em; margin-top: 1em; }

.rp-actions > span { text-align: center; color: var(--muted); font-size: .8em; font-weight: 620; }

.rp-actions .rp-primary { padding: .8em 1em; border-radius: .6em; background: var(--ink); color: var(--paper); }

.rp--close.s-press .rp-primary { transform: scale(.96); background: color-mix(in srgb, var(--ink) 80%, var(--paper)); }

.motion-ok .rp-primary { transition: transform 160ms cubic-bezier(.22, 1, .36, 1), background-color 160ms ease; }

.rp-pop--next { right: 0; top: calc(100% - 3.4em); width: 18.5em; display: grid; gap: .55em; padding: 1em 1.05em 1.05em; }

.rp-pop__title { margin: -.2em 0 .2em; font-size: 1em; font-weight: 720; letter-spacing: -.025em; }

.rp-pop__field { display: grid; gap: .35em; }

.rp-pop__btn { justify-self: start; margin-top: .3em; padding: .55em .8em; border: 1px solid var(--line-strong); border-radius: .55em; font-size: .72em; font-weight: 650; }

.rp--close:not(.s-closed) .rp-pop--next { opacity: 0; transform: translateY(1.2em) scale(.96); }

.motion-ok .rp-pop--next { transition: opacity 320ms ease, transform 520ms cubic-bezier(.22, 1, .36, 1); }

@media (min-width: 960px) {
  .rp--close .rp-panel { width: 88%; }
  .rp-pop--next { right: -1em; }
}

@container (max-width: 560px) {
  .rp--close { font-size: clamp(9.5px, 2.7cqi, 13px); }
  .rp-panel { padding: 1.1em; }
  .rp-reflect { grid-template-columns: 1fr; }
  .rp-summary { grid-template-columns: 1fr 1fr; }
  .rp-summary__to { grid-column: 1 / -1; }
  .rp-item { flex-wrap: wrap; }
  .rp-triage { margin-left: auto; }
  .rp-pop--next { right: .6em; }
}

/* Week ------------------------------------------------------------------------ */

.rp-wk { --hh: 2.75em; --cols: 5; padding: .6em 1.1em 1em; }

.rp-wk__head,
.rp-wk__body { display: grid; grid-template-columns: 3.1em repeat(var(--cols), minmax(0, 1fr)); }

.rp-wk__head span { padding: .6em 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .62em; font-weight: 700; letter-spacing: .07em; text-align: center; text-transform: uppercase; }

.rp-wk__head b { margin-left: .3em; font-size: 1.35em; font-weight: 720; letter-spacing: 0; color: var(--ink); }

.rp-wk__head .is-today,
.rp-wk__head .is-today b { color: var(--now); }

.rp-wk__body { position: relative; height: calc(8.4 * var(--hh)); }

.rp-wk__hours { position: relative; }

.rp-wk__hours span { position: absolute; left: 0; top: calc(var(--h) * var(--hh)); }

.rp-wk__hours b { display: block; transform: translateY(-50%); color: var(--faint); font-size: .58em; font-weight: 650; font-variant-numeric: tabular-nums; }

.rp-wk__col {
  position: relative;
  border-left: 1px solid var(--line);
  background-image: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--line) 75%, transparent) 0 1px, transparent 1px var(--hh));
}

.rp-wk__col.is-past { background-color: color-mix(in srgb, var(--soft) 45%, transparent); }

.rp-wk__col.is-today { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--now) 45%, transparent); }

.rp-wb {
  position: absolute;
  left: .25em;
  right: .25em;
  top: calc(var(--s) * var(--hh) + 2px);
  height: calc(var(--d) * var(--hh) - 4px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: .3em .45em .3em .55em;
  border-radius: .45em;
  background: color-mix(in srgb, var(--c) 12%, var(--surface-strong));
  box-shadow: inset .18em 0 0 var(--c), inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent);
}

.rp-wk__col.is-past .rp-wb { opacity: .78; }

.rp-wb b { overflow: hidden; font-size: .66em; font-weight: 680; white-space: nowrap; text-overflow: ellipsis; }

.rp-wb small { overflow: hidden; color: var(--muted); font-size: .56em; white-space: nowrap; text-overflow: ellipsis; }

.rp-wb--short { justify-content: center; padding-block: 0; }

.rp-wk .rp-now { left: 0; }

.rp--week:not(.s-in) .rp-wb { opacity: 0; transform: translateY(-1.4em); }

.rp--week:not(.s-in) .rp-now { opacity: 0; }

.motion-ok .rp--week .rp-wb { transition: opacity 300ms ease calc(var(--i) * 70ms), transform 620ms cubic-bezier(.34, 1.4, .64, 1) calc(var(--i) * 70ms); }

.motion-ok .rp--week .rp-now { transition: opacity 400ms ease 1300ms; }

@container (max-width: 520px) {
  .rp--week .rp-tools,
  .rp--week .rp-nav,
  .rp-wk__d1,
  .rp-wk__d2 { display: none; }
  .rp-wk { --cols: 3; }
}

/* Tools: Journal, Unresolved, Time stats -------------------------------------- */

.tools { display: grid; gap: clamp(36px, 5vw, 48px); }

.tool { display: grid; align-content: start; gap: 22px; }

.tool__copy { display: grid; align-content: start; gap: 8px; }

.tool__copy h3 { display: flex; align-items: center; gap: 10px; font-size: 1.18rem; }

.tool__copy h3 svg.i { width: 22px; height: 22px; color: var(--muted); }

.tool__copy p { max-width: 34em; color: var(--muted); }

@media (min-width: 760px) and (max-width: 1079.98px) {
  .tool { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 36px; }
}

@media (min-width: 1080px) {
  .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}

.rp--tool { font-size: clamp(10px, 3.4cqi, 14px); }

.rp-sheet {
  position: relative;
  height: 26em;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.3em 1.25em 0;
  border: 1px solid var(--line);
  border-radius: 1.2em;
  background: var(--surface);
  box-shadow: var(--shadow-rp);
}

.rp-sheet > .rp-eyebrow { flex: 0 0 auto; }

.rp-sheet__title { flex: 0 0 auto; margin: 0 0 .85em; font-size: 1.12em; font-weight: 720; letter-spacing: -.03em; line-height: 1.22; }

.rp-seg { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: .2em; margin-bottom: .8em; padding: .2em; border: 1px solid var(--line); border-radius: .7em; background: var(--soft); }

.rp-seg__btn { display: flex; align-items: center; justify-content: center; gap: .5em; min-height: 2.4em; border-radius: .5em; color: var(--muted); font-size: .72em; font-weight: 640; white-space: nowrap; }

.rp-seg__btn.is-on,
.rp--unres:not(.s-later) .rp-seg__btn--needs,
.rp--unres.s-later .rp-seg__btn--later { background: var(--surface-strong); color: var(--ink); box-shadow: 0 1px 5px rgba(28, 25, 21, .07); }

.motion-ok .rp-seg__btn { transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease; }

/* Journal */

.rp-jr { display: grid; grid-template-columns: 4.7em minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: .85em; padding: .6em .55em; border-radius: .55em; }

.rp-jr--head { flex: 0 0 auto; padding-block: 0 .45em; border-bottom: 1px solid var(--line); border-radius: 0; }

.rp-jr--head small { color: var(--faint); font-size: .56em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.rp-jr time { padding-top: .2em; color: var(--faint); font-size: .64em; font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; }

.rp-jr b,
.rp-jr > span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .76em; line-height: 1.4; }

.rp-jr b { font-weight: 580; }

.rp-jr > span { color: var(--muted); }

.rp-jr__list { flex: 1 1 auto; min-height: 0; display: grid; align-content: start; gap: .1em; overflow: hidden; padding-top: .3em; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%); mask-image: linear-gradient(to bottom, #000 72%, transparent 98%); }

.rp-jr__new { display: grid; grid-template-rows: 1fr; }

.rp-jr__clip { min-height: 0; overflow: hidden; }

.rp-jr.is-new { margin-bottom: .1em; background: color-mix(in srgb, var(--paint) 8%, var(--surface-strong)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paint) 24%, transparent); }

.rp--journal:not(.s-new) .rp-jr__new { grid-template-rows: 0fr; }

.rp--journal:not(.s-new) .rp-jr.is-new { opacity: 0; transform: translateY(-.8em) scale(.98); }

.rp--journal:not(.s-in) .rp-jr__list > .rp-jr { opacity: 0; transform: translateY(.7em); }

.motion-ok .rp-jr__new { transition: grid-template-rows 620ms cubic-bezier(.22, 1, .36, 1); }

.motion-ok .rp-jr.is-new { transition: opacity 380ms ease 220ms, transform 620ms cubic-bezier(.22, 1, .36, 1) 160ms; }

.motion-ok .rp--journal .rp-jr__list > .rp-jr { transition: opacity 320ms ease calc(var(--i) * 70ms), transform 560ms cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 70ms); }

/* Unresolved */

.rp-seg__btn i { display: inline-grid; min-width: 1.85em; height: 1.85em; padding: 0 .5em; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--line) 58%, transparent); color: var(--muted); font-size: .86em; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }

.rp-seg__btn i b { grid-area: 1 / 1; font-weight: inherit; }

.rp--unres:not(.s-later) .rp-seg__btn--needs i,
.rp--unres.s-later .rp-seg__btn--later i { background: var(--soft); color: var(--ink); }

.rp--unres:not(.s-save) .n2,
.rp--unres.s-save .n1 { opacity: 0; }

.rp-ow { flex: 1 1 auto; display: grid; min-height: 0; }

.rp-ow__list { grid-area: 1 / 1; display: grid; align-content: start; gap: .2em; }

.rp--unres.s-later .rp-ow__list--needs { opacity: 0; visibility: hidden; transform: translateX(-1.2em); }

.rp--unres:not(.s-later) .rp-ow__list--later { opacity: 0; visibility: hidden; transform: translateX(1.2em); }

.rp-owr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6em; max-height: 4.2em; padding: .5em .5em .5em .6em; border-radius: .6em; }

.rp-owr__main { display: grid; gap: .25em; min-width: 0; }

.rp-owr__main b { overflow: hidden; font-size: .8em; font-weight: 610; white-space: nowrap; text-overflow: ellipsis; }

.rp-owr__main small { display: flex; align-items: center; gap: .5em; min-height: 1.5em; color: var(--faint); font-size: .62em; font-variant-numeric: tabular-nums; white-space: nowrap; }

.rp-owr__main em { padding: .15em .55em; border-radius: 999px; background: color-mix(in srgb, var(--soft) 78%, transparent); color: var(--muted); font-style: normal; font-weight: 650; }

.rp-owr__act { display: flex; gap: .15em; }

.rp-ob { display: inline-flex; align-items: center; min-height: 2.35em; padding: 0 .65em; border-radius: .5em; color: var(--muted); font-size: .64em; font-weight: 630; white-space: nowrap; }

.rp-ob:first-child { background: color-mix(in srgb, var(--soft) 64%, transparent); box-shadow: inset 0 0 0 1px var(--line); }

.rp-ob--plan .t2 { display: none; }

.rp--unres.s-plan .rp-ob--plan { background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }

.rp--unres.s-plan .rp-ob--plan .t1 { display: none; }

.rp--unres.s-plan .rp-ob--plan .t2 { display: inline; }

.rp--unres.s-plan .rp-owr--plan { background: color-mix(in srgb, var(--soft) 60%, transparent); }

.rp--unres.s-press-plan .rp-ob--plan,
.rp--unres.s-press-save .rp-ob--save { background: var(--soft); color: var(--ink); transform: scale(.92); }

.rp--unres.s-save .rp-owr--save { max-height: 0; padding-block: 0; opacity: 0; }

.rp-ow__foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .8em 0 1em; border-top: 1px solid var(--line); }

.rp-ow__foot > span:first-child { color: var(--muted); font-size: .66em; }

.rp-ow__foot .rp-primary { padding: .65em 1em; border-radius: .55em; background: var(--ink); color: var(--paper); font-size: .68em; font-weight: 650; }

.rp--unres:not(.s-plan) .rp-ow__foot { opacity: 0; transform: translateY(.8em); }

.motion-ok .rp--unres .rp-ow__list { transition: opacity 260ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 420ms; }

.motion-ok .rp--unres.s-later .rp-ow__list--later,
.motion-ok .rp--unres:not(.s-later) .rp-ow__list--needs { transition: opacity 320ms ease 120ms, transform 520ms cubic-bezier(.22, 1, .36, 1) 80ms, visibility 0s; }

.motion-ok .rp--unres .rp-owr { transition: max-height 480ms cubic-bezier(.22, 1, .36, 1) 120ms, padding 480ms cubic-bezier(.22, 1, .36, 1) 120ms, opacity 220ms ease, background-color 240ms ease; }

.motion-ok .rp--unres .rp-ob { transition: transform 160ms cubic-bezier(.22, 1, .36, 1), background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }

.motion-ok .rp--unres .rp-ow__foot { transition: opacity 300ms ease, transform 480ms cubic-bezier(.22, 1, .36, 1); }

.motion-ok .rp--unres .n1,
.motion-ok .rp--unres .n2 { transition: opacity 240ms ease; }

/* Time stats */

.rp-st__cards { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: .5em; margin-bottom: 1.05em; }

.rp-st__cards span { display: grid; gap: .3em; padding: .7em .75em; border-radius: .7em; background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--line); }

.rp-st__cards small { color: var(--faint); font-size: .56em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

.rp-st__cards b { font-size: 1.2em; font-weight: 720; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }

.rp-st__rows { display: grid; gap: .8em; }

.rp-st__head { display: flex; align-items: center; justify-content: space-between; gap: .8em; margin-bottom: .4em; }

.rp-st__head b { display: inline-flex; align-items: center; gap: .5em; font-size: .76em; font-weight: 620; white-space: nowrap; }

.rp-st__head b i { width: .62em; height: .62em; border-radius: 999px; background: var(--c); }

.rp-st__head small { overflow: hidden; color: var(--muted); font-size: .62em; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }

.rp-st__bar { position: relative; display: block; height: .42em; overflow: hidden; border-radius: 999px; background: var(--soft); }

.rp-st__bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--c); transform-origin: left; }

.rp-st__bar .sch { width: calc(var(--s) * 1%); opacity: .28; }

.rp-st__bar .ela { width: calc(var(--e) * 1%); }

.rp--stats:not(.s-in) .rp-st__bar .sch,
.rp--stats:not(.s-elapsed) .rp-st__bar .ela { transform: scaleX(0); }

.rp--stats:not(.s-in) .rp-st { opacity: 0; transform: translateY(.6em); }

.motion-ok .rp--stats .rp-st { transition: opacity 300ms ease calc(var(--i) * 80ms), transform 520ms cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 80ms); }

.motion-ok .rp--stats .rp-st__bar .sch { transition: transform 900ms cubic-bezier(.22, 1, .36, 1) calc(150ms + var(--i) * 90ms); }

.motion-ok .rp--stats .rp-st__bar .ela { transition: transform 1100ms cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 120ms); }

/* Horizon ribbon -------------------------------------------------------------- */

.rp-card { padding: 1.4em 1.5em 1.3em; border: 1px solid var(--line); border-radius: 1.3em; background: var(--surface-strong); box-shadow: var(--shadow-rp); }

.rp-card__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8em 1.4em; margin-bottom: 1.2em; }

.rp-legend { display: flex; flex-wrap: wrap; gap: .4em 1.1em; }

.rp-legend i { display: inline-flex; align-items: center; gap: .45em; color: var(--muted); font-size: .7em; font-style: normal; }

.rp-legend i::before { content: ""; width: .75em; height: .75em; border-radius: 999px; background: var(--k); }

.rp-legend .k-misogi { --k: var(--misogi); }

.rp-legend .k-milestone { --k: var(--milestone); }

.rp-legend .k-milestone::before { border-radius: .12em; transform: rotate(45deg) scale(.85); }

.rp-legend .k-adventure { --k: var(--adventure); }

.rp-legend .k-keydate { --k: var(--keydate); }

.rp-rib { --lw: 6.4em; position: relative; display: grid; gap: .4em; padding-bottom: 1.8em; }

.rp-rib__months,
.rp-rib__lane { display: grid; grid-template-columns: var(--lw) minmax(0, 1fr); align-items: center; }

.rp-rib__months { grid-template-columns: var(--lw) repeat(12, minmax(0, 1fr)); }

.rp-rib__months span { padding-left: .4em; color: var(--faint); font-size: .62em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.rp-rib__months b { font-weight: inherit; }

.rp-rib__months .is-now { color: var(--ink); }

.rp-rib__label { color: var(--faint); font-size: .72em; font-weight: 640; }

.rp-rib__track {
  position: relative;
  height: 2.35em;
  border-radius: .7em;
  background: color-mix(in srgb, var(--soft) 70%, transparent);
  background-image: repeating-linear-gradient(to right, transparent 0 calc(100% / 12 - 1px), color-mix(in srgb, var(--line-strong) 45%, transparent) calc(100% / 12 - 1px) calc(100% / 12));
}

.m { position: absolute; top: 50%; left: calc(var(--x) * 1%); background: var(--k); }

.m--dot { width: .95em; height: .95em; border-radius: 999px; transform: translate(-50%, -50%); box-shadow: 0 0 0 .16em var(--surface-strong); }

.m--big { width: 1.15em; height: 1.15em; }

.m--dia { z-index: 1; width: .85em; height: .85em; border-radius: .15em; transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 0 .16em var(--surface-strong); }

.m--band { height: 1.05em; width: calc(var(--w) * 1%); border-radius: 999px; transform: translateY(-50%); }

.m.is-done { background: color-mix(in srgb, var(--k) 30%, var(--surface-strong)); box-shadow: inset 0 0 0 .12em var(--k), 0 0 0 .16em var(--surface-strong); }

.rp-rib__quarters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25em; }

.rp-rib__quarters span {
  min-width: 0;
  height: 2.2em;
  display: flex;
  align-items: center;
  gap: .5em;
  overflow: hidden;
  padding: 0 .7em;
  border-radius: .6em;
  background: color-mix(in srgb, var(--habit) 9%, var(--surface-strong));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--habit) 18%, transparent);
  color: var(--muted);
  font-size: .72em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rp-rib__quarters span.is-now { background: color-mix(in srgb, var(--habit) 18%, var(--surface-strong)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--habit) 45%, transparent); color: var(--ink); }

.rp-rib__quarters b { color: var(--habit); font-weight: 760; }

.rp-rib__quarters em { overflow: hidden; font-style: normal; text-overflow: ellipsis; }

.rp-rib__today { position: absolute; top: 1.4em; bottom: 0; left: calc(var(--lw) + (100% - var(--lw)) * var(--x) / 100); border-left: 1.5px solid var(--now); }

.rp-rib__today span { position: absolute; bottom: 0; left: 0; transform: translateX(-50%); padding: .05em .55em; border-radius: 999px; background: var(--now); color: var(--on-now); font-size: .6em; font-weight: 700; white-space: nowrap; }

.rp--ribbon:not(.s-in) .rp-rib__track,
.rp--ribbon:not(.s-in) .rp-rib__quarters span { clip-path: inset(0 100% 0 0 round .7em); }

.rp--ribbon:not(.s-in) .m { opacity: 0; scale: .2; }

.rp--ribbon:not(.s-in) .rp-rib__today { opacity: 0; transform: translateY(-.8em); }

.motion-ok .rp--ribbon .rp-rib__track { clip-path: inset(0 0 0 0 round .7em); transition: clip-path 1100ms cubic-bezier(.22, 1, .36, 1); }

.motion-ok .rp--ribbon .rp-rib__quarters span { clip-path: inset(0 0 0 0 round .6em); transition: clip-path 500ms cubic-bezier(.22, 1, .36, 1) calc(400ms + var(--i) * 160ms); }

.motion-ok .rp--ribbon .m { transition: opacity 260ms ease calc(500ms + var(--i) * 120ms), scale 520ms cubic-bezier(.34, 1.56, .64, 1) calc(500ms + var(--i) * 120ms); }

.motion-ok .rp--ribbon .rp-rib__today { transition: opacity 360ms ease 1600ms, transform 600ms cubic-bezier(.22, 1, .36, 1) 1600ms; }

@container (max-width: 560px) {
  .rp--ribbon { font-size: clamp(9.5px, 2.75cqi, 13px); }
  .rp-card { padding: 1.1em 1em 1em; }
  .rp-rib { --lw: 0em; gap: .2em; }
  .rp-rib__months span { padding-left: .25em; }
  .rp-rib__months b { display: none; }
  .rp-rib__lane { grid-template-columns: minmax(0, 1fr); }
  .rp-rib__label { margin: .5em 0 .2em; font-size: .66em; }
  .rp-rib__quarters span { padding: 0 .45em; font-size: .64em; }
  .rp-rib__quarters span:not(.is-now) em { display: none; }
  .rp-legend { display: none; }
}

/* Mini-adventures ------------------------------------------------------------- */

.rp-adv__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; margin-bottom: 1em; }

.rp-eyebrow--adv { color: var(--adventure); }

.rp-adv__count { color: var(--faint); font-size: .9em; white-space: nowrap; }

.rp-adv__count b { color: var(--ink); font-size: 2em; font-weight: 740; letter-spacing: -.04em; }

.rp-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; }

.rp-slot {
  position: relative;
  min-height: 10.5em;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: .6em;
  align-content: start;
  padding: .9em;
  border: 1px solid var(--line);
  border-radius: 1em;
  background: var(--surface-strong);
}

.rp-slot.is-lived { background: var(--surface); }

.rp-slot.is-planned { box-shadow: inset 0 .22em 0 var(--adventure); }

.rp-slot.is-empty { place-content: center; justify-items: center; grid-template-rows: none; gap: .4em; border-style: dashed; background: color-mix(in srgb, var(--adventure) 4%, transparent); color: var(--adventure); font-size: .82em; font-weight: 650; }

.rp-slot.is-empty.is-quiet { background: transparent; color: var(--faint); }

.rp-chip { justify-self: start; padding: .2em .6em; border-radius: 999px; background: color-mix(in srgb, var(--habit) 12%, transparent); color: var(--habit); font-size: .6em; font-weight: 720; letter-spacing: .07em; text-transform: uppercase; }

.rp-chip--plan { background: color-mix(in srgb, var(--adventure) 12%, transparent); color: var(--adventure); }

.rp-chip--idea { background: var(--soft); color: var(--muted); }

.rp-slot__t { display: flex; align-items: flex-start; gap: .55em; font-size: .9em; font-weight: 640; line-height: 1.3; letter-spacing: -.01em; }

.rp-slot.is-lived .rp-slot__t { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }

.rp-slot.is-lived .rp-check { background: var(--ink); box-shadow: none; }

.rp-slot.is-lived .rp-check svg.i { opacity: 1; transform: none; }

.rp-date-chip { justify-self: start; display: inline-flex; align-items: center; gap: .45em; padding: .4em .75em; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-strong); font-size: .72em; font-weight: 650; white-space: nowrap; }

.rp-date-chip--ghost { border-style: dashed; color: var(--muted); }

.rp-slot--flip > * { grid-row: auto; }

.rp-slot--flip { grid-template-areas: "chip" "title" "date"; }

.rp-slot--flip .rp-chip { grid-area: chip; }

.rp-slot--flip .rp-slot__t { grid-area: title; }

.rp-slot--flip .rp-date-chip { grid-area: date; }

.rp--adv.s-planned .rp-slot--flip { box-shadow: inset 0 .22em 0 var(--adventure); }

.rp--adv.s-planned .rp-chip--idea,
.rp--adv.s-planned .rp-date-chip--ghost,
.rp--adv:not(.s-planned) .rp-slot--flip .rp-chip--plan,
.rp--adv:not(.s-planned) .rp-date-chip--set { opacity: 0; scale: .8; }

.motion-ok .rp-slot--flip .rp-chip,
.motion-ok .rp-slot--flip .rp-date-chip { transition: opacity 240ms ease, scale 380ms cubic-bezier(.34, 1.56, .64, 1); }

.motion-ok .rp-slot--flip { transition: box-shadow 300ms ease; }

@container (max-width: 520px) {
  .rp-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-slot { min-height: 9em; }
  .rp-adv__head .rp-title { font-size: 1em; }
}

/* Progress -------------------------------------------------------------------- */

.rp--progress .rp-card { padding: 1.2em 1.3em 1.1em; }

.rp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55em; margin-bottom: 1.2em; }

.rp-stats > span { min-width: 0; display: grid; align-content: start; gap: .3em; padding: .75em .8em; border: 1px solid var(--line); border-radius: .85em; background: var(--surface-strong); }

.rp-stats small { color: var(--faint); font-size: .56em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rp-stats b { display: flex; align-items: center; gap: .25em; min-height: 1.5em; font-size: 1.55em; font-weight: 740; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }

.rp-stats b i { color: var(--faint); font-size: .55em; font-style: normal; font-weight: 600; letter-spacing: 0; }

.rp-stats em { color: var(--muted); font-size: .6em; font-style: normal; line-height: 1.3; }

.rp-stats__streak b { color: var(--paint); }

.rp-stats__streak svg.i { width: .8em; height: .8em; }

.rp-jokers { gap: .3em; }

.rp-jokers i { width: .8em; height: .8em; border: 1.5px dashed var(--line-strong); border-radius: .22em; }

.rp-jokers i.is-left { border: 0; background: color-mix(in srgb, var(--milestone) 30%, var(--surface-strong)); box-shadow: inset 0 0 0 1.5px var(--milestone); }

.rp-paint { display: grid; gap: .28em; }

.rp-paint__row { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); align-items: center; gap: .5em; }

.rp-paint__row > span { color: var(--faint); font-size: .58em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.rp-paint__cells { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: .2em; }

.rp-paint__legend { display: flex; flex-wrap: wrap; gap: .3em 1em; margin: .9em 0 0; padding: 0 0 0 3.1em; list-style: none; }

.rp-paint__legend li { display: inline-flex; align-items: center; gap: .4em; color: var(--muted); font-size: .64em; }

.rp-paint__legend li::before { content: ""; width: .95em; height: .95em; border-radius: .22em; }

.rp-paint__legend .l1::before { background: color-mix(in srgb, var(--paint) 34%, var(--surface-strong)); }

.rp-paint__legend .l2::before { background: color-mix(in srgb, var(--paint) 66%, var(--surface-strong)); }

.rp-paint__legend .l3::before { background: var(--paint); }

.rp-paint__legend .lj::before { background: color-mix(in srgb, var(--milestone) 22%, var(--surface-strong)); box-shadow: inset 0 0 0 1.5px var(--milestone); }

.rp--progress:not(.s-in) .rp-paint .cell:is(.l1, .l2, .l3, .joker, .miss) { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent); }

.motion-ok .rp--progress .rp-paint .cell { transition: background-color 260ms ease calc(var(--d) * 7ms), box-shadow 260ms ease calc(var(--d) * 7ms); }

.motion-ok .rp--progress.s-in .rp-paint .cell.is-today { animation: rp-paint-in 900ms cubic-bezier(.34, 1.56, .64, 1) calc(var(--d) * 7ms + 200ms) both; }

.rp-toast { position: absolute; z-index: 3; right: 1.2em; bottom: -1.4em; display: flex; align-items: center; gap: .75em; padding: .75em 1.1em .75em .75em; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-strong); box-shadow: var(--shadow-pop); }

.rp-toast__badge { width: 2.5em; height: 2.5em; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--paint) 16%, var(--surface-strong)); color: var(--paint); }

.rp-toast__badge svg.i { width: 1.3em; height: 1.3em; }

.rp-toast small { display: block; color: var(--muted); font-size: .62em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.rp-toast b { font-size: .92em; font-weight: 700; letter-spacing: -.015em; }

.rp--progress:not(.s-toast) .rp-toast { opacity: 0; transform: translateY(1em) scale(.94); }

.motion-ok .rp-toast { transition: opacity 300ms ease, transform 560ms cubic-bezier(.34, 1.4, .64, 1); }

@container (max-width: 560px) {
  .rp--progress { font-size: clamp(9.5px, 2.75cqi, 13px); }
  .rp--progress .rp-card { padding: 1em .9em; }
  .rp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-paint__row { grid-template-columns: 1.1em minmax(0, 1fr); gap: .35em; }
  .rp-paint__row > span b { display: none; }
  .rp-paint__cells { gap: .14em; }
  .rp-paint__legend { padding-left: 1.45em; }
  .rp-toast { right: .6em; }
}

/* Trophy cards ---------------------------------------------------------------- */

.rp--trophies { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8em; font-size: clamp(11px, 1.15cqi, 14px); }

.rp-trophy { min-width: 0; display: grid; grid-template-columns: 3.3em minmax(0, 1fr); align-items: center; gap: .9em; padding: .9em 1em; border: 1px solid var(--line); border-radius: 1.05em; background: var(--surface-strong); }

.rp-trophy__badge { position: relative; width: 3.3em; height: 3.3em; display: grid; place-items: center; border-radius: 999px; background: var(--soft); color: var(--faint-mark); }

.rp-trophy__badge > svg.i { width: 1.55em; height: 1.55em; }

.rp-trophy__badge i { position: absolute; right: -.15em; bottom: -.15em; width: 1.35em; height: 1.35em; display: grid; place-items: center; border-radius: 999px; background: var(--surface-strong); box-shadow: 0 0 0 1px var(--line); }

.rp-trophy__badge i svg.i { width: .8em; height: .8em; }

.rp-trophy.is-unlocked .rp-trophy__badge { background: color-mix(in srgb, var(--t) 16%, var(--surface-strong)); color: var(--t); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--t) 40%, transparent); }

.rp-trophy > span:last-child { display: grid; gap: .2em; min-width: 0; }

.rp-trophy b { font-size: .9em; font-weight: 680; letter-spacing: -.012em; line-height: 1.25; }

.rp-trophy small { color: var(--muted); font-size: .76em; line-height: 1.35; }

.rp-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6em; margin-top: .25em; }

.rp-meter i { position: relative; height: .42em; overflow: hidden; border-radius: 999px; background: var(--soft); }

.rp-meter i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--t); transform: scaleX(var(--p)); transform-origin: left; }

.rp-meter em { color: var(--muted); font-size: .72em; font-style: normal; font-weight: 650; font-variant-numeric: tabular-nums; }

.rp--trophies:not(.s-in) .rp-meter i::after { transform: scaleX(0); }

.motion-ok .rp--trophies .rp-meter i::after { transition: transform 1100ms cubic-bezier(.22, 1, .36, 1) 200ms; }

@container (max-width: 1000px) {
  .rp--trophies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 520px) {
  .rp--trophies { grid-template-columns: minmax(0, 1fr); }
}

/* Sync: laptop, tablet and phone ----------------------------------------------- */

.rp--sync { display: grid; grid-template-columns: minmax(0, 1fr) 4.4em 13.5em; align-items: center; padding: 1em 0 5.4em; }

.rp-laptop { position: relative; }

/* The tablet stands in front of the laptop's lower right corner. */
.rp-tablet { position: absolute; z-index: 2; right: -1.6em; bottom: -5.2em; width: 50%; aspect-ratio: 4 / 3; display: grid; padding: .62em; border: 1px solid var(--line-strong); border-radius: 1.3em; background: var(--surface-strong); box-shadow: var(--shadow-rp); }

/* The front camera, on the long edge. */
.rp-tablet::before { content: ""; position: absolute; left: 50%; top: .2em; width: .24em; height: .24em; border-radius: 999px; background: var(--line-strong); transform: translateX(-50%); }

.rp-tablet__screen { min-height: 0; overflow: hidden; padding: .8em .9em .6em; border-radius: .8em; background: var(--paper); }

.rp-tablet .rp-phone__url { margin-bottom: .55em; }

.rp-tablet .rp-h { margin-top: 0; }

.rp-tablet .rp-row { min-height: 2.45em; margin-bottom: .35em; font-size: .8em; }

.rp--sync.s-done .rp-tick--tablet { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paint) 45%, transparent), 0 0 0 .3em color-mix(in srgb, var(--paint) 12%, transparent); }

.motion-ok .rp--sync .rp-tick--tablet { transition: box-shadow 400ms ease 260ms; }

.motion-ok .rp--sync .rp-tick--tablet .rp-check { transition-delay: 260ms; }

.motion-ok .rp--sync .rp-tick--tablet .rp-check svg.i { transition-delay: 260ms; }

.motion-ok .rp--sync .rp-tick--tablet .rp-txt { transition-delay: 260ms, 360ms; }

.rp-laptop .rp-window { border-radius: .9em .9em .3em .3em; }

.rp-laptop__base { display: block; height: .9em; margin: 0 -1.6em; border-radius: 0 0 1em 1em; background: linear-gradient(var(--line-strong), color-mix(in srgb, var(--line-strong) 60%, var(--paper))); }

.rp-mini { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1em; padding: 1em 1.1em 1.2em; }

.rp-mini .rp-row,
.rp-phone .rp-row { min-height: 2.6em; font-size: .84em; }

.rp--sync.s-done .rp-tick--laptop { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paint) 45%, transparent), 0 0 0 .3em color-mix(in srgb, var(--paint) 12%, transparent); }

.motion-ok .rp--sync .rp-tick--laptop { transition: box-shadow 400ms ease; }

.rp-mini__sched { position: relative; border-left: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--line) 75%, transparent) 0 1px, transparent 1px 2.2em); }

.rp-mini__sched i { position: absolute; left: .4em; right: .2em; top: calc(var(--s) * 2.2em); height: calc(var(--d) * 2.2em - 3px); border-radius: .4em; background: color-mix(in srgb, var(--c) 14%, var(--surface-strong)); box-shadow: inset .18em 0 0 var(--c); }

.rp-syncdot { position: relative; display: grid; justify-items: center; gap: .3em; color: var(--muted); }

.rp-syncdot svg.i { width: 2.6em; height: 2.6em; padding: .55em; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-strong); color: var(--ink); box-shadow: var(--shadow-pop); }

.rp-syncdot small { font-size: .62em; font-weight: 650; white-space: nowrap; }

.motion-ok .rp--sync.is-playing.s-sync .rp-syncdot svg.i { animation: rp-spin 1100ms cubic-bezier(.45, 0, .2, 1) infinite; color: var(--paint); }

@keyframes rp-spin {
  to { transform: rotate(360deg); }
}

.rp-phone { position: relative; padding: .55em; border: 1px solid var(--line-strong); border-radius: 2em; background: var(--surface-strong); box-shadow: var(--shadow-rp); }

.rp-phone__screen { position: relative; min-height: 17.5em; padding: 2.2em .9em 1em; border-radius: 1.5em; background: var(--paper); }

.rp-phone__screen::before { content: ""; position: absolute; left: 50%; top: .6em; width: 4.2em; height: 1.05em; border-radius: 999px; background: var(--ink); transform: translateX(-50%); opacity: .9; }

.rp-phone__url { display: block; margin: 0 auto .8em; padding: .2em .6em; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: .6em; font-weight: 600; text-align: center; }

.rp-finger { position: absolute; left: 1.5em; top: 7.2em; width: 2.4em; height: 2.4em; border-radius: 999px; background: color-mix(in srgb, var(--ink) 18%, transparent); box-shadow: 0 0 0 .3em color-mix(in srgb, var(--ink) 7%, transparent); opacity: 0; pointer-events: none; }

.motion-ok .rp--sync.s-finger .rp-finger { animation: rp-tap 1500ms ease both; }

@keyframes rp-tap {
  0% { opacity: 0; transform: translate(1.5em, 1.8em) scale(1.1); }
  30% { opacity: 1; transform: translate(0, 0) scale(1.1); }
  45% { opacity: 1; transform: scale(.8); }
  60% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

@container (max-width: 520px) {
  .rp--sync { grid-template-columns: minmax(0, 1fr) 3.2em 10.5em; font-size: clamp(8.5px, 2.4cqi, 12px); }
  .rp-mini { grid-template-columns: minmax(0, 1fr); }
  .rp-mini__sched { display: none; }
  .rp-syncdot small { display: none; }
  .rp-phone__screen { min-height: 15em; }
}

/* Compact tools: Search, Floating mode, Print and export ---------------------- */

.rp--mini { font-size: clamp(10px, 3.6cqi, 13.5px); }

.rp-mini-sheet,
.rp-desk,
.rp-paper { position: relative; height: 13em; overflow: hidden; border: 1px solid var(--line); border-radius: 1.1em; box-shadow: var(--shadow-rp); }

.rp-mini-sheet { display: grid; align-content: start; gap: .8em; padding: 1.1em; background: var(--surface); }

.rp-search { display: flex; align-items: center; gap: .55em; min-height: 2.7em; padding: 0 .8em; border: 1px solid var(--line-strong); border-radius: .7em; background: var(--surface-strong); font-size: .86em; font-weight: 560; }

.rp-search svg.i { color: var(--muted); }

.rp-res { display: grid; gap: .25em; }

.rp-res > span { display: grid; gap: .1em; min-width: 0; padding: .4em .6em; border-radius: .55em; }

.rp-res > span:first-child { background: var(--soft); }

.rp-res small { color: var(--faint); font-size: .58em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }

.rp-res b { overflow: hidden; font-size: .78em; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }

.rp-res mark { padding: 0 .1em; border-radius: .2em; background: color-mix(in srgb, var(--paint) 22%, transparent); color: inherit; }

.rp--search:not(.s-res) .rp-res > span { opacity: 0; transform: translateY(.5em); }

.motion-ok .rp--search .rp-res > span { transition: opacity 260ms ease calc(var(--i) * 90ms), transform 460ms cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 90ms); }

.rp-desk { background: var(--soft); }

.rp-desk__app { position: absolute; inset: 1em; display: grid; align-content: start; gap: .65em; padding: 1em; border-radius: .7em; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

.rp-desk__app i { display: block; width: 70%; height: .55em; border-radius: 999px; background: var(--line); }

.rp-desk__app i:first-child { width: 38%; height: .7em; background: var(--line-strong); }

.rp-desk__app i:nth-child(2) { width: 88%; }

.rp-float { position: absolute; right: 1.5em; bottom: 1.3em; width: 12.6em; display: grid; gap: .35em; padding: .55em .6em .7em; border: 1px solid var(--line-strong); border-radius: .75em; background: var(--paper); box-shadow: var(--shadow-pop); }

.rp-float__bar { display: flex; align-items: center; justify-content: space-between; color: var(--faint); font-size: .56em; letter-spacing: .05em; text-transform: uppercase; }

.rp-float__bar b { font-weight: 700; }

.rp-float__bar i { width: .8em; height: .8em; border-radius: 999px; background: var(--line-strong); }

.rp-float__seg { display: grid; grid-template-columns: 1fr 1fr; gap: .2em; padding: .18em; border-radius: .5em; background: var(--soft); }

.rp-float__seg span { padding: .25em 0; border-radius: .35em; color: var(--muted); font-size: .62em; font-weight: 650; text-align: center; }

.rp-float__seg .is-on { background: var(--surface-strong); color: var(--ink); box-shadow: 0 1px 4px rgba(28, 25, 21, .07); }

.rp-float__row { display: flex; align-items: center; gap: .45em; overflow: hidden; padding: .3em .4em; border-radius: .45em; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: .66em; font-weight: 600; white-space: nowrap; }

.rp-float__row i { width: 1.15em; height: 1.15em; flex: 0 0 auto; display: grid; place-items: center; border-radius: .3em; box-shadow: inset 0 0 0 1.2px var(--line-strong); color: var(--paper); }

.rp .rp-float__row i svg.i { width: .85em; height: .85em; stroke-width: 2.6; }

.rp-float__row.is-done { color: var(--muted); text-decoration: line-through; }

.rp-float__row.is-done i { background: var(--ink); box-shadow: none; }

.rp-paper { display: flex; align-items: center; justify-content: center; gap: 1.2em; background: var(--soft); }

.rp-paper__page { width: 8.6em; aspect-ratio: 1 / 1.3; display: grid; align-content: start; gap: .55em; padding: .9em .8em; border-radius: .3em; background: var(--surface-strong); box-shadow: 0 .5em 1.4em -.4em rgba(48, 38, 26, .3), inset 0 0 0 1px var(--line); }

.rp-paper__page b { margin-bottom: .2em; font-size: .64em; font-weight: 720; }

.rp-paper__page i { display: block; height: .4em; border-radius: 999px; background: var(--line); }

.rp-paper__page i.is-short { width: 60%; }

.rp-paper__actions { display: grid; gap: .45em; }

.rp-paper__actions span { display: inline-flex; align-items: center; gap: .45em; padding: .45em .75em; border: 1px solid var(--line); border-radius: .55em; background: var(--surface-strong); font-size: .7em; font-weight: 650; }

.rp-paper__actions span:first-child { border-color: transparent; background: var(--ink); color: var(--paper); }

/* The yearly ritual: Plan your year -------------------------------------------------------- */

.rp-eyebrow--year { color: var(--paint); }

.rp-yp { overflow: hidden; border: 1px solid var(--line); border-radius: 1.3em; background: var(--surface-strong); box-shadow: var(--shadow-rp); }

.rp-yp__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; padding: 1.3em 1.5em 1em; }

.rp-yp__time { padding: .3em .75em; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: .68em; font-weight: 650; white-space: nowrap; }

.rp-yp__bar { display: block; height: .25em; margin: 0 1.5em; overflow: hidden; border-radius: 999px; background: var(--soft); }

.rp-yp__bar i { display: block; height: 100%; border-radius: inherit; background: var(--paint); transform: scaleX(var(--p, .143)); transform-origin: left; }

.rp--yp.s-2 { --p: .286; }

.rp--yp.s-3 { --p: .429; }

.rp--yp.s-4 { --p: .571; }

.rp--yp.s-5 { --p: .714; }

.rp--yp.s-6 { --p: .857; }

.rp--yp.s-7 { --p: 1; }

.motion-ok .rp-yp__bar i { transition: transform 700ms cubic-bezier(.22, 1, .36, 1); }

.rp-yp__body { display: grid; grid-template-columns: 9.6em minmax(0, 1fr); gap: 1.4em; padding: 1.3em 1.5em 1.5em; }

.rp-yp__rail { display: grid; align-content: start; gap: .2em; margin: 0; padding: 0; list-style: none; }

.yp-step { display: flex; align-items: center; gap: .6em; min-height: 2.25em; padding: 0 .6em; border-radius: .55em; color: var(--faint); font-size: .78em; font-weight: 620; white-space: nowrap; }

.yp-step i { width: 1.45em; height: 1.45em; flex: 0 0 auto; display: grid; place-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--paper); }

.rp .yp-step svg.i { width: .95em; height: .95em; stroke-width: 2.6; opacity: 0; transform: scale(.4); }

:is(.rp--yp.s-2 .yp-step--1, .rp--yp.s-3 .yp-step--2, .rp--yp.s-4 .yp-step--3, .rp--yp.s-5 .yp-step--4, .rp--yp.s-6 .yp-step--5, .rp--yp.s-7 .yp-step--6) { color: var(--muted); }

:is(.rp--yp.s-2 .yp-step--1, .rp--yp.s-3 .yp-step--2, .rp--yp.s-4 .yp-step--3, .rp--yp.s-5 .yp-step--4, .rp--yp.s-6 .yp-step--5, .rp--yp.s-7 .yp-step--6) i { background: var(--ink); box-shadow: none; }

:is(.rp--yp.s-2 .yp-step--1, .rp--yp.s-3 .yp-step--2, .rp--yp.s-4 .yp-step--3, .rp--yp.s-5 .yp-step--4, .rp--yp.s-6 .yp-step--5, .rp--yp.s-7 .yp-step--6) svg.i { opacity: 1; transform: none; }

:is(.rp--yp:not(.s-2) .yp-step--1, .rp--yp.s-2:not(.s-3) .yp-step--2, .rp--yp.s-3:not(.s-4) .yp-step--3, .rp--yp.s-4:not(.s-5) .yp-step--4, .rp--yp.s-5:not(.s-6) .yp-step--5, .rp--yp.s-6:not(.s-7) .yp-step--6, .rp--yp.s-7 .yp-step--7) { background: var(--soft); color: var(--ink); font-weight: 700; }

:is(.rp--yp:not(.s-2) .yp-step--1, .rp--yp.s-2:not(.s-3) .yp-step--2, .rp--yp.s-3:not(.s-4) .yp-step--3, .rp--yp.s-4:not(.s-5) .yp-step--4, .rp--yp.s-5:not(.s-6) .yp-step--5, .rp--yp.s-6:not(.s-7) .yp-step--6, .rp--yp.s-7 .yp-step--7) i { box-shadow: inset 0 0 0 .4em var(--paint); }

.motion-ok .yp-step { transition: background-color 260ms ease, color 260ms ease; }

.motion-ok .yp-step i { transition: background-color 260ms ease, box-shadow 300ms ease; }

.motion-ok .rp .yp-step svg.i { transition: opacity 200ms ease, transform 320ms cubic-bezier(.34, 1.56, .64, 1); }

/* One pane per step, stacked in one cell. `--on` is 1 on the visible pane and
   drives its own fade and the staggered rise of what's inside it. */
.rp-yp__panes { display: grid; min-width: 0; }

.yp-pane { grid-area: 1 / 1; display: grid; align-content: start; gap: .85em; min-width: 0; visibility: hidden; opacity: 0; transform: translateY(.8em); }

:is(.rp--yp:not(.s-2) .yp-pane--1, .rp--yp.s-2:not(.s-3) .yp-pane--2, .rp--yp.s-3:not(.s-4) .yp-pane--3, .rp--yp.s-4:not(.s-5) .yp-pane--4, .rp--yp.s-5:not(.s-6) .yp-pane--5, .rp--yp.s-6:not(.s-7) .yp-pane--6, .rp--yp.s-7 .yp-pane--7) { --on: 1; visibility: visible; opacity: 1; transform: none; }

.motion-ok .yp-pane { transition: opacity 260ms ease calc(var(--on, 0) * 160ms), transform 480ms cubic-bezier(.22, 1, .36, 1) calc(var(--on, 0) * 120ms), visibility 0s linear calc((1 - var(--on, 0)) * 480ms); }

.yp-row,
.yp-tiles span,
.yp-quarters span { opacity: var(--on, 0); transform: translateY(calc((1 - var(--on, 0)) * .6em)); }

.yp-months i { opacity: var(--on, 0); scale: calc(.3 + var(--on, 0) * .7); }

.motion-ok :is(.yp-row, .yp-tiles span, .yp-quarters span) { transition: opacity 280ms ease calc(var(--on, 0) * (260ms + var(--i, 0) * 130ms)), transform 480ms cubic-bezier(.22, 1, .36, 1) calc(var(--on, 0) * (260ms + var(--i, 0) * 130ms)); }

.motion-ok .yp-months i { transition: opacity 240ms ease calc(var(--on, 0) * (300ms + var(--i, 0) * 110ms)), scale 460ms cubic-bezier(.34, 1.56, .64, 1) calc(var(--on, 0) * (300ms + var(--i, 0) * 110ms)); }

.yp-q { font-size: 1.05em; font-weight: 720; letter-spacing: -.025em; line-height: 1.25; }

.yp-field { display: flex; align-items: center; min-height: 2.9em; font-size: .9em; }

.yp-when { display: flex; align-items: center; gap: .7em; }

.yp-when small { color: var(--muted); font-size: .72em; font-weight: 650; }

.rp--yp:not(.s-when) .yp-pop { opacity: 0; scale: .7; }

.motion-ok .yp-pop { transition: opacity 220ms ease, scale 420ms cubic-bezier(.34, 1.56, .64, 1); }

.yp-hint { color: var(--faint); font-size: .74em; }

.yp-list { display: grid; gap: .45em; }

.yp-row { display: flex; align-items: center; gap: .7em; min-height: 2.65em; padding: .4em .75em; border: 1px solid var(--line); border-radius: .7em; background: var(--surface); }

.yp-row b { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: .8em; font-weight: 620; white-space: nowrap; text-overflow: ellipsis; }

.yp-row em { flex: 0 0 auto; color: var(--muted); font-size: .7em; font-style: normal; font-weight: 650; font-variant-numeric: tabular-nums; }

.yp-dia { width: .66em; height: .66em; flex: 0 0 auto; border-radius: .12em; background: var(--milestone); transform: rotate(45deg); }

.yp-dot { width: .7em; height: .7em; flex: 0 0 auto; border-radius: 999px; background: var(--keydate); }

.yp-num { width: 1.7em; height: 1.7em; flex: 0 0 auto; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--surface-strong)); color: var(--accent); font-size: .7em; font-style: normal; font-weight: 740; }

.yp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45em; }

.yp-tiles span { min-height: 5.6em; display: flex; align-items: flex-end; padding: .7em .7em .6em; border: 1px solid var(--line); border-radius: .8em; background: var(--surface); box-shadow: inset 0 .25em 0 var(--adventure); font-size: .72em; font-weight: 640; line-height: 1.25; }

.yp-quarters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45em; }

.yp-quarters span { display: grid; gap: .15em; padding: .65em .8em; border-radius: .7em; background: color-mix(in srgb, var(--habit) 9%, var(--surface-strong)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--habit) 22%, transparent); font-size: .78em; font-weight: 600; }

.yp-quarters b { color: var(--habit); font-size: .85em; font-weight: 760; }

.yp-months {
  position: relative;
  display: block;
  height: 2em;
  border-radius: .6em;
  background: color-mix(in srgb, var(--soft) 70%, transparent);
  background-image: repeating-linear-gradient(to right, transparent 0 calc(100% / 12 - 1px), color-mix(in srgb, var(--line-strong) 45%, transparent) calc(100% / 12 - 1px) calc(100% / 12));
}

.yp-months i { position: absolute; top: 50%; left: calc(var(--x) * 1%); width: .8em; height: .8em; margin: -.4em 0 0 -.4em; border-radius: 999px; background: var(--keydate); }

.yp-months i.is-band { width: calc(var(--w) * 1%); height: .9em; margin: -.45em 0 0; }

.yp-sheet { display: grid; padding: .2em .9em; border: 1px solid var(--line); border-radius: .8em; background: var(--surface); }

.yp-sheet__row { display: grid; grid-template-columns: 6.4em minmax(0, 1fr) auto; align-items: center; gap: .8em; min-height: 2.6em; border-bottom: 1px solid var(--line); }

.yp-sheet__row:last-child { border-bottom: 0; }

.yp-sheet__row small { color: var(--faint); font-size: .6em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

.yp-sheet__row b { overflow: hidden; font-size: .8em; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }

.yp-sheet__row em { color: var(--muted); font-size: .7em; font-style: normal; font-weight: 650; }

.yp-sheet__marks { display: flex; align-items: center; gap: .45em; }

.yp-sheet__marks i { width: .75em; height: .75em; border-radius: 999px; background: var(--adventure); }

.yp-sheet__marks .yp-dia { width: .6em; height: .6em; border-radius: .1em; background: var(--milestone); }

.yp-sheet__qs { grid-column: span 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3em; }

.yp-sheet__qs i { padding: .2em 0; border-radius: .4em; background: color-mix(in srgb, var(--habit) 14%, var(--surface-strong)); color: var(--habit); font-size: .62em; font-style: normal; font-weight: 740; text-align: center; }

.yp-print { justify-self: start; display: inline-flex; align-items: center; gap: .5em; padding: .7em 1.05em; border-radius: .6em; background: var(--ink); color: var(--paper); font-size: .76em; font-weight: 680; }

.rp--yp.s-press .yp-print { background: color-mix(in srgb, var(--ink) 80%, var(--paper)); transform: scale(.94); }

.motion-ok .yp-print { transition: transform 160ms cubic-bezier(.22, 1, .36, 1), background-color 160ms ease; }

@container (max-width: 560px) {
  .rp--yp { font-size: clamp(10px, 3.3cqi, 13px); }
  .rp-yp__head { padding: 1.1em 1.1em .9em; }
  .rp-yp__bar { margin-inline: 1.1em; }
  .rp-yp__body { grid-template-columns: minmax(0, 1fr); gap: 1em; padding: 1em 1.1em 1.2em; }
  .rp-yp__rail { display: flex; flex-wrap: wrap; gap: .3em; }
  .yp-step { padding: 0 .35em; }
  .yp-step span { display: none; }
}

/* The yearly ritual: Your year in review --------------------------------------------------- */

.rp--review { isolation: isolate; padding: 0 1em 1em 0; }

/* A second sheet behind the page, like a printout. */
.rp--review::before { content: ""; position: absolute; z-index: -1; inset: 1em 0 0 1em; border: 1px solid var(--line); border-radius: .5em; background: var(--surface); box-shadow: var(--shadow-pop); }

.rp-rv { display: grid; gap: 1.05em; padding: 1.5em 1.6em 1.4em; border: 1px solid var(--line); border-radius: .5em; background: var(--surface-strong); box-shadow: var(--shadow-rp); }

.rp-rv__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; padding-bottom: .9em; border-bottom: 1.5px solid var(--ink); }

.rp-rv__title { display: block; font-size: 1.5em; font-weight: 760; letter-spacing: -.04em; line-height: 1.1; }

.rp-rv__print { display: inline-flex; align-items: center; gap: .4em; padding: .5em .85em; border: 1px solid var(--line-strong); border-radius: .55em; font-size: .72em; font-weight: 650; }

.rp--review.s-press .rp-rv__print { background: var(--soft); transform: scale(.94); }

.motion-ok .rp-rv__print { transition: transform 160ms cubic-bezier(.22, 1, .36, 1), background-color 160ms ease; }

.rp-rv__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; }

.rp-rv__stats > span { min-width: 0; display: grid; gap: .3em; padding: .65em .75em; border-radius: .7em; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

.rp-rv__stats small { overflow: hidden; color: var(--faint); font-size: .54em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }

.rp-rv__stats b { display: flex; align-items: center; gap: .2em; font-size: 1.35em; font-weight: 750; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }

.rp-rv__stats b i { color: var(--faint); font-size: .5em; font-style: normal; font-weight: 600; letter-spacing: 0; }

.rp-rv__streak b { color: var(--paint); }

.rp .rp-rv__streak svg.i { width: .8em; height: .8em; }

/* The painted year in two halves, January–June and July–December. */
.rp-rv__paint { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); grid-auto-flow: column; gap: .2em 1.2em; }

.rp-rv__paint .rp-paint__row { grid-template-columns: 1.3em minmax(0, 1fr); gap: .4em; }

.rp-rv__paint .rp-paint__row > span { font-size: .52em; }

.rp-rv__paint .rp-paint__row > span b { display: none; }

.rp-rv__paint .rp-paint__cells { gap: .12em; }

.rp-rv__paint .cell { border-radius: .14em; }

.rp--review:not(.s-in) .rp-paint .cell:is(.l1, .l2, .l3, .joker, .miss) { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent); }

.motion-ok .rp--review .rp-paint .cell { transition: background-color 240ms ease calc(var(--d) * 4ms), box-shadow 240ms ease calc(var(--d) * 4ms); }

.rp-rv__cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.6em; }

.rp-rv__h { margin: 0 0 .6em; color: var(--faint); font-size: .58em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.rp-rv__bars { display: grid; gap: .5em; }

.rp-rv__bars span { display: grid; grid-template-columns: 5.2em minmax(0, 1fr) 2.6em; align-items: center; gap: .6em; }

.rp-rv__bars b { overflow: hidden; font-size: .7em; font-weight: 620; white-space: nowrap; text-overflow: ellipsis; }

.rp-rv__bars i { width: calc(var(--w) * 1%); height: .5em; border-radius: 999px; background: var(--c); transform-origin: left; }

.rp-rv__bars em { color: var(--muted); font-size: .66em; font-style: normal; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }

.rp--review:not(.s-bars) .rp-rv__bars i { transform: scaleX(0); }

.motion-ok .rp--review .rp-rv__bars i { transition: transform 900ms cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 110ms); }

.rp-rv__hz { display: grid; gap: .55em; }

.rp-rv__hz span { display: grid; grid-template-columns: .7em minmax(0, 1fr); align-items: center; gap: .1em .6em; }

.rp-rv__hz i { width: .7em; height: .7em; border-radius: .2em; background: var(--k); }

.rp-rv__hz b { font-size: .72em; font-weight: 680; }

.rp-rv__hz em { grid-column: 2; overflow: hidden; color: var(--muted); font-size: .66em; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }

.rp--review:not(.s-bars) .rp-rv__hz span,
.rp--review:not(.s-notes) .rp-rv__notes > span { opacity: 0; transform: translateY(.5em); }

.motion-ok .rp--review :is(.rp-rv__hz span, .rp-rv__notes > span) { transition: opacity 300ms ease calc(var(--i) * 120ms + 200ms), transform 520ms cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 120ms + 200ms); }

.rp-rv__notes { display: grid; gap: .45em; padding-top: .9em; border-top: 1px solid var(--line); }

.rp-rv__notes .rp-rv__h { margin-bottom: .15em; }

.rp-rv__notes > span { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: .9em; }

.rp-rv__notes time { color: var(--faint); font-size: .64em; font-weight: 620; font-variant-numeric: tabular-nums; }

.rp-rv__notes b { font-size: .74em; font-weight: 600; }

.rp-rv__notes em { color: var(--muted); font-size: .72em; font-style: normal; }

@container (max-width: 560px) {
  .rp--review { font-size: clamp(9.5px, 2.9cqi, 13px); }
  .rp-rv { padding: 1.1em 1em 1em; }
  .rp-rv__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-rv__paint { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .rp-rv__cols { grid-template-columns: minmax(0, 1fr); gap: 1em; }
  .rp-rv__notes > span { grid-template-columns: 3.6em minmax(0, 1fr); }
  .rp-rv__notes em { grid-column: 2; }
}

/* The yearly ritual: the printed year map, filled in by hand ------------------------------
   An A4 landscape sheet like the one Horizon prints (styles/year.css): the
   plan in type, what's left as lines and boxes, and a few pen marks that draw
   themselves in once (`s-ink`). Without motion they are simply there. */

:root { --pen-ink: #2b55a1; }

@media (prefers-color-scheme: dark) {
  :root { --pen-ink: #93b4ee; }
}

.rp-scale--print { padding: .6em .4em 1.4em; }

.rp--print { font-size: clamp(6.5px, 1.5cqi, 11px); }

.rp-pp {
  position: relative;
  aspect-ratio: 297 / 210;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1em;
  overflow: hidden;
  padding: 1.6em 1.8em 1.5em;
  border-radius: .35em;
  background: var(--surface-strong);
  box-shadow: var(--shadow-rp), inset 0 0 0 1px color-mix(in srgb, var(--line) 75%, transparent);
  transform: rotate(-.7deg);
}

.rp-pp__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; padding-bottom: .65em; border-bottom: 1px solid var(--line-strong); }

.rp-pp__title { display: grid; gap: .25em; }

.rp-pp__title small { color: var(--faint); font-size: .6em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.rp-pp__title b { font-size: 2.1em; font-weight: 780; letter-spacing: -.045em; line-height: .95; }

.rp-pp__legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3em 1em; }

.rp-pp__legend i { display: inline-flex; align-items: center; gap: .4em; color: var(--muted); font-size: .62em; font-style: normal; }

.rp-pp__legend i::before { content: ""; width: .8em; height: .8em; border-radius: 999px; background: var(--k); }

.rp-pp .k-misogi { --k: var(--misogi); }

.rp-pp .k-milestone { --k: var(--milestone); }

.rp-pp .k-adventure { --k: var(--adventure); }

.rp-pp .k-keydate { --k: var(--keydate); }

.rp-pp__legend .k-milestone::before { border-radius: .12em; transform: rotate(45deg) scale(.82); }

.rp-pp__body { display: grid; grid-template-columns: minmax(0, 27fr) minmax(0, 73fr); gap: 1em; min-height: 0; }

.rp-pp__side { display: grid; align-content: start; gap: .7em; min-width: 0; }

.rp-pp__card,
.rp-pp__month { min-width: 0; padding: .55em .65em .35em; border: 1px solid var(--line); border-radius: .5em; }

.rp-pp__h { margin-bottom: .3em; font-size: .78em; font-weight: 740; letter-spacing: -.01em; }

.rp-pp__misogi { display: flex; align-items: flex-start; gap: .45em; font-size: .68em; line-height: 1.25; }

.rp-pp__misogi .rp-pp__box { margin-top: .05em; }

.rp-pp__misogi b { font-weight: 700; }

.rp-pp__when { margin: .3em 0 .45em; color: var(--ink); font-size: .58em; font-weight: 600; }

.rp-pp__when small,
.rp-pp__sub { color: var(--faint); font-size: .9em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.rp-pp__when small { margin-right: .6em; }

.rp-pp__sub { font-size: .52em; }

.rp-pp__list { display: grid; margin: 0; padding: 0; list-style: none; font-size: .58em; }

.rp-pp__list li { position: relative; display: grid; grid-template-columns: 1.2em .7em minmax(0, 1fr) auto; align-items: center; gap: .5em; min-height: 1.95em; border-bottom: 1px solid color-mix(in srgb, var(--line) 85%, transparent); }

.rp-pp__list li:last-child { border-bottom: 0; }

.rp-pp__list i { color: var(--faint); font-style: normal; font-weight: 650; font-variant-numeric: tabular-nums; }

.rp-pp__list b { overflow: hidden; font-weight: 580; white-space: nowrap; text-overflow: ellipsis; }

.rp-pp__list em { color: var(--muted); font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }

.rp-pp__dash { width: 2.6em; }

.rp-pp__blank { position: relative; align-self: stretch; }

.rp-pp__list--habits li,
.rp-pp__list--plain li { grid-template-columns: 1.7em minmax(0, 1fr); }

.rp-pp__list--habits i { color: var(--habit); font-weight: 760; }

.rp-pp__box { position: relative; width: 1.2em; height: 1.2em; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: .22em; background: var(--surface-strong); }

.rp-pp__months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: .6em; min-height: 0; }

.rp-pp__month { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: .25em; overflow: hidden; }

.rp-pp__mname { display: flex; align-items: baseline; justify-content: space-between; font-size: .66em; font-weight: 740; letter-spacing: -.01em; }

.rp-pp__mname small { color: var(--habit); font-size: .85em; font-weight: 760; }

.rp-pp__cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); color: var(--muted); font-size: .44em; font-weight: 560; line-height: 1.6; text-align: center; font-variant-numeric: tabular-nums; }

.rp-pp__cal > span { position: relative; border-radius: .3em; }

.rp-pp__cal .rp-pp__wd { color: var(--faint); font-weight: 700; }

.rp-pp__cal .is-weekend { color: var(--faint); }

.rp-pp__cal .is-misogi { background: color-mix(in srgb, var(--misogi) 18%, transparent); color: var(--ink); }

.rp-pp__cal .is-keydate { background: color-mix(in srgb, var(--keydate) 17%, transparent); color: var(--ink); }

.rp-pp__cal .is-adventure { background: color-mix(in srgb, var(--adventure) 17%, transparent); color: var(--ink); }

.rp-pp__cal .is-milestone { box-shadow: inset 0 0 0 1px var(--milestone); color: var(--ink); }

/* Ruled to the bottom of the card, like the printout. */
.rp-pp__lines { display: grid; grid-auto-rows: 2.2em; align-content: start; min-height: 0; margin: 0; padding: 0; list-style: none; background: repeating-linear-gradient(to bottom, transparent 0 calc(2.2em - 1px), color-mix(in srgb, var(--line) 85%, transparent) calc(2.2em - 1px) 2.2em); font-size: .46em; }

.rp-pp__lines li { position: relative; display: flex; align-items: center; gap: .45em; min-width: 0; overflow: visible; white-space: nowrap; }

.rp-pp__lines i { width: .7em; height: .7em; flex: 0 0 auto; border-radius: 999px; background: var(--k); }

.rp-pp__lines .k-milestone i { border-radius: .12em; transform: rotate(45deg) scale(.85); }

.rp-pp__lines b { flex: 0 0 auto; font-weight: 700; }

/* The pen. Paths use pathLength="1", so one dash covers each mark. */
.pen { position: absolute; z-index: 1; overflow: visible; fill: none; stroke: var(--pen-ink); stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

.pen path { stroke-dasharray: 1; stroke-dashoffset: 0; }

.pen--tick { left: -.35em; bottom: -.1em; width: 2.6em; height: 2.6em; stroke-width: 2.1; }

.pen--note { left: .1em; bottom: .15em; width: 10.5em; height: 2.1em; stroke-width: 1.2; }

.rp-pp__lines .pen--note { left: .3em; bottom: .2em; width: 10em; height: 2.9em; }

.pen--circle { left: 50%; top: 50%; width: 4.4em; height: 3.5em; stroke-width: 1.5; transform: translate(-50%, -50%); }

.rp--print:not(.s-ink) .pen path { stroke-dashoffset: 1; }

.motion-ok .rp--print .pen path { transition: stroke-dashoffset 760ms cubic-bezier(.5, .1, .3, 1) calc(var(--pen, 0) * 520ms); }

.motion-ok .rp--print .pen--note path { transition-duration: 1250ms; transition-timing-function: linear; }

/* On a phone the whole sheet would be too small to read: show its left part,
   larger, fading out where the sheet goes on. */
@media (max-width: 640px) {
  .rp--print { width: 168%; font-size: clamp(6.5px, 2.5cqi, 11px); }
  .rp-scale--print { overflow: hidden; padding: 1em 0 2.4em .7em; -webkit-mask-image: linear-gradient(to right, #000 76%, transparent 99%); mask-image: linear-gradient(to right, #000 76%, transparent 99%); }
  .rp-scale--print .rp-pp { box-shadow: var(--shadow-pop), inset 0 0 0 1px color-mix(in srgb, var(--line) 75%, transparent); }
}

/* The yearly ritual: the quarter check-in, printed --------------------------------------
   The landscape page the check-in prints (styles/quarter.css): the quarter as
   a title, five figures, the three months painted, where the time went; the
   winning habit, Horizon and the journal; then the two answers and the next
   quarter, with ruled lines to write on. The days paint in, the bars grow, the
   notes appear and a pen writes on the lines (`s-in` … `s-ink`). */

.rp-scale--quarter { padding: .6em .4em 1.4em; }

.rp--quarter { font-size: clamp(6.5px, 1.5cqi, 11px); }

.rp-qp {
  position: relative;
  aspect-ratio: 297 / 210;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  row-gap: 1.05em;
  overflow: hidden;
  padding: 1.7em 1.9em .9em;
  border-radius: .35em;
  background: var(--surface-strong);
  box-shadow: var(--shadow-rp), inset 0 0 0 1px color-mix(in srgb, var(--line) 75%, transparent);
  transform: rotate(.6deg);
}

:where(.rp-qp) :where(p, ol, ul, dl, dd) { margin: 0; padding: 0; list-style: none; }

.rp-qp__mast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36%); align-items: end; column-gap: 2.4em; padding-bottom: .8em; border-bottom: 1.5px solid var(--ink); }

.rp-qp__period { color: var(--paint); font-size: .6em; font-weight: 720; letter-spacing: .09em; text-transform: uppercase; }

.rp-qp__title { margin-top: .12em; font-size: 2.85em; font-weight: 770; letter-spacing: -.045em; line-height: 1; white-space: nowrap; }

.rp-qp__lead { padding-bottom: .1em; color: var(--muted); font-size: .76em; line-height: 1.4; }

/* Section heads: small capitals over a hairline. */
.rp-qp__h { display: flex; align-items: center; gap: .45em; margin-bottom: .75em; padding-top: .55em; border-top: 1px solid var(--line); color: var(--k, var(--ink)); font-size: .54em; font-weight: 740; letter-spacing: .09em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }

.rp-qp__h > span { overflow: hidden; margin-left: auto; color: var(--faint); font-weight: 600; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; }

.rp .rp-qp__h svg.i { width: 1.35em; height: 1.35em; }

.rp-qp__h--habit { --k: var(--habit); }

.rp-qp__h--horizon { --k: var(--adventure); }

.rp-qp__band { min-width: 0; min-height: 0; }

.rp-qp__band--paint { display: grid; grid-template-columns: minmax(0, 22%) max-content minmax(0, 1fr); align-items: start; column-gap: 2em; }

.rp-qp__figs { display: grid; }

.rp-qp__fig { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); align-items: center; column-gap: .5em; padding: .42em 0 .48em; border-top: 1px solid var(--line); }

.rp-qp__fig b { display: flex; align-items: baseline; gap: .12em; font-size: 1.5em; font-weight: 740; letter-spacing: -.04em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }

.rp-qp__fig b small { color: var(--faint); font-size: .44em; font-weight: 600; letter-spacing: 0; }

.rp-qp__fig--streak b small { margin-left: .05em; }

.rp-qp__fig--streak b { color: var(--paint); }

.rp .rp-qp__fig--streak svg.i { width: .62em; height: .62em; align-self: center; }

.rp-qp__fig > span { display: grid; gap: .1em; min-width: 0; }

.rp-qp__fig > span strong { overflow: hidden; font-size: .6em; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }

.rp-qp__fig > span small { overflow: hidden; color: var(--muted); font-size: .52em; white-space: nowrap; text-overflow: ellipsis; }

.rp-qp__months { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 1.25em; }

.rp-qp__month > p { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .3em; font-size: .64em; font-weight: 700; }

.rp-qp__month > p span { color: var(--muted); font-size: .9em; font-weight: 650; font-variant-numeric: tabular-nums; }

.rp-qp__cal { --cell: 1.02em; display: grid; grid-template-columns: repeat(7, var(--cell)); gap: .14em; }

.rp-qp__cal b { color: var(--faint); font-size: .46em; font-weight: 700; line-height: 1.6; text-align: center; }

.rp-qp__cal i,
.rp-qp__legend li::before { display: block; width: var(--cell); height: var(--cell); border-radius: calc(var(--cell) * .2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 90%, transparent); }

.rp-qp__cal i.is-pad { visibility: hidden; }

.rp-qp :is(.rp-qp__cal i, .rp-qp__legend li).is-l1 { --fill: color-mix(in srgb, var(--paint) 34%, var(--surface-strong)); }

.rp-qp :is(.rp-qp__cal i, .rp-qp__legend li).is-l2 { --fill: color-mix(in srgb, var(--paint) 66%, var(--surface-strong)); }

.rp-qp :is(.rp-qp__cal i, .rp-qp__legend li).is-l3 { --fill: var(--paint); }

.rp-qp :is(.rp-qp__cal i, .rp-qp__legend li).is-miss { --fill: color-mix(in srgb, var(--line) 55%, var(--soft)); }

.rp-qp :is(.rp-qp__cal i, .rp-qp__legend li).is-joker { --fill: color-mix(in srgb, var(--milestone) 22%, var(--surface-strong)); --edge: var(--milestone); }

.rp-qp__cal i:is(.is-l1, .is-l2, .is-l3, .is-miss, .is-joker),
.rp-qp__legend li:is(.is-l1, .is-l2, .is-l3, .is-miss, .is-joker)::before { background: var(--fill); box-shadow: inset 0 0 0 1.2px var(--edge, transparent); }

.rp-qp__cal i.is-rest,
.rp-qp__legend li.is-rest::before { background: radial-gradient(circle, color-mix(in srgb, var(--line-strong) 85%, transparent) 0 12%, transparent 16%); box-shadow: none; }

.rp-qp__legend { display: flex; flex-wrap: wrap; gap: .3em .9em; margin-top: .7em; }

.rp-qp__legend li { --cell: .55em; display: inline-flex; align-items: center; gap: .35em; color: var(--muted); font-size: .5em; }

.rp-qp__legend li::before { content: ""; --cell: 1.15em; }

.rp-qp__bars { display: grid; row-gap: .62em; }

.rp-qp__bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto 2.2em; align-items: baseline; gap: .28em .5em; font-size: .6em; }

.rp-qp__bars b { overflow: hidden; font-weight: 640; white-space: nowrap; text-overflow: ellipsis; }

.rp-qp__bars span { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.rp-qp__bars small { color: var(--faint); font-size: .9em; text-align: right; font-variant-numeric: tabular-nums; }

.rp-qp__bars i,
.rp-qp__months-bars i { position: relative; height: .52em; overflow: hidden; border-radius: 999px; background: var(--soft); }

.rp-qp__bars i { grid-column: 1 / -1; }

.rp-qp__bars i::after,
.rp-qp__months-bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 1%); border-radius: inherit; background: var(--c, var(--habit)); transform-origin: left; }

.rp-qp__band--story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; column-gap: 1.8em; }

.rp-qp__habit-name { font-size: .92em; font-weight: 720; letter-spacing: -.015em; line-height: 1.2; }

.rp-qp__habit-note { margin-top: .3em; color: var(--muted); font-size: .56em; font-weight: 560; }

.rp-qp__months-bars { display: grid; row-gap: .45em; margin-top: .7em; }

.rp-qp__months-bars li { display: grid; grid-template-columns: 2.1em minmax(0, 1fr) 2.6em; align-items: center; column-gap: .55em; color: var(--muted); font-size: .56em; }

.rp-qp__months-bars b { color: var(--ink); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.rp-qp__checks { display: grid; row-gap: .5em; }

.rp-qp__checks li { display: grid; grid-template-columns: 1.15em minmax(0, 1fr) auto; align-items: center; column-gap: .55em; font-size: .62em; line-height: 1.3; }

.rp-qp__checks i { width: 1.15em; height: 1.15em; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: .28em; color: var(--surface-strong); }

.rp-qp__checks .is-adventure.is-done i { border-color: var(--adventure); background: var(--adventure); }

.rp-qp__checks .is-milestone i { width: .72em; height: .72em; justify-self: center; border-color: var(--milestone); border-radius: .12em; transform: rotate(45deg); }

.rp-qp__checks .is-milestone.is-done i { background: var(--milestone); }

.rp .rp-qp__checks i svg.i { width: .85em; height: .85em; stroke-width: 3; }

.rp-qp__checks b { overflow: hidden; font-weight: 560; white-space: nowrap; text-overflow: ellipsis; }

.rp-qp__checks li:not(.is-done) b { color: var(--muted); }

.rp-qp__checks em,
.rp-qp__notes time { color: var(--faint); font-size: .88em; font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }

.rp-qp__notes { display: grid; row-gap: .5em; }

.rp-qp__notes li { display: grid; grid-template-columns: 3.3em minmax(0, 1fr); align-items: baseline; column-gap: .55em; font-size: .64em; }

.rp-qp__notes b { overflow: hidden; font-weight: 520; white-space: nowrap; text-overflow: ellipsis; }

.rp-qp__notes .is-lesson b { font-style: italic; }

.rp-qp__band--checkin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .92fr); align-items: stretch; column-gap: 1.8em; min-height: 0; overflow: hidden; }

.rp-qp__answer { min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.rp-qp__text { font-size: .7em; line-height: 1.45; }

/* Ruled lines under each answer, down to the foot of the page, as on the printout. */
.rp-qp__lines { flex: 1 1 0; min-height: 0; display: grid; align-content: start; overflow: hidden; margin-top: .2em; }

.rp-qp__lines i { position: relative; display: block; height: 1.6em; border-bottom: 1px solid var(--line); }

.rp-qp__lines .pen--line { left: .2em; bottom: .14em; width: 7.5em; height: 1.5em; stroke-width: 1.5; }

.rp-qp__next { align-self: start; min-width: 0; padding: 0 .9em .8em; border-radius: .5em; background: color-mix(in srgb, var(--paint) 6%, var(--surface-strong)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paint) 24%, transparent); }

.rp-qp__h--next { --k: var(--paint); padding-top: .9em; border-top: 0; }

.rp-qp__next dl { display: grid; row-gap: .55em; margin: 0; }

.rp-qp__next dt { color: var(--muted); font-size: .54em; font-weight: 680; }

.rp-qp__next dd { margin: .1em 0 0; font-size: .74em; font-weight: 720; letter-spacing: -.01em; line-height: 1.25; }

.rp-qp__domain { display: flex; align-items: center; justify-content: center; gap: .45em; color: var(--muted); font-size: .5em; letter-spacing: .02em; }

.rp-qp__domain span { width: 1.4em; height: 1.4em; display: grid; place-items: center; border-radius: .35em; background: var(--ink); color: var(--surface-strong); font-size: .85em; font-weight: 800; }

/* Before the scene plays: no squares painted, no bars, no notes, no ink. */
.rp--quarter:not(.s-in) .rp-qp__cal i:is(.is-l1, .is-l2, .is-l3, .is-miss, .is-joker) { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 90%, transparent); }

.rp--quarter:not(.s-bars) :is(.rp-qp__bars, .rp-qp__months-bars) i::after { transform: scaleX(0); }

.rp--quarter:not(.s-notes) :is(.rp-qp__checks li, .rp-qp__notes li, .rp-qp__answer, .rp-qp__next) { opacity: 0; transform: translateY(.5em); }

.rp--quarter:not(.s-ink) .pen path { stroke-dashoffset: 1; }

.motion-ok .rp--quarter .rp-qp__cal i { transition: background-color 220ms ease calc(var(--d, 0) * 14ms), box-shadow 220ms ease calc(var(--d, 0) * 14ms); }

.motion-ok .rp--quarter :is(.rp-qp__bars, .rp-qp__months-bars) i::after { transition: transform 900ms cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * 110ms); }

.motion-ok .rp--quarter .rp-qp__months-bars li:nth-child(2) i::after { transition-delay: 110ms; }

.motion-ok .rp--quarter .rp-qp__months-bars li:nth-child(3) i::after { transition-delay: 220ms; }

.motion-ok .rp--quarter :is(.rp-qp__checks li, .rp-qp__notes li, .rp-qp__answer, .rp-qp__next) { transition: opacity 320ms ease calc(var(--i, 0) * 110ms + 120ms), transform 520ms cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * 110ms + 120ms); }

.motion-ok .rp--quarter .pen path { transition: stroke-dashoffset 1100ms linear calc(var(--pen, 0) * 520ms); }

/* On a phone, the left part of the page, larger, fading out where it goes on. */
@media (max-width: 640px) {
  .rp--quarter { width: 160%; font-size: clamp(6.5px, 2.4cqi, 11px); }
  .rp-scale--quarter { overflow: hidden; padding: 1em 0 2.4em .7em; -webkit-mask-image: linear-gradient(to right, #000 74%, transparent 99%); mask-image: linear-gradient(to right, #000 74%, transparent 99%); }
  .rp-scale--quarter .rp-qp { box-shadow: var(--shadow-pop), inset 0 0 0 1px color-mix(in srgb, var(--line) 75%, transparent); }
}

/* The yearly ritual: Insights, the first charts ------------------------------------------
   The top of the Insights page (Stats → Insights): what stands out, the days
   that work and when the time is scheduled. Its colours are Insights' own
   (styles/insights.css): terracotta and slate blue, a terracotta ramp. */

.rp--insights {
  --ins-1: #b25634;
  --ins-2: #346aac;
  --ins-seq-0: color-mix(in srgb, var(--soft) 72%, var(--surface-strong));
  --ins-seq-1: #f9d5c6;
  --ins-seq-2: #ebb29a;
  --ins-seq-3: #d98b6e;
  --ins-seq-4: #c16646;
  --ins-seq-5: #a0482a;
  font-size: clamp(8.5px, 1.8cqi, 12.5px);
}

@media (prefers-color-scheme: dark) {
  .rp--insights {
    --ins-1: #d3754f;
    --ins-2: #548bd0;
    --ins-seq-0: color-mix(in srgb, var(--soft) 70%, var(--surface-strong));
    --ins-seq-1: #563326;
    --ins-seq-2: #7f4730;
    --ins-seq-3: #ad5f41;
    --ins-seq-4: #d57e58;
    --ins-seq-5: #f0a782;
  }
}

.rp-scale--insights { padding: .4em .2em 1.2em; }

.rp-ins { display: grid; gap: .95em; padding: 1.4em 1.5em 1.5em; border: 1px solid var(--line-strong); border-radius: 1.2em; background: var(--paper); box-shadow: var(--shadow-rp); }

:where(.rp-ins) :where(p, ul) { margin: 0; padding: 0; list-style: none; }

.rp-ins__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }

.rp-ins__range { display: inline-flex; gap: .15em; padding: .22em; border-radius: .75em; background: var(--soft); }

.rp-ins__range i { padding: .45em .95em; border-radius: .55em; color: var(--muted); font-size: .66em; font-style: normal; font-weight: 640; white-space: nowrap; }

.rp-ins__range i.is-on { background: var(--surface-strong); box-shadow: 0 1px 2px rgba(28, 25, 21, .08), inset 0 0 0 1px var(--line); color: var(--ink); }

.rp-ins__meta { margin-top: -.45em; color: var(--faint); font-size: .62em; font-weight: 560; }

.rp-ins__finds,
.rp-ins__card { min-width: 0; padding: .95em 1.05em; border: 1px solid var(--line); border-radius: .95em; background: var(--surface-strong); }

.rp-ins__h { margin-bottom: .7em; color: var(--faint); font-size: .54em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.rp-ins__finds ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65em 1.8em; }

.rp-ins__finds li { padding-left: .75em; border-left: 2px solid var(--ins-1); font-size: .74em; font-weight: 640; letter-spacing: -.008em; line-height: 1.4; }

.rp-ins__cards { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: .8em; align-items: start; }

.rp-ins__title { font-size: .78em; font-weight: 720; letter-spacing: -.01em; }

.rp-ins__sub { margin: .25em 0 .85em; color: var(--muted); font-size: .58em; line-height: 1.4; }

.rp-ins__week { display: grid; row-gap: .5em; }

.rp-ins__week > span { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) 2.6em; grid-template-rows: auto auto; align-items: center; column-gap: .6em; row-gap: .14em; }

.rp-ins__week b { grid-row: 1 / 3; display: grid; font-size: .6em; font-weight: 700; line-height: 1.15; }

.rp-ins__week b small { color: var(--faint); font-size: .8em; font-weight: 600; }

.rp-ins__week i { height: .44em; border-radius: 0 .2em .2em 0; background: var(--ins-1); transform-origin: left; }

.rp-ins__week i:nth-of-type(1) { width: calc(var(--a) * 1%); }

.rp-ins__week i:nth-of-type(2) { width: calc(var(--b) * 1%); background: var(--ins-2); }

.rp-ins__week .is-rest i { opacity: .42; }

.rp-ins__week em { grid-column: 3; grid-row: 1 / 3; display: grid; justify-items: end; font-size: .6em; font-style: normal; font-weight: 720; line-height: 1.15; font-variant-numeric: tabular-nums; }

.rp-ins__week em small { color: var(--muted); font-size: .85em; font-weight: 560; }

.rp-ins__key { display: flex; flex-wrap: wrap; align-items: center; gap: .3em 1em; margin-top: .9em; padding-top: .7em; border-top: 1px solid var(--line); color: var(--muted); font-size: .54em; font-weight: 600; }

.rp-ins__key > span { display: inline-flex; align-items: center; gap: .45em; }

.rp-ins__key > span > i { width: .85em; height: .85em; border-radius: .2em; background: var(--ins-1); }

.rp-ins__key > span > i.is-b { background: var(--ins-2); }

.rp-ins__key--scale { gap: .3em; }

.rp-ins__key--scale > i { width: 1.05em; height: 1.05em; border-radius: .22em; }

.rp-ins__heat { display: grid; grid-template-columns: 2.1em repeat(13, minmax(0, 1fr)); gap: .16em; align-items: center; }

.rp-ins__hour { color: var(--faint); font-size: .46em; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }

.rp-ins__day { color: var(--muted); font-size: .5em; font-weight: 650; }

.rp-ins__heat i,
.rp-ins__key--scale > i { display: block; background: var(--ins-seq-0); }

.rp-ins__heat i { aspect-ratio: 1.2; border-radius: .2em; }

.rp-ins :is(.rp-ins__heat i, .rp-ins__key--scale > i).is-l1 { background: var(--ins-seq-1); }

.rp-ins :is(.rp-ins__heat i, .rp-ins__key--scale > i).is-l2 { background: var(--ins-seq-2); }

.rp-ins :is(.rp-ins__heat i, .rp-ins__key--scale > i).is-l3 { background: var(--ins-seq-3); }

.rp-ins :is(.rp-ins__heat i, .rp-ins__key--scale > i).is-l4 { background: var(--ins-seq-4); }

.rp-ins :is(.rp-ins__heat i, .rp-ins__key--scale > i).is-l5 { background: var(--ins-seq-5); }

.rp--insights:not(.s-in) :is(.rp-ins__finds li, .rp-ins__heat i:not(.is-l0)) { opacity: 0; }

.rp--insights:not(.s-in) .rp-ins__finds li { transform: translateY(.4em); }

.rp--insights:not(.s-bars) .rp-ins__week i { transform: scaleX(0); }

.motion-ok .rp--insights .rp-ins__finds li { transition: opacity 320ms ease calc(var(--i, 0) * 120ms), transform 520ms cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * 120ms); }

.motion-ok .rp--insights .rp-ins__heat i { transition: opacity 380ms ease calc(var(--d, 0) * 45ms + 300ms); }

.motion-ok .rp--insights .rp-ins__week i { transition: transform 900ms cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * 80ms); }

/* Narrower: the findings in one column, the two charts one above the other. */
@container (max-width: 560px) {
  .rp--insights { font-size: clamp(9px, 2.9cqi, 12.5px); }
  .rp-ins { padding: 1.1em 1em 1.2em; }
  .rp-ins__head { flex-wrap: wrap; align-items: center; }
  .rp-ins__finds ul,
  .rp-ins__cards { grid-template-columns: minmax(0, 1fr); }
  .rp-ins__finds li:nth-child(n + 3) { display: none; }
}

.foot__base a.foot__counts { text-decoration: none; }


/* Save and Forget drawn as the planner draws them: a disk and a bin, square chips. */
.rp-mc[data-icon], .rp-tri[data-icon], .rp-ob[data-icon] { justify-content: center; min-width: 2.35em; padding-inline: .45em; }
.choices dt svg.i { width: 1.05em; height: 1.05em; margin-right: .35em; vertical-align: -.17em; }