/* Keyword Market: page-specific pieces on top of audit-theme.css. Intent colours (--intent-*) live there too. */
.km-body { --page-max: 1520px; }
.km-intent--informational { --km-intent: var(--intent-informational); }
.km-intent--commercial { --km-intent: var(--intent-commercial); }
.km-intent--transactional { --km-intent: var(--intent-transactional); }
.km-intent--navigational { --km-intent: var(--intent-navigational); }
.km-intent--unknown { --km-intent: var(--border-hover); }

/* ---- inputs ---- */
.km-inputs { display: grid; grid-template-columns: minmax(260px, 1.3fr) minmax(280px, 1fr); gap: 18px 24px; align-items: start; }
@media (max-width: 900px) { .km-inputs { grid-template-columns: 1fr; } }
.km-inputs .panel-lbl { display: block; }
.km-optional { font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--text-muted); opacity: .8; margin-left: 4px; }
#km-seed-count.is-over { color: var(--danger-strong); opacity: 1; }
.km-textarea {
  width: 100%; min-height: 150px; resize: vertical; background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 13px; font-family: var(--sans); font-size: 13px; line-height: 1.5; outline: none;
}
.km-textarea:focus { border-color: var(--accent); }
.km-textarea::placeholder { color: var(--text-muted); }
.km-side { display: flex; flex-direction: column; gap: 18px; padding-top: 22px; }
@media (max-width: 900px) { .km-side { padding-top: 0; } }
.km-opts { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.km-run { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.km-run .btn { height: 42px; padding: 0 22px; }
.km-cost { display: flex; flex-direction: column; font-size: 12px; color: var(--text-muted); min-width: 0; flex: 1; }
.km-cost b { color: var(--text); font-size: 13px; }

/* ---- progress ---- */
.km-progress { display: flex; flex-direction: column; gap: 12px; color: var(--text-2); }
.km-progress-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.km-progress-top #km-progress-text { flex: 1; min-width: 200px; }
.km-bar { height: 6px; border-radius: 4px; background: var(--bg-input); overflow: hidden; }
.km-bar span { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--accent); transition: width .25s; }
.km-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 13px; color: var(--text); border-top: 1px solid var(--border-soft); padding-top: 12px; }
.km-confirm p { margin: 0; flex: 1; min-width: 240px; }

.km-note { margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 13px; color: var(--text-2); background: var(--bg-panel); }
.km-note.is-warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.km-note ul { margin: 6px 0 0; padding-left: 18px; }
.km-muted { color: var(--text-muted); }

/* ---- sections ---- */
.km-section { margin-bottom: 30px; }
.km-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 12px; }
.km-section-head h2 { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -.005em; }
.km-section-meta { color: var(--text-muted); font-size: 13px; }

.km-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 0; }
.km-meter { height: 6px; border-radius: 4px; background: var(--bg-input); overflow: hidden; margin: 2px 0 10px; }
.km-meter span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }

/* ---- tables ---- */
.km-seed-table, .km-kw-table { min-width: 900px; }
.km-seed-table th, .km-seed-table td, .km-kw-table th, .km-kw-table td { padding: 10px 8px; white-space: nowrap; }
/* The seed name takes the spare width and truncates; numbers never get cut off. */
.km-seed-table .km-col-seed-name { width: 100%; max-width: 0; min-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.km-seed-table th:not(.l), .km-seed-table td:not(.l), .km-kw-table th:not(.l), .km-kw-table td:not(.l) { width: 1%; }
.km-kw-table .km-col-kw { width: 100%; max-width: 0; min-width: 180px; white-space: normal; font-family: var(--sans); }
.km-kw-table .km-col-seed { font-family: var(--sans); color: var(--text-2); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.km-seed-row { cursor: pointer; }
.km-seed-row td:first-child { font-family: var(--sans); font-weight: 600; }
.km-seed-row:focus-visible td { outline: none; background: var(--row-hover); }
.km-seed-row.is-selected td { background: var(--accent-wash); }
.km-seed-row.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.km-seed-row.is-error td:first-child { color: var(--danger); }
.km-total-row td { font-weight: 600; border-top: 1px solid var(--border); background: var(--bg-input); }
.km-total-row td:first-child { font-family: var(--sans); }
.km-seed-err { font-family: var(--sans); white-space: normal !important; }
.km-th-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--km-intent); margin-right: 5px; vertical-align: middle; }

/* Stacked intent bar: one segment per intent, 1px surface gap between them. */
.km-mix { display: flex; gap: 1px; width: 110px; height: 10px; border-radius: 3px; overflow: hidden; background: var(--bg-input); }
.km-mix span { display: block; height: 100%; background: var(--km-intent); }

th.km-sortable { cursor: pointer; user-select: none; }
th.km-sortable:hover { color: var(--text); }
th.km-sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
th.km-sortable[aria-sort="ascending"]::after { content: " ▲"; font-size: 9px; }
th.km-sortable[aria-sort="descending"]::after { content: " ▼"; font-size: 9px; }

.km-intent-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 600; font-family: var(--sans);
  color: var(--text); background: color-mix(in srgb, var(--km-intent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--km-intent) 45%, transparent);
}
.km-intent-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--km-intent); }
.km-more { font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 5px; margin-left: 5px; }

.km-live { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 12px; padding: 10px 14px; border: 1px dashed var(--border-hover); border-radius: var(--radius-md); font-size: 13px; color: var(--text-2); }
.km-live p { margin: 0; flex: 1; min-width: 260px; }
.km-nodata { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); }
.km-src { font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--accent); background: var(--accent-dim); border-radius: var(--radius-sm); padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.km-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.km-search { flex: 1; min-width: 200px; max-width: 360px; }
.km-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--text-muted); }
.km-pager-btns { display: flex; gap: 8px; }

@media (max-width: 640px) {
  .pg-head { flex-wrap: wrap; }
  .head-right { flex-wrap: wrap; gap: 10px 14px; }
}

/* Shared (read-only) reports: no live SERP collection (it runs on the owner's Moz key). */
body.share-mode [data-live-row],
body.share-mode [data-live-all] { display: none !important; }

/* Columns menu: optional keyword-table columns. */
.km-cols { position: relative; margin-left: auto; }
.km-cols summary { list-style: none; }
.km-cols summary::-webkit-details-marker { display: none; }
.km-cols-menu { position: absolute; z-index: 12; right: 0; top: calc(100% + 6px); min-width: 200px; display: grid; gap: 2px; padding: 6px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop, 0 8px 24px rgba(0,0,0,.12)); }
.km-col-opt { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; }
.km-col-opt:hover { background: var(--bg-panel-2); }
.km-col-opt input { accent-color: var(--accent); }
/* Next to the sidebar the per-intent counts give way below 1440px; the mix bar's tooltip and the exports keep them. */
@media (max-width: 1439px) { .km-seed-table .km-intent-n { display: none; } }