/* ==========================================================
   FIRST 10 DAYS — Stylesheet ("Poster")

   Design tokens
   - Paper          #F4F1EA  page background
   - Paper raised   #FBF9F4  answer boxes and inputs
   - Ink            #0A0A14  text, rules, primary buttons
   - Vermilion      #FF4A1C  the one accent — shapes, fills, giant
                             words, bullets. Display size only: it's
                             about 3:1 on paper, too light for small text.
   - Vermilion text #C2310E  small vermilion text and links (≈5:1)
   Text on a vermilion fill is always ink.

   Type: Archivo at three widths — 62% for the giant words and day
   numbers, 75% for titles and headings, 100% for everything you read.

   Motion: the moving parts read CSS variables that motion.js writes
   (--p, --k, --v, --va) and only ever touch transform and opacity.
   ========================================================== */

:root {
  --paper: #F4F1EA;
  --paper-raised: #FBF9F4;
  --ink: #0A0A14;
  --ink-60: rgba(10, 10, 20, 0.6);
  --ink-30: rgba(10, 10, 20, 0.3);
  --rule: rgba(10, 10, 20, 0.2);
  --vermilion: #FF4A1C;
  --vermilion-text: #C2310E;

  --font: 'Archivo', system-ui, sans-serif;
  --gutter: 20px;
  --max-width: 640px;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-inout: cubic-bezier(.7, 0, .2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: inherit;
  color: var(--ink);
}

a { color: inherit; }

#app {
  max-width: var(--max-width);
  margin: 0 auto;
  padding:
    calc(14px + env(safe-area-inset-top))
    max(var(--gutter), env(safe-area-inset-right))
    calc(48px + env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
  min-height: 100vh;
  min-height: 100dvh;
}

:focus-visible {
  outline: 2px solid var(--vermilion-text);
  outline-offset: 3px;
}

:focus:not(:focus-visible) { outline: none; }

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

.t-giant {
  font-stretch: 62%;
  font-weight: 900;
  line-height: .9;
}

.t-condensed {
  font-stretch: 75%;
  font-weight: 900;
  line-height: .95;
}

.label {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

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

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.btn-pill--accent {
  background: var(--vermilion);
  color: var(--ink);
}

/* ---------- Masthead ---------- */

.masthead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
}

.masthead-rule {
  height: 1.5px;
  background: var(--ink);
  transform-origin: left;
}

/* ---------- Giant word rows ----------
   Full-bleed rows of repeated words that slide as you scroll and smear
   when you scroll fast. Purely decorative (aria-hidden in the markup). */

.word-rows {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  pointer-events: none;
}

.word-row {
  position: relative;
  white-space: nowrap;
}

.word-row--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(10, 10, 20, 0.32);
}

.word-row--solid { color: var(--vermilion); }

[data-drift="left"] {
  --dir: 1;
  transform: translateX(calc(var(--p, 0) * -150px)) skewX(calc(var(--v, 0) * -12deg));
}

/* The red rows end flush with the right edge, mirroring the outlined rows
   that start flush with the left, so each can slide in from its own side
   and settle against it. The row is sized to its text, so 100% here is
   the text's width. */
[data-drift="right"] {
  --dir: -1;
  width: max-content;
  transform: translateX(calc(100vw - 100% + var(--p, 0) * 150px)) skewX(calc(var(--v, 0) * 12deg));
}

/* The smear: two faint copies that trail the row only while it's moving fast. */
.word-ghost {
  position: absolute;
  left: 0;
  top: 0;
}

.word-ghost--1 {
  opacity: calc(var(--va, 0) * .5);
  transform: translateX(calc(var(--v, 0) * var(--dir) * 14px));
}

.word-ghost--2 {
  opacity: calc(var(--va, 0) * .25);
  transform: translateX(calc(var(--v, 0) * var(--dir) * 28px));
}

/* Pull quotes slide in once when reached. Without motion (Reduce Motion,
   or if motion.js never ran) they're simply there. */
.motion-on [data-reveal]:not(.is-revealed) {
  transform: translateX(46px);
  opacity: .25;
}

.motion-on [data-reveal] {
  transition: transform 700ms var(--ease-out), opacity 700ms var(--ease-out);
}

/* Promote only the moving layers that are actually on screen. */
.motion-on [data-drift].is-active,
.motion-on [data-slide-in].is-active {
  will-change: transform;
}

/* ---------- Pages and the transitions between them ----------
   During a transition the outgoing page is pinned in place underneath
   (see freezeView in app.js) while the new one arrives on top. */

.view {
  position: relative;
  z-index: 1;
}

.view--leaving {
  z-index: 0;
  pointer-events: none;
}

/* The copies of the day number that fly between pages. */
.fly-num {
  pointer-events: none;
  will-change: transform, opacity;
}

/* ---------- Home ---------- */

/* Room at the bottom so the Up next bar never covers the last row. */
.view--home { padding-bottom: 96px; }

.view--home .word-rows {
  margin-top: 6px;
  font-size: clamp(96px, 30vw, 170px);
}

.word-row-wrap + .word-row-wrap { margin-top: -0.1em; }

.home-hero { margin-top: 10px; }

.home-eyebrow { color: var(--ink-60); }

.home-title {
  margin-top: 6px;
  font-size: clamp(40px, 12vw, 64px);
}

.home-title .ten { color: var(--vermilion); }

.home-welcome { margin: 16px 0 24px; }

.welcome-pill svg { color: var(--vermilion); }

.day-list { border-bottom: 1px solid var(--rule); }

.day-row {
  display: block;
  min-height: 58px;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}

.day-row-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 6px 0;
}

/* Rows slide in from the right as they come up the screen. */
.motion-on [data-slide-in] {
  transform: translateX(calc(var(--k, 0) * 60px));
  opacity: calc(1 - var(--k, 0) * .85);
}

.day-num {
  flex: 0 0 52px;
  font-size: 44px;
  color: var(--ink-30);
}

.day-row[data-state="done"] .day-num { color: var(--vermilion); }
.day-row[data-state="next"] .day-num { color: var(--ink); }

.day-topic {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.day-row[data-state="later"] .day-topic { color: var(--ink-60); }

.day-mark {
  flex: 0 0 auto;
  display: flex;
  color: var(--ink-30);
}

.day-row[data-state="done"] .day-mark { color: var(--vermilion-text); }

.signpost {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  margin-top: 28px;
  padding: 14px 0;
  border-top: 3px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
}

.signpost .label {
  display: block;
  color: var(--vermilion-text);
}

.signpost-title {
  display: block;
  margin-top: 4px;
  font-size: 28px;
}

.signpost-mark { display: flex; }

.change-name {
  display: block;
  min-height: 44px;
  margin: 18px auto 0;
  border: none;
  background: none;
  color: var(--ink-60);
  font: 500 14px var(--font);
  text-decoration: underline;
  cursor: pointer;
}

/* The Up next bar sits in thumb reach at the bottom of the screen. */
.up-next {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 50;
  max-width: 616px;
  min-height: 56px;
  margin: 0 auto;
  padding: 6px 6px 6px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.up-next-label {
  color: var(--vermilion);
  font-weight: 800;
}

.up-next-go {
  flex: 0 0 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--vermilion);
  color: var(--ink);
}

.up-next--done {
  justify-content: center;
  gap: 10px;
  padding: 6px 22px;
}

.up-next--done svg { color: var(--vermilion); }

/* ---------- Day page ---------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: -6px 0 2px;
  color: var(--ink-60);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.day-header {
  position: relative;
  min-height: calc(clamp(110px, 34vw, 170px) * .95);
  margin-top: 6px;
}

.view--day .word-rows { font-size: clamp(84px, 24vw, 150px); }

/* The big day number sits in front of the sliding rows. */
.day-big-num {
  position: absolute;
  left: 0;
  top: calc(50% - .45em);
  z-index: 1;
  font-size: clamp(110px, 34vw, 170px);
  color: var(--ink);
  pointer-events: none;
}

.day-title {
  margin-top: 10px;
  font-size: clamp(32px, 9.5vw, 52px);
}

.read-callout {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 3px solid var(--ink);
}

.read-callout .label { color: var(--vermilion-text); }

.read-callout p,
.read-callout li {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 500;
}

.read-callout a,
.study a {
  color: var(--vermilion-text);
  font-weight: 600;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.study { margin-top: 8px; }

/* A word too long for the screen (a long name in a pull quote, a pasted
   web address) breaks onto the next line instead of running off the edge. */
.read-callout,
.study {
  overflow-wrap: break-word;
}

.study p,
.study li {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(10, 10, 20, 0.88);
}

.study p { margin: 0 0 .9em; }

.study li { margin-bottom: .4em; }

/* Study headings come from the formatter without the .t-condensed class,
   so they take its look here. */
.study-h,
.section-h {
  margin: 30px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 26px;
  font-stretch: 75%;
  font-weight: 900;
  line-height: .95;
}

.study-ul {
  margin: 0 0 1em;
  padding-left: 1.3em;
  list-style: square;
}

.study-ul li::marker { color: var(--vermilion); }

.study-ol {
  margin: 0 0 1em;
  padding-left: 1.5em;
}

.study-ol li::marker {
  color: var(--ink);
  font-weight: 900;
}

/* Pull quotes: poster-size, with a vermilion bar underneath. */
.pull {
  margin: 22px 0 28px;
  font-size: clamp(52px, 16vw, 88px);
  font-stretch: 75%;
  font-weight: 900;
  line-height: .86;
  color: var(--ink);
}

.pull p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.pull::after {
  content: '';
  display: block;
  width: 62%;
  height: 8px;
  margin-top: 12px;
  background: var(--vermilion);
}

.study-placeholder {
  margin-top: 16px;
  padding: 18px;
  border: 1.5px dashed var(--rule);
  border-radius: 10px;
  color: var(--ink-60);
  font-size: 16px;
}

.reflection { margin-top: 18px; }

.reflection label {
  display: block;
  font-size: 17px;
  font-weight: 700;
}

.reflection .prompt {
  margin-top: 4px;
  color: var(--ink-60);
  font-size: 15px;
  line-height: 1.45;
}

/* 16px keeps iPhones from zooming in when a box gets focus. */
.reflection textarea {
  display: block;
  width: 100%;
  min-height: 104px;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-raised);
  color: var(--ink);
  font: 400 16px/1.5 var(--font);
  resize: vertical;
}

.reflection textarea:focus {
  outline: none;
  border-color: var(--vermilion);
}

.save-status {
  height: 18px;
  margin-top: 4px;
  color: var(--ink-60);
  font-size: 12px;
  font-weight: 600;
}

.complete-btn {
  width: 100%;
  min-height: 52px;
  margin-top: 30px;
  font-size: 16px;
}

.complete-btn.is-complete {
  background: var(--vermilion);
  color: var(--ink);
}

/* ---------- Day complete: the finish line ----------
   Shown under a completed day. Right after the tap, the two giant rows
   slam in from opposite sides, the way the home page's rows enter. */

.celebrate { margin-top: 26px; }

.celebrate-rows {
  font-size: clamp(84px, 26vw, 160px);
  /* Line the words up with the page's own edges, not the screen's. */
  padding: 0 max(var(--gutter), calc((100vw - var(--max-width)) / 2 + var(--gutter)));
}

.celebrate-row { white-space: nowrap; }

.celebrate-row + .celebrate-row { margin-top: -0.1em; }

/* The smear, like the word rows up top: two faint copies trail each word
   while it slides in, then fade away as it settles. Hidden at rest. */
.celebrate-word {
  position: relative;
  display: inline-block;
}

.celebrate-ghost {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.celebrate-row--outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}

.celebrate-row--solid {
  color: var(--vermilion);
  text-align: right;
}

.celebrate-count {
  margin: 14px 0 0;
  font-size: 20px;
  font-stretch: 75%;
  font-weight: 900;
}

/* All ten days in a row: the done ones filled vermilion. */
.celebrate-track {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-60);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.celebrate-track li::after {
  content: '';
  display: block;
  height: 8px;
  margin-top: 4px;
  background: var(--rule);
  transform-origin: left;
}

.celebrate-track li.is-done { color: var(--ink); }

.celebrate-track li.is-done::after { background: var(--vermilion); }

.celebrate-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  margin-top: 22px;
  padding: 10px 8px 10px 22px;
  border-radius: 32px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.celebrate-next-topic {
  display: block;
  margin-top: 2px;
  font-size: 19px;
  font-stretch: 75%;
  font-weight: 900;
  line-height: 1.1;
}

.motion-on .celebrate--play .celebrate-row--outline {
  animation: celebrate-in-left .7s var(--ease-out) .08s both;
}

.motion-on .celebrate--play .celebrate-row--outline .celebrate-word {
  animation: celebrate-tilt-left .9s cubic-bezier(.45, 0, .25, 1) .08s both;
}

.motion-on .celebrate--play .celebrate-row--solid {
  animation: celebrate-in-right .7s var(--ease-out) .2s both;
}

.motion-on .celebrate--play .celebrate-row--solid .celebrate-word {
  animation: celebrate-tilt-right .9s cubic-bezier(.45, 0, .25, 1) .2s both;
}

.motion-on .celebrate--play .celebrate-ghost {
  animation: .8s linear both;
}

/* --dir points back the way each word came from, so the copies trail it. */
.motion-on .celebrate--play .celebrate-row--outline .celebrate-ghost { --dir: -1; animation-delay: .08s; }
.motion-on .celebrate--play .celebrate-row--solid .celebrate-ghost { --dir: 1; animation-delay: .2s; }
.motion-on .celebrate--play .celebrate-ghost--1 { animation-name: celebrate-smear-1; }
.motion-on .celebrate--play .celebrate-ghost--2 { animation-name: celebrate-smear-2; }

.motion-on .celebrate--play .celebrate-count,
.motion-on .celebrate--play .celebrate-next {
  animation: celebrate-rise .45s var(--ease-out) .5s both;
}

.motion-on .celebrate--play .is-today::after {
  animation: celebrate-fill .5s var(--ease-out) .6s both;
}

/* Reduce Motion: no sliding, just a quick fade so the moment still lands. */
html:not(.motion-on) .celebrate--play {
  animation: celebrate-fade .2s ease-out both;
}

@keyframes celebrate-in-left {
  from { transform: translateX(-100%); }
}

@keyframes celebrate-in-right {
  from { transform: translateX(100%); }
}

/* The tilt runs on the word itself, slower and gentler than the slide, so
   the word arrives still leaning and straightens up in one smooth motion. */
@keyframes celebrate-tilt-left {
  from { transform: skewX(-12deg); }
}

@keyframes celebrate-tilt-right {
  from { transform: skewX(12deg); }
}

/* The copies hold while the word is crossing the screen, then catch up
   and fade as it brakes. */
@keyframes celebrate-smear-1 {
  0%, 25% { opacity: .35; transform: translateX(calc(var(--dir) * .18em)); }
  70% { opacity: 0; transform: none; }
}

@keyframes celebrate-smear-2 {
  0%, 25% { opacity: .15; transform: translateX(calc(var(--dir) * .36em)); }
  70% { opacity: 0; transform: none; }
}

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

@keyframes celebrate-fill {
  from { transform: scaleX(0); }
}

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

.day-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.day-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--ink);
  font-size: 20px;
  font-stretch: 75%;
  font-weight: 900;
  text-decoration: none;
}

/* ---------- Other pages: shared pieces ---------- */

.topbar { margin: -6px 0 2px; }

.page-header {
  margin: 8px 0 18px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--ink);
}

.page-eyebrow { color: var(--vermilion-text); }

.page-header h1 {
  margin-top: 6px;
  font-size: clamp(32px, 9.5vw, 48px);
  font-stretch: 75%;
  font-weight: 900;
  line-height: .95;
}

.prose {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(10, 10, 20, 0.88);
}

.prose p { margin: 0 0 .8em; }

.prose a {
  color: var(--vermilion-text);
  font-weight: 600;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.btn-wide { width: 100%; }

/* ---------- Extra resources ---------- */

.resource-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}

.resource-item:last-of-type { border-bottom: 1px solid var(--rule); }

.resource-item .title {
  flex: 1 1 auto;
  font-size: 17px;
  font-weight: 600;
}

.resource-item .chevron {
  display: flex;
  color: var(--ink-30);
}

/* The download button on a resource page (and the Leader Dashboard link). */
.pdf-link,
.prose a.pdf-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 12px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.install-section { margin-top: 32px; }

.install-section .section-h { margin-top: 0; }

.install-section .btn-pill { margin-top: 6px; }

.install-fallback {
  margin-top: 12px;
  font-size: 14px;
}

/* ---------- Install banner (home) ---------- */

.install-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  font-weight: 500;
}

.install-banner > span { flex: 1 1 160px; }

.install-dismiss {
  min-height: 44px;
  padding: 0 8px;
  border: none;
  background: none;
  color: rgba(244, 241, 234, 0.7);
  font: 600 14px var(--font);
  cursor: pointer;
}

/* ---------- Popups: name, password, welcome video ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 10, 20, 0.55);
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 24px 22px;
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
}

.modal-card h2 {
  margin-bottom: 8px;
  font-size: 28px;
  font-stretch: 75%;
  font-weight: 900;
  line-height: .95;
}

.modal-card .prose {
  margin: 0 0 16px;
  color: var(--ink-60);
  font-size: 15px;
}

.modal-card input {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-raised);
  color: var(--ink);
  font: 400 16px var(--font);
}

.modal-card input:focus {
  outline: none;
  border-color: var(--vermilion);
}

.modal-error {
  margin: -6px 0 12px;
  color: var(--vermilion-text);
  font-size: 14px;
  font-weight: 600;
}

.modal-card .change-name { margin-top: 10px; }

.modal-card.video-modal {
  max-width: 340px;
  padding: 0;
  border: none;
  background: none;
}

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 16px;
  background: var(--ink);
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(244, 241, 234, 0.7);
  font-size: 14px;
  font-weight: 600;
}

.modal-close {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
}

/* ---------- Leader dashboard ---------- */

.progress-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 0 14px;
  border: 1.5px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-raised);
}

.progress-search:focus-within { border-color: var(--vermilion); }

.progress-search .icon {
  display: flex;
  color: var(--ink-60);
}

.progress-search input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  border: none;
  background: none;
  color: var(--ink);
  font: 400 16px var(--font);
}

.progress-search input:focus { outline: none; }

.progress-card {
  display: block;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}

.progress-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.progress-card .name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
}

.progress-card .when,
.progress-day .when {
  flex: 0 0 auto;
  color: var(--ink-60);
  font-size: 13px;
}

.progress-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.progress-dots .dot {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--ink-30);
  border-radius: 50%;
}

.progress-dots .dot.done {
  border-color: var(--vermilion);
  background: var(--vermilion);
}

.progress-dots .count {
  margin-left: auto;
  padding-left: 8px;
  color: var(--ink-60);
  font-size: 13px;
  font-weight: 600;
}

.progress-sub {
  margin: -8px 0 16px;
  color: var(--ink-60);
  font-size: 14px;
}

.progress-days { border-bottom: 1px solid var(--rule); }

.progress-day {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  border-top: 1px solid var(--rule);
}

.progress-day .num {
  flex: 0 0 40px;
  color: var(--ink-30);
  font-size: 30px;
  font-stretch: 75%;
  font-weight: 900;
  line-height: 1;
}

.progress-day.done .num { color: var(--vermilion); }

.progress-day-label {
  color: var(--ink-60);
  font-size: 15px;
  font-weight: 500;
}

.progress-day.done .progress-day-label { color: var(--ink); }

.progress-day .when { margin-left: auto; }

.progress-day:not(.done) .when { color: var(--ink-30); }

.load-more {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: 700 15px var(--font);
  cursor: pointer;
}

.progress-note {
  margin: 12px 0 0;
  text-align: center;
  color: var(--ink-60);
  font-size: 13px;
}

.progress-empty {
  padding: 22px 18px;
  border: 1.5px dashed var(--rule);
  border-radius: 10px;
  text-align: center;
}

.progress-empty .prose { color: var(--ink-60); }

.progress-empty .btn-pill { margin-top: 6px; }

.progress-sheet-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--ink-60);
  font-size: 14px;
}

/* ---------- States the app relies on ---------- */

.hidden { display: none !important; }

/* Read aloud by screen readers, never shown. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.install-banner:not(.show) { display: none; }

.save-status {
  opacity: 0;
  transition: opacity .3s ease;
}

.save-status.show { opacity: 1; }

/* ---------- When data.js has a typo ---------- */

.content-error {
  margin-top: 40px;
  padding: 20px;
  border-top: 3px solid var(--ink);
  font-size: 17px;
  line-height: 1.5;
}