/* src/item-spell-rows.css
 *
 * GEAR-SKILLS-ITEM-PANEL-01 (#6679) — the item's spell overview.
 *
 * Albion's row, in our skin: the committed pick on the left with its key cap, a
 * chevron, then a recessed track of icon buttons. Icon-first and compact — what
 * a player scans is HOW MANY choices a row has and which one is lit, not a
 * column of names.
 *
 * ── ON THE v3 KIT, NOT v2 ─────────────────────────────────────────────────
 * First cut used the `--k-*` set. Those are the v2 tokens the kit is migrating
 * AWAY from (ui-kit-v3-coverage.test.js caught it), and it also meant a cyan
 * app-chrome look bolted onto a brass panel. v3 is the right palette twice
 * over: it is the one being migrated TO, and brass-on-dark is much nearer what
 * Albion actually draws than v2's cyan.
 *
 * Zero colour literals — every value is a `--v3-*` token, which is what lets
 * this sheet sit in MIGRATED with a budget of 0. The recessed `--v3-well-*`
 * pair is doing real work here: Albion's option track is a sunken well, and we
 * already had tokens that mean exactly that.
 */

.isr-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--v3-brass-lo);
}

.isr-title {
  font-family: var(--v3-disp, inherit);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v3-brass-hi);
  margin-bottom: 2px;
}

/* Albion prints this rule verbatim above the rows. Six words that carry the
 * whole mental model of the feature, so it is copy, not a tooltip. */
.isr-rule {
  font-size: 11px;
  color: var(--v3-ink3);
  margin-bottom: 10px;
}

/* ── one row = one bar slot ───────────────────────────────────────────── */
.isr-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  min-width: 0;
}

/* The committed pick. Round and brass-ringed, visually separate from the track
 * so "what is active" reads before "what is available". */
.isr-current {
  position: relative;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(var(--v3-surf-a), var(--v3-surf-b));
  border: 2px solid var(--v3-brass);
  display: flex; align-items: center; justify-content: center;
  color: var(--v3-ink2);
  font-size: 15px;
}
.isr-current-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

/* The key cap, badged bottom-right on the active icon — Albion's placement, and
 * the only place the row says which key fires it. */
.isr-keycap {
  position: absolute;
  right: -3px; bottom: -3px;
  min-width: 15px; height: 15px;
  padding: 0 3px;
  border-radius: 4px;
  background: var(--v3-brass-hi);
  color: var(--v3-bg0);
  font-family: var(--v3-mono, inherit);
  font-size: 10px; font-weight: 800; line-height: 15px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--v3-bg0);
}

.isr-chevron {
  flex: 0 0 auto;
  color: var(--v3-ink4);
  font-size: 15px;
  line-height: 1;
}

/* The option track: a RECESSED WELL, which is what Albion draws and what
 * --v3-well-* already means in this kit.
 *
 * SHRINK-WRAPS to its options. Stretched full width, a one-option row read as
 * "something failed to load here" rather than "this slot has one spell". The
 * row's meaning is how many circles there are; empty space works against that.
 * Scrolls rather than wraps — #6478 pushes option counts up, and a wrapped
 * track would reflow the panel every time a row gained one. */
.isr-track {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--v3-brass-lo);
  border-radius: var(--v3-rad-tile);
  background: linear-gradient(var(--v3-well-a), var(--v3-well-b));
  overflow-x: auto;
  scrollbar-width: thin;
}

.isr-opt {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--v3-brass-lo);
  background: linear-gradient(var(--v3-surf-a), var(--v3-surf-b));
  color: var(--v3-ink3);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  /* Unpicked options read as available-but-inactive. Desaturated rather than
   * dimmed toward black, so the art stays legible enough to choose from. */
  filter: saturate(.25) brightness(.8);
  transition: filter .12s ease, border-color .12s ease, transform .12s ease;
}
.isr-opt:hover:not(:disabled) {
  filter: saturate(1) brightness(1.05);
  border-color: var(--v3-brass-hi);
  transform: translateY(-1px);
}
.isr-opt:focus-visible {
  outline: 2px solid var(--v3-brass-hi);
  outline-offset: 2px;
}

/* The active pick: full colour and a brass ring. Multi-signal on purpose — ring
 * AND saturation AND aria-pressed, never colour alone (WCAG 2.2 §1.4.1).
 *
 * The ring sits OUTSIDE the button. Inset, the 2px sat under the icon art and
 * was invisible at 34px — and finding the active pick at a glance across three
 * rows is the one job this section has. */
.isr-opt.is-selected {
  filter: none;
  border: 2px solid var(--v3-brass-hi);
  box-shadow: 0 0 0 2px var(--v3-bg0), 0 0 0 3px var(--v3-brass);
  cursor: default;
}

/* Preview mode (a bagged item). Inert and visibly so — paired with the
 * explanatory line below the rows, because a greyed control with no reason
 * reads as broken rather than as "not yet". */
.isr-opt.is-locked { cursor: not-allowed; opacity: .55; }
.isr-opt:disabled:not(.is-selected) { cursor: default; }

.isr-img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 50%;
  display: block;
  pointer-events: none;       /* the button owns the click, not the image */
}

/* A slot whose gear grants nothing. Two of three armour lines are in this state
 * today (#6690), so it is the common case for armour — it must read as "not
 * authored yet", never as a failed load. */
.isr-empty {
  font-size: 11px;
  color: var(--v3-ink4);
  font-style: italic;
}

.isr-preview-note {
  font-size: 11px;
  color: var(--v3-ink3);
  font-style: italic;
  margin-top: 6px;
}

/* A rejection the server sent back. Brass rather than red: being told "not in
 * combat" is a rule working as designed, not an error, and painting it as an
 * error trains the player to read normal feedback as breakage. */
.isr-reject {
  font-size: 11px;
  color: var(--v3-brass-hi);
  margin-top: 6px;
}