/*
 * app-components.css — the "pa-" design system used by the <x-app.*> Blade
 * components (tabs, page-header, notice, button, field, card, status,
 * empty-state). These components were scaffolded without any CSS, so they
 * rendered unstyled on every page that uses them (the Saved workspace nav,
 * onboarding, directory, help). This file styles them with the shared design
 * tokens (tokens.css) and is loaded globally by layouts/app.blade.php, so any
 * <x-app.*> is styled consistently wherever it appears.
 *
 * Scoped entirely to .pa-* classes (only emitted by the components), so it
 * can't affect anything else on a page.
 */

/* ── Tabs (x-app.tabs → <nav class="pa-tabs"> > a) ──
   This app has NO global box-sizing reset — it is applied per page root
   (`.saved-page *`, `.judge-dir-v2 *`, `.club-dir-v2 *`, `.account-page *`).
   The directory tabs partial is included as a sibling BEFORE those roots on
   judges/organizers profile + search, so it inherits content-box and the
   min-height below would stack on top of the padding and borders (44 -> 66px).
   Pin it here so the component is self-contained wherever it is dropped. */
.pa-tabs, .pa-tabs a { box-sizing: border-box; }
.pa-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 22px;
}
.pa-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  margin-bottom: -1px;
  color: var(--ink-muted);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.pa-tabs a:hover { color: var(--brand); }
.pa-tabs a[aria-current="page"] {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.pa-tabs a:focus-visible {
  outline: 3px solid var(--brand-vivid);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Breadcrumbs (x-app.breadcrumbs) — Round 120 format skeleton ──
   padding-top (Round 126.2): the pre-120 page-local breadcrumbs carried
   their own top padding (.jp-breadcrumb was 16px); the component swap
   dropped it and no layer above (main, page shells) pads the top, so the
   breadcrumb sat 0px under the nav on every page using the component. */
.pa-breadcrumbs { padding-top: 16px; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
.pa-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.pa-breadcrumbs li { display: inline-flex; align-items: center; gap: 4px; }
.pa-breadcrumbs li + li::before { content: "/"; font-weight: 500; }
.pa-breadcrumbs a { color: var(--brand); font-weight: 700; text-decoration: none; }
.pa-breadcrumbs a:hover { text-decoration: underline; }

/* ── layout-class widths (Round 120) — @section('layout-class') was declared
   on 6 views but layouts/app never yielded it and these classes existed
   nowhere; the mechanism is live now. --wide matches the retired jp-shell
   ≥1400px breakout cap so profile pages keep their approved width. ── */
main.container.pa-main--narrow { max-width: 760px; }
/* Round 224: mid tier for single-form pages (Event Preferences) — wide
   enough for a 4-column field grid, without the full container's sprawl. */
main.container.pa-main--mid { max-width: 1048px; }
@media (min-width: 1400px) {
  main.container.pa-main--wide { max-width: 1460px; }
}

/* ── Page header (x-app.page-header) ── */
.pa-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}
.pa-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
}
.pa-page-header h1 {
  margin: 0;
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  color: var(--ink);
  line-height: 1.2;
}
.pa-count {
  /* The Saved/directory "count-inline" pattern, consolidated (Round 130):
     ink, not gray — hierarchy via size/weight per the no-muted-colors rule. */
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-left: 8px;
  white-space: nowrap;
}
.pa-page-description {
  margin: 8px 0 0;
  /* ink, not ink-muted: no muted-gray body text anywhere in the app
     (older-audience readability rule — hierarchy via size/weight, never gray). */
  color: var(--ink);
  font-size: 15px;
  max-width: 60ch;
}
.pa-page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Notice / alert (x-app.notice) ── */
.pa-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--ink);
}
.pa-notice > i { font-size: 18px; margin-top: 1px; }
.pa-notice > div { flex: 1; }
.pa-notice strong { display: block; margin-bottom: 2px; }
.pa-notice__close {
  border: 0;
  background: transparent;
  color: var(--ink-subtle);
  cursor: pointer;
  font-size: 15px;
  padding: 4px;
  min-height: 32px;
}
.pa-notice--info    { border-left-color: #2563eb; }
.pa-notice--info > i    { color: #2563eb; }
.pa-notice--success { border-left-color: var(--success); }
.pa-notice--success > i { color: var(--success); }
.pa-notice--warning { border-left-color: var(--warn); background: #fffbeb; }
.pa-notice--warning > i { color: var(--warn); }
.pa-notice--error   { border-left-color: var(--danger); background: #fef2f2; }
.pa-notice--error > i   { color: var(--danger); }

/* ── Button (x-app.button) ── */
.pa-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-btn); /* Round 175: the button token (same 999px) */
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.pa-button:focus-visible { outline: 3px solid var(--brand-vivid); outline-offset: 2px; }
.pa-button:active { transform: translateY(1px); }
.pa-button--primary { background: var(--brand); color: #fff; }
.pa-button--primary:hover { background: var(--brand-press); color: #fff; }
.pa-button--secondary,
.pa-button--ghost {
  background: #fff;
  color: var(--brand);
  border-color: var(--line);
}
.pa-button--secondary:hover,
.pa-button--ghost:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

/* ── Field (x-app.field) ── base; page-specific overrides may add more ── */
.pa-field { text-align: left; margin-bottom: 4px; }
.pa-field > label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
}
.pa-field__hint { margin: 6px 0 0; color: var(--ink-subtle); font-size: 13px; }
.pa-field__error { margin: 6px 0 0; color: var(--danger); font-size: 13px; font-weight: 600; }

/* ── Card (x-app.card) ── */
.pa-card {
  margin-bottom: 18px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.pa-card--flush { padding: 0; }
.pa-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.pa-card-header h2 { margin: 0; font-size: var(--h2-size); font-weight: var(--h2-weight); color: var(--ink); }
.pa-card-header p { margin: 4px 0 0; color: var(--ink-muted); font-size: 14px; }
.pa-card-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ── Status pill (x-app.status) ── */
.pa-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  background: var(--brand-soft);
  color: var(--brand);
}
.pa-status--neutral { background: #f1f5f9; color: var(--ink-muted); }
.pa-status--success { background: #d1fae5; color: #065f46; }
.pa-status--warning { background: #fef3c7; color: #92400e; }
.pa-status--danger  { background: #fee2e2; color: #991b1b; }
.pa-status--info    { background: #dbeafe; color: #1e40af; }

/* ── Empty state (x-app.empty-state) ── */
.pa-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
}
.pa-empty-state__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 26px;
}
.pa-empty-state h2 { margin: 6px 0 0; font-size: var(--h3-size); color: var(--ink); }
.pa-empty-state p { margin: 0; color: var(--ink-muted); max-width: 48ch; }
.pa-empty-state__action { margin-top: 8px; }

/* ── Directory tabs: segmented track (Saved workspace-tabs language) ──
   Overrides the flat underline .pa-tabs style on the Overview / Judges /
   Clubs directory pages so the Directory and Saved areas read as one app.
   Mirrors .saved-workspace-tabs in saved.css — keep the two in step.

   NOTE: account/partials/tabs.blade.php also carries .directory-tabs, so the
   Account pill row (/profile, /notifications, /invoices, /referrals,
   /feedback) inherits this too. That is intentional; .account-tabs is on the
   element if it ever needs to opt back out. */
.pa-tabs.directory-tabs {
  display: inline-flex;
  flex-wrap: nowrap;
  max-width: 100%;
  border-bottom: none;
  gap: 2px;
  padding: 4px;
  border: 1px solid #e5dcec;
  border-radius: 999px;
  /* White, not brand-soft: the profile/directory canvases are lavender, and a
     brand-soft track is near-identical in tone — the control read as a muddy
     gray blob. White matches the floating-card language and the tab pills. */
  background: #fff;
  box-shadow: 0 1px 4px rgba(81, 28, 102, 0.06);
  /* Breathing room below the app nav — matches the Saved workspace's 28px
     top padding so the tab track doesn't sit flush against the header. */
  margin: 26px 0 22px;
}
.pa-tabs.directory-tabs a {
  min-height: 44px;
  padding: 10px 18px;
  margin-bottom: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  color: var(--ink);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pa-tabs.directory-tabs a:hover {
  /* Track is white now, so the hover tint flips to brand-soft. */
  background: var(--brand-soft);
  border-color: transparent;
  color: var(--brand);
}
.pa-tabs.directory-tabs a[aria-current="page"] {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 1px 2px rgba(81, 28, 102, 0.24), 0 4px 10px rgba(81, 28, 102, 0.18);
}
.pa-tabs.directory-tabs a[aria-current="page"] .sv-tab-label > span {
  font-weight: 700;
}
/* Bold-width reservation — see the matching block in saved.css. */
.pa-tabs.directory-tabs .sv-tab-label { display: grid; grid-template-columns: 1fr; }
.pa-tabs.directory-tabs .sv-tab-label > span { grid-area: 1 / 1; }
.pa-tabs.directory-tabs .sv-tab-label::after {
  content: attr(data-label);
  grid-area: 1 / 1;
  font-weight: 700;
  visibility: hidden;
  pointer-events: none;
}
/* Icons inherit currentColor, so they go white on the active pill. .pa-tabs a
   already supplies the 6px flex gap between icon and label. */
.pa-tabs.directory-tabs a > .bi { font-size: 16px; line-height: 1; }

/* ── Mobile ── */
@media (max-width: 600px) {
  .pa-tabs { gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pa-tabs a { padding: 10px 12px; font-size: 14px; white-space: nowrap; }
  /* The track itself becomes the scroll viewport so the control keeps its
     shape instead of wrapping. The ::after spacer preserves trailing padding
     at the scroll end, which flex scroll containers otherwise drop. */
  .pa-tabs.directory-tabs {
    /* inline-flex, not flex: a short track (2 pills) should hug its pills
       rather than stretch to a full-width band of empty lavender. It still
       shrink-to-fits and scrolls once the pills exceed max-width. */
    display: inline-flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pa-tabs.directory-tabs::-webkit-scrollbar { display: none; }
  .pa-tabs.directory-tabs::after { content: ""; flex: 0 0 4px; }
  .pa-tabs.directory-tabs a { padding: 10px 14px; font-size: 15px; }
  .pa-page-header { flex-direction: column; }
}

/* ── Account "Viewing" disclosure (mobile replacement for .account-tabs) ──
   Desktop never shows it; the ≤600px block above swaps it in. Kept outside
   the media query so the closed/open styling is defined once. */
.account-tabs-dd {
  display: none;
  position: relative;
  margin: 26px 0 22px;
}
.account-tabs-dd summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 50px;
  padding: 0 16px;
  border: 1.5px solid #e5dcec;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.account-tabs-dd summary::-webkit-details-marker { display: none; }
.account-tabs-dd summary:focus-visible {
  outline: 3px solid var(--brand-vivid);
  outline-offset: 2px;
}
.account-dd-lbl b { color: var(--brand); font-weight: 800; }
.account-dd-caret { color: var(--ink); transition: transform 0.15s ease; }
.account-tabs-dd[open] .account-dd-caret { transform: rotate(180deg); }
.account-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: #fff;
  border: 1px solid #e5dcec;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(26, 26, 46, 0.16);
  overflow: hidden;
}
.account-dd-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid #f4f1fb;
}
.account-dd-menu a:last-child { border-bottom: 0; }
.account-dd-menu a[aria-current="page"] {
  color: var(--brand);
  font-weight: 800;
  background: #faf8fe;
}
.account-dd-menu .account-dd-tick { color: var(--brand); visibility: hidden; }
.account-dd-menu a[aria-current="page"] .account-dd-tick { visibility: visible; }

/* Mobile audit fix 3 (July 2026): the Account strip (5 destinations) hid its
   tail off-screen — on /referrals the active pill itself loaded half-clipped.
   On phones the strip is swapped for the "Viewing" disclosure above. This
   block must come AFTER the component's base display:none so it wins the
   equal-specificity cascade. */
@media (max-width: 600px) {
  .pa-tabs.account-tabs { display: none; }
  .account-tabs-dd { display: block; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Round 105 — classes extracted from inline style="" attributes so a strict
   CSP (style-src-attr 'none') can be enforced. Declarations are copied
   VERBATIM from the attributes they replace: same properties, same values,
   same order. No !important anywhere in this section — where an inline
   declaration used to beat a framework rule by virtue of being inline, the
   selector is compounded with the framework class instead (e.g.
   `.modal-content.es-x-filter-modal`) so it wins on specificity/source order.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Round 105: classes extracted from event/partials/filter-modals.blade.php ──
   These live here rather than in events-redesign.css because the partial is
   included from BOTH event/partials/filters-listing.blade.php (rendered by
   event/index.blade.php, which loads events-redesign.css) and
   event/partials/user-saved-searches.blade.php (rendered by
   event/saved-search.blade.php, which does NOT). app-components.css is loaded
   globally by layouts/app.blade.php, so the modal looks identical on both. */
/* Round 175: the two dialogs wear the shared `.sdc-modal` skin (toast.css)
   now — `.es-x-filter-modal`, `.es-x-clone-name-input` (→ .sdc-input) and
   `.btn.es-x-clone-submit` (→ .sdc-dialog-btn--primary) are retired. */
.es-x-delete-filter-name { font-weight: 700; color: #511c66; }
.es-x-clone-name-hint { font-size: 14px; color: #1a1a2e; margin: 8px 0 0; }

/* ── Round 105: classes extracted from event/partials/search-table.blade.php ──
   Here, not events-redesign.css: this partial is rendered by
   event/search.blade.php, which does not load events-redesign.css. The
   compound selector is required to beat style.css's `.accordion-item { border:
   var(--bs-accordion-border-width) solid ... }`. */
.accordion-item.es-x-event-type-accordion-item { border:none; }

/* ── Round 105: classes extracted from event/partials/quick-confirmation-search.blade.php ──
   Same load-path reason as search-table above (event/search.blade.php). */
.es-x-qs-save-icon { color: #511c66; }
/* Round 175: both save-name inputs are `.sdc-input` now (tokens.css), whose
   ::placeholder rule already carries the Round-123 weight-400 fix — the
   `.es-x-qs-save-name-input` / `.filter-name .form-control` rules that lived
   here are retired. */

/* ══ Round 127: rebuilt /help page ══
   Recipes grid + places table + native-<details> FAQ + hint panel. The
   Round-105 tut-* rules that lived here served the unreachable tutorial
   views (deleted this round with the April-2025 PDFs). Type ≥14.5px and
   44px buttons throughout — audience skews older. */
.help-sec-title { font-size: 20px; font-weight: 800; color: var(--ink); margin: 34px 0 4px; }
.help-sec-sub { font-size: 14.5px; color: var(--ink); margin: 0 0 16px; }

.help-recipes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.help-recipe {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.help-recipe-kicker {
  font-size: 12px; font-weight: 800; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--brand); margin: 0 0 6px;
}
.help-recipe h3 { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0 0 10px; }
.help-recipe ol { margin: 0 0 16px; padding-left: 20px; font-size: 14.5px; color: var(--ink); flex: 1 1 auto; }
.help-recipe ol li { margin-bottom: 6px; }
.help-recipe ol li:last-child { margin-bottom: 0; }

.help-hint {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--brand-soft);
  border: 1px solid #e4d9ee;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 14.5px; color: var(--ink);
  margin-top: 16px;
}
.help-hint .bi { color: var(--brand); font-size: 18px; line-height: 1.4; }

.help-places {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.help-places th, .help-places td {
  padding: 13px 18px;
  border-bottom: 1px solid #eef2f7;
  font-size: 14.5px;
  text-align: left;
  vertical-align: top;
}
.help-places tr:last-child th, .help-places tr:last-child td { border-bottom: 0; }
.help-places th { font-weight: 800; white-space: nowrap; width: 160px; }
.help-bell { color: var(--brand); }

.help-faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}
.help-faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  padding: 14px 18px;
  list-style-position: inside;
}
.help-faq summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-md); }
.help-faq details p { padding: 0 18px 14px; margin: 0; font-size: 14.5px; color: var(--ink); }

.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }

@media (max-width: 768px) {
  .help-recipes, .help-grid { grid-template-columns: minmax(0, 1fr); }
  .help-places th { width: auto; white-space: normal; }
}

/* Round 175: subscription/partials/error-modal.blade.php (and its
   .sub-error-* rules) is deleted — session('error') toasts app-wide. */

/* ── Round 205: checkout-success confirmation card (approved demo 9edceb02,
   Option A). Replaces the Round-105 pair for this partial — .sub-success-img
   (the 350px clipart hero; img/success.png deleted as orphaned) and
   .sub-receipt-summary (the centered tinted box). Lavender hairlines stay
   literals like the old box did (#e2d8f0 family) — --line is the app's GRAY
   hairline and reads dead against this card's plum-tinted grounds. ── */
.sub-confirm-card {
  background: #fff;
  border: 1px solid #e5def2;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(81, 28, 102, .10);
  width: 100%;
  max-width: 560px;
  padding: 40px 36px 36px;
  margin: 36px 0 56px;
  text-align: center;
}
.sub-confirm-mark { display: block; margin: 0 auto 18px; }
.sub-confirm-h {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.sub-trial-chip {
  display: inline-block;
  margin: 10px 0 0;
  padding: 4px 14px;
  border-radius: 999px;
  background: #fef3c7; /* the Round 200/201 gold-tag recipe */
  border: 1px solid #fcd34d;
  color: #8a6d00;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sub-rc {
  margin: 22px 0 18px;
  border: 1px solid #e2d8f0;
  border-radius: 12px;
  background: #faf8fd;
  text-align: left;
  overflow: hidden;
}
.sub-rc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 20px;
}
.sub-rc-row + .sub-rc-row { border-top: 1px solid #ece5f6; }
.sub-rc-l {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
}
.sub-rc-v {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sub-confirm-note { font-size: 15.5px; color: var(--ink); margin: 0 0 20px; }
.sub-confirm-cta .pa-button { min-height: 48px; }
@media (max-width: 640px) {
  .sub-confirm-card { padding: 30px 20px 26px; margin: 20px 0 40px; }
  .sub-confirm-h { font-size: 23px; }
}
/* Round 175: `.btn.sub-success-cta` retired — the success page's pair wears
   .pa-button (primary + ghost) like every other member CTA. */

/* ── Round 105: classes extracted from subscription/partials/subscription-nav.blade.php ──
   `font-size: inherit` was already being overridden by landing.css's
   `.nav-cta { font-size: 14px !important; }` while it was inline, and still is
   here — the rendered size is unchanged at 14px. */
.nav-cta.sub-nav-signout-btn {
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:inherit;
}

/* ── Round 105: classes extracted from subscription/partials/subscription-breadcrumb.blade.php ──
   Needs the full descendant chain: style.css sets `.breadcrumb .breadcrumb-item
   .breadcrumb-item-link { font-size: 13.5px; }` (0,3,0) inside two media
   queries, which a plain class would lose to. */
.breadcrumb .breadcrumb-item .breadcrumb-item-link.sub-breadcrumb-back {
  color:rgb(81, 28, 102);
  font-size:30px;
}

/* ── Round 105: classes extracted from contact.blade.php ──
   contact.blade.php is a standalone view (not layouts.app), so it now links
   this stylesheet explicitly — see the comment on that <link>. */
.ct-intro {
  margin-bottom:24px;
  font-size:14px;
  color:#1a1a2e;
  line-height:1.6;
  text-align:left;
}
.ct-faq-link { color:#511c66;font-weight:600; }

/* ── Round 105: classes extracted from feedback/partials/feedback-main.blade.php ──
   .fb-upload-bar is the INITIAL width only: feedback.blade.php drives the bar
   with jQuery `$bar.css('width', pct)`, which writes an inline style and so
   still overrides this class (which is why it must not be !important). */
.progress.fb-upload-progress { height:8px; }
.progress-bar.fb-upload-bar { width:0%; }

/* ── Round 105: per-page results form (was inline display:inline-block). ── */
.es-x-perpage-form { display:inline-block; margin-left:8px; }

/* ── Round 124: member profile page (approved demo) ── */
.member-page { padding: 28px 0 56px; }
.mp-shell { max-width: 760px; margin: 0 auto; }
.mp-hidden-note {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fdf8e7; border: 1px solid #ecdfae; border-radius: 10px;
  padding: 12px 16px; font-size: 14px; color: var(--ink); margin-bottom: 16px;
}
.mp-hidden-note .bi { color: #b45309; }
.mp-card {
  background: #fff; border: 1px solid var(--line, #e5e0ee); border-radius: 14px;
  padding: 22px 24px; margin-bottom: 18px;
}
.mp-head { display: flex; gap: 16px; align-items: center; }
.mp-avatar {
  width: 64px; height: 64px; border-radius: 50%; background: var(--brand, #511c66);
  color: #fff; font-size: 24px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.mp-name { font-size: 24px; font-weight: 700; color: var(--ink); margin: 0; }
.mp-sub { font-size: 13.5px; color: var(--ink); margin: 2px 0 0; }
.mp-sub-sep { margin: 0 6px; }
.mp-breeds { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; font-size: 14.5px; color: var(--ink); }
.mp-breeds-label { font-weight: 700; }
.mp-breed-chip { background: var(--brand-soft, #ede9fe); color: var(--brand, #511c66); font-weight: 700; border-radius: 999px; padding: 6px 14px; font-size: 13.5px; }
.mp-arrow { color: var(--brand, #511c66); font-weight: 700; }
.mp-about {
  font-size: 14.5px; color: var(--ink); background: #faf8fd;
  border: 1px solid #eee7f8; border-radius: 10px; padding: 12px 14px; margin: 14px 0 0;
}
.mp-edit-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--brand, #511c66); text-decoration: none; }
.mp-edit-link:hover { text-decoration: underline; }
.mp-section-title { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.mp-note { border: 1px solid #e8e2f3; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.mp-note-head { font-size: 13.5px; color: var(--ink); margin-bottom: 4px; }
.mp-note-head a { color: var(--brand, #511c66); font-weight: 700; text-decoration: none; }
.mp-note-head a:hover { text-decoration: underline; }
.mp-note-kind { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: var(--brand-soft, #ede9fe); color: var(--brand, #511c66); border-radius: 999px; padding: 2px 9px; margin-left: 6px; }
.mp-note-date { margin-left: 8px; }
.mp-note-body { font-size: 14.5px; color: var(--ink); margin: 0; }
.mp-empty { font-size: 14px; color: var(--ink); margin: 0; }

/* Author links on public notes (judge + club pages). */
.note-author-link { color: var(--brand, #511c66); font-weight: 700; text-decoration: none; }
.note-author-link:hover { text-decoration: underline; }
.note-author-byline { font-weight: 500; font-size: 0.92em; }

/* ===== Save-status menu (Round 157, approved demo) =====
   Built and PORTALED to <body> by edjs-v2.js (the ONE owner of .save-show-btn)
   — the results table's .table-scroll pan container would clip an in-table
   absolute menu (same trap family as the .es-card overflow clipping
   selectpicker menus; bootstrap-select's fix is data-container="body").
   Coordinates are fixed-position, written by JS at open; any scroll closes
   the menu before they can go stale. Moved here from events-redesign.css in
   Round 165: the Browse Events page (member shell of /events) renders the
   same control and doesn't load that stylesheet, and this file is on every
   layouts.app page. Tokens from tokens.css (:root), literal fallbacks. */
.sdc-save-menu {
  display: none;
  position: fixed;
  z-index: 1080;
  min-width: 292px;
  max-width: min(340px, calc(100vw - 16px));
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(26, 26, 46, 0.18);
  padding: 6px;
}
.sdc-save-menu.open { display: block; }
.sdc-save-menu [role="menuitemradio"],
.sdc-save-menu .ssm-remove {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 44px;   /* tap-target floor for this audience */
  padding: 9px 10px;
  border: 0;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--ink, #1a1a2e);
}
.sdc-save-menu [role="menuitemradio"]:hover,
.sdc-save-menu [aria-checked="true"] { background: var(--brand-soft, #f3edf7); }
.sdc-save-menu [role="menuitemradio"]:focus-visible,
.sdc-save-menu .ssm-remove:focus-visible { outline: 2.5px solid var(--brand-dark, #6a2485); outline-offset: -2px; }
.sdc-save-menu .ssm-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 5px; }
.sdc-save-menu .ssm-dot-interested { background: var(--gold, #fcc200); }
.sdc-save-menu .ssm-dot-entered { background: #0369a1; }   /* sky-700, the entered family */
.sdc-save-menu .ssm-dot-shown { background: #6d28d9; }     /* violet-700, saved-page parity */
.sdc-save-menu .ssm-text { display: block; min-width: 0; }
.sdc-save-menu .ssm-name { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; }
.sdc-save-menu .ssm-sub { display: block; font-size: 13px; font-weight: 400; line-height: 1.4; }
.sdc-save-menu .ssm-check { width: 16px; height: 16px; flex: none; margin-left: auto; margin-top: 3px; color: var(--brand, #511c66); visibility: hidden; }
.sdc-save-menu [aria-checked="true"] .ssm-check { visibility: visible; }
.sdc-save-menu .ssm-divider { border-top: 1px solid #e2e8f0; margin: 6px 4px; }
.sdc-save-menu .ssm-remove { color: #b91c1c; font-weight: 700; font-size: 14px; align-items: center; }
.sdc-save-menu .ssm-remove:hover { background: #fee2e2; }
.sdc-save-menu .ssm-x { width: 14px; height: 14px; flex: none; }
/* No save yet → nothing to remove; the class toggle lives in openSaveMenu. */
.sdc-save-menu:not(.has-save) .ssm-divider,
.sdc-save-menu:not(.has-save) .ssm-remove { display: none; }
/* Round 188 (approved demo 618ad9a9): the same menu recipe serves the judge
   + club directory cards (dir-actions.js SDCActionMenu — Save · Favorite ·
   DNS · Remove / Favorite · DNS · Clear). Rows lead with an ICON slot
   instead of a status dot, and an optional name header says whose menu it is. */
.sdc-save-menu .ssm-who {
  font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: var(--ink, #1a1a2e); padding: 8px 10px 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sdc-save-menu .ssm-ic {
  width: 18px; height: 18px; flex: none; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
}
.sdc-save-menu .ssm-ic-save  { color: var(--brand-vivid, #6500F8); }
.sdc-save-menu .ssm-ic-heart { color: #047857; }
.sdc-save-menu .ssm-ic-dns   { color: #b91c1c; font-weight: 900; font-size: 17px; }
/* Round 222 (approved demo db27ac38, Option B): on a multi-breed search an
   unsaved row's menu leads with a breed radio group — the breed a fresh save
   will key, said out loud and choosable. Rows reuse the shared menuitemradio
   recipe above (44px tap floor included); only the type steps down. A bound
   row instead gets a "Tracking {breed}" .ssm-who header plus the .ssm-foot
   pointer at the event page's plan rail for second-breed saves. .ssm-bdiv
   exists because .ssm-divider is hidden by the :not(.has-save) rule above on
   exactly the unsaved menus that need this separator. */
.sdc-save-menu .ssm-who b { color: var(--brand, #511c66); }
.sdc-save-menu .ssm-bdot {
  width: 15px; height: 15px; border-radius: 50%; flex: none; margin-top: 3px;
  border: 2px solid #9a93ab; background: #fff;
}
.sdc-save-menu [data-save-breed][aria-checked="true"] .ssm-bdot {
  border-color: var(--brand, #511c66);
  background: var(--brand, #511c66);
  box-shadow: inset 0 0 0 3.5px #fff;
}
.sdc-save-menu .ssm-bi .ssm-name { font-size: 13.5px; }
.sdc-save-menu .ssm-bi .ssm-sub { font-size: 12px; }
.sdc-save-menu .ssm-bdiv { border-top: 1px solid #e2e8f0; margin: 6px 4px; }
.sdc-save-menu .ssm-foot {
  display: block; font-size: 12.5px; color: #56516a;
  padding: 7px 10px 5px; line-height: 1.45;
}
.sdc-save-menu .ssm-foot a {
  color: var(--brand, #511c66); font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px;
}