/* SRP People — Appearance (per-user): 4 classic fonts × 3 screen styles.
   <html data-font="…" data-skin="…"> is set in the page head by lib/brand.php (look_tags) before first paint.
   Works by re-pointing each app's own variables (--sans / --body / --display, --bg / --panel / --surface / --line),
   so the synced artifact files are never edited. Selectors are kept more specific than the apps' own
   :root and dark-mode rules so the choice wins in both light and dark. */

/* ---------- fonts ---------- */
html[data-font]:not([data-font="lato"]){--sans:var(--look-font);--body:var(--look-font);--display:var(--look-font)}
html[data-font]:not([data-font="lato"]) body,
html[data-font]:not([data-font="lato"]) #siteBar,
html[data-font]:not([data-font="lato"]) #mNavBtn{font-family:var(--look-font)}
/* serif faces run wider and taller than Lato: keep tables and tiles from crowding */
html[data-font="merriweather"] body,html[data-font="sourceserif"] body{letter-spacing:0}
html[data-font="merriweather"] h1,html[data-font="merriweather"] h2{letter-spacing:-.01em}

/* ---------- Glass ---------- */
html:root[data-skin="glass"]{
  --bg:transparent;
  --panel:rgba(255,255,255,.58);--surface:rgba(255,255,255,.58);
  --panel2:rgba(255,255,255,.42);--surface-2:rgba(255,255,255,.42);
  --line:rgba(255,255,255,.75);
  --glass-wash:
    radial-gradient(1100px 620px at 8% -8%,rgba(253,214,0,.30),transparent 60%),
    radial-gradient(900px 700px at 100% 0%,rgba(88,66,180,.32),transparent 62%),
    radial-gradient(900px 700px at 40% 110%,rgba(46,55,144,.22),transparent 60%),
    linear-gradient(160deg,#e8ebfb 0%,#dde2f6 50%,#eceffa 100%);
  --glass-shadow:0 8px 28px rgba(28,32,90,.10),inset 0 1px 0 rgba(255,255,255,.7);
}
@media (prefers-color-scheme:dark){
  html:root[data-skin="glass"]:not([data-theme="light"]){
    --panel:rgba(26,30,72,.52);--surface:rgba(26,30,72,.52);
    --panel2:rgba(36,41,96,.45);--surface-2:rgba(36,41,96,.45);
    --line:rgba(255,255,255,.13);
    --glass-wash:
      radial-gradient(1000px 600px at 8% -8%,rgba(253,214,0,.13),transparent 60%),
      radial-gradient(900px 700px at 100% 0%,rgba(120,96,230,.32),transparent 62%),
      linear-gradient(160deg,#0a0c27 0%,#131848 55%,#0b0d2a 100%);
    --glass-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
  }
}
html:root[data-skin="glass"][data-theme="dark"]{
  --panel:rgba(26,30,72,.52);--surface:rgba(26,30,72,.52);
  --panel2:rgba(36,41,96,.45);--surface-2:rgba(36,41,96,.45);
  --line:rgba(255,255,255,.13);
  --glass-wash:
    radial-gradient(1000px 600px at 8% -8%,rgba(253,214,0,.13),transparent 60%),
    radial-gradient(900px 700px at 100% 0%,rgba(120,96,230,.32),transparent 62%),
    linear-gradient(160deg,#0a0c27 0%,#131848 55%,#0b0d2a 100%);
  --glass-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
}
html:root[data-skin="glass"]{background:var(--glass-wash);background-color:#e3e7f8;min-height:100%}
html:root[data-skin="glass"] body{background:transparent!important}
html:root[data-skin="glass"] .solo,html:root[data-skin="glass"] .solo-body,html:root[data-skin="glass"] .stage,html:root[data-skin="glass"] main{background-color:transparent}
html:root[data-skin="glass"] .solo{background:var(--glass-wash)!important}
html:root[data-skin="glass"] :is(.card,.kpi,.panel,.k2,.tile,.gate-card,.dpanel,.modal,.sheet,.table-wrap,.tbl){
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:var(--glass-shadow);border-color:var(--line)}
html:root[data-skin="glass"] :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]){
  background-color:rgba(255,255,255,.55)}
@media (prefers-color-scheme:dark){html:root[data-skin="glass"]:not([data-theme="light"]) :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]){background-color:rgba(10,12,40,.45)}}
html:root[data-skin="glass"][data-theme="dark"] :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]){background-color:rgba(10,12,40,.45)}
/* phones: lighter blur keeps scrolling smooth */
@media (max-width:820px){html:root[data-skin="glass"] :is(.card,.kpi,.panel,.k2,.tile,.table-wrap,.tbl){-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html:root[data-skin="glass"]{--panel:rgba(255,255,255,.9);--surface:rgba(255,255,255,.9)}
}

/* ---------- Paper ---------- */
html:root[data-skin="paper"]{
  --bg:#f5f0e6;--panel:#fffdf8;--surface:#fffdf8;--panel2:#f3ede1;--surface-2:#f3ede1;--line:#e3dac8;
  --paper-shadow:0 1px 2px rgba(70,50,15,.06),0 6px 18px rgba(70,50,15,.07);
}
@media (prefers-color-scheme:dark){
  html:root[data-skin="paper"]:not([data-theme="light"]){
    --bg:#16140f;--panel:#211e17;--surface:#211e17;--panel2:#2a261e;--surface-2:#2a261e;--line:#3b3529;
    --paper-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.28);
  }
}
html:root[data-skin="paper"][data-theme="dark"]{
  --bg:#16140f;--panel:#211e17;--surface:#211e17;--panel2:#2a261e;--surface-2:#2a261e;--line:#3b3529;
  --paper-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.28);
}
html:root[data-skin="paper"] :is(.card,.kpi,.panel,.k2,.tile,.gate-card){box-shadow:var(--paper-shadow);border-color:transparent}
html:root[data-skin="paper"] body{line-height:1.55}