/* ── Buttons (shared base) ──────────────────────── */
.btn-primary,
.btn-secondary,
.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 9px 15px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.005em;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--color-accent);
    color: #fff;
    border: 1.5px solid var(--color-accent);
    box-shadow: 0 1px 2px rgba(234,85,50,.25), 0 4px 12px rgba(234,85,50,.18);
}
.btn-primary:hover {
    background-color: var(--color-accent-deep);
    border-color: var(--color-accent-deep);
    box-shadow: 0 1px 2px rgba(210,66,31,.3), 0 6px 16px rgba(210,66,31,.22);
}

.btn-secondary {
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
    background-color: var(--color-surface-2);
    border-color: var(--color-border);
}

.btn-danger {
    background-color: transparent;
    color: var(--color-accent);
    border: 1.5px solid var(--color-accent);
}
.btn-danger:hover {
    background-color: var(--color-accent);
    color: #fff;
}

/* ── Ghost Button (Quick Actions) ───────────────── */
.btn-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    background: transparent;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 150ms ease;
}
.btn-ghost:hover {
    background: var(--color-surface-2);
    color: var(--color-text);
}
.btn-ghost:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.btn-ghost:disabled:hover {
    background: transparent;
    color: var(--color-text-2);
}

/* ── Panel ──────────────────────────────────────── */
.panel {
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.panel.mb-0 { margin-bottom: 0 !important; }
.panel.mb-6 { margin-bottom: 1.5rem !important; }

/* ── Callout / tinted note boxes ──────────────────
   Status surfaces (approved, errors, sanitization, TLP hints). Replaces
   hand-rolled inline rgba tints. Pair the modifier with a .text-* helper for
   the title/body colour. Padding stays a utility (p-3/p-4) since it varies. */
.callout            { border: 1px solid var(--color-border-section); }
.callout--ok        { background: var(--color-ok-soft); }
.callout--warn      { background: var(--color-amber-soft); }
.callout--info      { background: var(--color-info-soft); }
.callout--accent    { background: var(--color-accent-soft); border-color: var(--color-accent); }

/* ── Progress / completion meter ──────────────────
   Thin track + fill. The fill's width is the only inline style (it's data-driven);
   the fill colour is set per-instance via a bg utility (accent, panel-dark, …). */
.progress        { height: 0.375rem; background: var(--color-border-section); border-radius: 9999px; overflow: hidden; }
.progress__fill  { height: 100%; border-radius: 9999px; transition: width 0.3s ease; }

/* ── IR case detail title ─────────────────────────
   Deliberately more compact than the standard .text-h1 (it sits under a meta
   row). .ir-case-measure caps the title + description to a readable column. */
.ir-case-title   { max-width: 54rem; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; }
.ir-case-measure { max-width: 48rem; }

/* ── Section ─────────────────────────────────── */
.section {
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    /* Default card gap — Tailwind mb-* utilities override this via !important on
       the utility class; without that, components.css (loaded last) wins. */
    margin-bottom: 1.25rem;
}
/* Allow Tailwind spacing utilities to override the section default */
.section.mb-0  { margin-bottom: 0 !important; }
.section.mb-1  { margin-bottom: 0.25rem !important; }
.section.mb-2  { margin-bottom: 0.5rem !important; }
.section.mb-3  { margin-bottom: 0.75rem !important; }
.section.mb-4  { margin-bottom: 1rem !important; }
.section.mb-5  { margin-bottom: 1.25rem !important; }
.section.mb-6  { margin-bottom: 1.5rem !important; }
.section.mb-8  { margin-bottom: 2rem !important; }
.section.mb-10 { margin-bottom: 2.5rem !important; }

.section-header {
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
}

.section-header-label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text);
}

.section-header-meta {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.section-header-action {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}
.section-header-action:hover {
    color: var(--color-accent-deep);
    text-decoration: underline;
}

.section-body {
    padding: 20px 16px;
    background: var(--color-bg);
}

/* Stacked sections — no gap between items, single outer card boundary */
.section-stack .section {
    border-bottom: none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0 !important;
}
.section-stack .section:first-child { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.section-stack .section:last-child  { border-bottom: 1px solid var(--color-border); border-radius: 0 0 var(--radius-card) var(--radius-card); }

/* State variants */
.section-critical .section-header { background: var(--color-accent-soft); }
.section-warning  .section-header { background: var(--color-amber-soft); }
.section-success  .section-header { background: var(--color-ok-soft); }

/* ── Tables ──────────────────────────────────── */
/* Section tables always use collapsed borders (required for tr/td borders) */
.section table {
    border-collapse: collapse;
}

/* Override Tailwind's default border color (0 solid #e5e7eb) on all table elements */
table {
    border-color: var(--color-border-section);
}

.th-taw {
    padding: 0.625rem 1rem;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--color-text-muted);
    border-color: var(--color-border);
    background: var(--color-surface-2);
}

/* Light header row (replaces dark thead — consistent with new theme) */
.thead-dark {
    background-color: var(--color-surface-2);
}
.thead-dark .th-taw {
    color: var(--color-text-muted);
}

/* Light header row (used in section tables) */
.thead-light tr {
    border-bottom: 1px solid var(--color-border-section);
}
.thead-light .th-taw {
    color: var(--color-text);
}

.tr-taw {
    border-bottom: 1px solid var(--color-border);
    border-color: var(--color-border);
    transition: background-color 100ms ease;
}
.tr-taw:hover {
    background-color: var(--color-surface-2);
}

.td-taw {
    padding: 0.625rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text);
    border-color: var(--color-border);
}

/* ── Empty state ─────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.empty-state-label {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    opacity: 0.4;
}
.empty-state-hint {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    opacity: 0.3;
    margin-top: 0.25rem;
}

/* ── Stat Block ──────────────────────────────── */
.stat-block {
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
}

/* ── Badge ───────────────────────────────────── */
.badge {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 4px 9px;
    border-radius: var(--radius-pill);
}

/* neutral — subtle surface tint */
.badge-neutral {
    background-color: var(--color-surface-2);
    color: var(--color-text-2);
}

/* dark — inverted (auto-flips in dark mode) */
.badge-dark {
    background-color: var(--color-inverse);
    color: var(--color-inverse-text);
}

/* accent — soft coral tint */
.badge-accent {
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
}

/* accent-outline — coral border */
.badge-accent-outline {
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
}

/* success — green outline */
.badge-success {
    border: 1px solid var(--color-ok);
    color: var(--color-ok);
}

/* warning — amber outline */
.badge-warning {
    border: 1px solid var(--color-amber);
    color: var(--color-amber-deep);
}

/* info — blue outline */
.badge-info {
    border: 1px solid var(--color-info);
    color: var(--color-info);
}

/* muted — faint surface */
.badge-muted {
    background-color: var(--color-surface-2);
    color: var(--color-text-muted);
}

/* purple — galaxy/attribution */
.badge-purple {
    border: 1px solid var(--color-purple);
    color: var(--color-purple);
}

/* LED dot indicator */
.badge-led {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.badge-led::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.badge-led.badge-neutral::before       { background-color: var(--color-text-muted); }
.badge-led.badge-dark::before          { background-color: var(--color-inverse-text); }
.badge-led.badge-accent::before        { background-color: var(--color-accent); }
.badge-led.badge-accent-outline::before{ background-color: var(--color-accent); }
.badge-led.badge-success::before       { background-color: var(--color-ok); }
.badge-led.badge-warning::before       { background-color: var(--color-amber); }
.badge-led.badge-info::before          { background-color: var(--color-info); }
.badge-led.badge-purple::before        { background-color: var(--color-purple); }
.badge-led.badge-muted::before         { background-color: var(--color-text-muted); }

/* ── Label ───────────────────────────────────── */
.label-taw {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

/* ── Input ───────────────────────────────────── */
.input-taw {
    width: 100%;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    padding: 10px 13px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.25;
    color: var(--color-text);
    border-radius: var(--radius-md);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.input-taw::placeholder { color: var(--color-text-muted); }
.input-taw:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* Textarea variant */
textarea.input-taw {
    min-height: 6rem;
}

/* ── Select ─────────────────────────────────── */
.select-taw {
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    padding: 10px 2rem 10px 13px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.25;
    color: var(--color-text);
    border-radius: var(--radius-md);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239b9aa4' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1em 1em;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.select-taw:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* ── Workflow Stepper — progress meter (small bar next to %) ────── */
.workflow-progress-meter {
    width: 12rem;
    height: 0.175rem;
    background: var(--color-border);
    flex-shrink: 0;
}
.workflow-progress-meter-fill {
    height: 100%;
    background: var(--color-panel-dark);
    transition: width 300ms ease;
}

/* ── Workflow Stepper ───────────────────────────── */
.workflow-stepper {
    display: flex;
    align-items: flex-start;
    width: 100%;
    /* List reset so an <ol> can carry this class without inheriting the
       default browser markers / padding. */
    list-style: none;
    margin: 0;
    padding: 0;
}
.workflow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
}
.workflow-step-indicator {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 700;
    border: 1.5px solid var(--color-border);
    color: var(--color-text-muted);
    background: var(--color-bg);
    transition: all 150ms ease;
}
.workflow-step-indicator--active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.workflow-step-indicator--done {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.workflow-step-label {
    font-family: var(--font-sans);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.375rem;
    text-align: center;
    color: var(--color-text);
    opacity: 0.5;
}
.workflow-step-label--active {
    opacity: 1;
    font-weight: 700;
}
.workflow-step-label--done {
    opacity: 0.7;
}
.workflow-step-timestamp {
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-family: var(--font-mono);
    font-size: 0.59375rem;
    line-height: 1.25;
    text-align: center;
    color: var(--color-text);
    max-width: 100%;
}
.workflow-step-timestamp-label {
    opacity: 0.55;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.workflow-step-timestamp-value {
    opacity: 0.85;
    white-space: nowrap;
}
.workflow-step-timestamp-empty {
    opacity: 0.3;
}
.workflow-connector {
    flex: 1;
    height: 2px;
    background: var(--color-border);
    align-self: flex-start;
    margin-top: 13px;
    margin-left: 2px;
    margin-right: 2px;
    min-width: 4px;
    border-radius: var(--radius-pill);
}
.workflow-connector--done {
    background: var(--color-accent);
}
.workflow-stepper-divider {
    border: 0;
    border-top: 1px solid var(--color-border-section);
    margin: 0 0 0.875rem 0;
    height: 0;
}

/* ── Left Rail ──────────────────────────────────── */
.left-rail {
    width: 220px;
    position: sticky;
    top: 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 8px;
    overflow: hidden;
}
.left-rail-group-label {
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--color-text-muted);
    padding: 0.625rem 0.625rem 0.25rem;
}
.left-rail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-2);
    border-radius: var(--radius-md);
    transition: all 100ms ease;
    min-height: 36px;
}
.left-rail-item:hover {
    background: var(--color-surface-2);
    color: var(--color-text);
}
.left-rail-item--active {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: 600;
}

/* ── Context Panel Cards ────────────────────────── */
.context-card {
    border: 1px solid var(--color-border-section);
    background: var(--color-bg);
}
.context-card-header {
    background: var(--color-surface-active);
    border-bottom: 1px solid var(--color-border-section);
    padding: 0.375rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text);
}
.context-card-body {
    padding: 0.75rem;
}

/* ── Nav dot (left rail) ────────────────────────── */
.nav-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 120ms ease, border-color 120ms ease;
}
.nav-dot--active {
    background: var(--color-accent);
    border: none;
}
.nav-dot--inactive {
    background: transparent;
    border: 1.5px solid var(--color-text-faint);
}
.left-rail-item:hover .nav-dot--inactive {
    border-color: var(--color-text-muted);
}

/* Left-rail Font Awesome glyph — fixed width keeps labels aligned.
   Colour is inherited: inactive items use --color-text-2, the active
   item turns --color-accent (see .left-rail-item--active). */
.left-rail-icon {
    width: 1rem;
    flex-shrink: 0;
    font-size: 0.8125rem;
    text-align: center;
    opacity: 0.75;
}
.left-rail-item--active .left-rail-icon,
.left-rail-item:hover .left-rail-icon {
    opacity: 1;
}

/* ── Status Dot ─────────────────────────────────── */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot--ok   { background: var(--color-ok); }
.status-dot--warn { background: var(--color-amber); }

/* ── Initials Avatar ────────────────────────────── */
.initials-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-inverse);
    color: var(--color-inverse-text);
    font-family: var(--font-sans);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
    border: 2px solid var(--color-bg);
}

/* ══════════════════════════════════════════════════
   Migrated from ir-design-system.css
   ══════════════════════════════════════════════════ */

/* ── Form Components (Numbered Sections) ─────── */

.t-formsection {
    counter-increment: formsection;
    margin-bottom: 2rem;
    position: relative;
    padding-left: 1.25rem;
    border-left: 2px solid var(--color-border-section);
}

.t-formsection-header {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.t-formsection-header::before {
    content: counter(formsection, decimal-leading-zero);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: var(--color-panel-dark);
    color: var(--color-panel-text);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 0;
    flex-shrink: 0;
}

.t-formsection.emphasis {
    border-left-color: var(--color-accent);
    border-left-width: 3px;
    background: rgba(232, 71, 42, 0.03);
    padding: 1.5rem;
    padding-left: 2rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}

.t-formsection.emphasis .t-formsection-header::before {
    background: var(--color-accent);
    color: var(--color-panel-text);
}

.t-required::after {
    content: " *";
    color: var(--color-accent);
    margin-left: 0.125rem;
}

.t-formsection-desc {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text);
    opacity: 0.5;
    margin-left: 2.75rem;
}

/* ── Info Callouts ────────────────────────────── */

.t-info {
    border-left: 3px solid var(--color-border);
    background: var(--color-surface-2);
    padding: 1rem 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.6;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.t-info-warn {
    border-left-color: var(--color-amber);
    background: var(--color-amber-soft);
}

.t-info-danger {
    border-left-color: var(--color-accent);
    background: var(--color-accent-soft);
}

/* ── Segmented Pills ──────────────────────────── */

.t-segpill {
    display: inline-flex;
    border: 1px solid var(--color-border-section);
    background: var(--color-bg);
}

.t-segpill > button {
    padding: 0.375rem 0.75rem;
    border-right: 1px solid var(--color-border-section);
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: all 150ms ease;
    cursor: pointer;
}

.t-segpill > button:last-child {
    border-right: none;
}

.t-segpill > button:hover {
    background: var(--color-surface-hover);
}

.t-segpill > button.active {
    background: var(--color-accent);
    color: var(--color-panel-text);
    border-right-color: var(--color-accent);
}

/* ── KV Grid Helpers ──────────────────────────── */

.t-kvk {
    opacity: 0.6;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
}

.t-kvv {
    font-weight: 500;
}

.t-kvv-mono {
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

/* ── Activity Timeline Cards ──────────────────── */

.t-actcard {
    display: flex;
    padding: 1rem;
    border-left: 3px solid transparent;
    background: var(--color-bg);
    transition: background 150ms ease;
    border-bottom: 1px solid var(--color-border);
}

.t-actcard:hover {
    background: var(--color-surface-2);
}

.t-actcard.active {
    border-left-color: var(--color-accent);
    background: var(--color-accent-soft);
}

/* ── Modal System ─────────────────────────────── */

.t-modal-ish {
    position: fixed;
    z-index: 30;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
}

.t-modal-head {
    background: var(--color-surface-2);
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

.t-modal-body {
    padding: 1.5rem;
}

.t-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-surface-2);
    border-top: 1px solid var(--color-border);
}

/* ── Dirty-form-guard modal ─────────────────────
   Browser-level unsaved-changes confirmation triggered from
   dirty-form-guard.js. Floats above any other stacking context. */
.dirty-form-guard-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
}
.dirty-form-guard-modal.is-open { display: block; }
.dirty-form-guard-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.dirty-form-guard-modal__dialog {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 460px;
    max-width: calc(100vw - 2rem);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-pop);
    padding: 1.25rem 1.5rem 1rem;
    overflow: hidden;
}
.dirty-form-guard-modal__title {
    margin: 0 0 0.5rem 0;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text);
}
.dirty-form-guard-modal__body {
    margin: 0 0 1.25rem 0;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--color-text);
}
.dirty-form-guard-modal__actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ── Avatar Stack ─────────────────────────────── */

.avatar-stack {
    display: flex;
    align-items: center;
}

.avatar-stack-item {
    margin-left: -8px;
    border: 2px solid var(--color-bg);
    z-index: 0;
}

.avatar-stack-item:first-child {
    margin-left: 0;
    z-index: 2;
}

.avatar-stack-item:nth-child(2) {
    z-index: 1;
}

/* ── Indicator Object Grouping ──────────────────────── */

.t-indicator-object-header {
    font-weight: 700;
}

.t-indicator-object-child {
    padding-left: 36px;
    background: var(--color-surface-2);
}

.sightings-count.active {
    color: var(--color-accent);
    font-weight: 700;
}

/* ── Advisory Checks (Closure Dialog) ─────────── */

.advisory-check-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
}

.advisory-check-row.check-pass {
    background: rgba(47, 122, 58, 0.08);
    border-left: 3px solid var(--color-badge-success);
}

.advisory-check-row.check-fail {
    background: rgba(139, 94, 0, 0.08);
    border-left: 3px solid var(--color-badge-warning);
}

/* ── Header Strip ─────────────────────────────── */

/* Page content max-width (hand-written so it doesn't depend on a Tailwind
   rebuild for arbitrary values). Fills smaller screens; caps ultra-wide. */
.page-max { max-width: 1560px; }

.header-strip {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;   /* gap below the header card on every page */
}
/* Soft full-bleed admin banner that sits flush at the header card's top edge. */
.header-strip__banner {
    margin: -1.25rem -1.5rem 1.25rem;
    padding: 0.7rem 1.5rem;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
/* Grey full-bleed action band flush at the header card's bottom edge (rounded
   bottom corners so it matches the card without clipping popovers). */
.header-strip__foot {
    margin: 1rem -1.5rem -1.25rem;
    padding: 0.875rem 1.5rem;
    background: var(--color-surface-2);
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}


/* ── Indicator disclosure list (IR/Hunt Indicators tab) ─────────────────── */
.indicator-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.indicator-list > li + li {
    border-top: 1px solid var(--color-border-section);
}

.indicator-row {
    border-left: 2px solid transparent;
    transition: border-color 100ms ease, background-color 100ms ease;
}
.indicator-row[open] {
    border-left-color: var(--color-accent);
    background-color: var(--color-surface-hover);
}

.indicator-row__summary {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.indicator-row__summary::-webkit-details-marker { display: none; }
.indicator-row__summary:hover {
    background-color: var(--color-surface-hover);
}

.indicator-row__chevron {
    flex: 0 0 auto;
    width: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-text);
    opacity: 0.45;
    transition: transform 120ms ease, opacity 120ms ease;
    transform: rotate(0deg);
    text-align: center;
}
.indicator-row[open] .indicator-row__chevron {
    transform: rotate(90deg);
    opacity: 0.85;
}

.indicator-row__type {
    flex: 0 0 auto;
}

.indicator-row__value {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.4;
    word-break: break-all;
    overflow-wrap: anywhere;
    color: var(--color-text);
}

.indicator-row__meta {
    flex: 0 0 auto;
    display: flex;
    gap: 0.375rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.indicator-row__panel {
    padding: 0.75rem 1rem 1rem 2.25rem;
    background-color: rgba(26, 26, 26, 0.025);
    border-top: 1px dashed var(--color-border-section);
}

.indicator-row__panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem 1rem;
}

.indicator-row__panel-block--full {
    grid-column: 1 / -1;
}

.indicator-row__panel-label {
    font-family: var(--font-sans);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.55;
    margin-bottom: 0.25rem;
}

.indicator-row__panel-value {
    font-size: 0.8125rem;
    line-height: 1.45;
}

.indicator-row__panel-actions {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* ── Indicator pager (top + bottom toolbars) ──────────────────────── */
.indicator-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    flex-wrap: wrap;
    background-color: rgba(26, 26, 26, 0.02);
    border-bottom: 1px solid var(--color-border-section);
}
.indicator-pager--bottom {
    border-top: 1px solid var(--color-border-section);
    border-bottom: none;
}

.indicator-pager__info {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    opacity: 0.7;
}

.indicator-pager__controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.indicator-pager__per-page {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.indicator-pager__select {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    padding: 0.2rem 0.45rem;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-section);
    border-radius: 2px;
    color: var(--color-text);
    cursor: pointer;
}
.indicator-pager__select:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* ── Inline spinner ──────────────────────────────────────
   Used inside Alpine-driven `<span x-show="submitting">` blocks on
   submit buttons across HTMX/non-HTMX forms. CurrentColor-driven so
   it adopts the button's text colour. */
.t-spinner {
    display: inline-block;
    width: 0.875em;
    height: 0.875em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: t-spin 0.7s linear infinite;
    vertical-align: -2px;
    flex-shrink: 0;
}
@keyframes t-spin {
    to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════
   Indicator Workbench — layout components
   ══════════════════════════════════════════════════ */

/* Soft surface utilities — use the platform tokens. */
.surface-hover { background-color: var(--color-surface-hover); }
.surface-active { background-color: var(--color-surface-active); }
.hover\:surface-hover:hover { background-color: var(--color-surface-hover); }

/* Workbench mini correlation graph (in the expand panel).
   Visual spec from the design doc — cream frame with a subtle 18px grid
   pattern, hairline border, satellite SVG nodes drawn inline. */
.workbench-mini-graph {
    position: relative;
    height: 170px;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    background-image:
        linear-gradient(var(--color-rule-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-rule-soft) 1px, transparent 1px);
    background-size: 18px 18px;
    overflow: hidden;
    border-radius: var(--radius-sm);
}
.workbench-mini-graph svg {
    width: 100%;
    height: 100%;
    font-family: var(--font-mono);
}
.workbench-mini-graph-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0.375rem;
}
.workbench-mini-graph-label {
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
}
.workbench-mini-graph-link {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.workbench-mini-graph-link:hover {
    color: var(--color-accent);
}
.workbench-mini-graph-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.59375rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--color-text-muted);
    min-width: 0;
}
.workbench-mini-graph-footer > span {
    /* Allow the left summary span ("1 cases · 1 asn · …") to wrap onto
       multiple lines instead of forcing the row wider than the card. */
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.workbench-mini-graph-footer > span:last-child {
    /* "depth 1" stays a single line on the right edge. */
    flex-shrink: 0;
    white-space: nowrap;
}

/* Full Indicator correlation graph page (templates/indicators/indicator_graph.html).
   Two-pane layout: left controls (260px) + flex graph canvas. Same cream
   palette + 18px grid as the mini preview, scaled up. */
.indicator-graph-shell {
    display: flex;
    gap: 0;
    border: 1px solid var(--color-border-solid);
    height: calc(100vh - 200px);
    min-height: 500px;
}
.indicator-graph-controls {
    width: 260px;
    min-width: 260px;
    border-right: 1px solid var(--color-border-solid);
    overflow-y: auto;
    padding: 1rem;
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
}
.indicator-graph-controls-block {
    margin-bottom: 1.25rem;
}
.indicator-graph-controls-block:last-child {
    margin-bottom: 0;
}
.indicator-graph-controls-label {
    font-family: var(--font-sans);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text);
    opacity: 0.6;
}
.indicator-graph-controls-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.375rem;
}
.indicator-graph-controls-col {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.375rem;
}
.indicator-graph-controls-row label,
.indicator-graph-controls-col label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.8rem;
}
.indicator-graph-controls-stats {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    font-family: var(--font-sans);
    font-size: 0.65rem;
    color: var(--color-text);
    opacity: 0.4;
}
.indicator-graph-canvas {
    flex: 1;
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg);
    background-image:
        linear-gradient(var(--color-rule-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-rule-soft) 1px, transparent 1px);
    background-size: 18px 18px;
}
.indicator-graph-canvas svg {
    width: 100%;
    height: 100%;
    font-family: var(--font-mono);
}
.indicator-graph-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--color-text);
    opacity: 0.4;
}
.indicator-graph-node-group.selected circle,
.indicator-graph-node-group.selected rect,
.indicator-graph-node-group.selected polygon {
    stroke: var(--color-accent) !important;
    stroke-width: 3px !important;
}

/* Bulleted list — small square markers, left-padded, gap between items.
   Square fits the brutalist editorial aesthetic better than disc. */
.bullet-list {
    list-style: square outside;
    padding-left: 1.25rem;
    margin: 0;
}
.bullet-list > li {
    margin-bottom: 0.375rem;
}
.bullet-list > li:last-child {
    margin-bottom: 0;
}
.bullet-list > li::marker {
    color: var(--color-text);
    opacity: 0.5;
}

/* Workbench header strip — adds horizontal inset to the shared
   .header-strip so its title (left) and action buttons (right) don't
   butt against the strip's edges. The base .header-strip uses
   `padding: 1rem 0` and ships in the same stylesheet, so this class
   relies on source-order to override only the horizontal axis. */
.header-strip.header-strip--workbench {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Two-column page grid: filter rail (240px) + main column (flex). */
.workbench-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}
@media (min-width: 1024px) {
    .workbench-grid {
        grid-template-columns: 240px minmax(0, 1fr);
    }
}

/* KPI strip — "Morning brief".
   Follows the platform two-part section pattern:
     · 1px black frame (border-solid)
     · warm-grey header strip (rgba 0.06)
     · cream content cells (--color-bg) divided by 1px black gap-lines.
   No dark fills — matches the brutalist editorial palette. */
.workbench-kpi {
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.workbench-kpi-header {
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    gap: 0.75rem;
}
.workbench-kpi-header-label {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text);
}
.workbench-kpi-header-meta {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
}
/* Grid uses hairline-coloured gap for cell separators */
.workbench-kpi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background-color: var(--color-border);
}
@media (min-width: 640px) {
    .workbench-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .workbench-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .workbench-kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.workbench-kpi-cell {
    padding: 18px 20px;
    background-color: var(--color-bg);
}
.workbench-kpi-value {
    font-family: var(--font-sans);
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-text);
}
.workbench-kpi-value--alert {
    color: var(--color-accent);
}
.workbench-kpi-label {
    margin-top: 0.625rem;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}
.workbench-kpi-hint {
    margin-top: 0.25rem;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

/* Workbench section — same look as .section; gap managed by parent space-y. */
.workbench-section {
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 0;
}

.workbench-table-scroll {
    overflow-x: auto;
}
.workbench-table {
    table-layout: fixed;
    width: auto;
    min-width: 100%;
    border-collapse: collapse;
    background-color: var(--color-bg);
}
/* Default column widths for the indicator workbench tables. The wb-resizable
   resizer overrides these per-column via inline width on drag; see
   templates/indicators/_indicator_table_cols.html. */
.workbench-table col[data-col="ribbon"]     { width: 3px; }
.workbench-table col[data-col="check"]      { width: 32px; }
.workbench-table col[data-col="indicator"]  { width: 280px; }
.workbench-table col[data-col="type"]       { width: 105px; }
.workbench-table col[data-col="enrichment"] { width: 170px; }
.workbench-table col[data-col="abuse"]      { width: 60px; }
.workbench-table col[data-col="assignee"]   { width: 155px; }
.workbench-table col[data-col="caret"]      { width: 32px; }
body.wb-dragging {
    cursor: col-resize !important;
    user-select: none;
}
.workbench-table thead tr {
    background-color: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
}
.workbench-table th {
    position: relative;
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
}
.wb-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    z-index: 2;
}
.wb-resize-handle:hover {
    background: rgba(0, 0, 0, 0.18);
}
body.wb-dragging .wb-resize-handle {
    background: var(--color-accent);
    opacity: 0.5;
}
.workbench-table th.workbench-th-center { text-align: center; }
.workbench-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: background-color 100ms ease;
}
.workbench-table tbody tr:hover {
    background-color: var(--color-surface-2);
}
.workbench-table tbody tr.workbench-row--expanded {
    background-color: var(--color-accent-soft);
}
.workbench-table td {
    padding: 0.625rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-text);
    vertical-align: top;
}
.workbench-table td.workbench-td-center { text-align: center; vertical-align: middle; }
.workbench-table td.workbench-td-nowrap { white-space: nowrap; }
.workbench-table th,
.workbench-table td {
    border-right: 1px solid var(--color-rule-soft);
}
.workbench-table th:last-child,
.workbench-table td:last-child {
    border-right: none;
}
.workbench-table td.workbench-td-truncate {
    max-width: 0;
    overflow: hidden;
}

/* L1: primary content — enforced single line, truncates at cell boundary */
.workbench-row-line1 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    overflow: hidden;
}
.workbench-row-line1 .workbench-row-value {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* L2: secondary content — always one muted, truncated line */
.workbench-row-line2 {
    display: block;
    margin-top: 0.3rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--color-rule-soft);
    font-size: 0.7rem;
    line-height: 1.3;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* The thin coloured ribbon in the leftmost cell — workflow state indicator. */
.workbench-state-ribbon {
    width: 3px;
    padding: 0 !important;
}
.workbench-state-ribbon--new { background-color: var(--color-border); }
.workbench-state-ribbon--inv { background-color: var(--color-amber); }
.workbench-state-ribbon--c2  { background-color: var(--color-accent); }
.workbench-state-ribbon--wl  { background-color: var(--color-info); }
.workbench-state-ribbon--fp  { background-color: var(--color-text-faint); }

/* Date-bucket header row used by the Timeline view. */
.workbench-bucket-row td {
    background-color: var(--color-surface-2);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--color-text-muted);
    padding: 0.375rem 0.75rem;
}

/* Persistent bulk-action bar — visible at all times so analysts know
   the feature exists. Goes "active" with a tinted background and colour
   transition once a row is selected. */
.workbench-bulk-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    background-color: var(--color-surface-2);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.workbench-bulk-bar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}
.workbench-bulk-bar__row--verdict {
    padding-top: 0.4rem;
    margin-top: 0.4rem;
    border-top: 1px solid var(--color-border);
    gap: 0.5rem;
}
.workbench-bulk-bar .workbench-bulk-bar__close {
    margin-left: auto;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--color-text);
    opacity: 0.55;
    cursor: pointer;
    line-height: 1;
    font-size: 0.95rem;
    transition: opacity 120ms ease;
    flex-shrink: 0;
}
.workbench-bulk-bar .workbench-bulk-bar__close:hover {
    opacity: 1;
}
.workbench-bulk-bar.workbench-bulk-bar--active {
    background-color: var(--color-bg);
    border-color: var(--color-border);
    border-left: 3px solid var(--color-accent);
    color: var(--color-text);
    box-shadow: var(--shadow-card);
}
.workbench-bulk-bar .workbench-bulk-bar__hint {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.workbench-bulk-bar .workbench-bulk-bar__count {
    font-family: var(--font-sans);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
}
.workbench-bulk-bar .workbench-bulk-bar__count-label {
    margin-left: 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
}
.workbench-bulk-bar .workbench-bulk-bar__sep {
    opacity: 0.3;
}
.workbench-bulk-bar button[disabled],
.workbench-bulk-bar button[disabled]:hover {
    opacity: 0.35;
    cursor: not-allowed;
    background-color: transparent;
}

/* Expanded panel inner grid (3 columns on lg+, stacks on smaller). */
.workbench-expand {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--color-canvas);
    border-top: 2px solid var(--color-accent);
}
@media (min-width: 1024px) {
    .workbench-expand {
        grid-template-columns: 1.4fr 1fr 1fr;
    }
}
.workbench-expand-card {
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    min-width: 0;
    overflow: hidden;
}
/* Long values inside the enrichment card grid must wrap, even when they
   contain no break opportunities (commas-without-spaces, long hashes,
   etc.). ``min-width: 0`` lets the grid column shrink; ``overflow-wrap:
   anywhere`` makes wrap-on-overflow work for unbroken strings. */
.workbench-expand-card dl,
.workbench-expand-card dt,
.workbench-expand-card dd {
    min-width: 0;
}
.workbench-expand-card dd,
.workbench-expand-card dt {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.workbench-expand-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-text);
}

/* ── IOC Detail page — two-column layout ─────────────────────────────────────── */
.ioc-wrap   { max-width:1480px; margin:0 auto; padding:26px 32px 80px; }
.ioc-grid   { display:grid; grid-template-columns:minmax(0,1fr) 396px; gap:22px; align-items:start; }
.ioc-rail   { position:sticky; top:18px; display:flex; flex-direction:column; gap:16px; }
.ioc-metrics{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.ioc-card   { background:var(--color-bg); border:1px solid var(--color-border);
               border-radius:var(--radius-card); box-shadow:var(--shadow-card); overflow:hidden; }
.ioc-card-head { padding:10px 16px; border-bottom:1px solid var(--color-border);
                  background:var(--color-surface-2); display:flex; align-items:center;
                  justify-content:space-between; }
.ioc-card-head-label { font-family:var(--font-sans); font-size:0.8125rem; font-weight:700; color:var(--color-text); text-decoration:none; }
a.ioc-card-head-label:hover { color:var(--color-accent); }
.ioc-card-head-meta  { font-family:var(--font-sans); font-size:0.75rem; color:var(--color-text-muted); }
.ioc-card-body { padding:16px; }
.ioc-kv  { display:grid; grid-template-columns:repeat(2,1fr); gap:10px 16px; }
.ioc-kv3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px 16px; }
.ioc-kv-label { font-family:var(--font-sans); font-size:0.6rem; font-weight:700;
                  text-transform:uppercase; letter-spacing:.10em; color:var(--color-text-muted);
                  margin-bottom:2px; display:block; }
.ioc-kv-val   { font-family:var(--font-mono); font-size:0.8rem; color:var(--color-text);
                  word-break:break-all; }
.ioc-metric { background:var(--color-bg); border:1px solid var(--color-border);
               border-radius:var(--radius-card); box-shadow:var(--shadow-sm); padding:16px 14px;
               display:block; text-decoration:none; color:inherit; }
.ioc-metric--link { cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.ioc-metric--link:hover { border-color:var(--color-accent); box-shadow:var(--shadow-card); text-decoration:none; color:inherit; }
.ioc-metric-lbl { font-family:var(--font-sans); font-size:0.6rem; font-weight:700;
                    text-transform:uppercase; letter-spacing:.10em; color:var(--color-text-muted);
                    margin-bottom:6px; display:block; }
.ioc-metric-val { font-family:var(--font-mono); font-size:1.9rem; font-weight:700;
                    line-height:1; letter-spacing:-.02em; }
.ioc-metric-sub { font-family:var(--font-sans); font-size:0.7rem; color:var(--color-text-muted);
                    margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ioc-port-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:8px; }
.ioc-port-tile  { border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:8px 10px; }
.ioc-tag        { display:inline-flex; align-items:center; padding:3px 9px;
                   border:1px solid var(--color-border); border-radius:var(--radius-pill);
                   font-family:var(--font-mono); font-size:0.65rem; color:var(--color-text-2);
                   background:var(--color-surface-2); }
.ioc-rtab-bar   { display:flex; border-bottom:1px solid var(--color-border);
                   background:var(--color-surface-2); }
.ioc-rtab       { padding:9px 14px; font-family:var(--font-sans); font-size:0.8rem;
                   font-weight:500; color:var(--color-text-muted); background:none; border:none;
                   cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
                   transition:color 150ms,border-color 150ms; white-space:nowrap; }
.ioc-rtab:hover { color:var(--color-text); }
.ioc-rtab.is-active { color:var(--color-accent); border-bottom-color:var(--color-accent); font-weight:600; }
.ioc-banner { background:var(--color-accent-soft); border:1px solid var(--color-accent)/30;
               border-radius:var(--radius-md); padding:10px 16px; display:flex;
               align-items:center; gap:12px; flex-wrap:wrap; }
@media (max-width:1080px){ .ioc-grid{grid-template-columns:1fr} .ioc-rail{position:static} }
@media (max-width:760px) { .ioc-metrics{grid-template-columns:repeat(2,1fr)} .ioc-wrap{padding:14px 14px 60px} }

/* ── Tab bar ──────────────────────────────────────── */
.tab-bar {
    display: flex;
    gap: 0.25rem;
    background: var(--color-surface-2);
    padding: 0 0.5rem;
    border-bottom: 1px solid var(--color-border);
}
.tab-bar__btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.625rem 0.875rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease;
}
.tab-bar__btn:hover {
    color: var(--color-text);
}
.tab-bar__btn--active,
.tab-bar__btn--active:hover {
    color: var(--color-accent);
    font-weight: 600;
    border-bottom-color: var(--color-accent);
}

/* ─────────────────────────────────────────────────────────────────────────
   Top navigation — segmented cluster (right-aligned)
   Theme-aware via tokens; works in light and dark. HTML lives in base.html.
   ───────────────────────────────────────────────────────────────────────── */
.taw-nav {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.taw-nav__brand {
    display: flex;
    align-items: center;    /* center brand text/logo vertically within itself */
    gap: 8px;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 1rem;
    color: var(--color-accent);
    text-decoration: none;
    flex-shrink: 0;
    align-self: center;     /* vertically center within the stretch container */
}
.taw-nav__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 800;
    line-height: 1;
}
.taw-nav__right {
    display: flex;
    align-items: center;   /* center children vertically within the padded area */
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
    padding: 0.4rem 0;     /* breathing room from top & bottom of nav bar */
    align-self: stretch;   /* fill the full nav height so padding has effect */
}

/* Segmented control wrapping the dropdown groups */
.taw-seg {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 5px;
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
}
.taw-seg__group { position: relative; }
.taw-seg__item {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 16px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    color: var(--color-text-2);
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
}
.taw-seg__item:hover { color: var(--color-text); }
.taw-seg__item--active {
    background: var(--color-bg);
    color: var(--color-text);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}
/* In dark mode a white-on-grey pill inverts — lift the active pill instead */
html[data-theme="dark"] .taw-seg__item--active {
    background: var(--color-surface-3);
    box-shadow: none;
}
.taw-seg__icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--color-text-muted);
}
.taw-seg__item:hover .taw-seg__icon { color: var(--color-text-2); }
.taw-seg__item--active .taw-seg__icon { color: var(--color-accent); }
.taw-seg__caret {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    opacity: 0.45;
    transition: transform 150ms ease;
}

/* Dropdown panel */
.taw-nav__pop {
    position: absolute;
    top: calc(100% + 9px);
    min-width: 12.5rem;
    padding: 4px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    z-index: 50;
}
.taw-nav__pop--right { right: 0; }
.taw-nav__pop a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-2);
    text-decoration: none;
    white-space: nowrap;
    transition: background 120ms ease, color 120ms ease;
}
.taw-nav__pop a i {
    width: 1rem;
    flex-shrink: 0;
    font-size: 0.8125rem;
    text-align: center;
    opacity: 0.65;
}
.taw-nav__pop a:hover { background: var(--color-surface-2); color: var(--color-text); }
.taw-nav__pop a:hover i,
.taw-nav__pop a.is-active i { opacity: 1; }
.taw-nav__pop a.is-active {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: 600;
}

/* Right-rail icon buttons (profile / logout / theme) */
.taw-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-2);
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}
.taw-nav__icon:hover { background: var(--color-surface-2); color: var(--color-text); }
.taw-nav__icon.is-active { background: var(--color-accent-soft); color: var(--color-accent); }
.taw-nav__icon svg { width: 18px; height: 18px; }
.taw-nav__icon i { font-size: 16px; line-height: 1; }
.taw-nav__divider {
    width: 1px;
    height: 22px;
    margin: 0 10px;
    background: var(--color-border);
}

/* Invitations pill */
.taw-nav__invites {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-2);
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.taw-nav__invites:hover { background: var(--color-surface-2); color: var(--color-text); }
.taw-nav__invites .taw-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 999px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Indicators tab — compact column table (flat view)
   Lighter than the workbench grid; key fields visible as aligned columns.
   Rows remain <details> for expand-to-panel (reuses .indicator-row__panel).
   ───────────────────────────────────────────────────────────────────────── */
.ind-tbl { list-style: none; margin: 0; padding: 0; }

.ind-tbl__head,
.ind-tbl__summary {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr) 6rem 7rem 7rem 5rem;
    align-items: center;
    gap: 0.875rem;
}

.ind-tbl__head {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--color-border-section);
    font-family: var(--font-sans);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
}

.ind-tbl > li + li { border-top: 1px solid var(--color-border-section); }

.ind-tbl__row { border-left: 3px solid var(--color-border); }
.ind-tbl__row--new,
.ind-tbl__row--inv        { border-left-color: var(--color-amber); }
.ind-tbl__row--confirmed  { border-left-color: var(--color-accent); }
.ind-tbl__row--wl         { border-left-color: var(--color-info); }
.ind-tbl__row--fp         { border-left-color: var(--color-text-faint); }

.ind-tbl__summary {
    padding: 0.625rem 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color 100ms ease;
}
.ind-tbl__summary::-webkit-details-marker { display: none; }
.ind-tbl__summary:hover { background-color: var(--color-surface-2); }
.ind-tbl__row[open] > .ind-tbl__summary { background-color: var(--color-surface-2); }

.ind-tbl__value {
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ind-tbl__cell { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
.ind-tbl__cell .badge {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.ind-tbl__muted { color: var(--color-text-faint); }

.ind-tbl__seen {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: 1.25;
    color: var(--color-text-2);
}
.ind-tbl__seen span { display: block; color: var(--color-text-muted); }

.ind-tbl__sightings {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-3);
    color: var(--color-text-2);
}

/* Footer link row (e.g. "+ N more — open workbench") */
.ind-tbl__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--color-border-section);
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}
.ind-tbl__more a { color: var(--color-accent); text-decoration: none; }
.ind-tbl__more a:hover { text-decoration: underline; }

@media (max-width: 720px) {
    .ind-tbl__head { display: none; }
    .ind-tbl__summary {
        grid-template-columns: 1rem minmax(0, 1fr) auto;
        grid-auto-rows: min-content;
        gap: 0.375rem 0.75rem;
    }
}

/* ─── Global Modal + Slide-over ─────────────────────────────────────────── */
.taw-modal-overlay {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.taw-modal {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: 0 20px 60px rgba(0,0,0,.22);
    width: 100%;
    max-height: calc(100vh - 64px);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.taw-modal--sm  { max-width: 480px; }
.taw-modal--md  { max-width: 640px; }
.taw-modal--lg  { max-width: 800px; }
.taw-modal--xl  { max-width: 1020px; }

.taw-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 22px 14px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.taw-modal-head-title {
    font-family: var(--font-sans); font-size: 0.9375rem;
    font-weight: 700; color: var(--color-text);
}
.taw-modal-close {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    color: var(--color-text-muted); background: transparent; border: none;
    cursor: pointer; transition: background .12s, color .12s; flex-shrink: 0;
}
.taw-modal-close:hover { background: var(--color-surface-3); color: var(--color-text); }
.taw-modal-body   { overflow-y: auto; flex: 1; padding: 22px; }
.taw-modal-foot   {
    padding: 14px 22px; border-top: 1px solid var(--color-border);
    display: flex; justify-content: flex-end; gap: 10px;
    flex-shrink: 0; background: var(--color-surface-2);
}

/* Slide-over (right panel) */
.taw-slideover-backdrop {
    position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.35);
}
.taw-slideover {
    position: fixed; inset-y: 0; right: 0;
    width: min(100vw, 720px);
    background: var(--color-bg);
    border-left: 1px solid var(--color-border);
    box-shadow: -6px 0 32px rgba(0,0,0,.14);
    z-index: 301;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.taw-slideover-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 22px 14px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.taw-slideover-body { flex: 1; overflow-y: auto; padding: 22px; }

/* HTMX loading indicator inside modal */
.taw-modal-body.htmx-request,
.taw-slideover-body.htmx-request {
    opacity: 0.6; pointer-events: none;
}
.taw-modal-loading {
    display: flex; align-items: center; justify-content: center;
    padding: 48px 22px; color: var(--color-text-muted);
    font-family: var(--font-sans); font-size: 0.875rem;
}

html[data-theme="dark"] .taw-modal-overlay { background: rgba(0,0,0,.6); }
html[data-theme="dark"] .taw-modal { box-shadow: 0 20px 60px rgba(0,0,0,.5); }

/* ─────────────────────────────────────────────────────────────────────────
   SmartWhenField — text-first datetime picker (replaces native datetime-local)
   Global (used in IR, hunts, indicators). Spec token names mapped to platform
   tokens: --card→--color-bg, --rule→--color-border, --ink*→--color-text*,
   --r-md→--radius-md, --sh-pop→--shadow-pop, etc.
   ───────────────────────────────────────────────────────────────────────── */
.tl-field { position: relative; }
.tl-input-row { display: flex; gap: 6px; }
.tl-input-row .t-mono-input,
.tl-input-row .input-taw { flex: 1; }
.tl-cal-btn { flex: none; padding: 0 12px; }

/* Read-back line */
.tl-readback {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    min-height: 16px;
    font: 500 11.5px var(--font-sans);
}
.tl-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tl-rb--empty .tl-dot { background: var(--color-text-faint); }
.tl-rb--empty { color: var(--color-text-muted); }
.tl-rb--error .tl-dot { background: var(--color-accent); }
.tl-rb--error { color: var(--color-accent); }
.tl-rb--warn  .tl-dot { background: var(--color-amber); }
.tl-rb--warn  { color: var(--color-amber-deep); }
.tl-rb--ok    .tl-dot { background: var(--color-ok); }
.tl-rb--ok    { color: var(--color-ok); }

/* Popover */
.tl-pop {
    position: absolute;
    z-index: 60;
    margin-top: 6px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    padding: 14px;
    width: 260px;
}
.tl-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.tl-pop-month { font: 700 13px var(--font-sans); color: var(--color-text); }

/* MiniCalendar */
.tl-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.tl-cal button {
    font: 400 12px var(--font-sans);
    border: none;
    background: transparent;
    color: var(--color-text);
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    line-height: 1;
}
.tl-cal button:hover { background: var(--color-surface-2); }
.tl-cal button.dim { color: var(--color-text-faint); }
.tl-cal button.today { box-shadow: inset 0 0 0 1.5px var(--color-text-faint); }
.tl-cal button.sel { background: var(--color-accent); color: #fff; font-weight: 700; }
.tl-cal button.sel:hover { background: var(--color-accent-deep); }

.tl-dow {
    font: 700 9.5px var(--font-sans);
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    text-align: center;
    height: 20px;
    text-transform: uppercase;
    line-height: 20px;
}

.tl-divider { height: 1px; background: var(--color-border); border: none; margin: 12px 0; }

/* Chips */
.tl-chip {
    font: 600 11.5px var(--font-sans);
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-2);
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
}
.tl-chip:hover { border-color: var(--color-text-faint); color: var(--color-text); background: var(--color-surface-2); }
.tl-chip.is-on { border-color: var(--color-accent); color: var(--color-accent); }

/* Steppers + numeric time */
.tl-step {
    width: 28px;
    height: 30px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-2);
    cursor: pointer;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tl-step:hover { background: var(--color-surface-2); color: var(--color-text); }
.tl-time-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tl-time-group { display: flex; align-items: center; gap: 6px; }
.tl-step-stack { display: flex; flex-direction: column; gap: 2px; }
.tl-step-stack .tl-step { height: 14px; }
.tl-num { font: 600 18px var(--font-mono); color: var(--color-text); width: 34px; text-align: center; }
.tl-colon { font: 400 18px var(--font-mono); color: var(--color-text-muted); }

/* WhenPill — compact read-only datetime display (timeline rows) */
.tl-whenpill {
    font: 600 11px var(--font-mono);
    letter-spacing: 0.02em;
    padding: 5px 9px;
    border-radius: 7px;
    white-space: nowrap;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text);
    cursor: pointer;
}
.tl-whenpill.is-active { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
.tl-whenpill.is-unresolved { border-color: var(--color-amber); background: transparent; color: var(--color-amber-deep); }

/* ── ATT&CK tactic-coverage heatmap (shared component) ──────────────────────
   Reusable anywhere via templates/includes/_attck_tactic_coverage.html.
   The intensity ramp is derived from the single accent token mixed against the
   surface, so it tracks the theme and flips automatically in dark mode — no new
   palette is introduced. */
.taw-tactic-coverage__legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 6px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;          /* 11px */
    color: var(--color-text-muted);
}
.taw-tactic-key {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}
.taw-tactic-coverage__grid { font-size: 0; }   /* collapse inline-block whitespace */
.taw-tactic-cell {
    display: inline-block;
    box-sizing: border-box;
    width: 23.5%;
    margin: 0.75%;
    vertical-align: top;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
}
.taw-tactic-cell__name {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.75rem;            /* 12px */
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-muted);
}
.taw-tactic-cell__count {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.6875rem;          /* 11px */
    color: var(--color-text-muted);
}
/* Intensity ramp: 0 = uncovered (surface), 1-3 = accent tints. */
.taw-tactic-key--0 { background: var(--color-surface-2); }
.taw-tactic-key--1 { background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg)); }
.taw-tactic-key--2 { background: color-mix(in srgb, var(--color-accent) 45%, var(--color-bg)); }
.taw-tactic-key--3 { background: color-mix(in srgb, var(--color-accent) 78%, var(--color-bg)); }
.taw-tactic-cell--1 {
    background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg));
    border-color: color-mix(in srgb, var(--color-accent) 32%, var(--color-bg));
}
.taw-tactic-cell--2 {
    background: color-mix(in srgb, var(--color-accent) 45%, var(--color-bg));
    border-color: color-mix(in srgb, var(--color-accent) 58%, var(--color-bg));
}
.taw-tactic-cell--3 {
    background: color-mix(in srgb, var(--color-accent) 78%, var(--color-bg));
    border-color: var(--color-accent-deep);
}
.taw-tactic-cell--1 .taw-tactic-cell__name,
.taw-tactic-cell--2 .taw-tactic-cell__name,
.taw-tactic-cell--3 .taw-tactic-cell__name { color: var(--color-text); }
.taw-tactic-cell--1 .taw-tactic-cell__count,
.taw-tactic-cell--2 .taw-tactic-cell__count,
.taw-tactic-cell--3 .taw-tactic-cell__count { color: var(--color-text-2); }

/* ── Custom Select (progressive enhancement) — global, used on every page ─── */
.taw-select { position: relative; }
.taw-select__native {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
    pointer-events: none;
}
.taw-select__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    padding: 10px 13px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: 1.25;
    color: var(--color-text);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.taw-select.is-open .taw-select__btn,
.taw-select__btn:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.taw-select__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taw-select__val.is-placeholder { color: var(--color-text-muted); }
.taw-select__caret { color: var(--color-text-muted); flex-shrink: 0; transition: transform 150ms ease; }
.taw-select.is-open .taw-select__caret { transform: rotate(180deg); }
.taw-select__panel {
    position: absolute;
    z-index: 60;
    top: 100%; left: 0; right: 0;
    margin-top: 4px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
}
.taw-select__opt {
    padding: 8px 10px;
    font-size: 0.78125rem;
    border-radius: 7px;
    cursor: pointer;
    color: var(--color-text);
}
.taw-select__opt:hover { background: var(--color-surface-2); }
.taw-select__opt.is-sel { background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }

/* ── ATT&CK "Add mapping" inline form ──────────────────────────────
   Row 1: full-width technique search (room for the autocomplete dropdown).
   Row 2: Status (narrow) + Notes (grows) + Add button, bottom-aligned so all
   three controls line up despite the labels above them. Stacks on narrow
   viewports. Authored here (not as Tailwind utilities) so it needs no rebuild
   and keeps the markup modular. */
.attck-add__search { position: relative; margin-bottom: 1rem; }
.attck-add__row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.attck-add__action { flex: none; }
@media (min-width: 768px) {
    .attck-add__row {
        flex-direction: row;
        align-items: flex-end;
    }
    .attck-add__status { width: 11rem; flex: none; }
    .attck-add__notes { flex: 1 1 auto; min-width: 0; }
}