/* ----- Tokens ------------------------------------------------------------ */
:root {
  --ink:        #121110;
  --ink-2:      #4A453F;
  --ink-3:      #8C867F;
  --ink-4:      #B8B2AB;
  --line:       #DDD8D2;
  --fill:       #EFEBE6;
  --ground:     #FAF9F7;

  --accent:     #FF4A1C;
  --accent-ink: #FFFFFF;
  --accent-2:   #C6350F;

  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --w-reg: 400;  --w-med: 500;  --w-bold: 700;  --w-black: 800;

  --t-amount:  66px;
  --t-title:   48px;
  --t-lead:    27px;
  --t-section: 23px;
  --t-body:    18px;
  --t-body-lg: 20px;
  --t-label:   13px;
  --t-fine:    14px;

  --tr-tight:  -0.045em;
  --tr-snug:   -0.02em;
  --tr-caps:    0.14em;

  --s-1: 8px;  --s-2: 12px;  --s-3: 16px;  --s-4: 22px;
  --s-5: 32px; --s-6: 40px;  --s-7: 56px;  --s-8: 80px;

  --rule: 3px;
  --hair: 1px;
  --radius: 0;
  --tap-min: 44px;
  --action-h: 82px;
  --screen-max: 480px;
  --pad: 32px;

  --focus: 3px solid var(--accent);
  --focus-offset: 3px;
}

/* ----- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.5;
  font-weight: var(--w-reg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.num, .amount, .row__value, .li__amount, .badge { font-variant-numeric: tabular-nums; }

/* ----- Base elements ----------------------------------------------------- */
h1, h2, h3 { font-weight: var(--w-black); letter-spacing: var(--tr-snug); line-height: 1.0; }
a { color: var(--ink); text-underline-offset: 4px; }
a:hover { color: var(--accent-2); }

:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ----- Layout ------------------------------------------------------------ */
.screen {
  max-width: var(--screen-max);
  min-height: 100dvh;
  margin-inline: auto;
  padding: var(--s-6) var(--pad);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.spacer { flex: 1 1 auto; }
.stack   { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--s-3); }

/* ----- Wordmark ---------------------------------------------------------- */
.brand { display: flex; align-items: center; gap: 10px; }
/* Sized by height so the icon keeps its own 51:36 proportions whatever it is
   replaced with later. It leads the wordmark, so it is set well above the 15px
   name; the folder's eyes and legs need the room to read. No orange tile behind
   it — the mark stands on its own. display:block kills the inline-image
   baseline gap. */
.brand__mark { display: block; height: 32px; width: auto; }
.brand__name { font-size: 15px; font-weight: var(--w-black); letter-spacing: var(--tr-snug); }

/* ----- Type utilities ---------------------------------------------------- */
.label {
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--ink-3);
}
.label--action { color: var(--accent); }
.title  { font-size: var(--t-title); font-weight: var(--w-black); letter-spacing: var(--tr-tight); line-height: .95; }
.lead   { font-size: var(--t-lead); font-weight: var(--w-med); letter-spacing: var(--tr-snug); }
.body   { font-size: var(--t-body); color: var(--ink-2); text-wrap: pretty; }
.fine   { font-size: var(--t-fine); color: var(--ink-3); }
.amount { font-size: var(--t-amount); font-weight: var(--w-black); letter-spacing: var(--tr-tight); line-height: .95; }

/* ----- Dividers ---------------------------------------------------------- */
.rule { height: var(--rule); background: var(--ink); border: 0; }
.hair { height: var(--hair); background: var(--line); border: 0; }

/* ----- The primary action ------------------------------------------------ */
.action {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--action-h);
  padding: 0 var(--s-4);
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: var(--radius);
  font-size: var(--t-body-lg); font-weight: var(--w-bold); letter-spacing: -0.01em;
  text-align: center; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.action:hover  { background: var(--accent-2); color: var(--accent-ink); }
.action:active { transform: translateY(1px); }
.action[disabled], .action[aria-disabled="true"] {
  background: var(--fill); color: var(--ink-4); cursor: not-allowed;
}

.action-link {
  align-self: center; min-height: var(--tap-min);
  display: inline-flex; align-items: center;
  font-size: var(--t-body); font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px;
  background: none; border: 0; cursor: pointer;
}

/* ----- The two-way choice (blueprint §5.8 / §17 rule 7) ------------------ */
.choices { display: flex; flex-direction: column; gap: var(--s-3); }
.choice {
  display: flex; align-items: center;
  width: 100%; min-height: 84px; padding: 0 var(--s-4);
  background: var(--ground); color: var(--ink);
  border: var(--rule) solid var(--ink); border-radius: var(--radius);
  font-size: 24px; font-weight: var(--w-bold); letter-spacing: var(--tr-snug);
  text-align: left; cursor: pointer;
}
.choice:hover { background: var(--fill); }

/* ----- List rows --------------------------------------------------------- */
.row {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--tap-min); padding: 20px 0;
  border-bottom: var(--hair) solid var(--line);
  text-decoration: none; color: var(--ink);
}
.row__index  { width: 26px; font-size: 15px; font-weight: var(--w-bold); color: var(--ink-4); }
.row__main   { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row__title  { font-size: var(--t-section); font-weight: var(--w-bold); letter-spacing: var(--tr-snug); }
.row__subtitle { font-size: 13px; font-weight: var(--w-med); color: var(--ink-3); }
.row__value  { flex: 0 0 auto; white-space: nowrap; font-size: 16px; font-weight: var(--w-med); color: var(--ink-3); }

/* Invoice / cost line item */
.li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.li__label  { font-size: 17px; font-weight: var(--w-med); }
.li__amount { font-size: 17px; font-weight: 600; }
.li--muted .li__label, .li--muted .li__amount { color: var(--ink-3); font-weight: var(--w-med); }
.li--total  .li__label, .li--total  .li__amount { font-size: 19px; font-weight: var(--w-black); color: var(--ink); }

/* ----- Count badge ------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 16px; font-weight: var(--w-black);
}
.badge--quiet { background: transparent; color: var(--ink-3); font-weight: var(--w-med); }

/* ----- Underline input --------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field__input {
  width: 100%; min-height: var(--tap-min); padding: 0 0 14px;
  background: none; border: 0; border-bottom: var(--rule) solid var(--ink);
  border-radius: 0;
  font-size: 24px; font-weight: var(--w-med); color: var(--ink);
}
.field__input::placeholder { color: var(--ink-3); }

/* ----- Document / audio preview placeholder ------------------------------ */
.preview {
  display: flex; align-items: center; justify-content: center;
  min-height: 190px; background: var(--fill);
  border: var(--hair) solid var(--line);
}
.preview img { width: 100%; height: auto; }

/* ----- Status dot -------------------------------------------------------- */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-fine); color: var(--ink-3); }
.status::before { content: ""; width: 8px; height: 8px; background: currentColor; }
.status--attention { color: var(--accent); }
.status--done      { color: var(--ink); }


/* ----- Accessibility ----------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--ink); color: var(--ground); padding: var(--s-2) var(--s-3);
}
.skip-link:focus { left: var(--s-3); }

/* ----- Auto-save status (editor JS) — a quiet inline confirmation --------- */
.save-status {
  display: inline-block; margin-left: var(--s-3);
  font-size: var(--t-fine); color: var(--ink-3);
}
.save-status[data-state="error"] { color: var(--accent-2); }

/* ----- Upload dropzone (map home) — send documents into the pipeline ------ */
.dropzone {
  display: block; text-align: center;
  padding: var(--s-5) var(--s-4);
  border: 2px dashed var(--line); background: var(--ground);
}
.dropzone.dropzone--over { border-color: var(--accent); background: var(--fill); }
.dropzone__label { display: block; cursor: pointer; }
.dropzone__title { display: block; font-weight: var(--w-bold); font-size: var(--t-body); }
.dropzone__hint { display: block; margin-top: var(--s-2); color: var(--ink-3); font-size: var(--t-fine); }
.dropzone__actions {
  margin-top: var(--s-3); display: flex; gap: var(--s-3);
  align-items: center; justify-content: center;
}
.dropzone__status { color: var(--ink-3); font-size: var(--t-fine); }
.dropzone__status[data-state="error"] { color: var(--accent-2); }
.dropzone__input:focus-visible + .dropzone__label { outline: var(--focus); outline-offset: var(--focus-offset); }

/* ----- Deliberate spacing (space is placed, not global — blueprint §17) --- */
.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }

/* ----- Top bar (wordmark left, quarter download right) ------------------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.iconbtn {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: var(--tap-min); padding: 0 var(--s-2);
  background: #fff; border: var(--hair) solid var(--line); border-radius: 8px;
  color: var(--ink); text-decoration: none;
}
.iconbtn:hover { border-color: var(--ink); color: var(--ink); }
.iconbtn__icon { width: 20px; height: 20px; flex: 0 0 auto; }
.iconbtn__text { font-size: 15px; font-weight: var(--w-bold); letter-spacing: var(--tr-snug); color: var(--ink); }
.iconbtn__tag {
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* ----- Search field (map) — the underline field with a leading glyph ------ */
.search { display: flex; align-items: flex-end; gap: var(--s-3);
  border-bottom: var(--rule) solid var(--ink); }
.search__icon { flex: 0 0 auto; width: 22px; height: 22px; margin-bottom: 14px; color: var(--ink); }
.search__input {
  flex: 1 1 auto; min-height: var(--tap-min); padding: 0 0 14px;
  background: none; border: 0; border-radius: 0;
  font-size: var(--t-body-lg); font-weight: var(--w-med); color: var(--ink);
}
.search__input::placeholder { color: var(--ink-3); }

/* ----- A list of rows with no trailing hairline (the last row's border) --- */
.list { display: flex; flex-direction: column; }
.list .row:last-child { border-bottom: 0; }

/* ----- Empty state ------------------------------------------------------- */
.empty { padding: var(--s-6) 0; color: var(--ink-3); font-size: var(--t-body); }

/* ----- Nog uitzoeken: swipeable classify deck ---------------------------- */
/* A horizontal scroll-snap track gives native touch "swipe" with zero JS. Cards
   bleed to the screen edges (negative margin = --pad) so the next card peeks. */
.deck {
  display: flex; gap: var(--s-4);
  overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad);
  scroll-padding-inline: var(--pad);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.deck::-webkit-scrollbar { display: none; }
.deck--single { margin-inline: 0; padding-inline: 0; }
.card { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; }
.deck--single .card { flex-basis: auto; }

/* Per-type preview variants (file tile + voice transcript) */
.preview--file, .preview--voice {
  flex-direction: column; gap: var(--s-3); padding: var(--s-4); text-align: center;
}
.preview__file { font-size: var(--t-body); font-weight: var(--w-bold); word-break: break-all; }
.preview__transcript {
  font-size: var(--t-body-lg); font-weight: var(--w-med); color: var(--ink);
  text-align: left; align-self: stretch;
}
.preview__audio { width: 100%; }

/* "Andere soort" disclosure — a native <details>, no JS */
.more { margin-top: var(--s-3); }
.more > summary {
  list-style: none; cursor: pointer; min-height: var(--tap-min);
  display: inline-flex; align-items: center;
  font-size: var(--t-body); font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px; color: var(--ink);
}
.more > summary::-webkit-details-marker { display: none; }

/* ----- Inline preview overlay (folder items) ----------------------------- */
/* JS-free modal: a folder row links to #p-<n> to open the matching .viewer,
   the scrim + close link back to #r-<n> (the row) to dismiss. Panels stay in
   the DOM but hidden until targeted. PDFs (<object>) defer their load until
   shown; images may still be fetched by some browsers while hidden, so this
   suits reasonably-sized folders rather than unbounded lists. */
.viewer { position: fixed; inset: 0; z-index: 50; display: none; }
.viewer:target { display: block; }
.viewer__scrim {
  position: fixed; inset: 0;
  background: rgba(18, 17, 16, 0.72);
  -webkit-tap-highlight-color: transparent;
}
.viewer__panel {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: var(--screen-max); height: 100dvh;
  margin-inline: auto;
  background: var(--ground);
}
.viewer__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--pad);
  border-bottom: var(--hair) solid var(--line);
}
.viewer__title {
  flex: 1 1 auto;
  font-size: var(--t-body); font-weight: var(--w-bold); letter-spacing: var(--tr-snug);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.viewer__x {
  flex: 0 0 auto; width: var(--tap-min); height: var(--tap-min);
  margin-right: calc(-1 * var(--s-2));
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.viewer__x:hover { color: var(--accent-2); }
.viewer__body {
  flex: 1 1 auto; min-height: 0;
  background: var(--fill);
  display: flex; flex-direction: column;
}
.viewer__body--image { overflow: auto; -webkit-overflow-scrolling: touch; }
.viewer__img { max-width: 100%; width: auto; height: auto; margin-inline: auto; }
.viewer__pdf { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; }
.viewer__fallback {
  margin: auto; padding: var(--s-6) var(--pad);
  text-align: center; color: var(--ink-2);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.viewer__open {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); padding: var(--s-2) var(--s-3);
  border-top: var(--hair) solid var(--line);
  font-size: var(--t-body); font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px;
}
/* Large screens: the full-screen sheet becomes a right-side drawer that slides
   in over a fading scrim. @starting-style + transition-behavior:allow-discrete
   let the enter/exit animate even though visibility stays driven by the
   display:none/:target toggle (still no JS); browsers without support just show
   it instantly, and prefers-reduced-motion collapses the timings to nil. Phones
   keep the instant full-height sheet untouched. */
@media (min-width: 720px) {
  .viewer { transition: display 0.3s allow-discrete; }
  .viewer__scrim { opacity: 0; transition: opacity 0.3s ease; }
  .viewer:target .viewer__scrim { opacity: 1; }
  .viewer__panel {
    margin-inline: auto 0;
    max-width: min(540px, 92vw);
    box-shadow: 0 0 60px rgba(18, 17, 16, 0.28);
    translate: 100% 0;
    transition: translate 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .viewer:target .viewer__panel { translate: 0 0; }
  @starting-style {
    .viewer:target .viewer__scrim { opacity: 0; }
    .viewer:target .viewer__panel { translate: 100% 0; }
  }
}

/* ----- Inline field validation ------------------------------------------- */
/* accent-2 (the darker tint) keeps error text legible without spending the
   pure accent, which stays reserved for the primary action. */
.field__error { color: var(--accent-2); font-size: var(--t-fine); font-weight: var(--w-med); }

/* ----- Processing bar (documents still in the pipeline) ------------------ */
/* Shown only while work is in flight; the page meta-refreshes so the fill
   advances on its own — no client JS. The accent spinner and progress fill
   carry the "live" signal, so the frame stays a plain hairline box. */
.proc {
  border: var(--hair) solid var(--line);
  padding: var(--s-3);
  background: var(--fill);
}
.proc__head { display: flex; align-items: center; gap: var(--s-2); }
.proc__title {
  flex: 1 1 auto;
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2);
}
.proc__spin {
  flex: 0 0 auto; width: 13px; height: 13px;
  border: 2px solid var(--ink-4); border-top-color: var(--accent);
  border-radius: 50%;
  animation: proc-spin 0.9s linear infinite;
}
@keyframes proc-spin { to { transform: rotate(360deg); } }
.proc__list { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); }
.proc__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.proc__type { font-size: var(--t-body); font-weight: var(--w-bold); letter-spacing: var(--tr-snug); }
.proc__stage { flex: 0 0 auto; font-size: var(--t-fine); color: var(--ink-3); }
.proc__track { margin-top: var(--s-1); height: 4px; background: var(--line); overflow: hidden; }
.proc__fill { height: 100%; background: var(--accent); transition: width 0.4s ease; }

/* ----- Flash / notice block ---------------------------------------------- */
/* A filled hairline box (fill vs. ground already sets it apart); errors take
   the accent border and accent-2 text, matching the inline field errors. */
.notice {
  border: var(--hair) solid var(--line);
  padding: var(--s-2) var(--s-3);
  background: var(--fill); color: var(--ink-2);
  font-size: var(--t-body);
}
.notice--error { border-color: var(--accent); color: var(--accent-2); }

/* ----- Boxed inputs ------------------------------------------------------- */
/* House style moved from the underline field to a white boxed input. Overridden
   here (not in BASE_CSS) so the shared system stays the single source of truth.
   Applies to text inputs and selects via .field__input; the search field keeps
   its underline (.search__input is a separate class). Keyboard focus still shows
   the accent outline from :focus-visible — we only recolour the border. */
.field__input {
  padding: 12px 14px;
  background: #fff;
  border: var(--hair) solid var(--line);
  border-radius: 8px;
  font-size: var(--t-body-lg);
}
.field__input::placeholder { color: var(--ink-4); }
.field__input:focus { border-color: var(--ink); }

/* Section headings (e.g. "ADRES", "BETALING") read as group headers — dark and
   heavier — so they stand apart from the quieter grey field labels beneath them. */
.label--heading { color: var(--ink); font-weight: var(--w-black); font-size: var(--t-fine); }

/* Breathing room below each input: space consecutive fields (and selects) apart
   so a stack of inputs doesn't feel cramped. Section gaps are placed separately. */
.field + .field { margin-top: var(--s-4); }

/* ----- Invoice document (mirrors the PDF) -------------------------------- */
.rule--accent { background: var(--accent); }
.doc__title {
  font-size: 34px; font-weight: var(--w-black); letter-spacing: var(--tr-caps);
  text-transform: uppercase; margin-top: var(--s-1);
}
.doc .rule { margin-top: var(--s-3); }
.doc__parties {
  display: flex; flex-direction: column; gap: var(--s-4);
  margin-top: var(--s-4);
}
.party { display: flex; flex-direction: column; }
.party__label {
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--s-1);
}
.party__name { font-size: var(--t-body-lg); font-weight: var(--w-bold); letter-spacing: var(--tr-snug); }
.party__line { font-size: var(--t-body); color: var(--ink-2); }
.docmeta { display: flex; flex-direction: column; gap: var(--s-2); }
.docmeta__item { display: flex; flex-direction: column; }
.docmeta__label {
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-3);
}
.docmeta__value { font-size: var(--t-body-lg); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }

/* ----- Invoice line table ------------------------------------------------ */
/* Phones: each line is a small card (omschrijving on its own row; aantal +
   stukprijs share the next; the running amount sits right). Wide screens (see
   the min-width block) promote it to a real table row under a shared header. */
.linetable { display: flex; flex-direction: column; margin-top: var(--s-3); }
.ln--head { display: none; }
.ln {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "desc desc del"
    "qty price vat"
    "amt amt amt";
  gap: var(--s-2) var(--s-3);
  padding: var(--s-4) 0;
  border-bottom: var(--hair) solid var(--line);
}
.ln--ro {
  grid-template-columns: 1fr 1fr auto;
  grid-template-areas: "desc desc amt" "qty qty amt";
  align-items: baseline;
}
.ln--ro .ln__cell--price { display: none; }
.ln__cell { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.ln__cell--desc { grid-area: desc; }
.ln__cell--qty { grid-area: qty; }
.ln__cell--price { grid-area: price; }
.ln__cell--vat { grid-area: vat; }
.ln__lab {
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-3);
}
.ln__in {
  width: 100%; min-height: var(--tap-min); padding: 10px 12px;
  background: #fff; border: var(--hair) solid var(--line); border-radius: 8px;
  font-size: var(--t-body); font-weight: var(--w-med); color: var(--ink);
}
.ln__in::placeholder { color: var(--ink-4); }
.ln__in:focus { border-color: var(--ink); }
.ln__in--num { font-variant-numeric: tabular-nums; }
/* The per-line BTW dropdown keeps the boxed-input look but the native arrow. */
.ln__sel { cursor: pointer; }
.ln__vat { display: none; font-size: var(--t-fine); color: var(--ink-3); }
.ln__amt {
  grid-area: amt; align-self: center; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-2);
}
.ln--ro .ln__amt { align-self: baseline; }
.ln__ro-num { font-variant-numeric: tabular-nums; }
.ln__del {
  grid-area: del; justify-self: end; align-self: start;
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: var(--hair) solid var(--line); border-radius: 8px;
  font-size: 22px; line-height: 1; color: var(--ink-3); cursor: pointer;
}
.ln__del:hover { border-color: var(--accent); color: var(--accent); }
.ln__add {
  align-self: flex-start; min-height: var(--tap-min); margin-top: var(--s-3);
  padding: 0 var(--s-3);
  background: none; border: var(--hair) dashed var(--line); border-radius: 8px;
  font-size: var(--t-body); font-weight: 600; color: var(--ink); cursor: pointer;
}
.ln__add:hover { border-color: var(--ink); }

/* ----- Small screens: keep the biggest type from overflowing 320px -------- */
@media (max-width: 380px) {
  :root { --pad: 22px; --t-amount: 54px; --t-title: 40px; --t-lead: 24px; }
}
@media (max-width: 340px) {
  :root { --t-amount: 46px; --t-title: 34px; }
  .choice { font-size: 21px; }
}

/* ----- Wide screens: the column stays a phone-width card, comfortably set -- */
@media (min-width: 720px) {
  .screen { padding-top: var(--s-8); padding-bottom: var(--s-8); }

  /* Screens that carry a data table (the invoice document) may use more of the
     available width instead of staying pinned to the phone column. */
  .screen--wide { max-width: 720px; }

  /* Seller (left) + meta (right) share one row, as on the PDF. */
  .screen--wide .doc__parties {
    flex-direction: row; justify-content: space-between; align-items: flex-start;
    gap: var(--s-6);
  }
  .screen--wide .docmeta { align-items: flex-end; }
  .screen--wide .docmeta__item { align-items: flex-end; }

  /* Promote the stacked line cards to a real table: shared header + one row per
     line (Omschrijving | Aantal | Stukprijs | BTW | Bedrag | delete). */
  .screen--wide .ln--head,
  .screen--wide .ln {
    grid-template-columns: 1fr 72px 112px 76px 120px 32px;
    grid-template-areas: "desc qty price vat amt del";
    align-items: center;
    gap: var(--s-3);
  }
  .screen--wide .ln--ro {
    grid-template-columns: 1fr 72px 112px 76px 120px;
    grid-template-areas: "desc qty price vat amt";
  }
  .screen--wide .ln--ro .ln__cell--price { display: flex; }
  .screen--wide .ln--head {
    display: grid;
    padding-bottom: var(--s-2);
    border-bottom: var(--hair) solid var(--line);
    font-size: var(--t-label); font-weight: var(--w-bold);
    letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-3);
  }
  .screen--wide .ln--head .ln__cell--qty,
  .screen--wide .ln--head .ln__cell--price,
  .screen--wide .ln--head .ln__vat,
  .screen--wide .ln--head .ln__amt { text-align: right; }
  /* The header reuses .ln__amt for column alignment; drop its darker body color. */
  .screen--wide .ln--head .ln__amt { color: var(--ink-3); font-weight: var(--w-bold); }
  .screen--wide .ln__lab { display: none; }
  .screen--wide .ln__vat { display: block; grid-area: vat; text-align: right; align-self: center; }
  .screen--wide .ln__in--num { text-align: right; }
  .screen--wide .ln__del { align-self: center; }
  .screen--wide .ln__add { margin-top: var(--s-4); }
}

/* ----- Inbox addresses (map footer + welcome) --------------------------- */
/* A distinct boxed surface (fill vs. the page ground) so the two send-in
   addresses read as one unit. Each address pairs a small caps label (title)
   with the monospace address (value), plus a copy button the script reveals. */
.addresses {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-4);
  background: var(--fill);
  border: var(--hair) solid var(--line);
}
.addr { display: flex; flex-direction: column; gap: var(--s-1); }
.addr__label {
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-3);
}
.addr__row { display: flex; align-items: center; gap: var(--s-2); }
.addr__value {
  flex: 1 1 auto; min-width: 0; word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-body-lg); font-weight: var(--w-med); color: var(--ink);
  text-decoration: none;
}
.addr__value:hover { color: var(--accent-2); }
.addr__copy {
  flex: 0 0 auto;
  min-height: var(--tap-min); padding: 0 var(--s-3);
  background: #fff; color: var(--ink);
  border: var(--hair) solid var(--line); border-radius: var(--radius);
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
}
.addr__copy:hover { border-color: var(--ink); }
.addr__copy[data-copied] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.addr__hint { font-size: var(--t-fine); color: var(--ink-3); }

/* ----- Landing page ------------------------------------------------------ */
/* The only public screen, and the only one that is not a phone column. It is
   built as a desktop page that collapses rather than a phone page that
   stretches: one column on a phone, three-up steps from 720px, and from 960px
   a two-column hero above a grid of cards. Every class here belongs to landing
   markup alone and carries an lp- prefix, so generic names (step, card, way)
   cannot collide with the app's. The widths hang off .screen--landing, so no
   app screen moves. */

/* Top bar: wordmark left, the one escape hatch right. */
.lp-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding-bottom: var(--s-4); border-bottom: var(--hair) solid var(--line);
}
.lp-bar__link {
  font-size: var(--t-label); font-weight: var(--w-bold); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--ink-3); text-decoration: none;
}
.lp-bar__link:hover { color: var(--accent); }

/* Hero: the story on one side, the single action on the other. */
.lp-hero { padding-top: var(--s-7); }
.lp-hero__copy > * + * { margin-top: var(--s-4); }

/* "administratie." is one long unbreakable word, so a fixed 48px headline runs
   off the side of a 390px iPhone (the system only steps the title down below
   380px). Sizing it against the viewport keeps it as big as will actually fit. */
.screen--landing .title { font-size: clamp(32px, 9.5vw, 48px); }

/* Three plain promises, set as a row rather than a feature list. */
.lp-points {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  font-size: var(--t-fine); font-weight: var(--w-bold); color: var(--ink-2);
}
.lp-points li::before { content: "\2192"; color: var(--accent); margin-right: 8px; }

/* The sign-up card: the page's one action, boxed so it reads as the one thing
   to do. Square like everything else here; only the phone shots get a radius. */
.lp-card {
  margin-top: var(--s-6); padding: var(--s-5);
  background: #fff; border: var(--hair) solid var(--line);
  box-shadow: 0 20px 44px rgba(18, 17, 16, 0.07);
}
.lp-card__foot {
  display: flex; justify-content: center;
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: var(--hair) solid var(--line);
}

/* Every band below the hero opens with a small heading and a line of copy. */
.lp-sec { padding-top: var(--s-8); }
.lp-sec__head > * + * { margin-top: var(--s-3); }

/* The 1-2-3, told with phone screenshots. Each leans a different way for play
   and straightens under the pointer. Shots stay capped and centred so a rotated
   corner never widens the page (a 240px shot at 2.5deg spans ~263px, which
   still fits the narrowest column we render it in). */
.lp-steps {
  list-style: none; padding: 0; margin-top: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-7);
}
.lp-step { display: flex; flex-direction: column; }
.lp-shot { width: 100%; max-width: 240px; margin: 0 auto var(--s-4); }
/* Phone screenshots are far taller than they are useful: each one carries a
   band of blurred wallpaper or empty sheet. Cropping to a squatter frame drops
   roughly a quarter of that, which keeps the three shots the same height and
   makes the part that matters bigger. Per-shot focus is set below. */
.lp-shot img {
  width: 100%; height: auto;
  aspect-ratio: 10 / 16; object-fit: cover; object-position: center;
  border: var(--hair) solid var(--line); border-radius: 20px;
  box-shadow: 0 18px 40px rgba(18, 17, 16, 0.18);
  transition: transform 0.25s ease;
}
/* The shortcut menu sits at the top of its screen; the other two are centred. */
.lp-step:nth-child(1) .lp-shot img { object-position: top; transform: rotate(-2.5deg); }
.lp-step:nth-child(2) .lp-shot img { transform: rotate(1.75deg); }
.lp-step:nth-child(3) .lp-shot img { transform: rotate(-1.5deg); }
.lp-step:hover .lp-shot img { transform: rotate(0deg); }
.lp-step__index {
  font-size: var(--t-label); font-weight: var(--w-bold);
  letter-spacing: var(--tr-caps); color: var(--ink-4);
}
.lp-step__title {
  margin-top: var(--s-1);
  font-size: var(--t-section); font-weight: var(--w-black); letter-spacing: var(--tr-snug);
}
.lp-step__hint { margin-top: var(--s-2); font-size: var(--t-fine); color: var(--ink-2); }

/* The shortcut nudge sits directly under the steps, because step 01 is the
   shortcut. Both device variants render without JS; landing.js drops one. */
.lp-nudge { margin-top: var(--s-5); text-align: center; }
.lp-nudge .action-link { justify-content: center; }

/* The channels that are not a phone gesture, as a row of equal cards. It is a
   <ul>, so it needs the same list reset as .lp-steps: without it the browser's
   default padding-inline-start pushes the whole grid ~40px to the right of the
   section heading. */
.lp-ways { list-style: none; padding: 0; display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.lp-way {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-4); background: #fff; border: var(--hair) solid var(--line);
}
.lp-way__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.lp-way__title { font-size: var(--t-body); font-weight: var(--w-black); letter-spacing: var(--tr-snug); }
.lp-way__hint { font-size: var(--t-fine); color: var(--ink-2); }

/* Closing band: the same single action, for a reader who never scrolls back. */
.lp-cta {
  margin-top: var(--s-8); padding-block: var(--s-7) var(--s-6);
  border-top: var(--rule) solid var(--ink); text-align: center;
}
.lp-cta__action { max-width: 340px; margin: var(--s-5) auto var(--s-3); }
.lp-cta .action-link { justify-content: center; }

@media (min-width: 720px) {
  .screen--landing { max-width: 900px; padding-inline: var(--s-7); }
  .screen--landing .title { font-size: 64px; }
  .screen--landing .lead  { font-size: 30px; }
  .screen--landing .body  { font-size: var(--t-body-lg); max-width: 62ch; }
  .lp-steps { flex-direction: row; gap: var(--s-5); }
  .lp-step  { flex: 1 1 0; min-width: 0; }
  /* Three steps and three channels, so both bands are one full row each. */
  .lp-ways  { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
  .screen--landing { max-width: 1140px; }
  /* Once the hero splits, the headline only has the left column to live in, and
     "administratie." cannot break. Scaling it against the viewport keeps it off
     the card at 960px and still lets it reach full size on a wide display. */
  .screen--landing .title { font-size: clamp(52px, 5.4vw, 72px); }
  /* The hero splits in two: story left, sign-up card right, tops aligned. The
     card keeps a floor so its button and fine print never get squeezed. */
  .lp-hero {
    display: grid; grid-template-columns: 1.1fr minmax(320px, 0.9fr);
    gap: var(--s-8); align-items: start;
  }
  .lp-card { margin-top: 0; padding: var(--s-6); }
  .lp-shot { max-width: 300px; }
}