/* HSA Rolltops — estimate request form.  Mobile-first: this gets filled in on a
   phone, at a job site.  No external fonts, no CDN, works over plain HTTP. */

/* THE PALETTE IS THE SITE'S, NOT THIS FILE'S (2026-10-26). The token names this file
   has always used (--paper, --card, --line, --accent-2, --tint ...) are mapped onto the
   site's own model.css tokens in the "site palette" section at the END of this file, so
   the form and the pages around it are one palette with one light/dark switch. */
:root{--pad:16px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
a{color:var(--accent)}
.small{font-size:.875rem;color:var(--ink-2)}
.hint{font-size:.85rem;color:var(--ink-2);margin:.35rem 0 0}
.err{font-size:.85rem;color:var(--bad);margin:.35rem 0 0;font-weight:600}
.req{color:var(--accent);font-weight:700}
.note{color:var(--ink-2);font-style:normal;font-size:.85em}

/* The masthead is the SITE's: model.css draws header.site, and site\generate.php
   writes the markup. The four rules that used to sit here dressed an older, hand-written
   header - and would have repainted the site's masthead dark-on-dark. Deleted 2026-10-26.
 */

h1{font-size:1.5rem;line-height:1.25;margin:.2rem 0 .6rem}
.lede{color:var(--ink-2);margin:0 0 16px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
      padding:var(--pad);margin:0 0 16px}
.card h2{font-size:1.05rem;margin:0 0 .25rem;display:flex;align-items:center;gap:.5rem}
.card h2 .num{display:inline-flex;width:24px;height:24px;border-radius:50%;
      background:var(--ink);color:#fff;font-size:.8rem;align-items:center;justify-content:center;flex:0 0 auto}
.blurb{margin:0 0 12px;color:var(--ink-2);font-size:.9rem}

.row{margin:0 0 16px}
.row:last-child{margin-bottom:0}
.row > label, .row legend{display:block;font-weight:600;margin-bottom:.35rem}
fieldset{border:0;padding:0;margin:0 0 16px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--ink);font:inherit;min-height:44px;
}
textarea{min-height:auto}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{
  outline:3px solid var(--accent-2);outline-offset:2px;
}
.bad input,.bad select,.bad textarea{border-color:var(--bad);background:#fff7f7}

.checks,.radios{display:grid;gap:6px}
.checks{grid-template-columns:1fr}
@media(min-width:620px){.checks{grid-template-columns:1fr 1fr}}
label.inline{display:flex;gap:10px;align-items:flex-start;font-weight:400;min-height:32px}
label.inline input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--accent)}

button{font:inherit;font-weight:600;background:var(--accent);color:#fff;border:0;
  border-radius:8px;padding:13px 22px;min-height:48px;cursor:pointer}
button:hover{background:var(--accent-2)}
button[disabled]{opacity:.55;cursor:not-allowed}

.card.submit{background:#fffdf8}
.card.success{border-color:var(--ok);background:#f3faf3}
.card.success h1{margin-top:0}
.card.success .ref{font-size:1.05rem}
.card.problem{border-color:var(--bad);background:#fff6f6}

.savebar{font-size:.85rem;color:var(--ink-2);margin:0 0 12px;min-height:1.2em}
.savebar.saving{color:var(--ink-2)}
.savebar.saved{color:var(--ok)}
.savebar.error{color:var(--bad);font-weight:600}

.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.drop input[type=file]{width:100%;padding:10px;border:1px dashed var(--line);border-radius:8px;background:#fff}
.attach{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:8px;background:#f2efe9;border:1px solid var(--line);
      border-radius:999px;padding:6px 10px;font-size:.85rem;max-width:100%}
.chip .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.chip .sz{color:var(--ink-2)}
.chip .rm{border:0;background:none;color:var(--bad);font-size:1.1rem;line-height:1;padding:0 2px;
      min-height:auto;cursor:pointer;font-weight:700}
.prog{height:6px;background:#e6e1d8;border-radius:3px;overflow:hidden;margin-top:8px}
.prog > i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}

footer.wrap{padding-top:8px;padding-bottom:32px}

/* ---- repeatable line items ------------------------------------------- */
.products .line{border:1px solid var(--line);border-radius:8px;padding:12px;margin:0 0 12px;
      background:#fffdf9}
.products .line + .line{margin-top:0}
.line-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
      margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.line-no{font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.rm-line{background:none;color:var(--bad);border:1px solid var(--line);border-radius:6px;
      padding:6px 12px;min-height:36px;font-weight:600;font-size:.85rem}
.rm-line:hover{background:#fff2f2;border-color:var(--bad)}
.lf{margin:0 0 12px}
.lf:last-child{margin-bottom:0}
.lf > label{display:block;font-weight:600;margin-bottom:.3rem;font-size:.95rem}
.line-more{margin:0 0 12px;border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:#fbfaf7}
.line-more > summary{cursor:pointer;font-weight:600;font-size:.95rem}
.line-more[open] > summary{margin-bottom:10px}
.pill{display:inline-block;background:var(--accent);color:#fff;border-radius:999px;
      padding:1px 8px;font-size:.75rem;font-weight:600;vertical-align:middle}
.addwrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 0}
#addline{background:var(--ink)}
#addline:hover{background:#000}
@media(min-width:640px){
  /* Two columns.  Product series, model and finish span the full width; Depth and
     Quantity sit SIDE BY SIDE on one row so their tops line up, rather than one
     landing above the other.  This is why depth_variant is declared before
     quantity in line_defs(): auto-placement fills the row left to right. */
  .line{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start}
  .line-head,.line-more,.lf-model_number,.lf-finish_colour,.lf-product_series{grid-column:1 / -1}
  .lf-depth_variant{grid-column:1 / 2}
  .lf-quantity{grid-column:2 / 3}
}

/* ---- share this request ------------------------------------------------
   REVISED 2026-10-22: this link is now the READ-ONLY share token (/s/<token>), not
   the owner's resume link.  It can be read and copied, never edited in place, and
   the owner can revoke it.  The resume link - which CAN edit - is labelled private
   and kept separate. */

.share{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.share-h{font-size:1rem;margin:.1rem 0 .35rem}
.share-row{display:flex;gap:8px;align-items:stretch;margin:.6rem 0 .3rem;flex-wrap:wrap}
.share-url{flex:1 1 240px;min-width:0;font:inherit;font-size:.85rem;padding:9px 10px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink-2)}
.share-row button{flex:0 0 auto}
.share-sep{color:var(--line);margin:0 6px}
.share-warn{font-style:italic}
@media (max-width:520px){ .share-row button{flex:1 1 100%} }

/* ---- a shared request: read-only, with exactly one action (2026-10-22) - */
.card.shared{border-left:4px solid var(--accent)}
.card.shared h1{margin-top:.2rem}
.copybtn{margin:.5rem 0 .25rem;background:var(--accent);color:#fff;border:0;
      border-radius:var(--radius);padding:12px 18px;font:inherit;font-weight:600;
      cursor:pointer;min-height:44px}
.copybtn:hover{filter:brightness(1.06)}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:.85rem;color:var(--ink-2);
      text-decoration:underline;cursor:pointer}
.linkbtn:hover{color:var(--bad)}
.share .linkbtn{font-size:.85rem}

/* A disabled <fieldset> is the whole mechanism for read-only: every descendant
   control is inert and the browser submits nothing, so a shared view cannot write
   to the owner's draft even with script tampering.  What is hidden here is only the
   AFFORDANCE to change something - the chosen values stay fully visible. */
fieldset.fields{border:0;margin:0;padding:0;min-width:0}
fieldset.fields[disabled] input,fieldset.fields[disabled] select,
fieldset.fields[disabled] textarea{background:var(--paper);color:var(--ink);cursor:not-allowed}
fieldset.fields[disabled] input[type=file],
fieldset.fields[disabled] #addline,
fieldset.fields[disabled] .rm-line,
fieldset.fields[disabled] .chip .rm{display:none}

/* ============================================================================
   THE SITE'S PALETTE, AND THE SITE'S CHROME WIDTHS        (added 2026-10-26)

   The form is served from the site's docroot (/estimate/ beside /assets/) and wears the
   site's own masthead and footer, so it has to speak the site's design language rather
   than keep a private copy of it. There is exactly one palette - the settled design's,
   defined in assets/model.css - and the light/dark switch is the site's own
   (data-theme on <html>, set before paint by assets/theme.js).

   This section is loaded LAST on purpose: it maps this file's older token names onto the
   site's, and it repairs the handful of places where this file hard-codes a light value.
   Anything about the form's own controls belongs above; anything about living inside the
   site belongs here.
   ========================================================================== */

/* ---- one palette ------------------------------------------------------- */
:root{
  --paper:var(--surface);          /* the page ground */
  --card:#FFFFFF;                  /* a card is a lift off the ground */
  --ink-2:var(--ink-muted);
  --line:var(--rule);
  --accent-2:#7D0000;              /* hover/focus: darker, never the dark-mode pink */
  --ok:#1B5E20; --bad:#A3160E;
  --tint:var(--surface-2);
  --tint-2:var(--surface-2);
  --ok-bg:#F3FAF3; --bad-bg:#FFF6F6; --hover-warm:#FFF2F2;
  --display:var(--display-font);
  --label:var(--label-font);
  /* --accent, --radius and --max are the site's own and are NOT redefined here. */
}
[data-theme="dark"]{
  --card:#1E1A15;
  --accent-2:#B31717;
  --ok-bg:#12200F; --bad-bg:#251312; --hover-warm:#241A1A;
}

/* ---- the form's controls follow the theme ------------------------------ */
[data-theme] input[type=text],[data-theme] input[type=email],[data-theme] input[type=tel],
[data-theme] input[type=number],[data-theme] input[type=date],[data-theme] select,
[data-theme] textarea{background:var(--card);color:var(--ink)}
[data-theme] .products .line,[data-theme] .line-more{background:var(--tint)}
[data-theme] .chip,[data-theme] .prog{background:var(--tint-2)}
[data-theme] .rm-line:hover{background:var(--hover-warm)}
[data-theme] .card.success{background:var(--ok-bg)}
[data-theme] .card.problem{background:var(--bad-bg)}
[data-theme] .bad input,[data-theme] .bad select,[data-theme] .bad textarea{background:var(--bad-bg)}
[data-theme] fieldset.fields[disabled] input,[data-theme] fieldset.fields[disabled] select,
[data-theme] fieldset.fields[disabled] textarea{background:var(--tint)}
/* a numbered badge is the accent, never var(--ink): on the dark ground --ink is near
   white, so a white circle with white type disappears */
[data-theme] .card h2 .num{background:var(--accent);color:#fff}
[data-theme] #addline{background:var(--accent)}
[data-theme] #addline:hover{background:var(--accent-2)}

/* ---- living inside the site's chrome ----------------------------------- */
/* The site's chrome spans the site's measure; the form itself keeps a reading column. */
header.site .wrap,footer .wrap{max-width:var(--max)}
main.wrap{max-width:860px;padding-top:44px}
/* the site's own rule under the masthead, so the form's first line is not glued to it */
/* this file paints every bare link in the accent colour, which is right inside the form
   and wrong in the site's footer (the site's footer links are ink until hovered) */
footer li a{color:inherit}
footer{padding:70px 0 46px}