/* ─────────────────────────────────────────────────────────────────────────────
   618 UI COMPONENT LAYER
   Feature: 078-ui-redesign-pages — the shared class vocabulary every redesigned
   page is built from. six18.css owns the TOKENS; this file owns the SHAPES.
   Loaded after six18.css so it can consume every --hz-* token.

   Rules of the house (unchanged from spec 037):
     · hairline borders, never shadows (overlays excepted)
     · radii 2–4px — nothing bubbly
     · gold is an accent, never a status color; warning is orange
     · every number is mono + tabular

   Before inventing page-local CSS, use a class from here. Page-scoped .razor.css
   should only hold genuinely page-specific layout.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    /* Spacing scale — spec 037 shipped tokens without one, so every component
       hard-coded rem values and drifted. These are the only gaps to use. */
    --hz-space-1: 0.25rem;
    --hz-space-2: 0.5rem;
    --hz-space-3: 0.75rem;
    --hz-space-4: 1rem;
    --hz-space-5: 1.5rem;
    --hz-space-6: 2rem;

    /* Table/label micro-type — the "terminal" signature, used in many places. */
    --hz-label-size: 0.71rem;
    --hz-label-tracking: 0.1em;
}

/* ════════════════════════════════════════════════════════════════════════════
   PAGE SCAFFOLD
   ════════════════════════════════════════════════════════════════════════════ */

.hz-page {
    display: flex;
    flex-direction: column;
    gap: var(--hz-space-4);
    padding-top: var(--hz-space-4);
}

/* In-page header. The topbar carries the title on every route, so most pages use this
   with only __sub and/or __actions — __title exists for the rare surface rendered outside
   the shell (auth pages) or a panel that genuinely needs a second-level heading.
   Do NOT re-add a page-level __title to a routed page: it duplicates the top bar. */
.hz-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hz-space-4);
    flex-wrap: wrap;
}

.hz-page-head__text { min-width: 0; }

.hz-page-head__title {
    font-family: var(--hz-font-display);
    font-weight: 600;
    font-size: 1.29rem;
    letter-spacing: 0.01em;
    color: var(--hz-text);
    margin: 0;
}

.hz-page-head__sub {
    margin: 0.3rem 0 0 0;
    color: var(--hz-text-muted);
    font-size: 0.93rem;
    line-height: 1.45;
}

.hz-page-head__actions {
    display: flex;
    align-items: center;
    gap: var(--hz-space-2);
    flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   PANELS (cards)
   ════════════════════════════════════════════════════════════════════════════ */

.hz-panel {
    background: var(--hz-card);
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius-card);
    position: relative;
}

/* Hero panels carry the gold gradient keyline — the recurring brand gesture.
   One per view at most; it marks the primary surface, not every card. */
.hz-panel--hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--hz-brand-gradient);
    border-radius: var(--hz-radius-card) var(--hz-radius-card) 0 0;
}

.hz-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hz-space-3);
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--hz-border);
    flex-wrap: wrap;
}

.hz-panel__title {
    font-family: var(--hz-font-display);
    font-weight: 600;
    font-size: 0.93rem;
    color: var(--hz-text);
    margin: 0;
}

.hz-panel__actions {
    display: flex;
    align-items: center;
    gap: var(--hz-space-2);
    flex-wrap: wrap;
}

.hz-panel__body { padding: 1rem; }
.hz-panel__body--flush { padding: 0; }

.hz-panel__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--hz-space-2);
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--hz-border);
}

/* ════════════════════════════════════════════════════════════════════════════
   STAT CARDS
   ════════════════════════════════════════════════════════════════════════════ */

.hz-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--hz-space-3);
}

.hz-stats--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.hz-stats--6 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.hz-stat {
    background: var(--hz-card);
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius-card);
    padding: 0.8rem 0.9rem;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.hz-stat--hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--hz-brand-gradient);
}

.hz-stat__label {
    font-size: var(--hz-label-size);
    font-weight: 600;
    letter-spacing: var(--hz-label-tracking);
    text-transform: uppercase;
    color: var(--hz-text-faint);
}

.hz-stat__value {
    font-family: var(--hz-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    font-size: 1.57rem;
    color: var(--hz-text);
    margin-top: 0.35rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.hz-stat__value--sm { font-size: 1.14rem; padding-top: 0.2rem; }

.hz-stat__delta {
    font-family: var(--hz-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.79rem;
    color: var(--hz-text-muted);
    margin-top: 0.3rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   TABLES — the single table language (replaces ~18 hand-rolled dialects)
   ════════════════════════════════════════════════════════════════════════════ */

.hz-table-wrap {
    width: 100%;
    overflow-x: auto;
}

/* A long table gets its own scroll region instead of stretching the page. Use this for any
   grid whose row count is driven by data (trades, balance points, fills) rather than a
   fixed set — a full backtest run is thousands of rows, which otherwise makes a report
   page scroll for screens on end and buries everything below it.
   The header sticks (.hz-table already gives it the opaque raised background that needs),
   and print un-caps it so an exported artifact still contains every row. */
.hz-table-scroll {
    width: 100%;
    max-height: 32rem;
    overflow: auto;
    border-top: 1px solid var(--hz-border);
}

.hz-table-scroll--short { max-height: 20rem; }
.hz-table-scroll--tall { max-height: 46rem; }

.hz-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

@media print {
    .hz-table-scroll {
        max-height: none;
        overflow: visible;
        border-top: none;
    }

    .hz-table-scroll thead th { position: static; }
}

.hz-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.hz-table th {
    font-family: var(--hz-font);
    font-size: var(--hz-label-size);
    font-weight: 600;
    letter-spacing: var(--hz-label-tracking);
    text-transform: uppercase;
    color: var(--hz-text-muted);
    text-align: left;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--hz-border);
    background: var(--hz-raised);
    white-space: nowrap;
}

.hz-table td {
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--hz-border);
    font-family: var(--hz-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--hz-text-muted);
    vertical-align: middle;
}

/* Prose cells (messages, names, descriptions) opt out of mono. */
.hz-table td.hz-td-text {
    font-family: var(--hz-font);
    color: var(--hz-text-muted);
}

/* The identifying cell of a row — symbol, user, event name. */
.hz-table td.hz-td-key {
    color: var(--hz-text);
    font-weight: 500;
}

.hz-table td.hz-td-num,
.hz-table th.hz-th-num {
    text-align: right;
}

.hz-table tbody tr:last-child td { border-bottom: none; }
.hz-table tbody tr:hover td { background: var(--hz-brand-soft); }

.hz-table tbody tr.is-selected td { background: var(--hz-brand-soft); }

/* Row-level status tinting — use sparingly, for rows that need attention. */
.hz-table tbody tr.is-warn td { background: var(--hz-warning-soft); }
.hz-table tbody tr.is-danger td { background: var(--hz-danger-soft); }
.hz-table tbody tr.is-muted td { color: var(--hz-text-faint); }

/* Section rule inside a table (day grouping, profile grouping). */
.hz-table tbody tr.hz-table__group td {
    background: var(--hz-bg);
    color: var(--hz-text);
    font-family: var(--hz-font-display);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Numeric sentiment. Never used for brand meaning — only value direction. */
.hz-num-up { color: var(--hz-success); }
.hz-num-dn { color: var(--hz-danger); }
.hz-num-flat { color: var(--hz-text-muted); }

/* ════════════════════════════════════════════════════════════════════════════
   BADGES & CHIPS
   ════════════════════════════════════════════════════════════════════════════ */

.hz-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem 0.45rem;
    border-radius: var(--hz-radius-badge);
    font-family: var(--hz-font-mono);
    font-weight: 600;
    font-size: 0.71rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.hz-badge--ok      { background: var(--hz-success-soft); color: var(--hz-success); border-color: color-mix(in srgb, var(--hz-success) 32%, transparent); }
.hz-badge--warn    { background: var(--hz-warning-soft); color: var(--hz-warning); border-color: color-mix(in srgb, var(--hz-warning) 32%, transparent); }
.hz-badge--bad     { background: var(--hz-danger-soft);  color: var(--hz-danger);  border-color: color-mix(in srgb, var(--hz-danger) 32%, transparent); }
.hz-badge--info    { background: var(--hz-info-soft);    color: var(--hz-info);    border-color: color-mix(in srgb, var(--hz-info) 32%, transparent); }
.hz-badge--brand   { background: var(--hz-brand-soft);   color: var(--hz-brand-strong); border-color: color-mix(in srgb, var(--hz-brand) 38%, transparent); }
.hz-badge--neutral { background: var(--hz-raised);       color: var(--hz-text-muted);   border-color: var(--hz-border-strong); }

/* Spec 104: keyword chips in the event-blocking panel lay out inline instead of overlapping. */
.backtest-event-blocking .backtest-stage-timings__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Spec 104: time buckets standing below the report's win%-threshold filter. */
.backtest-time-breakdown-table__row--flagged    { background: color-mix(in srgb, var(--hz-danger) 6%, transparent); }
.backtest-time-breakdown-table__row--low-sample { background: color-mix(in srgb, var(--hz-warning) 6%, transparent); }

/* Status chips — larger, for the topbar and header strips. */
.hz-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.55rem;
    border-radius: var(--hz-radius-badge);
    font-family: var(--hz-font-mono);
    font-weight: 600;
    font-size: 0.79rem;
    white-space: nowrap;
    border: 1px solid var(--hz-border-strong);
    background: var(--hz-card);
    color: var(--hz-text-muted);
    text-decoration: none;
}

.hz-chip--ok    { color: var(--hz-success); border-color: color-mix(in srgb, var(--hz-success) 35%, transparent); background: var(--hz-success-soft); }
.hz-chip--warn  { color: var(--hz-warning); border-color: color-mix(in srgb, var(--hz-warning) 35%, transparent); background: var(--hz-warning-soft); }
.hz-chip--bad   { color: var(--hz-danger);  border-color: color-mix(in srgb, var(--hz-danger) 35%, transparent);  background: var(--hz-danger-soft); }
.hz-chip--brand { color: var(--hz-brand-strong); border-color: color-mix(in srgb, var(--hz-brand) 40%, transparent); background: var(--hz-brand-soft); }

a.hz-chip:hover { border-color: var(--hz-brand); color: var(--hz-brand-strong); }

.hz-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.hz-dot--pulse { animation: hz-pulse 2s infinite; }

@keyframes hz-pulse { 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
    .hz-dot--pulse { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   BUTTONS — for non-Radzen surfaces. Radzen buttons are themed in six18.css.
   ════════════════════════════════════════════════════════════════════════════ */

.hz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.42rem 0.8rem;
    border-radius: var(--hz-radius-control);
    border: 1px solid var(--hz-border-strong);
    background: var(--hz-card);
    color: var(--hz-text);
    font-family: var(--hz-font);
    font-weight: 600;
    font-size: 0.89rem;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.hz-btn:hover:not(:disabled) {
    border-color: var(--hz-brand);
    color: var(--hz-brand-strong);
    background: var(--hz-brand-soft);
}

.hz-btn:disabled,
.hz-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.hz-btn--primary {
    background: var(--hz-brand);
    border-color: var(--hz-brand);
    color: var(--hz-on-brand);
}

.hz-btn--primary:hover:not(:disabled) {
    background: var(--hz-brand-hover);
    border-color: var(--hz-brand-hover);
    color: var(--hz-on-brand);
}

.hz-btn--danger {
    background: var(--hz-danger);
    border-color: var(--hz-danger);
    color: #fff;
}

.hz-btn--danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--hz-danger) 85%, #000);
    border-color: color-mix(in srgb, var(--hz-danger) 85%, #000);
    color: #fff;
}

.hz-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--hz-text-muted);
}

.hz-btn--ghost:hover:not(:disabled) {
    background: var(--hz-brand-soft);
    border-color: transparent;
}

.hz-btn--sm { padding: 0.25rem 0.5rem; font-size: 0.7rem; }
.hz-btn--icon { padding: 0.35rem 0.45rem; }

/* Toolbar toggle — a button that reflects on/off state (chart overlays, panel pins).
   Pair with aria-pressed so the state is exposed, not just painted. */
.hz-btn--toggle.is-active,
.hz-btn--toggle[aria-pressed="true"] {
    background: var(--hz-brand-soft);
    border-color: var(--hz-brand);
    color: var(--hz-brand-strong);
}

/* Destructive row action — quiet until hovered. */
.hz-btn--rowdanger {
    background: transparent;
    border-color: transparent;
    color: var(--hz-text-faint);
    padding: 0.2rem 0.4rem;
}

.hz-btn--rowdanger:hover:not(:disabled) {
    background: var(--hz-danger-soft);
    border-color: transparent;
    color: var(--hz-danger);
}

/* ════════════════════════════════════════════════════════════════════════════
   FORMS & TOOLBARS
   ════════════════════════════════════════════════════════════════════════════ */

.hz-toolbar {
    display: flex;
    align-items: flex-end;
    gap: var(--hz-space-3);
    flex-wrap: wrap;
    padding: 0.7rem 1rem;
    background: var(--hz-card);
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius-card);
}

.hz-toolbar__spacer { flex: 1 1 auto; }

.hz-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.hz-field__label {
    font-size: var(--hz-label-size);
    font-weight: 600;
    letter-spacing: var(--hz-label-tracking);
    text-transform: uppercase;
    color: var(--hz-text-faint);
}

.hz-field__hint {
    font-family: var(--hz-font-mono);
    font-size: 0.75rem;
    color: var(--hz-text-faint);
}

/* Native controls, themed to match the Radzen ones. */
.hz-input,
.hz-select,
.hz-textarea {
    background: var(--hz-card);
    border: 1px solid var(--hz-border-strong);
    border-radius: var(--hz-radius-control);
    color: var(--hz-text);
    font-family: var(--hz-font);
    font-size: 0.89rem;
    padding: 0.38rem 0.55rem;
    min-width: 0;
}

.hz-input:focus,
.hz-select:focus,
.hz-textarea:focus {
    outline: none;
    border-color: var(--hz-brand);
    box-shadow: 0 0 0 1px var(--hz-brand);
}

.hz-input--mono,
.hz-input.hz-mono {
    font-family: var(--hz-font-mono);
    font-variant-numeric: tabular-nums;
}

/* .hz-input/.hz-select set font-family, and this file loads after six18.css, so a bare
   `class="hz-select hz-mono"` would silently lose the mono face. Restate it here. */
.hz-input.hz-mono,
.hz-select.hz-mono,
.hz-textarea.hz-mono {
    font-family: var(--hz-font-mono);
    font-variant-numeric: tabular-nums;
}

.hz-select {
    appearance: none;
    padding-right: 1.6rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--hz-text-muted) 50%),
                      linear-gradient(135deg, var(--hz-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 0.85rem) 55%, calc(100% - 0.55rem) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* Key/value facts grid — matrix rows, zone facts, contract details. */
.hz-kv {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--hz-space-3) var(--hz-space-4);
}

.hz-kv__k {
    font-size: var(--hz-label-size);
    font-weight: 600;
    letter-spacing: var(--hz-label-tracking);
    text-transform: uppercase;
    color: var(--hz-text-faint);
}

.hz-kv__v {
    font-family: var(--hz-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.93rem;
    color: var(--hz-text);
    margin-top: 0.15rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   CALLOUTS — explanation, warning, guardrail copy
   ════════════════════════════════════════════════════════════════════════════ */

.hz-callout {
    display: flex;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--hz-border-strong);
    border-left-width: 3px;
    border-radius: var(--hz-radius-control);
    background: var(--hz-card);
    color: var(--hz-text-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.hz-callout__title {
    display: block;
    font-family: var(--hz-font-display);
    font-weight: 600;
    font-size: 0.89rem;
    color: var(--hz-text);
    margin-bottom: 0.15rem;
}

.hz-callout--info    { border-left-color: var(--hz-info);    background: var(--hz-info-soft); }
.hz-callout--warn    { border-left-color: var(--hz-warning); background: var(--hz-warning-soft); }
.hz-callout--danger  { border-left-color: var(--hz-danger);  background: var(--hz-danger-soft); }
.hz-callout--success { border-left-color: var(--hz-success); background: var(--hz-success-soft); }

.hz-callout__icon {
    flex: none;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════════════════
   TABS & SEGMENTED CONTROLS (non-Radzen)
   ════════════════════════════════════════════════════════════════════════════ */

.hz-tabs {
    display: flex;
    gap: var(--hz-space-4);
    border-bottom: 1px solid var(--hz-border);
    padding: 0 0.25rem;
    overflow-x: auto;
}

.hz-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--hz-text-muted);
    font-family: var(--hz-font);
    font-weight: 600;
    font-size: 0.89rem;
    padding: 0.5rem 0.15rem 0.55rem;
    cursor: pointer;
    white-space: nowrap;
}

.hz-tab:hover { color: var(--hz-text); }

.hz-tab.is-active {
    color: var(--hz-brand-strong);
    border-bottom-color: var(--hz-brand);
}

.hz-segmented {
    display: inline-flex;
    border: 1px solid var(--hz-border-strong);
    border-radius: var(--hz-radius-control);
    overflow: hidden;
}

.hz-segmented__item {
    appearance: none;
    background: var(--hz-card);
    border: none;
    border-right: 1px solid var(--hz-border-strong);
    color: var(--hz-text-muted);
    font-family: var(--hz-font);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    white-space: nowrap;
}

.hz-segmented__item:last-child { border-right: none; }
.hz-segmented__item:hover { color: var(--hz-text); background: var(--hz-raised); }

.hz-segmented__item.is-active {
    background: var(--hz-brand-soft);
    color: var(--hz-brand-strong);
}

/* ════════════════════════════════════════════════════════════════════════════
   STEPPER (guided flows — matrix update, pairing)
   ════════════════════════════════════════════════════════════════════════════ */

.hz-stepper {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius-card);
    background: var(--hz-card);
    overflow: hidden;
    flex-wrap: wrap;
}

.hz-step {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 1rem;
    border-right: 1px solid var(--hz-border);
    color: var(--hz-text-faint);
    font-size: 0.86rem;
    flex: 1 1 auto;
    min-width: 0;
}

.hz-step:last-child { border-right: none; }

.hz-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--hz-radius-badge);
    border: 1px solid var(--hz-border-strong);
    font-family: var(--hz-font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    flex: none;
}

.hz-step__label { font-weight: 600; }

.hz-step.is-active {
    color: var(--hz-text);
    background: var(--hz-brand-soft);
}

.hz-step.is-active .hz-step__num {
    background: var(--hz-brand);
    border-color: var(--hz-brand);
    color: var(--hz-on-brand);
}

.hz-step.is-done { color: var(--hz-text-muted); }

.hz-step.is-done .hz-step__num {
    background: var(--hz-success-soft);
    border-color: color-mix(in srgb, var(--hz-success) 35%, transparent);
    color: var(--hz-success);
}

/* ════════════════════════════════════════════════════════════════════════════
   MISC
   ════════════════════════════════════════════════════════════════════════════ */

/* Mono caption — timestamps, fingerprints, ids under a heading. */
.hz-meta {
    font-family: var(--hz-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.79rem;
    color: var(--hz-text-faint);
}

/* Sticky save bar for editors (order stats, priorities, allowed pairs). */
.hz-savebar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: var(--hz-space-3);
    padding: 0.65rem 1rem;
    background: var(--hz-raised);
    border: 1px solid var(--hz-border-strong);
    border-radius: var(--hz-radius-card);
    box-shadow: var(--hz-shadow-overlay);
}

.hz-savebar__spacer { flex: 1; }

/* Two-column content split that collapses on narrow viewports. */
.hz-split {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--hz-space-4);
    align-items: start;
}

.hz-split--even { grid-template-columns: 1fr 1fr; }

@media (max-width: 1100px) {
    .hz-split,
    .hz-split--even { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   CUSTOMISABLE LAYOUT GRID
   Panels are placed by grid-column/grid-row and never reordered in the DOM, so a
   panel hosting a canvas keeps its context across a rearrange.
   ════════════════════════════════════════════════════════════════════════════ */

.hz-layout-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--hz-space-3);
    align-items: stretch;
}

/* Below the breakpoint a hand-made arrangement stops being useful — a 3-column panel on a
   phone is unreadable. Custom placement is dropped and panels stack in DOM order, which is
   why DOM order is kept meaningful. The saved layout is untouched and returns on a wide screen. */
@media (max-width: 1279px) {
    .hz-layout-grid {
        display: flex;
        flex-direction: column;
        grid-template-rows: none !important;
    }

    .hz-layout-panel {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

.hz-layout-panel {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.hz-layout-panel__body {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: auto;

    /* A panel's width is now set by the user's layout, not the viewport, so content inside
       must respond to the PANEL's width. Any `@media (max-width: …)` rule inside a panel is
       measuring the wrong thing — it won't fire for a 340px panel on a 1700px screen.
       Use `@container hz-panel (max-width: …)` instead. */
    container-type: inline-size;
    container-name: hz-panel;
}

/* ── Edit mode ───────────────────────────────────────────────────────────────── */

.hz-layout-grid.is-editing .hz-layout-panel {
    outline: 1px dashed var(--hz-border-strong);
    outline-offset: 2px;
}

.hz-layout-grid.is-editing .hz-layout-panel__body {
    /* Stop clicks reaching the panel's own controls while arranging. */
    pointer-events: none;
    opacity: 0.75;
}

.hz-layout-panel__grip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--hz-brand);
    border-radius: var(--hz-radius-control) var(--hz-radius-control) 0 0;
    background: var(--hz-brand-soft);
    color: var(--hz-brand-strong);
    font-family: var(--hz-font);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: grab;
    touch-action: none;
}

.hz-layout-panel__grip:active { cursor: grabbing; }

.hz-layout-panel__grip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* One handle per corner. They sit above the grip bar (which spans the full width) so the
   top corners stay grabbable for resizing rather than being swallowed by the move handle. */
.hz-layout-panel__resize {
    position: absolute;
    width: 0.9rem;
    height: 0.9rem;
    z-index: 2;
    touch-action: none;
    opacity: 0.75;

    /* NOTE: the triangle is painted with a gradient, deliberately NOT clip-path — clip-path
       also clips hit-testing, which made the centre of the handle (exactly on the diagonal)
       an unreliable grab target. The full square stays clickable. */
}

.hz-layout-panel__resize:hover { opacity: 1; }

.hz-layout-panel__resize--nw {
    top: 0;
    left: 0;
    cursor: nwse-resize;
    background: linear-gradient(135deg, var(--hz-brand) 50%, transparent 50%);
    border-top-left-radius: var(--hz-radius-card);
}

.hz-layout-panel__resize--ne {
    top: 0;
    right: 0;
    cursor: nesw-resize;
    background: linear-gradient(45deg, transparent 50%, var(--hz-brand) 50%);
    border-top-right-radius: var(--hz-radius-card);
}

.hz-layout-panel__resize--sw {
    bottom: 0;
    left: 0;
    cursor: nesw-resize;
    background: linear-gradient(45deg, var(--hz-brand) 50%, transparent 50%);
    border-bottom-left-radius: var(--hz-radius-card);
}

.hz-layout-panel__resize--se {
    bottom: 0;
    right: 0;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, var(--hz-brand) 50%);
    border-bottom-right-radius: var(--hz-radius-card);
}

.hz-layout-panel.is-dragging,
.hz-layout-panel.is-resizing {
    z-index: 5;
    outline-color: var(--hz-brand);
}

.hz-layout-panel.is-dragging .hz-layout-panel__body,
.hz-layout-panel.is-resizing .hz-layout-panel__body {
    opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
    .hz-layout-panel { transition: none; }
}

/* Compact inline list used inside panels (windows, history, facts). */
.hz-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hz-list__item {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--hz-border);
    font-size: 0.86rem;
    color: var(--hz-text-muted);
}

.hz-list__item:last-child { border-bottom: none; }