/*
 * hm-core — HaTchi-MaXchi tranche 2A components (spec:
 * hatchi-maxchi-standalone). Accumulates new standalone-system
 * components until the extraction restructures per-component.
 *
 * Components: dz-progress, dz-avatar, dz-breadcrumb, dz-toggle-group,
 * dz-popover, dz-kbd.
 */

/* ── dz-progress ─────────────────────────────────────────────────────
 * <div class="dz-progress" role="progressbar" aria-valuenow="60"
 *      aria-valuemin="0" aria-valuemax="100">
 *   <div class="dz-progress__bar" style="width:60%"></div>
 * </div>
 */

.dz-progress {
  width: 100%;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--colour-brand) 12%, var(--colour-bg));
  overflow: hidden;
}

.dz-progress__bar {
  /* Dynamic value via a custom property, not an inline width: the markup
     sets `--dz-progress-value: 62%` and CSS owns the property mapping. */
  width: var(--dz-progress-value, 0%);
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--colour-brand);
  transition: width var(--duration-slow) var(--ease-out);
}

.dz-progress[data-dz-tone="success"] .dz-progress__bar { background: var(--colour-success); }
.dz-progress[data-dz-tone="warning"] .dz-progress__bar { background: var(--colour-warning); }
.dz-progress[data-dz-tone="destructive"] .dz-progress__bar { background: var(--colour-danger); }

@media (prefers-reduced-motion: reduce) {
  .dz-progress__bar { transition: none; }
}

/* ── dz-avatar ───────────────────────────────────────────────────────
 * <span class="dz-avatar" data-dz-size="md">AB</span>
 * <span class="dz-avatar"><img src="…" alt=""></span>
 * Initials inherit a deterministic tone via data-dz-hue (0-359) set by
 * the emitter (hash of the name), falling back to brand.
 */

.dz-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  /* The semantic wash, not a hand-rolled mix — the 15% mix put initials
     at 4.29:1 (axe); the wash token is calibrated for 4.5:1 tone text. */
  background: var(--colour-brand-soft);
  color: var(--colour-brand-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
}

.dz-avatar[data-dz-size="sm"] { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
.dz-avatar[data-dz-size="lg"] { width: 2.75rem; height: 2.75rem; font-size: var(--text-sm); }

.dz-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dz-avatar-group {
  display: inline-flex;
}

.dz-avatar-group .dz-avatar {
  border: 2px solid var(--colour-surface);
}

.dz-avatar-group .dz-avatar + .dz-avatar {
  margin-inline-start: -0.5rem;
}

/* Deterministic initials wash when emitter sets --dz-avatar-hue (0–359)
   via inline style (and data-dz-hue for tests/DOM inspection). */
.dz-avatar[data-dz-hue] {
  background: hsl(var(--dz-avatar-hue, 210) 45% 42% / 0.18);
  color: hsl(var(--dz-avatar-hue, 210) 40% 28%);
}

/* ── dz-user-chip ────────────────────────────────────────────────────
 * Person-ref cell: avatar + name. Emitted by ``render_user_chip_html``.
 * <span class="dz-user-chip"><span class="dz-avatar" data-dz-size="sm">…</span>
 *   <span class="dz-user-chip__name">Ada Lovelace</span></span>
 */
.dz-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
  line-height: 1.2;
}

.dz-user-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--colour-text);
}

/* Workspace region person-ref links wrap the chip (keep chip layout, no underline). */
a.dz-user-chip-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  max-width: 100%;
}
a.dz-user-chip-link:hover .dz-user-chip__name {
  text-decoration: underline;
  color: var(--colour-primary, var(--colour-text));
}

/* ── dz-breadcrumb ───────────────────────────────────────────────────
 * <nav class="dz-breadcrumb" aria-label="Breadcrumb"><ol>
 *   <li><a href="/app">Home</a></li>
 *   <li><a href="/app/invoices">Invoices</a></li>
 *   <li aria-current="page">INV-0042</li>
 * </ol></nav>
 * Separator is CSS-generated (chevron) — markup stays list-clean.
 */

.dz-breadcrumb ol {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
}

.dz-breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--colour-text-muted);
}

.dz-breadcrumb li + li::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  background: currentColor;
  opacity: 0.5;
  mask: center / contain no-repeat
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>');
}

.dz-breadcrumb a {
  color: var(--colour-text-muted);
  text-decoration: none;
}

.dz-breadcrumb a:hover {
  color: var(--colour-text);
}

.dz-breadcrumb [aria-current="page"] {
  color: var(--colour-text);
  font-weight: var(--weight-medium);
}

/* ── dz-toggle-group ─────────────────────────────────────────────────
 * The hypermedia answer: native radios, styled as a segmented control.
 * <fieldset class="dz-toggle-group" role="radiogroup">
 *   <label><input type="radio" name="view" checked><span>List</span></label>
 *   <label><input type="radio" name="view"><span>Board</span></label>
 * </fieldset>
 */

.dz-toggle-group {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--colour-text) 4%, var(--colour-bg));
  margin: 0;
}

.dz-toggle-group label {
  position: relative;
  cursor: pointer;
}

.dz-toggle-group input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.dz-toggle-group span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.25rem var(--space-md);
  border-radius: calc(var(--radius-md) - 2px);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--colour-text-muted);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.dz-toggle-group input:checked + span {
  background: var(--colour-surface);
  color: var(--colour-text);
  box-shadow: var(--shadow-sm);
}

.dz-toggle-group input:focus-visible + span {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* HYPERPART: popover */
/* ── dz-popover — details-based generic panel ────────────────────────
 * <details class="dz-popover"><summary>…trigger…</summary>
 *   <div class="dz-popover__panel">…free content…</div></details>
 * data-dz-align="start|end" on the root positions the panel.
 * Light-dismiss: controllers/dz-details-light-dismiss.js (overlay-light-dismiss).
 */

.dz-popover {
  position: relative;
  display: inline-block;
}

.dz-popover > summary {
  list-style: none;
  cursor: pointer;
}

.dz-popover > summary::-webkit-details-marker { display: none; }

.dz-popover__panel {
  position: absolute;
  inset-block-start: calc(100% + 0.375rem);
  inset-inline-start: 0;
  min-width: 14rem;
  padding: var(--space-lg);
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 40;
}

.dz-popover[data-dz-align="end"] .dz-popover__panel {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/* ── dz-kbd ──────────────────────────────────────────────────────────
 * <kbd class="dz-kbd">⌘K</kbd> — shortcut chips (command palette etc.)
 *
 * Stem shortcut-hint-chrome:
 *   - Visually secondary: mono, small, muted keycap (this block).
 *   - Spatially secondary: never glue to a primary label — two layout roles:
 *       adjacent → parent flex gap (see .dz-button:has(.dz-kbd))
 *       trailing → margin-inline-start: auto (see .dz-command__item .dz-kbd)
 */

.dz-kbd {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--colour-border);
  border-block-end-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--colour-surface);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--colour-text-muted);
}

/* Adjacent role: label + keycap on a compact control (opener buttons, etc.) */
.dz-button:has(> .dz-kbd),
button:has(> .dz-kbd) {
  gap: var(--space-sm);
}

/* ── dz-command — the hx-get command palette (htmx4 flagship) ─────────
 * <dialog class="dz-command">
 *   <input class="dz-command__input" placeholder="Search…" name="q"
 *          hx-get="/app/command" hx-trigger="input changed delay:150ms"
 *          hx-target="next .dz-command__results">
 *   <div class="dz-command__results">…server-rendered items…</div>
 * </dialog>
 * Server renders .dz-command__item entries (icon + label + dz-kbd hint).
 * dz-command.js: ⌘K/Ctrl-K opens, Esc closes, arrows move [aria-selected].
 */

/* HYPERPART: command */
dialog.dz-command {
  width: min(34rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  background: var(--colour-surface);
  box-shadow: var(--shadow-lg);
  /* top-anchored, horizontally centered (native dialog centers by
     default; override only the block axis) */
  margin-block: 12vh auto;
  margin-inline: auto;
}

dialog.dz-command::backdrop {
  background: oklch(13% 0.028 261.69 / 0.4);
  backdrop-filter: blur(2px);
}

/* input + close share a flex row (the bar); results follow. Flex, not
   absolute positioning — abspos against a modal <dialog> is fragile on
   Safari/iPadOS (the button landed at its static position there, so taps
   on the expected top-right corner missed it). */
.dz-command__bar {
  display: flex;
  align-items: center;
  border-block-end: 1px solid var(--colour-border);
}

.dz-command__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-lg);
  border: none;
  background: transparent;
  color: var(--colour-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  outline: none;
  box-sizing: border-box;
}

/* Always-visible dismiss affordance — essential on touch (no Esc key).
   A native <button> so its tap fires reliably, incl. on iOS Safari. */
.dz-command__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-inline-end: var(--space-sm);
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--colour-text-muted);
  cursor: pointer;
}
.dz-command__close:hover {
  background: var(--colour-surface-muted);
  color: var(--colour-text);
}
.dz-command__close:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
.dz-command__close svg {
  width: 1rem;
  height: 1rem;
}

.dz-command__results {
  max-height: 20rem;
  overflow-y: auto;
  padding: var(--space-xs);
}

.dz-command__group {
  padding: var(--space-sm) var(--space-md) var(--space-xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--colour-text-muted);
}

.dz-command__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--colour-text);
  font-size: var(--text-sm);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.dz-command__item:hover,
.dz-command__item[aria-selected="true"] {
  background: color-mix(in oklab, var(--colour-brand) 8%, var(--colour-surface));
}

/* Trailing role: label leads; shortcut at the end of the row (cmdk/Linear) */
.dz-command__item .dz-kbd {
  margin-inline-start: auto;
}

.dz-command__empty {
  padding: var(--space-xl);
  text-align: center;
  color: var(--colour-text-muted);
  font-size: var(--text-sm);
}

/* ── dz-hover-card ────────────────────────────────────────────────────
 * Full styles live in components/hover-card.css (HMC-035).
 * Anatomy: .dz-hover-card > .dz-hover-card__trigger + .dz-hover-card__content
 * (__panel is a legacy alias of __content). Do not re-define here.
 */

/* ── dz-scroll-area ──────────────────────────────────────────────────
 * Thin, token-coloured scrollbars for constrained panels.
 */

.dz-scroll-area {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--colour-text) 25%, transparent) transparent;
}

.dz-scroll-area::-webkit-scrollbar { width: 8px; height: 8px; }
.dz-scroll-area::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--colour-text) 25%, transparent);
  border-radius: var(--radius-full);
}
.dz-scroll-area::-webkit-scrollbar-track { background: transparent; }

/* HYPERPART: toolbar — inline composite (button + toggle-group + menu). */
.dz-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-sm);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-surface);
}

/* HYPERPART: master-detail — exchange composite (list → hx-get detail card). */
.dz-master-detail {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 0;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 12rem;
  background: var(--colour-surface);
}
/* Workspace dual_pane pair: wider list column for tabular rows. */
.dz-master-detail-pair .dz-master-detail {
  grid-template-columns: minmax(18rem, 2fr) minmax(20rem, 3fr);
  min-height: 22rem;
  /* Outer card-wrapper already participates in the dashboard grid. */
  border-radius: var(--radius-lg);
}
.dz-master-detail__list {
  list-style: none;
  margin: 0;
  padding: var(--space-xs);
  border-inline-end: 1px solid var(--colour-border);
  background: var(--colour-surface);
  min-width: 0;
  overflow: auto;
  max-height: min(70vh, 40rem);
}
.dz-master-detail-pair .dz-master-detail__list {
  padding: 0;
}
/* Nested dashboard card chrome: flatten so the pair reads as one unit. */
.dz-master-detail-pair .dz-master-detail__list .dz-card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.dz-master-detail-pair .dz-master-detail__list .dz-card-header {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--colour-border);
}
.dz-master-detail-pair .dz-master-detail__list .dz-card-body {
  padding: 0;
}
/* Gallery / link items (anchor or button). */
a.dz-master-detail__item,
button.dz-master-detail__item {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  color: var(--colour-text);
  text-decoration: none;
  font-size: var(--text-sm);
  border: none;
  background: transparent;
  width: 100%;
  text-align: start;
  cursor: pointer;
}
a.dz-master-detail__item:hover,
button.dz-master-detail__item:hover {
  background: var(--colour-bg);
}
a.dz-master-detail__item[aria-current="true"],
button.dz-master-detail__item[aria-current="true"] {
  background: var(--colour-brand-soft);
  color: var(--colour-brand-text);
  font-weight: var(--weight-medium);
}
/* Workspace list table rows (tr) — keep table-row display. */
tr.dz-master-detail__item {
  cursor: pointer;
}
tr.dz-master-detail__item:hover > td {
  background: var(--colour-bg);
}
tr.dz-master-detail__item[aria-current="true"] > td {
  background: var(--colour-brand-soft);
  color: var(--colour-brand-text);
  font-weight: var(--weight-medium);
}
.dz-master-detail__detail {
  padding: var(--space-md);
  min-width: 0;
  overflow: auto;
  max-height: min(70vh, 40rem);
}
.dz-master-detail-pair .dz-master-detail__detail {
  padding: var(--space-md) var(--space-lg);
}
.dz-master-detail__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 10rem;
  color: var(--colour-text-muted, var(--colour-text));
  opacity: 0.85;
}
.dz-master-detail__empty .dz-empty-state-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}
.dz-master-detail__empty .dz-empty-state-description {
  margin: 0;
  font-size: var(--text-sm);
}