/* C1 (Claude return on checkpoint121): approved design 002 "Secure Sign-In" composition for /signin.html only.
   Everything is scoped to body.c1-signin so the shared account styles of join/recovery/reset are not changed.
   Background stays the existing approved-derived scene (assets/dev82-holographic/account-city-derived-v2.png, 1536x1024): mascot left,
   learners right, centre left free for the real form. No flattened reference image is used as UI; every control below is real HTML.
   Not reproduced on purpose (see audit/SCREEN_CONTROL_LEDGER.csv): Remember Me, Google/Microsoft/Apple, EN selector, Today's Highlights,
   "Join Millions", social icons — no backend, destination or verified fact exists for them. */
body.c1-signin{--c1-line:#6fdcff;--c1-glow:0 0 0 3px #1a8fd033,0 0 26px #14b5ff66;--c1-panel:linear-gradient(160deg,#0a2d55f2,#04142bf7);--c1-text:#f2f8ff;--c1-soft:#cfe6fa;--c1-gold:#ffd36b;background:#04112a;color:var(--c1-text)}
body.c1-signin .c1-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* header: brand left, tagline centre, Back to Home right */
body.c1-signin .c1-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 2.5%;background:linear-gradient(#020b1df0,#04142ce6);border-bottom:1px solid #2f86b8}
body.c1-signin .c1-top .brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;min-height:44px}
body.c1-signin .c1-brand-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2px solid var(--c1-gold);color:var(--c1-gold);font-size:26px;box-shadow:0 0 16px #ffc84d55}
body.c1-signin .c1-brand-text{display:grid;font-size:clamp(22px,2.4vw,40px);font-weight:800;line-height:1.05;color:#e9f6ff}
body.c1-signin .c1-brand-text b{color:var(--c1-gold)}
body.c1-signin .c1-brand-text small{font-size:clamp(10px,.8vw,13px);letter-spacing:.28em;color:#8fe3ff;font-weight:700;margin-top:4px}
body.c1-signin .c1-tagline{margin:0;padding:8px 18px;border:1px solid #2c7fae;border-radius:8px;letter-spacing:.25em;font-size:13px;color:#d9efff;background:#03122a99}
body.c1-signin .c1-top nav{display:flex;gap:10px}
body.c1-signin .c1-home{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 18px;border:2px solid var(--c1-line);border-radius:12px;background:#06224499;font-weight:700;text-decoration:none;box-shadow:var(--c1-glow)}
body.c1-signin .c1-home svg{color:var(--c1-gold)}
/* scene: the existing approved-derived background, the card centred between mascot and learners */
body.c1-signin .c1-scene{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,540px) minmax(0,1fr);grid-template-rows:auto auto;gap:22px 2%;align-content:start;padding:34px 2.5% 30px;min-height:calc(100vh - 150px);background:linear-gradient(#04152b18,#04152b4a),url('/assets/dev82-holographic/account-city-derived-v2.png') center top/cover no-repeat,#06152e}
body.c1-signin .c1-side{align-self:start;margin:0;font:800 clamp(14px,1.3vw,22px)/1.45 system-ui,Segoe UI,Arial,sans-serif;letter-spacing:.08em;color:#e8f6ff;text-shadow:0 0 12px #00a2ff,0 2px 3px #000;padding:12px 16px;border:1px solid #64d6ff88;border-radius:12px;background:#031a3866;width:max-content;max-width:100%}
body.c1-signin .c1-side-left{grid-column:1;grid-row:1;justify-self:start}
body.c1-signin .c1-side-right{grid-column:3;grid-row:1;justify-self:end;text-align:right}
body.c1-signin .c1-card{grid-column:2;grid-row:1;max-width:540px;width:100%;justify-self:center;margin:0;background:var(--c1-panel);border:2px solid var(--c1-line);border-radius:22px;padding:30px 34px 24px;box-shadow:var(--c1-glow),inset 0 0 40px #0d5aa033}
body.c1-signin .c1-card .signin-mascot{display:none}
body.c1-signin .c1-card h1{margin:0;text-align:center;font-size:clamp(32px,3.2vw,52px);line-height:1.1;color:#fff;text-shadow:0 0 18px #3cbcff99}
body.c1-signin .c1-lead{margin:8px 0 18px;text-align:center;font-size:clamp(16px,1.25vw,20px);color:var(--c1-soft)}
body.c1-signin .c1-card label{display:block;margin:12px 0 6px;font-weight:700;color:#e6f4ff}
body.c1-signin .c1-field{display:flex;align-items:center;gap:0;border:2px solid #48b9ec;border-radius:14px;background:#03142bdd;min-height:56px;padding:0 6px 0 14px}
body.c1-signin .c1-field:focus-within{border-color:var(--c1-gold);box-shadow:0 0 0 3px #ffd36b55}
body.c1-signin .c1-field>svg{flex:none;color:#bfe9ff;margin-right:12px}
body.c1-signin .c1-field input{flex:1;min-width:0;min-height:52px;border:0;background:transparent;color:#fff;font-size:17px;padding:0 6px;outline:none}
body.c1-signin .c1-field input::placeholder{color:#a9c9e4}
body.c1-signin .password-row.c1-field{display:flex}
body.c1-signin .c1-eye{flex:none;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:10px;background:transparent;color:#cdeeff;cursor:pointer}
body.c1-signin .c1-eye[aria-pressed=true]{color:var(--c1-gold);background:#123d66}
body.c1-signin .c1-eye:focus-visible{outline:3px solid var(--c1-gold);outline-offset:2px}
body.c1-signin .c1-hint{margin:6px 2px 0;font-size:13px;line-height:1.45;color:#b9d6ee}
body.c1-signin #totp-wrap input,body.c1-signin #email-wrap input{width:100%;min-height:52px;border:2px solid #48b9ec;border-radius:12px;background:#03142bdd;color:#fff;font-size:17px;padding:0 14px}
body.c1-signin .c1-row{display:flex;justify-content:flex-end;margin:14px 0 6px}
body.c1-signin .c1-forgot,body.c1-signin .c1-create a{color:#8fe6ff;font-weight:700;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
body.c1-signin .c1-submit{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;min-height:62px;margin-top:6px;border:2px solid #8fe6ff;border-radius:16px;background:linear-gradient(180deg,#2d8dff,#0a5bd6 60%,#0a4fbf);color:#fff;font-size:clamp(20px,1.6vw,26px);font-weight:700;box-shadow:0 0 22px #1f8bff99,inset 0 1px 0 #ffffff66;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
body.c1-signin .c1-submit:hover{filter:brightness(1.1)}
body.c1-signin .c1-submit:active,body.c1-signin .c1-submit.teddy-pressed{transform:translateY(2px) scale(.99);box-shadow:0 0 10px #1f8bff99,inset 0 2px 6px #0007}
body.c1-signin .c1-submit:disabled{opacity:.72;cursor:progress;filter:saturate(.6)}
body.c1-signin .c1-submit:focus-visible{outline:3px solid var(--c1-gold);outline-offset:3px}
body.c1-signin #status{min-height:1.5em;margin:12px 0 0;text-align:center;line-height:1.5;overflow-wrap:anywhere;color:#ffe7a8}
body.c1-signin .c1-create{margin:10px 0 0;text-align:center;color:var(--c1-soft)}
body.c1-signin .c1-session{margin:0 0 12px;padding:12px 14px;border:1px solid var(--c1-gold);border-radius:12px;background:#2a230833;line-height:1.5}
body.c1-signin .c1-session a{display:inline-flex;align-items:center;min-height:44px;margin-right:12px;color:var(--c1-gold);font-weight:700}
/* role tiles: real buttons; guidance only */
body.c1-signin .c1-roles{grid-column:1/-1;grid-row:2;display:grid;justify-items:center;gap:12px}
body.c1-signin .c1-roles .roles{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:0}
body.c1-signin .c1-role{display:grid;justify-items:center;align-content:center;gap:8px;min-width:170px;min-height:104px;padding:12px 18px;border:2px solid var(--c1-line);border-radius:18px;background:linear-gradient(180deg,#0c3866f0,#051a36f5);color:#fff;font-size:20px;font-weight:700;cursor:pointer;box-shadow:var(--c1-glow);transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
body.c1-signin .c1-role svg{color:#f6d36d}
body.c1-signin .c1-role:hover{border-color:#b8f0ff}
body.c1-signin .c1-role:active,body.c1-signin .c1-role.teddy-pressed{transform:translateY(2px) scale(.98)}
body.c1-signin .c1-role[aria-pressed=true]{border-color:var(--c1-gold);background:linear-gradient(180deg,#26467a,#0b2a55);box-shadow:0 0 0 3px #ffd36b66,0 0 26px #ffc84d66}
body.c1-signin .c1-role:focus-visible{outline:3px solid var(--c1-gold);outline-offset:3px}
body.c1-signin .c1-role-help{max-width:760px;width:100%;padding:14px 18px;border:1px solid var(--c1-line);border-radius:14px;background:#041a36f0;line-height:1.55;color:#eaf6ff}
body.c1-signin .c1-role-help h3{margin:0 0 6px;font-size:18px;color:var(--c1-gold)}
body.c1-signin .c1-role-help p{margin:4px 0}
body.c1-signin .c1-role-help a{color:#8fe6ff;font-weight:700;display:inline-flex;min-height:44px;align-items:center;margin-right:14px}
body.c1-signin .c1-help{position:absolute;right:2.5%;bottom:24px;display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 18px;border:2px solid var(--c1-line);border-radius:16px;background:#051c3af0;color:#fff;text-decoration:none;box-shadow:var(--c1-glow);max-width:330px}
body.c1-signin .c1-help b{display:block}
body.c1-signin .c1-help svg{flex:none;color:#bfeaff}
body.c1-signin .c1-help:focus-visible,body.c1-signin .c1-home:focus-visible,body.c1-signin .c1-foot a:focus-visible{outline:3px solid var(--c1-gold);outline-offset:3px}
/* footer */
body.c1-signin .c1-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 22px;padding:16px 2.5%;background:#020b1d;border-top:1px solid #2f86b8}
body.c1-signin .c1-foot strong{color:#8fe3ff;letter-spacing:.06em;font-size:clamp(14px,1.3vw,20px)}
body.c1-signin .c1-foot nav{display:flex;flex-wrap:wrap;gap:4px 18px}
body.c1-signin .c1-foot nav a{display:inline-flex;align-items:center;min-height:44px;color:#e4f2ff;font-size:14px}
body.c1-signin .c1-foot-note{color:#cfe4f6;font-size:14px}
/* below 1400px the help tile flows under the role tiles (measured: absolute placement overlapped the guidance panel at 1200/1280px) */
@media (max-width:1399px){body.c1-signin .c1-help{position:static;grid-column:1/-1;grid-row:3;justify-self:end}}
/* tablet */
@media (max-width:1100px){
 body.c1-signin .c1-tagline{display:none}
 body.c1-signin .c1-scene{grid-template-columns:minmax(0,1fr) minmax(320px,540px) minmax(0,1fr)}
 body.c1-signin .c1-side{display:none}
 body.c1-signin .c1-help{position:static;grid-column:1/-1;grid-row:3;justify-self:center}
}
/* phone: the form first (above the fold), the scene as a short banner */
@media (max-width:700px){
 body.c1-signin .c1-top{padding:10px 14px}
 body.c1-signin .c1-brand-mark{width:40px;height:40px;font-size:20px}
 body.c1-signin .c1-brand-text small{display:none}
 body.c1-signin .c1-home{padding:6px 12px;font-size:15px}
 body.c1-signin .c1-scene{display:block;padding:120px 14px 24px;background:linear-gradient(#04152b00 0,#04152b00 90px,#06152e 200px),url('/assets/dev82-holographic/account-city-derived-v2.png') center top/auto 230px no-repeat,#06152e;min-height:0}
 body.c1-signin .c1-card{padding:22px 18px 18px;border-radius:18px}
 body.c1-signin .c1-roles{margin-top:20px}
 body.c1-signin .c1-roles .roles{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:10px}
 body.c1-signin .c1-role{min-width:0;min-height:84px;font-size:17px;padding:10px 8px}
 body.c1-signin .c1-help{margin:20px auto 0;max-width:none;width:100%}
 body.c1-signin .c1-foot{flex-direction:column;align-items:flex-start}
}
@media (max-width:360px){body.c1-signin .c1-brand-text{font-size:20px}body.c1-signin .c1-brand-mark{width:34px;height:34px;font-size:17px}body.c1-signin .c1-top .brand{gap:8px}body.c1-signin .c1-scene{padding-top:140px}body.c1-signin .c1-role{padding:10px 6px;font-size:15px}}
/* short landscape phones: keep the form reachable without the banner */
@media (max-height:500px) and (orientation:landscape){
 body.c1-signin .c1-scene{display:block;padding:16px 4%;background:#06152e}
 body.c1-signin .c1-side,body.c1-signin .c1-tagline{display:none}
 body.c1-signin .c1-card{margin:0 auto}
 body.c1-signin .c1-roles{margin-top:16px}
 body.c1-signin .c1-help{position:static;margin:16px auto 0}
}
@media (prefers-reduced-motion:reduce){body.c1-signin .c1-submit,body.c1-signin .c1-role{transition:none}body.c1-signin .c1-submit:active,body.c1-signin .c1-role:active,body.c1-signin .c1-submit.teddy-pressed,body.c1-signin .c1-role.teddy-pressed{transform:none}}
@media (forced-colors:active){body.c1-signin .c1-role[aria-pressed=true]{outline:3px solid Highlight}}
/* the shared account sheet styles .roles span as small pills (old noninteractive role labels); inside a real tile the label is plain text */
body.c1-signin .c1-roles .roles .c1-role span{padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:inherit;color:inherit}
/* live regions stay mounted; collapsed while empty so inserted guidance/session text is announced */
body.c1-signin .c1-role-help:empty,body.c1-signin .c1-session:empty{display:block;height:0;min-height:0;margin:0;padding:0;border:0;overflow:hidden}
/* R2: first sign-in steps (new password, two-step verification, recovery codes) inside the same card */
body.c1-signin .c1-setup h2{margin:0;text-align:center;font-size:clamp(24px,2.2vw,34px);color:#fff}
body.c1-signin .c1-setup-form{display:grid;gap:6px;margin-top:8px}
body.c1-signin .c1-setup-form input,body.c1-signin .c1-codes{width:100%;min-height:52px;border:2px solid #48b9ec;border-radius:12px;background:#03142bdd;color:#fff;font-size:17px;padding:0 14px}
body.c1-signin .c1-setup-form input:focus-visible,body.c1-signin .c1-codes:focus-visible{outline:3px solid var(--c1-gold);outline-offset:2px}
body.c1-signin .c1-codes{padding:12px 14px;font:600 17px/1.6 ui-monospace,Menlo,Consolas,monospace;resize:vertical}
body.c1-signin .c1-setup-toggle{min-height:44px;margin:8px 8px 0 0;padding:0 16px;border:1px solid #80dfff;border-radius:10px;background:#123d66;color:#fff;cursor:pointer}
body.c1-signin .c1-setup-toggle:focus-visible{outline:3px solid var(--c1-gold);outline-offset:3px}
body.c1-signin .c1-setup-actions{display:flex;flex-wrap:wrap}
body.c1-signin .c1-qr{display:block;margin:14px auto 6px;width:200px;height:200px;border-radius:12px;background:#fff;padding:8px}
body.c1-signin .c1-key{margin:6px 0;text-align:center;font:700 20px/1.4 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;color:#ffe7a8;overflow-wrap:anywhere}
body.c1-signin .c1-check{display:flex;align-items:center;gap:8px;min-height:44px}
body.c1-signin .c1-check input{width:24px;height:24px}
body.c1-signin .c1-setup-status{min-height:1.5em;text-align:center;color:#ffe7a8;overflow-wrap:anywhere}