/* =====================================================================
   Los Zarcos F.C. — one stylesheet for everything the plugin renders.

   Scoped entirely under .zx-wrap so it cannot leak into the theme, and
   written to resist the theme leaking in the other direction: the host
   theme underlines links, restyles buttons and sets its own font sizes,
   so anything that must look deliberate is stated explicitly here rather
   than inherited.

   Two widths, on purpose:
     .zx-wrap          a readable column, for pages people READ
                       (public fixtures, training, the guide, the apply
                       form). Long lines are hard to read; this stays
                       narrow.
     .zx-wrap--wide    for pages people WORK IN (the Rep Dashboard and
                       Club Admin console). These hold wide tables, and
                       squeezing a nine-column fixture editor into a
                       reading column is what made every field truncate
                       to "Mallow T…". The theme's own column is widened
                       for these pages (see "Theme furniture" below), and
                       this caps the result at a sane 1240px.
   ===================================================================== */

.zx-wrap {
  /* Club palette */
  --zx-bg:#F2F8FD;
  --zx-surface:#FFFFFF;
  --zx-navy:#0F3454;
  --zx-navy-soft:#1B4D75;
  --zx-blue:#2E7CBF;
  --zx-blue-strong:#1F6099;
  --zx-blue-line:#D8EAFA;
  --zx-blue-wash:#EAF4FD;
  --zx-orange:#C9541F;
  --zx-orange-tint:#FCEBE0;
  --zx-gold-tint:#FDF3D9;
  --zx-gold-line:#E8D9A8;
  --zx-gold-ink:#7A5A10;
  --zx-green-tint:#E4F0E2;
  --zx-green-ink:#1F5C33;
  --zx-ink:#152230;
  --zx-muted:#5F7085;
  --zx-line:#E3E9EF;
  --zx-bye-bg:#EEF1F3;
  --zx-violet-tint:#F0EAFA;
  --zx-violet-line:#DCCDF2;
  --zx-violet-ink:#59397F;

  /* Shape and depth */
  --zx-r-sm:6px;
  --zx-r-md:10px;
  --zx-r-lg:14px;
  --zx-shadow:0 1px 2px rgba(15,52,84,.06), 0 2px 10px rgba(15,52,84,.05);
  --zx-shadow-lift:0 2px 6px rgba(15,52,84,.09), 0 8px 24px rgba(15,52,84,.07);
  --zx-ring:0 0 0 3px rgba(46,124,191,.28);
  --zx-control-h:38px;

  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px;
  line-height:1.55;
  color:var(--zx-ink);
  max-width:760px;
  margin:0 auto;
  -webkit-font-smoothing:antialiased;
}
.zx-wrap * { box-sizing:border-box; }
.zx-wrap img { max-width:100%; }

/* The theme underlines every link and restyles buttons. Reset inside our
   components, then opt back in where an underline genuinely helps. */
.zx-wrap a { color:var(--zx-blue-strong); }
.zx-wrap a:hover { color:var(--zx-navy); }
.zx-wrap button { font-family:inherit; }

/* Working pages get room. See the header comment for why. */
@media (min-width:1024px) {
  .zx-wrap--wide { max-width:1240px; }
}

/* =====================================================================
   Theme furniture

   The only rules in this file that reach outside .zx-wrap, and they are
   scoped with :has() so they apply ONLY to pages that actually host one
   of this plugin's shortcodes. Nothing else on the site is touched.

   The theme ("Digital Newspaper Plus") wraps page content in a layout
   built for a news site: a breadcrumb, a page title, and a two-column
   row where the main column takes flex-basis 70% and a sidebar takes the
   other 30%. This subdomain has no sidebar — the element is present but
   empty and display:none — so that 30% was simply dead space, which is
   why the content sat in a narrow column left of centre with the theme's
   white card visible behind it.

   Each shortcode renders its own navy header block, so the theme's
   breadcrumb and page title above it are duplication, not navigation.
   ===================================================================== */

/* Reclaim the width the absent sidebar was holding.
 *
 * The body carries the class `right-sidebar`, so the theme applies:
 *   body.right-sidebar #theme-content .row .primary-content
 *     { max-width:70%; flex:0 1 70%; }
 * That is an ID-level selector, and an earlier attempt at this override
 * lost to it on specificity and silently did nothing. Matching the same
 * shape and adding !important is warranted here: we are deliberately
 * overriding a theme rule of higher specificity, on pages this plugin
 * owns, and there is no lower-specificity way to reach it.
 *
 * The container itself is left alone. It caps at 1320px, so the content
 * column becomes ~1272px, which fits the 1206px fixture table. */
body:has(.zx-wrap) #theme-content .row .primary-content {
  max-width:100% !important;
  flex:1 1 100% !important;
}

/* Everything above the plugin's own header block. */
body:has(.zx-wrap) .digital-newspaper-breadcrumb-wrap,
body:has(.zx-wrap) .entry-header { display:none; }

/* The block editor leaves empty paragraphs around a shortcode block;
   they render as blank vertical space above and below the content. */
body:has(.zx-wrap) .entry-content > p:empty { display:none; }
body:has(.zx-wrap) .post-inner-wrapper { padding-top:0; }

/* ---------------------------------------------------------------- Header */

.zx-header {
  background:linear-gradient(135deg, var(--zx-navy) 0%, var(--zx-navy-soft) 100%);
  color:#fff;
  padding:22px 24px;
  border-radius:var(--zx-r-lg);
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:22px;
  box-shadow:var(--zx-shadow);
}
.zx-crest { width:52px; height:auto; flex:0 0 auto; }
.zx-h1 { font-size:23px; font-weight:700; margin:0 0 3px; letter-spacing:-.01em; line-height:1.25; }
.zx-subtitle { font-size:13.5px; color:rgba(255,255,255,.78); margin:0; }
.zx-wrap .zx-subtitle a { color:#fff; text-decoration:underline; text-underline-offset:2px; }
.zx-wrap .zx-subtitle a:hover { color:#fff; text-decoration-thickness:2px; }

/* ------------------------------------------------- Public filter chips */

.zx-filter-input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.zx-filter-bar { margin:0 0 6px; }
/* Wrap rather than scroll. The old horizontal scroller put a grey
   scrollbar across the page and hid half the teams off-screen. */
.zx-chip-row { display:flex; flex-wrap:wrap; gap:8px; padding:2px 0 4px; }
.zx-chip {
  font-weight:600;
  font-size:13px;
  line-height:1;
  padding:9px 15px;
  border-radius:999px;
  border:1.5px solid var(--zx-blue-line);
  background:var(--zx-surface);
  color:var(--zx-navy);
  cursor:pointer;
  white-space:nowrap;
  user-select:none;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.zx-chip:hover { border-color:var(--zx-blue); background:var(--zx-blue-wash); }
/* Boys / Girls groupings. The label sits above its own row of chips, so a
   parent scanning for "Girls U14" finds the heading first and the age
   group under it, rather than reading one undifferentiated line of chips. */
.zx-chip-group { margin-top:14px; }
.zx-chip-group-label {
  display:block; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--zx-muted); margin:0 0 7px;
}
.zx-chip-all { font-weight:700; }
.zx-chip-section { border-style:dashed; }
.zx-section-heading {
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--zx-muted); margin:30px 0 12px; padding-bottom:7px;
  border-bottom:2px solid var(--zx-blue-line);
}

/* Boys / Girls switch on a team card in the console. */
.zx-seg { display:inline-flex; border:1px solid var(--zx-blue-line); border-radius:999px;
  overflow:hidden; background:var(--zx-surface); }
.zx-seg-opt { display:inline-flex; }
.zx-seg-opt input { position:absolute; opacity:0; width:1px; height:1px; }
.zx-seg-opt span { display:inline-block; padding:7px 15px; font-size:12.5px; font-weight:600;
  color:var(--zx-muted); cursor:pointer; transition:background .12s ease, color .12s ease; }
.zx-seg-opt span:hover { background:var(--zx-blue-wash); color:var(--zx-navy); }
.zx-seg-opt input:checked + span { background:var(--zx-blue); color:#fff; }
.zx-seg-opt input:focus-visible + span { box-shadow:inset 0 0 0 2px var(--zx-navy); }

/* -------------------------------------------------- Public fixture list */

.zx-date-heading { display:flex; align-items:center; gap:10px; margin:26px 0 10px; }
.zx-day { font-weight:700; font-size:14px; color:var(--zx-navy); letter-spacing:.01em; white-space:nowrap; }
.zx-rel {
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--zx-gold-ink); background:var(--zx-gold-tint); border:1px solid var(--zx-gold-line);
  padding:3px 8px; border-radius:999px; white-space:nowrap;
}
.zx-line { flex:1; height:1px; background:var(--zx-line); }
/* Filled in by JS with "Today" / "Next up". Empty on every other date, and
   an empty pill still painted a small gold blob beside each heading. */
.zx-rel:empty { display:none; }

.zx-card, .zx-training-card {
  background:var(--zx-surface);
  border:1px solid var(--zx-line);
  border-left:4px solid var(--zx-blue);
  border-radius:var(--zx-r-md);
  box-shadow:var(--zx-shadow);
  padding:14px 16px;
  margin-bottom:8px;
  display:flex;
  align-items:flex-start;
  gap:16px;
  transition:box-shadow .14s ease, transform .14s ease;
}
.zx-card:hover, .zx-training-card:hover { box-shadow:var(--zx-shadow-lift); }
.zx-card.zx-away { border-left-color:var(--zx-orange); }
.zx-card.zx-bye, .zx-training-card.zx-cancelled {
  border-left-color:var(--zx-muted); background:var(--zx-bye-bg); box-shadow:none;
}
.zx-time {
  font-weight:700; font-size:16px; color:var(--zx-navy);
  min-width:52px; font-variant-numeric:tabular-nums; padding-top:1px;
}
.zx-details { flex:1; min-width:0; }
.zx-top-line { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:2px; }
.zx-ha-pill {
  font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; background:var(--zx-blue-wash);
  color:var(--zx-blue-strong); border:1px solid var(--zx-blue-line);
}
.zx-card.zx-away .zx-ha-pill { background:var(--zx-orange-tint); color:var(--zx-orange); border-color:#F3D6C6; }
.zx-prov {
  font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--zx-gold-ink); background:var(--zx-gold-tint);
  border:1px solid var(--zx-gold-line); padding:3px 8px; border-radius:999px;
}
.zx-opponent { font-weight:650; font-size:15.5px; margin:2px 0 3px; color:var(--zx-ink); letter-spacing:-.005em; }
.zx-meta { font-size:12.5px; color:var(--zx-muted); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.zx-venue-name { color:var(--zx-ink); font-weight:500; }
/* Competition names are long and are the least useful thing on the card,
   so they get their own quiet line rather than trailing off the end of
   the venue line and wrapping mid-phrase. */
.zx-comp { font-size:11.5px; color:var(--zx-muted); margin-top:3px; }
.zx-empty { color:var(--zx-muted); font-size:13.5px; }
.zx-section { display:none; }

/* Map links repeat on every single fixture, so they must not shout. Quiet
   until hovered, and never blue-underlined the way the theme wants. */
.zx-wrap .zx-map-link {
  color:var(--zx-muted); text-decoration:none; font-weight:500; font-size:12px;
  border-bottom:1px dotted var(--zx-blue-line); padding-bottom:1px;
}
.zx-wrap .zx-map-link:hover { color:var(--zx-blue-strong); border-bottom-color:var(--zx-blue); }

/* Link out to the league's own tables. Sits at the foot of the fixture
   list, quiet enough not to compete with the fixtures themselves but
   findable by a parent who came looking for standings. */
.zx-league-note {
  margin-top:34px; padding:18px 20px; border:1px solid var(--zx-line);
  border-radius:var(--zx-r-md); background:var(--zx-bg);
}
.zx-league-note p { margin:0 0 12px; font-size:13.5px; color:var(--zx-muted); }
.zx-league-note p:last-child { margin-bottom:0; }
.zx-league-note strong { color:var(--zx-navy); }

.zx-settings-card h5 {
  margin:0 0 8px; font-size:10.5px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--zx-muted); font-weight:700;
}
.zx-url-input { width:100%; max-width:520px; height:var(--zx-control-h); padding:0 11px; }
textarea.zx-url-input { height:auto; padding:9px 11px; resize:vertical; }

/* What someone applied for, and what a person currently is. */
.zx-role-badge {
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.03em;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
  background:var(--zx-blue-wash); color:var(--zx-blue-strong); border:1px solid var(--zx-blue-line);
}
.zx-role-badge.is-admin { background:var(--zx-gold-tint); color:var(--zx-gold-ink); border-color:var(--zx-gold-line); }
.zx-role-badge.is-owner { background:var(--zx-bye-bg); color:var(--zx-muted); border-color:var(--zx-line); }

/* Choosing rep or club admin on the public application form. */
.zx-role-choice { display:flex; flex-direction:column; gap:10px; }
.zx-role-option {
  display:flex; align-items:flex-start; gap:11px; padding:14px 16px;
  border:1px solid var(--zx-blue-line); border-radius:var(--zx-r-md);
  background:var(--zx-surface); cursor:pointer; font-weight:400;
  transition:border-color .12s ease, background .12s ease;
}
.zx-role-option:hover { border-color:var(--zx-blue); background:var(--zx-blue-wash); }
.zx-role-option:has(input:checked) { border-color:var(--zx-blue); background:var(--zx-blue-wash); }
.zx-role-option input { margin:3px 0 0; flex:0 0 auto; }
.zx-role-option span { display:block; font-size:13px; color:var(--zx-muted); line-height:1.5; }
.zx-role-option strong { display:block; font-size:14.5px; color:var(--zx-navy); margin-bottom:2px; }

/* --------------------------------------------------------- Section type */

.zx-team-block, .zx-rep-team-block { margin-bottom:34px; }
.zx-team-heading {
  font-size:17px; font-weight:700; color:var(--zx-navy); letter-spacing:-.01em;
  border-bottom:2px solid var(--zx-blue-line); padding-bottom:8px; margin:0 0 14px;
}
.zx-sub-heading {
  font-size:11px; font-weight:700; color:var(--zx-muted);
  margin:22px 0 8px; text-transform:uppercase; letter-spacing:.09em;
}
.zx-hint { font-size:13px; color:var(--zx-muted); margin:0 0 12px; max-width:70ch; }

/* ------------------------------------------------------------- Controls */

.zx-wrap input[type=text], .zx-wrap input[type=email], .zx-wrap input[type=date],
.zx-wrap input[type=time], .zx-wrap input[type=password], .zx-wrap select, .zx-wrap textarea {
  font-family:inherit;
  font-size:14px;
  color:var(--zx-ink);
  background:var(--zx-surface);
  border:1px solid #C9DCEC;
  border-radius:var(--zx-r-sm);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.zx-wrap input:focus, .zx-wrap select:focus, .zx-wrap textarea:focus {
  outline:none; border-color:var(--zx-blue); box-shadow:var(--zx-ring);
}
.zx-wrap input::placeholder, .zx-wrap textarea::placeholder { color:#9AAABB; }
.zx-wrap input[type=checkbox] { accent-color:var(--zx-blue); width:16px; height:16px; cursor:pointer; }

/* -------------------------------------------------------------- Buttons */

.zx-wrap .zx-btn-save, .zx-wrap .zx-btn-delete, .zx-wrap .zx-btn-undo, .zx-wrap .zx-btn-link {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:inherit; font-size:13px; font-weight:600; line-height:1;
  padding:9px 14px; border-radius:var(--zx-r-sm); border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.zx-wrap .zx-btn-save { background:var(--zx-blue); color:#fff; }
.zx-wrap .zx-btn-save:hover { background:var(--zx-blue-strong); color:#fff; }
.zx-wrap .zx-btn-delete { background:var(--zx-surface); color:var(--zx-orange); border-color:#EFD3C4; }
.zx-wrap .zx-btn-delete:hover { background:var(--zx-orange-tint); border-color:var(--zx-orange); }
.zx-wrap .zx-btn-undo { background:var(--zx-surface); color:var(--zx-orange); border-color:#EFD3C4; padding:6px 12px; font-size:12px; }
.zx-wrap .zx-btn-undo:hover { background:var(--zx-orange-tint); border-color:var(--zx-orange); }
.zx-wrap .zx-btn-link { background:var(--zx-blue); color:#fff; }
.zx-wrap .zx-btn-link:hover { background:var(--zx-blue-strong); color:#fff; }
.zx-wrap .zx-btn-large { padding:12px 22px; font-size:14.5px; border-radius:8px; }
.zx-wrap .zx-btn-save:focus-visible, .zx-wrap .zx-btn-delete:focus-visible,
.zx-wrap .zx-btn-undo:focus-visible, .zx-wrap .zx-btn-link:focus-visible { outline:none; box-shadow:var(--zx-ring); }

/* ------------------------------------------------------- Console tabs */

.zx-tabs {
  display:flex; flex-wrap:wrap; gap:2px; margin:0 0 24px;
  border-bottom:1px solid var(--zx-line);
}
.zx-wrap .zx-tab {
  display:inline-flex; align-items:center; gap:7px;
  padding:11px 16px; font-size:13.5px; font-weight:600;
  color:var(--zx-muted); text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.zx-wrap .zx-tab:hover { color:var(--zx-navy); background:var(--zx-blue-wash); border-radius:8px 8px 0 0; }
.zx-wrap .zx-tab.is-on { color:var(--zx-navy); border-bottom-color:var(--zx-blue); }
.zx-tab-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:19px; height:19px; padding:0 6px; border-radius:999px;
  background:var(--zx-orange); color:#fff; font-size:11px; font-weight:700;
}

/* The admin's own row, shown only inside "Club admin". Pills rather than
   tabs so it reads as a second level, and it scrolls sideways rather than
   wrapping onto another line. */
.zx-subtabs { display:flex; gap:8px; margin:-10px 0 20px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
.zx-wrap .zx-subtab {
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  min-height:40px; padding:0 16px; border-radius:999px;
  font-size:14px; font-weight:600; text-decoration:none;
  color:var(--zx-muted); background:var(--zx-surface); border:1px solid var(--zx-blue-line);
}
.zx-wrap .zx-subtab.is-on { background:var(--zx-blue); border-color:var(--zx-blue); color:#fff; }

.zx-tab-filters { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; }
.zx-wrap .zx-chip-link {
  display:inline-block; padding:6px 14px; border-radius:999px;
  font-size:12.5px; font-weight:600; text-decoration:none;
  color:var(--zx-muted); background:var(--zx-surface); border:1px solid var(--zx-blue-line);
}
.zx-wrap .zx-chip-link:hover { border-color:var(--zx-blue); color:var(--zx-navy); }
.zx-wrap .zx-chip-link.is-on { background:var(--zx-blue); color:#fff; border-color:var(--zx-blue); }

/* --------------------------------------------------------- Data tables */

/* Always scrollable, not just on phones. The fixture editor has nine
   columns; on any screen too narrow for them the honest answer is a
   scrollbar, not fields squeezed to 80px where "Station Road Millstreet"
   renders as "Station R". */
.zx-table-scroll {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 -2px;
  padding:2px;
  border-radius:var(--zx-r-md);
}
.zx-edit-table {
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:13.5px; margin-bottom:10px; min-width:1180px;
  background:var(--zx-surface); border:1px solid var(--zx-line); border-radius:var(--zx-r-md);
}
.zx-edit-table th {
  text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--zx-muted); padding:10px 8px;
  background:var(--zx-bg); border-bottom:1px solid var(--zx-line); white-space:nowrap;
}
.zx-edit-table th:first-child { border-top-left-radius:var(--zx-r-md); }
.zx-edit-table th:last-child { border-top-right-radius:var(--zx-r-md); }
.zx-edit-table td { padding:7px 8px; vertical-align:middle; border-bottom:1px solid var(--zx-line); }
.zx-edit-table tbody tr:last-child td { border-bottom:none; }
.zx-edit-table tbody tr:hover td { background:#FBFDFF; }
/* 13px, not the 14px used elsewhere: at 14px "Station Road Millstreet"
   clips inside a 174px column, and widening the column is what made the
   table overflow in the first place. */
.zx-edit-table input[type=text], .zx-edit-table input[type=date],
.zx-edit-table input[type=time], .zx-edit-table select {
  width:100%; height:34px; padding:0 8px; font-size:13px;
}
.zx-edit-table select { padding-right:4px; }
/* Give the wordy columns room so nothing truncates. */
/* Fixed column widths rather than letting the browser distribute space.
   Left to itself it gave Date 168px (the native picker's intrinsic width)
   and Competition 186px, overflowing the container by ~70px and pushing
   Save and Delete under the pinned actions column. These add up to
   1202px, which fits the 1240px working width with room to spare. */
.zx-fixtures-table { table-layout:fixed; min-width:1206px; }
.zx-fixtures-table th:nth-child(1), .zx-fixtures-table td:nth-child(1) { width:148px; }
.zx-fixtures-table th:nth-child(2), .zx-fixtures-table td:nth-child(2) { width:132px; }
.zx-fixtures-table th:nth-child(3), .zx-fixtures-table td:nth-child(3) { width:88px;  }
.zx-fixtures-table th:nth-child(4), .zx-fixtures-table td:nth-child(4) { width:148px; }
.zx-fixtures-table th:nth-child(5), .zx-fixtures-table td:nth-child(5) { width:174px; }
.zx-fixtures-table th:nth-child(6), .zx-fixtures-table td:nth-child(6) { width:174px; }
.zx-fixtures-table th:nth-child(7), .zx-fixtures-table td:nth-child(7),
.zx-fixtures-table th:nth-child(8), .zx-fixtures-table td:nth-child(8) { width:96px; text-align:center; }
.zx-fixtures-table th:nth-child(9), .zx-fixtures-table td:nth-child(9) { width:150px; }

.zx-training-table { table-layout:fixed; min-width:992px; }
.zx-training-table th:nth-child(1), .zx-training-table td:nth-child(1) { width:200px; }
.zx-training-table th:nth-child(2), .zx-training-table td:nth-child(2) { width:120px; }
.zx-training-table th:nth-child(3), .zx-training-table td:nth-child(3) { width:200px; }
.zx-training-table th:nth-child(4), .zx-training-table td:nth-child(4) { width:220px; }
.zx-training-table th:nth-child(5), .zx-training-table td:nth-child(5) { width:96px; text-align:center; }
.zx-training-table th:nth-child(6), .zx-training-table td:nth-child(6) { width:156px; }

.zx-col-tick { text-align:center; }
.zx-new-row td { background:var(--zx-blue-wash); }
.zx-new-row:hover td { background:var(--zx-blue-wash); }
.zx-hidden-form { display:none; }

/* The actions column was pinned to the right edge so Save could never
   scroll out of view. That turned out to be worse than the problem: on a
   narrower screen the pinned column sits ON TOP of Competition and the
   two tick boxes, hiding real data at rest rather than only while
   scrolling. A plain scrollbar hides nothing and is what people expect
   from a wide table, so the column scrolls with everything else. */
.zx-row-actions { display:flex; gap:6px; white-space:nowrap; }

/* The training Day cell stacks a weekday dropdown over a date box. Left
   unconstrained it stretches the column far wider than the content needs
   and squeezes everything after it. */
.zx-edit-table select[name="day"],
.zx-edit-table select[name="day"] ~ input[type=date] { width:100%; max-width:186px; }
.zx-edit-table select[name="day"] { margin-bottom:5px; }

/* --------------------------------------------------------- Console misc */

.zx-console-table { min-width:0; }
.zx-console-table td { vertical-align:top; }
.zx-console-table input[type=text], .zx-console-table textarea {
  width:100%; padding:7px 9px; font-size:13.5px;
}
.zx-console-table input[type=text] { height:34px; padding:0 9px; }
.zx-console-table textarea { min-width:150px; resize:vertical; }
.zx-console-table .zx-muted-cell { display:block; font-size:12px; color:var(--zx-muted); font-style:normal; }
.zx-console-table .zx-app-message { max-width:280px; font-size:12.5px; color:var(--zx-muted); }
/* Venue names are long ("Midleton College Cricket Pitch") and were
   truncating; coordinates are short and fixed-length. */
.zx-console-table input[name^="venue_name"] { min-width:230px; }
.zx-console-table input[name^="venue_lat"],
.zx-console-table input[name^="venue_lng"] { max-width:150px; font-variant-numeric:tabular-nums; }
.zx-console-table input[name^="phone_"] { min-width:150px; }
.zx-inline-form { display:flex; gap:6px; }
.zx-console-actions { margin-top:20px; }

/* ------------------------------------------------------- Teams tab cards */

.zx-team-card {
  background:var(--zx-surface); border:1px solid var(--zx-line);
  border-radius:var(--zx-r-md); padding:18px 20px; margin-bottom:16px;
  box-shadow:var(--zx-shadow);
}
.zx-team-card-new { background:var(--zx-bg); border-style:dashed; border-color:var(--zx-blue-line); box-shadow:none; }
.zx-team-card-head {
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px;
  padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--zx-line);
}
.zx-team-name {
  flex:0 1 240px; height:var(--zx-control-h); padding:0 10px;
  font-size:15px; font-weight:650; color:var(--zx-navy);
}
.zx-team-counts { font-size:12.5px; color:var(--zx-muted); font-variant-numeric:tabular-nums; }
.zx-team-remove { margin-left:auto; font-size:12.5px; color:var(--zx-muted); }
.zx-team-remove label { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }

.zx-team-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:28px; }
@media (max-width:820px) { .zx-team-grid { grid-template-columns:1fr; gap:20px; } }
.zx-team-grid h5 {
  margin:0 0 10px; font-size:10.5px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--zx-muted); font-weight:700;
}
.zx-fact-label { margin:14px 0 5px; font-size:12px; font-weight:700; color:var(--zx-navy); }
.zx-fact-label:first-of-type { margin-top:0; }
.zx-fact-label .zx-muted-cell { display:inline; font-weight:400; font-style:normal; }
.zx-team-facts .zx-empty { margin:0; font-size:12.5px; }
.zx-chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:5px; }
/* Deliberately NOT .zx-chip: that class is the public filter control and
   sharing it silently restyled the fixtures page. */
.zx-fact-chip {
  font-size:12px; line-height:1.4; padding:4px 10px; border-radius:var(--zx-r-sm);
  background:var(--zx-bg); border:1px solid var(--zx-blue-line); color:var(--zx-ink);
}
.zx-fact-chip.is-home { background:var(--zx-gold-tint); border-color:var(--zx-gold-line); font-weight:650; color:var(--zx-gold-ink); }
.zx-team-extras textarea { width:100%; padding:8px 10px; font-size:13.5px; resize:vertical; }
.zx-field-label { display:block; margin:12px 0 4px; font-size:12px; font-weight:700; color:var(--zx-navy); }
.zx-team-extras .zx-field-label:first-of-type { margin-top:0; }

/* ------------------------------------------------------- Change history */

.zx-history-list { list-style:none; margin:0 0 8px; padding:0; border:1px solid var(--zx-line); border-radius:var(--zx-r-md); background:var(--zx-surface); }
.zx-history-item {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:11px 14px; border-bottom:1px solid var(--zx-line); font-size:13px;
}
.zx-history-item:last-child { border-bottom:none; }
.zx-history-time { color:var(--zx-muted); white-space:nowrap; min-width:96px; font-variant-numeric:tabular-nums; font-size:12.5px; }
.zx-history-who { font-weight:650; color:var(--zx-navy); white-space:nowrap; }
.zx-history-desc { flex:1 1 300px; color:var(--zx-ink); min-width:0; }
.zx-history-item .zx-btn-undo { margin-left:auto; }

/* -------------------------------------------------- Login / apply / boxes */

.zx-login-box {
  background:var(--zx-surface); border:1px solid var(--zx-line);
  border-radius:var(--zx-r-md); padding:24px; box-shadow:var(--zx-shadow);
}
.zx-login-box input[type=text], .zx-login-box input[type=password] { width:100%; height:var(--zx-control-h); padding:0 11px; }
.zx-login-box label { display:block; font-weight:600; font-size:13px; margin-bottom:6px; color:var(--zx-navy); }
.zx-login-box p { margin:0 0 14px; }
.zx-muted { color:var(--zx-muted); font-size:13.5px; }

.zx-login-alt { margin-top:18px; padding:18px 20px; border:1px dashed var(--zx-blue-line); border-radius:var(--zx-r-md); background:var(--zx-bg); }
.zx-login-alt p { margin:0 0 12px; }
.zx-login-alt p:last-child { margin-bottom:0; }
.zx-refer-box { margin-top:30px; padding-top:18px; border-top:1px solid var(--zx-line); }
.zx-refer-box p { margin:0 0 6px; }
.zx-refer-box p:last-child { margin-bottom:0; }
.zx-refer-box a { word-break:break-all; }

.zx-banner {
  border-radius:var(--zx-r-md); padding:13px 16px; font-size:14px;
  margin-bottom:20px; border:1px solid transparent;
}
.zx-banner-success { background:var(--zx-green-tint); color:var(--zx-green-ink); border-color:#C6DFC2; }
.zx-banner-error { background:var(--zx-orange-tint); color:var(--zx-orange); border-color:#EFD3C4; }
.zx-banner-warn { background:#fff6dc; color:#6b5200; border-color:#ecd98e; }

.zx-apply-form {
  background:var(--zx-surface); border:1px solid var(--zx-line);
  border-radius:var(--zx-r-md); padding:26px; box-shadow:var(--zx-shadow);
}
.zx-field { margin-bottom:20px; }
.zx-field label { display:block; font-weight:650; font-size:13.5px; margin-bottom:7px; color:var(--zx-navy); }
.zx-field input[type=text], .zx-field input[type=email] { width:100%; height:var(--zx-control-h); padding:0 12px; }
.zx-field textarea { width:100%; padding:10px 12px; }
.zx-checkbox-group { display:flex; flex-wrap:wrap; gap:8px; }
.zx-checkbox-item {
  display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500;
  background:var(--zx-surface); border:1px solid var(--zx-blue-line); border-radius:999px;
  padding:8px 15px 8px 12px; cursor:pointer; transition:border-color .12s ease, background .12s ease;
}
.zx-checkbox-item:hover { border-color:var(--zx-blue); background:var(--zx-blue-wash); }
.zx-checkbox-item:has(input:checked) { border-color:var(--zx-blue); background:var(--zx-blue-wash); font-weight:650; color:var(--zx-navy); }
.zx-checkbox-item input { margin:0; }

/* ----------------------------------------------------------- Rep guide */

.zx-guide-intro { font-size:16px; color:var(--zx-navy); margin:0 0 12px; line-height:1.6; }
.zx-guide h3 {
  color:var(--zx-navy); font-size:19px; font-weight:700; letter-spacing:-.01em;
  margin:38px 0 12px; padding-top:18px; border-top:1px solid var(--zx-line);
}
.zx-guide h3:first-of-type { border-top:none; padding-top:0; margin-top:24px; }
.zx-guide p { font-size:15px; line-height:1.65; color:var(--zx-ink); margin:0 0 13px; }
.zx-guide ol { margin:0 0 16px; padding-left:24px; }
.zx-guide ol li { font-size:15px; line-height:1.7; color:var(--zx-ink); margin-bottom:7px; padding-left:4px; }
.zx-guide ol li::marker { color:var(--zx-blue); font-weight:700; }
.zx-guide ul.zx-guide-tips { margin:0 0 16px; padding-left:22px; }
.zx-guide ul.zx-guide-tips li { font-size:15px; line-height:1.7; margin-bottom:9px; }
.zx-guide-shot {
  display:block; max-width:100%; height:auto; border:1px solid var(--zx-line);
  border-radius:var(--zx-r-md); margin:16px 0 7px; box-shadow:var(--zx-shadow);
}
.zx-guide-shot-narrow { max-width:360px; }
.zx-guide-caption { font-size:12.5px; color:var(--zx-muted); font-style:italic; margin:0 0 26px; }
.zx-guide-tip {
  background:var(--zx-gold-tint); border:1px solid var(--zx-gold-line); border-left:4px solid #E4B93A;
  border-radius:var(--zx-r-sm); padding:12px 16px; font-size:14px; color:var(--zx-gold-ink); margin:0 0 18px;
}
.zx-guide-warn {
  background:var(--zx-orange-tint); border:1px solid #EFD3C4; border-left:4px solid var(--zx-orange);
  border-radius:var(--zx-r-sm); padding:12px 16px; font-size:14px; color:#8a3a17; margin:0 0 18px;
}

/* ------------------------------------------------------- Rep directory */

.zx-directory-table {
  width:100%; border-collapse:separate; border-spacing:0; font-size:14px;
  background:var(--zx-surface); border:1px solid var(--zx-line); border-radius:var(--zx-r-md);
}
.zx-directory-table th {
  text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--zx-muted); padding:12px 14px; background:var(--zx-bg); border-bottom:1px solid var(--zx-line);
}
.zx-directory-table td { padding:12px 14px; border-bottom:1px solid var(--zx-line); }
.zx-directory-table tbody tr:last-child td { border-bottom:none; }
.zx-muted-cell { color:var(--zx-muted); font-style:italic; }

/* -------------------------------------------------------------- Phones */

@media (max-width:640px) {
  .zx-wrap { font-size:14.5px; }
  .zx-header { padding:18px; gap:13px; border-radius:var(--zx-r-md); }
  .zx-crest { width:42px; }
  .zx-h1 { font-size:20px; }
  .zx-card, .zx-training-card { padding:12px 14px; gap:12px; }
  .zx-time { font-size:15px; min-width:46px; }
  .zx-team-card { padding:14px 15px; }
  .zx-apply-form, .zx-login-box { padding:18px; }
  .zx-history-item { gap:6px 10px; }
  .zx-history-item .zx-btn-undo { margin-left:0; }
}

/* ---------------------------------------------------------------------
 * Bulk fixture import
 *
 * Collapsed by default. The everyday job is editing one row in the table
 * above; pasting a whole season is a start-of-year job, so it sits out
 * of the way until someone opens it rather than putting a large empty
 * textarea between the fixtures and the training table every week.
 * ------------------------------------------------------------------- */
.zx-wrap .zx-import {
  margin:0 0 26px;
  border:1px solid var(--zx-line);
  border-radius:var(--zx-r-md);
  background:var(--zx-surface);
  box-shadow:var(--zx-shadow);
}
.zx-wrap .zx-import > summary {
  cursor:pointer;
  padding:11px 14px;
  font-weight:600;
  font-size:14px;
  color:var(--zx-navy);
  border-radius:var(--zx-r-md);
  list-style:none;
}
.zx-wrap .zx-import > summary::-webkit-details-marker { display:none; }
.zx-wrap .zx-import > summary::before {
  content:"+";
  display:inline-block;
  width:1.1em;
  font-weight:700;
  color:var(--zx-blue);
}
.zx-wrap .zx-import[open] > summary::before { content:"\2212"; }
.zx-wrap .zx-import > summary:hover { background:var(--zx-blue-wash); }
.zx-wrap .zx-import > summary:focus-visible { outline:none; box-shadow:var(--zx-ring); }
.zx-import-body { padding:2px 14px 16px; border-top:1px solid var(--zx-line); }
.zx-import-cols { margin:0 0 10px; }
.zx-import-cols code {
  display:inline-block;
  background:var(--zx-blue-wash);
  border:1px solid var(--zx-blue-line);
  border-radius:var(--zx-r-sm);
  padding:4px 8px;
  font-size:13px;
  color:var(--zx-navy);
}
.zx-wrap textarea.zx-import-text {
  width:100%;
  box-sizing:border-box;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13px;
  line-height:1.5;
  padding:10px;
  margin:0 0 10px;
  border:1px solid var(--zx-line);
  border-radius:var(--zx-r-sm);
  background:var(--zx-bg);
  color:var(--zx-ink);
  white-space:pre;
  overflow-x:auto;
}
.zx-wrap textarea.zx-import-text:focus { outline:none; box-shadow:var(--zx-ring); border-color:var(--zx-blue); }

/* ---------------------------------------------------------------------
 * Save all
 *
 * Sits directly under its table, sticky to the bottom of the viewport
 * while that table is on screen, so a rep working down a long fixture
 * list can always see the button without scrolling back for it.
 * ------------------------------------------------------------------- */
.zx-saveall-bar {
  position:sticky;
  bottom:0;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 22px;
  padding:10px 12px;
  background:var(--zx-blue-wash);
  border:1px solid var(--zx-blue-line);
  border-radius:var(--zx-r-md);
}
.zx-saveall-bar .zx-hint { margin:0; }
.zx-wrap .zx-saveall-bar .zx-btn-save { font-weight:600; padding-left:18px; padding-right:18px; }

/* ---------------------------------------------------------------------
 * Team badge on a fixture card
 *
 * With eleven teams on one page, a card that only says "AWAY vs Everton"
 * doesn't tell a parent whose match it is. The badge carries the team's
 * full label, which already names the section ("U12 Boys", "U12 Girls"),
 * and the tint repeats that distinction. Colour is never the only signal:
 * the words are there whether or not anyone can tell the two tints apart.
 * ------------------------------------------------------------------- */
.zx-team-pill {
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--zx-blue-line);
  background:var(--zx-blue-wash);
  color:var(--zx-navy);
  white-space:nowrap;
}
.zx-team-pill--girls {
  background:var(--zx-violet-tint);
  border-color:var(--zx-violet-line);
  color:var(--zx-violet-ink);
}

/* ---------------------------------------------------------------------
 * League links
 *
 * One block per filter, only the selected one shown; see the generated
 * rules in public-fixtures.php. Hidden by default so that nothing but the
 * active block is ever visible, matching how .zx-section works.
 * ------------------------------------------------------------------- */
.zx-league-block { display:none; }
.zx-league-list { list-style:none; margin:0; padding:0; }
.zx-league-list li {
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  padding:7px 0;
  border-top:1px solid var(--zx-blue-line);
  font-size:13.5px;
}
.zx-league-list li:first-child { border-top:0; }
.zx-league-team { font-weight:600; color:var(--zx-navy); min-width:11em; }
.zx-league-list a { color:var(--zx-blue-strong); text-decoration:underline; }
.zx-league-list a:hover { color:var(--zx-navy); }

/* ---------------------------------------------------------------------
 * Earlier fixtures
 *
 * Matches already played are hidden by default: someone opening the page
 * wants to know about Saturday, not about three weeks ago. They are still
 * there behind a toggle rather than deleted, so the season stays on
 * record. The control hides itself when there is nothing behind it.
 * ------------------------------------------------------------------- */
.zx-past-bar { display:flex; justify-content:flex-end; margin:0 0 4px; }
.zx-past-toggle {
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  color:var(--zx-blue-strong);
  padding:5px 10px;
  border-radius:var(--zx-r-sm);
  border:1px solid transparent;
  user-select:none;
}
.zx-past-toggle:hover { background:var(--zx-blue-wash); border-color:var(--zx-blue-line); }
/* The control itself is visually hidden and lives outside this label, so
   focus has to be reflected across from it by hand. */
#zx-show-past:focus-visible ~ .zx-past-bar .zx-past-toggle { box-shadow:var(--zx-ring); }

/* A revealed past fixture is visibly finished rather than just older, so
   nobody mistakes one for something still to come. */
.zx-card.zx-past { opacity:.62; }
.zx-card.zx-past .zx-ha-pill { filter:saturate(.55); }
.zx-date-heading.zx-past .zx-day { color:var(--zx-muted); }

/* ---------------------------------------------------------------------
 * Recent Changes, collapsed
 *
 * The log is long by design: one "Save all changes" writes a line per
 * fixture, so an afternoon's work can run to thirty entries and push the
 * next team's table off the screen. Three are shown, the rest are one
 * click away. Checkbox-driven rather than scripted, the same way the
 * public page's filters work.
 * ------------------------------------------------------------------- */
.zx-history-item.zx-history-more { display:none; }
.zx-history-toggle-input:checked ~ .zx-history-list .zx-history-more { display:flex; }
.zx-history-toggle-input:not(:checked) ~ .zx-history-list .zx-history-last-visible { border-bottom:none; }
.zx-history-expand { margin:0 0 22px; }
.zx-history-expand label {
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  color:var(--zx-blue-strong);
  padding:5px 10px;
  border-radius:var(--zx-r-sm);
  border:1px solid transparent;
  user-select:none;
}
.zx-history-expand label:hover { background:var(--zx-blue-wash); border-color:var(--zx-blue-line); }
.zx-history-toggle-input:focus-visible ~ .zx-history-expand label { box-shadow:var(--zx-ring); }
.zx-history-toggle-input:checked ~ .zx-history-expand .zx-history-show { display:none; }
.zx-history-toggle-input:not(:checked) ~ .zx-history-expand .zx-history-hide { display:none; }

/* ---------------------------------------------------------------------
 * Squad and attendance
 * ------------------------------------------------------------------- */
.zx-att-form { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:10px 0 6px; }
.zx-att-opt {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  padding:4px 10px;
  border:1px solid var(--zx-line);
  border-radius:999px;
  background:var(--zx-surface);
  cursor:pointer;
  white-space:nowrap;
}
.zx-att-opt:hover { border-color:var(--zx-blue-line); background:var(--zx-blue-wash); }
.zx-att-opt:has(input:checked) {
  border-color:var(--zx-blue);
  background:var(--zx-blue-wash);
  color:var(--zx-navy);
  font-weight:600;
}
.zx-inline-form { margin:10px 0 0; }

/* Share links: same weight as "Add to calendar", not a call to action.
   The point of the page is the fixture, not the sharing of it. */
.zx-share-link { color:var(--zx-green-ink); text-decoration:underline; font-weight:600; }
.zx-share-link:hover { color:var(--zx-navy); }
.zx-att-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:10px 0 0; }

/* Dashboard team filter. The chips are the public page's, reused; this
   only positions the bar and keeps a hidden block genuinely hidden
   without taking it out of the form. */
.zx-wrap .zx-team-blocks { margin:0; }
.zx-wrap .zx-filter-bar + .zx-team-blocks { margin-top:6px; }
.zx-history-item .zx-inline-form { margin:0; margin-left:auto; }
.zx-add-team { max-width:150px; font-size:12.5px; }
.zx-team-picker { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }

/* The "what to include" box styles itself; see zarcos_share_options_style()
   in the plugin file. It is printed into the footer together with the
   markup it dresses, so the box can never arrive on a page ahead of its
   own appearance. This file is uploaded separately from the plugin and
   has been out of step with it before. */

/* ---------------------------------------------------------------------
 * Phone comfort
 *
 * People use this with a thumb. Every control is at least 44px tall, the
 * small print is 14px, and the tab row is one line that scrolls rather
 * than three lines that wrap. Checked by tools/tests/browser/check_tap_targets.js.
 * ------------------------------------------------------------------- */
@media (max-width:640px) {
  .zx-tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:18px; }
  .zx-wrap .zx-tab { flex:0 0 auto; min-height:48px; padding:0 6px; font-size:14px; white-space:nowrap; }
  .zx-wrap .zx-btn-save, .zx-wrap .zx-btn-delete, .zx-wrap .zx-btn-undo,
  .zx-wrap .zx-btn-link, .zx-wrap .zx-btn-large { min-height:44px; font-size:15px; }
  .zx-wrap .zx-chip, .zx-wrap .zx-chip-link { min-height:44px; display:inline-flex; align-items:center; font-size:14px; }
  .zx-wrap .zx-subtab { min-height:44px; }
  .zx-wrap input[type=text], .zx-wrap input[type=email], .zx-wrap input[type=tel],
  .zx-wrap input[type=date], .zx-wrap input[type=time], .zx-wrap input[type=number],
  .zx-wrap input[type=password], .zx-wrap select, .zx-wrap textarea { min-height:44px; font-size:16px; }
  .zx-wrap .zx-map-link, .zx-wrap .zx-share-link { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
  .zx-wrap .zx-meta, .zx-wrap .zx-comp, .zx-wrap .zx-hint { font-size:14px; }
  .zx-wrap input[type=checkbox], .zx-wrap input[type=radio] { width:22px; height:22px; }
  /* Share is a button you can hit, not a line of small print. */
  .zx-wrap .zx-share-link { padding:0 16px; margin-top:4px; border:1px solid var(--zx-blue-line); border-radius:999px; text-decoration:none; font-weight:600; background:var(--zx-surface); }
  /* The save bar stays out of the way: the button, not a paragraph. */
  .zx-saveall-bar .zx-hint { display:none; }
}

/* The team drop-down. Hidden until JavaScript has run, because without
   JavaScript the buttons are the only way to choose; then it replaces them. */
.zx-team-pick { display:none; align-items:center; gap:10px; margin:0 0 16px; }
.zx-wrap.zx-js .zx-team-pick { display:flex; }
.zx-wrap.zx-js .zx-filter-bar { display:none; }
.zx-team-pick-label { font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--zx-muted); }
.zx-wrap .zx-team-select { flex:1; min-height:48px; font-size:16px; font-weight:600; color:var(--zx-navy); border:1px solid var(--zx-blue-line); border-radius:var(--zx-r-md); background:var(--zx-surface); padding:0 12px; }

/* Long explanations sit behind a small "Help" link instead of in front of the controls. */
.zx-wrap .zx-help { margin:4px 0 12px; }
.zx-wrap .zx-help > summary { display:inline-flex; align-items:center; min-height:44px; cursor:pointer; font-size:14px; font-weight:600; color:var(--zx-blue-strong); list-style:none; }
.zx-wrap .zx-help > summary::-webkit-details-marker { display:none; }
.zx-wrap .zx-help > summary::before { content:"?"; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; margin-right:8px; border-radius:50%; border:1.5px solid var(--zx-blue-strong); font-size:12px; font-weight:700; }
.zx-wrap .zx-help[open] > summary { margin-bottom:2px; }

/* ---------------------------------------------------------------------
 * Squad on a phone: one closed line per child (name, parent), tap to open
 * their fields. On a desktop this is still the wide table; the summary
 * cell is only for phones.
 * ------------------------------------------------------------------- */
.zx-squad-table .zx-row-summary { display:none; }
@media (max-width:640px) {
  .zx-wrap .zx-squad-table { min-width:0; display:block; border:0; background:none; margin-bottom:0; }
  .zx-squad-table thead { display:none; }
  .zx-squad-table tbody { display:flex; flex-direction:column; }
  .zx-squad-table tr { display:grid; grid-template-columns:1fr; gap:10px; padding:12px; margin:0 0 10px; border:1px solid var(--zx-line); border-radius:12px; background:var(--zx-surface); }
  .zx-squad-table td { display:block; width:auto !important; padding:0; border:0; min-width:0; background:none !important; }
  .zx-squad-table td[data-label]::before { content:attr(data-label); display:block; margin-bottom:3px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--zx-muted); }
  .zx-squad-table td input[type=text], .zx-squad-table td input[type=email], .zx-squad-table td select { width:100%; max-width:none; box-sizing:border-box; }
  .zx-squad-table tr:not(.is-open) td:not(.zx-row-summary) { display:none; }
  .zx-squad-table .zx-row-summary { display:block; order:-1; }
  .zx-squad-table tr.is-open .zx-row-summary { padding-bottom:4px; border-bottom:1px solid var(--zx-line); }
  .zx-squad-table .zx-row-actions { display:flex; gap:10px; }
  .zx-squad-table .zx-row-actions button { min-height:44px; flex:1; }
  .zx-row-toggle { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:0; border:0; background:none; font:inherit; text-align:left; cursor:pointer; color:inherit; }
  .zx-row-toggle .zx-rs-when { flex:0 0 auto; font-weight:700; color:var(--zx-navy); }
  .zx-row-toggle .zx-rs-what { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--zx-muted); }
  .zx-row-toggle .zx-rs-edit { flex:0 0 auto; font-size:13px; font-weight:600; color:var(--zx-blue-strong); }
  .zx-squad-table tr.is-open .zx-rs-edit::after { content:" \25B4"; }
  .zx-squad-table tr:not(.is-open) .zx-rs-edit::after { content:" \25BE"; }
}

/* Admin screens: the everyday part first, the detail one tap away. */
.zx-wrap .zx-team-more, .zx-wrap .zx-more-settings { margin:8px 0 14px; }
.zx-wrap .zx-team-more > summary, .zx-wrap .zx-more-settings > summary {
  display:flex; align-items:center; min-height:44px; padding:0 14px; cursor:pointer; list-style:none;
  font-size:14px; font-weight:600; color:var(--zx-blue-strong);
  background:var(--zx-blue-wash); border:1px solid var(--zx-blue-line); border-radius:var(--zx-r-md);
}
.zx-wrap .zx-team-more > summary::-webkit-details-marker, .zx-wrap .zx-more-settings > summary::-webkit-details-marker { display:none; }
.zx-wrap .zx-team-more > summary::after, .zx-wrap .zx-more-settings > summary::after { content:"\25BE"; margin-left:auto; }
.zx-wrap .zx-team-more[open] > summary::after, .zx-wrap .zx-more-settings[open] > summary::after { content:"\25B4"; }
.zx-wrap .zx-team-more[open] > summary, .zx-wrap .zx-more-settings[open] > summary { margin-bottom:12px; }