/* ============================================================================
   The quote counter. Phone first — the research says people photograph a
   document with the phone in their hand, not scan it at a desk.
   ========================================================================= */

main { padding: 1.6rem 0 1rem; }
.head { margin: 1.8rem 0 1.2rem; }
.head h1 { font-size: var(--step-3); letter-spacing: -.015em; }
.muted-line { color: var(--muted); font-size: var(--step--1); }
/* .fine moved to counter.css 2026-09-08 - the account page uses it and loads neither this sheet nor order.css. */

/* ---------- the two counters -------------------------------------------- */

.desks {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--paper-sunk); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: .35rem; margin-top: 1.4rem;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.04);
}
.desk-glide {
  position: absolute; inset: .35rem auto .35rem .35rem; width: calc(33.333% - .24rem);
  background: var(--paper-raised); border-radius: calc(var(--r-lg) - .35rem);
  box-shadow: var(--lift-2); border: 1px solid var(--accent-edge);
  transition: transform .42s cubic-bezier(.22,1,.36,1), border-color .42s;
}
:root[data-desk="commercial"]  .desk-glide { transform: translateX(100%); }
:root[data-desk="copywriting"] .desk-glide { transform: translateX(200%); }

.desk {
  position: relative; z-index: 2; border: 0; background: transparent; cursor: pointer;
  padding: .85rem .8rem; border-radius: var(--r-md); text-align: left;
  opacity: .5; transition: opacity .3s;
}
.desk[aria-pressed="true"] { opacity: 1; }
.desk-t { font-family: var(--round); font-weight: 700; font-size: var(--step-1); display: block; line-height: 1.2; }
.desk-t em {
  font-style: normal; color: var(--muted); font-size: var(--step--1); font-weight: 500;
  display: block; font-family: var(--sans); letter-spacing: .04em;
}
.desk-d { font-size: var(--step--1); color: var(--muted); line-height: 1.5; display: block; margin-top: .35rem; }

/* The drop sheet moved to counter.css on 2026-09-08.

   It lived here, and quote.css is loaded by the counter pages and not by the free
   tools - so tools/read.html and tools/scan.html rendered their file drop zone
   with no border, no hover, no drag-over feedback and no chosen-file state, on
   the two pages the English search wedge points at. counter.css is loaded by all
   of them. */

.filename {
  font-family: var(--mono); font-size: var(--step--1) !important; color: var(--good) !important;
  word-break: break-all; margin-top: .3rem; font-weight: 700;
}


/* ---------- sides -------------------------------------------------------- */

.sides { display: block; margin: 1.3rem 0 .3rem; }
.sides-l { font-family: var(--round); font-weight: 700; display: block; }
.sides-h { font-size: var(--step--1); color: var(--muted); display: block; margin: .15rem 0 .6rem; line-height: 1.5; }

.stepper {
  display: inline-flex; align-items: center; gap: .2rem;
  border: 1px solid var(--rule-strong); border-radius: 999px; padding: .2rem; background: var(--paper-sunk);
}
.stepper button {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--paper-raised); box-shadow: var(--lift-1); font-size: 1.15rem;
  font-family: var(--round); font-weight: 700; line-height: 1;
  transition: transform .2s, background .2s;
}
.stepper button:hover:not(:disabled) { transform: scale(1.08); background: var(--accent); color: #fff; }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper output {
  min-width: 3rem; text-align: center; font-family: var(--mono); font-weight: 700;
  font-size: var(--step-1); font-variant-numeric: tabular-nums;
}

.go { width: 100%; margin-top: 1.3rem; }

/* ---------- working ------------------------------------------------------ */

.working-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .9rem; font-family: var(--round); }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: pulse 1.4s ease-in-out infinite; flex: none; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.65); } }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.steps li {
  display: grid; grid-template-columns: 26px 1fr; gap: .65rem; align-items: center;
  padding: .55rem 0; font-size: var(--step--1); color: var(--muted); transition: color .3s;
}
.steps li.busy, .steps li.done { color: var(--ink); }
.tick {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--rule-strong);
  display: grid; place-items: center; transition: all .35s;
}
.steps li.busy .tick { border-color: var(--accent); border-right-color: transparent; animation: spin .8s linear infinite; }
.steps li.done .tick { background: var(--good); border-color: var(--good); }
.steps li.done .tick::after { content: "✓"; color: #fff; font-size: .7rem; font-weight: 700; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- the answer ---------------------------------------------------- */

.result-head { padding: 1.3rem 1.3rem .2rem; }
.result-head h2 { font-size: var(--step-2); margin-top: .2rem; }

.price-band {
  margin-top: 1rem; padding: 1.2rem 1.3rem;
  background: var(--accent-wash); border-top: 1px solid var(--accent-edge); border-bottom: 1px solid var(--accent-edge);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
}
.price {
  font-family: var(--round); font-weight: 900; font-size: var(--step-3); color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.1;
}

.lines { font-size: var(--step--1); min-width: 12rem; }
.lines div { display: flex; justify-content: space-between; gap: 1rem; padding: .18rem 0; }
.lines .amt { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.reupload {
  background: var(--warn-wash); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: var(--r-sm); padding: .6rem .75rem; color: var(--ink-soft);
}


.reasons { margin: .8rem 0 0; padding-left: 1.1rem; }
.reasons li { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: .35rem; line-height: 1.55; }

@media (max-width: 560px) {
  .desks { grid-template-columns: 1fr; }
  .desk-glide { inset: .35rem; width: auto; height: calc(33.333% - .24rem); }
  :root[data-desk="commercial"]  .desk-glide { transform: translateY(100%); }
  :root[data-desk="copywriting"] .desk-glide { transform: translateY(200%); }
  .price-band { flex-direction: column; gap: .8rem; }
}


/* ============================================================================
   The third window: copywriting.

   Deliberately shaped unlike the other two. The official and commercial
   counters both start with "send us your document"; this one cannot, because
   there is no document — the customer is buying words that do not exist yet.
   So it opens with a catalogue instead of an upload, and the unit of the page
   is a card rather than a form.
   ========================================================================= */

.copy-cats { display: grid; gap: 2.4rem; margin-top: 1.6rem; }

.copy-cat > h2 {
  font-family: var(--round); font-size: var(--step-1); margin: 0 0 .2rem;
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.copy-cat > h2 em {
  font-style: normal; font-size: var(--step--1); color: var(--muted); font-weight: 400;
}
.copy-cat > p.cat-blurb {
  font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 1rem; max-width: 34rem;
}

.copy-grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
}

/* The card. Floats on hover — the interaction the owner asked for, kept to
   one place rather than sprinkled over the whole page. */
.copy-card {
  display: flex; flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 1.05rem 1.15rem;
  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s, border-color .2s;
}
.copy-card:hover, .copy-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--lift-2);
  border-color: var(--accent-edge);
}

.copy-card h3 {
  font-family: var(--round); font-size: var(--step-0); margin: 0 0 .1rem; line-height: 1.3;
}
.copy-card .unit {
  font-size: var(--step--2); color: var(--muted); font-family: var(--mono);
  letter-spacing: .04em; margin: 0 0 .6rem;
}
.copy-card p.what {
  font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6;
  margin: 0 0 .9rem; flex: 1;
}

.copy-card .foot {
  border-top: 1px solid var(--rule); padding-top: .7rem;
  display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem;
}
.copy-card .price { font-family: var(--mono); font-size: var(--step-0); font-weight: 600; }
.copy-card .price.ask { font-size: var(--step--1); font-weight: 500; color: var(--muted); }

/* Turnaround. The differentiator, so it is given its own shape rather than
   being another line of small print. */
.turn {
  text-align: right; font-family: var(--mono); font-size: var(--step--2);
  color: var(--muted); line-height: 1.45; white-space: nowrap;
}
.turn b { display: block; color: var(--good); font-size: var(--step--1); font-weight: 600; }

.copy-note {
  font-size: var(--step--1); color: var(--muted); line-height: 1.6;
  background: var(--paper-sunk); border-radius: var(--r-md);
  padding: .85rem 1rem; margin: 1rem 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .copy-card { transition: none; }
  .copy-card:hover, .copy-card:focus-within { transform: none; }
}

/* ---------- the commercial paste box -------------------------------------
   Paste rather than upload: a business letter is already text, and asking
   somebody to print and photograph it to get a price would be absurd. */

.paste-label {
  display: block;
  font-weight: 600;
  margin-bottom: .5rem;
  font-size: var(--step-0);
}

#commercial-text {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--step--1);
  line-height: 1.7;
  padding: .8rem .9rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}
#commercial-text:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.paste-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .7rem 0 .3rem;
  flex-wrap: wrap;
}

.counter-live {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.quote-out {
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}

.quote-out .big-price {
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 .3rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.quote-out .explain { margin: 0 0 .6rem; color: var(--ink-soft); }
.quote-out .refused { color: var(--shu); font-weight: 600; margin: 0; }

.quote-out .bundle {
  margin: .8rem 0;
  padding: .7rem .9rem;
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  border: 1px solid var(--accent-edge);
  font-size: var(--step--1);
}

.rate-card { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.rate-card dl.rates {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem 1.2rem;
  margin: 0 0 .7rem;
  font-size: var(--step--1);
}
.rate-card dt { color: var(--muted); font-weight: 600; white-space: nowrap; }
.rate-card dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---------- placing the order ------------------------------------------- */

.order-box {
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: .7rem;
  justify-items: start;
}

.field-inline { display: grid; gap: .35rem; width: min(100%, 22rem); }
.field-inline > span { font-size: var(--step--1); font-weight: 600; }
.field-inline input {
  font: inherit;
  font-size: var(--step--1);
  padding: .55rem .7rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.field-inline input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.order-box .placed { font-size: var(--step-1); font-weight: 700; margin: 0; color: var(--good); }
.order-box .ref { font-family: var(--mono); font-size: var(--step--1); margin: 0; }

/* ==========================================================================
   The copywriting brief. Added 2026-09-02, when the cards stopped being
   decoration and became doors.
   ========================================================================== */

/* The cards are <button> now, so the browser's own button styling has to go
   before they look like cards again. Text-align and font are the two that
   catch people out: without them every card centres itself and drops to the
   UA font, which reads as a rendering bug rather than a design. */
button.copy-card {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
button.copy-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

#copy-brief .back {
  margin-bottom: 1rem;
  padding-inline: .6rem;
}
#copy-brief h2 {
  font-family: var(--round);
  font-size: var(--step-1);
  margin: 0 0 .15rem;
}
#copy-brief .unit {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0 0 1.1rem;
}

/* What a finished one contains, shown before the questions. It is the answer
   to "what am I actually buying", and asking seven questions before answering
   it is how a form gets abandoned. */
.contains {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 1rem 1.15rem;
  margin-bottom: 1.2rem;
}
.contains .summary {
  font-size: var(--step--1);
  color: var(--ink);
  margin: 0 0 .7rem;
  font-weight: 600;
}
.contains ul.sections {
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.6;
}
.contains ul.sections li { margin-bottom: .35rem; }
.contains ul.sections b { color: var(--ink); }
.contains .delivers {
  font-size: var(--step--1);
  color: var(--ink);
  margin: .8rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--rule);
}

#copy-brief .field {
  display: grid;
  gap: .35rem;
  margin-bottom: 1rem;
}
#copy-brief .field > span {
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.45;
}
#copy-brief textarea,
#copy-brief input[type="email"] {
  font: inherit;
  font-size: var(--step--1);
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}
#copy-brief textarea::placeholder {
  color: var(--muted);
  opacity: .85;
}
#copy-brief textarea:focus-visible,
#copy-brief input[type="email"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
/* Marked when the server names it as a gap, so the customer is shown WHICH box
   rather than one sentence above an unchanged form. */
#copy-brief textarea.needs { border-color: var(--shu); background: var(--shu-wash); }

#copy-placed .ref {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0 0 .6rem;
}

/* ==========================================================================
   What it costs elsewhere. Added 2026-09-02, on the quote page where the
   owner asked for it on 1 September.
   ========================================================================== */

details.compare {
  border-top: 1px solid var(--rule);
  padding: 0 1.15rem 1.1rem;
}
details.compare > summary {
  cursor: pointer;
  padding: 1rem 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent);
  list-style: none;
}
details.compare > summary::-webkit-details-marker { display: none; }
/* A drawn indicator rather than the browser's triangle, which differs by
   platform and cannot be positioned. Rotates on open. */
details.compare > summary::before {
  content: '';
  display: inline-block;
  width: .42em; height: .42em;
  margin-right: .6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-2px);
  transition: transform .18s ease;
}
details.compare[open] > summary::before { transform: rotate(45deg) translateY(-2px); }
details.compare > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.compare-tab {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.compare-tab th,
.compare-tab td {
  text-align: left;
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.compare-tab thead th {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  background: var(--paper-sunk);
}
.compare-tab td.n,
.compare-tab th.n {
  text-align: right;
  font-family: var(--mono);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.compare-tab td b { display: block; font-weight: 600; }
.compare-tab td small {
  display: block;
  margin-top: .2rem;
  color: var(--muted);
  font-size: var(--step--2);
  line-height: 1.5;
  max-width: 42ch;
}
/* Our row marked, because a reader scanning a table of five needs to find it -
   not because it is sorted there. The order is by price. */
.compare-tab tr.us td { background: var(--good-wash); }
.compare-tab tr.us td b { color: var(--ink); }

/* ---------- an input row, and a list still loading ------------------------
   Both are used on the business counter and were declared in console.css,
   which this page does not load - so the "what were you looking for" inputs
   sat with no gap and the copywriting placeholder rendered as body text.

   Moved here rather than into counter.css on purpose: counter.css is loaded by
   the status page too, and status.css styles `.meta .row` without setting
   margin or flex-wrap, so a generic `.row` there would have quietly changed a
   page that had nothing to do with this. quote.css reaches index, order and
   basket, and only index uses either class. -------------------------------- */

.row { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0; }
.row input { flex: 1 1 14rem; min-width: 0; }
.row .btn { flex: 0 0 auto; }

.loading { color: var(--muted); font-size: var(--step--1); padding: 1.4rem; text-align: center; }

/* ---------- the Word/Excel control ---------------------------------------
   `.office-open` is the <label> for a file input that is `.sr-only`, so the
   label IS the control - and it had no rule at all, which meant "Or open a
   Word or Excel file" rendered as ordinary text with nothing to say it could
   be clicked. The business counter had a file path nobody could see.

   Two faults, both mechanical:

   1. No affordance at rest. Given the same accent-and-underline the page
      already uses for links rather than a new look - what this control should
      ultimately look like is the owner's call, and this is the accessible
      floor, not a design.

   2. No visible focus. The input is clipped to 1px, so the global
      :focus-visible outline was being drawn on a box nobody can see - a
      keyboard user tabbing here got no indicator at all. The ring is proxied
      onto the label, which is the part actually on screen. -------------------- */

.office-open {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.office-open:hover { text-decoration-thickness: 2px; }

.office-row:has(input:focus-visible) .office-open {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- a button that should read as a link --------------------------
   `.linkish` is on a real <button> - "Ask us to forget your address" - which
   is correct markup for something that opens a form rather than navigating.
   With no rule it kept the browser's default button chrome inside a line of
   fine print, so the one control on the page that handles a deletion request
   looked like a stray form element.

   Link appearance, button semantics. The global :focus-visible ring already
   covers it, because unlike the file control this element is on screen. ----- */

.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.linkish:hover { text-decoration-thickness: 2px; }

/* ---------- wide content scrolls in its own box, not the page ------------
   `.scroll` wraps the price-comparison table. With no rule the table set the
   width of the document on a narrow screen, so the whole business counter
   scrolled sideways - and the table is inside a <details> most people never
   open, which is how it went unnoticed.

   `overflow-x: auto` on the wrapper rather than a narrower table: the figures
   are the point, and shrinking them to fit is worse than scrolling them. --- */

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll > table { min-width: 30rem; }

/* The referral code, added 2026-09-11 with the input itself.
   Sits between the price and the accept button because that is the moment somebody
   remembers they have one, and it must not compete with the accept button: ghost
   weight on the apply control, full weight reserved for the act that moves the order. */
.referral { margin: 14px 0 4px; }
.referral-entry { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.referral-entry input {
  flex: 1 1 11rem;
  min-width: 0;
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line, #d3d8cf);
  border-radius: 8px;
  background: var(--surf-2, #fff);
  color: inherit;
}
.referral-entry input::placeholder { letter-spacing: 0.06em; opacity: 0.55; }
.referral-entry input:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.referral-entry .btn { flex: 0 0 auto; }