/* The Pro panel (pro.js paywall) and the Pro mark, on whichever page shows
   them. Colours come from theme.css's tokens only, so every colourway and
   both themes get them without a rule here for each. */

.pro-wall {
  max-width: 640px;
  margin: 32px auto;
  padding: 28px 28px 22px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.pro-eyebrow {
  margin: 0 0 8px;
  font: 700 11.5px var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.pro-wall h2 { margin: 0 0 8px; font-family: var(--font-headline); font-size: 26px; line-height: 1.2; color: var(--ink); }
.pro-lead { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.pro-gets { margin: 0 0 20px; padding-left: 20px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.pro-gets li { margin-bottom: 6px; }
.pro-plans { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.pro-plans .btn { min-height: 44px; text-decoration: none; text-wrap: balance; }
.pro-note { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-faint); }
.pro-note:empty { display: none; }
.pro-warn { color: var(--warn); }
.pro-invited { color: var(--accent-strong); font-weight: 600; }
.pro-in { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); }
.pro-signin[hidden] { display: none; }
.pro-key { margin: 12px 0 0; }
.pro-signin label, .pro-key label { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pro-key-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pro-key-row input {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  font: 16px var(--font-mono);
  color: var(--ink);
  background: var(--paper-inset);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
}
.pro-key-row .btn { min-height: 44px; }
.pro-key-more { margin: 14px 0 0; }
.pro-in > .pro-key-more:first-child, .pro-signin[hidden] + .pro-key-more { margin-top: 0; }
/* With no email to sign in by, the key box is the whole of signing in: its
   own label says so, and there is nothing to fold it under. */
.pro-signin[hidden] + .pro-key-more > summary { display: none; }
.pro-signin[hidden] + .pro-key-more > .pro-key { margin-top: 0; }
.pro-key-more summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13.5px;
  color: var(--accent-strong);
  cursor: pointer;
}

/* The mark beside a Pro service's name. */
.pro-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font: 700 10.5px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 2px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-radius: 999px;
}

@media (max-width: 520px) {
  .pro-wall { margin: 16px 0; padding: 22px 16px 18px; }
  .pro-plans .btn { flex: 1 1 100%; }
}

/* The panel as a dialog, where a page has no pane to give it. */
.pro-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: auto;
}
.pro-dialog::backdrop { background: rgba(10, 10, 14, 0.55); }
.pro-dialog .pro-wall { position: relative; max-width: none; margin: 0; }
.pro-close {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  font-size: 24px;
  line-height: 1;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pro-close:hover { color: var(--ink); background: var(--paper-inset); }

/* Only the sign-in and the key, inside a panel that already says what Pro
   is (/pro). */
.pro-inline { max-width: none; margin: 0 0 18px; padding: 0; background: none; border: 0; }
.pro-inline .pro-in { margin: 0; padding: 0; border: 0; }

/* Inside an application whose own controls are sized for it (Sovereign's
   stage, the Photo Editor), the panel keeps the site's sizes. */
.pro-wall a:not(.btn) { color: var(--accent-strong); }
.pro-wall .btn { min-height: 44px; padding: 10px 20px; font-size: 15px; line-height: 1.3; }
.pro-key-row input { height: 44px; box-sizing: border-box; }
.sv-item .pro-tag { margin-left: auto; }