/* ==========================================================================
   doc.css — the printed overview. Loaded by `_layout_doc.html` and by nothing
   else, so its bytes are paid for by the one page that is going to become a
   PDF and never by the pages a visitor actually browses (main.css has a byte
   budget a test enforces: test_marsa_budget.py).

   It speaks only in tokens (tokens.css) and it introduces no colour of its
   own: a brochure that repaints the brand is a brochure that stops looking
   like the site the reader just left.

   TWO GEOMETRIES, ONE DOCUMENT
   ----------------------------
   The HTML is the source of truth — somebody will open /overview/ in a
   browser, and `tools/media/factsheet.py` prints that same page. So the sheet
   is described twice:

     * on SCREEN each section is an ordinary block on a fluid measure. It has
       to survive 320 px, because `test_layout_browser.py` asserts no page of
       any record scrolls sideways at 320, 390, 860 and 1440 — and 210 mm is
       794 px, which overflows a phone by two and a half times. A fixed A4 box
       outside `@media print` would fail that test on the day it was written.

     * in PRINT each section IS a sheet of A4: `@page { size: A4; margin: 0 }`,
       210 x 297 mm, `break-after: page`.

   TRAP — `overflow: hidden` on the printed sheet is deliberate and it is the
   lesser of two evils. Without it a section one line too tall for A4 spills
   onto a ninth, tenth and eleventh page and the document quietly becomes
   fourteen pages in German. With it the overflow is clipped, which is visible
   the moment anyone looks at the PDF. The real fix is either shorter copy or
   a smaller step here; both are cheap, and neither happens if the failure is
   invisible. `test_marsa_doc.py` pins the page count so this cannot drift.

   TRAP — no CSS counters anywhere, for the folio or for anything else. Л29
   forbids ordinal decoration, and `test_markup.py::test_no_ordinal_decoration`
   enforces it by refusing the CSS counter function in any stylesheet of any
   stack — as a plain substring, so this note may not spell it either. The page
   number is therefore written into the markup, once per section, where it is
   also visible to anybody reading the source.

   TRAP — logical properties only, like main.css: the Arabic version mirrors
   on `dir="rtl"` and nothing else, and a left/right stylesheet needs a second
   mirrored copy that drifts from the first.
   ========================================================================== */

/* The UA rule for `[hidden]` has minimal specificity and loses to any class
   that sets `display`. This file sets `display` in a dozen places, so it
   carries the same shield main.css carries — `validate.py`'s
   `hidden_attribute_is_honoured` refuses a stylesheet that does not. */
[hidden] { display: none !important; }

@page { size: A4; margin: 0; }

/* --- the sheet ---------------------------------------------------------- */

.ma-doc {
  --ma-doc-margin: clamp(1.25rem, 5vw, 3.25rem);
  --ma-doc-rule: 1px solid var(--ma-rule);
  display: block;
  background: var(--ma-paper);
  color: var(--ma-ink);
}

.ma-doc__page {
  position: relative;
  display: flow-root;
  padding: var(--ma-doc-margin);
  padding-block-end: calc(var(--ma-doc-margin) + 2.25rem);
  border-block-end: var(--ma-doc-rule);
  break-after: page;
}
.ma-doc__page--last { break-after: auto; border-block-end: none; }

/* --- the running foot --------------------------------------------------- */

.ma-doc__foot {
  position: absolute;
  inset-block-end: calc(var(--ma-doc-margin) * 0.6);
  inset-inline: var(--ma-doc-margin);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  max-inline-size: none;
  font-size: 0.75rem;
  letter-spacing: var(--ma-track-label);
  text-transform: uppercase;
  color: var(--ma-ink-soft);
}
.ma-doc__folio { font-variant-numeric: tabular-nums; }
/* A hairline over the foot, the one piece of brass on the page. It is a
   border on a decorative pseudo-element, never a text colour: `--ma-brass` is
   DECOR ONLY and palette.py fails the build if it ever paints a letter. */
.ma-doc__foot::before {
  content: "";
  position: absolute;
  inset-block-start: -0.6rem;
  inset-inline: 0;
  block-size: 1px;
  background: var(--ma-brass);
}

/* --- the cover ---------------------------------------------------------- */

.ma-doc__page--cover { padding-block-start: 0; padding-inline: 0; }
.ma-doc__bleed {
  position: relative;
  margin: 0 0 clamp(1.5rem, 4vw, 2.75rem);
  aspect-ratio: 16 / 10;
  /* On a wide screen the cover frame is as tall as the window is wide, and the
     project's own name lands below the fold — a document whose first screen is
     a photograph and nothing else. Capped here and released on paper, where
     the sheet is 297 mm and the ratio above already fits inside it. */
  max-block-size: 62vh;
  overflow: clip;
  background: var(--ma-mist);
}
/* TRAP — `picture` has to be stretched as well as `img`. main.css sets
   `img, picture { block-size: auto }` for the fluid page, so an `<img>` told
   to fill its box fills a `<picture>` that is still auto-height, and the frame
   box below it shows as a band of `--ma-mist`. Measured on the first print:
   every frame in the document sat above an empty grey strip. */
.ma-doc__bleed picture,
.ma-doc__frame picture { display: block; inline-size: 100%; block-size: 100%; }
.ma-doc__bleed img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--ma-focus, 50% 50%); }
.ma-doc__cover-body { padding-inline: var(--ma-doc-margin); }
.ma-doc__kicker {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--ma-track-label);
  text-transform: uppercase;
  color: var(--ma-accent);
  margin: 0 0 0.9rem;
}
.ma-doc__title { font-size: clamp(2.4rem, 1.2rem + 5.5vw, 4.25rem); margin: 0 0 0.6rem; }
.ma-doc__place { font-family: var(--ma-font-display); font-size: var(--ma-step-1); color: var(--ma-ink); margin: 0; }
.ma-doc__place--dev { color: var(--ma-ink-soft); margin-block-end: 1.4rem; }
.ma-doc__asof {
  margin-block-start: 1.4rem;
  padding-block-start: 0.9rem;
  border-block-start: var(--ma-doc-rule);
  font-size: var(--ma-step-small);
  color: var(--ma-ink-soft);
}

/* --- section furniture -------------------------------------------------- */

.ma-doc__head { margin-block-end: clamp(1.25rem, 3vw, 2rem); }
.ma-doc__head h2 { margin-block-end: 0.35em; }
.ma-doc__lede { font-size: var(--ma-step-1); color: var(--ma-ink-soft); max-inline-size: 58ch; margin-block-end: 0; }
.ma-doc__sub { font-size: var(--ma-step-1); margin-block-end: 0.45em; }
.ma-doc__attr { margin-block-start: 1.1rem; }

/* --- figure grids ------------------------------------------------------- */

.ma-doc__figures {
  list-style: none;
  margin: 0 0 clamp(1.5rem, 3.5vw, 2.5rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(0.9rem, 2vw, 1.6rem);
}
.ma-doc__figures--row { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-block-end: 0; }
.ma-doc__figures--wide { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.ma-doc__fig { display: block; padding-block-start: 0.7rem; border-block-start: var(--ma-doc-rule); }
.ma-doc__fig--inline { margin-block-start: 1.25rem; max-inline-size: none; }
.ma-doc__fig-num {
  display: block;
  font-family: var(--ma-font-display);
  font-size: clamp(1.6rem, 1rem + 1.6vw, 2.2rem);
  line-height: 1.05;
  color: var(--ma-accent);
  /* main.css sets `white-space: nowrap` on `.ma-num`, which is right for a
     counter animating in place and wrong in a narrow grid cell: «over 6,000
     seats» ran straight through the column beside it. */
  white-space: normal;
}
.ma-doc__fig-label { display: block; margin-block-start: 0.3rem; font-size: var(--ma-step-small); color: var(--ma-ink-soft); }

/* --- what is not published yet ------------------------------------------ */

.ma-doc__open { background: var(--ma-card); border: var(--ma-doc-rule); padding: clamp(1rem, 2.5vw, 1.6rem); }
.ma-doc__open-lede { color: var(--ma-ink); margin-block-end: 1rem; }
.ma-doc__open-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.ma-doc__open-list li { display: grid; gap: 0.15rem 1.5rem; }
.ma-doc__open-key { font-weight: 700; letter-spacing: var(--ma-track-label); text-transform: uppercase; font-size: 0.8125rem; color: var(--ma-warm); }
.ma-doc__open-val { color: var(--ma-ink-soft); }

/* --- two-column blocks -------------------------------------------------- */

.ma-doc__split { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; }
.ma-doc__prose p { margin-block-end: 0.9em; }
.ma-doc__frame { position: relative; margin: 0; background: var(--ma-mist); overflow: clip; }
.ma-doc__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--ma-focus, 50% 50%); }
.ma-doc__frame--tall { aspect-ratio: 3 / 4; }
.ma-doc__frame--map { aspect-ratio: 1 / 1; border: var(--ma-doc-rule); }
.ma-doc__frame--band { aspect-ratio: 21 / 8; margin-block-start: clamp(1.25rem, 3vw, 2rem); }
.ma-doc__frame--thumb { aspect-ratio: 4 / 3; }

/* --- drive times -------------------------------------------------------- */

.ma-doc__legend { list-style: none; margin: 0; padding: 0; }
.ma-doc__legend li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
  border-block-end: var(--ma-doc-rule);
}
.ma-doc__legend-key { color: var(--ma-ink); }
.ma-doc__legend-val { color: var(--ma-accent); font-weight: 600; white-space: nowrap; }

/* --- the five formats --------------------------------------------------- */

.ma-doc__formats { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.9rem, 2vw, 1.35rem); }
.ma-doc__formats li { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); align-items: start; }
.ma-doc__formats h3 { margin-block-end: 0.25em; }
.ma-doc__formats p { margin: 0; color: var(--ma-ink-soft); }

/* --- the money ---------------------------------------------------------- */

/* The table keeps its own minimum width and scrolls inside this box rather
   than pushing the page sideways: four columns cannot fold onto a 320-px
   phone, and a document that scrolls horizontally is the defect Л31 and the
   browser test both name. */
.ma-doc__scroll { overflow-x: auto; margin-block-end: 0.5rem; }
.ma-doc__plans { inline-size: 100%; border-collapse: collapse; font-size: var(--ma-step-small); }
.ma-doc__plans th,
.ma-doc__plans td { padding: 0.6rem 0.5rem; border-block-end: var(--ma-doc-rule); text-align: start; }
.ma-doc__plans thead th { font-family: var(--ma-font-text); font-weight: 600; letter-spacing: var(--ma-track-label); text-transform: uppercase; font-size: 0.75rem; color: var(--ma-ink-soft); }
.ma-doc__plans tbody th { font-weight: 600; color: var(--ma-ink); }
.ma-doc__plans td { color: var(--ma-accent); font-variant-numeric: tabular-nums; }

.ma-doc__notes {
  list-style: none;
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.ma-doc__notes li { padding-block-start: 0.8rem; border-block-start: var(--ma-doc-rule); }
.ma-doc__notes p { color: var(--ma-ink-soft); font-size: var(--ma-step-small); }
.ma-doc__note-num { font-family: var(--ma-font-display); font-size: var(--ma-step-2); color: var(--ma-accent); margin-block-end: 0.35rem; }

/* --- the market caveat -------------------------------------------------- */

.ma-doc__caveat {
  background: var(--ma-sand);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border-inline-start: 3px solid var(--ma-brass);
}
.ma-doc__caveat p { margin: 0; color: var(--ma-ink); max-inline-size: 72ch; }

/* --- the steps, the contact and the sources ----------------------------- */

.ma-doc__steps { list-style: none; margin: 0 0 clamp(1.25rem, 3vw, 2rem); padding: 0; display: grid; gap: 1rem; }
.ma-doc__steps li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.ma-doc__steps h3 { margin-block-end: 0.2em; }
.ma-doc__steps p { margin: 0; color: var(--ma-ink-soft); font-size: var(--ma-step-small); }
.ma-doc__step-mark { margin-block-start: 0.6em; block-size: 1px; background: var(--ma-brass); }

.ma-doc__reach { padding-block: clamp(1rem, 2.5vw, 1.5rem); border-block: var(--ma-doc-rule); }
.ma-doc__reach p { color: var(--ma-ink-soft); font-size: var(--ma-step-small); }
.ma-doc__reach-id { font-family: var(--ma-font-display); font-size: var(--ma-step-1); }
.ma-doc__reach-id a { color: var(--ma-accent); }
.ma-doc__reach-chat { margin-block-start: 0.5rem; }
.ma-doc__reach-chat:empty { display: none; }

.ma-doc__sources { margin-block-start: clamp(1rem, 2.5vw, 1.5rem); }
.ma-doc__source-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.ma-doc__source-list li { display: grid; gap: 0.15rem 1.25rem; padding-block-end: 0.6rem; border-block-end: var(--ma-doc-rule); }
.ma-doc__src-tag {
  font-family: var(--ma-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ma-warm);
}
.ma-doc__src-body { color: var(--ma-ink-soft); font-size: var(--ma-step-small); }
.ma-doc__credits { margin-block-start: 0.9rem; }
.ma-doc__credits p { font-size: 0.75rem; color: var(--ma-ink-soft); max-inline-size: none; }

/* The off-plan block, when the record finally carries a project number and an
   escrow account, gets a sheet of its own rather than being crammed under the
   sources: the six lines are the one thing on this document that a regulator
   reads, and they are not a footnote. Empty today, and the wrapper collapses
   (`.ma-legal-slot:empty` in main.css). */
.ma-doc-shell .ma-legal-slot:not(:empty) { padding: var(--ma-doc-margin); break-before: page; }

/* --- wide screens, and paper -------------------------------------------- */

/* TRAP — `print` is in this list, and it has to be. A printed A4 page box is
   210 mm, which is 794 CSS px, so every `min-width: 861px` query is FALSE on
   paper no matter how wide the screen that started the print was. The first
   run of `factsheet.py` came out with the whole document in one column: the
   map filled a sheet on its own and the drive times fell off the bottom of
   the page, clipped by `overflow: hidden`. A sheet of A4 is a wide layout by
   every measure except the one the query asks about. */
@media (min-width: 861px), print {
  .ma-doc__split { grid-template-columns: 7fr 5fr; }
  .ma-doc__split--map { grid-template-columns: 5fr 7fr; }
  .ma-doc__open-list li { grid-template-columns: 12rem minmax(0, 1fr); }
  .ma-doc__formats li { grid-template-columns: 12rem minmax(0, 1fr); }
  .ma-doc__source-list li { grid-template-columns: 14rem minmax(0, 1fr); }
}

/* --- paper -------------------------------------------------------------- */

@media print {
  /* Chromium prints backgrounds only when asked; `factsheet.py` passes
     `print_background=True`, and this keeps the sand and card grounds from
     dropping out in anybody else's browser dialog too. */
  html, body { background: var(--ma-paper); print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  .ma-doc {
    --ma-doc-margin: 16mm;
    /* One rhythm for the whole document, expressed in points, because the
       sheet is 297 mm and nothing about it is fluid any more. */
    font-size: 10pt;
    line-height: 1.5;
  }
  .ma-doc__page {
    inline-size: 210mm;
    block-size: 297mm;
    overflow: hidden;
    border-block-end: none;
    padding-block-end: 24mm;
    break-after: page;
    break-inside: avoid;
  }
  .ma-doc__page--last { break-after: auto; }
  .ma-doc__foot { inset-block-end: 12mm; font-size: 7.5pt; }

  .ma-doc h2 { font-size: 22pt; }
  .ma-doc h3 { font-size: 12pt; }
  .ma-doc__lede { font-size: 11pt; }
  .ma-doc__sub { font-size: 12pt; }
  .ma-doc__title { font-size: 34pt; }
  .ma-doc__place { font-size: 13pt; }
  .ma-doc__fig-num { font-size: 19pt; }
  .ma-doc__fig-label,
  .ma-doc__src-body,
  .ma-doc__steps p,
  .ma-doc__notes p,
  .ma-doc__plans { font-size: 9pt; }
  .ma-doc__attr { font-size: 8.5pt; }
  .ma-doc__credits p { font-size: 7.5pt; }
  .ma-doc__src-tag { font-size: 7pt; }

  /* A4 is wider than the table's minimum, so the scroll box has nothing to do
     on paper — and a scroll container that clips is how a printed table loses
     its last column. */
  .ma-doc__scroll { overflow: visible; }

  .ma-doc__bleed { aspect-ratio: 210 / 168; margin-block-end: 16mm; max-block-size: none; }
  .ma-doc__frame--tall { aspect-ratio: 3 / 4; }
  .ma-doc__frame--band { aspect-ratio: 21 / 6; margin-block-start: 10mm; }
  .ma-doc__frame--thumb { aspect-ratio: 3 / 2; }
  .ma-doc__frame--map { aspect-ratio: 3 / 4; }
  .ma-doc__split--map { grid-template-columns: 6fr 6fr; }

  /* The island's five figures sit on the foot of their sheet rather than
     under the prose. The prose and its frame end two thirds of the way down,
     and a strip of white below them followed by five numbers reads as a page
     that ran out; anchored, the same five numbers close the sheet. Print
     only: on screen the section is an ordinary column with no fixed height
     to anchor to. */
  .ma-doc__figures--row {
    position: absolute;
    inset-inline: var(--ma-doc-margin);
    inset-block-end: 24mm;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5mm;
  }
  .ma-doc__figures--row .ma-doc__fig-num { font-size: 15pt; }

  /* Page eight is the densest sheet in the document — three steps, the way to
     reach us, six sources and the frame credits — so its rhythm is tightened
     here rather than everywhere. */
  .ma-doc__steps { gap: 4mm; margin-block-end: 5mm; }
  .ma-doc__steps p { font-size: 8.5pt; }
  .ma-doc__reach { padding-block: 4mm; }
  .ma-doc__reach p { font-size: 8.5pt; }
  .ma-doc__reach-id { font-size: 11pt; margin-block-end: 2mm; }
  .ma-doc__reach-chat { margin-block-start: 0; }
  .ma-doc__reach-chat a { padding: 2mm 4mm; font-size: 8pt; }
  .ma-doc__sources { margin-block-start: 4mm; }
  .ma-doc__source-list { gap: 2mm; }
  .ma-doc__source-list li { padding-block-end: 2mm; }
  .ma-doc__src-body { font-size: 8pt; }
  .ma-doc__sources .ma-doc__attr { margin-block-start: 3mm; font-size: 7.5pt; }
  .ma-doc__credits { margin-block-start: 3mm; }
  .ma-doc__credits p { font-size: 6.5pt; line-height: 1.35; }

  /* Every anchor on the sheet is a place, not a link: printing the URL after
     it is the default of some engines and it is noise on paper. */
  .ma-doc a { color: var(--ma-accent); text-decoration: none; }

  /* The chrome the SCREEN version of this page carries, taken off again for
     paper. One source serves both jobs (see the note in _layout_doc.html):
     the article is indexed with a header, a trail, a sticky call to action and
     a footer, and `tools/media/factsheet.py` runs emulate_media("print")
     before page.pdf(), so none of it reaches the brochure.

     `display: none` and not `visibility`: a hidden-but-laid-out header would
     take the first page of the PDF with it. */
  .ma-head,
  .ma-skip,
  .ma-crumbs,
  .ma-sticky,
  .ma-chat,
  .ma-modal,
  .ma-foot { display: none !important; }
  /* The sticky bar reserves its height on <body> whether or not it is shown. */
  body.ma-doc-shell { padding-block-end: 0 !important; }
  body.ma-doc-shell.has-sticky { padding-block-end: 0 !important; }
}