/* My Sites dashboard shell, chart cards, table card, Analytics view.
   Loaded last on dashboard.html. The page's inline <style> keeps the cool token
   block for the modals and panels outside the shell; this sheet redeclares the
   homepage's warm tokens (css/styles.css) on .dash-shell, so everything inside
   the shell renders in that palette on the cream canvas. It also carries the
   shell layout, the toolbar, the table card with its rows (a grid at every width;
   the ranges below 1366px drop columns), the three chart cards, the Analytics view,
   the account popover, the tutorial dialog, the Email & Data Settings dialog and the toast. The inline kebab-menu and flat
   button rules stay in dashboard.html and are overridden from here. */

.dash-shell {
    --dash-font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --dash-sidebar-w: 248px;
    --dash-topbar-h: 64px;
    --dash-glass: rgba(255, 255, 255, 0.88);            /* builder.css .builder-header */
    --dash-glass-border: rgba(45, 125, 125, 0.12);
    --dash-teal-tint: rgba(45, 125, 125, 0.08);
    --dash-teal-tint-strong: rgba(45, 125, 125, 0.14);
    --dash-coral-tint: rgba(255, 107, 107, 0.14);
    --dash-coral-text: #B5402F;
    /* the row grid from 1366px: select, Site, Status, Trend, Last Updated, Actions (the ranges below override it) */
    --dash-row-cols: 32px minmax(240px, 1.5fr) minmax(132px, 1fr) minmax(144px, 1fr) minmax(104px, 1fr) 268px;
    /* the homepage's warm tokens (css/styles.css :root), scoped to the shell */
    --bg-primary: #FFFCF7;
    --bg-secondary: #F5F0E8;
    --bg-tertiary: #EDE6DB;
    --text-primary: #3D3229;
    --text-secondary: #6B5D50;
    --text-tertiary: #9A8B7A;
    --border-color: rgba(45, 125, 125, 0.15);
    --shadow-sm: 0 1px 3px rgba(61, 50, 41, 0.06), 0 1px 2px rgba(61, 50, 41, 0.04);
    --shadow-md: 0 6px 20px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.05);
    --shadow-lg: 0 16px 48px rgba(45, 125, 125, 0.12), 0 6px 16px rgba(61, 50, 41, 0.06);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    position: relative;
    z-index: 1;                                          /* above the fixed .gradient-bg (z 0), under the grain */
    display: flex;
    align-items: stretch;
    min-height: 100vh;
    font-size: 16px;
    color: var(--text-primary);
}

.dash-shell [hidden] { display: none !important; }

/* ── canvas: the builder's new-site screen (cream) with the homepage orbs at the homepage's
   strength (css/styles.css .gradient-bg, breathing 1 → 0.7; reduced motion holds them still below) ── */

/* ── sidebar ── */
.dash-sidebar {
    position: sticky;
    top: 0;
    flex: 0 0 var(--dash-sidebar-w);
    width: var(--dash-sidebar-w);
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 12px 16px;
    box-sizing: border-box;
    background: var(--dash-glass);
    border-right: 2px solid var(--dash-glass-border);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    overflow-y: auto;
}
.dash-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    color: var(--primary-color);
    text-decoration: none;
    font-family: var(--dash-font-display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
}
.dash-brand .logo-img { height: 30px; width: auto; display: block; }
.dash-brand:hover { opacity: 0.85; }
.dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dash-nav-label {
    margin: 8px 12px 3px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.dash-nav-label:first-child { margin-top: 2px; }
.dash-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 37px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}
.dash-nav-item svg { flex: 0 0 18px; color: var(--text-tertiary); }
.dash-nav-item:hover { background: var(--dash-teal-tint); color: var(--text-primary); }
.dash-nav-item:hover svg { color: var(--primary-color); }
.dash-nav-item.active {
    background: var(--dash-teal-tint-strong);
    color: var(--primary-color-dark);
    font-weight: 600;
}
.dash-nav-item.active svg { color: var(--primary-color); }
.dash-nav-library { min-height: 34px; font-size: 15px; }
.dash-nav-divider { height: 1px; margin: 8px 10px; background: var(--dash-glass-border); }
/* the All Sites row: the folder button plus a caret button laid over its right end that opens and
   closes the four folders indented under it (a button cannot sit inside a button) */
.dash-nav-row { position: relative; }
.dash-nav-row .dash-nav-item { padding-right: 40px; }
.dash-nav-group-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: auto 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
}
.dash-nav-group-toggle:hover { background: var(--dash-teal-tint-strong); color: var(--primary-color-dark); }
.dash-nav-group-caret { flex: 0 0 14px; transition: transform var(--duration-fast) var(--ease-snappy); }
.dash-nav-group-toggle[aria-expanded="true"] .dash-nav-group-caret { transform: rotate(180deg); }
.dash-nav-group { display: flex; flex-direction: column; gap: 2px; }
.dash-nav-group .dash-nav-item { padding-left: 40px; }

/* the two sidebar cards: growth services (teal) and Share Your Site */
.dash-sidebar-cards { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 2px; }
.dash-promo, .dash-cta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border-radius: var(--radius-md);
    box-sizing: border-box;
}
.dash-promo {
    gap: 12px;
    background: linear-gradient(150deg, #236060 0%, #2D7D7D 55%, #4A9B9B 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(45, 125, 125, 0.28);
}
.dash-promo-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dash-promo-icon {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.dash-promo h3, .dash-cta h3 {
    margin: 0;
    font-family: var(--dash-font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.dash-promo h3 { font-size: 15px; min-width: 0; }
.dash-cta p { margin: 0; font-size: 14px; line-height: 1.45; }
.dash-promo-btn, .dash-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 6px 10px;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}
.dash-promo-btn {
    margin-top: 0;
    background: #fff;
    color: var(--primary-color-dark);
    border: 2px solid #fff;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.18);
}
.dash-promo-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.18); }
.dash-promo-btn:active { transform: translate(3px, 3px); box-shadow: none; }
.dash-cta {
    background: #fff;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}
.dash-cta p { color: var(--text-secondary); }
.dash-cta-btn {
    background: linear-gradient(135deg, #2D7D7D 0%, #4A9B9B 100%);
    color: #fff;
    border: 2px solid #2D7D7D;
    box-shadow: 3px 3px 0 #6B7280;
}
.dash-cta-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #6B7280; }
.dash-cta-btn:active { transform: translate(3px, 3px); box-shadow: none; }

/* ── main column and top bar ── */
.dash-main-col {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.dash-topbar {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: var(--dash-topbar-h);
    padding: 10px 24px;
    box-sizing: border-box;
    background: var(--dash-glass);
    border-bottom: 2px solid var(--dash-glass-border);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}
.dash-topbar-title { flex: 0 1 auto; min-width: 0; }
.dash-topbar-title h1 {
    margin: 0;
    font-family: var(--dash-font-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    white-space: nowrap;
}
/* the account-level Prompt usage: plain text over a 4px bar, no pill; pushed right next to the actions */
.dash-prompt-usage {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.dash-prompt-usage-line { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
#chatUsageText { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dash-prompt-usage-upgrade {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary-color);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.dash-prompt-usage-upgrade:hover { text-decoration: underline; }
.dash-prompt-usage-track { height: 4px; border-radius: 999px; background: var(--bg-tertiary); overflow: hidden; }
.dash-prompt-usage-bar { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary-color), #4A9B9B); transition: width 0.6s; }
.dash-prompt-usage[hidden] + .dash-topbar-actions { margin-left: auto; }
.dash-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
}
.dash-topbar-actions .dashboard-action-btn {
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 15px;
}
.dash-account { position: relative; flex: 0 0 auto; }
.dash-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 8px 0 12px;
    border: 1px solid rgba(45, 125, 125, 0.3);
    border-radius: 999px;
    background: #fff;
    color: var(--text-primary);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    box-sizing: border-box;
}
.dash-account-btn:hover { background: var(--dash-teal-tint); border-color: rgba(45, 125, 125, 0.45); }
.dash-account-btn[aria-expanded="true"] { background: var(--dash-teal-tint-strong); }
.dash-account-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2D7D7D 0%, #4A9B9B 100%);
    color: #fff;
    font-family: var(--dash-font-display);
    font-size: 15px;
    font-weight: 700;
    flex: 0 0 30px;
}
.dash-account-caret { color: var(--text-tertiary); }
.dash-account-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(320px, calc(100vw - 24px));
    max-height: calc(100dvh - 144px);          /* clear of the support launcher pinned bottom-right */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 210;
}
.dash-account-menu-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-tertiary);
}
.dash-account-menu-head strong { font-size: 15px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.dash-account-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.dash-account-menu-item svg { color: var(--text-secondary); }
.dash-account-menu-item:hover { background: var(--dash-teal-tint); color: var(--primary-color-dark); }
/* the account menu's navigation: the sidebar's folders and library, shown at 1100px and below only */
.dash-account-nav { display: none; flex-direction: column; gap: 2px; padding-top: 4px; }
.dash-account-nav .dash-nav-item { min-height: 40px; }
.dash-account-nav .dash-nav-label:first-child { margin-top: 6px; }

.dash-main {
    flex: 1 0 auto;
    width: 100%;
    padding: 24px 24px 8px;
    box-sizing: border-box;
    min-width: 0;
}
#sitesContainer, .sharing-section, #patchNotesSection { scroll-margin-top: calc(var(--dash-topbar-h) + 12px); }
.dash-main-col .dashboard-footer { padding: 16px 20px 28px; }

/* ── the three chart cards ── */
.dash-charts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 14px;
}
.dash-chart-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 14px 18px 12px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
}
.dash-chart-card.is-link { cursor: pointer; transition: box-shadow var(--duration-med) var(--ease-snappy), border-color var(--duration-med) var(--ease-snappy), transform var(--duration-med) var(--ease-snappy); }
.dash-chart-card.is-link:hover { border-color: rgba(45, 125, 125, 0.35); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.dash-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dash-chart-label { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); }
.dash-chart-value {
    font-family: var(--dash-font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.dash-chart-pill { display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: 13px; color: var(--text-tertiary); }
.dash-summary-vs { color: var(--text-tertiary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-chart-failed { display: flex; align-items: center; height: var(--dash-chart-h, 130px); font-size: 14px; color: var(--text-tertiary); }

/* one line chart: y labels on the left, the plot, x labels under it */
.dash-chart-wrap {
    --dash-chart-h: 130px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: var(--dash-chart-h) auto;
    column-gap: 8px;
    margin-top: 6px;
    min-width: 0;
}
.dash-chart-y { position: relative; grid-row: 1; grid-column: 1; }
.dash-chart-y span {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    font-size: 12px;
    line-height: 1;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dash-chart-plot { position: relative; grid-row: 1; grid-column: 2; height: var(--dash-chart-h); min-width: 0; }
.dash-chart { display: block; width: 100%; height: 100%; overflow: visible; }
.dash-chart-line { stroke: var(--primary-color); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dash-chart-area { fill: rgba(45, 125, 125, 0.10); }
.dash-chart-grid { stroke: rgba(45, 125, 125, 0.16); stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.dash-chart-base { stroke: rgba(45, 125, 125, 0.28); vector-effect: non-scaling-stroke; }
.dash-chart-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(45, 125, 125, 0.25);
    box-sizing: border-box;
}
.dash-chart-x { position: relative; grid-row: 2; grid-column: 2; height: 18px; margin-top: 6px; }
.dash-chart-x span { position: absolute; top: 0; font-size: 12px; line-height: 1; color: var(--text-tertiary); white-space: nowrap; }

/* change pills (cards, ranking) and the muted dash */
.dash-change {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.dash-change.is-up { background: var(--dash-teal-tint-strong); color: var(--primary-color-dark); }
.dash-change.is-down { background: var(--dash-coral-tint); color: var(--dash-coral-text); }
.dash-change.is-flat { background: var(--bg-tertiary); color: var(--text-secondary); }
.dash-muted { color: var(--text-tertiary); }

/* skeletons while the response is on its way */
.dash-skeleton {
    display: inline-block;
    width: 84px;
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--bg-tertiary), var(--bg-secondary), var(--bg-tertiary));
    background-size: 200% 100%;
    animation: dashShimmer 1.2s ease-in-out infinite;
    vertical-align: middle;
}
.dash-skeleton.is-short { width: 48px; }
.dash-skeleton.is-block { display: block; width: 100%; height: var(--dash-chart-h, 130px); border-radius: 12px; }
.dash-charts.is-loading .dash-chart-value .dash-skeleton { width: 72px; height: 26px; }
@keyframes dashShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── buttons: the homepage's tactile recipe (styles.css .btn-primary) and its ghost twin ── */
.site-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 10px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform var(--duration-fast) var(--ease-snappy), box-shadow var(--duration-fast) var(--ease-snappy), background-color var(--duration-fast) var(--ease-snappy);
}
.site-action-btn svg { flex: 0 0 auto; }
.dash-shell .site-action-btn.btn-primary,
.dash-shell .dash-new-site-btn {
    height: 40px;
    padding: 0 10px;                                    /* the inline .site-action-btn.btn-primary rule pads 1rem */
    background: linear-gradient(135deg, #2D7D7D 0%, #4A9B9B 100%);
    color: #fff;
    border: 2px solid #2D7D7D;
    border-radius: 12px;
    box-shadow: 3px 3px 0 var(--dash-btn-shadow, #6B7280);
}
.dash-shell .dash-new-site-btn { padding: 0 16px; }
.dash-shell .site-action-btn.btn-primary:hover,
.dash-shell .dash-new-site-btn:hover {
    background: linear-gradient(135deg, #2D7D7D 0%, #4A9B9B 100%);
    border-color: #2D7D7D;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--dash-btn-shadow, #6B7280);
}
.dash-shell .site-action-btn.btn-primary:active,
.dash-shell .dash-new-site-btn:active {
    transform: translate(3px, 3px);
    box-shadow: none;
    transition-duration: 60ms;
}
/* every other teal button in the shell (empty state, retry, invite Accept, Keep domain) gets the same grey shadow */
.dash-shell .btn-primary { box-shadow: 3px 3px 0 #6B7280; }
.dash-shell .btn-primary:hover { box-shadow: 4px 4px 0 #6B7280; }
.dash-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px;
    background: #fff;
    color: var(--primary-color-dark);
    border: 2px solid rgba(45, 125, 125, 0.25);
    border-radius: 12px;
    box-shadow: 3px 3px 0 rgba(45, 125, 125, 0.15);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform var(--duration-fast) var(--ease-snappy), box-shadow var(--duration-fast) var(--ease-snappy), background-color var(--duration-fast) var(--ease-snappy), border-color var(--duration-fast) var(--ease-snappy);
}
.dash-btn-ghost:hover { background: var(--dash-teal-tint); border-color: rgba(45, 125, 125, 0.45); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(45, 125, 125, 0.15); }
.dash-btn-ghost:active { transform: translate(3px, 3px); box-shadow: none; transition-duration: 60ms; }
.dash-shell .site-details-toggle[aria-expanded="true"],
.dash-shell .site-card-menu-trigger[aria-expanded="true"] { background: var(--dash-teal-tint-strong); border-color: rgba(45, 125, 125, 0.45); }
/* the Site Settings button: the page's inline kebab rule sizes the trigger 40x40 for the old three dots */
.dash-shell .site-action-btn.site-card-menu-trigger {
    width: auto;
    height: 40px;
    display: inline-flex;
    padding: 0 8px 0 10px;
    background: #fff;
    border: 2px solid rgba(45, 125, 125, 0.25);
    border-radius: 12px;
    color: var(--primary-color-dark);
}
.dash-shell .site-action-btn.site-card-menu-trigger:hover { background: var(--dash-teal-tint); border-color: rgba(45, 125, 125, 0.45); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(45, 125, 125, 0.15); }
.dash-shell .site-action-btn.site-card-menu-trigger:active { transform: translate(3px, 3px); box-shadow: none; }

/* ── toolbar ── */
.sites-toolbar { margin-bottom: 10px; }
.sites-toolbar-main { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
/* selection mode: rows are ticked, only Archive / Restore selected and Clear selection show */
.sites-toolbar-main.is-selecting .site-search, .sites-toolbar-main.is-selecting .site-filter,
.sites-toolbar-main.is-selecting .site-sort, .sites-toolbar-main.is-selecting .dash-new-site-btn { display: none; }
.site-selection-clear { gap: 6px; }
.site-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 160px;
    max-width: 320px;
    min-width: 0;
}
.site-search svg { position: absolute; left: 12px; color: var(--text-tertiary); pointer-events: none; }
.site-search input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 38px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 15px;
    color: var(--text-primary);
    box-sizing: border-box;
}
.site-search input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(45, 125, 125, 0.18); }
.site-filter { position: relative; }
.site-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
    color: var(--text-primary);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.site-filter-toggle svg { color: var(--text-tertiary); }
.site-filter-toggle:hover, .site-filter-toggle[aria-expanded="true"] { border-color: rgba(45, 125, 125, 0.45); background: var(--dash-teal-tint); }
.site-filter-toggle.active { border-color: var(--primary-color); color: var(--primary-color-dark); font-weight: 600; }
.site-filter-toggle.active svg { color: var(--primary-color); }
.site-filter-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 240px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 150;
}
.site-filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 15px;
    color: var(--text-primary);
    cursor: pointer;
}
.site-filter-option:hover { background: var(--dash-teal-tint); }
.site-filter-option input { margin: 0; accent-color: var(--primary-color); }
.site-filter-count { margin-left: auto; font-size: 13px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
/* Client Sites: the client strip between the toolbar and the table, All clients then one pill per client name */
.site-client-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.site-client-chip {
    display: inline-block;
    max-width: 100%;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: #fff;
    color: var(--text-secondary);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    box-sizing: border-box;
}
.site-client-chip:hover { border-color: rgba(45, 125, 125, 0.45); background: var(--dash-teal-tint); color: var(--text-primary); }
.site-client-chip.is-active { border-color: var(--primary-color); background: var(--dash-teal-tint-strong); color: var(--primary-color-dark); font-weight: 600; }
.site-sort { position: relative; display: inline-flex; align-items: center; }
.site-sort-icon { display: none; }                 /* the phone's 40px sort box (below 768px) */
#siteSortSelect {
    height: 40px;
    padding: 0 36px 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239A8B7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
#siteSortSelect:hover { border-color: rgba(45, 125, 125, 0.45); }
.site-bulk-btn { height: 40px; }
.dash-new-site-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}
.site-results-empty { padding: 28px 20px; text-align: center; font-size: 15px; color: var(--text-secondary); }

/* ── the table card ── */
.sites-table-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}
.sites-list-header {
    display: grid;
    grid-template-columns: var(--dash-row-cols);
    column-gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--bg-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.sites-list-header [data-col="select"] { display: flex; align-items: center; }
.sites-table-footer {
    padding: 9px 16px;
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--bg-secondary);
    font-size: 13px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.sites-list { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
.site-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-med) var(--ease-snappy), border-color var(--duration-med) var(--ease-snappy);
}
.site-card:hover { box-shadow: var(--shadow-md); border-color: rgba(45, 125, 125, 0.28); }
.pending-site { border-style: dashed; background: #FCFCFD; }
.draft-text { color: var(--text-tertiary); font-style: italic; font-size: 15px; }
/* rows inside a list (the table card, the Shared with me section): hairlines, no card chrome of their own */
.sites-list .site-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.sites-list .site-card:hover { box-shadow: none; border-color: transparent; background: rgba(45, 125, 125, 0.04); }
.sites-list .site-row + .site-row { border-top: 1px solid var(--border-color); }
.sites-list .pending-site { background: transparent; }
#sharedSitesSection .site-row:last-child { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }

/* status, tier and editor badges */
.site-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
}
.site-status-badge::before { content: ''; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.site-status-badge.is-live { background: var(--dash-teal-tint-strong); color: var(--primary-color-dark); }
.site-status-badge.is-setup { background: #F4E8D3; color: #79551F; }
.site-status-badge.is-draft { background: transparent; color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-color); }
/* the plan badge is quiet (outlined) so teal stays for status; Editor and the share badges
   (Shared, Draft sent, Handover pending, beside the name) are filled neutrals; the client badge
   (the client's name, in front of the address on the second line) is the pale teal of the initials */
.site-tier-badge, .site-editor-badge, .site-share-badge, .site-client-badge {
    display: inline-block;
    padding: 0 6px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.02em;
    vertical-align: middle;
    white-space: nowrap;
}
.site-tier-badge { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); }
.site-editor-badge, .site-share-badge { background: var(--bg-tertiary); color: var(--text-secondary); }
.site-client-badge { max-width: 160px; margin-right: 6px; overflow: hidden; text-overflow: ellipsis; background: var(--dash-teal-tint); color: #236060; }

/* the row: a grid at every width, cells in source order (select, Site, Status, Trend, Last Updated,
   Actions); the ranges below 1366px hide the columns they drop, on the row cell and the header cell */
.site-row {
    display: grid;
    grid-template-columns: var(--dash-row-cols);
    column-gap: 12px;
    row-gap: 0;
    min-height: 76px;
    box-sizing: border-box;
    padding: 12px 16px;
    align-items: center;
}
.sites-list .site-row { padding: 12px 16px; }        /* over the ≤768 .site-card padding below */
.site-row-select { display: flex; align-items: center; min-height: 36px; }
.site-row-select:empty { min-width: 0; }
.site-select, .site-select-all { width: 18px; height: 18px; margin: 0; accent-color: var(--primary-color); cursor: pointer; }
.site-row-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.site-thumb {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #AFCACA;                   /* the row sets its own pale fill, text and hairline */
    background: #DDEEEE;
    color: #236060;
    box-sizing: border-box;
    font-family: var(--dash-font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    user-select: none;
}
.site-row-identity { flex: 1 1 auto; min-width: 0; }
.site-row .site-title-row { justify-content: flex-start; align-items: center; gap: 6px; margin-bottom: 2px; min-width: 0; }
.site-row .site-title-row .site-tier-badge, .site-row .site-title-row .site-share-badge, .site-row .site-title-edit-btn { flex: 0 0 auto; }
.site-row .site-subdomain {
    flex: 0 1 auto;
    font-family: var(--dash-font-display);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* a block, not the page's flex row: the ellipsis needs inline content */
.site-row .site-url { display: block; margin-bottom: 0; min-width: 0; font-size: 15px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-row .site-url a { display: inline; font-size: 15px; color: var(--text-secondary); }
.site-row .site-owned-by { color: var(--text-tertiary); }
/* the status as a tag in front of the address, for the widths that drop the Status column (767px and below) */
.site-address-line { display: block; min-width: 0; }
.site-status-tag {
    display: none;
    flex: 0 1 auto;
    max-width: 100%;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;                            /* a tag wider than the line (Spanish "Configurando dominio" at 320px) ellipsizes */
    text-overflow: ellipsis;
    box-sizing: border-box;
}
.site-status-tag::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.site-status-tag.is-live { background: var(--dash-teal-tint-strong); color: var(--primary-color-dark); }
.site-status-tag.is-setup { background: #F4E8D3; color: #79551F; }
.site-status-tag.is-draft { background: transparent; color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-color); }
/* renaming never changes the row's height: one 28px line, the error floats under it */
.sites-list .site-title-inline-edit { position: relative; margin: 0; flex-wrap: nowrap; gap: 6px; min-width: 0; }
.sites-list .site-title-inline-edit input { height: 28px; padding: 0 8px; font-size: 14px; box-sizing: border-box; }
.sites-list .site-title-inline-edit button { height: 28px; padding: 0 8px; box-sizing: border-box; }
.sites-list .site-title-error:empty { display: none; }
.sites-list .site-title-error { position: absolute; top: calc(100% + 2px); left: 0; width: auto; z-index: 2; padding: 2px 6px; background: #fff; border-radius: 6px; box-shadow: var(--shadow-md); white-space: nowrap; }
.site-row-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.site-row-trend { display: flex; align-items: center; min-width: 0; }
.site-row-trend[data-state="loading"] .dash-skeleton { width: 110px; height: 26px; border-radius: 999px; }
.dash-trend-empty { color: var(--text-tertiary); font-size: 15px; padding: 0 6px; }
.site-trend-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}
.site-trend-btn .dash-spark { display: block; color: currentColor; opacity: 0.9; }
.site-trend-btn:hover { border-color: var(--primary-color); color: var(--primary-color-dark); background: var(--dash-teal-tint); }
.site-trend-btn.is-growing { background: var(--dash-teal-tint-strong); color: var(--primary-color-dark); border-color: transparent; }
.site-trend-btn.is-declining { background: var(--dash-coral-tint); color: var(--dash-coral-text); border-color: transparent; }
.site-trend-btn.is-stable { background: var(--bg-tertiary); color: var(--text-secondary); border-color: transparent; }
.site-trend-btn.is-low, .site-trend-btn.is-none { color: var(--text-tertiary); font-weight: 600; }
.site-row-updated { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.site-row-updated-label { display: none; }           /* the column header names it */
.site-row .site-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    max-width: 268px;
    margin-top: 0;
}
.site-row .site-actions .site-action-btn.btn-primary { --dash-btn-shadow: #A8A29E; }   /* Edit Site: a lighter, warmer shadow */
.site-card-menu-container { position: relative; }
.site-card-menu-caret { width: 10px; height: 10px; margin-left: -1px; color: var(--text-tertiary); }
.sites-list .site-actions .site-details-toggle { position: relative; padding: 0 8px 0 10px; }
/* the dot: a pending handover, a live draft link or a plan paid by the previous owner waits inside the menu */
.site-details-toggle.has-notes::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #FF6B6B;
    border: 2px solid #fff;
    box-sizing: border-box;
}

/* the Site Settings menu: the inline kebab rules stay in dashboard.html, these win */
.dash-shell .site-card-menu-panel {
    min-width: 240px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
}
.site-card-menu-panel.open-left { left: 0; right: auto; }
.dash-shell .site-card-menu-item { padding: 9px 12px; border-radius: 8px; font-size: 15px; color: var(--text-primary); }
.dash-shell .site-card-menu-item svg { color: var(--text-secondary); }
.dash-shell .site-card-menu-item:hover { background: var(--dash-teal-tint); }
.dash-shell .site-card-menu-divider { background: var(--border-color); margin: 6px 0; }
.dash-shell .site-card-menu-group { border-radius: 8px; }
.dash-shell .site-card-menu-group .site-card-menu-item { padding-left: 28px; }
.dash-shell .site-card-menu-danger, .dash-shell .site-card-menu-danger svg { color: var(--dash-coral-text); }
.dash-shell .site-card-menu-danger:hover { background: var(--dash-coral-tint); }
/* notices at the top of the Site Settings menu, and the Domain setup line */
.site-card-menu-notes { display: grid; gap: 6px; padding: 2px 4px 8px; margin-bottom: 6px; border-bottom: 1px solid var(--border-color); }
.site-menu-notice {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    box-sizing: border-box;
}
.site-menu-notice.is-grace { background: rgba(232, 163, 61, 0.16); color: #8A5A10; }
.site-menu-notice.is-handover, .site-menu-notice.is-draft { background: var(--dash-teal-tint); color: var(--primary-color-dark); }
button.site-menu-notice { cursor: pointer; }
button.site-menu-notice:hover { background: var(--dash-teal-tint-strong); }
.dash-shell .site-menu-notice-btn { display: inline-flex; height: auto; margin-top: 6px; padding: 6px 10px; font-size: 13px; }
.site-card-menu-note { padding: 8px 12px; font-size: 13px; line-height: 1.4; color: var(--text-secondary); white-space: normal; overflow-wrap: anywhere; }

/* ── Email & Data Settings: one native dialog, the tutorial's chrome ── */
.dash-dialog {
    width: min(420px, calc(100vw - 24px));
    max-width: none;                             /* the browser caps a modal dialog at 100% - 6px - 2em */
    max-height: min(80dvh, calc(100vh - 48px));
    margin: auto;                                /* styles.css resets margin on everything; this re-centres it */
    padding: 0;
    border: 2px solid #2D7D7D;
    border-radius: 16px;
    background: #fff;
    color: var(--text-primary);
    font-size: 15px;
    box-shadow: 5px 5px 0 #4A9B9B;
    overflow: hidden;
}
.dash-dialog[open] { display: flex; flex-direction: column; }
.dash-dialog::backdrop { background: rgba(44, 62, 80, 0.55); }
.dash-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(45, 125, 125, 0.15); }
.dash-dialog-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-dialog-head h2 { margin: 0; font-family: var(--dash-font-display); font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--text-primary); }
.dash-dialog-site { font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-dialog-close {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(45, 125, 125, 0.3);
    border-radius: 10px;
    background: #fff;
    color: #2D7D7D;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.dash-dialog-close:hover { background: rgba(45, 125, 125, 0.08); }
.dash-dialog-body { display: grid; gap: 12px; padding: 16px 18px 18px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.dash-dialog-section { display: grid; gap: 8px; }
.dash-dialog-divider { height: 1px; background: var(--border-color); }
.dash-dialog-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.dash-dialog .site-notification-email { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.dash-dialog .notif-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.dash-dialog .notif-value.is-unset { color: var(--text-secondary); font-style: italic; }
.dash-dialog .notif-edit-btn {
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    color: var(--primary-color-dark);
    font-size: 14px;
    cursor: pointer;
}
.dash-dialog .notif-edit-btn:hover { background: var(--dash-teal-tint); border-color: rgba(45, 125, 125, 0.45); }
.dash-dialog .notif-inline-edit { margin: 0; gap: 6px; }
.dash-dialog .notif-inline-edit input { height: 36px; padding: 0 10px; border-radius: 10px; font-size: 15px; }
.dash-dialog .notif-inline-edit button { height: 32px; min-width: 32px; padding: 0 8px; border-radius: 8px; font-size: 14px; }
.dash-dialog .notif-inline-edit .notif-error { flex: 1 1 100%; font-size: 12px; color: var(--dash-coral-text); white-space: normal; }
.dash-dialog .notif-inline-edit .notif-error:empty { display: none; }
.dash-dialog .free-lead-usage-card { margin-top: 0; }
.dash-dialog .branded-toggle-row { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--text-primary); }
.dash-dialog .branded-toggle-row label { flex: 1 1 auto; gap: 10px; min-width: 0; font-size: 15px; }
.dash-dialog .toggle-switch { width: 36px; height: 20px; }
.dash-dialog .toggle-slider { background: var(--text-tertiary); border-radius: 10px; }
.dash-dialog .toggle-slider::before { width: 16px; height: 16px; left: 2px; top: 2px; }
.dash-dialog .toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }
.dash-tip {
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
}
.dash-tip:hover, .dash-tip[aria-expanded="true"] { background: var(--dash-teal-tint); color: var(--primary-color-dark); }
.dash-tip-text { margin: -2px 0 0 46px; font-size: 12px; line-height: 1.45; color: var(--text-secondary); }
.dash-dialog-action { width: 100%; height: 40px; }
/* the Client site dialog: one text box (with the account's client names to pick from) and Cancel / Save */
.dash-dialog #siteClientInput {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 15px;
    box-sizing: border-box;
}
.dash-dialog #siteClientInput:focus { outline: none; border-color: #2D7D7D; box-shadow: 0 0 0 3px var(--dash-teal-tint); }
.dash-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ── sections (patch notes, templates, shared, invitations, sharing) ── */
.whats-new-section { border-radius: var(--radius-lg); }
.whats-new-header h2 { font-family: var(--dash-font-display); font-size: 20px; letter-spacing: -0.01em; }
.sharing-section { border-radius: var(--radius-lg); }
.sharing-section-title { font-family: var(--dash-font-display); font-size: 20px; }
.empty-state h2 { font-family: var(--dash-font-display); }
/* the sites request failed after its retries: the same first-site state plus one quiet line */
.empty-state .sites-load-note { margin: 18px 0 0; font-size: 13px; color: var(--text-tertiary); }
.sites-load-retry { font: inherit; font-size: 13px; font-weight: 600; background: none; border: 0; padding: 0; color: var(--primary-color-dark); text-decoration: underline; cursor: pointer; }
/* the Shared with me section is a table card of its own (header + rows) */
#sharedSitesSection .template-section-body {
    padding: 0;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: visible;
}
#sharedSitesSection .sites-list { background: transparent; border: 0; }
/* the section's own padding would make its rows 52px narrower than the table card's */
#sharedSitesSection.whats-new-section.expanded { padding: 20px 0 0; }
#sharedSitesSection .whats-new-header { padding: 0 24px 16px; }
#sharedSitesSection .template-section-body { border: 0; border-top: 1px solid var(--border-color); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
#sharedSitesSection .sites-list-header { border-radius: 0; }

/* ── Analytics view ── */
.dash-analytics { display: grid; gap: 16px; }
.dash-analytics-top { display: flex; }
.dash-back-btn { height: 38px; font-size: 14px; }
.dash-analytics-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
    min-width: 0;
}
.dash-analytics-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.dash-analytics-head h2, .dash-analytics-card > h2 {
    margin: 0;
    font-family: var(--dash-font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}
.dash-analytics-total { margin-left: auto; font-family: var(--dash-font-display); font-size: 24px; font-weight: 700; color: var(--primary-color-dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-metric-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-color); }
.dash-metric-btn {
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.dash-metric-btn.is-active { background: #fff; color: var(--primary-color-dark); box-shadow: var(--shadow-sm); }
.dash-analytics-loading { display: grid; gap: 10px; }
.dash-analytics-error p, .dash-analytics-empty p { margin: 0 0 10px; font-size: 15px; color: var(--text-secondary); }
.dash-ranking-scroll { overflow-x: auto; }
.dash-ranking { width: 100%; border-collapse: collapse; font-size: 15px; }
.dash-ranking th {
    padding: 6px 10px 10px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}
.dash-ranking td { padding: 12px 10px; border-bottom: 1px solid rgba(45, 125, 125, 0.07); vertical-align: middle; }
.dash-ranking tbody tr:last-child td { border-bottom: 0; }
.dash-ranking-row { cursor: pointer; }
.dash-ranking-row:hover td { background: rgba(45, 125, 125, 0.04); }
.dash-ranking-row:focus-visible { outline: none; }
.dash-ranking-row:focus-visible td { background: var(--dash-teal-tint); box-shadow: inset 0 0 0 2px rgba(45, 125, 125, 0.35); }
.dash-ranking-rank { color: var(--text-tertiary); font-variant-numeric: tabular-nums; width: 2.5rem; }
.dash-ranking-name { font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.dash-ranking-num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--dash-font-display); font-weight: 700; }
.dash-ranking th.dash-ranking-num { font-family: inherit; font-weight: 700; }
.dash-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── the switch is off: hide every analytics surface ── */
#dashShell[data-analytics="off"] #dashAnalyticsView { display: none !important; }
#dashShell[data-analytics="off"] .dash-charts { display: none; }
#dashShell[data-analytics="off"] .site-row-trend { visibility: hidden; }
#dashShell[data-analytics="off"] .sites-list-header [data-col="trend"] { visibility: hidden; }

/* ── toast (showToast appends #toast to body; builder.css styles it there, this page here) ── */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000;
    max-width: min(400px, calc(100vw - 32px));
    padding: 14px 18px;
    background: #fff;
    color: #3D3229;
    border: 2px solid #2D7D7D;
    border-radius: 12px;
    box-shadow: 3px 3px 0 #236060;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.toast.success { border-color: #2D7D7D; box-shadow: 3px 3px 0 #236060; }
.toast.error { border-color: #C44735; box-shadow: 3px 3px 0 #9A3324; }
.toast.info { border-color: rgba(45, 125, 125, 0.45); box-shadow: 3px 3px 0 rgba(45, 125, 125, 0.3); }

/* ── Tutorial Videos dialog ── */
.dash-tutorial {
    width: min(640px, calc(100vw - 32px));
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: transparent;
    overflow: visible;
}
.dash-tutorial::backdrop { background: rgba(44, 62, 80, 0.55); }
.dash-tutorial-frame {
    background: #fff;
    border: 2px solid #2D7D7D;
    border-radius: 16px;
    box-shadow: 5px 5px 0 #4A9B9B;
    overflow: hidden;
}
.dash-tutorial-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(45, 125, 125, 0.15); }
.dash-tutorial-head h2 { margin: 0; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 18px; font-weight: 700; color: #3D3229; }
.dash-tutorial-close {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(45, 125, 125, 0.3);
    border-radius: 10px;
    background: #fff;
    color: #2D7D7D;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.dash-tutorial-close:hover { background: rgba(45, 125, 125, 0.08); }
#dashTutorialVideo { display: block; width: 100%; aspect-ratio: 1432 / 720; background: #000; }
.dash-tutorial.is-phone { width: min(420px, calc(100vw - 32px)); }
.dash-tutorial.is-phone #dashTutorialVideo { aspect-ratio: 720 / 1564; height: 68dvh; max-height: 68vh; object-fit: contain; }

/* ── focus, motion ── */
.dash-shell :is(button, a, input, select, [tabindex]):focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.dash-shell input[type="checkbox"]:focus-visible, .dash-shell input[type="radio"]:focus-visible { outline-offset: 1px; }
.dash-nav-item, .dash-account-btn, .site-filter-toggle, .dash-metric-btn, .site-trend-btn {
    transition: background-color var(--duration-fast) var(--ease-snappy), color var(--duration-fast) var(--ease-snappy),
                border-color var(--duration-fast) var(--ease-snappy), box-shadow var(--duration-fast) var(--ease-snappy),
                transform var(--duration-fast) var(--ease-snappy);
}
.dash-nav-item:active, .dash-account-btn:active { transform: translateY(1px) scale(0.98); transition-duration: 60ms; }
@media (prefers-reduced-motion: reduce) {
    .gradient-bg.dash-orbs { animation: none; opacity: 1; }
    .dash-skeleton { animation: none; }
    .dash-shell *:not(.loading-spinner), .toast { transition-duration: 0ms !important; }
    .dash-shell :is(.site-action-btn, .dash-btn-ghost, .dash-new-site-btn, .btn-primary, .dashboard-action-btn, .share-icon-btn, .dash-promo-btn, .dash-cta-btn, .dash-chart-card.is-link, .dash-nav-item, .dash-account-btn):is(:hover, :active) { transform: none !important; }
}

/* ── three chart cards side by side from 768px; phones keep Visits only ── */
@media (min-width: 768px) {
    .dash-charts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .dash-charts > .dash-chart-card:not([data-metric="visits"]) { display: none; }
}

/* ── short windows: the sidebar's cards stay in reach (the sidebar also scrolls) ── */
@media (max-height: 900px) {
    .dash-nav-item { min-height: 34px; }
    .dash-nav-library { min-height: 32px; }
    .dash-cta p { font-size: 13px; }
    .dash-sidebar-cards { gap: 8px; }
}
@media (max-height: 800px) {
    .dash-sidebar { gap: 8px; }
    .dash-nav-label { margin-top: 6px; }
}

/* ── table columns by range. The sidebar (248px) leaves at 1100px, so the 1100-and-below band is
   wider than the 1101-1199 band: 900-1100 shows a column 1101-1199 drops. Dropped columns are
   display:none on the row cell and the header cell, so no implicit track appears. ── */
@media (min-width: 1200px) and (max-width: 1365px), (min-width: 900px) and (max-width: 1100px) {
    .dash-shell { --dash-row-cols: 32px minmax(240px, 1.5fr) minmax(124px, 1fr) minmax(100px, 1fr) 268px; }
    .site-row-trend, .sites-list-header [data-col="trend"] { display: none; }
}
@media (min-width: 1101px) and (max-width: 1199px), (min-width: 768px) and (max-width: 899px) {
    .dash-shell { --dash-row-cols: 32px minmax(0, 1fr) 124px 268px; }
    .site-row-trend, .site-row-updated, .sites-list-header [data-col="trend"], .sites-list-header [data-col="updated"] { display: none; }
}
@media (max-width: 767px) {
    .dash-shell { --dash-row-cols: 32px minmax(0, 1fr) 268px; }
    .site-row-status, .site-row-trend, .site-row-updated,
    .sites-list-header [data-col="status"], .sites-list-header [data-col="trend"], .sites-list-header [data-col="updated"] { display: none; }
    /* the status moves in front of the address; the address sits beside it with 120px of room, under it otherwise */
    .site-address-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
    .site-status-tag { display: inline-block; }
    .site-address-line .site-url { flex: 1 1 120px; }
    .site-address-line.is-draft .site-url { display: none; }
}

/* ── the top bar's Prompt counter gives way before the title does ── */
@media (max-width: 1100px) {
    .dash-prompt-usage-label { display: none; }
}
@media (max-width: 1024px) {
    .dash-prompt-usage-upgrade { display: none; }
    .dash-account-name { max-width: 120px; }
}

/* ── 1100px and below: no sidebar (the account menu carries the navigation), tighter top bar and main ── */
@media (max-width: 1100px) {
    .dash-sidebar { display: none; }
    .dash-account-nav { display: flex; }
    .dash-topbar { padding: 10px 16px; gap: 12px; }
    .dash-main { padding: 16px 16px 8px; }
}

/* ── tablets and phones: the account name hides ── */
@media (max-width: 860px) {
    .dash-account-name { display: none; }
    .dash-account-btn { padding: 0 8px 0 6px; }
}

/* ── the support launcher sits over the bottom of the page on phones and tablets ── */
@media (max-width: 768px) {
    .site-card { padding: 1.25rem; }
    .dash-main { padding-bottom: 96px; }
    .dash-analytics-total { width: 100%; margin-left: 0; }
}

/* ── one toolbar row below 768px: search plus 40px icons (Filter, sort, New Site, Clear selection) ── */
@media (max-width: 767px) {
    .site-search { flex: 1 1 120px; max-width: none; }
    .site-filter-toggle { width: 40px; padding: 0; justify-content: center; }
    .site-filter-toggle span { display: none; }
    .site-sort {
        width: 40px;
        height: 40px;
        justify-content: center;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        background: #fff;
        color: var(--text-tertiary);
    }
    .site-sort:hover { border-color: rgba(45, 125, 125, 0.45); }
    .site-sort:focus-within { outline: 2px solid var(--primary-color); outline-offset: 2px; }
    .site-sort-icon { display: block; }
    /* the native select stays a real control over the icon: a tap opens the picker, Tab reaches it */
    #siteSortSelect { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; }
    .dash-shell .dash-new-site-btn { width: 40px; padding: 0; justify-content: center; margin-left: 0; }
    .dash-new-site-btn span { display: none; }
    .site-selection-clear { width: 40px; padding: 0; justify-content: center; }
    .site-selection-clear span { display: none; }
    .site-filter-toggle svg, .site-sort-icon, .dash-new-site-btn svg, .site-selection-clear svg { flex: 0 0 auto; }
}

/* ── phones ── */
@media (max-width: 640px) {
    .dash-main { padding: 12px 12px 96px; }
    .dash-topbar { padding: 8px 12px 8px 16px; }
    .dash-topbar-actions .dashboard-action-btn { width: 40px; padding: 0; justify-content: center; }
    .dash-topbar-actions .dashboard-action-btn span { display: none; }   /* icon only; the static title and aria-label name it */
    .dash-chart-wrap { --dash-chart-h: 110px !important; }
    .dash-chart-card { padding: 14px 16px 12px; }
    .dash-chart-value { font-size: 24px; }
    .sites-grid { grid-template-columns: 1fr; }
    /* the phone row: checkbox, Site, two 36px icon buttons; 105px of name text at 320px */
    .dash-shell { --dash-row-cols: 18px minmax(0, 1fr) 78px; }
    .sites-list .site-row, .sites-list-header { column-gap: 6px; padding: 10px; }
    .site-row-main { gap: 8px; }
    .site-thumb { flex: 0 0 28px; width: 28px; height: 28px; font-size: 13px; }
    .site-row .site-title-row { gap: 4px; }
    .site-row .site-title-row .site-tier-badge, .site-row .site-title-row .site-share-badge, .site-row .site-url .site-client-badge { display: none; }
    .site-row .site-actions { gap: 6px; }
    .site-row .site-actions .site-action-btn { width: 36px; height: 36px; padding: 0; justify-content: center; }
    .site-row .site-actions .site-action-btn span, .site-row .site-actions .site-card-menu-caret { display: none; }
    /* the Prompt counter takes its own line under the title row */
    .dash-topbar { flex-wrap: wrap; row-gap: 6px; }
    .dash-topbar-actions { margin-left: auto; }
    .dash-prompt-usage { order: 10; flex: 1 1 100%; flex-direction: row; align-items: center; gap: 10px; margin: 0; font-size: 12px; }
    .dash-prompt-usage-track { flex: 1 1 auto; min-width: 60px; }
    .dash-prompt-usage-upgrade:not([hidden]) { display: inline; font-size: 12px; }
    .dash-analytics-card { padding: 16px; }
    .dash-main-col .dashboard-footer { padding: 12px 16px 24px; }
}