/* 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: 650 var(--text-2xs)/1.3 var(--font-ui);
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.pro-wall h2 { margin: 0 0 8px; font-family: var(--font-headline); font-size: var(--text-2xl); line-height: 1.2; color: var(--ink); }
.pro-lead { margin: 0 0 16px; font-size: var(--text-md); line-height: 1.6; color: var(--ink-soft); }
.pro-gets { margin: 0 0 20px; padding-left: 20px; font-size: var(--text-sm); 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; text-align: center; }
.pro-note { margin: 8px 0 0; font-size: var(--text-xs); line-height: 1.55; color: var(--ink-faint); }
.pro-note:empty { display: none; }
/* A link in a sentence is told from the words round it by more than its
   colour (WCAG 1.4.1). */
.pro-note a { text-decoration: underline; text-underline-offset: 2px; }
.pro-warn { color: var(--warn); }
/* A payment that needs the subscriber (the bank wants it confirmed, or it
   was declined), or a key taken away for want of one: one quiet line on
   the warning tint and Stripe's page for the invoice beside it. The same
   in the panel, on /pro and in the bar's Pro menu. */
.pro-bill { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--warn-soft); color: var(--ink); }
.pro-bill p { flex: 1 1 220px; min-width: 0; margin: 0; font-size: var(--text-sm); line-height: 1.5; }
.pro-bill .pro-bill-go { flex: none; min-height: 44px; padding: 10px 16px; font-size: var(--text-sm); line-height: 1.3; text-decoration: none; }
.pro-bill .pro-bill-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pro-bill-slot:empty { display: none; }
.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: var(--text-xs); 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: var(--text-md) 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; }
/* An open <details> clips what it holds to its own box in Chromium, which
   cut the Use key button's right edge and the field's focus ring off
   wherever the row filled the width. */
.pro-key-more::details-content { overflow: visible; }
.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: var(--text-xs);
  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 var(--text-2xs) var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 2px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
}

/* The two subscriptions, side by side and the same size, each saying what
   follows the free days. */
.pro-plans .pro-trial { flex: 1 1 200px; flex-direction: column; justify-content: center; gap: 1px; padding-top: 8px; padding-bottom: 8px; }
.pro-plans .pro-trial small { font: 500 var(--text-xs)/var(--leading-ui) var(--font-sans); font-variant-numeric: tabular-nums; opacity: 0.92; }
.pro-others { margin: -10px 0 18px; font-size: var(--text-xs); color: var(--ink-soft); }
/* Under the line that tells a one-application subscriber how to switch, it
   keeps its distance rather than riding up into it. */
.pro-warn + .pro-others { margin-top: 10px; }
.pro-lead b { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }
/* Whether the file waits through checkout, said before anybody pays. */
.pro-keep { margin: -4px 0 16px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--paper-inset); color: var(--ink-soft); }
.pro-keep:empty { display: none; }
.pro-gets-more { margin: 12px 0 0; font-size: var(--text-xs); color: var(--ink-soft); }
.pro-gets-more summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-strong); cursor: pointer; }
.pro-gets-more .pro-gets { margin: 4px 0 0; font-size: var(--text-sm); }

@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 {
  /* Centred: a page whose own reset takes every margin away (margin: 0 on
     *) would otherwise put the panel in the top left corner. */
  margin: auto;
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 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: var(--text-xl);
  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: var(--text-md); line-height: 1.3; }
.pro-key-row input { height: 44px; box-sizing: border-box; }
.sv-item .pro-tag { margin-left: auto; }

/* The Pro page: the line naming the Pro tools this browser used lately,
   and the answers under "Before you buy". */
.pp-recent { margin: -4px 0 14px; font-size: var(--text-sm); line-height: var(--leading-prose); color: var(--ink-soft); }
.pp-recent[hidden], #ppGift[hidden], .pp-buy[hidden] { display: none; }
.pp-qa { margin: 0; }
.pp-qa dt { margin: 16px 0 4px; font-weight: 600; color: var(--ink); font-size: var(--text-md); }
.pp-qa dt:first-child { margin-top: 0; }
.pp-qa dd { margin: 0; font-size: var(--text-sm); line-height: var(--leading-prose); color: var(--ink-soft); max-width: 70ch; }
/* A link inside a sentence is told from the words round it by more than
   its colour (WCAG 1.4.1): underlined, here and in the comparison's notes. */
.pp-qa dd a, .pp-compare .pp-sub a { text-decoration: underline; text-underline-offset: 2px; }
.pp-qa a { color: var(--accent-strong); }

/* ---------------------------------------------------------------
   The Pro page (/pro): the plans, the table that compares them, the
   passes, and the subscriber's own panel. These lived in a <style>
   in pro.html with their own sizes; they are here, from the tokens.
   --------------------------------------------------------------- */

/* The plans stand on the page itself rather than in a card of their
   own: three cards inside a fourth read as a box of boxes. */
.panel#plans { padding: 0; background: none; border: 0; box-shadow: none; }
.panel#plans > h2 { margin-top: 0; }

.pp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); margin: var(--space-1) 0 var(--space-2); }
/* A card is a column whose list takes up the slack, so the three cards'
   buttons sit on one line whatever each one says. */
.pp-plan { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--rule); border-radius: var(--radius-lg); background-color: var(--paper-raised); }
.pp-plan.pp-main { border-color: var(--accent-strong); box-shadow: 0 0 0 1px var(--accent-strong); }
/* On a phone the cards stand one above another, and the first was the
   US$2 day, which is bought from a tool and not here: the plans that can
   be started on this page were two screens down. There, everything comes
   first and the day last; a desktop keeps cheapest first, in one row. */
@media (max-width: 600px) {
  .pp-plan.pp-main { order: -1; }
  .pp-plan#per-tool { order: 1; }
}
.pp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.pp-plan h3 { margin: 0; font-size: var(--text-lg); }
/* What paying for the year saves, against twelve monthly payments. */
.pp-save { padding: 2px 9px; border-radius: var(--radius-pill); font: 600 var(--text-2xs)/1.6 var(--font-ui); white-space: nowrap; color: var(--accent-strong); background: var(--accent-soft); }
/* A flex row, so on a narrow card the note under the price wraps whole
   onto its own line instead of leaving its last word a line below. */
.pp-plan .pp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); margin: 0; font: 700 var(--text-2xl)/1.15 var(--font-headline); color: var(--ink); }
.pp-plan .pp-price small { font: 500 var(--text-sm)/1.45 var(--font-ui); color: var(--ink-faint); }
/* What each plan gives, as a list the eye can run down and compare across
   the three, rather than a sentence with semicolons in it. */
.pp-feats { flex: 1 0 auto; margin: 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--rule); list-style: none; }
.pp-feats li { position: relative; margin: 0 0 var(--space-2); padding-left: 22px; font-size: var(--text-sm); line-height: var(--leading-ui); color: var(--ink-soft); }
.pp-feats li:last-child { margin-bottom: 0; }
.pp-feats li::before { content: ""; position: absolute; left: 2px; top: 0.35em; width: 10px; height: 5px; border-left: 1.5px solid var(--accent-strong); border-bottom: 1.5px solid var(--accent-strong); transform: rotate(-45deg); }
.pp-feats li:first-child { color: var(--ink); font-weight: 600; }
.pp-feats a { color: var(--accent-strong); }
.pp-plan .btn { min-height: 44px; text-decoration: none; }
/* The monthly price is a link to its own checkout, so it looks like one,
   under the button it is the alternative to. */
.pp-pick { display: block; margin: var(--space-2) 0 6px; font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); }
.pp-pick-select { display: block; width: 100%; min-height: 44px; margin-bottom: var(--space-3); }
.pp-alt { display: inline-flex; align-self: center; align-items: center; min-height: 44px; font-size: var(--text-sm); font-weight: 500; color: var(--accent-strong); text-decoration: none; }
.pp-alt::after { content: "\2192"; margin-left: 6px; transition: transform var(--dur-4) var(--ease-spring); }
.pp-alt:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp-alt:hover::after { transform: translateX(3px); }
/* Pro's two subscriptions as two equal buttons, each saying what follows
   the free days; the line under them says what the trial is. */
.pp-trials { display: flex; flex-direction: column; gap: var(--space-2); }
.pp-trials .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-wrap: balance; font-variant-numeric: tabular-nums; }
.pp-trial-note { margin: 0; font-size: var(--text-xs); line-height: var(--leading-ui); color: var(--ink-soft); text-align: center; }
/* The fine print is small, so it is set in the softer ink rather than the
   faintest: the faint ink fell under 4.5:1 on the raised sign-in panel. */
.pp-fine { max-width: var(--measure); margin: var(--space-4) 0 0; font-size: var(--text-xs); line-height: var(--leading-prose); color: var(--ink-soft); }
.pp-fine a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.pp-status { margin: 0 0 18px; padding: var(--space-4) 18px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--ink); font-size: var(--text-md); line-height: var(--leading-prose); }
.pp-status[hidden] { display: none; }
.pp-status.pp-bad { background: var(--warn-soft); }
/* The moment Pro comes on, the notice sends out one ring of light. */
.pp-status[data-state="ok"] { animation: pp-lit var(--dur-5) var(--ease-emph); }
@keyframes pp-lit {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
  to { box-shadow: 0 0 0 16px color-mix(in srgb, var(--accent) 0%, transparent); }
}
.pp-key { width: 100%; min-height: 88px; padding: 10px var(--space-3); font: var(--text-xs) var(--font-mono); color: var(--ink); background: var(--paper-inset); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); word-break: break-all; resize: vertical; }
.pp-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: 10px; }
.pp-row input[type=email] { flex: 1 1 240px; min-height: 44px; padding: 10px var(--space-3); font-size: var(--text-md); color: var(--ink); background: var(--paper-inset); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); }
.pp-row .btn { min-height: 44px; }
.pp-list { list-style: none; padding: 0; margin: 0 0 14px; }
.pp-list li { position: relative; isolation: isolate; display: flex; gap: var(--space-3); padding: 11px 0; border-top: 1px solid var(--rule); font-size: var(--text-sm); line-height: var(--leading-prose); margin: 0; }
.pp-list li:last-child { border-bottom: 1px solid var(--rule); }
.pp-list b { flex: 0 0 170px; font-weight: 600; color: var(--ink); }
.pp-list span { color: var(--ink-soft); }
@media (max-width: 560px) { .pp-list li { flex-direction: column; gap: 2px; } .pp-list b { flex: none; } }

/* ---- Pointed at.

   A plan lifts, a light sits under the pointer (theme.css draws it and
   motion.js moves it, as it does on the front door's tiles), and its
   edge warms to the accent. The buttons glow in their own colour. Only
   with a real pointer: a finger has no hover, and a card that lifted on
   a tap would still be lifted after it. theme.css's motion-off rule
   stills all of it. */
.pp-plan { transition: transform var(--dur-3) var(--ease-standard), box-shadow var(--dur-3) var(--ease-standard), border-color var(--dur-3) var(--ease-standard); }
.pp-plan .btn { transition: transform var(--dur-3) var(--ease-standard), box-shadow var(--dur-3) var(--ease-standard), border-color var(--dur-3) var(--ease-standard); }
.pp-list li::before {
  content: "";
  position: absolute;
  inset: 0 -12px;
  z-index: -1;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
  box-shadow: inset 2px 0 0 var(--accent-strong);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .pp-plan:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--rule));
    box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--accent-strong) 60%, transparent),
      0 0 30px -8px color-mix(in srgb, var(--accent) 40%, transparent);
  }
  .pp-plan.pp-main:hover {
    box-shadow: 0 0 0 1px var(--accent-strong), 0 26px 52px -26px color-mix(in srgb, var(--accent-strong) 70%, transparent),
      0 0 34px -8px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .pp-plan .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent-strong) 85%, transparent); }
  .pp-plan .btn:active { transform: translateY(0) scale(0.98); }
  .pp-list li:hover::before { opacity: 1; }
}

/* The three plans arrive a --os-step apart once their panel has risen,
   and each plan's saving lands on the spring as its plan settles.
   theme.css's motion-off rule makes each a fade. */
.pp-plan { --os-fade: var(--dur-fade); --pp-at: calc(var(--os-step) * 4); animation: os-rise var(--dur-4) var(--ease-emph) var(--pp-at) backwards; }
.pp-plan + .pp-plan { --pp-at: calc(var(--os-step) * 5); }
.pp-plan + .pp-plan + .pp-plan { --pp-at: calc(var(--os-step) * 6); }
.pp-plan .pp-save { --os-fade: var(--dur-fade); animation: os-pop var(--dur-4) var(--ease-spring) calc(var(--pp-at) + var(--dur-3)) backwards; }

/* A subscriber sees their plan and not the plans, with nothing to buy
   twice: data-pro is written by theme.js before the first paint and kept
   in step by pro.js. A pass holder still sees the plans (pp-open), since
   a pass is what somebody buys before subscribing. */
.pp-invite { margin: 18px 0 var(--space-1); padding: var(--space-4) 18px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-inset); }
.pp-invite h3 { margin: 0 0 6px; font-size: var(--text-md); }
.pp-invite p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-prose); color: var(--ink-soft); }
.pp-invite .pp-row input { flex: 1 1 260px; min-height: 44px; padding: 10px var(--space-3); font: var(--text-sm) var(--font-mono); color: var(--ink); background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); }
/* The three plans side by side, row by row. On a phone the labels take
   the width they need and the three columns share the rest. */
.pp-compare { margin: var(--space-6) 0 var(--space-1); overflow-x: auto; }
.pp-compare h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.pp-compare table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.45; }
.pp-compare th, .pp-compare td { padding: 9px var(--space-2); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.pp-compare thead th { font: 600 var(--text-2xs)/1.3 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.pp-compare tbody th { font-weight: 500; color: var(--ink); }
.pp-compare td { color: var(--ink-soft); }
.pp-compare .pp-no { color: var(--ink-faint); }
.pp-compare .pp-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) { .pp-compare th, .pp-compare td { padding: var(--space-2) var(--space-1); font-size: var(--text-xs); } .pp-compare thead th { font-size: var(--text-2xs); } }
/* Every way to pay, and what Pro replaces: the same table, with figures
   lined up and the year's sum set off from the rows above it. */
.pp-compare .pp-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-compare td { font-variant-numeric: tabular-nums; }
.pp-compare td a, .pp-compare th a { color: var(--accent-strong); }
.pp-compare .pp-sub { display: block; margin-top: 2px; font-size: var(--text-xs); font-weight: 400; color: var(--ink-faint); }
.pp-compare tfoot th, .pp-compare tfoot td { border-bottom: 0; border-top: 1px solid var(--rule-strong); color: var(--ink); }
.pp-compare tfoot .pp-total th, .pp-compare tfoot .pp-total td { border-top: 1px solid var(--rule); font-weight: 600; color: var(--accent-strong); }
.pp-compare td[data-label="Source"] a { overflow-wrap: anywhere; }
/* On a phone a four-column table is a sideways scroll, so each row
   becomes a short block: the plan, then each cell under its own label. */
@media (max-width: 560px) {
  .pp-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pp-stack, .pp-stack tbody, .pp-stack tfoot, .pp-stack tr, .pp-stack th, .pp-stack td { display: block; width: auto; }
  .pp-stack tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
  .pp-stack th, .pp-stack td, .pp-stack tfoot th, .pp-stack tfoot td { padding: 2px 0; border: 0; font-size: var(--text-sm); }
  .pp-stack tfoot tr { border-bottom: 0; border-top: 1px solid var(--rule); }
  .pp-stack tfoot .pp-total th, .pp-stack tfoot .pp-total td { border: 0; }
  .pp-stack td:empty { display: none; }
  .pp-stack td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-faint); }
}

/* The page in figures, under its introduction, and the way round it. */
.pp-sum { margin: var(--space-3) 0 0; font-size: var(--text-sm); line-height: var(--leading-prose); color: var(--ink-soft); }
.pp-sum a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.pp-sum a:hover { border-bottom-color: var(--accent-strong); }
.pp-sum b { font-variant-numeric: tabular-nums; font-weight: 600; }
.pp-jump { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin: var(--space-2) 0 0; }
.pp-jump a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: var(--text-sm); font-weight: 500; color: var(--accent-strong); text-decoration: none; }
.pp-jump a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp-jump a[hidden] { display: none; }
.pp-seats { margin: 18px 0 var(--space-1); padding: var(--space-4) 18px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-inset); }
.pp-seats h3 { margin: 0 0 6px; font-size: var(--text-md); }
.pp-seats p { margin: 0 0 10px; font-size: var(--text-sm); line-height: var(--leading-prose); color: var(--ink-soft); }
.pp-seats .btn { min-height: 44px; text-decoration: none; }
.pp-own { display: none; }
:root[data-pro] .pp-own { display: block; }
:root[data-pro] .pp-buyer:not(.pp-open) { display: none; }

/* ---------------------------------------------------------------
   Sign in, over the page (signin.js): a dialog with the same forms as the
   panel (paywall({ signin: true })), and for a subscriber the bar's menu
   of the plan. Both are drawn once this sheet has arrived.
   --------------------------------------------------------------- */
.si-dialog {
  margin: auto;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: auto;
}
.si-dialog::backdrop { background: rgba(10, 10, 14, 0.55); }
.si-card {
  --os-fade: var(--dur-fade);
  position: relative;
  box-sizing: border-box;
  padding: 22px 24px 20px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.45);
  animation: os-rise var(--dur-3) var(--ease-emph) backwards;
}
.si-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.si-top h2 { margin: 0; padding-top: 6px; font: 700 var(--text-2xl)/1.2 var(--font-headline); color: var(--ink); }
.si-close {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; margin: -4px -10px 0 0;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-soft); cursor: pointer;
}
.si-close:hover { color: var(--ink); background: var(--paper-inset); }
.si-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.si-lead { margin: 0 0 18px; max-width: 60ch; font-size: var(--text-md); line-height: 1.55; color: var(--ink-soft); }
.si-dialog .pro-inline { margin: 0; }
.si-foot { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: var(--text-sm); line-height: 1.5; color: var(--ink-soft); }
.si-foot a { color: var(--accent-strong); }
.si-done-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; font-size: var(--text-lg); font-weight: 650; color: var(--ink); }
.si-done-head svg, .si-menu-plan svg { flex: none; color: var(--good); }
.si-done-sub { margin: 0 0 18px; font-size: var(--text-md); line-height: 1.55; color: var(--ink-soft); }
.si-done .btn, .si-menu .btn { min-height: 44px; padding: 10px 18px; font-size: var(--text-sm); line-height: 1.3; }
@media (max-width: 520px) {
  .si-card { padding: 18px 16px 16px; }
}

.si-menu {
  --os-fade: var(--dur-fade);
  position: fixed;
  z-index: 10000;
  box-sizing: border-box;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  overflow: auto;
  padding: 14px 8px 8px;
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.45);
  animation: os-rise-soft var(--dur-2) var(--ease-standard) backwards;
}
.si-menu-plan { display: flex; align-items: center; gap: 8px; margin: 0 8px 4px; font-size: var(--text-md); }
.si-menu-plan b { font-weight: 650; }
.si-menu-until { margin: 0 8px 10px; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-soft); }
/* What the subscriber pays, and paying by the year instead. */
.si-menu-terms { margin: -6px 8px 10px; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.si-menu-yearly { margin: -4px 8px 10px; font-size: var(--text-sm); line-height: 1.5; font-variant-numeric: tabular-nums; }
.si-menu-yearly a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.si-menu-yearly a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.si-menu .pro-bill { margin: 0 8px 10px; }
.si-menu-bill:empty { display: none; }
.si-menu-items { padding-top: 6px; border-top: 1px solid var(--rule); }
.si-item {
  display: flex; align-items: center; width: 100%; min-height: 44px; box-sizing: border-box;
  padding: 0 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink);
  font: 600 var(--text-sm)/1.3 var(--font-sans); text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.si-item:hover, .si-item[aria-expanded="true"] { background: var(--paper-inset); }
.si-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.si-item-out { color: var(--danger); }
.si-sub { margin: 2px 10px 10px; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-soft); }
.si-sub[hidden] { display: none; }
.si-sub p { margin: 0 0 10px; }
.si-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* Heard, not seen: what signing out said once the menu has gone. */
.si-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* /pro#signin, arrived at from a link: the section at the foot of a long
   page is marked, so the eye lands on it (pro.html brings it into view and
   puts the focus in its first field). */
#signin { scroll-margin-top: 112px; }
#signin:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); transition: box-shadow var(--dur-4) var(--ease-standard), border-color var(--dur-4) var(--ease-standard); }

/* A paid application's tour (pro-code/tour.js): the card beside each
   stop, drawn as the Sovereign Suite's and the Engineering Suite's are.
   Its buttons are the application's own, so they are its size and
   colours, 44 pixels on a phone included. It rises over everything but a
   dialog. */
.os-tour {
  position: fixed; z-index: 1001; width: min(320px, calc(100vw - 16px)); box-sizing: border-box; padding: 12px 14px;
  border-radius: var(--radius-md); background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 1px var(--accent), 0 14px 36px -10px rgba(0, 0, 0, .45);
  font: var(--text-xs)/1.45 var(--font-sans);
}
.os-tour h2 { margin: 0 0 4px; font: 600 var(--text-sm)/1.35 var(--font-sans); color: var(--ink); }
.os-tour p { margin: 0 0 10px; color: var(--ink-soft); }
.os-tour .os-tour-n { margin: 0 0 4px; font-size: var(--text-2xs); font-variant-numeric: tabular-nums; color: var(--accent-strong); }
.os-tour-row { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.os-tour-target { outline: 2px solid var(--accent) !important; outline-offset: 2px; }

/* The matter file's window (pro-code/obscura-matter.js), the same in
   Practice, Case, PDF Studio and Books: opening one, saving one, and the
   review of every change before it is taken in. What is behind it is
   dimmed with a solid colour. */
.om-dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  box-sizing: border-box; padding: 0; border: 0; border-radius: var(--radius-lg);
  background: var(--paper-raised); color: var(--ink);
  box-shadow: 0 0 0 1px var(--rule), 0 30px 70px -30px rgb(0 0 0 / 0.55);
}
.om-dialog.is-wide { width: min(760px, calc(100vw - 32px)); }
.om-dialog::backdrop { background: rgb(10 10 14 / 0.5); }
.om-form { display: grid; gap: var(--space-3); padding: var(--space-5); font: var(--text-sm)/1.5 var(--font-ui); }
.om-form.is-busy { cursor: progress; }
.om-h { margin: 0; font: 600 var(--text-xl)/1.2 var(--font-headline); color: var(--ink); text-wrap: balance; }
.om-h3 { margin: 0 0 var(--space-1); font: 650 var(--text-2xs)/1.3 var(--font-ui); letter-spacing: 0.055em; text-transform: uppercase; color: var(--ink-faint); }
.om-lead, .om-note, .om-matter { margin: 0; color: var(--ink-soft); }
.om-note { font-size: var(--text-xs); }
.om-matter { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.om-mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0.02em; }
.om-faint { color: var(--ink-faint); font-weight: 400; }
.om-h3 .om-faint { margin-left: var(--space-1); letter-spacing: 0; }
.om-err { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); }
.om-err[hidden] { display: none; }
.om-field { display: grid; gap: var(--space-1); min-width: 0; }
.om-field > span { font-size: var(--text-2xs); font-weight: 600; color: var(--ink-soft); }
.om-field > :is(input, select) { width: 100%; min-width: 0; min-height: 40px; box-sizing: border-box; padding: 0 var(--space-3); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: inherit; }
.om-field > small { font-size: var(--text-2xs); color: var(--ink-faint); }
.om-check { display: flex; align-items: flex-start; gap: var(--space-2); min-height: 44px; padding: var(--space-2) 0; cursor: pointer; }
.om-check > input { flex: none; margin-top: 3px; }
.om-check b, .om-parts b, .om-files b { display: block; color: var(--ink); font-weight: 600; }
.om-people { display: grid; margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-md); }
.om-people legend { padding: 0 var(--space-1); font-size: var(--text-2xs); font-weight: 600; color: var(--ink-soft); }
.om-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.om-table :is(th, td) { padding: var(--space-2); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.om-table thead th { font-size: var(--text-2xs); font-weight: 600; color: var(--ink-faint); }
.om-table tbody th { width: 30%; font-weight: 600; color: var(--ink); }
.om-table tr.is-me th { color: var(--accent-strong); }
.om-parts, .om-files, .om-review ul, .om-chain ol { margin: 0; padding: 0; list-style: none; }
.om-parts li, .om-files li { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-1) 0; border-bottom: 1px solid var(--rule); color: var(--ink-soft); }
.om-parts li > .om-check { flex: 1; padding: var(--space-1) 0; }
.om-sealed, .om-none { min-height: 44px; align-items: center; }
.om-none b { color: var(--ink-soft); }
.om-files li { align-items: center; justify-content: space-between; min-height: 44px; }
.om-files li > span { min-width: 0; overflow-wrap: anywhere; }
.om-lock, .om-gap { flex: none; width: 16px; height: 16px; }
.om-lock { fill: none; stroke: var(--ink-faint); stroke-width: var(--icon-stroke); stroke-linejoin: round; }
.om-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.om-review { display: grid; gap: var(--space-4); max-height: min(52vh, 520px); overflow: auto; padding-right: var(--space-1); }
.om-change { padding: var(--space-1) 0; border-bottom: 1px solid var(--rule); }
.om-change .om-check { min-height: 40px; padding: var(--space-1) 0; }
.om-kind { display: block; font-size: var(--text-2xs); font-weight: 600; color: var(--ink-faint); }
.om-change.is-added .om-kind { color: var(--good); }
.om-change.is-removed .om-kind { color: var(--danger); }
.om-change.is-conflict { padding: var(--space-2) 0; }
.om-change.is-conflict .om-kind { color: var(--warn); }
.om-change.is-conflict > b { display: block; color: var(--ink); overflow-wrap: anywhere; }
.om-fields { display: block; font-size: var(--text-2xs); color: var(--ink-faint); }
.om-choice { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-1); }
.om-choice label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; cursor: pointer; }
.om-chain summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--ink-soft); font-size: var(--text-xs); }
.om-chain ol { max-height: 200px; overflow: auto; font-size: var(--text-xs); color: var(--ink-soft); }
.om-chain li { padding: 2px 0; }
.om-chain time { display: inline-block; min-width: 13ch; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.om-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.om-actions .btn, .om-row .btn, .om-files .btn { min-height: 44px; }
@media (max-width: 480px) {
  .om-form { padding: var(--space-4); }
  .om-actions .btn { flex: 1 1 auto; }
  .om-table tbody th { width: auto; }
}