/*
  Family ms-public-b — utility screens converted from the design source "missing-screens-v2026-09-29"
  (Figma page 12: /privacy /terms /accessibility /cookies /404 /500 /maintenance /status /robots /sitemap).
  Renderers in the source app.js: legal, settings, system, statusPage, technical, contextHeader.
  Prototype palette mapped as in library.css (bg2→bg/secondary, panel→bg/card, soft→bg/soft, line→border/line …).
  Text set at 8–10px in the source is raised to 11–13px (site/README.md decision 6).
*/

/* ---------- Shared: page heads ---------- */

/* legal-hero (legal family) */
.legal-hero {
  padding-block: 75px 51px;
  background: linear-gradient(164deg, transparent 15%, var(--aw-bg-soft) 85%), var(--aw-bg-secondary);
}
:root[data-theme="light"] .legal-hero,
:root[data-theme="light"] .ctx-head { background-color: var(--aw-bg-card); }
.legal-hero h1 {
  margin: 14px 0 20px;
  font: 700 clamp(34px, 3.52vw, 54px)/1.35 var(--aw-font-display);
  color: var(--aw-text-primary);
}
.legal-hero__lead {
  max-width: 800px;
  font: italic 400 20px/1.15 var(--aw-font-literary);
  color: var(--aw-text-secondary);
}
.legal-hero .pill-row { margin-block: 27px 16px; }

/* context-head (settings + technical families) */
.ctx-head {
  border-bottom: 1px solid var(--aw-border-line);
  background: linear-gradient(90deg, transparent, var(--aw-bg-soft)), var(--aw-bg-secondary);
}
.ctx-head > .wrap {
  min-height: 160px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--aw-space-6);
  padding-block: var(--aw-space-8) 33px;
}
.ctx-head h1 { margin: 7px 0; font: 700 clamp(28px, 2.21vw, 34px)/1.35 var(--aw-font-display); }
.ctx-head__copy > p:last-child { color: var(--aw-text-secondary); font-size: 14px; line-height: 1.25; }
.ctx-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--aw-space-2); margin: 0; }
.ctx-chips li {
  padding: 10px 13px;
  border: 1px solid var(--aw-border-line);
  border-radius: var(--aw-radius-full);
  color: var(--aw-text-energy);
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
}

/* workspace-section */
.workspace { padding-block: 38px 70px; }

/* ---------- Legal family (privacy, terms, accessibility) ---------- */
.legal-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 50px;
  align-items: start;
  padding-block: 60px 100px;
}
.toc {
  position: sticky;
  top: 25px;
  padding: var(--aw-space-6) 21px 21px;
  border: 1px solid var(--aw-border-line);
  border-radius: 6px;
  background: var(--aw-bg-card);
}
.toc h2 { font: 700 13px/1.3 var(--aw-font-display); color: var(--aw-text-primary); }
.toc ol { margin: 4px 0 0; }
.toc a {
  display: block;
  padding: 8px 0;
  color: var(--aw-text-secondary);
  font-size: 13px;
  line-height: 1.35;
  transition: color 0.15s ease;
}
.toc a:hover { color: var(--aw-accent-gold-light); }
.toc a[aria-current="true"] { color: var(--aw-text-primary); }

.legal-copy > section { padding-bottom: 39px; scroll-margin-top: var(--aw-space-6); }
.legal-copy > section + section { margin-top: 38px; }
.legal-copy h2 { margin: 24px 0 22px; font: 700 25px/1.35 var(--aw-font-display); color: var(--aw-text-primary); }
.legal-copy p:not(.t-eyebrow) { color: var(--aw-text-secondary); font-size: 14px; line-height: 1.8; }
.legal-copy p:not(.t-eyebrow) + p { margin-top: 14px; }
.legal-copy a, .surface__lead a { color: var(--aw-accent-gold-light); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Settings family (cookies) ---------- */
.surface {
  border: 1px solid var(--aw-border-line);
  border-radius: var(--aw-radius-md);
  background: var(--aw-bg-card);
  box-shadow: var(--aw-shadow-panel);
}
.surface--narrow { max-width: 1000px; margin-inline: auto; }
.surface__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aw-space-4);
  padding: var(--aw-space-5) 22px 21px;
}
.surface__head h2 { font: 700 17px/1.35 var(--aw-font-display); }
.surface__body { padding: 41px 22px 22px; }
.surface__lead { margin-bottom: 19px; font: italic 400 19px/1.3 var(--aw-font-literary); color: var(--aw-text-secondary); }

.setting-list { display: grid; gap: var(--aw-space-3); margin: 0; }
.setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--aw-space-5);
  min-height: 81px;
  padding: 18px 22px;
  border: 1px solid var(--aw-border-line);
  border-radius: 7px;
  background: var(--aw-bg-card);
}
.setting-row__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.setting-row__title h3 { font: 700 13px/1.4 var(--aw-font-display); }
.setting-row__state { color: var(--aw-text-energy); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.setting-row p { margin-top: 6px; color: var(--aw-text-secondary); font-size: 13px; line-height: 1.45; }
.setting-row--note { background: transparent; border-style: dashed; }

/* Switch: a real button[role=switch]; the knob is the ::after of the track */
.switch {
  position: relative;
  flex: none;
  width: 48px;
  height: 26px;
  border: 1px solid var(--aw-border-line);
  border-radius: var(--aw-radius-full);
  background: var(--aw-bg-soft);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--aw-text-secondary);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.switch[aria-checked="true"]::after { transform: translateX(21px); background: var(--aw-accent-gold); }
.switch:hover:not(:disabled) { border-color: var(--aw-accent-gold); }
.switch:focus-visible { outline-offset: 3px; border-radius: var(--aw-radius-full); }
.switch:disabled { cursor: not-allowed; }

.surface .actions { margin-top: 28px; }
.consent-status { margin-top: var(--aw-space-4); color: var(--aw-text-energy); font-size: 13px; }
.consent-status:empty { margin: 0; }

/* ---------- System family (404, 500, maintenance) ---------- */
.system-stage {
  min-height: 900px;
  display: grid;
  place-items: center;
  padding: 70px var(--aw-gutter);
  background: radial-gradient(circle at 50% 42%, var(--aw-bg-soft), transparent 27%);
}
.system-card { max-width: 930px; text-align: center; }
.system-code { font: 400 12px/1.35 var(--aw-font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--aw-accent-gold); }
.system-card__mark { width: 125px; height: 125px; margin: 20px auto 33px; }
.system-card h1 { font: 700 clamp(34px, 3.78vw, 58px)/1.35 var(--aw-font-display); }
.system-card__lead {
  max-width: 700px;
  margin: 10px auto 0;
  font: italic 400 21px/1.1 var(--aw-font-literary);
  color: var(--aw-text-secondary);
}
.system-card .actions { justify-content: center; gap: 10px; margin-top: 27px; }
.system-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 40px 0 0;
  text-align: left;
}
.system-link {
  display: block;
  height: 100%;
  padding: 19px 17px 17px;
  border: 1px solid var(--aw-border-line);
  border-radius: 6px;
  background: var(--aw-bg-card);
  transition: border-color 0.15s ease;
}
a.system-link:hover, button.system-link:hover:not(:disabled) { border-color: var(--aw-accent-gold); }
button.system-link { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; text-align: left; }
button.system-link:disabled { cursor: default; }
.system-link b { display: block; font: 700 13px/1.35 var(--aw-font-display); color: var(--aw-text-primary); }
.system-link span { display: block; margin-top: 6px; color: var(--aw-text-secondary); font-size: 12px; line-height: 1.45; }
.system-link .system-link__ref { color: var(--aw-text-energy); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ---------- Status family (public status) ---------- */
.status-page { padding-block: 55px 100px; }
.status-head { margin: 15px 0 38px; }
.status-head h1 { margin: 8px 0; font: 700 clamp(30px, 2.93vw, 45px)/1.08 var(--aw-font-display); }
.status-head .t-lead-sm { color: var(--aw-text-secondary); }
.status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aw-space-4);
  padding: 25px;
  border: 1px solid color-mix(in srgb, var(--aw-state-success) 40%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--aw-state-success) 9%, transparent);
}
.status-banner[data-state="warn"] {
  border-color: color-mix(in srgb, var(--aw-state-warning) 45%, transparent);
  background: color-mix(in srgb, var(--aw-state-warning) 9%, transparent);
}
.status-banner b { font: 700 14px/1.35 var(--aw-font-display); }
.status-banner .status { font-size: 14px; }

.services { margin: 0; }
.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px 230px 180px;
  align-items: center;
  gap: 15px;
  min-height: 69px;
  padding: var(--aw-space-5);
}
.service-row h3 { font: 700 13px/1.35 var(--aw-font-display); }
.service-row .status { font-size: 12px; }
.service-row__uptime { color: var(--aw-text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.uptime { display: flex; gap: 2px; height: 28px; }
.uptime i { flex: 1 1 0; border-radius: 1px; background: var(--aw-state-success); }
.uptime i[data-state="warn"] { background: var(--aw-state-warning); }

.status-history { padding-top: 92px; }
.status-history .lib-card h3 { margin-top: 34px; }

/* ---------- Technical family (robots, sitemap) ---------- */
.technical-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.code-panel {
  min-height: 430px;
  margin: 0;
  padding: 26px;
  border: 1px solid var(--aw-border-line);
  border-radius: 7px;
  background: var(--aw-overlay-scrim);     /* fixed dark in both themes, as in the Light frame */
  color: var(--aw-accent-energy-light);
  font: 400 14px/1.8 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.site-groups { display: grid; gap: 10px; margin: 0; }
.site-group {
  min-height: 93px;
  padding: 22px var(--aw-space-5) var(--aw-space-5);
  border: 1px solid var(--aw-border-line);
  border-radius: 6px;
  background: var(--aw-bg-card);
}
.site-group .t-eyebrow { color: var(--aw-text-secondary); }
.site-group h2, .site-group h3 { margin-top: 2px; font: 700 13px/1.4 var(--aw-font-display); }
.site-group p:not(.t-eyebrow) { margin-top: 6px; color: var(--aw-text-secondary); font-size: 12px; line-height: 1.45; }
.site-group h2 a, .site-group h3 a { text-decoration: underline; text-decoration-color: var(--aw-border-line); text-underline-offset: 3px; }
.site-group h2 a:hover, .site-group h3 a:hover { color: var(--aw-accent-gold-light); text-decoration-color: currentColor; }
.site-group .sep { color: var(--aw-text-secondary); }

/* Sitemap: the full index replaces the source's robots.txt code panel */
.technical-layout--sitemap { align-items: start; }
.sitemap-index {
  padding: 26px;
  border: 1px solid var(--aw-border-line);
  border-radius: 7px;
  background: var(--aw-bg-card);
}
.sitemap-index > h2 { font: 700 17px/1.35 var(--aw-font-display); }
.sitemap-index > p { margin-top: 6px; color: var(--aw-text-secondary); font-size: 13px; }
.sitemap-groups { columns: 2; column-gap: 28px; margin-top: 18px; }
.sitemap-group { break-inside: avoid; padding-bottom: 18px; }
.sitemap-group h3 { margin-bottom: 6px; }
.sitemap-group ul { margin: 0; }
.sitemap-group a {
  display: inline-block;
  padding: 3px 0;
  color: var(--aw-text-primary);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-color: var(--aw-border-line);
  text-underline-offset: 3px;
}
.sitemap-group a:hover { color: var(--aw-accent-gold-light); text-decoration-color: currentColor; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .legal-layout { grid-template-columns: 1fr; gap: var(--aw-space-8); padding-block: var(--aw-space-10) var(--aw-space-16); }
  .toc { position: static; }
  .ctx-head > .wrap { flex-direction: column; align-items: flex-start; min-height: 0; }
  .ctx-chips { justify-content: flex-start; }
  .technical-layout { grid-template-columns: 1fr; }
  .technical-layout--sitemap .site-groups { order: -1; }
  .code-panel { min-height: 0; }
  .system-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-head { grid-template-columns: 1fr; gap: var(--aw-space-6); }
  .service-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .service-row .uptime { grid-column: 1 / -1; }
  .status-history { padding-top: var(--aw-space-16); }
}
@media (max-width: 639px) {
  .legal-hero { padding-block: var(--aw-space-12) var(--aw-space-10); }
  .legal-copy h2 { font-size: 21px; margin-bottom: 14px; }
  .surface__head { flex-direction: column; align-items: flex-start; }
  .surface__body { padding: var(--aw-space-6) var(--aw-space-4) var(--aw-space-5); }
  .surface__lead { font-size: 18px; }
  .setting-row { padding: var(--aw-space-4); }
  .surface .actions .btn { flex: 1 1 100%; justify-content: center; }
  .system-stage { min-height: 0; padding-block: var(--aw-space-12) var(--aw-space-16); }
  .system-card__mark { width: 96px; height: 96px; margin-bottom: var(--aw-space-6); }
  .system-card__lead { font-size: 19px; line-height: 1.3; }
  .system-card .actions .btn { flex: 1 1 100%; justify-content: center; }
  .system-links { grid-template-columns: 1fr; }
  .status-page { padding-top: var(--aw-space-10); }
  .status-banner { flex-direction: column; align-items: flex-start; padding: var(--aw-space-5); }
  .service-row { grid-template-columns: 1fr; gap: 6px; padding: var(--aw-space-4); border-bottom: 1px solid var(--aw-border-line); }
  .service-row:last-child { border-bottom: 0; }
  .code-panel { padding: var(--aw-space-5); font-size: 12px; }
  .sitemap-index { padding: var(--aw-space-5); }
  .sitemap-groups { columns: 1; }
}