/* =====================================================================================================================
   DashMage  -  dashboards

   One structure, thirty 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. The chrome around it - the Ask AI button, the insights mark, the edit
   bar, the lock banner, the theme gallery and the studio - wears the site's navy and orange.
   ===================================================================================================================== */

.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: min(var(--d-radius), 6px);
    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: #1B1E31; border: 0; color: #fff; box-shadow: inset 3px 0 0 #FE5924; font-family: 'Syne', var(--d-font); }
.d-btn.ai i { color: #FE5924; }
.d-btn.ai:hover { background: #FE5924; }
.d-btn.ai:hover i { 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: min(var(--d-radius), 6px); 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: min(var(--d-radius), 4px); 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: 3px; background: #FE5924; 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(--strip-h, 0px) + 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: 4px;
    background: #1B1E31; color: #fff; box-shadow: inset 0 3px 0 #FE5924, 0 18px 40px -18px rgba(0, 0, 0, 0.6); font-family: var(--font, 'Mulish', sans-serif); }
html.embed-mode .dash-editbar { top: 10px; }
.dash[data-editing="true"] .dash-editbar { display: flex; }
.dash-editbar strong { font: 700 14px/1.2 var(--display, 'Syne', sans-serif); margin-right: auto; display: flex; align-items: center; gap: 8px; }
.dash-editbar strong i { color: #FE5924; }
.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: 3px; background: #1B1E31; box-shadow: inset 0 -2px 0 #FE5924, 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: 2px; background: none; color: #E5E7EB; cursor: pointer; font-size: 12px; }
.w-edit button:hover { background: #FE5924; 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: 38px 34px; border-radius: var(--r, 4px); background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--accent); box-shadow: var(--shadow-lg); }
.gate .gate-icon { width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 2px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.gate h1 { font: 700 24px/1.2 var(--display); 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: 4px; 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; }

/* Nightforge, the house dark theme: an orange rule over every KPI and under the title, a warm glow on the primary button. */
.dash[data-template="nightforge"] .w-kpi::before { content: ''; position: absolute; left: -1px; top: -1px; width: 44px; height: 3px; background: var(--d-accent); }
.dash[data-template="nightforge"] .dash-title::after { content: ''; display: block; width: 56px; height: 4px; margin-top: 14px; background: var(--d-accent); }
.dash[data-template="nightforge"] .dash-header[data-align="center"] .dash-title::after { margin-left: auto; margin-right: auto; }
.dash[data-template="nightforge"] .dash-header.has-cover .dash-title::after { display: none; }
.dash[data-template="nightforge"] .d-btn.primary { box-shadow: 0 0 24px -6px rgba(254, 89, 36, 0.7); }
.dash[data-template="nightforge"] .dash-tab.active::after { height: 3px; border-radius: 0; }

/* Mission Control, a dense ops console: corner brackets on every card, a monospaced title and figures. */
.dash[data-template="mission"] .w::before { content: ''; position: absolute; left: -1px; top: -1px; width: 9px; height: 9px; border-left: 2px solid var(--d-accent); border-top: 2px solid var(--d-accent); pointer-events: none; }
.dash[data-template="mission"] .w::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-right: 2px solid var(--d-accent); border-bottom: 2px solid var(--d-accent); pointer-events: none; }
.dash[data-template="mission"] .w.w-el::before, .dash[data-template="mission"] .w.w-el::after { display: none; }
.dash[data-template="mission"] .dash-title { font-family: var(--d-label-font); letter-spacing: 0.04em; }
.dash[data-template="mission"] .kpi-value { font-family: var(--d-label-font); letter-spacing: -0.02em; }

/* Atelier, a long-form data story on warm paper: a serif voice and a drop capital on the prose. */
.dash[data-template="atelier"] .dash-sub { max-width: 760px; }
.dash[data-template="atelier"] .w-text::first-letter { float: left; margin: 6px 10px 0 0; font: 600 3.3em/0.82 var(--d-display); color: var(--d-accent); }
.dash[data-template="atelier"] .w-title { font-style: italic; }
.dash[data-template="atelier"] .kpi-value { font-family: var(--d-display); font-weight: 600; }

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


/* ---- 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: min(var(--d-radius), 4px);
    background: color-mix(in srgb, #FE5924 10%, var(--d-card)); border: 1px solid rgba(254, 89, 36, 0.3); box-shadow: inset 3px 0 0 #FE5924;
    color: var(--d-ink); font: 500 13.5px/1.45 var(--d-font);
}
.lock-banner > i { color: #FE5924; }
.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: 8px; margin-bottom: 18px; }
.theme-filters button { border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); border-radius: 3px; padding: 0 18px; height: 42px; font: 600 14px/1 var(--display); cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.theme-filters button:hover { border-color: var(--accent); color: var(--ink); }
.theme-filters button.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; }
.theme-filters button.new { margin-left: auto; border-color: var(--navy); color: #fff; background: var(--navy); box-shadow: inset 3px 0 0 var(--accent); }
[data-theme="dark"] .theme-filters button.new { background: var(--panel-3); border-color: var(--panel-3); }

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.theme-card { position: relative; border-radius: var(--r, 4px); overflow: hidden; border: 1px solid var(--line); background: var(--card); cursor: pointer; text-align: left; padding: 0; font: inherit; color: var(--ink); box-shadow: none; transition: transform 0.35s cubic-bezier(.2, .7, .2, 1), box-shadow 0.35s ease, border-color 0.3s ease; }
.theme-card::after { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 3px; background: var(--accent); transition: width 0.4s cubic-bezier(.2, .7, .2, 1); z-index: 2; }
.theme-card:hover, .theme-card:focus-visible { transform: translateY(-4px); border-color: transparent; box-shadow: var(--shadow); outline: none; }
.theme-card:hover::after, .theme-card:focus-visible::after, .theme-card.current::after { width: 100%; }
.theme-card.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.theme-thumb { position: relative; height: 120px; overflow: hidden; border-bottom: 1px solid var(--line); }
.theme-current { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 2px; background: var(--accent); 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: 12px 14px 14px; }
.theme-meta strong { display: block; font: 700 14.5px/1.3 var(--display); color: var(--ink); }
.theme-meta span:not(.chip) { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.theme-lock { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 2px; background: #1B1E31; 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; z-index: 3; }
.theme-tools button { width: 28px; height: 28px; border: 0; border-radius: 2px; background: #1B1E31; color: #fff; cursor: pointer; font-size: 12px; transition: background 0.2s ease; }
.theme-tools button:hover { background: var(--accent); }
.theme-new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 184px; border: 2px dashed var(--line-2); background: transparent; }
.theme-new::after { content: none; }
.theme-new:hover { border-color: var(--accent); border-style: dashed; }
.theme-new i { width: 52px; height: 52px; border-radius: 50%; background: var(--bg-2); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 6px; transition: background 0.25s ease, color 0.25s ease; }
.theme-new:hover i { background: var(--accent); color: #fff; }
.theme-new strong { font: 700 15px/1.3 var(--display); }
.theme-new span { font-size: 12.5px; color: var(--ink-3); text-align: center; padding: 0 12px; }


/* ---- 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: 4px; padding: 12px 14px 14px; margin-bottom: 12px; }
.studio-form legend { font: 600 13px/1 var(--display); color: var(--ink); padding: 0 6px; }
.studio-form legend::before { content: ''; display: inline-block; width: 14px; height: 2px; margin: 0 8px 3px 0; background: var(--accent); vertical-align: middle; }
.st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.st-field { display: flex; flex-direction: column; gap: 5px; font: 600 12.5px/1.3 var(--display); color: var(--ink-2); }
.st-field em { font-style: normal; color: var(--ink-3); font-weight: 500; }
.st-field select { height: 36px; border-radius: 3px; 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: 3px; 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: 4px; 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="atelier"] { --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: 3px; 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: #FE5924; padding: 0 8px 0 6px; flex-shrink: 0; font-family: var(--display, 'Syne', sans-serif); }
.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: #FE5924; color: #fff; }
.dash-editbar .insert-bar .d-btn:hover i { color: #fff; }
.dash-editbar .insert-bar .d-btn i { color: #FE5924; }
.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: 4px;
    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; }
}