/* ============================================================
   Phase 2 — Design System additions
   Extends weresearch_complete_site's existing tokens (--ink, --paper,
   --blue, --green, --amber, --red, --violet, --shadow-*, --line, --max)
   and existing .btn/.panel/.tag/.tab conventions. Does not replace them.
   ============================================================ */

/* ---------- Modal ---------- */
.modal-backdrop{display:none;position:fixed;inset:0;z-index:200;background:rgba(15,17,22,.5);align-items:center;justify-content:center;padding:24px}
.modal-backdrop.open{display:flex}
.modal{width:min(560px,100%);background:var(--surface);border-radius:18px;box-shadow:var(--shadow-lg);padding:26px;max-height:88vh;overflow:auto}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.modal-close{border:0;background:var(--surface2);border-radius:999px;width:32px;height:32px;cursor:pointer;color:var(--muted)}

/* ---------- Drawer (side panel) ---------- */
.drawer-backdrop{display:none;position:fixed;inset:0;z-index:200;background:rgba(15,17,22,.4)}
.drawer-backdrop.open{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--surface);box-shadow:var(--shadow-lg);padding:24px;overflow:auto;transform:translateX(100%);transition:transform .25s ease}
.drawer-backdrop.open .drawer{transform:translateX(0)}

/* ---------- Dropdown / Select ---------- */
.dropdown{position:relative;display:inline-block}
.dropdown-trigger{border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:10px 13px;display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:700}
.dropdown-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-md);padding:6px;z-index:60}
.dropdown.open .dropdown-menu{display:block}
.dropdown-item{padding:9px 11px;border-radius:9px;cursor:pointer;font-size:14px}
.dropdown-item:hover{background:var(--surface2)}
.field select{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px;background:var(--surface);font:inherit}

/* Table: reuses the site's own .table/.table-wrap (assets/styles.css) —
   no duplicate table system. Only a hover affordance added here. */
.table tbody tr[data-href]{cursor:pointer}
.table tbody tr[data-href]:hover{background:var(--surface2)}

/* ---------- Charts (lightweight, CSS-only — no JS charting dependency,
   consistent with this site's minimal 638-byte app.js philosophy) ---------- */
.spark{display:flex;align-items:flex-end;gap:3px;height:40px}
.spark span{flex:1;background:var(--blue2);border-radius:3px 3px 0 0;min-height:3px}
.bar-chart{display:flex;align-items:flex-end;gap:10px;height:140px;padding:10px 0}
.bar-chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.bar-chart .fill{width:100%;border-radius:8px 8px 0 0;background:var(--blue)}
.bar-chart .fill.green{background:var(--green)}
.bar-chart .fill.amber{background:var(--amber)}
.donut{--pct:50;width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--blue) calc(var(--pct)*1%),var(--line) 0);display:grid;place-items:center}
.donut span{background:var(--surface);width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px}

/* ---------- Object-specific Card variants (built on the existing .panel) ---------- */
.card-decision{border-left:4px solid var(--blue)}
.card-recommendation{border-left:4px solid var(--violet)}
.card-recommendation .direction{font-size:22px;font-weight:900;letter-spacing:-.02em}
.card-evidence{border-left:4px solid var(--green)}
.card-evidence .source-tag{font-size:11px;color:var(--muted)}
.card-scenario{display:grid;gap:8px}
.card-scenario .prob-impact{display:flex;gap:14px;font-size:12px;color:var(--muted)}
.card-news{cursor:pointer}
.card-news:hover{box-shadow:var(--shadow-md)}
.card-impact{border-left:4px solid var(--amber)}
.card-profile{display:flex;align-items:center;gap:14px}
.card-profile .avatar-lg{width:56px;height:56px;border-radius:50%;background:var(--blue2);display:grid;place-items:center;color:#fff;font-weight:800}

/* ---------- Search (global, keyboard-invoked) ---------- */
.search-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(15,17,22,.5);align-items:flex-start;justify-content:center;padding-top:90px}
.search-overlay.open{display:flex}
.search-box{width:min(640px,92vw);background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden}
.search-box input{width:100%;border:0;padding:18px;font-size:16px;outline:0}
.search-results{max-height:400px;overflow:auto;border-top:1px solid var(--line)}
.search-result{padding:12px 18px;display:flex;justify-content:space-between;cursor:pointer}
.search-result:hover{background:var(--surface2)}

/* ---------- Skeleton loaders (Phase 10 polish, needed by every async view) ---------- */
.skeleton{background:linear-gradient(90deg,var(--surface2) 25%,var(--line) 37%,var(--surface2) 63%);background-size:400% 100%;animation:skeleton-wave 1.4s ease infinite;border-radius:8px}
@keyframes skeleton-wave{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* Empty / error states: reuse the site's own .empty class (assets/styles.css)
   as the base; .error is a colour modifier on it, matching the site's own
   base+modifier convention (.btn / .btn-primary). No parallel class system. */
.empty.error{color:var(--red)}

/* ---------- Avatar sizes (base .avatar already exists) ---------- */
.avatar-sm{width:28px;height:28px;font-size:11px}
.avatar-lg{width:56px;height:56px;font-size:16px}
.avatar-xl{width:84px;height:84px;font-size:22px}

/* ---------- Tooltip ---------- */
.tooltip{position:relative;display:inline-flex}
.tooltip[data-tip]:hover:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#11141b;color:#fff;font-size:12px;padding:6px 10px;border-radius:8px;white-space:nowrap;z-index:80}
.tooltip[data-tip]:hover:before{content:"";position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#11141b}

/* ---------- Alert / Banner (persistent inline message — distinct from the
   transient .toast which already exists) ---------- */
.alert{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:13px;border:1px solid var(--line);background:var(--surface2)}
.alert-icon{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--blue2);color:#fff}
.alert.success{background:#eafaf2;border-color:#bfe9d4;color:#0f1116}.alert.success .alert-icon{background:var(--green)}
.alert.warning{background:#fff8ea;border-color:#f0ddb0;color:#0f1116}.alert.warning .alert-icon{background:var(--amber)}
.alert.error{background:#fdecee;border-color:#f3c3c9;color:#0f1116}.alert.error .alert-icon{background:var(--red)}

/* ---------- Progress bar ---------- */
.progress-track{width:100%;height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.progress-fill{height:100%;background:var(--blue);border-radius:999px;transition:width .3s ease}

/* ---------- Stepper (the pattern already used inline in create-decision.html,
   formalized as a reusable component) ---------- */
.stepper{display:flex;align-items:center;gap:8px}
.step{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--line);color:var(--muted)}
.step.done{background:var(--green);color:#fff}
.step.active{background:var(--blue);color:#fff}
.step-line{flex:1;height:2px;background:var(--line)}
.step-line.done{background:var(--green)}

/* ---------- Toggle switch ---------- */
.switch{position:relative;display:inline-block;width:42px;height:24px}
.switch input{opacity:0;width:0;height:0}
.switch-track{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:.2s;cursor:pointer}
.switch-track:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:var(--shadow-sm)}
.switch input:checked + .switch-track{background:var(--blue)}
.switch input:checked + .switch-track:before{transform:translateX(18px)}

/* ---------- Checkbox / Radio (styled native inputs, no JS needed) ---------- */
.check-row{display:flex;align-items:center;gap:10px;font-size:14px}
.check-row input[type=checkbox],.check-row input[type=radio]{width:18px;height:18px;accent-color:var(--blue)}

/* ---------- Pagination ---------- */
.pagination{display:flex;align-items:center;gap:6px}
.page-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;font-size:13px;cursor:pointer}
.page-btn.active{background:#11141b;color:#fff;border-color:#11141b}

/* ---------- Accordion ---------- */
.accordion-item{border:1px solid var(--line);border-radius:13px;overflow:hidden}
.accordion-item + .accordion-item{margin-top:8px}
.accordion-head{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:700}
.accordion-body{display:none;padding:0 16px 16px;color:var(--muted)}
.accordion-item.open .accordion-body{display:block}
.accordion-item.open .accordion-chevron{transform:rotate(180deg)}
.accordion-chevron{transition:transform .2s ease}

/* ---------- Timeline (visual list — distinct from the site's .list) ---------- */
.tl{position:relative;padding-left:26px}
.tl:before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding-bottom:22px}
.tl-item:last-child{padding-bottom:0}
.tl-item:before{content:"";position:absolute;left:-22px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--blue2,rgba(109,140,255,.25))}
.tl-item.done:before{background:var(--green)}

/* ---------- Stat tile (distinct from existing .metric — compact single-value KPI) ---------- */
.stat-tile{padding:14px 16px;border-radius:13px;background:var(--surface2);text-align:center}
.stat-tile b{display:block;font-size:24px}
.stat-tile span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

/* ============================================================
   Dark mode (Phase 10 polish, added here since Account Settings
   needs a real toggle for it). Overrides the same --ink/--paper/etc
   variable names already defined in styles.css's :root — same
   variables, dark values, no separate dark-mode class system needed.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:#f2f3f5;--ink2:#c7cbd3;--muted:#9198a3;--muted2:#787f8b;
    --paper:#0f1116;--surface:#181b21;--surface2:#1f232b;--line:#2a2e37;
    --blue2:#8ba3ff;
  }
}
:root[data-theme="dark"] {
  --ink:#f2f3f5;--ink2:#c7cbd3;--muted:#9198a3;--muted2:#787f8b;
  --paper:#0f1116;--surface:#181b21;--surface2:#1f232b;--line:#2a2e37;
  --blue2:#8ba3ff;
}
/* .panel/.topbar/.avatar/.field inputs use hardcoded white/light values in
   styles.css rather than var(--surface) — override them explicitly for dark
   mode rather than trying to edit that minified file in place. */
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] .field select { background:var(--surface); }
:root[data-theme="dark"] .avatar { background:var(--surface2); color:var(--ink); }
/* .tab and .side-nav a (inactive state) also use hardcoded gray in
   styles.css - found while adding these to the design-system style
   guide page: unreadable-low-contrast gray-on-near-black in dark mode
   on real pages (decision/*.html tabs, member/profile.html side-nav). */
:root[data-theme="dark"] .tab,
:root[data-theme="dark"] .side-nav a { color:var(--muted); }
:root[data-theme="dark"] .subnav { background:rgba(255,255,255,.06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .panel,
  :root:not([data-theme="light"]) .topbar,
  :root:not([data-theme="light"]) .field input,
  :root:not([data-theme="light"]) .field textarea,
  :root:not([data-theme="light"]) .field select { background:var(--surface); }
  :root:not([data-theme="light"]) .avatar { background:var(--surface2); color:var(--ink); }
  :root:not([data-theme="light"]) .tab,
  :root:not([data-theme="light"]) .side-nav a { color:var(--muted); }
  :root:not([data-theme="light"]) .subnav { background:rgba(255,255,255,.06); }
}
.theme-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.theme-toggle button{border:0;background:transparent;padding:7px 12px;border-radius:999px;font-size:13px;color:var(--muted)}
.theme-toggle button.active{background:var(--ink);color:var(--paper)}