/* =====================================================================
 *  dashboard-layouts.css — 4 selectable dashboard LAYOUTS.
 *
 *  Driven by html[data-dashboard] (set by theme.js):
 *     atelier  → the current dashboard (default; this file does nothing)
 *     sidebar  → left nav rail + metric cards
 *     tabular  → top tabs + stat ribbon + dense data tables
 *     bento    → asymmetric modular tiles
 *     tabs     → centered hero + big tabs + focused section
 *
 *  dashboard-layouts.js builds a .cb-dash container from the SAME live stat
 *  elements (#statTotalViews …) the page already renders, so every value is
 *  real. Colours + type come from the active Experience via the design
 *  tokens (var(--primary), var(--cb-display) …) — any layout works with any
 *  experience.
 *
 *  When a NON-atelier layout is active, the original dashboard content in
 *  <main> is hidden and .cb-dash takes over.
 * ===================================================================== */

/* hide the original dashboard body only when a new layout is active */
html[data-dashboard="sidebar"] main > *:not(.cb-dash),
html[data-dashboard="tabular"] main > *:not(.cb-dash),
html[data-dashboard="bento"]   main > *:not(.cb-dash),
html[data-dashboard="tabs"]    main > *:not(.cb-dash),
html[data-dashboard="draconium"] main > *:not(.cb-dash),
html[data-dashboard="draconium-min"] main > *:not(.cb-dash){ display:none !important; }
.cb-dash{ display:none; }
html[data-dashboard="sidebar"] .cb-dash.lay-sidebar,
html[data-dashboard="tabular"] .cb-dash.lay-tabular,
html[data-dashboard="bento"]   .cb-dash.lay-bento,
html[data-dashboard="tabs"]    .cb-dash.lay-tabs,
html[data-dashboard="draconium"] .cb-dash.lay-draconium,
html[data-dashboard="draconium-min"] .cb-dash.lay-draconium{ display:block; }

.cb-dash{
    --cd-pnl: color-mix(in srgb, var(--cb-text, #fff) 5%, transparent);
    --cd-line: rgba(var(--primary-rgb, 179,20,50), .18);
    color: var(--cb-text, #eee);
    font-family: var(--cb-ui, system-ui, sans-serif);
}

/* ── Container fill toggle (site-wide, admin-set) ──────────────────────────
 * data-dash-containers="solid" makes EVERY dashboard-layout container opaque:
 * the exact same tint, but mixed over the theme's solid ink (--cb-ink) instead
 * of transparent — so the animated page background no longer shows through.
 * "transparent" (default, no attribute needed) keeps the original glassy look.
 * Because every layout draws its containers from these shared tokens, one rule
 * flips them all — and any FUTURE layout that uses the same tokens is covered
 * automatically. Only the container FILL changes; borders/gl/text are untouched. */
html[data-dash-containers="solid"] .cb-dash{
    --cd-pnl: color-mix(in srgb, var(--cb-text, #fff) 5%, var(--cb-ink, #0e0f16));
}
html[data-dash-containers="solid"] .cb-dash.lay-draconium{
    --dr-panel: color-mix(in srgb, var(--cb-text, #fff) 4%, var(--cb-ink, #0e0f16));
    --dr-pill:  color-mix(in srgb, var(--cb-text, #fff) 3%, var(--cb-ink, #0e0f16));
    --dr-inset: color-mix(in srgb, var(--primary, #C40E2E) 9%, var(--cb-ink, #0e0f16));
}
.cb-dash *{ box-sizing:border-box; }
.cd-num{ font-family: var(--cb-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
.cd-live{ color:#51E674; }
.cb-dash h1,.cb-dash h2,.cb-dash h3{ font-family: var(--cb-display, sans-serif); }
.cb-dash a{ text-decoration:none; }

/* shared bits */
.cd-mc{ background:var(--cd-pnl); border:1px solid var(--cd-line); border-radius:16px; padding:18px 20px; }
.cd-k{ font-family:var(--cb-mono,monospace); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cb-faint,#999); }
.cd-v{ font-family:var(--cb-display,sans-serif); font-weight:800; font-size:32px; margin-top:6px; line-height:1; }
.cd-d{ font-size:12px; color:var(--cb-muted,#bbb); margin-top:6px; }
.cd-btn{ font-family:var(--cb-display,sans-serif); font-weight:600; font-size:13px; padding:11px 18px; border-radius:12px; cursor:pointer; border:0; color:#0a0710; background:var(--gradient, linear-gradient(100deg,var(--primary),var(--secondary))); display:inline-flex; align-items:center; gap:8px; }
.cd-btn.g{ color:var(--cb-text,#eee); background:var(--cd-pnl); border:1px solid var(--cd-line); }
.cd-chip{ font-family:var(--cb-mono,monospace); font-size:12px; color:var(--cb-muted,#bbb); padding:8px 13px; border-radius:11px; background:var(--cd-pnl); border:1px solid var(--cd-line); display:inline-flex; gap:7px; align-items:center; }
.cd-chip .dot{ width:7px;height:7px;border-radius:50%;background:#51E674;box-shadow:0 0 8px #51E674; }
.cd-badge{ font-family:var(--cb-mono,monospace); font-size:11px; padding:2px 8px; border-radius:8px; background:rgba(var(--primary-rgb,179,20,50),.18); color:var(--primary,#f55); }

/* ---- SIDEBAR ---- */
.lay-sidebar{ display:none; }
.lay-sidebar .cd-wrap{ display:grid; grid-template-columns:240px 1fr; gap:22px; align-items:start; }
.lay-sidebar .cd-side{ background:var(--cd-pnl); border:1px solid var(--cd-line); border-radius:18px; padding:20px 14px; }
.lay-sidebar .cd-side .brand{ font-family:var(--cb-display); font-weight:800; font-size:17px; padding:4px 10px 16px; }
.lay-sidebar .cd-slab{ margin:12px 10px 6px; font-family:var(--cb-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--cb-faint,#999); }
.lay-sidebar .cd-side a{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:var(--cb-rect-r,14px); color:var(--cb-muted,#bbb); font-size:14px; font-weight:500; }
.lay-sidebar .cd-side a:hover{ background:rgba(var(--primary-rgb),.08); color:var(--cb-text); }
.lay-sidebar .cd-side a.on{ color:#0a0710; background:var(--gradient-active, var(--gradient)); }
.lay-sidebar .cd-side a .b{ margin-left:auto; font-family:var(--cb-mono); font-size:11px; }
.lay-sidebar .cd-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:14px; }
.lay-sidebar .cd-top h1{ font-weight:700; font-size:26px; }
.lay-sidebar .cd-top .sub{ font-size:13px; color:var(--cb-muted,#bbb); margin-top:3px; }
.lay-sidebar .cd-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px; }
.lay-sidebar .cd-grid2{ display:grid; grid-template-columns:1.4fr 1fr; gap:14px; }
.lay-sidebar .cd-panel{ background:var(--cd-pnl); border:1px solid var(--cd-line); border-radius:16px; padding:18px 20px; }
.lay-sidebar .cd-panel h3{ font-weight:700; font-size:15px; margin-bottom:12px; }
.lay-sidebar .cd-act{ display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--cd-line); }
.lay-sidebar .cd-act:last-child{ border:0; }
.lay-sidebar .cd-act .tt{ font-weight:600; font-size:14px; }
.lay-sidebar .cd-act .ss{ font-size:12px; color:var(--cb-muted,#bbb); }
.lay-sidebar .cd-act .n{ margin-left:auto; font-family:var(--cb-mono); color:var(--primary); }
.lay-sidebar .cd-qa{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.lay-sidebar .cd-qa a{ padding:11px 13px; border-radius:var(--cb-rect-r,14px); background:var(--cd-pnl); border:1px solid var(--cd-line); color:var(--cb-text); font-size:13px; font-weight:500; }

/* ---- TABULAR ---- */
.lay-tabular{ display:none; }
.lay-tabular h1{ font-weight:700; font-size:24px; }
.lay-tabular .sub{ font-size:13px; color:var(--cb-muted,#bbb); margin:2px 0 20px; }
.lay-tabular .cd-ribbon{ display:grid; grid-template-columns:repeat(6,1fr); border:1px solid var(--cd-line); border-radius:12px; overflow:hidden; margin-bottom:22px; }
.lay-tabular .cd-ribbon .s{ padding:15px 18px; border-right:1px solid var(--cd-line); }
.lay-tabular .cd-ribbon .s:last-child{ border-right:0; }
.lay-tabular .cd-thd{ display:flex; align-items:center; justify-content:space-between; margin:22px 0 10px; }
.lay-tabular .cd-thd h2{ font-family:var(--cb-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cb-faint,#999); }
.lay-tabular table{ width:100%; border-collapse:collapse; font-size:14px; }
.lay-tabular thead th{ font-family:var(--cb-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cb-faint,#999); text-align:left; padding:10px 14px; border-bottom:1px solid var(--cd-line); }
.lay-tabular thead th.num{ text-align:right; }
.lay-tabular tbody td{ padding:12px 14px; border-bottom:1px solid var(--cd-line); }
.lay-tabular tbody tr:hover{ background:rgba(var(--primary-rgb),.05); }
.lay-tabular td.num{ font-family:var(--cb-mono); text-align:right; }

/* ---- BENTO ---- */
.lay-bento{ display:none; }
.lay-bento .cd-bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:16px; }
.lay-bento .cell{ background:var(--cd-pnl); border:1px solid var(--cd-line); border-radius:22px; padding:20px 22px; overflow:hidden; position:relative; }
.lay-bento .cover{ grid-column:span 2; grid-row:span 2; }
.lay-bento .cover h1{ font-weight:800; font-size:30px; margin:8px 0 2px; }
.lay-bento .cover .acts{ position:absolute; left:22px; bottom:20px; display:flex; gap:9px; }
.lay-bento .earn{ grid-column:span 2; }
.lay-bento .earn .cd-v{ font-size:38px; background:var(--gradient-hl, var(--gradient)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lay-bento .feed{ grid-column:span 2; grid-row:span 2; overflow-y:auto; }
.lay-bento .feed .ev{ display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--cd-line); }
.lay-bento .feed .ev:last-child{ border:0; }
.lay-bento .feed .n{ margin-left:auto; font-family:var(--cb-mono); color:var(--primary); }
.lay-bento .dock{ grid-column:span 4; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.lay-bento .dock a{ padding:11px 15px; border-radius:var(--cb-rect-r,14px); background:var(--cd-pnl); border:1px solid var(--cd-line); color:var(--cb-text); font-size:13px; font-weight:500; }

/* ---- TABS ---- */
.lay-tabs{ display:none; }
.lay-tabs .cd-hero{ text-align:center; padding:6px 0 0; }
.lay-tabs .cd-hero .eye{ font-family:var(--cb-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent,#FFB3C0); }
.lay-tabs .cd-hero h1{ font-weight:800; font-size:38px; margin:8px 0 4px; }
.lay-tabs .cd-hero .sub{ font-size:14px; color:var(--cb-muted,#bbb); }
.lay-tabs .cd-tabbar{ display:flex; justify-content:center; gap:6px; margin:22px auto 0; max-width:720px; padding:6px; background:var(--cd-pnl); border:1px solid var(--cd-line); border-radius:16px; }
.lay-tabs .cd-tabbar a{ flex:1; text-align:center; padding:12px 10px; border-radius:var(--cb-rect-r,14px); font-weight:600; font-size:14px; color:var(--cb-muted,#bbb); }
.lay-tabs .cd-tabbar a.on{ color:#0a0710; background:var(--gradient-active, var(--gradient)); }
.lay-tabs .cd-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:22px 0 20px; }
.lay-tabs .cd-stats .cd-mc{ text-align:center; }
.lay-tabs .cd-stats .cd-v{ background:var(--gradient-hl, var(--gradient)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-size:36px; }
.lay-tabs .cd-section{ background:var(--cd-pnl); border:1px solid var(--cd-line); border-radius:20px; padding:22px 24px; }
.lay-tabs .cd-section h3{ font-weight:700; font-size:18px; margin-bottom:2px; }
.lay-tabs .cd-section .sd{ font-size:13px; color:var(--cb-muted,#bbb); margin-bottom:16px; }
.lay-tabs .cd-row{ display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--cd-line); }
.lay-tabs .cd-row:last-child{ border:0; }
.lay-tabs .cd-row .n{ margin-left:auto; font-family:var(--cb-mono); color:var(--primary); }

/* ---- DRACONIUM ----------------------------------------------------------
 * A dragon-forged command console: two nav rails flank a central instrument
 * stage. Every colour is inherited from the active design language; the one
 * bold move is the chamfered, glowing stat card — crisp mech geometry against
 * the soft rounded shell. Transparency is uniform PER TYPE via the tokens
 * below (panels share --dr-panel, pills share --dr-pill, borders --dr-line…). */
.lay-draconium{ display:none;
  --dr-panel: color-mix(in srgb, var(--cb-text, #fff) 4%, transparent);   /* every container */
  --dr-pill:  color-mix(in srgb, var(--cb-text, #fff) 3%, transparent);   /* every nav pill / action button */
  --dr-line:      rgba(var(--primary-rgb, 196,14,46), .30);              /* the lit borderline */
  --dr-line-soft: rgba(var(--primary-rgb, 196,14,46), .13);              /* quiet borderline */
  --dr-glow:      rgba(var(--primary-rgb, 196,14,46), .32);
  --dr-inset: color-mix(in srgb, var(--primary, #C40E2E) 9%, transparent);   /* the notched sub-shelf */
}
/* the rails line up WITH the middle stage as one aligned row, but take their
 * own natural (content) height — they do NOT stretch to match the stage. */
/* --dr-railw is measured by dashboard-layouts.js to fit the LONGEST nav label
 * (in whatever font the active design language uses); both rails share it, so
 * every button in Studio and Admin Console ends up the same width. */
.lay-draconium .dr-shell{ display:grid; grid-template-columns:var(--dr-railw,max-content) minmax(0,1fr) var(--dr-railw,max-content); gap:20px; align-items:start; }
.lay-draconium .dr-shell.dr-solo{ grid-template-columns:var(--dr-railw,max-content) minmax(0,1fr); }

/* Unified single icon-rail dashboard: sidebar (left) + main content (right). The
 * rail itself is styled by draconium-admin.css (.dr-aside/.dr-brand/.dr-sgroup/
 * .dr-snav), which the dashboards now load. */
.lay-draconium .dr-dash2{ display:grid; grid-template-columns:248px minmax(0,1fr); gap:22px; align-items:start; }
.lay-draconium .dr-dash3{ display:grid; grid-template-columns:236px minmax(0,1fr) 236px; gap:22px; align-items:start; }
/* --dr-asideh is measured by dashboard-layouts.js: both dashboard sidebars get
 * the height of the TALLER one, so the two rails always end level. */
.lay-draconium .dr-dash3 .dr-dash-aside{ min-height:var(--dr-asideh,auto); }
.lay-draconium .dr-main{ min-width:0; display:flex; flex-direction:column; gap:18px; }
.lay-draconium .dr-main .dr-head{ margin:0; padding-bottom:0; }
.lay-draconium .dr-main .dr-stats{ margin-bottom:0; }

/* nav rails — rounded capsules holding the (left-justified) nav pills; height
 * follows their content (no auto-stretch). */
.lay-draconium .dr-rail{ align-self:start; background:var(--dr-panel); border:1px solid var(--dr-line-soft); border-radius:30px; padding:20px 14px; }
.lay-draconium .dr-rail-label{ text-align:left; font-family:var(--cb-display,sans-serif); font-weight:700; font-size:15px; color:var(--cb-text,#eee); padding:4px 6px 0; }
.lay-draconium .dr-rail-label::after{ content:''; display:block; height:1px; margin:12px 6px 4px; background:var(--dr-line-soft); }
/* space stacked sub-groups within a rail */
.lay-draconium .dr-nav + .dr-rail-label{ margin-top:20px; }
.lay-draconium .dr-nav{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
/* every pill is the same width (full rail) and height (one line), left-justified.
 * white-space:nowrap keeps labels on one line; the rail itself sizes to the
 * longest label (max-content / measured), so the text is never cut. */
.lay-draconium .dr-navlink{ display:flex; align-items:center; justify-content:center; text-align:center; width:100%; height:50px; padding:0 18px; border-radius:999px; font-size:13.5px; font-weight:600; white-space:nowrap; color:var(--cb-text,#eee); background:var(--dr-pill); border:1px solid var(--dr-line-soft); transition:color .18s, border-color .18s, box-shadow .18s, background .18s; }
.lay-draconium .dr-navlink .t{ overflow:visible; }
.lay-draconium .dr-navlink:hover{ border-color:var(--dr-line); box-shadow:0 0 22px -8px var(--dr-glow); }
.lay-draconium .dr-navlink.on{ color:#0a0710; background:var(--gradient-active, var(--gradient, linear-gradient(100deg,var(--primary),var(--secondary)))); border-color:transparent; box-shadow:0 8px 22px -8px var(--dr-glow); }

/* masthead */
.lay-draconium .dr-head{ padding:2px 2px 16px; }
.lay-draconium .dr-greet{ font-family:var(--cb-mono,monospace); font-size:12px; color:var(--cb-muted,#bbb); }
.lay-draconium .dr-title{ font-family:var(--cb-display,serif); font-weight:700; font-size:clamp(26px,3vw,34px); line-height:1.15; margin:5px 0 0; letter-spacing:-.01em; padding-right:.16em; }
.lay-draconium .dr-title em{ font-style:italic; color:var(--accent, #FFB3C0); }

/* central stage — clean rounded panel (the old scooped corner cut into the
 * first stat card once the masthead moved up, so it's gone) */
.lay-draconium .dr-stage{ position:relative; background:var(--dr-panel); border:1px solid var(--dr-line-soft); border-radius:28px; padding:24px; }
.lay-draconium .dr-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }

/* stat card: main metric, plus a NOTCHED secondary-metric shelf at bottom-right */
.lay-draconium .dr-stat{ position:relative; min-height:178px; padding:18px 20px 20px; background:var(--dr-panel); border:1px solid var(--dr-line); border-radius:16px; overflow:hidden; }
.lay-draconium .dr-stat .dr-k, .lay-draconium .dr-stat .dr-k2{ font-family:var(--cb-mono,monospace); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cb-faint,#999); }
.lay-draconium .dr-v{ font-family:var(--cb-mono,monospace); font-weight:700; font-size:clamp(25px,2.3vw,32px); line-height:1; margin-top:9px; color:var(--cb-text,#fff); text-shadow:0 0 22px var(--dr-glow); }
.lay-draconium .dr-sub{ font-size:11.5px; color:var(--cb-muted,#bbb); margin-top:7px; }
.lay-draconium .dr-stat-b{ position:absolute; right:0; bottom:0; min-width:48%; padding:11px 20px 14px; text-align:right; background:var(--dr-inset); border-top:1px solid var(--dr-line-soft); border-left:1px solid var(--dr-line-soft); border-top-left-radius:22px; }
.lay-draconium .dr-v2{ font-family:var(--cb-mono,monospace); font-weight:700; font-size:20px; color:var(--primary); margin-top:2px; }
.lay-draconium .dr-sub2{ font-size:10.5px; color:var(--cb-muted,#bbb); margin-top:1px; }

/* activity + quick actions */
.lay-draconium .dr-grid2{ display:grid; grid-template-columns:1.25fr 1fr; gap:16px; }
.lay-draconium .dr-panel{ background:var(--dr-panel); border:1px solid var(--dr-line-soft); border-radius:22px; padding:20px 22px; }
.lay-draconium .dr-panel h3{ font-family:var(--cb-display,serif); font-weight:700; font-size:17px; margin:0 0 14px; }
.lay-draconium .dr-act{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--dr-line-soft); color:var(--cb-text,#eee); }
.lay-draconium .dr-act:last-child{ border-bottom:0; }
.lay-draconium .dr-act .tt{ font-weight:600; font-size:14.5px; }
.lay-draconium .dr-act .ss{ font-size:12px; color:var(--cb-muted,#bbb); margin-top:2px; }
.lay-draconium .dr-act .n{ margin-left:auto; font-family:var(--cb-mono,monospace); font-size:18px; color:var(--primary); }
.lay-draconium .dr-qa{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.lay-draconium .dr-qbtn{ display:flex; align-items:center; justify-content:center; text-align:center; min-height:50px; padding:11px 12px; border-radius:var(--cb-rect-r,14px); background:var(--dr-pill); border:1px solid var(--dr-line-soft); color:var(--cb-text,#eee); font-size:13px; font-weight:600; transition:border-color .18s, box-shadow .18s; }
.lay-draconium .dr-qbtn:hover{ border-color:var(--dr-line); box-shadow:0 0 18px -8px var(--dr-glow); }

@media (max-width:1040px){
  .lay-draconium .dr-shell, .lay-draconium .dr-shell.dr-solo{ grid-template-columns:1fr; }
  .lay-draconium .dr-dash2, .lay-draconium .dr-dash3{ grid-template-columns:1fr; }
  .lay-draconium .dr-dash-aside-r{ order:3; }
  /* stacked single-column: matching heights would just add empty space */
  .lay-draconium .dr-dash3 .dr-dash-aside{ min-height:auto; }
  .lay-draconium .dr-rail{ position:static; }
  .lay-draconium .dr-nav{ display:grid; grid-template-columns:repeat(2,1fr); }
  .lay-draconium .dr-rail-r{ order:3; }
  .lay-draconium .dr-stage{ -webkit-mask:none; mask:none; }
}
@media (max-width:760px){
  .lay-draconium .dr-stats{ grid-template-columns:1fr; }
  .lay-draconium .dr-grid2{ grid-template-columns:1fr; }
  .lay-draconium .dr-nav{ grid-template-columns:1fr; }
}

/* ── DRACONIUM MINIMAL (dashboard side) ────────────────────────────────
 * Same builder, same markup, same grid — dashboard-layouts.js mounts the
 * identical .lay-draconium structure for 'draconium-min' and this section
 * quiets the skin: transparent panels, neutral hairlines, flat actives,
 * no glow. Shapes stay (the capsule radius is the site-wide contract). */
html[data-dashboard="draconium-min"] .cb-dash.lay-draconium{
  --dr-panel: transparent;
  --dr-pill:  transparent;
  --dr-inset: transparent;
  --dr-line:      color-mix(in srgb, var(--cb-text, #fff) 24%, transparent);
  --dr-line-soft: color-mix(in srgb, var(--cb-text, #fff) 10%, transparent);
  --dr-glow: transparent;
}
html[data-dashboard="draconium-min"][data-dash-containers="solid"] .cb-dash.lay-draconium{
  --dr-panel: var(--cb-ink, #0e0f16);
  --dr-pill:  color-mix(in srgb, var(--cb-text, #fff) 3%, var(--cb-ink, #0e0f16));
  --dr-inset: var(--cb-ink, #0e0f16);
}
html[data-dashboard="draconium-min"] .lay-draconium .dr-navlink:hover,
html[data-dashboard="draconium-min"] .lay-draconium .dr-qbtn:hover{ box-shadow:none; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-navlink.on{
  color:var(--primary, #C40E2E);
  background:rgba(var(--primary-rgb, 196,14,46), .10);
  border-color:rgba(var(--primary-rgb, 196,14,46), .35);
  box-shadow:none;
}
/* Stat cards: no glow on the metric, the notched shelf goes quiet, and
 * the lit borderline drops to the same hairline as everything else. */
html[data-dashboard="draconium-min"] .lay-draconium .dr-v{ text-shadow:none; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-stat{ border-color:var(--dr-line-soft); }

/* Minimal DENSITY — the dashboard drops one size class across the board:
 * narrower columns, tighter gaps, smaller cards, buttons and type. */
html[data-dashboard="draconium-min"] .lay-draconium .dr-dash2{ grid-template-columns:210px minmax(0,1fr); gap:14px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-dash3{ grid-template-columns:200px minmax(0,1fr) 200px; gap:14px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-main{ gap:12px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-rail{ padding:12px 10px; border-radius:18px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-rail-label{ font-size:13.5px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-rail-label::after{ margin:8px 6px 2px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-nav{ gap:8px; margin-top:6px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-nav + .dr-rail-label{ margin-top:14px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-navlink{ height:40px; padding:0 14px; font-size:12.5px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-head{ padding:0 0 10px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-greet{ font-size:11px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-title{ font-size:clamp(21px,2.4vw,26px); }
html[data-dashboard="draconium-min"] .lay-draconium .dr-stage{ padding:14px; border-radius:18px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-stats{ gap:10px; margin-bottom:10px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-stat{ min-height:128px; padding:12px 14px 14px; border-radius:13px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-stat .dr-k,
html[data-dashboard="draconium-min"] .lay-draconium .dr-stat .dr-k2{ font-size:9.5px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-v{ font-size:clamp(20px,1.8vw,24px); margin-top:6px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-sub{ font-size:10.5px; margin-top:5px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-stat-b{ padding:8px 14px 10px; border-top-left-radius:16px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-v2{ font-size:16px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-sub2{ font-size:10px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-grid2{ gap:10px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-panel{ padding:13px 14px; border-radius:16px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-panel h3{ font-size:15px; margin-bottom:9px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-act{ padding:9px 0; gap:9px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-act .tt{ font-size:13px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-act .ss{ font-size:11px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-act .n{ font-size:15px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-qa{ gap:8px; }
html[data-dashboard="draconium-min"] .lay-draconium .dr-qbtn{ min-height:38px; padding:8px 10px; font-size:12px; }

/* ── Minimal × phones ──────────────────────────────────────────────────
 * The density columns above OUTRANK the ≤1040px stack rules (they carry
 * the html[data-dashboard] attribute → higher specificity), so without
 * this re-assert a phone kept the desktop rail columns and the middle
 * minmax(0,1fr) column collapsed to ~0 — the greeting rendered one
 * letter per line. Same selector form + later source order wins here. */
@media (max-width:1040px){
  html[data-dashboard="draconium-min"] .lay-draconium .dr-dash2,
  html[data-dashboard="draconium-min"] .lay-draconium .dr-dash3{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .lay-sidebar .cd-wrap{ grid-template-columns:1fr; }
  .lay-sidebar .cd-metrics{ grid-template-columns:1fr 1fr; }
  .lay-sidebar .cd-grid2{ grid-template-columns:1fr; }
  .lay-tabular .cd-ribbon{ grid-template-columns:repeat(3,1fr); }
  .lay-bento .cd-bento{ grid-template-columns:1fr 1fr; }
  .lay-bento .cover,.lay-bento .earn,.lay-bento .feed,.lay-bento .dock{ grid-column:span 2; }
  .lay-tabs .cd-stats{ grid-template-columns:1fr; }
}