/* Plain display:none toggle — several inline <script> tab-switchers use
   classList.add/remove('hidden') directly, so this needs to exist as a real
   rule regardless of what any template's class="" attribute says.
   !important because several elements pair this with a component class
   that also sets display (e.g. .tab-panel { display: flex }); without it,
   whichever rule happens to come later in the file would win the cascade
   tie instead of "hidden" unconditionally winning. */
.hidden { display: none !important; }

/* Anchor reset — every link in this app sets its own color via inline style
   or a .cr-* class, so the browser default underline (previously suppressed
   by Tailwind's preflight base reset) is never wanted. Without this, any
   plain <a> that doesn't happen to override text-decoration itself (e.g.
   the sidebar logo link) shows a stray underline. */
a { text-decoration: none; }

/* Tap-highlight reset — mobile Chrome/Safari paint a translucent gray
   overlay on any tapped link/button by default, which persists over the
   element until the tap-highlight fades. Suspected (not confirmed - never
   reproduced outside a real device) contributor to .cr-sidebar-toggle once
   intermittently rendering with a transparent-looking background right
   after a tap, back when that button also changed position on tap (it no
   longer does - see the comment on .cr-sidebar-toggle). Kept as a global
   reset regardless: every tap target already has its own pressed/active
   style where one is wanted, so the browser's default highlight is never
   wanted on top of it. */
button, a { -webkit-tap-highlight-color: transparent; }

/* box-sizing reset — previously supplied by Tailwind's preflight. Without
   it, an element's inline width:Npx is CONTENT width only, so its padding
   and border add on top and the rendered box ends up wider than every
   layout calc in this file assumes (e.g. the sidebar's width:224px plus
   its own 16px+16px padding rendered at 256px, overlapping the main content
   column, which only reserves space for a 224px sidebar). */
*, *::before, *::after { box-sizing: border-box; }

/* Button reset — previously supplied by Tailwind's preflight (which zeroes
   out the browser's native button chrome: default border, background,
   padding, font). Every intentional button style in this file (.cr-btn,
   .cr-chip-toggle, etc.) sets its own border/background/padding and simply
   overrides this, but a plain <button class="cr-card-link"> (a link-styled
   button, e.g. a table row's name link) had nothing to override the
   browser's default button box - it rendered with a visible native border
   around it. */
button {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

@keyframes cr-spin { to { transform: rotate(360deg); } }

/* Tab button used by the detail-page tab switchers (assets, vendors). Kept
   as one shared class rather than each page rebuilding a className string of
   utility classes at runtime. */

:root {
    /* ── Colours ── */
    --cr-bg: #faf8f5;
    --cr-card: #ffffff;
    --cr-navy: #2e302f;
    --cr-accent: #ab5430;
    --cr-accent-hover: #984828;
    --cr-accent-soft: rgba(182, 90, 52, 0.1);
    --cr-success: #36c28c;
    --cr-warning: #f3b14b;
    --cr-danger: #ef5b5b;
    --cr-text: #243044;
    --cr-muted: #657184;
    --cr-placeholder: #6b7585;   /* input placeholders — clearly fainter than real text */
    --cr-line: #e8ded7;
    --cr-field-line: #948980;   /* field borders: 3:1 against the page */
    --cr-accent-tint: #fff5ee;   /* selected rows, chips, upload zones */
    --cr-accent-line: #e8cdbb;   /* border of anything tinted with the accent */
    --cr-field: rgba(255, 255, 255, 0.9);
    --cr-ring: 0 0 0 3px rgba(182, 90, 52, 0.10);
    --cr-surface: #ffffff;
    --cr-hover: rgba(182, 90, 52, 0.06);
    --cr-radius: 14px;
    --cr-shadow: 0 1px 2px rgba(72, 44, 30, 0.03), 0 10px 30px rgba(72, 44, 30, 0.03);
    --cr-shadow-hover: 0 14px 34px rgba(53, 72, 112, 0.09);

    /* ── Typography weights — change here to adjust globally ── */
    --cr-w-body:  300;   /* general content */
    --cr-w-ui:    300;   /* labels, tags, table headers */
    --cr-w-light: 200;   /* secondary / muted text */
    --cr-w-num:   200;   }

/* ─── Headings ─────────────────────────────────────────────────────
   No global reset existed, so any raw <h1>-<h6> (there are many, e.g.
   ad-hoc card titles like <h4>Coverage by Domain</h4>) fell back to the
   browser default: bold weight, black text. That reads noticeably
   "thicker" and darker than the rest of the UI, which is deliberately
   light-weight (.cr-modal-title etc use font-weight 400) and uses
   --cr-text (a dark slate, not pure black) everywhere else. */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    color: var(--cr-text);
    margin: 0;
}

/* ─── Page background ─────────────────────────────────────────────── */
body {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: var(--cr-w-body);
    line-height: 1.5;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    /* The warm glow from the welcome flow, fixed so long pages don't scroll it away. */
    background:
        radial-gradient(ellipse at 82% 6%, rgba(231, 157, 116, 0.14), transparent 38%),
        radial-gradient(ellipse at 92% 92%, rgba(250, 184, 133, 0.16), transparent 36%),
        var(--cr-bg);
    background-attachment: fixed;
}

/* ─── Floating card ───────────────────────────────────────────────── */
.cr-card {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--cr-line);
    border-radius: var(--cr-radius);
    box-shadow: var(--cr-shadow);
    padding: 24px;
    position: relative;
    min-width: 0;
}
.cr-card::before { content: none; }
.cr-card:hover { transform: none; box-shadow: var(--cr-shadow); }
/* ─── White card-style sidebar ──────────────────────────────────────── */
aside.cr-sidebar {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(14px);
    border-right: 1px solid var(--cr-line) !important;
    box-shadow: var(--cr-shadow) !important;
}
/* Mobile sidebar toggle — a tab flush against the left edge, vertically
   centred, same spot in both open and closed states. The original version
   of this button jumped from left:0 to left:224px when the sidebar opened
   (tracking the sidebar's right edge); that position change, combined with
   mobile browsers' default tap overlay, was the suspected cause of the
   button's background intermittently rendering as transparent after a real
   tap. Restored the original left-edge position/shape (rather than the
   top-left-corner hamburger tried in between) but dropped the -open
   variant's position jump - the icon still swaps direction on open/close,
   the button itself never moves. */
.cr-sidebar-toggle {
    /* Hidden by default; only shown below the lg breakpoint (1024px) via the
       media query below. */
    display: none;
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    width: 34px;
    height: 60px;
    align-items: center;
    justify-content: center;
    border-radius: 0 999px 999px 0;
    background: #ffffff;
    border: none;
    /* A self-contained ring + shadow (rather than border + --cr-shadow) so the
       button reads the same whether it's sitting on the plain page background
       or on the dark backdrop overlay shown behind an open sidebar. */
    box-shadow:
        0 0 0 1px var(--cr-line),
        0 4px 16px rgba(15, 34, 64, 0.18);
    color: var(--cr-muted);
    cursor: pointer;
    transition: background 150ms, color 150ms;
}
@media (max-width: 1023.98px) {
    .cr-sidebar-toggle {
        display: flex;
    }
    /* The toggle sits at a fixed left-edge/vertical-centre spot regardless
       of open/closed state (see the comment above), which on open means it
       overlaps whatever nav content happens to fall at vertical centre.
       Nudging the whole sidebar's content right by the tab's width plus a
       small gap clears it without needing per-section padding tweaks - the
       header/nav/footer all shift together and stay aligned with each
       other, just further from the left edge than on desktop. */
    .cr-layout-sidebar {
        padding-left: 40px !important;
    }
}
.cr-sidebar-toggle:hover {
    background: var(--cr-accent-soft);
    color: var(--cr-accent);
}
.cr-sidebar-toggle .material-symbols-outlined {
    font-size: 18px;
    margin-left: -2px;
}
.cr-sidebar h1 {
    color: var(--cr-text) !important;
}
/* Nav links — base state */
.cr-sidebar a[data-nav] {
    color: var(--cr-muted) !important;
    font-weight: var(--cr-w-ui) !important;
    letter-spacing: 0.02em !important;
}
.cr-brand-name { color: var(--cr-text); font-size: 14px; font-weight: var(--cr-w-body); letter-spacing: -0.01em; }
.cr-sidebar-user { font-size: 10px; font-weight: var(--cr-w-ui); color: var(--cr-muted); }
.cr-sidebar a[data-nav]:hover {
    background: var(--cr-accent-soft) !important;
    color: var(--cr-text) !important;
}
/* Sidebar nav link — active state */
.cr-sidebar a[data-nav].cr-nav-active {
    background: var(--cr-accent-soft) !important;
    color: var(--cr-accent) !important;
}
.cr-sidebar a[data-nav].cr-nav-active .material-symbols-outlined {
    color: var(--cr-accent) !important;
}
.cr-sidebar a[data-nav] .material-symbols-outlined {
    color: inherit !important;
}
/* Footer action buttons */
.cr-sidebar button {
    color: var(--cr-muted) !important;
}
.cr-sidebar button:hover {
    color: var(--cr-text) !important;
    background: var(--cr-accent-soft) !important;
}
.cr-sidebar .cr-logout-btn:hover {
    color: var(--cr-danger) !important;
}

/* Sidebar open state on mobile — overrides inline default transform */
.cr-layout-sidebar.cr-sidebar-open {
    transform: translateX(0) !important;
}

/* ─── Typography helpers ──────────────────────────────────────────── */
.cr-num {
    font-size: 34px;
    font-weight: var(--cr-w-num);
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--cr-text);
}
.cr-label {
    /* Block by default. A form label sits above its field everywhere in this
       product, and without this every <label class="cr-label"> that is not
       wrapped in its own block flows inline with the input beside it - which is
       why a form could look correct in one page and scrambled in the next
       depending on how its markup happened to be nested. The two places that
       genuinely want an inline label override this with display:inline. */
    display: block;
    font-size: 11px;
    font-weight: var(--cr-w-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cr-muted);
    margin-bottom: 6px;
}
.cr-title {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--cr-text);
}
/* A heading for a section INSIDE a card, one step up from .cr-title. Was
   referenced by several pages while never being defined, so every use rendered
   as a browser-default <h2>/<h3> - 24px bold roman against a 10-12px thin
   uppercase system, which is why those sections looked like a different
   product. */

.cr-sub {
    font-size: 12px;
    font-weight: var(--cr-w-body);
    color: var(--cr-muted);
    letter-spacing: 0;
}

/* A posting's own words, laid out to read: the labelled lines it opens with as
   a grid, then its headings, paragraphs and bullets. Its text arrives as one
   block with the employer's layout still in it, so without this a role reads
   as a wall of preformatted text. */
.cr-facts {
    display: grid;
    gap: 12px 20px;
    grid-template-columns: minmax(0, 1fr);
    margin: 0 0 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--cr-line);
}
@media (min-width: 560px) { .cr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cr-fact { min-width: 0; }
.cr-fact .cr-label { margin-bottom: 2px; }
.cr-fact dd { margin: 0; font-size: 13px; line-height: 1.45; color: var(--cr-text); overflow-wrap: anywhere; }

.cr-prose > :first-child { margin-top: 0; }
.cr-prose > :last-child { margin-bottom: 0; }
.cr-prose p { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--cr-text); }
.cr-prose h3 {
    margin: 20px 0 8px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cr-muted);
}
.cr-prose ul { margin: 0 0 12px; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--cr-text); }
.cr-prose li { margin-bottom: 4px; }
.cr-prose li::marker { color: var(--cr-muted); }

/* Every page's #main-content already fades in uniformly via the
   cr-page-enter animation defined near the bottom of this file (180ms,
   subtle) - that part is automatic and never needs touching per-page.
   .cr-fade is the SECOND, more pronounced layer (550ms, bigger translateY,
   staggered per nth-child) that most content pages additionally put on
   their main card - add it to a new page's primary content card too, or its
   entrance will feel abruptly faster than the rest of the app by
   comparison (this was a real, reported bug on a few pages that had been
   missed - see security_roles.html, documents/new.html, documents/detail.html). */

@keyframes crFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Shell layout — mirrors the standalone mockup ───────────────────
   Desktop: padded shell, sidebar is sticky in-flow (floating card).
   Mobile:  sidebar is fixed overlay; shell padding collapses.         */

.cr-shell {
    display: flex;
    height: 100dvh;
    overflow: hidden;
    padding: 14px;
    gap: 14px;
    background: transparent;
}

/* Sidebar: fixed overlay on mobile; fixed floating card on desktop */
.cr-layout-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    /* dvh, not vh: on Edge for Android the address bar sits at the bottom,
       and a 100vh sidebar ran under it, hiding Sign out. */
    height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 40;
    transition: transform 300ms ease-in-out;
    border-radius: 0;
}
@media (min-width: 1024px) {
    .cr-layout-sidebar {
        position: fixed !important;
        top: 18px !important;
        left: 18px !important;
        height: calc(100dvh - 36px) !important;
        border-radius: 18px !important;
        transform: translateX(0) !important;
        overflow-y: auto;
    }
    /* Clear the 224px sidebar while keeping a compact content gap. */
    .cr-shell {
        padding-left: calc(224px + 18px + 8px);
    }
}

/* Main content column */
.cr-layout-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Page padding — replaces <main class="p-xl gap-xl"> */
.cr-layout-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 24px 16px 48px;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    background: radial-gradient(ellipse at 91% 0%, rgba(241, 190, 153, .13), transparent 36%);
}
.cr-layout-content > *, .cr-detail-grid > *, .cr-form-grid > * { min-width: 0; max-width: 100%; }
/* The content column scrolls, so its children keep their own height. Without
   this a card with overflow hidden (a flush table, the profile tabs) shrank
   to a sliver on long pages instead of the page scrolling. */
.cr-layout-content > * { flex-shrink: 0; }

.cr-layout-content img, .cr-layout-content video, .cr-layout-content canvas { max-width: 100%; }
@media (max-width: 640px) {
    .cr-shell {
        padding: 0;
        height: 100dvh;
    }
    /* Phones: tighter gutters so lists show more per screen. */
    .cr-layout-content {
        padding: 12px 8px 28px;
    }
}

/* Status tags — pill shapes with an outline and a status colour */
.cr-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--cr-field);
    border: 1px solid var(--cr-line);
    color: var(--cr-text);
}
.cr-tag-danger {
    background: rgba(239, 91, 91, 0.1);
    color: var(--cr-danger);
}
.cr-tag-warning {
    background: rgba(243, 177, 75, 0.13);
    color: #b9842b;
}
.cr-tag-success {
    background: rgba(54, 194, 140, 0.1);
    color: #1a7a52;
}

.cr-tag-muted {
    background: rgba(111, 125, 140, 0.12);
    color: var(--cr-muted);
}

/* ═══════════════════════════════════════════════════════════════
   REMAINING UTILITY CLASSES (Tailwind holdovers)
   ═══════════════════════════════════════════════════════════════ */

.cr-font-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; }

/* Card header row — title + optional link */
.cr-card-hd {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* space-between alone puts nothing between the two sides, so a header
       whose subtitle runs long closed the gap entirely and the text ended up
       against the figure on the right. */
    gap: 16px;
    margin-bottom: 20px;
}
/* Page-level heading */
.cr-page-title {
    font-size: 28px;
    font-weight: var(--cr-w-light);
    letter-spacing: -0.01em;
    color: var(--cr-text);
    /* A long unbroken title (a vendor or audit name with no spaces)
       overflowed its row and pushed the header actions aside. Break it
       anywhere rather than let it bleed past the content edge. */
    overflow-wrap: anywhere;
}
.cr-page-title strong {
    font-weight: 400;
}

/* Page header row - the page_header component in
   templates/components/page_header.html. Title on the left, search and
   action buttons on the right; the mobile rule below drops the actions
   to their own right-aligned line when the title no longer fits beside
   them. */
.cr-page-hd {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 18px;
    flex-shrink: 0;
    padding: 24px 28px;
    border: 1px solid #ecd9cc;
    border-radius: 16px;
    background: radial-gradient(circle at 92% 8%, rgba(244, 183, 141, .26), transparent 34%), linear-gradient(120deg, #fff9f4, #fffdfb 76%);
}
.cr-page-hd .cr-page-title { font-size: clamp(27px, 3vw, 36px); letter-spacing: -.045em; }
.cr-page-hd .cr-sub { color: var(--cr-muted); font-size: 13px; line-height: 1.6; }
.cr-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ─── Dashboard grid ──────────────────────────────────────────────── */

.cr-grid-2eq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

/* Shared page layouts. Keep column decisions out of individual templates. */
.cr-detail-grid,
.cr-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr);
    gap: 20px;
    align-items: start;
}
.cr-panel-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cr-form-card { width: 100%; max-width: 760px; }

.cr-two-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cr-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cr-toolbar > :last-child.cr-toolbar-action { margin-left: auto; }
@media (max-width: 1050px) {
    .cr-detail-grid,
    .cr-form-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    
    .cr-grid-2eq {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .cr-two-field-grid { grid-template-columns: 1fr; }
    .cr-page-hd { padding: 21px 20px; }
    
    .cr-card { padding: 14px !important; }
    .cr-card-flush { padding: 0 !important; }
    .cr-num {
        font-size: 28px;
    }
    /* Page headers: at 26px the title crowded the search box and buttons
       out of the row. Shrink it and give the search/actions their own
       right-aligned line, with the search stretched full width beneath
       the title and any buttons right-aligned under the search. */
    .cr-page-title { font-size: 24px; }
    .cr-page-hd {
        align-items: flex-start;
    }
    .cr-page-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .cr-page-actions .cr-search-wrap {
        flex: 1 1 100%;
    }
    .cr-page-actions .cr-search {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.cr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 15px;
    border-radius: 9px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
    white-space: nowrap;
    outline: none;
}
.cr-btn:focus-visible,
.cr-input:focus-visible,
.cr-select:focus-visible,
.cr-textarea:focus-visible,
.cr-table a:focus-visible,
.cr-chip:focus-visible {
    outline: 2px solid var(--cr-accent);
    outline-offset: 2px;
}
/* Square button for a control whose glyph already says what it does, so the
   label beside it would only repeat it. Keeps .cr-btn's height so it lines up
   with a labelled button on the same row. */

.cr-btn-sm { padding: 6px 11px; font-size: 11px; }
.cr-btn-xs { padding: 4px 8px; font-size: 10px; }
.cr-btn:disabled, .cr-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
}

.cr-btn-primary { background: var(--cr-accent); color: #fff; }
.cr-btn-primary:hover { background: var(--cr-accent-hover); transform: translateY(-1px); }

.cr-btn-outline {
    background: transparent;
    color: var(--cr-text);
    /* var(--cr-line) is nearly invisible against the page background at
       rest - this button needs to read as a button before you hover it. */
    border: 1px solid rgba(80, 90, 104, 0.35);
    background: var(--cr-field);
}
.cr-btn-outline:hover { border-color: var(--cr-accent); color: var(--cr-accent); }

/* Full-width, left-aligned button with a leading icon - the audit overview
   sidebar's nav-to-subpage links. */

.cr-btn-ghost { background: transparent; color: var(--cr-muted); }
.cr-btn-ghost:hover { background: var(--cr-accent-soft); color: var(--cr-accent); }

/* An AI action like "Improve with AI": tinted so it reads as a button next
   to a field, quieter than primary, with the sparkle beside its label. */
.cr-btn-ai {
    background: var(--cr-accent-soft);
    border: 1px solid var(--cr-accent-line);
    color: var(--cr-accent);
}
.cr-btn-ai:hover { background: var(--cr-accent-tint); border-color: var(--cr-accent); }
.cr-btn-ai .material-symbols-outlined { font-size: 13px; }

.cr-btn-danger { background: var(--cr-danger); color: #fff; }
.cr-btn-danger:hover { filter: brightness(0.93); }

.cr-btn-success { background: var(--cr-success); color: #fff; }
.cr-btn-success:hover { filter: brightness(0.93); }

/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */

.cr-table { width: 100%; min-width: 600px; border-collapse: collapse; }
.cr-th {
    text-align: left;
    font-size: 11px;
    font-weight: var(--cr-w-ui);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cr-muted);
    padding: 14px 20px;
    border-bottom: 1px solid var(--cr-line);
}
.cr-tr { border-bottom: 1px solid var(--cr-line); transition: background 150ms ease; }
.cr-tr:last-child { border-bottom: none; }
.cr-tr:hover { background: var(--cr-hover); }
/* A row that opens its item: the .cr-row-link inside stretches over the
   whole row, and the row's own controls sit above it so they still work. */
.cr-tr.cr-tr-clickable { cursor: pointer; position: relative; }
.cr-tr-clickable .cr-row-link::after { content: ''; position: absolute; inset: 0; }
.cr-tr-clickable :is(button, select, input, textarea, label, a:not(.cr-row-link)) { position: relative; z-index: 1; }

.cr-td { padding: 15px 20px; font-size: 13px; font-weight: var(--cr-w-body); color: var(--cr-text); vertical-align: top; }

.cr-table .cr-td a { color: var(--cr-text); font-weight: var(--cr-w-body); }
.cr-td-muted { color: var(--cr-muted); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE GRIDS
   ═══════════════════════════════════════════════════════════════ */
.cr-grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }

@media (min-width: 768px) {
    .cr-grid-2 { grid-template-columns: repeat(2, 1fr); }
    
}

/* Category / theme chip */
.cr-chip {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: var(--cr-w-body);
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(111,125,140,0.1);
    color: var(--cr-muted);
    white-space: nowrap;
}

/* Accent variant of cr-chip — used for framework-criteria references,
   which can run long, so (unlike cr-chip) this wraps instead of overflowing. */
.cr-chip-accent {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: var(--cr-w-ui);
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--cr-accent-soft);
    color: var(--cr-accent);
    white-space: normal;
    max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════ */

.cr-modal {
    background: var(--cr-card);
    border-radius: var(--cr-radius);
    box-shadow: var(--cr-shadow-hover);
    border: 1px solid var(--cr-line);
    overflow: hidden;
    width: 100%;
    /* Bound to the portal (viewport minus its 16px padding). Without this a
       tall modal simply grows past the screen: the portal is position:fixed
       so the page behind it cannot scroll, and a centred flex item overflows
       both ends equally - so the header AND the submit button end up
       off-screen and the modal reads as a dimmed backdrop with nothing on it.
       With a bound, .cr-modal-body takes the overflow and scrolls.

       Viewport units rather than a percentage: every wrapper between the
       portal and the modal is auto-height, and a percentage max-height against
       an auto-height parent resolves to none. The 32px is the portal's own
       16px padding, top and bottom. */
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    animation: cr-modal-enter 200ms ease both;
}

/* Most modals wrap their body and footer in a <form>. That form is the flex
   child that has to give, or the bound above just clips it. */
.cr-modal > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
@keyframes cr-modal-enter {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cr-modal-hd {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid var(--cr-line);
    flex-shrink: 0;
}

.cr-modal-title { font-size: 15px; font-weight: 400; color: var(--cr-text); letter-spacing: 0.01em; }

.cr-modal-body { padding: 20px; overflow-y: auto; flex: 1; overscroll-behavior: contain; }

/* No colour of its own: .cr-doc-page a already makes links accent-coloured,
   and a contents entry is a link. */

.cr-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--cr-line);
    flex-shrink: 0;
}
/* Disclosure <summary>. A summary expands a section; it never commits
   anything. Styled as .cr-btn-outline it was indistinguishable from the
   Save and Link buttons beside it, so "Set a plan" read as a control that
   sets a plan rather than one that shows the form for setting one. Pair
   this with .cr-btn .cr-btn-ghost .cr-btn-sm to match the chevron toggles
   used for the same interaction elsewhere. */
.cr-disclosure { cursor: pointer; list-style: none; }
.cr-disclosure::-webkit-details-marker { display: none; }
.cr-disclosure::marker { content: ""; }
.cr-disclosure-chevron { font-size: 14px; transition: transform 200ms ease; }
details[open] > .cr-disclosure .cr-disclosure-chevron { transform: rotate(90deg); }

/* Callout - an icon and a sentence, used for verdicts and guidance. */
.cr-callout {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px;
    border-radius: 10px;
    /* --cr-surface is #fff, the same as --cr-card, so a callout painted
       with it was invisible on a modal. --cr-bg reads as recessed. */
    background: var(--cr-bg);
    font-size: 12px;
    font-weight: 300;
    color: var(--cr-text);
    line-height: 1.5;
}
.cr-callout .material-symbols-outlined {
    font-size: 17px;
    flex-shrink: 0;
    margin-top: 1px;
}
.cr-callout-accent { background: var(--cr-accent-soft); }
.cr-callout-accent .material-symbols-outlined { color: var(--cr-accent); }

.cr-callout-danger .material-symbols-outlined { color: var(--cr-danger); }

.cr-callout strong { font-weight: var(--cr-w-body); }
.cr-callout a { color: var(--cr-accent); }

/* Form fields inside a modal section. Fields size themselves off the
   available width instead of the fixed pixel widths that used to leave
   a ragged half-empty row on wide modals and overflow on narrow ones. */

.cr-field > .cr-label { display: block; margin-bottom: 4px; }
.cr-field > .cr-input,
.cr-field > .cr-select,
.cr-field > .cr-textarea { width: 100%; box-sizing: border-box; }

/* Inline select inside filter bar */
.cr-select {
    background: var(--cr-card);
    border: 1px solid var(--cr-line);
    border-radius: 9px;
    padding: 9px 28px 9px 12px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: var(--cr-w-body);
    letter-spacing: 0;
    color: var(--cr-text);
    cursor: pointer;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%237b8794' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    transition: border-color 150ms;
}
.cr-select:focus { border-color: var(--cr-accent); box-shadow: var(--cr-ring); }

/* ── Input & textarea ────────────────────────────────────── */
.cr-input {
    background: var(--cr-field);
    border: 1px solid var(--cr-line);
    border-radius: 9px;
    padding: 9px 12px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: var(--cr-w-body);
    letter-spacing: 0;
    color: var(--cr-text);
    outline: none;
    transition: border-color 150ms;
    box-sizing: border-box;
}
.cr-input:focus { border-color: var(--cr-accent); box-shadow: var(--cr-ring); }
.cr-input::placeholder { color: var(--cr-placeholder); }

/* A text box that holds what was added to it as tags: places on a search.
   Looks like .cr-input; the input inside has no frame of its own. */
.cr-tag-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px; padding: 4px 6px; background: var(--cr-field); border: 1px solid var(--cr-line); border-radius: 9px; box-sizing: border-box; cursor: text; transition: border-color 150ms; }
.cr-tag-input:focus-within { border-color: var(--cr-accent); box-shadow: var(--cr-ring); }
.cr-tag-input > input:not([type=hidden]) { flex: 1 1 140px; min-width: 0; border: 0; outline: none; background: transparent; padding: 5px 6px; font: 400 13px 'Inter', system-ui, sans-serif; color: var(--cr-text); }
.cr-tag-input > input::placeholder { color: var(--cr-placeholder); }
.cr-tag-x { border: 0; background: none; padding: 0 0 0 2px; font-size: 14px; line-height: 1; color: inherit; opacity: .6; cursor: pointer; }
.cr-tag-x:hover { opacity: 1; }

textarea.cr-input {
    resize: vertical;
    line-height: 1.55;
}

/* Empty state */
.cr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}
.cr-empty-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: var(--cr-accent-soft);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
    color: var(--cr-accent);
    font-size: 22px;
}
.cr-empty-title { font-size: 15px; font-weight: 400; color: var(--cr-text); margin-bottom: 4px; }

/* ── Search input ───────────────────────────────────────── */
.cr-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.cr-search-wrap .cr-search-icon {
  position: absolute;
  left: 8px;
  font-size: 15px;
  color: var(--cr-muted);
  pointer-events: none;
  user-select: none;
}
.cr-search {
  height: 38px;
  width: 180px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--cr-line);
  border-radius: 6px;
  background: #fff;
  color: var(--cr-text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.cr-search:focus { border-color: var(--cr-accent); }
.cr-search::placeholder { color: var(--cr-placeholder); }

/* ── Pagination bar ─────────────────────────────────────── */
.cr-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--cr-line);
  flex-shrink: 0;
  background: var(--cr-card);
}

.cr-pager-info {
  font-size: 11px;
  color: var(--cr-muted);
  min-width: 28px;
  text-align: center;
}

/* ── Toast stack (shared across app layouts + base.html) ──
   Top-right, capped at 3 visible (see toast.html); each dismisses on its
   own timer by id, not a shared shift, so mixed error/success durations
   never remove the wrong one. */
.toast-stack {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
  pointer-events: none;
}
.toast-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--cr-card);
  box-shadow: var(--cr-shadow-hover);
  border: 1px solid;
  pointer-events: auto;
  /* Enter animation lives here (not Tailwind utility classes) so it works
     without a css rebuild and can't be purged; leave is Alpine x-transition. */
  animation: toast-in 220ms ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
.toast-error { border-color: rgba(239, 91, 91, 0.3); }
.toast-error .toast-icon, .toast-error .toast-text { color: var(--cr-danger); }
.toast-success { border-color: rgba(54, 194, 140, 0.3); }
.toast-success .toast-icon, .toast-success .toast-text { color: var(--cr-success); }
.toast-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.toast-text { font-size: 12px; font-weight: var(--cr-w-light); flex: 1; margin: 0; }
.toast-close {
  color: rgba(100, 100, 100, 0.5);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

/* 680px is the readable column the page was already using; the ratio is the
   paper's own - A4 is 210x297mm, US Letter 216x279mm. */
:root { --cr-page-width: 680px; --cr-page-ratio: 210 / 297; }

/* select.js hides the native select and inserts a .cs-wrapper sibling, so
   an alignment rule aimed only at .cr-select stops applying the moment a
   longer label wraps and the columns need it most. */

.cr-tag-outline { background:transparent;border:1px solid var(--cr-line);color:var(--cr-muted) }

/* ═══════════════════════════════════════════════════════════════
   ESSENTIALS (page transitions, htmx animations, a11y)
   ═══════════════════════════════════════════════════════════════ */
[x-cloak] { display: none !important; }

/* Page entrance */
#main-content { animation: cr-page-enter 0.18s ease-out both; }
@keyframes cr-page-enter { 0% { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* HTMX row animations */
.htmx-added > tr, tr.htmx-added { animation: cr-row-appear 0.2s ease-out forwards; }
@keyframes cr-row-appear { 0% { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.htmx-swapping > tr, tr.htmx-swapping { animation: cr-row-remove 0.18s ease-in forwards; overflow: hidden; }
@keyframes cr-row-remove { 0% { max-height: 4rem; opacity: 1; transform: translateX(0); } to { max-height: 0; opacity: 0; padding: 0; transform: translateX(6px); } }
.htmx-indicator { opacity: 0; transition: opacity 0.2s ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* Framework table swap transition */
#criteria-table.htmx-swapping { opacity: 0; transition: opacity 150ms ease; }
#criteria-table.htmx-added { animation: cr-page-enter 0.2s ease-out forwards; }

/* Spinner */
@keyframes cr-spin { to { transform: rotate(1turn); } }
.animate-spin { animation: cr-spin 1s linear infinite; }

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
    #main-content, .htmx-added > tr, .htmx-swapping > tr, tr.htmx-added, tr.htmx-swapping { animation: none !important; transition: none !important; }
}

/* A card that hands its padding to its own contents - a flush table, a
   list with its own row insets. Used on 32 pages. */
.cr-card-flush { padding: 0; overflow: hidden; }
.cr-card-flush:hover { transform: none; box-shadow: var(--cr-shadow); }

/* Multi-line sibling of .cr-input. */
.cr-textarea {
    background: var(--cr-card);
    border: 1px solid var(--cr-line);
    border-radius: 9px;
    padding: 10px 12px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: var(--cr-w-body);
    line-height: 1.6;
    color: var(--cr-text);
    outline: none;
    resize: vertical;
    transition: border-color 150ms;
}
.cr-textarea:focus { border-color: var(--cr-accent); box-shadow: var(--cr-ring); }

/* Compact select for toolbars and table rows. */
.cr-select-sm { padding: 4px 24px 4px 9px; font-size: 11px; }

/* ── Hint tooltip ────────────────────────────────────────
   Guidance that only matters at the moment of doubt. Keeps
   explanatory prose out of the layout without losing it. */
.cr-hint {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--cr-muted);
    cursor: help;
    vertical-align: middle;
}
.cr-hint > .material-symbols-outlined { font-size: 14px; }
.cr-hint-body {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    width: max-content;
    max-width: 260px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--cr-text);
    color: var(--cr-card);
    font-size: 11px;
    font-weight: var(--cr-w-light);
    line-height: 1.55;
    text-align: left;
    white-space: normal;
    /* Every hint trigger sits inside a .cr-label, which is uppercase with
       0.1em tracking. Without resetting both, a sentence-long tooltip was
       rendered as shouting. */
    text-transform: none;
    letter-spacing: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    box-shadow: var(--cr-shadow-hover);
}
/* Inside a scrolling modal body a tooltip above the trigger clips against
   the header, so triggers near the top opt into downward placement. */
.cr-hint-below .cr-hint-body { bottom: auto; top: calc(100% + 8px); }
.cr-hint:hover .cr-hint-body,
.cr-hint:focus .cr-hint-body,
.cr-hint:focus-visible .cr-hint-body { opacity: 1; visibility: visible; }

/* Shared market choices in first-use setup and account settings. */
.cr-target-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-target-grid label { position: relative; cursor: pointer; }
.cr-target-grid input { position: absolute; opacity: 0; }
.cr-target-grid span { display: block; padding: 9px 12px; border: 1px solid var(--cr-line); border-radius: 7px; background: #fff; color: var(--cr-muted); font-size: 12px; }
.cr-target-grid input:checked + span { border-color: #d3a183; background: #fdf0e8; color: #8f4329; }
.cr-target-grid label:focus-within { outline: 2px solid var(--cr-accent); outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════
   WELCOME LOOK
   The welcome flow's pieces, shared so app pages can use them at
   working size. Page content fades up on load like a welcome step.
   ═══════════════════════════════════════════════════════════════ */

.cr-layout-content { animation: cr-enter .35s ease both; }
@keyframes cr-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Small uppercase accent line above a heading */
.cr-eyebrow { margin: 0 0 8px; color: var(--cr-accent); font-size: 11px; font-weight: var(--cr-w-ui); letter-spacing: .12em; text-transform: uppercase; }

/* A radio or checkbox as a whole clickable row: input, icon tile, text, tick */
.cr-choice { display: grid; grid-template-columns: 20px 36px minmax(0, 1fr) 20px; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid #dfe2e9; border-radius: 12px; background: rgba(255,255,255,.78); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.cr-choice:hover { border-color: #e0b69e; transform: translateY(-1px); }
.cr-choice:has(input:checked) { border-color: #d3a183; background: var(--cr-accent-tint); box-shadow: var(--cr-ring); }
.cr-choice:focus-within { outline: 2px solid var(--cr-accent); outline-offset: 2px; }
.cr-choice input { width: 16px; height: 16px; accent-color: var(--cr-accent); }
.cr-choice-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #fbe9de; color: var(--cr-accent); font-size: 19px; }
.cr-choice strong { display: block; font-size: 14px; font-weight: 400; }
.cr-choice small { display: block; margin-top: 2px; color: var(--cr-muted); font-size: 12px; }
.cr-choice-check { opacity: 0; color: var(--cr-accent); font-size: 18px; }
.cr-choice:has(input:checked) .cr-choice-check { opacity: 1; }
@media (max-width: 620px) { .cr-choice { grid-template-columns: 20px 32px minmax(0, 1fr); }.cr-choice-check { display: none; } }

/* Segmented tabs on a warm track */
.cr-seg { display: flex; gap: 4px; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 4px; border-radius: 10px; background: #f0e8e2; }
.cr-seg > * { padding: 7px 14px; border-radius: 7px; color: var(--cr-muted); font-size: 12px; white-space: nowrap; }
.cr-seg > .is-active, .cr-seg > [aria-selected=true] { background: #fff; color: var(--cr-text); box-shadow: 0 1px 3px rgba(72,44,30,.08); }

/* Dashed drop zone for a file input */
.cr-upload { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 20px; border: 1px dashed #dba785; border-radius: 13px; background: rgba(255,248,242,.85); text-align: center; cursor: pointer; }
.cr-upload .material-symbols-outlined { color: var(--cr-accent); font-size: 28px; }
.cr-upload strong { font-size: 14px; font-weight: 400; }
.cr-upload small { color: var(--cr-muted); font-size: 11px; }
.cr-upload input { width: 100%; max-width: 250px; margin-top: 8px; color: var(--cr-muted); font-size: 11px; }

/* Tinted callout with the accent colour: a recovery step, a one-time warning */
.cr-callout { padding: 14px 16px; border: 1px solid #eac5aa; border-radius: 10px; background: var(--cr-accent-tint); color: #78442d; font-size: 13px; line-height: 1.5; }
.cr-callout form { margin: 8px 0 4px; }
.cr-callout button { color: var(--cr-accent); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .cr-layout-content { animation: none; }
    .cr-btn, .cr-choice { transition: none; }
    .cr-btn-primary:hover, .cr-choice:hover { transform: none; }
}

/* List controls, native search dialogs and responsive conversation stages. */
dialog.cr-modal { max-width:620px;width:calc(100% - 32px);padding:0;position:fixed;inset:0;margin:auto;color:var(--cr-text); }
dialog.cr-modal:not([open]) { display:none; }
dialog.cr-modal::backdrop { background:rgba(0,0,0,.3); }

/* First-visit guides: a small modal that explains one page or tab until dismissed. */
dialog.cr-guide { max-width:400px;width:calc(100% - 32px);padding:0;position:fixed;inset:0;margin:auto;border:1px solid var(--cr-line);border-radius:16px;box-shadow:0 18px 48px rgba(46,48,47,.18);color:var(--cr-text);background:var(--cr-card); }
dialog.cr-guide:not([open]) { display:none; }
dialog.cr-guide::backdrop { background:rgba(36,48,68,.35); }
.cr-guide-card { margin:0;padding:24px;display:flex;flex-direction:column;gap:10px; }
.cr-guide-icon { width:40px;height:40px;border-radius:10px;background:var(--cr-accent-soft);color:var(--cr-accent);display:flex;align-items:center;justify-content:center; }
.cr-guide-icon .material-symbols-outlined { font-size:22px; }
.cr-guide-title { margin:0;font-size:16px;font-weight:400;color:var(--cr-text); }
.cr-guide-body { margin:0;font-size:13px;line-height:1.6;color:var(--cr-muted); }
.cr-guide-card button { align-self:flex-start; }
.cr-pipeline-board { display:flex;gap:14px;overflow-x:auto;padding-bottom:12px; }
.cr-pipeline-board > .cr-card { flex:1 0 220px;min-width:0; }
.cr-pipeline-item { display:flex;flex-direction:column;gap:5px;padding:12px 0;border-top:1px solid var(--cr-line);color:var(--cr-text);overflow-wrap:anywhere; }
@media (max-width:640px) { .cr-pipeline-board { flex-direction:column;overflow:visible; }.cr-pipeline-board > .cr-card { flex-basis:auto; } }

.cr-result-summary { display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:20px 0; }
.cr-result-summary strong { font-size:36px;font-weight:300;color:var(--cr-accent); }
.cr-outcome-row { margin:14px 0; }
.cr-outcome-row > div:first-child { display:flex;justify-content:space-between;gap:10px;margin-bottom:7px; }
.cr-outcome-track { height:8px;border-radius:8px;background:var(--cr-accent-tint);overflow:hidden; }
.cr-outcome-track > span { display:block;height:100%;background:var(--cr-accent);border-radius:inherit; }

@media (max-width: 640px) {

    .cr-filter-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .cr-filter-form > .cr-select { width: 100% !important; min-width: 0 !important; }
}

.cr-scroll-card { max-height:560px; overflow-y:auto; overscroll-behavior:auto; }

.cr-modal [hidden] { display:none !important; }
.cr-spinner { display:inline-block; font-size:16px; vertical-align:middle; animation:cr-spin 1.2s linear infinite; }
.cr-search-radar { width:150px; height:150px; margin:20px auto 28px; border:1px solid var(--cr-accent-line); border-radius:50%; position:relative; background:repeating-radial-gradient(circle,transparent 0 23px,var(--cr-accent-line) 24px 25px); }
.cr-search-radar::after { content:''; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,transparent 260deg,var(--cr-accent-tint) 330deg,var(--cr-accent) 360deg); animation:cr-spin 2.5s linear infinite; }
.cr-search-radar.is-finished::after { animation:none; opacity:.25; }
@media (prefers-reduced-motion:reduce) { .cr-spinner,.cr-search-radar::after { animation:none; } }

/* Paired settings surfaces share a stable row, with overflow inside each card. */
.cr-grid-paired { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:450px 525px 230px;gap:20px;align-items:stretch; }
.cr-grid-paired > .cr-card { min-width:0;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:auto; }
@media (max-width:900px) {
 .cr-grid-paired {grid-template-columns:minmax(0,1fr);grid-template-rows:auto;}
 .cr-grid-paired > .cr-card {max-height:560px;}
 .cr-grid-paired > #mailbox {height:525px;}
}

/* Search pages: a header row with the search and its actions, then the
   results. Editing the search opens a modal. */
.search-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--cr-line); }

.search-head-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* A long heading (several job titles) shortens rather than running under
   Edit search, which keeps its width. */
.search-head-line > .cr-title { flex-shrink: 1; min-width: 4em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-head > .cr-btn { flex-shrink: 0; }
/* However many places, the pills stay on one line and scroll sideways
   rather than growing the header. */
.search-head-places { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.search-head-places::-webkit-scrollbar { display: none; }
.search-head > div:first-child { flex: 1; min-width: 0; }
.search-head-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* On a phone the search's name gets its own line and the buttons wrap
   under it: side by side, the name was cut to a few letters. */
@media (max-width: 640px) {
    .search-results-card .search-head { flex-direction: column; align-items: stretch; }
    .search-head-actions { justify-content: flex-start; }
}
/* The search fields carry flex sizes for the inline row; stacked in the
   modal those sizes became heights and spread the fields apart. */
/* The business search: what and where side by side, then what narrows it
   and the button, all stacked on a phone. */
.search-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px 12px; align-items: start; padding: 16px; border-bottom: 1px solid var(--cr-line); }
.search-form-foot { grid-column: 1 / -1; display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.search-form-foot > .cr-field { flex: 1 1 200px; min-width: 0; max-width: 300px; }
.search-form-foot > .cr-field > .cr-select { width: 100% !important; min-width: 0 !important; }
.search-form-foot > .cr-btn { margin-left: auto; }
.search-edit-body .search-form-foot > .cr-field { max-width: none; }
.find-places:not(:empty) { margin-top: 8px; }
@media (max-width: 640px) {
    .search-form { grid-template-columns: minmax(0, 1fr); padding: 12px; }
    .search-form-foot > .cr-field { max-width: none; }
    .search-form-foot > .cr-btn { width: 100%; justify-content: center; margin-left: 0; }
}
.search-edit-body { display: flex; flex-direction: column; gap: 14px; }
.search-edit-body > * { flex: none !important; }
/* A plan limit reached, with the way on: the warm gradient of page headers. */
.cr-upsell { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding: 20px 22px; border: 1px solid #ecd9cc; border-radius: 14px; background: radial-gradient(circle at 92% 8%, rgba(244, 183, 141, .32), transparent 40%), linear-gradient(120deg, #fff4ec, #fffdfb 76%); }

@media (max-width: 600px) {
 .search-contact-actions { position: sticky; top: 0; z-index: 2; background: var(--cr-surface, #fff); gap: 8px; }
 .search-business-table, .search-jobs-table { min-width: 0; }
 .search-business-table thead, .search-jobs-table thead { display: none; }
 .search-business-table tbody, .search-jobs-table tbody { display: block; }
 .search-business-table .cr-tr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; padding: 10px 10px; border-bottom: 1px solid var(--cr-line); gap: 2px 8px; }
 .search-business-table .cr-td, .search-jobs-table .cr-td { padding: 1px 0 !important; border: 0; white-space: normal; overflow-wrap: anywhere; }
 .search-business-table .cr-td:nth-child(1) { padding-top: 3px !important; }
 .search-business-table .cr-td:nth-child(3) { display: flex; align-items: center; gap: 2px; }
 .search-business-table input[type=checkbox] { width: 18px; height: 18px; margin: 0; }
 .search-results-card .search-head, .search-results-card .search-contact-actions { padding: 10px; }
 
 /* After the star column went, a row is the role with its company and tags,
    the place under it to the left and the date to the right of it, with the
    action level with the role. Laid out for the old five columns, the role
    landed in the star column's 28px sliver and wrapped one letter a line. */
 .search-jobs-table .cr-tr { display: grid; grid-template-columns: minmax(0,1fr) auto; padding: 12px 10px; gap: 2px 8px; border-bottom: 1px solid var(--cr-line); align-items: start; }
 .search-jobs-table .cr-td:nth-child(1) { grid-column: 1; grid-row: 1; }
 .search-jobs-table .cr-td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 12px; }
 .search-jobs-table .cr-td:nth-child(3) { grid-column: 2; grid-row: 2; font-size: 12px; text-align: right; }
 .search-jobs-table .cr-td:nth-child(4) { grid-column: 2; grid-row: 1; }
 .search-jobs-table .cr-td[colspan] { grid-column: 1 / -1; }

 /* Member tables that stop being tables on a phone: the title cell keeps the
    body size in the left column, the row's action sits to its right, and any
    other cells become 12px lines under the title, labelled by data-label
    because their column headers are hidden. A cell's inline grid placement
    only takes effect here, where the row is a grid, so templates can order
    their own rows without a page-specific class. */
 .cr-table-stack { min-width: 0; }
 .cr-table-stack thead { display: none; }
 .cr-table-stack tbody { display: block; }
 .cr-table-stack .cr-tr { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 8px; padding: 10px; border-bottom: 1px solid var(--cr-line); align-items: start; }
 .cr-table-stack .cr-td { padding: 1px 0 !important; border: 0; font-size: 12px; white-space: normal !important; overflow-wrap: anywhere; }
 .cr-table-stack .cr-td:first-child { font-size: 13px; }
 .cr-table-stack .cr-td[colspan] { grid-column: 1 / -1; font-size: 13px; }
 .cr-table-stack .cr-td[data-label]::before { content: attr(data-label) " · "; color: var(--cr-muted); }
}

/* Search rows: the city, then icons for the ways to reach the business;
   once the member has the contacts, they show under the name. */
.search-where { display: flex; align-items: flex-start; gap: 3px; margin-top: 2px; }
/* A business's name in the results opens its details. */
.search-name { border: 0; background: none; padding: 0; font: inherit; color: var(--cr-text); text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--cr-line); text-underline-offset: 3px; }
.search-name:hover { text-decoration-color: currentColor; }
.search-where .material-symbols-outlined { font-size: 14px; margin-top: 1px; }
.search-reach-line { margin-top: 2px; }
.search-reach { display: inline-flex; align-items: center; gap: 1px; margin-left: 5px; font-size: 11px; }
.search-reach .material-symbols-outlined { font-size: 15px; }
.search-where-sep { margin: 0 4px; color: var(--cr-line-strong, #d8dbe2); }
.search-contacts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; }
.search-contacts a { display: inline-flex; align-items: center; gap: 4px; color: var(--cr-text); overflow-wrap: anywhere; }
.search-contacts .material-symbols-outlined { font-size: 14px; color: var(--cr-muted); }
.search-row-actions { text-align: right; white-space: nowrap; }

/* My leads: the profile and filters sit beside the tabs, outside the card,
   so the card is all leads. On a phone Filters shrinks to its icon. */
.leads-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.leads-bar > .cr-seg { margin-bottom: 0 !important; }
.leads-bar-controls { display: flex; align-items: center; gap: 6px; margin: 0; min-width: 0; }
.leads-bar-controls .cr-select { width: auto !important; min-width: 0 !important; max-width: 150px !important; }
@media (max-width: 600px) {
 .leads-table thead { display: none; }
 .leads-table, .leads-table tbody { display: block; min-width: 0 !important; }
 .leads-table .cr-tr { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 0 6px; padding: 8px 10px; border-bottom: 1px solid var(--cr-line); }
 .leads-table .cr-td { padding: 0 !important; border: 0; }
 .leads-table .cr-td-empty { grid-column: 1 / -1; }
}

/* A table with nothing to list says so in the middle of the card, not
   squeezed into the first cell's width. */
.cr-tr > .cr-td.cr-td-empty { padding: 40px 16px !important; text-align: center; white-space: normal !important; }
.cr-td-empty .cr-btn { margin-top: 10px; }
@media (max-width: 600px) { .cr-tr > .cr-td-empty { grid-column: 1 / -1 !important; } }

/* Live OpenStreetMap results, laid out like search rows. */
.osm-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--cr-line); }
.osm-reach .material-symbols-outlined { font-size: 15px; margin-right: 4px; vertical-align: -3px; }
.osm-actions { display: flex; gap: 2px; flex-shrink: 0; }

/* Accessibility: field borders meet 3:1, small buttons keep a 24px target
   (40px for touch), and the skip link shows only when focused. */
.cr-input, .cr-select, .cr-textarea, .cr-search, .cr-tag-input { border-color: var(--cr-field-line); }
.cr-btn-xs { min-height: 24px; }
@media (pointer: coarse) { .cr-btn-sm, .cr-btn-xs { min-height: 40px; } }
.cr-skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: 8px; background: #fff; border: 1px solid var(--cr-line); color: var(--cr-text); font-size: 13px; text-decoration: none; transition: top .15s; }
.cr-skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }