/*
 * StudyBuddy on Bootstrap 5.3: the "calm coach" colours (same values as the Android app)
 * mapped onto Bootstrap's variables, plus a few StudyBuddy pieces (highlighter mark,
 * cards, stat tiles, bars). Light and dark follow <html data-bs-theme>.
 */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}

:root,
[data-bs-theme="light"] {
  --accent-h: 258;
  --accent-c: 0.17;
  --paper: oklch(0.982 0.004 255);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.965 0.006 255);
  --surface-3: oklch(0.935 0.008 255);
  --rule: oklch(0.915 0.008 255);
  --rule-strong: oklch(0.84 0.012 255);
  --ink: oklch(0.255 0.03 260);
  --ink-2: oklch(0.38 0.025 260);
  --muted: oklch(0.5 0.022 260);
  --subtle: oklch(0.66 0.016 260);
  --accent: oklch(0.53 var(--accent-c) var(--accent-h));
  --accent-hover: oklch(0.47 var(--accent-c) var(--accent-h));
  --accent-fg: oklch(0.99 0.005 var(--accent-h));
  --accent-soft: oklch(0.955 calc(var(--accent-c) * 0.28) var(--accent-h));
  --accent-soft-fg: oklch(0.42 var(--accent-c) var(--accent-h));
  --accent-text: oklch(0.49 var(--accent-c) var(--accent-h));
  --highlight: oklch(0.87 calc(var(--accent-c) * 0.85) var(--accent-h) / 0.8);
  --focus: oklch(0.56 var(--accent-c) var(--accent-h));
  --success: oklch(0.5 0.13 155);
  --success-soft: oklch(0.955 0.04 155);
  --warning: oklch(0.52 0.12 65);
  --warning-soft: oklch(0.965 0.05 85);
  --danger: oklch(0.53 0.19 25);
  --danger-soft: oklch(0.96 0.03 25);
  --danger-fg: oklch(0.99 0.005 25);
  --shadow-md: 0 1px 2px oklch(0.25 0.03 260 / 0.04), 0 10px 28px -12px oklch(0.25 0.03 260 / 0.16);
  --shadow-lg: 0 2px 4px oklch(0.25 0.03 260 / 0.05), 0 24px 48px -18px oklch(0.25 0.03 260 / 0.24);
  --overlay: oklch(0.2 0.03 260 / 0.42);
  --phone-frame: oklch(0.255 0.03 260);
}

[data-bs-theme="dark"] {
  --paper: oklch(0.175 0.022 262);
  --surface: oklch(0.215 0.024 262);
  --surface-2: oklch(0.25 0.026 262);
  --surface-3: oklch(0.29 0.028 262);
  --rule: oklch(0.3 0.025 262);
  --rule-strong: oklch(0.38 0.03 262);
  --ink: oklch(0.95 0.008 262);
  --ink-2: oklch(0.86 0.012 262);
  --muted: oklch(0.72 0.018 262);
  --subtle: oklch(0.58 0.02 262);
  --accent: oklch(0.72 var(--accent-c) var(--accent-h));
  --accent-hover: oklch(0.78 var(--accent-c) var(--accent-h));
  --accent-fg: oklch(0.2 0.03 var(--accent-h));
  --accent-soft: oklch(0.3 calc(var(--accent-c) * 0.45) var(--accent-h));
  --accent-soft-fg: oklch(0.87 calc(var(--accent-c) * 0.6) var(--accent-h));
  --accent-text: oklch(0.78 var(--accent-c) var(--accent-h));
  --highlight: oklch(0.55 calc(var(--accent-c) * 0.8) var(--accent-h) / 0.42);
  --focus: oklch(0.78 var(--accent-c) var(--accent-h));
  --success: oklch(0.78 0.13 155);
  --success-soft: oklch(0.3 0.05 155);
  --warning: oklch(0.82 0.12 80);
  --warning-soft: oklch(0.31 0.05 75);
  --danger: oklch(0.72 0.16 25);
  --danger-soft: oklch(0.3 0.06 25);
  --danger-fg: oklch(0.2 0.03 25);
  --shadow-md: 0 1px 2px oklch(0 0 0 / 0.3), 0 12px 28px -12px oklch(0 0 0 / 0.5);
  --shadow-lg: 0 2px 4px oklch(0 0 0 / 0.3), 0 24px 48px -18px oklch(0 0 0 / 0.6);
  --overlay: oklch(0.08 0.02 262 / 0.6);
  --phone-frame: oklch(0.38 0.03 262);
}

/* Bootstrap, re-coloured */
:root,
[data-bs-theme] {
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-color: var(--subtle);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg: var(--surface-2);
  --bs-border-color: var(--rule);
  --bs-border-radius: 0.6rem;
  --bs-border-radius-lg: 0.9rem;
  --bs-link-color: var(--accent-text);
  --bs-link-hover-color: var(--accent-text);
  --bs-link-color-rgb: none;
  --bs-heading-color: var(--ink);
  --bs-body-font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --bs-focus-ring-color: color-mix(in oklch, var(--focus) 35%, transparent);
  --bs-card-bg: var(--surface);
}
body {
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, .font-display, .navbar-brand {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
a { color: var(--accent-text); }
::selection { background: var(--highlight); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.text-muted, .text-body-secondary { color: var(--muted) !important; }
.text-ink-2 { color: var(--ink-2) !important; }
.text-accent { color: var(--accent-text) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.tabular { font-variant-numeric: tabular-nums; }
.small-caps { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.btn { --bs-btn-font-weight: 500; --bs-btn-border-radius: 0.6rem; }
.btn-primary {
  --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: var(--accent-fg);
  --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); --bs-btn-hover-color: var(--accent-fg);
  --bs-btn-active-bg: var(--accent-hover); --bs-btn-active-border-color: var(--accent-hover); --bs-btn-active-color: var(--accent-fg);
  --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); --bs-btn-disabled-color: var(--accent-fg);
}
.btn-outline-secondary, .btn-light {
  --bs-btn-color: var(--ink); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--rule-strong);
  --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: var(--rule-strong);
  --bs-btn-active-bg: var(--surface-3); --bs-btn-active-color: var(--ink); --bs-btn-active-border-color: var(--rule-strong);
}
.btn-soft {
  --bs-btn-bg: var(--accent-soft); --bs-btn-color: var(--accent-soft-fg); --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-color: var(--accent-soft-fg); --bs-btn-hover-border-color: var(--accent);
}
.btn-ghost {
  --bs-btn-color: var(--ink-2); --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-color: var(--ink);
}
.btn-danger {
  --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-color: var(--danger-fg);
  --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); --bs-btn-hover-color: var(--danger-fg);
}
.btn-outline-danger { --bs-btn-color: var(--danger); --bs-btn-border-color: var(--rule-strong); --bs-btn-hover-bg: var(--danger-soft); --bs-btn-hover-color: var(--danger); --bs-btn-hover-border-color: var(--danger); }
.form-control, .form-select {
  background-color: var(--surface); color: var(--ink); border-color: var(--rule-strong); border-radius: 0.6rem;
}
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color); background-color: var(--surface); color: var(--ink); }
.form-control::placeholder { color: var(--subtle); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-label { font-weight: 500; font-size: 0.9rem; }
.form-text { color: var(--muted); }
.dropdown-menu { --bs-dropdown-bg: var(--surface); --bs-dropdown-link-color: var(--ink); --bs-dropdown-link-hover-bg: var(--surface-2); --bs-dropdown-link-active-bg: var(--accent-soft); --bs-dropdown-link-active-color: var(--accent-soft-fg); --bs-dropdown-border-color: var(--rule); box-shadow: var(--shadow-lg); }
.modal-backdrop { --bs-backdrop-bg: var(--overlay); --bs-backdrop-opacity: 1; }
.offcanvas-backdrop { background: var(--overlay); }
.offcanvas-backdrop.show { opacity: 1; }
.modal-content { background: var(--surface); border: 1px solid var(--rule); border-radius: 1rem; box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { border-color: var(--rule); }
.offcanvas { --bs-offcanvas-bg: var(--surface); }
.nav-tabs { --bs-nav-tabs-border-color: var(--rule); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-color: var(--ink); --bs-nav-tabs-link-active-border-color: transparent transparent var(--accent); }
.nav-tabs .nav-link { color: var(--ink-2); border-width: 0 0 2px; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--rule); --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: var(--ink); }
.table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
.pagination { --bs-pagination-bg: var(--surface); --bs-pagination-color: var(--ink); --bs-pagination-border-color: var(--rule); --bs-pagination-active-bg: var(--accent); --bs-pagination-active-border-color: var(--accent); --bs-pagination-hover-bg: var(--surface-2); --bs-pagination-disabled-bg: var(--surface); }
.progress { --bs-progress-bg: var(--surface-3); --bs-progress-bar-bg: var(--accent); height: 0.5rem; border-radius: 99px; }
.progress-bar.bg-warning { background-color: var(--warning) !important; }
.alert-success { background: var(--success-soft); color: var(--ink); border-color: transparent; }
.alert-danger { background: var(--danger-soft); color: var(--ink); border-color: transparent; }
.alert-warning { background: var(--warning-soft); color: var(--ink); border-color: transparent; }
.alert-info { background: var(--accent-soft); color: var(--ink); border-color: transparent; }

/* Badges */
.sb-badge { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 99px; padding: 0.12rem 0.55rem; font-size: 0.75rem; font-weight: 500; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); }
.sb-badge.accent { background: var(--accent-soft); color: var(--accent-soft-fg); }
.sb-badge.success { background: var(--success-soft); color: var(--success); }
.sb-badge.warning { background: var(--warning-soft); color: var(--warning); }
.sb-badge.danger { background: var(--danger-soft); color: var(--danger); }
.sb-badge.outline { background: transparent; border: 1px solid var(--rule-strong); }
.sb-dot { width: 0.4rem; height: 0.4rem; border-radius: 99px; background: currentColor; display: inline-block; }

/* The highlighter mark: StudyBuddy's one signature flourish. */
.sb-mark {
  background-image: linear-gradient(100deg, transparent 0.12em, var(--highlight) 0.28em, var(--highlight) calc(100% - 0.3em), transparent calc(100% - 0.1em));
  background-repeat: no-repeat; background-size: 100% 0.46em; background-position: 0 96%;
  padding-inline: 0.18em; margin-inline: -0.18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; border-radius: 0.2em;
}

.sb-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 1rem; box-shadow: var(--shadow-md); }
.sb-tinted { background: var(--surface-2); border-radius: 0.8rem; }
.sb-soft { background: var(--accent-soft); color: var(--ink); border-radius: 1.6rem; }
.sb-icon { width: 2.5rem; height: 2.5rem; display: inline-grid; place-items: center; border-radius: 0.7rem; background: var(--accent-soft); color: var(--accent-soft-fg); }
.sb-icon svg { width: 1.25rem; height: 1.25rem; }
.sb-stat .value { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 1.9rem; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.sb-section-band { background: color-mix(in oklch, var(--surface) 60%, transparent); border-top: 1px solid var(--rule); }
.eyebrow { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
svg.i { width: 1.1em; height: 1.1em; vertical-align: -0.15em; flex-shrink: 0; }

/* Bars */
.sb-bars { display: flex; align-items: flex-end; gap: 3px; height: 9rem; }
.sb-bars > span { flex: 1; background: color-mix(in oklch, var(--accent) 80%, transparent); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.sb-bars > span.zero { background: var(--surface-3); }
.sb-bars > span:hover { background: var(--accent); }
.sb-share { height: 0.5rem; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.sb-share > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 1030; background: color-mix(in oklch, var(--paper) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in oklch, var(--rule) 70%, transparent); }
.site-header .nav-link { color: var(--ink-2); font-weight: 500; font-size: 0.9rem; border-radius: 0.5rem; padding: 0.45rem 0.75rem; }
.site-header .nav-link:hover { background: var(--surface-2); color: var(--ink); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 0.75rem; top: 0.75rem; z-index: 2000; background: var(--surface); padding: 0.5rem 1rem; border-radius: 0.5rem; }

/* Phone preview (landing) */
.phone { width: min(100%, 20rem); margin-inline: auto; position: relative; }
.phone::before { content: ""; position: absolute; inset: -1.5rem; z-index: -1; border-radius: 3rem; background: var(--accent-soft); opacity: 0.7; filter: blur(28px); }
.phone-frame { border-radius: 2.6rem; background: var(--phone-frame); padding: 0.6rem; box-shadow: var(--shadow-lg); }
.phone-screen { border-radius: 2.1rem; background: var(--paper); overflow: hidden; padding: 0.8rem 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.7rem; font-size: 0.88rem; }
.task { display: flex; align-items: center; gap: 0.7rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 0.9rem; padding: 0.65rem 0.7rem 0.65rem 0.9rem; position: relative; overflow: hidden; }
.task::before { content: ""; position: absolute; left: 0; top: 0.5rem; bottom: 0.5rem; width: 4px; border-radius: 0 4px 4px 0; background: var(--subject); }
.task.active { outline: 2px solid color-mix(in oklch, var(--accent) 40%, transparent); }
.task.done { background: var(--surface-2); box-shadow: none; }
.task.done .title { text-decoration: line-through; color: var(--muted); }
.task .check { width: 1.6rem; height: 1.6rem; border-radius: 99px; border: 2px solid var(--rule-strong); flex-shrink: 0; display: grid; place-items: center; color: var(--paper); }
.task.done .check { background: var(--success); border-color: var(--success); }
.task .play { width: 2rem; height: 2rem; border-radius: 0.5rem; display: grid; place-items: center; background: var(--accent); color: var(--accent-fg); flex-shrink: 0; }
.task.active .play { background: var(--accent-soft); color: var(--accent-soft-fg); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--rule); padding-block: 1rem; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; font-size: 1.1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { width: 1.75rem; height: 1.75rem; border-radius: 99px; background: var(--surface-2); display: grid; place-items: center; flex-shrink: 0; transition: transform 0.2s; }
.faq details[open] summary .plus { transform: rotate(45deg); }

/* Portal layout */
.portal-sidebar { position: fixed; inset: 0 auto 0 0; width: 15rem; background: var(--surface); border-right: 1px solid var(--rule); padding: 1rem; display: flex; flex-direction: column; gap: 1.5rem; z-index: 1020; }
.portal-main { margin-left: 15rem; }
.portal-nav a { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.75rem; border-radius: 0.6rem; color: var(--ink-2); font-weight: 500; font-size: 0.92rem; text-decoration: none; }
.portal-nav a:hover { background: var(--surface-2); color: var(--ink); }
.portal-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-soft-fg); }
@media (max-width: 767.98px) {
  .portal-sidebar { display: none; }
  .portal-main { margin-left: 0; }
}
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 1rem; box-shadow: var(--shadow-md); padding: 1.25rem; }
.panel > h2, .panel-title { font-size: 1.1rem; font-weight: 600; margin: 0; }
.dl-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.5rem; font-size: 0.92rem; margin: 0; }
.dl-grid dt { color: var(--muted); font-weight: 400; }
.dl-grid dd { margin: 0; }
.list-rows > li { padding-block: 0.6rem; border-top: 1px solid var(--rule); }
.list-rows > li:first-child { border-top: 0; }
.toast-container .toast { background: var(--surface); color: var(--ink); border: 1px solid var(--rule); box-shadow: var(--shadow-lg); }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
[data-bs-theme="light"] .theme-icon-dark, [data-bs-theme="dark"] .theme-icon-light { display: none; }