/*
 * Archivo, served from the theme.
 *
 * The same face the portal and the player use, and shipped rather than fetched from a font CDN
 * for the same reason they ship it: a site that renders in Helvetica while the product renders
 * in Archivo looks like two companies. One variable file covers 400-800, which is every weight
 * the design system defines. Licence in fonts/OFL.txt.
 */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * The site's own layout.
 *
 * Everything visual — colour, type scale, spacing — comes from the custom properties in
 * style.css, which is generated from @designdeploy/design. Nothing here invents a value; if a
 * number appears it is a layout decision, not a design token.
 */

body { min-height: 100vh; display: flex; flex-direction: column; }

/* --- Skip link ------------------------------------------------------------
 * Off-screen until it has focus, then it is the first thing a keyboard user sees — a way
 * past the header and nav on every single page without tabbing through them first.
 */
.skip-link {
  position: absolute;
  left: var(--space-base);
  top: -100%;
  z-index: 10;
  background: var(--ink);
  color: var(--reversed);
  padding: var(--space-tight) var(--space-base);
  border-radius: var(--radius);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: top 0.15s ease-out;
}
.skip-link:focus {
  top: var(--space-base);
}

/* --- Chrome ------------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  gap: var(--space-loose);
  padding: var(--space-base) var(--space-page);
  border-bottom: var(--hairline) solid var(--rule);
}
.wordmark { display: flex; align-items: center; gap: 0.5ch; text-decoration: none; color: inherit; }
.wordmark-bullet { width: 0.6em; height: 0.6em; background: var(--accent); flex: none; }
.wordmark-name { font-weight: var(--weight-black); letter-spacing: -0.01em; }

.tabs { display: flex; gap: var(--space-hair); }
.tab {
  padding: var(--space-tight) var(--space-base);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  text-decoration: none;
  border: var(--hairline) solid transparent;
}
.tab:hover { border-color: var(--rule); }
/* The page you are on, marked by the accent rather than by a filled tab — the filled tab is the
   portal link, and two filled tabs in one header read as two calls to action. */
.tab.is-current { border-bottom-color: var(--accent); }
.tab-strong { background: var(--ink); color: var(--reversed); }
.tab-strong:hover { border-color: var(--ink); opacity: 0.9; }
.spacer { flex: 1; }

/* Who the portal says this is. Quiet: it is information, not a control. */
.signed-in {
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  font-size: var(--text-meta);
  color: var(--ink-muted);
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.signed-in-dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--accent); flex: none; }

.gate .section-label { max-width: 18ch; }

/* --- Releases, as the portal plugin renders them ------------------------- */

.release-head { display: flex; align-items: baseline; gap: var(--space-snug); margin-bottom: var(--space-base); }
.release-version { font-size: var(--text-title); font-weight: var(--weight-black); letter-spacing: var(--track-display); }
.release-date { color: var(--ink-muted); }
.release-latest-tag {
  font-size: var(--text-meta); font-weight: var(--weight-semibold); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--accent); border: var(--hairline) solid var(--accent);
  padding: 0 var(--space-tight); border-radius: var(--radius);
}

/* What the script decided this machine wants. */
.release-detected { margin: 0 0 var(--space-loose); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-snug); }
.release-detected-meta { color: var(--ink-muted); font-size: var(--text-meta); }

.release-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(22ch, 1fr)); gap: var(--space-page); margin: 0 0 var(--space-loose); max-width: 92ch; }
.release-platform { border-top: var(--hairline) solid var(--ink); padding-top: var(--space-base); }
.release-platform.is-this-machine { border-top-color: var(--accent); }
.release-platform-name { margin: 0 0 var(--space-base); font-size: var(--text-lead); font-weight: var(--weight-black); }
.release-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-snug); }
.release-file { display: flex; flex-direction: column; gap: var(--space-hair); }
.release-file .btn { align-self: flex-start; }
.release-file-meta { font-size: var(--text-meta); color: var(--ink-muted); overflow-wrap: anywhere; }
.release-unsigned { font-size: var(--text-meta); color: var(--ink-muted); margin: var(--space-base) 0 0; max-width: 40ch; }
.release-notes { max-width: 68ch; }

/* Older versions, folded away. */
.release-older { margin-top: var(--space-section); max-width: 92ch; }
.release-older > summary { cursor: pointer; font-weight: var(--weight-semibold); padding: var(--space-tight) 0; border-top: var(--hairline) solid var(--rule); border-bottom: var(--hairline) solid var(--rule); }
.release-old { padding: var(--space-base) 0; border-bottom: var(--hairline) solid var(--rule); }
.release-old .release-version { font-size: var(--text-lead); }
.release-files-compact { flex-direction: row; flex-wrap: wrap; gap: var(--space-base) var(--space-loose); }
.release-files-compact .release-file-link { color: var(--ink); font-weight: var(--weight-semibold); }

/* The downloads table the plugin renders. */
.downloads { width: 100%; max-width: 92ch; border-collapse: collapse; margin: var(--space-base) 0; }
.downloads th { text-align: left; font-size: var(--text-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink-muted); border-bottom: var(--hairline) solid var(--ink); padding: 0 var(--space-base) var(--space-tight) 0; }
.downloads td { padding: var(--space-snug) var(--space-base) var(--space-snug) 0; border-bottom: var(--hairline) solid var(--rule); }
.downloads a { color: var(--ink); font-weight: var(--weight-semibold); }
.downloads-empty { color: var(--ink-muted); }

.page { flex: 1; padding: var(--space-section) var(--space-page) var(--space-page); }

/* --- Type --------------------------------------------------------------- */

.hero {
  margin: 0;
  font-size: var(--text-hero);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-display-large);
  line-height: var(--lead-display);
  max-width: 18ch;
}
.title {
  margin: 0;
  font-size: var(--text-title);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-display);
  line-height: var(--lead-heading);
}
.lede { margin: var(--space-base) 0 0; color: var(--ink-muted); max-width: 62ch; }

.section-label {
  font-size: var(--text-meta);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: var(--space-tight);
  border-bottom: var(--hairline) solid var(--ink);
  margin-bottom: var(--space-loose);
}

.opening { padding-bottom: var(--space-section); }
.strip { padding-top: var(--space-section); }
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-page); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0,1fr); } }

.row { display: flex; align-items: center; gap: var(--space-snug); }
.row-actions { margin-top: var(--space-loose); }

.btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: var(--space-tight) var(--space-base);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  text-decoration: none;
  background: transparent;
  border: var(--hairline) solid var(--ink);
  border-radius: var(--radius);
}
.btn:hover { background: var(--ground-sunken); }
.btn-primary { background: var(--ink); color: var(--reversed); }
.btn-primary:hover { background: var(--ink); opacity: 0.88; }

/* --- Content ------------------------------------------------------------ */

.facts { margin: 0; display: flex; flex-direction: column; }
.fact {
  display: grid;
  grid-template-columns: 14ch minmax(0, 1fr);
  gap: var(--space-base);
  padding: var(--space-base) 0;
  border-bottom: var(--hairline) solid var(--rule);
}
.fact:first-child { border-top: var(--hairline) solid var(--rule); }
.fact dt { font-weight: var(--weight-black); }
.fact dd { margin: 0; color: var(--ink-muted); }
@media (max-width: 620px) { .fact { grid-template-columns: minmax(0, 1fr); gap: var(--space-tight); } }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-page); }
.steps li { display: flex; gap: var(--space-base); align-items: flex-start; }
.step-n {
  font-family: inherit;
  font-size: var(--text-meta);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-meta);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  padding-top: 0.35em;
}
.step-t { margin: 0 0 var(--space-tight); font-size: var(--text-lead); font-weight: var(--weight-black); }
.steps p { margin: 0; color: var(--ink-muted); }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0,1fr); } }

.prose { max-width: 68ch; }
.prose h2 { font-size: var(--text-title); font-weight: var(--weight-black); letter-spacing: var(--track-display); margin: var(--space-section) 0 var(--space-base); }
.prose h3 { font-size: var(--text-lead); font-weight: var(--weight-black); margin: var(--space-loose) 0 var(--space-tight); }
.prose p, .prose li { color: var(--ink-muted); }
.prose a { color: var(--accent); }
.prose code, .prose pre {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--text-meta);
  background: var(--ground-sunken);
}
.prose pre { padding: var(--space-base); overflow-x: auto; border: var(--hairline) solid var(--rule); }
/* Prose is capped at a reading measure, which is right for paragraphs and too narrow for a
   three-column table — it wraps cells that have room to sit on one line. Tables get their own
   wider measure and stop at the page gutter. */
.prose table {
  width: 92ch;
  max-width: calc(100vw - 2 * var(--space-page));
  border-collapse: collapse;
  margin: var(--space-base) 0;
}
.prose th { text-align: left; font-size: var(--text-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink-muted); border-bottom: var(--hairline) solid var(--ink); padding: 0 var(--space-base) var(--space-tight) 0; }
.prose td { padding: var(--space-snug) var(--space-base) var(--space-snug) 0; border-bottom: var(--hairline) solid var(--rule); }

/* --- Colophon ----------------------------------------------------------- */

.colophon {
  border-top: var(--hairline) solid var(--rule);
  padding: var(--space-section) var(--space-page);
  background: var(--ground-sunken);
}
.colophon-inner { display: flex; flex-direction: column; gap: var(--space-snug); }
.colophon-mark { display: flex; align-items: center; gap: 0.5ch; }
.colophon-line { margin: 0; color: var(--ink-muted); max-width: 56ch; }

/*
 * The hosting credit. Given its own line and a rule above it rather than being folded into the
 * fine print — it is a partnership, and it should read like one.
 */
.colophon-partner {
  display: flex;
  align-items: baseline;
  gap: var(--space-snug);
  margin: var(--space-base) 0 0;
  padding-top: var(--space-base);
  border-top: var(--hairline) solid var(--rule-strong);
}
.colophon-partner-role {
  font-size: var(--text-meta);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.colophon-partner-name {
  font-size: var(--text-lead);
  font-weight: var(--weight-black);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: calc(var(--hairline) * 2) solid var(--accent);
  padding-bottom: 0.1em;
}
.colophon-partner-name:hover { color: var(--accent); }

.colophon-fine { margin: var(--space-base) 0 0; font-size: var(--text-meta); color: var(--ink-muted); }