/* ===========================================================================
   GLEAM & GLOW — THE DEEP CLEAN QUOTE FORM
   ---------------------------------------------------------------------------
   ONE DOCUMENT, TWO JOBS, which is the whole reason it is a web page and not
   a PDF:

     ON SCREEN  she types into it, saves as PDF, and emails or messages it.
     ON PAPER   she prints a stack of blanks and writes on them at the door.

   Everything below is in MILLIMETRES so those two are the same document at the
   same size, and the screen version is the print version scaled — not a
   separate layout that happens to look similar.

   WHAT IT IS REPLACING, and what that teaches:
   She drafted the original with AI and said it looked "generic and AI". She
   was right, and it is worth being precise about why, because the fix is not
   "add more design":

     · Arial, at one size, bold for every emphasis. No typographic hierarchy,
       so nothing leads and everything shouts equally.
     · Emoji that rendered as ■ boxes — a font the exporter did not have.
     · A "Select" column so narrow the word broke as "Selec / t".
     · Ruled tables with a border on every side, which is a spreadsheet.
     · Two pages, the second holding one table row and some terms.
     · Nothing of hers anywhere: no mark, no colour, no typeface.

   None of that is a lack of decoration. It is a lack of decisions. So: her two
   typefaces, her four colours, her arch, hairlines instead of boxes, dot
   leaders instead of columns, one page, and a great deal of white space.
   ========================================================================= */

@import url('tokens.css');

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

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

body.qf {
  margin: 0;
  background: var(--cream-warm);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* =========================================================================
   THE SCREEN SHELL — hidden entirely when printing
   ========================================================================= */

.qf__bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  padding: .7rem clamp(.9rem, 3vw, 1.6rem);
  padding-top: calc(.7rem + env(safe-area-inset-top));
  background: rgba(249, 245, 244, .93);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--cream-deep);
}
.qf__bar h1 {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.3rem;
  margin: 0 auto 0 0;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.qf__bar img { width: 20px; height: auto; }

.qf__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--rose);
  background: var(--rose);
  color: var(--white);
  font: inherit;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.qf__btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.qf__btn--ghost { background: none; color: var(--rose); border-color: var(--blush); }
.qf__btn--ghost:hover { background: var(--blush-pale); }

/* The one non-brand colour on the page, and it earns its place for the same
   reason it does on the website: a recognisable green WhatsApp button is
   worth more to her than a perfectly consistent palette. */
.qf__btn--wa {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: #fff;
  text-decoration: none;
}
.qf__btn--wa:hover { background: #1eb85a; }

.qf__home {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 999px;
  color: var(--rose);
  text-decoration: none;
}
.qf__home:hover { background: var(--blush-pale); }
.qf__home svg { width: 20px; height: 20px; }

/* ---- what they are about to send --------------------------------------- */
.qf__preview {
  width: min(100%, 46rem);
  margin: 0 auto 1.75rem;
  background: #e6ded8;
  border-radius: var(--radius-lg);
  padding: 1.1rem;
}
.qf__preview-label {
  margin: 0 0 .6rem;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6b7180;
}
.qf__bubble {
  background: #dcf8c6;
  border-radius: 10px 10px 10px 2px;
  padding: .85rem 1rem;
  font-size: .92rem;
  line-height: 1.55;
  color: #111b21;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}
.qf__btn svg { width: 1.1em; height: 1.1em; }

.qf__stage {
  padding: clamp(1rem, 3vw, 2.5rem);
  display: grid;
  justify-items: center;
}
.qf__hint {
  max-width: 62ch;
  margin: 0 0 1.5rem;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: center;
}
.qf__hint strong { color: var(--rose-deep); font-weight: 400; }

/* The sheet is laid out at A4 and scaled to fit, exactly as the other
   document in this project is. See the note in quote.css. */
.qf__fit { width: 100%; overflow: hidden; }

/* =========================================================================
   THE SHEET
   ========================================================================= */

.sheet {
  width: 210mm;
  min-height: 297mm;
  padding: 11mm 14mm 9mm;
  background: var(--white);
  color: var(--ink);
  font-size: 2.95mm;
  line-height: 1.4;
  box-shadow: var(--shadow-lg);
  transform: scale(var(--fit, 1));
  transform-origin: top left;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* A 3mm band of her rose along the top. Small on purpose: she prints these
   at home in quantity, and a full-bleed header block is a cartridge a week. */
.sheet::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3mm;
  background: linear-gradient(100deg, var(--rose-deep), var(--rose) 45%,
              var(--blush) 65%, var(--rose-deep));
}

/* ---- masthead ---------------------------------------------------------- */
.sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8mm;
  padding-bottom: 4mm;
  border-bottom: .3mm solid var(--cream-deep);
}
.sheet__logo { width: 27mm; height: auto; }

.sheet__kind {
  text-align: right;
}
.sheet__kind h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: 2.5em;
  line-height: 1;
  color: var(--rose);
}
.sheet__contact {
  margin: 2mm 0 0;
  font-size: .82em;
  color: var(--ink-soft);
  line-height: 1.5;
}
.sheet__contact b { color: var(--rose); font-weight: 400; }

/* ---- the small caps label used throughout ------------------------------ */
.lbl {
  font-size: .68em;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rose);
}

/* ---- who and where ----------------------------------------------------- */
.sheet__who {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5mm 8mm;
  padding: 3.5mm 0;
}
.field { display: grid; gap: 1mm; }
.field--wide { grid-column: 1 / -1; }

/* THE WRITING LINE.
   A bottom border on a real <input>, so the same element is typed into on
   screen and written on with a pen. The alternative — underscores in a text
   run, which is what the original used — cannot be typed into at all, and
   prints as a row of hyphens at a slightly different height on every line. */
.line {
  border: 0;
  border-bottom: .3mm solid var(--blush);
  background: none;
  font: inherit;
  color: var(--ink);
  padding: .6mm 0 .5mm;
  width: 100%;
  min-height: 5.6mm;
  border-radius: 0;
}
.line:focus { outline: none; border-bottom-color: var(--rose); background: var(--blush-pale); }
.line::placeholder { color: var(--ink-faint); opacity: .55; }

/* ---- what a deep clean is ---------------------------------------------- */
.sheet__includes {
  padding: 2.8mm 4mm;
  background: var(--blush-pale);
  border-radius: 2mm;
  position: relative;
  overflow: hidden;
}
/* The gleam, held still. Paper does not animate, but the streak is the one
   thing that makes a flat panel look like a lit surface. */
.sheet__includes::after {
  content: '';
  position: absolute;
  inset: -30% auto -30% 58%;
  width: 22mm;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.sheet__includes p { margin: 1mm 0 0; position: relative; z-index: 1; }
.sheet__includes .lbl { position: relative; z-index: 1; }

/* ---- sections ---------------------------------------------------------- */
.sheet__section { padding-top: 3.5mm; }
.sheet__section > .lbl { display: block; margin-bottom: 2mm; }

/* THE PRICE MENU.
   Dot leaders, not table columns. A ruled table of three prices reads as a
   spreadsheet; a leader line reads as a menu, and a menu is what this is.
   It also degrades gracefully — no column can be too narrow to fit its own
   heading, which is how the original produced "Selec / t". */
.menu { display: grid; gap: 0; }

/* THE EXTRAS RUN IN TWO COLUMNS, and it is worth 23mm — nearly a tenth of the
   page — which is most of the difference between this fitting on one sheet and
   sprawling onto a second the way the original did.
   *
   It works here and would not work for the property sizes above: these four
   are two or three words each with no qualifying detail, so a half-width
   column still leaves a readable leader line between the name and the price.
   The size bands carry "up to 3 bed, 2 bath, 1 living area" and need the full
   measure. Same component, different density, decided by the content. */
.menu--split { grid-template-columns: 1fr 1fr; column-gap: 7mm; }
.menu--split .menu__row:nth-last-child(2) { border-bottom: 0; }
.menu__row {
  display: flex;
  align-items: baseline;
  gap: 2mm;
  padding: 1.4mm 0;
  border-bottom: .25mm solid var(--cream-deep);
}
.menu__row:last-child { border-bottom: 0; }

/* A real checkbox: tickable with a mouse, and a clean empty square in print. */
.tick {
  appearance: none;
  flex: none;
  width: 4mm;
  height: 4mm;
  margin: 0;
  align-self: center;
  border: .35mm solid var(--blush);
  border-radius: .7mm;
  background: var(--white);
  cursor: pointer;
}
.tick:checked {
  background: var(--rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/2.8mm no-repeat;
  border-color: var(--rose);
}
.tick:focus-visible { outline: .5mm solid var(--rose); outline-offset: .5mm; }

.menu__name { font-weight: 400; white-space: nowrap; }
.menu__detail { color: var(--ink-faint); font-size: .88em; }
.menu__dots {
  flex: 1;
  border-bottom: .25mm dotted var(--blush);
  translate: 0 -.9mm;
  min-width: 5mm;
}
.menu__price {
  font-family: var(--display);
  font-size: 1.5em;
  color: var(--rose-deep);
  white-space: nowrap;
}
.menu__price small {
  font-family: var(--sans);
  font-size: .5em;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 1mm;
}

/* ---- the comments box she asked for ------------------------------------ */
/* Sits directly under the property menu, which is where she wanted it: the
   size bands are broad, and the difference between a tidy three-bed and one
   that has not been touched in a year is a note, not a tick. */
.notes {
  margin-top: 2.5mm;
  border: .3mm solid var(--cream-deep);
  border-radius: 2mm;
  padding: 2.5mm 3mm;
  background: var(--cream);
}
.notes .lbl { display: block; margin-bottom: 1.5mm; }
.notes textarea {
  width: 100%;
  border: 0;
  background: none;
  resize: none;
  font: inherit;
  color: var(--ink);
  line-height: 1.85;
  /* Ruled, like a notepad, so handwriting stays level on a printed blank. */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(1.85em - .25mm),
    var(--cream-deep) calc(1.85em - .25mm),
    var(--cream-deep) 1.85em
  );
}
.notes textarea:focus { outline: none; }

/* ---- the total --------------------------------------------------------- */
.total {
  margin-top: auto;
  padding-top: 3mm;
}
.total__grid {
  display: grid;
  gap: 0;
  padding: 2.8mm 4mm;
  background: var(--blush-pale);
  border-radius: 2mm;
}
.total__row {
  display: flex;
  align-items: baseline;
  gap: 3mm;
  padding: 1mm 0;
}
.total__row + .total__row { border-top: .25mm solid rgba(138, 77, 94, .18); }
.total__row span:first-child { flex: 1; }
.total__row input {
  border: 0;
  border-bottom: .3mm solid var(--blush);
  background: none;
  font: inherit;
  font-family: var(--display);
  font-size: 1.4em;
  color: var(--rose-deep);
  text-align: right;
  width: 34mm;
  padding: 0 1mm .5mm;
}
.total__row input:focus { outline: none; border-bottom-color: var(--rose); }
.total__row--final { padding-top: 1.8mm; }
.total__row--final span:first-child {
  font-family: var(--display);
  font-size: 1.5em;
  color: var(--rose-deep);
}
.total__row--final input { font-size: 2.1em; border-bottom-width: .5mm; }

/* Moved out of the address block and next to the money, where it belongs:
   how long a price stands is a fact about the price. It also took a whole
   17mm row off the top of the sheet, which is most of what the one-page
   budget needed. */
.total__held {
  display: flex;
  align-items: baseline;
  gap: 3mm;
  margin-top: 2mm;
}
.total__held .line { max-width: 30mm; }

.total__note {
  margin: 1.8mm 0 0;
  font-size: .82em;
  font-style: italic;
  color: var(--rose);
}

/* ---- terms and signature ----------------------------------------------- */
.sheet__terms { padding-top: 3mm; }
.terms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2mm 8mm;
  margin-top: 1.5mm;
}
.terms-grid p { margin: 0; font-size: .84em; color: var(--ink-soft); line-height: 1.45; }
.terms-grid b { color: var(--ink); font-weight: 400; }

.sign {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 8mm;
  margin-top: 3.5mm;
  padding-top: 2.5mm;
  border-top: .3mm solid var(--cream-deep);
}

.sheet__foot {
  margin-top: 3mm;
  padding-top: 2mm;
  border-top: .3mm solid var(--cream-deep);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4mm;
}
.sheet__tagline {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.35em;
  color: var(--rose);
  margin: 0;
}
.sheet__badges { display: flex; gap: 2mm; }
.sheet__badge {
  font-size: .7em;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rose);
  border: .3mm solid var(--blush);
  border-radius: 999px;
  padding: .8mm 2.5mm;
  white-space: nowrap;
}

[hidden] { display: none !important; }

/* =========================================================================
   PRINT — the sheet alone, at exactly A4
   ========================================================================= */

@page { size: A4; margin: 0; }

@media print {
  body.qf { background: #fff; }
  .qf__bar, .qf__hint, .qf__preview { display: none !important; }
  .qf__stage { padding: 0; display: block; }
  .qf__fit { overflow: visible; }
  .sheet {
    transform: none !important;
    box-shadow: none;
    margin: 0;
  }
  /* The rose band and the tinted panels are the design. Without this, every
     browser strips them and it prints as the plain document it replaced. */
  .sheet, .sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Focus tints must never reach paper. */
  .line, .notes textarea, .total__row input { background: none !important; }
  .sheet__section, .total, .sheet__terms, .sign { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; }
}