/* Performer Alpha 0.5 — typography, accessible themes, welcome and library */
:root{
  --panel-bg:linear-gradient(145deg,rgba(21,25,32,.96),rgba(13,16,21,.98));
  --control-bg:#0b0e12;
  font-family:"Poppins",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
body{font-family:inherit;font-size:16px;line-height:1.55}
button,input,select,textarea{font-family:inherit;font-size:15px}
nav a{font-size:14px;font-weight:500;padding:12px 13px}
.brand span{font-size:14px}.brand small{font-size:9px}
.userbox strong{font-size:14px}.userbox a{font-size:13px}
.panel{background:var(--panel-bg);color:var(--text)}
.pagehead p,.hero p,.category-card p,.report-card p,.profile-upload p,.ai-settings p,.data-settings p,.library-settings p{font-size:15px;line-height:1.65}
.eyebrow{font-size:11px;line-height:1.4}
.btn{font-size:12px;min-height:44px}
.two-col label,.settings label,.login label,.module-form label,.compact-form label,.form-grid label,.category-card label{font-size:13px}
.metric>span,.daytop span,.nutrition-kpis span,.body-kpis span{font-size:11px}
.module-link,.panel summary,.filters a{font-size:11px}
.library h3{font-size:16px;line-height:1.35}.library small{font-size:13px}.library b{font-size:9px}

/* Welcome: a centered, deliberate composition instead of distant islands. */
.compact-welcome{
  min-height:auto;
  max-width:1220px;
  margin:clamp(24px,6vh,72px) auto 0;
  grid-template-columns:minmax(0,1fr) 260px;
  grid-template-rows:auto auto;
  column-gap:clamp(36px,6vw,90px);
  row-gap:32px;
  align-items:center;
}
.compact-welcome .welcome-copy h1{font-size:clamp(46px,4.2vw,66px);line-height:1.02;margin:12px 0 18px;letter-spacing:-.05em}
.compact-welcome .welcome-copy>p{font-size:16px;max-width:590px}
.compact-welcome .portrait-frame{width:250px;height:310px;aspect-ratio:auto;border-radius:24px;box-shadow:0 24px 70px rgba(0,0,0,.22)}
.compact-welcome .ai-welcome{grid-column:1/-1;min-height:0;padding:24px 26px;grid-template-columns:230px minmax(0,1fr);gap:24px}
.compact-welcome .ai-welcome header{align-self:start;padding-top:4px}
.compact-welcome .ai-welcome header>span{font-size:10px}.compact-welcome .ai-welcome header>span.offline{color:#dc8b55}
.compact-welcome .ai-welcome h2{font-size:22px;margin-bottom:5px}
.compact-welcome .ai-body form{grid-template-columns:130px minmax(220px,1fr) auto;margin-top:14px;align-items:stretch}
.compact-welcome .ai-body select{height:100%}
.compact-welcome .ai-body textarea{min-height:68px}
.ai-response{border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:0 10px 10px 0;padding:12px 15px;margin:10px 0 8px;line-height:1.65}
.ai-welcome blockquote{font-size:13px;margin-top:8px}.ai-setup-note{margin:10px 0 14px!important}

/* The library now lives under Settings and is useful at 200+ records. */
.library-settings{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.library-settings h2{margin:6px 0}.library-settings>strong{font-size:28px;color:var(--accent)}
.library-search{display:grid;grid-template-columns:minmax(240px,1fr) 190px 190px auto;gap:10px;margin-bottom:16px;padding:16px}
.filters a.active,.filters a:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.library article>span{background:var(--surface2);color:var(--accent);flex:0 0 40px}
.provider-status{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.provider-status span{border:1px solid var(--line);border-radius:999px;padding:7px 10px;color:var(--muted);font-size:11px}
.provider-status span.ready{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}

/* All light themes use the same semantic surfaces, controls and readable text. */
html[data-scheme="light"],html[data-theme="warm-light"],html[data-theme="mist-light"]{
  --panel-bg:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 90%,var(--surface2)));
  --control-bg:color-mix(in srgb,var(--surface) 82%,var(--surface2));
  --muted:#52606f;
}
html[data-theme="warm-light"]{--muted:#665c50}
html[data-theme="mist-light"]{--muted:#52676e}
html[data-scheme="light"] input,html[data-scheme="light"] select,html[data-scheme="light"] textarea,
html[data-theme="warm-light"] input,html[data-theme="warm-light"] select,html[data-theme="warm-light"] textarea,
html[data-theme="mist-light"] input,html[data-theme="mist-light"] select,html[data-theme="mist-light"] textarea{background:var(--control-bg);color:var(--text);border-color:var(--line)}
html[data-scheme="light"] .scoreboard,html[data-theme="warm-light"] .scoreboard,html[data-theme="mist-light"] .scoreboard{background:linear-gradient(120deg,var(--surface),var(--surface2));color:var(--text)}
html[data-scheme="light"] .score-ring,html[data-theme="warm-light"] .score-ring,html[data-theme="mist-light"] .score-ring{border-color:var(--line);border-top-color:var(--accent)}
html[data-scheme="light"] .template-picker input:checked+span,html[data-theme="warm-light"] .template-picker input:checked+span,html[data-theme="mist-light"] .template-picker input:checked+span,
html[data-scheme="light"] .mode,html[data-theme="warm-light"] .mode,html[data-theme="mist-light"] .mode,
html[data-scheme="light"] .setrow button,html[data-theme="warm-light"] .setrow button,html[data-theme="mist-light"] .setrow button,
html[data-scheme="light"] .prayers button,html[data-theme="warm-light"] .prayers button,html[data-theme="mist-light"] .prayers button,
html[data-scheme="light"] .history-table .thead,html[data-theme="warm-light"] .history-table .thead,html[data-theme="mist-light"] .history-table .thead{background:var(--surface2);color:var(--text)}
html[data-scheme="light"] .btn:not(.primary):not(.danger),html[data-theme="warm-light"] .btn:not(.primary):not(.danger),html[data-theme="mist-light"] .btn:not(.primary):not(.danger){background:var(--surface2);color:var(--text);border-color:var(--line)}
html[data-scheme="light"] .btn.primary,html[data-theme="warm-light"] .btn.primary,html[data-theme="mist-light"] .btn.primary{color:#fff}
html[data-scheme="light"] .menu,html[data-theme="warm-light"] .menu,html[data-theme="mist-light"] .menu{color:var(--text)}
html[data-scheme="light"] .prayers button.done,html[data-theme="warm-light"] .prayers button.done,html[data-theme="mist-light"] .prayers button.done{background:#e8f6ee;color:#164d30}

@media(max-width:900px){
  .compact-welcome{margin:12px auto 0;grid-template-columns:minmax(0,1fr) 170px;column-gap:24px;row-gap:22px}
  .compact-welcome .portrait-frame{width:165px;height:205px}
  .compact-welcome .ai-welcome{grid-template-columns:1fr;padding:20px}.compact-welcome .ai-welcome header{margin-bottom:0}
  .library-search{grid-template-columns:1fr 1fr}.library-search input{grid-column:1/-1}.library-search .btn{grid-column:1/-1}
}
@media(max-width:620px){
  body{font-size:15px}
  .pagehead h1{font-size:34px}.pagehead p{font-size:14px}
  .compact-welcome{margin-top:0;gap:18px;align-items:center}
  .compact-welcome .welcome-copy{width:100%}.compact-welcome .welcome-copy h1{font-size:38px;line-height:1.05;margin:8px 0 12px}
  .compact-welcome .welcome-copy>p{font-size:14px}
  .compact-welcome .portrait-frame{width:145px;height:180px;align-self:center;flex:0 0 auto;border-radius:18px}
  .compact-welcome .portrait-frame:after{font-size:7px;bottom:10px;right:8px}
  .compact-welcome .ai-welcome{width:100%;padding:17px}
  .compact-welcome .ai-welcome header{display:grid;grid-template-columns:42px 1fr auto}.compact-welcome .ai-welcome header i{width:42px;height:42px}
  .compact-welcome .ai-body form{grid-template-columns:1fr}.compact-welcome .ai-body select{height:46px}
  .library-search{grid-template-columns:1fr;padding:14px}.library-search input,.library-search .btn{grid-column:auto}
  .library{grid-template-columns:1fr}.library article{padding:16px}
  .settings-avatar{width:150px;height:150px;align-self:center}
}
