/*
 * Registered as a plain Filament stylesheet (FilamentAsset::register in AppServiceProvider), not a
 * Vite theme, so no Node build is needed. Every colour here reads a --castellum-* custom property
 * emitted by components/theme/variables.blade.php; adding a theme means only adding a Theme class.
 */

.castellum-card {
    background: var(--castellum-surface);
    border: 1px solid var(--castellum-border);
    border-radius: 14px;
    padding: 20px;
}

.castellum-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--castellum-text);
    font-family: var(--castellum-font-body);
}

.castellum-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--castellum-muted);
    background: color-mix(in srgb, var(--castellum-muted) 14%, transparent);
}

.castellum-badge--brand {
    color: var(--castellum-brand-light);
    background: color-mix(in srgb, var(--castellum-brand) 14%, transparent);
}

.castellum-badge--live {
    color: var(--castellum-live);
    background: color-mix(in srgb, var(--castellum-live) 14%, transparent);
}

.castellum-badge--warning {
    color: var(--castellum-warning);
    background: color-mix(in srgb, var(--castellum-warning) 14%, transparent);
}

.castellum-badge--danger {
    color: var(--castellum-danger);
    background: color-mix(in srgb, var(--castellum-danger) 14%, transparent);
}

.castellum-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    text-align: center;
    color: var(--castellum-muted);
}

.castellum-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    background: var(--castellum-raised);
    border: 1px solid var(--castellum-border);
    border-radius: 14px;
}

.castellum-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.castellum-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 768px) {
    .castellum-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.castellum-muted {
    color: var(--castellum-muted);
}

.castellum-mono {
    font-family: var(--castellum-font-mono);
}

/* Filament wraps every schema component's children in its own `.fi-grid` div (driven by an
inline `--cols-default` custom property), one level inside whatever element carries the class
below — so the layout rules here target that inner `.fi-grid`, not `.castellum-compose-header`
or `.castellum-compose-layout` themselves, and need !important to beat Filament's own
non-important rule that reads the inline custom property. */
.castellum-compose-header > .fi-grid {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
}

.castellum-compose-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.castellum-compose-title {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--castellum-text);
    font-family: var(--castellum-font-body);
}

.castellum-compose-description {
    margin: 0;
    font-size: 14px;
    color: var(--castellum-muted);
}

.castellum-compose-header-select {
    width: 100%;
    max-width: 320px;
}

@media (min-width: 1024px) {
    .castellum-compose-layout > .fi-grid {
        grid-template-columns: minmax(0, 1fr) 380px !important;
        align-items: start !important;
    }

    /* The Summary panel is the last (and only other) grid column in this layout. */
    .castellum-compose-layout > .fi-grid > .fi-grid-col:last-child {
        position: sticky;
        top: calc(var(--topbar-height, 4rem) + 24px);
    }
}

.castellum-channel-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 768px) {
    .castellum-channel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.castellum-channel-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    background: var(--castellum-ground);
    border: 1px solid var(--castellum-border);
}

.castellum-channel-card:has(.castellum-channel-card-input:checked) {
    background: color-mix(in srgb, var(--castellum-brand) 16%, transparent);
    border-color: var(--castellum-brand);
}

.castellum-channel-card:has(.castellum-channel-card-input:focus-visible) {
    outline: 2px solid var(--castellum-brand-light);
    outline-offset: 2px;
}

.castellum-channel-card-input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.castellum-channel-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--castellum-text);
}

.castellum-channel-card-hint {
    font-size: 13px;
    line-height: 1.4;
    color: var(--castellum-muted);
}

.castellum-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.castellum-sms-counter {
    font-size: 12px;
    color: var(--castellum-muted);
}

.castellum-attention-list,
.castellum-activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.castellum-attention-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    background: var(--castellum-raised);
}

.castellum-attention-dot {
    width: 8px;
    min-width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 999px;
}

.castellum-attention-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.castellum-attention-title {
    font-size: 14px;
    font-weight: 600;
}

.castellum-attention-detail {
    font-size: 13px;
    line-height: 1.45;
}

.castellum-activity-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.castellum-activity-meta {
    font-size: 12px;
}

.castellum-status-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.castellum-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.castellum-chart-empty {
    min-height: 150px;
    border-radius: 10px;
    border: 1px dashed var(--castellum-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    text-align: center;
}

.castellum-chart-empty-heading {
    font-size: 15px;
    font-weight: 600;
}

.castellum-chart-empty-description {
    font-size: 13px;
}

.castellum-chart-empty-action {
    color: var(--castellum-brand-light);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.castellum-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 700;
    color: var(--castellum-brand-light);
    background: color-mix(in srgb, var(--castellum-brand) 16%, transparent);
}

.castellum-unavailable-cell {
    display: flex;
    align-items: center;
    height: 100%;
    color: var(--castellum-muted);
    font-size: 13px;
}

.castellum-diff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.castellum-diff-table th,
.castellum-diff-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--castellum-border);
}

.castellum-diff-table th {
    color: var(--castellum-muted);
    font-weight: 500;
    background: var(--castellum-raised);
}

.castellum-diff-table td {
    color: var(--castellum-text);
}

a.castellum-attention-item {
    text-decoration: none;
    color: inherit;
}

a.castellum-attention-item:hover {
    background: var(--castellum-border);
}

/* .castellum-attention-body is a column flex container, which stretches children to its
   width by default — without this, the chip inherits that width instead of hugging its text. */
.castellum-attention-body .castellum-badge {
    align-self: flex-start;
}

/* CSS grid's default align-items: stretch otherwise forces the Messages sent chart to match
   Needs attention's height, which is what was blowing the chart's canvas up to ~800px tall.
   Filament renders the widgets grid's own `.fi-grid` one level inside the element carrying
   this class (see the castellum-compose-header comment above), never on it directly. */
.castellum-overview-widgets > .fi-grid {
    align-items: start;
}

/* A chart widget using both getFilters() and HasFiltersSchema (Messages sent, see
   MessagesSentChart) puts its select and its funnel trigger as two block-level siblings inside
   Filament's .fi-section-header-after-ctn, which Filament never makes a flex container itself —
   fine with only one filter kind, but with both the funnel stacks under the select and its
   self-centering negative margin pulls it up into the select instead of beside it. */
.fi-section-header-after-ctn:has(> .fi-wi-chart-filter.fi-input-wrp):has(> .fi-wi-chart-filter.fi-dropdown) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Below sm, the satellite home's Integrations grid shows a one-card-per-channel stack instead
   of the fixed-column grid, which otherwise squeezes every cell's text and action button. */
.castellum-integrations-grid-stacked {
    display: none;
}

@media (max-width: 640px) {
    .castellum-integrations-grid-desktop {
        display: none;
    }

    .castellum-integrations-grid-stacked {
        display: flex;
    }
}

/* The satellite home's tab bar (Overview/Environments/Integrations/Messages/Access) already
   scrolls horizontally via Filament's own .fi-tabs (overflow-x-auto); this only hides the
   scrollbar track so narrow viewports read as swipeable rather than visibly clipped. The
   marker class lands on Tabs's own .fi-sc-tabs wrapper, one level above the .fi-tabs nav
   itself (extraAttributes() never reaches it directly — see Tabs::toEmbeddedHtml()). */
.castellum-satellite-tabs .fi-tabs {
    scrollbar-width: none;
}

.castellum-satellite-tabs .fi-tabs::-webkit-scrollbar {
    display: none;
}

/* The wizard's Provider step: provider-radio-cards.blade.php renders the Radio field as bordered
   cards. Option validation (->in()) and disabling (disableOptionWhen()) are enforced by the Radio
   field itself, server-side — this file only styles the markup. */
.castellum-provider-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.castellum-provider-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--castellum-border);
    background: var(--castellum-ground);
    cursor: pointer;
}

.castellum-provider-card:has(.castellum-provider-card-input:checked) {
    background: color-mix(in srgb, var(--castellum-brand) 16%, transparent);
    border-color: var(--castellum-brand);
}

.castellum-provider-card:has(.castellum-provider-card-input:focus-visible) {
    outline: 2px solid var(--castellum-brand-light);
    outline-offset: 2px;
}

/* Covers both a provider marked "Coming soon" and the simulator disabled on a production
   environment — disableOptionWhen() puts both through the native `disabled` attribute. */
.castellum-provider-card:has(.castellum-provider-card-input:disabled) {
    cursor: not-allowed;
    opacity: 0.55;
}

.castellum-provider-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.castellum-provider-card-text > p:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--castellum-text);
}

.castellum-provider-card-description {
    font-size: 13px;
    line-height: 1.45;
}

/* Monitoring's error screens */

.castellum-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.castellum-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--castellum-border);
    border-radius: 999px;
    background: transparent;
    color: var(--castellum-muted);
    font-family: var(--castellum-font-body);
    font-size: 13px;
    cursor: pointer;
}

.castellum-pill:hover {
    color: var(--castellum-text);
}

.castellum-pill--active {
    border-color: var(--castellum-brand);
    color: var(--castellum-text);
    background: color-mix(in srgb, var(--castellum-brand) 14%, transparent);
}

.castellum-sparkline {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    width: 96px;
    height: 24px;
}

.castellum-sparkline__bar {
    flex: 1 1 0;
    min-width: 1px;
    border-radius: 1px;
    background: var(--castellum-brand-light);
}

.castellum-hour-chart__version {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--castellum-warning);
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.castellum-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 12px 0;
    font-size: 13px;
    color: var(--castellum-muted);
}

.castellum-chart-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.castellum-chart-key {
    display: inline-block;
    width: 10px;
    height: 10px;
}

.castellum-chart-key--events { background: var(--castellum-brand-light); }
.castellum-chart-key--version { width: 2px; background: var(--castellum-warning); }

.castellum-hour-chart__frame {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
}

.castellum-hour-chart__scale {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: right;
    font-size: 12px;
    color: var(--castellum-muted);
}

.castellum-hour-chart__plot {
    display: flex;
    height: 144px;
    border-top: 1px solid var(--castellum-border);
    border-bottom: 1px solid var(--castellum-border);
    background: linear-gradient(to bottom, transparent calc(50% - 1px), var(--castellum-border) 50%, transparent calc(50% + 1px));
}

.castellum-hour-chart__hour {
    position: relative;
    display: flex;
    align-items: flex-end;
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.castellum-hour-chart__hour:hover,
.castellum-hour-chart__hour:focus-visible { background: color-mix(in srgb, var(--castellum-brand) 24%, transparent); }
.castellum-hour-chart__hour:focus-visible { outline: 2px solid var(--castellum-text); z-index: 1; }
.castellum-hour-chart__bar { width: 100%; background: var(--castellum-brand-light); }

.castellum-hour-chart__dates {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    gap: 4px;
    font-size: 11px;
    color: var(--castellum-muted);
}

.castellum-hour-chart__detail { min-height: 2.5em; overflow-wrap: anywhere; font-size: 13px; }
.castellum-chart-versions { margin-top: 12px; font-size: 13px; }
.castellum-chart-versions summary { cursor: pointer; color: var(--castellum-muted); }
.castellum-chart-versions ul { padding-left: 20px; }

.castellum-chart-total { margin-left: auto; }
.castellum-chart-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; margin-top: 12px; }
.castellum-hour-chart__hour--selected { box-shadow: inset 0 0 0 2px var(--castellum-text); z-index: 1; }
.castellum-hour-chart__hour--selected .castellum-hour-chart__bar { background: var(--castellum-brand); }
.castellum-clipboard { display: inline-flex; align-items: center; }
.castellum-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Shared monitoring inspectors use the panel's controls and theme tokens. */
.castellum-monitoring-view { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.castellum-monitoring-view__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.castellum-monitoring-view__header > div { min-width: 0; }
.castellum-monitoring-view__header h1 { font-size: 26px; font-weight: 650; line-height: 1.3; letter-spacing: -0.5px; overflow-wrap: anywhere; }
.castellum-monitoring-view h2 { font-size: 14px; font-weight: 600; }
.castellum-monitoring-view h3 { font-size: 13px; font-weight: 600; }
.castellum-monitoring-view__badges { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 10px 0; font-size: 12px; color: var(--castellum-muted); }
.castellum-monitoring-view__header p { font-size: 12px; }
.castellum-monitoring-view__overview { background: color-mix(in srgb, var(--castellum-danger) 5%, var(--castellum-surface)); border: 1px solid var(--castellum-border); border-left: 3px solid var(--castellum-danger); border-radius: 10px; padding: 16px 20px; }
.castellum-monitoring-view__overview h2 { font-size: 11px; color: var(--castellum-muted); margin-bottom: 8px; }
.castellum-monitoring-view__overview pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.75; font-family: var(--castellum-font-mono); }
.castellum-monitoring-view__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; }
.castellum-monitoring-view__stats > div { border-right: 1px solid var(--castellum-border); padding-right: 12px; }
.castellum-monitoring-view__stats > div:last-child { border-right: 0; }
.castellum-monitoring-view__stats dt { color: var(--castellum-muted); font-size: 11px; }
.castellum-monitoring-view__stats dd { margin: 4px 0; font-size: 20px; line-height: 1.4; letter-spacing: -0.3px; }
.castellum-monitoring-view__stats small { color: var(--castellum-muted); font-size: 11px; }
.castellum-monitoring-view__range { width: 170px; max-width: 50%; }
.castellum-monitoring-view__chart .castellum-hour-chart__plot { height: 100px; }
.castellum-monitoring-view__chart .castellum-hour-chart__detail { min-height: 0; font-size: 11px; margin: 8px 0 0; }
.castellum-monitoring-view__investigation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.castellum-monitoring-view__samples, .castellum-monitoring-view__inspector { padding: 0; min-width: 0; overflow: hidden; }
.castellum-monitoring-view__inspector--sticky { position: sticky; top: 80px; }
.castellum-monitoring-view__samples .castellum-card-header { padding: 16px 18px; margin: 0; }
.castellum-monitoring-view__samples h2 span { font-weight: 400; font-size: 11px; margin-left: 6px; }
.castellum-monitoring-view__filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, 0.5fr); gap: 8px; padding: 0 18px 16px; }
.castellum-monitoring-view__filters > div { min-width: 0; }
.castellum-monitoring-view__list-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 18px; border-block: 1px solid var(--castellum-border); font-size: 11px; color: var(--castellum-muted); }
.castellum-monitoring-view__list-heading > div { max-width: 160px; }
.castellum-monitoring-view__sample-list { max-height: 430px; overflow-y: auto; }
.castellum-monitoring-view__sample { display: flex; flex-direction: column; gap: 7px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--castellum-border); padding: 14px 18px; background: transparent; cursor: pointer; }
.castellum-monitoring-view__sample:hover { background: color-mix(in srgb, var(--castellum-brand) 8%, transparent); }
.castellum-monitoring-view__sample--selected { background: color-mix(in srgb, var(--castellum-brand) 14%, transparent); box-shadow: inset 3px 0 var(--castellum-brand); }
.castellum-monitoring-view__sample:focus-visible { outline: 2px solid var(--castellum-brand); outline-offset: -3px; }
.castellum-monitoring-view__sample-time { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 12px; font-weight: 550; }
.castellum-monitoring-view__sample-time small { color: var(--castellum-muted); font-weight: 400; font-size: 10px; }
.castellum-monitoring-view__sample-host { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--castellum-muted); overflow-wrap: anywhere; }
.castellum-monitoring-view__sample-host .castellum-mono { font-size: 10px; }
.castellum-monitoring-view__list-footer { padding: 12px 18px; font-size: 10px; color: var(--castellum-muted); }
.castellum-monitoring-view__list-footer p { margin-top: 8px; }
.castellum-monitoring-view__empty { padding: 24px 18px; font-size: 12px; color: var(--castellum-muted); display: flex; flex-direction: column; gap: 10px; }
.castellum-monitoring-view__detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--castellum-border); }
.castellum-monitoring-view__detail-header > div { min-width: 0; }
.castellum-monitoring-view__detail-header p { font-size: 10px; margin-top: 4px; }
.castellum-monitoring-view__detail-header time { display: block; color: var(--castellum-muted); font-size: 10px; margin-top: 3px; }
.castellum-monitoring-view__detail-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 16px 18px; margin: 0; }
.castellum-monitoring-view__detail-facts dt { font-size: 10px; color: var(--castellum-muted); }
.castellum-monitoring-view__detail-facts dd { font-family: var(--castellum-font-mono); font-size: 11px; margin: 4px 0 0; overflow-wrap: anywhere; }
.castellum-monitoring-view__tabs { margin: 0 18px; }
.castellum-monitoring-view__detail-panel { padding: 16px 18px 22px; min-height: 200px; }
.castellum-monitoring-view__panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.castellum-monitoring-view__message { padding: 14px; background: var(--castellum-ground); border: 1px solid var(--castellum-border); border-radius: 8px; font-family: var(--castellum-font-mono); font-size: 12px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.castellum-monitoring-view__message--unwrapped { white-space: pre; overflow-x: auto; overflow-wrap: normal; }
.castellum-monitoring-view__detail-panel > .castellum-muted { font-size: 11px; line-height: 1.7; margin-top: 12px; }
.castellum-monitoring-view__context { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.castellum-monitoring-view__context > div { display: grid; grid-template-columns: minmax(90px, 0.6fr) minmax(0, 1fr); gap: 12px; font-size: 11px; }
.castellum-monitoring-view__context dt { color: var(--castellum-muted); overflow-wrap: anywhere; }
.castellum-monitoring-view__context dd { margin: 0; font-family: var(--castellum-font-mono); overflow-wrap: anywhere; }
.castellum-monitoring-view__loading { opacity: 0.55; pointer-events: none; }

@media (max-width: 1199px) {
    .castellum-monitoring-view__investigation { grid-template-columns: minmax(0, 1fr); }
    .castellum-monitoring-view__sample-list { max-height: 300px; }
}

@media (max-width: 640px) {
    .castellum-monitoring-view__header h1 { font-size: 22px; }
    .castellum-monitoring-view__header { flex-wrap: wrap; }
    .castellum-monitoring-view__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .castellum-monitoring-view__stats > div:nth-child(2) { border-right: 0; }
    .castellum-monitoring-view__stats dd { font-size: 17px; }
    .castellum-monitoring-view__overview { padding: 12px 14px; }
    .castellum-monitoring-view__overview pre { font-size: 11px; }
    .castellum-chart-footer { align-items: flex-start; }
    .castellum-chart-total { margin-left: 0; }
    .castellum-monitoring-view__detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .castellum-monitoring-view__detail-header { flex-wrap: wrap; }
}

.castellum-error-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px 20px;
    margin: 0;
}

.castellum-error-facts dt {
    color: var(--castellum-muted);
    font-size: 12px;
}

.castellum-error-facts dd {
    margin: 2px 0 0;
    color: var(--castellum-text);
}

.castellum-break {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.castellum-masked {
    color: var(--castellum-muted);
    font-style: italic;
}

.castellum-revealed {
    color: var(--castellum-warning);
}

.castellum-reveal {
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--castellum-brand-light);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.castellum-notice {
    padding: 8px 12px;
    border-left: 3px solid var(--castellum-warning);
    border-radius: 4px;
    color: var(--castellum-muted);
    background: color-mix(in srgb, var(--castellum-warning) 8%, transparent);
}

.castellum-sample {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.castellum-frames {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--castellum-font-mono);
    font-size: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.castellum-frames summary {
    color: var(--castellum-muted);
    cursor: pointer;
}

.castellum-sample-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Compact navigation preserves captured stack order. */
@media (min-width: 1200px) { .castellum-monitoring-view__investigation--narrow-list { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); } }
.castellum-frames--compact { padding: 0; margin: 12px 0; list-style: none; }
.castellum-frames--compact ul { list-style: none; padding: 0; }
.castellum-frames--compact li { margin: 0; }
.castellum-frames--compact button[data-stack-frame] { display: block; width: 100%; text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--castellum-border); overflow-wrap: anywhere; }
.castellum-frames--compact button[data-stack-frame][aria-pressed=true] { background: color-mix(in srgb, var(--castellum-brand) 14%, transparent); }
.castellum-frames--compact button[data-stack-frame]:focus-visible { outline: 2px solid var(--castellum-brand); }
.castellum-frames--compact button[data-stack-frame] > span:last-child { display: block; font-size: 10px; }
.castellum-monitoring-field small { color: var(--castellum-warning); margin-inline: 6px; }

/* These layouts are specific to captured exception links and frame selection. */
.castellum-monitoring-view__exception-layout { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; }
.castellum-monitoring-view__exception-layout > *, .castellum-monitoring-view__stack-layout > * { min-width: 0; }
.castellum-monitoring-view__chain { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.castellum-monitoring-view__chain .fi-btn { justify-content: flex-start; text-align: left; white-space: normal; }
.castellum-monitoring-view__exception-layout aside > p { font-size: 11px; line-height: 1.6; }
.castellum-monitoring-view__stack-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px; align-items: start; }
.castellum-monitoring-view__stack-layout aside .castellum-monitoring-view__context > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.castellum-monitoring-view__stack-layout aside h3 { overflow-wrap: anywhere; }
.castellum-monitoring-view__header .castellum-sample-nav { justify-content: flex-end; }
.castellum-monitoring-view__detail-header .castellum-sample-nav { justify-content: flex-end; }
@media (min-width: 640px) { .castellum-errors-panel td.castellum-error-title { min-width: 16rem; } }
@media (max-width: 1199px) { .castellum-monitoring-view__stack-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1199px) { .castellum-monitoring-view__exception-layout { grid-template-columns: minmax(0, 1fr); } .castellum-monitoring-view__chain { flex-direction: row; flex-wrap: wrap; } }

/* Preserve captured text, not the whitespace around its controls. */
.castellum-monitoring-field { white-space: normal; }
.castellum-monitoring-field__value { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Filament's stacked header overrides column breakpoints; keep headers aligned with their cells. */
.castellum-errors-panel .fi-ta-header-cell:is([class~="md:fi-visible"], [class~="xl:fi-visible"], [class~="2xl:fi-visible"]) { display: none; }
@media (min-width: 768px) { .castellum-errors-panel .fi-ta-header-cell[class~="md:fi-visible"] { display: table-cell; } }
@media (min-width: 1280px) { .castellum-errors-panel .fi-ta-header-cell[class~="xl:fi-visible"] { display: table-cell; } }
@media (min-width: 1536px) { .castellum-errors-panel .fi-ta-header-cell[class~="2xl:fi-visible"] { display: table-cell; } }

.castellum-monitoring-view__investigation--narrow-list .castellum-monitoring-view__filters { grid-template-columns: minmax(0, 1fr); }