/* Shared Kien IELTS visual language: cool canvas, navy ink, red exam accent. */
:root {
  --kien-navy: #14213d;
  --kien-muted: #58708e;
  --kien-red: #d62839;
  --kien-canvas: #f6f8fb;
  --kien-line: #d9e1eb;
}
html,
body,
#root,
#root *,
button,
input,
textarea,
select {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-synthesis: none;
}
body {
  background: var(--kien-canvas);
  color: var(--kien-navy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root, #root > div { min-height: 100vh; }
.bg-gray-50 { background-color: var(--kien-canvas) !important; }
.bg-white { background-color: #fff !important; }
.text-gray-900 { color: var(--kien-navy) !important; }
.text-gray-800, .text-gray-700 { color: #263a56 !important; }
.text-gray-600, .text-gray-500 { color: var(--kien-muted) !important; }
.border-gray-200, .border-gray-300 { border-color: var(--kien-line) !important; }
.rounded-lg { border-radius: 0.75rem !important; }
.rounded-xl { border-radius: 1rem !important; }
.shadow-sm { box-shadow: 0 8px 24px rgba(20, 33, 61, .055) !important; }
.shadow-md { box-shadow: 0 12px 30px rgba(20, 33, 61, .1) !important; }
.bg-red-600 { background-color: var(--kien-red) !important; }
.hover\\:bg-red-700:hover { background-color: #b51f30 !important; }
.text-red-600 { color: var(--kien-red) !important; }
.bg-red-100 { background-color: #fde8eb !important; }
.bg-red-50 { background-color: #fff2f3 !important; }
.border-red-400 { border-color: #ef7380 !important; }
.text-red-800 { color: #9f1d2b !important; }
.focus\\:ring-red-500:focus { --tw-ring-color: var(--kien-red) !important; }
main .max-w-4xl { max-width: 62rem; }
main h1,
main h2,
main h3,
main h4 {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -0.025em;
}
main h1 { font-weight: 400; }
main h2, main h3, main h4 { font-weight: 500; }
main > div > div > header { margin-bottom: 1.5rem !important; }
main > div > div > header h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
main > div > div > div.flex.items-center.text-sm { border-radius: 0.875rem; padding: .85rem 1.1rem; }
main > div > div > div.bg-white { padding: clamp(1.25rem, 3vw, 2rem); }
main textarea { border-radius: .875rem; }
@media (max-width: 720px) {
  .p-8 { padding: 1.25rem !important; }
  .space-x-4 { gap: .75rem; }
  main > div > div > div.flex.items-center.text-sm { overflow-x: auto; white-space: nowrap; }
}
/* Keep the persistent workspace shell visually quiet while content owns the hierarchy. */
nav a { transition: color .2s ease, background-color .2s ease; }
nav a:hover { color: var(--kien-red) !important; }
[data-state="active"] { color: var(--kien-red) !important; }

/* Inspera-style review & submit action: quiet grey tray with a centered paper-plane icon. */
.exam-submit-button {
  width: 77px !important;
  height: 53px !important;
  min-width: 77px !important;
  min-height: 53px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f0f1f3 !important;
  color: #5b5f63 !important;
  box-shadow: none !important;
  transition: background-color .16s ease, color .16s ease !important;
}
.exam-submit-button svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 1.8 !important;
}
.exam-submit-button:hover {
  background: #e4e6e9 !important;
  color: #34383c !important;
}
.exam-submit-button:focus-visible {
  outline: 2px solid #8a929a !important;
  outline-offset: -2px !important;
}

/* Keep navigation attention on the selected number while the question pane scrolls. */
.exam-workspace .is-targeted-question { outline: none; }
.exam-workspace .is-targeted-question .exam-question-number {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.exam-workspace .exam-question-nav-button.is-active {
  border-color: #4d5663;
}
.exam-workspace .exam-question-content :is(input, select, textarea):focus-visible {
  border-color: #4d5663;
  outline: 2px solid #4d5663;
  outline-offset: 1px;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .exam-workspace .exam-pane-scroll { scroll-behavior: auto !important; }
}

/* Measured from the supplied Inspera demo: Arial, 16px/24px body,
   black text, and a 1.1em bold passage heading. Scope to the exam so
   Practice Test and History keep their existing typography and palette.
   Keep --exam-font-size owned by the original accessibility controls. */
#root .exam-app,
#root .exam-app * {
  font-family: var(--kien-exam-font, Arial, Helvetica, sans-serif) !important;
  letter-spacing: 0;
}
#root .exam-app:is(.exam-contrast-dark, .exam-contrast-yellow) {
  --kien-reading-ink: var(--exam-ink);
}
#root .exam-app .exam-passage-content,
#root .exam-app .exam-passage-content :is(h1, h2, h3, p, .leading-relaxed, [data-paragraph-id], .text-gray-800, .text-gray-700, .text-gray-900),
#root .exam-app .exam-meta-bar :is(h2, p) {
  color: var(--kien-reading-ink, var(--exam-ink)) !important;
}
#root .exam-app .exam-passage-content :is(p, .leading-relaxed, [data-paragraph-id]) {
  font-size: var(--exam-font-size, 16px);
  line-height: 1.5;
}
#root .exam-app .exam-passage-title,
#root .exam-app .exam-passage-content > h1 {
  font-size: calc(var(--exam-font-size, 16px) * 1.1);
  line-height: 1.2;
  font-weight: 700;
}

/* A filter on a multiline inline mark creates a separate rectangular paint
   layer on hover. Keep highlighting inline and stable instead of filtering
   the text; selection, recolouring and click-to-remove remain SPA-owned. */
#root .exam-app mark.exam-highlight,
#root .exam-app mark.exam-highlight:is(:hover, :active) {
  filter: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
  outline: none !important;
  border: 0 !important;
}