/* ════════════════════════════════════════════════════════════════
   Neurify — "Soft UI" override layer
   Pillowy neumorphic cards · gradient rings · glossy pill toggles ·
   pastel gradient tiles · floating bottom nav. Loaded AFTER
   neurify-app.css so these rules win. Gradient theme driven by
   [data-grad] on .device (aurora | sunset | ocean | mint).
   ════════════════════════════════════════════════════════════════ */

/* ─── gradient themes ─── */
.device {
  /* default = Sundown (full dusk spectrum: indigo → plum → magenta → coral → gold) */
  --grad-a:#ffc97e; --grad-b:#f97a6d; --grad-c:#ca4e79; --grad-d:#6b3a8f; --grad-e:#3a2c6e;
  --grad: linear-gradient(135deg, #ffc97e 0%, #ff9e6b 20%, #f97a6d 38%, #ca4e79 56%, #8a4090 74%, #5a3a8e 88%, #3a2c6e 100%);
  --grad-soft: linear-gradient(135deg, color-mix(in srgb,#ffc97e 30%, #fff) 0%, color-mix(in srgb,#f97a6d 20%, #fff) 38%, color-mix(in srgb,#ca4e79 17%, #fff) 64%, color-mix(in srgb,#5a3a8e 16%, #fff) 100%);
  --accent:#ca4e79; --accent-deep:#a83c63; --accent-tint:#fae8f0;
  --soft-1: 0 4px 14px rgba(90,60,82,0.10), 0 1px 3px rgba(90,60,82,0.06);
  --soft-2: 0 16px 38px rgba(90,60,82,0.14), 0 3px 8px rgba(90,60,82,0.07);
  --soft-press: inset 0 2px 6px rgba(90,60,82,0.10);
  --ring-track:#efe1ea;
}
/* Sage — cream → sage → moss → forest spectrum (light) */
.device[data-grad="sage"] {
  --grad-a:#eef0dc; --grad-b:#c2d2ab; --grad-c:#8fae83; --grad-d:#5f7d5b; --grad-e:#3f5a44;
  --grad: linear-gradient(135deg, #eef0dc 0%, #c2d2ab 28%, #8fae83 54%, #5f7d5b 78%, #3f5a44 100%);
  --grad-soft: linear-gradient(135deg, color-mix(in srgb,#c2d2ab 34%, #fff) 0%, color-mix(in srgb,#8fae83 26%, #fff) 55%, color-mix(in srgb,#5f7d5b 18%, #fff) 100%);
  --accent:#5f7d5b; --accent-deep:#4a6647; --accent-tint:#e8eede;
  --surface:#fffdf8;
  --soft-1: 0 4px 14px rgba(90,95,75,0.10), 0 1px 3px rgba(90,95,75,0.06);
  --soft-2: 0 16px 38px rgba(90,95,75,0.14), 0 3px 8px rgba(90,95,75,0.07);
  --ring-track:#e3dccd;
}
/* Reef — teal-blue · soft teal · cream · coral (light, easy reading) */
.device[data-grad="reef"] {
  --grad-a:#3F9AAE; --grad-b:#79C9C5; --grad-c:#FFE2AF; --grad-d:#F96E5B;
  --grad: linear-gradient(135deg, #3F9AAE 0%, #79C9C5 38%, #FFE2AF 68%, #F96E5B 100%);
  --grad-soft: linear-gradient(135deg, color-mix(in srgb,#3F9AAE 16%, #fff) 0%, color-mix(in srgb,#79C9C5 18%, #fff) 45%, color-mix(in srgb,#FFE2AF 40%, #fff) 78%, color-mix(in srgb,#F96E5B 16%, #fff) 100%);
  --accent:#3F9AAE; --accent-deep:#2d7e92; --accent-tint:#e4f3f3;
  --surface:#ffffff;
  --soft-1: 0 4px 14px rgba(63,120,135,0.10), 0 1px 3px rgba(63,120,135,0.06);
  --soft-2: 0 16px 38px rgba(63,120,135,0.13), 0 3px 8px rgba(63,120,135,0.06);
  --ring-track:#e2ecec;
}
/* Ember — black + reds (dark) */
.device[data-grad="ember"] {
  --grad-a:#ff4a3a; --grad-b:#950101; --grad-c:#3d0000;
  --grad: linear-gradient(135deg, #ff3b30 0%, #950101 56%, #3d0000 100%);
  --accent:#ff5247; --accent-deep:#ff7a70; --accent-tint:rgba(255,59,48,0.18);
  --bg:#120606; --surface:#1f0d0d;
  --grey-900:#f4ecec; --grey-800:#e8dede; --grey-700:#ccc1c1; --grey-600:#a89c9c; --grey-500:#8c8080;
  --grey-400:#6b5f5f; --grey-300:#4d4040; --grey-200:#382b2b; --grey-100:#2c2020; --grey-50:#241818;
  --g-blue-tint:rgba(138,180,248,0.16); --g-red-tint:rgba(242,139,130,0.16); --g-yellow-tint:rgba(253,214,99,0.15); --g-green-tint:rgba(129,201,149,0.16);
  --g-blue-deep:#8ab4f8; --g-red-deep:#f28b82; --g-yellow-deep:#fdd663; --g-green-deep:#81c995;
  --grad-soft: linear-gradient(135deg, color-mix(in srgb,var(--grad-a) 28%, var(--surface)) 0%, color-mix(in srgb,var(--grad-c) 42%, var(--surface)) 100%);
  --soft-1:0 4px 14px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.35);
  --soft-2:0 16px 38px rgba(0,0,0,0.55), 0 3px 8px rgba(0,0,0,0.38);
  --soft-press: inset 0 2px 6px rgba(0,0,0,0.45);
  --ring-track:#3a1818;
}

/* ─── ground (per theme) ─── */
.device { background: linear-gradient(168deg,#faf2f6 0%, #f4eaf0 60%, #f1e6ee 100%); color: var(--grey-900); }
.device[data-grad="sage"]   { background: linear-gradient(168deg,#f8ede3 0%, #f1e7db 100%); }
.device[data-grad="reef"]   { background: linear-gradient(168deg,#eef5f4 0%, #e7f0ef 100%); }
.device[data-grad="ember"]  { background: linear-gradient(168deg,#150808 0%, #0a0404 100%); }
.device button { color: inherit; }
.screen { background: transparent; }
.statusbar { color: var(--grey-800); }

/* soft radius + shadow on every card-like surface */
.device .focus-card,
.device .stat,
.device .cont-card,
.device .qa,
.device .atlas-row,
.device .atlas-card2,
.device .chap-row,
.device .sr-row,
.device .quiz-vignette,
.device .pf-stats,
.device .pf-prog-card,
.device .pf-list,
.device .ov-card,
.device .ring-card,
.device .quiz-opt,
.device .search-field {
  box-shadow: var(--soft-2);
  border: none;
}
.device .stat, .device .qa, .device .cont-card, .device .sr-row,
.device .atlas-row, .device .chap-row, .device .quiz-vignette { box-shadow: var(--soft-1); }

.device .focus-card { border-radius: 30px; }
.device .stat { border-radius: 24px; }
.device .cont-card, .device .qa, .device .atlas-row, .device .atlas-card2 { border-radius: 24px; }
.device .chap-row, .device .sr-row, .device .quiz-opt, .device .quiz-vignette { border-radius: 22px; }

/* press feedback */
.device .focus-card:active, .device .stat:active, .device .qa:active,
.device .cont-card:active, .device .chap-row:active, .device .atlas-row:active,
.device .sr-row:active, .device .ov-metric:active, .device .grad-pick:active { transform: scale(0.985); }
.device .focus-card, .device .stat, .device .qa, .device .cont-card,
.device .chap-row, .device .atlas-row, .device .sr-row { transition: transform 0.14s ease; }

/* ─── focus card → pastel gradient hero ─── */
.device .focus-card { background: var(--grad-soft); }
.device .focus-card .focus-cta { background: var(--grad); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--grad-b) 40%, transparent); }

/* ─── gradient ring dial (signature) ─── */
.ring-dial { position: relative; flex: none; display: grid; place-items: center; }
.ring-dial svg { transform: rotate(0deg); display: block; }
.ring-dial .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ring-dial .rv { font-family: var(--font-flex); font-weight: 600; letter-spacing: -1px; color: var(--grey-900); line-height: 1; }
.ring-dial .rv small { font-weight: 500; color: var(--grey-500); }
.ring-dial .rl { font-size: 11px; font-weight: 600; letter-spacing: 0.3px; color: var(--grey-500); text-transform: uppercase; margin-top: 5px; }

/* home overview card: ring + side metrics */
.device .ov-card {
  margin: 16px 16px 0; background: var(--surface); border-radius: 28px; padding: 18px;
  display: flex; align-items: center; gap: 16px;
}
.ov-card .ring-dial .rv { font-size: 34px; }
.ov-side { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.ov-metric { background: linear-gradient(160deg,#f6f8fd,#eef2fb); border: none; border-radius: 18px; padding: 13px 15px; text-align: left; cursor: pointer; box-shadow: var(--soft-press); }
.ov-metric .ovk { font-size: 11.5px; color: var(--grey-600); font-weight: 600; }
.ov-metric .ovv { font-size: 24px; font-weight: 600; font-family: var(--font-flex); letter-spacing: -0.6px; color: var(--grey-900); margin-top: 2px; line-height: 1; }
.ov-metric .ovv small { font-size: 14px; color: var(--grey-500); }

/* ─── glossy gradient pill toggle ─── */
.device .switch { width: 52px; height: 30px; border-radius: 30px; background: #d9deec; box-shadow: var(--soft-press); }
.device .switch.on { background: var(--grad); box-shadow: 0 4px 12px color-mix(in srgb, var(--grad-b) 38%, transparent); }
.device .switch .knob { width: 24px; height: 24px; margin: 3px; box-shadow: 0 2px 5px rgba(40,50,90,0.28); }
.device .switch.on .knob { transform: translateX(22px); }

/* ─── floating bottom nav: soft white pill + raised gradient center ─── */
.device .nav {
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 14px 34px rgba(70,84,140,0.18), inset 0 1px 1px rgba(255,255,255,0.9);
  border-radius: 30px; height: 66px;
}
.device .nav-search {
  width: 52px; height: 52px; border-radius: 50%; background: var(--grad);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--grad-b) 50%, transparent), inset 0 1px 1px rgba(255,255,255,0.5);
}
.device .nav .nb { color: var(--grey-500); }
.device .nav .nb.on { color: var(--accent-deep); }
.device .nav .nb.on .nbic { background: var(--accent-tint); }

/* ─── pastel gradient tiles ─── */
.device .qa .qic { background: var(--grad-soft) !important; color: var(--accent-deep) !important; border-radius: 16px; box-shadow: inset 0 1px 2px rgba(255,255,255,0.7); }
.device .cont-ic { background: var(--grad-soft); color: var(--accent-deep); border-radius: 16px; }
.device .chap-num { background: var(--grad-soft); color: var(--accent-deep); border-radius: 12px; }
.device .pill { background: var(--surface); border: none; box-shadow: var(--soft-1); border-radius: 100px; padding: 10px 16px 10px 13px; }
.device .pill .pd { background: var(--grad); }

/* ─── Themen, nach klinischen Bereichen gruppiert (Start) ─── */
.device .tgrp { margin: 0 16px; }
.device .tgrp + .tgrp { margin-top: 18px; }
.device .tgrp-h { display: flex; align-items: center; gap: 9px; margin: 0 4px 9px; }
.device .tgl { font-family: var(--font-flex); font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--grey-500); }
.device .tgline { flex: 1; height: 1px; background: linear-gradient(90deg, var(--grey-200), transparent); }
.device .tgn { font-size: 11px; font-weight: 700; color: var(--accent-deep); background: var(--accent-tint); border-radius: 20px; padding: 2px 9px; }
.device .tgrp-card { background: var(--surface); border-radius: 22px; box-shadow: var(--soft-1); padding: 5px 6px; }
.device .trow { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 16px; border: none; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: transform 0.14s ease; }
.device .trow + .trow { box-shadow: inset 0 1px 0 var(--grey-100); }
.device .trow:active { transform: scale(0.99); }
.device .tchip { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-family: var(--font-flex); font-weight: 700; font-size: 15px; background: var(--c-tint, var(--accent-tint)); color: var(--c-deep, var(--accent-deep)); }
.device .trow-main { flex: 1; min-width: 0; }
.device .trow-t { display: block; font-family: var(--font-flex); font-size: 14.5px; font-weight: 600; letter-spacing: -0.1px; line-height: 1.15; color: var(--grey-900); }
.device .trow-bar { display: block; height: 4px; border-radius: 4px; background: var(--ring-track, var(--grey-100)); margin-top: 7px; overflow: hidden; }
.device .trow-bar i { display: block; height: 100%; border-radius: 4px; background: var(--grad); }
.device .trow-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 40px; }
.device .trow-pct { font-size: 13px; font-weight: 700; letter-spacing: -0.2px; color: var(--c-deep, var(--accent-deep)); }
.device .trow-pct.zero { color: var(--grey-400); font-weight: 600; }
.device .trow-c { font-size: 11px; font-weight: 500; color: var(--grey-400); }

/* atlas cards → soft pastel with gradient dot */
.device .atlas-card2 { background: var(--surface); }
.device .atlas-card2 .adot { background: var(--grad); width: 16px; height: 16px; box-shadow: 0 3px 8px color-mix(in srgb, var(--grad-b) 35%, transparent); }
.device .atlas-card2 .as { color: var(--accent-deep); }
.device .atlas-row::before { background: var(--grad); width: 6px; }
.device .atlas-row .acount { background: var(--accent-tint); color: var(--accent-deep); }

/* ─── stat tracks / progress use gradient ─── */
.device .stat .strack i { background: var(--grad) !important; }
.device .cont-bar i { background: var(--grad); }
.device .pf-track i { background: var(--grad); }
.device .rd-bar i { background: var(--grad); }

/* ─── readiness ring card inside profile ─── */
.device .ring-card { margin: 16px 16px 0; background: var(--surface); border-radius: 28px; padding: 20px; display: flex; align-items: center; gap: 18px; }
.ring-card .ring-dial .rv { font-size: 30px; }
.ring-card .rc-side { flex: 1; }
.ring-card .rc-h { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }
.ring-card .rc-p { font-size: 13px; color: var(--grey-600); margin-top: 4px; line-height: 1.45; }

/* ─── accents that should follow the gradient ─── */
.device .focus-cta,
.device .quiz-cta:not(.ghost) { background: var(--grad); }
.device .quiz-cta:not(.ghost) { box-shadow: 0 8px 20px color-mix(in srgb, var(--grad-b) 35%, transparent); }
.device .sr-badge { background: var(--grad) !important; }
.device .pf-av, .device .hm-av { background: var(--grad); }
.device .spark { background: var(--grad); }
.device .pf-stat .v.accent { color: var(--accent-deep); }
.device .stat.blue .sv, .device .stat.green .sv { color: var(--accent-deep); }
.device .search-cancel, .device .sec-head a, .device .sec-hero .crumb { color: var(--accent-deep); }

/* reader: soft pills + gradient ring progress already via rd-bar */
.device .rd-pill { box-shadow: var(--soft-1); border-radius: 16px; }
.device .rd-foot button.next { background: var(--grad); border: none; }
.device .xlink { background: var(--grad-soft); }
.device .rd-jump button.on { background: var(--grad); border-color: transparent; }

/* ─── gradient picker (profile) ─── */
.grad-picker { margin: 16px 16px 0; background: var(--surface); border-radius: 22px; box-shadow: var(--soft-1); padding: 16px 16px 18px; }
.grad-picker .gh { font-size: 13px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--grey-600); margin-bottom: 12px; }
.grad-row { display: flex; gap: 12px; }
.grad-pick { flex: 1; cursor: pointer; border: none; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.grad-swatch { width: 100%; aspect-ratio: 1.4; border-radius: 16px; box-shadow: var(--soft-1); position: relative; transition: transform 0.14s ease; }
.grad-pick:active .grad-swatch { transform: scale(0.94); }
.grad-pick.on .grad-swatch { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent-deep); }
.grad-pick .gl { font-size: 11.5px; font-weight: 600; color: var(--grey-600); }
.grad-pick.on .gl { color: var(--accent-deep); }
.gs-sundown { background: linear-gradient(160deg,#3a2c6e,#5a3a8e 22%,#8a4090 40%,#ca4e79 58%,#f97a6d 76%,#ffc97e); }
.gs-reef    { background: linear-gradient(160deg,#3F9AAE,#79C9C5 38%,#FFE2AF 70%,#F96E5B); }
.gs-sage    { background: linear-gradient(160deg,#eef0dc,#c2d2ab 30%,#8fae83 58%,#5f7d5b 80%,#3f5a44); }
.gs-ember   { background: linear-gradient(160deg,#000000,#3d0000 36%,#950101 70%,#ff0000); }

/* ═══ DARK theme (Ember) + Dunkelmodus component tweaks ═══ */
.device[data-theme="dark"] { background: linear-gradient(168deg,#14161c 0%, #101218 100%); --ring-track:#2a2d36; }
.device[data-theme="dark"] .focus-card,
.device[data-grad="ember"] .focus-card { background: linear-gradient(135deg, color-mix(in srgb,var(--grad-a) 24%, var(--surface)), color-mix(in srgb,var(--grad-c) 32%, var(--surface))); }
.device[data-theme="dark"] .nav,
.device[data-grad="ember"] .nav { background: color-mix(in srgb, var(--surface) 82%, transparent); border-color: rgba(255,255,255,0.08); box-shadow: 0 14px 34px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.06); }
.device[data-theme="dark"] .ov-metric,
.device[data-grad="ember"] .ov-metric { background: rgba(255,255,255,0.05); box-shadow: none; }
.device[data-theme="dark"] .switch,
.device[data-grad="ember"] .switch { background: rgba(255,255,255,0.16); }
.device[data-theme="dark"] .qa .qic, .device[data-theme="dark"] .cont-ic, .device[data-theme="dark"] .chap-num,
.device[data-grad="ember"] .qa .qic, .device[data-grad="ember"] .cont-ic, .device[data-grad="ember"] .chap-num { color: #fff !important; }

/* ════════════════════════════════════════════════════════════════
   READER TYPOGRAPHY — editorial two-typeface system
   Lora (serif) for the reading prose: title, headings, body, lists.
   SF Pro (system sans) deliberately kept for tables + callout boxes
   (Red Flags / Cave / Merke) where dense, scannable content reads
   better. Body leading 1.65 for comfortable long-form reading.
   ════════════════════════════════════════════════════════════════ */
.device .reader {
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-ui-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, 'Segoe UI', sans-serif;
}

/* title */
.device .reader .rd-hero h1 { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.3px; line-height: 1.14; }
/* standfirst / lead */
.device .reader .rd-stand { font-family: var(--font-serif); font-size: 18px; line-height: 1.55; font-style: italic; color: var(--grey-700); }

/* headings — rd-h2 reworked from uppercase kicker into a real serif heading */
.device .reader .rd-h2 {
  font-family: var(--font-serif); font-size: 22px; font-weight: 600; line-height: 1.25;
  letter-spacing: -0.2px; text-transform: none; color: var(--grey-900);
  margin: 30px 0 12px; gap: 11px;
}
.device .reader .rd-h2::before { width: 22px; height: 3px; align-self: center; }
.device .reader .rd-h3 { font-family: var(--font-serif); font-size: 18.5px; font-weight: 600; letter-spacing: -0.1px; }

/* body prose */
.device .reader .rd-body p { font-family: var(--font-serif); font-size: 17px; line-height: 1.65; color: var(--grey-800); margin: 0 0 16px; }
.device .reader .rd-body .rd-ul li,
.device .reader .rd-body .rd-ol li { font-family: var(--font-serif); line-height: 1.65; }

/* editorial drop-cap on the first paragraph */
.device .reader .rd-body > p:first-of-type::first-letter {
  font-family: var(--font-serif); font-weight: 600;
  float: left; font-size: 3.4em; line-height: 0.82; padding: 4px 8px 0 0;
  color: var(--c-deep, var(--accent-deep));
}

/* ── kept in SF Pro: callout boxes (Red Flags / Cave / Merke …) + tables ── */
.device .reader .callout,
.device .reader .callout .cl,
.device .reader .callout .co-list li,
.device .reader .rd-table,
.device .reader .rd-table th,
.device .reader .rd-table td { font-family: var(--font-ui-sans); }
.device .reader .rd-table td:first-child { font-weight: 600; }