@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: block; src: url('/assets/fonts/geist-var.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: block; src: url('/assets/fonts/geist-mono-var.woff2') format('woff2'); }

/* Minimal functional admin styling. Not a design pass — placeholder until
   the branded design system lands. */

html {
    --mr-font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mr-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Palette: change --mr-accent and --mr-on-accent in the light block and in BOTH dark blocks (a test keeps those two identical); the sidebar active shade derives from the accent. */
:root {
    --mr-bg: #f5f6f8;
    --mr-surface: #ffffff;
    --mr-border: #e4e6eb;
    --mr-text: #0f1115;
    --mr-text-muted: #545c6b;
    --mr-accent: #0891b2;
    --mr-accent-ink: color-mix(in srgb, var(--mr-accent) 72%, black);
    --mr-sidebar-bg: #0a0b10;
    --mr-sidebar-text: #c9cbd1;
    --mr-sidebar-active: color-mix(in srgb, var(--mr-accent) 80%, white);

    /* Text that sits ON the accent: white on the light theme's blue, near
       black on the dark theme's lighter blue. */
    --mr-on-accent: #06202a;

    /* The dashboard chart's second line. Series one is the brand accent, so
       this is deliberately the far side of the wheel from it: a warm/cool
       pair survives red-green and green-blue color blindness, where two
       neighboring hues would collapse into one. Teal 800 here, 6.61:1 on
       the card and 3.24:1 against the accent line beside it. */
    --mr-series-2: #00695c;
    --mr-series-3: #8a94a6;

    --mr-success: #0f7c3a;
    --mr-success-bg: #e6f8ed;
    --mr-success-tint: rgba(15, 124, 58, 0.12);
    --mr-success-border: #aee7c4;
    --mr-danger: #b3261e;
    --mr-danger-bg: #fdecea;
    --mr-danger-border: #d33;
    --mr-danger-tint: rgba(211, 51, 51, 0.08);
    --mr-danger-border-soft: #f3c3bd;
    --mr-info: #2563eb;
    --mr-info-bg: #e8eefc;
    --mr-info-tint: rgba(91, 154, 255, 0.15);
    --mr-warn: #a15c00;
    --mr-blazing: #d9482b;
    --mr-hot: #b8301a;
    --mr-warn-bg: #fff3e0;
    --mr-warn-tint: rgba(161, 92, 0, 0.15);
    --mr-neutral-tint: rgba(107, 114, 128, 0.12);

    --mr-shadow-md: rgba(0, 0, 0, 0.2);
    --mr-shadow-lg: rgba(0, 0, 0, 0.3);
    --mr-overlay: rgba(0, 0, 0, 0.5);
    --mr-hover-tint: rgba(26, 29, 35, 0.09);

    /* Tells the browser to theme what CSS cannot reach: select popups,
       scrollbars, autofill, date pickers. Without it those stay light and
       the theme falls apart at exactly the controls people click. */
    color-scheme: light;
}

/* Dark theme.
 *
 * Two selectors, identical bodies, and they must stay in sync: an explicit
 * choice stamps data-theme on <html> server-side, while "system" defers to the
 * OS. Resolving system in JS instead would paint the light theme first and
 * snap to dark on load. */
:root[data-theme="dark"] {
    /* Surfaces step lighter as they come forward: sidebar darkest, then the
       page, then cards. The sidebar is already dark in the light theme, so
       dark mode is not "make everything dark" — without this ordering the
       shell and the page flatten into one slab. */
    --mr-bg: #07080c;
    --mr-surface: #12141a;
    --mr-border: #262a33;
    --mr-text: #f4f4f7;
    --mr-text-muted: #9aa2ae;
    --mr-accent: #22d3ee;
    --mr-accent-ink: var(--mr-accent);
    --mr-sidebar-bg: #0a0b10;
    --mr-sidebar-text: #c9cbd1;
    --mr-sidebar-active: var(--mr-accent);

    --mr-on-accent: #06202a;

    /* Teal 400, 5.06:1 on the dark card. Teal 800 would sink into it. */
    --mr-series-2: #26a69a;
    --mr-series-3: #5c6577;

    /* Lightened so they clear 4.5:1 against the dark surface; the light
       theme's shades are far too dark to read here. */
    --mr-success: #2ed46a;
    --mr-success-bg: rgba(46, 212, 106, 0.12);
    --mr-success-border: rgba(46, 212, 106, 0.32);
    --mr-success-tint: rgba(46, 212, 106, 0.16);
    --mr-danger: #f87171;
    --mr-danger-bg: rgba(248, 113, 113, 0.12);
    --mr-danger-border: rgba(248, 113, 113, 0.55);
    --mr-danger-border-soft: rgba(248, 113, 113, 0.32);
    --mr-danger-tint: rgba(248, 113, 113, 0.16);
    --mr-info: #7aa5f5;
    --mr-info-bg: rgba(122, 165, 245, 0.12);
    --mr-info-tint: rgba(122, 165, 245, 0.16);
    --mr-warn: #f5b944;
    --mr-blazing: #ff6a45;
    --mr-hot: #e8432a;
    --mr-warn-bg: rgba(245, 185, 68, 0.12);
    --mr-warn-tint: rgba(245, 185, 68, 0.16);
    --mr-neutral-tint: rgba(154, 162, 174, 0.15);

    --mr-shadow-md: rgba(0, 0, 0, 0.5);
    --mr-shadow-lg: rgba(0, 0, 0, 0.65);
    --mr-overlay: rgba(0, 0, 0, 0.65);
    --mr-hover-tint: rgba(255, 255, 255, 0.09);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        /* Surfaces step lighter as they come forward: sidebar darkest, then the
           page, then cards. The sidebar is already dark in the light theme, so
           dark mode is not "make everything dark" — without this ordering the
           shell and the page flatten into one slab. */
        --mr-bg: #07080c;
        --mr-surface: #12141a;
        --mr-border: #262a33;
        --mr-text: #f4f4f7;
        --mr-text-muted: #9aa2ae;
        --mr-accent: #22d3ee;
        --mr-accent-ink: var(--mr-accent);
        --mr-sidebar-bg: #0a0b10;
        --mr-sidebar-text: #c9cbd1;
        --mr-sidebar-active: var(--mr-accent);

        --mr-on-accent: #06202a;

        /* Teal 400, 5.06:1 on the dark card. Teal 800 would sink into it. */
        --mr-series-2: #26a69a;
        --mr-series-3: #5c6577;

        /* Lightened so they clear 4.5:1 against the dark surface; the light
           theme's shades are far too dark to read here. */
        --mr-success: #2ed46a;
        --mr-success-bg: rgba(46, 212, 106, 0.12);
        --mr-success-border: rgba(46, 212, 106, 0.32);
        --mr-success-tint: rgba(46, 212, 106, 0.16);
        --mr-danger: #f87171;
        --mr-danger-bg: rgba(248, 113, 113, 0.12);
        --mr-danger-border: rgba(248, 113, 113, 0.55);
        --mr-danger-border-soft: rgba(248, 113, 113, 0.32);
        --mr-danger-tint: rgba(248, 113, 113, 0.16);
        --mr-info: #7aa5f5;
        --mr-info-bg: rgba(122, 165, 245, 0.12);
        --mr-info-tint: rgba(122, 165, 245, 0.16);
        --mr-warn: #f5b944;
        --mr-blazing: #ff6a45;
        --mr-hot: #e8432a;
        --mr-warn-bg: rgba(245, 185, 68, 0.12);
        --mr-warn-tint: rgba(245, 185, 68, 0.16);
        --mr-neutral-tint: rgba(154, 162, 174, 0.15);

        --mr-shadow-md: rgba(0, 0, 0, 0.5);
        --mr-shadow-lg: rgba(0, 0, 0, 0.65);
        --mr-overlay: rgba(0, 0, 0, 0.65);
        --mr-hover-tint: rgba(255, 255, 255, 0.09);
        color-scheme: dark;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--mr-font);
    background: var(--mr-bg);
    -webkit-font-smoothing: antialiased;
    color: var(--mr-text);
}

.mr-admin-shell {
    display: flex;
    min-height: 100vh;
}

.mr-viewas-bar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    height: 32px;
    padding: 0 1rem;
    background: color-mix(in srgb, var(--mr-accent) 14%, var(--mr-surface, transparent));
    border-bottom: 1px solid color-mix(in srgb, var(--mr-accent) 55%, transparent);
    color: var(--mr-text);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
}

.mr-viewas-bar svg {
    width: 13px;
    height: 13px;
    flex: none;
    color: var(--mr-accent);
}

.mr-viewas-bar strong {
    color: var(--mr-accent);
    font-weight: 650;
}

.mr-viewas-bar form {
    margin: 0;
}

.mr-viewas-exit {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 650;
    text-decoration: underline;
    cursor: pointer;
}

.mr-viewas-exit:hover {
    color: var(--mr-accent);
}

/* On a phone the bar scrolls away in normal flow, so it never covers the menu button or the drawer. */
@media (max-width: 768px) {
    .mr-viewas-bar {
        position: static;
    }
}

/* The sidebar is pinned to the viewport, so it starts below the bar instead of under it. */
@media (min-width: 769px) {
    body:has(.mr-viewas-bar) .mr-sidebar {
        top: 32px;
        height: calc(100vh - 32px);
    }
}

.mr-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--mr-sidebar-bg);
    color: var(--mr-sidebar-text);
    padding: 20px 0 0;
    display: flex;
    flex-direction: column;
    /* Pinned to the viewport, not stretched to the document. As a plain flex
       child it grew to the height of the tallest page, which parked the
       account menu at the bottom of the dashboard instead of on screen.
       The mobile drawer overrides this to position: fixed further down. */
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.mr-sidebar-nav-scroll {
    flex: 1;
    /* Without this a flex child refuses to shrink below its content, so a nav
       taller than the viewport would push the account menu off the bottom
       again even with the sidebar pinned. */
    min-height: 0;
    overflow-y: auto;
}

.mr-sidebar-brand {
    display: block;
    line-height: 0;
    padding: 0 20px 20px;
    font-weight: 700;
    color: #fff;
}

.mr-brand-img {
    height: 32px;
    width: auto;
    display: block;
}

.mr-nav-group {
    list-style: none;
    margin: 0;
    padding: 0 10px;
}

.mr-nav-group a {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    padding: 10px;
    border-radius: 8px;
    color: var(--mr-sidebar-text);
    text-decoration: none;
    font-size: 14px;
}

.mr-nav-group a:hover,
.mr-nav-group a.active,
.mr-nav-has-children summary:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.mr-nav-group a.active .mr-nav-icon {
    color: var(--mr-sidebar-active);
}

.mr-sidebar-foot {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px;
}

.mr-account-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--mr-sidebar-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mr-account-trigger:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.mr-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mr-accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--mr-accent) 40%, transparent);
    color: var(--mr-sidebar-active);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.mr-avatar > span {
    position: relative;
    z-index: 0;
}

.mr-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.mr-avatar--sm {
    width: 22px;
    height: 22px;
    font-size: 9px;
}

.mr-avatar--md {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.mr-avatar--lg {
    width: 44px;
    height: 44px;
    font-size: 15px;
    border-width: 2px;
}

.mr-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mr-name-cell > div {
    min-width: 0;
}

.mr-account-name {
    flex: 1;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-account-chevron {
    width: 14px;
    height: 14px;
    margin-right: 0;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.mr-account-trigger[aria-expanded="true"] .mr-account-chevron {
    transform: rotate(180deg);
}

.mr-account-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 8px;
    right: 8px;
    background: var(--mr-sidebar-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    z-index: 20;
}

.mr-account-menu[hidden] {
    display: none;
}

.mr-account-menu-header {
    padding: 8px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mr-account-menu-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.mr-account-menu-email {
    font-size: 12px;
    color: var(--mr-sidebar-text);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-account-menu a,
.mr-account-menu .mr-nav-signout button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--mr-sidebar-text);
    text-decoration: none;
    font-size: 14px;
}

.mr-account-menu a:hover,
.mr-account-menu .mr-nav-signout button:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

/* Sign out is a POST form so it can carry a CSRF token; it still has to read
   as one more item in the menu, not as a button. */
.mr-account-menu .mr-nav-signout {
    margin: 0;
}

.mr-account-menu .mr-nav-signout button {
    width: 100%;
    background: none;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.mr-account-menu a .mr-nav-icon,
.mr-account-menu .mr-nav-signout .mr-nav-icon {
    margin-right: 0;
}

.mr-nav-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-right: 10px;
}

.mr-nav-has-children summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    list-style: none;
}

.mr-nav-icon-label {
    display: flex;
    align-items: center;
}

.mr-nav-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--mr-sidebar-text);
}

html.mr-nav-ready .mr-nav-chevron {
    transition: transform 0.15s ease;
}

.mr-nav-has-children details[open] > summary .mr-nav-chevron {
    transform: rotate(90deg);
}

.mr-nav-has-children summary::-webkit-details-marker {
    display: none;
}

.mr-nav-has-children ul {
    list-style: none;
    margin: 2px 0 6px 17.5px;
    padding: 0 0 0 11.5px;
    border-left: 1px solid color-mix(in srgb, var(--mr-sidebar-text) 22%, transparent);
}

.mr-nav-has-children ul a {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13.5px;
}

.mr-nav-has-children ul a.active {
    color: var(--mr-sidebar-active);
    background: rgba(255, 255, 255, 0.06);
}

.mr-main {
    flex: 1;
    min-width: 0;
    padding: 32px;
}

.mr-table-wrap {
    overflow-x: auto;
}

.tk-pager {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 20px 14px;
    border-top: 1px solid var(--mr-border);
}

.tk-pager > span {
    font-size: 0.72rem;
    color: var(--mr-text-muted);
    opacity: 0.7;
    letter-spacing: 0.01em;
}

.tk-pager[hidden] {
    display: none;
}

.tk-panel-body:has(> .tk-pager:not([hidden]):last-child),
.tk-panel-body:has(> .mr-table-wrap:last-child) {
    padding-bottom: 0;
}

.tk-pager-pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.tk-pager button,
.tk-pager a,
.tk-pager-pages span {
    all: unset;
    padding: 4px 9px;
    border-radius: 6px;
    border: 1px solid var(--mr-border);
    color: var(--mr-text-muted);
    font-family: var(--mr-font-mono);
    font-size: 0.76rem;
    line-height: 1.4;
}

.tk-pager button,
.tk-pager a {
    cursor: pointer;
}

.tk-pager-pages span {
    border-color: transparent;
    padding: 4px 2px;
}

.tk-pager button:hover,
.tk-pager a:hover {
    color: var(--mr-text);
    border-color: var(--mr-text-muted);
}

.tk-pager button.active,
.tk-pager a.active {
    color: var(--mr-accent-ink);
    border-color: var(--mr-accent-ink);
}

.tk-pager button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Every cell on one line; the wrapper scrolls sideways instead. */
.mr-table--nowrap th,
.mr-table--nowrap td {
    white-space: nowrap;
}

.mr-table--nowrap .tk-row-actions {
    flex-wrap: nowrap;
}

/* A long note kept to two lines inside a one-line table; the whole of it is in the title. */
.mr-cell-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    min-width: 12rem;
    max-width: 26rem;
}

.mr-mobile-topbar {
    display: none;
}

.mr-nav-backdrop {
    display: none;
}

@media (max-width: 768px) {
    .mr-admin-shell {
        display: block;
    }

    .mr-mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: var(--mr-sidebar-bg);
        color: #fff;
        padding: 14px 16px;
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .mr-mobile-topbar-brand {
        font-weight: 700;
        order: 1;
    }

    .mr-nav-toggle {
        background: none;
        border: none;
        color: #fff;
        padding: 4px;
        cursor: pointer;
        line-height: 0;
        order: 2;
    }

    .mr-nav-toggle svg {
        width: 22px;
        height: 22px;
    }

    .mr-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        max-width: 80vw;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 30;
        overflow-y: auto;
    }

    .mr-sidebar.mr-sidebar-open {
        transform: translateX(0);
    }

    .mr-nav-backdrop.mr-nav-backdrop-visible {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 25;
    }

    .mr-main {
        max-width: 100%;
        padding: 20px 16px;
    }
}

.mr-page-title {
    margin: 0 0 24px;
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.mr-card {
    background: var(--mr-surface);
    border: 1px solid var(--mr-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.mr-card h2 {
    margin-top: 0;
    font-size: 16px;
}

/* ── Auth pages (login / forgot / reset) ───────────────────────── */
/* Dark page, not just a dark band behind the logo. */
.mr-auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    padding-bottom: 14vh;
    background: var(--mr-sidebar-bg);
}

.mr-auth-wrap {
    width: 100%;
    max-width: 380px;
}

.mr-auth-brand {
    display: block;
    text-align: center;
    margin-bottom: 20px;
}

.mr-auth-brand img {
    width: 130px;
    max-width: 50%;
    height: auto;
}

.mr-auth-wrap .mr-card {
    margin-bottom: 16px;
}

.mr-auth-foot {
    text-align: center;
    font-size: 12px;
    color: var(--mr-text-muted);
}

/* "Back to sign in" sits under the card, centered, not a raw browser link. */
.mr-auth-link {
    margin: 18px 0 0;
    text-align: center;
    font-size: 13px;
}

.mr-auth-inline-link,
.mr-auth-signout button {
    color: var(--mr-text-muted);
    text-decoration: none;
    font-size: 13px;
}

.mr-auth-inline-link:hover,
.mr-auth-signout button:hover {
    color: var(--mr-accent-ink);
    text-decoration: underline;
}

/* Sits on the auth page itself, not inside the white card, so it needs the
   light-on-dark pair the sidebar uses rather than the card's dark-on-light one. */
.mr-auth-link a {
    color: var(--mr-sidebar-text);
    text-decoration: none;
    font-size: 13px;
}

.mr-auth-link a:hover {
    color: var(--mr-sidebar-active);
    text-decoration: underline;
}

.mr-auth-signout {
    display: inline;
    margin: 0;
}

.mr-auth-signout button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* ── Dashboard: stat cards ─────────────────────────────────────── */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

/* Six cards wrap 5+1 on the auto-fit grid, which reads as a mistake.
   Pin them to an even 3x2 instead. */
.stats--6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Eight cards, the same fix: an even 4x2. */
.stats--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .stats--6,
    .stats--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.stat {
    background: var(--mr-surface);
    border: 1px solid var(--mr-border);
    border-radius: 8px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat__n {
    font-size: 26px;
    font-weight: 700;
    color: var(--mr-text);
    line-height: 1.1;
}

.stat__l {
    font-size: 13px;
    color: var(--mr-text-muted);
    font-weight: 600;
}

.stat__sub {
    font-size: 12px;
    color: var(--mr-text-muted);
}

.stat--link {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stat--link:hover {
    border-color: var(--mr-accent);
    box-shadow: 0 0 0 1px var(--mr-accent);
}

.stat--link:focus-visible {
    outline: none;
    border-color: var(--mr-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mr-accent) 45%, transparent);
}

.delta {
    font-weight: 700;
}

.delta--up {
    color: var(--mr-success);
}

.delta--down {
    color: var(--mr-danger);
}

/* ── Dashboard: charts ─────────────────────────────────────────── */
.mr-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* A card that is nothing but a table: title row on top, then dividers that
   run the full width, the way the tracking panels read. */
.mr-card--table {
    padding: 0;
    overflow: hidden;
}

.mr-card--table .mr-card-head {
    align-items: center;
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mr-border);
}

/* A second section in the same card starts on a divider. */
.mr-card--table .mr-table-wrap + .mr-card-head {
    border-top: 1px solid var(--mr-border);
}

.mr-card--table .mr-table th,
.mr-card--table .mr-table td {
    padding: 12px;
}

.mr-card--table .mr-table th:first-child,
.mr-card--table .mr-table td:first-child {
    padding-left: 20px;
}

.mr-card--table .mr-table th:last-child,
.mr-card--table .mr-table td:last-child {
    padding-right: 20px;
}

.mr-card--table .mr-table th {
    font-weight: 600;
}

.mr-card--table .mr-empty {
    padding: 40px 20px;
}

.mr-card--table > :not(.mr-card-head):not(.mr-table-wrap):not(.mr-empty) {
    margin-left: 20px;
    margin-right: 20px;
}

.mr-card--table .mr-card-head + :not(.mr-table-wrap):not(.mr-empty) {
    margin-top: 16px;
}

.mr-card--table > :last-child:not(.mr-table-wrap):not(.mr-empty):not(.tk-pager) {
    margin-bottom: 16px;
}

.mr-card--table .mr-table-wrap + .mr-card-foot {
    margin-top: 12px;
}

.mr-card-head h2 {
    margin: 0;
    font-size: 16px;
}

.mr-card-meta {
    font-size: 12px;
    color: var(--mr-text-muted);
}

/* Two series on one shared axis, so the legend has to carry the same two
   cues the canvas does: color, and solid versus dashed. Color alone would
   leave the pair indistinguishable for a reader who cannot separate the
   hues. */
.mr-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: var(--mr-text-muted);
}

.mr-chart-legend li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.mr-chart-key {
    flex: none;
    width: 18px;
    height: 3px;
    border-radius: 2px;
}

.mr-chart-key--leads {
    background: var(--mr-accent);
}

/* --mr-series-2, dashed: the Said yes line, and the second line of every two-series tab (mr_two_series_chart()). */
.mr-chart-key--yes,
.mr-chart-key--appointments {
    border-radius: 0;
    background: repeating-linear-gradient(90deg, var(--mr-series-2) 0 5px, transparent 5px 9px);
}

.mr-chart-key--visitors {
    height: 10px;
    border-top: 2px solid var(--mr-series-3);
    background: color-mix(in srgb, var(--mr-series-3) 18%, transparent);
}

.mr-badge-buyer { background: var(--mr-success-bg); color: var(--mr-success); border: 1px solid var(--mr-success-border); }

.mr-dash-grid > .tk-panel {
    margin-bottom: 0;
}

.mr-dash-grid .tk-map {
    height: 320px;
}

.tk-lead-badge {
    margin-left: 8px;
    vertical-align: middle;
}

.mr-chart-empty {
    margin: 0;
    padding: 56px 0;
    text-align: center;
    font-size: 14px;
    color: var(--mr-text-muted);
}

.chart {
    position: relative;
    height: 260px;
}

@media (max-width: 560px) {
    .chart {
        height: 210px;
    }
}

.mr-card-foot {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--mr-text-muted);
}

.mr-card-foot a {
    color: var(--mr-accent-ink);
    font-weight: 600;
    text-decoration: none;
}

.mr-card-foot a:hover {
    text-decoration: underline;
}

/* ── Data tables ────────────────────────────────────────────────── */
.mr-table tbody tr:hover {
    background: var(--mr-bg);
}

.mr-table-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--mr-text-muted);
}

.mr-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.mr-badge-yes {
    background: var(--mr-success-tint);
    color: var(--mr-success);
}

.mr-badge-no {
    background: var(--mr-neutral-tint);
    color: var(--mr-text-muted);
}

.mr-badge-test {
    background: var(--mr-neutral-tint);
    color: var(--mr-text-muted);
}

.mr-badge-new {
    background: color-mix(in srgb, var(--mr-accent) 16%, transparent);
    color: var(--mr-accent-ink);
}

.mr-badge-booking {
    background: var(--mr-info-tint);
    color: var(--mr-info);
}

.mr-badge-offer {
    background: var(--mr-warn-tint);
    color: var(--mr-warn);
}

.mr-badge-enriched {
    background: color-mix(in srgb, var(--mr-accent) 16%, transparent);
    color: var(--mr-accent-ink);
}

.mr-badge-enriched svg,
.mr-badge-thread svg {
    width: 13px;
    height: 13px;
    display: block;
}

.mr-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.mr-metric-pair {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.mr-metric {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mr-text-muted);
    font-variant-numeric: tabular-nums;
}

.mr-metric svg {
    width: 14px;
    height: 14px;
}

.mr-metric--zero {
    opacity: 0.45;
}

.mr-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--mr-border);
    background: var(--mr-surface);
    color: var(--mr-text-muted);
    cursor: pointer;
    padding: 0;
}

.mr-icon-btn svg {
    width: 15px;
    height: 15px;
    margin-right: 0;
}

.mr-icon-btn:hover {
    background: var(--mr-bg);
    color: var(--mr-text);
}

.mr-icon-btn-danger:hover {
    background: var(--mr-danger-tint);
    color: var(--mr-danger);
    border-color: var(--mr-danger-border);
}

.mr-icon-btn.is-on {
    color: var(--mr-accent-ink);
    border-color: var(--mr-accent);
}

.mr-icon-btn.is-green { color: var(--mr-success); border-color: var(--mr-success); }
.mr-icon-btn.is-yellow { color: var(--mr-warn); border-color: var(--mr-warn); }
.mr-icon-btn.is-red { color: var(--mr-danger); border-color: var(--mr-danger-border); }

a.mr-icon-btn {
    text-decoration: none;
}

/* ── Lead detail modal ─────────────────────────────────────────── */
.mr-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--mr-overlay);
    z-index: 9000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.mr-modal-overlay.open {
    display: flex;
}

.mr-modal h3 {
    margin: 0 0 4px;
    font-size: 17px;
}

.mr-modal-sub {
    font-size: 13px;
    color: var(--mr-text-muted);
    margin: 0 0 16px;
}

.mr-modal-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mr-border);
    font-size: 13px;
}

.mr-modal-row dt {
    color: var(--mr-text-muted);
    font-weight: 600;
}

.mr-modal-row dd {
    margin: 0;
    text-align: right;
    word-break: break-word;
    white-space: pre-line;
}

.mr-modal-form {
    margin: 0 0 16px;
    padding: 12px 0 16px;
    border-top: 1px solid var(--mr-border);
    border-bottom: 1px solid var(--mr-border);
}

.mr-modal-form .mr-field {
    margin-bottom: 10px;
}

.mr-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mr-modal-actions--spaced {
    margin-top: 20px;
}

.mr-note-mark {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 4px;
    color: var(--mr-text-muted);
}

.mr-note-mark svg {
    width: 14px;
    height: 14px;
}

.mr-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    color: var(--mr-text-muted);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}

.mr-modal {
    --mr-modal-pad: 24px;
    position: relative;
    background: var(--mr-surface);
    border: 1px solid var(--mr-border);
    border-radius: 10px;
    padding: var(--mr-modal-pad);
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
}

.mr-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--mr-border);
    margin-bottom: 20px;
}

.mr-tabs > a {
    padding: 10px 16px;
    white-space: nowrap;
    text-decoration: none;
    color: var(--mr-text-muted);
    font-size: 14px;
    border-bottom: 2px solid transparent;
}

.mr-tabs > a.active {
    color: var(--mr-text);
    border-bottom-color: var(--mr-accent);
    font-weight: 600;
}

/* ── Page head: title + subtitle on the left, actions on the right ── */
.mr-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.mr-page-head .mr-page-title {
    margin-bottom: 0;
}

.mr-page-head-sub {
    margin: 4px 0 0;
    color: var(--mr-text-muted);
    font-size: 14px;
}

.mr-page-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mr-page-head-actions .mr-btn {
    padding: 8px 14px;
    font-size: 13px;
}

@media (max-width: 560px) {
    .mr-page-head-actions .mr-btn--wide-only {
        display: none;
    }
}

/* Keeps a segmented control in the head exactly as tall as the buttons
   beside it: 4px here plus the group's own 4px matches the button's 8px. */
.mr-page-head-actions .mr-filter-tab {
    padding: 4px 12px;
}

/* ── Filter bar: status tabs + a date-range select ─────────────────── */
.mr-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* A card or a stat grid carries no bottom margin, so a filter bar that follows
   one needs its own space to match the gap every other page gives it. */
.mr-card + .mr-filter-bar,
.mr-dash-grid + .mr-filter-bar {
    margin-top: 16px;
}

.mr-filter-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    background: var(--mr-surface);
    border: 1px solid var(--mr-border);
    border-radius: 8px;
    padding: 4px;
}

.mr-filter-tab {
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--mr-text-muted);
    white-space: nowrap;
}

.mr-filter-tab:hover {
    color: var(--mr-text);
    background: var(--mr-bg);
}

.mr-filter-tab.active {
    background: var(--mr-accent);
    color: var(--mr-on-accent);
}

.mr-filter-tabs-select {
    display: none;
}

@media (max-width: 560px) {
    .mr-filter-tabs--collapsible {
        display: none;
    }

    .mr-filter-tabs-select {
        display: block;
        width: 100%;
    }
}

/* Two date filters on one page ask two different questions, so each select
   is named. Without the labels the pair reads as one control duplicated. */
.mr-filter-selects {
    display: flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
}

.mr-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--mr-text-muted);
}

.mr-filter-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 8px 32px 8px 10px;
    border: 1px solid var(--mr-border);
    border-radius: 8px;
    background-color: var(--mr-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: inherit;
    font-size: 13px;
    font-family: inherit;
}

.mr-filter-select:focus {
    outline: none;
    border-color: var(--mr-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mr-accent) 22%, transparent);
}

/* ── Import job card: live status ──────────────────────────────────── */
.mr-job-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    border-radius: 50%;
    vertical-align: middle;
    background: var(--mr-text-muted);
}

.mr-job-dot--queued {
    background: var(--mr-warn);
    animation: mr-job-pulse 2s infinite;
}

.mr-job-dot--running {
    background: var(--mr-accent);
    animation: mr-job-pulse 2s infinite;
}

.mr-job-dot--done {
    background: var(--mr-success);
}

.mr-job-dot--failed {
    background: var(--mr-danger);
}

@keyframes mr-job-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .mr-job-dot {
        animation: none;
    }
}

.mr-job-bar {
    display: block;
    width: 100%;
    height: 4px;
    margin: 0 0 16px;
    border: 0;
    border-radius: 2px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--mr-border);
    overflow: hidden;
}

.mr-job-bar::-webkit-progress-bar {
    background: var(--mr-border);
}

.mr-job-bar::-webkit-progress-value {
    background: var(--mr-accent);
    transition: width 0.4s;
}

.mr-job-bar::-moz-progress-bar {
    background: var(--mr-accent);
}

/* ── Empty state ───────────────────────────────────────────────────── */
.mr-empty {
    text-align: center;
    padding: 44px 20px;
}

.mr-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    border-radius: 10px;
    background: var(--mr-bg);
    border: 1px solid var(--mr-border);
    color: var(--mr-accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mr-empty-icon svg {
    width: 24px;
    height: 24px;
}

.mr-empty h3 {
    margin: 0 0 8px;
    font-size: 17px;
}

.mr-empty p {
    margin: 0 auto 18px;
    max-width: 440px;
    color: var(--mr-text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.mr-empty-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Shared admin table ────────────────────────────────────────────── */
.mr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.mr-table th {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--mr-border);
    color: var(--mr-text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.mr-table td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--mr-border);
    vertical-align: middle;
}

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

.mr-type-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mr-type-swatch {
    width: 10px;
    height: 26px;
    border-radius: 3px;
    flex-shrink: 0;
}

.mr-type-title {
    font-weight: 600;
}

.mr-type-slug {
    font-size: 12px;
    color: var(--mr-text-muted);
}

/* nowrap: the actions cell gets squeezed by a long description column and
   would otherwise stack the icons vertically. .mr-table-wrap scrolls. */
.mr-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    white-space: nowrap;
}

.mr-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
    align-items: start;
}

.mr-card-meta-link {
    font-size: 13px;
    color: var(--mr-text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.mr-card-meta-link:hover {
    color: var(--mr-accent-ink);
}

.mr-dash-none {
    color: var(--mr-text-muted);
    font-size: 14px;
    margin: 0;
}

.mr-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

/* Color bar: a native swatch stretched to full width, plus a "None" clear. */
.mr-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 420px;
}

.mr-color-picker {
    flex: 1;
    height: 38px;
    padding: 2px;
    border: 1px solid var(--mr-border);
    border-radius: 8px;
    background: var(--mr-surface);
    cursor: pointer;
}

.mr-color-picker.is-cleared {
    opacity: 0.35;
}

.mr-color-clear {
    background: none;
    border: none;
    padding: 4px 2px;
    font: inherit;
    font-size: 12px;
    color: var(--mr-text-muted);
    cursor: pointer;
    white-space: nowrap;
}

.mr-color-clear:hover,
.mr-color-clear.is-active {
    color: var(--mr-accent-ink);
}

.mr-subcard {
    border: 1px solid var(--mr-border);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
    background: var(--mr-bg);
}

/* ── Dialog (distinct from the older .mr-modal on leads) ─────────────────────────────────────────────────────────── */
.mr-dialog {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(20, 22, 26, 0.55);
    padding: 24px;
    overflow-y: auto;
}

.mr-dialog.is-open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.mr-dialog-panel {
    background: var(--mr-surface);
    border-radius: 10px;
    width: 100%;
    max-width: 700px;
    margin: auto;
    box-shadow: 0 24px 60px var(--mr-shadow-lg);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
}

.mr-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--mr-border);
}

.mr-dialog-head h2 {
    margin: 0;
    font-size: 17px;
}

.mr-dialog-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--mr-text-muted);
    cursor: pointer;
    padding: 0 4px;
}

.mr-dialog-close:hover {
    color: var(--mr-text);
}

.mr-dialog-body {
    padding: 20px;
    overflow-y: auto;
}

.mr-dialog-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--mr-border);
}

.mr-dialog--confirm {
    z-index: 120;
    align-items: center;
}

.mr-dialog--confirm .mr-dialog-panel {
    max-width: 440px;
    border-radius: 10px;
}

.mr-dialog-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mr-text-muted);
}

.mr-req {
    color: var(--mr-danger);
}

@media (max-width: 640px) {
    .mr-grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Status pills ──────────────────────────────────────────────────── */
.mr-status {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--mr-bg);
    color: var(--mr-text-muted);
}

.mr-status-confirmed {
    background: var(--mr-success-bg);
    color: var(--mr-success);
}

.mr-status-pending {
    background: var(--mr-warn-bg);
    color: var(--mr-warn);
}

.mr-status-canceled {
    background: var(--mr-danger-bg);
    color: var(--mr-danger);
}

/* Deliberately switched off is not an error — muted, not red. */
.mr-status-off {
    background: var(--mr-bg);
    color: var(--mr-text-muted);
}

.mr-status-completed {
    background: var(--mr-info-bg);
    color: var(--mr-info);
}

.mr-section-title {
    margin: 26px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mr-border);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mr-accent-ink);
}

.mr-section-title:first-of-type {
    margin-top: 0;
}

.mr-field {
    margin-bottom: 16px;
}

.mr-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.mr-field input[type="text"],
.mr-field input[type="email"],
.mr-field input[type="password"],
.mr-field input[type="date"],
.mr-field input[type="time"],
.mr-field select,
.mr-field textarea {
    width: 100%;
    max-width: 420px;
    padding: 8px 10px;
    border: 1px solid var(--mr-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: var(--mr-surface);
    color: inherit;
}

.mr-field textarea {
    resize: vertical;
}

.mr-field input:focus,
.mr-field select:focus,
.mr-field textarea:focus {
    outline: none;
    border-color: var(--mr-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mr-accent) 25%, transparent);
}

.mr-field input:disabled,
.mr-field select:disabled,
.mr-field textarea:disabled {
    background: var(--mr-bg);
    color: var(--mr-text-muted);
    cursor: not-allowed;
}

.mr-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.mr-input-inline {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--mr-border);
    border-radius: 8px;
    background: var(--mr-surface);
    color: inherit;
    font-size: 14px;
    font-family: inherit;
}

.mr-input-inline:focus {
    outline: none;
    border-color: var(--mr-accent);
}

.mr-input-inline.mr-input-time { width: 140px; font-variant-numeric: tabular-nums; }
.mr-input-time::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; }
.mr-hours-range { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mr-time-pop { position: absolute; display: flex; gap: 6px; padding: 6px; background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 10px; box-shadow: 0 14px 34px var(--mr-shadow-md); z-index: 10000; }
.mr-time-pop__clear { align-self: flex-end; padding: 6px 8px; border: 0; background: none; font: inherit; font-size: 12px; color: var(--mr-text-muted); cursor: pointer; border-radius: 6px; }
.mr-time-pop__clear:hover { background: var(--mr-hover-tint); color: var(--mr-text); }
.mr-time-pop__col { width: 56px; max-height: 232px; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 2px; }
.mr-time-pop__col::-webkit-scrollbar { display: none; }
.mr-time-pop__cell { padding: 8px 0; border: 0; background: none; text-align: center; font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--mr-text); border-radius: 7px; cursor: pointer; }
.mr-time-pop__cell:hover { background: var(--mr-hover-tint); }
.mr-time-pop__cell.is-on { background: color-mix(in srgb, var(--mr-accent) 22%, transparent); color: var(--mr-accent-ink); font-weight: 650; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mr-accent) 55%, transparent); }
.mr-hours-range__to { color: var(--mr-text-muted); font-size: 13px; }
.mr-col-day { width: 180px; }
.mr-col-active { width: 90px; text-align: center; }

.mr-field .mr-hint {
    font-size: 12px;
    color: var(--mr-text-muted);
    margin-top: 4px;
    /* Fields are ~420px in a full-width card; without a cap a long hint runs
       the whole 1100px and reads at twice a comfortable measure. */
    max-width: 640px;
}

.mr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--mr-border);
    background: var(--mr-surface);
    color: var(--mr-text);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
}

.mr-btn:hover {
    background: var(--mr-bg);
}

.mr-btn-primary {
    background: var(--mr-accent);
    border-color: var(--mr-accent);
    color: var(--mr-on-accent);
}

.mr-btn-primary:hover {
    background: color-mix(in srgb, var(--mr-accent) 84%, black);
    border-color: color-mix(in srgb, var(--mr-accent) 84%, black);
}

.mr-btn:disabled,
.mr-btn-primary:disabled,
.mr-btn-primary:disabled:hover {
    background: var(--mr-surface);
    border-color: var(--mr-border);
    color: var(--mr-text-muted);
    cursor: not-allowed;
}

.mr-btn-danger {
    background: var(--mr-surface);
    color: var(--mr-danger-border);
    border: 1px solid var(--mr-danger-border);
}

.mr-status-connected {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mr-success);
    font-weight: 600;
    font-size: 14px;
}

.mr-status-disconnected {
    color: var(--mr-text-muted);
    font-size: 14px;
}

.mr-alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

.mr-alert-success {
    background: var(--mr-success-bg);
    color: var(--mr-success);
}

.mr-alert-error {
    background: var(--mr-danger-bg);
    color: var(--mr-danger);
}

/* ── Calendar view ─────────────────────────────────────────────── */
.cal-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--mr-surface);
    border: 1px solid var(--mr-border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.cal-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.cal-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: -8px 0 12px 4px;
    font-size: 12px;
    color: var(--mr-text-muted);
}

.cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cal-legend-dot {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
    box-shadow: 0 0 0 1px var(--mr-border);
}

.cal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--mr-text);
    margin: 0;
    white-space: nowrap;
}

.cal-btn {
    background: var(--mr-bg);
    color: var(--mr-text);
    border: 1px solid var(--mr-border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cal-btn:hover {
    background: var(--mr-border);
}

.cal-filter {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 6px 30px 6px 10px;
    font-size: 13px;
    background-color: var(--mr-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    border: 1px solid var(--mr-border);
    border-radius: 8px;
    color: var(--mr-text);
    cursor: pointer;
}

.cal-filter:focus {
    outline: none;
    border-color: var(--mr-accent);
}

.cal-view-tabs {
    display: inline-flex;
    background: var(--mr-bg);
    border: 1px solid var(--mr-border);
    border-radius: 8px;
    overflow: hidden;
}

.cal-view-tabs button {
    background: none;
    border: none;
    color: var(--mr-text-muted);
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cal-view-tabs button:hover {
    background: var(--mr-border);
}

.cal-view-tabs button.active {
    background: var(--mr-accent);
    color: var(--mr-on-accent);
}

#calAddBtn {
    padding: 6px 14px;
    font-size: 13px;
}

/* Month grid */
.cal-header-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--mr-surface);
    border: 1px solid var(--mr-border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.cal-header-cell {
    padding: 8px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mr-text-muted);
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--mr-bg);
    border: 1px solid var(--mr-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.cal-cell {
    min-height: 100px;
    background: var(--mr-surface);
    border: 1px solid var(--mr-border);
    padding: 4px 4px 4px 6px;
    overflow: hidden;
}

.cal-cell.today {
    background: color-mix(in srgb, var(--mr-accent) 8%, transparent);
    border-color: var(--mr-accent);
}

.cal-cell.other-month {
    opacity: 0.5;
}

.cal-cell-date {
    font-size: 12px;
    font-weight: 600;
    color: var(--mr-text-muted);
    padding: 2px 4px;
    display: inline-block;
    margin-bottom: 2px;
}

.cal-cell-date.today {
    background: var(--mr-accent);
    color: var(--mr-on-accent);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 16px;
    text-align: center;
    padding: 2px;
    font-size: 11px;
    font-weight: 600;
}

.cal-event {
    font-size: 11px;
    background: var(--mr-bg);
    border-radius: 4px;
    padding: 2px 6px;
    margin: 1px 0;
    cursor: pointer;
    border-left: 3px solid var(--mr-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mr-text);
}

.cal-event:hover {
    background: var(--mr-border);
}

.cal-more {
    font-size: 11px;
    color: var(--mr-text-muted);
    cursor: pointer;
    padding: 1px 6px;
}

.cal-more:hover {
    text-decoration: underline;
}

/* Week view */
.cal-week {
    display: none;
}

.cal-week.active {
    display: block;
}

.cal-week-header {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    background: var(--mr-surface);
    border: 1px solid var(--mr-border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.cal-week-header-cell {
    padding: 8px 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--mr-text-muted);
}

.cal-week-header-cell.today-col {
    color: var(--mr-accent-ink);
}

.cal-week-body-wrap {
    max-height: 640px;
    overflow-y: auto;
    border: 1px solid var(--mr-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.cal-week-body {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    position: relative;
    min-height: 840px;
    background: var(--mr-surface);
}

.cal-week-time {
    font-size: 11px;
    color: var(--mr-text-muted);
    text-align: right;
    padding: 0 8px;
    height: 60px;
    border-bottom: 1px solid var(--mr-border);
    line-height: 14px;
}

.cal-week-col {
    position: relative;
    border-left: 1px solid var(--mr-border);
}

.cal-week-hour-line {
    position: absolute;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--mr-border);
}

.cal-week-slot {
    position: absolute;
    left: 2px;
    right: 2px;
    background: var(--mr-bg);
    border-left: 3px solid var(--mr-accent);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    color: var(--mr-text);
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
}

.cal-week-slot:hover {
    background: var(--mr-border);
}

.cal-week-slot.has-more {
    padding-right: 30px;
}

.cal-week-more {
    position: absolute;
    right: 5px;
    z-index: 2;
    margin: 2px 0 0;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--mr-accent);
    color: var(--mr-on-accent, #fff);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
}

/* Day/list view */
.cal-list {
    display: none;
}

.cal-list.active {
    display: block;
}

.cal-list-header {
    font-size: 16px;
    font-weight: 700;
    color: var(--mr-text);
    margin-bottom: 12px;
}

.cal-list-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--mr-surface);
    border: 1px solid var(--mr-border);
    border-radius: 8px;
    margin: 4px 0;
    cursor: pointer;
    flex-wrap: wrap;
}

.cal-list-row:hover {
    background: var(--mr-bg);
}

.cal-list-time {
    font-size: 14px;
    font-weight: 600;
    color: var(--mr-text);
    min-width: 90px;
}

.cal-list-type {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.cal-list-client {
    font-size: 14px;
    color: var(--mr-text);
    flex: 1;
    min-width: 120px;
}

.cal-list-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.cal-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--mr-text-muted);
    font-size: 14px;
}

/* Popover */
.cal-popover {
    position: fixed;
    background: var(--mr-surface);
    border: 1px solid var(--mr-border);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 8px 24px var(--mr-shadow-md);
    z-index: 200;
    min-width: 260px;
    max-width: 320px;
}

.cal-popover-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: var(--mr-text-muted);
    font-size: 18px;
    cursor: pointer;
}

.cal-popover-close:hover {
    color: var(--mr-text);
}

.cal-popover-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--mr-text);
    margin-bottom: 4px;
    padding-right: 24px;
}

.cal-card-person {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 22px;
}

.cal-card-initials {
    width: 34px;
    height: 34px;
    border: none;
    color: var(--mr-accent-ink);
    font-size: 12px;
}

.cal-card-who {
    flex: 1;
    min-width: 0;
}

.cal-card-name,
.cal-card-email {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-card-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--mr-text);
}

.cal-card-phone {
    font-size: 13px;
    color: var(--mr-accent-ink);
    text-decoration: none;
}

.cal-card-phone:hover {
    text-decoration: underline;
}

.cal-card-email {
    font-size: 12px;
    color: var(--mr-text-muted);
}

.cal-card-call {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--mr-border);
}

.cal-card-type {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--mr-text);
}

.cal-card-type .cal-popover-dot {
    margin-right: 0;
}

.cal-card-type .cal-list-status {
    margin-left: auto;
}

.cal-card-when {
    font-size: 14px;
    font-weight: 600;
    color: var(--mr-text);
}

.cal-card-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--mr-text-muted);
}

.cal-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.cal-card-all {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--mr-accent-ink);
    text-decoration: none;
}

.cal-card-all:hover {
    text-decoration: underline;
}

.cal-popover-email {
    font-size: 12px;
    color: var(--mr-text-muted);
    margin-bottom: 10px;
    word-break: break-all;
}

.cal-popover-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--mr-text);
    margin-bottom: 6px;
}

.cal-popover-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}

.cal-popover-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mr-accent-ink);
    text-decoration: none;
}

.cal-popover-link:hover {
    text-decoration: underline;
}

/* Status colors */
.st-pending {
    background: var(--mr-warn-tint);
    color: var(--mr-warn);
}

.st-confirmed {
    background: var(--mr-success-tint);
    color: var(--mr-success);
}

.st-scheduled {
    background: var(--mr-success-tint);
    color: var(--mr-success);
}

.st-completed {
    background: var(--mr-success-tint);
    color: var(--mr-success);
}

.st-canceled {
    background: var(--mr-danger-tint);
    color: var(--mr-danger);
}

.st-no_show {
    background: var(--mr-neutral-tint);
    color: var(--mr-text-muted);
}

/* Quick-add modal */
.cal-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--mr-overlay);
    z-index: 9000;
    align-items: center;
    justify-content: center;
}

.cal-modal-overlay.open {
    display: flex;
}

.cal-modal {
    background: var(--mr-surface);
    border: 1px solid var(--mr-border);
    border-radius: 10px;
    padding: 28px;
    width: 100%;
    max-width: 480px;
}

.cal-modal h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--mr-text);
}

.cal-modal-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cal-modal-footer {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .cal-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .cal-toolbar-left,
    .cal-toolbar-right {
        justify-content: center;
    }

    .cal-cell {
        min-height: 70px;
    }

    .cal-modal-row {
        grid-template-columns: 1fr;
    }
}

.mr-nowrap {
    white-space: nowrap;
}

.mr-cell-muted {
    color: var(--mr-text-muted);
}

/* Needs to outrank `.mr-table th`, which sets text-align: left at equal
   specificity, or the header stays left while its cells centre. */
.mr-cell-center,
.mr-table th.mr-cell-center {
    text-align: center;
}

/* Inherits the cell's colour so a linked value stays as quiet as an unlinked
   one; the affordance shows up on hover instead. */
.mr-cell-link {
    color: inherit;
    text-decoration: none;
}

.mr-cell-link:hover {
    color: var(--mr-accent-ink);
    text-decoration: underline;
}

/* A timestamp that is context rather than the point of the row. */
.mr-cell-date {
    font-size: 12px;
    color: var(--mr-text-muted);
    white-space: nowrap;
}

/* One line, ellipsis, full text in title=. The tooltip is a fallback for
   overflow, not the way the text is meant to be read — descriptions are
   written short enough to fit, since title= is invisible on touch. */
.mr-cell-truncate {
    max-width: 1px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Health strip ---- */
.mr-health {
    background: var(--mr-surface);
    border: 1px solid var(--mr-border);
    border-left: 3px solid var(--mr-accent);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 20px;
}

.mr-health--error {
    border-left-color: var(--mr-danger);
}

.mr-health__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.mr-health__head svg {
    width: 17px;
    height: 17px;
    flex: none;
    color: var(--mr-accent-ink);
}

.mr-health--error .mr-health__head svg {
    color: var(--mr-danger);
}

.mr-health__head h2 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--mr-text);
}

.mr-health__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mr-health__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-top: 1px solid var(--mr-border);
}

.mr-health__item:first-child {
    border-top: 0;
    padding-top: 0;
}

.mr-health__title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--mr-text);
}

.mr-health__detail {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: var(--mr-text-muted);
    margin-top: 2px;
}

.mr-health__item .mr-btn {
    flex: none;
}

@media (max-width: 600px) {
    .mr-health__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

.mr-btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

/* ── Dashboard: wizard funnel, partner table, live rows ─────────── */
.mr-dash-grid--funnel {
    margin-bottom: 20px;
    align-items: stretch;
}

.mr-dash-grid > .mr-card,
.mr-dash-grid > .tk-panel {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.mr-dash-grid > .tk-panel > .tk-panel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mr-dash-grid .tk-empty {
    flex: 1;
    justify-content: center;
}

.mr-dash-grid > .mr-card > .mr-card-foot {
    margin-top: auto;
}

.mr-dash-grid--map {
    grid-template-columns: 1fr;
    margin-bottom: 20px;
}

.mr-dash-grid--map .tk-map {
    height: 440px;
}

@media (max-width: 720px) {
    .mr-dash-grid--map .tk-map {
        height: 320px;
    }
}

.mr-funnel {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mr-funnel__row {
    display: grid;
    grid-template-columns: minmax(120px, 38%) 1fr 48px 52px;
    gap: 12px;
    align-items: center;
    font-size: 13px;
}

.mr-funnel__label {
    color: var(--mr-text);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mr-funnel__bar {
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mr-border) 60%, transparent);
    overflow: hidden;
}

.mr-funnel__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--mr-accent);
}

.mr-funnel__n {
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-weight: 700;
}

.mr-funnel__drop {
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--mr-text-muted);
    font-size: 12px;
}

.mr-funnel__drop--loss {
    color: var(--mr-danger);
}

.mr-table th.mr-num,
.mr-table td.mr-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mr-score {
    font-weight: 700;
}

.mr-score--hot {
    color: var(--mr-hot);
}

.mr-score--blazing {
    color: var(--mr-blazing);
}

.mr-live-visitor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mr-live-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mr-success);
    box-shadow: 0 0 8px var(--mr-success);
}

.mr-dash-answers,
.mr-dash-path {
    max-width: 360px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 720px) {
    .mr-funnel__row {
        grid-template-columns: 1fr 40px 44px;
    }

    .mr-funnel__label {
        grid-column: 1 / -1;
    }
}

/* ── Analytics: answer breakdowns ───────────────────────────────── */
.mr-answer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px 32px;
}

.mr-answer-block h3 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mr-text);
}

.mr-modal-actions--secondary {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--mr-border);
    gap: 12px;
}

.mr-modal-actions--secondary .mr-hint {
    font-size: 12px;
    color: var(--mr-text-muted);
    line-height: 1.4;
}

.mr-modal-actions--secondary .mr-btn {
    white-space: nowrap;
    flex: none;
}

.mr-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mr-page-actions form { margin: 0; }
.mr-knowledge-toolbar { margin: 0 0 16px; }
.mr-modal--wide { max-width: 840px; }
.mr-import-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.mr-import-report { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 16px; }
.mr-import-report--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mr-import-stat { border: 1px solid var(--mr-border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.mr-import-stat--new { border-color: var(--mr-accent); background: color-mix(in srgb, var(--mr-accent) 8%, transparent); }
.mr-import-stat__n { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mr-import-stat__l { font-size: 12px; color: var(--mr-text-muted); }
.mr-import-note { font-size: 13px; color: var(--mr-text-muted); margin: 0 0 16px; max-width: 640px; }
.mr-import-step { font-size: 11px; font-weight: 600; color: var(--mr-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-left: 8px; }
.mr-import-details { margin-bottom: 16px; }
.mr-import-details summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--mr-text-muted); }
.mr-import-details ul { margin: 8px 0 0; padding-left: 20px; font-size: 13px; color: var(--mr-text-muted); }
.mr-import-file { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px dashed var(--mr-border); border-radius: 10px; margin: 0 0 18px; }
.mr-import-file.is-picked { border-style: solid; border-color: var(--mr-accent); background: color-mix(in srgb, var(--mr-accent) 6%, transparent); }
.mr-import-file__icon { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; flex: none; color: var(--mr-accent); background: color-mix(in srgb, var(--mr-accent) 12%, transparent); }
.mr-import-file__icon svg { width: 18px; height: 18px; }
.mr-import-file__body { flex: 1; min-width: 0; }
.mr-import-file__name { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-import-file__hint { display: block; font-size: 12px; color: var(--mr-text-muted); margin-top: 2px; }
.mr-import-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mr-import-file .mr-btn { flex: none; }
.mr-import-label { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.mr-import-files { margin: -8px 0 18px; padding: 10px 12px; border: 1px solid var(--mr-border); border-radius: 10px; }
.mr-import-files .u-check { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.mr-import-files__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 6px 0; font-size: 13px; border-top: 1px solid color-mix(in srgb, var(--mr-border) 60%, transparent); }
.mr-import-files__name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.mr-import-files__rows { font-size: 12px; color: var(--mr-text-muted); font-variant-numeric: tabular-nums; }
.mr-import-files__row input { grid-column: 1 / -1; width: 100%; padding: 6px 10px; border: 1px solid var(--mr-border); border-radius: 8px; font: inherit; font-size: 13px; color: var(--mr-text); background: var(--mr-surface); }
.mr-import-files:not(:has(input[name="source_each"]:checked)) .mr-import-files__row input { display: none; }
.mr-import-line__src { margin-left: 6px; font-size: 12px; color: var(--mr-text-muted); }
.mr-import-run-lines { margin-bottom: 16px; }
.mr-import-run-head { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mr-text-muted); }
.mr-import-run-row td { font-size: 12px; font-weight: 600; color: var(--mr-text-muted); background: color-mix(in srgb, var(--mr-border) 25%, transparent); }
.mr-export-presets.mr-export-presets--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mr-export-presets.mr-export-presets--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mr-import-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0 0 16px; }
.mr-import-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.mr-import-fields input, .mr-import-consent input[type="text"] { width: 100%; padding: 7px 10px; border: 1px solid var(--mr-border); border-radius: 8px; font: inherit; font-size: 13px; font-weight: 400; color: var(--mr-text); background: var(--mr-surface); }
.mr-import-fields input:focus, .mr-import-consent input[type="text"]:focus { outline: none; border-color: var(--mr-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mr-accent) 22%, transparent); }
.mr-import-fields .mr-filter-select { width: 100%; font-weight: 400; }
.mr-import-fields[hidden] { display: none; }
.mr-import-fields .tk-note { grid-column: 1 / -1; margin: 0; }
.mr-import-opt { display: flex; align-items: center; gap: 10px; padding: 10px 6px; font-size: 13px; border-bottom: 1px solid color-mix(in srgb, var(--mr-border) 60%, transparent); }
.mr-import-opt:last-child { border-bottom: 0; }
.mr-import-opt .u-check { margin: 0; font-weight: 600; flex: 0 1 auto; }
.mr-import-opt__hint { font-size: 12px; color: var(--mr-text-muted); text-align: right; flex: 1 1 0; min-width: 0; }
@media (max-width: 640px) { .mr-import-opt { flex-wrap: wrap; } .mr-import-opt__hint { flex-basis: 100%; text-align: left; } }
.mr-import-need { cursor: default; }
.mr-import-need.is-ok { border-color: var(--mr-accent); background: color-mix(in srgb, var(--mr-accent) 8%, transparent); }
.mr-import-need .mr-export-preset__label { display: flex; align-items: center; gap: 6px; }
.mr-import-need__tick { width: 14px; height: 14px; color: var(--mr-accent); flex: none; }
.mr-import-need:not(.is-ok) .mr-import-need__tick { display: none; }
.mr-import-maps { max-height: 46vh; overflow-y: auto; }
.mr-import-maps--page { max-height: none; overflow: visible; }
.mr-import-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 220px; align-items: center; gap: 16px; padding: 10px 6px; border-bottom: 1px solid color-mix(in srgb, var(--mr-border) 60%, transparent); }
.mr-import-map:last-child { border-bottom: 0; }
.mr-import-map--head { position: sticky; top: 0; z-index: 1; background: var(--mr-surface); padding-top: 8px; padding-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mr-text-muted); }
.mr-import-map__name { font-size: 13px; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-import-map.is-ignored .mr-import-map__name { color: var(--mr-text-muted); font-weight: 500; }
.mr-import-map__samples { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mr-import-map__sample { font-size: 12px; color: var(--mr-text-muted); font-family: var(--mr-font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-import-map .mr-filter-select { width: 100%; }
.mr-import-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 6px; font-size: 13px; border-bottom: 1px solid color-mix(in srgb, var(--mr-border) 60%, transparent); }
.mr-import-line:last-child { border-bottom: 0; }
.mr-import-line__n { color: var(--mr-text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.mr-import-why { margin: 0; padding: 0 6px 12px 26px; font-size: 12.5px; color: var(--mr-text-muted); }
.mr-import-consent { border: 1px solid var(--mr-border); border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; }
.mr-import-consent:has(input[type="checkbox"]:checked) { border-color: var(--mr-accent); background: color-mix(in srgb, var(--mr-accent) 6%, transparent); }
.mr-import-consent .u-check { font-weight: 600; margin: 0; }
.mr-import-consent__note { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--mr-text-muted); }
@media (max-width: 720px) {
    .mr-import-fields, .mr-export-presets.mr-export-presets--3 { grid-template-columns: 1fr; }
    .mr-import-map { grid-template-columns: 1fr; gap: 6px; }
    .mr-import-map--head { display: none; }
}
@media (max-width: 640px) {
    .mr-import-grid { grid-template-columns: 1fr; }
    .mr-import-report { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mr-export-presets {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 16px;
}
.mr-export-preset {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 10px;
    min-width: 0;
    border: 1px solid var(--mr-border);
    border-radius: 8px;
    cursor: pointer;
}
.mr-export-preset input { position: absolute; opacity: 0; pointer-events: none; }
.mr-export-preset:has(input:checked) { border-color: var(--mr-accent); background: color-mix(in srgb, var(--mr-accent) 8%, transparent); }
.mr-export-preset__label { font-size: 13px; font-weight: 600; white-space: nowrap; }
.mr-export-preset__hint { font-size: 11.5px; color: var(--mr-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-export-dates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0 0 14px;
    font-size: 13px;
}
.mr-export-dates__label { font-weight: 600; }
.mr-export-dates__to { color: var(--mr-text-muted); }
.mr-export-dates input[type="date"] {
    width: 128px;
    field-sizing: content;
    padding: 7px 10px;
    border: 1px solid var(--mr-border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--mr-text);
    background: var(--mr-surface);
    font-variant-numeric: tabular-nums;
}
.mr-export-dates input[type="date"]:focus { outline: none; border-color: var(--mr-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mr-accent) 22%, transparent); }
.mr-export-dates input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; margin-left: 4px; }
.mr-export-dates input[type="date"]::-webkit-datetime-edit { padding: 0; }
:root[data-theme="dark"] .mr-export-dates input[type="date"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] .mr-export-dates input[type="date"] { color-scheme: dark; } }
.mr-export-dates__clear { font-size: 12px; color: var(--mr-text-muted); background: none; border: 0; padding: 0; cursor: pointer; }
.mr-export-dates__clear:hover { color: var(--mr-text); text-decoration: underline; }
.mr-export-groups {
    margin: 0 0 16px;
    border-top: 1px solid var(--mr-border);
    border-bottom: 1px solid var(--mr-border);
}
.mr-export-group { border-bottom: 1px solid color-mix(in srgb, var(--mr-border) 60%, transparent); }
.mr-export-group:last-child { border-bottom: 0; }
.mr-export-group__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 6px;
    list-style: none;
    cursor: pointer;
}
.mr-export-group__row::-webkit-details-marker { display: none; }
.mr-export-group__row:hover { background: color-mix(in srgb, var(--mr-text) 3%, transparent); }
.mr-export-group__head { font-weight: 600; font-size: 13px; margin: 0; flex: 1; }
.mr-export-group__count { font-size: 12px; color: var(--mr-text-muted); font-variant-numeric: tabular-nums; }
.mr-export-group.is-partial .mr-export-group__count { color: var(--mr-accent); }
.mr-export-group.is-off .mr-export-group__head { color: var(--mr-text-muted); }
.mr-export-group__chev { width: 16px; height: 16px; color: var(--mr-text-muted); transition: transform 0.15s ease; }
.mr-export-group[open] .mr-export-group__chev { transform: rotate(180deg); }
.mr-export-group__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 20px;
    padding: 2px 6px 12px 34px;
}
.mr-export-group__cols .u-check { font-size: 12.5px; color: var(--mr-text-muted); }
.mr-export-group__cols .u-check:has(input:checked) { color: var(--mr-text); }
.mr-export-summary { font-size: 12.5px; color: var(--mr-text-muted); }
.mr-export-buttons { display: flex; gap: 8px; flex: none; }
.mr-export-buttons form { display: contents; }
@media (max-width: 720px) {
    .mr-export-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mr-export-preset__label, .mr-export-preset__hint { white-space: normal; }
    .mr-export-group__cols { grid-template-columns: 1fr; padding-left: 30px; }
    .mr-modal--wide { --mr-modal-pad: 16px; padding: 20px var(--mr-modal-pad); }
    .mr-modal-actions:has(.mr-export-buttons) { flex-wrap: wrap; }
    .mr-export-buttons { width: 100%; justify-content: flex-end; }
}

.mr-details { margin-top: 10px; }
.mr-details summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--mr-text-muted); }
.mr-details p { margin: 8px 0 0; }

/* A stat that is only interesting when it isn't zero. */
.stat--attention {
    border-color: var(--mr-accent);
}

.stat--attention .stat__n {
    color: var(--mr-accent-ink);
}

/* ---- Toasts ----
   Feedback about something you just did, as opposed to .mr-alert, which can
   also describe the state of what is on screen and stays put. The markup is
   built by assets/js/toast.js out of a server-rendered
   .mr-alert[data-toast], so nothing here may hide anything: a rule only
   JavaScript can undo would take the message away wherever the script did
   not run. */
.mr-toast-region {
    position: fixed;
    z-index: 9500;
    left: calc(50% + 110px);
    bottom: 20px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(368px, calc(100vw - 40px));
    pointer-events: none;
}

@media (max-width: 768px) {
    .mr-toast-region {
        left: 50%;
    }
}

.mr-toast {
    pointer-events: auto;
    max-width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid var(--mr-border);
    border-radius: 8px;
    background: var(--mr-surface);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    color: var(--mr-text);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    box-shadow: 0 12px 28px var(--mr-shadow-md);
    /* An animation, not a transition from opacity 0. The resting state has to
       be visible, or a background tab that never runs the animation would hold
       an invisible toast the page cannot get rid of. */
    animation: mr-toast-in 0.2s ease both;
}

/* Color lands on the surface and the icon, never on the text, so the message
   keeps full contrast. */
.mr-toast--ok {
    border-color: var(--mr-success-border);
    background: linear-gradient(var(--mr-success-bg), var(--mr-success-bg)), var(--mr-surface);
}

.mr-toast--error {
    border-color: var(--mr-danger-border-soft);
    background: linear-gradient(var(--mr-danger-bg), var(--mr-danger-bg)), var(--mr-surface);
}

.mr-toast__icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.mr-toast__icon svg {
    width: 14px;
    height: 14px;
}

.mr-toast--ok .mr-toast__icon {
    background: var(--mr-success-tint);
    color: var(--mr-success);
}

.mr-toast--error .mr-toast__icon {
    background: var(--mr-danger-tint);
    color: var(--mr-danger);
}

/* Sync and database errors arrive as one unbroken string long enough to push
   the close button off the toast. */
.mr-toast__body {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mr-toast__close {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0 -2px 0 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--mr-text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mr-toast__close svg {
    width: 15px;
    height: 15px;
}

.mr-toast--error .mr-toast__close {
    color: var(--mr-text);
    background: var(--mr-hover-tint);
}

.mr-toast__close:hover {
    background: var(--mr-hover-tint);
    color: var(--mr-text);
}

.mr-toast__close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mr-accent) 45%, transparent);
}

@keyframes mr-toast-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@keyframes mr-toast-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(6px) scale(0.98); }
}

.mr-toast.is-out {
    animation: mr-toast-out 0.18s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .mr-toast { animation: none; }
    .mr-toast.is-out { animation: none; opacity: 0; }
}

@media (max-width: 640px) {
    /* Near full width along the bottom edge: a 368px card pinned to one corner
       of a phone is a cramped box with two words per line. */
    .mr-toast-region {
        right: 12px;
        left: 12px;
        bottom: 12px;
        width: auto;
        transform: none;
        align-items: stretch;
    }

    .mr-toast__close {
        width: 44px;
        height: 44px;
        margin: -8px -8px 0 0;
    }
}

.mr-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Theme picker (account menu) ---- */
.mr-theme-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    /* Separator sits below, not above: the picker now follows the identity
       header, and the links below it end on Sign out. */
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Lives inside the sidebar, which is dark in both themes, so this styles
   against the sidebar palette rather than the page surface tokens. */
.mr-theme-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--mr-sidebar-text);
    font-family: inherit;
    cursor: pointer;
}

.mr-theme-opt svg {
    width: 16px;
    height: 16px;
}

.mr-theme-opt:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.mr-theme-opt.is-active {
    background: color-mix(in srgb, var(--mr-accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--mr-accent) 40%, transparent);
    color: var(--mr-sidebar-active);
}

.mr-theme-opt:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mr-accent) 50%, transparent);
}

/* System: errors, logs, two-factor */
.mr-dash-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 720px) { .mr-dash-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Fixed 2 columns, not auto-fit: a single leftover card should sit in the
   first slot, not stretch to fill the row. */
.mr-dash-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .mr-dash-grid--2 { grid-template-columns: 1fr; } }
.mr-stat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--mr-text-muted); }
.mr-stat-value { font-size: 26px; font-weight: 700; margin-top: 4px; }
.mr-level { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--mr-neutral-tint); color: var(--mr-text-muted); }
.mr-level-fatal, .mr-level-error { background: var(--mr-danger-bg); color: var(--mr-danger); }
.mr-level-warning { background: var(--mr-warn-bg); color: var(--mr-warn); }
.mr-level-deprecated { background: var(--mr-info-bg); color: var(--mr-info); }
.mr-recovery-codes { font-size: 15px; line-height: 1.8; letter-spacing: .04em; padding: 14px 18px; border: 1px dashed var(--mr-border); border-radius: 8px; margin: 12px 0 16px; }
.mr-qr { width: 180px; height: 180px; margin: 12px 0 16px; padding: 8px; background: #fff; border-radius: 8px; }
.mr-qr img, .mr-qr canvas { display: block; }
.mr-secret-key { letter-spacing: .06em; }
.mr-sync-response { margin: 8px 0 0; padding: 8px 10px; background: var(--mr-neutral-tint); border-radius: 6px; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow: auto; }
.mr-sync-error { max-width: 420px; }
.mr-btn-block { width: 100%; }

/* Funnel admin */
.mr-inline-check { display: flex; align-items: center; gap: 8px; font-weight: normal; margin: 6px 0 0; }
.mr-inline-check input { width: auto; }
.mr-table .mr-input-inline { width: 100%; min-width: 140px; }
.mr-table .mr-input-num { width: 80px; min-width: 0; }
.mr-row-actions-end { display: flex; justify-content: flex-end; margin-top: 8px; }

.mr-brand-text { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; color: #ffffff; white-space: nowrap; }

/* Machine data reads in mono, the house convention. */
code, .mr-type-slug, .mr-recovery-codes, .mr-secret-key { font-family: var(--mr-font-mono); }
code { font-size: 0.92em; }

/* Internal docs */
.mr-docs { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.mr-docs-nav ul { list-style: none; margin: 0 0 14px; padding: 0; }
.mr-docs-nav li a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--mr-text); text-decoration: none; }
.mr-docs-nav li a:hover { background: var(--mr-hover-tint); }
.mr-docs-nav li a.is-active { background: color-mix(in srgb, var(--mr-accent) 12%, transparent); color: var(--mr-accent-ink, var(--mr-accent)); }
.mr-docs-body h1, .mr-docs-body h2, .mr-docs-body h3 { color: var(--mr-accent-ink, var(--mr-accent)); }
.mr-docs-body { font-size: 15px; line-height: 1.7; }
.mr-docs-body img { max-width: 100%; border-radius: 8px; }
.mr-docs-body a { color: var(--mr-accent-ink); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 860px) { .mr-docs { grid-template-columns: 1fr; } }

/* Utility classes: the CSP forbids inline style attributes, so one-off layout hints live here. */
.u-cell { padding: 8px 4px; }
.u-cell--actions { padding: 8px 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.u-w-auto { width: auto; }
.u-w-full { width: 100%; }
.u-check { display: flex; align-items: center; gap: 6px; font-weight: normal; }
.u-check--tight { margin-bottom: 0; }
.u-offscreen { position: absolute; left: -9999px; }
.u-inline { display: inline; }
.u-fw-normal { font-weight: normal; }
.u-th { text-align: left; border-bottom: 1px solid var(--mr-border); }
.u-row { border-bottom: 1px solid var(--mr-border); }
.u-btn-xs { padding: 2px 8px; font-size: 13px; }
.u-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.u-table--mb { margin-bottom: 16px; }
.u-fs-13 { font-size: 13px; }
.u-fs-95 { font-size: 0.95rem; }
.u-mono { font-family: monospace; }
.u-mt-10 { margin-top: 10px; }
.u-mt-18 { margin-top: 18px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-0 { margin-bottom: 0; }
.u-pull-up { margin: -6px 0 14px; }
.u-muted-14 { font-size: 14px; color: var(--mr-text-muted); }
.u-flex-between { display: flex; justify-content: space-between; align-items: center; }
.u-flex-6 { display: flex; gap: 6px; align-items: center; }
.u-inline-block-center { display: inline-block; text-align: center; text-decoration: none; }
.u-inline-block-mt { display: inline-block; margin-top: 12px; }

/* Wizard accordion, a copy of the reference's steps table: one card per step, its options inside. */
.mr-inline-form { display: inline; margin: 0; }
.mr-wizacc { margin-top: 6px; overflow-x: auto; padding-bottom: 8px; }
.mr-wizacc__inner { width: 100%; min-width: max-content; }
.mr-wizacc__head, .mr-wizacc__row {
    display: grid;
    grid-template-columns: 52px 96px minmax(max-content, 1fr) 92px 128px 58px 75px 58px 58px 80px 58px 154px 26px;
    gap: 10px;
    align-items: center;
}
.mr-wizacc__head { padding: 6px 16px 8px; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mr-text-muted); font-weight: 500; }
.mr-wizacc__card { position: relative; background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 12px; margin-bottom: 9px; overflow: hidden; }
.mr-wizacc__card.is-open::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mr-accent); }
.mr-wizacc__row { padding: 10px 16px; }
.mr-wizacc__row--head { cursor: pointer; }
.mr-wizacc__row--head:hover { background: var(--mr-hover-tint); }
.mr-wizacc__row--off { opacity: 0.5; }
.mr-wizacc__arrows { display: flex; gap: 3px; }
.mr-wizacc__arrow { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mr-border); border-radius: 5px; background: none; color: var(--mr-text-muted); font-size: 9px; cursor: pointer; padding: 0; }
.mr-wizacc__arrow:hover { color: var(--mr-text); }
.mr-wizacc__arrow--ghost { visibility: hidden; }
.mr-wizacc__stepwrap { display: flex; align-items: center; justify-content: flex-start; gap: 5px; padding: 0 10px 0 6px; }
.mr-wizacc__step { display: inline-block; border: 1px solid var(--mr-border); border-radius: 6px; padding: 2px 7px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mr-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mr-wizacc__substep { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mr-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mr-wizacc__subcount { font-size: 11px; color: var(--mr-text-muted); font-variant-numeric: tabular-nums; }
.mr-wizacc__name { font-weight: 600; font-size: 15px; white-space: nowrap; padding-right: 20px; }
.mr-wizacc__head > :nth-child(3) { padding-right: 20px; }
.mr-wizacc__name a { color: inherit; text-decoration: none; }
.mr-wizacc__name a:hover { color: var(--mr-accent-ink); }
.mr-wizacc__row--sub .mr-wizacc__name { font-weight: 500; font-size: 14px; }
.mr-wizacc__funnel { display: block; margin-top: 2px; font-weight: 400; font-size: 12px; color: var(--mr-text-muted); font-variant-numeric: tabular-nums; }
.mr-wizacc__cell { font-size: 14px; font-variant-numeric: tabular-nums; }
.mr-wizacc__c { text-align: center; }
.mr-wizacc__dash { color: var(--mr-text-muted); }
.mr-wizacc__acts { display: flex; gap: 6px; justify-content: center; }
.mr-wizacc__acts .mr-icon-btn { width: 30px; height: 30px; border-radius: 8px; }
.mr-wizacc__acts .mr-icon-btn svg { width: 15px; height: 15px; }
.mr-wizacc__chev { color: var(--mr-text-muted); font-size: 12px; text-align: center; transition: transform 0.15s; }
.mr-wizacc__card.is-open .mr-wizacc__chev { transform: rotate(90deg); }
.mr-wizacc__body { border-top: 1px solid var(--mr-border); background: color-mix(in srgb, var(--mr-surface) 72%, var(--mr-bg) 28%); }
.mr-wizacc__nosubs { font-size: 13px; color: var(--mr-text-muted); margin: 0; padding: 11px 16px 0 184px; }
.mr-wizacc__foot { margin: 0; padding: 9px 16px 13px 184px; }
.mr-wizacc__addsub { font-size: 13px; color: var(--mr-accent-ink); text-decoration: none; font-weight: 500; }
.mr-wizacc__addsub:hover { text-decoration: underline; }
.mr-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.mr-pill--on { background: var(--mr-success-tint); color: var(--mr-success); }
.mr-pill--warning { background: var(--mr-warn-tint); color: var(--mr-warn); }
.mr-switch { width: 34px; height: 19px; border: none; border-radius: 999px; background: var(--mr-border); position: relative; cursor: pointer; padding: 0; transition: background 0.15s; vertical-align: middle; }
.mr-switch::after { content: ''; position: absolute; top: 2.5px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--mr-text-muted); transition: left 0.15s, background 0.15s; }
.mr-switch.is-on { background: var(--mr-accent); }
.mr-switch.is-on::after { left: 17px; background: var(--mr-on-accent); }
.mr-option-add { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mr-border); }
.mr-option-add .mr-row-actions { grid-column: 1 / -1; justify-content: flex-end; }

.mr-field-error { margin-top: 6px; font-size: 13px; color: var(--mr-danger); }
.mr-icon-btn--ghost { visibility: hidden; }
.mr-page-head-actions .mr-btn svg { flex: none; }

/* Pills, chat log, tool details, knowledge budget meter, native dialog: the AI pages on the base tokens. */
.mr-pill--muted { background: var(--mr-neutral-tint); color: var(--mr-text-muted); }
.mr-pill--info { background: var(--mr-info-tint); color: var(--mr-info); }
/* The knowledge table reads as a scale: accent is in the prompt, green is
   in and pinned so it can never be evicted, muted is out. Info blue was a
   fourth hue on a page that uses no other blue. */
.mr-pill--accent { background: color-mix(in srgb, var(--mr-accent) 16%, transparent); color: var(--mr-accent-ink); }
.mr-card + .mr-card { margin-top: 0; }
.mr-card h2 + .mr-hint { margin-top: -8px; margin-bottom: 16px; max-width: 640px; }
.mr-field input[type="number"], .mr-field input[type="url"], .mr-field input[type="tel"], .mr-field input[type="search"] { width: 100%; max-width: 420px; padding: 8px 10px; border: 1px solid var(--mr-border); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--mr-surface); color: inherit; }
.chatlog-result { display: flex; align-items: flex-start; gap: 48px; padding: 16px 20px; }
.chatlog-result .chatlog { flex: 1 1 auto; min-width: 0; max-width: 480px; margin: 0; }
.chatlog-result .chatlog-grade { flex: 0 0 380px; max-width: 380px; margin: 0 0 0 auto; align-self: flex-start; }
@media (max-width: 760px) {
  .chatlog-result { flex-direction: column; }
  .chatlog-result .chatlog-grade { flex-basis: auto; max-width: 420px; width: 100%; margin: 24px auto 0; }
}
.chatlog { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 0 auto 16px; }
.chatlog__msg { padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.55; }
.chatlog__msg--them { background: var(--mr-accent); color: var(--mr-on-accent); border-bottom-right-radius: 4px; }
.chatlog__msg--bot { background: var(--mr-neutral-tint); color: var(--mr-text); border-bottom-left-radius: 4px; }
.chatlog__media img { display: block; max-width: 220px; max-height: 220px; border-radius: 8px; }
.chatlog__file { font-size: 12px; color: var(--mr-accent); text-decoration: none; }
.chatlog__file:hover { text-decoration: underline; }
.chatlog__when { display: block; font-size: 12px; color: var(--mr-text-muted); }
.chatlog__turn { display: flex; flex-direction: column; gap: 4px; max-width: 85%; }
.chatlog__turn--them { align-self: flex-end; align-items: flex-end; }
.chatlog__turn--bot { align-self: flex-start; align-items: flex-start; }
.chatlog__event { align-self: stretch; display: flex; align-items: center; gap: 12px; font-size: 12px; line-height: 1.5; color: var(--mr-text-muted); text-align: center; }
.chatlog__event::before, .chatlog__event::after { content: ''; flex: 1 1 24px; border-top: 1px solid var(--mr-border); }
.chatlog__event span { max-width: 80%; }
.chatlog__blocked { align-self: center; max-width: 80%; margin-top: -8px; font-size: 12px; line-height: 1.5; color: var(--mr-text-muted); }
.chatlog__blocked summary { cursor: pointer; font-weight: 600; text-align: center; }
.chatlog__blocked p { margin: 8px 0 0; color: var(--mr-text); }
.chatlog__blocked .chatlog__blocked-why { margin-top: 2px; color: var(--mr-text-muted); }
.chatlog-grade { max-width: 420px; margin: 32px auto 0; padding: 16px 18px; background: var(--mr-neutral-tint); border: 1px solid var(--mr-border); border-radius: 10px; }
.tk-panel-body .chatlog-grade__title { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--mr-accent-ink); }
.chatlog-grade__row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; font-size: 14px; border-top: 1px solid var(--mr-border); }
.chatlog-grade__row:first-of-type { border-top: 0; }
.chatlog-grade__label { color: var(--mr-text); }
.chatlog-grade__score { font-weight: 700; font-size: 15px; color: var(--mr-accent-ink); font-family: var(--mr-font-mono); flex: none; }
.tk-panel-body .chatlog-grade__note { margin: 0; padding-top: 16px; border-top: 1px solid var(--mr-border); font-size: 13px; line-height: 1.6; color: var(--mr-text); }
.tk-panel-body .chatlog-grade__meta { margin: 10px 0 0; font-size: 12px; color: var(--mr-text-muted); }
.tooldetails summary { cursor: pointer; color: var(--mr-text-muted); font-size: 13px; }
.tooldetails__list { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--mr-text-muted); }
.kbudget { display: grid; gap: 10px; margin: 0 0 18px; }
.kbudget__row { display: flex; align-items: center; gap: 12px; }
.kbudget__label { min-width: 170px; font-size: 13px; color: var(--mr-text-muted); }
.kbudget__meter { flex: 1; height: 8px; border-radius: 999px; background: var(--mr-neutral-tint); overflow: hidden; }
.kbudget__fill { display: block; height: 100%; border-radius: inherit; background: var(--mr-accent); }
.kbudget__fill--over { background: var(--mr-warn); }
.kbudget__num { font-size: 12px; color: var(--mr-text-muted); font-variant-numeric: tabular-nums; }
.himodal { width: min(560px, calc(100vw - 32px)); max-height: min(85vh, 820px); border: 1px solid var(--mr-border); border-radius: 12px; background: var(--mr-surface); color: var(--mr-text); padding: 20px 22px; overflow-y: auto; box-shadow: 0 24px 60px var(--mr-shadow-lg); }
.himodal::backdrop { background: var(--mr-overlay); }
.himodal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.himodal__head h2 { margin: 0; font-size: 17px; }
.himodal__close { border: 0; background: none; color: var(--mr-text-muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; text-decoration: none; }
.himodal__close:hover { color: var(--mr-text); background: var(--mr-hover-tint); }
.himodal__close:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mr-accent) 45%, transparent); }
.himodal__head h2:focus { outline: none; }
.himodal input[type="file"] { font: inherit; font-size: 13px; color: var(--mr-text-muted); max-width: 100%; }
.himodal input[type="file"]::file-selector-button { font: inherit; font-weight: 600; font-size: 13px; color: var(--mr-text); background: var(--mr-surface); border: 1px solid var(--mr-border); border-radius: 8px; padding: 8px 14px; margin-right: 12px; cursor: pointer; }
.himodal input[type="file"]::file-selector-button:hover { background: var(--mr-hover-tint); }
.himodal.himodal--wide { width: min(840px, calc(100vw - 32px)); }
.mr-fr-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.mr-fr-hero { display: grid; grid-template-columns: 160px 1fr; gap: 12px; margin-bottom: 14px; }
.mr-fr-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mr-fr-hero .tk-stat-card { padding: 12px 14px; border-radius: 8px; }
.mr-fr-hero .tk-stat-value { font-size: 22px; }
.mr-fr-tiles .tk-stat-label { min-height: 2lh; }
.mr-fr-hero .mr-fr-score .tk-stat-value { font-size: 40px; line-height: 1.1; }
.mr-fr-hero .mr-fr-green { border-color: var(--mr-success); }
.mr-fr-hero .mr-fr-green .tk-stat-value, .mr-fr-why.mr-fr-green strong { color: var(--mr-success); }
.mr-fr-hero .mr-fr-yellow { border-color: var(--mr-warn); }
.mr-fr-hero .mr-fr-yellow .tk-stat-value, .mr-fr-why.mr-fr-yellow strong { color: var(--mr-warn); }
.mr-fr-hero .mr-fr-red { border-color: var(--mr-danger); }
.mr-fr-hero .mr-fr-red .tk-stat-value, .mr-fr-why.mr-fr-red strong { color: var(--mr-danger); }
.mr-fr-why { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--mr-border); border-radius: 8px; font-size: 13px; }
.mr-fr-fold { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mr-border); }
.mr-fr-fold > summary { cursor: pointer; margin-bottom: 0; list-style: none; }
.mr-fr-fold > summary::-webkit-details-marker { display: none; }
.mr-fr-fold > summary::before { content: "\25B6"; display: inline-block; margin-right: 6px; font-size: 9px; line-height: 1; vertical-align: 1px; }
.mr-fr-fold[open] > summary::before { content: "\25BC"; }
.mr-fr-fold[open] > summary { margin-bottom: 10px; }
.mr-fr-fold > summary.mr-fr-alert { color: var(--mr-danger); }
.mr-fr-pills { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.mr-fr-pills li { padding: 2px 10px; border: 1px solid var(--mr-border); border-radius: 999px; font-size: 12px; }
.himodal .mr-fr-foot { margin: 14px 0 0; font-size: 12px; color: var(--mr-text-muted); text-align: right; }
.mr-fr-grades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.mr-fr-grade { display: grid; grid-template-columns: 9em 1fr 1em; align-items: center; gap: 10px; font-size: 13px; }
.mr-fr-grade-avg { font-weight: 600; }
.mr-fr-grade-bar { height: 6px; border-radius: 999px; background: var(--mr-border); overflow: hidden; }
.mr-fr-grade-fill { display: block; width: 0; height: 100%; border-radius: 999px; }
.mr-fr-grade-1 { width: 20%; }
.mr-fr-grade-2 { width: 40%; }
.mr-fr-grade-3 { width: 60%; }
.mr-fr-grade-4 { width: 80%; }
.mr-fr-grade-5 { width: 100%; }
.mr-fr-grade.mr-fr-green .mr-fr-grade-fill { background: var(--mr-success); }
.mr-fr-grade.mr-fr-yellow .mr-fr-grade-fill { background: var(--mr-warn); }
.mr-fr-grade.mr-fr-red .mr-fr-grade-fill { background: var(--mr-danger); }
.mr-fr-grade-value { text-align: right; font-variant-numeric: tabular-nums; }
.mr-fr-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mr-fr-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px; border: 1px solid var(--mr-border); border-radius: 10px; }
.mr-fr-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.mr-fr-card-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.mr-fr-card-sub { font-size: 12px; color: var(--mr-text-muted); }
.mr-fr-card-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.mr-fr-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; margin: 0; }
.mr-fr-facts dt { font-size: 11px; color: var(--mr-text-muted); }
.mr-fr-facts dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.mr-fr-hist-label { margin-bottom: 4px; font-size: 11px; color: var(--mr-text-muted); }
.mr-fr-hist { display: flex; flex-wrap: wrap; gap: 3px; }
.mr-fr-sq { width: 10px; height: 10px; border: 1px solid var(--mr-border); border-radius: 2px; }
.mr-fr-sq-ok { border-color: var(--mr-success); background: var(--mr-success); }
.mr-fr-sq-warn { border-color: var(--mr-warn); background: var(--mr-warn); }
.mr-fr-sq-bad { border-color: var(--mr-danger); background: var(--mr-danger); }
@media (max-width: 640px) {
    .mr-fr-hero { grid-template-columns: 1fr; }
    .mr-fr-tiles { grid-template-columns: repeat(2, 1fr); }
    .mr-fr-grades { grid-template-columns: 1fr; }
    .mr-fr-cards { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .mr-fr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.himodal.himodal--review { overflow: hidden; }
.himodal.himodal--review[open] { display: flex; flex-direction: column; }
.himodal--review > * { flex-shrink: 0; }
.himodal--review .himodal__scroll { flex: 1 1 auto; min-height: 120px; overflow: auto; margin: 0 0 8px; border: 1px solid var(--mr-border); border-radius: 8px; }
.himodal--review .himodal__scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--mr-surface); }
.field-preview { display: block; max-width: 320px; margin-top: 8px; border-radius: 8px; border: 1px solid var(--mr-border); }
.mr-hint--lead { font-size: 14px; max-width: 760px; margin: 0 0 16px; }
.mr-thread-why { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--mr-border); }
.mr-form-actions { margin-top: 18px; gap: 8px; justify-content: flex-start; }

/* An actions row is not a field. Inside the two-column card grid it was landing
   in a column beside the last field, so Save sat halfway up the card next to an
   unrelated input instead of closing it off. */
.mr-grid-2 > .mr-form-actions { grid-column: 1 / -1; }
.mr-card .mr-inline-check { margin-top: 14px; }
.mr-inline-check.mr-check-flush { display: flex; align-items: center; gap: 8px; }
.mr-inline-check.mr-check-flush input { margin: 0; }

.mr-grid-2 .mr-field input,
.mr-grid-2 .mr-field select,
.mr-grid-2 .mr-field textarea {
    max-width: 100%;
}

.mr-match-q { border: 1px solid var(--mr-border); border-radius: 8px; padding: 12px 14px 14px; margin: 12px 0 0; }
.mr-match-q legend { font-weight: 600; font-size: 13.5px; padding: 0 6px; }
.mr-match-q.has-rules { border-color: color-mix(in srgb, var(--mr-accent) 55%, var(--mr-border)); }
.mr-match-q select { max-width: 320px; margin-bottom: 4px; }
.mr-match-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 16px; }
.mr-match-opts .mr-inline-check { margin-top: 6px; }

input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--mr-accent); }

/* Selection and keyboard focus follow the theme, never the browser's blue. Focus-visible only, so a mouse click
   shows no ring; a component with its own ring (.mr-filter-select, .tk-btn, .himodal__close) keeps it. */
::selection { background: color-mix(in srgb, var(--mr-accent) 30%, transparent); }
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible,
.mr-btn:focus-visible, .mr-icon-btn:focus-visible, .tk-sort-btn:focus-visible {
    outline: 2px solid var(--mr-accent);
    outline-offset: 2px;
}

.mr-sidebar-brand img { height: 34px; width: auto; display: block; }
.mr-mobile-topbar-brand img { height: 28px; width: auto; display: block; }

.mr-users-table .mr-input-inline { width: 120px; min-width: 0; height: 36px; }
.mr-users-table td.u-cell:first-child, .mr-users-table th.u-cell:first-child { padding-right: 20px; }
.mr-users-table .u-flex-6 .mr-btn { height: 36px; padding: 0 14px; font-size: 13px; }
.mr-users-you { margin-left: 6px; vertical-align: 1px; }
.mr-users-table .u-cell--actions { flex-wrap: nowrap; gap: 6px; justify-content: flex-end; padding-right: 8px; }
.mr-icon-btn--danger { color: var(--mr-danger); }
.mr-icon-btn--danger:hover { background: color-mix(in srgb, var(--mr-danger) 14%, transparent); color: var(--mr-danger); }
dialog .mr-field input[type="text"], dialog .mr-field input[type="url"], dialog .mr-field input[type="number"], dialog .mr-field select, dialog .mr-field textarea { max-width: none; }

.mr-code-block { display: block; padding: 10px 12px; border: 1px solid var(--mr-border); border-radius: 8px; background: var(--mr-bg); font-family: var(--mr-font-mono); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
#setup-sheet .mr-field + .mr-field { margin-top: 18px; }
#setup-sheet form.mr-field { margin-top: 18px; }
#setup-sheet .mr-table td:last-child { white-space: normal; }
#setup-sheet .mr-table--presets td:last-child { min-width: 320px; }
#setup-sheet .mr-table--presets .mr-code-block { margin: 0 0 6px; }
.mr-error-sample { margin-top: 6px; max-width: 760px; color: var(--mr-text-muted); font-family: var(--mr-font-mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.mr-code-label { font-size: 12px; font-weight: 600; color: var(--mr-text-muted); margin: 12px 0 6px; }
#setup-sheet form.mr-field .mr-btn { margin-top: 10px; }

/* Support tickets. The sidebar count is the only nav element that carries a
   number, so it lives on the accent rather than the sidebar's own greys. */
.mr-nav-count { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--mr-accent); color: var(--mr-on-accent); font-size: 11px; font-weight: 650; line-height: 1.6; text-align: center; }
/* One line per fact: the label and value read left, the timestamp or the
   controls for that fact sit right, so the card is four tight rows instead of
   a grid with buttons stacked under every value. */
.mr-ticket-meta { display: flex; flex-direction: column; margin: 0; }
/* A fixed label column so the four values start on one line, and a min-height
   so the rows carrying buttons do not tower over the rows that do not. */
.mr-ticket-fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 30px;
  padding: 2px 0;
  border-bottom: 1px solid var(--mr-border);
}
.mr-ticket-fact:last-child { border-bottom: 0; }
.mr-ticket-fact-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; min-width: 0; }
.mr-ticket-fact-label { width: 64px; flex: none; color: var(--mr-text-muted); font-size: 13px; }
.mr-ticket-fact-side { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; font-size: 13px; }
/* Text links, not buttons: a button inside a hairline-separated row crowds the
   rules above and below it and reads heavier than the fact it belongs to. */
.mr-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--mr-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mr-linkbtn:hover { color: var(--mr-text); }
.mr-ticket-fact-side .mr-linkbtn + form .mr-linkbtn { margin-left: 4px; }
.mr-ticket-fact-side form { margin: 0; }
.mr-ticket-body { margin: 0; font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.mr-ticket-list { display: flex; flex-direction: column; gap: 8px; }
.mr-ticket-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mr-ticket-row-when { margin-left: auto; color: var(--mr-text-muted); font-size: 12.5px; }

@media (max-width: 640px) {
    .mr-ticket-fact { align-items: flex-start; flex-direction: column; gap: 6px; }
    .mr-ticket-fact-side { margin-left: 0; }
}

/* The search sits on the filter bar's own row. .mr-input-inline is 100% wide,
   so without a flex row the button wraps under the field. */
.mr-ticket-search { display: flex; align-items: center; gap: 8px; margin: 0; }
.mr-ticket-search .mr-input-inline { width: 260px; }
.mr-search { position: relative; width: 280px; max-width: 100%; margin: 0 0 0 auto; }
.mr-search .mr-search__input { padding-left: 34px; padding-right: 34px; -webkit-appearance: none; appearance: none; }
.mr-search__input::-webkit-search-cancel-button { display: none; }
.mr-search__go, .mr-search__clear { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--mr-text-muted); cursor: pointer; }
.mr-search__go { left: 4px; }
.mr-search__clear { right: 4px; }
.mr-search__go:hover, .mr-search__clear:hover { color: var(--mr-text); background: var(--mr-hover-tint); }
.mr-search__input:placeholder-shown ~ .mr-search__clear { display: none; }
.mr-search-hint { margin-bottom: 12px; font-size: 13px; color: var(--mr-text-muted); }
@media (max-width: 640px) {
    .mr-card-head:has(.mr-search), .tk-panel-head:has(.mr-search) { flex-wrap: wrap; }
    .mr-search { width: 100%; }
    .mr-search .mr-search__input { font-size: 16px; }
}
/* Ours and theirs read apart at a glance, not by hunting for the chip. */
.mr-ticket-msg--staff { border-left: 3px solid var(--mr-accent); }
.mr-ticket-msg .mr-ticket-body { margin-top: 2px; }
#reply-body { width: 100%; max-width: 100%; }
.mr-ticket-from-email { color: var(--mr-text-muted); }

/* The whole row opens the ticket. One anchor still, with an overlay rather than
   a second link, so the markup stays valid and a screen reader hears it once.
   The row action sits above the overlay or it would never be clickable. */
.mr-table tbody tr:has(.mr-row-link) { position: relative; cursor: pointer; }
.mr-row-link::after { content: ""; position: absolute; inset: 0; }
.mr-table tbody tr:has(.mr-row-link) form,
.mr-table tbody tr:has(.mr-row-link) .mr-icon-btn { position: relative; z-index: 1; }

/* Agent pages: identity header with Save on the right, instructions as the hero. */
.mr-agent-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.mr-agent-id { flex: 1 1 320px; min-width: 0; }
.mr-agent-id h2 { margin: 0; }
.mr-agent-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; }
.mr-agent-id .mr-hint { margin: 8px 0 0; max-width: 640px; }
.mr-agent-head .mr-row-actions { flex: none; }
.mr-field--hero textarea { max-width: none; line-height: 1.55; }
.mr-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 6px; }
.mr-label-row label { margin-bottom: 0; }
.mr-agent-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--mr-border); font-size: 14px; font-weight: 600; cursor: pointer; }
.mr-agent-row input { width: auto; margin: 0; flex: none; }

/* ── Usage: capacity meters, day columns, fact lists ───────────── */
.mr-meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
.mr-meter__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: 13px; }
.mr-meter__label { font-weight: 600; color: var(--mr-text); }
.mr-meter__val { color: var(--mr-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mr-meter__track { display: block; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--mr-border) 60%, transparent); overflow: hidden; }
.mr-meter__fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--mr-accent); }
.mr-meter__fill.is-warn { background: var(--mr-warn); }
.mr-meter__fill.is-high { background: var(--mr-danger); }
.mr-meter__note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--mr-text-muted); }
.mr-meter__note strong { color: var(--mr-text); }
.mr-meter--inline { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.mr-meter--inline .mr-meter__track { flex: 1; }
.mr-meter__pct { width: 36px; text-align: right; font-size: 12px; color: var(--mr-text-muted); font-variant-numeric: tabular-nums; }
.mr-colchart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; }
.mr-colchart__col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.mr-colchart__n { min-height: 14px; font-size: 11px; color: var(--mr-text-muted); font-variant-numeric: tabular-nums; }
.mr-colchart__plot { display: flex; align-items: flex-end; width: 100%; height: 120px; }
.mr-colchart__bar { display: block; width: 100%; height: 0; border-radius: 3px 3px 0 0; background: var(--mr-accent); }
.mr-colchart__label { font-size: 11px; color: var(--mr-text-muted); }
.mr-facts { margin: 0; }
.mr-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--mr-border); font-size: 13px; }
.mr-facts > div:last-child { border-bottom: 0; }
.mr-facts dt { color: var(--mr-text-muted); }
.mr-facts dd { margin: 0; text-align: right; font-weight: 600; color: var(--mr-text); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
    .mr-meters { grid-template-columns: 1fr; }
    .mr-colchart__n { font-size: 10px; }
}