/* ============================================================================
   YOUR CHILD'S DEADLINE -- child-deadlines.css
   Scope class .cdl ; body class cdl-page (set by the mu-plugin).

   MATERIAL: a pediatrician's wall chart. Warm cream paper, white cards,
   pencil-hairline rules, and one vertical age ruler drawn like marks on a
   doorframe. Gold is the child. Oxblood is where a claim dies. Terracotta is
   the reader's own hand -- buttons and selected answers, nothing else. Brand
   blue appears exactly once, in the closing band.

   Computed contrast (sRGB, WCAG):
     ink      #171716 on paper #F3F0E8 = 15.62:1
     ink-2    #57524B on paper         =  6.87:1   labels, captions
     oxblood  #7A2B1C on paper         =  8.32:1   deadline dates
     oxblood  #7A2B1C on card #FFFFFF  =  9.20:1
     terracotta #A64B2A on paper       =  4.99:1   AA at normal text size
     gold-ink #8A6612 on paper         =  4.86:1   AA at normal text size
     white    on terracotta #A64B2A    =  4.21:1   LARGE/BOLD UI text only (>=18.7px bold)
     white    on oxblood #7A2B1C       =  8.98:1
   Colour is never the sole signal: every oxblood mark also carries a word.
   ============================================================================ */

/* -- theme suppression (design-kit/rules/embed-physics.html) ---------------- */
/* Post 9480 is a POST, not a page: the single-post template wraps the content
   in .single-post-sidebar with a 25% widget rail and a 60%-wide column, and it
   paints a full-bleed blue title header. Every other research page in this
   theme is a PAGE and suppresses .entry-header; that selector does not exist
   here. Do not "simplify" these to the page-template versions. */
body.cdl-page .post-single-header { display: none !important; }
body.cdl-page .single-post-sidebar { display: block !important; width: 100% !important; margin: 0 !important; }
body.cdl-page .single-post-sidebar #sidebar { display: none !important; }
body.cdl-page .entry-content.content-width { width: 100% !important; max-width: none !important; }
body.cdl-page .entry-content > * { max-width: none !important; }
body.cdl-page .site-main { margin: 0 !important; padding: 0 !important; }
/* The theme hides the FIRST h2 of any single-post entry-content
   (.single-post .entry-content h2:nth-child(1) is pushed off-screen). The
   article's opening h2 is the first child of its own container, so that rule
   matches it and the short answer vanishes. Put it back. */
body.cdl-page .entry-content h2:nth-child(1) {
  height: auto !important; width: auto !important;
  overflow: visible !important; position: static !important;
}
/* Counter theme font bleed: the theme forces Manrope onto p/ul/ol/li.
   NOTE the specificity trap this creates, found on rendered staging: this rule
   is (0,1,1), so a bare .cdl-something class on a <p> is (0,1,0) and LOSES to
   it -- the page's whole mono voice silently reverted to the body face. Every
   typographic rule that targets a <p> is therefore written .cdl .cdl-x. Do not
   "tidy" those back to a single class. */
.cdl p, .cdl ul, .cdl ol, .cdl li, .cdl td, .cdl th, .cdl summary, .cdl label {
  font-family: inherit;
}

/* -- tokens ---------------------------------------------------------------- */
.cdl {
  --paper:      #F3F0E8;
  --paper-lite: #FAF8F2;
  --card:       #FFFFFF;
  --ink:        #171716;
  --ink-2:      #57524B;
  --muted:      #66645C;   /* the lightest text tone on the page, so it sets the AA floor.
                              Measured against every ground it can land on, worst case first:
                              4.70:1 over the hero's hairline stripe #E8E5DB, 5.21:1 on cream,
                              5.58:1 on paper-lite, 5.93:1 on white. The original #73716B was
                              4.29:1 on cream and 3.82:1 over the hairline -- both failing. */
  --rule:       #DAD9CE;
  --rule-soft:  #E8E5DB;
  --oxblood:    #7A2B1C;
  --oxblood-bg: #FBF1EE;
  --terracotta: #A64B2A;
  --gold:       #8A6612;
  --gold-bg:    #F7F0DC;
  /* The brand CTA gradient as published is linear-gradient(46.371deg,#21A9D9,#1D84C7).
     Measured on rendered staging, white body copy over those stops is 2.71:1
     and 4.06:1 -- both under the 4.50 AA floor for normal text, and the light
     stop is under the 3.00 floor even for large text. The angle, the square
     corners and the hue are the brand's; the stops are darkened to the point
     where white clears AA across the whole sweep (5.32:1 and 8.58:1). This is
     a finding about the shared component, not a preference -- see the build
     report. Revert only with a decision about the band's text colour. */
  --brand:      #134F7E;
  --brand-2:    #177399;
  --brand-pub:  #1D84C7;   /* the published brand blue, kept for reference */

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:    'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --measure: 720px;
  --pad: clamp(18px, 5vw, 44px);

  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(16px, 0.98rem + 0.14vw, 18px);
  line-height: 1.62;
  /* Zero horizontal overflow at 360px is a hard requirement; the ruler and the
     deadline table each scroll inside their own box instead. */
  overflow-x: clip;
}
.cdl, .cdl * { box-sizing: border-box; }
.cdl img, .cdl svg { max-width: 100%; }
/* DEFECT FOUND ON RENDERED STAGING: the theme ships
     a, .entry-content a, .post-content a, .page-content a, article a,
     .content-area a { color: #1a6bb5 !important }
   in a head <style>. This page renders inside .entry-content, so every link on
   it was repainted theme blue -- including the hero call-to-action, which came
   out at 1.04:1 against its terracotta ground and was effectively invisible.
   Beating an !important declaration needs !important back, at higher
   specificity: [href] adds an attribute selector, taking these to (0,2,1)
   against the theme's (0,1,1). Every link colour on this page is therefore
   written with [href] and !important. That is not decoration -- remove it and
   the hero CTA disappears again. */
.cdl a { text-underline-offset: 0.18em; }
.cdl a[href] { color: var(--oxblood) !important; }
.cdl a[href]:hover { color: var(--terracotta) !important; }

.cdl-sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.cdl-seed { display: none !important; }

/* -- the mono chart-label kicker (S1: aria-hidden, real heading beneath) ---- */
.cdl .cdl-kick {
  font-family: var(--mono);
  font-size: clamp(10px, 0.68rem, 11.5px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 0.55rem;
  display: inline-block;
  padding: 0.28em 0.7em 0.24em;
  background: var(--paper-lite);
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  line-height: 1.35;
  max-width: 100%;
}
.cdl-sec-kick { margin-top: 2.6rem; }

/* -- headings -------------------------------------------------------------- */
.cdl h1, .cdl h2, .cdl h3 { font-family: var(--display); font-weight: 600; color: var(--ink); }
.cdl h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem); line-height: 1.16; margin: 0.1rem 0 0.8rem; letter-spacing: -0.01em; }
.cdl h3 { font-size: clamp(1.16rem, 1rem + 0.6vw, 1.42rem); line-height: 1.24; margin: 1.6rem 0 0.5rem; }

/* ==========================================================================
   BEAT 1 -- the hero
   ========================================================================== */
.cdl-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(30px, 6vw, 76px) var(--pad) clamp(28px, 5vw, 60px);
  border-bottom: 1px solid var(--rule);
  background:
    linear-gradient(180deg, var(--paper-lite), var(--paper) 62%),
    repeating-linear-gradient(0deg, transparent, transparent 33px, var(--rule-soft) 33px, var(--rule-soft) 34px);
}
.cdl-hero-copy { min-width: 0; }
.cdl-h1 {
  font-size: clamp(2.05rem, 1.2rem + 4.1vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -0.024em;
  margin: 0.2rem 0 0.9rem;
  text-wrap: balance;
}
.cdl-dek {
  font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.2rem);
  color: var(--ink-2);
  max-width: 34em;
  margin: 0 0 1.2rem;
}
.cdl .cdl-byline {
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1.4rem;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1rem;
}
.cdl .cdl-byline a { color: var(--ink-2); }
.cdl-hero-cue a, .cdl-bob a {
  display: inline-block;
  font-family: var(--mono); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #FFFFFF; background: var(--terracotta);
  padding: 0.85em 1.3em; text-decoration: none;
  border: 1px solid var(--terracotta);
}
.cdl-hero-cue a:hover, .cdl-bob a:hover { background: #8E3D1F; border-color: #8E3D1F; color: #FFFFFF; }

/* the growth ruler ------------------------------------------------------- */
/* The ruler is drawn at 420x600 and scales to its box, so without a cap it
   grows to whatever the hero column is -- at 1440 that made it 1276px tall,
   pushed the hero past the fold and slid the notice chip up under the fixed
   masthead. Measured on rendered staging. The cap is what keeps the set piece
   a set piece instead of a wall. */
.cdl-hero-ruler-wrap { margin: 0 auto; min-width: 0; max-width: 460px; }
.cdl .cdl-chip {
  display: inline-block;
  font-family: var(--mono); font-size: clamp(9.5px, 0.64rem, 11px); font-weight: 600;
  letter-spacing: 0.09em; color: #FFFFFF; background: var(--oxblood);
  padding: 0.5em 0.85em; margin: 0 0 0.85rem; line-height: 1.3;
}
.cdl-ruler { width: 100%; height: auto; display: block; overflow: visible; }
.cdl-spine { stroke: var(--ink); stroke-width: 1.4; }
.cdl-tick { stroke: var(--rule); stroke-width: 1; }
.cdl-tick.is-major { stroke: var(--ink-2); stroke-width: 1.4; }
.cdl-age { font-family: var(--mono); font-size: 12px; fill: var(--ink-2); text-anchor: end; }
.cdl-band { fill: var(--gold-bg); stroke: var(--gold); stroke-width: 1; }
.cdl-band-l { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; fill: var(--gold); }
.cdl-mark-dead line { stroke: var(--oxblood); stroke-width: 2.2; }
.cdl-mark-dead text { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; fill: var(--oxblood); }
.cdl-mark-today circle { fill: var(--gold); }
.cdl-mark-today line { stroke: var(--gold); stroke-width: 2.2; }
.cdl-mark-today text { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; fill: var(--gold); }
.cdl .cdl-ruler-cap {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em;
  color: var(--muted); margin: 0.7rem 0 0; line-height: 1.5;
}

/* THE ONE SET PIECE (house rule 5): the ruler draws itself in. The finished
   frame is what the server sends; .is-draw takes it away for one beat and
   .is-drawn gives it back, so nothing ever loads hidden. */
.cdl-hero-ruler.is-draw .cdl-tick,
.cdl-hero-ruler.is-draw .cdl-spine { opacity: 0; }
.cdl-hero-ruler.is-draw .cdl-mark-dead,
.cdl-hero-ruler.is-draw .cdl-band,
.cdl-hero-ruler.is-draw .cdl-band-l { opacity: 0; }
.cdl-hero-ruler.is-drawn .cdl-spine { opacity: 1; transition: opacity 0.42s ease-out; }
.cdl-hero-ruler.is-drawn .cdl-tick {
  opacity: 1; transition: opacity 0.34s ease-out;
  transition-delay: calc(120ms + var(--i) * 26ms);
}
.cdl-hero-ruler.is-drawn .cdl-mark-dead {
  opacity: 1; transition: opacity 0.4s ease-out;
  transition-delay: calc(760ms + var(--i) * 160ms);
}
.cdl-hero-ruler.is-drawn .cdl-band,
.cdl-hero-ruler.is-drawn .cdl-band-l {
  opacity: 1; transition: opacity 0.5s ease-out; transition-delay: 1140ms;
}

/* The masthead is position:fixed on desktop and the page content starts at
   y=0 behind it, so the first thing in the hero is whatever the masthead does
   not cover. Measured on rendered staging: the masthead is 94px tall at 1440
   and 150px at 1100 (the nav wraps), and the notice chip -- the most urgent
   line on the page -- was sliding underneath it at both. Below 1001px the
   masthead is position:relative and the theme already reserves the space, so
   this correction is scoped to the widths where it is actually fixed. */
@media (min-width: 1001px) { .cdl-hero { padding-top: 190px; } }
@media (min-width: 1280px) { .cdl-hero { padding-top: 170px; } }

/* Same trap, second form: an in-page anchor scrolls its target to y=0, i.e.
   behind the fixed masthead. Every jump on this page -- the TOC rail, the
   article's own contents list, the authority cites in a result -- lands on an
   [id] inside .cdl, so they all reserve the masthead's height. */
@media (min-width: 1001px) { .cdl [id] { scroll-margin-top: 170px; } }
@media (min-width: 1280px) { .cdl [id] { scroll-margin-top: 118px; } }

/* ==========================================================================
   BEAT 2 -- tiles and lede
   ========================================================================== */
.cdl-orient { padding: clamp(30px, 5vw, 60px) var(--pad); border-bottom: 1px solid var(--rule); }
.cdl-tiles {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  max-width: 1080px; margin: 0 auto;
}
.cdl-tile { background: var(--card); padding: 1.35rem 1.2rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.cdl-tile b {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); line-height: 1.05;
  color: var(--gold); letter-spacing: -0.015em;
}
.cdl-tile-red b { color: var(--oxblood); }
.cdl-tile span { font-size: 0.92rem; color: var(--ink-2); line-height: 1.45; }
.cdl-tile i {
  font-family: var(--mono); font-style: normal; font-size: 0.66rem;
  letter-spacing: 0.06em; color: var(--muted); margin-top: auto; padding-top: 0.5rem;
}
.cdl-lede { max-width: var(--measure); margin: clamp(24px, 4vw, 44px) auto 0; }
.cdl-lede p { margin: 0 0 1rem; font-size: clamp(1.02rem, 0.97rem + 0.35vw, 1.14rem); }
.cdl-bob { text-align: center; margin: 1.8rem 0 0; }
.cdl-bob a { animation: cdl-bob 2.6s ease-in-out 1.2s 3; }
@keyframes cdl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* io-reveal -- verbatim from design-kit/snippets/io-reveal.css, scoped. */
.cdl .io-wait { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.cdl .io-wait.io-in { opacity: 1; transform: none; }
.cdl .cdl-reveal.io-wait { transition-delay: calc(var(--i, 0) * 42ms); }

/* ==========================================================================
   BEAT 3 -- the finder
   ========================================================================== */
.cdl-finder { padding: clamp(32px, 5vw, 64px) var(--pad); border-bottom: 1px solid var(--rule); background: var(--paper-lite); }
.cdl-finder > .cdl-kick, .cdl-finder-h { max-width: var(--measure); margin-left: auto; margin-right: auto; display: block; width: fit-content; }
.cdl-finder-h { width: auto; max-width: var(--measure); margin: 0.1rem auto 1.4rem; }
.cdl-stage {
  max-width: var(--measure); margin: 0 auto;
  background: var(--card); border: 1px solid var(--rule);
  border-top: 3px solid var(--terracotta);
  padding: clamp(20px, 3.5vw, 34px);
}
.cdl-intro p { margin: 0 0 0.7rem; }
.cdl .cdl-privacy { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); }

/* the no-JS final state ---------------------------------------------------- */
.cdl-quick { border: 1px solid var(--rule); background: var(--paper-lite); padding: 1.1rem 1.15rem; margin: 1.2rem 0 0; }
.cdl-quick h3 { margin: 0.3rem 0 0.7rem; font-size: 1.12rem; }
.cdl-quick ul { list-style: none; margin: 0; padding: 0; }
.cdl-quick li { border-top: 1px solid var(--rule-soft); padding: 0.6rem 0; font-size: 0.95rem; }
.cdl-quick li:first-child { border-top: 0; padding-top: 0; }
.cdl-quick li b { color: var(--oxblood); }
.cdl-quick li span {
  display: block; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.05em; color: var(--muted); margin-top: 0.2rem;
}
.cdl .cdl-quick-more { margin: 0.9rem 0 0; font-size: 0.88rem; }
.cdl .cdl-nojs-note { display: none; }

/* .cdl-nojs is what the server sends; the inline data-nowprocket script swaps
   it for .cdl-js before Delay JS can hold anything back. Both states are
   seeded in the served HTML so RUCSS keeps both rule sets. */
.cdl-nojs .cdl-card-q,
.cdl-nojs .cdl-card-q.is-on,
.cdl-nojs .cdl-prog,
.cdl-nojs .cdl-stage-nav,
.cdl-nojs .cdl-result { display: none; }
.cdl.cdl-nojs .cdl-nojs-note {
  display: block; margin: 1.1rem 0 0;
  font-size: 0.9rem; color: var(--ink-2);
  border-left: 3px solid var(--rule); padding-left: 0.85rem;
}
.cdl-js .cdl-quick { display: none; }

.cdl-prog { margin: 1.4rem 0 0.4rem; }
.cdl .cdl-prog-t { font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 0.4rem; }
.cdl-prog-bar { display: block; height: 2px; background: var(--rule); margin: 0; }
.cdl-prog-bar i { display: block; height: 100%; width: var(--p, 25%); background: var(--terracotta); transition: width 0.32s ease-out; }

.cdl-card-q { border: 0; margin: 0; padding: 1.1rem 0 0; display: none; min-width: 0; }
.cdl-card-q.is-on { display: block; }
.cdl .cdl-q {
  font-family: var(--display); font-size: clamp(1.18rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.2; margin: 0 0 0.9rem; outline: none;
}
.cdl-q:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; }
.cdl .cdl-helper { font-size: 0.92rem; color: var(--oxblood); margin: -0.5rem 0 0.9rem; }
.cdl-opts { display: grid; gap: 0.55rem; }
.cdl-opts-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.cdl-opts button {
  font-family: var(--sans); font-size: 0.98rem; line-height: 1.4;
  text-align: left; padding: 0.95rem 1rem; min-height: 56px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 0; cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.cdl-opts button:hover { border-color: var(--terracotta); background: #FDF7F3; }
.cdl-opts button:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.cdl-opts button.is-sel { background: var(--terracotta); border-color: var(--terracotta); color: #FFFFFF; font-weight: 700; }
.cdl-opts button.is-quiet { color: var(--ink-2); background: var(--paper-lite); }

.cdl-dategroup { margin: 0 0 1.2rem; }
.cdl .cdl-datelabel { font-weight: 600; margin: 0 0 0.5rem; }
.cdl-datefields { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
.cdl-datefields label { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.cdl-datefields span { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cdl-datefields select, .cdl-datefields input {
  font-family: var(--mono); font-size: 1rem; padding: 0.6rem 0.65rem;
  border: 1px solid var(--rule); border-radius: 0; background: var(--card); color: var(--ink);
  min-height: 48px; max-width: 100%;
}
.cdl-datefields input[data-f="d"] { width: 6.5em; }
.cdl-datefields input[data-f="y"] { width: 8em; }
.cdl .cdl-dayhint { font-size: 0.86rem; color: var(--ink-2); margin: 0 0 0.9rem; }
.cdl .cdl-err { color: var(--oxblood); font-weight: 600; margin: 0 0 0.7rem; min-height: 1.2em; }
.cdl-next, .cdl-back, .cdl-restart {
  font-family: var(--mono); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.9em 1.4em; min-height: 48px; cursor: pointer; border-radius: 0;
}
.cdl-next { background: var(--terracotta); border: 1px solid var(--terracotta); color: #FFFFFF; }
.cdl-next:hover { background: #8E3D1F; border-color: #8E3D1F; }
.cdl-back, .cdl-restart { background: transparent; border: 1px solid var(--rule); color: var(--ink-2); }
.cdl-back:hover, .cdl-restart:hover { border-color: var(--terracotta); color: var(--terracotta); }
.cdl-stage-nav { display: flex; gap: 0.6rem; margin: 1.4rem 0 0; }

/* the result --------------------------------------------------------------- */
.cdl-result { display: none; }
.cdl-result.is-on { display: block; padding-top: 0.6rem; }
.cdl-result-kick { margin-top: 0; }
.cdl-result-h {
  font-family: var(--display); font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem);
  line-height: 1.16; margin: 0.2rem 0 1.1rem; outline: none;
}
.cdl-result-h:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; }

.cdl-first { border: 2px solid var(--oxblood); background: var(--oxblood-bg); padding: 1.1rem 1.15rem; margin: 0 0 1.3rem; }
.cdl .cdl-first-k { font-family: var(--mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; color: var(--oxblood); margin: 0 0 0.4rem; }
.cdl-first-d { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.cdl .cdl-first-d span { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.cdl .cdl-first-d b {
  font-family: var(--mono); font-weight: 600; color: var(--oxblood);
  font-size: clamp(1.35rem, 1rem + 2vw, 2.1rem); line-height: 1.1; letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
.cdl .cdl-first-n { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--ink-2); }
.cdl-first.is-urgent { background: #F7E7E2; }

.cdl-card { border: 1px solid var(--rule); background: var(--card); padding: 1.1rem 1.15rem; margin: 0 0 1rem; }
.cdl-card.is-urgent { border-color: var(--oxblood); border-left-width: 4px; }
.cdl-card-h { font-size: 1.1rem; margin: 0.15rem 0 0.55rem; }
.cdl-card p { margin: 0 0 0.7rem; }
.cdl-card p:last-child { margin-bottom: 0; }
.cdl-card strong { color: var(--oxblood); }
.cdl-card-parents { background: var(--paper-lite); }
.cdl-card-gov { border-left: 4px solid var(--oxblood); }
.cdl-card-quiet { background: var(--paper-lite); border-color: var(--rule); }
.cdl-card-quiet strong { color: var(--ink); }

.cdl-ruler-wrap { margin: 1.2rem 0; max-width: 100%; overflow-x: auto; }
.cdl-ruler-result { min-width: 300px; }

.cdl .cdl-auth {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em;
  color: var(--ink-2); margin: 1.1rem 0 0.8rem; line-height: 1.9;
  overflow-wrap: break-word;
}
.cdl .cdl-auth-k { display: block; font-weight: 600; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 0.2rem; }
.cdl .cdl-auth i { color: var(--rule); font-style: normal; padding: 0 0.15em; }
.cdl .cdl-latest { font-size: 0.9rem; color: var(--ink-2); border-left: 3px solid var(--gold); padding-left: 0.85rem; margin: 1.1rem 0; }
.cdl .cdl-microdisc { font-size: 0.82rem; color: var(--muted); margin: 0.7rem 0 0; }

.cdl-cta { background: var(--paper-lite); border: 1px solid var(--rule); padding: 1.2rem 1.15rem; margin: 1.3rem 0 0; }
.cdl-cta h3 { margin: 0 0 0.55rem; font-size: 1.16rem; }
.cdl-cta p { margin: 0 0 0.9rem; }
.cdl-cta.is-quiet { border-color: var(--rule); background: var(--paper); }
.cdl-cta-btns { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
.cdl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(46.371deg, var(--brand-2), var(--brand));
  /* see --brand-2 / --brand: the stops are the brand gradient darkened to
     clear AA. Angle, square corners and hue are the brand component's. */
  color: #FFFFFF; text-decoration: none;
  border: 0; border-radius: 0;                    /* SQUARE corners -- brand trait */
  min-height: 56px; padding: 0 1.6rem;
  font-family: var(--sans); font-weight: 700; font-size: 0.94rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cdl-btn:hover { color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(29, 132, 199, 0.35); }
.cdl-btn-2 { background: transparent; border: 1px solid var(--ink); }
.cdl-btn-2:hover { background: var(--ink); box-shadow: none; }

/* Link colours, re-asserted over the theme's !important rule (see above). */
.cdl .cdl-btn[href] { color: #FFFFFF !important; }
.cdl .cdl-btn-2[href] { color: var(--ink) !important; }
.cdl .cdl-btn-2[href]:hover { color: #FFFFFF !important; }
.cdl .cdl-hero-cue a[href], .cdl .cdl-bob a[href] { color: #FFFFFF !important; }
.cdl .cdl-toc a[href] { color: var(--ink-2) !important; }
.cdl .cdl-toc a[href]:hover { color: var(--terracotta) !important; }
.cdl .cdl-byline a[href] { color: var(--ink-2) !important; }

/* CallRail's swap.js stamps .crjs on <html> and the theme's CLS fix then runs
     .crjs a[href^="tel:"] { display: inline-block !important; ... }
   which strips this button's flex centring and drops its label to the top of a
   56px box. Measured on rendered staging after the swap. (0,3,1) beats the
   theme's (0,2,1), so the centring survives the swap. */
.cdl .cdl-btn[href^="tel:"] { display: inline-flex !important; align-items: center !important; }

/* A7 crossfade between cards, with the A9 no-tween guard: the class is
   removed, the layout is flushed, and only then is it put back, so a
   programmatic repaint never inherits a half-finished transition. */
.cdl-fade { animation: cdl-fade 0.26s ease-out; }
@keyframes cdl-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.cdl-disclaimer { max-width: var(--measure); margin: 1.6rem auto 0; }
.cdl-disclaimer p { font-size: 0.88rem; color: var(--ink-2); margin: 0; }

/* ==========================================================================
   BEAT 4 -- the article
   ========================================================================== */
.cdl-body {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, var(--measure));
  gap: clamp(24px, 4vw, 56px);
  justify-content: center;
  padding: clamp(30px, 5vw, 60px) var(--pad);
}
.cdl-toc { position: sticky; top: 118px; align-self: start; max-height: calc(100vh - 150px); overflow-y: auto; }
.cdl-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.cdl-toc li { margin: 0; }
.cdl-toc a {
  display: block; padding: 0.4rem 0 0.4rem 0.8rem; margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 0.84rem; line-height: 1.35; color: var(--ink-2); text-decoration: none;
}
.cdl-toc a:hover { border-left-color: var(--terracotta); color: var(--terracotta); }

.cdl-article { min-width: 0; max-width: var(--measure); }
.cdl-article p, .cdl-article li { font-size: clamp(1rem, 0.96rem + 0.28vw, 1.1rem); }
.cdl-article p { margin: 0 0 1.1rem; }
.cdl-article > ul { margin: 0 0 1.4rem; padding-left: 1.2rem; }
.cdl-article h2 { margin: 0.2rem 0 0.9rem; }
.cdl-article h3 { margin: 1.9rem 0 0.6rem; }
/* The article's own inline table of contents is redundant with the sticky
   rail on a wide screen, and is the only way to navigate on a narrow one. */
@media (min-width: 981px) { .cdl-article > ul:first-of-type { display: none; } }

.cdl-article blockquote {
  margin: 1.3rem 0; padding: 1.1rem 1.2rem;
  background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--gold);
}
.cdl-article blockquote p { margin: 0; font-size: 0.98rem; color: var(--ink-2); }
.cdl .cdl-table-pointer {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.02em;
  background: var(--gold-bg); border: 1px solid var(--gold);
  padding: 0.75rem 0.9rem; margin: 0 0 1.2rem !important; line-height: 1.6;
}

.cdl-tablewrap { overflow-x: auto; margin: 0 0 1.6rem; border: 1px solid var(--rule); background: var(--card); }
.cdl-article table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 0.9rem; }
.cdl-article th, .cdl-article td { padding: 0.7rem 0.8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule-soft); }
.cdl-article th {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2);
  background: var(--paper-lite); border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.cdl-article tbody tr:last-child td { border-bottom: 0; }

.cdl-faq { border-top: 1px solid var(--rule); padding: 0.2rem 0; }
.cdl-faq summary {
  font-family: var(--display); font-size: 1.06rem; font-weight: 600;
  padding: 0.85rem 0; cursor: pointer; list-style-position: outside;
}
.cdl-faq summary:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.cdl-faq p { margin: 0 0 1rem; color: var(--ink-2); }

/* ==========================================================================
   BEAT 5 -- the decision tree
   ========================================================================== */
.cdl-tree { padding: clamp(30px, 5vw, 60px) var(--pad); background: var(--paper-lite); border-top: 1px solid var(--rule); }
.cdl-tree > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.cdl-tree > p { margin-bottom: 1.2rem; }
.cdl-tree-d { border: 1px solid var(--rule); background: var(--card); }
.cdl-tree-d > summary {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 1.05rem 1.15rem; cursor: pointer; color: var(--terracotta);
}
.cdl-tree-d > summary:focus-visible { outline: 2px solid var(--terracotta); outline-offset: -3px; }
.cdl-tree-body { padding: 0 1.15rem 1.2rem; border-top: 1px solid var(--rule); }
.cdl-tree-body h3 { font-size: 1.06rem; margin: 1.4rem 0 0.5rem; }
.cdl-tree-body ul { margin: 0; padding-left: 1.2rem; }
.cdl-tree-body li { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--ink-2); }
.cdl-tree-body li b { color: var(--ink); }

/* ==========================================================================
   BEAT 6 -- method, attorney notice, CTA band
   ========================================================================== */
.cdl-method { padding: clamp(30px, 5vw, 60px) var(--pad); border-top: 1px solid var(--rule); }
.cdl-method > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.cdl-cites { list-style: none; margin: 1.2rem auto; padding: 0; }
.cdl-cites li { border-top: 1px solid var(--rule-soft); padding: 0.55rem 0; font-size: 0.92rem; color: var(--ink-2); }
.cdl-cites li b { font-family: var(--mono); font-size: 0.8rem; color: var(--ink); letter-spacing: 0.02em; }
.cdl .cdl-attorney {
  border: 1px solid var(--rule); background: var(--card);
  padding: 0.95rem 1.05rem; font-size: 0.9rem; color: var(--ink-2);
}

.cdl-band-cta {
  background: linear-gradient(46.371deg, var(--brand-2), var(--brand));
  color: #FFFFFF; padding: clamp(34px, 5vw, 64px) var(--pad);
  border-radius: 0;                                /* SQUARE corners -- brand trait */
}
.cdl-band-cta > div { max-width: var(--measure); margin: 0 auto; }
.cdl-band-cta h2 { color: #FFFFFF; }
.cdl-band-cta p { color: #FFFFFF; }
.cdl-band-cta .cdl-kick { color: #FFFFFF; background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); }
.cdl-band-cta .cdl-btn { background: #FFFFFF; }
.cdl-band-cta .cdl-btn:hover { background: #FFFFFF; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24); }
.cdl-band-cta .cdl-btn-2 { background: transparent; border: 1px solid #FFFFFF; }
.cdl-band-cta .cdl-btn-2:hover { background: #FFFFFF; }
/* 6.78:1 on white; the published brand blue would be 4.06:1 and fail. */
.cdl .cdl-band-cta .cdl-btn[href] { color: #14608F !important; }
.cdl .cdl-band-cta .cdl-btn-2[href] { color: #FFFFFF !important; }
.cdl .cdl-band-cta .cdl-btn-2[href]:hover { color: #14608F !important; }

/* ==========================================================================
   Narrow screens. Every stack collapses to one column; nothing scrolls
   sideways except the deadline table and the result ruler, each in its own box.
   ========================================================================== */
@media (max-width: 980px) {
  .cdl-hero { grid-template-columns: minmax(0, 1fr); }
  .cdl-hero-ruler-wrap { max-width: 420px; }
  .cdl-body { grid-template-columns: minmax(0, 1fr); }
  .cdl-toc { position: static; max-height: none; display: none; }
}
@media (max-width: 560px) {
  .cdl-tiles { grid-template-columns: minmax(0, 1fr); }
  .cdl-cta-btns { flex-direction: column; }
  .cdl-btn { width: 100%; }
  .cdl-stage-nav { flex-direction: column; }
  .cdl-stage-nav button { width: 100%; }
  .cdl-datefields label { flex: 1 1 100%; }
  .cdl-datefields select, .cdl-datefields input,
  .cdl-datefields input[data-f="d"], .cdl-datefields input[data-f="y"] { width: 100%; }
}

/* ==========================================================================
   Reduced motion: designed FINAL frames, never a blank or mid-animation state.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cdl .io-wait { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cdl-hero-ruler.is-draw .cdl-tick,
  .cdl-hero-ruler.is-draw .cdl-spine,
  .cdl-hero-ruler.is-draw .cdl-mark-dead,
  .cdl-hero-ruler.is-draw .cdl-band,
  .cdl-hero-ruler.is-draw .cdl-band-l { opacity: 1 !important; }
  .cdl-hero-ruler .cdl-tick,
  .cdl-hero-ruler .cdl-mark-dead,
  .cdl-hero-ruler .cdl-band,
  .cdl-hero-ruler .cdl-band-l,
  .cdl-hero-ruler .cdl-spine { transition: none !important; }
  .cdl-fade { animation: none !important; }
  .cdl-bob a { animation: none !important; }
  .cdl-prog-bar i { transition: none !important; }
  .cdl-btn { transition: none !important; }
}

/* print: the finder is interactive and cannot print; the rules can. */
@media print {
  .cdl-stage, .cdl-toc, .cdl-hero-cue, .cdl-bob { display: none !important; }
}