/*
 * Tidemark panel theme overrides (Filament v4, light mode).
 * Loaded from AdminPanelProvider via the panels::head.end render hook.
 * Goal: every surface has a visible edge — cards, card headers, table
 * headers and rows are separated by borders, so text never sits loose on
 * the canvas.
 */
:root {
    /* Nautical theme — chart ink, tide teal, buoy orange (mockup: Tidemark UI Redesign). */
    --tm-font: 'Archivo', ui-sans-serif, system-ui, sans-serif;
    --tm-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --tm-ink: #0e1b2c;
    --tm-ink-2: #172a40;
    --tm-ink-line: #22384f;
    --tm-tide: #0f6e78;
    --tm-tide-light: #5fc4c9;
    --tm-buoy: #c2410c;
    --tm-canvas: #e4eae9;
    --tm-surface: #ffffff;
    --tm-surface-sunken: #f3f6f5;
    --tm-border: #c9d3d1;
    --tm-divider: #dde4e2;
    --tm-row: #eef2f1;
    --tm-text-muted: #4d5f6b;
    --tm-shadow: 0 1px 2px rgba(14, 27, 44, .06), 0 6px 16px -8px rgba(14, 27, 44, .18);
    --tm-gap: 1.25rem;
}

body, .fi-sidebar, .fi-topbar, [class*="fi-"] { font-family: var(--tm-font) !important; }
/* Numbers read best in a mono face. */
.fi-wi-stats-overview-stat-value, .fi-ta-text-item-label.tabular, .tm-mono { font-family: var(--tm-mono) !important; }

/* ── Canvas & chrome ─────────────────────────────────────────────────── */
body, .fi-body, .fi-main-ctn, .fi-main { background-color: var(--tm-canvas) !important; }

.fi-topbar, .fi-topbar > div {
    background-color: var(--tm-surface) !important;
    border-bottom: 1px solid var(--tm-border) !important;
}

/* Brand (logo view: resources/views/filament/brand.blade.php) */
.tm-brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--tm-ink); }
.tm-brand-mark { width: 1.6rem; height: 1.6rem; color: var(--tm-tide); }
.tm-brand-name { font-weight: 750; font-stretch: 112%; font-size: 1.1rem; letter-spacing: -.01em; }

/* Sidebar: chart-ink panel, light text, light pill for the active item. */
.fi-sidebar { background-color: var(--tm-ink) !important; border-right: 1px solid var(--tm-ink-line) !important; }
.fi-sidebar-header { background-color: var(--tm-ink) !important; border-bottom: 1px solid var(--tm-ink-line) !important; box-shadow: none !important; }
.fi-sidebar .tm-brand, .fi-sidebar .tm-brand-name { color: #e7eceb; }
.fi-sidebar .tm-brand-mark { color: var(--tm-tide-light); }
.fi-sidebar-nav { background: transparent !important; }
.fi-sidebar-nav-groups { gap: 0 !important; }
.fi-sidebar-group + .fi-sidebar-group,
.fi-sidebar-item + .fi-sidebar-group { border-top: 1px solid var(--tm-ink-line); margin-top: .5rem; padding-top: .75rem; }
.fi-sidebar-item-btn { border-radius: .45rem !important; }
.fi-sidebar-item-label, .fi-sidebar-item-icon, .fi-sidebar-group-btn, .fi-sidebar-group-label,
.fi-sidebar-group-collapse-btn, .fi-sidebar-group-dropdown-trigger-btn, .fi-sidebar .fi-icon-btn { color: #c9d4d8 !important; }
.fi-sidebar-group-label {
    font-size: .68rem !important; font-weight: 650 !important; color: #8fa3af !important;
    text-transform: uppercase; letter-spacing: .1em; font-stretch: 85%;
}
.fi-sidebar-item-btn:hover, .fi-sidebar-item-btn:focus-visible { background-color: var(--tm-ink-2) !important; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: #e7eceb !important; }
.fi-sidebar-item.fi-active .fi-sidebar-item-label, .fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: var(--tm-ink) !important; font-weight: 650; }
.fi-sidebar-item-grouped-border-part { background-color: var(--tm-ink-line) !important; }
.fi-sidebar .fi-badge { font-family: var(--tm-mono); }
/* Tenant switcher sits on the ink panel too. */
.fi-sidebar .fi-tenant-menu-trigger, .fi-sidebar .fi-tenant-menu-trigger * { color: #e7eceb !important; }
.fi-sidebar .fi-tenant-menu-trigger { background: var(--tm-ink-2) !important; border: 1px solid #2b4763 !important; border-radius: .5rem; }

/* Page header sits on its own rule line above the content. */
.fi-page-header-main-ctn { border-bottom: 1px solid var(--tm-border); padding-bottom: 1.25rem; margin-bottom: 0.25rem; }

/* ── Cards ───────────────────────────────────────────────────────────── */
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    background-color: var(--tm-surface) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: 0.75rem !important;
    box-shadow: var(--tm-shadow) !important;
    overflow: hidden;
}

/* Card headers: tinted bar with a divider underneath. */
.fi-section:not(.fi-section-not-contained) > .fi-section-header,
.fi-ta-header-ctn {
    background-color: var(--tm-surface-sunken) !important;
    border-bottom: 1px solid var(--tm-divider) !important;
}
.fi-section-header-heading, .fi-ta-header-heading { font-weight: 650 !important; letter-spacing: -0.005em; }

/* ── Tables ──────────────────────────────────────────────────────────── */
.fi-ta-header-cell, .fi-ta-actions-header-cell, .fi-ta-empty-header-cell {
    background-color: var(--tm-surface-sunken) !important;
    border-bottom: 1px solid var(--tm-border) !important;
}
.fi-ta-header-cell, .fi-ta-header-cell button, .fi-ta-header-cell span {
    font-size: 0.7rem !important; font-weight: 650 !important;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--tm-text-muted) !important;
}
.fi-ta-row + .fi-ta-row { border-top: 1px solid var(--tm-divider) !important; }
.fi-ta-row:hover { background-color: #f8fafc !important; }
.fi-ta-ctn .fi-pagination, .fi-ta-footer-ctn { border-top: 1px solid var(--tm-divider) !important; }

/* ── Stats ───────────────────────────────────────────────────────────── */
.fi-wi-stats-overview { gap: 1rem !important; }
.fi-wi-stats-overview-stat-label {
    font-size: 0.72rem !important; font-weight: 650 !important;
    text-transform: uppercase; letter-spacing: 0.07em; color: var(--tm-text-muted) !important;
}
.fi-wi-stats-overview-stat-value { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.fi-wi-stats-overview-stat-description { border-top: 1px solid var(--tm-divider); padding-top: 0.5rem; margin-top: 0.25rem; }

/* Widget grid spacing */
.fi-wi { gap: var(--tm-gap) !important; }

/* ── Plan bar (dashboard) ────────────────────────────────────────────── */
.tm-planbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
    background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: 0.75rem;
    box-shadow: var(--tm-shadow); padding: 0.625rem 0.875rem;
}
.tm-planbar-badge {
    font-size: 0.7rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.08em;
    color: #fff; background: #475569; border-radius: 999px; padding: 0.3rem 0.75rem; white-space: nowrap;
}
.tm-plan-starter { background: #1d4ed8; } .tm-plan-growth { background: #047857; } .tm-plan-agency { background: #6d28d9; }
.tm-planbar-price { font-weight: 600; opacity: 0.85; margin-left: 0.25rem; text-transform: none; letter-spacing: 0; }
.tm-planbar-stats { display: flex; flex-wrap: wrap; margin: 0; flex: 1 1 420px; min-width: 0; }
.tm-planbar-stats > div { display: flex; flex-direction: column; padding: 0 1rem; border-left: 1px solid var(--tm-divider); }
.tm-planbar-stats > div:first-child { border-left: 0; padding-left: 0.25rem; }
.tm-planbar-stats dt { font-size: 0.65rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tm-text-muted); }
.tm-planbar-stats dd { margin: 0; font-size: 0.85rem; font-weight: 600; color: #0f172a; font-variant-numeric: tabular-nums; }
.tm-planbar-locked {
    display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.25rem; padding: 0 0.75rem;
    font-size: 0.8rem; font-weight: 600; color: #334155; background: var(--tm-surface-sunken);
    border: 1px solid var(--tm-border); border-radius: 0.5rem; cursor: pointer;
}
.tm-planbar-locked:hover { background: #eef2f7; }
.tm-planbar-icon { width: 1rem; height: 1rem; }
.tm-planbar-cta {
    min-height: 2.25rem; padding: 0 1rem; font-size: 0.8rem; font-weight: 700; color: #fff;
    background: var(--primary-600, #4f46e5); border: 0; border-radius: 0.5rem; cursor: pointer;
}
.tm-planbar-cta:hover { background: var(--primary-700, #4338ca); }

/* ── 30-day uptime bars (Sites table) ────────────────────────────────── */
.tm-uptime { display: flex; align-items: center; gap: 0.6rem; }
.tm-uptime-bars { display: flex; align-items: flex-end; gap: 2px; height: 1.4rem; }
.tm-uptime-bar { display: block; width: 4px; border-radius: 1px; }
.tm-uptime-up { height: 100%; background: #10b981; }
.tm-uptime-degraded { height: 70%; background: #f59e0b; }
.tm-uptime-down { height: 45%; background: #e11d48; }
.tm-uptime-none { height: 30%; background: #cbd5e1; }
.tm-uptime-pct { font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #0f172a; min-width: 3.5rem; }

/* ── Top issues widget ───────────────────────────────────────────────── */
.tm-issues { list-style: none; margin: -0.5rem -1.5rem; padding: 0; }
.tm-issues > li + li { border-top: 1px solid var(--tm-divider); }
.tm-issue { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1.5rem; }
.tm-issue:hover { background: #f8fafc; }
.tm-issue-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; text-decoration: none; color: inherit; }
a.tm-issue-body:hover .tm-issue-title { text-decoration: underline; }
.tm-issue-title { font-size: 0.875rem; font-weight: 600; color: #0f172a; }
.tm-issue-meta { font-size: 0.75rem; color: var(--tm-text-muted); }
.tm-issue-detail { font-size: 0.75rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-sev {
    flex: none; font-size: 0.62rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.2rem 0.45rem; border-radius: 0.35rem; color: #fff; margin-top: 0.1rem;
}
.tm-sev-critical { background: #be123c; }
.tm-sev-warning { background: #b45309; }
.tm-sev-opportunity { background: #1d4ed8; }
.tm-empty { display: flex; align-items: center; gap: 0.6rem; color: var(--tm-text-muted); font-size: 0.875rem; }
.tm-empty-icon { width: 1.5rem; height: 1.5rem; color: #10b981; }
.tm-muted { margin: 0; font-size: 0.8rem; color: var(--tm-text-muted); }

/* ── What changed widget ─────────────────────────────────────────────── */
.tm-change-site + .tm-change-site { border-top: 1px solid var(--tm-divider); margin-top: 1rem; padding-top: 1rem; }
.tm-change-name { font-size: 0.875rem; font-weight: 650; margin-bottom: 0.6rem; }
.tm-change-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.5rem; margin: 0 0 0.6rem; }
.tm-change { border: 1px solid var(--tm-divider); border-radius: 0.5rem; padding: 0.5rem 0.65rem; background: var(--tm-surface-sunken); }
.tm-change dt { font-size: 0.65rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.07em; color: var(--tm-text-muted); }
.tm-change dd { margin: 0.15rem 0 0; display: flex; align-items: baseline; gap: 0.4rem; }
.tm-change-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #0f172a; }
.tm-delta { font-size: 0.72rem; font-weight: 650; }
.tm-delta-up { color: #047857; } .tm-delta-down { color: #be123c; } .tm-delta-flat, .tm-delta-none { color: #64748b; font-weight: 500; }
.tm-change-new { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: #334155; }

/* Fix-list tabs, actions and lifecycle pills */
.tm-tabs { display: flex; gap: 0.25rem; margin: -0.25rem 0 0.75rem; border-bottom: 1px solid var(--tm-divider); }
.tm-tab {
    display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.25rem; padding: 0 0.75rem;
    font-size: 0.8rem; font-weight: 600; color: var(--tm-text-muted); background: none; border: 0;
    border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.tm-tab-active { color: #0f172a; border-bottom-color: var(--primary-600, #4f46e5); }
.tm-tab-count { font-size: 0.7rem; font-variant-numeric: tabular-nums; background: var(--tm-surface-sunken); border: 1px solid var(--tm-divider); border-radius: 999px; padding: 0 0.4rem; }
.tm-issue-actions { display: flex; gap: 0.35rem; flex: none; }
.tm-btn {
    min-height: 2rem; padding: 0 0.65rem; font-size: 0.75rem; font-weight: 600; color: #0f172a;
    background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: 0.4rem; cursor: pointer;
}
.tm-btn:hover { background: var(--tm-surface-sunken); }
.tm-btn-quiet { border-color: transparent; color: var(--tm-text-muted); }
.tm-btn[disabled] { opacity: 0.5; cursor: wait; }
.tm-pill { margin-left: 0.35rem; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.1rem 0.4rem; border-radius: 999px; vertical-align: middle; }
.tm-pill-regressed { background: #ffe4e6; color: #9f1239; border: 1px solid #fecdd3; }
.tm-pill-pending { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }
.tm-sev-resolved { background: #047857; }
.tm-issues-more { margin-top: 0.75rem; }

/* Impact area chip in the fix list — what fixing the issue improves. */
.tm-area { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.05rem 0.4rem; border-radius: 0.3rem; margin-right: 0.35rem; border: 1px solid; }
.tm-area-indexing { color: #9f1239; background: #fff1f2; border-color: #fecdd3; }
.tm-area-ranking { color: #1e3a8a; background: #eff6ff; border-color: #bfdbfe; }
.tm-area-click-through { color: #6b21a8; background: #faf5ff; border-color: #e9d5ff; }
.tm-area-experience { color: #065f46; background: #ecfdf5; border-color: #a7f3d0; }
.tm-area-sharing { color: #475569; background: #f8fafc; border-color: #e2e8f0; }
.tm-area-ai-search { color: #0e7490; background: #ecfeff; border-color: #a5f3fc; }

/* Layout helper: widget root with class tm-row-span-2 spans two grid rows (lg+). */
@media (min-width: 1024px) {
    /* v4 renders widgets straight into a .fi-grid (no .fi-wi wrapper). */
    .fi-grid > .tm-row-span-2 { grid-row: span 2; }
}

/* ══ Redesign v2 components ══════════════════════════════════════════ */
.tm-kicker { font-size: .66rem; font-weight: 650; text-transform: uppercase; letter-spacing: .09em; font-stretch: 85%; color: var(--tm-text-muted); }
.tm-kicker-light { color: #9fb3bf; }
.tm-small { font-size: .75rem; }
.tm-strong { font-weight: 650; }
.tm-pad-top { margin-top: .6rem; }
.tm-num { text-align: right; font-family: var(--tm-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-tone-good { color: #0f6e4a; } .tm-tone-warn { color: #8a5a00; } .tm-tone-bad { color: #b23a0b; } .tm-tone-muted { color: var(--tm-text-muted); }
.tm-delta-flat { color: var(--tm-text-muted); }

/* KPI strip: dial cell on ink + ruled cells */
.tm-strip {
    display: grid; grid-template-columns: minmax(220px, 1.3fr) repeat(5, minmax(140px, 1fr));
    background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: .75rem; overflow: hidden; box-shadow: var(--tm-shadow);
}
@media (max-width: 1200px) { .tm-strip { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.tm-strip-dial { display: flex; gap: .85rem; align-items: center; padding: .85rem 1rem; background: var(--tm-ink); color: #e7eceb; }
.tm-dial {
    --tm-pct: 0%; width: 60px; height: 60px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: conic-gradient(var(--tm-tide-light) 0 var(--tm-pct), #2b4763 var(--tm-pct) 100%);
}
.tm-dial span { width: 46px; height: 46px; border-radius: 50%; background: var(--tm-ink); display: grid; place-items: center; font-family: var(--tm-mono); font-weight: 600; font-size: 1.05rem; }
.tm-dial-text { display: flex; flex-direction: column; gap: .1rem; }
.tm-dial-title { font-weight: 650; }
.tm-dial-note { font-size: .72rem; color: var(--tm-tide-light); }
.tm-strip-cell { display: flex; flex-direction: column; gap: .2rem; padding: .85rem 1rem; border-left: 1px solid var(--tm-divider); }
.tm-strip-value { font-family: var(--tm-mono); font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; color: var(--tm-ink); }
.tm-strip-note { font-size: .75rem; border-top: 1px solid var(--tm-row); padding-top: .3rem; }

/* Plan bar v2: ink badge cell + ruled stat cells */
.tm-planbar { padding: 0 !important; gap: 0 !important; align-items: stretch !important; overflow: hidden; }
.tm-planbar-badge { display: flex; align-items: center; border-radius: 0 !important; padding: .55rem 1rem !important; background: var(--tm-ink) !important; font-family: var(--tm-mono); }
.tm-planbar-stats > div { padding: .45rem 1rem !important; border-left: 1px solid var(--tm-divider) !important; justify-content: center; }
.tm-planbar-stats > div:first-child { padding-left: 1rem !important; }
.tm-planbar-stats dd { font-family: var(--tm-mono); }
.tm-planbar-locked, .tm-planbar-cta { margin: .45rem .5rem .45rem 0; align-self: center; }
.tm-planbar-locked { margin-left: auto; }
.tm-planbar-cta { background: var(--tm-tide) !important; }

/* Ruled tables inside sections */
.tm-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.tm-table caption { text-align: left; padding: .6rem 0 .3rem; }
.tm-table th { font-size: .66rem; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--tm-text-muted); text-align: left; padding: .4rem .5rem; background: var(--tm-surface-sunken); border-bottom: 1px solid var(--tm-divider); }
.tm-table th.tm-num { text-align: right; }
.tm-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--tm-row); vertical-align: top; }
.tm-table tr:last-child td { border-bottom: 0; }

/* Search & traffic metric cells */
.tm-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: -.25rem -1.5rem .25rem; border-bottom: 1px solid var(--tm-divider); }
.tm-metric { display: flex; flex-direction: column; gap: .25rem; padding: .5rem 1.5rem .75rem; border-right: 1px solid var(--tm-row); }
.tm-metric:last-child { border-right: 0; }
.tm-metric-value { font-family: var(--tm-mono); font-size: 1.15rem; font-weight: 600; }
.tm-spark { width: 100%; height: 26px; }
.tm-spark polyline { stroke: var(--tm-tide); stroke-width: 2; stroke-linejoin: round; }

/* Section headers on dashboard widgets read like the mockup */
.fi-wi .fi-section-header { padding-top: .6rem !important; padding-bottom: .6rem !important; }
.fi-wi .fi-section-header-heading { font-size: .92rem !important; }

/* Buttons in the primary colour use the deep tide teal with white text */
.fi-btn.fi-color-primary:not(.fi-btn-outlined) { background-color: var(--tm-tide) !important; color: #fff !important; }

/* ── Fix list page ───────────────────────────────────────────────────── */
.tm-fix { display: flex; flex-direction: column; gap: 1rem; }
.tm-fix-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .75rem; }
.tm-fix-tabs { margin: 0; flex: 1 1 auto; }
.tm-fix-summary { display: flex; border: 1px solid var(--tm-border); border-radius: .5rem; background: var(--tm-surface); overflow: hidden; font-size: .8rem; }
.tm-fix-summary > span { padding: .4rem .75rem; border-left: 1px solid var(--tm-divider); }
.tm-fix-summary > span:first-child { border-left: 0; }
.tm-fix-summary strong { font-family: var(--tm-mono); }
.tm-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.tm-chip { min-height: 2rem; padding: 0 .75rem; border-radius: .4rem; font-size: .78rem; font-weight: 600; background: var(--tm-surface); color: var(--tm-ink); border: 1px solid var(--tm-border); cursor: pointer; }
.tm-chip-on { background: var(--tm-ink); color: #fff; border-color: var(--tm-ink); }
.tm-card { background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: .75rem; overflow: hidden; box-shadow: var(--tm-shadow); }
.tm-scroll { overflow-x: auto; }
.tm-fix-table { min-width: 980px; }
.tm-fix-table td { padding: .6rem .75rem; border-left: 1px solid var(--tm-row); }
.tm-fix-table td:first-child, .tm-fix-table th:first-child { padding-left: 1rem; border-left: 0; }
.tm-fix-table th { padding: .55rem .75rem; border-bottom-color: var(--tm-border); }
.tm-fix-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .25rem; }
.tm-fix-detail { margin-top: .5rem; padding: .6rem .75rem; background: var(--tm-surface-sunken); border: 1px solid var(--tm-divider); border-radius: .4rem; font-size: .8rem; }
.tm-fix-detail p { margin: 0 0 .35rem; }
.tm-row-regressed td { background: #fff8f8; }
.tm-brief { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--tm-divider); }
.tm-brief-card { background: #fff; border: 1px solid var(--tm-border); border-radius: .6rem; padding: 1rem 1.1rem 1.05rem; box-shadow: 0 1px 2px rgba(14,27,44,.05); }
.tm-brief-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .7rem; }
.tm-brief-tag { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--tm-ink); padding: .18rem .55rem; border-radius: 999px; }
.tm-brief-chip { font-size: .68rem; font-weight: 600; color: #33444d; background: var(--tm-surface-sunken); border: 1px solid var(--tm-divider); padding: .14rem .5rem; border-radius: 999px; }
.tm-brief-chip-high { color: #0b5c3c; background: #e6f4ee; border-color: #bfe3d2; }
.tm-brief-chip-medium { color: #7a4a00; background: #fdf1dc; border-color: #f3d9a8; }
.tm-brief-chip-low { color: #9b1c12; background: #fde8e6; border-color: #f6c6c0; }
.tm-brief-date { margin-left: auto; font-size: .7rem; color: var(--tm-text-muted); }
.tm-brief-summary { margin: 0 0 .8rem; font-size: .92rem; font-weight: 700; line-height: 1.45; color: var(--tm-ink); }
.tm-brief-section { margin: 0 0 .85rem; }
.tm-brief-section p { margin: 0; font-size: .82rem; line-height: 1.55; color: #33444d; }
.tm-brief-label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tm-tide); margin-bottom: .3rem; }
.tm-brief-steps { margin: 0; padding: 0; list-style: none; counter-reset: tmstep; display: flex; flex-direction: column; gap: .45rem; }
.tm-brief-steps li { counter-increment: tmstep; position: relative; padding-left: 1.85rem; font-size: .82rem; line-height: 1.5; color: #1f2f3a; }
.tm-brief-steps li::before { content: counter(tmstep); position: absolute; left: 0; top: .02rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #e0eeee; color: var(--tm-tide); font-size: .68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tm-brief-warning { margin: 0 0 .8rem; padding: .45rem .65rem; font-size: .75rem; color: #7c2d12; background: #fff7ed; border: 1px solid #fed7aa; border-radius: .4rem; }
.tm-brief-block { margin: 0 0 .7rem; border: 1px solid var(--tm-border); border-radius: .5rem; background: #fff; overflow: hidden; }
.tm-brief-block-head { display: flex; justify-content: space-between; align-items: center; padding: .35rem .6rem .35rem .75rem; border-bottom: 1px solid var(--tm-divider); background: var(--tm-surface-sunken); }
.tm-brief-block-head .tm-brief-label { margin: 0; color: #4f5f68; }
.tm-brief-copy { font: inherit; font-size: .7rem; font-weight: 600; color: var(--tm-tide); background: #fff; border: 1px solid var(--tm-border); border-radius: .35rem; padding: .25rem .65rem; cursor: pointer; }
.tm-brief-copy:hover { border-color: var(--tm-tide); }
.tm-brief-block pre { margin: 0; padding: .7rem .8rem; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .74rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-height: 18rem; overflow: auto; color: #0e1b2c; background: #fbfcfc; }
.tm-brief-block pre.tm-brief-copytext { font-family: inherit; font-size: .82rem; }
.tm-brief-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--tm-divider); font-size: .72rem; color: var(--tm-text-muted); }
.tm-brief-regen { border: 1px solid var(--tm-border); background: #fff; color: var(--tm-ink); font-weight: 600; }
.tm-brief-regen:hover { border-color: var(--tm-tide); color: var(--tm-tide); }
.tm-actions-cell { text-align: right; white-space: nowrap; }
.tm-btn-primary { background: var(--tm-tide); color: #fff; border-color: var(--tm-tide); }
.tm-btn-primary:hover { background: #0a5960; }
.tm-status { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .15rem .5rem; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.tm-status-open { color: var(--tm-text-muted); background: var(--tm-surface-sunken); border-color: var(--tm-divider); }
.tm-status-regressed { color: #9f1239; background: #ffe4e6; border-color: #fecdd3; }
.tm-status-fixed { color: #075985; background: #e0f2fe; border-color: #bae6fd; }
.tm-status-resolved { color: #0f6e4a; background: #e6f4ef; border-color: #b5ddcd; }
.tm-status-ignored { color: #475569; background: #f8fafc; border-color: #e2e8f0; }
.tm-sev-resolved { background: #047857; }
.tm-pad-top-xs { margin-top: .25rem; }
.tm-empty-row { text-align: center; padding: 1.75rem !important; color: var(--tm-text-muted); }
.tm-link { font-size: .8rem; font-weight: 600; color: var(--tm-tide); text-decoration: none; }
.tm-link:hover { text-decoration: underline; }

/* Cards in the same dashboard row share a height, so row bottoms line up
   instead of leaving ragged canvas beside a shorter card. */
@media (min-width: 1024px) {
    .fi-grid > .fi-wi-widget { display: flex; flex-direction: column; }
    /* Only stretch the card containers — never a widget's own layout (strip, plan bar). */
    .fi-grid > .fi-wi-widget > .fi-section,
    .fi-grid > .fi-wi-widget > .fi-ta { flex: 1 1 auto; }
    .fi-grid > .fi-wi-widget > .fi-ta { display: flex; flex-direction: column; }
    .fi-grid > .fi-wi-widget > .fi-ta > .fi-ta-ctn { flex: 1 1 auto; }
}

/* ── Site health (redesign) ──────────────────────────────────────────── */
.tm-hero { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--tm-ink); color: #e7eceb; border-radius: .75rem; padding: 1rem 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--tm-shadow); }
.tm-hero-waves { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .35; stroke: #2d5a73; stroke-width: 1; pointer-events: none; }
.tm-hero-main { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.tm-hero-pill { display: inline-flex; align-items: center; gap: .4rem; background: #13414a; color: #9ee2e0; border: 1px solid #1f5a64; border-radius: 999px; padding: .2rem .7rem; font-size: .75rem; font-weight: 650; }
.tm-hero-pill-down { background: #4a1d13; color: #fbc4ae; border-color: #7a2f1d; }
.tm-hero-dot { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.tm-hero-url { color: #fff; font-weight: 650; text-decoration: none; }
.tm-hero-url:hover { text-decoration: underline; }
.tm-hero-meta { color: #9fb3bf; font-size: .78rem; }
.tm-hero-dial { position: relative; display: flex; align-items: center; gap: .75rem; }

.tm-scorestrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: .75rem; overflow: hidden; box-shadow: var(--tm-shadow); margin-bottom: 1.25rem; }
/* Score cells are twice as wide as vital cells: 3 scores fill a row of 6. */
.tm-scorestrip .tm-score { grid-column: span 2; }
@media (max-width: 640px) { .tm-scorestrip .tm-score { grid-column: auto; } }
.tm-score, .tm-vital { padding: .75rem .9rem; border-right: 1px solid var(--tm-divider); border-bottom: 1px solid var(--tm-row); }
.tm-score { display: flex; align-items: center; gap: .7rem; }
.tm-score-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.tm-ring { --tm-pct: 0%; --tm-ring: #94a3b8; width: 50px; height: 50px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: conic-gradient(var(--tm-ring) 0 var(--tm-pct), var(--tm-divider) var(--tm-pct) 100%); }
.tm-ring span { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-family: var(--tm-mono); font-weight: 600; }
.tm-vital { display: flex; flex-direction: column; gap: .15rem; }
.tm-vital-value { font-family: var(--tm-mono); font-size: 1.1rem; font-weight: 600; color: var(--tm-ink); }
.tm-vital-value.tm-tone-good { color: #0f6e4a; } .tm-vital-value.tm-tone-warn { color: #8a5a00; } .tm-vital-value.tm-tone-bad { color: #b23a0b; }

.tm-checks { margin-bottom: 1.25rem; }
.tm-card-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem 1.25rem; background: var(--tm-surface-sunken); border-bottom: 1px solid var(--tm-border); }
.tm-card-head h2 { margin: 0; font-size: .92rem; font-weight: 680; }
.tm-area-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--tm-divider); background: #fafbfb; }
.tm-area-tab { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: 0 1rem; font-size: .82rem; font-weight: 600; color: var(--tm-text-muted);
    background: none; border: 0; border-right: 1px solid var(--tm-divider); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.tm-area-tab-on { background: #fff; color: var(--tm-ink); border-bottom-color: var(--tm-tide); }
.tm-count { font-family: var(--tm-mono); font-size: .7rem; padding: 0 .4rem; border-radius: 999px; border: 1px solid #b5ddcd; background: #e6f4ef; color: #0f6e4a; }
.tm-count-bad { border-color: #f4c3ae; background: #fdede6; color: #b23a0b; }
.tm-checks-table td { padding: .55rem .75rem; }
.tm-checks-table td:first-child { padding-left: 1.25rem; width: 1.5rem; }
.tm-checks-table td:last-child { padding-right: 1.25rem; border-left: 1px solid var(--tm-row); width: 9rem; }
.tm-check { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; color: #fff; font-size: .7rem; font-weight: 700; }
.tm-check-pass { background: #0f6e4a; } .tm-check-critical { background: #b23a0b; } .tm-check-warning { background: #8a5a00; } .tm-check-opportunity { background: #1e4fb8; }

/* Platform panel: brand suffix + impersonation banner */
.tm-brand-suffix { margin-left: .4rem; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #c2410c; padding: .12rem .45rem; border-radius: 999px; }
.tm-impersonating { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; padding: .55rem 1rem; background: #c2410c; color: #fff; font-size: .85rem; font-weight: 600; }
.tm-impersonating button { font: inherit; font-weight: 700; color: #c2410c; background: #fff; border: 0; border-radius: .4rem; padding: .3rem .8rem; cursor: pointer; }
.tm-impersonating button:focus-visible { outline: 3px solid #0e1b2c; outline-offset: 2px; }