/* VanWire front end.
   Two jobs: a form that's quick to fill in on a laptop, and a print stylesheet
   that turns the same page into the A3 pack without a second template to keep
   in step. Everything print-specific is at the bottom. */

:root {
  --ink: #16191d;
  --muted: #6b7280;
  --line: #e3e6ea;
  --bg: #f6f7f9;
  --red: #c0392b;
  --amber: #b45309;
  --green: #15803d;
  --accent: #1f4e79;
}

* { box-sizing: border-box; }

/* Nothing may make the PAGE wider than the screen. One over-wide table used to
   push the whole layout sideways on a phone, so the white panel ended part-way
   across and its edge cut straight through the text next to it. Anything too
   wide now scrolls inside its own box instead of dragging the page with it. */
html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.masthead { background: var(--accent); color: #fff; padding: 40px 0 34px; }
.masthead h1 { margin: 0 0 6px; font-size: 34px; letter-spacing: -0.5px; }
.masthead p { margin: 0; max-width: 60ch; opacity: 0.9; }

.layout { padding-top: 28px; padding-bottom: 60px; }

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 22px;
}

.panel h2, section > h2 { margin: 0 0 6px; font-size: 19px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

section + section { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- tabs -- */
/*
   THE PANELS ARE ONLY HIDDEN ONCE JAVASCRIPT SAYS SO.

   The hiding rule is scoped to .tabbed, a class the script adds to #report on
   startup. Without it every panel stays visible and the page is the long
   scroller it always was — which is the correct fallback, because a tab strip
   that cannot switch would otherwise leave six sevenths of a paid-for design
   permanently invisible.
*/

.tabbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.tabs { display: flex; flex-wrap: wrap; gap: 2px; }

.tab {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 6px 6px 0 0;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  /* Sit ON the bar's own line so the selected tab joins up with its panel. */
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink); background: #f1f3f5; }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A tab with nothing behind it — no van picked, so no drawing — is worse than
   no tab. The script sets this rather than leaving a button that does nothing. */
.tab[hidden] { display: none; }

.tabbed .tabpanel { display: none; }
.tabbed .tabpanel.is-open { display: block; }

/* Each panel starts a fresh surface, so drop the divider rule that assumed
   every section was stacked under the last one. */
.tabpanel > section + section { margin-top: 0; padding-top: 0; border-top: 0; }

.hint { margin: 0 0 14px; color: var(--muted); font-size: 14px; max-width: 72ch; }
.opt { color: var(--muted); font-weight: 400; font-size: 12px; }
.unit { color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------- inputs -- */

label { display: block; font-size: 13px; font-weight: 600; color: #374151; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; align-self: end; }

input[type="number"], input[type="text"], select {
  width: 100%;
  margin-top: 5px;
  padding: 8px 10px;
  font: inherit;
  font-size: 15px;
  border: 1px solid #cfd4da;
  border-radius: 6px;
  background: #fff;
}
label.check input { width: auto; margin: 0; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }

button { font: inherit; cursor: pointer; border-radius: 6px; }
.primary { background: var(--accent); color: #fff; border: 0; padding: 10px 18px; font-weight: 600; }
.ghost { background: #fff; border: 1px dashed #c3c9d0; color: #374151; padding: 8px 14px; margin-top: 12px; }
.primary:hover { background: #163c5c; }

/* -------------------------------------------------------- loads table -- */

/* The box a wide table lives in. The negative margin lets the scrolling area
   run to the panel's edges, so a row does not appear to stop short of it. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -24px;
  padding: 0 24px;
}
.scroll-note { display: none; margin: 10px 0 0; }

.loads { width: 100%; border-collapse: collapse; font-size: 14px; }
.loads th {
  text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--muted); padding: 0 6px 8px; font-weight: 600;
}
.loads th span { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; }
.loads td { padding: 3px 6px; }
.loads td.name { min-width: 190px; }
.loads td input { margin-top: 0; padding: 6px 8px; font-size: 14px; }
.loads td:not(.name) input { width: 78px; }
.loads tr.off { opacity: 0.4; }
.tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px;
  background: #eef2f7; color: var(--accent); font-size: 10px; font-weight: 700; vertical-align: middle;
}

/* ------------------------------------------------------------- report -- */

.report.stale { opacity: 0.35; }
.error { color: var(--red); font-weight: 600; margin-top: 18px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.tile-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.tile strong { display: block; font-size: 27px; line-height: 1.2; margin: 3px 0 2px; letter-spacing: -0.5px; }
.tile-sub { font-size: 12px; color: var(--muted); }

.diagram { overflow-x: auto; }
.diagram svg { max-width: 100%; height: auto; display: block; }

.results { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 12px; }
.results th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted); border-bottom: 1px solid var(--line); padding: 0 10px 8px; font-weight: 600;
}
.results td { padding: 8px 10px; border-bottom: 1px solid #f0f2f4; vertical-align: top; }
.results tr:last-child td { border-bottom: 0; }
.results .muted { color: var(--muted); }
.results .flag { color: var(--red); font-weight: 600; }

/* Solar-by-month chart. */
.chart { display: flex; align-items: flex-end; gap: 8px; height: 150px; margin: 16px 0 10px; }
.bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.bar-fill { width: 100%; background: #cbd5e1; border-radius: 3px 3px 0 0; }
.bar.good .bar-fill { background: var(--green); }
.bar-label { font-size: 11px; color: var(--muted); margin-top: 5px; }
.bar-value { position: absolute; top: -2px; font-size: 10px; color: var(--muted); }
.chart-key { font-size: 13px; color: var(--muted); margin: 0; }

.note { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f2f4; font-size: 14px; }
.note:last-child { border-bottom: 0; }
.note-level {
  flex: 0 0 74px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; padding-top: 3px;
}
.note.critical .note-level { color: var(--red); }
.note.warning .note-level { color: var(--amber); }
.note.info .note-level { color: var(--muted); }
.note.critical { font-weight: 500; }

.crib { margin: 10px 0 0; padding: 0; list-style: none; }
.crib li { padding: 9px 0 9px 34px; border-bottom: 1px solid #f0f2f4; position: relative; font-size: 14px; }
.crib li::before {
  content: ""; position: absolute; left: 2px; top: 10px;
  width: 15px; height: 15px; border: 1.5px solid #9aa3ad; border-radius: 3px;
}

.disclaimer { font-size: 13px; color: var(--muted); text-align: center; margin: 26px 0 0; }

.print-only { display: none; }

/* --------------------------------------------------------------- phone -- */
/* Nine columns will not fit on a phone and squeezing them makes every number
   unreadable. Better to keep them a usable size and let the table slide. */

@media (max-width: 700px) {
  .wrap { padding: 0 14px; }
  .panel { padding: 18px 14px; }
  .table-scroll { margin: 0 -14px; padding: 0 14px; }
  .masthead { padding: 26px 0 22px; }
  .masthead h1 { font-size: 27px; }

  .loads { min-width: 620px; }
  .results { min-width: 460px; }
  .scroll-note { display: block; }

  /* A full-width control is easier to hit than a neat one. */
  .grid { grid-template-columns: 1fr; }
  .reg-row input { max-width: none; }

  /* iOS zooms the whole page in on any field under 16px. That zoom is what
     leaves the page scrolled sideways afterwards, which reads as the layout
     being broken. */
  input[type="number"], input[type="text"], select { font-size: 16px; }
  .loads td input { font-size: 16px; }
  .loads td:not(.name) input { width: 72px; }
}

/* -------------------------------------------------------------- print -- */
/* The pack: A3 landscape so the diagram is legible at arm's length in a van,
   and so the circuit table doesn't split a circuit across two pages. */

@media print {
  @page { size: A3 landscape; margin: 14mm; }

  body { background: #fff; font-size: 11pt; }
  .wrap { max-width: none; padding: 0; }
  .no-print, .masthead { display: none !important; }
  .print-only { display: block; }

  /* THE PACK IS NOT TABBED. On screen you look at one thing at a time; on
     paper you want the lot, because the pack goes out to the van with you and
     there is nothing to click. So every panel prints, whichever tab happens to
     be open, and the tab strip itself does not print at all. */
  .tabbed .tabpanel, .tabpanel { display: block !important; }
  .tabbar { display: none !important; }

  .panel {
    border: 0;
    padding: 0;
    margin: 0 0 14mm;
    /* Never split a table or a warning list across a page — half a circuit
       list is worse than a page with white space at the bottom. */
    break-inside: avoid;
  }

  .page-break { break-before: page; }
  .page-diagram { break-after: page; }

  .diagram { overflow: visible; }
  .diagram svg { width: 100%; height: auto; }

  /* On paper there is room for everything — nothing scrolls, nothing is cut. */
  .table-scroll { overflow: visible; margin: 0; padding: 0; }
  .loads, .results { min-width: 0; }
  .scroll-note { display: none !important; }

  .results { font-size: 10pt; }
  .results td, .results th { padding: 5px 8px; }
  .note { break-inside: avoid; }
  .crib li { padding-top: 11px; padding-bottom: 11px; }

  h2 { font-size: 15pt; margin-bottom: 4mm; }
  .report.stale { opacity: 1; }
}

/* --------------------------------------------------- registration lookup -- */

.reg-lookup { margin-bottom: 18px; }
.reg-row { display: flex; gap: 8px; margin-top: 5px; }
.reg-row input {
  margin-top: 0;
  max-width: 190px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  /* The familiar yellow plate — it tells people what to type without a label. */
  background: #f5d306;
  border-color: #c9ae08;
  color: #111;
}
.reg-row input::placeholder { color: #7a6a08; font-weight: 600; letter-spacing: 1px; }
.reg-row button { white-space: nowrap; }

.reg-msg { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.reg-msg.ok { color: var(--green); font-weight: 600; }
.reg-msg.warn { color: var(--amber); }

/* ------------------------------------------------------- explain yourself -- */
/* The person using this is usually converting their first van. The jargon is
   not decoration — a cable really is sized on voltage drop — but nobody should
   have to already know the word to use the tool. So every technical term has a
   "?" beside it, and every warning can explain itself in plain English. */

.help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-left: 5px;
  border-radius: 50%;
  background: #dfe4ea;
  color: #46505c;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
}
.help:hover { background: var(--accent); color: #fff; }

.help-pop {
  display: block;
  margin: 8px 0 2px;
  padding: 12px 14px;
  max-width: 46ch;
  background: #fffdf2;
  border: 1px solid #e6dcae;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.help-pop strong { display: block; margin-bottom: 5px; }

.plain-toggle {
  display: block;
  margin-top: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.plain {
  margin-top: 8px;
  padding: 12px 14px;
  background: #f7f9fb;
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-size: 13.5px;
  line-height: 1.55;
}
.plain p { margin: 0 0 8px; }
.plain p:last-child { margin-bottom: 0; }
.plain-title { font-weight: 700; }

@media print {
  /* On paper there is nobody to click, so every explanation is simply there. */
  .help { display: none; }
  .plain-toggle { display: none; }
  .plain { display: block !important; background: #fff; }
}

/* ------------------------------------------------------------- the basket -- */
.basket-total { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }
.buy {
  display: inline-block; margin-top: 6px; text-decoration: none;
  background: var(--green); padding: 12px 20px;
}
.buy:hover { background: #116634; }
#basket a { color: var(--accent); }