/* Momentary landing page — design 9a "Reference, dark".
   Deliberately not Keychange: that page is a warm light "desk" with white panels, a blue
   accent and a sans headline. This one is near-black, cream, monospace all the way down.

   Colour is spent in two places and no others:
     1. Amber follows the tap: the section labels, the tap bar, and what that bar sends. The
        threshold is a plain white rule — it is a measurement, not part of the path, and
        white keeps it legible across both bars without competing with them.
     2. The panel is the only light object on the page, and the only place any other
        colour appears (the system blue of its switches). */

:root {
  --ground: #1C1B19;        /* the app icon's ink, used as the page's ground */
  --panel: #232220;
  --ink: #F4F2EE;           /* the app icon's ink on a dark plate */
  --body: #A8A39A;
  --muted: #6F6A62;
  --amber: #D9A82C;
  --hairline: rgba(244, 242, 238, 0.09);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.page { max-width: 660px; margin: 0 auto; padding: 0 26px 64px; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink); }

/* ---------- top bar ---------- */

nav {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 11.5px; color: var(--muted);
}
nav .who { color: var(--body); }
nav .links { display: flex; gap: 18px; }

/* ---------- wordmark + hero ---------- */

header { padding: 60px 0 44px; }

.wordmark { display: flex; align-items: center; gap: 11px; }
.wordmark svg { display: block; }
.wordmark span { font-size: 23px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }

h1 {
  margin: 22px 0 0;
  font-size: 14.5px; font-weight: 400; line-height: 1.7;
  color: var(--body); max-width: 62ch;
}
h1 kbd { color: var(--ink); font: inherit; }

/* ---------- section scaffolding ---------- */

section { padding-bottom: 38px; }

.label {
  font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 16px;
}

/* ---------- how long is a tap ---------- */

.trace { padding: 6px 0 4px; }

.trace-row { display: grid; grid-template-columns: 48px 1fr 68px; align-items: center; gap: 18px; }
.trace-row + .trace-row { margin-top: 16px; }
.trace-row .who { color: var(--muted); font-size: 12px; }

/* The rail is the full duration; the fill is how long the key was actually down. */
.bar { position: relative; height: 11px; }
.bar::before {
  content: ""; position: absolute; inset: 4px 0;
  background: rgba(244, 242, 238, 0.07); border-radius: 2px;
}
.bar i { position: absolute; inset: 0 auto 0 0; border-radius: 5.5px; display: block; }
.bar.tap i { width: 30%; background: var(--amber); }
.bar.hold i { width: 74%; background: #4A4640; }

/* The threshold, drawn on both rows so the two read as one continuous vertical. */
.bar::after {
  content: ""; position: absolute; top: -9px; bottom: -9px; left: 44%;
  border-left: 1px solid var(--ink);
}

.trace-row .out { font-size: 13px; text-align: right; }
.trace-row .out.sends { color: var(--amber); }
.trace-row .out.keeps { color: var(--muted); }

/* Shares the row grid so the caption sits under the threshold line exactly: 44% has to be
   44% *of the bar column*, which is what the earlier margin-based guess got wrong. */
.threshold-tick { display: grid; grid-template-columns: 48px 1fr 68px; gap: 18px; margin-top: 9px; }
.threshold-tick i {
  grid-column: 2; position: relative; display: block;
  height: 1.2em; font-style: normal; font-size: 11px; color: var(--muted);
}
.threshold-tick i::before {
  content: "threshold"; position: absolute; left: 44%;
  transform: translateX(-50%); white-space: nowrap;
}

/* ---------- install ---------- */

.install { display: flex; flex-wrap: wrap; gap: 12px; }

.download {
  display: inline-flex; align-items: center;
  background: var(--ink); color: var(--ground);
  border-radius: 6px; padding: 13px 22px; font-size: 13px; white-space: nowrap;
}
.download:hover { background: #fff; color: var(--ground); }

/* nowrap, not wrap: the command is one line of shell and reads as one. Letting it wrap doubles
   this box's height and — since the row stretches — the Download button's with it, which is what
   made both look enormous. Too narrow to fit, it scrolls inside itself instead. */
.command {
  flex: 1; min-width: 260px; display: flex; align-items: center; gap: 9px;
  background: var(--panel); border-radius: 6px; padding: 13px 18px;
  color: var(--ink); font-size: 13px; overflow-x: auto; white-space: nowrap;
}
.command .prompt { color: var(--muted); }   /* not amber — amber is spoken for */

.meta { margin-top: 14px; font-size: 11px; color: var(--muted); }

/* ---------- settings ---------- */

/* The panel keeps its real 420pt width — a screenshot shrunk below that stops being readable —
   which leaves the rest of the 660px page for the list. That column is too narrow for a term and
   its description side by side, so the description breaks onto its own line instead. */
.set { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 26px; align-items: start; }

/* margin: 0 kills the UA default on <dl>, which otherwise starts the list ~12px below the
   panel it is supposed to line up with. It only became visible once the panel's shadow
   stopped padding the top of the row. */
.pairs { margin: 0; font-size: 12.5px; }
.pairs .pair { padding: 10px 0; }
.pairs .pair + .pair { border-top: 1px solid var(--hairline); }
.pairs dt { color: var(--ink); }
.pairs dd { margin: 2px 0 0; color: var(--body); }

/* Its own breakpoint, ahead of the page's. The panel does not shrink, so every pixel the page
   loses comes out of the list — by 710px that column is down to ~128px and the descriptions
   shred. Stack before it gets there rather than at the page's own 640. */
@media (max-width: 710px) {
  .set { grid-template-columns: 1fr; }
  /* Stacked, the list has the whole page again — so the description goes back beside its term
     instead of under it. The break is a response to the narrow column, not a preference. */
  .pairs .pair { display: grid; grid-template-columns: 86px 1fr; gap: 14px; }
  .pairs dd { margin: 0; }
}


/* The panel: a real 2x capture of the app (see CLAUDE.md for how to retake it), and the only
   light object on the page. It brings its own drop shadow in the alpha channel, so nothing here
   draws one — a CSS shadow on top would double it.

   That shadow is transparent padding, so the file is bigger than the panel on every side and the
   image lands inset from everything around it. `.panel-frame` is therefore the layout box, sized
   to the panel body, and the image is blown up past it and pulled back by exactly the padding —
   so the shadow overhangs without occupying a single pixel of layout. The body sits at 46,38 in a
   932x1230 file; every number below is that measured, as a percentage of the body's width.

   Percentages of the *width* on all four sides is not a slip: percentage margins resolve against
   the containing block's inline size, top and bottom included. Since the image keeps the capture's
   aspect ratio, the vertical padding is a fixed fraction of its width too, so it works out. And it
   has to be percentages of a box pinned to the image's own size — an earlier attempt put them on
   the image inside the grid area, where the container is wider than the capped image and the pull
   came out ~9px too far. */
/* `flow-root` is load-bearing: without a block formatting context the image's negative top margin
   collapses straight through the frame and lifts the whole box ~19px above the row, putting the
   panel out of line with the list beside it. It contains the margin without clipping the shadow,
   which `overflow: hidden` would. */
.panel-frame { display: flow-root; width: 100%; max-width: 420px; }   /* 420pt: the true size */

.panel {
  display: block;
  width: 110.9524%;
  height: auto;
  margin: -4.5238% -5.4762% -6.4286% -5.4762%;
}

/* ---------- highlights ---------- */

.highlights { columns: 2; column-gap: 34px; font-size: 12.5px; }
.highlights p { margin: 0 0 16px; break-inside: avoid; }
.highlights b { color: var(--ink); font-weight: 500; }

/* ---------- also ----------
   A quiet cross-link, not a second hero. It borrows the page's own vocabulary — panel fill,
   hairline, muted arrow — and takes none of its colour: no amber, because amber follows the tap
   and nothing else, and no app icon, because the settings panel is the one light object here.
   The whole card is the link, so there is no button competing with Download further up. */

.also {
  display: block;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 20px 22px;
}
.also:hover { border-color: rgba(244, 242, 238, 0.2); }

.also-title { display: block; font-size: 14px; color: var(--ink); }
.also-title em { font-style: normal; color: var(--muted); }   /* the dash, set back a step */

.also-body {
  display: block; margin-top: 7px;
  font-size: 12.5px; color: var(--body); max-width: 58ch;
}

/* Says where the card goes: it leaves the site, and an underlined title would not say that. */
.also-go { display: block; margin-top: 14px; font-size: 11px; color: var(--muted); }
.also:hover .also-go { color: var(--body); }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--hairline); padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 11.5px; color: var(--muted);
}

@media (max-width: 640px) {
  nav .who { display: none; }
  header { padding: 44px 0 34px; }
  /* Stacked, both full width — at this size the command needs the whole line to show without
     scrolling, and it is the thing most people copy.
     `flex-wrap: nowrap` is load-bearing: a *wrapping* column flex container sizes its line to the
     items' own widths instead of the container's, so the command would keep its full one-line
     width, refuse to stretch down, and take the page's horizontal scrollbar with it. With the
     column unwrapped the items stretch to the page and the command scrolls inside itself. */
  .install { flex-direction: column; flex-wrap: nowrap; }
  .download { justify-content: center; }
  .command { min-width: 0; }
  .highlights { columns: 1; }
  .trace-row, .threshold-tick { grid-template-columns: 36px 1fr 62px; gap: 12px; }
}

/* ---------- legal pages ----------
   Impressum, privacy, terms. Long prose needs a measure and a surface; the rest of the
   page is short blocks on the bare ground, which does not survive 40 lines of statute. */

.legal { padding: 30px 0 20px; max-width: 620px; }

.legal h1 {
  font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 4px;
}
.legal .sub { font-size: 11px; color: var(--muted); margin: 0 0 26px; }

.legal h2 {
  font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--amber); margin: 30px 0 10px;
}

.legal p, .legal li { font-size: 12.5px; line-height: 1.75; margin: 0 0 11px; }
.legal ul { margin: 0 0 11px; padding-left: 18px; }
.legal address { font-style: normal; font-size: 12.5px; line-height: 1.75; }
.legal b { color: var(--ink); font-weight: 500; }
.legal code {
  font-size: 11.5px; background: var(--panel);
  border-radius: 3px; padding: 1px 5px; color: var(--ink);
}
.legal a { border-bottom: 1px solid var(--hairline); }
.legal a:hover { border-bottom-color: var(--ink); }

/* Back link in place of the site nav's three links. */
nav .back { color: var(--body); }

.footer-legal { display: flex; flex-wrap: wrap; gap: 16px; }