/* One public keyword page (src/keyword-page-view.js).
 *
 * Every colour is a token from the inline :root block in src/pages.js; nothing here
 * invents a value. The status triple reuses the same token pair the Gefei tables use
 * (`--domain-available` on its 8% surface), so a reader who learned the colour on the
 * batch page reads it the same way here.
 */

/* The layout hands the body a full-width `<main>`; this column is the reading measure and
 * the same 1180px shell /directory uses, so the two new surfaces line up. */
.kwp {
  display: flex; flex-direction: column; gap: 20px;
  max-width: 1180px; margin: 0 auto; padding: 32px 20px 64px;
}

/* `nav` is styled site-header-wide in base.css; these crumbs are one left-aligned line,
 * so the layout properties that rule sets are restated instead of inherited. */
.kwp-crumbs {
  display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px;
  font-size: var(--fs-sm); color: var(--muted);
  margin-bottom: 10px;
}
.kwp-crumbs a { color: var(--accent-strong); text-decoration: none; overflow-wrap: anywhere; margin-left: 0; }
.kwp-crumbs a:hover { text-decoration: underline; }

/* Inline, not flex: the Trends icon belongs after the last word of the keyword, and as a
 * flex item it wraps to a line of its own on a phone. */
.kwp-hero h1 {
  margin: 0 0 10px; overflow-wrap: anywhere;
}
.kwp-lead { margin: 0 0 12px; }
.kwp-search { color: var(--accent-strong); font-weight: 700; text-decoration: none; }
.kwp-search:hover { text-decoration: underline; }

.kwp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kwp-chip {
  display: inline-flex; align-items: center; min-height: 26px;
  padding: 2px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--background-secondary);
  color: var(--foreground-secondary);
  font-size: var(--fs-xs); font-weight: 700;
}
.kwp-verdict.is-worth { background: var(--domain-available-surface); border-color: var(--domain-available); color: var(--domain-available); }
.kwp-verdict.is-maybe { background: var(--background-secondary); border-color: var(--warning); color: var(--warning); }
.kwp-verdict.is-skip { background: var(--danger-surface); border-color: var(--danger); color: var(--danger); }
.kwp-verdict.is-unrated { color: var(--muted); }

.kwp-note {
  margin: 12px 0 0; padding: 10px 14px;
  border: 1px solid var(--warning); border-radius: var(--radius);
  background: var(--background-secondary);
  font-size: var(--fs-sm);
}

.kwp-facts { margin-top: 0; }
.kwp-facts dl {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 16px; margin: 0;
}
.kwp-fact dt { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.kwp-fact dd {
  margin: 4px 0 0; font-size: var(--fs-xl); font-weight: 800;
  color: var(--foreground); overflow-wrap: anywhere;
}
.kwp-fact dd.num { font-variant-numeric: tabular-nums; }

.kwp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.kwp-card { margin-top: 0; }
.kwp-card h2, .kwp-locked h2, .kwp-related h2 { font-size: var(--fs-xl); margin: 0 0 8px; }

.kwp-domain {
  margin: 0 0 8px; font-family: var(--font-mono, monospace); font-size: var(--fs-lg);
  font-weight: 700; color: var(--foreground); overflow-wrap: anywhere;
}
.kwp-status {
  display: inline-flex; align-items: center; min-height: 24px;
  padding: 1px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--background-secondary);
  font-size: var(--fs-xs); font-weight: 700; color: var(--foreground-secondary);
}
.kwp-status.is-available { background: var(--domain-available-surface); border-color: var(--domain-available); color: var(--domain-available); }
.kwp-status.is-registered { background: var(--domain-registered-surface); border-color: var(--domain-registered); color: var(--domain-registered); }
.kwp-status.is-unknown { background: var(--domain-pending-surface); border-color: var(--domain-pending); color: var(--domain-pending); }

.kwp-muted { color: var(--muted); font-size: var(--fs-sm); }
.kwp-link { color: var(--accent-strong); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.kwp-link:hover { text-decoration: underline; }

/* Four facts, two per row: an auto-fit track count leaves the fourth one alone on its own
 * line at every width the card is given. */
.kwp-metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin: 0 0 8px;
}

.kwp-locked { margin-top: 0; border-style: dashed; }
.kwp-locked .btn { margin-top: 4px; }

.kwp-related-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.kwp-related-list li {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card);
}
.kwp-related-list a { color: var(--foreground); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.kwp-related-list a:hover { color: var(--accent-strong); text-decoration: underline; }

.kwp-source { margin-top: 8px; font-size: var(--fs-sm); color: var(--muted); }
.kwp-source p { margin: 4px 0; overflow-wrap: anywhere; }
.kwp-source a { color: var(--accent-strong); }
.kwp-source-item {
  display: inline-block; padding: 1px 8px; margin-right: 6px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--background-secondary); color: var(--foreground-secondary);
}

@media (max-width: 640px) {
  .kwp-fact dd { font-size: var(--fs-lg); }
  .kwp-related-list li { width: 100%; justify-content: space-between; }
}