/* Cadence theme variables. "system" (no data-theme) follows the OS via the
   media query; data-theme="light|dark" forces a choice. Components reference
   these vars, so theming is just swapping the values. */

:root {                                   /* light (default) */
  color-scheme: light;
  --bg:#f5f6f8; --panel:#ffffff; --line:#dfe3ea; --text:#1a1d23;
  --muted:#6b7280; --accent:#3b6fb0; --input-bg:#ffffff; --gridline:#dde1e8;
}

@media (prefers-color-scheme: dark) {     /* system → dark */
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#14161a; --panel:#1c1f26; --line:#2c313b; --text:#e6e8ec;
    --muted:#8a909c; --accent:#5187cf; --input-bg:#0f1115; --gridline:#333a45;
  }
}

:root[data-theme="dark"] {                 /* forced dark */
  color-scheme: dark;
  --bg:#14161a; --panel:#1c1f26; --line:#2c313b; --text:#e6e8ec;
  --muted:#8a909c; --accent:#5187cf; --input-bg:#0f1115; --gridline:#333a45;
}

:root[data-theme="light"] {                /* forced light */
  color-scheme: light;
  --bg:#f5f6f8; --panel:#ffffff; --line:#dfe3ea; --text:#1a1d23;
  --muted:#6b7280; --accent:#3b6fb0; --input-bg:#ffffff; --gridline:#dde1e8;
}

/* --- toasts (cadToast / cadFlash) — see theme.js --------------------------- */
.cad-toasts { position:fixed; right:16px; bottom:16px; z-index:320; display:flex;
  flex-direction:column; gap:8px; max-width:360px; }
.cad-toast { background:var(--panel); color:var(--text); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:8px; padding:10px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.35); display:flex; gap:10px; align-items:flex-start;
  font:13px/1.4 -apple-system, system-ui, sans-serif; animation:cad-toast-in .18s ease-out; }
.cad-toast.err { border-left-color:#d14b6a; }
.cad-toast.out { opacity:0; transition:opacity .2s; }
.cad-toast-msg { flex:1; }
.cad-toast-x { background:none; border:0; color:var(--muted); cursor:pointer; font-size:17px;
  line-height:1; padding:0 0 0 4px; }
.cad-toast-x:hover { color:var(--text); }
@keyframes cad-toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* --- custom dialogs (cadConfirm / cadPrompt) — see theme.js ---------------- */
.caddlg { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; }
.caddlg-back { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.caddlg-box { position:relative; background:var(--panel); color:var(--text);
  border:1px solid var(--line); border-radius:10px; padding:18px 20px; width:92%; max-width:440px;
  box-shadow:0 16px 48px rgba(0,0,0,.4); font:14px/1.5 -apple-system, system-ui, sans-serif; }
.caddlg-msg { margin:0 0 12px; white-space:pre-wrap; }
.caddlg-input { width:100%; box-sizing:border-box; background:var(--input-bg); color:var(--text);
  border:1px solid var(--line); border-radius:6px; padding:7px 9px; font:inherit; }
textarea.caddlg-input { resize:vertical; min-height:60px; }
.caddlg-hint { color:var(--muted); font-size:12px; margin-top:6px; }
.caddlg-cats { display:flex; flex-wrap:wrap; gap:6px; }
.caddlg-cat { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--line); border-radius:14px; padding:3px 10px; font-size:13px;
  background:var(--input-bg); user-select:none; }
.caddlg-cat.on { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, var(--input-bg)); }
.caddlg-cat input { margin:0; }
.caddlg-cat .dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.caddlg-type { display:flex; gap:16px; font-size:13px; }
.caddlg-type label { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.caddlg-flabel { display:block; font-size:11px; color:var(--muted); margin:0 0 4px;
        text-transform:uppercase; letter-spacing:.4px; }
.caddlg-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.caddlg .btn { background:var(--panel); color:var(--text); border:1px solid var(--line);
  border-radius:6px; padding:6px 14px; font:inherit; cursor:pointer; }
.caddlg .btn:hover { background:var(--input-bg); }
.caddlg .caddlg-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.caddlg-opt { text-transform:none; letter-spacing:0; }

/* Shared toolbar button — global default so every page's top menu / nav buttons
   get a border even if the page's own <style> omits the rule (Lodestar did).
   Pages that define their own a.btn override this (same specificity, loaded later). */
a.btn, button.btn, select.btn { color:var(--text); text-decoration:none; background:var(--panel);
        border:1px solid var(--line); border-radius:6px; padding:5px 10px; font:inherit; cursor:pointer; }
a.btn:hover, button.btn:hover, select.btn:hover { border-color:var(--accent); }
.caddlg-subchips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.caddlg-subchip { border:1px solid var(--line); border-radius:14px; padding:3px 10px; font:inherit;
  font-size:13px; background:var(--input-bg); color:var(--text); cursor:pointer; user-select:none; }
.caddlg-subchip:hover { border-color:var(--accent); }
.caddlg-subchip.on { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, var(--input-bg)); }
.caddlg-locwrap { position:relative; }
.caddlg-locreset { margin-top:6px; font-size:12px; padding:4px 10px; }
.caddlg-suggest { position:absolute; top:100%; left:0; right:0; z-index:10; margin-top:2px;
  background:var(--panel); border:1px solid var(--line); border-radius:6px; overflow:hidden;
  max-height:200px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.caddlg-suggestion { display:block; width:100%; text-align:left; background:none; border:0;
  color:var(--text); padding:7px 9px; font:inherit; cursor:pointer; border-bottom:1px solid var(--line); }
.caddlg-suggestion:last-child { border-bottom:0; }
.caddlg-suggestion:hover { background:var(--input-bg); }
/* Travel-time (§6a) panel inside the block editor */
.caddlg-travel-head { display:flex; align-items:center; gap:7px; text-transform:none;
  letter-spacing:0; font-size:13px; color:var(--text); cursor:pointer; margin-top:12px; }
.caddlg-travel-head input { margin:0; }
.caddlg-travel { margin-top:8px; display:flex; flex-direction:column; gap:8px;
  border-left:2px solid var(--line); padding-left:10px; }
.caddlg-travel[hidden] { display:none; }   /* class display:flex would otherwise beat [hidden] */
.caddlg-travel-row { position:relative; display:flex; align-items:center; gap:8px; }
.caddlg-travel-row .caddlg-input[type=text] { flex:1; }
.caddlg-travel-traffic { display:inline-flex; align-items:center; gap:6px; font-size:12px;
  color:var(--muted); white-space:nowrap; cursor:pointer; }
.caddlg-travel-est { flex:1; font-size:12px; color:var(--muted); }
.caddlg-travel-min { width:64px; flex:none; }
select.caddlg-input { flex:1; }