/* The Frontier Is Everywhere — Flashcards CSS */
/* Scoped under #frontier-fc-app */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#0f1117;--surface:#1a1d27;--border:#2e3345;--text:#e8e9ed;--text2:#c8cad2;--muted:#8b8fa3;--dim:#555;
  --red:#f87171;--blue:#60a5fa;--green:#4ade80;--purple:#a78bfa;--orange:#f0a050;--teal:#34d399;--sky:#38bdf8;
  --tangerine:#fb923c;--pink:#f472b6;--fuchsia:#e879f9;--lavender:#c084fc;
  --font:'DM Sans',sans-serif;--mono:'JetBrains Mono',monospace;
  --max:900px;
}
html{font-size:16px;}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;-webkit-tap-highlight-color:transparent;}

/* Layout */
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px;}
@media(min-width:640px){.wrap{padding:0 20px;}}

/* Header */
.header{padding:20px 0 0;}
.header .kicker{font-family:var(--mono);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--dim);margin-bottom:4px;}
.header h1{font-size:26px;font-weight:700;letter-spacing:-0.5px;line-height:1.2;margin-bottom:4px;}
.header .epigraph{font-size:12px;color:var(--muted);font-style:italic;line-height:1.5;margin-bottom:14px;max-width:560px;}
.header .week-info{font-size:13px;color:var(--muted);margin-bottom:14px;}
@media(min-width:640px){.header h1{font-size:28px;}}

/* Filter rows — horizontal scroll */
.filter-row{display:flex;align-items:center;gap:6px;padding:4px 0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}
.filter-row::-webkit-scrollbar{display:none;}
.filter-row .label{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-right:4px;flex-shrink:0;}
.filter-sep{width:1px;height:18px;background:var(--border);margin:0 4px;flex-shrink:0;}

/* Tabs */
.tab{padding:7px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted);
  cursor:pointer;font-family:var(--font);font-size:11px;font-weight:400;white-space:nowrap;transition:all .15s;flex-shrink:0;
  -webkit-appearance:none;appearance:none;outline:none;min-height:34px;}
.tab.active{font-weight:600;}
@media(min-width:640px){.tab{font-size:12px;padding:7px 14px;}}

/* Stats bar */
.stats{display:flex;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--muted);padding:8px 0 4px;}
.stats .s-green{color:var(--green);}
.stats .s-orange{color:var(--orange);}

/* Instructions */
.instructions{display:none;gap:16px;flex-wrap:wrap;padding:8px 14px;border-radius:8px;background:rgba(26,29,39,.5);border:1px solid rgba(46,51,69,.4);font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:0.5px;margin:4px 0 12px;}
.instructions .hl{color:var(--muted);}
@media(min-width:640px){.instructions{display:flex;}}

/* Mobile instructions */
.instructions-mobile{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:8px 14px;border-radius:8px;background:rgba(26,29,39,.5);border:1px solid rgba(46,51,69,.4);font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:0.5px;margin:4px 0 12px;}
.instructions-mobile .hl{color:var(--muted);}
@media(min-width:640px){.instructions-mobile{display:none;}}

/* Card */
.card-container{position:relative;background:var(--surface);border-radius:16px;min-height:220px;cursor:pointer;overflow:hidden;transition:border-color .15s,box-shadow .15s;border:1px solid var(--border);touch-action:pan-y;}
.card-container:hover{box-shadow:0 4px 24px rgba(96,165,250,.08);}
.card-badges{padding:14px 20px 0;display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
@media(min-width:640px){.card-badges{padding:16px 24px 0;gap:8px;}}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;font-size:10px;font-weight:600;letter-spacing:0.3px;}
@media(min-width:640px){.badge{font-size:11px;padding:3px 10px;}}
.badge-right{margin-left:auto;}
.card-body{padding:20px 20px 16px;}
@media(min-width:640px){.card-body{padding:28px 28px 20px;}}
.card-front{font-size:16px;font-weight:500;line-height:1.55;color:var(--text);}
@media(min-width:640px){.card-front{font-size:18px;}}
.card-back{font-size:14px;line-height:1.7;color:var(--text2);}
@media(min-width:640px){.card-back{font-size:15px;}}
.card-source{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:14px;padding-top:10px;border-top:1px solid var(--border);letter-spacing:0.5px;}
.flip-hint{position:absolute;bottom:10px;right:14px;font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:1px;}

/* Navigation */
.nav-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;}
.nav-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-family:var(--font);font-size:13px;transition:all .15s;min-height:44px;min-width:44px;-webkit-appearance:none;appearance:none;outline:none;}
.nav-btn:active{background:rgba(255,255,255,.05);}
.nav-counter{font-family:var(--mono);font-size:12px;color:var(--muted);}

/* Rating buttons */
.rating-row{display:flex;gap:6px;justify-content:center;padding:4px 0 0;}
.rate-btn{flex:1;padding:12px 8px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;transition:all .15s;max-width:120px;min-height:44px;-webkit-appearance:none;appearance:none;outline:none;}
.rate-btn:active{transform:scale(.96);}

/* Empty state */
.empty{text-align:center;padding:60px 20px;color:var(--muted);font-size:14px;}

/* Swipe indicator — brief flash on swipe */
.swipe-indicator{position:absolute;top:50%;transform:translateY(-50%);font-size:28px;color:rgba(255,255,255,.15);pointer-events:none;transition:opacity .2s;opacity:0;z-index:10;}
.swipe-indicator.left{left:16px;}
.swipe-indicator.right{right:16px;}
.swipe-indicator.show{opacity:1;}

/* Card flip animation */
.card-container.flip-anim{animation:flipPulse .15s ease;}
@keyframes flipPulse{0%{transform:scale(1)}50%{transform:scale(.98)}100%{transform:scale(1)}}