/* TCEA Digital Breakouts — shared structural styles ("field notebook" look).
   Palette variables (--navy, --red, --gold, --c1..c5, --good/--bad + -bg,
   --line, --line-strong, --focus, --surface, --dot) are set per suite by a
   small inline :root in each page, so one stylesheet serves every theme.
   Load AFTER the inline palette:  <link rel="stylesheet" href="../../assets/breakout.css">
   Fallbacks keep older pages (without the newer tokens) readable. */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Nunito',sans-serif;color:var(--ink);line-height:1.6;min-height:100vh;
  background:
    radial-gradient(var(--dot,rgba(10,46,99,.07)) 1.2px,transparent 1.3px) 0 0/22px 22px,
    radial-gradient(ellipse 60% 50% at 80% 0%,var(--bg-a,rgba(178,30,40,.10))0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 100%,var(--bg-b,rgba(11,107,58,.10))0%,transparent 60%),var(--paper)}
.wrap{max-width:920px;margin:0 auto;padding:18px 18px 80px}
.langbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:8px}
.langbar .globe{font-size:1.1rem}
.breakout-i18n-switcher,#i18nSwitcher{font-family:'Nunito',sans-serif;font-weight:700;font-size:.9rem;min-height:40px;
  padding:7px 12px;border:2px solid var(--line-strong,var(--line));border-radius:8px;background:#fff;color:var(--navy);cursor:pointer}
.crumb{font-size:.85rem;font-weight:700;margin-bottom:10px}
.crumb a{color:var(--c3);text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* --- header: the case title --------------------------------------------- */
header.top{text-align:center;padding:6px 0 2px}
.eyebrow{display:inline-block;background:var(--navy);color:#fff;font-family:'Fredoka',sans-serif;
  font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:5px 14px;border-radius:6px;margin-bottom:10px}
h1{font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(1.9rem,5.5vw,2.75rem);color:var(--navy);line-height:1.08}
.sub{color:var(--ink-soft);font-weight:600;margin-top:8px;max-width:640px;margin-inline:auto}

/* --- progress: sticky lock tracker -------------------------------------- */
.progress-wrap{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;position:sticky;top:8px;z-index:30;
  margin:14px 0 6px;padding:8px 14px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:2px solid var(--line);border-radius:12px;box-shadow:0 4px 14px rgba(10,36,99,.08)}
.lockdots{display:flex;gap:8px}
.ld{width:32px;height:32px;border-radius:8px;background:var(--surface,#e6ebf5);display:flex;align-items:center;justify-content:center;
  font-size:1rem;transition:.3s;border:2px solid var(--line)}
.ld.open{background:var(--good-bg,#f0fdf4);border-color:var(--good)}
.pcount{font-family:'Fredoka',sans-serif;font-weight:600;color:var(--navy)}
.resetbtn{background:#fff;border:2px solid var(--line-strong,var(--line));border-radius:8px;min-height:40px;padding:6px 14px;
  font-family:'Fredoka',sans-serif;font-weight:600;color:var(--ink-soft);cursor:pointer;font-size:.88rem}
.resetbtn:hover{border-color:var(--navy);color:var(--navy)}

/* --- mission brief: a case file with a tab ------------------------------ */
.brief{position:relative;background:#fffdf7;border:2px dashed var(--gold-d);border-radius:4px 14px 14px 14px;padding:22px 20px 16px;margin:26px 0 18px;
  box-shadow:0 2px 0 rgba(10,36,99,.04)}
.brief .tag{position:absolute;top:-14px;inset-inline-start:-2px;background:var(--gold);color:var(--navy-d);border-radius:8px 8px 0 0;
  padding:3px 12px;font-family:'Fredoka',sans-serif;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.brief h2{font-family:'Fredoka',sans-serif;font-size:1.25rem;color:var(--navy);margin-bottom:6px}

.section-title{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.3rem;color:var(--navy);margin:28px 0 2px}
.hint{color:var(--ink-soft);font-weight:600;font-size:.95rem;margin-bottom:12px}

/* --- clues: six evidence cards, always a balanced 3×2 (2×3 on phones) --- */
.clue-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.clue{position:relative;background:var(--card);border:2px solid var(--line-strong,var(--line));border-radius:12px;padding:18px 12px 14px;cursor:pointer;
  transition:transform .18s,box-shadow .18s,border-color .18s;text-align:center;font-family:inherit;min-height:110px;
  box-shadow:0 3px 0 var(--line)}
.clue::before{content:'';position:absolute;top:-7px;left:50%;width:46px;height:14px;margin-left:-23px;border-radius:3px;
  background:var(--gold);opacity:.55;transform:rotate(-3deg)}
.clue:hover{transform:translateY(-3px);border-color:var(--navy);box-shadow:0 8px 20px rgba(10,36,99,.12)}
.clue .ico{font-size:2.1rem;line-height:1}
.clue .nm{font-weight:800;margin-top:8px;color:var(--navy);font-size:.95rem;line-height:1.3}
.clue.opened{background:var(--surface,#eef4ff);border-style:solid}
.clue.opened::after{content:'✓';position:absolute;top:8px;inset-inline-end:8px;width:24px;height:24px;border-radius:50%;
  background:var(--good);color:#fff;font-weight:800;font-size:.85rem;line-height:24px;text-align:center}

/* --- locks --------------------------------------------------------------- */
.locks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px;align-items:start}
@media(max-width:640px){
  .locks{grid-template-columns:1fr}
  .clue-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .wrap{padding:14px 14px 64px}
  .progress-wrap{gap:8px;padding:6px 10px}
  .lockdots{gap:5px}
  .ld{width:28px;height:28px;font-size:.9rem}
  .resetbtn{min-height:36px;padding:4px 10px}
}
.lock{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:18px;position:relative;box-shadow:0 3px 0 var(--line)}
.lock .lk-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.lk-badge{width:40px;height:40px;border-radius:10px;color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.2rem}
.lk-title{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.1rem;color:var(--navy);line-height:1.15;margin:0}
.lk-q{font-size:.95rem;color:var(--ink);font-weight:600;margin:10px 0 12px}
.lk-solved-msg{display:none;color:var(--good);font-weight:700;font-family:'Fredoka',sans-serif;font-size:1.1rem;margin-top:8px}
.lock.solved{border-color:var(--good);background:var(--good-bg,#f0fdf4);box-shadow:0 3px 0 var(--good)}
.lock.solved .lk-solved-msg{display:block}
.lock.solved .lk-body{display:none}
.lock.solved .lk-badge{background:var(--good)!important}

/* The payoff: the reason the answer is right. Success styling, never error red. */
.reasoning{background:#fff;border:2px solid var(--good);border-inline-start-width:6px;border-radius:10px;padding:12px 14px;
  font-size:.95rem;color:var(--ink);font-weight:600;margin-top:10px;line-height:1.55}

.digits{display:flex;gap:8px;margin-bottom:10px}
.digit{width:48px;height:56px;border:2px solid var(--line-strong,var(--line));border-radius:8px;text-align:center;font-size:1.5rem;
  font-weight:800;font-family:'Fredoka',sans-serif;color:var(--navy);background:#fff}
.digit:focus{outline:none;border-color:var(--navy)}
.wordin{width:100%;min-height:46px;border:2px solid var(--line-strong,var(--line));border-radius:8px;padding:10px 13px;font-size:1.05rem;
  font-weight:700;font-family:inherit;color:var(--navy);background:#fff}
.wordin:focus{outline:none;border-color:var(--navy)}

.mc{display:flex;flex-direction:column;gap:8px}
.mc button{text-align:start;background:#fff;border:2px solid var(--line-strong,var(--line));border-radius:8px;min-height:46px;padding:10px 13px;
  font-family:inherit;font-weight:600;cursor:pointer;font-size:.95rem;color:var(--ink);transition:.15s}
.mc button:hover{border-color:var(--navy);background:var(--surface,#f7f9ff)}

.seq-pads{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
/* Pad colours come from the activity data; the inset ring keeps white text readable on any of them. */
.seqpad{min-width:48px;min-height:48px;padding:6px 12px;border-radius:10px;border:2px solid rgba(0,0,0,.28);cursor:pointer;font-size:1.02rem;
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22)}
.seqpad:active{transform:translateY(1px)}
.seq-current{min-height:34px;font-family:'Fredoka',sans-serif;font-weight:700;color:var(--navy);letter-spacing:1px;font-size:1.05rem;
  background:#fff;border:2px dashed var(--line-strong,var(--line));border-radius:8px;padding:4px 10px;display:inline-block;margin-bottom:8px;min-width:120px}
.seq-clear{background:none;border:none;color:var(--ink-soft);font-weight:700;cursor:pointer;text-decoration:underline;font-size:.88rem;margin-inline-start:8px;min-height:32px}

.lk-submit{background:var(--navy);color:#fff;border:none;border-radius:8px;min-height:44px;padding:10px 22px;font-family:'Fredoka',sans-serif;
  font-weight:600;cursor:pointer;font-size:.98rem;margin-top:6px}
.lk-submit:hover{background:var(--navy-d)}
/* Retry feedback: a calm note beside the control, not a red alarm. Empty = no box. */
.lk-feedback{margin-top:10px;font-weight:700;font-size:.92rem;border-radius:8px}
.lk-feedback.bad{color:var(--bad);background:var(--bad-bg,#fff1f2);border-inline-start:4px solid var(--bad);padding:8px 12px}
.lk-feedback.bad::before{content:'💡 ';content:'💡 ' / ''}
.lk-feedback:empty{padding:0;border:0;background:none}
.lk-feedback:empty::before{content:none}
.lk-feedback.good{color:var(--good)}

.multi{display:flex;flex-direction:column;gap:8px}
.multi-opt{display:flex;gap:10px;align-items:flex-start;text-align:start;background:#fff;border:2px solid var(--line-strong,var(--line));border-radius:8px;
  min-height:46px;padding:10px 13px;font-family:inherit;font-weight:600;cursor:pointer;font-size:.95rem;color:var(--ink);transition:.15s}
.multi-opt:hover{border-color:var(--navy);background:var(--surface,#f7f9ff)}
.multi-opt .mbox{width:22px;height:22px;border-radius:5px;border:2px solid var(--line-strong,var(--line));flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:#fff}
.multi-opt.picked{border-color:var(--navy);background:var(--surface,#eef4ff);box-shadow:inset 0 0 0 1px var(--navy)}
.multi-opt.picked .mbox{background:var(--navy);border-color:var(--navy)}
.multi-opt.picked .mbox::after{content:'✓'}

/* --- clue dialog: an evidence card pulled from the file ----------------- */
.modal-bg{position:fixed;inset:0;background:rgba(10,29,61,.58);display:none;align-items:center;justify-content:center;z-index:40;padding:20px}
.modal-bg.show{display:flex}
.modal{position:relative;background:#fffdf7;border:2px solid var(--line-strong,var(--line));border-radius:14px;padding:30px 24px 24px;max-width:480px;width:100%;
  max-height:90vh;overflow-y:auto;animation:pop .22s ease;box-shadow:0 24px 60px rgba(6,18,48,.35)}
.modal::before{content:'';position:absolute;top:-9px;left:50%;width:70px;height:18px;margin-left:-35px;border-radius:3px;background:var(--gold);opacity:.7;transform:rotate(-2deg)}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.modal .mico{font-size:2.8rem;text-align:center}
.modal h3{font-family:'Fredoka',sans-serif;color:var(--navy);text-align:center;margin:6px 0 12px;font-size:1.35rem}
.modal p{font-weight:600;color:var(--ink);margin:8px 0;font-size:1.02rem}
.modal .closebtn{display:block;margin:18px auto 0;background:var(--navy);color:#fff;border:none;border-radius:8px;min-height:44px;
  padding:10px 28px;font-family:'Fredoka',sans-serif;font-weight:600;cursor:pointer;font-size:1rem}

/* --- win: case closed --------------------------------------------------- */
.win{position:fixed;inset:0;background:rgba(10,29,61,.72);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.win.show{display:flex}
.win-card{position:relative;background:#fffdf7;border:2px solid var(--line-strong,var(--line));border-top:10px solid var(--gold);border-radius:18px;
  padding:28px 26px 24px;max-width:520px;width:100%;text-align:center;animation:pop .3s ease;max-height:92vh;overflow-y:auto;box-shadow:0 30px 70px rgba(6,18,48,.4)}
.win-card .stamp{display:inline-block;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.35rem;color:var(--navy);letter-spacing:.06em;
  border:4px double var(--navy);border-radius:10px;padding:6px 18px;transform:rotate(-5deg);margin-bottom:14px;background:var(--surface,#eef4ff)}
.win-card .stamp::before{content:'🔓🔓🔓🔓';display:block;font-size:.95rem;letter-spacing:.2em;margin-bottom:2px}
.win-card h2{font-family:'Fredoka',sans-serif;color:var(--navy);font-size:1.6rem;margin-bottom:8px;line-height:1.2}
.win-card > p{font-weight:600;color:var(--ink);margin-bottom:16px;background:var(--good-bg,#f0fdf4);border:2px solid var(--good);border-radius:10px;padding:12px 14px;text-align:start}
.win-card > button{background:var(--navy);color:#fff;border:none;border-radius:8px;min-height:46px;padding:11px 26px;font-family:'Fredoka',sans-serif;
  font-weight:600;cursor:pointer;font-size:1rem}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:60}
@media(max-width:480px){.win-card{padding:22px 16px 18px}.win-card h2{font-size:1.35rem}}
footer{text-align:center;margin-top:34px;font-size:.82rem;color:var(--ink-soft);font-weight:600;line-height:1.7}
footer a{color:var(--c3);font-weight:700}

/* --- grades 6–8: same layout, calmer surface ---------------------------- */
body[data-band="68"]{background:var(--paper)}
body[data-band="68"] .clue::before,body[data-band="68"] .modal::before{display:none}
body[data-band="68"] .clue{min-height:96px;padding:14px 12px}
body[data-band="68"] .clue .ico{font-size:1.6rem}
body[data-band="68"] .clue:hover{transform:none}
body[data-band="68"] .win-card .stamp{transform:none}
body[data-band="68"] h1{font-weight:600}

/* keep numeric date entry left-to-right even in RTL languages */
[dir="rtl"] .digits{direction:ltr}
[dir="rtl"] .clue::before{transform:rotate(3deg)}

/* --- accessibility --------------------------------------------------------- */
/* Visible keyboard focus (WCAG 2.4.7 / 2.4.11): one strong ring everywhere. */
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,
.clue:focus-visible,.mc button:focus-visible,.seqpad:focus-visible,.multi-opt:focus-visible,
.lk-submit:focus-visible,.resetbtn:focus-visible,.closebtn:focus-visible,[tabindex="-1"]:focus-visible{
  outline:3px solid var(--focus,var(--navy));outline-offset:3px}
.digit:focus-visible,.wordin:focus-visible{outline:3px solid var(--focus,var(--navy));outline-offset:2px;border-color:var(--navy)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:8px;top:-48px;background:var(--navy);color:#fff;padding:10px 16px;
  border-radius:0 0 10px 10px;z-index:200;font-weight:800;text-decoration:none;transition:top .15s}
.skip-link:focus{top:0}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .clue:hover{transform:none}
  .win-card .stamp{transform:none}
}
@media print{
  .progress-wrap,.topnav,.resetbtn,.modal-bg,.win,#confetti{display:none!important}
  body{background:#fff}
}