/* ============================================================
   marketing/static/consent.css -- the customer's sign-up and
   email-preference pages (/m/consent, /m/consent/confirm/<token>,
   /m/consent/terms/<channel>[/<version>], /portal/marketing-consent).

   THE CRM'S LOOK, NOT A SECOND ONE. Linked AFTER static/style.css.
   Every colour here is one of style.css's custom properties, so
   Daylight and the dark theme both apply with nothing extra. No hex,
   no rgb(), no :root tokens of our own. If a token is missing, ask the
   CRM agent for it -- do not add one here.

   NO SCRIPT anywhere on these pages (see consent_base.html), so every
   control here is plain HTML: a checkbox in a <label>, a
   <details>/<summary> per permission for the long wording, submit
   buttons.

   Phone first. 44px is the floor for everything a thumb presses: the
   checkbox row (48), each "... terms" control (44), every button (50),
   the header buttons and the phone link (44).
   ============================================================ */

.c-main { max-width: 38rem; padding-bottom: 4px; }
.c-main h1 { margin: 8px 0 6px; }

/* The line under the heading. NOT .subtitle: that class carries a
   negative top margin meant for a CRM page heading (STYLING.md s.4). */
.c-lede { color: var(--muted); font-size: .98rem; line-height: 1.5; margin: 0 0 16px; }

.c-card {
  position: relative;                 /* holds the clipped default button */
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 16px 20px; margin: 0 0 18px; min-width: 0;
}
@media (min-width: 560px) { .c-card { padding: 22px 24px 24px; } }

/* The form's FIRST submit button, so Enter / Go means "Save my choices",
   never "Yes to all". Clipped, not display:none: a display:none default
   button is skipped by some browsers' implicit submission. It is out of
   the tab order and aria-hidden in the markup; this only takes it off
   the screen without taking it out of the form. */
.c-default {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---- the two address fields (public form only) ---- */
.c-field { margin: 0 0 16px; min-width: 0; }
.c-field label { display: block; font-weight: 700; font-size: .95rem; margin: 0 0 2px; color: var(--text); }
/* The hint is its own paragraph, joined to the field by aria-describedby,
   not part of the field's name. */
.c-field .c-hint { font-size: .85rem; line-height: 1.4; color: var(--muted); margin: 0 0 6px; }
/* Same selector shape as style.css's control rule plus the class, so it wins
   on specificity (0,4,1) rather than on file order. */
.c-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  width: 100%; min-height: 48px; font-size: 16px;
}
.c-field input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  border-color: var(--error); border-width: 2px;
}
.c-error { margin: 0 0 16px; line-height: 1.45; }

/* The signed-in and confirm pages: which address the words refer to. */
.c-note.c-addrs { margin: 0 0 18px; line-height: 1.9; }

/* ---- the permissions ---- */
.c-choices { border: 0; margin: 0; padding: 0; min-width: 0; }
.c-choices > legend {
  padding: 0; margin: 4px 0 4px; font-size: .8rem; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .07em;
}
.c-opt { border-top: 1px solid var(--border); padding: 4px 0 14px; min-width: 0; }
.c-opt:first-of-type { border-top: 0; }

/* The WHOLE row is the tap target for the box: the label wraps input +
   title. Top-aligned with fixed padding, so a title that wraps to two
   lines keeps the same gap above the promise as one that does not
   (centred, a wrapped title filled the 48px and sat on the promise). */
.c-tick {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 48px; padding: 12px 0; margin: 0;
  cursor: pointer; color: var(--text);
}
.c-tick input[type="checkbox"] {
  width: 24px; height: 24px; margin: 0; flex: 0 0 auto;
  accent-color: var(--accent); cursor: pointer;
}
.c-title { font-weight: 700; font-size: 1.02rem; line-height: 24px; min-width: 0; }

/* Already on (signed-in page): a check mark where the box would be. The
   word "On" beside it carries the meaning; the mark is decoration. */
.c-onmark {
  position: relative; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--success-bg); border: 2px solid var(--success);
}
.c-onmark::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
  border: solid var(--success); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.c-opt-on .c-tick, .c-opt-plain .c-tick { cursor: default; }

/* The short promise. Always visible, never behind anything. Indented to
   sit under the title, not under the box. */
.c-say { margin: 0 0 0 36px; font-size: .95rem; line-height: 1.5; color: var(--text); }

/* Texts only: the key facts, on the page AT the box (TCPA / CTIA). A
   quiet box so they read as part of the promise, not as small print. */
.c-facts {
  margin: 8px 0 0 36px; padding: 8px 10px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; font-size: .9rem; line-height: 1.45; color: var(--text);
}

/* "Email terms" / "Text terms" / "Photo terms": one <details> each, 44px.
   The edge is --control-border (3.4:1 in Daylight), not --btn-border
   (1.6:1): it is a control, and its edge is how you see it is one. */
.c-more { margin: 8px 0 0 36px; min-width: 0; }
.c-more > summary {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px 0 10px; margin: 0;
  border: 1px solid var(--control-border); border-radius: 10px;
  background: var(--btn-bg); color: var(--text);
  font-size: .9rem; font-weight: 600;
  cursor: pointer; list-style: none; box-shadow: var(--shadow-sm);
}
.c-more > summary::-webkit-details-marker { display: none; }
.c-more > summary::before {
  content: ""; width: 0; height: 0; margin: 0 2px;
  border-left: 6px solid currentColor; border-top: 5px solid transparent;
  border-bottom: 5px solid transparent; transition: transform .12s ease;
}
.c-more[open] > summary::before { transform: rotate(90deg); }
.c-more > summary:hover { background: var(--btn-hover-bg); color: var(--text); }

/* The full wording, once opened. */
.c-full {
  margin: 10px 0 0; padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong); border-radius: 8px;
  font-size: .92rem; line-height: 1.55; color: var(--text);
}
.c-full p { margin: 0 0 .7em; }
.c-full p:last-child { margin-bottom: 0; }
/* On a phone the indent cost a fifth of the line: at 320px the opened
   wording ran about 25 characters a line. The control stays under the
   title; the words it opens use the card's full width. */
@media (max-width: 420px) {
  .c-more > .c-full { margin-left: -36px; }
}

/* A permission shown WITHOUT a box (confirm and saved pages): nothing to
   line up with, so no indent, and the title is a heading line. */
.c-opt-plain .c-tick { min-height: 0; padding: 10px 0 6px; }
.c-opt-plain .c-say, .c-opt-plain .c-facts, .c-opt-plain .c-more { margin-left: 0; }
@media (max-width: 420px) {
  .c-opt-plain .c-more > .c-full { margin-left: 0; }
}

/* "currently off" / "On". Words, not colour alone. Inside the title, so a
   title that wraps carries its pill with it. */
.c-state {
  display: inline-block; margin-left: 4px; padding: 0 9px; vertical-align: 1px;
  border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 20px; white-space: nowrap;
  background: var(--panel-2); border: 1px solid var(--border-strong); color: var(--text);
}
/* Dark ink on the pale tint, not green on green (STYLING.md s.5). */
.c-state-on { background: var(--success-bg); border-color: var(--success); color: var(--text); }

/* Stop, inside the row it stops. */
.c-stop-btn { display: flex; width: calc(100% - 36px); margin: 12px 0 0 36px; min-height: 48px; font-size: 1rem; justify-content: center; }

/* ---- the buttons: stacked, full width, never alone in the bottom-right
   corner where a floating help button could sit (STYLING.md s.9) ---- */
.c-actions { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 0; }
.c-actions .btn { width: 100%; min-height: 50px; font-size: 1rem; justify-content: center; }
.c-note { color: var(--muted); font-size: .88rem; line-height: 1.5; margin: 12px 0 0; }
.c-main > .c-back { margin: 0 0 22px; }

/* ---- the terms page ---- */
.c-inshort {
  margin: 0 0 16px; padding: 12px 14px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: .98rem; line-height: 1.5;
}
.c-inshort strong {
  display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin-bottom: 4px;
}
.c-terms p { margin: 0 0 .85em; line-height: 1.6; }
.c-version { color: var(--muted); font-size: .85rem; margin: 14px 0 0; }

/* ---- the "please try again later" page ---- */
.c-stop { font-size: 1.05rem; line-height: 1.5; margin: 0 0 10px; }
.c-nothing { margin: 0 0 4px; color: var(--muted); }

/* ---- page foot: on the weave, so --muted (5.3:1 at the darkest pixel
   of the rendered weave, measured on the screenshots) ---- */
.c-foot { color: var(--muted); font-size: .88rem; line-height: 1.5; margin: 0 auto; padding-top: 0; padding-bottom: 32px; }
.c-foot p { margin: 0 0 6px; }
a.c-tel:not(.btn):not(.brand) {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--text);
}

/* The header: the shop's name is the way back (website, or the portal
   home when signed in), and one button beside it (Call us / My account).
   No theme button -- it needs script. */
.c-top { flex-wrap: wrap; row-gap: 8px; justify-content: space-between; }
.c-top .brand { white-space: normal; font-size: 1rem; min-height: 44px; display: inline-flex; align-items: center; }
a.c-call:not(.btn):not(.brand) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: 10px; font-size: .9rem; font-weight: 600; text-decoration: none;
  background: var(--header-btn-bg); border: 1px solid var(--header-btn-border); color: var(--header-text);
}
a.c-call:not(.btn):not(.brand):hover { background: var(--header-btn-hover); color: var(--header-text); }

/* ---- the classes the older consent pages still use (check your email,
   saved, expired, ...) so they take the new look ---- */
.c-main .lede { color: var(--muted); font-size: .98rem; line-height: 1.5; }
.c-main .muted { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.c-main .say { color: var(--text); font-size: .95rem; line-height: 1.5; margin: .15rem 0 1rem; }
.c-main .addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  padding: .05rem .4rem; overflow-wrap: anywhere;
}
.c-main .err {
  background: var(--error-bg); color: var(--text); border: 1px solid var(--error-border);
  border-left: 4px solid var(--error); border-radius: 10px; padding: 10px 14px;
}
.c-main .ok {
  background: var(--success-bg); color: var(--text); border: 1px solid var(--success-border);
  border-left: 4px solid var(--success); border-radius: 10px; padding: 10px 14px;
}
/* A heading inside a status block is a heading of that block: ink, not the
   CRM's small uppercase section label. */
.c-main .ok h2, .c-main .err h2 {
  color: var(--text); text-transform: none; letter-spacing: 0;
  font-size: 1rem; line-height: 1.35; margin: 2px 0 6px;
}
.c-main .ok .say:last-child, .c-main .err .say:last-child { margin-bottom: 2px; }
.c-main div.ok, .c-main div.err { margin: 0 0 14px; }
.c-main .btnrow { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 0; }
.c-main .btnrow .btn { width: 100%; min-height: 50px; font-size: 1rem; justify-content: center; }
.c-main .btnrow form { margin: 0; }
.c-main .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--btn-primary-text); font-weight: 700; }
.c-main .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.c-main .btn.small { min-height: 44px; }
.c-main .state { font-size: .8rem; border: 1px solid var(--border-strong); border-radius: 999px; padding: 1px 8px; }
.c-main fieldset:not(.c-choices) { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; min-width: 0; }
.c-main hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }

/* THE PRIVACY POLICY, under the form. Not inside the card and not inside the
   permissions fieldset: nothing that takes somebody away from a half-filled
   form belongs among the boxes. 44px of height so the link is a thumb target on
   a phone, and the link keeps its underline -- on a page whose whole job is a
   legal disclosure, a link that does not look like one is worse than plain. */
.c-privacy {
  color: var(--muted); font-size: .92rem; line-height: 1.5;
  margin: 14px 0 4px; padding: 0 2px;
}
/* style.css has no --link token, so the link takes the ink colour with an
   underline rather than a colour invented here (STYLING.md s.2: tokens only, and
   ask the CRM agent rather than add one). Ink on the card background is the
   highest contrast on the page, and the underline is what says "link". */
.c-privacy a { color: var(--text); text-decoration: underline; font-weight: 600; }
.c-privacy a:hover { color: var(--accent); }
.c-foot a.c-priv {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted); text-decoration: underline;
}
.c-foot a.c-priv:hover { color: var(--text); }