/* ============================================================
   ICRB Mock Test Series — "Mission Console" visual language
   Palette: deep telemetry navy + signal amber, hairline grid
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --ink-900:#0d1826;
  --ink-800:#132133;
  --ink-700:#1a2e45;
  --line:#28405c;
  --line-soft:#1e3149;
  --paper:#e9edf2;
  --paper-dim:#9fb0c2;
  --amber:#e8792f;
  --amber-dim:#c96522;
  --ok:#4fae7f;
  --bad:#d6544a;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --font-sans:'IBM Plex Sans', system-ui, sans-serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink-900);
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:40px 40px;
  color:var(--paper);
  font-family:var(--font-sans);
  line-height:1.5;
}

a{ color:var(--amber); }

.wrap{
  max-width:1040px;
  margin:0 auto;
  padding:48px 24px 80px;
}

/* ---------- Header ---------- */
.site-head{
  display:flex;
  gap:24px;
  align-items:flex-start;
  padding-bottom:28px;
  border-bottom:1px solid var(--line);
  margin-bottom:28px;
}

.mark{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:14px;
  color:var(--amber);
  border:1px solid var(--amber-dim);
  padding:6px 10px;
  letter-spacing:0.04em;
  white-space:nowrap;
  margin-top:4px;
}

.head-text h1{
  font-family:var(--font-mono);
  font-size:clamp(24px, 4vw, 34px);
  font-weight:600;
  margin:0 0 10px;
  line-height:1.25;
  max-width:22ch;
}

.head-text p{
  margin:0;
  color:var(--paper-dim);
  max-width:62ch;
  font-size:15px;
}

/* ---------- Pattern strip ---------- */
.pattern-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-bottom:44px;
}

.pattern-block{
  background:var(--ink-800);
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.pattern-label{
  font-size:12px;
  color:var(--paper-dim);
}

.pattern-value{
  font-family:var(--font-mono);
  font-size:16px;
  font-weight:600;
  color:var(--paper);
}

.pattern-sub{
  font-size:12px;
  color:var(--amber);
}

/* ---------- Discipline sections ---------- */
.discipline{ margin-bottom:48px; }

.discipline h2{
  font-family:var(--font-mono);
  font-size:18px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line-soft);
}

.post-code{
  font-size:11px;
  color:var(--ink-900);
  background:var(--amber);
  padding:2px 7px;
  font-weight:700;
}

.test-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}

.test-card{
  display:block;
  background:var(--ink-800);
  border:1px solid var(--line);
  padding:16px;
  text-decoration:none;
  color:var(--paper);
  transition:border-color .15s ease, transform .15s ease;
}

.test-card:hover{
  border-color:var(--amber);
  transform:translateY(-2px);
}

.test-card .num{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--amber);
  display:block;
  margin-bottom:6px;
}

.test-card .title{
  font-weight:600;
  font-size:15px;
  display:block;
  margin-bottom:8px;
}

.test-card .meta{
  font-size:12px;
  color:var(--paper-dim);
}

.test-card.locked{
  opacity:0.45;
  pointer-events:none;
  border-style:dashed;
}

/* ---------- Footer ---------- */
.site-foot{
  border-top:1px solid var(--line);
  margin-top:56px;
  padding-top:20px;
  font-size:12px;
  color:var(--paper-dim);
}

/* ============================================================
   Quiz runner (test.html)
   ============================================================ */

.quiz-shell{
  max-width:820px;
  margin:0 auto;
  padding:32px 20px 90px;
}

.quiz-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  border-bottom:1px solid var(--line);
  padding-bottom:16px;
  margin-bottom:24px;
  flex-wrap:wrap;
}

.quiz-head h1{
  font-family:var(--font-mono);
  font-size:18px;
  margin:0;
}

.quiz-head .back{
  font-size:12px;
  text-decoration:none;
  color:var(--paper-dim);
  border:1px solid var(--line);
  padding:6px 10px;
}

.timer{
  font-family:var(--font-mono);
  font-size:20px;
  font-weight:600;
  color:var(--paper);
  border:1px solid var(--line);
  padding:6px 14px;
  min-width:88px;
  text-align:center;
}

.timer.low{ color:var(--bad); border-color:var(--bad); }

.progress-track{
  height:3px;
  background:var(--line-soft);
  margin-bottom:28px;
  position:relative;
}
.progress-fill{
  height:100%;
  background:var(--amber);
  width:0%;
  transition:width .2s ease;
}

.part-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--amber);
  border:1px solid var(--amber-dim);
  padding:3px 8px;
  margin-bottom:14px;
}

.q-index{
  font-family:var(--font-mono);
  color:var(--paper-dim);
  font-size:13px;
  margin-bottom:6px;
}

.q-text{
  font-size:18px;
  line-height:1.5;
  margin:0 0 22px;
}

.options{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:28px;
}

.option{
  display:flex;
  align-items:flex-start;
  gap:12px;
  border:1px solid var(--line);
  padding:13px 16px;
  cursor:pointer;
  background:var(--ink-800);
}

.option:hover{ border-color:var(--paper-dim); }

.option.selected{ border-color:var(--amber); background:var(--ink-700); }

.option .tag{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--paper-dim);
  border:1px solid var(--line);
  width:22px;
  height:22px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

.option.selected .tag{ border-color:var(--amber); color:var(--amber); }

.nav-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
}

button{
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:600;
  border:1px solid var(--amber);
  background:transparent;
  color:var(--amber);
  padding:11px 20px;
  cursor:pointer;
}

button:hover{ background:var(--amber); color:var(--ink-900); }

button:disabled{
  opacity:0.35;
  cursor:not-allowed;
  border-color:var(--line);
  color:var(--paper-dim);
}

button.primary{
  background:var(--amber);
  color:var(--ink-900);
}
button.primary:hover{ background:var(--amber-dim); }

.jump-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(34px,1fr));
  gap:6px;
  margin:24px 0;
}

.jump-cell{
  font-family:var(--font-mono);
  font-size:12px;
  border:1px solid var(--line);
  background:var(--ink-800);
  color:var(--paper-dim);
  padding:6px 0;
  text-align:center;
  cursor:pointer;
}
.jump-cell.answered{ border-color:var(--ok); color:var(--ok); }
.jump-cell.current{ border-color:var(--amber); color:var(--amber); }

/* ---------- Results ---------- */
.score-board{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin:24px 0 36px;
}
.score-cell{
  background:var(--ink-800);
  padding:18px;
}
.score-cell .big{
  font-family:var(--font-mono);
  font-size:26px;
  font-weight:700;
  display:block;
}
.score-cell .lbl{ font-size:12px; color:var(--paper-dim); }

.review-item{
  border:1px solid var(--line);
  padding:16px 18px;
  margin-bottom:12px;
}
.review-item.correct{ border-left:3px solid var(--ok); }
.review-item.incorrect{ border-left:3px solid var(--bad); }
.review-item.skipped{ border-left:3px solid var(--paper-dim); }

.review-item .rq{ font-weight:600; margin-bottom:10px; }
.review-item .ra{ font-size:13px; color:var(--paper-dim); margin-bottom:4px; }
.review-item .rex{ font-size:13px; color:var(--paper); margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
.tick-ok{ color:var(--ok); font-weight:700; }
.tick-bad{ color:var(--bad); font-weight:700; }

@media (max-width:600px){
  .quiz-head{ flex-direction:column; align-items:flex-start; }
}