/* 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;
}

/* Release 5: Interface size reaches every app (apps with their own hanna-scale-root keep theirs), and Sleek scrollbars
   are thin everywhere. */
html:not(:has(.hanna-scale-root)) body { zoom: var(--ht-ui-scale, 1); }

/* Release 6: an open Writer or Sheets window reads page coordinates to hit cells, place the caret and open menus, so
   zooming the whole body misses the click. There the size goes on the bars and side panel around the document; the
   document keeps its own zoom in the status bar. */
html:has(.workspace > .top-chrome) body { zoom: 1; }
html { --ht-page-zoom: var(--ht-ui-scale, 1); }
html:has(.hanna-scale-root), html:has(.workspace > .top-chrome) { --ht-page-zoom: 1; }
.workspace > .top-chrome > *, .workspace > .formula-bar, .workspace > .statusbar, .work-area > .side-panel { zoom: var(--ht-ui-scale, 1); }

/* Release 6: Writer and Sheets keep their own full screen flag, which also trusts display-mode. The title bar and ribbon
   hide only while the package says the page really is in full screen. */
html:not([data-hanna-fullscreen]) .workspace.is-fullscreen .top-chrome { display: contents; }
html:not([data-hanna-fullscreen]) .fs-hotzone { display: none; }
html[data-scrollbar="sleek"], html[data-scrollbar="sleek"] * {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ht-text, #8a8f98) 30%, transparent) transparent;
}