/* ==========================================================================================================
   DINGO HORIZON - component layer v0.1 (needs tokens.css first)
   Plain CSS classes (hz-*) so the same look works in vanilla pages (portals, Jinja) and React (className).
   Each block lists the matching React component name used by docs/ARCHITECTURE.md.
   ========================================================================================================== */

.hz-root { background: var(--hz-atmosphere); background-color: var(--hz-bg); background-attachment: fixed; color: var(--hz-ink);
  font: 400 var(--hz-text-md)/1.5 var(--hz-font); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
.hz-num, .hz-root time, .hz-root td { font-variant-numeric: tabular-nums; }
.hz-root [hidden], .hz-toast[hidden] { display: none !important; }
.hz-root *, .hz-root *::before, .hz-root *::after { box-sizing: border-box; }
.hz-overline { font-size: var(--hz-text-xs); font-weight: 650; font-stretch: var(--hz-label-stretch); letter-spacing: var(--hz-label-track);
  text-transform: uppercase; color: var(--hz-muted); }
.hz-h1 { font-size: var(--hz-text-2xl); font-weight: 650; letter-spacing: -.012em; line-height: 1.15; margin: 0; }
.hz-h2 { font-size: var(--hz-text-lg); font-weight: 650; letter-spacing: -.005em; margin: 0; }
.hz-muted { color: var(--hz-muted); }
:where(.hz-root) :focus-visible { outline: 2px solid var(--hz-accent-hi); outline-offset: 2px; border-radius: 6px; }

/* ---- HorizonPanel / HorizonCard: satin smoked glass, 8 layers (fill, glass blur, champagne rim, darker lower edge,
        internal reflection, diffused shadow, inner highlight) - decorative layers never take pointer events ---- */
.hz-panel {
  position: relative; isolation: isolate; border-radius: 20px;
  background: var(--hz-panel-fill); border: 1px solid var(--hz-panel-edge); box-shadow: var(--hz-panel-shadow);
  -webkit-backdrop-filter: var(--hz-glass-filter); backdrop-filter: var(--hz-glass-filter);
}
/* decorative layers sit BELOW the content (z-index -1 inside the isolated panel) and never take pointer events */
.hz-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: var(--hz-panel-sheen); }
.hz-panel::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; z-index: -1; background: var(--hz-panel-glow); }
.hz-panel.raised, .hz-tile { position: relative; border-radius: 14px; background: var(--hz-tile-fill); border: 1px solid var(--hz-tile-edge); box-shadow: var(--hz-tile-shadow); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hz-panel { background: var(--hz-surface-solid); }
}

/* ---- HorizonHeader: brushed metal + an illuminated rule ---- */
.hz-header { position: relative; display: flex; align-items: center; gap: var(--hz-space-3); padding: 10px 20px;
  background: var(--hz-metal); color: var(--hz-ink); box-shadow: inset 0 1px 0 rgba(255, 240, 225, .07), 0 6px 20px -10px rgba(0, 0, 0, .6); }
.hz-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(210, 154, 112, 0) 0%, rgba(210, 154, 112, .55) 22%, rgba(241, 193, 142, .9) 50%, rgba(210, 154, 112, .55) 78%, rgba(210, 154, 112, 0) 100%); }
.hz-brand { display: flex; align-items: center; gap: 12px; }
.hz-brand img.face { width: 34px; height: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }
.hz-brand img.word { height: 15px; width: auto; opacity: .96; }   /* the white wordmark as supplied - never recoloured */

/* ---- HorizonButton: sculpted switches. primary = copper (one per view), secondary = satin, selected = champagne,
        danger = red, ghost = text. Click handlers never wait for an animation. ---- */
.hz-btn { --_h: var(--hz-control-h);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--_h); padding: 0 18px;
  border-radius: 13px; border: 1px solid var(--hz-tile-edge); cursor: pointer; font: 600 14px/1 var(--hz-font); letter-spacing: .01em;
  color: var(--hz-ink); user-select: none; background: var(--hz-tile-fill); box-shadow: var(--hz-tile-shadow);
  transition: transform var(--hz-dur-control) var(--hz-ease-out), filter var(--hz-dur-control) var(--hz-ease-out),
              box-shadow var(--hz-dur-control) var(--hz-ease-out), border-color var(--hz-dur-micro);
}
.hz-btn:hover:not(:disabled) { border-color: rgba(241, 193, 142, .34); filter: brightness(1.06); transform: translateY(-1px); }
.hz-btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(.98); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); }
.hz-btn:focus-visible { outline: none; box-shadow: var(--hz-focus-ring); }
.hz-btn:disabled { cursor: not-allowed; opacity: .5; filter: saturate(.6); }
.hz-btn.primary { color: var(--hz-on-accent); border-color: var(--hz-copper-edge); background: var(--hz-copper-fill); box-shadow: var(--hz-copper-shadow); }
.hz-btn.primary:hover:not(:disabled) { filter: brightness(1.07); }
.hz-btn.primary:active:not(:disabled) { filter: brightness(.98); box-shadow: inset 0 2px 5px rgba(111, 57, 30, .4); }
.hz-btn.primary:focus-visible { box-shadow: var(--hz-copper-shadow), var(--hz-focus-ring); }
.hz-btn.selected, .hz-btn[aria-pressed="true"] { color: #2B1D17; border-color: rgba(255, 230, 200, .5); background: var(--hz-select-fill);
  box-shadow: inset 0 1px 0 rgba(255, 248, 236, .6), inset 0 -1px 2px rgba(111, 57, 30, .2), 0 3px 8px rgba(33, 15, 8, .2); }
.hz-btn.danger { color: #fff; border-color: rgba(255, 160, 150, .4); background: linear-gradient(180deg, #D9483A 0%, #C8382B 55%, #A92C21 100%);
  box-shadow: inset 0 1px 0 rgba(255, 210, 200, .35), inset 0 -2px 3px rgba(80, 10, 5, .25), 0 5px 12px rgba(33, 8, 5, .25); }
.hz-btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--hz-ink-2); }
.hz-btn.ghost:hover:not(:disabled) { background: var(--hz-surface-2); transform: none; }
.hz-btn.lg { --_h: var(--hz-control-h-lg); padding: 0 22px; font-size: 15px; }
.hz-btn.icon { width: var(--_h); padding: 0; }
.hz-btn svg { width: 18px; height: 18px; }

/* ---- HorizonTabs: recessed track + one travelling indicator (motion.js positions it) ---- */
.hz-tabs { position: relative; display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--hz-r-md);
  background: var(--hz-well); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(241, 193, 142, .06); }
.hz-tab { position: relative; z-index: 1; border: 0; background: transparent; color: var(--hz-muted); cursor: pointer; white-space: nowrap;
  font: 620 13px/1 var(--hz-font); font-stretch: 106%; letter-spacing: .02em; padding: 9px 14px; border-radius: 10px;
  transition: color var(--hz-dur-control) var(--hz-ease-out); }
.hz-tab:hover { color: var(--hz-ink-2); }
.hz-tab[aria-selected="true"] { color: #2B1D17; }
.hz-tab-ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 10px; pointer-events: none;
  background: var(--hz-select-fill);
  box-shadow: inset 0 1px 0 rgba(255, 248, 236, .6), inset 0 -1px 2px rgba(111, 57, 30, .2), 0 3px 8px rgba(33, 15, 8, .22);
  transition: transform var(--hz-dur-panel) var(--hz-ease-spring), width var(--hz-dur-panel) var(--hz-ease-spring); }
.hz-tab-ind.no-anim { transition: none; }

/* ---- HorizonInput / HorizonSelect ---- */
.hz-field { display: grid; gap: 6px; }
.hz-field > .hz-label { font-size: 12px; font-weight: 620; color: var(--hz-ink-2); letter-spacing: .01em; }
.hz-input, .hz-select { width: 100%; min-height: var(--hz-control-h); padding: 0 12px; border-radius: var(--hz-r-sm); color: var(--hz-ink);
  font: 400 15px var(--hz-font); background: var(--hz-well); border: 1px solid var(--hz-line);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
  transition: border-color var(--hz-dur-micro) var(--hz-ease-out), box-shadow var(--hz-dur-micro) var(--hz-ease-out); }
.hz-input::placeholder { color: color-mix(in srgb, var(--hz-muted) 80%, transparent); }
.hz-input:focus, .hz-select:focus { outline: none; border-color: rgba(241, 193, 142, .55); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3), 0 0 0 3px rgba(210, 154, 112, .18); }
.hz-input[aria-invalid="true"] { border-color: var(--hz-bad); }
.hz-field .hz-error { color: var(--hz-bad); font-size: 13px; font-weight: 600; }
.hz-select { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--hz-muted) 50%), linear-gradient(-45deg, transparent 50%, var(--hz-muted) 50%);
  background-position: right 16px top 52%, right 11px top 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.hz-select option { background: var(--hz-surface-solid); color: var(--hz-ink); }

/* ---- HorizonToggle ---- */
.hz-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.hz-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hz-toggle .track { position: relative; width: 44px; height: 24px; border-radius: 999px; background: var(--hz-well);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--hz-line); transition: background var(--hz-dur-control) var(--hz-ease-out), box-shadow var(--hz-dur-control); }
.hz-toggle .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(180deg, #FBF3EC, #D9CBBF); box-shadow: 0 1px 3px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(0, 0, 0, .1);
  transition: transform var(--hz-dur-control) var(--hz-ease-spring); }
.hz-toggle input:checked + .track { background: var(--hz-copper-fill); box-shadow: inset 0 1px 2px rgba(80, 40, 20, .4), inset 0 0 0 1px var(--hz-copper-edge); }
.hz-toggle input:checked + .track::after { transform: translateX(20px); }
.hz-toggle input:focus-visible + .track { outline: 2px solid var(--hz-accent-hi); outline-offset: 2px; }

/* ---- HorizonStatus: tags that change colour smoothly; .hz-ack plays a single acknowledgement ---- */
.hz-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 7px; white-space: nowrap;
  font: 750 11px/1.2 var(--hz-font); font-stretch: var(--hz-label-stretch); letter-spacing: .07em; text-transform: uppercase;
  color: var(--hz-on-fill); background: var(--hz-taupe);
  transition: background-color var(--hz-dur-panel) var(--hz-ease-out), color var(--hz-dur-panel) var(--hz-ease-out), box-shadow var(--hz-dur-panel) var(--hz-ease-out); }
.hz-status.ok   { background: var(--hz-ok-fill);   box-shadow: 0 0 12px -2px rgba(99, 211, 148, .55); }
.hz-status.info { background: var(--hz-info-fill); box-shadow: 0 0 12px -2px rgba(125, 184, 245, .5); }
.hz-status.warn { background: var(--hz-warn-fill); color: var(--hz-on-warn); }
.hz-status.bad  { background: var(--hz-bad-fill); }
.hz-status.quiet { background: var(--hz-surface-2); color: var(--hz-muted); box-shadow: none; }
.hz-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; transition: background-color var(--hz-dur-panel); }
.hz-ack { animation: hz-ack 900ms var(--hz-ease-out) 1; }
@keyframes hz-ack { 0% { box-shadow: 0 0 0 0 rgba(241, 193, 142, .55); } 35% { box-shadow: 0 0 0 6px rgba(241, 193, 142, .18); } 100% { box-shadow: 0 0 0 10px rgba(241, 193, 142, 0); } }

/* ---- HorizonMetric ---- */
.hz-metric { display: grid; gap: 2px; padding: 14px 16px; }
.hz-metric .value { font-size: 28px; font-weight: 640; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hz-metric .delta { font-size: 12px; font-weight: 650; }
.hz-metric .delta.up { color: var(--hz-ok); } .hz-metric .delta.down { color: var(--hz-bad); }
.hz-changed { animation: hz-changed 1.2s var(--hz-ease-out) 1; }
@keyframes hz-changed { 0%, 30% { color: var(--hz-accent-hi); text-shadow: 0 0 14px rgba(241, 193, 142, .45); } 100% { text-shadow: none; } }

/* ---- HorizonTable ---- */
.hz-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.hz-table th { text-align: left; padding: 10px 12px; font: 650 11px var(--hz-font); font-stretch: var(--hz-label-stretch); letter-spacing: .07em;
  text-transform: uppercase; color: var(--hz-muted); border-bottom: 1px solid var(--hz-line-strong); }
.hz-table td { padding: 11px 12px; border-bottom: 1px solid var(--hz-line); font-variant-numeric: tabular-nums; }
.hz-table tbody tr { transition: background-color var(--hz-dur-micro); }
.hz-table tbody tr:hover { background: var(--hz-surface-2); }

/* ---- HorizonModal / HorizonDrawer (native <dialog>) ---- */
.hz-modal, .hz-drawer { border: 1px solid var(--hz-line-strong); color: var(--hz-ink); background: var(--hz-surface-solid); box-shadow: var(--hz-glass-edge), var(--hz-shadow-3); padding: 0; }
.hz-modal { border-radius: var(--hz-r-xl); width: min(520px, calc(100vw - 24px)); }
.hz-modal::backdrop, .hz-drawer::backdrop { background: rgba(18, 12, 11, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.hz-modal[open] { animation: hz-modal-in var(--hz-dur-panel) var(--hz-ease-out); }
.hz-drawer { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(400px, 100vw); border-radius: var(--hz-r-xl) 0 0 var(--hz-r-xl); }
.hz-drawer[open] { animation: hz-drawer-in var(--hz-dur-layout) var(--hz-ease-out); }
@keyframes hz-modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes hz-drawer-in { from { transform: translateX(100%); } }

/* ---- HorizonToast / HorizonTooltip ---- */
.hz-toast { position: fixed; left: 50%; bottom: 28px; z-index: 50; translate: -50% 0; max-width: calc(100vw - 32px);
  display: flex; gap: 10px; align-items: center; padding: 12px 18px; border-radius: var(--hz-r-md);
  background: rgba(46, 36, 33, .92); color: var(--hz-ink); border: 1px solid var(--hz-line-strong); box-shadow: var(--hz-glass-edge), var(--hz-shadow-3);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 14px; font-weight: 500;
  animation: hz-toast-in var(--hz-dur-panel) var(--hz-ease-out); }
@keyframes hz-toast-in { from { opacity: 0; transform: translateY(12px); } }
.hz-tip { position: relative; }
.hz-tip::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 4px; opacity: 0; pointer-events: none;
  white-space: nowrap; padding: 6px 10px; border-radius: 8px; font: 500 12px var(--hz-font); color: var(--hz-ink);
  background: var(--hz-surface-solid); border: 1px solid var(--hz-line-strong); box-shadow: var(--hz-shadow-2);
  transition: opacity var(--hz-dur-micro) var(--hz-ease-out), translate var(--hz-dur-micro) var(--hz-ease-out); }
.hz-tip:hover::after, .hz-tip:focus-visible::after { opacity: 1; translate: -50% 0; transition-delay: 350ms; }

/* ---- expanding region: grid-rows 0fr -> 1fr, no height measuring, no layout jump ---- */
.hz-expand { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--hz-dur-panel) var(--hz-ease-out), opacity var(--hz-dur-panel) var(--hz-ease-out); opacity: 0; }
.hz-expand > * { overflow: hidden; min-height: 0; }
.hz-expand.open, [aria-expanded="true"] + .hz-expand { grid-template-rows: 1fr; opacity: 1; }

/* ---- HorizonTimeline ---- */
.hz-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; display: grid; gap: 14px; }
.hz-timeline::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--hz-accent) 0%, rgba(210, 154, 112, .15) 100%); }
.hz-timeline li { position: relative; }
.hz-timeline li::before { content: ""; position: absolute; left: -17px; top: 6px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--hz-bg); box-shadow: 0 0 0 2px var(--hz-accent); }
.hz-timeline li.now::before { background: var(--hz-accent-hi); box-shadow: 0 0 0 2px var(--hz-accent-hi), 0 0 10px rgba(241, 193, 142, .7); }

/* ---- HorizonSkeleton / Loading / Empty / Error ---- */
.hz-skel { border-radius: 8px; background: linear-gradient(90deg, rgba(255, 236, 214, .05) 0%, rgba(255, 236, 214, .11) 50%, rgba(255, 236, 214, .05) 100%);
  background-size: 200% 100%; animation: hz-shimmer 1.4s linear infinite; }   /* shimmer only while data is genuinely loading */
@keyframes hz-shimmer { to { background-position: -200% 0; } }
.hz-state { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 36px 20px; color: var(--hz-muted); }
.hz-state svg { width: 40px; height: 40px; color: var(--hz-accent); }
.hz-state strong { color: var(--hz-ink); font-size: 16px; }
.hz-state.error svg { color: var(--hz-bad); }

/* ---- HorizonAI activity: idle / thinking / working / done / failed (state is set only from backend events) ---- */
.hz-ai { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--hz-well);
  box-shadow: inset 0 0 0 1px var(--hz-line); font-size: 13px; font-weight: 600; color: var(--hz-ink-2); }
.hz-wave { display: inline-flex; align-items: center; gap: 3px; height: 18px; }
.hz-wave i { width: 3px; height: 4px; border-radius: 2px; background: var(--hz-accent); transition: height var(--hz-dur-control) var(--hz-ease-out), background-color var(--hz-dur-control); }
.hz-ai[data-state="thinking"] .hz-wave i, .hz-ai[data-state="working"] .hz-wave i { animation: hz-wave 1.1s var(--hz-ease-move) infinite; }
.hz-ai[data-state="thinking"] .hz-wave i { animation-duration: 1.6s; opacity: .8; }
.hz-wave i:nth-child(2) { animation-delay: -.9s !important; } .hz-wave i:nth-child(3) { animation-delay: -.6s !important; }
.hz-wave i:nth-child(4) { animation-delay: -.3s !important; } .hz-wave i:nth-child(5) { animation-delay: -.75s !important; }
@keyframes hz-wave { 0%, 100% { height: 4px; } 50% { height: 16px; } }
.hz-ai[data-state="done"] .hz-wave i { height: 4px; background: var(--hz-ok); }
.hz-ai[data-state="failed"] .hz-wave i { height: 4px; background: var(--hz-bad); }
.hz-progress { height: 4px; border-radius: 4px; background: var(--hz-well); overflow: hidden; }
.hz-progress > i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--hz-accent), var(--hz-accent-hi));
  transition: width var(--hz-dur-panel) var(--hz-ease-out); }

/* ---- view entrance used by motion.js when CSS-only is enough ---- */
.hz-enter { animation: hz-enter var(--hz-dur-panel) var(--hz-ease-out) both; }
@keyframes hz-enter { from { opacity: 0; transform: translateY(6px); } }

/* reduced motion: keep the state changes, drop the travel */
@media (prefers-reduced-motion: reduce) {
  .hz-root *, .hz-root *::before, .hz-root *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}
:root[data-hz-motion="reduce"] *, :root[data-hz-motion="reduce"] *::before, :root[data-hz-motion="reduce"] *::after {
  animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }