/* ==== Drill Coach (/drillcoach, Proof of Concept section, Platform batch 4 R4): the cab tablet and the supervisor (dc-) ====
   Same look as the rest of OneStop for the pages (app.css: panels, panel-head, table, hint, btn, toolbar, grid-2, demo-bar);
   the cab screen (dc-cab) is always dark, like a screen in a cab underground, whatever the theme of OneStop. Loaded by
   Components\App.razor for every page, last. Pages: TTech.Platform.Client\Apps\DrillCoach. Classes built in code (grep the
   prefix): dc-rock-soft / medium / hard / fractured (Dc.RockClass), dc-boom-1 / 2, dc-op-<operator id>, dc-state-<phase>,
   dc-hole-<status>, dc-log-<kind>, dc-summary-<kind>, dc-crew. Colours only through tokens (below and app.css), so the dark
   theme follows. Sizes of the cab follow its own width (container queries: dc-tablet, dc-cab-page), so the same screen
   fits the demo page, a phone-sized column and a full-screen tablet. */

:root {
  --dc-soft: #3f8f4f;
  --dc-medium: #b0913a;
  --dc-hard: #5d63b0;
  --dc-fractured: #c2593a;
  --dc-none: #9aa0a6;
  --dc-boom1: #b88f13;
  --dc-boom2: #1f7fa6;
  --dc-op-denis: #d9822b;
  --dc-op-kevin: #c0504d;
  --dc-op-patrick: #8064a2;
  --dc-op-isabelle: #2e9d6b;
  --dc-op-samuel: #3a7bd5;
  --dc-amber: #b86e0e;
  --dc-amber-soft: #fbecd6;
}

:root[data-theme="dark"] {
  --dc-soft: #6cc27a;
  --dc-medium: #d9bb63;
  --dc-hard: #9a9ff0;
  --dc-fractured: #ec8a69;
  --dc-boom1: #e0bf3f;
  --dc-boom2: #5fb8de;
  --dc-op-denis: #f0a25a;
  --dc-op-kevin: #ef7f7c;
  --dc-op-patrick: #b49ad8;
  --dc-op-isabelle: #5cc996;
  --dc-op-samuel: #7aa9ee;
  --dc-amber: #f0b45a;
  --dc-amber-soft: #3b2b17;
}

/* Rocks, booms and operators set a colour that their children use */
.dc-rock-soft { --rock: var(--dc-soft); }
.dc-rock-medium { --rock: var(--dc-medium); }
.dc-rock-hard { --rock: var(--dc-hard); }
.dc-rock-fractured { --rock: var(--dc-fractured); }
.dc-rock-none { --rock: var(--dc-none); }
.dc-boom-1 { --boom: var(--dc-boom1); }
.dc-boom-2 { --boom: var(--dc-boom2); }
.dc-op-denis { --op: var(--dc-op-denis); }
.dc-op-kevin { --op: var(--dc-op-kevin); }
.dc-op-patrick { --op: var(--dc-op-patrick); }
.dc-op-isabelle { --op: var(--dc-op-isabelle); }
.dc-op-samuel { --op: var(--dc-op-samuel); }
.dc-crew { --op: var(--accent); }

.dc-swatch { display: inline-block; width: 0.75em; height: 0.75em; margin-right: 0.4em; border-radius: 3px; background: var(--rock, var(--dc-none)); vertical-align: -0.05em; }
.dc-boom-dot { display: inline-block; width: 0.62em; height: 0.62em; margin-right: 0.4em; border-radius: 50%; background: var(--boom, var(--accent)); vertical-align: 0.02em; }
.dc-avatar { display: inline-grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.8rem; font-weight: 900; letter-spacing: 0.02em; }
.dc-good { color: var(--good-text); }
.dc-bad { color: var(--bad); font-weight: 800; }
.dc-warn { color: var(--dc-amber); font-weight: 800; }

/* ---- The bar under the app bar, the toolbars ---- */
.dc-bar { margin-bottom: 12px; }
.dc-bar-text { flex: 1 1 320px; min-width: 0; color: var(--muted); font-size: 0.84rem; font-weight: 600; }
.dc-bar-tools { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.dc-toolbar { margin-bottom: 12px; gap: 10px; }
.dc-section-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 18px 2px 10px; font-size: 1.05rem; font-weight: 900; }
.dc-grid { margin: 12px 0; }
.dc-empty { gap: 10px; margin-bottom: 12px; }
.dc-primary { display: inline-flex; align-items: center; gap: 4px; border-color: var(--os-accent-fill); background: var(--os-accent-fill); color: var(--os-on-accent-fill); }
.dc-primary:hover:not(:disabled) { background: var(--os-accent-fill-hover); }

/* Segmented buttons (speed, boom, figure) */
.dc-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--chip); }
.dc-seg button { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--chip-text); cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 800; white-space: nowrap; }
.dc-seg button:hover { background: var(--chip-hover); }
.dc-seg button.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.dc-seg button:focus-visible, .dc-play:focus-visible, .dc-legend-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dc-seg-wrap { border-radius: 16px; }

/* ---- Live: the controls ---- */
.dc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 10px 14px; }
.dc-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dc-ctl-end { margin-left: auto; }
.dc-ctl-label { color: var(--muted); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.3px; text-transform: uppercase; }
.dc-play { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--os-accent-fill); color: var(--os-on-accent-fill); cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.dc-play:hover { background: var(--os-accent-fill-hover); }
.dc-check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.dc-slowed { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--dc-amber-soft); color: var(--dc-amber); font-size: 0.78rem; font-weight: 900; animation: dc-fade 1.6s ease-in-out infinite; }
.dc-select { min-width: 240px; }
.dc-scenario { display: inline-flex; align-items: center; gap: 4px; }

/* ---- Live: the cab beside the supervisor ---- */
.dc-live { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(360px, 1fr); gap: 14px; align-items: start; margin-top: 12px; }
@media (max-width: 1180px) { .dc-live { grid-template-columns: minmax(0, 1fr); } }
.dc-live-cab { position: sticky; top: 0; min-width: 0; }
@media (max-width: 1180px) { .dc-live-cab { position: static; } }
.dc-live-side { min-width: 0; }
.dc-tablet { container-type: inline-size; padding: 12px; border-radius: 28px; background: linear-gradient(160deg, #24272b, #0a0b0c 60%); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.dc-tablet-note { display: flex; align-items: center; gap: 4px; margin: 8px 6px 0; }

/* ==== The cab screen: always dark, large, touch ==== */
.dc-cab {
  --cab-bg: #0c0f12;
  --cab-panel: #151a1f;
  --cab-panel-2: #1b2128;
  --cab-line: rgba(255, 255, 255, 0.08);
  --cab-text: #f4f0e6;
  --cab-muted: #9aa4ae;
  --cab-gold: #e0bf3f;
  --cab-good: #4cc354;
  --cab-warn: #f2a541;
  --cab-bad: #ef6b6b;
  --cab-blue: #5fb8de;
  --dc-soft: #6cc27a;
  --dc-medium: #d9bb63;
  --dc-hard: #9da2f2;
  --dc-fractured: #ef8b69;
  --dc-none: #6b737b;
  --dc-boom1: #e0bf3f;
  --dc-boom2: #5fb8de;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  min-height: 34em;
  padding: 0.9em 1em 1em;
  border-radius: 16px;
  background: radial-gradient(120% 80% at 50% 0%, #161b21 0%, var(--cab-bg) 60%);
  color: var(--cab-text);
  font-size: clamp(12px, 2.05cqi, 30px);
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.dc-cab-skeleton { min-height: 34em; background: #0c0f12; }

/* The strip on top */
.dc-cab-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em 0.9em; padding-bottom: 0.65em; border-bottom: 1px solid var(--cab-line); }
.dc-cab-state { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.35em 0.8em; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 0.82em; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.dc-dot { width: 0.65em; height: 0.65em; border-radius: 50%; background: var(--cab-good); box-shadow: 0 0 0 0 rgba(76, 195, 84, 0.55); animation: dc-ping 2.2s ease-out infinite; }
.dc-state-tramming .dc-dot, .dc-state-settingup .dc-dot, .dc-state-clearing .dc-dot { background: var(--cab-blue); box-shadow: none; animation: none; }
.dc-state-done .dc-dot { background: var(--cab-muted); animation: none; box-shadow: none; }
.dc-cab-where { display: inline-flex; align-items: baseline; gap: 0.5em; }
.dc-cab-where b { font-size: 1.3em; font-weight: 900; letter-spacing: 0.01em; }
.dc-cab-where span { color: var(--cab-muted); font-weight: 700; }
.dc-cab-spacer { flex: 1; }
.dc-cab-rock { display: inline-flex; align-items: center; gap: 0.15em; padding: 0.3em 0.75em; border: 1px solid var(--cab-line); border-radius: 999px; background: rgba(255, 255, 255, 0.04); font-weight: 800; }
.dc-cab-rock small { margin-left: 0.35em; color: var(--cab-muted); font-weight: 700; }
.dc-cab-clock { font-size: 1.55em; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* The body: the face plan beside the booms */
.dc-cab-body { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 0.9em; align-items: stretch; flex: 1 1 auto; min-height: 0; }
.dc-cab-plan { display: flex; flex-direction: column; justify-content: center; gap: 0.4em; min-width: 0; }
.dc-cab-progress { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2em 0.8em; color: var(--cab-muted); font-weight: 700; }
.dc-cab-progress b { color: var(--cab-text); font-size: 1.25em; }
.dc-cab-booms { display: grid; align-content: center; gap: 0.7em; min-width: 0; }
.dc-cab .dc-boom-1 { --boom: var(--dc-boom1); }
.dc-cab .dc-boom-2 { --boom: var(--dc-boom2); }
.dc-boom { padding: 0.65em 0.85em 0.7em; border: 1px solid var(--cab-line); border-top: 0.3em solid var(--boom); border-radius: 0.7em; background: var(--cab-panel); }
.dc-boom-head { display: flex; align-items: center; gap: 0.55em; }
.dc-boom-tag { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--boom); color: #101010; font-weight: 900; }
.dc-boom-hole { display: inline-flex; flex-direction: column; font-size: 1.05em; font-weight: 800; line-height: 1.15; }
.dc-boom-hole small { color: var(--cab-muted); font-size: 0.75em; font-weight: 700; }
.dc-boom-phase { margin-left: auto; color: var(--cab-muted); font-size: 0.82em; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.dc-boom-rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15em 0.45em; margin: 0.35em 0 0.45em; }
.dc-boom-value { font-size: 2.55em; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.dc-boom-unit { color: var(--cab-muted); font-weight: 800; }
.dc-boom-best { margin-left: auto; padding: 0.15em 0.55em; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--cab-muted); font-size: 0.85em; font-weight: 800; }
.dc-depth { height: 0.55em; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.09); }
.dc-depth span { display: block; height: 100%; border-radius: 999px; background: var(--boom); transition: width 0.3s linear; }
.dc-boom-foot { display: flex; justify-content: space-between; gap: 0.5em; margin-top: 0.35em; color: var(--cab-muted); font-size: 0.85em; font-weight: 700; font-variant-numeric: tabular-nums; }
.dc-cab .dc-warn { color: var(--cab-warn); }
.dc-boom-jammed { border-color: var(--cab-bad); animation: dc-alarm 1.1s ease-in-out infinite; }
.dc-boom-jammed .dc-boom-phase { color: var(--cab-bad); }

/* The coach: two suggestions at most, or all good */
.dc-cab-coach { display: grid; gap: 0.6em; }
.dc-suggest { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0.35em 0.85em; align-items: center; padding: 0.75em 0.9em; border: 1px solid var(--cab-line); border-left: 0.35em solid var(--cab-gold); border-radius: 0.75em; background: var(--cab-panel-2); animation: dc-in 0.35s ease-out; }
.dc-suggest-urgent { border-left-color: var(--cab-warn); background: linear-gradient(90deg, rgba(242, 165, 65, 0.16), var(--cab-panel-2) 45%); }
.dc-suggest-icon { grid-row: 1 / span 2; width: 1.6em !important; height: 1.6em !important; color: var(--cab-gold); }
.dc-suggest-urgent .dc-suggest-icon { color: var(--cab-warn); }
.dc-suggest-body { min-width: 0; }
.dc-suggest-text { font-size: 1.3em; font-weight: 850; line-height: 1.2; }
.dc-suggest-why { margin-top: 0.25em; color: var(--cab-muted); font-size: 0.88em; line-height: 1.35; }
.dc-suggest-boom { display: inline-flex; align-items: center; margin-right: 0.45em; padding: 0 0.5em; border-radius: 999px; background: var(--boom); color: #101010; font-size: 0.85em; font-weight: 900; }
.dc-gain { grid-column: 2; justify-self: start; padding: 0.2em 0.65em; border-radius: 999px; background: rgba(76, 195, 84, 0.16); color: #8fe39a; font-size: 0.95em; font-weight: 850; }
.dc-suggest-actions { display: flex; grid-row: 1 / span 2; grid-column: 3; gap: 0.5em; }
.dc-cab-btn { min-width: 6em; min-height: 56px; padding: 0 1.05em; border: 2px solid transparent; border-radius: 0.6em; cursor: pointer; font: inherit; font-size: 1.02em; font-weight: 850; touch-action: manipulation; transition: transform 0.08s, filter 0.15s; }
.dc-cab-btn:active { transform: scale(0.97); }
.dc-cab-btn:focus-visible { outline: 3px solid var(--cab-gold); outline-offset: 2px; }
.dc-cab-done { background: var(--cab-good); color: #071209; }
.dc-cab-done:hover { filter: brightness(1.08); }
.dc-cab-cant { border-color: rgba(255, 255, 255, 0.25); background: transparent; color: var(--cab-text); }
.dc-cab-cant:hover { background: rgba(255, 255, 255, 0.06); }
.dc-cab-primary { background: var(--cab-gold); color: #17140a; }
.dc-allgood { display: flex; align-items: center; gap: 0.85em; padding: 0.85em 1em; border: 1px solid rgba(76, 195, 84, 0.28); border-radius: 0.75em; background: rgba(76, 195, 84, 0.09); animation: dc-in 0.4s ease-out; }
.dc-allgood-icon { width: 2.3em !important; height: 2.3em !important; color: var(--cab-good); }
.dc-allgood-title { font-size: 1.35em; font-weight: 900; }
.dc-allgood-sub { color: var(--cab-muted); font-weight: 600; }

/* Quiet: tramming, setting up, clearing; and the end of the shift */
.dc-cab-calm { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 0.6em; padding: 2em 1em; text-align: center; }
.dc-calm-icon { width: 3em !important; height: 3em !important; color: var(--cab-blue); opacity: 0.85; }
.dc-cab-finished .dc-calm-icon { color: var(--cab-gold); }
.dc-calm-title { font-size: 1.75em; font-weight: 900; }
.dc-calm-sub { max-width: 30em; color: var(--cab-muted); font-size: 1.05em; font-weight: 600; }
.dc-cab-quiet .dc-cab-strip { opacity: 0.6; }
.dc-cab-quiet { background: radial-gradient(120% 80% at 50% 0%, #11151a 0%, #080a0c 60%); }

/* A narrow cab (a phone-sized column): the plan above the booms */
@container (max-width: 560px) {
  .dc-cab { font-size: clamp(12px, 3.1cqi, 18px); }
  .dc-cab-body { grid-template-columns: minmax(0, 1fr); }
  .dc-cab-booms { grid-template-columns: 1fr 1fr; }
  .dc-suggest { grid-template-columns: auto minmax(0, 1fr); }
  .dc-suggest-actions { grid-row: auto; grid-column: 1 / -1; }
  .dc-cab-btn { flex: 1; }
}

/* Full screen (the cab page): the whole window, no bezel */
.dc-cab-page { position: fixed; inset: 0; z-index: 60; container-type: inline-size; background: #000; }
.dc-cab-page .dc-cab { height: 100%; min-height: 0; border-radius: 0; padding: 1.1em 1.4em 70px; overflow: auto; }
.dc-cab-page .dc-cab-body { flex: 1 1 auto; }
.dc-cab-page .dc-face { max-height: calc(100dvh - 15.5em - 70px); }
.dc-cab-page .dc-loading-bar { width: min(420px, 70vw); }
.dc-cab-corner { position: absolute; right: 14px; bottom: 12px; display: flex; gap: 0.4em; opacity: 0.35; transition: opacity 0.2s; }
.dc-cab-corner:hover, .dc-cab-corner:focus-within { opacity: 1; }
.dc-cab-corner button { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; background: rgba(20, 24, 28, 0.85); color: #f4f0e6; cursor: pointer; }

/* ---- The face drill plan (a screen: dark wherever it shows) ---- */
.dc-face { display: block; width: 100%; height: auto; max-height: 26em; }
.dc-face-outline { stroke: rgba(255, 255, 255, 0.38); stroke-width: 3; stroke-linejoin: round; }
.dc-face-light { stop-color: #3b4148; }
.dc-face-dark { stop-color: #1b1f24; }
.dc-face-floor { stroke: rgba(255, 255, 255, 0.22); stroke-width: 2; stroke-dasharray: 10 8; }
.dc-hole-open { fill: rgba(0, 0, 0, 0.35); stroke: rgba(255, 255, 255, 0.5); stroke-width: 2; }
.dc-hatch { stroke: rgba(255, 255, 255, 0.35); stroke-width: 2; }
.dc-hole-relief .dc-hole-open { stroke-width: 2.5; }
.dc-hole-fill { fill: var(--rock, #6b737b); stroke: rgba(255, 255, 255, 0.85); stroke-width: 2; animation: dc-pop 0.4s ease-out; transform-box: fill-box; transform-origin: center; }
.dc-hole-off { fill: none; stroke: #f2a541; stroke-width: 3; }
.dc-hole-track { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 5; }
.dc-hole-progress { fill: none; stroke: var(--boom); stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray 0.3s linear; }
.dc-hole-active .dc-hole-open { stroke: var(--boom); animation: dc-pulse 1.5s ease-in-out infinite; }
.dc-hole-next { fill: none; stroke: var(--boom); stroke-width: 3; stroke-dasharray: 6 5; animation: dc-spin 8s linear infinite; transform-box: fill-box; transform-origin: center; }
.dc-hole-label { fill: #f4f0e6; font-size: 19px; font-weight: 900; text-anchor: middle; paint-order: stroke; stroke: rgba(0, 0, 0, 0.7); stroke-width: 4px; }
.dc-hole-number { fill: #8b949c; font-size: 11px; font-weight: 700; text-anchor: middle; }
.dc-face .dc-boom-1 { --boom: #e0bf3f; }
.dc-face .dc-boom-2 { --boom: #5fb8de; }
.dc-face .dc-rock-soft { --rock: #6cc27a; }
.dc-face .dc-rock-medium { --rock: #d9bb63; }
.dc-face .dc-rock-hard { --rock: #9da2f2; }
.dc-face .dc-rock-fractured { --rock: #ef8b69; }

/* ---- The supervisor's view ---- */
.dc-sup { display: flex; flex-direction: column; gap: 12px; }
.dc-sup-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.dc-sup-who { display: flex; flex-direction: column; min-width: 0; }
.dc-sup-head .spacer { flex: 1; }
.dc-sup-clock { font-size: 1.35rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.dc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.dc-kpis-wide { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 12px; }
.dc-kpi { padding: 10px 14px; }
.dc-kpi .label { display: flex; align-items: center; gap: 2px; color: var(--muted); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.3px; text-transform: uppercase; }
.dc-kpi .value { margin-top: 2px; font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.15; }
.dc-kpi .value small { color: var(--muted); font-size: 0.8rem; font-weight: 800; }
.dc-kpi .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; color: var(--muted); font-size: 0.78rem; }
.dc-kpi-bad .value { color: var(--bad); }
.dc-delta { font-weight: 900; }

.dc-signals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
@media (max-width: 520px) { .dc-signals { grid-template-columns: minmax(0, 1fr); } }
.dc-signal { --line: var(--accent); min-width: 0; }
.dc-signal-rotation { --line: var(--dc-fractured); }
.dc-signal-feed { --line: var(--dc-hard); }
.dc-signal-water { --line: var(--dc-boom2); }
.dc-signal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dc-signal-label { color: var(--muted); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.2px; text-transform: uppercase; }
.dc-signal-value { font-size: 1.15rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.dc-signal-value small { color: var(--muted); font-size: 0.72rem; font-weight: 800; }
.dc-signal svg { display: block; width: 100%; height: 58px; margin-top: 2px; border-radius: 6px; background: var(--panel-2); }
.dc-signal-line { fill: none; stroke: var(--line); stroke-width: 2; stroke-linejoin: round; }
.dc-signal-target { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 5 4; opacity: 0.8; }
.dc-signal-foot { margin-top: 2px; color: var(--muted); font-size: 0.72rem; }
.dc-settings-now { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.8rem; }
.dc-settings-now b { color: var(--text); font-size: 0.95rem; font-variant-numeric: tabular-nums; }

.dc-models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
@media (max-width: 520px) { .dc-models { grid-template-columns: minmax(0, 1fr); } }
.dc-model-title { margin-bottom: 6px; font-size: 0.85rem; font-weight: 900; }
.dc-model-row { display: grid; grid-template-columns: 6.2em minmax(0, 1fr) auto; gap: 8px; align-items: center; margin: 5px 0; font-size: 0.8rem; }
.dc-model-label { color: var(--muted); font-weight: 700; }
.dc-model-value { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-probs, .dc-meter { display: flex; height: 9px; overflow: hidden; border-radius: 999px; background: var(--chip); }
.dc-probs span { height: 100%; background: var(--rock); transition: width 0.4s ease; }
.dc-meter span { height: 100%; border-radius: 999px; background: var(--good); transition: width 0.4s ease, background 0.4s; }
.dc-meter-warn span { background: var(--dc-amber); }
.dc-meter-bad span { background: var(--bad); }
.dc-powerpack { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.8rem; }
.dc-powerpack span { display: inline-flex; align-items: center; gap: 4px; }
.dc-powerpack b { color: var(--text); }

.dc-log { max-height: 320px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.dc-log li { display: grid; grid-template-columns: 3.2em 20px minmax(0, 1fr); gap: 6px; align-items: start; padding: 6px 2px; border-bottom: 1px solid var(--rule); font-size: 0.82rem; animation: dc-in 0.35s ease-out; }
.dc-log li:last-child { border-bottom: 0; }
.dc-log-time { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 700; }
.dc-log-icon { color: var(--muted); }
.dc-log-suggest .dc-log-icon { color: var(--accent); }
.dc-log-jam .dc-log-icon, .dc-log-jam .dc-log-text { color: var(--bad); }
.dc-log-avoided .dc-log-icon, .dc-log-done .dc-log-icon { color: var(--good); }
.dc-log-scenario .dc-log-icon { color: var(--dc-hard); }
.dc-log-round .dc-log-text { font-weight: 800; }
.dc-chip { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: var(--chip); color: var(--chip-text); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; vertical-align: 0.05em; }
.dc-chip-done { background: var(--good-soft); color: var(--good-text); }
.dc-chip-cant { background: var(--warn-soft); color: var(--warn); }
.dc-chip-bad { background: var(--bad-soft); color: var(--bad); }

/* ---- Loading ---- */
.dc-loading { display: flex; align-items: center; gap: 16px; padding: 16px 18px; }
.dc-loading-icon { width: 40px !important; height: 40px !important; color: var(--accent); animation: dc-fade 1.4s ease-in-out infinite; }
.dc-loading-body { flex: 1; min-width: 0; }
.dc-loading-title { margin-bottom: 8px; font-weight: 900; }
.dc-loading-bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--chip); }
.dc-loading-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--brand-gold)); transition: width 0.25s ease; }
.dc-cab .dc-loading-bar { background: rgba(255, 255, 255, 0.1); }
.dc-skeleton .dc-skeleton-panel { height: 140px; margin-bottom: 12px; animation: dc-fade 1.6s ease-in-out infinite; }
.dc-skeleton .dc-skeleton-panel.tall { height: 300px; }
.dc-skeleton .dc-cab-skeleton { animation: dc-fade 1.6s ease-in-out infinite; }

/* ---- Shift ---- */
.dc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.dc-legend > span { display: inline-flex; align-items: center; }
.dc-legend-best { display: inline-block; width: 14px; height: 2px; margin-right: 6px; background: var(--text); opacity: 0.6; }
.dc-legend-jam { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--bad); }
.dc-legend-off { display: inline-block; width: 0; height: 0; margin-right: 6px; border-right: 5px solid transparent; border-bottom: 8px solid var(--dc-amber); border-left: 5px solid transparent; }
.dc-holechart { display: block; width: 100%; height: auto; }
.dc-gridline { stroke: var(--rule); stroke-width: 1; }
.dc-axis { fill: var(--muted); font-size: 11px; font-weight: 600; }
.dc-bar { fill: var(--rock, var(--dc-none)); }
.dc-bar-best { stroke: var(--text); stroke-width: 1.6; opacity: 0.55; }
.dc-mark-jam { fill: var(--bad); }
.dc-mark-off { fill: var(--dc-amber); }
.dc-round-sep { stroke: var(--muted); stroke-dasharray: 3 4; opacity: 0.7; }
.dc-time-row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 4.2em; gap: 10px; align-items: center; margin: 10px 0; font-size: 0.85rem; }
.dc-time-label { font-weight: 800; white-space: nowrap; }
.dc-time-total { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.dc-stack { display: flex; height: 18px; overflow: hidden; border-radius: 6px; background: var(--chip); }
.dc-stack span { height: 100%; }
.dc-t-drill { background: var(--good); }
.dc-t-position { background: var(--dc-boom2); }
.dc-t-idle { background: var(--dc-amber); }
.dc-t-jam { background: var(--bad); }
.dc-legend-time .dc-swatch { border-radius: 3px; }
.dc-legend-time .dc-swatch.dc-t-drill { background: var(--good); }
.dc-legend-time .dc-swatch.dc-t-position { background: var(--dc-boom2); }
.dc-legend-time .dc-swatch.dc-t-idle { background: var(--dc-amber); }
.dc-legend-time .dc-swatch.dc-t-jam { background: var(--bad); }
.dc-scroll { max-height: 420px; overflow: auto; }

/* ---- Weeks ---- */
.dc-trend-head { flex-wrap: wrap; }
.dc-legend-ops { margin: 0 0 8px; }
.dc-legend-item { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--text); cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 800; }
.dc-legend-item.off { color: var(--muted); opacity: 0.6; }
.dc-legend-item:disabled { cursor: default; opacity: 0.4; }
span.dc-legend-item { cursor: default; }
.dc-legend-line { display: inline-block; width: 16px; height: 3px; border-radius: 2px; background: var(--op); vertical-align: middle; }
.dc-crew .dc-legend-line { height: 5px; }
.dc-weekchart { display: block; width: 100%; height: auto; }
.dc-line { fill: none; stroke: var(--op); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.dc-line.dc-crew { stroke-width: 4.5; }
.dc-point { fill: var(--panel); stroke: var(--op); stroke-width: 2; }
.dc-point.dc-crew { fill: var(--op); }
.dc-coach-band { fill: var(--accent-soft); opacity: 0.7; }
.dc-coach-line { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.dc-coach-label { fill: var(--accent-strong); font-size: 11px; font-weight: 900; }
.dc-summary-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dc-summary-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; line-height: 1.45; }
.dc-summary-list li .mud-icon-root { color: var(--accent); margin-top: 1px; }
.dc-summary-watch .mud-icon-root, .dc-summary-drill .mud-icon-root { color: var(--dc-amber) !important; }
.dc-summary-best .mud-icon-root, .dc-summary-most .mud-icon-root { color: var(--good) !important; }
.dc-summary-detail { margin-left: 0.3em; color: var(--muted); }
.dc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; margin-bottom: 12px; }
.dc-card { display: flex; flex-direction: column; gap: 6px; border-top: 4px solid var(--op); }
.dc-card-head { display: flex; align-items: center; gap: 10px; }
.dc-card-head .spacer { flex: 1; }
.dc-card-head .dc-avatar { background: color-mix(in srgb, var(--op) 18%, var(--panel)); color: var(--op); }
.dc-card-score { padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-weight: 900; font-variant-numeric: tabular-nums; }
.dc-card-headline { margin: 4px 0 2px !important; font-weight: 700; line-height: 1.4; }
.dc-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px; margin: 2px 0 !important; color: var(--text); font-size: 0.88rem; line-height: 1.45; }
.dc-note .mud-icon-root { margin-top: 1px; color: var(--accent); }
.dc-note-good .mud-icon-root { color: var(--good); }
.dc-spark { display: block; width: 90px; height: 24px; }
.dc-spark polyline { fill: none; stroke: var(--op); stroke-width: 1.8; stroke-linejoin: round; }
.dc-spark circle { fill: var(--op); }

/* ---- How it works ---- */
.dc-how { display: flex; flex-direction: column; gap: 12px; }
.dc-how-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.dc-how-hero h2 { font-size: 1.3rem !important; font-weight: 900 !important; }
.dc-how-hero p { max-width: 980px; line-height: 1.55; }
.dc-pipeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: dc; }
@media (max-width: 900px) { .dc-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dc-pipeline li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-2); font-size: 0.85rem; }
.dc-pipeline li b { font-size: 0.98rem; }
.dc-pipeline li span:last-child { color: var(--muted); }
.dc-pipeline-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border-radius: 10px; background: var(--os-accent); color: var(--os-on-accent); }
@media (min-width: 901px) {
  .dc-pipeline li:not(:last-child)::after { position: absolute; top: 50%; right: -9px; z-index: 1; width: 8px; height: 8px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); content: ""; transform: translateY(-50%) rotate(45deg); }
}
.dc-how-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px !important; font-size: 1.02rem !important; }
.dc-step { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.8rem; font-weight: 900; }
.dc-how p { line-height: 1.55; }
.dc-how-plan .dc-face { max-width: 360px; margin: 6px auto; padding: 8px; border-radius: 14px; background: #101418; }
.dc-how-figures { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.dc-figure { display: flex; flex: 1 1 200px; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--radius); background: var(--accent-soft); }
.dc-figure b { color: var(--accent-strong); font-size: 1.45rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.dc-figure span { color: var(--text); font-size: 0.82rem; }
.dc-how-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 0; padding-left: 18px; line-height: 1.5; }
.dc-confusion .dc-diag { background: var(--good-soft); color: var(--good-text); font-weight: 900; }
.dc-confusion .dc-miss { color: var(--dc-amber); font-weight: 800; }

/* ---- Motion ---- */
@keyframes dc-ping { 0% { box-shadow: 0 0 0 0 rgba(76, 195, 84, 0.55); } 70% { box-shadow: 0 0 0 0.6em rgba(76, 195, 84, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 195, 84, 0); } }
@keyframes dc-pulse { 50% { stroke-width: 4; } }
@keyframes dc-spin { to { transform: rotate(360deg); } }
@keyframes dc-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes dc-in { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dc-fade { 50% { opacity: 0.55; } }
@keyframes dc-alarm { 50% { box-shadow: 0 0 0 0.25em rgba(239, 107, 107, 0.35); } }
@media (prefers-reduced-motion: reduce) {
  .dc-dot, .dc-hole-next, .dc-hole-active .dc-hole-open, .dc-hole-fill, .dc-suggest, .dc-allgood, .dc-log li, .dc-boom-jammed, .dc-slowed, .dc-loading-icon, .dc-skeleton * { animation: none !important; }
  .dc-depth span, .dc-hole-progress, .dc-probs span, .dc-meter span { transition: none !important; }
}