/* extra.css - presentation-only overrides for the optional rendered "intranet"
 * site (the mkdocs_site flag). Nothing here changes document content or
 * meaning: the markdown sources stay the source of truth and render correctly
 * on GitHub, which remains the default publishing model.
 *
 * Sections:
 *   1. Layout width
 *   2. Left-hand navigation hierarchy
 *   3. Wide reference tables (clause maps)
 *   4. Risk band colour coding
 *   5. Homepage system map
 */

/* ------------------------------------------------------------------------ *
 * 1. Layout width
 *
 * Material caps every .md-grid at 61rem (~1220px), which wastes most of a
 * modern screen and is the root cause of the crushed clause-map columns.
 * ------------------------------------------------------------------------ */

.md-grid {
  max-width: 88rem;
}

/* ------------------------------------------------------------------------ *
 * 2. Left-hand navigation hierarchy
 *
 * The top-level groups are native Material collapsibles (mkdocs.yml leaves
 * navigation.sections out), each label a checkbox-driven toggle. Material
 * styles that label exactly like the child links beneath it, so a group
 * reads as just another page instead of a heading.
 *
 * Fix: larger, full-strength ink, with a hairline rule and real breathing
 * room so the group reads as a heading at a glance - applied only at the
 * desktop breakpoint (76.25em, where the sidebar is permanent), because
 * below it the same markup renders as Material's drill-down drawer, which
 * should keep its native look.
 * ------------------------------------------------------------------------ */

/* Expand-all / collapse-all controls (injected by nav-collapse.js): hidden
 * by default so the mobile drill-down drawer, where "expand all" is
 * meaningless, never shows them; the desktop block below reveals them.
 * Source order matters here - this base rule must precede that block. */
.nav-collapse {
  display: none;
}

@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__list > .md-nav__item--nested > .md-nav__link {
    color: var(--md-default-fg-color);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.005em;
    margin-bottom: 0.3rem;
    padding-bottom: 0.25rem;
    border-bottom: 0.05rem solid var(--md-default-fg-color--lightest);
  }

  /* Separate the groups from one another. */
  .md-nav--primary > .md-nav__list > .md-nav__item--nested {
    margin: 1.2em 0 0.9em;
  }

  .md-nav--primary > .md-nav__list > .md-nav__item--nested > .md-nav > .md-nav__list > .md-nav__item {
    margin-top: 0.35em;
  }

  /* Expand-all / collapse-all controls (injected by nav-collapse.js). Quiet
   * text buttons: the menu itself is the feature, not the controls. */
  .nav-collapse {
    display: flex;
    gap: 0.55rem;
    margin: 0.4rem 0 0.2rem;
  }

  .nav-collapse__button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--md-default-fg-color--light);
    cursor: pointer;
  }

  .nav-collapse__button:hover,
  .nav-collapse__button:focus-visible {
    color: var(--md-accent-fg-color);
  }
}

/* Child page links: slightly more line spacing so multi-line titles
 * (most document titles here wrap) don't merge into one another. */
.md-nav--primary .md-nav__item .md-nav__link {
  line-height: 1.4;
}

/* The right-hand table of contents gets the same heading treatment so the
 * two rails read consistently. */
.md-nav--secondary .md-nav__title {
  color: var(--md-default-fg-color);
  font-size: 0.78rem;
}

/* ------------------------------------------------------------------------ *
 * 3. Wide reference tables (clause maps)
 *
 * Material sets max-width:100% on tables, so a 9-column table can never
 * exceed its container and the .md-typeset__scrollwrap (which already has
 * overflow-x:auto) never actually scrolls - the columns crush instead.
 * Releasing the cap lets the table take its natural width and scroll.
 *
 * Scoped with :has() to tables of 8+ columns so ordinary 2-4 column tables
 * are untouched.
 * ------------------------------------------------------------------------ */

/* width:max-content is what actually lets the table outgrow its container -
 * releasing max-width alone is not enough, because a table still shrinks to
 * fit the available width. With max-content the browser sizes every column to
 * its own content and the scrollwrap scrolls.
 *
 * Sizing is deliberately content-driven, never positional: these wide tables
 * do not share a column order (the clause maps have Requirement in column 3,
 * the objectives table has Discipline there), so any nth-child width rule is
 * right for one table and wrong for the next. */
.md-typeset table:not([class]):has(th:nth-child(8)) {
  width: max-content;
  max-width: none;
  min-width: 100%;
}

/* The only cap needed: stop one prose column from running away and making the
 * whole table absurdly wide. Short columns keep their natural narrow width. */
.md-typeset table:not([class]):has(th:nth-child(8)) th,
.md-typeset table:not([class]):has(th:nth-child(8)) td {
  max-width: 26rem;
}

/* Long hyphenated document slugs should break rather than force a wide
 * column. */
.md-typeset table:not([class]):has(th:nth-child(8)) td a {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------------ *
 * 3b. Clause-map tables: fit the viewport, no horizontal scroll
 *
 * The two clause-map pages are the only tables with ten columns, and since
 * the obligation/statement-of-compliance redesign they share one column
 * order - so positional sizing is safe here (the objection above applies to
 * the mixed-order 8/9-column tables, which keep their scroll behaviour).
 * A fixed proportional layout puts the width where the prose is: the
 * statement of compliance gets a third of the page, the short columns wrap
 * within slim allocations, and the whole row fits in a single view on a
 * desktop screen. Below Material's 1220px breakpoint the fixed layout would
 * crush, so narrow screens fall back to the scrolling behaviour above.
 * ------------------------------------------------------------------------ */
@media screen and (min-width: 76.25em) {
  .md-typeset table:not([class]):has(th:nth-child(10)) {
    table-layout: fixed;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-size: 0.58rem;
    line-height: 1.35;
  }
  .md-typeset table:not([class]):has(th:nth-child(10)) th,
  .md-typeset table:not([class]):has(th:nth-child(10)) td {
    padding: 0.45em 0.5em;
    max-width: none;
    white-space: normal;
    overflow-wrap: break-word;
    vertical-align: top;
  }
  /* Column budget (sums to 100%):
   *  1 Req ID 6 | 2 Clause 4.5 | 3 Obligation 12.5 | 4 Implementing doc 13
   *  5 Statement of compliance 33 | 6 Section 8 | 7 Evidencing register 7
   *  8 Records folder 6.5 | 9 Status 4.5 | 10 Integrated with 5 */
  .md-typeset table:not([class]):has(th:nth-child(10)) th:nth-child(1) { width: 6%; }
  .md-typeset table:not([class]):has(th:nth-child(10)) th:nth-child(2) { width: 4.5%; }
  .md-typeset table:not([class]):has(th:nth-child(10)) th:nth-child(3) { width: 12.5%; }
  .md-typeset table:not([class]):has(th:nth-child(10)) th:nth-child(4) { width: 13%; }
  .md-typeset table:not([class]):has(th:nth-child(10)) th:nth-child(5) { width: 33%; }
  .md-typeset table:not([class]):has(th:nth-child(10)) th:nth-child(6) { width: 8%; }
  .md-typeset table:not([class]):has(th:nth-child(10)) th:nth-child(7) { width: 7%; }
  .md-typeset table:not([class]):has(th:nth-child(10)) th:nth-child(8) { width: 6.5%; }
  .md-typeset table:not([class]):has(th:nth-child(10)) th:nth-child(9) { width: 4.5%; }
  .md-typeset table:not([class]):has(th:nth-child(10)) th:nth-child(10) { width: 5%; }
  /* Req IDs and register names break at their hyphens instead of forcing
   * width; slugs in links already break via the rule above. */
  .md-typeset table:not([class]):has(th:nth-child(10)) td:nth-child(1),
  .md-typeset table:not([class]):has(th:nth-child(10)) td:nth-child(10) {
    overflow-wrap: anywhere;
  }
}

/* A cell whose entire content is a single code token - a field type, a slug,
 * an identifier - should not wrap mid-token. Keeping it on one line also makes
 * auto table layout give the column its natural width instead of squeezing it
 * to nothing next to a long prose column (the Type column on the registers
 * index, next to Details).
 *
 * :only-child is what keeps this safe: code appearing inside a sentence is
 * left alone, so prose cells still wrap normally. */
.md-typeset table:not([class]) td > code:only-child {
  white-space: nowrap;
}

/* Tighten the generous default cell padding so the extra width goes to text
 * rather than to gutters. */
.md-typeset table:not([class]):has(th:nth-child(8)) th,
.md-typeset table:not([class]):has(th:nth-child(8)) td {
  padding: 0.7em 0.9em;
}

/* ------------------------------------------------------------------------ *
 * 4. Risk band colour coding
 *
 * Green -> red heat map for the risk bands defined in the Risk, Opportunity &
 * Hazard Methodology (Low / Medium / High / Extreme).
 *
 * These are the four reserved STATUS roles (good / warning / serious /
 * critical), not a categorical series and not a single-hue ordinal ramp:
 *   Low      good      #0ca30c
 *   Medium   warning   #fab219
 *   High     serious   #ec835a
 *   Extreme  critical  #d03b3b
 *
 * Accessibility: colour is never the only channel - every coded cell also
 * carries the band word as text ("12 - High", "Extreme"), which is the
 * documented mitigation for the status palette. Tints are low-alpha over the
 * page surface so body-text contrast is essentially unchanged, and the tints
 * are alpha rather than fixed hex so they compose over either theme's
 * background.
 * ------------------------------------------------------------------------ */

:root {
  --risk-low: #0ca30c;
  --risk-medium: #fab219;
  --risk-high: #ec835a;
  --risk-extreme: #d03b3b;

  --risk-low-tint: rgba(12, 163, 12, 0.16);
  --risk-medium-tint: rgba(250, 178, 25, 0.22);
  --risk-high-tint: rgba(236, 131, 90, 0.26);
  --risk-extreme-tint: rgba(208, 59, 59, 0.2);
}

[data-md-color-scheme="slate"] {
  --risk-low-tint: rgba(12, 163, 12, 0.28);
  --risk-medium-tint: rgba(250, 178, 25, 0.26);
  --risk-high-tint: rgba(236, 131, 90, 0.28);
  --risk-extreme-tint: rgba(208, 59, 59, 0.34);
}

.md-typeset table:not([class]) td.risk-band {
  font-weight: 600;
  white-space: nowrap;
}

.md-typeset table:not([class]) td.risk-band--low {
  background-color: var(--risk-low-tint);
}

.md-typeset table:not([class]) td.risk-band--medium {
  background-color: var(--risk-medium-tint);
}

.md-typeset table:not([class]) td.risk-band--high {
  background-color: var(--risk-high-tint);
}

.md-typeset table:not([class]) td.risk-band--extreme {
  background-color: var(--risk-extreme-tint);
}

/* In the 5x5 grid the leading cell of each row is the likelihood label; keep
 * it visually outside the heat map. */
.md-typeset table:not([class]) td.risk-band:first-child {
  white-space: normal;
}

/* Forced-colours / high-contrast: background tints are dropped by the OS, so
 * restore a visible channel via a border. The band word carries the meaning
 * in any case. */
@media (forced-colors: active) {
  .md-typeset table:not([class]) td.risk-band {
    border: 2px solid currentColor;
  }
}

@media print {
  .md-typeset table:not([class]) td.risk-band {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ------------------------------------------------------------------------ *
 * 5. Homepage system map
 *
 * javascripts/system-map.js swaps the homepage mermaid diagram for the
 * designed drawing sheet in assets/ims-system-map.html (design master:
 * "IMS System Map v2.dc.html", held with the project working papers
 * outside this repository). The sheet's markup carries its
 * geometry inline; everything theme-dependent lives here as custom
 * properties, keyed off Material's colour-scheme attribute so the map
 * follows the site's light/dark toggle rather than the OS preference.
 * ------------------------------------------------------------------------ */

/* The sheet is fixed-width by design (an A-series drawing, not a fluid
 * layout): scroll it, never crush it. */
.ims-map-wrap {
  overflow-x: auto;
  margin: 1.25em 0;
}

/* Once the sheet is in (the slot only becomes .ims-map-wrap on a successful
 * fetch), the mermaid fallback that follows it must not show. Material
 * mounts mermaid asynchronously, so the script's removal of the element can
 * lose that race - this rule hides whatever mermaid element ends up there,
 * whenever it lands. It also means: no second mermaid diagram after the map
 * on the homepage; the swap owns everything .mermaid that follows it. */
.ims-map-wrap ~ .mermaid {
  display: none;
}

.ims-map {
  --paper: #ffffff;
  --ink: #1b1f24;
  --muted: #575e66;
  --label: #495057;
  --line: #343a42;
  --edge: #343a42;
  --red: #b4381e;
  --boxfill: #f3f4f5;

  font-family: var(--md-code-font-family, monospace);
}

[data-md-color-scheme="slate"] .ims-map {
  --paper: #0d1117;
  --ink: #e6edf3;
  --muted: #97a1ac;
  --label: #a9b4c0;
  --line: #8b95a0;
  --edge: #8b95a0;
  --red: #e0644a;
  --boxfill: #151b23;
}

/* ------------------------------------------------------------------------ *
 * 6. Document identity
 *
 * overrides/main.html renders the document number in a callout above the
 * body and the full control set as the document's final numbered section,
 * both from the frontmatter check_docs.py validates. The heading is a bare
 * h2 so Material styles it like every other section heading, and
 * javascripts/doc-control-toc.js lists it in the page ToC. Nothing is typed
 * into a document body, so nothing drifts.
 * ------------------------------------------------------------------------ */

/* A compact callout carrying the one thing a reader needs on arrival: which
 * controlled document this is. Everything else sits in the control table at
 * the foot of the document. */
.md-typeset .doc-id {
  display: inline-block;
  margin: 0 0 1.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 3px solid var(--md-primary-fg-color);
  border-radius: 2px;
  background: var(--md-code-bg-color);
  line-height: 1.35;
}

.doc-id__label {
  display: block;
  color: var(--md-default-fg-color--light);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.doc-id__value {
  display: block;
  color: var(--md-default-fg-color);
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.8rem;
  font-weight: 600;
}

.doc-control {
  margin-top: 2.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

/* Styled to match the markdown tables above it (Revision History): bold
 * column headings, grey hairlines between rows. Deliberately classed so the
 * wide-table rules in section 3 never apply to it; the native look is
 * replicated here instead. */
.md-typeset .doc-control__table {
  width: auto;
  min-width: min(30rem, 100%);
  border-collapse: collapse;
  font-size: 0.64rem;
  line-height: 1.6;
}

.md-typeset .doc-control__table th,
.md-typeset .doc-control__table td {
  padding: 0.59rem 0.7rem;
  border-bottom: 0.05rem solid var(--md-typeset-table-color, rgba(0, 0, 0, 0.12));
  text-align: left;
  vertical-align: top;
}

.md-typeset .doc-control__table th[scope="row"] {
  width: 10rem;
  font-weight: 700;
  white-space: nowrap;
}

.md-typeset .doc-control__note {
  margin-top: 0.4rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.62rem;
}

@media print {
  .doc-control { break-inside: avoid; }
}