/* ==================================================================
   ORBIX BRAND — styles for assets/orbix-brand.js
   1. Marks and wordmarks (used by the mini apps and the study apps)
   2. Study-space palettes (--sk-*)
   3. Each mini app's own colour variables, pointed at the palette
      while a skin is on (html.om-skin). Nothing applies otherwise.
   ================================================================== */

/* ── 1. Marks ──────────────────────────────────────────────────────── */
.ob-mark {
  display: inline-flex; flex: none;
  width: var(--ob-size, 1em); height: var(--ob-size, 1em);
  line-height: 0; vertical-align: middle;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .14)) drop-shadow(0 4px 10px rgba(15, 23, 42, .10));
}
.ob-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Wordmarks: each study space's own type and colour */
.ob-word { display: inline-flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.ob-word b {
  font-family: var(--ob-font); font-weight: 800; letter-spacing: -.02em;
  background: var(--ob-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ob-word small {
  font-family: var(--ob-font2, var(--ob-font)); font-weight: 600; font-size: .78em;
  color: var(--ob-c); letter-spacing: var(--ob-ed-ls, .01em); text-transform: var(--ob-ed-tt, none);
  margin-top: 1px;
}
[data-brand="aura"]       { --ob-font: 'Poppins', system-ui, sans-serif; --ob-grad: linear-gradient(135deg, #1aada2, #4ba3f5); --ob-c: #1aada2; }
[data-brand="blossom"]    { --ob-font: 'Poppins', system-ui, sans-serif; --ob-grad: linear-gradient(135deg, #e8699a, #ff8fab); --ob-c: #e8699a; }
[data-brand="lavender"]   { --ob-font: 'Poppins', system-ui, sans-serif; --ob-grad: linear-gradient(135deg, #5b21b6, #8b5cf6); --ob-c: #7c3aed; }
[data-brand="untouch"]    { --ob-font: 'Sora', 'Poppins', system-ui, sans-serif; --ob-font2: 'DM Mono', ui-monospace, monospace;
                            --ob-grad: linear-gradient(135deg, #2563eb, #22d3ee); --ob-c: #3b82f6; --ob-ed-ls: .14em; --ob-ed-tt: uppercase; }
[data-brand="untouch"] small { font-size: .66em; font-weight: 500; }
[data-brand="studycraft"] { --ob-font: 'Press Start 2P', ui-monospace, monospace; --ob-font2: 'VT323', ui-monospace, monospace;
                            --ob-grad: linear-gradient(135deg, #a855f7, #22d3ee); --ob-c: #9333ea; }
[data-brand="studycraft"] b { font-size: .7em; font-weight: 400; letter-spacing: 0; line-height: 1.5; }
[data-brand="studycraft"] small { font-size: 1.05em; font-weight: 400; letter-spacing: .02em; }

/* Brand-tinted rows in the "Which study space?" list */
.om-pick[data-brand] { transition: border-color .2s, background-color .2s, transform .2s; }
.om-pick[data-brand]:hover, .om-pick[data-brand]:focus-visible {
  border-color: color-mix(in srgb, var(--ob-c) 55%, transparent);
  background: color-mix(in srgb, var(--ob-c) 7%, var(--om-card, transparent));
}
.om-pick .ob-word b { font-size: 14.5px; }
.om-pick .ob-word small { font-size: 11.5px; }
.om-pick [data-brand="studycraft"] b { font-size: 11px; }
.om-pick [data-brand="studycraft"] small { font-size: 16px; line-height: 1; }
.om-pick [data-brand="untouch"] small { font-size: 9.5px; }
.om-pick-ic .ob-mark, .om-study-ic .ob-mark, .om-set-ic .ob-mark { --ob-size: 1.25em; }
.om-pick-ic { display: inline-flex; justify-content: center; }
.om-study-ic:has(.ob-mark), .om-set-ic:has(.ob-mark) { background: none; border-color: transparent; }
.om-study-ic .ob-mark { --ob-size: 42px; }
.om-set-ic .ob-mark { --ob-size: 30px; }
.om-chip-ic .ob-mark { --ob-size: 18px; filter: none; }
.om-chip .ob-word b { font-size: 12.5px; }
.om-pair-tile .ob-mark, .oc-pair-tile .ob-mark { --ob-size: 44px; }
.om-card-ic .ob-mark, .oc-card-ic .ob-mark { --ob-size: 38px; }
.oc-addon-ic .ob-mark { --ob-size: 30px; }
.oc-sheet-title .ob-mark { --ob-size: 20px; margin-right: 7px; vertical-align: -4px; filter: none; }
.om-study.on .ob-word b { font-size: 15px; }
/* Study-space marks inside each app's own screens */
.pmw-mark .ob-mark { --ob-size: 64px; }
.pmw-mark:has(.ob-mark) { background: none; border-color: transparent; }
.pmw-link-ic .ob-mark { --ob-size: 36px; }
.pmw-link .ob-word b { font-size: 15px; }
.pm-sync-mk .ob-mark, .cp-sync-mk .ob-mark { --ob-size: 20px; filter: none; }
.pm-sync-mk, .cp-sync-mk { display: inline-flex; flex: none; }
.card-title .ic .ob-mark { --ob-size: 1.15em; filter: none; }

/* "Using your own theme · Undo" */
.ob-note {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 100000;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
  padding: 10px 10px 10px 12px; border-radius: 18px;
  background: rgba(24, 24, 32, .92); color: #fff;
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
  font: 600 13px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif;
  opacity: 0; transform: translate(-50%, 14px) scale(.96);
  transition: opacity .2s cubic-bezier(.4, 0, 1, 1), transform .26s cubic-bezier(.4, 0, 1, 1);
}
.ob-note.in { opacity: 1; transform: translate(-50%, 0) scale(1); transition: opacity .25s cubic-bezier(.22, 1, .36, 1), transform .45s var(--op-spring-switch, cubic-bezier(.3, 1.3, .6, 1)); }
.ob-note .ob-mark { --ob-size: 30px; filter: none; }
.ob-note span { display: flex; flex-direction: column; }
.ob-note small { font-weight: 500; font-size: 11.5px; opacity: .65; }
.ob-note button {
  margin-left: 6px; border: 0; border-radius: 12px; padding: 8px 14px; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff; font: 700 13px/1 inherit;
}
.ob-note button:hover { background: rgba(255, 255, 255, .22); }
@media (prefers-reduced-motion: reduce) { .ob-note, .ob-note.in { transition: opacity .15s linear; transform: translate(-50%, 0); } }

/* ── 2. Study-space palettes ─────────────────────────────────────────
   Taken from each study app's own :root. Light spaces stay light, the
   two dark ones (Untouch Zone, StudyCraft) make the mini app dark. */
html[data-om-skin="auraspace-ultimate"], html[data-om-skin="auraspace-subtopics"] {
  --sk-accent: #1aada2; --sk-accent-2: #3dd6c8; --sk-accent-3: #4ba3f5; --sk-on-accent: #fff;
  --sk-soft: rgba(61, 214, 200, .14); --sk-glow: rgba(61, 214, 200, .26); --sk-tint: #c9f3ef;
  --sk-grad: linear-gradient(135deg, #3dd6c8, #4ba3f5);
  --sk-bg: #f5fbfa; --sk-bg-2: #edf7f6; --sk-bg-3: #daf0ee; --sk-surface: #ffffff; --sk-surface-2: #f1fcfb;
  --sk-glass: rgba(255, 255, 255, .78);
  --sk-text: #0d1f1e; --sk-text-2: #4a6b69; --sk-text-3: #739795;
  --sk-line: rgba(26, 173, 162, .16); --sk-line-2: rgba(26, 173, 162, .3);
  --sk-font: 'Poppins', system-ui, sans-serif; color-scheme: light;
}
html[data-om-skin="zephyros-standard"] {
  --sk-accent: #e8699a; --sk-accent-2: #ff8fab; --sk-accent-3: #f0b8cb; --sk-on-accent: #fff;
  --sk-soft: rgba(255, 143, 171, .15); --sk-glow: rgba(255, 143, 171, .28); --sk-tint: #fbd3df;
  --sk-grad: linear-gradient(135deg, #e8699a, #ff8fab);
  --sk-bg: #fdf5f8; --sk-bg-2: #fbeef4; --sk-bg-3: #f5dce7; --sk-surface: #ffffff; --sk-surface-2: #fdf0f5;
  --sk-glass: rgba(255, 255, 255, .78);
  --sk-text: #1a1a1a; --sk-text-2: #6e6e73; --sk-text-3: #988690;
  --sk-line: rgba(232, 105, 154, .16); --sk-line-2: rgba(232, 105, 154, .3);
  --sk-font: 'Poppins', system-ui, sans-serif; color-scheme: light;
}
html[data-om-skin="zephyros-lavender"] {
  --sk-accent: #7c3aed; --sk-accent-2: #8b5cf6; --sk-accent-3: #c4b5fd; --sk-on-accent: #fff;
  --sk-soft: rgba(139, 92, 246, .14); --sk-glow: rgba(139, 92, 246, .28); --sk-tint: #ddd6fe;
  --sk-grad: linear-gradient(135deg, #5b21b6, #8b5cf6);
  --sk-bg: #faf7ff; --sk-bg-2: #f3f0fc; --sk-bg-3: #e9e5f8; --sk-surface: #ffffff; --sk-surface-2: #f5f2ff;
  --sk-glass: rgba(255, 255, 255, .78);
  --sk-text: #1e1b2e; --sk-text-2: #6b6880; --sk-text-3: #8c84a8;
  --sk-line: rgba(139, 92, 246, .16); --sk-line-2: rgba(139, 92, 246, .3);
  --sk-font: 'Poppins', system-ui, sans-serif; color-scheme: light;
}
html[data-om-skin="zephyros-cyberpunk"] {
  --sk-accent: #4f8cff; --sk-accent-2: #22d3ee; --sk-accent-3: #2563eb; --sk-on-accent: #fff;
  --sk-soft: rgba(79, 140, 255, .12); --sk-glow: rgba(79, 140, 255, .26); --sk-tint: #172040;
  --sk-grad: linear-gradient(135deg, #2563eb, #22d3ee);
  --sk-bg: #05080f; --sk-bg-2: #080d18; --sk-bg-3: #111b30; --sk-surface: #0d1425; --sk-surface-2: #111b30;
  --sk-glass: rgba(13, 20, 37, .82);
  --sk-text: #e8edf8; --sk-text-2: #8a9aba; --sk-text-3: #56688a;
  --sk-line: rgba(79, 140, 255, .16); --sk-line-2: rgba(79, 140, 255, .3);
  --sk-font: 'Sora', 'Poppins', system-ui, sans-serif; color-scheme: dark;
}
html[data-om-skin="enchanted-studycraft-advanced"] {
  --sk-accent: #a855f7; --sk-accent-2: #22d3ee; --sk-accent-3: #c084fc; --sk-on-accent: #fff;
  --sk-soft: rgba(168, 85, 247, .14); --sk-glow: rgba(168, 85, 247, .3); --sk-tint: #2e1065;
  --sk-grad: linear-gradient(135deg, #a855f7, #22d3ee);
  --sk-bg: #0a0d14; --sk-bg-2: #11151f; --sk-bg-3: #181d2b; --sk-surface: #141925; --sk-surface-2: #181d2b;
  --sk-glass: rgba(20, 25, 37, .85);
  --sk-text: #e7ecf5; --sk-text-2: #8b93a8; --sk-text-3: #5b637a;
  --sk-line: rgba(168, 85, 247, .2); --sk-line-2: rgba(168, 85, 247, .34);
  --sk-font: 'Poppins', system-ui, sans-serif; color-scheme: dark;
}

/* Shadows follow the skin's tone, so a dark-mode app under a light skin
   doesn't keep its heavy black shadows (the grey "mud" around cards). */
html[data-om-tone="light"] {
  --sk-shadow-xs: 0 1px 3px color-mix(in srgb, var(--sk-text) 6%, transparent);
  --sk-shadow-sm: 0 1px 4px color-mix(in srgb, var(--sk-text) 6%, transparent), 0 0 0 1px var(--sk-line);
  --sk-shadow: 0 4px 18px color-mix(in srgb, var(--sk-accent) 9%, transparent), 0 1px 4px color-mix(in srgb, var(--sk-text) 5%, transparent);
  --sk-shadow-lg: 0 12px 40px color-mix(in srgb, var(--sk-accent) 12%, transparent), 0 4px 12px color-mix(in srgb, var(--sk-text) 6%, transparent);
  --sk-shadow-xl: 0 24px 60px color-mix(in srgb, var(--sk-accent) 15%, transparent), 0 6px 18px color-mix(in srgb, var(--sk-text) 7%, transparent);
}
html[data-om-tone="dark"] {
  --sk-shadow-xs: 0 1px 3px rgba(0, 0, 0, .3);
  --sk-shadow-sm: 0 1px 4px rgba(0, 0, 0, .35), 0 0 0 1px var(--sk-line);
  --sk-shadow: 0 6px 24px rgba(0, 0, 0, .4);
  --sk-shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);
  --sk-shadow-xl: 0 24px 60px rgba(0, 0, 0, .55);
}

/* ── 3. Mini apps, mapped onto the palette ───────────────────────────
   !important so the skin wins over each app's theme classes and the
   values some apps set inline; it all lifts the moment the skin is off. */
/* Ikigai is a light "paper" app: with a dark study space it keeps its paper
   and only takes the accent (see the Ikigai block below). */
html.om-skin:not([data-om-app="ikigai"][data-om-tone="dark"]) body {
  --om-accent: var(--sk-accent) !important; --om-on-accent: var(--sk-on-accent) !important;
  --om-surface: var(--sk-surface) !important; --om-card: color-mix(in srgb, var(--sk-text) 6%, transparent) !important;
  --om-text: var(--sk-text) !important; --om-text2: var(--sk-text-2) !important; --om-line: var(--sk-line) !important;
  --om-font: var(--sk-font) !important;
  color-scheme: inherit !important;   /* scrollbars and form controls follow the skin, not the app's own mode */
}
html.om-skin[data-om-app="ikigai"][data-om-tone="dark"] body {
  --om-accent: var(--sk-accent) !important; --om-on-accent: var(--sk-on-accent) !important;
}
html.om-skin[data-om-app="ikigai"][data-om-tone="dark"] { color-scheme: light; }
html.om-skin ::selection { background: color-mix(in srgb, var(--sk-accent) 30%, transparent); }
/* The install pill is drawn in each app's own brand colour */
html.om-skin #orbix-pwa-bottom-pill { background: var(--sk-grad) !important; box-shadow: 0 8px 26px var(--sk-glow) !important; }
html.om-skin[data-om-skin="zephyros-cyberpunk"] :is(body, button, input, select, textarea) { font-family: var(--sk-font) !important; }

/* PaperMind: variables live on body (dark default, body.light-mode, body.theme-*) */
html.om-skin[data-om-app="papermind"], html.om-skin[data-om-app="papermind"] body {
  --bg: var(--sk-bg) !important; --bg2: var(--sk-surface) !important; --bg3: var(--sk-bg-2) !important;
  --glass: color-mix(in srgb, var(--sk-text) 4%, transparent) !important; --glass2: color-mix(in srgb, var(--sk-text) 8%, transparent) !important;
  --border: var(--sk-line) !important; --border2: var(--sk-line-2) !important;
  --text: var(--sk-text) !important; --text2: var(--sk-text-2) !important; --text3: var(--sk-text-3) !important;
  --accent: var(--sk-accent) !important; --accent2: var(--sk-accent-2) !important; --accent3: var(--sk-accent-3) !important;
  --grad: var(--sk-grad) !important; --grad2: var(--sk-grad) !important;
  --font: var(--sk-font) !important;
  --shadow: var(--sk-shadow-lg) !important; --shadow2: var(--sk-shadow) !important;
}
/* PaperMind was drawn dark-first: its lighter accents are used as text colours,
   which turn pale on a light skin. There they take the deeper brand colour. */
html.om-skin[data-om-app="papermind"][data-om-tone="light"], html.om-skin[data-om-app="papermind"][data-om-tone="light"] body {
  --accent2: var(--sk-accent) !important; --accent3: color-mix(in srgb, var(--sk-accent) 80%, var(--sk-text)) !important;
}
html.om-skin[data-om-app="papermind"] #topbar,html.om-skin[data-om-app="papermind"] body.light-mode #topbar { background: color-mix(in srgb, var(--sk-bg) 84%, transparent) !important; }

/* Cards: its theme engine writes variables inline on <html> */
html.om-skin[data-om-app="cards"] {
  --bg: var(--sk-bg) !important; --bg-elevated: var(--sk-surface) !important;
  --surface: var(--sk-surface) !important; --surface-alt: var(--sk-bg-2) !important;
  --text: var(--sk-text) !important; --text-dim: var(--sk-text-2) !important; --border: var(--sk-line) !important;
  --accent: var(--sk-accent) !important; --accent-2: var(--sk-accent-2) !important; --accent-3: var(--sk-tint) !important;
  --grad-1: var(--sk-glow) !important; --grad-2: var(--sk-soft) !important;
  --shadow-sm: var(--sk-shadow-sm) !important; --shadow-md: var(--sk-shadow) !important; --shadow-lg: var(--sk-shadow-lg) !important;
}

/* Student Life Tracker: variables on body.theme-dark / body.theme-light */
html.om-skin[data-om-app="life"] body {
  --bg-0: var(--sk-bg) !important;
  --bg-grad: radial-gradient(circle at 15% 12%, var(--sk-glow), transparent 45%),
             radial-gradient(circle at 85% 18%, var(--sk-soft), transparent 45%),
             linear-gradient(180deg, var(--sk-bg) 0%, var(--sk-bg-2) 100%) !important;
  --glass-bg: var(--sk-glass) !important; --glass-bg-strong: var(--sk-surface) !important; --glass-border: var(--sk-line) !important;
  --text-primary: var(--sk-text) !important; --text-secondary: var(--sk-text-2) !important; --text-tertiary: var(--sk-text-3) !important;
  --nav-bg: color-mix(in srgb, var(--sk-surface) 88%, transparent) !important;
  --input-bg: var(--sk-surface-2) !important; --track-bg: var(--sk-bg-3) !important;
  --solid-card: var(--sk-surface) !important;
  --accent-blue: var(--sk-accent) !important; --accent-purple: var(--sk-accent-3) !important; --accent-teal: var(--sk-accent-2) !important;
  --shadow-card: var(--sk-shadow) !important;
}
html.om-skin[data-om-app="life"] select option { background: var(--sk-surface) !important; color: var(--sk-text) !important; }

/* Finance: html[data-theme] + html[data-accent] */
html.om-skin[data-om-app="finance"] {
  --bg: var(--sk-bg) !important; --bg-2: var(--sk-surface) !important; --bg-3: var(--sk-bg-2) !important; --bg-4: var(--sk-bg-3) !important;
  --text-primary: var(--sk-text) !important; --text-secondary: var(--sk-text-2) !important; --text-tertiary: var(--sk-text-3) !important;
  --border: var(--sk-line) !important; --border-strong: var(--sk-line-2) !important;
  --glass: var(--sk-glass) !important; --glass-border: var(--sk-line) !important;
  --accent: var(--sk-accent) !important; --accent-2: var(--sk-accent-2) !important;
  --accent-light: var(--sk-soft) !important; --accent-glow: var(--sk-glow) !important;
  --sidebar-bg: color-mix(in srgb, var(--sk-surface) 95%, transparent) !important;
  --shadow-xs: var(--sk-shadow-xs) !important; --shadow: var(--sk-shadow) !important;
  --shadow-lg: var(--sk-shadow-lg) !important; --shadow-xl: var(--sk-shadow-xl) !important;
}

/* Finance pieces drawn in its own green rather than through variables.
   Income / expense colours keep their meaning and are left alone. */
html.om-skin[data-om-app="finance"] .balance-hero {
  background: linear-gradient(145deg, color-mix(in srgb, var(--sk-accent) 28%, #04040a),
    color-mix(in srgb, var(--sk-accent) 55%, #06060e), color-mix(in srgb, var(--sk-accent) 80%, #000)) !important;
}
html.om-skin[data-om-app="finance"] .loading-bar { background: var(--sk-grad) !important; box-shadow: 0 0 10px var(--sk-glow) !important; }
html.om-skin[data-om-app="finance"] :is(.ob-badge.master, .cat-chip.preset, .ai-quick-btn:hover) { border-color: var(--sk-line-2) !important; }
html.om-skin[data-om-app="finance"] :is(.h-cell[data-level="1"], .h-cell[style*="--h:1"]) { background: color-mix(in srgb, var(--sk-accent) 25%, transparent) !important; }
html.om-skin[data-om-app="finance"] :is(.h-cell[data-level="2"], .h-cell[style*="--h:2"]) { background: color-mix(in srgb, var(--sk-accent) 45%, transparent) !important; }
html.om-skin[data-om-app="finance"] :is(.h-cell[data-level="3"], .h-cell[style*="--h:3"]) { background: color-mix(in srgb, var(--sk-accent) 70%, transparent) !important; }
html.om-skin[data-om-app="finance"] :is(.h-cell[data-level="4"], .h-cell[style*="--h:4"]) { background: var(--sk-accent) !important; }

/* Ikigai: a light paper look; brand colour and surfaces follow the skin */
html.om-skin[data-om-app="ikigai"] { --vermillion: var(--sk-accent) !important; --vlight: var(--sk-accent-2) !important; }
html.om-skin[data-om-app="ikigai"][data-om-tone="light"] {
  --ink: var(--sk-text) !important;
  --sand: color-mix(in srgb, var(--sk-text) 13%, var(--sk-bg)) !important;
  --parchment: var(--sk-bg) !important; --blush: var(--sk-bg-2) !important; --white: var(--sk-surface) !important;
  --stone: var(--sk-text-2) !important; --sl: var(--sk-text-3) !important;
}
html.om-skin[data-om-app="ikigai"][data-om-tone="light"] body { background: var(--sk-bg); color: var(--sk-text); }