/* ACTUALIS — instrument panel.
   Palette, typography and motifs from branding/branding.png:
   carbon ground, hairline datum rules, measurement ticks, amber for signal
   only. Amber is #E08A24 (brand guide + Windows sheet). The macOS icon sheet
   carries a different amber (#C47A3A); the brand guide wins on the web. */

:root {
  --carbon:  #0B0C0E;
  --slate:   #1F2430;
  --smoke:   #3A414E;
  --bone:    #F2EFE9;
  --amber:   #E08A24;

  --ground:  var(--carbon);
  --panel:   #12151B;
  --raised:  var(--slate);
  --rule:    #232935;
  --ink:     var(--bone);
  --ink-dim: #9AA1AC;
  --ink-mut: #6C7480;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --maxw: 1140px;
}

/* The brand is a dark instrument. It commits to that on any host theme, so
   the palette is painted explicitly rather than inherited. */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- type */
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.15; }
h3 { font-size: 1.0625rem; line-height: 1.3; }
p  { margin: 0; }
a  { color: inherit; }

.eyebrow {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mut);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}
.lede { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); color: var(--ink-dim); max-width: var(--measure); }
.mono { font-family: var(--mono); }
.dim  { color: var(--ink-dim); }
.mut  { color: var(--ink-mut); }
.amber { color: var(--amber); }

/* ------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.stack { display: flex; flex-direction: column; }
.gap-1 { gap: .5rem } .gap-2 { gap: 1rem } .gap-3 { gap: 1.5rem }
.gap-4 { gap: 2rem }  .gap-6 { gap: 3rem }

/* ------------------------------------------------------------- header */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--carbon) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-head .wrap { display: flex; align-items: center; gap: 1.5rem; height: 60px; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.75rem; }
.site-nav a {
  font-size: .875rem; color: var(--ink-dim); text-decoration: none;
  padding-block: .25rem; border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--amber); }
@media (max-width: 720px) { .site-nav .hide-sm { display: none; } }

/* ----------------------------------------------------------- wordmark */
.wordmark {
  display: inline-flex; align-items: baseline; gap: 0;
  font-family: var(--sans); font-weight: 400; line-height: 1;
  letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); white-space: nowrap;
}
/* The amber crossbar sits INSIDE the A's counter, per the logo lockups.
   line-height:1 is load-bearing: on the default line height the span's box is
   1.6em tall and `bottom` measures from below the descender, which puts the
   bar under the letter as an underline rather than inside it. With
   line-height:1 the baseline sits ~0.136em above the box bottom for Inter, so
   0.30em places the bar low in the counter where the sheet has it. */
.wordmark .A { position: relative; display: inline-block; line-height: 1; }
.wordmark .A::after {
  /* left is 37.5%, not 50%: letter-spacing sits inside the span's box, so
     the glyph's optical centre is left of the box centre. A's advance in
     Inter is ~0.66em against a 0.88em box with .22em tracking. */
  content: ""; position: absolute; left: 37.5%; transform: translateX(-50%);
  bottom: .30em; width: .32em; height: .07em;   /* centre at ~27% of cap */
  background: var(--amber);
}
.wordmark-sm { font-size: .9375rem; }
.wordmark-lg { font-size: clamp(1.75rem, 5vw, 2.75rem); letter-spacing: .26em; }

.logo-lockup { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.logo-lockup .mark { width: 26px; height: 26px; color: var(--ink); flex: none; }

/* -------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
/* Measurement marks — a datum scale running behind the hero, per the
   visual language block on the brand sheet. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 96px);
  opacity: .5;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.hero .wrap { position: relative; padding-block: clamp(4rem, 11vw, 7.5rem); }
.hero-grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); } }

.tagline {
  font-family: var(--mono); color: var(--amber);
  font-size: clamp(1rem, 2.1vw, 1.25rem); letter-spacing: .01em;
}
.tagline-rule { width: 34px; height: 2px; background: var(--amber); margin-top: .6rem; }

.claims { display: flex; flex-wrap: wrap; gap: .5rem; }
.claim {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .06em;
  color: var(--ink-dim);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: .3rem .6rem; background: var(--panel);
}
.claim b { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------ buttons */
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .8125rem; letter-spacing: .04em;
  padding: .68rem 1.1rem; border-radius: 2px; text-decoration: none;
  border: 1px solid var(--rule); background: var(--panel); color: var(--ink);
  transition: border-color .15s, background .15s, color .15s;
}
.btn:hover { border-color: var(--smoke); background: var(--raised); }
.btn-primary { background: var(--amber); border-color: var(--amber); color: #17120A; font-weight: 500; }
.btn-primary:hover { background: #EE9832; border-color: #EE9832; color: #17120A; }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 3px;
}

/* -------------------------------------------------------------- code */
.term {
  border: 1px solid var(--rule); border-radius: 3px; background: #08090B;
  font-family: var(--mono); font-size: .8125rem; overflow: hidden;
}
.term-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; border-bottom: 1px solid var(--rule);
  color: var(--ink-mut); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
}
.term-bar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--smoke); }
.term-body { padding: .9rem 1rem; overflow-x: auto; }
.term-body pre { margin: 0; }
.term .p  { color: var(--amber); }
.term .c  { color: var(--ink-mut); }
.term .v  { color: var(--ink); }

code.inline {
  font-family: var(--mono); font-size: .875em;
  background: var(--panel); border: 1px solid var(--rule);
  padding: .1em .38em; border-radius: 2px; color: var(--ink);
}

/* ------------------------------------------------------------ panels */
.grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-2 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.cell { background: var(--panel); padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.cell h3 { color: var(--ink); }
.cell p { color: var(--ink-dim); font-size: .9375rem; }

/* metric read-out, per the Run Summary motif */
.readout { display: flex; flex-direction: column; gap: .15rem; }
.readout .k { font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mut); }
.readout .v { font-family: var(--mono); font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.readout .u { font-family: var(--mono); font-size: .75rem; color: var(--ink-mut); }
.readout.alert .v { color: var(--amber); }

/* tick scale */
.ticks { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.ticks i { display: block; width: 2px; background: var(--smoke); }
.ticks i.on { background: var(--amber); }

/* ------------------------------------------------------------- lists */
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.checks li { display: flex; gap: .7rem; align-items: flex-start; color: var(--ink-dim); font-size: .9375rem; }
.checks li::before {
  content: ""; flex: none; width: 10px; height: 1px; background: var(--amber); margin-top: .72rem;
}

/* --------------------------------------------------------- disclosure */
details.limit { border-top: 1px solid var(--rule); }
details.limit:last-of-type { border-bottom: 1px solid var(--rule); }
details.limit summary {
  cursor: pointer; list-style: none; padding: 1rem 0;
  display: flex; align-items: center; gap: .85rem; font-size: .9375rem;
}
details.limit summary::-webkit-details-marker { display: none; }
details.limit summary::before {
  content: "+"; font-family: var(--mono); color: var(--amber); font-size: .9rem; flex: none; width: 1ch;
}
details.limit[open] summary::before { content: "\2212"; }
details.limit .body { padding: 0 0 1.15rem 1.85rem; color: var(--ink-dim); font-size: .9375rem; max-width: var(--measure); }

/* ------------------------------------------------------------ contact */
.form-shell {
  border: 1px solid var(--rule); border-radius: 3px; background: var(--panel);
  padding: clamp(1.25rem, 3vw, 2rem);

  /* The CirqleSync form lives in a shadow root, so host CSS cannot reach it.
     It does expose custom properties, which DO cross the boundary by
     inheritance, and that is the whole supported theming surface. Without
     these the widget renders in its own light default -- a white card on a
     carbon page. Input text is `color: inherit` in the widget, so setting
     --cirqle-text carries into the fields and a dark input stays readable. */
  --cirqle-font: var(--sans);
  --cirqle-text: var(--bone);
  --cirqle-label: var(--ink-dim);
  --cirqle-input-bg: #0B0C0E;
  --cirqle-border: var(--smoke);
  --cirqle-brand: var(--amber);
  --cirqle-submit-text: #17120A;
  --cirqle-radius: 2px;
  --cirqle-max-width: 100%;
  --cirqle-success: #6FBF9A;   /* the widget defaults are tuned for light */
  --cirqle-error: #F0705F;
}

/* ------------------------------------------------------------- footer */
.site-foot { border-top: 1px solid var(--rule); padding-block: 2.5rem 3rem; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: space-between; align-items: flex-start; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.foot-links a { font-size: .8125rem; color: var(--ink-dim); text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legalese { font-size: .75rem; color: var(--ink-mut); max-width: 46ch; }

/* ------------------------------------------------------------- prose */
.prose { max-width: var(--measure); display: flex; flex-direction: column; gap: 1.1rem; }
.prose h2 { margin-top: 1.5rem; }
.prose h3 { margin-top: 1rem; color: var(--ink); }
.prose p, .prose li { color: var(--ink-dim); font-size: .9375rem; }
.prose ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.prose a { color: var(--amber); text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.prose th, .prose td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mut); font-weight: 400; }
.table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: 3px; }

.skip {
  position: absolute; left: -9999px;
}
.skip:focus { left: 1rem; top: 1rem; position: fixed; z-index: 99; background: var(--amber); color: #17120A; padding: .6rem 1rem; border-radius: 2px; }