/* equipment.css (B5a): the picker and the "which one?" dialogs
 * (public/js/picker.js, .pk-*), and the equipment sections' own pieces
 * (.eq-*: the ammunition link, the variant switch, the rest buttons, an
 * item's spells). Kit's Clean tokens only; every transition names a
 * --duration and an --ease token. The dialogs sit in the top layer, outside
 * the sheet, so their targets are 44 px everywhere. */

/* ---- the dialogs ---- */
.pk-dialog {
  width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--text);
  box-shadow: var(--shadow-3); overflow: hidden;
}
.pk-dialog.pk-ask { width: min(420px, calc(100vw - 32px)); }
.pk-dialog::backdrop { background: var(--scrim); }
.pk-form { display: flex; flex-direction: column; gap: 10px; max-height: calc(100dvh - 34px); margin: 0; padding: 16px; box-sizing: border-box; }
.pk-head { display: flex; align-items: center; gap: 8px; }
.pk-title { flex: 1; margin: 0; font-size: var(--text-lg); font-weight: 600; }
.pk-text { margin: 0; font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: break-word; }
.pk-x {
  min-width: 44px; min-height: 44px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-muted);
  font: inherit; cursor: pointer;
}
.pk-search, .pk-num {
  width: 100%; min-height: 44px; padding: 6px 10px; box-sizing: border-box; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit;
}
.pk-count { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.pk-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-height: 0; flex: 1; overflow: hidden; }
.pk-list {
  margin: 0; padding: 0; list-style: none; max-height: 38dvh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.pk-row {
  display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 4px 10px;
  border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.pk-row:last-child { border-bottom: 0; }
@media (hover: hover) { .pk-row:hover { background: var(--surface-alt); } }
.pk-row.is-on { background: var(--accent-soft); color: var(--accent-soft-text); }
.pk-name { font-size: var(--text-sm); font-weight: 600; overflow-wrap: break-word; }
.pk-meta { margin: 0; font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: break-word; }
.pk-row.is-on .pk-meta { color: inherit; }
.pk-detail { min-width: 0; max-height: 30dvh; overflow-y: auto; font-size: var(--text-sm); overflow-wrap: break-word; }
.pk-dname { margin: 0 0 2px; font-size: var(--text-base); }
.pk-none { margin: 0; color: var(--text-muted); }
.pk-text .sc-table { max-width: 100%; }
.pk-foot, .pk-options { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.pk-options { flex-direction: column; align-items: stretch; }
.pk-fields { display: grid; gap: 8px; }
.pk-field { display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-items: center; gap: 8px; font-size: var(--text-sm); }
.pk-btn {
  min-height: 44px; padding: 6px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-sm); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.pk-btn.is-primary { border-color: transparent; background: var(--accent); color: var(--accent-text); }
.pk-btn:disabled { cursor: default; opacity: 0.5; }
.pk-option { text-align: left; white-space: normal; overflow-wrap: break-word; }
@media (hover: hover) { .pk-btn:not(:disabled):not(.is-primary):hover { background: var(--surface-alt); } }
.pk-btn:focus-visible, .pk-x:focus-visible, .pk-row:focus-visible, .pk-search:focus-visible, .pk-num:focus-visible {
  outline: none; box-shadow: var(--ring);
}
@media (min-width: 640px) {
  .pk-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .pk-list, .pk-detail { max-height: 56dvh; }
}
/* A one-pick picker's reading view on a phone (openPicker's `reading`): the
 * chosen row's text replaces the list, full height, with Back to the list
 * and ‹ ›. Wider, list and text sit side by side and the bar stays hidden. */
.pk-readbar { display: none; }
@media (max-width: 639px) {
  .pk-form.is-reading { height: calc(100dvh - 34px); }
  .pk-form.is-reading .pk-search, .pk-form.is-reading .pk-count, .pk-form.is-reading .pk-list { display: none; }
  .pk-form.is-reading .pk-body { grid-template-rows: minmax(0, 1fr); }
  .pk-form.is-reading .pk-detail { max-height: none; }
  .pk-form.is-reading .pk-readbar {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 4px; margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 1px solid var(--border); background: var(--surface-raised);
  }
  .pk-back { margin-right: auto; }
}

/* ---- inside the equipment sections ---- */
.eq-ammo-for { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 4px; }
.eq-ammo-for .sc-lbl { margin: 0; }
/* F-I (RFB5e6a-2): the rolled charges of an item whose charges are dice. */
.eq-charges-roll { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 4px; }
.eq-charges-roll .sc-lbl { margin: 0; }
.eq-charges-roll .sc-fld { width: 6em; flex: 0 0 auto; }
.cs-sheet.is-touch .eq-charges-roll .sc-fld { min-height: 44px; }
/* A percentage width adds nothing to the table's min-content width, so the
 * select never widens Equipment past a narrow column. */
.eq-select { flex: 1 1 0; width: 100%; min-width: 0; max-width: 100%; }
.eq-variant { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--text-xs); color: var(--text-muted); }
.eq-rests { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.eq-rests .sc-lbl { margin: 0; }
.eq-spells { margin: 4px 0 0; padding-left: 0; list-style: none; font-size: var(--text-sm); }
.eq-spell { padding: 2px 0; }
.cs-sheet.is-touch .eq-select, .cs-sheet.is-touch .eq-variant { min-height: 44px; }
.cs-sheet.is-touch .eq-variant input { width: 24px; height: 24px; }
.eq-coin-weight, .eq-pdl, .eq-variant-at, .eq-fires { overflow-wrap: break-word; }
.eq-pdl .sc-num { color: var(--text); }

/* ---- F-V2a ---- */
/* The picker's facts (RB5-11): a wrapped list of short chips of text. */
.pk-facts { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 6px 0; padding: 0; list-style: none; }
.pk-facts li {
  padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  font-size: var(--text-xs); overflow-wrap: break-word;
}
.pk-custom { margin-right: auto; }
/* Ammunition's "For" (RB5-15): on a narrow sheet the label sits above a
 * select as wide as the cell. */
.cs-sheet.is-narrow .eq-ammo-for { flex-direction: column; align-items: stretch; }
.cs-sheet.is-narrow .eq-ammo-for .eq-select { flex: 0 0 auto; }
/* "Put in" and where an item is. */
.eq-put {
  display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; margin-left: 4px; padding: 0;
  vertical-align: middle; color: var(--text-muted);
}
.cs-sheet.is-touch .eq-put { min-width: 44px; min-height: 44px; }
/* Rename (FB-B, item 6): an icon button after the name, and the field it
 * shows for the name the player gave the item. */
.eq-rename {
  display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; margin-left: 4px; padding: 0;
  vertical-align: middle; color: var(--text-muted);
}
.cs-sheet.is-touch .eq-rename { min-width: 44px; min-height: 44px; }
.eq-label { display: block; width: 100%; max-width: 24em; margin-top: 4px; }
.eq-label[hidden] { display: none; }
.eq-icon { display: block; }
.eq-in { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: break-word; }
/* A custom row's editor (RB5-12). */
.eq-custom { margin-top: 4px; font-size: var(--text-sm); }
.eq-custom-sum { min-height: 28px; color: var(--accent); cursor: pointer; }
.cs-sheet.is-touch .eq-custom-sum { min-height: 44px; }
.eq-custom-sum:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
.eq-custom-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 4px; }
.eq-fld { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; }
.eq-fld .sc-lbl { margin: 0; }
.eq-fld .sc-fld { width: 100%; min-width: 0; box-sizing: border-box; }
.eq-chk { display: inline-flex; align-items: center; gap: 6px; }
.cs-sheet.is-touch .eq-chk { min-height: 44px; }
.eq-props { display: flex; flex-wrap: wrap; gap: 4px 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.eq-props legend { padding: 0; }

/* ---- F-I2 ---- */
/* The custom editor's fields are a row of their own under the item, one
 * cell across the table (R-F1-13); its toggle stays beside the name. */
.eq-custom { display: inline-block; vertical-align: middle; margin-left: 4px; }
.eq-editor-row > td { padding-top: 0; }
.eq-editor-row .eq-custom-body { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); align-items: end; margin-top: 0; }
.eq-editor-row .eq-props { grid-column: 1 / -1; }
.cs-sheet.is-touch .eq-fld .sc-fld { min-height: 44px; }
/* Attacks > Custom item's name (name-dialog.js, R-F1-17). */
.pk-text-field { display: grid; gap: 4px; font-size: var(--text-sm); }