:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --ink-muted: #898781;
  --gridline: #e1e0d9;
  --baseline: #c3c2b7;
  --accent: #2a78d6;
  --accent-2: #eb6834;
  --border: rgba(11,11,11,0.10);
  --panel-bg: #ffffff;
  --input-bg: #fff;
  --warn: #fab219;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --ink-muted: #898781;
    --gridline: #2c2c2a;
    --baseline: #383835;
    --accent: #3987e5;
    --accent-2: #d95926;
    --border: rgba(255,255,255,0.10);
    --panel-bg: #17181c;
    --input-bg: #20222a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface: #1a1a19;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --ink-muted: #898781;
  --gridline: #2c2c2a;
  --baseline: #383835;
  --accent: #3987e5;
  --accent-2: #d95926;
  --border: rgba(255,255,255,0.10);
  --panel-bg: #17181c;
  --input-bg: #20222a;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  border-bottom: 1px solid var(--border);
  background: var(--panel-bg);
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
}
.app-header h1 { font-size: 16px; margin: 0; font-weight: 700; white-space: nowrap; }
.header-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.header-controls label { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.header-controls input { width: 110px; }
.status-msg { font-size: 12px; color: var(--ink-muted); min-width: 90px; }
.status-msg.error { color: #d03b3b; }
.status-msg.busy { color: var(--accent); }
.lambda-out { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.preset-row { margin-bottom: 10px; }
.preset-row label { flex: 1 1 auto; }

.pattern-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-2);
  margin-left: auto;
  cursor: pointer;
  white-space: nowrap;
}
.pattern-toggle input { cursor: pointer; }

.app-main {
  flex: 1 1 auto;
  display: grid;
  /* editor column carries a 6-column point table (X/Y/Z + editable wire
     length), which is cramped below ~370px */
  grid-template-columns: 370px 1fr 380px;
  gap: 1px;
  background: var(--border);
  overflow: hidden;
  min-height: 0;
}
@media (max-width: 1100px) {
  .app-main { grid-template-columns: 1fr; overflow-y: auto; }
}

.panel {
  background: var(--panel-bg);
  padding: 12px 14px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  overflow-y: auto;
  min-height: 0;
}
.panel h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin: 18px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel h2:first-child { margin-top: 0; }

input[type="number"], input[type="text"], select {
  background: var(--input-bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 12px;
  width: 100%;
}
label { font-size: 12px; color: var(--ink-2); }
.field-row {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.field-row label { display: flex; flex-direction: column; gap: 3px; min-width: 70px; flex: 1 1 auto; }

button {
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--ink);
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 12px;
}
button:hover { border-color: var(--accent); }
.small-btn { font-size: 11px; padding: 2px 8px; }

.wire-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.wire-tab { background: var(--input-bg); }
.wire-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.wire-tab.role-counterpoise:not(.active) { border-color: var(--accent-2); }
.cp-badge { font-size: 9px; font-weight: 700; opacity: 0.8; border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; margin-left: 2px; }
.add-wire-btn { border-style: dashed; }
.counterpoise-add { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; background: rgba(127,127,127,0.06); padding: 8px; border-radius: 6px; margin-bottom: 10px; }
.counterpoise-add label { display: flex; flex-direction: column; gap: 2px; }
.counterpoise-add input { width: 60px; }
.counterpoise-add .hint { flex-basis: 100%; margin: 0 0 2px; }

.remove-wire-btn { color: #d03b3b; align-self: flex-end; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.point-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; table-layout: fixed; }
.point-table th { font-size: 10px; color: var(--ink-muted); text-align: left; font-weight: 500; padding: 2px 3px; }
.point-table td { padding: 2px 3px; }
.point-table input { width: 100%; padding: 4px 3px; }
/* fixed layout: index and delete columns take only what they need so the four
   number columns share the rest evenly */
.point-table th:first-child, .point-table td:first-child { width: 16px; }
.point-table th:last-child, .point-table td:last-child { width: 22px; }
.point-table .seg-len { white-space: nowrap; }
/* the length column is derived from the other three - dim it a shade so the
   table still reads as "coordinates, and here is what they add up to" */
.point-table .seg-len input { background: transparent; }
.point-table .seg-len-dash { color: var(--ink-muted); }
.del-point { color: #d03b3b; padding: 1px 6px; }

.hold-length { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-muted); margin: 6px 0 8px; cursor: pointer; }
.hold-length input { width: auto; }

.total-length { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.total-length label { display: flex; align-items: baseline; gap: 4px; font-size: 11px; color: var(--ink-muted); }
.total-length input { width: 80px; }
.total-length .hint { margin: 0; flex: 1 1 180px; }
.geom-note:empty { display: none; }
.geom-note { color: var(--accent-2); }

.quick-add { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; background: rgba(127,127,127,0.06); padding: 8px; border-radius: 6px; margin-bottom: 6px; }
.quick-add label { display: flex; flex-direction: column; gap: 2px; }
.quick-add input { width: 70px; }
.quick-add .hint { flex-basis: 100%; margin: 0 0 2px; }

.hint { font-size: 11px; color: var(--ink-muted); margin: 2px 0 8px; }
.disclaimer { font-size: 11px; color: var(--ink-muted); margin-top: 20px; line-height: 1.5; border-top: 1px solid var(--border); padding-top: 10px; }

.load-row { border: 1px solid var(--border); border-radius: 6px; padding: 8px; margin-bottom: 8px; }
.label-input { flex: 1 1 auto; font-weight: 600; }
.del-load { color: #d03b3b; }

.view-panel { display: flex; flex-direction: column; padding: 8px; }
.view-tabs, .result-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.canvas-host { position: relative; flex: 1 1 auto; min-height: 300px; }
.canvas-host canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; touch-action: none; }
.view-hint { font-size: 11px; color: var(--ink-muted); text-align: center; padding: 4px; }
.pen-height-row { display: flex; justify-content: center; padding: 4px; }
.pen-height-row label { display: flex; gap: 6px; align-items: center; }
.pen-height-row input { width: 80px; }

.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.result-item { background: rgba(127,127,127,0.06); border-radius: 6px; padding: 8px 10px; }
.rlabel { display: block; font-size: 10px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.rvalue { display: block; font-size: 16px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.rvalue.good { color: #0ca30c; }
.rvalue.warn { color: #d03b3b; }
.rsub { display: block; font-size: 10px; color: var(--ink-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }

.pattern-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pattern-col { flex: 1 1 220px; min-width: 200px; }
.pattern-title, .chart-title { font-size: 11px; color: var(--ink-2); margin-bottom: 4px; text-align: center; }
.polar-canvas { width: 100%; aspect-ratio: 1 / 1; border-radius: 6px; }
.pattern-col input[type="range"] { width: 100%; }

.line-chart { width: 100%; height: 140px; border-radius: 6px; margin-bottom: 12px; }

/* Phone-width layout: bigger touch targets, no iOS input auto-zoom, and a
   taller default canvas since the view panel no longer has a fixed-height
   row to stretch into (see .app-main's 1100px breakpoint above). Placed last
   so these overrides win the cascade against the base rules of the same
   specificity defined earlier in this file. */
@media (max-width: 720px) {
  .app-header { padding: 10px 14px; }
  .header-controls { width: 100%; }
  /* stack each control's label above its input instead of side-by-side -
     matches .field-row's pattern elsewhere and gives the input full width
     to tap instead of a cramped 110px box */
  .header-controls label {
    flex-direction: column;
    align-items: stretch;
    white-space: normal;
    gap: 4px;
    flex: 1 1 130px;
  }
  .header-controls input, .header-controls select { width: 100%; }
  .pattern-toggle { margin-left: 0; }

  /* 16px stops iOS Safari's zoom-on-focus (anything smaller triggers it) */
  input[type="number"], input[type="text"], select { font-size: 16px; padding: 7px 8px; }

  button { min-height: 40px; padding: 8px 14px; }
  .small-btn { min-height: 34px; padding: 6px 12px; }
  .wire-tab { min-height: 38px; }
  .del-point { min-width: 34px; min-height: 34px; padding: 0; font-size: 15px; }

  .panel { padding: 12px; }

  /* canvas-host has no intrinsic content height (the canvas is
     position:absolute) - on the single-column layout above nothing forces
     it taller than this floor, so raise the floor for a usable 3D/plan view */
  .canvas-host { min-height: 380px; }

  .point-table th, .point-table td { padding: 6px 3px; }
  /* below this the fixed-layout columns get too narrow to type into
     comfortably - let the table scroll horizontally instead of squeezing */
  .point-table { min-width: 380px; }

  .result-grid { gap: 6px; }
}

@media (max-width: 420px) {
  .result-grid { grid-template-columns: 1fr; }
}