/* ==========================================================================
   mcprush — roles.css
   Chrome for the role preview: the strip under the nav, the account chip that
   replaces the primary button once you are signed in, the gate shown when a
   role opens a page it does not own, and the switcher itself.
   ========================================================================== */

/* ---------- the strip under the nav -------------------------------------- */
.rstrip {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
}
.rstrip-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 38px; padding-block: 8px;
}
.rstrip b { color: var(--ink); font-weight: 600; }
.rstrip-acts { flex: none; white-space: nowrap; }
.rstrip-acts a { color: var(--accent); font-weight: 500; }
.rstrip-acts a:hover { text-decoration: underline; text-underline-offset: 2px; }
[data-role="publisher"] .rstrip { background: var(--accent-soft); border-bottom-color: var(--accent-line); }

/* ---------- account chip in the nav -------------------------------------- */
.nav-acct {
  display: inline-flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 11px 0 5px; flex: none;
  border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.nav-acct:hover { border-color: var(--line-2); box-shadow: var(--sh1); }
.nav-acct-av {
  width: 24px; height: 24px; border-radius: 5px; flex: none;
  display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent);
  font: 600 10.5px/1 var(--mono); letter-spacing: .04em;
}
.nav-acct-av.av-ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* After dark, --ink is near-white, so the ink variant drew a bright 24px block
   inside a 34px chip on a black header — the loudest thing in the row, for a
   pair of initials. Worse in the lime schemes, where the letters on it are the
   accent: #BEF264 on #FAFAFA is 1.4:1 and unreadable.

   At night the tile is a tile: one surface step up from the chip, its own
   hairline, ordinary ink. `:not(.x)` is there for specificity — it has to
   clear the accent rules in core.css section v2-2, which are four classes
   deep. */
html[data-theme="dark"] .nav-acct-av.av-ink:not(.x) {
  background: var(--surface-3);
  border-color: var(--line-2);
  color: var(--ink);
}
/* a two-line identity block inside a 34px chip has no room to wrap: a long
   publisher name must clip, never push the chip open */
.nav-acct-t { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; max-width: 116px; }
.nav-acct-t b,
.nav-acct-t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.nav-acct-t b { font-size: 12.5px; font-weight: 600; }
.nav-acct-t span { font-size: 11px; color: var(--ink-3); }

/* ---------- the gate ------------------------------------------------------ */
.rolegate {
  max-width: 52ch; margin: 0 auto; padding: 96px 0 120px;
  text-align: center;
}
.rolegate-ic {
  width: 46px; height: 46px; margin: 0 auto 22px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface); color: var(--ink-2); box-shadow: var(--sh1);
}
.rolegate .lead { margin-top: 12px; }

/* ---------- ownership bar on a listing you publish ----------------------- */
.ownbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 4px 0 18px;
  padding: 12px 16px;
  border: 1px solid var(--accent-line); border-radius: var(--r2);
  background: var(--accent-soft);
}
.ownbar .spec { flex: none; }
.ownbar .small { min-width: 200px; }

/* ---------- the switcher -------------------------------------------------- */
.roleswitch {
  /* above the compare tray (90), the palette backdrop (200), the compare modal
     (210) and the list popover (220) — the role preview is a permanent control,
     so nothing on the page may cover it. Only toasts (300) sit higher. */
  position: fixed; right: 20px; bottom: 20px; z-index: 240;
  display: grid; gap: 2px;
  padding: 5px 5px 5px 12px;
  background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: var(--sh2);
}
/* ---- collapsing ----------------------------------------------------------
   Open, the handle is a close button in the corner of the panel. Collapsed,
   the handle IS the panel — a pill naming who the page is being previewed as,
   because a control that hides itself completely is one nobody finds again. */
.roleswitch { padding-top: 4px; }
.roleswitch-x {
  display: flex; align-items: center; gap: 7px;
  margin: -1px 0 2px -7px; padding: 3px 4px 3px 5px;
  border: 0; background: none; color: var(--ink-3);
  font: inherit; font-size: 12px; cursor: pointer; border-radius: 7px;
}
.roleswitch-x:hover { color: var(--ink-2); background: var(--surface-2); }
.roleswitch-x-l { display: none; }
.roleswitch-x-i { margin-left: auto; font-size: 12px; line-height: 1; padding: 0 3px; }
.roleswitch:not(.collapsed) .roleswitch-x .roleswitch-w { display: none; }
.roleswitch:not(.collapsed) .roleswitch-x { justify-content: flex-end; margin-left: 0; }

.roleswitch.collapsed { padding: 4px 6px 4px 5px; }
.roleswitch.collapsed .roleswitch-body { display: none; }
.roleswitch.collapsed .roleswitch-x { margin: 0; padding: 3px 4px; }
.roleswitch.collapsed .roleswitch-x-l { display: inline; font-weight: 500; color: var(--ink-2); }
.roleswitch.collapsed .roleswitch-x-i { transform: rotate(90deg); }

.roleswitch-body { display: grid; gap: 2px; }
.roleswitch-row { display: flex; align-items: center; gap: 2px; }
/* the second axis reads as a subordinate row, not a second control of equal
   weight: it only qualifies the customer selected above it */
.roleswitch-2 { border-top: 1px solid var(--line); margin-top: 3px; padding-top: 4px; }
.roleswitch-2 .roleswitch-l { color: var(--ink-3); }
.roleswitch-2 button { font-size: 12px; }
.roleswitch-2 button.on { background: var(--surface-3); border-color: var(--line-2); color: var(--ink); }
.roleswitch-l {
  font: 500 10.5px/1 var(--mono);
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--ink-3); margin-right: 8px;
}
.roleswitch button {
  height: 27px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--ink-2);
  font: 500 12.5px/1 var(--sans); cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.roleswitch button:hover { background: var(--surface-2); color: var(--ink); }
/* a plan that cannot be entered from here — no card on file, so no Pro. Struck
   through rather than merely dimmed: dim reads as "not selected", and this is
   a different thing. It stays clickable on purpose: a press is how the reader
   asks why, and the answer arrives as a toast rather than as a tooltip nobody
   hovers for. */
.roleswitch button.off {
  color: var(--ink-3); cursor: not-allowed; opacity: .55;
  text-decoration: line-through; text-decoration-thickness: 1px;
}
.roleswitch button.off:hover { background: none; color: var(--ink-3); }
.roleswitch button.on {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.roleswitch-w {
  width: 26px; height: 26px; margin-left: 6px; flex: none;
  display: grid; place-items: center;
  border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line);
  font: 600 10.5px/1 var(--mono); color: var(--ink-2);
}

/* the compare tray sits in the same corner on the catalogue — lift it clear */
.tray { bottom: 82px; }

@media (max-width: 720px) {
  .rstrip-in { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* ---- the preview switcher is a desktop control -------------------------
     It is scaffolding, not product: four axes for looking at the same page as
     a visitor, a buyer, a publisher, a five-minute-old account or a Free plan.
     On a phone it was a strip fixed across the bottom of every page, and
     hit-testing found it covering a real control on nine pages of sixteen —
     the sign-in email field at 62%, the contact page's route buttons, a card's
     Install button at the end of the catalogue. There is no size at which a
     permanent floating bar is free on a 390px screen, and the pages it covers
     are the ones a phone reader is there for. So it is shown from 721px up,
     where it sits in a margin nothing else uses, and the phone gets the page.
     Everything that had to make room for it — the footer's extra padding, the
     toast offset, the compare tray's lift — goes back to normal with it. */
  .roleswitch { display: none; }

  .nav-acct-t { display: none; }
  /* the chip is the account link, so it matches the icon buttons beside it
     rather than standing a size above them — at 320 the header row is the mark,
     a spacer and five controls at an 8px gap, and anything larger costs the
     gutter the wordmark needs */
  .nav-acct { width: 34px; height: 34px; padding: 0; justify-content: center; }
  .nav-acct-av { width: 26px; height: 26px; font-size: 11.5px; }

  /* the tray had to clear the switcher; with the switcher gone it sits where a
     bottom bar belongs */
  .tray { bottom: 12px; }
}

/* the palette is a dialog at every width, and a floating corner chip over a
   result list swallows the row underneath it */
body:has(.pal-back.on) .roleswitch { display: none; }

/* the third state on the Account row. It is the one control in this panel that
   takes something away, so it says so in the risk colour rather than sharing
   the accent with the two states that merely describe an ordinary account. */
.roleswitch-row button.roleswitch-risk.on {
  background: var(--risk-soft); border-color: var(--risk-line); color: var(--risk);
}
.roleswitch-row button.roleswitch-risk:hover { color: var(--risk); }

/* the paragraph the suspension screen adds between the sentence and the two
   buttons: the grounds, which are the only part of it an appeal can act on */
.rolegate-why {
  max-width: 46rem; margin: 20px auto 0; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface-2); text-align: left;
}
.rolegate-why b { display: block; font-size: 13.5px; margin-bottom: 6px; }
.rolegate-why p { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.rolegate-why p + p { margin-top: 8px; }