/* ============================================================
   MTYBY DESIGN SYSTEM — TOKENS  (shared by both leagues)
   ============================================================ */
:root {
  /* Palette */
  --forest:        #0B3B2E;
  --forest-deep:   #062018;
  --forest-soft:   #1B5340;
  --cream:         #F5F1E8;
  --cream-warm:    #EDE6D3;
  --paper:         #FFFFFF;
  --amber:         #E89B2C;
  --amber-deep:    #C97A1F;
  --amber-soft:    #F3C172;

  /* Semantic */
  --bg:            var(--cream);
  --surface:       var(--paper);
  --surface-2:     var(--cream-warm);
  --ink:           #1A1A1A;
  --ink-muted:     #5C6063;
  --ink-faint:     #8B8F94;
  --border:        #D8CFBB;
  --border-strong: #B6AC95;

  --success:       #2E7D4F;
  --warning:       #C97A1F;
  --danger:        #B33A2E;

  /* Typography — one family (Inter) across the whole app. --font-display is
     kept as an alias so existing display rules keep their sizes/weights/colours,
     they just render in Inter now. */
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-display:  var(--font-body);

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
  --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 40px; --s-9: 56px;

  /* Radii */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-full: 999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(11,59,46,.08), 0 1px 0 rgba(11,59,46,.04);
  --shadow-2: 0 4px 12px rgba(11,59,46,.10);
  --shadow-3: 0 12px 32px rgba(11,59,46,.18);

  /* Motion */
  --motion-fast: 120ms cubic-bezier(.2,.7,.3,1);
  --motion-med:  220ms cubic-bezier(.2,.7,.3,1);

  /* Layout */
  --header-h:    56px;
  --bottom-nav-h: 64px;
  --bottom-nav-h-mobile: 56px;
}

/* ============================================================
   LEAGUE THEMES (spec §7)
   mtyby / Super Rugby Pacific → default "forest" tokens above.
   OFDS / English Premiership      → "union" red / blue / white.
   ============================================================ */
:root[data-theme="union"] {
  --forest:        #0A2472;   /* navy blue — used for header, primary */
  --forest-deep:   #061539;
  --forest-soft:   #173A8A;
  --cream:         #FFFFFF;
  --cream-warm:    #EEF1F8;
  --amber:         #C8102E;   /* red — used for accents */
  --amber-deep:    #9E0C24;
  --amber-soft:    #E8627A;

  --bg:            #F4F6FB;
  --surface:       #FFFFFF;
  --surface-2:     #EEF1F8;
  --border:        #D5DBEA;
  --border-strong: #B3BCD6;
}

/* League-selection state: render everything desaturated until a league is
   chosen (set client-side via data-theme="grayscale"). */
:root[data-theme="grayscale"] body { filter: grayscale(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
/* iOS Safari auto-zooms the page whenever a focused text control renders below
   16px. The design body size is 14px, so force 16px on form controls on phones
   (overriding any component's smaller size) to kill the zoom-on-focus jump. */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scrollbar — subtle, cream-toned */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ============================================================
   APP SHELL
   ============================================================ */
.mtyby-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* ============================================================
   HEADER
   ============================================================ */
.mtyby-header {
  background: var(--forest);
  color: var(--cream);
  padding: 10px 20px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-1);
}
.mtyby-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;
}
.mtyby-brand-mark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1;
}
.mtyby-brand-mark .accent { color: var(--amber); }
.mtyby-brand-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--cream);
  opacity: .65;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mtyby-header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.mtyby-header-end {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Trade-offer notification — appears when another team offers you a trade. */
.mtyby-trade-notif {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  color: var(--cream);
  transition: background var(--motion-fast);
}
.mtyby-trade-notif:hover { background: rgba(245,241,232,.12); }
.mtyby-trade-count {
  position: absolute;
  top: -1px;
  right: -1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--amber);
  color: var(--forest-deep);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}
.mtyby-round-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: var(--amber);
  color: var(--forest-deep);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mtyby-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--r-full);
  background: rgba(245,241,232,.08);
  font-size: 12px;
  color: var(--cream);
}
.mtyby-user-chip .avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--forest-deep);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
}
.mtyby-logout {
  color: var(--cream);
  opacity: .6;
  font-size: 11px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: var(--r-full);
  transition: opacity var(--motion-fast), background var(--motion-fast);
  min-height: 32px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mtyby-logout:hover { opacity: 1; background: rgba(245,241,232,.08); }

/* ============================================================
   DESKTOP TABS (under header)
   ============================================================ */
.mtyby-tabs {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  display: flex;
  gap: 4px;
}
.mtyby-tab {
  padding: 12px 18px 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--motion-fast), border-color var(--motion-fast);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.mtyby-tab:hover { color: var(--ink); }
.mtyby-tab.is-active {
  color: var(--forest);
  border-bottom-color: var(--amber);
}
.mtyby-tab.is-disabled {
  color: var(--ink-faint);
  opacity: .55;
  cursor: not-allowed;
}

/* ============================================================
   MAIN
   ============================================================ */
.mtyby-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.mtyby-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast), opacity var(--motion-fast);
  user-select: none;
  border: 1px solid transparent;
}
.mtyby-btn:active:not(:disabled) { transform: scale(.98); }
.mtyby-btn:disabled { opacity: .4; cursor: not-allowed; }
.mtyby-btn--primary {
  background: var(--forest);
  color: var(--cream-warm);
  box-shadow: var(--shadow-1);
}
.mtyby-btn--primary:hover:not(:disabled) {
  background: var(--forest-soft);
  box-shadow: var(--shadow-2);
}
.mtyby-btn--secondary {
  background: var(--forest);
  color: var(--cream);
}
.mtyby-btn--secondary:hover:not(:disabled) { background: var(--forest-soft); }
.mtyby-btn--ghost {
  /* background: transparent; */
  color: var(--amber);
  border-color: var(--border-strong);
}
.mtyby-btn--ghost:hover:not(:disabled) { background: var(--surface-2); }
.mtyby-btn--sm { min-height: 36px; padding: 6px 12px; font-size: 12px; }
.mtyby-btn--block { width: 100%; }

/* ============================================================
   CHIPS
   ============================================================ */
.mtyby-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast);
  white-space: nowrap;
}
.mtyby-chip:hover { color: var(--ink); border-color: var(--border-strong); }
.mtyby-chip.is-active {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
}
.mtyby-chip.is-active:hover { background: var(--forest-soft); }
.mtyby-chip--amber.is-active {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--forest-deep);
}
.mtyby-chip--amber.is-active:hover { background: var(--amber-deep); }
.mtyby-chip--pos {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
}

/* ============================================================
   CARDS
   ============================================================ */
.mtyby-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.mtyby-card--flat { box-shadow: none; }

/* ============================================================
   JERSEY BADGES
   ============================================================ */
.mtyby-jersey {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  color: var(--ink);
  flex-shrink: 0;
}
.mtyby-jersey--starter {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
}
.mtyby-jersey--bench {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--ink-muted);
}

/* ============================================================
   POSITION TAG
   ============================================================ */
.mtyby-pos {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ============================================================
   STATUS BADGES
   ============================================================ */
.mtyby-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mtyby-status--available { background: rgba(46,125,79,.14);  color: var(--success); }
.mtyby-status--mine      { background: rgba(232,155,44,.20); color: #8C5400; }
.mtyby-status--taken {
  background: rgba(179,58,46,.10);
  color: var(--danger);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  line-height: 16px;
}
.mtyby-status--full      { background: rgba(201,122,31,.16); color: var(--warning); }

/* ============================================================
   FIXTURE-STATUS DOT (3-second scannability)
   ============================================================ */
.mtyby-fix-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--border-strong);
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.mtyby-fix-dot--starting { background: var(--success); color: var(--cream); }
.mtyby-fix-dot--bench    { background: var(--amber);   color: var(--forest-deep); }
.mtyby-fix-dot--none     { background: transparent; border: 1px dashed var(--border-strong); color: var(--ink-faint); }

/* ============================================================
   HEADER STAT PILLS
   ============================================================ */
.mtyby-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 14px;
  border-radius: var(--r-md);
  background: rgba(245,241,232,.08);
  min-width: 76px;
  min-height: 40px;
  justify-content: center;
}
.mtyby-stat-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--cream);
  opacity: .6;
}
.mtyby-stat-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.05;
}
.mtyby-stat-value .accent { color: var(--amber); }

/* ============================================================
   BOTTOM NAV (mobile only)
   ============================================================ */
.mtyby-bottom-nav {
  display: none;
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  z-index: 60;
  box-shadow: 0 -2px 8px rgba(11,59,46,.06);
}
.mtyby-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  min-height: 56px;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color var(--motion-fast);
}
.mtyby-bottom-nav-item.is-active { color: var(--forest); }
.mtyby-bottom-nav-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}
.mtyby-bottom-nav-item .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--amber);
  margin-top: 1px;
  opacity: 0;
}
.mtyby-bottom-nav-item.is-active .dot { opacity: 1; }

/* ============================================================
   BOTTOM SHEET
   ============================================================ */
.mtyby-sheet {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}
.mtyby-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6,32,24,.4);
  opacity: 0;
  transition: opacity var(--motion-med);
}
.mtyby-sheet-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  transform: translateY(100%);
  transition: transform var(--motion-med);
  box-shadow: var(--shadow-3);
  padding-bottom: env(safe-area-inset-bottom);
  max-height: 92dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.mtyby-sheet.is-open { pointer-events: auto; }
.mtyby-sheet.is-open .mtyby-sheet-backdrop { opacity: 1; }
.mtyby-sheet.is-open .mtyby-sheet-panel { transform: translateY(0); }
.mtyby-sheet-handle {
  width: 36px; height: 4px;
  background: var(--border-strong);
  border-radius: 999px;
  margin: 10px auto 0;
}

/* Toggle switch (profile: commissioner) */
.mtyby-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; border: none; padding: 0; cursor: pointer;
}
.mtyby-toggle:disabled { cursor: not-allowed; opacity: .5; }
.mtyby-toggle-track {
  width: 44px; height: 24px; flex: 0 0 auto; border-radius: 999px;
  background: var(--border-strong); position: relative;
  transition: background var(--motion-fast);
}
.mtyby-toggle[aria-checked="true"] .mtyby-toggle-track { background: var(--forest); }
.mtyby-toggle-thumb {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-1);
  transition: transform var(--motion-fast);
}
.mtyby-toggle[aria-checked="true"] .mtyby-toggle-thumb { transform: translateX(20px); }
.mtyby-toggle-label { font-size: 13px; font-weight: 600; color: var(--ink); }

/* ============================================================
   SKELETON
   ============================================================ */
.mtyby-skeleton {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--cream) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: mtyby-shimmer 1.2s linear infinite;
  border-radius: var(--r-sm);
}
@keyframes mtyby-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mtyby-skeleton { animation: none; background: var(--surface-2); }
}

/* ============================================================
   TOAST
   ============================================================ */
.mtyby-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + var(--bottom-nav-h) + 16px);
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  pointer-events: none;
  background: var(--forest);
  color: var(--cream);
  padding: 10px 16px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-3);
  transition: opacity var(--motion-med), transform var(--motion-med);
  z-index: 90;
  max-width: 90vw;
  white-space: nowrap;
}
.mtyby-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.mtyby-toast--err { background: var(--danger); }
.mtyby-toast--ok  { background: var(--success); }
@media (min-width: 769px) {
  .mtyby-toast { bottom: 24px; }
}

/* ============================================================
   UTILITY
   ============================================================ */
.mtyby-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.mtyby-no-scroll { overflow: hidden !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  :root { --header-h: 50px; --bottom-nav-h: 56px; }
  /* Body-scroll layout on mobile: html/body scroll naturally, header is
     sticky-top, bottom-nav + squad-footer are fixed at viewport bottom.
     Content (pitch + bench + quota) flows in the document and the browser
     handles scrolling natively — this is the most reliable scroll mechanic
     on iOS Safari (no nested-overflow quirks). */
  html, body {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mtyby-app {
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    max-width: 100vw;
  }
  .mtyby-header {
    padding: 6px 12px; gap: 8px; height: 50px;
    position: sticky; top: 0; z-index: 50;
  }
  .mtyby-brand-mark { font-size: 17px; }
  .mtyby-brand-sub { display: none; }
  .mtyby-tabs { display: none; }
  .mtyby-main { display: block; overflow: visible; }
  .mtyby-bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .mtyby-bottom-nav-item { min-height: 48px; padding: 4px 4px; font-size: 9px; }
  .mtyby-bottom-nav-icon { width: 20px; height: 20px; }
  .mtyby-user-chip .name { display: none; }
  .mtyby-user-chip { padding: 3px 4px; }
  .mtyby-user-chip .avatar { width: 22px; height: 22px; font-size: 12px; }
  .mtyby-header-end .mtyby-logout { display: none; }
  /* Enlarge dense tap targets toward the 44px touch guideline (font unchanged). */
  .mtyby-btn--sm { min-height: 44px; padding: 8px 14px; }
  .mtyby-chip { min-height: 40px; padding: 8px 14px; }
}

/* ============================================================
   PLAYER CARD — shared modal (recent points + opponents).
   Used by the Squad pitch (with captain/bench actions) and the
   read-only card on the Player Hub & Match Up pages.
   ============================================================ */
.pc-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(11,33,26,.55);
  display: grid; place-items: center; padding: 20px;
}
.pc-card {
  position: relative; width: 100%; max-width: 340px; padding: 16px;
  background: var(--surface); border-radius: var(--r-lg, 14px);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.pc-x {
  position: absolute; top: 6px; right: 10px; border: none; background: none;
  font-size: 24px; line-height: 1; color: var(--ink-faint); cursor: pointer;
}
.pc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-right: 22px; }
.pc-name { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--forest); }
.pc-cap {
  font-size: 11px; font-weight: 800; background: var(--amber); color: var(--forest-deep);
  border-radius: var(--r-full); padding: 1px 7px; vertical-align: middle;
}
.pc-team { font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.pc-sub {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 8px;
}
.pc-pts {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px;
  max-height: 244px; overflow-y: auto;
}
.pc-pt {
  display: flex; align-items: baseline; gap: 8px;
  background: var(--surface-2); border-radius: 8px; padding: 6px 10px;
}
.pc-rd { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--ink-faint); }
.pc-opp {
  flex: 1 1 auto; min-width: 0; font-size: 11px; font-weight: 600; color: var(--ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-pt b { flex: 0 0 auto; font-family: var(--font-display); font-size: 15px; color: var(--forest); }
.pc-none { font-size: 13px; color: var(--ink-muted); margin-bottom: 16px; }
.pc-actions { display: flex; gap: 8px; }
.pc-actions .mtyby-btn { flex: 1; }