/* ============================================================
   CortovaAlert — Design System
   Human Trafficking Awareness · Dark-navy compliance aesthetic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* surfaces */
  --bg-base:#03070f;
  --bg-900:#050b16;
  --bg-800:#081326;
  --bg-700:#0a1a30;
  --panel:#0a1830;
  --panel-2:#0d2138;
  --panel-3:#102844;
  --line:rgba(86,167,255,.16);
  --line-soft:rgba(86,167,255,.09);
  --line-strong:rgba(86,167,255,.34);

  /* brand blue */
  --blue:#2ea9ff;
  --blue-bright:#5cc6ff;
  --blue-deep:#1f6bff;
  --cyan:#37d6e0;
  --blue-grad:linear-gradient(100deg,#1f6bff 0%,#2ea9ff 48%,#37d6e0 100%);
  --blue-glow:rgba(46,169,255,.45);

  /* texas red */
  --tx-red:#e23744;
  --tx-red-2:#b5202c;

  /* see / say / act coding */
  --see:#2ea9ff;     /* recognize  */
  --say:#f5a524;     /* report     */
  --act:#22c98b;     /* respond    */
  --alert:#ff5a5f;   /* danger/hotline */

  /* text */
  --text:#eaf3ff;
  --text-2:#b8ccdf;
  --muted:#7e95ad;
  --dim:#587396;

  /* fx */
  --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px;
  --shadow:0 18px 50px -22px rgba(0,0,0,.85);
  --glow:0 0 0 1px rgba(46,169,255,.25),0 0 34px -6px rgba(46,169,255,.35);

  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 78% -8%,rgba(31,107,255,.18),transparent 60%),
    radial-gradient(900px 600px at 8% 110%,rgba(55,214,224,.10),transparent 55%),
    var(--bg-base);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
::selection{background:rgba(46,169,255,.32);color:#fff}

h1,h2,h3,h4,.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
.mono{font-family:var(--font-mono)}

button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit}
a{color:inherit;text-decoration:none}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(86,167,255,.22);border-radius:20px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(86,167,255,.4);background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- logo ---------- */
.logo{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;display:inline-flex;align-items:baseline;line-height:1;white-space:nowrap}
.logo .lo-cortova{color:var(--cyan);text-shadow:0 0 22px rgba(55,214,224,.65)}
.logo .lo-alert{color:var(--text);text-shadow:0 0 22px rgba(234,243,255,.45);padding-left:.04em}

/* ---------- panels ---------- */
.panel{
  background:linear-gradient(180deg,rgba(13,33,56,.92),rgba(8,19,38,.92));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.panel-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.panel-title{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}

.eyebrow{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-bright)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:14px;
  padding:12px 20px;border-radius:12px;transition:.16s ease;border:1px solid transparent;white-space:nowrap}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn-primary{background:var(--blue-grad);color:#001226;box-shadow:0 10px 26px -10px var(--blue-glow)}
.btn-primary:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ghost{background:rgba(86,167,255,.08);border-color:var(--line);color:var(--text)}
.btn-ghost:not(:disabled):hover{background:rgba(86,167,255,.16);border-color:var(--line-strong)}
.btn-act{background:linear-gradient(100deg,#16a36b,#22c98b);color:#02160e;box-shadow:0 10px 26px -12px rgba(34,201,139,.6)}
.btn-act:not(:disabled):hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-danger{background:linear-gradient(100deg,#e23744,#ff6a5f);color:#fff}
.btn-sm{padding:8px 14px;font-size:12.5px;border-radius:10px}
.btn-lg{padding:15px 26px;font-size:15px}

/* ---------- chips / pills ---------- */
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;border:1px solid var(--line)}
.pill-blue{color:var(--blue-bright);background:rgba(46,169,255,.1);border-color:rgba(46,169,255,.3)}
.pill-see{color:var(--see);background:rgba(46,169,255,.1);border-color:rgba(46,169,255,.3)}
.pill-say{color:var(--say);background:rgba(245,165,36,.1);border-color:rgba(245,165,36,.32)}
.pill-act{color:var(--act);background:rgba(34,201,139,.1);border-color:rgba(34,201,139,.32)}
.pill-red{color:#ff8b93;background:rgba(226,55,68,.12);border-color:rgba(226,55,68,.34)}
.pill-lock{color:var(--muted);background:rgba(126,149,173,.08);border-color:rgba(126,149,173,.22)}

/* ---------- placeholders (Gemini / image) ---------- */
.ph{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.ph-stripes{
  background-image:repeating-linear-gradient(135deg,rgba(46,169,255,.07) 0,rgba(46,169,255,.07) 12px,transparent 12px,transparent 24px);
  background-color:rgba(8,19,38,.7);
}
.ph-img{background-image:repeating-linear-gradient(135deg,rgba(126,149,173,.09) 0,rgba(126,149,173,.09) 11px,transparent 11px,transparent 22px);
  background-color:rgba(8,19,38,.6)}
.ph-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;color:var(--muted)}

/* gemini badge */
.gem-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:8px;color:#cdb8ff;
  background:linear-gradient(100deg,rgba(124,77,255,.22),rgba(46,169,255,.18));border:1px solid rgba(150,110,255,.42)}

/* ---------- progress ---------- */
.bar{height:7px;border-radius:999px;background:rgba(126,149,173,.16);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1f6bff,#2ea9ff 60%,#37d6e0);box-shadow:0 0 12px rgba(46,169,255,.6)}

/* ---------- texas glyph helper ---------- */
.tx-flag-fill{}

/* ---------- inputs ---------- */
.field{width:100%;background:rgba(4,10,20,.72);border:1px solid var(--line);border-radius:11px;color:var(--text);
  padding:13px 15px;font-size:14.5px;transition:.15s}
.field:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,169,255,.18)}
.field::placeholder{color:var(--dim)}
label.lbl{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--text-2);margin-bottom:7px;text-transform:uppercase}

/* ---------- utility ---------- */
.row{display:flex;align-items:center}
.col{display:flex;flex-direction:column}
.gap6{gap:6px}.gap8{gap:8px}.gap9{gap:9px}.gap10{gap:10px}.gap11{gap:11px}.gap12{gap:12px}.gap16{gap:16px}.gap20{gap:20px}.gap22{gap:22px}.gap24{gap:24px}

/* section divider header inside a module body */
.sec-head{padding-top:20px;border-top:1px solid var(--line-soft);margin-top:2px}
.sec-head:first-child{padding-top:0;border-top:none;margin-top:0}
.grow{flex:1}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.t2{color:var(--text-2)}
.center{align-items:center}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}

/* fade/slide */
@keyframes fadeUp{from{transform:translateY(14px)}to{transform:none}}
@keyframes fadeIn{from{transform:translateY(6px)}to{transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(46,169,255,.5)}50%{box-shadow:0 0 0 8px rgba(46,169,255,0)}}
@keyframes sweep{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}

/* ---- live captions + on-screen translation (player overlay) ---- */
.cc-cap{position:absolute;left:50%;transform:translateX(-50%);bottom:62px;max-width:86%;width:fit-content;text-align:center;z-index:5;
  background:rgba(8,20,40,.62);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 18px 40px -18px rgba(0,0,0,.6);
  color:#f2f8ff;font-size:18px;font-weight:600;line-height:1.34;padding:9px 18px;border-radius:13px;animation:fadeIn .18s ease}
.cc-cap.rtl{direction:rtl}
.cc-status{position:absolute;left:50%;transform:translateX(-50%);bottom:118px;z-index:6;font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--blue-bright);background:rgba(2,6,12,.72);border:1px solid var(--line);padding:5px 12px;border-radius:8px}
.cc-status.err{color:var(--alert);border-color:rgba(255,90,95,.4)}
.cc-scrim{position:absolute;inset:0;z-index:6}
.cc-ctl{position:absolute;right:12px;bottom:12px;z-index:7}
.cc-btn{display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:10px;border:1px solid var(--line-strong);
  background:rgba(2,6,12,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--text)}
.cc-btn:hover{background:rgba(2,6,12,.84)}
.cc-menu{position:absolute;right:0;bottom:46px;min-width:188px;max-height:320px;overflow:auto;padding:7px;border-radius:14px;
  background:rgba(8,18,34,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line-strong);box-shadow:0 24px 60px -20px rgba(0,0,0,.8)}
.cc-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 11px;border-radius:9px;color:var(--text-2);font-size:13.5px;font-weight:600;background:none;border:none;cursor:pointer}
.cc-item:hover{background:rgba(86,167,255,.12);color:var(--text)}
.cc-item.on{background:rgba(46,169,255,.16);color:var(--blue-bright)}
.video-stage:fullscreen .cc-cap{bottom:96px;font-size:26px}
.video-stage:-webkit-full-screen .cc-cap{bottom:96px;font-size:26px}
/* NOTE: no fill-mode — base state is visible so content never stays hidden
   if the animation is throttled/paused (e.g. background tab). */
.fade-up{animation:fadeUp .5s cubic-bezier(.2,.7,.3,1)}
.fade-in{animation:fadeIn .4s ease}
@media (prefers-reduced-motion:reduce){ .fade-up,.fade-in{animation:none} }

/* dotted blueprint backdrop for awareness icons */
.blueprint-bg{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(86,167,255,.12) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent)}

/* lock shimmer */
.locked{position:relative}
.locked::after{content:'';position:absolute;inset:0;background:rgba(4,8,15,.55);border-radius:inherit}

.scrim{position:fixed;inset:0;background:rgba(2,5,11,.74);backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;z-index:80;animation:fadeIn .2s ease}

hr.div{border:none;border-top:1px solid var(--line-soft);margin:0}

/* notes editor */
[contenteditable][data-ph]:empty:before{content:attr(data-ph);color:var(--dim);pointer-events:none}
[contenteditable]:focus{outline:none}
[contenteditable] ul{margin:6px 0;padding-left:22px}[contenteditable] b{color:#fff}

/* ============================================================
   DASHBOARD SHELL — fixed-height, no page scroll, responsive
   The course view locks the page; every region scrolls internally.
   Breakpoint ladder:
     ≥1400  full 4-col  [nav | modules | center | rail]
     1160–1400  3-col    [modules | center | rail]   (left nav hidden)
     900–1160   2-col    [modules | center]          (rail → drawer)
     <900       1-col    [center]                     (modules + rail → drawers)
   ============================================================ */

/* page lock — applied only while the course player is mounted */
body.course-mode{height:100dvh;overflow:hidden}

.app-shell{
  height:100vh; height:100dvh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  grid-template-columns:minmax(0,1fr);   /* never let content widen the grid past the viewport */
  overflow:hidden;
}

/* ---- top bar ---- */
.topbar{display:flex;align-items:center;gap:16px;padding:12px 18px;min-width:0;
  border-bottom:1px solid var(--line);background:rgba(5,11,22,.7);backdrop-filter:blur(8px);z-index:30}
.topbar .logo{white-space:nowrap}

/* ---- body grid (the four regions) ---- */
.app-body{
  display:grid;
  grid-template-columns:240px 296px minmax(0,1fr) 332px;
  gap:16px;
  padding:16px 22px 18px;
  min-height:0;            /* lets children shrink so they can scroll */
  overflow:hidden;
  max-width:2040px;
  width:100%;
  margin:0 auto;
}

/* generic internal-scroll region */
.col-scroll{min-height:0;height:100%;overflow-y:auto;overflow-x:hidden}
.col-scroll::-webkit-scrollbar{width:8px}

/* ---- left nav ---- */
.leftnav{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:2px}

/* ---- modules column ---- */
.modules-col{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.modules-col .modules-scroll{min-height:0;overflow-y:auto;overflow-x:hidden}

/* ---- center column: fixed head + scroll body + fixed footer ---- */
.center-col{display:flex;flex-direction:column;min-height:0;min-width:0}
.center-head{flex:none}
.center-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:2px 12px 6px 2px}
.center-foot{flex:none;padding-top:14px;margin-top:4px;border-top:1px solid var(--line-soft)}

/* ---- right rail ---- */
.rightrail-col{display:flex;flex-direction:column;gap:16px;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:2px}
.rightrail-col>*{flex-shrink:0}

/* ---- video stage (16:9, fullscreen-capable) ---- */
.video-stage{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 22px 60px -30px rgba(0,0,0,.9);aspect-ratio:16/9;background:#04101f}
.video-stage:fullscreen{border-radius:0;border:none;width:100vw;height:100vh;aspect-ratio:auto;background:#000}
.video-stage:fullscreen video{object-fit:contain}
.video-stage:-webkit-full-screen{border-radius:0;border:none;width:100vw;height:100vh;aspect-ratio:auto;background:#000}
.video-stage:-webkit-full-screen video{object-fit:contain}

/* ---- mobile toggle buttons (hidden on desktop) ---- */
.shell-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;flex:none;
  border-radius:11px;border:1px solid var(--line);background:rgba(86,167,255,.08);color:var(--text)}
.shell-toggle:hover{background:rgba(86,167,255,.16)}

/* ---- drawer mechanics (only active at small breakpoints) ---- */
.drawer-scrim{position:fixed;inset:0;background:rgba(2,5,11,.66);backdrop-filter:blur(5px);
  z-index:60;opacity:0;pointer-events:none;transition:opacity .2s ease}
.drawer-scrim.open{opacity:1;pointer-events:auto}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* tighten everything a touch on smaller desktops */
@media (max-width:1400px){
  .app-body{grid-template-columns:296px minmax(0,1fr) 320px;gap:14px;padding:14px 18px 16px}
  .leftnav{display:none}
}

/* tablet landscape — modules + center; rail becomes a right drawer */
@media (max-width:1160px){
  .app-body{grid-template-columns:288px minmax(0,1fr);gap:14px}
  .rightrail-col{position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);z-index:61;
    background:linear-gradient(180deg,var(--bg-900),var(--bg-base));border-left:1px solid var(--line);
    box-shadow:-24px 0 60px -20px rgba(0,0,0,.7);padding:18px 16px;gap:14px;
    transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.7,.3,1)}
  .rightrail-col.open{transform:none}
  .shell-toggle.rail-toggle{display:flex}
}

/* tablet portrait / phone — single column; modules + rail are drawers */
@media (max-width:900px){
  .app-body{grid-template-columns:minmax(0,1fr);padding:12px 12px 14px;gap:0}
  .modules-col{position:fixed;top:0;left:0;bottom:0;width:min(88vw,340px);z-index:61;
    background:linear-gradient(180deg,var(--bg-900),var(--bg-base));border-right:1px solid var(--line);
    box-shadow:24px 0 60px -20px rgba(0,0,0,.7);padding:16px 12px;
    transform:translateX(-100%);transition:transform .26s cubic-bezier(.2,.7,.3,1)}
  .modules-col.open{transform:none}
  .shell-toggle.mod-toggle{display:flex}
  .center-scroll{padding-right:2px}
}

/* topbar: drop control labels to icons, then hide progress, then trim controls */
@media (max-width:1024px){ .topctl-lbl{display:none} .topctl{padding:8px 11px} }
@media (max-width:680px){ .top-progress{display:none} }
@media (max-width:640px){
  .topbar{gap:10px;padding:10px 12px}
  .ctl-lang,.ctl-audio{display:none}        /* keep Definitions, hamburger, avatar, info */
  .logo{font-size:18px !important}
}

/* phone fine-tuning */
@media (max-width:560px){
  .app-body{padding:10px 10px 12px}
  .center-scroll{padding-right:0}
  .center-title{font-size:22px}
  .center-summary{font-size:13.5px}
  .center-foot{padding-top:11px}
  .center-foot .btn-lg{padding:12px 16px;font-size:13.5px}
  .center-foot .btn{flex:0 1 auto}
}

/* very short landscape phones: let the center breathe */
@media (max-height:520px) and (orientation:landscape){
  .app-body{padding:8px 12px}
}