/* EKAM Venture — Screening Test. Palette matched to the main site. */
:root{
  --navy-900:#04101F; --navy-800:#0A2A4E; --navy-600:#14508F;
  --teal-600:#0096B7; --teal-500:#00B4D8; --teal-400:#2ED0EC;
  --gold-600:#E08A00; --gold-500:#F5A623; --gold-400:#FFC845;
  --ink:#0E1725; --muted:#5C6B80; --line:#DFE5EC;
  --bg:#F4F7FA; --card:#FFFFFF;
  --ok:#0E9F6E; --warn:#D97706; --bad:#DC2626;
  --radius:12px; --shadow:0 1px 2px rgba(4,16,31,.06),0 8px 24px rgba(4,16,31,.07);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0 0 .5rem; line-height:1.2; letter-spacing:-.01em}
h1{font-size:1.5rem} h2{font-size:1.15rem} h3{font-size:1rem}
p{margin:0 0 .75rem}
a{color:var(--navy-600)}

/* ---------- shell ---------- */
.topbar{
  background:linear-gradient(100deg,var(--navy-900),var(--navy-800) 55%,var(--navy-600));
  color:#fff; padding:.7rem 1.1rem; display:flex; align-items:center;
  gap:1rem; flex-wrap:wrap; position:sticky; top:0; z-index:50;
  box-shadow:0 2px 12px rgba(4,16,31,.18);
}
/* ---------- real logos in the header ----------
   Both marks are dark artwork drawn for white paper, and the bar is navy, so each
   sits on its own white tile. Matched height, padding and radius keep the pair
   reading as one deliberate co-brand rather than two pasted images. */
.logo-tile{
  flex:none; display:grid; place-items:center; background:#fff;
  border-radius:9px; padding:5px 8px; box-shadow:0 1px 4px rgba(4,16,31,.22);
}
.logo-tile img{display:block; height:46px; width:auto}
.brand-drive{
  font-weight:750; font-size:.95rem; line-height:1.25; letter-spacing:.005em;
  min-width:0;   /* lets flex shrink it instead of shoving the co-brand off the bar */
}
.cobrand{margin-left:auto}
.spacer{flex:1}

.wrap{max-width:940px; margin:0 auto; padding:1.25rem 1rem 3rem}
.wrap.narrow{max-width:620px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
      box-shadow:var(--shadow); padding:1.35rem; margin-bottom:1rem}

/* ---------- forms ---------- */
label{display:block; font-weight:600; font-size:.83rem; margin:.85rem 0 .3rem; color:var(--navy-800)}
label .req{color:var(--bad)}
input,select,textarea{
  width:100%; padding:.62rem .75rem; border:1px solid var(--line); border-radius:9px;
  font:inherit; color:var(--ink); background:#fff;
}
input:focus,select:focus{outline:none; border-color:var(--teal-600); box-shadow:0 0 0 3px rgba(0,150,183,.14)}
.hint{font-size:.78rem; color:var(--muted); margin-top:.25rem}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.62rem 1.15rem; border-radius:9px; border:1px solid transparent;
  font:inherit; font-weight:650; cursor:pointer; transition:.15s;
}
.btn-primary{background:linear-gradient(135deg,var(--navy-600),var(--navy-800)); color:#fff}
.btn-primary:hover{filter:brightness(1.12)}
.btn-gold{background:linear-gradient(135deg,var(--gold-500),var(--gold-600)); color:#2A1A00}
.btn-gold:hover{filter:brightness(1.06)}
.btn-ghost{background:#fff; border-color:var(--line); color:var(--navy-800)}
.btn-ghost:hover{border-color:var(--navy-600)}
.btn:disabled{opacity:.45; cursor:not-allowed; filter:none}
.btn-row{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}

.msg{padding:.7rem .9rem; border-radius:9px; font-size:.87rem; margin:.75rem 0; display:none}
.msg.show{display:block}
.msg.err{background:#FEF2F2; color:#991B1B; border:1px solid #FECACA}
.msg.ok{background:#ECFDF5; color:#065F46; border:1px solid #A7F3D0}

/* ---------- timer + progress ---------- */
.timer{
  font-variant-numeric:tabular-nums; font-weight:800; font-size:1.05rem;
  background:rgba(255,255,255,.13); padding:.34rem .7rem; border-radius:8px;
  border:1px solid rgba(255,255,255,.2); letter-spacing:.02em;
}
.timer.warn{background:rgba(245,166,35,.22); border-color:var(--gold-500); color:var(--gold-400)}
.timer.danger{background:rgba(220,38,38,.25); border-color:#F87171; color:#FECACA;
              animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}
.progress-track{height:6px; background:var(--line); border-radius:99px; overflow:hidden; margin:.5rem 0}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--teal-600),var(--teal-400));
               width:0; transition:width .3s}

/* ---------- test layout ---------- */
.test-grid{display:grid; grid-template-columns:1fr 232px; gap:1rem; align-items:start}
@media(max-width:860px){.test-grid{grid-template-columns:1fr}}

.sectionbar{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.9rem}
.sectionbar button{
  font-family:inherit; font-size:.75rem; font-weight:700; padding:.3rem .7rem;
  border-radius:99px; background:#fff; border:1px solid var(--line); color:var(--muted);
  cursor:pointer; transition:.14s;
}
.sectionbar button:hover{ border-color:var(--teal-600); color:var(--navy-800) }
.sectionbar button:focus-visible{ outline:2px solid var(--teal-600); outline-offset:2px }
.sectionbar button.active{background:var(--navy-800); border-color:var(--navy-800); color:#fff}
.sectionbar button.active:hover{ filter:brightness(1.15) }
.sectionbar button.done{background:#E9F7F1; border-color:#A7E8CF; color:var(--ok)}
.sectionbar button.done.active{background:var(--navy-800); border-color:var(--navy-800); color:#fff}
@media (max-width:640px){ .sectionbar button{ padding:.38rem .75rem } }

.qmeta{display:flex; justify-content:space-between; align-items:baseline;
       font-size:.78rem; color:var(--muted); font-weight:600; margin-bottom:.5rem}
.qtext{font-size:1.06rem; font-weight:600; line-height:1.5; margin-bottom:1rem; color:var(--navy-900)}

.opt{
  display:flex; gap:.7rem; align-items:flex-start; width:100%; text-align:left;
  padding:.72rem .85rem; border:1.5px solid var(--line); border-radius:10px;
  background:#fff; cursor:pointer; margin-bottom:.55rem; font:inherit; transition:.12s;
}
.opt:hover{border-color:var(--teal-600); background:#F7FDFF}
.opt.sel{border-color:var(--navy-600); background:#F0F6FD; box-shadow:0 0 0 2px rgba(20,80,143,.1)}
.opt .k{
  flex:none; width:24px; height:24px; border-radius:6px; display:grid; place-items:center;
  background:var(--bg); border:1px solid var(--line); font-size:.76rem; font-weight:800; color:var(--muted);
}
.opt.sel .k{background:var(--navy-600); border-color:var(--navy-600); color:#fff}

/* ---------- palette ---------- */
.palette{display:grid; grid-template-columns:repeat(6,1fr); gap:.32rem; margin-top:.6rem}
.palette button{
  aspect-ratio:1; border-radius:7px; border:1.5px solid var(--line); background:#fff;
  font:inherit; font-size:.76rem; font-weight:700; color:var(--muted); cursor:pointer; padding:0;
}
.palette button.answered{background:#E9F7F1; border-color:var(--ok); color:#08694a}
.palette button.current{border-color:var(--navy-600); box-shadow:0 0 0 2px rgba(20,80,143,.18); color:var(--navy-800)}
.legend{display:flex; gap:.8rem; font-size:.72rem; color:var(--muted); margin-top:.6rem; flex-wrap:wrap}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:.25rem;vertical-align:-1px;border:1.5px solid var(--line)}
.legend .a{background:#E9F7F1;border-color:var(--ok)}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; background:rgba(4,16,31,.55); display:none;
       place-items:center; padding:1rem; z-index:100; backdrop-filter:blur(2px)}
.modal.show{display:grid}
.modal .card{max-width:430px; width:100%; margin:0}

/* The fullscreen gate. Sits BELOW the warning modal (z-index 100) so a candidate who
   has earned a warning reads it first, and above everything else so the paper cannot
   be worked on in a window — leaving fullscreen is how a screen gets split, and the
   browser will not let a page re-enter fullscreen without a real click. Opaque, not
   translucent: a blurred question is still a readable question. */
.fsblock{position:fixed; inset:0; background:var(--navy-900); color:#fff; display:none;
         place-items:center; padding:1.5rem; z-index:90; text-align:center}
.fsblock.show{display:grid}
.fsblock .inner{max-width:460px}
.fsblock h2{margin:.2rem 0 .6rem; font-size:1.35rem}
.fsblock p{color:rgba(255,255,255,.8); font-size:.92rem; margin:0 0 .5rem}
.fsblock .big-ok{font-size:2.6rem; margin-bottom:.3rem}

/* ---------- misc ---------- */
.kv{display:grid; grid-template-columns:auto 1fr; gap:.3rem .9rem; font-size:.86rem}
.kv dt{color:var(--muted); font-weight:600}
.kv dd{margin:0; font-weight:600}
ul.rules{margin:0 0 .5rem; padding-left:1.1rem}
ul.rules li{margin-bottom:.4rem; font-size:.9rem}
.center{text-align:center}
.big-ok{font-size:2.6rem; line-height:1; margin-bottom:.6rem}
table{width:100%; border-collapse:collapse; font-size:.83rem}
th,td{padding:.5rem .6rem; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
th{background:var(--bg); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
   color:var(--muted); position:sticky; top:0}
tbody tr:hover{background:#F8FBFE}
.tag{font-size:.7rem; font-weight:700; padding:.15rem .5rem; border-radius:99px; white-space:nowrap}
.tag.sub{background:#E9F7F1; color:#08694a}
.tag.auto{background:#FEF3C7; color:#92400E}
.tag.prog{background:#DBEAFE; color:#1E40AF}
.tag.none{background:#F1F5F9; color:#64748B}
.scroll{overflow:auto; max-height:65vh; border:1px solid var(--line); border-radius:var(--radius); background:#fff}

/* ============================================================
   DASHBOARD — KPI tiles and charts
   Data colours: validated ordinal blue ramp + fixed status palette.
   UI chrome keeps the EKAM navy/gold; data never wears brand colour.
   ============================================================ */
.viz{
  --surface:#FFFFFF;
  --ink-1:#0E1725; --ink-2:#52514E; --ink-muted:#898781;
  --grid:#E9EDF2; --axis:#C3C2B7;
  /* ordinal ramp — validated on #FFFFFF (light, --ordinal): all checks pass */
  --seq-1:#86b6ef; --seq-2:#5598e7; --seq-3:#2a78d6; --seq-4:#1c5cab; --seq-5:#104281;
  /* status palette — fixed, never themed; always paired with icon + label */
  --st-good:#0ca30c; --st-warning:#fab219; --st-serious:#ec835a; --st-critical:#d03b3b;
  --st-idle:#C3C2B7;
}

.kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
         gap:.7rem; margin-bottom:1rem}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
     padding:.85rem .95rem; box-shadow:var(--shadow)}
.kpi .lbl{font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
          color:var(--ink-muted); margin-bottom:.3rem}
.kpi .val{font-size:1.85rem; font-weight:700; line-height:1.05; color:var(--ink-1);
          letter-spacing:-.02em}
.kpi .val small{font-size:.95rem; font-weight:600; color:var(--ink-2)}
.kpi .sub{font-size:.74rem; color:var(--ink-2); margin-top:.28rem}
.kpi.accent{background:linear-gradient(135deg,var(--navy-800),var(--navy-600)); border-color:transparent}
.kpi.accent .lbl{color:rgba(255,255,255,.72)}
.kpi.accent .val,.kpi.accent .val small{color:#fff}
.kpi.accent .sub{color:rgba(255,255,255,.8)}

.chart-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem}
@media(max-width:820px){.chart-grid{grid-template-columns:1fr}}
.chart-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
            padding:1rem 1.1rem 1.1rem; box-shadow:var(--shadow)}
.chart-card h3{font-size:.9rem; font-weight:700; color:var(--ink-1); margin-bottom:.15rem}
.chart-card .cap{font-size:.74rem; color:var(--ink-2); margin-bottom:.9rem}
.empty{color:var(--ink-muted); font-size:.82rem; text-align:center; padding:1.8rem 0}

/* vertical column chart */
.cols{display:flex; align-items:flex-end; gap:2px; height:142px;
      border-bottom:1px solid var(--axis); padding-bottom:0}
.cols .colwrap{flex:1; display:flex; flex-direction:column; justify-content:flex-end;
               align-items:center; height:100%; gap:4px; cursor:default}
.cols .colval{font-size:.72rem; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums}
.cols .col{width:100%; border-radius:4px 4px 0 0; min-height:2px; transition:.2s}
.colwrap:hover .col{filter:brightness(1.12)}
.colaxis{display:flex; gap:2px; margin-top:.4rem}
.colaxis span{flex:1; text-align:center; font-size:.66rem; color:var(--ink-muted);
              font-variant-numeric:tabular-nums}

/* horizontal bar rows */
.bars{display:flex; flex-direction:column; gap:.6rem}
.barrow .barhead{display:flex; justify-content:space-between; align-items:baseline;
                 font-size:.78rem; margin-bottom:.22rem}
.barrow .barname{font-weight:600; color:var(--ink-1)}
.barrow .barval{font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums}
.bartrack{height:9px; background:var(--grid); border-radius:99px; overflow:hidden}
.barfill{height:100%; border-radius:99px; min-width:3px; transition:.25s}

/* status: part-to-whole strip + icon/label legend */
.statusbar{display:flex; height:11px; border-radius:99px; overflow:hidden; gap:2px; background:var(--grid)}
.statusbar span{min-width:2px}
.statuslegend{display:flex; flex-wrap:wrap; gap:.5rem .95rem; margin-top:.75rem}
.statuslegend div{display:flex; align-items:center; gap:.35rem; font-size:.76rem; color:var(--ink-2)}
.statuslegend b{color:var(--ink-1); font-variant-numeric:tabular-nums}
.sicon{width:14px; height:14px; border-radius:4px; display:grid; place-items:center;
       font-size:.6rem; font-weight:900; color:#fff; flex:none}

.tabs{display:flex; gap:.3rem; margin-bottom:1rem; border-bottom:1px solid var(--line)}
.tabs button{background:none; border:none; border-bottom:2px solid transparent; font:inherit;
             font-weight:650; font-size:.87rem; color:var(--muted); padding:.55rem .9rem;
             cursor:pointer; margin-bottom:-1px}
.tabs button.on{color:var(--navy-800); border-bottom-color:var(--navy-600)}
.toolbar{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:.8rem}
.toolbar input,.toolbar select{width:auto; min-width:150px; padding:.42rem .6rem; font-size:.85rem}

/* ============================================================
   MOBILE — the test screen must work on a phone
   ============================================================ */
/* 16px on inputs stops iOS Safari zooming in when a field is focused */
@media (max-width:640px){
  input,select,textarea{font-size:16px}
  .wrap{padding:.85rem .7rem 6rem}
  .card{padding:1rem .9rem; border-radius:10px}
  h1{font-size:1.25rem}
  .topbar{padding:.55rem .8rem}
  /* On a phone the bar is sticky and every millimetre of it is millimetres the
     question does not get — so the logos shrink and the drive title clamps. */
  .logo-tile{padding:4px 6px; border-radius:7px}
  .logo-tile img{height:30px}
  /* Phone: the two logos share the first row, EKAM left and the college right,
     and the drive title drops onto its own full-width row underneath. */
  .brand-drive{font-size:.78rem; order:3; flex:0 0 100%;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  /* The test screen's bar is sticky, so on a phone it competes with the question
     itself. The title is the one thing there a candidate does not need mid-test —
     the logos, their name and the clock all stay. */
  .brand-drive.in-test{display:none}
}

.panel-toggle{display:none}
.mobile-bar{display:none}

@media (max-width:860px){
  .test-grid{grid-template-columns:1fr}

  /* the question panel folds away so Submit is not 40 buttons down the page */
  .panel-toggle{
    display:flex; width:100%; align-items:center; justify-content:space-between;
    background:none; border:none; font:inherit; font-weight:700; font-size:.85rem;
    color:var(--navy-800); padding:0; cursor:pointer;
  }
  .panel-toggle .chev{transition:transform .2s; font-size:.7rem; color:var(--muted)}
  .panel-toggle[aria-expanded="false"] .chev{transform:rotate(-90deg)}
  #panelBody[hidden]{display:none}
  #panelBody{margin-top:.85rem}
  .palette{grid-template-columns:repeat(8,1fr)}

  .desktop-nav{display:none !important}

  /* thumb-reachable controls pinned to the bottom */
  .mobile-bar{
    display:flex; gap:.45rem; align-items:center;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--card); border-top:1px solid var(--line);
    padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom));
    box-shadow:0 -2px 14px rgba(4,16,31,.10);
  }
  .mobile-bar .btn{flex:1; padding:.7rem .5rem; min-height:46px}
  .mobile-bar .btn.narrow{flex:0 0 auto; padding:.7rem .85rem}

  /* bigger tap targets for answers */
  .opt{padding:.85rem .8rem; margin-bottom:.5rem}
  .opt .k{width:26px; height:26px}
  .qtext{font-size:1rem}
}

@media (max-width:400px){ .palette{grid-template-columns:repeat(6,1fr)} }

/* warning modal for leaving the test screen */
.warnbox{border-left:4px solid var(--gold-500); background:#FFFBEB; padding:.75rem .9rem;
         border-radius:8px; font-size:.87rem; color:#78350F; margin:.6rem 0}
.warnbox strong{color:#7C2D12}

/* support contact block, shown on any failure screen */
.supportbox{
  margin-top:1rem; padding:.8rem .95rem; border-radius:9px;
  background:#F0F6FD; border:1px solid #C7DDF7; color:var(--navy-800);
  font-size:.86rem; line-height:1.5;
}
.supportbox a{color:var(--navy-600); font-weight:700}
.supportbox:empty{display:none}

/* candidate identity on the test screen — so an invigilator can see whose screen
   they are looking at, and the candidate can confirm it is really theirs */
.who-chip{
  display:flex; align-items:baseline; gap:.45rem; max-width:44vw;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  padding:.3rem .7rem; border-radius:8px; font-size:.85rem; font-weight:700;
  color:#fff; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.who-chip .who-label{
  font-size:.6rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  opacity:.68; flex:none;
}
.taking-as{
  font-size:.76rem; color:var(--muted); margin:-.15rem 0 .55rem;
  padding-bottom:.5rem; border-bottom:1px dashed var(--line);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:640px){
  .who-chip{ max-width:38vw; font-size:.78rem; padding:.25rem .55rem }
  .who-chip .who-label{ display:none }
}

/* destructive admin action */
.btn-ghost.danger{ color:var(--st-critical); border-color:#F3C9C9 }
.btn-ghost.danger:hover{ border-color:var(--st-critical); background:#FEF2F2 }