/* kwmap.css — SEO tab, Keyword Map sub-tab (public/kwmap.js).

   Reuses the analytics kit (.an-section, .an-table, .an-loading, .an-error) and the SEO modal
   (.seo-modal*). Everything new is kwm- prefixed (DESIGN_SYSTEM: namespace per view). Tokens only,
   so dark mode comes free. Hue only for status: rank bands, gap types, AI answers. Floating
   surfaces (the Refresh menu, the map tooltip, the play modal) wear the house glass (.cs-glassy);
   the backgrounds here are the fallback for the Brutal skin, where cases.css is not loaded. */

.kwm { display: flex; flex-direction: column; gap: 14px; }
.kwm [hidden] { display: none !important; }
.kwm-ico { flex: none; vertical-align: -2px; }
.kwm-muted { color: var(--ink-3); font-weight: 500; }
.kwm-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; }
.kwm-note { font-size: 12px; color: var(--ink-3); line-height: 1.5; margin-top: 10px; }
.kwm-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
.kwm-kw { font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; }
.kwm-h2 { font-family: var(--font-serif); font-size: 24px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); margin: 0; }
.kwm-yes { color: var(--green-2); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.kwm-no { color: var(--rust); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }

/* ── header strip ── */
.kwm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px 14px; box-shadow: var(--shadow-sm); }
.kwm-head-facts { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.kwm-head-facts > span { white-space: nowrap; }
.kwm-head-facts b { color: var(--ink); font-weight: 700; }
.kwm-head-facts .kwm-ico { color: var(--green); }
.kwm-head-acts { display: flex; align-items: center; gap: 8px; }
.kwm-menu-wrap { position: relative; }
.kwm-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 280px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 12px; box-shadow: var(--shadow-md); }
.kwm-menu-item, .kwm-preset { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left;
  border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--ink); }
.kwm-menu-item:hover { background: var(--green-bg); }
.kwm-menu-item b, .kwm-preset b { font-size: 13px; font-weight: 700; }
.kwm-menu-item span, .kwm-preset span { font-size: 11px; color: var(--ink-3); }
.kwm-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.kwm-preset { border: 1px solid var(--line-strong); background: var(--panel); padding: 10px 12px; border-radius: 10px; }
.kwm-preset:hover { border-color: var(--green); background: var(--green-bg); }

/* info banner (green = note, amber = warning) */
.kwm-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 13px;
  background: var(--green-bg); border: 1px solid color-mix(in oklab, var(--green) 30%, transparent); color: var(--ink-2); }
.kwm-banner .kwm-ico { color: var(--green); }
.kwm-banner.is-warn { background: var(--amber-bg); border-color: color-mix(in oklab, var(--amber) 35%, transparent); }
.kwm-banner.is-warn .kwm-ico { color: var(--amber); }

/* ── inner nav (pill row, the Content pane's co-subtab2 look under its own class so the
   Content switcher's handlers never touch it) + breadcrumb ── */
.kwm-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.kwm-nav-btn { padding: 5px 13px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink-2);
  border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; transition: background .12s, border-color .12s, color .12s; }
.kwm-nav-btn:hover { border-color: var(--green); color: var(--ink); }
.kwm-nav-btn.active { background: var(--green-bg); color: var(--green-2); border-color: var(--green); }
.kwm-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--amber-bg); color: var(--ink);
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.kwm-crumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.kwm-crumb:empty { display: none; }
.kwm-back { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line-strong); background: var(--panel);
  color: var(--ink-2); border-radius: 8px; padding: 3px 9px 3px 6px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; margin-right: 6px; }
.kwm-back:hover { border-color: var(--green); color: var(--ink); }
.kwm-crumb-link { color: var(--ink-2); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.kwm-crumb-link:hover { color: var(--ink); text-decoration-color: currentColor; }
.kwm-crumb-cur { color: var(--ink); font-weight: 600; }

.kwm-body { display: flex; flex-direction: column; gap: 14px; }
.kwm-body > .an-section, .kwm-section { margin-bottom: 0; }
.kwm-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kwm-title-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.kwm-sub-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.kwm-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.kwm-two > .an-section { margin-bottom: 0; }

/* ── KPI tiles ── */
.kwm-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.kwm-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); min-width: 0; }
.kwm-kpi-top { display: flex; align-items: center; gap: 6px; color: var(--ink-3); }
.kwm-kpi-v { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kwm-kpi-sub { font-family: var(--font); font-size: 11px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }

.kwm-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 26px 18px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--ink-3); font-size: 13px; line-height: 1.5; background: var(--panel); }
.kwm-empty > div { max-width: 560px; }

/* ── Portfolio cards ── */
.kwm-legend-line { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.kwm-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.kwm-legend-item .kwm-mix-seg { display: inline-block; width: 14px; height: 8px; border-radius: 3px; }
.kwm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.kwm-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.kwm-card:hover, .kwm-card:focus-visible { border-color: var(--green); box-shadow: var(--shadow-md); outline: none; }
.kwm-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kwm-card-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.kwm-card-head .kwm-muted { font-size: 12px; }
.kwm-card-vol { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; }
.kwm-card-vol b { font-family: var(--font); font-weight: 700; color: var(--ink); }
.kwm-card-big { display: flex; align-items: baseline; gap: 8px; }
.kwm-big { font-family: var(--font-serif); font-size: 34px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kwm-big-l { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.kwm-trend { display: flex; gap: 6px 12px; flex-wrap: wrap; font-size: 12px; min-height: 18px; }
.kwm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.kwm-facts dt { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); line-height: 1.3; }
.kwm-facts dd { margin: 3px 0 0; font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--ink); }
.kwm-card-ai { font-size: 12px; color: var(--ink-2); display: flex; gap: 6px; align-items: flex-start; line-height: 1.4; }
.kwm-card-ai .kwm-ico { margin-top: 2px; color: var(--ink-3); }
.kwm-card-warn { font-size: 12px; color: var(--rust); display: flex; gap: 6px; align-items: center; font-weight: 600; }

/* gap mix: stacked bar with 2px surface gaps between segments */
.kwm-mix { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
.kwm-mix.is-empty { background: var(--bg-2); }
.kwm-mix-seg { min-width: 3px; }
.kwm-mix-seg.is-won { background: var(--green); }
.kwm-mix-seg.is-lift { background: var(--blue); }
.kwm-mix-seg.is-patchy { background: var(--amber); }
.kwm-mix-seg.is-invisible { background: var(--rust); }
.kwm-mix-seg.is-none { background: var(--mute); }

/* trend arrows */
.kwm-delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font); font-weight: 700; font-size: 12px; white-space: nowrap; }
.kwm-delta .kwm-muted { font-family: var(--font-sans); font-weight: 500; }
.kwm-delta.is-up { color: var(--green-2); }
.kwm-delta.is-down { color: var(--rust); }
.kwm-delta.is-flat { color: var(--ink-3); }

/* ── chips (read-only = borderless tint, tappable = outline pill) ── */
.kwm-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; background: var(--bg-2); color: var(--ink-2); }
.kwm-chip.is-won { background: var(--green-bg); color: var(--green-2); }
.kwm-chip.is-lift { background: var(--blue-bg); color: var(--blue); }
.kwm-chip.is-patchy { background: var(--amber-bg); color: var(--amber-deep, var(--ink)); }
.kwm-chip.is-invisible { background: var(--rust-bg); color: var(--rust); }
.kwm-chip.is-none, .kwm-chip.is-fact { background: var(--bg-2); color: var(--ink-2); }
.kwm-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.kwm-pill { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink-2); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.kwm-pill:hover { border-color: var(--ink); color: var(--ink); }
.kwm-pill.is-act { border-color: var(--ink); color: var(--ink); }
.kwm-pill.is-act:hover { background: var(--ink); color: var(--panel); }
.kwm-pill.is-due { border-color: var(--amber); color: var(--ink); background: var(--amber-bg); }
.kwm-pill:active { transform: scale(.97); }
.kwm-acts { display: flex; gap: 6px; justify-content: flex-end; }
.kwm-tier { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px;
  background: var(--bg-2); color: var(--ink-2); font-family: var(--font); font-size: 11px; font-weight: 700; }
.kwm-tier.is-a { background: var(--ink); color: var(--panel); }
.kwm-flag { display: inline-flex; align-items: center; gap: 3px; color: var(--rust); font-family: var(--font); font-size: 11px; font-weight: 700; cursor: help; }
.kwm-ok { color: var(--ink-3); cursor: help; }

/* ── tables ── */
.kwm-table td { vertical-align: middle; }
.kwm-table th .kwm-ico { margin-left: 3px; }
.kwm-table tfoot td { font-weight: 700; color: var(--ink); background: var(--panel-2); border-top: 1px solid var(--line-strong); }
.kwm-table td.num, .kwm-table th.num { white-space: nowrap; }
.kwm-row { cursor: pointer; }
.kwm-row.is-dup td { opacity: .5; }
.kwm-row.is-open td { background: var(--green-bg); }
.kwm-expand > td { background: var(--panel-2); padding: 14px 16px !important; }
.kwm-scroll { max-height: 560px; overflow: auto; }
.kwm-scroll thead th { position: sticky; top: 0; z-index: 1; }
.kwm-url { display: inline-flex; align-items: center; gap: 3px; color: var(--green-2); text-decoration: none; font-family: var(--font); font-size: 11px; }
.kwm-url:hover { text-decoration: underline; }
/* lucide external-link as a mask, so a 620-row table carries no inline SVG per link */
.kwm-url::after { content: ""; width: 10px; height: 10px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M15 3h6v6%27/%3E%3Cpath d=%27M10 14 21 3%27/%3E%3Cpath d=%27M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6%27/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M15 3h6v6%27/%3E%3Cpath d=%27M10 14 21 3%27/%3E%3Cpath d=%27M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6%27/%3E%3C/svg%3E") no-repeat center / contain; }
.kwm-net .kwm-delta { font-size: 13px; }
.kwm-rank { font-family: var(--font); font-weight: 700; }
.kwm-rank.is-r1 { color: var(--green-2); }
.kwm-rank.is-r4 { color: var(--green); }
.kwm-rank.is-r11 { color: var(--ink-2); }
.kwm-rank.is-out { color: var(--rust); font-family: var(--font-sans); font-weight: 600; font-size: 11px; }

/* sparklines */
.kwm-spark { display: block; overflow: visible; }
.kwm-spark-line { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.kwm-spark-area { fill: var(--bg-2); stroke: none; }
.kwm-spark-peak { fill: var(--ink); }
.kwm-spark-big { margin-top: 8px; max-width: 320px; height: auto; }
.kwm-spark-big text { font-size: 9px; fill: var(--ink-3); font-family: var(--font); }

/* ── keyword: national strip, trend ── */
.kwm-strip { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.6fr 1fr; gap: 10px; }
.kwm-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; box-shadow: var(--shadow-sm); }
.kwm-tile.is-picked { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-bg); }
.kwm-tile-v { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.kwm-tile-v-sm { font-family: var(--font-sans); font-size: 15px; }
.kwm-tile .kwm-pill { align-self: flex-start; margin-top: 6px; }
.kwm-details summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.kwm-details p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.kwm-chart-wrap { position: relative; height: 300px; }
.kwm-chart-sm { position: relative; height: 200px; margin-top: 6px; }
.kwm-trend-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.kwm-events { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.kwm-events:empty { display: none; }
.kwm-event { display: inline-flex; align-items: center; gap: 5px; }
.kwm-event .kwm-ico { color: var(--ink-3); }

/* ── region map ── */
.kwm-map-wrap { position: relative; }
.kwm-map { display: block; width: 100%; height: auto; max-height: 560px; background: var(--panel-2); border-radius: 12px; border: 1px solid var(--line); }
.kwm-dot { cursor: pointer; fill: var(--kwm-c, var(--mute)); stroke: var(--panel); stroke-width: 1; transition: fill .15s; }
.kwm-dot:hover { stroke: var(--ink); stroke-width: 1.5; }
.kwm-sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--kwm-c, var(--mute)); flex: none; }
.kwm-dot.is-r1, .kwm-sw.is-r1 { --kwm-c: var(--green-2); }
.kwm-dot.is-r4, .kwm-sw.is-r4 { --kwm-c: var(--green); }
.kwm-dot.is-r11, .kwm-sw.is-r11 { --kwm-c: color-mix(in oklab, var(--green) 40%, var(--panel)); }
.kwm-dot.is-out, .kwm-sw.is-out { --kwm-c: var(--rust); }
.kwm-dot.is-cite, .kwm-sw.is-cite { --kwm-c: var(--green); }
.kwm-dot.is-ao, .kwm-sw.is-ao { --kwm-c: var(--rust); }
.kwm-dot.is-noao, .kwm-sw.is-noao { --kwm-c: var(--line-strong); }
.kwm-dot.is-a1, .kwm-sw.is-a1 { --kwm-c: color-mix(in oklab, var(--blue) 30%, var(--panel)); }
.kwm-dot.is-a2, .kwm-sw.is-a2 { --kwm-c: color-mix(in oklab, var(--blue) 55%, var(--panel)); }
.kwm-dot.is-a3, .kwm-sw.is-a3 { --kwm-c: color-mix(in oklab, var(--blue) 80%, var(--panel)); }
.kwm-dot.is-a4, .kwm-sw.is-a4 { --kwm-c: var(--blue); }
.kwm-dot.is-nd, .kwm-sw.is-nd { --kwm-c: var(--mute); }
.kwm-sw.is-nd { width: 7px; height: 7px; }
/* not measured: hollow */
.kwm-dot.is-none { fill: none; stroke: var(--line-strong); stroke-width: 1.2; }
.kwm-sw.is-none { background: transparent; border: 1.5px solid var(--line-strong); box-sizing: border-box; }
.kwm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.kwm-legend .kwm-legend-item { gap: 6px; }
.kwm-tip { position: absolute; z-index: 20; pointer-events: none; min-width: 160px; max-width: 280px; padding: 8px 10px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line-strong); box-shadow: var(--shadow-md); font-size: 12px; line-height: 1.45; color: var(--ink); }
.kwm-tip .kwm-muted { font-family: var(--font); font-size: 11px; word-break: break-all; }
.kwm-map-head { margin-top: 16px; margin-bottom: 8px; }

/* segmented control (Rank | AI Overview | Region age) */
.kwm-seg { display: inline-flex; border: 1px solid var(--line-strong); background: var(--bg-2); border-radius: 999px; padding: 2px; gap: 2px; }
.kwm-seg button { height: 28px; padding: 0 12px; border: 0; background: transparent; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.kwm-seg button.on { background: var(--green-bg); color: var(--green-2); }

/* filter pills (region table) */
.kwm-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.kwm-fpill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ink);
  background: transparent; color: var(--ink); font: inherit; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.kwm-fpill.is-on { background: var(--ink); color: var(--panel); }
.kwm-fn { font-family: var(--font); font-weight: 700; opacity: .7; }

/* lists */
.kwm-list { list-style: none; margin: 0; padding: 0; }
.kwm-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.kwm-list li:last-child { border-bottom: 0; }
.kwm-list li > span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.kwm-list li b { font-family: var(--font); }
.kwm-list li.is-ours { background: var(--green-bg); border-radius: 6px; }
.kwm-list li.kwm-row:hover { background: var(--bg-2); }

/* forms */
.kwm-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.kwm-field { display: flex; flex-direction: column; gap: 5px; min-width: 150px; margin-bottom: 10px; }
.kwm-field-grow { flex: 1 1 260px; }
.kwm-field .kwm-muted { font-size: 11px; }
.kwm-field textarea { resize: vertical; font: inherit; }
.kwm-select { height: 32px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; font-size: 12px; }
.kwm-affix { display: inline-flex; align-items: center; height: 34px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); padding: 0 10px; gap: 4px; }
.kwm-affix input { border: 0; outline: 0; background: transparent; width: 80px; font-family: var(--font); font-size: 13px; color: var(--ink); }
.kwm-affix i { font-style: normal; color: var(--ink-3); font-weight: 600; }
.kwm-addrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.kwm-addrow .input { min-width: 240px; }
.kwm-search { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.kwm-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.kwm-settings { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 16px; }
.kwm-settings .kwm-form { margin-top: 12px; }
.kwm-defs { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.kwm-defs dt { font-weight: 700; color: var(--ink); font-size: 13px; }
.kwm-defs dd { margin: 2px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.kwm-rules { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* AI answers grid (question x engine) */
.kwm-ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kwm-ai-list { font-size: 12px; color: var(--ink-2); line-height: 1.5; margin-top: 4px; }
.kwm-ai-list .kwm-label { margin-right: 6px; }

/* watch list detail */
.kwm-play-detail { display: flex; flex-direction: column; gap: 10px; }
.kwm-play-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kwm-read-sum { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--ink-2); }
.kwm-read-sum > span { display: inline-flex; align-items: center; gap: 6px; }
.kwm-reads li { font-size: 12px; }

/* play modal */
.kwm-modal { width: min(620px, 94vw); background: var(--panel); }
.kwm-modal-body { display: flex; flex-direction: column; gap: 4px; }
.kwm-modal-body .input { width: 100%; box-sizing: border-box; }
.kwm-modal-foot { justify-content: flex-end; gap: 8px; }
.kwm-pick { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px; background: var(--panel); margin-top: 6px; }
.kwm-pick-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.kwm-pick-row:hover { background: var(--bg-2); }
.kwm-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; flex: none; }
.kwm-icon-btn:hover { border-color: var(--rust); color: var(--rust); }

/* ── sweep progress ── */
.kwm-run { background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-sm); }
.kwm-run-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.kwm-run-top b { color: var(--ink); }
.kwm-run-phase { color: var(--ink-2); font-family: var(--font); font-size: 12px; margin-right: auto; }
.kwm-run-cancel { color: var(--rust); border-color: color-mix(in oklab, var(--rust) 40%, transparent); }
.kwm-run-cancel.is-armed { background: var(--rust); color: var(--panel); border-color: var(--rust); }
.kwm-bar { height: 10px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.kwm-bar-fill { height: 100%; width: 0; border-radius: 999px; background: var(--green); transition: width .4s ease-out; }
.kwm-bar-fill.is-posting { background: color-mix(in oklab, var(--green) 45%, var(--panel)); }
.kwm-run-facts { font-family: var(--font); font-size: 12px; color: var(--ink-2); }
.kwm-run-msg { font-size: 12px; color: var(--ink-3); }

/* ── narrow screens ── */
@media (max-width: 1200px) {
  .kwm-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kwm-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .kwm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kwm-two, .kwm-trend-grid, .kwm-ai-grid { grid-template-columns: 1fr; }
  .kwm-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kwm-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .kwm-kpis, .kwm-strip, .kwm-presets { grid-template-columns: 1fr; }
  .kwm-kpi-v { font-size: 24px; }
  .kwm-head-acts { width: 100%; justify-content: flex-end; }
  .kwm-menu { right: 0; left: auto; min-width: min(280px, 90vw); }
  .kwm-addrow .input { min-width: 0; flex: 1 1 100%; }
  .kwm-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .kwm-nav::-webkit-scrollbar { display: none; }
  .kwm-nav-btn { white-space: nowrap; }
}

/* Competitor type editor: compact, so the regions count stays in view in the half-width card. */
.kwm-select-type { max-width: 190px; width: 100%; }