/* The HTML hidden attribute must always win over component display rules.
   Without this, a rule like `.panel { display: flex }` overrides the user-agent
   `[hidden] { display: none }`, leaving "hidden" elements visible. */
[hidden] {
  display: none !important;
}

:root {
  --bg: #0d1116;
  --surface: #171d24;
  --surface-soft: #202832;
  --surface-lift: #242d38;
  --ink: #f5f7f8;
  --muted: #aab4bd;
  --line: #2d3742;
  --line-strong: #536171;
  --brand: #ff5a2f;
  --brand-2: #d92f27;
  --accent: #ffb03a;
  --water: #37b7e4;
  --water-deep: #125d78;
  --accent-soft: #3b2519;
  --ok: #3ddc97;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(126deg, rgba(217, 47, 39, 0.24) 0%, rgba(217, 47, 39, 0.08) 18%, transparent 36%),
    linear-gradient(306deg, transparent 0%, rgba(55, 183, 228, 0.08) 54%, rgba(18, 93, 120, 0.22) 100%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(160deg, #090d12 0%, #111820 32%, #1b2530 64%, #0c1118 100%),
    #0d1116;
  background-attachment: fixed;
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
  color: var(--ink);
  font-family:
    "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body::before {
  background:
    linear-gradient(118deg, transparent 0 16%, rgba(255, 90, 47, 0.11) 16% 16.35%, transparent 16.8% 100%),
    linear-gradient(118deg, transparent 0 19%, rgba(255, 176, 58, 0.08) 19% 19.2%, transparent 19.55% 100%),
    linear-gradient(298deg, transparent 0 65%, rgba(55, 183, 228, 0.12) 65% 65.3%, transparent 65.75% 100%),
    linear-gradient(298deg, transparent 0 68%, rgba(55, 183, 228, 0.07) 68% 68.18%, transparent 68.55% 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
}

body[data-theme="plain-light"] {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-soft: #f7fafc;
  --surface-lift: #eef4f8;
  --ink: #16202a;
  --muted: #4f6070;
  --line: #cbd6df;
  --line-strong: #91a5b6;
  --brand: #be3d2a;
  --brand-2: #8f2d22;
  --accent: #7f4a00;
  --water: #0f6c8e;
  --water-deep: #0d506b;
  --accent-soft: #fff5e4;
  --ok: #176d49;
  --shadow: 0 10px 24px rgba(36, 52, 68, 0.12);
  background:
    linear-gradient(#dbe5ed 1px, transparent 1px),
    linear-gradient(90deg, #dbe5ed 1px, transparent 1px),
    linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%);
  background-attachment: fixed;
  background-size: 34px 34px, 34px 34px, auto;
  color: var(--ink);
  color-scheme: light;
}

body[data-theme="plain-light"]::before {
  display: none;
}

button,
input,
select,
textarea {
  font: inherit;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease,
    opacity 150ms ease,
    transform 150ms ease;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(55, 183, 228, 0.72);
  outline-offset: 2px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.app-shell {
  margin: 0 auto;
  padding: 22px 0 96px;
  position: relative;
  width: min(1680px, calc(100% - 28px));
  z-index: 1;
}

.topbar {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255, 90, 47, 0.12), transparent 28%, rgba(55, 183, 228, 0.11) 100%),
    linear-gradient(135deg, rgba(20, 27, 35, 0.98), rgba(34, 43, 54, 0.96));
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 18px;
}

.view-mode-toggle {
  background: rgba(13, 17, 22, 0.88);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: inline-grid;
  gap: 5px;
  grid-template-columns: repeat(2, minmax(92px, 1fr));
  padding: 5px;
}

.app-top-actions {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 10px;
}

.app-refresh-button {
  background: rgba(13, 17, 22, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.48);
  border-radius: 9px;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 950;
  min-height: 42px;
  padding: 0 14px;
  text-transform: uppercase;
}

.app-refresh-button:hover {
  border-color: rgba(55, 183, 228, 0.74);
  color: var(--water);
}

.theme-control {
  align-items: stretch;
  background: rgba(13, 17, 22, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 9px;
  display: grid;
  gap: 2px;
  min-height: 42px;
  min-width: 150px;
  padding: 5px 8px 6px;
}

.theme-control span {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.theme-control select {
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 950;
  min-height: 22px;
  padding: 0;
}

.theme-control select option {
  background: #10161d;
  color: #f5f7f8;
}

body[data-theme="plain-light"] .theme-control select option {
  background: #ffffff;
  color: #16202a;
}

.theme-control select:focus {
  box-shadow: none;
}

.license-pill {
  align-items: center;
  background: rgba(13, 17, 22, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 10px;
  display: flex;
  gap: 10px;
  min-height: 42px;
  min-width: 210px;
  padding: 7px 12px;
}

.license-pill strong,
.license-overview-card strong {
  color: var(--ink);
  display: block;
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1.1;
}

.license-pill span:not(.license-status-dot),
.license-overview-card span:not(.license-status-dot),
.license-helper-text {
  color: var(--muted);
  display: block;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.35;
}

.license-pill[data-tone="ok"] {
  border-color: rgba(61, 220, 151, 0.46);
  box-shadow: inset 0 0 0 1px rgba(61, 220, 151, 0.08);
}

.license-pill[data-tone="warn"] {
  border-color: rgba(255, 176, 58, 0.5);
}

.license-pill[data-tone="bad"] {
  border-color: rgba(255, 90, 47, 0.58);
}

.license-status-dot {
  background: #6b7280;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(107, 114, 128, 0.14);
  display: inline-block;
  flex: 0 0 auto;
  height: 10px;
  width: 10px;
}

.license-status-dot.large {
  height: 16px;
  width: 16px;
}

.license-status-dot[data-tone="ok"] {
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(61, 220, 151, 0.16);
}

.license-status-dot[data-tone="warn"] {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 176, 58, 0.16);
}

.license-status-dot[data-tone="bad"] {
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(255, 90, 47, 0.18);
}

.view-mode-button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 950;
  min-height: 36px;
  padding: 0 12px;
  text-transform: uppercase;
}

.view-mode-button.active {
  background: linear-gradient(135deg, rgba(255, 90, 47, 0.26), rgba(55, 183, 228, 0.12));
  border-color: rgba(255, 90, 47, 0.72);
  color: var(--ink);
}

body[data-theme="plain-light"] .topbar {
  background: #ffffff;
  border-color: #b9c8d4;
  box-shadow: var(--shadow);
}

body[data-theme="plain-light"] .brand-mark {
  border-color: #9db7c9;
  box-shadow: inset 0 0 0 1px rgba(190, 61, 42, 0.18);
}

body[data-theme="plain-light"] .app-refresh-button,
body[data-theme="plain-light"] .license-pill,
body[data-theme="plain-light"] .theme-control,
body[data-theme="plain-light"] .view-mode-toggle {
  background: #f6f9fb;
  border-color: #b9c8d4;
}

body[data-theme="plain-light"] .app-refresh-button,
body[data-theme="plain-light"] .theme-control select {
  color: var(--ink);
}

body[data-theme="plain-light"] .view-mode-button.active {
  background: #ffffff;
  border-color: var(--brand);
  box-shadow: inset 0 -3px 0 var(--brand);
  color: var(--ink);
}

.brand-lockup {
  align-items: center;
  display: flex;
  gap: 13px;
  min-width: 0;
}

.brand-mark {
  border: 1px solid rgba(55, 183, 228, 0.34);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 90, 47, 0.16);
  height: 52px;
  object-fit: cover;
  width: 52px;
}

h1 {
  color: var(--ink);
  font-size: clamp(1.55rem, 3vw, 3.1rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.96;
  text-transform: uppercase;
}

.eyebrow {
  color: var(--accent);
  font-family: Consolas, "SFMono-Regular", ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.top-actions,
.inline-actions,
.section-heading {
  align-items: center;
  display: flex;
  gap: 8px;
}

.top-actions,
.inline-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.top-actions select {
  min-width: 180px;
}

.tool-shell { display: flex; align-items: flex-start; gap: 16px; }
.tool-content { flex: 1 1 0; min-width: 0; }

.tool-tabs {
  background:
    linear-gradient(160deg, rgba(255, 90, 47, 0.06), transparent 30%, rgba(55, 183, 228, 0.06)),
    rgba(17, 24, 32, 0.92);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 0 220px;
  width: 220px;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  margin-bottom: 16px;
  padding: 10px 9px;
}

.tool-tab-group {
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  opacity: 0.7;
  padding: 11px 8px 4px;
  margin: 0;
}
.tool-tabs > .tool-tab-group:first-child { padding-top: 2px; }

.tool-tab {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  display: flex;
  font-size: 0.8rem;
  font-weight: 700;
  justify-content: flex-start;
  line-height: 1.2;
  min-height: 0;
  padding: 8px 11px;
  text-align: left;
  text-transform: none;
  width: 100%;
}
.tool-tab:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); }

.tool-tab.active {
  background: linear-gradient(135deg, rgba(255, 90, 47, 0.22), rgba(55, 183, 228, 0.12));
  border-color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand);
  color: var(--ink);
}

.tool-tab:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

body[data-theme="plain-light"] .tool-tabs {
  background: #e8eef4;
  border-color: #b7c7d4;
  box-shadow: 0 8px 18px rgba(36, 52, 68, 0.1);
}

body[data-theme="plain-light"] .tool-tab {
  background: #ffffff;
  border-color: #c2d0dc;
  color: #34495a;
}

body[data-theme="plain-light"] .tool-tab.active {
  background: #fff7ed;
  border-color: var(--brand);
  box-shadow: inset 0 -3px 0 var(--brand);
  color: #16202a;
}

.license-tool-gate {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255, 90, 47, 0.18), rgba(17, 24, 32, 0.94) 48%, rgba(55, 183, 228, 0.11)),
    rgba(17, 24, 32, 0.96);
  border: 1px solid rgba(255, 90, 47, 0.46);
  border-radius: 10px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: -4px 0 16px;
  padding: 16px 18px;
}

.license-tool-gate[hidden] {
  display: none;
}

.license-tool-gate strong {
  color: var(--ink);
  display: block;
  font-size: 1rem;
  font-weight: 950;
}

.license-tool-gate span {
  color: var(--muted);
  display: block;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.45;
  margin-top: 4px;
}

body.license-locked .tool-panel {
  opacity: 0.72;
}

body.license-locked .tool-panel :disabled {
  cursor: not-allowed;
}

body[data-theme="plain-light"] .license-tool-gate {
  background: #fff7ed;
  border-color: #da7b67;
  box-shadow: var(--shadow);
}

.tool-panel[hidden] {
  display: none;
}

.tool-placeholder-panel {
  background:
    linear-gradient(135deg, rgba(255, 90, 47, 0.13), transparent 42%, rgba(55, 183, 228, 0.12)),
    linear-gradient(180deg, rgba(27, 34, 42, 0.98), rgba(17, 23, 30, 0.98));
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  min-height: 320px;
  padding: 34px;
}

.tool-placeholder-panel h2 {
  color: var(--ink);
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.tool-placeholder-panel p:last-child {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.45;
  max-width: 72ch;
}

.simple-tool-chooser {
  display: grid;
  gap: 16px;
}

.simple-tool-chooser[hidden],
.simple-step-nav[hidden] {
  display: none;
}

.simple-step-hero {
  background:
    linear-gradient(90deg, rgba(255, 90, 47, 0.18), transparent 42%, rgba(55, 183, 228, 0.14)),
    linear-gradient(180deg, rgba(27, 34, 42, 0.98), rgba(17, 23, 30, 0.98));
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 28px;
}

.simple-step-hero h2 {
  color: var(--ink);
  font-size: clamp(1.6rem, 3vw, 3rem);
  line-height: 1;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.simple-step-hero p:last-child {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.45;
}

.simple-tool-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.simple-tool-card {
  background:
    linear-gradient(135deg, rgba(255, 90, 47, 0.1), transparent 44%, rgba(55, 183, 228, 0.08)),
    rgba(17, 24, 32, 0.94);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  min-height: 142px;
  padding: 18px;
  text-align: left;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.simple-tool-card:hover,
.simple-tool-card:focus-visible {
  background:
    linear-gradient(135deg, rgba(255, 90, 47, 0.18), transparent 42%, rgba(55, 183, 228, 0.14)),
    rgba(22, 31, 40, 0.98);
  border-color: rgba(255, 176, 58, 0.68);
  transform: translateY(-1px);
}

.simple-tool-card strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1.18;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.simple-tool-card span {
  color: var(--muted);
  display: block;
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.35;
}

.sprinkler-calculator-panel {
  display: grid;
  gap: 14px;
}

.calculator-hero {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255, 90, 47, 0.16), transparent 36%, rgba(55, 183, 228, 0.12)),
    linear-gradient(180deg, rgba(27, 34, 42, 0.98), rgba(17, 23, 30, 0.98));
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  display: flex;
  justify-content: space-between;
  padding: 18px;
}

.calculator-hero h2 {
  color: var(--ink);
  font-size: clamp(1.35rem, 2.4vw, 2.3rem);
  line-height: 1;
  text-transform: uppercase;
}

.calculator-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 1000px) { .calculator-grid { grid-template-columns: 1fr; } }

.calculator-section {
  min-height: 0;
}

.spacing-dimension-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.calculator-fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px;
}

.calculator-fieldset legend {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 900;
  padding: 0 6px;
  text-transform: uppercase;
}

.calculator-result-card {
  background:
    linear-gradient(135deg, rgba(255, 90, 47, 0.22), rgba(255, 176, 58, 0.16)),
    #151d25;
  border: 1px solid rgba(255, 90, 47, 0.42);
  border-radius: 8px;
  margin-top: 12px;
  padding: 16px;
  text-align: center;
}

.calculator-result-card span {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 900;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.calculator-result-card strong {
  color: var(--ink);
  display: block;
  font-size: clamp(1.65rem, 3vw, 2.8rem);
  line-height: 1;
}

.hazard-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: visible;
}

.hazard-table {
  border-collapse: collapse;
  width: 100%;
}

.hazard-table th,
.hazard-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  text-align: left;
}

.hazard-table th {
  background: rgba(255, 90, 47, 0.18);
  color: var(--accent);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.hazard-table td:nth-child(2),
.hazard-table td:nth-child(3),
.hazard-table th:nth-child(2),
.hazard-table th:nth-child(3) {
  text-align: right;
}

.hazard-table tr:last-child td {
  border-bottom: 0;
}

.hazard-table .custom-row td {
  background: rgba(55, 183, 228, 0.08);
}

.copy-gpm-button {
  background: rgba(255, 176, 58, 0.1);
  border: 1px solid rgba(255, 176, 58, 0.36);
  border-radius: 5px;
  color: var(--accent);
  font-weight: 900;
  min-height: 30px;
  min-width: 78px;
  padding: 3px 9px;
}

.copy-gpm-button:hover,
.copy-gpm-button:focus-visible {
  background: rgba(255, 90, 47, 0.22);
  border-color: var(--brand);
}

.copy-status {
  color: var(--ok);
  min-height: 1.3em;
}

.custom-density-label {
  min-width: 170px;
}

.segmented-control {
  background: #10161d;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: inline-grid;
  gap: 4px;
  grid-template-columns: repeat(2, minmax(64px, 1fr));
  padding: 4px;
}

.segmented-control label {
  cursor: pointer;
  display: block;
  /* Containing block for the hidden radio below — without this the absolutely
     positioned input resolves width:100% against the viewport and silently
     extends the page's scrollWidth (horizontal scrollbar at 1366px). */
  position: relative;
}

.segmented-control input {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}

.segmented-control span {
  border-radius: 5px;
  color: var(--muted);
  display: block;
  font-weight: 900;
  padding: 8px 10px;
  text-align: center;
}

.segmented-control input:checked + span {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
}

.formula-chip,
.calculator-status {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.formula-chip {
  background: rgba(13, 17, 22, 0.62);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 12px;
}

.flow-result-card {
  margin-top: 16px;
}

.pressure-requirements-section {
  grid-column: 1 / -1;
  overflow: hidden;
  position: relative;
  transition: border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.pressure-requirements-section.is-locked {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 9px, transparent 9px 18px),
    rgba(17, 24, 31, 0.82);
  border-color: rgba(115, 129, 140, 0.22);
  box-shadow: none;
  opacity: 0.78;
}

.pressure-requirements-section.is-awake {
  border-color: rgba(255, 176, 58, 0.48);
  box-shadow: 0 0 0 1px rgba(255, 176, 58, 0.08), 0 18px 45px rgba(7, 13, 18, 0.34);
}

.pressure-hazard-label {
  min-width: 190px;
}

.pressure-summary-card {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(40, 167, 98, 0.14), rgba(255, 176, 58, 0.12), rgba(255, 83, 50, 0.12)),
    var(--surface-soft);
  border: 1px solid rgba(255, 176, 58, 0.28);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 12px 14px;
}

.pressure-summary-card span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pressure-summary-card strong {
  color: var(--ink);
  font-size: 1.25rem;
}

.pressure-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.pressure-table {
  border-collapse: collapse;
  width: 100%;
}

.pressure-table th,
.pressure-table td {
  border-bottom: 1px solid var(--line);
  padding: 9px 12px;
  text-align: left;
}

.pressure-table th {
  background: rgba(255, 90, 47, 0.18);
  color: var(--accent);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.pressure-table th:nth-child(2),
.pressure-table td:nth-child(2) {
  text-align: right;
}

.pressure-table tr:last-child td {
  border-bottom: 0;
}

.pressure-pill {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pressure-color), transparent 24%), color-mix(in srgb, var(--pressure-color), #070b0e 36%));
  border: 1px solid color-mix(in srgb, var(--pressure-color), white 18%);
  border-radius: 999px;
  color: #fff;
  display: inline-block;
  font-weight: 950;
  min-width: 116px;
  padding: 6px 10px;
  text-align: center;
}

.is-locked .pressure-summary-card,
.is-locked .pressure-table-wrap {
  filter: grayscale(0.86);
  opacity: 0.62;
}

.calculator-status {
  color: #ffb3a5;
  min-height: 1.2em;
  padding-top: 8px;
}

.calculator-status:empty {
  min-height: 0;
  padding-top: 0;
}

.calculator-section input:not(:disabled) {
  border-color: rgba(255, 176, 58, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 58, 0.13);
}

.calculator-section input:disabled {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 6px, transparent 6px 12px),
    #171d24;
  border-color: #303944;
  color: #7d8994; /* >=4.5:1 on #171d24 */
  cursor: not-allowed;
  opacity: 0.72;
}

.calculator-section label:has(input:disabled) {
  color: #8b96a0; /* >=4.5:1 on the dark card */
}

/* Light mode: the dark disabled styling above reads as a rendering bug inside
   white cards — swap to a light muted treatment (PROJECT_CONFORMANCE §5a). */
body[data-theme="plain-light"] .calculator-section input:disabled {
  background:
    repeating-linear-gradient(135deg, rgba(22, 32, 42, 0.04) 0 6px, transparent 6px 12px),
    var(--surface-lift);
  border-color: var(--line);
  color: var(--muted);
}

body[data-theme="plain-light"] .calculator-section label:has(input:disabled) {
  color: var(--muted);
}

.layout-generator-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.4fr);
}
.layout-input-section { grid-column: 1; grid-row: 1 / span 2; }
.layout-results-section { grid-column: 2; grid-row: 1; }
.layout-diagram-section { grid-column: 2; grid-row: 2; }
.layout-diagram-shell svg { width: 100%; height: auto; display: block; }
.layout-result-grid .calculator-result-card { background: rgba(255, 255, 255, 0.04); border: 0; border-radius: 10px; padding: 14px 16px; }
@media (max-width: 1000px) {
  .layout-generator-grid { grid-template-columns: 1fr; }
  .layout-input-section, .layout-results-section, .layout-diagram-section { grid-column: 1; grid-row: auto; }
}

.bracing-generator-grid {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(280px, 0.65fr) minmax(360px, 0.95fr) minmax(520px, 1.35fr);
}

.pdf-merge-grid {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(600px, 1fr) minmax(320px, 0.42fr);
}

.hydraulic-package-grid {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(420px, 0.48fr) minmax(680px, 1fr);
}
/* Package Info + the cart stack in column 1; the Calc Workspace (drop zone) fills
   the full right column beside BOTH — no empty grid cell next to the cart. */
.hydraulic-package-grid .hydraulic-info-section { grid-column: 1; grid-row: 1; }
.hydraulic-package-grid .hydraulic-workspace-section { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
.hydraulic-package-grid .submittal-cart-section { grid-column: 1; grid-row: 2; }

.compact-field-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-heading {
  margin-top: 16px;
}

.feet-calculator-grid {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(360px, 0.8fr) minmax(420px, 0.95fr) minmax(320px, 0.65fr);
}
/* Three fixed min-widths (360+420+320 + gaps) overflow at 1366px wide — drop the
   help/rules card to a full-width row below the two working cards. */
@media (max-width: 1500px) {
  .feet-calculator-grid { grid-template-columns: minmax(340px, 0.9fr) minmax(380px, 1fr); }
  .feet-help-section { grid-column: 1 / -1; }
}

.code-converter-grid {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(320px, 0.55fr) minmax(520px, 1fr);
}

.nfpa1142-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.3fr);
}
.nfpa1142-input-section { grid-column: 1; grid-row: 1 / span 2; }
.nfpa1142-criteria-section { grid-column: 2; grid-row: 1; }
.nfpa1142-results-section { grid-column: 2; grid-row: 2; }
@media (max-width: 1000px) {
  .nfpa1142-grid { grid-template-columns: 1fr; }
  .nfpa1142-input-section, .nfpa1142-criteria-section, .nfpa1142-results-section { grid-column: 1; grid-row: auto; }
}
.water-sheet-block {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
}
.water-sheet-toggle {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  font-size: 13px;
  gap: 8px;
}
.water-sheet-toggle input { width: 16px; height: 16px; }
.water-sheet-disclaimer {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 12px;
  resize: vertical;
  width: 100%;
}
.water-sheet-disclaimer:disabled { opacity: 0.4; }
.pdf-mode-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
/* The generic segmented control is a 2-column grid; this one has three options —
   without this the third ("Merge & Compress") wrapped onto a second line. */
.pdf-mode-toggle {
  grid-template-columns: repeat(3, minmax(64px, auto));
}
.pdf-mode-hint {
  color: var(--muted, #9aa7b3);
  font-size: 12.5px;
  margin: 0;
}
.pdf-recent-section { margin-top: 16px; }
.pdf-recent-section.is-drop-target {
  outline: 2px dashed var(--accent, #37b7e4);
  outline-offset: 3px;
}
.pdf-recent-hint {
  color: var(--muted, #9aa7b3);
  font-size: 12px;
  margin: 0 0 10px;
}
.pdf-recent-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.pdf-recent-item {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  cursor: grab;
  display: flex;
  gap: 10px;
  padding: 8px 10px;
}
.pdf-recent-item:hover { border-color: rgba(255, 255, 255, 0.28); }
.pdf-recent-item .pdf-recent-icon {
  color: var(--accent, #37b7e4);
  flex: 0 0 auto;
}
.pdf-recent-item .pdf-recent-meta { min-width: 0; flex: 1 1 auto; }
.pdf-recent-item .pdf-recent-name {
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdf-recent-item .pdf-recent-sub {
  color: var(--muted, #9aa7b3);
  font-size: 11px;
}
.pdf-recent-item .pdf-recent-add { flex: 0 0 auto; }
.project-package-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 14px;
}
.project-package-hint {
  color: var(--muted, #9aa7b3);
  flex: 1 1 180px;
  font-size: 12px;
  margin: 0;
  min-width: 0;
}

.submittal-cart-section .cart-items {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.cart-item {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
}
.cart-item.is-ready { border-color: rgba(54, 179, 126, 0.55); }
.cart-check {
  align-items: center;
  border: 2px solid var(--muted);
  border-radius: 4px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  height: 20px;
  justify-content: center;
  width: 20px;
}
.cart-item.is-ready .cart-check { background: #36b37e; border-color: #36b37e; }
.cart-item.is-ready .cart-check::before { content: "\2713"; }
.cart-item-body { min-width: 0; }
.cart-item-body strong { display: block; font-size: 13px; }
.cart-item-body span { color: var(--muted); font-size: 11.5px; }
.cart-hint { color: var(--muted); font-size: 11px; margin: 6px 0 0; }

/* Export stays grey (but clickable) until all 3 package items are confirmed. */
[data-package-export].is-muted {
  background: var(--surface-lift);
  border: 1px solid var(--line);
  box-shadow: none;
  color: var(--muted);
}
[data-package-export].is-muted:hover { background: var(--surface-soft); }

/* Quick mode: only one generate action (no email). */
body[data-view-mode="simple"] [data-submittal-generate-dock] .generate-dock-secondary { display: none; }
.generate-open-toggle {
  align-items: center;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font-size: 12.5px;
  gap: 8px;
}
.generate-open-toggle input { height: 16px; width: 16px; }
.generate-dock-button.is-generated {
  background: var(--surface-lift);
  border: 1px solid var(--line);
  box-shadow: none;
  color: var(--muted);
}

/* Step 3 categorized "added sheets" summary. */
.quick-toc-summary .toc-summary-group { margin-bottom: 12px; }
.quick-toc-summary .toc-summary-cat {
  border-bottom: 1px solid var(--line);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
  padding-bottom: 4px;
  text-transform: uppercase;
}
.quick-toc-summary ul { list-style: none; margin: 6px 0 0; padding: 0; }
.quick-toc-summary li {
  border-bottom: 1px dotted var(--line);
  display: flex;
  font-size: 13px;
  gap: 8px;
  justify-content: space-between;
  padding: 5px 2px;
}
.quick-toc-summary li span:last-child { color: var(--muted); flex: 0 0 auto; }
.quick-toc-summary .toc-summary-empty { color: var(--muted); font-size: 13px; margin: 0; }
.quick-toc-summary .toc-summary-count { color: var(--muted); font-size: 12px; margin: 0 0 10px; }

.catalog-empty-ai { display: grid; gap: 12px; justify-items: center; padding: 18px 12px; text-align: center; }
.ai-datasheet-result { width: 100%; }
.ai-result-card {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 8px;
  padding: 14px;
  text-align: left;
}
.ai-result-head { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.ai-result-head strong { font-size: 14px; }
.ai-conf { border-radius: 999px; font-size: 10px; font-weight: 700; padding: 3px 9px; text-transform: uppercase; white-space: nowrap; }
.ai-conf-high { background: rgba(54, 179, 126, 0.18); color: #6ee7b7; }
.ai-conf-medium { background: rgba(255, 176, 58, 0.18); color: #ffce85; }
.ai-conf-low { background: rgba(255, 90, 47, 0.18); color: #ff9b85; }
/* Light mode: the badge/status colors above are tuned for dark fills and wash out
   on the light tints — swap to the app's light-safe ink-on-tint tokens. */
body[data-theme="plain-light"] .ai-conf-high { color: var(--ok); }
body[data-theme="plain-light"] .ai-conf-medium { color: var(--accent); }
body[data-theme="plain-light"] .ai-conf-low { color: var(--brand-2); }
.ai-result-grid { display: grid; gap: 6px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.ai-result-grid > div { display: flex; gap: 6px; }
.ai-result-grid dt { color: var(--muted); font-size: 11.5px; min-width: 76px; }
.ai-result-grid dd { font-size: 11.5px; font-weight: 600; margin: 0; }
.ai-result-note { color: var(--muted); font-size: 11.5px; line-height: 1.45; margin: 0; }
.ai-result-disclaimer { color: var(--muted); font-size: 10.5px; font-style: italic; margin: 2px 0 0; }
.ai-result-status { color: var(--muted); font-size: 12px; margin: 0; }
.ai-result-status.error { color: #ff9b85; }
body[data-theme="plain-light"] .ai-result-status.error { color: var(--brand); }

.submittal-mode-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: space-between;
  margin-bottom: 6px;
}
.submittal-mode-bar .eyebrow { margin-bottom: 0; }

.storage-analysis-frame-section {
  padding: 0;
}

.storage-analysis-frame {
  background: rgba(13, 17, 22, 0.86);
  border: 0;
  border-radius: 8px;
  display: block;
  min-height: 1180px;
  width: 100%;
}

.hanger-detail-frame-section {
  padding: 0;
}

.hanger-detail-frame {
  background: rgba(13, 17, 22, 0.86);
  border: 0;
  border-radius: 8px;
  display: block;
  width: 100%;
  height: calc(100vh - 150px);
  min-height: 640px;
}

/* Only cards whose CONTENT can meaningfully fill (diagrams, drop workspaces)
   stretch to the row height. Form/result cards size to content instead — a
   min-height:100% on those stretched them to their tallest sibling and left
   large internal voids (pre-release audit P1, PROJECT_CONFORMANCE §6a). */
.layout-input-section,
.layout-results-section,
.layout-diagram-section,
.bracing-input-section,
.bracing-results-section,
.bracing-diagram-section,
.pdf-merge-workspace-section,
.hydraulic-workspace-section,
.code-converter-input-section,
.code-converter-results-section {
  min-height: 100%;
}

.feet-scale-chart-section {
  grid-column: 1 / -1;
  min-height: 0;
}

.full-width-button {
  margin-top: 12px;
  width: 100%;
}

.layout-result-grid {
  display: grid;
  gap: 10px;
}

.layout-result-grid .calculator-result-card {
  margin-top: 0;
}

.layout-result-grid .calculator-result-card strong {
  font-size: clamp(1.15rem, 2vw, 2rem);
}

.layout-result-lines {
  background: rgba(13, 17, 22, 0.62);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.layout-result-line {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 12px;
}

.layout-result-line:last-child {
  border-bottom: 0;
}

.layout-result-line span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.layout-result-line strong {
  color: var(--ink);
  font-size: 0.92rem;
  text-align: right;
}

.layout-result-line.highlight {
  background: rgba(55, 183, 228, 0.1);
}

.layout-result-line.highlight strong {
  color: var(--water);
}

.layout-diagram-shell {
  background:
    linear-gradient(135deg, rgba(55, 183, 228, 0.1), transparent 38%, rgba(255, 90, 47, 0.1)),
    #10161d;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 520px;
  overflow: hidden;
}

.bracing-diagram-shell {
  background:
    linear-gradient(135deg, rgba(55, 183, 228, 0.12), transparent 40%, rgba(255, 90, 47, 0.13)),
    #10161d;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 360px;
  overflow: hidden;
}

#layoutDiagram {
  display: block;
  height: 100%;
  min-height: 520px;
  width: 100%;
}

#bracingDiagram {
  display: block;
  height: 100%;
  min-height: 360px;
  width: 100%;
}

.layout-stage {
  fill: #10161d;
}

.layout-area-rect {
  fill: rgba(239, 246, 248, 0.97);
  stroke: #071018;
  stroke-width: 4;
}

.layout-head-dot {
  fill: #071018;
}

.layout-arrow {
  fill: #e9f7fb;
}

.layout-dim-line {
  stroke: #e9f7fb;
  stroke-width: 2;
}

.layout-dim-label,
.layout-axis-title,
.layout-legend {
  fill: #f6fbfd;
  font-family: inherit;
  font-weight: 900;
}

.layout-dim-label {
  font-size: 13px;
}

.layout-axis-title {
  font-size: 16px;
  letter-spacing: 0;
}

.layout-legend {
  font-size: 14px;
}

.wide-segmented-control {
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  margin-bottom: 12px;
  width: 100%;
}

.or-divider {
  align-items: center;
  color: var(--muted);
  display: grid;
  font-size: 0.78rem;
  font-weight: 1000;
  gap: 12px;
  grid-template-columns: 1fr auto 1fr;
  margin: 14px 0;
  text-align: center;
  text-transform: uppercase;
}

.or-divider::before,
.or-divider::after {
  background: var(--line);
  content: "";
  height: 1px;
}

.nfpa1142-exposure-heading {
  margin: 14px 0 8px;
}

.water-hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.water-unit-toggle {
  grid-template-columns: repeat(2, minmax(54px, 1fr));
}

.water-export-toggle {
  grid-template-columns: repeat(2, minmax(58px, 1fr));
}

.water-supply-grid {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-areas:
    "site graph"
    "pressure graph"
    "flow graph"
    "results graph"
    "math math";
  grid-template-columns: minmax(380px, 0.82fr) minmax(620px, 1.18fr);
  grid-template-rows: repeat(4, auto) auto;
}

.water-site-section,
.water-pressure-section,
.water-flow-section,
.water-results-section,
.water-chart-section,
.water-math-section {
  align-self: start;
  min-height: 0;
}

.water-site-section {
  grid-area: site;
}

.water-pressure-section {
  grid-area: pressure;
}

.water-flow-section {
  grid-area: flow;
}

.water-results-section {
  grid-area: results;
}

.water-chart-section {
  grid-area: graph;
}

.water-math-section {
  grid-area: math;
}

.water-flow-hydrants {
  display: grid;
  gap: 12px;
}

.water-flow-card {
  background: rgba(13, 17, 22, 0.5);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.water-pressure-section .field-grid.three {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.water-pressure-section label,
.water-flow-card label,
.water-demand-row label {
  line-height: 1.32;
}

.water-unit-label {
  background: rgba(55, 183, 228, 0.14);
  border: 1px solid rgba(55, 183, 228, 0.28);
  border-radius: 999px;
  color: var(--water);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 1000;
  line-height: 1;
  margin-left: 5px;
  padding: 3px 6px;
  text-transform: uppercase;
  vertical-align: 1px;
  white-space: nowrap;
}

.water-card-title,
.water-demand-toolbar .eyebrow {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.water-result-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.water-result-grid .calculator-result-card strong {
  font-size: clamp(1rem, 1.5vw, 1.55rem);
}

.water-demand-toolbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 16px 0 8px;
}

.water-demand-list {
  display: grid;
  gap: 8px;
}

.water-demand-list {
  container-type: inline-size;
}

.water-demand-row {
  align-items: end;
  background: rgba(13, 17, 22, 0.54);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(110px, 1fr) repeat(3, minmax(82px, 0.7fr)) minmax(120px, 0.9fr) auto;
  padding: 10px;
}

/* The demand card is usually far narrower than the WINDOW (two-column tool layout),
   so reflow on the CONTAINER's width, not the viewport's: below ~600px of actual
   card width, go two columns with Margin + Remove on their own full-width rows. */
@container (max-width: 600px) {
  .water-demand-row {
    align-items: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .water-demand-row .water-demand-margin {
    grid-column: 1 / -1;
  }
  .water-demand-row [data-water-demand-remove] {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

.water-demand-margin {
  display: grid;
  gap: 5px;
  min-height: 54px;
}

.water-demand-margin span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.water-demand-margin strong {
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.25;
}

.water-demand-margin strong.is-positive {
  color: var(--ok);
}

.water-demand-margin strong.is-negative {
  color: #ff8d78;
}

/* (Demand-row reflow lives with .water-demand-row as a container query — the card
   is regularly much narrower than the viewport, so a media query never fired.) */

.water-chart-shell {
  background:
    linear-gradient(135deg, rgba(55, 183, 228, 0.14), transparent 40%, rgba(255, 90, 47, 0.12)),
    #10161d;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 500px;
  overflow: hidden;
}

.water-chart-shell[data-water-style="bw"] {
  background: #fff;
  border-color: #000;
}

#waterChart {
  display: block;
  height: 100%;
  min-height: 500px;
  width: 100%;
}

.water-chart-bg {
  fill: #10161d;
}

.water-grid-line {
  stroke: rgba(232, 244, 248, 0.14);
  stroke-width: 1;
}

.water-plot-border {
  fill: none;
  stroke: rgba(232, 244, 248, 0.78);
  stroke-width: 2;
}

.water-axis-text,
.water-axis-title,
.water-demand-label,
.water-chart-title,
.water-chart-empty {
  fill: #e8f4f8;
  font-family: inherit;
  font-weight: 900;
}

.water-axis-text {
  font-size: 12px;
}

.water-axis-title {
  font-size: 14px;
}

.water-chart-title {
  font-size: 18px;
}

.water-chart-empty {
  fill: var(--muted);
  font-size: 18px;
}

.water-supply-curve {
  fill: none;
  stroke: var(--water);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.water-test-point {
  fill: var(--accent);
  stroke: #10161d;
  stroke-width: 2;
}

.water-test-point.residual {
  fill: var(--brand);
}

.water-fire-point {
  fill: var(--ok);
  stroke: #10161d;
  stroke-width: 2;
}

.water-demand-line {
  fill: none;
  stroke: #ff7b5f;
  stroke-dasharray: 8 7;
  stroke-linecap: round;
  stroke-width: 3;
}

.water-demand-point {
  fill: #ff8d78;
  stroke: #10161d;
  stroke-width: 2;
}

.water-demand-label {
  fill: #ffd0c7;
  font-size: 12px;
}

#waterChart[data-water-style="bw"] .water-chart-bg {
  fill: #fff;
}

#waterChart[data-water-style="bw"] .water-grid-line {
  stroke: #d6d6d6;
}

#waterChart[data-water-style="bw"] .water-plot-border,
#waterChart[data-water-style="bw"] .water-supply-curve,
#waterChart[data-water-style="bw"] .water-demand-line {
  stroke: #000;
}

#waterChart[data-water-style="bw"] .water-axis-text,
#waterChart[data-water-style="bw"] .water-axis-title,
#waterChart[data-water-style="bw"] .water-demand-label,
#waterChart[data-water-style="bw"] .water-chart-title,
#waterChart[data-water-style="bw"] .water-chart-empty {
  fill: #000;
}

#waterChart[data-water-style="bw"] .water-test-point,
#waterChart[data-water-style="bw"] .water-test-point.residual,
#waterChart[data-water-style="bw"] .water-fire-point,
#waterChart[data-water-style="bw"] .water-demand-point {
  fill: #fff;
  stroke: #000;
}

.water-report {
  margin-top: 12px;
}

.water-math-panel {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.water-math-panel div {
  background: rgba(13, 17, 22, 0.62);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 10px;
}

.water-math-panel strong {
  color: var(--accent);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.water-math-panel span {
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.water-result-card {
  background:
    linear-gradient(135deg, rgba(55, 183, 228, 0.22), rgba(45, 166, 215, 0.12)),
    #151d25;
  border-color: rgba(55, 183, 228, 0.42);
}

.nfpa1142-steps {
  margin-top: 12px;
}

.nfpa1142-report-section {
  grid-column: 1 / -1;
  min-height: 0;
}

.export-heading {
  align-items: center;
  gap: 12px;
}

.export-heading h3 {
  color: var(--ink);
  font-size: 1rem;
  margin: 4px 0 0;
}

.nfpa1142-report-shell {
  background:
    linear-gradient(135deg, rgba(255, 90, 47, 0.12), rgba(55, 183, 228, 0.08)),
    rgba(9, 13, 18, 0.74);
  border: 1px solid rgba(55, 183, 228, 0.25);
  border-radius: 8px;
  margin-top: 12px;
  overflow: hidden;
  padding: 12px;
}

#nfpa1142ReportSvg {
  background: #10161d;
  border-radius: 6px;
  display: block;
  height: auto;
  min-height: 360px;
  width: 100%;
}

.nfpa1142-empty-bg {
  fill: #10161d;
}

.bracing-position-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 10px;
  max-height: 240px;
  overflow: auto;
}

.bracing-position-table th,
.bracing-position-table td {
  padding: 8px 10px;
}

.bracing-note {
  color: var(--muted);
}

.pdf-options-panel {
  background: rgba(13, 17, 22, 0.6);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
}

.pdf-options-panel p {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.45;
}

.pdf-compression-options {
  display: grid;
  gap: 8px;
}

.pdf-compression-option {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(190, 205, 216, 0.5);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 10px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pdf-compression-option.active {
  background: rgba(255, 90, 47, 0.18);
  border-color: rgba(255, 185, 160, 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 90, 47, 0.14);
}

.pdf-compression-option input {
  appearance: none;
  border: 2px solid rgba(190, 205, 216, 0.8);
  border-radius: 999px;
  height: 22px;
  margin: 0;
  padding: 0;
  position: relative;
  width: 22px;
}

.pdf-compression-option input:checked {
  background: rgba(51, 213, 125, 0.22);
  border-color: #45d381;
}

.pdf-compression-option input:checked::after {
  background: #45d381;
  border-radius: inherit;
  content: "";
  height: 10px;
  left: 4px;
  position: absolute;
  top: 4px;
  width: 10px;
}

.pdf-compression-option strong {
  color: var(--ink);
  display: block;
  font-size: 0.84rem;
  font-weight: 900;
}

.pdf-compression-option small {
  color: var(--muted);
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.25;
  margin-top: 2px;
}

.pdf-compression-option.active strong {
  color: #ffb7a7;
}

.pdf-compression-progress {
  background: rgba(13, 17, 22, 0.72);
  border: 1px solid rgba(55, 183, 228, 0.32);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
}

.pdf-compression-progress[hidden] {
  display: none;
}

.pdf-compression-progress-header {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.pdf-compression-progress-header strong {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
}

.pdf-compression-progress-header span {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 1000;
}

.pdf-compression-progress-track {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  height: 9px;
  overflow: hidden;
}

.pdf-compression-progress-track span {
  background: linear-gradient(90deg, #37b7e4, #ffb03a, #ff5a2f);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 0.2s ease;
  width: 0;
}

.pdf-compression-progress p {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 0;
}

.pdf-merge-count {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pdf-merge-workspace-section {
  border-style: dashed;
  min-height: 360px;
  outline: 1px solid rgba(55, 183, 228, 0.1);
  outline-offset: -7px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pdf-merge-workspace-section.drag-over,
.hydraulic-workspace-section.drag-over {
  background:
    linear-gradient(135deg, rgba(55, 183, 228, 0.18), rgba(255, 90, 47, 0.12)),
    rgba(13, 17, 22, 0.72);
  border-color: rgba(255, 176, 58, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 176, 58, 0.22), 0 18px 42px rgba(0, 0, 0, 0.28);
}

.pdf-merge-list,
.hydraulic-list {
  align-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  min-height: 286px;
  max-height: 620px;
  overflow: auto;
  padding: 4px 6px 10px 4px;
}

.hydraulic-list {
  display: grid;
  gap: 10px;
  max-height: 640px;
}

/* Drop workspaces: the list absorbs the card's spare height so there's no dead
   space under the action buttons, and an empty-state hint fills/centers in the
   whole drop area instead of sitting stranded in the top-left corner. */
.pdf-merge-workspace-section,
.hydraulic-workspace-section {
  display: flex;
  flex-direction: column;
}
.pdf-merge-workspace-section .pdf-merge-list,
.hydraulic-workspace-section .hydraulic-list {
  flex: 1 1 auto;
  max-height: none;
}
.pdf-merge-list:has(> .empty-state),
.hydraulic-list:has(> .empty-state) {
  align-content: stretch;
  align-items: stretch;
  display: flex;
  flex-wrap: nowrap;
}
.pdf-merge-list > .empty-state,
.hydraulic-list > .empty-state {
  flex: 1 1 auto;
  min-height: 220px;
  width: 100%;
}

.pdf-merge-item {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 44%),
    #101217;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
  min-height: 222px;
  padding: 10px;
  position: relative;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  width: 154px;
}

.pdf-merge-list:empty::before,
.hydraulic-list:empty::before {
  align-items: center;
  border: 1px dashed rgba(148, 163, 184, 0.34);
  border-radius: 8px;
  color: var(--muted);
  content: "Drop PDFs anywhere in this workspace or use Import PDF Files.";
  display: flex;
  font-size: 0.88rem;
  font-weight: 850;
  justify-content: center;
  min-height: 210px;
  padding: 16px;
  text-align: center;
  width: 100%;
}

.pdf-merge-item:hover,
.hydraulic-item:hover {
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
}

.hydraulic-workspace-section {
  border-style: dashed;
  min-height: 560px;
  outline: 1px solid rgba(55, 183, 228, 0.1);
  outline-offset: -7px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.hydraulic-item {
  align-items: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 44%),
    rgba(16, 18, 23, 0.96);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  min-height: 112px;
  padding: 12px 74px 12px 12px;
  position: relative;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.hydraulic-item .pdf-merge-preview {
  height: 92px;
  padding: 6px;
}

.hydraulic-item .pdf-merge-preview img {
  max-height: 78px;
  max-width: 58px;
}

.hydraulic-item-body {
  min-width: 0;
}

.hydraulic-item-heading {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.hydraulic-order-label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.remote-area-badge {
  background: rgba(55, 183, 228, 0.14);
  border: 1px solid rgba(55, 183, 228, 0.32);
  border-radius: 999px;
  color: var(--water);
  display: inline-flex;
  font-size: 0.7rem;
  font-weight: 1000;
  line-height: 1;
  padding: 5px 8px;
  text-transform: uppercase;
}

.remote-area-badge.muted {
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.26);
  color: var(--muted);
}

.hydraulic-item-body label {
  margin: 0;
}

.hydraulic-item-body input {
  margin-top: 5px;
}

.hydraulic-meta-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(94px, 0.5fr) minmax(140px, 0.9fr) minmax(150px, 1fr);
  margin-top: 8px;
}

.hydraulic-meta-grid input {
  min-height: 34px;
  padding: 6px 8px;
}

.hydraulic-item-body span,
.hydraulic-item-body small {
  color: var(--muted);
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-cover-template-options {
  grid-template-columns: 1fr;
}

.pdf-merge-preview {
  align-items: center;
  background: #0b0c0f;
  border-radius: 6px;
  display: flex;
  height: 122px;
  justify-content: center;
  overflow: hidden;
  padding: 8px;
  width: 100%;
}

.pdf-merge-preview img {
  background: #fff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.42);
  display: block;
  max-height: 102px;
  max-width: 84px;
  object-fit: contain;
}

.pdf-merge-preview span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.pdf-merge-order {
  align-items: center;
  background: rgba(255, 176, 58, 0.18);
  border: 1px solid rgba(255, 176, 58, 0.34);
  border-radius: 999px;
  color: var(--accent);
  display: flex;
  font-size: 0.72rem;
  font-weight: 1000;
  height: 24px;
  justify-content: center;
  left: 8px;
  position: absolute;
  top: 8px;
  width: 24px;
  z-index: 2;
}

.pdf-merge-copy {
  margin-top: 10px;
  min-width: 0;
}

.pdf-merge-copy p {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-merge-copy span {
  color: #85a9bd;
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.25;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-compression-result {
  align-items: center;
  color: #49e586;
  display: flex;
  font-size: 0.74rem;
  font-weight: 900;
  gap: 6px;
  line-height: 1.25;
  margin-top: 10px;
}

.pdf-compression-result svg {
  background: rgba(73, 229, 134, 0.22);
  border-radius: 999px;
  color: #49e586;
  flex: 0 0 auto;
  height: 18px;
  padding: 3px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  width: 18px;
}

.pdf-merge-actions {
  display: flex;
  gap: 4px;
  opacity: 0.72;
  position: absolute;
  right: 8px;
  top: 8px;
  transition: opacity 0.15s ease;
  z-index: 3;
}

.pdf-merge-item:hover .pdf-merge-actions {
  opacity: 1;
}

.pdf-merge-actions .icon-button {
  background: rgba(13, 17, 22, 0.88);
  border-color: rgba(255, 255, 255, 0.18);
  height: 24px;
  min-height: 24px;
  min-width: 24px;
  width: 24px;
}

.pdf-merge-actions .icon-button svg {
  height: 13px;
  width: 13px;
}

.pdf-merge-actions .icon-button:disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.38;
}

.feet-result-card {
  margin-top: 0;
}

.feet-result-card strong {
  overflow-wrap: anywhere;
}

.feet-result-card small {
  color: var(--muted);
  display: block;
  font-size: 0.92rem;
  font-weight: 900;
  margin-top: 8px;
}

.feet-help-list {
  display: grid;
  gap: 8px;
}

.feet-help-list div {
  background: rgba(13, 17, 22, 0.62);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 11px 12px;
}

.feet-help-list strong {
  color: var(--accent);
  font-size: 0.9rem;
}

.feet-help-list span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.scale-chart-wrap {
  background:
    linear-gradient(135deg, rgba(255, 176, 49, 0.08), rgba(55, 183, 228, 0.05)),
    rgba(8, 13, 18, 0.68);
  border: 1px solid var(--line);
  border-radius: 10px;
  max-height: 560px;
  overflow: auto;
}

.scale-chart-table {
  border-collapse: collapse;
  font-size: 0.84rem;
  min-width: 980px;
  width: 100%;
}

.scale-chart-table th,
.scale-chart-table td {
  border-bottom: 1px solid rgba(149, 164, 178, 0.16);
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
}

.scale-chart-table th {
  background: rgba(15, 23, 31, 0.96);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.scale-chart-table td {
  color: var(--text);
  font-weight: 800;
}

.scale-chart-table td:first-child {
  color: #fff;
  font-weight: 950;
}

.scale-chart-table td:not(:first-child) {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.scale-chart-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.025);
}

.scale-chart-table tbody tr:hover {
  background: rgba(255, 176, 49, 0.09);
}

.scale-chart-table tbody tr {
  cursor: pointer;
}

.scale-chart-table tbody tr.is-highlighted {
  background:
    linear-gradient(90deg, rgba(255, 176, 49, 0.32), rgba(255, 90, 47, 0.14)),
    rgba(35, 42, 28, 0.9);
  box-shadow: inset 4px 0 0 var(--accent);
}

.scale-chart-table tbody tr.is-highlighted td {
  color: #f7fbff;
}

.scale-chart-table tbody tr.is-highlighted td:first-child {
  color: #fff;
}

.empty-state {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(55, 183, 228, 0.08), rgba(255, 90, 47, 0.06)),
    rgba(13, 17, 22, 0.62);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  font-weight: 900;
  justify-content: center;
  min-height: 180px;
  padding: 18px;
  text-align: center;
}

.code-result-list {
  display: grid;
  gap: 10px;
}

.common-code-reference-panel {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 14px;
}

.nfpa-source-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.nfpa-source-status:empty {
  display: none;
}

.nfpa-source-pill {
  align-items: center;
  background: rgba(7, 15, 21, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 900;
  gap: 6px;
  line-height: 1.15;
  padding: 6px 8px;
  text-transform: uppercase;
}

.nfpa-source-pill strong {
  color: var(--ink);
}

.nfpa-source-pill.ready {
  background: rgba(48, 174, 99, 0.13);
  border-color: rgba(48, 174, 99, 0.36);
  color: #9ff0bd;
}

.nfpa-source-pill.warning {
  background: rgba(255, 176, 58, 0.13);
  border-color: rgba(255, 176, 58, 0.42);
  color: #ffd28a;
}

.nfpa-source-pill.missing {
  background: rgba(255, 90, 47, 0.1);
  border-color: rgba(255, 90, 47, 0.34);
  color: #ffb3a5;
}

.common-code-reference-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 560px;
  overflow: auto;
  padding-right: 3px;
}

.common-code-reference-row {
  background: rgba(13, 17, 22, 0.72);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0;
  text-align: left;
  transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.common-code-reference-row:hover,
.common-code-reference-row:focus-within {
  background: rgba(22, 37, 47, 0.95);
  border-color: rgba(255, 176, 58, 0.6);
  transform: translateY(-1px);
}

.common-code-reference-main {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px 11px;
  text-align: left;
}

.common-code-reference-main:focus-visible {
  outline: 2px solid rgba(55, 183, 228, 0.72);
  outline-offset: -2px;
}

.custom-common-code-reference {
  border-color: rgba(55, 183, 228, 0.28);
}

.common-code-delete-button {
  align-self: center;
  margin-right: 8px;
  white-space: nowrap;
}

.common-code-reference-name {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 1000;
  line-height: 1.2;
}

.common-code-reference-category,
.common-code-reference-map {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.common-code-reference-map {
  display: grid;
  gap: 2px;
  text-transform: none;
}

.compact-empty-state {
  min-height: 82px;
}

.code-result-card {
  background:
    linear-gradient(135deg, rgba(55, 183, 228, 0.08), rgba(255, 90, 47, 0.08)),
    rgba(13, 17, 22, 0.74);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.code-result-map {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
}

.common-code-result-header strong {
  line-height: 1.08;
}

.common-code-section-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.common-code-section-grid > div {
  background: rgba(7, 15, 21, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
}

.code-copy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.common-code-edition-note {
  background: rgba(55, 183, 228, 0.07);
  border: 1px solid rgba(55, 183, 228, 0.18);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
  margin: -2px 0 0;
  padding: 9px 10px;
  text-transform: none;
}

.code-copy-button {
  background: rgba(255, 176, 58, 0.14);
  border: 1px solid rgba(255, 176, 58, 0.52);
  border-radius: 7px;
  color: var(--accent);
  cursor: copy;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 1000;
  line-height: 1;
  padding: 7px 9px;
}

.code-copy-button:hover,
.code-copy-button:focus-visible,
.code-language-copy:hover,
.code-language-copy:focus-visible {
  border-color: rgba(55, 183, 228, 0.72);
  color: #68daf2;
  outline: none;
}

.code-result-card span {
  color: var(--muted);
  display: block;
  font-size: 0.76rem;
  font-weight: 900;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.code-result-card strong {
  color: var(--ink);
  display: block;
  font-size: clamp(1.35rem, 2.8vw, 2.45rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.code-result-card strong.deleted {
  color: #ffb3a5;
}

.code-result-card strong.various {
  color: var(--accent);
}

.code-result-card p {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.code-arrow {
  align-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-radius: 999px;
  color: #fff;
  display: flex;
  font-weight: 1000;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.code-language-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.code-language-stack {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.code-language-panel {
  background: rgba(7, 15, 21, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  min-width: 0;
  padding: 12px;
}

.code-language-panel-header {
  align-items: start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.code-language-panel-header span {
  margin-bottom: 0;
}

.code-language-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.code-language-copy {
  flex: 0 0 auto;
  padding: 6px 8px;
  white-space: nowrap;
}

.code-language-panel strong {
  color: var(--accent);
  font-size: 0.94rem;
  line-height: 1.25;
  margin-bottom: 8px;
}

.code-language-panel p {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.45;
  margin: 0;
  max-height: 320px;
  overflow: auto;
  text-transform: none;
}

.code-language-muted {
  opacity: 0.72;
}

.calculator-status[data-status="success"] {
  color: var(--ok);
}

.calculator-status[data-status="error"] {
  color: #ffb3a5;
}

.bracing-pipe {
  filter: drop-shadow(0 0 12px rgba(55, 183, 228, 0.25));
  stroke: url(#pipeGradient);
  stroke-linecap: round;
  stroke-width: 18;
}

.bracing-end-line,
.brace-marker line,
.brace-marker path {
  fill: none;
  stroke: #e9f7fb;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.brace-marker circle {
  fill: var(--brand);
  stroke: #ffd4ca;
  stroke-width: 2;
}

.brace-marker text {
  fill: #f6fbfd;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
}

.tool-subhead {
  margin: 6px 0 10px;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--water, #37b7e4);
  border-bottom: 1px solid var(--line, #2d3742);
  padding-bottom: 6px;
}
.hanger-pipe {
  stroke: #37b7e4;
  stroke-linecap: round;
  stroke-width: 16;
  filter: drop-shadow(0 0 10px rgba(55, 183, 228, 0.25));
}
.hanger-tick {
  stroke: var(--accent, #ffb03a);
  stroke-linecap: round;
  stroke-width: 4;
}
.hanger-marker text {
  fill: #f6fbfd;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
}
.hanger-table-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hanger-table-actions { display: flex; gap: 6px; }
.hanger-table-wrap { overflow-x: auto; }
.blr-table { width: 100%; }
.blr-table th, .blr-table td { text-align: center; }
.blr-table tbody th { text-align: center; font-weight: 800; }
.blr-cell { cursor: pointer; transition: background-color 120ms ease; }
.blr-cell:hover { background: var(--accent, #e8622c); color: #10161d; font-weight: 800; }
.blr-active-row th { color: var(--accent, #e8622c); }
.blr-active-row td { background: rgba(232, 98, 44, 0.12); }
.bracing-end-tuner { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border, #2a3138); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.bracing-end-tuner-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.bracing-end-tuner-label { font-size: 13px; color: var(--muted, #aab4bd); }
.bracing-end-tuner-head strong { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--accent, #e8622c); }
.bracing-end-tuner input[type="range"] { width: 100%; accent-color: var(--accent, #e8622c); cursor: pointer; }
.bracing-end-tuner-scale { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--muted, #aab4bd); }
.bracing-end-tuner-live { margin: 8px 0 0; font-size: 12.5px; color: var(--muted, #aab4bd); font-variant-numeric: tabular-nums; }
.hanger-table th:first-child, .hanger-table td:first-child { text-align: left; }
.hanger-table td.hanger-na { color: var(--muted, #aab4bd); opacity: 0.6; }

.hb-tabs { display: inline-flex; gap: 4px; background: var(--surface-soft); border: 1px solid var(--line, #2d3742); border-radius: 10px; padding: 4px; margin: 2px 0 16px; }
.hb-tab { background: transparent; border: 0; color: var(--muted, #aab4bd); font: 800 0.8rem inherit; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 20px; border-radius: 7px; cursor: pointer; }
.hb-tab:hover { color: var(--ink, #f5f7f8); }
.hb-tab.active { background: linear-gradient(135deg, rgba(255, 90, 47, 0.28), rgba(55, 183, 228, 0.16)); color: var(--ink, #f5f7f8); box-shadow: inset 0 0 0 1px var(--brand, #ff5a2f); }
.hb-workspace { display: grid; grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
.hb-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1000px) { .hb-workspace { grid-template-columns: 1fr; } }
.hb-diagram-shell { width: 100%; }
.hb-diagram-shell svg { width: 100%; height: auto; display: block; }
.hb-source { font-size: 0.76rem; color: var(--muted, #aab4bd); margin: -2px 0 10px; }
.hb-source a.hb-view-table { color: var(--water, #37b7e4); cursor: pointer; text-decoration: underline; }
.hb-reference { margin-top: 12px; border: 1px solid var(--line, #2d3742); border-radius: 10px; overflow: hidden; }
.hb-reference > summary { cursor: pointer; padding: 10px 12px; font-weight: 800; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--water, #37b7e4); list-style: none; }
.hb-reference > summary::-webkit-details-marker { display: none; }
.hb-reference > summary::before { content: "\25B8  "; }
.hb-reference[open] > summary::before { content: "\25BE  "; }
.hb-reference .hanger-table-actions { display: flex; gap: 6px; padding: 0 12px 10px; }
.hb-reference .hanger-table-wrap { padding: 0 12px 12px; overflow-x: auto; }
.hb-footnote { font-size: 0.74rem; color: var(--muted, #aab4bd); opacity: 0.8; line-height: 1.45; margin: 12px 0 0; }
.hb-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.metric-tile { background: rgba(255, 255, 255, 0.04); border-radius: 10px; padding: 14px 16px; }
.metric-tile span { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #aab4bd); margin-bottom: 5px; }
.metric-tile strong { font-size: 1.5rem; font-weight: 900; color: var(--ink, #f5f7f8); line-height: 1.1; }
.hb-positions { margin-top: 6px; }
.hb-positions > summary { cursor: pointer; font-size: 0.76rem; font-weight: 700; color: var(--water, #37b7e4); padding: 6px 0; }
.hb-end-note { border-left: 3px solid var(--accent); background: var(--surface-soft); border-radius: 6px; color: var(--muted); font-size: 0.82rem; line-height: 1.5; margin: 10px 0 0; padding: 8px 11px; }
.hanger-cell-input {
  width: 56px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--line-strong, #536171);
  color: var(--ink, #f5f7f8);
  border-radius: 6px;
  padding: 4px 6px;
  font: inherit;
  text-align: center;
}

.section-heading {
  justify-content: space-between;
  margin-bottom: 10px;
}

.section-heading .eyebrow {
  margin-bottom: 0;
}

.section-title {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.section-icon {
  align-items: center;
  background:
    linear-gradient(145deg, rgba(255, 90, 47, 0.2), rgba(55, 183, 228, 0.14)),
    #151d25;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 8px 20px rgba(0, 0, 0, 0.24);
  color: var(--accent);
  display: inline-flex;
  flex: 0 0 auto;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.section-icon svg {
  fill: none;
  height: 21px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 21px;
}

.section-icon.fire-icon {
  border-color: rgba(255, 90, 47, 0.42);
  color: var(--brand);
}

.section-icon.water-icon {
  border-color: rgba(55, 183, 228, 0.42);
  color: var(--water);
}

.workspace {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

.builder-panel,
.preview-panel {
  min-width: 0;
}

.preview-panel {
  --preview-scale: 0.94;
}

.builder-panel {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-controls-section {
  grid-column: 1;
  grid-row: 1;
}

/* Always-visible Save Project in the Project card header — Legacy Mode only.
   (Quick mode already has the Save Project button in its step nav.) */
#legacySaveProjectButton { display: none; }
body[data-view-mode="standard"] #legacySaveProjectButton { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.project-controls-section .section-heading { align-items: center; }

.project-intake-section {
  grid-column: 1;
  grid-row: 2;
}

.contractor-section {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.datasheet-database-section {
  grid-column: 3;
  grid-row: 1;
}

.cover-template-section {
  grid-column: 3;
  grid-row: 2;
}

.builder-panel > .preview-panel {
  grid-column: 1 / -1;
  grid-row: 4;
}

.selected-sheets-section {
  grid-column: 1 / -1;
  grid-row: 3;
}

/* Column 3 (Advanced) is one self-contained vertical stack — My Submittal Package
   cart, Datasheet Database, then the Cover Template dropdown — so the three cards
   sit flush together and never inherit the tall left-column row heights (which is
   what produced the big blank gap). In Quick mode the wrapper is display:contents
   so its children behave as direct builder-panel children for the per-step flow. */
.builder-col3 { display: contents; }
body[data-view-mode="standard"] .builder-col3 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  grid-column: 3;
  grid-row: 1 / span 2;
}
/* The datasheet card absorbs any slack so column 3 fills the row height and the
   Cover Template box bottom-aligns with the adjacent columns (its drop zone grows
   rather than leaving a void inside the card). */
body[data-view-mode="standard"] .builder-col3 .datasheet-database-section {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
body[data-view-mode="standard"] .builder-col3 .datasheet-database-section .datasheet-drop {
  flex: 1 1 auto;
}
.submittal-cart-compact { display: none; }
body[data-view-mode="standard"] .submittal-cart-compact { display: block; }
body[data-view-mode="standard"] #submittalCart { display: none; }
.submittal-cart-compact .cart-items { gap: 7px; margin: 0; }
.submittal-cart-compact .cart-item { padding: 8px 10px; }
.submittal-cart-compact [data-package-export] { margin-top: 10px; }

/* Project details box — top of the My Submittal Package cart (wizard); relocated
   into the Project Intake card in Legacy mode. */
.cart-project-eyebrow { margin: 0 0 8px; }
body[data-view-mode="simple"] #projectDetailsBox {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 12px;
  padding: 12px;
}
body[data-view-mode="simple"] #projectDetailsBox .field-grid { grid-template-columns: 1fr; gap: 8px; }
body[data-view-mode="simple"] #projectDetailsBox .field { margin: 4px 0 10px; }
body[data-view-mode="standard"] .cart-project-eyebrow { display: none; }
/* Trim the datasheet drop zone in Advanced so column 3 stays balanced. */
body[data-view-mode="standard"] .datasheet-database-section .datasheet-drop {
  min-height: 60px;
  margin-top: 8px;
}

.builder-panel > .preview-panel .document-preview {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: calc(1112.94px * var(--preview-scale, 0.94));
  overflow: visible;
  padding: 0;
}

.builder-panel > .preview-panel .sheet {
  align-self: start;
  height: 1112.94px;
  aspect-ratio: auto;
  margin: 0;
  max-width: none;
  min-height: 0;
  transform: scale(var(--preview-scale, 0.94));
  transform-origin: top left;
  width: 860px;
}

.simple-step-nav {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255, 90, 47, 0.14), transparent 38%, rgba(55, 183, 228, 0.11)),
    rgba(17, 24, 32, 0.96);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 14px;
}

.step-nav-left { align-items: center; display: flex; gap: 8px; }
.step-nav-right { align-items: center; display: flex; gap: 8px; justify-content: flex-end; }

/* Clickable step chips — jump between the 4 wizard steps instantly. */
.step-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-width: 0; }
.step-chip {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  gap: 7px;
  letter-spacing: 0.02em;
  padding: 6px 12px 6px 6px;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.step-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.step-chip .step-chip-n {
  align-items: center;
  background: var(--surface-lift);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.72rem;
  height: 20px;
  justify-content: center;
  width: 20px;
}
.step-chip.visited .step-chip-n { border-color: var(--ok); color: var(--ok); }
.step-chip.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--ink);
}
.step-chip.active .step-chip-n {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}
@media (max-width: 1700px) { .step-chip .step-chip-label { display: none; } .step-chip { padding: 6px; } }

.simple-step-nav strong {
  color: var(--ink);
  display: block;
  font-size: 1rem;
  line-height: 1.1;
  text-transform: uppercase;
}

body[data-view-mode="simple"] [data-tool-panel="submittal"] .workspace {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 320px;
  /* Fill the full content width: center column (the workspace) stretches between the
     sidebar and the cart; the cart's right edge anchors to the header's right edge.
     No max-width/auto-margins — those left gaps on both sides. */
}

/* Quick-mode center column: the step bar + builder content stack flush inside one
   wrapper that owns column 1 and takes its natural height (align-self:start), so the
   tall My Submittal Package cart in column 2 never inflates a shared grid row and
   leaves a void under the bar (§2/§6a/§10). In Advanced mode the wrapper is transparent
   (display:contents) so the 3-column builder grid is unchanged. */
.quick-center-col { display: contents; }
body[data-view-mode="simple"] [data-tool-panel="submittal"] .quick-center-col {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

body[data-view-mode="simple"] [data-tool-panel="submittal"] .submittal-mode-bar {
  grid-column: 1 / -1;
}

body[data-view-mode="simple"] [data-tool-panel="submittal"] .submittal-cart-section {
  align-self: start;
  position: sticky;
  top: 12px;
  grid-column: 2;
}

/* Materials step uses the SAME content + right-rail layout as every other Quick
   step — the My Submittal Package stays a fixed right rail so it never jumps or
   reshapes between steps. The catalog flows in the wide left column. */

/* In Quick mode the catalog sits in a narrower column — stack each item's actions
   under its name so the title never gets squeezed into a vertical sliver. */
body[data-view-mode="simple"] [data-tool-panel="submittal"] .catalog-item,
body[data-view-mode="simple"] [data-tool-panel="submittal"] .catalog-item.database-item {
  grid-template-columns: auto minmax(0, 1fr);
}
body[data-view-mode="simple"] [data-tool-panel="submittal"] .catalog-item > .catalog-actions {
  flex-wrap: wrap;
  grid-column: 1 / -1;
  justify-content: flex-end;
}
/* Quick mode: same flex filter bar; nothing extra needed. */

@media (max-width: 900px) {
  body[data-view-mode="simple"] [data-tool-panel="submittal"] .workspace {
    grid-template-columns: 1fr;
  }
  body[data-view-mode="simple"] [data-tool-panel="submittal"] .submittal-cart-section {
    position: static;
    grid-column: 1;
  }
}

body[data-view-mode="simple"] [data-tool-panel="submittal"] {
  display: block;
}

body[data-view-mode="simple"] [data-tool-panel="submittal"] .builder-panel {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

body[data-view-mode="simple"] [data-tool-panel="submittal"] .builder-panel .panel-section,
body[data-view-mode="simple"] [data-tool-panel="submittal"] .builder-panel > .preview-panel {
  display: none;
  grid-column: 1;
  grid-row: auto;
}

body[data-view-mode="simple"][data-simple-step="intake"] [data-tool-panel="submittal"] .project-intake-section,
body[data-view-mode="simple"][data-simple-step="intake"] [data-tool-panel="submittal"] .project-controls-section,
body[data-view-mode="simple"][data-simple-step="contractor"] [data-tool-panel="submittal"] .contractor-section,
body[data-view-mode="simple"][data-simple-step="materials"] [data-tool-panel="submittal"] .datasheet-database-section,
body[data-view-mode="simple"][data-simple-step="materials"] [data-tool-panel="submittal"] .selected-sheets-section,
body[data-view-mode="simple"][data-simple-step="materials"] [data-tool-panel="submittal"] .quick-toc-summary,
body[data-view-mode="simple"][data-simple-step="review"] [data-tool-panel="submittal"] .cover-template-section,
body[data-view-mode="simple"][data-simple-step="review"] [data-tool-panel="submittal"] .builder-panel > .preview-panel {
  display: block;
}

.quick-toc-summary { display: none; }

/* Intake step: drop box (left half) + Saved Projects (right half), side by side.
   Cards stretch to equal height; the drop zone grows so the two bottom-align. */
body[data-view-mode="simple"][data-simple-step="intake"] [data-tool-panel="submittal"] .builder-panel {
  grid-template-columns: 1fr 1fr;
}
body[data-view-mode="simple"][data-simple-step="intake"] [data-tool-panel="submittal"] .project-intake-section {
  display: flex;
  flex-direction: column;
  grid-column: 1;
  grid-row: 1;
}
body[data-view-mode="simple"][data-simple-step="intake"] [data-tool-panel="submittal"] .project-intake-section .datasheet-drop {
  flex: 1 1 auto;
}
body[data-view-mode="simple"][data-simple-step="intake"] [data-tool-panel="submittal"] .project-controls-section {
  grid-column: 2;
  grid-row: 1;
}
body[data-view-mode="simple"][data-simple-step="contractor"] [data-tool-panel="submittal"] .contractor-section {
  order: 1;
}

/* Catalog first, then the "don't see it? import" drop zone below it, then the
   running submittal summary. */
body[data-view-mode="simple"][data-simple-step="materials"] [data-tool-panel="submittal"] .selected-sheets-section {
  order: 1;
}

body[data-view-mode="simple"][data-simple-step="materials"] [data-tool-panel="submittal"] .datasheet-database-section {
  order: 2;
}

body[data-view-mode="simple"][data-simple-step="materials"] [data-tool-panel="submittal"] .quick-toc-summary {
  order: 3;
}

body[data-view-mode="simple"][data-simple-step="review"] [data-tool-panel="submittal"] .cover-template-section {
  order: 1;
}

body[data-view-mode="simple"][data-simple-step="review"] [data-tool-panel="submittal"] .builder-panel > .preview-panel {
  order: 2;
}


body[data-view-mode="simple"] [data-tool-panel="submittal"] .builder-panel > .preview-panel .document-preview {
  height: auto;
  min-height: calc(1112.94px * var(--preview-scale, 0.94));
}

/* Quick review: pages are scaled with `zoom` (which collapses layout, unlike
   transform: scale) so the preview hugs the real page size in BOTH 1-up and 2-up
   modes — no reserved void. The step nav anchors to the true preview bottom: in
   1-up the stacked full-width pages extend the length and push it down; switching
   back to 2-up snaps it up. */
body[data-view-mode="simple"][data-simple-step="review"] [data-tool-panel="submittal"] .builder-panel > .preview-panel .document-preview {
  height: auto;
  min-height: 0;
  overflow: visible;
}
body[data-view-mode="simple"][data-simple-step="review"] [data-tool-panel="submittal"] .builder-panel > .preview-panel .sheet {
  transform: none;
  zoom: var(--preview-scale, 0.94);
}
/* Cover / TOC views: single full-width column showing only the chosen page.
   The cover is the first sheet; the TOC is every sheet after it. */
body[data-view-mode="simple"][data-simple-step="review"][data-preview-view="cover"] [data-tool-panel="submittal"] .builder-panel > .preview-panel .document-preview,
body[data-view-mode="simple"][data-simple-step="review"][data-preview-view="toc"] [data-tool-panel="submittal"] .builder-panel > .preview-panel .document-preview {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
body[data-view-mode="simple"][data-simple-step="review"][data-preview-view="cover"] [data-tool-panel="submittal"] .builder-panel > .preview-panel .document-preview .sheet:nth-child(n + 2) {
  display: none;
}
body[data-view-mode="simple"][data-simple-step="review"][data-preview-view="toc"] [data-tool-panel="submittal"] .builder-panel > .preview-panel .document-preview .sheet:first-child {
  display: none;
}

/* Preview layout toggle (Both pages / One page) — review step only */
.preview-toolbar-right { align-items: center; display: flex; gap: 12px; }
.preview-view-toggle { display: none; }
body[data-view-mode="simple"][data-simple-step="review"] .preview-view-toggle {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
}
.preview-view-btn {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font: 700 11.5px Inter, sans-serif;
  padding: 5px 11px;
}
.preview-view-btn.active {
  background: var(--surface-lift);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink);
}

.panel-section,
.preview-toolbar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 34%),
    linear-gradient(180deg, rgba(27, 34, 42, 0.98), rgba(17, 23, 30, 0.98));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.panel-section {
  overflow: hidden;
  padding: 17px;
  position: relative;
}

.contractor-section .field-grid,
.contractor-address-label,
.contractor-disclaimer-label {
  margin-top: 8px;
}

.contractor-section textarea {
  min-height: 72px;
}

.contractor-section .logo-paste-drop {
  min-height: 74px;
}

.panel-section::before {
  background: linear-gradient(90deg, rgba(255, 90, 47, 0.88), rgba(255, 176, 58, 0.58), rgba(55, 183, 228, 0.8));
  content: "";
  height: 2px;
  inset: 0 0 auto;
  opacity: 0.78;
  position: absolute;
}

body[data-theme="plain-light"] .simple-step-nav,
body[data-theme="plain-light"] .panel-section,
body[data-theme="plain-light"] .preview-toolbar {
  background: #ffffff;
  border-color: #b9c8d4;
  box-shadow: var(--shadow);
}

body[data-theme="plain-light"] .simple-step-nav {
  background: #eef4f8;
}

body[data-theme="plain-light"] .panel-section::before {
  height: 4px;
  opacity: 1;
}

body[data-theme="plain-light"] .project-controls-section::before,
body[data-theme="plain-light"] .project-intake-section::before {
  background: #0f6c8e;
}

body[data-theme="plain-light"] .contractor-section::before {
  background: #176d49;
}

body[data-theme="plain-light"] .datasheet-database-section::before,
body[data-theme="plain-light"] .selected-sheets-section::before {
  background: #be3d2a;
}

body[data-theme="plain-light"] .cover-template-section::before {
  background: #7f4a00;
}

.preview-toolbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 14px 16px;
}

.preview-toolbar strong {
  display: block;
  font-size: 1.08rem;
  max-width: 48ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-toolbar span,
.generate-status,
.detected-row,
#selectedCount {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.generate-status {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: none;
  margin-bottom: 12px;
  padding: 10px 12px;
}

.generate-status.active {
  display: block;
}

.generate-status.error {
  background: #38191a;
  border-color: #a43e35;
  color: #ffb3a5;
}

.generate-status.success {
  background: #123325;
  border-color: #277a55;
  color: #8cf1c2;
}

.generate-status.info {
  background: #1d2b3a;
  border-color: #415d78;
  color: #b8d8ff;
}

label {
  color: var(--muted);
  display: grid;
  font-size: 0.78rem;
  font-weight: 900;
  gap: 6px;
  letter-spacing: 0;
  text-transform: uppercase;
}

input,
select,
textarea {
  background: #10161d;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--ink);
  min-height: 40px;
  padding: 9px 10px;
  text-transform: none;
  width: 100%;
}

body[data-theme="plain-light"] input,
body[data-theme="plain-light"] select,
body[data-theme="plain-light"] textarea {
  background: #ffffff;
  border-color: #9fb1c0;
  color: #16202a;
}

body[data-theme="plain-light"] input::file-selector-button {
  background: #e6edf3;
  border-color: #9fb1c0;
  color: #16202a;
}

input::file-selector-button {
  background: linear-gradient(135deg, #2c3540, #171d24);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
  margin-right: 10px;
  min-height: 28px;
  padding: 0 10px;
}

input::file-selector-button:hover {
  border-color: var(--brand);
}

textarea {
  line-height: 1.35;
  resize: vertical;
}

::placeholder {
  color: #788693;
}

body[data-theme="plain-light"] ::placeholder {
  color: #667789;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 90, 47, 0.18);
  outline: none;
}

body[data-theme="plain-light"] input:focus,
body[data-theme="plain-light"] select:focus,
body[data-theme="plain-light"] textarea:focus {
  border-color: #0f6c8e;
  box-shadow: 0 0 0 3px rgba(15, 108, 142, 0.16);
}

.field-grid {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.field-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wide-field {
  grid-column: 1 / -1;
}

.cover-additional-info {
  margin-top: 10px;
}

.toggle-row {
  align-items: center;
  display: flex;
  gap: 10px;
}

.toggle-row input[type="checkbox"] {
  flex: 0 0 auto;
  min-height: 0;
  width: auto;
}

.cover-additional-toggle,
.hydraulic-contractor-toggle {
  align-items: center;
  background: rgba(55, 183, 228, 0.08);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  display: flex;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 900;
  padding: 10px 12px;
  text-transform: uppercase;
}

.cover-additional-toggle input,
.hydraulic-contractor-toggle input {
  accent-color: var(--accent);
  height: 18px;
  width: 18px;
}

.cover-additional-fields {
  border: 1px solid rgba(55, 183, 228, 0.18);
  border-radius: 6px;
  display: grid;
  gap: 10px;
  padding: 10px;
}

body[data-theme="plain-light"] .cover-additional-toggle,
body[data-theme="plain-light"] .hydraulic-contractor-toggle,
body[data-theme="plain-light"] .cover-additional-fields {
  background: #f4f8fb;
  border-color: #b9c8d4;
}

.cover-additional-editor {
  margin-top: 0;
}

.cover-additional-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cover-additional-summary span {
  background: rgba(55, 183, 228, 0.1);
  border: 1px solid rgba(55, 183, 228, 0.22);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 5px 8px;
}

body[data-theme="plain-light"] .cover-additional-summary span {
  background: #ffffff;
  border-color: #c7d4de;
}

.project-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}
/* Keep the unsaved indicator on its own full-width row so the four buttons stay a
   clean 2x2 whether or not it is showing. */
.project-actions .unsaved-indicator {
  align-self: center;
  grid-column: 1 / -1;
  justify-self: start;
}
.project-actions button { width: 100%; }

.detected-row {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 10px;
  padding: 9px 10px;
}

.image-intake {
  align-items: center;
  background: var(--surface-soft);
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  color: var(--muted);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 10px;
  min-height: 62px;
  padding: 10px;
}

.image-intake.drag-over {
  background: #2b2522;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 90, 47, 0.16);
}

.image-intake strong {
  color: var(--brand);
  display: block;
  font-size: 0.9rem;
}

.image-intake span {
  display: block;
  font-size: 0.82rem;
  line-height: 1.35;
  margin-top: 2px;
}

.image-intake img {
  border: 1px solid var(--line);
  border-radius: 5px;
  display: none;
  max-height: 58px;
  max-width: 96px;
  object-fit: contain;
}

.image-intake.has-image img {
  display: block;
}

.datasheet-drop {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255, 90, 47, 0.08), transparent 38%, rgba(55, 183, 228, 0.08)),
    var(--surface-soft);
  border: 2px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  font-size: 0.84rem;
  gap: 4px;
  font-weight: 750;
  justify-content: center;
  line-height: 1.35;
  margin-top: 10px;
  min-height: 88px;
  padding: 14px;
  text-align: center;
}

.datasheet-drop strong {
  color: var(--accent);
  display: block;
  font-size: 0.98rem;
  text-transform: uppercase;
}

.datasheet-drop span {
  display: block;
  max-width: 46ch;
}

.datasheet-drop.drag-over {
  background:
    linear-gradient(135deg, rgba(255, 90, 47, 0.18), transparent 38%, rgba(55, 183, 228, 0.18)),
    #202832;
  border-color: var(--water);
  box-shadow:
    0 0 0 3px rgba(55, 183, 228, 0.16),
    inset 0 0 0 1px rgba(255, 90, 47, 0.16);
}

body[data-theme="plain-light"] .image-intake,
body[data-theme="plain-light"] .datasheet-drop,
body[data-theme="plain-light"] .logo-paste-drop {
  background: #f4f8fb;
  border-color: #9fb1c0;
  color: #4f6070;
}

body[data-theme="plain-light"] .image-intake strong,
body[data-theme="plain-light"] .datasheet-drop strong,
body[data-theme="plain-light"] .logo-paste-drop strong {
  color: #0f6c8e;
}

body[data-theme="plain-light"] .remote-area-badge {
  background: #e7f3f8;
  border-color: #9db7c9;
  color: #0f6c8e;
}

body[data-theme="plain-light"] .remote-area-badge.muted {
  background: #eef4f8;
  border-color: #c2d0dc;
  color: #4f6070;
}

body[data-theme="plain-light"] .image-intake.drag-over,
body[data-theme="plain-light"] .datasheet-drop.drag-over,
body[data-theme="plain-light"] .logo-paste-drop.drag-over {
  background: #e7f3f8;
  border-color: #0f6c8e;
  box-shadow: 0 0 0 3px rgba(15, 108, 142, 0.16);
}

.import-status {
  border: 1px solid transparent;
  border-radius: 6px;
  display: none;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.4;
  margin-top: 10px;
  padding: 9px 11px;
}

.import-status.active {
  display: block;
}

.import-status.success {
  background: rgba(43, 151, 89, 0.16);
  border-color: rgba(86, 207, 132, 0.35);
  color: #9ee8b8;
}

.import-status.error {
  background: rgba(205, 65, 45, 0.18);
  border-color: rgba(255, 110, 87, 0.38);
  color: #ffb5a8;
}

.import-status.info {
  background: rgba(55, 183, 228, 0.13);
  border-color: rgba(55, 183, 228, 0.32);
  color: #9bdff8;
}

.project-info-drop {
  cursor: pointer;
}

.project-info-drop img {
  border: 1px solid var(--line);
  border-radius: 5px;
  display: none;
  margin-top: 8px;
  max-height: 72px;
  max-width: 140px;
  object-fit: contain;
}

.project-info-drop.has-image img {
  display: block;
}

.scan-progress {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.scan-progress[hidden] {
  display: none;
}

.scan-progress-track {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  height: 7px;
  overflow: hidden;
}

.scan-progress-track span {
  background: linear-gradient(90deg, var(--fire), var(--water));
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 180ms ease;
  width: 0%;
}

.scan-progress small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.scan-progress-details {
  display: grid;
  gap: 3px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.scan-progress-details[hidden] {
  display: none;
}

.scan-progress-details li {
  align-items: center;
  color: rgba(226, 232, 240, 0.78);
  display: flex;
  font-size: 0.74rem;
  gap: 7px;
  line-height: 1.25;
}

.scan-progress-details li::before {
  background: linear-gradient(135deg, var(--fire), var(--water));
  border-radius: 999px;
  content: "";
  flex: 0 0 auto;
  height: 6px;
  width: 6px;
}

.logo-paste-drop {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255, 90, 47, 0.08), transparent 45%, rgba(55, 183, 228, 0.08)),
    #10161d;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  cursor: copy;
  display: grid;
  gap: 12px;
  grid-template-columns: 96px minmax(0, 1fr);
  margin: 10px 0;
  min-height: 86px;
  padding: 10px;
}

.logo-paste-drop:focus-visible,
.logo-paste-drop.drag-over {
  border-color: var(--water);
  box-shadow:
    0 0 0 3px rgba(55, 183, 228, 0.16),
    inset 0 0 0 1px rgba(255, 90, 47, 0.12);
  outline: none;
}

.logo-paste-drop strong,
.logo-paste-drop span {
  display: block;
}

.logo-paste-drop strong {
  color: var(--accent);
  font-size: 0.9rem;
  text-transform: uppercase;
}

.logo-paste-drop span {
  font-size: 0.8rem;
  font-weight: 750;
  line-height: 1.35;
  margin-top: 3px;
}

.logo-clear-button {
  margin-top: 9px;
}

.logo-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

.logo-button-row .logo-clear-button {
  margin-top: 0;
}

.password-field {
  align-items: center;
  display: flex;
  position: relative;
}

.password-field input {
  flex: 1;
  padding-right: 40px;
  width: 100%;
}

.password-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font-size: 1rem;
  justify-content: center;
  line-height: 1;
  padding: 4px;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.password-toggle:hover {
  color: var(--text);
}

.password-toggle:focus-visible {
  outline: 2px solid var(--water);
  outline-offset: 1px;
}

.logo-preview-box {
  align-items: center;
  background: var(--surface-lift);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  height: 66px;
  justify-content: center;
  overflow: hidden;
  padding: 7px;
}

.logo-preview-box img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.logo-preview-box span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  margin: 0;
  text-transform: uppercase;
}

.primary-button,
.secondary-button,
.ghost-button,
.danger-button {
  border-radius: 6px;
  font-weight: 900;
  min-height: 38px;
  padding: 0 14px;
}

.compact-button {
  font-size: 0.78rem;
  min-height: 30px;
  padding: 0 10px;
}

.primary-button {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: 1px solid #ff7048;
  color: #fff;
}

.secondary-button {
  background: #2c3540;
  border: 1px solid #ff7048;
  color: #fff;
}

.ghost-button {
  background: #111820;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}

body[data-theme="plain-light"] .primary-button {
  background: #be3d2a;
  border-color: #8f2d22;
  color: #ffffff;
}

body[data-theme="plain-light"] .secondary-button {
  background: #ffffff;
  border-color: #be3d2a;
  color: #8f2d22;
}

body[data-theme="plain-light"] .ghost-button {
  background: #f6f9fb;
  border-color: #9fb1c0;
  color: #16202a;
}

.danger-ghost-button {
  border-color: rgba(228, 74, 53, 0.75);
  color: #ffb3a5;
}

body[data-theme="plain-light"] .danger-ghost-button {
  border-color: #be3d2a;
  color: #8f2d22;
}

.full-width {
  margin-top: 10px;
  width: 100%;
}

button:hover:not(:disabled),
button:focus-visible {
  filter: brightness(1.08);
  outline: 3px solid rgba(255, 90, 47, 0.2);
  outline-offset: 1px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.hidden-input {
  display: none;
}

.cover-template-options {
  display: grid;
  gap: 6px;
}

.cover-template-section .eyebrow {
  margin-bottom: 8px;
}

.cover-template-option {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  display: grid;
  gap: 4px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 8px;
  text-align: left;
  width: 100%;
}

body[data-theme="plain-light"] .cover-template-option {
  background: #f7fafc;
  border-color: #c2d0dc;
}

.cover-template-option.active {
  border-color: var(--brand);
  box-shadow: inset 4px 0 0 var(--brand), 0 0 0 3px rgba(255, 90, 47, 0.12);
}

.cover-template-option strong {
  color: var(--brand);
  font-size: 0.82rem;
}

.cover-template-option span:not(.template-swatches) {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  grid-column: 2;
  line-height: 1.3;
}

.template-swatches {
  display: flex;
  gap: 4px;
}

.template-swatches i {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  display: block;
  height: 13px;
  width: 13px;
}

.generate-dock {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255, 90, 47, 0.24), transparent 34%, rgba(55, 183, 228, 0.2)),
    rgba(13, 17, 22, 0.9);
  border: 1px solid rgba(255, 90, 47, 0.42);
  border-radius: 10px;
  bottom: 18px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46);
  display: flex;
  gap: 12px;
  justify-content: center;
  left: 50%;
  max-width: min(1680px, calc(100% - 28px));
  padding: 10px;
  position: fixed;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  z-index: 20;
}

body[data-theme="plain-light"] .generate-dock {
  background: #ffffff;
  border-color: #b9c8d4;
  box-shadow: 0 12px 30px rgba(36, 52, 68, 0.18);
}

.generate-dock[hidden] {
  display: none;
}

.generate-dock-button {
  min-height: 46px;
  min-width: 320px;
}

.generate-dock-secondary {
  min-height: 46px;
  min-width: 250px;
}

.settings-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(340px, 0.9fr) minmax(440px, 1.4fr);
}

.settings-helper {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 12px;
}

.settings-actions {
  margin-top: 10px;
}

.option-row {
  align-items: center;
  background: rgba(9, 15, 21, 0.55);
  border: 1px solid rgba(84, 117, 139, 0.36);
  border-radius: 8px;
  color: var(--text);
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
}

.option-row input {
  flex: 0 0 auto;
  width: 18px;
}

.email-draft-dialog {
  max-width: min(820px, calc(100vw - 32px));
}

.email-attachment-panel {
  background: rgba(9, 15, 21, 0.62);
  border: 1px solid rgba(84, 117, 139, 0.36);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
}

.email-attachment-panel > strong {
  color: var(--brand-warm);
  font-family: var(--mono);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.email-attachment-row {
  background: rgba(18, 31, 40, 0.72);
  border: 1px solid rgba(84, 117, 139, 0.28);
  border-radius: 7px;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
}

.email-attachment-row strong {
  color: var(--text);
  font-size: 0.88rem;
}

.email-attachment-row span {
  color: var(--muted);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.catalog-list {
  margin-top: 12px;
}

.catalog-toolbar {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 240px);
}

.catalog-toolbar select {
  min-height: 42px;
}

.loadout-panel {
  align-items: center;
  background: linear-gradient(135deg, rgba(10, 20, 28, 0.72), rgba(24, 42, 52, 0.52));
  border: 1px solid rgba(84, 117, 139, 0.42);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(170px, 1fr) minmax(220px, 320px) auto;
  margin: 12px 0;
  padding: 12px;
}

.loadout-panel strong {
  display: block;
  margin-top: 3px;
}

.loadout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.catalog-browser {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

/* Category rail → horizontal chips */
.category-rail {
  background: none;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: none;
  overflow: visible;
  padding: 0;
}

.category-tab {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  min-height: 0;
  padding: 7px 14px;
  text-align: left;
  width: auto;
}

.category-tab:hover { border-color: rgba(255, 255, 255, 0.28); }

.category-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: none;
}

.category-tab-symbol { display: none; }

.category-tab-name {
  color: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.category-tab.active .category-tab-name { color: var(--accent); }

.category-tab-count {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 8px;
}

/* ===== Catalog data table ===== */
.catalog-table { display: flex; flex-direction: column; }
.catalog-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: 30px minmax(96px, 0.8fr) minmax(180px, 2.4fr) minmax(0, 1fr) minmax(92px, auto);
  min-height: 44px;
  padding: 5px 8px 5px 6px;
}
.row-details { padding-right: 6px; }
.row-actions .small-button { white-space: nowrap; }
.catalog-row:not(.catalog-row-head):hover { background: rgba(255, 255, 255, 0.035); }
.catalog-row.is-selected {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.catalog-row.is-remote .row-mfr, .catalog-row.is-remote .row-product { opacity: 0.78; }
.catalog-row-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  min-height: 34px;
  position: sticky;
  top: 0;
  z-index: 2;
}
.catalog-row-head:hover { background: var(--surface); }
.col-sort {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  justify-self: start;
  letter-spacing: 0.04em;
  padding: 0;
  text-transform: uppercase;
}
.col-sort:hover { color: var(--ink); }
.col-sort.is-sorted { color: var(--accent); }
.col-label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.col-label-center { text-align: center; }
.row-check { align-items: center; display: flex; margin: 0; }
.row-check input { height: 17px; width: 17px; }
.row-mfr { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-productcell { min-width: 0; }
.row-product { align-items: center; display: flex; gap: 6px; min-width: 0; }
.row-product-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-tocedit { align-items: center; display: flex; gap: 8px; min-width: 0; }
.row-tocedit-label {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 700;
  gap: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.row-tocname {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: inherit;
  flex: 1 1 auto;
  font-size: 13px;
  min-width: 0;
  padding: 4px 8px;
}
.row-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.row-flag { background: var(--surface-lift); border-radius: 4px; color: var(--muted); font-size: 10px; padding: 1px 6px; }
.row-flag.warn { background: rgba(255, 176, 58, 0.16); color: #ffce85; }
.row-flag.muted { background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.row-details { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-verified-icon { color: #36b37e; flex: 0 0 auto; font-weight: 800; }
.row-actions { display: flex; justify-content: flex-end; min-width: 0; }
.row-menu-wrap { position: relative; }
.row-menu-button {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: 4px;
}
.row-menu-button:hover { background: var(--surface-lift); color: var(--ink); }
.row-menu-button svg { fill: currentColor; }
.row-menu {
  background: var(--surface-lift);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  min-width: 184px;
  padding: 4px;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
}
.row-menu button {
  background: none;
  border: 0;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  padding: 8px 10px;
  text-align: left;
  white-space: nowrap;
}
.row-menu button:hover { background: var(--surface-soft); }
.row-menu .row-menu-danger { color: #ff9b85; }
body[data-theme="plain-light"] .row-menu .row-menu-danger { color: var(--brand); }
.row-menu.open-up { bottom: calc(100% + 4px); top: auto; }

/* Muted empty category chips */
.category-tab.is-empty { opacity: 0.5; }
.category-tab.is-empty.active { opacity: 1; }

/* Slim catalog panel header: result count + filters disclosure */
.catalog-panel-header {
  align-items: center;
  background: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: space-between;
  padding: 2px 0 10px;
}
.catalog-result-count { color: var(--muted); font-size: 12.5px; margin: 0; }
.catalog-result-count .count-selected { color: var(--accent); }
.search-scope-note { color: var(--muted); font-size: 12px; margin: 0; }

.catalog-filters-disclosure { justify-self: end; margin: 0; min-width: 0; }
.catalog-filters-disclosure[open] { grid-column: 1 / -1; justify-self: stretch; }
.catalog-filters-disclosure > summary {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 8px;
  letter-spacing: 0.04em;
  list-style: none;
  padding: 8px 14px;
  text-transform: uppercase;
  transition: border-color 120ms ease, color 120ms ease;
  user-select: none;
}
.catalog-filters-disclosure > summary:hover { border-color: var(--accent); }
.catalog-filters-disclosure > summary svg {
  fill: none; height: 13px; stroke: currentColor; stroke-linejoin: round; stroke-width: 2.2; width: 13px;
}
.catalog-filters-disclosure > summary::-webkit-details-marker { display: none; }
.catalog-filters-disclosure[open] > summary { border-color: var(--accent); color: var(--accent); }
.catalog-filters-disclosure .filter-badge {
  background: var(--accent);
  border-radius: 999px;
  color: #1a1208;
  font-size: 10px;
  font-weight: 800;
  min-width: 16px;
  padding: 1px 5px;
  text-align: center;
}
.catalog-filters-disclosure[open] .catalog-filter-controls { margin-top: 10px; }

/* Loadout disclosure (collapsed by default) */
.loadout-disclosure { margin-top: 2px; }
.loadout-disclosure > summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 0;
}
.loadout-disclosure[open] > summary { color: inherit; margin-bottom: 8px; }
.loadout-disclosure .loadout-panel {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Compact search + selected-only row */
.catalog-toolbar { align-items: end; display: flex; flex-wrap: wrap; gap: 14px; }
.catalog-search-field { flex: 1 1 280px; }

/* Quick/Advanced toggle now lives in the single top bar (submittal tool only) */
.header-view-mode { align-items: center; display: flex; }

/* Cover template is now a compact dropdown */
.cover-template-select { width: 100%; }

/* Catalog command bar: search + selected-only + bulk actions on one line */
.catalog-command-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.catalog-command-bar .catalog-search-field { flex: 1 1 240px; }
.catalog-command-bar .catalog-selected-filter { flex: 0 0 auto; }
.catalog-bar-spacer { flex: 1 1 auto; }
.catalog-command-bar #selectedCount { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
@media (max-width: 760px) {
  .catalog-row { grid-template-columns: 28px minmax(70px, 0.7fr) minmax(0, 1.7fr) 88px; }
  .catalog-row .row-details, .catalog-row-head .col-label { display: none; }
}

.catalog-content-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(13, 17, 22, 0.38);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.catalog-panel-header {
  align-items: end;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
  padding: 14px;
}

.catalog-panel-header h2 {
  color: var(--brand);
  font-size: 1rem;
  line-height: 1.2;
}

.search-scope-note {
  align-self: center;
  color: var(--water);
  font-size: 0.86rem;
  font-weight: 900;
  justify-self: end;
  text-transform: uppercase;
}

.catalog-filter-controls {
  align-items: end;
  background: rgba(127, 127, 127, 0.05);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
}

.catalog-filters { display: contents; }

.clear-filters-button {
  margin-left: auto;
  min-height: 34px;
  white-space: nowrap;
}

.catalog-filter {
  flex: 1 1 170px;
  max-width: 280px;
  min-width: 150px;
}

.catalog-filter select {
  min-height: 34px;
  padding: 6px 8px;
}

.catalog-selected-filter {
  align-items: center;
  background: rgba(16, 25, 35, 0.76);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.74rem;
  font-weight: 950;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

.catalog-selected-filter input {
  accent-color: var(--brand);
  height: 16px;
  width: 16px;
}

.catalog-results {
  flex: 1;
  max-height: 650px;
  overflow-y: auto;
  padding: 12px;
}

.item-list,
.catalog-results {
  align-content: start;
  align-items: start;
  display: grid;
  gap: 8px;
  grid-auto-rows: min-content;
}

.catalog-results {
  justify-content: stretch;
}

.empty-category {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 4px 0;
}

.search-result-group {
  display: grid;
  gap: 8px;
}

.search-result-group + .search-result-group {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 12px;
}

.search-result-group h3 {
  align-items: center;
  color: var(--accent);
  display: flex;
  font-size: 0.84rem;
  font-weight: 900;
  gap: 8px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.search-result-group h3 span {
  background: rgba(55, 183, 228, 0.12);
  border: 1px solid rgba(55, 183, 228, 0.24);
  border-radius: 999px;
  color: var(--water);
  font-size: 0.72rem;
  padding: 2px 7px;
}

.catalog-item {
  align-items: center;
  background: rgba(32, 40, 50, 0.74);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) minmax(240px, max-content);
  min-height: 50px;
  overflow: hidden;
  padding: 8px 10px;
  position: relative;
  scroll-margin: 90px;
  z-index: 0;
}

.catalog-item:has(.toc-title-editor) {
  grid-template-rows: auto auto;
  min-height: 176px;
}

.catalog-item.database-item {
  grid-template-columns: auto minmax(0, 1fr) minmax(240px, max-content);
}

.catalog-item.remote-item {
  border-color: rgba(55, 183, 228, 0.22);
  min-height: 50px;
}

body[data-theme="plain-light"] .option-row,
body[data-theme="plain-light"] .email-attachment-panel,
body[data-theme="plain-light"] .loadout-panel,
body[data-theme="plain-light"] .category-rail,
body[data-theme="plain-light"] .catalog-content-panel,
body[data-theme="plain-light"] .catalog-panel-header,
body[data-theme="plain-light"] .catalog-selected-filter,
body[data-theme="plain-light"] .catalog-item {
  background: #ffffff;
  border-color: #c2d0dc;
  color: #16202a;
}

body[data-theme="plain-light"] .category-rail,
body[data-theme="plain-light"] .catalog-results {
  background: #f4f8fb;
}

body[data-theme="plain-light"] .category-tab {
  background: #ffffff;
  border-color: #c2d0dc;
  color: #8f2d22;
}

body[data-theme="plain-light"] .category-tab.active {
  background: #fff7ed;
  border-color: #be3d2a;
  box-shadow: inset 4px 0 0 #be3d2a;
}

body[data-theme="plain-light"] .catalog-item.remote-item {
  border-color: #9db7c9;
}

body[data-theme="plain-light"] .catalog-status span {
  border-color: #c2d0dc;
}

body[data-theme="plain-light"] .catalog-status.local-status span:first-child,
body[data-theme="plain-light"] .verified-source-badge {
  color: #176d49;
}

.catalog-item input[type="checkbox"] {
  height: 18px;
  margin-top: 2px;
  min-height: 18px;
  padding: 0;
  width: 18px;
}

.catalog-item input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.catalog-copy {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.catalog-title {
  color: var(--ink);
  font-weight: 850;
  line-height: 1.18;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.catalog-status {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.catalog-status span {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  padding: 5px 8px;
  text-transform: uppercase;
}

.catalog-status.local-status span:first-child {
  background: rgba(77, 194, 116, 0.12);
  border-color: rgba(77, 194, 116, 0.28);
  color: #77d996;
}

.catalog-status.local-status span:last-child {
  color: var(--muted);
}

.catalog-warning {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.25;
  margin-top: 5px;
}

.catalog-item > .toc-title-editor {
  grid-column: 2 / 4;
  grid-row: 2;
  gap: 5px;
  margin-top: 0;
  text-transform: none;
  width: 100%;
}

.catalog-item > .toc-title-editor input {
  font-size: 0.82rem;
  min-height: 32px;
  padding: 6px 8px;
}

.small-button {
  align-self: start;
  background: var(--accent-soft);
  border: 1px solid #8f5131;
  border-radius: 5px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
  min-height: 28px;
  padding: 0 9px;
}

.icon-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  padding: 0;
  width: 32px;
}

.icon-button svg {
  fill: none;
  height: 16px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 16px;
}

.catalog-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
  max-width: 500px;
  position: relative;
  z-index: 2;
}

.catalog-actions .small-button {
  min-height: 28px;
}

.remote-actions {
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.verified-source-badge {
  align-items: center;
  color: #77d996;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 900;
  gap: 6px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.verified-source-badge span {
  align-items: center;
  background: rgba(77, 194, 116, 0.16);
  border: 1px solid rgba(77, 194, 116, 0.38);
  border-radius: 4px;
  display: inline-flex;
  height: 18px;
  justify-content: center;
  width: 18px;
}

.verified-source-badge svg {
  fill: none;
  height: 13px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  width: 13px;
}

.download-button {
  background: rgba(55, 183, 228, 0.13);
  border-color: rgba(55, 183, 228, 0.42);
  color: var(--water);
  min-width: 132px;
}

.danger-button {
  background: #35191a;
  border-color: #a43e35;
  color: #ffb3a5;
}

.document-preview {
  display: grid;
  gap: 16px;
  padding-bottom: 12px;
}

.sheet {
  aspect-ratio: 8.5 / 11;
  background: #fff;
  border: 1px solid #3a4652;
  box-shadow: var(--shadow);
  color: #000;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 860px;
  min-height: 720px;
  padding: 52px 56px 42px;
  position: relative;
  width: min(100%, 860px);
}

.cover-sheet {
  justify-content: flex-start;
  overflow: hidden;
  padding: 0;
}

.cover-preview-header {
  align-items: center;
  background: var(--brand);
  color: #fff;
  display: flex;
  min-height: 124px;
  padding: 38px 54px 26px;
}

.cover-preview-header h2 {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.cover-preview-header p {
  font-size: 1rem;
  margin-top: 8px;
}

.cover-preview-stripe {
  background: var(--brand-2);
  height: 6px;
}

.cover-preview-main {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) 172px;
  padding: 52px 54px 0;
}

.cover-preview-project {
  align-self: start;
  background: #eef4f5;
  border: 1px solid #d0dcdf;
  border-radius: 8px;
  min-height: 158px;
  padding: 26px 22px;
}

.cover-preview-project span {
  color: var(--brand);
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.cover-preview-project h3 {
  color: #000;
  font-size: 1.38rem;
  line-height: 1.15;
  margin-bottom: 20px;
}

.cover-preview-project p {
  color: #596a70;
  font-size: 0.9rem;
  line-height: 1.35;
}

.cover-preview-additional {
  border-top: 1px solid #d0dcdf;
  display: grid;
  gap: 7px 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
  padding-top: 14px;
}

.cover-preview-additional div {
  min-width: 0;
}

.cover-preview-additional dt {
  color: var(--brand);
  font-size: 0.58rem;
  font-weight: 950;
  line-height: 1.1;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.cover-preview-additional dd {
  color: #111820;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.18;
  margin: 0;
  overflow-wrap: anywhere;
}

.cover-preview-contractor {
  align-items: center;
  border: 1px solid #d0dcdf;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-height: 276px;
  padding: 26px 16px 20px;
  text-align: center;
}

.cover-preview-logo {
  align-items: center;
  display: flex;
  height: 82px;
  justify-content: center;
  margin-bottom: 18px;
  width: 120px;
}

.cover-preview-logo img {
  max-height: 82px;
  max-width: 120px;
  object-fit: contain;
}

.cover-preview-logo span {
  /* The cover preview is a white "paper" page in both themes, so this placeholder
     uses a fixed paper-appropriate gray (not the theme --muted, which inverts). */
  color: #5e6672;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.cover-preview-contractor h3 {
  color: var(--brand);
  font-size: 1rem;
  line-height: 1.2;
  margin-bottom: 24px;
}

.cover-preview-contractor p {
  color: #596a70;
  font-size: 0.78rem;
  line-height: 1.28;
  margin-bottom: 10px;
  white-space: pre-wrap;
}

.cover-preview-contractor strong {
  color: var(--brand);
  display: block;
  font-size: 0.78rem;
  line-height: 1.3;
  margin-top: 5px;
}

.cover-preview-footer {
  margin-top: auto;
  padding: 0 54px 66px;
}

.cover-preview-footer div {
  background: var(--brand-2);
  height: 4px;
  margin-bottom: 14px;
}

.cover-preview-footer p {
  color: #596a70;
  font-size: 0.78rem;
  line-height: 1.42;
}

.cover-template-technical-navy .cover-preview-header {
  background: #17313a;
}

.cover-template-technical-navy .cover-preview-stripe,
.cover-template-technical-navy .cover-preview-footer div {
  background: #28687a;
}

.cover-template-technical-navy .cover-preview-project {
  background: #eef4f5;
}

.cover-template-technical-navy .cover-preview-project span,
.cover-template-technical-navy .cover-preview-contractor h3,
.cover-template-technical-navy .cover-preview-contractor strong {
  color: #17313a;
}

.cover-template-executive-graphite .cover-preview-header {
  background: #20262b;
  bottom: 0;
  left: 0;
  min-height: auto;
  padding: 54px 24px;
  position: absolute;
  top: 0;
  width: 180px;
}

.cover-template-executive-graphite .cover-preview-header h2 {
  font-size: 1.58rem;
  line-height: 1.08;
}

.cover-template-executive-graphite .cover-preview-header p {
  border-top: 2px solid #b84632;
  margin-top: 22px;
  padding-top: 18px;
}

.cover-template-executive-graphite .cover-preview-stripe {
  height: auto;
  left: 180px;
  position: absolute;
  top: 0;
  width: 8px;
  bottom: 0;
}

.cover-template-executive-graphite .cover-preview-main {
  display: block;
  padding: 80px 54px 0 230px;
}

.cover-template-executive-graphite .cover-preview-project {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #d4dcde;
  border-radius: 0;
  min-height: 190px;
  padding: 0 0 34px;
}

.cover-template-executive-graphite .cover-preview-project h3 {
  font-size: 1.82rem;
}

.cover-template-executive-graphite .cover-preview-contractor {
  align-items: center;
  background: #f4f6f6;
  display: grid;
  gap: 12px 22px;
  grid-template-columns: 150px minmax(0, 1fr);
  margin-top: 40px;
  min-height: 178px;
  padding: 24px;
  text-align: left;
}

.cover-template-executive-graphite .cover-preview-logo {
  grid-row: span 4;
  margin-bottom: 0;
}

.cover-template-executive-graphite .cover-preview-contractor h3,
.cover-template-executive-graphite .cover-preview-contractor p,
.cover-template-executive-graphite .cover-preview-contractor strong {
  margin: 0;
  text-align: left;
}

.cover-template-executive-graphite .cover-preview-footer {
  padding-left: 230px;
}

.cover-template-executive-graphite .cover-preview-footer div {
  background: #b84632;
}

.cover-template-executive-graphite .cover-preview-project {
  background: #f4f6f6;
}

.cover-template-executive-graphite .cover-preview-project span,
.cover-template-executive-graphite .cover-preview-contractor h3,
.cover-template-executive-graphite .cover-preview-contractor strong {
  color: #20262b;
}

.cover-template-earth-copper .cover-preview-header {
  background: #1f3a34;
  justify-content: center;
  min-height: 92px;
  padding: 28px 54px 22px;
  text-align: center;
}

.cover-template-earth-copper .cover-preview-header h2 {
  font-size: 1.7rem;
}

.cover-template-earth-copper .cover-preview-stripe {
  margin: 0 auto;
  width: 72%;
}

.cover-template-earth-copper .cover-preview-main {
  display: flex;
  flex-direction: column;
  gap: 34px;
  padding: 70px 86px 0;
}

.cover-template-earth-copper .cover-preview-project {
  background: transparent;
  border: 0;
  min-height: 178px;
  padding: 0;
  text-align: center;
}

.cover-template-earth-copper .cover-preview-project span {
  margin-bottom: 18px;
}

.cover-template-earth-copper .cover-preview-project h3 {
  font-size: 2rem;
  margin: 0 auto 18px;
  max-width: 560px;
}

.cover-template-earth-copper .cover-preview-contractor {
  background: #f6f2ea;
  border-color: #ded5c5;
  display: grid;
  gap: 8px;
  justify-items: center;
  margin: 0 auto;
  max-width: 420px;
  min-height: 0;
  padding: 26px 38px;
  width: 100%;
}

.cover-template-earth-copper .cover-preview-logo {
  margin-bottom: 6px;
}

.cover-template-earth-copper .cover-preview-contractor h3 {
  margin-bottom: 8px;
}

.cover-template-earth-copper .cover-preview-footer {
  padding-left: 86px;
  padding-right: 86px;
  text-align: center;
}

.cover-template-earth-copper .cover-preview-stripe,
.cover-template-earth-copper .cover-preview-footer div {
  background: #b56a3c;
}

.cover-template-earth-copper .cover-preview-project {
  background: #f6f2ea;
}

.cover-template-earth-copper .cover-preview-project span,
.cover-template-earth-copper .cover-preview-contractor h3,
.cover-template-earth-copper .cover-preview-contractor strong {
  color: #1f3a34;
}

.cover-template-blueprint-slate .cover-preview-header {
  background:
    linear-gradient(rgba(45, 166, 215, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 166, 215, 0.12) 1px, transparent 1px),
    #eef7fb;
  background-size: 24px 24px;
  color: #0f3f6e;
  min-height: 148px;
  padding: 38px 54px 28px;
  position: relative;
}

.cover-template-blueprint-slate .cover-preview-header::before {
  background: #0f3f6e;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: 18px;
}

.cover-template-blueprint-slate .cover-preview-header::after {
  background: #2da6d7;
  bottom: 0;
  content: "";
  left: 18px;
  position: absolute;
  top: 0;
  width: 5px;
}

.cover-template-blueprint-slate .cover-preview-header h2 {
  font-size: 2.08rem;
}

.cover-template-blueprint-slate .cover-preview-header p {
  color: #526774;
}

.cover-template-blueprint-slate .cover-preview-stripe {
  display: none;
}

.cover-template-blueprint-slate .cover-preview-main {
  display: flex;
  flex-direction: column;
  gap: 42px;
  padding: 70px 54px 0;
}

.cover-template-blueprint-slate .cover-preview-project {
  background: #0f3f6e;
  border: 0;
  border-radius: 0;
  color: #fff;
  min-height: 118px;
  padding: 26px 24px;
}

.cover-template-blueprint-slate .cover-preview-project span,
.cover-template-blueprint-slate .cover-preview-project h3,
.cover-template-blueprint-slate .cover-preview-project p {
  color: #fff;
}

.cover-template-blueprint-slate .cover-preview-contractor {
  background: #eef7fb;
  border-color: #bcd7e6;
  display: grid;
  gap: 10px 26px;
  grid-template-columns: 120px minmax(0, 1fr);
  min-height: 142px;
  padding: 24px;
  text-align: left;
}

.cover-template-blueprint-slate .cover-preview-logo {
  grid-row: span 4;
  margin-bottom: 0;
}

.cover-template-blueprint-slate .cover-preview-contractor h3,
.cover-template-blueprint-slate .cover-preview-contractor p,
.cover-template-blueprint-slate .cover-preview-contractor strong {
  margin: 0;
  text-align: left;
}

.cover-template-blueprint-slate .cover-preview-footer div {
  background: #2da6d7;
}

.cover-template-blueprint-slate .cover-preview-contractor h3,
.cover-template-blueprint-slate .cover-preview-contractor strong {
  color: #0f3f6e;
}

.cover-template-safety-minimal {
  background: #fff;
}

.cover-template-safety-minimal::before {
  background: #111820;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: 24px;
}

.cover-template-safety-minimal::after {
  background: #e0522d;
  bottom: 0;
  content: "";
  left: 24px;
  position: absolute;
  top: 0;
  width: 6px;
}

.cover-template-safety-minimal .cover-preview-header {
  background: #fff;
  border-top: 2px solid #111820;
  color: #111820;
  margin: 68px 54px 0 70px;
  min-height: 150px;
  padding: 42px 0 0;
}

.cover-template-safety-minimal .cover-preview-header h2 {
  font-size: 2.18rem;
}

.cover-template-safety-minimal .cover-preview-header p {
  color: #5b6670;
}

.cover-template-safety-minimal .cover-preview-stripe {
  background: #e0522d;
  height: 5px;
  margin: -148px 0 0 70px;
  width: calc(100% - 124px);
}

.cover-template-safety-minimal .cover-preview-main {
  display: flex;
  flex-direction: column;
  gap: 52px;
  padding: 198px 54px 0 70px;
}

.cover-template-safety-minimal .cover-preview-project {
  background: #f7f8fa;
  border-color: #d8e0e5;
  border-radius: 8px;
  min-height: 122px;
  padding-left: 28px;
  position: relative;
}

.cover-template-safety-minimal .cover-preview-project::before {
  background: #e0522d;
  border-radius: 8px 0 0 8px;
  bottom: -1px;
  content: "";
  left: -1px;
  position: absolute;
  top: -1px;
  width: 6px;
}

.cover-template-safety-minimal .cover-preview-project span,
.cover-template-safety-minimal .cover-preview-contractor h3,
.cover-template-safety-minimal .cover-preview-contractor strong {
  color: #111820;
}

.cover-template-safety-minimal .cover-preview-contractor {
  background: #fff;
  border-color: #d8e0e5;
  display: grid;
  gap: 10px 30px;
  grid-template-columns: 124px minmax(0, 1fr);
  min-height: 162px;
  padding: 28px 24px;
  text-align: left;
}

.cover-template-safety-minimal .cover-preview-logo {
  grid-row: span 4;
  margin-bottom: 0;
}

.cover-template-safety-minimal .cover-preview-contractor h3,
.cover-template-safety-minimal .cover-preview-contractor p,
.cover-template-safety-minimal .cover-preview-contractor strong {
  margin: 0;
  text-align: left;
}

.cover-template-safety-minimal .cover-preview-footer {
  padding-left: 70px;
}

.cover-template-safety-minimal .cover-preview-footer div {
  background: #e0522d;
}

.toc-title {
  border-bottom: 3px solid #111;
  font-size: 1.65rem;
  margin-bottom: 22px;
  padding-bottom: 12px;
  text-transform: uppercase;
}

.toc-list {
  display: grid;
  gap: 12px;
}

.toc-row {
  align-items: baseline;
  display: grid;
  gap: 8px;
  grid-template-columns: auto 1fr auto;
}

.toc-row.category {
  font-size: 1.05rem;
  font-weight: 900;
  text-transform: uppercase;
}

.toc-row.item {
  font-size: 0.9rem;
  margin-left: 28px;
}

.toc-dots {
  border-bottom: 2px dotted #222;
  transform: translateY(-4px);
}

.web-link-toc-sheet {
  padding: 44px 36px 42px;
}

.preview-web-toc-heading {
  align-items: start;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.preview-web-toc-heading .toc-title {
  flex: 1;
  margin-bottom: 0;
}

.preview-web-toc-heading > span {
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.preview-web-toc-tables {
  display: grid;
  gap: 0;
}

.preview-web-toc-category,
.preview-web-toc-header,
.preview-web-toc-main,
.preview-web-toc-link,
.preview-web-toc-empty {
  border: 2px solid #111;
}

.preview-web-toc-category {
  border-bottom: 0;
  font-size: 0.92rem;
  font-weight: 900;
  padding: 8px 9px;
  text-transform: uppercase;
}

.preview-web-toc-header,
.preview-web-toc-main {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 0.64fr) minmax(0, 0.76fr) minmax(0, 0.82fr) 58px;
}

.preview-web-toc-header {
  border-bottom: 0;
  font-size: 0.64rem;
  font-weight: 900;
  text-align: center;
}

.preview-web-toc-header span,
.preview-web-toc-main span,
.preview-web-toc-main strong {
  border-left: 2px solid #111;
  min-width: 0;
  padding: 7px 8px;
}

.preview-web-toc-header span:first-child,
.preview-web-toc-main span:first-child {
  border-left: 0;
}

.preview-web-toc-main {
  border-bottom: 0;
  font-size: 0.78rem;
  line-height: 1.2;
}

.preview-web-toc-main strong {
  align-items: center;
  display: flex;
  font-weight: 900;
  justify-content: center;
}

.preview-web-toc-link {
  border-top: 0;
  color: #0070c0;
  font-size: 0.74rem;
  line-height: 1.2;
  margin-bottom: -2px;
  overflow-wrap: anywhere;
  padding: 5px 8px 6px;
  text-align: center;
}

.preview-web-toc-link.missing {
  color: #555;
  font-style: italic;
}

.preview-web-toc-empty {
  color: #555;
  font-weight: 800;
  padding: 28px;
  text-align: center;
}

.datasheet-title {
  border-bottom: 3px solid #111;
  padding-bottom: 12px;
}

.datasheet-title h2 {
  font-size: 1.36rem;
  line-height: 1.18;
  text-transform: uppercase;
}

.datasheet-title p {
  color: #333;
  font-weight: 750;
  margin-top: 6px;
}

.datasheet-body {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.spec-row {
  border-bottom: 1px solid #ccc;
  display: grid;
  gap: 16px;
  grid-template-columns: 150px minmax(0, 1fr);
  padding: 8px 0;
}

.spec-row strong {
  text-transform: uppercase;
}

.datasheet-placeholder {
  align-items: center;
  border: 2px dashed #aaa;
  color: #555;
  display: flex;
  flex: 1;
  font-weight: 800;
  justify-content: center;
  margin-top: 34px;
  min-height: 260px;
  padding: 24px;
  text-align: center;
}

.page-number {
  bottom: 22px;
  font-size: 0.86rem;
  font-weight: 900;
  position: absolute;
  right: 30px;
}

.review-dialog {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  color: var(--ink);
  margin: 0;
  max-width: 520px;
  padding: 0;
  width: min(520px, calc(100vw - 40px));
}

.review-dialog[open] {
  left: 50%;
  max-height: 90vh;
  overflow: hidden;
  position: fixed;
  top: max(16px, 4vh);
  transform: translateX(-50%);
  z-index: 10000;
}

.wide-review-dialog {
  max-width: 960px;
  width: min(960px, calc(100vw - 40px));
}

.wide-review-dialog form {
  max-height: min(88vh, 840px);
  overflow: auto;
}

.review-dialog::backdrop {
  background: rgba(5, 8, 12, 0.72);
}

.review-dialog form {
  display: grid;
  gap: 14px;
  max-height: min(88vh, 820px);
  overflow: auto;
  padding: 22px;
  scrollbar-gutter: stable;
}

.dialog-heading h2 {
  color: var(--brand);
  font-size: 1.35rem;
}

.compact-dialog-heading {
  gap: 2px;
}

.compact-dialog-heading h2 {
  font-size: 1rem;
}

.dialog-copy {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.debug-support-panel,
.debug-danger-panel {
  align-items: center;
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 14px;
}

.debug-support-panel {
  background: rgba(35, 159, 189, 0.08);
  border: 1px solid rgba(87, 196, 224, 0.28);
}

.debug-danger-panel {
  background: rgba(255, 83, 50, 0.08);
  border: 1px solid rgba(255, 83, 50, 0.28);
}

.debug-support-panel strong,
.debug-danger-panel strong {
  color: var(--ink);
}

.debug-support-panel span,
.debug-danger-panel span,
.debug-status {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.debug-support-panel .ghost-button,
.debug-danger-panel .danger-button {
  justify-self: start;
}

.debug-status {
  min-height: 1.2em;
}

.account-dialog {
  max-width: 920px;
  width: min(920px, calc(100vw - 36px));
}

.account-dialog[open] {
  overflow: auto;
}

.account-dialog .dialog-shell {
  display: grid;
  gap: 14px;
  max-height: min(88vh, 820px);
  min-width: 0;
  overflow: auto;
  padding: 22px;
  scrollbar-gutter: stable;
  width: 100%;
}

.account-dialog .dialog-heading {
  align-items: start;
  display: flex;
  justify-content: space-between;
}

.account-dialog .dialog-heading > div {
  min-width: 0;
}

.startup-login-dialog {
  max-width: min(92vw, 520px);
  width: 520px;
  /* The shell inside is the visible card; keep the dialog frame invisible so no
     mismatched band appears around the branded dark shell in light mode. */
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* The startup shell is intentionally dark in BOTH themes (branded first-run look),
   so its text must be pinned to light-on-dark constants — never theme tokens,
   which flip to dark ink in Plain Light and vanish (PROJECT_CONFORMANCE §5a). */
.startup-login-shell,
.startup-login-shell label,
.startup-login-copy .eyebrow {
  color: #aab4bd;
}
.startup-login-shell h2 {
  color: #f5f7f8 !important;
}
.startup-login-shell p:not(.eyebrow) {
  color: #aab4bd !important;
}
.startup-login-shell input {
  background: rgba(13, 17, 22, 0.8);
  border-color: rgba(92, 123, 142, 0.58);
  color: #f5f7f8;
}

.startup-login-shell {
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 90, 47, 0.18), transparent 32%),
    linear-gradient(135deg, rgba(30, 53, 65, 0.96), rgba(9, 14, 20, 0.98) 62%);
  border: 1px solid rgba(92, 123, 142, 0.58);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  display: grid;
  gap: 14px;
  padding: 24px;
}

.startup-login-mark {
  align-items: center;
  display: flex;
  justify-content: center;
}

/* .app-icon has no global rule, so the raw <img> would render at the PNG's
   natural size — pin BOTH the span and the img or the logo blows the card
   open (oversized logo + scrollbars). */
.mini-icon,
.mini-icon img {
  display: block;
  height: 54px;
  width: 54px;
}

.mini-icon img {
  border-radius: 12px;
  object-fit: contain;
}

.startup-login-dialog[open] {
  overflow: hidden;   /* no frame scrollbars — the card fits once the logo is pinned */
}

.startup-login-copy {
  text-align: center;
}

.startup-login-copy h2 {
  color: var(--ink);
  font-size: clamp(1.55rem, 4vw, 2.05rem);
  line-height: 1.05;
  margin: 4px 0 8px;
}

.startup-login-copy p:not(.eyebrow) {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.45;
  margin: 0 auto;
  max-width: 42rem;
}

.startup-login-fields {
  display: grid;
  gap: 11px;
}

/* the base .dialog-actions is a sticky themed footer band (white in Plain
   Light, via a body[data-theme] rule — match its specificity) with negative
   margins sized for the standard 22px dialogs. Inside the dark branded card
   it renders as a white strip around the buttons. Flatten it. */
.review-dialog.startup-login-dialog .dialog-actions,
body[data-theme="plain-light"] .startup-login-dialog .dialog-actions {
  background: transparent;
  border-top: 0;   /* the base row draws a light divider — the "white line" over the buttons */
  bottom: auto;
  justify-content: stretch;
  margin: 4px 0 0;
  padding: 0;
  position: static;
}

.startup-login-dialog .dialog-actions button {
  flex: 1 1 0;
}

/* Buttons inside the dark branded card: the base ghost/primary styles carry
   light-theme backgrounds/borders that read as a sloppy white sliver here —
   pin them to the shell's own palette (constants, not theme tokens). */
/* the status line under the fields is themed white — keep it transparent on
   the dark card so sign-in progress/errors don't paint a white strip */
.review-dialog.startup-login-dialog .generate-status,
body[data-theme="plain-light"] .startup-login-dialog .generate-status {
  background: transparent;
  border: 0;
}

.review-dialog.startup-login-dialog .ghost-button {
  background: rgba(13, 17, 22, 0.55);
  border: 1px solid rgba(92, 123, 142, 0.58);
  border-radius: 10px;
  color: #dfe7ec;
}

.review-dialog.startup-login-dialog .ghost-button:hover {
  background: rgba(92, 123, 142, 0.28);
  color: #ffffff;
}

.startup-login-dialog .primary-button {
  border: 0;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(230, 74, 25, 0.35);
}

.license-overview-card,
.license-form-card {
  background:
    linear-gradient(120deg, rgba(255, 90, 47, 0.1), transparent 42%, rgba(55, 183, 228, 0.1)),
    rgba(13, 17, 22, 0.72);
  border: 1px solid rgba(83, 97, 113, 0.58);
  border-radius: 10px;
  min-width: 0;
  padding: 16px;
}

.license-overview-card {
  align-items: center;
  display: flex;
  gap: 13px;
}

body[data-theme="plain-light"] .license-overview-card,
body[data-theme="plain-light"] .license-form-card {
  background: #ffffff;
  border-color: #b8c8d6;
  box-shadow: 0 1px 0 rgba(15, 32, 42, 0.04);
}

.license-detail-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.license-detail-grid > div {
  background: rgba(13, 17, 22, 0.72);
  border: 1px solid var(--line);
  border-radius: 9px;
  min-height: 76px;
  padding: 12px;
}

body[data-theme="plain-light"] .license-detail-grid > div {
  background: #f7fafc;
  border-color: #b8c8d6;
}

.license-detail-grid span {
  color: var(--muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.license-detail-grid strong {
  color: var(--ink);
  display: block;
  font-size: 0.95rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.license-helper-text {
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}

.advanced-license-token {
  background: rgba(7, 12, 17, 0.62);
  border: 1px solid rgba(83, 97, 113, 0.5);
  border-radius: 9px;
  margin-top: 12px;
  padding: 10px 12px;
}

body[data-theme="plain-light"] .advanced-license-token {
  background: #eef5f9;
  border-color: #b8c8d6;
}

.advanced-license-token summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.advanced-license-grid {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 10px;
}

.advanced-license-grid label {
  min-width: 0;
}

.beta-invite-panel[hidden] {
  display: none;
}

.beta-invite-panel textarea {
  min-height: 86px;
  resize: vertical;
}

.beta-invite-actions {
  margin-top: 12px;
}

.beta-invite-results {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
  min-height: 1.35em;
  overflow-wrap: anywhere;
}

.beta-invite-results[data-tone="success"] > p {
  color: var(--ok);
}

.beta-invite-results[data-tone="error"] > p {
  color: #ffb4a6;
}

.beta-invite-results ul {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 9px 0 0;
  padding: 0;
}

.beta-invite-results li {
  align-items: start;
  background: rgba(7, 12, 17, 0.48);
  border: 1px solid rgba(83, 97, 113, 0.55);
  border-radius: 8px;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
}

body[data-theme="plain-light"] .beta-invite-results li {
  background: #f7fafc;
  border-color: #b8c8d6;
}

body[data-theme="plain-light"] .beta-invite-results[data-tone="error"] > p {
  color: #9c2f22;
}

.beta-invite-results li[data-ok="true"] {
  border-color: rgba(64, 214, 139, 0.38);
}

.beta-invite-results li[data-ok="false"] {
  border-color: rgba(255, 90, 47, 0.55);
}

.beta-invite-results li strong {
  color: var(--ink);
}

.beta-invite-results li span {
  color: var(--muted);
}

.split-actions {
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

.split-actions > .inline-actions {
  min-width: 0;
}

.generate-status[data-tone="success"] {
  color: var(--ok);
}

.generate-status[data-tone="error"] {
  color: #ffb4a6;
}

.sign-in-result {
  margin-top: 12px;
  font-weight: 700;
  min-height: 1.3em;
  padding: 10px 12px;
  border-radius: 9px;
  background: transparent;
}
.sign-in-result[data-tone="success"] {
  background: rgba(61, 220, 151, 0.12);
  border: 1px solid rgba(61, 220, 151, 0.4);
}
.sign-in-result[data-tone="error"] {
  background: rgba(255, 90, 47, 0.12);
  border: 1px solid rgba(255, 90, 47, 0.4);
}

@media (max-width: 980px) {
  .license-pill {
    min-width: 0;
  }

  .license-detail-grid {
    grid-template-columns: 1fr;
  }
}

.dialog-field-action {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.checkbox-row {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.checkbox-row input[type="checkbox"] {
  accent-color: var(--accent);
  height: 18px;
  width: 18px;
}

.dialog-checkbox-row {
  background: rgba(55, 183, 228, 0.08);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 850;
  padding: 10px 12px;
  text-transform: none;
}

.plans-review-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.plans-review-panel {
  background: rgba(55, 183, 228, 0.05);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 12px;
}

.plans-suggestion-list {
  display: grid;
  gap: 8px;
}

.plan-suggestion-row {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) minmax(128px, auto);
  padding: 10px;
  scroll-margin: 96px;
}

.plan-suggestion-row.choice-row {
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr) minmax(128px, auto);
}

.plan-suggestion-row input[type="checkbox"] {
  accent-color: var(--accent);
  height: 18px;
  width: 18px;
}

.plan-suggestion-select {
  margin-top: 8px;
  max-width: min(760px, 100%);
  min-height: 38px;
}

.plan-suggestion-title {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 900;
}

.plan-suggestion-meta {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.plan-suggestion-badge {
  border: 1px solid rgba(55, 183, 228, 0.35);
  border-radius: 999px;
  color: var(--water);
  font-size: 0.72rem;
  font-weight: 900;
  padding: 5px 8px;
  text-transform: uppercase;
}

.plan-import-button {
  min-width: 132px;
  justify-self: end;
}

.duplicate-warning {
  background: #3b2519;
  border: 1px solid #b96731;
  border-radius: 6px;
  color: #ffc08a;
  display: grid;
  gap: 4px;
  font-size: 0.88rem;
  padding: 10px 12px;
}

.duplicate-warning[hidden] {
  display: none;
}

.duplicate-warning strong,
.duplicate-warning span {
  display: block;
}

.dialog-actions {
  background:
    linear-gradient(180deg, transparent, rgba(23, 29, 36, 0.96) 28%),
    rgba(23, 29, 36, 0.96);
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin: 2px -22px -22px;
  padding: 12px 22px 18px;
  position: sticky;
  z-index: 3;
}

body[data-theme="plain-light"] .dialog-actions {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(248, 251, 253, 0.98) 28%),
    #f8fbfd;
  border-top: 1px solid #d7e1e8;
}

.preview-dialog {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  color: var(--ink);
  height: min(90vh, 920px);
  margin: 0;
  padding: 0;
  width: min(92vw, 1040px);
}

.preview-dialog[open] {
  left: 50%;
  position: fixed;
  top: max(16px, 3vh);
  transform: translateX(-50%);
  z-index: 10000;
}

.preview-dialog::backdrop {
  background: rgba(5, 8, 12, 0.78);
}

.preview-dialog-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
}

.preview-dialog-heading {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255, 90, 47, 0.12), transparent 42%, rgba(55, 183, 228, 0.12)),
    var(--surface-soft);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 14px 16px;
}

.preview-dialog-heading h2 {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.25;
  max-width: 76ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-dialog iframe {
  background: #111820;
  border: 0;
  height: 100%;
  width: 100%;
}

.annotation-action-button {
  border-color: rgba(55, 183, 228, 0.62);
  color: #57c8ee;
}

body[data-theme="plain-light"] .annotation-action-button {
  border-color: #0f6c8e;
  color: #0d506b;
}

.pdf-annotation-dialog {
  background: #0b1118;
  border: 1px solid rgba(55, 183, 228, 0.35);
  border-radius: 10px;
  box-shadow: var(--shadow);
  color: var(--ink);
  height: min(96vh, 1120px);
  margin: 0;
  padding: 0;
  width: min(98vw, 1600px);
}

body[data-theme="plain-light"] .pdf-annotation-dialog {
  background: #ffffff;
  border-color: #b8c8d6;
}

.pdf-annotation-dialog[open] {
  left: 50%;
  position: fixed;
  top: max(10px, 2vh);
  transform: translateX(-50%);
  z-index: 10000;
}

.pdf-annotation-dialog::backdrop {
  background: rgba(4, 7, 10, 0.84);
}

.pdf-annotation-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.pdf-annotation-header {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255, 90, 47, 0.16), transparent 42%, rgba(55, 183, 228, 0.18)),
    #172633;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 14px 16px;
}

body[data-theme="plain-light"] .pdf-annotation-header {
  background:
    linear-gradient(90deg, rgba(190, 61, 42, 0.06), transparent 42%, rgba(15, 108, 142, 0.08)),
    #f8fbfd;
  border-bottom-color: #d7e1e8;
}

.pdf-annotation-header h2 {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.25;
  margin-top: 4px;
  max-width: 92ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-annotation-header span {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 850;
  margin-top: 5px;
}

.pdf-annotation-header span[data-status="success"] {
  color: #80e8a0;
}

body[data-theme="plain-light"] .pdf-annotation-header span[data-status="success"] {
  color: #176d49;
}

.pdf-annotation-header span[data-status="error"] {
  color: #ffaaa3;
}

body[data-theme="plain-light"] .pdf-annotation-header span[data-status="error"] {
  color: #9c2f22;
}

.pdf-annotation-toolbar {
  align-items: center;
  background: rgba(10, 16, 22, 0.96);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  position: sticky;
  top: 0;
  z-index: 5;
}

body[data-theme="plain-light"] .pdf-annotation-toolbar {
  background: #f8fbfd;
  border-bottom-color: #d7e1e8;
}

.annotation-tool-button {
  background: #101923;
  border: 1px solid #405367;
  border-radius: 6px;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 950;
  min-height: 32px;
  padding: 0 11px;
}

body[data-theme="plain-light"] .annotation-tool-button {
  background: #ffffff;
  border-color: #9fb1c0;
  color: #16202a;
}

.annotation-tool-button.active,
.annotation-tool-button.save-button {
  background: linear-gradient(135deg, #ff5a2f, #ff9d2f);
  border-color: #ff9d2f;
  color: #fff;
}

body[data-theme="plain-light"] .annotation-tool-button.active,
body[data-theme="plain-light"] .annotation-tool-button.save-button {
  background: #be3d2a;
  border-color: #8f2d22;
  color: #ffffff;
}

.annotation-tool-button:disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.45;
}

.annotation-color-control {
  align-items: center;
  background: #101923;
  border: 1px solid #405367;
  border-radius: 6px;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 950;
  gap: 7px;
  min-height: 32px;
  padding: 0 8px;
  text-transform: uppercase;
}

body[data-theme="plain-light"] .annotation-color-control {
  background: #ffffff;
  border-color: #9fb1c0;
  color: #4f6070;
}

.annotation-color-control input {
  background: transparent;
  border: 0;
  cursor: pointer;
  height: 22px;
  padding: 0;
  width: 30px;
}

.toolbar-divider {
  background: rgba(255, 255, 255, 0.12);
  display: inline-block;
  height: 28px;
  width: 1px;
}

body[data-theme="plain-light"] .toolbar-divider {
  background: #cbd6df;
}

#pdfAnnotationZoomLabel {
  color: var(--muted);
  font-size: 0.76rem;
  min-width: 42px;
  text-align: center;
}

body[data-theme="plain-light"] #pdfAnnotationZoomLabel {
  color: #4f6070;
}

.pdf-annotation-workspace {
  align-content: flex-start;
  background:
    linear-gradient(135deg, rgba(55, 183, 228, 0.08), transparent 42%),
    #101820;
  display: grid;
  gap: 22px;
  justify-items: center;
  overflow: auto;
  padding: 24px;
}

body[data-theme="plain-light"] .pdf-annotation-workspace {
  background:
    linear-gradient(#dbe5ed 1px, transparent 1px),
    linear-gradient(90deg, #dbe5ed 1px, transparent 1px),
    #eef4f8;
  background-size: 34px 34px, 34px 34px, auto;
}

.annotation-loading {
  align-self: start;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-weight: 900;
  padding: 18px 22px;
}

body[data-theme="plain-light"] .annotation-loading {
  background: #ffffff;
  border-color: #b8c8d6;
  color: #4f6070;
}

.annotation-page {
  background: #fff;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42);
  position: relative;
}

body[data-theme="plain-light"] .annotation-page {
  box-shadow: 0 14px 34px rgba(36, 52, 68, 0.2);
}

.annotation-pdf-canvas,
.annotation-layer-canvas {
  inset: 0;
  position: absolute;
}

.annotation-layer-canvas {
  cursor: crosshair;
  z-index: 2;
}

.pdf-annotation-dialog:has(.annotation-tool-button[data-annotation-tool="select"].active) .annotation-layer-canvas {
  cursor: default;
}

@media (max-width: 1120px) {
  .tool-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .preview-panel {
    order: initial;
  }

  .catalog-browser {
    grid-template-columns: 1fr;
  }

  .category-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: none;
  }

  .catalog-item,
  .catalog-item.database-item {
    grid-template-columns: auto minmax(0, 1fr) minmax(220px, max-content);
    overflow: visible;
  }

  .catalog-item.remote-item {
    min-height: 50px;
  }

  .catalog-item input[type="checkbox"] {
    grid-row: 1 / span 2;
  }

  .catalog-actions {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-start;
    max-width: none;
  }

  .remote-actions {
    justify-content: flex-start;
  }

  .catalog-item > .toc-title-editor {
    grid-column: 2 / 4;
    grid-row: 3;
  }

  .common-code-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body {
    overflow-x: hidden;
  }

  .app-shell {
    padding: 10px 0 104px;
    width: min(100% - 16px, 1680px);
  }

  .topbar {
    align-items: stretch;
    border-radius: 10px;
    flex-direction: column;
    gap: 14px;
    padding: 13px;
  }

  .brand-lockup {
    align-items: flex-start;
    gap: 10px;
  }

  .brand-mark {
    border-radius: 8px;
    height: 42px;
    width: 42px;
  }

  h1 {
    font-size: 1.55rem;
    line-height: 1;
  }

  .common-code-section-grid,
  .code-language-grid {
    grid-template-columns: 1fr;
  }

  .eyebrow {
    font-size: 0.66rem;
    line-height: 1.2;
    margin-bottom: 5px;
  }

  .top-actions {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .top-actions select,
  .top-actions .primary-button {
    grid-column: 1 / -1;
  }

  .top-actions select {
    min-width: 0;
  }

  .app-top-actions {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .license-pill,
  .theme-control,
  .view-mode-toggle {
    min-width: 0;
    width: 100%;
  }

  .license-pill,
  .view-mode-toggle {
    grid-column: 1 / -1;
  }

  .app-refresh-button {
    min-width: 0;
    width: 100%;
  }

  .theme-control select {
    min-width: 0;
  }

  .tool-shell {
    flex-direction: column;
  }

  .tool-tabs {
    width: auto;
    flex: 0 0 auto;
    position: static;
    max-height: none;
    gap: 3px;
  }

  .tool-tab {
    flex: 0 0 auto;
    min-height: 0;
  }

  .tool-placeholder-panel {
    min-height: 280px;
    padding: 22px;
  }

  .calculator-hero {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .calculator-grid,
  .layout-generator-grid,
  .bracing-generator-grid,
  .pdf-merge-grid,
  .hydraulic-package-grid,
  .feet-calculator-grid,
  .code-converter-grid,
  .nfpa1142-grid,
  .spacing-dimension-grid {
    grid-template-columns: 1fr;
  }

  .hydraulic-package-grid .hydraulic-info-section,
  .hydraulic-package-grid .hydraulic-workspace-section,
  .hydraulic-package-grid .submittal-cart-section {
    grid-column: 1;
    grid-row: auto;
  }

  .layout-diagram-shell,
  .bracing-diagram-shell,
  .water-chart-shell,
  #bracingDiagram,
  #layoutDiagram,
  #waterChart {
    min-height: 360px;
  }

  .water-supply-grid,
  .water-site-section,
  .water-pressure-section,
  .water-flow-section,
  .water-results-section,
  .water-chart-section,
  .water-math-section {
    grid-column: 1;
    grid-row: auto;
  }

  .water-supply-grid,
  .water-result-grid,
  .water-math-panel {
    grid-template-columns: 1fr;
  }

  .water-supply-grid {
    grid-template-areas:
      "site"
      "pressure"
      "flow"
      "results"
      "graph"
      "math";
  }

  .water-demand-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .water-hero-actions {
    justify-content: flex-start;
  }

  button,
  input,
  select,
  textarea {
    font-size: 16px;
    min-height: 44px;
  }

  .primary-button,
  .secondary-button,
  .ghost-button {
    min-height: 44px;
    padding: 0 12px;
  }

  .workspace {
    gap: 12px;
  }

  .builder-panel {
    gap: 10px;
    grid-template-columns: 1fr;
  }

  .builder-panel .panel-section:nth-child(n),
  .builder-panel > .preview-panel {
    grid-column: 1;
    grid-row: auto;
  }

  .contractor-section .logo-paste-drop {
    margin: 10px 0;
  }

  .preview-panel {
    order: initial;
  }

  .panel-section {
    border-radius: 8px;
    padding: 12px;
  }

  .section-heading,
  .image-intake,
  .datasheet-drop,
  .preview-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .section-heading {
    gap: 9px;
  }

  .inline-actions {
    justify-content: flex-start;
  }

  .project-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-grid.two,
  .field-grid.three,
  .hydraulic-meta-grid,
  .cover-grid {
    grid-template-columns: 1fr;
  }

  .logo-paste-drop {
    grid-template-columns: 76px minmax(0, 1fr);
    min-height: 82px;
  }

  .logo-preview-box {
    height: 58px;
  }

  .catalog-browser {
    gap: 10px;
    min-height: 0;
  }

  .category-rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px;
    scroll-snap-type: x proximity;
  }

  .category-tab {
    flex: 0 0 172px;
    grid-template-columns: 16px minmax(0, 1fr);
    min-height: 62px;
    scroll-snap-align: start;
  }

  .category-tab-count {
    grid-column: 2;
    text-align: left;
  }

  .catalog-panel-header {
    align-items: stretch;
    gap: 10px;
    grid-template-columns: 1fr;
    padding: 11px;
  }

  .search-scope-note {
    justify-self: start;
  }

  .catalog-filters,
  .catalog-filters:not(.sprinkler-filters) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .catalog-filter-controls {
    grid-template-columns: 1fr;
  }

  .catalog-filter select {
    min-height: 44px;
  }

  .catalog-results {
    max-height: 68vh;
    padding: 9px;
  }

  .catalog-item,
  .catalog-item.database-item {
    gap: 9px;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 54px;
    overflow: visible;
    padding: 10px;
  }

  .catalog-item.remote-item {
    min-height: 54px;
  }

  .catalog-item:has(.toc-title-editor) {
    min-height: 190px;
  }

  .catalog-title {
    font-size: 0.96rem;
  }

  .catalog-actions {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
    max-width: none;
  }

  .catalog-actions .small-button,
  .icon-button {
    min-height: 36px;
  }

  .icon-button {
    width: 38px;
  }

  .catalog-item > .toc-title-editor {
    grid-column: 2;
    grid-row: 3;
  }

  .catalog-item > .toc-title-editor input {
    font-size: 16px;
    min-height: 44px;
  }

  .preview-toolbar {
    gap: 10px;
    padding: 12px;
  }

  .preview-toolbar strong {
    max-width: 100%;
    white-space: normal;
  }

  .document-preview {
    gap: 12px;
    grid-template-columns: 1fr;
    padding-bottom: 14px;
  }

  .builder-panel > .preview-panel .document-preview {
    grid-template-columns: 1fr;
  }

  .sheet {
    aspect-ratio: auto;
    max-width: 100%;
    min-height: auto;
    overflow: hidden;
    padding: 28px 22px 34px;
    width: 100%;
  }

  .generate-dock {
    bottom: 10px;
    left: 8px;
    max-width: none;
    padding: 8px;
    transform: none;
    width: calc(100% - 16px);
  }

  .generate-dock-button {
    min-width: 0;
    width: 100%;
  }

  .cover-preview-header {
    min-height: 96px;
    padding: 26px 26px 18px;
  }

  .cover-preview-header h2 {
    font-size: 1.45rem;
  }

  .cover-preview-main {
    gap: 14px;
    grid-template-columns: 1fr;
    padding: 28px 26px 0;
  }

  .cover-preview-contractor {
    justify-self: stretch;
    width: 100%;
  }

  .preview-dialog,
  .review-dialog {
    max-height: 92vh;
    width: calc(100vw - 18px);
  }

  .preview-dialog-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .preview-dialog-heading h2 {
    max-width: 100%;
    white-space: normal;
  }

  .toc-row.item {
    margin-left: 12px;
  }
}

@media (max-width: 430px) {
  .app-shell {
    width: min(100% - 12px, 1680px);
  }

  .catalog-filters,
  .catalog-filters:not(.sprinkler-filters) {
    grid-template-columns: 1fr;
  }

  .category-tab {
    flex-basis: 156px;
  }

  .logo-paste-drop {
    grid-template-columns: 1fr;
  }

  .logo-preview-box {
    width: 100%;
  }

  .project-actions {
    grid-template-columns: 1fr;
  }
}

body[data-theme="plain-light"] .calculator-hero {
  background: #ffffff;
  border-color: #b9c8d4;
  box-shadow: var(--shadow);
}

body[data-theme="plain-light"] .calculator-hero h2 {
  color: #16202a;
}

body[data-theme="plain-light"] .calculator-result-card,
body[data-theme="plain-light"] .flow-result-card,
body[data-theme="plain-light"] .feet-result-card,
body[data-theme="plain-light"] .water-result-card {
  background: #f7fafc;
  border-color: #b9c8d4;
}

body[data-theme="plain-light"] .calculator-result-card span,
body[data-theme="plain-light"] .calculator-result-card strong {
  color: #16202a;
}

body[data-theme="plain-light"] .calculator-result-card span,
body[data-theme="plain-light"] .formula-chip,
body[data-theme="plain-light"] .calculator-status {
  color: #405366;
}

body[data-theme="plain-light"] .segmented-control {
  background: #eef4f8;
  border-color: #b9c8d4;
}

body[data-theme="plain-light"] .segmented-control span {
  color: #405366;
}

body[data-theme="plain-light"] .segmented-control input:checked + span {
  background: #be3d2a;
  color: #ffffff;
}

body[data-theme="plain-light"] .formula-chip,
body[data-theme="plain-light"] .layout-result-lines,
body[data-theme="plain-light"] .water-flow-card,
body[data-theme="plain-light"] .water-demand-row,
body[data-theme="plain-light"] .water-math-panel div,
body[data-theme="plain-light"] .pdf-options-panel,
body[data-theme="plain-light"] .pdf-compression-progress,
body[data-theme="plain-light"] .feet-help-list div,
body[data-theme="plain-light"] .scale-chart-wrap,
body[data-theme="plain-light"] .common-code-reference-row,
body[data-theme="plain-light"] .code-result-card,
body[data-theme="plain-light"] .common-code-section-grid > div,
body[data-theme="plain-light"] .code-language-panel,
body[data-theme="plain-light"] .empty-state,
body[data-theme="plain-light"] .empty-preview,
body[data-theme="plain-light"] pre,
body[data-theme="plain-light"] .source-item,
body[data-theme="plain-light"] .reference-grid span,
body[data-theme="plain-light"] .preview-selected-values,
body[data-theme="plain-light"] .curve-card,
body[data-theme="plain-light"] .nfpa1142-report-shell {
  background: #f7fafc;
  border-color: #c2d0dc;
  color: #16202a;
}

body[data-theme="plain-light"] .layout-diagram-shell,
body[data-theme="plain-light"] .bracing-diagram-shell,
body[data-theme="plain-light"] .water-chart-shell,
body[data-theme="plain-light"] .storage-analysis-frame,
body[data-theme="plain-light"] #nfpa1142ReportSvg {
  background: #f7fafc;
  border-color: #b9c8d4;
}

body[data-theme="plain-light"] .layout-stage,
body[data-theme="plain-light"] .water-chart-bg,
body[data-theme="plain-light"] .nfpa1142-empty-bg {
  fill: #f7fafc;
}

body[data-theme="plain-light"] .layout-area-rect {
  fill: #ffffff;
  stroke: #405366;
}

body[data-theme="plain-light"] .layout-head-dot {
  fill: #16202a;
}

body[data-theme="plain-light"] .layout-arrow,
body[data-theme="plain-light"] .layout-dim-label,
body[data-theme="plain-light"] .layout-axis-title,
body[data-theme="plain-light"] .layout-legend,
body[data-theme="plain-light"] .brace-marker text,
body[data-theme="plain-light"] .water-axis-text,
body[data-theme="plain-light"] .water-axis-title,
body[data-theme="plain-light"] .water-demand-label,
body[data-theme="plain-light"] .water-chart-title,
body[data-theme="plain-light"] .water-chart-empty {
  fill: #16202a;
}

body[data-theme="plain-light"] .layout-dim-line,
body[data-theme="plain-light"] .bracing-end-line,
body[data-theme="plain-light"] .brace-marker line,
body[data-theme="plain-light"] .brace-marker path {
  stroke: #405366;
}

body[data-theme="plain-light"] .water-grid-line {
  stroke: rgba(64, 83, 102, 0.22);
}

body[data-theme="plain-light"] .water-plot-border {
  stroke: rgba(64, 83, 102, 0.78);
}

body[data-theme="plain-light"] .pdf-merge-workspace-section,
body[data-theme="plain-light"] .hydraulic-workspace-section {
  background: #ffffff;
  border-color: #b9c8d4;
  outline-color: rgba(15, 108, 142, 0.18);
}

body[data-theme="plain-light"] .pdf-merge-workspace-section.drag-over,
body[data-theme="plain-light"] .hydraulic-workspace-section.drag-over {
  background: #e7f3f8;
  border-color: #0f6c8e;
  box-shadow: inset 0 0 0 1px rgba(15, 108, 142, 0.22), 0 12px 28px rgba(36, 52, 68, 0.14);
}

body[data-theme="plain-light"] .pdf-merge-list:empty::before,
body[data-theme="plain-light"] .hydraulic-list:empty::before {
  background: #f4f8fb;
  border-color: #9fb1c0;
  color: #405366;
}

body[data-theme="plain-light"] .pdf-options-panel,
body[data-theme="plain-light"] .pdf-compression-option,
body[data-theme="plain-light"] .pdf-merge-item,
body[data-theme="plain-light"] .hydraulic-item {
  background: #f4f8fb;
  border-color: #b9c8d4;
}

body[data-theme="plain-light"] .pdf-compression-option.active {
  background: #fff3ed;
  border-color: #be3d2a;
  box-shadow: inset 0 0 0 1px rgba(190, 61, 42, 0.18);
}

body[data-theme="plain-light"] .pdf-compression-option.active strong {
  color: #8f2d22;
}

body[data-theme="plain-light"] .pdf-merge-preview {
  background: #e6edf3;
}

body[data-theme="plain-light"] .pdf-merge-actions .icon-button {
  background: #ffffff;
  border-color: #b9c8d4;
}

body[data-theme="plain-light"] .scale-chart-table th {
  background: #e6edf3;
  color: #7f4a00;
}

body[data-theme="plain-light"] .scale-chart-table td:first-child,
body[data-theme="plain-light"] .scale-chart-table tbody tr.is-highlighted td,
body[data-theme="plain-light"] .scale-chart-table tbody tr.is-highlighted td:first-child {
  color: #16202a;
}

body[data-theme="plain-light"] .scale-chart-table tbody tr:nth-child(even) {
  background: #f4f8fb;
}

body[data-theme="plain-light"] .scale-chart-table tbody tr.is-highlighted {
  background: #fff3d7;
}

body[data-theme="plain-light"] .common-code-reference-row:hover,
body[data-theme="plain-light"] .common-code-reference-row:focus-within {
  background: #eef4f8;
  border-color: #be3d2a;
}

body[data-theme="plain-light"] .code-language-panel p,
body[data-theme="plain-light"] pre {
  color: #16202a;
}

body[data-theme="plain-light"] .source-note {
  border-top-color: #c2d0dc;
  color: #405366;
}

body[data-theme="plain-light"] .criteria-notes,
body[data-theme="plain-light"] .source-item span,
body[data-theme="plain-light"] .reference-grid span,
body[data-theme="plain-light"] .pdf-merge-copy span {
  color: #405366;
}

body[data-theme="plain-light"] tr.best-row {
  background: #eaf6ef;
  outline-color: #9bcfb3;
}

body[data-theme="plain-light"] tbody tr[data-candidate-id]:hover,
body[data-theme="plain-light"] tbody tr[data-candidate-id]:focus {
  background: #e7f3f8;
  outline-color: #9db7c9;
}

@media print {
  body {
    background: #fff;
  }

  .topbar,
  .tool-tabs,
  .tool-placeholder-panel,
  .generate-dock,
  .builder-panel,
  .preview-toolbar,
  .water-hero-actions,
  .water-chart-section .inline-actions {
    display: none;
  }

  .app-shell {
    padding: 0;
    width: 100%;
  }

  .workspace {
    display: block;
  }

  .document-preview {
    display: block;
    padding: 0;
  }

  .sheet {
    border: 0;
    box-shadow: none;
    break-after: page;
    height: 11in;
    margin: 0;
    max-width: none;
    min-height: 11in;
    page-break-after: always;
    width: 8.5in;
  }
}

/* App-level toast notifications (client error notices etc.) */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(560px, calc(100vw - 40px));
  padding: 12px 16px;
  background: var(--surface-lift);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: 0.92rem;
  z-index: 4000;
}

.app-toast-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}

.app-toast-close:hover {
  color: var(--ink);
}

body[data-theme="plain-light"] .app-toast {
  background: #ffffff;
  color: #16202a;
  border-color: #c2ccd6;
}

.debug-reset-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--muted);
  margin: 8px 0;
}

.debug-reset-confirm input {
  width: 110px;
  text-transform: uppercase;
}

.danger-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.unsaved-indicator {
  align-self: center;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

body[data-theme="plain-light"] .unsaved-indicator {
  color: #b3641a;
}

.output-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 0;
}

.output-actions[hidden] {
  display: none;
}

.output-actions-label {
  color: var(--muted);
  font-size: 0.82rem;
}

.update-pill {
  border: 1px solid var(--ok);
  background: rgba(61, 220, 151, 0.12);
  color: var(--ok);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.update-pill:hover {
  background: rgba(61, 220, 151, 0.22);
}

body[data-theme="plain-light"] .update-pill {
  border-color: #1d8a5f;
  background: #e7f7ef;
  color: #156947;
}

/* Tabbed Account dialog */
.account-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  margin: 4px 0 14px;
}

.account-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.account-tab:hover {
  color: var(--ink);
}

.account-tab.active {
  color: var(--ink);
  border-bottom-color: var(--brand);
}

.account-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.account-tab-panel[hidden] {
  display: none;
}

.account-updates-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.account-updates-card > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-updates-card span {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.account-status-line {
  min-height: 1.2em;
  margin: 10px 0 0;
}

body[data-theme="plain-light"] .account-updates-card {
  background: #f4f7fa;
  border-color: #c9d3dc;
}

/* ---- Plan Reviewer (premium) ---- */
.pr-editions { display: grid; gap: 10px; margin: 4px 0 14px; }
.pr-editions-title { margin: 0; font-weight: 600; }
.pr-edition-opt { display: flex; align-items: center; gap: 10px; }
.pr-edition-opt > span { flex: 1; }
.pr-edition-opt input[type="checkbox"] { flex: 0 0 auto; width: auto; }
.pr-edition-opt select { width: auto; min-width: 92px; }
.field-hint { font-weight: 400; opacity: 0.7; font-size: 0.85em; }

.privacy-tip { position: relative; display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--water, #37b7e4); cursor: help; border-bottom: 1px dotted var(--water, #37b7e4); }
.privacy-tip::before { content: "\1F512"; font-size: 0.85em; }
.privacy-pop { position: absolute; top: calc(100% + 8px); right: 0; width: 290px; max-width: 78vw; background: var(--surface, #ffffff); border: 1px solid var(--line, #2d3742); border-radius: 9px; padding: 11px 13px; font-size: 0.78rem; font-weight: 400; line-height: 1.5; color: var(--ink, #f5f7f8); text-transform: none; letter-spacing: 0; box-shadow: 0 14px 34px rgba(0,0,0,0.45); z-index: 60; opacity: 0; visibility: hidden; transition: opacity 0.12s; pointer-events: none; }
.privacy-tip:hover .privacy-pop, .privacy-tip:focus .privacy-pop, .privacy-tip:focus-within .privacy-pop { opacity: 1; visibility: visible; }
.pr-privacy-note { font-size: 0.82rem; color: var(--muted, #aab4bd); line-height: 1.5; margin: 6px 0 14px; padding: 11px 13px; border: 1px solid var(--line, #2d3742); border-left: 3px solid var(--water, #37b7e4); border-radius: 8px; background: rgba(55, 183, 228, 0.06); }
.pr-privacy-note strong { color: var(--ink, #f5f7f8); }
.pr-upload-zones { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0; }
@media (min-width: 720px) { .pr-upload-zones { grid-template-columns: 1fr 1fr 1fr; } }
.pr-upload {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  border: 1px dashed var(--line-strong); border-radius: 12px; padding: 14px 14px 16px;
  background: var(--surface-soft); cursor: pointer; transition: border-color .15s, background .15s;
}
.pr-upload:hover, .pr-upload:focus-visible { border-color: var(--accent); outline: none; background: var(--surface-lift); }
.pr-upload strong { font-size: .92rem; color: var(--ink); }
.pr-upload.has-file { border-style: solid; border-color: var(--ok); }
.pr-file { font-size: .78rem; color: var(--muted); word-break: break-word; }
.pr-upload.has-file .pr-file { color: var(--ink); }
.pr-upload .hidden-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.pr-processing { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; padding: 6px 0; }
.pr-spinner { width: 16px; height: 16px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: pr-spin .7s linear infinite; }
@keyframes pr-spin { to { transform: rotate(360deg); } }

.pr-comments-head { display: flex; align-items: center; gap: 8px; }
.pr-comments { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.pr-comment { border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 11px 13px; background: var(--surface-soft); }
.pr-comment-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pr-pc { font: 800 .82rem "Space Grotesk", sans-serif; color: var(--ink); }
.pr-comment-title { font-weight: 700; color: var(--ink); }
.pr-comment-loc { font-size: .76rem; color: var(--muted); }
.pr-comment-body { margin: 5px 0 0; font-size: .88rem; color: var(--ink); line-height: 1.45; }
.pr-comment-refs { margin-top: 6px; font-size: .76rem; color: var(--muted); }
.pr-sev { font: 700 .66rem Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-left: auto; }
.pr-sev-critical, .pr-sev-major { background: rgba(255,90,47,.16); color: var(--brand); }
.pr-sev-minor, .pr-sev-moderate { background: rgba(255,176,58,.16); color: var(--accent); }
.pr-sev-info, .pr-sev-note { background: rgba(55,183,228,.16); color: var(--water); }
.pr-comment.sev-critical, .pr-comment.sev-major { border-left-color: var(--brand); }
.pr-comment.sev-minor, .pr-comment.sev-moderate { border-left-color: var(--accent); }
.pr-comment.sev-info, .pr-comment.sev-note { border-left-color: var(--water); }
.pr-conf { font-size: .72rem; color: var(--muted); }

.pr-artifacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pr-artifact { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--surface-soft); color: var(--ink); border-radius: 10px; padding: 9px 13px; font: 600 .84rem Inter, sans-serif; cursor: pointer; }
.pr-artifact:hover { border-color: var(--accent); }
.pr-artifact:disabled { opacity: .5; cursor: default; }

/* ------------------------------------------------------------------ */
/* Bid Estimator                                                       */
/* ------------------------------------------------------------------ */
.estimator-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1080px) {
  .estimator-grid { grid-template-columns: minmax(0, 1fr); }
}
.estimator-builder { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.estimator-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}
.estimator-field-grid label,
.estimator-block-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font: 700 0.74rem Inter, sans-serif;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.estimator-span-2 { grid-column: 1 / -1; }
.estimator-field-grid input,
.estimator-block-label textarea,
.estimator-section-card input,
.estimator-section-card select,
.estimator-line-item input,
.estimator-item-row input {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: 600 0.92rem Inter, sans-serif;
  padding: 8px 10px;
  width: 100%;
}
.estimator-block-label textarea { resize: vertical; min-height: 56px; text-transform: none; }
.estimator-field-grid input:focus,
.estimator-section-card input:focus,
.estimator-section-card select:focus,
.estimator-block-label textarea:focus { border-color: var(--accent); outline: none; }

.estimator-hint, .estimator-summary-hint {
  color: var(--muted);
  font: 500 0.8rem Inter, sans-serif;
}
.estimator-hint { margin: 12px 0 0; }
.estimator-summary-hint { font-weight: 500; text-transform: none; letter-spacing: 0; }

.estimator-rates summary {
  cursor: pointer;
  color: var(--accent);
  font: 900 0.8rem Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  list-style: revert;
}
.estimator-rates[open] summary { margin-bottom: 12px; }
.estimator-rates .section-heading { margin-top: 14px; }

/* Progressive disclosure: advanced vs simple */
.estimator-advanced-only { display: none; }
.estimator-panel.estimator-advanced .estimator-advanced-only { display: block; }
.estimator-panel.estimator-advanced .estimator-simple-only { display: none; }

/* Quick mode + phase-2 estimator features */
.estimator-quick-only { display: none; }
.estimator-panel.estimator-mode-quick .estimator-quick-only { display: block; }
.estimator-panel.estimator-mode-quick .estimator-detailed-only { display: none; }
.estimator-quick-heads-only { display: none; }
.estimator-panel.estimator-quick-heads .estimator-quick-heads-only { display: block; }
.estimator-panel.estimator-quick-heads .estimator-quick-sqft-only { display: none; }

.estimator-modebar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 14px; }
.estimator-segmented { display: inline-flex; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 3px; }
.estimator-seg-btn { border: 0; background: transparent; color: var(--muted); font: 700 0.9rem Inter, sans-serif; padding: 9px 16px; border-radius: 9px; cursor: pointer; }
.estimator-seg-btn.active { background: var(--accent); color: #1a0d06; }
/* In light mode --accent is a dark brown, so the on-accent text must be light. */
body[data-theme="plain-light"] .estimator-seg-btn.active { color: #fff; }
.estimator-modebar-hint { margin: 0; flex: 1; min-width: 220px; }
.estimator-quick-basis { margin-bottom: 12px; }
.estimator-quick-card .estimator-field-grid input,
.estimator-quick-card .estimator-field-grid select { font-size: 1.05rem; }

.estimator-sanity { color: var(--water); font: 700 0.92rem Inter, sans-serif; font-variant-numeric: tabular-nums; margin: 8px 0 2px; }
.estimator-sanity:empty { display: none; }
.estimator-round-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 600 0.82rem Inter, sans-serif; color: var(--muted); margin: 8px 0; }
.estimator-round-row select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.estimator-warnings { display: none; flex-direction: column; gap: 5px; margin: 4px 0 8px; }
.estimator-warnings.active { display: flex; }
.estimator-warning { background: rgba(255, 176, 58, 0.12); border: 1px solid rgba(255, 176, 58, 0.35); color: var(--accent); border-radius: 9px; padding: 7px 10px; font: 600 0.8rem Inter, sans-serif; }

.estimator-saved summary { cursor: pointer; font: 700 0.92rem Inter, sans-serif; }
.estimator-saved-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.estimator-saved-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--surface-soft); flex-wrap: wrap; }
.estimator-saved-meta { display: flex; flex-direction: column; min-width: 0; }
.estimator-saved-meta strong { color: var(--ink); }
.estimator-saved-meta span { color: var(--muted); font-size: 0.76rem; }
.estimator-saved-actions { display: flex; gap: 6px; }

.estimator-dropzone { border: 2px dashed var(--line-strong); border-radius: 14px; padding: 22px 16px; text-align: center; cursor: pointer; background: var(--surface-soft); display: flex; flex-direction: column; gap: 4px; align-items: center; transition: border-color 0.15s, background 0.15s; }
.estimator-dropzone:hover, .estimator-dropzone:focus-visible, .estimator-dropzone.dragover { border-color: var(--accent); background: var(--surface-lift); outline: none; }
.estimator-dropzone-icon { font-size: 30px; line-height: 1; }
.estimator-dropzone strong { color: var(--ink); font-size: 1rem; }
.estimator-dropzone span { color: var(--muted); font-size: 0.82rem; max-width: 42ch; }
.estimator-intake-extras { display: none; margin-top: 12px; }
.estimator-intake-extras.active { display: block; }
.estimator-intake-extras-head { font: 700 0.74rem Inter, sans-serif; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 7px; }
.estimator-intake-extras-head span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.estimator-intake-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.estimator-intake-chip { background: var(--surface-lift); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font: 700 0.82rem Inter, sans-serif; color: var(--ink); }

.estimator-headcount-result { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 8px 0 10px; }
.estimator-headcount-result strong { font: 900 1.6rem Inter, sans-serif; color: var(--water); font-variant-numeric: tabular-nums; }
.estimator-headcount-result span { color: var(--muted); font-size: 0.82rem; }

/* System section cards */
.estimator-sections { display: flex; flex-direction: column; gap: 12px; }
.estimator-section-card {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.estimator-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px auto;
  gap: 8px;
  align-items: center;
}
.estimator-section-name { font-weight: 800 !important; }
.estimator-remove-section { padding: 6px 10px; }
.estimator-mode-row { display: flex; flex-wrap: wrap; gap: 8px; }
.estimator-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font: 700 0.8rem Inter, sans-serif;
  color: var(--ink);
  cursor: pointer;
}
.estimator-radio input { accent-color: var(--accent); }

.estimator-items { display: flex; flex-direction: column; gap: 6px; }
.estimator-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 90px 32px;
  gap: 6px;
  align-items: center;
}
.estimator-item-head span {
  color: var(--muted);
  font: 700 0.68rem Inter, sans-serif;
  text-transform: uppercase;
}
.estimator-add-item { align-self: flex-start; }
.estimator-section-footer { border-top: 1px solid var(--line); padding-top: 8px; }
.estimator-section-cost { color: var(--muted); font: 600 0.78rem Inter, sans-serif; }

/* Inclusions / exclusions */
.estimator-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 720px) { .estimator-list-grid { grid-template-columns: minmax(0, 1fr); } }
.estimator-line-list { display: flex; flex-direction: column; gap: 6px; }
.estimator-line-item { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 6px; align-items: center; }

/* Summary / sticky total */
.estimator-summary { position: sticky; top: 12px; }
.estimator-summary-card {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow);
}
.estimator-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 800 0.82rem Inter, sans-serif;
  color: var(--ink);
  cursor: pointer;
  align-self: flex-start;
}
.estimator-switch input { accent-color: var(--accent); width: 16px; height: 16px; }
.estimator-breakdown { display: flex; flex-direction: column; gap: 4px; }
.estimator-breakdown-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 600 0.86rem Inter, sans-serif;
  color: var(--muted);
}
.estimator-breakdown-row span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }
.estimator-breakdown-row.strong { color: var(--ink); font-weight: 800; border-top: 1px solid var(--line); padding-top: 5px; margin-top: 3px; }
.estimator-total-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  background: linear-gradient(135deg, rgba(255, 90, 47, 0.22), rgba(255, 176, 58, 0.16)), var(--surface-soft);
  border: 1px solid rgba(255, 90, 47, 0.42);
  border-radius: 10px;
  padding: 12px 14px;
}
.estimator-total-bar span { color: var(--muted); font: 800 0.74rem Inter, sans-serif; text-transform: uppercase; letter-spacing: 0.03em; }
.estimator-total-bar strong { color: var(--ink); font: 900 1.6rem Inter, sans-serif; font-variant-numeric: tabular-nums; }
.estimator-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 0.82rem Inter, sans-serif;
  color: var(--muted);
  cursor: pointer;
}
.estimator-checkbox input { accent-color: var(--accent); }
#estimatorStatus { margin: 0; }
#estimatorStatus.active.success { color: var(--ok); }
#estimatorStatus.active.error { color: var(--brand); }

/* ===== Preliminary Calculation tool ===== */
.prelim-grid {
  align-items: stretch;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
}
@media (max-width: 1100px) { .prelim-grid { grid-template-columns: 1fr; } }
.prelim-input-card, .prelim-result-card { display: flex; flex-direction: column; min-height: 0; }
.prelim-input-card .section-heading { margin-top: 16px; }
.prelim-input-card .section-heading:first-of-type { margin-top: 0; }
.prelim-input-card .field-grid { margin-top: 8px; }
.field-grid.three.prelim-piping-2col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.prelim-hero-actions { align-items: center; display: flex; gap: 10px; }
.prelim-storage-hint { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-size: 0.8rem; gap: 8px; margin-top: 10px; }
.prelim-storage-link { padding: 6px 12px; }
.prelim-seg-field { display: flex; flex-direction: column; gap: 6px; }
.prelim-seg-label { color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.prelim-seg-field .segmented-control { width: 100%; }
.prelim-unit { color: var(--muted); font-size: 0.72rem; font-weight: 600; }
.prelim-optional { color: var(--muted); font-weight: 600; text-transform: none; }
.prelim-summary { color: var(--ink); font-size: 1rem; line-height: 1.5; margin: 4px 0 2px; }
.prelim-summary strong { color: var(--accent); }
.prelim-takeoff { color: var(--muted); display: block; font-size: 0.92rem; margin-top: 7px; }
.prelim-takeoff strong { color: var(--ink); }
.prelim-status { font-size: 0.92rem; font-weight: 700; margin: 12px 0 2px; }
.prelim-status.ok { color: var(--ok); }
.prelim-status.bad { color: #ff7a6c; }
.prelim-status.idle { color: var(--muted); font-weight: 500; }
body[data-theme="plain-light"] .prelim-status.bad { color: #b42318; }
.prelim-supply-area { align-items: center; display: flex; flex: 1 1 0; flex-direction: column; justify-content: center; min-height: 150px; overflow: hidden; padding: 6px 0; }
.prelim-supply-empty { color: var(--muted); font-size: 0.82rem; line-height: 1.5; max-width: 38ch; text-align: center; }
/* Fill the flexible supply-area so the chart absorbs the column's slack exactly
   (no fixed height to over/undershoot); preserveAspectRatio keeps it undistorted. */
.prelim-chart { height: 100%; margin: 0; min-height: 0; max-width: 100%; width: auto; }
.prelim-breakdown { border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; margin-top: 10px; }
.prelim-row { align-items: baseline; border-bottom: 1px solid var(--line); display: flex; gap: 14px; justify-content: space-between; padding: 7px 2px; }
.prelim-row.total { grid-column: 1 / -1; }
.prelim-row-l { color: var(--ink); font-size: 0.9rem; }
.prelim-row-sub { color: var(--muted); display: block; font-size: 0.72rem; margin-top: 2px; }
.prelim-row-v { color: var(--ink); font-size: 0.95rem; font-weight: 700; white-space: nowrap; }
.prelim-row.total .prelim-row-l { font-weight: 800; }
.prelim-row.total .prelim-row-v { color: var(--accent); font-weight: 800; }
.prelim-warn { color: var(--accent); font-size: 0.82rem; line-height: 1.4; margin-top: 10px; }
.prelim-src { color: var(--muted); font-size: 0.72rem; line-height: 1.4; margin-top: 8px; }
.prelim-disclaimer { color: var(--muted); font-size: 0.78rem; line-height: 1.45; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.prelim-disclaimer strong { color: var(--ink); }
.prelim-netsolve { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.prelim-netnote { color: var(--muted); font-size: 0.74rem; line-height: 1.45; margin: 8px 0 0; }
.prelim-net { margin-top: 12px; }
.prelim-netgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.prelim-netcell { border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; }
.prelim-netcell .nl { color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.prelim-netcell .nv { color: var(--ink); font-size: 1.05rem; font-weight: 800; }
.prelim-netcell .ns { color: var(--muted); font-size: 0.7rem; line-height: 1.3; }
.prelim-netcompare { color: var(--ink); font-size: 0.82rem; line-height: 1.5; margin: 12px 0 0; }
.prelim-netsupply { border-radius: 8px; font-size: 0.85rem; font-weight: 600; line-height: 1.45; margin: 10px 0 0; padding: 10px 12px; }
.prelim-netsupply.ok { background: rgba(31, 157, 87, 0.1); border: 1px solid rgba(31, 157, 87, 0.35); color: #1f7a48; }
.prelim-netsupply.bad { background: rgba(192, 57, 43, 0.08); border: 1px solid rgba(192, 57, 43, 0.35); color: #b5362a; }
.prelim-fieldnote { color: var(--muted); font-size: 0.74rem; line-height: 1.4; margin: 6px 0 0; }
.prelim-locked { opacity: 0.6; cursor: not-allowed; }
.prelim-sizing { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 14px; }
.prelim-sizing-head { color: var(--ink); font-size: 0.82rem; font-weight: 700; margin-bottom: 8px; }
.prelim-sizing-head span { color: var(--muted); font-weight: 500; }
.prelim-sizing .secondary-button { margin-top: 10px; width: 100%; }
.prelim-optmsg { font-size: 0.8rem; font-weight: 600; line-height: 1.4; margin: 8px 0 0; }
.prelim-optmsg:empty { margin: 0; }
.prelim-optmsg.ok { color: #1f7a48; }
.prelim-optmsg.bad { color: #b5362a; }

/* ---- Tabbed project card (New Project / Saved Projects) ---- */
.project-tabs { display: flex; gap: 4px; margin: 2px 0 14px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
.project-tab { flex: 1; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.02em; cursor: pointer; transition: background .12s, color .12s; }
.project-tab:hover { color: var(--ink); }
.project-tab.active { background: var(--surface-lift); color: var(--ink); box-shadow: var(--shadow); }
.project-tab-panel[hidden] { display: none; }

/* ---- Cart: read-only project readout + moved sheets list ---- */
.cart-project-readout { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; margin-bottom: 12px; background: var(--surface-soft); }
.cart-project-readout .cart-project-eyebrow { margin: 0 0 5px; }
.cart-readout-name { display: block; color: var(--ink); font-size: 0.98rem; font-weight: 700; line-height: 1.22; }
.cart-readout-line { display: block; color: var(--muted); font-size: 0.82rem; line-height: 1.4; margin-top: 3px; }
.cart-sheets { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; margin-bottom: 12px; background: var(--surface-soft); }
.cart-sheets > .eyebrow { margin: 0 0 8px; }

/* ---- Spec requirements panel (from dropped project specifications) ---- */
.spec-reqs { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); padding: 13px 14px; margin-bottom: 14px; }
.spec-reqs.hidden { display: none; }
.spec-reqs-head { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 6px; }
.spec-reqs-head .eyebrow { margin: 0 0 2px; }
.spec-reqs-file { color: var(--muted); font-size: 0.78rem; }
.spec-section { border-top: 1px solid var(--line); padding: 9px 0 4px; }
.spec-section summary { cursor: pointer; font-size: 0.92rem; color: var(--ink); }
.spec-section-meta { color: var(--muted); font-size: 0.78rem; margin-left: 6px; }
.spec-req-group h4 { color: var(--accent); font-size: 0.72rem; letter-spacing: 0.06em; margin: 10px 0 6px; text-transform: uppercase; }
.spec-req-group ul { display: grid; gap: 7px; list-style: none; margin: 0; padding: 0; }
.spec-req { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 3px; padding: 8px 10px; }
.spec-req-mode { color: var(--ok); font-size: 0.66rem; font-weight: 900; letter-spacing: 0.07em; }
.spec-req.is-prohibited { border-color: var(--brand); }
.spec-req.is-prohibited .spec-req-mode { color: var(--brand); }
.spec-req-text { color: var(--ink); font-size: 0.86rem; line-height: 1.45; }
.spec-req-quote { color: var(--muted); font-size: 0.78rem; font-style: italic; }
.spec-req-matches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.spec-match { background: var(--surface-soft); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); cursor: pointer; font: 600 0.74rem/1 Inter, sans-serif; padding: 6px 10px; }
.spec-match:hover { border-color: var(--accent); }
.spec-match.added { border-color: var(--ok); color: var(--ok); cursor: default; }
.spec-none, .spec-scattered p { color: var(--muted); font-size: 0.84rem; }
.spec-scattered ul { color: var(--muted); font-size: 0.8rem; margin: 4px 0 0; padding-left: 18px; }

/* ---- Session-in-progress banner (Step 1) ---- */
.session-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-soft); }
.session-banner-text strong { display: block; color: var(--ink); font-size: 0.92rem; }
.session-banner-text span { color: var(--muted); font-size: 0.82rem; }
.session-banner-actions { display: flex; gap: 8px; flex: 0 0 auto; }
/* On Step 1 the banner spans full width at the very top so it's seen first. */
/* When the session banner is visible on Step 1 it takes the top row and the two
   cards drop to row 2; when it's hidden, the cards sit at the top with no gap. */
body[data-view-mode="simple"][data-simple-step="intake"] [data-tool-panel="submittal"] .builder-panel:has(.session-banner:not([hidden])) .session-banner { grid-column: 1 / -1; grid-row: 1; }
body[data-view-mode="simple"][data-simple-step="intake"] [data-tool-panel="submittal"] .builder-panel:has(.session-banner:not([hidden])) .project-intake-section,
body[data-view-mode="simple"][data-simple-step="intake"] [data-tool-panel="submittal"] .builder-panel:has(.session-banner:not([hidden])) .project-controls-section { grid-row: 2; }

/* ---- Vicinity Map Generator ---- */
.vicinity-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(320px, 0.55fr) minmax(0, 1.45fr);
}
@media (max-width: 1100px) { .vicinity-grid { grid-template-columns: 1fr; } }
.vicinity-address-wrap { position: relative; display: block; }
.vicinity-suggest {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--shadow);
  left: 0;
  max-height: 250px;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
}
.vicinity-suggest button {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  display: block;
  font: inherit;
  font-size: 0.86rem;
  padding: 9px 12px;
  text-align: left;
  width: 100%;
}
.vicinity-suggest button:last-child { border-bottom: 0; }
.vicinity-suggest button:hover, .vicinity-suggest button.active { background: var(--surface-lift); }
.vicinity-labels-toggle { align-self: end; }
.vicinity-map-shell {
  /* The map itself is a print document: always white paper, black ink. */
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  min-height: 420px;
  overflow: hidden;
  position: relative;
}
.vicinity-map-shell svg { display: block; height: auto; width: 100%; }
.vicinity-map-shell .vmap-street { cursor: pointer; }
.vicinity-map-shell .vmap-street:hover { stroke-opacity: 0.55; }
.vicinity-map-shell .vmap-drag { cursor: grab; }
.vicinity-map-shell .vmap-drag:active { cursor: grabbing; }
/* Pan control lives BELOW the map (not over it) so the map screenshots clean. */
.vicinity-pan { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 12px auto 0; width: max-content; }
.vicinity-pan-label { color: var(--muted); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.vicinity-pan-grid { display: grid; justify-items: center; gap: 4px; }
.vicinity-pan-mid { display: flex; gap: 4px; }
.vicinity-pan button {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font-size: 18px;
  font-weight: 700;
  height: 38px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 38px;
}
.vicinity-pan button:hover { background: var(--surface-lift); border-color: var(--line-strong); }
.vicinity-pan button:disabled { opacity: 0.5; cursor: default; }
.vicinity-map-shell .vmap-label-street { cursor: move; }
.vicinity-menu {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 210px;
  padding: 8px;
  position: absolute;
  z-index: 60;
}
.vicinity-menu .vic-menu-title { color: var(--muted); font: 800 0.7rem Inter; letter-spacing: 0.04em; padding: 2px 2px 0; text-transform: uppercase; }
.vicinity-menu .vic-menu-edit { color: var(--muted); display: flex; flex-direction: column; font: 700 0.7rem Inter; gap: 4px; }
.vicinity-menu input { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font: 500 0.85rem Inter; padding: 7px 9px; }
.vicinity-menu input:focus { border-color: var(--accent); outline: none; }
.vicinity-menu button { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); cursor: pointer; font: 600 0.82rem Inter; padding: 7px 9px; text-align: left; }
.vicinity-menu button:hover { background: var(--surface-lift); border-color: var(--line-strong); }
.vicinity-menu .vic-menu-sep { border-top: 1px solid var(--line); margin: 1px 0; }
.vicinity-map-empty {
  align-items: center;
  color: #8a949e;
  display: flex;
  font-size: 0.9rem;
  font-weight: 700;
  inset: 0;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  text-align: center;
}

/* ---- Hydraulic Analysis Report ---- */
.hydreport-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
}
@media (max-width: 1100px) { .hydreport-grid { grid-template-columns: 1fr; } }
.hydreport-subhead { margin-top: 16px; }
.hydreport-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.hydreport-row { align-items: center; display: grid; gap: 8px; }
.hydreport-row.code-row { grid-template-columns: 1.4fr 0.7fr auto; }
.hydreport-row.room-row { grid-template-columns: 1.3fr 1fr auto; }
.hydreport-row.pipe-row { grid-template-columns: 1.3fr 1fr auto; }
.hydreport-row input, .hydreport-row select { width: 100%; box-sizing: border-box; }
.hydreport-row .hydreport-density { color: var(--muted); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.hydreport-row .hydreport-remove {
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; color: var(--muted);
  cursor: pointer; font-size: 16px; height: 34px; line-height: 1; width: 34px;
}
.hydreport-row .hydreport-remove:hover { border-color: var(--line-strong); color: var(--ink); }
.hydreport-note { color: var(--muted); font-size: 0.82rem; line-height: 1.5; margin: 6px 2px; min-height: 1.1em; }
.hydreport-note.ok { color: var(--ok); }
.hydreport-note.warn { color: var(--accent); }
.hydreport-output {
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; color: var(--ink);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.85rem; line-height: 1.55;
  min-height: 460px; padding: 14px 16px; resize: vertical; width: 100%; box-sizing: border-box; white-space: pre;
}

/* Hydraulic Report — saved reports, custom hazards */
.hydreport-row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.hydreport-hazard-editor { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; padding: 12px; }
.hydreport-hazard-editor .field-grid.three { grid-template-columns: 1.2fr 0.9fr 0.9fr; }
.hydreport-custom-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.hydreport-custom-item { align-items: center; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px;
  color: var(--muted); display: flex; font-size: 0.82rem; font-weight: 600; gap: 8px; justify-content: space-between; padding: 7px 11px; }
.hydreport-custom-item strong { color: var(--ink); }
.hydreport-custom-item button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; }
.hydreport-custom-item button:hover { color: #ff8d78; }

/* ---- Seismic Bracing ---- */
.seismic-grid { align-items: stretch; display: grid; gap: 16px; grid-template-columns: minmax(380px, 1.1fr) minmax(320px, 0.9fr); }
@media (max-width: 1100px) { .seismic-grid { grid-template-columns: 1fr; } }
.seismic-input-section, .seismic-results-section { display: flex; flex-direction: column; }
.seismic-results-section .seismic-constraints { flex: 1 1 0; min-height: 60px; overflow-y: auto; }
.seismic-results-section .seismic-constraints:empty { align-items: center; border: 2px dashed var(--line);
  border-radius: 10px; display: flex; justify-content: center; margin: 6px 0; }
.seismic-results-section .seismic-constraints:empty::after { color: var(--muted);
  content: "Checks appear here as you enter the calc."; font-size: 0.85rem; padding: 12px; text-align: center; }
.seismic-rows { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.seismic-row { align-items: center; display: grid; gap: 6px; grid-template-columns: minmax(90px, 1fr) minmax(70px, 1fr) 76px 76px auto; }
.seismic-row.is-stretch { grid-template-columns: minmax(72px, 0.9fr) minmax(58px, 0.9fr) 62px 66px auto auto; }
.seismic-row.is-pipe { grid-template-columns: minmax(80px, 1fr) minmax(80px, 1fr) 64px minmax(90px, 1.2fr) auto; }
.seismic-wiz-nav { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 10px; justify-content: space-between; margin-bottom: 12px; padding-bottom: 10px; }
.seismic-wiz-nav .step-chips { flex: 1 1 auto; }
.seismic-step { display: none; }
.seismic-step.active { display: block; }
.seismic-orient-box { display: grid; gap: 14px; grid-template-columns: minmax(220px, 1.4fr) minmax(170px, 1fr); align-items: center; }
.seismic-orient-box svg { background: rgba(127, 127, 127, 0.06); border: 1px solid var(--line); border-radius: 8px; max-width: 100%; height: auto; }
.seismic-orient-letter { font: 900 2.6rem Inter, sans-serif; line-height: 1; }
.seismic-orient-letter span { color: var(--accent, #e8622c); }
.seismic-orient-range { color: var(--muted); font-size: 0.82rem; font-weight: 700; margin: 4px 0 10px; }
.seismic-orient-stats { color: var(--muted); display: grid; font-size: 0.78rem; gap: 4px; margin-top: 10px; }
.seismic-orient-stats strong { color: var(--ink); }
.seismic-orient-side input[type="range"] { width: 100%; }
.seismic-attach-rows .seismic-row { grid-template-columns: 92px minmax(90px, 0.9fr) minmax(120px, 1.3fr) minmax(120px, 1.3fr); }
.seismic-attach-label { color: var(--muted); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; }
.seismic-autofit { border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.seismic-context-bar { align-items: center; background: rgba(127, 127, 127, 0.06); border: 1px solid var(--line);
  border-radius: 8px; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 12px; padding: 8px 12px; }
.ctx-type { background: #e8622c; border-radius: 5px; color: #fff; font: 900 0.72rem Inter, sans-serif;
  letter-spacing: 0.04em; padding: 3px 9px; text-transform: uppercase; }
.seismic-context-bar.is-long .ctx-type { background: #2e7dbd; }
.seismic-context-bar.is-riser .ctx-type { background: #9b52c9; }
.ctx-seg { align-items: baseline; display: inline-flex; gap: 6px; }
.seismic-hero-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.ctx-label { color: var(--muted); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.ctx-val { color: var(--ink); font-size: 0.84rem; font-weight: 800; }
.ctx-val .ctx-max { color: var(--muted); font-weight: 600; }
.seismic-tuner-row { align-items: center; display: flex; gap: 12px; margin: 4px 0 2px; }
.seismic-tuner-row input[type="range"] { flex: 1 1 auto; min-width: 0; }
.seismic-tuner-out { color: var(--accent, #e8622c); flex: 0 0 auto; font: 900 1rem Inter, sans-serif; min-width: 56px; text-align: right; }
.seismic-rack { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; min-height: 30px; }
.seismic-rack:empty::after { color: var(--muted); content: "No braces yet — the one you're building lands here automatically."; font-size: 0.76rem; }
.seismic-brace-chip { align-items: center; background: none; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--muted); cursor: pointer; display: inline-flex; font: 700 0.76rem Inter, sans-serif; gap: 6px; padding: 4px 8px 4px 9px; }
.seismic-brace-chip:hover { color: var(--ink); }
.seismic-brace-chip.active { border-color: var(--accent, #e8622c); color: var(--ink); }
.seismic-brace-chip .rack-dot { background: var(--muted); border-radius: 50%; height: 8px; width: 8px; }
.seismic-brace-chip.is-pass .rack-dot { background: var(--ok, #3ddc97); }
.seismic-brace-chip.is-fail .rack-dot { background: #e0523f; }
.seismic-brace-chip .rack-x { border-radius: 50%; color: var(--muted); font-weight: 900; line-height: 1; padding: 1px 4px; }
.seismic-brace-chip .rack-x:hover { background: rgba(224, 82, 63, 0.18); color: #e0523f; }
.seismic-rack-hint { color: var(--muted); font-size: 0.72rem; }
.seismic-fold { border: 1px solid var(--line); border-radius: 8px; margin-top: 12px; padding: 0 12px 4px; }
.seismic-fold[open] { padding-bottom: 12px; }
.seismic-fold > summary { color: var(--muted); cursor: pointer; font: 700 0.78rem Inter, sans-serif;
  list-style-position: inside; padding: 10px 0; text-transform: uppercase; user-select: none; }
.seismic-fold > summary:hover { color: var(--ink); }
/* some embedded engines paint closed-details children anyway - force it */
.seismic-fold:not([open]) > *:not(summary) { display: none; }
/* Step-1 setup folds: same fold chrome, plus a live summary hint on the right */
.seismic-setup-fold > summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.seismic-fold-hint { margin-left: auto; color: var(--muted); font: 500 0.72rem Inter, sans-serif;
  text-transform: none; letter-spacing: 0; opacity: 0.85; text-align: right; }
.seismic-setup-fold[open] .seismic-fold-hint { opacity: 0.55; }
.seismic-add-brace { margin-top: 14px; }
/* ---- Material Catalog tab ---- */
.matcat-drop { border: 2px dashed var(--line, #d9dfe8); border-radius: 12px; padding: 16px; text-align: center; background: rgba(255,255,255,0.02); display: flex; flex-direction: column; gap: 4px; }
.matcat-drop.is-hot { border-color: var(--accent, #e8622c); background: rgba(232,98,44,0.08); }
.matcat-drop strong { font-size: 14px; }
.matcat-drop span { font-size: 12.5px; color: var(--muted, #6b7683); }
.link-button { background: none; border: 0; padding: 0; color: var(--accent, #e8622c); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.matcat-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.matcat-sprfilters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line, #d9dfe8); border-radius: 10px; background: rgba(232, 98, 44, 0.05); }
.matcat-sprfilters-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted, #6b7683); }
.matcat-sprfilters select { flex: 0 1 auto; min-width: 130px; }
.matcat-tempnote { flex: 1 1 100%; font-size: 11.5px; color: var(--muted, #6b7683); font-style: italic; }
.matcat-toolbar input[type="search"] { flex: 1 1 260px; }
.matcat-toolbar select { flex: 0 0 auto; }
.matcat-bulkbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 8px; font-size: 13px; }
.matcat-selall { display: inline-flex; align-items: center; gap: 6px; color: var(--muted, #6b7683); white-space: nowrap; }
.matcat-selall input { width: 15px; height: 15px; }
.matcat-count { color: var(--muted, #6b7683); font-variant-numeric: tabular-nums; }
.matcat-bulkspacer { flex: 1; }
.matcat-list { margin-top: 4px; }
.pdfcad-pick-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.cadview-toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cadview-zoom { display: inline-flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted, #6b7683); font-weight: 600; }
.cadview-zoom select { min-width: 120px; }
.cadview-meta { color: var(--muted, #6b7683); font-size: 12.5px; }
.cadview-pane { margin-top: 12px; border: 1px solid var(--line, #d9dfe8); border-radius: 10px; background: #ffffff; overflow: auto; max-height: 72vh; min-height: 220px; }
.cadview-img { display: block; }
.cadview-empty { color: var(--muted, #6b7683); font-size: 13.5px; padding: 42px 26px; text-align: center; }
.cadview-oda { margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(232, 98, 44, 0.4); border-radius: 9px; background: rgba(232, 98, 44, 0.07); font-size: 13px; }
.cadview-oda .link-button { font-weight: 700; }
.pdfcad-pick-note { color: var(--muted, #6b7683); font-size: 12px; flex: 1 1 220px; }
.matcat-ai { margin-top: 18px; padding: 14px 16px; border: 1px dashed var(--line, #d9dfe8); border-radius: 12px; background: rgba(232, 98, 44, 0.04); }
.matcat-ai .section-heading { margin-bottom: 4px; }
.matcat-ai-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.matcat-ai-row input { flex: 1 1 260px; min-width: 220px; }
.matcat-ai-row .secondary-button { flex: 0 0 auto; white-space: nowrap; }
.matcat-ai .ai-datasheet-result { margin-top: 10px; }
.matcat-headrow, .matcat-row { display: grid; grid-template-columns: 34px minmax(90px,1.1fr) minmax(140px,2fr) minmax(70px,0.9fr) minmax(90px,1.4fr) minmax(150px,auto); gap: 10px; align-items: center; }
.matcat-headrow { padding: 6px 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted, #6b7683); border-bottom: 1px solid var(--line, #d9dfe8); }
.matcat-row { padding: 9px 10px; border-bottom: 1px solid var(--line, #eef1f6); }
.matcat-row.is-selected { background: rgba(232,98,44,0.07); }
.matcat-row.is-remote { opacity: 0.82; }
.matcat-row .row-product-name { font-weight: 600; }
.matcat-cat { font-size: 12px; color: var(--muted, #6b7683); }
.matcat-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.matcat-actions .small-button.ghost { background: transparent; border: 1px solid var(--line, #d9dfe8); }
.matcat-actions .row-menu-danger { color: #c0392b; }
.matcat-total { margin: 10px 2px 0; font-size: 11.5px; color: var(--muted, #6b7683); }
.matcat-empty { padding: 24px 8px; text-align: center; }
@media (max-width: 760px) {
  .matcat-headrow { display: none; }
  .matcat-row { grid-template-columns: 28px 1fr auto; grid-auto-rows: auto; row-gap: 4px; }
  .matcat-cat, .matcat-row .row-details { grid-column: 2 / -1; }
  .matcat-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.seismic-sds-doc { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(40, 104, 122, 0.06); }
.seismic-sds-doc .eyebrow { margin: 0 0 8px; }
.sds-cells { display: flex; flex-wrap: wrap; gap: 8px; }
.sds-cell { display: inline-flex; flex-direction: column; align-items: center; min-width: 58px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--card, #fff); }
.sds-cell em { font-style: normal; font-size: 10px; color: var(--muted, #6b7683); text-transform: uppercase; letter-spacing: .4px; }
.sds-cell b { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink, #1a2230); }
.sds-cell.is-used { border-color: var(--accent, #e8622c); background: rgba(232, 98, 44, 0.1); }
.sds-cell.is-used b, .sds-cell.is-used em { color: var(--accent, #e8622c); }
.sds-loc { margin: 10px 0 8px; font-size: 11.5px; color: var(--muted, #6b7683); line-height: 1.5; }
.sds-doc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sds-doc-link { font-size: 12.5px; font-weight: 600; color: var(--accent, #e8622c); text-decoration: none; }
.sds-doc-link:hover { text-decoration: underline; }
.seismic-lookup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.seismic-lookup-note { color: var(--muted); font-size: 0.78rem; flex: 1; min-width: 220px; }
/* right panel stays behind a calm empty state until there's something to show */
.seismic-side-empty { display: none; }
#seismicSidePanel.is-empty > *:not(.seismic-side-empty) { display: none; }
#seismicSidePanel.is-empty .seismic-side-empty { display: block; padding: 6px 2px; }
.seismic-side-empty p:not(.eyebrow) { color: var(--muted); font-size: 0.85rem; line-height: 1.55; margin: 8px 0 0; }
.seismic-brace-bar #seismicBraceId { width: 90px; }
body[data-theme="plain-light"] .seismic-brace-chip.is-pass .rack-dot { background: #157a3c; }
body[data-theme="plain-light"] .seismic-brace-chip.is-fail .rack-dot { background: #b3261e; }
@media (max-width: 900px) { .seismic-orient-box { grid-template-columns: 1fr; } }
.seismic-zoi-head { color: var(--muted); font-size: 0.78rem; font-weight: 900; letter-spacing: 0; margin: 14px 0 2px; text-transform: uppercase; }
.seismic-row-head { margin: 4px 0 0; }
.seismic-row-head span { color: var(--muted); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; }
.seismic-row-head span:last-child { min-width: 26px; }
.seismic-row input[readonly] { opacity: 0.8; }
#seismicComponentRows .seismic-row { align-items: center; grid-template-columns: 84px minmax(90px, 0.8fr) minmax(120px, 1.3fr) minmax(120px, 1.3fr); }
.seismic-row select, .seismic-row input { min-width: 0; }
.seismic-check { align-items: center; color: var(--muted); display: flex; font-size: 0.78rem; gap: 4px; white-space: nowrap; }
.seismic-remove { line-height: 1; min-width: 26px; padding: 4px 7px; }
.seismic-row-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 6px; }
.seismic-inline { align-items: center; color: var(--muted); display: flex; font-size: 0.8rem; gap: 6px; }
.seismic-inline input { width: 84px; }
/* status colors: dark-first (app default theme), plain-light overrides below */
.seismic-overall { border-radius: 999px; font: 800 0.78rem Inter; letter-spacing: 0.04em; padding: 4px 12px; }
.seismic-overall.is-pass { background: rgba(61, 220, 151, 0.14); color: var(--ok, #3ddc97); }
.seismic-overall.is-fail { background: rgba(255, 129, 119, 0.14); color: #ff8177; }
.seismic-overall.is-unavailable { background: rgba(255, 206, 133, 0.14); color: #ffce85; }
.seismic-demand { margin: 4px 0 10px; }
.seismic-constraint { border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; margin-bottom: 6px; padding: 7px 10px; }
.seismic-constraint.is-pass { border-left-color: var(--ok, #3ddc97); }
.seismic-constraint.is-fail { border-left-color: #ff8177; }
.seismic-constraint.is-unavailable { border-left-color: #ffce85; }
.seismic-constraint-head { display: flex; font: 700 0.84rem Inter; justify-content: space-between; }
.seismic-constraint.is-pass .seismic-badge { color: var(--ok, #3ddc97); }
.seismic-constraint.is-fail .seismic-badge { color: #ff8177; }
.seismic-constraint.is-unavailable .seismic-badge { color: #ffce85; }
body[data-theme="plain-light"] .seismic-overall.is-pass,
body[data-theme="plain-light"] .seismic-constraint.is-pass .seismic-badge { color: #157a3c; }
body[data-theme="plain-light"] .seismic-overall.is-fail,
body[data-theme="plain-light"] .seismic-constraint.is-fail .seismic-badge { color: #b02a20; }
body[data-theme="plain-light"] .seismic-overall.is-unavailable,
body[data-theme="plain-light"] .seismic-constraint.is-unavailable .seismic-badge { color: #8a5f0a; }
body[data-theme="plain-light"] .seismic-constraint.is-pass { border-left-color: #157a3c; }
body[data-theme="plain-light"] .seismic-constraint.is-fail { border-left-color: #b02a20; }
body[data-theme="plain-light"] .seismic-constraint.is-unavailable { border-left-color: #8a5f0a; }
.seismic-constraint-body { color: var(--muted); font-size: 0.78rem; line-height: 1.45; margin-top: 2px; }
.seismic-export { display: flex; gap: 10px; margin-top: 8px; }
.seismic-export button { flex: 1 1 0; }

/* ---- Convert PDF to CAD ---- */
.pdfcad-grid { align-items: stretch; display: grid; gap: 16px; grid-template-columns: minmax(340px, 1fr) minmax(0, 0.9fr); }
@media (max-width: 1100px) { .pdfcad-grid { grid-template-columns: 1fr; } }
/* Both columns own their full grid-row height; the preview flexes to absorb the
   slack so the form side drives the height and both bottom-align (§6a). */
.pdfcad-input-section, .pdfcad-summary-section { display: flex; flex-direction: column; }
.pdfcad-groups { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.pdfcad-group-row { align-items: center; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; display: flex; gap: 10px; padding: 9px 11px; }
.pdfcad-group-row input { width: 18px; height: 18px; }
.pdfcad-group-swatch { border: 1px solid rgba(0,0,0,0.35); border-radius: 4px; flex: none; height: 18px; width: 18px; }
.pdfcad-group-label { color: var(--ink); font: 600 0.88rem Inter; flex: 1; }
.pdfcad-group-count { color: var(--muted); font: 600 0.78rem Inter; white-space: nowrap; }
.pdfcad-summary { color: var(--ink); font-size: 0.9rem; }
.pdfcad-summary .pdfcad-empty { color: var(--muted); line-height: 1.6; }
.pdfcad-summary .layout-result-line { padding: 7px 0; }
/* sheet thumbnail cards */
.pdfcad-sheet-hint { color: var(--muted); font: 600 0.78rem Inter; white-space: nowrap; }
.pdfcad-cards { align-content: start; display: grid; flex: 1 1 0; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  min-height: 220px; margin-top: 10px; overflow-y: auto; padding: 2px; }
.pdfcad-cards-empty { color: var(--muted); font-size: 0.85rem; grid-column: 1 / -1; line-height: 1.6;
  margin: auto; max-width: 42ch; padding: 24px 12px; text-align: center; }
.pdfcad-card { align-items: stretch; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; display: flex; flex-direction: column; gap: 0; overflow: hidden; padding: 0; text-align: center; transition: border-color 0.12s, box-shadow 0.12s; }
.pdfcad-card:hover { border-color: var(--accent); }
.pdfcad-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.pdfcad-card-thumb { align-items: center; aspect-ratio: 17 / 22; background: #fff; display: flex; justify-content: center; overflow: hidden; width: 100%; }
.pdfcad-card-thumb img { display: block; height: 100%; object-fit: contain; width: 100%; }
.pdfcad-card-label { color: var(--ink); font: 700 0.8rem Inter; padding: 7px 4px; }
.pdfcad-card.is-selected .pdfcad-card-label { color: var(--accent); }
.pdfcad-card-spin { animation: pdfcadSpin 0.8s linear infinite; border: 2px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; height: 22px; width: 22px; }
.pdfcad-card-err { color: var(--danger, #c0392b); font: 800 1.1rem Inter; }
@keyframes pdfcadSpin { to { transform: rotate(360deg); } }
/* explode-blocks: block list */
.cadx-block-list { display: flex; flex-direction: column; gap: 6px; }
.cadx-block-row { align-items: center; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px;
  display: flex; gap: 10px; justify-content: space-between; padding: 8px 11px; }
.cadx-block-name { color: var(--ink); font: 600 0.85rem Inter; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cadx-block-count { color: var(--muted); font: 700 0.8rem Inter; flex: none; }
.cadx-block-more { color: var(--muted); font: 600 0.8rem Inter; padding: 6px 2px 0; text-align: center; }
.seismic-sheet-style { margin-top: 8px; }
.seismic-sheet-style select { min-width: 210px; }
.seismic-brace-bar { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.seismic-brace-bar select { flex: 1 1 140px; min-width: 120px; }
.seismic-conditions { margin: 8px 0 4px; }
.seismic-cond-head { margin-bottom: 4px; }
.seismic-cond { align-items: flex-start; border-left: 3px solid var(--line); color: var(--muted); cursor: pointer; display: flex; font-size: 0.76rem; gap: 8px; line-height: 1.4; margin-bottom: 4px; padding: 4px 8px; }
.seismic-cond input { flex: none; height: 15px; margin-top: 2px; min-height: 0; width: 15px; }
.seismic-cond span { flex: 1 1 auto; min-width: 0; }
.seismic-cond.is-auto { cursor: default; }
.ea-pill { border: 1px solid var(--accent, #e8622c); border-radius: 4px; color: var(--accent, #e8622c);
  display: inline-block; font-size: 0.5rem; font-weight: 900; letter-spacing: 0.05em; line-height: 1.3;
  margin-left: 6px; padding: 1px 4px; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.ea-banner { align-items: center; border: 1px solid var(--line); border-left: 3px solid var(--accent, #e8622c);
  border-radius: 8px; display: flex; gap: 10px; margin: 10px 0 14px; padding: 8px 12px; }
.ea-banner .ea-pill { flex: none; font-size: 0.6rem; margin-left: 0; }
.ea-banner-text { color: var(--muted); flex: 1 1 auto; font-size: 0.8rem; }
.ea-banner .compact-button { flex: none; }
.seismic-suggest { margin: 10px 0 4px; }
.seismic-suggest-item { align-items: center; border-left: 3px solid var(--accent, #e8622c); display: flex;
  font-size: 0.8rem; gap: 10px; justify-content: space-between; margin: 6px 0; padding: 5px 8px; }
.seismic-suggest-item em { color: var(--muted); font-style: normal; font-size: 0.72rem; }
.seismic-suggest-item .compact-button { flex: none; }
.seismic-cond-badge { border: 1px solid var(--ok, #3ddc97); border-radius: 4px; color: var(--ok, #3ddc97);
  flex: none; font-size: 0.62rem; font-weight: 900; padding: 1px 5px; white-space: nowrap; }
body[data-theme="plain-light"] .seismic-cond-badge { border-color: #157a3c; color: #157a3c; }
.seismic-cond.is-acked { border-left-color: var(--ok, #3ddc97); color: var(--ink); }
body[data-theme="plain-light"] .seismic-cond.is-acked { border-left-color: #157a3c; }