/* Login page C "Saw cuts the logo" (owner's pick, 13 Oct 2026). Loaded by login_temp.php only.
   Motion is transform/opacity only, ends by 1.3 s, and is off under prefers-reduced-motion.
   States come from aleaLoginState() in assets/js/login_c.js: html[data-state=loading|error|success]. */
:root{
  --bg:#233757; --bg-ink:#F3F5F8; --bg-ink-2:#B8C4D8; --tape:#F5C518; --tape-ink:#16202E;
  --ink:#16202E; --ink-2:#4A5568; --card:#fff; --field:#F3F5F8; --ph:#6B7A90;
  --go:#2643D6; --late:#C42B2B; --late-soft:#FDECEC; --ok:#1B7A4B; --ok-soft:#E4F4EB;
  --disp:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif; --body:"Instrument Sans",system-ui,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F1828; --bg-ink:#E8EDF5; --bg-ink-2:#93A2BA; --ink:#E8EDF5; --ink-2:#A9B4C6; --card:#18243A; --field:#0F1828; --ph:#7F8DA3;
  --go:#7D93FF; --late:#FF8A8A; --late-soft:#3A1C22; --ok:#6FD6A0; --ok-soft:#173326;
}}
:root[data-theme="dark"]{
  --bg:#0F1828; --bg-ink:#E8EDF5; --bg-ink-2:#93A2BA; --ink:#E8EDF5; --ink-2:#A9B4C6; --card:#18243A; --field:#0F1828; --ph:#7F8DA3;
  --go:#7D93FF; --late:#FF8A8A; --late-soft:#3A1C22; --ok:#6FD6A0; --ok-soft:#173326;
}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden}
body{font:17px/1.5 var(--body);background:var(--bg);color:var(--bg-ink);min-height:100vh;position:relative}

/* The one bold thing: a measuring tape across the page, and a saw that cuts the logo out. */
.lc-tape{position:absolute;left:0;right:0;top:58%;height:64px;background-color:var(--tape);
  background-image:
    repeating-linear-gradient(90deg,var(--tape-ink) 0 2px,transparent 2px 100px),
    repeating-linear-gradient(90deg,var(--tape-ink) 0 1.5px,transparent 1.5px 50px),
    repeating-linear-gradient(90deg,var(--tape-ink) 0 1px,transparent 1px 10px);
  background-size:100% 30px,100% 20px,100% 11px;background-repeat:repeat-x;background-position:0 0;
  transform:rotate(-4deg);transform-origin:left center;box-shadow:0 10px 30px rgba(0,0,0,.25);pointer-events:none}
.lc-tape span{position:absolute;bottom:8px;font:800 15px var(--disp);color:var(--tape-ink)}
.lc-logo{position:absolute;left:-1vw;top:15vh;font:800 clamp(140px,26vw,380px)/.85 var(--disp);letter-spacing:-.05em;pointer-events:none;user-select:none;overflow:hidden;padding:0 .06em .08em 0}
.lc-logo span{display:block}
.lc-fill{color:rgba(243,245,248,.13)}
.lc-word{position:absolute;left:0;top:0;color:transparent;-webkit-text-stroke:2px rgba(243,245,248,.22)}
.lc-cover{position:absolute;inset:0;background:var(--bg);transform:translateX(100%)}
.lc-saw{position:absolute;inset:0;opacity:0}
.lc-kerf{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--tape)}
.lc-blade{position:absolute;left:-28px;top:-6px;width:58px;height:58px}
.lc-blade .lc-hub{fill:var(--bg)}

.lc-page{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:1fr minmax(0,460px);gap:48px;align-items:center;padding:48px 7vw}
.lc-mark{position:absolute;left:7vw;top:40px;display:flex;align-items:center;gap:12px;font:700 20px var(--disp)}
.lc-mark img{width:40px;height:40px;border-radius:10px}
.lc-intro{align-self:end;padding-bottom:6vh}
.lc-intro p{margin:0;max-width:30ch;font-size:19px;color:var(--bg-ink-2)}

.lc-card{background:var(--card);color:var(--ink);border-radius:20px;padding:36px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.lc-card form{display:flex;flex-direction:column;gap:20px}
.lc-card h1{font:800 40px/1.05 var(--disp);letter-spacing:-.025em;margin:0}
.lc-card label{font-weight:600}
.lc-field{display:flex;flex-direction:column;gap:8px}
.lc-input{width:100%;height:58px;padding:0 16px;font:inherit;font-size:18px;color:var(--ink);background:var(--field);border:2px solid transparent;border-radius:12px;-webkit-appearance:none;appearance:none}
.lc-input::placeholder{color:var(--ph)}
.lc-input:focus{outline:none;border-color:var(--go);background:var(--card)}
.lc-input[aria-invalid="true"]{border-color:var(--late)}
.lc-switch{align-self:flex-start;background:none;border:0;padding:6px 0;min-height:44px;font:inherit;font-size:16px;color:var(--go);text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lc-pw{position:relative}.lc-pw .lc-input{padding-right:64px}
.lc-eye{position:absolute;right:7px;top:7px;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer}
.lc-eye .bp-slash{display:none}.lc-eye.is-shown .bp-slash{display:inline}
.lc-eye:focus-visible,.lc-switch:focus-visible,.lc-btn:focus-visible,.lc-remember input:focus-visible{outline:3px solid var(--go);outline-offset:2px}
.lc-remember{display:flex;align-items:center;gap:12px;min-height:48px;cursor:pointer}
.lc-remember input{width:22px;height:22px;margin:0;accent-color:var(--go)}
.lc-alert,.lc-ok{display:none;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;font-weight:600}
.lc-alert{background:var(--late-soft);color:var(--late)}
.lc-ok{background:var(--ok-soft);color:var(--ok)}
.lc-alert svg,.lc-ok svg{flex:none;margin-top:3px}
.lc-btn{position:relative;overflow:hidden;height:60px;border:0;border-radius:12px;background:var(--tape);color:var(--tape-ink);font:800 19px var(--disp);cursor:pointer}
.lc-btn:hover{filter:brightness(1.05)}
.lc-run{position:absolute;inset:0 -100px 0 0;opacity:0;background-image:repeating-linear-gradient(90deg,rgba(22,32,46,.35) 0 2px,transparent 2px 10px);background-size:100% 12px;background-repeat:repeat-x}
.lc-lbl{position:relative}
.lc-help{margin:0;color:var(--ink-2);font-size:16px}
[data-state="error"] .lc-alert{display:flex}
[data-state="success"] .lc-ok{display:flex}
[data-state="success"] .lc-btn{background:var(--ok);color:#fff}
[data-state="loading"] .lc-btn{cursor:progress}
[data-state="loading"] .lc-run{opacity:1}
/* The message is shown inline in .lc-alert / .lc-ok; the page still calls toastr exactly as before. */
.lc-js #toast-container{display:none}   /* only once login_c.js ran: if it fails to load, toastr stays visible */

@media (prefers-reduced-motion:no-preference){
  .lc-tape{animation:lcTapeIn .9s cubic-bezier(.2,.8,.2,1) both}
  .lc-card{animation:lcRise .5s cubic-bezier(.2,.8,.2,1) both}
  .lc-cover{animation:lcCut 1.1s cubic-bezier(.45,0,.3,1) .2s both}
  .lc-saw{animation:lcSawRun 1.1s cubic-bezier(.45,0,.3,1) .2s both}
  .lc-blade{animation:lcSpin .25s linear infinite}
  [data-state="success"] .lc-tape{animation:lcRetract .55s cubic-bezier(.6,0,.4,1) both}
  [data-state="success"] .lc-card{animation:lcLift .6s ease-in .35s both}
  [data-state="success"] .lc-fill{animation:lcGlow .5s ease-out both}
  [data-state="loading"] .lc-run{animation:lcMeasure .6s linear infinite}
  [data-state="error"] .lc-card{animation:lcNudge .35s ease-out}
}
@keyframes lcTapeIn{from{transform:rotate(-4deg) translateX(-100%)}to{transform:rotate(-4deg) translateX(0)}}
@keyframes lcRise{from{transform:translateY(16px)}to{transform:none}}
@keyframes lcCut{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes lcSawRun{0%{opacity:1;transform:translateX(0)}88%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
@keyframes lcSpin{to{transform:rotate(360deg)}}
@keyframes lcRetract{to{transform:rotate(-4deg) translateX(-110%)}}
@keyframes lcLift{to{transform:translateY(-18px);opacity:.4}}
@keyframes lcGlow{from{opacity:.4}to{opacity:1}}
@keyframes lcMeasure{to{transform:translateX(-10px)}}
@keyframes lcNudge{0%,100%{transform:none}30%{transform:translateX(-8px)}60%{transform:translateX(6px)}}

@media (max-width:900px){
  .lc-page{grid-template-columns:1fr;padding:126px 16px 32px;gap:20px;align-items:start}
  .lc-mark{left:16px;top:16px}
  .lc-intro{display:none}
  .lc-tape{top:76px;height:40px;background-size:100% 20px,100% 14px,100% 8px}
  .lc-tape span{display:none}
  .lc-logo{font-size:150px;top:auto;bottom:-10px;left:-8px}
  .lc-blade{width:40px;height:40px;left:-19px}
  .lc-card{padding:26px 20px}
  .lc-card h1{font-size:32px}
}