/* HealthForward Admin Console kit — browser-window mock-ups of real Admin Console screens.
   Every class starts with dk-. Every variable starts with --dk-.
   Theme: light by default; dark when an ancestor has data-theme="dark", or when the
   visitor's system is dark and no ancestor sets data-theme.
   Each screen is drawn on a fixed 1280 x 800 canvas and scaled to the window width
   (kit.js sets --dk-scale; the container-query steps at the end are the no-JS floor). */

/* ---------- Theme variables ---------- */
.dk-mac-window, .dk-hero {
  /* Window chrome */
  --dk-chrome: #f6f6f7;
  --dk-chrome-border: #dcdcde;
  --dk-chrome-ink: #6b6b70;
  --dk-pill: #ffffff;
  --dk-pill-border: #e2e2e5;
  --dk-window-ring: rgba(15, 28, 42, .10);
  --dk-window-shadow: 0 1px 2px rgba(15, 28, 42, .06), 0 8px 24px -6px rgba(15, 28, 42, .14), 0 32px 64px -24px rgba(15, 28, 42, .22);

  /* Admin Console tokens (src/ui/tokens.css, light) */
  --dk-canvas: #ffffff;
  --dk-surface: #ffffff;
  --dk-raised: #ffffff;
  --dk-sunken: #f4f5f7;
  --dk-hover: #f1f3f5;
  --dk-selected: #e9f4f5;
  --dk-border: #e3e7eb;
  --dk-border-strong: #cfd6dc;
  --dk-control: #8a96a1;
  --dk-ink: #0f1c2a;
  --dk-muted: #4f5b67;
  --dk-subtle: #65717d;
  --dk-disabled: #a9b2ba;
  --dk-primary: #06284e;
  --dk-on-primary: #ffffff;
  --dk-accent: #0a7b84;
  --dk-accent-strong: #086a72;
  --dk-accent-soft: #e6f3f4;
  --dk-success: #3f7a1c;
  --dk-success-soft: #edf6e5;
  --dk-warning: #a15c00;
  --dk-warning-soft: #fdf3e3;
  --dk-danger: #c0362c;
  --dk-danger-soft: #fcebea;
  --dk-grid: #e8ecef;
  --dk-scrim: rgba(15, 28, 42, .32);
  --dk-shadow-xs: 0 1px 2px rgba(15, 28, 42, .06);
  --dk-shadow-sm: 0 1px 3px rgba(15, 28, 42, .08), 0 1px 2px rgba(15, 28, 42, .04);
  --dk-shadow-lg: -16px 0 48px rgba(15, 28, 42, .16);

  /* Admin shell (src/app/admin/_shell/theme.module.css, light) */
  --dk-side: #070d16;
  --dk-side-hover: #0e1623;
  --dk-side-active: #172336;
  --dk-side-ring: rgba(255, 255, 255, .08);
  --dk-side-ink: rgba(255, 255, 255, .74);
  --dk-side-label: rgba(255, 255, 255, .46);
  --dk-side-meta: rgba(255, 255, 255, .58);
  --dk-side-pill: rgba(255, 255, 255, .12);
  --dk-side-card: #0e1623;
  --dk-brand-green: #7ab940;
  --dk-panel-ring: transparent;
  --dk-navy: #0e3563;
  --dk-amber: #d98a0b;
  --dk-series-muted: #d5dae0;
  --dk-track: #e8ebee;
  --dk-tip: #0e3563;
  --dk-tip-ink: #ffffff;
  --dk-tip-muted: #b9c6d6;
  --dk-mono-navy-bg: #06284e;
  --dk-mono-navy-ink: #ffffff;
  --dk-mono-lime-bg: #eaf3dc;
  --dk-mono-lime-ink: #4a7a18;
  --dk-mono-blue-bg: #e6edfb;
  --dk-mono-blue-ink: #2f55b8;

  --dk-font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --dk-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Dark values, written once and applied by the two selectors below. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .dk-mac-window:not(:where([data-theme="light"] *)),
  :root:not([data-theme]) .dk-hero:not(:where([data-theme="light"] *)) {
    --dk-chrome: #2b2b2e; --dk-chrome-border: #3a3a3d; --dk-chrome-ink: #a1a1a6; --dk-pill: #1e1e21; --dk-pill-border: #3a3a3d;
    --dk-window-ring: rgba(255, 255, 255, .10);
    --dk-window-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -8px rgba(0, 0, 0, .6), 0 40px 80px -24px rgba(0, 0, 0, .7);
    --dk-canvas: #000; --dk-surface: #0a0a0a; --dk-raised: #141414; --dk-sunken: #111; --dk-hover: #1a1a1a; --dk-selected: #0f2a2d;
    --dk-border: #222; --dk-border-strong: #333; --dk-control: #666; --dk-ink: #ededed; --dk-muted: #a6a6a6; --dk-subtle: #8c8c8c; --dk-disabled: #4a4a4a;
    --dk-primary: #4fc0c8; --dk-on-primary: #06202f; --dk-accent: #4fc0c8; --dk-accent-strong: #7fd6dc; --dk-accent-soft: #11333a;
    --dk-success: #8fd35a; --dk-success-soft: #15301c; --dk-warning: #f0a948; --dk-warning-soft: #33260f; --dk-danger: #f2766b; --dk-danger-soft: #3a1c1c;
    --dk-grid: #1c1c1c; --dk-scrim: rgba(0, 0, 0, .64); --dk-shadow-xs: none; --dk-shadow-sm: 0 1px 3px rgba(0, 0, 0, .5); --dk-shadow-lg: -16px 0 48px rgba(0, 0, 0, .6);
    --dk-side: #0b1422; --dk-side-hover: #121d2e; --dk-side-active: #1a2941; --dk-side-card: #121d2e; --dk-panel-ring: #333;
    --dk-navy: #8fb4dc; --dk-amber: #f0a948; --dk-series-muted: #3a3f45; --dk-track: #1f1f1f;
    --dk-tip: #ededed; --dk-tip-ink: #0a0a0a; --dk-tip-muted: #4f5b67;
    --dk-mono-navy-bg: #17304f; --dk-mono-navy-ink: #cfe0f4; --dk-mono-lime-bg: #1f2e12; --dk-mono-lime-ink: #a5d66b; --dk-mono-blue-bg: #17233f; --dk-mono-blue-ink: #9db7f2;
  }
}
[data-theme="dark"] .dk-mac-window, [data-theme="dark"] .dk-hero,
.dk-mac-window[data-theme="dark"], .dk-hero[data-theme="dark"] {
  --dk-chrome: #2b2b2e; --dk-chrome-border: #3a3a3d; --dk-chrome-ink: #a1a1a6; --dk-pill: #1e1e21; --dk-pill-border: #3a3a3d;
  --dk-window-ring: rgba(255, 255, 255, .10);
  --dk-window-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -8px rgba(0, 0, 0, .6), 0 40px 80px -24px rgba(0, 0, 0, .7);
  --dk-canvas: #000; --dk-surface: #0a0a0a; --dk-raised: #141414; --dk-sunken: #111; --dk-hover: #1a1a1a; --dk-selected: #0f2a2d;
  --dk-border: #222; --dk-border-strong: #333; --dk-control: #666; --dk-ink: #ededed; --dk-muted: #a6a6a6; --dk-subtle: #8c8c8c; --dk-disabled: #4a4a4a;
  --dk-primary: #4fc0c8; --dk-on-primary: #06202f; --dk-accent: #4fc0c8; --dk-accent-strong: #7fd6dc; --dk-accent-soft: #11333a;
  --dk-success: #8fd35a; --dk-success-soft: #15301c; --dk-warning: #f0a948; --dk-warning-soft: #33260f; --dk-danger: #f2766b; --dk-danger-soft: #3a1c1c;
  --dk-grid: #1c1c1c; --dk-scrim: rgba(0, 0, 0, .64); --dk-shadow-xs: none; --dk-shadow-sm: 0 1px 3px rgba(0, 0, 0, .5); --dk-shadow-lg: -16px 0 48px rgba(0, 0, 0, .6);
  --dk-side: #0b1422; --dk-side-hover: #121d2e; --dk-side-active: #1a2941; --dk-side-card: #121d2e; --dk-panel-ring: #333;
  --dk-navy: #8fb4dc; --dk-amber: #f0a948; --dk-series-muted: #3a3f45; --dk-track: #1f1f1f;
  --dk-tip: #ededed; --dk-tip-ink: #0a0a0a; --dk-tip-muted: #4f5b67;
  --dk-mono-navy-bg: #17304f; --dk-mono-navy-ink: #cfe0f4; --dk-mono-lime-bg: #1f2e12; --dk-mono-lime-ink: #a5d66b; --dk-mono-blue-bg: #17233f; --dk-mono-blue-ink: #9db7f2;
}

/* ---------- Window ---------- */
.dk-mac-window {
  container: dkwin / inline-size;
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--dk-chrome);
  box-shadow: 0 0 0 1px var(--dk-window-ring), var(--dk-window-shadow);
  font-family: var(--dk-font);
  -webkit-font-smoothing: antialiased;
  text-align: left;
  isolation: isolate;
}
.dk-mac-window *, .dk-mac-window *::before, .dk-mac-window *::after { box-sizing: border-box; }

.dk-titlebar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(0, auto) 1fr;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 12px 0 14px;
  background: var(--dk-chrome);
  border-bottom: 1px solid var(--dk-chrome-border);
  color: var(--dk-chrome-ink);
  font: 500 12px/1 var(--dk-font);
  white-space: nowrap;
}
.dk-traffic-lights { display: flex; gap: 8px; justify-self: start; }
.dk-traffic-lights i { display: block; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18); }
.dk-traffic-lights i:nth-child(1) { background: #FF5F57; }
.dk-traffic-lights i:nth-child(2) { background: #FEBC2E; }
.dk-traffic-lights i:nth-child(3) { background: #28C840; }

.dk-url {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 0; max-width: 100%; height: 24px; padding: 0 12px;
  border-radius: 7px; background: var(--dk-pill); box-shadow: inset 0 0 0 1px var(--dk-pill-border);
  color: var(--dk-ink); font: 500 12px/1 var(--dk-font); overflow: hidden;
}
.dk-url svg { width: 11px; height: 11px; flex: none; color: var(--dk-chrome-ink); }
.dk-url span { color: var(--dk-chrome-ink); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.dk-sample-tag {
  justify-self: end; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px;
  border-radius: 999px; background: var(--dk-accent-soft); color: var(--dk-accent-strong);
  font: 600 11px/1 var(--dk-font); letter-spacing: .01em;
}
.dk-sample-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* Scaled canvas */
.dk-viewport {
  --dk-scale: .5;
  --dk-crop: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 800;
  overflow: hidden;
  background: var(--dk-side);
}
.dk-canvas {
  position: absolute; left: 0; top: 0;
  width: 1280px; height: 800px;
  transform-origin: 0 0;
  transform: scale(var(--dk-scale)) translateX(calc(var(--dk-crop) * -1px));
}

/* Narrow windows: drop the sidebar from view so the content stays legible. */
@container dkwin (max-width: 560px) {
  .dk-viewport { --dk-crop: 232; aspect-ratio: 1048 / 800; }
  .dk-titlebar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: 0 10px; }
  .dk-url { justify-self: center; }
  .dk-url span { display: none; }
}
@container dkwin (max-width: 340px) {
  .dk-url { display: none; }
  .dk-titlebar { grid-template-columns: auto 1fr; }
}

/* ---------- App shell (shell.module.css) ---------- */
.dk-app { position: relative;
  display: grid; grid-template-columns: 224px 1fr; width: 1280px; height: 800px;
  background: var(--dk-side); color: var(--dk-ink); font: 400 13px/20px var(--dk-font);
  font-variant-numeric: tabular-nums; overflow: hidden;
}
.dk-app p { margin: 0; }
.dk-app svg { flex: none; }
.dk-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dk-ico-sm { width: 14px; height: 14px; }

.dk-side { display: flex; flex-direction: column; gap: 18px; padding: 14px 12px 12px; color: var(--dk-side-ink); min-width: 0; }
.dk-brand { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px; color: #fff; font: 600 15px/1 var(--dk-font); letter-spacing: -.01em; }
.dk-brand svg { width: 30px; height: 20px; }
.dk-brand .dk-collapse { margin-left: auto; color: var(--dk-side-label); }
.dk-group { display: flex; flex-direction: column; gap: 2px; }
.dk-group-label { padding: 0 10px 6px; color: var(--dk-side-label); font: 500 11px/16px var(--dk-font); letter-spacing: .04em; text-transform: uppercase; }
.dk-nav { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 8px; font: 500 13px/20px var(--dk-font); }
.dk-nav .dk-ico { color: var(--dk-side-label); }
.dk-nav.is-active { background: var(--dk-side-active); box-shadow: inset 0 0 0 1px var(--dk-side-ring); color: #fff; }
.dk-nav.is-active .dk-ico { color: var(--dk-brand-green); }
.dk-count { margin-left: auto; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--dk-side-pill); color: #fff; font: 500 11px/18px var(--dk-font); text-align: center; }
.dk-account { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: var(--dk-side-card); box-shadow: inset 0 0 0 1px var(--dk-side-ring); }
.dk-account b { display: block; color: #fff; font: 600 13px/18px var(--dk-font); }
.dk-account small { display: block; color: var(--dk-side-meta); font: 400 11px/16px var(--dk-font); }
.dk-account .dk-av { background: #0a7b84; color: #fff; }

.dk-panel { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 8px 8px 8px 0; border-radius: 12px; background: var(--dk-surface); box-shadow: 0 0 0 1px var(--dk-panel-ring); overflow: hidden; }
.dk-top { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--dk-border); flex: none; }
.dk-crumbs { display: flex; align-items: center; gap: 6px; color: var(--dk-subtle); font: 500 13px/20px var(--dk-font); }
.dk-crumbs b { color: var(--dk-ink); font-weight: 500; }
.dk-crumbs i { font-style: normal; color: var(--dk-disabled); }
.dk-search { margin-left: auto; display: flex; align-items: center; gap: 8px; width: 220px; height: 30px; padding: 0 6px 0 10px; border-radius: 8px; background: var(--dk-sunken); box-shadow: inset 0 0 0 1px var(--dk-border); color: var(--dk-subtle); }
.dk-search kbd, .dk-kbd { margin-left: auto; display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 4px; background: var(--dk-surface); box-shadow: inset 0 0 0 1px var(--dk-border); color: var(--dk-subtle); font: 500 11px/1 var(--dk-font); }
.dk-iconbtn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--dk-muted); position: relative; }
.dk-iconbtn.has-dot::after { content: ""; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--dk-accent); box-shadow: 0 0 0 2px var(--dk-surface); }
.dk-content { flex: 1; min-height: 0; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }

/* ---------- Page parts ---------- */
.dk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.dk-title { margin: 0; font: 600 20px/28px var(--dk-font); letter-spacing: -.005em; color: var(--dk-ink); }
.dk-desc { margin-top: 2px; color: var(--dk-muted); font: 400 13px/20px var(--dk-font); max-width: 640px; }
.dk-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.dk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid transparent; font: 500 13px/20px var(--dk-font); white-space: nowrap; }
.dk-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; gap: 4px; }
.dk-btn-primary { background: var(--dk-primary); color: var(--dk-on-primary); }
.dk-btn-secondary { background: var(--dk-surface); color: var(--dk-ink); border-color: var(--dk-control); box-shadow: var(--dk-shadow-xs); }
.dk-btn-ghost { color: var(--dk-muted); }
.dk-btn-danger { background: var(--dk-surface); color: var(--dk-danger); border-color: var(--dk-control); }

.dk-badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 4px; font: 500 12px/16px var(--dk-font); white-space: nowrap; }
.dk-badge .dk-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dk-b-neutral { background: var(--dk-sunken); color: var(--dk-muted); box-shadow: inset 0 0 0 1px var(--dk-border); }
.dk-b-info { background: var(--dk-accent-soft); color: var(--dk-accent-strong); }
.dk-b-success { background: var(--dk-success-soft); color: var(--dk-success); }
.dk-b-warning { background: var(--dk-warning-soft); color: var(--dk-warning); }
.dk-b-danger { background: var(--dk-danger-soft); color: var(--dk-danger); }

.dk-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 600 12px/1 var(--dk-font); flex: none; }
.dk-mono { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font: 600 11px/1 var(--dk-font); flex: none; }
.dk-m-teal { background: var(--dk-accent-soft); color: var(--dk-accent-strong); }
.dk-m-navy { background: var(--dk-mono-navy-bg); color: var(--dk-mono-navy-ink); }
.dk-m-lime { background: var(--dk-mono-lime-bg); color: var(--dk-mono-lime-ink); }
.dk-m-amber { background: var(--dk-warning-soft); color: var(--dk-warning); }
.dk-m-blue { background: var(--dk-mono-blue-bg); color: var(--dk-mono-blue-ink); }

.dk-card { background: var(--dk-surface); border: 1px solid var(--dk-border); border-radius: 12px; min-width: 0; }
.dk-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 0; }
.dk-card-title { margin: 0; font: 600 15px/22px var(--dk-font); color: var(--dk-ink); }
.dk-card-sub { font: 400 12px/16px var(--dk-font); color: var(--dk-subtle); }
.dk-card-body { padding: 16px; }
.dk-card-flush { padding: 12px 0 0; }
.dk-text { color: var(--dk-muted); }
.dk-small { font: 400 12px/16px var(--dk-font); color: var(--dk-subtle); }
.dk-mono-t { font-family: var(--dk-mono); font-size: 12px; }

.dk-table { width: 100%; border-collapse: collapse; font: 400 13px/20px var(--dk-font); }
.dk-table th { height: 34px; padding: 0 12px; background: var(--dk-sunken); border-bottom: 1px solid var(--dk-border); text-align: left; font: 600 11px/16px var(--dk-font); letter-spacing: .06em; text-transform: uppercase; color: var(--dk-subtle); white-space: nowrap; }
.dk-table td { height: 40px; padding: 0 12px; border-bottom: 1px solid var(--dk-border); color: var(--dk-muted); white-space: nowrap; }
.dk-table tr:last-child td { border-bottom: 0; }
.dk-table .r { text-align: right; }
.dk-table .strong { color: var(--dk-ink); font-weight: 500; }
.dk-table .is-selected td { background: var(--dk-selected); }
.dk-table th:first-child, .dk-table td:first-child { padding-left: 16px; }
.dk-table th:last-child, .dk-table td:last-child { padding-right: 16px; }
.dk-cell { display: flex; align-items: center; gap: 10px; }

.dk-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--dk-border); border: 1px solid var(--dk-border); border-radius: 12px; overflow: hidden; }
.dk-stat { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--dk-surface); }
.dk-stat-label { font: 500 12px/16px var(--dk-font); color: var(--dk-muted); }
.dk-stat-value { font: 600 22px/28px var(--dk-font); letter-spacing: -.01em; color: var(--dk-ink); }
.dk-stat-value small { margin-left: 4px; font: 500 13px/20px var(--dk-font); color: var(--dk-muted); }
.dk-stat.is-active { box-shadow: inset 0 -2px 0 var(--dk-accent); }

.dk-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--dk-sunken); box-shadow: inset 0 0 0 1px var(--dk-border); }
.dk-seg span { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px; color: var(--dk-subtle); font: 500 12px/1 var(--dk-font); }
.dk-seg span.is-on { background: var(--dk-raised); color: var(--dk-ink); box-shadow: inset 0 0 0 1px var(--dk-control), var(--dk-shadow-sm); }

.dk-tabs { display: flex; gap: 20px; box-shadow: inset 0 -1px 0 var(--dk-border); }
.dk-tabs span { display: inline-flex; align-items: center; gap: 6px; height: 36px; border-bottom: 2px solid transparent; color: var(--dk-subtle); font: 500 13px/20px var(--dk-font); white-space: nowrap; }
.dk-tabs span.is-on { color: var(--dk-ink); border-bottom-color: var(--dk-accent); }
.dk-tabs em { font: 500 11px/16px var(--dk-font); font-style: normal; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--dk-sunken); color: var(--dk-muted); text-align: center; }
.dk-tabs .is-on em { background: var(--dk-accent-soft); color: var(--dk-accent-strong); }

.dk-dl { display: grid; grid-template-columns: 132px 1fr; row-gap: 0; margin: 0; }
.dk-dl dt, .dk-dl dd { margin: 0; min-height: 34px; display: flex; align-items: center; font-size: 13px; }
.dk-dl dt { color: var(--dk-subtle); }
.dk-dl dd { color: var(--dk-ink); gap: 8px; min-width: 0; }

.dk-alert { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--dk-border); color: var(--dk-muted); }
.dk-alert b { color: var(--dk-ink); font-weight: 600; }
.dk-alert .dk-ico { margin-top: 2px; }
.dk-alert-info { background: var(--dk-accent-soft); } .dk-alert-info .dk-ico { color: var(--dk-accent-strong); }
.dk-alert-warning { background: var(--dk-warning-soft); } .dk-alert-warning .dk-ico { color: var(--dk-warning); }

/* ---------- Dashboard (overview.module.css) ---------- */
.dk-range { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; border-radius: 6px; border: 1px solid var(--dk-control); background: var(--dk-surface); color: var(--dk-ink); font: 500 13px/20px var(--dk-font); box-shadow: var(--dk-shadow-xs); }
.dk-kpi { display: flex; min-height: 172px; border: 1px solid var(--dk-border); border-radius: 12px; background: var(--dk-surface); box-shadow: var(--dk-shadow-xs); overflow: hidden; }
.dk-kpi-large { flex: 0 0 340px; display: flex; flex-direction: column; padding: 14px 16px 0; border-right: 1px solid var(--dk-border); }
.dk-kpi-label { font: 500 13px/20px var(--dk-font); color: var(--dk-muted); }
.dk-kpi-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.dk-kpi-value { font: 600 36px/40px var(--dk-font); letter-spacing: -.01em; color: var(--dk-ink); }
.dk-delta { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--dk-success-soft); color: var(--dk-success); font: 600 12px/1 var(--dk-font); }
.dk-versus { font: 400 12px/16px var(--dk-font); color: var(--dk-subtle); }
.dk-kpi-desc { margin-top: 6px; max-width: 300px; font: 400 12px/16px var(--dk-font); color: var(--dk-subtle); }
.dk-spark { margin-top: auto; display: block; width: calc(100% + 32px); margin-left: -16px; height: 46px; }
.dk-tiles { flex: 1; display: grid; grid-template-columns: 1fr 1fr; }
.dk-tile { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 16px; }
.dk-tile:nth-child(odd) { border-right: 1px solid var(--dk-border); }
.dk-tile:nth-child(-n+2) { border-bottom: 1px solid var(--dk-border); }
.dk-tile-label { font: 500 12px/16px var(--dk-font); color: var(--dk-muted); }
.dk-tile-value { font: 600 22px/28px var(--dk-font); letter-spacing: -.01em; color: var(--dk-ink); }
.dk-tile-cap { font: 400 11px/16px var(--dk-font); color: var(--dk-subtle); }
.dk-wells { display: grid; grid-template-columns: 1fr 352px; gap: 12px; }
.dk-well { display: flex; flex-direction: column; border: 1px solid var(--dk-border); border-radius: 12px; background: var(--dk-sunken); }
.dk-well-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px; }
.dk-well-title { font: 600 14px/20px var(--dk-font); color: var(--dk-ink); }
.dk-well-card { flex: 1; margin: 0 4px 4px; border-radius: 10px; background: var(--dk-surface); box-shadow: 0 0 0 1px var(--dk-border); padding: 12px 14px; position: relative; }
.dk-bars { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 152px; padding-left: 22px; }
.dk-bars::before { content: ""; position: absolute; left: 22px; right: 0; top: 0; bottom: 0; background: repeating-linear-gradient(to top, var(--dk-grid) 0 1px, transparent 1px 38px); }
.dk-bars i { position: relative; flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--dk-navy); }
.dk-bars i.is-zero { background: var(--dk-series-muted); height: 2px; }
.dk-bars i.is-hot { background: var(--dk-accent); }
.dk-yaxis { position: absolute; left: 14px; top: 12px; height: 152px; display: flex; flex-direction: column-reverse; justify-content: space-between; font: 400 10px/1 var(--dk-font); color: var(--dk-subtle); }
.dk-xaxis { display: flex; justify-content: space-between; padding: 8px 0 0 22px; font: 400 11px/16px var(--dk-font); color: var(--dk-subtle); }
.dk-tip { position: absolute; z-index: 2; padding: 8px 10px; border-radius: 8px; background: var(--dk-tip); color: var(--dk-tip-ink); font: 500 12px/16px var(--dk-font); box-shadow: 0 8px 24px rgba(15, 28, 42, .2); white-space: nowrap; }
.dk-tip small { display: block; color: var(--dk-tip-muted); font: 400 11px/16px var(--dk-font); }
.dk-tip b { font-weight: 600; }
.dk-donut-wrap { display: flex; align-items: center; gap: 18px; height: 100%; }
.dk-donut { position: relative; width: 132px; height: 132px; flex: none; }
.dk-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dk-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dk-donut-c b { font: 600 22px/26px var(--dk-font); color: var(--dk-ink); }
.dk-donut-c span { font: 400 11px/14px var(--dk-font); color: var(--dk-subtle); }
.dk-legend { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.dk-legend div { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; font: 400 12px/16px var(--dk-font); color: var(--dk-muted); }
.dk-legend i { width: 8px; height: 8px; border-radius: 2px; }
.dk-legend b { color: var(--dk-ink); font-weight: 600; }
.dk-legend small { display: block; grid-column: 2 / 4; margin-top: -8px; color: var(--dk-subtle); font-size: 11px; }

/* ---------- Detail layouts ---------- */
.dk-cols { display: grid; grid-template-columns: 1fr 340px; gap: 12px; min-height: 0; }
.dk-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dk-person { display: flex; align-items: center; gap: 14px; }
.dk-person .dk-av { width: 48px; height: 48px; font-size: 16px; }
.dk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; color: var(--dk-subtle); font-size: 12px; line-height: 16px; }
.dk-meta a { color: var(--dk-accent-strong); text-decoration: none; }
.dk-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--dk-disabled); }
.dk-totals { display: grid; grid-template-columns: repeat(4, 1fr); padding: 2px 0 12px; border-bottom: 1px solid var(--dk-border); }
.dk-totals div + div { padding-left: 14px; border-left: 1px solid var(--dk-border); }
.dk-totals span { display: block; font: 500 12px/16px var(--dk-font); color: var(--dk-muted); }
.dk-totals b { font: 600 18px/26px var(--dk-font); color: var(--dk-ink); }
.dk-totals small { font: 400 12px/16px var(--dk-font); color: var(--dk-subtle); margin-left: 4px; }
.dk-steps-chart { display: flex; align-items: flex-end; gap: 3px; height: 72px; margin-top: 14px; }
.dk-steps-chart i { flex: 1; border-radius: 2px 2px 0 0; background: var(--dk-accent); opacity: .9; }
.dk-steps-chart i.is-held { background: var(--dk-amber); }
.dk-steps-chart i.is-ign { background: var(--dk-series-muted); }
.dk-steps-chart i.is-today { background: var(--dk-primary); }
.dk-chart-legend { display: flex; gap: 14px; align-items: center; font: 400 11px/16px var(--dk-font); color: var(--dk-subtle); }
.dk-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dk-chart-legend i { width: 8px; height: 8px; border-radius: 2px; }

.dk-stepper { display: flex; gap: 16px; padding: 0; margin: 0; list-style: none; }
.dk-stepper li { flex: 1; display: flex; gap: 8px; align-items: center; color: var(--dk-muted); font: 500 13px/20px var(--dk-font); }
.dk-stepper li::after { content: ""; flex: 1; height: 1px; background: var(--dk-border); margin-left: 4px; }
.dk-stepper li:last-child::after { display: none; }
.dk-stepper .dk-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--dk-control); color: var(--dk-subtle); background: var(--dk-surface); font: 600 11px/1 var(--dk-mono); flex: none; }
.dk-stepper .is-done .dk-mark { border-color: var(--dk-accent); background: var(--dk-accent-soft); color: var(--dk-accent-strong); }
.dk-stepper .is-current { color: var(--dk-ink); font-weight: 600; }
.dk-stepper .is-current .dk-mark { border-color: var(--dk-primary); background: var(--dk-primary); color: var(--dk-on-primary); }
.dk-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--dk-border); border: 1px solid var(--dk-border); border-radius: 10px; overflow: hidden; }
.dk-counts div { background: var(--dk-surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.dk-counts b { font: 600 22px/28px var(--dk-font); color: var(--dk-ink); letter-spacing: -.01em; }
.dk-counts span { font: 400 12px/16px var(--dk-font); color: var(--dk-muted); }
.dk-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--dk-sunken); box-shadow: inset 0 0 0 1px var(--dk-border); }
.dk-file .dk-mono { background: var(--dk-success-soft); color: var(--dk-success); }
.dk-file b { color: var(--dk-ink); font-weight: 500; }

/* Drawer over the panel (overlays/Drawer.module.css) */
.dk-scrim { position: absolute; inset: 0; background: var(--dk-scrim); z-index: 3; }
.dk-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 420px; z-index: 4; display: flex; flex-direction: column; background: var(--dk-raised); box-shadow: var(--dk-shadow-lg); border-left: 1px solid var(--dk-border); }
.dk-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--dk-border); }
.dk-drawer-body { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.dk-drawer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--dk-border); }
.dk-field label { display: block; margin-bottom: 6px; font: 500 13px/20px var(--dk-font); color: var(--dk-ink); }
.dk-textarea { min-height: 116px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--dk-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dk-accent) 18%, transparent); background: var(--dk-surface); color: var(--dk-ink); font: 400 13px/20px var(--dk-font); }
.dk-hint { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font: 400 12px/16px var(--dk-font); color: var(--dk-subtle); }

/* ---------- Hero composite: big window with the page's phone overlapping lower right ---------- */
.dk-hero { position: relative; display: block; padding: 0 clamp(36px, 9vw, 150px) clamp(48px, 7vw, 96px) 0; max-width: 1240px; margin: 0 auto; }
.dk-hero > .dk-mac-window { position: relative; z-index: 0; }
.dk-hero-phone { position: absolute; right: 0; bottom: 0; z-index: 1; --pw: 300; }
@media (max-width: 1279.98px) { .dk-hero-phone { --pw: 260; } }
@media (max-width: 899.98px) { .dk-hero-phone { --pw: 200; } }
@media (max-width: 599.98px) { .dk-hero { padding: 0 40px 64px 0; } .dk-hero-phone { --pw: 150; } }

/* No-JS floor for --dk-scale (kit.js sets the exact value). */
@container dkwin (min-width: 280px) { .dk-viewport { --dk-scale: 0.2672; } }
@container dkwin (min-width: 300px) { .dk-viewport { --dk-scale: 0.2863; } }
@container dkwin (min-width: 320px) { .dk-viewport { --dk-scale: 0.3053; } }
@container dkwin (min-width: 340px) { .dk-viewport { --dk-scale: 0.3244; } }
@container dkwin (min-width: 360px) { .dk-viewport { --dk-scale: 0.3435; } }
@container dkwin (min-width: 380px) { .dk-viewport { --dk-scale: 0.3626; } }
@container dkwin (min-width: 400px) { .dk-viewport { --dk-scale: 0.3817; } }
@container dkwin (min-width: 420px) { .dk-viewport { --dk-scale: 0.4008; } }
@container dkwin (min-width: 440px) { .dk-viewport { --dk-scale: 0.4198; } }
@container dkwin (min-width: 460px) { .dk-viewport { --dk-scale: 0.4389; } }
@container dkwin (min-width: 480px) { .dk-viewport { --dk-scale: 0.4580; } }
@container dkwin (min-width: 500px) { .dk-viewport { --dk-scale: 0.4771; } }
@container dkwin (min-width: 520px) { .dk-viewport { --dk-scale: 0.4962; } }
@container dkwin (min-width: 540px) { .dk-viewport { --dk-scale: 0.5153; } }
@container dkwin (min-width: 560px) { .dk-viewport { --dk-scale: 0.5344; } }
@container dkwin (min-width: 580px) { .dk-viewport { --dk-scale: 0.4531; } }
@container dkwin (min-width: 600px) { .dk-viewport { --dk-scale: 0.4688; } }
@container dkwin (min-width: 620px) { .dk-viewport { --dk-scale: 0.4844; } }
@container dkwin (min-width: 640px) { .dk-viewport { --dk-scale: 0.5000; } }
@container dkwin (min-width: 660px) { .dk-viewport { --dk-scale: 0.5156; } }
@container dkwin (min-width: 680px) { .dk-viewport { --dk-scale: 0.5312; } }
@container dkwin (min-width: 700px) { .dk-viewport { --dk-scale: 0.5469; } }
@container dkwin (min-width: 720px) { .dk-viewport { --dk-scale: 0.5625; } }
@container dkwin (min-width: 740px) { .dk-viewport { --dk-scale: 0.5781; } }
@container dkwin (min-width: 760px) { .dk-viewport { --dk-scale: 0.5938; } }
@container dkwin (min-width: 780px) { .dk-viewport { --dk-scale: 0.6094; } }
@container dkwin (min-width: 800px) { .dk-viewport { --dk-scale: 0.6250; } }
@container dkwin (min-width: 820px) { .dk-viewport { --dk-scale: 0.6406; } }
@container dkwin (min-width: 840px) { .dk-viewport { --dk-scale: 0.6562; } }
@container dkwin (min-width: 860px) { .dk-viewport { --dk-scale: 0.6719; } }
@container dkwin (min-width: 880px) { .dk-viewport { --dk-scale: 0.6875; } }
@container dkwin (min-width: 900px) { .dk-viewport { --dk-scale: 0.7031; } }
@container dkwin (min-width: 920px) { .dk-viewport { --dk-scale: 0.7188; } }
@container dkwin (min-width: 940px) { .dk-viewport { --dk-scale: 0.7344; } }
@container dkwin (min-width: 960px) { .dk-viewport { --dk-scale: 0.7500; } }
@container dkwin (min-width: 980px) { .dk-viewport { --dk-scale: 0.7656; } }
@container dkwin (min-width: 1000px) { .dk-viewport { --dk-scale: 0.7812; } }
@container dkwin (min-width: 1020px) { .dk-viewport { --dk-scale: 0.7969; } }
@container dkwin (min-width: 1040px) { .dk-viewport { --dk-scale: 0.8125; } }
@container dkwin (min-width: 1060px) { .dk-viewport { --dk-scale: 0.8281; } }
@container dkwin (min-width: 1080px) { .dk-viewport { --dk-scale: 0.8438; } }
@container dkwin (min-width: 1100px) { .dk-viewport { --dk-scale: 0.8594; } }
@container dkwin (min-width: 1120px) { .dk-viewport { --dk-scale: 0.8750; } }
@container dkwin (min-width: 1140px) { .dk-viewport { --dk-scale: 0.8906; } }
@container dkwin (min-width: 1160px) { .dk-viewport { --dk-scale: 0.9062; } }
@container dkwin (min-width: 1180px) { .dk-viewport { --dk-scale: 0.9219; } }
@container dkwin (min-width: 1200px) { .dk-viewport { --dk-scale: 0.9375; } }
@container dkwin (min-width: 1220px) { .dk-viewport { --dk-scale: 0.9531; } }
@container dkwin (min-width: 1240px) { .dk-viewport { --dk-scale: 0.9688; } }
@container dkwin (min-width: 1260px) { .dk-viewport { --dk-scale: 0.9844; } }
@container dkwin (min-width: 1280px) { .dk-viewport { --dk-scale: 1.0000; } }
.dk-seg > span { white-space: nowrap; }