/* ============================================================
   Drill — native, reskinned to the Nudge design system.
   Every rule is scoped under #drill-root so nothing leaks in/out.
   A compat var layer maps drill's original var names onto site
   tokens, so both these rules AND the inline styles in the drill
   markup (var(--dim), var(--grn), …) resolve and follow [data-theme].
   ============================================================ */

#drill-root {
  /* drill var names -> site design tokens (auto light/dark) */
  --bg: var(--bg-page);
  --bg2: var(--bg-input);
  --panel: var(--bg-card);
  --panel2: var(--bg-card-hover);
  --raised: var(--bg-card-hover);
  --line: var(--border);
  --line2: var(--border);
  --ink: var(--text-primary);
  --mid: var(--text-secondary);
  --dim: var(--text-muted);
  --faint: var(--text-muted);
  --grn: var(--accent);
  --grn-d: var(--accent-light);
  --amb: var(--warning-text);
  --cyn: var(--accent-text);
  --red: var(--danger-text);
  --vio: var(--text-secondary);
  --p0: var(--accent);
  --p1: var(--text-secondary);
  --p2: var(--text-muted);
  --dr-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
}
#drill-root *, #drill-root *::before, #drill-root *::after { box-sizing: border-box; }

/* ---------- top toolbar (export / import / reset) ---------- */
#drill-root .topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) 0 var(--sp-4); margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-subtle);
}
#drill-root .dots { display: flex; gap: 5px; }
#drill-root .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; opacity: .55; }
#drill-root .dot.r { background: #ef9a9a; } #drill-root .dot.y { background: var(--warning-border); } #drill-root .dot.g { background: var(--success-border); }
#drill-root .path { color: var(--text-muted); font-size: 12.5px; }
#drill-root .path b { color: var(--accent-text); font-weight: 600; }
#drill-root .topbar .spacer { flex: 1; }
#drill-root .iobtn {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
  font-size: 12px; padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
#drill-root .iobtn:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- hero / boot ---------- */
#drill-root header.hero { padding: var(--sp-4) 0 var(--sp-2); animation: drFade .4s ease both; }
#drill-root .boot { color: var(--text-muted); font-size: 12.5px; margin-bottom: var(--sp-2); line-height: 1.7; }
#drill-root .boot .ok { color: var(--success-text); } #drill-root .boot .info { color: var(--accent-text); } #drill-root .boot .warn { color: var(--warning-text); }
#drill-root h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; color: var(--text-primary); }
#drill-root h1 .blink { color: var(--accent); animation: drBlink 1.2s steps(1) infinite; }
#drill-root .sub { color: var(--text-secondary); font-size: 13px; }

/* ---------- sub-tabs ---------- */
#drill-root nav.tabs { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin: var(--sp-5) 0 var(--sp-4); border-bottom: 1px solid var(--border); }
#drill-root .tab {
  background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-muted);
  font-size: 13px; font-weight: 500; padding: var(--sp-2) var(--sp-3); cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
#drill-root .tab:hover { color: var(--text-primary); }
#drill-root .tab.on { color: var(--accent); border-bottom-color: var(--accent); }
#drill-root .tab .c { color: var(--text-muted); font-size: 11px; }
#drill-root .tab.on .c { color: var(--accent-text); }

/* ---------- stat strip ---------- */
#drill-root .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); }
@media (max-width: 680px) { #drill-root .stats { grid-template-columns: repeat(2, 1fr); } }
#drill-root .stat {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--sp-4);
}
#drill-root .stat .k { color: var(--text-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; }
#drill-root .stat .v { font-size: 26px; font-weight: 700; margin-top: 4px; line-height: 1.1; color: var(--text-primary); }
#drill-root .stat .v small { font-size: 13px; color: var(--text-muted); font-weight: 500; }
#drill-root .stat.acc .v { color: var(--success-text); }
#drill-root .stat.flame .v { color: var(--accent); }

/* ---------- panels ---------- */
#drill-root .panel {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--sp-5); margin-bottom: var(--sp-4);
}
#drill-root .panel.solid { background: var(--bg-card); }
#drill-root .ptitle {
  font-size: 11px; color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); font-weight: 600;
}
#drill-root .ptitle .n { color: var(--text-muted); margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 500; }
#drill-root .legend { color: var(--text-muted); font-size: 11.5px; margin-bottom: var(--sp-3); }
#drill-root .legend .t-seen { color: var(--accent-text); } #drill-root .legend .t-new { color: var(--text-secondary); } #drill-root .legend .t-rev { color: var(--text-muted); } #drill-root .legend .t-prem { color: var(--warning-text); }
#drill-root .subhead { color: var(--accent-text); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; margin: var(--sp-3) 0 var(--sp-1); font-weight: 600; }
#drill-root .cobanner {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--warning-border);
  border-radius: var(--radius-md); color: var(--warning-text); font-size: 12.5px; background: var(--warning-bg);
}
#drill-root .cobanner a { color: var(--warning-text); text-decoration: underline; }
#drill-root .nudge { margin-top: var(--sp-3); color: var(--text-muted); font-size: 12px; }
#drill-root .nudge b { color: var(--text-secondary); }

/* ---------- problem row ---------- */
#drill-root .prow { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
#drill-root .prow:last-child { border-bottom: none; }
#drill-root .prow.is-done { opacity: .55; }
#drill-root .prow .num { color: var(--text-muted); font-size: 11px; flex: 0 0 44px; font-variant-numeric: tabular-nums; }
#drill-root .prow .ttl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#drill-root .prow .ttl a { color: var(--text-primary); text-decoration: none; }
#drill-root .prow .ttl a:hover { color: var(--accent); text-decoration: underline; }
#drill-root .prow.is-done .ttl a { text-decoration: line-through; color: var(--text-muted); }
#drill-root .dbadge { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-pill); flex: 0 0 auto; }
#drill-root .d-E { color: var(--success-text); background: var(--success-bg); border: 1px solid var(--success-border); }
#drill-root .d-M { color: var(--accent-text); background: var(--accent-light); border: 1px solid var(--accent); }
#drill-root .d-H { color: var(--danger-text); background: var(--danger-bg); border: 1px solid var(--danger-border); }
#drill-root .tagmini { font-size: 11px; flex: 0 0 auto; }
#drill-root .t-new { color: var(--text-secondary); } #drill-root .t-seen { color: var(--accent-text); } #drill-root .t-prem { color: var(--warning-text); } #drill-root .t-rev { color: var(--text-muted); }
#drill-root .metachip { font-size: 10px; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1px 6px; flex: 0 0 auto; white-space: nowrap; }
#drill-root .metachip.date { cursor: pointer; }
#drill-root .metachip.date:hover { border-color: var(--accent); color: var(--accent); }
#drill-root .pacts { display: flex; gap: 5px; flex: 0 0 auto; }
#drill-root .ck {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
  font-size: 11px; padding: 3px 9px; border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
#drill-root .ck.solo:hover { border-color: var(--success); color: var(--success-text); background: var(--success-bg); }
#drill-root .ck.help:hover { border-color: var(--warning-border); color: var(--warning-text); background: var(--warning-bg); }
#drill-root .ck.undo { color: var(--text-muted); }
#drill-root .ck.undo:hover, #drill-root .ck.delx:hover { border-color: var(--danger-border); color: var(--danger-text); background: var(--danger-bg); }
#drill-root .ck.delx { padding: 3px 7px; }
#drill-root .doneflag { font-size: 10.5px; font-weight: 600; }
#drill-root .df-solo { color: var(--success-text); } #drill-root .df-help { color: var(--warning-text); }

/* ---------- group toggle + headers ---------- */
#drill-root .gbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-2); }
#drill-root .gbtn {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
  font-size: 11.5px; padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill); cursor: pointer; text-transform: capitalize;
  transition: all var(--transition-fast);
}
#drill-root .gbtn:hover { border-color: var(--accent); color: var(--accent); }
#drill-root .gbtn.on { border-color: var(--accent); color: var(--accent-text); background: var(--accent-light); }
#drill-root .gbtn.resched { margin-left: auto; text-transform: none; border-style: dashed; }
#drill-root .gbtn.resched:hover { border-color: var(--warning-border); color: var(--warning-text); }
#drill-root .grouphead { display: flex; align-items: baseline; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-2); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--border); }
#drill-root .grouphead .gn { font-size: 14px; font-weight: 700; color: var(--text-primary); }
#drill-root .grouphead .gsub { margin-left: auto; color: var(--text-muted); font-size: 11.5px; }
#drill-root .grouphead.now .gn, #drill-root .grouphead.now .gsub { color: var(--accent); }
#drill-root .grouphead.over .gn, #drill-root .grouphead.over .gsub { color: var(--warning-text); }
#drill-root .gcard { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--sp-1) var(--sp-4); margin-bottom: var(--sp-1); }

/* ---------- buckets ---------- */
#drill-root .weekhead { margin: var(--sp-6) 0 var(--sp-2); display: flex; align-items: center; gap: var(--sp-3); }
#drill-root .weekhead .wn { font-size: 15px; font-weight: 700; color: var(--text-primary); }
#drill-root .weekhead.now .wn { color: var(--accent); }
#drill-root .weekhead .wbar { margin-left: auto; color: var(--text-muted); font-size: 12px; }
#drill-root .wd { color: var(--text-muted); font-size: 11.5px; margin-bottom: var(--sp-2); }
#drill-root .bkcard { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--sp-4); margin-bottom: var(--sp-3); }
#drill-root .bkhd { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
#drill-root .bk-badge { font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill); }
#drill-root .b-p0 { background: var(--accent-light); color: var(--accent-text); border: 1px solid var(--accent); }
#drill-root .b-p1 { background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border); }
#drill-root .b-p2 { background: var(--bg-input); color: var(--text-muted); border: 1px solid var(--border); }
#drill-root .bkhd .bn { font-weight: 700; font-size: 15px; color: var(--text-primary); }
#drill-root .bkhd .cnt { margin-left: auto; font-size: 13px; color: var(--text-secondary); }
#drill-root .bkhd .cnt b { color: var(--accent); }
#drill-root .modepill { font-size: 9.5px; padding: 1px 7px; border-radius: var(--radius-pill); cursor: pointer; border: 1px solid var(--border); color: var(--text-muted); }
#drill-root .modepill.block { border-color: var(--accent); color: var(--accent-text); }
#drill-root .modepill.mix { border-color: var(--success); color: var(--success-text); }
#drill-root .bknote { color: var(--text-muted); font-size: 11.5px; margin: 5px 0 2px; }
#drill-root .meter { height: 6px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-pill); margin: var(--sp-2) 0 var(--sp-1); overflow: hidden; }
#drill-root .meter > i { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width .4s ease; }
#drill-root .bkactions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
#drill-root .mini {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
  font-size: 11px; padding: 3px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-fast);
}
#drill-root .mini:hover { border-color: var(--accent); color: var(--accent); }
#drill-root .mini.warn:hover { border-color: var(--danger-border); color: var(--danger-text); background: var(--danger-bg); }
#drill-root .collapse { cursor: pointer; user-select: none; }
#drill-root .plist { margin-top: var(--sp-2); }
#drill-root .plist.hidden { display: none; }

/* ---------- re-solve queue ---------- */
#drill-root .rsrow { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-subtle); }
#drill-root .rsrow:last-child { border-bottom: none; }
#drill-root .rsrow .nm { flex: 1; font-size: 13px; min-width: 0; }
#drill-root .rsrow .nm a { color: var(--text-primary); text-decoration: none; }
#drill-root .rsrow .nm a:hover { color: var(--accent); text-decoration: underline; }
#drill-root .due-now { color: var(--warning-text); font-weight: 600; }
#drill-root .due-ok { color: var(--text-muted); }
#drill-root .ladder { font-size: 11px; color: var(--text-muted); }

/* ---------- companies ---------- */
#drill-root .cogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); }
#drill-root .cocard { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--sp-3) var(--sp-4); position: relative; }
#drill-root .cocard.watch { border-color: var(--accent); }
#drill-root .cocard .cn { font-weight: 600; font-size: 13px; color: var(--text-primary); }
#drill-root .cocard .cn a { color: inherit; text-decoration: none; }
#drill-root .cocard .cn a:hover { color: var(--accent); }
#drill-root .cocard .cq { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
#drill-root .cocard .cs { font-size: 11px; color: var(--success-text); margin-top: 7px; }
#drill-root .cocard .cacts { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
#drill-root .star { position: absolute; top: var(--sp-2); right: var(--sp-3); cursor: pointer; color: var(--text-muted); font-size: 14px; }
#drill-root .star.on { color: var(--warning-text); }

/* ---------- misc ---------- */
#drill-root .empty { color: var(--text-muted); font-size: 12.5px; text-align: center; padding: var(--sp-5); }
#drill-root .foot { color: var(--text-muted); font-size: 11px; text-align: center; margin-top: var(--sp-8); line-height: 1.7; }
#drill-root .foot b { color: var(--text-secondary); }
#drill-root .toast {
  position: fixed; bottom: var(--sp-5); left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  font-size: 12.5px; opacity: 0; transition: opacity .25s, transform .25s; z-index: 200; pointer-events: none;
}
#drill-root .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#drill-root .hidden { display: none !important; }
#drill-root .row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
#drill-root .row > * { flex: 1; min-width: 120px; }

/* primary button (was .btn, renamed to avoid site collision) */
#drill-root .dr-btn {
  background: var(--accent); color: var(--text-inverse); border: none; font-weight: 600; font-size: 13px;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast);
}
#drill-root .dr-btn:hover { background: var(--accent-hover); }

/* inputs / selects */
#drill-root input[type="text"], #drill-root select, #drill-root .tsearch {
  background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary);
  font-family: inherit; font-size: 13px; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); width: 100%;
}
#drill-root input[type="text"]:focus, #drill-root select:focus, #drill-root .tsearch:focus { outline: none; border-color: var(--accent); background: var(--bg-input-focus); }

/* ---------- templates ---------- */
#drill-root .tctrl { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-4); flex-wrap: wrap; }
#drill-root .tsearch { flex: 1; min-width: 160px; }
#drill-root .tcard { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); margin-bottom: var(--sp-3); overflow: hidden; }
#drill-root .thead { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); cursor: pointer; user-select: none; }
#drill-root .thead:hover { background: var(--bg-card-hover); }
#drill-root .thead .tname { font-weight: 700; font-size: 14px; color: var(--text-primary); }
#drill-root .thead .tfam { font-size: 10px; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1px 6px; }
#drill-root .thead .tchev { color: var(--text-muted); margin-left: auto; font-size: 12px; }
#drill-root .tbody { padding: 2px var(--sp-4) var(--sp-4); border-top: 1px solid var(--border); }
#drill-root .tmeta { margin: var(--sp-3) 0 var(--sp-1); font-size: 12px; line-height: 1.5; }
#drill-root .tmeta .lab { color: var(--accent-text); text-transform: uppercase; font-size: 10px; letter-spacing: .07em; margin-right: 7px; font-weight: 700; }
#drill-root .tmeta.inv .lab { color: var(--text-secondary); }
#drill-root .tmeta .txt { color: var(--text-secondary); }
#drill-root .codewrap { position: relative; margin-top: var(--sp-3); }
#drill-root .code {
  background: var(--bg-input); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); overflow-x: auto;
  font-family: var(--dr-mono); font-size: 12px; line-height: 1.55; color: var(--text-primary); white-space: pre; margin: 0;
}
#drill-root .copybtn {
  position: absolute; top: var(--sp-2); right: var(--sp-2); background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 10.5px; padding: 3px 9px; border-radius: var(--radius-sm); cursor: pointer;
}
#drill-root .copybtn:hover { border-color: var(--accent); color: var(--accent); }

#drill-root .view { animation: drFade .35s ease both; }
@keyframes drFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes drBlink { 50% { opacity: 0; } }