/* ThesisFlow colour themes. Palette, background and glass taken from the DocSync design:
     dark    navy page, blue accent        (DocSync "Dark")
     summer  blue > violet > pink sunset   (DocSync "Summer")
     light   the original ThesisFlow light look, unchanged
   Layout, navigation and behaviour are untouched: this file only sets colours, the page background and the glass effect.
   JS (theme-toggler.js / theme-boot.js) sets  <html data-skin data-glass>  and the --glass variable. */

:root { --glass: .38; --glass-blur: 20px; --on-accent: #ffffff; --page-gradient: none; --aurora-1: transparent; --aurora-2: transparent; --aurora-3: transparent; --grid-line: transparent; --dock-bg: #1d1b16; --dock-text: #a8a290; }

/* ---------------------------------------------------------------- dark (DocSync Dark) */
:root[data-skin="dark"] {
  --bg-base: #020617;
  --bg-nav: rgba(2,6,23,.74);
  --bg-card: rgba(255,255,255,calc(var(--glass) * .2));
  --bg-card-hover: rgba(255,255,255,calc(var(--glass) * .2 + .04));
  --bg-input: rgba(255,255,255,.06);
  --bg-stat: rgba(255,255,255,calc(var(--glass) * .2));
  --bg-row-hover: rgba(96,165,250,.07);
  --bg-modal: rgba(10,14,32,.97);
  --bg-overlay: rgba(2,6,23,.72);
  --bg-meta: rgba(255,255,255,.04);
  --border-main: rgba(255,255,255,.10);
  --border-card: rgba(255,255,255,.10);
  --border-input: rgba(255,255,255,.15);
  --border-divider: rgba(255,255,255,.07);
  --text-primary: #e2e8f0;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  --text-heading: #f8fafc;
  --text-accent: #60a5fa;
  --accent: #2563eb;
  --accent-hover: #3b82f6;
  --accent-soft: rgba(59,130,246,.16);
  --on-accent: #ffffff;
  --accent-rgb: 59,130,246;
  --scrollbar-track: #0b1226;
  --scrollbar-thumb: #26324f;
  --tab-border: rgba(255,255,255,.10);
  --toggle-off: #26324f;
  --page-gradient: linear-gradient(135deg, #020617 0%, #172554 55%, #1e1b4b 100%);
  --aurora-1: rgba(59,130,246,.22);
  --aurora-2: rgba(168,85,247,.16);
  --aurora-3: rgba(16,185,129,.10);
  --grid-line: rgba(148,163,184,.04);
  --dock-bg: rgba(8,12,28,.80);
  --dock-text: #94a3b8;
  --card-shadow: 0 25px 50px -12px rgba(0,0,0,.4);
  --scene-building: #1c3454; --scene-building-a: 1; --scene-line: #c7d6e8; --scene-window: rgba(199,214,232,.22); --scene-lit: #fcd34d;
}
:root[data-skin="dark"][data-glass="off"] {
  --bg-card: #0f1a33; --bg-card-hover: #14223f; --bg-stat: #0f1a33; --bg-nav: #0a1226; --dock-bg: #0a1226; --bg-input: #0c1630;
}

/* ---------------------------------------------------------------- summer (DocSync Summer) */
:root[data-skin="summer"] {
  --bg-base: #1e2a5e;
  --bg-nav: rgba(36,20,70,.55);
  --bg-card: rgba(62,34,88,var(--glass));
  --bg-card-hover: rgba(78,44,106,calc(var(--glass) + .06));
  --bg-input: rgba(255,255,255,.08);
  --bg-stat: rgba(62,34,88,var(--glass));
  --bg-row-hover: rgba(244,114,182,.08);
  --bg-modal: rgba(34,16,60,.97);
  --bg-overlay: rgba(20,8,40,.7);
  --bg-meta: rgba(255,255,255,.05);
  --border-main: rgba(236,72,153,.24);
  --border-card: rgba(236,72,153,.24);
  --border-input: rgba(255,255,255,.20);
  --border-divider: rgba(255,255,255,.09);
  --text-primary: #f1f5f9;
  --text-secondary: #e2e0f0;
  --text-muted: #bdb6dc;
  --text-faint: #8f87b8;
  --text-heading: #ffffff;
  --text-accent: #f472b6;
  --accent: #db2777;
  --accent-hover: #ec4899;
  --accent-soft: rgba(236,72,153,.20);
  --on-accent: #ffffff;
  --accent-rgb: 236,72,153;
  --scrollbar-track: #2a1a4a;
  --scrollbar-thumb: #5b3a8c;
  --tab-border: rgba(236,72,153,.24);
  --toggle-off: #5b3a8c;
  --page-gradient: linear-gradient(135deg, #1e2a5e 0%, #6d28d9 50%, #c2185b 100%);
  --aurora-1: rgba(59,130,246,.28);
  --aurora-2: rgba(168,85,247,.25);
  --aurora-3: rgba(236,72,153,.25);
  --grid-line: transparent;
  --dock-bg: rgba(40,16,70,.72);
  --dock-text: #d6c8f0;
  --card-shadow: 0 25px 60px -15px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
  --scene-building: #2d1b4e; --scene-building-a: .85; --scene-line: #f9a8d4; --scene-window: rgba(236,72,153,.25); --scene-lit: #fde68a;
}
:root[data-skin="summer"][data-glass="off"] {
  --bg-card: #3a2159; --bg-card-hover: #46296a; --bg-stat: #3a2159; --bg-nav: #2c1850; --dock-bg: #2c1850; --bg-input: #34204f;
}

/* ---------------------------------------------------------------- light (the original ThesisFlow look) */
:root[data-skin="light"] {
  --bg-base: #fafaf8; --bg-nav: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f6f5f1; --bg-input: #ffffff; --bg-stat: #ffffff;
  --bg-row-hover: #f6f5f1; --bg-modal: #ffffff; --bg-overlay: rgba(20,24,33,.4); --bg-meta: #f6f5f1;
  --border-main: #e7e5de; --border-card: #e7e5de; --border-input: #d9d6cd; --border-divider: #efede7;
  --text-primary: #1b1f2a; --text-secondary: #444b5a; --text-muted: #5f6675; --text-faint: #8b92a0; --text-heading: #11151f;
  --text-accent: #8a6100; --accent: #e0a400; --accent-hover: #b98300; --accent-soft: rgba(224,164,0,.12); --on-accent: #1b1500;
  --accent-rgb: 224,164,0;
  --scrollbar-track: #f0eee8; --scrollbar-thumb: #d4d0c5; --tab-border: #e7e5de; --toggle-off: #cfcbc0;
  --page-gradient: none; --aurora-1: transparent; --aurora-2: transparent; --aurora-3: transparent; --grid-line: transparent;
  --dock-bg: #1d1b16; --dock-text: #a8a290; --card-shadow: none;
  --scene-building: #e4e0d2; --scene-building-a: 1; --scene-line: #b9b4a3; --scene-window: rgba(27,31,42,.10); --scene-lit: #e0a400;
}

/* ---------------------------------------------------------------- page background: one scene behind everything.
   Painted on a fixed pseudo-element (not background-attachment: fixed), because backdrop-filter glass renders wrongly over fixed attachments. */
html { background: var(--bg-base); color-scheme: dark; }
html[data-skin="light"] { color-scheme: light; }
body { background: transparent !important; color: var(--text-primary); }
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    radial-gradient(900px 600px at -10% -15%, var(--aurora-1) 0%, transparent 65%),
    radial-gradient(800px 550px at 108% 110%, var(--aurora-2) 0%, transparent 65%),
    radial-gradient(700px 500px at 50% 55%, var(--aurora-3) 0%, transparent 65%),
    var(--page-gradient);
  background-size: 48px 48px, 48px 48px, auto, auto, auto, auto;
}
.bg-gradient-orbs { display: none !important; }

/* ---------------------------------------------------------------- glass: translucent surfaces get a blur. Off = the same colours, solid. */
:root[data-glass="on"]:not([data-skin="light"]) :is(.glass, .glass-light, .project-card, .stat-card, .data-table-wrap, .meta-block, .placeholder-panel,
  .cf-card, .rp-card, .rp-stat, .np-card, .cp-card, .em-card, .cf-vote, .cf-score-h, .navbar, .info-block, .proposal-card) {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(135%) !important;
}
:root[data-glass="on"]:not([data-skin="light"]) .modal-box { -webkit-backdrop-filter: blur(24px) !important; backdrop-filter: blur(24px) !important; }
:root[data-glass="on"]:not([data-skin="light"]) .modal-backdrop { -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; }
:root:not([data-skin="light"]) :is(.glass, .project-card, .stat-card, .cf-card, .rp-card, .np-card, .cp-card, .em-card) { box-shadow: var(--card-shadow) !important; }

/* ---------------------------------------------------------------- text on the accent colour follows the theme (white on blue and pink, dark on gold) */
.btn-primary, .nav-btn.active, .cf-btn.pri, .em-btn.pri, .cp-btn, .ap-btn { color: var(--on-accent) !important; }
.nav-btn.active i { color: var(--on-accent) !important; }

/* ---------------------------------------------------------------- the floating dock follows the theme */
html:root[data-skin] .sub-navbar { background: var(--dock-bg) !important; }
html:root:not([data-skin="light"])[data-glass="on"] .sub-navbar { -webkit-backdrop-filter: blur(22px) saturate(135%) !important; backdrop-filter: blur(22px) saturate(135%) !important; box-shadow: 0 14px 44px rgba(0,0,0,.5), 0 0 0 1px var(--border-card) !important; }
html:root[data-skin] .nav-btn { color: var(--dock-text) !important; }
html:root[data-skin] .nav-btn:hover { background: rgba(255,255,255,.08) !important; color: #ffffff !important; }
html:root[data-skin] .nav-btn.active { background: var(--accent) !important; color: var(--on-accent) !important; }

/* ---------------------------------------------------------------- the appearance control (theme, glass, glass opacity) */
.te-widget { display: inline-flex; align-items: center; gap: 6px; }
.te-pill { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--border-card); background: var(--bg-meta); }
.te-btn { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--text-muted); font-size: 13px; cursor: pointer; transition: background .15s, color .15s; }
.te-btn:hover { color: var(--text-heading); }
.te-btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.te-glass { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid var(--border-card); background: var(--bg-meta); }
.te-glass[hidden], .te-pop-btn[hidden] { display: none; }
.te-glass .te-label { font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
.te-range { width: 84px; accent-color: var(--accent); cursor: pointer; }
.te-range:disabled { opacity: .4; cursor: not-allowed; }
.te-pop-btn { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--border-card); background: var(--bg-meta); color: var(--text-muted); cursor: pointer; display: none; place-items: center; font-size: 12px; }
.te-pop { position: absolute; z-index: 300; top: calc(100% + 8px); right: 0; width: 220px; padding: 14px; border-radius: 14px; background: var(--bg-modal); border: 1px solid var(--border-card); box-shadow: 0 18px 50px rgba(0,0,0,.45); display: none; }
.te-pop.open { display: block; }
.te-pop .te-label { display: block; margin-bottom: 8px; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
.te-pop .te-range { width: 100%; }
.te-anchor { position: relative; display: inline-flex; }
.te-floating { position: fixed; top: 14px; right: 14px; z-index: 250; padding: 4px; border-radius: 18px; background: var(--bg-nav); border: 1px solid var(--border-card); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
@media (max-width: 1100px) { .te-glass .te-range { display: none; } .te-glass { padding-right: 3px; } .te-pop-btn.show { display: inline-grid; } }
.te-app-btn { display: none; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border-card); background: var(--bg-meta); color: var(--text-muted); cursor: pointer; place-items: center; }
.te-app-btn:hover { color: var(--text-heading); }
.te-pill-pop { display: flex; width: max-content; }
.te-poprow { display: flex; align-items: center; gap: 10px; }
.te-poprow .te-range { flex: 1; }
@media (max-width: 560px) {
  .te-widget > .te-pill, .te-widget > .te-glass, .te-pop-btn { display: none !important; }
  .te-app-btn { display: inline-grid; }
  .te-pop { width: 230px; }
}

/* label style from the sample: tiny, heavy, spaced capitals, used sparingly for section labels */
.tf-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); }

/* top bar: school logo, school name and the product name beneath it */
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.brand-text .brand-name { font-size: 15px; font-weight: 700; max-width: 38ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text .brand-sub { font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: .02em; }
@media (max-width: 760px) { .brand-text .brand-name { max-width: 24vw; font-size: 14px; } .brand-text .brand-sub { display: none; } }

/* the dock sits at left:50%, so its natural width was capped at half the window and wrapped onto a second row; let it take the width it needs */
html:root[data-skin] .sub-navbar { width: max-content !important; max-width: calc(100vw - 24px) !important; }
@media (max-width: 760px) { html:root[data-skin] .sub-navbar { width: auto !important; max-width: none !important; } }

/* auto-hide: minimal.js adds .dock-idle after a moment without movement and removes it when the cursor moves */
.sub-navbar { transition: opacity .35s ease, transform .35s ease; }
.sub-navbar.dock-idle { opacity: 0; transform: translate(-50%, 28px); pointer-events: none; }
@media (max-width: 760px) { .sub-navbar.dock-idle { transform: translateY(110%); } }
@media (prefers-reduced-motion: reduce) { .sub-navbar { transition: opacity .2s ease; } .sub-navbar.dock-idle { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) and (max-width: 760px) { .sub-navbar.dock-idle { transform: none; } }