/* TrainTeachLead — The Daily Drill
 * Palette: ink navy #131A26 · day-book paper #F3F1EA · oxide red #A8241C
 *          hi-vis trim #E8D44D · reflective silver #C3C7CD · slate #5A6170
 * Type: Barlow Condensed (apparatus lettering) · Public Sans (body) · IBM Plex Mono (citations)
 * Signature: the retroreflective turnout-trim bar (yellow/silver/yellow) that
 * tops each card — the one material every firefighter recognizes by feel. */

#ttl-daily-drill {
  --ttl-ink: #131a26;
  --ttl-paper: #f3f1ea;
  --ttl-red: #a8241c;
  --ttl-trim: #e8d44d;
  --ttl-silver: #c3c7cd;
  --ttl-slate: #5a6170;
  max-width: 680px;
  margin: 0 auto;
  padding: 8px 16px 40px;
  font-family: "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ttl-ink);
  font-size: 17px;
  line-height: 1.55;
}

#ttl-daily-drill .ttlx-mast { text-align: center; padding: 18px 0 22px; }
#ttl-daily-drill .ttlx-eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ttl-red); margin: 0 0 6px;
}
#ttl-daily-drill .ttlx-masthead {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700; font-size: clamp(44px, 9vw, 64px);
  line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase;
  margin: 0;
}
#ttl-daily-drill .ttlx-sub {
  color: var(--ttl-slate); font-size: 14.5px; max-width: 44ch;
  margin: 10px auto 0;
}

#ttl-daily-drill .ttlx-card {
  background: #fff;
  border: 1px solid #dfdbd0;
  border-radius: 10px;
  padding: 0 22px 22px;
  margin: 18px 0;
  box-shadow: 0 1px 0 #e4e0d5;
  overflow: hidden;
}
#ttl-daily-drill .ttlx-trim {
  height: 14px; margin: 0 -22px 16px;
  background:
    linear-gradient(180deg,
      var(--ttl-trim) 0 4px,
      var(--ttl-silver) 4px 10px,
      var(--ttl-trim) 10px 14px);
}
#ttl-daily-drill .ttlx-label {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 600; font-size: 15px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ttl-slate);
  margin: 0 0 10px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
#ttl-daily-drill .ttlx-cat {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.1em; color: var(--ttl-red);
  border: 1px solid currentColor; border-radius: 999px; padding: 2px 10px;
}
#ttl-daily-drill .ttlx-meta { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
#ttl-daily-drill .ttlx-cert {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #fff; background: var(--ttl-ink); padding: 2px 10px; border-radius: 4px;
}
#ttl-daily-drill .ttlx-std {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--ttl-slate);
}
#ttl-daily-drill .ttlx-title {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 600; font-size: clamp(26px, 5.4vw, 34px);
  line-height: 1.08; margin: 2px 0 12px;
}
#ttl-daily-drill .ttlx-task { margin: 0 0 14px; }
#ttl-daily-drill .ttlx-row {
  display: grid; grid-template-columns: 84px 1fr; gap: 12px;
  padding: 10px 0; border-top: 1px solid #ecebe4;
  font-size: 15.5px;
}
#ttl-daily-drill .ttlx-key {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ttl-red);
}
#ttl-daily-drill .ttlx-val { color: #2a3140; }

#ttl-daily-drill .ttlx-chal .ttlx-trim {
  background: linear-gradient(180deg,
    var(--ttl-silver) 0 4px, var(--ttl-trim) 4px 10px, var(--ttl-silver) 10px 14px);
}
#ttl-daily-drill .ttlx-chal-title { font-size: clamp(24px, 5vw, 30px); margin-bottom: 4px; }

#ttl-daily-drill .ttlx-career {
  background: var(--ttl-ink); color: var(--ttl-paper);
  border-color: var(--ttl-ink); padding-top: 20px;
}
#ttl-daily-drill .ttlx-career .ttlx-label { color: var(--ttl-trim); }
#ttl-daily-drill .ttlx-career .ttlx-chal-title { color: #fff; }

#ttl-daily-drill .ttlx-foot {
  color: var(--ttl-slate); font-size: 12.5px; text-align: center;
  margin-top: 26px; line-height: 1.5;
}
#ttl-daily-drill .ttlx-foot p { margin: 0 0 6px; }
#ttl-daily-drill .ttlx-foot-brand {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ttl-ink);
}

@media (max-width: 460px) {
  #ttl-daily-drill .ttlx-row { grid-template-columns: 1fr; gap: 2px; }
}
@media print {
  #ttl-daily-drill .ttlx-card { box-shadow: none; break-inside: avoid; }
}
@media (prefers-reduced-motion: no-preference) {
  #ttl-daily-drill .ttlx-card { animation: ttlx-in 0.35s ease both; }
  #ttl-daily-drill .ttlx-card:nth-of-type(3) { animation-delay: 0.07s; }
  @keyframes ttlx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}