/* drill.css  ·  the drill card, and your own drill list
 *
 * Linked by every page under /drills/, and injected by drills-mine.js when
 * a signed-in reader has drills to show on the glossary. Nobody else fetches
 * it.
 *
 * It lives here rather than in style.css because style.css is downloaded by
 * every reader on every page and is held under 30KB gzipped, which
 * tools/score.js checks. Styles for one page group belong with that group.
 */

/* ---------- One drill, at /drills/{id} ----------

   A card, not an article. PROJECT.md section 4a: the card is read standing
   up before a meeting, the article is read sitting down on a Sunday. So this
   is one screen where possible, the recognition line leads, and the steps are
   the largest thing on it.

   Generated by tools/make-drill-pages.js. */

.dp-back { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.dp-back:hover { color: var(--navy); border-bottom-color: var(--bronze); }

.dp-family {
  font-family: "Anton", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.4rem 0 0.3rem;
}

/* The line that has to find them. Larger than the title's body text and set
   in the reading face, because it is a sentence about their week rather than
   a label on a technique. */
.dp-why {
  font-family: "Newsreader", serif;
  font-weight: 300;
  font-size: clamp(1.15rem, 3.2vw, 1.5rem);
  line-height: 1.35;
  color: var(--navy);
  max-width: 46ch;
  margin: 0.6rem 0 1.2rem;
}

.dp-meta {
  font-family: "Anton", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 2rem;
}

/* The .dp-state block went on 2026-08-11 with drill.js. It styled a per person
   panel on a drill page saying whether that drill had been given to you, and
   nothing had emitted the mount since the drill rewrite. Every drill's steps
   are in its page now, for everybody. */

.dp-h {
  font-family: "Anton", sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2rem 0 0.6rem;
}

/* The steps are the point of the page, so they are the largest thing on it. */
.dp-steps {
  counter-reset: dpstep;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 56ch;
}
.dp-steps li {
  counter-increment: dpstep;
  position: relative;
  padding: 0.7rem 0 0.7rem 2.6rem;
  border-top: 1px solid var(--hairline);
  font-size: 1.04rem;
}
.dp-steps li:last-child { border-bottom: 1px solid var(--hairline); }
.dp-steps li::before {
  content: counter(dpstep);
  position: absolute;
  left: 0;
  top: 0.68rem;
  font-family: "Anton", sans-serif;
  font-size: 0.95rem;
  color: var(--bronze);
}

/* The glossary entry becomes a link to its page. */
.drill-entry-name a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hairline); }
.drill-entry-name a:hover { color: var(--bronze-text); border-bottom-color: var(--bronze); }

/* ---------- Your drills, above the glossary ---------- */
.drills-mine { border-bottom: 1px solid var(--hairline); padding-bottom: 2rem; margin-bottom: 2.4rem; }
.dm-h { font-family: "Anton", sans-serif; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 1.4rem 0 0.3rem; }
.dm-note { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.8rem; max-width: 56ch; }
.dm-list { list-style: none; margin: 0; padding: 0; }
.dm-item { padding: 0.55rem 0; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; align-items: baseline; }
.dm-title { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--bronze); padding-bottom: 1px; }
.dm-title:hover { color: var(--bronze-text); border-bottom-width: 2px; padding-bottom: 0; }
.dm-meta { font-family: "Anton", sans-serif; font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.dm-item-note { flex-basis: 100%; font-style: italic; color: var(--bronze-text); margin: 0.2rem 0 0; }

/* ---- one drill, in the template every drill uses ----

   The order never changes, and that is the point. A reader who has opened one
   drill has learned the layout of every one of them, so the second costs less
   attention than the first. Nothing decorative, and the steps are the page. */

.dp-section {
  font-family: "Anton", sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 0.5rem;
}

/* The two lines that decide whether this is the right drill. Nothing else sits
   above the steps. */
.dp-purpose {
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 34em;
  margin-top: 0.6rem;
}
.dp-gap {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 34em;
  margin-top: 0.8rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--hairline);
}
.dp-lab {
  display: block;
  font-family: "Anton", sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 0.2rem;
}

.dp-block { margin-top: 1.8rem; max-width: 34em; }
.dp-block p:not(.dp-h) { font-size: 1rem; line-height: 1.65; color: var(--ink); }

/* The steps carry the weight, so they get the rule above them and the room. */
.dp-steps-block {
  margin-top: 2.4rem;
  border-top: 2px solid var(--gold);
  padding-top: 1.4rem;
}

/* How you know it worked is the one thing a person returns to after running
   the drill, so it is marked rather than buried among the optional blocks. */
.dp-success { border-left: 2px solid var(--gold); padding-left: 1.1rem; }
.dp-success .dp-h { color: var(--gold); }

/* What else a drill works, and why.

   A definition list because that is what it is: a dimension, and the reason
   this drill deliberately reaches into it. Every entry carries a reason
   rather than a tick, because the test was never "could this be involved". */
.dp-touch { margin-top: 2rem; max-width: 34em; }
.dp-touch-list { margin-top: 0.8rem; }
.dp-touch-list dt {
  font-family: "Anton", sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 0.9rem;
}
.dp-touch-list dt a { color: var(--bronze); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.dp-touch-list dt a:hover { color: var(--ink); border-bottom-color: var(--gold); }
.dp-touch-list dd { font-size: 0.98rem; line-height: 1.6; color: var(--muted); margin: 0.25rem 0 0; }

/* ---- the daily collection ---- */

.dy-intro { font-size: 1rem; line-height: 1.65; color: var(--muted); max-width: 34em; margin-top: 0.8rem; }
.dy-band { margin-top: 3rem; border-top: 2px solid var(--bronze); padding-top: 1.4rem; }
.dy-band-h { font-family: "Anton", sans-serif; font-size: 1.4rem; color: var(--ink); }
.dy-band > p { font-size: 1rem; line-height: 1.65; color: var(--muted); max-width: 34em; margin-top: 0.4rem; }

.dy-list { list-style: none; margin-top: 1.6rem; }
.dy-item { border-top: 1px solid var(--hairline); padding: 1.4rem 0; }
.dy-name { font-family: "Anton", sans-serif; font-size: 1.1rem; }
.dy-name a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.dy-name a:hover { border-bottom-color: var(--gold); }
.dy-meta {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 0.3rem;
}
.dy-lab {
  display: block;
  font-family: "Anton", sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 0.2rem;
}
.dy-why { font-size: 0.95rem; line-height: 1.6; color: var(--muted); margin-top: 0.8rem; max-width: 34em; }
.dy-purpose { font-size: 1.02rem; line-height: 1.55; color: var(--ink); margin-top: 0.7rem; max-width: 34em; }
.dy-use { font-size: 0.92rem; color: var(--muted); margin-top: 0.3rem; }
.dy-h {
  font-family: "Anton", sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 1rem;
}
.dy-steps { margin: 0.5rem 0 0 1.1rem; max-width: 34em; }
.dy-steps li { font-size: 0.98rem; line-height: 1.6; color: var(--ink); margin-bottom: 0.3rem; }
.dy-note { font-size: 0.9rem; line-height: 1.55; color: var(--muted); margin-top: 0.8rem; max-width: 34em; }
.dy-rule {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
  margin-top: 0.9rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--gold);
  max-width: 34em;
}

/* A drill that is also daily, on its own page. */
.dp-daily { margin-top: 2rem; padding-left: 1.1rem; border-left: 2px solid var(--bronze); max-width: 34em; }
.dp-daily p { font-size: 0.98rem; line-height: 1.6; color: var(--muted); }
.dp-daily a { color: var(--bronze); }