/* ═══════════════════════════════════════════════════════════════
   SUPPORT CENTRE — showcase layer

   Same vocabulary as apps.html and webapps.html: drifting aurora behind the
   whole page, a masthead stage that fades out below the fold, a holographic
   title, glass panels and per-platform colour. Everything is namespaced `sc-`
   so nothing can leak into the shared stylesheet.

   TWO THINGS THIS LAYER LEANS ON

   1. Per-platform colour. Anything carrying data-platform inherits --sc-acc,
      and every accent inside it derives from that one token — badges, rails,
      code frames, the severity pip. Adding a fourth platform is one rule.

   2. Severity is a scale, not a palette. --sc-sev is set per card from the
      entry's severity and used for the left rail and the pip only, so it reads
      as urgency without competing with the platform colour.
   ═══════════════════════════════════════════════════════════════ */

/* Registered so the conic rings can animate their angle. An unregistered
   custom property is untyped and cannot be interpolated, so without this the
   rings sit still — which is a perfectly good resting state in browsers that
   do not support @property. */
@property --sc-ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes scSpin { to { --sc-ang: 360deg; } }

/**
 * The tokens live at the root, not on .sc-page.
 *
 * They were on .sc-page, and the reader is deliberately a sibling of it — kept
 * outside so its backdrop is not clipped by the page wrapper's overflow. Custom
 * properties inherit down the tree and nowhere else, so every one of these was
 * empty inside the reader, and a declaration like
 * `border: 1px solid var(--sc-border-soft)` with an empty var is invalid at
 * computed-value time: the whole property is thrown away rather than falling
 * back.
 *
 * The result was a modal rendering with no panel border, no card backgrounds
 * and no card borders at all — the flat, un-themed version of itself, which is
 * why it did not look like the rest of the site. Nothing here can leak: a custom
 * property draws nothing on its own, and every name is still namespaced `sc-`.
 */
:root {
  --sc-surface-1: rgba(14, 20, 26, 0.62);
  --sc-surface-2: rgba(20, 30, 38, 0.76);
  --sc-surface-3: rgba(8, 12, 17, 0.86);
  --sc-border: rgba(140, 240, 255, 0.10);
  --sc-border-soft: rgba(140, 240, 255, 0.20);
  --sc-text: #eaf6ff;
  --sc-dim: #8b9bb4;
  --sc-blur: saturate(160%) blur(16px);
  --sc-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --sc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sc-elev-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --sc-elev-2: 0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.28);
  --sc-acc: #00e7ff;
}

.sc-page {
  position: relative;
  display: block;
}
/* `clip` rather than `hidden`: hidden would make this a scroll container and
   kill position:sticky anywhere inside it. */
.sc-page { overflow: hidden; }
@supports (overflow: clip) { .sc-page { overflow: clip; } }

/* Platform identity. One token in, every accent out. */
[data-platform="windows"]        { --sc-acc: #00A4EF; }
[data-platform="windows-server"] { --sc-acc: #A78BFA; }
[data-platform="linux"]          { --sc-acc: #FFB000; }
[data-platform="all"]            { --sc-acc: #00e7ff; }

[data-severity="critical"] { --sc-sev: #ff3b5c; }
[data-severity="high"]     { --sc-sev: #ff8a3d; }
[data-severity="medium"]   { --sc-sev: #ffc93d; }
[data-severity="low"]      { --sc-sev: #3ddc84; }

.sc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* style.css styles the BARE element `header` as the fixed site header, and it
   sets more than position: a drop shadow, a backdrop filter, and an ::after
   carrying the animated accent line. Any <header> nested inside a page picks
   up all of it.

   An earlier version of this reset covered position and background only. That
   left the shadow and the ::after in place, which drew a visible dark-edged
   box around the whole masthead — the single most obvious way in which this
   page did not look like the rest of the site.

   The markup uses divs so none of this applies. This is the belt to those
   braces, and it now clears the whole rule rather than the parts that were
   noticed first. */
.sc-page header, .sc-reader header {
  position: static; width: auto; z-index: auto;
  background: none; box-shadow: none; border: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.sc-page header::before, .sc-page header::after,
.sc-reader header::before, .sc-reader header::after { content: none; }

/* ── Atmosphere ───────────────────────────────────
   Deliberately the same recipe as webapps.html rather than a variation on it:
   same aurora colours and opacity, the same perspective floor grid, the same
   diagonal sweep. This page should read as another room in the same building,
   not as a page that admires the building from outside. */
.sc-aurora { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sc-aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: .24; mix-blend-mode: screen; will-change: transform;
}
.sc-aurora i:nth-child(1) { width: 44vw; height: 44vw; min-width: 320px; min-height: 320px; top: -10%; left: -8%;  background: #00ff41; animation: scAurora1 27s ease-in-out infinite; }
.sc-aurora i:nth-child(2) { width: 36vw; height: 36vw; min-width: 260px; min-height: 260px; top: 3%;   right: -9%; background: #00e7ff; animation: scAurora2 33s ease-in-out infinite; }
.sc-aurora i:nth-child(3) { width: 40vw; height: 40vw; min-width: 280px; min-height: 280px; top: 56%;  left: 22%;  background: #ff00ff; animation: scAurora3 30s ease-in-out infinite; }
@keyframes scAurora1 { 0%,100% { transform: translate3d(0,0,0) scale(1); }    50% { transform: translate3d(5vw,3vh,0) scale(1.15); } }
@keyframes scAurora2 { 0%,100% { transform: translate3d(0,0,0) scale(1.08); } 50% { transform: translate3d(-4vw,5vh,0) scale(.94); } }
@keyframes scAurora3 { 0%,100% { transform: translate3d(0,0,0) scale(.95); }  50% { transform: translate3d(4vw,-4vh,0) scale(1.12); } }

/* Vignette and film grain, from the apps.html layer, so the large flat dark
   areas of a long results list do not read as banded. */
.sc-atmos { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sc-atmos::before, .sc-atmos::after { content: ''; position: absolute; inset: 0; }
.sc-atmos::before {
  background: radial-gradient(125% 95% at 50% 34%, transparent 46%, rgba(0,0,0,.24) 78%, rgba(0,0,0,.50) 100%);
}
.sc-atmos::after {
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* Masthead stage. Faded out with a mask rather than clipped with overflow —
   an overflow:hidden box ends on a hard rectangle, and that rectangle was
   visible across the top of this page, which is precisely what made it look
   like a different site. */
.sc-stage {
  position: absolute; top: 0; left: 0; right: 0; height: 760px;
  pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
/* The floor grid. The rotateX is the site's signature — a flat orthogonal grid
   reads as a spreadsheet, this reads as the room every other page is in. */
.sc-grid {
  position: absolute; inset: -40% -10% 0; opacity: .5;
  background-image:
    linear-gradient(rgba(0,231,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,231,255,.14) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(520px) rotateX(62deg);
  transform-origin: 50% 0;
  animation: scGridDrift 24s linear infinite;
}
/* Shifts exactly one tile, so the loop has no visible seam. */
@keyframes scGridDrift { to { background-position: 0 64px, 64px 0; } }

.sc-sweep {
  position: absolute; top: 0; left: -40%; width: 36%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(0,231,255,.10) 45%, rgba(255,255,255,.05) 50%, transparent);
  transform: skewX(-14deg); animation: scSweep 11s ease-in-out infinite;
}
@keyframes scSweep { 0%,62% { left: -40%; } 100% { left: 120%; } }

.sc-container {
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto; padding: 0 1.25rem 90px;
}

/* ── Masthead ─────────────────────────────────── */
.sc-hero { text-align: center; padding: 132px 0 10px; }

.sc-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px 7px 11px; border-radius: 999px; margin-bottom: 20px;
  font-family: 'Share Tech Mono', monospace; font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase; color: #8ff5c0;
  background: var(--sc-surface-1); border: 1px solid rgba(0,255,65,.24);
  box-shadow: var(--sc-elev-1), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: var(--sc-blur); -webkit-backdrop-filter: var(--sc-blur);
}
/* An expanding ring rather than a fading dot — the same live indicator the
   webapps and apps mastheads use. */
.sc-live {
  width: 7px; height: 7px; border-radius: 50%; background: #00ff41; flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(0,255,65,.6); animation: scLive 2.4s ease-out infinite;
}
@keyframes scLive {
  70%  { box-shadow: 0 0 0 9px rgba(0,255,65,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,65,0); }
}

/* Three stacked copies of the same string: the element itself carries a
   drifting gradient, ::before is a blurred bloom behind it, ::after is a
   magenta-shifted copy that stutters twice a cycle. Both pseudos take their
   text from data-text — keep that attribute in step with the heading. */
/* The same holographic wordmark as .wa-title / .apps-title: identical gradient
   stops, size and sweep, so the three mastheads are recognisably one family.
   data-text must match the heading text — both pseudos take their copy from
   it, and they must reset -webkit-text-fill-color because the parent sets it
   transparent for the background-clip gradient and that inherits. */
.sc-title {
  position: relative;
  margin: 0 0 1rem;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2.1rem, 6vw, 3.9rem); font-weight: 900;
  letter-spacing: 3px; text-transform: uppercase; line-height: 1.06;
  padding-right: 3px;   /* the letter-spacing would otherwise clip the last glyph's gradient */
  background-image: linear-gradient(100deg, #00ff41 0%, #00e7ff 30%, #ff00ff 56%, #00e7ff 78%, #00ff41 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: scHolo 14s linear infinite;
}
@keyframes scHolo { to { background-position: 280% 0; } }
.sc-title::before, .sc-title::after {
  content: attr(data-text); position: absolute; inset: 0;
  -webkit-text-fill-color: currentColor; pointer-events: none;
}
.sc-title::before { color: #00e7ff; opacity: .32; filter: blur(22px); z-index: -1; }
.sc-title::after {
  color: #ff00ff; opacity: 0; mix-blend-mode: screen;
  animation: scGlitch 9s steps(1, end) infinite;
}
@keyframes scGlitch {
  0%, 3.4%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  3.6%  { opacity: .85; transform: translate(-3px,1px); clip-path: inset(14% 0 52% 0); }
  4.4%  { opacity: .70; transform: translate(2px,-1px); clip-path: inset(58% 0 16% 0); }
  5.2%  { opacity: 0;   transform: none; }
  52.4% { opacity: .75; transform: translate(3px,0);    clip-path: inset(34% 0 40% 0); }
  53.2% { opacity: 0;   transform: none; }
}

/* Mono, like .wa-sub — the site sets its body copy in Share Tech Mono under a
   masthead, and Rajdhani here was reading as a different template. */
.sc-lede {
  font-family: 'Share Tech Mono', monospace; font-size: clamp(.9rem, 1.6vw, 1.05rem);
  line-height: 1.75; color: var(--sc-dim); max-width: 46rem; margin: 0 auto;
}

.sc-stats {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin: 34px auto 0; max-width: 840px;
}
.sc-stat {
  flex: 1 1 150px; min-width: 134px; text-align: center;
  padding: 18px 16px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 70px), var(--sc-surface-1);
  border: 1px solid var(--sc-border);
  box-shadow: var(--sc-elev-1), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: var(--sc-blur); -webkit-backdrop-filter: var(--sc-blur);
  transition: transform .45s var(--sc-spring), border-color .3s ease, box-shadow .45s var(--sc-ease);
}
.sc-stat:hover {
  transform: translateY(-4px); border-color: var(--sc-border-soft);
  box-shadow: var(--sc-elev-2), 0 0 24px rgba(0,255,65,.14);
}
.sc-stat b {
  display: block; font-family: 'Orbitron', sans-serif; font-size: 1.7rem; font-weight: 800;
  background: linear-gradient(135deg, #00ff41, #00e7ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sc-stat span {
  display: block; margin-top: 7px;
  font-family: 'Share Tech Mono', monospace; font-size: .64rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--sc-dim);
}

/* ── Sections ─────────────────────────────────── */
.sc-section { margin-top: 72px; scroll-margin-top: 110px; }
.sc-section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.sc-section-head h2 {
  margin: 0; white-space: nowrap;
  font-family: 'Orbitron', sans-serif; font-size: clamp(1.1rem, 2.6vw, 1.45rem);
  font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--sc-text);
}
.sc-section-head::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(0,231,255,.45), transparent);
}
.sc-num {
  font-family: 'Share Tech Mono', monospace; font-size: .7rem; letter-spacing: .16em;
  color: #00ff41; padding: 4px 9px; border-radius: 6px;
  border: 1px solid rgba(0,255,65,.28); background: rgba(0,255,65,.07);
}
.sc-section-lede {
  max-width: 780px; margin: 0 0 22px;
  font-family: 'Rajdhani', sans-serif; font-size: .98rem; line-height: 1.65; color: var(--sc-dim);
}

/* ── Search ───────────────────────────────────── */
.sc-search-shell {
  position: relative; padding: 26px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), transparent 140px), var(--sc-surface-2);
  border: 1px solid var(--sc-border); box-shadow: var(--sc-elev-1);
  backdrop-filter: var(--sc-blur); -webkit-backdrop-filter: var(--sc-blur);
}
.sc-search {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 6px 6px 16px; border-radius: 14px;
  background: var(--sc-surface-3); border: 1px solid var(--sc-border-soft);
  transition: border-color .25s var(--sc-ease), box-shadow .25s var(--sc-ease);
}
.sc-search:focus-within {
  border-color: rgba(0,231,255,.55);
  box-shadow: 0 0 0 3px rgba(0,231,255,.10), 0 0 30px rgba(0,231,255,.14);
}
.sc-search-icon { width: 19px; height: 19px; flex: 0 0 auto; color: #00e7ff; }
.sc-search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  padding: 14px 0; color: var(--sc-text);
  font-family: 'Share Tech Mono', monospace; font-size: .94rem; letter-spacing: .02em;
}
.sc-search input::placeholder { color: #5d6d84; }
/* The native clear affordance sits badly against the dark field. */
.sc-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.sc-search-go {
  flex: 0 0 auto; padding: 12px 22px; border-radius: 10px; border: 0; cursor: pointer;
  font-family: 'Orbitron', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: #04170c;
  background: linear-gradient(135deg, #6ef0aa 0%, #00ff41 55%, #12b45c 100%);
  box-shadow: 0 6px 20px rgba(0,255,65,.26);
  transition: transform .3s var(--sc-spring), box-shadow .3s var(--sc-ease);
}
.sc-search-go:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,255,65,.40); }

.sc-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.sc-chip {
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  font-family: 'Share Tech Mono', monospace; font-size: .74rem; letter-spacing: .07em;
  color: #a8ecff; background: var(--sc-surface-1); border: 1px solid var(--sc-border-soft);
  transition: border-color .22s, color .22s, background .22s, transform .22s var(--sc-spring);
}
.sc-chip:hover { transform: translateY(-2px); border-color: rgba(0,231,255,.5); }
.sc-chip.is-on {
  color: #04170c; border-color: transparent; font-weight: 700;
  background: linear-gradient(135deg, #6ef0aa, #00ff41);
}

.sc-examples {
  margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: 'Share Tech Mono', monospace; font-size: .72rem; color: var(--sc-dim);
}
.sc-eg {
  padding: 5px 11px; border-radius: 7px; cursor: pointer;
  font-family: inherit; font-size: .72rem; color: #a8ecff;
  background: rgba(0,231,255,.06); border: 1px solid rgba(0,231,255,.18);
  transition: background .2s, border-color .2s, color .2s;
}
.sc-eg:hover { background: rgba(0,231,255,.14); border-color: rgba(0,231,255,.45); color: #fff; }

/* Hidden where there is no keyboard to press it with. */
.sc-hint {
  margin-left: auto; color: var(--sc-dim);
  font-family: 'Share Tech Mono', monospace; font-size: .68rem; letter-spacing: .06em;
}
.sc-hint kbd {
  display: inline-block; min-width: 16px; padding: 1px 5px; margin: 0 1px;
  border-radius: 4px; text-align: center;
  background: rgba(140,240,255,.1); border: 1px solid rgba(140,240,255,.25);
  color: #dceaf7; font-family: inherit; font-size: .95em;
}
@media (hover: none), (max-width: 700px) { .sc-hint { display: none; } }

/* ── Result cards ─────────────────────────────── */
.sc-results { margin-top: 22px; display: grid; gap: 13px; }

.sc-card {
  position: relative; isolation: isolate;
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 20px 22px 20px 26px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 90px), var(--sc-surface-2);
  border: 1px solid var(--sc-border);
  box-shadow: var(--sc-elev-1);
  backdrop-filter: var(--sc-blur); -webkit-backdrop-filter: var(--sc-blur);
  transition: transform .38s var(--sc-spring), border-color .28s, box-shadow .38s var(--sc-ease);
  color: inherit;
}
/* Severity rail. Sits inside the radius, so it curves with the card. */
.sc-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(180deg, var(--sc-sev, var(--sc-acc)), transparent 88%);
}
.sc-card:hover, .sc-card:focus-visible {
  transform: translateY(-3px); outline: none;
  border-color: color-mix(in srgb, var(--sc-acc) 45%, transparent);
  box-shadow: var(--sc-elev-2), 0 0 34px color-mix(in srgb, var(--sc-acc) 18%, transparent);
}

.sc-card-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.sc-badge {
  font-family: 'Share Tech Mono', monospace; font-size: .63rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px;
  color: var(--sc-acc);
  background: color-mix(in srgb, var(--sc-acc) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc-acc) 32%, transparent);
}
.sc-badge--sev {
  color: var(--sc-sev); border-color: color-mix(in srgb, var(--sc-sev) 40%, transparent);
  background: color-mix(in srgb, var(--sc-sev) 10%, transparent);
}
.sc-badge--match {
  margin-left: auto; color: #3ddc84;
  border-color: rgba(61,220,132,.34); background: rgba(61,220,132,.08);
}
.sc-card h3 {
  margin: 0 0 7px; font-family: 'Orbitron', sans-serif;
  font-size: .96rem; font-weight: 700; letter-spacing: .03em; color: var(--sc-text);
  line-height: 1.4;
}
.sc-card p {
  margin: 0; font-family: 'Rajdhani', sans-serif; font-size: .92rem;
  line-height: 1.55; color: var(--sc-dim);
}
.sc-codes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.sc-code-pill {
  font-family: 'Share Tech Mono', monospace; font-size: .68rem;
  padding: 3px 9px; border-radius: 999px;
  color: color-mix(in srgb, var(--sc-acc) 55%, #eaf6ff);
  background: color-mix(in srgb, var(--sc-acc) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc-acc) 34%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--sc-acc) 12%, transparent);
}
.sc-code-pill mark { background: rgba(0,255,65,.28); color: #eaffef; border-radius: 3px; padding: 0 2px; }

.sc-empty, .sc-loading {
  padding: 30px; border-radius: 16px; text-align: center;
  background: var(--sc-surface-1); border: 1px solid var(--sc-border);
  font-family: 'Share Tech Mono', monospace; font-size: .85rem; color: var(--sc-dim);
  line-height: 1.7;
}
.sc-empty b { color: var(--sc-text); }
.sc-empty a { color: #00e7ff; }

/* An uncurated live result is deliberately not dressed as a fix. */
.sc-external {
  padding: 22px; border-radius: 16px;
  background: var(--sc-surface-2);
  border: 1px dashed rgba(255,201,61,.42);
  box-shadow: var(--sc-elev-1);
}
.sc-external .sc-warn {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
  font-family: 'Share Tech Mono', monospace; font-size: .66rem;
  letter-spacing: .12em; text-transform: uppercase; color: #ffc93d;
}
.sc-external h3 {
  margin: 0 0 9px; font-family: 'Orbitron', sans-serif; font-size: .95rem;
  color: var(--sc-text); line-height: 1.45;
}
.sc-external p { margin: 0 0 14px; font-family: 'Rajdhani', sans-serif; font-size: .95rem; line-height: 1.6; color: var(--sc-dim); }
.sc-external a.sc-out {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 9px; text-decoration: none;
  font-family: 'Share Tech Mono', monospace; font-size: .74rem;
  color: #04170c; background: linear-gradient(135deg, #ffd97a, #ffc93d);
}

.sc-refgroup { margin: 0 0 18px; }
.sc-refgroup h4 {
  margin: 0 0 6px; font-family: 'Share Tech Mono', monospace; font-size: .66rem;
  letter-spacing: .15em; text-transform: uppercase; color: #ffc93d;
}
.sc-refnote {
  margin: 0 0 10px !important; font-size: .86rem !important; color: #8b9bb4 !important;
  font-style: italic;
}
.sc-refgroup ul { margin: 0; padding: 0; list-style: none; }
.sc-refgroup li {
  padding: 9px 0 9px 14px; position: relative;
  border-top: 1px solid rgba(255,201,61,.10);
}
.sc-refgroup li::before {
  content: ''; position: absolute; left: 0; top: 17px;
  width: 4px; height: 4px; border-radius: 50%; background: #ffc93d; opacity: .6;
}
.sc-refgroup li a {
  display: block; text-decoration: none; color: #a8ecff;
  font-family: 'Share Tech Mono', monospace; font-size: .78rem; line-height: 1.5;
  transition: color .2s;
}
.sc-refgroup li a:hover { color: #fff; text-decoration: underline; }
.sc-refgroup li span {
  display: block; margin-top: 4px;
  font-family: 'Rajdhani', sans-serif; font-size: .88rem; line-height: 1.5; color: #7f93ab;
}

/* ── Diagnostic console ───────────────────────── */
.sc-console {
  border-radius: 18px; overflow: hidden;
  background: var(--sc-surface-3);
  border: 1px solid var(--sc-border-soft);
  box-shadow: var(--sc-elev-2), inset 0 1px 0 rgba(255,255,255,.05);
}
.sc-console-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
  border-bottom: 1px solid var(--sc-border);
}
.sc-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.sc-dot--r { background: #ff5f57; } .sc-dot--y { background: #febc2e; } .sc-dot--g { background: #28c840; }
.sc-console-bar b {
  margin-left: 8px; font-family: 'Share Tech Mono', monospace;
  font-size: .74rem; letter-spacing: .06em; color: #7f93ab; font-weight: 400;
}
.sc-console-spacer { flex: 1; }
.sc-console-reset {
  padding: 5px 12px; border-radius: 7px; cursor: pointer;
  font-family: 'Share Tech Mono', monospace; font-size: .68rem; color: #a8ecff;
  background: rgba(140,240,255,.06); border: 1px solid rgba(140,240,255,.18);
  transition: background .2s, border-color .2s;
}
.sc-console-reset:hover { background: rgba(140,240,255,.16); border-color: rgba(140,240,255,.4); }

.sc-console-log {
  height: 460px; overflow-y: auto; padding: 20px;
  font-family: 'Share Tech Mono', monospace; font-size: .84rem; line-height: 1.75;
  scroll-behavior: smooth;
}
.sc-line { display: flex; gap: 12px; margin-bottom: 14px; }
.sc-who {
  flex: 0 0 42px; text-align: right;
  font-size: .68rem; letter-spacing: .1em; padding-top: 2px;
}
.sc-line--you .sc-who { color: #3ddc84; }
.sc-line--bot .sc-who { color: #00e7ff; }
.sc-line--sys .sc-who { color: #7f93ab; }
.sc-say { flex: 1; min-width: 0; color: #c7d6e6; }
.sc-line--you .sc-say { color: #eaf6ff; }
.sc-say b { color: #fff; font-weight: 400; }
.sc-say code {
  font-family: inherit; color: #ffd97a;
  background: rgba(255,201,61,.09); padding: 1px 5px; border-radius: 4px;
}
.sc-say .sc-arrow { color: #4a5f77; margin-right: 6px; }
.sc-say ul { margin: 6px 0 0; padding-left: 18px; }
.sc-say li { margin-bottom: 3px; }

/* Answer buttons for a narrowing question. */
.sc-asks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sc-ask {
  padding: 8px 14px; border-radius: 9px; cursor: pointer;
  font-family: 'Share Tech Mono', monospace; font-size: .76rem; color: #a8ecff;
  background: rgba(0,231,255,.07); border: 1px solid rgba(0,231,255,.26);
  transition: background .2s, border-color .2s, transform .2s var(--sc-spring), color .2s;
}
.sc-ask:hover { background: rgba(0,231,255,.18); border-color: rgba(0,231,255,.6); color: #fff; transform: translateY(-2px); }
.sc-ask[disabled] { opacity: .35; cursor: default; transform: none; }
.sc-ask--skip { color: #7f93ab; background: rgba(140,240,255,.04); border-color: rgba(140,240,255,.14); }

/* The verdict block the console lands on. */
.sc-verdict {
  margin-top: 12px; padding: 16px 18px; border-radius: 12px;
  background: rgba(0,231,255,.05); border: 1px solid rgba(0,231,255,.22);
  border-left: 3px solid var(--sc-acc);
}
.sc-verdict dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; }
.sc-verdict dt {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: #7f93ab; white-space: nowrap;
}
.sc-verdict dd { margin: 0; color: #eaf6ff; }
.sc-verdict .sc-open {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 13px;
  padding: 9px 17px; border-radius: 9px; cursor: pointer; border: 0;
  font-family: 'Orbitron', sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: #04170c;
  background: linear-gradient(135deg, #6ef0aa, #00ff41);
  transition: transform .28s var(--sc-spring), box-shadow .28s;
}
.sc-verdict .sc-open:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,255,65,.34); }

.sc-typing { display: inline-flex; gap: 4px; align-items: center; height: 18px; }
.sc-typing i {
  width: 5px; height: 5px; border-radius: 50%; background: #00e7ff;
  animation: scBlink 1.3s ease-in-out infinite;
}
.sc-typing i:nth-child(2) { animation-delay: .18s; }
.sc-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes scBlink { 0%,60%,100% { opacity: .2; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.sc-console-input {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-top: 1px solid var(--sc-border);
  background: rgba(255,255,255,.02);
}
.sc-prompt { color: #00ff41; font-family: 'Share Tech Mono', monospace; font-size: .95rem; }
.sc-console-input input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 10px 0;
  color: var(--sc-text); font-family: 'Share Tech Mono', monospace; font-size: .86rem;
}
.sc-console-input input::placeholder { color: #4f5f74; }
.sc-console-send {
  padding: 9px 18px; border-radius: 8px; border: 0; cursor: pointer;
  font-family: 'Orbitron', sans-serif; font-size: .66rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: #04170c;
  background: linear-gradient(135deg, #6ef0aa, #00ff41);
  transition: transform .28s var(--sc-spring);
}
.sc-console-send:hover { transform: translateY(-2px); }

/* ── Coverage ─────────────────────────────────── */
.sc-coverage { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.sc-cov {
  position: relative; padding: 22px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 80px), var(--sc-surface-1);
  border: 1px solid color-mix(in srgb, var(--sc-acc) 22%, transparent);
  box-shadow: var(--sc-elev-1);
  backdrop-filter: var(--sc-blur); -webkit-backdrop-filter: var(--sc-blur);
}
.sc-cov h3 {
  margin: 0 0 4px; font-family: 'Orbitron', sans-serif; font-size: .88rem;
  letter-spacing: .07em; color: var(--sc-acc);
}
.sc-cov .sc-cov-n {
  font-family: 'Share Tech Mono', monospace; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sc-dim);
}
.sc-cov ul { margin: 13px 0 0; padding: 0; list-style: none; }
.sc-cov li {
  padding: 6px 0 6px 16px; position: relative;
  font-family: 'Rajdhani', sans-serif; font-size: .9rem; color: #b9c8dc;
  border-top: 1px solid rgba(140,240,255,.06);
}
.sc-cov li::before {
  content: ''; position: absolute; left: 2px; top: 14px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--sc-acc); opacity: .7;
}
/* The titles are buttons so a fault can be opened straight from the coverage
   list, but they should read as list text, not as a row of controls. */
.sc-cov li button {
  display: block; width: 100%; text-align: left; padding: 0; cursor: pointer;
  background: none; border: 0; color: inherit;
  font-family: inherit; font-size: inherit; line-height: inherit;
  transition: color .2s var(--sc-ease);
}
.sc-cov li button:hover, .sc-cov li button:focus-visible { color: var(--sc-acc); outline: none; }
/* Topic counts sit hard right of their label rather than after it, so the
   numbers line up into a column the eye can read down. */
.sc-cov li button { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.sc-cov li button b {
  flex: 0 0 auto; font-family: 'Share Tech Mono', monospace; font-weight: 400;
  font-size: .72rem; color: var(--sc-acc); opacity: .75;
}
.sc-cov .sc-cov-more { border-top: 1px solid rgba(140,240,255,.12); }
.sc-cov .sc-cov-more::before { display: none; }
.sc-cov .sc-cov-more button {
  padding-left: 0; color: var(--sc-acc); opacity: .85;
  font-family: 'Share Tech Mono', monospace; font-size: .74rem; letter-spacing: .04em;
}
.sc-cov .sc-cov-more button:hover { opacity: 1; text-decoration: underline; }

/* ── Browse ───────────────────────────────────── */
.sc-browse-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.sc-browse-bar .sc-filters { margin-top: 0; }
.sc-browse-count {
  margin-left: auto; font-family: 'Share Tech Mono', monospace;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-dim);
}

/* One severity chip per level, tinted to the same token the cards use, so the
   filter and the thing being filtered are visibly the same scale. */
.sc-sev {
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(140,240,255,.05); border: 1px solid rgba(140,240,255,.16);
  color: var(--sc-dim);
  font-family: 'Share Tech Mono', monospace; font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase;
  transition: transform .2s var(--sc-ease), border-color .2s var(--sc-ease),
              color .2s var(--sc-ease), background .2s var(--sc-ease);
}
.sc-sev:hover { transform: translateY(-2px); color: #dceaf7; }
.sc-sev.is-on { color: #eaf6ff; background: rgba(140,240,255,.13); border-color: rgba(140,240,255,.45); }
.sc-sev[data-severity="critical"].is-on { color: #ff8fa3; background: rgba(255,59,92,.12); border-color: rgba(255,59,92,.45); }
.sc-sev[data-severity="high"].is-on     { color: #ffb384; background: rgba(255,138,61,.12); border-color: rgba(255,138,61,.45); }
.sc-sev[data-severity="medium"].is-on   { color: #ffdc7a; background: rgba(255,201,61,.12); border-color: rgba(255,201,61,.45); }
.sc-sev[data-severity="low"].is-on      { color: #7fe8ac; background: rgba(61,220,132,.12); border-color: rgba(61,220,132,.45); }

.sc-topics { display: grid; gap: 10px; }

/* <details> rather than a scripted accordion: it collapses, it is keyboard
   operable and it is findable by the browser's own in-page search without any
   of that having to be written. */
.sc-topic {
  border-radius: 14px; overflow: hidden;
  background: var(--sc-surface-1);
  border: 1px solid color-mix(in srgb, var(--sc-acc) 18%, transparent);
  box-shadow: var(--sc-elev-1);
  backdrop-filter: var(--sc-blur); -webkit-backdrop-filter: var(--sc-blur);
}
.sc-topic summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 15px 18px; list-style: none;
  transition: background .2s var(--sc-ease);
}
.sc-topic summary::-webkit-details-marker { display: none; }
.sc-topic summary:hover { background: rgba(140,240,255,.05); }
.sc-topic summary:focus-visible { outline: 2px solid var(--sc-acc); outline-offset: -2px; }
/* The disclosure arrow, drawn rather than borrowed, so it can rotate. */
.sc-topic summary::before {
  content: ''; flex: 0 0 auto; width: 7px; height: 7px;
  border-right: 2px solid var(--sc-acc); border-bottom: 2px solid var(--sc-acc);
  transform: rotate(-45deg); margin-right: 2px;
  transition: transform .25s var(--sc-ease);
}
.sc-topic[open] summary::before { transform: rotate(45deg); }
.sc-topic-plat {
  flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--sc-acc) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc-acc) 34%, transparent);
  color: var(--sc-acc);
  font-family: 'Share Tech Mono', monospace; font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.sc-topic-label {
  flex: 1 1 auto; min-width: 0;
  font-family: 'Orbitron', sans-serif; font-size: .82rem;
  letter-spacing: .05em; color: var(--sc-text);
}
.sc-topic-n {
  flex: 0 0 auto; font-family: 'Share Tech Mono', monospace;
  font-size: .72rem; color: var(--sc-dim);
}
.sc-topic-list {
  margin: 0; padding: 0 18px 14px; list-style: none;
  border-top: 1px solid rgba(140,240,255,.09);
}
.sc-topic-list li { border-bottom: 1px solid rgba(140,240,255,.05); }
.sc-topic-list li:last-child { border-bottom: 0; }
.sc-topic-list a {
  display: flex; align-items: baseline; gap: 12px; justify-content: space-between;
  width: 100%; padding: 10px 4px; cursor: pointer;
  background: none; border: 0; text-align: left; text-decoration: none;
  color: #b9c8dc; font-family: 'Rajdhani', sans-serif; font-size: .95rem;
  transition: color .2s var(--sc-ease), padding-left .2s var(--sc-ease);
}
.sc-topic-list a:hover, .sc-topic-list a:focus-visible {
  color: #fff; padding-left: 9px; outline: none;
}
.sc-topic-title { min-width: 0; }
.sc-topic-sev {
  flex: 0 0 auto; font-family: 'Share Tech Mono', monospace;
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sc-sev, var(--sc-dim));
}
.sc-topic-list li[data-severity="critical"] { --sc-sev: #ff3b5c; }
.sc-topic-list li[data-severity="high"]     { --sc-sev: #ff8a3d; }
.sc-topic-list li[data-severity="medium"]   { --sc-sev: #ffc93d; }
.sc-topic-list li[data-severity="low"]      { --sc-sev: #3ddc84; }

/* ── Related faults, in the reader ────────────── */
.sc-related { display: grid; gap: 8px; }
.sc-related-item {
  display: flex; align-items: baseline; gap: 12px; justify-content: space-between;
  width: 100%; padding: 11px 14px; border-radius: 10px; cursor: pointer;
  text-align: left;
  background: rgba(140,240,255,.04);
  border: 1px solid color-mix(in srgb, var(--sc-acc) 20%, transparent);
  transition: transform .2s var(--sc-ease), border-color .2s var(--sc-ease),
              background .2s var(--sc-ease);
}
.sc-related-item:hover, .sc-related-item:focus-visible {
  transform: translateX(3px); background: rgba(140,240,255,.08);
  border-color: color-mix(in srgb, var(--sc-acc) 45%, transparent); outline: none;
}
.sc-related-item b {
  min-width: 0; font-family: 'Rajdhani', sans-serif; font-weight: 600;
  font-size: .93rem; color: #dceaf7;
}
.sc-related-item span {
  flex: 0 0 auto; font-family: 'Share Tech Mono', monospace;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sc-acc); opacity: .8;
}

.sc-honest {
  margin: 26px 0 0; padding: 20px 22px; border-radius: 14px;
  background: rgba(255,201,61,.045); border: 1px solid rgba(255,201,61,.2);
  border-left: 3px solid #ffc93d;
  font-family: 'Rajdhani', sans-serif; font-size: .95rem; line-height: 1.7; color: #b9c8dc;
}
.sc-honest b { color: #ffd97a; }
.sc-honest a { color: #00e7ff; }

/* ── A fault as its own page (/support/<id>) ───
   The same blocks as the reader, laid out as a page rather than a panel. The
   fix cards, command frames, pills and step numerals are all shared, so a fault
   looks the same whether it is opened in the modal or arrived at from a search
   result. */
.sc-fault .sc-container { padding-top: 120px; max-width: 960px; }

/* style.css styles the BARE element `nav` as the site's navigation bar —
   display:flex with justify-content:space-between, 1rem 5% padding, a
   max-width and a min-height. A <nav> used semantically for breadcrumbs
   inherits all of it, which spread these three items across the full width
   with gaps between them. Third element with this trap, after <header> and
   <section>: reset what the bare rule sets, do not just add to it. */
.sc-crumbs {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: flex-start; gap: 9px;
  max-width: none; min-height: 0; padding: 0; margin: 0 0 22px;
  font-family: 'Share Tech Mono', monospace; font-size: .7rem;
  letter-spacing: .08em; color: var(--sc-dim);
}
.sc-crumbs a { color: var(--sc-acc); text-decoration: none; }
.sc-crumbs a:hover { text-decoration: underline; }
.sc-crumbs span[aria-hidden] { opacity: .4; }
.sc-crumbs span[aria-current] { color: var(--sc-text); }

.sc-fault-head {
  padding-bottom: 22px; margin-bottom: 28px;
  border-bottom: 1px solid color-mix(in srgb, var(--sc-acc) 22%, transparent);
}
.sc-fault-head h1 {
  margin: 8px 0 14px; font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.35rem, 3.4vw, 2.1rem); line-height: 1.25;
  color: var(--sc-text);
  text-shadow: 0 0 26px color-mix(in srgb, var(--sc-acc) 35%, transparent);
}
.sc-fault-summary {
  margin: 0; max-width: 68ch;
  font-family: 'Rajdhani', sans-serif; font-size: 1.08rem; line-height: 1.65;
  color: #c7d6e6;
}
/* The related list is a column of links here rather than a stack inside a
   panel, and each one is a real <a> so a crawler can follow it. */
.sc-fault .sc-related-item { text-decoration: none; }
.sc-fault .sc-honest { margin-top: 34px; }

/* ── Reader ───────────────────────────────────── */
.sc-reader { position: fixed; inset: 0; z-index: 2000; display: flex; }
.sc-reader[hidden] { display: none; }
.sc-reader-scrim {
  position: absolute; inset: 0; background: rgba(2,6,11,.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: scFade .3s var(--sc-ease);
}
@keyframes scFade { from { opacity: 0; } }

.sc-reader-panel {
  position: relative; margin: auto;
  /* Wider than it was: commands are the widest thing in here and the extra
     80px keeps a good many of them on one line now that they wrap. */
  width: min(960px, 100%); max-height: 100%;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(20,30,38,.98), rgba(10,15,21,.99));
  border: 1px solid color-mix(in srgb, var(--sc-acc) 32%, transparent);
  border-radius: 20px; overflow: hidden;
  /* Depth, then the accent halo the panels on apps.html and webapps.html sit
     inside, then a hairline of the accent just inside the border — the same
     three-layer edge those pages use. */
  box-shadow:
    0 40px 90px rgba(0,0,0,.7),
    0 0 70px color-mix(in srgb, var(--sc-acc) 26%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--sc-acc) 10%, transparent);
  animation: scRise .42s var(--sc-spring);
}
@keyframes scRise { from { transform: translateY(24px) scale(.98); opacity: 0; } }
/* Accent rule along the top edge, tinted to the entry's platform, with the glow
   the cards on apps.html and webapps.html carry on theirs. */
.sc-reader-panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, var(--sc-acc), transparent 88%);
  box-shadow: 0 0 14px color-mix(in srgb, var(--sc-acc) 60%, transparent);
}
/* A fade at the foot of the panel, so a long write-up reads as continuing
   rather than as ending exactly at the bottom edge. Inert, and it sits over the
   scroll area rather than inside it so it does not move with the content. */
.sc-reader-panel::after {
  content: ''; position: absolute; left: 1px; right: 1px; bottom: 0; height: 54px;
  z-index: 2; pointer-events: none; border-radius: 0 0 19px 19px;
  background: linear-gradient(180deg, transparent, rgba(10,15,21,.92));
}

.sc-reader-head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 24px 26px 18px; border-bottom: 1px solid var(--sc-border);
  flex: 0 0 auto;
}
.sc-reader-eyebrow {
  display: block; margin-bottom: 7px;
  font-family: 'Share Tech Mono', monospace; font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sc-acc);
}
.sc-reader-head h2 {
  margin: 0; font-family: 'Orbitron', sans-serif; font-size: 1.05rem;
  font-weight: 800; letter-spacing: .03em; color: var(--sc-text); line-height: 1.4;
}
.sc-reader-close {
  margin-left: auto; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--sc-surface-1); border: 1px solid var(--sc-border); color: #a8ecff;
  transition: border-color .22s, background .22s, transform .22s var(--sc-spring);
}
.sc-reader-close:hover { border-color: var(--sc-acc); transform: rotate(90deg); }
.sc-reader-close svg { width: 18px; height: 18px; }

.sc-reader-body {
  padding: 24px 26px 34px; overflow-y: auto; flex: 1 1 auto;
  overscroll-behavior: contain;   /* stop the page behind scrolling on at the end */
}

/**
 * The site's own scrollbar, sized for a panel rather than for the page.
 *
 * cyberpunk-theme.css styles ::-webkit-scrollbar with no selector in front of
 * it, so every scrollable element on the site inherits a 10px track with a cyan
 * left border and a magenta-to-cyan thumb outlined in pink. Down the side of the
 * window that is the house look and it should stay. Repeated under all 1,400-odd
 * command blocks it stopped reading as a control at all.
 *
 * So: the same gradient and the same glow on hover, at 8px, without the track
 * border and the pink outline that make it a slab at this size. Scoped to the
 * three things on this page that scroll inside a panel — the reader, the
 * diagnostic transcript, and any command long enough to defeat the wrapping.
 */
.sc-reader-body, .sc-console-log, .sc-cmd pre {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sc-acc) 55%, transparent) transparent;
}
.sc-reader-body::-webkit-scrollbar,
.sc-console-log::-webkit-scrollbar,
.sc-cmd pre::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }

.sc-reader-body::-webkit-scrollbar-track,
.sc-console-log::-webkit-scrollbar-track,
.sc-cmd pre::-webkit-scrollbar-track { background: rgba(0,0,0,.35); border: 0; }

.sc-reader-body::-webkit-scrollbar-thumb,
.sc-console-log::-webkit-scrollbar-thumb,
.sc-cmd pre::-webkit-scrollbar-thumb {
  border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #ff00ff, var(--sc-acc));
}
.sc-reader-body::-webkit-scrollbar-thumb:hover,
.sc-console-log::-webkit-scrollbar-thumb:hover,
.sc-cmd pre::-webkit-scrollbar-thumb:hover {
  box-shadow: 0 0 10px rgba(255,0,255,.6);
}

.sc-block { margin-bottom: 26px; }
/* Lit, and carrying the short leading rule the numbered section heads on the
   page itself use, so the reader's subheads belong to the same family. */
.sc-block h4 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 9px; font-family: 'Share Tech Mono', monospace; font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sc-acc);
  text-shadow: 0 0 14px color-mix(in srgb, var(--sc-acc) 50%, transparent);
}
.sc-block h4::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sc-acc) 40%, transparent), transparent);
}
.sc-block p {
  margin: 0; font-family: 'Rajdhani', sans-serif; font-size: 1rem;
  line-height: 1.7; color: #c7d6e6;
}

/* A fix is a <section>, and style.css pads the bare element with 5rem top and
   bottom for page sections — which put 80px of empty box above and below every
   fix in the reader. Same trap as the bare <header> rule; reset it here rather
   than changing the element, because a fix genuinely is a section. */
.sc-fix {
  position: relative;
  margin-top: 18px; padding: 0; border-radius: 14px; overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sc-acc) 6%, transparent), transparent 90px),
    var(--sc-surface-1);
  border: 1px solid color-mix(in srgb, var(--sc-acc) 20%, transparent);
  box-shadow: var(--sc-elev-1), 0 0 24px color-mix(in srgb, var(--sc-acc) 8%, transparent);
}
/* The lit top edge every card on apps.html and webapps.html carries. */
.sc-fix::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--sc-acc), color-mix(in srgb, var(--sc-acc) 20%, transparent) 55%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--sc-acc) 55%, transparent);
}
.sc-fix-head { padding: 18px 20px 14px; border-bottom: 1px solid var(--sc-border); }
/* Lit like the app titles on webapps.html — the accent colour with a soft halo
   rather than plain white text. */
.sc-fix-head h5 {
  margin: 0 0 10px; font-family: 'Orbitron', sans-serif; font-size: .9rem;
  font-weight: 700; line-height: 1.45;
  color: color-mix(in srgb, var(--sc-acc) 55%, #ffffff);
  text-shadow: 0 0 18px color-mix(in srgb, var(--sc-acc) 45%, transparent);
}
.sc-meta { display: flex; flex-wrap: wrap; gap: 7px; }
/* The outlined neon pills from the app cards — uppercase mono, accent border,
   a trace of glow. */
.sc-meta span {
  font-family: 'Share Tech Mono', monospace; font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  color: color-mix(in srgb, var(--sc-acc) 62%, #eaf6ff);
  background: color-mix(in srgb, var(--sc-acc) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc-acc) 38%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--sc-acc) 14%, transparent);
}
/* Risk and reversibility carry their own colour, so they take their own glow
   with it rather than keeping the platform accent's. */
.sc-meta .sc-risk--high   { color: #ff8a9c; background: rgba(255,59,92,.12);  border-color: rgba(255,59,92,.45);  box-shadow: 0 0 10px rgba(255,59,92,.2); }
.sc-meta .sc-risk--medium { color: #ffc93d; background: rgba(255,201,61,.12); border-color: rgba(255,201,61,.42); box-shadow: 0 0 10px rgba(255,201,61,.18); }
.sc-meta .sc-risk--low    { color: #3ddc84; background: rgba(61,220,132,.11); border-color: rgba(61,220,132,.4);  box-shadow: 0 0 10px rgba(61,220,132,.16); }
.sc-meta .sc-irrev        { color: #ff8a9c; background: rgba(255,59,92,.12);  border-color: rgba(255,59,92,.45);  box-shadow: 0 0 10px rgba(255,59,92,.2); }

.sc-when {
  margin: 0; padding: 12px 20px;
  background: rgba(255,201,61,.05); border-bottom: 1px solid rgba(255,201,61,.14);
  font-family: 'Rajdhani', sans-serif; font-size: .93rem; line-height: 1.6; color: #d6c79b;
}

.sc-steps { margin: 0; padding: 16px 20px 18px; list-style: none; counter-reset: scstep; }
.sc-steps > li {
  position: relative; padding: 0 0 18px 40px; counter-increment: scstep;
}
.sc-steps > li::before {
  content: counter(scstep, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Share Tech Mono', monospace; font-size: .66rem;
  color: var(--sc-acc);
  background: color-mix(in srgb, var(--sc-acc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc-acc) 42%, transparent);
  /* The lit step numerals from the "01 02 03" cards on webapps.html. */
  box-shadow: 0 0 12px color-mix(in srgb, var(--sc-acc) 22%, transparent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--sc-acc) 60%, transparent);
}
/* Connecting rail between step numbers. */
.sc-steps > li::after {
  content: ''; position: absolute; left: 13px; top: 30px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sc-acc) 24%, transparent), transparent);
}
.sc-steps > li:last-child { padding-bottom: 0; }
.sc-steps > li:last-child::after { display: none; }
.sc-step-do {
  margin: 3px 0 0; font-family: 'Rajdhani', sans-serif; font-size: 1rem;
  line-height: 1.65; color: #dbe7f4;
}
.sc-why {
  margin: 9px 0 0; padding: 9px 13px; border-radius: 8px;
  background: rgba(140,240,255,.04); border-left: 2px solid rgba(140,240,255,.28);
  font-family: 'Rajdhani', sans-serif; font-size: .9rem; line-height: 1.6; color: #9fb2c8;
}
/* The accent, not a fixed cyan — this label sits inside a fix card and was the
   one thing in it still wearing the default colour on a Linux or Server fault. */
.sc-why::before { content: 'Why  '; font-family: 'Share Tech Mono', monospace; font-size: .62rem; letter-spacing: .14em; color: var(--sc-acc); }

/* A terminal frame, tinted to the platform like everything else in here. */
.sc-cmd {
  position: relative; margin: 10px 0 0; border-radius: 10px; overflow: hidden;
  background: #05090f;
  border: 1px solid color-mix(in srgb, var(--sc-acc) 24%, transparent);
  box-shadow: inset 0 0 30px rgba(0,255,65,.04);
}
.sc-cmd-bar {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 13px;
  background: rgba(140,240,255,.04); border-bottom: 1px solid rgba(140,240,255,.09);
}
.sc-cmd-bar span {
  font-family: 'Share Tech Mono', monospace; font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: #6f8398;
}
.sc-copy {
  margin-left: auto; padding: 4px 11px; border-radius: 6px; cursor: pointer;
  font-family: 'Share Tech Mono', monospace; font-size: .64rem; color: #a8ecff;
  background: rgba(140,240,255,.07); border: 1px solid rgba(140,240,255,.18);
  transition: background .2s, color .2s, border-color .2s;
}
.sc-copy:hover { background: rgba(140,240,255,.18); color: #fff; }
.sc-copy.is-done { color: #04170c; background: #3ddc84; border-color: #3ddc84; }
/**
 * Commands wrap rather than scroll sideways.
 *
 * With `white-space: pre` a one-line PowerShell command ran off the right edge
 * of the card behind a scrollbar, so the half that says what it actually does
 * was invisible until you dragged for it — on a page whose whole point is
 * reading the command before running it. Every block also grew its own
 * horizontal scrollbar, and the site's unscoped ::-webkit-scrollbar rule draws
 * those 10px tall in magenta with a pink border. Across 1,400-odd commands that
 * is a wall of neon under a wall of neon.
 *
 * pre-wrap keeps the real newlines in a multi-line command and folds only the
 * lines that are too long. The negative text-indent against the matching
 * padding-left gives those folded lines a hanging indent, so a continuation is
 * visibly a continuation and not a second command. Copy takes the original text
 * either way, so nothing that gets pasted is affected by this.
 */
.sc-cmd pre {
  margin: 0; padding: 13px 15px;
  font-family: 'Share Tech Mono', monospace; font-size: .82rem; line-height: 1.7;
  color: #b9f2c8; tab-size: 2;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
}
/* Each real line of the command. The hanging indent belongs here rather than on
   the <pre>, so it marks only the lines the browser folded — see cmdBlock(). */
.sc-cmd-line {
  display: block; padding-left: 22px; text-indent: -22px;
}

.sc-outcome { display: grid; gap: 10px; padding: 0 20px 18px; }
.sc-outcome > div {
  padding: 12px 15px; border-radius: 10px;
  font-family: 'Rajdhani', sans-serif; font-size: .93rem; line-height: 1.6;
}
.sc-outcome .sc-verify { background: rgba(61,220,132,.06); border: 1px solid rgba(61,220,132,.2); color: #b9e6cb; }
.sc-outcome .sc-rollback { background: rgba(255,59,92,.05); border: 1px solid rgba(255,59,92,.18); color: #e8b6c0; }
.sc-outcome strong {
  display: block; margin-bottom: 5px;
  font-family: 'Share Tech Mono', monospace; font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.sc-outcome .sc-verify strong { color: #3ddc84; }
.sc-outcome .sc-rollback strong { color: #ff8a9c; }

.sc-refs { display: flex; flex-wrap: wrap; gap: 9px; }
.sc-refs a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 9px; text-decoration: none;
  font-family: 'Share Tech Mono', monospace; font-size: .72rem; color: #a8ecff;
  background: rgba(0,231,255,.06); border: 1px solid rgba(0,231,255,.2);
  transition: background .2s, border-color .2s, color .2s;
}
.sc-refs a:hover { background: rgba(0,231,255,.16); border-color: rgba(0,231,255,.5); color: #fff; }

/* ── Narrow screens ───────────────────────────── */
@media (max-width: 900px) {
  .sc-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .sc-container { padding: 24px 16px 70px; }
  .sc-section { margin-top: 54px; }
  .sc-search { flex-wrap: wrap; padding: 10px; }
  .sc-search input { flex: 1 1 100%; order: 2; padding: 10px 4px; }
  .sc-search-go { flex: 1 1 100%; order: 3; }
  .sc-search-icon { order: 1; }
  .sc-console-log { height: 380px; padding: 15px; font-size: .8rem; }
  .sc-who { flex-basis: 34px; font-size: .62rem; }
  .sc-reader-panel { width: 100%; max-height: 100%; border-radius: 0; }
  .sc-reader-body { padding: 18px 16px 28px; }
  .sc-reader-head { padding: 18px 16px 14px; }
  .sc-steps { padding: 14px 14px 16px; }
  .sc-steps > li { padding-left: 34px; }
  .sc-verdict dl { grid-template-columns: 1fr; gap: 2px; }
  .sc-verdict dt { margin-top: 7px; }
  /* The count moves under the chips rather than being pushed off the row. */
  .sc-browse-count { margin-left: 0; flex-basis: 100%; }
  .sc-topic summary { padding: 13px 14px; gap: 9px; }
  /* The platform is already the only thing on screen when a filter is on, and
     the label needs the width more than the badge does. */
  .sc-topic-plat { display: none; }
  .sc-topic-list { padding: 0 14px 12px; }
  .sc-topic-list a { gap: 8px; }
  .sc-related-item { flex-wrap: wrap; gap: 4px; }
  /* The full-viewport blend layer is expensive on mobile GPUs for very little
     visual return at this size. */
  .sc-atmos::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-aurora i, .sc-grid, .sc-sweep, .sc-title, .sc-title::after,
  .sc-live, .sc-typing i { animation: none; }
  .sc-sweep { display: none; }
  .sc-title { background-position: 0 0; }
  .sc-card, .sc-chip, .sc-eg, .sc-ask, .sc-search-go, .sc-console-send,
  .sc-reader-close, .sc-verdict .sc-open, .sc-stat { transition: none; }
  .sc-card:hover, .sc-chip:hover, .sc-eg:hover, .sc-ask:hover, .sc-stat:hover,
  .sc-search-go:hover, .sc-console-send:hover, .sc-verdict .sc-open:hover { transform: none; }
  .sc-sev, .sc-topic summary::before, .sc-topic-list a, .sc-related-item { transition: none; }
  .sc-sev:hover, .sc-related-item:hover { transform: none; }
  .sc-topic-list a:hover, .sc-topic-list a:focus-visible { padding-left: 4px; }
  .sc-reader-close:hover { transform: none; }
  .sc-reader-panel, .sc-reader-scrim { animation: none; }
  .sc-console-log { scroll-behavior: auto; }
}

@media print {
  .sc-aurora, .sc-atmos, .sc-stage, .sc-console, .sc-search-shell,
  .sc-reader-close, header, footer, .floating-fb { display: none !important; }
  .sc-reader { position: static; }
  .sc-reader-scrim { display: none; }
  .sc-reader-panel { box-shadow: none; border: 0; max-height: none; }
  .sc-page, .sc-reader-panel, .sc-fix, .sc-cmd { background: #fff !important; }
  /* The lit edges and the foot fade are ink on paper, and the fade would grey
     out the last inch of every printed page. */
  .sc-reader-panel::before, .sc-reader-panel::after, .sc-fix::before,
  .sc-block h4::after { display: none !important; }
  .sc-fix, .sc-cmd, .sc-meta span, .sc-code-pill { box-shadow: none !important; }
  .sc-fix-head h5, .sc-block h4 { text-shadow: none !important; }
  .sc-reader-head h2, .sc-fix-head h5, .sc-step-do, .sc-block p { color: #000 !important; }
  .sc-cmd pre { color: #063; }
}