/* =====================================================================
 * Page-specific styles for the Metronic re-theme.
 * Section 1: Style Book (sb-*) - layout + demo sub-components that the
 * kt-* extraction doesn't cover (Alpine dropdown/modal/tab patterns).
 * Everything is token-driven.
 * ===================================================================== */

/* ---- Style Book layout ---- */
.sb-layout { display: grid; grid-template-columns: 1fr 11rem; gap: 1.5rem; align-items: start; }
@media (max-width: 1100px) { .sb-layout { grid-template-columns: 1fr; } .sb-anchor-nav { display: none; } }
.sb-content { min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }

/* Frosted-glass "cx-section" card - matches the lead-tracking dashboard house
   standard (reference_cyticx_cx_section_design_standard). Each <section> is
   its own bento card with a top accent bar + glowing dot header. */
.sb-section {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 20px 22px 22px;
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 34px -14px rgba(0,0,0,.55);
    overflow: hidden;
    --sec-accent: #4299e1;
    /* Body/description copy reads grey-on-grey against the frosted glass at the
       theme's default --muted-foreground (zinc-500). Brighten it within the
       Style Book only so secondary text stays legibly "white and grey". */
    --muted-foreground: rgba(255,255,255,.66);
}
.sb-section > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.sb-section::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 1;
    background: linear-gradient(90deg, transparent, var(--sec-accent), transparent);
    opacity: .85;
}
.sb-section.cx-sec-lead   { --sec-accent: #4299e1; }
.sb-section.cx-sec-map    { --sec-accent: #22d3ee; }
.sb-section.cx-sec-status { --sec-accent: #a78bfa; }
.sb-section.cx-sec-tools  { --sec-accent: #e0a33e; }

.sb-section-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.sb-section-h .sb-sec-dot {
    width: 9px; height: 9px; border-radius: 50%; align-self: center; flex: 0 0 auto;
    background: var(--sec-accent); box-shadow: 0 0 10px var(--sec-accent);
}
.sb-section-title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--foreground); letter-spacing: var(--tracking-tight); margin: 0; }
.sb-section-sub { font-size: var(--text-2sm); color: var(--muted-foreground); }

/* 2026-08-04: genuinely never defined (checked every metronic/cxp.css.bak-* -
   no match anywhere), not a cleanup regression. Used as a sub-heading above an
   individual demo inside a section (_panels.blade.php, _patterns.blade.php) -
   one step below .sb-section-title, sized like a card title. margin:0 to match
   .sb-section-title's convention - both partials already add their own
   inline margin-top between repeated demos, so a built-in margin would
   double the gap on top of the parent's flex/grid spacing. */
.sb-demo-label { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--foreground); margin: 0; }

/* Nested demo cards go flat/transparent so they sit inside the frosted
   section instead of nesting another bordered box (same override the
   dashboard uses for .cx-section .card), with a bigger modern radius and
   a soft glass header band instead of a flat divider line. */
.sb-section .kt-card { background: var(--card); border-color: rgba(255,255,255,.06); box-shadow: none; border-radius: 16px; }
.sb-section .kt-card-header {
    background: linear-gradient(180deg, rgba(255,255,255,.035), transparent);
    border-bottom: 1px solid rgba(255,255,255,.06);
    border-top-left-radius: 16px; border-top-right-radius: 16px;
}
.sb-section .kt-card-footer { border-top: 1px solid rgba(255,255,255,.06); }
.sb-section .kt-card-title { font-size: var(--text-base); letter-spacing: var(--tracking-tight); }
.sb-section .kt-card-table .kt-card-content { border-radius: 0 0 16px 16px; overflow: hidden; }

/* Chart legends default to a one-item-per-line column (Metronic global
   default) which wastes vertical space and reads poorly on compact chart
   cards. Force a compact wrapping row instead. */
.sb-section .apexcharts-legend { flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem !important; padding-top: 0.25rem; }
.sb-section .apexcharts-legend .apexcharts-legend-series { gap: 0.375rem !important; }

.sb-anchor-nav {
    position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 2px;
    background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 0.875rem;
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
}
.sb-anchor-head { font-size: var(--text-2xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); margin-bottom: 0.375rem; }
.sb-anchor-link { font-size: var(--text-2sm); color: var(--muted-foreground); text-decoration: none; padding: 0.2rem 0.375rem; border-radius: var(--radius-md); }
.sb-anchor-link:hover { color: var(--foreground); background: rgba(255,255,255,.05); }

.sb-pad { padding: 1.25rem; }
.sb-stack { display: flex; flex-direction: column; gap: 1rem; }
.sb-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.sb-note { font-size: var(--text-xs); color: var(--muted-foreground); border-top: 1px dashed var(--border); padding-top: 0.75rem; margin-top: 0.5rem; line-height: 1.6; }
.sb-note code, .sb-rules code, .sb-swatch-name { font-family: var(--font-mono); font-size: 0.85em; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 0.05rem 0.3rem; color: var(--foreground); }

/* ---- Colors ---- */
.sb-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.625rem; }
.sb-swatch { display: flex; align-items: center; gap: 0.625rem; font-size: var(--text-xs); color: var(--muted-foreground); }
.sb-swatch-chip { width: 2rem; height: 2rem; border-radius: var(--radius-md); border: 1px solid var(--border); flex: 0 0 auto; }
.sb-swatch-use { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Icons ---- */
.sb-icon-styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
/* 2026-08-04: genuinely never defined (checked every metronic/cxp.css.bak-* -
   no match anywhere), not a cleanup regression. Each is one grid item inside
   .sb-icon-styles, stacking its own name label above its 4-col icon grid. */
.sb-icon-style-col { display: flex; flex-direction: column; min-width: 0; }
.sb-icon-style-name { font-size: var(--text-2xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); margin-bottom: 0.5rem; }
.sb-icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; }
.sb-icon-cell { display: flex; align-items: center; justify-content: center; height: 2.5rem; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--foreground); font-size: 1.2rem; background: var(--muted); }
.sb-icon-cell:hover { color: var(--primary); border-color: var(--ring); }

/* ---- Tabs (line + pill demo patterns - reusable on real pages) ---- */
.sb-tabs-line { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--border); }
/* CYT-640 findings #5/#6/#10: this period-selector row (Today/Yesterday/
   Last 7 Days/This Month/All Time) never wrapped, so on mobile the 
   rightmost tab(s) were clipped past the card edge with no way to reach 
   them - no tab is safe to drop, so wrap instead of hiding any. */
@media (max-width: 640px) {
    .sb-tabs-line { flex-wrap: wrap; gap: .5rem 1rem; }
}
.sb-tab-line { display: inline-block; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0.5rem 0.125rem; font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--muted-foreground); cursor: pointer; font-family: inherit; text-decoration: none; }
.sb-tab-line:hover { color: var(--foreground); }
.sb-tab-line.active { color: var(--primary); border-bottom-color: var(--primary); }
.sb-tabs-pill { display: inline-flex; gap: 0.25rem; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.25rem; }
/* CYT-640 finding #10: same overflow class as .sb-tabs-line - a
   period-shortcut pill row (client-view's filter bar) never wrapped, so
   the rightmost option(s) clipped past the card edge on mobile. */
@media (max-width: 640px) {
    .sb-tabs-pill { flex-wrap: wrap; }
}
.sb-tab-pill { display: inline-block; background: none; border: 0; border-radius: var(--radius-md); padding: 0.3rem 0.75rem; font-size: var(--text-2sm); font-weight: var(--font-weight-medium); color: var(--muted-foreground); cursor: pointer; font-family: inherit; text-decoration: none; }
.sb-tab-pill.active { background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px rgb(0 0 0 / 0.3); }
.sb-tab-body { font-size: var(--text-sm); color: var(--muted-foreground); padding: 0.875rem 0.125rem; }

/* ---- Stats ---- */
/* FIX (root cause, not per-instance): every sb-* component below was written
   assuming it always sits INSIDE a blurred .sb-section ancestor (true on the
   Style Book page itself, where every demo is nested in one) - so the blur
   was only ever defined on .sb-section, never on the child component. Any
   page that places .kt-card.sb-stat directly (a KPI strip at the top of a
   page, not nested in a section) got a flat, unblurred card - same class of
   bug as the .fi-ta table fix, just on a different component. Fixing at the
   component level here (own backdrop-filter) instead of per-page so this
   never has to be reported and re-fixed one page at a time again. */
.sb-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.875rem; }
.cxp-searchperf-measurement { margin: 0.65rem 0 0.9rem; }
.cxp-searchperf-freshness { margin-bottom: 1rem; }
.kt-card.sb-stat {
    position: relative;
    padding: 1.25rem 1.35rem 1.1rem; gap: 0.6rem;
    background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px -16px rgba(0,0,0,.5);
    transition: background .14s, border-color .14s, transform .14s;
    overflow: hidden;
}
.kt-card.sb-stat:hover {
    background: linear-gradient(160deg, color-mix(in srgb, var(--stat-accent, #4299e1) 18%, transparent), color-mix(in srgb, var(--stat-accent, #4299e1) 6%, transparent));
    border-color: color-mix(in srgb, var(--stat-accent, #4299e1) 40%, transparent);
    transform: translateY(-2px);
}
.sb-stat-top { display: flex; align-items: center; justify-content: space-between; }
.sb-stat-label { font-size: var(--text-2xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); }
.sb-stat-icon-chip {
    width: 2.1rem; height: 2.1rem; border-radius: 10px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--stat-accent, #4299e1) 20%, transparent);
    color: var(--stat-accent, #4299e1); font-size: 1.05rem;
}
.sb-stat-value { font-size: var(--text-4xl); font-weight: var(--font-weight-bold, 700); color: var(--foreground); line-height: 1.1; letter-spacing: var(--tracking-tight); }
.sb-stat-foot { display: flex; align-items: center; gap: 0.5rem; }
.sb-stat-caption { font-size: var(--text-2xs); color: var(--muted-foreground); }

/* ---- Forms ---- */
.sb-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem 1.25rem; }
.sb-field { display: flex; flex-direction: column; gap: 0.375rem; max-width: 24rem; }
.sb-label { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--foreground); }
.sb-hint { font-size: var(--text-xs); color: var(--muted-foreground); }
.sb-input-icon { position: relative; }
.sb-input-icon > i { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); font-size: 0.95rem; pointer-events: none; }
.sb-input-error { border-color: var(--destructive) !important; }
.sb-check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); color: var(--foreground); cursor: pointer; }
.sb-switch { width: 2.25rem; height: 1.25rem; border-radius: 9999px; background: var(--input); border: 0; position: relative; cursor: pointer; transition: background 0.15s; padding: 0; }
.sb-switch.on { background: var(--primary); }
.sb-switch-thumb { position: absolute; top: 2px; left: 2px; width: calc(1.25rem - 4px); height: calc(1.25rem - 4px); border-radius: 9999px; background: #fff; transition: transform 0.15s; display: block; }
.sb-switch.on .sb-switch-thumb { transform: translateX(1rem); }

/* Checkbox/radio inherit the app-wide .kt-checkbox (20px, square) - too
   heavy next to compact form rows. Shrink + make radios actually round,
   scoped to the Style Book so real app checkboxes elsewhere are untouched. */
.sb-section .kt-checkbox { width: 1rem; height: 1rem; border-radius: 5px; border-color: rgba(255,255,255,.18); background-color: rgba(255,255,255,.03); }
.sb-section input[type="radio"].kt-checkbox { border-radius: 50%; }
.sb-section .kt-checkbox:checked, .sb-section .kt-checkbox[aria-checked='true'] { background-size: 0.6rem; background-color: var(--primary); border-color: var(--primary); }

/* Inputs/selects read as flat black holes on the frosted glass - give them
   a touch of glass tint, inset depth, a nicer focus glow, and a styled
   select chevron instead of the plain UA arrow. */
.sb-section .kt-input {
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.10);
    border-radius: 10px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}
.sb-section .kt-input:focus-visible {
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.25), 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}
.sb-section select.kt-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238a93a6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-right: 2.25rem;
}

/* ---- Tables ---- */
.sb-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.sb-section .sb-table thead th { font-size: var(--text-2sm); font-weight: var(--font-weight-medium); color: var(--muted-foreground); text-align: left; padding: 0.75rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.sb-section .sb-table tbody td { padding: 0.75rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--foreground); }
.sb-section .sb-table tbody tr:last-child td { border-bottom: 0; }
.sb-section .sb-table tbody tr:hover td { background: rgba(255,255,255,.05); }
.sb-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.sb-th-sort:hover { color: var(--foreground); }
.sb-sort-ic { font-size: 0.7rem; margin-left: 0.25rem; color: var(--primary); }
.sb-sort-ic.dim { color: var(--muted-foreground); opacity: 0.5; }
.sb-pagination { display: flex; gap: 0.25rem; }
.sb-page-btn { min-width: 2rem; height: 2rem; border: 0; background: transparent; border-radius: var(--radius-md); color: var(--muted-foreground); font-size: var(--text-2sm); font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sb-page-btn:hover:not(:disabled) { background: var(--accent); color: var(--foreground); }
.sb-page-btn.active { background: var(--accent); color: var(--foreground); font-weight: var(--font-weight-medium); }
.sb-page-btn:disabled { opacity: 0.4; cursor: default; }

/* ---- Dropdowns ---- */
.sb-dd-wrap { position: relative; }
.sb-dd-panel { position: absolute; top: calc(100% + 0.375rem); left: 0; min-width: 13rem; background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px rgb(0 0 0 / 0.45); padding: 0.375rem; z-index: 40; }
.sb-dd-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.45rem 0.625rem; border-radius: var(--radius-md); font-size: var(--text-2sm); color: var(--foreground); text-decoration: none; }
.sb-dd-item i { color: var(--muted-foreground); font-size: 0.95rem; }
.sb-dd-item:hover { background: var(--accent); text-decoration: none; }
.sb-dd-item.danger, .sb-dd-item.danger i { color: var(--destructive); }
.sb-dd-sep { height: 1px; background: var(--border); margin: 0.375rem 0; }
.sb-dd-head { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; }
.sb-avatar { width: 1.875rem; height: 1.875rem; border-radius: 9999px; background: var(--primary); color: var(--primary-foreground); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-2sm); font-weight: var(--font-weight-semibold); flex: 0 0 auto; }

/* Select-as-dropdown: a native <select>'s OPEN option list is OS-rendered
   and can't be themed, so the trigger looks right but the popup breaks the
   whole design system the moment you click it. Use the same Alpine
   .sb-dd-panel listbox as the row/user menus instead - themed end to end. */
.sb-select-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; cursor: pointer; font-size: var(--text-sm); font-family: inherit; color: var(--foreground); }
.sb-select-chevron { font-size: 0.7rem; color: var(--muted-foreground); transition: transform 0.15s; }
.sb-select-trigger[aria-expanded="true"] .sb-select-chevron { transform: rotate(180deg); }
.sb-select-panel { width: 100%; max-height: 14rem; overflow-y: auto; }
.sb-select-panel .sb-dd-item i { color: var(--primary); }

 /* ---- Admin view bar ------------------------------------------------------
    BODY_START places this above the Filament layout. The amber striped tone
    keeps support state distinct from the customer UI without jargon or a
    floating badge. */
 .cxp-admin-bar {
     position: relative; z-index: 30; display: flex; align-items: center;
     justify-content: space-between; gap: 1rem; width: 100%; min-height: 2.75rem;
     padding: .5rem clamp(1rem, 3vw, 2rem);
     border-bottom: 1px solid color-mix(in srgb, var(--color-yellow-500) 46%, var(--border));
     background: repeating-linear-gradient(135deg,
         color-mix(in srgb, var(--color-yellow-500) 18%, var(--background)) 0,
         color-mix(in srgb, var(--color-yellow-500) 18%, var(--background)) 8px,
         color-mix(in srgb, var(--color-yellow-500) 11%, var(--background)) 8px,
         color-mix(in srgb, var(--color-yellow-500) 11%, var(--background)) 16px);
     color: var(--foreground); font-size: var(--text-sm);
 }
 .cxp-admin-bar__message { display: flex; align-items: center; gap: .55rem; min-width: 0; line-height: 1.35; }
 .cxp-admin-bar__message > i { flex: 0 0 auto; color: var(--color-yellow-500); font-size: 1.05rem; }
 .cxp-admin-bar__message span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .cxp-admin-bar__message strong {
   /* var(--cxp-warn-strong) still measured 4.29-4.46:1 against this banner's
      striped tint (varies by stripe phase) - short of the 4.5 floor at the
      lightest phase. Hardcoded darker than any --cxp-warn-* definition in
      this codebase to clear the floor at every phase, not just the average. */
   color: #7A3900;
   font-weight: var(--font-weight-semibold);
 }
 body.fi-panel-portal .cxp-admin-bar .kt-btn-ghost {
   /* the ghost button's normal --portal-muted (rgb(102,112,133), set by
      "body.fi-panel-portal .kt-btn-ghost" elsewhere) measured 4.31:1 against
      this banner's pale striped tint - fine everywhere else this class is
      used, not fine on this specific background. Needed the body.fi-panel-
      portal prefix here too: that other rule is also !important and its
      selector (0,2,1) otherwise beats a bare ".cxp-admin-bar .kt-btn-ghost"
      (0,2,0) on the c-tier despite looking "more specific" by eye. */
   color: #55606f !important;
 }
 .cxp-admin-bar__actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex: 0 0 auto; }
 .cxp-admin-bar__switcher { position: relative; }
 .cxp-admin-bar__switcher .kt-btn { border-color: color-mix(in srgb, var(--color-yellow-500) 48%, var(--border)); }
 .cxp-admin-bar__menu {
     position: absolute; top: calc(100% + .45rem); right: 0;
     width: min(22rem, calc(100vw - 2rem)); max-height: min(70vh, 24rem);
     overflow-y: auto; padding: .35rem; border: 1px solid var(--border);
     border-radius: var(--radius); background: var(--card);
     box-shadow: 0 16px 32px color-mix(in srgb, var(--background) 65%, transparent);
 }
 .cxp-admin-bar__option {
     display: flex; flex-direction: column; width: 100%; gap: .15rem;
     padding: .55rem .65rem; border: 0; border-radius: calc(var(--radius) - 2px);
     background: transparent; color: var(--foreground); cursor: pointer;
     font: inherit; text-align: left;
 }
 .cxp-admin-bar__option:hover, .cxp-admin-bar__option:focus-visible,
 .cxp-admin-bar__option.is-active { background: var(--accent); }
 .cxp-admin-bar__option small, .cxp-admin-bar__empty { color: var(--muted-foreground); font-size: var(--text-xs); }
 .cxp-admin-bar__empty { display: block; padding: .65rem; }
 @media (max-width: 640px) {
     .cxp-admin-bar { align-items: stretch; flex-direction: column; gap: .55rem; padding: .65rem 1rem; }
     .cxp-admin-bar__message span { white-space: normal; }
     .cxp-admin-bar__actions { justify-content: stretch; }
     .cxp-admin-bar__actions > form, .cxp-admin-bar__switcher { flex: 1 1 0; }
     .cxp-admin-bar__actions .kt-btn { width: 100%; justify-content: center; }
     .cxp-admin-bar__menu { right: 0; left: 0; width: auto; }
 }

/* ---- Modals ---- */
.sb-modal-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 0.60); backdrop-filter: blur(2px); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 4rem 1rem; overflow-y: auto; }
.sb-modal { background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: 0 24px 60px rgb(0 0 0 / 0.55); width: 100%; max-width: 30rem; }
.sb-modal-sm { max-width: 24rem; }
.sb-modal-lg { max-width: 42rem; }
.sb-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.sb-modal-title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--foreground); }
.sb-modal-close { background: none; border: 0; color: var(--muted-foreground); cursor: pointer; font-size: 1rem; padding: 0.25rem; border-radius: var(--radius-md); }
.sb-modal-close:hover { color: var(--foreground); background: var(--accent); }
.sb-modal-body { padding: 1.25rem; }
.sb-modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border); }

/* ---- Charts ---- */
.sb-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0.875rem; }

/* ---- Usage rules ---- */
.sb-rules { display: flex; flex-direction: column; gap: 0.625rem; font-size: var(--text-sm); color: var(--muted-foreground); padding-left: 1.25rem; line-height: 1.6; }
.sb-rules li::marker { color: var(--primary); font-weight: var(--font-weight-semibold); }
.sb-rules strong { color: var(--foreground); }

/* =====================================================================
 * Section 2: Demo6-style sidebar (re-theme update 2026-06-12)
 * Brand row left-aligned · search box (ctrl+/) · sentence-case menu rows
 * with right chevrons · child items with icon chips, no connectors ·
 * avatar footer. Loads last, so these override bridge + cyticx-theme.
 * ===================================================================== */

/* ---- Brand row: left-aligned like demo6 ---- */
.fi-sidebar-header {
  justify-content: flex-start !important;
  padding: 0.9rem 1rem !important;
  border-bottom: 0 !important;
}
.fi-sidebar-header .fi-logo { justify-content: flex-start !important; }
.fi-sidebar-header img { height: 1.6rem !important; }

/* ---- Sidebar surface: light mode gets the demo6 soft-gray panel ---- */
.fi-sidebar { background: var(--background) !important; border-right: 1px solid var(--border) !important; }
html:not(.dark) .fi-sidebar { background: oklch(98.5% 0 0) !important; }

/* ---- Search box ---- */
.cx-nav-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 0 0.6rem;
}
.cx-nav-search > i {
  position: absolute; left: 0.7rem;
  color: var(--muted-foreground); font-size: 0.95rem; pointer-events: none;
}
.cx-nav-search input {
  width: 100%; height: 2.25rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--foreground);
  font-size: var(--text-2sm); font-family: inherit;
  padding: 0 3.4rem 0 2.1rem;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.cx-nav-search input::placeholder { color: var(--muted-foreground); }
.cx-nav-search input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 25%, transparent); }
.cx-nav-kbd {
  position: absolute; right: 0.6rem;
  font-size: var(--text-2xs); color: var(--muted-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.05rem 0.4rem; background: var(--background);
  pointer-events: none;
}
/* searching: force-show collapsed group items (overrides Alpine inline display) */
.cx-searching .fi-sidebar-group-items[style] { display: flex !important; height: auto !important; overflow: visible !important; }

/* ---- Group header rows = demo6 menu items (sentence case + chevron) ---- */
.fi-sidebar-group-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-normal) !important;
  color: var(--foreground) !important;
  opacity: 0.85;
}
.fi-sidebar-group-button { padding: 0.45rem 0.6rem !important; border-radius: var(--radius-md); }
.fi-sidebar-group-button:hover { background: var(--accent) !important; }
.fi-sidebar-group-icon { color: var(--muted-foreground) !important; }

/* Home (label-less top item) matches the same row look */
.fi-sidebar-group:not(:has(.fi-sidebar-group-button)) .fi-sidebar-item-label {
  font-weight: var(--font-weight-normal) !important;
  opacity: 0.85;
}

/* group separators: none (demo6 uses spacing only) */
.fi-sidebar-group + .fi-sidebar-group { border-top: 0 !important; padding-top: 0 !important; margin-top: 0.15rem !important; }

/* ---- Child items: icon chips, no connector dots/lines ---- */
.fi-sidebar-item-grouped-border { display: none !important; }
.fi-sidebar-group-items { margin-left: 0.35rem !important; }
.fi-sidebar-group-items .fi-sidebar-item-button { padding: 0.32rem 0.45rem !important; gap: 0.6rem !important; }
.fi-sidebar-group-items .fi-sidebar-item-icon {
  width: 1rem !important; height: 1rem !important;
  box-sizing: content-box !important;
  padding: 0;            /* no chip box around sub-item icons */
  border-radius: 0;
  background: transparent;
  border: 0;
  color: var(--muted-foreground) !important;
  font-size: 0.92rem;
}
.fi-sidebar-group-items .fi-sidebar-item-label {
  font-size: var(--text-sm) !important;
  color: var(--foreground) !important;
  opacity: 0.85;
  font-weight: var(--font-weight-normal) !important;
}
.fi-sidebar-item-active .fi-sidebar-item-icon { color: var(--primary) !important; border-color: color-mix(in oklab, var(--primary) 35%, var(--border)) !important; }
.fi-sidebar-item-active .fi-sidebar-item-label { opacity: 1; font-weight: var(--font-weight-medium) !important; }
.dark .fi-sidebar-item-active .fi-sidebar-item-button { background: var(--accent) !important; }
html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-button { background: var(--color-white) !important; box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); border: 1px solid var(--border); }

/* ---- Footer: avatar + icon buttons ---- */
.cx-sidebar-footer {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--border);
}
.cx-sf-avatar {
  width: 2rem; height: 2rem; border-radius: 9999px;
  background: var(--primary); color: var(--primary-foreground);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-2sm); font-weight: var(--font-weight-semibold);
  flex: 0 0 auto;
}
.cx-sf-name {
  font-size: var(--text-2sm); color: var(--foreground); opacity: 0.85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 7.5rem;
}
.cx-sf-btn {
  background: none; border: 0; cursor: pointer;
  width: 1.9rem; height: 1.9rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  color: var(--muted-foreground); font-size: 0.95rem;
}
.cx-sf-btn:hover { background: var(--accent); color: var(--foreground); }
/* 2026-08-05: ui-qa tap-targets-44px sweep - the sidebar-footer "Switch light
   / dark mode" / "Log out" buttons were the last two mobile failures on the
   dashboard page (30x30, ours, not vendor). Mobile-only bump to match every
   other control brought to the calibrated bar; desktop's 1.9rem (30.4px) is
   unchanged. */
@media (max-width: 1023px) {
  .cx-sf-btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ---- Main-menu colored icons (group headers + Home only; child icons stay muted) ----
   UPDATE (2026-07-15): these selectors matched an OLDER nav structure (group
   labels "Negatives"/"Conversions"/"SEO Autopilot"/"System" that no longer
   exist - see AdminPanelProvider::navigationGroups()) so most groups silently
   fell back to no color at all. Re-mapped to the CURRENT group list, one
   distinct hue per group, so every top-level menu reads as its own section
   at a glance (user request). */
.fi-sidebar-group[data-group-label="Lead Tracking"]     .fi-sidebar-group-icon { color: var(--color-blue-500) !important; }
.fi-sidebar-group[data-group-label="Google Ads"]        .fi-sidebar-group-icon { color: var(--color-red-500) !important; }
.fi-sidebar-group[data-group-label="GBP Rank"]          .fi-sidebar-group-icon { color: var(--color-orange-400) !important; }
.fi-sidebar-group[data-group-label="Autopilot SEO"]     .fi-sidebar-group-icon { color: var(--color-teal-500) !important; }
.fi-sidebar-group[data-group-label="Listing Management"] .fi-sidebar-group-icon { color: var(--color-indigo-500, #6366f1) !important; }
.fi-sidebar-group[data-group-label="FB Poster"]         .fi-sidebar-group-icon { color: var(--color-pink-500, #ec4899) !important; }
.fi-sidebar-group[data-group-label="Ad Spy"]            .fi-sidebar-group-icon { color: var(--color-violet-500) !important; }
.fi-sidebar-group[data-group-label="Reports"]           .fi-sidebar-group-icon { color: var(--color-yellow-500) !important; }
.fi-sidebar-group[data-group-label="AEO"]               .fi-sidebar-group-icon { color: var(--color-fuchsia-500, #d946ef) !important; }
.fi-sidebar-group[data-group-label="SEO Site Audits"]   .fi-sidebar-group-icon { color: var(--color-cyan-500, #06b6d4) !important; }
.fi-sidebar-group[data-group-label="Playbook"]          .fi-sidebar-group-icon { color: var(--color-green-500) !important; }
.fi-sidebar-group[data-group-label="Settings"]          .fi-sidebar-group-icon { color: var(--muted-foreground) !important; }
/* Home (label-less top-level item) */
.fi-sidebar-group:not(:has(.fi-sidebar-group-button)) .fi-sidebar-item-icon { color: var(--primary) !important; }

/* ---- Demo6 brand row: logo badge + name ---- */
.cx-brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.cx-brand-badge {
  position: relative;
  width: 2.1rem; height: 2.1rem;
  border-radius: calc(var(--radius) + 2px);
  background: var(--foreground); color: var(--background);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em;
  flex: 0 0 auto;
}
.cx-brand-dot {
  position: absolute; top: 4px; right: 4px;
  width: 5px; height: 5px; border-radius: 1.5px;
  background: #e63030;
}
.cx-brand-name { font-size: 0.98rem; font-weight: var(--font-weight-semibold); color: var(--foreground); letter-spacing: -0.01em; white-space: nowrap; }
.cx-brand-name > span { color: var(--muted-foreground); font-weight: var(--font-weight-medium); }
/* Real Cyticx wordmark logo + "Ads" suffix */
.cx-brand-logo-img { height: 1.45rem; width: auto; display: block; flex: 0 0 auto; }
.cx-brand-suffix { font-size: 0.9rem; color: var(--muted-foreground); font-weight: var(--font-weight-medium); margin-left: -0.25rem; }

/* demo6: primary rows have plain line icons - no chip on the Home item */
.fi-sidebar-group:not(:has(.fi-sidebar-group-button)) .fi-sidebar-item-icon {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: 1.15rem !important; height: 1.15rem !important;
  box-sizing: content-box !important;
}
/* row rhythm closer to demo6 (taller, calmer) */
.fi-sidebar-group-button { padding: 0.52rem 0.6rem !important; }
.fi-sidebar-group:not(:has(.fi-sidebar-group-button)) .fi-sidebar-item-button { padding: 0.52rem 0.6rem !important; }
.fi-sidebar-nav { gap: 0 !important; }

/* ---- Demo6 submenu (per reference image): NO icons in sub items - text-only,
   indented under the parent label, active = soft pill ---- */
.fi-sidebar-group-items .fi-sidebar-item-icon { display: none !important; }
.fi-sidebar-group-items { margin-left: 0 !important; }
.fi-sidebar-group-items .fi-sidebar-item-button {
  padding: 0.42rem 0.6rem 0.42rem 2.15rem !important;
  gap: 0.5rem !important;
}
/* nested LT sub-group headers (Numbers / Security / Tools) and their children:
   text-only too, deeper indent (demo6 "Account Home" pattern) */
.cx-lt-subgroup-header .fi-sidebar-item-icon,
.cx-lt-subgroup-item .fi-sidebar-item-icon { display: none !important; }
.cx-lt-subgroup-header a.fi-sidebar-item-button { padding-left: 2.15rem !important; }
.cx-lt-subgroup-item a.fi-sidebar-item-button {
  padding-left: 3rem !important;
  font-size: var(--text-2sm) !important;
  min-height: 0 !important;
}
.cx-lt-subgroup-item.fi-active a.fi-sidebar-item-button,
.cx-lt-subgroup-item.fi-sidebar-item-active a.fi-sidebar-item-button {
  padding-left: 3rem !important;
  font-size: var(--text-2sm) !important;
  color: var(--foreground) !important;
  background: var(--accent) !important;
  border-radius: var(--radius-md) !important;
}
/* sub item text size per demo6 (~14px, quiet) */
.fi-sidebar-group-items .fi-sidebar-item-label { font-size: var(--text-sm) !important; }

/* ---- FINAL WORD: submenu indent via MARGIN so the hover/active pill is
   inset from the left edge (per demo6 - pill starts at the text indent) ---- */
html body .fi-sidebar .fi-sidebar-group-items .fi-sidebar-item-button {
  padding: 0.42rem 0.6rem !important;
  margin-left: 1.5rem !important;
}
html body .fi-sidebar .fi-sidebar-group-items .cx-lt-subgroup-header a.fi-sidebar-item-button,
html body .fi-sidebar .cx-lt-subgroup-header a.fi-sidebar-item-button {
  padding: 0.42rem 0.6rem !important;
  margin-left: 1.5rem !important;
}
html body .fi-sidebar .fi-sidebar-group-items .cx-lt-subgroup-item a.fi-sidebar-item-button,
html body .fi-sidebar .cx-lt-subgroup-item a.fi-sidebar-item-button {
  padding: 0.38rem 0.6rem !important;
  margin-left: 2.35rem !important;
}
/* Home (item of the label-less group) is a TOP-LEVEL row: icon visible, no indent.
   It sits in a .fi-sidebar-group-items ul, so it was inheriting margin-left:1.5rem
   (sub-item indent) - reset it so Home aligns with the group-header rows. */
html body .fi-sidebar .fi-sidebar-group:not(:has(.fi-sidebar-group-button)) .fi-sidebar-item-button {
  padding: 0.52rem 0.6rem !important;
  margin-left: 0 !important;
  gap: 0.75rem !important;   /* match the group-header icon→label gap so Dashboard label lines up */
}
html body .fi-sidebar .fi-sidebar-group:not(:has(.fi-sidebar-group-button)) .fi-sidebar-item-icon {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  /* Match the group-header icon size (1.15rem) so the "Dashboard" label lines
     up with the group labels. The child-item rule (…group-items…, spec 0,3,2)
     was bleeding a 1rem width onto this top item; this selector (0,4,2) wins. */
  width: 1.15rem !important; height: 1.15rem !important;
  min-width: 1.15rem !important;
  font-size: 1.05rem !important;
  flex: 0 0 auto !important;
}
/* Group labels carry 0.4rem left padding; the top "Dashboard" item label had
   none, so its text sat ~6.4px left of the group labels. Match it. */
html body .fi-sidebar .fi-sidebar-group:not(:has(.fi-sidebar-group-button)) .fi-sidebar-item-label {
  padding-left: 0.4rem !important;
}

/* ---- Sidebar gutter: inset the nav so hover/active pills don't touch the
   sidebar edges (demo6 has ~12px side padding) ---- */
html body .fi-sidebar .fi-sidebar-nav,
html body .fi-sidebar nav.fi-sidebar-nav {
  padding: 0.4rem 0.8rem 0.5rem !important;
}
html body .fi-sidebar .fi-sidebar-nav-groups { padding: 0 !important; }
/* keep header/footer aligned with the new gutter */
.fi-sidebar-header { padding: 0.95rem 1.05rem !important; }
.cx-sidebar-footer { padding: 0.7rem 1.05rem; }

/* ============================================================
   Sidebar menu - pixel clone of Demo6 reference image (2026-06-15)
   Solid-blue active pill · colored icon badges · sub-item icons.
   Appended after the sidebar block above so it wins the cascade.
   ============================================================ */

/* (0) Rows sit pixel-flush (0px gap) by default, so two adjacent solid-blue
   pills (e.g. the active row and a hovered row right next to it) visually
   fuse into one blob with no seam. Give every row a hairline gap. */
html body .fi-sidebar .fi-sidebar-item { margin-block: 0.1rem !important; }
html body .fi-sidebar .fi-sidebar-item:first-child { margin-top: 0 !important; }

/* (1) Active row = solid blue pill, white icon + label
   (Home, group children like Dashboard/Leads, and deeper sub-items) */
html body .fi-sidebar .fi-sidebar-item-active > .fi-sidebar-item-button,
html body .fi-sidebar .fi-sidebar-item-active a.fi-sidebar-item-button {
  background: var(--primary) !important;
  border-radius: 0.6rem !important;
  box-shadow: 0 2px 8px -3px rgba(37, 99, 235, 0.40) !important;
}
html body .fi-sidebar .fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-icon,
html body .fi-sidebar .fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-label,
html body .fi-sidebar .fi-sidebar-item-active a.fi-sidebar-item-button .fi-sidebar-item-icon,
html body .fi-sidebar .fi-sidebar-item-active a.fi-sidebar-item-button .fi-sidebar-item-label {
  color: #fff !important;
}

/* (1b) Hover = the SAME solid blue pill as active, not a separate lighter
   highlight - every non-active row should preview exactly what "selected"
   looks like. Excludes items that are already active (no-op there) and the
   group-header toggle itself (that has its own chevron/expand treatment). */
html body .fi-sidebar .fi-sidebar-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button:hover,
html body .fi-sidebar .fi-sidebar-item:not(.fi-sidebar-item-active) a.fi-sidebar-item-button:hover {
  background: var(--primary) !important;
  border-radius: 0.6rem !important;
  box-shadow: 0 2px 8px -3px rgba(37, 99, 235, 0.40) !important;
}
html body .fi-sidebar .fi-sidebar-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button:hover .fi-sidebar-item-icon,
html body .fi-sidebar .fi-sidebar-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button:hover .fi-sidebar-item-label,
html body .fi-sidebar .fi-sidebar-item:not(.fi-sidebar-item-active) a.fi-sidebar-item-button:hover .fi-sidebar-item-icon,
html body .fi-sidebar .fi-sidebar-item:not(.fi-sidebar-item-active) a.fi-sidebar-item-button:hover .fi-sidebar-item-label {
  color: #fff !important;
}

/* (2) Group-header icons → plain colored glyphs, NO box/badge behind them.
   (Colors come from the per-group rules above; keep them boxless + uniform size.) */
html body .fi-sidebar .fi-sidebar-group-button .fi-sidebar-group-icon {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  width: 1.15rem !important; height: 1.15rem !important;
}

/* (3) Show small icons on Lead Tracking sub-items (mockup shows them) */
html body .fi-sidebar .fi-sidebar-group-items .fi-sidebar-item-icon {
  display: inline-flex !important;
  width: 1rem !important; height: 1rem !important;
  padding: 0 !important; background: transparent !important;
  color: var(--muted-foreground) !important;
}
html body .fi-sidebar .fi-sidebar-group-items .fi-sidebar-item-button { gap: 0.6rem !important; }
/* hide the dotted connector - mockup uses plain icon rows */
html body .fi-sidebar .fi-sidebar-group-items .fi-sidebar-item-grouped-border { display: none !important; }

/* (4) Settings sub-cluster: show the header cog + each child's own icon
   (workbench.js builds the header icon; children carry real heroicons) -
   every item in the menu now has an icon. */
html body .fi-sidebar .cx-lt-subgroup-header .fi-sidebar-item-icon,
html body .fi-sidebar .cx-lt-subgroup-item .fi-sidebar-item-icon {
  display: inline-flex !important;
  width: 1rem !important; height: 1rem !important;
  opacity: 1 !important;
  color: var(--muted-foreground) !important;
}
/* align icon + label and tighten the old text-only indent */
html body .fi-sidebar .cx-lt-subgroup-item a.fi-sidebar-item-button {
  padding-left: 2.4rem !important;
  gap: 0.6rem !important;
}

/* (5) Sub-cluster header ("Settings" + any future ones): the 100%-width
   button was inheriting margin-left:1.5rem and overflowing the sidebar, so
   the collapse chevron got pushed off the right edge. Indent via padding
   (not margin) and reserve right room so the arrow shows like other menus. */
html body .fi-sidebar .cx-lt-subgroup-header .cx-lt-subgroup-btn {
  margin-left: 0 !important;
  padding: 0.5rem 0.6rem 0.5rem 2.1rem !important;  /* align Settings header icon with its siblings (Dashboard/Leads) */
  box-sizing: border-box !important;
  gap: 0.6rem !important;
}
html body .fi-sidebar .cx-lt-subgroup-header .cx-ltsg-chevron { opacity: 0.9 !important; }

/* ---- Table fit (2026-06-12): tables must fit the viewport at desktop ---- */
/* LT tables: tighter cell padding + tighter edge padding so the actions
   column isn't pushed past the card edge */
html body .lt-embed .lt-data-table thead th,
html body .lt-embed .table thead th { padding: 0.55rem 0.5rem !important; }
html body .lt-embed .lt-data-table tbody tr td,
html body .lt-embed .table tbody tr td { padding: 0.55rem 0.5rem !important; }
html body .lt-embed .lt-data-table thead th:first-child,
html body .lt-embed .table thead th:first-child,
html body .lt-embed .lt-data-table tbody tr td:first-child,
html body .lt-embed .table tbody tr td:first-child { padding-left: 0.9rem !important; }
html body .lt-embed .lt-data-table thead th:last-child,
html body .lt-embed .table thead th:last-child,
html body .lt-embed .lt-data-table tbody tr td:last-child,
html body .lt-embed .table tbody tr td:last-child { padding-right: 0.9rem !important; }
/* long text cells give way before action icons do */
.lt-embed .lt-leads-table .lt-email { max-width: 170px !important; }
.lt-embed .lt-leads-table .lt-row-name { max-width: 150px !important; }
.lt-embed .lt-leads-table td.lt-cell-client { max-width: 170px !important; }
.lt-embed .lt-leads-table td.lt-cell-service { max-width: 160px !important; }

/* Filament tables: let long text wrap instead of forcing a 1700px-wide table */
.fi-ta-table .fi-ta-text,
.fi-ta-table .fi-ta-text-item-label {
  white-space: normal !important;
  overflow-wrap: anywhere;
}
.fi-ta-cell { max-width: 32rem; }

/* Filament tables: tighter horizontal cell padding so wide tables (many
   columns) fit the content area instead of overflowing */
.fi-ta-table th, .fi-ta-table td { padding-left: 0.55rem !important; padding-right: 0.55rem !important; }
.fi-ta-table th:first-child, .fi-ta-table td:first-child { padding-left: 0.9rem !important; }
.fi-ta-table th:last-child, .fi-ta-table td:last-child { padding-right: 0.9rem !important; }
.fi-ta-actions { gap: 0.4rem !important; }

/* Header labels may wrap so many-column tables can compress to fit */
.fi-ta-header-cell-label, .fi-ta-header-cell button span { white-space: normal !important; }

/* ---- Negatives workbench: priority + risk badges ---- */
/* boxless priority indicator - just a small colored P1/P2/P3 label */
.chip-prio { font-size: 9px; font-weight: 700; padding: 0; border: 0; background: transparent; letter-spacing: 0.03em; flex: 0 0 auto; }
.chip-prio.prio-1 { color: var(--destructive); }
.chip-prio.prio-2 { color: var(--color-yellow-500); }
.chip-prio.prio-3 { color: var(--muted-foreground); }
.chip-risk { font-size: 10px; color: var(--color-yellow-500); flex: 0 0 auto; }
.chip:has(.chip-risk) { border-color: color-mix(in oklab, var(--color-yellow-500) 45%, var(--border)) !important; }

/* ============================================================
   Playbook section (strategist brains + YouTube experts)
   Pages: playbook/{garage,locksmith,meta,youtube,youtube-expert}
   ============================================================ */
.pb-muted { color: var(--muted-foreground); font-size: var(--text-sm); }
.pb-link { color: var(--primary); font-size: var(--text-xs); text-decoration: none; display: inline-block; margin-top: 0.3rem; }
.pb-link:hover { text-decoration: underline; }
.pb-details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.25rem; padding: 0.35rem 0; }
.pb-details > summary::before { content: '\2039'; display: inline-block; transform: rotate(-90deg); transition: transform .15s; color: var(--muted-foreground); margin-right: 0.35rem; }
.pb-details[open] > summary::before { transform: rotate(90deg); }
.pb-campaign { border-left: 2px solid var(--border); padding-left: 0.875rem; display: flex; flex-direction: column; gap: 0.6rem; }
.pb-adgroup { background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.75rem; }
.pb-kw { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--text-xs); background: var(--accent); border: 1px solid var(--border); border-radius: 999px; padding: 0.1rem 0.55rem; color: var(--foreground); }
.pb-kw em { font-style: normal; font-size: 9px; font-weight: 700; opacity: 0.75; }
.pb-kw-exact  { border-color: color-mix(in oklab, var(--color-green-500) 55%, var(--border)); }
.pb-kw-exact em { color: var(--color-green-500); }
.pb-kw-phrase { border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); }
.pb-kw-phrase em { color: var(--primary); }
.pb-kw-broad  { border-color: color-mix(in oklab, var(--color-yellow-500) 55%, var(--border)); }
.pb-kw-broad em { color: var(--color-yellow-500); }
.pb-rsa { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.75rem; padding: 0.5rem 0 0 1rem; }
.pb-rsa-h { font-size: var(--text-sm); color: var(--foreground); padding: 0.1rem 0; }
.pb-rsa-d { font-size: var(--text-xs); color: var(--muted-foreground); padding: 0.15rem 0; }
.pb-dki { color: var(--color-violet-500); font-weight: 600; }
.pb-comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
.pb-comp { padding: 0.75rem 0.875rem; }
.pb-comp-pin { border-color: color-mix(in oklab, var(--color-yellow-500) 45%, var(--border)); }
.pb-item { padding: 0.4rem 0.25rem; border-bottom: 1px solid var(--border); }
.pb-item:last-child { border-bottom: none; }
.pb-item-main { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pb-item-text { font-size: var(--text-sm); color: var(--foreground); }
.pb-conf { font-size: var(--text-2xs); font-weight: 700; }
.pb-conf-hi  { color: var(--color-green-500); }
.pb-conf-mid { color: var(--color-yellow-500); }
.pb-conf-lo  { color: var(--muted-foreground); }
.pb-evidence { font-size: var(--text-xs); color: var(--muted-foreground); margin-top: 0.15rem; padding-left: 0.1rem; }

/* Playbook - rendered markdown (YouTube expert playbooks) */
.pb-md { font-size: var(--text-sm); color: var(--foreground); line-height: 1.65; }
.pb-md h1 { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); margin: 0 0 0.75rem; }
.pb-md h2 { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); margin: 1.5rem 0 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); }
.pb-md h3 { font-size: var(--text-base); font-weight: var(--font-weight-medium); margin: 1rem 0 0.4rem; }
.pb-md p { margin: 0.4rem 0; }
.pb-md ul, .pb-md ol { margin: 0.4rem 0 0.75rem; padding-left: 1.4rem; }
.pb-md li { margin: 0.25rem 0; }
.pb-md blockquote { border-left: 3px solid var(--primary); padding: 0.3rem 0.9rem; margin: 0.75rem 0; color: var(--muted-foreground); background: var(--muted); border-radius: 0 var(--radius) var(--radius) 0; }
.pb-md code { background: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0.1rem 0.35rem; font-size: 0.85em; }
.pb-md pre { background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; overflow-x: auto; margin: 0.75rem 0; }
.pb-md pre code { background: none; border: none; padding: 0; }
.pb-md a { color: var(--primary); }
.pb-md hr { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; }

/* Playbook - history timeline */
.pb-history { max-height: 26rem; overflow-y: auto; display: flex; flex-direction: column; }
.pb-history-row { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.45rem 0.25rem; border-bottom: 1px solid var(--border); }
.pb-history-row:last-child { border-bottom: none; }
.pb-history-ts { font-size: var(--text-2xs); color: var(--muted-foreground); white-space: nowrap; min-width: 8.5rem; }
.pb-history-body { display: flex; flex-direction: column; gap: 0.1rem; font-size: var(--text-sm); color: var(--foreground); min-width: 0; }
/* CYT-645 finding #2 (confirmed live 2026-08-18): the role badge (CURATOR
   etc.) had no flex-shrink protection in this row, so a long history entry's
   body text forced the flex algorithm to compress the badge below its own
   content width - the badge's own box clipped to ~27px while "CURATOR" (7
   chars) needs more, so the text overflowed its box and ran straight into
   the body text with zero visible gap: "CURATORStood up...". Scoped to this
   row only, not the shared .kt-badge component used everywhere else. */
.pb-history-row .kt-badge { flex-shrink: 0; white-space: nowrap; }
/* ── GBP Site Scan (gss-*) ─────────────────────────────────────────── */
.gss-running { display: flex; align-items: center; gap: 0.9rem; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.2rem; }
.gss-running-title { font-weight: 700; color: var(--foreground); }
.gss-running-step { font-size: var(--text-sm); color: var(--muted-foreground); margin-top: 2px; }
.gss-spinner { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--primary); animation: gss-spin 0.8s linear infinite; }
@keyframes gss-spin { to { transform: rotate(360deg); } }
.gss-failed { background: color-mix(in oklab, var(--cx-danger, #f43f5e) 12%, var(--card)); border: 1px solid color-mix(in oklab, var(--cx-danger, #f43f5e) 40%, var(--border)); border-radius: 12px; padding: 0.9rem 1.2rem; color: var(--foreground); font-size: var(--text-sm); }
.gss-empty { background: var(--card); border: 1px dashed var(--border); border-radius: 14px; padding: 2.2rem; text-align: center; color: var(--muted-foreground); }
.gss-empty-title { font-size: 1.05rem; font-weight: 700; color: var(--foreground); margin-bottom: 0.5rem; }
.gss-empty p { max-width: 46rem; margin: 0.3rem auto; font-size: var(--text-sm); }

/* grade palette */
.grade-a { --gss-tone: #22c55e; } .grade-b { --gss-tone: #84cc16; } .grade-c { --gss-tone: #eab308; }
.grade-d { --gss-tone: #f97316; } .grade-f { --gss-tone: #ef4444; } .grade-na { --gss-tone: var(--muted-foreground); }

/* hero */
.gss-hero { display: flex; align-items: center; gap: 1.6rem; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.3rem 1.5rem; flex-wrap: wrap; }
.gss-ring-wrap { position: relative; width: 128px; height: 128px; flex: 0 0 auto; }
.gss-ring { width: 100%; height: 100%; }
.gss-ring-bg { fill: none; stroke: var(--border); stroke-width: 10; }
.gss-ring-val { fill: none; stroke: var(--gss-tone); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.gss-ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gss-ring-score { font-size: 2rem; font-weight: 800; color: var(--gss-tone); line-height: 1; }
.gss-ring-grade { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; color: var(--muted-foreground); margin-top: 3px; }
.gss-identity { flex: 1 1 260px; min-width: 0; }
.gss-biz-name { font-size: 1.25rem; font-weight: 800; color: var(--foreground); }
.gss-biz-cat { font-size: var(--text-sm); color: var(--muted-foreground); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gss-cat-chip { font-size: 11px; border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; color: var(--muted-foreground); }
.gss-biz-meta { display: flex; gap: 1rem; flex-wrap: wrap; font-size: var(--text-sm); color: var(--foreground); margin-top: 8px; }
.gss-biz-meta a { color: var(--primary); text-decoration: none; }
.gss-stars { color: #fbbf24; font-weight: 700; }
.gss-scan-note { font-size: 12px; color: var(--muted-foreground); margin-top: 8px; }
.gss-scan-note a { color: var(--primary); text-decoration: none; }
.gss-delta { font-weight: 700; margin-left: 6px; }
.gss-delta.up { color: #22c55e; } .gss-delta.down { color: #ef4444; } .gss-delta.flat { color: var(--muted-foreground); }
.gss-quick { display: grid; grid-template-columns: repeat(2, minmax(96px, 1fr)); gap: 8px; flex: 0 0 auto; }
.gss-quick-tile { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; text-align: center; min-width: 96px; }
.gss-quick-tile.good { border-color: color-mix(in oklab, #22c55e 45%, var(--border)); }
.gss-quick-tile.mid  { border-color: color-mix(in oklab, #eab308 45%, var(--border)); }
.gss-quick-tile.bad  { border-color: color-mix(in oklab, #ef4444 45%, var(--border)); }
.gss-quick-val { font-size: 1.15rem; font-weight: 800; color: var(--foreground); }
.gss-quick-tile.good .gss-quick-val { color: #22c55e; } .gss-quick-tile.mid .gss-quick-val { color: #eab308; } .gss-quick-tile.bad .gss-quick-val { color: #ef4444; }
.gss-quick-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); margin-top: 2px; }

/* section strip */
.gss-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gss-strip-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; text-decoration: none; transition: border-color 0.12s; display: flex; flex-direction: column; }
.gss-strip-card:hover { border-color: var(--gss-tone); }
.gss-strip-score { font-size: 1.3rem; font-weight: 800; color: var(--gss-tone); line-height: 1.1; }
.gss-strip-title { font-size: 11.5px; font-weight: 600; color: var(--muted-foreground); margin: 3px 0 7px; line-height: 1.25; }
.gss-strip-bar { height: 4px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: auto; }
.gss-strip-bar span { display: block; height: 100%; background: var(--gss-tone); border-radius: 999px; }

/* cards + NAP table */
.gss-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.3rem; }
.gss-card-head { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 0.8rem; }
.gss-nap { display: flex; flex-direction: column; }
.gss-nap-row { display: grid; grid-template-columns: 90px 1fr 1fr 60px; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--border); font-size: var(--text-sm); color: var(--foreground); align-items: start; }
.gss-nap-row:last-child { border-bottom: none; }
.gss-nap-row.head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); font-weight: 700; align-items: center; }
.gss-nap-row > div:first-child { font-weight: 700; color: var(--muted-foreground); }
/* The real matched-text snippet under "Found on the homepage/contact page"
   (2026-07-14) - small + muted + italic so it reads as supporting evidence,
   not a second headline. */
.gss-nap-snippet { font-size: 11.5px; color: var(--muted-foreground); font-style: italic; margin-top: 3px; line-height: 1.35; }

/* status icons */
.gss-i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; font-size: 12px; font-weight: 800; flex: 0 0 auto; }
.gss-i.pass { background: rgba(34, 197, 94, 0.14); color: #22c55e; }
.gss-i.warn { background: rgba(234, 179, 8, 0.14); color: #eab308; }
.gss-i.fail { background: rgba(239, 68, 68, 0.14); color: #ef4444; }
.gss-i.manual { background: rgba(99, 102, 241, 0.14); color: #818cf8; }
.gss-i.na { background: var(--border); color: var(--muted-foreground); }

/* sections */
/* CYT-641 finding #13: align-items:start let each checklist card (GBP
   Optimization/Heat Map/Citations etc) hug its own content height, so a
   13-item card next to two 6-item cards left ~170px of ragged empty space
   under the shorter ones before the next row began. stretch gives every
   card in a row the same height (the row's tallest card), so the row's
   bottom edge is one clean line instead of three different ones. */
.gss-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; align-items: stretch; }
@media (max-width: 560px) { .gss-sections { grid-template-columns: 1fr; } }
.gss-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 0.7rem; }
.gss-sec-title { font-size: 1rem; font-weight: 800; color: var(--foreground); }
.gss-sec-sub { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
.gss-sec-score { font-size: 1.15rem; font-weight: 800; color: var(--gss-tone); border: 2px solid var(--gss-tone); border-radius: 10px; min-width: 52px; text-align: center; padding: 4px 8px; }
.gss-items { display: flex; flex-direction: column; }
.gss-item { border-bottom: 1px solid color-mix(in oklab, var(--border) 55%, transparent); }
.gss-item:last-child { border-bottom: none; }
.gss-item > summary { display: flex; align-items: center; gap: 10px; padding: 8px 2px; cursor: pointer; list-style: none; border-radius: 8px; }
.gss-item > summary::-webkit-details-marker { display: none; }
.gss-item > summary:hover { background: color-mix(in oklab, var(--border) 30%, transparent); }
.gss-item-label { font-size: var(--text-sm); color: var(--foreground); line-height: 1.35; min-width: 0; }
.gss-item.st-na .gss-item-label, .gss-item.st-manual .gss-item-label { color: var(--muted-foreground); }
.gss-item-chev { width: 14px; height: 14px; margin-left: auto; flex: 0 0 auto; color: var(--muted-foreground); transition: transform 0.15s; }
.gss-item[open] .gss-item-chev { transform: rotate(180deg); }
.gss-item-open { padding: 2px 2px 10px 32px; }
.gss-item-desc { font-size: 12.5px; color: var(--muted-foreground); line-height: 1.55; }
.gss-item-ev { font-size: 12px; color: var(--foreground); margin-top: 6px; line-height: 1.45; overflow-wrap: anywhere; background: color-mix(in oklab, var(--border) 35%, transparent); border-radius: 8px; padding: 6px 9px; }
.gss-item-ev .lbl { font-weight: 700; color: var(--muted-foreground); text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; margin-right: 4px; }
.gss-manual-chip { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.4); border-radius: 999px; padding: 0 6px; margin-left: 6px; vertical-align: 1px; }

/* recommendations ("what to fix first") - redesigned 2026-07-14: the top 3
   (heaviest-impact) get big full-width "major fix" treatment; the rest drop
   into a tighter 2-column grid so the list reads compact instead of one long
   column with a lot of empty space either side on a wide screen. */
.gss-rec-major-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.gss-rec-major { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 10px;
    background: var(--card); border-left: 3px solid var(--border); }
.gss-rec-major.st-fail { border-left-color: #ef4444; background: color-mix(in oklab, #ef4444 6%, var(--card)); }
.gss-rec-major.st-warn { border-left-color: #eab308; background: color-mix(in oklab, #eab308 6%, var(--card)); }
.gss-rec-major-rank { font-size: 1.4rem; font-weight: 800; color: var(--muted-foreground); flex: 0 0 auto; width: 32px; text-align: center; line-height: 1.3; }
.gss-rec-major.st-fail .gss-rec-major-rank { color: #ef4444; }
.gss-rec-major.st-warn .gss-rec-major-rank { color: #eab308; }
.gss-rec-major-body { min-width: 0; flex: 1 1 auto; }
.gss-rec-major-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.gss-rec-major-label { font-size: 1.05rem; font-weight: 800; color: var(--foreground); }
.gss-rec-found, .gss-rec-why-line { font-size: 12.5px; color: var(--foreground); line-height: 1.5; margin-top: 3px; }
.gss-rec-found .lbl, .gss-rec-why-line .lbl { font-weight: 700; color: var(--muted-foreground); text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; margin-right: 4px; }
.gss-rec-why-line { color: var(--muted-foreground); }

.gss-recs-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; }
@media (max-width: 700px) { .gss-recs-list { grid-template-columns: 1fr; } }
.gss-rec-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 4px; border-bottom: 1px solid color-mix(in oklab, var(--border) 55%, transparent); }
.gss-rec-row:last-child { border-bottom: none; }
.gss-rec-rank { font-size: 11px; font-weight: 800; color: var(--muted-foreground); width: 18px; flex: 0 0 auto; padding-top: 3px; text-align: center; }
.gss-rec-body { min-width: 0; }
.gss-rec-label { font-size: var(--text-sm); font-weight: 600; color: var(--foreground); }
.gss-rec-section { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-left: 6px; }
.gss-rec-why { font-size: 12px; color: var(--muted-foreground); margin-top: 3px; line-height: 1.5; }

/* section info tooltip */
.gss-info { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted-foreground); font-size: 10px; font-weight: 800; margin-left: 6px; flex: 0 0 auto; position: relative; }
.gss-info-panel { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: 250px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 12px; line-height: 1.55; color: var(--foreground); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4); font-weight: 400; text-transform: none; letter-spacing: normal; }
.gss-info-panel .bands { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted-foreground); }
.gss-strip-card .gss-info, .gss-sec-title .gss-info { vertical-align: 2px; }

/* history pills + errors */
.gss-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.gss-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px 4px 5px; font-size: 12px; color: var(--muted-foreground); text-decoration: none; }
.gss-pill.active { border-color: var(--gss-tone); color: var(--foreground); }
.gss-pill-score { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 999px; background: color-mix(in oklab, var(--gss-tone) 18%, transparent); color: var(--gss-tone); font-weight: 800; }
.gss-errors { font-size: 12px; color: var(--muted-foreground); background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 1rem; display: flex; flex-direction: column; gap: 3px; }
@media (max-width: 700px) { .gss-hero { flex-direction: column; align-items: flex-start; } .gss-nap-row { grid-template-columns: 70px 1fr 1fr 40px; } }

/* ── Playbook reader (pbr-*) - section cards for the canonical doc ── */
.pbr-toc { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.pbr-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--text-xs); color: var(--muted-foreground); background: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.7rem; text-decoration: none; transition: color 0.12s, border-color 0.12s; }
.pbr-chip:hover { color: var(--foreground); border-color: var(--primary); }
.pbr-chip i { font-size: 0.8rem; color: var(--primary); }
.pbr-toc-actions { margin-left: auto; display: flex; gap: 0.25rem; }
.pbr-sec { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.pbr-sec-hero { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); background: color-mix(in oklab, var(--primary) 5%, var(--card)); }
.pbr-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1.1rem; }
.pbr-sec > summary::-webkit-details-marker { display: none; }
.pbr-sec > summary::after { content: '\2039'; transform: rotate(-90deg); transition: transform 0.15s; color: var(--muted-foreground); font-size: 1.1rem; flex: 0 0 auto; }
.pbr-sec[open] > summary::after { transform: rotate(90deg); }
.pbr-sec[open] > summary { border-bottom: 1px solid var(--border); }
.pbr-sec-icon { width: 2.1rem; height: 2.1rem; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--muted); border: 1px solid var(--border); color: var(--primary); font-size: 1rem; }
.pbr-sec-titles { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.pbr-sec-title { font-weight: var(--font-weight-semibold); color: var(--foreground); font-size: var(--text-base); }
.pbr-sec-summary { font-size: var(--text-xs); color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbr-sec[open] .pbr-sec-summary { display: none; }
.pbr-sec-count { flex: 0 0 auto; white-space: nowrap; }
.pbr-sec-body { padding: 0.9rem 1.25rem 1.25rem; }
.pbr-sec-body > .pb-md h2:first-child, .pbr-sec-body h3:first-child { margin-top: 0.25rem; }
.pbr-raw { background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1.1rem; font-size: var(--text-xs); line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 30rem; overflow: auto; margin-top: 0.5rem; color: var(--foreground); }
@media (max-width: 640px) {
  .pbr-sec-count { display: none; }
  .pbr-toc-actions { margin-left: 0; width: 100%; }
}

/* ============================================================================
   pbagent - live-agent status HUD (top of YouTube expert playbook)
   ========================================================================= */
.pbagent {
  --pba-live: #10b981; --pba-work: #f59e0b; --pba-idle: var(--muted-foreground);
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--pba-live) 9%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--foreground) 4%, var(--card)), var(--card));
  padding: 1rem 1.25rem 1.1rem;
}
.pbagent--working { --pba-accent: var(--pba-work); }
.pbagent--live    { --pba-accent: var(--pba-live); }
.pbagent--standby { --pba-accent: var(--pba-idle); }

/* sweeping scanline - only while the agent is actively working */
.pbagent-scan { position: absolute; inset: 0 auto 0 -30%; width: 30%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pba-work) 22%, transparent), transparent); }
.pbagent--working .pbagent-scan { opacity: 1; animation: pba-sweep 2.4s linear infinite; }
@keyframes pba-sweep { from { transform: translateX(0); } to { transform: translateX(600%); } }

.pbagent-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pbagent-id { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }

/* pulsing status orb */
.pbagent-orb { position: relative; flex: 0 0 auto; width: 0.85rem; height: 0.85rem; }
.pbagent-orb i { position: absolute; inset: 0; border-radius: 50%; background: var(--pba-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--pba-accent) 80%, transparent); }
.pbagent-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--pba-accent); animation: pba-ring 1.8s ease-out infinite; }
.pbagent--standby .pbagent-orb::after { animation: none; opacity: 0.4; }
@keyframes pba-ring { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3.2); opacity: 0; } }

.pbagent-name { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--foreground); }
.pbagent-role { font-size: var(--text-xs); color: var(--muted-foreground); margin-top: 0.15rem; }

.pbagent-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.12rem 0.55rem;
  border-radius: 999px; font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.06em;
  border: 1px solid color-mix(in srgb, var(--pba-accent) 45%, transparent);
  color: var(--pba-accent); background: color-mix(in srgb, var(--pba-accent) 14%, transparent); }
.pbagent-badge-dot { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: currentColor; }
.pbagent--working .pbagent-badge-dot,
.pbagent--live .pbagent-badge-dot { animation: pba-blink 1.4s ease-in-out infinite; }
@keyframes pba-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.pbagent-clock { text-align: right; flex: 0 0 auto; }
.pbagent-clock-t { font-variant-numeric: tabular-nums; font-size: var(--text-lg); font-weight: 700;
  color: var(--foreground); letter-spacing: 0.02em; }
.pbagent-clock-t span { font-size: var(--text-2xs); font-weight: 600; color: var(--muted-foreground); margin-left: 0.3rem; }
.pbagent-clock-l { font-size: var(--text-2xs); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.08em; }

/* pipeline */
.pbagent-pipe { display: flex; align-items: stretch; gap: 0; margin: 1.1rem 0 0.9rem; }
.pbagent-conn { flex: 1 1 auto; align-self: flex-start; height: 2px; margin-top: 1.4rem; min-width: 1rem;
  background: var(--border); border-radius: 2px; position: relative; overflow: hidden; }
.pbagent-conn--done, .pbagent-conn--live { background: color-mix(in srgb, var(--pba-live) 55%, var(--border)); }
.pbagent-conn--active { background: color-mix(in srgb, var(--pba-work) 35%, var(--border)); }
.pbagent-conn--active::after { content: ""; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, var(--pba-work), transparent); animation: pba-flow 1.3s linear infinite; }
@keyframes pba-flow { from { transform: translateX(-100%); } to { transform: translateX(350%); } }

.pbagent-stage { flex: 0 0 auto; width: 5.4rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.pbagent-stage-ico { position: relative; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid var(--border);
  background: var(--background); color: var(--muted-foreground); transition: all 0.2s; }
.pbagent-stage-ico svg { width: 1.4rem; height: 1.4rem; }
.pbagent-tick { position: absolute; right: -2px; bottom: -2px; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--pba-live); color: #fff; display: none; place-items: center; }
.pbagent-tick svg { width: 0.7rem; height: 0.7rem; }
.pbagent-stage-name { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); color: var(--foreground); }
.pbagent-stage-sub { font-size: var(--text-2xs); color: var(--muted-foreground); line-height: 1.2; }
.pbagent-stage-meta { font-size: var(--text-2xs); color: var(--muted-foreground); opacity: 0.85; margin-top: 0.05rem; }

.pbagent-stage.is-pending { opacity: 0.55; }
.pbagent-stage.is-done .pbagent-stage-ico { border-color: color-mix(in srgb, var(--pba-live) 55%, transparent);
  color: var(--pba-live); background: color-mix(in srgb, var(--pba-live) 10%, var(--background)); }
.pbagent-stage.is-done .pbagent-tick { display: grid; }
.pbagent-stage.is-active .pbagent-stage-ico { border-color: var(--pba-work); color: var(--pba-work);
  background: color-mix(in srgb, var(--pba-work) 12%, var(--background));
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--pba-work) 60%, transparent); animation: pba-pulse 1.5s ease-out infinite; }
@keyframes pba-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pba-work) 55%, transparent); }
  100% { box-shadow: 0 0 0 0.8rem transparent; } }
.pbagent-stage.is-live .pbagent-stage-ico { border-color: var(--pba-live); color: var(--pba-live);
  background: color-mix(in srgb, var(--pba-live) 14%, var(--background));
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--pba-live) 55%, transparent); animation: pba-pulse-live 1.8s ease-out infinite; }
@keyframes pba-pulse-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pba-live) 50%, transparent); }
  100% { box-shadow: 0 0 0 0.7rem transparent; } }

/* footer */
.pbagent-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 0.85rem; }
.pbagent-metrics { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.pbagent-metric { display: flex; flex-direction: column; }
.pbagent-metric b { font-size: var(--text-sm); font-weight: 700; color: var(--foreground); }
.pbagent-metric span { font-size: var(--text-2xs); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.05em; }
.pbagent-next { text-align: right; display: flex; flex-direction: column; align-items: flex-end;
  padding: 0.4rem 0.8rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--pba-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--pba-accent) 30%, transparent); }
.pbagent-next-l { font-size: var(--text-2xs); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.06em; }
.pbagent-next-v { font-size: var(--text-lg); font-weight: 700; color: var(--foreground); font-variant-numeric: tabular-nums; line-height: 1.1; }
.pbagent-next-w { font-size: var(--text-2xs); color: var(--pba-accent); font-weight: 600; }

@media (max-width: 640px) {
  .pbagent-pipe { flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.9rem; }
  .pbagent-conn { display: none; }
  .pbagent-stage { width: 4.2rem; }
  .pbagent-foot { flex-direction: column; align-items: stretch; }
  .pbagent-next { text-align: center; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pbagent-scan, .pbagent-orb::after, .pbagent-badge-dot,
  .pbagent-conn--active::after, .pbagent-stage-ico { animation: none !important; }
}

/* ============================================================================
   pbr-body - human-readable layout for an expanded playbook section
   (turns curator markdown into scannable groups, cards, steps, checklists)
   ========================================================================= */
/* tighter, consistent rhythm inside sections */
.pbr-body { line-height: 1.5; }
.pbr-body p { margin: 0.3rem 0; }

/* the H2 takeaway line becomes a lead callout */
.pbr-body > p:first-child {
  font-size: var(--text-sm); color: var(--foreground); line-height: 1.5;
  margin: 0 0 0.7rem; padding: 0.5rem 0.85rem; border-left: 3px solid var(--primary);
  background: color-mix(in oklab, var(--primary) 6%, transparent); border-radius: 0 8px 8px 0;
}
.pbr-body > *:first-child { margin-top: 0; }

/* H3 sub-groups -> labelled dividers so a big section reads as parts */
.pbr-body h3 {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 1.05rem 0 0.4rem; padding-top: 0.7rem; border-top: 1px solid var(--border);
  font-size: var(--text-sm); font-weight: var(--font-weight-semibold); letter-spacing: 0.01em; color: var(--foreground);
}
.pbr-body h3::before { content: ''; flex: 0 0 auto; width: 0.5rem; height: 1rem; border-radius: 3px; background: var(--primary); }
.pbr-body h3:first-child { border-top: none; padding-top: 0; margin-top: 0.15rem; }

/* lists get a treatment matched to their content (pbrStyleLists tags each ul):
   --cards (long prose), --def (label: description), --compact (short items),
   plus auto 2-col tables for clean label/value data. Base = simple dotted rows
   (the no-JS fallback). */
.pbr-body > ul { list-style: none; padding-left: 0; margin: 0.4rem 0 0.7rem; display: flex; flex-direction: column; gap: 0.25rem; }
.pbr-body > ul > li { position: relative; padding: 0.08rem 0 0.08rem 1rem; line-height: 1.45; }
.pbr-body > ul > li::before { content: ''; position: absolute; left: 0.05rem; top: 0.72em; width: 0.36rem; height: 0.36rem; border-radius: 50%; background: color-mix(in oklab, var(--primary) 70%, var(--border)); }

/* the "**Label:**" lead-in that starts many items */
.pbr-body li > strong:first-child,
.pbr-body li > p:first-child > strong:first-child { color: color-mix(in oklab, var(--primary) 75%, var(--foreground)); }
.pbr-body li > p { margin: 0.2rem 0; }
.pbr-body li > p:first-child { margin-top: 0; }

/* CARDS - long prose items, each separated into its own card */
.pbr-body .pbr-list--cards { gap: 0.4rem; }
.pbr-body .pbr-list--cards > li { padding: 0.55rem 0.85rem; background: color-mix(in oklab, var(--foreground) 3%, var(--card)); border: 1px solid var(--border); border-left: 3px solid color-mix(in oklab, var(--primary) 55%, var(--border)); border-radius: 8px; }
.pbr-body .pbr-list--cards > li::before { content: none; }

/* DEF - "label: description" rows: emphasized label, thin rule, no box */
.pbr-body .pbr-list--def { gap: 0.4rem; }
.pbr-body .pbr-list--def > li { padding: 0.05rem 0 0.05rem 0.9rem; border-left: 2px solid color-mix(in oklab, var(--primary) 40%, var(--border)); }
.pbr-body .pbr-list--def > li::before { content: none; }

/* COMPACT - short items in a responsive grid with small dot markers */
.pbr-body .pbr-list--compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.25rem 1rem; }
.pbr-body .pbr-list--compact > li { padding: 0.12rem 0 0.12rem 0.95rem; }

/* AUTO TABLE - clean label/value data rendered as a 2-col spec table */
.pbr-body .pbr-auto-table { width: 100%; border-collapse: collapse; margin: 0.6rem 0 0.9rem; font-size: var(--text-sm); display: table; overflow: visible; }
.pbr-body .pbr-auto-table th { text-align: left; vertical-align: top; padding: 0.5rem 0.75rem; width: 32%; font-weight: var(--font-weight-semibold); color: color-mix(in oklab, var(--primary) 78%, var(--foreground)); border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--foreground) 3%, transparent); }
.pbr-body .pbr-auto-table td { padding: 0.5rem 0.75rem; vertical-align: top; border-bottom: 1px solid var(--border); }
.pbr-body .pbr-auto-table tr:last-child th, .pbr-body .pbr-auto-table tr:last-child td { border-bottom: none; }

/* numbered lists -> step chips */
.pbr-body > ol { list-style: none; padding-left: 0; counter-reset: pbstep; margin: 0.6rem 0 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; }
.pbr-body > ol > li {
  counter-increment: pbstep; position: relative; margin: 0; padding: 0.55rem 0.85rem 0.55rem 2.6rem; line-height: 1.55;
  background: color-mix(in oklab, var(--foreground) 3%, var(--card)); border: 1px solid var(--border); border-radius: 8px;
}
.pbr-body > ol > li::before {
  content: counter(pbstep); position: absolute; left: 0.6rem; top: 0.5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: var(--text-xs); font-weight: 700; display: grid; place-items: center;
}

/* checklists: GFM task lists render a real <input type=checkbox> - style that
   (never add a second one), checkbox left, text aligned beside it */
.pbr-body .pbr-list--check { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.pbr-body .pbr-list--check > li { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.1rem 0; margin: 0; }
.pbr-body .pbr-list--check > li::before { content: none; }
.pbr-body input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 1rem; height: 1rem; margin: 0.17rem 0 0; border: 1.5px solid color-mix(in oklab, var(--primary) 45%, var(--border)); border-radius: 4px; background: var(--card); }

/* nested lists stay lightweight */
.pbr-body li ul, .pbr-body li ol { margin: 0.35rem 0 0.1rem; padding-left: 1.1rem; display: block; }
.pbr-body li ul > li, .pbr-body li ol > li { background: none; border: none; border-radius: 0; padding: 0.12rem 0; list-style: disc; counter-increment: none; }
.pbr-body li ul > li::before, .pbr-body li ol > li::before { content: none; }

/* tables scroll rather than blow out the layout */
.pbr-body table { border-collapse: collapse; margin: 0.6rem 0 0.9rem; font-size: var(--text-xs); display: block; overflow-x: auto; }
.pbr-body th, .pbr-body td { border: 1px solid var(--border); padding: 0.4rem 0.6rem; text-align: left; }
.pbr-body th { background: var(--muted); font-weight: var(--font-weight-semibold); }

/* plain-text LLM copy: label it clearly, keep it at the bottom */
.pbr-llm > summary { display: flex; align-items: center; gap: 0.5rem; }
.pbr-llm-tag { font-size: var(--text-2xs); color: var(--muted-foreground); font-weight: 400; border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.5rem; }

/* pin-to-menu icon button on the YouTube Experts cards */
.pb-pin { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border-radius: 7px; border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); cursor: pointer; transition: color 0.12s, border-color 0.12s, background 0.12s; }
.pb-pin:hover { color: var(--primary); border-color: var(--primary); }
.pb-pin--on { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); background: color-mix(in oklab, var(--primary) 10%, var(--card)); }

/* provenance caption folded into the bottom of the status HUD */
.pbagent-prov { margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--border); font-size: var(--text-2xs); color: var(--muted-foreground); text-align: center; letter-spacing: 0.02em; }

/* Research brief card (replaces the plain topic box) */
.pb-brief { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 4%, var(--card)), var(--card)); display: flex; flex-direction: column; gap: 0.75rem; }
.pb-brief-main { display: flex; gap: 0.85rem; align-items: flex-start; }
.pb-brief-ico { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 10px; display: grid; place-items: center; color: var(--primary); background: color-mix(in oklab, var(--primary) 13%, transparent); border: 1px solid color-mix(in oklab, var(--primary) 30%, var(--border)); }
.pb-brief-ico svg { width: 1.3rem; height: 1.3rem; }
.pb-brief-body { min-width: 0; }
.pb-brief-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); font-weight: 600; }
.pb-brief-goal { font-size: var(--text-base); color: var(--foreground); font-weight: var(--font-weight-medium); line-height: 1.4; margin-top: 0.1rem; }
.pb-brief-bio { font-size: var(--text-xs); color: var(--muted-foreground); margin-top: 0.35rem; line-height: 1.5; }
.pb-brief-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pb-brief-tag { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--text-2xs); color: var(--muted-foreground); background: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.6rem; text-decoration: none; }
.pb-brief-tag--topic { color: var(--foreground); }
.pb-brief-tag--link { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 35%, var(--border)); }
.pb-brief-tag--link:hover { background: color-mix(in oklab, var(--primary) 10%, var(--muted)); }

/* =====================================================================
 * Claude Spend page (cs-page) - brought onto the Style Book's frosted-glass
 * "cx-section" system (.sb-section, already built for Style Book above).
 * .cx-stat is shared app-wide (dashboard, reports, etc.), so its bento
 * redesign is scoped to .cs-page only - every other page keeps the plain
 * flat .cx-stat look until it opts in the same way.
 * ===================================================================== */
.cs-page .cx-stat-row { gap: 0.875rem; }
.cs-page .cx-stat {
    position: relative;
    background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    transition: background .14s, border-color .14s, transform .14s;
    overflow: hidden;
}
.cs-page .cx-stat::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--stat-accent, #4299e1), transparent);
    opacity: .9;
}
.cs-page .cx-stat:nth-child(4n+1) { --stat-accent: #4299e1; }
.cs-page .cx-stat:nth-child(4n+2) { --stat-accent: #22d3ee; }
.cs-page .cx-stat:nth-child(4n+3) { --stat-accent: #a78bfa; }
.cs-page .cx-stat:nth-child(4n+4) { --stat-accent: #e0a33e; }
.cs-page .cx-stat:hover {
    background: linear-gradient(160deg, color-mix(in srgb, var(--stat-accent, #4299e1) 18%, transparent), color-mix(in srgb, var(--stat-accent, #4299e1) 6%, transparent));
    border-color: color-mix(in srgb, var(--stat-accent, #4299e1) 40%, transparent);
    transform: translateY(-2px);
}
.cs-page .cx-stat-value { font-size: var(--text-3xl); }

/* Subscription-meter columns: real separated boxes (own background/border/
   radius + a gap between them), not just a whitespace-and-1px-rule seam. */
.cs-page .cx-gauge-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.cs-page .cx-gauge-col { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 14px 16px; }
.cs-page .cx-gauge-label { font-size: 13px; font-weight: 600; color: var(--foreground); }

/* =====================================================================
 * FINAL WORD (2026-07-09): deepest nested sidebar tier (Settings > Alerts/
 * Activity/Action Log, Website Health > Sites/Review Queue/Run History -
 * anything rendered inside .fi-sidebar-sub-group-items). User feedback:
 * "the second sub menu needs icons" + "the third sub-menu glow/shadow has
 * to be simple, follow the StyleBook". The icon markup itself is now fixed
 * at the Blade level (resources/views/vendor/filament-panels/components/
 * sidebar/item.blade.php no longer omits it for sub-grouped items); this
 * block only (a) sizes/colors those icons to match the existing muted
 * sub-item look used elsewhere in the sidebar, and (b) strips the solid-
 * blue glow box-shadow from THIS tier only, replacing it with the same flat
 * background-tint pattern as the Style Book's .sb-dd-item:hover (no shadow,
 * just var(--accent)) - top-level group items and the expandable parent
 * rows (Settings/Website Health themselves) are untouched.
 *
 * UPDATE (2026-07-15): Lead Tracking > Settings (General/Twilio/Phone.com/
 * Rejected Requests/Blocked IPs/Call Tests/Testing) is a SEPARATE, JS-built
 * nesting mechanism (cyticx-workbench.js injects .cx-lt-subgroup-item - it
 * is not Filament's native $navigationParentItem, which is what renders
 * .fi-sidebar-sub-group-items elsewhere). The two mechanisms never shared
 * this override, so Lead Tracking's deepest tier was still falling through
 * to the generic rule (1b) below - solid blue glow pill on hover - while
 * every other nested tier in the app got the flat StyleBook treatment. User
 * caught this exact inconsistency ("settings become a different mouse over").
 * Every selector in this block now also matches .cx-lt-subgroup-item so both
 * mechanisms render identically. Also: give this tier's icons a distinct
 * idle color (a primary/muted blend) so a "sub-sub" item is visually
 * distinguishable at a glance from a regular one-level-deep sub-item, which
 * stays plain muted-foreground (per user request to differentiate depth). */
html body .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item-icon,
html body .fi-sidebar .cx-lt-subgroup-item .fi-sidebar-item-icon {
  color: color-mix(in oklab, var(--primary) 45%, var(--muted-foreground) 55%) !important;
}
html body .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-icon,
html body .fi-sidebar .cx-lt-subgroup-item.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-icon,
html body .fi-sidebar .cx-lt-subgroup-item.fi-sidebar-item-active a.fi-sidebar-item-button .fi-sidebar-item-icon {
  color: var(--primary) !important;
}
html body .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item-active > .fi-sidebar-item-button,
html body .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button:hover,
html body .fi-sidebar .cx-lt-subgroup-item.fi-sidebar-item-active > .fi-sidebar-item-button,
html body .fi-sidebar .cx-lt-subgroup-item.fi-sidebar-item-active a.fi-sidebar-item-button,
html body .fi-sidebar .cx-lt-subgroup-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button:hover,
html body .fi-sidebar .cx-lt-subgroup-item:not(.fi-sidebar-item-active) a.fi-sidebar-item-button:hover {
  background: var(--accent) !important;
  box-shadow: none !important;
}
html body .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-label,
html body .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button:hover .fi-sidebar-item-label,
html body .fi-sidebar .cx-lt-subgroup-item.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-label,
html body .fi-sidebar .cx-lt-subgroup-item.fi-sidebar-item-active a.fi-sidebar-item-button .fi-sidebar-item-label,
html body .fi-sidebar .cx-lt-subgroup-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button:hover .fi-sidebar-item-label,
html body .fi-sidebar .cx-lt-subgroup-item:not(.fi-sidebar-item-active) a.fi-sidebar-item-button:hover .fi-sidebar-item-label {
  color: var(--foreground) !important;
}
html body .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button:hover .fi-sidebar-item-icon,
html body .fi-sidebar .cx-lt-subgroup-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button:hover .fi-sidebar-item-icon,
html body .fi-sidebar .cx-lt-subgroup-item:not(.fi-sidebar-item-active) a.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
  color: color-mix(in oklab, var(--primary) 45%, var(--muted-foreground) 55%) !important;
}

/* =====================================================================
 * FIX (2026-07-14): when the ACTIVE page IS a parent with its own sub-menu
 * (e.g. viewing Website Health's own index, which also expands Sites/Review
 * Queue/Run History beneath it) - as opposed to a leaf nested INSIDE a
 * sub-menu being active (e.g. viewing Twilio under Settings, already handled
 * above) - rule (1)'s broad ".fi-sidebar-item-active a.fi-sidebar-item-button"
 * descendant selector matched every child button too, since they're
 * DOM-descendants of the active parent's <li>. That painted the whole
 * sub-menu solid blue with a glow box, instead of just the one active row -
 * a boxed-in look Lead Tracking's equivalent tier never has (there, the
 * active leaf is never simultaneously an expanded parent). Reset any
 * non-active sub-item back to flat/transparent regardless of an active
 * ancestor above it; the more specific ".fi-sidebar-item-active > ..." rules
 * above still correctly re-paint an item that is ITSELF the active one.
 * Extended 2026-07-15 to also cover .cx-lt-subgroup-item for the same reason
 * as the block above (harmless no-op there today since the LT "Settings"
 * header is JS-synthetic, not a real active-able page, but keeps both
 * nesting mechanisms symmetric if that ever changes). */
html body .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button,
html body .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-sidebar-item-active) a.fi-sidebar-item-button,
html body .fi-sidebar .cx-lt-subgroup-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button,
html body .fi-sidebar .cx-lt-subgroup-item:not(.fi-sidebar-item-active) a.fi-sidebar-item-button {
  background: transparent !important;
  box-shadow: none !important;
}
html body .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button .fi-sidebar-item-icon,
html body .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-sidebar-item-active) a.fi-sidebar-item-button .fi-sidebar-item-icon,
html body .fi-sidebar .cx-lt-subgroup-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button .fi-sidebar-item-icon,
html body .fi-sidebar .cx-lt-subgroup-item:not(.fi-sidebar-item-active) a.fi-sidebar-item-button .fi-sidebar-item-icon {
  color: color-mix(in oklab, var(--primary) 45%, var(--muted-foreground) 55%) !important;
}
html body .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button .fi-sidebar-item-label,
html body .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-sidebar-item-active) a.fi-sidebar-item-button .fi-sidebar-item-label,
html body .fi-sidebar .cx-lt-subgroup-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button .fi-sidebar-item-label,
html body .fi-sidebar .cx-lt-subgroup-item:not(.fi-sidebar-item-active) a.fi-sidebar-item-button .fi-sidebar-item-label {
  color: var(--foreground) !important;
}
/* Keep the hover-preview (rule 1b) working on these reset rows too. */
html body .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button:hover,
html body .fi-sidebar .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-sidebar-item-active) a.fi-sidebar-item-button:hover,
html body .fi-sidebar .cx-lt-subgroup-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button:hover,
html body .fi-sidebar .cx-lt-subgroup-item:not(.fi-sidebar-item-active) a.fi-sidebar-item-button:hover {
  background: var(--accent) !important;
  box-shadow: none !important;
}

/* =====================================================================
 * CORRECTION 2026-07-10: this was originally written as a brand-new
 * ".cx-glass-section" class, ported from gbp-dashboard.blade.php's page-local
 * .cx-gd-section/.cx-gd-h - without realizing the App ALREADY HAS this exact
 * same recipe as a real, documented, living class: `.sb-section`/
 * `.sb-section-h`/`.sb-sec-dot` (see the Style Book layout rules a few
 * hundred lines up in this same file, and app/Filament/Pages/StyleBook.php).
 * Building a second class with the same visual recipe under a different name
 * is exactly the "ignoring the style book" mistake the user called out -
 * so `.cx-glass-*` is now a plain ALIAS of the real `.sb-*` classes, not a
 * parallel system. Any NEW blade should use `.sb-section`/`.sb-section-h`/
 * `.sb-sec-dot` directly (with `style="--sec-accent:#hex"` to recolor, or one
 * of the 4 named accents cx-sec-lead/map/status/tools) - these `.cx-glass-*`
 * selectors stay only so already-shipped pages (FB Poster, Command Center)
 * keep rendering correctly without a mass find-and-replace across ~13 files.
 * ===================================================================== */
.cx-glass-section, .sb-section {
    position: relative;
    background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 18px 20px 20px;
    margin-bottom: 18px;
    backdrop-filter: blur(14px) saturate(130%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 34px -14px rgba(0,0,0,.6);
    overflow: hidden;
    --glow: #4285f4;
}
/* Top glow line REMOVED 2026-08-18 - the Style Book's own card/alert
   pattern has no glow/gradient decoration on any edge (already a standing
   rule after this exact anti-pattern was found and fixed once before on a
   different surface). Reconfirmed by the design-polish sweep on the
   Dashboard "Needs You Now" card, the "Autonomous - Live" banner, and the
   Needs Attention "Needs You" card - all three use .cx-glass-section
   (shared by 23 files), so fixing it here fixes every instance at once.
   Kept as a no-op selector rather than deleted so a future revert is a
   one-line diff, not a re-discovery. */
.cx-glass-section::before {
    display: none;
}
.cx-glass-h, .sb-section-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cx-glass-h .dot, .cx-glass-h .sb-sec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 10px var(--glow); flex: 0 0 auto; }
.cx-glass-h h2 { font-size: 1.02rem; font-weight: 700; margin: 0; color: var(--foreground); }
/* QA 2026-09-03 round 4, measured live @390 and @1440: .sub/.cx-glass-pill
   start flush at the header's own left edge (x offset 0) whenever they wrap
   to a new line, while h2 on the line above sits 19px in (the dot's 9px +
   10px gap it used to share the row with) - a ragged left edge. flex:1 1
   240px lets a long subtitle give way and wrap instead of forcing the pill
   down (this pairs with round 3's pill-before-.sub source-order fix in
   supervisor.blade.php); min-width:0 lets it actually shrink that far. */
.cx-glass-h .sub { font-size: .78rem; color: var(--muted-foreground); flex: 1 1 240px; min-width: 0; }
/* QA 2026-09-03 round 4: taking the dot out of flex flow and pinning it at
   the header's own padding edge, then giving every flex child (h2 AND any
   wrapped .sub/.cx-glass-pill line) the same 19px padding-left the dot+gap
   used to carve out of the row, means EVERY wrapped line lines up under the
   title instead of only the first one. top is a fixed px (not 50%) because
   the header's own box can be 2-3 lines tall once wrapped - a percentage
   would center the dot against the WHOLE block instead of staying pinned to
   the h2 line it belongs next to. 7.5px is h2's own line-box vertical
   center: (24.47px line-height - 9px dot) / 2, measured live. */
.cx-glass-h { position: relative; padding-left: 19px; }
.cx-glass-h .dot { position: absolute; left: 0; top: 7.5px; }
/* 2026-08-05: 12px admin-wide label floor - was .62rem (9.92px, e.g. the
   dashboard/listing-management "3" queue-count pill next to a section title). */
/* QA 2026-09-03 round 3, measured live on Supervisor's Latest Briefing header
   @1440: margin-left:auto pushed the date pill 499px from the subtitle - the
   pill landed alone on its own line instead of reading with the header it
   belongs to (same dead-gap anti-pattern already fixed on .sv-onduty and
   .cx-cmd-onduty). This class is shared by every .cx-glass-h section header
   across Command Center - fixed at the source so "N pending" / "N in
   progress" / the date pill all read inline right after the subtitle
   everywhere, not just here. */
.cx-glass-h .cx-glass-pill { font-size: .75rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }

/* Nested kt-card content inside a .cx-glass-section should get the same flat/
   frosted treatment .sb-section already gives kt-card (see rule ~50 lines up)
   - extend that selector so pages using the alias class inherit it too. */
.cx-glass-section.kt-card, .cx-glass-section .kt-card { background: var(--card); border-color: rgba(255,255,255,.06); box-shadow: none; border-radius: 16px; }
.cx-glass-section .kt-card-header { background: linear-gradient(180deg, rgba(255,255,255,.035), transparent); border-bottom: 1px solid rgba(255,255,255,.06); border-top-left-radius: 16px; border-top-right-radius: 16px; }
.cx-glass-section .kt-card-footer { border-top: 1px solid rgba(255,255,255,.06); }
.cx-glass-section .kt-card-title { font-size: var(--text-base); letter-spacing: var(--tracking-tight); }
.cx-glass-section .kt-card.sb-stat, .cx-stat-row .kt-card.sb-stat { --stat-accent: var(--glow, #4299e1); }

/* ---- Period / date-range shortcut tabs (shared house component) ----
   Same look everywhere a page offers Today/7 Days/30 Days-style shortcuts
   (Lead Tracking Dashboard, Client View, Listing Management report, ...).
   Works as either <a href> links (full page reload, mark active via
   .is-active server-side) or <button data-period> toggled by page JS. */
.cx-period-tabs { display: inline-flex; gap: .3rem; flex-wrap: wrap; background: linear-gradient(180deg, rgba(186,230,253,.10), rgba(125,211,252,.05)); border: 1px solid rgba(186,230,253,.18); border-radius: .7rem; padding: .3rem .4rem; }
.cx-period-tab { display: inline-block; background: transparent; border: 0; border-radius: .5rem; padding: .4rem .85rem; font-size: .78rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: rgba(224,242,254,.72); cursor: pointer; text-decoration: none; transition: background .15s, color .15s; white-space: nowrap; }
.cx-period-tab:hover { color: #f0f9ff; background: rgba(186,230,253,.12); text-decoration: none; }
.cx-period-tab.is-active { color: #0c4a6e; background: linear-gradient(180deg, rgba(240,249,255,.97), rgba(186,230,253,.85)); box-shadow: 0 1px 3px rgba(8,47,73,.35), inset 0 1px 0 rgba(255,255,255,.7); }

/* =====================================================================
 * GLOBAL FIX (2026-07-15): native <select> option lists, app-wide.
 * A plain <select> (any Filament Select/SelectFilter that never opted into
 * ->searchable() or ->native(false)) renders its OPEN option list via the
 * OS/browser, which ignores the page's own CSS entirely - so the trigger
 * looks themed but the popup itself can render as a plain, oversized,
 * light-on-light or white system list that looks completely disconnected
 * from the app (exactly the "filters are extremely long / not fixed to the
 * page" complaint - reported on FB Poster > Posts but the same 64+ call
 * sites exist across nearly every resource in the app: Reports, SEO,
 * Listing Management, Command Center, Ad Watchdog, etc). Browsers DO still
 * honor background-color/color on <option> even though they won't take
 * borders/shadows/border-radius, so this one rule makes every native select
 * everywhere at least render in the app's own dark palette instead of a
 * jarring system-default list. Company/Month-style fields that already use
 * ->searchable() (Choices.js) or ->native(false) (Filament's own themed
 * dropdown) are unaffected - they never hit this native-<option> path.
 * The single most reported page (FB Poster > Posts: Style/Status filters +
 * form fields) was ALSO switched to ->native(false) directly for the fully
 * themed listbox; this rule is the safety net for the other ~60 call sites
 * across the app until each is migrated the same way. */
select option {
  background: var(--background) !important;
  color: var(--foreground) !important;
}
select optgroup {
  background: var(--background) !important;
  color: var(--muted-foreground) !important;
}

/* =====================================================================
 * "Blinking LED" nav attention indicator (2026-07-15, user request: "every
 * time there is something that is going to need me... the actual menu can
 * have some kind of a blinking LED to show that there is some kind of need
 * attention"). Filament nav badges (getNavigationBadge()) already render a
 * plain static number chip - this makes any DANGER-colored one (the color
 * every "needs you" badge in this app uses: Alerts, Needs Attention, Server
 * Health) pulse with a soft glow instead of sitting there static, so a
 * pending item is noticeable at a glance without opening the group. Only
 * targets sidebar badges (not table/card badges elsewhere in the app) and
 * only the danger variant, so a routine info/warning count never blinks. */
@keyframes cx-led-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--destructive) 55%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in oklab, var(--destructive) 0%, transparent); }
}
html body .fi-sidebar .fi-badge.fi-color-danger {
  animation: cx-led-pulse 1.8s ease-in-out infinite;
}

/* Portal chrome: keep the accent rail continuous beside the full main/footer
   column instead of ending above the footer's old empty block. */
/* The sidebar is authored by Filament as `position: fixed` (Tailwind `fixed
   inset-y-0 start-0`). Overriding it to `relative` unconditionally put it
   back IN FLOW at mobile, where it is supposed to be off-canvas: it kept
   reserving its 256px inside .fi-layout, its static left edge landed at
   -155px so ~101px stayed inside the viewport, and `main` was pushed to
   x=100 - 26% of a 390px phone screen wasted as an empty gutter on EVERY
   portal page. The `transform: translateX(-256px)` that hides the sidebar
   moved only the paint, never the box, which is what disguised it.

   Nothing overflowed, so scrollWidth === clientWidth held and every
   mechanical check passed. Only a screenshot showed it.

   The `relative` is only wanted where the sidebar is genuinely part of the
   layout row, so it is scoped to the desktop breakpoint. Below that,
   Filament's own `fixed` applies and main gets the full viewport.
   Verified: main x=100 w=290  ->  x=0 w=390, sidebar still off-screen,
   document overflow 0. */
@media (min-width: 1024px) {
  /* sticky, not relative: relative alone stays in flow but scrolls away with
     the page on a long portal page (Dashboard's Recent work list etc.),
     leaving nav unreachable without scrolling back to the top. sticky keeps
     the same in-flow width reservation (so the mobile-gutter fix above is
     untouched) while pinning it to the viewport during scroll. */
  .fi-panel-portal .fi-sidebar { position: sticky; top: 0; min-height: 100vh; align-self: stretch; }
}
.fi-panel-portal .fi-sidebar::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--primary); pointer-events: none; }
.fi-panel-portal .fi-main-ctn { min-height: 100vh; display: flex; flex-direction: column; }
.fi-panel-portal .fi-main { flex: 1 0 auto; }
.cxp-portal-footer { border-top: 1px solid var(--border); background: color-mix(in oklab, var(--background) 94%, var(--primary) 6%); }
.cxp-portal-footer-inner { max-width: 100%; min-height: 4.25rem; display: flex; align-items: center; gap: 1rem; padding: .85rem 1.25rem; color: var(--muted-foreground); font-size: var(--text-xs); }
.cxp-portal-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin-left: auto; }
.cxp-portal-footer a { color: var(--muted-foreground); text-decoration: none; }
.cxp-portal-footer a:hover, .cxp-portal-footer a:focus-visible { color: var(--primary); text-decoration: underline; text-underline-offset: .2em; }
.cxp-portal-footer-support { padding: .35rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-md); }

/* In-page legal dialog. Its links retain public URLs and fetch the same
   controller/view with ?fragment=1, so legal copy has one source of truth. */
.cxp-legal-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; }
.cxp-legal-modal[hidden] { display: none; }
.cxp-legal-backdrop { position: absolute; inset: 0; background: rgb(2 6 23 / .68); backdrop-filter: blur(8px); }
.cxp-legal-dialog { position: relative; display: flex; flex-direction: column; width: min(100%, 46rem); max-height: min(84vh, 48rem); overflow: hidden; border: 1px solid color-mix(in oklab, var(--primary) 35%, var(--border)); border-radius: var(--radius-xl); background: var(--background); box-shadow: 0 24px 80px rgb(0 0 0 / .4); color: var(--foreground); }
.cxp-legal-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.cxp-legal-dialog-header h2 { margin: 0; font-size: var(--text-lg); }
.cxp-legal-close { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted-foreground); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.cxp-legal-close:hover, .cxp-legal-close:focus-visible { color: var(--foreground); border-color: var(--primary); }
.cxp-legal-dialog-content { overflow: auto; padding: 1.25rem; line-height: 1.65; }
.cxp-legal-dialog-content p { margin: 0; color: var(--muted-foreground); }
.cxp-legal-dialog-content .cx-legal-fragment-draft { margin-bottom: 1rem; padding: .75rem 1rem; border-left: 3px solid var(--warning); background: color-mix(in oklab, var(--warning) 10%, transparent); }
.cx-legal-section + .cx-legal-section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.cx-legal-section h3 { margin: 0 0 .4rem; color: var(--foreground); font-size: var(--text-base); }
.cx-legal-section p + p { margin-top: .55rem; }
.cxp-legal-open { overflow: hidden; }

body.fi-panel-portal.cx-legal-body { min-height: 100vh; background: var(--background); color: var(--foreground); }
.cx-legal-header { border-bottom: 1px solid var(--border); }
.cx-legal-header-inner, .cx-legal-wrap { width: min(100% - 2rem, 54rem); margin: 0 auto; }
.cx-legal-header-inner { min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cx-legal-brand { display: inline-flex; align-items: baseline; gap: .55rem; color: var(--foreground); text-decoration: none; }
.cx-legal-brand-label { color: var(--muted-foreground); font-size: var(--text-sm); }
.cx-legal-main { padding: 2rem 0 3rem; }
.cx-legal-breadcrumb, .cx-legal-sibling-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--muted-foreground); font-size: var(--text-sm); }
.cx-legal-breadcrumb a, .cx-legal-sibling-links a { color: var(--color-blue-700); }
.cx-legal-signin,
.cx-legal-signin:hover,
.cx-legal-signin:focus-visible {
  background-color: var(--color-blue-700);
  color: var(--color-white);
}
.cx-legal-heading { margin: 1.5rem 0 1rem; }
.cx-legal-heading h1 { margin: 0; }
.cx-legal-heading p { margin: .4rem 0 0; color: var(--muted-foreground); }
.cx-legal-draft { display: flex; gap: .75rem; margin-bottom: 1rem; padding: .8rem 1rem; border: 1px solid color-mix(in oklab, var(--warning) 35%, var(--border)); border-radius: var(--radius-md); background: color-mix(in oklab, var(--warning) 8%, transparent); color: var(--muted-foreground); }
.cx-legal-draft strong { color: var(--warning); }
.cx-legal-card { margin: 0; }
.cx-legal-card .kt-card-content { padding: 1.5rem; }
.cx-legal-card .cx-legal-section h2 { margin: 0 0 .4rem; color: var(--foreground); font-size: var(--text-lg); }
.cx-legal-card .cx-legal-section p { margin: 0; color: var(--muted-foreground); line-height: 1.7; }
.cx-legal-sibling-links { margin-top: 1rem; }
.cx-legal-skip { position: absolute; left: 1rem; top: -4rem; z-index: 2; padding: .5rem .75rem; background: var(--background); }
.cx-legal-skip:focus { top: 1rem; }
@media (max-width: 640px) {
  .cxp-portal-footer-inner { align-items: stretch; flex-direction: column; padding: 1rem; }
  .cxp-portal-footer-links { margin-left: 0; gap: .5rem .85rem; }
  .cxp-legal-modal { padding: .5rem; }
  .cxp-legal-dialog { max-height: 90vh; border-radius: var(--radius-lg); }
  .cx-legal-header-inner, .cx-legal-wrap { width: min(100% - 1.25rem, 54rem); }
  .cx-legal-main { padding-top: 1.25rem; }
  .cx-legal-draft { flex-direction: column; gap: .25rem; }
  .cx-legal-card .kt-card-content, .cxp-legal-dialog-content { padding: 1rem; }
}
/* CYT-315 dashboard department overview: content-hugging gauges first. */
body.fi-panel-portal .cxp-scoreboard-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
}
body.fi-panel-portal .cxp-department-gauge {
  align-items: center;
  min-width: 0;
  text-align: center;
}
body.fi-panel-portal .cxp-department-gauge .cxp-scoreboard-tile-top {
  width: 100%;
  text-align: left;
}
body.fi-panel-portal .cxp-department-gauge-ring {
  position: relative;
  width: clamp(4.4rem, 6vw, 5.5rem);
  height: clamp(4.4rem, 6vw, 5.5rem);
  margin: .25rem 0 .1rem;
}
body.fi-panel-portal .cxp-department-gauge-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
body.fi-panel-portal .cxp-department-gauge-ring circle {
  fill: none;
  stroke-width: 6;
}
body.fi-panel-portal .cxp-department-gauge-ring .cxp-gauge-track {
  stroke: var(--border);
}
body.fi-panel-portal .cxp-department-gauge-ring .cxp-gauge-progress {
  stroke-linecap: round;
}
body.fi-panel-portal .cxp-department-gauge-ring .cxp-gauge-native {
  stroke: var(--muted-foreground);
  opacity: .65;
}
body.fi-panel-portal .cxp-department-gauge-ring .cxp-scoreboard-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: .3rem;
  margin: 0;
  font-size: clamp(.72rem, 1.2vw, .92rem);
  line-height: 1.08;
}
body.fi-panel-portal .cxp-department-gauge-grade {
  color: var(--muted-foreground);
  font-size: .68rem;
  line-height: 1.2;
  text-transform: capitalize;
}
body.fi-panel-portal .cxp-dashboard-account-stats {
  margin-top: 1rem;
}
body.fi-panel-portal .cxp-aeo-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 1rem;
  align-items: center;
}
body.fi-panel-portal .cxp-tools-list {
  margin-top: 1rem;
}
@media (max-width: 1100px) {
  body.fi-panel-portal .cxp-scoreboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  body.fi-panel-portal .cxp-scoreboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.fi-panel-portal .cxp-aeo-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.fi-panel-portal .cxp-aeo-summary .kt-btn {
    grid-column: 1 / -1;
    justify-self: start;
  }
}
@media (max-width: 390px) {
  body.fi-panel-portal .cxp-scoreboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body.fi-panel-portal .cxp-department-tabs a {
    flex: 1 1 100%;
  }
}  /* close @media (max-width: 390px) - was missing; the file used to end
      here so browsers auto-closed it at EOF, but it silently swallowed every
      rule appended afterwards. Fixed 2026-08-14. */
/* ============================================================================
   Playbook knowledge tables on phones (2026-08-14).

   Owner's standing rule: a table that genuinely overflows and needs sideways
   dragging is a BROKEN layout, not a scrollable one. The portal got its
   version of this fix on 2026-08-11 (cxp.css, scoped to body.fi-panel-portal);
   the admin Playbook pages never did.

   Measured at 390px (content width 274px) before choosing the fix, on both
   /playbook/pestcontrol and /playbook/garage - the five-column knowledge table
   (Learning | Evidence | Source | Confidence | Hits) rendered 604-1080px wide
   inside a 274px card on every category section.

   Wrapping alone is NOT proportionate here the way it was in the portal: the
   Evidence column carries full provenance sentences, so five columns sharing
   274px would produce five columns of near-vertical text. On a phone the row
   reads as a record, not as a grid - so the row becomes a stacked block:
   the learning, its evidence beneath it, then the tier badge, confidence and
   hit count on one meta line. No horizontal scroller, nothing dropped.

   Desktop is untouched (this is a max-width query only). The x-show search
   filter still works: Alpine writes `display:none` inline on the <tr>, which
   outranks the `display:block` below, so filtered rows stay hidden.
   ============================================================================ */
@media (max-width: 600px) {
  .pb-data-table,
  .pb-data-table thead,
  .pb-data-table tbody,
  .pb-data-table tr,
  .pb-data-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .pb-data-table { table-layout: fixed; }
  .pb-data-table thead { display: none; }

  .pb-data-table tr {
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid var(--border);
  }
  .pb-data-table tr:last-child { border-bottom: 0; }

  .pb-data-table td {
    border: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Learning */
  .pb-data-table td:nth-child(1) {
    font-size: var(--text-sm);
    line-height: 1.4;
  }
  /* Evidence */
  .pb-data-table td:nth-child(2) { margin-top: 0.2rem; }

  /* Tier badge, confidence and hits share one meta line under the record. */
  .pb-data-table td:nth-child(3),
  .pb-data-table td:nth-child(4),
  .pb-data-table td:nth-child(5) {
    display: inline-block;
    width: auto;
    margin: 0.4rem 0.6rem 0 0;
    vertical-align: middle;
  }
  .pb-data-table td:nth-child(5) { margin-right: 0; }
  /* The Hits number loses its header when the head row is hidden, so restate it. */
  .pb-data-table td:nth-child(5)::before {
    content: 'seen \00D7';
    font-size: var(--text-2xs);
  }
}

/* The history timeline row is the last sideways-dragger on phones: the
   timestamp column is nowrap with an 8.5rem floor, which alone is wider than
   a 234px card leaves for the summary beside it. Stack it above the body
   instead of scrolling the row (measured 502px inside 234px at 390). */
@media (max-width: 600px) {
  .pb-history-row {
    display: block;
    padding-inline: 0.1rem;
  }
  .pb-history-ts {
    display: block;
    min-width: 0;
    white-space: normal;
    margin-bottom: 0.15rem;
  }
  .pb-history-body { overflow-wrap: anywhere; word-break: break-word; }
}

/* The pinned/featured competitor row is its own grid and holds exactly the 2-3
   brands a vertical is benchmarked against. Sharing the roster grid's
   auto-fill left it laying 3 cards into a 6-track row and stranding half the
   width empty - the owner-named stretched-barren defect. auto-fit
   collapses the empty tracks so the featured cards fill the row and read as a
   deliberate featured tier above the compact roster below. (2026-08-14) */
.pb-comp-grid-pin {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* Long brand names carry a parenthesised domain; let it wrap rather than clip. */
.pb-comp-pin > div:first-child > span:last-child {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Portal rankings: keep Search Console evidence separate from the full
   tracked-term history so their populations cannot be mistaken for one
   another. (CYT-635) */
.cxp-rankings-block { display: grid; gap: 1rem; margin-block: 1rem; }
.cxp-rankings-block-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cxp-rankings-block-heading p { max-width: 70rem; margin: .35rem 0 0; }
.cxp-rankings-block-heading-toolbar { align-items: center; }
.cxp-chart-toolbar { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.cxp-chart-toolbar .kt-btn { white-space: nowrap; }
.cxp-rankings-band-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cxp-rankings-band-card, .cxp-rankings-footprint-card { min-width: 0; padding: 1.25rem; }
/* CYT-874: was a side-by-side flex row (label hard left, value hard
   right) - the layout-economy audit flagged this as a dead horizontal
   gap on every card. Stacked to match the sibling .cxp-rankings-stat
   tiles on this same page (label above, value below), removing both
   the wasted gap and a second component pattern for the same role. */
.cxp-rankings-band-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.cxp-rankings-band-head span, .cxp-rankings-footprint-label { color: var(--muted-foreground); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cxp-rankings-band-head strong { display: block; color: var(--foreground); font-size: 1.55rem; line-height: 1.1; margin-top: .5rem; }
.cxp-rankings-band-copy, .cxp-rankings-footprint-copy { color: var(--muted-foreground); font-size: var(--text-sm); line-height: 1.45; margin-top: .6rem; }
.cxp-rankings-band-chart { display: block; width: 100%; height: 5.25rem; margin-top: .75rem; overflow: visible; }
.cxp-rankings-grid-line { stroke: var(--border); stroke-width: .8; vector-effect: non-scaling-stroke; }
/* CYT-843: this used a fixed stroke-dasharray/stroke-dashoffset "line draw"
   reveal sized for one assumed rendered path length. vector-effect:
   non-scaling-stroke keeps the dash length in device pixels regardless of how
   much this 100x100 viewBox gets scaled up to fill a card, so on every card
   wider than ~160px the dash pattern repeated mid-path - rendering as two (or
   more) disconnected segments with a gap, not a solid line. Fade-in instead:
   it reads the same as a reveal but never depends on the path's rendered
   length. */
.cxp-rankings-band-line { fill: none; stroke: var(--primary); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: cxp-rankings-draw .5s ease-out forwards; }
.cxp-rankings-band-meta { display: block; color: var(--muted-foreground); font-size: var(--text-2xs); line-height: 1.35; margin-top: .55rem; }
.cxp-rankings-tone-good { color: var(--color-green-500); }
.cxp-rankings-footprint-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cxp-rankings-footprint-value { display: block; color: var(--foreground); font-size: 1.8rem; line-height: 1.1; margin-top: .5rem; }
.cxp-rankings-sparkline { display: block; width: 100%; height: 2.4rem; margin-top: .55rem; }
.cxp-rankings-sparkline polyline { fill: none; stroke: var(--primary); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.cxp-rankings-stat { min-width: 0; padding: 1.25rem; }
.cxp-rankings-stat-head { display: flex; align-items: center; min-height: 1.2rem; }
.cxp-rankings-stat-value { display: block; color: var(--foreground); font-size: 1.55rem; line-height: 1.1; margin-top: .65rem; }
.cxp-rankings-stat-delta { display: block; color: var(--muted-foreground); font-size: var(--text-xs); line-height: 1.4; margin-top: .45rem; }
.cxp-rankings-stat-caption { display: block; color: var(--muted-foreground); font-size: 0.75rem; line-height: 1.4; margin-top: .35rem; }
@keyframes cxp-rankings-draw { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cxp-rankings-band-line { animation: none; opacity: 1; } }
@media (max-width: 800px) {
  .cxp-rankings-block-heading, .cxp-rankings-block-heading-toolbar, .cxp-rankings-footprint-toolbar { display: grid; }
  .cxp-chart-toolbar { justify-content: flex-start; }
  .cxp-rankings-band-grid, .cxp-rankings-footprint-grid { grid-template-columns: 1fr; }
}

/* === CYT-802: canonical portal tabs (CYT-846: restored button/pill look,
   corrected 2026-09-01 - see round 2 below) ==
   .sb-tabs-line stays the Style Book's line-tab treatment for genuine
   page-level filters/period switches (e.g. reviews.blade.php, admin
   leadtracking) - untouched here.

   .cxp-map-tabs and .cxp-live-tabs are a DIFFERENT pattern: they switch
   between whole content sections on a page (Recent work / What's next /
   Keywords / Articles..., Live now / Your team / ...), not a period filter.
   CYT-802 collapsed them into the line-tab treatment along with sb-tabs-line,
   which read to Adir as "the buttons disappeared app-wide" - correct, they
   did: every cxp-map-tabs/cxp-live-tabs strip on every portal page lost its
   pill/button look at once, because it's one canonical rule, which also means
   fixing it here fixes it everywhere without going back to per-page CSS. */
body.fi-panel-portal.fi-panel-portal .sb-tabs-line.sb-tabs-line.sb-tabs-line {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  align-content: flex-start;
  gap: 1.25rem !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: start !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  list-style: none;
}

body.fi-panel-portal.fi-panel-portal .sb-tabs-line.sb-tabs-line.sb-tabs-line > .sb-tab-line {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 0 -1px !important;
  padding: .5rem .125rem !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--muted-foreground) !important;
  font-family: inherit !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  line-height: 1.25 !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}

body.fi-panel-portal.fi-panel-portal .sb-tabs-line.sb-tabs-line.sb-tabs-line > .sb-tab-line:hover,
body.fi-panel-portal.fi-panel-portal .sb-tabs-line.sb-tabs-line.sb-tabs-line > .sb-tab-line:focus-visible {
  background: transparent !important;
  background-image: none !important;
  color: var(--foreground) !important;
  outline: 2px solid var(--ring) !important;
  outline-offset: 2px !important;
}

body.fi-panel-portal.fi-panel-portal .sb-tabs-line.sb-tabs-line.sb-tabs-line > .sb-tab-line.active,
body.fi-panel-portal.fi-panel-portal .sb-tabs-line.sb-tabs-line.sb-tabs-line > .sb-tab-line[aria-selected="true"] {
  background: transparent !important;
  background-image: none !important;
  border-bottom-color: var(--primary) !important;
  box-shadow: none !important;
  color: var(--primary) !important;
}

@media (max-width: 640px) {
  body.fi-panel-portal.fi-panel-portal .sb-tabs-line.sb-tabs-line.sb-tabs-line {
    gap: .5rem 1rem !important;
  }

  body.fi-panel-portal.fi-panel-portal .sb-tabs-line.sb-tabs-line.sb-tabs-line > .sb-tab-line {
    min-height: 44px !important;
    padding-inline: .25rem !important;
  }
}

/* === CYT-846 round 2 (2026-09-01): .cxp-map-tabs / .cxp-live-tabs button
   restore, corrected.

   Round 1 (same day, earlier) fixed the SHAPE - a bordered box with real
   buttons instead of bare underlined links - but painted it with neutral
   var(--muted)/var(--background) tokens. Adir's read: "very poor design...
   just grayish", "put it back as it used to be", and he named the source
   himself: "we have a demo theme and playbook theme" - the Style Book /
   in-app design system, not a colour invented for this fix.

   This IS that restore, verified against three independent things that all
   agree:
   1. The PRE-CYT-802 component (this file's own history, cxp.css's
      .cxp-map-tabs.is-active rule): solid fill + foreground text on the
      active tab, not a neutral background.
   2. The Style Book's own kt-btn-primary component (style-book/_buttons.
      blade.php: "kt-btn kt-btn-primary" = the app's one canonical branded
      button) resolves, in THIS panel, through cxs-skin.css's per-client skin
      remap to that client's actual accent colour - never a hardcoded value.
   3. --portal-primary-fill / --portal-primary-foreground (the exact tokens
      the pre-CYT-802 component used) are remapped by that same cxs-skin.css
      skin layer to var(--cxs-a) (this client's accent) and white - i.e.
      restoring the ORIGINAL token pair automatically restores the ORIGINAL
      look, and automatically stays correct for every other client's skin
      color, because it reads the same skin tokens every primary button on
      the page already reads. Nothing here is a new invented colour - every
      value is a token already used elsewhere in this exact file/skin.

   The repeated selectors are deliberate - cxs-skin.css is generated and
   loaded after this sheet, and the extra specificity keeps its rules from
   silently taking the portal back over. */
/* CYT-862 (2026-09-02): gap bumped .25rem (4px) -> .75rem (12px) - two painted boxes 4px apart read as touching the instant one paints on hover/active; 8px is the measured floor, 12px chosen for this box height. Same bump applied to the mobile media-query copy below. */
body.fi-panel-portal.fi-panel-portal .cxp-map-tabs.cxp-map-tabs.cxp-map-tabs,
body.fi-panel-portal.fi-panel-portal .cxp-live-tabs.cxp-live-tabs.cxp-live-tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .75rem !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  justify-self: start !important;
  margin: 0 !important;
  padding: .25rem !important;
  border: 1px solid var(--border) !important;
  border-radius: .65rem !important;
  background: var(--card) !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  list-style: none;
}

/* The AI pages put a tab row beside an optional inline action. Keep that row
   content-sized too; flex-basis still lets it give room back to the action. */
body.fi-panel-portal.fi-panel-portal .cxp-ai-tabs-actions .cxp-map-tabs.cxp-map-tabs.cxp-map-tabs {
  flex: 0 1 auto !important;
}

body.fi-panel-portal.fi-panel-portal .cxp-map-tabs.cxp-map-tabs.cxp-map-tabs > button,
body.fi-panel-portal.fi-panel-portal .cxp-map-tabs.cxp-map-tabs.cxp-map-tabs > a,
body.fi-panel-portal.fi-panel-portal .cxp-live-tabs.cxp-live-tabs.cxp-live-tabs > button {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: .55rem .8rem !important;
  border: 0 !important;
  border-radius: .45rem !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--muted-foreground) !important;
  font-family: inherit !important;
  font-size: .8125rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

body.fi-panel-portal.fi-panel-portal .cxp-map-tabs.cxp-map-tabs.cxp-map-tabs > button:hover,
body.fi-panel-portal.fi-panel-portal .cxp-map-tabs.cxp-map-tabs.cxp-map-tabs > a:hover,
body.fi-panel-portal.fi-panel-portal .cxp-live-tabs.cxp-live-tabs.cxp-live-tabs > button:hover {
  background: var(--muted) !important;
  background-image: none !important;
  color: var(--foreground) !important;
}

body.fi-panel-portal.fi-panel-portal .cxp-map-tabs.cxp-map-tabs.cxp-map-tabs > button:focus-visible,
body.fi-panel-portal.fi-panel-portal .cxp-map-tabs.cxp-map-tabs.cxp-map-tabs > a:focus-visible,
body.fi-panel-portal.fi-panel-portal .cxp-live-tabs.cxp-live-tabs.cxp-live-tabs > button:focus-visible {
  background: var(--muted) !important;
  background-image: none !important;
  color: var(--foreground) !important;
  outline: 2px solid var(--ring) !important;
  outline-offset: 2px !important;
}

/* The active tab: the actual "nice button" - the SAME accessibility-audited
   brand gradient as the sidebar's active nav item, kt-btn-primary, and the
   footer Support/Message CTAs (cxs-skin.css "PORTAL ACCESSIBILITY PASS"
   block, --cxs-grad-ink - a version of the brand gradient darkened enough
   for AA-contrast white text, measured 5.08/5.08/5.07:1). That file even
   already lists a single-class ".cxp-map-tabs > button.is-active" in the
   same selector group - this rule's only job is to stop this file's own
   higher-specificity selectors from silently out-ranking it and falling
   back to a flat, ungraded fill. var(--portal-primary-fill) stays as the
   fallback for the rare case --cxs-grad-ink is not defined. */
body.fi-panel-portal.fi-panel-portal .cxp-map-tabs.cxp-map-tabs.cxp-map-tabs > button.is-active,
body.fi-panel-portal.fi-panel-portal .cxp-map-tabs.cxp-map-tabs.cxp-map-tabs > button[aria-selected="true"],
body.fi-panel-portal.fi-panel-portal .cxp-map-tabs.cxp-map-tabs.cxp-map-tabs > a.active,
body.fi-panel-portal.fi-panel-portal .cxp-map-tabs.cxp-map-tabs.cxp-map-tabs > a[aria-selected="true"],
body.fi-panel-portal.fi-panel-portal .cxp-live-tabs.cxp-live-tabs.cxp-live-tabs > button.is-active,
body.fi-panel-portal.fi-panel-portal .cxp-live-tabs.cxp-live-tabs.cxp-live-tabs > button[aria-selected="true"] {
  background: var(--cxs-grad-ink, var(--portal-primary-fill)) !important;
  background-image: var(--cxs-grad-ink, none) !important;
  border-bottom: 0 !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .18) !important;
  color: var(--portal-primary-foreground) !important;
}

body.fi-panel-portal.fi-panel-portal .cxp-map-tabs.cxp-map-tabs.cxp-map-tabs > button.is-active:focus-visible,
body.fi-panel-portal.fi-panel-portal .cxp-map-tabs.cxp-map-tabs.cxp-map-tabs > button[aria-selected="true"]:focus-visible,
body.fi-panel-portal.fi-panel-portal .cxp-live-tabs.cxp-live-tabs.cxp-live-tabs > button.is-active:focus-visible,
body.fi-panel-portal.fi-panel-portal .cxp-live-tabs.cxp-live-tabs.cxp-live-tabs > button[aria-selected="true"]:focus-visible {
  outline: 2px solid var(--ring) !important;
  outline-offset: 2px !important;
}

@media (max-width: 640px) {
  body.fi-panel-portal.fi-panel-portal .cxp-map-tabs.cxp-map-tabs.cxp-map-tabs,
  body.fi-panel-portal.fi-panel-portal .cxp-live-tabs.cxp-live-tabs.cxp-live-tabs {
    gap: .75rem !important;
  }

  body.fi-panel-portal.fi-panel-portal .cxp-map-tabs.cxp-map-tabs.cxp-map-tabs > button,
  body.fi-panel-portal.fi-panel-portal .cxp-map-tabs.cxp-map-tabs.cxp-map-tabs > a,
  body.fi-panel-portal.fi-panel-portal .cxp-live-tabs.cxp-live-tabs.cxp-live-tabs > button {
    min-height: 44px !important;
    padding-inline: .6rem !important;
  }
}
/* CYT-635: keep the dense history table and chart labels inside their
   measured column/card widths. The portal surface must fit without a page
   within a page or a horizontal drag affordance. */
body.fi-panel-portal .cxp-rankings-chart-labels {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
body.fi-panel-portal .cxp-rankings-keyword-table .cxp-col-hist,
body.fi-panel-portal .cxp-rankings-keyword-table .cxp-col-now {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
body.fi-panel-portal .cxp-rankings-keyword-table .cxp-rankings-position-stack {
  box-sizing: border-box;
  display: flex;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  overflow: hidden;
}
body.fi-panel-portal .cxp-rankings-keyword-table .cxp-rankings-position-stack > * {
  box-sizing: border-box;
  width: 100%;
  min-width: 0 !important;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
@media (max-width: 600px) {
  body.fi-panel-portal .cxp-rankings-chart-labels {
    padding: 0 .75rem 1rem 5.2rem !important;
  }
}

/* === PORTAL-TYPE-FLOOR-2026-08-18 =====================================
   `--text-2xs` is defined in tokens.css as 0.6875rem = 11px, which is BELOW
   the house 12px minimum type size, and it is used ~40 times across five
   stylesheets. Measured on /portal/rankings at 390: six visible
   `.cxp-rankings-band-meta` elements rendered real customer-facing text
   ("Measured Aug 18, 2026", "from 56 over 30 days - measured ...") at 11px in
   grey rgb(102,112,133).

   Fixing the individual rule would leave the other ~39 uses one edit away from
   the same violation, so the floor is raised at the token instead. Scoped to
   the portal panel deliberately: `tokens.css` is shared with the admin app and
   this is not the moment to change type sizing there without QA.

   0.75rem = 12px = --text-xs, so this collapses 2xs into the floor rather than
   inventing a new size.
   ============================================================ */
body.fi-panel-portal {
  --text-2xs: 0.75rem;
}

/* CYT-656 portal chrome. The footer lives in the main column, so on desktop
   reclaim the sidebar gutter while leaving the mobile fixed-sidebar layout
   untouched. The measured variable is set by the portal topbar script. */
/* Footer width override removed 2026-08-18: both the JS-variable hack and a
   100vw full-bleed measured WORSE than the default. cxp.css loads after this
   file, so its `width: 100%` wins on equal specificity anyway - the override
   was never taking effect as written. The footer now spans its content column
   edge to edge with no inset, which is what "side to side" means here. */

body.fi-panel-portal .cxp-portal-footer-support {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .8rem;
  border: 1px solid color-mix(in oklab, var(--primary) 70%, var(--border));
  border-radius: var(--radius-md);
  background: var(--primary);
  /* NOT var(--primary-foreground): that token is tuned for the BRIGHT
     --portal-primary-fill (#00E676, used by buttons/active-nav, dark text is
     correct there). This button fills with the darker --portal-primary
     (#007A3D) instead, where the same dark token measures 3.43:1 - white is
     the correct foreground for this specific darker fill. */
  color: #fff !important;
  font-weight: var(--font-weight-semibold);
  text-decoration: none !important;
  white-space: nowrap;
}
body.fi-panel-portal .cxp-portal-footer-support:hover,
body.fi-panel-portal .cxp-portal-footer-support:focus-visible {
  background: color-mix(in oklab, var(--primary) 88%, #000);
  color: #fff !important;
  text-decoration: none !important;
}
.cxp-portal-footer-support-led {
  width: .45rem;
  height: .45rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 2px color-mix(in oklab, currentColor 24%, transparent);
  animation: cxp-footer-support-pulse 2.4s ease-in-out infinite;
}
@keyframes cxp-footer-support-pulse {
  0%, 100% { opacity: .62; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.12); }
}
body.fi-panel-portal .cxp-keywords-searches-header {
  text-align: left !important;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .cxp-portal-footer-support-led { animation: none; }
}
@media (max-width: 1023px) {
  body.fi-panel-portal .cxp-portal-footer {
    width: 100%;
    margin-left: 0;
  }
}
/* QA 2026-09-03 round 5 @390: a wrapped .cx-glass-pill sat 9px right of the title edge (its own padding on a transparent box). Zero the left padding when the header wraps. */
@media (max-width: 640px) { .cx-glass-h .cx-glass-pill { padding-left: 0; } }