/* ===========================================================================
   index.html only.

   Every section uses a different layout family, so the page never settles into
   one repeated rhythm:
     hero      asymmetric split
     support   single inline row
     usage     sticky heading beside a numbered flow
     changelog plain dated list
     security  asymmetric bento (1 wide + 2 stacked, exactly 3 cells)
     traffic   scaled figures on a hairline row
     credit    single line
   =========================================================================== */

/* --------------------------------------------------------------------------
   Hero. Four text elements total: headline, subtext, CTA row, meta line.
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(28px, 3vw, 44px) var(--section-y);
}

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.hero h1 {
  max-width: 13ch;
}

.hero-sub {
  margin: 22px 0 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: var(--step-1);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.copy-status {
  min-height: 20px;
  margin: 12px 0 0;
  color: var(--accent);
  font-size: var(--step--1);
}

/* Product shot, capped at the capture's own width so it is never upscaled
   into softness, and centred once the column is wider than that. */
.shot {
  margin: 48px auto 0;
  max-width: 858px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}

.shot img {
  display: block;
  width: 100%;
}

.shot figcaption {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--step--1);
}

/* --------------------------------------------------------------------------
   Support: one inline row, no card
   -------------------------------------------------------------------------- */

.support-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.support-row p {
  margin: 0;
  max-width: 44ch;
  color: var(--muted);
  font-size: var(--step--1);
}

.support-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


/* --------------------------------------------------------------------------
   Usage: heading holds its column, steps flow beside it
   -------------------------------------------------------------------------- */

.usage-split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.usage-aside {
  position: sticky;
  top: 40px;
}

/* The extension is a second way in, not the recommended one, so it sits under
   the console instructions at note size and without the warning rule. */
.usage-alt {
  margin: 14px 0 0;
  max-width: 58ch;
  color: var(--muted);
  font-size: var(--step--1);
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 4px 18px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  counter-increment: step;
}

.steps li:first-child {
  border-top: none;
  padding-top: 0;
}

.steps li::before {
  content: counter(step);
  grid-row: span 2;
  color: var(--accent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--step--1);
  line-height: 1.6;
}

.steps p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.65;
}

kbd {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink);
  font: 500 0.75rem/1.4 "JetBrains Mono", ui-monospace, monospace;
}

/* --------------------------------------------------------------------------
   Changelog: dated list, no containers
   -------------------------------------------------------------------------- */

.releases {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.release {
  display: grid;
  grid-template-columns: minmax(0, 0.35fr) minmax(0, 1fr);
  gap: 8px 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.release-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.release-version {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.release-date {
  color: var(--code-muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.release-notes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.release-notes li {
  position: relative;
  padding-left: 20px;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.7;
}

.release-notes li + li {
  margin-top: 10px;
}

.release-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 1px;
  background: var(--line-strong);
}

/* --------------------------------------------------------------------------
   Security: asymmetric bento, exactly three cells for three facts
   -------------------------------------------------------------------------- */

.trust-bento {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-areas:
    "signature virustotal"
    "signature analysis";
  gap: 1px;
  margin-top: 28px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.trust-cell {
  padding: 28px;
  background: var(--bg);
}

.trust-cell:first-child {
  grid-area: signature;
  background: var(--surface);
}

.trust-cell h3 {
  margin: 0 0 12px;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--muted);
}

.trust-cell p {
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.7;
}

.trust-hash {
  color: var(--ink);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--step--1);
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.trust-cell a {
  color: var(--accent);
  text-decoration-color: var(--accent-quiet);
}

.trust-cell img {
  display: block;
  margin-top: 4px;
}

.security-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

/* --------------------------------------------------------------------------
   Traffic: scaled figures, not three equal tiles
   -------------------------------------------------------------------------- */

.figures {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  align-items: baseline;
}

.figure-value {
  display: block;
  font-size: clamp(2rem, 1rem + 3.2vw, 3.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.figures > div:not(:first-child) .figure-value {
  font-size: clamp(1.5rem, 0.9rem + 1.8vw, 2rem);
  color: var(--muted);
}

.figure-label {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--step--1);
}

.meta-line {
  margin: 22px 0 0;
  color: var(--code-muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.meta-line--figures {
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Code window. Shows the real source, tokenised at runtime so it can never
   drift from the file, with the built one-liner behind the copy button.
   -------------------------------------------------------------------------- */

.code-window {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--code-bg);
  overflow: hidden;
  box-shadow: 0 40px 80px -48px rgba(0, 0, 0, 0.9);
}

.code-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 12px 11px 16px;
  border-bottom: 1px solid var(--line);
}

.code-window-title {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.code-window-name {
  color: var(--ink);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 500;
}

.code-window-lang {
  color: var(--code-line);
  font-size: 0.7rem;
  white-space: nowrap;
}


.code-body {
  margin: 0;
  padding: 14px 0 18px;
  height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  line-height: 1.85;
}

.code-body::-webkit-scrollbar {
  width: 10px;
}

.code-body::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(245, 242, 237, 0.16);
  background-clip: content-box;
}

.code-line {
  display: flex;
  padding: 0 16px;
}

.code-num {
  flex: 0 0 1.9rem;
  text-align: right;
  color: var(--code-line);
  font-size: 0.66rem;
  user-select: none;
}

.code-text {
  padding-left: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--code-muted);
}

.tok-kw { color: var(--tok-kw); }
.tok-str { color: var(--tok-str); }
.tok-num { color: var(--tok-num); }
.tok-fn { color: var(--tok-fn); }
.tok-punct { color: var(--tok-punct); }
.tok-com { color: var(--code-line); font-style: italic; }



/* --------------------------------------------------------------------------
   Mobile collapse, declared explicitly per layout
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero-split,
  .usage-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .usage-aside {
    position: static;
  }

  .trust-bento {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "signature"
      "virustotal"
      "analysis";
  }

  .figures {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
  }

  .figures > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .hero h1 {
    max-width: none;
  }

  .release {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .release-meta {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
  }

  .figures {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-actions .btn {
    flex: 1 1 auto;
  }

  .code-window pre {
    max-height: 220px;
  }
}

/* --------------------------------------------------------------------------
   Sponsor wall. Ten numbered slots. Scarcity is the motivation, so the count
   of remaining places is stated rather than implied.
   -------------------------------------------------------------------------- */

.wall {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.wall-lead {
  margin: 0;
  max-width: 56ch;
  color: var(--muted);
  font-size: var(--step--1);
}

.wall-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 28px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: slot;
}

.wall-list:empty {
  display: none;
  margin: 0;
}

.wall-slot {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  counter-increment: slot;
}

.wall-rank {
  flex: 0 0 1.4rem;
  color: var(--code-line);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.wall-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.wall-handle {
  flex: 0 0 auto;
  color: var(--accent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--step--1);
  text-decoration: none;
}

.wall-handle:hover {
  text-decoration: underline;
}

.wall-amount {
  flex: 0 0 auto;
  min-width: 3.1rem;
  text-align: right;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
}

.wall-empty {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: var(--step--1);
}

.wall-empty b {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 700px) {
  .wall-list {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* --------------------------------------------------------------------------
   Cross-promotion bar: above the masthead, slides in once, closes for good
   -------------------------------------------------------------------------- */

.promo-bar {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

/* Animating the height rather than sliding a fixed bar over the page keeps
   the masthead where it belongs: nothing is covered, only pushed down. */
@media (prefers-reduced-motion: no-preference) {
  .js .promo-bar {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.5s var(--ease), opacity 0.4s var(--ease);
  }

  .js .promo-bar.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  /* A grid row can only collapse if its content can, so the inner wrapper
     needs its own min-height reset. */
  .js .promo-bar > * {
    min-height: 0;
  }
}

.promo-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding-block: 12px;
}

/* Each button carries the other site's own mark, in that site's own colour, so
   the bar reads as two places rather than one link said twice. */
.promo-tiny { display: none; }

.promo-bar-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.promo-bar-text {
  flex: 1 1 22ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.45;
}

.promo-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

/* The full 44px button is right where a button is the point of the screen.
   In a band above the header it is a slab, so the bar gets a shorter one. */
.btn-sm {
  min-height: 34px;
  padding: 0 14px;
}

.promo-bar-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--pill);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}

.promo-bar-close:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.promo-bar-close svg {
  width: 16px;
  height: 16px;
}

/* Narrow: the text takes its own line and the buttons sit under it, rather
   than every element fighting for a two-word column. */
@media (max-width: 640px) {
  /* A phone cannot afford the sentence or the third link: the two destinations
     and a way out are the whole point of the bar, and everything else pushed it
     into a three-row slab that shoved the page sideways. What is left is one
     row of two chips wearing the short name. min-width is what actually stops
     the overflow — a flex item will not shrink past its content without it. */
  .promo-bar-text,
  .promo-bar-actions .btn-more,
  .promo-full {
    display: none;
  }

  .promo-tiny {
    display: inline;
  }

  .promo-bar-actions {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    margin-left: 0;
  }

  .promo-bar-actions .btn {
    flex: 1 1 0;
    min-width: 0;
  }
}


/* --------------------------------------------------------------------------
   Outage notice: one band under the masthead while the scan is known broken

   Temporary, and paired with the .outage-bar markup in index.html. Both come
   out together once the fix ships. Warn amber rather than the page accent,
   because the accent is what every working button on this page wears.
   -------------------------------------------------------------------------- */

.outage-bar {
  border-block: 1px solid rgba(217, 164, 65, 0.28);
  background: rgba(217, 164, 65, 0.1);
}

.outage-bar-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-block: 14px;
}

/* Aligns with the first line of the sentence rather than the block, so the
   triangle does not drift down as the text wraps to two or three lines. */
.outage-bar-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--warn);
}

.outage-bar-text {
  margin: 0;
  max-width: var(--prose);
  color: var(--ink);
  font-size: var(--step--1);
  line-height: 1.55;
}

.outage-bar-text strong {
  color: var(--warn);
  font-weight: 600;
}