/* Loaded ONLY by /legal/<slug>/card, through Base.astro's <slot name="head" /> (plan 07
   ruling 14). @page is a document-level at-rule: in pevra.css it would resize the printed
   output of every page on this site, and Astro cannot scope it in a component <style>
   because there is no element to hash. */
@page { size: 3.375in 2.125in; margin: 0; }

.rcard {
  width: 3.375in; height: 2.125in; box-sizing: border-box;
  padding: 0.16in 0.18in; overflow: hidden;
  background: #FFFFFF; color: #0A0F0A;
  font-family: Inter, system-ui, sans-serif; font-size: 8pt; line-height: 1.25;
  display: flex; flex-direction: column; gap: 0.04in;
}
.rcard__place { margin: 0; font-weight: 700; font-size: 11pt; }
.rcard__level { font-weight: 400; font-size: 7pt; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.rcard__inherited { margin: 0; font-size: 7pt; }
.rcard__subject { margin: 0; font-size: 7pt; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
/* 9.5pt, not the 10pt this started at: ruling R07-K puts the operating conditions on the
   front face under the phrase, and the face is a fixed 2.125in with `overflow: hidden`, so
   a half-point here is what keeps a three-condition card from clipping its wheel line
   invisibly. Proved by printing, not by eye -- see the CDP page-count and scrollHeight
   check in the sub-plan 07 report. */
.rcard__phrase { margin: 0.04in 0 0; font-weight: 600; font-size: 9.5pt; }
/* Ruling R07-K. What the rider must actually do here, in the same sentences the
   jurisdiction page prints. Small, tight and bulleted: three short imperatives read faster
   at a traffic stop than one run-on paragraph, and buildCard() never sends more than three. */
.rcard__conditions { margin: 0; padding-left: 0.13in; font-size: 6.5pt; line-height: 1.3; }
.rcard__conditions li { margin: 0; }
.rcard__definition, .rcard__thresholds, .rcard__wheels { margin: 0; }
.rcard__thresholds, .rcard__wheels { font-family: "Space Mono", monospace; font-size: 7.5pt; }
.rcard__quote { margin: 0; font-size: 7.5pt; line-height: 1.3; }
.rcard__section { margin: 0; font-family: "Space Mono", monospace; font-size: 7pt; }
.rcard__truncated { margin: 0; font-size: 6.5pt; opacity: .75; }
.rcard__foot { margin-top: auto; display: flex; gap: 0.1in; align-items: flex-end; }
.rcard__qr { width: 0.62in; height: 0.62in; flex: 0 0 auto; }
.rcard__qr svg { width: 100%; height: 100%; display: block; }
.rcard__meta { flex: 1 1 auto; min-width: 0; }
.rcard__meta p { margin: 0; font-size: 6pt; }
.rcard__url { font-family: "Space Mono", monospace; word-break: break-all; }
/* Ruling R07-I. How strong the evidence is, in words rather than a letter, beside the name
   of the person who checked it -- the two facts that turn a quoted clause into a claim
   somebody stands behind. The wording itself comes from TIER_LABEL via buildCard(). */
.rcard__tier { text-wrap: pretty; }
.rcard__disclaimer { margin-top: 0.03in !important; opacity: .8; }

/* "(20 subjects)" on a refusal line. The count is the difference between "one subject here
   is unverified" and "every one of them is", so it has to be readable -- but it is a
   parenthetical after the sentence that matters, so it is quieter than the sentence.
   Neutral ink; a refusal is not a verdict. */
.card-page__count { color: var(--ink-2); font-size: var(--step-micro); }

/* Screen preview: the same geometry, laid out so a person can read both faces before
   printing. Nothing here is a --verdict-* colour: a card is a document, not a chip. */
@media screen {
  .card-sheet { display: flex; flex-wrap: wrap; gap: 0.25in; margin: 1.5rem 0; }
  .rcard { box-shadow: 0 2px 18px rgba(0,0,0,.18); border-radius: 6px; }
  /* 6pt is 8px on a screen -- printable, but below anything a person should be asked to
     read on a monitor. 7pt (about 9.3px) is the largest bump the fixed 3.375in face can
     absorb without the meta column reflowing, so the screen preview still shows what will
     actually print. Print sizes above are untouched. */
  .rcard__meta p { font-size: 7pt; }
  .rcard__conditions { font-size: 7.5pt; }
}
@media print {
  .nav, .footer, .skip-link, .card-page__chrome { display: none !important; }
  html, body { background: #FFFFFF !important; }
  /* Neutralise the site container. `.container` in flow-web.css carries 24px of inline
     padding, a max-width and auto side margins; on a 3.375 x 2.125in sheet with a zero
     @page margin, every one of those offsets the card face away from the corner, and the
     0.18in the face allows itself is then not the margin that reaches the paper. Reset the
     lot so each `.rcard` sits at 0,0 and the printed edge is the card's own edge. */
  html, body, #main { margin: 0; padding: 0; }
  .card-page { padding-inline: 0; padding-block: 0; max-width: none; width: auto; margin: 0; }
  .card-sheet { display: block; margin: 0; gap: 0; }
  .rcard { box-shadow: none; border-radius: 0; break-after: page; page-break-after: always; }
  .rcard:last-child { break-after: auto; page-break-after: auto; }

  /* A page with no card face must not eject a blank sheet. The chrome is hidden in print
     because a card is a document and not a web page -- but where there is no card, the
     refusal IS the document, so it comes back. Exactly one @page lives in this file
     (ruling 14), so the refusal flows across wallet-sized sheets; small pages that say why
     there is no card beat one blank one that says nothing. */
  .card-page--empty .card-page__chrome { display: block !important; }
  .card-page--empty { padding: 0.16in 0.18in; }
  .card-page--empty p, .card-page--empty li, .card-page--empty .lead, .card-page--empty .small {
    font-size: 8pt; line-height: 1.3; margin: 0 0 0.06in;
  }
  .card-page--empty .eyebrow { font-size: 6.5pt; }
  .card-page--empty h1 { font-size: 12pt; }
  .card-page--empty h2 { font-size: 9pt; margin: 0.08in 0 0.04in; }
  .card-page--empty .card-page__refusals { margin: 0 0 0.06in; padding-left: 0.14in; }
}