/* ══ the items tab: a bag on the left, a workshop on the right ═══════════
 *
 * The two are used against each other - you read the bag to decide what goes on
 * the bench - so the workshop stays put while the bag scrolls. On a phone there
 * is no "beside", and the whole thing becomes one column: bench first, because
 * the bench is what the tab is *for*.
 */
.items-tab { display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px; align-items: start; }
.bag { display: grid; gap: 12px; min-width: 0; }
.workshop { position: sticky; top: 0; display: grid; gap: 12px; min-width: 0;
  max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain; }
.workshop .section-title { margin-top: 4px; }
/* The workshop column is narrow: one recipe per row rather than a squeezed grid. */
.recipe-list .grid { grid-template-columns: 1fr; }
.secrets { padding: 2px 2px 0; }

/* Hunger and thirst end characters. What answers them is one press away, on
   every visit to this tab, before any searching or filtering happens. */
.quick-use { display: grid; gap: 9px; margin-bottom: 14px; }
.quick-row { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
  padding-bottom: 2px; }
.quick-row::-webkit-scrollbar { display: none; }
/* One press and it is eaten. These are the answer to the two things that kill a
   character, so they are real buttons in the cool family rather than chips. */
.quick-chip { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 8px 15px; border-radius: var(--r-pill);
  background: var(--cool-btn); border: 1.5px solid var(--cool-btn);
  box-shadow: 0 var(--lift) 0 var(--cool-deep);
  color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; }
.quick-chip b { color: #fff; }
.quick-chip span { color: rgba(255, 255, 255, .78); }
.quick-chip:active:not(:disabled) { box-shadow: 0 1px 0 var(--cool-deep); }
@media (hover: hover) {
  .quick-chip:hover { color: #fff; border-color: var(--cool-btn); filter: brightness(1.08); }
}

/* Every socket, drawn whether or not it is full: the limit is part of the
   puzzle, so it is shown rather than discovered by a button going dead. How
   many there are is the server's number, arriving on `--bench-cols`. */
.bench-slots { display: grid; gap: 8px; margin: 10px 0;
  grid-template-columns: repeat(var(--bench-cols, 4), 1fr); }
.bench-slot { aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; padding: 4px;
  border-radius: var(--r-md); text-align: center; box-shadow: none; }
/* An empty socket is a hole in the bench, and the dashed rule in the bench's
   own purple is what says "something goes here" rather than "this is broken". */
.bench-slot.empty { background: transparent; color: var(--magic-btn);
  border: 2px dashed var(--tint-magic-line); font-size: 17px; display: grid;
  place-items: center; }
.bench-slot.filled { position: relative; background: var(--tint-cool);
  border: 2px solid var(--tint-cool-line); color: var(--text); min-height: 0; }
.bench-slot.filled b { font-size: 12.5px; }
.slot-name { font-size: 10px; color: var(--muted); line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; width: 100%; }
.slot-drop { position: absolute; top: 2px; right: 5px; font-size: 10px;
  color: var(--muted-2); }
/* What this handful will actually cost. One row nearly always; a socket drawing
   on two tiers of the same pile says so here rather than anywhere else, so the
   stars shrink to fit the second row instead of the socket growing. */
.slot-tiers { display: flex; flex-direction: column; align-items: center;
  gap: 1px; line-height: 1; }
.slot-tier { display: inline-flex; align-items: center; gap: 3px; }
.slot-tier .stars { font-size: 9px; letter-spacing: -.5px; }
.slot-tier i { font-style: normal; font-size: 9px; color: var(--muted); }
@media (hover: hover) {
  .bench-slot.filled:hover { border-color: var(--err); }
  .bench-slot.filled:hover .slot-drop { color: var(--err); }
}

/* How many of a thing you hold is what the eye is hunting for on a wall of
   cards, so it sits beside the name rather than in the fine print under it. */
.qty-badge { margin-left: auto; font-size: 15px; white-space: nowrap; }

/* ── the phone ──────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  /* There is no "beside" on a phone. The bag comes first because the quick-use
     strip above it has already answered the only urgent question this tab has;
     everything else here is deliberate, and deliberate can scroll. */
  .items-tab { grid-template-columns: 1fr; gap: 16px; }
  .workshop { position: static; max-height: none; overflow: visible; }
}

/* ── how well a thing was made ──────────────────────────────────────────
   Gold, because quality is the one stat in Orbis that is directly worth orbs
   and the eye should read the two together. Drawn everywhere an item appears -
   the bag, a bench socket, a shelf line, a seller's row - so the mark means the
   same thing wherever it is found. Quality is part of what an item *is*,
   like its name and its count, so on a card it lives in the head, right under
   the name (`Head`'s `quality` prop) - always in the flow of the card, never
   floating over it. */
/* Wraps and never outgrows its card. A tier name is translated text of
   unknown length, and a centred flex child wider than its parent overflows
   on *both* sides - which is how a star row ends up printed across the card
   next to it. */
.stars { display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap; max-width: 100%;
  font-size: 12px; letter-spacing: 1px; color: var(--gold);
  text-shadow: 0 0 1px rgba(0, 0, 0, .35); }
/* Earned and unearned are the same filled glyph told apart by color alone:
   the hollow-star character reads as filled once it is more than a few pixels
   tall, so the split that matters is bright gold against a quiet grey - the
   same trick every rating row on the web uses, because it survives any font
   and any size. The grey stays warm-neutral so an unearned star reads as
   "room to grow", not as an error state. */
/* `.earned` has no color of its own - it inherits gold here and violet on
   `.legendary`, so the tint stays one decision made in one place. */
.stars .unearned { color: var(--muted-2); opacity: .55; text-shadow: none; }
/* One row, one scale: the two halves sit flush so five stars read as a single
   bar, not as two groups with a seam in the middle. */
.stars .earned + .unearned { margin-left: -5px; }
.star-name { font-size: 11px; letter-spacing: 0; color: var(--muted-hi); }
/* The identity line: name above, tier right under it, fine print after. A hair
   of air on both sides so the gold reads as its own line, not a subtitle. */
.head-stars { margin: 2px 0 1px; line-height: 1; }

/* The star above the scale is not a sixth star in a row - it is a different
   mark, so it can be recognised without counting. */
.stars.legendary { color: var(--magic); font-size: 15px; letter-spacing: 0;
  filter: drop-shadow(0 0 4px rgba(194, 172, 255, .55)); }
.stars.legendary .star-name { color: var(--magic); font-weight: 600; }

/* Where you're working today: one row of choices above both stations, because
   it is one decision for the whole column. */
.bench-venue .row { gap: 6px; }
.bench-venue button.on { border-color: var(--magic-btn); color: var(--text-hi); }