/* =====================================================================
   anyhazard.live · site.css · v0.2.0 · 2026-07-29

   THE SKIN IS LINKED, this file is only this site's layout.
   Tokens, type scale, controls, rules and the dark-scheme handling all
   come from the house stylesheet, referenced at its canonical URL:
   https://redfish.acequia.io/skills/redfish-style/redfish-style.css
   (redfish-style SKILL §4 rule 4). Nothing below redefines a token or
   introduces a second hue: the only colour on this site is Pantone 180,
   and each page spends it on exactly ONE live thing (SKILL §3.4).
   ===================================================================== */

/* ---------------------------------------------------------- page frame */
.ah-page { max-width: 960px; margin: 0 auto; padding: 0 var(--rf-s5) var(--rf-s8); }

/* Minimal header: wordmark, version, and (on the home page) the version
   switch. Nothing else at top level (redfish-style §4 rule 2). */
.ah-top {
  display: flex; align-items: center; gap: var(--rf-s4); flex-wrap: wrap;
  padding: var(--rf-s5) 0 var(--rf-s4);
  border-bottom: 1px solid var(--rf-rule);
}
.ah-brand { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.ah-brand:hover { color: inherit; }
.ah-spacer { flex: 1 1 auto; }
.ah-stamp { font-size: 13px; color: var(--rf-ink-faint); font-variant-numeric: tabular-nums; }

/* Section nav: the other audience doors, as text, on a rule. */
.ah-nav { display: flex; gap: var(--rf-s5); flex-wrap: wrap; font-size: var(--rf-size-small); }
.ah-nav a { color: var(--rf-ink-quiet); text-decoration: none;
            border-bottom: 1px solid transparent; padding-bottom: 2px; }
.ah-nav a:hover { color: var(--rf-accent); border-bottom-color: var(--rf-accent); }
.ah-nav a[aria-current="page"] { color: var(--rf-ink); border-bottom-color: var(--rf-ink); }

/* ------------------------------------------------------------ hero/lede */
.ah-hero { padding: var(--rf-s8) 0 var(--rf-s5); }
.ah-hero h1 { max-width: 26ch; }
.ah-lede { font-size: 19px; line-height: 1.5; color: var(--rf-ink-quiet); max-width: 64ch; }
.ah-lede b { color: var(--rf-ink); font-weight: 600; }

/* The doctrine line: a display sentence on a bar. Bar is ink; the accent
   belongs to the page's one live control. */
.ah-doctrine {
  font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; line-height: 1.25;
  border-left: 3px solid var(--rf-ink); padding-left: var(--rf-s4);
  margin: var(--rf-s6) 0; max-width: 30ch;
}

/* ------------------------------------------------------------- the doors */
.ah-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
            border-top: 1px solid var(--rf-rule); margin-top: var(--rf-s5); }
.ah-door { display: block; text-decoration: none; padding: var(--rf-s5) var(--rf-s5) var(--rf-s5) 0;
           border-bottom: 1px solid var(--rf-rule);
           transition: background var(--rf-t-base) var(--rf-ease); }
.ah-door + .ah-door { border-left: 1px solid var(--rf-rule);
                      padding-left: var(--rf-s5); padding-right: 0; }
.ah-door:hover { background: var(--rf-ground-sunk); color: inherit; }
.ah-door h3 { margin: var(--rf-s2) 0 var(--rf-s3); font-size: 20px; }
.ah-door p { font-size: var(--rf-size-small); color: var(--rf-ink-quiet); margin: 0; max-width: 40ch; }
.ah-door .ah-go { display: inline-block; margin-top: var(--rf-s3); font-size: var(--rf-size-small);
                  font-weight: 600; color: var(--rf-ink); }
.ah-door:hover .ah-go { color: var(--rf-accent); }

/* -------------------------------------------------------- key/value rows */
.ah-rows { border-top: 1px solid var(--rf-rule); margin: var(--rf-s5) 0; }
.ah-row { display: grid; grid-template-columns: 190px 1fr; gap: var(--rf-s5);
          padding: var(--rf-s4) 0; border-bottom: 1px solid var(--rf-rule); align-items: start; }
.ah-row dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.11em;
             color: var(--rf-ink-faint); font-weight: 600; padding-top: 3px; margin: 0; }
.ah-row dd { margin: 0; font-size: var(--rf-size-body); }
/* the morph: values crossfade between states, never cut (SKILL §2c) */
.ah-rows dd { transition: opacity var(--rf-t-base) var(--rf-ease); }
.ah-rows.ah-fade dd { opacity: 0; }

/* --------------------------------------------------------------- steps */
.ah-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rf-s5);
            margin: var(--rf-s6) 0; }
.ah-step { border-top: 2px solid var(--rf-ink); padding-top: var(--rf-s3); }
.ah-step .ah-n { font-size: 12px; letter-spacing: 0.11em; text-transform: uppercase;
                 color: var(--rf-ink-faint); font-weight: 600; }
.ah-step h4 { font-size: 17px; font-weight: 600; margin: var(--rf-s2) 0 var(--rf-s2); line-height: 1.2; }
.ah-step p { font-size: var(--rf-size-small); color: var(--rf-ink-quiet); margin: 0; }

/* --------------------------------------------------------- the segmented
   control. Its SELECTED state is the accent on pages that carry it, and
   those pages carry no other accent. */
.ah-seg { display: inline-flex; border: 1px solid var(--rf-rule-strong);
          border-radius: var(--rf-radius); margin: var(--rf-s4) 0 0; overflow: hidden; }
.ah-seg button { border: 0; border-radius: 0; padding: 10px 18px; }
.ah-seg button + button { border-left: 1px solid var(--rf-rule-strong); }
.ah-seg button[aria-selected="true"] { background: var(--rf-accent); color: #fff; }
.ah-seg button[aria-selected="true"]:hover { color: #fff; }

/* ---------------------------------------------------- the buffer figure */
.ah-fig { background: var(--rf-ground-sunk); border: 1px solid var(--rf-rule);
          border-radius: var(--rf-radius); padding: var(--rf-s5); margin: var(--rf-s5) 0; }
.ah-readout { display: flex; align-items: baseline; gap: var(--rf-s4); flex-wrap: wrap; }
.ah-num { font-size: 46px; font-weight: 600; font-variant-numeric: tabular-nums;
          min-width: 4.4ch; letter-spacing: -0.03em; transition: color var(--rf-t-quick) var(--rf-ease); }
.ah-num.ah-live { color: var(--rf-accent); }
.ah-what { font-size: var(--rf-size-small); color: var(--rf-ink-quiet); max-width: 36ch; }
.ah-bar { position: relative; height: 10px; background: var(--rf-ground);
          border: 1px solid var(--rf-rule); border-radius: var(--rf-radius);
          margin: var(--rf-s4) 0 var(--rf-s1); overflow: hidden; }
.ah-bar .ah-fill { position: absolute; inset: 0 auto 0 0; width: 0;
                   background: var(--rf-accent); transition: width var(--rf-t-quick) linear; }
.ah-bar.ah-unknown .ah-fill { width: 0; }
.ah-bar.ah-unknown::after {
  content: "no shared picture: the buffer exists whether you can see it or not";
  position: absolute; inset: 0; display: flex; align-items: center; padding-left: 10px;
  font-size: 13px; color: var(--rf-ink-faint);
}
.ah-axis { display: flex; justify-content: space-between; font-size: 13px;
           color: var(--rf-ink-faint); font-variant-numeric: tabular-nums; }
.ah-controls { display: flex; align-items: center; gap: var(--rf-s4);
               flex-wrap: wrap; margin-top: var(--rf-s4); }
.ah-clock { font-size: var(--rf-size-body); font-variant-numeric: tabular-nums; min-width: 84px; }
.ah-controls input[type=range] { flex: 1 1 200px; min-width: 180px; }
.ah-cap { font-size: var(--rf-size-small); color: var(--rf-ink-quiet);
          margin-top: var(--rf-s3); min-height: 4.2em; max-width: 68ch; }
.ah-cap b { color: var(--rf-ink); font-weight: 600; }

/* ------------------------------------------------------------- pairing */
.ah-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
           border-top: 1px solid var(--rf-rule); margin-top: var(--rf-s4); }
.ah-pair > div { padding: var(--rf-s5) var(--rf-s5) var(--rf-s5) 0;
                 border-bottom: 1px solid var(--rf-rule); }
.ah-pair > div + div { border-left: 1px solid var(--rf-rule);
                       padding-left: var(--rf-s5); padding-right: 0; }
.ah-pair h3 { margin: var(--rf-s2) 0 var(--rf-s3); font-size: 18px; }
.ah-pair p { font-size: var(--rf-size-small); color: var(--rf-ink-quiet); margin: 0; }
.ah-pair p b { color: var(--rf-ink); font-weight: 600; }

/* --------------------------------------------------------------- state */
/* The in-build honesty block. A recessed well, no colour: honesty is not
   an alert. */
.ah-state { background: var(--rf-ground-sunk); border: 1px solid var(--rf-rule);
            border-radius: var(--rf-radius); padding: var(--rf-s4) var(--rf-s5);
            margin: var(--rf-s6) 0; max-width: var(--rf-measure); }
.ah-state p { font-size: var(--rf-size-small); color: var(--rf-ink-quiet); margin: 0 0 var(--rf-s2); }
.ah-state p:last-child { margin-bottom: 0; }
.ah-state b { color: var(--rf-ink); }

/* ----------------------------------------------------------- the action */
.ah-act { display: flex; align-items: baseline; gap: var(--rf-s5);
          flex-wrap: wrap; margin: var(--rf-s5) 0 0; }
.ah-cta { display: inline-block; font: 600 var(--rf-size-control)/1 var(--rf-sans);
          color: var(--rf-ink); background: transparent; text-decoration: none;
          border: 1px solid var(--rf-ink); border-radius: var(--rf-radius);
          padding: 13px 22px;
          transition: background var(--rf-t-base) var(--rf-ease),
                      color var(--rf-t-base) var(--rf-ease),
                      border-color var(--rf-t-base) var(--rf-ease); }
.ah-cta:hover { background: var(--rf-ink); color: var(--rf-ground); }
.ah-aside { font-size: var(--rf-size-small); color: var(--rf-ink-quiet); }

/* -------------------------------------------------------------- footer */
.ah-foot { border-top: 1px solid var(--rf-rule); margin-top: var(--rf-s8);
           padding-top: var(--rf-s4); font-size: var(--rf-size-small);
           color: var(--rf-ink-faint); line-height: 1.7; }
.ah-foot b { color: var(--rf-ink-quiet); font-weight: 600; }

/* -------------------------------------------------------------- narrow */
@media (max-width: 760px) {
  .ah-doors, .ah-pair { grid-template-columns: 1fr; }
  .ah-door + .ah-door, .ah-pair > div + div { border-left: 0; padding-left: 0; }
  .ah-row { grid-template-columns: 1fr; gap: var(--rf-s1); }
  .ah-steps { grid-template-columns: 1fr; gap: var(--rf-s4); }
}