/*
 * Mar Mina Church — one panel, burgundy and liturgical gold.
 * Tokens are defined for light and for Filament's .dark mode; components use tokens only.
 * Signature: a status edge on family cards and form fields (the coloured inline-start rule).
 */
:root {
    --mm-canvas: #f8f4f4;
    --mm-surface: #ffffff;
    --mm-sunken: #f3ecec;
    --mm-ink: #2b1d1f;
    --mm-muted: #6f5b5e;
    --mm-line: #e6dada;
    --mm-line-strong: #cdb9bb;
    --mm-burgundy: #7a1e2c;
    --mm-burgundy-strong: #5e1621;
    --mm-burgundy-ink: #7a1e2c;
    --mm-burgundy-tint: #f6e9eb;
    --mm-on-burgundy: #ffffff;
    --mm-gold: #b08a3e;
    --mm-gold-ink: #7f6224;
    --mm-gold-tint: #f7f0df;
    --mm-ok: #2f6b4f;
    --mm-ok-tint: #e7f2ec;
    --mm-danger: #b42318;
    --mm-danger-tint: #fdecea;
    --mm-radius: .75rem;
    --mm-shadow: 0 1px 2px rgb(43 29 31 / .06), 0 6px 18px rgb(43 29 31 / .05);
    --mm-display: "Amiri", "IBM Plex Sans Arabic", serif;
}
.dark {
    --mm-canvas: #161012;
    --mm-surface: #211819;
    --mm-sunken: #1b1415;
    --mm-ink: #f2e8e6;
    --mm-muted: #bfaaa9;
    --mm-line: #3d2e30;
    --mm-line-strong: #5a4447;
    --mm-burgundy: #9b2e3f;
    --mm-burgundy-strong: #b33a4c;
    --mm-burgundy-ink: #ee9aa7;
    --mm-burgundy-tint: #3a1e24;
    --mm-on-burgundy: #ffffff;
    --mm-gold: #d9b46a;
    --mm-gold-ink: #e3c47f;
    --mm-gold-tint: #33291a;
    --mm-ok: #8fd3ae;
    --mm-ok-tint: #1c3328;
    --mm-danger: #f2918a;
    --mm-danger-tint: #3b1a1a;
    --mm-shadow: 0 1px 2px rgb(0 0 0 / .3);
}

/* Panel frame */
.fi-body { background: var(--mm-canvas); }
.fi-logo { font-family: var(--mm-display); font-size: 1.45rem; color: var(--mm-burgundy-ink); letter-spacing: 0; }
.fi-header-heading { font-family: var(--mm-display); font-weight: 700; color: var(--mm-ink); }
.fi-header-subheading { color: var(--mm-muted); max-width: 60ch; }
.fi-header { padding-block-end: .85rem; border-block-end: 3px double var(--mm-gold); }

/* Shared building blocks */
.cleanup { color: var(--mm-ink); font-size: 1rem; line-height: 1.8; overflow-wrap: anywhere; inline-size: 100%; }
.cleanup *, .cleanup *::before, .cleanup *::after { box-sizing: border-box; min-width: 0; }
.cleanup h2 { font-size: 1.1rem; font-weight: 700; line-height: 1.6; }
.cleanup label { display: block; font-weight: 600; font-size: .9rem; color: var(--mm-ink); margin-block-start: .4rem; }
.cleanup input:not([type=checkbox]):not([type=radio]):not([type=file]), .cleanup select, .cleanup textarea {
    display: block; inline-size: 100%; min-block-size: 44px; margin-block: .3rem .75rem;
    border: 1px solid var(--mm-line-strong); border-radius: .55rem; padding: .55rem .75rem;
    background: var(--mm-surface); color: var(--mm-ink); font: inherit;
}
.cleanup select { padding-inline-end: 2rem; }
.cleanup input[type=file] { display: block; inline-size: 100%; margin-block: .3rem .75rem; font-size: .9rem; color: var(--mm-muted); }
.cleanup input[type=checkbox] { accent-color: var(--mm-burgundy); inline-size: 1.15rem; block-size: 1.15rem; vertical-align: middle; margin-inline-end: .4rem; }
.cleanup input::placeholder, .cleanup textarea::placeholder { color: var(--mm-muted); opacity: .8; }
.cleanup input:focus, .cleanup select:focus, .cleanup textarea:focus { outline: none; border-color: var(--mm-burgundy-ink); box-shadow: 0 0 0 3px var(--mm-burgundy-tint); }
.cleanup :is(button, a, summary):focus-visible { outline: 2px solid var(--mm-gold); outline-offset: 2px; }
.cleanup a { color: var(--mm-burgundy-ink); }

.cleanup button, .cleanup .cleanup-button-primary, .cleanup .cleanup-button-quiet, .cleanup .cleanup-button-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-block-size: 44px; padding: .55rem 1rem; border-radius: .55rem; border: 1px solid var(--mm-line-strong);
    background: var(--mm-surface); color: var(--mm-burgundy-ink); font: inherit; font-weight: 600; font-size: .95rem;
    text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.cleanup button:hover, .cleanup .cleanup-button-quiet:hover { background: var(--mm-burgundy-tint); border-color: var(--mm-burgundy-ink); }
.cleanup .cleanup-button-primary { background: var(--mm-burgundy); border-color: var(--mm-burgundy); color: var(--mm-on-burgundy); }
.cleanup .cleanup-button-primary:hover { background: var(--mm-burgundy-strong); border-color: var(--mm-burgundy-strong); }
.cleanup .cleanup-button-danger { color: var(--mm-danger); border-color: var(--mm-danger); }
.cleanup .cleanup-button-danger:hover { background: var(--mm-danger-tint); }
.cleanup button:disabled { opacity: .45; cursor: default; }
.cleanup-buttons { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-block: .75rem; }

.cleanup-card { background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 1.1rem 1.25rem; margin-block: 1rem; box-shadow: var(--mm-shadow); }
.cleanup-card > h2:first-child { margin-block-end: .35rem; }
.cleanup-hint { color: var(--mm-muted); font-size: .9rem; }
.cleanup-footnote { color: var(--mm-muted); font-size: .8rem; margin-block-start: 2rem; padding-block-start: .75rem; border-block-start: 1px solid var(--mm-line); }
.cleanup-chip { display: inline-block; padding: 0 .55rem; border-radius: 999px; background: var(--mm-sunken); color: var(--mm-muted); font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-inline-start: .35rem; }
.cleanup-code { font-variant-numeric: tabular-nums; letter-spacing: .02em; background: var(--mm-sunken); border-radius: .35rem; padding: 0 .4rem; font-size: .85em; unicode-bidi: isolate; }
.cleanup-notice { background: var(--mm-gold-tint); border: 1px solid var(--mm-gold); border-radius: .6rem; padding: .75rem 1rem; margin-block: .75rem; }
.cleanup-error { background: var(--mm-danger-tint); border: 1px solid var(--mm-danger); color: var(--mm-ink); border-radius: .6rem; padding: .75rem 1rem; margin-block: .75rem; }
.cleanup-error h2 { color: var(--mm-danger); }
.cleanup-warn { color: var(--mm-danger); font-weight: 600; }
.cleanup-check { display: flex !important; align-items: center; gap: .25rem; font-weight: 500 !important; }

.cleanup details > summary { cursor: pointer; min-block-size: 44px; display: flex; align-items: center; gap: .35rem; font-weight: 700; list-style: none; padding-block: .5rem; }
.cleanup details > summary::-webkit-details-marker { display: none; }
.cleanup details > summary::before { content: "‹"; display: inline-block; inline-size: 1rem; color: var(--mm-gold-ink); font-size: 1.2rem; line-height: 1; transition: transform .15s; }
.cleanup details[open] > summary::before { transform: rotate(-90deg); }
.cleanup-disclosure { border-block-start: 1px solid var(--mm-line); }
.cleanup-disclosure > summary { font-weight: 600; }

/* Lists: toolbar, results and family cards */
.cleanup-toolbar { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) auto; gap: .75rem 1rem; align-items: end; }
.cleanup-toolbar label { font-size: .82rem; color: var(--mm-muted); }
.cleanup-toolbar input, .cleanup-toolbar select { margin-block-end: 0 !important; }
.cleanup-toolbar-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.cleanup-results-head { display: flex; align-items: baseline; justify-content: space-between; margin-block: 1.4rem .6rem; min-block-size: 1.5rem; }
.cleanup-count { color: var(--mm-muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.cleanup-count-loading { opacity: .5; }
.cleanup-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }

.cleanup-case {
    --edge: var(--mm-gold);
    display: flex; flex-direction: column; gap: .3rem; position: relative;
    background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: var(--mm-radius);
    padding: 1rem 1.25rem .5rem; box-shadow: var(--mm-shadow);
    border-inline-start: 5px solid var(--edge);
}
.cleanup-case[data-state=mine] { --edge: var(--mm-burgundy); }
.cleanup-case[data-state=taken] { --edge: var(--mm-line-strong); }
.cleanup-case[data-state=published] { --edge: var(--mm-ok); }
.cleanup-case[data-state=merged] { --edge: var(--mm-muted); }
.cleanup-case header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.cleanup-case h2 { font-size: 1.12rem; }
.cleanup-state { flex-shrink: 0; font-size: .75rem; font-weight: 700; padding: .1rem .6rem; border-radius: 999px; background: var(--mm-gold-tint); color: var(--mm-gold-ink); white-space: nowrap; margin-block-start: .2rem; }
.cleanup-case[data-state=mine] .cleanup-state { background: var(--mm-burgundy-tint); color: var(--mm-burgundy-ink); }
.cleanup-case[data-state=taken] .cleanup-state, .cleanup-case[data-state=merged] .cleanup-state { background: var(--mm-sunken); color: var(--mm-muted); }
.cleanup-case[data-state=published] .cleanup-state { background: var(--mm-ok-tint); color: var(--mm-ok); }
.cleanup-case-place { color: var(--mm-muted); font-size: .9rem; }
.cleanup-case-source { font-size: .8rem; font-weight: 600; color: var(--mm-gold-ink); }
.cleanup-case-members { font-size: .95rem; }
.cleanup-more { color: var(--mm-muted); font-size: .85rem; }
.cleanup-case-phones { color: var(--mm-muted); font-size: .88rem; font-variant-numeric: tabular-nums; text-align: end; }
.cleanup-match { font-size: .8rem; color: var(--mm-gold-ink); }
.cleanup-case footer { margin-block-start: auto; padding-block-start: .5rem; border-block-start: 1px dashed var(--mm-line); }

.cleanup-empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1.5rem; border: 1px dashed var(--mm-line-strong); border-radius: var(--mm-radius); background: var(--mm-surface); }
.cleanup-empty h2 { font-family: var(--mm-display); font-size: 1.35rem; color: var(--mm-burgundy-ink); }
.cleanup-empty p { color: var(--mm-muted); margin-block: .35rem 1rem; }
.cleanup-pager { display: flex; justify-content: center; align-items: center; gap: .75rem; margin-block: 1.5rem; font-variant-numeric: tabular-nums; }

/* Agent access */
.cleanup-token { font-family: ui-monospace, monospace; font-size: .85rem; background: var(--mm-surface); border: 1px solid var(--mm-line); border-radius: .4rem; padding: .5rem .75rem; word-break: break-all; }
.cleanup-grant { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: .75rem; border-block-start: 1px solid var(--mm-line); }

/* Family form */
.cleanup-family-head { margin-block-end: .5rem; }
.cleanup-family-meta { color: var(--mm-muted); font-size: .9rem; }
.cleanup-savebar {
    position: sticky; top: 4.25rem; z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--mm-surface); border: 1px solid var(--mm-line); border-block-end: 3px solid var(--mm-gold);
    border-radius: var(--mm-radius); padding: .7rem 1rem; margin-block: .75rem 1rem; box-shadow: var(--mm-shadow);
}
.cleanup-savebar p { margin: 0; }
.cleanup-savebar-status { flex: 1; font-size: .9rem; }
.cleanup-savebar-status [role=status] { font-weight: 700; }
.cleanup-savebar-progress, .cleanup-savebar-states { color: var(--mm-muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.cleanup-progress { block-size: 6px; border-radius: 999px; background: var(--mm-sunken); overflow: hidden; margin-block: .3rem; max-inline-size: 28rem; }
.cleanup-progress span { display: block; block-size: 100%; background: var(--mm-gold); border-radius: inherit; transition: inline-size .3s; }
.cleanup-reference { max-inline-size: 48rem; }
.cleanup-section > summary { font-size: 1.05rem; }
.cleanup-section[open] > summary { border-block-end: 1px solid var(--mm-line); margin-block-end: .75rem; }
.cleanup-identity { background: var(--mm-sunken); border-radius: .6rem; padding: .5rem 1rem; margin-block-end: 1rem; }
.cleanup-field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }

.cleanup-fact {
    --edge: var(--mm-gold);
    background: var(--mm-surface); border: 1px solid var(--mm-line); border-inline-start: 4px solid var(--edge);
    border-radius: .6rem; padding: .5rem .75rem .25rem;
}
.cleanup-fact[data-state=unanswered] { border-inline-start-style: dashed; }
.cleanup-fact[data-state=known] { --edge: var(--mm-burgundy); }
.cleanup-fact[data-state=unknown], .cleanup-fact[data-state=not_applicable] { --edge: var(--mm-line-strong); }
.cleanup-fact[data-state=conflicting] { --edge: var(--mm-danger); background: var(--mm-danger-tint); }
.cleanup-fact > label:first-child { margin-block-start: 0; }
.cleanup-fact select[id$="-state"] { font-size: .88rem; min-block-size: 38px; padding-block: .3rem; background: var(--mm-sunken); }
.cleanup-fact-evidence > summary { font-size: .82rem; font-weight: 600; color: var(--mm-muted); min-block-size: 36px; }
.cleanup-publish { border-block-start: 3px solid var(--mm-burgundy); }
.cleanup-confirm { background: var(--mm-gold-tint); border: 1px solid var(--mm-gold); border-radius: .6rem; padding: 1rem; margin-block-start: .75rem; }
.cleanup fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.cleanup fieldset:disabled { opacity: .85; }

/* Evidence */
.cleanup-evidence { white-space: pre-wrap; word-break: break-word; max-block-size: 24rem; overflow: auto; font-family: inherit; padding: .75rem; background: var(--mm-sunken); border-radius: .5rem; font-size: .85rem; }
.cleanup-evidence-values { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .15rem 1rem; font-size: .9rem; }
.cleanup-evidence-values dt { font-weight: 600; color: var(--mm-muted); }
.cleanup-evidence-values dd { margin: 0; white-space: pre-wrap; }
.cleanup-evidence-values ul { margin: 0; padding: 0; list-style: none; }
.cleanup-source-image { max-inline-size: 100%; max-block-size: 28rem; object-fit: contain; border-radius: .5rem; }

@media (max-width: 900px) {
    .cleanup-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .cleanup-search { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .cleanup-toolbar { grid-template-columns: 1fr; }
    .cleanup-toolbar-actions > * { flex: 1; }
    .cleanup-cards, .cleanup-field-grid { grid-template-columns: 1fr; }
    .cleanup-card { padding: .85rem; }
    .cleanup-savebar { position: static; flex-direction: column; align-items: stretch; }
    .cleanup-evidence-values { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .cleanup *, .cleanup *::before { transition: none !important; }
}
.cleanup-required { display: inline-block; margin-inline-start: .35rem; padding: 0 .45rem; border-radius: 999px; background: var(--mm-burgundy-tint); color: var(--mm-burgundy-ink); font-size: .72rem; font-weight: 700; vertical-align: middle; }
.cleanup-optional { margin-block-start: .75rem; border-block-start: 1px dashed var(--mm-line); }
.cleanup-optional > summary { font-weight: 600; color: var(--mm-muted); }
.cleanup-fact:not(:has(.cleanup-required))[data-state=unanswered] { --edge: var(--mm-line); }
