@import url("./design/tokens.css");
@import url("./design/base.css");

.ts-header {
  border-bottom: 1px solid var(--ss-line);
  background: var(--ss-bg);
  position: sticky; top: 0; z-index: 20;
}
.ts-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--ss-sp-4); gap: var(--ss-sp-4);
}
.ts-brand {
  display: inline-flex; align-items: baseline; gap: 0.05rem;
  font-family: var(--ss-font-mono); font-weight: 600;
  font-size: var(--ss-fs-3); letter-spacing: -0.02em; text-decoration: none;
}
.ts-brand .to   { color: var(--ss-fg-muted); }
.ts-brand .slop { color: var(--ss-accent); }
.ts-header nav { display: flex; gap: var(--ss-sp-5); flex-wrap: wrap; }
.ts-header nav a { font-size: var(--ss-fs-6); color: var(--ss-fg-muted); text-decoration: none; }
.ts-header nav a:hover { color: var(--ss-accent); }

.ts-hero {
  padding-block: clamp(var(--ss-sp-7), 8vw, var(--ss-sp-9));
  border-bottom: 1px solid var(--ss-line);
}
.ts-eyebrow {
  display: inline-block; font-family: var(--ss-font-mono);
  font-size: var(--ss-fs-7); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ss-accent); margin-bottom: var(--ss-sp-4);
}
.ts-hero h1 { max-width: 24ch; margin-bottom: var(--ss-sp-4); }
.ts-hero p.lede { color: var(--ss-fg-muted); font-size: var(--ss-fs-4); max-width: 56ch; margin-bottom: var(--ss-sp-5); }

.ts-section { padding-block: var(--ss-sp-7); }
.ts-section + .ts-section { border-top: 1px solid var(--ss-line-soft); }

/* ---- Classifier panel ----------------------------------------------- */
.classifier {
  display: grid; gap: var(--ss-sp-4);
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-lg);
  padding: var(--ss-sp-5);
}
.classifier label { display: grid; gap: var(--ss-sp-2); font-size: var(--ss-fs-6); color: var(--ss-fg-muted); }
.classifier textarea,
.classifier input,
.classifier select {
  background: var(--ss-bg-elev);
  border: 1px solid var(--ss-line);
  color: var(--ss-fg);
  padding: 0.7em 0.85em;
  border-radius: var(--ss-radius-md);
  font: inherit;
}
.classifier textarea { min-height: 7rem; resize: vertical; font-family: var(--ss-font-mono); font-size: var(--ss-fs-6); }
.classifier .row { display: flex; gap: var(--ss-sp-3); flex-wrap: wrap; align-items: center; }
.classifier .row .grow { flex: 1; min-width: 180px; }
.classifier .examples { display: flex; gap: var(--ss-sp-2); flex-wrap: wrap; }
.classifier .examples .btn { padding: 0.45em 0.8em; font-size: var(--ss-fs-7); }
.classifier .status {
  font-family: var(--ss-font-mono); font-size: var(--ss-fs-7); color: var(--ss-fg-muted);
  margin-left: auto;
}
.classifier .status.ok  { color: var(--ss-good); }
.classifier .status.err { color: var(--ss-danger); }

/* ---- Result cards --------------------------------------------------- */
.results { display: grid; gap: var(--ss-sp-4); margin-top: var(--ss-sp-5); }
.result {
  background: var(--ss-bg-card);
  border: 1px solid var(--ss-line);
  border-left: 3px solid var(--ss-accent-soft);
  border-radius: var(--ss-radius-md);
  padding: var(--ss-sp-4);
  display: grid; gap: var(--ss-sp-3);
}
.result.top { border-left-color: var(--ss-accent); }
.result-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ss-sp-3); flex-wrap: wrap; }
.result-rank { font-family: var(--ss-font-mono); font-size: var(--ss-fs-7); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ss-fg-faint); }
.result-id { font-family: var(--ss-font-display); font-size: var(--ss-fs-3); }
.result-score { font-family: var(--ss-font-mono); font-size: var(--ss-fs-6); color: var(--ss-accent); }
.result-desc { color: var(--ss-fg-muted); margin: 0; }
.result-aliases { display: flex; flex-wrap: wrap; gap: var(--ss-sp-2); }
.result-aliases .tag { background: var(--ss-bg-elev); }
.result-actions { display: flex; gap: var(--ss-sp-2); flex-wrap: wrap; }
.result details summary { cursor: pointer; color: var(--ss-fg-muted); font-size: var(--ss-fs-7); }
.result details pre { font-size: var(--ss-fs-7); margin-top: var(--ss-sp-2); }

/* ---- Footer -------------------------------------------------------- */
.ts-footer {
  border-top: 1px solid var(--ss-line);
  background: var(--ss-bg-elev);
  padding-block: var(--ss-sp-7);
  margin-top: var(--ss-sp-9);
  color: var(--ss-fg-muted); font-size: var(--ss-fs-7);
}
.ts-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--ss-sp-5); }
.ts-footer a { color: var(--ss-fg-muted); }
.ts-footer a:hover { color: var(--ss-accent); }

dialog.settings {
  background: var(--ss-bg-card); color: var(--ss-fg);
  border: 1px solid var(--ss-line); border-radius: var(--ss-radius-lg);
  padding: var(--ss-sp-5);
  max-width: 28rem; width: calc(100% - 2rem);
}
dialog.settings::backdrop { background: rgba(0,0,0,0.6); }
dialog.settings form { display: grid; gap: var(--ss-sp-4); }