/* ===================================================================
   NUH page components
   -------------------------------------------------------------------
   Building blocks for pages, independent of the shell: a page head,
   filter bars, card grids that reflow on their own, a step-by-step form
   with a live preview, auto-sized fields, and "More" menus that absorb
   whatever does not fit. Loaded by BOTH designs (header.php and
   header-classic.php), so a page built from these looks right whichever
   one Site Settings -> Interface has chosen.

   Every colour is a token with a fallback: the v3 --ui-* set when
   ui.css is present, the public theme's --nuh-* set otherwise.

   Sizing is intrinsic wherever it can be: grids are auto-fill with a
   minimum track, layouts that change shape do so on their OWN width
   (container queries), and type scales with clamp(). Nothing jumps at a
   device breakpoint that the content has not actually reached.
   =================================================================== */

:root {
    --c-ink: var(--ui-ink, var(--nuh-ink, #0f1c2e));
    --c-ink-2: var(--ui-ink-2, #334155);
    --c-muted: var(--ui-muted, var(--nuh-ink-muted, #5b6b7f));
    --c-line: var(--ui-line, #e2e8f0);
    --c-line-strong: var(--ui-line-strong, #cbd5e1);
    --c-surface: var(--ui-surface, #fff);
    --c-surface-2: var(--ui-surface-2, #f8fafc);
    --c-surface-3: var(--ui-surface-3, #eef2f7);
    --c-primary: var(--ui-primary, var(--nuh-blue, #1b56a4));
    --c-primary-50: var(--ui-primary-50, #eef4fb);
    --c-brand: var(--ui-brand, var(--nuh-orange, #f47b20));
    --c-brand-ink: var(--ui-brand-ink, var(--nuh-orange-ink, #c2530a));
    --c-brand-50: var(--ui-brand-50, #fef2e8);
    --c-ok: var(--ui-ok, #15803d);
    --c-ok-bg: var(--ui-ok-bg, #ecfdf3);
    --c-warn: var(--ui-warn, #a15c07);
    --c-warn-bg: var(--ui-warn-bg, #fffaeb);
    --c-bad: var(--ui-bad, #b42318);
    --c-bad-bg: var(--ui-bad-bg, #fef3f2);
    --c-radius: var(--nuh-radius, 16px);
    --c-sh-1: var(--ui-sh-1, 0 1px 3px rgba(15, 28, 46, 0.08));
    --c-sh-2: var(--ui-sh-2, 0 6px 16px rgba(15, 28, 46, 0.08));
    --c-font-head: var(--ui-font-head, var(--nuh-font-head, 'Poppins', 'Inter', sans-serif));
}

/* --- Page head: title, one line of context, the page's actions ------- */
.c-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 24px;
    margin: 0 0 22px;
}
.c-head__text { min-width: min(100%, 320px); flex: 1 1 420px; }
.c-head h1 {
    margin: 0 0 6px;
    color: var(--c-ink);
    font-family: var(--c-font-head);
    font-size: clamp(1.5rem, 1.15rem + 1.2vw, 1.95rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.c-head p { margin: 0; max-width: 70ch; color: var(--c-muted); font-size: 1rem; line-height: 1.55; }
.c-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.c-back { margin: 0 0 10px; font-size: 0.875rem; }
.c-back a { color: var(--c-muted); text-decoration: none; font-weight: 600; }
.c-back a:hover { color: var(--c-primary); }

/* --- Filter bar ------------------------------------------------------ */
.c-filters {
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid var(--c-line);
    border-radius: 14px;
    background: var(--c-surface);
    box-shadow: var(--c-sh-1);
}
.c-search {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}
.c-search .icon {
    position: absolute;
    left: 12px; top: 50%;
    width: 18px; height: 18px;
    transform: translateY(-50%);
    color: var(--c-muted);
    pointer-events: none;
}
.c-filters .c-search input { width: 100%; padding-left: 40px !important; }
.c-filters select { flex: 1 1 170px; min-width: 140px; max-width: 240px; }
@container (max-width: 520px) { .c-filters select { max-width: none; } }
.c-filters__go { flex: none; }

/* Chips scroll sideways on a narrow screen instead of stacking into rows. */
.c-chips {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
    padding: 2px 2px 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.c-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--c-line-strong);
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-ink-2);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.c-chip .icon { width: 16px; height: 16px; }
.c-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.c-chip.is-on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.c-chip__n {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--c-surface-3);
    color: var(--c-muted);
    font-size: 0.6875rem;
    text-align: center;
}
.c-chip.is-on .c-chip__n { background: rgba(255, 255, 255, 0.22); color: #fff; }
.c-count { margin: 0 0 14px; color: var(--c-muted); font-size: 0.875rem; }

/* --- Card grid: as many columns as fit, never narrower than --min ---- */
.c-grid {
    --min: 280px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min)), 1fr));
    gap: clamp(12px, 1.6vw, 20px);
    margin: 0 0 24px;
}
.c-grid--wide { --min: 340px; }
.c-grid--tight { --min: 200px; }

/* --- Opportunity card ------------------------------------------------ */
.c-card {
    container-type: inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: clamp(16px, 1.8vw, 20px);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    background: var(--c-surface);
    box-shadow: var(--c-sh-1);
    color: var(--c-ink);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s;
}
a.c-card:hover { border-color: var(--c-line-strong); box-shadow: var(--c-sh-2); transform: translateY(-2px); color: var(--c-ink); }
.c-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.c-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--c-brand-50);
    color: var(--c-brand-ink);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}
.c-tag .icon { width: 14px; height: 14px; }
.c-tag--blue { background: var(--c-primary-50); color: var(--c-primary); }
.c-tag--ok { background: var(--c-ok-bg); color: var(--c-ok); }
.c-tag--warn { background: var(--c-warn-bg); color: var(--c-warn); }
.c-tag--bad { background: var(--c-bad-bg); color: var(--c-bad); }
.c-tag--grey { background: var(--c-surface-3); color: var(--c-ink-2); }
.c-card h3 {
    margin: 2px 0 0;
    color: var(--c-ink);
    font-family: var(--c-font-head);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    line-height: 1.3;
}
.c-card__summary {
    margin: 0;
    color: var(--c-ink-2);
    font-size: 0.9rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.c-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; color: var(--c-muted); font-size: 0.8125rem; }
.c-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.c-card__meta .icon { width: 14px; height: 14px; }
.c-card__money { margin: 2px 0 0; color: var(--c-brand-ink); font-weight: 700; font-size: 0.9375rem; }
.c-card__foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed var(--c-line);
    color: var(--c-muted);
    font-size: 0.78rem;
}
/* A card that has grown wide lays its money beside the title. */
@container (min-width: 420px) {
    .c-card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start; }
    .c-card__body .c-card__money { grid-column: 2; grid-row: 1 / span 3; text-align: right; margin-top: 4px; }
}

/* --- Empty state ----------------------------------------------------- */
.c-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: clamp(28px, 5vw, 48px) 20px;
    border: 1px dashed var(--c-line-strong);
    border-radius: var(--c-radius);
    background: var(--c-surface);
    text-align: center;
}
.c-empty .icon { width: 36px; height: 36px; color: var(--c-muted); }
.c-empty h2 { margin: 4px 0 0; font-size: 1.125rem; color: var(--c-ink); }
.c-empty p { margin: 0 0 6px; max-width: 48ch; color: var(--c-muted); }

/* --- Two-part layout: main + aside, stacking when the page is narrow -- */
body.has-subnav { --c-sticky-extra: 64px; }   /* 48px of section tabs + the usual 16px */
.c-split { container-type: inline-size; }
.c-split__grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@container (min-width: 880px) {
    .c-split__grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
    .c-split__aside { position: sticky; top: calc(var(--ui-top-h, 0px) + var(--c-sticky-extra, 16px)); }
}

.c-panel {
    padding: clamp(18px, 2vw, 24px);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    background: var(--c-surface);
    box-shadow: var(--c-sh-1);
    margin-bottom: 20px;
}
.c-panel > h2, .c-panel > h3 { margin: 0 0 10px; font-size: 1.0625rem; color: var(--c-ink); }
.c-panel--quiet { background: var(--c-surface-2); box-shadow: none; }
.c-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin: 14px 0 0; }
.c-fact { padding: 12px 14px; border-radius: 12px; background: var(--c-surface-2); border: 1px solid var(--c-line); }
.c-fact dt { color: var(--c-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.c-fact dd { margin: 4px 0 0; color: var(--c-ink); font-weight: 600; }
.c-prose { white-space: pre-wrap; line-height: 1.65; color: var(--c-ink-2); }

/* --- Tiles: the Opportunities overview ------------------------------- */
.c-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: clamp(12px, 1.6vw, 18px); margin: 0 0 28px; }
.c-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 14px;
    align-items: start;
    padding: 18px;
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    background: var(--c-surface);
    box-shadow: var(--c-sh-1);
    color: var(--c-ink);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s;
}
.c-tile:hover { border-color: var(--c-primary); box-shadow: var(--c-sh-2); transform: translateY(-2px); color: var(--c-ink); }
.c-tile__icon {
    grid-row: span 3;
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 13px;
    background: var(--c-brand-50);
    color: var(--c-brand-ink);
}
.c-tile__icon .icon { width: 24px; height: 24px; }
.c-tile strong { font-family: var(--c-font-head); font-size: 1.0625rem; }
.c-tile small { color: var(--c-muted); font-size: 0.8125rem; line-height: 1.4; }
.c-tile__n { color: var(--c-primary); font-weight: 700; font-size: 0.875rem; }
.c-tile.is-off { opacity: 0.6; }

.c-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.c-section-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0 12px;
}
.c-section-h h2 { margin: 0; font-size: 1.1875rem; color: var(--c-ink); }
.c-section-h a { font-size: 0.875rem; font-weight: 600; text-decoration: none; }

/* --- Forms: fields that arrange themselves --------------------------- */
.c-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 0 16px;
}
.c-fields > .c-span,
.c-fields > .form-group:has(> textarea) { grid-column: 1 / -1; }
.c-req { color: var(--c-bad); font-weight: 700; }
.c-err { display: block; margin-top: 6px; color: var(--c-bad); font-size: 0.8125rem; font-weight: 600; }
.c-counter { float: right; color: var(--c-muted); font-size: 0.75rem; font-weight: 500; }

/* Text boxes grow with what is typed: components.js sets the height from
   the content, never below the rows the page asked for and never past 70%
   of the screen, where the box scrolls instead. */
.c-autosized { overflow-y: hidden; resize: vertical; transition: height 0.08s ease-out; }
.c-autosized.is-capped { overflow-y: auto; }

.c-note {
    padding: 12px 16px;
    border: 1px solid var(--c-primary-50);
    border-left: 4px solid var(--c-primary);
    border-radius: 12px;
    background: var(--c-primary-50);
    color: var(--c-ink-2);
    font-size: 0.875rem;
    line-height: 1.55;
}

/* --- Step-by-step form ------------------------------------------------
   Without components.js every step is simply shown, one after another,
   and the form submits as a normal long form. */
.c-stepper {
    display: flex;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    counter-reset: step;
    overflow-x: auto;
    scrollbar-width: none;
}
.c-stepper::-webkit-scrollbar { display: none; }
.c-stepper li { flex: 1 1 0; min-width: 0; }
.c-stepper button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px 12px 0;
    border: 0;
    border-bottom: 3px solid var(--c-line);
    background: none;
    color: var(--c-muted);
    font: 600 0.8125rem/1.2 inherit;
    text-align: left;
    cursor: pointer;
}
.c-stepper button[disabled] { cursor: default; }
.c-stepper__n {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    flex: none;
    border-radius: 999px;
    background: var(--c-surface-3);
    color: var(--c-ink-2);
    font-size: 0.75rem;
    font-weight: 700;
}
.c-stepper__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-stepper .is-done button { border-bottom-color: var(--c-ok); color: var(--c-ink-2); }
.c-stepper .is-done .c-stepper__n { background: var(--c-ok); color: #fff; }
.c-stepper .is-current button { border-bottom-color: var(--c-brand); color: var(--c-ink); }
.c-stepper .is-current .c-stepper__n { background: var(--c-brand-ink); color: #fff; }
@container (max-width: 520px) {
    .c-stepper li:not(.is-current) .c-stepper__t { display: none; }
    .c-stepper li:not(.is-current) { flex: none; }
}
.c-steps { container-type: inline-size; }
.c-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.c-step + .c-step { margin-top: 18px; }
.c-step > legend {
    margin: 0 0 4px;
    padding: 0;
    color: var(--c-ink);
    font-family: var(--c-font-head);
    font-size: 1.125rem;
    font-weight: 700;
}
.c-step__hint { margin: 0 0 16px; color: var(--c-muted); font-size: 0.875rem; }
.js-steps .c-step + .c-step { margin-top: 0; }
.js-steps .c-step[hidden] { display: none; }
.c-step-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--c-line);
}
.c-step-nav__spacer { flex: 1; }
.c-step-nav__pos { color: var(--c-muted); font-size: 0.8125rem; }

/* --- Live preview ------------------------------------------------------ */
.c-preview__label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--c-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.c-preview__label .icon { width: 16px; height: 16px; }
.c-preview .c-card { pointer-events: none; }
.c-preview [data-empty-shown] { color: var(--c-muted); font-style: italic; }
.c-preview__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.c-preview__chips li { padding: 3px 9px; border-radius: 999px; background: var(--c-surface-3); color: var(--c-ink-2); font-size: 0.75rem; font-weight: 600; }
.c-preview__foot { margin: 12px 0 0; color: var(--c-muted); font-size: 0.8125rem; line-height: 1.5; }

/* --- Interest list (the poster's inbox) -------------------------------- */
.c-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.c-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 14px;
    padding: 14px 16px;
    border: 1px solid var(--c-line);
    border-radius: 14px;
    background: var(--c-surface);
}
.c-item__avatar {
    grid-row: span 3;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 999px;
    background: var(--c-primary-50);
    color: var(--c-primary);
    font-weight: 700;
    font-size: 0.875rem;
}
.c-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.c-item__head strong { color: var(--c-ink); }
.c-item__msg { margin: 2px 0 0; color: var(--c-ink-2); white-space: pre-wrap; line-height: 1.55; }
.c-item__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--c-muted); font-size: 0.8125rem; }
.c-item__meta a { font-weight: 600; }
.c-item__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* --- "More" menus built by components.js ------------------------------ */
[data-c-priority] { display: flex; align-items: center; min-width: 0; }
[data-c-priority] > [hidden] { display: none !important; }
.c-more-panel { display: grid; gap: 2px; }
.c-more-panel__h {
    margin: 8px 10px 2px;
    color: var(--c-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.c-more-panel .c-more-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 9px;
    color: var(--c-ink);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.c-more-panel .c-more-link:hover { background: var(--c-surface-3); }
.c-more-panel .c-more-link.is-current { color: var(--c-brand-ink); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    .c-card, .c-tile { transition: none; }
    a.c-card:hover, .c-tile:hover { transform: none; }
}

/* --- Choice cards: radio buttons with room for a sentence ------------- */
.c-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 10px; }
.c-choices--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.c-choice { position: relative; display: block; margin: 0; cursor: pointer; }
.c-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.c-choice__box {
    display: grid;
    gap: 3px;
    height: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--c-line-strong);
    border-radius: 12px;
    background: var(--c-surface);
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.c-choice__box .icon { width: 20px; height: 20px; color: var(--c-brand-ink); margin-bottom: 2px; }
.c-choice__box strong { color: var(--c-ink); font-size: 0.9375rem; }
.c-choice__box small { color: var(--c-muted); font-size: 0.8125rem; line-height: 1.4; font-weight: 400; }
.c-choice:hover .c-choice__box { border-color: var(--c-primary); }
.c-choice input:checked + .c-choice__box {
    border-color: var(--c-brand-ink);
    background: var(--c-brand-50);
    box-shadow: 0 0 0 1px var(--c-brand-ink) inset;
}
.c-choice input:focus-visible + .c-choice__box { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.c-steps-submit { display: flex; gap: 10px; }

/* --- Classic design fallback -------------------------------------------
   In the v3 shell the content column already sets the measure and styles
   every field; .c-page adds nothing there. Under the classic design the
   public theme gives .page no padding (its pages bring their own
   wrapper), so pages built from these components get one here, with
   plain, readable fields. */
body:not(.ui3) .c-page { width: min(1180px, 100% - 2.4rem); margin: clamp(1.2rem, 3vw, 2rem) auto 3rem; }
body:not(.ui3) .c-page :is(input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
    input[type="url"], input[type="date"], input:not([type]), select, textarea) {
    box-sizing: border-box;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--c-line-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--c-ink);
    font: 500 0.9375rem/1.4 inherit;
}
body:not(.ui3) .c-page .form-group { margin-bottom: 16px; }
body:not(.ui3) .c-page .form-group > label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--c-ink); }
body:not(.ui3) .c-page .form-group :is(input, select, textarea) { width: 100%; }

/* ======================================================================
   Intelligent search (opportunities/index.php)
   ====================================================================== */
.c-ask { position: relative; z-index: 5; }
.c-ask__box { flex: 1 1 340px; }
.c-ask__box input { min-height: 46px !important; font-size: 1rem !important; }
.c-suggest {
    position: absolute;
    left: 0; right: 0; top: calc(100% + 6px);
    z-index: 30;
    display: grid;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--c-line);
    border-radius: 14px;
    background: var(--c-surface);
    box-shadow: var(--ui-sh-3, 0 18px 40px rgba(15, 28, 46, 0.16));
}
.c-suggest[hidden] { display: none; }
.c-suggest__read { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px 10px; border-bottom: 1px solid var(--c-line); }
.c-suggest__label { color: var(--c-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.c-suggest .c-chip { min-height: 28px; padding: 0 10px; }
.c-suggest__opt, .c-suggest__all {
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--c-ink);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.c-suggest__opt strong { font-size: 0.9375rem; }
.c-suggest__opt small { color: var(--c-muted); font-size: 0.8125rem; }
.c-suggest__all { color: var(--c-primary); font-weight: 600; font-size: 0.875rem; }
.c-suggest__opt:hover, .c-suggest__all:hover,
.c-suggest [aria-selected="true"] { background: var(--c-primary-50); }

.c-understood { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 14px; }
.c-understood__label { display: inline-flex; align-items: center; gap: 6px; color: var(--c-muted); font-size: 0.8125rem; font-weight: 700; }
.c-understood__label .icon { width: 16px; height: 16px; color: var(--c-brand-ink); }
.c-understood__words { color: var(--c-ink-2); font-size: 0.875rem; }
.c-understood__fix { color: var(--c-muted); font-size: 0.8125rem; font-style: italic; }
.c-chip--x span { font-size: 1rem; line-height: 1; margin-left: 2px; }

/* Facets beside the results; on a narrow page they stack above and fold. */
.c-browse { container-type: inline-size; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@container (min-width: 860px) {
    .c-browse { grid-template-columns: 250px minmax(0, 1fr); }
    .c-facets { position: sticky; top: calc(var(--ui-top-h, 0px) + var(--c-sticky-extra, 16px)); }
    .c-facets__toggle { display: none; }
}
.c-facets { border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-surface); }
.c-facets__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 14px;
    list-style: none;
    cursor: pointer;
    color: var(--c-ink);
    font-weight: 700;
}
.c-facets__toggle::-webkit-details-marker { display: none; }
.c-facets__toggle .icon { width: 18px; height: 18px; }
.c-facets__body { display: grid; gap: 16px; padding: 6px 14px 16px; }
@container (min-width: 860px) { .c-facets__body { padding-top: 16px; } }
.c-facet { margin: 0; padding: 0; border: 0; min-width: 0; }
.c-facet legend { padding: 0; margin: 0 0 6px; color: var(--c-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.c-facet__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 0 6px;
    border-radius: 8px;
    color: var(--c-ink-2);
    font-size: 0.875rem;
    text-decoration: none;
}
.c-facet__opt:hover { background: var(--c-surface-2); color: var(--c-ink); }
.c-facet__box {
    display: grid;
    place-items: center;
    width: 18px; height: 18px;
    flex: none;
    border: 1.5px solid var(--c-line-strong);
    border-radius: 5px;
    background: var(--c-surface);
}
.c-facet__box .icon { width: 13px; height: 13px; stroke-width: 3; }
.c-facet__opt.is-on { color: var(--c-ink); font-weight: 600; }
.c-facet__opt.is-on .c-facet__box { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.c-facet__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-facet__n { color: var(--c-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.c-results__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.c-results__bar .c-count { margin: 0; }
.c-save { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.c-save select { min-height: 34px !important; padding-top: 4px !important; padding-bottom: 4px !important; font-size: 0.8125rem !important; }

/* ======================================================================
   Insights dashboard (opportunities/insights.php)
   ====================================================================== */
.ins { --viz-surface: var(--c-surface); }
.ins-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; }
.ins-seg { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 11px; background: var(--c-surface-3); }
.ins-seg__b {
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--c-ink-2);
    font: 600 0.8125rem/1 inherit;
    cursor: pointer;
    white-space: nowrap;
}
.ins-seg__b.is-on { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--c-sh-1); }
.ins-live { display: inline-flex; align-items: center; gap: 8px; color: var(--c-muted); font-size: 0.8125rem; margin-right: auto; }
.ins-live__dot { width: 9px; height: 9px; border-radius: 999px; background: var(--c-line-strong); }
.ins.is-live .ins-live__dot { background: #0ca30c; box-shadow: 0 0 0 0 rgba(12, 163, 12, 0.5); animation: ins-pulse 2s ease-out infinite; }
@keyframes ins-pulse { 70% { box-shadow: 0 0 0 7px rgba(12, 163, 12, 0); } 100% { box-shadow: 0 0 0 0 rgba(12, 163, 12, 0); } }
.ins-only-custom { display: none !important; }
.ins.is-customizing .ins-only-custom { display: inline-flex !important; }
.ins-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 12px;
            border: 1px dashed var(--c-line-strong); border-radius: 12px; }
.ins-tray[hidden] { display: none; }
.ins-tray__label { color: var(--c-muted); font-size: 0.8125rem; font-weight: 700; }

.ins-wrap { container-type: inline-size; }
.ins-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 720px) {
    .ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ins-w--full, .ins-w--wide { grid-column: 1 / -1; }
}
@container (min-width: 1080px) {
    .ins-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ins-w--wide { grid-column: span 2; }
}
.ins-w {
    min-width: 0;
    padding: 16px 18px 18px;
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    background: var(--c-surface);
    box-shadow: var(--c-sh-1);
    transition: opacity 0.2s;
}
.ins-w[hidden] { display: none; }
.ins.is-refreshing .ins-w__body { opacity: 0.55; transition: opacity 0.2s; }
.ins.is-customizing .ins-w { border-style: dashed; cursor: grab; }
.ins-w.is-dragging { opacity: 0.4; }
.ins-w.is-drop { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.ins-w__head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.ins-w__head h2 { flex: 1; margin: 0; font-size: 1rem; color: var(--c-ink); }
.ins-w__grip { color: var(--c-muted); letter-spacing: -2px; }
.ins-w__tools { gap: 4px; }
.ins-w__btn {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--c-line-strong);
    border-radius: 8px;
    background: var(--c-surface);
    color: var(--c-ink-2);
    font: 600 0.75rem/1 inherit;
    cursor: pointer;
}
.ins-w__btn:hover, .ins-w__btn[aria-pressed="true"] { border-color: var(--c-primary); color: var(--c-primary); }
.ins-footnote { margin: 8px 0 0; color: var(--c-muted); font-size: 0.75rem; }

.ins-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 12px; }
.ins-stat {
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 14px;
    border-radius: 12px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-line);
}
.ins-stat__label { color: var(--c-ink-2); font-size: 0.8125rem; font-weight: 600; }
.ins-stat__value { color: var(--c-ink); font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.ins-stat__sub { color: var(--c-muted); font-size: 0.75rem; }
.ins-stat--bad { border-color: #f2b8b5; background: #fff5f4; }

.ins-sla, .ins-feed { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ins-sla__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; }
.ins-sla__t { font-weight: 600; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-sla__m { grid-column: 2; color: var(--c-muted); font-size: 0.75rem; }
.ins-status {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 6px;
    border-radius: 999px;
    border: 1px solid var(--st);
    color: var(--c-ink);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}
.ins-status .icon { width: 14px; height: 14px; color: var(--st); }
.ins-feed__row { display: grid; gap: 2px; padding-left: 12px; border-left: 2px solid var(--c-line); }
.ins-feed__row--auto { border-left-color: var(--c-brand); }
.ins-feed__t { font-size: 0.8125rem; color: var(--c-ink-2); }
.ins-feed__t strong { color: var(--c-ink); }
.ins-feed__m { color: var(--c-muted); font-size: 0.75rem; }

/* ---- Charts ---------------------------------------------------------- */
.viz { position: relative; }
.viz-svg { display: block; width: 100%; height: auto; overflow: visible; }
.viz-svg:focus-visible, .viz-row:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.viz-grid { stroke: var(--c-line); stroke-width: 1; }
.viz-axis { stroke: var(--c-line-strong); stroke-width: 1; }
.viz-cross { stroke: var(--c-muted); stroke-width: 1; }
.viz-tick { fill: var(--c-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-label { fill: var(--c-ink-2); font-size: 12px; }
.viz-value { fill: var(--c-ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.viz-row:hover .viz-bar, .viz-row:focus .viz-bar { filter: brightness(1.12); }
.viz-empty { margin: 8px 0; color: var(--c-muted); font-size: 0.875rem; }
.viz-tip {
    position: absolute;
    z-index: 5;
    display: grid;
    gap: 1px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--c-ink);
    color: #fff;
    font-size: 0.75rem;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(15, 28, 46, 0.25);
}
.viz-tip[hidden] { display: none; }
.viz-tip strong { font-size: 0.9375rem; }
.viz-tip span { opacity: 0.8; }
.ins-chart { min-height: 60px; }
@media (prefers-reduced-motion: reduce) { .ins.is-live .ins-live__dot { animation: none; } }

/* Bulk selection bar (admin lists). */
.c-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface-2); }
.c-bulk__all { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; }
.c-bulk select { min-height: 34px !important; padding-top: 4px !important; padding-bottom: 4px !important; font-size: 0.8125rem !important; }

/* Saved searches (opportunities/mine.php). */
.c-saved { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.c-saved__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); }
.c-saved__name { flex: 1 1 260px; min-width: 0; font-weight: 600; }
.c-saved__row select { min-height: 34px !important; padding-top: 4px !important; padding-bottom: 4px !important; font-size: 0.8125rem !important; }

/* Facets: the note shown when no facet has anything to offer */
.c-facets__none { margin: 0 0 .75rem; font-size: .875rem; color: var(--c-muted); }

/* ======================================================================
   Enterprise dashboard, branch reports and the hierarchy
   (admin/enterprise.php, admin/branches.php, admin/regions.php)
   ====================================================================== */
.ent-crumbs ol { display: flex; flex-wrap: wrap; gap: 2px 6px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 0.8125rem; }
.ent-crumbs li { display: inline-flex; align-items: center; gap: 6px; color: var(--c-muted); }
.ent-crumbs li + li::before { content: "›"; color: var(--c-muted); }
.ent-crumbs a { color: var(--c-ink-2); font-weight: 600; text-decoration: none; }
.ent-crumbs a:hover { color: var(--c-primary); text-decoration: underline; }
.ent-crumbs [aria-current] { color: var(--c-ink); font-weight: 700; }

.ent-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; }
.ent-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 320px; min-width: 0; }
.ent-go label { font-size: 0.8125rem; font-weight: 700; color: var(--c-ink-2); }
.ent-go select { flex: 1 1 220px; min-width: 0; max-width: 420px; min-height: 40px; }
.ent-js-hide { display: none !important; }

/* Widgets keep their own height: a short one beside a tall one is not stretched into an empty box. */
.ent .ins-grid { align-items: start; }
.ins-stats--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); margin-bottom: 12px; }
.ins-stats--2 .ins-stat__value { font-size: 1.375rem; }

.ent-score { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; }
.ent-score__n { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.ent-score__side { display: grid; gap: 6px; justify-items: start; }
.ent-score__of { color: var(--c-muted); font-size: 0.8125rem; }
.ent-score .ins-status { grid-row: auto; }
.ent-muted { color: var(--c-muted); font-size: 0.875rem; }
.ent-why { margin-top: 10px; font-size: 0.8125rem; color: var(--c-ink-2); }
.ent-why summary { cursor: pointer; font-weight: 700; color: var(--c-primary); min-height: 32px; display: flex; align-items: center; }
.ent-why ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }

.ent-sub { margin: 14px 0 8px; font-size: 0.8125rem; font-weight: 700; color: var(--c-ink-2); text-transform: none; }
.ent-who { margin: 4px 0 10px; font-size: 0.875rem; color: var(--c-ink-2); }
.ent-who strong { color: var(--c-ink); }

.ent-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ent-list__row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--c-line); }
.ent-list__row:first-child { border-top: 0; }
.ent-list__main { display: grid; gap: 1px; flex: 1; min-width: 0; font-size: 0.875rem; }
.ent-list__main > a, .ent-list__main > span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-list__main small { color: var(--c-muted); font-size: 0.75rem; }
.ent-list__v { font-variant-numeric: tabular-nums; color: var(--c-ink); }
.ent-list .ins-status { grid-row: auto; max-width: 48%; overflow: hidden; text-overflow: ellipsis; }

.ent-alerts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ent-alerts__row { display: grid; gap: 4px; justify-items: start; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface-2); }
.ent-alerts__row p { margin: 0; font-size: 0.875rem; color: var(--c-ink); }
.ent-alerts__row a { font-weight: 700; white-space: nowrap; }
.ent-alerts .ins-status { grid-row: auto; }

/* Status badges inside tables keep their own line. */
.ins td .ins-status, .ent-table td .ins-status { grid-row: auto; }

/* Branch report and hierarchy tables */
.ent-table-wrap { position: relative; margin: 0 0 16px; }  /* hidden labels inside stay inside its scroll box */
.ent-table th a { color: inherit; text-decoration: none; }
.ent-table .ins-status { white-space: normal; line-height: 1.25; }
.ent-table th[aria-sort] a { color: var(--c-primary); }
.ent-table td.num, .ent-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ent-table .ent-rowname { font-weight: 600; }
.ent-table .ent-unset td { color: var(--c-muted); font-style: italic; }
.ent-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; }
.ent-toolbar .ins-seg a { display: inline-flex; align-items: center; text-decoration: none; }
.ent-note { margin: 0 0 14px; color: var(--c-muted); font-size: 0.8125rem; }

.ent-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin: 0 0 16px; }
.ent-card { display: grid; gap: 8px; align-content: start; padding: 14px 16px; border: 1px solid var(--c-line); border-radius: var(--c-radius); background: var(--c-surface); box-shadow: var(--c-sh-1); }
.ent-card h3 { margin: 0; font-size: 1rem; }
.ent-card h3 a { text-decoration: none; }
.ent-card__meta { color: var(--c-muted); font-size: 0.8125rem; }
.ent-card form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.ent-card form .form-group, .ent-card form label { margin: 0; }
.ent-card input[type="text"], .ent-card select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; min-height: 40px; }
.ent-field { display: grid; gap: 4px; flex: 1 1 160px; min-width: 0; font-size: 0.8125rem; font-weight: 600; color: var(--c-ink-2); }
.ent-coord { display: flex; align-items: flex-start; gap: 8px; font-size: 0.875rem; }
.ent-coord .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.ent-coord > span { flex: 1; min-width: 0; }

/* ======================================================================
   Payments: checkout (pay/checkout.php), Payment verification
   (admin/reconcile.php) and Fund utilisation (admin/funds.php)
   ====================================================================== */
.c-check { display: flex; align-items: flex-start; gap: 10px; min-height: 40px; padding: 4px 0; font-size: 0.9375rem; color: var(--c-ink); cursor: pointer; }
.c-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--c-primary); }

.pay-wrap { max-width: 760px; }
.pay-h { margin: 0 0 6px; font-size: 1.125rem; }
.pay-summary > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.pay-amount { font-size: 1.75rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pay-state { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px;
             border: 1px solid var(--st, var(--c-line)); background: var(--c-surface-2); font-size: 0.9375rem; color: var(--c-ink); }
.pay-state .icon { width: 20px; height: 20px; flex: none; color: var(--st, var(--c-muted)); margin-top: 1px; }
.pay-state--verifying { --st: #fab219; }
.pay-state--attention, .pay-state--rejected { --st: #d03b3b; }
.pay-state--paid { --st: #0ca30c; }
.pay-ways { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin: 16px 0; }
@media (min-width: 760px) { .pay-ways { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.pay-ways > .card { margin: 0; }
.pay-upi { display: grid; gap: 10px; justify-items: start; }
.pay-qr { width: min(240px, 100%); aspect-ratio: 1; padding: 8px; background: #fff; border: 1px solid var(--c-line); border-radius: 12px; }
.pay-qr svg { display: block; width: 100%; height: 100%; }
.pay-app { min-height: 44px; }
.pay-facts { display: grid; gap: 6px; margin: 0; width: 100%; }
.pay-facts > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 8px; align-items: center; font-size: 0.9375rem; }
.pay-facts dt { color: var(--c-muted); font-size: 0.8125rem; }
.pay-facts dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.pay-facts code, .pay-facts code:where(*) { padding: 2px 8px; border-radius: 6px; background: var(--c-surface-2) !important; color: var(--c-ink) !important; border: 1px solid var(--c-line); font-size: 0.9375rem; overflow-wrap: anywhere; }
.pay-copy { min-height: 32px; padding: 0 10px; border: 1px solid var(--c-line-strong); border-radius: 8px; background: var(--c-surface);
            color: var(--c-ink-2); font: 600 0.75rem/1 inherit; cursor: pointer; }
.pay-copy:hover, .pay-copy:focus-visible { border-color: var(--c-primary); color: var(--c-primary); }
.pay-tip { margin: 0; font-size: 0.8125rem; color: var(--c-ink-2); }
.pay-bank { white-space: pre-line; margin: 6px 0; overflow-wrap: anywhere; }
.pay-claim .pay-form { display: grid; gap: 12px; margin-top: 8px; }
.pay-methods { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; }
.pay-methods legend { font-weight: 700; margin-bottom: 4px; }
.pay-method { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.pay-method input { width: 18px; height: 18px; accent-color: var(--c-primary); }
.pay-grid { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.pay-form input[type="text"], .pay-form input[type="date"] { width: 100%; box-sizing: border-box; min-height: 44px; }
.pay-err { display: block; color: #b42318; font-weight: 600; margin-top: 4px; }
.pay-more summary { cursor: pointer; font-weight: 700; color: var(--c-primary); min-height: 40px; display: flex; align-items: center; }

.recon-counts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); margin: 0 0 14px; }
.recon-count { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface);
               color: var(--c-ink-2); text-decoration: none; font-size: 0.8125rem; }
.recon-count strong { font-size: 1.5rem; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.recon-count:hover { border-color: var(--c-primary); }
.recon-count--bad strong { color: #b42318; }
.recon-new { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--c-surface-2); border: 1px dashed var(--c-line-strong); }
.recon-tabs { margin: 0 0 16px; }
.recon-tabs a { display: inline-flex; align-items: center; text-decoration: none; }
.recon-sec { margin: 0 0 24px; }
.recon-sec > h2 { font-size: 1.0625rem; margin: 0 0 10px; }
.recon-card { display: grid; gap: 10px; margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--c-line); border-radius: var(--c-radius);
              background: var(--c-surface); box-shadow: var(--c-sh-1); }
.recon-card--mismatch { border-color: #f2b8b5; }
.recon-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.recon-card__head .ins-status { grid-row: auto; }
.recon-card__why { font-size: 0.875rem; color: var(--c-ink-2); }
.recon-pair { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.recon-side { min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--c-surface-2); }
.recon-side h3 { margin: 0 0 4px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); }
.recon-side p { margin: 2px 0; font-size: 0.875rem; overflow-wrap: anywhere; }
.recon-amt { font-size: 1.125rem !important; font-weight: 700; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.recon-text { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.8125rem; overflow-wrap: anywhere; }
.recon-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.recon-acts > p { margin: 0; }
.recon-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.recon-inline input[type="text"] { min-height: 36px; min-width: 0; flex: 1 1 200px; max-width: 320px; box-sizing: border-box; }
.recon-upload, .recon-mapform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.recon-upload .ent-field, .recon-mapform .ent-field { flex: 1 1 180px; }
.recon-raw { width: 100%; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace; font-size: 0.8125rem; margin-bottom: 10px; }
.recon-settings { display: grid; gap: 16px; margin: 0 0 16px; }
.recon-settings .ent-card { margin: 0; }
.recon-settings input[type="text"], .recon-settings input[type="number"], .recon-settings input[type="password"], .recon-settings textarea {
    width: 100%; box-sizing: border-box; min-height: 40px; }
.recon-grid { display: grid; gap: 10px 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.ent-table tr.is-sel td { background: var(--c-surface-2); }

.fund-totals { margin: 0 0 16px; }
.fund-bar { display: inline-block; vertical-align: middle; width: 90px; height: 8px; border-radius: 999px; background: var(--c-surface-3); overflow: hidden; }
.fund-bar > span { display: block; height: 100%; border-radius: 999px; background: #2a78d6; }
.fund-pct { margin-left: 8px; font-variant-numeric: tabular-nums; font-size: 0.8125rem; }
.fund-form { display: grid; gap: 10px 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); align-items: end; }
.fund-form .fund-wide { grid-column: 1 / -1; }
.fund-form input, .fund-form select { width: 100%; box-sizing: border-box; min-height: 40px; }

/* ======================================================================
   Governance: committees, offices, elections (governance/*, admin/governance.php,
   admin/elections.php, admin/election.php)
   ====================================================================== */
.gov-sec { margin: 0 0 24px; }
.gov-sec > h2 { font-size: 1.125rem; margin: 0 0 12px; }
.gov-place { margin: 16px 0 8px; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-muted); }
.gov-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.gov-card { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border: 1px solid var(--c-line); border-radius: var(--c-radius);
            background: var(--c-surface); box-shadow: var(--c-sh-1); }
.gov-card h3 { margin: 0; font-size: 1.0625rem; }
.gov-card h3 a { text-decoration: none; }
.gov-card--hot { border-color: var(--c-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 20%, transparent); }
.gov-card .nuh-btn { justify-self: start; margin-top: 4px; }
.gov-chip { justify-self: start; display: inline-flex; align-items: center; margin: 0; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
            background: var(--c-surface-3); color: var(--c-ink-2); }
.gov-chip--voting, .gov-chip--nominations, .gov-chip--approved { background: #e6f4ea; color: #0a5c0a; }
.gov-chip--review, .gov-chip--closed, .gov-chip--nominated, .gov-chip--accepted, .gov-chip--scheduled { background: #fff4d6; color: #6b4d00; }
.gov-chip--cancelled, .gov-chip--rejected, .gov-chip--withdrawn { background: #fdecea; color: #8a1c14; }
.gov-chip--published { background: #e8f0fb; color: #184f95; }
.gov-meta { color: var(--c-muted); font-size: 0.8125rem; margin: 0; }
.gov-mandate { margin: 0; font-size: 0.875rem; color: var(--c-ink-2); }
.gov-officers { display: grid; gap: 4px; margin: 4px 0; padding: 0; list-style: none; font-size: 0.875rem; }
.gov-officers li { display: flex; justify-content: space-between; gap: 10px; }
.gov-officers li > span { color: var(--c-muted); }
.gov-vacant { color: #8a1c14; font-style: italic; }
.gov-list { display: grid; gap: 6px; margin: 0; padding-left: 18px; }

.gov-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; counter-reset: gs; }
.gov-step { position: relative; display: grid; gap: 2px; padding: 10px 12px 10px 38px; border-radius: 10px; background: var(--c-surface-2); border: 1px solid var(--c-line);
            counter-increment: gs; font-size: 0.8125rem; }
.gov-step::before { content: counter(gs); position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center;
                    background: var(--c-surface-3); color: var(--c-ink-2); font-weight: 700; font-size: 0.75rem; }
.gov-step--done::before { content: "\2713"; background: #0ca30c; color: #fff; }
.gov-step--now { border-color: var(--c-primary); background: var(--c-surface); }
.gov-step--now::before { background: var(--c-primary); color: #fff; }
.gov-step__name { font-weight: 700; color: var(--c-ink); }
.gov-step__when { color: var(--c-muted); font-size: 0.75rem; }
@media (max-width: 640px) { .gov-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gov-you { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--st, var(--c-line)); background: var(--c-surface); }
.gov-you .icon { flex: none; width: 20px; height: 20px; color: var(--st); }
.gov-you--yes { --st: #0ca30c; }
.gov-you--no { --st: #fab219; }
.gov-receipt { margin: 0 0 16px; padding: 16px; border-radius: var(--c-radius); border: 2px solid #0ca30c; background: #f3fbf4; }
.gov-receipt h2 { margin: 0 0 6px; font-size: 1.125rem; }
.gov-receipt__code { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; }
.gov-receipt__code code { font-size: 1.25rem; letter-spacing: 0.06em; padding: 6px 10px; border-radius: 8px; background: #fff !important; color: var(--c-ink) !important; border: 1px solid var(--c-line); }

.gov-ballot { display: grid; gap: 14px; margin: 0 0 20px; padding: 16px; border: 2px solid var(--c-primary); border-radius: var(--c-radius); background: var(--c-surface); }
.gov-ballot h2 { margin: 0; }
.gov-seat { display: grid; gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--c-line); border-radius: 12px; }
.gov-seat legend { font-weight: 700; padding: 0 6px; }
.gov-seat__count { margin: 0; font-size: 0.8125rem; color: var(--c-ink-2); }
.gov-cand { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 10px; cursor: pointer; }
.gov-cand:has(input:checked) { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 6%, var(--c-surface)); }
.gov-cand input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--c-primary); }
.gov-cand__body { display: grid; gap: 2px; min-width: 0; }
.gov-cand__st { display: block; color: var(--c-ink-2); font-size: 0.875rem; margin: 2px 0 0; overflow-wrap: anywhere; }
.gov-cand--abstain { border-style: dashed; color: var(--c-ink-2); }

.gov-result h3 { margin: 0 0 8px; }
.gov-bars { display: grid; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.gov-bar { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 0.875rem; }
.gov-bar__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.gov-bar__name .ins-status { grid-row: auto; }
.gov-bar__track { height: 10px; border-radius: 999px; background: var(--c-surface-3); overflow: hidden; }
.gov-bar__track span { display: block; height: 100%; border-radius: 999px; background: #86b6ef; }
.gov-bar--won .gov-bar__track span { background: #2a78d6; }
.gov-bar__n { font-variant-numeric: tabular-nums; color: var(--c-ink); font-weight: 600; }
@media (max-width: 520px) { .gov-bar { grid-template-columns: minmax(0, 1fr) auto; } .gov-bar__track { grid-column: 1 / -1; grid-row: 2; } }

.gov-office { margin: 0 0 12px; }
.gov-office h3 { margin: 0 0 8px; font-size: 1rem; }
.gov-noms { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gov-nom { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--c-line); }
.gov-nom:first-child { border-top: 0; padding-top: 0; }
.gov-nom > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.gov-accept, .gov-nomform { display: grid; gap: 10px; }
.gov-nomform textarea, .gov-accept textarea, .gov-nomform input[type="text"], .gov-nomform select { width: 100%; box-sizing: border-box; }
.gov-history { margin: 0 0 8px; }
.gov-history summary, .gov-more > summary { cursor: pointer; font-weight: 700; min-height: 40px; display: flex; align-items: center; color: var(--c-primary); }
.gov-more { margin: 10px 0 0; }
.gov-admin-office { margin: 0 0 14px; }
.gov-admin-office__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 6px; }
.gov-admin-office__head h2 { margin: 0; font-size: 1.0625rem; }
.gov-admin-office .ent-list__row select { min-height: 34px; }
.gov-dissolve { margin-top: 12px; }
.gov-mandate-card { margin: 0 0 16px; }

/* Forms that lay themselves out as a grid keep it inside a card (.ent-card form is a flex row). */
.ent-card .fund-form, .ent-card .gov-nomform, .ent-card .gov-accept { display: grid; align-items: end; }
.ent-card .gov-nomform, .ent-card .gov-accept { align-items: stretch; }
.ent-card .gov-nomform .nuh-btn, .ent-card .gov-accept .nuh-btn { justify-self: start; }

/* ======================================================================
   Operations: volunteering, assets, documents, notices, ID-card check,
   the installable app, Find anything (migration 060)
   ====================================================================== */
.ops-detail { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin: 0 0 14px; }
.ops-detail .ent-card { margin: 0; }
.ops-line { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 0.9375rem; color: var(--c-ink); }
.ops-line .icon, .gov-meta .icon { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--c-muted); vertical-align: -3px; }
.ops-line small { color: var(--c-muted); }
.ops-desc { margin: 4px 0 0; font-size: 0.9375rem; color: var(--c-ink-2); overflow-wrap: anywhere; }
.ops-big { margin: 0; font-size: 0.9375rem; color: var(--c-ink-2); }
.ops-big strong { font-size: 2rem; color: var(--c-ink); font-variant-numeric: tabular-nums; margin-right: 4px; }
.ops-bar { width: 100%; height: 10px; }
.ops-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.ops-person { flex-wrap: wrap; }
.ops-hours { width: 5.5em; min-height: 34px; }
.ops-invite .ent-list { margin-bottom: 10px; }
.ops-pick { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; cursor: pointer; }
.ops-pick input { width: 20px; height: 20px; flex: none; accent-color: var(--c-primary); }
.ent-card .ops-invite { display: grid; gap: 8px; justify-items: start; }
.ent-card .ops-invite .ent-list { width: 100%; }

.ops-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0 0 14px; }
.ops-filters .ent-field { flex: 1 1 170px; }
.ops-filters .ops-grow { flex: 3 1 260px; }
.ops-filters input, .ops-filters select { width: 100%; box-sizing: border-box; min-height: 40px; }
.ops-filters .c-check { align-self: center; }
.c-combo { width: 100%; box-sizing: border-box; min-height: 40px; font-weight: 400; }

.ops-tag { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--c-surface-3); color: var(--c-ink);
           font: 700 0.8125rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 0.02em; white-space: nowrap; }
h1 .ops-tag { font-size: 0.7em; vertical-align: 0.15em; }
.ops-alerts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.ops-alerts .ins-status { grid-row: auto; }
.ops-facts { display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); margin: 0; }
.ops-facts > div { min-width: 0; }
.ops-facts dt { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); }
.ops-facts dd { margin: 2px 0 0; color: var(--c-ink); overflow-wrap: anywhere; }
.ops-facts small { color: var(--c-muted); }
.ops-hash { font-size: 0.8125rem; }

.ops-label { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 300px; box-sizing: border-box; padding: 8px;
             border: 1px dashed var(--c-line-strong); border-radius: 10px; background: #fff; color: #111; }
.ops-label__qr { flex: none; width: 88px; height: 88px; background: #fff; }
.ops-label__qr svg { display: block; width: 100%; height: 100%; }
.ops-label__text { display: grid; gap: 2px; min-width: 0; font-size: 0.8125rem; line-height: 1.3; }
.ops-label__text strong { font: 700 1rem/1.2 ui-monospace, Consolas, monospace; }
.ops-label__text small { color: #555; }
.ops-qrcard { justify-items: start; }
.ops-labels { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
@media print {
    .ops-labels { grid-template-columns: repeat(3, 1fr); gap: 4mm; }
    .ops-label { break-inside: avoid; border-color: #999; }
}

.ops-timeline { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ops-timeline li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; font-size: 0.9375rem; overflow-wrap: anywhere; }
.ops-timeline__when { color: var(--c-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; padding-top: 2px; }
@media (max-width: 480px) { .ops-timeline li { grid-template-columns: 1fr; gap: 0; } }

.ops-docs { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ops-doc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 16px;
           border: 1px solid var(--c-line); border-radius: var(--c-radius); background: var(--c-surface); box-shadow: var(--c-sh-1); }
.ops-doc__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--c-primary-50); color: var(--c-primary); }
.ops-doc__icon .icon { width: 20px; height: 20px; }
.ops-doc__body { display: grid; gap: 4px; min-width: 0; }
.ops-doc__title { font-weight: 700; font-size: 1rem; color: var(--c-ink); text-decoration: none; overflow-wrap: anywhere; }
.ops-doc__title:hover { color: var(--c-primary); text-decoration: underline; }
.ops-doc__desc { margin: 0; font-size: 0.875rem; color: var(--c-ink-2); }
.ops-doc__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.ops-doc__tags .gov-chip { text-decoration: none; }
.ops-doc__acts { display: grid; gap: 6px; justify-items: end; text-align: right; }
@media (max-width: 560px) {
    .ops-doc { grid-template-columns: auto minmax(0, 1fr); }
    .ops-doc__acts { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
}

.ops-verify { max-width: 560px; margin-inline: auto; }
.ops-verify__card { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--c-line); border-radius: var(--c-radius); background: var(--c-surface); box-shadow: var(--c-sh-2); }
.ops-verify__org { margin: 0; font-size: 0.8125rem; color: var(--c-muted); }
.ops-verify__state { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--st);
                     font-size: 1.375rem; color: var(--c-ink); background: color-mix(in srgb, var(--st) 8%, var(--c-surface)); }
.ops-verify__state .icon { width: 28px; height: 28px; flex: none; color: var(--st); }
.ops-verify__who { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.ops-verify__who img { width: 96px; height: 112px; object-fit: cover; border-radius: 8px; border: 1px solid var(--c-line); }
.ops-verify__who .ops-facts { flex: 1 1 220px; grid-template-columns: 1fr; }
.ops-verify__why { margin: 0; font-weight: 700; color: var(--c-bad); }

.ops-notices { display: grid; gap: 10px; margin: 0 0 1.2rem; }
.ops-notice-list { display: grid; gap: 10px; }
.ops-notice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 16px;
              border: 1px solid var(--c-line); border-left: 4px solid var(--st); border-radius: 12px; background: var(--c-surface); box-shadow: var(--c-sh-1); }
.ops-notice__ic .icon { width: 22px; height: 22px; color: var(--st); }
.ops-notice__body { min-width: 0; }
.ops-notice__body h3 { margin: 2px 0 4px; font-size: 1rem; color: var(--c-ink); }
.ops-notice__body h3 a { color: inherit; text-decoration: none; }
.ops-notice__body h3 a:hover { text-decoration: underline; }
.ops-notice__body p { margin: 0; font-size: 0.9375rem; color: var(--c-ink-2); overflow-wrap: anywhere; }
.ops-notice__body .ops-notice__kicker { font-size: 0.75rem; font-weight: 600; color: var(--c-muted); }
.ops-notice__text { font-size: 0.9375rem; color: var(--c-ink-2); overflow-wrap: anywhere; margin: 0 0 8px; }
.ops-notice.is-unread { background: color-mix(in srgb, var(--st) 5%, var(--c-surface)); }
.ops-notice.is-open { box-shadow: 0 0 0 2px var(--c-primary); }
.ops-notice-list .ops-notice { grid-template-columns: auto minmax(0, 1fr); }
.ops-notices__more { margin: 0; font-size: 0.875rem; }
@media (max-width: 520px) { .ops-notice { grid-template-columns: auto minmax(0, 1fr); } .ops-notice__done { grid-column: 2; } }

.ops-install { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 1.2rem; padding: 14px 16px;
               border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-primary-50); }
.ops-install[hidden] { display: none; }
.ops-install img { flex: none; border-radius: 12px; }
.ops-install__text { flex: 1 1 220px; min-width: 0; }
.ops-install h2 { margin: 0 0 2px; font-size: 1rem; color: var(--c-ink); }
.ops-install p { margin: 0; font-size: 0.875rem; color: var(--c-ink-2); }
.ops-install__ios, .ops-install [data-app-install] { display: none; }
.ops-install.is-ios .ops-install__ios { display: block; margin-top: 4px; }
.ops-install.can-install [data-app-install] { display: inline-flex; }
.ops-install__acts { display: flex; gap: 8px; }

.ops-find { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.ops-find input { flex: 1 1 260px; min-height: 48px; padding: 0 14px; font-size: 1.0625rem; border-radius: 12px; box-sizing: border-box; }
.ops-find .nuh-btn { min-height: 48px; }
.ops-examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.ops-examples .gov-chip { text-decoration: none; min-height: 32px; }
.ops-understood { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.ops-results { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.ops-results .ent-card { margin: 0; }
.ops-results__h { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; margin-top: 0; }
.ops-results__h .icon { width: 18px; height: 18px; color: var(--c-primary); }
.ops-results .ent-list__main small { overflow-wrap: anywhere; }
.ops-ann-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ops-ann-title .ins-status { grid-row: auto; }

/* A card holds its sections apart: stacked cards on operations pages. */
.ops > .ent-card, .ops > section.ent-card, .ops > details.ent-card { margin: 0 0 14px; }
.ops > .ent-table-wrap, .ops > .table-scroll { margin: 0 0 14px; }

/* ---- Intelligence (admin/intelligence.php, members/reports.php, the member record) ----
   Built from the cards, lists and pills above; only the pieces they lack. */
.intel-tabs { margin: 0 0 18px; }
.intel-cols { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; margin: 0 0 14px; }
.intel-cols > .ent-card { margin: 0; }
.intel-span { grid-column: 1 / -1; }
.intel .ent-alerts { margin: 0 0 14px; }
.intel-why { margin-top: 4px; }
.intel-pts { display: inline-block; min-width: 2.4em; font-weight: 700; font-variant-numeric: tabular-nums; }
.intel-pts--up { color: var(--c-ok); }
.intel-pts--down { color: var(--c-bad); }
.intel-pick .ent-list__row { flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; }
.intel-pick .ops-pick { display: flex; flex: 1 1 260px; align-items: flex-start; gap: 10px; min-width: 0; cursor: pointer; }
.intel-pick input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--c-primary); }
.intel-pick .ent-list__main small { white-space: normal; }
.intel-pick .ins-status { grid-row: auto; }
.intel-pick__acts { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 8px 0; }
.intel-campaign { flex: 1 1 240px; max-width: 420px; }
.intel-campaign select { width: 100%; min-height: 40px; }
.intel-tiers { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.intel-tiers .gov-chip { padding: 4px 12px; font-size: 0.9375rem; }
.recon-count--warn strong { color: var(--c-warn); }
.intel-report { overflow-wrap: anywhere; }
.intel-report table { width: 100%; }
.intel-member__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 6px; }
.intel-member__score { display: grid; }
.intel-member__score strong { color: var(--c-ink); font-size: 2.25rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.intel-member__score span { color: var(--c-muted); font-size: 0.75rem; }
.intel-member__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.intel-member .ins-status { grid-row: auto; }
.intel-how { margin-top: 18px; }
.intel-how p { margin: 6px 0 0; color: var(--c-ink-2); font-size: 0.875rem; }
@media (pointer: coarse) { .intel-pick .ops-pick { min-height: 44px; } }

/* ---- Tables that become cards on a phone ----------------------------------
   <table class="ent-table c-stack"> with data-label on each cell: below 640px
   every row is a card, the first cell its heading, the rest "label … value"
   lines — so the column that matters is never scrolled off the right edge.
   !important only where ui.css's page-table rules would otherwise win. */
@media (max-width: 640px) {
    .table-scroll:has(> table.c-stack) { overflow: visible !important; border: 0 !important; background: none !important; margin: 0 !important; padding: 0 !important; }
    table.c-stack { min-width: 0 !important; border: 0 !important; }
    table.c-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    table.c-stack, table.c-stack tbody, table.c-stack tr, table.c-stack td { display: block; width: 100%; box-sizing: border-box; }
    table.c-stack tr { margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); }
    table.c-stack td { display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px;
                       padding: 5px 0 !important; border: 0 !important; text-align: right !important; overflow-wrap: anywhere; }
    table.c-stack td::before { content: attr(data-label); flex: none; max-width: 45%; color: var(--c-muted); font-size: 0.75rem; font-weight: 600; text-align: left; }
    table.c-stack td:first-child { display: block !important; padding-bottom: 8px !important; font-size: 1rem; text-align: left !important; }
    table.c-stack td:first-child::before, table.c-stack td:not([data-label])::before { content: none; }
    table.c-stack td.c-stack__block { display: block !important; text-align: left !important; }
    table.c-stack td.c-stack__block::before { display: block; max-width: none; margin: 0 0 4px; }
    table.c-stack td .cell-sub { display: block; }
}

/* ---- Language switcher (footer, beside the display controls) ---------------
   Plain links that work without script; each name is written in its own
   language and marked lang="" so screen readers pronounce it correctly. */
.ui-lang { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ui-lang a { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 10px; border-radius: 999px;
             border: 1px solid var(--c-line, #e2e8f0); color: inherit; font-size: 0.8125rem; text-decoration: none; }
.ui-lang a:hover { border-color: var(--c-primary, #1b56a4); }
.ui-lang a.is-current { border-color: var(--c-primary, #1b56a4); font-weight: 700; }
@media (pointer: coarse) { .ui-lang a { min-height: 44px; } }

/* ---- Script fonts for translated pages --------------------------------------
   Inter and Poppins carry no Tamil or Devanagari glyphs, so a translated page
   used to fall back glyph by glyph to whatever the phone happened to have —
   a different face for every word in a mixed sentence. header.php loads Noto
   Sans Tamil / Devanagari for a visitor reading in that language (both also
   carry Latin), and this makes them THE face for the page. !important because
   twenty-five component rules name Poppins directly; code keeps its monospace. */
html:lang(ta) body, html:lang(ta) body :where(*:not(code, pre, kbd, samp, svg *)) {
    font-family: 'Noto Sans Tamil', 'Inter', system-ui, sans-serif !important;
}
html:lang(hi) body, html:lang(hi) body :where(*:not(code, pre, kbd, samp, svg *)) {
    font-family: 'Noto Sans Devanagari', 'Inter', system-ui, sans-serif !important;
}
/* Tamil words run long and Indic scripts need more line height for their marks. */
html:lang(ta) body :where(h1, h2, h3, .nuh-h2), html:lang(hi) body :where(h1, h2, h3, .nuh-h2) { line-height: 1.32; letter-spacing: 0; }
html:lang(ta) body :where(p, li, a, span, label) { overflow-wrap: anywhere; }

/* The reader's own local time beside an event time (assets/js/app.js,
   world_time_html()). Same colour as the time it follows — a fainter shade
   would fail contrast on the muted lines it often sits in. */
.local-time { font-size: 0.92em; font-weight: inherit; }