/* Leagues & Invites (ch. 16 E-22) — the modal's own rules, on the dark
   .mm-modal / .mm-modal-card shell dashboard.css already draws for Alerts.
   Linked by src/assets.js as `dashboard-leagues-modal.css`, AFTER
   dashboard.css, on the terms hero.css and deck.css are: its rules lean on
   `.button`, `.linklike` and the modal shell there and follow them in the
   cascade. Its own file because dashboard.css sits on its ratchet
   (tests/unit/monolith-budget.test.mjs). No new colour: the dot is the chip's
   `--good` token, the hollow one its `.off`, the error line is `--bad`.
   Nothing outside #leagues-modal uses these classes. */

#leagues-modal .mm-lead {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 6px 0 16px;
}
/* Every control in the modal is 44px tall, Close included. */
#leagues-modal .button {
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 700;
  justify-content: center;
  white-space: nowrap;
}
#leagues-modal .linklike {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: underline;
  font: inherit;
  font-size: 0.82rem;
}
#leagues-modal .mm-wide {
  width: 100%;
}

/* ---- the two sections ---- */
.mm-sec {
  margin: 0 0 18px;
}
.mm-sec-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 800;
  margin: 0 0 6px;
}
.mm-sec-head .n {
  color: var(--muted);
}
.mm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 0;
  border-top: 1px solid var(--border-soft);
}
.mm-sec-head + .mm-row {
  border-top: 0;
}
.mm-row .who {
  flex: 1 1 0;
  min-width: 0;
}
.mm-row .name {
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mm-row .name .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  flex: 0 0 auto;
}
.mm-row .name .dot.off {
  background: transparent;
  border: 1px solid var(--faint);
  width: 6px;
  height: 6px;
}
/* `.team` is also a scores-card class in dashboard.css, centred there; the
   user's team under a league name is a second line, left with the name. */
.mm-row .state,
.mm-row .team {
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 1px;
  text-align: left;
}
.mm-row .state.expired {
  color: var(--text);
}
.mm-row .act {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.mm-row .plat {
  color: var(--faint);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 6px;
}
/* An expired platform's leagues stay listed — the last good data — dimmed. */
.mm-row.needs {
  opacity: 0.55;
}
/* A hidden league stays listed so it can be shown again; its name is dimmed,
   its Show button is not. */
.mm-row.hidden-league .who {
  opacity: 0.55;
}
.mm-note .err {
  color: var(--bad);
}
.mm-note {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 8px 0 0;
}
.mm-empty {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 10px 0 4px;
}
.mm-err {
  color: var(--bad);
  font-size: 13px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 0;
}
/* The in-row confirm takes the row's full width at every width: a question
   and two buttons do not fit beside a name at 30rem either. */
.mm-row.asks {
  flex-wrap: wrap;
}
.mm-row.asks .act {
  flex: 1 1 100%;
}
.mm-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mm-confirm .q {
  color: var(--text);
  font-size: 0.82rem;
  flex: 1 1 100%;
}
.mm-confirm .q.err {
  color: var(--bad);
}
/* On a phone a wide action wraps under its name rather than squeezing it. */
@media (max-width: 400px) {
  .mm-row.wraps {
    flex-wrap: wrap;
  }
  .mm-row.wraps .act {
    flex: 1 1 100%;
  }
  .mm-row.wraps .act .button {
    flex: 0 0 auto;
  }
}
/* The skeleton, in the shape of the rows (§3.4: never a spinner). */
.sk {
  background: linear-gradient(
    90deg,
    var(--surface-2),
    var(--surface-3),
    var(--surface-2)
  );
  border-radius: 6px;
  height: 12px;
}
.sk.w1 {
  width: 62%;
  margin-bottom: 8px;
}
.sk.w2 {
  width: 38%;
}
.sk.b {
  width: 118px;
  height: 36px;
  border-radius: 8px;
}

/* ---- Connect ESPN, a step of the same modal ---- */
.mm-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.mm-step-head h3 {
  margin: 0;
  font-size: 1rem;
  white-space: nowrap;
}
.mm-step-head .linklike {
  margin-left: auto;
  text-align: right;
}
.mm-sec-lead {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0 0 12px;
}
/* The extension first (ch. 16 E-34): the store link, two
   steps, and what the modal does when the person comes back to the tab. */
.mm-ext-steps {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
  margin: 12px 0 0;
  padding-left: 1.2rem;
}
.mm-ext-steps strong {
  color: var(--text);
}
.mm-ext-wait {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
/* A device that cannot run a Chrome extension gets where ESPN connects
   instead of the store button. Keyed to the device, never the width: an
   iPad at 1024 cannot run it, and a narrow desktop window can. */
.mm-ext-touch {
  display: none;
}
@media (hover: none) and (pointer: coarse) {
  .mm-ext-desk {
    display: none;
  }
  .mm-ext-touch {
    display: block;
  }
}
/* Advanced: the native disclosure Waiver Scout draws (details.more), at the
   modal's 44px. */
details.mm-advanced {
  margin: 16px 0 0;
  border-top: 1px solid var(--border-soft);
}
details.mm-advanced > summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  overflow-wrap: anywhere;
}
details.mm-advanced > summary::-webkit-details-marker {
  display: none;
}
details.mm-advanced > summary::before {
  content: '▸';
  margin-right: 8px;
  color: var(--faint);
  flex: none;
}
details.mm-advanced[open] > summary::before {
  content: '▾';
}
details.mm-advanced > .mm-adv-body {
  padding: 4px 0 0;
}
.mm-privacy {
  margin-top: 14px;
}
/* The one link in a note (the privacy policy) was the browser's default blue
   on the dark card. */
#leagues-modal .mm-note a {
  color: var(--muted);
}
.mm-field {
  margin: 0 0 14px;
}
.mm-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 5px;
}
.mm-field input,
.mm-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
}
.mm-field textarea {
  font-family: monospace;
  font-size: 12px;
  resize: vertical;
  min-height: 60px;
}
.mm-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.tab-button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.tab-button.active {
  background: var(--accent-soft);
  color: var(--text);
  border-color: var(--accent);
}
.browser-instructions ol {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.7;
  margin: 0 0 14px;
  padding-left: 1.2rem;
}
.browser-instructions strong,
.browser-instructions code {
  color: var(--text);
}
.browser-instructions code {
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}
kbd {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 6px;
  font-family: monospace;
  font-size: 0.9em;
}
/* The foot of the LEAGUES lens when leagues are hidden (league-hide.js
   hiddenLeaguesFootHtml) — never above the answer (ch. 16 E-25). Quiet: it
   is a fact about the view, not an alert. */
.hidden-leagues-note {
  color: var(--muted);
  font-size: 13px;
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.hidden-leagues-note .link-button {
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
  padding: 0 4px;
}
/* Every league hidden (league-hide.js guideHiddenState): one box in place
   of the deck. The deck's markup still follows it — client.js renders it
   whole — so it is folded here rather than by a branch in client.js. */
.all-hidden-box {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 20px 16px;
  margin: 0 0 16px;
  text-align: center;
}
.all-hidden-box h2 {
  font-size: 1.1rem;
  margin: 0 0 6px;
}
.all-hidden-box p {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 14px;
}
.all-hidden-box ~ .verdict-strip,
.all-hidden-box ~ .lens-pills,
.all-hidden-box ~ .lens-wrap {
  display: none;
}