/* hUniverse family header, tool switcher and preferences. Uses the design tokens only. */
.hu-root { --hu-hdr-h: 56px; position: relative; z-index: 50; font: var(--type-body); font-variant-numeric: var(--type-numeric); }
.hu-root[data-sticky="true"] { position: sticky; top: 0; }
.hu-root *, .hu-root *::before, .hu-root *::after { box-sizing: border-box; }
@media (min-width: 640px) { .hu-root { --hu-hdr-h: 64px; } }

.hu-hdr { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--space-2); height: var(--hu-hdr-h); padding: 0 var(--space-2); background: var(--surface-header); color: var(--text-on-header); border-bottom: 1px solid var(--border-header); }
@media (min-width: 640px) { .hu-hdr { gap: 14px; padding: 0 var(--space-3) 0 10px; } }
.hu-spacer { flex: 1; min-width: 0; }
.hu-div { width: 1px; height: 24px; background: color-mix(in srgb, var(--text-on-header) 24%, transparent); flex: none; }

.hu-glyph { flex: none; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) 0 0; border: 0; background: transparent; border-radius: var(--radius-ui); cursor: pointer; color: var(--text-on-header); text-align: left; transition: background var(--duration-fast) var(--ease); }
.hu-glyph:hover { background: color-mix(in srgb, var(--text-on-header) 10%, transparent); }
.hu-glyph img { width: 36px; height: 36px; display: block; flex: none; }
.hu-glyph-label { font: 600 11px/13px var(--font-ui); color: var(--text-on-header); white-space: nowrap; }
@media (min-width: 640px) { .hu-glyph img { width: 40px; height: 40px; } .hu-glyph-label { font-size: 13px; line-height: 15px; } }

.hu-id { display: flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--text-on-header); text-decoration: none; border-radius: var(--radius-ui); }
.hu-id img { width: 32px; height: 32px; flex: none; display: block; }
@media (min-width: 640px) { .hu-id { gap: var(--space-3); } .hu-id img { width: 44px; height: 44px; } }
.hu-id-tx { display: flex; flex-direction: column; min-width: 0; }
.hu-id-domain { font: 700 17px/22px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-on-header); }
.hu-id-name { display: none; font: var(--type-small); color: var(--text-on-header); line-height: 16px; white-space: nowrap; }
@media (min-width: 640px) { .hu-id-domain { font: 700 19px/24px var(--font-ui); } .hu-id-name { display: block; } }

.hu-btn { display: inline-flex; align-items: center; gap: 6px; height: var(--control-h-sm); padding: 0 10px; border: 1px solid color-mix(in srgb, var(--text-on-header) 32%, transparent); border-radius: var(--radius-ui); background: transparent; color: var(--text-on-header); font: 600 13px/20px var(--font-ui); white-space: nowrap; cursor: pointer; transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); }
.hu-btn:hover { background: color-mix(in srgb, var(--text-on-header) 12%, transparent); border-color: color-mix(in srgb, var(--text-on-header) 55%, transparent); }
.hu-ico { flex: none; }
.hu-controls { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.hu-prefs-hdr { display: none; align-items: center; gap: var(--space-2); }
.hu-prefs-hdr .hu-btn-text { display: none; }
@media (min-width: 640px) { .hu-prefs-hdr { display: flex; } }
@media (min-width: 900px) { .hu-prefs-hdr .hu-btn-text { display: inline; } }

.hu-root :is(button, a, input):focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.hu-hdr :is(button, a):focus-visible { outline-color: var(--text-on-header); }

/* scrim and panel */
.hu-scrim { position: fixed; inset: 0; z-index: 1; background: color-mix(in srgb, #000 42%, transparent); animation: hu-fade var(--duration-base) var(--ease) both; }
.hu-panel { position: absolute; z-index: 3; top: 100%; left: var(--space-3); right: var(--space-3); max-width: 880px; margin-top: var(--space-2); max-height: calc(100dvh - var(--hu-hdr-h) - var(--space-6)); overflow: auto; background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-ui); padding: var(--space-4); animation: hu-panel-in 200ms var(--ease) both; }
.hu-panel .hu-btn { color: var(--text-primary); border-color: var(--border-strong); }
.hu-panel .hu-btn:hover { background: var(--surface-raised); border-color: var(--text-secondary); }
.hu-panel-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.hu-panel-head img { width: 32px; height: 32px; display: block; }
.hu-home { display: flex; flex: none; border-radius: var(--radius-ui); transition: opacity var(--duration-fast) var(--ease); }
.hu-home:hover { opacity: .75; }
.hu-panel-title { display: flex; flex-direction: column; min-width: 0; }
.hu-fam { font: 700 17px/22px var(--font-ui); }
.hu-slogan { font: var(--type-small); font-weight: 600; color: var(--text-primary); }
.hu-byline { font: var(--type-small); color: var(--text-secondary); }
.hu-label { margin: var(--space-4) 0 var(--space-2); font: var(--type-label); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--text-secondary); }


.hu-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 640px) { .hu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hu-card { --edge: var(--cobalt); display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: 10px 12px 10px 10px; border: 1px solid var(--border-subtle); border-left: var(--stroke-indicator) solid var(--edge); border-radius: var(--radius-ui); background: var(--surface-switcher-card); color: var(--midnight); text-decoration: none; animation: hu-in 220ms var(--ease) both; animation-delay: calc(var(--i, 0) * 24ms + 60ms); transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); }
.hu-card[data-accent="sky"] { --edge: var(--sky); } .hu-card[data-accent="amber"] { --edge: var(--amber); }
.hu-card[data-accent="verde"] { --edge: var(--verde); } .hu-card[data-accent="rose"] { --edge: var(--rose); }
.hu-card[data-accent="orchid"] { --edge: var(--orchid); }
:root[data-theme="dark"] .hu-card[data-accent="orchid"] { --edge: var(--orchid-lift); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hu-card[data-accent="orchid"] { --edge: var(--orchid-lift); } }
.hu-card:hover, .hu-card:focus-visible { background: color-mix(in srgb, var(--edge) 10%, var(--surface-switcher-card)); border-color: var(--border-strong); border-left-color: var(--edge); }
.hu-card:focus-visible { outline-color: var(--midnight); }
.hu-card[aria-current="page"] { background: color-mix(in srgb, var(--edge) 12%, var(--surface-switcher-card)); }
.hu-card img { width: 44px; height: 44px; flex: none; display: block; border-radius: var(--radius-ui); }
.hu-card-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hu-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.hu-domain { font: 700 16px/20px var(--font-ui); overflow-wrap: anywhere; }
.hu-d2 { font: var(--type-small); line-height: 16px; color: var(--slate); }
.hu-name { font: var(--type-small); line-height: 18px; color: var(--slate); }
.hu-here { font: 700 10px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; padding: 0 5px; border: 1px solid var(--midnight); border-radius: var(--radius-ui); flex: none; }
.hu-card .hu-ico { color: var(--slate); }

.hu-chans { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 640px) { .hu-chans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hu-chan { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-ui); background: var(--surface-card); color: var(--text-primary); text-decoration: none; font: 600 15px/20px var(--font-ui); transition: background var(--duration-fast) var(--ease); }
.hu-chan:hover { background: var(--surface-raised); }
.hu-chan img { width: 40px; height: 40px; flex: none; display: block; }
.hu-chan-name { flex: 1; }

.hu-field { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }

/* phone: one "Aa" button opens the display settings; desktop shows the controls inline */
.hu-display { display: block; }
@media (min-width: 640px) { .hu-display { display: none; } }
.hu-display-btn { font-weight: 700; }
.hu-popover { position: absolute; z-index: 3; top: 100%; right: var(--space-2); margin-top: var(--space-2); width: min(340px, calc(100vw - 16px)); display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-ui); animation: hu-panel-in 200ms var(--ease) both; }
.hu-scrim-clear { background: transparent; }
.hu-label-inline { font: var(--type-small); color: var(--text-secondary); }
.hu-seg { display: inline-flex; }
.hu-seg button { height: var(--control-h-sm); margin-left: -1px; padding: 0 var(--space-3); border: 1px solid var(--border-strong); background: transparent; color: var(--text-primary); font: 600 13px/20px var(--font-ui); cursor: pointer; }
.hu-seg button:first-child { margin-left: 0; border-radius: var(--radius-ui) 0 0 var(--radius-ui); }
.hu-seg button:last-child { border-radius: 0 var(--radius-ui) var(--radius-ui) 0; }
.hu-seg button:hover { background: var(--surface-raised); }
.hu-seg button[aria-checked="true"] { background: var(--surface-raised); border-color: var(--text-primary); position: relative; z-index: 1; }

@keyframes hu-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hu-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes hu-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hu-scrim, .hu-panel, .hu-popover, .hu-card, .hu-ecgbar { animation: none; }
  .hu-card, .hu-btn, .hu-chan { transition: none; }
}
@media print { .hu-root { display: none; } }

/* ---------- motion tiers ---------- */
html[data-motion="static"] { --duration-fast: 0ms; --duration-base: 0ms; }
html[data-motion="static"] *, html[data-motion="static"] *::before, html[data-motion="static"] *::after {
  animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
}
html[data-motion="lite"] .hu-sheen::after, html[data-motion="static"] .hu-sheen::after { display: none; }

/* ---------- shared utilities ---------- */
.hu-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hu-enter { animation: hu-in 280ms var(--ease) both; }
.hu-stagger > * { animation: hu-in 280ms var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
/* A soft glint that crosses a control once on hover. Pointer-only, off in Reduced and Off. */
.hu-sheen { position: relative; overflow: hidden; }
.hu-sheen::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, color-mix(in srgb, #fff 30%, transparent), transparent); transform: skewX(-20deg); pointer-events: none; }
@media (hover: hover) { .hu-sheen:hover::after { transform: translateX(480%) skewX(-20deg); transition: transform 650ms var(--ease); } }

/* ---------- hold to confirm ---------- */
.hu-hold { position: relative; overflow: hidden; display: inline-flex; align-items: center; height: var(--control-h); padding: 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-ui); background: transparent; color: var(--text-primary); font: 600 14px/20px var(--font-ui); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; transition: background var(--duration-fast) var(--ease); }
.hu-hold { white-space: nowrap; }
.hu-hold-sm { height: var(--control-h-sm); padding: 0 var(--space-3); font-size: 13px; }
.hu-hold:hover { background: var(--surface-raised); }
.hu-hold:disabled { color: var(--text-disabled); cursor: not-allowed; }
.hu-hold:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.hu-hold-fill { position: absolute; inset: 0; background: var(--danger-fill); transform-origin: left; transform: scaleX(0); pointer-events: none; }
.hu-hold-label { position: relative; display: flex; justify-content: space-between; gap: var(--space-3); width: 100%; }
.hu-hold-label[data-on="true"] { color: var(--danger-on-fill); }
.hu-hold-hint { font: var(--type-keycap); opacity: .8; }

/* ---------- app tab row ---------- */
.hu-tabs { display: flex; align-items: flex-end; gap: var(--space-3); background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); padding: 0 var(--space-3); }
@media (min-width: 640px) { .hu-tabs { padding: 0 var(--space-5); } }
.hu-tabs-scroll { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.hu-tabs-scroll::-webkit-scrollbar { display: none; }
.hu-tabs-track { position: relative; display: inline-block; min-width: 100%; }
.hu-tabs-list { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.hu-tab { display: inline-flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-3); color: var(--text-secondary); text-decoration: none; font: 600 15px/20px var(--font-ui); white-space: nowrap; border-radius: var(--radius-ui) var(--radius-ui) 0 0; transition: color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease); }
.hu-tab:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
.hu-tab[aria-current="page"] { color: var(--text-primary); }
.hu-tab:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -2px; }
.hu-tabs-ind { position: absolute; left: 0; bottom: 0; height: var(--stroke-indicator); background: var(--accent); transition: transform var(--duration-base) var(--ease), width var(--duration-base) var(--ease), opacity var(--duration-fast) linear; pointer-events: none; }
.hu-tabs-trail { flex: none; padding: 0 0 var(--space-2); }

/* ---------- shared footer: a quiet paper band, no rules or boxes ---------- */
.hu-footer { margin-top: var(--space-10); background: var(--surface-raised); color: var(--text-secondary); font: var(--type-small); }
.hu-footer-in { max-width: 1240px; margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-8); }
.hu-note { margin: 0; text-wrap: pretty; }
.hu-note b { color: var(--text-primary); }
.hu-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-4); }
.hu-footer-links a { color: var(--text-primary); }
.hu-ctl { display: inline-flex; align-items: center; gap: 6px; }
.hu-ctl svg { flex: none; opacity: .8; }
.hu-copy { margin: var(--space-4) 0 0; }
.hu-footer a:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }

/* ---------- text size buttons (A- and A+) ---------- */
.hu-sizes { display: inline-flex; align-items: center; gap: 2px; }
.hu-size { display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: var(--control-h-sm); height: var(--control-h-sm); padding: 0 8px; border: 1px solid color-mix(in srgb, var(--text-on-header) 32%, transparent); border-radius: var(--radius-ui); background: transparent; color: var(--text-on-header); font: 700 13px/1 var(--font-ui); cursor: pointer; transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); }
.hu-size:hover { background: color-mix(in srgb, var(--text-on-header) 12%, transparent); border-color: color-mix(in srgb, var(--text-on-header) 55%, transparent); }
.hu-size[aria-disabled="true"] { opacity: .4; cursor: default; background: transparent; }
.hu-a-s { font-size: 12px; } .hu-a-l { font-size: 18px; } .hu-pm { font-size: 13px; }
.hu-popover .hu-size { color: var(--text-primary); border-color: var(--border-strong); }
.hu-popover .hu-size:hover { background: var(--surface-raised); border-color: var(--text-secondary); }
.hu-popover .hu-size[aria-disabled="true"]:hover { background: transparent; border-color: var(--border-strong); }
.hu-field-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hu-hint { font: var(--type-small); line-height: 16px; color: var(--text-secondary); }
.hu-popover .hu-field { flex-direction: column; align-items: stretch; gap: var(--space-2); }
.hu-popover .hu-seg { display: flex; }
.hu-popover .hu-seg button { flex: 1; }
.hu-popover .hu-sizes { align-self: flex-start; }

/* ---------- tooltips: plain-language help on hover and keyboard focus (decoration only; labels carry the meaning) ---------- */
.hu-tip { position: relative; }
.hu-tip::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: 0; z-index: 6; width: max-content; max-width: 230px; padding: 6px 10px; border: 1px solid var(--ink-line-2); border-radius: var(--radius-ui); background: var(--ink-0); color: var(--ink-text); font: 400 13px/18px var(--font-ui); text-align: left; white-space: normal; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(-2px); transition: opacity var(--duration-fast) linear, transform var(--duration-fast) var(--ease), visibility 0s var(--duration-fast); }
.hu-tip-start::after { left: 0; right: auto; }
.hu-tip[aria-expanded="true"]::after { display: none; }
.hu-tip:focus-visible::after { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) { .hu-tip:hover::after { opacity: 1; visibility: visible; transform: none; transition-delay: 350ms, 350ms, 0s; } }

/* ---------- heartbeat sweep across the top of the tools panel ---------- */
.hu-ecgbar { display: flex; align-items: center; height: 30px; margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3); animation: hu-sweep 1500ms cubic-bezier(.4, 0, .2, 1) both; }
.hu-ecg-lead, .hu-ecg-tail { display: block; height: 1.6px; background: var(--text-primary); }
.hu-ecg-lead { flex: 1.35; } .hu-ecg-tail { flex: 1; }
.hu-ecg-wave { flex: none; width: 54px; height: 26px; overflow: visible; }
.hu-ecg-wave path { stroke: var(--text-primary); stroke-width: 1.6px; }
@keyframes hu-sweep { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- first-use terms notice: gentle, one clear action ---------- */
.hu-terms-wrap { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; padding: var(--space-3); padding-bottom: max(var(--space-3), env(safe-area-inset-bottom)); }
@media (min-width: 640px) { .hu-terms-wrap { align-items: center; } }
.hu-terms-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--midnight) 26%, transparent); animation: hu-fade 400ms var(--ease) both; }
.hu-terms { position: relative; width: min(30rem, 100%); max-height: calc(100dvh - var(--space-6)); overflow: auto; padding: var(--space-5); background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-ui); font: var(--type-body); animation: hu-terms-in 420ms var(--ease) both; outline: none; }
.hu-terms-title { margin: 0 0 var(--space-2); font: var(--type-h2); font-size: 22px; line-height: 28px; }
.hu-terms-body p { margin: 0 0 var(--space-2); }
.hu-terms-body ul { margin: 0 0 var(--space-3); padding-left: 1.2em; list-style: disc; }
.hu-terms-body li { margin: 0 0 var(--space-1); }
.hu-terms-check { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 0 var(--space-4); padding: var(--space-3); background: var(--surface-raised); border-radius: var(--radius-ui); font: var(--type-small); color: var(--text-secondary); cursor: pointer; }
.hu-terms-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--text-primary); }
.hu-terms-check b { color: var(--text-primary); }
.hu-terms-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.hu-terms-accept { height: var(--control-h); padding: 0 var(--space-5); border: 0; border-radius: var(--radius-ui); background: var(--text-primary); color: var(--surface-page); font: 600 15px/20px var(--font-ui); cursor: pointer; transition: background var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease); }
.hu-terms-accept:hover { background: color-mix(in srgb, var(--text-primary) 86%, var(--accent)); }
.hu-terms-accept:active { transform: scale(.98); }
.hu-terms-more { font: var(--type-small); color: var(--text-primary); }
.hu-terms-foot { margin: var(--space-3) 0 0; font: var(--type-small); color: var(--text-secondary); }
.hu-terms-foot a { color: var(--text-secondary); }
.hu-terms-x { position: absolute; top: var(--space-2); right: var(--space-2); display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-sm); height: var(--control-h-sm); border: 0; border-radius: var(--radius-ui); background: transparent; color: var(--text-secondary); cursor: pointer; }
.hu-terms-x:hover { background: var(--surface-raised); color: var(--text-primary); }
.hu-terms :is(button, a, input):focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
@keyframes hu-terms-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hu-terms, .hu-terms-scrim { animation: none; } }
html[data-motion="lite"] .hu-terms { animation-name: hu-fade; }
/* phones: the notice stays compact so it never feels like a wall of text */
@media (max-width: 639px) {
  .hu-terms { padding: var(--space-4); }
  .hu-terms-title { font-size: 20px; line-height: 26px; }
  .hu-terms-body { font: var(--type-small); }
  .hu-terms-body p { margin-bottom: var(--space-2); }
  .hu-terms-check { margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); }
}