/*
 * Styles for the two custom components: the Domain Mapper rows grid and the run
 * progress widget. Plain CSS on purpose — the app deploys without a node build, so
 * this file is served as-is and registered through FilamentAsset.
 */

/* ---------------------------------------------------------------- mapper grid */

.fi-rc-mapper-scroll {
    overflow-x: auto;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    background-color: #fff;
}

.dark .fi-rc-mapper-scroll {
    border-color: var(--gray-700);
    background-color: var(--gray-900);
}

.fi-rc-mapper-table {
    width: 100%;
    border-collapse: collapse;
}

.fi-rc-mapper-table th {
    padding: 0.5rem 0.75rem;
    text-align: start;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--gray-500);
    white-space: nowrap;
    border-bottom: 1px solid var(--gray-200);
}

.dark .fi-rc-mapper-table th {
    color: var(--gray-400);
    border-bottom-color: var(--gray-700);
}

.fi-rc-mapper-table td {
    padding: 0.375rem 0.5rem;
    vertical-align: middle;
}

.fi-rc-mapper-table td.fi-rc-col-wide,
.fi-rc-mapper-table th.fi-rc-col-wide {
    min-width: 20rem;
}

.fi-rc-mapper-table td:not(.fi-rc-col-wide) {
    min-width: 9rem;
}

.fi-rc-empty {
    padding: 1.5rem 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.fi-rc-mapper-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    align-items: start;
}

.fi-rc-hint {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--gray-500);
}

.dark .fi-rc-hint {
    color: var(--gray-400);
}

/* ------------------------------------------------------------ progress widget */

.fi-rc-progress {
    margin-bottom: 1.5rem;
}

.fi-rc-progress-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.fi-rc-progress-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.fi-rc-progress-count {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
}

.dark .fi-rc-progress-count {
    color: var(--gray-200);
}

.fi-rc-progress-bar {
    margin-top: 0.75rem;
    height: 0.5rem;
    border-radius: 999px;
    background-color: var(--gray-200);
    overflow: hidden;
}

.dark .fi-rc-progress-bar {
    background-color: var(--gray-700);
}

.fi-rc-progress-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background-color: var(--primary-500);
    transition: width 0.3s ease;
}

.fi-rc-banner {
    margin-top: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.fi-rc-banner ul {
    margin-top: 0.25rem;
    padding-inline-start: 1.1rem;
    list-style: disc;
}

.fi-rc-banner-danger {
    background-color: color-mix(in oklab, var(--danger-500) 12%, transparent);
    color: var(--danger-600);
}

.dark .fi-rc-banner-danger {
    color: var(--danger-400);
}

.fi-rc-banner-warning {
    background-color: color-mix(in oklab, var(--warning-500) 12%, transparent);
    color: var(--warning-600);
}

.dark .fi-rc-banner-warning {
    color: var(--warning-400);
}

/* ------------------------------------------------------------- summary tiles */

.fi-rc-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.fi-rc-tile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.875rem;
    text-align: start;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    background-color: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dark .fi-rc-tile {
    border-color: var(--gray-700);
    background-color: var(--gray-900);
}

.fi-rc-tile:hover {
    border-color: var(--gray-400);
}

.fi-rc-tile-active {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 1px var(--primary-500);
}

.fi-rc-tile-value {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.1;
}

.fi-rc-tile-success .fi-rc-tile-value {
    color: var(--success-600);
}

.fi-rc-tile-danger .fi-rc-tile-value {
    color: var(--danger-600);
}

.fi-rc-tile-warning .fi-rc-tile-value {
    color: var(--warning-600);
}

.dark .fi-rc-tile-success .fi-rc-tile-value {
    color: var(--success-400);
}

.dark .fi-rc-tile-danger .fi-rc-tile-value {
    color: var(--danger-400);
}

.dark .fi-rc-tile-warning .fi-rc-tile-value {
    color: var(--warning-400);
}

.fi-rc-tile-key {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.dark .fi-rc-tile-key {
    color: var(--gray-400);
}

/* A tile that only reports. It keeps the shape of the ones beside it without
   inviting a click that does nothing. */
.fi-rc-tile-static {
    cursor: default;
}

.fi-rc-tile-static:hover {
    border-color: var(--gray-200);
}

.dark .fi-rc-tile-static:hover {
    border-color: var(--gray-700);
}

/* Sitemap entries pointing at another host: set aside rather than followed, and
   said plainly because it is a finding about the site, not about the scan. */
.fi-rc-stray {
    margin-top: 1rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--warning-300);
    border-radius: 0.5rem;
    background-color: var(--warning-50);
    font-size: 0.8125rem;
    color: var(--warning-800);
}

.dark .fi-rc-stray {
    border-color: var(--warning-700);
    background-color: rgb(from var(--warning-500) r g b / 0.1);
    color: var(--warning-200);
}

.fi-rc-stray-title {
    font-weight: 600;
}

.fi-rc-stray ul {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.fi-rc-stray li {
    padding: 0.125rem 0;
    word-break: break-all;
}

.fi-rc-stray-site {
    font-weight: 600;
}

/* A plain data table inside a section, for the small summaries that are not
   worth a Filament table. There is no build step here, so utility classes in a
   Blade file resolve to nothing and every one of these needs real CSS. */
.fi-rc-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.fi-rc-grid th {
    padding: 0.5rem 0.75rem 0.5rem 0;
    text-align: start;
    font-weight: 600;
    white-space: nowrap;
    color: var(--gray-500);
    border-bottom: 1px solid var(--gray-200);
}

.fi-rc-grid td {
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.fi-rc-grid tr:last-child td {
    border-bottom: 0;
}

.dark .fi-rc-grid th {
    color: var(--gray-400);
    border-bottom-color: var(--gray-700);
}

.dark .fi-rc-grid td {
    border-bottom-color: var(--gray-800);
}

.fi-rc-grid-number {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.fi-rc-grid-name {
    font-weight: 600;
}

.fi-rc-grid-quiet {
    color: var(--gray-500);
}

.dark .fi-rc-grid-quiet {
    color: var(--gray-400);
}

.fi-rc-scroll {
    overflow-x: auto;
}

/* The explanatory list at the foot of a page. */
.fi-rc-notes {
    margin: 0;
    padding-inline-start: 1.25rem;
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.fi-rc-notes li + li {
    margin-top: 0.5rem;
}

.dark .fi-rc-notes {
    color: var(--gray-400);
}

/* The mapping table under a configuration's environment pair. */
.fi-rc-grid-url {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    word-break: break-all;
}

.fi-rc-grid-missing {
    font-size: 0.8125rem;
    color: var(--warning-600);
}

.dark .fi-rc-grid-missing {
    color: var(--warning-400);
}

.fi-rc-grid-note {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.dark .fi-rc-grid-note {
    color: var(--gray-400);
}

/* The row count in the table toolbar, beside the search field. */
.fi-ta-record-count {
    /* One gap, set here, rather than whatever the markup's whitespace
       collapsed to between each pair of parts. */
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    align-self: center;
    white-space: nowrap;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--gray-500);
}

.fi-ta-record-count strong {
    font-weight: 600;
    color: var(--gray-950);
}

.dark .fi-ta-record-count {
    color: var(--gray-400);
}

.dark .fi-ta-record-count strong {
    color: var(--white);
}

/* Sitemaps grouped by the environment they belong to. */
.fi-rc-sitemap-group + .fi-rc-sitemap-group {
    margin-top: 0.75rem;
}

.fi-rc-sitemap-env {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--gray-600);
}

.dark .fi-rc-sitemap-env {
    color: var(--gray-300);
}

.fi-rc-sitemap-read {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--primary-600);
}

.dark .fi-rc-sitemap-read {
    color: var(--primary-400);
}

/* The sitemaps a configuration will actually read, listed rather than counted. */
.fi-rc-urls {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--gray-500);
    word-break: break-all;
}

.fi-rc-urls li + li {
    margin-top: 0.25rem;
}

.dark .fi-rc-urls {
    color: var(--gray-400);
}

.fi-rc-urls .fi-rc-sitemap-skipped {
    text-decoration: line-through;
    color: var(--gray-400);
}

.dark .fi-rc-urls .fi-rc-sitemap-skipped {
    color: var(--gray-600);
}

.fi-rc-sitemap-skipped span {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0 0.375rem;
    border-radius: 0.25rem;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--warning-700);
    background-color: color-mix(in oklab, var(--warning-400) 20%, transparent);
}

.fi-rc-urls .fi-rc-sitemap-invalid {
    text-decoration: line-through;
    color: var(--gray-400);
}

.dark .fi-rc-urls .fi-rc-sitemap-invalid {
    color: var(--gray-600);
}

.fi-rc-sitemap-invalid span {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0 0.375rem;
    border-radius: 0.25rem;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--danger-700);
    background-color: color-mix(in oklab, var(--danger-400) 20%, transparent);
}

.dark .fi-rc-sitemap-invalid span {
    color: var(--danger-400);
    background-color: color-mix(in oklab, var(--danger-400) 15%, transparent);
}

.fi-rc-sitemap-off input {
    color: var(--gray-400);
    text-decoration: line-through;
}

.dark .fi-rc-sitemap-off input {
    color: var(--gray-500);
}

.fi-rc-sitemap-invalid-note {
    color: var(--danger-600);
}

.dark .fi-rc-sitemap-invalid-note {
    color: var(--danger-400);
}

.dark .fi-rc-sitemap-skipped span {
    color: var(--warning-400);
    background-color: color-mix(in oklab, var(--warning-400) 15%, transparent);
}

/* What a scan is doing, under the tiles. */
.fi-rc-scan-state {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.dark .fi-rc-scan-state {
    color: var(--gray-400);
}

.fi-rc-scan-failed {
    color: var(--danger-600);
}

.dark .fi-rc-scan-failed {
    color: var(--danger-400);
}

.fi-rc-spinner {
    width: 1rem;
    height: 1rem;
}

/* Where a link was found: the list behind the Where button. */
.fi-rc-where {
    font-size: 0.8125rem;
}

.fi-rc-where-count {
    margin: 0 0 0.5rem;
    color: var(--gray-500);
}

.dark .fi-rc-where-count {
    color: var(--gray-400);
}

.fi-rc-where-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fi-rc-where-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    border-top: 1px solid var(--gray-100);
}

.dark .fi-rc-where-list li {
    border-top-color: var(--gray-800);
}

.fi-rc-where-url {
    color: var(--primary-600);
    text-decoration: none;
    word-break: break-all;
}

.fi-rc-where-url:hover {
    text-decoration: underline;
}

.dark .fi-rc-where-url {
    color: var(--primary-400);
}

.fi-rc-where-anchor {
    color: var(--gray-500);
}

.dark .fi-rc-where-anchor {
    color: var(--gray-400);
}

/* ------------------------------------------------------------ live results feed */

.fi-rc-feed-section { margin-top: 1rem; }

.fi-rc-feed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.fi-rc-feed {
    /* Fixed height so the panel does not resize as lines arrive, and older lines
       scroll away the way a tailed log does. */
    max-height: 22rem;
    overflow: auto;
}

.fi-rc-feed-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    line-height: 1.5;
    /* Fixed layout: a column keeps its width whether or not the rows below it have
       a value, so a blank cell no longer drags everything along the row. */
    table-layout: fixed;
}

.fi-rc-feed-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: start;
    padding: 0.25rem 0.625rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
    background-color: var(--fi-section-bg, #fff);
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
}

.dark .fi-rc-feed-table th {
    color: var(--gray-400);
    background-color: var(--gray-900);
    border-bottom-color: var(--gray-700);
}

.fi-rc-feed-table td {
    padding: 0.3125rem 0.625rem;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .fi-rc-feed-table td { border-bottom-color: var(--gray-800); color: var(--gray-300); }
.fi-rc-feed-table tr:last-child td { border-bottom: 0; }

/* Narrow columns hold their width; the URL-ish ones share what is left. */
.fi-rc-feed-table th,
.fi-rc-feed-table td { width: 9rem; }
.fi-rc-feed-table th.fi-rc-feed-wide,
.fi-rc-feed-table td.fi-rc-feed-wide { width: auto; }

.fi-rc-feed-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.fi-rc-feed-blank { color: var(--gray-300); }
.dark .fi-rc-feed-blank { color: var(--gray-600); }

/* ---- the column picker ---------------------------------------------------- */

.fi-rc-columns-menu { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.375rem; }

.fi-rc-columns-title {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin: 0 0 0.25rem;
}

.fi-rc-columns-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    cursor: pointer;
}

.fi-rc-columns-menu .fi-rc-plus-text { margin-top: 0.5rem; align-self: flex-start; }

/* ------------------------------------------------------------ HTTP status chips */

.fi-rc-statuses {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--gray-200);
}

.dark .fi-rc-statuses {
    border-top-color: var(--gray-700);
}

.fi-rc-statuses-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-inline-end: 0.25rem;
}

.dark .fi-rc-statuses-label {
    color: var(--gray-400);
}

.fi-rc-status {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4375rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    background-color: #fff;
    cursor: pointer;
    font-size: 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dark .fi-rc-status {
    border-color: var(--gray-700);
    background-color: var(--gray-900);
}

.fi-rc-status:hover {
    border-color: var(--gray-400);
}

.fi-rc-status-active {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 1px var(--primary-500);
}

.fi-rc-status-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
}

.fi-rc-status-count {
    color: var(--gray-500);
}

.dark .fi-rc-status-count {
    color: var(--gray-400);
}

.fi-rc-status-success .fi-rc-status-code {
    color: var(--success-600);
}

.fi-rc-status-info .fi-rc-status-code {
    color: var(--info-600);
}

.fi-rc-status-danger .fi-rc-status-code {
    color: var(--danger-600);
}

.dark .fi-rc-status-success .fi-rc-status-code {
    color: var(--success-400);
}

.dark .fi-rc-status-info .fi-rc-status-code {
    color: var(--info-400);
}

.dark .fi-rc-status-danger .fi-rc-status-code {
    color: var(--danger-400);
}

/* ---------------------------------------------------------------- rule builder */

.fi-rc-help {
    list-style: disc;
    padding-inline-start: 1.15rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--gray-600);
}

.dark .fi-rc-help { color: var(--gray-300); }
.fi-rc-help li + li { margin-top: 0.375rem; }

/* ---- the rule card -------------------------------------------------------- */

.fi-rc-rule-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    width: 100%;
}

.fi-rc-rule-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background-color: var(--gray-200);
    color: var(--gray-600);
    font-size: 0.6875rem;
    font-weight: 700;
}

.dark .fi-rc-rule-number { background-color: var(--gray-700); color: var(--gray-300); }

.fi-rc-rule-name { flex: 1 1 16rem; min-width: 12rem; font-weight: 600; }
.fi-rc-rule-actions { display: flex; gap: 0.25rem; margin-inline-start: auto; }

.fi-rc-enabled {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--gray-500);
    white-space: nowrap;
}

.dark .fi-rc-enabled { color: var(--gray-400); }

/* ---- the summary: every rule, in the order it runs ------------------------ */

.fi-rc-overview {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fi-rc-overview-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--gray-100);
}

.dark .fi-rc-overview-row { border-bottom-color: var(--gray-800); }
.fi-rc-overview-row:last-child { border-bottom: 0; }

/* A disabled rule stays legible — you need to read it to decide to switch it on. */
.fi-rc-overview-off { opacity: 0.55; }

.fi-rc-overview-name {
    flex: 0 1 12rem;
    min-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-800);
    text-decoration: none;
}

.fi-rc-overview-name:hover { color: var(--primary-600); text-decoration: underline; }
.dark .fi-rc-overview-name { color: var(--gray-100); }
.dark .fi-rc-overview-name:hover { color: var(--primary-400); }

/* The sentence takes what is left, and truncates rather than wrapping, so every
   rule stays one row and the set can be read down the page. */
.fi-rc-overview-sentence {
    flex: 1 1 20rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--gray-600);
}

.dark .fi-rc-overview-sentence { color: var(--gray-300); }

/* ---- the sentence --------------------------------------------------------- */

.fi-rc-sentence {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    line-height: 2.25;
}

.fi-rc-word {
    font-size: 0.8125rem;
    color: var(--gray-600);
    white-space: nowrap;
}

.fi-rc-word-faint { font-size: 0.75rem; color: var(--gray-400); }
.dark .fi-rc-word { color: var(--gray-300); }

/* Inline controls sized to their content, so a condition reads as a line of prose
   rather than a row of form fields. */
.fi-rc-token {
    display: inline-block;
    width: auto;
    min-width: 0;
    padding-block: 0.25rem;
    padding-inline: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.fi-rc-token-column { max-width: 16rem; }
.fi-rc-token-op { max-width: 15rem; }
.fi-rc-token-src { max-width: 9rem; }
.fi-rc-token-match { max-width: 6rem; font-weight: 700; }
.fi-rc-token-value { width: 12rem; }
.fi-rc-token-answer { width: 15rem; }
.fi-rc-token-list { width: 14rem; line-height: 1.3; }

/* ---- groups and nesting --------------------------------------------------- */

.fi-rc-group-root { margin-bottom: 0.5rem; }

.fi-rc-group-nested {
    margin-block: 0.25rem;
    padding-inline-start: 0.75rem;
    border-inline-start: 2px dashed var(--gray-300);
}

.dark .fi-rc-group-nested { border-inline-start-color: var(--gray-600); }

/* Each level of nesting steps in, so the shape of the logic is visible. */
.fi-rc-children {
    padding-inline-start: 1.25rem;
    border-inline-start: 2px solid var(--gray-200);
    margin-inline-start: 0.375rem;
}

.dark .fi-rc-children { border-inline-start-color: var(--gray-700); }

.fi-rc-condition { padding-block: 0.125rem; }

/* ---- add and remove affordances ------------------------------------------- */

.fi-rc-add {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-block: 0.25rem;
}

.fi-rc-plus {
    color: var(--success-600);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}

.fi-rc-plus-text {
    background: none;
    border: 0;
    padding: 0;
    font-size: 0.75rem;
    color: var(--primary-600);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fi-rc-plus-text:hover { color: var(--primary-500); }
.dark .fi-rc-plus { color: var(--success-400); }
.dark .fi-rc-plus-text { color: var(--primary-400); }

.fi-rc-x {
    background: none;
    border: 0;
    padding: 0 0.25rem;
    font-size: 1rem;
    line-height: 1;
    color: var(--gray-400);
    cursor: pointer;
}

.fi-rc-x:hover { color: var(--danger-600); }
.dark .fi-rc-x:hover { color: var(--danger-400); }

/* ---- actions -------------------------------------------------------------- */

.fi-rc-actions {
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--gray-200);
}

.dark .fi-rc-actions { border-top-color: var(--gray-700); }
.fi-rc-actions-head { margin-bottom: 0.25rem; }
.fi-rc-actions-head .fi-rc-word { font-weight: 600; }
.fi-rc-action { padding-inline-start: 1.25rem; }

.fi-rc-empty-rules {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    text-align: center;
    padding: 1.5rem 1rem;
}

.fi-rc-empty-rules .fi-rc-hint { max-width: 34rem; }

/* ------------------------------------------------------------- rule colours */

/*
 * The colours themselves are registered Filament colours, so a value shows as an
 * ordinary badge and needs nothing here. Only the swatch does, and it reads
 * Filament's own --{name}-500 variable rather than defining anything of its own.
 */

.fi-rc-palette { display: inline-flex; gap: 0.25rem; align-items: center; }

.fi-rc-swatch {
    width: 1rem;
    height: 1rem;
    padding: 0;
    border-radius: 999px;
    cursor: pointer;
    background-color: var(--rc-swatch);
    border: 1px solid color-mix(in oklab, var(--rc-swatch) 70%, black);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.fi-rc-swatch:hover { transform: scale(1.15); }

.fi-rc-swatch-on {
    box-shadow: 0 0 0 2px var(--gray-50), 0 0 0 4px var(--rc-swatch);
    transform: scale(1.15);
}

.dark .fi-rc-swatch-on { box-shadow: 0 0 0 2px var(--gray-900), 0 0 0 4px var(--rc-swatch); }

/*
 * A rule in the filter builder, expanded.
 *
 * Filament's rule builder ships with block headers off, so it draws a clone
 * and a delete button inside every rule. The header is on here — it is what
 * carries the rule's summary, and its buttons are the ones that survive
 * collapsing — which leaves the same pair twice, a few pixels apart. The
 * header keeps them and the body is left as the editor, the way an expanded
 * accordion row reads anywhere else.
 *
 * The second rule puts back the one that is not a duplicate: the button that
 * removes a group from an OR, which lives in a repeater and has no header of
 * its own.
 */
.fi-fo-builder-item-content .fi-sc-actions { display: none; }
.fi-fo-builder-item-content .fi-fo-repeater .fi-sc-actions { display: revert; }