/* The customer's form is a phone screen: one column, two or three questions at
   a time, a heading that says what we want and why. The agent pages load this
   file first and agent.css second, so the tokens and the plain document shapes
   near the top belong to both; everything under .shell belongs to the form.
   Icons are inline SVG written in app.js, so nothing loads from a CDN. */

@font-face {
  font-family: "Heebo";
  src: url("fonts/heebo-hebrew.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC,
    U+FB1D-FB4F;
}

@font-face {
  font-family: "Heebo";
  src: url("fonts/heebo-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* The brand. The generated brand.css redefines these for one agency, and
     agent.css reads them, so the names stay whatever the form looks like. */
  --primary: #0e7c86;
  --primary-dark: #0a5e66;
  --on-primary: #fff;

  --page: #fff;
  --ink: #14213d;          /* headings, answers, the button */
  --muted: #5b6577;        /* leads, captions, floating labels */
  --line: #e3e6eb;
  --field: #f6f7f9;        /* the fill of an input box */
  --danger: #c62828;
  --disabled: #e3e6eb;
  --disabled-ink: #9aa3af;
  --radius: 8px;
  --gutter: 20px;

  /* The agent pages (agent.css) and the per-agency brand.css were written
     against the older token names, and brand.css redefines four of them for
     one tenant. Keeping the names alive here is what lets one stylesheet
     serve both looks: the public form reads the names above, the agent side
     reads these, and an agency colour still reaches both. */
  --question: var(--ink);
  --answer: var(--ink);
  --border: var(--line);
  --card: #f6f8fa;

  /* The two shades the agent buttons keep from the Surense look. */
  --save: #22c45e;
  --save-soft: #f2fcf6;
  --cancel: #fe5530;
  --cancel-soft: #fff5f2;
}

* { box-sizing: border-box; }

/* The signature pad toggles [hidden] on a hint, a link button and an input, and
   the class rules below set display; the UA rule alone would lose. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    Arial, "Noto Sans Hebrew", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* ---- the shapes the agent pages share ---- */

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  max-width: 760px;
  margin: 0 auto;
}

/* The agency's own logo, next to its name. Capped in both directions and
   never stretched, because what an agency uploads is whatever its designer
   made and no two are the same shape. A hidden image is not a flex item, so
   a tenant without a logo gets no gap and the header is unchanged. */
.brand-logo {
  max-height: 40px;
  max-width: 160px;
  width: auto;
  height: auto;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 48px; }

input[type="text"], input[type="tel"], input[type="email"],
input[type="number"], input[type="date"], input[type="password"],
select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}

::placeholder { color: var(--muted); opacity: 1; }

input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  outline: 2px solid var(--primary);
  outline-offset: 0;
}

/* iOS Safari centres the value and ignores height without this. */
input[type="date"]::-webkit-date-and-time-value { text-align: start; }

button {
  font: inherit;
  color: inherit;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  padding: 11px 28px;
  cursor: pointer;
}

button:disabled { opacity: 0.6; cursor: default; }

button:focus-visible,
a:focus-visible,
input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* A plain row of buttons. Only the agent pages use it now; the form has a bar
   of its own at the bottom of the column. */
.actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-block: 20px 0;
}

.actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 22px;
  font-size: 16px;
  font-weight: 500;
}

/* "שמירה" and "ביטול" on an agent page read as they do in Surense. */
.actions .btn-primary { background: #fff; border-color: var(--save); color: var(--save); }
.actions .btn-primary:hover:not(:disabled) { background: var(--save-soft); }
.actions .btn-secondary { color: var(--cancel); border-color: transparent; padding-inline: 14px; }
.actions .btn-secondary:hover:not(:disabled) { background: var(--cancel-soft); }

/* A link-shaped button is text, so it takes the shade brand.css derives to
   clear 4.5:1 as text; the agency's colour itself may be too pale for that. */
.btn-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--primary-dark);
  padding: 0;
}

/* An anchor that has to look like a button: the button rules above are on the
   element, not on a class, so the shape is repeated here once. Used for the
   WhatsApp link on the thank-you page. */
.btn-wide {
  display: inline-block;
  margin-top: 22px;
  font: inherit;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 11px 28px;
  text-decoration: none;
  background: var(--primary);
  color: var(--on-primary, #fff);
}

.hint { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.error { color: var(--danger); font-size: 14px; margin: 6px 2px 0; }
.error:empty { display: none; }
.loading { text-align: center; color: var(--muted); }

/* ---- the form: one column, phone width, on every screen ---- */

/* Heebo is the form's own type. It stays inside the column on purpose: the
   agent pages load this file too and are not part of this look. */
.shell {
  font-family: "Heebo", -apple-system, "Segoe UI", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Back at the inline start, the agency in the middle. The third column is
   empty and exists only so the middle one is the middle. */
.topbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  padding-block: 8px 4px;
}

.topbar .brand {
  grid-column: 2;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  max-width: none;
  margin: 0;
  gap: 8px;
}

.topbar .brand-logo { max-height: 26px; max-width: 90px; }

.iconbtn {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  color: var(--ink);
}

.iconbtn svg { width: 24px; height: 24px; }

/* One segment per person, plus the review. The bar names the family rather
   than counting steps, so a customer sees where they are in their own file. */
.segments { display: flex; gap: 4px; padding-block: 6px 14px; }

.segment { flex: 1 1 0; min-width: 0; }

.segment-track {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.segment-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--primary);
  transition: width 250ms ease;
}

.segment-label {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen { padding-bottom: 8px; }

/* No motion on a page change: on the phone the slide read as a jump. The
   growing segment is the only thing that moves. */
@media (prefers-reduced-motion: reduce) {
  .segment-fill { transition: none; }
}

.eyebrow { color: var(--muted); font-size: 14px; font-weight: 500; margin: 0 0 6px; }

.heading {
  color: var(--ink);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 8px;
}

.lead { color: var(--muted); font-size: 16px; margin: 0 0 18px; }

/* ---- one question ---- */

.field { margin-bottom: 12px; }
.field[hidden] { display: none; }

/* The label lives inside the box and moves up when there is something to
   read under it. No JavaScript: an empty input still matches
   :placeholder-shown, because every box input carries a blank placeholder. */
.box {
  position: relative;
  display: block;
  height: 56px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--field);
}

.box input {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 20px 0 6px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-size: 17px;
}

.box input:focus { outline: none; }
/* A soft ring around the box that has the focus, three pixels of the brand
   colour at a quarter strength, so the eye finds the box without a hard line. */
.box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}

.lab {
  position: absolute;
  inset-inline-start: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 17px;
  pointer-events: none;
  /* Above the date mask, so its grey block never covers the label. */
  z-index: 1;
  transition: top 0.2s ease, font-size 0.2s ease, transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .lab { transition: none; }
}

.box input:focus ~ .lab,
.box input:not(:placeholder-shown) ~ .lab,
.box.floating .lab {
  top: 9px;
  transform: none;
  font-size: 12.5px;
}

/* Centimetres and kilograms, at the far end of the box. */
.unit {
  position: absolute;
  inset-inline-end: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 14px;
  pointer-events: none;
}

.box.has-unit input { padding-inline-end: 44px; }

/* A masked box, the date and the phone: the input keeps the digits and the
   keypad but draws nothing; the mask over it is the display. "01 / MM / YYYY"
   or "052 - XXX - XXXX" reads left to right and, being always the same
   length, sits at the start of the box like any other answer. The part that
   takes the next digit sits in a grey block, which is what stands in for the
   caret. */
.box.masked input { direction: ltr; color: transparent; caret-color: transparent; }
.box.masked input::selection { background: transparent; }

.mask {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: flex-end;
  /* Lower than the input's own text, so the grey block never reaches the
     floated label, which is also drawn above it. */
  padding: 26px 16px 2px;
  direction: ltr;
  font-size: 17px;
  white-space: pre;
  pointer-events: none;
}

.mask .rest,
.mask .sep { color: #b4bcc6; }
.mask .sep.on,
.mask .typed { color: var(--ink); }

.mask .seg {
  padding: 1px 3px;
  margin: -1px -1px;
  line-height: 1.2;
  border-radius: 6px;
}

.box.masked:focus-within .seg.active { background: #e7eaef; }

/* Shown while the box has the focus or a digit; at rest the label is enough. */
.box.masked:focus-within .mask,
.box.masked input:not(:placeholder-shown) ~ .mask { display: flex; }

/* The domain list under the email box. While the domain is being typed, the
   full addresses it could become hang from the box, and they are allowed to
   cover the question under them the way a mail app does: on a phone the
   keyboard has already taken the bottom half of the screen. The anchor holds
   the box and the list alone, so the hint and the message that follow the box
   keep their place instead of pushing the list down. */
.suggesting { position: relative; }

.suggest {
  position: absolute;
  inset-inline: 0;
  top: calc(100% - 6px);
  /* Above the boxes further down the page, which are positioned too and would
     otherwise be painted over it. */
  z-index: 2;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(20, 33, 61, 0.14);
}

.suggest[hidden] { display: none; }

.suggest li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  color: var(--ink);
  font-size: 17px;
  /* An old iOS Safari sends a click only to what it reads as clickable. */
  cursor: pointer;
}

.suggest li + li { border-top: 1px solid var(--line); }

.suggest li svg {
  flex: none;
  width: 20px;
  height: 20px;
  stroke: #9aa3af;
}

/* A Latin address on a right-to-left line: isolated, so the page's direction
   never reorders the dots and the at sign. A Hebrew city or street is already
   the page's own direction and takes none of this. */
.suggest.email .parts { direction: ltr; unicode-bidi: isolate; }

/* Every row is drawn in three parts: the head, the part the typing reached,
   the tail. The weight marks where the typing got to. An email row is the one
   list whose head is what is already in the box rather than something to
   read, so there alone it goes grey and the whole domain after it is the
   weight. */
.suggest .match { font-weight: 600; }
.suggest.email .before { color: var(--muted); }

/* What a row says beside the name rather than about it: the Latin name of a
   medicine, grey, smaller and in brackets. It is a thing of its own on the
   row, not a part of the name, so the row's gap stands between the two. A
   margin would not do it: a logical margin on a left-to-right span lands on
   its left, and on this line the name is on its right. Isolated and read left
   to right, brackets included, so the page's direction never reorders the
   words of it or turns a bracket round. Only the medicine list draws one. */
.suggest .aside {
  flex: none;
  color: var(--muted);
  font-size: 15px;
  direction: ltr;
  unicode-bidi: isolate;
}

.suggest .aside::before { content: "("; }
.suggest .aside::after { content: ")"; }

.suggest li[aria-selected="true"],
.suggest li:hover { background: #f6f7f9; }

.field.bad .box,
.field.bad .drop { border-color: var(--danger); }

.caption { color: var(--muted); font-size: 14px; margin: 0 0 8px; }

/* ---- choices as pills ---- */

.bubbles { display: flex; gap: 8px; flex-wrap: wrap; }

.bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

/* The radio itself stays in the page for the keyboard and for setFrozen; only
   its own box is gone. */
.bubble input,
.check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.bubble.selected {
  background: #fff;
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--primary);
}

.bubble:focus-within,
.check:focus-within .mark { outline: 2px solid var(--primary); outline-offset: 2px; }

/* The box under a row of counts, for the one nobody put on the row. */
.other-box { margin-top: 12px; }

/* A row of answers above its box rather than under a caption, so the gap goes
   below it: the box is what the row belongs to. */
.bubbles.picks { margin-bottom: 12px; }

/* ---- the medicines: the chips on the page, the list in a sheet ---- */

/* The way to a medicine the chips do not carry. Dashed and in the brand
   colour, so it reads as one more thing to add and not as an answer of its
   own standing among the chips above it. */
.otherbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px dashed var(--primary);
  color: var(--primary);
  font-size: 15px;
  font-weight: 600;
}

.otherbtn svg { width: 18px; height: 18px; }

/* The button and, at the other end of its line, what the page keeps of the
   list while the sheet is down: the count and the way back in. One line, so
   the step stays on a phone screen; the names themselves are one tap away. */
.otherline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}

.summary .count { flex: none; white-space: nowrap; }

.summary .btn-link {
  flex: none;
  min-height: 32px;
  font-size: 15px;
  font-weight: 600;
}

/* The sheet and the grey behind it are fixed to the screen and not to the
   column, because a sheet that scrolled with the page would stop being one.
   Fixed is what it says here: the only transforms in this stylesheet are on a
   floating label and on a unit, neither of them an ancestor of a field, so
   nothing in the form makes a new frame for a fixed child to sit in. They are
   still children of their field, so the field being hidden hides them too.

   Above everything, the bar at the bottom of the column included: while the
   sheet is up it is the only thing the customer is answering. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 4;
  background: rgba(20, 33, 61, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.backdrop.on { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 5;
  /* The column's own width on a wide screen: the form is a phone column
     wherever it is opened, and so is anything that comes up over it. */
  max-width: 480px;
  margin-inline: auto;
  height: 58%;
  display: flex;
  flex-direction: column;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: var(--page);
  box-shadow: 0 -12px 32px rgba(20, 33, 61, 0.18);
  /* Hidden and not display: none, so the sheet still slides. Nothing inside a
     hidden one takes the focus or is read out, which is what a closed sheet
     owes the keyboard and the screen reader. The visibility waits for the
     slide down to end and leads the slide up. */
  visibility: hidden;
  transform: translateY(105%);
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
}

.sheet.on {
  visibility: visible;
  transform: translateY(0);
  transition: transform 0.28s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .sheet, .backdrop { transition: none; }
}

/* The bar every sheet on a phone wears, so the shape is read as one that came
   up and can go down again. It says nothing and does nothing. */
.sheet .handle {
  flex: none;
  width: 40px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 2px;
  background: var(--line);
}

/* The box and its button on one line, the box taking what the button leaves.
   Nothing between the box and the sheet clips, so the list of medicines it
   offers hangs over the rows below it instead of being cut by them. */
.addline { flex: none; display: flex; align-items: stretch; gap: 8px; }
.addline .suggesting { flex: 1 1 auto; min-width: 0; }

.addbtn {
  flex: none;
  min-width: 84px;
  padding: 11px 16px;
  border: 1px solid var(--primary);
  border-radius: 14px;
  color: var(--primary);
  font-size: 16px;
  font-weight: 600;
}

/* The caption of the list on one side and its count on the other. */
.listhead {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

.listhead .caption { margin: 0; }
.listhead .count { margin: 0; color: var(--muted); font-size: 14px; }

/* The list is the one thing in the sheet that scrolls, and it takes whatever
   the box above it and the button below it leave. The fade over its last line
   is what says there is more of it under the button. */
.listwrap { flex: 1 1 auto; min-height: 0; position: relative; }

.listwrap::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 28px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--page));
}

.chosen {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  list-style: none;
  border-top: 1px solid var(--line);
}

.chosen li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
}

.chosen .name { min-width: 0; overflow-wrap: anywhere; }

.chosen button {
  flex: none;
  min-height: 44px;
  padding: 0 8px;
  color: var(--primary);
  font-size: 15px;
  font-weight: 600;
}

/* The row just added, lit for as long as it takes an eye to find it at the
   top of a list it was not at the top of a moment ago. */
.chosen li.landed { animation: landed 0.35s ease; }

@keyframes landed {
  from { background: color-mix(in srgb, var(--primary) 12%, transparent); }
  to { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .chosen li.landed { animation: none; }
}

.sheet .done {
  flex: none;
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  border: 1px solid var(--primary);
  border-radius: 14px;
  color: var(--primary);
  font-size: 17px;
  font-weight: 600;
}

/* ---- the consent boxes ---- */

.check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding-block: 10px;
  cursor: pointer;
}

.check .mark {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--field);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-primary, #fff);
}

.check .mark svg { width: 14px; height: 14px; visibility: hidden; }
.check input:checked + .mark { background: var(--primary); border-color: var(--primary); }
.check input:checked + .mark svg { visibility: visible; }
.check .text { font-size: 16px; color: var(--ink); }

/* ---- files ---- */

.drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  border: 1.5px dashed var(--line);
  border-radius: 16px;
  text-align: center;
  cursor: pointer;
}

/* The whole box is the tap target, so the real input covers it. */
.drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.drop svg { width: 24px; height: 24px; color: var(--primary); }
.drop .drop-title { font-size: 16px; font-weight: 600; }
.drop .hint { margin: 0; }
.drop:focus-within { border-color: var(--primary); }

.file-list { list-style: none; margin: 12px 0 0; padding: 0; }

.file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.file-row:first-child { border-top: 0; }

.file-thumb,
.file-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--field);
  object-fit: cover;
}

.file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.file-icon svg { width: 22px; height: 22px; }
.file-name { flex: 1 1 auto; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.file-size { flex: none; color: var(--muted); font-size: 13px; }

.file-remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  color: var(--muted);
}

.file-remove svg { width: 18px; height: 18px; }

/* ---- the signature ---- */

.sign-modes { display: flex; gap: 8px; margin-bottom: 10px; }
.sign-modes .bubble { min-height: 36px; padding: 6px 14px; font-size: 14px; }

canvas.sign {
  width: 100%;
  height: 180px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 16px;
  touch-action: none;
  display: block;
}

/* A frozen pad, set from app.js through a class and not through an inline
   style, because the CSP forbids one. */
canvas.sign.frozen { pointer-events: none; }

input.sign-typed { margin-top: 10px; }
.sign-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 4px; }

/* ---- the privacy block, above the consent box ---- */

.notice {
  border-block: 1px solid var(--line);
  padding: 12px 0;
  margin: 0 0 14px;
}

.notice h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
/* The text is the agency's own and as long as the agency made it. It scrolls
   inside its box, so the checkbox under it and the Continue bar stay on the
   screen whatever its length: the step never scrolls as a page. About a third
   of the screen, which shows a short notice whole and a long one in part. */
.notice p {
  margin: 0;
  max-height: 32vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-inline-end: 4px;
  font-size: 14px;
  color: var(--muted);
}

/* ---- the welcome screen ---- */

.intro-points { list-style: none; margin: 28px 0 0; padding: 0; }

.intro-point {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  font-size: 16px;
}

.intro-point svg { flex: none; width: 22px; height: 22px; color: var(--primary); }

/* ---- the bar at the bottom of the column ---- */

/* The unsubscribe line sits just above the bar, not under the last question,
   so it takes the slack of a short screen instead of the bar. */
.shell .site-footer { color: var(--muted); font-size: 13px; text-align: center; margin: auto 0 8px; padding-top: 18px; }

/* In flow, not fixed: the keyboard pushes it up like any other element, and a
   short screen still shows it at the bottom edge. */
.cta {
  position: sticky;
  bottom: 0;
  /* A layer of its own, above the email box's domain list and above a
     floating label: the button is what the customer is walking towards and
     nothing on the page above it may be painted over it. */
  z-index: 3;
  margin-top: 0;
  margin-inline: calc(var(--gutter) * -1);
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: var(--page);
  border-top: 1px solid var(--line);
}

.cta .form-error { color: var(--danger); font-size: 14px; margin: 0 0 10px; }
.cta .form-error:empty { display: none; }

.cta-button {
  width: 100%;
  min-height: 56px;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}

/* Grey but still clickable: the tap is what writes the messages under the
   fields that are missing, so a real disabled button would say nothing. */
.cta-button[aria-disabled="true"] { background: var(--disabled); color: var(--disabled-ink); }

/* ---- the review ---- */

.review-block + .review-block { margin-top: 30px; }
.review-block h3 { color: var(--ink); font-size: 18px; font-weight: 700; margin: 0; }

.review-section {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 0;
}

.review-section h4 { color: var(--ink); font-size: 15px; font-weight: 600; margin: 0; }
.review-section .btn-link { font-size: 15px; min-height: 32px; }

dl.review { margin: 0; }
dl.review .row { padding: 8px 0; border-top: 1px solid var(--line); }
dl.review dt { color: var(--muted); font-size: 14px; }
dl.review dt:empty { display: none; }
dl.review dd { margin: 0; color: var(--ink); font-size: 16px; overflow-wrap: anywhere; }
dl.review dd:empty::before { content: "-"; }

.review-sign { max-height: 80px; max-width: 100%; }
.review-signature { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-sign-mode { color: var(--muted); font-size: 14px; }

/* ---- the last screen ---- */

.thanks { text-align: center; padding: 40px 0 20px; }
.thanks svg { width: 56px; height: 56px; color: var(--primary); }
.thanks h1 { color: var(--ink); font-size: 28px; font-weight: 800; margin: 16px 0 8px; }
.thanks p { margin: 0; color: var(--muted); font-size: 16px; }