/* Nest English — Beta UI Polish / Dark Mode / Branded Modals v1
   Global presentation guard: no feature logic, storage, API or routing changes. */
:root{
  --nest-modal-surface:#fffdf9;
  --nest-modal-surface-2:#f7fbf8;
  --nest-modal-border:rgba(12,117,86,.14);
  --nest-modal-accent:#0c7556;
  --nest-modal-accent-soft:rgba(12,117,86,.09);
  --nest-modal-shadow:0 28px 70px -24px rgba(15,23,42,.28),0 10px 30px -20px rgba(12,117,86,.18);
}
html.dark,html.ne-dark{
  --nest-modal-surface:#101c2b;
  --nest-modal-surface-2:#132438;
  --nest-modal-border:rgba(115,205,166,.18);
  --nest-modal-accent:#56d0a5;
  --nest-modal-accent-soft:rgba(86,208,165,.10);
  --nest-modal-shadow:0 30px 80px -24px rgba(0,0,0,.72),0 12px 32px -20px rgba(0,0,0,.45);
}

/* Global dark-mode text contrast guard.
   Only catches utility text that omitted an explicit dark variant. */
html.dark .text-slate-900,html.ne-dark .text-slate-900{color:#f8fafc !important}
html.dark .text-slate-800,html.ne-dark .text-slate-800{color:#f1f5f9 !important}
html.dark .text-slate-700,html.ne-dark .text-slate-700{color:#e2e8f0 !important}
html.dark .text-slate-600,html.ne-dark .text-slate-600{color:#cbd5e1 !important}
html.dark .text-slate-500,html.ne-dark .text-slate-500{color:#b7c4d0 !important}
html.dark .text-slate-400,html.ne-dark .text-slate-400{color:#a7b5c3 !important}
html.dark .text-slate-300,html.ne-dark .text-slate-300{color:#d5dde5 !important}
html.dark .text-slate-200,html.ne-dark .text-slate-200{color:#e8edf2 !important}
html.dark .text-slate-100,html.ne-dark .text-slate-100{color:#f2f5f7 !important}

/* Batch UX8 · #pdf-report-template (self-assessment report / certificate card) is a
   deliberately theme-invariant white "paper" surface — it stays white/print-ready in both
   light and dark mode so it can be shared, printed, or exported as an image consistently.
   The blanket html.dark .text-slate-* !important rules above have no awareness of that
   exception: they bleach any nested text-slate-900/800/700/600/500/400 utility toward
   near-white regardless of its actual (white) background, making report headings and labels
   unreadable in dark mode (root cause, confirmed by inspection — not a missing dark: variant,
   but a higher-priority !important override with no scoped exception). Re-assert the original
   light-surface ink colors specifically inside the report card; #pdf-report-template gives
   this rule set ID-level specificity so it wins over the class-level rules above regardless
   of source order, without touching the blanket rule itself or any other page. */
#pdf-report-template .text-slate-900{color:#0f172a !important}
#pdf-report-template .text-slate-800{color:#1e293b !important}
#pdf-report-template .text-slate-700{color:#334155 !important}
#pdf-report-template .text-slate-600{color:#475569 !important}
#pdf-report-template .text-slate-500{color:#64748b !important}
#pdf-report-template .text-slate-400{color:#94a3b8 !important}

/* Dark controls remain legible even when a component forgot its dark utility. */
html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark textarea,
html.dark select,
html.ne-dark input:not([type="checkbox"]):not([type="radio"]),
html.ne-dark textarea,
html.ne-dark select{
  color:#f4f7f8;
  caret-color:#72d8b1;
}
html.dark input::placeholder,html.dark textarea::placeholder,
html.ne-dark input::placeholder,html.ne-dark textarea::placeholder{color:#7f90a0 !important;opacity:1}

/* Guest teacher workspace — explicit contrast for compact stat cards. */
.nest-guest-stat{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(148,163,184,.16);
  border-radius:1rem;
  padding:.8rem;
}
.nest-guest-stat-label{color:#64748b;font-size:.68rem;line-height:1.35;font-weight:800}
.nest-guest-stat-value{color:#0f172a;font-size:1.15rem;line-height:1.2;font-weight:900;margin-top:.18rem}
html.dark .nest-guest-stat,html.ne-dark .nest-guest-stat{background:rgba(30,41,59,.78);border-color:rgba(148,163,184,.16)}
html.dark .nest-guest-stat-label,html.ne-dark .nest-guest-stat-label{color:#b8c5d2 !important}
html.dark .nest-guest-stat-value,html.ne-dark .nest-guest-stat-value{color:#f8fafc !important}

/* Branded native selects that are not converted for any reason. */
select:not(.nest-cs-native){
  appearance:none !important;
  -webkit-appearance:none !important;
  background-repeat:no-repeat !important;
  background-position:right .78rem center !important;
  padding-inline-end:2.1rem !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364756b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}
html[dir="rtl"] select:not(.nest-cs-native){background-position:left .78rem center !important;padding-inline-start:2.1rem !important;padding-inline-end:.8rem !important}
html.dark select:not(.nest-cs-native),html.ne-dark select:not(.nest-cs-native){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a7b5c3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important}

/* All custom dropdowns use the Nest surface language. */
.nest-cs{display:inline-flex;width:auto;max-width:100%;min-width:0;position:relative}.nest-cs-full{display:flex;width:100%}
.nest-cs-trigger{width:100%;max-width:none;min-height:44px;padding:.65rem .9rem;border-radius:1rem;border:1px solid rgba(148,163,184,.22);background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,251,248,.98));color:#263748;box-shadow:0 8px 20px -18px rgba(12,117,86,.35),inset 0 1px 0 rgba(255,255,255,.85);font-size:.84rem;font-weight:800}
html.dark .nest-cs-trigger,html.ne-dark .nest-cs-trigger{background:linear-gradient(180deg,rgba(24,39,56,.98),rgba(15,29,44,.98));border-color:rgba(148,163,184,.2);color:#eef4f6;box-shadow:0 12px 28px -22px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.035)}
.nest-cs-trigger:hover{border-color:rgba(12,117,86,.34);background:linear-gradient(180deg,#fff,#f5faf7)}
html.dark .nest-cs-trigger:hover,html.ne-dark .nest-cs-trigger:hover{border-color:rgba(86,208,165,.34);background:linear-gradient(180deg,#1c3147,#14283a)}
.nest-cs-list{left:0;right:auto;width:100%;min-width:0;max-width:min(360px,calc(100vw - 32px));margin-top:2px;padding:.45rem;border-radius:1.15rem;border:1px solid var(--nest-modal-border);background:var(--nest-modal-surface);box-shadow:var(--nest-modal-shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
html[dir="rtl"] .nest-cs-list{left:auto;right:0}
.nest-cs-option{min-height:44px;border-radius:.85rem;font-size:.84rem;font-weight:750;color:#334155;padding:.62rem .8rem}
html.dark .nest-cs-option,html.ne-dark .nest-cs-option{color:#e7eef2}
.nest-cs-option:hover,.nest-cs-option:focus{background:var(--nest-modal-accent-soft);color:#047857}
html.dark .nest-cs-option:hover,html.dark .nest-cs-option:focus,html.ne-dark .nest-cs-option:hover,html.ne-dark .nest-cs-option:focus{background:rgba(86,208,165,.11);color:#73d8b2}
.nest-cs-option.is-selected{background:rgba(12,117,86,.12);color:#0a7656}
html.dark .nest-cs-option.is-selected,html.ne-dark .nest-cs-option.is-selected{background:rgba(86,208,165,.14);color:#82dfbd}
.nest-service-field .nest-cs{width:100%}
.nest-service-field .nest-cs-trigger{min-height:48px;border-radius:.95rem}

/* Branded modal system: overlays + their primary surfaces. */
#sample-report-modal,#daily-egg-modal,#daily-challenge-modal,#exit-test-modal,#mock-exam-intro-modal,#goal-modal,#hoot-chat-modal,
#nest-teacher-auth-modal{
  background:radial-gradient(circle at 50% 0%,rgba(12,117,86,.10),transparent 38%),rgba(6,15,28,.72) !important;
  -webkit-backdrop-filter:blur(10px) saturate(120%) !important;
  backdrop-filter:blur(10px) saturate(120%) !important;
}
#sample-report-modal > .glass-panel,
#daily-egg-modal > .glass-panel,
#daily-challenge-modal > .glass-panel,
#exit-test-modal > .glass-panel,
#mock-exam-intro-modal > .glass-panel,
#goal-modal > .glass-panel,
#hoot-chat-modal > .glass-panel,
#nest-teacher-auth-modal > .relative[role="dialog"]{
  background:linear-gradient(180deg,var(--nest-modal-surface),var(--nest-modal-surface-2)) !important;
  border:1px solid var(--nest-modal-border) !important;
  box-shadow:var(--nest-modal-shadow) !important;
  color:#0f172a;
}
html.dark #sample-report-modal > .glass-panel,html.dark #daily-egg-modal > .glass-panel,html.dark #daily-challenge-modal > .glass-panel,html.dark #exit-test-modal > .glass-panel,html.dark #mock-exam-intro-modal > .glass-panel,html.dark #goal-modal > .glass-panel,html.dark #hoot-chat-modal > .glass-panel,
html.ne-dark #sample-report-modal > .glass-panel,html.ne-dark #daily-egg-modal > .glass-panel,html.ne-dark #daily-challenge-modal > .glass-panel,html.ne-dark #exit-test-modal > .glass-panel,html.ne-dark #mock-exam-intro-modal > .glass-panel,html.ne-dark #goal-modal > .glass-panel,html.ne-dark #hoot-chat-modal > .glass-panel,
html.dark #nest-teacher-auth-modal > .relative[role="dialog"],html.ne-dark #nest-teacher-auth-modal > .relative[role="dialog"]{color:#f4f7f8 !important}

/* Catch additional app dialogs without disturbing the account gateway. */
.nest-modal{background:radial-gradient(circle at 50% 0%,rgba(12,117,86,.10),transparent 38%),rgba(6,15,28,.72) !important;-webkit-backdrop-filter:blur(10px) saturate(120%) !important;backdrop-filter:blur(10px) saturate(120%) !important}
.nest-modal-panel{max-width:min(40rem,calc(100vw - 2rem));background:linear-gradient(180deg,var(--nest-modal-surface),var(--nest-modal-surface-2)) !important;border:1px solid var(--nest-modal-border) !important;border-radius:1.5rem !important;box-shadow:var(--nest-modal-shadow) !important}

/* Close controls feel intentional, not like generic browser buttons. */
#sample-report-modal .absolute.top-4 button,#daily-egg-modal .absolute.top-4 button,#daily-challenge-modal .absolute.top-4 button,#exit-test-modal .absolute.top-4 button,#mock-exam-intro-modal .absolute.top-4 button,#goal-modal .absolute.top-4 button,
#hoot-chat-modal button[aria-label="Close"],#nest-teacher-auth-modal [data-close]{
  border:1px solid rgba(148,163,184,.18) !important;
  box-shadow:0 8px 20px -18px rgba(15,23,42,.35) !important;
}

/* Teacher quick help modal keeps the same visual system. */
.nest-teacher-how-panel{background:linear-gradient(180deg,var(--nest-modal-surface),var(--nest-modal-surface-2)) !important;border-color:var(--nest-modal-border) !important;box-shadow:var(--nest-modal-shadow) !important}

@media(max-width:640px){
  .nest-cs-trigger{min-height:48px;font-size:.9rem}
  .nest-cs-list{max-width:calc(100vw - 28px);max-height:min(320px,52vh)}
}