/* Harmonic calculator: page layout and the pieces every module shares.
   Values come from the AutoRef tokens (styles.css) and the Manager chrome
   (app-chrome.css, vendored unchanged from the brand kit). Tool-local
   variables are prefixed --hc- and only name layout sizes; no colours. */

:root {
  --hc-toolbar-h: 64px;
  --hc-inspector-w: 450px;
  --hc-outline-w: 300px;
  --hc-siteheader-h: 64px;
}

/* The document never scrolls. Only the panels inside the app do. `html` hides the
   viewport's overflow. `body` and `.hc-page` clip their content (overflow: clip is
   not a scroll container, unlike hidden), so scrollIntoView() or focus() on
   anything inside the app can only scroll the panel that holds it, and nothing
   can make the page wider or taller than the window. */
html { overflow: hidden; overscroll-behavior: none; }
html, body { height: 100%; }
body.hc-body {
  margin: 0;
  overflow: hidden; overflow: clip;
  font: var(--type-body-sm);
  color: var(--text-body);
  background: var(--surface-page);
}

/* ---- Site header (the website's bar; hover rules replace the site's runtime style-hover) ---- */
/* The header shrinks with the window and clips; it never sets the page width.
   Items drop out in steps as the window narrows (see the media rules below). */
.hc-siteheader { min-width: 0; overflow: hidden; overflow: clip; }
.hc-siteheader__inner { min-width: 0; }
.hc-sitenav { min-width: 0; }
.hc-siteheader a { border-bottom: 0; text-decoration: none; }
.ar-nav-item {
  font: var(--type-body-sm); font-weight: 600; white-space: nowrap;
  color: var(--ink-100); padding: 8px 10px; border-radius: var(--radius-1);
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
  transition: var(--transition-control);
}
.ar-nav-item:hover { background: var(--surface-hover-inverse); color: var(--text-inverse); }
.ar-nav-dot { flex: none; display: block; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.ar-nav a[aria-current="page"], .ar-nav a[aria-current="true"] { color: var(--text-inverse); }
.ar-nav a[aria-current="page"] .ar-nav-dot, .ar-nav a[aria-current="true"] .ar-nav-dot { background: var(--red-500); }
.ar-nav-cta {
  margin-left: 8px; display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
  white-space: nowrap; background: var(--red-500); color: var(--text-inverse);
  font: var(--type-body-sm); font-weight: 700; border-radius: var(--radius-1);
  transition: var(--transition-control);
}
.ar-nav-cta:hover { background: var(--red-600); color: var(--text-inverse); }
.hc-siteheader a:focus-visible { box-shadow: var(--focus-ring-inverse); outline: none; }

/* Below 1100px only the current page ("Free tools") and the CTA stay in the nav. */
@media (max-width: 1099.98px) {
  .hc-sitenav .ar-nav-item:not([aria-current="page"]) { display: none; }
}
@media (max-width: 760px) {
  .hc-siteheader__inner { height: 52px !important; padding: 0 16px !important; gap: 12px !important; }
}
/* Phones: logo and "Free tools" only; the CTA does not fit beside them at 320-520px. */
@media (max-width: 520px) {
  .hc-sitenav .ar-nav-cta { display: none; }
}
@media (max-width: 400px) {
  .hc-sitelogo img { height: 22px !important; }
}

/* ---- Page and app grid ---------------------------------------------------------- */
.hc-page {
  position: relative;
  height: 100vh; height: 100dvh;
  min-width: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);   /* the header's content can never widen the app */
  overflow: hidden; overflow: clip;
}
/* Every region contains its absolutely positioned descendants (visually hidden
   text, handles, badges) so none of them can extend the page. */
.hc-app, .hc-toolbar, .hc-banner, .hc-rail, .hc-outline, .hc-center,
.hc-inspector, .hc-kpis, .hc-dock, .hc-mobilebar, .hc-statusbar { position: relative; min-width: 0; }
.hc-app {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto var(--statusbar-h);
  background: var(--surface-page);
}
.hc-toolbar {
  min-height: var(--hc-toolbar-h);
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-4);
  background: var(--surface-card);
  border-bottom: 1px solid var(--line-default);
  min-width: 0;
}
.hc-banner:empty { display: none; }

/* Diagram and Results each own the workspace; graphs never share a short dock. */
.hc-workspace {
  position: relative; min-height: 0; min-width: 0;
  display: grid; grid-template-columns: 0 minmax(0, 1fr) var(--hc-inspector-w);
  grid-template-rows: 52px minmax(0, 1fr);
}
.hc-workspace[data-outline="open"] { grid-template-columns: var(--hc-outline-w) minmax(0, 1fr) var(--hc-inspector-w); }
.hc-rail { grid-column: 2; grid-row: 1; min-height: 0; }
.hc-outline { grid-column: 1; grid-row: 1 / 3; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--ink-800); border-right: 1px solid var(--line-chrome); }
.hc-center { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; }
.hc-inspector { grid-column: 3; grid-row: 1 / 3; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--surface-card); border-left: 1px solid var(--line-default); }
.hc-canvas { position: relative; min-height: 0; min-width: 0; overflow: hidden; background: var(--surface-canvas); }
.hc-kpis { min-width: 0; background: var(--surface-card); border-top: 1px solid var(--line-default); }
.hc-dock { min-width: 0; min-height: 0; background: var(--surface-card); border-top: 1px solid var(--line-default); }
.hc-workspace[data-view="diagram"] .hc-dock { display: none; }
.hc-workspace[data-view="results"] { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
.hc-workspace[data-view="results"] .hc-center { grid-column: 1; grid-row: 1; grid-template-rows: auto minmax(0,1fr); }
.hc-workspace[data-view="results"] .hc-canvas,
.hc-workspace[data-view="results"] .hc-rail,
.hc-workspace[data-view="results"] .hc-outline,
.hc-workspace[data-view="results"] .hc-inspector { display: none; }
.hc-toolbar { grid-row: 1; }
.hc-contextbar { grid-row: 2; display: flex; align-items: center; gap: var(--space-5); min-width: 0; padding: 4px var(--space-5); background: var(--surface-sunken); border-bottom: 1px solid var(--line-default); }
.hc-contextbar .hc-banner { flex: 1; min-width: 0; }
.hc-contextbar #hc-scenarios { flex: none; }
.hc-workspace { grid-row: 3; }
.hc-mobilebar { grid-row: 4; display: none; }
.hc-statusbar { grid-row: 5; min-width: 0; }

@media (max-width: 1180px) {
  .hc-workspace { grid-template-columns: 0 minmax(0,1fr); }
  .hc-workspace[data-outline="open"] { grid-template-columns: var(--hc-outline-w) minmax(0,1fr); }
  .hc-inspector { position: absolute; top: 0; right: 0; bottom: 0; z-index: 20; width: min(var(--hc-inspector-w),92vw); box-shadow: var(--shadow-2); transform: translateX(8px); opacity: 0; visibility: hidden; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
  .hc-workspace[data-inspector="open"] .hc-inspector { transform: none; opacity: 1; visibility: visible; }
  .hc-workspace[data-view="results"] { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
  .hc-app { grid-template-rows: auto auto minmax(0,1fr) auto 0; }
  .hc-statusbar { display: none; }
  .hc-contextbar { flex-wrap: wrap; gap: 0; padding: 0 var(--space-3); }
  .hc-contextbar #hc-scenarios { width: 100%; padding-top: 4px; }
  .hc-contextbar .hc-banner { width: 100%; flex-basis: 100%; }
  .hc-workspace, .hc-workspace[data-outline="open"] { grid-template-columns: minmax(0,1fr); grid-template-rows: 48px minmax(0,1fr); }
  .hc-rail { grid-column: 1; grid-row: 1; }
  .hc-outline { display: none; }
  .hc-center, .hc-inspector { grid-column: 1; grid-row: 2; }
  .hc-inspector { position: relative; inset: auto; width: auto; box-shadow: none; border-left: 0; transform: none; opacity: 1; visibility: visible; transition: none; }
  .hc-workspace[data-pane="diagram"] .hc-inspector,
  .hc-workspace[data-pane="results"] .hc-inspector { display: none; }
  .hc-workspace[data-pane="properties"] .hc-center { display: none; }
  .hc-workspace[data-pane="diagram"] .hc-kpis { display: none; }
  .hc-workspace[data-view="results"] { grid-template-rows: minmax(0,1fr); }
  .hc-workspace[data-view="results"] .hc-center { grid-column: 1; grid-row: 1; }
  .hc-mobilebar { display: flex; background: var(--surface-chrome); border-top: 1px solid var(--line-chrome); padding-bottom: env(safe-area-inset-bottom); }
}

/* ---- Shared small parts ------------------------------------------------------------ */
.hc-grow { flex: 1 1 auto; min-width: 0; }
.hc-row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.hc-num { font: var(--type-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-mono); }
.hc-num-sm { font: var(--type-mono-sm); font-variant-numeric: tabular-nums; }
.hc-icon { flex: none; display: block; }
.hc-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hc-kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  font: var(--type-mono-sm); font-variant-numeric: tabular-nums; color: var(--text-primary);
  background: var(--surface-sunken); border: 1px solid var(--line-default); border-bottom-width: 2px; border-radius: var(--radius-1);
}

/* Status: a 6px dot plus a text label. Never a coloured row. */
.hc-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text-primary); }
.hc-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--ink-300); }
.hc-status[data-tone="pass"]::before { background: var(--green-500); }
.hc-status[data-tone="fail"]::before { background: var(--red-500); }
.hc-status[data-tone="warn"]::before { background: var(--amber-500); }
.hc-status[data-tone="info"]::before { background: var(--blue-500); }
.hc-status[data-tone="na"]::before { background: var(--ink-200); }

/* Segmented control. Buttons carry aria-pressed; CSS draws the state. */
.hc-seg {
  display: inline-flex; align-items: stretch; flex: none;
  border: 1px solid var(--line-default); border-radius: var(--radius-1);
  background: var(--surface-sunken); padding: 2px; gap: 2px;
}
.hc-seg > button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--radius-1);
  background: transparent; color: var(--text-secondary); cursor: pointer;
  font: 500 12px/1 var(--font-sans); white-space: nowrap;
  transition: var(--transition-control);
}
.hc-seg > button:hover:not(:disabled) { color: var(--text-primary); background: var(--surface-hover); }
.hc-seg > button[aria-pressed="true"] {
  background: var(--surface-card); color: var(--text-primary); border-color: var(--line-default);
  box-shadow: inset 0 -2px 0 var(--red-500);
}
.hc-seg > button:disabled { color: var(--text-muted); cursor: not-allowed; }
.hc-seg--full { display: flex; }
.hc-seg--full > button { flex: 1 1 0; justify-content: center; }

/* Panel section header strip (ALL-CAPS label on a sunken 26px strip). */
.hc-panelhead {
  height: 26px; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4);
  background: var(--surface-sunken); border-bottom: 1px solid var(--line-default); flex: none;
}
.hc-panelhead .ar-label { flex: 1 1 auto; }

.hc-empty { display: grid; place-items: center; align-content: center; gap: var(--space-3); padding: var(--space-8); text-align: center; color: var(--text-secondary); }
.hc-empty .hc-icon { color: var(--text-secondary); }

/* Thin scrollbars in panels. */
.hc-inspector, .hc-outline, .hc-dock * { scrollbar-width: thin; scrollbar-color: var(--ink-200) transparent; }

/* Touch devices: controls grow to the 44px hit target. */
@media (pointer: coarse) {
  .ar-btn, .hc-seg > button { min-height: 44px; }
  .ar-iconbtn { min-width: 44px; }
  .ar-input, .ar-select { height: 44px; font-size: 16px; }
}

/* ---- Overlays: menus, dialogs, toasts, hover cards ------------------------------------ */
#hc-overlays { position: relative; z-index: 100; }
.hc-menu { position: fixed; z-index: 110; animation: ar-rise var(--dur-base) var(--ease-out); box-shadow: var(--shadow-2); }
.hc-menu__item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 30px; }
.hc-menu__item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--red-500); }
@media (pointer: coarse) { .hc-menu__item { min-height: 44px; } }
.hc-menu__icon { display: grid; place-items: center; color: var(--text-secondary); }
.hc-menu__kbd { color: var(--text-secondary); }
.hc-menu__item--danger { color: var(--text-danger); }
.hc-menu__item--danger .hc-menu__icon { color: currentColor; }

.hc-scrim { z-index: 105; animation: ar-fade var(--dur-base) var(--ease-out); }
.hc-scrim--out { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.hc-dialog { animation: ar-rise var(--dur-slow) var(--ease-out); box-shadow: var(--shadow-3); }
.hc-dialog:focus, .hc-dialog:focus-visible { outline: none; }   /* focusable only to hold focus after a click inside */
.hc-dialog__title { flex: 1 1 auto; }
.hc-dialog__x { margin-right: -6px; }
.hc-dialog__body { font: var(--type-body-sm); }
.hc-dialog__body p + p { margin-top: var(--space-3); }

.hc-toasts { bottom: calc(var(--statusbar-h) + 12px); z-index: 120; }
.hc-toast { display: flex; align-items: center; gap: var(--space-3); animation: ar-rise var(--dur-base) var(--ease-out); box-shadow: var(--shadow-2); color: var(--text-primary); }
.hc-toast__msg { flex: 1 1 auto; font: var(--type-body-sm); }
.hc-toast--out { opacity: 0; transform: translateY(4px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
@media (max-width: 760px) { .hc-toasts { left: 12px; right: 12px; width: auto; bottom: 64px; } }

.hc-hovercard {
  position: fixed; left: 0; top: 0; z-index: 130; pointer-events: none;
  min-width: 160px; max-width: 280px; padding: 8px 10px;
  background: var(--surface-card); color: var(--text-body);
  border: 1px solid var(--line-strong); border-radius: var(--radius-2); box-shadow: var(--shadow-2);
  font: var(--type-body-sm);
}
.hc-hovercard[hidden] { display: none; }
.hc-hovercard__title { font: var(--type-h4); color: var(--text-primary); margin-bottom: 4px; }
.hc-hovercard__kv { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 0; }
.hc-hovercard__kv dt { color: var(--text-secondary); }
.hc-hovercard__kv dd { margin: 0; text-align: right; color: var(--text-primary); }

/* ---- Print: the report replaces the app ------------------------------------------------- */
.hc-print { display: none; }
@media print {
  html, body, body.hc-body { height: auto; overflow: visible; background: var(--paper-0); }
  .hc-page, #hc-overlays { display: none !important; }
  .hc-print { display: block; }
}