/* ==========================================================================
   Design system v2, the learner information family:

     /applying-for-the-leaner-permit   (the typo is the live URL)
     /driving-test
     /learn-to-drive-in-dublin
     /top-5-mistakes-dublin-drivers-make

   Loaded after tokens.css and school.css by base.njk when a page declares
   designSheet: "info". It owns nothing another family owns: every rule here
   either re-points a school.css device at a reading page or styles a plain
   element inside one.

   WHY THERE ARE NO NEW CLASS NAMES IN THIS FILE.
   The sm- vocabulary belongs to the system, and a second set of names for one
   family is how a design system rots. So this sheet hooks on data- attributes
   and on element selectors inside the sm- modules. The attributes are styling
   hooks only: no script reads one, and none reuses a JS contract name from
   interactive-hooks.md.

   The hooks, all on markup in the four templates above:
     [data-info="hero"]        the hero, held to a reading measure
     [data-info="hero-title"]  /driving-test only: its opening h2 at hero scale
     [data-info="article"]     a reading section: measure, rhythm, lists
     [data-info="steps"]       the numbered road list used as a process
     [data-info="ticks"]       a tick list, green outlined discs
     [data-info="checklist"]   the paper checklist, I4, the one light surface
     [data-info="alert"]       the amber caution block, the honest catch
     [data-info="tip"]         the green-ruled practical tip panel
     [data-info="table"]       a real data table, the one shape a card loses
     [data-info="figures"]     cards whose figure leads at display size
     [data-info="rules"]       a negative checklist beside a positive one
     [data-info="statement"]   one sentence and one action, centred
     [data-info="roadline"]    the grey dashed road line as a section opener
     [data-info="road"]        a split holding copy beside a photograph
     [data-info="mark"]        the live page's own card icon glyph
     [data-info="note"]        a bordered aside inside a reading section
     [data-info="footnote"]    a source line under a figure grid
     [data-info="band"]        the closing call band's measure
     [data-info-cols="N"]      the column count, picked from the ITEM count
     [data-info-tone="..."]    deny / allow / caution, the live colour coding

   THE COLUMN COUNT IS NOT auto-fit's TO PICK. Finding 17: auto-fit chooses
   columns from the available width, which put five cards into four columns and
   stranded the fifth. Every grid here declares the count its item count wants,
   and the counts are 2, 3, 4 and 5 (five goes to three, so the rows are 3 and
   2). Below the tablet break the school.css auto-fit base takes over again, so
   these rules are min-width only and no specificity fight is possible.
   ========================================================================== */

/* ---------- 1. The hero ---------- */

/* One column, not the town hero's 1.5fr/0.5fr: an information page has no
   pricing aside to put in the second track, and an empty track pushes the
   heading off centre. Route is the exception, because its photograph IS the
   second track. Both variants are named in the collapse below, because a
   two-selector rule out-specifies a one-selector one at every width
   (finding 20). */
[data-info="hero"] .sm-hero__grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  min-height: 520px;
}
.sm-hero--route[data-info="hero"] .sm-hero__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  align-items: center;
}

[data-info="hero"] .sm-hero__grid > div:first-child { max-width: 46rem; }
[data-info="hero"] .sm-crumb { padding-top: 0; margin-bottom: var(--space-12); }

/* These pages are read, so the standfirst is the only copy above the fold and
   takes the step above body size. */
[data-info="hero"] .sm-lede {
  max-width: 48ch;
  margin-bottom: var(--space-16);
  font-size: clamp(18px, 1.6vw, 22px);
}

/* /driving-test has no h1 and gains none here: its opening heading is an h2 on
   the live page and stays an h2, which is recorded as finding 3 and settled
   with the owner rather than silently. It is set at hero scale so the page
   still opens on a headline rather than on a section title. The line height is
   deliberately inside the 1.08 ceiling the conformance gate holds every h2 to. */
[data-info="hero-title"] {
  max-width: 24ch;
  font-size: var(--fs-hero-a);
  line-height: 1.02;
  letter-spacing: var(--ls-tight);
}

@media (max-width: 768px) {
  [data-info="hero"] .sm-hero__grid,
  .sm-hero--route[data-info="hero"] .sm-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-info="hero"] .sm-hero__grid { min-height: 0; }
}

/* ---------- 2. A reading section ---------- */

/* Running copy is held to a measure. The headings are not: a heading that
   wraps early reads as a caption, which is fix number one in the pack's own
   list of what made v1 flat. */
[data-info="article"] .sm-lede { margin-bottom: var(--space-20); }
[data-info="article"] .sm-prose p {
  margin: 0 0 var(--space-12);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-body);
}
[data-info="article"] .sm-prose p:last-child { margin-bottom: 0; }

/* A subsection heading inside running copy. Not uppercase: caps at 22px beside
   body copy reads as a label rather than a heading. */
[data-info="article"] .sm-prose h3 {
  margin: var(--space-20) 0 var(--space-6);
  text-transform: none;
  color: var(--color-text);
}

/* A section intro has room above it, so it never sits flush against the
   heading (page quality rule 20). */
[data-info="article"] > .sm-wrap > h2 + .sm-lede { margin-top: var(--space-12); }

/* ---------- 3. The numbered road list, used as a process ---------- */

/* The stops module carries a town's pickup list, where each stop is one line.
   Here each stop is a step with its own heading and up to two paragraphs, so
   the rhythm opens up and the copy takes reading size. */
[data-info="steps"] { margin-top: var(--space-24); max-width: 62ch; }
[data-info="steps"] .sm-stop { margin-bottom: var(--space-24); }
[data-info="steps"] .sm-stop:last-child { margin-bottom: 0; }
[data-info="steps"] .sm-stop h3 { margin: 0 0 var(--space-5); color: var(--color-text); }
[data-info="steps"] .sm-stop p {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-body);
}
[data-info="steps"] .sm-stop p:last-child { margin-bottom: 0; }
[data-info="steps"] .sm-stop a {
  color: var(--color-accent);
  font-weight: var(--fw-medium);
  text-underline-offset: 3px;
}

/* The roundel is punched out of the road line by a border in the page ground,
   so on a Surface section it has to be the Surface colour or the punch shows
   as a black ring. */
.sm-section--surface [data-info="steps"] .sm-stop__num { border-color: var(--color-panel); }
.sm-section--deep [data-info="steps"] .sm-stop__num { border-color: var(--color-bg-deep); }

/* ---------- 4. Tick lists ---------- */

/* The pack's reassurance line: a 24px green outlined disc, then the line. A
   hanging indent, not a grid: display:grid on a list item puts every inline
   child in its own cell, which sets a sentence containing a link one word per
   line. */
[data-info="ticks"] {
  max-width: 62ch;
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
}
[data-info="ticks"] li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--rsa-line-08);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-body);
}
[data-info="ticks"] li:last-child { border-bottom: 0; }
[data-info="ticks"] li::before {
  content: "✓";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-round);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-accent);
}

/* ---------- 5. The paper checklist (I4) ---------- */

/* The pack's only light surface, and the only tilted object on these pages. A
   red header strip opens it, the rows are a hairline apart, and the box is
   drawn rather than written: the live markup put a tick glyph in a text node
   in every row, and the glyph is furniture the system redraws. */
[data-info="checklist"] {
  max-width: 740px;
  margin-top: var(--space-24);
  border-radius: var(--radius-md);
  background: var(--rsa-chalk);
  color: var(--rsa-road-black);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
  /* The checklist's own tilt, from the pack. Not a token: the sign tokens are
     the sign's measurements and this is a different object. */
  transform: rotate(1.5deg);
  overflow: hidden;
}
[data-info="checklist"] > div:first-child {
  height: 14px;
  background: var(--rsa-red);
}
[data-info="checklist"] ul {
  margin: 0;
  padding: var(--space-9) var(--pad-card) var(--space-12);
  list-style: none;
}
[data-info="checklist"] li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-6) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--rsa-road-black);
}
[data-info="checklist"] li:last-child { border-bottom: 0; }
[data-info="checklist"] li::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 2px solid var(--rsa-road-black);
  border-radius: var(--radius-sm);
}

/* ---------- 6. The amber caution block ---------- */

/* The honest catch. The pack gives amber to caution content and to nothing
   else, and the live page already set this rule change on amber. It is a block
   inside the section whose lane marker it sits under, not a section of its
   own: it has no label of its own, and inventing one would be writing copy. */
[data-info="alert"] {
  max-width: 800px;
  margin-top: var(--space-24);
  padding: var(--space-16) var(--space-20);
  border-left: 5px solid var(--rsa-amber);
  background: rgba(255, 174, 59, 0.1);
}
[data-info="alert"] h3 {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0 0 var(--space-6);
  font-size: var(--fs-h4);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--rsa-amber);
}
[data-info="alert"] p {
  margin: 0;
  max-width: 68ch;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-body);
}

/* ---------- 7. The practical tip panel ---------- */

/* Advice, so green: the pack's green means "this is the good bit". A left rule
   rather than a shadow, because a shadow belongs to an object and this is a
   panel. */
[data-info="tip"] {
  margin: var(--space-20) 0 0;
  padding: var(--space-14) var(--space-16);
  border: 1px solid var(--rsa-line-08);
  border-left: 5px solid var(--color-accent);
  background: var(--color-panel-raised);
}
[data-info="tip"] > span:first-child {
  display: block;
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-accent);
}
[data-info="tip"] p {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-body);
}
[data-info="tip"] a { color: var(--color-accent); text-underline-offset: 3px; }

/* On a Surface section the raised panel is the next step up, and on Road Black
   it is Surface, so the panel always reads as lifted off its own ground. */
.sm-section--surface [data-info="tip"] { background: var(--color-bg-deep); }

/* ---------- 8. Tables ---------- */

/* The cost table stays a table. Eight rows of figures against labels are a
   comparison, and turning rows into cards loses it. The wrapper scrolls rather
   than the page. */
[data-info="table"] {
  max-width: 740px;
  margin-top: var(--space-20);
  overflow-x: auto;
}
[data-info="table"] table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-deep);
  border: 1px solid var(--rsa-line-08);
}
[data-info="table"] th {
  padding: var(--space-10) var(--space-12);
  border-bottom: 1px solid var(--rsa-line-16);
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: left;
  color: var(--color-text);
}
[data-info="table"] td {
  padding: var(--space-10) var(--space-12);
  border-bottom: 1px solid var(--rsa-line-08);
  font-size: var(--fs-body-sm);
  line-height: 1.45;
  color: var(--color-text-body);
}
[data-info="table"] td:first-child { color: var(--color-text); font-weight: var(--fw-medium); }
[data-info="table"] tbody tr:last-child td { border-bottom: 0; }

/* The fare column is the perforation side of a ticket: a dashed rule separates
   what it is from what it costs, which is the pack's rule for every price on
   the site. */
[data-info="table"] [data-col="fare"] {
  border-left: 2px dashed var(--rsa-line-16);
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

/* The total is the figure the page is actually about, so it is set at display
   size. Real numbers, big: the figure is the live page's own, nothing is
   rounded and nothing is added. */
[data-info="table"] tr[data-row="total"] td {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  border-top: 2px solid var(--rsa-line-22);
  background: var(--color-panel-raised);
  font-size: var(--fs-body);
}
[data-info="table"] tr[data-row="total"] [data-col="fare"] {
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--ls-tighter);
  color: var(--color-accent);
}

/* ---------- 9. Figures inside cards ---------- */

/* The figure is the content and the words under it are the gloss, so it leads
   the card at display size. `.sm-card p` is a class and a type, so it
   out-specifies `.sm-figure__value` on its own: without the p in this
   selector the display numeral renders at 15px, which is exactly the "numerals
   not at display size" failure in the pack's list. */
.sm-card p.sm-figure__value {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-stat);
  line-height: 1;
  letter-spacing: var(--ls-tighter);
  color: var(--color-accent);
}
[data-info="figures"] .sm-card { padding-top: var(--space-20); }
[data-info="figures"] .sm-card h3 { margin-bottom: var(--space-4); }
/* The card's own link. inline-flex with a 44px minimum, because measured at
   its natural height this target came out at 43.5px on a phone and the touch
   target floor is 44. */
[data-info="figures"] .sm-card > a {
  display: inline-flex;
  align-items: flex-end;
  min-height: 44px;
  margin-top: auto;
  padding-top: var(--space-10);
  color: var(--color-accent);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-underline-offset: 3px;
}

/* The live page's own colour coding, kept: a pass rate below the national
   average reads red, the best one green, the middle one amber. The lighter red
   token exists for exactly this, because RSA Red on near-black is the weakest
   pairing in the palette. */
.sm-card p.sm-figure__value[data-info-tone="deny"] { color: var(--color-text-red); }
.sm-card p.sm-figure__value[data-info-tone="allow"] { color: var(--color-accent); }
.sm-card p.sm-figure__value[data-info-tone="caution"] { color: var(--rsa-amber); }

/* The live page's card icon glyph. It is kept rather than dropped: these are
   in the live markup and the project does not decide by regex which of them
   are decoration. Set at object size so it reads as a mark, not as text. */
[data-info="mark"] {
  display: block;
  margin-bottom: var(--space-6);
  font-size: 26px;
  line-height: 1;
}

/* A source line under a figure grid. */
[data-info="footnote"] {
  margin-top: var(--space-12);
  font-size: var(--fs-small);
  color: var(--color-text-faint);
}

/* A closing aside inside a reading section. */
[data-info="note"] {
  margin-top: var(--space-20);
  padding-left: var(--space-12);
  border-left: 1px solid var(--rsa-line-16);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-body);
}
[data-info="note"] a { color: var(--color-accent); text-underline-offset: 3px; }
[data-info="note"] strong { color: var(--color-text); }

/* ---------- 10. The negative checklist beside the positive one ---------- */

/* Page quality rule 19: a disadvantage list uses crosses, not ticks. The live
   markup wrote both glyphs into text nodes; they are drawn here instead, so the
   row reads as one line of copy to a screen reader and the mark is CSS. */
[data-info="rules"] .sm-card { padding-top: var(--space-20); }
[data-info="rules"] .sm-card h3 {
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--rsa-line-08);
}
[data-info="rules"] .sm-card[data-info-tone="deny"] { border-left: 2px solid var(--color-text-red); }
[data-info="rules"] .sm-card[data-info-tone="deny"] h3 { color: var(--color-text-red); }
[data-info="rules"] .sm-card[data-info-tone="allow"] { border-left: var(--rule-green); }
[data-info="rules"] .sm-card[data-info-tone="allow"] h3 { color: var(--color-accent); }
[data-info="rules"] .sm-card[data-info-tone="caution"] { border-left: 2px solid var(--rsa-amber); }
[data-info="rules"] .sm-card[data-info-tone="caution"] h3 { color: var(--rsa-amber); }

[data-info="rules"] ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* A hanging indent, not a grid. A marker-and-text row built with display:grid
   puts every inline child of the row in its own cell. */
[data-info="rules"] li {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) var(--space-16);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-body);
}
[data-info="rules"] li::before {
  position: absolute;
  left: 0;
  top: var(--space-4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
}
[data-info="rules"] [data-info-tone="deny"] li::before {
  content: "✕";
  color: var(--color-text-red);
}
[data-info="rules"] [data-info-tone="allow"] li::before {
  content: "✓";
  color: var(--color-accent);
}
/* Where the list is neither a prohibition nor a permission, the marker is a
   plain bullet, which is what the live markup rendered. The grade cards are
   rules of arithmetic, not things you may or may not do, and a cross against
   "up to 8 Grade 2 faults = pass" would say the opposite of the line. */
[data-info="rules"] ul[data-info-marks="plain"] li::before {
  content: "•";
  color: var(--color-text-faint);
}

/* The plate is a physical object, so it sits above the heading rather than in
   the text flow, in the column that tells you to display one. */
[data-info="rules"] .sm-plate { margin-bottom: var(--space-10); }

/* ---------- 11. A statement section ---------- */

/* One sentence and one action, centred as the live page centres it, opened by
   the grey dashed road line. */
section[data-info="statement"] > .sm-wrap { text-align: center; }
section[data-info="statement"] .sm-eyebrow { justify-content: center; }
section[data-info="statement"] .sm-lede { margin: 0 auto var(--space-16); }
section[data-info="statement"] .sm-btn-row { justify-content: center; }

[data-info="roadline"] {
  width: 100%;
  max-width: 320px;
  height: 4px;
  margin: 0 auto var(--space-20);
  background-image: repeating-linear-gradient(90deg, var(--rsa-line-25) 0 22px, transparent 22px 36px);
}

/* The one-paragraph section on /driving-test: the plate holds the left of the
   row so a short block is not a wide band of nothing. Here the hook is on a
   div inside the wrap rather than on the section, so the two cases do not
   collide. */
.sm-wrap > div[data-info="statement"] {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  text-align: left;
}
.sm-wrap > div[data-info="statement"] p {
  margin: 0;
  max-width: 68ch;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-body);
}

/* ---------- 12. The split story ---------- */

/* The pack's split column gap is wider than the card grid's, so the photograph
   reads as the other half of the row rather than as a neighbouring card. The
   columns keep school.css's stretch alignment, so the photograph holds the
   full height of the copy beside it. */
[data-info="road"] { column-gap: var(--space-28); }

/* ---------- 13. The closing band ---------- */

/* The band's furniture, the white centre line and the 220px L plate, is drawn
   in school.css for every family at once. Only the measure is set here, so the
   copy stays clear of the plate's half of the band. /driving-test's band keeps
   the live page's h3, so it is set to the band's heading scale rather than
   left at card-title size. */
@media (min-width: 1100px) {
  [data-info="band"] > .sm-wrap { max-width: 62%; margin-inline: var(--gutter) auto; }
}
[data-info="band"] h3 {
  max-width: 20ch;
  margin-inline: auto;
  font-size: var(--fs-h2-sm);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--color-on-action);
}

/* ---------- 14. Card grids: columns from the item count ---------- */

/* Below the tablet break school.css's auto-fit base applies and these do not,
   so a one-column phone layout is never fought for. Between the two breaks
   everything goes to two columns, which is the widest a 15px card reads well
   at that width and never strands a row by two. */
@media (min-width: 769px) and (max-width: 1099px) {
  .sm-cards[data-info-cols="2"],
  .sm-cards[data-info-cols="3"],
  .sm-cards[data-info-cols="4"],
  .sm-cards[data-info-cols="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .sm-cards[data-info-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-cards[data-info-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm-cards[data-info-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Five cards in three columns: rows of three and two. In four columns the
     last row is short by three, which reads as a fault rather than a grid. */
  .sm-cards[data-info-cols="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 15. The section numeral ---------- */

/* The five mistake sections carry the pack's section numeral, and the side it
   sits on alternates so five parallel sections do not read as one section
   printed five times. */
.sm-section--numbered[data-n-side="left"]::before {
  right: auto;
  left: var(--space-16);
}

/* ---------- 16. Phone ---------- */

@media (max-width: 768px) {
  [data-info="checklist"] {
    /* Straight on a phone: 1.5 degrees of tilt on a full-width card puts its
       corner past the gutter and scrolls the page sideways. */
    transform: none;
    box-shadow: var(--shadow-card);
  }
  [data-info="alert"],
  [data-info="table"],
  [data-info="steps"] { max-width: none; }
  .sm-wrap > div[data-info="statement"] { flex-direction: column; gap: var(--space-12); }
  [data-info="hero-title"] { font-size: clamp(32px, 9vw, 46px); }
  [data-info="table"] th,
  [data-info="table"] td { padding: var(--space-8) var(--space-10); }
}