/* Shared appearance for every signing form we send out — employee-facing (attestation,
   incident acknowledgment, SMS consent, exposure, DWC-1) and patient-facing (planning &
   design). One source of truth so they look identical: same theme, width, cards, inputs,
   signature pad, and buttons. Form-specific bits stay inline in each template.
   Load with: <link rel="stylesheet" href="/static/signing.css"> */
/* EVERY value a practice can change lives here as a custom property, and every rule below
   reads one rather than carrying a literal. That is what lets the theme editor work by
   layering a second `:root{}` over this file instead of rewriting it: overrides are
   additive, anything left alone keeps the shipped value, and clearing a field is a revert.
   The defaults below ARE the shipped design — changing one here changes it for every
   install that has not overridden it. */
:root{
  /* Colour */
  --bg:#fbfaf7; --card:#ffffff; --ink:#33393a; --head:#1c1f1e; --muted:#7d786d;
  --green:#3a6b5e; --green-d:#2f5a4e; --green-tint:#f1f7f4; --line:#e8e4da;
  --field:#fbfaf7; --red:#b4443a; --dash:#cfcabd;
  /* Type */
  --font-body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-head:Newsreader,Georgia,"Times New Roman",serif;
  --body-size:15px; --body-line:1.6;
  /* HEADINGS ARE THE PRACTICE GREEN, on the page as well as on the PDF. The signed PDF
     has always asked for green (render_hr_pdf heading_color) while the page it is meant
     to match rendered them near-black, so the same document looked like two documents -
     and the standing rule here is that the PDF matches the web page (Matt, 2026-08-26:
     "i want the heading colors to be that awesome dark green color"). Both are theme
     variables, so the practice can still take them anywhere. */
  /* 2026-09-10: every form reads at 14 POINT (18.7px). CMIA holds a California
     authorization to no smaller than 14-point type, and once the photo release wore it
     the practice sized every form the same rather than run two looks (Matt: "applied
     everywhere automatically by changing the css for the forms"). The headings scale
     with it or they read smaller than the body. These are the shipped defaults; the
     Look and feel editor still overrides all three, and the signing page enforces the
     14-point FLOOR per document type on top, so a theme edit cannot shrink a document
     the law sizes. Change these together with signing_theme.py's stated defaults and
     the document editor's fallbacks in dashboard.html — the standing rule. */
  --h1-size:34px; --h1-weight:500; --h1-line:1.15; --h1-color:var(--green);
  --sec-size:24px; --sec-color:var(--green);
  --mh-name-size:16px; --mh-name-weight:700; --mh-sub-size:11px;
  --doc-size:18.7px; --doc-line:1.6;
  --label-size:11px;
  --field-size:15.5px;
  /* Layout */
  --amt-size:30px;
  /* ONE width. 660px was a phone layout on a desktop — it squeezed the ZIP field to 136px
     — so this is wider, and everything spans it: the party block, the card fields and the
     terms panel all end at the same edge.
     
     A previous version ran an 820px card with the terms capped to a 560px reading measure
     inside it, on the argument that prose past ~75 characters is harder to track. The
     argument is sound and the result was worse: a bordered panel visibly narrower than
     everything around it reads as a fault, not as a column. 740 puts the terms at about 80
     characters, which is past ideal and perfectly normal for a legal document, and the page
     is coherent. Do not reintroduce the split without solving how the panel edge looks. */
  /* 2026-08-25: widened to a DOCUMENT width. These pages are a piece of paper - the
     signed PDF that comes out of them is US Letter, 8.5in, which is 816px at 96dpi - so
     the page a patient signs on and the exhibit it produces are now the same width. 740
     was a reading measure applied to something that is not prose but a document with a
     table of procedures in it, and the plan table was the thing that showed it: five
     columns squeezed where the PDF has room. The phone is unaffected: the media query
     below collapses the frame entirely and the width never binds there. */
  --wrap-width:820px;
  --card-radius:14px; --card-pad:28px; --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);min-height:100vh;color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--body-size);line-height:var(--body-line);padding:22px;display:flex;justify-content:center}
.wrap{width:100%;max-width:var(--wrap-width)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--card-radius);padding:var(--card-pad);
  box-shadow:0 8px 30px rgba(28,31,30,.06);margin-bottom:14px}
/* The practice lockup, matching the notification-card email header: monogram, then the
   practice name over a green eyebrow. One block so every signing page carries the same
   masthead the emails do. The plain .brand text is kept for pages that have not adopted it. */
.brand{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--green);margin-bottom:4px}
.masthead{display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:18px;
  border-bottom:1px solid var(--line)}
.masthead img{display:block;width:44px;height:44px;border:0;flex:0 0 44px}
.masthead .mh-name{font-weight:var(--mh-name-weight);font-size:var(--mh-name-size);color:var(--head);letter-spacing:.03em;line-height:1.2}
.masthead .mh-sub{font-size:var(--mh-sub-size);color:var(--green);letter-spacing:.10em;text-transform:uppercase;margin-top:2px}
@media(max-width:520px){.masthead img{width:38px;height:38px;flex-basis:38px}
  .masthead .mh-name{font-size:15px}}
h1{font-family:var(--font-head);font-weight:var(--h1-weight);font-size:var(--h1-size);
  line-height:var(--h1-line);color:var(--h1-color);margin:0 0 10px}
.meta{font-size:14px;color:var(--muted);margin:1px 0}
.meta b{color:var(--ink);font-weight:600}
.intro{font-size:14.5px;color:var(--ink);margin:16px 0 6px}

/* Deadline banner — deliberately bold, so the due date is the thing you can't miss. */
.deadline{background:#fdf6e7;border:1px solid #f0e2c0;color:#7a5a12;border-radius:10px;
  padding:13px 16px;font-size:15px;font-weight:600;line-height:1.5;margin:18px 0 4px}

/* Yes/No questions — the answer sits to the RIGHT of the question, buttons not radios.
   On a narrow screen the buttons drop below the question, full width. */
.q{border-top:1px solid var(--line);padding:17px 0}
.q-head{display:flex;align-items:center;gap:18px}
.q-text{flex:1;font-size:14.5px;line-height:1.5;color:var(--ink)}
.q-text .n{color:var(--muted);margin-right:7px;font-weight:600}
.yn{display:flex;gap:8px;flex-shrink:0}
.yn label{display:flex;align-items:center;justify-content:center;min-width:64px;padding:9px 18px;
  border:1px solid var(--line);border-radius:9px;background:#fff;font-size:14px;font-weight:600;
  color:var(--ink);cursor:pointer;transition:border-color .12s,background .12s}
.yn label:hover{border-color:var(--green)}
.yn label.on{border:2px solid var(--green);padding:8px 17px;background:var(--green-tint);color:var(--green-d)}
.yn input{position:absolute;opacity:0;pointer-events:none}
.followup{margin-top:12px}
.followup .fp{font-size:13px;color:var(--red);margin-bottom:6px;line-height:1.45}
@media(max-width:540px){
  .q-head{flex-direction:column;align-items:stretch;gap:11px}
  .yn label{flex:1}
}

/* Fields */
label.field{display:block;font-size:var(--label-size);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin:18px 0 7px}
/* Every text-entry control gets the SAME box. The list used to be type=text and type=tel
   only, so an email field and a select sat in the same row as a styled input at the
   browser's own default size, which looked like a mistake because it was one. Type-agnostic
   now: anything not a checkbox, a radio or a file picker is a field. A file input is
   excluded because appearance:none strips its own Choose File button in WebKit. */
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{
  width:100%;padding:12px 13px;border-radius:9px;
  border:1px solid var(--line);background:var(--field);color:var(--ink);font-size:var(--field-size);
  outline:none;font-family:inherit;box-sizing:border-box;-webkit-appearance:none;appearance:none}
input:focus,select:focus,textarea:focus{border-color:var(--green)}
/* A placeholder must never read as a value. There was no rule at all, so it fell to the
   browser default — a mid grey that on this cream field looks like typed text, and
   "(310) 555-0100" or "Full name on the card" then looks like a field somebody has already
   filled in. A field that looks answered is the one nobody reads, which is the same reason
   nothing on these forms is prefilled. Faint enough to be plainly a hint, dark enough to
   read. */
::placeholder{color:var(--muted);opacity:.5}
::-webkit-input-placeholder{color:var(--muted);opacity:.5}
::-moz-placeholder{color:var(--muted);opacity:.5}
textarea{resize:vertical;min-height:62px}
/* A native select loses its arrow to appearance:none, so it gets one drawn back. */
select{padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237a756c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}

/* Certification / consent blocks */
.certline{font-size:14.5px;color:var(--ink);line-height:1.55;margin:18px 0 2px;padding:14px 16px;
  background:var(--green-tint);border-left:4px solid var(--green);border-radius:0 10px 10px 0}
/* The acceptance text reads at the SAME size as the terms. It was 13.5px against the
   terms' 14px with a tighter line height, which made the words somebody agrees to by
   ticking the smallest thing on the page — backwards, and visibly so. Sharing --doc-size
   also means the two move together when the practice changes it. */
.certify{display:flex;gap:12px;align-items:flex-start;margin:20px 0 2px;font-size:var(--doc-size);
  line-height:var(--doc-line);cursor:pointer;color:var(--ink)}
.certify input{width:21px;height:21px;margin-top:1px;accent-color:var(--green);flex-shrink:0}
.sec{font-family:var(--font-head);font-weight:600;font-size:var(--sec-size);color:var(--sec-color);margin:24px 0 8px}
.resp-prompt{display:block;font-size:14px;color:var(--ink);line-height:1.55;margin:0 0 10px}

/* Signature pad (draw / type) */
.sigtabs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.sigtab{padding:14px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);
  font-size:15px;font-weight:600;cursor:pointer;font-family:inherit}
.sigtab.on{background:var(--green);color:#fff;border-color:var(--green)}
.fontopts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.fontopt{padding:14px;border:1px solid var(--line);border-radius:11px;background:#fff;cursor:pointer;
  font-size:26px;color:var(--head);line-height:1;overflow:hidden;white-space:nowrap}
.fontopt.on{border:2px solid var(--green);padding:13px}
.sigbox{border:2px dashed var(--dash);border-radius:12px;background:#fff;min-height:190px;display:flex;
  align-items:center;justify-content:center;position:relative;overflow:hidden}
#a-type-preview{width:100%;text-align:center;padding:0 16px;font-size:54px;color:var(--head);
  line-height:1.1;overflow:hidden}
#a-type-preview.empty{color:#cfcabd;font-family:Inter,sans-serif;font-size:16px}
canvas{width:100%;height:186px;display:block;touch-action:none}
.sighint{position:absolute;left:16px;top:14px;font-size:13px;color:#c3bdb0;pointer-events:none}
/* A note under a field, in the field's own column: says something about what is in
   the box rather than instructing the reader, so it sits below and stays quiet. */
.fieldnote{font-size:12.5px;color:var(--muted);line-height:1.5;margin:5px 0 0}
.fieldnote a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.sigfoot{display:flex;justify-content:space-between;align-items:center;margin-top:9px;font-size:13px;color:var(--muted)}
.sigfoot a{color:var(--green);cursor:pointer;font-weight:600}

/* The fee. Deliberately the loudest thing on the page after the heading: someone should
   not be able to sign without having seen the amount. Same treatment as .deadline, which
   already does "you cannot miss this". */
.feebox{background:var(--green-tint);border:1px solid #cfe3da;border-radius:12px;
  padding:16px 18px;margin:18px 0 4px;display:flex;justify-content:space-between;
  align-items:baseline;gap:14px;flex-wrap:wrap}
.feebox .lbl{font-size:13px;font-weight:600;color:var(--green-d)}
.feebox .amt{font-family:var(--font-head);font-size:var(--amt-size);font-weight:500;color:var(--head);line-height:1}
.feebox .note{flex-basis:100%;font-size:12.5px;color:var(--muted);margin-top:2px}

/* Payment sits below the signature on the same page, so signing and paying read as one
   act. Stripe renders its fields inside #pay-element; the frame is ours. */
.paysec{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.paysec .paybox{border:1px solid var(--line);border-radius:12px;background:#fff;padding:16px}
.paysec .wait{font-size:14px;color:var(--muted);line-height:1.55}

/* Submit + messages + end states */
button.submit{width:100%;margin-top:20px;padding:15px;border:none;border-radius:10px;background:var(--green);
  color:#fff;font-size:15px;font-weight:600;cursor:pointer;letter-spacing:.01em}
button.submit:hover{background:var(--green-d)}
button.submit:disabled{opacity:.55;cursor:default}
.msg{margin-top:14px;font-size:14px;padding:12px 14px;border-radius:9px;display:none}
.msg.err{display:block;background:#fbeceb;border:1px solid #f2cfcb;color:var(--red)}
.state{text-align:center;padding:26px 8px}
.state .big{font-size:40px;margin-bottom:10px}
.state h1{margin:0 0 8px}
.state p{color:var(--muted);font-size:15px;margin:0}
/* ── Phones: the screen IS the sheet ───────────────────────────────────────────────
   On a desktop the card is a piece of paper on a desk, and the space around it is what
   makes it read as a document. On a phone that metaphor costs 43% of the screen: 22px of
   page padding, then 28px of card padding, then the panel and the list indent inside that,
   which left a bullet 215px wide on a 375px display.
   So the frame collapses. No page padding, no card border, no radius, no shadow — the card
   simply IS the page, which is how every well-made form reads on a phone. Values are set
   DIRECTLY rather than through the theme variables, so a practice that has widened its card
   padding for desktop does not re-break the phone.  */
@media(max-width:560px){
  body{padding:0}
  .card{border:none;border-radius:0;box-shadow:none;padding:18px 16px;margin-bottom:0;
        min-height:100vh}
  h1{font-size:calc(var(--h1-size) * 0.8)}
  .masthead{padding-bottom:13px;margin-bottom:15px}
}

/* Admin preview banner */
.pvw{background:#fdf6e7;border:1px solid #f0e2c0;color:#7a5a12;border-radius:10px;padding:11px 13px;
  font-size:13.5px;line-height:1.5;margin-bottom:16px;display:none}


/* ── A button that is waiting SAYS SO ──────────────────────────────────────────
   Applied by the fetch wrapper in signing.js, never by a page's own handler, so
   every signing page has it and a new one gets it for free. */
.is-busy{position:relative;pointer-events:none;opacity:.75}
.is-busy::after{content:'';display:inline-block;width:11px;height:11px;
  margin-left:8px;vertical-align:-1px;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;opacity:.85;
  animation:busyspin .6s linear infinite}
@keyframes busyspin{to{transform:rotate(360deg)}}