/* The one-page summary, one A4 page in two columns, in the SproutWell look. On screen it sits on a soft background with
   a small bar above it; printed, only the sheet. tools/e2e.py prints it with headless Brave and checks it is one page. */
:root {
  --page: #FFF8EE; --card: #FFFFFF; --leaf: #2E7D22; --petal: #EC5B7A; --petal-text: #B3304D; --sun: #F7C548;
  --ink: #33261C; --muted: #6B5A4C; --rule: #E8DDD0; --line: #F1E8DC;
  --display: "Quicksand", "Segoe UI", system-ui, sans-serif; --body: "Quicksand", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: #F3EADC; color: var(--ink); font-family: var(--body); font-size: 10pt; line-height: 1.4; font-variant-numeric: lining-nums; }
a { color: var(--leaf); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the bar above the sheet (screen only) */
.bar { max-width: 210mm; margin: 18px auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding: 0 16px; font: 15px/1.4 var(--body); color: var(--muted); }
.bar button { background: var(--leaf); color: var(--card); border: 2px solid var(--leaf); border-radius: 4px; padding: 9px 16px; font: 600 15px/1 var(--body); cursor: pointer; }
.bar button.ghost { background: transparent; color: var(--leaf); }
.bar button:focus-visible, .bar a:focus-visible, .bar input:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.for-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.for-form label { color: var(--ink); }
.for-form label span { color: var(--muted); }
.for-form input { font: 15px/1.4 var(--body); padding: 7px 10px; border: 1px solid #8C7B6B; border-radius: 4px; background: #FFFFFF; color: var(--ink); width: 16em; max-width: 100%; }

/* the sheet */
.sheet { width: 210mm; min-height: 297mm; margin: 12px auto 40px; background: var(--card); padding: 11mm 14mm 9mm; box-shadow: 0 2px 18px rgba(34, 32, 28, .18); display: flex; flex-direction: column; }
.sheet > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8mm; border-bottom: 2px solid var(--leaf); padding-bottom: 3.5mm; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--leaf); }
.logo svg:not(.sprite) { width: 46px; height: 46px; }
.logo b { font: 600 20pt/1 var(--display); display: block; }
.logo b i { color: var(--petal-text); font-weight: 500; }
.logo small { display: block; font-size: 7.5pt; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.for { text-align: right; font-size: 9.5pt; color: var(--muted); }
.for b { display: block; color: var(--ink); font-size: 11pt; }
h1 { font: 600 18pt/1.15 var(--display); color: var(--leaf); margin: 4mm 0; }
h2 { font: 600 12pt/1.2 var(--display); color: var(--leaf); margin: 0 0 2mm; padding-bottom: 1.2mm; border-bottom: 1px solid var(--rule); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; align-items: start; }
section { margin-bottom: 4mm; }

/* everything included */
table.incl { width: 100%; border-collapse: collapse; }
table.incl td { padding: 1.05mm 0; border-bottom: 1px solid var(--line); font-size: 9.5pt; line-height: 1.3; vertical-align: top; }
table.incl .ref { width: 9mm; font-weight: 600; color: var(--petal-text); }
table.incl tr.grp td { background: var(--page); color: var(--leaf); font: 600 10pt/1.3 var(--display); padding: 1.3mm 0; border-bottom: 1px solid var(--rule); }
table.incl tr.grp td.ref { padding-left: 2mm; color: var(--leaf); }
table.incl tr.grp + tr td { padding-top: 1.4mm; }

/* the price */
table.price { width: 100%; border-collapse: collapse; margin-bottom: 2mm; }
table.price td { padding: 1.2mm 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.price td.n { text-align: right; white-space: nowrap; padding-left: 4mm; font-weight: 600; }
table.price td small { display: block; color: var(--muted); font-size: 8.5pt; line-height: 1.3; }
table.price tr.total td { border-bottom: 2px solid var(--leaf); font: 600 12pt/1.3 var(--display); color: var(--leaf); padding-top: 2.2mm; }
table.price tr.ionos td { font-size: 9pt; color: var(--ink); }
.box { background: var(--page); border-left: 3px solid var(--petal); padding: 2.5mm 3.5mm; font-size: 9pt; line-height: 1.4; }
.box p { margin: 0 0 1.2mm; }
.box p:last-child { margin: 0; }

/* how it works */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; font-size: 9pt; position: relative; padding-left: 28px; margin-bottom: 1.6mm; line-height: 1.35; min-height: 20px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--leaf); color: var(--card); font: 600 9pt/1 var(--body); }
.steps b { color: var(--ink); }

/* the decision */
.sign { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm 6mm; font-size: 9pt; color: var(--muted); }
.sign div:first-child { grid-column: 1 / -1; }
.sign div { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 3mm; }
.sign span { border-bottom: 1px solid var(--muted); height: 6mm; }

.sheet > footer { margin-top: auto; border-top: 1px solid var(--rule); padding-top: 2.5mm; font-size: 8pt; line-height: 1.35; color: var(--muted); display: flex; justify-content: space-between; gap: 8mm; }
.sheet > footer b { color: var(--leaf); }

/* a full quote (extras, writing and a care plan): the right-hand column a little tighter, still one page */
.dense h1 { margin: 3mm 0; }
.dense table.price td { padding: 0.8mm 0; font-size: 9.5pt; }
.dense table.price td small { font-size: 8pt; }
.dense table.price tr.total td { padding-top: 1.6mm; }
.dense .box { padding: 2mm 3mm; font-size: 8.5pt; }
.dense .steps li { font-size: 8.5pt; margin-bottom: 1.2mm; }
.dense section { margin-bottom: 3mm; }
.dense .sign { gap: 2.5mm 6mm; }

/* phones: the sheet becomes one column so it can be read before printing */
@media screen and (max-width: 820px) {
  .sheet { width: auto; min-height: 0; margin: 12px 16px 32px; padding: 20px 16px; }
  .split { grid-template-columns: 1fr; }
  .sheet > header, .sheet > footer { flex-direction: column; }
  .for { text-align: left; }
}

@media print {
  @page { size: A4; margin: 0; }
  body { background: none; }
  .bar { display: none; }
  .sheet { margin: 0; box-shadow: none; width: 210mm; min-height: 296mm; }   /* a hair under A4, so nothing spills onto a blank page */
}

/* SproutWell: the flower is taller than it is wide, headings in soil ink with the name in leaf green */
.logo svg:not(.sprite) { width: 30px; height: 46px; }
.logo b { font-weight: 700; color: var(--ink); }
.logo b i { font-style: normal; color: var(--leaf); font-weight: 700; }
h1, h2 { font-weight: 700; color: var(--ink); }
.sheet > header { border-bottom: 2.5px solid #1C1611; }