/* ==========================================================================================
   THE PUBLIC MASTHEAD. public-masthead.css v1.22.63
   ------------------------------------------------------------------------------------------
   THE DARK SLAB SKIN FOR .ds-page-head, ON THE FOUR PUBLIC SURFACES THAT HAVE NO AppShell.
   /guide/, /tools/, /privacy/ and /terms/ are unauthenticated, so AppShell::transform() never
   sees them and page-masthead.css - which it injects - never reaches them. They shipped with
   the paper-coloured .ds-page-head from the design system, or with a bespoke head of their own,
   while twenty-nine signed-in surfaces carried the pine slab. That is the inconsistency this
   sheet closes.

   IT ADDS A SKIN, NOT A COMPONENT. .ds-page-head, .ds-eyebrow, .ds-page-title and .ds-page-lead
   are all defined in ampuh-design-system.css, which every public page already links, so the
   layout exists here already and only the dark treatment was missing. Using those same four
   names means the markup on a legal page is now byte-identical to the markup on /audit-tools/,
   and there is no second vocabulary to learn or to drift.

   WHY NOT SIMPLY LINK page-masthead.css. Measured: 24 KB and 64 rules, of which 30 style light
   plates that cannot appear on a public page - .plan-chip, .score-panel, .context-chip, .ds-spec,
   .mc-env, .psa-scope, the tier gauge and the segmented meter. That sheet is also written to be
   injected LAST by the shell and says so, which is a promise a hand-written <link> order cannot
   keep as reliably. Shipping 24 KB of workspace furniture to the pages that exist to be crawled
   is the wrong trade.

   THE DUPLICATION IS REAL AND BOUNDED, and it is stated rather than pretended away: the gradient
   and the three light-ink rules exist in both sheets. That is the cost of two skins for one
   component, and it is smaller than either alternative - a fourth bespoke head, or the whole
   workspace sheet on every indexable page. A regression check compares the gradient in the two
   files so they cannot silently diverge into two different greens.
   ========================================================================================== */

/* The slab itself. Same three-stop pine gradient as the workspace masthead. */
.pm-head {
  padding: var(--ds-space-8, 32px) var(--ds-space-7, 28px) var(--ds-space-7, 28px);
  border-radius: var(--ds-radius-lg, 14px);
  background: linear-gradient(150deg, #08301c 0%, var(--ds-pine, #0e5631) 76%, #12693b 100%);
  color: #fbfcf7;
}

/* THE IDENTITY COLUMN AND THE PANEL. One column by default; two above 900px when a page supplies
   a panel, which is the same breakpoint .ds-page-head--split uses in the design system.

   v1.22.63. TWO COLUMNS AND A STRETCH, WHICH IS WHAT A MASTHEAD IS. The previous release wrote
   `minmax(0, 1fr) auto` with `align-items: end`, and rendering it showed what that pair actually
   means: `auto` sizes the second track to the panel's own fit-content width, and `end` sizes the
   panel to its own content height, so the head carried a small box floating against its bottom
   right corner with a third of the slab empty above it. The panel is a COLUMN of the masthead, not
   an ornament dropped into its corner: the track is declared in rem so the identity column has a
   predictable measure at every width, and `stretch` makes the panel exactly as tall as the slab.
   THE PANEL'S OWN CONTENT IS WHAT FILLS THAT HEIGHT - see .pm-panel below - because a stretched box
   with everything bunched at the top is the same defect one level down. */
.pm-head {
  display: grid;
  gap: var(--ds-space-5, 20px);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
@media (min-width: 900px) {
  .pm-head--split {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
    column-gap: var(--ds-space-8, 32px);
  }
}

/* THE IDENTITY COLUMN. v1.22.63. A COLUMN, SO IT CAN FILL ITS OWN HEIGHT. With both cells stretched,
   a shorter identity block left a band of empty gradient beneath the lead - the same imbalance as the
   floating panel, mirrored. A flex column lets the page anchor one line of navigation or provenance to
   the bottom of the slab with margin-top:auto, so the two columns end together and the height is
   filled by content rather than by air. It is opt-in by class: /guide/ carries several paragraphs in
   its head and needs no such line. */
.pm-head__identity { display: flex; flex-direction: column; }
.pm-head__meta {
  margin: auto 0 0;
  padding-top: var(--ds-space-6, 24px);
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-font-size-xs, .75rem);
  letter-spacing: .04em;
  color: oklch(80% .035 124);
}
.pm-head__meta span { color: oklch(62% .03 124); padding-inline: var(--ds-space-2, 8px); }

/* EVERY PART TAKES ITS INK BACK EXPLICITLY, and that is not belt and braces. The design system
   declares a colour on .ds-page-title and on h1, and a declaration beats inheritance every time -
   which is exactly how the /guide/ slab shipped in v1.22.54 with a heading the same colour as its
   own background. Inheriting from .pm-head is not enough for any element the system has coloured. */
.pm-head .ds-eyebrow { color: var(--ds-lime, #cbe888); }
.pm-head .ds-page-title { color: #fbfcf7; }
.pm-head .ds-page-lead,
.pm-head > div > p { color: oklch(92% .02 122); }
.pm-head a { color: var(--ds-lime, #cbe888); }
.pm-head a:hover { text-decoration: underline; }

/* .ds-code is a light plate from the design system, so on the slab it takes its own ink back -
   the same correction page-masthead.css makes for the plates it hosts. */
.pm-head .ds-code {
  border-color: oklch(100% 0 0 / .28);
  background: oklch(100% 0 0 / .12);
  color: #fbfcf7;
}

/* THE NAMEPLATE VARIANT, for a title that is two words and a noun rather than a sentence. It is
   opt-in, because a sentence set at nameplate scale is shouting.

   v1.22.63. THE SCALE CAME DOWN AND THE CAPS CAME OFF, and both were measured rather than felt.
   clamp(2.4rem, 6vw, 4.5rem) put a 72px title above a 15px heading with nothing in between: two
   type sizes and a five-fold jump between them is not a scale, it is a poster stapled to a
   document. At clamp(2.1rem, 3.6vw, 3.1rem) the title still leads the page and the section
   headings beneath it read as the next step down rather than as footnotes.
   CAPS WERE DOING THE WORK THE SIZE ALREADY DID. "TERMS OF SERVICE" in caps at 72px is the same
   claim made three times - size, weight and case - and it is also the one setting that makes a
   long title wrap badly, because caps have no descenders to give the eye a shape to follow. */
.pm-head--display .ds-page-title {
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.025em;
}
/* A LEAD NEEDS ROOM UNDER A NAMEPLATE, and rendering it showed exactly how little it had: line-height
   .94 is right for a two-word title in caps and it leaves the following paragraph sitting on the
   descenders. The space is put on the lead rather than in the title's line-height, because the title's
   tight setting is the whole reason the variant exists. */
.pm-head--display .ds-page-lead { margin-top: var(--ds-space-4, 16px); }

/* ------------------------------------------------------------------ the reading panel
   The translucent pane the workspace masthead uses for one live reading. Public pages carry a
   fact rather than a figure - an effective date, a count of tools - so the type is the same and
   the gauge is not: that gauge measures nine instruments, which is true on one page only. */
/* v1.22.63. IT FILLS ITS COLUMN, TOP TO BOTTOM. `align-self: end` plus `width: fit-content` is
   what produced the floating box this release repairs; `stretch` in both axes is the correction.
   space-between then distributes the two groups the markup supplies - the reading and its
   provenance - so the height is filled by content rather than by padding. */
.pm-panel {
  align-self: stretch;
  justify-content: space-between;
  padding: var(--ds-space-5, 20px);
  border: 1px solid oklch(100% 0 0 / .16);
  border-radius: var(--ds-radius-lg, 14px);
  background: oklch(100% 0 0 / .10);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .18);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ds-space-5, 20px);
}
.pm-panel > *, .pm-panel__body > * { margin: 0; }
/* THE READING AND ITS PROVENANCE ARE TWO GROUPS, NOT FIVE LOOSE LINES. Without the grouping,
   space-between spreads the label, the figure and the note evenly down a tall panel and the label
   stops belonging to the figure it labels. */
.pm-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2, 8px);
}
.pm-panel__foot {
  padding-top: var(--ds-space-4, 16px);
  border-top: 1px solid oklch(100% 0 0 / .16);
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-font-size-xs, .75rem);
  line-height: 1.55;
  color: oklch(80% .035 124);
}
.pm-panel__label {
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-font-size-xs, .75rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: oklch(78% .04 122);
}
.pm-panel__figure {
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-font-size-lg, 1.0625rem);
  line-height: 1.15;
  color: oklch(90% .03 122);
}
.pm-panel__figure b { color: var(--ds-lime, #cbe888); font-weight: 800; }
.pm-panel__note {
  font-size: var(--ds-font-size-sm, .8125rem);
  line-height: 1.45;
  color: oklch(80% .035 124);
}

/* ------------------------------------------------------------------ ONE COLUMN
   Below 900px the grid is already single-column, so this only has to stop the panel behaving
   like a card floated beside nothing. */
@media (max-width: 899px) {
  .pm-head { padding: var(--ds-space-6, 24px) var(--ds-space-5, 20px) var(--ds-space-5, 20px); }
  /* One column, so the panel is already the width of the slab and stretch is meaningless in a
     single-column grid. It only has to stop being taller than the copy it supports. */
  .pm-panel { gap: var(--ds-space-4, 16px); }
}

/* ------------------------------------------------------------------ PAPER
   A legal document gets printed, and a full-bleed gradient costs a page of toner to say nothing.
   Black on white, and the panel becomes a bordered fact list. */
@media print {
  .pm-head {
    border-radius: 0;
    background: none;
    color: #000;
    border-bottom: 2px solid #000;
    padding-inline: 0;
  }
  .pm-head .ds-eyebrow,
  .pm-head .ds-page-title,
  .pm-head .ds-page-lead,
  .pm-head > div > p,
  .pm-head a { color: #000; }
  .pm-head .ds-code { border-color: #000; background: none; color: #000; }
  .pm-panel { border-color: #000; background: none; box-shadow: none; }
  .pm-panel__label, .pm-panel__figure, .pm-panel__figure b, .pm-panel__note,
  .pm-panel__foot { color: #000; border-color: #000; }
}