/* ============================================================
   Ledgerleaf Invoice Maker — stylesheet
   No framework. No CDN. Ships as one cacheable file.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --ground: #eef1ef;
  --surface: #ffffff;
  --surface-2: #f6f8f7;
  --ink: #141a18;
  --ink-2: #4a5450;
  --ink-3: #6f7a76;
  --rule: #dbe2de;
  --rule-strong: #c3ccc7;
  --accent: #0d6b4e;
  --accent-hover: #0a5540;
  --accent-soft: #e4f0ea;
  --due: #a13a1c;
  --due-soft: #fbeee8;
  --focus: #0d6b4e;

  --step--1: 0.8125rem;  /* 13px */
  --step-0: 0.9375rem;   /* 15px */
  --step-1: 1.0625rem;   /* 17px */
  --step-2: 1.3125rem;   /* 21px */
  --step-3: 1.625rem;    /* 26px */
  --step-4: 2.0625rem;   /* 33px */
  --step-5: 2.625rem;    /* 42px */

  /* One family sitewide — UI, content and the invoice itself. Inter carries
     true tabular figures, which is what keeps invoice columns aligned. */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: var(--sans);

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-1: 0 1px 2px rgba(20, 26, 24, 0.05), 0 1px 3px rgba(20, 26, 24, 0.05);
  --shadow-2: 0 4px 6px -1px rgba(20, 26, 24, 0.07), 0 12px 28px -6px rgba(20, 26, 24, 0.12);
  --maxw: 1320px;
  --readw: 68ch;
}

html[data-theme="dark"] {
  --ground: #0e1211;
  --surface: #161c1a;
  --surface-2: #1c2320;
  --ink: #e7ecea;
  --ink-2: #a8b3af;
  --ink-3: #7d8783;
  --rule: #26302c;
  --rule-strong: #33403b;
  --accent: #3fa47c;
  --accent-hover: #56b891;
  --accent-soft: #12271f;
  --due: #e08161;
  --due-soft: #2a1a14;
  --focus: #56b891;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.45);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-soft); color: var(--ink); }
img, svg { display: block; max-width: 100%; }
/* Must outrank the display rules above and on .btn — an author `display`
   beats the UA sheet's [hidden] { display: none } and un-hides the element. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.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;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--accent); color: #fff; padding: 10px 16px;
  border-radius: var(--radius-sm); text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; color: #fff; }

/* ---------- Header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
@supports not (backdrop-filter: blur(1px)) { .masthead { background: var(--surface); } }
.masthead__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.wordmark {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-2);
  letter-spacing: -0.021em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
  min-width: 0;
}
.wordmark svg { color: var(--accent); flex: none; }
/* Logo is sized by height so any sane rectangular export lines up. */
.wordmark img { height: 34px; width: auto; max-width: 210px; object-fit: contain; }
@media (max-width: 560px) { .wordmark img { height: 28px; max-width: 160px; } }

.masthead__actions { display: flex; align-items: center; gap: 4px; flex: none; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  color: var(--ink-2); text-decoration: none;
  font-size: var(--step--1); font-weight: 500;
  padding: 8px 11px; border-radius: var(--radius-sm);
  transition: background-color 0.13s ease, color 0.13s ease;
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }

/* Qualified with .btn deliberately: the .btn rule below sets display and would
   otherwise win on source order, leaving the hamburger visible on desktop. */
.btn.navtoggle { display: none; }

@media (max-width: 860px) {
  .btn.navtoggle { display: inline-flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-2);
    padding: 10px 14px 16px;
    max-height: calc(100dvh - 60px); overflow-y: auto;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a {
    padding: 13px 12px; font-size: var(--step-0); font-weight: 500;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
  }
  .nav a:last-child { border-bottom: 0; }
  .nav a:hover { background: var(--surface-2); }
  .nav a.nav--optional { display: block; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 8px 14px; font-size: var(--step--1); font-weight: 600;
  cursor: pointer; background: none; text-decoration: none;
  transition: background-color 0.13s ease, border-color 0.13s ease, color 0.13s ease;
  white-space: nowrap;
}
.btn svg { flex: none; }
.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-1); }
.btn--primary:active { transform: translateY(0.5px); }
.btn--primary:hover { background: var(--accent-hover); color: #fff; }
.btn--ghost { border-color: var(--rule-strong); color: var(--ink-2); background: var(--surface); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn--quiet { color: var(--ink-3); padding: 7px; }
.btn--quiet:hover { color: var(--ink); background: var(--surface-2); }
.btn--danger { color: var(--due); }
.btn--danger:hover { background: var(--due-soft); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---------- App shell ---------- */
.app {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px;
}
.app__intro { margin-bottom: 22px; max-width: var(--readw); }
.app__intro h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(var(--step-3), 4vw, var(--step-5));
  letter-spacing: -0.032em;
  margin-bottom: 8px;
}
.app__intro p { color: var(--ink-2); margin: 0; }

/* A soft wash behind the hero so the tool does not open on a flat slab.
   Both gradients are sized and top-anchored, so only the hero area is tinted
   and the content sections below paint over it with their own surface. */
.apphero {
  background:
    radial-gradient(58rem 20rem at 10% 0%, var(--accent-soft), transparent 70%),
    radial-gradient(46rem 18rem at 94% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%);
  background-repeat: no-repeat;
}

.chips {
  display: flex; flex-wrap: wrap; gap: 7px;
  list-style: none; margin: 14px 0 0; padding: 0;
}
.chips li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--step--1); font-weight: 500; color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 12px 5px 9px;
  box-shadow: var(--shadow-1);
}
.chips li::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

.workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 1080px) {
  .workbench { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Panels ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule);
}
.panel__head h2 { font-size: var(--step-1); font-weight: 600; }
.panel__body { padding: 18px; }

.fieldset {
  border: 0; padding: 0 0 20px; margin: 0 0 20px;
  border-bottom: 1px solid var(--rule);
}
.fieldset:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.fieldset > legend {
  padding: 0; margin-bottom: 14px;
  font-size: var(--step-0); font-weight: 600; color: var(--ink);
}
.fieldset__hint { color: var(--ink-3); font-size: var(--step--1); font-weight: 400; }

/* ---------- Form controls ---------- */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label, .label {
  font-size: var(--step--1); font-weight: 500; color: var(--ink-2);
}
.input, .select, .textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: var(--step-0);
  color: var(--ink);
  transition: border-color 0.13s ease, box-shadow 0.13s ease;
}
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea { background: var(--surface-2); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236f7a76'%3E%3Cpath d='M5.3 7.3a1 1 0 011.4 0L10 10.6l3.3-3.3a1 1 0 111.4 1.4l-4 4a1 1 0 01-1.4 0l-4-4a1 1 0 010-1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  padding-right: 30px;
}
.input--num { text-align: right; font-variant-numeric: tabular-nums; }
.input[aria-invalid="true"] { border-color: var(--due); }
.field__error { font-size: var(--step--1); color: var(--due); min-height: 0; }

.grid { display: grid; gap: 12px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Logo dropzone ---------- */
.brandrow { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 16px; }
@media (max-width: 560px) {
  /* Side by side rather than stacked: full width made the square dropzone huge. */
  .brandrow { grid-template-columns: 40% minmax(0, 1fr); gap: 14px; align-items: start; }
  .dropzone-caption { font-size: 0.7rem; }
}

.dropzone {
  position: relative;
  width: 100%; aspect-ratio: 1;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  display: grid; place-items: center;
  cursor: pointer; text-align: center; padding: 8px;
  color: var(--ink-3); font-size: 0.75rem;
  transition: border-color 0.13s ease, background-color 0.13s ease;
}
.dropzone:hover, .dropzone.is-dragover { border-color: var(--accent); background: var(--accent-soft); }
.dropzone img { width: 100%; height: 100%; object-fit: contain; }
.dropzone svg { color: var(--accent); margin: 0 auto 4px; }
.brandrow__meta { display: flex; flex-direction: column; gap: 12px; }
.dropzone-caption { font-size: 0.75rem; color: var(--ink-3); margin: 6px 0 0; text-align: center; }

/* ---------- Line items ---------- */
.items { display: flex; flex-direction: column; gap: 8px; }
.items__head, .item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 100px 116px 100px 32px;
  gap: 8px; align-items: center;
}
.items__head {
  font-size: 0.75rem; font-weight: 600; color: var(--ink-3);
  padding: 0 0 8px; border-bottom: 1px solid var(--rule);
}
.items__head span:nth-child(n+2) { text-align: right; }
.items__head span:nth-child(2) { text-align: center; }

.item {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 8px;
}
.item .input { padding: 6px 8px; font-size: var(--step--1); }
.item__amount {
  text-align: right; font-weight: 600; font-size: var(--step--1);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.discount-pair { display: flex; }
.discount-pair .input {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
  min-width: 0; flex: 1 1 auto;
}
.discount-pair .select {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-left: 0; flex: 0 0 54px; width: 54px;
  padding: 6px 22px 6px 6px; font-size: var(--step--1);
  background-position: right 4px center; background-size: 13px;
  text-align: center;
}

@media (max-width: 860px) {
  .items__head { display: none; }
  /* Two rows rather than five: the description takes the full width, then the
     numeric fields sit side by side underneath. */
  .item {
    /* Amount is max-content so a long total never wraps mid-number; the three
       input columns absorb whatever is left. */
    grid-template-columns: 38px minmax(50px, 1fr) minmax(74px, 1.25fr) max-content;
    grid-template-areas:
      "desc desc desc del"
      "qty  rate disc amt";
    gap: 9px 5px; padding: 10px;
    align-items: end;
  }
  .item > :nth-child(1) { grid-area: desc; }
  .item > :nth-child(2) { grid-area: qty; }
  .item > :nth-child(3) { grid-area: rate; }
  .item > :nth-child(4) { grid-area: disc; }
  .item > :nth-child(5) { grid-area: amt; }
  .item > :nth-child(6) { grid-area: del; align-self: start; }
  .item .mlabel { display: block; }
  .item__amount {
    text-align: right; padding-bottom: 7px;
    white-space: nowrap; font-size: 0.75rem; padding-left: 2px;
  }
  .item .input--num { padding-left: 5px; padding-right: 5px; font-size: 15px; }
  .item .discount-pair { gap: 3px; }
  .item .discount-pair .select {
    flex: none; width: 31px;
    padding-left: 4px; padding-right: 13px; font-size: 14px;
    background-position: right 1px center; background-size: 13px;
  }
}
.mlabel {
  display: none; font-size: 0.7rem; color: var(--ink-3);
  margin-bottom: 3px; font-weight: 500;
}

/* ---------- Totals ---------- */
.totals {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.totals__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: var(--step--1);
}
.totals__row label { color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.totals__row .input { width: 78px; padding: 5px 7px; font-size: var(--step--1); }
.totals__val { font-weight: 600; font-variant-numeric: tabular-nums; }
.totals__val--minus { color: var(--due); }
.totals__grand {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 12px; border-top: 2px solid var(--ink);
  font-size: var(--step-1); font-weight: 700;
}
.totals__due {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 10px; border-top: 1px solid var(--rule-strong);
  font-weight: 700; color: var(--due);
}
.totals__due.is-settled { color: var(--accent); }

.radios { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.radios label {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  padding: 5px 12px; font-size: var(--step--1); cursor: pointer;
  color: var(--ink-2);
}
.radios label:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.radios input { accent-color: var(--accent); margin: 0; }

/* ---------- Preview / paper ---------- */
.previewwrap { position: sticky; top: 74px; }
@media (max-width: 1080px) { .previewwrap { position: static; } }

.paper {
  background: #ffffff;
  color: #141a18;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 36px;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
@media (max-width: 560px) { .paper { padding: 20px; font-size: 12px; } }

.paper a { color: #0d6b4e; }
.paper__top { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.paper__logo { width: 84px; height: 84px; object-fit: contain; margin-bottom: 10px; }
.paper__biz { font-size: 17px; font-weight: 700; margin: 0 0 2px; }
.paper__title {
  font-family: var(--display); font-weight: 700; font-size: 34px;
  line-height: 1; letter-spacing: -0.03em; margin: 0; text-align: right;
}
.paper__meta { text-align: right; margin-top: 10px; color: #4a5450; font-size: 12px; }
.paper__meta dl { display: grid; grid-template-columns: auto auto; gap: 2px 12px; justify-content: end; margin: 0; }
.paper__meta dt { color: #6f7a76; }
.paper__meta dd { margin: 0; font-weight: 600; color: #141a18; }

.paper__parties {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  margin: 24px 0; padding: 16px 0; border-top: 1px solid #dbe2de; border-bottom: 1px solid #dbe2de;
}
.paper__parties h4 { font-size: 11px; font-weight: 600; color: #6f7a76; margin: 0 0 4px; }
.paper__addr { white-space: pre-wrap; margin: 0; font: inherit; }

.paper table { width: 100%; border-collapse: collapse; }
.paper thead th {
  text-align: right; font-size: 11px; font-weight: 600; color: #4a5450;
  border-bottom: 1.5px solid #cdd5d1; padding: 0 0 8px; white-space: nowrap;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.paper tbody td {
  padding: 9px 0; border-bottom: 1px solid #e8ece9; text-align: right;
  vertical-align: top; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* The description column absorbs all spare width; the money columns size to
   their own content and never wrap, so "$1,500.00" cannot break mid-number
   and the "Qty" header cannot split into "Qt / y". */
.paper thead th:first-child,
.paper tbody td:first-child {
  width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere;
}
.paper tbody td:first-child { font-weight: 500; }
.paper thead th + th, .paper tbody td + td { padding-left: 14px; }
.paper tbody td.cut { color: #a13a1c; }
.paper tbody td.amt { font-weight: 600; }
.paper tbody .empty { text-align: center; color: #6f7a76; padding: 26px 0; font-style: italic; }

.paper__sums { display: flex; justify-content: flex-end; margin-top: 18px; }
.paper__sums > div { width: min(320px, 100%); }
.paper__sum { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.paper__sum--cut { color: #a13a1c; }
.paper__sum--net { border-top: 1px solid #dbe2de; margin-top: 5px; padding-top: 7px; font-weight: 600; }
.paper__sum--total {
  border-top: 2px solid #141a18; margin-top: 7px; padding-top: 9px;
  font-size: 17px; font-weight: 700;
}
.paper__sum--due { font-weight: 700; color: #a13a1c; }
.paper__sum--due.is-settled { color: #0d6b4e; }
.paper__stamp {
  display: inline-block; margin-top: 10px; padding: 3px 10px;
  border: 1px solid #0d6b4e; color: #0d6b4e; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
}
.paper__stamp--due { border-color: #a13a1c; color: #a13a1c; }

.paper__foot {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  margin-top: 32px; padding-top: 16px; border-top: 1px solid #dbe2de;
  font-size: 12px; color: #4a5450;
}
.paper__foot h4 { font-size: 11px; font-weight: 600; color: #6f7a76; margin: 0 0 4px; }
.paper__foot pre { white-space: pre-wrap; margin: 0 0 10px; font: inherit; }
@media (max-width: 560px) {
  .paper__parties, .paper__foot { grid-template-columns: minmax(0, 1fr); }
  .paper__title { font-size: 30px; }
}

.previewbar {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
  padding: 12px 0 0;
}

/* ---------- Toast ---------- */
.toasts {
  position: fixed; inset-inline-end: 16px; inset-block-start: 16px;
  z-index: 90; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; max-width: min(340px, calc(100vw - 32px));
}
.toast {
  background: var(--ink); color: var(--ground);
  padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: var(--step--1); box-shadow: var(--shadow-2);
  animation: toast-in 0.18s ease-out;
}
.toast--error { background: var(--due); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Dialog ---------- */
dialog.sheet {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  padding: 0; width: min(680px, calc(100vw - 32px));
  max-height: min(78vh, 700px); box-shadow: var(--shadow-2);
}
dialog.sheet::backdrop { background: rgba(14, 18, 17, 0.55); }
.sheet__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--rule);
}
.sheet__head h2 { font-size: var(--step-1); }
.sheet__body { padding: 16px 20px; overflow-y: auto; }
.sheet__foot {
  padding: 12px 20px; border-top: 1px solid var(--rule);
  font-size: 0.75rem; color: var(--ink-3);
}
.record {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px; border: 1px solid var(--rule);
  border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--surface-2);
}
.record__main { min-width: 0; }
.record__title { font-weight: 600; font-size: var(--step--1); }
.record__sub { font-size: 0.75rem; color: var(--ink-3); }
.tag {
  display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600;
  background: var(--accent-soft); color: var(--accent);
}
.tag--due { background: var(--due-soft); color: var(--due); }
.empty-state { text-align: center; color: var(--ink-3); padding: 36px 12px; }

/* ---------- Content sections: editorial two-column ----------
   The section heading sits in a sticky left rail; the body fills the
   remaining width in flexible columns. This uses the full page width
   without ever pushing a line of text past a readable measure. */
.section { background: var(--surface); border-top: 1px solid var(--rule); }
.section--alt { background: var(--surface-2); }
.section__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 72px 20px;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 40px 72px; align-items: start;
}
.section__head { position: sticky; top: 84px; }
.section__head h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(var(--step-3), 2.6vw, var(--step-4));
  letter-spacing: -0.025em; margin-bottom: 12px;
}
.section__head p { color: var(--ink-2); margin: 0; }
.section__head .rule {
  width: 44px; height: 2px; background: var(--accent);
  margin-bottom: 20px; border: 0;
}
.section__body > :first-child { margin-top: 0; }

@media (max-width: 940px) {
  .section__inner { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 48px 20px; }
  .section__head { position: static; }
  .section__head p { max-width: var(--readw); }
}

/* Body text keeps a readable measure inside whichever column holds it. */
.section__body p, .section__body li { color: var(--ink-2); max-width: var(--readw); }
.section__body ul, .section__body ol { padding-left: 20px; margin: 0 0 1em; }
.section__body li { margin-bottom: 5px; }

/* Flexible column grid for notes and steps. */
.cols {
  display: grid; gap: 30px 56px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.note h3 { font-size: var(--step-1); margin: 0 0 6px; }
.note p { margin: 0; }

.steps { list-style: none; padding: 0; counter-reset: s; margin: 0; }
.steps li { counter-increment: s; padding-left: 46px; position: relative; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-weight: 700; font-size: var(--step--1);
}
.steps strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.steps p { margin: 0; }

.faq details { border-bottom: 1px solid var(--rule); padding: 15px 0; }
.faq details:first-child { border-top: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; font-weight: 600; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 400; font-size: var(--step-2); line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 10px 0 0; }

/* ---------- Document pages (privacy, terms, about, contact) ---------- */
.doc {
  max-width: var(--maxw); margin: 0 auto; padding: 56px 20px 80px;
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: 40px 72px; align-items: start;
}
.doc__rail { position: sticky; top: 84px; }
.doc__rail h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(var(--step-3), 2.6vw, var(--step-4));
  letter-spacing: -0.025em; margin-bottom: 8px;
}
.doc__stamp { font-size: 0.75rem; color: var(--ink-3); margin-bottom: 22px; }
.doc__toc { border-top: 1px solid var(--rule); padding-top: 16px; }
.doc__toc p { font-size: 0.7rem; color: var(--ink-3); margin: 0 0 8px; font-weight: 600; }
.doc__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.doc__toc a {
  font-size: var(--step--1); color: var(--ink-2); text-decoration: none;
  display: block; line-height: 1.35;
}
.doc__toc a:hover { color: var(--accent); }

.doc__body > :first-child { margin-top: 0; }
.doc__body p, .doc__body li { color: var(--ink-2); max-width: var(--readw); }
.doc__body h2 {
  font-size: var(--step-2); margin: 40px 0 8px;
  scroll-margin-top: 84px; font-weight: 600;
}
.doc__body h2:first-of-type { margin-top: 0; }
.doc__body h3 {
  font-size: var(--step-1); margin: 28px 0 6px;
  scroll-margin-top: 84px; font-weight: 600;
}
.doc__body ul, .doc__body ol { padding-left: 20px; margin: 0 0 1em; }
.doc__body li { margin-bottom: 6px; }
.doc__lede { font-size: var(--step-1); color: var(--ink) !important; margin-bottom: 28px; }

/* ---------- Guides ---------- */
/* Copy-and-send blocks (chaser emails, letter wording). */
.tmpl {
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 15px 18px;
  margin: 0 0 20px;
  max-width: var(--readw);
}
.tmpl__label {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 9px;
}
.tmpl pre {
  margin: 0; font: inherit; white-space: pre-wrap;
  overflow-wrap: anywhere; color: var(--ink); line-height: 1.62;
}
.callout {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 14px 16px; margin: 0 0 20px; max-width: var(--readw);
}
.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }

.guidelist { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.guidelist li { margin: 0; border-bottom: 1px solid var(--rule); }
.guidelist li:last-child { border-bottom: 0; }
.guidelist a {
  display: block; padding: 18px 0; text-decoration: none; color: inherit;
}
.guidelist a:hover h2 { color: var(--accent); }
.guidelist h2 {
  font-size: var(--step-1); font-weight: 600; margin: 0 0 4px; color: var(--ink);
}
.guidelist p { margin: 0; color: var(--ink-2); max-width: var(--readw); }
.guidelist .doc__stamp { margin: 6px 0 0; }

@media (max-width: 940px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 40px 20px 60px; }
  .doc__rail { position: static; }
  .doc__toc { display: none; }
}

/* ---------- Ad slots ---------- */
.adslot {
  max-width: var(--maxw); margin: 0 auto; padding: 24px 20px;
  text-align: center;
}
.adslot__label {
  font-size: 0.7rem; color: var(--ink-3); margin: 0 0 6px;
  letter-spacing: 0.04em;
}
/* Reserve space so ads never shift layout (protects CLS). */
.adslot__frame { min-height: 280px; display: block; }
@media (min-width: 780px) { .adslot__frame { min-height: 90px; } }

/* ---------- Footer ---------- */
.sitefoot {
  background: var(--surface); border-top: 1px solid var(--rule);
  padding: 48px 20px 0;
  font-size: var(--step--1); color: var(--ink-3);
}
.sitefoot__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; gap: 34px 48px;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 860px) {
  .sitefoot { padding-top: 38px; }
  .sitefoot__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .sitefoot__brand { grid-column: 1 / -1; }
}
.sitefoot__brand img { height: 30px; width: auto; max-width: 190px; object-fit: contain; margin-bottom: 12px; }
.sitefoot__brand p { margin: 0; max-width: 42ch; line-height: 1.6; }
.sitefoot__col { display: flex; flex-direction: column; gap: 9px; }
.sitefoot__col h2 {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 3px;
}
.sitefoot a { color: var(--ink-2); text-decoration: none; }
.sitefoot a:hover { color: var(--accent); }
.sitefoot__base {
  max-width: var(--maxw); margin: 34px auto 0;
  border-top: 1px solid var(--rule);
  padding: 18px 0 26px;
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  align-items: center; justify-content: space-between;
}
.sitefoot__base p { margin: 0; }

/* ---------- Print ---------- */
@media print {
  /* margin:0 leaves the browser no margin box to draw its own header and
     footer into (date, page title, URL, page number), which is the only way
     CSS can suppress them. The page's breathing room comes from .paper's own
     padding instead. Some browsers still honour their "Headers and footers"
     checkbox over this — unticking it there is the guaranteed route. */
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; color: #000 !important; }
  .masthead, .sitefoot, .adslot, .section, .doc, .app__intro,
  .panel--editor, .previewbar, .toasts, dialog, .skip-link, .noprint { display: none !important; }
  .app { padding: 0; max-width: none; }
  .workbench { display: block; }
  .previewwrap { position: static; }
  .paper {
    border: 0 !important; border-radius: 0 !important; padding: 14mm !important;
    background: #fff !important; color: #000 !important; font-size: 10.5pt;
    box-shadow: none !important;
  }
  .paper tbody tr, .paper__sums, .paper__foot { break-inside: avoid; }
  .paper thead { display: table-header-group; }
  /* Printed money columns get a hard floor so a long figure cannot be
     squeezed into a wrap even on a dense A4 line. */
  .paper tbody td + td, .paper thead th + th { padding-left: 10px; }
  .paper a { text-decoration: none; }
}

/* ---------- Theme switch ---------- */
/* A pill switch rather than a bare icon: an 18px outline glyph reads as
   decoration, so people did not know it was clickable. */
.themeswitch {
  position: relative; flex: none;
  width: 54px; height: 30px; padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--surface-2);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.themeswitch:hover { border-color: var(--accent); }
.themeswitch svg {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; opacity: 0.4;
  /* Must sit above the knob. Both are absolutely positioned, so without this
     the knob — last in the DOM — paints over whichever icon it slides under,
     which is always the active one. */
  z-index: 1;
  transition: opacity 0.18s ease, color 0.18s ease;
}
.themeswitch #icon-sun { left: 7px; }
.themeswitch #icon-moon { right: 7px; }
html[data-theme="light"] .themeswitch #icon-sun { opacity: 1; color: var(--accent); }
html[data-theme="dark"] .themeswitch #icon-moon { opacity: 1; color: var(--accent); }
.themeswitch__knob {
  position: absolute; top: 50%; left: 2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-1);
  transform: translateY(-50%);
  z-index: 0;
  transition: transform 0.18s ease;
}
html[data-theme="dark"] .themeswitch__knob { transform: translate(24px, -50%); }

/* ---------- Guides: content + sidebar ---------- */
.guidewrap {
  max-width: var(--maxw); margin: 0 auto;
  padding: 36px 20px 72px;
  display: grid; gap: 40px;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}
@media (max-width: 1000px) {
  .guidewrap { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 28px 20px 56px; }
}

.sidebar { display: grid; gap: 18px; position: sticky; top: 84px; }
@media (max-width: 1000px) { .sidebar { position: static; } }
.sidebar__block {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 18px;
}
.sidebar__title {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 13px;
}
.sidebar__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.sidebar__list li { margin: 0; }
.sidebar__list a {
  display: block; text-decoration: none; color: var(--ink);
  font-weight: 500; line-height: 1.35; font-size: var(--step--1);
}
.sidebar__list a:hover { color: var(--accent); }
.sidebar__list .meta { display: block; color: var(--ink-3); font-weight: 400; margin-top: 3px; }
.sidebar__toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sidebar__toc a { font-size: var(--step--1); color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.sidebar__toc a:hover { color: var(--accent); }
.sidebar__cta { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 26%, transparent); }
.sidebar__cta p { margin: 0 0 12px; color: var(--ink-2); font-size: var(--step--1); }

/* Reserved so a later ad cannot shove the page around (protects CLS). */
.adslot--side { min-height: 282px; display: grid; place-items: center; }
.adslot--side .adslot__label {
  font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); margin: 0;
}

/* ---------- Guides: archive cards ---------- */
.gcards { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.gcard {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: box-shadow 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
.gcard:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--rule-strong); }
.gcard > a {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  text-decoration: none; color: inherit;
}
@media (max-width: 680px) { .gcard > a { grid-template-columns: minmax(0, 1fr); } }
.gcard__media { margin: 0; background: var(--surface-2); }
.gcard__media img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.gcard__body { padding: 18px 20px 20px; }
.gcard__body h2 { font-size: var(--step-1); font-weight: 600; margin: 0 0 6px; color: var(--ink); }
.gcard:hover .gcard__body h2 { color: var(--accent); }
.gcard__body p { margin: 0; color: var(--ink-2); font-size: var(--step--1); line-height: 1.55; }
.gcard__meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 12px; font-size: 0.75rem; color: var(--ink-3);
}
.gcard__tag {
  background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; padding: 3px 10px; font-weight: 600;
}

/* ---------- Guides: single post ---------- */
.posthero {
  /* height:auto is load-bearing — the width/height attributes on the <img>
     (needed to reserve space against CLS) otherwise fix the rendered height
     at 675px and defeat aspect-ratio. */
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--rule);
  margin: 0 0 28px;
}
.post__head { margin-bottom: 22px; }
.post__head h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(var(--step-3), 2.8vw, var(--step-4));
  letter-spacing: -0.028em; margin-bottom: 10px;
}
.post__byline {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  font-size: var(--step--1); color: var(--ink-3); margin: 0;
}

/* ---------- Compact mobile form ---------- */
@media (max-width: 860px) {
  /* 16px is deliberate: iOS Safari zooms the whole page when a focused input
     is under 16px, and the old 15px was triggering it. Tighter padding and
     line-height more than pay the extra pixel back. */
  .input, .select, .textarea {
    font-size: 16px; line-height: 1.25;
    padding: 6px 9px;
  }
  .select { padding-right: 28px; }
  .textarea { min-height: 74px; line-height: 1.45; }
  .field { gap: 3px; }
  .field > label, .label { font-size: 0.75rem; }
  .grid { gap: 10px; }
  .fieldset { padding-bottom: 16px; margin-bottom: 16px; }
  .fieldset > legend { margin-bottom: 11px; }
  .panel__body { padding: 14px; }
  .panel__head { padding: 12px 14px; }
  .totals { padding: 13px; gap: 8px; }
  .totals .input--num { max-width: 92px; }
  .mlabel { font-size: 0.66rem; margin-bottom: 2px; }
  .radios { gap: 6px; }
}

/* ---------- Compact mobile preview ---------- */
/* Proportions follow the printed sheet (the print rule uses 14mm padding on a
   210mm page, ~6.7%); the type stays legible rather than literally to scale,
   because true A4 scale on a phone is about 6px and unreadable. */
@media (max-width: 560px) {
  .paper { padding: 17px; font-size: 11.5px; }
  .paper__top { gap: 14px; }
  .paper__logo { width: 62px; height: 62px; margin-bottom: 7px; }
  .paper__biz { font-size: 15px; }
  .paper__title { font-size: 25px; }
  .paper__meta { font-size: 11px; margin-top: 7px; }
  .paper__meta dl { gap: 1px 9px; }
  .paper__parties { margin: 15px 0; padding: 12px 0; gap: 14px; }
  .paper thead th { font-size: 9.5px; padding-bottom: 6px; }
  .paper tbody td { padding: 6px 0; }
  .paper thead th + th, .paper tbody td + td { padding-left: 8px; }
  .paper__sums { margin-top: 12px; }
  .paper__sums > div { min-width: 0; width: 100%; }
  .paper__foot { margin-top: 16px; padding-top: 12px; gap: 14px; }
}

/* Safety net: a long label must never bleed into the next column. */
@media (max-width: 860px) {
  .item .mlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* The money columns are sized by content, so on a ~320px sheet they starve the
   description. Shrinking them buys the description back most of its width. */
@media (max-width: 560px) {
  .app { padding: 20px 12px; }
  .paper thead th:first-child { white-space: nowrap; }
  .paper thead th + th,
  .paper tbody td + td { padding-left: 6px; font-size: 10.5px; }
  .paper tbody td:first-child { padding-right: 2px; }
  .paper__sum { font-size: 11px; }
}

/* Let the narrow money headers stack ("Unit / price") to hand width back to the
   description. Values still never wrap — only the column captions do. */
@media (max-width: 560px) {
  /* overflow-wrap:normal stops .paper's inherited `anywhere` from
     shattering a single word like "Qty" into Q/t/y. */
  .paper thead th + th { white-space: normal; overflow-wrap: normal; word-break: keep-all; }
  .paper tbody td + td { white-space: nowrap; }
}