/* ==========================================================================
   BIMLEED — assets/css/tools.css
   THE CALCULATOR SURFACE.

   Session 1's tokens and glass primitives do the material; this file only
   arranges them into the one layout every calculator in the library uses:
   a tab strip, a shape rail, an input column, a figure, a results panel and
   a schedule below. Eighty tools written years apart have to look like one
   product, so a tool file styles nothing of its own — if a calculator needs a
   component that is not here, it belongs here.

   Colour discipline, from the approved direction: the page is glass on a
   near-white ground. Saturated colour lives INSIDE controls — the active pill,
   the utilisation bar, the pass badge — never as a field behind the content.
   The faint construction geometry behind the figure is the one decorative
   element, and it is under 8% ink.

   Everything is logical properties, so RTL mirrors without a second rule.
   ========================================================================== */

/* `hidden` has to win. Several of the elements a calculator shows and hides
   are flex containers or table cells, whose display value would otherwise beat
   the user-agent rule for [hidden] and leave a "hidden" field on screen. This
   file only loads on a tool page, so the !important is contained. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ shell */

.calc {
  display: grid;
  gap: var(--space-6);
  margin-block-end: var(--space-6);
}
/* A grid item's default minimum size is its content, so a schedule with eleven
   columns would push the whole page wider than the viewport instead of
   scrolling inside its own .table-wrap. This is the line that stops that, and
   it has to be on every level of the nesting. */
.calc > *, .calc__work > *, .calc__panel > * { min-inline-size: 0; }

/* --- the tab strip ------------------------------------------------------ */

.calc__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--r-pill);
  background: var(--glass-tint-thin, rgba(255, 255, 255, .55));
  border: 1px solid var(--line-soft);
  inline-size: fit-content;
  max-inline-size: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.calc__tabs::-webkit-scrollbar { display: none; }

.calc__tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-ui);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.calc__tab:hover { color: var(--ink); }
.calc__tab.is-active {
  /* The saturated fill sits inside the control. That is the whole rule. */
  background: var(--brand-fill);
  color: var(--ink-on-brand, #fff);
  box-shadow: var(--shadow-brand, 0 2px 10px rgba(29, 158, 117, .28));
}
.calc__tab:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.calc__count {
  font-family: var(--font-mono);
  font-size: .82em;
  opacity: .75;
  margin-inline-start: var(--space-2);
}

/* --- the shape / element rail ------------------------------------------- */

.calc__rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.calc__rail .pill { font-size: var(--fs-small); }

/* --- the working area --------------------------------------------------- */

.calc__work {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .calc__work { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .calc__work--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.calc__panel {
  padding: var(--space-5);
  border-radius: var(--r-xl);
  min-inline-size: 0;
}
.calc__panel > * + * { margin-block-start: var(--space-4); }

.calc__h {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  margin: 0;
}
.calc__sub {
  font-size: var(--fs-caption);
  color: var(--ink-3);
  margin-block-start: calc(var(--space-1) * -1);
}

/* --- fields ------------------------------------------------------------- */

.calc__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.calcfield { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }
.calcfield--tight { gap: 2px; }

.calcfield__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  line-height: var(--lh-ui);
}
.calcfield__unit {
  font-family: var(--font-mono);
  font-size: .92em;
  color: var(--ink-3);
  unicode-bidi: isolate;
}
.calcfield__hint { font-size: var(--fs-caption); color: var(--ink-3); }
.calcfield .input, .calcfield .select { inline-size: 100%; }
.calcfield input[type="checkbox"] { inline-size: 1.15rem; block-size: 1.15rem; accent-color: var(--brand); }

.calc__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

/* --- the figure --------------------------------------------------------- */

.calc__figwrap {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  border-radius: var(--r-lg);
  background: var(--surface-sunken, rgba(255, 255, 255, .5));
  border: 1px solid var(--line-soft);
  overflow: hidden;
  min-block-size: 12rem;
}
/* Faint construction geometry, behind the glass, under 8% ink. */
.calc__figwrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--guide) 1px, transparent 1px),
    linear-gradient(to bottom, var(--guide) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .55;
  pointer-events: none;
}
.calc__figwrap > * { position: relative; }

.calcfig { inline-size: 100%; max-inline-size: 22rem; block-size: auto; }
.calcfig text { font-family: var(--font-mono); fill: var(--ink-3); }

/* --- results ------------------------------------------------------------ */

.calc__out {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
}

.calcstat {
  padding: var(--space-4);
  border-radius: var(--r-lg);
  background: var(--surface, rgba(255, 255, 255, .62));
  border: 1px solid var(--line-soft);
  min-inline-size: 0;
}
.calcstat--lead { border-color: var(--brand-soft-line, rgba(29, 158, 117, .3)); }

.calcstat__label {
  display: block;
  font-size: var(--fs-caption);
  color: var(--ink-3);
  line-height: var(--lh-ui);
}
.calcstat__value {
  display: block;
  margin-block-start: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  letter-spacing: var(--ls-display);
  overflow-wrap: anywhere;
}
.calcstat--lead .calcstat__value { color: var(--brand-text, var(--brand)); }
.calcstat__value .u {
  font-family: var(--font-mono);
  font-size: .5em;
  font-weight: var(--fw-medium);
  color: var(--ink-3);
  margin-inline-start: .25em;
  unicode-bidi: isolate;
}

/* --- the utilisation bar: saturated fill inside the control ------------- */

.util { display: grid; gap: var(--space-2); }
.util__bar {
  block-size: .55rem;
  border-radius: var(--r-pill);
  background: var(--surface-sunken, rgba(0, 0, 0, .06));
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.util__fill {
  block-size: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand-2, #5DCAA5), var(--brand));
  transition: inline-size var(--dur-2) var(--ease-out);
}
.util__fill--over { background: linear-gradient(90deg, #F0A868, var(--danger, #C6412F)); }
[dir="rtl"] .util__fill { background: linear-gradient(270deg, var(--brand-2, #5DCAA5), var(--brand)); }
[dir="rtl"] .util__fill--over { background: linear-gradient(270deg, #F0A868, var(--danger, #C6412F)); }

/* --- tables ------------------------------------------------------------- */

.calc__table { inline-size: 100%; }
/* Below the tablet breakpoint a schedule is wider than any phone, so it gets a
   sensible minimum and scrolls horizontally inside its wrapper rather than
   compressing every column into two characters. */
@media (max-width: 700px) {
  .calc__table { min-inline-size: 34rem; }
  .calc__panel { padding: var(--space-4); }
}
.calc__table td.num, .calc__table th.num { text-align: end; font-variant-numeric: tabular-nums; }
.calc__table .mono { font-family: var(--font-mono); }
.calc__table tfoot td {
  font-weight: var(--fw-semibold);
  border-block-start: 2px solid var(--line);
  background: var(--brand-soft, rgba(29, 158, 117, .06));
}

.rowdel {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-3);
  inline-size: 1.6rem;
  block-size: 1.6rem;
  border-radius: var(--r-sm);
  line-height: 1;
  cursor: pointer;
  font-size: 1rem;
}
.rowdel:hover { color: var(--danger, #C6412F); border-color: currentColor; }
.rowdel:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.calc__empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--fs-small);
}

/* --- actions ------------------------------------------------------------ */

.calc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.calc__actions .btn { font-size: var(--fs-small); }

/* --- assumptions and notes --------------------------------------------- */

.calc__assume {
  font-size: var(--fs-caption);
  color: var(--ink-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  border: 1px dashed var(--line);
  background: var(--surface-sunken, rgba(255, 255, 255, .4));
}
.calc__assume dt { font-weight: var(--fw-semibold); color: var(--ink); }
.calc__assume dd { margin: 0 0 var(--space-2); }
.calc__assume dd:last-child { margin-block-end: 0; }

.uncited {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: var(--fs-caption);
  color: var(--warn, #9A6B1F);
}

/* ------------------------------------------------------------ verification */

.verify { display: grid; gap: var(--space-5); }

.verify__summary {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
}
.verify__summary p { margin: 0; }
.verify__summary p + p { margin-block-start: var(--space-1); }
.verify__summary.is-ok { background: var(--ok-soft, rgba(29, 158, 117, .08)); border-color: var(--brand-soft-line, rgba(29, 158, 117, .3)); }
.verify__summary.is-fail { background: var(--danger-soft, rgba(198, 65, 47, .08)); border-color: rgba(198, 65, 47, .35); }

.verify__case {
  padding: var(--space-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: var(--surface, rgba(255, 255, 255, .55));
}
.verify__case--advisory { border-style: dashed; }
.verify__case h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  margin: 0 0 var(--space-2);
}
.verify__src { font-size: var(--fs-caption); color: var(--ink-2); margin: 0 0 var(--space-2); }
.verify__src a { color: var(--brand-text, var(--brand)); }
.verify__given {
  font-size: var(--fs-small);
  color: var(--ink-2);
  max-inline-size: var(--measure);
  margin: 0 0 var(--space-4);
}
.verify__table td, .verify__table th { font-size: var(--fs-caption); }

/* ------------------------------------------------------------- references */

.refs { display: grid; gap: var(--space-4); }
.refs__item {
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--brand-soft-line, rgba(29, 158, 117, .35));
}
.refs__item h3 {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-1);
}
.refs__item p { margin: 0; font-size: var(--fs-caption); color: var(--ink-2); }
.refs__item a { color: var(--brand-text, var(--brand)); overflow-wrap: anywhere; }

.formulas { display: grid; gap: var(--space-3); }
.formula {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  background: var(--surface-sunken, rgba(255, 255, 255, .45));
  border: 1px solid var(--line-soft);
}
.formula__eq {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--ink);
  direction: ltr;
  unicode-bidi: isolate;
  overflow-x: auto;
}
.formula__note { font-size: var(--fs-caption); color: var(--ink-2); margin: 0; }

/* --------------------------------------------------------------- no-script */

.calc__noscript {
  padding: var(--space-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--warn-soft, rgba(240, 168, 104, .12));
}
.js .calc__noscript { display: none; }

/* ------------------------------------------------------------------- print */

@media print {
  .calc__tabs, .calc__rail, .calc__actions, .rowdel { display: none !important; }
  [data-panel] { display: block !important; }
  .calc__panel, .verify__case { border: 1px solid #ccc; background: #fff; }
}

/* =====================================================================
   SESSION 7 COMPONENTS
   Four calculators added a handful of things the earlier four did not
   need. They live here rather than inside a tool file, because the rule
   is that a tool carries inputs, labels and layout and nothing else —
   and because the eightieth calculator should be able to reach for a
   yes/maybe/no picker without inventing one.
   ===================================================================== */

/* A row that is still shown but no longer counts: a layer outside a
   well-ventilated cavity, a cost line switched off. Muted rather than
   hidden, so the reader can see what was disregarded and why. */
/* 17C: a muted (ignored) layer keeps AA contrast; the badge says why. */
.is-muted > td { background: var(--surface-sunken); color: var(--ink-2); }

/* The one row a table is drawing the reader's eye to — the governing load
   combination, the lightest passing section. */
.is-gov > td {
  background: var(--brand-wash, rgba(29, 158, 117, .07));
  font-weight: 600;
}

/* A number field narrow enough to sit inside a table cell. */
.input--mini {
  inline-size: 5.5em;
  min-inline-size: 0;
  display: inline-block;
  padding-block: .35em;
}

/* ------------------------------------------------------------- LEED tree */

.leedcat { margin-block-end: var(--space-6); }

.leedcat__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-3);
  font-size: var(--fs-h5, 1.05rem);
  font-weight: 600;
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--line-soft);
}

.leedcat__n {
  font-size: var(--fs-caption);
  color: var(--ink-2, #5C6B65);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.leedrow--prereq > td { background: var(--surface-2, rgba(0, 0, 0, .022)); }

/* The yes / maybe / no picker. Three real buttons, so it is reachable
   from the keyboard and announces its pressed state; the colour lives
   inside the control, which is what the design direction asks for. */
.leedpick {
  display: inline-flex;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill, 999px);
  overflow: hidden;
  background: var(--surface, rgba(255, 255, 255, .62));
}

.leedpick__b {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2, #5C6B65);
  font: inherit;
  font-size: var(--fs-caption);
  padding: .32em .8em;
  cursor: pointer;
  transition: background var(--dur-2, .18s) ease, color var(--dur-2, .18s) ease;
}
.leedpick__b + .leedpick__b { border-inline-start: 1px solid var(--line-soft); }
.leedpick__b:hover { background: var(--surface-2, rgba(0, 0, 0, .04)); }
.leedpick__b:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.leedpick__b.is-y { background: var(--brand, #1D9E75); color: #fff; }
.leedpick__b.is-m { background: var(--gold, #E9C46A); color: #3A2E12; }
.leedpick__b.is-n { background: var(--surface-3, rgba(0, 0, 0, .07)); color: var(--ink-2, #5C6B65); }

.leedopts { margin-block-start: .35em; }
.leedopts > summary {
  cursor: pointer;
  font-size: var(--fs-caption);
  color: var(--brand-text, var(--brand, #1D9E75));   /* AA on the light ground (17C) */
}
.leedopts ul {
  margin: .4em 0 0;
  padding-inline-start: 1.2em;
  font-size: var(--fs-caption);
  color: var(--ink-2, #5C6B65);
}
.leedopts li { margin-block-end: .25em; }

/* ==========================================================================
   SESSION 9 — THE CALCULATOR AS A LANDING PAGE

   A tool page now has to work for somebody who has never heard of BIMLEED and
   arrived from a search: the method above the calculator, a published worked
   example and the questions engineers ask below it, and one link to the
   discipline that does this work. All four are the site's existing materials —
   no new component, no new colour.
   ========================================================================== */

.toolintro {
  max-inline-size: var(--measure);
  margin-block-end: var(--space-7);
  display: grid;
  gap: var(--space-3);
}
.toolintro .lede { margin: 0; }
.toolintro__std { margin: 0; }

/* SESSION 17K. The opening paragraph keeps its reading measure; the rest of
   the row carries a card of what the tool hands back and the standards it
   works to. Below 64rem the card follows the paragraph. */
.toolintro--split {
  max-inline-size: none;
  gap: var(--space-5);
  align-items: start;
}
.toolintro--split .lede { max-inline-size: var(--measure); }
@media (min-width: 64rem) {
  .toolintro--split {
    grid-template-columns: minmax(0, var(--measure)) minmax(20rem, 1fr);
    column-gap: clamp(2.5rem, 1rem + 3vw, 5rem);
  }
}
.toolbrief {
  --glass-radius: var(--r-lg);
  padding: clamp(1.1rem, 0.85rem + 0.9vw, 1.75rem);
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
.toolbrief__h {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.3;
}
.toolbrief__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.toolbrief__list li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: start;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.toolbrief__tick {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: 0.1em;
  color: var(--brand-text);
}
.toolbrief__std {
  margin: 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-2);
}
.toolbrief__list + .toolbrief__std { margin-block-start: var(--space-1); }
.toolbrief__h + .toolbrief__std,
.toolbrief__std:first-child { padding-block-start: 0; border-block-start: 0; }
.toolbrief__k {
  display: block;
  margin-block-end: var(--space-1);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}
.toolbrief__s { white-space: nowrap; }
@media (max-width: 23.99rem) { .toolbrief__s { white-space: normal; } }
@media print {
  .toolbrief { display: none; }
}

/* The worked example. Deliberately quiet: it is evidence, not a feature. */
.workedeg {
  --glass-radius: var(--r-lg);
  padding: clamp(1.25rem, 1rem + 1.1vw, 2rem);
  display: grid;
  gap: var(--space-4);
}
.workedeg h3 { font-size: var(--fs-h5); margin: 0; }
.workedeg p { margin: 0; max-inline-size: var(--measure); }
.workedeg__src a { color: var(--brand-text, var(--brand)); }
.workedeg .table { margin: 0; }

/* Questions and answers. <details> so the page is short and every answer is
   still in the HTML for a crawler — an accordion that hides its content from
   the document would defeat the whole point of writing them. */
.qa { display: grid; gap: var(--space-3); }
.qa__item {
  --glass-radius: var(--r-md);
  padding: var(--space-4) var(--space-5);
}
.qa__q {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold, 600);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q::after {
  content: "+";
  margin-inline-start: auto;
  color: var(--brand);
  font-family: var(--font-mono);
  transition: transform .2s ease;
  flex: 0 0 auto;
}
.qa__item[open] .qa__q::after { content: "−"; }
.qa__a { margin-block-start: var(--space-3); }
.qa__a p { margin: 0; color: var(--ink-2); max-inline-size: var(--measure); }

/* The one block on a tool page that sells anything. */
.toolsell {
  --glass-radius: var(--r-xl);
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
}
.toolsell > :first-child { flex: 1 1 26rem; display: grid; gap: var(--space-2); }
.toolsell__eyebrow {
  margin: 0;
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}
.toolsell__h { font-size: var(--fs-h4); margin: 0; }
.toolsell p { margin: 0; max-inline-size: var(--measure); }
.toolsell__act { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* 17C: the unit inside the lead figure's label sits on the tinted lead card,
   where --ink-3 falls under 4.5:1. */
.calcstat--lead .calcstat__label .calcfield__unit { color: var(--ink-2); }

/* ==========================================================================
   SESSION 17C, SECOND PASS — THE PRACTICAL CALCULATOR AND THE ANALYSIS VIEW
   Shared by every tool: the workbench layout (inputs beside a result column
   that stays in view), the result card, the toolbar, the "more" block, the
   utilisation bar in a cell, the marked invalid field, and the FE contour.
   ========================================================================== */

/* --- the workbench: inputs | results, the result column stays in view ---- */
.calc__bench {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: start;
}
.calc__bench > * { min-inline-size: 0; }
@media (min-width: 1080px) {
  .calc__bench { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
  .calc__bench--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .calc__stick {
    position: sticky;
    inset-block-start: 5.75rem;
    max-block-size: calc(100vh - 6.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
.calc__col { display: grid; gap: var(--space-5); min-inline-size: 0; }
.calc__col > * { min-inline-size: 0; }

/* --- the toolbar: presets, reset, copy link ------------------------------ */
.calcbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.calcbar__preset {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--ink-2);
  min-inline-size: 0;
  flex: 1 1 16rem;
}
.calcbar__preset .select { flex: 1 1 0; inline-size: auto; min-inline-size: 0; max-inline-size: 26rem; }
.calcbar, .calcsum, .femap { min-inline-size: 0; }
.calcbar__plabel { white-space: nowrap; font-weight: var(--fw-medium); }
.calcbar__acts { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.calcbar__btn { display: inline-flex; align-items: center; gap: .4em; }
.calcbar__btn svg { inline-size: 1.05em; block-size: 1.05em; flex: none; }
.calcbar__btn.is-done { color: var(--ok-text); border-color: currentColor; }

/* --- the result card ----------------------------------------------------- */
.calcsum {
  --sum-tone: var(--brand-text, var(--brand));
  --sum-soft: var(--brand-soft, rgba(29, 158, 117, .08));
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-lg);
  background: var(--surface, #fff);
  border: 1px solid var(--line-soft);
  border-inline-start: 4px solid var(--sum-tone);
  box-shadow: var(--shadow-1);
}
.calcsum--ok   { --sum-tone: var(--ok-text);  --sum-soft: var(--ok-soft); }
.calcsum--warn { --sum-tone: var(--warn);     --sum-soft: var(--warn-soft); }
.calcsum--fail { --sum-tone: var(--danger);   --sum-soft: var(--danger-soft); }
.calcsum--info, .calcsum--idle { --sum-tone: var(--ink-2); --sum-soft: var(--surface-sunken); }
.calcsum__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}
.calcsum__verdict {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .3em .8em .3em .55em;
  border-radius: var(--r-pill);
  background: var(--sum-soft);
  color: var(--sum-tone);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
}
.calcsum__verdict svg { inline-size: 1.25em; block-size: 1.25em; flex: none; }
.calcsum__lead { display: grid; justify-items: end; gap: 2px; text-align: end; }
.calcsum__llabel { font-size: var(--fs-caption); color: var(--ink-2); }
.calcsum__lvalue {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--sum-tone);
}
.calcsum__lvalue .u, .calcsum__items .u {
  font-family: var(--font-mono);
  font-size: .5em;
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  margin-inline-start: .3em;
}
.calcsum__items .u { font-size: .85em; }
.calcsum__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.calcsum__items > div { min-inline-size: 0; }
.calcsum__items dt { font-size: var(--fs-caption); color: var(--ink-2); line-height: var(--lh-ui); }
.calcsum__items dd {
  margin: 0;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.calcsum__items .is-fail dd { color: var(--danger); }
.calcsum__items .is-warn dd { color: var(--warn); }
.calcsum__items .is-ok dd { color: var(--ok-text); }
.calcsum__note { margin: 0; font-size: var(--fs-caption); color: var(--ink-2); }

/* --- the utilisation bar in a cell, and the big one in the card ---------- */
.ubar {
  display: inline-block;
  vertical-align: middle;
  inline-size: 4.5rem;
  block-size: .45rem;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.ubar > span { display: block; block-size: 100%; border-radius: inherit; background: var(--ok); }
.ubar--near > span { background: #D99A1E; }
.ubar--over > span { background: var(--danger); }
.ubar--big { display: block; inline-size: 100%; block-size: .6rem; }
.calc__table td .ubar { margin-inline-start: var(--space-2); }

/* --- the field that was refused ------------------------------------------ */
.calcfield.is-invalid .input,
.calcfield.is-invalid .select { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.calcfield.is-invalid .calcfield__label { color: var(--danger); }

/* --- "more": intermediate values and options behind one click ----------- */
.calc__more { border-block-start: 1px solid var(--line-soft); padding-block-start: var(--space-3); }
.calc__more > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--brand-text, var(--brand));
}
.calc__more > summary::-webkit-details-marker { display: none; }
.calc__more > summary::before {
  content: "";
  inline-size: .45em;
  block-size: .45em;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-1) var(--ease-out);
}
[dir="rtl"] .calc__more > summary::before { transform: rotate(135deg); }
.calc__more[open] > summary::before { transform: rotate(45deg); }
.calc__more > summary:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: 4px; }
.calc__more > * + * { margin-block-start: var(--space-3); }

/* --- the analysis view: FE contour, legend, read-out --------------------- */
.femap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
  border: 1px solid var(--line-soft);
  color: var(--ink);
}
.femap__stage { position: relative; min-inline-size: 0; }
.femap__cv { display: block; inline-size: 100%; border-radius: var(--r-md); touch-action: pan-y; cursor: crosshair; }
.femap__tip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(16, 24, 21, .9);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}
.femap__side { min-inline-size: 5.5rem; }
.femap__ltitle {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--ink-2);
  max-inline-size: 8rem;
  line-height: var(--lh-ui);
}
.femap__scale { list-style: none; margin: 0; padding: 0; display: grid; }
.femap__scale li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  block-size: 1.05rem;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
}
.femap__scale i { inline-size: 1rem; block-size: 100%; flex: none; }
.femap__scale li:first-child i { border-start-start-radius: 3px; border-start-end-radius: 3px; }
.femap__scale li:nth-last-child(2) i { border-end-start-radius: 3px; border-end-end-radius: 3px; }
.femap__scale span { transform: translateY(-.5em); line-height: 1; white-space: nowrap; }
.femap__scale .femap__floor { block-size: .6rem; }
.femap__scale .femap__floor i { background: transparent; }
.femap__cap {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--ink-2);
}
@media (max-width: 560px) {
  /* On a phone the scale lies under the plot, lowest band on the left. */
  .femap { grid-template-columns: 1fr; }
  .femap__side { min-inline-size: 0; }
  .femap__ltitle { max-inline-size: none; }
  .femap__scale { display: flex; flex-direction: row-reverse; }
  .femap__scale li { flex: 1 1 0; min-inline-size: 0; flex-direction: column; block-size: auto; gap: 3px; font-size: 9.5px; }
  .femap__scale .femap__floor { flex: 0 0 1.4rem; }
  .femap__scale i { inline-size: 100%; block-size: .7rem; border-radius: 0 !important; }
  .femap__scale span { align-self: flex-end; transform: translateX(50%); }
  .femap__scale li:nth-child(even) span { visibility: hidden; }
}
/* A view switch above a plot (stress / displacement, M / V / δ …). */
.femap-views { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.femap-views .pill { font-size: var(--fs-caption); }
.femap-opts { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; font-size: var(--fs-caption); color: var(--ink-2); }
.femap-opts label { display: inline-flex; align-items: center; gap: .4em; }
.femap-opts input[type="checkbox"] { accent-color: var(--brand); }
.femap-opts input[type="range"] { accent-color: var(--brand); inline-size: 8rem; }
@media print {
  .calcbar, .femap-opts { display: none; }
  .calc__stick { position: static; max-block-size: none; overflow: visible; }
  .femap { break-inside: avoid; }
}
/* A heading that follows content inside a panel gets the section's air. */
.calc__panel > * + .calc__h { margin-block-start: var(--space-5); }
/* A unit after a number in a result cell. */
.calc__table td .u { margin-inline-start: .3em; color: var(--ink-2); font-size: .85em; }
/* The governing row of a checks table. */
.calc__table tr.is-gov > td { background: var(--brand-soft, rgba(29, 158, 117, .07)); }
.calc__table tr.is-gov > td:first-child { font-weight: var(--fw-semibold); box-shadow: inset 3px 0 0 var(--brand); }
[dir="rtl"] .calc__table tr.is-gov > td:first-child { box-shadow: inset -3px 0 0 var(--brand); }

/* ==========================================================================
   SESSION 17C, SECOND PASS — PER-TOOL ADDITIONS (appended at integration)
   ========================================================================== */

/* ==========================================================================
   LIFTING LUG (lg-) — session 17C, second pass: the workbench and the FE view
   ========================================================================== */
#lg-tools { margin-block: var(--space-3) var(--space-4); }
.lg-bench { margin-block-end: var(--space-5); }
.lg-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  align-self: end;
  min-block-size: 2.5rem;
}
.lg-check input[type="checkbox"] { inline-size: 1.05rem; block-size: 1.05rem; flex: none; accent-color: var(--brand); margin: 0; }
.lg-check .calcfield__label { margin: 0; }
.lg-sketch { max-inline-size: 22rem; }
.lg-fepanel > * + * { margin-block-start: var(--space-3); }
.lg-fepanel .femap-opts output { font-family: var(--font-mono); min-inline-size: 3.5rem; display: inline-block; }
.lg-table td.lg-u { white-space: nowrap; }
#lg-sum { min-inline-size: 0; }
@media (max-width: 560px) {
  .lg-fepanel .femap-opts input[type="range"] { inline-size: 6rem; }
  .lg-table td.lg-u .ubar { display: none; }
}

/* ==========================================================================
   COLD-FORMED STEEL (cf-) — session 17C, second pass: the workbench, the
   member view along the span and the effective-section stress view
   ========================================================================== */
#cf-tools { margin-block: var(--space-3) var(--space-4); }
.cf-bench { margin-block-end: var(--space-5); }
.cf-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  align-self: end;
  min-block-size: 2.5rem;
}
.cf-check input[type="checkbox"] { inline-size: 1.05rem; block-size: 1.05rem; flex: none; accent-color: var(--brand); margin: 0; }
.cf-check .calcfield__label { margin: 0; }
.cf-an > * + * { margin-block-start: var(--space-3); }
.cf-an .cf-sech { margin-block-start: var(--space-4); font-size: var(--fs-body); }
.cf-props td { padding-block: var(--space-1); }
.cf-checks td.num { white-space: nowrap; }
#cf-sum, #cf-fe, #cf-fesec { min-inline-size: 0; }
@media (max-width: 560px) {
  .cf-checks td.num .ubar { display: none; }
}

/* ===== section-properties-calculator (sp-) — session 17C, phase 2 ===== */
.sp-fepanel { display: grid; gap: var(--space-3); }
.sp-fepanel .calc__h { margin-block-end: 0; }
.sp-fepanel .calc__assume { margin: 0; }
#sp-fe[hidden], #sp-views[hidden] { display: none; }
/* the geometry view has no colour scale: the legend column goes */
.sp-fe--geo.femap { grid-template-columns: minmax(0, 1fr); }
.sp-fe--geo .femap__side { display: none; }
#sp-invalid { margin: 0; }
#sp-inter td:last-child { white-space: normal; }
/* On a phone the shared legend lies in a row; its labels must not hold the
   row wider than the plot (12 labels of "-154.6" do). */
@media (max-width: 560px) {
  .sp-fepanel .femap__scale li { min-inline-size: 0; }
}

/* ==========================================================================
   concrete-calculator (cc-) and u-value-calculator (uv-) — session 17C pass 2
   ========================================================================== */

/* --- concrete: the mix proportion bar and the compact key table ---------- */
.cc-mixbar { display: grid; gap: var(--space-2); }
.cc-mixbar__svg { display: block; inline-size: 100%; block-size: 46px; border-radius: var(--r-md); overflow: hidden; }
.cc-mixbar__key {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin: 0; padding: 0; list-style: none;
  font-size: var(--fs-caption); color: var(--ink-2);
}
.cc-mixbar__key li { display: inline-flex; align-items: center; gap: .4em; }
.cc-mixbar__key i {
  display: inline-block; inline-size: .8rem; block-size: .8rem; border-radius: 3px;
  border: 1px solid var(--line-strong);
}
.cc-mixbar .calc__assume { margin: 0; }
.cc-keytable td:first-child { color: var(--ink-2); }
.cc-keytable td.num { white-space: nowrap; }
.cc-mixfield { grid-column: 1 / -1; }
.cc-check { flex-direction: row; align-items: center; gap: .5rem; align-self: end; }
.cc-subh { font-size: var(--fs-small); margin-block-start: var(--space-3); }
.cc-figwrap svg { max-block-size: 150px; }
.cc-respanel .calc__actions { margin-block-start: var(--space-2); }

/* --- u-value: the workbench, the layer table, the key table ------------- */
.uv-lib { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.uv-libbtn { align-self: end; }
.uv-layers .input, .uv-layers .select { min-inline-size: 0; }
@media (min-width: 1080px) {
  /* The build-up table is the main input: give the inputs the wider half. */
  .uv-bench { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); }
}
.uv-layers { font-size: var(--fs-small); }
.uv-layers th, .uv-layers td { padding-inline: .3rem; }
.uv-layers td:nth-child(4) { max-inline-size: 6rem; }
.calc__table.uv-layers thead th { white-space: normal; vertical-align: bottom; line-height: 1.25; letter-spacing: .01em; font-size: .7rem; }
.uv-layers th .calcfield__unit { display: block; }
.uv-layers td .mono { white-space: normal; }
.uv-layers td:nth-child(2) .select { min-inline-size: 9.5rem; inline-size: 100%; }
.uv-layers td:nth-child(3) .input { inline-size: 4.6rem; }
.uv-layers td:nth-child(4) .input { inline-size: 4.6rem; }
.uv-layers .rowdel { padding-inline: .25rem; }
.uv-layers td:nth-child(5) .select { min-inline-size: 7.5rem; }
.uv-layers td:nth-child(5) .input { inline-size: 5rem; }
.uv-layers .uncited, .uv-layers .badge { display: inline-block; margin-block-start: 2px; }
.uv-layers input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.uv-keytable td:first-child { color: var(--ink-2); }
.uv-keytable td.num { white-space: nowrap; }
.uv-verdictcell { font-weight: var(--fw-semibold); }
.uv-subh { font-size: var(--fs-small); }
.uv-fepanel .femap { margin-block-start: var(--space-2); }

/* The two-column key tables and the interface table read fine on a phone:
   they do not take the schedule's 34rem minimum. */
@media (max-width: 700px) {
  .calc__table.cc-keytable, .calc__table.uv-keytable, .calc__table.uv-temps { min-inline-size: 0; }
  .cc-keytable td, .uv-keytable td { padding-inline: .5rem; }
}

/* ==========================================================================
   STEEL TAKE-OFF (sw-) AND REBAR ESTIMATOR (rb-) — phase 2 workbench
   ========================================================================== */

/* --- shared bits of both tools ------------------------------------------ */
.sw-addrow, .rb-addrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.sw-addrow .btn.is-done, .rb-addrow .btn.is-done { background: var(--ok-text); border-color: var(--ok-text); }
.sw-subh, .rb-subh { font-size: var(--fs-small); margin: 0; }
.sw-check, .rb-check {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-small);
  color: var(--ink);
}
.sw-check input, .rb-check input { accent-color: var(--brand); inline-size: 1.05rem; block-size: 1.05rem; }
.sw-keytable th[scope="row"], .rb-keytable th[scope="row"] {
  font-weight: var(--fw-regular);
  color: var(--ink-2);
  text-align: start;
}
.sw-keytable td, .rb-keytable td { white-space: nowrap; }
/* A two-column key table fits any phone: no schedule minimum width. */
.calc__table.sw-keytable, .calc__table.rb-keytable { min-inline-size: 0; }
/* A drawing is not mirrored in Arabic: its labels keep their places. */
.sw-fig, .rb-fig, .rb-shape { direction: ltr; unicode-bidi: isolate; }
.sw-keytable .u, .rb-keytable .u { margin-inline-start: .3em; color: var(--ink-2); font-size: .85em; }
.sw-fignote, .rb-fignote { margin-block-start: 0; }

/* --- the steel section, to scale --------------------------------------- */
.sw-figwrap { padding-block: var(--space-2); }
.sw-fig { max-inline-size: 24rem; margin-inline: auto; display: block; }
.sw-fig .sw-sec {
  fill: var(--brand-soft, rgba(29, 158, 117, .14));
  stroke: var(--brand, #1D9E75);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.sw-fig .sw-dim { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.sw-fig .sw-dimt { font-size: 11px; fill: var(--ink-2); }
.sw-fig .sw-title { font-size: 12.5px; font-weight: 600; fill: var(--ink); font-family: var(--font-mono); }

/* --- rebar: the element sketch and the bar shapes ------------------------ */
.rb-figwrap { padding-block: var(--space-2); }
.rb-fig { max-inline-size: 24rem; margin-inline: auto; display: block; }
.rb-fig .rb-conc { fill: var(--surface-sunken, #f3f5f4); stroke: var(--ink-3); stroke-width: 1.4; }
.rb-fig .rb-bar { fill: var(--brand, #1D9E75); }
.rb-fig .rb-link { fill: none; stroke: var(--brand, #1D9E75); stroke-width: 1.6; }
.rb-fig .rb-dim { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.rb-fig .rb-dimt { font-size: 11px; fill: var(--ink-2); }
.rb-fig .rb-title { font-size: 12.5px; font-weight: 600; fill: var(--ink); font-family: var(--font-mono); }

.rb-shape { display: block; inline-size: 8.5rem; max-inline-size: 100%; block-size: auto; }
.rb-shape .rb-sbar { fill: none; stroke: var(--brand, #1D9E75); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rb-shape text { font-size: 10px; fill: var(--ink-2); font-family: var(--font-mono); }
.rb-bbs td { vertical-align: middle; }
.rb-bbs .rb-mark { font-weight: var(--fw-semibold); font-family: var(--font-mono); }
.rb-bbs .rb-dims { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-2); white-space: nowrap; }
.rb-bbs tfoot td, .rb-stocktab tfoot td { font-weight: var(--fw-semibold); }
.rb-note { margin: 0; font-size: var(--fs-caption); color: var(--ink-2); }

@media (max-width: 560px) {
  .rb-shape { inline-size: 6.5rem; }
}

/* ==========================================================================
   LEED SCORECARD (ld-) — session 17C, second pass: the workbench, the credit
   list by category, and the scorecard chart
   ========================================================================== */
#ld-tools { margin-block: var(--space-3) var(--space-4); }
.ld-bench { margin-block-end: var(--space-5); }
.ld-sub { margin-block-start: var(--space-5); font-size: var(--fs-h5, 1.05rem); }
.ld-hint { margin-block: 0 var(--space-3); font-size: var(--fs-small); }

/* the checkbox fields: box, then its label, on one line */
.ld-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  align-self: end;
  min-block-size: 2.5rem;
}
.ld-check input[type="checkbox"] { inline-size: 1.05rem; block-size: 1.05rem; flex: none; accent-color: var(--brand); margin: 0; }
.ld-check .calcfield__label { margin: 0; }

/* a category: one collapsible block, its points in the summary line */
#ld-tree .leedcat { margin-block-end: 0; }
#ld-tree .leedcat + .leedcat { margin-block-start: var(--space-2); }
#ld-tree .leedcat > summary {
  display: flex;
  inline-size: 100%;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  color: var(--ink);
  font-weight: var(--fw-semibold, 600);
}
.ld-cat__name { min-inline-size: 0; flex: 1 1 auto; }
.ld-cat__code {
  display: inline-block;
  min-inline-size: 2.2em;
  color: var(--brand-text, var(--brand));
  font-size: var(--fs-caption);
}
#ld-tree .leedcat > summary .leedcat__n { flex: none; }

/* the credit list: name | picker | points, wrapping on a phone */
.ld-list { list-style: none; margin: 0; padding: 0; }
.ld-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--line-soft);
}
.ld-row:last-child { border-block-end: 0; }
.ld-row--pre { grid-template-columns: minmax(0, 1fr) auto; background: var(--surface-2, rgba(0, 0, 0, .022)); padding-inline: var(--space-2); border-radius: var(--r-sm, 6px); }
.ld-row__name { min-inline-size: 0; font-size: var(--fs-small); line-height: var(--lh-ui, 1.35); }
.ld-row__pts { white-space: nowrap; }
.ld-row > .leedpick { justify-self: start; }
.ld-row__pts .input--mini { inline-size: 3.6rem; }
@media (max-width: 560px) {
  .ld-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ld-row__name { grid-column: 1 / -1; }
  .ld-row--pre .ld-row__name { grid-column: 1 / -1; }
}

/* the MPR and gate tables: toggles sit under the text, not beside it */
#ld-mpr .leedopts, #ld-gates .leedopts { display: block; margin-block-start: var(--space-2); }
.ld-mprx { display: block; margin-block-start: var(--space-1, 4px); }

/* the chart */
.ld-fig { margin: 0; }
.ld-fig figcaption { margin-block-start: var(--space-2); }
.ld-chart { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.ld-c-track { fill: var(--surface-sunken, #E7ECEA); }
.ld-c-yes   { fill: var(--brand, #1D9E75); }
.ld-c-may   { fill: var(--gold, #E9C46A); }
.ld-c-txt   { fill: var(--ink, #1F2A26); }
.ld-c-sub   { fill: var(--ink-2, #56645E); }
.ld-c-tickl { stroke: var(--ink, #1F2A26); }
.ld-chart text { font-family: var(--font-sans, inherit); }

.ld-exports { margin: 0; }
.ld-key th { font-weight: var(--fw-medium, 500); color: var(--ink-2); }
.ld-cap { caption-side: top; text-align: start; font-size: var(--fs-caption); color: var(--ink-2); padding-block-end: var(--space-2); }
.ld-full .input { min-inline-size: 9rem; }
.ld-full__cat th, .ld-full__cat td { background: var(--surface-2, rgba(0, 0, 0, .03)); font-weight: var(--fw-semibold, 600); }
#ld-sum { min-inline-size: 0; }

/* ==========================================================================
   LEED INDOOR WATER USE (lw-) — session 17D: the threshold gauge and the
   fixture bars
   ========================================================================== */
.lw-check { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-small); color: var(--ink); line-height: var(--lh-ui); cursor: pointer; }
.lw-check input { accent-color: var(--brand); inline-size: 1.05rem; block-size: 1.05rem; flex: none; margin-block-start: .15rem; }
.lw-act { align-self: end; }
.lw-subh { font-size: var(--fs-small); }
.lw-an > * + * { margin-block-start: var(--space-3); }

.lw-g { padding-block: 1.6rem .2rem; }
.lw-g__track {
  position: relative;
  block-size: .9rem;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--line-soft);
}
.lw-g__fill {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  border-radius: inherit;
  background: var(--ok);
  transition: inline-size var(--dur-2) var(--ease-out);
}
.lw-g__fill--warn { background: #D99A1E; }
.lw-g__fill--fail { background: var(--danger); }
.lw-g__tick {
  position: absolute; inset-block: -.35rem;
  inline-size: 2px; margin-inline-start: -1px;
  background: var(--ink-2);
}
.lw-g__tick b {
  position: absolute; inset-block-end: calc(100% + 2px); inset-inline-start: 50%;
  transform: translateX(-50%);
  min-inline-size: 1.25rem; padding: 0 .3rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.25rem; text-align: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
}
[dir="rtl"] .lw-g__tick b { transform: translateX(50%); }
.lw-g__tick.is-hit b { background: var(--ok-soft); border-color: var(--ok); color: var(--ok-text); }
.lw-g__tick--pre { background: var(--danger); inline-size: 3px; }
.lw-g__scale { position: relative; block-size: 1.2rem; margin-block-start: .35rem; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.lw-g__scale span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
[dir="rtl"] .lw-g__scale span { transform: translateX(50%); }
.lw-g__leg { margin: .4rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: var(--fs-caption); color: var(--ink-2); }
.lw-g__pre { display: inline-block; inline-size: 3px; block-size: .9rem; background: var(--danger); }
.lw-g__pt { display: inline-block; min-inline-size: 1.1rem; padding: 0 .25rem; border-radius: var(--r-pill); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 10px; text-align: center; }

.lw-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.lw-bars li {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
  grid-template-areas: "lbl trk" "lbl val";
  align-items: center;
  column-gap: var(--space-3);
  font-size: var(--fs-caption);
}
.lw-bars__lbl { grid-area: lbl; color: var(--ink); }
.lw-bars__trk { grid-area: trk; position: relative; block-size: .85rem; }
.lw-bars__b, .lw-bars__d { position: absolute; inset-inline-start: 0; border-radius: 3px; }
.lw-bars__b { inset-block: 0; background: var(--surface-sunken); border: 1px solid var(--line); }
.lw-bars__d { inset-block: .18rem; background: var(--brand); }
.lw-bars__val { grid-area: val; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.lw-key { margin: 0; display: flex; align-items: center; gap: .4rem .8rem; flex-wrap: wrap; font-size: var(--fs-caption); color: var(--ink-2); }
.lw-key__b, .lw-key__d { display: inline-block; inline-size: .9rem; block-size: .6rem; border-radius: 2px; }
.lw-key__b { background: var(--surface-sunken); border: 1px solid var(--line); }
.lw-key__d { background: var(--brand); }
@media (max-width: 560px) {
  .lw-bars li { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lbl" "trk" "val"; }
}

/* ==========================================================================
   SESSION 17F — THE 3D VIEW (BLT.scene3d / BLT.acRoom) AND THE ROOM AIR-CONDITIONER TOOL (ac-)
   ========================================================================== */
/* ==========================================================================
   THE 3D VIEW (BLT.scene3d) — session 18, the room air-conditioner tool
   A canvas that turns under the pointer, the heat-gain colour bar under it
   (the same ten FE bands as .femap), a small key, a caption and a one-line
   hint. The scene's own colours are tokens (--s3-*): their LIGHT values
   are the fallbacks written in tool.js (BLT.acRoom), so this block only
   declares the DARK ones — and the printed image, which always uses the
   fallbacks, is light on white whatever the page's theme.
   ========================================================================== */
.scene3d {
  display: grid;
  gap: var(--space-2);
  min-inline-size: 0;
  padding: var(--space-3);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
  border: 1px solid var(--line-soft);
  color: var(--ink);
}
.scene3d > * { min-inline-size: 0; margin: 0; }
.scene3d__stage {
  position: relative;
  min-inline-size: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    radial-gradient(120% 95% at 50% 28%, var(--surface) 0%, var(--surface) 30%, var(--surface-sunken) 100%);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.scene3d__cv {
  display: block;
  inline-size: 100%;
  block-size: 360px;
  touch-action: pan-y;
  cursor: grab;
  border-radius: inherit;
}
.scene3d__cv.is-drag { cursor: grabbing; }
.scene3d__cv:focus { outline: none; }
.scene3d__cv:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.scene3d__reset {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
  display: inline-grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.scene3d__reset svg { inline-size: 1.1rem; block-size: 1.1rem; }
.scene3d__reset:hover { color: var(--brand-text, var(--brand)); border-color: var(--brand-soft-line, var(--line-strong)); }
.scene3d__reset:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.scene3d__tip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(16, 24, 21, .9);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}
.scene3d__hint, .scene3d__cap { font-size: var(--fs-caption); color: var(--ink-2); line-height: var(--lh-ui); }
.scene3d__hint { color: var(--ink-3); }
.scene3d__keys {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-size: var(--fs-caption);
  color: var(--ink-2);
}
.scene3d__key { display: inline-flex; align-items: center; gap: .5em; }
.scene3d__key i { inline-size: .85rem; block-size: .85rem; border-radius: 3px; background: var(--k); flex: none; }
.scene3d__key--flow i { inline-size: 1.4rem; block-size: 0; border-radius: 0; background: none; border-block-start: 2.5px dashed var(--k); }
.scene3d__heat { display: grid; gap: 4px; }
.scene3d__htitle { margin: 0; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--ink-2); line-height: var(--lh-ui); }
.scene3d__bar { display: flex; block-size: .75rem; border-radius: 3px; overflow: hidden; }
.scene3d__bar i { flex: 1 1 0; }
.scene3d__ticks { position: relative; block-size: 1.1em; margin-inline: .6em; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); }
.scene3d__ticks span { position: absolute; inset-block-start: 0; transform: translateX(-50%); white-space: nowrap; line-height: 1; }
.scene3d__sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 560px) {
  .scene3d { padding: var(--space-2); }
  .scene3d__ticks span:nth-child(even) { visibility: hidden; }
  .scene3d__reset { inline-size: 2.5rem; block-size: 2.5rem; }
}
@media print {
  .scene3d__reset, .scene3d__hint { display: none; }
  .scene3d { break-inside: avoid; }
}

/* The scene's dark palette. Same three states as tokens.css: the system
   preference unless the page is explicitly light, then the explicit dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scene3d {
    --s3-ground: #1B2723; --s3-floor: #2C3833; --s3-pad: #46504C; --s3-tile: rgba(0, 0, 0, .28);
    --s3-wall: #46534E; --s3-wall-out: #2A3531; --s3-wall-int: #3E4A46; --s3-poche: #121A17; --s3-reveal: #37433F;
    --s3-roof: #3A4541; --s3-slab: #3A4541; --s3-ceiling: #56625D; --s3-glass: #5B9CC8; --s3-frame: #75807C;
    --s3-door: #8C6B4C; --s3-wood: #97795B; --s3-wood-2: #7A6048; --s3-fabric: #5F7A72; --s3-fabric-2: #4D655E;
    --s3-linen: #BFC4C8; --s3-blanket: #5E7890; --s3-rug: #6D604F; --s3-carpet: #7A3C37; --s3-carpet-2: #8F7445;
    --s3-cushion: #8E6F4B; --s3-cushion-2: #75583A; --s3-screen: #101614; --s3-metal: #8A9591; --s3-gold: #B8953F;
    --s3-person: #7E97A6; --s3-person-b: #978AAA; --s3-person-c: #8AA585; --s3-legs: #3E4852; --s3-skin: #BF9C7E;
    --s3-unit: #E9EEEC; --s3-unit-2: #B7C1BD; --s3-vent: #3B4642; --s3-odu: #C9D0CD; --s3-fan: #2F3835;
    --s3-pipe: #C98552; --s3-duct: #8E9894; --s3-flow: #52A8F5; --s3-return: #F0924F;
  }
}
:root[data-theme="dark"] .scene3d,
[data-theme="dark"] .scene3d {
  --s3-ground: #1B2723; --s3-floor: #2C3833; --s3-pad: #46504C; --s3-tile: rgba(0, 0, 0, .28);
  --s3-wall: #46534E; --s3-wall-out: #2A3531; --s3-wall-int: #3E4A46; --s3-poche: #121A17; --s3-reveal: #37433F;
  --s3-roof: #3A4541; --s3-slab: #3A4541; --s3-ceiling: #56625D; --s3-glass: #5B9CC8; --s3-frame: #75807C;
  --s3-door: #8C6B4C; --s3-wood: #97795B; --s3-wood-2: #7A6048; --s3-fabric: #5F7A72; --s3-fabric-2: #4D655E;
  --s3-linen: #BFC4C8; --s3-blanket: #5E7890; --s3-rug: #6D604F; --s3-carpet: #7A3C37; --s3-carpet-2: #8F7445;
  --s3-cushion: #8E6F4B; --s3-cushion-2: #75583A; --s3-screen: #101614; --s3-metal: #8A9591; --s3-gold: #B8953F;
  --s3-person: #7E97A6; --s3-person-b: #978AAA; --s3-person-c: #8AA585; --s3-legs: #3E4852; --s3-skin: #BF9C7E;
  --s3-unit: #E9EEEC; --s3-unit-2: #B7C1BD; --s3-vent: #3B4642; --s3-odu: #C9D0CD; --s3-fan: #2F3835;
  --s3-pipe: #C98552; --s3-duct: #8E9894; --s3-flow: #52A8F5; --s3-return: #F0924F;
}

/* ==========================================================================
   ROOM AIR-CONDITIONER SIZE (ac-) — session 17E: the wall cards, the unit
   picker and the recommendation, and the hourly stacked-column chart.
   (The 3D view itself is .scene3d, agent A's block.)
   ========================================================================== */
.ac-wide { grid-column: 1 / -1; }
.ac-subh { font-size: var(--fs-small); }
.ac-check { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-small); color: var(--ink); line-height: var(--lh-ui); cursor: pointer; }
.ac-check input { accent-color: var(--brand); inline-size: 1.05rem; block-size: 1.05rem; flex: none; margin-block-start: .15rem; }

/* four wall cards: two a row on a desktop column, one on a phone */
.ac-walls { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.ac-wall {
  margin: 0; min-inline-size: 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
}
.ac-wall__head { padding: 0; margin-block-end: var(--space-2); }
.ac-wall__grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ac-wall__grid .calcfield__label { font-size: 11px; }
.ac-wall__note { margin: var(--space-2) 0 0; }
.ac-wall.is-inner { background: transparent; border-style: dashed; }
.ac-wall.is-inner .ac-wall__grid { opacity: .55; }

/* the unit picker and the recommendation */
.ac-types { gap: var(--space-2); }
.ac-types .pill { font-size: var(--fs-caption); }
.ac-types .pill[disabled] { opacity: .5; cursor: not-allowed; }
.ac-sug {
  display: inline-block; padding: 0 .4rem; border-radius: var(--r-pill);
  border: 1px solid var(--ok); color: var(--ok-text); background: var(--ok-soft);
  font-size: 10px; font-weight: var(--fw-semibold); line-height: 1.5; letter-spacing: .02em;
}
.pill.is-active .ac-sug { background: var(--surface); }
.ac-rec { margin: 0; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--ink); }
.ac-t3v { margin: 0; font-size: var(--fs-small); font-weight: var(--fw-medium); padding: var(--space-2) var(--space-3); border-radius: var(--r-md); }
.ac-t3v.is-ok { color: var(--ok-text); background: var(--ok-soft); }
.ac-t3v.is-fail { color: var(--danger); background: var(--danger-soft); }
.ac-3d { min-inline-size: 0; }

/* the component table: the arithmetic column reads left to right in both languages */
.ac-how { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); white-space: nowrap; }

/* --- the hourly chart ------------------------------------------------------
   Categorical slots in a fixed order (walls, roof, glass solar, glass
   conduction, people, lighting and equipment, outdoor air), validated for
   adjacent CVD separation on this site's light and dark surfaces. Light
   slots under 3:1 are relieved by the legend and the two tables. */
.ac-chart, .ac-legend, .ac-tip {
  --ac-s1: #2a78d6; --ac-s2: #eb6834; --ac-s3: #1baf7a; --ac-s4: #eda100;
  --ac-s5: #e87ba4; --ac-s6: #008300; --ac-s7: #4a3aa7;
  --ac-grid: rgba(22, 33, 29, .09); --ac-base: rgba(22, 33, 29, .28); --ac-pk: rgba(22, 33, 29, .045);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ac-chart, :root:not([data-theme="light"]) .ac-legend, :root:not([data-theme="light"]) .ac-tip {
    --ac-s1: #3987e5; --ac-s2: #d95926; --ac-s3: #199e70; --ac-s4: #c98500;
    --ac-s5: #d55181; --ac-s6: #008300; --ac-s7: #9085e9;
    --ac-grid: rgba(237, 243, 240, .09); --ac-base: rgba(237, 243, 240, .28); --ac-pk: rgba(237, 243, 240, .05);
  }
}
:root[data-theme="dark"] .ac-chart, :root[data-theme="dark"] .ac-legend, :root[data-theme="dark"] .ac-tip {
  --ac-s1: #3987e5; --ac-s2: #d95926; --ac-s3: #199e70; --ac-s4: #c98500;
  --ac-s5: #d55181; --ac-s6: #008300; --ac-s7: #9085e9;
  --ac-grid: rgba(237, 243, 240, .09); --ac-base: rgba(237, 243, 240, .28); --ac-pk: rgba(237, 243, 240, .05);
}
.ac-chart { position: relative; direction: ltr; min-inline-size: 0; }
.ac-ch { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.ac-ch__grid { stroke: var(--ac-grid); stroke-width: 1; }
.ac-ch__base { stroke: var(--ac-base); stroke-width: 1; }
.ac-ch__tick { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-2); }
.ac-ch__pk { fill: var(--ac-pk); }
.ac-ch__pklbl { font-family: var(--font-mono); font-size: 11px; font-weight: 600; fill: var(--ink); }
.ac-ch__hit { fill: transparent; cursor: default; }
.ac-ch__hit.is-on { fill: var(--ac-pk); }
.ac-ch__s1 { fill: var(--ac-s1); background: var(--ac-s1); }
.ac-ch__s2 { fill: var(--ac-s2); background: var(--ac-s2); }
.ac-ch__s3 { fill: var(--ac-s3); background: var(--ac-s3); }
.ac-ch__s4 { fill: var(--ac-s4); background: var(--ac-s4); }
.ac-ch__s5 { fill: var(--ac-s5); background: var(--ac-s5); }
.ac-ch__s6 { fill: var(--ac-s6); background: var(--ac-s6); }
.ac-ch__s7 { fill: var(--ac-s7); background: var(--ac-s7); }
.ac-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: var(--fs-caption); color: var(--ink-2); }
.ac-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.ac-sw { display: inline-block; inline-size: .7rem; block-size: .7rem; border-radius: 2px; flex: none; }
.ac-tip {
  position: absolute; z-index: 2; pointer-events: none;
  min-inline-size: 11rem; padding: .45rem .6rem;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface-raised); color: var(--ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  font-size: 11px; line-height: 1.5;
}
.ac-tip p { margin: 0 0 .2rem; font-weight: 600; }
.ac-tip div { display: flex; align-items: center; gap: .4rem; }
.ac-tip b { margin-inline-start: auto; font-family: var(--font-mono); font-weight: 500; padding-inline-start: .8rem; }
@media (max-width: 30rem) {
  .ac-wall__grid .calcfield__label { font-size: 10.5px; }
}
/* the verdict carries a unit (Btu/h) whose case is part of its meaning */
#ac-sum .calcsum__verdict { text-transform: none; letter-spacing: 0; }
.ac-wall__grid { align-items: end; }
.ac-table td:first-child { min-inline-size: 11rem; }
/* every unit on this page is Latin (°C, m, W/m², Btu/h, L/s): keep "°C" in order in Arabic */
[data-tool="air-conditioner-size-calculator"] .calcfield__unit { direction: ltr; }

/* ---- SESSION 17H: several rooms on one unit — the 3D plan (agent A) ---- */
/* ==========================================================================
   THE 3D PLAN (BLT.acPlan) — several spaces on one ducted unit.
   Two more scene tokens: the corridor's floor (a lighter tone) and the floor
   of a space the unit does not serve (a neutral one). As with the other
   --s3-* tokens, the LIGHT values are the fallbacks written in tool.js;
   this block declares only the DARK ones.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scene3d { --s3-floor-corr: #3A4843; --s3-floor-unc: #484D50; }
}
:root[data-theme="dark"] .scene3d,
[data-theme="dark"] .scene3d { --s3-floor-corr: #3A4843; --s3-floor-unc: #484D50; }

/* ---- SESSION 17H: several rooms on one unit — the page (agent B) ---- */

/* ==========================================================================
   ROOM AIR-CONDITIONER SIZE — SEVERAL ROOMS ON ONE UNIT (ac-, session 17F):
   the mode switch, the plan panel with its flat drawing and space cards, the
   supply air to each room and the room-by-room table. The chart keeps the
   ac-ch visual language; an eighth, neutral slot carries "other rooms".
   ========================================================================== */
.ac-mode { margin: 0; }

/* the palette, where a swatch sits outside the chart */
.ac-plan, .ac-zair, .ac-zt {
  --ac-s1: #2a78d6; --ac-s2: #eb6834; --ac-s3: #1baf7a; --ac-s4: #eda100;
  --ac-s5: #e87ba4; --ac-s6: #008300; --ac-s7: #4a3aa7;
}
.ac-chart, .ac-legend, .ac-tip, .ac-plan, .ac-zair, .ac-zt { --ac-s8: #8a918d; }
.ac-plan {
  --ac-sk-room: #e6f2ec; --ac-sk-corr: #f4f1ec; --ac-sk-unc: #ebe7e0;
  --ac-sk-hatch: rgba(22, 33, 29, .26); --ac-sk-win: #2a78d6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ac-plan, :root:not([data-theme="light"]) .ac-zair, :root:not([data-theme="light"]) .ac-zt {
    --ac-s1: #3987e5; --ac-s2: #d95926; --ac-s3: #199e70; --ac-s4: #c98500;
    --ac-s5: #d55181; --ac-s6: #008300; --ac-s7: #9085e9; --ac-s8: #7d8581;
  }
  :root:not([data-theme="light"]) .ac-chart, :root:not([data-theme="light"]) .ac-legend, :root:not([data-theme="light"]) .ac-tip { --ac-s8: #7d8581; }
  :root:not([data-theme="light"]) .ac-plan {
    --ac-sk-room: rgba(29, 158, 117, .16); --ac-sk-corr: rgba(237, 243, 240, .05); --ac-sk-unc: rgba(237, 243, 240, .03);
    --ac-sk-hatch: rgba(237, 243, 240, .22); --ac-sk-win: #52a8f5;
  }
}
:root[data-theme="dark"] .ac-plan, :root[data-theme="dark"] .ac-zair, :root[data-theme="dark"] .ac-zt {
  --ac-s1: #3987e5; --ac-s2: #d95926; --ac-s3: #199e70; --ac-s4: #c98500;
  --ac-s5: #d55181; --ac-s6: #008300; --ac-s7: #9085e9; --ac-s8: #7d8581;
}
:root[data-theme="dark"] .ac-chart, :root[data-theme="dark"] .ac-legend, :root[data-theme="dark"] .ac-tip { --ac-s8: #7d8581; }
:root[data-theme="dark"] .ac-plan {
  --ac-sk-room: rgba(29, 158, 117, .16); --ac-sk-corr: rgba(237, 243, 240, .05); --ac-sk-unc: rgba(237, 243, 240, .03);
  --ac-sk-hatch: rgba(237, 243, 240, .22); --ac-sk-win: #52a8f5;
}
.ac-ch__s8 { fill: var(--ac-s8); background: var(--ac-s8); }
.ac-sw--off { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-3); }
.ac-muted { color: var(--ink-3); }

/* the flat plan: never mirrored, drawn at the width it is shown at */
.ac-sketch { margin: 0; }
.ac-sketch__svg { direction: ltr; min-inline-size: 0; }
.ac-sketch figcaption { margin-block-start: var(--space-1); }
.ac-sk { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.ac-sk__room, .ac-sk__corr, .ac-sk__unc { stroke: var(--line-strong); }
.ac-sk__room { fill: var(--ac-sk-room); }
.ac-sk__corr { fill: var(--ac-sk-corr); }
.ac-sk__unc { fill: var(--ac-sk-unc); }
.ac-sk__hl { stroke: var(--ac-sk-hatch); }
.ac-sk__ext { stroke: var(--ink-2); }
.ac-sk__win { stroke: var(--ac-sk-win); }
.ac-sk__dim { stroke: var(--ink-3); }
.ac-sk__n { fill: var(--ink); }
.ac-sk__lbl { font-family: var(--font-text); font-size: 11px; font-weight: 600; fill: var(--ink); }
.ac-sk__sub { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-2); }
.ac-sk__sp { cursor: pointer; }
.ac-sk__sp:hover rect:first-child { stroke: var(--brand); stroke-width: 1.5; }

/* the two rows of space cards */
.ac-row > * + * { margin-block-start: var(--space-2); }
.ac-sps { display: grid; gap: var(--space-3); }
.ac-sps__empty { margin: 0; padding: var(--space-3); border: 1px dashed var(--line); border-radius: var(--r-lg); }
.ac-sp {
  display: grid; gap: var(--space-2); min-inline-size: 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
}
.ac-sp.is-unc { background: transparent; border-style: dashed; }
.ac-sp__top { display: flex; align-items: center; gap: var(--space-2); min-inline-size: 0; }
.ac-sp__no {
  flex: none; display: inline-grid; place-items: center;
  inline-size: 1.6rem; block-size: 1.6rem; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink);
}
.ac-sp__sw:not([class*="ac-ch__s"]) { display: none; }
.ac-sp__res {
  flex: 1 1 auto; min-inline-size: 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-sp__acts { flex: none; display: inline-flex; gap: 2px; }
.ac-ib {
  appearance: none; display: inline-grid; place-items: center;
  inline-size: 32px; block-size: 32px; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent; color: var(--ink-2); cursor: pointer;
}
.ac-ib:hover:not([disabled]) { background: var(--surface); border-color: var(--line); color: var(--ink); }
.ac-ib[data-act="del"]:hover:not([disabled]) { color: var(--danger); }
.ac-ib:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.ac-ib[disabled] { opacity: .35; cursor: default; }
.ac-sp .calcfield__label { font-size: 11px; }
.ac-sp__g1 { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.ac-sp__g2 { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); align-items: end; }
.ac-sp__win { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.ac-sp__win > legend { padding: 0; margin-block-end: var(--space-1); }
.ac-sp__wg { display: grid; gap: var(--space-2); grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.ac-sp__out { font-family: var(--font-mono); font-size: 10.5px; white-space: nowrap; }
.ac-sp__side.is-off .input { opacity: .5; }
.ac-sp__side.is-off .ac-sp__out { color: var(--ink-3); font-family: var(--font-text); }
.ac-sp__unc { margin: 0; }
.ac-sp__more > summary {
  cursor: pointer; list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5em;
  font-size: var(--fs-caption); color: var(--ink-2);
}
.ac-sp__more > summary::-webkit-details-marker { display: none; }
.ac-sp__more > summary::before {
  content: ""; inline-size: .42em; block-size: .42em;
  border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--dur-1) var(--ease-out);
}
[dir="rtl"] .ac-sp__more > summary::before { transform: rotate(135deg); }
.ac-sp__more[open] > summary::before { transform: rotate(45deg); }
.ac-sp__more > summary:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: 4px; }
.ac-sp__sum { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.ac-sp__g3 { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: var(--space-2); }
.ac-sp__act { grid-column: 1 / -1; }
@media (max-width: 34rem) {
  .ac-sp { padding: var(--space-2) var(--space-3) var(--space-3); }
  .ac-sp__top { flex-wrap: wrap; row-gap: 0; }
  .ac-sp__acts { margin-inline-start: auto; }
  .ac-sp__res { order: 5; flex-basis: 100%; white-space: normal; }
  .ac-sp__res:empty { display: none; }
  .ac-sp__g1, .ac-sp__g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ac-addbar { align-items: center; }

/* the air to each room, beside the unit */
.ac-zair > * + * { margin-block-start: var(--space-2); }
.ac-zair__list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); }
.ac-zair__list li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-block-end: 1px solid var(--line-soft); }
.ac-zair__list li.is-unit { border-block-end: 0; font-weight: var(--fw-semibold); }
.ac-zair__n { min-inline-size: 0; overflow-wrap: anywhere; }
.ac-zair__list b { margin-inline-start: auto; font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }

/* the room-by-room table */
.ac-zt td:first-child { min-inline-size: 10rem; }
.ac-zt .ac-sw { margin-inline-end: .45rem; vertical-align: -1px; }
.ac-zt tr.is-unc td { color: var(--ink-2); }
.ac-rselbox { max-inline-size: 26rem; }

/* ---- SESSION 17I: rooftop-solar-pv-calculator (agent C) ---- */

/* ---- rooftop-solar-pv-calculator ---- */
/* ==========================================================================
   ROOFTOP SOLAR PV — SIZE AND SAVINGS (pv-): the three sizing modes, the
   twelve months of consumption, the checks beside the result, the monthly
   chart, the roof drawn flat (plan and section, never mirrored), the 3D
   roof's two extra scene tokens and the yield map (a .femap).
   ========================================================================== */
.pv-mode { margin: 0; }
.pv-wide { grid-column: 1 / -1; }
.pv-subh { font-size: var(--fs-small); }
.pv-station { margin: 0; }

/* twelve months: four a row on a desktop column, three on a phone */
.pv-months { margin: 0; padding: var(--space-3); min-inline-size: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-sunken); }
.pv-months > legend { padding: 0 var(--space-1); }
.pv-months__grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-months__grid .calcfield__label { font-size: 11px; }
.pv-months > p { margin: var(--space-2) 0 0; }
@media (max-width: 34rem) { .pv-months__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* the checks beside the result */
.pv-ck { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pv-ck__i {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: var(--space-2) var(--space-3); border-radius: var(--r-md);
  font-size: var(--fs-small); line-height: var(--lh-body);
}
.pv-ck__i svg { inline-size: 1.15rem; block-size: 1.15rem; flex: none; margin-block-start: .1rem; }
.pv-ck__i.is-ok { color: var(--ok-text); background: var(--ok-soft); }
.pv-ck__i.is-warn { color: var(--ink); background: var(--surface-sunken); }
.pv-ck__i.is-fail { color: var(--danger); background: var(--danger-soft); }
#pv-sum .calcsum__verdict { text-transform: none; letter-spacing: 0; }

/* --- the monthly chart: used on site, exported, and the consumption line --- */
.pv-chart, .pv-legend, .pv-tip {
  --pv-used: #1baf7a; --pv-exp: #eda100; --pv-cons: #2a78d6;
  --pv-grid: rgba(22, 33, 29, .09); --pv-base: rgba(22, 33, 29, .28); --pv-on: rgba(22, 33, 29, .045);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pv-chart, :root:not([data-theme="light"]) .pv-legend, :root:not([data-theme="light"]) .pv-tip {
    --pv-used: #199e70; --pv-exp: #c98500; --pv-cons: #52a8f5;
    --pv-grid: rgba(237, 243, 240, .09); --pv-base: rgba(237, 243, 240, .28); --pv-on: rgba(237, 243, 240, .05);
  }
}
:root[data-theme="dark"] .pv-chart, :root[data-theme="dark"] .pv-legend, :root[data-theme="dark"] .pv-tip {
  --pv-used: #199e70; --pv-exp: #c98500; --pv-cons: #52a8f5;
  --pv-grid: rgba(237, 243, 240, .09); --pv-base: rgba(237, 243, 240, .28); --pv-on: rgba(237, 243, 240, .05);
}
.pv-chart { position: relative; direction: ltr; min-inline-size: 0; }
.pv-ch { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.pv-ch__grid { stroke: var(--pv-grid); stroke-width: 1; }
.pv-ch__base { stroke: var(--pv-base); stroke-width: 1; }
.pv-ch__tick { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-2); }
.pv-ch__used { fill: var(--pv-used); }
.pv-ch__exp { fill: var(--pv-exp); }
.pv-ch__cons { stroke: var(--pv-cons); }
.pv-ch__dot { fill: var(--pv-cons); }
.pv-ch__hit { fill: transparent; }
.pv-ch__hit.is-on { fill: var(--pv-on); }
.pv-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: var(--fs-caption); color: var(--ink-2); }
.pv-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.pv-sw { display: inline-block; inline-size: .7rem; block-size: .7rem; border-radius: 2px; flex: none; }
.pv-sw--used { background: var(--pv-used); }
.pv-sw--exp { background: var(--pv-exp); }
.pv-sw--cons { background: var(--pv-cons); border-radius: 50%; }
.pv-tip {
  position: absolute; z-index: 2; pointer-events: none;
  min-inline-size: 12rem; padding: .45rem .6rem;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface-raised); color: var(--ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  font-size: 11px; line-height: 1.5;
}
.pv-tip p { margin: 0 0 .2rem; font-weight: 600; }
.pv-tip div { display: flex; align-items: center; gap: .4rem; }
.pv-tip b { margin-inline-start: auto; font-family: var(--font-mono); font-weight: 500; padding-inline-start: .8rem; }
.pv-mt td:first-child, .pv-ct td:first-child { min-inline-size: 5.5rem; }
/* the row geometry is two columns: it fits a phone, unlike the schedules */
.calc__table.pv-gt { min-inline-size: 0; }
@media (min-width: 34rem) { .pv-gt td:first-child { min-inline-size: 14rem; } }

/* --- the roof drawn flat -------------------------------------------------- */
.pv-fig { margin: 0; display: grid; gap: var(--space-2); }
.pv-plan { direction: ltr; min-inline-size: 0; }
.pv-plan svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.pv-plan, .pv-sec {
  --pv-roof: #efeae3; --pv-mod: #1f3a5f; --pv-spare: #9aa6b2; --pv-sun: #e0a100;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pv-plan { --pv-roof: rgba(237, 243, 240, .06); --pv-mod: #6f9bd6; --pv-spare: #7c8894; --pv-sun: #f2b632; }
}
:root[data-theme="dark"] .pv-plan { --pv-roof: rgba(237, 243, 240, .06); --pv-mod: #6f9bd6; --pv-spare: #7c8894; --pv-sun: #f2b632; }
.pv-pl__roof { fill: var(--pv-roof); stroke: var(--line-strong); }
.pv-pl__edge { stroke: var(--ink-3); }
.pv-pl__mod { fill: var(--pv-mod); }
.pv-pl__spare { fill: none; stroke: var(--pv-spare); stroke-dasharray: 2 2; }
.pv-pl__dim, .pv-se__dim { stroke: var(--ink-3); }
.pv-pl__sun { fill: var(--pv-sun); }
.pv-pl__n, .pv-pl__lbl { fill: var(--ink); }
.pv-pl__lbl { font-family: var(--font-text); font-size: 11px; font-weight: 600; }
.pv-pl__sub { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-2); }
.pv-se__ground { stroke: var(--ink-2); }
.pv-se__leg { stroke: var(--pv-spare); stroke-width: 2; }
.pv-se__mod { stroke: var(--pv-mod); }
.pv-se__ray { stroke: var(--pv-sun); stroke-width: 1.5; }

/* --- the 3D roof and the yield map ------------------------------------------ */
.pv-3d, .pv-map { min-inline-size: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scene3d { --s3-pv: #3a639a; --s3-pv-2: #5a82b8; --s3-shade: #1a1f1d; }
}
:root[data-theme="dark"] .scene3d,
[data-theme="dark"] .scene3d { --s3-pv: #3a639a; --s3-pv-2: #5a82b8; --s3-shade: #1a1f1d; }
/* every unit on this page is Latin (°, m, kWh, kWp, W, A, SAR, %/°C): keep them in order in Arabic */
[data-tool="rooftop-solar-pv-calculator"] .calcfield__unit { direction: ltr; unicode-bidi: isolate; }
/* ---- end rooftop-solar-pv-calculator ---- */

/* ---- SESSION 17I: steel-beam-design-calculator (agent D) ---- */

/* ==========================================================================
   ---- steel-beam-design-calculator ---- (bm-)
   STEEL BEAM DESIGN, AISC 360-16 — the point-load cards, the section drawn
   to scale, the calculation trail and the lighter/heavier sizes table.
   The analysis view is the shared .femap; the checks use .ubar and .is-gov.
   ========================================================================== */
.bm-wide { grid-column: 1 / -1; }
.bm-subh { font-size: var(--fs-small); }
.bm-check { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-small); color: var(--ink); line-height: var(--lh-ui); cursor: pointer; }
.bm-check input { accent-color: var(--brand); inline-size: 1.05rem; block-size: 1.05rem; flex: none; margin-block-start: .15rem; }
.bm-check input:disabled + span { opacity: .55; }

/* two point-load cards: dead, live and position side by side */
.bm-pt {
  margin: 0; min-inline-size: 0;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
}
.bm-pt > legend { padding: 0 var(--space-1); }
.bm-pt__grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.bm-pt__grid .calcfield__label { font-size: 11px; }

/* the verdict names a section and a grade, whose case is part of the name */
#bm-sum .calcsum__verdict { text-transform: none; letter-spacing: 0; }
/* every unit on this page is Latin (kN/m, kN·m, MPa, mm): keep it in order in Arabic */
[data-tool="steel-beam-design-calculator"] .calcfield__unit { direction: ltr; }
.bm-an > * + * { margin-block-start: var(--space-3); }

/* --- the section, drawn to scale ------------------------------------------ */
.bm-sec { --bm-steel: #CFD9D5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bm-sec { --bm-steel: #3C4A45; }
}
:root[data-theme="dark"] .bm-sec { --bm-steel: #3C4A45; }
.bm-sec { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .bm-sec { grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr); align-items: start; }
}
.bm-sec__fig { margin: 0; min-inline-size: 0; }
.bm-sec__svg { color: var(--ink); max-inline-size: 20rem; margin-inline: auto; }
.bm-secsvg { display: block; inline-size: 100%; block-size: auto; max-block-size: 20rem; }
.bm-secsvg__steel { fill: var(--bm-steel); }
.bm-secsvg__axis { stroke: var(--ink-3); fill: none; }
.bm-secsvg__dim { stroke: var(--ink-2); fill: none; }
.bm-secsvg__t { fill: var(--ink); font-family: var(--font-mono); }
.bm-sec__info { min-inline-size: 0; }
.bm-cls { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); font-size: var(--fs-small); line-height: var(--lh-ui); }
.bm-cls li { display: flex; gap: var(--space-2); align-items: baseline; }
.bm-cls .badge { flex: none; }

/* --- the tables ------------------------------------------------------------- */
.bm-full td:first-child, .bm-srch td:nth-child(5) { min-inline-size: 10rem; }
.bm-trail tr.bm-trail__g > th { text-align: start; background: var(--surface-sunken); font-weight: var(--fw-semibold); font-size: var(--fs-small); }
.bm-trail td:first-child { min-inline-size: 9rem; }
.bm-trail__eq { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); min-inline-size: 24rem; }
.bm-use { font-family: var(--font-mono); padding-inline: var(--space-2); white-space: nowrap; }
@media (max-width: 30rem) {
  .bm-pt__grid .calcfield__label { font-size: 10.5px; }
}
.bm-trail td.mono { font-size: 12px; }
.bm-trail__eq { font-size: 12px; }
.bm-use {
  appearance: none; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); cursor: pointer;
  font: inherit; font-family: var(--font-mono); font-size: var(--fs-small);
  padding: .2rem .55rem; white-space: nowrap;
}
.bm-use:hover { border-color: var(--brand); color: var(--brand-text); }
.bm-use:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* the compact checks and the two-column property list fit a phone without scrolling */
@media (max-width: 700px) {
  .calc__table.bm-checks, .calc__table.bm-props { min-inline-size: 0; }
  .bm-checks td .ubar { inline-size: 3rem; }
}

/* ---- SESSION 17J: engineering-unit-converter (agent E) ---- */
/* ---- SESSION 18: engineering-unit-converter (agent E) ---- */
/* ==========================================================================
   THE ENGINEERING UNIT CONVERTER (uc-): the search box, the discipline rail
   and its quantity chips, the value-from-to row with its swap, the gauge /
   absolute switch, the every-unit table with the factor and the source under
   each unit, the notes, the pasted column and the bibliography; and, for the
   frame, the small "Convert units" link every other tool page carries
   (.toolunits). Logical properties throughout, so RTL mirrors by itself;
   numbers and unit symbols are isolated LTR runs.
   ========================================================================== */

/* The blocks of this page stand apart; the frame stacks a tool's blocks flush. */
[data-tool="engineering-unit-converter"] [data-panel="calc"] { display: grid; gap: var(--space-4); }
[data-tool="engineering-unit-converter"] [data-panel="calc"] > * { min-inline-size: 0; }

.uc-sr {
  position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0;
}

/* --- the search: the first thing on the page ---------------------------- */
.uc-find { position: relative; z-index: 20; display: grid; gap: var(--space-2); }
.uc-find > * + * { margin-block-start: 0; }
.uc-find__label { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--ink); }
.glass > .uc-find__box, .uc-find__box { position: relative; z-index: 4; display: flex; align-items: center; }
.uc-find__icon {
  position: absolute; inset-inline-start: .85rem; inline-size: 1.15rem; block-size: 1.15rem;
  color: var(--ink-3); pointer-events: none;
}
.calcfield .uc-find__input, .uc-find__input {
  inline-size: 100%; min-block-size: 3rem; font-size: 1.0625rem;
  padding-inline-start: 2.6rem; padding-inline-end: 2.8rem;
}
.uc-find__input::-webkit-search-cancel-button { cursor: pointer; }
.uc-find__kbd {
  position: absolute; inset-inline-end: .7rem; min-inline-size: 1.4rem; text-align: center;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.4rem; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r-xs, 4px); background: var(--surface-sunken);
  pointer-events: none;
}
.uc-find__list {
  position: absolute; z-index: 30; inset-inline: 0; inset-block-start: calc(100% + 4px);
  margin: 0; padding: var(--space-1); list-style: none;
  max-block-size: min(24rem, 60vh); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface, #fff); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3, 0 12px 32px rgba(0, 0, 0, .14));
}
.uc-find__opt, .uc-find__none {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .15rem var(--space-3);
  padding: .55rem .75rem; border-radius: var(--r-md); cursor: pointer; min-block-size: 44px;
  font-size: var(--fs-small); line-height: var(--lh-ui);
}
.uc-find__none { cursor: default; color: var(--ink-2); }
.uc-find__opt.is-act, .uc-find__opt:hover { background: var(--brand-soft); }
.uc-find__opt.is-act { box-shadow: inset 3px 0 0 var(--brand); }
[dir="rtl"] .uc-find__opt.is-act { box-shadow: inset -3px 0 0 var(--brand); }
.uc-find__main { min-inline-size: 0; color: var(--ink); }
.uc-find__main b { font-family: var(--font-mono); font-weight: var(--fw-semibold); unicode-bidi: isolate; margin-inline-end: .35rem; }
.uc-find__q { font-size: var(--fs-caption); color: var(--ink-2); }

/* --- the discipline rail, the links to the work, the quantity chips ----- */
.uc-disc .pill { min-block-size: 2.5rem; }
.uc-links {
  margin: 0; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--ink-2);
}
.uc-links__k { font-weight: var(--fw-semibold); color: var(--ink); }
.uc-links__k2 { margin-inline-start: var(--space-2); }
.uc-links a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.uc-links a.uc-links__svc { font-weight: var(--fw-semibold); }
.uc-links__dot { color: var(--ink-3); }

.uc-pick { display: grid; gap: var(--space-2); }
.uc-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.uc-chip { font-size: var(--fs-caption); padding: .4rem .8rem; min-block-size: 2.25rem; }
.uc-qsel { max-inline-size: 28rem; }
/* A phone gets the one native list instead of sixteen chips; a desktop with a
   discipline gets the chips. Every quantity is always reachable by one of them. */
.uc-pick:not(.is-all) .uc-qsel { display: none; }
.uc-pick.is-all .uc-qsel { display: flex; }
@media (max-width: 47.99rem) {
  .uc-pick .uc-chips { display: none; }
  .uc-pick:not(.is-all) .uc-qsel { display: flex; max-inline-size: none; }
}

/* Unit symbols are case-sensitive (mm is not MM, a megametre), so nothing that
   carries one is set in capitals here, whatever the house style of a heading. */
.uc-nocaps, .uc-nocaps > span, .uc-btable thead th, .uc-find__opt,
[data-style="civic"] h2.uc-nocaps:lang(en) { text-transform: none; }
.uc-find__input:not(:placeholder-shown) ~ .uc-find__kbd { display: none; }
#uc-kva .uc-wide { grid-column: 1 / -1; }

/* --- the value, from, swap, to -------------------------------------------- */
.uc-io {
  display: grid; gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "v v v" "f s t";
  align-items: end;
}
.uc-io__v { grid-area: v; }
.uc-io__f { grid-area: f; }
.uc-io__t { grid-area: t; }
.uc-swap { grid-area: s; }
.calcfield .uc-v, .uc-v {
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: var(--fw-medium);
  min-block-size: 3.25rem; letter-spacing: var(--ls-mono, 0); direction: ltr; text-align: start;
}
[dir="rtl"] .uc-v { text-align: right; }
.uc-swap {
  inline-size: 2.75rem; block-size: 2.75rem; padding: 0; display: inline-grid; place-items: center;
  border-radius: var(--r-pill); margin-block-end: 1px;
}
.uc-swap svg { inline-size: 1.25rem; block-size: 1.25rem; transform: rotate(90deg); }
@media (max-width: 34rem) {
  .uc-io { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "v v" "f f" "t s"; }
  .uc-swap svg { transform: none; }
}
#uc-vhint { margin: 0; }

/* gauge / absolute: a segmented switch on each side, the reference named */
.uc-ref { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-sunken); display: grid; gap: var(--space-3); min-inline-size: 0; }
.uc-ref > legend { padding: 0 var(--space-1); }
.uc-ref__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.uc-ref__k { font-size: var(--fs-small); color: var(--ink-2); min-inline-size: 8.5rem; }
.uc-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: var(--r-lg); background: var(--surface, #fff); border: 1px solid var(--line); }
.uc-seg label { position: relative; display: inline-flex; }
.uc-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.uc-seg span {
  display: inline-flex; align-items: center; min-block-size: 2.5rem; padding: .35rem .8rem; border-radius: calc(var(--r-lg) - 3px);
  font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--ink-2); cursor: pointer;
}
.uc-seg input:checked + span { background: var(--brand-fill); color: var(--ink-on-brand, #fff); }
.uc-seg input:focus-visible + span { outline: var(--focus-ring); outline-offset: 1px; }
.uc-atm { max-inline-size: 22rem; }

/* --- the result column ------------------------------------------------------ */
.uc-act { margin: calc(var(--space-2) * -1) 0 0; }
.uc-act .btn:disabled, #uc-bcopy:disabled { opacity: .5; cursor: not-allowed; }
.uc-notes { display: grid; gap: var(--space-2); }
.uc-note {
  margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--r-lg);
  font-size: var(--fs-small); line-height: var(--lh-body); color: var(--ink);
  background: var(--info-soft, var(--surface-sunken)); border-inline-start: 3px solid var(--info, var(--ink-3));
}
.uc-note bdi { font-family: var(--font-mono); font-weight: var(--fw-semibold); white-space: nowrap; }
.uc-note__act { margin-block-start: var(--space-2); }
#uc-sum .calcsum__lvalue { font-family: var(--font-mono); letter-spacing: 0; overflow-wrap: anywhere; }
#uc-sum .calcsum__lead { justify-items: end; }
#uc-sum .calcsum__llabel { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-2); overflow-wrap: anywhere; }
#uc-sum .calcsum__items { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
#uc-sum .calcsum__items dd { font-weight: var(--fw-medium); font-size: var(--fs-small); }

/* --- the every-unit table: unit, factor and source | value | copy ------------ */
.calc__table.uc-table, .calc__table.uc-btable { min-inline-size: 0; }
.uc-table { table-layout: auto; }
.uc-table th.uc-u { font-weight: var(--fw-regular); text-align: start; vertical-align: top; min-inline-size: 12rem; }
.uc-u__s { font-family: var(--font-mono); font-weight: var(--fw-semibold); color: var(--ink); unicode-bidi: isolate; margin-inline-end: .35rem; }
.uc-u__n { color: var(--ink-2); font-size: var(--fs-small); }
.uc-u__n--k { color: var(--ink); font-weight: var(--fw-medium); }
.uc-u__f { display: block; margin-block-start: .2rem; font-size: var(--fs-caption); line-height: var(--lh-ui); color: var(--ink-2); }
.uc-u__f .uc-fx { font-family: var(--font-mono); }
.uc-table td.num { vertical-align: top; white-space: nowrap; }
.uc-val { font-family: var(--font-mono); font-size: 1rem; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.uc-table tr.is-to > * { background: var(--brand-soft); }
.uc-table tr.is-to > th:first-child { box-shadow: inset 3px 0 0 var(--brand); }
[dir="rtl"] .uc-table tr.is-to > th:first-child { box-shadow: inset -3px 0 0 var(--brand); }
.uc-table tr.is-to .uc-val { color: var(--brand-text); }
.uc-table tr.is-from .uc-u__s::after { content: " ●"; color: var(--ink-3); font-size: .7em; vertical-align: middle; }
.uc-table tbody tr:last-child th { border-block-end: 0; }
.uc-table tbody tr:hover th { background-color: var(--line-soft); }
.uc-cpc { inline-size: 1%; white-space: nowrap; vertical-align: top; }
.uc-copy {
  display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface, #fff); color: var(--ink-2); cursor: pointer;
}
.uc-copy:hover { color: var(--brand-text); border-color: var(--brand-soft-line, var(--line-strong)); }
.uc-copy:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.uc-copy svg { inline-size: 1.05rem; block-size: 1.05rem; }
.uc-copy.is-done { color: var(--ok-text); border-color: currentColor; background: var(--ok-soft); }
/* A phone: each unit is a block — its name, factor and source on top, the
   value and its copy button under it — instead of three columns squeezed. The
   table keeps its semantics through explicit ARIA roles in the markup. */
@media (max-width: 34rem) {
  .uc-table, .uc-table tbody { display: block; }
  .uc-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .uc-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-2); border-block-end: 1px solid var(--line-soft); }
  .uc-table tbody tr:last-child { border-block-end: 0; }
  .uc-table tbody th.uc-u { grid-column: 1 / -1; min-inline-size: 0; border: 0; padding-block-end: .25rem; padding-inline: .5rem; }
  .uc-table tbody td { border: 0; padding-inline: .5rem; }
  .uc-table tbody td.num { text-align: start; white-space: nowrap; padding-block: 0 .7rem; overflow-wrap: normal; }
  .uc-table tbody td.uc-cpc { padding-block: 0 .7rem; }
  .uc-val { font-size: 1.05rem; }
  .uc-u__f { overflow-wrap: anywhere; }
  .uc-table tbody tr.is-to { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
  [dir="rtl"] .uc-table tbody tr.is-to { box-shadow: inset -3px 0 0 var(--brand); }
  .uc-table tbody tr.is-to > *, [dir="rtl"] .uc-table tbody tr.is-to > th:first-child { background: transparent; box-shadow: none; }
}

/* --- a pasted column ------------------------------------------------------------- */
.uc-batch > summary, .uc-srcs > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; min-block-size: 2.5rem; }
.uc-batch > summary::-webkit-details-marker, .uc-srcs > summary::-webkit-details-marker { display: none; }
.uc-batch > summary::before, .uc-srcs > summary::before {
  content: ""; inline-size: .5rem; block-size: .5rem; flex: none;
  border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(-45deg);
  transition: transform var(--dur-1, .15s) var(--ease-out, ease);
}
[dir="rtl"] .uc-batch > summary::before, [dir="rtl"] .uc-srcs > summary::before { transform: rotate(135deg); }
.uc-batch[open] > summary::before, .uc-srcs[open] > summary::before { transform: rotate(45deg); }
.uc-batch > summary:focus-visible, .uc-srcs > summary:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: var(--r-sm); }
.uc-batch__grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-block-start: var(--space-4); }
@media (min-width: 48rem) { .uc-batch__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.calcfield .uc-bin, .uc-bin { font-family: var(--font-mono); min-block-size: 12rem; resize: vertical; direction: ltr; text-align: start; }
[dir="rtl"] .uc-bin { text-align: right; }
.uc-bout { min-inline-size: 0; display: grid; gap: var(--space-2); align-content: start; }
.uc-bout > p { margin: 0; }
.uc-btable td.num, .uc-btable th.num { font-family: var(--font-mono); }
.uc-btable tr.is-bad td { color: var(--ink-2); }
.uc-bad { color: var(--danger); font-family: var(--font-text); font-size: var(--fs-caption); }

/* --- the bibliography ---------------------------------------------------------------- */
.uc-srclist { margin: var(--space-3) 0 0; padding-inline-start: 1.25rem; display: grid; gap: var(--space-3); font-size: var(--fs-small); line-height: var(--lh-body); }
.uc-srclist li > * { display: block; }
.uc-srclist a { color: var(--brand-text); }
.uc-srclist__p { color: var(--ink-2); }
.uc-srclist__t { color: var(--ink-2); font-size: var(--fs-caption); overflow-wrap: anywhere; }

[data-tool="engineering-unit-converter"] .calcfield__unit { direction: ltr; unicode-bidi: isolate; }

/* --- the frame: "Convert units — <discipline>" under every other calculator ---------- */
.toolunits { margin: calc(var(--space-2) * -1) 0 var(--space-5); }
.toolunits__a {
  display: inline-flex; align-items: center; gap: .45rem; min-block-size: 2.5rem;
  padding: .35rem .9rem; border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--brand-text); text-decoration: none;
  border: 1px solid var(--brand-soft-line, var(--line)); background: var(--brand-soft);
}
.toolunits__a:hover { text-decoration: underline; text-underline-offset: 2px; }
.toolunits__a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.toolunits__a svg { inline-size: 1.1rem; block-size: 1.1rem; flex: none; }
[dir="rtl"] .toolunits__a svg { transform: scaleX(-1); }
/* ---- end engineering-unit-converter ---- */

/* ---- embodied-carbon-calculator ---- */
/* ==========================================================================
   EMBODIED CARBON OF THE STRUCTURE — LEED v5 MRp2 (ec-): the material
   lines as cards, the three hotspots with their strategy boxes, the bar
   chart by line (never mirrored), the line table and the EPD table.
   ========================================================================== */
.ec-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ec-line { padding: var(--space-3) var(--space-4) var(--space-4); border-radius: var(--r-lg); min-inline-size: 0; }
.ec-line > * + * { margin-block-start: var(--space-3); }
.ec-line__head { display: flex; align-items: flex-end; gap: var(--space-2); }
.ec-line__no {
  flex: none; inline-size: 1.7rem; block-size: 1.7rem; margin-block-end: .3rem;
  display: inline-grid; place-items: center; border-radius: var(--r-pill);
  background: var(--brand-fill); color: var(--ink-on-brand, #fff);
  font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-semibold);
}
.ec-line__name { flex: 1 1 auto; }
.ec-line__head .rowdel { flex: none; margin-block-end: .35rem; }
.ec-line__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ec-wide { grid-column: 1 / -1; }
.ec-line__out { margin: 0; font-size: var(--fs-small); color: var(--ink); font-variant-numeric: tabular-nums; }
.ec-line__out:empty { display: none; }
.ec-note { margin: 0; font-size: var(--fs-caption); color: var(--ink-2); line-height: var(--lh-body); }
.ec-src { font-size: var(--fs-caption); color: var(--ink-2); }
.ec-tag {
  display: inline-block; padding: 0 .45rem; border-radius: var(--r-pill);
  background: var(--brand-soft, rgba(29, 158, 117, .12)); color: var(--brand-text, var(--ink));
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
}
.ec-linkbtn {
  appearance: none; border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: var(--brand-text, var(--ink)); text-decoration: underline; text-underline-offset: 2px;
}
.ec-linkbtn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 3px; }
.ec-an > * + * { margin-block-start: var(--space-3); }
#ec-sum { scroll-margin-block-start: 6rem; }

/* the answer in one line above the lines, where the result column is below them */
.ec-quick {
  margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--r-lg);
  border: 1px solid var(--line-soft); background: var(--surface-sunken);
  font-size: var(--fs-small); color: var(--ink); line-height: var(--lh-body);
}
.ec-quick__k { color: var(--ink-2); }
.ec-quick__v { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.ec-quick__a { white-space: nowrap; color: var(--brand-text, var(--ink)); }
@media (min-width: 1080px) { .ec-quick { display: none !important; } }

/* the three hotspots */
.ec-hot { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ec-hot__i { display: grid; gap: var(--space-2); padding-block-end: var(--space-3); border-block-end: 1px solid var(--line-soft); }
.ec-hot__i:last-child { border-block-end: 0; padding-block-end: 0; }
.ec-hot__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; }
.ec-hot__rank {
  flex: none; inline-size: 1.45rem; block-size: 1.45rem; display: inline-grid; place-items: center;
  border-radius: var(--r-pill); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
}
.ec-hot__name { font-weight: var(--fw-semibold); color: var(--ink); }
.ec-hot__v { margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-2); }
.ec-hot__alt { margin: 0; font-size: var(--fs-caption); color: var(--ok-text); }

/* the chart: one bar per line, the alternative under it */
.ec-chart, .ec-legend {
  --ec-base: #1baf7a; --ec-alt: #2a78d6; --ec-rule: rgba(22, 33, 29, .28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ec-chart, :root:not([data-theme="light"]) .ec-legend {
    --ec-base: #199e70; --ec-alt: #3987e5; --ec-rule: rgba(237, 243, 240, .28);
  }
}
:root[data-theme="dark"] .ec-chart, :root[data-theme="dark"] .ec-legend {
  --ec-base: #199e70; --ec-alt: #3987e5; --ec-rule: rgba(237, 243, 240, .28);
}
.ec-chart { position: relative; direction: ltr; min-inline-size: 0; }
.ec-ch { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.ec-ch__base { stroke: var(--ec-rule); stroke-width: 1; }
.ec-ch__b { fill: var(--ec-base); }
.ec-ch__a { fill: var(--ec-alt); }
.ec-ch__lbl { font-family: inherit; font-size: 12px; fill: var(--ink); }
.ec-ch__val { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-2); }
.ec-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: var(--fs-caption); color: var(--ink-2); }
.ec-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.ec-sw { display: inline-block; inline-size: .7rem; block-size: .7rem; border-radius: 2px; flex: none; }
.ec-sw--b { background: var(--ec-base); }
.ec-sw--a { background: var(--ec-alt); }

/* the tables */
.calc__table.ec-table { min-inline-size: 60rem; }
.ec-table .ec-mat { min-inline-size: 15rem; }
.calc__table.ec-epds { min-inline-size: 40rem; }
.ec-table td, .ec-epds td { vertical-align: top; }
.ec-table .u { margin-inline-start: .3em; color: var(--ink-2); font-size: .85em; }
.ec-st { font-size: var(--fs-caption); color: var(--ink-2); }
.ec-st--ok { color: var(--ok-text); }
.ec-st--old { color: var(--danger); font-weight: var(--fw-semibold); }

@media (max-width: 34rem) {
  .ec-line { padding: var(--space-3); }
  .ec-line__grid .ec-sel { grid-column: 1 / -1; }
  .ec-hot__v { margin-inline-start: 0; inline-size: 100%; }
}
@media print {
  .ec-line__head .rowdel, #ec-add { display: none !important; }
}
/* ---- end embodied-carbon-calculator ---- */

/* ---- iso-19650-file-naming-tool (agent G) ---- */
/* ==========================================================================
   ISO 19650 FILE NAMING (in-): the mode rail, the name preview built of
   field segments, the builder fields and the batch, the pasted register
   with each name's segments marked, the reasons bars, the status table, the
   project code set (fields, lengths, lists) and the bibliography. File
   names and codes are isolated LTR runs in both languages; nothing is
   mirrored. Logical properties throughout.
   ========================================================================== */

[data-tool="iso-19650-file-naming-tool"] [data-panel="calc"] { display: grid; gap: var(--space-4); }
[data-tool="iso-19650-file-naming-tool"] [data-panel="calc"] > * { min-inline-size: 0; }

.in-sr {
  position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0;
}
.in-rail .pill { min-block-size: 2.5rem; }
.in-mono, .calcfield .in-mono { font-family: var(--font-mono); letter-spacing: 0; }
input.in-mono { direction: ltr; text-align: start; }
[dir="rtl"] input.in-mono { text-align: right; }

/* --- a file name, as field segments ----------------------------------------- */
.in-name {
  font-family: var(--font-mono); letter-spacing: 0; direction: ltr; unicode-bidi: isolate;
  overflow-wrap: anywhere; word-break: break-word;
}
.in-seg { border-radius: 3px; }
.in-seg.is-bad {
  background: var(--danger-soft); color: var(--danger); font-weight: var(--fw-semibold);
  text-decoration: underline wavy; text-decoration-thickness: 1px; text-underline-offset: 3px;
  padding-inline: 1px;
}
.in-seg.is-extra { outline: 1px dashed currentColor; outline-offset: -1px; }
.in-dl, .in-ttl, .in-ext { color: var(--ink-3); }
.in-dl.is-bad { color: var(--danger); background: var(--danger-soft); font-weight: var(--fw-semibold); border-radius: 3px; padding-inline: 1px; }
.in-ttl { font-family: var(--font-text); }

/* the preview: each field a chip with its name under it */
.in-prev {
  display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  border-radius: var(--r-lg); background: var(--surface-sunken); border: 1px solid var(--line-soft);
}
.in-prev > * { margin: 0; }
.in-prev__k { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--ink-2); }
.in-prev__v .in-name {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 3px 2px;
  font-size: clamp(1.05rem, 3.4vw, 1.35rem); font-weight: var(--fw-semibold); color: var(--ink);
}
.in-prev__v .in-seg {
  display: inline-grid; justify-items: center; gap: 1px; padding: .2rem .35rem .15rem;
  background: var(--surface, #fff); border: 1px solid var(--line-soft); border-radius: var(--r-sm, 6px);
}
.in-prev__v .in-seg.is-bad { background: var(--danger-soft); border-color: currentColor; text-decoration: none; }
.in-prev__v .in-dl { padding-block-start: .25rem; }
.in-seg__k {
  font-family: var(--font-text); font-size: 11px; font-weight: var(--fw-medium); line-height: 1.2;
  color: var(--ink-2); letter-spacing: 0; white-space: nowrap;
}
.in-prev__v .in-seg.is-bad .in-seg__k { color: var(--danger); }
.in-prev__none { font-family: var(--font-mono); color: var(--ink-3); }
.in-prev__act { margin: 0; }
[data-tool="iso-19650-file-naming-tool"] .btn:disabled { opacity: .5; cursor: not-allowed; }

.in-setline { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.in-setline .in-warn { color: var(--danger); }
.in-setline a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 2px; margin-inline-start: .35rem; }
.in-bnum__row { display: flex; gap: var(--space-2); align-items: center; }
.in-bnum__row .input { flex: 1 1 6rem; min-inline-size: 0; }
.in-bnum__row .btn { flex: none; white-space: nowrap; }
.in-bnum { grid-column: 1 / -1; }
#in-bsfx[hidden] { display: none; }

.in-blist {
  margin: 0; padding-inline-start: 2.2rem; display: grid; gap: .2rem;
  max-block-size: 16rem; overflow-y: auto; font-size: var(--fs-small);
}
.in-blist li::marker { color: var(--ink-3); font-family: var(--font-mono); font-size: .85em; }
.in-blist bdi { font-family: var(--font-mono); overflow-wrap: anywhere; }

/* --- the checker ---------------------------------------------------------------- */
.calcfield .in-cin, .in-cin {
  font-family: var(--font-mono); font-size: .9rem; min-block-size: 14rem; resize: vertical;
  direction: ltr; text-align: start; white-space: pre; overflow-wrap: normal; overflow-x: auto;
}
.in-reghead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.in-check { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-small); color: var(--ink); cursor: pointer; min-block-size: 2.25rem; }
.in-check input { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--brand); flex: none; }
.in-reg { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.in-row {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .25rem .6rem; align-items: start;
  padding: .55rem .75rem; border-radius: var(--r-md); border: 1px solid var(--line-soft);
  background: var(--surface, #fff);
}
.in-row.is-bad { border-inline-start: 3px solid var(--danger); }
.in-row.is-ok { border-inline-start: 3px solid var(--ok-text); }
.in-row--none { display: block; color: var(--ink-2); font-size: var(--fs-small); }
.in-row__n { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-2); text-align: end; padding-block-start: .15rem; }
.in-row__b { min-inline-size: 0; }
.in-row__b .in-name { font-size: .95rem; }
.in-row__b .badge { vertical-align: middle; margin-inline-start: .35rem; }
.in-why { margin: .35rem 0 0; padding-inline-start: 1.1rem; font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--ink); }
.in-why--info { color: var(--ink-2); list-style: circle; }

.in-side:empty { display: none; }
.in-bars { display: grid; gap: var(--space-3); }
.in-bars > * { margin: 0; }
.in-bars__l { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.in-bars__l li { display: grid; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) 2.5rem; gap: .6rem; align-items: center; font-size: var(--fs-small); }
.in-bars__k { color: var(--ink); }
.in-bars__t { display: block; block-size: .6rem; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; }
.in-bars__t i { display: block; block-size: 100%; border-radius: inherit; background: var(--danger); }
.in-bars__v { font-family: var(--font-mono); text-align: end; color: var(--ink); }

#in-sum .calcsum__lvalue { font-family: var(--font-mono); letter-spacing: 0; overflow-wrap: anywhere; line-height: 1.15; }
#in-sum .calcsum__lead { justify-items: end; min-inline-size: 0; max-inline-size: 100%; }
#in-sum .calcsum__head { min-inline-size: 0; }
#in-sum .calcsum__items dd { font-size: var(--fs-small); overflow-wrap: anywhere; }
#in-sum .calcsum__verdict { text-transform: none; }

/* --- the status table ------------------------------------------------------------- */
.in-code { font-family: var(--font-mono); font-weight: var(--fw-semibold); white-space: nowrap; }
.in-code--off { text-decoration: line-through; color: var(--ink-2); }
.in-stnote { display: block; font-size: var(--fs-caption); color: var(--warn); margin-block-start: .15rem; }
.calc__table.in-stable { min-inline-size: 0; }
/* A phone: each status a block — the code and its revision on the first line,
   the description and the CDE state under them. The table keeps its semantics
   through explicit ARIA roles in the markup. */
@media (max-width: 34rem) {
  .in-stable, .in-stable tbody { display: block; }
  .in-stable thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .in-stable tbody tr {
    display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; column-gap: .75rem; row-gap: .15rem;
    padding: .65rem .5rem; border-block-end: 1px solid var(--line-soft);
  }
  .in-stable tbody td { border: 0; padding: 0; }
  .in-stable tbody td:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .in-stable tbody td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .in-stable tbody td:nth-child(3) { grid-column: 2; grid-row: 2; font-size: var(--fs-caption); color: var(--ink-2); }
  .in-stable tbody td:nth-child(4) { grid-column: 3; grid-row: 1; }
  .in-stable tbody tr.is-gov { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
  [dir="rtl"] .in-stable tbody tr.is-gov { box-shadow: inset -3px 0 0 var(--brand); }
  [dir] .calc__table.in-stable tbody tr.is-gov > td, [dir] .calc__table.in-stable tbody tr.is-muted > td { background: transparent; box-shadow: none; }
  .in-stable tbody tr.is-muted { background: var(--surface-sunken); }
}

/* --- the project code set ---------------------------------------------------------- */
.in-set > summary, .in-srcs > summary {
  cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; min-block-size: 2.5rem;
}
.in-set > summary::-webkit-details-marker, .in-srcs > summary::-webkit-details-marker { display: none; }
.in-set > summary::before, .in-srcs > summary::before {
  content: ""; inline-size: .5rem; block-size: .5rem; flex: none;
  border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(-45deg);
  transition: transform var(--dur-1, .15s) var(--ease-out, ease);
}
[dir="rtl"] .in-set > summary::before, [dir="rtl"] .in-srcs > summary::before { transform: rotate(135deg); }
.in-set[open] > summary::before, .in-srcs[open] > summary::before { transform: rotate(45deg); }
.in-set > summary:focus-visible, .in-srcs > summary:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: var(--r-sm); }
.in-set__line { font-size: var(--fs-small); color: var(--ink-2); }
.in-set > * + * { margin-block-start: var(--space-4); }
.in-subh { font-size: var(--fs-body); }
.in-opt { justify-content: end; }

.in-flds { display: grid; }
.in-fld {
  display: grid; grid-template-columns: minmax(9rem, 1.3fr) minmax(0, .6fr) minmax(0, .6fr) minmax(0, 1.2fr);
  gap: .4rem .75rem; align-items: end; padding-block: .55rem; border-block-end: 1px solid var(--line-soft);
}
.in-fld:last-child { border-block-end: 0; }
.in-fld__n { align-self: center; font-size: var(--fs-small); font-weight: var(--fw-medium); }
.in-fld__fixed { display: inline-flex; align-items: center; min-block-size: 2.25rem; padding-inline-start: 1.6rem; }
.in-fld__i .input--mini { inline-size: 100%; max-inline-size: 6rem; }
.in-fld__i .calcfield__label { font-size: var(--fs-caption); }
.in-fld__na { align-self: center; font-size: var(--fs-caption); color: var(--ink-2); }
@media (max-width: 34rem) {
  .in-fld { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .in-fld__n, .in-fld__na { grid-column: 1 / -1; }
}

.in-lists { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.in-list > * + * { margin-block-start: 0; }
.calcfield .in-ta, .in-ta { font-family: var(--font-mono); font-size: .875rem; min-block-size: 7rem; resize: vertical; line-height: 1.5; }
.in-bad { display: block; font-size: var(--fs-caption); color: var(--danger); }
.in-carried { display: block; margin: .25rem 0 0; font-size: var(--fs-caption); }
.in-list .calc__actions { margin: .25rem 0 0; }

/* --- the bibliography --------------------------------------------------------------- */
.in-srclist { margin: var(--space-3) 0 0; padding-inline-start: 1.25rem; display: grid; gap: var(--space-3); font-size: var(--fs-small); line-height: var(--lh-body); }
.in-srclist li > * { display: block; }
.in-srclist a { color: var(--brand-text); }
.in-srclist__p { color: var(--ink-2); }
.in-srclist__t { color: var(--ink-2); font-size: var(--fs-caption); overflow-wrap: anywhere; }

@media print {
  .in-set, .in-srcs { break-inside: avoid; }
}
/* ---- end iso-19650-file-naming-tool ---- */