/* ---------- Team Ops: Saturday tools ----------

   The decisions cricket-desktop asks for, written down rather than left to
   be inferred:

   1. Sentences or picture. The standfirst and the notes are sentences, so
      they take the measure. The batting card is a list, so it takes the
      measure too: the names read as a card, not as a figure. The field is
      a picture, so it takes the canvas. The other side is a table, so it
      takes the canvas.
   2. Set or list. On a phone the batting card is one column: current
      bowlers as full-width cards under the overs bar, everyone else a
      slim one-line list (# · Name · Bowl · overs). Add a player opens
      the next slot up to the age-group declared list. From 720 it is one
      row per name. The page sections are a list, stacked, the same as
      fielding-drills. The rule questions are a list too: one column,
      because the next tap depends on the last. Pack buttons are a flowed
      row: nobody knows how many named packs he will keep, so auto-wrap
      is right.
   3. 390, 768, 1440. Three answers on purpose. At 390 the field opens on
      the whole ground (45 m rope, 10 m ring, gold dots), keeper at the
      top; Further / Closer zoom in from there. The batting card stays one
      column. From 720 the name, Bowl, overs and arrows sit on one card
      and the field still fits the canvas. Nothing changes again above
      that: a wider screen should not make a batting card longer to read.
   4. Rungs. Every gap off the ladder.

   Horizontal swipe is locked on Ops: overflow-x clipped, overscroll-x
   none, touch-action pan-y on the card (handles keep touch-action none
   for drag). The page only scrolls up and down.

   The cards carry the ochre left bar the site uses for a block that is
   doing something rather than saying something, the same as the signup
   card and the diagnosis question. */

#team-ops, #the-nine, #the-rules, #the-limits, #the-field {
  scroll-margin-top: var(--stuck);
}

.ops-jump { margin: 0 0 var(--s4); }
.ops-jump p { margin: 0; }

.ops-card {
  max-width: calc(var(--measure) + var(--s4) * 2);
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--ochre);
  border-radius: var(--radius);
  padding: var(--s4) var(--s4) var(--s3);
}

.ops-fieldwrap {
  max-width: var(--canvas);
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--ochre);
  border-radius: var(--radius);
  padding: var(--s3);
}
/* The measure sits on main li. These lists are cards and a table, so the
   box has to span or the dashed rule stops halfway across. */
main .ops-squad, main .ops-squad__row {
  max-width: none;
}

.ops-card__h {
  font-family: var(--font-display);
  font-size: 1.35rem; letter-spacing: -0.012em;
  margin: 0 0 var(--s2); color: var(--ink);
}

.ops-status {
  min-height: 1.4em;
  margin: var(--s2) 0 0;
  font-size: 0.95rem; line-height: 1.4; color: var(--ink-faint);
}
.ops-status:empty { display: none; }
.ops-status[data-said="ok"] { color: var(--forest); }
.ops-status[data-said="no"] { color: var(--crimson); }

.ops-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.ops-squad { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ops-squad__row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s2); margin: 0 0 var(--s2);
  padding: var(--s2) 0;
  border-bottom: 1px dashed var(--rule);
  order: 0;
}
/* display:grid/flex on the row beats the UA [hidden] rule; force it. */
.ops-squad__row[hidden] { display: none !important; }
.ops-squad__row:last-child { border-bottom: 0; margin-bottom: 0; }
.ops-size {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin: 0 0 var(--s3);
}
.ops-prog .ops-size {
  margin: 0 0 var(--s2);
}
.ops-size .btn[aria-pressed="true"],
.ops-zoom .btn[aria-pressed="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* Instructions A — collapsed how-to under The side. */
.ops-how {
  margin: var(--s2) 0 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-2);
  max-width: var(--measure);
}
.ops-how summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-hand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ops-how summary::-webkit-details-marker { display: none; }
.ops-how summary::after {
  content: "+";
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-faint);
  line-height: 1;
}
.ops-how[open] summary::after { content: "–"; }
.ops-how p {
  margin: 0;
  padding: 0 12px 10px;
  font-family: var(--font-hand);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: none;
}

/* Pills A — segmented age / overs bars. */
.ops-size--seg {
  gap: 0;
  flex-wrap: nowrap;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
}
.ops-size--seg .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 34px;
  margin: 0;
  padding: 0 6px;
  border: 0;
  border-right: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.ops-size--seg .btn:last-child { border-right: 0; }
.ops-size--seg .btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.ops-squad__num {
  font-family: var(--font-hand); font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.ops-squad__lab { flex: 1 1 auto; min-width: 0; display: flex; }
.ops-squad__name {
  font-family: var(--font-ui); font-size: 1.05rem;
  min-height: 46px; padding: 8px 10px; width: 100%;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rope); border-radius: var(--radius);
}
.ops-squad__name:focus-visible {
  outline: 2px solid var(--forest); outline-offset: 1px; border-color: var(--forest);
}
.ops-squad__move { display: flex; gap: var(--s1); flex: 0 0 auto; }
.ops-squad__bowl {
  flex: 0 0 auto;
  min-width: 4.4em;
  min-height: 44px;
}
.ops-over {
  display: inline-flex; align-items: center; gap: var(--s1);
  flex: 0 0 auto;
}
.ops-over__n {
  font-family: var(--font-hand); font-weight: 600;
  min-width: 1.25em; text-align: center; color: var(--ink);
}
.ops-limits { margin: var(--s3) 0 0; max-width: var(--measure); }
.ops-limits p { margin: 0 0 var(--s2); }
.ops-limits p:last-child { margin-bottom: 0; }
.ops-rules-base {
  margin: 0 0 var(--s3);
  color: var(--ink-soft, var(--ink-faint));
  font-size: 0.95rem;
  max-width: var(--measure);
}
.ops-rules-search {
  position: relative;
  margin: var(--s3) 0 var(--s3);
  padding: var(--s3);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ochre, #c9a227) 18%, var(--paper, #fff));
  border: 1px solid color-mix(in srgb, var(--ochre, #c9a227) 45%, var(--rule));
  /* PredictiveSearch tokens — same palette as the finder, scoped here. */
  --ps-bg:          var(--paper-card, #fff);
  --ps-border:      var(--rule);
  --ps-radius:      var(--radius, 10px);
  --ps-shadow:      none;
  --ps-text:        var(--ink);
  --ps-muted:       var(--ink-faint);
  --ps-active-bg:   color-mix(in srgb, var(--ochre, #c9a227) 12%, var(--paper, #fff));
  --ps-active-text: var(--ink);
  --ps-mark-bg:     color-mix(in srgb, var(--ochre, #c9a227) 35%, var(--paper, #fff));
  --ps-font:        var(--font-ui, inherit);
  --ps-font-size:   0.95rem;
  --ps-max-height:  none;
}
.ops-rules-search__eyebrow {
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: color-mix(in srgb, var(--ochre, #c9a227) 55%, var(--ink));
}
.ops-rules-search__lab {
  display: block;
  margin: 0 0 var(--s2);
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-transform: none;
  font-weight: 700;
  color: var(--ink);
}
.ops-rules-search__input {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 0;
  border-bottom: 3px solid var(--ink);
  border-radius: 8px 8px 0 0;
  background: var(--paper, #fff);
  color: var(--ink);
  font: inherit;
  font-size: 1.1rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.ops-rules-search__input:focus {
  outline: 2px solid var(--ochre, #c9a227);
  outline-offset: 2px;
}
.ops-rules-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--s2) 0 0;
}
.ops-rules-chip {
  min-height: 36px;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 0.85rem;
  background: var(--paper, #fff);
}
/* Search-first: results sit in the page, not a floating dropdown. */
.ops-rules-search .ops-rules-hits.ps-suggestions {
  position: static;
  top: auto; left: auto; right: auto;
  margin: var(--s2) 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  max-height: none;
  overflow: visible;
}
.ops-rules-search .ps-suggestion {
  display: block;
  padding: 12px 0;
  border-bottom: 1px dashed var(--rule);
  border-radius: 0;
  min-height: 44px;
  cursor: pointer;
}
.ops-rules-search .ps-suggestion:last-child { border-bottom: 0; }
.ops-rules-search .ps-suggestion b {
  display: block;
  font-weight: 600;
  font-size: 1.02rem;
}
.ops-rules-search .ps-suggestion .ops-rules-hits__where {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ps-muted);
}
.ops-rules-search .ps-suggestion .ops-rules-hits__snip {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink-soft, var(--ink-faint));
}
.ops-rules-search .ps-suggestion mark {
  background: var(--ps-mark-bg);
  color: inherit;
}
.ops-rule-sheet {
  margin: var(--s3) 0 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius, 10px);
  background: var(--paper, #fff);
  overflow: hidden;
  max-width: var(--measure);
}
.ops-rule-sheet[hidden] { display: none !important; }
.ops-rule-sheet__head {
  padding: var(--s3);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-card, var(--paper));
}
.ops-rule-sheet__title {
  margin: 0 0 var(--s1);
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ops-rule-sheet__meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.ops-rule-sheet .ops-answer__note {
  margin: var(--s2) var(--s3) 0;
}
.ops-rule-sheet__body {
  padding: var(--s2) var(--s3) var(--s3);
}
.ops-rule-sheet__clause {
  margin: 0 0 var(--s2);
  padding: var(--s2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper-card, var(--paper));
}
.ops-rule-sheet__clause:last-child { margin-bottom: 0; }
.ops-rule-sheet__clause--focus {
  border-color: var(--ochre, #c9a227);
  box-shadow: inset 3px 0 0 var(--ochre, #c9a227);
  background: #fffdf6;
}
.ops-rule-sheet__num {
  display: block;
  margin: 0 0 4px;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ochre, #c9a227);
}
.ops-rule-sheet__clause p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}
.ops-rules-more {
  margin: var(--s4) 0 0;
}
.ops-answer__meta {
  margin: 0 0 var(--s2);
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.ops-answer__note {
  margin: 0 0 var(--s2);
  padding: 8px 10px;
  border-left: 3px solid var(--ochre, #c9a227);
  font-size: 0.95rem;
  max-width: var(--measure);
}
.ops-ask {
  margin: 0 0 var(--s2);
  font-family: var(--font-display);
  font-size: 1.2rem; letter-spacing: -0.01em;
  color: var(--ink);
}
/* Menu B — two-up chips; whole-card spans the bottom. */
.ops-rules-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 0 var(--s3);
}
.ops-triage {
  display: contents;
}
.ops-triage .btn {
  width: auto;
  min-height: 36px;
  min-width: 0;
  text-align: center;
  padding: 8px 6px;
  border-radius: 10px;
  font-size: 0.85rem;
}
.ops-rules-all {
  grid-column: 1 / -1;
  min-height: 36px;
  text-align: left;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.85rem;
}
.ops-rules-all[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.ops-answer { margin: var(--s3) 0 0; max-width: var(--measure); }
.ops-answer p { margin: 0 0 var(--s2); }
.ops-answer p:last-child { margin-bottom: 0; }
.ops-squad__btn, .ops-squad__bowl, .ops-toolbar .btn, .ops-seed .btn,
.ops-size .btn, .ops-fieldbar .btn, .ops-zoom .btn,
.ops-modes__btn, .ops-fieldfoot .btn {
  min-height: 44px;
}
.ops-triage .btn,
.ops-rules-all,
.ops-size--seg .btn,
.ops-field-full {
  min-height: 36px;
}
.ops-size--seg .btn,
.ops-field-full {
  min-height: 34px;
}
.ops-squad__handle {
  flex: 0 0 auto;
  min-width: 48px; min-height: 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: grab; touch-action: none;
}
.ops-squad__handle:active { cursor: grabbing; }
.ops-squad__row.is-dragging {
  background: var(--hover-cream);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(16, 17, 20, 0.12);
}

.ops-toolbar, .ops-rename, .ops-fieldbar, .ops-fieldfoot {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--s2); margin-top: var(--s3);
}
.ops-fieldbar { margin-top: 0; margin-bottom: var(--s2); align-items: center; }
.ops-fieldbar--seg {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
}
.ops-fieldbar--seg .ops-seed,
.ops-fieldbar--seg .ops-zoom {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  overflow: hidden;
  width: 100%;
}
.ops-fieldbar--seg .ops-seed.ops-size--seg,
.ops-fieldbar--seg .ops-zoom.ops-size--seg {
  flex-wrap: nowrap;
  gap: 0;
}
.ops-fieldbar--seg .ops-size--seg .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 34px;
  height: 34px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-right: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-soft);
  align-self: stretch;
}
.ops-fieldbar--seg .ops-size--seg .btn:last-child { border-right: 0; }
.ops-fieldbar--seg .ops-size--seg .btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.ops-fieldbar__row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}
.ops-fieldbar__row .ops-zoom {
  flex: 1 1 auto;
  min-width: 0;
}
.ops-field-full {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}
.ops-field-full[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.ops-zoom {
  display: flex; flex-wrap: nowrap; gap: var(--s2);
  margin: 0 0 var(--s2);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.ops-zoom .btn {
  flex: 1 1 0; min-width: 0; text-align: center;
  padding-left: 10px; padding-right: 10px;
}
.ops-toolbar { margin-top: var(--s4); }

.ops-fieldstage {
  overflow: hidden;
  touch-action: none;
  background: var(--grass);
  border-radius: var(--radius);
}

.ops-field {
  display: block; width: 100%; height: auto;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.ops-field .ops-hit { fill: transparent; cursor: grab; }
.ops-field .ops-dot {
  fill: var(--ochre); stroke: var(--ink); stroke-width: 2;
}
.ops-field .ops-mark.is-on .ops-dot,
.ops-field .ops-mark.is-drag .ops-dot {
  fill: var(--gold); stroke: var(--ink); stroke-width: 2.2;
}
.ops-field .ops-mark { touch-action: none; }
/* Reveal on hold: dots only until a fielder is selected or dragged,
   so place-names never stack on the grass. */
.ops-field .ops-lab {
  font-family: var(--font-hand); font-size: 20px; fill: var(--ink);
  pointer-events: none;
  display: none;
}
.ops-field .ops-mark.is-on .ops-lab,
.ops-field .ops-mark.is-drag .ops-lab {
  display: block;
}
.ops-field .ops-bound {
  font-family: var(--font-hand); font-size: 18px; letter-spacing: 0.04em;
  fill: var(--ink); fill-opacity: 0.45; pointer-events: none;
}
.ops-field .ops-end {
  font-family: var(--font-hand); font-size: 18px; letter-spacing: 0.04em;
  fill: var(--ink); fill-opacity: 0.55; pointer-events: none;
}
.ops-field .ops-place {
  fill: var(--ink); fill-opacity: 0.18; pointer-events: none;
}
.ops-field .ops-place.is-near {
  fill: none; stroke: var(--ochre); stroke-width: 3; fill-opacity: 1;
}
.ops-field .ops-place-lab {
  font-family: var(--font-hand); font-size: 18px; font-weight: 600;
  fill: var(--ink); pointer-events: none;
}

.ops-fieldwrap.is-full {
  position: fixed; inset: 0; z-index: 80;
  max-width: none; margin: 0;
  padding: var(--s2);
  border: 0; border-radius: 0; border-left: 0;
  background: var(--paper);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.ops-fieldwrap.is-full .ops-fieldstage {
  flex: 1 1 auto; min-height: 0; display: flex;
  align-items: center; justify-content: center;
  overflow: hidden;
}
.ops-fieldwrap.is-full .ops-field {
  width: 100%;
  height: 100%;
  max-height: none;
}
.ops-fieldwrap.is-full .ops-fieldfoot { display: none; }
body.ops-field-open { overflow: hidden; }

.ops-rename__lab {
  display: flex; flex-direction: column; gap: var(--s1);
  flex: 1 1 12em; min-width: 0;
}
.ops-rename__text {
  font-family: var(--font-hand);
  font-size: 0.92rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint);
}
.ops-rename__input {
  font-family: var(--font-ui); font-size: 1.05rem;
  min-height: 46px; padding: 8px 13px; width: 100%;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rope); border-radius: var(--radius);
}
.ops-rename__input:focus-visible {
  outline: 2px solid var(--forest); outline-offset: 1px; border-color: var(--forest);
}

.ops-seed {
  display: flex; flex-wrap: wrap; gap: var(--s2);
}

@media (max-width: 720px) {
  /* Ops is vertical only — no sideways swipe / rubber-band. */
  html:has([data-ops]),
  body:has([data-ops]) {
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }
  [data-ops],
  #the-nine .wrap,
  #the-nine .ops-card,
  .ops-prog,
  .ops-squad {
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    touch-action: pan-y;
  }
  .ops-squad__handle {
    touch-action: none;
  }
  .ops-card, .ops-fieldwrap { padding: var(--s2); }
  /* Option C: full-width bowlers, compact one-line list underneath. */
  .ops-squad {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .ops-squad__rest {
    order: 0;
    list-style: none;
    margin: 4px 0 2px;
    padding: 10px 4px 6px;
    border: 0;
    font-family: var(--font-hand);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .ops-squad__rest[hidden] { display: none !important; }
  .ops-squad__row.is-bowling {
    order: -1;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-areas:
      "handle name bowl"
      "overs overs overs"
      "lock lock lock";
    column-gap: var(--s2);
    row-gap: 8px;
    align-items: center;
    margin: 0 0 8px;
    padding: 10px;
    border: 1px solid rgba(169, 118, 47, 0.45);
    border-radius: var(--radius);
    background: rgba(169, 118, 47, 0.06);
    box-shadow: none;
  }
  .ops-squad__row.is-bowling.is-locked {
    border-color: rgba(158, 27, 30, 0.35);
    background: rgba(158, 27, 30, 0.05);
  }
  .ops-spell-lock {
    grid-area: lock;
    margin-top: 0;
  }
  .ops-size--seg .btn {
    flex: 1 1 0;
    min-height: 34px;
  }
  .ops-squad__row:not(.is-bowling) {
    order: 1;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
    grid-template-areas: "handle name bowl overs";
    column-gap: 6px;
    row-gap: 0;
    align-items: center;
    margin: 0;
    padding: 8px 2px;
    border: 0;
    border-bottom: 1px dashed var(--rule);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .ops-squad__row:not(.is-bowling):last-child { border-bottom: 0; }
  .ops-squad__handle {
    grid-area: handle;
    min-width: 36px; min-height: 36px;
  }
  .ops-squad__row:not(.is-bowling) .ops-squad__handle {
    min-width: 28px; min-height: 28px;
    border: 0; background: transparent;
  }
  .ops-squad__row:not(.is-bowling) .ops-squad__num {
    font-size: 0.75rem; color: var(--ink-faint);
  }
  .ops-squad__lab { grid-area: name; flex: none; min-width: 0; width: auto; }
  .ops-squad__name { min-height: 40px; font-size: 0.95rem; padding: 6px 8px; }
  .ops-squad__row:not(.is-bowling) .ops-squad__name {
    min-height: 36px; font-size: 0.92rem;
    border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
    background: transparent; padding: 4px 2px;
  }
  .ops-squad__bowl {
    grid-area: bowl;
    width: auto;
    min-width: 3.6em;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 8px;
  }
  .ops-squad__row:not(.is-bowling) .ops-squad__bowl {
    min-height: 36px; min-width: 3.2em; padding: 0 8px; font-size: 0.85rem;
  }
  .ops-over {
    grid-area: overs;
    justify-self: start;
    display: flex; align-items: center; gap: 6px;
  }
  .ops-squad__row.is-bowling .ops-over {
    justify-self: stretch;
    justify-content: flex-start;
  }
  .ops-over .ops-squad__btn {
    width: 40px; min-width: 40px; height: 40px; min-height: 40px;
    padding: 0; border-radius: 8px;
  }
  .ops-squad__row:not(.is-bowling) .ops-over .ops-squad__btn {
    width: 32px; min-width: 32px; height: 32px; min-height: 32px;
  }
  .ops-over__n { min-width: 1.4em; font-size: 1rem; text-align: center; }
  .ops-squad__move { display: none; }
  .ops-size {
    flex-wrap: wrap;
  }
  .ops-size .btn {
    flex: 1 1 auto;
    min-width: 0;
  }
  .ops-zoom {
    overflow-x: hidden;
    flex-wrap: wrap;
  }
  .ops-fieldstage {
    height: min(72dvh, 520px);
    min-height: 360px;
    touch-action: none; /* custom field pan — not page swipe */
  }
  .ops-fieldstage .ops-field {
    width: 100%;
    height: 100%;
  }
}

/* Bowl toggle — label stays “Bowl”; pressed state carries the meaning. */
.ops-squad__bowl[aria-pressed="true"] {
  background: rgba(169, 118, 47, 0.16);
  border-color: var(--accent);
  color: var(--accent);
}
.ops-squad__row.is-bowling {
  box-shadow: inset 0 0 0 1px rgba(169, 118, 47, 0.35);
}
.ops-squad__row.is-bowling.is-locked {
  border-color: rgba(158, 27, 30, 0.35);
  background: rgba(158, 27, 30, 0.05);
  box-shadow: none;
}
.ops-squad__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.ops-spell-lock {
  display: none;
  margin-top: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid rgba(158, 27, 30, 0.25);
  background: rgba(158, 27, 30, 0.1);
  font-family: var(--font-hand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--crimson);
  width: fit-content;
  max-width: 100%;
}
.ops-spell-lock[hidden] { display: none !important; }
.ops-squad__row.is-locked .ops-spell-lock:not([hidden]) {
  display: inline-flex;
  align-items: center;
}

.ops-now {
  margin: 0 0 var(--s3);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.ops-now__lab {
  margin: 0 0 var(--s2);
  font-family: var(--font-hand);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ops-now__chips {
  display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
}
.ops-now__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 12px;
  border-radius: 999px;
  background: rgba(169, 118, 47, 0.14);
  border: 1px solid rgba(169, 118, 47, 0.4);
  font-weight: 700; font-size: 0.95rem;
}
.ops-now__chip button {
  border: 0; background: transparent; color: var(--ink-soft);
  font: inherit; font-size: 1.1rem; line-height: 1;
  min-width: 28px; min-height: 28px; cursor: pointer; padding: 0;
}
.ops-now__empty {
  margin: 0; font-size: 0.95rem; color: var(--ink-soft);
}
.ops-now__empty b { color: var(--ink); }

.ops-prog {
  margin: 0 0 var(--s4);
  padding: var(--s2) var(--s3) var(--s3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.ops-prog.is-open {
  border-color: rgba(169, 118, 47, 0.55);
}
.ops-prog__meta {
  margin: 0 0 var(--s2);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.ops-prog__row {
  display: flex; justify-content: space-between; gap: var(--s2);
  font-size: 0.92rem; margin: 0 0 8px;
}
.ops-prog__track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  overflow: visible;
}
.ops-prog__fill {
  height: 100%;
  border-radius: 999px;
  background: #A9762F;
  max-width: 100%;
  position: relative;
  z-index: 1;
}
.ops-prog__lock {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(158, 27, 30, 0.12),
    rgba(158, 27, 30, 0.12) 4px,
    transparent 4px,
    transparent 8px
  );
}
.ops-prog__lock[hidden] { display: none !important; }
.ops-prog__tick {
  position: absolute; top: -4px; bottom: -4px;
  width: 0; border-left: 2px dashed rgba(16, 17, 20, 0.45);
  transform: translateX(-1px);
  z-index: 2;
}
.ops-prog__tick span {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-faint);
}
.ops-prog__ends {
  display: flex; justify-content: space-between;
  margin-top: 18px;
  font-size: 0.8rem; color: var(--ink-faint);
}

.ops-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 0 var(--s3);
  border-bottom: 1px solid var(--rule);
}
.ops-modes__btn {
  border: 0; border-radius: 0;
  background: transparent;
  padding: 12px 8px 10px;
  font-weight: 700;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ops-modes__btn[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.ops-sits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
  margin: 0 0 var(--s3);
}
.ops-sits[hidden] { display: none !important; }
.ops-sit {
  text-align: left;
  padding: 10px 12px;
  min-height: 52px;
  font-weight: 700;
}
.ops-sit small {
  display: block;
  margin-top: 3px;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ops-sit[aria-pressed="true"] {
  background: rgba(169, 118, 47, 0.12);
  border-color: var(--accent);
}
.ops-sit[aria-pressed="true"] small { color: var(--accent); }
.ops-fieldwrap.is-sit .ops-seed { display: none; }
.ops-advice {
  margin: var(--s3) 0 0;
  padding: var(--s3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.ops-advice__k {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ops-advice__b {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.45;
}
.ops-advice__b b { font-weight: 700; }
.ops-fieldfoot { margin-top: var(--s3); }

.ops-plans {
  margin: 0 0 var(--s4);
}
.ops-plans .ops-now__lab { margin-top: var(--s3); }
.ops-plans .ops-now__lab:first-child { margin-top: 0; }
.ops-field-sets,
.ops-zone-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 var(--s2);
}
.ops-field-set,
.ops-zone-row {
  width: 100%;
  min-height: 44px;
  text-align: left;
  justify-content: flex-start;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 10px 14px;
}
.ops-field-set[aria-pressed="true"],
.ops-zone-row[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.ops-zone__hint {
  margin: 0 0 var(--s2);
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.ops-pick {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font: 700 0.92rem/1 var(--font-ui, inherit);
  cursor: pointer;
}
.ops-pick[aria-pressed="true"] {
  background: rgba(169, 118, 47, 0.18);
  border-color: rgba(169, 118, 47, 0.55);
}
.ops-paste {
  margin: var(--s3) 0 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
  padding: 0 var(--s3) var(--s3);
}
.ops-paste > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.95rem;
  list-style: none;
}
.ops-paste > summary::-webkit-details-marker { display: none; }
.ops-paste__hint {
  margin: 0 0 var(--s2);
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.ops-paste__in {
  display: block;
  width: 100%;
  min-height: 120px;
  margin: 0 0 var(--s2);
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  resize: vertical;
}