/* Kalmark (Noresys's store planner). Mobile first; one breakpoint at 60rem.
   The inlined layout SVG brings its own <style> (store_solver/svg.py), which applies page-wide. Never use its class
   names here: small dim lbl wall eq glass funded dry produce bakery chilled frozen drinks checkout. */

:root {
  --ink: #1d2320;
  --muted: #56605b;
  --line: #d5dbd7;
  --bg: #ffffff;
  --surface: #f3f6f4;
  --brand: #0b6446;
  --brand-dark: #07472f;
  --brand-ink: #ffffff;
  --note-bg: #fff5d6;
  --note-line: #d99a00;
  --error: #b3261e;
  --error-bg: #fdeceb;
  --radius: 0.5rem;
  --gap: 1rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

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

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

a { color: var(--brand); text-underline-offset: 0.15em; }
a:hover { color: var(--brand-dark); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5rem; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
p, ul { margin: 0 0 0.75rem; }
code { font-size: 0.9em; background: var(--surface); padding: 0 0.25em; border-radius: 0.2em; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--brand); color: var(--brand-ink); padding: 0.5rem 1rem; z-index: 10;
}
.skip:focus { left: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- frame */
.site-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; color: var(--ink); text-decoration: none; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.95rem; }
/* the language link (templates/_lang.html): the other language's name, a 44 px target */
.site-lang { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  font-size: 0.95rem; font-weight: 600; }
@media (max-width: 44.99rem) {           /* a phone: the language on the brand's line, the nav on its own below */
  .site-lang { order: 1; margin-left: auto; }
  .site-header nav { order: 2; flex-basis: 100%; }
}
:lang(nb) h1, :lang(nb) h2 { hyphens: auto; overflow-wrap: break-word; }

main { max-width: 72rem; margin: 0 auto; padding: 1rem; }

.site-footer {
  max-width: 72rem; margin: 2rem auto 0; padding: 1rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.875rem;
}
.site-footer a { white-space: nowrap; }     /* a link's name never splits over two lines */

.lead { font-size: 1.1rem; color: var(--muted); max-width: 42rem; }
.muted, .hint { color: var(--muted); }
.hint { font-size: 0.875rem; }
.prose { max-width: 44rem; }
.prose h2 { margin-top: 1.75rem; }
.prose li { margin-bottom: 0.4rem; }

/* --- buttons */
.button {
  display: inline-block; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  padding: 0.6rem 1.1rem; border-radius: var(--radius);
  border: 2px solid var(--brand); background: var(--bg); color: var(--brand);
}
.button:hover { background: var(--surface); }
.button-primary { background: var(--brand); color: var(--brand-ink); }
.button-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--brand-ink); }

/* --- planner form */
.planner { display: grid; gap: 1.5rem; }
.inputs, .outputs > section, .alert { min-width: 0; }
.outputs { display: grid; gap: 1.5rem; min-width: 0; }

.inputs { background: var(--surface); border-radius: var(--radius); padding: 1rem; align-self: start; }

.field { margin-bottom: 0.9rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.field input {
  width: 100%; max-width: 12rem; font: inherit; padding: 0.5rem 0.6rem;
  border: 1px solid #8a948f; border-radius: 0.35rem; background: var(--bg); color: var(--ink);
}
.field .hint { margin: 0.2rem 0 0; }
.field.invalid input { border: 2px solid var(--error); }
.field-error { color: var(--error); font-size: 0.875rem; font-weight: 600; margin: 0.25rem 0 0; }

fieldset { border: 0; padding: 0; margin: 0 0 0.9rem; min-width: 0; }
legend { font-weight: 600; padding: 0; margin-bottom: 0.25rem; }
.check { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.3rem 0; cursor: pointer; }
.check input { width: 1.2rem; height: 1.2rem; margin: 0.15rem 0 0; flex: none; accent-color: var(--brand); }
.choices.invalid legend { color: var(--error); }

.submit-row { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0 0; }
.busy { visibility: hidden; color: var(--muted); font-size: 0.875rem; }
.planner.htmx-request .busy { visibility: visible; }
.planner.htmx-request .outputs, .planner.htmx-request .summary { opacity: 0.6; transition: opacity 0.2s 0.15s; }

/* phones: the price and the store at a glance, above the inputs, so a change shows its effect at once */
.summary { border: 2px solid var(--brand); border-radius: var(--radius); padding: 0.6rem 0.9rem; }
.summary p { margin: 0; }
.summary-price { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.summary-price .hint { display: block; font-weight: 400; }

.alert {
  border-left: 4px solid var(--error); background: var(--error-bg); padding: 0.75rem 1rem; border-radius: 0.25rem;
}
.alert h2 { font-size: 1.05rem; color: var(--error); }
.alert p:last-child { margin: 0; }

.note {
  border-left: 4px solid var(--note-line); background: var(--note-bg); padding: 0.5rem 0.75rem; border-radius: 0.25rem;
}

/* --- results */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.75rem; }
.stat {
  display: flex; flex-direction: column; gap: 0.1rem;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem;
}
.stat-label { font-size: 0.875rem; color: var(--muted); }
.stat-value { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-hint { font-size: 0.8rem; color: var(--muted); }
.stat-main .stat-value { font-size: 1.45rem; color: var(--brand-dark); }
.breakeven .stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

.price-card { border: 2px solid var(--brand); border-radius: var(--radius); padding: 1rem; }
.price-value { font-size: 1.8rem; font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-terms { color: var(--muted); }

.cta { margin-top: 1rem; }
.cta .button { width: 100%; text-align: center; }
.cta .hint { margin-top: 0.5rem; }
.cta-final { background: var(--surface); border-radius: var(--radius); padding: 1rem; }

.band { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.band-meter { display: inline-flex; gap: 3px; }
.band-meter span { width: 1.4rem; height: 0.8rem; border-radius: 2px; background: var(--line); }
.band-1 span:nth-child(-n+1), .band-2 span:nth-child(-n+2), .band-3 span:nth-child(-n+3),
.band-4 span:nth-child(-n+4), .band-5 span:nth-child(-n+5) { background: var(--brand); }

.layout-sketch figure { margin: 0; }
.layout-sketch figure > svg { display: block; width: 100%; height: auto; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; }
.layout-sketch figcaption { margin-top: 0.5rem; }
.sketch-key { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; margin: 0 0 0.5rem; padding: 0;
  font-size: 0.875rem; }
.sketch-key li { display: flex; align-items: center; gap: 0.4rem; }
.key-swatch { width: 1rem; height: 1rem; flex: none; }
.notes { border-left: 4px solid var(--note-line); background: var(--note-bg); padding: 0.5rem 0.75rem;
  border-radius: 0.25rem; margin-bottom: 0.75rem; }
.notes ul { margin: 0; padding-left: 1.1rem; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 0.4rem 0.5rem 0.4rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.nw { white-space: nowrap; }                /* a figure range in running text (templating.nowrap_ranges) */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bom-family th { padding-top: 0.9rem; font-size: 0.9rem; color: var(--muted); border-bottom: 1px solid var(--ink); }
.tag { display: inline-block; font-size: 0.75rem; padding: 0 0.4rem; border-radius: 1rem; background: var(--surface);
  border: 1px solid var(--line); color: var(--muted); }
.costs { margin: 1rem 0 0.5rem; }
.costs caption { text-align: left; font-weight: 600; padding-bottom: 0.25rem; }
.costs th { font-weight: 400; }
.costs th .hint { display: block; }
.costs tfoot th, .costs tfoot td { font-weight: 700; border-bottom: 0; }

.assumptions { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.assumptions legend { font-size: 1.05rem; float: left; width: 100%; margin-bottom: 0.75rem; }
.fields-grid { clear: both; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 1rem; }
.fields-grid .field { display: flex; flex-direction: column; justify-content: flex-end; }
.fields-grid .field input { max-width: 100%; }

/* --- offer gate (/offer): the plan summary, then the contact form */
.offer { display: grid; gap: 1.5rem; }
.offer-plan { background: var(--surface); border-radius: var(--radius); padding: 1rem; align-self: start; }
.facts { margin: 0 0 0.75rem; display: grid; gap: 0.5rem; }
.facts dt { font-size: 0.875rem; color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }
.facts .hint { display: block; font-weight: 400; }
.offer-form { max-width: 34rem; }
.offer-form .field input { max-width: 100%; }
.offer-form .field input[type="file"] { border: 0; padding: 0.25rem 0; }
.consent { margin: 0.25rem 0 0.9rem; }
.error-summary { margin-bottom: 1.5rem; }
.error-summary ul { margin: 0; padding-left: 1.1rem; }
.error-summary a { color: var(--error); font-weight: 600; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* --- wide screens: inputs left (sticky), results right */
@media (min-width: 60rem) {
  h1 { font-size: 2rem; }
  main { padding: 1.5rem; }
  .planner { grid-template-columns: 19rem minmax(0, 1fr); align-items: start; }
  .summary { display: none; }                      /* the results sit beside the inputs */
  .inputs { position: sticky; top: 1rem; }
  .layout-sketch figure > svg { max-height: 80vh; }
  .cta .button { width: auto; }
  .offer { grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; }
  .offer-plan { order: 2; position: sticky; top: 1rem; }
}

/* --- map page (home): static/map.css, loaded by templates/map.html only (journey v2). */