/* compai pill: one selectable option (radio or checkbox) drawn as a pill.

   Markup:
     <label class="pill">
       <input class="pill-input" type="radio" name="xp" value="new">
       <span class="pill-face">
         <svg class="pill-check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7"/></svg>
         <span class="pill-text">New</span><span class="pill-sub">· 0 to 2 deals</span>
       </span>
     </label>

   The native input stays in the DOM (visually hidden, never display:none),
   so the radio group keeps arrow-key navigation, space toggles, and screen
   readers announce it. The whole pill is the input's label. Selection is
   shown by the pill itself; no native circle or square is ever drawn.

   Tokens the host page provides: --accent (gold), --accent-tint, --ink
   (cream on navy), --muted, --hairline. Optional: --pill-on and
   --pill-on-bg for the selected label and fill where gold on the page
   background needs more contrast (the light theme). */

.pill { position: relative; display: block; min-width: 0; cursor: pointer; }

.pill-input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0; opacity: 0;
  -webkit-appearance: none; appearance: none;
}

.pill-face {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 0 14px;
  border: 1px solid var(--hairline); border-radius: 999px;
  background: transparent; color: var(--muted);
  font: 500 14px/1.2 var(--font-sans, system-ui, sans-serif);
  white-space: nowrap; user-select: none;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.pill-text { overflow: hidden; text-overflow: ellipsis; }
.pill-sub { font-weight: 400; opacity: 0.8; }

.pill-check {
  width: 14px; height: 14px; flex: none; display: none;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* Hover (only when usable and not already selected: a selected pill stays gold) */
.pill:hover .pill-input:not(:disabled):not(:checked) + .pill-face {
  border-color: color-mix(in srgb, var(--hairline) 40%, var(--ink) 60%);
  color: var(--ink);
}

/* Selected */
.pill-input:checked + .pill-face {
  border-color: var(--accent);
  background: var(--pill-on-bg, var(--accent-tint));
  color: var(--pill-on, var(--accent));
  font-weight: 600;
}
.pill-input:checked + .pill-face .pill-check { display: block; }

/* Keyboard focus: one gold ring around the whole pill, nothing inside it */
.pill-input:focus { outline: none; }
.pill-input:focus-visible + .pill-face,
.kbd-nav .pill-input:focus + .pill-face {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* .kbd-nav is set on <html> by pill-keyboard.js while the user is moving
   with the keyboard. WebKit (Safari) does not match :focus-visible when a
   radio group is changed with the arrow keys, so without it the ring vanished
   there. */

/* Disabled */
.pill-input:disabled + .pill-face { opacity: 0.5; cursor: not-allowed; }
.pill:has(.pill-input:disabled) { cursor: not-allowed; }

/* Groups */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-row > .pill { flex: 0 0 auto; }
.pill-grid-2, .pill-grid-3 { display: grid; gap: 8px; }
.pill-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pill-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pill-grid-3 .pill-face, .pill-grid-2 .pill-face { padding: 0 8px; }
/* Three across has to hold "✓ Intermediate · 3 to 20 deals" on one line
   down to a 768px tablet (about 210px a pill). */
.pill-grid-3 .pill-face { font-size: 13px; gap: 5px; letter-spacing: -0.005em; }
.pill-grid-3 .pill-sub { font-size: 12px; }
.pill-grid-3 .pill-check { width: 12px; height: 12px; }
@media (max-width: 479px) {
  .pill-grid-3 .pill-face { font-size: 15px; }
  .pill-grid-3 .pill-sub { font-size: 14px; }
}
@media (max-width: 479px) {
  .pill-grid-3 { grid-template-columns: 1fr; }
}