/* Smells Like This — the catalogue as a sentence you compose.
 *
 * WHY EVERY CLASS IS PREFIXED `cmp-`. The same reason catalogue.css gives: a
 * dozen of these names — chip, rail, pick, mark, res, more, seg, gap — already
 * mean something in app.css or catalogue.css. A prefix makes the collision
 * impossible rather than unlikely and keeps every selector here at one class of
 * specificity, so nothing has to fight the base sheet to win.
 *
 * WHY THERE ARE NO THEME BLOCKS. Every colour comes from tokens.css, which
 * already swaps on data-theme and is repainted by every skin. A second set of
 * theme rules here would be a second place to keep in step.
 *
 * THE TWO RULES THIS PAGE LIVES BY, in type:
 *   * `--faint-lt` and `--neut` draw marks and rules and never a letter. Text
 *     is `--ink`, `--ink2`, `--faint` or `--accent`, and nothing else.
 *   * Nothing here prints a figure. The two drawings that carry a quantity —
 *     the tier mark and the rail — are widths and positions, and neither has a
 *     scale printed beside it, because the scale is the catalogue's and does
 *     not move between queries.
 */

.cmp-crumb{
  font-family:var(--ui); font-size:var(--t12); letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin:0 0 11px;
}
.cmp-h1{
  font-family:var(--display); font-weight:400; font-size:var(--t40);
  line-height:1.02; letter-spacing:-.024em; margin:0 0 12px; color:var(--ink);
}
.cmp-lede{
  font-family:var(--read); font-size:var(--t18); color:var(--ink2);
  margin:0 0 8px; max-width:62ch; line-height:1.5;
}
.cmp-lede b{font-family:var(--ui); font-size:var(--t14); color:var(--ink); font-weight:400}
.cmp-pair{
  font-family:var(--ui); font-size:var(--t12); color:var(--faint);
  margin:0 0 22px; line-height:1.6;
}
.cmp-pair a{color:var(--accent)}
.cmp-vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* The two columns: what you are describing on the left, what it answers on the
   right. One column below 900px, palette first — on a phone the palette is what
   you came to touch. */
.cmp{display:grid; grid-template-columns:328px minmax(0,1fr); gap:0; align-items:start}
.cmp-pal{border-right:1px solid var(--line2); padding:0 20px 26px 0}
.cmp-ans{padding:0 0 30px 24px; min-width:0}
@media (max-width:900px){
  .cmp{grid-template-columns:minmax(0,1fr)}
  .cmp-pal{border-right:0; border-bottom:1px solid var(--line2); padding:0 0 22px}
  .cmp-ans{padding:22px 0 30px}
}

/* ------------------------------------------------------------- the palette */
.cmp-palt{
  font-family:var(--ui); font-size:var(--t11); letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); margin:0 0 10px;
  padding-bottom:6px; border-bottom:1px solid var(--line);
}
.cmp-seek{
  display:flex; align-items:center; gap:9px; border:1px solid var(--line2);
  border-radius:var(--r); background:var(--card); padding:0 11px; min-height:40px;
}
.cmp-seek:focus-within{border-color:var(--accent)}
.cmp-mag{font-family:var(--display); font-size:var(--t16); color:var(--accent); line-height:1}
.cmp-seek input{
  flex:1; min-width:0; border:0; background:transparent; font-family:var(--read);
  font-size:var(--t14); color:var(--ink); outline:none; padding:9px 0;
}
.cmp-seek input::placeholder{color:var(--faint); opacity:1}
/* Drawn quietly rather than hidden: a form whose only way to submit is a key
   nobody was told about is not a form. */
.cmp-seekgo{
  font-family:var(--ui); font-size:var(--t11); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink2); background:transparent;
  border:0; border-left:1px solid var(--line2); padding:8px 0 8px 11px; cursor:pointer;
}
.cmp-seekgo:hover{color:var(--accent)}
.cmp-seeksay{
  font-family:var(--ui); font-size:var(--t11); color:var(--faint);
  margin:8px 0 18px; line-height:1.55;
}
.cmp-typed{
  list-style:none; margin:8px 0 18px; padding:0; border:1px solid var(--line2);
  border-radius:var(--r); background:var(--card);
}
.cmp-typed li{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:7px 11px; border-bottom:1px solid var(--line);
}
.cmp-typed li:last-child{border-bottom:0}
.cmp-typed a{font-family:var(--read); font-size:var(--t14); color:var(--ink); text-decoration:none}
.cmp-typed a:hover{color:var(--accent)}
.cmp-typed em{
  font-style:normal; font-family:var(--ui); font-size:var(--t11);
  letter-spacing:.04em; color:var(--faint); text-align:right;
}

.cmp-fam{margin:0 0 15px}
.cmp-famt{
  font-family:var(--ui); font-size:var(--t11); letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin:0 0 7px;
}
.cmp-chips{display:flex; flex-wrap:wrap; gap:5px}
.cmp-chip{
  font-family:var(--read); font-size:var(--t13); line-height:1.25; color:var(--ink2);
  background:transparent; border:1px solid var(--line); border-radius:var(--r);
  padding:4px 8px; text-decoration:none;
}
.cmp-chip:hover{border-color:var(--accent); color:var(--accent)}
.cmp-chip.on{border-color:var(--accent); color:var(--accent); background:var(--card)}
.cmp-rest{margin:6px 0 0}
.cmp-rest > summary{
  font-family:var(--ui); font-size:var(--t11); letter-spacing:.06em;
  color:var(--faint); cursor:pointer; padding:3px 0;
}
.cmp-rest > summary:hover{color:var(--accent)}
.cmp-rest .cmp-chips{margin-top:6px}
.cmp-palfoot{
  font-family:var(--ui); font-size:var(--t11); color:var(--faint);
  line-height:1.6; border-top:1px solid var(--line); padding-top:11px; margin:18px 0 0;
}
.cmp-palfoot b{color:var(--ink2); font-weight:400}
.cmp-browse{
  font-family:var(--ui); font-size:var(--t12); color:var(--faint);
  line-height:1.7; margin:14px 0 0;
}
.cmp-browse a{color:var(--accent)}

/* ------------------------------------------------ what you described */
.cmp-desc{border:1px solid var(--line2); border-radius:var(--r); background:var(--card)}
.cmp-desch{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:10px 14px; border-bottom:1px solid var(--line);
}
.cmp-desct{
  font-family:var(--ui); font-size:var(--t11); letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); margin:0;
}
.cmp-clear{font-family:var(--ui); font-size:var(--t11); letter-spacing:.05em; color:var(--accent)}
.cmp-tier{
  display:grid; grid-template-columns:54px minmax(0,1fr); gap:13px;
  align-items:center; padding:9px 14px; border-bottom:1px solid var(--line);
}
.cmp-tierl{
  font-family:var(--ui); font-size:var(--t11); letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint);
}
.cmp-tierin{display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:26px}
/* An empty tier is DRAWN, not absent: the shape of the finished thing is what
   answers the empty state. */
.cmp-tierin:empty::before{
  content:""; display:block; flex:1; height:1px;
  background:repeating-linear-gradient(90deg,var(--line2) 0 3px,transparent 3px 7px);
}
.cmp-pick{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--read);
  font-size:var(--t14); color:var(--ink); border:1px solid var(--accent);
  border-radius:var(--r); padding:3px 4px 3px 9px;
}
.cmp-x{
  font-family:var(--ui); font-size:var(--t13); color:var(--faint);
  padding:0 4px; line-height:1; text-decoration:none;
}
.cmp-x:hover{color:var(--accent)}

/* THE MARK, AND IT IS THE AFFORDANCE. Three widths — where this material
   actually lands across the catalogue — with the tier it is in drawn in the
   accent and the other two in `--neut`. One long block reads as settled and
   carries no control; a mark in visible pieces reads as movable and the control
   is drawn under it. The rule is never written down: a description holding one
   of each shows both marks side by side and teaches it in a glance. */
.cmp-tm{display:inline-flex; width:32px; height:3px; flex:none}
.cmp-tm s{display:block; height:3px; background:var(--neut); text-decoration:none}
.cmp-tm s.on{background:var(--accent)}

.cmp-descsay{
  font-family:var(--ui); font-size:var(--t11); color:var(--faint);
  line-height:1.6; border-top:1px solid var(--line); padding:9px 14px; margin:0;
}
.cmp-tier:last-of-type{border-bottom:0}
.cmp-descsay b{color:var(--ink2); font-weight:400}
.cmp-warn b{color:var(--warn); font-weight:400}

.cmp-move{border-top:1px solid var(--line); padding:11px 14px}
.cmp-move p{font-family:var(--ui); font-size:var(--t12); color:var(--ink2); margin:0 0 8px; line-height:1.5}
.cmp-move p b{color:var(--ink); font-weight:400}
.cmp-seg{display:inline-flex; border:1px solid var(--line2); border-radius:var(--r); overflow:hidden}
.cmp-seg a{
  font-family:var(--ui); font-size:var(--t11); letter-spacing:.12em;
  text-transform:uppercase; padding:6px 13px; color:var(--ink2);
  border-right:1px solid var(--line2); text-decoration:none;
}
.cmp-seg a:last-child{border-right:0}
.cmp-seg a:hover{background:var(--sunk); color:var(--ink)}
.cmp-seg a[aria-current]{background:var(--accent); color:var(--on-accent)}

/* -------------------------------------------- how sharp the question is */
.cmp-q{
  display:flex; align-items:flex-start; gap:12px; margin:20px 0 0;
  padding:0 0 16px; border-bottom:1px solid var(--line);
}
/* Three pips, and they count materials rather than achievement. Not a badge,
   not a streak — the only progress drawing on the page. */
.cmp-pips{display:flex; gap:3px; flex:none; padding-top:6px}
.cmp-pips i{display:block; width:16px; height:5px; background:var(--neut)}
.cmp-pips i.on{background:var(--accent)}
.cmp-q p{margin:0; font-family:var(--read); font-size:var(--t14); line-height:1.55; color:var(--ink2)}
.cmp-q p b{font-family:var(--ui); font-size:var(--t12); color:var(--ink); font-weight:400}
.cmp-q p em{
  font-style:normal; font-family:var(--ui); font-size:var(--t11);
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  display:block; margin:0 0 3px;
}

/* ------------------------------------------------------------ the terrain */
.cmp-fieldwrap{
  border:1px solid var(--line2); border-radius:var(--r); background:var(--card);
  padding:12px 13px; margin:20px 0 0;
}
.cmp-field{display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap}
.cmp-map{flex:0 0 auto; width:252px}
.cmp-map[hidden]{display:none}
.cmp-map canvas{
  display:block; width:100%; height:auto; aspect-ratio:1;
  background:var(--sunk); border-radius:var(--r);
}
.cmp-fieldsay{flex:1 1 230px; min-width:0}
.cmp-fieldsay p{
  font-family:var(--ui); font-size:var(--t12); color:var(--faint);
  line-height:1.65; margin:0 0 8px;
}
.cmp-fieldsay p b{color:var(--ink2); font-weight:400}
.cmp-fieldt{
  font-family:var(--ui); font-size:var(--t11) !important; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); margin:0 0 7px !important;
}
.cmp-mapkey{display:flex; flex-wrap:wrap; gap:0 14px; line-height:1.9 !important}
.cmp-mapkey i{font-style:normal; display:inline-block; vertical-align:1px; margin-right:5px}
.cmp-mapkey i.d{width:6px; height:6px; background:var(--faint-lt)}
.cmp-mapkey i.n{width:8px; height:8px; border:1px solid var(--ink); border-radius:8px}
.cmp-mapkey i.h{width:9px; height:9px; background:var(--accent); border-radius:9px}
.cmp-mapmore a{color:var(--accent)}
.cmp-cite{
  font-family:var(--ui); font-size:11px; line-height:1.5; color:var(--faint);
  margin:11px 0 0; border-top:1px solid var(--line); padding-top:9px;
}

/* ----------------------------------------------------------------- AKIN */
.cmp-akin{
  border:1px solid var(--line2); border-radius:var(--r); background:var(--card);
  margin:20px 0 0;
}
.cmp-akinh{display:flex; align-items:baseline; gap:11px; padding:12px 15px; border-bottom:1px solid var(--line)}
.cmp-mark{
  font-family:var(--ui); font-size:var(--t13); letter-spacing:.28em;
  text-transform:uppercase; color:var(--accent);
}
.cmp-akinsub{
  font-family:var(--ui); font-size:var(--t11); letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint);
}
.cmp-akinsay{
  font-family:var(--read); font-size:var(--t14); line-height:1.6; color:var(--ink2);
  margin:0; padding:12px 15px 0;
}
.cmp-akinsay b{font-family:var(--ui); font-size:var(--t12); color:var(--ink); font-weight:400}
.cmp-alone{
  border:1px solid var(--line2); border-radius:var(--r); background:var(--card);
  padding:13px 15px; margin:20px 0 0;
}

/* THE RAIL. The left edge of a mark is the prediction and its width IS the
   doubt. THE SCALE NEVER MOVES BETWEEN ANSWERS — it is a property of the
   catalogue, not of the query — which is the whole reason a far answer is
   allowed to look far. `overflow:hidden` clips a mark whose width runs past the
   end rather than letting it rescale the row. */
.cmp-railkey{display:grid; grid-template-columns:minmax(0,1fr) 228px 0; gap:14px; padding:14px 15px 0}
.cmp-railkey span{
  grid-column:2; display:flex; justify-content:space-between;
  font-family:var(--ui); font-size:var(--t11); letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint);
}
.cmp-railkey span i{font-style:normal}
.cmp-res{list-style:none; margin:0; padding:2px 15px 12px}
.cmp-res li{
  display:grid; grid-template-columns:minmax(0,1fr) 228px 0; gap:14px;
  align-items:center; padding:9px 0; border-bottom:1px solid var(--line);
}
.cmp-res li:last-child{border-bottom:0}
.cmp-nm{font-family:var(--read); font-size:var(--t16); line-height:1.26; color:var(--ink)}
.cmp-nm a{color:var(--ink); text-decoration:none}
.cmp-nm a:hover{color:var(--accent)}
.cmp-nm i{
  font-style:normal; display:block; font-family:var(--ui); font-size:var(--t11);
  letter-spacing:.15em; text-transform:uppercase; color:var(--faint); margin-bottom:2px;
}
.cmp-rail{position:relative; height:15px; border-bottom:1px solid var(--line); overflow:hidden}
.cmp-rail i{position:absolute; bottom:0; height:7px; background:var(--accent)}
.cmp-rail i.soft{background:repeating-linear-gradient(90deg,var(--faint-lt) 0 2px,transparent 2px 5px)}
.cmp-rail i.vague{background:repeating-linear-gradient(90deg,var(--neut) 0 2px,transparent 2px 6px)}
.cmp-holds{
  grid-column:1 / -1; font-family:var(--read); font-size:var(--t14);
  line-height:1.55; color:var(--ink2); margin:3px 0 0;
}
.cmp-holds b{font-family:var(--ui); font-size:var(--t12); color:var(--ink); font-weight:400}
@media (max-width:620px){
  .cmp-railkey,.cmp-res li{grid-template-columns:minmax(0,1fr) 104px 0; gap:11px}
  .cmp-railkey span{font-size:var(--t11); letter-spacing:.02em}
}

/* THE GAP. The only element on this page that exists for the failure case, and
   it is drawn only when it is true: a tick where the description sits, a hatched
   span nothing lives in, then where the real bottles start. */
.cmp-gap{padding:14px 15px 0}
.cmp-gapband{position:relative; height:26px; border-bottom:1px solid var(--line2)}
.cmp-gapband .you{position:absolute; left:0; bottom:0; width:3px; height:26px; background:var(--accent)}
.cmp-gapband .hole{
  position:absolute; left:3px; bottom:0; height:9px;
  background:repeating-linear-gradient(135deg,var(--line2) 0 1px,transparent 1px 6px);
}
.cmp-gapband .there{
  position:absolute; right:0; bottom:0; height:9px;
  background:repeating-linear-gradient(90deg,var(--neut) 0 2px,transparent 2px 6px);
}
.cmp-gapband .holesay{
  position:absolute; left:0; bottom:12px; text-align:center;
  font-family:var(--ui); font-size:var(--t11); letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint);
}
.cmp-gaplbl{
  display:flex; justify-content:space-between; padding:6px 0 0;
  font-family:var(--ui); font-size:var(--t11); letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint);
}
.cmp-repair{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:0 15px;
  margin:13px 0 0;
}
.cmp-repair span{
  font-family:var(--ui); font-size:var(--t11); letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint);
}
.cmp-repair a{
  font-family:var(--ui); font-size:var(--t12); letter-spacing:.03em;
  color:var(--accent); border:1px solid var(--line2); border-radius:var(--r);
  padding:5px 10px; text-decoration:none;
}
.cmp-repair a:hover{border-color:var(--accent)}
.cmp-akinfoot{border-top:1px solid var(--line); padding:11px 15px; margin-top:13px}
.cmp-akinfoot p{font-family:var(--ui); font-size:var(--t12); color:var(--faint); line-height:1.6; margin:0}
.cmp-akinfoot b{color:var(--ink2); font-weight:400}

/* ------------------------------------------------------ somewhere to start */
.cmp-starts{
  border:1px solid var(--line2); border-radius:var(--r); background:var(--card);
  margin:20px 0 0;
}
.cmp-starts h2{
  font-family:var(--ui); font-weight:400; font-size:var(--t11); letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); margin:0;
  padding:12px 15px; border-bottom:1px solid var(--line);
}
.cmp-starts ul{list-style:none; margin:0; padding:0}
.cmp-starts li{border-bottom:1px solid var(--line)}
.cmp-starts li:last-child{border-bottom:0}
.cmp-starts a{
  display:block; padding:12px 15px; font-family:var(--read); font-size:var(--t16);
  color:var(--ink); line-height:1.3; text-decoration:none;
}
.cmp-starts a:hover{background:var(--sunk)}
.cmp-starts a em{
  font-style:normal; display:block; font-family:var(--ui); font-size:var(--t11);
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:4px;
}
.cmp-fin{
  font-family:var(--ui); font-size:var(--t11); color:var(--faint); line-height:1.6;
  border-top:1px solid var(--line); padding:11px 15px; margin:0;
}
.cmp-jsnote{
  font-family:var(--ui); font-size:var(--t11); color:var(--faint); line-height:1.6;
  border-top:1px solid var(--line); margin:22px 0 0; padding-top:10px;
}