/* Page 9 — "My Certifications" and the printable KSRTC document (task #91).
 * var(--token) only; web/theme/tokens.css is the single source of every colour
 * and every measurement. Breakpoints inside @media are the one px exception,
 * and this file has none.
 *
 * ★ THE @media print BLOCK AT THE FOOT IS THE POINT OF THIS FILE.
 *
 * A certificate is a piece of paper that lives in a depot's files, so Ctrl-P
 * has to produce a sheet somebody can file: no navigation, no sidebar, no
 * buttons, no toasts, no hint text about printing. Everything removed for print
 * is FURNITURE — chrome that exists to move around an application.
 *
 * That sheet is produced by THREE stylesheets and this one owns the smallest
 * share. The navigation rail and Sign out go in web/theme/base.css; the ink
 * colour comes from web/theme/tokens.css. The Ctrl-P section at the foot says
 * which does what, and why it cannot all live here. Read it before concluding
 * that anything this file does not hide survives Ctrl-P.
 *
 * That is emphatically NOT the same thing as hiding data, which UX_SPEC.md
 * §0.6 forbids outright and .github/scripts/css-hiding-audit.sh fails the build
 * over: protected data is ABSENT from a response, never merely invisible in it.
 * Nothing on this page is protected — internal/service already refused the
 * request if the caller may not read the document — and nothing this file hides
 * carries a name, a verdict or a rating. The distinction is worth stating here
 * because this is the only stylesheet in the tree that hides anything at all.
 */

/* ——— The list ————————————————————————————————————————————— */

/* A superseded row is muted rather than removed. Somebody holding the printout
 * it replaced has to be able to find it — see the note in pages/certificates.html. */
.ledger tr.is-superseded td{color:var(--ink-3)}
.pill-superseded{
  display:inline-flex;align-items:center;
  margin-left:var(--sp-2);padding:var(--sp-0) var(--sp-3);
  background:var(--chip-off-bg);color:var(--chip-off-ink);
  border:var(--bw-1) solid var(--chip-off-rule);border-radius:var(--r-pill);
  font-size:var(--fs-00);letter-spacing:var(--track-caps);text-transform:uppercase;font-weight:var(--fw-bold);
  white-space:nowrap;
}

/* ——— The printable document ——————————————————————————————— */

.certpage{max-width:var(--w-measure);margin-inline:auto}

.certtools{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.certtools .hint{color:var(--ink-3);font-size:var(--fs-1)}

/* The superseded banner is the loudest thing on the page, above the document
 * rather than inside it: the question a clerk is holding this paper to ask is
 * "is it still good?", and the answer has to arrive before the certificate
 * does. Danger colours, not the muted grey the list row wears — in the list it
 * is one row among many, here it is the whole answer. */
.supersededbanner{
  border:var(--bw-2) solid var(--color-danger);
  background:var(--color-danger-tint);
  padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-6);
}
.supersededbanner .sb-h{
  display:flex;align-items:center;gap:var(--sp-3);
  color:var(--color-danger);font-weight:var(--fw-bold);
  font-size:var(--fs-4);letter-spacing:var(--track-tight);
}
.supersededbanner .sb-h svg{width:var(--sz-icon-lg);height:var(--sz-icon-lg);flex:0 0 auto}
.supersededbanner .sb-b{margin-top:var(--sp-2);color:var(--ink-2);font-size:var(--fs-2)}

.certdoc{
  background:var(--paper-2);
  border:var(--bw-1) solid var(--rule-strong);
  box-shadow:var(--sh-1);
  padding:var(--sp-8) var(--sp-7);
}

.cd-head{text-align:center;margin-bottom:var(--sp-5)}
.cd-crest{width:var(--w-crest);height:var(--w-crest);color:var(--accent)}
.cd-org{
  font-family:var(--font-display);font-size:var(--fs-5);line-height:var(--lh-snug);
  margin-top:var(--sp-3);
}
.cd-sub{color:var(--ink-3);margin-top:var(--sp-1)}

.cd-title{
  text-align:center;
  font-family:var(--font-display);font-size:var(--fs-6);line-height:var(--lh-snug);
  letter-spacing:var(--track-tight);
  margin-bottom:var(--sp-7);
}

.cd-lead{text-align:center;color:var(--ink-2);font-size:var(--fs-3)}

/* The name is the largest thing on the sheet. Whoever picks the paper up is
 * looking for one fact first: whose it is. */
.cd-name{
  text-align:center;
  font-family:var(--font-display);font-size:var(--fs-7);line-height:var(--lh-tight);
  margin:var(--sp-3) var(--sp-0);
}
.cd-statement{text-align:center;color:var(--ink-2);font-size:var(--fs-3);margin-bottom:var(--sp-7)}

/* A two-column ledger of facts. Grid rather than a table because it is a
 * description list and not tabular data — a screen reader should say "Batch:
 * Batch 14 — Aluva", not "row 2, column 2". */
.cd-facts{
  display:grid;grid-template-columns:var(--fx-fact) 1fr;
  gap:var(--sp-3) var(--sp-5);
  border-top:var(--bw-1) solid var(--rule);
  padding-top:var(--sp-5);
}
.cd-facts dt{
  color:var(--ink-3);
  font-size:var(--fs-0);letter-spacing:var(--track-caps);text-transform:uppercase;font-weight:var(--fw-bold);
}
.cd-facts dd{font-size:var(--fs-3)}
.cd-ref{font-size:var(--fs-2);letter-spacing:var(--track-wide);font-weight:var(--fw-bold)}

.cd-verify{
  margin-top:var(--sp-6);padding-top:var(--sp-4);
  border-top:var(--bw-1) solid var(--rule);
  color:var(--ink-3);font-size:var(--fs-1);text-align:center;
}

/* ——— Ctrl-P ——————————————————————————————————————————————— */
/*
 * ★ THIS BLOCK IS ONE THIRD OF THE PRINTED SHEET. NAMING THE OTHER TWO IS THE
 *   POINT OF THIS COMMENT — a reader who greps for "print" and lands here must
 *   not conclude that what is missing from this block is missing from paper.
 *
 *   1. web/theme/base.css @media print drops .topbar, .sidebar, .toasts, .skip
 *      and <dialog> for EVERY page. That is where the navigation rail, the
 *      Academy link, the viewer card and Sign out go — not here. Verified on a
 *      rendered page under emulated print media, not read off the CSS:
 *      .topbar/.sidebar/.toasts/.skip all compute display:none and the sheet's
 *      innerText begins at "Kerala State Road Transport Corporation".
 *   2. web/theme/tokens.css restricts the Night Ledger palette to @media
 *      screen, so a depot PC left in the dark theme still prints black ink.
 *      Colour is the theme's business and there is no hex in this file to do
 *      it with; see the ★ comment above :root[data-theme="night"].
 *   3. This block: the surfaces only this page has — the back link and the
 *      print hint — plus the geometry. The shell's padding and the paper's
 *      shadow and border are screen affordances, and on paper the sheet IS
 *      the page.
 */
@media print{
  .certtools,.langfloat,.letterhead{display:none !important}
  .layout,.main{display:block;padding:var(--sp-0);margin:var(--sp-0)}
  .certpage{max-width:none}
  .certdoc{border:0;box-shadow:var(--sh-0);background:transparent;padding:var(--sp-0)}
  /* Keep the superseded warning on the printout. A clerk who prints a stale
     document and files it has been actively misled, so this is the one thing
     on the page that must survive Ctrl-P even though it is not part of the
     certificate. */
  .supersededbanner{border-width:var(--bw-2);background:transparent}
}