/* Landing page (templates/auth/landing.html).
 *
 * Built on the same components as the console -- .ac-searchlayout,
 * .ac-catrail, .ac-searchcard, .ac-chip -- so a visitor recognises the page
 * they land on after signing in. Only the things this page adds live here.
 */

/* No max-width of its own: the shell's .page-wrapper already frames the page
   column, and the stat carousel above and the footer below both sit in it. A
   narrower inner column here left the content visibly inset from both. */
.lp { padding: 0 0 56px; }

/* ---------- hero ---------- */

.lp-hero { text-align: center; padding: 44px 16px 34px; }
.lp-hero .lp-logo { height: 46px; margin: 0 auto 22px; }
.lp-hero h1 {
  margin: 0 auto 10px; max-width: 42ch;
  font-size: 27px; font-weight: 700; line-height: 1.3; color: var(--text);
  text-wrap: balance;
}
.lp-sub {
  margin: 0 auto; max-width: 56ch;
  font-size: 14px; line-height: 1.6; color: var(--text-4);
}

/* Four facts, evenly spaced, numbers in the mono face the rest of the app
   uses for figures. */
.lp-facts {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 38px; margin: 26px 0 0;
}
.lp-facts div { display: flex; flex-direction: column; gap: 3px; }
.lp-facts dt {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-6);
}
.lp-facts dd {
  margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 15px;
  color: var(--accent-tint); font-variant-numeric: tabular-nums;
}

/* ---------- layout ---------- */

.lp-layout { align-items: stretch; }
.lp-center { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* ---------- category rail ---------- */

.lp-rail { align-self: flex-start; }
.lp-rail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 0 9px 10px; border-bottom: 1px solid var(--line-soft);
  margin-bottom: 4px;
}
.lp-rail-title { font-size: 12px; font-weight: 700; color: var(--text-2); }
.lp-rail-note { font-size: 9.5px; color: var(--text-6); }

/* .ac-catitem is an <a> in the console; here the rows are not links, because
   there is nothing to open until you have an account. */
.lp-catitem { cursor: default; transition: opacity 0.15s ease, color 0.15s ease; }
.lp-catitem .ac-catitem-label { color: var(--text-3); }
.lp-catitem .lp-count {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  color: var(--text-5); font-variant-numeric: tabular-nums;
}
.lp-catitem.is-hit .ac-catitem-label { color: var(--accent-tint); font-weight: 600; }
.lp-catitem.is-hit .lp-count { color: var(--accent); }
.lp-catitem.is-hit { background: var(--accent-10); }
.lp-catitem.is-empty { opacity: 0.45; }

/* ---------- search card ---------- */

.lp-card { padding: 0; gap: 0; }
.lp-toolbar { margin: 0; border-radius: 9px 9px 0 0; }
.lp-toolbar-note { font-size: 11px; color: var(--text-5); }
.lp-card form { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }

.lp-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.lp-chip { cursor: pointer; }
.lp-chip.active {
  background: var(--accent); color: var(--on-accent);
  border-color: var(--accent); font-weight: 700;
}

.lp-row { gap: 8px; }
.lp-input:disabled { opacity: 0.55; cursor: not-allowed; }
.lp-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.lp-submit { min-width: 124px; }

.lp-status { margin: 0; font-size: 12px; color: var(--text-5); min-height: 1em; }
.lp-status.is-error { color: var(--danger); }

/* ---------- results ---------- */

.lp-results {
  background: var(--panel-bg); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden;
}
.lp-results-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
}
.lp-results-head h2 { margin: 0; font-size: 13px; font-weight: 700; color: var(--text); }
.lp-results-sub { font-size: 11px; color: var(--text-5); }

.lp-results-list { list-style: none; margin: 0; padding: 6px 16px 14px; }
.lp-result-row {
  display: grid; grid-template-columns: minmax(120px, 170px) 1fr auto;
  align-items: center; gap: 12px; padding: 8px 0;
}
.lp-result-name { font-size: 12.5px; color: var(--text-2); }
.lp-result-bar {
  height: 6px; border-radius: 999px; background: var(--bg-sunken);
  overflow: hidden; min-width: 40px;
}
.lp-result-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-tint));
}
.lp-result-value {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--accent-tint); font-variant-numeric: tabular-nums;
}
.lp-result-empty { padding: 14px 0; font-size: 12.5px; color: var(--text-5); }

.lp-results-foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 14px 16px; border-top: 1px solid var(--line-soft);
  background: var(--bg-sunken);
}
.lp-results-foot p { margin: 0; font-size: 12px; color: var(--text-4); max-width: 60ch; }

/* ---------- what is behind the counts ---------- */

.lp-about { padding: 8px 2px 0; }
.lp-about h2 {
  margin: 0 0 14px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-6);
}
.lp-about-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.lp-about-grid > div {
  background: var(--panel-bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px;
}
.lp-about-grid h3 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.lp-about-grid p { margin: 0; font-size: 12px; line-height: 1.65; color: var(--text-4); }

/* ---------- narrow ---------- */

/* Below 1450px the dataset rail and the search box have stopped sharing a row
   comfortably, so they stack: the rail across the top as a short scrolling list,
   the search and results beneath it at full width. */
@media (max-width: 1450px) {
  .lp-layout { flex-direction: column; }
  .lp-layout .lp-rail { position: static; flex: 0 0 auto; width: 100%; max-height: 200px; }
  .lp-layout .lp-center { flex: 1 1 auto; width: 100%; }
}

@media (max-width: 860px) {
  .lp-hero { padding: 30px 16px 24px; }
  .lp-hero h1 { font-size: 21px; }
  .lp-facts { gap: 10px 22px; }
  .lp-result-row { grid-template-columns: 1fr auto; }
  .lp-result-bar { display: none; }
}