/* Hanna shared styling: everything here is colour, type, motion and state. Nothing in this file
 * moves a control or changes a layout. It reads the --ht-* colours from hanna-themes.css.
 * Only pages in the Hanna look get it: Classic ([data-hanna-look="classic"]) is left exactly as it is. */

/* ---------------------------------------------------------------- derived colours (all themes) */
:root {
  --ht-sel: color-mix(in srgb, var(--ht-accent) 18%, var(--ht-raised));
  --ht-hover: color-mix(in srgb, var(--ht-text) 7%, var(--ht-raised));
  --ht-head: color-mix(in srgb, var(--ht-text) 5%, var(--ht-raised));
  --ht-gridline: color-mix(in srgb, var(--ht-line) 60%, var(--ht-raised));
  --ht-glass: color-mix(in srgb, var(--ht-panel) 82%, transparent);
  --ht-scrim: color-mix(in srgb, var(--ht-bg) 60%, transparent);
  --ht-shadow: 0 12px 32px color-mix(in srgb, #000 28%, transparent), 0 1px 3px color-mix(in srgb, #000 18%, transparent);

  /* 5. chart series: the theme's key colours in the order with the widest hue gaps. Green and red stay for gains and losses. */
  --ht-chart-1: var(--ht-bank-a);
  --ht-chart-2: var(--ht-bank-c);
  --ht-chart-3: var(--ht-bank-e);
  --ht-chart-4: var(--ht-bank-b);
  --ht-chart-5: var(--ht-bank-g);
  --ht-chart-6: var(--ht-bank-h);
  --ht-gain: var(--ht-good);
  --ht-loss: var(--ht-bad);

  /* 3. type scale: Inter at six sizes */
  --ht-font: Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --ht-font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --ht-fs-12: 12px; --ht-fs-13: 13px; --ht-fs-14: 14px; --ht-fs-16: 16px; --ht-fs-20: 20px; --ht-fs-24: 24px;

  /* 2. one set of chrome measurements */
  --ht-titlebar-h: 40px;
  --ht-tabs-h: 32px;
  --ht-control-h: 28px;
  --ht-radius: 6px;
  --ht-radius-lg: 10px;
  --ht-icon: 16px;
  --ht-gap-1: 4px; --ht-gap-2: 8px; --ht-gap-3: 12px; --ht-gap-4: 16px;

  /* 7. motion */
  --ht-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ht-fast: 150ms;
  --ht-medium: 200ms;

  /* 8. density (comfortable) */
  --ht-row-h: 36px;
  --ht-cell-py: 9px;
  --ht-cell-px: 10px;
}
[data-hanna-density="compact"] {
  --ht-row-h: 28px;
  --ht-cell-py: 4px;
  --ht-cell-px: 8px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --ht-fast: 0ms; --ht-medium: 0ms; }
}
/* Options > Motion: Off (or a device that asks for less motion) stills everything the package moves. */
[data-hanna-motion="off"] { --ht-fast: 0ms; --ht-medium: 0ms; }
[data-hanna-motion="off"] .ht-skeleton,
[data-hanna-motion="off"] .ht-breathe { animation: none !important; }
.ht-breathe { animation: ht-breathe 9s ease-in-out infinite; }
@keyframes ht-breathe { 50% { filter: brightness(1.04) saturate(1.06); } }

/* Options > Display: interface and text size. An app opts in by marking its root (sizes it in px stay as they are elsewhere). */
.hanna-scale-root { zoom: var(--ht-ui-scale, 1); }
.hanna-text-root { font-size: calc(var(--ht-fs-14) * var(--ht-text-scale, 1)); }

/* Options > Display > Scrollbars: Sleek (thin lines that light up under the pointer). Classic is the browser's own. */
@supports selector(::-webkit-scrollbar) {
  html[data-scrollbar="sleek"] ::-webkit-scrollbar { width: 8px; height: 8px; }
  html[data-scrollbar="sleek"] ::-webkit-scrollbar-track { background: transparent; }
  html[data-scrollbar="sleek"] ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ht-muted) 35%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
  }
  html[data-scrollbar="sleek"] ::-webkit-scrollbar-thumb:hover { background-color: var(--ht-accent); }
  html[data-scrollbar="sleek"] ::-webkit-scrollbar-corner { background: transparent; }
}
@supports not selector(::-webkit-scrollbar) {
  html[data-scrollbar="sleek"] { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ht-muted) 45%, transparent) transparent; }
}

/* ---------------------------------------------------------------- 9. accessibility (Hanna look only) */
[data-hanna-look="hanna"] :focus-visible {
  outline: 2px solid var(--ht-accent);
  outline-offset: 2px;
}
[data-hanna-look="hanna"] ::selection { background: color-mix(in srgb, var(--ht-accent) 35%, transparent); }

/* 3. numbers line up in every data table */
/* (Opt-in, so documents and spreadsheets people write keep their own number style.) */
.ht-num, table.ht-num, .ht-dense-table { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 4. glass for overlays, solid behind data */
.ht-glass {
  background: var(--ht-glass);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--ht-line);
  box-shadow: var(--ht-shadow);
}
.ht-solid { background: var(--ht-raised); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---------------------------------------------------------------- 5. status chips: tinted, not shouting */
.ht-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font: 500 var(--ht-fs-12)/1.5 var(--ht-font);
  padding: 0 9px; border-radius: 999px; border: 1px solid var(--ht-line); color: var(--ht-muted);
}
.ht-chip[data-tone="good"] { --tone: var(--ht-good); }
.ht-chip[data-tone="pending"] { --tone: var(--ht-pending); }
.ht-chip[data-tone="bad"] { --tone: var(--ht-bad); }
.ht-chip[data-tone="accent"] { --tone: var(--ht-accent); }
.ht-chip[data-tone] {
  color: var(--tone);
  border-color: color-mix(in srgb, var(--tone) 45%, transparent);
  background: color-mix(in srgb, var(--tone) 12%, transparent);
}
.ht-gain { color: var(--ht-gain); }
.ht-loss { color: var(--ht-loss); }

/* ---------------------------------------------------------------- 6. loading, empty and error states */
.ht-skeleton {
  display: block; height: 0.75em; border-radius: 4px;
  background: linear-gradient(90deg, var(--ht-line), var(--ht-sel), var(--ht-line));
  background-size: 200% 100%;
  animation: ht-shimmer 1.6s linear infinite;
}
@keyframes ht-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ht-skeleton { animation: none; } }
.ht-empty, .ht-error {
  display: grid; gap: var(--ht-gap-2); justify-items: start; padding: var(--ht-gap-4);
  border: 1px solid var(--ht-line); border-radius: var(--ht-radius-lg); background: var(--ht-panel);
  font: var(--ht-fs-13)/1.5 var(--ht-font); color: var(--ht-muted);
}
.ht-empty > strong, .ht-error > strong { font-size: var(--ht-fs-14); color: var(--ht-text); }
.ht-error { border-color: color-mix(in srgb, var(--ht-bad) 50%, var(--ht-line)); }

/* ---------------------------------------------------------------- 8. density for tables and lists */
.ht-dense-table th, .ht-dense-table td { padding: var(--ht-cell-py) var(--ht-cell-px); }
.ht-dense-row { min-height: var(--ht-row-h); }

/* ---------------------------------------------------------------- 7. quick, quiet motion */
.ht-pop {
  transition: opacity var(--ht-fast) var(--ht-ease), transform var(--ht-medium) var(--ht-ease);
  transform-origin: top left;
}
.ht-pop:not(.is-open) { opacity: 0; transform: translateY(-4px) scale(0.98); pointer-events: none; }

/* ---------------------------------------------------------------- full screen: the top chrome slides away */
[data-hanna-fullscreen] .hanna-top-chrome {
  position: fixed; inset: 0 0 auto; z-index: 1000;
  transform: translateY(-100%);
  transition: transform var(--ht-medium) var(--ht-ease);
  box-shadow: var(--ht-shadow);
}
[data-hanna-fullscreen] .hanna-top-chrome.hanna-peek,
[data-hanna-fullscreen] .hanna-top-chrome:focus-within { transform: none; }
.hanna-peek-zone { position: fixed; inset: 0 0 auto; height: 6px; z-index: 1001; }

/* ---------------------------------------------------------------- 10. printed and PDF output: theme brand on white */
@media print {
  :root { --ht-print-ink: #1b1f24; }
  .ht-print-brand { color: var(--ht-brand-print) !important; }
  .ht-print-rule { border-color: var(--ht-brand-print) !important; }
}

/* ---------------------------------------------------------------- the seal in Classic · v1
 * Classic pages keep their own colours, so the seal takes the page's text colour (whatever sits behind it)
 * and the brand blues, instead of the Hanna theme's ink. A page can still set --seal-ink, --seal-ring,
 * --seal-a and --seal-b on the seal or a parent to match its own palette. */
html[data-hanna-look="classic"] hanna-seal {
  --seal-ink: currentColor;
  --seal-ring: color-mix(in srgb, currentColor 45%, transparent);
  --seal-a: #2f7fd0;
  --seal-b: #1aa7bf;
}