/* Kundenportal: baut auf site-tokens.css und site.css der Website auf (Kopfzeile, Fußzeile, Buttons, Preiskarten,
   Schriften). Wie dort gilt: keine eigenen Farben, Größen, Abstände oder Rundungen, alles kommt aus den Tokens
   (operations/scripts/check-tokens.py prüft das auch für diese Datei). */

.portal-main {
  width: min(100% - 2 * var(--gutter), var(--portal-width));
}

/* A tool, not a page to sell: no concert photo behind it, the content starts close under the menu. Sign-in, create
   account, the dashboard, the purchase, pass, support and withdrawal pages keep the website's photo. */
body.portal-page:not([data-page="login"], [data-page="signup"], [data-page="dashboard"], [data-page="plans"], [data-page="pass"], [data-page="support"], [data-page="withdrawal"]) .site-backdrop {
  display: none;
}

/* the footer stands at the bottom of the window, also when a page is short (sign-in, folded dashboard) */
body.portal-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body.portal-page .legal-main {
  flex: 1 0 auto;
  padding-top: calc(var(--header-height) + var(--space-8));
  padding-bottom: var(--space-12);
}

.portal-hero {
  padding-bottom: var(--space-6);
}

.portal-title {
  margin: var(--space-2) 0 var(--space-1);
  font-family: var(--font-brand);
  font-size: var(--portal-title);
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-brand);
}

.portal-lead {
  max-width: 46rem;
  margin: var(--space-2) 0 0;
  color: var(--text-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.portal-card {
  margin-bottom: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-base);
}

.portal-card-narrow {
  max-width: 34rem;
}

.portal-card-head {
  margin-bottom: var(--space-5);
}

.portal-card-head h2,
.portal-license h3 {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: 900;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-brand);
}

.portal-card-head h2,
.portal-license h3 {
  font-size: var(--portal-card-title);
}

/* the title of a card with its info icon beside it */
.portal-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* the quiet info icon, as in the app's settings (ui.js infoTip): the explanation shows on hover, focus or a tap */
.info-tip {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-dim);
  cursor: help;
  transition: var(--transition-quick);
}

.info-tip[hidden] {
  display: none;
}

.info-tip:hover,
.info-tip:focus-visible {
  color: var(--text);
}

.info-tip-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.info-tip-text {
  position: fixed;
  z-index: var(--z-tip);
  max-width: min(280px, 100vw - 16px);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-card);
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  pointer-events: none;
}

/* a card whose title stands in it directly (support, withdrawal): the same title and the same room under it */
.portal-card > h2 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-brand);
  font-size: var(--portal-card-title);
  font-weight: 900;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-brand);
}

.portal-stack {
  display: grid;
  gap: var(--space-5);
}

/* --- Forms --- */

.portal-choice > legend {
  color: var(--text-muted);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.portal-files {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  list-style: none;
}

/* Support and withdrawal: the cards only as wide as the form with its labels on the left */
.portal-form-card {
  max-width: calc(var(--portal-form-width) + 2 * var(--space-6));
}

/* a purchase to withdraw from: the pass's badge in the first line, order and dates small beneath */
.portal-order {
  display: grid;
  gap: var(--space-1);
}

.portal-order small {
  margin: 0;
}

/* Screenshots on the support page: a quiet dashed field to drop images on or click; the file input hides inside it */
.portal-drop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--line-bright);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: var(--text-sm);
  text-align: center;
  cursor: pointer;
  transition: var(--transition-quick);
}

.portal-drop small {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.portal-drop:hover,
.portal-drop.is-over,
.portal-drop:focus-within {
  border-color: var(--text);
  color: var(--text);
}

.portal-files li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Fields and checks switched off by the form (e.g. VAT ID for personal use) stay hidden despite their display rule */
.portal-field[hidden],
.portal-files[hidden],
.portal-check[hidden],
.portal-hint[hidden] {
  display: none;
}

/* Customer type (ADR 0031 of Connect): a fieldset styled like the other fields */
.portal-choice {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
}

.portal-choice > legend {
  margin-bottom: var(--space-2);
  padding: 0;
}

/* screenshots for a support request: the browser's own file button in the site's look */
.portal-input::file-selector-button {
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-sm);
  background: var(--surface-overlay);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.portal-textarea {
  min-height: calc(var(--space-6) * 6);
  resize: vertical;
  font: inherit;
}

.portal-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.portal-check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: var(--space-1) 0 0;
  accent-color: var(--accent);
}

.portal-inline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.portal-notice {
  overflow-wrap: anywhere;
  margin: 0 0 var(--space-6);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--text);
}

/* --- Licenses, keys, devices, invoices --- */

/* the keys as rows of the tab, a line between them, no card inside the card */
.portal-license {
  display: block;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}

.portal-license:first-child {
  padding-top: 0;
  border-top: 0;
}

.portal-licenses-foot {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.portal-license-off {
  opacity: 0.6;
}

/* the plan of a key as a badge, like the app's sidebar shows it (operator-plan-badge): the plan's colour mixed into the
   background and into white, yellow for a pass, grey for Free */
.portal-plan-badge {
  --plan-color: var(--accent);
  display: inline-block;
  padding: var(--space-hair) var(--space-2);
  border-radius: var(--radius-badge);
  background: color-mix(in srgb, var(--plan-color) var(--plan-badge-tint), transparent);
  color: color-mix(in srgb, var(--plan-color) var(--plan-badge-tint-text), var(--text-bright));
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
}

.portal-plan-badge.is-free {
  --plan-color: var(--plan-free);
}

/* a key folded: the plan's badge in front, its dates in a few words beside it, the status and an arrow on the right */
.portal-license-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  list-style: none;
  cursor: pointer;
}

.portal-license-head::-webkit-details-marker {
  display: none;
}

.portal-license-head::after {
  content: "";
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  margin-left: calc(-1 * var(--space-1));
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: var(--transition-open);
}

.portal-license[open] > .portal-license-head::after {
  transform: rotate(225deg);
}

/* while a key closes (dashboard.js keeps it open until its height has glided back) the arrow turns back at once */
.portal-license.is-closing > .portal-license-head::after {
  transform: rotate(45deg);
}

.portal-license-body {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-4);
}

.portal-license-head h3 {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.portal-license-terms {
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: normal;
}

/* the foot of the account: the customer number on the left, "Download my data · Close account" on the right */
.portal-account-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* "Download my data · Close account": seldom needed, so in a dimmer grey than the line, white only under the pointer */
.portal-account-foot .portal-link {
  color: var(--text-dim);
}

.portal-account-foot .portal-link:hover,
.portal-account-foot .portal-link:focus-visible {
  color: var(--text);
}

/* after the keys: more licenses, and the one line for a broken or lost computer */
.portal-licenses-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}

/* Status of a license or request, coloured like the app's slot states */
.portal-badge {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-xs);
  background: var(--break-soft);
  color: var(--break-bright);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.portal-badge-on {
  background: var(--show-soft);
  color: var(--show-bright);
}

.portal-badge-ready {
  background: var(--accent-soft);
  color: var(--accent);
}

.portal-badge-progress {
  background: var(--changeover-soft);
  color: var(--changeover-bright);
}

.portal-badge-off {
  background: transparent;
  color: var(--text-dim);
}

.portal-key-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.portal-key {
  flex: 1 1 16rem;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-black);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-key);
  overflow-wrap: anywhere;
}

.portal-devices {
  display: grid;
  gap: var(--space-3);
}

.portal-device {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}

.portal-device strong {
  color: var(--text);
  font-weight: 700;
}

.portal-invoice,
.portal-download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}

/* the list starts without a line above its first invoice */
.portal-invoice:first-child {
  padding-top: 0;
  border-top: 0;
}

.portal-invoice h3,
.portal-download h3 {
  margin: 0;
  font-size: var(--text-base);
}

/* the app's row: as much room under it as the card has above it */
.portal-app {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-6);
}

/* the Apple or Windows logo before each download */
.portal-platform-icon {
  flex: none;
  width: var(--space-4);
  height: var(--space-4);
  fill: currentColor;
}

.portal-app img {
  flex: none;
  width: var(--space-10);
  height: var(--space-10);
}

.portal-app p {
  margin: 0;
}

.portal-download h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Rechnungsempfänger (ADR 0020 von Connect): so steht es auf der Rechnung */
.portal-address {
  margin: 0;
  color: var(--text);
  font-style: normal;
  line-height: var(--leading-relaxed);
}

/* a free line between the address and its button */
.portal-address + .portal-actions {
  margin-top: var(--space-6);
}

.portal-danger {
  border-color: var(--danger);
  color: var(--danger);
}

.button.button-primary.portal-danger {
  background: var(--danger);
  color: var(--on-danger);
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4);
}

/* --- Support (ADR 0029 von Connect): Liste der eigenen Anfragen --- */

.portal-requests {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-request {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
}

.portal-request:first-child {
  border-top: 0;
}

.portal-request p {
  margin: var(--space-1) 0 0;
}

/* --- Kaufseite: die Preiskarten der Startseite (site.css), hier ohne Free, also zwei nebeneinander --- */

.pricing-plans.portal-pricing {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* side by side each card is as wide as on the website, where three share the 1200px column */
@media (min-width: 901px) {
  body[data-page="plans"] {
    --portal-plan-width: calc((min(100vw - 2 * var(--gutter), 1200px) - 2 * var(--space-4)) / 3);
  }

  .pricing-plans.portal-pricing {
    grid-template-columns: repeat(2, var(--portal-plan-width));
  }

  .portal-purchase-bar,
  body[data-page="plans"] .pricing-footnote {
    max-width: calc(2 * var(--portal-plan-width) + var(--space-4));
  }
}

/* above the plans: "Change billing details" on the left, the voucher on the right; the billing form opens across the
   whole width */
.portal-purchase-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-4);
}

.portal-purchase-bar > .portal-card {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
}

/* a long address or a long button label wraps inside the card instead of widening the page */
.portal-form > * {
  min-width: 0;
}

.portal-invoice-line .portal-hint {
  margin: 0;
}

.portal-invoice-line strong {
  color: var(--text);
}

.portal-voucher-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.portal-voucher-inline .portal-input {
  width: 14rem;
}

/* the links of the purchase, pass, support and withdrawal pages in white, like those under the sign-in forms; yellow under the
   pointer */
body[data-page="plans"] .portal-link,
body[data-page="pass"] .portal-link,
body[data-page="support"] .portal-link,
body[data-page="withdrawal"] .portal-link {
  color: var(--text);
}

body[data-page="plans"] .portal-link:hover,
body[data-page="plans"] .portal-link:focus-visible,
body[data-page="pass"] .portal-link:hover,
body[data-page="pass"] .portal-link:focus-visible,
body[data-page="support"] .portal-link:hover,
body[data-page="support"] .portal-link:focus-visible,
body[data-page="withdrawal"] .portal-link:hover,
body[data-page="withdrawal"] .portal-link:focus-visible {
  color: var(--accent);
}

/* Personal or business prices: centred between the invoice block and the plans */
.portal-audience {
  display: flex;
  justify-content: center;
  margin: var(--space-8) 0;
  text-align: center;
}

/* Zustimmung direkt über dem Kaufen-Knopf jeder Karte (ADR 0030 von Connect) */
.portal-plan-buy {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.portal-plan-buy > .pricing-plan-action {
  margin-top: 0;
}

.portal-plan-consents {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.portal-plan-consent {
  font-size: var(--text-xs);
  text-align: left;
}

/* Auswahl des Passes beim Upgrade eines Schlüssels (ADR 0043 von Connect): zwei Karten nebeneinander, ein Tipp wählt */
.portal-pass-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-3);
}

.portal-pass-option {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: var(--transition-quick);
}

/* the badge of the pass keeps its own width */
.portal-pass-option {
  justify-items: start;
}

/* the upgrade in one column, as wide as a form: links above, then one card with passes, more keys and payment */
.portal-pass-page {
  max-width: calc(var(--portal-form-width) + 2 * var(--space-6));
}

.portal-pass-more {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.portal-pass-more summary {
  width: max-content;
  list-style: none;
  cursor: pointer;
}

.portal-pass-more summary::-webkit-details-marker {
  display: none;
}

.portal-pass-more-body {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

.portal-pass-card .portal-plan-buy {
  margin-top: var(--space-5);
}

.portal-pass-total {
  margin: 0 0 var(--space-4);
  color: var(--text);
}

.portal-pass-option:hover,
.portal-pass-option:focus-visible {
  border-color: var(--accent-line);
}

.portal-pass-option-chosen {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.portal-pass-price {
  color: var(--text);
  font-weight: 700;
}

.portal-stepper {
  max-width: 8rem;
}

/* Blöcke der Seite "Pass auf einen Schlüssel", solange die Rechnungsdaten fehlen */
.portal-plan-consents[hidden],
.portal-plan-buy .portal-actions[hidden],
.portal-plan-buy[hidden],
.portal-voucher[hidden],
.portal-audience[hidden],
.portal-tab-panel[hidden] {
  display: none;
}

/* Gutschein (ADR 0035 von Connect): Code-Feld der Seite, Rabatt je Tarif-Karte */
.portal-voucher-form {
  display: grid;
  gap: var(--space-3);
}

.portal-voucher-line {
  margin: 0;
  color: var(--show-bright);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.portal-voucher-line.portal-voucher-off {
  color: var(--text-muted);
}

.portal-voucher-line[hidden] {
  display: none;
}

/* --- The compact scale of the portal: fields and buttons of an app, labels in plain text --- */

body.portal-page .portal-input {
  min-height: var(--portal-control);
  padding: var(--space-2) var(--space-3);
}

body.portal-page .button {
  min-height: var(--portal-control);
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}

body.portal-page .portal-form {
  gap: var(--space-4);
}

body.portal-page .portal-field > span,
body.portal-page .portal-choice > legend {
  color: var(--text-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

/* Forms like a settings page: the label on the left, the field on the right, its hint under the field. In the narrow
   cards (sign-in, sign-up), the side column of the dashboard and on phones the label stays above its field. */
@media (min-width: 721px) {
  body.portal-page .portal-field:not(.portal-card-narrow .portal-field, .portal-aside .portal-field, .sign-in-steps .portal-field) {
    grid-template-columns: var(--portal-label-width) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-5);
    row-gap: var(--space-1);
    max-width: var(--portal-form-width);
  }

  body.portal-page .portal-field:not(.portal-card-narrow .portal-field, .portal-aside .portal-field, .sign-in-steps .portal-field) > * {
    grid-column: 2;
  }

  body.portal-page .portal-field:not(.portal-card-narrow .portal-field, .portal-aside .portal-field, .sign-in-steps .portal-field) > span {
    grid-row: 1;
    grid-column: 1;
  }

  /* a text area: its label at the top of it */
  body.portal-page .portal-field:not(.portal-card-narrow .portal-field, .portal-aside .portal-field, .sign-in-steps .portal-field):has(textarea) > span {
    align-self: start;
    padding-top: var(--space-2);
  }

  /* postal code and city each on a row of their own, like the other fields */
  body.portal-page .portal-form .portal-grid:not(.portal-aside .portal-grid) {
    display: contents;
  }

  /* buttons, boxes to tick and notes line up with the fields */
  body.portal-page .portal-form:not(.portal-card-narrow .portal-form, .portal-aside .portal-form, .sign-in-steps .portal-form) > .portal-actions,
  body.portal-page .portal-form:not(.portal-card-narrow .portal-form, .portal-aside .portal-form, .sign-in-steps .portal-form) > .portal-check,
  body.portal-page .portal-form:not(.portal-card-narrow .portal-form, .portal-aside .portal-form, .sign-in-steps .portal-form) > .portal-status,
  body.portal-page .portal-form:not(.portal-card-narrow .portal-form, .portal-aside .portal-form, .sign-in-steps .portal-form) > .portal-email-change.is-idle,
  body.portal-page .portal-voucher-form:not(.portal-aside .portal-voucher-form) > .portal-actions {
    max-width: calc(var(--portal-form-width) - var(--portal-label-width) - var(--space-5));
    margin-left: calc(var(--portal-label-width) + var(--space-5));
  }
}

/* --- Dashboard: the areas as tabs in the look of the app's segmented switch --- */

/* the tabs; the open one carries the info icon that explains its area */
.portal-tabs {
  display: flex;
  width: max-content;
  margin-bottom: var(--space-4);
  gap: var(--space-hair);
  max-width: 100%;
  padding: var(--space-hair);
  overflow-x: auto;
  border-radius: var(--radius-sm);
  background: var(--segmented-track);
  scrollbar-width: none;
}

.portal-tabs::-webkit-scrollbar {
  display: none;
}

.portal-tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--segmented-height);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-segment);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-quick);
}

.portal-tab:hover {
  color: var(--text);
}

.portal-tab[aria-selected="true"] {
  background: var(--segmented-active);
  color: var(--text-bright);
  font-weight: 700;
}

.portal-tab:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* --- Slim footer: the legal links in one line --- */

/* the footer follows the content closely: a short fade into its black and little room above its line (on a short
   page it still stands at the bottom of the window) */
.site-footer.portal-footer {
  padding-top: var(--space-8);
}

.site-footer.portal-footer::before {
  height: var(--space-12);
}

/* in the portal the links stand in the middle of the last line: the AI note gets a line of its own, centred */
.portal-footer .footer-ai {
  flex-basis: 100%;
  text-align: center;
}

.portal-footer .footer-bottom {
  margin-top: 0;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.portal-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

.portal-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition-quick);
}

.portal-footer-links a:hover {
  color: var(--text);
}

/* --- Purchase page: the plan cards of the home page at the portal's scale --- */

body.portal-page .portal-pricing .pricing-plan {
  padding: var(--space-6);
}

body.portal-page .portal-pricing .pricing-plan-head h2 {
  font-size: var(--text-card-title);
}

body.portal-page .portal-pricing .pricing-amount {
  font-size: var(--portal-price);
}

/* Touch screens: controls at least 44px high */
@media (pointer: coarse) {
  /* a finger needs more room than the small icon */
  .info-tip {
    width: 36px;
    height: 36px;
    margin: calc(-1 * var(--space-2)) 0;
  }

  body.portal-page .portal-input,
  body.portal-page .button {
    min-height: 44px;
  }

  .portal-tab,
  .portal-license-head,
  .portal-check {
    min-height: 44px;
  }

  .portal-footer-links {
    row-gap: 0;
  }

  .portal-footer-links a {
    padding-block: var(--space-2);
  }

  .portal-purchase-bar .portal-link,
  .sign-in-code-links .portal-link,
  .portal-account-foot .portal-link,
  .portal-pass-more summary,
  .sign-in-foot .portal-link {
    padding-block: var(--space-3);
  }
}

@media (max-width: 720px) {
  .portal-card {
    padding: var(--space-5);
  }

  .portal-invoice,
  .portal-download {
    flex-direction: column;
    align-items: flex-start;
  }

  .portal-license-head {
    flex-wrap: wrap;
  }

  /* every tab in view: two columns of tabs instead of a strip that hides half of them */
  .portal-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto;
    overflow-x: visible;
  }

  .portal-tab {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 0;
    padding-inline: var(--space-2);
    text-align: center;
  }
}

@media (max-width: 600px) {
  /* long labels (the withdrawal buttons) wrap inside the card */
  body.portal-page .portal-actions .button {
    white-space: normal;
    text-align: center;
    padding-block: var(--space-2);
  }

  /* a request's status under its title, so the title keeps the card's width */
  .portal-request {
    flex-direction: column;
    gap: var(--space-2);
  }

  /* a key: plan and terms on the first line, the status beneath, the arrow at the right of both */
  .portal-license-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
  }

  .portal-license-head > .portal-badge {
    grid-row: 2;
    justify-self: start;
  }

  .portal-license-head::after {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-left: 0;
  }

  /* the voucher field and its button on one row, the rest beneath */
  .portal-voucher-inline .portal-input {
    flex: 1 1 var(--space-30);
    width: auto;
    min-width: 0;
  }
}

/* the pass page: payment methods and delivery area left-aligned above the Stripe note, like the text around them */
.portal-pass-payment {
  justify-items: start;
  margin: var(--space-4) 0 0;
  text-align: left;
}

.portal-pass-payment .pay-methods,
.portal-pass-payment .pay-tiles {
  justify-content: flex-start;
}