/* ==========================================================================
   CIC Introduction to Computing — shared lab stylesheet
   Palette matches the lecture decks. No external fonts, no CDN, no tracking.
   Works offline once the page has loaded.
   ========================================================================== */

:root{
  --navy:#0B1D3A; --navy2:#13294B; --navy3:#0F2444;
  --teal:#1C7293; --mint:#27C4A6; --amber:#FFB703;
  --violet:#8E7CC3; --coral:#E5717A; --sky:#4A9DBF;
  --light:#F4F7FB; --card:#E8EEF6; --grey:#5A6B80;
  --dim:#C6D6E8; --white:#fff; --ink:#2C3E52;
  --ok:#1B8A6B; --okbg:#E4F7F1; --bad:#B23A48; --badbg:#FDE7E9;
  --shadow:0 2px 10px rgba(11,29,58,.10);
  --shadow-lg:0 8px 28px rgba(11,29,58,.16);
  --r:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--light); color:var(--ink);
  font-family:"Segoe UI",Calibri,system-ui,-apple-system,Arial,sans-serif;
  font-size:17px; line-height:1.55;
}
h1,h2,h3{font-family:Cambria,Georgia,"Times New Roman",serif; color:var(--navy); margin:0 0 .4em}
a{color:var(--teal)}
img{max-width:100%; display:block}

.wrap{max-width:1120px; margin:0 auto; padding:0 20px}

/* ---------------------------------------------------------------- header -- */
.top{background:var(--navy); color:#fff; padding:18px 0; position:sticky; top:0; z-index:50;
     box-shadow:0 2px 14px rgba(0,0,0,.25)}
.top .wrap{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.brand{font-family:Cambria,Georgia,serif; font-size:21px; font-weight:700; color:#fff; margin:0}
.brand small{display:block; font-family:"Segoe UI",Calibri,sans-serif; font-size:12.5px;
             letter-spacing:2px; color:var(--amber); font-weight:700; text-transform:uppercase}
.top .spacer{flex:1}

.pill{background:var(--navy2); border:none; color:var(--dim); padding:9px 15px; border-radius:999px;
      font-size:14.5px; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:8px}
.pill:hover{background:#1B3760; color:#fff}
.pill.on{background:var(--amber); color:var(--navy); font-weight:700}
.pill b{color:#fff}
.pill.on b{color:var(--navy)}

/* ------------------------------------------------------------- progress -- */
.bar{height:5px; background:var(--navy2)}
.bar i{display:block; height:100%; background:var(--mint); width:0; transition:width .35s ease}

/* ----------------------------------------------------------------- hero -- */
.hero{background:var(--navy); color:#fff; padding:40px 0 52px}
.hero h1{color:#fff; font-size:38px; margin:0 0 10px}
.hero p{color:var(--dim); font-size:19px; max-width:60ch; margin:0}
.kicker{color:var(--amber); font-weight:700; letter-spacing:2px; font-size:13px;
        text-transform:uppercase; margin:0 0 8px}

/* ----------------------------------------------------------------- grid -- */
.grid{display:grid; gap:18px; margin:26px 0}
.g2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

/* --------------------------------------------------------------- panels -- */
.panel{background:#fff; border-radius:var(--r); box-shadow:var(--shadow); padding:22px; margin:18px 0}
.panel.flat{box-shadow:none; background:var(--card)}
.panel.dark{background:var(--navy); color:var(--dim)}
.panel.dark h2,.panel.dark h3{color:#fff}

/* -------------------------------------------------------- station cards -- */
.stations{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); margin:26px 0}
.st{background:#fff; border-radius:var(--r); box-shadow:var(--shadow); padding:20px; cursor:pointer;
    border:0; text-align:left; font:inherit; color:inherit; position:relative; transition:transform .15s, box-shadow .15s}
.st:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.st:focus-visible{outline:3px solid var(--teal); outline-offset:3px}
.st .n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
       font-weight:700;color:#fff;font-size:19px;margin-bottom:12px}
.st h3{font-size:21px;margin:0 0 6px}
.st p{margin:0;color:var(--grey);font-size:15px}
.st .done{position:absolute;top:18px;right:18px;background:var(--okbg);color:var(--ok);
          font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px}
.c-teal .n{background:var(--teal)} .c-mint .n{background:var(--mint)}
.c-amber .n{background:var(--amber);color:var(--navy)} .c-violet .n{background:var(--violet)}
.c-sky .n{background:var(--sky)} .c-coral .n{background:var(--coral)}

/* ------------------------------------------------------------- question -- */
.qwrap{display:grid; gap:26px; grid-template-columns:minmax(260px,.85fr) 1.15fr; align-items:start}
@media(max-width:820px){.qwrap{grid-template-columns:1fr}}

.figure{background:var(--card); border-radius:var(--r); padding:14px; box-shadow:var(--shadow)}
.figure img{border-radius:8px; width:100%; height:auto}
.figcap{text-align:center;color:var(--grey);font-size:14px;margin-top:8px}

.qtext{font-size:22px; font-weight:600; color:var(--navy); margin:0 0 18px; line-height:1.35}
.qmeta{color:var(--grey); font-size:14px; letter-spacing:1.5px; text-transform:uppercase;
       font-weight:700; margin:0 0 6px}

.opts{display:grid; gap:11px; margin:0 0 18px}
.opt{display:flex; gap:13px; align-items:flex-start; width:100%; text-align:left;
     background:#fff; border:2px solid #DCE4EE; border-radius:12px; padding:14px 16px;
     font:inherit; font-size:16.5px; color:var(--ink); cursor:pointer; transition:.12s}
.opt:hover:not(:disabled){border-color:var(--teal); background:#F7FBFD}
.opt:disabled{cursor:default}
.opt .k{flex:0 0 28px; height:28px; border-radius:50%; background:var(--card); color:var(--navy);
        font-weight:700; display:grid; place-items:center; font-size:14.5px}
.opt.correct{border-color:var(--ok); background:var(--okbg)}
.opt.correct .k{background:var(--ok); color:#fff}
.opt.wrong{border-color:var(--bad); background:var(--badbg)}
.opt.wrong .k{background:var(--bad); color:#fff}

/* ---------------------------------------------------------------- reveal -- */
.reveal{border-left:5px solid var(--mint); background:#EFFBF8; border-radius:10px;
        padding:16px 18px; margin:0 0 16px}
.reveal h4{margin:0 0 6px; color:var(--ok); font-size:15px; letter-spacing:1.4px;
           text-transform:uppercase; font-family:"Segoe UI",Calibri,sans-serif}
.reveal p{margin:0; font-size:16.5px}

.teach{border-left:5px solid var(--amber); background:#FFF8E8; border-radius:10px;
       padding:16px 18px; margin:0 0 16px}
.teach h4{margin:0 0 6px; color:#9A6B00; font-size:15px; letter-spacing:1.4px;
          text-transform:uppercase; font-family:"Segoe UI",Calibri,sans-serif}
.teach p{margin:0; font-size:16px}

/* --------------------------------------------------------------- buttons -- */
.btn{background:var(--teal); color:#fff; border:0; border-radius:10px; padding:13px 22px;
     font:inherit; font-size:16.5px; font-weight:600; cursor:pointer; transition:.12s}
.btn:hover{background:#16607C}
.btn.ghost{background:#fff; color:var(--teal); border:2px solid var(--teal)}
.btn.ghost:hover{background:#EFF6FA}
.btn.amber{background:var(--amber); color:var(--navy)}
.btn.amber:hover{background:#E9A600}
.btn.big{padding:16px 30px; font-size:18px}
.btn:disabled{opacity:.45; cursor:default}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

/* -------------------------------------------------------------- hotspot -- */
.hotwrap{position:relative; display:inline-block; width:100%; background:var(--card);
         border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.hotwrap img{width:100%}
.hot{position:absolute; border:3px dashed rgba(255,255,255,.5); border-radius:8px;
     background:rgba(255,183,3,.06); cursor:pointer; transition:.15s}
.hot:hover{background:rgba(255,183,3,.30); border-color:var(--amber)}
.hot.found{background:rgba(39,196,166,.34); border:3px solid var(--mint)}
.hot span{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
          background:var(--navy); color:#fff; font-size:13px; font-weight:700;
          padding:4px 9px; border-radius:6px; white-space:nowrap; opacity:0; transition:.15s}
.hot.found span{opacity:1}

.chips{display:flex; gap:9px; flex-wrap:wrap; margin:16px 0}
.chip{background:#fff; border:2px solid #DCE4EE; border-radius:999px; padding:9px 16px;
      font:inherit; font-size:15.5px; cursor:pointer}
.chip.on{background:var(--teal); color:#fff; border-color:var(--teal)}
.chip.got{background:var(--okbg); color:var(--ok); border-color:var(--ok); text-decoration:line-through}

/* ----------------------------------------------------------------- spec -- */
.mono{font-family:"Cascadia Mono",Consolas,"Courier New",monospace; background:var(--navy);
      color:var(--mint); padding:16px 18px; border-radius:10px; font-size:16px;
      overflow-x:auto; white-space:pre-wrap; word-break:break-word}

/* ---------------------------------------------------------------- score -- */
.score{display:flex; gap:26px; flex-wrap:wrap; margin:8px 0 0}
.score div{text-align:center}
.score b{display:block; font-family:Cambria,Georgia,serif; font-size:36px; color:var(--teal); line-height:1.1}
.score span{font-size:13.5px; color:var(--grey)}

/* --------------------------------------------------------------- footer -- */
.foot{background:var(--navy); color:var(--dim); padding:26px 0; margin-top:44px; font-size:14.5px}
.foot a{color:var(--mint)}

.note{background:var(--card); border-radius:10px; padding:14px 16px; color:var(--grey); font-size:15.5px}
.hide{display:none !important}
.center{text-align:center}
.mt{margin-top:22px} .mb{margin-bottom:22px}

/* Instructor-only content is hidden until the mode is switched on */
body:not(.teacher) .teach{display:none}
body.teacher .top{background:#5A3E00}
body.teacher .hero{background:#5A3E00}

@media print{
  .top,.foot,.btn,.pill{display:none}
  body{background:#fff}
  .panel{box-shadow:none; border:1px solid #ccc}
}