/* Hallmark · shape: Workbench · genre: atmospheric · theme: brand · redesign: full · job: try
 * paper: #0d0e0e · accent: #f6bc29 · display: Anek Latin · body: Karla · hero: Stage · nav: edge-aligned, a wordmark and one action · footer: mast · imagery: the product built in five slots (hero, limits, shorts, excuses, desktop) · signature: a live Stop in the hero that has to be waited out
 * wordmark: Rubik 600 as text, the owner's choice over the 3D image
 * axes: near-black/heavy grotesk/amber · posture: restrained · contrast: checked by hand · fold: checked at 1280 x 800 · deal: manual · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E3 S5 R4 V3 · weakest: E, the scaffold was written by hand and sloplint ran without its render tier; cut the hand-drawn browser and window chrome, every eyebrow and the dot-joined browser list */
/* Hallmark · waive 84 · four built samples in data-slots, no capture · the only running ShortStop is the owner's signed-in browser and desktop app, so a capture would show their real limits and account */
/* Hallmark · waive 24b · off-scale lengths only inside the product samples · the Stop and limit popups keep the extension's own measurements so they read as the real thing */
/* Hallmark · waive 37 · four families, the fourth is Rubik on the wordmark alone · the owner asked for the ShortStop wordmark in Rubik semibold in place of the old logo image */
/* Hallmark · answered F7 · the round shapes are the extension's own: the daily ring, the groove, the quote arrows and the add button are circles in the popup */
/* Hallmark · answered F1 · the straight quotes sit inside the Stop sample, which prints its quotes the way the extension does */
/* Hallmark · dropped the nav's four section links · the nav is one action for the try job, the links moved to the footer */
@import "tokens.css";
@import "base.css";

@font-face {
  font-family: "Liberation Serif";
  src: url("assets/LiberationSerif-Regular.ttf") format("truetype");
  font-display: swap;
}

html { scroll-behavior: smooth; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* ------------------------------------------------------------------ */
/* Controls. The glass recipe from the Stop popup's buttons, at page   */
/* size (.btn) and at the popup's own size (.pbtn).                    */
/* ------------------------------------------------------------------ */
.btn, .pbtn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  border: 1px solid transparent; border-radius: var(--radius-control);
  background: var(--color-paper-3); color: var(--color-ink);
  box-shadow: var(--shadow-raised);
  font-family: var(--font-body); line-height: 1.5; white-space: nowrap; text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out);
}
.btn::before, .pbtn::before, .tag::before {   /* the popup's grain, drawn fine and faint */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("assets/grain.png") repeat; background-size: var(--grain-size);
  mix-blend-mode: overlay; opacity: var(--grain-strength);
}
.btn { min-height: 48px; padding: 0 var(--space-lg); font-size: var(--text-md); font-weight: 600; }
.pbtn { padding: 6.5px 10px; font-size: var(--text-md); font-weight: 400; }
.btn:hover, .pbtn:hover { background: var(--color-paper-4); }
.btn:active, .pbtn:active { background: var(--color-paper-5); transform: scale(0.98); }
.btn:focus-visible, .pbtn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .pbtn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn--primary, .pbtn--yellow {
  color: var(--yellow-ink); border-color: var(--yellow-edge);
  background: linear-gradient(73deg, var(--yellow-a) 21%, var(--yellow-b) 82%, var(--glass-end) 138%);
}
.btn--primary:hover, .pbtn--yellow:hover, .btn--primary:active, .pbtn--yellow:active {
  background: linear-gradient(73deg, var(--yellow-a-hover) 21%, var(--yellow-b-hover) 82%, var(--glass-end) 138%);
}
.pbtn--orange {
  color: var(--orange-ink); border-color: var(--orange-edge);
  background: linear-gradient(73deg, var(--orange-a) 21%, var(--orange-b) 82%, var(--glass-end) 138%);
}
.pbtn--orange:hover, .pbtn--orange:active {
  background: linear-gradient(73deg, var(--orange-a-hover) 21%, var(--orange-b-hover) 82%, var(--glass-end) 138%);
}
.pbtn--red {
  color: var(--red-ink); border-color: var(--red-edge);
  background: linear-gradient(73deg, var(--red-a) 21%, var(--red-b) 82%, var(--glass-end) 138%);
}
.pbtn--red:hover, .pbtn--red:active {
  background: linear-gradient(73deg, var(--red-a-hover) 21%, var(--red-b-hover) 82%, var(--glass-end) 138%);
}
.pbtn--wide { width: 200px; max-width: 100%; }
.pbtn--full { width: 100%; padding: 10px var(--space-sm); }
.pbtn--bold { font-weight: 600; }
.pbtn--decline { color: var(--decline-ink); }

.textbtn { padding: var(--space-2xs) var(--space-xs); border: 0; background: none; color: var(--color-muted); font-size: var(--text-sm); cursor: pointer; }
.textbtn:hover { color: var(--color-ink); }
.textbtn:active { color: var(--color-ink-2); }
.textbtn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Tags (limit-tags.constants.tsx): raised, grained, an icon before the word */
.tag {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-tag);
  box-shadow: var(--shadow-tag);
  font-size: 0.75rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.tag svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tag--purple { color: var(--tag-purple-ink); background: linear-gradient(180deg, var(--tag-purple-a) 0%, var(--tag-purple-b) 45%, var(--tag-purple-c) 100%); }
.tag--orange { color: var(--tag-orange-ink); background: linear-gradient(87deg, var(--tag-orange-a) 21%, var(--tag-orange-b) 57%); }
.tag--red { color: var(--tag-red-ink); background: linear-gradient(87deg, var(--tag-red-a) 21%, var(--tag-red-b) 57%); }
.ring { display: grid; place-items: center; width: 14px; height: 14px; border: 1.3px solid currentColor; border-radius: var(--radius-pill); font-size: 9px; font-weight: 700; line-height: 1; }

.pill { display: inline-block; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--pill-fill); box-shadow: var(--shadow-raised); font-size: var(--text-sm); line-height: 1.3; }
.pill b { color: var(--color-accent); }

/* The wordmark: Rubik semibold as text, "Short" in the brand red */
.wordmark { font-family: var(--font-wordmark); font-weight: 600; font-synthesis: none; letter-spacing: -0.02em; line-height: 1; word-spacing: -0.08em; white-space: nowrap; color: var(--color-ink); }
.wordmark__short { color: var(--wordmark-red); }

/* The icon: three bars and an arrow, from packages/ext/assets/icon.png */
.mark { flex: none; width: auto; }

.caption { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); text-align: center; }

/* ------------------------------------------------------------------ */
/* Nav: edge-aligned, the wordmark and the one action                  */
/* ------------------------------------------------------------------ */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); }
.nav__in { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); }
.nav__logo { display: flex; align-items: center; gap: var(--space-xs); border-radius: var(--radius-tag); text-decoration: none; }
.nav__logo .mark { height: 32px; }
.nav__logo .wordmark { font-size: 1.625rem; }
.nav .btn { min-height: 44px; }

/* ------------------------------------------------------------------ */
/* 1. Hero: Stage                                                      */
/* ------------------------------------------------------------------ */
.hero { position: relative; overflow: clip; display: grid; align-items: center; min-height: calc(100svh - var(--nav-h)); padding-block: var(--space-md) var(--space-lg); }
/* The hero's background: an ordered dither, drawn small and scaled up so
   every dot stays a hard square (main.js draws it). */
.hero__dither { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0.5; pointer-events: none; }
.hero .stop { -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); }
.hero__in { position: relative; z-index: var(--z-base); }
.hero__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.hero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.actions .btn svg { margin-right: var(--space-2xs); fill: currentColor; }
html:not(.js) [data-video] { display: none; }

/* The video player: a dialog over the page */
.video { width: min(1040px, 100% - var(--space-xl)); padding: var(--space-sm); border: 0; border-radius: var(--radius-panel); background: var(--color-paper-2); color: var(--color-ink); box-shadow: var(--shadow-frame); overflow: visible; }
.video[open] { animation: settle var(--dur-long) var(--ease-out); }
.video::backdrop { background: var(--backdrop); }
.video__frame { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--radius-card); background: var(--color-paper); overflow: hidden; }
.video__frame video, .video__frame iframe { width: 100%; height: 100%; border: 0; }
.video__none { padding: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-lead); text-align: center; }
.video__close { position: absolute; top: calc(-1 * var(--space-xl) - var(--space-xs)); right: 0; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); box-shadow: var(--shadow-raised); cursor: pointer; }
.video__close:hover { background: var(--color-paper-4); }
.video__close:active { background: var(--color-paper-5); }
.video__close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.video__close svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hero__visual { min-width: 0; }

/* ------------------------------------------------------------------ */
/* The Stop popup, at the extension's own measurements                 */
/* (limit-and-stop-popup/index.tsx): a lit frame around a panel that   */
/* scrolls when the window is short. Drawn at 600px and scaled.        */
/* ------------------------------------------------------------------ */
.stop { width: 624px; max-width: 100%; margin: 0 auto; padding: var(--space-sm); border-radius: var(--radius-frame); background: var(--frame-fill); box-shadow: var(--shadow-frame); zoom: 0.85;  }
.stop__panel { max-height: min(700px, calc((100svh - var(--nav-h) - 96px) / 0.85)); overflow-y: auto; scrollbar-width: none; padding: var(--space-md) 32px; border-radius: var(--radius-panel); background: var(--color-paper-2); color: var(--color-ink); }
.stop__panel::-webkit-scrollbar { display: none; }
.stop__panel:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.stop--limit .stop__panel { max-height: none; overflow: visible; padding-bottom: 32px; }
.stop__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-bottom: 32px; }
.stop__head--stacked { flex-direction: column; }
.stop__logo { width: 200px; height: auto; }
.chip { display: flex; align-items: center; gap: var(--space-sm); padding: 6px 6px 6px var(--space-md); border: 1px solid var(--quiet-fill); border-radius: var(--radius-control); box-shadow: var(--shadow-inset); color: var(--chip-ink); }

.search { margin-bottom: 32px; padding: var(--space-sm) 20px; border-radius: var(--radius-card); background: var(--color-paper-3); box-shadow: var(--shadow-inset); color: var(--color-ink-2); }

.stop__main { display: grid; place-items: center; min-height: 236px; text-align: center; }
.count { padding-bottom: var(--space-lg); font-family: var(--font-display); }
.count b { display: block; font-size: 64px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.count span { font-size: 20px; font-weight: 200; }
.stop__actions { display: grid; justify-items: center; gap: var(--space-lg); padding-block: 28px 48px; }
.keyed { position: relative; display: inline-flex; }   /* the popup's enter keycap on the focused button */
.keyed::after { content: ""; position: absolute; top: -13px; right: -4px; width: 30px; height: 30px; background: url("assets/enter.svg") center / contain no-repeat; pointer-events: none; z-index: var(--z-raised); }
.ask { margin-bottom: var(--space-md); font-size: 18px; }
.choices { display: grid; justify-items: center; gap: 6px; }
.confirm { display: grid; justify-items: center; gap: var(--space-sm); }
.hurdle { display: grid; justify-items: center; gap: var(--space-sm); padding-bottom: var(--space-lg); }
.hurdle__title { font-size: var(--text-sm); color: var(--color-muted); }
.hurdle__q { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.hurdle form { display: flex; align-items: center; gap: var(--space-xs); }
.field { width: 112px; min-height: 38px; padding: 0 var(--space-sm); border: 1px solid var(--color-muted); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-inset); text-align: center; font-weight: 600; outline: 2px solid transparent; outline-offset: -3px; }
.field:focus-visible { outline-color: var(--color-focus); }
.field[aria-invalid="true"] { border-color: var(--color-error); animation: shake var(--dur-short) var(--ease-out); }
.streak { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.done { padding-bottom: var(--space-lg); }
.done__big { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.1; }
.done p + p { margin-top: var(--space-xs); color: var(--color-ink-2); }
.done .textbtn { margin-top: var(--space-sm); }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.groove { width: 62%; height: 8px; margin: 0 auto 32px; border: 2px solid var(--color-paper); border-radius: var(--radius-pill); box-shadow: var(--shadow-inset); }

.quote { display: grid; align-content: center; min-height: 180px; margin-bottom: 48px; padding: var(--space-xs) var(--space-md); }
.quote__row { display: flex; align-items: center; padding-inline: 20px; }
.quote__text { flex: 1; min-width: 0; padding-inline: 20px; font-family: var(--font-outlier); font-size: 24px; line-height: 1.625; color: var(--color-ink-2); text-align: center; }
.quote__text.is-long { font-size: 20px; }
.quote__nav { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-ink); cursor: pointer; }
.quote__nav:hover { background: var(--quiet-fill); }
.quote__nav:active { color: var(--color-ink-2); }
.quote__nav:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.quote__nav svg, .customise svg, .links svg, .more svg, .add svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.customise { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-xs); padding-inline: var(--space-xl); font-size: 14px; }

.links { margin-bottom: 48px; }
.links__title { margin-bottom: var(--space-lg); padding-inline: var(--space-xs); font-size: 18px; }
.links ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin: 0; padding: 0 var(--space-xs); list-style: none; }
.links li { display: flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-sm); border-radius: var(--radius-card); background: var(--pill-fill); box-shadow: var(--shadow-raised); }
.links li svg { flex: none; color: var(--color-ink-2); }
.links li span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.excuse { display: grid; justify-items: center; gap: var(--space-md); max-width: 400px; margin: 0 auto 32px; padding: var(--space-xs); text-align: center; }
.excuse--live { min-height: 236px; align-content: center; margin-bottom: 0; }
.excuse__line { font-family: var(--font-display); font-weight: 200; font-size: 18px; }
.excuse__note { font-size: var(--text-sm); color: var(--color-ink-2); }

.more { display: flex; align-items: center; justify-content: space-between; padding-block: 10px; font-size: 18px; }

/* ------------------------------------------------------------------ */
/* 2. Stops: a band, the head on five columns beside two paragraphs    */
/* ------------------------------------------------------------------ */
.band { background: var(--color-paper-2); color: var(--color-ink); }
.stops { padding-block: var(--section-gap-s); }
.stops__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.prose { display: grid; gap: var(--space-md); color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.55; }
.prose p { max-width: 60ch; }
.stops__in .prose { padding-top: var(--space-xs); }
h2 + .prose { margin-top: var(--space-xl); }
.prose--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns) var(--space-2xl); }

/* ------------------------------------------------------------------ */
/* 3. Limits: Split, text on five columns, the limit list on seven     */
/* ------------------------------------------------------------------ */
.limits { padding-block: var(--section-gap); }
.limits__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.limits__visual, .excuses__visual, .desktop__visual { min-width: 0; }

/* The limit lists of the toolbar popup (extension-popup, CompactLimitRow, LimitRemaining) */
.list { display: grid; gap: 28px; width: min(580px, 100%); margin: 0 auto; padding: var(--space-lg) 28px; border-radius: 20px; background: var(--color-paper); box-shadow: var(--shadow-raised); }
.group { display: grid; }
.group__title { font-size: 24px; font-weight: 600; line-height: 1; margin-bottom: 10px; }
.row { display: flex; align-items: center; gap: var(--space-sm); padding-block: 14px; border-top: var(--rule-hair) solid var(--color-rule); }
.group__title + .row { border-top: 0; }
.row__main { flex: 1; min-width: 0; display: grid; gap: 7px; }
.row__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) 10px; font-size: 18px; line-height: 1.2; }
.row__sum { font-size: 15px; line-height: 1.2; color: var(--color-muted); }
.row__sum b { font-weight: 400; color: var(--color-accent); }
.remain { flex: none; display: grid; gap: 5px; width: 84px; font-size: 12px; color: var(--color-muted); }
.remain b { font-size: 13px; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.remain__bar { position: relative; display: block; height: 4px; border-radius: var(--radius-pill); background: var(--bar-track); overflow: hidden; }
.remain__bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bar-fill, transparent); transform-origin: left; transform: scaleX(var(--bar-part, 0)); }
.remain__bar--ok { --bar-fill: var(--bar-ok); --bar-part: 0.6; }
.remain__bar--low { --bar-fill: var(--bar-low); --bar-part: 0.2; }
.add { justify-self: center; display: grid; place-items: center; width: 32px; height: 32px; margin-top: var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-3); box-shadow: var(--shadow-raised); }

/* ------------------------------------------------------------------ */
/* 4. Excuses: a band, the live popup on seven columns, text on five   */
/* ------------------------------------------------------------------ */
.shorts { padding-block: var(--section-gap-s); }
.shorts__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.shorts__visual { min-width: 0; }
.row__sum em { font-style: normal; color: var(--color-ink); }
.remain__bar--low { --bar-part: 0.2; }

.excuses { padding-block: var(--section-gap) var(--section-gap-l); }
.excuses__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }

/* ------------------------------------------------------------------ */
/* 5. Blacklist: the head on five columns beside two paragraphs        */
/* ------------------------------------------------------------------ */
.blacklist { padding-block: var(--section-gap-s); }
.blacklist__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.blacklist__in .prose { padding-top: var(--space-xs); }

/* ------------------------------------------------------------------ */
/* 7. Details: the head over two paragraphs                            */
/* ------------------------------------------------------------------ */
.details { padding-block: var(--section-gap-s) var(--section-gap); }

/* ------------------------------------------------------------------ */
/* 6. Desktop: a band, the window on seven columns, text on five       */
/* ------------------------------------------------------------------ */
.desktop { padding-block: var(--section-gap-l) var(--section-gap); }
.desktop__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }

/* The companion window (packages/desktop/ui): its top bar and one pane, no OS chrome */
.win { width: min(640px, 100%); margin: 0 auto; border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-raised); font-size: var(--text-sm); line-height: 1.45; }
.win__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.tabs { display: inline-flex; gap: var(--space-2xs); }
.tab { display: inline-flex; align-items: center; padding: 6px var(--space-md); border-radius: var(--radius-pill); color: var(--color-muted); white-space: nowrap; }
.tab--on { color: var(--color-ink); font-weight: 600; background: var(--pill-fill); box-shadow: var(--shadow-raised); }
.win__brand { display: grid; gap: var(--space-3xs); margin-right: 20px; font-size: 12px; line-height: 1.2; }
.win__brand .wordmark { font-size: 1.5rem; }
.win__pane { padding: 22px var(--space-lg) var(--space-lg); }
.win__title { font-size: 18px; font-weight: 600; line-height: 1.3; }
.win__note { margin-bottom: 18px; font-size: 12.5px; color: var(--color-muted); }
.apps { display: grid; padding: var(--space-xs) var(--space-md); border: 3px dashed var(--color-edge); border-radius: 20px; }
.apps + .apps { margin-top: 18px; }
.apps__title { padding: var(--space-xs) var(--space-2xs) var(--space-2xs); font-size: 18px; font-weight: 600; }
.app { display: flex; align-items: center; gap: 10px; padding: 14px var(--space-2xs); border-top: var(--rule-hair) solid var(--color-rule); }
.apps__title + .app { border-top: 0; }
.app__icon { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--quiet-fill); color: var(--color-accent); font-size: 12px; font-weight: 600; }
.app__name { font-size: 16px; font-weight: 600; }
.app__sum { margin-top: 6px; font-size: 14px; color: var(--color-muted); }
.app__sum b { font-weight: 400; color: var(--color-accent); }
.app__sum em { font-style: normal; color: var(--color-ink); }
.add--app { width: 36px; height: 36px; margin-block: 10px 6px; }
.win__foot { padding: 7px 20px; border-top: var(--rule-hair) solid var(--color-rule); font-size: 12px; color: var(--color-muted); }

/* ------------------------------------------------------------------ */
/* 7. Close: the reminder, then the action                             */
/* ------------------------------------------------------------------ */
.close { padding-block: var(--section-gap-s); }
.close__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; }
.setup { margin-top: var(--space-lg); color: var(--color-ink-2); line-height: 1.9; }
.close__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-xl); }
.close__act p { font-size: var(--text-sm); color: var(--color-muted); }
.close__stage { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 440px; min-width: 0; }
html:not(.js) .close__stage { display: none; }
.preview .count { padding-block: var(--space-xl); text-align: center; }
.preview { width: 100%; }
.preview:empty { display: none; }

/* The friction picker: a dropdown set inside the sentence */
.pick { position: relative; display: inline-block; }
.pick__btn { gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-md); font-size: inherit; font-weight: 600; vertical-align: baseline; }
.pick__btn svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-short) var(--ease-out); }
.pick.is-open .pick__btn svg { transform: rotate(180deg); }
.pick__list { position: absolute; left: 0; top: calc(100% + var(--space-xs)); z-index: var(--z-dropdown); width: max-content; max-width: min(360px, 86vw); margin: 0; padding: var(--space-2xs); list-style: none; border-radius: var(--radius-card); background: var(--color-paper-3); box-shadow: var(--shadow-raised); font-size: var(--text-md); line-height: 1.35; transform-origin: 0 0; animation: drop var(--dur-short) var(--ease-out); }
.pick__list li { display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-control); color: var(--color-ink); cursor: pointer; }
.pick__list li small { font-size: var(--text-sm); color: var(--color-muted); }
.pick__list li:hover, .pick__list li:focus-visible { background: var(--color-paper-4); }
.pick__list li:active { background: var(--color-paper-5); }
.pick__list li:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.pick__list li[aria-selected="true"] { color: var(--yellow-ink); }

/* The hurdle screens (packages/hurdles/src), at their own measurements */
.hd { display: grid; justify-items: center; gap: 20px; width: 100%; padding-block: 20px var(--space-xl); text-align: center; }
.hd__title { font-size: 20px; font-weight: 400; color: var(--color-ink); }
.hd__body { display: grid; justify-items: center; gap: 20px; width: 100%; min-height: 150px; align-content: center; }
.hd__big { font-size: 64px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.hd__big--math { font-size: 44px; }
.hd__prompt { font-size: 18px; color: var(--color-muted); }
.hd__lines { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hd__input { width: 220px; max-width: 100%; padding: var(--space-sm) var(--space-md); border: 1px solid transparent; border-radius: var(--radius-card); background: var(--color-field); color: var(--color-ink); box-shadow: var(--shadow-inset); font-size: 18px; text-align: center; outline: 2px solid transparent; outline-offset: -3px; }
.hd__input:focus-visible { outline-color: var(--color-focus); }
.hd__input::placeholder { color: var(--color-muted); }
textarea.hd__input { width: 480px; font-size: 16px; text-align: left; resize: none; }
.hd__dots { display: flex; gap: var(--space-xs); }
.hd__dots i { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--bar-track); transition: transform var(--dur-short) var(--ease-out); }
.hd__dots i.on { background: var(--orange-ink); transform: scale(1.25); }
.hd__note { max-width: 420px; font-size: 14px; line-height: 1.45; color: var(--color-muted); }
.hd__note.is-bad { color: var(--red-ink); }
.hd__stack { display: grid; justify-items: center; gap: var(--space-lg); }
.hd__passage { max-width: 480px; font-family: var(--font-outlier); font-size: 18px; line-height: 1.6; color: var(--color-muted); user-select: none; }
.hd__passage .ok { color: var(--color-ink); }
.hd__passage .bad { color: var(--red-ink); background: var(--typing-wrong); border-radius: 2px; }
.hd__passage .here { background: var(--typing-here); border-radius: 2px; }
.hd__score { font-size: 28px; font-weight: 600; }
.hd__score.is-ok { color: var(--color-success); }
.hd__score.is-bad { color: var(--red-ink); }
.nb { position: relative; }
.nb__grid { display: grid; grid-template-columns: repeat(3, 52px); gap: 6px; }
.nb__grid i { height: 52px; border-radius: var(--radius-tag); background: var(--quiet-fill); transition: background-color var(--dur-micro) var(--ease-out); }
.nb__grid i.on { background: var(--orange-ink); }
.nb__letter { position: absolute; left: 100%; top: 50%; width: 64px; margin-left: 28px; transform: translateY(-50%); font-size: 64px; font-weight: 600; line-height: 1; }
.nb__keys { display: flex; gap: var(--space-sm); }
.nb__key { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md) var(--space-xs) 10px; border: 0; border-radius: var(--radius-control); background: var(--quiet-fill); color: var(--color-ink); font-size: 15px; cursor: pointer; }
.nb__key:hover { background: var(--bar-track); }
.nb__key:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.nb__key kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 6px; background: var(--keycap-fill); box-shadow: var(--keycap-shadow); font: inherit; font-size: 14px; font-weight: 600; transition: transform var(--dur-micro) var(--ease-out); }
.nb__key:active kbd { transform: translateY(2px); box-shadow: var(--keycap-shadow-down); }

/* ------------------------------------------------------------------ */
/* 8. Footer: a mast                                                   */
/* ------------------------------------------------------------------ */
.footer { padding-block: var(--space-2xl) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.footer__brand { display: flex; align-items: center; gap: clamp(var(--space-sm), 2vw, var(--space-lg)); }
.footer__brand .mark { height: clamp(3.75rem, 9.5vw, 8.5rem); }
.footer__mark { display: block; font-size: clamp(3.5rem, 9vw, 8rem); }
.footer__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xl); color: var(--color-ink-2); }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.footer a { text-decoration: none; white-space: nowrap; border-radius: var(--radius-tag); }
.footer a:hover { color: var(--color-ink); text-decoration: underline; }
.footer a:active { color: var(--color-muted); }
.footer a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ */
/* Under 60rem every composition stacks in reading order               */
/* ------------------------------------------------------------------ */
@media (max-width: 60rem) {
  .hero { min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .hero__in, .stops__in, .blacklist__in, .limits__in, .shorts__in, .excuses__in, .desktop__in, .close__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .desktop__in > :last-child, .excuses__in > :last-child, .shorts__in > :last-child { order: -1; }
  .prose--two { grid-template-columns: minmax(0, 1fr); }
  .close__stage { min-height: 0; }
  .stop__panel { max-height: 700px; }
}
@media (max-width: 40rem) {
  .actions .btn { flex: 1 1 100%; }
  .setup { position: relative; }
  .pick { position: static; }
  .pick__list { left: 0; right: 0; width: auto; max-width: none; margin-top: 2.4em; }
  /* the popup at phone width: full size type, tighter padding, as the extension does on a narrow window */
  .stop { zoom: 1; padding: var(--space-xs); border-radius: var(--radius-panel); }
  .stop__panel { padding: var(--space-md); border-radius: 20px; max-height: 600px; }
  .stop__head { flex-direction: column; margin-bottom: var(--space-lg); }
  .stop__logo { width: 160px; }
  .chip { flex-wrap: wrap; justify-content: center; }
  .quote { min-height: 140px; margin-bottom: var(--space-lg); padding-inline: 0; }
  .quote__row, .quote__text { padding-inline: 0; }
  .quote__text { font-size: 20px; }
  .customise { padding-inline: var(--space-xs); }
  .links ul { grid-template-columns: minmax(0, 1fr); }
  .list { padding: var(--space-md); }
  .group__title { font-size: 20px; }
  .remain { width: 64px; }
  .win__brand { display: none; }
  .tab { padding: 6px var(--space-sm); }
}

/* ------------------------------------------------------------------ */
/* Motion. Transform, opacity and clip-path only. Everything is        */
/* visible without script (.js scopes the hidden starts) and at its    */
/* end state under reduced motion.                                     */
/* ------------------------------------------------------------------ */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes settle { from { opacity: 0; transform: translateY(24px) scale(0.96); } }
@keyframes swap { from { opacity: 0; transform: translateY(8px); } }
@keyframes tick { from { opacity: 0.35; transform: translateY(-0.16em); } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
@keyframes nudge { 0%, 78%, 100% { transform: none; } 86% { transform: translateY(-3px); } 93% { transform: translateY(1px); } }

/* the first screen arrives in order: head, line, actions, then the Stop */
.js .hero__text > * { animation: rise var(--dur-reveal) var(--ease-out) both; }
.js .hero__text > :nth-child(2) { animation-delay: 90ms; }
.js .hero__text > :nth-child(3) { animation-delay: 180ms; }
.js .hero__visual { animation: settle 800ms var(--ease-out) 160ms both; }
.js .nav .mark { animation: wipe 700ms var(--ease-out) 250ms both; }
.js .nav .wordmark { animation: rise var(--dur-reveal) var(--ease-out) 120ms both; }

/* sections rise as they enter the screen */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="wipe"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--ease-out); }
.js [data-reveal="wipe"].is-in { clip-path: inset(0 0 0 0); }

/* inside a revealed product sample: rows step in, bars fill */
.js [data-reveal] .row, .js [data-reveal] .app { opacity: 0; transform: translateX(-10px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js [data-reveal].is-in .row, .js [data-reveal].is-in .app { opacity: 1; transform: none; transition-delay: calc(260ms + var(--r, 0) * 110ms); }
.remain__bar::after { transition: transform 900ms var(--ease-out) 700ms; }
.js [data-reveal]:not(.is-in) .remain__bar::after { transform: scaleX(0); }

/* whatever a live sample swaps in arrives, one piece after the other */
.stop__main > *, .excuse--live > *, .preview > *, .hd__body > * { animation: swap var(--dur-long) var(--ease-out) both; }
.stop__actions > *, .choices > *, .confirm > * { animation: swap var(--dur-long) var(--ease-out) both; }
.stop__actions > :nth-child(2), .choices > :nth-child(2), .confirm > :nth-child(2), .hd__body > :nth-child(2) { animation-delay: 70ms; }
.stop__actions > :nth-child(3), .choices > :nth-child(3), .hd__body > :nth-child(3) { animation-delay: 140ms; }
.choices > :nth-child(4), .hd__body > :nth-child(4) { animation-delay: 210ms; }
.is-tick { animation: tick var(--dur-short) var(--ease-out); }
.quote__text.is-swap { animation: swap var(--dur-long) var(--ease-out); }

/* the picker asks to be opened, until it has been */
.js .pick:not(.is-used) .pick__btn { animation: nudge 3.2s var(--ease-in-out) 1.2s infinite; }

/* the nav picks up a hairline once the page moves under it */
.nav::after { content: ""; position: absolute; inset: auto 0 0; height: var(--rule-hair); background: var(--color-rule); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.nav.is-stuck::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .pbtn { transition: none; }
  .js [data-reveal], .js [data-reveal] .row, .js [data-reveal] .app { opacity: 1; transform: none; clip-path: none; }
  .js .pick .pick__btn { animation: none; }
  .field[aria-invalid="true"] { animation: none; }
}