/* =====================================================================================================================
   DashTurbo  -  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, #FB5155, #F92A75 50%, #8A3FFC); 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 button .bi-tableau { transform: scale(1.35); }
.d-menu button .fa-toggle-on { color: var(--d-accent, var(--accent)); }
.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, #FB5155, #F92A75 50%, #8A3FFC); 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(249, 42, 117, 0.12), rgba(138, 63, 252, 0.12)); border: 1px solid rgba(249, 42, 117, 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; }
}

/* Drawing the dashboard as a PNG (render.js dashboardPNG): the sideways-scrolling strips without their scrollbars. */
.dash.png-capture .dash-tabs, .dash.png-capture .dash-meta { overflow: hidden; }

/* 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; }


/* =====================================================================================================================
   BRAND  -  the owner's logo, name and tagline above the title, an optional header image, a footer note
   (spec.brand; js/brand.js). Every colour comes from the theme, so a brand looks at home on all thirty.
   ===================================================================================================================== */

.dash-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; min-width: 0; }
.dash-logo { display: block; width: auto; height: 40px; max-width: min(260px, 62vw); object-fit: contain; object-position: left center; }
.dash-brand[data-size="s"] .dash-logo { height: 28px; max-width: min(180px, 50vw); }
.dash-brand[data-size="l"] .dash-logo { height: 62px; max-width: min(360px, 70vw); }
.db-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.db-text strong { font: 700 15px/1.25 var(--d-display); color: var(--d-ink); letter-spacing: -0.01em; }
.db-text span { font-size: 12.5px; color: var(--d-muted); }
.dash-logo + .db-text { padding-left: 12px; border-left: 1px solid var(--d-rule); }
.dash-brandnote { font-weight: 600; color: var(--d-ink-2); }
.dash-brandnote::after { content: '\00B7'; margin: 0 8px; color: var(--d-muted); font-weight: 400; }

/* Centred: logo over the name, the title and everything under it on the centre line. */
.dash-header[data-align="center"] { flex-direction: column; align-items: center; text-align: center; }
.dash-header[data-align="center"] .dash-titles { width: 100%; display: flex; flex-direction: column; align-items: center; }
.dash-header[data-align="center"] .dash-titles > * { max-width: 100%; }
.dash-header[data-align="center"] .dash-meta { align-self: stretch; justify-content: safe center; }
.dash-header[data-align="center"] .dash-brand { flex-direction: column; gap: 10px; }
.dash-header[data-align="center"] .dash-logo { object-position: center; }
.dash-header[data-align="center"] .dash-logo + .db-text { padding-left: 0; border-left: 0; }
.dash-header[data-align="center"] .dash-sub { margin-left: auto; margin-right: auto; }
.dash-header[data-align="center"] .dash-meta, .dash-header[data-align="center"] .dash-actions { justify-content: center; }

/* The header image: the titles sit on it, legible through the overlay the owner chose. */
.dash-header.has-cover { position: relative; isolation: isolate; z-index: 5; min-height: 210px; padding: 28px 28px 24px; margin-bottom: 18px; align-items: flex-end; border-radius: var(--d-radius); box-shadow: var(--d-card-shadow); }
.dash-header.has-cover .dash-actions { align-self: flex-start; }
.dash-header.has-cover[data-align="center"] { align-items: center; justify-content: flex-end; }
.dash-header.has-cover[data-align="center"] .dash-actions { align-self: center; }
.dash-cover { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; background-size: cover; background-position: center; background-color: var(--d-ink); }
.dash-cover::after { content: ''; position: absolute; inset: 0; }
.dash-header[data-tint="dark"] .dash-cover::after { background: linear-gradient(100deg, rgba(8, 10, 22, 0.84), rgba(8, 10, 22, 0.55) 55%, rgba(8, 10, 22, 0.22)), linear-gradient(0deg, rgba(8, 10, 22, 0.45), transparent 65%); }
.dash-header[data-tint="light"] .dash-cover::after { background: linear-gradient(100deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66) 55%, rgba(255, 255, 255, 0.3)); }
.dash-header[data-tint="brand"] .dash-cover::after { background: linear-gradient(100deg, color-mix(in srgb, var(--d-accent) 78%, #000 22%), color-mix(in srgb, var(--d-accent) 50%, transparent) 58%, transparent), linear-gradient(0deg, rgba(0, 0, 0, 0.35), transparent 65%); }
.dash-header[data-tint="none"] .dash-cover::after { background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent 70%); }
.dash-header[data-align="center"][data-tint="dark"] .dash-cover::after { background: rgba(8, 10, 22, 0.62); }
.dash-header[data-align="center"][data-tint="light"] .dash-cover::after { background: rgba(255, 255, 255, 0.78); }
.dash-header[data-align="center"][data-tint="brand"] .dash-cover::after { background: color-mix(in srgb, var(--d-accent) 72%, rgba(0, 0, 0, 0.5)); }
.dash-header[data-tint="light"] .dash-cover { background-color: #fff; }

.dash-header.has-cover:not([data-tint="light"]) .dash-title,
.dash-header.has-cover:not([data-tint="light"]) .db-text strong { color: #fff; -webkit-text-fill-color: #fff; background: none; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25); }
.dash-header.has-cover:not([data-tint="light"]) .dash-sub,
.dash-header.has-cover:not([data-tint="light"]) .db-text span { color: rgba(255, 255, 255, 0.84); }
.dash-header.has-cover:not([data-tint="light"]) .dash-logo + .db-text { border-left-color: rgba(255, 255, 255, 0.3); }
.dash-header.has-cover:not([data-tint="light"]) .d-chip { background: rgba(255, 255, 255, 0.14); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dash-header.has-cover:not([data-tint="light"]) .d-chip i { color: rgba(255, 255, 255, 0.7); }
.dash-header.has-cover:not([data-tint="light"]) .dash-actions .d-btn:not(.primary):not(.ai) { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.24); color: #fff; box-shadow: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dash-header.has-cover:not([data-tint="light"]) .dash-actions .d-btn:not(.primary):not(.ai):hover { background: rgba(255, 255, 255, 0.24); }
.dash[data-editing="true"] .dash-header.has-cover:not([data-tint="light"]) .dash-title,
.dash[data-editing="true"] .dash-header.has-cover:not([data-tint="light"]) .dash-sub { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }
.dash[data-card-style="rule"] .dash-header.has-cover { border-bottom: 0; }


/* =====================================================================================================================
   ELEMENTS  -  headings, images and dividers between the charts
   ===================================================================================================================== */

.w.w-el { padding: 0; background: transparent; border-color: transparent; box-shadow: none; }
.w.w-el .w-body { display: flex; flex-direction: column; justify-content: center; }
.w.w-el .w-note:empty { display: none; }
.dash[data-editing="true"] .w.w-el { min-height: 46px; }
.dash[data-card-style="rule"] .w.w-el { border-top: 0; padding-top: 0; }

/* Headings, in five styles. */
.el-label { display: flex; gap: 12px; align-items: flex-start; padding: 4px 2px; }
.el-label[data-align="center"] { justify-content: center; text-align: center; }
.el-label[data-align="right"] { justify-content: flex-end; text-align: right; }
.el-words { min-width: 0; }
.dash .el-text { margin: 0; font: var(--d-title-weight) 20px/1.2 var(--d-display); letter-spacing: var(--d-title-spacing); color: var(--d-ink); text-wrap: balance; overflow-wrap: anywhere; }
.dash .el-sub { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--d-ink-2); }
.el-ico { color: var(--d-accent); font-size: 17px; margin-top: 2px; }

.el-label[data-style="title"] .el-text { font-size: calc(var(--d-title-size) * 0.9); line-height: 1.1; }
.el-label[data-style="title"] .el-sub { font-size: 15px; }

.el-label[data-style="section"] { padding: 14px 2px 10px; border-bottom: 1px solid var(--d-rule); }
.el-label[data-style="section"] .el-words::before { content: ''; display: block; width: 30px; height: 3px; border-radius: 3px; background: var(--d-accent); margin-bottom: 10px; }
.el-label[data-style="section"][data-align="center"] .el-words::before { margin-left: auto; margin-right: auto; }
.el-label[data-style="section"][data-align="right"] .el-words::before { margin-left: auto; }

.el-label[data-style="eyebrow"] { padding: 6px 2px; }
.el-label[data-style="eyebrow"] .el-text { display: inline-flex; font: 700 11.5px/1 var(--d-label-font); letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px;
    color: color-mix(in srgb, var(--d-accent) 72%, var(--d-ink)); background: color-mix(in srgb, var(--d-accent) 13%, transparent); }
.el-label[data-style="eyebrow"] .el-sub { margin-top: 8px; }

.el-label[data-style="callout"] { padding: 15px 17px; border-radius: var(--d-radius); background: color-mix(in srgb, var(--d-accent) 9%, var(--d-card)); border: 1px solid color-mix(in srgb, var(--d-accent) 24%, transparent); }
.el-label[data-style="callout"] .el-text { font: 600 15.5px/1.4 var(--d-font); letter-spacing: 0; }

.el-label[data-style="banner"] { padding: 22px 24px; border-radius: var(--d-radius); box-shadow: var(--d-card-shadow);
    background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%), linear-gradient(120deg, color-mix(in srgb, var(--d-accent) 82%, #000 18%), color-mix(in srgb, var(--d-accent) 55%, #000 45%)); }
.el-label[data-style="banner"] .el-text { color: #fff; font-size: 22px; }
.el-label[data-style="banner"] .el-sub { color: rgba(255, 255, 255, 0.86); }

/* Images: whole or filling their box, four heights, with or without a card. */
.w.w-el.w-image:not(.plain) { background: var(--d-card); border: 1px solid var(--d-card-border); box-shadow: var(--d-card-shadow); padding: 10px; }
.el-image { margin: 0; display: flex; flex-direction: column; gap: 8px; --h: 180px; }
.el-image[data-h="s"] { --h: 96px; }
.el-image[data-h="l"] { --h: 280px; }
.el-image[data-h="xl"] { --h: 420px; }
.el-image a { display: block; border-radius: calc(var(--d-radius) - 4px); }
.el-image a:focus-visible { outline: 2px solid var(--d-accent); outline-offset: 2px; }
.el-image img { display: block; width: 100%; height: var(--h); object-fit: contain; border-radius: calc(var(--d-radius) - 4px); }
.el-image[data-fit="cover"] img { object-fit: cover; }
.el-image[data-align="left"] img { object-position: left center; }
.el-image[data-align="right"] img { object-position: right center; }
.el-image figcaption { font-size: 12.5px; line-height: 1.45; color: var(--d-muted); text-align: center; }
.el-image[data-align="left"] figcaption { text-align: left; }
.el-image[data-align="right"] figcaption { text-align: right; }

.el-divider { height: 28px; display: flex; align-items: center; }
.el-divider span { flex: 1; height: 1px; background: var(--d-rule); }
.el-divider[data-style="space"] { height: 18px; }
.el-divider[data-style="space"] span { display: none; }
.dash[data-editing="true"] .el-divider[data-style="space"] span { display: block; background: repeating-linear-gradient(90deg, var(--d-rule) 0 6px, transparent 6px 12px); }


/* ---- The Insert bar in edit mode, and dropping an image on the page ------------------------------------------------ */

.dash-editbar .eb-short { display: none; }
.insert-bar { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.ib-label { font: 700 10.5px/1 var(--d-font); letter-spacing: 0.1em; text-transform: uppercase; color: #A5B4FC; padding: 0 8px 0 6px; flex-shrink: 0; }
.dash-editbar .insert-bar .d-btn { height: 32px; padding: 0 10px; background: transparent; border-color: transparent; color: #E5E7EB; box-shadow: none; font-weight: 600; flex-shrink: 0; }
.dash-editbar .insert-bar .d-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.dash-editbar .insert-bar .d-btn i { color: #A5B4FC; }
.eb-end { display: flex; gap: 8px; }

.dash-dropzone { display: none; position: fixed; inset: 14px; z-index: 60; pointer-events: none; align-items: center; justify-content: center; border-radius: 24px;
    border: 2px dashed var(--d-accent); background: color-mix(in srgb, var(--d-card) 72%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dash-dropzone > div { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--d-ink); text-align: center; }
.dash-dropzone i { font-size: 34px; color: var(--d-accent); }
.dash-dropzone strong { font: 700 19px/1.2 var(--d-display); }
.dash-dropzone span { font-size: 13.5px; color: var(--d-muted); }
.dash.drop-image .dash-dropzone { display: flex; }

@media (max-width: 1100px) {
    .dash-editbar .eb-long { display: none; }
    .dash-editbar .eb-short { display: inline; }
    .insert-bar { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 88%, transparent); mask: linear-gradient(90deg, #000 88%, transparent); }
    .insert-bar::-webkit-scrollbar { display: none; }
}

@media (max-width: 700px) {
    .dash-header.has-cover { min-height: 160px; padding: 18px 16px 16px; }
    .dash-logo { height: 32px; }
    .dash-brand[data-size="s"] .dash-logo { height: 24px; }
    .dash-brand[data-size="l"] .dash-logo { height: 46px; }
    .el-label[data-style="title"] .el-text { font-size: min(calc(var(--d-title-size) * 0.9), 24px); }
    .el-label[data-style="banner"] { padding: 18px; }
    .el-label[data-style="banner"] .el-text { font-size: 19px; }
    .el-image[data-h="l"] { --h: 220px; }
    .el-image[data-h="xl"] { --h: 300px; }
    .dash-dropzone { display: none !important; }
}

@media print {
    .ai-fab, .dash-dropzone { display: none !important; }
    .dash-header.has-cover, .el-label[data-style="banner"], .el-label[data-style="callout"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* =====================================================================================================================
   GLASS  -  a widget's own background, transparency and blur (render.js openGlass; spec widget.glass). Stronger than
   any theme or design rule, because it is the owner's choice for that one widget.
   ===================================================================================================================== */

.dash .w.w-glass { background-color: var(--w-bg) !important; -webkit-backdrop-filter: var(--w-backdrop) !important; backdrop-filter: var(--w-backdrop) !important; }
.dash .w.w-el.w-glass { padding: 12px 16px; border-color: var(--d-card-border); border-radius: var(--d-radius); }
.dash .w.w-el.w-glass .el-label { background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.dash[data-editing="true"] .w.wg-target { box-shadow: 0 0 0 2px var(--d-accent), var(--d-card-shadow); }
.w-edit button.on { color: var(--d-accent); }

.wg-pop {
    position: fixed; z-index: 1200; width: 292px; padding: 14px; border-radius: 16px;
    background: var(--d-input, #fff); color: var(--d-ink, #0F172A); border: 1px solid var(--d-card-border, rgba(15, 23, 42, 0.1));
    box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.08); font: 13px/1.4 var(--d-font, 'Inter', system-ui, sans-serif);
    animation: wg-in 0.18s ease both;
}
@keyframes wg-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
.wg-pop.sheet { left: 10px !important; right: 10px; top: auto !important; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; }
.wg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wg-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--d-accent, #2a78d6) 85%, #fff), var(--d-accent, #2a78d6)); }
.wg-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wg-name strong { font-size: 14px; font-weight: 700; color: var(--d-ink, #0F172A); }
.wg-name span { font-size: 12px; color: var(--d-muted, #7B8599); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-x { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--d-muted, #7B8599); cursor: pointer; }
.wg-x:hover { background: var(--d-hover, rgba(0, 0, 0, 0.05)); color: var(--d-ink, #0F172A); }

.wg-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.wg-presets button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px 7px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--d-card-border, rgba(0, 0, 0, 0.1)); background: none; color: var(--d-ink-2, #475569); font: 600 11.5px/1 var(--d-font, system-ui); }
.wg-presets button:hover { background: var(--d-hover, rgba(0, 0, 0, 0.04)); }
.wg-presets button.on { border-color: var(--d-accent, #2a78d6); box-shadow: inset 0 0 0 1px var(--d-accent, #2a78d6); color: var(--d-ink, #0F172A); }
/* Each preset shown as its own little pane over a striped backdrop. */
.wg-chip { position: relative; width: 38px; height: 26px; border-radius: 7px; overflow: hidden;
    background: repeating-linear-gradient(135deg, var(--d-accent, #2a78d6) 0 5px, color-mix(in srgb, var(--d-accent, #2a78d6) 35%, #fff) 5px 10px); }
.wg-chip::after { content: ''; position: absolute; inset: 5px 6px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.7); }
.wg-chip.wg-solid::after { background: #fff; }
.wg-chip.wg-frosted::after { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.wg-chip.wg-glass::after { background: rgba(255, 255, 255, 0.42); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
.wg-chip.wg-clear::after { background: rgba(255, 255, 255, 0.14); }

.wg-label { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 6px; font: 700 11px/1 var(--d-label-font, system-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--d-muted, #7B8599); }
.wg-label output { font: 600 12px/1 var(--d-font, system-ui); letter-spacing: 0; text-transform: none; color: var(--d-ink, #0F172A); font-variant-numeric: tabular-nums; }
.wg-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.wg-swatches button, .wg-custom { position: relative; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 0; padding: 0; display: grid; place-items: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16); font-size: 11px; color: var(--d-ink-2, #475569); }
.wg-swatches button.on { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), 0 0 0 2px var(--d-input, #fff), 0 0 0 4px var(--d-accent, #2a78d6); }
.wg-custom { background: conic-gradient(#f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e); color: #fff; }
.wg-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.wg-custom i { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); pointer-events: none; }
.wg-range { width: 100%; accent-color: var(--d-accent, #2a78d6); margin: 0; }
.wg-hint { margin: 10px 0 0; font-size: 12px; color: var(--d-ink-2, #475569); background: var(--d-hover, rgba(0, 0, 0, 0.04)); border-radius: 8px; padding: 8px 10px; }
.wg-hint i { color: var(--d-accent, #2a78d6); margin-right: 4px; }
.wg-foot { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--d-rule, rgba(0, 0, 0, 0.08)); }
.wg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--d-card-border, rgba(0, 0, 0, 0.1)); background: none; color: var(--d-ink, #0F172A); font: 600 12.5px/1 var(--d-font, system-ui); }
.wg-btn:hover { background: var(--d-hover, rgba(0, 0, 0, 0.04)); }
.wg-btn.primary { flex: 1; border: 0; background: var(--d-accent, #2a78d6); color: #fff; }
.wg-btn.primary:hover { filter: brightness(1.07); background: var(--d-accent, #2a78d6); }
@media print { .dash .w.w-glass { backdrop-filter: none !important; } }

/* ---- The header and insights panel get the same glass and colours (spec.glass) ------------------------------------ */

.dash .dash-header.w-glass { background-color: var(--w-bg) !important; background-image: none; -webkit-backdrop-filter: var(--w-backdrop) !important; backdrop-filter: var(--w-backdrop) !important;
    border: 1px solid var(--d-card-border); border-radius: var(--d-radius); padding: 20px 22px; box-shadow: var(--d-card-shadow); position: relative; z-index: 5; }
.dash .dash-insights.w-glass { background-color: var(--w-bg) !important; -webkit-backdrop-filter: var(--w-backdrop) !important; backdrop-filter: var(--w-backdrop) !important; }
/* Over a design's banner the wash under the words becomes the chosen glass. */
.dash .dash-header.dz-banner.w-glass .dz-headart { background: transparent; }
.dash .dash-header.dz-banner.w-glass .dz-headart::after { background: linear-gradient(90deg, var(--w-bg) 0%, var(--w-bg) 34%, transparent 78%); }
/* Chosen text colour wins over a gradient title, a cover image's white and the theme's ink. */
.dash .w-inked .dash-title, .dash .dash-header.w-inked .dash-title, .dash .dash-header.w-inked .db-text strong {
    background: none !important; -webkit-text-fill-color: var(--d-ink) !important; color: var(--d-ink) !important; text-shadow: none; }
.dash .dash-header.w-inked .dash-sub, .dash .dash-header.w-inked .db-text span { color: var(--d-ink-2) !important; }
.dash .dash-header.w-inked .d-chip { color: var(--d-ink-2); background: var(--d-chip); }
.dash .dash-header.w-inked .d-chip i { color: var(--d-muted); }
.dash .dash-insights.w-inked .di-card { border-color: var(--d-rule); }

/* "Style" on the header and the insights panel, in edit mode. */
.dash[data-editing="true"] .dash-header { position: relative; }
.wg-open { position: absolute; right: 12px; bottom: 12px; z-index: 6; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer;
    border: 0; background: #111827; color: #F9FAFB; font: 600 12.5px/1 var(--d-font); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6); }
.wg-open:hover { background: #1F2937; }
.wg-open i, .wg-open-i i { color: #60A5FA; }
.dash[data-editing="true"] .dash-header.wg-target, .dash[data-editing="true"] .dash-insights.wg-target { box-shadow: 0 0 0 2px var(--d-accent), var(--d-card-shadow); }

/* The panel's tabs, quick picks and scope. */
.wg-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 10px; background: var(--d-hover, rgba(0, 0, 0, 0.05)); margin-bottom: 12px; }
.wg-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--d-ink-2, #475569); font: 600 12.5px/1 var(--d-font, system-ui); }
.wg-tabs button.on { background: var(--d-input, #fff); color: var(--d-ink, #0F172A); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 10px -6px rgba(0, 0, 0, 0.3); }
.wg-tabs button i { font-size: 11px; color: var(--d-accent, #2a78d6); }
.wg-sub { font: 500 11px/1 var(--d-font, system-ui); letter-spacing: 0; text-transform: none; color: var(--d-muted, #7B8599); }
.wg-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 4px; }
.wg-quick button { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; cursor: pointer; border: 1px solid var(--d-card-border, rgba(0, 0, 0, 0.1)); background: none; color: var(--d-ink, #0F172A); font: 600 12px/1 var(--d-font, system-ui); }
.wg-quick button.on { border-color: var(--d-accent, #2a78d6); box-shadow: inset 0 0 0 1px var(--d-accent, #2a78d6); }
.wg-q { width: 30px; height: 24px; border-radius: 6px; display: grid; place-items: center; font: 800 12px/1 var(--d-display, system-ui); }
.wg-q-light { background: linear-gradient(135deg, #0B1020, #1E3A5F); color: #fff; }
.wg-q-dark { background: linear-gradient(135deg, #F8FAFC, #DCE7F3); color: #0B1020; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.wg-swatches [data-color=""] { color: var(--d-ink-2, #475569); }
.wg-scope { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 12px; line-height: 1.35; color: var(--d-ink-2, #475569); cursor: pointer; }
.wg-scope input { margin-top: 1px; accent-color: var(--d-accent, #2a78d6); }
.wg-pop { max-height: calc(100vh - 24px); overflow-y: auto; }

/* A chosen text colour carries a soft halo of its opposite, so it reads over the busy parts of a picture. */
.dash .w-ink-light .dash-title, .dash .w-ink-light .dash-sub, .dash .w-ink-light .w-title, .dash .w-ink-light .w-sub, .dash .w-ink-light .kpi-value,
.dash .w-ink-light .di-headline, .dash .w-ink-light .di-card h4, .dash .w-ink-light .di-card p, .dash .w-ink-light .di-head h2, .dash .w-ink-light .el-text,
.dash .w-ink-light .w-text, .dash .w-ink-light .db-text { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 14px rgba(0, 0, 0, 0.35); }
.dash .w-ink-dark .dash-title, .dash .w-ink-dark .dash-sub, .dash .w-ink-dark .w-title, .dash .w-ink-dark .kpi-value, .dash .w-ink-dark .di-headline,
.dash .w-ink-dark .di-card h4, .dash .w-ink-dark .el-text, .dash .w-ink-dark .w-text { text-shadow: 0 0 12px rgba(255, 255, 255, 0.55); }
/* Buttons inside a styled panel take its colours too, as a translucent chip. */
.dash .w-inked:not(.dash-header) .d-btn:not(.primary):not(.ai) { background: var(--d-chip); border-color: var(--d-card-border); color: var(--d-ink); box-shadow: none; }
.dash .dash-header.w-ink-light .dash-title, .dash .dash-header.w-ink-light .dash-sub, .dash .dash-header.w-ink-light .d-chip { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 22px rgba(0, 0, 0, 0.55); }
.dash .dash-header.w-ink-light .d-chip { background: rgba(0, 0, 0, 0.22); }