/* PSA Study Tool - shared styles. Brand tokens mirror the Redox tools hub. */
:root{
  --black:#08080a; --dark:#0e0e12; --card:#13131a; --card2:#16161f; --border:#1f1f2a;
  --red:#b83235; --red-soft:#d0494c; --white:#ededf2; --muted:#7a7a8e; --soft:#b0b0c2;
  --good:#3f9b6d; --good-soft:#5cc08c; --warn:#cf9b34; --mem:#6f74d6; --trap:#cf5a4e;
  color-scheme:dark;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden;overflow-x:clip;max-width:100%;}
body{background:var(--black);color:var(--white);font-family:'Georgia','Times New Roman',serif;line-height:1.7;-webkit-text-size-adjust:100%;}
a{color:inherit;}
.sans{font-family:'Arial',sans-serif;}

/* nav (mirrors tools hub) */
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:rgba(8,8,10,0.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);}
.wordmark{font-family:'Arial',sans-serif;font-size:13px;font-weight:800;letter-spacing:0.2em;text-transform:uppercase;color:var(--white);text-decoration:none;display:flex;align-items:center;gap:10px;}
.wordmark img{height:30px;width:auto;}
.wordmark .sub{color:var(--muted);font-weight:600;letter-spacing:0.14em;}
.nav-right{display:flex;align-items:center;gap:26px;}
.nav-link{font-family:'Arial',sans-serif;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s;}
.nav-link:hover,.nav-link.active{color:var(--white);}
.nav-link.active{color:var(--red);}

.parent-link{position:fixed;top:78px;right:40px;z-index:90;font-family:'Arial',sans-serif;font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);background:rgba(8,8,10,0.85);backdrop-filter:blur(10px);padding:7px 12px;border:1px solid var(--border);}
.parent-link a{color:var(--muted);text-decoration:none;border-bottom:1px dotted #3a3a4a;}
.parent-link a:hover{color:var(--white);}

/* layout */
.wrap{max-width:1040px;margin:0 auto;padding:0 40px;}
.hero{padding:132px 40px 44px;border-bottom:1px solid var(--border);position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 72% 50%,rgba(184,50,53,0.05) 0%,transparent 70%);pointer-events:none;}
.hero-inner{position:relative;z-index:1;max-width:880px;margin:0 auto;}
.eyebrow{font-family:'Arial',sans-serif;font-size:10px;letter-spacing:0.26em;text-transform:uppercase;color:var(--red);margin-bottom:18px;display:block;}
.hero h1{font-size:clamp(28px,4.6vw,50px);font-weight:400;line-height:1.06;letter-spacing:-0.02em;margin-bottom:20px;}
.hero-sub{font-family:'Arial',sans-serif;font-size:15px;line-height:1.8;color:var(--muted);max-width:640px;}
.back-link{display:inline-flex;align-items:center;gap:8px;font-family:'Arial',sans-serif;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);text-decoration:none;margin-bottom:30px;}
.back-link::before{content:'<';margin-right:2px;}
.back-link:hover{color:var(--white);}
.sec{padding:54px 40px;}
.label{font-family:'Arial',sans-serif;font-size:10px;letter-spacing:0.26em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:22px;}

/* buttons */
.btn{font-family:'Arial',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--soft);background:var(--card);border:1px solid var(--border);padding:12px 20px;border-radius:2px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:border-color .2s,color .2s,background .2s;}
.btn:hover{border-color:var(--red);color:var(--white);}
.btn-primary{border-color:var(--red);color:var(--white);background:rgba(184,50,53,0.12);}
.btn-primary:hover{background:var(--red);}
.btn-ghost{background:transparent;}
.btn:disabled{opacity:0.4;cursor:not-allowed;}

/* home: study mode cards */
.study-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:920px;margin:0 auto;}
a.study-card{display:flex;flex-direction:column;border:1px solid var(--border);background:var(--card);padding:28px 26px;text-decoration:none;color:inherit;transition:border-color .25s,transform .25s;}
a.study-card:hover{border-color:var(--red);transform:translateY(-3px);}
.study-card .tag{font-family:'Arial',sans-serif;font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:var(--red);margin-bottom:14px;}
.study-card h3{font-size:20px;font-weight:400;margin-bottom:10px;}
.study-card p{font-family:'Arial',sans-serif;font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:18px;}
.study-card .meta{font-family:'Arial',sans-serif;font-size:10px;letter-spacing:0.1em;color:var(--soft);margin-top:auto;}
.study-card.soon{opacity:0.55;pointer-events:none;}

/* mode toggle (HIGH/LOW) */
.modebar{display:flex;align-items:center;gap:14px;justify-content:center;margin:0 auto 40px;font-family:'Arial',sans-serif;}
.modeswitch{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;}
.modeswitch button{font-family:'Arial',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);background:transparent;border:0;padding:9px 20px;cursor:pointer;transition:color .2s,background .2s;}
.modeswitch button.on{color:var(--white);background:var(--red);}
.modebar .hint{font-size:11px;color:var(--muted);}

/* stat chips */
.stats{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;font-family:'Arial',sans-serif;margin-top:8px;}
.stat{border:1px solid var(--border);background:var(--card);padding:14px 20px;min-width:120px;text-align:center;}
.stat .n{font-size:24px;color:var(--white);}
.stat .k{font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-top:4px;}

/* disclaimer */
.disclaimer{font-family:'Arial',sans-serif;font-size:11px;line-height:1.7;color:var(--muted);background:var(--card);border:1px solid var(--border);border-left:2px solid var(--warn);padding:16px 18px;max-width:880px;margin:0 auto;}
.disclaimer strong{color:var(--soft);}

/* footer */
footer{border-top:1px solid var(--border);background:var(--dark);padding:30px 40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:'Arial',sans-serif;}
.footer-mark{font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);}
.footer-copy{font-size:11px;color:var(--muted);}
.footer-copy a{color:var(--muted);text-decoration:none;border-bottom:1px solid #2a2a3a;}

/* ============ reader ============ */
.reader{font-size:16px;line-height:1.7;color:var(--soft);}
.reader h1,.reader h2,.reader h3,.reader h4{font-family:'Arial',sans-serif;color:var(--white);line-height:1.2;scroll-margin-top:84px;}
.reader h1{font-size:26px;font-weight:800;letter-spacing:-0.01em;margin:8px 0 18px;}
.reader h2{font-size:21px;font-weight:700;margin:38px 0 14px;padding-top:18px;border-top:1px solid var(--border);}
.reader h3{font-size:16px;font-weight:700;letter-spacing:0.02em;margin:26px 0 10px;color:var(--red-soft);}
.reader h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;margin:20px 0 8px;color:var(--muted);}
.reader p{margin:0 0 14px;}
.reader ul,.reader ol{margin:0 0 16px;padding-left:22px;}
.reader li{margin:0 0 7px;}
.reader strong{color:var(--white);}
.reader a{color:var(--red-soft);text-decoration:none;border-bottom:1px solid #43232a;}
.reader code{font-family:'SFMono-Regular',Consolas,monospace;font-size:0.88em;background:#1c1c26;border:1px solid var(--border);border-radius:3px;padding:1px 5px;color:var(--soft);}
.reader hr{border:0;border-top:1px solid var(--border);margin:28px 0;}

/* [MEM] / [TRAP] chips + callout rows */
.mk{font-family:'Arial',sans-serif;font-size:0.72em;font-weight:700;letter-spacing:0.06em;padding:1px 6px;border-radius:3px;white-space:nowrap;vertical-align:middle;}
.mk-mem{background:rgba(111,116,214,0.16);color:#a9adef;border:1px solid rgba(111,116,214,0.4);}
.mk-trap{background:rgba(207,90,78,0.16);color:#e7a59c;border:1px solid rgba(207,90,78,0.45);}
li.li-mem,li.li-trap{list-style:none;margin-left:-22px;padding:6px 10px 6px 14px;border-left:2px solid;border-radius:2px;}
li.li-mem{border-color:var(--mem);background:rgba(111,116,214,0.06);}
li.li-trap{border-color:var(--trap);background:rgba(207,90,78,0.06);}

/* tables (load-bearing - preserve, scroll on mobile) */
.tbl-wrap{overflow-x:auto;margin:0 0 18px;border:1px solid var(--border);}
.reader table{border-collapse:collapse;width:100%;font-family:'Arial',sans-serif;font-size:13px;min-width:480px;}
.reader th,.reader td{border:1px solid var(--border);padding:8px 12px;text-align:left;vertical-align:top;}
.reader thead th{background:var(--card2);color:var(--white);font-weight:700;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;}
.reader tbody tr:nth-child(even){background:rgba(255,255,255,0.015);}

/* reader shell: sidebar outline + content */
.reader-shell{display:grid;grid-template-columns:268px 1fr;gap:34px;max-width:1180px;margin:0 auto;padding:104px 40px 60px;}
.outline{position:sticky;top:84px;align-self:start;max-height:calc(100vh - 104px);overflow-y:auto;font-family:'Arial',sans-serif;font-size:12px;border-right:1px solid var(--border);padding-right:14px;}
.outline a{display:block;color:var(--muted);text-decoration:none;padding:4px 0;line-height:1.4;border:0;}
.outline a:hover,.outline a.active{color:var(--white);}
.outline a.lvl2{padding-left:12px;font-size:11px;}
.outline a.lvl3{padding-left:24px;font-size:11px;color:#62626f;}
.outline .cnt{color:var(--mem);font-size:9px;}

/* ============ flashcard surface (engine builds on this next) ============ */
.card-stage{max-width:640px;margin:0 auto;}
.flashcard{background:var(--card);border:1px solid var(--border);border-radius:4px;padding:34px 30px;min-height:240px;display:flex;flex-direction:column;}
.flashcard .fc-top{display:flex;justify-content:space-between;align-items:center;font-family:'Arial',sans-serif;font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);margin-bottom:20px;}
.flashcard .fc-front{font-size:20px;line-height:1.5;}
.flashcard .fc-back{font-size:16px;line-height:1.6;color:var(--soft);border-top:1px solid var(--border);margin-top:20px;padding-top:18px;}
.flashcard .fc-src{font-family:'Arial',sans-serif;font-size:11px;color:var(--muted);margin-top:14px;}
.grade-row{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap;}

/* loading / empty */
.loading{text-align:center;color:var(--muted);font-family:'Arial',sans-serif;font-size:13px;padding:60px 20px;}

/* ============ mobile ============ */
@media (max-width:900px){
  nav{padding:0 20px;}
  .nav-link{display:none;}
  .parent-link{top:70px;right:20px;}
  .hero{padding:104px 20px 38px;}
  .sec{padding:44px 20px;}
  .wrap{padding:0 20px;}
  .study-grid{grid-template-columns:1fr;}
  .reader-shell{grid-template-columns:1fr;padding:92px 20px 50px;gap:18px;}
  .outline{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--border);padding-bottom:14px;margin-bottom:6px;}
  footer{flex-direction:column;text-align:center;}
}
/* keep inputs >=16px so iOS Safari never auto-zooms (PATTERNS.md mobile rule) */
input,select,textarea,button{font-size:16px;}