/* ASO Keyword Planner: the tool layer on top of Review Intel (ri-tokens.css + bundle.css).
   New pieces use the kp- prefix and only Review Intel tokens. Light only. */
html, body { margin: 0; background: var(--page); }
.kp-root { min-height: 100vh; font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
.kp-root *, .kp-root *::before, .kp-root *::after { box-sizing: border-box; }
.kp-frame { min-height: 100vh; display: flex; flex-direction: column; }
.kp-main { flex: 1 0 auto; }

/* Header: site wordmark + tool name, plain type (no mark of its own) */
.kp-brand { display: flex; align-items: center; gap: var(--space-8); min-width: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.kp-brand__sep { font-weight: 400; color: var(--border-input); }
.kp-brand__tool { font-weight: 500; color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; }

/* Input */
.kp-textarea { display: block; width: 100%; min-height: 132px; margin: 0; padding: 15px var(--space-16); border: 1px solid var(--border-input); border-radius: var(--radius-lg); background: var(--surface); font: inherit; font-size: 16px; line-height: 1.5; color: var(--ink); resize: vertical; }
.kp-textarea::placeholder { color: var(--ink-tertiary); opacity: 1; }
.kp-textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kp-form-row { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.kp-form-row > .ri-select { flex: 1 1 190px; }
.kp-form-row > .ri-btn { flex: 1 1 auto; }
.kp-meta { margin: var(--space-14) 0 0; font-size: 13px; color: var(--ink-tertiary); }
.kp-meta a { color: var(--ink-secondary); text-underline-offset: 2px; }
.kp-error { margin: var(--space-8) 0 0; font-size: 14px; color: var(--ink); }

/* Example result crop beside the form */
.kp-example .ri-wall__viewport { height: 600px; }
.kp-example .ri-crop { padding: var(--space-18); }
.kp-example .kp-fields { gap: var(--space-14); }
.kp-example .kp-value { padding: 11px 13px; font-size: 15px; }
.kp-example .kp-value--mono { font-size: 13px; }
.kp-example .kp-table { margin-top: var(--space-22); }

/* Summary bar under the header on result and working screens */
.kp-summary { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--gutter); border-bottom: 1px solid var(--rule); }
.kp-summary__text { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14px; color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Result layout: keywords left, the listing card right; the card comes first on narrow screens */
.kp-result { padding: clamp(28px, 4vw, 52px) var(--gutter) var(--section-pad-bottom); }
.kp-result__head { margin: 0 0 clamp(24px, 3vw, 36px); }
.kp-result__meta { margin: var(--space-12) 0 0; font-size: 13px; color: var(--ink-tertiary); }
.kp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "table card"; gap: 40px; align-items: start; }
.kp-cols__card { grid-area: card; position: sticky; top: 24px; min-width: 0; }
.kp-cols__table { grid-area: table; min-width: 0; }
@media (max-width: 1000px) {
  .kp-cols { grid-template-columns: minmax(0, 1fr); grid-template-areas: "card" "table"; gap: 32px; }
  .kp-cols__card { position: static; }
}

/* Listing card (Review Intel read card) */
.kp-card .ri-read__head { align-items: center; padding-top: var(--space-16); padding-bottom: var(--space-16); }
.kp-card .ri-read__body { padding: var(--space-22) var(--cell-pad) var(--space-24); }
.kp-fields { display: grid; gap: var(--space-18); }
.kp-field__top { display: flex; align-items: center; gap: var(--space-10); margin: 0 0 var(--space-8); }
.kp-field__label { flex: 1 1 auto; margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.kp-count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-tertiary); font-variant-numeric: tabular-nums; }
.kp-value { display: block; width: 100%; margin: 0; padding: 13px 15px; border: 1px solid var(--border-input); border-radius: var(--radius-lg); background: var(--surface); font-size: 16px; line-height: 1.45; color: var(--ink); outline: none; }
.kp-value:focus-visible { box-shadow: var(--focus-ring); }
.kp-value--mono { font-family: var(--font-mono); font-size: 14px; line-height: 1.6; }
.kp-value .ri-mark { font-weight: inherit; }
.kp-coverage { margin: var(--space-22) 0 0; padding: var(--space-18) 0 0; border-top: 1px solid var(--divider); }
.kp-coverage__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); margin: 0 0 var(--space-10); font-size: 14px; color: var(--ink-secondary); }
.kp-coverage__row strong { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.kp-track { display: block; height: var(--bar-height); border-radius: var(--radius-pill); background: var(--bar-track); overflow: hidden; }
.kp-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--bar-fill); }

/* Toolbar: tabs + list actions */
.kp-tabs { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: 0 0 var(--space-16); }
.kp-tab { display: inline-flex; align-items: center; gap: var(--space-6); height: var(--control-sm); padding: 0 var(--space-14); border: 1px solid var(--border-card); border-radius: var(--radius-pill); background: var(--surface); font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-secondary); white-space: nowrap; cursor: pointer; }
.kp-tab:hover { background: var(--fill); }
.kp-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kp-tab[aria-selected="true"] { border-color: var(--fill-tag); background: var(--fill-tag); color: var(--ink); font-weight: 600; }
.kp-tab__n { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink-tertiary); }
.kp-tab[aria-selected="true"] .kp-tab__n { color: var(--ink-secondary); }
.kp-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }

/* Keyword table */
.kp-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.kp-table th { padding: 0 var(--space-8) var(--space-10); border-bottom: 1px solid var(--rule); font-size: 13px; font-weight: 400; text-align: left; color: var(--ink-tertiary); white-space: nowrap; }
.kp-table td { padding: 11px var(--space-8); border-bottom: 1px solid var(--divider); vertical-align: middle; }
.kp-table tr.is-hover td { background: var(--fill); }
.kp-table tr.is-hover td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.kp-table tr.is-hover td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.kp-c-rank { width: 40px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-tertiary); }
.kp-c-kw { font-weight: 500; color: var(--ink); }
.kp-c-vol { width: 176px; }
.kp-c-fit { width: 70px; font-size: 14px; color: var(--ink-secondary); }
.kp-c-use { width: 156px; }
.kp-c-copy { width: 40px; padding-left: 0 !important; padding-right: 4px !important; text-align: right; }
.kp-vol { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; gap: var(--space-10); }
.kp-num { font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-review); }
.kp-use { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.kp-none { font-size: 13px; color: var(--ink-tertiary); }
.kp-copy { width: 32px; height: 32px; color: var(--ink-secondary); visibility: hidden; }
.kp-table tr.is-hover .kp-copy, .kp-table tr:hover .kp-copy, .kp-copy:focus-visible { visibility: visible; }
.kp-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12); margin: var(--space-18) 0 0; }
.kp-caveat { margin: var(--space-16) 0 0; font-size: 13px; color: var(--ink-tertiary); }

/* Compact table inside the example crop */
.kp-table--mini { font-size: 14px; }
.kp-table--mini td { padding: 9px var(--space-6); }
.kp-table--mini th { padding: 0 var(--space-6) var(--space-8); font-size: 12px; }
.kp-table--mini .kp-c-vol { width: 150px; }
.kp-table--mini .kp-vol { grid-template-columns: minmax(0, 1fr) 58px; }
.kp-table--mini .kp-num { font-size: 13px; }

/* Working state */
.kp-steps { max-width: 470px; margin: 0 0 var(--space-24); padding: var(--space-14); gap: var(--space-10); }
.kp-steps .ri-handoff__step { font-size: 15px; }
.kp-steps .ri-handoff__mark { width: 24px; height: 24px; }
.kp-steps__n { font-variant-numeric: tabular-nums; }
.kp-skel { display: block; height: 12px; border-radius: var(--radius-pill); background: var(--fill-tag); }
.kp-value--empty { display: grid; gap: var(--space-10); padding-top: 19px; padding-bottom: 19px; }
.kp-table--skel td { height: 54px; }
.kp-count.is-over { font-weight: 600; color: var(--ink); }

/* States */
.kp-states { --grid-min: 360px; }
.kp-state { padding: var(--space-24) var(--cell-pad) var(--space-28); }
.kp-state__label { margin: 0 0 var(--space-18); font-size: 13px; color: var(--ink-tertiary); }
.kp-state__text { margin: var(--space-6) 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-body); }
.kp-state__actions { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: var(--space-18) 0 0; }

/* Footer */
.kp-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8) var(--space-16); padding: var(--space-18) var(--gutter); border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-secondary); }
.kp-footer a { color: var(--ink); text-underline-offset: 2px; }

/* Phones */
@media (max-width: 640px) {
  .kp-brand__site, .kp-brand__sep { display: none; }
  .kp-example .ri-wall__viewport { height: 470px; }
  .kp-table thead { display: none; }
  .kp-table, .kp-table tbody { display: block; }
  .kp-table tr { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "rank kw num" ". use fit"; align-items: center; gap: var(--space-6) var(--space-8); padding: 12px 0; border-bottom: 1px solid var(--divider); }
  .kp-table td { padding: 0; border: 0; }
  .kp-table tr.is-hover { margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: var(--radius-sm); background: var(--fill); }
  .kp-table tr.is-hover td { background: none; }
  .kp-c-rank { grid-area: rank; width: auto; }
  .kp-c-kw { grid-area: kw; }
  .kp-c-vol { grid-area: num; width: auto; }
  .kp-c-vol .kp-track { display: none; }
  .kp-vol { display: block; }
  .kp-c-fit { grid-area: fit; width: auto; font-size: 13px; text-align: right; }
  .kp-c-use { grid-area: use; width: auto; }
  .kp-c-copy { display: none; }
  .kp-table--mini tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kw num" "use use"; }
}
.kp-state__text a { color: var(--ink); text-underline-offset: 2px; }
.kp-state .ri-field + .kp-state__text { margin-top: var(--space-12); }

/* v3: offer hero, numbers strip, free section, email step, text pages */
.kp-hero-note { margin: var(--space-14) 0 0; font-size: 14px; color: var(--ink-secondary); }
.kp-hero-note a { color: var(--ink); text-underline-offset: 2px; }
.kp-hero-note__sep { margin: 0 var(--space-6); color: var(--border-input); }
.kp-badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.kp-numbers { --grid-min: 260px; }
.kp-numbers > div { padding: var(--space-28) var(--cell-pad) var(--space-32); }
.kp-numbers .ri-stat { display: block; margin: 0 0 var(--space-10); font-size: 38px; font-variant-numeric: tabular-nums; }
.kp-numbers p { margin: 0; max-width: 300px; font-size: 15px; line-height: 1.5; color: var(--ink-secondary); }
.kp-free { padding: var(--section-pad-top) var(--gutter) var(--section-pad-bottom); }
.kp-free__grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-40) var(--space-48); }
.kp-free__head { flex: 1 1 340px; min-width: 0; }
.kp-free__head .kp-meta { margin-top: var(--space-18); }
.kp-free__card { flex: 1 1 520px; min-width: 0; padding: var(--space-22); border: 1px solid var(--border-card); border-radius: var(--radius-xl); background: var(--surface); }
.kp-free__card > * + * { margin-top: var(--space-12); }
.kp-drop { display: grid; justify-items: center; gap: var(--space-8); padding: var(--space-28) var(--space-18); border: 1px solid var(--border-input); border-radius: var(--radius-lg); background: var(--surface-subtle); text-align: center; }
.kp-drop__icon { color: var(--icon); }
.kp-drop__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.kp-drop__hint { margin: 0 0 var(--space-6); font-size: 13px; color: var(--ink-tertiary); }
.kp-more-rows { border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.kp-more-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); width: 100%; min-height: 48px; margin: 0; padding: 0 var(--space-4); border: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer; }
.kp-more-row + .kp-more-row { border-top: 1px solid var(--divider); }
.kp-more-row:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.kp-more-row small { margin-left: 6px; font-size: 13px; color: var(--ink-tertiary); }
.kp-panel { padding: var(--space-22); border: 1px solid var(--border-card); border-radius: var(--radius-xl); background: var(--surface); }
.kp-panel > * + * { margin-top: var(--space-14); }
.kp-recap { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-10) var(--space-12); border-radius: var(--radius-md); background: var(--fill); }
.kp-recap .ri-app-tile { width: 32px; height: 32px; }
.kp-recap__name { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-recap__meta { flex: none; font-size: 13px; color: var(--ink-secondary); white-space: nowrap; }
.kp-panel__row { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.kp-panel__row > .ri-field { flex: 3 1 220px; }
.kp-panel__row > .ri-btn { flex: 1 1 auto; }
.kp-done { display: flex; align-items: center; gap: var(--space-10); margin: 0; font-size: 17px; font-weight: 600; }
.kp-done__mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink); }
.kp-doc { max-width: 720px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) var(--gutter) var(--section-pad-bottom); }
.kp-doc .kp-tabs { margin-bottom: var(--space-28); }
.kp-doc h1 { margin: 0; font-size: var(--fs-heading); line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; }
.kp-doc__meta { margin: var(--space-12) 0 0; font-size: 13px; color: var(--ink-tertiary); }
.kp-doc__note { margin: var(--space-24) 0 0; padding: var(--space-14) var(--space-16); border-radius: var(--radius-md); background: var(--fill-strip); font-size: 15px; line-height: 1.55; color: var(--ink-review); }
.kp-doc h2 { margin: var(--space-40) 0 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; }
.kp-doc p { margin: var(--space-12) 0 0; font-size: 16px; line-height: 1.65; color: var(--ink-body); }
.kp-doc a { color: var(--ink); text-underline-offset: 2px; }
.kp-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-18); }
@media (max-width: 640px) {
  .kp-numbers > div { padding-top: var(--space-22); padding-bottom: var(--space-24); }
  .kp-free__card { padding: var(--space-16); }
}
a.kp-tab { text-decoration: none; }
.kp-tab[aria-current="page"] { border-color: var(--fill-tag); background: var(--fill-tag); color: var(--ink); font-weight: 600; }