/* Rogue Component site: one stylesheet for the home page and the product pages.

   Layout: the home page is a plain column of bands under the company mark.
   Product pages hang their sections off a left spine, the way a component
   tree hangs off its root, and the "known limits" section is the tile that
   came loose from it.

   Colour: red is the company, taken from the peak in the logo, and each
   product has its own colour. The dark theme uses a lighter red than the
   logo's so that small red text stays readable on the dark ground.
   Product colours are not in this file. They are set in data/products.json,
   and build.py writes them into each page as --p-<id> tokens and points
   --accent at the right one. Amber and cyan are status colours only, because
   RogueMerge's resolver already uses them for Local and Remote. A product
   whose colour is green (RogueVoxel) also takes over --ok on its own page, so
   that page has a single green. */

:root {
  color-scheme: dark;
  --ground:    #0E0D11;
  --surface:   #17151C;
  --raised:    #1F1C26;
  --line:      #2A2733;
  --line-2:    #3B3747;
  --ink:       #E9E6F0;
  --dim:       #968FA6;
  --dimmer:    #6A6479;
  --violet:    #8A5CF0;
  --violet-q:  #2A2140;
  --red:       #E5484D;
  --red-q:     #3A1517;
  --logo:      #D9D9D9;
  --local:     #FFB34D;
  --remote:    #66CCFF;
  --warn:      #FFB34D;
  --ok:        #4DB866;

  --accent:    var(--violet);
  --accent-q:  var(--violet-q);
  --on-accent: #FFF;

  --display: "Bahnschrift", "DIN Alternate", "Avenir Next Condensed", "Segoe UI", system-ui, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, "SF Mono", Menlo, monospace;

  --gut: clamp(16px, 4.5vw, 60px);
  --maxw: 1080px;
  --secpad: clamp(44px, 6vw, 70px);
}

/* Dark is the default on purpose and does not follow the OS setting.
   The nav toggle is what moves a visitor to light. */
:root[data-theme="light"] {
  color-scheme: light;
  --ground:    #EDEEF2;
  --surface:   #FFFFFF;
  --raised:    #F5F5F9;
  --line:      #D9D8E2;
  --line-2:    #BFBCCD;
  --ink:       #14131A;
  --dim:       #565062;
  --dimmer:    #86808F;
  --violet:    #6B3FD4;
  --violet-q:  #E6DFFA;
  --red:       #C01818;
  --red-q:     #F9DEDE;
  --logo:      #2B2833;
  --local:     #A6650A;
  --remote:    #17627F;
  --warn:      #A6650A;
  --ok:        #2C7A44;
}

/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 15.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }

h1, h2, h3, p, ul { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; text-wrap: balance; line-height: 1.08; }
h1 { font-size: clamp(38px, 6.4vw, 68px); letter-spacing: -0.018em; }
h2 { font-size: clamp(25px, 3.2vw, 35px); letter-spacing: -0.006em; }
h3 { font-size: 16.5px; letter-spacing: 0.005em; }
p { max-width: 63ch; }
/* The second half of a headline, in the page accent. */
.turn { color: var(--accent); }
.lede { font-size: 18px; color: var(--dim); max-width: 58ch; line-height: 1.6; margin-top: 18px; }
.muted { color: var(--dim); }
.small { font-size: 13.5px; }
code, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
code { font-size: 0.9em; }
a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dimmer); margin-bottom: 13px; }

/* Keyboard users can jump past the nav. Hidden until it has focus. */
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--surface); color: var(--ink); border: 1px solid var(--accent); border-radius: 3px; padding: 8px 14px; font-size: 13.5px; text-decoration: none; }
.skip:focus { top: 10px; }

/* Availability chip. Solid green outline for something you can get today,
   dashed and quiet for something still in development. */
.chip { display: inline-block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.11em; text-transform: uppercase; white-space: nowrap; padding: 3px 10px; border-radius: 99px; border: 1px solid transparent; }
.chip-live { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 60%, var(--line)); }
.chip-soon { color: var(--dim); border: 1px dashed var(--line-2); }

/* ---------------- nav ---------------- */
.nav { border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(9px); z-index: 20; }
.nav-in { display: flex; align-items: center; gap: 18px; padding-block: 13px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; min-width: 0; }
.brand svg { width: 26px; height: 26px; flex: none; }
.brand-t { font-family: var(--display); font-size: 15.5px; letter-spacing: 0.055em; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.nav-links { display: flex; gap: 22px; }
.nav-links a { font-size: 13.5px; color: var(--dim); text-decoration: none; padding-block: 4px; border-bottom: 2px solid transparent; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.nav-links a { white-space: nowrap; }
@media (max-width: 900px) { .nav .btn { display: none; } }
/* On narrow screens the page links move to their own row under the brand,
   so every page stays one tap away without a menu button. */
@media (max-width: 720px) {
  html { scroll-padding-top: 104px; }
  .nav-in { flex-wrap: wrap; row-gap: 6px; }
  .nav-links { order: 5; width: 100%; gap: 18px; overflow-x: auto; }
}

.btn { display: inline-block; font-family: var(--display); font-size: 13.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 16px; border-radius: 3px; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 84%, #FFF); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-pending { border: 1px dashed var(--line-2); color: var(--dim); cursor: default; }

/* Theme toggle. It shows the mode you would switch to. */
.themetoggle { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 3px; background: transparent; color: var(--dim); cursor: pointer; padding: 0; }
.themetoggle:hover { color: var(--ink); border-color: var(--accent); }
.themetoggle svg { width: 15px; height: 15px; display: block; }
.themetoggle .ico-moon { display: none; }
:root[data-theme="light"] .themetoggle .ico-sun { display: none; }
:root[data-theme="light"] .themetoggle .ico-moon { display: block; }

/* ---------------- home: hero ---------------- */
.hero-home { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 5vw, 64px); align-items: center; padding-block: clamp(56px, 9vw, 112px) clamp(44px, 7vw, 84px); }
/* The company mark. Its grey body is --logo, which turns dark on the light theme. */
.hero-mark svg { display: block; width: clamp(170px, 24vw, 260px); height: auto; }
/* Keep the red half of the headline together on its own line. */
.hero-home .turn { display: block; }
@media (max-width: 760px) {
  .hero-home { grid-template-columns: 1fr; }
  .hero-mark { order: -1; }
  .hero-mark svg { width: 136px; }
}

/* ---------------- home: bands ---------------- */
.band { padding-block: var(--secpad); border-top: 1px solid var(--line); }
.band > h2 + p { margin-top: 14px; }
/* Home page product groups: a heading per group (Plugins, Tools) inside one band. */
.band-note { color: var(--dim); margin-bottom: 26px; }
.group-h + .products { margin-top: 20px; }
.products + .group-h { margin-top: 46px; }
/* A group with a single product keeps a card-sized card. */
.products > .prod:only-child { max-width: 640px; }

.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; margin-top: 30px; }
.prod { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.prod-head { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.prod-head .chip { margin-left: auto; align-self: flex-start; }
.prod-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.prod-head svg { width: 44px; height: 44px; flex: none; color: var(--ink); }
/* The name may wrap at a camel-case seam (build.py puts a <wbr> there), so a
   long one such as RogueBuildAccelerator fits a three-column card. */
.prod-head > div { min-width: 0; }
.prod-name { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.05; }
.prod-eng { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--dim); margin-top: 5px; }
.prod h3 { font-size: 20px; line-height: 1.2; }
.prod p { font-size: 14.5px; color: var(--dim); }
.prod ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.prod li { padding-left: 17px; position: relative; }
.prod li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 2px; background: var(--prod-c, var(--violet)); }
.prod-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.prod-status { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--dim); }

.aside { margin-top: 4px; padding-left: 20px; border-left: 2px solid var(--accent); }
.aside p + p { margin-top: 12px; }

/* ---------------- product pages: hero ---------------- */
.hero { padding-block: clamp(52px, 8vw, 96px) clamp(40px, 6vw, 70px); }
/* The lockup names the product. The mark in the nav names the seller. */
.prodlock { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 24px; padding: 7px 15px 7px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); }
.prodlock svg { width: 25px; height: 25px; flex: none; }
.prodlock b { font-family: var(--display); font-size: 14.5px; letter-spacing: 0.05em; text-transform: uppercase; display: block; line-height: 1.15; }
.prodlock span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--dim); display: block; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; align-items: center; }
.hero-note { font-family: var(--mono); font-size: 11.5px; color: var(--dimmer); }
.subnav { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 34px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.subnav span { color: var(--dimmer); }
.subnav a { color: var(--dim); text-decoration: none; }
.subnav a:hover { color: var(--ink); }

/* ---------------- product pages: hero mock window ---------------- */
.mock { --cols: 1fr 150px 150px; margin-top: 30px; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: var(--surface); box-shadow: 0 18px 44px -28px rgba(0, 0, 0, 0.7); }
.mock.merge { --cols: 1fr 92px 92px; }
.mock.accel { --cols: 1fr 160px 92px; }
.mock-bar { display: flex; align-items: center; gap: 9px; padding: 9px 13px; background: var(--raised); border-bottom: 1px solid var(--line); }
.mock-bar svg { width: 15px; height: 15px; flex: none; }
.mock-bar b { font-size: 12.5px; font-weight: 500; }
.mock-bar em { font-family: var(--mono); font-size: 11px; color: var(--dimmer); font-style: normal; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mock-head { display: grid; grid-template-columns: var(--cols); gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dimmer); }
.mock.merge .mock-head span:nth-child(2) { color: var(--remote); }
.mock.merge .mock-head span:nth-child(3) { color: var(--local); }
.row { display: grid; grid-template-columns: var(--cols); gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 13px; animation: settle 420ms ease backwards; }
.row-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.row-name i { width: 6px; height: 6px; border-radius: 99px; background: var(--ok); flex: none; }
.row-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ok); }
.pick { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; border: 1px solid var(--accent); border-radius: 99px; padding: 2px 9px; color: var(--accent); white-space: nowrap; }
.pick-r { border-color: var(--remote); color: var(--remote); }
.pick-l { border-color: var(--local); color: var(--local); }
/* RogueMerge: rows where the tool stopped to ask, in the product colour. */
.row.conflict { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.row.conflict i { background: var(--accent); }
/* RogueVoxel: rows where the server limited or refused an edit. Amber, so
   they cannot be mistaken for the green rows that went through. */
.row.said-no { background: color-mix(in srgb, var(--warn) 9%, transparent); }
.row.said-no i { background: var(--warn); }
.row.said-no .pick { border-color: var(--warn); color: var(--warn); }
/* RogueBuildAccelerator: the step whose worker dropped out and was replaced,
   in the product colour. */
.row.replaced { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.row.replaced i { background: var(--accent); }
.r1 { animation-delay: 280ms; } .r2 { animation-delay: 400ms; } .r3 { animation-delay: 520ms; } .r4 { animation-delay: 700ms; } .r5 { animation-delay: 840ms; }
.mock-foot { padding: 10px 14px; background: var(--raised); font-family: var(--mono); font-size: 11px; color: var(--dim); display: flex; gap: 8px; flex-wrap: wrap; }
.mock-foot b { color: var(--accent); font-weight: 400; }
@keyframes settle { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .row { animation: none; } }
@media (max-width: 620px) {
  .mock.voxel { --cols: 1fr 132px; }
  .mock.voxel .mock-head span:nth-child(3), .mock.voxel .c-clients { display: none; }
  .mock.merge { --cols: 1fr 76px; }
  .mock.merge .mock-head span:nth-child(2), .mock.merge .c-mid { display: none; }
  .mock.accel { --cols: 1fr 150px; }
  .mock.accel .mock-head span:nth-child(3), .mock.accel .c-result { display: none; }
}

/* The drawing behind a product page headline. Each product has its own,
   generated by a script next to build.py, in thin neutral lines with one
   line in the accent. It fades out toward the text and is dropped on
   narrow screens.
   RogueVoxel: contour lines traced with marching squares, the 2D form of
   the meshing method the plugin uses. Terrain shows up as shape here, so
   the page needs no grass or soil colour.
   RogueMerge: a branch graph. Time runs left to right, branches fork off
   the trunk and merge back, and the accent branch is the one being merged.
   Rogue BuildGraph Viewer: a build graph. Three agent lanes, one box per
   node, solid wires where files pass between nodes, and the accent on the
   dashed wire that only sets the order, as on the product mark.
   RogueBuildAccelerator: a build timeline, the way Horde draws a job. One
   lane per worker, one bar per compile step, and the accent on the line
   for now and the bars it is crossing. Queued bars are dashed. */
.hero-top { position: relative; }
.hero-top > :not(.hero-art) { position: relative; z-index: 1; }
.hero-art { position: absolute; z-index: 0; right: 0; top: -28px; width: min(52%, 580px); height: calc(100% + 28px); max-width: none; pointer-events: none; opacity: 0.7; -webkit-mask-image: linear-gradient(to right, transparent 8%, #000 78%); mask-image: linear-gradient(to right, transparent 8%, #000 78%); }
.contours path { fill: none; stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.contours .iso-rogue { stroke: var(--accent); stroke-width: 1.4; }
.branches path { fill: none; stroke: var(--line-2); stroke-width: 1.25; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.branches .br-rogue { stroke: var(--accent); stroke-width: 1.6; }
.branches circle { fill: var(--ground); stroke: var(--line-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.branches .br-c-rogue { stroke: var(--accent); }
.branches .br-c-merge { fill: var(--accent); stroke: var(--accent); }
.buildgraph path, .buildgraph line { fill: none; stroke: var(--line-2); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.buildgraph .bg-lane { stroke: var(--line); }
.buildgraph rect { fill: var(--ground); stroke: var(--line-2); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.buildgraph .bg-rogue { stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 5 4; }
.buildgraph .bg-rogue-node { stroke: var(--accent); stroke-width: 1.6; }
.timeline rect { fill: var(--ground); stroke: var(--line-2); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.timeline .tl-queued { stroke-dasharray: 4 3; }
.timeline .tl-busy { stroke: var(--accent); }
.timeline .tl-now { stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
@media (max-width: 780px) { .hero-art { display: none; } }

/* Rogue BuildGraph Viewer: the swimlane graph illustration. One lane per
   agent, one box per node, solid wires for data and dashed for ordering. */
.gv-lane { fill: var(--raised); }
.gv-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; fill: var(--dimmer); }
.gv-node { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.2; }
.gv-node-t { font-family: var(--body); font-size: 13px; fill: var(--ink); }
.gv-wire { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.gv-head { fill: var(--ink); }
.gv-wire-order { fill: none; stroke: var(--dim); stroke-width: 1.6; stroke-dasharray: 5 4; }
.gv-head-order { fill: var(--dim); }
.gv-tag { font-family: var(--mono); font-size: 10.5px; fill: var(--accent); }
.gv-order-t { font-family: var(--mono); font-size: 10px; fill: var(--dim); }

/* RogueVoxel terrain cross-section */
.sl-hatch { stroke: var(--line-2); stroke-width: 1.1; }
.slice { overflow-x: auto; border-bottom: 1px solid var(--line); }
.slice svg { display: block; width: 100%; max-width: none; min-width: 640px; height: auto; }
.sl-ground { fill: var(--line); }
.sl-surf { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.sl-was { fill: none; stroke: var(--dimmer); stroke-width: 1.2; stroke-dasharray: 3 4; }
.sl-chunk { stroke: var(--line-2); stroke-width: 1; opacity: 0.7; }
.sl-cave { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.2; }
.sl-brush { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 4; }
.sl-placed { fill: var(--accent-q); stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.sl-seam { fill: var(--ink); }
.sl-lead { stroke: var(--dimmer); stroke-width: 1; }
.sl-ink { fill: var(--ink); stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; }
.sl-strip { fill: var(--surface); }
.sl-rule { stroke: var(--line); stroke-width: 1; }
.sl-t { font-family: var(--mono); font-size: 10.5px; fill: var(--dim); letter-spacing: 0.04em; }
.sl-tv { fill: var(--accent); }
.sl-ti { fill: var(--ink); }

/* ---------------- product pages: spine ---------------- */
.spine { position: relative; padding-left: 74px; }
.spine::before { content: ""; position: absolute; left: 34px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--line-2); }
.sec { position: relative; padding-block: var(--secpad); }
/* connector from the spine to the tile */
.sec::before { content: ""; position: absolute; left: -40px; top: calc(var(--secpad) + 5px); width: 14px; height: 3px; background: var(--line-2); }
/* the tile */
.sec::after { content: ""; position: absolute; left: -28px; top: var(--secpad); width: 13px; height: 13px; border-radius: 3px; background: var(--ink); }
/* the one that came loose: lifted off the spine, its pin left hanging */
.sec-rogue { margin-left: 26px; }
.sec-rogue::before { display: none; }
.sec-rogue::after { background: var(--accent); }
.loose { position: absolute; left: -60px; top: calc(var(--secpad) + 2px); width: 9px; height: 9px; border-radius: 99px; background: var(--accent); }
@media (max-width: 780px) {
  .spine { padding-left: 0; }
  .spine::before, .sec::before, .sec::after, .loose { display: none; }
  .sec-rogue { margin-left: 0; border-left: 3px solid var(--accent); padding-left: 18px; }
}
.sec > h2 + p { margin-top: 14px; }
.sec > p + p { margin-top: 14px; }

/* ---------------- shared blocks ---------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 20px; margin-top: 30px; }
.step { border-top: 2px solid var(--line-2); padding-top: 15px; min-width: 0; }
.step.lead { border-top-color: var(--accent); }
.step-n { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dimmer); margin-bottom: 7px; }
.step p { font-size: 14px; color: var(--dim); margin-top: 6px; }

.cmd { margin-top: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; overflow-x: auto; }
.cmd-h { padding: 7px 13px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dimmer); white-space: nowrap; }
.cmd pre { margin: 0; padding: 14px 15px; font-family: var(--mono); font-size: 12.5px; line-height: 1.75; white-space: pre; }
.cmd .flag { color: var(--accent); }
.cmd .cm { color: var(--dimmer); }

.cov { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 9px; margin-top: 28px; }
.cv { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 11px 13px 12px; min-width: 0; }
.cv b { display: block; font-size: 13.5px; font-weight: 600; }
.cv span { display: block; font-size: 12.5px; color: var(--dim); margin-top: 4px; line-height: 1.45; }
.st { display: block; font-family: var(--mono); font-style: normal; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }
/* st-n: the engine's own system, so neutral. st-e: the product's own
   version, in the product colour. st-r: a workaround or a version floor. */
.st-n { color: var(--ink); }
.st-e { color: var(--accent); }
.st-r { color: var(--warn); }

.tbl { margin-top: 28px; border: 1px solid var(--line); border-radius: 4px; overflow-x: auto; background: var(--surface); }
.tbl table { border-collapse: collapse; width: 100%; min-width: 820px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.tbl th { font-weight: 400; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dimmer); text-align: right; padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: bottom; line-height: 1.5; }
.tbl td { text-align: right; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--dim); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl td.k { color: var(--ink); }
.tbl .sub { display: block; font-size: 10.5px; color: var(--dimmer); }
.method { margin-top: 18px; padding-left: 18px; border-left: 2px solid var(--line-2); font-size: 13.5px; color: var(--dim); max-width: 74ch; }

.eng { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.e { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 4px; padding: 11px 15px; min-width: 84px; background: var(--surface); }
.e b { font-family: var(--display); font-size: 17px; letter-spacing: 0.02em; }
.e span { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.e-ship { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.e-ship span { color: var(--ok); }
.e-part span { color: var(--warn); }
.e-off b, .e-off span { color: var(--dimmer); }

.lim { display: flex; flex-direction: column; gap: 1px; margin-top: 26px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.li { background: var(--surface); padding: 14px 16px; display: grid; grid-template-columns: 205px 1fr; gap: 18px; }
@media (max-width: 640px) { .li { grid-template-columns: 1fr; gap: 5px; } }
.li b { font-size: 13.5px; font-weight: 600; }
.li span { font-size: 13.5px; color: var(--dim); line-height: 1.55; min-width: 0; }

.cta { border: 1px solid var(--line-2); border-radius: 5px; padding: clamp(22px, 4vw, 42px); background: var(--surface); margin-top: 30px; display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; }
@media (max-width: 720px) { .cta { grid-template-columns: 1fr; } }
.cta-btns { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.tiers { display: flex; gap: 8px 24px; flex-wrap: wrap; margin-top: 16px; }
.tier b { font-family: var(--display); font-size: 15px; letter-spacing: 0.03em; display: block; }
.tier span { font-size: 12.5px; color: var(--dim); }
.credit { margin-top: 18px; font-size: 12.5px; color: var(--dimmer); }

/* ---------------- support and contact pages ---------------- */
[hidden] { display: none !important; }
.hero-page { padding-block: clamp(48px, 7vw, 84px) clamp(30px, 5vw, 54px); }
.hero-page h1 { font-size: clamp(34px, 5.4vw, 56px); }

/* Common problems: one column per plugin, each answer behind its question. */
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 30px 36px; margin-top: 30px; }
.faq-col { min-width: 0; }
.faq-col h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 14px; }
.faq-col h3 svg { width: 26px; height: 26px; flex: none; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 13px 30px 13px 0; font-size: 14.5px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 11px; font-family: var(--mono); font-size: 16px; font-weight: 400; color: var(--dim); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--accent); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.faq details p { font-size: 14px; color: var(--dim); padding-bottom: 14px; max-width: 60ch; }
.faq details p + p { margin-top: -4px; }

/* The address block. It stays in a "not set" state until an address is
   entered in assets/site.js. */
.mailbox { background: var(--surface); border: 1px solid var(--line-2); border-radius: 5px; padding: clamp(20px, 3vw, 28px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mailbox-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dimmer); }
.mailbox-addr { font-family: var(--mono); font-size: clamp(15px, 2.2vw, 19px); overflow-wrap: anywhere; user-select: all; color: var(--ink); text-decoration: none; }
a.mailbox-addr:hover { text-decoration: underline; }
.mailbox.is-pending .mailbox-addr { user-select: none; color: var(--dim); border: 1px dashed var(--line-2); border-radius: 3px; padding: 8px 12px; font-size: 13.5px; align-self: flex-start; }
.mailbox-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mailbox button.btn { cursor: pointer; }
.mailbox button.btn:disabled { background: transparent; border: 1px dashed var(--line-2); color: var(--dimmer); cursor: default; }
.mailbox-note { font-size: 13.5px; color: var(--dim); }
.copied { font-family: var(--mono); font-size: 11px; color: var(--ok); min-height: 1em; }

.report { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px 36px; margin-top: 30px; align-items: start; }
@media (max-width: 860px) { .report { grid-template-columns: 1fr; } }
.checklist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; }
.checklist li { padding-left: 18px; position: relative; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
.cmd-h.has-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.linkbtn { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }

.routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 14px; margin-top: 30px; }
.route { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.route p { font-size: 14px; color: var(--dim); }
.route .go { margin-top: auto; padding-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.route a.go:hover { text-decoration: underline; }

.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px 36px; margin-top: 26px; }
.pair p { font-size: 14.5px; color: var(--dim); margin-top: 6px; }
.pair a { color: var(--ink); }

/* ---------------- footer ---------------- */
.site-foot { border-top: 1px solid var(--line); padding-block: 34px 52px; margin-top: 40px; }
.foot-note { margin-top: 18px; max-width: none; font-size: 12px; color: var(--dimmer); }
.foot { display: flex; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; align-items: center; }
.foot-l { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.foot-l svg { width: 20px; height: 20px; }
.foot small, .foot-links a { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.07em; color: var(--dimmer); }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--ink); }