@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&display=swap');

/* Shared visual layer for NotePier study modules. Loaded after module-specific CSS. */
:root {
  --np-study-bg: #07101e;
  --np-study-bg2: #101b30;
  --np-study-surface: rgba(15, 27, 48, .74);
  --np-study-line: rgba(255,255,255,.11);
  --np-study-text: #f6f8fc;
  --np-study-muted: #9faac0;
  --np-study-accent: #6ea8ff;
  --np-study-radius: 28px;
  --np-study-ease: cubic-bezier(.2,.75,.25,1);
  --np-card-display: "Rajdhani", "Arial Narrow", "Roboto Condensed", sans-serif;
}

body {
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(61,116,205,.24), transparent 60%),
    radial-gradient(820px 640px at 95% 20%, rgba(124,58,237,.13), transparent 55%),
    linear-gradient(145deg, var(--np-study-bg), var(--np-study-bg2));
}

/* Naturalization used a star pseudo-mark; use the same three-bar NotePier mark everywhere. */
.brand::before { display: none !important; content: none !important; }
.brand-mark {
  width: 42px !important;
  height: 42px !important;
  padding: 10px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 3px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg,#2b64b8,#152b50) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.15),0 8px 24px rgba(0,0,0,.18) !important;
}
.brand-mark i { display:block !important; width:4px !important; border-radius:2px !important; background:#dce9ff !important; }
.brand-mark i:nth-child(1) { height:8px !important; opacity:.7; }
.brand-mark i:nth-child(2) { height:16px !important; }
.brand-mark i:nth-child(3) { height:12px !important; opacity:.85; }

.topbar { min-height: 76px; height: auto; }
.shell, .page-shell, .topbar { width: min(1080px, calc(100% - 40px)); }

.mode-tabs,
.study-controls,
.test-setup,
.setup-card,
.test-card,
.test-question-card,
.results-card,
.result-panel {
  border-color: var(--np-study-line);
  box-shadow: 0 18px 44px rgba(0,0,0,.14);
}

.flashcard {
  touch-action: pan-y;
  -webkit-touch-callout: none;
  border-radius: 30px;
  box-shadow: 0 34px 80px rgba(0,0,0,.42);
}
.card-stack::before,
.card-stack::after { border-radius: 30px; }

/* Keep card questions visually tied to NotePier's condensed technical language. */
.question-face h2,
.card-face h2 {
  font-family: var(--np-card-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .025em;
  line-height: 1.08;
}

.tap-hint { font-weight: 650; letter-spacing: .01em; }
.tap-hint::after {
  content: " · Swipe ↔ to navigate";
  color: #6c7890;
}

.primary-button,
.secondary-button,
.primary,
.ghost,
.rating-button,
.flag-controls button,
.jump-row button,
.mode-tab,
.method-card,
.choice,
.choice-button {
  border-radius: 13px;
}

.study-controls {
  border-radius: 22px;
  background: var(--np-study-surface);
  backdrop-filter: blur(18px);
}
.quick-tools { grid-template-columns: minmax(0,1fr) auto auto; }

/* A little more state clarity without adding visual noise. */
.rating-button[aria-pressed="true"],
.flag-controls button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px rgba(110,168,255,.18);
}
.secondary-button[aria-pressed="true"] { border-color: rgba(110,168,255,.5); }

/* Naturalization parity with the newer Technical Foundations control surface. */
#studyView .study-controls { overflow: hidden; }
#studyView .progress-block { padding-bottom: 2px; }
#studyView .jump-row { border-top-color: var(--np-study-line); }

@media (hover:hover) and (pointer:fine) {
  .flashcard:hover { transform: translateY(-2px); }
}

@media (max-width: 760px) {
  .shell, .page-shell, .topbar { width: min(100% - 22px,1080px); }
  .topbar { min-height: 64px; gap: 12px; }
  .brand-mark { width: 38px !important; height: 38px !important; padding: 9px !important; border-radius: 13px !important; }
  .breadcrumb { max-width: 58vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .intro, .page-head { gap: 16px; }
  .study-layout { gap: 16px; }
  .flashcard {
    min-height: 390px;
    padding: 26px 23px 24px;
    border-radius: 24px;
  }
  .card-stack::before { inset: 9px 13px 9px; border-radius: 24px; }
  .card-stack::after { inset: 17px 25px 0; border-radius: 24px; }
  .question-face h2,
  .card-face h2 { font-size: clamp(25px,7.2vw,34px); }
  .answer-text,
  .card-answer p:last-child { font-size: clamp(23px,6.7vw,32px); }
  .study-controls { position: static; border-radius: 20px; }
  .primary-controls button { min-height: 44px; }
  .mode-tab { min-height: 42px; }
  .tap-hint::after { content: " · Swipe ↔"; }
  .quick-tools { grid-template-columns: 1fr 1fr; }
  .quick-tools .quick-toggle { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .deck-select label { display: none; }
  .deck-select select { max-width: 132px; }
  .breadcrumb a:not(:last-of-type), .breadcrumb span:first-of-type { display: none; }
  .flashcard { min-height: 360px; }
  .primary-controls { gap: 7px; }
  .shortcut-hint, .shortcut-copy { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

/* Hidden audit scaffolding remains available to validators, never to learners. */
[hidden] { display: none !important; }
#fullBankView .test-question-card { overflow-wrap: anywhere; }
.source-links { display: grid; gap: .6rem; }
.source-links a { overflow-wrap: anywhere; }
.answer-caution { font-size: .85rem; opacity: .85; }

/* Full tests have text-only options; the short-test grid reserves 34px for a letter. */
#fullBankChoices > .choice-button {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Progress must not occupy Next's grid cell on phones. Keep navigation paired. */
#fullBankView .test-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "progress progress" "previous next" "finish return";
  align-items: stretch;
  gap: 10px;
}
#fullBankView .test-controls > :first-child { grid-area: previous; }
#fullBankView .test-controls > p {
  grid-area: progress;
  margin: 2px 0;
  color: var(--muted);
  font: 700 11px/1.5 var(--mono);
  text-align: center;
}
#fullBankNext { grid-area: next; }
#fullBankFinish { grid-area: finish; }
#fullBankView .test-controls > :last-child { grid-area: return; }
#fullBankView .test-controls > button {
  min-width: 0;
  min-height: 44px;
  padding-inline: 10px;
  font-size: 14px;
  white-space: normal;
}

/* Dark test panels cannot inherit the ink colors intended for cream flashcards. */
.test-question-card .source-details,
#fullBankView > .source-details {
  border-color: var(--line);
  background: rgba(255,255,255,.035);
  color: var(--muted);
}
.test-question-card .source-details summary,
.test-question-card .source-links a,
#fullBankView > .source-details summary,
#fullBankView > .source-details .source-links a {
  color: #b8d3ff;
}

/* A desktop sidebar can be narrower than a phone: do not squeeze three controls. */
.primary-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.primary-controls > button {
  min-width: 0;
  min-height: 44px;
  padding-inline: 8px;
  font-size: 14px;
}
.primary-controls > button:first-child { grid-column: 1; grid-row: 1; }
.primary-controls > button:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
.primary-controls > button:last-child { grid-column: 2; grid-row: 1; }
.quick-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quick-tools .quick-toggle { grid-column: 1 / -1; }
.study-controls, .setup-card, .options-body label, .study-controls select { min-width: 0; }