/* The site's own pages (the form, the progress page, the errors) in the report's kit
   (docs/design-system.md, 2026-09-27): the same paper, the same three faces, the same accent.
   The faces come from fonts.css, served by the site itself (2026-09-28). */

:root{
  /* A clear green and red for right and wrong (Drew, 2026-10-02); both read at 4.5:1 on paper and panel. */
  --good:#1F7A3D; --bad:#C62828;
  --bg:#FAF7F0; --panel:#F2EDE3; --card:#FFFFFF;   /* boxes lift off the paper (Ted, 2026-10-03) */ --rule:#E2DBCD; --edge:#8F897F;
  --ink:#1E1D1B; --muted:#57524B;
  --iris:#57528E; --iris-deep:#403C70; --sage:#6D8866; --terra:#A55B40;
  --display:'Cormorant Garamond',Georgia,serif;
  --text:'Source Serif 4',Georgia,serif;
  --body:'Instrument Sans','Helvetica Neue',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
main{max-width:640px;margin:0 auto;padding:48px 24px 24px}
main:focus{outline:none}
a{color:var(--iris);text-decoration:none}a:hover{color:var(--iris-deep);text-decoration:underline}
.skip{position:absolute;left:16px;top:-60px;z-index:80;min-height:44px;display:inline-flex;align-items:center;padding:0 16px;
  border-radius:22px;background:var(--ink);color:var(--bg);font-size:15px}
.skip:focus{top:8px;outline:2px solid var(--iris);outline-offset:2px;color:var(--bg);text-decoration:none}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:40px}
.wordmark{display:inline-block;font-family:var(--display);font-size:24px;font-weight:500;
  color:var(--ink);text-decoration:none}
.wordmark:hover{color:var(--ink);text-decoration:none}
.wordmark .mark{vertical-align:-4px;margin-right:9px}
h1{font-family:var(--display);font-weight:600;font-size:44px;line-height:1.05;margin:0 0 16px;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum"}
.lede{font-family:var(--text);font-size:20px;line-height:1.5;color:var(--ink);margin:0 0 28px;max-width:56ch}
.hint{color:var(--muted);font-size:14px;line-height:1.5;margin:8px 0 24px;max-width:56ch}

form{display:flex;flex-direction:column}
label{font-size:14px;color:var(--muted);margin:18px 0 6px}
input,select,textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);
  border:1px solid var(--edge);border-radius:12px;padding:12px 14px;width:100%;min-height:44px}
::placeholder{color:var(--muted);opacity:1}
input:focus,select:focus,textarea:focus{outline:2px solid var(--iris);outline-offset:2px;border-color:var(--iris)}
/* Boxes and pills: the ring only for keyboard focus, not a mouse click (Ted, 2026-10-03). */
.choice input:focus{outline:none}
.choice input:focus-visible{outline:2px solid var(--iris);outline-offset:2px}
textarea{resize:vertical}
button,a.button{font:inherit;font-weight:500;font-size:16px;margin-top:26px;min-height:48px;padding:0 22px;
  color:var(--bg);background:var(--ink);border:0;border-radius:24px;cursor:pointer;align-self:flex-start}
button:hover,a.button:hover{background:var(--iris-deep)}
a.button{display:inline-flex;align-items:center;text-decoration:none}
.foot{margin-top:28px}
.foot a{color:var(--muted)}
button:focus-visible,a:focus-visible{outline:2px solid var(--iris);outline-offset:2px}

.bar{height:8px;background:var(--rule);border-radius:4px;overflow:hidden;margin:0 0 14px}
.bar-fill{height:100%;width:5%;background:var(--iris);transition:width .6s ease}

footer{max-width:640px;margin:0 auto;padding:40px 24px 56px;color:var(--muted);font-size:12px;line-height:1.5}
footer a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}footer a:hover{color:var(--iris)}
.foot a{text-decoration:underline;text-underline-offset:2px}

@media (max-width:600px){
  main{padding:28px 16px 16px}
  h1{font-size:32px}
  .lede{font-size:18px}
  .wordmark{margin-bottom:28px}
  button{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Motion, one rule (Ted, 2026-10-03): a lift or shadow glides over 150 ms, colours snap (a gliding colour fooled the contrast check mid-way); solid buttons and pills
   lift one pixel on hover with a soft shadow and press back down. Nothing else moves. Reduced motion turns
   every transition off (the rule above). */
button,a.button,.provider,.suggest .sugg,.sites .choice,.choice input,.acct-in,a{transition:box-shadow .15s ease-out,transform .15s ease-out}
button:not(.quiet):not(.sugg):not(:disabled):hover,a.button:hover,.provider:hover,.suggest .sugg:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(30,29,27,.16)}
button:not(:disabled):active,a.button:active,.provider:active,.suggest .sugg:active{transform:translateY(0) scale(.985);box-shadow:none}
@media (prefers-reduced-motion:reduce){button:hover,a.button:hover,.provider:hover,.suggest .sugg:hover,button:active,a.button:active,.provider:active,.suggest .sugg:active{transform:none}}
fieldset{border:0;padding:0;margin:18px 0 0}legend{font-size:14px;color:var(--muted);margin-bottom:6px;padding:0}
.choice{display:flex;align-items:center;gap:10px;min-height:44px;font-size:16px;color:var(--ink);margin:0}
.choice input{width:20px;height:20px;margin:0;accent-color:var(--iris)}
.choice small{color:var(--muted);font-size:14px}
input[type=file]{padding:10px 0;border:0;background:none}
h2{font-family:var(--display);font-weight:600;font-size:28px;line-height:1.15;margin:40px 0 8px}

/* The wait (M7b): the stages as a list, each ticked in sage when done; the one under way in ink. */
.stages{list-style:none;padding:0;margin:0 0 8px;font-size:15px;color:var(--muted)}
.stages li{position:relative;padding:5px 0 5px 24px;line-height:1.45}
.stages li::before{content:"";position:absolute;left:0;top:8px;width:14px;height:14px;border-radius:50%;
  border:1.5px solid var(--edge);box-sizing:border-box}
.stages li.now{color:var(--ink);font-weight:500}
.stages li.now::before{border-color:var(--iris);background:var(--iris)}
.stages li.done::before{content:"\2713";border-color:var(--sage);background:var(--sage);color:var(--bg);
  font-size:10px;line-height:11px;text-align:center;font-weight:600}
.stages .count{font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
/* The ad: the report's 320 by 100 unit. Centred on the column, and wider than the column's text
   on the narrowest phones, so it steps out of the side padding rather than scrolling the page. */
.ad{display:flex;align-items:center;justify-content:center;width:320px;height:100px;margin:28px 0;
  position:relative;left:50%;transform:translateX(-50%);border-radius:8px;overflow:hidden;
  background:var(--panel);border:1px dashed var(--rule);font-size:12px;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase}
.ad[hidden]{display:none}
.ad>*{width:100%;height:100%}
.early h2{margin-top:36px}
.early .finding{border-top:1px solid var(--rule);padding:16px 0 4px}
.early h3{font-family:var(--body);font-size:16px;font-weight:600;margin:0 0 6px}
.early .finding p{font-family:var(--text);font-size:17px;line-height:1.55;margin:0 0 12px;max-width:60ch}

/* The front door (M7b, Ted's mockup): the first message, then the games. */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
h1.front{font-size:56px}
#front textarea{font-family:var(--text);font-size:18px;border-radius:16px;padding:14px 16px}
.suggest{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.suggest .sugg{margin:0;width:auto;min-height:44px;padding:0 16px;border-radius:22px;font-size:14px;font-weight:400;
  color:var(--ink);background:var(--bg);border:1px solid var(--edge)}
.suggest .sugg:hover{background:var(--panel)}
.suggest .sugg[aria-pressed="true"]{background:var(--iris);border-color:var(--iris);color:var(--bg)}
.or{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:36px 0 0;
  display:flex;align-items:center;gap:12px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--rule)}
.source{border:1px solid var(--rule);border-radius:16px;padding:6px 20px 20px;margin:16px 0 0;background:var(--card)}
/* Inside a white box, fields and pills are white too, not the paper colour. */
.source input,.source textarea,.card input,.card textarea,.source .sites .choice,.source .drop{background:var(--card)}
.source legend{font-size:15px;font-weight:600;color:var(--ink);padding:0 6px;margin-left:-6px}
.source button{margin-top:18px}
@media (max-width:600px){h1.front{font-size:40px}.source{padding:4px 14px 16px}}

/* The wait, as in Ted's mockup (M7b): a wider column for two ads side by side on a computer. */
main.wide{max-width:760px}
h1.wait{font-size:40px;margin-bottom:8px}
.sub{color:var(--muted);font-size:15px;margin:0 0 20px;max-width:56ch}
.asked-q{font-family:var(--text);font-size:18px;margin:0 0 24px;padding:12px 16px;border-radius:12px;background:var(--panel);max-width:60ch}
.asked-q .k{display:block;font-family:var(--body);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.ads{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:28px 0}
.ads[hidden]{display:none}
.ads .slot{width:320px;height:100px;border-radius:8px;overflow:hidden;flex:0 0 320px}
.ads .slot.preview{position:relative;display:flex;align-items:center;justify-content:center;background:var(--panel);
  border:1px dashed var(--rule);font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.ads .slot.preview .tick{position:absolute;left:0;top:0;height:3px;width:100%;background:var(--iris);transform-origin:left;
  animation:tick 15s linear infinite}
@keyframes tick{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (max-width:719px){.ads{position:relative;left:50%;transform:translateX(-50%);width:320px}}
.noticing{border:1px solid var(--rule);border-radius:16px;padding:18px 20px 12px;margin:8px 0 0}
.noticing h2{font-family:var(--display);font-size:24px;margin:0 0 10px}
.noticing h3{font-family:var(--body);font-size:16px;font-weight:600;margin:0 0 6px}
.noticing p{font-family:var(--text);font-size:17px;line-height:1.55;margin:0 0 8px;max-width:62ch}
.noticing .ctl{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.noticing .ctl span{margin-right:auto}
.noticing .ctl button{margin:0;width:auto;min-height:44px;padding:0 14px;font-size:14px;font-weight:400;color:var(--ink);
  background:none;border:1px solid var(--edge)}
.noticing .ctl button:hover{background:var(--panel)}
@media (max-width:600px){h1.wait{font-size:30px}}
@media (prefers-reduced-motion:reduce){.ads .slot.preview .tick{animation:none}}
main.wide + footer{max-width:760px}

/* The download guide (M7b): a page of its own, linked from the front page's file box. */
.guide-link{margin:6px 0 0;font-size:15px}
.guide-link a{font-weight:500}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:22px;border:1px solid var(--edge);color:var(--ink)}
.toc a:hover{background:var(--panel);text-decoration:none}
.guide{border-top:1px solid var(--rule);margin-top:36px;padding-top:4px}
.guide h2{margin-top:24px}
.guide h3{font-size:17px;font-weight:600;margin:24px 0 6px}
.guide p,.guide li{font-family:var(--text);font-size:17px;line-height:1.55;max-width:60ch}
.guide .hint{font-family:var(--body);font-size:14px}
.guide .checked{font-family:var(--body);font-size:13px;color:var(--muted);margin:0 0 12px}
.steps{padding-left:22px;margin:8px 0}
.steps li{margin:0 0 8px}
.months{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.months a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:22px;background:var(--ink);color:var(--bg);font-family:var(--body);font-size:15px}
.months a:hover{background:var(--iris-deep);text-decoration:none;color:var(--bg)}
.back{display:inline-flex;align-items:center;min-height:44px}
.lede a,.guide p a,.guide li a,.hint a{text-decoration:underline;text-underline-offset:2px}
.months a,.months a:hover{text-decoration:none}
.sites{display:flex;gap:20px;margin:10px 0 0}
.families{display:flex;flex-wrap:wrap;gap:0 22px;margin:2px 0 0}
.families .choice{min-height:40px}
.families .choice[hidden]{display:none}   /* the daily box, Lichess chosen: .choice sets display, so hidden needs saying */
.group{margin-top:18px}
/* Where you play, as two buttons with the chosen one filled: plain radio buttons were easy to
   miss (Ted's try-out, 2026-09-28). */
.sites{gap:10px}
.sites .choice{border:1px solid var(--edge);border-radius:22px;padding:0 18px 0 14px;cursor:pointer;font-weight:500}
.sites .choice:has(input:checked){background:var(--iris);border-color:var(--iris);color:var(--bg)}
.sites .choice:has(input:focus-visible){outline:2px solid var(--iris);outline-offset:2px}
.sites .choice input{accent-color:var(--bg)}
/* The file box takes dropped files (Ted's try-out, 2026-09-28). */
.drop{border:1.5px dashed var(--edge);border-radius:14px;padding:18px 16px;margin-top:12px;text-align:center;transition:background .15s}
.drop.over{background:var(--panel);border-color:var(--iris)}
.drop .drop-label{display:block;margin:0 0 8px;font-size:15px;color:var(--ink);cursor:pointer}
.drop .drop-label u{color:var(--iris)}
.drop input[type=file]{margin:0 auto;max-width:100%}
.drop .drop-list{margin:6px 0 0;font-size:14px;color:var(--muted);word-break:break-word}
/* "See the analysis": greyed until the report is ready, then the page's one strong button. */
.ready{margin:24px 0 4px;text-align:center}
.ready .see{margin:0;min-height:56px;padding:0 36px;font-size:18px;border-radius:28px;width:auto;align-self:center}
.ready .see:disabled{background:var(--rule);color:var(--muted);cursor:default}
.ready .see:disabled:hover{background:var(--rule)}
.ready .hint{margin:8px auto 0;text-align:center}
@media (max-width:600px){.ready .see{width:100%}}

/* The wait, second pass (Ted, 2026-09-28): the finding beside the checklist on a computer, above
   it on a phone; the checklist moves, the step under way forward, the finished ones back; on a
   phone the one ad is held at the foot of the screen. */
main.wide{max-width:1000px}
main.wide + footer{max-width:1000px}
.asked-q{max-width:none}
.wait-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"steps notice";
  gap:32px;align-items:start;margin:8px 0 0}
.wait-grid .steps-col{grid-area:steps}
.wait-grid .stages{margin:0}
.steps-short{display:none;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.wait-grid .noticing{grid-area:notice;margin:0}
.stages li{font-size:16px;padding:8px 0 8px 28px;transition:font-size .45s ease,color .45s ease}
.stages li::before{top:12px;transition:background-color .4s ease,border-color .4s ease}
/* Finished steps step back (smaller, the tick in sage) and the one under way comes forward
   (larger, in ink, its dot pulsing). Size and weight, not fading: faded text fails contrast. */
.stages li.done{font-size:14.5px}
.stages li.done::before{top:10px}
.stages li.now{font-size:18px;color:var(--ink);font-weight:600}
.stages li.now::before{top:14px;animation:now-pulse 1.8s ease-in-out infinite}
.stages li.done::before{animation:tick-in .45s ease-out}
.stages li.now .count{font-weight:500}
@keyframes now-pulse{0%,100%{box-shadow:0 0 0 0 rgba(87,82,142,.35)}50%{box-shadow:0 0 0 7px rgba(87,82,142,0)}}
@keyframes tick-in{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.ready .see:not(:disabled){animation:ready-in .6s ease-out}
@keyframes ready-in{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@media (max-width:719px){
  .wait-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"notice" "steps";gap:24px}
  .ads{position:fixed;left:0;right:0;bottom:0;transform:none;width:auto;margin:0;z-index:30;
    padding:8px 0 max(8px,env(safe-area-inset-bottom));background:var(--bg);box-shadow:0 -8px 16px -8px rgba(30,29,27,.18)}
  body:has(.ads:not([hidden])){padding-bottom:124px}
  .steps-short{display:block}
  .stages li:not(.now){display:none}
  /* Tighter above the fold, so the step under way clears the ad at the foot of the screen. */
  h1.wait{font-size:26px;margin-bottom:6px}
  .sub{margin-bottom:14px}
  .asked-q{padding:10px 14px;margin-bottom:18px;font-size:17px}
  .noticing{padding:14px 16px 8px}
  .noticing h2{font-size:21px;margin-bottom:6px}
  .noticing p{font-size:16px}
  .stages li.now{font-size:16px}
  .stages li.now::before{top:12px}
}
@media (prefers-reduced-motion:reduce){.stages li::before,.ready .see{animation:none!important}}

/* Accounts (M8) */
.err{color:var(--bad);font-weight:500;margin:0 0 8px}
.ok{color:var(--good);font-weight:500;margin:0 0 8px}
.mail{border-top:1px solid var(--rule);padding:12px 0}
.mail pre{white-space:pre-wrap;font-family:var(--body);font-size:14px;background:var(--panel);padding:12px;border-radius:8px}
footer .acct{margin-left:8px}
/* A box for a page's main content, the same device as the front page's sources (Ted, 2026-10-03). */
.card{border:1px solid var(--rule);border-radius:16px;padding:16px 20px 20px;margin:24px 0 0;background:var(--card)}
.card h2{margin:0 0 6px;font-size:24px}
.card .hint{margin-bottom:12px}
.card a.button{margin-top:6px}
.saved{list-style:none;padding:0;margin:0 0 8px}
.card .saved li:first-child{border-top:0;padding-top:4px}
.saved li{padding:10px 0;border-top:1px solid var(--rule)}
.saved a{font-weight:500}
.saved small{display:block;color:var(--muted);font-size:14px}
.saved .acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin:4px 0}
.saved .acts form{display:block;margin:0}
button.quiet{margin:0;min-height:44px;padding:0 14px;background:none;color:var(--iris);border:1px solid var(--edge);font-weight:500;font-size:14px}
button.quiet:hover{background:var(--panel);color:var(--iris-deep)}
.saved .del{display:inline-flex;align-items:center;min-height:44px;color:var(--terra);font-weight:500}
.sharerow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.sharerow .sharebox{flex:1 1 200px;width:auto;min-width:0;box-sizing:border-box;font-size:14px}.sharerow button{flex-shrink:0}
button.danger{background:var(--terra)}button.danger:hover{background:#8A4A33}
.saved .acts a:not(.del){display:inline-flex;align-items:center;min-height:44px;font-weight:500}
label small{font-size:inherit;color:var(--muted)}

/* Terms and privacy (M8, draft) */
.draft{background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:12px 16px;font-size:15px;line-height:1.5;margin:0 0 28px;max-width:62ch}
main.policy h2{font-size:26px;margin:36px 0 8px}
main.policy ul{margin:0 0 8px;padding-left:22px;font-family:var(--text);font-size:17px;line-height:1.55;max-width:62ch}
main.policy li{margin:0 0 8px}
main.policy p{font-family:var(--text);font-size:17px;line-height:1.55;max-width:62ch;margin:0 0 12px}
main.policy .lede{font-size:20px}
main.policy table{border-collapse:collapse;width:100%;max-width:62ch;font-size:15px;line-height:1.45;margin:0 0 8px}
main.policy th,main.policy td{text-align:left;vertical-align:top;padding:9px 12px 9px 0;border-top:1px solid var(--rule)}
main.policy th{font-weight:600;width:48%}
main.policy code{font-size:14px}
main.policy p a,main.policy li a{text-decoration:underline}

/* The account control, at the far right of the top bar (M8; Ted, 2026-09-29). */
.acct-in{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--edge,#8F897F);border-radius:20px;
  color:var(--ink,#1E1D1B);font-family:var(--body,'Instrument Sans',system-ui,sans-serif);font-size:14px;font-weight:500;white-space:nowrap;text-decoration:none}
.acct-in:hover{background:var(--panel,#F2EDE3);color:var(--ink,#1E1D1B);text-decoration:none}
.acct-menu{position:relative;flex:0 0 auto}
.acct-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:22px}
.acct-menu summary::-webkit-details-marker{display:none}
.acct-menu summary:focus-visible{outline:2px solid var(--iris,#57528E);outline-offset:2px}
.acct-dot{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:18px;background:var(--iris,#57528E);
  color:#fff;font-family:var(--body,'Instrument Sans',system-ui,sans-serif);font-size:15px;font-weight:600}
.acct-menu summary:hover .acct-dot{background:var(--iris-deep,#403C70)}
.acct-pop{position:absolute;right:0;top:50px;z-index:60;min-width:230px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;
  padding:6px;background:var(--bg,#FAF7F0);border:1px solid var(--rule,#E2DBCD);border-radius:12px;box-shadow:0 8px 24px rgba(30,29,27,.14);
  font-family:var(--body,'Instrument Sans',system-ui,sans-serif);font-size:15px;line-height:1.3}
.acct-pop .acct-who{margin:0;padding:8px 12px 6px;color:var(--muted,#57524B);font-size:13px;overflow-wrap:anywhere;border-bottom:1px solid var(--rule,#E2DBCD)}
.acct-pop a,.acct-pop button{display:flex;align-items:center;width:100%;min-height:44px;margin:0;padding:0 12px;border:0;border-radius:8px;
  background:none;color:var(--ink,#1E1D1B);font:inherit;font-weight:400;text-align:left;cursor:pointer;text-decoration:none}
.acct-pop a:hover,.acct-pop button:hover{background:var(--panel,#F2EDE3);color:var(--ink,#1E1D1B);text-decoration:none}
.acct-pop form{margin:0;display:block}
.back{font-family:var(--body);font-size:15px;font-weight:500}
.resume{margin:-16px 0 28px}
.resume a{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:24px;background:var(--iris);
  color:#fff;font-weight:500;font-size:16px;text-decoration:none}
.resume a:hover{background:var(--iris-deep);color:#fff;text-decoration:none}
.source{min-width:0}   /* a fieldset is min-content wide by default: 3px too wide at 320 (found 2026-09-29) */

/* Sign in with a provider (M8, step 3b) */
.providers{display:flex;flex-direction:column;gap:10px;max-width:420px;margin:0 0 4px}
form.narrow{max-width:420px}   /* the email box lines up with the provider buttons (Ted, 2026-10-03) */
/* Every provider button white with the same border and text, so they read as one set beside Google's,
   whose colours its guidelines fix (Ted, 2026-10-03), and apart from the site's own black button. */
.provider{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 12px;border:1px solid #747775;
  border-radius:24px;background:#FFFFFF;color:#1F1F1F;font-weight:500;font-size:16px;text-decoration:none}
.provider:hover{background:#FFFFFF;color:#1F1F1F;text-decoration:none;box-shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15)}
.provider .g{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}
.provider .g svg,.provider .g img{display:block}
/* Google's G sits on a white square, as its guidelines require; the font falls back from Google Sans Medium,
   which isn't bundled, to the site's sans. The Lichess knight: static/lichess.svg, from Lichess's own source. */
.provider.google{font-family:'Google Sans',var(--body)}
.provider.google .g{background:#FFFFFF}

/* Field messages and the green check (forms.js) */
.field-msg{margin:6px 0 0;font-size:14px;line-height:1.4;min-height:0}
.field-msg:empty{display:none}
.field-msg.bad{color:var(--bad);font-weight:500}
.field-msg.bad::before{content:"\2715";display:inline-block;margin-right:6px;font-weight:700}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
input.is-valid{border-color:var(--good);padding-right:44px;
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231F7A3D' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 L10 17 L19 7'/%3E%3C/svg%3E") no-repeat right 14px center}
.ok::before{content:"\2713";display:inline-block;margin-right:6px;font-weight:700}
.err::before{content:"\2715";display:inline-block;margin-right:6px;font-weight:700}
.qlabel{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 8px}