/* sign-in.css — the sign-in page (/sign-in). Served from /acct/ because the gate in
   functions/_middleware.js only opens /acct/<file> to signed-out visitors (OPEN list).
   Palette and fonts copied from site-cf/public/index.html. No inline styles anywhere:
   the strict CSP on account pages forbids them. */

:root{
  --paper:#FBF4EA; --paper-2:#F4EBDE; --card:#FFFFFF;
  --ink:#2A2340; --ink-soft:#6B6380;
  --clay:#D93D66; --clay-dark:#C42650; --clay-pale:#FBE2E9;
  --sage:#11804F; --sage-pale:#E8F5ED;
  --sky:#2F4FA8; --sky-pale:#E2E8F7;
  --mustard:#8A6410; --mustard-pale:#F8EBCD;
  --error:#B3291C; --error-pale:#FBE4E1;
  --line:#EADFCF; --line-soft:#F3E9DB;
  --radius:18px;
  --display:'Fredoka', 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --body:'Atkinson Hyperlegible', 'Verdana', system-ui, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column;
}
.wrap{width:100%; max-width:760px; margin:0 auto; padding:0 16px}
.wrap.bar{max-width:1080px}
.wrap.wide{max-width:1080px}
a{color:var(--clay-dark); text-decoration-thickness:2px; text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--sky); outline-offset:3px; border-radius:6px}
h1,h2,h3{font-family:var(--display); font-weight:700; line-height:1.18; margin:0 0 .5em; letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,6.4vw,2.7rem)}
h2{font-size:1.32rem}
h3{font-size:1.05rem; margin-bottom:.3em}
p{margin:0 0 1em}
[hidden]{display:none !important}
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:12px 18px; z-index:50; border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ---- header and footer ---- */
header.site{border-bottom:2px solid var(--line-soft)}
.bar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 16px}
.brand{display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:700; font-size:1.3rem; color:var(--ink); text-decoration:none}
.brand svg{flex:none}
/* the town's wordmark: eleven letters that bob, the second half in the accent */
.logo{display:inline-flex; font-family:var(--display); font-weight:700; line-height:.95; letter-spacing:-.01em}
.logo span{display:inline-block; animation:bob 3.2s ease-in-out infinite}
.logo span:nth-child(2n){animation-delay:-.4s}
.logo span:nth-child(3n){animation-delay:-1.1s}
.logo .v{color:var(--clay-dark)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion: reduce){ .logo span{animation:none} }

nav.site{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}
nav.site a{color:var(--ink-soft); text-decoration:none; font-weight:600; font-size:.97rem}
nav.site a:hover{color:var(--clay-dark); text-decoration:underline}

footer.site{flex:none; margin-top:40px; border-top:2px solid var(--line); padding:22px 0 40px; font-size:.93rem; color:var(--ink-soft)}
footer.site ul{list-style:none; display:flex; flex-wrap:wrap; gap:8px 20px; padding:0; margin:0 0 10px}
footer.site a{color:var(--ink-soft)}
footer.site p{margin:0}

main{flex:1 0 auto; padding:30px 0 10px}
.lead{font-size:1.08rem; color:var(--ink-soft); max-width:60ch}

/* ---- notices and messages ---- */
.notice{border-radius:14px; padding:14px 16px; margin:0 0 20px; border:2px solid}
.notice p{margin:0}
.notice p+p{margin-top:.5em}
.notice.info{background:var(--sky-pale); border-color:#AEBEE6}
.notice.warn{background:var(--mustard-pale); border-color:#E3C886}
.notice.good{background:var(--sage-pale); border-color:#A9D6BC}
.notice.bad{background:var(--error-pale); border-color:#E4AFA7; color:#7E1838}
.notice.bad a:not(.btn){color:#7E1838}

.msg{margin:0 0 14px; padding:12px 14px; border-radius:12px; border:2px solid; font-size:1rem}
.msg:empty{display:none}
.msg.bad{background:var(--error-pale); border-color:#E4AFA7; color:#7E1838}
.msg.ok{background:var(--sage-pale); border-color:#A9D6BC}
.msg.calm{background:var(--sky-pale); border-color:#AEBEE6}

/* ---- panels ---- */
.panel{background:var(--card); border:2px solid var(--line); border-radius:var(--radius); padding:20px 16px; margin:22px 0}
.panel h2{margin-top:0}
.panel > p:last-child{margin-bottom:0}
.panel.kids{background:var(--sky-pale); border-color:#AEBEE6}

/* ---- forms ---- */
form{margin:0}
.field{margin:0 0 18px}
.field > label{display:block; font-weight:700; margin-bottom:5px}
.hint{display:block; font-weight:400; font-size:.89rem; color:var(--ink-soft); margin-top:2px}
input[type=text],input[type=email],input[type=password]{
  width:100%; font-family:var(--body); font-size:1.05rem; color:var(--ink);
  background:#fff; border:2px solid var(--line); border-radius:11px; padding:12px 13px;
}
input:focus-visible{border-color:var(--sky)}
input[aria-invalid=true]{border-color:var(--error)}
.btn{
  display:inline-block; font-family:var(--display); font-weight:600; font-size:1.08rem;
  padding:14px 26px; border-radius:999px; text-decoration:none; border:2px solid var(--clay-dark);
  background:var(--clay-dark); color:#fff; cursor:pointer; text-align:center;
}
.btn:hover{background:#8C1B3C; border-color:#8C1B3C; color:#fff}
.btn[disabled]{opacity:.6; cursor:progress}
.btn.ghost{background:transparent; color:var(--clay-dark); border-color:var(--line)}
.btn.ghost:hover{background:var(--clay-pale); border-color:var(--clay-dark); color:var(--clay-dark)}
.btn.block{display:block; width:100%}
.actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.after{font-size:.95rem; color:var(--ink-soft); margin:16px 0 0}
.after a{font-weight:700}
.linkish{
  background:none; border:0; padding:0; font:inherit; color:var(--clay-dark);
  font-weight:700; text-decoration:underline; text-decoration-thickness:2px;
  text-underline-offset:3px; cursor:pointer;
}
.linkish:hover{color:var(--ink)}
#ts{margin:0 0 16px}

/* ---- the class way in: big targets, plain words ---- */
.panel.kids h2{font-size:1.45rem}
.kid-lead{color:#3E4A78; font-size:1.05rem}
.code-field label{font-size:1.1rem}
#code{
  font-family:var(--display); font-size:1.7rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; text-align:center;
  padding:14px 10px; max-width:11em;
}
.btn.big{font-size:1.2rem; padding:16px 30px; min-height:64px; background:var(--sky); border-color:var(--sky)}
.btn.big:hover{background:#233B7E; border-color:#233B7E}
#classname{font-family:var(--display); font-size:1.25rem; font-weight:700; margin:0 0 .4em}
#nicks{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin:0 0 16px; padding:0}
#nicks button{
  font-family:var(--display); font-weight:600; font-size:1.2rem; min-height:72px;
  padding:14px 12px; border-radius:16px; border:3px solid var(--sage);
  background:#fff; color:var(--ink); cursor:pointer; overflow-wrap:break-word;
}
#nicks button:hover{background:var(--sage-pale)}
/* the PIN step is focused as a whole after a name is tapped, so the reader announces it;
   it is not a control, so it draws no focus ring of its own */
#pinbox:focus{outline:none}
#pinbox .who{font-family:var(--display); font-size:1.25rem; font-weight:700; margin:0 0 .5em}
#pin{
  font-family:var(--display); font-size:2rem; font-weight:700; letter-spacing:.4em;
  text-align:center; max-width:7em; padding:12px 10px 12px 20px;
}
#pad{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
  max-width:330px; margin:16px 0 0; padding:0; list-style:none;
}
#pad button{
  min-height:68px; min-width:68px; width:100%;
  font-family:var(--display); font-weight:700; font-size:1.6rem;
  border-radius:16px; border:3px solid var(--line); background:#fff; color:var(--ink); cursor:pointer;
}
#pad button:hover{background:var(--mustard-pale); border-color:var(--mustard)}
#pad button.wide{font-size:1rem; grid-column:span 2}
.steps{list-style:none; margin:0 0 18px; padding:0; color:#3E4A78; font-size:.98rem}
.steps li{margin:.3em 0; padding-left:1.6em; position:relative}
.steps li::before{content:"\2192"; position:absolute; left:0; font-weight:700}

@media (min-width:620px){
  .panel{padding:22px 20px}
  .btn.block{display:inline-block; width:auto}
}

/* ---- dark: the same town after sunset ---- */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
  --paper:#15121E; --paper-2:#2A2440; --card:#211C2E;
  --ink:#F3EEFB; --ink-soft:#AAA2C0;
  --clay:#FF8FA8; --clay-dark:#FFB3C4; --clay-pale:#3C2030;
  --sage:#4CCB8C; --sage-pale:#1B3328;
  --sky:#8FB0FF; --sky-pale:#1C243D;
  --mustard:#E6C068; --mustard-pale:#332A16;
  --error:#F2786D; --error-pale:#3A1E22;
  --line:#342D46; --line-soft:#2B2439;
  color-scheme:dark;
}
:root:not([data-theme="light"]) .logo .v{color:#FF8FA8}
:root:not([data-theme="light"]) .skip{color:var(--paper)}
:root:not([data-theme="light"]) .btn{color:var(--paper)}
:root:not([data-theme="light"]) .btn:hover{background:#FFC9D6; border-color:#FFC9D6; color:var(--paper)}
:root:not([data-theme="light"]) .btn.ghost{background:transparent; color:var(--clay-dark); border-color:var(--line)}
:root:not([data-theme="light"]) .notice.info,
:root:not([data-theme="light"]) .msg.calm,
:root:not([data-theme="light"]) .panel.kids{border-color:#3D4F7E}
:root:not([data-theme="light"]) .notice.warn{border-color:#6B5A2A}
:root:not([data-theme="light"]) .notice.good,
:root:not([data-theme="light"]) .msg.ok{border-color:#3A6B52}
:root:not([data-theme="light"]) .notice.bad,
:root:not([data-theme="light"]) .msg.bad{border-color:#7A3A40; color:#FFB8B0}
:root:not([data-theme="light"]) .notice.bad a:not(.btn),
:root:not([data-theme="light"]) .msg.bad a:not(.btn){color:#FFB8B0}
:root:not([data-theme="light"]) input[type=text],
:root:not([data-theme="light"]) input[type=email],
:root:not([data-theme="light"]) input[type=password],
:root:not([data-theme="light"]) #nicks button,
:root:not([data-theme="light"]) #pad button{background-color:#100D19; color:var(--ink)}
:root:not([data-theme="light"]) .kid-lead,
:root:not([data-theme="light"]) .steps{color:#AFC4FF}
:root:not([data-theme="light"]) .btn.big:hover{background:#AFC4FF; border-color:#AFC4FF}
:root:not([data-theme="light"]) #nicks button:hover{background:#1B3328; border-color:#3A6B52}
:root:not([data-theme="light"]) #pad button:hover{background:#332A16; border-color:#6B5A2A}
}