/* Today. One passage, one line, a quiet record, and nothing shouting. */

.today { max-width: 46rem; }

.today .day-line { margin-bottom: .6rem; }
.today .today-date { margin-bottom: 1.8rem; }

/* ------------------------------------------------------------- the passage */

.card.hero {
  padding: clamp(1.5rem, 4vw, 2.6rem);
  border-radius: 1.1rem;
  border-color: color-mix(in srgb, var(--gold) 34%, var(--rule));
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.card.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
  opacity: .8;
}

.hero-ref {
  font: 600 .7rem/1 var(--ui);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .7rem;
}
.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .7rem;
  color: var(--ink);
}
.hero-why {
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 1.3rem;
  max-width: 30rem;
}
.meta-row .kept { color: var(--gold); }

/* --------------------------------------------------------------- catch up */

.card.gap {
  border-color: var(--rule);
  background: color-mix(in srgb, var(--gold) 7%, var(--field));
  margin-bottom: 1rem;
}
.card.gap h3 { font-size: 1.15rem; }

/* ---------------------------------------------------------------- summary */

.card.summary { margin-top: 1rem; }
.summary-mark {
  font: 600 .68rem/1 var(--ui);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .5rem;
}
.summary-next {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--serif);
  color: var(--ink-2);
}
.summary-prompt { margin: 1.1rem 0 .4rem; }
.summary-prompt label { font: 600 .8rem/1.4 var(--ui); color: var(--ink); }

/* --------------------------------------------------------------- presence */

.presence-block { margin: 2.6rem 0 2.2rem; }
.presence-label {
  font: 600 .68rem/1 var(--ui);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 .8rem;
}
.presence.dot-grid {
  display: grid;
  grid-template-columns: repeat(7, .7rem);
  gap: .55rem;
  width: max-content;
}
.presence.dot-grid i {
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--rule);
  transition: background .3s var(--ease);
}
/* Absence is the absence of a dot. It is never marked in red, and nothing here
   counts days in a row. */
.presence.dot-grid i.on { background: var(--gold); }
.presence.dot-grid i.now { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 24%, transparent); }
.presence-note {
  margin: .9rem 0 0;
  font-size: .86rem;
  color: var(--ink-3);
  max-width: 26rem;
}

/* ----------------------------------------------------------- small things */

.card.small { margin-top: 1rem; }
.card.small h3 { font-size: 1.1rem; }
.card.small.question .q-eyebrow {
  font: 600 .66rem/1 var(--ui);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 .5rem;
}
.card.small.question .q-text {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 1rem;
}

.btn.small { padding: .6em 1em; font-size: .74rem; }

/* ---------------------------------------------------------------- offline */

.offline {
  margin: 2.4rem 0 0;
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  font-size: .84rem;
  color: var(--ink-3);
}
.offline.done { color: var(--ink-3); }
.offline-note { font-size: .8rem; }