/* ===========================================================================
   Slop — the catalogue. Inherits every token from site.css.
   Type discipline: prose in the serif, instrumentation in mono, chrome in the
   grotesque. Specimens are set the way linguistics sets an ill-formed example.
   =========================================================================== */

.page-head { padding: clamp(3.5rem, 9vh, 6rem) 0 0; }

.page-head h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3rem, 11vw, 6rem);
  line-height: 0.94; letter-spacing: -0.035em;
  color: var(--ink); margin: 0;
}

.page-byline {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 2.1vw, 1.3125rem);
  line-height: 1.5; color: var(--ink-2);
  max-width: 38ch; margin: 1.25rem 0 0; text-wrap: pretty;
}

/* Wide viewports read the head as two columns: the argument on the left, the
   catalogue's own shape on the right. Keeps the prose at measure without
   leaving half the page empty. */
.head-cols { display: grid; grid-template-columns: minmax(0, var(--prose)) 1fr; gap: clamp(2rem, 6vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .head-cols { grid-template-columns: 1fr; } }

.page-lede { max-width: var(--prose); margin-top: 2.25rem; }
.page-lede p { margin: 0; text-wrap: pretty; }
.page-lede p + p { margin-top: 1.1em; }

.convention {
  max-width: var(--prose); margin-top: 2.25rem;
  border-block: 1px solid var(--line-soft); padding: 1.25rem 0;
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  align-items: baseline; font-size: 0.9375rem; color: var(--ink-2);
}
.convention .star { color: var(--signal); font-size: 1.25rem; line-height: 1; }
.convention p { margin: 0; text-wrap: pretty; }
.convention em { color: var(--ink); }

/* ---------- level index ---------- */

.index { margin-top: 2.5rem; }
@media (min-width: 901px) { .index { margin-top: 3.9rem; position: sticky; top: 5rem; } }
.index-cap {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 0.75rem;
}
.ix-row {
  display: grid; grid-template-columns: 1.75rem 1fr 5rem 2.5rem;
  gap: 0.85rem; align-items: baseline;
  padding: 0.5rem 0; border-top: 1px solid var(--line-soft);
  text-decoration: none; font-family: var(--sans); font-size: 0.8125rem;
}
.ix-row:last-child { border-bottom: 1px solid var(--line-soft); }
.ix-row:hover { background: var(--signal-wash); }
.ix-n { font-family: var(--mono); color: var(--signal); font-size: 0.75rem; }
.ix-name { color: var(--ink); }
.ix-ct {
  font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3);
  text-align: right; font-variant-numeric: tabular-nums;
}
.ix-bar { height: 2px; background: var(--surface-2); position: relative; top: -0.2em; }
.ix-bar span { display: block; height: 100%; background: var(--signal-dim); }
.ix-void .ix-name { color: var(--ink-3); }
.ix-void .ix-bar { background: transparent; border-top: 1px dashed var(--line); }

/* ---------- controls ---------- */

.controls {
  position: sticky; top: var(--bar); z-index: 90;
  background: rgba(18, 6, 13, 0.92);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--line);
  margin-top: 3.5rem; padding: 0.7rem 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
}
@supports (backdrop-filter: blur(8px)) { .controls { backdrop-filter: blur(10px); } }

.controls input[type="search"] {
  flex: 1 1 11rem; min-width: 0;
  font-family: var(--sans); font-size: 0.8125rem;
  background: var(--bg-deep); color: var(--ink);
  border: 1px solid var(--line); padding: 0.45rem 0.65rem; border-radius: 0;
}
.controls input::placeholder { color: var(--ink-3); }

.tagset { display: flex; gap: 0.35rem; }
.tagbtn {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  text-transform: uppercase; background: transparent; color: var(--ink-3);
  border: 1px solid var(--line); padding: 0.4rem 0.55rem; cursor: pointer;
  border-radius: 0; transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.tagbtn:hover { color: var(--ink); border-color: var(--ink-3); }
.tagbtn[aria-pressed="true"] { background: var(--signal); color: var(--bg); border-color: var(--signal); }

.count {
  margin-left: auto; font-family: var(--mono); font-size: 0.6875rem;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* ---------- levels ---------- */

.level { padding-top: 4rem; }
.level[hidden] { display: none; }

.level-head {
  border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; margin-bottom: 0.25rem;
}
.level-n {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--signal); display: block; margin-bottom: 0.4rem;
}
.level-head h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: var(--ink);
}
.level-scope {
  margin: 0.75rem 0 0; max-width: var(--prose);
  color: var(--ink-2); font-size: 0.9375rem; text-wrap: pretty;
}

/* ---------- a tell ---------- */

.tells { display: flex; flex-direction: column; }

.tell {
  display: grid; grid-template-columns: 4.5rem 1fr;
  padding: 1.6rem 0; border-bottom: 1px solid var(--line-soft);
  scroll-margin-top: 7rem;
}
.tell[hidden] { display: none; }
.tell:last-child { border-bottom: 0; }

.tell-cite {
  font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums; padding-top: 0.35em;
}

.tell-main { min-width: 0; max-width: var(--prose); display: flex; flex-direction: column; gap: 0.45rem; }

.tell-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.6rem; }
.tell h3 {
  font-family: var(--serif); font-weight: 700; font-size: 1.125rem;
  line-height: 1.25; margin: 0; color: var(--ink);
}

.tell-term {
  font-family: var(--serif); font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1; letter-spacing: 0.06em;
  font-size: 0.9375rem; color: var(--signal); margin: 0;
}

.tag {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--line); padding: 0.1rem 0.35rem; white-space: nowrap;
}
.tag[data-tag="measure"] { color: var(--ink-2); }
.tag[data-tag="read"] { color: var(--signal); border-color: var(--signal-dim); }

.tell-body { margin: 0; color: var(--ink-2); text-wrap: pretty; }

.tell-spec {
  margin: 0.3rem 0 0; background: var(--bg-deep);
  border: 1px solid var(--line-soft); padding: 0.6rem 0.8rem;
  font-style: italic; color: var(--ink);
  display: grid; grid-template-columns: auto 1fr; gap: 0.55rem;
  align-items: baseline; text-wrap: pretty;
}
.tell-spec .star { font-style: normal; color: var(--signal); font-weight: 700; line-height: 1; }

.tell-fix {
  margin: 0; font-size: 0.9375rem; color: var(--ink-2);
  display: grid; grid-template-columns: auto 1fr; gap: 0.55rem; align-items: baseline;
}
.tell-fix .arrow { color: var(--signal); font-family: var(--mono); font-size: 0.8125rem; }

/* ---------- the empty level ---------- */

.void {
  border: 1px dashed var(--line); padding: 1.75rem 1.5rem; margin-top: 1.5rem;
  max-width: var(--prose); display: flex; flex-direction: column; gap: 0.8rem;
  color: var(--ink-2); font-size: 0.9375rem;
}
.void-tag {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
.void p { margin: 0; text-wrap: pretty; }

.no-hits { padding: 3rem 0; font-family: var(--sans); font-size: 0.875rem; color: var(--ink-3); }

/* ---------- method ---------- */

.method { padding-top: 4.5rem; }
.method .prose h3 { margin: 1.5rem 0 -0.4rem; }
.method ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.method li { text-wrap: pretty; }
.method code, .icode {
  font-family: var(--mono); font-size: 0.875em;
  background: var(--surface); padding: 0.05em 0.3em; color: var(--ink);
}

/* ---------- detector ---------- */

.detector { max-width: var(--prose); margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; }
.detector textarea {
  width: 100%; min-height: 8.5rem; resize: vertical;
  font-family: var(--serif); font-size: 0.9375rem; line-height: 1.55;
  background: var(--bg-deep); color: var(--ink);
  border: 1px solid var(--line); padding: 0.8rem; border-radius: 0;
}
.detector textarea::placeholder { color: var(--ink-3); font-style: italic; }

.det-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.det-btn {
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 500;
  background: var(--signal); color: var(--bg); border: 1px solid var(--signal);
  padding: 0.5rem 0.9rem; cursor: pointer; border-radius: 0;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.det-btn:hover { background: transparent; color: var(--signal); }
.det-btn.ghost { background: transparent; color: var(--ink-3); border-color: var(--line); }
.det-btn.ghost:hover { color: var(--ink); border-color: var(--ink-3); }

#verdict { border-top: 1px solid var(--line); padding-top: 0.85rem; display: flex; flex-direction: column; gap: 0.7rem; }
#verdict[hidden] { display: none; }

.det-score { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.det-num {
  font-family: var(--mono); font-size: 2rem; font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -0.04em;
  line-height: 1; color: var(--signal);
}
.det-unit { font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-3); }
.det-unit b { color: var(--ink); font-weight: 500; }

.det-hits { display: flex; flex-direction: column; }
.det-hit {
  display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; align-items: baseline;
  padding: 0.4rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.875rem;
}
.det-lv {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); margin-right: 0.4rem;
}
.det-name { color: var(--ink); }
.det-n { font-family: var(--mono); color: var(--signal); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.det-ev { display: block; color: var(--ink-3); font-family: var(--sans); font-size: 0.8125rem; line-height: 1.45; }
.det-note { margin: 0; font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-3); text-wrap: pretty; }
.det-note b { color: var(--ink-2); font-weight: 500; }

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

@media (max-width: 640px) {
  .tell { grid-template-columns: 1fr; gap: 0.35rem; }
  .tell-cite { padding-top: 0; }
  .ix-row { grid-template-columns: 1.5rem 1fr 2.5rem; }
  .ix-bar { display: none; }
}