/* The catalogue: one list, one line above it, and three axes.
 *
 * WHAT THIS SHEET REPLACES. It used to dress an accord wheel, a sliding shelf
 * and a grid of picture tiles — a front door in front of a table that returned
 * nothing until it was asked a question. All of that is gone with the page it
 * drew. Nothing here is a card, a tile or a picture: a row is a house, a name,
 * a strength if one was recorded, and two hairline marks that are not drawn
 * until somebody points at them.
 *
 * WHY EVERY CLASS IS PREFIXED `cat-`. Twenty of these names already mean
 * something in app.css — chip, count, line, res, more, split. Scoping by an
 * ancestor would work until one is nested inside the other; a prefix makes the
 * collision impossible rather than unlikely, and it keeps every selector here
 * at one class of specificity, so nothing has to fight app.css to win.
 *
 * WHY THERE ARE NO THEME BLOCKS. Every colour below 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, and the
 * first one to fall behind.
 *
 * 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.
 *   * No control is drawn on a row nobody is pointing at. A screen of sixty
 *     rows carries zero visible buttons, which is what makes the name the
 *     largest thing on it.
 */

.cat-crumb{
  font-family:var(--ui); font-size:var(--t12); letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin:0 0 11px;
}
.cat-h1{
  font-family:var(--display); font-weight:400; font-size:var(--t40);
  line-height:1.02; letter-spacing:-.024em; margin:0 0 15px; color:var(--ink);
}
.cat-vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* ------------------------------------------------------------------ the box */
.cat-seek{
  display:flex; align-items:center; gap:12px; border:1px solid var(--line2);
  border-radius:var(--r); background:var(--card); padding:0 15px; min-height:52px;
}
.cat-seek:focus-within{border-color:var(--accent)}
.cat-seek__mag{
  font-family:var(--display); font-size:var(--t18); color:var(--accent);
  flex:none; line-height:1;
}
.cat-seek input{
  flex:1; min-width:0; border:0; background:transparent; font-family:var(--read);
  font-size:var(--t21); color:var(--ink); outline:none; padding:12px 0;
}
.cat-seek input::placeholder{color:var(--faint); opacity:1}
/* The submit button is for a keyboard and for a browser with no JavaScript;
   Enter in the field does the same thing, which is how most people will use it.
   It is drawn quietly rather than hidden — a form whose only way to submit is a
   key nobody was told about is not a form. */
.cat-seek__go{
  font-family:var(--ui); font-size:var(--t11); letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); background:transparent;
  border:0; border-bottom:1px solid var(--line2); padding:2px 0; cursor:pointer;
}
.cat-seek__go:hover{color:var(--accent); border-bottom-color:var(--accent)}

/* --------------------------------------------------------- the standing line
   The seam, and the only place on the page that says what you are looking at. */
.cat-line{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:11px 0 0;
  padding:0 0 11px; border-bottom:1px solid var(--line);
}
.cat-tok{
  font-family:var(--ui); font-size:var(--t13); letter-spacing:.02em;
  color:var(--ink); border:1px solid var(--line2); border-radius:var(--r);
  padding:3px 8px; display:inline-flex; align-items:baseline; gap:8px;
  text-decoration:none; line-height:1.3; background:var(--card);
}
.cat-tok--q{font-family:var(--read); font-size:var(--t14)}
.cat-tok x{font-style:normal; font-size:var(--t11); color:var(--faint); letter-spacing:0}
.cat-tok:hover{border-color:var(--accent)}
.cat-tok:hover x{color:var(--accent)}
/* Dashed, because "Everything" is the one token that cannot be removed: it is
   the absence of the others rather than a choice somebody made. */
.cat-tok--plain{border-style:dashed; color:var(--ink2); background:transparent}
.cat-count{
  margin-left:auto; font-family:var(--ui); font-size:var(--t12);
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
}
.cat-count b{color:var(--ink2); font-weight:400}

/* ----------------------------------------------------------------- the axes */
/* THREE DISCLOSURES, NOT THREE TABS, and the difference is that this one needs
   no script. `<details name="cat-axis">` closes its siblings in a browser new
   enough to honour the shared name and leaves two open in one that is not,
   which is untidy and works — where a tab strip built out of buttons is dead
   markup the moment JavaScript does not run. The summaries are drawn as a strip
   so the set still reads as one control. */
.cat-axes{margin:16px 0 0; border-bottom:1px solid var(--line)}
.cat-axis > summary{
  font-family:var(--ui); font-size:var(--t13); letter-spacing:.06em;
  color:var(--ink2); padding:5px 13px 7px; cursor:pointer; line-height:1.3;
  list-style:none; display:inline-block;
  border-bottom:1px solid transparent;
}
.cat-axis:first-child > summary{padding-left:0}
.cat-axis > summary::-webkit-details-marker{display:none}
.cat-axis > summary::marker{content:""}
.cat-axis > summary:hover{color:var(--accent)}
.cat-axis[open] > summary{color:var(--accent); border-bottom-color:var(--accent)}
.cat-axis > .cat-chips{padding:13px 0 0}
.cat-axis > .cat-axnote{padding-bottom:11px}

.cat-chips{display:flex; flex-wrap:wrap; gap:6px}
.cat-chip{
  font-family:var(--ui); font-size:var(--t13); letter-spacing:.02em;
  color:var(--ink2); background:transparent; border:1px solid var(--line);
  border-radius:var(--r); padding:3px 9px; line-height:1.3;
  display:inline-flex; align-items:baseline; gap:7px; text-decoration:none;
}
.cat-chip:hover{border-color:var(--accent); color:var(--accent)}
.cat-chip u{text-decoration:none; font-size:var(--t11); color:var(--faint); letter-spacing:.05em}
.cat-chip:hover u{color:var(--accent)}
.cat-chip[aria-pressed="true"]{border-color:var(--accent); color:var(--accent)}
/* A word carrying nothing is drawn and not offered: the figure is the warning,
   and a link into an empty list is a dead end with a cursor on it. */
.cat-chip--nil{color:var(--faint); border-style:dashed}
.cat-chip--nil u{color:var(--faint)}
.cat-axnote{
  font-family:var(--ui); font-size:var(--t11); color:var(--faint);
  margin:10px 0 0; line-height:1.55; max-width:78ch;
}
.cat-axnote b{color:var(--ink2); font-weight:400}

/* ------------------------------------------------------------- the list head */
.cat-listhead{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin:22px 0 0; padding-bottom:7px;
  border-bottom:1px solid var(--line2);
}
.cat-k{
  font-family:var(--ui); font-size:var(--t11); letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint);
}
.cat-views{display:flex; gap:14px; align-items:baseline; flex-wrap:wrap}
.cat-grp{
  font-family:var(--ui); font-size:var(--t11); letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint);
}
.cat-views a{
  font-family:var(--ui); font-size:var(--t11); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink2); text-decoration:none;
  padding-bottom:2px;
}
.cat-views a[aria-current]{color:var(--accent); border-bottom:1px solid var(--accent)}
.cat-views a:hover{color:var(--accent)}

/* ------------------------------------------------------------------- layout */
.cat-split{display:grid; grid-template-columns:minmax(0,1fr) 392px; gap:26px;
  align-items:start; margin-top:16px}
.cat-split--solo{grid-template-columns:minmax(0,1fr)}
@media (max-width:900px){.cat-split{grid-template-columns:minmax(0,1fr)}}

/* --------------------------------------------------------------------- rows */
.cat-res{list-style:none; margin:0; padding:0}
.cat-r{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) 92px 70px;
  gap:0 10px; align-items:center; border-bottom:1px solid var(--line);
  min-height:52px; padding:6px 0;
}
.cat-r:last-child{border-bottom:0}
.cat-r:hover{background:var(--card)}
.cat-rl{
  grid-column:1; text-decoration:none; color:inherit; display:block;
  min-width:0; padding-left:11px; position:relative;
}
.cat-rh{
  display:block; font-family:var(--ui); font-size:var(--t11);
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  line-height:1.3;
}
.cat-rn{
  display:block; font-family:var(--read); font-size:var(--t18); line-height:1.25;
  color:var(--ink); margin-top:1px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;
}
/* The head a sibling group shares recedes so the eye lands on the word that
   tells them apart — Dukhan, Qahwa, Waha. */
.cat-rn i{font-style:normal; color:var(--ink2)}
/* The typed characters carry a rule, never a colour: a highlight here would
   compete with the recessed head and the reader could not tell which signal
   meant what. */
.cat-rn mark{
  background:transparent; color:inherit; border-bottom:1px solid var(--accent);
  padding-bottom:1px;
}
.cat-rc{
  grid-column:2; justify-self:end; font-family:var(--ui); font-size:var(--t11);
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink2);
  text-align:right; line-height:1.35;
}
/* A hairline, not an em-dash: a column of dashes down three rows in five reads
   as a page that failed to load. */
.cat-nil{
  display:inline-block; width:11px; height:1px; background:var(--faint-lt);
  vertical-align:4px;
}

/* The gutter. Revealed on hover or focus, never on load. */
.cat-gut{
  grid-column:3; justify-self:end; display:flex; gap:4px; align-items:center;
  opacity:0; transition:opacity .12s linear;
}
.cat-r:hover .cat-gut, .cat-gut:focus-within, .cat-r.is-picked .cat-gut{opacity:1}
@media (hover:none){
  /* A thumb has no hover, so on glass the marks are simply there. */
  .cat-gut{opacity:1}
}
.cat-mk{
  width:26px; height:26px; border:1px solid var(--line2); border-radius:var(--r);
  background:transparent; padding:0; position:relative; display:block;
  text-decoration:none;
}
.cat-mk:hover{border-color:var(--accent)}
/* ⌖ place — goes to the map, which is the destination the ruling asked for. */
.cat-mk--place::before{
  content:""; position:absolute; left:50%; top:50%; width:9px; height:9px;
  margin:-5px 0 0 -5px; border:1px solid var(--faint-lt); border-radius:var(--r);
}
.cat-mk--place:hover::before{border-color:var(--accent)}
/* ⊙ pick — the ring the map draws an anchor with. Two of them is a comparison. */
.cat-mk--pick::before{
  content:""; position:absolute; left:50%; top:50%; width:9px; height:9px;
  margin:-5px 0 0 -5px; border:1px solid var(--faint-lt); border-radius:9px;
}
.cat-mk--pick:hover::before{border-color:var(--accent)}
.cat-r.is-picked .cat-mk--pick{border-color:var(--accent)}
.cat-r.is-picked .cat-mk--pick::before{background:var(--accent); border-color:var(--accent)}
.cat-mklab{
  font-family:var(--ui); font-size:var(--t11); letter-spacing:.08em;
  color:var(--faint); position:absolute; right:100%; top:50%;
  transform:translateY(-50%); margin-right:7px; white-space:nowrap; opacity:0;
}
.cat-mk:hover .cat-mklab, .cat-mk:focus-visible .cat-mklab{opacity:1; color:var(--accent)}
/* ⊕ own — "I own this", the device shelf's mark, and the only mark on a row
   that records something the reader knows rather than sending them somewhere.
   The gutter's note above says two marks is the ceiling; the owner raised it
   for this one on 2026-09-04 and demoted it in the same ruling, which is why it
   is the LAST mark, at the far edge, drawn in the same 26px square as its
   navigation neighbours rather than any larger. A row's primary target is its
   entry page, and this must never compete with the link.

   `.cat-own` is the empty slot the server ships; shelf.js puts the button in
   it, because the state lives in localStorage and no server can see it. With
   script off, or where storage throws, the slot stays empty and takes no room. */
.cat-own{display:contents}
.cat-mk--own::before{
  content:""; position:absolute; left:50%; top:50%; width:9px; height:9px;
  margin:-5px 0 0 -5px; border:1px solid var(--faint-lt);
}
.cat-mk--own::after{
  content:""; position:absolute; left:50%; top:50%; width:9px; height:1px;
  margin:-1px 0 0 -5px; background:var(--faint-lt);
}
.cat-mk--own:hover::before{border-color:var(--accent)}
.cat-mk--own:hover::after{background:var(--accent)}
.cat-mk--own[aria-pressed="true"]{border-color:var(--accent)}
.cat-mk--own[aria-pressed="true"]::before{
  background:var(--accent); border-color:var(--accent);
}
.cat-mk--own[aria-pressed="true"]::after{background:var(--on-accent)}

/* The one persistent trace on a row already in somebody's collection. It is a
   report, not a control: there is no tap on this page to put it there. */
.cat-r.is-mine .cat-rl::before{
  content:""; position:absolute; left:0; top:50%; width:3px; height:24px;
  margin-top:-12px; background:var(--accent);
}

/* ------------------------------------------------------ the alphabet, and on */
.cat-alpha{
  display:flex; flex-wrap:wrap; gap:0 3px; margin:14px 0 0; padding-top:11px;
  border-top:1px solid var(--line);
}
.cat-alpha a{
  font-family:var(--ui); font-size:var(--t12); letter-spacing:.06em;
  color:var(--ink2); text-decoration:none; padding:1px 4px; border-radius:var(--r);
}
.cat-alpha a:hover{color:var(--accent)}
.cat-alpha a[aria-current]{color:var(--accent); border:1px solid var(--accent)}
.cat-more{
  font-family:var(--ui); font-size:var(--t12); color:var(--faint); margin:12px 0 0;
  line-height:1.55;
}
.cat-more a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line2)}
.cat-more b{color:var(--ink2); font-weight:400}

/* --------------------------------------------------------------- the picked */
.cat-picked{
  display:flex; align-items:center; gap:13px; flex-wrap:wrap;
  border:1px solid var(--accent); border-radius:var(--r); background:var(--card);
  padding:9px 13px; margin:14px 0 0;
}
.cat-picked--one{border-color:var(--line2); border-style:dashed}
.cat-pr{
  font-family:var(--read); font-size:var(--t14); color:var(--ink);
  display:inline-flex; align-items:baseline; gap:7px;
}
.cat-pr a{
  font-family:var(--ui); font-size:var(--t11); color:var(--faint);
  text-decoration:none; border-bottom:1px solid var(--line2);
}
.cat-pr a:hover{color:var(--accent)}
.cat-say{font-family:var(--ui); font-size:var(--t12); color:var(--ink2)}
.cat-go{
  font-family:var(--ui); font-size:var(--t13); letter-spacing:.05em;
  background:var(--accent); color:var(--on-accent);
  border:1px solid var(--accent-hi); border-radius:var(--r); padding:6px 14px;
  text-decoration:none; margin-left:auto; line-height:1.2;
}
.cat-go:hover{background:var(--accent-hi)}

/* ------------------------------------------------------------------ the map */
.cat-mapwrap{
  border:1px solid var(--line2); border-radius:var(--r); background:var(--card);
  padding:11px 12px 12px;
}
.cat-maphead{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin:0 0 9px;
}
.cat-maphead a{
  font-family:var(--ui); font-size:var(--t11); letter-spacing:.08em;
  color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line2);
}
.cat-map[hidden]{display:none}
.cat-map canvas{
  display:block; width:100%; height:auto; aspect-ratio:1;
  background:var(--sunk); border-radius:var(--r);
}
.cat-mapkey{
  display:flex; flex-wrap:wrap; gap:0 14px; margin:9px 0 0; font-family:var(--ui);
  font-size:var(--t11); color:var(--faint); letter-spacing:.02em; line-height:1.7;
}
.cat-mapkey i{font-style:normal; display:inline-block; vertical-align:1px; margin-right:5px}
.cat-mapkey i.d{width:6px; height:6px; background:var(--faint-lt)}
.cat-mapkey i.n{width:8px; height:8px; border:1px solid var(--ink); border-radius:8px}
.cat-mapkey i.h{width:9px; height:9px; background:var(--accent); border-radius:9px}
.cat-mapsay{
  font-family:var(--ui); font-size:var(--t11); color:var(--faint); margin:9px 0 0;
  line-height:1.6;
}
.cat-mapsay b{color:var(--ink2); font-weight:400}

/* ------------------------------------------------------------- no results */
.cat-miss{margin:20px 0 0}
.cat-said{
  font-family:var(--read); font-size:var(--t21); line-height:1.35; color:var(--ink);
  margin:0 0 4px;
}
.cat-said q{quotes:none; color:var(--ink2)}
.cat-sub{
  font-family:var(--ui); font-size:var(--t13); color:var(--faint); margin:0 0 8px;
  line-height:1.55;
}
.cat-sub a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line2)}

/* The Zarzo citation under the field. Recessive but readable — it is a
   licence obligation, not a caption, so it may not use --faint-lt or drop
   under the 11px floor. */
.cat-cite{margin:10px 0 0;font-family:var(--ui);font-size:11px;
  line-height:1.45;color:var(--faint)}