/* Candidate pages: phone first, light (no web fonts, no images), calm. MHG Slab colours. */
:root { --paper: #EEEBE4; --card: #FBFAF7; --ink: #22272A; --muted: #5E7268; --sage: #93A79E; --clay: #C98B5E;
        --ember: #A8503C; --line: #DDD8CE; --good: #3C624E; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
main { max-width: 560px; margin: 0 auto; padding: 16px 16px 48px; }
header { padding: 14px 16px 4px; max-width: 560px; margin: 0 auto; font-weight: 700; letter-spacing: .2px; }
header small { display: block; font-weight: 400; color: var(--muted); font-size: 14px; }
h1 { font-size: 24px; line-height: 1.25; margin: 10px 0 12px; }
h2 { font-size: 19px; margin: 18px 0 8px; }
p { margin: 0 0 12px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px; margin: 12px 0; }
.notice p { font-size: 16px; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.big { font-size: 21px; font-weight: 700; }
button, .btn { display: block; width: 100%; min-height: 52px; margin: 10px 0; padding: 12px 16px; border-radius: 14px;
               font: inherit; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
               border: 2px solid var(--ink); background: var(--ink); color: #F7F5F0; }
button.second, .btn.second { background: var(--card); color: var(--ink); }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, .btn:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
label.tick { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 2px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; font-weight: 600; }
label.tick input { width: 26px; height: 26px; margin: 0; flex: none; accent-color: var(--ink); }
label.field { display: block; font-weight: 600; margin: 12px 0 4px; }
select, textarea { width: 100%; min-height: 50px; font: inherit; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.or { text-align: center; color: var(--muted); margin: 4px 0; font-size: 15px; }
.msg { border-radius: 14px; padding: 14px 16px; margin: 12px 0; }
.msg.ok { background: #E3ECE6; }
.msg.warn { background: #F4E6D8; }
.msg.bad { background: #F2DDD6; }
.linkbox { word-break: break-all; font-family: ui-monospace, Consolas, monospace; font-size: 14px; background: #fff; border: 1px dashed var(--sage); border-radius: 10px; padding: 10px; }
ul.need { padding-left: 20px; margin: 0 0 10px; }
.spin { display: inline-block; width: 18px; height: 18px; border: 3px solid var(--sage); border-top-color: transparent; border-radius: 50%; animation: s 1s linear infinite; vertical-align: -3px; margin-right: 8px; }
@keyframes s { to { transform: rotate(360deg); } }
[hidden] { display: none !important; }
footer { max-width: 560px; margin: 0 auto; padding: 0 16px 24px; font-size: 14px; color: var(--muted); }