/* Energy Variance — example output.
   The platform's readout — a ruled panel for the FFC the fleet can sustain,
   a grey one for what cover leaves — set in the same black, white and Archivo as
   the landing and explainer pages. The mint is the output veins' colour. */

:root {
  --bg:      #000000;
  --ink:     #FFFFFF;
  --heading: #FFFFFF;
  --muted:   #7C8288;
  --dimmer:  #4A4F54;      /* rules and underlines only: 2.5:1 on black */
  --soft:    #A3A8AD;      /* the connecting words of the lead sentence */
  --accent:  #84E8C8;      /* output veins: the figures the panel leads with */
  --alert:   #E8704F;      /* money lost, as on the sign-in page's alerts */
  --accent-dim: rgba(132, 232, 200, 0.6);
  --alert-dim:  rgba(232, 112, 79, 0.7);
  --panel:   transparent;
  --panel-2: rgba(255, 255, 255, 0.035);
  --line:    #26292D;
  --rule:    #26292D;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --hdr-w: 9.5rem;         /* the line headers' column */

  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--bg); }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.mono {
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- chrome ---------- */

.top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 16px;
  padding: clamp(16px, 3vh, 34px) clamp(20px, 4vw, 56px) 0;
}

.wordmark {
  font-variation-settings: "wdth" 116, "wght" 600;
  font-size: 15px;
  letter-spacing: 0.005em;
  color: var(--heading);
  text-decoration: none;
}

/* The logo after the name, a little taller than the line of text. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.wm-logo {
  display: block;
  height: 1.92em;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;            /* on a very narrow screen a link drops to a second line */
  justify-content: flex-end;
  margin-left: auto;          /* stays at the right even if it wraps under the wordmark */
  gap: 10px clamp(16px, 2.6vw, 32px);
}

/* The three pages, opposite the wordmark. The page you are on is the bright
   one. */
.nav > a {
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.nav > a:hover,
.nav > a:focus-visible { color: var(--ink); }

.nav > a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--dimmer);
}

/* The address closes the page, centred. */
.foot {
  display: flex;
  justify-content: center;
  padding: 8px clamp(20px, 4vw, 56px) clamp(24px, 4.5vh, 44px);
}

/* The address: set like the tabs, in full. A click copies it and "Copied"
   takes its place for a moment; the two share one grid cell so nothing
   shifts. */
.contact {
  display: inline-grid;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  cursor: pointer;
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink);
  transition: border-color 160ms ease;
}

.contact > span {
  grid-area: 1 / 1;
  white-space: nowrap;
  text-align: center;
}

.contact:hover,
.contact:focus-visible { border-bottom-color: var(--dimmer); }

.contact-done {
  visibility: hidden;
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
}

.contact.copied .contact-address { visibility: hidden; }
.contact.copied .contact-done { visibility: visible; }

/* Sample output's footer alone carries a second item: the glossary, set like
   the address beside it. */
.foot-pair { gap: clamp(24px, 4vw, 40px); }

.foot-link {
  padding: 0 0 3px;
  border-bottom: 1px solid transparent;
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 160ms ease;
}

.foot-link:hover,
.foot-link:focus-visible { border-bottom-color: var(--dimmer); }

/* ---------- the readout ---------- */

/* The sentence the readout completes. The facts stand out; the words that
   join them recede. */
.lead {
  margin: 0 0 clamp(20px, 3.4vh, 32px);
  max-width: 70ch;
  font-variation-settings: "wdth" 104, "wght" 400;
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.015em;
  text-wrap: pretty;
  color: var(--soft);
}

.lead strong {
  font-variation-settings: "wdth" 104, "wght" 500;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;      /* a date or a time range never splits across lines */
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.page {
  flex: 1;
  width: min(100%, 1360px);
  margin: 0 auto;
  padding: clamp(28px, 7vh, 72px) clamp(16px, 4vw, 28px) clamp(28px, 6vh, 56px);
}

.note {
  margin: clamp(18px, 3vh, 28px) 0 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.panel {
  display: grid;
  row-gap: clamp(16px, 2.8vh, 24px);
  padding: clamp(16px, 2.6vh, 22px) 14px;
  border: 1px solid var(--line);
}

.ffc {
  background: var(--panel);
  border-left: 3px solid var(--accent);
}

.cover {
  margin-top: 14px;
  background: var(--panel-2);
  border-left: 3px solid var(--accent);   /* both panels are outputs, so both carry the output mint */
}

.row {
  display: grid;
  grid-template-columns: var(--hdr-w) minmax(0, 1fr);
  align-items: baseline;
  column-gap: clamp(16px, 2.2vw, 28px);
}

.cells {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px clamp(18px, 2.6vw, 32px);
}

/* The line header: what a row is about. Brighter than the labels beside it. */
.hdr {
  grid-column: 1;
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

/* A label, then its figure, on one baseline. They wrap together. */
.m {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.sec, dt {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.sec { padding-right: 4px; }

dd {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: clamp(15px, 1.55vw, 17.5px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Units sit smaller and quieter than the figure they belong to.

   Weights on this page go through font-variation-settings, never through
   font-weight alone: the figure's own `"wght" 500` is inherited, and an
   explicit wght axis wins over font-weight, so a bare `font-weight: 400`
   here (or 600 on the hero figures below) never reached the glyphs. */
.u {
  font-size: 0.6em;
  font-variation-settings: "wdth" 100, "wght" 400;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.u.pre { font-size: 0.75em; margin: 0 0.08em 0 0.06em; }

.hero .u { color: var(--accent-dim); }
dd.neg .u { color: var(--alert-dim); }

/* Money lost reads in the alert orange. */
dd.neg { color: var(--alert); }

/* The two figures the panel leads with. */
.hero dd {
  font-size: clamp(22px, 2.6vw, 29px);
  font-variation-settings: "wdth" 100, "wght" 600;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--accent);
}

/* ---------- the rest of the output ---------- */

/* The mint rule of the panels carries on below them and fades out: the
   readout above is an excerpt, and this is what it is an excerpt of. */
.also {
  margin-top: clamp(30px, 5.5vh, 54px);
  padding: 2px 0 6px 14px;
  border-left: 3px solid;
  border-image: linear-gradient(to bottom, var(--accent), transparent) 1;
}

.also-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px clamp(28px, 5vw, 72px);
}

.also-list h3 {
  margin: 0 0 6px;
  font-variation-settings: "wdth" 104, "wght" 500;
  font-weight: 500;
  font-size: clamp(16px, 1.45vw, 18px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.also-list p {
  margin: 0;
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- the glossary ---------- */

/* The glossary reuses the readout's lead and the "also" lists; it adds a
   visible title, a row of section links, and room between the sections. */
.gl-title {
  margin: 0 0 clamp(16px, 2.6vh, 24px);
  font-variation-settings: "wdth" 112, "wght" 500;
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.gl-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(16px, 2.6vw, 32px);
  margin: 0 0 clamp(8px, 1.5vh, 14px);
}

.gl-toc > a {
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--dimmer);
}

.gl-toc > a:hover,
.gl-toc > a:focus-visible { color: var(--ink); }

.also[id] { scroll-margin-top: 24px; }

/* Phones: the links sit on the left, under the name. */
@media (max-width: 560px) {
  .nav { flex-basis: 100%; margin-left: 0; justify-content: flex-start; }
}

/* The smallest phones: tighten the three tabs so they stay on one line. */
@media (max-width: 360px) {
  .nav { column-gap: 12px; }
  .nav > a { letter-spacing: 0.1em; }
}

@media (max-width: 760px) {
  .also-list { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 560px) {
  .row { grid-template-columns: 1fr; row-gap: 12px; }
  .cells { grid-column: 1; gap: 14px 0; }
  .cells > * { flex: 1 1 100%; }
  .hdr { grid-column: 1; }
  .sec { padding-bottom: 2px; }
}