/* The signup and account screens (docs/ui-rules.md). Every value comes from
   tokens.css; scripts/ui_lint.py fails CI on anything else. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: var(--fw-regular) var(--fs-base)/var(--lh-body) var(--font-sans);
  color: var(--color-black); background: var(--color-cream); }
a { color: var(--color-black); text-underline-offset: 3px; text-decoration-color: var(--color-gold); }
a:hover { text-decoration-color: var(--color-black); }
:focus-visible { outline: 2px solid var(--color-black); outline-offset: 3px; border-radius: var(--radius-control); }
strong { font-weight: var(--fw-semibold); }

/* The shared frame: header, one card in a 640px column, footer */
.site-header { border-bottom: 1px solid var(--color-line); background: var(--color-cream); }
.bar { max-width: var(--header-max); margin: 0 auto; padding: 0 var(--space-4); min-height: var(--header-height);
  display: flex; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min);
  color: var(--color-black); text-decoration: none;
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-2xl); line-height: var(--lh-none); }
.brand img { width: 36px; height: 36px; }
/* The account pages' nav: Home and Log out at the right of the header */
.site-nav { display: flex; align-items: center; gap: var(--space-2); margin-left: auto;
  margin-right: calc(-1 * var(--space-3)); }  /* the last link's text ends on the content edge */
.site-nav form { margin: 0; }
a.nav-link, button.nav-link { display: inline-flex; align-items: center; min-height: var(--tap-min);
  padding: 0 var(--space-3); color: var(--color-muted); font: var(--fw-medium) var(--fs-md)/var(--lh-none) var(--font-sans);
  text-decoration: none; background: none; border: 0; border-radius: var(--radius-control); cursor: pointer; }
a.nav-link:hover, button.nav-link:hover { color: var(--color-black); background: none; transform: none; box-shadow: none;
  text-decoration: underline; text-decoration-color: var(--color-gold); }
main { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-10) var(--space-4) var(--space-14); }
.card { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius-box);
  box-shadow: var(--shadow-card); padding: var(--space-10); }
.site-footer { border-top: 1px solid var(--color-line); }
/* Footer links: 44px tap targets from 12px side padding, so the first link's text lines
   up with the wordmark and the text gaps are 24px */
.site-footer .bar { min-height: var(--footer-height); flex-wrap: wrap; gap: 0;
  padding: 0 calc(var(--space-4) - var(--space-3)); font-size: var(--fs-md); }
.site-footer a { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-3);
  color: var(--color-muted); text-decoration: none; }
.site-footer a:hover { color: var(--color-black); text-decoration: underline; text-decoration-color: var(--color-gold); }

/* Text */
h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); font-weight: var(--fw-semibold); letter-spacing: -.01em;
  margin: 0 0 var(--space-4); }
h2 { font-size: var(--fs-lg); line-height: var(--lh-tight); font-weight: var(--fw-semibold); margin: 0 0 var(--space-2); }
p { margin: 0 0 var(--space-4); }
h1, h2, button, .button { text-wrap: balance; }  /* no lone word on a last line */
p, li { text-wrap: pretty; }
.lead { font-size: var(--fs-lg); }
.muted { color: var(--color-muted); font-size: var(--fs-md); }
.spaced { margin-top: var(--space-3); }
ol.steps { margin: var(--space-2) 0 0; padding-left: var(--space-6); }
ol.steps li { margin: var(--space-1) 0; padding-left: var(--space-1); }
ol.steps li::marker { color: var(--color-gold-text); font-weight: var(--fw-semibold); }

/* Boxes inside the card */
.panel { border: 1px solid var(--color-line); border-radius: var(--radius-box); padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0; background: var(--color-panel); }
.panel > :last-child, .note > :last-child { margin-bottom: 0; }
.note { background: var(--color-note-bg); border: 1px solid var(--color-note-line); border-left: var(--bar) solid var(--color-gold);
  border-radius: var(--radius-box); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; }
.error { background: var(--color-error-bg); border: 1px solid var(--color-error-line); color: var(--color-error-text);
  border-radius: var(--radius-box); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-5);
  font-weight: var(--fw-medium); }
.error.under { margin: var(--space-2) 0 0; }
.connected { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0 0; border: 1px solid var(--color-line); border-left: var(--bar) solid var(--color-ok);
  border-radius: var(--radius-box); background: var(--color-ok-bg); }
.connected strong { color: var(--color-ok); }
.intro h2 { margin: 0 0 var(--space-2); }
.intro p { margin: 0 0 var(--space-3); }
.intro > :last-child { margin-bottom: 0; }
.intro.after { margin-top: var(--space-6); }

/* Does this look right? The email's From name, signature and stop line, as sent */
.preview { border: 1px solid var(--color-line); border-left: var(--bar) solid var(--color-gold);
  border-radius: var(--radius-box); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; background: var(--color-panel); }
.preview p { margin: 0 0 var(--space-3); }
.preview > :last-child { margin-bottom: 0; }
.preview-from { color: var(--color-muted); font-size: var(--fs-md); }
.preview-optout { color: var(--color-muted); }
dl.details { margin: var(--space-5) 0 0; }
dl.details dt { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--color-muted); }
dl.details dd { margin: 0 0 var(--space-3); }
dl.details > dd:last-child { margin-bottom: 0; }

/* Progress through the six signup steps */
.progress { margin: 0 0 var(--space-7); }
.progress-count { font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--color-gold-text); margin: 0 0 var(--space-2); }
.progress ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }
.progress li { font-size: var(--fs-xs); line-height: var(--lh-tight); color: var(--color-muted); }
.progress .seg { display: block; min-height: var(--tap-min); color: inherit; text-decoration: none; }
.progress .seg::before { content: ""; display: block; height: var(--bar); border-radius: var(--radius-pill);
  background: var(--color-line); margin-bottom: var(--space-2); }
.progress li.done .seg::before, .progress li.now .seg::before { background: var(--color-gold); }
.progress li.now { color: var(--color-black); font-weight: var(--fw-semibold); }
.progress a.seg:hover .label { text-decoration: underline; text-decoration-color: var(--color-gold); }
.progress a.seg:hover::before { background: var(--color-gold-light); }

/* Fields: a field head (label, Required or Optional, the info button), then the field */
label { display: block; font-weight: var(--fw-medium); font-size: var(--fs-md); margin: var(--space-5) 0 var(--space-2); }
input[type=text], input[type=email], input[type=tel], input[type=password], select {
  width: 100%; min-height: var(--control-height); padding: var(--space-2) var(--space-4); font: inherit;
  color: var(--color-black); background: var(--color-white); border: 1px solid var(--color-field);
  border-radius: var(--radius-control); transition: border-color .15s ease, box-shadow .15s ease; }
select { appearance: none; -webkit-appearance: none; padding-right: var(--space-10);
  background: var(--color-white) var(--icon-select) no-repeat right var(--space-4) center; }
input:focus, select:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px var(--color-focus-ring); }
input::placeholder { color: var(--color-placeholder); opacity: 1; }
.field-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3);
  margin: var(--space-6) 0 var(--space-2); }
form > .field-head:first-of-type { margin-top: var(--space-1); }
.field-head label, .field-head .legend { margin: 0; font-weight: var(--fw-medium); font-size: var(--fs-md); }
.req { font-size: var(--fs-sm); color: var(--color-slate); }
fieldset.group { border: 1px solid var(--color-line); border-radius: var(--radius-box);
  padding: var(--space-1) var(--space-4) var(--space-4); margin: var(--space-6) 0 0; }
fieldset.group > .field-head:first-child { margin-top: var(--space-4); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }

/* The info button: a 24px circle inside a 44px tap target; its note opens under the field head */
button.info-btn { display: inline-grid; place-items: center; width: var(--tap-min); height: var(--tap-min);
  min-height: 0; margin: calc((var(--icon) - var(--tap-min)) / 2); padding: 0; border: 0; border-radius: var(--radius-round);
  background: none; color: var(--color-muted); cursor: pointer; }
button.info-btn .dot { display: inline-grid; place-items: center; width: var(--icon); height: var(--icon);
  border-radius: var(--radius-round); border: 1px solid var(--color-field); background: var(--color-white);
  font: italic var(--fw-semibold) var(--fs-sm)/var(--lh-none) var(--font-sans); }
button.info-btn:hover, button.info-btn[aria-expanded="true"] { background: none; color: var(--color-black);
  transform: none; box-shadow: none; }
button.info-btn:hover .dot, button.info-btn[aria-expanded="true"] .dot { border-color: var(--color-gold); }
.info-text { flex-basis: 100%; margin: var(--space-1) 0 0; padding: var(--space-2) var(--space-3); font-size: var(--fs-md);
  background: var(--color-note-bg); border: 1px solid var(--color-note-line); border-radius: var(--radius-control); }
.info-text[hidden] { display: none; }

/* Checkbox rows: the whole row is the tap target */
label.check { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: var(--fw-regular);
  font-size: var(--fs-base); margin: 0; padding: var(--space-3) 0; border-top: 1px solid var(--color-line); cursor: pointer; }
label.check:first-of-type { border-top: 0; }
label.check input { flex: none; width: var(--check); height: var(--check); margin: var(--space-1) 0 0;
  accent-color: var(--color-gold); cursor: pointer; }
.checks, .confirm { border: 1px solid var(--color-line); border-radius: var(--radius-box); padding: 0 var(--space-4); }
.confirm { margin-top: var(--space-3); }

/* Buttons: one gold primary per screen */
button, .button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height);
  padding: 0 var(--space-6); font: var(--fw-medium) var(--fs-base)/var(--lh-none) var(--font-sans); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; color: var(--color-black); background: var(--color-gold);
  border: 1px solid transparent; border-radius: var(--radius-control);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
button:hover, .button:hover { background: var(--color-gold-light); transform: translateY(-1px); box-shadow: var(--shadow-card); }
button.secondary, .button.secondary { background: transparent; border-color: var(--color-slate); }
button.secondary:hover, .button.secondary:hover { background: transparent; border-color: var(--color-gold); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
button:disabled:hover { background: var(--color-gold); }
@media (prefers-reduced-motion: reduce) { button, .button { transition: none; } button:hover, .button:hover { transform: none; } }

/* The button bar: the primary at the right, Back at the left (the primary comes first
   in the page, so Enter always means Continue). On a phone: a full-width primary, Back under it. */
.actions { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center;
  gap: var(--space-4); margin-top: var(--space-7); }
.actions.tight { margin-top: var(--space-4); }
a.back, button.back { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0;
  color: var(--color-muted); font-size: var(--fs-md); font-weight: var(--fw-medium); text-decoration: none;
  background: none; border: 0; cursor: pointer; }
a.back:hover, button.back:hover { color: var(--color-black); text-decoration: underline;
  text-decoration-color: var(--color-gold); transform: none; box-shadow: none; background: none; }

/* A link-styled disclosure: "Use a different ..." */
details.other { margin: var(--space-5) 0 0; }
details.other > summary { display: flex; align-items: center; min-height: var(--tap-min); cursor: pointer;
  color: var(--color-muted); font-size: var(--fs-md); text-decoration: underline; text-decoration-color: var(--color-gold);
  text-underline-offset: 3px; list-style: none; }
details.other > summary::-webkit-details-marker { display: none; }

/* The Follow Up Boss key guide and the Gmail warning: screenshots, click for full size */
ol.guide { list-style: none; counter-reset: guide; margin: var(--space-6) 0 var(--space-2); padding: 0; }
ol.guide li { counter-increment: guide; margin: 0 0 var(--space-7); }
ol.guide li > p { display: flex; gap: var(--space-3); align-items: baseline; margin: 0 0 var(--space-3); font-weight: var(--fw-medium); }
ol.guide li > p::before { content: counter(guide); flex: none; display: inline-grid; place-items: center;
  width: var(--icon); height: var(--icon); border-radius: var(--radius-round); background: var(--color-gold);
  color: var(--color-black); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
a.shot, a.shot-link { display: block; border: 1px solid var(--color-line); border-radius: var(--radius-box);
  overflow: hidden; background: var(--color-white); cursor: zoom-in; }
a.shot { margin: var(--space-4) 0 0; }
a.shot img, a.shot-link img { display: block; width: 100%; height: auto; }
form.paste { border-top: 1px solid var(--color-line); padding-top: var(--space-1); }
.trust h2 { margin: 0 0 var(--space-3); }
.trust p { margin: var(--space-3) 0 0; }
.trust .steps { margin: var(--space-3) 0 0; }
.trust .signoff { font-weight: var(--fw-semibold); }

/* FAQ dropdowns, closed by default */
.faq { margin: var(--space-7) 0 0; border-top: 1px solid var(--color-line); }
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-item summary { cursor: pointer; list-style: none; padding: var(--space-4) var(--space-7) var(--space-4) 0;
  position: relative; font-weight: var(--fw-medium); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: var(--space-1); top: var(--space-3);
  font-size: var(--fs-xl); color: var(--color-gold-text); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer { padding: 0 0 var(--space-4); }
.faq-answer p { margin: 0 0 var(--space-3); }
.faq-answer ul { margin: 0 0 var(--space-3); padding-left: var(--space-6); }

/* Account page */
.status-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  margin: 0 0 var(--space-5); }
.status-row h1 { margin: 0; }
.badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; }
.badge::before { content: ""; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-round); background: currentColor; }
.badge-active { color: var(--color-ok); background: var(--color-ok-bg); }
.badge-paused { color: var(--color-gold-text); background: var(--color-paused-bg); }
.badge-waiting, .badge-ended { color: var(--color-muted); background: var(--color-neutral-bg); }
.switch { display: flex; width: 100%; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-6); margin: var(--space-1) 0 var(--space-3);
  text-align: left; line-height: var(--lh-tight); background: var(--color-white); border: 1px solid var(--color-field);
  border-radius: var(--radius-box); font-weight: var(--fw-semibold); }
.switch > span:first-child { text-wrap: balance; }
.switch:hover { background: var(--color-white); border-color: var(--color-gold); }
.track { flex: none; position: relative; width: 64px; height: 36px; border-radius: var(--radius-pill);
  background: var(--color-field); transition: background-color .2s ease; }
.track::after { content: ""; position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: var(--radius-round);
  background: var(--color-white); box-shadow: var(--shadow-knob); transition: left .2s ease; }
.switch.on .track { background: var(--color-gold); }
.switch.on .track::after { left: 32px; }
.note .actions { margin-top: var(--space-3); }
.signout { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.signout > :last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  main { padding: var(--space-5) var(--space-3) var(--space-10); }
  .card { padding: var(--space-6) var(--space-5); }
  h1 { font-size: var(--fs-2xl); }
  .row-2 { grid-template-columns: 1fr; }
  /* The bar segment is the tap target on a phone; the names are hidden */
  .progress .label { display: none; }
  /* 44px from 12px above the bar and 28px below it, so the bar stays close to the step count */
  .progress { margin-bottom: 0; }
  .progress .seg { padding: var(--space-3) 0 var(--space-7); }
  .progress .seg::before { margin-bottom: 0; }
  /* A full-width primary, Back centered under it */
  .actions { flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .actions > .button, .actions > button:not(.back) { width: 100%; }
  .actions > .back { align-self: center; }
}