/* =====================================================================================================================
   dashboardace  -  dashboards

   One structure, five designs. render.js builds the same DOM for every dashboard; the template on the root element
   (.dash[data-template=...]) decides everything about how it looks - canvas, cards, type, spacing - through the
   custom properties below. The chart palettes live in render.js beside the charts that use them, and every one of
   them was validated for colour vision deficiency against its template's card surface.

   A dashboard ignores the site's light/dark switch on purpose. It is a designed document: the executive who opens a
   shared link sees exactly what its author saw.
   ===================================================================================================================== */

.dash-host { min-height: calc(100vh - var(--nav-h)); }
html.embed-mode .dash-host { min-height: 100vh; }

.dash {
    --d-canvas: #F4F6FA;
    --d-card: #FFFFFF;
    --d-card-border: rgba(15, 23, 42, 0.07);
    --d-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 18px -10px rgba(15, 23, 42, 0.12);
    --d-radius: 14px;
    --d-ink: #0F172A;
    --d-ink-2: #475569;
    --d-muted: #7B8599;
    --d-rule: rgba(15, 23, 42, 0.08);
    --d-accent: #2a78d6;
    --d-accent-ink: #1C5CAB;
    --d-chip: rgba(15, 23, 42, 0.05);
    --d-font: 'Inter', system-ui, sans-serif;
    --d-display: 'Inter', system-ui, sans-serif;
    --d-label-font: var(--d-font);
    --d-gap: 16px;
    --d-pad: 18px;
    --d-title-size: 30px;
    --d-title-weight: 700;
    --d-title-spacing: -0.025em;
    --d-w-title-size: 14.5px;
    --d-w-title-weight: 600;
    --d-kpi-size: 30px;
    --d-good: #0E7A3E;
    --d-bad: #C0392B;
    --d-hover: rgba(15, 23, 42, 0.04);
    --d-input: #FFFFFF;

    position: relative;
    min-height: calc(100vh - var(--nav-h));
    background: var(--d-canvas);
    color: var(--d-ink);
    font-family: var(--d-font);
    padding: 26px 28px 40px;
}
html.embed-mode .dash { min-height: 100vh; }

.dash h1, .dash h2, .dash h3 { color: var(--d-ink); font-family: var(--d-display); }
.dash p { color: var(--d-ink-2); }

/* ---- Header ---------------------------------------------------------------------------------------------------- */

.dash-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.dash-titles { min-width: 0; flex: 1; }
.dash-title { font-size: var(--d-title-size); font-weight: var(--d-title-weight); letter-spacing: var(--d-title-spacing); line-height: 1.12; margin-bottom: 6px; outline: none; }
.dash-sub { font-size: 14.5px; max-width: 900px; outline: none; }
.dash[data-editing="true"] .dash-title, .dash[data-editing="true"] .dash-sub { border-radius: 6px; box-shadow: 0 0 0 1px var(--d-rule); padding: 2px 6px; margin-left: -6px; cursor: text; }
.dash-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.d-chip { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--d-label-font); padding: 5px 8px; border-radius: 6px; background: var(--d-chip); color: var(--d-ink-2); }
.d-chip i { color: var(--d-muted); }

.dash-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.d-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 10px;
    border: 1px solid var(--d-card-border); background: var(--d-card); color: var(--d-ink); cursor: pointer;
    font: 600 13.5px/1 var(--d-font); box-shadow: var(--d-card-shadow); transition: transform 0.12s ease, background 0.15s ease;
}
.d-btn:hover { background: var(--d-hover); }
.d-btn:active { transform: translateY(1px); }
.d-btn.primary { background: var(--d-accent); border-color: transparent; color: #fff; }
.d-btn.primary:hover { filter: brightness(1.06); }
.d-btn.ai { background: linear-gradient(120deg, #4F46E5, #7C3AED 60%, #06B6D4); border: 0; color: #fff; }
.d-btn.icon { width: 38px; padding: 0; justify-content: center; }
.d-btn.active { box-shadow: 0 0 0 2px var(--d-accent); }
.d-menu-wrap { position: relative; }
.d-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; padding: 6px; border-radius: 12px; background: var(--d-card); border: 1px solid var(--d-card-border); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.35); display: none; z-index: 40; }
.d-menu.open { display: block; }
.d-menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--d-ink); font: 500 13.5px/1.2 var(--d-font); cursor: pointer; text-align: left; }
.d-menu button:hover { background: var(--d-hover); }
.d-menu button i { width: 16px; color: var(--d-muted); text-align: center; }
.d-menu .sep { height: 1px; background: var(--d-rule); margin: 5px 0; }
.d-menu .label { font: 700 10.5px/1 var(--d-label-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-muted); padding: 10px 10px 6px; }
.d-menu button.sel { background: var(--d-hover); }
.d-menu .swatch { width: 16px; height: 16px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.12); }

/* ---- Pages ----------------------------------------------------------------------------------------------------- */

.dash-tabs { display: flex; gap: 4px; align-items: center; border-bottom: 1px solid var(--d-rule); margin-bottom: 14px; overflow-x: auto; }
.dash-tab { position: relative; padding: 10px 14px; border: 0; background: none; font: 600 14px/1 var(--d-font); color: var(--d-muted); cursor: pointer; white-space: nowrap; }
.dash-tab:hover { color: var(--d-ink); }
.dash-tab.active { color: var(--d-ink); }
.dash-tab.active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--d-accent); }
.dash-tab .tab-x { margin-left: 8px; color: var(--d-muted); font-size: 11px; }
.dash-tab.add { color: var(--d-accent); }

/* ---- Filters: one row above everything they scope -------------------------------------------------------------- */

.dash-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.df { position: relative; }
.df-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--d-card-border); background: var(--d-card); color: var(--d-ink-2); font: 500 13px/1 var(--d-font);
}
.df-btn strong { color: var(--d-ink); font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-btn .fa-chevron-down { font-size: 9px; color: var(--d-muted); }
.df.set .df-btn { border-color: var(--d-accent); box-shadow: inset 0 0 0 1px var(--d-accent); }
.df-panel { position: absolute; left: 0; top: calc(100% + 6px); width: 290px; z-index: 45; background: var(--d-card); border: 1px solid var(--d-card-border); border-radius: 12px; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.45); padding: 10px; display: none; }
.df.open .df-panel { display: block; }
.df-search { width: 100%; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--d-card-border); background: var(--d-input); color: var(--d-ink); font: 13px var(--d-font); margin-bottom: 8px; outline: none; }
.df-list { max-height: 260px; overflow-y: auto; }
.df-opt { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--d-ink); }
.df-opt:hover { background: var(--d-hover); }
.df-opt input { accent-color: var(--d-accent); width: 15px; height: 15px; }
.df-opt span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-opt em { font-style: normal; font-size: 11.5px; color: var(--d-muted); font-variant-numeric: tabular-nums; }
.df-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--d-rule); }
.df-foot button { border: 0; background: none; font: 600 12.5px var(--d-font); color: var(--d-accent); cursor: pointer; padding: 4px; }
.df-presets { display: grid; gap: 2px; }
.df-presets button { display: flex; justify-content: space-between; align-items: center; border: 0; background: none; padding: 8px; border-radius: 7px; font: 500 13px var(--d-font); color: var(--d-ink); cursor: pointer; text-align: left; }
.df-presets button:hover { background: var(--d-hover); }
.df-presets button.sel { font-weight: 700; }
.df-presets button.sel::after { content: '\f00c'; font-family: 'Font Awesome 6 Pro'; font-weight: 900; font-size: 12px; color: var(--d-accent); }
.df-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--d-rule); }
.df-custom label { font-size: 11.5px; color: var(--d-muted); }
.df-custom input { width: 100%; height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--d-card-border); background: var(--d-input); color: var(--d-ink); font: 13px var(--d-font); }
.dash-active { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.x-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 10px; border-radius: 999px; background: var(--d-chip); color: var(--d-ink); font: 500 12.5px/1 var(--d-font); }
.x-chip i.fa-arrow-pointer { color: var(--d-accent); font-size: 11px; }
.x-chip button { border: 0; background: none; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; color: var(--d-muted); }
.x-chip button:hover { background: var(--d-hover); color: var(--d-ink); }
.clear-all { border: 0; background: none; font: 600 12.5px var(--d-font); color: var(--d-accent); cursor: pointer; padding: 6px; }

/* ---- Insights --------------------------------------------------------------------------------------------------- */

.dash-insights { margin-bottom: var(--d-gap); border-radius: var(--d-radius); background: var(--d-card); border: 1px solid var(--d-card-border); box-shadow: var(--d-card-shadow); overflow: hidden; }
.di-head { display: flex; align-items: center; gap: 12px; padding: 14px var(--d-pad); cursor: pointer; }
.di-head .di-icon { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(120deg, #4F46E5, #7C3AED 60%, #06B6D4); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.di-head h2 { font-size: 14.5px; font-family: var(--d-font); }
.di-head p { font-size: 13.5px; margin-left: 4px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di-head .di-tools { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.di-head .fa-chevron-down { color: var(--d-muted); transition: transform 0.2s ease; }
.dash-insights.open .di-head .fa-chevron-down { transform: rotate(180deg); }
.di-body { display: none; padding: 0 var(--d-pad) var(--d-pad); }
.dash-insights.open .di-body { display: block; }
.di-headline { font-size: 15px; color: var(--d-ink); font-weight: 500; margin-bottom: 14px; }
.di-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.di-card { padding: 14px 15px; border-radius: 11px; border: 1px solid var(--d-rule); background: var(--d-hover); cursor: default; }
.di-card[data-widget] { cursor: pointer; }
.di-card[data-widget]:hover { border-color: var(--d-accent); }
.di-kind { display: flex; align-items: center; gap: 8px; font: 700 10.5px/1 var(--d-label-font); letter-spacing: 0.07em; text-transform: uppercase; color: var(--d-muted); margin-bottom: 8px; }
.di-kind .sent { margin-left: auto; display: inline-flex; gap: 5px; align-items: center; text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.di-kind .sent.positive { color: var(--d-good); }
.di-kind .sent.negative { color: var(--d-bad); }
.di-card h4 { font: 600 14px/1.35 var(--d-font); color: var(--d-ink); margin-bottom: 6px; }
.di-card p { font-size: 13px; line-height: 1.5; }
.di-next { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.di-next button { border: 1px dashed var(--d-card-border); background: none; border-radius: 999px; padding: 7px 12px; font: 500 12.5px var(--d-font); color: var(--d-ink-2); cursor: pointer; }
.di-next button:hover { border-style: solid; color: var(--d-ink); }
.di-empty { display: flex; gap: 12px; align-items: center; color: var(--d-ink-2); font-size: 14px; }
.shimmer { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--d-hover), var(--d-rule), var(--d-hover)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; margin: 8px 0; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---- The grid --------------------------------------------------------------------------------------------------- */

.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--d-gap); align-items: stretch; }

.w { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--d-card); border: 1px solid var(--d-card-border); border-radius: var(--d-radius); box-shadow: var(--d-card-shadow); padding: var(--d-pad); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.w.flash { animation: wflash 1.4s ease; }
@keyframes wflash { 30% { box-shadow: 0 0 0 3px var(--d-accent); } }
.w-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.w-titles { flex: 1; min-width: 0; }
.w-title { font: var(--d-w-title-weight) var(--d-w-title-size)/1.3 var(--d-display); color: var(--d-ink); letter-spacing: -0.01em; }
.w-sub { font-size: 12.5px; color: var(--d-muted); margin-top: 2px; }
.w-tools { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s ease; }
.w:hover .w-tools, .w:focus-within .w-tools, .w-tools.pinned { opacity: 1; }
@media (hover: none) { .w-tools { opacity: 1; } }
.w-tool { width: 28px; height: 28px; border-radius: 7px; border: 0; background: none; color: var(--d-muted); cursor: pointer; font-size: 13px; }
.w-tool:hover { background: var(--d-hover); color: var(--d-ink); }
.w-tool.on { color: var(--d-accent); }
.w-body { position: relative; flex: 1; min-height: 0; }
.w-chart { width: 100%; height: 300px; }
.w[data-size="tall"] .w-chart { height: 380px; }
.w-note { margin-top: 8px; font-size: 11.5px; color: var(--d-muted); display: flex; gap: 6px; align-items: center; }
.w-note i { font-size: 11px; }
.w-empty { height: 100%; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--d-muted); font-size: 13px; text-align: center; }
.w-empty i { font-size: 22px; opacity: 0.6; }
.w .w-menu { position: absolute; right: 12px; top: 44px; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 8px; font-size: 12px; color: var(--d-ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* KPI tiles: label, value, delta vs a named period, a trend line in the de-emphasis hue. */
.w.w-kpi { padding: var(--d-pad) var(--d-pad) 12px; container-type: inline-size; }
.w.w-kpi .w-head { margin-bottom: 4px; }
.kpi-value { font: 700 min(var(--d-kpi-size), 21cqi)/1.1 var(--d-font); letter-spacing: -0.03em; color: var(--d-ink); margin: 2px 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-delta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--d-muted); flex-wrap: wrap; }
.kpi-delta b { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; padding: 3px 6px; border-radius: 6px; background: var(--d-chip); color: var(--d-ink-2); }
.kpi-delta b.good { color: var(--d-good); background: color-mix(in srgb, var(--d-good) 12%, transparent); }
.kpi-delta b.bad { color: var(--d-bad); background: color-mix(in srgb, var(--d-bad) 12%, transparent); }
.kpi-spark { width: 100%; height: 42px; margin-top: 10px; display: block; overflow: visible; }
.kpi-target { margin-top: 10px; }
.kpi-target .bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--d-accent) 18%, transparent); overflow: hidden; }
.kpi-target .bar span { display: block; height: 100%; border-radius: 999px; background: var(--d-accent); }
.kpi-target small { display: block; font-size: 11.5px; color: var(--d-muted); margin-top: 5px; }

/* Tables: aligned figures, a quiet magnitude bar behind each measure, sortable headers. */
.w-table-wrap { overflow: auto; max-height: 420px; border-radius: 8px; }
.w-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.w-table th { position: sticky; top: 0; z-index: 1; background: var(--d-card); text-align: left; font: 700 11px/1.2 var(--d-label-font); letter-spacing: 0.05em; text-transform: uppercase; color: var(--d-muted); padding: 9px 10px; border-bottom: 1px solid var(--d-rule); cursor: pointer; white-space: nowrap; user-select: none; }
.w-table th.num { text-align: right; }
.w-table th i { margin-left: 4px; font-size: 10px; }
.w-table td { padding: 8px 10px; border-bottom: 1px solid var(--d-rule); color: var(--d-ink); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.w-table td.num { text-align: right; font-variant-numeric: tabular-nums; position: relative; }
.w-table td.num .bar { position: absolute; right: 10px; top: 50%; height: 60%; transform: translateY(-50%); border-radius: 3px; background: color-mix(in srgb, var(--d-accent) 13%, transparent); z-index: 0; }
.w-table td.num span { position: relative; z-index: 1; }
.w-table tr:hover td { background: var(--d-hover); }
.w-table tr.clickable td { cursor: pointer; }
.w-table tfoot td { font-weight: 700; border-top: 1px solid var(--d-rule); border-bottom: 0; }

.w-text { font-size: 15px; line-height: 1.65; color: var(--d-ink-2); }
.w.w-text-card { background: transparent; box-shadow: none; border-style: dashed; }

/* ---- Edit mode -------------------------------------------------------------------------------------------------- */

.dash-editbar { position: sticky; top: calc(var(--nav-h) + 10px); z-index: 35; display: none; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px; border-radius: 12px;
    background: #111827; color: #F9FAFB; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6); }
html.embed-mode .dash-editbar { top: 10px; }
.dash[data-editing="true"] .dash-editbar { display: flex; }
.dash-editbar strong { font-size: 14px; margin-right: auto; display: flex; align-items: center; gap: 8px; }
.dash-editbar strong i { color: #A5B4FC; }
.dash-editbar .d-btn { box-shadow: none; }
.dash[data-editing="true"] .w { outline: 1px dashed color-mix(in srgb, var(--d-accent) 55%, transparent); outline-offset: 3px; }
.w-edit { display: none; position: absolute; top: 8px; right: 8px; z-index: 6; gap: 2px; padding: 3px; border-radius: 9px; background: #111827; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5); }
.dash[data-editing="true"] .w-edit { display: flex; }
.dash[data-editing="true"] .w-tools { display: none; }
.w-edit button { width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: #E5E7EB; cursor: pointer; font-size: 12px; }
.w-edit button:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.w-edit .wsize { width: auto; padding: 0 7px; font: 700 11px/1 var(--d-font); }
.w-add { display: none; min-height: 150px; align-items: center; justify-content: center; flex-direction: column; gap: 8px; border: 2px dashed var(--d-card-border); border-radius: var(--d-radius); background: transparent; color: var(--d-muted); font: 600 14px var(--d-font); cursor: pointer; grid-column: span 12; }
.w-add:hover { color: var(--d-accent); border-color: var(--d-accent); }
.dash[data-editing="true"] .w-add { display: flex; }
.w.dragging { opacity: 0.4; }
.w.drop-before { box-shadow: -4px 0 0 0 var(--d-accent); }

.dash-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 24px; font-size: 12px; color: var(--d-muted); }
.dash-foot a { color: var(--d-muted); font-weight: 600; }
.made-with { display: inline-flex; align-items: center; gap: 6px; }

/* ---- States: loading, building, locked --------------------------------------------------------------------------- */

.dash-state { min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--bg); }
html.embed-mode .dash-state { min-height: 100vh; }
.gate { width: 100%; max-width: 440px; text-align: center; padding: 36px 32px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.gate .gate-icon { width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 16px; background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.gate h1 { font-size: 24px; margin-bottom: 8px; }
.gate p { margin-bottom: 20px; }
.gate form { text-align: left; }
.skeleton-dash { width: 100%; max-width: 1200px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.skeleton-dash div { height: 120px; border-radius: 14px; background: linear-gradient(90deg, var(--bg-3), var(--bg-2), var(--bg-3)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skeleton-dash div.big { grid-column: span 3; height: 320px; }
.skeleton-dash div.tall { height: 320px; }

/* ---- Thumbnails: a miniature of a dashboard's first page, in its template's colours ---------------------------- */

.mini { position: absolute; inset: 0; padding: 12px; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 18px; gap: 5px; background: var(--d-canvas); align-content: start; }
.mini b { display: block; border-radius: 4px; background: var(--d-card); border: 1px solid var(--d-card-border); box-shadow: 0 0 0 1px rgba(127, 127, 140, 0.16); position: relative; overflow: hidden; }
.mini b.k { grid-row: span 1; }
.mini b.c { grid-row: span 3; }
.mini b.t { grid-row: span 2; }
.mini b::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 22%; height: 38%; border-radius: 2px; opacity: 0.85; }
.mini b.c.line::after, .mini b.c.area::after { height: 2px; bottom: 45%; background: var(--m1); transform: skewY(-8deg); }
.mini b.c.bar::after, .mini b.c.column::after, .mini b.c.stacked_column::after, .mini b.c.stacked_bar::after { background: repeating-linear-gradient(90deg, var(--m1) 0 12%, transparent 12% 20%); }
.mini b.c.donut::after { left: 30%; right: 30%; bottom: 15%; height: auto; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--m1) 0 45%, var(--m2) 45% 72%, var(--m3) 72% 100%); -webkit-mask: radial-gradient(circle, transparent 42%, #000 43%); mask: radial-gradient(circle, transparent 42%, #000 43%); }
.mini b.c.treemap::after, .mini b.c.heatmap::after { background: linear-gradient(90deg, var(--m1) 0 55%, var(--m2) 55% 80%, var(--m3) 80%); }
.mini b.c.map::after { background: radial-gradient(circle at 30% 50%, var(--m1) 0 20%, transparent 21%), radial-gradient(circle at 70% 40%, var(--m2) 0 16%, transparent 17%); }
.mini b.c.scatter::after { background: radial-gradient(circle, var(--m1) 0 2px, transparent 3px) 0 0 / 10px 8px; }
.mini b.k::after { left: 10%; right: 50%; top: 30%; bottom: auto; height: 36%; background: var(--d-ink); opacity: 0.35; }
.mini b.t::after { background: repeating-linear-gradient(0deg, var(--d-card-border) 0 1px, transparent 1px 5px); height: 70%; }
.mini b.x::after { display: none; }


/* =====================================================================================================================
   THEMES

   Every theme - the thirty that ship and each member's own - is tokens (js/themes.js). They arrive on the .dash
   element as custom properties, which the rules above read, plus four flags that the rules below read:

       data-card-style   solid | glass | outline | rule
       data-title-case   none | upper
       data-title-effect none | gradient
       data-density      airy | comfortable | compact

   A handful of flourishes stay specific to the theme that introduced them (the Midnight glow line, the Blueprint
   corner marks); everything else is available to every theme.
   ===================================================================================================================== */

.dash[data-card-style="glass"] .w, .dash[data-card-style="glass"] .dash-insights {
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.dash[data-card-style="outline"] .w, .dash[data-card-style="outline"] .dash-insights { border-width: 1.5px; }

.dash[data-card-style="rule"] .w { border: 0; border-top: 2px solid var(--d-ink); padding-top: 16px; }
.dash[data-card-style="rule"] .w.w-kpi { border-top-width: 1px; }
.dash[data-card-style="rule"] .dash-header { border-bottom: 3px double var(--d-ink); padding-bottom: 18px; margin-bottom: 18px; }
.dash[data-card-style="rule"] .dash-sub { font-family: var(--d-display); font-style: italic; font-size: 17px; }
.dash[data-card-style="rule"] .w-text { font-family: var(--d-display); font-size: 17px; color: var(--d-ink); }
.dash[data-card-style="rule"] .dash-insights { border: 0; border-top: 2px solid var(--d-ink); }
.dash[data-card-style="rule"] .d-btn { box-shadow: none; }

.dash[data-title-case="upper"] .dash-title { text-transform: uppercase; letter-spacing: 0.01em; }

.dash[data-title-effect="gradient"] .dash-title {
    background: linear-gradient(120deg, var(--d-title-grad-1), var(--d-accent) 45%, var(--d-title-grad-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.dash[data-density="compact"] .w-title { font-family: var(--d-label-font); text-transform: uppercase; letter-spacing: 0.06em; color: var(--d-ink-2); }
.dash[data-density="compact"] .kpi-value { font-family: var(--d-label-font); letter-spacing: -0.02em; }
.dash[data-density="compact"] .d-btn { border-radius: min(var(--d-radius), 8px); box-shadow: none; }

.dash[data-template="midnight"] .w-kpi::before { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, transparent, var(--d-accent), transparent); opacity: 0.8; }
.dash[data-template="midnight"] .d-btn.primary { box-shadow: 0 0 24px -6px rgba(63, 140, 240, 0.7); }
.dash[data-template="blueprint"] .w::before { content: ''; position: absolute; left: -1px; top: -1px; width: 8px; height: 8px; border-left: 2px solid var(--d-accent); border-top: 2px solid var(--d-accent); }
.dash[data-template="blueprint"] .dash-title { font-family: var(--d-label-font); }

/* A dashboard shown inside a modal (expand, Ask AI, the widget editor) keeps its theme but not its page chrome. */
.dash.dash-inset { min-height: 0; padding: 16px; border-radius: 14px; }


/* ---- Blurred series labels -------------------------------------------------------------------------------------- */

.blur-lbl { filter: blur(4.5px); user-select: none; -webkit-user-select: none; pointer-events: none; }

.lock-banner {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -6px 0 18px; padding: 10px 12px 10px 16px; border-radius: 12px;
    background: linear-gradient(120deg, rgba(79, 70, 229, 0.12), rgba(245, 158, 11, 0.12)); border: 1px solid rgba(79, 70, 229, 0.25);
    color: var(--d-ink); font: 500 13.5px/1.45 var(--d-font);
}
.lock-banner > i { color: #F59E0B; }
.lock-banner span { flex: 1; min-width: 220px; }
.lock-banner .d-btn { height: 34px; box-shadow: none; }


/* ---- The theme gallery ------------------------------------------------------------------------------------------ */

.theme-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.theme-filters button { border: 1px solid var(--line-2); background: var(--card); color: var(--ink); border-radius: 999px; padding: 10px 18px; font: 500 14px/1 var(--display); cursor: pointer; transition: all 0.25s ease; }
.theme-filters button.active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(99, 119, 238, 0.3); }
.theme-filters button.new { margin-left: auto; border-color: var(--brand-line); color: var(--brand); background: var(--brand-tint); }

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.theme-card { position: relative; border-radius: 15px; overflow: hidden; border: 1px solid transparent; background: var(--card); cursor: pointer; text-align: left; padding: 0; font: inherit; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.theme-card:hover, .theme-card:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow-lg); outline: none; }
.theme-card.current { border: 2px solid var(--brand); box-shadow: 0 0 0 4px var(--focus); }
.theme-thumb { position: relative; height: 118px; overflow: hidden; }
.theme-current { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.theme-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 11px 12px 12px; }
.theme-meta strong { display: block; font-size: 14px; }
.theme-meta span:not(.chip) { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.theme-lock { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 8px; background: rgba(15, 23, 42, 0.7); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.theme-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.theme-tools button { width: 28px; height: 28px; border: 0; border-radius: 8px; background: rgba(15, 23, 42, 0.72); color: #fff; cursor: pointer; font-size: 12px; }
.theme-new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 178px; border: 2px dashed var(--line-2); background: transparent; }
.theme-new i { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 4px; }
.theme-new span { font-size: 12.5px; color: var(--ink-3); }


/* ---- The studio ------------------------------------------------------------------------------------------------- */

.studio { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 22px; align-items: start; }
.studio-form fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 14px; margin-bottom: 12px; }
.studio-form legend { font: 700 12px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding: 0 6px; }
.st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.st-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.st-field em { font-style: normal; color: var(--ink-3); font-weight: 500; }
.st-field select { height: 34px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--input); color: var(--ink); padding: 0 8px; font: 13px var(--font); }
.st-field input[type="range"] { accent-color: var(--brand); }
.st-color { display: flex; align-items: center; gap: 8px; }
.st-color input[type="range"] { flex: 1; min-width: 0; accent-color: var(--brand); }
.studio input[type="color"] { width: 42px; height: 30px; border: 1px solid var(--line-2); border-radius: 8px; padding: 2px; background: var(--input); cursor: pointer; }
.st-mode { display: flex; gap: 16px; margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.st-mode input { accent-color: var(--brand); margin-right: 6px; }
.st-series { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.st-series input[type="color"] { width: 38px; height: 38px; }
.st-check { display: grid; gap: 5px; margin-bottom: 10px; font-size: 12.5px; }
.st-check .ok { color: var(--good); }
.st-check .warn { color: var(--warn); }
.st-check .bad { color: var(--bad); }
.studio-sticky { position: sticky; top: 0; }
.studio-canvas { height: 560px; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); }
.studio-canvas .dash { min-height: 560px; }

@media (max-width: 1000px) { .studio { grid-template-columns: 1fr; } .studio-canvas { height: 460px; } }


/* ---- Responsive ------------------------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .dash-grid > .w[data-width="3"] { grid-column: span 6 !important; }
    .dash-grid > .w[data-width="4"] { grid-column: span 6 !important; }
    .dash-grid > .w[data-width="8"] { grid-column: span 12 !important; }
}

@media (max-width: 700px) {
    .dash { padding: 12px 8px 24px; --d-gap: 10px; --d-pad: 14px; }
    .dash-grid > .w[data-width] { grid-column: span 12 !important; }
    .dash-grid > .w.w-kpi[data-width] { grid-column: span 6 !important; }
    .w.w-kpi { padding: 12px 12px 10px; }
    .kpi-delta { font-size: 11px; gap: 4px; }
    .kpi-delta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .kpi-spark { height: 28px; margin-top: 6px; }
    .w[data-size="tall"] .w-chart { height: 300px; }
    .w-map .w-chart { height: 240px !important; }
    .dash[data-template="editorial"] { --d-title-size: 30px; }
    /* Header: the titles take the full width and wrap naturally (the site's balanced h1 wrapping leaves a ragged
       right edge on a phone); the chips keep to one swipeable row and the buttons to one compact row beneath. */
    .dash-header { gap: 10px; margin-bottom: 12px; }
    .dash-titles { flex: 1 1 100%; }
    .dash-title, .dash-sub { text-wrap: wrap; }
    .dash-title { margin-bottom: 4px; }
    .dash-sub { font-size: 13.5px; line-height: 1.45; }
    .dash[data-card-style="rule"] .dash-sub { font-size: 15px; }
    .dash-meta { flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 8px -8px 0; padding: 0 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .dash-meta::-webkit-scrollbar { display: none; }
    .dash-meta .d-chip { flex-shrink: 0; white-space: nowrap; }
    .dash-actions { flex-wrap: nowrap; gap: 6px; }
    .dash-actions .d-btn { height: 34px; padding: 0 11px; }
    .dash-actions .d-btn span { display: none; }
    .kpi-value { font-size: 22px; }
    .dash-title { font-size: min(var(--d-title-size), 22px); line-height: 1.18; }
    .w-chart { height: 260px; }
    .df-panel { width: calc(100vw - 32px); position: fixed; left: 16px; top: auto; }
}

@media print {
    .dash { padding: 0; background: #fff !important; }
    .dash-actions, .dash-filters .df-btn .fa-chevron-down, .w-tools, .dash-editbar, .dash-tabs .add, .clear-all { display: none !important; }
    .w { break-inside: avoid; box-shadow: none; }
    .dash-insights .di-body { display: block; }
}

/* The "Made with" mark, in the dashboard's own ink. */
.made-with img { display: block; }
.made-with b { font-weight: 800; }
.made-with b + b { color: var(--d-accent); }

/* Locked series and category names in SVG-drawn charts (render.js BLUR_INK): the shape stays, the words don't. */
.dash svg text[fill="#FE01FE"] { fill: var(--d-ink-2); filter: blur(3.5px); user-select: none; -webkit-user-select: none; }

/* Locked series and category names in SVG-drawn charts (render.js BLUR_INK): the shape stays, the words do not. */
.dash svg text[fill="#FE01FE"] { fill: var(--d-ink-2); filter: blur(3.5px); user-select: none; -webkit-user-select: none; }