/* =====================================================================
 * caldr.css — one stylesheet for the whole application.
 *
 * v2.12.0: rebuilt on one scale. Every distance is a multiple of 4 px,
 * every type size is on one ramp, every surface is one of three, and
 * every control has the same radius, border and focus ring. The
 * class names the renderer and the test suites use are unchanged.
 * ===================================================================== */

/* THE TYPEFACE SHIPS WITH THE PROGRAM. Inter was fetched from Google
 * Fonts on every page load, so an offline site fell back to the system
 * face, the desktop build had no Inter at all, and a print made before
 * the web font finished arriving could be laid out in one face and
 * painted in another — which is how a value flush with the right edge
 * of a printed sheet ended up clipped by it. The four weights the
 * program uses are served from the folder, under the SIL Open Font
 * License (assets/fonts/LICENSE-Inter.txt); nothing is fetched. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: block; src: url('../assets/fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: block; src: url('../assets/fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: block; src: url('../assets/fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: block; src: url('../assets/fonts/Inter-Bold.woff2') format('woff2'); }

:root {
  /* identity */
  --blue:        #2a80c9;
  --blue-solid:  #2472b3;   /* white text on this is 5.08:1 */
  --blue-dark:   #1d5ea8;
  --blue-pale:   #eef4fc;
  --blue-line:   #b5d2f1;
  --accent:      #c25500;
  --accent-pale: #fdf1e8;
  /* neutrals */
  --ink:         #16202c;
  --ink-soft:    #4f5a67;
  --ink-faint:   #66707f;   /* 5.0:1 on white, 4.6:1 on --bg — AA for the small text it colours (units, method lines, counts) */
  --rule:        #e2e7ee;
  --rule-strong: #cfd7e1;
  --bg:          #f3f5f8;
  --bg-2:        #f8fafc;
  --surface:     #ffffff;
  /* tones */
  --good:        #1f7a4d;  --good-bg: #e8f6ee;  --good-line: #bfe3cf;
  --warn:        #8a5600;  --warn-bg: #fdf3e0;  --warn-line: #f0d9a8;
  --bad:         #a32020;  --bad-bg:  #fdeceb;  --bad-line:  #f2c4c1;
  /* scale */
  --r-sm: 6px; --r: 8px; --r-lg: 12px;
  --radius: var(--r-lg);
  --shadow: 0 1px 2px rgba(22,32,44,.05), 0 2px 8px rgba(22,32,44,.04);
  --shadow-lift: 0 2px 6px rgba(22,32,44,.08), 0 8px 24px rgba(22,32,44,.06);
  --ring: 0 0 0 3px rgba(42,128,201,.18);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --rail-w: 236px;
}

* { box-sizing: border-box; }

/* HIDDEN MEANS HIDDEN — ahead of every component rule that sets display. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 14.5px; line-height: 1.5;
  color: var(--ink); background: var(--bg);
  font-feature-settings: 'cv11', 'ss01';
}
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; margin: 0; }
a { color: var(--blue-dark); }
button, input, select { font-family: inherit; }

/* ---------------------------------------------------------------
 * App shell: rail on the left, sheet on the right
 * ------------------------------------------------------------- */
.module-frame { display: flex; align-items: flex-start; min-height: 100vh; }
.module-rail {
  order: -1;
  flex: 0 0 var(--rail-w); position: sticky; top: 0; align-self: flex-start;
  height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 12px 24px; font-size: .82rem;
  background: var(--surface); border-right: 1px solid var(--rule);
}
.rail-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 4px 6px 10px; }
.rail-logo { height: 30px; width: auto; }
.rail-brand-text { font-weight: 800; font-size: 1rem; letter-spacing: .02em; color: var(--ink); }
.rail-mode {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px;
  background: var(--bg); border-radius: var(--r); margin: 0 4px 12px;
}
.rail-mode-btn {
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--ink-soft);
  background: transparent; border: 0; border-radius: var(--r-sm); padding: 6px 8px; cursor: pointer;
}
.rail-mode-btn.is-on { background: var(--surface); color: var(--blue-dark); box-shadow: var(--shadow); }
.rail-head {
  display: block; font-weight: 700; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint); text-decoration: none; padding: 4px 8px; margin-bottom: 2px;
}
.rail-head:hover { color: var(--blue-dark); }
.rail-section {
  display: flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 600; color: var(--ink-soft);
  margin: 12px 0 2px; padding: 0 8px;
}
.rail-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--blue-pale); color: var(--blue-dark);
  font-size: .66rem; font-weight: 700; flex: 0 0 auto;
}
.rail-link {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px 5px 10px; border-radius: var(--r-sm); color: var(--ink-soft);
  text-decoration: none; line-height: 1.25; border-left: 3px solid transparent;
}
.rail-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rule-strong); flex: 0 0 auto; }
.rail-link.is-started .rail-dot { background: var(--good); }
.rail-link:hover { background: var(--bg); color: var(--ink); }
.rail-link.is-here { background: var(--blue-pale); color: var(--blue-dark); font-weight: 700; border-left-color: var(--blue-solid); }
.rail-link.is-here .rail-dot { background: var(--blue-solid); }
.rail-project { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.rail-jump { display: none; }
@media (max-width: 1399px) {
  .module-frame { display: block; }
  .module-rail { position: static; height: auto; padding: 8px 16px 0; overflow: visible; border-right: 0; border-bottom: 1px solid var(--rule); }
  .rail-brand, .rail-mode, .rail-head, .rail-section, .rail-link { display: none; }
  .rail-foot { margin: 0; padding: 0; border: 0; }
  .rail-jump { display: block; width: 100%; font: inherit; font-size: .88rem; padding: 8px 10px; margin-bottom: 8px;
               border: 1px solid var(--rule-strong); border-radius: var(--r-sm); background: var(--surface); }
}

/* ---------------------------------------------------------------
 * Header (title bar of the sheet)
 * ------------------------------------------------------------- */
.caldr-header {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 32px 12px;
  background: var(--surface); border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand-logo { height: 40px; width: auto; object-fit: contain; display: block; }
.module-frame .caldr-header .brand-compact { display: none; }
.header-text { flex: 1 1 320px; min-width: 220px; }
.header-text h1 { font-size: 1.35rem; line-height: 1.2; }
.title-accent { color: var(--ink); }
.subtitle { margin: 2px 0 0; color: var(--ink-soft); font-size: .88rem; }
.header-actions { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 1 auto; min-width: 0; }
.header-actions .btn { font-size: .8rem; padding: 6px 10px; }

/* ---------------------------------------------------------------
 * Sheet layout
 * ------------------------------------------------------------- */
.module-main { max-width: 1360px; margin: 0; padding: 0 32px 40px; min-width: 0; flex: 1 1 auto; }
.module-main > .caldr-header { margin: 0 -32px 16px; }
.module-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
/* Between the rail's fold (1400) and a wide desktop, the sheet is
 * squeezed by the rail: a narrower rail, tighter margins and a 320 px
 * results column keep an eight-column schedule on one plane. */
@media (min-width: 1400px) and (max-width: 1599px) {
  :root { --rail-w: 212px; }
  .module-main { padding: 0 22px 40px; }
  .module-main > .caldr-header { margin: 0 -22px 16px; }
  .module-body { grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
}
.module-inputs { min-width: 0; }
.module-results { position: sticky; top: 16px; min-width: 0; }
.module-below { min-width: 0; margin-top: 20px; }
.module-below:empty { display: none; }
.module-body-wide { grid-template-columns: minmax(0, 1fr); }
.module-body-wide .module-results { position: static; }

.panel {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 16px 20px 18px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel > h2, .panel-head h2 { font-size: .98rem; font-weight: 700; color: var(--ink); letter-spacing: -0.005em; }
.panel > h2 { margin-bottom: 12px; }
.panel-count { font-size: .74rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.panel-about {
  font: inherit; font-size: .76rem; font-weight: 600; color: var(--blue-dark);
  background: var(--blue-pale); border: 1px solid transparent; border-radius: 999px; padding: 3px 10px; cursor: pointer;
}
.panel-about::before { content: '?'; display: inline-block; margin-right: 5px; font-weight: 800; }
.panel-about.is-open { background: var(--surface); border-color: var(--blue-line); }
.panel-note { margin: -4px 0 14px; color: var(--ink-soft); font-size: .84rem; line-height: 1.55; max-width: 78ch; }
.panel-note-folded {
  margin: 0 0 14px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--rule);
  border-radius: var(--r); max-width: none;
}
.panel-note b { color: var(--ink); }

/* ---------------------------------------------------------------
 * Project strip
 * ------------------------------------------------------------- */
.project-bar {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 12px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 10px 16px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.project-bar .field label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.project-bar .field input { padding: 6px 8px; font-size: .88rem; }
@media (max-width: 900px) { .project-bar { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------
 * Fields
 * ------------------------------------------------------------- */
.field-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 16px; }
.field-grid > .field { grid-column: span 4; }
.field-grid.cols-1 > .field { grid-column: span 12; }
.field-grid.cols-2 > .field { grid-column: span 6; }
.field-grid > .field-static, .field-grid > .field-rows { grid-column: span 12; }
.field-grid > .field-check { grid-column: span 4; }
.field-grid > .field-radio { grid-column: span 6; }
.field-grid > .field-radio-wide, .field-grid > .field-radio-cards { grid-column: span 12; }
.field-grid > .field-select-wide { grid-column: span 8; }
@media (max-width: 900px) { .field-grid > .field, .field-grid > .field-radio, .field-grid > .field-check { grid-column: span 6; } .field-grid > .field-radio-wide, .field-grid > .field-select-wide { grid-column: span 12; } }
@media (max-width: 560px) { .field-grid > .field, .field-grid > .field-radio, .field-grid > .field-check { grid-column: span 12; } }

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label, .field-legend {
  font-size: .8rem; font-weight: 600; color: var(--ink-soft);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 20px;
}
.field .unit { font-weight: 500; color: var(--ink-faint); font-size: .74rem; }
.help-mark {
  color: var(--ink-faint); cursor: pointer; background: none; border: 0; padding: 0; font: inherit;
  font-size: .82rem; line-height: 1; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; min-height: 26px; margin: -6px -4px; vertical-align: middle;
}
.help-mark:hover, .help-mark.is-open { color: var(--blue-dark); }
.help-mark:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* A thumb needs 30 px; the mouse-sized marks grow on a phone. */
@media (max-width: 700px) {
  .help-mark { min-width: 32px; min-height: 32px; margin: -8px -6px; }
  .panel-about { min-height: 32px; padding: 5px 12px; }
}
.help-pop {
  font-size: .8rem; line-height: 1.5; color: var(--ink-soft);
  background: var(--blue-pale); border: 1px solid var(--blue-line); border-left: 3px solid var(--blue);
  border-radius: var(--r-sm); padding: 8px 10px; margin: 2px 0 4px;
}
.help-pop p { margin: 0; }
.check-row { display: flex; align-items: center; gap: 6px; }
.field-check .help-pop { margin-top: 4px; }
@media print { .help-pop, .help-mark, .panel-about { display: none !important; } }

.field input[type="text"], .field input[type="password"], .field input[type="email"], .field input[type="date"], .field select {
  width: 100%; padding: 8px 10px; font: inherit; font-size: .92rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  transition: border-color .12s, box-shadow .12s; min-height: 38px;
}
.field input[type="text"] { font-variant-numeric: tabular-nums; }
.field > select, .project-bar .field select, .login-box .field select {
  appearance: none; -webkit-appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234f5a67' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.field input:focus, .field select:focus, .cell-input:focus {
  outline: none; border-color: var(--blue); box-shadow: var(--ring);
}
.field.invalid:not(.field-rows) input,
.field.invalid:not(.field-rows) select { border-color: var(--bad); background: var(--bad-bg); }
.field.field-rows.invalid .row-table-wrap { border-color: var(--bad); box-shadow: 0 0 0 2px rgba(163,32,32,.14); }
.field.field-rows.invalid .row-table thead th { background: var(--bad-bg); color: var(--bad); }

/* switches */
.field-check { flex-direction: row; align-items: center; min-height: 38px; }
.check-label { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; color: var(--ink); font-size: .88rem; }
.check-label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-label .switch {
  width: 34px; height: 20px; border-radius: 999px; background: var(--rule-strong); position: relative;
  transition: background .15s; flex: 0 0 auto;
}
.check-label .switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s;
}
.check-label input:checked + .switch { background: var(--blue-solid); }
.check-label input:checked + .switch::after { transform: translateX(14px); }
.check-label input:focus-visible + .switch { box-shadow: var(--ring); }

/* segmented radios */
.radio-group { display: flex; gap: 12px; flex-wrap: wrap; }
.radio-segmented {
  display: inline-flex; gap: 0; padding: 3px; background: var(--bg); border-radius: var(--r);
  border: 1px solid var(--rule); max-width: 100%; flex-wrap: wrap;
}
.radio-segmented .radio-option {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 14px; border-radius: var(--r-sm); font-size: .86rem; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; white-space: nowrap; transition: background .12s, color .12s;
}
.radio-segmented .radio-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio-segmented .radio-option.is-checked, .radio-segmented .radio-option:has(input:checked) { background: var(--surface); color: var(--blue-dark); box-shadow: var(--shadow); }
.radio-segmented .radio-option:has(input:focus-visible) { box-shadow: var(--ring); }
.radio-segmented .radio-option:hover { color: var(--ink); }
/* choice cards */
.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.radio-cards .radio-option {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px 10px 38px; border: 1px solid var(--rule-strong); border-radius: var(--r);
  background: var(--surface); cursor: pointer; font-size: .86rem; color: var(--ink); line-height: 1.35;
  transition: border-color .12s, background .12s;
}
.radio-cards .radio-option input { position: absolute; left: 12px; top: 13px; margin: 0; width: 16px; height: 16px; accent-color: var(--blue-solid); }
.radio-cards .radio-option:hover { border-color: var(--blue); }
.radio-cards .radio-option.is-checked, .radio-cards .radio-option:has(input:checked) { border-color: var(--blue-solid); background: var(--blue-pale); box-shadow: inset 0 0 0 1px var(--blue-solid); }
.rc-body { display: flex; flex-direction: column; gap: 2px; }
.rc-title { font-weight: 600; }
.rc-desc { font-size: .78rem; color: var(--ink-soft); font-weight: 400; }
.radio-option { display: flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 500; color: var(--ink); cursor: pointer; }

.field-static { grid-column: 1 / -1; }
.static-note {
  background: var(--bg-2); border: 1px solid var(--rule); border-left: 3px solid var(--blue);
  padding: 10px 12px; border-radius: var(--r-sm); font-size: .84rem; color: var(--ink-soft); line-height: 1.55;
}
.static-block { font-size: .86rem; color: var(--ink); }
.static-block > p { margin: 0 0 10px; color: var(--ink-soft); }
.static-block > p:last-child { margin-bottom: 0; }
.static-block b { color: var(--ink); }
.static-block .table-wrap { margin: 12px 0; }
.static-source { font-size: .78rem; color: var(--ink-faint); }

.bus-chip {
  font: inherit; font-size: .7rem; font-weight: 600; background: var(--good-bg); color: var(--good);
  border: 1px solid var(--good-line); border-radius: 999px; padding: 1px 8px; cursor: pointer; white-space: nowrap;
}
.bus-chip:hover { background: #d8efe2; }

/* ---------------------------------------------------------------
 * Tables — one system for input schedules and results tabulations
 * ------------------------------------------------------------- */
.field-rows { grid-column: 1 / -1; }
.rows-title { font-size: .92rem; margin-bottom: 4px; }
.rows-note { margin: 0 0 10px; font-size: .82rem; color: var(--ink-soft); line-height: 1.5; max-width: 90ch; }
.row-table-wrap, .table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); }
.row-table { table-layout: fixed; width: 100%; min-width: 0; }
.row-table td .cell-input, .row-table td .cell-input.num,
.row-table td:first-child .cell-input, .row-table td:nth-child(2) .cell-input { min-width: 0; }
.row-table td { overflow: hidden; }
.row-table-compact { font-size: .78rem; }
.row-table-compact th { font-size: .64rem; padding: 6px 5px; letter-spacing: .02em; }
.row-table-compact td { padding: 2px 4px; }
.row-table-compact td .cell-input { padding: 4px 5px; font-size: .78rem; }
.row-table, .tabulation, .ref-table { width: 100%; border-collapse: collapse; font-size: .86rem; background: var(--surface); }
.row-table th, .tabulation th, .ref-table th {
  text-align: left; padding: 9px 10px; background: var(--bg-2); border-bottom: 1px solid var(--rule-strong);
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft);
  white-space: nowrap; vertical-align: bottom;
}
.row-table td, .tabulation td, .ref-table td { padding: 5px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.row-table tbody tr:nth-child(even) td, .tabulation tbody tr:nth-child(even) td { background: #fbfcfd; }
.row-table tr:last-child td, .tabulation tr:last-child td, .ref-table tr:last-child td { border-bottom: none; }
.row-table th.num, .row-table td.num, .tabulation th.num, .tabulation td.num,
.ref-table th.num, .ref-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.row-table thead th { white-space: normal; line-height: 1.2; overflow-wrap: anywhere; }
/* A RESULTS TABLE: numbers never wrap, names wrap, headers fold — so a
 * twelve-column schedule spreads its width over the names, not over
 * one tall narrow first column and nine wide numeric ones. */
.tabulation th { white-space: normal; line-height: 1.2; }
.tabulation td.num { white-space: nowrap; }
.tabulation th.num { white-space: normal; }
.tabulation td:not(.num) { white-space: normal; min-width: 9ch; }
.tabulation td:first-child:not(.num), .tabulation th:first-child:not(.num) { min-width: 14ch; font-weight: 600; }
.row-group td {
  background: var(--blue-pale) !important; font-weight: 700; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--blue-dark); padding: 5px 10px; border-bottom: 1px solid var(--blue-line);
}
/* the totals row */
.tabulation tbody tr:last-child td:first-child:is(:where(td)) { }
.tabulation tr.row-total td, .tabulation tbody tr:last-child:has(td:first-child:empty) td { font-weight: 700; }
.cell-input {
  width: 100%; min-width: 0; padding: 6px 8px; font: inherit; font-size: .86rem;
  border: 1px solid transparent; background: transparent; border-radius: var(--r-sm); color: var(--ink);
}
.cell-input:hover { border-color: var(--rule-strong); background: var(--surface); }
.cell-input.num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-input.is-basis::placeholder { color: var(--blue-dark); font-weight: 600; opacity: 1; font-size: .78rem; }
.row-table td select.cell-input { appearance: auto; padding-right: 4px; }
/* feet and inches in one cell: [14] ft [6] in */
.cell-ftin { display: flex; align-items: center; gap: 3px; min-width: 0; }
.cell-ftin .cell-input { width: 46px; flex: 0 0 46px; padding-left: 5px; padding-right: 5px; }
.cell-ftin-unit { font-size: .72rem; color: var(--ink-soft, #6b7280); flex: 0 0 auto; padding-right: 3px; }
.row-actions { width: 68px; white-space: nowrap; text-align: right; padding-left: 2px !important; padding-right: 2px !important; }
.row-insert {
  font: inherit; font-size: .82rem; font-weight: 700; line-height: 1; color: var(--ink-soft);
  background: transparent; border: 1px solid var(--rule); border-radius: var(--r-sm);
  width: 20px; min-height: 30px; padding: 0; cursor: pointer; margin: 0 0 0 1px; vertical-align: middle;
}
.row-insert:hover { color: var(--blue-dark); border-color: var(--blue-line); background: var(--blue-pale); }
.row-remove { margin-left: 1px; min-height: 30px; vertical-align: middle; }
.row-remove {
  border: none; background: transparent; color: var(--ink-faint); cursor: pointer;
  font-size: 1.05rem; line-height: 1; padding: 2px 4px; border-radius: var(--r-sm);
}
.row-remove:hover { background: var(--bad-bg); color: var(--bad); }
.field-rows > .btn-ghost {
  width: 100%; justify-content: center; margin-top: 8px; border-style: dashed; color: var(--ink-soft);
  background: transparent;
}
.field-rows > .btn-ghost:hover { border-color: var(--blue); color: var(--blue-dark); background: var(--blue-pale); }
/* an added row is set like every other row — it used to be italic, which read as provisional */
.ref-table tr.row-emphasis, .tabulation tr.row-emphasis { background: var(--blue-pale); }
.ref-table tr.row-emphasis td, .tabulation tr.row-emphasis td { font-weight: 600; background: var(--blue-pale) !important; }
.ref-table tr.row-emphasis td:first-child, .tabulation tr.row-emphasis td:first-child { box-shadow: inset 3px 0 0 var(--blue-solid); }
.panel-schedule { padding-top: 14px; }

/* ---------------------------------------------------------------
 * Buttons and the toolbar
 * ------------------------------------------------------------- */
.btn {
  font: inherit; font-size: .84rem; font-weight: 600; padding: 7px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink);
  cursor: pointer; transition: background .12s, border-color .12s, transform .06s;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; line-height: 1.3;
}
.btn:hover { background: var(--bg-2); border-color: #b9c4d2; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
/* A BUTTON THAT CANNOT ACT LOOKS IT. Grayed and the cursor says no;
 * hover does nothing to it. */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn:disabled:hover, .btn[disabled]:hover { background: inherit; border-color: inherit; color: inherit; }
.btn-primary:disabled:hover { background: var(--blue-solid); border-color: var(--blue-solid); color: #fff; }
.btn-ghost:disabled:hover { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn-primary { background: var(--blue-solid); border-color: var(--blue-solid); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
/* THE DESIGN NARRATIVE STANDS OUT. It went unnoticed as one grey
 * button among ten; it is the one accent-coloured button in CALDR.
 * White on --accent is 4.6:1. */
.btn-narrative { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-narrative:hover { background: #a34700; border-color: #a34700; color: #fff; }
.btn-narrative svg { flex: none; }
.btn-lg { font-size: .95rem; padding: 10px 16px; }
.project-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0 20px;
  padding: 12px 14px; background: var(--accent-pale); border: 1px solid #f1d2b6; border-radius: var(--radius);
}
.project-actions[hidden] { display: none; }
.project-actions .pa-note { flex: 1 1 240px; color: var(--ink-soft); font-size: .84rem; }
/* The guided flow under every sheet in Project Mode. */
.next-step {
  margin: 22px 0 8px; padding: 14px 16px; background: var(--blue-pale); border: 1px solid var(--blue-line);
  border-radius: var(--radius); display: grid; gap: 10px;
}
.next-step .ns-where { font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--blue-dark); text-transform: uppercase; }
.next-step .ns-main { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.next-step .ns-main .btn-primary, .next-step .ns-main .btn-narrative { margin-left: auto; }
@media (max-width: 640px) { .next-step .ns-main .btn { width: 100%; justify-content: center; margin-left: 0; } }
.btn-ghost:hover { background: var(--bg-2); border-color: var(--rule); color: var(--ink); }
.btn-transfer {
  background: var(--surface); border-color: var(--blue-line); color: var(--blue-dark);
  width: 100%; justify-content: space-between; margin-bottom: 6px;
}
.btn-transfer::after { content: '→'; color: var(--blue); }
.btn-transfer:hover { background: var(--blue-pale); }
.toolbar {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px;
  padding: 8px 10px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.toolbar-sep { width: 1px; height: 22px; background: var(--rule); margin: 0 4px; }
.watermark-control { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ink-soft); }
.watermark-control select { font: inherit; font-size: .82rem; padding: 5px 8px; border: 1px solid var(--rule-strong); border-radius: var(--r-sm); background: var(--surface); }

/* ---------------------------------------------------------------
 * Results — the answer card
 * ------------------------------------------------------------- */
.summary {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow-lift);
}
.summary h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-bottom: 10px;
}
.summary-tiles { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 0 10px; }
.summary-tiles:has(.summary-tile:nth-child(2)) { grid-template-columns: 1fr 1fr; }
.summary-tiles:has(.summary-tile:nth-child(3)) { grid-template-columns: 1fr; }
.summary-line.summary-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  margin: 0; padding: 12px 14px; border: 1px solid var(--blue-line); border-radius: var(--r);
  background: linear-gradient(180deg, var(--blue-pale), #f6f9fe);
}
.summary-line.summary-tile .summary-label { font-size: .74rem; font-weight: 600; color: var(--ink-soft); text-transform: none; }
.summary-line.summary-tile .summary-value { font-size: 1.45rem; line-height: 1.15; color: var(--blue-dark); text-align: left; letter-spacing: -0.01em; }
.summary-line.summary-tile.tone-good .summary-value { color: var(--good); }
.summary-line.summary-tile.tone-warn .summary-value { color: var(--warn); }
.summary-line.summary-tile.tone-bad  .summary-value { color: var(--bad); }
.summary-line.summary-tile.tone-bad { border-color: var(--bad-line); background: var(--bad-bg); }
.summary-line.summary-tile.tone-warn { border-color: var(--warn-line); background: var(--warn-bg); }
.summary-line.summary-tile .summary-note { margin: 4px 0 0; padding: 0; border: 0; }
.summary-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--rule);
}
.summary-line:last-of-type { border-bottom: none; }
.summary-label { color: var(--ink-soft); font-size: .84rem; }
.summary-value { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; font-size: .9rem; }
.summary-line.primary:not(.summary-tile) {
  background: var(--blue-pale); margin: 8px -18px; padding: 10px 18px;
  border-top: 1px solid var(--blue-line); border-bottom: 1px solid var(--blue-line);
}
.summary-line.primary:not(.summary-tile) .summary-label { font-weight: 700; color: var(--blue-dark); font-size: .86rem; }
.summary-line.primary:not(.summary-tile) .summary-value { font-size: 1.2rem; color: var(--blue-dark); }
.summary-line.tone-good .summary-value { color: var(--good); }
.summary-line.tone-warn .summary-value { color: var(--warn); }
.summary-line.tone-bad  .summary-value { color: var(--bad); }
/* A reference row: the same on every project (a code rule, a note on the
 * data). Information, not a finding: never red or amber. */
.summary-line.summary-ref .summary-label, .summary-line.summary-ref .summary-value { color: var(--ink-soft); font-weight: 500; }
.summary-line.summary-prose { display: block; }
.summary-line.summary-prose .summary-label { display: block; margin-bottom: 3px; }
.summary-line.summary-prose .summary-value {
  display: block; text-align: left; font-weight: 400; font-variant-numeric: normal; font-size: .82rem; line-height: 1.5;
}
.summary-line.summary-prose.primary .summary-value { font-size: .95rem; font-weight: 600; }
.summary-line.tone-warn.summary-prose, .summary-line.tone-bad.summary-prose {
  border-left: 3px solid currentColor; padding-left: 10px; margin: 6px 0; background: var(--bg-2); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.summary-line.tone-warn.summary-prose { color: var(--warn); }
.summary-line.tone-bad.summary-prose { color: var(--bad); }
.summary-note { margin: 2px 0 10px; color: var(--ink-soft); font-size: .78rem; line-height: 1.5; border-left: 2px solid var(--rule-strong); padding-left: 9px; }
.tab-footnotes { margin: 10px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: .8rem; line-height: 1.5; }
.tab-footnotes li { margin: 2px 0; }
.after-note { margin: 12px 0 4px; color: var(--ink-soft); font-size: .86rem; line-height: 1.5; }
.reference-host { margin-top: 4px; }
.reference-set { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 14px 16px; margin: 10px 0; }
.reference-set h3 { margin: 0 0 4px; font-size: .92rem; color: var(--blue-dark); }
.ref-table { font-size: .8rem; }
.ref-table th { white-space: normal; }
.summary-divider { border: none; border-top: 1px solid var(--rule); margin: 10px 0; }
.summary-empty .muted { color: var(--ink-faint); font-size: .88rem; }
.transfers { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.transfers h3 { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-bottom: 8px; }

.formula-panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; margin-top: 10px; }
.formula-panel h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-bottom: 10px; }
.steps-table { width: 100%; border-collapse: collapse; font-size: .82rem; table-layout: fixed; }
.steps-table .step-label { width: 46%; }
.steps-table td, .steps-table th { padding: 5px 0; vertical-align: top; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 400; }
.step-label { color: var(--ink-soft); padding-right: 12px !important; }
.step-value { font-family: var(--mono); font-size: .78rem; text-align: right; white-space: pre-wrap; }
.step-heading th { font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--blue-dark); padding-top: 12px !important; border-bottom: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.reference-note { margin-top: 12px; font-size: .76rem; color: var(--ink-faint); }

.alert { padding: 10px 14px; border-radius: var(--r); margin-bottom: 12px; font-size: .88rem; display: flex; gap: 10px; align-items: flex-start; }
.alert::before { content: '!'; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .72rem; background: currentColor; color: #fff; margin-top: 2px; }
.alert-warn { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); }
.alert-bad  { background: var(--bad-bg);  border: 1px solid var(--bad-line); color: var(--bad); }
.alert-warn::before { background: var(--warn); } .alert-bad::before { background: var(--bad); }
.alert-ok   { background: var(--good-bg);  border: 1px solid var(--good-line); color: var(--good); }
.alert-ok::before { content: '✓'; background: var(--good); }
.alert-ok code { color: var(--ink); background: var(--surface); padding: 1px 6px; border-radius: 4px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px);
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: .86rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 100; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.good { background: var(--good); } .toast.bad { background: var(--bad); }

.disclaimer { max-width: 1360px; margin: 0; padding: 18px 32px 32px; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: .78rem; }
.disclaimer p { margin: 0; }
.disclaimer .credit { margin-top: 10px; font-size: .72rem; opacity: .75; }
.page-credit { max-width: 1320px; margin: 0 auto; padding: 14px 28px 26px; color: var(--ink-soft); font-size: .72rem; opacity: .75; text-align: center; }

/* build badge */
.build-badge {
  position: fixed; right: 10px; bottom: 10px; z-index: 60; font-family: var(--mono); font-size: .66rem; line-height: 1;
  padding: 5px 8px; border-radius: 20px; background: var(--surface); color: var(--ink-faint); border: 1px solid var(--rule);
  text-decoration: none; opacity: .7; transition: opacity .12s, color .12s; box-shadow: var(--shadow);
}
.build-badge:hover, .build-badge:focus-visible { opacity: 1; color: var(--blue-dark); border-color: var(--blue-line); }
/* In the rail's foot the badge is in the flow; when the rail folds
 * away it goes back to the corner of the window. */
.rail-foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--rule); }
@media (min-width: 1400px) {
  .rail-foot .build-badge { position: static; display: inline-block; box-shadow: none; }
}
.build-stamp { font-family: var(--mono); font-size: .7rem; opacity: .6; margin-top: 4px; }

/* ---------------------------------------------------------------
 * Changelog
 * ------------------------------------------------------------- */
.changelog { max-width: 900px; margin: 0 auto; padding: 26px 24px 60px; }
.cl-release { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 20px; }
.cl-release.current { border-color: var(--blue-line); border-left: 4px solid var(--blue); }
.cl-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cl-head h2 { font-size: 1.25rem; }
.cl-date { color: var(--ink-faint); font-size: .8rem; font-family: var(--mono); }
.cl-tag { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 20px; background: var(--blue-pale); color: var(--blue-dark); border: 1px solid var(--blue-line); }
.cl-entry { border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 14px; }
.cl-entry:first-of-type { border-top: 0; }
.cl-entry h3 { font-size: .95rem; margin-bottom: 4px; }
.cl-where { font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); display: block; margin-bottom: 6px; }
.cl-entry p { margin: 0 0 8px; color: var(--ink-soft); font-size: .9rem; }
.cl-check { background: var(--blue-pale); border: 1px solid var(--blue-line); border-radius: var(--r); padding: 10px 12px; font-size: .84rem; }
.cl-check b { display: block; margin-bottom: 4px; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--blue-dark); }
.cl-check code { font-family: var(--mono); font-size: .8rem; }
.cl-superseded { background: var(--warn-bg); border: 1px solid var(--warn); border-radius: var(--r); padding: 9px 12px; font-size: .82rem; color: var(--ink-soft); margin-bottom: 8px; }
.cl-superseded b { display: block; margin-bottom: 3px; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--warn); }
.cl-superseded + .cl-check { opacity: .72; }
.cl-kind { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 20px; margin-left: 8px; vertical-align: middle; }
.cl-kind.fix { background: var(--bad-bg); color: var(--bad); }
.cl-kind.new { background: var(--good-bg); color: var(--good); }
.cl-kind.chg { background: var(--warn-bg); color: var(--warn); }

/* ---------------------------------------------------------------
 * Menu
 * ------------------------------------------------------------- */
.menu-hero { text-align: center; padding: 34px 24px 18px; }
.menu-hero img { height: 56px; }
.menu-hero h1 { font-size: 1.9rem; margin-top: 10px; letter-spacing: -0.02em; }
.menu-hero p { color: var(--ink-soft); margin: 4px 0 0; }
.menu-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px 48px; }
.mode-tabs { display: inline-flex; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; margin: 0 auto 20px; box-shadow: var(--shadow); }
.mode-tabs-wrap { text-align: center; }
.mode-tab {
  text-align: left; cursor: pointer; font: inherit; background: transparent; border: 0; border-radius: 999px;
  padding: 8px 18px; display: flex; flex-direction: column; gap: 0; color: var(--ink-soft); min-width: 200px;
}
.mode-tab:hover { color: var(--ink); }
.mode-tab[aria-selected="true"] { background: var(--blue-solid); color: #fff; }
.mode-tab .mt-title { font-weight: 700; font-size: .92rem; }
.mode-tab .mt-desc { font-size: .72rem; opacity: .85; }
.mode-tab.is-upcoming { min-width: 150px; opacity: .5; cursor: default; }
.mode-tab.is-upcoming:hover { color: var(--ink-soft); }
.project-intro { font-size: .9rem; color: var(--ink-soft); margin: 4px auto 18px; max-width: 70ch; text-align: center; }
.phase-num {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue-solid); color: #fff; font-size: .74rem; font-weight: 700; margin-right: 10px; vertical-align: middle;
}
.section-title { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin: 22px 0 10px; display: flex; align-items: center; }
.phase-count { margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
.project-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.pp-bar { flex: 1 1 auto; height: 6px; background: var(--rule); border-radius: 999px; overflow: hidden; }
.pp-fill { height: 100%; background: var(--good); border-radius: 999px; transition: width .3s; }
.pp-text { font-size: .76rem; color: var(--ink-soft); white-space: nowrap; }
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.module-card {
  display: block; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 12px 14px; text-decoration: none; color: var(--ink); transition: border-color .14s, box-shadow .14s, transform .08s;
  position: relative;
}
.module-card:hover { border-color: var(--blue); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.module-card .mc-title { font-weight: 700; font-size: .92rem; display: block; margin-bottom: 3px; padding-right: 14px; }
.module-card .mc-desc { font-size: .78rem; color: var(--ink-soft); line-height: 1.4; }
.module-card.is-started::after { content: ''; position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.module-card.stub { opacity: .62; }
.module-grid-lead { grid-template-columns: 1fr; margin-bottom: 8px; }
.module-card.is-lead { border: 1px solid var(--blue-line); background: linear-gradient(180deg, var(--blue-pale), #fff); }
.module-card.is-lead .mc-title { font-size: 1.02rem; }
.mc-flag { display: inline-block; margin-left: 8px; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-dark); background: var(--blue-pale); padding: 2px 6px; border-radius: 4px; vertical-align: middle; }
.mc-flag-lead { background: var(--blue-solid); color: #fff; }
.one-off-note { font-size: .74rem; color: var(--ink-faint); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.category-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 24px; }
.category-card {
  display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 14px 16px; cursor: pointer; font: inherit; text-align: left; text-decoration: none; color: var(--ink);
  transition: border-color .14s, box-shadow .14s, transform .08s;
}
.category-card:hover { border-color: var(--blue); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.category-card.selected { border-color: var(--blue-solid); background: var(--blue-pale); box-shadow: inset 0 0 0 1px var(--blue-solid); }
.category-card img { height: 40px; width: 40px; object-fit: contain; flex: 0 0 auto; }
.category-card .cc-title { font-weight: 700; font-size: .98rem; display: block; }
.category-card .cc-count { font-size: .78rem; color: var(--ink-soft); }
.bus-panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; }
.bus-panel h2 { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-bottom: 10px; }
.bus-list { display: flex; flex-wrap: wrap; gap: 6px; }
.bus-item { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 999px; padding: 3px 10px; font-size: .8rem; }
.bus-item b { font-variant-numeric: tabular-nums; }
.bus-item span { color: var(--ink-soft); font-size: .74rem; }

/* ---------------------------------------------------------------
 * Login
 * ------------------------------------------------------------- */
.login-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 24px; background: var(--bg); }
.login-page .page-credit { margin: 0; }
.login-box { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 32px; width: 100%; max-width: 380px; box-shadow: var(--shadow-lift); text-align: center; }
.login-box img { height: 62px; margin-bottom: 18px; }
.login-box h1 { font-size: 1.3rem; margin-bottom: 6px; }
.login-box .login-sub { color: var(--ink-soft); font-size: .88rem; margin: 0 0 20px; }
.login-box .field { text-align: left; margin-bottom: 12px; }
.login-box .btn { width: 100%; justify-content: center; }
.login-note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: .76rem; color: var(--ink-faint); line-height: 1.45; text-align: left; }

/* ---------------------------------------------------------------
 * Diagrams
 * ------------------------------------------------------------- */
.diagram-host:empty { display: none; }
.field-diagram { margin-top: 0; margin-bottom: 14px; }
.diagram-card {
  margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 20px 16px;
}
.diagram-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.diagram-head .rows-title { margin: 0; font-size: .98rem; }
.diagram-wrap { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); padding: 12px; overflow-x: auto; color: var(--ink); }
.caldr-diagram { display: block; width: 100%; height: auto; max-width: 100%; }
.diagram-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .74rem; color: var(--ink-soft); }
.diagram-legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 22px; height: 0; border-top: 3px solid currentColor; display: inline-block; }
.legend-swatch.is-dashed { border-top-style: dashed; }
.diagram-caption { margin: 8px 2px 0; font-size: .8rem; color: var(--ink-soft); line-height: 1.5; }

/* ---------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------- */
@media (max-width: 1080px) {
  .module-body { grid-template-columns: 1fr; }
  .module-results { position: static; }
}
@media (max-width: 640px) {
  body { font-size: 14px; }
  .caldr-header { padding: 12px 16px; gap: 12px; }
  .module-main { padding: 0 16px 32px; }
  .module-main > .caldr-header { margin: 0 -16px 12px; }
  .brand-logo { height: 34px; }
  .header-text h1 { font-size: 1.2rem; }
  .panel { padding: 14px; }
  .disclaimer { padding: 16px; }
  .menu-wrap { padding: 0 16px 36px; }
  .summary-line.primary:not(.summary-tile) { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .summary-tiles:has(.summary-tile:nth-child(2)) { grid-template-columns: 1fr; }
  .mode-tab { min-width: 0; }
  .mode-tabs { display: grid; grid-template-columns: 1fr 1fr; border-radius: 22px; }
  .mode-tab.is-upcoming { min-width: 0; padding: 4px 18px; }
}

/* ---------------------------------------------------------------
 * Print — this is a deliverable that goes in a job file
 * ------------------------------------------------------------- */
@media print {
  :root { --shadow: none; --shadow-lift: none; }
  /* THE WATERMARK IS THE ROOT BACKGROUND (see CaldrOutput.render), so
   * nothing on the printed sheet may paint white over it: the body,
   * the panels, the tiles and the boxes are all transparent in print
   * and keep their borders. */
  body { background: transparent; font-size: 10.5pt; }
  body, .panel, .summary, .project-bar, .diagram-card, .formula-panel, .summary-tile, .summary-tiles,
  .panel-note, .rows-note, .row-table, .row-table tr, .row-table td, .row-table th, .tabulation, .tabulation td, .tabulation th,
  .cell-input, .field input, .field select, .steps-host, .steps-host table, .reference-host, .reference-set,
  .module-main, .module-body, .module-below, .module-inputs, .module-results, .caldr-header, .disclaimer, .print-sheet, .print-cover { background: transparent !important; }
  .no-print, .toolbar, .header-actions, .bus-chip, .row-remove, .row-insert, .row-actions, .row-actions-head, .transfers, .btn, .toast, .module-rail { display: none !important; }
  .module-frame .caldr-header .brand-compact { display: flex; }
  .caldr-header { border-bottom: 2px solid #000; padding: 0 0 10px; margin: 0 0 12px; }
  /* The screen header hangs 32 px out each side of the sheet; on
   * paper that made the document 752 px wide on a 720 px page and the
   * browser shrank every page by 4% to fit — which also let the
   * watermark tiles drift. Nothing may be wider than the page. */
  .module-main > .caldr-header { margin: 0 0 12px; }
  .module-main { max-width: none; padding: 0; }
  .module-body { grid-template-columns: 1fr; gap: 0; }
  .module-results { position: static; }
  /* PAGINATION. A panel keeps its border but may break across pages:
   * with `break-inside: avoid` on the whole panel, a fixture schedule
   * taller than a page was pushed whole onto page 2 and page 1 went
   * out three-quarters blank after the first short panel — which is
   * how the water heater sizer printed for the first outside reviewer.
   * What must not split is the small unit: a field, a table row, a
   * result tile, a drawing. A heading stays with what follows it. */
  .panel, .summary, .formula-panel, .project-bar, .diagram-card { border: 1px solid #999; box-shadow: none; }
  .project-bar, .diagram-card, .field:not(.field-rows):not(.field-static), .row-table tr, .tabulation tr, .summary-tile, .summary-line, .alert, .steps-host li, .steps-host tr { break-inside: avoid; page-break-inside: avoid; }
  .panel-head, .rows-title, .panel > h2, .summary h2, .steps-host h3 { break-after: avoid; page-break-after: avoid; }
  .row-table thead, .tabulation thead { display: table-header-group; }
  .panel { orphans: 3; widows: 3; }
  .formula-panel { display: block !important; }
  .steps-host { display: block !important; }
  .reference-host { display: block !important; }
  .panel-note-folded { display: block !important; }
  .cell-input { border: none; background: transparent; }
  .field input, .field select { border: none; border-bottom: 1px solid #999; border-radius: 0; padding-left: 0; background-image: none; }
  .check-label .switch { display: none; }
  .check-label input { position: static; opacity: 1; width: auto; height: auto; }
  .radio-segmented, .radio-cards { background: none; border: 0; padding: 0; display: flex; gap: 14px; }
  .radio-segmented .radio-option input, .radio-cards .radio-option input { position: static; opacity: 1; width: auto; height: auto; }
  .radio-segmented .radio-option, .radio-cards .radio-option { border: 0; padding: 0; background: none; box-shadow: none; }
  .disclaimer { page-break-inside: avoid; }
  a[href]::after { content: ''; }
  .row-table-wrap, .table-wrap { overflow: visible !important; }
  .row-table { min-width: 0 !important; width: 100%; table-layout: auto; font-size: 9pt; }
  .row-table td .cell-input, .row-table td .cell-input.num,
  .row-table td:first-child .cell-input, .row-table td:nth-child(2) .cell-input { min-width: 0 !important; width: 100%; }
  .row-table th, .row-table td { padding-left: 4px; padding-right: 4px; }
  /* A schedule is as wide as the page and no wider: fixed layout
   * wraps a long cell instead of pushing the table past the edge (the
   * sanitary tabulation ran to 899 px on a 720 px page). */
  .tabulation { width: 100%; max-width: 100%; table-layout: auto; font-size: 8.5pt; }
  .tabulation td { overflow-wrap: anywhere; padding-left: 4px; padding-right: 4px; }
  /* A NUMBER COLUMN IS AS WIDE AS ITS NUMBERS. Set at 1% the auto layout
   * gives a figure column its content and hands the rest of the page to
   * the words: a nine-column register used to wrap "A–E care-area
   * convention, category B" onto five lines, breaking before the comma. */
  .tabulation td.num, .tabulation th.num { width: 1%; }
  .tabulation td:not(.num) { min-width: 0; }
  .tabulation th { overflow-wrap: normal; padding-left: 4px; padding-right: 4px; }
  /* nine columns and up: smaller type, and a header word may break */
  .tabulation:has(th:nth-child(9)) { font-size: 7.5pt; }
  .tabulation:has(th:nth-child(9)) th { font-size: 6.5pt; letter-spacing: 0; padding-left: 3px; padding-right: 3px; }
  .tabulation:has(th:nth-child(9)) td { overflow-wrap: anywhere; padding-left: 3px; padding-right: 3px; }
  .row-table td select.cell-input { width: auto !important; max-width: 100%; min-width: 7.5em !important; }
  .cell-ftin .cell-input { width: 2.6em; flex-basis: 2.6em; }
  /* and the input tables share the page by content, not by the screen
   * column widths, which were set for a 900 px panel */
  .row-table colgroup col { width: auto !important; }
  .row-table th { white-space: normal; }
  .field-diagram, .diagram-wrap { break-inside: avoid; page-break-inside: avoid; }
  .rows-title, .reference-set h4, h3 { break-after: avoid; page-break-after: avoid; }
  /* A CITED TABLE MAY BREAK ACROSS PAGES. Kept whole, a long code table
   * jumped to the next page and left "CODE TABLES READ" alone over a
   * blank half page (the Common Spirit package, 22 Sep 2026). Its rows
   * are what stay whole, its heading stays with its first rows, and its
   * column headings repeat on the next page. */
  .reference-set { break-inside: auto; page-break-inside: auto; }
  .reference-set h4, .reference-set .ref-intro { break-after: avoid; page-break-after: avoid; }
  .ref-table thead { display: table-header-group; }
  .ref-table tr { break-inside: avoid; page-break-inside: avoid; }
  /* THE PROJECT PRINT: every sheet starts on a new page. (The package
   * and the sheet prints are cut into page boxes by caldr-pages.js;
   * these rules cover a print of a plain page.) */
  .print-sheet { break-before: page; page-break-before: always; }
  .print-sheet:first-of-type, .print-cover + .print-sheet { break-before: auto; page-break-before: auto; }
  .print-cover { break-after: page; page-break-after: always; }
  .print-controls { display: none !important; }
  /* Risers + results: the submittal print. */
  body.print-results-only form.module-form,
  body.print-results-only .module-form,
  body.print-results-only .reference-host,
  body.print-results-only .reference-toggle,
  body.print-results-only .project-bar { display: none !important; }
}

/* ---------------------------------------------------------------
 * print.html — the project as one package
 * ------------------------------------------------------------- */
.print-page { background: var(--bg); }
.print-controls { max-width: 1100px; margin: 0 auto; padding: 0 24px 16px; }
.print-controls > .caldr-header { margin: 0 -24px 16px; }
.print-head h2 { font-size: 1.1rem; margin-bottom: 4px; }
.print-bar { margin: 14px 0; }
.print-disciplines { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 12px; }
.print-disciplines-label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin-right: 4px; }
.print-options { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0 0 8px; font-size: .86rem; }
.print-option { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.print-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 20px; align-items: start; }
.print-phase { grid-column: 1 / -1; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin: 14px 0 2px; }
.print-item { display: grid; grid-template-columns: 20px 1fr; gap: 2px 8px; align-items: center; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; }
.print-item:hover { background: var(--surface); }
.print-item.is-empty { color: var(--ink-faint); cursor: default; }
.print-item-title { font-weight: 600; font-size: .9rem; }
.print-item-note { grid-column: 2; font-size: .74rem; color: var(--ink-soft); }
.print-package { max-width: 1100px; margin: 0 auto; padding: 0 24px 48px; }
.print-cover, .print-sheet { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px 32px; margin: 0 0 24px; box-shadow: var(--shadow); }
.print-sheet .module-main-print { padding: 0; max-width: none; }
.print-sheet .module-main-print > .caldr-header { margin: 0 0 16px; padding: 0 0 12px; border-bottom: 2px solid var(--ink); }
.print-sheet .module-body { grid-template-columns: 1fr; }
.print-sheet .module-results { position: static; }
.cover-brand { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.cover-logo { height: 56px; width: auto; }
.cover-kicker { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.cover-title { font-size: 2rem; line-height: 1.15; }
.cover-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 28px; font-size: .92rem; }
.cover-facts dt { color: var(--ink-soft); font-weight: 600; }
.cover-facts dd { margin: 0; }
.cover-h2 { font-size: 1rem; margin: 0 0 8px; }
.cover-toc { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24pt; margin: 0 0 28px; }
.cover-toc-col { list-style: none; margin: 0; padding: 0; counter-reset: sheet; }
.cover-toc-phase { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin: 12px 0 4px; }
.cover-toc-item { counter-increment: sheet; display: grid; grid-template-columns: 2.2em 1fr; gap: 0 8px; padding: 3px 0; border-bottom: 1px dotted var(--rule); }
.cover-toc-item::before { content: counter(sheet); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* the narrative is listed ahead of the sheets and is not one of them */
.cover-toc-item.cover-toc-narrative { counter-increment: none; }
.cover-toc-item.cover-toc-narrative::before { content: '\2014'; }
.cover-toc-title { font-weight: 600; }
.cover-toc-sub { grid-column: 2; font-size: .8rem; color: var(--ink-soft); }
.print-cover .disclaimer { padding: 16px 0 0; }
@media print {
  .print-page { background: transparent; }
  .print-controls, .print-controls > .caldr-header { display: none !important; }
  .print-package { max-width: none; padding: 0; }
  .print-cover, .print-sheet { border: 0; padding: 0; margin: 0; box-shadow: none; border-radius: 0; }
  /* the package leaves the long section notes and the cited code
   * tables off unless asked (print.html has the two switches) */
  body.print-no-notes .panel-note-folded { display: none !important; }
  body.print-no-refs .reference-host { display: none !important; }
  .cover-title { font-size: 26pt; }
  /* the cover stays one page: a tight contents list and the disclaimer
   * kept with it rather than spilling onto a page of its own */
  .cover-brand { margin-bottom: 14pt; }
  .cover-facts { margin: 0 0 14pt; font-size: 9pt; gap: 2pt 14pt; }
  .cover-toc { margin: 0 0 12pt; }
  .cover-toc-phase { break-after: avoid; margin: 6pt 0 2pt; }
  .cover-toc-item { padding: 1pt 0; font-size: 8.5pt; break-inside: avoid; }
  .cover-toc-sub { display: none; }
  .print-cover .disclaimer { font-size: 7pt; padding: 6pt 0 0; break-before: avoid; page-break-before: avoid; }
  .print-cover .disclaimer p { margin: 0 0 2pt; }
  .cover-toc-item { break-inside: avoid; }
}

/* ---------------------------------------------------------------
 * help.html
 * ------------------------------------------------------------- */
.help-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px 48px; }
.help-wrap > .caldr-header { margin: 0 -24px 16px; }
.help-start .help-steps { margin: 0; padding-left: 22px; }
.help-steps li { margin: 0 0 12px; }
.help-steps li b { display: block; font-size: .95rem; }
.help-steps li p { margin: 2px 0 0; color: var(--ink-soft); font-size: .9rem; }
.help-search { width: 100%; font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid var(--rule-strong); border-radius: var(--r); background: var(--surface); }
.help-search:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
.help-sheet { scroll-margin-top: 16px; }
.help-sheet.is-here { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(42,128,201,.18); }
.help-sheet h2 a { color: var(--ink); text-decoration: none; }
.help-sheet h2 a:hover { color: var(--blue-dark); text-decoration: underline; }
.help-subtitle { margin: 0 0 6px; color: var(--ink-soft); font-size: .9rem; }
.help-topics { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 6px 16px; margin: 12px 0 0; font-size: .88rem; }
.help-topics dt { font-weight: 600; color: var(--ink); }
.help-topics dd { margin: 0; color: var(--ink-soft); }
.help-kind { display: inline-block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 999px; background: var(--bg); color: var(--ink-faint); vertical-align: middle; }
.help-kind-section { background: var(--blue-pale); color: var(--blue-dark); }
.help-kind-table { background: var(--accent-pale); color: var(--accent); }
@media (max-width: 720px) { .help-topics { grid-template-columns: 1fr; } .help-topics dd { margin-bottom: 6px; } }

/* ---------------------------------------------------------------
 * THE WORKBOOK — the printed sheet, set as a calculation sheet
 * (scripts/caldr-workbook.js). Built at print time in place of the
 * screen: a title block, the answer, the basis, the drawing, the
 * schedule, the working. One face, hairline rules, no boxes.
 * On screen it does not exist; print.html shows it as the preview.
 * ------------------------------------------------------------- */
/* THE WORKBOOK IS BUILT OFF THE SCREEN. It is measured and cut into
 * pages (caldr-pages.js) before the print dialog opens, so it must be
 * laid out — at the printable width, out of sight and out of the
 * reading order — and not display: none, which has no layout. */
.wb { position: absolute; left: -20000px; top: 0; width: 7.5in; }
.wb-sheet { font-family: var(--font); color: #111; font-size: 9.5pt; line-height: 1.4; max-width: 100%; }
.wb-sheet * { box-shadow: none !important; }
/* THE LOGO FITS ITS CELL. The wordmark is 296 × 90 px — at 30pt tall it
 * is 99pt wide, and a 1.15in cell less its padding is 71pt: the tail of
 * "CALC + BUILDER" ran across the rule into the Project No. box. The
 * cell is sized for the mark and the mark is sized by the cell, so
 * neither can outgrow the other. */
.wb-titleblock {
  display: grid; grid-template-columns: 1.45in minmax(0, 1fr) 2.4in; border: 1.5px solid #111; margin: 0 0 8pt;
  break-inside: avoid; page-break-inside: avoid;
}
.wb-tb-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3pt; padding: 6pt 8pt; border-right: 1px solid #111; min-width: 0; overflow: hidden; }
.wb-tb-logo { width: 100%; max-width: 1.2in; height: auto; aspect-ratio: 296 / 90; display: block; }
.wb-tb-version { font-size: 6.5pt; color: #444; letter-spacing: .04em; text-align: center; }
.wb-tb-project { display: grid; grid-template-columns: 1fr 1fr; border-right: 1px solid #111; }
.wb-tb-cell { padding: 3pt 7pt; border-bottom: 1px solid #bbb; border-right: 1px solid #bbb; min-width: 0; }
.wb-tb-cell.wb-tb-wide { grid-column: 1 / -1; }
.wb-tb-project .wb-tb-cell:nth-last-child(-n+2) { border-bottom: 0; }
.wb-tb-project .wb-tb-cell:nth-child(even) { border-right: 0; }
.wb-tb-project .wb-tb-cell.wb-tb-wide { border-right: 0; }
.wb-tb-label { display: block; font-size: 6.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #555; }
.wb-tb-value { display: block; font-size: 9.5pt; font-weight: 600; overflow-wrap: anywhere; }
.wb-tb-sheet { padding: 5pt 8pt; display: flex; flex-direction: column; justify-content: center; }
.wb-title { font-size: 12.5pt; font-weight: 700; line-height: 1.2; margin: 0; }
.wb-subtitle { margin: 1pt 0 0; font-size: 8pt; color: #444; }
.wb-sheetno { margin: 3pt 0 0; font-size: 7.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #222; }
.wb-printed { margin: 0; font-size: 7pt; color: #666; }
.wb-checked { margin: 3pt 0 0; font-size: 6.5pt; color: #555; letter-spacing: .02em; display: flex; align-items: baseline; gap: 3pt; min-width: 0; }
.wb-checked .wb-blank { flex: 1 1 0; min-width: 12pt; border-bottom: 1px solid #777; height: 7pt; }
.wb-checked .wb-blank-short { flex: 0 0 18pt; }
.wb-method { margin: 0 0 8pt; font-size: 7.5pt; color: #444; }
.wb-section { margin: 0 0 9pt; }
.wb-h3 {
  font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #111;
  border-bottom: 1px solid #111; padding: 0 0 2pt; margin: 0 0 5pt; break-after: avoid; page-break-after: avoid;
}
.wb-h4 { font-size: 8.5pt; font-weight: 700; margin: 6pt 0 3pt; color: #222; break-after: avoid; page-break-after: avoid; }
.wb-group { margin: 0 0 4pt; }
.wb-note { font-size: 7.5pt; color: #444; margin: 0 0 4pt; }
.wb-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18pt; }
/* A VALUE NEVER LEAVES THE PAGE. The columns are capped at half the
 * sheet, the label gives way first, and a value that still cannot fit
 * wraps at a space rather than running past the right edge — a print
 * once clipped "70 PSIG" to "70 PSI" at the paper's edge. */
.wb-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8pt; padding: 1.5pt 0; border-bottom: 1px dotted #bbb; break-inside: avoid; page-break-inside: avoid; align-items: baseline; min-width: 0; }
.wb-label { color: #333; min-width: 0; }
.wb-value { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: normal; max-width: 100%; min-width: 0; }
.wb-field.wb-field-long { grid-template-columns: 1fr; }
.wb-field.wb-field-long .wb-value { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.wb-muted { color: #777; font-weight: 400; }
.wb-static { grid-column: 1 / -1; padding: 2pt 0; border-bottom: 1px dotted #bbb; font-size: 8pt; }
.wb-static .wb-label { font-weight: 700; margin-right: 6pt; }
.wb-static-text { color: #333; }
.wb-table-wrap { max-width: 100%; overflow: hidden; }
.wb-table, .wb-lines, .wb-stepstable { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
.wb-table th, .wb-table td { padding: 2pt 5pt; border-bottom: 1px solid #ccc; text-align: left; vertical-align: top; overflow-wrap: break-word; }
/* a register of nine columns or more sets smaller, as the screen does */
.wb-table:has(th:nth-child(9)) { font-size: 7pt; }
.wb-table:has(th:nth-child(9)) th, .wb-table:has(th:nth-child(9)) td { padding: 1.5pt 3pt; }
.wb-table:has(th:nth-child(9)) thead th { font-size: 6pt; letter-spacing: 0; }
.wb-table thead th { font-size: 6.8pt; text-transform: uppercase; letter-spacing: .05em; color: #333; border-bottom: 1px solid #111; background: #f2f2f2; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.wb-table th.num, .wb-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wb-table tr.wb-group td { font-size: 6.8pt; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #555; padding-top: 4pt; border-bottom: 0; }
.wb-table tr { break-inside: avoid; page-break-inside: avoid; }
.wb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(1.7in, 1fr)); gap: 5pt; margin: 0 0 6pt; }
.wb-tile { border: 1px solid #111; padding: 4pt 7pt; break-inside: avoid; page-break-inside: avoid; }
.wb-tile-label { display: block; font-size: 6.8pt; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #444; }
.wb-tile-value { display: block; font-size: 13pt; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.wb-tile-note { display: block; font-size: 7pt; color: #444; margin-top: 2pt; }
.wb-tile.tone-warn { border-color: #8a5600; }  .wb-tile.tone-warn .wb-tile-value { color: #8a5600; }
.wb-tile.tone-bad { border-color: #a32020; }   .wb-tile.tone-bad .wb-tile-value { color: #a32020; }
.wb-tile.tone-good .wb-tile-value { color: #1f7a4d; }
.wb-lines th, .wb-lines td { padding: 1.5pt 5pt; border-bottom: 1px dotted #bbb; vertical-align: top; }
.wb-lines th { text-align: left; font-weight: 400; color: #333; width: 58%; }
.wb-lines td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.wb-lines tr.wb-primary th, .wb-lines tr.wb-primary td { font-weight: 700; }
.wb-lines tr.wb-prose td { text-align: left; font-weight: 400; }
.wb-lines tr.tone-warn td { color: #8a5600; }  .wb-lines tr.tone-bad td { color: #a32020; }  .wb-lines tr.tone-good td { color: #1f7a4d; }
.wb-lines tr.wb-line-note td { text-align: left; font-weight: 400; font-size: 7.5pt; color: #444; border-bottom: 1px dotted #bbb; }
.wb-lines tr.wb-divider td { border: 0; padding: 2pt; }
.wb-lines tr { break-inside: avoid; page-break-inside: avoid; }
.wb-stepstable td, .wb-stepstable th { padding: 2pt 5pt; border-bottom: 1px solid #ddd; vertical-align: top; text-align: left; }
.wb-stepstable th { font-weight: 400; color: #222; width: 50%; }
.wb-step-n { width: 2em; color: #777; font-variant-numeric: tabular-nums; }
.wb-step-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.wb-stepstable tr.wb-step-heading th { font-weight: 700; padding-top: 5pt; border-bottom: 1px solid #111; }
.wb-stepstable tr { break-inside: avoid; page-break-inside: avoid; }
.wb-stepstable tr.wb-step-heading { break-after: avoid; page-break-after: avoid; }
/* THE LAST LINE STAYS WITH ITS TABLE. A page break before the final
 * step, the final result line or the final schedule row put one row on
 * a page of its own with the disclaimer under it. */
.wb-stepstable tr:last-child, .wb-lines tr:last-child, .wb-table tr:last-child { break-before: avoid; page-break-before: avoid; }
.wb-unanswered { border: 1px solid #8a5600; color: #8a5600; padding: 5pt 8pt; font-size: 8.5pt; }
/* the shared renderers, set to the sheet */
.wb-sheet .diagram-card { border: 1px solid #111; border-radius: 0; box-shadow: none; padding: 5pt 7pt; margin: 0 0 6pt; background: transparent; break-inside: avoid; page-break-inside: avoid; }
/* A DRAWING TAKES AT MOST HALF A PAGE. A drawing is never split, so a
 * tall one that missed the foot of a page left the rest of that page
 * blank and then most of the next — the bulk oxygen sheet printed two
 * half-empty pages in a row. Capped at half the printable height, a
 * drawing always shares its page with the sheet around it. */
.wb-sheet .caldr-diagram { display: block; width: auto; height: auto; max-width: 100%; max-height: 4.4in; margin: 0 auto; }
.wb-sheet .diagram-head { margin: 0 0 3pt; }
.wb-sheet .diagram-card .rows-title, .wb-sheet .rows-title { font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.wb-sheet .diagram-legend { font-size: 7pt; }
.wb-sheet .diagram-caption { font-size: 7.5pt; color: #333; margin: 3pt 0 0; }
.wb-sheet .field-diagram { margin: 0; padding: 0; border: 0; }
.wb-sheet .tabulation { font-size: 8pt; table-layout: auto; width: 100%; border: 0; }
.wb-sheet .tabulation th, .wb-sheet .tabulation td { padding: 2pt 4pt; border-bottom: 1px solid #ccc; overflow-wrap: anywhere; }
.wb-sheet .tabulation thead th { font-size: 6.6pt; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #111; background: #f2f2f2; print-color-adjust: exact; -webkit-print-color-adjust: exact; white-space: normal; overflow-wrap: normal; word-break: keep-all; }  /* a heading wraps between words, never inside one ("UNIT / S") */
.wb-sheet .tabulation tr.row-emphasis td { font-weight: 700; }
.wb-sheet .tab-set, .wb-sheet .panel-schedule, .wb-sheet .table-wrap { margin: 0 0 6pt; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.wb-sheet .panel-schedule .panel-head { margin: 0 0 3pt; padding: 0; }
.wb-sheet .panel-schedule .panel-head h2, .wb-sheet .panel-schedule .panel-head h3 { font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.wb-sheet .panel-count { font-size: 7pt; color: #555; }
.wb-sheet .panel-schedule .panel-note { font-size: 7.5pt; color: #333; margin: 0 0 3pt; }
.wb-sheet .tab-footnotes, .wb-sheet .after-note, .wb-sheet .reference-note { font-size: 7pt; color: #333; }
.wb-sheet .reference-set { border: 0; padding: 0; margin: 0 0 8pt; background: transparent; }
.wb-sheet .ref-table { font-size: 7.5pt; width: 100%; }
.wb-sheet .ref-table th, .wb-sheet .ref-table td { padding: 1.5pt 4pt; border-bottom: 1px solid #ddd; }
.wb-disclaimer { margin: 10pt 0 0; padding: 5pt 0 0; border-top: 1px solid #111; font-size: 6.8pt; color: #444; break-inside: avoid; page-break-inside: avoid; break-before: avoid; page-break-before: avoid; }
.wb-disclaimer p { margin: 0 0 2pt; }

/* ---------------------------------------------------------------
 * THE PAGES — the print, cut by the program (scripts/caldr-pages.js).
 * A box the size of the printable area: the running head, the body,
 * the foot with the reference-use statement and the page number, and
 * the stamp as the box's own background. The same box on screen (the
 * package's preview) and on paper, in every browser; nothing in it may
 * measure differently between the two, so no rule in here is under
 * @media print except the page break and the screen's card shadow.
 * ------------------------------------------------------------- */
.pgs { width: 7.5in; margin: 0 auto; }
.pg-measure { width: 7.5in; }
.pg-src { width: 7.5in; }
.pg {
  position: relative; width: 7.5in; height: 9.25in; box-sizing: border-box; overflow: hidden;
  font-family: var(--font); color: #111;
  background: var(--caldr-stamp, none) center / contain no-repeat #fff;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pg-head { position: absolute; left: 0; right: 0; top: 0; height: 0.22in; box-sizing: border-box; display: flex; justify-content: space-between; gap: 12pt; align-items: flex-end; padding: 0 0 3pt; font-size: 7.5pt; line-height: 1.3; color: #555; white-space: nowrap; overflow: hidden; }
.pg-head-left { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pg-head-right { flex: 0 0 auto; }
.pg-body { position: absolute; left: 0; right: 0; top: 0.22in; height: 8.61in; overflow: hidden; }
.pg-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 0.42in; box-sizing: border-box; display: flex; gap: 0 12pt; align-items: flex-start; padding: 4pt 0 0; border-top: 1px solid #999; font-size: 6.3pt; line-height: 1.3; color: #555; }
.pg-foot-text { flex: 1 1 auto; min-width: 0; }
.pg-foot-no { flex: 0 0 auto; white-space: nowrap; font-size: 7.5pt; }
/* the sheets inside the boxes carry none of the screen's card */
.pgs .print-cover, .pgs .wb-sheet { border: 0; padding: 0; margin: 0; background: transparent; box-shadow: none; border-radius: 0; max-width: none; }
.pgs .print-cover .disclaimer, .pgs .wb-disclaimer { display: none; }
.pgs .cover-toc { margin: 0 0 12pt; }
.pgs .cover-toc-item { padding: 1pt 0; font-size: 8.5pt; break-inside: avoid; }
.pgs .cover-toc-sub { display: none; }
.pgs .cover-toc-phase { margin: 6pt 0 2pt; }
.pgs .cover-brand { margin-bottom: 14pt; }
.pgs .cover-facts { margin: 0 0 14pt; font-size: 9pt; gap: 2pt 14pt; }
.pgs .cover-title { font-size: 26pt; }
.pgs .pg-continued { opacity: .85; }
/* the print stylesheet's own rules for a wide register, said again
 * here so the box measures the same on screen as on paper */
.pgs .tabulation td.num, .pgs .tabulation th.num { width: 1%; }
.pgs .tabulation td:not(.num) { min-width: 0; }
.pgs .tabulation:has(th:nth-child(9)) { font-size: 7.5pt; }
.pgs .tabulation:has(th:nth-child(9)) th { font-size: 6.5pt; letter-spacing: 0; padding-left: 3px; padding-right: 3px; }
.pgs .tabulation:has(th:nth-child(9)) td { overflow-wrap: anywhere; padding-left: 3px; padding-right: 3px; }
/* the screen: pages as sheets of paper */
@media screen {
  .pgs .pg { margin: 0 0 18px; box-shadow: 0 1px 4px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06); }
}
@media print {
  .pgs { width: 7.5in; margin: 0; }
  /* a forced break after every box and none inside it. Not
   * break-inside: avoid — a box that did not fit its paper would then
   * be pushed whole to the next sheet and split there anyway. */
  .pgs .pg { break-after: page; page-break-after: always; margin: 0; box-shadow: none; }
  .pgs .pg:last-child { break-after: auto; page-break-after: auto; }
  /* the pages carry the stamp; the fixed box would print it twice */
  body.print-workbook .caldr-watermark-box, .print-page .caldr-watermark-box { display: none !important; }
  body.print-workbook .module-frame, body.print-workbook > .disclaimer, body.print-workbook .toast,
  body.print-workbook .caldr-header, body.print-workbook .project-bar { display: none !important; }
  body.print-workbook .wb { position: static; width: auto; }
  .print-page .print-mount, .print-page .print-sources { display: none !important; }
}
/* print.html reads the sheets it builds and shows the pages cut from them */
.print-page .print-mount, .print-page .print-sources { display: none; }

/* a cell that does not apply to its row (a wing roof's height) */
td.cell-na .cell-input { background: transparent; border-color: transparent; color: var(--ink-muted, #888); }
td.cell-na .cell-ftin-unit { opacity: .35; }

/* ---------------------------------------------------------------
 * narrative.html — the design narrative, written from the sheets
 * (scripts/caldr-narrative.js, caldr-narrative-page.js)
 *
 * The article (.nv) is laid out once for the editor and once for the
 * pages, and the pages are cut by measuring it on screen, so every
 * rule for .nv holds on screen and on paper alike — none of it is
 * under @media print.
 * ------------------------------------------------------------- */
.narrative-page { background: var(--bg); }
.nv-app { max-width: 1440px; margin: 0 auto; padding: 0 24px 48px; }
.nv-app > .caldr-header { margin: 0 -24px 16px; }
.nv-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.nv-settings { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px 16px; box-shadow: var(--shadow); }
.nv-settings-title { font-size: 1rem; margin: 0 0 4px; }
.nv-group { border-top: 1px solid var(--rule); padding: 6px 0; }
.nv-group > summary { cursor: pointer; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); padding: 4px 0; list-style: none; display: flex; align-items: center; gap: 6px; }
.nv-group > summary::-webkit-details-marker { display: none; }
.nv-group > summary::before { content: '▸'; font-size: .7rem; color: var(--ink-faint); transition: transform .12s; }
.nv-group[open] > summary::before { transform: rotate(90deg); }
.nv-group-body { padding: 4px 0 6px; display: grid; gap: 8px; }
.nv-field { display: grid; gap: 3px; }
.nv-field label { font-size: .76rem; font-weight: 600; color: var(--ink-soft); }
.nv-input { font: inherit; font-size: .84rem; padding: 6px 8px; border: 1px solid var(--rule-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); width: 100%; box-sizing: border-box; }
.nv-input:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
textarea.nv-input { resize: vertical; line-height: 1.4; }
.nv-check { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; font-size: .84rem; cursor: pointer; padding: 2px 0; }
.nv-check input { margin: 3px 0 0; }
.nv-reset { margin-top: 10px; }
.nv-bar { margin-bottom: 8px; }
.nv-views { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--r-sm); overflow: hidden; }
.nv-views .btn { border: 0; border-radius: 0; }
.nv-views .btn + .btn { border-left: 1px solid var(--rule-strong); }
.nv-views .btn.is-on { background: var(--blue-pale); color: var(--blue-dark); }
.nv-status { margin: 0 0 12px; font-size: .8rem; color: var(--ink-soft); }
.nv-status.is-flash { color: var(--good); font-weight: 600; }
/* the editor: the article on a sheet, with each paragraph's tools beside it */
.nv-main { min-width: 0; }
.nv-editor { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px 44px 44px; max-width: 8.5in; box-sizing: border-box; overflow-x: auto; }
.nv-mode-pages .nv-editor { display: none; }
/* the pages are laid out even while the editor is showing: they are
 * measured, and a box with display: none has no size to measure */
.nv-mode-edit .nv-pages { position: absolute; left: -20000px; top: 0; width: 7.5in; }
.nv-mode-pages .nv-pages { position: static; width: auto; overflow-x: auto; }
.nv-wrap { position: relative; }
.nv-wrap.is-hidden .nv-block { opacity: .38; }
.nv-wrap.is-hidden .nv-p { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.35); }
.nv-tools { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin: -4px 0 8px; font-size: .68rem; color: var(--ink-faint); min-height: 14px; opacity: 0; transition: opacity .12s; }
.nv-wrap:hover .nv-tools, .nv-wrap:focus-within .nv-tools, .nv-wrap.is-hidden .nv-tools, .nv-wrap.is-edited .nv-tools { opacity: 1; }
.nv-from { margin-right: auto; }
.nv-tool { font: inherit; font-size: .68rem; font-weight: 600; padding: 1px 7px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--surface); color: var(--ink-soft); cursor: pointer; }
.nv-tool:hover { background: var(--bg-2); color: var(--ink); }
.nv-editor .nv-p[contenteditable] { cursor: text; border-radius: 3px; outline: none; transition: background .12s, box-shadow .12s; }
.nv-editor .nv-p[contenteditable]:hover { background: #f6f9fd; }
.nv-editor .nv-p[contenteditable]:focus { background: #fffbe8; box-shadow: 0 0 0 4px #fffbe8; }
.nv-editor .nv-p.is-edited { border-left: 3px solid var(--accent); padding-left: 8px; margin-left: -11px; }
/* THE ARTICLE. One face, a narrow measure, the sheet's figures and
 * tables at the sheet's sizes — the same in the editor and in the box. */
.nv { font-family: var(--font); color: #111; font-size: 9.5pt; line-height: 1.45; }
.nv-head { margin: 0 0 10pt; padding: 0 0 8pt; border-bottom: 2px solid #111; }
.nv-kicker { font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin: 0 0 3pt; }
.nv-title { font-size: 20pt; line-height: 1.15; font-weight: 700; margin: 0; }
.nv-phase { font-size: 9.5pt; color: #444; margin: 2pt 0 0; }
.nv-facts { display: grid; grid-template-columns: max-content 1fr; gap: 1pt 14pt; margin: 0 0 10pt; font-size: 8.5pt; }
.nv-facts dt { color: #555; font-weight: 600; }
.nv-facts dd { margin: 0; }
.nv-disclaimer { font-size: 7.5pt; color: #444; margin: 0 0 14pt; padding: 5pt 8pt; border: 1px solid #bbb; }
.nv-section { margin: 0 0 12pt; }
.nv-h2 { font-size: 11pt; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 5pt; padding: 0 0 2pt; border-bottom: 1px solid #111; break-after: avoid; page-break-after: avoid; }
.nv-p { margin: 0 0 6pt; white-space: pre-line; overflow-wrap: anywhere; }
.nv-p.is-boilerplate { color: #111; }
.nv-list ul { margin: 0 0 6pt; padding-left: 16pt; }
.nv-list li { margin: 0 0 2pt; }
.nv-caption { margin: 0 0 3pt; font-size: 7.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #333; }
.nv-table-wrap { margin: 0 0 8pt; }
.nv .nv-table { font-size: 8pt; width: 100%; border-collapse: collapse; background: transparent; table-layout: auto; }
.nv .nv-table th, .nv .nv-table td { padding: 2pt 5pt; border-bottom: 1px solid #ccc; vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.nv .nv-table thead th { font-size: 6.6pt; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #111; background: #f2f2f2; print-color-adjust: exact; -webkit-print-color-adjust: exact; white-space: normal; word-break: keep-all; overflow-wrap: normal; }
.nv .nv-table th.num, .nv .nv-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nv .nv-table td:first-child { font-weight: 600; }
.nv .nv-table tbody tr:last-child td { border-bottom: 1px solid #ccc; }
.nv-sources { font-size: 7pt; color: #555; margin: 0 0 2pt; }
/* the figures: the sheet's own card, at the sheet's print sizes */
.nv .field-diagram { margin: 2pt 0 8pt; padding: 0; border: 0; }
.nv .diagram-card { border: 1px solid #111; border-radius: 0; box-shadow: none; padding: 5pt 7pt; margin: 0; background: transparent; break-inside: avoid; page-break-inside: avoid; }
.nv .diagram-head { margin: 0 0 3pt; }
.nv .diagram-card .rows-title { font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.nv .diagram-legend { font-size: 7pt; }
.nv .diagram-wrap { border: 0; border-radius: 0; padding: 0; overflow: visible; }
.nv .caldr-diagram { display: block; width: auto; height: auto; max-width: 100%; max-height: 4.2in; margin: 0 auto; }
.nv .diagram-caption { font-size: 7.5pt; color: #333; margin: 3pt 0 0; }
.nv .rows-note { font-size: 7.5pt; color: #333; margin: 0 0 3pt; max-width: none; }
.pgs .nv { max-width: none; }
/* the editor reads at screen sizes; the pages keep the paper's */
.nv-editor .nv { font-size: 10.5pt; }
.nv-editor .nv .nv-disclaimer, .nv-editor .nv .nv-sources, .nv-editor .nv .nv-caption, .nv-editor .nv .diagram-caption, .nv-editor .nv .nv-table, .nv-editor .nv .nv-facts, .nv-editor .nv .rows-note { font-size: 8.5pt; }
.nv-editor .nv .nv-table thead th { font-size: 7.5pt; }
@media (max-width: 900px) {
  .nv-layout { grid-template-columns: minmax(0, 1fr); }
  .nv-settings { position: static; max-height: none; }
  .nv-editor { padding: 20px 16px 28px; }
  /* a thumb needs more than a pill: the paragraph tools grow to a tap target */
  .nv-tools { opacity: 1; margin: 0 0 10px; }
  .nv-tool { padding: 7px 12px; font-size: .8rem; }
}
@media print {
  .narrative-page { background: transparent; }
  .narrative-page .nv-app > .caldr-header, .narrative-page .nv-settings, .narrative-page .nv-bar, .narrative-page .nv-status, .narrative-page .nv-editor { display: none !important; }
  .narrative-page .nv-app { max-width: none; padding: 0; margin: 0; }
  .narrative-page .nv-layout { display: block; }
  .narrative-page .nv-pages { position: static !important; left: auto !important; width: auto !important; }
  .narrative-page .caldr-watermark-box { display: none !important; }
}

/* The package contents link to each sheet's first page; they read as text. */
a.cover-toc-title { color: inherit; text-decoration: none; }
a.cover-toc-title:hover { text-decoration: underline; }

/* What moved since a sheet last calculated (cross-calc consistency). */
.stale-note ul { margin: 6px 0 6px 18px; padding: 0; }
.stale-note p { margin: 4px 0 0; font-size: .84rem; }

/* Project Health on the menu. */
.health { margin: 0 0 20px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.health[hidden] { display: none; }
.health-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.health-head h2 { font-size: .95rem; margin: 0 8px 0 0; }
.health-count { font-size: .74rem; font-weight: 700; letter-spacing: .03em; padding: 3px 8px; border-radius: 999px; }
.health-count.health-action { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-line); }
.health-count.health-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); }
.health-count.health-pass { background: var(--good-bg); color: var(--good); border: 1px solid var(--good-line); }
.health-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.health-row a { display: grid; grid-template-columns: 12px minmax(140px, 220px) 1fr; gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-size: .86rem; }
.health-row a:hover { background: var(--bg-2); }
.health-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); display: inline-block; }
.health-action .health-dot { background: var(--bad); }
.health-warn .health-dot { background: #c98a00; }
.health-title { font-weight: 600; }
.health-why { color: var(--ink-soft); }
@media (max-width: 640px) { .health-row a { grid-template-columns: 12px 1fr; } .health-why { grid-column: 2; } }

/* Assumption register */
.register-main { max-width: 1400px; margin: 0 auto; padding: 16px; }
.reg-count { color: var(--ink-soft); font-size: .88rem; margin: 6px 0 10px; }
.reg-table td { vertical-align: top; font-size: .82rem; }
.reg-basis { color: var(--ink-soft); max-width: 420px; }
.reg-confirm { margin-top: 4px; color: var(--warn); font-size: .78rem; }
.reg-ok label { display: flex; gap: 6px; align-items: center; font-weight: 600; margin-bottom: 4px; white-space: nowrap; }
.reg-ok .cell-input { width: 100%; min-width: 140px; }
tr.reg-drifted td { background: var(--warn-bg); }
@media print { .reg-ok .cell-input { border: none; padding: 0; } }

/* Disciplines under construction on the menu. */
.category-card.is-upcoming { opacity: .6; cursor: default; border-style: dashed; }
.category-card.is-upcoming:hover { transform: none; box-shadow: none; }
.cc-soon { font-size: 1.6rem; width: 40px; text-align: center; color: var(--ink-faint); }

/* The sheet toolbar's File menu. */
.file-menu { position: relative; }
.file-menu > summary { list-style: none; cursor: pointer; }
.file-menu > summary::-webkit-details-marker { display: none; }
.file-menu-list { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; min-width: 180px; display: grid; gap: 4px;
  padding: 6px; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r); box-shadow: var(--shadow-lift); }
.file-menu-list .btn { justify-content: flex-start; width: 100%; }

/* The shared-values panel on the menu, folded. */
details.bus-panel > summary { cursor: pointer; list-style: none; }
details.bus-panel > summary::-webkit-details-marker { display: none; }
details.bus-panel > summary h2 { display: inline; }
details.bus-panel > summary h2::before { content: '\25b8  '; color: var(--ink-faint); }
details.bus-panel[open] > summary h2::before { content: '\25be  '; }

/* Project Health as one badge line (25 Sep review). */
.health { padding: 8px 12px; }
.health-checking { margin: 0; color: var(--ink-faint); font-size: .84rem; }
.health-fold > summary { list-style: none; cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.health-fold > summary::-webkit-details-marker { display: none; }
.health-label { font-weight: 700; font-size: .9rem; margin-right: 4px; }
.health-label::before { content: '\25b8  '; color: var(--ink-faint); }
.health-fold[open] .health-label::before { content: '\25be  '; }
.health-fold[open] .health-list { margin-top: 8px; }
.health-count.health-grey { background: var(--bg-2); color: var(--ink-soft); border: 1px solid var(--rule-strong); }
.health-grey .health-dot { background: #9aa4b1; }

/* Which sheets this project uses (menu, Project Mode). */
.scope-panel { margin: 0 0 12px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.scope-panel[hidden] { display: none; }
.scope-panel > summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: baseline; }
.scope-panel > summary::-webkit-details-marker { display: none; }
.scope-label { font-weight: 700; font-size: .9rem; }
.scope-label::before { content: '\25b8  '; color: var(--ink-faint); }
.scope-panel[open] .scope-label::before { content: '\25be  '; }
.scope-sub { color: var(--ink-soft); font-size: .84rem; }
.scope-presets { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.scope-note { color: var(--ink-soft); font-size: .82rem; }
.scope-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 18px; align-items: start; }
.scope-phase { display: grid; gap: 3px; font-size: .84rem; align-content: start; }
.scope-item { display: flex; gap: 6px; align-items: baseline; }

/* ---- The private beta (hosted only: caldr-auth.js sets html.caldr-beta) ---- */
.beta-badge { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 7px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .08em; line-height: 1.5; }
html.caldr-beta .caldr-header .header-text h1::after { content: 'BETA'; display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: 2px 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .62rem; font-weight: 700;
  letter-spacing: .08em; line-height: 1.5; }
@media print { html.caldr-beta .caldr-header .header-text h1::after { border: 1px solid #000; color: #000; background: none; } }
.beta-blocked { max-width: 420px; margin: 18vh auto; padding: 24px; text-align: center; font-family: inherit; }
.accept-box { max-width: 560px; text-align: left; }
.accept-box img, .accept-box h1 { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.accept-summary { font-size: .88rem; line-height: 1.5; }
.accept-summary ul { margin: 6px 0 10px 18px; }
.accept-summary li { margin: 4px 0; }
.accept-box .btn { white-space: normal; line-height: 1.35; }
.accounts-invite { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; align-items: end; }
.accounts-invite-go .btn { width: 100%; justify-content: center; }
.accounts-table td { vertical-align: top; }
.accounts-actions { white-space: nowrap; }
.accounts-actions .btn { font-size: .78rem; padding: 4px 8px; }
.accounts-role { color: var(--accent); font-weight: 600; font-size: .78rem; }
.legal-page { background: var(--bg); }
.legal-doc { max-width: 760px; margin: 0 auto; padding: 32px 20px 60px; background: var(--surface); line-height: 1.55; font-size: .92rem; }
.legal-doc h1 { font-size: 1.4rem; margin-bottom: 10px; }
.legal-doc h2 { font-size: 1.05rem; margin: 22px 0 6px; }
.legal-doc ul { margin: 6px 0 10px 20px; }
.legal-doc .legal-meta { margin: 0; color: var(--ink-soft); font-size: .82rem; }
html.caldr-beta .menu-hero h1::after { content: 'BETA'; display: inline-block; vertical-align: middle; margin-left: 10px;
  padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .08em; }

/* ---- A clean start on opening (menu.html) ---- */
.open-prompt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--rule); border-left: 4px solid var(--blue-solid);
  border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-lift); }
.open-prompt[hidden] { display: none; }
.open-prompt .op-text { margin: 0; flex: 1 1 320px; font-size: .9rem; line-height: 1.45; }
.open-prompt .op-note { display: block; color: var(--ink-soft); font-size: .8rem; }
.open-prompt .op-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Printed pages use Inter's standard letter shapes (Mike, 25 Sep 2026) ----
 * On screen the single-storey a and the open 3/4/6/9 (cv11, ss01) stay. In a
 * PDF, Safari cannot map those alternate glyphs back to letters, so the text
 * layer lost every a, 3, 4, 6 and 9: a printed sheet could not be searched or
 * copied from ("Bulk Oxygen Storge", "v2.1.1"). */
@media print {
  /* and no contextual alternates: Inter swaps a hyphen, colon or bracket
   * between digits for a raised shape ("2026-09-23", "08:31", "(2024)")
   * that a PDF cannot map back to its character either */
  /* and ordinary digits: fixed-width ones (tabular-nums) are separate
   * glyphs too, and a printed "40 days" or "28.317" lost its digits */
  body, body * { font-feature-settings: 'calt' 0 !important; font-variant-numeric: normal !important; }
}

/* ---- Menu: the file tools, Help and Sign out across the top (Mike, 25 Sep 2026) ---- */
.menu-topbar { max-width: 1180px; margin: 16px auto 0; padding: 0 24px; }
.menu-topbar .toolbar { margin: 0; }
@media (max-width: 720px) { .menu-topbar { padding: 0 16px; margin-top: 12px; } }
@media print { .menu-topbar { display: none; } }

/* ---- Calculate at the foot of the inputs (Mike, 25 Sep 2026) ---- */
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 4px 0 18px; }
.form-actions-note { color: var(--ink-soft); font-size: .8rem; }
@media print { .form-actions { display: none; } }