/* Same palette and panel language as the Cable Tray Arranger and the
   Conduit Fill Calculator. */
:root {
  color-scheme: light;
  --ink: #15202a;
  --muted: #61707d;
  --label: #52606b;
  --line: #d8e0e6;
  --line-soft: #e8edf0;
  --line-strong: #a8b5bf;
  --paper: #f4f7f9;
  --surface: #ffffff;
  --field: #fbfcfd;
  --sidebar: #edf2f5;
  --accent: #ff7a2f;
  --accent-dark: #c94f10;
  --blue: #2d79ff;
  --green: #3d9b68;
  --warning: #d75f16;
  --danger: #ba3030;
  --shadow: 0 12px 34px rgba(20, 32, 42, 0.1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
}

[hidden] { display: none !important; }

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

h1, h2, h3, p { margin: 0; }
h2 { font-size: 1.08rem; line-height: 1.2; letter-spacing: -0.01em; }
.eyebrow { color: var(--muted); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.muted { color: var(--muted); }

/* Buttons */
.panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 0.875rem;
  font-weight: 750;
  cursor: pointer;
}
.button.primary { color: #1b120c; background: var(--accent); }
.button.secondary { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
.button:hover { filter: brightness(1.08); }
.button.secondary:hover { filter: none; background: var(--sidebar); }

/* Layout: inputs on the left, route and results on the right, each
   scrolling on its own. The route table is too wide for the sidebar, so it
   sits at the top of the workspace. */
.app-shell {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(330px, 390px) minmax(0, 1fr);
}

.controls {
  min-height: 0;
  overflow-y: auto;
  border-right: 1px solid var(--line-strong);
  background: var(--sidebar);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.workspace { min-width: 0; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; container-type: inline-size; }
/* Panels keep their full height and the workspace scrolls; without this the
   summary strip, which has a min-height, gets squashed down to it. */
.workspace > * { flex-shrink: 0; }
.results { display: flex; flex-direction: column; gap: 16px; }

.panel, .drawing-panel, .diagnostics, .summary-strip {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.panel { padding: 18px; }
.section-heading, .drawing-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 16px; }
.section-heading .eyebrow, .drawing-heading .eyebrow, .diagnostics .eyebrow { margin-bottom: 4px; }
.section-heading > p { color: var(--muted); font-size: .8rem; }
/* Sidebar panels carry a single grey heading instead of an eyebrow + title. */
.side-heading { margin-bottom: 16px; color: var(--muted); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.collapsible summary .side-heading { margin-bottom: 0; }

/* Fields */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-grid label, .field-label { display: grid; gap: 6px; align-content: start; color: var(--label); font-size: 0.875rem; font-weight: 700; }
.field-label { margin-bottom: 6px; }
.field-wide { grid-column: 1 / -1; }
.field-hint { color: var(--muted); font-size: .75rem; font-weight: 500; line-height: 1.4; }
.mode-fields { margin-top: 14px; }

input[type="text"], input[type="number"], select {
  min-height: 42px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--field);
  color: var(--ink);
  padding: 8px 10px;
}
input[type="number"] { font-variant-numeric: tabular-nums; }
input::placeholder { color: #93a0aa; }
input:focus, select:focus, button:focus-visible, summary:focus-visible { outline: 3px solid rgba(45,121,255,.26); outline-offset: 1px; border-color: var(--blue); }
input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); cursor: pointer; }
input.is-bad { border-color: var(--danger); background: #fbe6e6; }

/* A unit written inside the right-hand end of a number field. */
.unit-input { position: relative; display: block; }
.unit-input input { padding-right: 48px; }
.unit-input i { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: var(--muted); font-size: .8rem; font-style: normal; font-weight: 600; pointer-events: none; }

/* Switches in the same square style as the fields. */
/* position: relative keeps the hidden radios inside the control. Without it they
   sit relative to the page, stay put while the sidebar scrolls, and focusing one
   below the fold scrolls the whole page. */
.segmented {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--field);
}
.segmented.three { grid-template-columns: repeat(3, 1fr); }
.segmented input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.segmented label {
  padding: 8px 10px;
  border-radius: 2px;
  color: var(--label);
  font-size: 0.875rem;
  font-weight: 750;
  text-align: center;
  cursor: pointer;
}
.segmented label:hover { background: var(--sidebar); color: var(--ink); }
.segmented input:checked + label { background: var(--ink); color: #fff; }
.segmented input:focus-visible + label { outline: 3px solid rgba(45,121,255,.26); outline-offset: 1px; }

/* Tables */
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 0 5px 7px; color: var(--muted); text-align: left; vertical-align: bottom; font-size: 0.75rem; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
td { padding: 5px; border-top: 1px solid var(--line-soft); font-size: 0.875rem; white-space: nowrap; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
th.center, td.center { text-align: center; }
.leg-no { width: 1%; color: var(--muted); font-weight: 800; font-variant-numeric: tabular-nums; }
.table-note { color: var(--muted); font-size: 0.8rem; line-height: 1.5; margin-top: 12px; }
.table-note strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.route-help { margin: -6px 0 12px; }

.legs-table .cell-input { min-height: 36px; padding: 6px 7px; font-size: 0.875rem; }
.legs-table input[type="number"] { width: 92px; }
/* Hug the columns rather than spreading them across the panel. */
table.legs-table { width: auto; }
.delete-button { width: 32px; height: 32px; border: 0; background: transparent; color: #7a8791; font-size: 1.25rem; cursor: pointer; }
.delete-button:hover { background: #fff0f0; color: var(--danger); }
.delete-button:disabled { opacity: .35; cursor: not-allowed; background: transparent; color: #7a8791; }

.results-table td { padding: 7px 5px; }
.results-table td.num b { font-weight: 800; }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; font-size: 0.72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.pill.is-pass { background: #e3f2e9; color: #237148; }
.pill.is-fail { background: #fbe6e6; color: #972525; }
.pill.is-warn { background: #fdeee3; color: #a2470f; }
.pill.is-none { background: #e8edf1; color: #53616c; }

/* Summary strip */
.summary-strip { min-height: 74px; display: flex; align-items: stretch; }
.fit-state { min-width: 190px; max-width: 240px; display: flex; align-items: center; gap: 9px; padding: 18px; border-right: 1px solid var(--line); font-weight: 800; }
.state-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(61,155,104,.13); }
.fit-state.idle { color: var(--muted); }
.fit-state.idle .state-dot { background: var(--line-strong); box-shadow: 0 0 0 4px rgba(168,181,191,.2); }
.fit-state.warning .state-dot { background: var(--warning); box-shadow: 0 0 0 4px rgba(215,95,22,.13); }
.fit-state.error .state-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(186,48,48,.13); }
.summary-strip dl { flex: 1; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.summary-strip dl div { min-width: 0; padding: 13px 18px; display: grid; align-content: center; border-right: 1px solid var(--line); }
dt { color: var(--muted); font-size: 0.75rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
dd { margin: 3px 0 0; font-size: 1.08rem; font-variant-numeric: tabular-nums; font-weight: 800; }
dd .pill { font-size: .75rem; }
.dd-sub { display: block; margin-top: 3px; color: var(--muted); font-size: .75rem; font-weight: 600; line-height: 1.35; white-space: normal; }

/* Tension profile */
.drawing-panel { padding: 18px 18px 12px; box-shadow: var(--shadow); }
.drawing-heading { margin-bottom: 10px; }
.legend { display: flex; gap: 13px; flex-wrap: wrap; color: var(--muted); font-size: .8rem; font-weight: 750; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-line { width: 18px; height: 0; display: inline-block; border-top: 3px solid var(--blue); }
.legend-line.limit { border-top: 2px dashed var(--danger); }
.legend-dot { width: 10px; height: 10px; display: inline-block; border-radius: 50%; border: 2px solid var(--accent); background: #fff; }
.chart-shell { border: 1px solid var(--line-strong); background: #f9fbfc; }
.chart-shell svg { display: block; width: 100%; height: auto; }
.chart-note { padding-top: 7px; color: var(--muted); font-size: .75rem; }
.ch-grid { stroke: rgba(96,116,131,.14); stroke-width: 1; }
.ch-axis { stroke: var(--line-strong); stroke-width: 1; }
.ch-txt { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ch-area { fill: rgba(45,121,255,.1); }
.ch-line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; }
.ch-bend { fill: #fff; stroke: var(--accent); stroke-width: 2; }
.ch-end { fill: var(--accent); }
.ch-limit { stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 6 4; }
.ch-limit-txt { fill: var(--danger); font-size: 12px; font-weight: 700; }

/* Checks */
.diagnostics { display: grid; grid-template-columns: minmax(150px, .3fr) 1fr; gap: 20px; padding: 18px; }
.diagnostics .button { margin-top: 14px; }
.diagnostics ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.diagnostics li { position: relative; padding-left: 19px; color: #44525d; font-size: .875rem; line-height: 1.45; }
.diagnostics li::before { content: ""; position: absolute; left: 0; top: .48em; width: 7px; height: 7px; background: var(--blue); }
.diagnostics li.pass::before { background: var(--green); }
.diagnostics li.warning::before { background: var(--warning); }
.diagnostics li.error::before { background: var(--danger); }

/* Weakest component */
.comp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 3px 18px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: .875rem; }
.comp-row:first-child { border-top: 0; padding-top: 0; }
.comp-row .name { font-weight: 700; }
.comp-row .name .pill { margin-left: 8px; vertical-align: 1px; }
.comp-row .v { text-align: right; font-variant-numeric: tabular-nums; }
.comp-row .v.derated { color: var(--muted); }
.comp-row .v.allowed { font-weight: 800; }
.comp-row .det { grid-column: 1 / -1; color: var(--muted); font-size: .8rem; }
.comp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; padding-bottom: 7px; color: var(--muted); font-size: .75rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.comp-head span:not(:first-child) { text-align: right; }

/* Cross-checks */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fact { display: grid; gap: 4px; align-content: start; padding: 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--paper); }
.fact h3 { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
/* Uppercasing μ gives a capital Mu, which reads as M. */
.no-caps { text-transform: none; }
.fact-val { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.fact-sub { color: var(--muted); font-size: .8rem; line-height: 1.4; }

.err-box { padding: 12px 14px; border-left: 3px solid var(--danger); background: #fbe6e6; color: #972525; font-size: .9rem; font-weight: 650; line-height: 1.5; }

/* Collapsible panels: Advanced in the sidebar and Method below the results */
.collapsible summary { display: block; cursor: pointer; list-style: none; }
.collapsible summary::-webkit-details-marker { display: none; }
.collapsible summary .eyebrow { display: block; margin-bottom: 4px; }
.collapsible summary h2::after { content: "+"; margin-left: 10px; color: var(--muted); font-weight: 600; }
.collapsible[open] summary h2::after { content: "−"; }
.adv-summary { display: block; margin-top: 6px; color: var(--muted); font-size: .8rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.advanced[open] .adv-summary { display: none; }
.adv-body { margin-top: 16px; }
.adv-body h3 { margin: 18px 0 10px; color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.adv-body h3:first-child { margin-top: 0; }
.method-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 16px; color: #44525d; font-size: .875rem; line-height: 1.5; }
.method-body h3 { margin-bottom: 8px; color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.method-body ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.formula-label { margin-top: 10px; }
.formula { margin-top: 4px; padding: 8px 10px; overflow-x: auto; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-family: ui-monospace, Consolas, monospace; font-size: .85rem; white-space: nowrap; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.summary-strip dl div:last-child { border-right: 0; }

/* The summary strip follows the workspace width rather than the window,
   since the sidebar takes a fixed share of the window beside it. */
@container (max-width: 1000px) {
  .summary-strip dl { grid-template-columns: 1fr 1fr; }
  .summary-strip dl div:nth-child(2n) { border-right: 0; }
  .summary-strip dl div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 560px) {
  .facts { grid-template-columns: 1fr; }
  .summary-strip { display: block; }
  .fit-state { max-width: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .diagnostics { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* One column that scrolls as a whole. min-height goes back to auto so
     the grid cannot squeeze both panes into the screen height. */
  .app-shell { grid-template-columns: 1fr; overflow-y: auto; }
  .controls, .workspace { min-height: auto; overflow-y: visible; }
  .controls { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .workspace { padding: 14px; }
}

@media (max-width: 580px) {
  .button { padding-inline: 10px; white-space: nowrap; }
  .controls { padding: 14px; }
  .drawing-heading { align-items: flex-start; flex-direction: column; }
  .comp-row, .comp-head { gap: 3px 10px; }
}

@media (prefers-reduced-motion: no-preference) {
  .button, .delete-button, .segmented label { transition: background-color .15s ease, color .15s ease, border-color .15s ease, filter .15s ease; }
}

/* Print the route and results on plain paper, without the buttons. */
@media print {
  html, body { height: auto; overflow: visible; background: #fff; }
  .app-shell { display: block; }
  .controls, .workspace { overflow: visible; background: none; border: 0; padding: 0; }
  .controls { margin-bottom: 16px; }
  .panel-actions, #copyBtn, .delete-button { display: none !important; }
  .panel, .drawing-panel, .diagnostics, .summary-strip { box-shadow: none; break-inside: avoid; }
  .topbar, .pill, .fit-state { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}