:root {
  /* Warm "vintage western" palette pulled from the Chlorine Cowboy emblem:
     bone/parchment surfaces, warm charcoal ink, antique-gold accent, sage
     secondary. Diagram functional colors (green/orange/red/gray/rose) are
     intentionally left as-is — they encode meaning, not branding. */
  --ink: #23201a;       /* warm charcoal — body text */
  --muted: #6f6750;     /* olive-taupe — secondary text */
  --line: #ddd2b5;      /* warm cream border */
  --paper: #f4eedc;     /* parchment background */
  --panel: #fffdf4;     /* warm white panel */
  --blue: #9a7a16;      /* antique gold — primary accent (text + fills) */
  --blue-2: #5b614f;    /* sage green — secondary accent */
  --cyan: #efe2bb;      /* pale gold wash */
  --green: #b7e3a7;
  --green-2: #dff0d7;
  --orange: #ff965d;
  --orange-2: #ffd0a0;
  --gray: #d4d4d4;
  --gray-2: #a9a9a9;
  --red: #d90000;
  --dark-red: #6b0f0f;
  --rose: #d990d4;
  --shadow: 0 14px 36px rgba(35, 30, 18, 0.16);
  color-scheme: light;
  font-family: "Times New Roman", Times, Georgia, serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(201, 154, 46, 0.16), rgba(244, 238, 220, 0) 280px),
    var(--paper);
}

html {
  -webkit-text-size-adjust: 100%;
}

button,
input,
select {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

.shell {
  min-height: 100vh;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto 18px;
  max-width: 1440px;
}

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

.topbar-logo {
  height: 78px;
  width: auto;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(35, 30, 18, 0.28);
}

.eyebrow {
  margin: 3px 0 0;
  color: var(--blue);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

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

h1 {
  margin-bottom: 0;
  font-size: 2.15rem;
  line-height: 1.05;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0;
  font-size: 1.05rem;
}

h3 {
  margin-bottom: 10px;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(126px, 1fr));
  gap: 10px;
  min-width: min(740px, 55vw);
}

.metric {
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid rgba(122, 96, 30, 0.28);
  border-radius: 8px;
  background: rgba(255, 253, 244, 0.85);
  box-shadow: 0 8px 22px rgba(35, 30, 18, 0.07);
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.metric strong {
  display: block;
  margin-top: 4px;
  font-size: 1.15rem;
  line-height: 1.15;
}

.app-grid {
  display: grid;
  grid-template-columns: minmax(320px, 410px) minmax(0, 1fr);
  gap: 18px;
  max-width: 1440px;
  margin: 0 auto;
  align-items: start;
}

.input-panel,
.work-panel {
  border: 1px solid rgba(21, 32, 43, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
  /* Allow the panel to shrink below its content width inside the grid so
     wide children (the panel diagram) trigger their own scroll instead of
     pushing the whole page wider on iPad portrait. */
  min-width: 0;
}

.input-panel {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 36px);
  overflow: auto;
}

.panel-title,
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.panel-title-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Output panels scroll horizontally with momentum on touch if their content
   (wide tables, diagrams) is wider than a narrow screen — never clipped. */
#shoppingList,
#panelDiagram,
#plumbingDiagram,
#showWork,
#catalogBrowser {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.field-section {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.field-section:last-child {
  border-bottom: 0;
}

.field-section h3 {
  margin-bottom: 6px;
}

.field-grid {
  display: grid;
  gap: 6px;
}

.field {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) minmax(112px, 1fr);
  align-items: center;
  gap: 8px;
}

.field label {
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 650;
}

.field input,
.field select {
  min-height: 34px;
  width: 100%;
  border: 1px solid #cabf9c;
  border-radius: 6px;
  background: #fbf6e6;
  color: var(--ink);
  padding: 4px 8px;
  font-size: 0.88rem;
}

/* Touch devices (iPad): 16px form controls + taller hit targets so iOS
   never zooms the page on focus; the laptop keeps the compact size. */
@media (pointer: coarse) {
  .field input,
  .field select,
  .catalog-search {
    font-size: 16px;
    min-height: 40px;
  }
}

.field-note {
  grid-column: 1 / -1;
  margin: -2px 0 1px;
  color: var(--muted);
  font-size: 0.76rem;
}

.tabbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--line);
  background: #efe7d2;
  border-radius: 8px 8px 0 0;
}

.tab-button {
  padding: 0 6px;
  white-space: nowrap;
}

.tab-button,
.ghost-button,
.primary-button {
  min-height: 40px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-weight: 800;
}

.tab-button {
  background: transparent;
  color: var(--muted);
}

.tab-button.active {
  background: var(--blue);
  color: #fff;
}

.ghost-button {
  background: #fff;
  border-color: var(--line);
  color: var(--blue);
  padding: 0 14px;
}

.primary-button {
  background: var(--blue);
  color: #fff;
  padding: 0 16px;
}

.tab-view {
  display: none;
  min-width: 0;
}

.tab-view.active {
  display: block;
}

#shoppingList,
#showWork,
#panelDiagram {
  padding: 16px;
}

.shopping-section {
  margin-bottom: 18px;
}

.shopping-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding: 8px 10px;
  background: var(--blue);
  color: #fff;
  font-weight: 850;
  text-transform: uppercase;
}

.shopping-table,
.trace-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
}

.shopping-table th,
.shopping-table td,
.trace-table th,
.trace-table td {
  border: 1px solid var(--line);
  padding: 9px 10px;
  vertical-align: top;
  text-align: left;
}

.shopping-table th,
.trace-table th {
  background: #f2ead4;
  color: var(--blue);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.qty-cell {
  width: 64px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sku-cell {
  width: 156px;
  font-family: "Times New Roman", Times, Georgia, serif;
  font-weight: 800;
}

/* Shopping row for a recommended SKU that's currently disabled in the
   catalog browser. Treat enabled as PREFERRED, not absolute — when no
   other option fits the project requirements, surface the recommendation
   anyway and visually demarcate it. Subtle amber accent with italic
   description; the SKU stays bold + monospace for readability. */
.shopping-row-fallback {
  background: #fdf4d6;
}

.shopping-row-fallback .sku-cell {
  color: #8a5a00;
  text-decoration: underline dotted #b67d00;
  text-underline-offset: 3px;
}

.shopping-row-fallback td:last-child {
  font-style: italic;
  color: #5a4500;
}

.sku-fallback-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: #b67d00;
  color: #fff;
  border-radius: 4px;
  font-family: "Times New Roman", Times, Georgia, serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
  text-decoration: none;
}

.trace-table td:first-child {
  width: 220px;
  font-weight: 750;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  max-width: 100%;
  border-radius: 999px;
  background: #e6f6eb;
  color: #135d31;
  padding: 5px 10px;
  font-size: 0.8rem;
  font-weight: 800;
}

.diagram {
  display: grid;
  grid-template-columns: 1fr 1.75fr 1.25fr 1.25fr;
  /* Ports + transformer stack in column 3; sensors/rs485/summary span the
     same two rows so the column heights stay balanced. HVR keeps its full
     row 3 width for the 5-col snake pattern. */
  grid-template-areas:
    "sensors rs485 ports       summary"
    "sensors rs485 transformer summary"
    "lvr     hvr   hvr         hvr"
    "actuators breakers breakers breakers";
  gap: 10px;
  /* Sized to fit the work-panel column even on a wide desktop (~927px wrap
     at 1440×900) and standard iPad landscape (~939px wrap at 1024×768).
     The 5-col HVR snake matches the HLBASE compartment exactly. */
  min-width: 920px;
}

.diagram-wrap {
  overflow-x: auto;
  padding-bottom: 8px;
  /* Stay within the work panel so the diagram's own horizontal scroll kicks
     in instead of pushing the whole page wider on iPad portrait. */
  max-width: 100%;
  width: 100%;
}


.diagram-panel {
  border: 2px solid #111;
  background: #fff;
}

.diagram-panel h3 {
  margin: 0;
  min-height: 38px;
  display: grid;
  place-items: center;
  border-bottom: 2px solid #111;
  background: var(--green);
  color: #111;
  font-size: 1rem;
  text-transform: none;
}

.diagram-panel.summary h3 {
  background: var(--orange);
}

.diagram-panel.ports h3,
.diagram-panel.breakers h3 {
  background: var(--cyan);
}

.diagram-panel.hvr h3,
.diagram-panel.breakers h3 {
  background: var(--gray-2);
}

/* Lighting transformer panel — soft amber to suggest 12V low-voltage. */
.diagram-panel.transformer h3 {
  background: #ffe28a;
  color: #5a4500;
}

/* --- Plumbing Diagram (blueprint-style, SVG + foreignObject cards) -------
   Pool on the left, equipment columns to the right with actual pipe runs
   drawn as SVG paths between them. Pipes color-coded: blue suction, black
   main flow, amber feature branch, dark-red cleaner branch, green return. */
.plumbing-wrap {
  padding: 12px;
  overflow-x: auto;
}

/* Pipe-total banner: pinned above the SVG. Big top-line number for the
   estimated Schedule-40 PVC footage; secondary line lists the drivers
   (pad distance, feature zones, solar/spa adders). */
.plumb-pipe-total {
  margin: 0 auto 12px;
  max-width: 640px;
  padding: 10px 16px;
  background: #faf5e8;
  border: 2px solid var(--blue);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.plumb-pipe-total-main {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
}

.plumb-pipe-total-label {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
  font-weight: 700;
}

.plumb-pipe-total-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--blue);
}

.plumb-pipe-total-detail {
  font-size: 0.85rem;
  color: #555;
  font-style: italic;
}

.plumbing-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Spa body still uses the foreignObject row-layout pattern; pool body
   went SVG-native, so the old .plumb-svg-pool and .plumb-svg-pool-title
   classes were dropped in the cleanup pass. .plumb-svg-pool-dims and
   .plumb-svg-pool-row below remain in use by the spa overlay. */
.plumb-svg-pool-dims {
  text-align: center;
  font-size: 0.86rem;
  font-style: italic;
  margin-bottom: 10px;
}
.plumb-svg-pool-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.86rem;
  padding: 2px 0;
}
.plumb-svg-pool-row b { font-weight: 800; }

/* Raised spa body — separate rect at the top-right of the pool area. */
.plumb-svg-spa-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 8px;
  box-sizing: border-box;
  color: #5a3a00;
}
.plumb-svg-spa-title {
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
}

/* Equipment / valve / feature cards inside foreignObject */
.plumb-svg-card {
  width: 100%;
  height: 100%;
  border: 2px solid #111;
  border-radius: 6px;
  padding: 6px 10px;
  background: #fff;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.plumb-svg-title {
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.15;
}
.plumb-svg-sku {
  font-size: 0.84rem;
  line-height: 1.15;
  margin-top: 2px;
}

.plumb-svg-equip   { background: #fff; }
.plumb-svg-feature { background: #fff4d6; border-color: #a17a00; }
.plumb-svg-solar   { background: #ffe8c2; border-color: #d97706; }
.plumb-svg-valve {
  background: #f0f0f0;
  border-color: #555;
  border-style: dashed;
}
.plumb-svg-valve .plumb-svg-title { font-size: 0.84rem; font-weight: 700; }
.plumb-svg-valve .plumb-svg-sku   { font-size: 0.78rem; }

/* When a card is paired with a custom SVG device shape (pump, filter,
   heater, valve silhouettes), the outline is drawn by the SVG path
   underneath. The foreignObject card text overlay drops its background
   and border so the device silhouette shows through. This rule MUST come
   after .plumb-svg-equip / -feature / -solar / -valve so it wins source-
   order tiebreaks on equal specificity. */
.plumb-svg-card--shaped,
.plumb-svg-card--shaped.plumb-svg-equip,
.plumb-svg-card--shaped.plumb-svg-feature,
.plumb-svg-card--shaped.plumb-svg-solar,
.plumb-svg-card--shaped.plumb-svg-valve {
  background: transparent;
  border: none;
  padding: 1px 4px;          /* tight padding since the foreignObject
                                is already sized to the text-safe zone */
  justify-content: center;
}
/* Smaller fonts on shaped cards so long titles like "Circulation Pump"
   or "◇ Riser Isolation Ball Valves" fit inside the device's text-safe
   zone (the body interior, not the protrusions). Overrides the larger
   default .plumb-svg-title / .plumb-svg-sku sizes. */
.plumb-svg-card--shaped .plumb-svg-title {
  font-size: 0.58rem;
  line-height: 1.05;
}
.plumb-svg-card--shaped .plumb-svg-sku {
  font-size: 0.52rem;
  line-height: 1.05;
  margin-top: 1px;
}
.plumb-svg-card--shaped.plumb-svg-valve .plumb-svg-title {
  font-size: 0.44rem;
  font-weight: 700;
  line-height: 1.0;
}
.plumb-svg-card--shaped.plumb-svg-valve .plumb-svg-sku {
  font-size: 0.40rem;
  line-height: 1.0;
}

.plumb-svg-pipe-label {
  font-size: 11px;
  font-style: italic;
  fill: #444;
}

/* Pool body SVG-native title + dimensions (replaces the old foreignObject
   text rows so the pool's interior stays clear for fitting icons and the
   cleaner). */
.plumb-svg-pool-title-text {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.06em;
  fill: #0b4f6c;
}
.plumb-svg-pool-dims-text {
  font-size: 11px;
  font-style: italic;
  fill: #0b4f6c;
}
/* Skimmer SKU label — centered in the clear interior of the skimmer
   splash frame (the frame icon itself signals "skimmer"). */
.plumb-svg-skim-label {
  font-family: "Times New Roman", Times, serif;
  font-size: 9px;
  font-weight: 700;
  fill: #0b4f6c;
}
/* Spa body native SVG title (replaces the old foreignObject overlay so the
   spa renders consistently with the pool body). */
.plumb-svg-spa-title-text {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  fill: #cc7a00;
}
/* Rooftop solar array — visual block ABOVE the equipment pad whose
   vertical distance scales with the user's solarDistance input. Panel
   is rendered in near-black (matches the actual color of every pool
   solar collector); label is white for contrast. */
.plumb-svg-solar-label {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  fill: #ffffff;
}
/* Labels on the three plumbing-diagram region boxes (Suction Manifold,
   Return Manifold, Equipment Pad). Small caps, color matches the box
   accent stroke so the label reads as part of the box. */
.plumb-region-label {
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.12em;
  fill: #6b5a3d;
}

/* GVA-24 actuator panel: dark red to match the real-world plug color. */
.diagram-panel.actuators h3 {
  background: var(--dark-red);
  color: #fff;
}

.sensors {
  grid-area: sensors;
}

.rs485 {
  grid-area: rs485;
}

.ports {
  grid-area: ports;
}

.transformer {
  grid-area: transformer;
}

.summary {
  grid-area: summary;
}

.lvr {
  grid-area: lvr;
}

.hvr {
  grid-area: hvr;
}

.actuators {
  grid-area: actuators;
}

.breakers {
  grid-area: breakers;
}

.diagram-grid {
  display: grid;
  grid-template-columns: 96px 1fr;
}

.diagram-grid.three {
  grid-template-columns: 110px 1fr 1fr;
}

.diagram-cell {
  min-height: 36px;
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
  padding: 7px 8px;
  /* Wrap long values (e.g., "Variable-speed pump RS485: SP23520VSP") instead
     of truncating with ellipsis. Row height grows to fit; the left/right
     cells in a row stay aligned via the grid auto-row sizing. */
  overflow: hidden;
  line-height: 1.25;
  word-break: break-word;
}

.diagram-cell:nth-child(2n),
.diagram-grid.three .diagram-cell:nth-child(3n) {
  border-right: 0;
}

.diagram-grid.three .diagram-cell:nth-child(2n) {
  border-right: 1px solid #111;
}

.label-cell {
  background: var(--green);
  font-weight: 800;
}

.filled-cell {
  background: var(--green-2);
}

.empty-cell {
  background: var(--gray);
  color: #787878;
}

/* Cell on a port that the selected controller doesn't expose at all —
   visually unavailable rather than text-labeled. */
.unavailable-cell {
  background: repeating-linear-gradient(45deg, #d6d6d6, #d6d6d6 4px, #c6c6c6 4px, #c6c6c6 8px);
  color: transparent;
  pointer-events: none;
}

.label-cell-disabled {
  background: #c8c8c8;
  color: #888;
  font-weight: 600;
}

.summary-cell {
  background: var(--orange-2);
}

.summary-label {
  background: var(--orange);
  font-weight: 800;
}

.relay-grid {
  /* Mirror the physical HLBASE high-voltage compartment: 5 columns × 2 rows.
     Cols 1-2 = onboard HVR1-4, cols 3-4 = HLRELAYBANK HVR5-8, col 5 =
     HLRELAY add-ons HVR9-10. Each cell is positioned via inline grid-column
     / grid-row from HVR_GRID_POSITIONS so the in-cell order can stay 1..10. */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  padding: 8px;
  background: #efefef;
}

.relay-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-bottom: 2px solid #111;
  background: #f6f6f6;
  font-size: 0.76rem;
  font-weight: 850;
}

.relay-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 8px;
  border-right: 1px solid #111;
}

.relay-legend span:last-child {
  border-right: 0;
}

.legend-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid #111;
  flex: 0 0 auto;
}

.swatch-black {
  background: #111;
}

.swatch-red {
  background: var(--red);
}

.swatch-white {
  background: #3d3d3d;
  box-shadow: inset 0 0 0 4px #fff;
}

.swatch-gray {
  background: #d2d2d2;
}

.relay {
  border: 2px solid #111;
  background: #fff;
}

.relay-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  min-height: 32px;
  padding: 6px 8px;
  background: #575757;
  color: #fff;
  font-weight: 800;
  font-size: 0.88rem;
}

.relay-title strong {
  font-size: 0.72rem;
  text-align: right;
}

.relay-load-name {
  min-height: 32px;
  padding: 6px 8px;
  border-top: 1px solid #111;
  background: #f7f7f7;
  font-weight: 800;
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relay.open .relay-load-name {
  color: #686868;
  font-weight: 750;
}

.relay.unavailable {
  opacity: 0.55;
  filter: saturate(0.35);
}

.relay.unavailable .relay-title,
.relay.unavailable .relay-load-name {
  background: repeating-linear-gradient(45deg, #d6d6d6, #d6d6d6 4px, #c6c6c6 4px, #c6c6c6 8px);
  color: transparent;
}

.relay.unavailable .relay-title span {
  color: #777;
}

.relay.voltage-240 .relay-title {
  background: #1f1f1f;
}

.relay.voltage-120 .relay-title {
  background: #555;
}

.relay-lines {
  /* 2×2 grid of terminals so each Load/Line cell stays readable inside the
     5-column HVR layout instead of being squished into a 1×4 row. */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.relay-lines .terminal {
  min-height: 44px;
  padding: 6px 7px;
  border-right: 1px solid #111;
  border-top: 1px solid #111;
  overflow: hidden;
  font-size: 0.74rem;
  line-height: 1.2;
}

.relay-lines .terminal:nth-child(2n) {
  border-right: 0;
}

.terminal b {
  display: block;
  margin-bottom: 3px;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.terminal-black {
  background: #f7f7f7;
  color: #111;
}

.terminal-red {
  background: var(--red);
  color: #fff;
}

.relay.voltage-120 .terminal-red {
  background: #3f3f3f;
  color: #fff;
}

.relay.open .terminal-black,
.relay.unavailable .terminal-black {
  background: #f2f2f2;
  color: #606060;
}

.relay.open .terminal-red,
.relay.unavailable .terminal-red {
  background: #d2d2d2;
  color: #606060;
}

.breaker-note {
  min-height: 44px;
  display: grid;
  place-items: center;
  border-bottom: 2px solid #111;
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
}

.breaker-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 0;
}

.breaker-list {
  display: grid;
}

.breaker-bus-label {
  padding: 6px 8px;
  background: #2a2a2a;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 2px solid #ffd000;
}

.breaker-row {
  display: grid;
  /* slot · amps+GFI · color swatch · load name · SKU */
  grid-template-columns: 32px 64px 28px minmax(0, 1.1fr) minmax(0, 1fr);
  min-height: 40px;
  background: #aaa;
}

.breaker-row > span {
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
  padding: 6px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
}
.breaker-row .brk-slot { justify-content: center; font-weight: 700; }
.breaker-row .brk-amps { font-weight: 600; }
.breaker-row .brk-leg  { justify-content: center; padding: 6px 4px; }
.breaker-row .brk-load { font-weight: 600; }
.breaker-row .brk-sku  { font-size: 0.78rem; color: #ddd; }
.breaker-row.used.voltage-240 .brk-sku { color: #444; }

.breaker-row > span:last-child {
  border-right: 0;
}

.breaker-row.used {
  background: #3d3d3d;
  color: #fff;
}

.breaker-row.used.voltage-240 {
  background: #f5f5f5;
  color: #111;
}

.breaker-row.used.voltage-120 {
  background: #3d3d3d;
  color: #fff;
}

/* 2-pole 240V breakers — the .pole-top + .pole-bottom pair of rows
   gets a bold outline that wraps both as ONE physical breaker. The
   shared edge between them is suppressed so the outline reads as a
   single rectangle around both slots. */
.breaker-row.pole-top {
  border-top: 3px solid #111;
  border-left: 3px solid #111;
  border-right: 3px solid #111;
}
.breaker-row.pole-top > span {
  border-bottom: 1px dashed rgba(0, 0, 0, 0.25);
}
.breaker-row.pole-bottom {
  border-bottom: 3px solid #111;
  border-left: 3px solid #111;
  border-right: 3px solid #111;
}

.breaker-circuit {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: center;
  font-size: 0.78rem;
  font-weight: 900;
}

/* Breaker-leg color swatches (no text — the legend at the top of the
   panel diagram explains what each color means, so we don't repeat
   "BLACK"/"RED" on every 240V breaker row). */
.wire-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}
.wire-black { background: #050505; border-color: #050505; }
.wire-red   { background: var(--red); border-color: var(--red); }
.wire-white { background: #fff; }

.actuator-bar {
  display: grid;
  grid-template-columns: 72px 1fr;
  min-height: 32px;
}

.actuator-bar span {
  padding: 6px 8px;
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
  font-size: 0.86rem;
}

.actuator-bar span:first-child {
  background: var(--dark-red);
  color: #fff;
  font-weight: 800;
}

.actuator-bar-disabled span {
  background: repeating-linear-gradient(45deg, #d6d6d6, #d6d6d6 4px, #c6c6c6 4px, #c6c6c6 8px);
  color: #888;
}

.actuator-bar-disabled span:first-child {
  background: #b3b3b3;
}

.work-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.note-box {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #faf6ec;
}

.note-box span {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.note-box strong {
  display: block;
  margin-top: 4px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(120%);
  padding: 10px 14px;
  border-radius: 8px;
  background: #17212b;
  color: #fff;
  font-weight: 800;
  transition: transform 160ms ease;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

/* --- Show Work sectioned chapters ------------------------------------------ */

.work-chapter {
  margin: 0 0 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.work-chapter-title {
  margin: 0;
  padding: 10px 14px;
  background: var(--blue);
  color: #fff;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.work-chapter .trace-table {
  margin-bottom: 0;
}

.work-chapter > .chapter-blurb {
  margin: 10px 14px 6px;
}

.work-chapter > h4.chapter-subhead {
  margin: 14px 14px 6px;
}

.work-chapter > table.trace-table:last-child,
.work-chapter > section:last-child {
  margin-bottom: 0;
}

.chapter-subhead {
  margin: 14px 0 6px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue);
}

.chapter-blurb {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: var(--muted);
}

.candidates-table td {
  font-size: 0.82rem;
  vertical-align: top;
}

.candidates-table .row-selected {
  background: var(--green-2);
}

.candidates-table .row-rejected {
  background: #f4f4f4;
  color: #6b6b6b;
}

.cand-check {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 6px;
  padding: 2px 0;
  font-size: 0.8rem;
}

.cand-check b {
  font-weight: 800;
}

.cand-check.ok b { color: #2c7a2c; }
.cand-check.fail b { color: var(--red); }
.cand-check span { color: var(--muted); }

.cand-verdict {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.cand-verdict.selected {
  background: #2c7a2c;
  color: #fff;
}

.cand-verdict.eligible {
  background: #e0e6cb;
  color: #4f5b1f;
}

.cand-verdict.rejected {
  background: #ddd;
  color: #555;
}

.cand-footer {
  background: #f8f9fa !important;
  color: var(--muted);
  font-size: 0.78rem;
  font-style: italic;
  text-align: center;
  padding: 6px 10px !important;
}

/* --- Catalog tab ---------------------------------------------------------- */

#catalogBrowser {
  padding: 16px;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
}

.catalog-toolbar {
  flex-wrap: wrap;
  gap: 10px;
}

.catalog-search {
  flex: 1 1 220px;
  min-width: 180px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.catalog-search:focus {
  outline: none;
  border-color: var(--blue-2);
  box-shadow: 0 0 0 2px rgba(18, 150, 187, 0.18);
}

.catalog-section {
  margin-bottom: 18px;
}

.catalog-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding: 8px 10px;
  background: var(--blue);
  color: #fff;
  font-weight: 850;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 2;
}

.catalog-section-count {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.92;
}

.catalog-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.85rem;
}

.catalog-table th,
.catalog-table td {
  border: 1px solid var(--line);
  padding: 7px 9px;
  vertical-align: middle;
  text-align: left;
}

.catalog-table th {
  background: #f2ead4;
  color: var(--blue);
  font-size: 0.74rem;
  text-transform: uppercase;
  position: sticky;
  top: 38px;
  z-index: 1;
}

.catalog-table .cat-toggle,
.catalog-table .cat-toggle-h {
  width: 60px;
  text-align: center;
}

.catalog-table .cat-sku,
.catalog-table .cat-sku-h {
  width: 150px;
  font-family: "Times New Roman", Times, Georgia, serif;
  font-weight: 700;
  word-break: break-all;
}

.catalog-table .cat-desc,
.catalog-table .cat-desc-h {
  min-width: 220px;
}

.catalog-row.is-disabled {
  background: #f6f6f6;
  color: var(--gray-2);
}

.catalog-row.is-disabled .cat-sku {
  text-decoration: line-through;
  text-decoration-color: var(--gray-2);
}

.catalog-empty {
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

/* Toggle switch (iPad-friendly tap target) */

.sku-toggle {
  display: inline-block;
  position: relative;
  width: 42px;
  height: 24px;
  cursor: pointer;
  user-select: none;
}

.sku-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.sku-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--gray);
  border-radius: 999px;
  transition: background 140ms ease;
}

.sku-toggle-slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 140ms ease;
}

.sku-toggle input:checked + .sku-toggle-slider {
  background: var(--blue-2);
}

.sku-toggle input:checked + .sku-toggle-slider::before {
  transform: translateX(18px);
}

.sku-toggle input:focus-visible + .sku-toggle-slider {
  box-shadow: 0 0 0 2px rgba(11, 79, 108, 0.35);
}

.sku-toggle-fixed {
  display: inline-block;
  font-size: 1rem;
  color: var(--gray-2);
}

@media (max-width: 1080px) {
  .topbar {
    display: block;
  }

  .summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    margin-top: 14px;
  }

  .app-grid {
    grid-template-columns: 1fr;
  }

  .input-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 680px) {
  .shell {
    padding: 12px;
  }

  h1 {
    font-size: 1.7rem;
  }

  .topbar-logo {
    height: 58px;
  }

  .summary-strip,
  .work-notes {
    grid-template-columns: 1fr;
  }

  .field {
    grid-template-columns: 1fr;
  }

  .tabbar {
    grid-template-columns: 1fr;
  }

  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .relay-legend {
    grid-template-columns: 1fr;
  }

  .relay-legend span {
    border-right: 0;
    border-bottom: 1px solid #111;
  }

  .relay-legend span:last-child {
    border-bottom: 0;
  }
}