/* ════════════════════════════════════════════════════════════════
   Neurify — "Studio" override layer
   Neumorphic neutral-gray skin (inspired by clean fitness UIs):
   warm-gray canvas · soft white floating cards · circular icon
   buttons · pill segmented control · dark floating pill nav ·
   bold grotesk display type. Loaded AFTER neurify-app.css +
   neurify-soft.css so these rules win.
   KEEPS the sundown / reef / sage / ember gradient accents from
   soft.css (--grad / --accent / --ring-track) — shown on the hero
   card, activity ring, search button, progress bars + colour picker.
   ════════════════════════════════════════════════════════════════ */

/* ───────────── tokens ───────────── */
.device {
  --grey-900:#1b1b1f; --grey-800:#2a2a2f; --grey-700:#3e3e44;
  --grey-600:#6b6b72; --grey-500:#96969d; --grey-400:#b5b5bc;
  --grey-300:#d3d3d9; --grey-200:#e2e2e7; --grey-100:#ededf1; --grey-50:#f5f5f8;

  --bg:#f3f4f8; --surface:#ffffff;

  --neo-1: 0 10px 24px -10px rgba(28,28,40,0.16), 0 2px 6px -2px rgba(28,28,40,0.07);
  --neo-2: 0 20px 42px -14px rgba(28,28,40,0.22), 0 4px 10px -4px rgba(28,28,40,0.08);
  --shadow-1: var(--neo-1); --shadow-2: var(--neo-1); --shadow-3: var(--neo-2);

  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-flex: 'Archivo', system-ui, -apple-system, sans-serif;

  background: var(--bg) !important;
  font-family: var(--font);
}
/* keep ALL themes on the same calm gray canvas (light ones) */
.device[data-grad="sage"], .device[data-grad="reef"] { background: var(--bg) !important; }
.device .statusbar { color: var(--grey-900); }

/* ───────────── display typography (bold grotesk) ───────────── */
.device .hm-greet h1 { font-weight: 800; letter-spacing: -1.2px; font-size: 30px; line-height: 1.04; }
.device .hm-greet h1 em { font-style: normal; }
.device .hm-greet .d { font-weight: 600; color: var(--grey-500); }
.device .hm-brand { font-weight: 800; letter-spacing: -0.6px; }
.device .page-head h1 { font-weight: 800; letter-spacing: -1.5px; font-size: 37px; line-height: 1.0; }
.device .page-head .pk { font-weight: 700; color: var(--grey-500); letter-spacing: 0.2px; }
.device .sec-hero h1 { font-weight: 800; letter-spacing: -1.1px; }
.device .sec-head b { font-weight: 800; letter-spacing: -0.5px; font-size: 19px; }
.device .pf-name { font-weight: 800; letter-spacing: -0.6px; }
.device .pf-stat .v, .device .stat .sv, .device .ring-dial .rv { font-weight: 800; letter-spacing: -1.2px; }

/* ───────────── neumorphic card surfaces ───────────── */
.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,
.device .tgrp-card, .device .grad-picker {
  box-shadow: var(--neo-1);
  border: none;
}
.device .cat-card { box-shadow: var(--neo-1); border: none; }
.device .cat-card:active { transform: scale(0.985); }
.device .pearl-card { box-shadow: var(--neo-1); border: none; }
.device .tool-card, .device .tool-search { box-shadow: var(--neo-1); border: none; }
.device .tool-card:active { transform: scale(0.992); }
.device .cm-score, .device .cm-item, .device .cm-close { box-shadow: var(--neo-1); border: none; }
.device .cm-opt:active { transform: scale(0.98); }
.device .lib-card, .device .lib-stat { box-shadow: var(--neo-1); border-color: transparent; }
.device .lib-card:active { transform: scale(0.992); }
.device .lc-bar { background: var(--grey-200); }
.device .fab-item { box-shadow: var(--neo-2, var(--shadow-2)); }
.device .stat, .device .cont-card, .device .atlas-row, .device .atlas-card2,
.device .chap-row, .device .sr-row, .device .quiz-opt, .device .quiz-vignette,
.device .tgrp-card, .device .pf-list, .device .pf-stats, .device .pf-prog-card,
.device .ov-card, .device .ring-card, .device .grad-picker { border-radius: 24px; }
.device .focus-card { border-radius: 28px; }

/* 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 .trow:active, .device .quiz-opt:active,
.device .pf-row:active, .device .ov-metric:active { transform: scale(0.985); }

/* ───────────── HERO focus card → solid theme accent (ref coral card) ───────────── */
.device .focus-card {
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-deep) 100%);
  box-shadow: var(--neo-2), 0 16px 34px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}
.device .focus-card .fk { color: rgba(255,255,255,0.92); font-weight: 700; }
.device .focus-card .fk .spark { background: rgba(255,255,255,0.22); color: #fff; border-radius: 8px; }
.device .focus-card h2 { color: #fff; font-weight: 800; letter-spacing: -0.6px; }
.device .focus-card p { color: rgba(255,255,255,0.9); }
.device .focus-card .focus-cta { background: #fff; color: var(--grey-900); box-shadow: none; font-weight: 700; }

/* ───────────── activity ring + side metrics ───────────── */
.device .ov-card { padding: 20px; }
.device .ov-metric { background: var(--grey-100); box-shadow: inset 0 1px 3px rgba(28,28,40,0.06); border-radius: 18px; }
.device .ov-metric .ovv { font-weight: 800; }

/* ───────────── circular soft icon buttons (quick actions) ───────────── */
.device .qa { background: none !important; box-shadow: none !important; padding: 4px 0; gap: 11px; }
.device .qa .qic {
  width: 60px; height: 60px; border-radius: 50% !important;
  background: var(--surface) !important; color: var(--grey-900) !important;
  box-shadow: var(--neo-1) !important;
}
.device .qa .ql { color: var(--grey-600); font-weight: 600; font-size: 13px; }

/* continue card / icon tiles → soft accent-tinted rounded squares */
.device .cont-ic, .device .chap-num, .device .tchip {
  background: var(--accent-tint) !important; color: var(--accent-deep) !important;
  border-radius: 15px; box-shadow: none;
}
.device .cont-bar i, .device .stat .strack i, .device .trow-bar i,
.device .pf-track i, .device .rd-bar i { background: var(--grad) !important; }
.device .stat.blue .sv, .device .stat.green .sv { color: var(--accent-deep); }

/* domain groups */
.device .tgl { font-weight: 800; letter-spacing: 0.4px; }
.device .tgn { background: var(--accent-tint); color: var(--accent-deep); font-weight: 700; }
.device .trow-pct { color: var(--accent-deep); font-weight: 800; }
.device .trow-t { font-weight: 700; }
.device .trow-bar { background: var(--grey-200); }

/* pills */
.device .pill { background: var(--surface); box-shadow: var(--neo-1); border: none; }
.device .pill .pd { background: var(--grad); }
.device .sec-head a, .device .search-cancel, .device .sec-hero .crumb { color: var(--accent-deep); font-weight: 700; }

/* ───────────── ATLAS ───────────── */
/* pill segmented control */
.device .seg { background: #dedee3; border-radius: 100px; padding: 5px; }
.device .seg button { font-weight: 700; border-radius: 100px; color: var(--grey-500); }
.device .seg button.on { background: var(--surface); color: var(--grey-900); box-shadow: var(--neo-1); }

.device .atlas-row::before { width: 6px; background: var(--grad); }
.device .atlas-row .ah, .device .chap-h, .device .sr-h, .device .atlas-card2 .ah { font-weight: 700; }
.device .atlas-row .acount { background: var(--accent-tint); color: var(--accent-deep); font-weight: 700; }
.device .atlas-card2 { background: var(--surface); }
.device .atlas-card2 .adot { background: var(--grad); box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--accent) 50%, transparent); }
.device .atlas-card2 .as { color: var(--accent-deep); font-weight: 700; }

/* ───────────── SECTION ───────────── */
.device .sec-hero .shtag { background: var(--accent-tint); color: var(--accent-deep); font-weight: 700; }

/* ───────────── READER (Lora editorial serif · SF Pro for dense blocks) ───────────── */
.device .reader { --font-serif: 'Lora', Georgia, 'Times New Roman', serif; --font-sans-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; }
/* white reading canvas + plain top-bar icons to match the editorial article layout */
.device .screen:has(.reader) { background: #fff; }
.device .reader { background: #fff; }
.device .screen:has(.reader) .rd-top { background: #fff; }
.device .screen:has(.reader) .rd-pill { background: transparent; box-shadow: none; color: var(--grey-900); }
.device .screen:has(.reader) .rd-pill.on { color: var(--accent-deep); }
/* floating action buttons (search + back-to-top) */
.rd-fabs { position: absolute; right: 16px; bottom: 92px; z-index: 40; display: flex; flex-direction: column; gap: 11px; }
.rd-fab { width: 50px; height: 50px; border-radius: 50%; border: none; background: rgba(255,255,255,0.86); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); color: var(--accent-deep); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 22px -6px rgba(28,28,40,0.28), 0 2px 6px -2px rgba(28,28,40,0.12); transition: transform 0.16s; }
.rd-fab:active { transform: scale(0.92); }

/* floating chapter nav bar */
.rd-navbar { position: absolute; left: 14px; right: 14px; bottom: 18px; z-index: 38; display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 9px; background: rgba(255,255,255,0.9); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-radius: 100px; box-shadow: 0 12px 30px -8px rgba(28,28,40,0.26), 0 2px 8px -2px rgba(28,28,40,0.12); }
.rdn-prev { width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--grey-100); color: var(--accent-deep); display: grid; place-items: center; cursor: pointer; flex: none; }
.rdn-prev:disabled { color: var(--grey-300); cursor: default; }
.rdn-mid { flex: 1; text-align: center; font-size: 13px; color: var(--grey-500); font-weight: 500; letter-spacing: 0.2px; }
.rdn-mid b { color: var(--grey-900); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; font-size: 12.5px; }
.rdn-next { display: inline-flex; align-items: center; gap: 6px; border: none; background: var(--accent); color: #fff; font: inherit; font-size: 14px; font-weight: 700; padding: 11px 18px; border-radius: 100px; cursor: pointer; flex: none; box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--accent) 60%, transparent); }
.rdn-next:active { transform: scale(0.97); }
.rdn-next.done { background: var(--g-green-deep); box-shadow: none; }

/* text-selection highlight toolbar */
.hl-bar { position: absolute; z-index: 60; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; padding: 8px 10px; background: #26262b; border-radius: 100px; box-shadow: 0 10px 26px -6px rgba(0,0,0,0.4); animation: hlIn 0.14s ease; }
@keyframes hlIn { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.hl-bar::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: #26262b; }
.hl-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.hl-sw.on { border-color: #fff; }
.hl-sw.hl-yellow { background: #f5c518; } .hl-sw.hl-green { background: #34a853; } .hl-sw.hl-blue { background: #4c8dff; } .hl-sw.hl-pink { background: #e8559b; }
.hl-div { width: 1px; height: 22px; background: rgba(255,255,255,0.2); }
.hl-rm { width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(255,255,255,0.12); color: #fff; display: grid; place-items: center; cursor: pointer; }

/* highlight marks in body */
.rd-body mark.hl { border-radius: 3px; padding: 0.5px 1px; color: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; cursor: pointer; }
.rd-body mark.hl-yellow { background: rgba(245,197,24,0.42); }
.rd-body mark.hl-green { background: rgba(52,168,83,0.30); }
.rd-body mark.hl-blue { background: rgba(76,141,255,0.30); }
.rd-body mark.hl-pink { background: rgba(232,85,155,0.28); }

/* My Highlights screen */
.hlg { margin: 4px 16px 0; }
.hlg-head { padding: 14px 2px 8px; }
.hlg-head .hlg-k { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent-deep); }
.hlg-head .hlg-t { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.3px; color: var(--grey-900); margin-top: 2px; }
.hlg-list { display: flex; flex-direction: column; gap: 9px; }
.hlg-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface); border: none; border-radius: 14px; padding: 13px 14px; cursor: pointer; font: inherit; box-shadow: var(--shadow-1); }
.hlg-bar { width: 4px; align-self: stretch; border-radius: 4px; flex: none; }
.hlg-text { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.45; color: var(--grey-800); }
.hlg-chev { color: var(--grey-400); flex: none; }
/* chapter list (level 1) */
.hlc-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 0; }
.hlc-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: var(--surface); border: none; border-radius: 16px; padding: 15px 15px; cursor: pointer; font: inherit; box-shadow: var(--shadow-1); }
.hlc-main { flex: 1; min-width: 0; }
.hlc-k { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent-deep); }
.hlc-t { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.3px; color: var(--grey-900); margin-top: 3px; line-height: 1.25; text-wrap: pretty; }
.hlc-dots { display: inline-flex; gap: 3px; flex: none; }
.hlc-dots i { width: 9px; height: 9px; border-radius: 50%; }
.hlc-n { font-size: 13px; font-weight: 800; color: var(--grey-500); background: var(--grey-100); border-radius: 20px; min-width: 24px; text-align: center; padding: 2px 7px; flex: none; }
.hlg-open { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 16px 16px 0; padding: 13px; width: calc(100% - 32px); border: none; border-radius: 14px; background: var(--accent); color: #fff; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--accent) 55%, transparent); }
.hlg-open:active { transform: scale(0.98); }
.device .reader .rd-hero h1 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.4px; line-height: 1.16; }
.device .reader .rd-stand { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.55; color: var(--grey-600); }
.device .reader .rd-h2 {
  font-family: var(--font-serif); font-size: 22px; font-weight: 600; text-transform: none;
  letter-spacing: -0.3px; color: var(--grey-900); margin: 30px 0 12px; gap: 10px;
}
.device .reader .rd-h2::before { width: 18px; height: 4px; align-self: center; background: var(--grad); }
.device .reader .rd-h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 600; letter-spacing: -0.1px; }
.device .reader .rd-body p { font-family: var(--font-serif); font-size: 17px; line-height: 1.65; color: var(--grey-800); text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
.device .reader .rd-body .rd-ul li, .device .reader .rd-body .rd-ol li { font-family: var(--font-serif); font-size: 16.5px; line-height: 1.65; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
/* editorial drop-cap on first paragraph */
.device .reader .rd-body > p:first-of-type::first-letter {
  font-family: var(--font-serif); float: left; font-size: 3.4em; line-height: 0.82;
  padding: 6px 10px 0 0; color: var(--accent-deep); font-weight: 600;
}
/* SF Pro sans for dense, scannable blocks: tables + callouts */
.device .reader .rd-table, .device .reader .rd-table th, .device .reader .rd-table td { font-family: var(--font-sans-ui); }
.device .reader .callout, .device .reader .callout .ct, .device .reader .callout .cl, .device .reader .callout .co-list li { font-family: var(--font-sans-ui); }
/* modern soft shadow on article boxes + tables */
.device .reader .callout { box-shadow: 0 6px 18px -8px rgba(28,28,40,0.18), 0 1px 3px -1px rgba(28,28,40,0.08); }
.device .reader .rd-table-wrap { box-shadow: 0 8px 22px -10px rgba(28,28,40,0.18), 0 1px 3px -1px rgba(28,28,40,0.07); border-color: var(--grey-100); }
.device .rd-pill { box-shadow: var(--neo-1); border-radius: 50%; }
.device .rd-foot button.next { background: var(--grad); border: none; }
.device .xlink { background: var(--accent-tint); }
.device .rd-jump button.on { background: var(--grad); border-color: transparent; }

/* ───────────── SEARCH ───────────── */
.device .search-field { background: var(--surface); box-shadow: var(--neo-1); }
.device .sr-badge { background: var(--grad) !important; }

/* ───────────── FRAGEN ───────────── */
.device .quiz-cta:not(.ghost) { background: var(--grad); box-shadow: var(--neo-1); }
.device .quiz-q { font-weight: 800; letter-spacing: -0.5px; }
.device .quiz-vignette .qk { color: var(--accent-deep); }

/* ───────────── PROFILE ───────────── */
.device .pf-stat .v.accent { color: var(--accent-deep); }
.device .pf-av, .device .hm-av, .device .spark { background: var(--grad); }
.device .grad-picker { padding: 18px; }
.device .grad-picker .gh { font-weight: 800; letter-spacing: 0.3px; }
.device .switch.on { background: var(--grad); }

/* ───────────── DARK floating pill nav (signature) ───────────── */
.device .nav {
  left: 16px; right: 16px; bottom: 18px; height: 64px;
  border-radius: 36px; border: none;
  background: #26262b;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 18px 34px -10px rgba(20,20,30,0.45);
  padding: 0 12px;
}
.device .nav .nb {
  flex-direction: column; gap: 0; font-size: 0; padding: 8px;
  color: rgba(255,255,255,0.5); font-weight: 700;
}
.device .nav .nb .nbic { width: auto; height: auto; background: none !important; transition: none; }
.device .nav .nb.on {
  flex-direction: row; gap: 7px; font-size: 13px; padding: 9px 16px;
  background: #fff; color: var(--grey-900); border-radius: 30px;
}
.device .nav .nb.on .nbic { background: none !important; color: var(--accent-deep); }
.device .nav-search {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 6px 16px -2px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 1px rgba(255,255,255,0.4);
}

/* ───────────── TWEAKS PANEL → light frosted ───────────── */
.tweaks {
  background: rgba(248,248,250,0.9); color: #1b1b1f;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0,0,0,0.07); border-radius: 18px; box-shadow: var(--neo-2);
}
.tweaks h4 { color: rgba(27,27,31,0.5); }
.tweaks .tw-row .twl { color: rgba(27,27,31,0.55); font-weight: 600; }
.tweaks .tw-seg { background: rgba(120,120,128,0.14); border-radius: 100px; }
.tweaks .tw-seg button { color: #6b6b72; }
.tweaks .tw-seg button.on { background: #fff; color: #1b1b1f; box-shadow: var(--neo-1); }
.tweaks .tw-swatch.on { border-color: #1b1b1f; }

/* ───────────── DARK / EMBER canvas ───────────── */
.device[data-theme="dark"] {
  --bg:#101013; --surface:#1c1c21;
  --neo-1: 0 12px 26px -10px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
  --neo-2: 0 22px 44px -14px rgba(0,0,0,0.6);
  background: var(--bg) !important;
}
.device[data-grad="ember"] {
  --bg:#151016; --surface:#221a22;
  --neo-1: 0 12px 26px -10px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.45);
  --neo-2: 0 22px 44px -14px rgba(0,0,0,0.65);
  background: var(--bg) !important;
}
.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"] .qa .qic, .device[data-grad="ember"] .qa .qic {
  background: var(--surface) !important; color: var(--grey-900) !important;
}
.device[data-theme="dark"] .seg, .device[data-grad="ember"] .seg { background: rgba(255,255,255,0.1); }
.device[data-theme="dark"] .nav, .device[data-grad="ember"] .nav { background: #2a2a30; }
.device[data-theme="dark"] .nav .nb.on, .device[data-grad="ember"] .nav .nb.on { background: #fff; color: #111; }
.device[data-theme="dark"] .tweaks, .device[data-grad="ember"] .tweaks {
  background: rgba(30,30,34,0.92); color: #ececf0; border-color: rgba(255,255,255,0.08);
}
.device[data-theme="dark"] .tweaks h4, .device[data-grad="ember"] .tweaks h4 { color: rgba(255,255,255,0.5); }
.device[data-theme="dark"] .tweaks .tw-row .twl, .device[data-grad="ember"] .tweaks .tw-row .twl { color: rgba(255,255,255,0.6); }
.device[data-theme="dark"] .tweaks .tw-seg, .device[data-grad="ember"] .tweaks .tw-seg { background: rgba(255,255,255,0.08); }
.device[data-theme="dark"] .tweaks .tw-seg button.on, .device[data-grad="ember"] .tweaks .tw-seg button.on { background: rgba(255,255,255,0.16); color: #fff; }
.device[data-theme="dark"] .tweaks .tw-swatch.on, .device[data-grad="ember"] .tweaks .tw-swatch.on { border-color: #fff; }