.clickable { cursor: pointer; }
.pill-btn { padding: 10px 16px; border-radius: 10px; border: 1px solid #e5e7eb; background: #e6f9ee; color: #065f46; font-weight: 700; cursor: pointer; }
.pill-btn:hover { filter: brightness(0.98); }
.pill-btn[aria-pressed="true"] { background: #d1fae5; border-color: #a7f3d0; }
.pill-btn.neutral { background: #fee2e2; color: #7f1d1d; }
.pill-btn.neutral[aria-pressed="true"] { background: #fecaca; border-color: #fca5a5; }
.media-row { position: relative; display: grid; place-items: center; margin: 0; padding: 96px 0 120px; }
.hero-illustration svg { width: calc(90% + 33px); max-width: 843px; height: auto; display: block; margin: 0 auto; pointer-events: none; }
/* Soft-edge constrain: fade the artwork near UI edges instead of hard clipping */
/* remove soft mask constraint */
.hero-illustration { -webkit-mask-image: none; mask-image: none; }
/* Overlay blurb panel */
.overlay-blurbs {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.overlay-blurbs .blurbs {
  display: grid;
  grid-template-columns: repeat(3, 220px);
  gap: 16px;
  width: min(820px, 88vw);
  justify-content: center;
}
.overlay-blurbs .blurb {
  /* bring back ultra-light glass pills */
  background: linear-gradient(
    to bottom right,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.04)
  );
  color: #f9fafb; /* near-white for contrast */
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 22px 14px;
  min-height: 128px;
  backdrop-filter: blur(4px) saturate(110%);
  -webkit-backdrop-filter: blur(4px) saturate(110%);
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
  text-shadow: 0 2px 6px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.14);
}
.overlay-blurbs .blurb h4 {
  color: #f5f5f7; /* Apple-like soft white */
  font-weight: 700;
  letter-spacing: -0.01em;
  -webkit-text-stroke: 0.4px rgba(0,0,0,0.25);
  text-shadow:
    0 2px 8px rgba(0,0,0,0.35),
    0 1px 2px rgba(0,0,0,0.20);
}
.overlay-blurbs .blurb p {
  color: rgba(245,245,247,0.90);
  font-weight: 500;
  letter-spacing: 0.005em;
  -webkit-text-stroke: 0.25px rgba(0,0,0,0.20);
  text-shadow:
    0 1px 6px rgba(0,0,0,0.28),
    0 1px 1px rgba(0,0,0,0.16);
}
.overlay-blurbs { transform: translateY(-14px); }
.overlay-blurbs .blurb h4 { margin: 0 0 6px; font-size: 16px; }
.overlay-blurbs .blurb p { margin: 0; font-size: 13px; line-height: 1.45; }
:root {
  /* Color-blind friendly palette (inspired by Okabe-Ito) */
  --bg: #f7f7f8;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --primary: #0072b2;      /* blue */
  --primary-600: #005c8f;
  --secondary: #009e73;    /* green */
  --danger: #d55e00;       /* vermillion */
  --border: #e5e7eb;
  --focus: #7c3aed;        /* violet */
  --focus-end: #2563eb;    /* blue */
  --flag: #e69f00;         /* orange */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
  color: var(--text);
  background: var(--bg);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: -9999px;
}
.skip-link:focus {
  position: static;
  padding: 8px 12px;
  background: var(--primary);
  color: white;
}

/* home header removed */

.container {
  max-width: 1080px;
  margin: 24px auto;
  padding: 0 24px; /* even side breathing room */
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px; /* slightly larger inner padding */
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* Landing page fluff */
.landing { padding: 32px 32px 26px; }
.landing.roomy { padding: 40px 40px 30px; }
.hero { text-align: center; margin-bottom: 16px; }
.hero h1 { font-size: 34px; margin: 0 0 10px; letter-spacing: -0.015em; font-weight: 700; }
.lead { color: #374151; margin: 0 auto 10px; max-width: 60ch; }
.gradient-text { background: linear-gradient(90deg, #0ea5e9, #9333ea); -webkit-background-clip: text; background-clip: text; color: transparent; }
.specs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.spec { padding: 6px 10px; border-radius: 999px; background: #f3f4f6; color: #111827; border: 1px solid #e5e7eb; font-weight: 600; font-size: 12px; }
.pills { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 20px 0; }
.roomy-pills { padding: 10px 0 18px; }
/* Glassy Apple-like pills to match overlay style */
.pill {
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.55), rgba(255,255,255,0.30));
  color: #1f2937;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.65);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.5);
}
.pill:hover { box-shadow: 0 10px 22px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.6); transform: translateY(-0.5px); }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0 22px; }
.info-card { padding: 20px 18px; border: 1px solid var(--border); border-radius: 14px; background:
  linear-gradient(180deg, #ffffff, #fafafa);
  text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  display: grid; grid-template-rows: auto 1fr; align-items: start;
}
.info-card h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: -0.01em; }
.info-card p { margin: 0; color: #4b5563; line-height: 1.5; max-width: 40ch; margin-inline: auto; min-height: 3.6em; }
.landing-actions { display: grid; place-items: center; gap: 8px; margin-top: 8px; }
.landing-actions .big { padding: 12px 18px; font-size: 16px; }
.small { font-size: 12px; }
.site-credit { margin-top: 6px; color: #6b7280; font-size: 12px; }

/* Subtle Apple-like gloss */
.brand { font-weight: 700; letter-spacing: -0.02em; }
button.primary { border-radius: 11px; }
.card.landing { backdrop-filter: saturate(130%) blur(2.5px); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 16px 40px rgba(0,0,0,0.06); }

/* Apple-like subtle separators */
.mode-select { background: linear-gradient(180deg, #ffffff, #fbfbfb); border-radius: 12px; }
.mode-select legend { font-weight: 600; }

/* Test screen polish */
.test-header { padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.page-title { margin: 0 0 8px; font-size: 30px; text-align: left; letter-spacing: -0.01em; font-weight: 800; }
/* Subtest name styling (e.g., Visual Matrices) */
.subtest-name {
  font-size: 18px;
  font-weight: 800;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.controls.compact { justify-content: flex-start; gap: 10px; }
.controls.compact .checkbox { display: flex; align-items: center; gap: 8px; }
.controls.compact #flagBtn { border-radius: 8px; }

/* Harmonize test UI colors with home */
.visual-choice.ans-selected { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(14,165,233,0.18) inset !important; background: #eef8ff !important; }
.progress-row { margin: 8px 0 14px; }
.item { border-radius: 10px; background: white; }
.choices { gap: 10px; }
.choice, .choice.visual-choice { transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease; }
.choice:hover, .choice.visual-choice:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
.kbd-help { border-top: none; padding-top: 0; margin-top: 0; color: #6b7280; }

/* Add subtle glow on matrix and tiles */
.matrix { box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.choice.visual-choice { box-shadow: 0 3px 10px rgba(0,0,0,0.06); }

.actions { display: flex; gap: 8px; align-items: center; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

button {
  appearance: none;
  border: 1px solid var(--border);
  background: white;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  text-transform: capitalize;
}
/* Unify test menu/button sizes and shapes */
.test-header .header-right button,
.action-bar .nav button,
.nav button {
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 600;
}
/* Make top-right header buttons smaller (75% of base) */
.test-header .header-right button { transform: scale(0.85); transform-origin: right center; }
button.primary { background: var(--primary); color: white; border-color: var(--primary); }
button.primary:hover { background: var(--primary-600); }
button.accent { background: #0ea5e9; border-color: #0ea5e9; color: #fff; }
button.accent:hover { background: #0284c7; }
button.secondary { background: #111827; color: #fff; border-color: #111827; }
button.secondary:hover { filter: brightness(0.92); }
button.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
button.danger:hover { filter: brightness(0.92); }
button:focus { outline: 3px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(124,58,237,0.35), 0 0 0 6px rgba(37,99,235,0.25); }

label.radio, label.checkbox { display: flex; gap: 8px; align-items: center; }
.mode-select { border: 1px solid var(--border); padding: 12px; border-radius: 8px; }

.banner { margin: 12px 0; padding: 10px; border-radius: 8px; background: #ecfeff; color: #0c4a6e; border: 1px solid #a5f3fc; }
.hidden { display: none !important; }

.test-header { display: flex; justify-content: space-between; align-items: center; }
.header-center { flex: 1; display: flex; justify-content: center; }
.practice-counter { font-weight: 700; color: #111827; white-space: nowrap; }
.practice-counter .pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef2ff;
  border: 1px solid #e5e7eb;
  font-weight: 700;
}
.practice-counter .good { color: #065f46; }
.practice-counter .bad { color: #991b1b; margin-left: 0; }
/* Ensure first letter capitalized in counter labels */
.practice-counter .good::first-letter,
.practice-counter .bad::first-letter { text-transform: uppercase; }
.practice-counter .good { color: #065f46; }
.practice-counter .bad { color: #991b1b; margin-left: 8px; }
.practice-counter.hidden { display: none; }
.header-right { display: flex; gap: 8px; align-items: center; }
.progress-row { display: flex; justify-content: space-between; margin: 8px 0 16px; }

.item { padding: 18px; }
.item .item-stem { margin-bottom: 10px; }
.item .choices { margin-top: 10px; }

/* Visual: keep tile grids tight; matrix already spaced by its own gaps */
.visual-choices { margin-top: 10px; }
.matrix { margin-bottom: 18px; }

.item { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 12px 0; }
.item-stem { font-size: 18px; margin-bottom: 12px; }
.choices { display: grid; grid-template-columns: 1fr; gap: 8px; }
.choice { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.choice.ans-correct, .visual-choice.ans-correct { border-color: #059669 !important; box-shadow: 0 0 0 3px rgba(5,150,105,0.15) inset !important; background: #ecfdf5 !important; }
.choice.ans-wrong, .visual-choice.ans-wrong { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,0.12) inset !important; background: #fef2f2 !important; }
/* Timed mode selection (neutral blue) */
.choice.ans-selected, .visual-choice.ans-selected { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(0,114,178,0.18) inset !important; background: #eef6fb !important; }

/* Focus ring should be visible but not override selection shading */
.choice.visual-choice:focus-within { outline: none; }
/* Gradient halo for interactive elements (more prominent) */
.choice.visual-choice.has-focus,
.choice.has-focus,
.choice.visual-choice:focus-within,
.choice:focus-within,
button:focus-visible { box-shadow: 0 0 0 3px rgba(124,58,237,0.50), 0 0 0 7px rgba(37,99,235,0.35); }
.choice input { transform: scale(1.15); }
.choice-label { flex: 1; }
.choice-meta { color: var(--muted); font-size: 12px; }

/* Explanation block (practice mode) */
.explain { margin-top: 18px; }
.explain .explanation { margin-top: 12px; padding: 12px; border: 1px dashed var(--border); border-radius: 8px; background: #f9fafb; color: #111827; }

/* Inline explanation popover next to matrix/stem */
.item-row { display: flex; align-items: flex-start; gap: 16px; }
.item-col { flex: 1 1 0; min-width: 0; }
.explain-col { flex: 1 1 auto; min-width: 240px; max-width: none; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.item-col .visual-choices { padding-left: 0; }
.visual-choices { position: relative; left: 0; margin: 0; }
.matrix { margin-left: 6px; margin-right: 6px; }
.explain-trigger { display: inline-flex; justify-content: center; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 999px; background: #eef2ff; color: #3730a3; border: 1px solid #e5e7eb; font-weight: 600; cursor: pointer; margin: 0 auto; }
.explain-popover { position: absolute; top: 48px; left: 50%; transform: translateX(-50%); visibility: hidden; opacity: 0; transition: opacity 120ms ease; background: #ffffff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 22px rgba(0,0,0,0.08); padding: 12px; color: #111827; width: min(340px, calc(100% - 12px)); }
.explain-popover.visible { visibility: visible; opacity: 1; }
.explain-popover h4 { margin: 0 0 6px; font-size: 14px; }
.explain-popover p { margin: 0; line-height: 1.45; }
@media (max-width: 780px) {
  .item-row { flex-direction: column; }
  .explain-col { max-width: 100%; }
}
.linklike { background: none; border: none; color: var(--primary); cursor: pointer; padding: 0; font: inherit; }
.linklike:hover { text-decoration: underline; }

/* Flag/Confident styles */
#flagIndicator { color: #991b1b; font-weight: 700; }
#confIndicator { color: #065f46; font-weight: 700; }

/* Paused state */
.paused #timer { opacity: 0.75; }
.paused .timer::after { content: ' (paused)'; font-weight: 600; color: var(--muted); }

.controls { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.action-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.nav { display: flex; gap: 8px; justify-content: flex-end; }
.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.kbd-help {
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.credit {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  transform: translateY(5px);
}

.disclaimer { margin-top: 10px; }

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

/* Modal */
.modal.hidden { display: none; }
.modal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 50; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.35); }
.modal-content { position: relative; background: var(--card); border-radius: 10px; width: min(560px, 92vw); box-shadow: 0 10px 30px rgba(0,0,0,0.2); border: 1px solid var(--border); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.modal-body { padding: 16px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.icon-btn { background: transparent; border: none; cursor: pointer; font-size: 18px; }

/* Images grid for visual items (simple placeholder) */
.visual-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 360px; }
.visual-cell { aspect-ratio: 1 / 1; border: 1px solid var(--border); display: grid; place-items: center; font-weight: 600; color: var(--muted); }

/* Responsive */
@media (min-width: 640px) {
  .choices { grid-template-columns: 1fr 1fr; }
}

/* Visual matrix mode tweaks */
body.is-visual .item-stem { display: none; }
body.is-visual .controls { margin-top: 8px; }

/* Practice mode: harmonize scale with explanation panel */
body.practice .item-stem { font-size: 14px; }
body.practice .choice-label { font-size: 14px; }
body.practice .choice { padding: 8px 10px; }
body.practice .explain-col { min-width: 260px; }

/* Raven-style visual matrix refinements */
.matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0; /* inner lines drawn by cell borders */
  border: 2px solid #111; /* outer frame */
  max-width: min(1000px, 100% - 48px); /* larger matrix */
  margin: 12px auto 24px; /* center the matrix with more bottom space */
  background: #fff;
}
.matrix-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1; /* force squares */
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
}
/* remove extra borders on last col/row */
.matrix-cell:nth-child(3n) { border-right: 0; }
.matrix-cell:nth-last-child(-n + 3) { border-bottom: 0; }
.matrix-cell .svg-token { width: 56%; height: auto; color: #111; }

/* Answer tiles: single row like classic sheets (wrap on small screens) */
.visual-choices {
  display: grid;
  grid-template-columns: repeat(6, max-content);
  justify-content: center; /* center the row as a unit */
  justify-items: center;
  gap: 12px;
  margin: 0 auto; /* centered under matrix */
}
.timed .visual-choices { max-width: none !important; }
.practice .visual-choices { justify-content: flex-start; margin-left: 0; margin-right: auto; }
@media (max-width: 640px) {
  .visual-choices { grid-template-columns: repeat(3, 1fr); }
}
.choice.visual-choice { 
  border: 2px solid #111; 
  border-radius: 6px; 
  padding: 10px; 
  background: #f8fafc; 
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.choice.visual-choice:hover { 
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  background: #f5f9ff;
}
.choice.visual-choice .tile { 
  display: flex; align-items: center; justify-content: center; 
  min-height: 64px; 
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.choice.visual-choice .svg-token { width: 48px; height: 48px; color: #111; }
.choice.visual-choice .svg-token text { font-size: 34px; }
.choice.visual-choice .choice-meta { display: block; margin-top: 6px; text-align: center; font-weight: 700; color: #111; letter-spacing: 0.02em; }
.choice.visual-choice.selected { outline: 3px solid var(--primary); outline-offset: 1px; }
.choice.visual-choice:hover { box-shadow: none; }


/* Strong overrides to ensure selected feedback colors win over base borders */
.visual-choice.ans-correct { border-color: #059669 !important; background: #ecfdf5; box-shadow: 0 0 0 3px rgba(5,150,105,0.15) inset; }
.visual-choice.ans-wrong { border-color: #dc2626 !important; background: #fef2f2; box-shadow: 0 0 0 3px rgba(220,38,38,0.12) inset; }
.choice.ans-correct { border-color: #059669 !important; background: #ecfdf5; box-shadow: 0 0 0 3px rgba(5,150,105,0.15) inset; }
.choice.ans-wrong { border-color: #dc2626 !important; background: #fef2f2; box-shadow: 0 0 0 3px rgba(220,38,38,0.12) inset; }