/* =====================================================================================================
   technology.css: Floor 3, The Engine Room (/learn/technology/ and /es/aprender/tecnologia/)
   Page-only rules. Every selector is scoped under body[data-floor="engine"]. Tokens come from site.css;
   gold (--deco-*) is decoration only, never text. No new text colours, no 100vw, no infinite animation.
   ===================================================================================================== */

/* -- Page head: room for the plaque, the h1 and the lede beside the gauges ----------------------------- */
body[data-floor="engine"] .engine-head .scene__grid { align-items: end; }
body[data-floor="engine"] .engine-head .lede + .lede { margin-block-start: var(--s-3); font-size: var(--t-callout); }

/* -- "On this floor" directory: a brass-plate list of same-page links (44 px targets) ------------------- */
body[data-floor="engine"] .engine-index {
  margin-block-start: var(--s-6);
  padding: var(--s-4);
  background: var(--noir-1);
  border: 1px solid var(--deco-gold-line);
  border-radius: var(--radius-1);
}
body[data-floor="engine"] .engine-index__title {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
body[data-floor="engine"] .engine-index ol {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: gauge;
}
@media (min-width: 40rem) {
  body[data-floor="engine"] .engine-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  body[data-floor="engine"] .engine-index ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
body[data-floor="engine"] .engine-index li { margin: 0; counter-increment: gauge; }
body[data-floor="engine"] .engine-index a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--target);
  padding: 0.5rem 0.75rem;
  border-inline-start: 2px solid var(--deco-gold-line);
  text-underline-offset: 0.22em;
}
body[data-floor="engine"] .engine-index a::before {     /* gauge number: decor beside the words */
  content: counter(gauge, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--t-footnote);
  color: var(--ink-3);
  text-decoration: none;
}
body[data-floor="engine"] .engine-index a:hover { border-inline-start-color: var(--deco-gold); }

/* -- Two-column rooms: copy on the left, an instrument panel on the right ------------------------------ */
body[data-floor="engine"] .engine-split {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 56rem) {
  body[data-floor="engine"] .engine-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
body[data-floor="engine"] .engine-split > * { min-width: 0; }
body[data-floor="engine"] .engine-copy > :is(p, si-p),
body[data-floor="engine"] .engine-copy > ul { max-width: min(var(--max-text), 54ch); }   /* 54ch (ch = the "0", about 1.3 average letters here) is about 70 characters a line */
body[data-floor="engine"] .engine-copy ul { padding-inline-start: 1.1em; }
body[data-floor="engine"] .engine-copy li::marker { color: var(--deco-gold); }

/* Instrument panel: a card with a glass tube across its top edge (decor only). */
body[data-floor="engine"] .engine-panel { overflow: clip; }
body[data-floor="engine"] .engine-panel::after {
  inset-block-start: 0;
  inset-inline: 0;
  width: auto;
  height: 3px;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--deco-gold-lo) 15%, var(--deco-gold) 50%, var(--deco-gold-lo) 85%, transparent);
  box-shadow: 0 0 18px 2px var(--glow-tube);
}
body[data-floor="engine"] .engine-panel h3 { margin-block-end: var(--s-3); }
body[data-floor="engine"] .engine-panel .pairs { margin-block-end: 0; }
body[data-floor="engine"] .engine-panel > :is(p, si-p):last-child { margin-block-end: 0; }

/* Equations read aloud: the words under each equation (Babylon G: a text equivalent for VoiceOver). */
body[data-floor="engine"] .engine-words {
  margin: 0.25rem 0 0.75rem;
  font-size: var(--t-footnote);
  line-height: 1.5;
  color: var(--ink-2);
}
body[data-floor="engine"] .math__eq + .math__eq { margin-block-start: 0.5rem; }
body[data-floor="engine"] .math__body > :is(p, si-p) { max-width: min(var(--max-text), 54ch); }
body[data-floor="engine"] .measure { max-width: min(var(--max-text), 54ch); }

/* Standalone links (card actions, the cross-floor link under the server paragraph): a 44 px tall target. */
body[data-floor="engine"] .card__cta a,
body[data-floor="engine"] .engine-floorlink a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
}

/* Plain lists inside cards */
body[data-floor="engine"] .engine-list {
  margin: 0;
  padding-inline-start: 1.1em;
  color: var(--ink-2);
}
body[data-floor="engine"] .engine-list li::marker { color: var(--deco-gold); }

/* Card rows on this floor: cards stretch to the row and keep their headings tight. */
body[data-floor="engine"] .card-row { margin-block-start: var(--s-5); }
body[data-floor="engine"] .card h3 { font-size: var(--t-title2); }
body[data-floor="engine"] .card :is(p, si-p) { color: var(--ink-2); }
body[data-floor="engine"] .card :is(p, si-p):last-child { margin-block-end: 0; }

/* The where-it-runs table: column headings carry a small glyph shape beside the words (never colour alone). */
body[data-floor="engine"] .engine-compare { margin-block-start: var(--s-5); }
body[data-floor="engine"] .engine-table { margin-block-start: var(--s-6); max-width: 60rem; }
@media (min-width: 40rem) {
  body[data-floor="engine"] .engine-table .compare tbody th { width: 22%; }
}
body[data-floor="engine"] .engine-compare thead th:not(:first-child)::before {
  content: "";
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  margin-inline-end: 0.45em;
  border: 1.5px solid var(--mark-2);
  vertical-align: 0.02em;
}
body[data-floor="engine"] .engine-compare thead th.engine-compare__phone::before { border-radius: 2px 2px 3px 3px; height: 0.8em; width: 0.5em; }
body[data-floor="engine"] .engine-compare thead th.engine-compare__server::before { border-radius: 1px; }

/* -- The In construction wing: scaffold stripes behind dashed cards ------------------------------------ */
body[data-floor="engine"] .engine-wing {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    repeating-linear-gradient(135deg, rgb(134 171 167 / 0.045) 0 14px, transparent 14px 28px),
    var(--noir-1);
  border-block: 1px solid var(--deco-gold-faint);
}
body[data-floor="engine"] .engine-wing .card {
  background: var(--noir-2);
  border: 1px dashed var(--deco-gold-line);
  border-radius: var(--radius-1);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
body[data-floor="engine"] .engine-wing .card h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: var(--t-title3);
}
body[data-floor="engine"] .engine-wing .card-row { gap: var(--s-3); }
@media (min-width: 48rem) {
  body[data-floor="engine"] .engine-wing .card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 72rem) {
  body[data-floor="engine"] .engine-wing .card-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Row matching: a lone last card takes the whole row (2 columns: odd count; 3 columns: one left over). */
@media (min-width: 48rem) and (max-width: 71.99rem) {
  body[data-floor="engine"] .engine-wing .card-row > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 72rem) {
  body[data-floor="engine"] .engine-wing .card-row > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}

/* Long unbroken tokens (unit names, notation) may wrap inside text, never inside a .fig. */
body[data-floor="engine"] main :is(p, si-p),
body[data-floor="engine"] main li,
body[data-floor="engine"] main td { overflow-wrap: break-word; }
body[data-floor="engine"] .fig { overflow-wrap: normal; }

/* Increase Contrast: solid rules, no tube glow, no stripes. */
@media (prefers-contrast: more) {
  body[data-floor="engine"] .engine-panel::after { box-shadow: none; background: var(--mark-2); }
  body[data-floor="engine"] .engine-wing { background: var(--noir-1); }
  body[data-floor="engine"] .engine-wing .card { border-style: solid; border-color: var(--mark-2); }
  body[data-floor="engine"] .engine-index,
  body[data-floor="engine"] .engine-index a { border-color: var(--mark-2); }
}
@media (forced-colors: active) {
  body[data-floor="engine"] .engine-panel::after { background: CanvasText; box-shadow: none; }
  body[data-floor="engine"] .engine-wing .card,
  body[data-floor="engine"] .engine-index { border-color: CanvasText; }
}