/* =============================================================================
   PWS Leads — application styles
   =============================================================================
   Hand-written, no framework, no build step. Layout mirrors
   docs/Lead_Data/Lead_Sample_layout.png: fixed-width facet rail on the left,
   result grid filling the rest.

   Custom properties are defined once for light and overridden for dark, so
   every rule below is written once regardless of theme.
   ========================================================================== */

:root {
  --bg:            #ffffff;
  --bg-subtle:     #f7f8fa;
  --bg-sunken:     #f0f2f5;
  --surface:       #ffffff;
  --border:        #e3e6ea;
  --border-strong: #cdd3da;

  --text:          #1a1d21;
  --text-muted:    #6b7280;
  --text-faint:    #9aa1ab;

  --accent:        #4f46e5;
  --accent-soft:   #eef2ff;
  --accent-text:   #ffffff;

  --danger:        #dc2626;
  --ok:            #059669;

  --radius:   6px;
  --radius-lg: 10px;
  --shadow:   0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);

  --sidebar-w: 292px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #14161a;
    --bg-subtle:     #1a1d22;
    --bg-sunken:     #0f1114;
    --surface:       #1a1d22;
    --border:        #2a2f37;
    --border-strong: #3a414b;

    --text:          #e6e9ee;
    --text-muted:    #9aa3ae;
    --text-faint:    #6b7480;

    --accent:        #6366f1;
    --accent-soft:   #1e1b4b;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
  }
}

*, *::before, *::after { box-sizing: border-box; }
[x-cloak] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--bg-sunken);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* =============================================================================
   Shell
   ========================================================================== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
}

/* =============================================================================
   Sidebar
   ========================================================================== */
.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 13px;
}
.brand-name { font-weight: 650; letter-spacing: -.01em; }
.brand-user {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
}
.brand-user:hover { background: var(--accent-soft); color: var(--accent); }

/* --- saved lists ---------------------------------------------------------- */
.lists { padding: 10px 10px 6px; }

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-weight: 500;
  text-align: left;
}
.list-row.is-active { background: var(--accent-soft); color: var(--accent); }
.list-row .count { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.list-row.is-active .count { color: var(--accent); }

.list-new { display: flex; gap: 6px; margin-top: 6px; }
.list-new input {
  flex: 1; min-width: 0;
  padding: 6px 9px;
  font: inherit; font-size: 13px;
  color: var(--text);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.list-new input:disabled { opacity: .55; cursor: not-allowed; }

.icon-btn {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.icon-btn:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.icon-btn:disabled { opacity: .45; cursor: not-allowed; }

/* --- Basic / Advanced ----------------------------------------------------- */
.mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 4px 10px 10px;
  padding: 3px;
  background: var(--bg-sunken);
  border-radius: var(--radius);
}
.mode-toggle button {
  padding: 6px 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-weight: 550;
  font-size: 13px;
}
.mode-toggle button.is-active {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow);
}

/* --- facets --------------------------------------------------------------- */
/* min-height:0 is what actually makes this scroll. A flex item defaults to
   min-height:auto, which refuses to shrink below its content — so the rail grew
   to fit every facet and overflow-y had nothing to clip. Same root cause as the
   pagination bar being pushed off the bottom of the results panel. */
.facets {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 10px 12px;
  scrollbar-width: thin;
}

/* --- section navigation --------------------------------------------------- */
.main-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 13px;
}
.nav-item:hover { background: var(--bg-subtle); color: var(--text); }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.nav-glyph { width: 15px; text-align: center; font-size: 13px; }

.rail-title {
  margin: 2px 6px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.facet-group + .facet-group { margin-top: 14px; }
.facet-group-title {
  margin: 12px 6px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.facet {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  background: var(--surface);
}
.facet > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
}
.facet > summary::-webkit-details-marker { display: none; }
.facet-label { flex: 1; }
.facet-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.facet-caret { color: var(--text-faint); transition: transform .15s ease; }
.facet[open] > summary .facet-caret { transform: rotate(90deg); }

.facet-body { padding: 0 11px 10px; }

.facet-search {
  width: 100%;
  padding: 6px 9px;
  margin-bottom: 7px;
  font: inherit; font-size: 12.5px;
  color: var(--text);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.facet-values { display: flex; flex-direction: column; gap: 1px; }

.facet-value {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-muted);
}
.facet-value:hover { background: var(--bg-subtle); color: var(--text); }
.facet-value .box {
  flex: none;
  width: 14px; height: 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface);
}
.facet-value.is-selected { color: var(--text); font-weight: 550; }
.facet-value.is-selected .box {
  background: var(--accent);
  border-color: var(--accent);
  position: relative;
}
.facet-value.is-selected .box::after {
  content: "";
  position: absolute;
  left: 3.5px; top: .5px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.facet-value .name {
  flex: 1; min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.facet-value .count {
  flex: none;
  font-size: 11.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.facet-more {
  width: 100%;
  margin-top: 6px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 12.5px;
}
.facet-more:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.facet-empty, .facet-note {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--text-faint);
  font-style: italic;
}

.facet-range { display: flex; align-items: center; gap: 5px; }
.facet-range input {
  flex: 1; min-width: 0;
  padding: 6px 8px;
  font: inherit; font-size: 12.5px;
  color: var(--text);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.facet-range .dash { color: var(--text-faint); }

/* --- matching footer ------------------------------------------------------ */
.matching {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.matching-label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--text-faint);
}
.matching-count {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.approx { color: var(--text-faint); font-weight: 400; cursor: help; }

.clear-all {
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 550;
}
.clear-all:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* =============================================================================
   Main panel
   ========================================================================== */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.search-form { flex: 1; min-width: 0; }
.search-input {
  width: 100%;
  padding: 8px 13px;
  font: inherit;
  color: var(--text);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.search-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.order-by { display: flex; align-items: center; gap: 7px; flex: none; }
.order-by label { color: var(--text-muted); font-size: 13px; }
.order-by select, .rows-per-page select {
  padding: 7px 9px;
  font: inherit; font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* The swap target must participate in the flex chain, or .table-wrap's
   flex:1/overflow:auto has no height to work against — the table grows to its
   full content height and pushes the pagination bar off the bottom of the
   viewport. min-height:0 is required too: flex items default to min-height:auto,
   which refuses to shrink below content size and reintroduces the same bug. */
#search-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* --- result header -------------------------------------------------------- */
.result-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.result-count { color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.result-count strong { color: var(--text); font-variant-numeric: tabular-nums; }

.result-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* --- action buttons ------------------------------------------------------- */
.action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
}
.action:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.action:disabled { opacity: .45; cursor: not-allowed; }
.action.is-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.action.is-primary:hover { opacity: .9; color: var(--accent-text); }
.action .glyph { font-size: 13px; line-height: 1; }

.selected-badge {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- settings / column picker -------------------------------------------- */
.popover-wrap { position: relative; }
.popover {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: 330px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(16, 24, 40, .16);
}
@media (prefers-color-scheme: dark) {
  .popover { box-shadow: 0 8px 28px rgba(0, 0, 0, .55); }
}
.popover h4 {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.popover h4:not(:first-child) { margin-top: 14px; }

.quick-picks { display: flex; flex-wrap: wrap; gap: 4px; }
.quick-pick {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 12px;
  text-transform: capitalize;
}
.quick-pick:hover { border-color: var(--accent); color: var(--accent); }
.quick-pick.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

.column-list { display: flex; flex-direction: column; gap: 1px; }
.column-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
}
.column-opt:hover { background: var(--bg-subtle); color: var(--text); }
.column-opt input { flex: none; }

.popover-actions {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.popover-actions .action { flex: 1; justify-content: center; }
.took { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
.btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 550;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }

/* --- table ---------------------------------------------------------------- */
.table-wrap {
  flex: 1;
  min-height: 0;      /* see #search-body — without this the bar is pushed off */
  overflow: auto;
  scrollbar-width: thin;
}

table.results {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
table.results th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 12px;
  text-align: left;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}
table.results th a { color: inherit; }
table.results th a:hover { color: var(--accent); }

table.results td {
  padding: 9px 12px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
table.results tbody tr:hover td { background: var(--bg-subtle); }

td.col-domain, td.col-merchant_name { color: var(--text); font-weight: 500; }
td.col-domain { font-family: var(--mono); font-size: 12.5px; }
td.col-rank, td.col-employee_count,
td.col-estimated_monthly_sales_usd, td.col-estimated_yearly_sales_usd,
td.col-products_sold, td.col-combined_followers {
  font-variant-numeric: tabular-nums;
}

th.check, td.check { width: 34px; padding-right: 0; }
input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; }

/* --- pagination ----------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex: none;   /* never shrink away when the table is tall */
}
.rows-per-page { display: flex; align-items: center; gap: 7px; }
.rows-per-page label { color: var(--text-muted); font-size: 13px; }

.pages { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.page-btn {
  display: grid; place-items: center;
  min-width: 28px; height: 28px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
}
.page-btn:hover { border-color: var(--accent); color: var(--accent); }
.page-btn.is-disabled { opacity: .4; pointer-events: none; }
.page-of { padding: 0 9px; color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }

.range { color: var(--text-faint); font-size: 12px; font-variant-numeric: tabular-nums; }

/* --- states --------------------------------------------------------------- */
.empty, .alert {
  margin: 40px auto;
  max-width: 460px;
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
}
.empty strong, .alert strong { display: block; color: var(--text); margin-bottom: 6px; }
.alert {
  border: 1px solid var(--danger);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--danger) 7%, transparent);
}
.alert a, .empty a { color: var(--accent); text-decoration: underline; }

.busy-indicator {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 12.5px;
  font-weight: 550;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.htmx-request .busy-indicator,
.busy-indicator.htmx-request { opacity: 1; }

/* =============================================================================
   Login
   ========================================================================== */
.login-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 350px;
  padding: 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.login-card h1 {
  margin: 14px 0 4px;
  font-size: 18px;
  letter-spacing: -.01em;
}
.login-card .sub { margin: 0 0 20px; color: var(--text-muted); font-size: 13px; }
.login-card label {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-muted);
}
.login-card input[type="email"],
.login-card input[type="password"] {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 14px;
  font: inherit;
  color: var(--text);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.login-card input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.login-card button[type="submit"] {
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}
.login-error {
  padding: 9px 12px;
  margin-bottom: 16px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
  font-size: 13px;
}

/* =============================================================================
   Narrow screens — the facet rail collapses above the results
   ========================================================================== */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
  .facets { max-height: 45vh; }
  .table-wrap { overflow-x: auto; }
}

/* =============================================================================
   CRM workbench
   ========================================================================== */

/* --- bulk action bar ------------------------------------------------------ */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-top: 1px solid var(--accent);
  background: var(--accent-soft);
  flex: none;
}
.bulk-bar .inline { display: flex; align-items: center; gap: 5px; }
.bulk-bar select {
  padding: 5px 8px;
  font: inherit; font-size: 12.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.bulk-bar strong { font-variant-numeric: tabular-nums; }

/* --- lead drawer ---------------------------------------------------------- */
#drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(16, 24, 40, .35);
}
#drawer-mount {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 41;
  width: min(760px, 92vw);
  background: var(--surface);
  border-left: 1px solid var(--border-strong);
  box-shadow: -8px 0 28px rgba(16, 24, 40, .18);
  display: flex;
  flex-direction: column;
}
@media (prefers-color-scheme: dark) {
  #drawer-backdrop { background: rgba(0, 0, 0, .6); }
  #drawer-mount { box-shadow: -8px 0 28px rgba(0, 0, 0, .6); }
}

.drawer { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.drawer-head h2 { margin: 0 0 2px; font-size: 16px; letter-spacing: -.01em; }
.drawer-domain { color: var(--accent); font-family: var(--mono); font-size: 12.5px; }

.drawer-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;      /* same rule as everywhere else: allow the panes to scroll */
  overflow: hidden;
}
.drawer-col {
  padding: 14px 18px;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
}
.drawer-col + .drawer-col { border-left: 1px solid var(--border); }
@media (max-width: 760px) {
  .drawer-body { grid-template-columns: 1fr; overflow-y: auto; }
  .drawer-col + .drawer-col { border-left: 0; border-top: 1px solid var(--border); }
}

.facts { margin: 0 0 14px; }
.fact {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.fact dt { color: var(--text-faint); }
.fact dd { margin: 0; color: var(--text); word-break: break-word; }

.drawer-text { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }

.drawer-form { margin-bottom: 16px; }
.drawer-form label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.drawer-form .inline { display: flex; gap: 6px; margin-bottom: 6px; }
.drawer-form select,
.drawer-form input[type="text"],
.drawer-form textarea {
  width: 100%;
  padding: 7px 10px;
  font: inherit; font-size: 13px;
  color: var(--text);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.drawer-form textarea { resize: vertical; margin-bottom: 6px; }
.drawer-form .inline select { flex: 1; }

.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
.chip {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
}

.timeline { list-style: none; margin: 0 0 16px; padding: 0; }
.timeline li {
  padding: 8px 0 8px 12px;
  border-left: 2px solid var(--border);
  margin-bottom: 2px;
}
.timeline.compact li { padding-top: 5px; padding-bottom: 5px; }
.timeline .meta { font-size: 11px; color: var(--text-faint); }
.activity-type {
  display: inline-block;
  margin-right: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
}

.domain-link { color: var(--accent); }
.domain-link:hover { text-decoration: underline; }

/* --- toast ---------------------------------------------------------------- */
#toast-mount { position: fixed; bottom: 18px; right: 18px; z-index: 50; }
.toast {
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--ok);
  color: #fff;
  font-size: 13px;
  font-weight: 550;
  box-shadow: var(--shadow);
}

/* =============================================================================
   Admin
   ========================================================================== */
.admin {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 100vh;
}
.admin-rail {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.admin-rail-foot { margin-top: auto; padding: 10px; border-top: 1px solid var(--border); }
.admin-rail-foot .meta { padding: 6px 10px 0; font-size: 11px; color: var(--text-faint); }

.admin-main { padding: 26px 30px; max-width: 1180px; }
.admin-title { margin: 0 0 22px; font-size: 21px; letter-spacing: -.02em; }
.admin-h2 {
  margin: 30px 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 10px;
}
.stat {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.stat-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.stat strong {
  display: block;
  margin: 5px 0 2px;
  font-size: 23px;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.stat-note { font-size: 11px; color: var(--text-faint); }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 13px;
}
.admin-table th, .admin-table td {
  padding: 9px 13px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-table thead th {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg-subtle);
}
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr.is-muted { opacity: .5; }
.admin-table code { font-family: var(--mono); font-size: 12px; }
.admin-table .inline { display: inline-flex; }
.error-row { color: var(--danger); font-family: var(--mono); font-size: 11.5px; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}
.badge-completed { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.badge-failed, .badge-cancelled { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.badge-running { background: var(--accent-soft); color: var(--accent); }

.notice {
  padding: 13px 16px;
  margin-bottom: 18px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: 13px;
}
.notice .meta { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }
.notice code { font-family: var(--mono); font-size: 12px; }
.notice-key { border-left-color: var(--ok); }
.notice-key .key {
  display: block;
  margin: 8px 0;
  padding: 9px 12px;
  background: var(--bg-sunken);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 13px;
  user-select: all;
  word-break: break-all;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 16px;
  padding: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.inline-form input, .inline-form select {
  padding: 7px 10px;
  font: inherit; font-size: 13px;
  color: var(--text);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.inline-form input[type="email"], .inline-form input[type="text"] { min-width: 175px; }

.ok-line { color: var(--ok); font-size: 13px; }
.warn-line { color: var(--danger); font-size: 13px; }
.meta { font-size: 12px; color: var(--text-faint); }

/* --- Apollo-style include / exclude on facet values ----------------------- */
.facet-value { display: flex; align-items: center; gap: 2px; padding: 0; }
.facet-value .fv-include {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 5px 6px;
  border-radius: 4px;
  color: inherit;
}
.facet-value .fv-include:hover { background: var(--bg-subtle); color: var(--text); }

/* The exclude affordance stays out of the way until the row is hovered, so a
   sidebar of 8 values does not read as 16 controls. */
.facet-value .fv-exclude {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 4px;
  color: var(--text-faint);
  font-size: 12px;
  opacity: 0;
  transition: opacity .12s ease;
}
.facet-value:hover .fv-exclude { opacity: 1; }
.facet-value .fv-exclude:hover { background: var(--danger); color: #fff; }

.facet-value.is-excluded .fv-exclude { opacity: 1; background: var(--danger); color: #fff; }
.facet-value.is-excluded .name { text-decoration: line-through; color: var(--text-faint); }
.facet-value.is-excluded .box { border-color: var(--danger); background: var(--danger); position: relative; }
.facet-value.is-excluded .box::after {
  content: "";
  position: absolute;
  left: 2px; top: 5px;
  width: 7px; height: 2px;
  background: #fff;
}

/* Inverted ICP view — showing only what the rules exclude. Amber, not the
   primary accent: it is a review state, not a normal working state. */
.action.is-warning {
  background: color-mix(in srgb, #d97706 16%, transparent);
  border-color: #d97706;
  color: #b45309;
}
@media (prefers-color-scheme: dark) { .action.is-warning { color: #fbbf24; } }