/* Chenfan Electric · Transformer Core Loss & Weight Calculator
   Visual layer aligned to chenfanelectric.com (charcoal / cream / bronze).
   Presentation layer only. No calculation code or private material data.
   Direction-aware (logical properties) for LTR and RTL site languages. */

:root {
  /* Surfaces — sampled from chenfanelectric.com */
  --c-header: #141819;
  --c-dark: #191d1e;
  --c-dark-2: #151a1b;
  --c-dark-3: #1f2425;
  --c-cream: #efeae2;
  --c-cream-btn: #eeeae2;
  --c-paper: #f6f3ee;
  --c-field: #fcfbf8;
  --c-table-head: #ebe6de;
  --c-row-hover: #f0ece5;
  --c-preview: #ece7df;

  /* Lines */
  --c-line-dark: #383b3b;
  --c-hair-dark: #323637;
  --c-hair-cream: #cfcbc4;
  --c-hair-cream-2: #dfdad2;

  /* Text */
  --c-ink: #0c1011;
  --c-ink-2: #3a3f3d;
  --c-sage: #646a66;
  --c-sage-light: #979d98;
  --c-text-on-dark: #b1b3ae;
  --c-muted-on-dark: #8a908c;
  --c-cream-text: #f0eee8;
  --c-value-on-dark: #d0cfcb;

  /* Accent — bronze engineering numerals, units, rules */
  --c-bronze: #bda17b;
  --c-bronze-ink: #8f7550;
  --c-bronze-soft: #dccab0;

  /* States */
  --c-success: #86a58f;
  --c-error: #a4433b;
  --c-error-on-dark: #dc9187;
  --c-error-soft: #f7ebe6;
  --c-notice-soft: #f3ede1;

  /* Type — Latin/Cyrillic/Vietnamese first, then CJK, Thai and Arabic system faces */
  --font-sans: "Helvetica Neue", Helvetica, Inter, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC",
    "Sukhumvit Set", Thonburi, "Leelawadee UI", "Noto Sans Thai", "Noto Sans Thai UI", "Geeza Pro", "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --font-label: var(--font-mono);

  /* Tracking for uppercase labels; set to 0 for scripts without case (see :lang rules) */
  --track-label: .16em;
  --track-title: -.03em;

  /* Layout */
  --header-h: 72px;
  --pad: clamp(16px, 5vw, 72px);
  --maxw: 1580px;
  --panel-pad: 24px;

  color-scheme: light;
}

/* Scripts without letter case: no uppercase tracking (Arabic joining, Thai marks, CJK) */
:lang(ar), :lang(th), :lang(zh) {
  --track-label: 0;
  --track-title: 0;
  --font-label: var(--font-sans);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-ink);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select, summary { cursor: pointer; }
button { -webkit-tap-highlight-color: transparent; }
button:disabled, select:disabled { cursor: default; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.site-header :focus-visible, .tool-hero :focus-visible, .results-panel :focus-visible, .mfg-cta :focus-visible,
.review-head :focus-visible, .site-footer :focus-visible { outline-color: var(--c-cream-text); }

/* Hold the calculator until the site language is applied (fallback reveal if the script never runs) */
[data-i18n-pending] { visibility: hidden; animation: i18n-reveal 0s linear 1.5s forwards; }
@media (scripting: none) { [data-i18n-pending] { visibility: visible; animation: none; } }
@keyframes i18n-reveal { to { visibility: visible; } }

.container { width: min(var(--maxw), calc(100% - 2 * var(--pad))); margin-inline: auto; }
.calc-root { overflow-wrap: break-word; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; z-index: 60; inset-inline-start: 12px; top: -80px; padding: 10px 14px; background: var(--c-cream-btn); color: var(--c-ink); font-size: 13px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }
.eyebrow { display: flex; align-items: baseline; gap: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: calc(var(--track-label) * 1.25); text-transform: uppercase; color: var(--c-sage); }
.eyebrow-dark { color: var(--c-sage-light); }

/* ---------- Header (replica of site header; theme header replaces it on WordPress) ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--c-header); color: var(--c-cream-text); border-bottom: 1px solid var(--c-line-dark); }
.header-inner { height: var(--header-h); width: min(var(--maxw), calc(100% - 2 * var(--pad))); margin-inline: auto; display: flex; align-items: center; gap: 24px; }
.brand { position: relative; flex: none; display: flex; align-items: center; gap: 12px; color: var(--c-cream-text); text-decoration: none; }
.brand::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -13px; width: 42px; height: 1px; background: var(--c-bronze); opacity: .55; }
.brand-mark { display: block; width: 38px; height: auto; }
.brand-word { display: block; width: 112px; height: auto; }

.primary-nav { margin-inline-start: auto; }
.primary-nav > ul { display: flex; gap: clamp(12px, 1.2vw, 20px); margin: 0; padding: 0; list-style: none; }
.primary-nav > ul > li { position: relative; }
.primary-nav > ul > li > a {
  position: relative; display: flex; align-items: center; gap: 5px; height: var(--header-h);
  color: var(--c-text-on-dark); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.primary-nav > ul > li > a:hover, .primary-nav > ul > li > a.is-current { color: var(--c-cream-text); }
.primary-nav > ul > li > a.is-current::after { content: ""; position: absolute; inset-inline: 0 .14em; bottom: 22px; height: 1px; background: currentColor; }
.submenu { position: absolute; top: 100%; inset-inline-start: -18px; min-width: 280px; margin: 0; padding: 8px 0; list-style: none; background: var(--c-header); border: 1px solid var(--c-line-dark); border-top-color: var(--c-bronze); visibility: hidden; opacity: 0; }
.has-menu:hover .submenu, .has-menu:focus-within .submenu { visibility: visible; opacity: 1; }
.submenu a { display: flex; align-items: baseline; gap: 12px; padding: 12px 18px; color: var(--c-text-on-dark); font-size: 13px; font-weight: 600; text-decoration: none; }
.submenu a:hover, .submenu a[aria-current="page"] { color: var(--c-cream-text); background: var(--c-dark); }
.submenu-index { font-family: var(--font-mono); font-size: 10.5px; color: var(--c-bronze); }
.chevron { width: 9px; height: 6px; flex: none; }

.header-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.lang-menu { position: relative; }
.lang-menu > summary { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 60px; height: 32px; padding-inline: 10px 9px; border: 1px solid var(--c-line-dark); background: var(--c-dark); color: var(--c-cream-text); font-size: 11px; letter-spacing: .04em; list-style: none; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu .chevron { width: 7px; color: var(--c-muted-on-dark); }
.lang-list { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 5; min-width: 190px; margin: 0; padding: 6px 0; list-style: none; background: var(--c-header); border: 1px solid var(--c-line-dark); }
.lang-list a, .mobile-lang a { display: block; padding: 8px 14px; color: var(--c-text-on-dark); font-size: 13px; text-decoration: none; }
.lang-list a:hover, .lang-list a[aria-current="true"] { color: var(--c-cream-text); background: var(--c-dark); }
.header-link { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding-inline-start: 16px; border-inline-start: 1px solid var(--c-line-dark); color: var(--c-sage-light); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.header-link:hover { color: var(--c-cream-text); }
.arrow-ne { width: 9px; height: 9px; flex: none; }
[dir="rtl"] .arrow-ne, [dir="rtl"] .button-arrow { transform: scaleX(-1); }

.btn { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 18px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.btn-outline { border: 1px solid var(--c-line-dark); color: var(--c-cream-text); background: transparent; }
.btn-outline:hover { border-color: #6b706e; }
.btn-cream { border: 1px solid var(--c-cream-btn); color: var(--c-ink); background: var(--c-cream-btn); }
.btn-cream:hover { background: #fff; border-color: #fff; }

.mobile-menu { display: none; }
.mobile-menu > summary { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--c-line-dark); list-style: none; color: var(--c-cream-text); }
.mobile-menu > summary::-webkit-details-marker { display: none; }
.burger { position: relative; display: block; width: 18px; height: 10px; }
.burger i { position: absolute; inset-inline: 0; height: 1.5px; background: currentColor; }
.burger i:first-child { top: 0; }
.burger i:last-child { bottom: 0; }
.mobile-menu[open] .burger i:first-child { top: 4.25px; transform: rotate(45deg); }
.mobile-menu[open] .burger i:last-child { bottom: 4.25px; transform: rotate(-45deg); }
.mobile-nav { position: absolute; inset-inline: 0; top: 100%; max-height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 4px var(--pad) 24px; background: var(--c-header); border-bottom: 1px solid var(--c-line-dark); }
.mobile-nav ul { margin: 0; padding: 0; list-style: none; }
.mobile-nav > ul > li > a { display: flex; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--c-hair-dark); color: var(--c-text-on-dark); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.mobile-nav > ul > li > a.is-current { color: var(--c-cream-text); }
.mobile-submenu a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-inline-start: 18px; border-bottom: 1px solid var(--c-hair-dark); color: var(--c-cream-text); font-size: 13px; text-decoration: none; }
.mobile-submenu a::before { content: ""; width: 6px; height: 6px; background: var(--c-bronze); }
.mobile-lang { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 16px !important; }
.mobile-lang a { padding: 6px 9px; border: 1px solid var(--c-hair-dark); font-size: 12px; }
.mobile-lang a[aria-current="true"] { color: var(--c-cream-text); border-color: var(--c-bronze); }
.mobile-nav .btn { width: 100%; justify-content: center; height: 48px; margin-top: 22px; }

/* ---------- 1. Tool hero ---------- */
.tool-hero { background: var(--c-dark); color: var(--c-cream-text); padding: 24px 0 48px; }
.hero-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 30px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-family: var(--font-label); font-size: 11px; letter-spacing: calc(var(--track-label) * .75); text-transform: uppercase; color: var(--c-muted-on-dark); }
.breadcrumb li + li::before { content: "/"; margin-inline: .75em; color: #5b605e; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--c-cream-text); }
.breadcrumb [aria-current="page"] { color: var(--c-cream-text); }
.env-tag { flex: none; padding: 5px 9px; border: 1px solid #4b4538; color: var(--c-bronze); font-family: var(--font-label); font-size: 10.5px; letter-spacing: calc(var(--track-label) * .9); text-transform: uppercase; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr); gap: clamp(32px, 5vw, 96px); align-items: end; }
.hero-copy .eyebrow { margin-bottom: 16px; }
h1 { font-size: clamp(32px, 2.8vw + 18px, 58px); font-weight: 700; line-height: 1.03; letter-spacing: var(--track-title); color: var(--c-cream-text); overflow-wrap: anywhere; hyphens: auto; }
.h1-line { display: block; }
.h1-muted { color: var(--c-sage-light); }
.hero-lead { max-width: 44em; margin-top: 22px; color: var(--c-text-on-dark); font-size: 15.5px; line-height: 1.6; }
.hero-link { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--c-bronze); font-size: 13px; }
.hero-rule { flex: none; width: 28px; height: 1px; background: var(--c-bronze); }
.how-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-hair-dark); }
.how-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--c-hair-dark); }
.how-num { font-family: var(--font-mono); font-size: 11px; color: var(--c-bronze); padding-top: 2px; }
.how-list .how-title { margin-top: 0; color: var(--c-cream-text); font-size: 14px; font-weight: 700; line-height: 1.4; }
.how-list p { margin-top: 2px; color: var(--c-muted-on-dark); font-size: 13px; line-height: 1.5; }

/* ---------- 2. Calculator section ---------- */
.calculator-section { padding: 32px 0 72px; outline: none; }
.workspace-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--c-hair-cream); }
.toolbar-start { display: flex; align-items: center; gap: 16px; min-width: 0; }
.toolbar-hint { color: var(--c-sage); font-size: 12.5px; line-height: 1.45; }
.load-status { color: var(--c-sage); font-family: var(--font-label); font-size: 11px; line-height: 1.5; text-align: end; }

.error-summary { display: flex; gap: 12px; margin: 0 0 20px; padding: 14px 18px; border: 1px solid #dbb7ad; border-inline-start: 3px solid var(--c-error); background: var(--c-error-soft); color: #7d2f28; outline: none; }
.error-icon { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border: 1px solid currentColor; font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.error-summary strong { display: block; font-size: 13px; font-weight: 700; }
.error-summary p { margin-top: 4px; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.error-list { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.error-list button { padding: 3px 8px; border: 1px solid #d7aea4; background: #fff8f5; color: #7d2f28; font-size: 12px; }
.error-list button:hover { border-color: var(--c-error); }

.calculator-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(330px, .86fr); gap: 24px; align-items: start; }

/* Panels */
.panel { min-width: 0; margin: 0; padding: 0; border: 1px solid var(--c-hair-cream); background: var(--c-paper); }
fieldset.panel { display: block; }
.panel-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 18px var(--panel-pad); border-bottom: 1px solid var(--c-hair-cream); }
.panel-heading-text { display: flex; align-items: baseline; gap: 14px; min-width: 0; max-width: 100%; }
.section-number { flex: none; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .04em; color: var(--c-bronze-ink); }
.panel-heading h3 { font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: calc(var(--track-title) * .3); overflow-wrap: break-word; hyphens: auto; }
.panel-body { padding: 22px var(--panel-pad) 8px; }

.form-section-heading { margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--c-hair-cream-2); color: var(--c-sage); font-size: 10.5px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.second-section { margin-top: 12px; }

/* Fields: label / control / below (help + error). Subgrid keeps controls in one row aligned
   even when a translated label wraps to two lines in one column only. */
.input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 0; }
.field { min-width: 0; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.field-wide { grid-column: 1 / -1; }
.field-below { min-width: 0; padding-bottom: 18px; }
.field label, .field .field-label { display: block; align-self: end; margin-bottom: 8px; font-size: 13px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; hyphens: auto; }
.field input, .field select, .levels-table input, .rfield input, .rfield textarea {
  display: block; width: 100%; min-width: 0; height: 44px; padding: 0 12px;
  border: 1px solid var(--c-hair-cream); border-radius: 0; background: var(--c-field); color: var(--c-ink);
  font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.field select {
  appearance: none; -webkit-appearance: none; padding-inline: 12px 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230c1011' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 10px 6px; text-overflow: ellipsis;
}
[dir="rtl"] .field select { background-position: left 13px center; }
.field select optgroup { font-style: normal; font-weight: 700; color: var(--c-sage); }
.field select option { font-weight: 500; color: var(--c-ink); }
.field input:hover, .field select:hover, .levels-table input:hover, .rfield input:hover, .rfield textarea:hover { border-color: #a9a49a; }
.field input:focus, .field select:focus, .levels-table input:focus, .rfield input:focus, .rfield textarea:focus { outline: none; border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
.fixed-value { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--c-hair-cream-2); color: var(--c-sage); font-size: 13px; font-weight: 500; line-height: 1.35; }
/* Numbers are right-aligned (engineering convention) and always LTR; units sit inside the field */
.input-with-unit { position: relative; }
.input-with-unit input { padding-right: 48px; text-align: right; }
.input-with-unit.no-unit input { padding-right: 12px; }
.input-with-unit > .unit { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); pointer-events: none; color: var(--c-sage); font-family: var(--font-mono); font-size: 11px; }
.input-with-unit { direction: ltr; }
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; }
input::placeholder, textarea::placeholder { color: #a8a59e; font-weight: 400; }
fieldset:disabled input, fieldset:disabled select { opacity: .55; }
.field-help { margin-top: 7px; color: var(--c-sage); font-family: var(--font-label); font-size: 11px; line-height: 1.55; }
.field-error { margin-top: 6px; color: var(--c-error); font-size: 11.5px; line-height: 1.55; overflow-wrap: anywhere; }
[aria-invalid="true"], .has-error input, .has-error select { border-color: var(--c-error) !important; background-color: #fbf1ed !important; }

/* Core dimensions: the diameter note sits directly under its row, full width, without shifting either input */
.core-grid .field-diameter { grid-column: 1; grid-row: 1 / span 3; }
.core-grid .field-max-width { grid-column: 2; grid-row: 1 / span 3; }
.core-grid .field-note { grid-column: 1 / -1; grid-row: 4; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: -10px 0 18px; color: var(--c-sage); font-size: 11.5px; line-height: 1.5; }
.core-grid .field-note p { flex: 1 1 260px; }
/* keep the note (and its button) above the neighbouring field's bottom padding, which it overlaps by design */
.core-grid .field-note { position: relative; z-index: 1; }
.text-button { padding: 0; border: 0; border-bottom: 1px solid var(--c-bronze); background: none; color: var(--c-ink); font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.text-button:hover:not(:disabled) { color: var(--c-bronze-ink); }
.text-button:disabled { color: #a3a09a; border-color: var(--c-hair-cream-2); cursor: default; }

/* ---------- 02 Lamination stack ---------- */
.stepper { display: inline-flex; align-items: center; flex: none; border: 1px solid var(--c-hair-cream); background: var(--c-field); }
.stepper-label { padding-inline: 10px 8px; color: var(--c-sage); font-size: 10px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.stepper-button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-inline-start: 1px solid var(--c-hair-cream); background: transparent; color: var(--c-ink); font-size: 17px; line-height: 1; }
.stepper-button:hover:not(:disabled) { background: #ebe6dd; }
.stepper-button:disabled { color: #b5b1a9; }
.stepper-value { min-width: 38px; padding-inline: 6px; border-inline-start: 1px solid var(--c-hair-cream); font-family: var(--font-mono); font-size: 13px; font-weight: 600; line-height: 34px; text-align: center; font-variant-numeric: tabular-nums; }

.levels-description { padding: 14px var(--panel-pad); border-bottom: 1px solid var(--c-hair-cream-2); }
.levels-description p { color: var(--c-ink-2); font-size: 12.5px; line-height: 1.6; }
.levels-description .levels-tip { margin-top: 2px; color: var(--c-sage); font-size: 11.5px; }

.section-preview { position: relative; margin: 0; padding: 12px var(--panel-pad) 10px; border-bottom: 1px solid var(--c-hair-cream-2); background: var(--c-preview); }
.section-svg { display: block; width: 100%; height: 150px; }
.section-svg .sec-axis { stroke: #b9b4aa; stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; fill: none; }
.section-svg .sec-step { fill: #d8d2c7; stroke: #6f746f; stroke-width: 1; vector-effect: non-scaling-stroke; }
.section-svg .sec-step.is-active { fill: var(--c-bronze-soft); stroke: var(--c-bronze-ink); }
.section-svg .sec-step.is-error { fill: #efd3cb; stroke: var(--c-error); }
.section-preview figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--c-sage); font-size: 10.5px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.section-dims { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; text-transform: none; }
.section-empty { position: absolute; inset: 12px var(--panel-pad) 34px; display: grid; place-items: center; padding: 12px; color: var(--c-sage); font-size: 12px; text-align: center; }

.levels-scroll { max-height: 560px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c3beb4 transparent; }
.levels-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.levels-table thead { position: sticky; top: 0; z-index: 1; background: var(--c-table-head); }
.levels-table thead th { height: 44px; padding: 8px; border-bottom: 1px solid var(--c-hair-cream); text-align: start; vertical-align: middle; font-size: 12px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
.levels-table thead th:nth-child(2), .levels-table thead th:nth-child(3) { text-align: right; padding-right: 12px; }
.levels-table thead th:first-child { width: calc(var(--panel-pad) + 70px); padding-inline-start: var(--panel-pad); }
.levels-table thead th:last-child { width: 50px; }
.levels-table thead th > small { margin-inline-start: 3px; color: var(--c-sage); font-family: var(--font-mono); font-size: 10px; font-weight: 400; white-space: nowrap; }
.levels-table tbody td, .levels-table tbody th { padding: 5px 8px; border-bottom: 1px solid var(--c-hair-cream-2); vertical-align: top; }
.levels-table tbody tr:hover, .levels-table tbody tr:focus-within { background: var(--c-row-hover); }
.levels-table tbody tr:focus-within .level-number { color: var(--c-bronze-ink); }
.levels-table .level-number { padding-top: 16px; padding-inline-start: var(--panel-pad); color: var(--c-sage); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; text-align: start; font-variant-numeric: tabular-nums; }
.levels-table input { height: 38px; padding: 0 10px; font-size: 14.5px; text-align: right; }
.levels-table td.remove-cell { padding-inline: 0 10px; }
.remove-level { display: block; width: 34px; height: 38px; padding: 0; border: 0; background: transparent; color: #8d918c; font-size: 20px; font-weight: 300; line-height: 1; }
.remove-level:hover:not(:disabled) { color: var(--c-error); background: #efe3dd; }
.remove-level:disabled { opacity: .3; }
.levels-table tr.has-error { background: #f7e9e3; }
.levels-table tfoot th, .levels-table tfoot td { padding: 10px 8px; border-top: 1px solid var(--c-hair-cream); background: var(--c-table-head); color: var(--c-sage); font-size: 11.5px; font-weight: 700; text-align: right; }
.levels-table tfoot th { padding-inline-start: var(--panel-pad); }
.stack-sum { padding-right: 20px !important; color: var(--c-ink) !important; font-family: var(--font-mono); font-size: 12.5px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }
.levels-footer { padding: 16px var(--panel-pad) 18px; border-top: 1px solid var(--c-hair-cream); }
.levels-footer > p { margin-top: 10px; color: var(--c-sage); font-family: var(--font-label); font-size: 10.5px; text-align: center; }
.levels-footer > .paste-status { margin-top: 4px; color: var(--c-bronze-ink); }
.levels-footer > .paste-status:empty { display: none; }

/* ---------- Buttons (labels may wrap in long languages) ---------- */
.button { display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 0; line-height: 1.3; }
.button-outline { min-height: 42px; padding: 8px 16px; border: 1px solid var(--c-ink); background: transparent; color: var(--c-ink); font-size: 11.5px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; white-space: nowrap; }
.button-outline:hover:not(:disabled) { background: var(--c-ink); color: var(--c-cream-text); }
.button-outline:disabled { border-color: var(--c-hair-cream); color: #a3a09a; }
.button-dark { min-height: 48px; padding: 10px 18px; border: 1px solid var(--c-ink); background: var(--c-ink); color: var(--c-cream-text); font-size: 12px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.button-dark:hover:not(:disabled) { background: #262b2c; }
.button-dark:disabled { opacity: .5; }
.button-add { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #b9b4aa; background: transparent; color: var(--c-ink); }
.button-add > span { font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1; }
.button-add b { font-size: 11px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.button-add:hover:not(:disabled) { border-color: var(--c-ink); background: #ebe6dd; }
.button-add:disabled { color: #a3a09a; border-color: var(--c-hair-cream-2); }

/* ---------- 03 Results (dark engineering panel) ---------- */
.results-column { min-width: 0; }
.results-panel { border-color: var(--c-dark); background: var(--c-dark); color: var(--c-cream-text); }
.results-panel .panel-heading { border-bottom-color: var(--c-hair-dark); }
.results-panel .section-number { color: var(--c-bronze); }
.result-context { padding: 10px var(--panel-pad); border-bottom: 1px solid var(--c-hair-dark); color: var(--c-bronze); font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; }
.result-status { display: flex; align-items: flex-start; gap: 10px; padding: 14px var(--panel-pad); border-bottom: 1px solid var(--c-hair-dark); background: var(--c-dark-2); }
.result-status > span { flex: none; width: 6px; height: 6px; margin-top: 7px; background: #5b605e; }
.result-status p { color: var(--c-value-on-dark); font-size: 13px; line-height: 1.5; }
.result-status[data-state="success"] > span { background: var(--c-success); }
.result-status[data-state="success"] p { color: var(--c-cream-text); }
.result-status[data-state="stale"] > span { background: var(--c-bronze); }
.result-status[data-state="stale"] p { color: #dcc7a4; }
.result-status[data-state="error"] > span { background: var(--c-error-on-dark); }
.result-status[data-state="error"] p { color: var(--c-error-on-dark); }
.result-status[data-state="loading"] > span { background: var(--c-bronze); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.result-metrics { padding: 0 var(--panel-pad); }
.metric { min-width: 0; display: flex; flex-direction: column; padding: 18px 0 16px; border-bottom: 1px solid var(--c-hair-dark); }
.metric-title { color: var(--c-value-on-dark); font-size: 13px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; hyphens: auto; }
.metric-reading { display: flex; align-items: flex-start; justify-content: flex-start; gap: 6px; min-width: 0; margin-top: auto; padding-top: 10px; }
[dir="rtl"] .metric-reading { justify-content: flex-end; }
.metric-reading output { min-width: 0; color: var(--c-cream-text); font-size: clamp(30px, 2.4vw, 38px); font-weight: 700; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.metric-unit { margin-top: .15em; color: var(--c-bronze); font-size: 14px; font-weight: 600; white-space: nowrap; }
.metric-emphasis { border-bottom: 0; }
.metric-emphasis .metric-reading output { font-size: clamp(36px, 2.9vw, 46px); }
.results-panel:has(#result-status:not([data-state="success"])) .metric-reading output { color: #5b605e; }
.results-panel:has(#result-status:not([data-state="success"])) .metric-unit { color: #6f6655; }

.result-actions { padding: 18px var(--panel-pad) 20px; border-top: 1px solid var(--c-hair-dark); }
.button-primary { width: 100%; min-height: 52px; justify-content: space-between; padding: 12px 18px; border: 1px solid var(--c-cream-btn); background: var(--c-cream-btn); color: var(--c-ink); font-size: 12.5px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; text-align: start; }
.button-arrow { flex: none; font-size: 18px; font-weight: 400; letter-spacing: 0; line-height: 1; }
.button-primary:hover:not(:disabled) { border-color: #fff; background: #fff; }
.button-primary:disabled { border-color: #2c3132; background: #2c3132; color: #7d827f; }
.button-reset { width: 100%; min-height: 42px; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--c-line-dark); background: transparent; color: var(--c-value-on-dark); font-size: 11.5px; font-weight: 700; letter-spacing: calc(var(--track-label) * .9); text-transform: uppercase; }
.button-reset:hover:not(:disabled) { border-color: #6b706e; color: #fff; }
.button-reset:disabled { opacity: .45; }
#result-hint { margin-top: 12px; color: var(--c-muted-on-dark); font-size: 12px; line-height: 1.6; }
.result-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px var(--panel-pad) 18px; border-top: 1px solid var(--c-hair-dark); }
.link-button { display: inline-flex; align-items: center; gap: 8px; padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--c-line-dark); background: none; color: var(--c-value-on-dark); font-size: 11.5px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; text-align: start; line-height: 1.4; }
.link-button:hover:not(:disabled) { color: #fff; border-color: var(--c-bronze); }
.link-button-strong { color: var(--c-cream-text); border-color: var(--c-bronze); }
.link-button .button-arrow { font-size: 14px; }
.link-button:disabled { color: #5b605e; border-color: var(--c-hair-dark); }
.copy-status { color: var(--c-success); font-size: 12px; line-height: 1.5; }
.copy-status:empty { display: none; }
.copy-status.is-error { color: var(--c-error-on-dark); }
.result-disclaimer { padding: 14px var(--panel-pad) 18px; border-top: 1px solid var(--c-hair-dark); color: var(--c-muted-on-dark); font-size: 11.5px; line-height: 1.55; }

/* ---------- 4. Manufacturing CTA ---------- */
.mfg-cta { background: var(--c-dark); color: var(--c-cream-text); padding: 64px 0; }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.cta-copy h2 { margin-top: 14px; font-size: clamp(26px, 1.6vw + 16px, 40px); font-weight: 700; line-height: 1.1; letter-spacing: var(--track-title); overflow-wrap: anywhere; hyphens: auto; }
.cta-text { max-width: 36em; margin-top: 16px; color: var(--c-text-on-dark); font-size: 15px; line-height: 1.6; }
.cta-note { max-width: 36em; margin-top: 10px; color: var(--c-muted-on-dark); font-size: 13.5px; line-height: 1.6; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cta-actions .button { min-height: 48px; }
.button-cream { padding: 10px 18px; border: 1px solid var(--c-cream-btn); background: var(--c-cream-btn); color: var(--c-ink); font-size: 12px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.button-cream:hover:not(:disabled) { background: #fff; border-color: #fff; }
.button-outline-dark { padding: 10px 18px; border: 1px solid var(--c-line-dark); background: transparent; color: var(--c-cream-text); font-size: 12px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.button-outline-dark:hover:not(:disabled) { border-color: #6b706e; }
.button-cream:disabled, .button-outline-dark:disabled { opacity: .45; }
.mfg-cta .copy-status { margin-top: 12px; }
.cta-specs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-hair-dark); }
.cta-specs li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--c-hair-dark); color: var(--c-value-on-dark); font-size: 14px; line-height: 1.45; }
.cta-specs li > span { display: flex; align-items: baseline; gap: 12px; }
.cta-specs li > span::before { content: ""; flex: none; width: 5px; height: 5px; margin-bottom: 2px; background: var(--c-bronze); }
.cta-specs b { flex: none; color: var(--c-cream-text); font-family: var(--font-mono); font-size: 15px; font-weight: 600; }

/* ---------- 5. Manufacturing capability (compact) ---------- */
.capability { padding: 56px 0 64px; }
.cap-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 48px; align-items: end; }
.cap-head .eyebrow { grid-column: 1 / -1; }
.cap-head h2 { font-size: clamp(24px, 1.2vw + 16px, 34px); font-weight: 700; line-height: 1.12; letter-spacing: var(--track-title); }
.cap-text { color: var(--c-sage); font-size: 14.5px; line-height: 1.6; }
.cap-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--c-hair-cream); border-inline-start: 1px solid var(--c-hair-cream); }
.cap-steps li { display: flex; align-items: baseline; gap: 12px; padding: 20px 18px; border-inline-end: 1px solid var(--c-hair-cream); border-bottom: 1px solid var(--c-hair-cream); font-size: 13px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.cap-num { flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--c-bronze-ink); }

/* ---------- Manufacturing review dialog ---------- */
.review-dialog { width: min(920px, calc(100% - 32px)); max-width: none; max-height: calc(100vh - 48px); margin: auto; padding: 0; border: 1px solid var(--c-line-dark); background: var(--c-paper); color: var(--c-ink); overflow: hidden; }
.review-dialog[open] { display: flex; flex-direction: column; }
.review-dialog::backdrop { background: rgb(10 12 13 / 64%); }
.review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px; background: var(--c-dark); color: var(--c-cream-text); }
.review-head h2 { margin-top: 8px; font-size: 22px; font-weight: 700; line-height: 1.2; }
.dialog-close { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--c-line-dark); background: transparent; color: var(--c-cream-text); font-size: 22px; line-height: 1; }
.dialog-close:hover { border-color: #6b706e; }
.review-body { flex: 1 1 auto; overflow-y: auto; padding: 20px 24px 8px; overscroll-behavior: contain; }
.review-intro { color: var(--c-ink-2); font-size: 13.5px; line-height: 1.6; }
.review-generated { margin-top: 4px; color: var(--c-sage); font-family: var(--font-mono); font-size: 11px; }
.review-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 18px; }
.review-block { min-width: 0; margin-bottom: 18px; }
.review-block h3 { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--c-hair-cream); color: var(--c-sage); font-size: 10.5px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.review-block dl { margin: 0; }
.review-block dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--c-hair-cream-2); font-size: 13px; }
.review-block dt { color: var(--c-ink-2); }
.review-block dd { margin: 0; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; text-align: end; white-space: nowrap; }
.review-block dd.is-missing { color: #a3a09a; font-family: var(--font-sans); font-weight: 400; }
.review-results dd { color: var(--c-ink); font-size: 14px; }
.review-note { padding: 8px 10px; background: var(--c-notice-soft); color: #6b5230; font-size: 12.5px; line-height: 1.5; }
.review-steps { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.review-steps th, .review-steps td { padding: 4px 6px; border-bottom: 1px solid var(--c-hair-cream-2); text-align: end; }
.review-steps th:first-child, .review-steps td:first-child { text-align: start; color: var(--c-sage); }
.review-steps thead th { color: var(--c-sage); font-family: var(--font-sans); font-size: 11px; font-weight: 700; }
.review-steps tfoot td { font-weight: 700; }
.review-steps-scroll { max-height: 220px; overflow-y: auto; }
.review-form { margin-top: 6px; }
.review-contact { margin: 0; padding: 0; border: 0; }
.review-contact legend, .upload-title { margin-bottom: 10px; padding: 0 0 6px; width: 100%; border-bottom: 1px solid var(--c-hair-cream); color: var(--c-sage); font-size: 10.5px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.rfield { min-width: 0; }
.rfield-wide { grid-column: 1 / -1; }
.rfield label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; }
.rfield .req { color: var(--c-error); }
.rfield textarea { height: auto; min-height: 76px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.req-legend { margin-top: 8px; color: var(--c-sage); font-size: 11.5px; }
.review-upload { position: relative; margin-top: 18px; }
.upload-hint { margin-bottom: 10px; color: var(--c-sage); font-size: 12px; }
.upload-button { display: inline-flex; width: auto; cursor: pointer; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.review-upload:focus-within .upload-button { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.file-list { margin: 10px 0 0; padding: 0; list-style: none; }
.file-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--c-hair-cream-2); font-size: 13px; }
.file-list .file-name { min-width: 0; overflow-wrap: anywhere; }
.file-list .file-size { flex: none; margin-inline-start: auto; color: var(--c-sage); font-family: var(--font-mono); font-size: 11.5px; }
.file-list .file-remove { flex: none; width: 30px; height: 30px; padding: 0; border: 0; background: none; color: #8d918c; font-size: 18px; }
.file-list .file-remove:hover { color: var(--c-error); }
.file-list .file-empty { color: #a3a09a; }
.review-status { margin: 14px 0 12px; padding: 10px 12px; border-inline-start: 3px solid var(--c-bronze); background: var(--c-notice-soft); color: #5e4a2c; font-size: 13px; line-height: 1.55; }
.review-status.is-success { border-color: var(--c-success); background: #e9f0ea; color: #2f5a3b; }
.review-status.is-error { border-color: var(--c-error); background: var(--c-error-soft); color: #7d2f28; }
.review-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--c-hair-cream); background: var(--c-paper); }
.review-actions .button { min-height: 46px; }

/* ---------- Script-specific typography ---------- */
:lang(th) h1, :lang(ar) h1 { line-height: 1.3; }
:lang(vi) h1 { line-height: 1.15; }
.calc-root:lang(th) { line-height: 1.6; }
:lang(th) .eyebrow, :lang(th) .form-section-heading, :lang(th) .button-add b, :lang(th) .stepper-label,
:lang(ar) .eyebrow, :lang(ar) .form-section-heading, :lang(ar) .button-add b, :lang(ar) .stepper-label,
:lang(zh) .eyebrow, :lang(zh) .form-section-heading, :lang(zh) .button-add b, :lang(zh) .stepper-label { font-size: 12px; }
:lang(th) .button-primary, :lang(ar) .button-primary, :lang(zh) .button-primary,
:lang(th) .button-reset, :lang(ar) .button-reset, :lang(zh) .button-reset,
:lang(th) .link-button, :lang(ar) .link-button, :lang(zh) .link-button,
:lang(th) .button-outline, :lang(ar) .button-outline, :lang(zh) .button-outline,
:lang(th) .button-cream, :lang(ar) .button-cream, :lang(zh) .button-cream,
:lang(th) .button-outline-dark, :lang(ar) .button-outline-dark, :lang(zh) .button-outline-dark,
:lang(th) .button-dark, :lang(ar) .button-dark, :lang(zh) .button-dark { font-size: 13.5px; }
:lang(th) .cap-steps li, :lang(ar) .cap-steps li, :lang(zh) .cap-steps li { font-size: 14px; }
:lang(ar) .field label, :lang(ar) .field .field-label, :lang(ar) .metric-title, :lang(ar) .result-status p { font-size: 14px; }
:lang(ar) .breadcrumb ol, :lang(th) .breadcrumb ol, :lang(zh) .breadcrumb ol { font-size: 12px; }

/* ---------- Footer (replica) ---------- */
.site-footer { background: var(--c-header); color: var(--c-muted-on-dark); border-top: 1px solid var(--c-line-dark); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 0; }
.footer-brand { display: flex; align-items: center; gap: 12px; color: var(--c-cream-text); }
.footer-brand .brand-mark { width: 30px; }
.footer-brand .brand-word { width: 100px; }
.footer-meta { display: flex; flex-wrap: wrap; margin: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.footer-meta > span + span::before { content: "·"; margin-inline: .8em; color: #5b605e; }
.footer-local { color: var(--c-bronze); }
.noscript-note { position: fixed; z-index: 70; inset: auto 16px 16px; padding: 18px; background: var(--c-header); color: var(--c-cream-text); font-size: 14px; }

/* ---------- Responsive ---------- */
@media (min-width: 1600px) {
  .calculator-grid { gap: 28px; }
  .levels-scroll { max-height: 620px; }
}

/* Sticky results only where the whole panel fits in the viewport */
@media (min-width: 1200px) and (min-height: 900px) {
  .results-column { position: sticky; top: calc(var(--header-h) + 20px); }
}

@media (max-width: 1499px) {
  .header-link { display: none; }
}

@media (max-width: 1439px) {
  .lang-menu { display: none; }
  .primary-nav > ul { gap: 12px; }
  .primary-nav > ul > li > a { letter-spacing: .12em; }
}

@media (max-width: 1279px) {
  .primary-nav { display: none; }
  .header-actions { margin-inline-start: auto; }
  .mobile-menu { display: block; }
}

/* Tablet / small laptop: 01 | 02 side by side, 03 full width */
@media (max-width: 1199px) {
  :root { --panel-pad: 20px; }
  .calculator-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .results-column { grid-column: 1 / -1; }
  .results-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .results-panel .panel-heading { grid-column: 1; grid-row: 1; }
  .result-status { grid-column: 2; grid-row: 1; align-items: center; border-inline-start: 1px solid var(--c-hair-dark); }
  .result-status > span { margin-top: 0; }
  .result-context { grid-column: 1 / -1; grid-row: 2; }
  .result-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metric { padding: 20px 18px; border-bottom: 0; border-inline-end: 1px solid var(--c-hair-dark); }
  .metric:first-child { padding-inline-start: 0; }
  .metric:last-child { padding-inline-end: 0; border-inline-end: 0; }
  .metric-reading output, .metric-emphasis .metric-reading output { font-size: clamp(28px, 3.2vw, 38px); }
  .result-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px 14px; align-items: stretch; }
  .button-reset { min-height: 52px; margin-top: 0; }
  #result-hint { grid-column: 1 / -1; margin-top: 4px; }
  .result-links { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
  .result-disclaimer { grid-column: 1 / -1; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, .85fr); }
}

@media (max-width: 959px) {
  .result-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric, .metric:first-child, .metric:last-child { padding: 18px 0; border-inline-end: 0; border-bottom: 1px solid var(--c-hair-dark); }
  .metric:nth-child(odd) { padding-inline-end: 18px; border-inline-end: 1px solid var(--c-hair-dark); }
  .metric:nth-child(even) { padding-inline-start: 18px; }
  .metric:nth-last-child(-n+2) { border-bottom: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cta-grid { grid-template-columns: minmax(0, 1fr); }
  .cap-head { grid-template-columns: minmax(0, 1fr); }
  .cap-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone and small tablet portrait: single column */
@media (max-width: 767px) {
  :root { --header-h: 60px; --panel-pad: 18px; }
  .header-inner { gap: 12px; }
  .brand { gap: 10px; }
  .brand::after { bottom: -10px; width: 34px; }
  .brand-mark { width: 32px; }
  .brand-word { width: 100px; }
  .header-cta { display: none; }
  .mobile-menu > summary { width: 42px; height: 42px; }
  .tool-hero { padding: 20px 0 36px; }
  .hero-topline { padding-bottom: 24px; align-items: flex-start; }
  .breadcrumb ol { font-size: 10.5px; }
  .env-tag { font-size: 9.5px; padding: 4px 7px; }
  .hero-lead { font-size: 14.5px; margin-top: 16px; }
  .how-list { display: none; }
  .calculator-section { padding: 22px 0 48px; }
  .workspace-toolbar { display: block; margin-bottom: 18px; padding-bottom: 16px; }
  .toolbar-start { flex-wrap: wrap; gap: 10px 14px; }
  .load-status { margin-top: 10px; text-align: start; }
  .calculator-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .panel-heading { flex-wrap: wrap; min-height: 0; padding-top: 16px; padding-bottom: 14px; }
  .panel-heading h3 { font-size: 20px; }
  .input-grid { column-gap: 12px; }
  /* 16px prevents iOS Safari focus zoom */
  .field input, .field select, .levels-table input, .rfield input, .rfield textarea { font-size: 16px; }
  .section-svg { height: 120px; }
  .levels-scroll { max-height: none; overflow: visible; }
  .levels-table thead { position: static; }
  .levels-table thead th { font-size: 11.5px; }
  .levels-table thead th:first-child { width: calc(var(--panel-pad) + 58px); }
  .levels-table thead th:last-child { width: 46px; }
  .levels-table input { height: 42px; }
  .levels-table .level-number { padding-top: 19px; }
  .remove-level { width: 36px; height: 42px; }
  .results-panel { display: block; }
  .result-status { border-inline-start: 0; align-items: flex-start; }
  .result-status > span { margin-top: 7px; }
  .result-actions { display: block; }
  .button-reset { min-height: 44px; margin-top: 10px; }
  .result-links { flex-direction: column; align-items: flex-start; }
  .mfg-cta { padding: 44px 0; }
  .cta-actions .button { width: 100%; justify-content: space-between; }
  .capability { padding: 40px 0 48px; }
  .review-dialog { width: 100%; height: 100%; max-height: 100dvh; max-width: 100%; border: 0; }
  .review-head { padding: 16px 18px; }
  .review-head h2 { font-size: 19px; }
  .review-body { padding: 16px 18px 8px; }
  .review-summary, .review-grid { grid-template-columns: minmax(0, 1fr); }
  .review-actions { padding: 12px 18px; }
  .review-actions .button { flex: 1 1 100%; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 0; }
}

@media (max-width: 479px) {
  .result-metrics { display: block; }
  .metric, .metric:nth-child(odd), .metric:nth-child(even) { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; border-inline-end: 0; border-bottom: 1px solid var(--c-hair-dark); }
  .metric:last-child { border-bottom: 0; }
  .metric-title { flex: 1 1 auto; min-width: 0; }
  .metric-reading { flex: none; margin-top: 0; padding-top: 0; }
  .metric-reading output, .metric-emphasis .metric-reading output { font-size: 27px; }
  .metric-unit { font-size: 12px; }
  .hero-topline { flex-direction: column; gap: 12px; }
  .stepper-label { display: none; }
  .cap-steps { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 359px) {
  .input-grid { grid-template-columns: minmax(0, 1fr); }
  .core-grid .field-diameter, .core-grid .field-max-width { grid-column: auto; grid-row: span 3; }
  .core-grid .field-note { grid-column: auto; grid-row: auto; margin-top: -10px; }
  .metric-reading output, .metric-emphasis .metric-reading output { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .result-status[data-state="loading"] > span { animation: none; opacity: 1; }
}


/* =====================================================================
   Transformer Winding Design Workbench — additions on top of the shared
   Chenfan tool design system (tokens, header, hero, panels, buttons, footer).
   ===================================================================== */
.lang-switch { display: inline-flex; border: 1px solid var(--c-line-dark); }
.lang-switch a { padding: 6px 10px; color: var(--c-muted-on-dark); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-decoration: none; }
.lang-switch a + a { border-inline-start: 1px solid var(--c-line-dark); }
.lang-switch a.is-current { color: var(--c-cream-text); background: #22282a; }
.lang-switch a:hover { color: #fff; }

.ww-section { padding-top: 28px; }
.ww-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-bottom: 16px; border-bottom: 1px solid var(--c-hair-cream); }
.mode-tabs { display: inline-flex; border: 1px solid var(--c-ink); }
.mode-tabs button { min-height: 44px; padding: 8px 18px; border: 0; background: transparent; color: var(--c-ink); font-size: 12px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.mode-tabs button + button { border-inline-start: 1px solid var(--c-ink); }
.mode-tabs button[aria-selected="true"] { background: var(--c-ink); color: var(--c-cream-text); }
.mode-tabs button:hover:not([aria-selected="true"]) { background: #e6e1d8; }
.ww-toolbar .toolbar-hint { flex: 1 1 260px; }
.toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-inline-start: auto; }
.toolbar-status { min-height: 1.5em; margin: 8px 0 12px; color: var(--c-bronze-ink); font-size: 12.5px; }

.import-panel { margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--c-bronze-soft); border-inline-start: 3px solid var(--c-bronze); background: var(--c-notice-soft); }
.import-title { font-size: 15px; font-weight: 700; }
.import-message { margin-top: 6px; color: var(--c-ink-2); font-size: 13px; line-height: 1.6; }
.import-row { display: flex; gap: 10px; margin-top: 12px; }
.import-row input { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--c-hair-cream); background: var(--c-field); font-family: var(--font-mono); font-size: 13px; }
.import-values { margin: 12px 0 0; padding-inline-start: 18px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.8; }
.import-values .muted { color: var(--c-sage); list-style: none; margin-inline-start: -18px; }
.import-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.validation-banner { margin: 0 0 20px; padding: 14px 18px; border: 2px solid var(--c-error); background: #fbe9e5; color: #6e231c; }
.validation-banner strong { display: block; font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; }
.validation-banner p { margin-top: 4px; font-size: 13px; }

.ww-stepper { margin: 4px 0 20px; }
.ww-stepper ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; border: 1px solid var(--c-hair-cream); background: var(--c-paper); }
.ww-stepper li + li { border-inline-start: 1px solid var(--c-hair-cream); }
.ww-stepper button { display: flex; align-items: baseline; gap: 10px; width: 100%; min-height: 52px; padding: 12px 16px; border: 0; background: transparent; text-align: start; }
.ww-stepper button:hover { background: var(--c-row-hover); }
.ww-stepper button[aria-current="step"] { background: var(--c-ink); color: var(--c-cream-text); }
.ww-stepper .step-num { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--c-bronze-ink); }
.ww-stepper button[aria-current="step"] .step-num { color: var(--c-bronze); }
.ww-stepper .step-label { font-size: 13px; font-weight: 700; line-height: 1.3; }

.ww-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 24px; align-items: start; }
.ww-main { min-width: 0; }
.step-panel .panel-heading h2 { font-size: 21px; font-weight: 700; line-height: 1.25; outline: none; }
.panel-body { padding-bottom: 20px; }
.input-grid.single { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.ww-field .control { min-width: 0; }
.qty-control { display: flex; min-width: 0; direction: ltr; }
.qty-control input { flex: 1 1 auto; min-width: 0; text-align: right; font-family: var(--font-sans); }
.qty-control .unit-select { flex: none; width: auto; min-width: 84px; height: 44px; margin-inline-start: -1px; padding: 0 30px 0 10px; border: 1px solid var(--c-hair-cream); background-color: #f1ede6;
  font-family: var(--font-mono); font-size: 12px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230c1011' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 9px 5px; }
.qty-control .unit { flex: none; display: grid; place-items: center; min-width: 64px; height: 44px; margin-inline-start: -1px; padding: 0 10px; border: 1px solid var(--c-hair-cream); background: #f1ede6;
  color: var(--c-sage); font-family: var(--font-mono); font-size: 12px; }
.qty-control.no-unit input { text-align: right; }
.seg { display: flex; flex-wrap: wrap; border: 1px solid var(--c-hair-cream); background: var(--c-field); }
.seg button { flex: 1 1 0; min-height: 42px; padding: 8px 10px; border: 0; background: transparent; font-size: 13px; font-weight: 600; line-height: 1.25; }
.seg button + button { border-inline-start: 1px solid var(--c-hair-cream); }
.seg button[aria-checked="true"] { background: var(--c-ink); color: var(--c-cream-text); }
.seg button:hover:not([aria-checked="true"]) { background: #eeeae3; }
.has-error .seg { border-color: var(--c-error); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { padding: 3px 9px; border: 1px solid var(--c-hair-cream); background: transparent; font-family: var(--font-mono); font-size: 11.5px; }
.chip:hover { border-color: var(--c-ink); }
.ww-field label.check, .check { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 13px; font-weight: 600; }
.check input { width: 18px; height: 18px; accent-color: var(--c-ink); }
.field-warning { margin-top: 6px; color: var(--c-bronze-ink); font-size: 11.5px; line-height: 1.55; }
.import-badge { margin-inline-start: 8px; padding: 1px 6px; border: 1px solid var(--c-bronze); color: var(--c-bronze-ink); font-family: var(--font-mono); font-size: 10px; font-weight: 500; vertical-align: 1px; }
.ww-details { margin: 4px 0 16px; border: 1px solid var(--c-hair-cream-2); background: #faf8f4; }
.ww-details > summary { padding: 10px 14px; font-size: 12.5px; font-weight: 700; }
.ww-details > div { padding: 12px 14px 0; }
.shared-block .input-grid { margin-bottom: 4px; }
.side-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 8px; }
.side-col { min-width: 0; }
.side-title { margin: 6px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--c-ink); font-size: 15px; font-weight: 700; }
.side-col .input-grid { grid-template-columns: minmax(0, 1fr); }
.conductor-toggle { margin: 10px 0 14px; }
.conductor-block { padding: 14px 14px 0; border: 1px solid var(--c-hair-cream-2); background: #faf8f4; }
.ww-note { margin: 0 0 12px; color: var(--c-sage); font-size: 12.5px; line-height: 1.6; }
.ww-note-warn { color: var(--c-bronze-ink); }

.calc-block { margin: 4px 0 16px; }
.calc-list { margin: 0; border-top: 1px solid var(--c-hair-cream); }
.calc-list > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--c-hair-cream-2); }
.calc-list dt { color: var(--c-sage); font-size: 12.5px; }
.calc-list dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 8px; font-variant-numeric: tabular-nums; }
.calc-list .val { font-size: 15px; font-weight: 700; }
.calc-list .u { color: var(--c-bronze-ink); font-family: var(--font-mono); font-size: 11px; }
.use-turns { display: inline-flex; gap: 6px; }

.results-block { display: grid; gap: 22px; }
/* grid items must not grow to the intrinsic width of a wide table (the tap table scrolls inside .table-scroll) */
.results-block > * { min-width: 0; }
.rtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.rtable caption { padding: 0 0 8px; text-align: start; color: var(--c-ink); font-size: 12px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.rtable th, .rtable td { padding: 9px 10px; border-bottom: 1px solid var(--c-hair-cream-2); vertical-align: top; }
.rtable thead th { background: var(--c-table-head); color: var(--c-ink-2); font-size: 11.5px; font-weight: 700; text-align: start; }
.rtable tbody th { font-weight: 600; text-align: start; width: 44%; }
.rtable .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rtable td.num .val { font-weight: 700; }
.rtable td.num .u { margin-inline-start: 5px; color: var(--c-bronze-ink); font-family: var(--font-mono); font-size: 11px; }
.rtable td[data-state]:not([data-state="value"]) { color: #a8a59e; }
.rtable td.withdrawn { color: var(--c-error); }
.rtable .rnote { color: var(--c-sage); font-size: 12px; line-height: 1.6; white-space: normal; text-align: start; }
.info { margin-inline-start: 6px; padding: 0 2px; border: 0; background: none; color: var(--c-bronze-ink); font-size: 14px; line-height: 1; }
.info:hover { color: var(--c-ink); }
.fit-table tbody th { width: 34%; }
.check-table tbody th { width: 30%; }
.check-cell { text-align: start; }
.check-detail { margin-top: 5px; color: var(--c-sage); font-size: 12px; line-height: 1.5; white-space: normal; }
.check-cell .text-button { margin-top: 4px; }
.badge { display: inline-block; padding: 2px 8px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.badge-pass { background: #dfe9e1; color: #2f5a3a; }
.badge-fail { background: #f3d9d4; color: #7d2f28; }
.badge-warning { background: #f1e5cf; color: #6e5325; }
.badge-not-checked { background: #e6e3de; color: #55595a; }
.badge-blocked { background: #ecdcd9; color: #6b3a33; outline: 1px dashed #b58a83; outline-offset: -1px; }
.ww-note-fail { padding: 10px 12px; border-inline-start: 3px solid var(--c-error); background: #f8ebe8; color: #6b2a24; }
.rtable .rnote-fail { color: #7d2f28; }
.check-group-title { margin: 22px 0 4px; font-size: 13px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-ink); }
.check-group-title:first-child { margin-top: 0; }
.layer-table { margin-top: 4px; font-size: 12.5px; }
.layer-table th, .layer-table td { padding: 5px 8px; }
.result-status[data-state="warning"] > span { background: #d9b46a; }
.result-status[data-state="warning"] p { color: #e8d3a6; }
.result-status[data-state="partial"] > span { background: #9aa39c; }
.result-status[data-state="partial"] p { color: var(--c-cream-text); }
.toolbar-status[data-kind="warn"], .import-message[data-kind="warn"] { color: var(--c-error); font-weight: 600; }

.step-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.step-nav .button { min-width: 140px; }
.step-nav .button-outline { gap: 8px; }
.step-count { color: var(--c-sage); font-family: var(--font-mono); font-size: 11.5px; }

.ww-summary { position: sticky; top: calc(var(--header-h) + 16px); }
.sum-metrics { margin: 0; padding: 4px var(--panel-pad); }
.sum-metrics > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--c-hair-dark); }
.sum-metrics dt { color: var(--c-muted-on-dark); font-size: 12px; }
.sum-metrics dd { margin: 0; color: var(--c-cream-text); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum-checks-wrap { padding: 14px var(--panel-pad) 4px; }
.sum-checks-title { color: var(--c-muted-on-dark); font-size: 11px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.sum-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.ww-scope { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--c-hair-cream); color: var(--c-ink-2); font-size: 13px; line-height: 1.7; }
.ww-scope h2 { margin-bottom: 8px; color: var(--c-ink); font-size: 16px; }
.ww-scope p + p { margin-top: 8px; }
.ww-privacy { color: var(--c-sage); }
.related-tool a { font-weight: 700; }

.details-dialog { width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--c-ink); background: var(--c-paper); color: var(--c-ink); }
.details-dialog::backdrop { background: rgba(12, 16, 17, .55); }
.details-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--c-hair-cream); }
.details-head h2 { margin-top: 6px; font-size: 18px; }
.details-body { padding: 8px 20px 20px; }
.details-body h3 { margin: 16px 0 6px; color: var(--c-sage); font-size: 11px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.details-body .formula { padding: 10px 12px; background: #fff; border: 1px solid var(--c-hair-cream-2); font-family: var(--font-mono); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; direction: ltr; text-align: left; }
.details-body .formula.result { margin-top: 6px; font-weight: 700; }
.details-body .terms { margin: 0; padding-inline-start: 18px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.8; direction: ltr; text-align: left; }
.details-body .terms.sources { font-family: inherit; font-size: 12px; line-height: 1.65; color: var(--c-ink-2); overflow-wrap: anywhere; }
.details-body .terms.sources li + li { margin-top: 4px; }

@media (max-width: 1199px) {
  .ww-field input, .qty-control .unit-select, .import-row input { font-size: 16px; }   /* touch tablets: no iOS focus zoom */
  .ww-grid { grid-template-columns: minmax(0, 1fr); }
  .ww-summary { position: static; }
}
@media (max-width: 899px) {
  .side-grid { grid-template-columns: minmax(0, 1fr); }
  .ww-stepper ol { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ww-stepper button { flex-direction: column; gap: 2px; min-height: 56px; padding: 8px 6px; align-items: center; text-align: center; }
  .ww-stepper .step-label { font-size: 11px; }
}
@media (max-width: 767px) {
  .ww-toolbar { align-items: stretch; }
  .mode-tabs { width: 100%; }
  .mode-tabs button { flex: 1 1 0; padding: 8px 8px; letter-spacing: .06em; }
  .toolbar-actions { margin-inline-start: 0; }
  .qty-control input { font-size: 16px; }
  .rtable tbody th { width: auto; }
  .rtable th, .rtable td { padding: 8px 6px; }
  .step-nav .button { min-width: 0; flex: 1 1 0; }
  .step-count { display: none; }
  .import-row { flex-direction: column; }
  .lang-switch { display: none; }
}
@media (max-width: 479px) {
  .ww-stepper .step-label { display: none; }
  .ww-stepper button { min-height: 44px; }
  .rtable { font-size: 12px; }
  .rtable td.num .u { display: block; margin: 0; }
  /* narrow screens: the provenance badge goes under the value so the fit / comparison tables keep within the page */
  .fit-table td.num .prov, .comparison-table td.num .prov { display: block; width: max-content; margin: 3px 0 0 auto; }
}

/* ======================================================= V2 */
/* provenance: ✎ input · fx calculated · ≈ estimated · ⚠ override (symbol + text label; never colour alone) */
.prov { display: inline-block; min-width: 18px; margin-inline-start: 6px; padding: 0 4px; border: 1px solid currentColor; font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; line-height: 15px; text-align: center; vertical-align: 1px; white-space: nowrap; }
.prov-input { color: #55595a; }
.prov-calculated { color: #2f5a3a; }
.prov-estimated { color: #8a5a12; background: #f6ecd9; border-style: dashed; }
.prov-override { color: #7d2f28; background: #f3e1dd; }
.sum-metrics .prov-estimated, .sum-metrics .prov-override { background: transparent; }
.prov-legend { margin: 0; color: var(--c-sage); font-family: var(--font-mono); font-size: 11.5px; }
.results-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.details-prov { margin: 10px 0 0; color: var(--c-ink-2); font-size: 12.5px; }

/* staged (paste → preview → apply) */
.staged-control { display: flex; gap: 8px; min-width: 0; }
.staged-control input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--c-hair-cream); background: var(--c-field);
  font-family: var(--font-mono); font-size: 13px; }
.staged-apply { flex: none; min-height: 44px; }
.staged-preview { margin-top: 6px; color: var(--c-ink-2); font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55; overflow-wrap: anywhere; }
.staged-preview[data-kind="error"] { color: var(--c-error); }
.staged-preview[data-kind="warn"] { color: var(--c-bronze-ink); }
.staged-block { margin: 6px 0 14px; padding: 12px 14px; border: 1px dashed var(--c-hair-cream); }
.staged-block > label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; }

/* taps, schedule, comparisons, estimated list */
.taps-block { margin: 4px 0 12px; }
.taps-block.is-on { padding: 12px 14px 2px; border: 1px solid var(--c-hair-cream-2); background: #faf8f4; }
.table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tap-table { min-width: 560px; }
.tap-table tbody th { width: auto; white-space: nowrap; }
.tap-table tr.is-principal th, .tap-table tr.is-principal td { background: #f5f1e8; font-weight: 700; }
.schedule-block { margin: 4px 0 16px; padding: 12px 14px; border: 1px solid var(--c-hair-cream-2); background: #faf8f4; }
.schedule-table td { padding: 5px 4px; }
.schedule-table input { width: 100%; min-width: 0; height: 36px; padding: 0 8px; border: 1px solid var(--c-hair-cream); background: var(--c-field); font-family: var(--font-mono); font-size: 13px; }
.schedule-table td .u { display: block; color: var(--c-sage); font-family: var(--font-mono); font-size: 10px; }
.schedule-block .button { margin-top: 10px; }
.comparison-table tbody th { width: 38%; }
.cmp-basis { display: block; margin-top: 3px; color: var(--c-sage); font-size: 11.5px; font-weight: 400; }
.estimated-list .terms { margin: 0; padding-inline-start: 18px; font-size: 12.5px; line-height: 1.7; }
.adv-block { margin-top: 18px; }
.vpt-block .input-grid { margin-bottom: 4px; }
.migration-banner { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--c-bronze); background: #f6ecd9; }
.migration-banner strong { display: block; font-size: 13.5px; }
.migration-banner p { margin: 6px 0 10px; font-size: 12.5px; line-height: 1.6; }

@media (max-width: 1199px) {
  .staged-control input, .schedule-table input { font-size: 16px; }
}
@media (max-width: 479px) {
  .staged-control { flex-direction: column; }
  .schedule-table { font-size: 12px; }
}

/* print: all results and checks with their provenance written out */
.report-safety { padding: 12px 16px; margin-bottom: 12px; border: 1px solid #9eaaa5; font-weight: 700; overflow-wrap: anywhere; }
.report-safety[data-state="INVALID_DESIGN"] { border: 2px solid #9f251e; color: #9f251e; background: #fff2ed; }
.report-safety[data-state="PARTIAL"] { border: 2px solid #8b642f; color: #62451f; background: #fff9e9; }
.module-scope { margin-block: 24px; overflow-wrap: anywhere; }
[data-pending="true"] #results, [data-pending="true"] #sum-metrics, [data-pending="true"] #checks { visibility: hidden; }
.module-scope h3 { margin-block: 16px 8px; }
.module-scope ul { padding-inline-start: 20px; }
.module-scope li { margin-block: 6px; font-size: 12px; line-height: 1.6; }
.module-status-list li[data-status="FAIL"], .module-status-list li[data-status="UNSUPPORTED"] { color: #9f251e; }
[dir="rtl"] input, [dir="rtl"] .num, [dir="rtl"] .formula, [dir="rtl"] code { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .rtable th, [dir="rtl"] .field { text-align: start; }
[dir="rtl"] .rtable .num { text-align: end; }
.number-format-note { margin-bottom: 16px; font-size: 12px; color: #53615b; }
.lang-picker { position: relative; font-size: 12px; }
.lang-picker summary { cursor: pointer; list-style: none; padding: 8px; }
.lang-options { position: absolute; inset-inline-end: 0; top: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 250px; max-width: calc(100vw - 28px); background: #fff; color: #172b25; padding: 12px; border: 1px solid #cbd5cf; box-shadow: 0 5px 16px #0002; z-index: 100; }
.lang-options a { padding: 7px; white-space: normal; }
.lang-options a.is-current { font-weight: 700; background: #eef3ee; }
.tap-table tr[data-status="FAIL"] { background: #fff2ed; }
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  .site-header, .site-footer, .tool-hero, .ww-toolbar, .toolbar-status, .ww-stepper, .step-nav, .import-panel, .result-actions, .results-actions button,
  .ww-scope, .step-panel[data-step="1"], .step-panel[data-step="2"], .step-panel[data-step="3"], .info, .text-button, .migration-banner button { display: none !important; }
  .step-panel[data-step="4"], .step-panel[data-step="5"] { display: block !important; }
  .ww-grid { display: block; }
  /* Paged grid tracks can overlap a fragmented table footer and the next caption. */
  .results-block { display: block; }
  .results-block > * { margin-bottom: 22px; }
  .ww-section { padding-block: 0; }
  .ww-section > .container { width: 100%; max-width: none; padding-inline: 0; }
  .ww-summary { position: static; margin-top: 16px; color: #000; background: #fff; }
  .sum-metrics dt, .sum-metrics dd { color: #000; }
  .prov::after { content: " " attr(data-label); font-weight: 400; }
  .rtable { font-size: 10.5px; break-inside: avoid; page-break-inside: avoid; }
  .rtable thead { break-after: avoid; page-break-after: avoid; }
  .rtable tr, .rtable tfoot, .ww-note, .check-detail, .result-disclaimer { break-inside: avoid; page-break-inside: avoid; }
  /* Notes belong once at the end of their table, not repeated at every page footer. */
  .rtable tfoot { display: table-row-group; }
  .rtable caption, .panel-heading, .check-group-title, .check-group-title + .ww-note { break-after: avoid; page-break-after: avoid; }
  .check-table[data-group="scope"], .ww-summary { break-inside: avoid; page-break-inside: avoid; }
  p, li { orphans: 3; widows: 3; }
  .table-scroll { overflow: visible; }
  /* All 13 tap columns must fit the page; nowrap/auto layout otherwise clips the path and R columns. */
  .tap-table { width: 100%; min-width: 0; max-width: 100%; table-layout: fixed; font-size: 10.5px; }
  .tap-table th, .tap-table td, .tap-table .num { white-space: normal; overflow-wrap: anywhere; word-break: normal; }
  .tap-table th, .tap-table td { padding: 6px 3px; line-height: 1.35; }
  .tap-table thead th { font-size: 10px; }
  .tap-table th:first-child, .tap-table td:first-child { width: 5%; }
  .tap-table th:nth-child(8), .tap-table td:nth-child(8) { width: 7%; }
  .tap-table th:nth-child(12), .tap-table td:nth-child(12) { width: 12%; }
  .tap-table th:nth-child(13), .tap-table td:nth-child(13) { width: 9%; }
  .tap-table thead th .prov, .tap-table tbody .prov { width: auto; max-width: 100%; margin-inline-start: 0; padding-inline: 2px; font-size: 8.5px; white-space: normal; overflow-wrap: anywhere; }
  .tap-table .badge { max-width: 100%; padding-inline: 3px; white-space: normal; font-size: 9px; }
  .tap-ratios { table-layout: fixed; break-inside: avoid; page-break-inside: avoid; }
  .tap-ratios th, .tap-ratios td { width: auto; white-space: normal; overflow-wrap: anywhere; }
  .number-format-note { display: none !important; }
  .report-safety { color: #000 !important; border: 2px solid #000 !important; break-inside: avoid; }
  [data-report-state="INVALID_DESIGN"] #results,
  [data-report-state="INVALID_DESIGN"] .ww-summary,
  [data-report-state="INCOMPLETE"] #results,
  [data-report-state="INCOMPLETE"] .ww-summary { display: none !important; }
  /* Native printing of a rejected design is an error notice, not an empty multi-page report. */
  :is([data-report-state="INVALID_DESIGN"], [data-report-state="INCOMPLETE"]) .ww-section > .container > :not(#report-safety):not(#error-summary) { display: none !important; }
  :is([data-report-state="INVALID_DESIGN"], [data-report-state="INCOMPLETE"]) .ww-section { padding-block: 0; min-height: 0; }
  :is([data-report-state="INVALID_DESIGN"], [data-report-state="INCOMPLETE"]) .error-summary { break-inside: avoid; page-break-inside: avoid; }
  dialog { display: none !important; }
  .tap-table tr { break-inside: avoid; }
}
.tap-table thead .prov { display: block; width: max-content; margin: 3px 0 0 auto; }
.tap-note { margin-top: 8px; }