/* ---- The shared surfaces ---------------------------------------------------
   One job: the surfaces every page composes and nobody redraws. The ledger
   line that heads them, the panel itself, the page header above them, the
   timeline, and the folded "how to read this" note (style guide 7.1, 7.2,
   6.2, 7.12). Layout and page families stay in `base.css` and the per-page
   sheets; the theming layer stays in `tokens.css`.

   Its two neighbours were split out of this file when it neared its ceiling,
   each with one responsibility of its own: `status.css` is the vocabulary for
   saying what state a thing is in (7.4), and `feedback.css` is what the app
   says back to the reader (7.9, 7.10, 7.11, 8). Anything linking this file
   wants all three; they are linked together, in that order.

   The rule this file holds: **a surface is a border and a hairline, nothing
   more.** No shadow, no left spine, no coloured header, no tone that means
   something. A panel that needs to say something uses a notice; a panel that
   needs to say what state it is in uses a chip. Neither is drawn here.
   -------------------------------------------------------------------------- */

/* ---- 7.1 The ledger line --------------------------------------------------
   The header of every panel, form section, sidebar group, report section and
   card: the title at the left, an optional quiet action, then the requirement
   or clause in mono at the right, on a hairline. Never uppercase. */

.legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-16);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--rule);
}
.legend__title {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
/* The group form: a sidebar group, a form section, a table's own name. */
.legend--group .legend__title {
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: var(--fw-medium);
  color: var(--slate);
}
.legend__end {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--sp-12);
  min-width: 0;
}
.legend__action { flex: none; }
/* The clause gives way, not the title: a long product name in a 248px sidebar
   truncates rather than pushing the group title onto two lines. */
/* The disclosure form (7.12): a `<summary>` that is the panel's ledger line,
   with a chevron that turns. `display: flex` already removes the native
   marker in the engines that draw one inside the box; the two rules below
   remove the ones drawn outside it. */
.legend--summary {
  cursor: pointer;
  list-style: none;
}
.legend--summary::-webkit-details-marker { display: none; }
.legend__chevron {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--slate);
  transition: transform var(--dur-2) var(--ease);
}
[open] > .legend--summary .legend__chevron { transform: rotate(180deg); }

.legend__clause {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ---- 7.2 The panel --------------------------------------------------------
   The one surface. No shadow, no left spine, no coloured header. */

.panel {
  position: relative;  /* the in-flight bar below hangs off this edge */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-20);
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.panel + .panel { margin-top: var(--sp-24); }
/* A quiet aside, and the ground a row opens onto in a table. */
.panel--sunk {
  background: var(--surface-sunk);
  border: none;
}
/* A panel that belongs to a later state: its legend and a one-line reason,
   never hidden and never shown empty. It is a `<details>`, so the body is the
   browser's to hide; the rule below is the same hiding stated for the engines
   that still lay a flex `<details>` out with its content showing, and it is
   scoped to the closed state so opening one really opens it. */
.panel--collapsed:not([open]) .panel__section { display: none; }
/* Folded, the panel is its ledger line and nothing else: the surface stops
   just under the hairline instead of leaving an empty band below it. */
.panel--collapsed:not([open]) { padding-bottom: var(--sp-8); }
.panel__reason {
  margin: 0;
  color: var(--slate);
  font-size: var(--fs-small);
}
/* The reason is the part of the ledger line that gives way: it shares the row
   with the title and the clause where there is room, and takes a row of its
   own under them where there is not, so the clause keeps its words rather
   than truncating to make space for the sentence. Only this panel's summary
   wraps: the rail's closure disclosures use the same `.legend--summary` and
   have no reason to fit, so their line stays one line. */
.panel--collapsed > .legend--summary { flex-wrap: wrap; }
.panel--collapsed .panel__reason { flex: 1 1 12rem; }
/* Shut, the ledger line is the whole panel, so it sits on the panel's own
   border rather than drawing a hairline with nothing under it. */
.panel--collapsed:not([open]) > .legend--summary { border-bottom: none; }
.panel__section + .panel__section {
  border-top: 1px solid var(--line-soft);
  padding-top: var(--sp-16);
}

@media (max-width: 48rem) {
  .panel { padding: var(--sp-16); }
  /* Ordered past the clause rather than wrapped before it: the title and its
     clause stay one line, and the reason is the line under them. */
  .panel--collapsed .panel__reason { order: 1; flex-basis: 100%; }
}

/* ---- 6.2 The page header --------------------------------------------------
   The surface every page starts with, and the only thing above a page body:
   the parent one level up, the title row, and one sentence saying what the
   page is for. It lives here rather than in a page sheet because it is the
   one anatomy every archetype shares, and because the offline audit pack
   renders it from the same stylesheet list. */

.page-header {
  display: grid;
  gap: var(--sp-8);
  margin-bottom: var(--sp-24);
}

/* The parent, one level up. The chevron is the sprite's, turned a quarter
   turn: one drawn shape, never a typed arrow. */
.page-header__context {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.page-header__context a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
}
.page-header__chevron {
  flex: none;
  width: 1rem;
  height: 1rem;
  transform: rotate(90deg);
}

/* The identifier sits above the words rather than beside them: a tracking
   number and a sentence-long title on one line leave the title nowhere to
   wrap. Mono, one step down from the title, never coloured by status. */
.page-header__ident {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.page-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  flex-wrap: wrap;
}
.page-header__titles {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}
.page-header__title {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-semibold);
  min-width: 0;
}
/* The chip's own box, so a record can swap its status out of band without
   the swap changing the row's layout. */
.page-header__status { display: inline-flex; }
.page-header__action { flex: none; }
/* A page whose action is a form (`actions_template`) puts it in this slot,
   already aligned by the header's own row: the standing top margin an export
   form carries in a card would push it below the title. */
.page-header__action .export-form { margin-top: 0; }

.page-header__lede {
  margin: 0;
  color: var(--slate);
  max-width: var(--measure-prose);
}

/* Below `lg` the action drops under the title rather than squeezing it: the
   title is what the reader is looking for, and a two-word button beside a
   wrapped heading reads as part of the heading. */
@media (max-width: 64rem) {
  .page-header__row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- 7.12 Timeline --------------------------------------------------------
   A spine at the left, one cell glyph per entry in its status tone, the
   timestamp in mono, newest at the top. The glyph carries its panel's ground
   so the spine runs behind the entries and not through them; the spine is the
   list's absolutely positioned `::before`, which paints above static content,
   so the glyph is positioned too and wins on tree order. */

.timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-16);
}
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: var(--rule);
}
.timeline__entry {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: start;
}
.timeline__glyph {
  position: relative;
  width: 12px;
  height: 12px;
  margin-top: 0.3rem;
  color: var(--slate);
  background: var(--surface);
}
.timeline__body { min-width: 0; }
.timeline__when {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  color: var(--slate);
}
.timeline__what {
  display: block;
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  color: var(--ink-2);
}

/* ---- 7.12 "How to read this" ----------------------------------------------
   A page's own explanation, folded away. The lede says what the page is for in
   one sentence (6.2); the paragraphs that used to sit under a title as a wall
   of clause numbers live here, one click from the reader who wants them and
   out of the way of the reader who does not. Native `<details>`, so it opens,
   closes and takes a keyboard with no script at all. */

.page-note {
  margin: 0 0 var(--sp-24);
  max-width: var(--measure-prose);
}
.page-note__head {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  cursor: pointer;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-medium);
  color: var(--accent-deep);
  list-style: none;
}
.page-note__head::-webkit-details-marker { display: none; }
.page-note__chevron {
  flex: none;
  width: 1rem;
  height: 1rem;
  transition: transform var(--dur-2) var(--ease);
}
.page-note[open] .page-note__chevron { transform: rotate(180deg); }
.page-note__body {
  margin: var(--sp-8) 0 0;
  color: var(--slate);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}