/* Skin only: CSS selectors follow the original renderers. Fonts are inherited. */
:root {
  color-scheme: light;
  --sun-paper: #fffaf2;
  --sun-white: #fffdf9;
  --sun-ink: #252c24;
  --sun-quiet: #555f55;
  --sun-line: #e8ded1;
  --sun-coral: #a63d2a;
  --sun-deep: #853022;
  --sun-peach: #f9e4da;
  --sun-honey: #fff0c5;
  --sun-mint: #e6f2e1;
  --sun-sky: #e4f1fa;
  --sun-green: #245643;
  --sun-shadow: 0 10px 30px #60392409;
}
@media screen {
  body {background:var(--sun-paper)!important;color:var(--sun-ink)}
  .ambient-canvas {background:linear-gradient(138deg,#fff4df 0%,transparent 40%,#ffefe53d 100%)}
  body>header {background:#fffcf6f5!important;border-color:var(--sun-line)!important}
  body>header>div {max-width:1240px;min-height:68px}
  #brand-home-btn {background:var(--sun-coral)!important;border-radius:15px;color:white}
  #brand-name-text {font-size:1.35rem;line-height:1.15}
  #header-context-line {color:var(--sun-quiet)}
  #main-nav {background:#f5ede1!important;border:0;gap:3px;padding:4px}
  #main-nav button {min-height:42px;white-space:nowrap}
  #main-nav button.bg-white {background:white!important;color:var(--sun-deep)!important;box-shadow:0 2px 8px #69422815}
  #app-root {max-width:1240px;padding-block-start:25px}
  #app-root .bento-card, #member-modal>div {
    background:var(--sun-white);border-color:var(--sun-line);border-radius:26px;
    box-shadow:var(--sun-shadow);backdrop-filter:none;
  }
  #app-root .bento-hover:hover {box-shadow:0 9px 24px #57432214}
  #app-root :is(h1,h2,h3),#brand-name-text {color:var(--sun-ink)!important}
  #app-root :is(.text-slate-600,.text-slate-500,.text-slate-400), #member-modal :is(.text-slate-500,.text-slate-600) {color:var(--sun-quiet)}
  #app-root :is(.border-slate-100,.border-slate-200), #member-modal :is(.border-slate-100,.border-slate-200) {border-color:var(--sun-line)}
  #app-root button.bg-slate-900,body>header button.bg-slate-900,#member-modal button.bg-slate-900 {
    background:var(--sun-coral)!important;color:white!important;border-color:var(--sun-coral)!important
  }
  #app-root button.bg-slate-900:hover,body>header button.bg-slate-900:hover,#member-modal button.bg-slate-900:hover {background:var(--sun-deep)!important}
  #app-root button:not(:disabled):hover,#member-modal button:not(:disabled):hover {filter:brightness(.97)}
  :is(#app-root,#member-modal,body>header) :is(button,select,input,a):focus-visible {
    outline:3px solid var(--sun-green)!important;outline-offset:3px;
  }
  :is(#app-root,#member-modal) select, :is(#app-root,#member-modal) input:not([type=checkbox]) {min-height:40px}
  :is(#app-root,#member-modal) input[type=checkbox] {accent-color:var(--sun-coral)}
  :is(#app-root,#member-modal) button, body>header button {min-height:40px}
  #app-root .leading-relaxed {line-height:1.75}
  /* Onboarding: the original first-step introduction, not a new landing page. */
  #app-root>div:has(button[onclick^="selectWizardReader("]) {max-width:1120px}
  #app-root>div:has(button[onclick^="selectWizardReader("])>div:first-child {
    min-height:278px;text-align:start;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    padding-block:25px;
    padding-inline:30px 48%;
    background:#fff0d7 url("assets/sunlit-majlis.webp") left center / 44% auto no-repeat;
    border:1px solid #f0dfc5;border-radius:30px;box-shadow:var(--sun-shadow)
  }
  html[dir=ltr] #app-root>div:has(button[onclick^="selectWizardReader("])>div:first-child {background-position:right center}
  #app-root>div:has(button[onclick^="selectWizardReader("]) h1 {font-size:clamp(1.9rem,3vw,3.1rem);line-height:1.18}
  #app-root button[onclick^="selectWizardReader("]:nth-child(1) {background:var(--sun-peach)!important}
  #app-root button[onclick^="selectWizardReader("]:nth-child(2) {background:var(--sun-mint)!important}
  #app-root button[onclick^="selectWizardReader("]:nth-child(3) {background:var(--sun-sky)!important}
  #app-root button[onclick^="selectWizardReader("]:nth-child(4) {background:var(--sun-honey)!important}
  #app-root button[onclick^="selectWizardReader("].border-slate-900 {
    border-color:var(--sun-coral)!important;box-shadow:0 0 0 2px #a63d2a30!important
  }
  /* Dashboard: separate the three kinds of information without recoloring the element data. */
  #app-root>div>div.lg\:grid-cols-12>.bento-card:nth-child(1) {background:var(--sun-peach)}
  #app-root>div>div.lg\:grid-cols-12>.bento-card:nth-child(2) {background:var(--sun-sky)}
  #app-root>div>div.lg\:grid-cols-12>.bento-card:nth-child(3) {background:var(--sun-mint)}
  #app-root .bento-card:has(>div button[onclick^="selectMemberAndOpenProfile("]) h2 {font-size:1.19rem}
  #app-root .bento-card:has(>div button[onclick^="selectMemberAndOpenProfile("])>p {background:#fbf1e3;border-color:#eddcc8;font-size:.86rem}
  /* Assessment: progress and setup recede; question and ranking targets get the focus. */
  #app-root .bento-card:has(button[onclick^="switchQuizMode("]) {background:var(--sun-sky)}
  #app-root .bento-card:has(.option-card) {border-color:#eddbbf;box-shadow:0 12px 30px #6942280e}
  #app-root .bento-card:has(.option-card) h2 {font-size:clamp(1.45rem,3vw,2.25rem);line-height:1.3}
  #app-root .option-card {min-height:60px}
  #app-root .option-card>span:first-child {font-size:1rem}
  /* Report and pair / SOS / Majlis cards keep their original data and controls. */
  #app-root .bento-card:has(button[onclick*="state.profileReportMode="]) {background:var(--sun-sky)}
  #app-root .bento-card:has(select[onchange^="state.pairAId="]) {background:#fffbf3}
  #app-root .bento-card:has(button[onclick^="state.sosSituationKey="]) {background:#f4f9ef}
  #app-root .bento-card:has(button[onclick^="state.sosSituationKey="]) .bg-emerald-50 {background:var(--sun-mint)}
  #app-root .bento-card:has(button[onclick^="state.sosSituationKey="]) .bg-emerald-50 p {font-size:.96rem}
  #app-root .bento-card:has(button[onclick^="state.sosSituationKey="]) .bg-emerald-50 button {font-size:.84rem}
  #app-root>div:has(button[onclick^="state.sosSituationKey="])>.bento-card:last-child {background:var(--sun-honey)}
}
@media screen and (max-width:767px) {
  #app-root {padding-block-start:14px}
  #app-root .bento-card {border-radius:20px}
  #main-nav:not(.hidden) {order:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  #main-nav button {min-height:44px;white-space:normal;padding-inline:6px}
  body>header>div {gap:7px}
  #app-root>div:has(button[onclick^="selectWizardReader("])>div:first-child {
    min-height:0;padding:17px;text-align:start;background-image:none;border-radius:22px
  }
  #app-root>div:has(button[onclick^="selectWizardReader("]) .bento-card>div:first-of-type {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #app-root button[onclick^="selectWizardReader("] {padding:9px;gap:6px}
  #app-root button[onclick^="selectWizardReader("] svg {width:36px;height:36px}
  #app-root .option-card {min-height:54px}
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {animation-duration:.01ms!important;transition-duration:.01ms!important}
  .bento-hover:hover,.option-card:active {transform:none}
}