/* ============================================================
   SOVEREIGN AI CLOUD — the surface's own composition inside the
   GOLD ECOSYSTEM SHELL.

   THE SHELL IS NOT INTERPRETED HERE. `tokens.css` (Gold), `physics.css` and
   `surface.css` (mediaholding.tech) are byte-identical deliveries of the
   accepted implementation — see site/INHERITANCE.md. Nothing in this file
   redefines a shell token, a shell law or a shell component. Every rule
   below names the FUNCTION that requires it (GOLD IS THE DEFAULT.
   DIFFERENCE REQUIRES A FUNCTIONAL REASON — dm-20260829-351). A rule with
   no functional reason does not belong here.

   The functions this surface has that the group site and the Gold landing
   do not: the information architecture of a cloud platform (fourteen
   pages, primary navigation), developer-documentation density (code,
   tables, an API reference), a cabinet entry, a pricing table, a status
   page, a legal contour of ten documents, and the claim-discipline status
   label on every capability line (FACTS §5).
   ============================================================ */

/* ---- 1 · THE IDENTITY LADDER ------------------------------------------
   FUNCTION: the product's identity opens every page (Gold law: the identity
   stands on every page). The levers are the ones the group site already
   proved for the same roles — arrival `clamp(19px, 3.6vw, 23px)` and page
   `clamp(17px, 3vw, 19px)` (surface.css §1, the readability floor of
   6.8px for the signature line) — applied to the PRODUCT lockup, because on
   this surface the product is the identity that arrives. `.mh-prodlock`
   alone carries the row lever of the group site's product list, which is
   calibrated for a column; these two classes name the other two roles. */
.mh-prodlock.sc-hero { --mark: clamp(19px, 3.6vw, 23px); }
.mh-prodlock.sc-page { --mark: clamp(17px, 3vw, 19px); }
.sc-hero-id { text-align: center; }

/* ---- 2 · THE HOME ARRIVAL ---------------------------------------------
   FUNCTION: the arrival chrome (surface.css §13) already owns the air above
   the identity; the hero band below it must not add a second header pad.
   Values are the group site's own `.mh-hero` closing (half-speech), only
   the top is flush. */
.sc-hero { padding-top: 0; padding-bottom: calc((clamp(44px, 7vh, 72px) + var(--section)) / 2); }
.sc-hero .lede { margin-left: auto; margin-right: auto; text-align: center; }
.sc-hero .mh-actions { justify-content: center; }

/* ---- 3 · PRIMARY NAVIGATION --------------------------------------------
   FUNCTION: fourteen routes need a primary navigation; the group site has
   two. The register is the shell's `.navlinks a` untouched; what is added is
   only room to wrap on a phone and a minimum click box (WCAG 2.5.8 AA,
   24×24 CSS px) that changes no geometry at rest. */
.navlinks { row-gap: 6px; }
.navlinks a, .langs a, footer.section nav a, .ins-more {
  display: inline-flex; align-items: center; min-height: 24px;
}
.sc-nav-home { color: var(--silver) !important; }

/* ---- 4 · TOUCH TARGETS (coarse pointer only) --------------------------
   FUNCTION: a platform operated from phones must meet the 44 px touch
   target (WCAG 2.5.5; directive §7 «продуманная мобильная версия»). The
   hit area is real box, not a negative-margin trick — overlapping targets
   in a wrapped row would make the wrong link answer a thumb. So on coarse
   pointers the navigation rows take more height; fine pointers keep the
   shell's geometry exactly (24 px boxes, WCAG 2.5.8). Measured by
   scripts/mobile-check.mjs at 390×844 with touch. */
@media (pointer: coarse) {
  .navlinks { row-gap: 0; }
  .navlinks a, .langs a, footer.section nav a, .gi-legalhead nav a, .sc-doc-toc a {
    min-height: 44px; min-width: 44px; justify-content: center; padding: 0 4px;
  }
  .navlinks a { margin-left: 8px; }
  .navlinks a:first-child { margin-left: 0; }
  footer.section nav.gi-foot-rights { gap: 0 10px; }
  .gi-fg-line { display: inline-flex; align-items: center; min-height: 44px; }
  .ins-more { display: inline-flex; align-items: center; min-height: 44px; }
  .mhls-trigger { min-height: 44px; min-width: 44px; }
  .btn { min-height: 44px; min-width: 44px; }
}

/* ---- 4a · NOTES ARE SENTENCES, NOT LABELS --------------------------------
   FUNCTION: claim discipline puts whole sentences in the quiet marker voice
   (the status legend, «indicative — PROJECTED», the cabinet's honesty note).
   A sentence a person must read stays on the reading floor (16 px); the
   label register's 10 px is for metadata words, not for terms. */
.sc-note, .sc-legend, .sc-lang-notice, .sc-notice, .sc-banner { font-size: 1rem; line-height: 1.6; }

/* ---- 5 · THE PAGE-LANGUAGE NOTICE --------------------------------------
   FUNCTION: an Estonian page authored by a machine without native review,
   or a page carried in English under another language code, must say so
   before the reader reads (Human Trust Architecture; FACTS §2: no local
   model writes publishable Estonian). Information material: one hairline
   and air, no fill (material law). */
.sc-lang-notice {
  margin: 0; padding: 12px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-transform: none; letter-spacing: .02em; color: var(--muted);
  font-size: .82rem; max-width: var(--measure);
}

/* ---- 6 · CAPABILITY ROWS AND THE STATUS LABEL -------------------------
   FUNCTION: every capability line carries MEASURED / BUILT / PLANNED
   (FACTS §5). The row is the shell's own `.gi-row` (tokens.css) — a text
   name beside its meaning — so its geometry is Gold's text-row law, not the
   group site's identity-row law (which widens the column and opens
   `--gap-brand` under a lockup; here the first column holds a name). The
   label takes the shell's quiet `.label` voice; the three states differ by
   the structural inks the palette already owns — silver, muted, faint —
   and by their word, never by colour alone. */
.sc-cap.mat-info.gi-row {
  grid-template-columns: minmax(180px, .8fr) 2fr; gap: 10px 34px; padding: 20px 0 22px;
}
@media (max-width: 719px) {
  .sc-cap.mat-info.gi-row { grid-template-columns: 1fr; gap: 8px; padding: 16px 0 18px; }
}
.sc-cap .mh-pn { margin: 0 0 8px; }
.sc-status { display: inline-block; margin: 0; }
.sc-status[data-status="measured"] { color: var(--silver); }
.sc-status[data-status="built"] { color: var(--muted); }
.sc-status[data-status="planned"] { color: var(--faint); }
.sc-status-note { display: block; margin-top: 4px; text-transform: none; letter-spacing: .02em; color: var(--faint); }
.sc-legend { text-transform: none; letter-spacing: .02em; color: var(--muted); max-width: var(--measure); margin: 0 0 18px; }
.sc-note { text-transform: none; letter-spacing: .02em; color: var(--faint); margin: 10px 0 0; max-width: var(--measure); }

/* ---- 7 · THE READING FLOOR ---------------------------------------------
   FUNCTION: body copy on this surface is read, not glanced at (models,
   terms, prices). The shell sets the reading floor at 16/17/18 px by
   viewport (tokens.css); the group site's row copy sits at .95rem, under
   that floor on a phone. Row copy here stays ON the floor: 1rem. */
.sc-copy { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.75; max-width: var(--measure); }
.sc-copy + .sc-copy { margin-top: .9em; }
.sc-say { margin: 14px 0 0; }
.sc-read { max-width: var(--measure); }
.sc-read h2 { font-size: .86rem; margin: 0 0 14px; }
.sc-read p, .sc-read li { color: var(--muted); font-size: 1rem; line-height: 1.75; }
.sc-read p { margin: 0 0 1.15em; overflow-wrap: anywhere; }
.sc-read ul, .sc-read ol { margin: 0 0 1.15em; padding-inline-start: 1.3rem; }
.sc-read li + li { margin-top: 6px; }
.sc-read strong { color: var(--text); font-weight: 600; }
.sc-read a, .sc-copy a, .sc-table a, .sc-doc a { color: var(--gold-lo); text-decoration: underline; text-underline-offset: .28em; }
.sc-read a:hover, .sc-copy a:hover, .sc-table a:hover, .sc-doc a:hover { color: var(--gold-hi); }
.sc-band > .label { margin: 0 0 18px; }
.sc-band .h-section + .sc-copy { margin-top: 0; }

/* ---- 8 · STEPS ---------------------------------------------------------
   FUNCTION: a way in is a sequence (create a key → call → read the usage);
   the group site has no sequence to state. Numbers in the label register. */
.sc-steps { list-style: none; margin: 0; padding: 0; max-width: var(--measure); counter-reset: sc-step; }
.sc-steps li { position: relative; padding: 16px 0 18px 3.2rem; border-top: 1px solid var(--line); counter-increment: sc-step; }
.sc-steps li::before {
  content: counter(sc-step, decimal-leading-zero); position: absolute; left: 0; top: 18px;
  font-size: .64rem; font-weight: 600; letter-spacing: .22em; color: var(--faint);
}
.sc-steps li:last-child { border-bottom: 1px solid var(--line); }
.sc-steps h3 { margin: 0 0 6px; font-size: .78rem; letter-spacing: .18em; }

/* ---- 9 · TABLES ---------------------------------------------------------
   FUNCTION: a model catalogue, a pricing breakdown, an error contract and a
   benchmark record are tabular. The shell has no table (its board is a
   grid of photographs). Material: hairlines and air, tabular numerals, the
   reading floor; on a phone a row becomes a block of labelled lines so no
   column is ever pushed off the screen. */
.sc-table-wrap { max-width: var(--content); }
.sc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sc-table th {
  text-align: start; font-size: .64rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--faint); padding: 0 14px 10px 0; border-bottom: 1px solid var(--line); vertical-align: bottom;
}
.sc-table td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.sc-table td:first-child, .sc-table th:first-child { padding-inline-start: 0; }
.sc-table td.sc-key { color: var(--text); font-weight: 600; }
.sc-table code { color: var(--silver); }
@media (max-width: 719px) {
  .sc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sc-table tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .sc-table td { display: grid; grid-template-columns: minmax(7rem, .9fr) 2fr; gap: 6px 12px; padding: 4px 0; border: 0; }
  .sc-table td::before {
    content: attr(data-th); font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--faint); padding-top: .25em;
  }
}

/* ---- 10 · CODE ------------------------------------------------------------
   FUNCTION: developer documentation carries code the reader copies. A
   decision-surface frame (hairline, no fill, no shadow — the shell's
   `.mat-decision` material), monospace, horizontally scrollable so the page
   never overflows. */
.sc-code {
  margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  overflow-x: auto; max-width: var(--content);
  font: 400 .92rem/1.6 ui-monospace, "Cascadia Mono", "Consolas", "SFMono-Regular", Menlo, monospace;
  color: var(--silver); white-space: pre; -webkit-overflow-scrolling: touch;
}
.sc-code code { font: inherit; color: inherit; }
code { font: 400 .92em/1.5 ui-monospace, "Cascadia Mono", "Consolas", "SFMono-Regular", Menlo, monospace; color: var(--silver); overflow-wrap: anywhere; }
.sc-codehead { margin: 0 0 8px; }

/* ---- 11 · PRICING TIERS ------------------------------------------------
   FUNCTION: four commercial variants of one decision. The material is the
   shell's own `.mat-tier` inside its own `.grid-2`; nothing is invented. The
   price line is the shell's value register (`.num`), the indicative label
   is the quiet marker voice. */
.sc-tiers { margin-top: 8px; }
.sc-tier .h-section { font-size: .86rem; margin: 0 0 10px; }
.sc-price { margin: 0 0 6px; color: var(--text); font-size: clamp(1.15rem, 1rem + .6vw, 1.42rem); font-weight: 600; letter-spacing: .02em; }
.sc-price small { display: block; font-size: .72rem; font-weight: 500; letter-spacing: .06em; color: var(--muted); margin-top: 2px; }
.sc-tier ul { margin: 12px 0 18px; padding-inline-start: 1.1rem; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.sc-tier li + li { margin-top: 4px; }
.sc-tier .btn { margin-top: auto; }
.sc-tier > .label { margin: 0 0 10px; }

/* ---- 12 · NOTICES AND THE DRAFT BANNER --------------------------------
   FUNCTION: a legal document under lawyer review must say so above its
   first line; a non-English legal page must say the English text is the
   binding one. Decision-surface material for the banner (a frame the
   reader must notice), information material for the notice. */
.sc-banner {
  margin: 0 0 clamp(24px, 4vh, 40px); padding: 14px 18px; border: 1px solid var(--line-gold); border-radius: var(--radius);
  text-transform: none; letter-spacing: .02em; color: var(--muted); font-size: .86rem; max-width: var(--measure);
}
.sc-banner b { color: var(--silver); letter-spacing: .18em; text-transform: uppercase; font-size: .66rem; display: block; margin-bottom: 4px; }
.sc-notice { margin: 0 0 clamp(24px, 4vh, 40px); padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-transform: none; letter-spacing: .02em; color: var(--muted); font-size: .86rem; max-width: var(--measure); }

/* ---- 13 · THE LEGAL PAGE, AS CLASSES ------------------------------------
   FUNCTION: Gold's legal composition (journey.py: opening on the mark's
   axis, title in the compact display register, sibling paths, the document
   at reading measure, the revision date closing it) is written INLINE in the
   accepted implementation; this bundle ships `style-src 'self'`, which
   blocks style attributes, so the same values live here as classes — the
   carrier changes, the values do not (surface.css §8 names the same
   reason). */
.sc-legal-open { padding-top: 0; padding-bottom: 0; }
.sc-legal-open .ins-identity { margin-bottom: 14px; }
.gi-legalhead nav a { color: var(--faint); font-size: .64rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; display: inline-flex; align-items: center; min-height: 24px; }
.gi-legalhead nav a:hover, .gi-legalhead nav a[aria-current="page"] { color: var(--text); }
.sc-legal .rise { margin: 0 0 clamp(30px, 5vh, 54px); }
.sc-legal h2.h-section { font-size: .86rem; margin: 0 0 14px; }
.sc-legal h3 { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--silver); margin: 18px 0 8px; }
.sc-legal p, .sc-legal li { color: var(--muted); font-size: 1rem; line-height: 1.75; }
.sc-legal p { margin: 0 0 1.15em; }
.sc-legal ul, .sc-legal ol { margin: 0 0 1.15em; padding-inline-start: 1.3rem; }
.sc-legal li + li { margin-top: 6px; }
.sc-legal strong { color: var(--text); font-weight: 600; }
.sc-legal .sc-table-wrap { margin: 0 0 1.15em; }
.sc-legal-index .gi-row .mh-pn { margin: 0 0 8px; }
main.section.sc-legal { padding-top: clamp(30px, 5vh, 54px); }

/* ---- 14 · THE API REFERENCE ----------------------------------------------
   FUNCTION: developer-doc density — an endpoint is a method, a path, its
   parameters, its body, its responses; a schema is a table of properties.
   The method is a word in the label register, never a coloured badge. */
.sc-doc { max-width: var(--content); }
.sc-doc .sc-copy { max-width: var(--measure); }
.sc-endpoint { padding: 22px 0 26px; border-top: 1px solid var(--line); }
.sc-endpoint:last-child { border-bottom: 1px solid var(--line); }
.sc-endpoint h2 { margin: 0 0 10px; font-size: .86rem; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: baseline; }
.sc-method { font-size: .64rem; letter-spacing: .22em; color: var(--gold-lo); }
.sc-path { text-transform: none; letter-spacing: .02em; color: var(--text); font: 600 1rem/1.4 ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; overflow-wrap: anywhere; }
.sc-doc h3 { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); margin: 18px 0 8px; }
.sc-doc h4 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--silver); margin: 16px 0 6px; }
.sc-schema { padding: 18px 0 22px; border-top: 1px solid var(--line); }
.sc-schema:last-child { border-bottom: 1px solid var(--line); }
.sc-schema h2 { font-size: .86rem; margin: 0 0 8px; text-transform: none; letter-spacing: .02em; font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; }
.sc-doc-toc { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.sc-doc-toc a { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-decoration: underline; text-underline-offset: .28em; display: inline-flex; align-items: center; min-height: 24px; }
.sc-doc-toc a:hover { color: var(--text); }
.sc-req { color: var(--gold-lo); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; }

/* ---- 15 · THE STATUS PAGE --------------------------------------------------
   FUNCTION: a platform reports the state of its parts. The state is a word
   and a point; the point takes the one operational colour the palette owns
   for exactly this (`--approve`, tokens.css: «operational state only»), the
   gold edge for degraded, the structural silver for down, the faint ink for
   unknown or not published — and the word always stands beside it. */
.sc-state { display: inline-flex; align-items: center; gap: 10px; color: var(--silver); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.sc-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.sc-state[data-state="operational"] i { background: var(--approve); }
.sc-state[data-state="degraded"] i { background: var(--gold-lo); }
.sc-state[data-state="down"] i { background: var(--silver); }
.sc-state[data-state="unknown"] i, .sc-state[data-state="not_published"] i { background: var(--faint); }
.sc-probe { display: block; margin-top: 6px; text-transform: none; letter-spacing: .02em; color: var(--faint); }

/* ---- 16 · CONTACT ROWS AND KEY FACTS --------------------------------------
   FUNCTION: an address, an email and a registry code are read as pairs;
   the row material is the shell's. The placeholders are rendered in the
   silver register so a reader (and the lawyer) sees them as unfilled. */
.sc-ph { color: var(--silver); font-weight: 600; letter-spacing: .04em; }

/* ---- 17 · THE PROVENANCE BAND ON HOME ---------------------------------------
   FUNCTION: the group's identity under the product (Gold's `.gi-prov-sec`);
   the lockup is the group site's page-scale ecosystem lockup, nothing is
   redrawn. Only the air above it is stated (the band follows a rows band,
   which owns the lower edge). */
.sc-prov { text-align: center; }
.sc-prov .gi-prov-human { margin-left: auto; margin-right: auto; }
.sc-prov .mh-idline { margin-top: 8px; }

/* ---- 18 · PRINT --------------------------------------------------------------
   FUNCTION: legal documents and the API reference must survive paper. */
@media print {
  .sc-code { border-color: #999; color: #111; white-space: pre-wrap; }
  .sc-table td, .sc-table th, .sc-legal p, .sc-legal li, .sc-read p, .sc-copy { color: #222 !important; -webkit-text-fill-color: #222 !important; }
  .sc-status, .sc-banner, .sc-notice { color: #000 !important; }
}

/* ---- 19 · REDUCED MOTION --------------------------------------------------------
   FUNCTION: nothing here animates; the shell already parks its field. This
   block exists so the surface declares its own absence of motion. */
@media (prefers-reduced-motion: reduce) {
  .sc-state i { transition: none; }
}

/* ---- 20 · TARGETS AND READING FLOOR — STATED LAST, SO THEY HOLD --------------
   FUNCTION: measured by scripts/mobile-check.mjs. The rules of §4/§4a lost to
   later, equally specific rules of this file (§12, §13, §14) and to the
   switcher's own injected stylesheet; order is not a carrier, so the final
   word is stated here, once, with the specificity it needs. Every box below
   is real (no negative margins), so no two targets overlap. */
.navlinks a { min-width: 24px; justify-content: center; }
.gi-fg-line { display: inline-flex; align-items: center; min-height: 24px; }
.sc-table a { display: inline-flex; align-items: center; min-height: 24px; }
.sc-copy, .sc-read p, .sc-read li, .sc-table td { overflow-wrap: anywhere; }
p.sc-note, p.sc-legend, p.sc-lang-notice, p.sc-notice, p.sc-banner { font-size: 1rem; line-height: 1.6; }
@media (pointer: coarse) {
  .gi-legalhead nav a, .sc-doc-toc a, .sc-table a, .gi-fg-line { min-height: 44px; min-width: 44px; }
  .gi-lang.mhls .mhls-trigger.mhls-trigger { min-height: 44px !important; min-width: 44px !important; }
}
.sc-doc p.sc-note a { display: inline-flex; align-items: center; min-height: 24px; color: var(--gold-lo); text-decoration: underline; text-underline-offset: .28em; }
@media (pointer: coarse) {
  .navlinks a { min-width: 44px; }
  .sc-doc p.sc-note a { min-height: 44px; }
}