/* codeaz.org portal styles. Shared by index.html and audit.html. */
  :root {
    --sc-canvas:     #101418;
    --sc-surface:    #161B21;
    --sc-ink:        #F3EFE8;
    --sc-ink-soft:   #929BAA;
    --sc-accent:     #2E5BFF;
    --sc-accent-ink: #FBFAF7;
    --sc-font-display: "Space Grotesk", system-ui, sans-serif;
    --sc-font-text:    "Space Grotesk", system-ui, sans-serif;
    --sc-font-mono:    "JetBrains Mono", ui-monospace, monospace;

    /* Same hue as the accent, lifted so it can carry text on the dark ground. */
    --az-accent-text: #8EA5FF;
    --az-surface-2:   #1D242C;
    --az-line:        rgba(243, 239, 232, .09);
    --az-line-strong: rgba(243, 239, 232, .16);
    /* Status colours are semantic, not accents: the brand's own gold and red,
       plus the green its opt-out page already uses. */
    --az-ok:   #3DDC84;
    --az-warn: #F5B700;
    --az-bad:  #FF6B74;
    --az-gold: #F5B700;
    --az-red:  #E63946;

    --az-side: 15.5rem;
    --az-bar:  3rem;
    --az-r:    10px;
  }

  body { font-feature-settings: "ss01" on; }
  [hidden] { display: none !important; }
  .mono { font-family: var(--sc-font-mono); }
  .soft { color: var(--sc-ink-soft); }

  /* ------------------------------------------------------------ app chrome */
  .side {
    position: fixed; inset: 0 auto 0 0; width: var(--az-side); z-index: var(--sc-z-chrome);
    display: flex; flex-direction: column; gap: var(--sc-6);
    padding: var(--sc-5) var(--sc-4) var(--sc-5);
    background: #0D1115; border-right: 1px solid var(--az-line);
  }
  .brand { display: inline-flex; flex-direction: column; text-decoration: none; padding-inline: var(--sc-2); align-self: flex-start; }
  .brand__mark { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; }
  .brand__mark b { color: var(--az-accent-text); font-weight: 700; }
  .tricolor { height: 2px; margin-top: .4rem; border-radius: 1px;
    background: linear-gradient(90deg, var(--sc-accent) 0 33.3%, var(--az-gold) 33.3% 66.6%, var(--az-red) 66.6% 100%); }

  .nav { display: flex; flex-direction: column; gap: var(--sc-5); }
  .nav__group { display: flex; flex-direction: column; gap: 2px; }
  .nav__label { font-family: var(--sc-font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--sc-ink-soft); padding: 0 var(--sc-2) var(--sc-2); display: flex; justify-content: space-between; }
  .nav a {
    display: flex; align-items: center; gap: var(--sc-3);
    padding: .45rem var(--sc-2); border-radius: 7px; text-decoration: none;
    font-size: .9rem; color: var(--sc-ink-soft);
    transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
  }
  .nav a .k { font-family: var(--sc-font-mono); font-size: .72rem; width: 1.4rem; height: 1.4rem; border-radius: 5px;
    display: inline-grid; place-items: center; border: 1px solid var(--az-line-strong); color: var(--sc-ink-soft); flex: none; }
  .nav a .n { margin-left: auto; font-family: var(--sc-font-mono); font-size: .7rem; }
  @media (hover: hover) and (pointer: fine) { .nav a:hover { background: var(--az-surface-2); color: var(--sc-ink); } }
  .nav a[aria-current="true"] { background: var(--az-surface-2); color: var(--sc-ink); }
  .nav a[aria-current="true"] .k { border-color: var(--sc-accent); color: var(--az-accent-text); }
  .nav a.is-done .k { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }

  .side__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--sc-3); }
  .avail { font-family: var(--sc-font-mono); font-size: .68rem; color: var(--sc-ink-soft); line-height: 1.5; padding-inline: var(--sc-2); }
  .avail i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--az-ok); margin-right: .4rem; vertical-align: 1px; }


  .lang { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--az-line-strong); border-radius: 7px; align-self: flex-start; }
  .lang button { border: 0; background: none; font-family: var(--sc-font-mono); font-size: .7rem; padding: .3rem .55rem; border-radius: 5px; color: var(--sc-ink-soft); cursor: pointer;
    transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out); }
  .lang button[aria-pressed="true"] { background: var(--sc-accent); color: var(--sc-accent-ink); }
  .side .lang { margin-inline: var(--sc-2); }
  .bar .lang { display: none; }
  .avail { margin: 0; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 2.75rem; padding: 0 1.1rem; border-radius: 8px; border: 1px solid transparent;
    background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600; font-size: .92rem;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px rgba(5, 10, 30, .35);
    transition: transform 120ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
  }
  @media (hover: hover) and (pointer: fine) { .btn:hover { background: #4870FF; } }
  .btn:active { transform: scale(.97); }
  .btn:disabled { opacity: .55; cursor: progress; }

  .bar {
    position: fixed; top: 0; left: var(--az-side); right: 0; height: var(--az-bar); z-index: var(--sc-z-chrome);
    display: flex; align-items: center; gap: var(--sc-5); padding-inline: var(--sc-5);
    background: color-mix(in oklab, var(--sc-canvas) 92%, transparent); border-bottom: 1px solid var(--az-line);
    font-family: var(--sc-font-mono); font-size: .72rem; color: var(--sc-ink-soft);
    backdrop-filter: blur(8px);
  }
  .crumbs b { color: var(--sc-ink); font-weight: 500; }
  .trace { margin-left: auto; display: flex; align-items: center; gap: var(--sc-3); }
  .trace__bars { display: flex; align-items: flex-end; gap: 3px; height: 1.25rem; min-width: 4.5rem; padding: 0 .4rem; border-left: 1px solid var(--az-line); border-right: 1px solid var(--az-line); }
  .trace__bars span { width: 5px; border-radius: 1px; background: var(--az-ok); transform-origin: 50% 100%; animation: grow 420ms var(--sc-ease-out) both; }
  .trace__bars span.bad { background: var(--az-bad); }
  .trace__empty { color: var(--sc-ink-soft); }
  @keyframes grow { from { transform: scaleY(.2); opacity: 0; } to { transform: none; opacity: 1; } }

  .tabs { display: none; }

  main { margin-left: var(--az-side); }

  /* ------------------------------------------------------- shared surface */
  .surface { padding: calc(var(--az-bar) + var(--sc-5)) var(--sc-6) var(--sc-5); display: flex; flex-direction: column; gap: var(--sc-4); }
  .panel { background: var(--sc-surface); border: 1px solid var(--az-line); border-radius: var(--az-r); box-shadow: var(--sc-edge), var(--sc-e1); }
  .panel__head { display: flex; align-items: center; gap: var(--sc-3); padding: .7rem 1rem; border-bottom: 1px solid var(--az-line);
    font-family: var(--sc-font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft); }
  .panel__head .r { margin-left: auto; text-transform: none; letter-spacing: 0; }
  .tag { font-family: var(--sc-font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
    padding: .2rem .5rem; border-radius: 5px; border: 1px solid var(--az-line-strong); color: var(--sc-ink-soft); white-space: nowrap; }
  .tag--demo { border-color: color-mix(in oklab, var(--az-gold) 55%, transparent); color: var(--az-gold); }
  .tag--live { border-color: color-mix(in oklab, var(--az-ok) 55%, transparent); color: var(--az-ok); }

  .titlerow { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sc-5); flex-wrap: wrap; }
  .titlerow h1, .titlerow h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; margin: 0; text-wrap: balance; }
  .titlerow p { margin: .5rem 0 0; color: var(--sc-ink-soft); max-width: 58ch; font-size: .98rem; }
  .crumb { font-family: var(--sc-font-mono); font-size: .7rem; color: var(--sc-ink-soft); margin-bottom: .55rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

  /* ------------------------------------------------------- act 1: project */
  .timeline { padding: 1rem 1.1rem 1.1rem; }
  .tl__meta { display: flex; justify-content: space-between; font-family: var(--sc-font-mono); font-size: .72rem; color: var(--sc-ink-soft); margin-bottom: .8rem; }
  .tl__meta b { color: var(--sc-ink); font-weight: 500; }
  .tl__track { position: relative; height: 4px; border-radius: 2px; background: var(--az-surface-2); overflow: hidden; }
  .tl__fill { position: absolute; inset: 0; background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0); }
  .tl__stops { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: .8rem; }
  .tl__stop { display: flex; gap: .6rem; align-items: baseline; color: var(--sc-ink-soft); transition: color 200ms var(--sc-ease-out); }
  .tl__stop .L { font-family: var(--sc-font-mono); font-weight: 500; font-size: .8rem; width: 1.5rem; height: 1.5rem; border-radius: 6px; display: inline-grid; place-items: center;
    border: 1px solid var(--az-line-strong); flex: none; transition: background-color 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out), color 200ms var(--sc-ease-out); }
  .tl__stop .t { font-size: .9rem; font-weight: 500; }
  .tl__stop .d { display: block; font-family: var(--sc-font-mono); font-size: .66rem; margin-top: .1rem; color: var(--sc-ink-soft); }
  .tl__stop.is-now { color: var(--sc-ink); }
  .tl__stop.is-now .L { border-color: var(--sc-accent); color: var(--az-accent-text); }
  .tl__stop.is-done .L { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }

  .work { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--sc-4); min-height: 0; flex: 1; }
  .stagecard { position: relative; overflow: hidden; display: flex; flex-direction: column; }
  .stagecard__body { padding: 1.2rem 1.3rem 1.3rem; display: grid; grid-template-columns: auto 1fr; gap: 0 1.2rem; align-content: start; }
  .bigL { grid-row: span 3; font-weight: 700; font-size: clamp(3.4rem, 2rem + 4vw, 5.6rem); line-height: .82; letter-spacing: -0.05em; color: var(--az-accent-text); }
  .stagecard h3 { margin: .1rem 0 .3rem; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
  .stagecard p { margin: 0 0 .9rem; color: var(--sc-ink-soft); max-width: 46ch; font-size: .95rem; }
  .checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
  .checks li { display: flex; gap: .65rem; align-items: center; font-size: .92rem; color: var(--sc-ink-soft); transition: color 200ms var(--sc-ease-out); }
  .checks li::before { content: ""; width: .95rem; height: .95rem; border-radius: 4px; border: 1px solid var(--az-line-strong); flex: none;
    transition: background-color 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out); }
  .checks li.on { color: var(--sc-ink); }
  .checks li.on::before { background: var(--sc-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23FBFAF7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; border-color: var(--sc-accent); }
  .stagecard__foot { margin-top: auto; padding: .7rem 1.3rem; border-top: 1px solid var(--az-line); font-family: var(--sc-font-mono); font-size: .7rem; color: var(--sc-ink-soft); }
  /* the per-stage wipe: a change of state */
  .wipe { animation: wipe 460ms var(--sc-ease-out) both; }
  @keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

  .log { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .log ol { list-style: none; margin: 0; padding: .4rem 0; display: flex; flex-direction: column; overflow: hidden; }
  .log li { display: grid; grid-template-columns: 4.6rem 1fr; gap: .8rem; padding: .5rem 1rem; font-size: .88rem; border-bottom: 1px solid var(--az-line); }
  .log li:last-child { border-bottom: 0; }
  .log li .w { font-family: var(--sc-font-mono); font-size: .68rem; color: var(--sc-ink-soft); padding-top: .15rem; }
  .log li.new { animation: rise 320ms var(--sc-ease-out) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  /* ------------------------------------------------------- act 2: modules */
  .modules { padding: calc(var(--sc-section) * .8) var(--sc-6) calc(var(--sc-section) * .9); }
  .modules__inner { max-width: 70rem; }
  .modules h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; margin: 0 0 .6rem; }
  .modules__intro p { color: var(--sc-ink-soft); max-width: 58ch; margin: 0 0 var(--sc-6); }
  .modlist { border-top: 1px solid var(--az-line-strong); }
  .mod { display: grid; grid-template-columns: 5rem minmax(14rem, 1fr) 1.6fr; gap: var(--sc-5); padding: 1.35rem 0; border-bottom: 1px solid var(--az-line); align-items: baseline; }
  .mod .code { font-family: var(--sc-font-mono); font-size: .72rem; color: var(--az-accent-text); }
  .mod h3 { margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; }
  .mod p { margin: 0; color: var(--sc-ink-soft); font-size: .95rem; max-width: 58ch; }
  .mod .out { display: block; margin-top: .45rem; font-family: var(--sc-font-mono); font-size: .74rem; color: var(--sc-ink); }

  /* ------------------------------------------------------- act 3: production */
  .statement { font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; margin: 0; max-width: 34ch; text-wrap: balance; }
  .statement em { font-style: normal; color: var(--az-ok); }
  .prod { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sc-4); flex: 1; min-height: 0; }
  .fleet { display: flex; flex-direction: column; min-height: 0; }
  .fleet__rows { list-style: none; margin: 0; padding: 0; }
  .row { display: grid; grid-template-columns: 1.2rem 1fr auto auto; gap: .9rem; align-items: center; padding: .72rem 1rem; border-bottom: 1px solid var(--az-line);
    text-decoration: none; transition: background-color 180ms var(--sc-ease-out); }
  .row .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--az-line-strong); justify-self: center; transition: background-color 200ms var(--sc-ease-out); }
  .row .nm { font-weight: 500; font-size: .98rem; line-height: 1.25; }
  .row .nm small { display: block; font-family: var(--sc-font-mono); font-size: .68rem; color: var(--sc-ink-soft); font-weight: 400; margin-top: .1rem; }
  .row .st { font-family: var(--sc-font-mono); font-size: .7rem; color: var(--sc-ink-soft); text-align: right; min-width: 7.5rem; }
  .row .ms { font-family: var(--sc-font-mono); font-size: .9rem; min-width: 4.6rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--sc-ink-soft); }
  .row.is-active { background: var(--az-surface-2); }
  .row.is-checking .dot { background: var(--az-warn); animation: pulse 900ms ease-in-out infinite; }
  .row.is-ok .dot { background: var(--az-ok); }
  .row.is-ok .st { color: var(--az-ok); }
  .row.is-ok .ms { color: var(--sc-ink); }
  .row.is-bad .dot { background: var(--az-bad); }
  .row.is-bad .st { color: var(--az-bad); }
  @keyframes pulse { 50% { opacity: .35; } }
  .fleet__sum { margin-top: auto; padding: .8rem 1rem; border-top: 1px solid var(--az-line); font-family: var(--sc-font-mono); font-size: .72rem; color: var(--sc-ink-soft); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
  .fleet__sum b { color: var(--sc-ink); font-weight: 500; }

  .preview { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .preview__frame { position: relative; flex: 1; min-height: 0; background: #0B0E12; overflow: hidden; }
  .preview__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
  .preview__frame .channel { position: absolute; inset: 0; display: grid; place-content: center; gap: .6rem; text-align: center; padding: 1.5rem; }
  .channel .yt { justify-self: center; font-family: var(--sc-font-mono); font-size: .72rem; background: var(--az-red); color: #FBFAF7; padding: .25rem .6rem; border-radius: 5px; }
  .channel b { font-size: 1.6rem; letter-spacing: -0.02em; }
  .channel span { color: var(--sc-ink-soft); max-width: 34ch; }
  .preview__foot { display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem; border-top: 1px solid var(--az-line); }
  .preview__foot p { margin: 0; font-size: .86rem; color: var(--sc-ink-soft); flex: 1; line-height: 1.4; }
  .preview__foot a { font-family: var(--sc-font-mono); font-size: .74rem; color: var(--az-accent-text); white-space: nowrap; }

  /* ------------------------------------------------------- act 4: start */
  .start { padding: calc(var(--az-bar) + var(--sc-7)) var(--sc-6) var(--sc-5); min-height: 100svh; display: flex; flex-direction: column; }
  .start__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sc-5); align-items: start; max-width: 76rem; }
  .form { padding: 1.4rem; display: flex; flex-direction: column; gap: 1rem; }
  .form h2 { margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
  .form > p { margin: 0; color: var(--sc-ink-soft); max-width: 52ch; }
  .field { display: flex; flex-direction: column; gap: .35rem; }
  .field label { font-family: var(--sc-font-mono); font-size: .7rem; color: var(--sc-ink-soft); }
  .field input, .field textarea {
    background: #0D1115; border: 1px solid var(--az-line-strong); border-radius: 8px; padding: .75rem .85rem; font-size: 1rem;
    transition: border-color 140ms var(--sc-ease-out);
  }
  .field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.5; }
  .field input:focus, .field textarea:focus { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 30%, transparent); }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form__row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
  .form__row small { color: var(--sc-ink-soft); font-size: .78rem; flex: 1; min-width: 14rem; }
  .form__row small a { color: var(--sc-ink); }
  .form__status { font-family: var(--sc-font-mono); font-size: .78rem; min-height: 1.2em; margin: 0; }
  .form__status.ok { color: var(--az-ok); }
  .form__status.bad { color: var(--az-bad); }

  .check { max-width: 76rem; margin-bottom: var(--sc-5); padding: 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; align-items: end; }
  .check h2 { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; }
  .check__intro p { margin: .4rem 0 0; color: var(--sc-ink-soft); max-width: 50ch; font-size: .95rem; }
  .check__form { display: flex; gap: .8rem; align-items: flex-end; }
  .check__form .field { flex: 1; }
  .check__result { grid-column: 1 / -1; border-top: 1px solid var(--az-line); padding-top: .4rem; }
  .check__result .row { padding-inline: 0; border-bottom: 0; }
  .check__audit p { margin: .2rem 0 .8rem; color: var(--sc-ink-soft); font-size: .92rem; max-width: 70ch; }
  .check__auditrow { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
  .check__auditrow .field { flex: 1; min-width: 14rem; }
  .btn--quiet { background: var(--az-surface-2); border-color: var(--az-line-strong); color: var(--sc-ink); box-shadow: var(--sc-edge); }
  @media (hover: hover) and (pointer: fine) { .btn--quiet:hover { background: #26303A; } }
  .findings { list-style: none; margin: .6rem 0 0; padding: 0; border-top: 1px solid var(--az-line); }
  .findings li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--az-line); font-size: .9rem; }
  .findings li b { font-family: var(--sc-font-mono); font-weight: 500; font-size: .8rem; white-space: nowrap; }
  .findings .ok b { color: var(--az-ok); } .findings .warn b { color: var(--az-warn); } .findings .bad b { color: var(--az-bad); }
  .findings .verdict { display: block; color: var(--sc-ink); font-weight: 500; }
  .info { display: flex; flex-direction: column; gap: var(--sc-4); }
  .facts { list-style: none; margin: 0; padding: 0; }
  .facts li { padding: .8rem 1rem; border-bottom: 1px solid var(--az-line); }
  .facts li:last-child { border-bottom: 0; }
  .facts b { display: block; font-weight: 500; font-size: .95rem; }
  .facts span { color: var(--sc-ink-soft); font-size: .86rem; }
  .contact dl { margin: 0; padding: .4rem 0; display: grid; grid-template-columns: 5.5rem 1fr; }
  .contact dt, .contact dd { margin: 0; padding: .5rem 1rem; border-bottom: 1px solid var(--az-line); font-size: .9rem; }
  .contact dt { font-family: var(--sc-font-mono); font-size: .7rem; color: var(--sc-ink-soft); padding-top: .65rem; padding-right: 0; }
  .contact dl > :nth-last-child(-n+2) { border-bottom: 0; }
  .contact a { text-decoration: none; }
  @media (hover: hover) and (pointer: fine) { .contact a:hover { text-decoration: underline; } }

  .foot { margin-top: auto; padding-top: var(--sc-7); display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center;
    font-family: var(--sc-font-mono); font-size: .7rem; color: var(--sc-ink-soft); max-width: 76rem; }
  .foot a { text-decoration: none; }
  @media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--sc-ink); } }
  .foot .z { margin-left: auto; color: var(--az-accent-text); }

  /* ---------------------------------------------------------- phones */
  @media (max-width: 860px) {
    :root { --az-side: 0rem; --az-bar: 3.25rem; }
    .side { display: none; }
    .bar { left: 0; padding-inline: var(--sc-4); gap: var(--sc-3); }
    .bar .crumbs, .trace__label { display: none; }
    .bar .lang { display: inline-flex; flex: none; }
    .bar .lang button { padding: .55rem .45rem; }
    .tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
    .tabs a { font-family: var(--sc-font-mono); font-size: .72rem; padding: .55rem .6rem; min-height: 2.25rem; display: inline-flex; align-items: center; border-radius: 6px; text-decoration: none; color: var(--sc-ink-soft); white-space: nowrap; }
    .tabs a[aria-current="true"] { background: var(--az-surface-2); color: var(--sc-ink); }
    .bar .brand__mark { font-size: 1.05rem; }
    .bar .brand { padding: 0; }
    .bar .brand .tricolor { margin-top: .25rem; }
    .trace { margin-left: auto; }
    .trace__bars { min-width: 0; gap: 2px; padding: 0 0 0 .4rem; border-right: 0; }
    .trace__bars span { width: 3px; }
    .tabs { flex: 1; min-width: 0; }

    .surface { padding: calc(var(--az-bar) + var(--sc-4)) var(--sc-4) var(--sc-4); gap: var(--sc-3); }
    .titlerow p { display: none; }
    .tl__stops { grid-template-columns: repeat(4, 1fr); }
    .tl__stop { flex-direction: column; gap: .3rem; align-items: flex-start; }
    .tl__stop .t { font-size: .78rem; }
    .tl__stop .d { display: none; }
    .work { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
    .stagecard__body { padding: 1rem; }
    .stagecard p { font-size: .9rem; margin-bottom: .7rem; }
    .stagecard__foot { display: none; }
    .bigL { font-size: 3.2rem; }
    .log li { grid-template-columns: 3.8rem 1fr; padding: .45rem .8rem; font-size: .84rem; }

    .modules { padding: var(--sc-8) var(--sc-4) var(--sc-8); }
    .mod { grid-template-columns: 1fr; gap: .4rem; }

    .prod { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
    .row { padding: .55rem .8rem; gap: .6rem; }
    .row .st { display: none; }
    .row .nm small { display: none; }
    .fleet__sum { display: none; }
    .preview__foot p { display: none; }
    .statement { font-size: 1.15rem; }

    .start { padding: calc(var(--az-bar) + var(--sc-6)) var(--sc-4) var(--sc-4); }
    .start__grid { grid-template-columns: 1fr; }
    .check { grid-template-columns: 1fr; padding: 1.1rem; }
    .check__form { flex-direction: column; align-items: stretch; }
    .check__result .row .st { display: block; min-width: 0; }
    .two { grid-template-columns: 1fr; }
    .foot .z { margin-left: 0; }
    /* thumb-sized targets */
    .tabs a { min-height: 2.75rem; }
    .preview__foot a, .contact a, .foot a { display: inline-flex; align-items: center; min-height: 2.75rem; }
    .preview__foot { padding-block: 0; }
    .contact dd { padding-block: 0; display: flex; align-items: center; min-height: 2.75rem; }
    .contact dt { padding-top: .95rem; }
    .form__row small a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; }
    .foot { gap: 0 1.2rem; }
  }
  .tabs .sm { display: none; }
  @media (max-width: 400px) {
    .tabs .lg { display: none; }
    .tabs .sm { display: inline; }
    .tabs a { padding-inline: .5rem; }
  }
  /* short phones: keep the one thing each pinned act is for */
  @media (max-width: 860px) and (max-height: 760px) {
    .titlerow .btn { display: none; }
    .titlerow h1 { font-size: 1.45rem; }
    .crumb { margin-bottom: .3rem; }
    .timeline { padding: .7rem .8rem .8rem; }
    .tl__meta { margin-bottom: .55rem; }
    .tl__stops { margin-top: .55rem; }
    .work { grid-template-rows: minmax(0, 1fr); }
    .log { display: none; }
    .stagecard__body { padding: .8rem .9rem; }
    .stagecard p { font-size: .86rem; margin-bottom: .55rem; }
    .bigL { font-size: 2.6rem; }
    .checks { gap: .3rem; }
    .checks li { font-size: .86rem; }
    .statement { font-size: 1.02rem; }
    .prod { grid-template-rows: auto; }
    .preview { display: none; }
    .fleet .panel__head .r { display: none; }
  }
  @media (max-height: 760px) and (min-width: 861px) {
    .titlerow p { display: none; }
    .stagecard__foot { display: none; }
    .row { padding-block: .55rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .wipe, .log li.new, .trace__bars span, .row.is-checking .dot { animation: none; }
  }