/* confess.css — lifted out of confess.html verbatim when each feature on that page got its
   own page. Shared by confess.html and its feature pages; nothing was restyled.
   ========================================================================== */

.page-hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.view { display: none; }
.view.is-active { display: block; animation: view-in 500ms var(--ease-out); }

@keyframes view-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ============ Walkthrough ============ */

.walk-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 44rem;
  margin-inline: auto;
}

.walk-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.9rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.walk-meta .phase { color: var(--purple); }
.walk-meta .stepno { color: var(--ink-3); letter-spacing: 0.1em; }

.walk-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.8rem, 5vw, 3rem);
  margin-top: 1.6rem;
  position: relative;
  overflow: hidden;
}

.walk-card::before {
  /* faint arch watermark */
  content: "";
  position: absolute;
  top: -4rem; right: -3rem;
  width: 13rem; height: 18rem;
  /* Half the element's width, which is the same semicircular top `--r-arch`
     describes — but stated at this box's scale. Asking the compositor to scale
     a 999px radius down inside a rounded, clipping parent hangs the renderer. */
  border-radius: 6.5rem 6.5rem 0 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--purple) 6%, transparent), transparent 75%);
  pointer-events: none;
}

.walk-card h2 {
  font-size: clamp(1.8rem, 4.5vw, 2.7rem);
  margin-bottom: 1.1rem;
  position: relative;
}

.walk-card .body {
  color: var(--ink-2);
  font-weight: 300;
  line-height: 1.7;
  max-width: 36rem;
  position: relative;
}

.walk-say {
  margin-top: 1.6rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--purple) 5%, var(--tint));
  border: 1px solid color-mix(in oklab, var(--purple) 18%, transparent);
  position: relative;
}

.walk-say .lbl {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 0.5rem;
}

.walk-say .words {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink);
}

/* A referenced prayer renders as paragraphs — the breaks are part of the text,
   not styling. Quote marks stay off it: it is the reader's own prayer, not a
   line being quoted to them. */
.walk-say .words p { margin-bottom: 0.7rem; }
.walk-say .words p:last-child { margin-bottom: 0; }

.walk-note {
  margin-top: 1.3rem;
  font-size: 0.86rem;
  color: var(--ink-3);
  line-height: 1.6;
  display: flex;
  gap: 0.6rem;
  position: relative;
}

.walk-note::before { content: "✦"; color: var(--orange); font-size: 0.7rem; margin-top: 0.2rem; }

.walk-exam {
  margin-top: 1.6rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1.4rem;
  position: relative;
}

.walk-exam .lbl {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 0.8rem;
}

.walk-exam ul { list-style: none; display: grid; gap: 0.5rem; }

.walk-exam li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.55;
}

.walk-exam li .rn {
  font-family: var(--serif);
  font-style: italic;
  color: var(--purple);
  flex-shrink: 0;
  width: 1.6rem;
}

.walk-exam .none { font-size: 0.88rem; color: var(--ink-3); }
.walk-exam .none a { color: var(--purple); }

.penance-box { margin-top: 1.6rem; position: relative; }

.penance-box label {
  display: block;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 0.6rem;
}

.penance-box .saved {
  font-size: 0.76rem;
  color: var(--ink-3);
  margin-top: 0.5rem;
  min-height: 1.2em;
  transition: opacity 300ms;
}

.walk-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}

/* phase dots */
.walk-phases {
  display: flex;
  gap: 0.4rem;
  margin-top: 2.4rem;
  justify-content: center;
}

.walk-phases button {
  width: 30px; height: 8px;
  border-radius: 999px;
  background: var(--paper-3);
  transition: background 240ms, width 240ms var(--ease-out);
}

.walk-phases button.is-past { background: color-mix(in oklab, var(--purple) 38%, var(--tint)); }
.walk-phases button.is-current { background: var(--purple); width: 44px; }

/* final step */
.walk-final-actions {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  position: relative;
}

@media (max-width: 880px) {
}

@media (max-width: 480px) { }

@media (max-width: 880px) { }


/* ============ My Confessions (ADR-026) =====================================
   A record is read backwards, so the calendar is this page's main surface and
   not a picker beside a list: a year of gold marks IS the record. The list
   under it is the way back into one entry, and the gap since the last
   confession — the thing the reader actually opened the page to see — takes the
   strongest surface on the page.

   One mark, and only one. A logged day is a filled gold disc; today is a thin
   ink ring; the selected day carries a purple one. That is the loudness order
   the grid is designed around — logged, then selected, then today, then
   nothing at all, because most days are nothing and should look it.

   Five states share three compositions: the month (with marks, without, and
   with a day open under the grid), one entry in full, and the form. First run
   is its own composition rather than this screen with the data removed.
   ========================================================================== */

.lx { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); max-width: 68rem; margin-inline: auto; }
.lx-one { max-width: 46rem; }

/* --- the strip: the gap, the last date, the way to add one --- */

.lx-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem clamp(1.4rem, 4vw, 2.8rem);
  padding: clamp(1rem, 2.4vw, 1.4rem) clamp(1.15rem, 3vw, 1.7rem);
  border-radius: var(--r-lg);
  background: var(--purple-fill);
  color: white;
  box-shadow: var(--shadow-md);
}

/* White on lifted purple clears AA for the figure and nothing else, so on a
   dark page the strip becomes a purple-washed surface with ordinary ink. */
[data-theme="dark"] .lx-strip {
  background: color-mix(in oklab, var(--purple) 24%, var(--surface));
  color: var(--ink);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--hairline-2);
}

/* The label runs to two lines, so a first-line baseline would hang "last
   confession" below the figure. They share the LAST line's baseline instead, so
   the figure and the end of the label sit on one line. */
.lx-gap { display: flex; align-items: flex-end; align-items: last baseline; gap: 0.7rem; margin-right: auto; }
.lx-gap .n {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5.6vw, 3.2rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.lx-gap .t { font-size: 0.95rem; line-height: 1.3; opacity: 0.88; }

.lx-facts { display: flex; flex-wrap: wrap; gap: 0.9rem 2.1rem; margin: 0; }
.lx-facts > div { display: grid; gap: 0.15rem; }
.lx-facts dt {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; opacity: 0.7;
}
.lx-facts dd { margin: 0; font-family: var(--serif); font-size: 1.05rem; font-variant-numeric: tabular-nums; }

.lx-strip__add { background: var(--moon); color: var(--purple-deep); }
[data-theme="dark"] .lx-strip__add { background: var(--purple-fill); color: white; }

/* --- calendar left, log right; one column under 900px, where the log lands
       under the calendar the way the phone reads it --- */

.lx-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
  gap: clamp(1rem, 2.2vw, 1.6rem);
  align-items: start;
}
.lx-main { display: grid; gap: clamp(0.8rem, 1.8vw, 1.1rem); min-width: 0; }

/* One column under 900px — and a measure, because a calendar that fills an
   iPad in portrait is a wall planner, not a record. */
@media (max-width: 900px) {
  .lx-cols { grid-template-columns: minmax(0, 1fr); }
  .lx { max-width: 34rem; }
}

/* --- the calendar --- */

.cx {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(0.85rem, 2vw, 1.35rem);
}

.cx-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.9rem; }
.cx-month {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  letter-spacing: -0.02em;
  margin-right: auto;
}
.cx-month span { font-style: italic; color: var(--ink-3); }

.cx-nav {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  color: var(--ink-2);
  transition: color 200ms, border-color 200ms, background 200ms;
}
.cx-nav:hover { border-color: var(--purple); color: var(--purple); background: var(--purple-mist); }

.cx-jump {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
  padding: 0.4rem 0.6rem;
  border-radius: 999px;
  margin-right: 0.2rem;
}
.cx-jump:hover { background: var(--purple-mist); }

.cx-dow, .cx-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(2px, 0.5vw, 6px); }
.cx-dow { margin-bottom: 0.35rem; }
.cx-dow span {
  text-align: center;
  font-size: 0.63rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}

.cx-day {
  aspect-ratio: 1;
  min-height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  transition: background 180ms var(--ease-out), box-shadow 180ms var(--ease-out), color 180ms;
}
.cx-day:hover { background: var(--purple-soft); color: var(--ink); }
.cx-day.is-out { visibility: hidden; }

/* A day that has not happened is quieter than an empty one that has. */
.cx-day.is-future { color: var(--ink-3); opacity: 0.55; }
.cx-day.is-future:hover { opacity: 1; }
.cx-day:disabled { opacity: 0.3; cursor: default; }
.cx-day:disabled:hover { background: none; color: var(--ink-2); }

.cx-day.is-today { box-shadow: inset 0 0 0 1.5px var(--hairline-2); color: var(--ink); }

/* Gold disc = a confession was recorded. The day number takes the legible
   gold-ink pair rather than white: gold cannot be both vivid and legible as
   text (spec/design-tokens.md), which is the same reason adoration's ink
   diverges from its accent. Dimming the fill instead would weaken the one mark
   this calendar has. */
.cx-day.is-logged {
  background: var(--orange);
  /* The fill is 2.01 against the page, so the day had no edge at all (ADR-094).
     The ring carries the boundary; the fill keeps the Adoration hue. */
  box-shadow: inset 0 0 0 1px var(--orange-mark);
  /* 50%, not 52% (ADR-092): text ON the accent fill, which is the one role the
     obligation table deliberately does not cover — it needs a value fixed across
     BOTH themes while every ink token flips. 52% was 4.46 on the light fill; 50%
     is 4.74 there and 5.49 on the lifted dark one. */
  color: color-mix(in oklab, var(--orange) 50%, black);
  font-weight: 600;
  opacity: 1;
}
.cx-day.is-logged:hover { background: color-mix(in oklab, var(--orange) 88%, var(--ink)); }
.cx-day.is-logged.is-today { box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--orange) 34%, black); }

.cx-day.is-sel { box-shadow: 0 0 0 2px var(--purple); }
.cx-day.is-sel:not(.is-logged) { background: var(--purple-soft); color: var(--ink); opacity: 1; }
.cx-day.is-sel.is-today:not(.is-logged) { box-shadow: 0 0 0 2px var(--purple), inset 0 0 0 1.5px var(--hairline-2); }

.cx-legend {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.45rem 1.1rem;
  margin-top: 0.95rem; padding-top: 0.8rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.74rem; color: var(--ink-3);
}
.cx-legend > span { display: inline-flex; align-items: center; gap: 0.42rem; }
.cx-key { width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0; }
.cx-key--logged { background: var(--orange); }
.cx-key--today { box-shadow: inset 0 0 0 1.5px var(--hairline-2); }
.cx-count { margin-left: auto; color: var(--ink-2); }

/* --- the day, under the grid --- */

.lx-day, .lx-none {
  border-radius: var(--r-lg);
  padding: clamp(1rem, 2.4vw, 1.4rem);
  animation: view-in 380ms var(--ease-out);
}
.lx-day { background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-sm); }

/* A day with nothing on it gets a lighter box: the surface says how much is
   inside it before the copy does. */
.lx-day--quiet { background: var(--paper-2); border-style: dashed; box-shadow: none; }

.lx-day__hd { display: flex; align-items: flex-start; gap: 1rem; }
.lx-x {
  margin-left: auto; flex-shrink: 0;
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 999px; color: var(--ink-3);
}
.lx-x:hover { background: var(--paper-3); color: var(--ink); }

.lx-ago {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--purple);
  margin-bottom: 0.25rem;
}
.lx-when { font-family: var(--serif); font-weight: 500; font-size: clamp(1.15rem, 2.2vw, 1.42rem); letter-spacing: -0.015em; }
.lx-quiet { font-size: 0.92rem; color: var(--ink-3); margin-top: 0.7rem; }

.lx-fields { display: grid; gap: 0.5rem; margin-top: 1rem; }
.lx-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.9rem; align-items: baseline; }
.lx-row dt { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.lx-row dd { margin: 0; font-size: 0.94rem; color: var(--ink-2); }

.lx-areas { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.lx-area {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.12rem 0.65rem;
  font-size: 0.8rem; color: var(--ink-2);
}
.lx-area i { font-family: var(--serif); font-style: italic; font-size: 0.86rem; color: var(--purple); }

.lx-note {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink);
  margin-top: 1rem;
  text-wrap: pretty;
}
.lx-note--clip { -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; }

.lx-day__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }

/* --- a month with nothing in it (state 2) --- */

.lx-none { background: var(--paper-2); border: 1px dashed var(--hairline-2); text-align: center; }
.lx-none h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.1rem, 2.2vw, 1.32rem); margin-bottom: 0.4rem; }
.lx-none p { font-size: 0.92rem; color: var(--ink-2); max-width: 30rem; margin-inline: auto; }
.lx-none__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1.1rem; }

/* --- the log beside the calendar --- */

.lx-side {
  display: grid;
  gap: 0.7rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(0.9rem, 2vw, 1.2rem);
}
.lx-side__h { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.lx-side__h h3 { font-family: var(--serif); font-weight: 500; font-size: 1.14rem; }
.lx-side__h span { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

.lx-list {
  display: grid; gap: 0.2rem;
  max-height: 25rem; overflow-y: auto;
  margin-inline: -0.4rem; padding: 0 0.4rem;
  overscroll-behavior: contain;
}
.lx-list:focus-visible { outline-offset: 0; }

.lx-item {
  display: grid; gap: 0.15rem;
  text-align: left;
  padding: 0.62rem 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: background 180ms, border-color 180ms;
}
.lx-item:hover { background: var(--paper-2); border-color: var(--hairline); }
.lx-item.is-sel { background: var(--purple-mist); border-color: color-mix(in oklab, var(--purple) 28%, transparent); }

.lx-item__top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.7rem; }
.lx-item__d { font-family: var(--serif); font-size: 0.98rem; color: var(--ink); display: flex; align-items: baseline; gap: 0.5rem; }

/* The same gold mark the calendar uses, so a row and a day read as one thing. */
.lx-item__d::before {
  content: ""; flex-shrink: 0;
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--orange);
}
.lx-item__ago { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.lx-item__s { font-size: 0.82rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: calc(7px + 0.5rem); }

.lx-side__note { font-size: 0.72rem; color: var(--ink-3); line-height: 1.5; padding-top: 0.2rem; }

/* --- one entry, in full (state 4) --- */

.lx-entry {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.3rem, 3.4vw, 2.2rem);
  position: relative;
  overflow: hidden;
}

/* The same arch watermark the walkthrough card carries: this is the record of
   what happened on that card. */
.lx-entry::before {
  content: "";
  position: absolute;
  top: -3.5rem; right: -2.5rem;
  width: 11rem; height: 15rem;
  border-radius: 5.5rem 5.5rem 0 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--purple) 6%, transparent), transparent 75%);
  pointer-events: none;
}
.lx-entry > * { position: relative; }

.lx-entry__d {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.6vw, 2.15rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}
.lx-entry .lx-fields { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); gap: 0.65rem; }
.lx-entry__note { margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); }
.lx-lbl { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.lx-entry .lx-note { margin-top: 0.55rem; font-size: 1.06rem; }

.lx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.6rem; }
.lx-actions [data-save], .lx-actions [data-edit] { margin-left: auto; }
.lx-del { color: var(--danger-ink); }
.lx-del:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- the form (state 5's way in) --- */

.lx-form { padding: clamp(1.3rem, 3.4vw, 2rem); }
.lx-form h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.35rem, 3vw, 1.75rem); }
.lx-form__sub { font-size: 0.9rem; color: var(--ink-2); margin: 0.3rem 0 1.3rem; max-width: 30rem; }

.lx-daterow {
  width: 100%;
  display: flex; align-items: center; gap: 0.8rem;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 0.75rem 0.95rem;
  min-height: 48px;
  text-align: left;
}
.lx-daterow:hover { border-color: var(--hairline-2); }
.lx-daterow > span:first-child { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.lx-daterow strong { font-family: var(--serif); font-weight: 500; font-size: 1rem; color: var(--ink); }
.lx-chev { margin-left: auto; color: var(--ink-3); display: grid; place-items: center; }
.lx-daterow[aria-expanded="true"] .lx-chev { transform: rotate(180deg); }
/* A picker, not the record: it keeps the calendar's vocabulary at a size that
   says "choose a date" rather than "read your year". */
.lx-formcal { margin-top: 0.6rem; box-shadow: none; max-width: 25rem; }
.lx-formcal .cx-month { font-size: 1.15rem; }
.lx-formcal .cx-day { font-size: 0.95rem; min-height: 36px; }
.lx-formcal .cx-nav { width: 2.1rem; height: 2.1rem; }

.lx-blocked {
  font-size: 0.86rem;
  color: var(--orange-ink);
  background: color-mix(in oklab, var(--orange) 13%, var(--tint));
  border-radius: var(--r-sm);
  padding: 0.65rem 0.85rem;
  margin-top: 0.7rem;
}
/* Only the wash is restated now: `--orange-ink` flips to the lifted accent on its own. */
[data-theme="dark"] .lx-blocked { background: color-mix(in oklab, var(--orange) 18%, transparent); }
.lx-inline { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.lx-f { display: grid; gap: 0.35rem; margin-top: 1rem; }
.lx-f > span { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.lx-f textarea { min-height: 5.5rem; }

.lx-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.1rem; }
.lx-chip {
  display: inline-flex; align-items: baseline; gap: 0.42rem;
  min-height: 38px;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  font-size: 0.82rem; color: var(--ink-2);
  transition: background 180ms, border-color 180ms, color 180ms;
}
.lx-chip i { font-family: var(--serif); font-style: italic; color: var(--purple); }
.lx-chip:hover { border-color: var(--purple); color: var(--ink); }
.lx-chip[aria-pressed="true"] { background: var(--purple-fill); border-color: var(--purple-fill); color: white; }
.lx-chip[aria-pressed="true"] i { color: color-mix(in oklab, white 62%, var(--purple)); }

/* --- first run (state 5): a different composition, not this screen emptied --- */

.lx-empty {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(2.4rem, 7vw, 4.5rem) clamp(1.3rem, 4vw, 2rem);
}

/* The mark the reader has not earned yet, inside the arch this whole system is
   built on. It is here to say what the calendar will look like, which is the
   one thing an empty calendar cannot say. */
.lx-empty__arch {
  width: 3.6rem; height: 4.9rem;
  margin: 0 auto 1.4rem;
  border: 1.5px solid var(--hairline-2);
  border-radius: 1.8rem 1.8rem 5px 5px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, color-mix(in oklab, var(--purple) 8%, transparent), transparent 72%);
}
.lx-empty__arch i {
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 0 0 7px color-mix(in oklab, var(--orange) 14%, transparent);
}

.lx-empty h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  margin: 0.9rem auto 0.8rem;
  max-width: 26rem;
}
.lx-empty > p { font-size: 0.98rem; color: var(--ink-2); line-height: 1.65; max-width: 32rem; margin-inline: auto; text-wrap: pretty; }
.lx-empty__acts { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: 1.8rem; }
.lx-empty__note { font-size: 0.78rem; color: var(--ink-3); margin-top: 1.8rem; }
.lx-empty__note a { color: var(--purple); }

/* ---------- narrow ---------- */

@media (max-width: 640px) {
  .page-hero__row { gap: 1.4rem; }
  .lx-gap { margin-right: 0; }
  .lx-gap .t { font-size: 0.9rem; }
  .lx-strip__add { width: 100%; justify-content: center; }
  .lx-facts { gap: 0.8rem 1.6rem; }
  .lx-list { max-height: 21rem; }
  .lx-actions .btn { flex: 1 1 auto; justify-content: center; }
  .lx-actions [data-save], .lx-actions [data-edit] { margin-left: 0; }
  .walk-nav { flex-direction: column-reverse; }
  .walk-nav .btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .lx-row { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .cx-month { font-size: 1.22rem; }
  .cx-day { font-size: 1rem; }
  .lx-day__acts .btn { width: 100%; justify-content: center; }
}

/* Coarse pointers get a real thumb target whatever the viewport is. */
@media (hover: none) and (pointer: coarse) {
  .cx-day { min-height: 44px; }
  .cx-nav, .lx-x { width: 44px; height: 44px; }
  .lx-chip { min-height: 44px; }
  .lx-item { padding-block: 0.8rem; }
}