/* ==========================================================================
   Wire Forge — app styles
   Armor strategy (learned the hard way on Exposure Forge): a theme rule with
   !important beats ANY non-important rule no matter its specificity. So the
   armor tier uses !important at TRIPLE scope (0,3,0) — blanket strip first,
   then per-component restores at the same specificity, source order deciding.
   ========================================================================== */

/* ---------- ARMOR: blanket strip ---------- */
.wf-app.wf-app.wf-app,
.wf-app.wf-app.wf-app * {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.5 !important;
  font-family: inherit !important;
  font-size: 100% !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: inherit !important;
  text-decoration: none !important;
  list-style: none !important;
  float: none !important;
  position: static;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  text-shadow: none !important;
  vertical-align: baseline !important;
  border-radius: 0 !important;
  text-indent: 0 !important;
  box-sizing: border-box !important;
}

/* ---------- tokens ---------- */
.wf-app.wf-app.wf-app {
  --wf-bg: #0a0e14;
  --wf-panel: #111823;
  --wf-panel-2: #16202e;
  --wf-line: #24344a;
  --wf-line-soft: #1b2637;
  --wf-text: #e8eef7;
  --wf-muted: #8ea2bd;
  --wf-dim: #7d8ea8;   /* was #64768f — only 3.84:1 on the panel, below AA for
                          small text. Every label, card title and secondary
                          metric value uses this token, so it has to clear 4.5:1
                          against the LIGHTEST ground it lands on (--wf-panel-2). */
  --wf-accent: #f2a93b;
  --wf-accent-soft: rgba(242, 169, 59, 0.14);
  --wf-accent-line: rgba(242, 169, 59, 0.4);
  --wf-cyan: #56c8d8;
  --wf-good: #58d69a;
  --wf-warn: #f0806a;
  --wf-btn-fg: #17120a;
  --wf-mark-bg: linear-gradient(150deg, rgba(242,169,59,.26), rgba(242,169,59,.06));
  --wf-track: #24344a;
  --wf-radius: 14px;
  --wf-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
             "Liberation Mono", monospace;

  display: block !important;
  position: relative !important;
  background: var(--wf-bg) !important;
  color: var(--wf-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  border-radius: var(--wf-radius) !important;
  padding: 22px !important;
  overflow: hidden !important;
  -webkit-text-size-adjust: 100%;
}

/* ---------- ARMOR: restores ---------- */
.wf-app.wf-app.wf-app p,
.wf-app.wf-app.wf-app ul,
.wf-app.wf-app.wf-app ol { margin: 0 0 10px !important; }
.wf-app.wf-app.wf-app li { margin: 0 0 6px 18px !important; list-style: disc !important; }
.wf-app.wf-app.wf-app strong,
.wf-app.wf-app.wf-app b { font-weight: 700 !important; }
.wf-app.wf-app.wf-app svg { display: block !important; max-width: 100% !important; }
.wf-app.wf-app.wf-app button,
.wf-app.wf-app.wf-app input,
.wf-app.wf-app.wf-app select { font-family: inherit !important; }
.wf-app.wf-app.wf-app [hidden] { display: none !important; }

/* transition-property is named EXPLICITLY everywhere. A bare `transition:.16s`
   means transition-property:all, which animates the focus outline width up
   from 0 and makes the focus ring look missing for 160ms. */
.wf-app.wf-app.wf-app :focus-visible {
  outline: 3px solid var(--wf-accent) !important;
  outline-offset: 2px !important;
}

/* ---------- header (shared Forge-family recipe) ---------- */
.wf-app.wf-app.wf-app .wf-head {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  margin: 0 0 20px !important;
}
.wf-app.wf-app.wf-app .wf-mark {
  flex: 0 0 54px !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  background: var(--wf-mark-bg) !important;
  border: 1px solid var(--wf-accent-line) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--wf-accent) !important;
}
.wf-app.wf-app.wf-app .wf-mark svg { width: 36px !important; height: 36px !important; }
.wf-app.wf-app.wf-app .wf-eyebrow {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .19em !important;
  text-transform: uppercase !important;
  color: var(--wf-accent) !important;
  margin: 0 0 3px !important;
}
.wf-app.wf-app.wf-app .wf-h2 {
  font-size: clamp(24px, 3vw, 36px) !important;
  font-weight: 780 !important;
  letter-spacing: -.035em !important;
  line-height: 1.12 !important;
  color: #f4f8fd !important;
  margin: 0 !important;
}
.wf-app.wf-app.wf-app .wf-sub {
  font-size: 14px !important;
  color: var(--wf-muted) !important;
  margin: 6px 0 0 !important;
  max-width: 62ch !important;
}
.wf-app.wf-app.wf-app .wf-pill {
  display: inline-block !important;
  padding: 8px 13px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--wf-dim) !important;
  border: 1px solid var(--wf-line) !important;
  border-radius: 999px !important;
  margin: 10px 0 0 !important;
  white-space: normal !important;
}

/* ---------- control strip ---------- */
.wf-app.wf-app.wf-app .wf-controls {
  background: var(--wf-panel) !important;
  border: 1px solid var(--wf-line-soft) !important;
  border-radius: var(--wf-radius) !important;
  padding: 16px !important;
  margin: 0 0 16px !important;
}
.wf-app.wf-app.wf-app .wf-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--wf-dim) !important;
  margin: 0 0 8px !important;
}
.wf-app.wf-app.wf-app .wf-bands {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 0 16px !important;
}
.wf-app.wf-app.wf-app .wf-band {
  padding: 7px 11px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--wf-muted) !important;
  background: var(--wf-panel-2) !important;
  border: 1px solid var(--wf-line) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease !important;
}
.wf-app.wf-app.wf-app .wf-band:hover { color: var(--wf-text) !important; border-color: var(--wf-accent-line) !important; }
.wf-app.wf-app.wf-app .wf-band[aria-pressed="true"] {
  background: var(--wf-accent-soft) !important;
  border-color: var(--wf-accent) !important;
  color: var(--wf-accent) !important;
}
.wf-app.wf-app.wf-app .wf-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: flex-end !important;
}
.wf-app.wf-app.wf-app .wf-field { flex: 1 1 190px !important; min-width: 150px !important; }
.wf-app.wf-app.wf-app input[type="number"],
.wf-app.wf-app.wf-app input[type="text"],
.wf-app.wf-app.wf-app select {
  display: block !important;
  width: 100% !important;
  padding: 11px 12px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--wf-text) !important;
  background: var(--wf-bg) !important;
  border: 1px solid var(--wf-line) !important;
  border-radius: 9px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.wf-app.wf-app.wf-app select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  padding-right: 34px !important;
}
.wf-app.wf-app.wf-app input:focus,
.wf-app.wf-app.wf-app select:focus { border-color: var(--wf-accent) !important; }

.wf-app.wf-app.wf-app .wf-units { display: flex !important; gap: 0 !important; }
.wf-app.wf-app.wf-app .wf-unit {
  padding: 11px 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--wf-muted) !important;
  background: var(--wf-bg) !important;
  border: 1px solid var(--wf-line) !important;
  cursor: pointer !important;
  transition: background-color .16s ease, color .16s ease !important;
}
.wf-app.wf-app.wf-app .wf-unit:first-child { border-radius: 9px 0 0 9px !important; }
.wf-app.wf-app.wf-app .wf-unit:last-child { border-radius: 0 9px 9px 0 !important; border-left-width: 0 !important; }
.wf-app.wf-app.wf-app .wf-unit[aria-pressed="true"] {
  background: var(--wf-accent) !important;
  border-color: var(--wf-accent) !important;
  color: var(--wf-btn-fg) !important;
}

/* ---------- tabs ---------- */
.wf-app.wf-app.wf-app .wf-tabs {
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  padding: 0 0 10px !important;
  margin: 0 0 16px !important;
  border-bottom: 1px solid var(--wf-line-soft) !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}
.wf-app.wf-app.wf-app .wf-tab {
  flex: 0 0 auto !important;
  padding: 9px 14px !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  color: var(--wf-muted) !important;
  background: var(--wf-panel) !important;
  border: 1px solid var(--wf-line-soft) !important;
  border-radius: 9px !important;
  cursor: pointer !important;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease !important;
}
.wf-app.wf-app.wf-app .wf-tab:hover { color: var(--wf-text) !important; }
.wf-app.wf-app.wf-app .wf-tab[aria-selected="true"] {
  background: var(--wf-accent-soft) !important;
  border-color: var(--wf-accent) !important;
  color: var(--wf-accent) !important;
}

/* ---------- layout ---------- */
.wf-app.wf-app.wf-app .wf-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
}
@media (min-width: 860px) {
  .wf-app.wf-app.wf-app .wf-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
  }
}
.wf-app.wf-app.wf-app .wf-grid > div { display: flex !important; flex-direction: column !important; }
.wf-app.wf-app.wf-app .wf-grid > div > .wf-card { flex: 1 1 auto !important; }
.wf-app.wf-app.wf-app .wf-card {
  background: var(--wf-panel) !important;
  border: 1px solid var(--wf-line-soft) !important;
  border-radius: var(--wf-radius) !important;
  padding: 18px !important;
}
.wf-app.wf-app.wf-app .wf-card-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--wf-dim) !important;
  margin: 0 0 14px !important;
}

/* ---------- results ---------- */
.wf-app.wf-app.wf-app .wf-hero-num {
  font-family: var(--wf-mono) !important;
  font-size: clamp(26px, 5.2vw, 40px) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1.1 !important;
  color: var(--wf-accent) !important;
  margin: 0 0 2px !important;
  word-break: break-word !important;
}
.wf-app.wf-app.wf-app .wf-hero-alt {
  font-family: var(--wf-mono) !important;
  font-size: 15px !important;
  color: var(--wf-muted) !important;
  margin: 0 0 4px !important;
}
.wf-app.wf-app.wf-app .wf-hero-cap {
  font-size: 13px !important;
  color: var(--wf-dim) !important;
  margin: 0 0 16px !important;
}
.wf-app.wf-app.wf-app .wf-out {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 11px 0 !important;
  border-top: 1px solid var(--wf-line-soft) !important;
  flex-wrap: wrap !important;
}
.wf-app.wf-app.wf-app .wf-out-k { font-size: 14px !important; color: var(--wf-muted) !important; }
.wf-app.wf-app.wf-app .wf-out-v {
  font-family: var(--wf-mono) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--wf-text) !important;
  text-align: right !important;
}
.wf-app.wf-app.wf-app .wf-out-v span { display: block !important; color: var(--wf-dim) !important; font-weight: 400 !important; font-size: 13px !important; }

/* ---------- formula block ---------- */
.wf-app.wf-app.wf-app .wf-fgrid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
}
@media (min-width: 900px) {
  .wf-app.wf-app.wf-app .wf-fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
.wf-app.wf-app.wf-app .wf-fgrid > .wf-formula { margin: 0 !important; }
.wf-app.wf-app.wf-app .wf-formula {
  background: var(--wf-bg) !important;
  border: 1px solid var(--wf-line) !important;
  border-left: 3px solid var(--wf-accent) !important;
  border-radius: 10px !important;
  padding: 14px !important;
  margin: 0 0 12px !important;
  overflow-x: auto !important;
}
.wf-app.wf-app.wf-app .wf-formula:last-child { margin-bottom: 0 !important; }
.wf-app.wf-app.wf-app .wf-fsys {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--wf-accent) !important;
  margin: 0 0 8px !important;
}
.wf-app.wf-app.wf-app .wf-fline {
  font-family: var(--wf-mono) !important;
  font-size: 13.5px !important;
  color: var(--wf-text) !important;
  white-space: nowrap !important;
  margin: 0 0 5px !important;
}
.wf-app.wf-app.wf-app .wf-fline-p {
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--wf-muted) !important;
  white-space: normal !important;
  margin: 0 0 5px !important;
}
.wf-app.wf-app.wf-app .wf-fline-p b { color: var(--wf-accent) !important; font-weight: 700 !important; }
.wf-app.wf-app.wf-app .wf-fline em {
  font-style: normal !important;
  color: var(--wf-dim) !important;
}
.wf-app.wf-app.wf-app .wf-fline b {
  font-weight: 700 !important;
  color: var(--wf-accent) !important;
}

/* ---------- diagram ---------- */
.wf-app.wf-app.wf-app .wf-dia {
  background: var(--wf-bg) !important;
  border: 1px solid var(--wf-line) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  margin: 0 0 16px !important;
}
.wf-app.wf-app.wf-app .wf-dia svg { width: 100% !important; height: auto !important; }

/* ---------- notes ---------- */
.wf-app.wf-app.wf-app .wf-note {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--wf-muted) !important;
  background: rgba(86, 200, 216, .07) !important;
  border: 1px solid rgba(86, 200, 216, .26) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin: 14px 0 0 !important;
}
.wf-app.wf-app.wf-app .wf-note strong { color: var(--wf-cyan) !important; }

/* ---------- slider ---------- */
.wf-app.wf-app.wf-app input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 30px !important;
  background: transparent !important;
  cursor: pointer !important;
  display: block !important;
}
.wf-app.wf-app.wf-app input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: var(--wf-track);
}
.wf-app.wf-app.wf-app input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 3px; background: var(--wf-track);
}
.wf-app.wf-app.wf-app input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -9px;
  border-radius: 50%; background: var(--wf-accent); border: 3px solid var(--wf-bg);
}
.wf-app.wf-app.wf-app input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border: 3px solid var(--wf-bg);
  border-radius: 50%; background: var(--wf-accent);
}

/* ---------- buttons ---------- */
.wf-app.wf-app.wf-app .wf-btn {
  display: inline-block !important;
  padding: 11px 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--wf-btn-fg) !important;
  background: var(--wf-accent) !important;
  border: 1px solid var(--wf-accent) !important;
  border-radius: 9px !important;
  cursor: pointer !important;
  transition: filter .16s ease !important;
}
.wf-app.wf-app.wf-app .wf-btn:hover { filter: brightness(1.08) !important; }
.wf-app.wf-app.wf-app .wf-btn-ghost {
  color: var(--wf-muted) !important;
  background: transparent !important;
  border-color: var(--wf-line) !important;
}
.wf-app.wf-app.wf-app .wf-btn-ghost:hover { color: var(--wf-text) !important; border-color: var(--wf-accent-line) !important; }
.wf-app.wf-app.wf-app .wf-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 16px 0 0 !important;
}

/* ---------- cut sheet table ---------- */
.wf-app.wf-app.wf-app .wf-cut { margin: 16px 0 0 !important; }
.wf-app.wf-app.wf-app table { width: 100% !important; border-collapse: collapse !important; }
.wf-app.wf-app.wf-app th,
.wf-app.wf-app.wf-app td {
  padding: 9px 8px !important;
  font-size: 13.5px !important;
  border-bottom: 1px solid var(--wf-line-soft) !important;
  text-align: left !important;
}
.wf-app.wf-app.wf-app th {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--wf-dim) !important;
}
.wf-app.wf-app.wf-app td.wf-n {
  font-family: var(--wf-mono) !important;
  color: var(--wf-text) !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.wf-app.wf-app.wf-app .wf-foot {
  margin: 18px 0 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid var(--wf-line-soft) !important;
  font-size: 12.5px !important;
  color: var(--wf-dim) !important;
}

@media (max-width: 420px) {
  .wf-app.wf-app.wf-app { padding: 14px !important; }
  .wf-app.wf-app.wf-app .wf-card { padding: 14px !important; }
  .wf-app.wf-app.wf-app .wf-mark { flex-basis: 44px !important; width: 44px !important; height: 44px !important; }
  .wf-app.wf-app.wf-app .wf-mark svg { width: 28px !important; height: 28px !important; }
}

@media print {
  .wf-app.wf-app.wf-app,
  .wf-app.wf-app.wf-app[data-wf-theme="day"],
  .wf-app.wf-app.wf-app[data-wf-theme="night"] {
    background: #fff !important;
    color: #000 !important;
    padding: 0 !important;
  }
  .wf-app.wf-app.wf-app .wf-controls,
  .wf-app.wf-app.wf-app .wf-tabs,
  .wf-app.wf-app.wf-app .wf-actions,
  .wf-app.wf-app.wf-app .wf-theme { display: none !important; }
  .wf-app.wf-app.wf-app .wf-card { border-color: #bbb !important; }
  .wf-app.wf-app.wf-app .wf-hero-num,
  .wf-app.wf-app.wf-app .wf-fline b,
  .wf-app.wf-app.wf-app .wf-fsys,
  .wf-app.wf-app.wf-app .wf-eyebrow { color: #8a5a00 !important; }
  .wf-app.wf-app.wf-app .wf-h2,
  .wf-app.wf-app.wf-app .wf-out-v,
  .wf-app.wf-app.wf-app .wf-fline,
  .wf-app.wf-app.wf-app td { color: #000 !important; }
  .wf-app.wf-app.wf-app .wf-sub,
  .wf-app.wf-app.wf-app .wf-out-k,
  .wf-app.wf-app.wf-app .wf-note { color: #333 !important; }
}

/* full-width formula row, edges flush with the two columns above it */
.wf-app.wf-app.wf-app .wf-frow { margin: 16px 0 0 !important; }

/* narrow screens: tables must never push the app box wider than its column */
@media (max-width: 520px) {
  .wf-app.wf-app.wf-app th,
  .wf-app.wf-app.wf-app td { padding: 8px 5px !important; font-size: 12.5px !important; }
  .wf-app.wf-app.wf-app td.wf-n { white-space: normal !important; }
  .wf-app.wf-app.wf-app .wf-out { flex-wrap: wrap !important; }
  .wf-app.wf-app.wf-app .wf-out-v { text-align: left !important; }
}

/* keep the label and value columns of every out-row on one line together */
.wf-app.wf-app.wf-app .wf-out-k { flex: 1 1 58% !important; min-width: 0 !important; }
.wf-app.wf-app.wf-app .wf-out-v { flex: 0 1 auto !important; }

/* prose values inside an out-row (inline styles lose to the armor's !important) */
.wf-app.wf-app.wf-app .wf-out-prose {
  font-family: inherit !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--wf-muted) !important;
  line-height: 1.5 !important;
}
@media (max-width: 520px) {
  .wf-app.wf-app.wf-app .wf-fline { font-size: 12px !important; }
}
@media (max-width: 380px) {
  .wf-app.wf-app.wf-app .wf-fline { font-size: 11px !important; }
}

/* ==========================================================================
   DAY THEME
   Every colour here is a token override — nothing else in the stylesheet has to
   know which theme is running. Contrast is checked in the build harness: body
   text, muted text and the accent all clear 4.5:1 on their own backgrounds, and
   the hero number and buttons clear it too. Never dark text on a dark ground,
   never pale text on a pale one.
   ========================================================================== */
.wf-app.wf-app.wf-app[data-wf-theme="day"] {
  --wf-bg: #eef2f7;
  --wf-panel: #ffffff;
  --wf-panel-2: #f2f6fb;
  --wf-line: #c4d1e3;
  --wf-line-soft: #dde6f1;
  --wf-text: #0f1826;
  --wf-muted: #43566c;
  --wf-dim: #5a6d85;
  /* #9c5a00 left the selected tab at 4.23:1 against its own tinted background.
     #8a5000 clears 4.5:1 everywhere the accent carries text and gives the rest
     of the day theme real margin instead of scraping past. */
  --wf-accent: #8a5000;
  --wf-accent-soft: rgba(138, 80, 0, 0.10);
  --wf-accent-line: rgba(138, 80, 0, 0.42);
  --wf-cyan: #0a6575;
  --wf-good: #146443;
  --wf-warn: #9a3119;
  --wf-btn-fg: #ffffff;
  --wf-mark-bg: linear-gradient(150deg, rgba(138,80,0,.16), rgba(138,80,0,.04));
  --wf-track: #c4d1e3;
}
.wf-app.wf-app.wf-app[data-wf-theme="day"] .wf-h2 { color: #0b1420 !important; }
.wf-app.wf-app.wf-app[data-wf-theme="day"] .wf-card,
.wf-app.wf-app.wf-app[data-wf-theme="day"] .wf-controls {
  border-color: var(--wf-line) !important;
}
.wf-app.wf-app.wf-app[data-wf-theme="day"] .wf-note {
  background: rgba(10, 101, 117, .06) !important;
  border-color: rgba(10, 101, 117, .30) !important;
}

/* theme switch sits beside the units switch and reuses its shape */
.wf-app.wf-app.wf-app .wf-theme { display: flex !important; gap: 0 !important; }
.wf-app.wf-app.wf-app .wf-theme .wf-unit { padding: 11px 14px !important; }

/* ==========================================================================
   Utility classes.
   These exist because the armor tier uses !important, which beats any inline
   style attribute. An inline `style="color:..."` inside this app is silently
   dead — it must be a class at the same triple scope to survive.
   ========================================================================== */
.wf-app.wf-app.wf-app .wf-i-accent { color: var(--wf-accent) !important; font-weight: 700 !important; }
.wf-app.wf-app.wf-app .wf-i-text   { color: var(--wf-text) !important; font-weight: 700 !important; }
.wf-app.wf-app.wf-app .wf-i-dim    { color: var(--wf-dim) !important; }
.wf-app.wf-app.wf-app .wf-i-muted  { color: var(--wf-muted) !important; }
.wf-app.wf-app.wf-app .wf-i-warn   { color: var(--wf-warn) !important; font-weight: 600 !important; }
.wf-app.wf-app.wf-app .wf-i-small  { color: var(--wf-dim) !important; font-size: 12.5px !important; }
.wf-app.wf-app.wf-app p.wf-i-small { margin: 2px 0 10px !important; }
.wf-app.wf-app.wf-app .wf-i-note   { color: var(--wf-muted) !important; font-size: 13.5px !important; }
.wf-app.wf-app.wf-app .wf-col      { min-width: 0 !important; }
.wf-app.wf-app.wf-app .wf-mb       { margin-bottom: 14px !important; }
.wf-app.wf-app.wf-app .wf-mt       { margin-top: 6px !important; }
.wf-app.wf-app.wf-app .wf-mt-lg    { margin-top: 14px !important; }
.wf-app.wf-app.wf-app .wf-mt-xl    { margin-top: 20px !important; }
.wf-app.wf-app.wf-app th.wf-th-r   { text-align: right !important; }
.wf-app.wf-app.wf-app .wf-field-auto { flex: 0 0 auto !important; }
.wf-app.wf-app.wf-app .wf-sr {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* ---------- license segment picker ---------- */
.wf-app.wf-app.wf-app .wf-seg-wrap {
  margin: 16px 0 0 !important;
  padding: 16px 0 0 !important;
  border-top: 1px solid var(--wf-line-soft) !important;
}
.wf-app.wf-app.wf-app .wf-seg-head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 12px !important;
}
.wf-app.wf-app.wf-app .wf-seg-label { margin: 0 !important; }
.wf-app.wf-app.wf-app .wf-classes { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
.wf-app.wf-app.wf-app .wf-segs {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch !important;
}
.wf-app.wf-app.wf-app .wf-seg {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 11px 13px !important;
  text-align: left !important;
  background: var(--wf-panel-2) !important;
  border: 1px solid var(--wf-line) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: background-color .16s ease, border-color .16s ease !important;
}
.wf-app.wf-app.wf-app .wf-seg:hover { border-color: var(--wf-accent-line) !important; }
.wf-app.wf-app.wf-app .wf-seg[aria-pressed="true"] {
  background: var(--wf-accent-soft) !important;
  border-color: var(--wf-accent) !important;
}
.wf-app.wf-app.wf-app .wf-seg-mode {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--wf-dim) !important;
}
.wf-app.wf-app.wf-app .wf-seg[aria-pressed="true"] .wf-seg-mode { color: var(--wf-accent) !important; }
.wf-app.wf-app.wf-app .wf-seg-mid {
  font-family: var(--wf-mono) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--wf-text) !important;
}
.wf-app.wf-app.wf-app .wf-seg-range {
  font-family: var(--wf-mono) !important;
  font-size: 12px !important;
  color: var(--wf-dim) !important;
}
.wf-app.wf-app.wf-app .wf-seg-comp { border-style: dashed !important; }

/* the frequency field should not stretch across the whole control strip */
.wf-app.wf-app.wf-app #wf-freq { max-width: 260px !important; }

/* quiet disclosure link for advanced controls */
.wf-app.wf-app.wf-app .wf-link {
  display: inline-block !important;
  padding: 4px 0 !important;
  margin: 0 0 6px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--wf-dim) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px dotted var(--wf-line) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: color .16s ease, border-color .16s ease !important;
}
.wf-app.wf-app.wf-app .wf-link:hover {
  color: var(--wf-accent) !important;
  border-bottom-color: var(--wf-accent-line) !important;
}

/* compact numeric inputs inside the SWR reading table */
.wf-app.wf-app.wf-app input.wf-mini {
  padding: 8px 10px !important;
  font-size: 15px !important;
  max-width: 170px !important;
}
.wf-app.wf-app.wf-app .wf-mini::placeholder { color: var(--wf-dim) !important; opacity: 1 !important; }

/* an inline callout inside a results card */
.wf-app.wf-app.wf-app .wf-note-inline {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--wf-muted) !important;
  background: var(--wf-panel-2) !important;
  border-left: 3px solid var(--wf-cyan) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin: 4px 0 14px !important;
}
.wf-app.wf-app.wf-app .wf-note-inline b { color: var(--wf-text) !important; font-weight: 700 !important; }

/* the headline SWR figure takes its colour from what the reading means */
.wf-app.wf-app.wf-app .wf-swr-good { color: var(--wf-good) !important; }
.wf-app.wf-app.wf-app .wf-swr-ok   { color: var(--wf-accent) !important; }
.wf-app.wf-app.wf-app .wf-swr-warn { color: var(--wf-accent) !important; }
.wf-app.wf-app.wf-app .wf-swr-bad  { color: var(--wf-warn) !important; }

/* ---------- terms defined inline ---------- */
.wf-app.wf-app.wf-app .wf-term {
  display: inline !important;
  padding: 0 !important;
  font: inherit !important;
  font-weight: 600 !important;
  color: var(--wf-cyan) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px dotted var(--wf-cyan) !important;
  border-radius: 0 !important;
  cursor: help !important;
}
.wf-app.wf-app.wf-app .wf-term[aria-expanded="true"] {
  background: rgba(86, 200, 216, .14) !important;
  border-bottom-style: solid !important;
}
.wf-app.wf-app.wf-app .wf-termbox {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--wf-text) !important;
  background: var(--wf-panel) !important;
  border: 1px solid var(--wf-cyan) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin: 16px 0 0 !important;
}
.wf-app.wf-app.wf-app .wf-termbox b { color: var(--wf-cyan) !important; }
.wf-app.wf-app.wf-app .wf-term-close {
  margin-left: 8px !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--wf-dim) !important;
  background: transparent !important;
  border: 1px solid var(--wf-line) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
}

/* ---------- glossary ---------- */
.wf-app.wf-app.wf-app .wf-gloss-head {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  text-align: left !important;
}
.wf-app.wf-app.wf-app .wf-gloss-title { margin: 0 !important; }
.wf-app.wf-app.wf-app .wf-gloss-sign {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: var(--wf-accent) !important;
}
.wf-app.wf-app.wf-app .wf-gloss {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  margin: 14px 0 0 !important;
}
@media (min-width: 780px) {
  .wf-app.wf-app.wf-app .wf-gloss { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.wf-app.wf-app.wf-app .wf-gloss-item {
  padding: 11px 13px !important;
  background: var(--wf-panel-2) !important;
  border: 1px solid var(--wf-line-soft) !important;
  border-radius: 9px !important;
}
.wf-app.wf-app.wf-app .wf-gloss-item b {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--wf-accent) !important;
  margin: 0 0 3px !important;
}
.wf-app.wf-app.wf-app .wf-gloss-item span {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--wf-muted) !important;
}

/* ---------- will it fit ---------- */
.wf-app.wf-app.wf-app .wf-yes { color: var(--wf-good) !important; font-weight: 700 !important; }
.wf-app.wf-app.wf-app .wf-no  { color: var(--wf-dim) !important; font-weight: 600 !important; }

/* ---------- the cut sheet: screen-hidden, print-only ---------- */
.wf-app.wf-app.wf-app .wf-sheet { display: none !important; }

@media print {
  /* everything on screen goes away; the sheet is the whole page */
  .wf-app.wf-app.wf-app > *:not(.wf-sheet) { display: none !important; }
  .wf-app.wf-app.wf-app .wf-sheet {
    display: block !important;
    color: #000 !important;
    font-size: 10.5pt !important;
    line-height: 1.4 !important;
  }
  .wf-app.wf-app.wf-app .wf-sheet-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 16px !important;
    padding: 0 0 8pt !important;
    border-bottom: 2px solid #000 !important;
    margin: 0 0 12pt !important;
  }
  .wf-app.wf-app.wf-app .wf-sheet-title { font-size: 16pt !important; font-weight: 700 !important; }
  .wf-app.wf-app.wf-app .wf-sheet-sub,
  .wf-app.wf-app.wf-app .wf-sheet-call { font-size: 9.5pt !important; color: #444 !important; }
  .wf-app.wf-app.wf-app .wf-sheet-sec { margin: 0 0 12pt !important; break-inside: avoid !important; }
  .wf-app.wf-app.wf-app .wf-sheet-sec h3 {
    font-size: 11pt !important;
    font-weight: 700 !important;
    margin: 0 0 5pt !important;
    padding: 0 0 2pt !important;
    border-bottom: 1px solid #999 !important;
  }
  .wf-app.wf-app.wf-app table.wf-sheet-t { width: 100% !important; border-collapse: collapse !important; }
  .wf-app.wf-app.wf-app table.wf-sheet-t td,
  .wf-app.wf-app.wf-app table.wf-sheet-t th {
    padding: 4pt 6pt !important;
    border: 1px solid #bbb !important;
    font-size: 10pt !important;
    color: #000 !important;
    text-align: left !important;
    vertical-align: top !important;
  }
  .wf-app.wf-app.wf-app table.wf-sheet-t th { background: #eee !important; font-weight: 700 !important; font-size: 9.5pt !important; }
  .wf-app.wf-app.wf-app table.wf-sheet-t td.wf-n { text-align: right !important; white-space: nowrap !important; font-family: monospace !important; }
  .wf-app.wf-app.wf-app .wf-sheet-log td { height: 20pt !important; }
  .wf-app.wf-app.wf-app .wf-sheet-small { font-size: 9pt !important; color: #444 !important; }
  .wf-app.wf-app.wf-app ul.wf-sheet-list,
  .wf-app.wf-app.wf-app ol.wf-sheet-ol { margin: 0 0 0 4pt !important; }
  .wf-app.wf-app.wf-app ul.wf-sheet-list li {
    list-style: none !important;
    margin: 0 0 3pt !important;
    font-size: 10pt !important;
  }
  .wf-app.wf-app.wf-app ol.wf-sheet-ol { counter-reset: step !important; }
  .wf-app.wf-app.wf-app ol.wf-sheet-ol li {
    list-style: none !important;
    counter-increment: step !important;
    margin: 0 0 4pt 16pt !important;
    font-size: 10pt !important;
    position: relative !important;
  }
  .wf-app.wf-app.wf-app ol.wf-sheet-ol li::before {
    content: counter(step) "." !important;
    position: absolute !important;
    left: -16pt !important;
    font-weight: 700 !important;
  }
  .wf-app.wf-app.wf-app .wf-sheet-foot {
    margin: 14pt 0 0 !important;
    padding: 6pt 0 0 !important;
    border-top: 1px solid #999 !important;
    font-size: 8.5pt !important;
    color: #555 !important;
  }
  @page { margin: 14mm; }
}

/* An odd last term would sit stranded on the left of a two-up grid; span it
   instead, so every row reads as a deliberate full row. */
.wf-app.wf-app.wf-app .wf-gloss-item:last-child:nth-child(odd) {
  grid-column: 1 / -1 !important;
}
@media print {
  .wf-app.wf-app.wf-app { border-radius: 0 !important; padding: 0 !important; overflow: visible !important; }
}

/* the power-line warning on the printed cut sheet */
@media print {
  .wf-app.wf-app.wf-app .wf-sheet-warn {
    border: 2px solid #000 !important;
    padding: 6pt 8pt !important;
    margin: 0 0 12pt !important;
    font-size: 10pt !important;
    line-height: 1.35 !important;
    color: #000 !important;
    break-inside: avoid !important;
  }
  .wf-app.wf-app.wf-app .wf-sheet-warn b { font-weight: 700 !important; }
}