/* Paperbump — terracotta on warm paper, mobile first.
   One thumb: nothing tappable smaller than 44px, primary actions low on screen. */

:root {
  /* Terracotta on warm paper. One colour family, used by value rather than by
     hue: deep for anything that acts, clay for anything that highlights, wash
     for anything that sits behind. Liz's pick, after four rounds — the earlier
     blush-and-sage was the palette you get when you ask for "calm and
     natural", which is exactly why it read as machine-made. */
  --paper: #FAF2E8;
  --paper-top: #FDF8F1;
  --card: #FFFCF7;
  --card-2: #FBF4EA;

  --terra: #7A3B2E;        /* acts: links, primary buttons, current step */
  --terra-hero: #82412F;   /* the one large field of colour */
  --clay: #D9884F;         /* highlights: chart fills, progress, accents */
  --terra-wash: #F7E5D6;   /* sits behind: chosen options, quiet cards */
  --terra-line: #E7C3A4;   /* the hairline down the side of a card */

  --ink: #2A211C;
  --ink-soft: #6B5A50;
  --line: #EADCCB;
  --hairline: #DCC8B2;
  --warn: #96321E;         /* overdue only, and never the same as --terra */

  --radius: 18px;
  --radius-sm: 12px;
  --tap: 44px;
  --gap: 1.15rem;
  --shell: 34rem;

  /* Shadows are warm and very soft: depth without a drop-shadow look. */
  --lift: 0 1px 2px rgba(90, 56, 40, .05), 0 10px 28px -18px rgba(90, 56, 40, .26);
  --lift-sm: 0 1px 2px rgba(90, 56, 40, .05), 0 4px 12px -8px rgba(90, 56, 40, .22);

  --font-head: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0 0 calc(5.5rem + env(safe-area-inset-bottom, 0px));
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  /* A soft wash rather than a flat fill, and a botanical mark far enough back
     to read as paper texture instead of decoration. */
  background:
    url("../icons/watermark.svg") no-repeat right -90px bottom -40px / 380px auto,
    linear-gradient(to bottom, var(--paper-top) 0%, var(--paper) 42%);
  background-attachment: fixed, fixed;
  background-color: var(--paper);
}

h1, h2, h3 { font-family: var(--font-head); font-weight: 500; line-height: 1.22; }
h1 { font-size: 1.6rem; letter-spacing: -.01em; margin: 0 0 .5rem; }
h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
p { margin: 0 0 .75rem; }
a { color: var(--terra); }

/* Editorial section labels: small, spaced, quiet. Typography is the cheapest
   way to look considered, which is most of what "premium" means here. */
.eyebrow {
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .6rem;
}

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

.app-header {
  padding: calc(1rem + env(safe-area-inset-top, 0px)) var(--gap) .75rem;
  max-width: var(--shell);
  margin: 0 auto;
}
/* Onboarding: no tab bar to clear, and every screen has to fit unscrolled. */
.app-header.compact { padding-top: calc(.6rem + env(safe-area-inset-top, 0px)); padding-bottom: .4rem; }
.app-header.compact .tagline { display: none; }
body.onboarding { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
body.onboarding h1 { font-size: 1.3rem; }
body.onboarding .lede { font-size: .9rem; margin-bottom: .75rem; }
body.onboarding .option { min-height: var(--tap); padding: .55rem 1rem; }
body.onboarding .options { gap: .45rem; }
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.header-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 .25rem;
  font-size: .85rem;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.header-link[aria-current="page"] { color: var(--terra); font-weight: 600; }

.wordmark {
  display: inline-flex;
  align-items: center;
  /* A standalone navigation link, so it gets a full-sized tap target. */
  min-height: var(--tap);
  gap: .5rem;
  color: var(--ink);
  text-decoration: none;
}
/* The wordmark is the logo: lowercase, set in outlines, tinted by currentColor
   so it takes the ink colour wherever it sits. There is no separate symbol —
   the app icon is the f cut out of this same word. */
.wordmark-image { width: 7.4rem; height: auto; display: block; color: var(--ink); }

.tagline {
  margin: .2rem 0 0;
  color: var(--ink-soft);
  font-family: var(--font-head);
  font-style: italic;
  font-size: .92rem;
}

main { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gap); }

.view[hidden], .panel[hidden], [hidden] { display: none !important; }

.lede { color: var(--ink-soft); }

/* Onboarding -------------------------------------------------------------- */

.stepper {
  display: flex;
  gap: .3rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.stepper li {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}
.stepper li[data-state="done"] { background: var(--terra); }
.stepper li[data-state="current"] { background: var(--terra); }

.options { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }

.option {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: var(--tap);
  padding: .75rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--lift-sm);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.option:has(input:checked) { border-color: var(--terra); background: var(--terra-wash); }
.option:has(input:focus-visible) { outline: 2px solid var(--terra); outline-offset: 2px; }
.option input { width: 1.1rem; height: 1.1rem; accent-color: var(--terra); flex: none; }

.question { margin-bottom: 1.5rem; }
.question h2 { margin-bottom: .25rem; }
.question .help { color: var(--ink-soft); font-size: .85rem; margin-bottom: .6rem; }

.field { display: block; margin-bottom: .5rem; }
.field-label { display: block; font-size: .85rem; color: var(--ink-soft); margin-bottom: .3rem; }
.field input {
  width: 100%;
  min-height: var(--tap);
  padding: .6rem .8rem;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.field input:focus-visible { outline: 2px solid var(--terra); outline-offset: 1px; }
.field-prefix-wrap { position: relative; display: block; }
.field-prefix {
  position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft);
}
.field-prefix-wrap input { padding-left: 2rem; }
.field-note { font-size: .85rem; color: var(--ink-soft); min-height: 1.2rem; }
.field-note[data-tone="warn"] { color: var(--warn); }

.panel-actions {
  display: flex;
  gap: .75rem;
  margin: 1.25rem 0 .5rem;
}
.panel-actions .btn { flex: 1; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: .6rem 1.1rem;
  font: inherit;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.btn-primary { background: var(--terra); color: #FFF7EE; }
.btn-quiet { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-danger { background: var(--card); color: var(--warn); border-color: var(--warn); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }

/* Timeline ---------------------------------------------------------------- */

.summary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #8A472F 0%, #6E3427 100%);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: 1.35rem 1.25rem 1.4rem;
  margin-bottom: 1.5rem;
}
/* One hairline in the metallic tone, along the top edge. */
.summary::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(217, 136, 79, .6), transparent);
}
.summary h1 { font-size: 1.3rem; margin-bottom: .25rem; color: #FDF3E8; }
.summary p { margin: 0; font-size: .9rem; color: #F2DCC9; }
.summary .summary-meta { color: #F0D9C5; }

.week { margin-bottom: 1.5rem; }
.week-heading {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--hairline);
}
.week-number {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.week-dates { font-size: .78rem; color: var(--ink-soft); margin-left: auto; }

.steps { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }

.step {
  background: var(--card);
  border: 0;
  border-left: 3px solid var(--terra-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--lift-sm);
  padding: 1rem 1.05rem;
}
.step[data-status="overdue"] { border-left-color: var(--warn); }
.step[data-status="now"] { border-left-color: var(--terra); background: #FDF4EA; }
.step[data-status="done"] { opacity: .62; }
.step[data-status="done"] .step-title { text-decoration: line-through; }

.step-check {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  min-height: var(--tap);
  cursor: pointer;
}
.step-check input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--terra); flex: none; }
.step-title { font-family: var(--font-head); font-size: 1.05rem; }

.step-when {
  margin: .1rem 0 .5rem 1.95rem;
  font-size: .82rem;
  color: var(--ink-soft);
}
.step[data-status="overdue"] .step-when::after { content: " · past"; color: var(--warn); }
.step[data-status="now"] .step-when::after { content: " · now"; color: var(--terra); }

.step-explanation { margin: 0 0 .6rem; font-size: .95rem; }
.step-explanation.clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin-bottom: .2rem;
}
.step-more { margin: 0 0 .6rem; }
.step-more-btn { font-size: .85rem; }
.step-source { margin: 0; font-size: .8rem; color: var(--ink-soft); }
.step-source a { margin-right: .4rem; }

.disclaimer {
  margin: 2rem 0 1rem;
  padding: .9rem 1rem;
  font-size: .8rem;
  color: var(--ink-soft);
  background: #F6EDE1;
  border-radius: var(--radius);
}

.empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* Settings ---------------------------------------------------------------- */

.saved-line { font-size: .85rem; color: var(--ink-soft); }

.card {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: 1.15rem 1.15rem 1.25rem;
  margin-bottom: 1.15rem;
}
.card p { font-size: .9rem; color: var(--ink-soft); }
.card-danger { border-color: #E7C3A4; }

.answers { margin: 0 0 .75rem; font-size: .9rem; }
.answers dt { color: var(--ink-soft); font-size: .8rem; }
.answers dd { margin: 0 0 .6rem; }

/* Tab bar ----------------------------------------------------------------- */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: rgba(255, 252, 247, .88);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.tabbar a {
  flex: 1;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .75rem .25rem;
  font-size: .8rem;
  white-space: nowrap;
  color: var(--ink-soft);
  text-decoration: none;
}
.tabbar a[aria-current="page"] { color: var(--terra); font-weight: 600; }

@media (min-width: 40rem) {
  h1 { font-size: 1.8rem; }
  body { padding-bottom: 2rem; }
  .tabbar {
    position: static;
    max-width: var(--shell);
    margin: 0 auto 2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .view { animation: fade .18s ease-out; }
  @keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}


/* Charts ------------------------------------------------------------------
   Two single-axis charts rather than one with two scales: a running total
   against the budget, and what leaves your account each week. The palette is
   one hue family by design, so two series in one chart could never be told
   apart by colour — which is why there are never two: style and direct labels
   carry the meaning, not hue. */

.chart-card h2 { font-size: 1rem; }
.chart-heading-second { margin-top: 1rem; }
.chart { margin: .25rem 0 0; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-note { font-size: .8rem; color: var(--ink-soft); margin-bottom: .25rem; }

.chart-area { fill: var(--terra-line); opacity: .45; }
.chart-line { fill: none; stroke: var(--terra); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-point { fill: var(--terra); stroke: var(--card); stroke-width: 2; }
.chart-bar { fill: var(--terra); }
.chart-axis { stroke: var(--line); stroke-width: 1; }
.chart-birth { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 2 3; opacity: .55; }
.chart-budget { stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart-budget.over { stroke: var(--warn); }

.chart-label { font-family: var(--font-body); font-size: 9px; fill: var(--ink-soft); }
.chart-label.warn { fill: var(--warn); }
.chart-value { font-family: var(--font-body); font-size: 11px; font-weight: 600; fill: var(--ink); }

.chart-hit { fill: transparent; cursor: pointer; }
.chart-hit:hover { fill: rgba(122, 59, 46, .08); }
/* Keep a focus ring for keyboard users, but in Paperbump's colours rather than
   the browser's black box over the bars. */
.chart-hit:focus { outline: none; }
.chart-hit:focus-visible {
  fill: rgba(122, 59, 46, .12);
  outline: 2px solid var(--terra);
  outline-offset: -2px;
}

.chart-readout {
  min-height: 2.4em;
  margin: .5rem 0 0;
  font-size: .82rem;
  color: var(--ink-soft);
}

/* Budget figures ---------------------------------------------------------- */

.mode-toggle { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.mode-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: var(--tap);
  padding: .5rem .8rem;
  font-size: .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.mode-option:has(input:checked) { border-color: var(--terra); background: #FDF4EA; }
.mode-option input { accent-color: var(--terra); width: 1.1rem; height: 1.1rem; flex: none; }

.cost-list { list-style: none; margin: 0; padding: 0; }
.cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
}
.cost-row:last-child { border-bottom: 0; }
.cost-label { display: flex; flex-direction: column; flex: 1; cursor: pointer; }
.cost-name { font-size: .92rem; }
.cost-when { font-size: .75rem; color: var(--ink-soft); }
.cost-field { position: relative; flex: none; }
.cost-prefix {
  position: absolute; left: .5rem; top: 50%; transform: translateY(-50%);
  font-size: .85rem; color: var(--ink-soft);
}
.cost-field input {
  width: 5.5rem;
  min-height: var(--tap);
  padding: .4rem .5rem .4rem 1.5rem;
  font: inherit;
  font-size: .9rem;
  text-align: right;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.cost-field input:focus-visible { outline: 2px solid var(--terra); outline-offset: 1px; }

/* Things you will need ---------------------------------------------------- */

.disclosure {
  margin-bottom: 1.25rem;
  padding: .75rem .9rem;
  font-size: .8rem;
  color: var(--ink-soft);
  background: #F6EDE1;
  border-radius: var(--radius);
}

.product {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--terra-line);
  border-radius: var(--radius);
  padding: .9rem 1rem;
}
.product[data-advice="buy_new"] { border-left-color: var(--terra); }
.product-name { font-family: var(--font-head); font-size: 1.05rem; font-weight: 500; margin: 0 0 .2rem; }
.product-when { margin: 0 0 .5rem; font-size: .78rem; color: var(--ink-soft); }
.product-advice { margin: 0 0 .5rem; }
.tag {
  display: inline-block;
  padding: .2rem .6rem;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 999px;
  background: #F7E5D6;
  color: var(--terra);
}
.product[data-advice="buy_new"] .tag { background: var(--terra); color: #FFF7EE; }
.product-guidance { margin: 0 0 .4rem; font-size: .92rem; }
.product-price { margin: 0 0 .15rem; font-size: .9rem; font-weight: 600; color: var(--ink); }
.product-price-note { margin: 0 0 .4rem; font-size: .82rem; color: var(--ink-soft); }
.product-cost { margin: 0; font-size: .82rem; color: var(--ink-soft); }
.price-basis p { font-size: .86rem; }
.product-links { margin: .55rem 0 0; display: flex; gap: .45rem; flex-wrap: wrap; }
.product-links a {
  font-size: .82rem;
  text-decoration: none;
  padding: .42rem .7rem;
  border: 1px solid var(--terra-line);
  border-radius: 999px;
  color: var(--terra);
  /* A link is a tap target: 44px including the padding above and below. */
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}


/* Install hint, journal and privacy ---------------------------------------- */

.install-hint {
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: var(--shell);
  margin: 0 auto .5rem;
  padding: .75rem var(--gap);
}
.install-hint p { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.install-hint strong { color: var(--ink); }
.btn-small { min-height: 36px; padding: .35rem .7rem; font-size: .8rem; flex: none; }

.journal-field { display: block; margin-bottom: .75rem; }
.journal-field textarea {
  width: 100%;
  padding: .6rem .8rem;
  font: inherit;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  resize: vertical;
}
.journal-field textarea:focus-visible { outline: 2px solid var(--terra); outline-offset: 1px; }

.journal-day {
  padding: .9rem 1rem;
  margin-bottom: .75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--terra-line);
  border-radius: var(--radius);
}
.journal-date { font-family: var(--font-head); font-size: .95rem; font-weight: 500; margin: 0 0 .5rem; }
.journal-slot { margin: 0 0 .6rem; }
.journal-slot:last-child { margin-bottom: 0; }
.journal-slot-label {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
.journal-text { margin: .15rem 0 0; font-size: .92rem; white-space: pre-wrap; }

.warning-line {
  padding: .75rem .9rem;
  font-size: .82rem;
  color: var(--ink-soft);
  background: #FBEFE2;
  border-radius: var(--radius);
}

#view-privacy .card p { color: var(--ink); font-size: .92rem; }
/* Comes after the rule above on purpose: an id selector would otherwise win
   and shrink the one line on the page that should carry weight. */
#view-privacy .card p.plain {
  font-family: var(--font-head);
  font-size: 1.4rem;
  color: var(--ink);
  margin-bottom: .6rem;
}
.source-list { margin: 0 0 .75rem; padding-left: 1.1rem; font-size: .88rem; }
.source-list li { margin-bottom: .2rem; }


/* Home and appointments ---------------------------------------------------- */

.home-group { margin-bottom: 1.25rem; }
.home-group h2 { font-size: 1rem; margin-bottom: .5rem; }
.home-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }

.home-item-link {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-height: var(--tap);
  justify-content: center;
  padding: .7rem .9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--terra-line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}
.home-item[data-status="overdue"] .home-item-link { border-left-color: var(--terra); }
.home-item[data-status="now"] .home-item-link { border-left-color: var(--terra); background: #FDF4EA; }
.home-item[data-kind="appointment"] .home-item-link { border-left-style: dashed; }
.home-item-title { font-size: .95rem; }
.home-item-when { font-size: .78rem; color: var(--ink-soft); }

.appointment-card { padding: .85rem .9rem; margin-bottom: 1.25rem; }
/* Two quiet actions sharing a row, rather than two slabs stacked above the
   timeline they belong to. */
.appointment-card > .btn-row { gap: .5rem; margin-bottom: 0; flex-wrap: nowrap; }
.appointment-card .btn {
  flex: 1;
  min-width: 0;
  padding: .5rem .6rem;
  font-size: .82rem;
  line-height: 1.25;
}
.appointment-card .field-note:empty { min-height: 0; margin: 0; }
.appointment-card .field-note:not(:empty) { margin: .6rem 0 0; }
#appointment-form h2 { margin-top: .75rem; }

.step.appointment { border-left-style: dashed; border-left-color: var(--terra); }
.appointment-title { font-family: var(--font-head); font-size: 1.05rem; font-weight: 500; margin: 0 0 .1rem; }
.appointment-notes { margin: .35rem 0 0; font-size: .92rem; white-space: pre-wrap; }
.appointment-actions { margin: .5rem 0 0; }

.link-button {
  min-height: var(--tap);
  padding: 0;
  font: inherit;
  font-size: .82rem;
  color: var(--terra);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}


/* Hero ---------------------------------------------------------------------
   Typography carries this, not ornament: a display numeral, one hairline
   track, and room to breathe. */

.hero-figure { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .9rem; }
.hero-number {
  font-family: var(--font-head);
  font-size: 3.4rem;
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.03em;
  /* Paper, not ink: this sits on the one dark field in the app. */
  color: #FDF6EC;
}
.hero-number.small { font-size: 1.8rem; letter-spacing: -.01em; }
.hero-unit {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.05rem;
  color: #EFD6C0;
}

.progress {
  height: 3px;
  border-radius: 2px;
  background: rgba(250, 242, 232, .22);
  overflow: hidden;
  margin-bottom: .9rem;
}
.progress-fill { height: 100%; border-radius: 2px; background: var(--clay); }

.hero-meta { margin: 0; font-size: .9rem; color: #F2DCC9; }
.hero-meta.soft { color: #DFBFA6; font-size: .82rem; margin-top: .15rem; }

.home-group { margin-bottom: 1.6rem; }
.home-group h2 { margin-bottom: .55rem; }

.home-item-link {
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  box-shadow: var(--lift-sm);
  border-top: 0; border-right: 0; border-bottom: 0;
  padding: .85rem 1rem;
}


/* Onboarding: skipping, and the nudge that follows it ---------------------- */

.panel-skip { margin: .1rem 0 0; text-align: center; }
.panel-skip .link-button { color: var(--ink-soft); }

.finish-setup { background: var(--terra-wash); box-shadow: var(--lift-sm); }
.finish-setup p { margin-bottom: .75rem; font-size: .92rem; color: var(--ink); }


/* Filter row ---------------------------------------------------------------- */

.filter-row {
  display: flex;
  gap: .4rem;
  margin: 0 0 1rem;
}
.filter-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: .4rem .6rem;
  font-size: .82rem;
  color: var(--ink-soft);
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.filter-option:has(input:checked) {
  background: var(--card);
  border-color: var(--terra);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--lift-sm);
}
.filter-option input { position: absolute; opacity: 0; pointer-events: none; }
.filter-option:has(input:focus-visible) { outline: 2px solid var(--terra); outline-offset: 2px; }

.hint { font-size: .85rem; color: var(--ink-soft); margin-bottom: .9rem; }
.more-row { margin: .75rem 0 0; text-align: center; }

.product-check {
  margin: .6rem 0 .5rem;
  padding: .7rem .85rem;
  background: var(--card-2);
  border-radius: var(--radius-sm);
}
.check-heading {
  margin: 0 0 .35rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.check-list { margin: 0 0 .5rem; padding-left: 1.1rem; font-size: .88rem; }
.check-list li { margin-bottom: .25rem; }
.check-source { margin: 0; font-size: .76rem; color: var(--ink-soft); }

.share-glyph {
  display: inline-flex;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -.18em;
  color: var(--terra);
}
.share-glyph svg { width: 100%; height: 100%; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* Childcare estimator ------------------------------------------------------ */

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .5rem; }
.field-grid .field { margin-bottom: 0; }
.field select {
  width: 100%;
  min-height: var(--tap);
  padding: .6rem .8rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.field-suffix-wrap { position: relative; display: block; }
.field-suffix-wrap input { padding-right: 2rem; }
.field-suffix {
  position: absolute; right: .8rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft);
}

.sum { margin: 1rem 0 .5rem; }
.sum-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: .92rem;
}
.sum-row:last-child { border-bottom: 0; }
.sum-row.total { font-weight: 600; font-size: 1.05rem; padding-top: .7rem; }
.sum-row.total .sum-value { font-family: var(--font-head); font-size: 1.3rem; }
.sum-label { color: var(--ink-soft); }
.sum-row.total .sum-label { color: var(--ink); }
.sum-value { white-space: nowrap; }
.sum-note {
  margin: .6rem 0 0;
  padding: .7rem .85rem;
  font-size: .85rem;
  background: #FBEFE2;
  border-radius: var(--radius-sm);
  color: var(--ink);
}


/* If things have changed --------------------------------------------------- */

.support-list { margin: 0 0 .75rem; padding: 0; list-style: none; }
.support-list li { margin-bottom: .75rem; }
.support-list a { font-size: .95rem; }
.support-list p { margin: .15rem 0 0; font-size: .85rem; color: var(--ink-soft); }

.paused-note {
  padding: 1.15rem 1.15rem 1.25rem;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  margin-bottom: 1.15rem;
}
.paused-note h1 { font-size: 1.3rem; }
.paused-note p { font-size: .95rem; color: var(--ink-soft); margin-bottom: .5rem; }
.paused-note p:last-child { margin-bottom: 0; }


/* Mood --------------------------------------------------------------------
   Words rather than faces: the research finds emoji get read differently by
   different people, and word scales are preferred. No colour hierarchy — a
   green-to-red scale quietly tells someone their bad days are failures. */

.mood-row { margin-bottom: 1rem; }
.mood-options { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.mood-option {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: .4rem .85rem;
  font-size: .85rem;
  color: var(--ink-soft);
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.mood-option:has(input:checked) {
  background: var(--terra-wash);
  border-color: var(--terra);
  color: var(--ink);
  font-weight: 600;
}
.mood-option input { position: absolute; opacity: 0; pointer-events: none; }
.mood-option:has(input:focus-visible) { outline: 2px solid var(--terra); outline-offset: 2px; }

.journal-mood {
  margin: 0 0 .5rem;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--terra);
}

.arrived-card { background: var(--terra-wash); box-shadow: var(--lift-sm); }
.arrived-card p { color: var(--ink); font-size: .9rem; }
.arrived-card .field { margin-bottom: 0; }

/* Artwork ------------------------------------------------------------------
   Drawn for Paperbump: one stroke weight, no fills, no licences, no downloads.
   Stock photography was the alternative and would have cost money, weight and
   the one thing this app sells, which is not looking like everyone else. */

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

.motif {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  fill: none;
  stroke: var(--terra);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The hero sprig. One leaf per stretch of the way, sitting behind the
   numbers rather than competing with them. */
.sprig {
  position: absolute;
  right: -.35rem;
  bottom: -1.2rem;
  width: 8.2rem;
  height: 11rem;
  fill: none;
  stroke: #E9B48D;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .42;
  pointer-events: none;
}
.sprig-bud { fill: rgba(233, 180, 141, .28); }

.summary h1,
.summary p,
.summary .eyebrow,
.summary .hero-figure,
.summary .progress,
.summary .hero-meta { position: relative; }
.summary .hero-meta { max-width: 68%; }

/* Each leaf draws itself in, a beat apart. Decoration that runs once on a
   view someone opens daily — never a loop, and off entirely if they have
   asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .sprig-leaf {
    animation: leaf-in .5s ease-out both;
    animation-delay: calc(var(--leaf) * 70ms + 120ms);
    transform-box: fill-box;
    transform-origin: 0% 50%;
  }
  .sprig-stem { animation: stem-in .5s ease-out both; }
  @keyframes leaf-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
  @keyframes stem-in { from { opacity: 0; } to { opacity: 1; } }

  /* Views arrive rather than appear. 6px and 180ms: enough to feel like
     movement between places, not enough to wait for. */
  .view:not([hidden]) { animation: view-in .18s ease-out both; }
  @keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* Category headings carry their motif. */
.week-heading .motif { margin-right: .05rem; align-self: center; }
.week-heading { align-items: center; }

/* Empty states get the leaf rather than a grey sentence on its own. */
.empty-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.35rem 1rem;
  text-align: center;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: .9rem;
}
.empty-art .motif { width: 1.6rem; height: 1.6rem; stroke: var(--terra-line); }

/* Ticking something moves something. The bar sits under the count it
   belongs to, and the fill slides rather than jumping. */
.progress-done { margin: .7rem 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .progress-fill { transition: width .35s cubic-bezier(.22,.61,.36,1); }
  .step[data-just-done="true"] { animation: ticked .45s ease-out both; }
  @keyframes ticked {
    0% { transform: none; }
    35% { transform: scale(.985); }
    100% { transform: none; }
  }
}

/* What you wrote that week, sitting with the steps it is about. Quiet: it is
   your own voice in the middle of a list of obligations, not another card. */
.week-note {
  margin: .55rem 0 0;
  padding-left: .7rem;
  border-left: 2px solid var(--terra-line);
  font-family: var(--font-head);
  font-style: italic;
  font-size: .9rem;
  color: var(--ink-soft);
}