/* millbury.app signing page (PL #49). Mobile first.
   The page tan, the header band, the header height and the fonts are the fleet's
   managed theme (App_Command/theme/theme.css, synced here as static/css/theme.css),
   copied as values because this static page does not load the fleet stylesheet.
   tests/test_site_theme.py fails if any of them drifts from the synced copy. */
:root {
  --bg-page: #f4f0e9;
  --header-bg: #4a0000;
  --text-on-band: #fff;
  --secondary: #CFA83C;
  --header-h: 87px;
  --brand-logo-height: 56px;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --bg: var(--bg-page);
  --bg-2: #e8e0d4;
  --card: #ffffff;
  --text: #2a2a2a;
  --muted: #5a5a5a;
  --accent: #630000;
  --accent-hover: #8a1a1a;
  --accent-rgb: 99, 0, 0;
  --border: rgba(var(--accent-rgb), 0.16);
  --danger: #9b2c2c;
  --ok: #2f6b3f;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(var(--accent-rgb), .08);
  --font: var(--font-body);
  --serif: var(--font-display);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 var(--font);
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .45); outline-offset: 2px; border-radius: 6px; }
#app:focus { outline: none; }

/* ---------- header / footer ---------- */
.site-header {
  background-color: var(--header-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 87' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.26' stop-color='%23fff' stop-opacity='.25'/%3E%3Cstop offset='.55' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='1'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='1200' height='87' fill='url(%23f)'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)' fill='none'%3E%3Cpath d='M0 40L40 44.3L80 48.1L120 51L160 52.7L200 52.9L240 51.8L280 49.3L320 45.8L360 41.6L400 37.3L440 33.3L480 30L520 27.8L560 27L600 27.6L640 29.6L680 32.8L720 36.8L760 41.1L800 45.3L840 48.9L880 51.5L920 52.9L960 52.8L1000 51.3L1040 48.5L1080 44.8L1120 40.5L1160 36.2L1200 32.4' stroke='rgba(255,255,255,0.15)' stroke-width='1.5'/%3E%3Cpath d='M0 58L40 59L80 58.3L120 55.9L160 52.5L200 48.6L240 44.9L280 42.3L320 41L360 41.5L400 43.6L440 47L480 50.9L520 54.6L560 57.4L600 58.9L640 58.6L680 56.7L720 53.6L760 49.7L800 45.9L840 42.9L880 41.2L920 41.2L960 42.9L1000 45.9L1040 49.7L1080 53.6L1120 56.8L1160 58.6L1200 58.9' stroke='rgba(255,255,255,0.1)' stroke-width='1.2'/%3E%3Cpath d='M0 66.1L40 64.7L80 63.2L120 61.5L160 60L200 58.5L240 57.3L280 56.5L320 56.1L360 56.1L400 56.5L440 57.3L480 58.5L520 60L560 61.6L600 63.2L640 64.7L680 66.1L720 67.1L760 67.8L800 68L840 67.8L880 67.2L920 66.1L960 64.8L1000 63.3L1040 61.7L1080 60.1L1120 58.6L1160 57.4L1200 56.5' stroke='rgba(255,255,255,0.07)' stroke-width='1.0'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: inset 0 -1.5px 0 var(--secondary);
  color: var(--text-on-band);
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 16px 0;
}
.brand { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: .5rem; height: 100%; max-width: 1200px; margin: 0 auto; color: inherit; text-decoration: none; }
.brand-logo { height: var(--brand-logo-height); width: auto; justify-self: center; }
.brand-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.brand strong { font-family: var(--font-display); font-size: 18px; font-weight: 400; line-height: 1; letter-spacing: 0; }
.brand-tagline { font-size: 11px; font-weight: 400; letter-spacing: .02em; opacity: .8; }
@media (max-width: 720px) {
  :root { --header-h: 69px; --brand-logo-height: 46px; }
  .brand { grid-template-columns: 57px 1fr; }
  .brand strong { font-size: 16px; }
}
.site-footer { margin-top: auto; padding: 24px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.site-footer p { margin: 0; }
.site-footer p + p { margin-top: 6px; }
.footer-help { color: var(--accent); font-weight: 600; }
.noscript { padding: 16px; text-align: center; }

main { width: 100%; max-width: 1232px; margin: 0 auto; padding: 24px 16px 8px; }

/* ---------- type ---------- */
h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 6vw, 40px); line-height: 1.15; margin: 0 0 12px; letter-spacing: 0; }
h2 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.25; margin: 0 0 6px; }
.eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.lede { font-size: 18px; color: var(--muted); margin: 0 0 16px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 2px solid transparent;
  font: 600 17px/1 var(--font); text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: .6; cursor: progress; }
.btn-ghost { background: transparent; color: var(--accent); border-color: var(--border); }
.btn-ghost:hover { background: rgba(var(--accent-rgb), .06); }
.btn-block { width: 100%; }

/* ---------- home ---------- */
.home-intro { margin: 8px 0 28px; }
.walkthrough {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; margin: 20px 0 0;
}
.walkthrough summary {
  cursor: pointer; list-style: none; padding: 18px 20px 18px 52px; position: relative;
  display: flex; flex-direction: column; gap: 2px;
}
.walkthrough summary::-webkit-details-marker { display: none; }
.walkthrough summary::before {
  content: "▶"; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 10px; display: grid; place-items: center; transition: transform .15s;
}
.walkthrough[open] summary::before { transform: translateY(-50%) rotate(90deg); }
.walkthrough-title { font-family: var(--serif); font-size: 22px; line-height: 1.25; color: var(--text); }
.walkthrough .doc-meta { margin: 0; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.doc-grid { display: grid; gap: 20px; }
@media (min-width: 720px) { .doc-grid { grid-template-columns: 1fr 1fr; } }
.doc-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
}
.doc-art { width: 100%; height: auto; aspect-ratio: 700 / 560; object-fit: cover; background: var(--bg-2); }
.doc-body { padding: 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.doc-body .btn { margin-top: auto; align-self: flex-start; }
.doc-meta { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.doc-sent { margin: -8px 0 16px; color: var(--ok); font-weight: 600; font-size: 15px; }
/* Laptop and wider: the same art-beside-text card as the deck, so both
   Start buttons sit on the first screen. */
@media (min-width: 900px) {
  .doc-card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; }
  .doc-body { padding: 24px 28px 24px 8px; }
}

/* ---------- deck ---------- */
.deck { max-width: 680px; margin: 0 auto; }
.deck-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 15px; }
.deck-exit { text-decoration: none; font-weight: 600; padding: 8px 0; }
.deck-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.progress { height: 6px; background: var(--bg-2); border-radius: 999px; overflow: hidden; margin-bottom: 20px; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .35s ease; }

.slide {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  animation: slide-in .35s ease both;
}
@keyframes slide-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.slide-art { width: 100%; height: auto; max-height: 34vh; aspect-ratio: 700 / 560; object-fit: contain; background: #fff; }
.slide-text { padding: 24px 20px 28px; }
.slide-text.is-ghost { display: none; }
@media (min-width: 600px) { .slide-text { padding: 32px 36px 36px; } }
/* Laptop and wider: art beside the text, not above it, so a card reads
   without scrolling. The signature slide has no art and stays narrow. */
@media (min-width: 900px) {
  .deck { max-width: 1200px; }
  .slide:not(.slide-sign) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
  .slide:not(.slide-sign) .slide-art { max-height: none; }
  .slide:not(.slide-sign) .slide-text { padding: 28px 44px 28px 8px; }
  .slide-texts { display: grid; }
  .slide-texts > .slide-text { grid-area: 1 / 1; }
  .slide-text.is-ghost { display: block; visibility: hidden; }
  .slide-sign { max-width: 680px; margin: 0 auto; }
}
.slide-title { font-size: clamp(26px, 5.5vw, 34px); }
.slide-body { overflow-wrap: anywhere; }
.slide-body p { margin: 0 0 12px; font-size: 18px; }
.slide-list { margin: 0 0 16px; padding-left: 22px; font-size: 18px; }
.slide-list li { margin-bottom: 8px; }
.talk {
  margin: 20px 0 0; padding: 12px 16px; border-left: 4px solid var(--accent);
  background: rgba(var(--accent-rgb), .05); border-radius: 0 10px 10px 0;
  color: var(--muted); font-style: italic; font-size: 16px;
}
.talk p { margin: 0 0 6px; }
.talk p:last-child { margin-bottom: 0; }
.talk .talk-head { font-style: normal; font-weight: 600; color: var(--accent); }
.talk strong { font-style: normal; color: var(--text); }
.deck-nav {
  position: sticky; bottom: 0; z-index: 2;
  display: grid; grid-template-columns: 1fr 2fr; gap: 12px;
  padding: 16px 0 max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}

/* ---------- sign form ---------- */
.sign-form { margin-top: 8px; }
fieldset { border: 0; padding: 0; margin: 0 0 20px; }
legend { font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; padding: 0; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 16px; }
input[type="text"], input[type="email"] {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1.5px solid #cfc6b8; border-radius: 12px; background: #fff;
  font: 17px var(--font); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:focus, input[type="email"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12); }
.signin, .signed-in {
  padding: 14px 16px; border: 1.5px solid #cfc6b8; border-radius: 12px; background: var(--bg);
}
.signin-ask { margin: 0 0 10px; font-weight: 600; font-size: 16px; }
.gsi-slot { min-height: 44px; }
.signin .form-status { margin: 10px 0 0; }
.signed-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; border-color: var(--ok); }
.signed-in p { margin: 0; overflow-wrap: anywhere; }
.link-btn { background: none; border: 0; padding: 4px 0; color: var(--accent); font: 600 15px var(--font); text-decoration: underline; cursor: pointer; }
.hint { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.agree {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px; margin: 4px 0 16px;
  background: rgba(var(--accent-rgb), .04); border: 1px solid var(--border); border-radius: 12px;
  cursor: pointer; font-size: 16px;
}
.agree input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.form-status { min-height: 0; margin: 0 0 12px; color: var(--danger); font-weight: 600; }
.form-status:empty { display: none; }
.back-link { margin: 20px 0 0; font-size: 15px; text-align: center; }

/* ---------- done ---------- */
/* ---------- standing (PL #60) ---------- */
.standing-link { margin: 20px 0 0; font-size: 15px; color: var(--muted); }
.standing-link a { color: var(--accent); font-weight: 600; }
.standing { max-width: 560px; margin: 24px auto; display: flex; flex-direction: column; gap: 16px; }
.standing h1 { margin: 0; }
.standing p { margin: 0; }
.standing-out:empty { display: none; }
.standing-result, .standing-clear { display: flex; flex-direction: column; gap: 12px; }
.standing-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.standing-list li {
  padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  overflow-wrap: anywhere;
}
.standing-resign {
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: rgba(var(--accent-rgb), .04); border: 1.5px solid var(--accent); border-radius: 12px;
}

.done { max-width: 560px; margin: 24px auto; text-align: center; animation: slide-in .35s ease both; }
.done-mark {
  width: 84px; height: 84px; margin: 0 auto 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 44px; font-weight: 700;
  animation: pop .45s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.done-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- help (2026-10-31) ---------- */
.help { max-width: 560px; margin: 24px auto; display: flex; flex-direction: column; gap: 16px; }
.help h1, .help h2, .help p { margin: 0; }
.help h2 { margin-top: 8px; }
.help-list { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.help-list dt { font-weight: 600; margin-top: 12px; }
.help-list dt:first-child { margin-top: 0; }
.help-list dd { margin: 0; color: var(--muted); }
.help-email { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.help-email .hint { margin: 0; }
.support-line { margin: 8px 0 0; font-weight: 400; color: var(--text); }
.support-line a { color: var(--accent); font-weight: 600; }