/* Filo design tokens — the wireframe's design language (slate canvas, indigo
   accent) expressed as CSS variables so every component shares one palette.
   Light is the default (:root); dark is a parallel value set on
   :root[data-theme="dark"], opt-in via the no-FOUC head script in App.razor.
   That script always writes an explicit data-theme, so it is the single theme
   resolver — there is no @media (prefers-color-scheme) block. color-scheme
   makes native controls (scrollbars, date pickers, autofill) follow the theme. */
:root {
    color-scheme: light;

    /* Core palette (slate canvas, indigo accent — wireframe). */
    --filo-bg: #f8fafc;        /* slate-50 canvas */
    --filo-surface: #ffffff;
    --filo-border: #e2e8f0;    /* slate-200 */
    --filo-border-soft: #eef2f6;
    --filo-text: #0f172a;      /* slate-900 */
    --filo-muted: #64748b;     /* slate-500 */
    --filo-faint: #94a3b8;     /* slate-400 */

    /* Accent splits into roles: a fill under white text (--filo-accent), a
       foreground for icons/glyphs/focus borders (--filo-accent-fg), text on
       surfaces (--filo-accent-text), and a darker hover fill (--filo-accent-hover).
       In light they coincide; they diverge for the dark contrast constraint
       (one indigo-600 as a dark foreground is ~2.8:1 — DM-1 §B.2). */
    --filo-accent: #4f46e5;       /* indigo-600 — fills only (white text on top) */
    --filo-accent-weak: #eef2ff;  /* indigo-50 — active-nav / checked-card tint */
    --filo-accent-text: #4338ca;  /* indigo-700 — text on surfaces */
    --filo-accent-hover: #4338ca; /* indigo-700 — primary/CTA/auth hover fill */
    --filo-accent-fg: #4f46e5;    /* indigo-600 — foreground accent (icons, focus borders) */
    --filo-accent-tint: #e0e7ff;  /* indigo-100 — brand/auth-mark background */
    --filo-focus-ring: #c7d2fe;   /* indigo-200 — box-shadow focus halo */

    --filo-danger: #dc2626;       /* text only */
    --filo-danger-fill: #dc2626;  /* red fill under white text (error boundary) */

    --filo-on-accent: #ffffff;    /* text on indigo fills */
    --filo-hover: #f1f5f9;        /* slate-100 — row/button/menu hover */
    --filo-thread-bg: #f8fafc;    /* slate-50 — thead / recessed head */
    --filo-surface-sunken: #f6f6f7; /* recessed inset (on a card surface only) */
    --filo-scrim: rgba(15, 23, 42, 0.5);
    --filo-avatar-bg: #e2e8f0;

    /* Status badges — hue kept, lightness flipped per theme (each has bg + fg). */
    --filo-success-bg: #dcfce7; --filo-success-fg: #15803d;
    --filo-danger-bg: #fef2f2;  --filo-danger-fg: #b91c1c; --filo-danger-border: #fecaca;
    /* Warning surfaces read YELLOW, not brown: a yellow-100 tint + yellow-300
       border carry the colour; body text stays neutral (--filo-text) and the fg
       is icon/emphasis-grade amber only — never paragraph text (amber-700 as
       running text is the brown that prompted this fix). */
    --filo-warning-bg: #fef9c3; --filo-warning-fg: #ca6b06; --filo-warning-border: #fde047;
    --filo-badge-neutral-bg: #f1f5f9;
    --filo-valid: #16a34a;
    --filo-teal: #14b8a6;

    /* Commitment-direction marks ("they owe me" orange / "I owe them" blue) —
       mark glyph vs badge text use adjacent shades, so each has its own token. */
    --filo-direction-owing-bg: #ffedd5; --filo-direction-owing-fg: #ea580c; --filo-direction-owing-fg-strong: #c2410c;
    --filo-direction-owed-bg: #dbeafe;  --filo-direction-owed-fg: #2563eb;  --filo-direction-owed-fg-strong: #1d4ed8;

    /* The dashboard Cashflow widget — the one deliberately-dark card. Its own
       slate gradient + bright sign colours in both themes (dark lifts the
       gradient so the card stays distinct on the dark canvas). */
    --filo-cf-from: #0f172a; --filo-cf-to: #1e293b;
    --filo-cf-text: #ffffff; --filo-cf-label: #cbd5e1; --filo-cf-faint: #94a3b8;
    --filo-cf-divider: rgba(148, 163, 184, 0.3);
    --filo-cf-positive: #86efac; --filo-cf-negative: #fca5a5;
    --filo-cf-action: rgba(255, 255, 255, 0.1); --filo-cf-action-hover: rgba(255, 255, 255, 0.2);
    --filo-cf-shadow: 0 4px 6px rgba(15, 23, 42, 0.12);

    /* Blazor error surfaces (rare; deepened on dark). */
    --filo-error-ui-bg: lightyellow;
    --filo-error-ui-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);

    --filo-radius: 0.75rem;
    --filo-radius-sm: 0.5rem;
    --filo-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    --filo-sidebar-w: 16rem;
    --filo-header-h: 4rem;
}

/* Dark theme — the same tokens, parallel values (DM-1 §B.1/§B.2). The head
   script always writes data-theme, so this is the only dark override layer. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --filo-bg: #0b1220;
    --filo-surface: #121a2b;
    --filo-border: #283449;
    --filo-border-soft: #1c2638;
    --filo-text: #e6edf6;
    --filo-muted: #9aa7bd;
    --filo-faint: #8b98ae;

    --filo-accent: #4f46e5;
    --filo-accent-weak: #1e1b4b;
    --filo-accent-text: #a5b4fc;
    --filo-accent-hover: #4338ca;
    --filo-accent-fg: #a5b4fc;
    --filo-accent-tint: #1e1b4b;
    --filo-focus-ring: #a5b4fc;

    --filo-danger: #f87171;
    --filo-danger-fill: #dc2626;

    --filo-on-accent: #ffffff;
    --filo-hover: #1b2438;
    --filo-thread-bg: #0e1626;
    --filo-surface-sunken: #0d1422;
    --filo-scrim: rgba(0, 0, 0, 0.6);
    --filo-avatar-bg: #283449;

    --filo-success-bg: #052e16; --filo-success-fg: #4ade80;
    --filo-danger-bg: #450a0a;  --filo-danger-fg: #fca5a5; --filo-danger-border: #7f1d1d;
    /* Dark warning: darkened yellows all read brown/olive on this canvas, so the
       surface stays NAVY (a lift off --filo-surface) and the gold border + amber
       icon carry the warning; body text stays neutral. */
    --filo-warning-bg: #1f2433; --filo-warning-fg: #fbbf24; --filo-warning-border: #8a6d1a;
    --filo-badge-neutral-bg: #1b2438;
    --filo-valid: #4ade80;
    --filo-teal: #2dd4bf;

    --filo-direction-owing-bg: #2a1607; --filo-direction-owing-fg: #fb923c; --filo-direction-owing-fg-strong: #fdba74;
    --filo-direction-owed-bg: #0c1a3a;  --filo-direction-owed-fg: #60a5fa;  --filo-direction-owed-fg-strong: #93c5fd;

    --filo-cf-from: #1e293b; --filo-cf-to: #334155;
    --filo-cf-text: #ffffff; --filo-cf-label: #cbd5e1; --filo-cf-faint: #94a3b8;
    --filo-cf-divider: rgba(148, 163, 184, 0.3);
    --filo-cf-positive: #86efac; --filo-cf-negative: #fca5a5;
    --filo-cf-action: rgba(255, 255, 255, 0.1); --filo-cf-action-hover: rgba(255, 255, 255, 0.2);
    --filo-cf-shadow: 0 4px 6px rgba(0, 0, 0, 0.45);

    --filo-error-ui-bg: #2a1607;
    --filo-error-ui-shadow: 0 -1px 2px rgba(0, 0, 0, 0.5);

    --filo-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

html, body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--filo-bg);
    color: var(--filo-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    color: var(--filo-text);
    letter-spacing: -0.01em;
}

/* FocusOnNavigate (Routes.razor, Selector="h1") gives the page <h1> tabindex="-1"
   and focuses it after each navigation so keyboard/AT land on the heading. Suppress
   the browser focus ring on that one programmatic skip-target — it otherwise draws a
   stray box around every page heading. Scoped to h1 to match the selector and keep
   the blast radius minimal; real interactive controls keep their focus ring. */
h1[tabindex="-1"]:focus {
    outline: none;
}

a {
    color: var(--filo-accent-text);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

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

.text-danger {
    color: var(--filo-danger);
}

/* Validation affordances (FluentValidation/EditForm bind to these in later gates). */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--filo-valid);
}

.invalid {
    outline: 1px solid var(--filo-danger);
}

.validation-message {
    color: var(--filo-danger);
    font-size: 0.85rem;
}

/* Blazor's unhandled-error toast. */
#blazor-error-ui {
    background: var(--filo-error-ui-bg);
    bottom: 0;
    box-shadow: var(--filo-error-ui-shadow);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: var(--filo-danger-fill);
    padding: 1rem;
    color: var(--filo-on-accent);
    border-radius: var(--filo-radius-sm);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Auth pages (Login / Logout / FirstRunSetup) — shared form primitives. These sit
   in global CSS because they are used across several account components. */
.filo-auth-title {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.filo-auth-sub {
    margin: 0 0 1.25rem;
    color: var(--filo-muted);
    font-size: 0.9rem;
}

.filo-auth-error {
    background-color: var(--filo-danger-bg);
    border: 1px solid var(--filo-danger-border);
    color: var(--filo-danger-fg);
    border-radius: var(--filo-radius-sm);
    padding: 0.625rem 0.75rem;
    font-size: 0.85rem;
    margin: 0 0 1rem;
}

.filo-field {
    display: block;
    margin-bottom: 1rem;
}

.filo-field > span {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--filo-text);
    margin-bottom: 0.375rem;
}

.filo-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius-sm);
    font-size: 0.9rem;
    color: var(--filo-text);
    background-color: var(--filo-bg); /* slate-50 inset fill (wireframe form inputs) */
}

.filo-field input:focus {
    outline: none;
    border-color: var(--filo-accent-fg);
    box-shadow: 0 0 0 2px var(--filo-accent-weak);
}

.filo-auth-submit {
    width: 100%;
    padding: 0.5625rem 1rem;
    background-color: var(--filo-accent);
    color: var(--filo-on-accent);
    border: none;
    border-radius: var(--filo-radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--filo-shadow);
}

.filo-auth-submit:hover {
    background-color: var(--filo-accent-hover);
}

/* Graceful not-found / coming-soon (Routes.razor). */
.filo-notfound {
    max-width: 32rem;
    margin: 4rem auto;
    text-align: center;
}

.filo-notfound h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* ── Shared page/list/form primitives (established by M1.1 Providers; reused by
      every later facet gate — buttons, badges, cards, the directory table). ── */
.filo-page {
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.filo-page-narrow {
    max-width: 44rem;
}

.filo-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.filo-page-head h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.filo-page-head p {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
}

.filo-page-eyebrow {
    font-size: 0.8125rem;
    color: var(--filo-muted);
    margin-bottom: 0.25rem;
}

.filo-page-actions {
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.filo-faint {
    color: var(--filo-faint);
    font-weight: 400;
}

/* Buttons (links + <button>) share one set of shapes. */
.filo-btn-primary,
.filo-btn-secondary,
.filo-btn-soft,
.filo-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--filo-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    line-height: 1.2;
}

.filo-btn-primary {
    background-color: var(--filo-accent);
    color: var(--filo-on-accent);
    box-shadow: var(--filo-shadow);
}

.filo-btn-primary:hover {
    background-color: var(--filo-accent-hover);
    text-decoration: none;
}

.filo-btn-secondary {
    background-color: var(--filo-surface);
    color: var(--filo-text);
    border-color: var(--filo-border);
}

.filo-btn-secondary:hover {
    background-color: var(--filo-hover);
    text-decoration: none;
}

/* Soft-indigo action (the wireframe's "+ Add Provider" button, line 300): a tinted
   secondary that reads as a primary action without the full solid-indigo weight. */
.filo-btn-soft {
    background-color: var(--filo-accent-weak);
    color: var(--filo-accent-text);
}

.filo-btn-soft:hover {
    background-color: var(--filo-accent-tint);
    text-decoration: none;
}

.filo-btn-ghost {
    background-color: transparent;
    color: var(--filo-muted);
}

.filo-btn-ghost:hover {
    background-color: var(--filo-hover);
    color: var(--filo-text);
    text-decoration: none;
}

/* Status / kind badges. */
.filo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: var(--filo-badge-neutral-bg);
    color: var(--filo-muted);
}

.filo-badge-active {
    background-color: var(--filo-success-bg);
    color: var(--filo-success-fg);
}

.filo-badge-archived {
    background-color: var(--filo-badge-neutral-bg);
    color: var(--filo-muted);
}

/* Deadline badges (Obligations list / section / dashboard panel). Global so the three
   Obligation surfaces share one definition beside the other badge variants. */
.filo-badge-overdue {
    background-color: var(--filo-danger-bg); /* red-50 */
    color: var(--filo-danger);
}

.filo-badge-due {
    /* Warning surface + border, neutral text — the warning fg is icon-grade
       amber; as badge text it read brown (see the --filo-warning-bg note). The
       border keeps the "due" signal in dark, where the surface stays navy. */
    background-color: var(--filo-warning-bg);
    border: 1px solid var(--filo-warning-border);
    color: var(--filo-text);
}

/* Provider directory as one titled card (wireframe TableView, lines 292–357): a header
   bar (title + the New-provider action), the filter strip, then the rows — all inside a
   single bordered surface. */
.filo-directory {
    background-color: var(--filo-surface);
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius);
    box-shadow: var(--filo-shadow);
    overflow: hidden;
}

.filo-directory-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--filo-border);
}

.filo-directory-head h1 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.filo-directory-head p {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
}

.filo-directory-loading {
    margin: 0;
    padding: 1.5rem;
}

/* The filter strip + table sit flush inside the card: the strip is padded with a hairline
   under it, and the table drops its own frame (the card supplies it). */
.filo-directory .filo-table-controls {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--filo-border);
}

.filo-directory .filo-table {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Directory table + its filter controls. */
.filo-table-controls {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filo-table-search {
    position: relative;
    flex: 1 1 18rem;
}

.filo-table-search svg {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--filo-faint);
}

.filo-table-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius-sm);
    font-size: 0.9rem;
}

.filo-table-filter {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.filo-table-filter select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius-sm);
    font-size: 0.9rem;
    background-color: var(--filo-surface);
}

.filo-table-search input:focus,
.filo-table-filter select:focus {
    outline: none;
    border-color: var(--filo-accent-fg);
    box-shadow: 0 0 0 2px var(--filo-accent-weak);
}

.filo-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--filo-surface);
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius);
    overflow: hidden;
}

.filo-table th,
.filo-table td {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--filo-border-soft);
}

.filo-table thead th {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--filo-faint);
    background-color: var(--filo-thread-bg);
}

.filo-table tbody tr:last-child td {
    border-bottom: none;
}

.filo-table-name {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 500;
    color: var(--filo-text);
}

.filo-table-name:hover {
    text-decoration: none;
}

/* The slate icon square that leads the provider name (wireframe lines 322–324). */
.filo-table-icon {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: var(--filo-radius-sm);
    background-color: var(--filo-hover);
    border: 1px solid var(--filo-border);
    color: var(--filo-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Trailing chevron action cell (wireframe lines 346–349). */
.filo-table-action {
    text-align: right;
    width: 1px;
    white-space: nowrap;
}

.filo-table-chevron {
    color: var(--filo-faint);
    display: inline-flex;
}

/* The chevron is the wireframe's on-hover "go" affordance — pick up the accent as the
   row is hovered (the whole row navigates via the name link). */
.filo-table tbody tr:hover .filo-table-chevron {
    color: var(--filo-accent-fg);
}

/* Global visually-hidden utility (keeps content for assistive tech, off-screen visually). */
.filo-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.filo-table-empty td {
    text-align: center;
    color: var(--filo-muted);
    padding: 2rem 1rem;
}

/* Cards + definition lists for the profile. */
.filo-card {
    background-color: var(--filo-surface);
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius);
    box-shadow: var(--filo-shadow);
    padding: 1.25rem 1.5rem;
}

.filo-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.filo-deflist {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}

.filo-deflist dt {
    color: var(--filo-muted);
    font-size: 0.875rem;
}

.filo-deflist dd {
    margin: 0;
    font-size: 0.875rem;
}

.filo-channel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filo-channel-list li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
}

.filo-channel-value {
    font-weight: 500;
}

.filo-facets {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.filo-facets:empty {
    display: none;
}

/* Provider create/edit form (extends the M1.0 .filo-field primitives to
   selects/textareas + the contact-channel editor). */
.filo-form .filo-field select,
.filo-form .filo-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius-sm);
    font-size: 0.9rem;
    color: var(--filo-text);
    background-color: var(--filo-bg); /* slate-50 inset fill (wireframe form inputs) */
    font-family: inherit;
}

.filo-form .filo-field select:focus,
.filo-form .filo-field textarea:focus {
    outline: none;
    border-color: var(--filo-accent-fg);
    box-shadow: 0 0 0 2px var(--filo-accent-weak);
}

/* The follow-up panel is itself slate-50 (.filo-followup-action), so its inline draft
   inputs stay white for contrast — the wireframe keeps the spawned-commitment fields
   bg-white inside the slate-50 panel (lines 449–474). Specificity matches the slate-50
   rules above and wins on source order. */
.filo-form .filo-followup-fields input,
.filo-form .filo-followup-fields select,
.filo-form .filo-followup-fields textarea {
    background-color: var(--filo-surface);
}

.filo-field-row {
    display: flex;
    gap: 1rem;
}

.filo-field-row .filo-field {
    flex: 1;
}

.filo-channels {
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius-sm);
    padding: 1rem;
    margin: 0 0 1rem;
}

.filo-channels legend {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0 0.375rem;
}

.filo-channel-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}

.filo-channel-row select,
.filo-channel-row input {
    padding: 0.4375rem 0.625rem;
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius-sm);
    font-size: 0.875rem;
    background-color: var(--filo-surface);
}

.filo-channel-row input {
    flex: 1;
    min-width: 0;
}

.filo-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ── Iconography (Shared/Icon.razor) ─────────────────────────────────────────────
   One inline-SVG glyph component carries the wireframe's icons. Sized by these
   self-contained classes (never by a parent's scoped `svg` selector), so an <Icon>
   renders at the right size wherever it lands. */
.filo-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

.filo-icon-sm {
    width: 1rem;
    height: 1rem;
}

.filo-icon-lg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Channel picker — the wireframe's 4-card icon radio grid (lines 402–413): each channel
   is a bordered card with an icon over a label; the checked card gets the indigo border,
   weak-indigo fill and a 1px ring. Real <input type=radio> (label-wrapped, sr-only but
   focusable) keeps it keyboard-navigable and accessible. */
.filo-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .filo-choice-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.filo-choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius-sm);
    color: var(--filo-muted);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.filo-choice-card:hover {
    background-color: var(--filo-hover);
}

/* The native radio stays in the DOM (focusable, form-bound) but is visually replaced by
   the card — clip it rather than display:none so it keeps keyboard focus. */
.filo-choice-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.filo-choice-label {
    font-size: 0.75rem;
    font-weight: 500;
}

.filo-choice-card:has(.filo-choice-input:checked) {
    border-color: var(--filo-accent-fg);
    background-color: var(--filo-accent-weak);
    color: var(--filo-accent-text);
    box-shadow: 0 0 0 1px var(--filo-accent-fg);
}

/* Keyboard focus lands on the (clipped) radio; surface it on the card. */
.filo-choice-card:has(.filo-choice-input:focus-visible) {
    box-shadow: 0 0 0 2px var(--filo-focus-ring), 0 0 0 1px var(--filo-accent-fg);
}

/* Segmented two-option pill (the interaction Direction toggle): a neutral on/off pair in
   the same card family — real radios, the checked one filled indigo. */
.filo-segment {
    display: inline-flex;
    padding: 0.1875rem;
    gap: 0.1875rem;
    background-color: var(--filo-hover);
    border-radius: var(--filo-radius-sm);
}

.filo-segment-option {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: calc(var(--filo-radius-sm) - 0.125rem);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--filo-muted);
    cursor: pointer;
}

.filo-segment-option:has(.filo-choice-input:checked) {
    background-color: var(--filo-surface);
    color: var(--filo-accent-text);
    box-shadow: var(--filo-shadow);
}

.filo-segment-option:has(.filo-choice-input:focus-visible) {
    box-shadow: 0 0 0 2px var(--filo-focus-ring);
}

/* Commitment Direction — the wireframe's two inline colour-coded radios (lines 453–462):
   orange "They owe me", blue "I owe them". Real native radios, tinted via accent-color so
   the dot carries the direction colour. */
.filo-radio-row {
    display: flex;
    gap: 1.25rem;
}

.filo-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--filo-text);
    cursor: pointer;
}

.filo-radio input {
    width: 1rem;
    height: 1rem;
}

.filo-radio-they input {
    accent-color: #f97316; /* orange-500 */
}

.filo-radio-me input {
    accent-color: #3b82f6; /* blue-500 */
}

/* Log-interaction form (wireframe lines 360–491): the fields sit inside a white
   card, grouped into numbered sections split by hairline dividers, matching the
   "1. Who did you contact? / 2. Interaction details / 3. Follow-up actions" shape. */
.filo-form-card {
    background-color: var(--filo-surface);
    border: 1px solid var(--filo-border);
    border-radius: var(--filo-radius);
    box-shadow: var(--filo-shadow);
    padding: 1.5rem;
}

/* A section owns its own even vertical rhythm: the header and each field/field-row are
   flex children spaced by one gap, so the per-field bottom margin is dropped inside a
   section (it would otherwise stack with the gap and leave the lopsided spacing the
   header had tight above and a wide gap below). */
.filo-form-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.filo-form-section .filo-field {
    margin-bottom: 0;
}

.filo-form-section-head {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--filo-text);
}

.filo-form-divider {
    height: 1px;
    background-color: var(--filo-border-soft);
    margin: 1.5rem 0;
}

.filo-form-card .filo-form-actions {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--filo-border-soft);
}

/* ── Header theme toggle (DM-2) ───────────────────────────────────────────────
   A quiet icon button beside the bell. Both icons live in the DOM; the visible
   one is selected by the global html[data-theme] attribute the head script sets,
   so the correct glyph shows on first paint with no flash and no component state
   (the button's own JS only flips/persists the theme). Keys off html[data-theme]
   rather than a scoped ancestor, hence global, not .razor.css. */
.filo-theme-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem;
    color: var(--filo-faint);
    background: transparent;
    border: none;
    border-radius: var(--filo-radius-sm);
    cursor: pointer;
}

.filo-theme-toggle:hover {
    color: var(--filo-text);
}

.filo-theme-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
}

.filo-theme-toggle .filo-theme-sun,
.filo-theme-toggle .filo-theme-moon {
    display: none;
}

/* Light (or unset) shows the moon (the action switches to dark); dark shows the sun. */
html:not([data-theme="dark"]) .filo-theme-toggle .filo-theme-moon {
    display: inline-flex;
}

html[data-theme="dark"] .filo-theme-toggle .filo-theme-sun {
    display: inline-flex;
}

/* ── Circuit reconnect pill (#4) ──────────────────────────────────────────────
   Shown by the custom reconnection handler in App.razor while the SignalR
   circuit is retrying; the handler reloads the page itself when the circuit is
   gone, so this never shows the default "Could not reconnect" dead end. */
#reconnect-modal {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding: 0.5rem 1rem;
    background: var(--filo-surface);
    color: var(--filo-text);
    border: 1px solid var(--filo-border);
    border-radius: 9999px;
    box-shadow: 0 4px 12px var(--filo-scrim);
    font-size: 0.875rem;
}