/* KnowComic — the login / sign-up PAGE (V2, approved 2026-09-15).
   Built from _local/auth-demo.css + auth-demo-v2.css; the _local files
   stay as the demo playground and are no longer used by anything live. */
/* KnowComic — shared styling for the login / sign-up page demos.
   This is V1: green brand half on the left, plain cream form half on the right.
   Demo only: if these pages get adopted, fold this into the site CSS. */
:root{
  --ink:#1a0a2e; --paper:#fffdf0; --yellow:#FFE135; --red:#FF3B3B;
  --green:#2E7D32; --green-dark:#1B5E20;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* The browser's own [hidden] is only display:none at the weakest specificity,
   so ANY rule that sets display beats it -- .btn is display:flex, so a hidden
   button stayed on screen. `.pane[hidden]` and `.kc-msg[hidden]` further down
   are this same fix written out twice; this covers every element, including
   the ones a later change adds. */
[hidden]{display:none !important;}
body{font-family:'Comic Neue',cursive;color:var(--ink);background:var(--paper);min-height:100vh;}
.split{display:grid;grid-template-columns:1fr auto 1fr;min-height:100vh;}

/* ── LEFT: the brand half ───────────────────────────────────────────── */
.brand{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0a1f0a 0%,var(--green-dark) 55%,var(--green) 100%);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:48px 56px;color:#fff;
}
.brand::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.10) 1.5px, transparent 1.5px);
  background-size:22px 22px;pointer-events:none;
}
.brand-inner{position:relative;z-index:2;max-width:560px;margin:0 auto;width:100%;
  display:flex;flex-direction:column;align-items:flex-start;flex:1;}
.brand-logo{font-family:'Bangers',cursive;font-size:2.6rem;letter-spacing:4px;color:var(--yellow);text-decoration:none;display:inline-block;margin-bottom:26px;}
.brand-logo span{color:var(--red);}
.brand-title{font-family:'Bangers',cursive;font-size:clamp(2.4rem,4vw,3.6rem);letter-spacing:3px;line-height:.95;
  text-shadow:4px 4px 0 var(--green-dark), 7px 7px 0 rgba(0,0,0,.35);margin-bottom:14px;}
.brand-sub{font-family:'Permanent Marker',cursive;font-size:1.05rem;color:var(--yellow);
  background:rgba(0,0,0,.35);border:2px solid var(--yellow);display:inline-block;padding:8px 16px;margin-bottom:26px;}
.brand-art{width:100%;max-width:640px;display:block;align-self:center;margin:auto auto 26px;filter:drop-shadow(6px 8px 0 rgba(0,0,0,.28));}
.brand-points{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:auto;width:100%;max-width:68%;}
.brand-points li{font-size:.98rem;font-weight:700;line-height:1.5;display:flex;gap:10px;align-items:flex-start;}
.brand-points b{font-family:'Bangers',cursive;letter-spacing:1px;font-weight:400;font-size:1.1rem;color:var(--yellow);}
.brand-float{position:absolute;font-size:5rem;opacity:.18;animation:float 6s ease-in-out infinite;}
.brand-float:nth-of-type(1){top:8%;left:6%;}
.brand-float:nth-of-type(2){bottom:10%;right:8%;font-size:6.5rem;animation-delay:2.5s;}
@keyframes float{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-20px) rotate(5deg)}}

/* the KC mark beside the wordmark */
.brand-head{display:flex;align-items:center;gap:12px;margin-bottom:26px;}
.brand-head .kc{width:52px;height:52px;flex:none;border:3px solid var(--ink);
  box-shadow:4px 4px 0 rgba(0,0,0,.35);display:block;}
.brand-head .brand-logo{margin-bottom:0;}

/* books and plant from the kid desk, tucked into the bottom corner */
.brand-books{position:absolute;right:22px;bottom:64px;width:200px;z-index:1;opacity:.95;
  filter:drop-shadow(5px 6px 0 rgba(0,0,0,.28));pointer-events:none;}
.brand-note{position:absolute;right:34px;bottom:214px;width:140px;z-index:1;
  background:#FFF3B0;color:var(--ink);padding:12px 14px;transform:rotate(-8deg);
  font-family:'Permanent Marker',cursive;font-size:.86rem;line-height:1.2;
  box-shadow:3px 4px 0 rgba(0,0,0,.25);pointer-events:none;}

/* the moving subject stripe from the homepage, stood on its end between the
   two halves: same track, scrolling down instead of across */
.brand-strip{background:var(--yellow);border-left:3px solid var(--ink);border-right:3px solid var(--ink);
  overflow:hidden;position:relative;width:40px;}
.strip-track{position:absolute;top:0;left:0;right:0;display:flex;flex-direction:column;
  animation:marquee 30s linear infinite;}
.strip-item{font-family:'Bangers',cursive;font-size:.86rem;letter-spacing:1.5px;color:var(--ink);
  writing-mode:vertical-rl;padding:10px 0;border-bottom:3px solid var(--ink);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;}
.strip-item span{margin-bottom:5px;font-size:.8rem;writing-mode:horizontal-tb;}
@keyframes marquee{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media(prefers-reduced-motion:reduce){.strip-track{animation:none;}}

/* ── RIGHT: the form half ───────────────────────────────────────────── */
.form-side{
  display:flex;align-items:center;justify-content:center;padding:48px 40px;
  background:var(--paper);
  background-image:radial-gradient(circle,#e2e0d2 1px,transparent 1px);background-size:26px 26px;
}

/* ── the card ───────────────────────────────────────────────────────── */
.card{width:100%;max-width:clamp(360px,26vw,460px);background:#fff;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:24px 24px;}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:20px;border:2.5px solid var(--ink);}
.tab{font-family:'Bangers',cursive;font-size:.92rem;letter-spacing:1px;padding:9px 6px;white-space:nowrap;background:var(--paper);
  border:none;cursor:pointer;color:var(--ink);transition:background .15s;text-decoration:none;text-align:center;}
.tab+.tab{border-left:2.5px solid var(--ink);}
.tab[aria-selected="true"]{background:var(--ink);color:var(--yellow);}
h1{font-family:'Bangers',cursive;font-size:1.7rem;letter-spacing:2px;line-height:1;margin-bottom:6px;}
.lede{font-size:.84rem;font-weight:700;opacity:.7;margin-bottom:18px;}
label{display:block;font-family:'Bangers',cursive;font-size:.78rem;letter-spacing:1.5px;margin:0 0 5px;}
.field{margin-bottom:13px;}
input{width:100%;font-family:'Comic Neue',cursive;font-size:.92rem;font-weight:700;padding:9px 12px;
  border:2.5px solid var(--ink);background:var(--paper);}
input:focus{outline:none;background:#fff;box-shadow:3px 3px 0 var(--yellow);}
.row{display:flex;justify-content:space-between;align-items:center;margin:-6px 0 18px;}
.row a{font-size:.82rem;font-weight:700;color:var(--green);}
.btn{width:100%;font-family:'Bangers',cursive;font-size:1.08rem;letter-spacing:2px;padding:10px;
  border:3px solid var(--ink);cursor:pointer;transition:transform .15s,box-shadow .15s;display:flex;
  align-items:center;justify-content:center;gap:9px;text-decoration:none;}
.btn-go{background:var(--green);color:#fff;box-shadow:5px 5px 0 var(--ink);}
.btn-go:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink);}
.btn-white{background:#fff;color:var(--ink);box-shadow:4px 4px 0 var(--ink);margin-top:4px;font-size:.95rem;}
.btn-white:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--yellow);}
.or{display:flex;align-items:center;gap:12px;margin:14px 0;font-family:'Bangers',cursive;font-size:.75rem;letter-spacing:2px;opacity:.55;}
.or::before,.or::after{content:'';flex:1;height:2px;background:var(--ink);opacity:.25;}
.kidbox{margin-top:16px;border:2.5px dashed var(--ink);background:#fff9e0;padding:10px 12px;font-size:.8rem;font-weight:700;}
.kidbox a{color:var(--green);}
.tiny{margin-top:13px;font-size:.71rem;font-weight:700;opacity:.6;line-height:1.5;}
.pane[hidden]{display:none;}

@media(max-width:900px){
  .brand-points{max-width:100%;}
  .split{grid-template-columns:1fr;}
  .brand-strip{width:auto;border:none;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);}
  .strip-track{position:static;flex-direction:row;animation:marqueeX 25s linear infinite;}
  .strip-item{writing-mode:horizontal-tb;padding:9px 18px;border-bottom:none;border-right:3px solid var(--ink);}
  .strip-item span{margin:0 7px 0 0;}
  @keyframes marqueeX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .brand{padding:34px 26px 30px;}
  .brand-books,.brand-note{display:none;}
  .brand-art{max-width:230px;margin-bottom:18px;}
  .brand-points{display:none;}
  .form-side{padding:30px 20px 50px;}
}

/* ── Fit a short screen ──────────────────────────────────────────────
   The roomy sizes above are kept for tall windows. On a short one every
   element gets smaller together: type, the tab bar, field spacing and the
   art. Nothing is ever hidden. ─────────────────────────────────────── */
@media(min-width:901px) and (max-height:960px){
  .brand{padding:30px 46px;}
  .brand-logo{font-size:2.1rem;margin-bottom:16px;}
  .brand-title{font-size:clamp(1.9rem,3vw,2.7rem);margin-bottom:11px;}
  .brand-sub{font-size:.92rem;padding:6px 14px;margin-bottom:16px;}
  .brand-art{max-width:min(530px,56vh);margin-bottom:16px;}
  .brand-points{gap:7px;}
  .brand-points li{font-size:.88rem;line-height:1.4;}
  .brand-points b{font-size:1rem;}
  .brand-head{gap:10px;margin-bottom:16px;}
  .brand-head .kc{width:44px;height:44px;}
  .brand-books{width:165px;bottom:58px;right:18px;}
  .brand-note{width:124px;right:28px;bottom:184px;font-size:.78rem;padding:10px 12px;}
  .strip-item{font-size:.8rem;padding:8px 0;}

  .form-side{padding:28px 34px;}
  .card{max-width:355px;padding:17px 19px;}
  .tabs{margin-bottom:16px;}
  .tab{font-size:.84rem;letter-spacing:.8px;padding:8px 4px;white-space:nowrap;}
  h1{font-size:1.42rem;}
  .lede{font-size:.79rem;margin-bottom:12px;}
  label{font-size:.73rem;margin-bottom:4px;}
  .field{margin-bottom:10px;}
  input{font-size:.88rem;padding:8px 11px;}
  .row{margin:-2px 0 12px;}
  .btn{font-size:1rem;padding:9px;}
  .btn-white{font-size:.9rem;}
  .or{margin:12px 0;}
  .kidbox{margin-top:12px;padding:9px 11px;font-size:.77rem;}
  .tiny{margin-top:10px;font-size:.68rem;}
  .humancheck{padding:9px 11px;margin-bottom:11px;}
  .hc-box{font-size:.86rem;}
  .hc-why{font-size:.68rem;margin-top:3px;}
}

@media(min-width:901px) and (max-height:780px){
  .brand{padding:22px 40px;}
  .brand-logo{font-size:1.85rem;margin-bottom:12px;}
  .brand-title{font-size:clamp(1.7rem,2.5vw,2.2rem);}
  .brand-art{max-width:min(430px,50vh);margin-bottom:12px;}
  .brand-points li{font-size:.83rem;}
  .brand-head .kc{width:38px;height:38px;}
  .brand-books{width:120px;}
  .brand-note{display:none;}
  .card{padding:16px 20px;}
  .tab{font-size:.88rem;letter-spacing:.5px;padding:7px 4px;white-space:nowrap;}
  h1{font-size:1.45rem;}
  .field{margin-bottom:9px;}
  input{padding:8px 11px;}
  .btn{font-size:1.02rem;padding:9px;}
}

/* ── Phones ──────────────────────────────────────────────────────────
   The 900px block above stacks the halves correctly but two things still
   overflowed a 390px screen: the card (380px wide inside 20px of side
   padding = 420px), and the brand wordmark/headline, which kept their
   desktop type sizes. Both are fluid here. Desktop is untouched. */
@media(max-width:480px){
  .form-side{padding:26px 16px 44px;}
  .card{max-width:100%;padding:20px 16px;}
  .tab{font-size:.82rem;letter-spacing:.5px;padding:9px 4px;}

  .brand{padding:26px 18px 24px;}
  .brand-head{gap:10px;margin-bottom:20px;}
  .brand-head .kc{width:40px;height:40px;}
  .brand-logo{font-size:clamp(1.6rem,7.5vw,2.4rem);letter-spacing:2px;}
  .brand-title{font-size:clamp(1.9rem,8.5vw,2.8rem);letter-spacing:2px;
    text-shadow:3px 3px 0 var(--green-dark), 5px 5px 0 rgba(0,0,0,.35);}
  .brand-sub{font-size:.88rem;padding:7px 12px;margin-bottom:20px;}
  .brand-art{max-width:200px;}
}

/* KnowComic — V2 overrides, loaded AFTER auth-demo.css.
   Only the right half changes: the plain cream/dots panel becomes a drawn
   comic scene (moonlit mountain, ocean, old tree fern, a wading sauropod)
   sitting behind the login card. The left brand half is untouched. */

.form-side{
  position:relative;
  background:#2B1B54;              /* matches the top of the scene while it loads */
  background-image:none;           /* drop V1's dot grid, the scene replaces it */
  overflow:hidden;
}
.scene{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:0;pointer-events:none;user-select:none;
}
/* a soft dark wash so the white card reads cleanly over the art */
.form-side::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(26,10,46,.30) 0%, rgba(26,10,46,.10) 55%, rgba(26,10,46,.34) 100%);
}
.card{position:relative;z-index:2;box-shadow:10px 10px 0 var(--ink);}

/* the demo footnote sits on dark art on this version */
.form-side .tiny{opacity:.75;}

/* ── left half: the kid-dashboard footer doodles, scattered on the board ──
   Same SVG paths as kids/dashboard.php, so the hand stays consistent. */
.kcdoodle{position:absolute;z-index:1;opacity:.32;pointer-events:none;user-select:none;}
.d-plane {top:6%;  right:6%;  width:170px;transform:rotate(-6deg);}
.d-planet{top:34%;  right:5%;  width:104px;transform:rotate(7deg);}
.d-plane2{bottom:24%;left:1%;  width:140px;transform:rotate(168deg);opacity:.22;}
@media(max-width:900px){ .d-planet,.d-plane2{display:none;} .d-plane{width:120px;opacity:.18;} }

/* ── right half ──────────────────────────────────────────────────────
   The art is square and the panel is portrait, so `cover` trims the sides;
   anchoring right keeps the whole dinosaur in frame. The card is CENTRED in
   the panel (user's call 2026-09-15) -- an earlier build nudged it left to
   clear the dinosaur's face, which read as misaligned. */
.scene{object-position:right center;}
@media(max-width:900px){ .scene{object-position:center;} }

/* inline form error from /auth/login.php and /auth/register.php */
.kc-msg{margin:0 0 12px;padding:10px 12px;border:2.5px solid var(--red);background:#ffeceb;
  color:#8d1d17;font-size:.86rem;font-weight:700;line-height:1.4;}
.kc-msg[hidden]{display:none;}