/* Paying and what follows it: the paywall dialog (app and converter) and the pages after
   Checkout, for signing in and for withdrawing (paid.html, signin.html, withdraw.html, on top
   of home.css). The passes are two cards like title-block cells; the chosen one has the heavy
   rule. The pages are one white sheet with a heavy border on the drafting board, like the
   converter's settings. Graphite and white only: nothing here is measured. */

/* ---- Checking passes ---- */

/* The drawing viewer's loading screen while its passes are not all checked: Retry leads, "Show the
   preview for now" and Cancel follow as plain buttons (app.html; viewer-shell.css lays the screen out). */
#loading-check:not([hidden]) ~ #loading-preview, #loading-check:not([hidden]) ~ #loading-action { margin-top: 12px; background: var(--paper); color: var(--graphite); border-color: var(--rule); }

/* ---- Paywall ---- */

dialog.paywall { width: min(36rem, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.paywall h2 { margin-bottom: 6px; }
.paywall h3 { font: 600 16px/1.35 var(--text); margin: 0 0 6px; }
.paywall p { margin: 6px 0; }

.pass-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 12px; }
.pass-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-height: 0;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  white-space: normal;
  text-align: left;
}
.pass-option[aria-checked="true"] { border: 2px solid var(--graphite); padding: 9px 11px; }
.pass-name { font-weight: 600; }
.pass-price { font: 400 22px/1.2 var(--lettering); }
.pass-price small { font: 400 14px/1 var(--text); color: var(--pencil); }
.pass-for { color: var(--pencil); font-size: 13px; }

.pass-terms { border-top: 1px solid var(--graphite); padding-top: 12px; margin: 0; }
.check.consent { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; cursor: pointer; }
.check.consent input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.pass-terms .row { margin-top: 12px; }
.primary.big { min-height: 44px; padding: 8px 20px; font-weight: 500; }
.paywall-message:empty { display: none; }

/* Subscriptions of more than one subscriber: one full-width button each (paywall dialog, sign-in). */
.portal-choices { display: grid; gap: 8px; margin: 12px 0; }
.portal-choices p { margin: 0; }
.portal-choices button { justify-content: flex-start; min-height: 44px; white-space: normal; text-align: left; }

@media (max-width: 480px) {
  .pass-choice { grid-template-columns: 1fr; }
  .pass-terms .primary.big { width: 100%; justify-content: center; }
}

/* A button that reads as a link, inside a sentence (the converter's "Get a pass"). */
button.link {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
button.link:hover { text-decoration-thickness: 2px; }

/* ---- Where to send the confirmation of a pass paid without an email address ---- */

/* One email field and Send (account.js addressForm()): on the paid page, in the paywall, on the
   viewer's loading screen (which may be black) and under the converter's note. */
.address-form { margin: 12px 0; text-align: left; }
.address-form p { margin: 6px 0; }
.address-form .field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.address-form .field > span { font-weight: 500; }
.address-form input[type="email"] {
  min-height: 44px;
  padding: 6px 9px;
  border: 1px solid var(--pencil);
  border-radius: 3px;
  background: var(--paper);
  color: var(--graphite);
  font: inherit;
  width: 100%;
  max-width: 28rem;
}
.address-form .status-line:empty { display: none; }
#loading-form .address-form button { width: 100%; justify-content: center; }

/* ---- Pages: payment, sign-in, withdrawal ---- */

.pay-desk { background: var(--board); padding: clamp(20px, 5vw, 56px) 0; }
.pay-sheet {
  max-width: 40rem;
  background: var(--paper);
  border: 2px solid var(--graphite);
  padding: clamp(18px, 3vw, 28px);
}
.pay-sheet h1 { font: 400 clamp(30px, 4vw, 44px)/1.1 var(--lettering); margin-bottom: 14px; }
.pay-sheet h2 { font: 600 18px/1.3 var(--text); margin: 18px 0 8px; }
.pay-sheet .field { display: flex; flex-direction: column; gap: 4px; margin: 14px 0; }
.pay-sheet .field > span { font-weight: 500; }
.pay-sheet input[type="text"], .pay-sheet input[type="email"], .pay-sheet input[type="date"], .pay-sheet select {
  min-height: 40px;
  padding: 6px 9px;
  border: 1px solid var(--pencil);
  border-radius: 3px;
  background: var(--paper);
  font: inherit;
  width: 100%;
  max-width: 28rem;
}
.pay-sheet fieldset { border: 0; padding: 0; margin: 14px 0; }
.pay-sheet legend { font-weight: 500; padding: 0; margin-bottom: 6px; }
.pay-sheet .check { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.pay-sheet .check input { width: 18px; height: 18px; }
.pay-sheet .actions { margin: 20px 0 6px; align-items: center; }
.pay-sheet .notice { border-left: 3px solid var(--graphite); padding: 6px 0 6px 12px; margin: 14px 0; }
.statement { font: 500 18px/1.45 var(--text); margin: 8px 0; }
.letter {
  white-space: pre-wrap;
  font: 14px/1.5 var(--text);
  background: var(--wash);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  margin: 10px 0;
  overflow-wrap: anywhere;
}
.status-line { min-height: 1.5em; }
.status-line.error { font-weight: 600; }