/* ════════════════════════════════════════════════════════════════════════
   css/aux-pages.css — DISCLOSURE + DEMO SHELL FOR THE REMAINING PAGES
   service.tnaado.ca · linked ONLY from /stack, /sister, /consulting,
   /strategy-publicity, /404 and /thank-you.

   WHY A SEPARATE SHEET. Every base sheet on this site is shared with a page
   another task owns: reference.css by /stack, /consulting and
   /strategy-publicity plus a dozen others; firm-pages.css by /sister and by
   /firm, /office and /team; util.css by /privacy, /thank-you and /404. All
   three are read here and never written. Everything below is additive: new
   class names only, nothing in this file also exists in those.

   ── WHAT MOTION IS ALLOWED, AND WHY THIS IS NOT A CONTRADICTION ─────────
   css/firm-pages.css records "Ethan: no scroll animations, not what I asked
   for." That stands. Nothing here is driven by scroll position: no observer,
   no scrub, no pin, no parallax, no animation-timeline, no rAF. Every
   transition in this file is started by the READER — a click, a keypress, a
   hover, a focus. That is the thing he asked for by name: "dynamic
   buttons/click to read more/dropdowns".

   The running mechanics from css/components/demos.css are the other half of
   the answer, and they are the ones he named: "the wbesite being built
   snaimtion and rls and otther things". Those run on their own timers inside
   a panel the reader opened. They read no page scroll position, so they
   cannot move the storm camera on any page that carries one.

   ── WHY NOT hidden="until-found" INSIDE A <details> ─────────────────────
   Because the two stack into a bug, and a sibling verified it in a browser
   before I got here: hidden="until-found" hides with content-visibility:
   hidden, which does not care whether an ancestor <details> is open, so a
   summary click flips [open] and reveals nothing until a beforematch fires.
   <details> alone is the mechanism that works, and Chromium's auto-expanding
   find-in-page already opens a closed <details> around a match. This file
   therefore styles <details> and leaves hidden="until-found" for content
   that is NOT inside one.

   Content is never removed from the DOM. A closed row's text is served,
   parsed, indexable and reachable by find-in-page.
   ════════════════════════════════════════════════════════════════════════ */

/* ── TOKEN BRIDGE ────────────────────────────────────────────────────────
   --dim-bone and --hair-bone are declared by firm-pages.css but not by
   reference.css or util.css, and this sheet rides all three. Literal
   fallbacks, per the porting rule. */
:root {
  --ax-ease:      var(--ease, cubic-bezier(.22, 1, .36, 1));
  --ax-hair:      var(--hair-ink, rgba(245, 241, 232, .14));
  --ax-hair-bone: var(--hair-bone, rgba(10, 10, 10, .16));
  --ax-dim-bone:  #5c574f;
}

/* ══ DISCLOSURE ROWS ══════════════════════════════════════════════════════
   Hairline-separated rows: a mono term, a one-line answer that is ALWAYS
   visible, and the detail behind the control. The lead line is not optional.
   A row that says nothing until it is opened is a riddle, and riddles are
   the thing being taken off this site. */
.axd { margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0; }

.axd__d {
  border-top: 1px solid var(--ax-hair);
  interpolate-size: allow-keywords;
}
.axd__d:first-child { border-top: 0; }
.axd > .axd__d:last-child { border-bottom: 1px solid var(--ax-hair); }

.fp-band--bone .axd__d, .fp-band--ivory .axd__d,
.fp-band--bone .axd > .axd__d:last-child,
.fp-band--ivory .axd > .axd__d:last-child { border-color: var(--ax-hair-bone); }

/* A grid, not a flex row, so the sign column is the same width on every row
   and the labels line up down the list. */
.axd__s {
  display: grid;
  grid-template-columns: 1fr 1.5rem;
  align-items: baseline;
  gap: 0 1rem;
  padding: .95rem 0;
  cursor: pointer;
  list-style: none;
  transition: color .18s var(--ax-ease);
}
.axd__s::-webkit-details-marker { display: none; }
.axd__s::marker { content: ''; }
.axd__s:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 3px; }
.fp-band--bone .axd__s:focus-visible,
.fp-band--ivory .axd__s:focus-visible { outline-color: var(--red-bone); }

.axd__t {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red-ink);
}
.fp-band--bone .axd__t, .fp-band--ivory .axd__t { color: var(--red-bone); }

.axd__lead {
  display: block;
  margin: .3rem 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--bone);
}
.fp-band--bone .axd__lead, .fp-band--ivory .axd__lead { color: var(--ink); }

/* THE SIGN. A plus that becomes a minus, drawn in two 1px rules so it stays
   crisp at every zoom level and needs no glyph. */
.axd__sign {
  position: relative;
  justify-self: end;
  width: 1.0625rem;
  height: 1.0625rem;
  margin-top: .1rem;
  border: 1px solid var(--ax-hair);
  border-radius: 2px;
  transition: border-color .18s var(--ax-ease), background-color .18s var(--ax-ease);
}
.fp-band--bone .axd__sign, .fp-band--ivory .axd__sign { border-color: var(--ax-hair-bone); }
.axd__sign::before, .axd__sign::after {
  content: '';
  position: absolute;
  inset: 50% 22%;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform .3s var(--ax-ease), opacity .2s var(--ax-ease);
}
.axd__sign::after { transform: translateY(-50%) rotate(90deg); }
.axd__d[open] .axd__sign::after,
.tdx-row[open] .axd__sign::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

@media (hover: hover) {
  .axd__s:hover .axd__sign { border-color: var(--red-ink); background: rgba(200, 16, 46, .1); }
  .axd__s:hover .axd__t { color: var(--red); }
  .fp-band--bone .axd__s:hover .axd__sign,
  .fp-band--ivory .axd__s:hover .axd__sign { border-color: var(--red-bone); }
  .fp-band--bone .axd__s:hover .axd__t,
  .fp-band--ivory .axd__s:hover .axd__t { color: var(--red-bone); }
}

.axd__b {
  margin: 0 0 1.05rem;
  padding-right: 2.5rem;
  max-width: 62ch;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--dim-ink);
}
.axd__b + .axd__b { margin-top: -.4rem; }
.fp-band--bone .axd__b, .fp-band--ivory .axd__b { color: var(--ax-dim-bone); }
.axd__b a { color: var(--red-ink); text-decoration: underline; text-underline-offset: .18em; }
.fp-band--bone .axd__b a, .fp-band--ivory .axd__b a { color: var(--red-bone); }

/* block-size 0 → auto needs interpolate-size, declared on the <details>.
   content-visibility is transitioned with allow-discrete so the text is not
   paintable while the row is shut but is still in the DOM and still found by
   find-in-page. */
@supports (interpolate-size: allow-keywords) {
  .axd__d::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    content-visibility: hidden;
    transition:
      block-size .34s var(--ax-ease),
      opacity .26s var(--ax-ease),
      content-visibility .34s allow-discrete;
  }
  .axd__d[open]::details-content {
    block-size: auto;
    opacity: 1;
    content-visibility: visible;
  }
}

/* ══ THE DEMO SHELL ═══════════════════════════════════════════════════════
   css/components/demos.css deliberately does not style the summary chrome —
   the host page owns it. js/demos.js only READS the <details>; it never
   controls it, and it mirrors the open state onto a .tdx-row ancestor as
   data-open, which is what gates the will-change hints inside demos.css. So
   the class name .tdx-row is load-bearing: renaming it un-gates the
   compositor layers. */
.tdx { margin: clamp(1.75rem, 4vw, 2.75rem) 0 0; }

.tdx-row { border-top: 1px solid var(--ax-hair); interpolate-size: allow-keywords; }
.tdx-row:first-child { border-top: 0; }
.tdx-row:last-child { border-bottom: 1px solid var(--ax-hair); }

.tdx-row > summary {
  display: grid;
  grid-template-columns: 2.25rem 1fr 1.5rem;
  align-items: baseline;
  gap: 0 .9rem;
  padding: 1.05rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--bone);
  transition: color .18s var(--ax-ease);
}
.tdx-row > summary::-webkit-details-marker { display: none; }
.tdx-row > summary::marker { content: ''; }
.tdx-row > summary:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 3px; }
.tdx-row > summary b { color: var(--red-ink); font-weight: 500; }

.tdx-row .axd__sign { margin-top: 0; }
@media (hover: hover) {
  .tdx-row > summary:hover .axd__sign { border-color: var(--red-ink); background: rgba(200, 16, 46, .1); }
}

.tdx-row__panel { padding: 0 0 2.4rem; }

@supports (interpolate-size: allow-keywords) {
  .tdx-row::details-content {
    block-size: 0; overflow: clip; opacity: 0; content-visibility: hidden;
    transition:
      block-size .34s var(--ax-ease),
      opacity .26s var(--ax-ease),
      content-visibility .34s allow-discrete;
  }
  .tdx-row[open]::details-content { block-size: auto; opacity: 1; content-visibility: visible; }
}

/* The rail above each stage: which platform, and the one command that would
   produce what is drawn below it. */
.tdx-stage__rail {
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--dim-ink);
}
.tdx-stage__rail b { color: var(--bone); font-weight: 500; }
.tdx-stage__rail code {
  margin-left: .55rem;
  padding: .1em .4em;
  background: var(--plate-2, #131313);
  color: var(--bone-2, #ebe5d8);
  border-radius: 2px;
  font: inherit;
}
.tdx-stage__note {
  margin: 1.1rem 0 0;
  max-width: 60ch;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--dim-ink);
}

@media (max-width: 560px) {
  .tdx-row > summary { grid-template-columns: 1.75rem 1fr 1.25rem; gap: 0 .6rem; font-size: .72rem; }
  .axd__b { padding-right: 0; }
}

/* ══ NAMED SETS ═══════════════════════════════════════════════════════════
   Replaces a field of 175 identical marks whose legend read "one mark for
   each calculator published". A reader can COUNT those marks, which makes it
   a published total that goes stale the moment a calculator ships — the
   thing the no-hard-totals rule forbids. Naming the calculators is stronger
   and cannot go out of date, and the sentence that listed them in prose was
   deleted rather than kept alongside.

   Motion is reader-initiated only: a chip lifts under the pointer or on
   keyboard focus. Nothing here reads scroll. */
.axset {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 4vw, 2.75rem);
  margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--ax-hair);
}
.fp-band--bone .axset, .fp-band--ivory .axset { border-color: var(--ax-hair-bone); }

.axset__h {
  margin: 0 0 .9rem;
  font-family: var(--mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-ink, #e2394f);
}
.fp-band--bone .axset__h, .fp-band--ivory .axset__h { color: var(--red-bone, #c8102e); }

.axset__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }

.axset__chips > li {
  padding: .42rem .8rem;
  border: 1px solid var(--ax-hair);
  border-radius: 999px;
  font-size: .875rem;
  line-height: 1.2;
  color: var(--bone, #f5f1e8);
  transition: border-color .2s var(--ax-ease);
}
.fp-band--bone .axset__chips > li, .fp-band--ivory .axset__chips > li {
  border-color: var(--ax-hair-bone); color: var(--ink, #0a0a0a);
}
/* Border only, and deliberately NO lift. These chips are labels, not links --
   tools.tnaado.ca's per-calculator URLs are not known here and inventing one
   is not allowed -- so a translateY would promise a click that does not exist.
   The material acknowledges the pointer; it does not pretend to be a button. */
@media (hover: hover) {
  .axset__chips > li:hover { border-color: currentColor; }
}

/* ══ CONTENTS LIST ════════════════════════════════════════════════════════
   /sister rides firm-pages.css, which has no equivalent of reference.css's
   `.jump`, so the idiom is re-declared here rather than reaching into a shared
   sheet another task owns. Same shape, same reading order.

   It is a plain list of in-page links. No observer, no active-section
   highlighting: firm-pages.css records Ethan's "no scroll animations, not what
   I asked for", and a marker that follows the reader IS driven by scroll. The
   only motion is the reader's own pointer or focus. */
.axjump__h {
  margin: 0 0 1.1rem;
  font-family: var(--mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-ink, #e2394f);
}
.fp-band--bone .axjump__h, .fp-band--ivory .axjump__h { color: var(--red-bone, #c8102e); }

.axjump {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ax-hair);
}
.fp-band--bone .axjump, .fp-band--ivory .axjump { border-color: var(--ax-hair-bone); }

.axjump > li { border-bottom: 1px solid var(--ax-hair); }
.fp-band--bone .axjump > li, .fp-band--ivory .axjump > li { border-color: var(--ax-hair-bone); }

.axjump a {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  align-items: baseline;
  gap: .15rem .5rem;
  padding: 1rem .75rem 1rem 0;
  text-decoration: none;
  color: inherit;
  transition: padding-left .2s var(--ax-ease), background-color .2s var(--ax-ease);
}
@media (hover: hover) { .axjump a:hover { padding-left: .55rem; } }
.axjump a:focus-visible { outline: 2px solid var(--red-ink, #e2394f); outline-offset: -2px; }
.fp-band--bone .axjump a:focus-visible,
.fp-band--ivory .axjump a:focus-visible { outline-color: var(--red-bone, #c8102e); }

.axjump i {
  grid-row: 1 / span 2;
  font-family: var(--mono, ui-monospace, "JetBrains Mono", monospace);
  font-style: normal;
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--red-ink, #e2394f);
}
.fp-band--bone .axjump i, .fp-band--ivory .axjump i { color: var(--red-bone, #c8102e); }

.axjump b { font-weight: 500; font-size: 1rem; line-height: 1.3; }
.axjump span { font-size: .875rem; line-height: 1.5; color: var(--ax-dim-bone); }
.fp-band--ink .axjump span, .fp-band--plate .axjump span { color: var(--dim-ink, #8b857c); }

/* ══ REDUCED MOTION ═══════════════════════════════════════════════════════
   The disclosures still open and close — that is state the reader asked for,
   not decoration — they simply stop interpolating. */
@media (prefers-reduced-motion: reduce) {
  .axd__d::details-content,
  .axd__d[open]::details-content,
  .tdx-row::details-content,
  .tdx-row[open]::details-content { transition: none; }
  .axd__s, .axd__sign, .axd__sign::before, .axd__sign::after,
  .tdx-row > summary, .axset__chips > li, .axjump a { transition: none; }
}