/*
 * Portal scale and button roles (#74). Loaded last on the client area.
 *
 * One size scale for every logged-in portal page, whether the view comes from
 * the onboarding module (which used 56px buttons and 48px inputs) or the
 * Perfex theme (35px and 34px). Values from DESIGN.md: the Button Roles Rule
 * and the Oct 8 2026 roles (#87: Pay green, Support grey, Danger red), the Sixteen Rule for content text.
 * Desktop only for sizes; phones keep their 44px touch targets.
 */
:root {
  --pf-navy: #272976;
  --pf-navy-hover: #3d3f99;
  --pf-ink: #1a1c2e;
  --pf-line: rgba(39, 41, 118, 0.18);
  --pf-hover: #ecedf3;
  --pf-paper: #ffffff;
  /* Support is a grey button with a navy icon (#87, Oct 8): red stays
     destructive, green stays money. */
  --pf-support: #272976;
  --pf-support-hover: #3d3f99;
  --pf-support-tint: rgba(39, 41, 118, 0.08);
  /* Pay is the only green fill (#87). */
  --pf-pay: #15803d;
  --pf-pay-hover: #166534;
  --pf-pay-ink: #ffffff;
  --pf-secondary: #eceef3;
  --pf-secondary-hover: #dfe1ea;
  --pf-danger-line: #ee1b22;
  --pf-danger-text: #9a0a0f;
  --pf-danger-tint: rgba(238, 27, 34, 0.06);
  --pf-on-fill: #ffffff;
}
[data-theme="dark"] {
  --pf-ink: #f0f0f5;
  --pf-line: rgba(129, 140, 249, 0.28);
  --pf-hover: #1f1f35;
  --pf-paper: #1a1a2e;
  --pf-support: #818cf9;
  --pf-support-hover: #a5adfb;
  --pf-support-tint: rgba(129, 140, 249, 0.12);
  --pf-pay: #4ade80;
  --pf-pay-hover: #6ee7a0;
  --pf-pay-ink: #0f0f1a;
  --pf-secondary: #24243c;
  --pf-secondary-hover: #2e2e4a;
  --pf-danger-line: #ff4d52;
  --pf-danger-text: #ff4d52;
  --pf-danger-tint: rgba(255, 77, 82, 0.10);
}

/* ---- Button roles (every width) -------------------------------------- */

/* Primary: Passport Navy fill, every main action except paying. A plain
   btn-success from a module view (an Approve, an Accept) is Primary too:
   green belongs to paying and signing (#99). */
body.customers .btn-primary,
body.customers .btn-success,
body.customers .portal-btn.btn-primary {
  background: var(--pf-navy);
  border-color: var(--pf-navy);
  color: var(--pf-on-fill);
}
body.customers .btn-primary:hover,
body.customers .btn-primary:focus-visible,
body.customers .btn-success:hover,
body.customers .btn-success:focus-visible {
  background: var(--pf-navy-hover);
  border-color: var(--pf-navy-hover);
  color: var(--pf-on-fill);
}

/* Pay: the only green fill, so money is never confused with anything else
   (#87, owner Oct 8 2026; restores the Sep 8 rule). */
body.customers .btn-success.invoice-summary-cta,
body.customers .btn-success.inv-list-pay,
body.customers .portal-btn-pay,
body.customers .portal-btn.btn-primary.portal-btn-pay {
  background: var(--pf-pay);
  border-color: var(--pf-pay);
  color: var(--pf-pay-ink);
}
body.customers .btn-success.invoice-summary-cta:hover,
body.customers .btn-success.invoice-summary-cta:focus-visible,
body.customers .btn-success.inv-list-pay:hover,
body.customers .btn-success.inv-list-pay:focus-visible,
body.customers .portal-btn-pay:hover,
body.customers .portal-btn-pay:focus-visible,
body.customers .portal-btn.btn-primary.portal-btn-pay:hover {
  background: var(--pf-pay-hover);
  border-color: var(--pf-pay-hover);
  color: var(--pf-pay-ink);
}

/* Sign on the Convention is green too (#99, owner Oct 8 2026): green is
   the student's commitments, paying and signing. The page button, the phone
   sign bar and the signing dialog's final button. */
#contract-page .btn.doc-cta-sign,
.ic .btn.ic-btn-sign {
  background: var(--pf-pay);
  border-color: var(--pf-pay);
  color: var(--pf-pay-ink);
}
#contract-page .btn.doc-cta-sign:hover,
#contract-page .btn.doc-cta-sign:focus-visible,
.ic .btn.ic-btn-sign:hover,
.ic .btn.ic-btn-sign:focus-visible {
  background: var(--pf-pay-hover);
  border-color: var(--pf-pay-hover);
  color: var(--pf-pay-ink);
}

/* Secondary: grey fill, ink text (#87). */
body.customers .btn-default,
body.customers .portal-btn-ghost {
  background: var(--pf-secondary);
  border: 1px solid var(--pf-secondary);
  color: var(--pf-ink);
  box-shadow: none;
}
body.customers .btn-default:hover,
body.customers .btn-default:focus-visible,
body.customers .portal-btn-ghost:hover,
body.customers .portal-btn-ghost:focus-visible {
  background: var(--pf-secondary-hover);
  border-color: var(--pf-secondary-hover);
  color: var(--pf-ink);
}

/* Support: every way to reach the team. Grey like Secondary, navy icon. */
body.customers .btn-support {
  background: var(--pf-secondary);
  border: 1px solid var(--pf-secondary);
  color: var(--pf-ink);
}
body.customers .btn-support:hover,
body.customers .btn-support:focus-visible {
  background: var(--pf-secondary-hover);
  border-color: var(--pf-secondary-hover);
  color: var(--pf-ink);
}
body.customers .btn-support i { color: var(--pf-support); }

/* The Button Icon Rule (#88, Oct 8 2026). Wherever a button carries an icon it
   is HugeIcons stroke at 16px. The sizes drifted between 14 and 20px because
   each block set its own, so a row of buttons never lined up. Colour is left
   to the role rules above: the label's colour everywhere, navy on Support. */
body.customers :is(.btn, .portal-btn, .doc-cta, .option-icon, .help-btn) > [class*="hgi-"] {
  font-size: 16px;
  line-height: 1;
}

/* Danger: Stamp Red outline, Deep Red text (AA on paper). */
body.customers .btn-danger,
body.customers .btn-danger-outline {
  background: var(--pf-paper);
  border: 1px solid var(--pf-danger-line);
  color: var(--pf-danger-text);
}
body.customers .btn-danger:hover,
body.customers .btn-danger:focus-visible,
body.customers .btn-danger-outline:hover,
body.customers .btn-danger-outline:focus-visible {
  background: var(--pf-danger-tint);
  border-color: var(--pf-danger-line);
  color: var(--pf-danger-text);
}

/* Press state for every role (Apple HIG: a custom button always shows one). */
body.customers .btn:active,
body.customers .portal-btn:active,
#fennec360-sidebar .sidebar-next-btn:active,
#fennec360-sidebar .sidebar-next-help:active {
  transform: scale(0.97);
  filter: brightness(0.92);
  transition-duration: 60ms;
}
@media (prefers-reduced-motion: reduce) {
  body.customers .btn:active,
  body.customers .portal-btn:active,
  #fennec360-sidebar .sidebar-next-btn:active,
  #fennec360-sidebar .sidebar-next-help:active { transform: none; }
}

body.customers .btn:focus-visible,
body.customers .portal-btn:focus-visible {
  outline: 2px solid var(--pf-navy);
  outline-offset: 2px;
}
[data-theme="dark"] body.customers .btn:focus-visible { outline-color: #818cf9; }

body.customers .btn,
body.customers .portal-btn {
  transition: background-color var(--motion-base, 220ms) var(--ease-standard, ease),
              border-color var(--motion-base, 220ms) var(--ease-standard, ease),
              transform 120ms var(--ease-standard, ease);
}

/* ---- Phones: 44px touch targets (Apple HIG, #87) --------------------- */
@media (max-width: 991.98px) {
  body.customers .btn,
  body.customers .portal-btn { min-height: 44px; }
  #fennec360-sidebar .sidebar-next-help { width: 44px; height: 44px; }
  /* Footer rows of the slide-out menu: Your account (#107) and Dark mode. */
  #fennec360-sidebar .sidebar-account,
  #fennec360-sidebar .sidebar-theme-toggle { min-height: 44px; }
  /* User menu rows (#109). */
  .topbar-profile-dropdown .profile-dropdown-menu > li > a,
  .topbar-profile-dropdown .profile-dropdown-row,
  .topbar-profile-dropdown .profile-dropdown-sublist > li > a,
  .topbar-profile-dropdown .profile-dropdown-signout { min-height: 44px; }
}

/* ---- One desktop scale ------------------------------------------------ */
@media (min-width: 992px) {
  body.customers .page-heading-title,
  body.customers main h1:not(.invoice-summary-amount),
  body.customers .dashboard-greeting h1 {
    font-size: 26px;
    line-height: 1.2;
  }

  body.customers .btn,
  body.customers .portal-btn {
    min-height: 40px;
    height: auto;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  body.customers .btn-sm,
  body.customers .btn-xs,
  body.customers table .btn {
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
  }
  /* The one funnel CTA: Pay on the invoice. */
  body.customers .btn-lg,
  body.customers .invoice-summary-cta {
    min-height: 48px;
    padding: 0 22px;
    font-size: 15px;
  }

  body.customers input.form-control,
  body.customers select.form-control {
    min-height: 40px;
    height: 40px;
    padding: 8px 12px;
    font-size: 16px;
  }
  body.customers textarea.form-control { font-size: 16px; }
  body.customers .form-group > label,
  body.customers label.control-label {
    font-size: 14px;
    font-weight: 600;
  }
}

/* ---- Roles applied to existing markup (#74) --------------------------- */
/* One Primary per screen: on the application page that is Pay. The currency
   switch and the next-document card are Secondary. */
body.customers .ob-pd-btn-primary.portal-btn,
body.customers .dm-card-cta.portal-btn {
  background: var(--pf-paper);
  border: 1px solid var(--pf-line);
  color: var(--pf-ink);
}
body.customers .ob-pd-btn-primary.portal-btn:hover,
body.customers .dm-card-cta.portal-btn:hover {
  background: var(--pf-hover);
  color: var(--pf-ink);
}
/* Ways to reach the team are grey with a navy icon (#87). */
body.customers .ob-pd-help-links .portal-btn,
body.customers .btn-support-outline {
  background: var(--pf-secondary);
  border: 1px solid var(--pf-secondary);
  color: var(--pf-ink);
}
body.customers .ob-pd-help-links .portal-btn:hover,
body.customers .btn-support-outline:hover {
  background: var(--pf-secondary-hover);
  border-color: var(--pf-secondary-hover);
  color: var(--pf-ink);
}
body.customers .ob-pd-help-links .portal-btn i,
body.customers .btn-support-outline i { color: var(--pf-support); }

/* My Application help row (#86, #87): grey fill, navy icons. WhatsApp is
   never a green fill: green is money. */
body.customers .ob-pd-help-links .portal-btn.ob-help-grey {
  background: var(--pf-secondary);
  border-color: var(--pf-secondary);
  color: var(--pf-ink);
}
body.customers .ob-pd-help-links .portal-btn.ob-help-grey i { color: var(--pf-support); }
body.customers .ob-pd-help-links .portal-btn.ob-help-grey:hover,
body.customers .ob-pd-help-links .portal-btn.ob-help-grey:focus-visible {
  background: var(--pf-secondary-hover);
  border-color: var(--pf-secondary-hover);
  color: var(--pf-ink);
}

/* Notification choices sit on one line each, side by side when they fit. */
body.customers .settings-checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}
body.customers .settings-checkbox-grid .auth-checkbox {
  width: auto;
  max-width: none;
  white-space: nowrap;
}

/* ---- Sidebar, quiet (#74, shadcn reference, visual spec) --------------- */
/* Inset rows with rounded ends instead of full-bleed bars; the current page is
   a soft navy tint, never a coloured edge (no accent stripes, brand rule). */
#fennec360-sidebar .sidebar-menu { padding: 4px 10px; }
#fennec360-sidebar .sidebar-item > a {
  min-height: 36px;
  padding: 7px 10px;
  margin: 1px 0;
  border-left: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary, #5e647c);
  gap: 10px;
}
#fennec360-sidebar .sidebar-item > a .sidebar-icon { font-size: 18px; }
#fennec360-sidebar .sidebar-item > a:hover { background: var(--pf-hover); color: var(--pf-ink); }
#fennec360-sidebar .sidebar-item.active > a {
  background: rgba(39, 41, 118, 0.08);
  color: var(--pf-navy);
  font-weight: 600;
  border-left: 0;
}
[data-theme="dark"] #fennec360-sidebar .sidebar-item.active > a {
  background: rgba(129, 140, 249, 0.12);
  color: #818cf9;
}
/* One divider: before the account link. The others go. */
#fennec360-sidebar .sidebar-divider { display: none; }
#fennec360-sidebar .sidebar-divider:last-of-type { display: block; margin: 10px 10px; }
/* Group label in sentence case, muted. */
#fennec360-sidebar .sidebar-section-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary, #7b819a);
  padding: 16px 10px 6px;
}
/* The team card is replaced by the floating help button (owner, Oct 7). */
#fennec360-sidebar .sidebar-agent { display: none; }

/* ---- Floating support button, the one support entry (#74) -------------- */
/* Round on every width, as on phones: grey disc, navy icon, a soft shadow so
   it lifts off the page (#87). */
body.customers .help-launcher {
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 9999px;
  background: var(--pf-secondary);
  border: 1px solid var(--pf-secondary);
  color: var(--pf-ink);
  box-shadow: 0 6px 18px rgba(16, 18, 60, 0.18);
  justify-content: center;
}
body.customers .help-launcher:hover,
body.customers .help-launcher:focus-visible,
body.customers .help-launcher[aria-expanded="true"] {
  background: var(--pf-secondary-hover);
  border-color: var(--pf-secondary-hover);
  color: var(--pf-ink);
}
body.customers .help-launcher i { font-size: 22px; }
body.customers .help-launcher-label { display: none; }
body.customers .help-launcher i,
body.customers .help-launcher:hover i { color: var(--pf-support); }
body.customers .help-btn-whatsapp,
body.customers .help-btn-email,
body.customers .help-sheet .help-btn.help-btn-whatsapp,
body.customers .help-sheet .help-btn.help-btn-email {
  background: var(--pf-secondary);
  border: 1px solid var(--pf-secondary);
  color: var(--pf-ink);
}
body.customers .help-btn-whatsapp i,
body.customers .help-btn-email i,
body.customers .help-sheet .help-btn.help-btn-whatsapp i,
body.customers .help-sheet .help-btn.help-btn-email i { color: var(--pf-support); }
body.customers .help-btn-whatsapp:hover,
body.customers .help-btn-email:hover,
body.customers .help-sheet .help-btn.help-btn-whatsapp:hover,
body.customers .help-sheet .help-btn.help-btn-email:hover {
  background: var(--pf-secondary-hover);
  border-color: var(--pf-secondary-hover);
  color: var(--pf-ink);
}
body.customers .help-sheet-call { color: var(--pf-support); }
/* The invoice page's "Questions about paying?" row is support too (#87). */
body.customers .inv .btn.inv-btn-whatsapp,
body.customers .inv .btn.inv-btn-email {
  background: var(--pf-secondary);
  border-color: var(--pf-secondary);
  color: var(--pf-ink);
}
body.customers .inv .btn.inv-btn-whatsapp i,
body.customers .inv .btn.inv-btn-email i { color: var(--pf-support); }
body.customers .inv .btn.inv-btn-whatsapp:hover,
body.customers .inv .btn.inv-btn-email:hover {
  background: var(--pf-secondary-hover);
  border-color: var(--pf-secondary-hover);
  color: var(--pf-ink);
}
/* The heading takes focus so screen readers announce the sheet; it is not a
   control, so it shows no ring. */
body.customers .help-sheet-title:focus { outline: none; }


/* ---- Next step (#74) ---------------------------------------------------- */
#fennec360-sidebar .sidebar-next {
  display: flex;
  gap: 6px;
  padding: 12px 12px 6px;
}
#fennec360-sidebar .sidebar-next-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 9999px;
  background: var(--pf-navy);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--motion-base, 220ms) var(--ease-standard, ease);
}
#fennec360-sidebar .sidebar-next-btn .sidebar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fennec360-sidebar .sidebar-next-btn:hover,
#fennec360-sidebar .sidebar-next-btn:focus-visible { background: var(--pf-navy-hover); color: #ffffff; }
#fennec360-sidebar .sidebar-next-btn i { font-size: 16px; color: #ffffff; }
/* Paying is green wherever it appears (#87). */
#fennec360-sidebar .sidebar-next-btn.sidebar-next-pay { background: var(--pf-pay); color: var(--pf-pay-ink); }
#fennec360-sidebar .sidebar-next-btn.sidebar-next-pay:hover,
#fennec360-sidebar .sidebar-next-btn.sidebar-next-pay:focus-visible { background: var(--pf-pay-hover); color: var(--pf-pay-ink); }
#fennec360-sidebar .sidebar-next-btn.sidebar-next-pay i { color: var(--pf-pay-ink); }
/* Every step done (#79): no Primary, no red. A quiet line on a hairline,
   the same height as the button it replaces so the sidebar does not shift. */
#fennec360-sidebar .sidebar-allset {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--pf-line);
  border-radius: 9999px;
  background: transparent;
  color: var(--text-secondary, #5b6079);
  font-size: 14px;
  font-weight: 500;
}
#fennec360-sidebar .sidebar-allset i { font-size: 16px; color: inherit; }
#fennec360-sidebar .sidebar-allset .sidebar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-collapsed #fennec360-sidebar .sidebar-allset { width: 38px; padding: 0; justify-content: center; flex: none; }
.sidebar-collapsed #fennec360-sidebar .sidebar-allset .sidebar-label { display: none; }
/* Both sit below the shared phones block, so the 44px target needs saying
   again here or the 38px desktop height wins on equal specificity. */
@media (max-width: 991.98px) {
  #fennec360-sidebar .sidebar-next-btn,
  #fennec360-sidebar .sidebar-allset { min-height: 44px; }
}

/* Opens the support panel: grey disc, navy icon (#87). */
#fennec360-sidebar .sidebar-next-help {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 9999px;
  border: 1px solid var(--pf-line);
  background: var(--pf-secondary);
  color: var(--pf-support);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#fennec360-sidebar .sidebar-next-help i { font-size: 16px; color: var(--pf-support); }
/* The item that holds the next step: a 7px Stamp Red square (Stamp Rule). */
#fennec360-sidebar .sidebar-next-marker {
  margin-inline-start: auto;
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  background: #ee1b22;
  flex: none;
}
[data-theme="dark"] #fennec360-sidebar .sidebar-next-marker { background: #ff4d52; }
#fennec360-sidebar .sidebar-item.is-next > a { color: var(--pf-ink); }
#fennec360-sidebar .sidebar-count {
  margin-inline-start: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary, #7b819a);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#fennec360-sidebar .sidebar-count + .sidebar-next-marker { margin-inline-start: 8px; }
.sidebar-collapsed #fennec360-sidebar .sidebar-next { flex-direction: column; align-items: center; }
.sidebar-collapsed #fennec360-sidebar .sidebar-next-btn { width: 38px; padding: 0; justify-content: center; flex: none; }
.sidebar-collapsed #fennec360-sidebar .sidebar-next-btn .sidebar-label,
.sidebar-collapsed #fennec360-sidebar .sidebar-count { display: none; }

/* ---- Paper on ground (#74) ---------------------------------------------- */
/* The invoice page painted its cards with --surface-base, the page ground, so
   the whole screen was one grey. Cards are paper (--surface-card: white, Night
   Raised in dark) on the grey ground, separated by a hairline (DESIGN.md
   Elevation: flat, tonal). Payment tiles too, so the selected one reads. */
.invoice-summary,
.inv-support,
.invoice-details,
.inv-tile,
.payment-radio.inv-tile {
  background: var(--surface-card, #ffffff);
}
.inv .inv-tile,
.inv .payment-radio.inv-tile,
.inv .inv-tiles .inv-tile { background: var(--surface-card, #ffffff); }

/* Payment column on paper: the methods and the offline block are cards; the
   tiles inside them keep their hairline and sit on the card. */
/* One border level (owner, Oct 7: "so many borders"): each group is the white
   card; the methods inside are plain rows, the picked one a soft navy tint. */
.inv .inv-pay .inv-tiles-app,
.inv .inv-pay .inv-offline {
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--border-default, #e2e4ed);
  border-radius: 16px;
  padding: 8px;
}
.inv .inv-pay .inv-offline .inv-tiles {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}
.inv .inv-pay .inv-tile,
.inv .inv-pay .payment-radio.inv-tile,
.inv .inv-pay .pay-offline-tile {
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}
.inv .inv-pay .inv-tile:hover { background: var(--pf-hover); }
.inv .inv-pay .inv-tile:has(input:checked) { background: rgba(39, 41, 118, 0.06); }
[data-theme="dark"] .inv .inv-pay .inv-tile:has(input:checked) { background: rgba(129, 140, 249, 0.10); }
.inv .inv-pay .inv-tile,
.inv .inv-pay .payment-radio.inv-tile,
.inv .inv-pay .pay-offline-tile { background: var(--surface-card, #ffffff); }
/* Secondary buttons on documents: paper with a hairline, never a grey fill. */
.inv .pay-copy,
.inv .pay-field-copy,
.inv .inv-btn-ghost,
.inv-tool,
.doc-theme-toggle {
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--pf-line);
  color: var(--pf-ink);
}
.inv .pay-copy:hover,
.inv .inv-btn-ghost:hover,
.inv-tool:hover,
.doc-theme-toggle:hover { background: var(--pf-hover); }
.inv .btn.btn-default.inv-btn-ghost,
.inv .invoice-details .btn.btn-default {
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--pf-line);
  color: var(--pf-ink);
}
.inv .btn.btn-default.inv-btn-ghost:hover,
.inv .invoice-details .btn.btn-default:hover { background: var(--pf-hover); }

/* ---- Confirmation dialog (#109) ---------------------------------------- */
/* Small and plain: a question, a primary and a way out. The primary takes the
   role of the action it confirms, so signing out is navy and not red; red is
   kept for what actually destroys something (#87). */
dialog.portal-confirm {
  width: min(380px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--pf-line);
  border-radius: 16px;
  background: var(--pf-paper);
  color: var(--pf-ink);
}
dialog.portal-confirm::backdrop { background: rgba(26, 28, 46, 0.45); }
.portal-confirm-title {
  margin: 0 0 20px;
  font-family: var(--font-heading, inherit);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--pf-ink);
}
.portal-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.portal-confirm-cancel,
.portal-confirm-ok {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--motion-base, 220ms) var(--ease-standard, ease);
}
.portal-confirm-cancel { background: var(--pf-secondary); color: var(--pf-ink); }
.portal-confirm-cancel:hover { background: var(--pf-secondary-hover); }
.portal-confirm-ok { background: var(--pf-navy); color: #ffffff; }
.portal-confirm-ok:hover { background: var(--pf-navy-hover); }
.portal-confirm-cancel:active,
.portal-confirm-ok:active { transform: scale(0.97); filter: brightness(0.92); }
.portal-confirm-cancel:focus-visible,
.portal-confirm-ok:focus-visible { outline: 2px solid var(--pf-navy); outline-offset: 2px; }
[data-theme="dark"] .portal-confirm-cancel:focus-visible,
[data-theme="dark"] .portal-confirm-ok:focus-visible { outline-color: #818cf9; }
@media (prefers-reduced-motion: reduce) {
  .portal-confirm-cancel:active,
  .portal-confirm-ok:active { transform: none; }
}
@media (max-width: 991.98px) {
  .portal-confirm-cancel,
  .portal-confirm-ok { min-height: 44px; }
}

/* ---- Account tabs (#104) ---------------------------------------------- */
/* The account page is five sections; the tabs show one at a time. Hidden only
   once the page's own inline script has added .has-tabs, so with JavaScript
   off every section stays on screen and the tabs are jump links. */
.account-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 24px;
  padding: 0;
  overflow-x: auto;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--pf-line);
}
.account-tabs::-webkit-scrollbar { display: none; }
.account-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  background: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  color: var(--pf-ink);
  opacity: 0.68;
  transition: background-color var(--motion-base, 220ms) var(--ease-standard, ease),
              opacity var(--motion-base, 220ms) var(--ease-standard, ease);
}
.account-tab i { font-size: 16px; }
.account-tab:hover,
.account-tab:focus { color: var(--pf-ink); text-decoration: none; opacity: 1; }
.account-tab:hover { background: var(--pf-hover); }
.account-tab:focus-visible { outline: 2px solid var(--pf-support); outline-offset: -2px; }
.account-tab[aria-selected="true"] {
  color: var(--pf-support);
  border-bottom-color: var(--pf-support);
  opacity: 1;
}
.account-page.has-tabs > section[role="tabpanel"] { display: none; }
/* Belt and braces: should account-tabs.js fail to load, the tabs are still
   links, and the section a link points at shows itself. */
.account-page.has-tabs > section[role="tabpanel"]:target { display: block; }
.account-page.has-tabs[data-active-tab="profile"] > #profile,
.account-page.has-tabs[data-active-tab="security"] > #security,
.account-page.has-tabs[data-active-tab="notifications"] > #notifications,
.account-page.has-tabs[data-active-tab="preferences"] > #preferences,
.account-page.has-tabs[data-active-tab="privacy"] > #privacy { display: block; }
@media (prefers-reduced-motion: reduce) {
  .account-tab { transition: none; }
}