/* Gear sets (gear-sets.js): the strip beside the action bar and the inventory's list of sets. Everything here is
   under .gs-bar or .gs-panel (or the rename sheet's .gs-rename), so it collides with nothing in lab.css or forge.css.
   A state is always a word or a mark as well as a look: "Worn" with a tick, "Empty", "Not in your bag". */

/* ---------------- the strip, mouse and keyboard: above the right end of the action bar ---------------- */
.gs-bar {
  position: fixed; z-index: 7; pointer-events: auto;
  left: calc(50% + var(--bar-w) / 2); transform: translateX(-100%);
  bottom: calc(10px + var(--safe-b) + var(--bar-s) * 1.25 + 26px);
  display: flex; align-items: center; gap: 6px; padding: 4px 6px;
  border: 1px solid #5a4e3a; border-radius: 10px; background: linear-gradient(#2a251d, #17140f);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); color: var(--text);
}
.gs-bar[hidden], .action-bar[hidden] ~ .gs-bar, body.in-hall .gs-bar, body.title-live .gs-bar { display: none; }
.gs-bar .gs-title { display: flex; align-items: center; gap: 4px; padding: 0 4px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #cdbf9e; white-space: nowrap; }
.gs-bar .gs-title .padicon { width: 20px; height: 20px; }
.gs-bar .gs-list { display: flex; gap: 6px; }
.gs-bar .gs-list[hidden] { display: none; }
.gs-bar .gs-set {
  position: relative; display: grid; grid-template-rows: 1fr auto; place-items: center; width: 48px; height: 44px; padding: 2px 0 3px;
  border: 1px solid #5a4e3a; border-radius: 8px; background: radial-gradient(circle at 50% 35%, #3a3122, #1c1811 75%); color: var(--text);
  font: inherit; cursor: pointer; touch-action: manipulation;
}
.gs-bar .gs-set .gs-num { font-size: 17px; font-weight: 700; line-height: 1; }
.gs-bar .gs-set .gs-key, .gs-bar .gs-set .gs-state { font-size: 10px; line-height: 1; letter-spacing: 0.03em; color: #cdbf9e; }
.gs-bar .gs-set .gs-key { min-width: 14px; padding: 1px 3px; border: 1px solid #6b5d44; border-radius: 3px; font-family: inherit; color: var(--accent); }
.gs-bar .gs-set.worn { border-color: #f0c27a; border-width: 2px; }
.gs-bar .gs-set.worn .gs-state { color: #f0c27a; font-weight: 700; }
.gs-bar .gs-set.worn .gs-key, .gs-bar .gs-set:disabled .gs-key { display: none; } /* the set that is on: its mark reads "Worn" where the key was */
.gs-bar .gs-check { position: absolute; top: 2px; right: 3px; width: 12px; height: 12px; fill: none; stroke: #f0c27a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gs-bar .gs-set:disabled { opacity: 0.55; cursor: default; }
.gs-bar .gs-set:focus-visible, .gs-bar .gs-toggle:focus-visible { outline: 3px solid #91d1bd; outline-offset: 2px; }
.gs-bar .gs-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* A narrow window: the action bar is two rows of three there (lab.css), so the strip sits above the taller bar. */
@media (orientation: portrait) and (max-width: 560px) {
  .gs-bar:not(.touch) { bottom: calc(10px + var(--safe-b) + var(--bar-s) * 2 + 34px); }
}

/* ---------------- the strip, touch: one small button on the ring of the combat pad, opening three ----------------
   The pad (lab.css, "Touch combat pad") is one big circle (--B across) in the corner with Heal, the sweep and the
   charge on a ring about it (radius --R, at 193, 141 and 87 degrees). Between Heal and the sweep the ring has room for
   one 44px button: the toggle sits there, and opens into the three sets on a wider ring just beyond it, where the
   thumb already is. The numbers below are the pad's own, repeated so this file needs nothing from lab.css. */
.gs-bar.touch {
  left: auto; transform: none; right: calc(10px + var(--safe-r)); bottom: calc(10px + var(--safe-b));
  width: 0; height: 0; padding: 0; border: 0; background: none; box-shadow: none; display: block; z-index: 8; pointer-events: none;
  --B: 180px; --k: 58px; --b: 44px; --R: calc(var(--B) / 2 + var(--k) / 2 + 12px); --R2: calc(var(--R) + var(--k) / 2 + var(--b) / 2 + 8px);
}
.gs-bar.touch .gs-toggle, .gs-bar.touch .gs-set {
  position: absolute; width: var(--b); height: var(--b); border-radius: 50%; pointer-events: auto; touch-action: manipulation;
  right: calc(var(--B) / 2 - var(--rad) * cos(var(--ang)) - var(--b) / 2); bottom: calc(var(--B) / 2 + var(--rad) * sin(var(--ang)) - var(--b) / 2);
  border: 2px solid #5a4e3a; background: radial-gradient(circle at 50% 35%, rgba(70, 60, 45, 0.94), rgba(24, 20, 15, 0.94) 75%); color: var(--text); font: inherit;
}
.gs-bar.touch .gs-toggle { --rad: var(--R); --ang: 167deg; display: grid; place-items: center; padding: 0; }
.gs-bar.touch .gs-toggle-word { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.05; max-width: 38px; text-align: center; }
.gs-bar.touch.open .gs-toggle { border-color: #91d1bd; }
.gs-bar.touch .gs-list { display: block; }
.gs-bar.touch .gs-list[hidden] { display: none; }
.gs-bar.touch .gs-set { --rad: var(--R2); padding: 0; grid-template-rows: auto auto; align-content: center; }
.gs-bar.touch .gs-set[data-gs-wear="0"] { --ang: 184deg; } /* (17 degrees apart: a clear gap between two thumbs' worth of button) */
.gs-bar.touch .gs-set[data-gs-wear="1"] { --ang: 167deg; }
.gs-bar.touch .gs-set[data-gs-wear="2"] { --ang: 150deg; }
.gs-bar.touch .gs-set .gs-num { font-size: 14px; }
.gs-bar.touch .gs-set .gs-state { font-size: 10px; } /* (the word that says Worn or Empty has to be readable) */
.gs-bar.touch .gs-set.worn { border-color: #f0c27a; }
.gs-bar.touch .gs-check { top: 3px; right: 6px; width: 10px; height: 10px; }
@media (orientation: portrait) { .gs-bar.touch { --B: 172px; --k: 54px; } }

/* ---------------- the inventory's list of sets ---------------- */
.gs-panel { border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.18); }
.gs-panel > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; cursor: pointer; list-style-position: inside; }
.gs-panel > summary .gs-summary { color: #cdbf9e; font-size: calc(14px * var(--ts, 1)); }
.gs-panel > summary:focus-visible { outline: 2px solid #f3ead2; outline-offset: -4px; }
/* Whether the block is open is said in a word at the end of its heading (the row has no marker of its own). */
.gs-panel > summary::after { content: 'Show'; margin-left: auto; padding-left: 8px; font-size: calc(13px * var(--ts, 1)); letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.gs-panel[open] > summary::after { content: 'Hide'; }
.gs-panel > summary .gs-summary { min-width: 0; }
.gs-panel .gs-body { padding: 4px 12px 12px; display: grid; gap: 10px; }
.gs-panel .gs-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gs-panel .gs-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, 0.2); }
.gs-panel .gs-row.worn { border-color: var(--accent); border-width: 2px; padding: 7px 9px; }
.gs-panel .gs-row-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gs-panel .gs-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(16px * var(--ts, 1)); }
.gs-panel .gs-key { padding: 1px 6px; border: 1px solid #6b5d44; border-radius: 4px; font: inherit; font-size: calc(12px * var(--ts, 1)); color: var(--accent); }
.gs-panel .gs-mark { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: calc(13px * var(--ts, 1)); letter-spacing: 0.04em; text-transform: uppercase; color: #cdbf9e; white-space: nowrap; }
.gs-panel .gs-row.worn .gs-mark { color: var(--accent); font-weight: 700; }
.gs-panel .gs-check { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gs-panel .gs-pieces { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: calc(14px * var(--ts, 1)); }
.gs-panel .gs-pieces li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto; gap: 6px; align-items: baseline; }
.gs-panel .gs-slot { color: #cdbf9e; }
.gs-panel .gs-piece { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-panel .gs-piece-state { font-size: calc(12px * var(--ts, 1)); color: #cdbf9e; white-space: nowrap; }
.gs-panel .gs-pieces li.gone .gs-piece { text-decoration: line-through; opacity: 0.75; }
.gs-panel .gs-pieces li.gone .gs-piece-state { color: #f1b2a8; font-weight: 700; }
.gs-panel .gs-none { margin: 0; color: #cdbf9e; font-size: calc(14px * var(--ts, 1)); }
.gs-panel .gs-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.gs-panel .gs-acts .chip { min-height: 44px; }
.gs-panel .gs-acts .chip:disabled { opacity: 0.5; }
.gs-panel .gs-help p { margin: 0 0 2px; color: #cdbf9e; font-size: calc(14px * var(--ts, 1)); }
@media (max-width: 900px) { .gs-panel .gs-rows { grid-template-columns: 1fr; } }
body.saving .gs-panel button { pointer-events: none; opacity: 0.5; }

/* The rename sheet. */
.gs-rename { display: grid; gap: 4px; margin: 8px 0; }
.gs-rename input { min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; }

/* ---------------- the drill yard's choice of whom to drill against (yard-screen.js) ----------------
   Kept here, beside the feature it came with, and all under .yd-choose, .yd-drill or .yd-panel.out: the yard's own
   rules in forge.css are untouched. One of the row is always chosen, and says so with a tick and the word. */
.camp-screen .yd-choose { flex: none; display: grid; gap: 6px; }
#cardBody .camp-screen .yd-choose h2 { font-size: calc(clamp(15px, 0.5vw + 10px, 19px) * var(--ts, 1)); }
.camp-screen .yd-drills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.camp-screen .yd-drill {
  display: grid; gap: 2px; align-content: start; min-width: 0; min-height: 48px; padding: 7px 12px 8px; text-align: left; cursor: pointer;
  border: 0; color: #dcd3bb; font: inherit; background: rgba(27, 24, 18, 0.94); box-shadow: inset 0 0 0 1px #5a4e3a;
}
.camp-screen .yd-drill-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.camp-screen .yd-drill-top b { font: 600 calc(16px * var(--ts, 1)) / 1.2 var(--display); letter-spacing: 0.03em; color: var(--brass); }
.camp-screen .yd-drill-mark { display: inline-flex; align-items: center; gap: 4px; flex: none; font: 700 calc(12.5px * var(--ts, 1)) / 1.2 var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: #b9d3c0; }
.camp-screen .yd-drill-mark .cs-glyph { width: 1.05em; height: 1.05em; stroke-width: 3; }
.camp-screen .yd-drill-line { font-size: calc(14px * var(--ts, 1)); line-height: 1.25; color: #cfc6ae; }
.camp-screen .yd-drill.chosen { box-shadow: inset 0 0 0 2px #e0b96a; background: rgba(46, 38, 24, 0.96); }
.camp-screen .yd-drill:focus-visible { outline: 2px solid #f3ead2; outline-offset: 2px; }
/* A kind that sits the bout out: its panel is dimmed and its count line reads "Not in this bout". */
.camp-screen .yd-panel.out > :not(.yd-count) { opacity: 0.4; filter: grayscale(0.7); }
.camp-screen .yd-panel.out .yd-count { color: #f1d9a8; }