/* Shared PALA application skin. Keep exam pane sizing in test-system.css. */
:root {
  color-scheme: light;
  --pala-primary: #C43161;
  --pala-focus: #C43161;
  --pala-page: #F8FAFC;
  --pala-surface: #FFFFFF;
  --pala-inset: #F8FAFC;
  --pala-heading: #1E293B;
  --pala-text: #334155;
  --pala-muted: #475569;
  --pala-border: #E2E8F0;
}
:root.dark {
  color-scheme: dark;
  --pala-focus: #EA7FA5;
  --pala-page: #0F172A;
  --pala-surface: #1E293B;
  --pala-inset: #0F172A;
  --pala-heading: #F1F5F9;
  --pala-text: #CBD5E1;
  --pala-muted: #CBD5E1;
  --pala-border: #334155;
}
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; background-color: var(--pala-page); color: var(--pala-text); }
h1, h2, h3, h4 { color: var(--pala-heading); }
h1, h2 { letter-spacing: -.025em; }
:is(button, a, input, textarea, select, [tabindex]):focus-visible,
.option-radio:focus-visible + div { outline: 2px solid var(--pala-focus); outline-offset: 3px; }
button, input, select, textarea { font-family: inherit; }
button, a.test-return { min-height: 44px; }
button { letter-spacing: normal; text-transform: none; }
input:not([type='radio']):not([type='checkbox']):not([type='range']), select, textarea {
  font-size: 16px; border-radius: 12px; border-color: var(--pala-border);
  background-color: var(--pala-inset); color: var(--pala-heading);
}
input:not([type='radio']):not([type='checkbox']):not([type='range']), select { min-height: 48px; }
input:focus, textarea:focus, select:focus { border-color: var(--pala-focus); box-shadow: none; }
input[type='radio'], input[type='checkbox'] { accent-color: var(--pala-primary); }
body > header { border-color: var(--pala-border); }
body:not([data-test-screen='test']) > header { min-height: calc(68px + env(safe-area-inset-top, 0px)); }
.test-return, .test-secondary { border-radius: 12px; min-height: 44px; background: var(--pala-surface); color: var(--pala-text); border-color: var(--pala-border); }
.test-return:hover, .test-secondary:hover { background: #FBEAF0; color: #9E254B; border-color: #C43161; }
#nav-timer-container, #timer { font-variant-numeric: tabular-nums; }
a.group.rounded-\[2rem\] { border-radius: 24px; border-color: var(--pala-border); }
a.group.rounded-\[2rem\]:hover { border-color: var(--pala-focus); }
.text-custom-pink-500 { color: #C43161; }
/* A shared opening hierarchy; olive supports information, pink leads actions. */
#start-screen { max-width: 56rem; border-radius: 24px; border-color: var(--pala-border); box-shadow: none; animation: none; }
#start-screen #test-title { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.3; color: var(--pala-heading); margin-bottom: 12px; }
.test-centre-name { font-size: .9375rem; font-weight: 500; line-height: 1.5; color: var(--pala-muted); }
.test-opening-instructions { padding: 24px; margin-bottom: 32px; border: 1px solid #E9F0CD; border-radius: 16px; background: #F4F7E6; }
.test-opening-instructions h2 { color: #465705; }
.test-opening-instructions strong { color: #465705; font-size: inherit; }
.dark .test-opening-instructions { background: #1F2606; border-color: #465705; }
.dark .test-opening-instructions :is(h2, strong) { color: #D6EB7C; }
#btn-resume { background: #5D7308; color: white; }
#btn-resume:hover { background: #465705; }
.dark #btn-resume { background: #D6EB7C; color: #1F2606; }
.dark #btn-resume:hover { background: #E9F0CD; }
.app-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.app-header-inner > img { grid-column: 2; max-width: 100%; }
.test-header-inner:has(.site-header-actions) { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; }
.test-header-inner > img { justify-self: center; }
.site-logout { margin: 0; }
.site-header-actions { grid-column: 4; justify-self: end; display: flex; align-items: center; gap: 8px; }
.app-header-inner .site-header-actions { grid-column: 3; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; padding: 0; border: 1px solid var(--pala-border); border-radius: 12px; background: var(--pala-surface); color: var(--pala-text); cursor: pointer; }
.theme-toggle:hover { background: var(--pala-inset); border-color: var(--pala-focus); }
.theme-icon-sun, .dark .theme-icon-moon { display: none; }
.dark .theme-icon-sun { display: block; }
.site-logout button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; min-width: 44px; min-height: 44px; border: 1px solid var(--pala-border); border-radius: 12px; color: var(--pala-muted); background: var(--pala-surface); font-size: 14px; font-weight: 500; cursor: pointer; }
.site-logout button:hover { background: #F4F7E6; border-color: #5D7308; color: #465705; }
.dark .site-logout button:hover { background: #1F2606; color: #D6EB7C; }
@media (max-width: 639px) {
  .site-logout span { display: none; }
  .site-logout button { padding: 8px; }
  .test-header-inner:has(.site-header-actions) { gap: 8px; }
  .test-header-inner > img { max-width: min(150px, 25vw); height: auto; }
  .test-opening-instructions { padding: 16px; }
}
@media print { .site-header-actions { display: none !important; } }
@media (min-width: 1280px) { body:not([data-test-screen='test']) > header { min-height: calc(72px + env(safe-area-inset-top, 0px)); } }
/* Retain readable utility-based content and dynamically rendered exam panels. */
.dark :is(.bg-white, [class*='bg-white/']) { background-color: var(--pala-surface); }
.dark :is(.bg-slate-50, .bg-slate-100, [class*='bg-slate-50/']) { background-color: var(--pala-inset); }
.dark :is(.text-slate-900, .text-slate-800, .text-slate-700) { color: var(--pala-heading); }
.dark :is(.text-slate-600, .text-slate-500, .text-slate-400) { color: var(--pala-muted); }
.dark :is(.border-white, .border-slate-100, .border-slate-200, .border-slate-300) { border-color: var(--pala-border); }
.dark :is(.text-custom-pink-500, .text-custom-pink-600, .text-custom-pink-700) { color: #EA7FA5; }
.dark :is(.bg-custom-pink-50, .bg-custom-pink-100) { background-color: #5C1228; color: #F8D5E1; }
.dark :is(.bg-green-50, .bg-green-100, .bg-emerald-50) { background-color: #1F2606; color: #E9F0CD; }
.dark :is(.text-green-500, .text-green-600, .text-green-700, .text-emerald-700) { color: #D6EB7C; }
.dark .ielts-test :is(.scroll-pane, #exam-toolbar, #exam-navigation, .question-instructions, .prose th) { background: var(--pala-surface); color: var(--pala-text); border-color: var(--pala-border); }
.dark .ielts-test .prose { color: var(--pala-text); }
.dark .option-radio:checked + div { background: #5C1228; border-color: #EA7FA5; }
.dark #exam-parts button[aria-selected='true'] { background: #5C1228; color: #F8D5E1; border-bottom-color: #EA7FA5; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Opaque edge surfaces let Safari blend its chrome with the current theme. */
html { background-color: var(--pala-surface); touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; }
body > header, body > footer { background-color: var(--pala-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
body > header { height: calc(64px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); transition-property: background-color, border-color; }
body > header > div, body > footer > div, body > main {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
body > main { min-width: 0; }
body > footer { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
.ielts-test[data-test-screen='test'] { height: 100vh; height: 100dvh; min-height: 0; }
.ielts-test[data-test-screen='test'] > header { height: calc(52px + env(safe-area-inset-top, 0px)); }
.ielts-test #exam-navigation { padding-bottom: env(safe-area-inset-bottom, 0px); }
.ielts-test #exam-toolbar, .ielts-test #exam-navigation {
  padding-left: max(10px, env(safe-area-inset-left, 0px));
  padding-right: max(10px, env(safe-area-inset-right, 0px));
}
.app-header-inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
@media (pointer: coarse) {
  .exam-tools .test-secondary, .exam-tools #btn-submit-test,
  #exam-questions button, .exam-overview-questions button { min-height: 44px; min-width: 44px; }
}

@media (min-width: 768px) {
  .ielts-test #exam-toolbar, .ielts-test #exam-navigation {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
}

/* Exam panes scroll independently, so each needs landscape notch clearance. */
.ielts-test .split-container > .scroll-pane {
  padding-left: max(28px, env(safe-area-inset-left, 0px));
  padding-right: max(28px, env(safe-area-inset-right, 0px));
}
@media (max-width: 767px) {
  .ielts-test .split-container > .scroll-pane {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}
body:not(.ielts-test) #test-screen > .sticky { top: calc(76px + env(safe-area-inset-top, 0px)); }