.local-account-profile, .local-cart-account { margin-block: 2rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); }
      .local-account-profile .button, .local-cart-account .button { margin: .5rem .75rem .5rem 0; }
      .local-account-profile p { overflow-wrap: anywhere; }
      .account-settings-section { border-top: 1px solid var(--border); padding-block: 2rem; }
      .account-settings-section h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-bottom: 1rem; }
      .account-settings-section > p { margin-bottom: 1.25rem; }
      .account-settings-section .account-fields { display: grid; gap: 1rem; }
      .account-settings-section label { display: grid; gap: .5rem; }
      .account-settings-section input { width: 100%; min-width: 0; }
      .account-settings-section .button { justify-self: start; white-space: normal; }
      .account-settings-section [role='status']:empty { display: none; }
    
  .account-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 1rem;
    margin-block: 2rem;
  }
  .admin-header-link { border-color: var(--accent); }
  .account-fields select {
    width: 100%;
    padding: .85rem;
    font: inherit;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: .5rem;
  }
  .account-role {
    display: inline-block;
    padding: .35rem .85rem;
    border: 1px solid var(--border);
    border-radius: 2rem;
    font-weight: 700;
  }
  .account-dashboard a {
    min-width: 0;
    height: auto;
    white-space: normal;
    overflow-wrap: anywhere;
    align-items: flex-start;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: 1.5rem;
    border: 1px solid currentColor;
    border-radius: 1rem;
    color: inherit;
    text-decoration: none;
  }
  .account-dashboard strong { font-size: 1.25rem; }
  .account-dashboard span { opacity: .8; }
  .account-dashboard a:hover, .account-dashboard a:focus-visible { background: color-mix(in srgb, currentColor 8%, transparent); }
  .account-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-block: 1.5rem;
  }
  .account-subnav a {
    padding: .65rem 1rem;
    border: 1px solid currentColor;
    border-radius: 2rem;
    color: inherit;
    text-decoration: none;
  }
  .account-subnav [aria-current="page"] { background: color-mix(in srgb, currentColor 15%, transparent); }

  .account-fields .account-delete-confirm {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
  }
  .account-delete-confirm input {
    flex: 0 0 auto;
    margin: .2rem 0 0;
  }

  .portal-page { max-width: 960px; padding-block: 3rem; }
  .portal-form { display: grid; gap: 1rem; margin-block: 1.5rem; }
  .portal-form label { display: grid; gap: .5rem; }
  .portal-form input, .portal-form select, .portal-form textarea {
    width: 100%; box-sizing: border-box; padding: .85rem; font: inherit;
    color: inherit; background: transparent; border: 1px solid #888; border-radius: .5rem;
  }
  .portal-form input[type="checkbox"] { width: 1.25rem; height: 1.25rem; }
  .portal-form select option { color: #222; background: #fff; }
  .portal-form button { justify-self: start; }
  .portal-card { padding: 1.5rem; border: 1px solid #888; border-radius: 1rem; margin-block: 1.5rem; overflow-wrap: anywhere; }
  .portal-card p { white-space: pre-wrap; }
  .portal-card summary { cursor: pointer; padding-block: .75rem; font-weight: 700; }
  .portal-page pre, .portal-page code { overflow-wrap: anywhere; white-space: pre-wrap; user-select: all; }
  .portal-page .button { margin: .25rem; }

/* Shared action styles: primary action, secondary navigation and destructive action. */
.button {
  box-sizing: border-box;
  min-height: 46px;
  border: 1px solid transparent;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  font: inherit;
  font-size: .9rem;
  font-weight: 750;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}
.button-secondary {
  background: var(--surface);
  color: var(--foreground);
  border-color: var(--border);
}
.button-secondary:hover,
.button-secondary[aria-current='page'] {
  background: color-mix(in srgb, var(--foreground) 10%, var(--surface));
  border-color: var(--foreground);
}
.button-danger {
  color: #fff;
  background: #a82828;
  border-color: #a82828;
}
.button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.button:focus-visible,
.account-subnav a:focus-visible,
.calendar-period-tabs button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.portal-page {
  padding-block: clamp(28px, 4vw, 56px);
}
.portal-page--calendar,
.portal-page--personalCalendar {
  width: calc(100% - 64px);
  max-width: 1440px;
}
.portal-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.portal-breadcrumbs {
  justify-content: flex-start;
}
.portal-heading h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
}
.portal-heading .eyebrow {
  grid-column: 1 / -1;
  margin: 0;
}
.portal-breadcrumbs,
.planning-navigation,
.portal-pagination,
.workflow-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.portal-page .button {
  margin: 0;
}
.portal-page p,
.local-account-profile p,
.account-dashboard a {
  line-height: 1.7;
}
.portal-page [data-portal] > p:not(:empty) {
  margin-block: 16px;
}
.portal-page [role='status']:empty {
  display: none;
}
.portal-card {
  display: grid;
  gap: 16px;
  border-color: var(--border);
  background: var(--surface);
}
.portal-card > * {
  min-width: 0;
}
.portal-card .account-role {
  justify-self: start;
}
.portal-card h2,
.portal-card h3,
.account-dashboard strong {
  line-height: 1.35;
}
.portal-form {
  gap: 20px;
}
.portal-form label {
  gap: 8px;
  min-width: 0;
}
.portal-form input,
.portal-form select,
.portal-form textarea {
  min-width: 0;
  border-color: var(--border);
  background: var(--surface);
  line-height: 1.5;
}
.portal-form input:not([type='checkbox']):not([type='radio']),
.portal-form select {
  min-height: 48px;
}
.portal-form label:has(> input[type='checkbox']),
.portal-form label:has(> input[type='radio']) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.portal-form input[type='checkbox'],
.portal-form input[type='radio'] {
  flex: 0 0 auto;
  margin: .2em 0 0;
  accent-color: var(--foreground);
}
.portal-form .scheduling-warning label {
  display: flex;
  align-items: flex-start;
}
.planning-navigation {
  margin-bottom: 24px;
}
.calendar-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.calendar-actions .planning-navigation {
  margin: 0;
}
.portal-page .calendar-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 24px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.portal-page .calendar-filters input:not([type="checkbox"]),
.portal-page .calendar-filters select {
  height: 50px;
  min-height: 50px;
  padding-block: 10px;
}
.weekly-availability > select {
  min-height: 48px;
  padding: 12px;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
}
.calendar-filters > div:not(.calendar-checkbox-row) {
  display: grid;
  gap: 8px;
}
.calendar-checkbox-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 28px;
  grid-column: 1 / -1;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.calendar-type-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  min-width: 0;
  border: 0;
  padding: 0;
}
.calendar-type-filters legend {
  padding: 0 0 12px;
  font-size: .9rem;
  color: var(--muted);
}
.calendar-checkbox-row label,
.portal-form .calendar-cancelled-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  margin: 0;
  cursor: pointer;
}
.calendar-checkbox-row input[type='checkbox'] {
  margin: 0;
  width: 18px;
  height: 18px;
}
.calendar-guidance {
  margin-block: 20px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 24px;
  font-size: .85rem;
  color: var(--muted);
}
.calendar-guidance .calendar-legend {
  margin: 0;
  gap: 8px;
}
.calendar-guidance > p:last-child {
  grid-column: 1 / -1;
}
.calendar-timezone {
  align-self: center;
}
.calendar-layout,
.calendar-layout[data-period='week'] {
  grid-template-columns: minmax(0, 2fr) minmax(290px, 1fr);
  gap: 24px;
}
.calendar-month,
.calendar-time-view,
.calendar-agenda {
  padding: 20px;
}
.calendar-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px 16px;
  margin-bottom: 24px;
}
.calendar-controls .calendar-heading-picker {
  justify-self: start;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.4;
  min-height: 46px;
  text-align: start;
}
.calendar-controls .calendar-toolbar {
  gap: 8px;
  margin: 0;
  justify-content: flex-end;
}
.calendar-toolbar .button {
  min-height: 40px;
  padding: 8px 12px;
  font-size: .8rem;
}
.calendar-period-tabs {
  display: flex;
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--background);
}
.calendar-period-tabs button {
  border: 0;
  border-radius: 7px;
  padding: 9px 18px;
  min-height: 40px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: .85rem;
}
.calendar-period-tabs [aria-pressed='true'] {
  background: var(--foreground);
  color: var(--background);
}
.calendar-jump-date {
  display: grid;
  gap: 6px;
  font-size: .85rem;
}
.calendar-jump-date input {
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px;
  color: inherit;
  background: var(--background);
  font: inherit;
}
.calendar-agenda {
  display: grid;
  gap: 20px;
  align-content: start;
}
.calendar-agenda > h2 {
  font-size: 1.25rem;
  line-height: 1.4;
}
.calendar-event {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-top: 20px;
}
.calendar-event h3 {
  font-size: 1.1rem;
  line-height: 1.4;
}
.calendar-event .button {
  justify-self: start;
  margin: 4px 0;
}
.calendar-event p:empty {
  display: none;
}
.calendar-event .appointment-status {
  justify-self: start;
}
.calendar-availability-block {
  display: grid;
  gap: 12px;
  padding: 16px;
}
.availability-list-heading {
  margin-block: 28px 20px;
  font-size: 1.5rem;
}
.availability-filters {
  max-width: 320px;
}
.availability-request-form {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.portal-pagination {
  justify-content: space-between;
  margin-top: 24px;
}
.weekly-availability-day {
  padding-block: 12px;
  border-bottom: 1px solid var(--border);
}
.weekly-availability-day label {
  align-items: center;
}
.weekly-availability-table th,
.weekly-availability-table td,
.account-dashboard a {
  text-align: start;
}
.scheduling-dialog .portal-form {
  gap: 20px;
}
.scheduling-dialog p {
  line-height: 1.65;
}
.section-intro p,
.service-copy p,
.contact-card p {
  line-height: 1.75;
}
[hidden] {
  display: none !important;
}
@media (max-width: 1100px) {
  .calendar-layout,
  .calendar-layout[data-period='week'] {
    grid-template-columns: 1fr;
  }
  .calendar-agenda {
    max-height: none;
  }
}
@media (max-width: 700px) {
  .portal-heading {
    grid-template-columns: 1fr;
  }
  .portal-page--calendar,
  .portal-page--personalCalendar {
    width: calc(100% - 32px);
  }
  .portal-page .calendar-filters {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .calendar-checkbox-row,
  .calendar-type-filters {
    align-items: flex-start;
    flex-direction: column;
  }
  .calendar-guidance,
  .calendar-controls {
    grid-template-columns: 1fr;
  }
  .calendar-controls .calendar-toolbar {
    justify-content: flex-start;
  }
  .calendar-controls .calendar-period-tabs {
    width: 100%;
    box-sizing: border-box;
  }
  .calendar-period-tabs button {
    flex: 1;
    padding-inline: 10px;
  }
  .calendar-month,
  .calendar-time-view,
  .calendar-agenda {
    padding: 12px;
  }
  .calendar-time-scroll {
    max-height: 550px;
  }
  .calendar-actions > .button,
  .calendar-actions .planning-navigation {
    width: 100%;
  }
  .planning-navigation .button {
    flex: 1 1 auto;
  }
}

/* Standalone actions share one button treatment across the page body. */
main .button,
main .button-secondary,
main .button-danger,
main .button.account-method {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 46px;
  max-width: 100%;
  gap: 12px;
  padding: 12px 20px;
  border: 1px solid var(--button-background);
  border-radius: 6px;
  color: var(--button-text);
  background: var(--button-background);
  font: inherit;
  font-size: .9rem;
  font-weight: 750;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
main .button:hover {
  background: var(--button-background);
  color: var(--button-text);
  border-color: var(--button-background);
  filter: brightness(.94);
  text-decoration: none;
}
main .button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
main .button[aria-current='page'],
main .button[aria-pressed='true'] {
  background: var(--button-background);
  color: var(--button-text);
  border-color: var(--button-background);
  outline: 2px solid var(--foreground);
  outline-offset: 3px;
}
main .button.back-link {
  opacity: 1;
  margin-bottom: 24px;
}
main .button.account-method {
  display: grid;
  justify-content: stretch;
  text-align: start;
}
main .button.account-method[data-social-provider],
main .button.account-method-dustless {
  grid-template-columns: 40px minmax(0,1fr);
  min-height: 64px;
  padding: 12px;
  gap: 14px;
  background: #fff;
  color: #1f1f1f;
  border-color: #747775;
}
:root[data-theme='dark'] main .button.account-method[data-social-provider],
:root[data-theme='dark'] main .button.account-method-dustless {
  background: #131314;
  color: #e3e3e3;
  border-color: #8e918f;
}
.social-provider-icon {
  display: block;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.social-provider-icon-dustless {
  background: currentColor;
  mask: url('/images/brand/feather-vector.svg') center / contain no-repeat;
  -webkit-mask: url('/images/brand/feather-vector.svg') center / contain no-repeat;
}
.social-provider-icon-microsoft {
  box-sizing: border-box;
  padding: 9px;
  background: #fff;
  border-radius: 4px;
}
.social-provider-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.social-connection-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
  margin-block: 20px;
}
.social-connection-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.social-connection-card .social-link-state {
  margin-block: 16px 20px;
}
.social-connection-card summary {
  cursor: pointer;
  font-weight: 750;
  padding-block: 8px;
}
.social-connection-card .portal-form {
  margin-top: 18px;
}
main .social-connect-button {
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
  text-align: start;
}
.social-connect-button .account-method-note {
  flex-basis: 100%;
}
@media (max-width: 660px) {
  .social-connection-grid {
    grid-template-columns: minmax(0,1fr);
  }
  .social-connection-card {
    padding: 16px;
  }
}
.account-links,
.account-switch-actions,
.cart-bottom-links,
.service-detail-links,
.request-delivery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.account-links {
  margin-top: 28px;
}
.account-recovery .button {
  margin-block: 4px;
}
.calendar-agenda .button {
  justify-self: start;
}
.shop-preview-bar .button {
  margin-block: 8px;
}
/* Result text remains visible and announces the outcome; colour is an additional cue. */
[data-feedback='success']:not(:empty),
[data-feedback='error']:not(:empty),
[data-feedback='pending']:not(:empty) {
  padding: 14px 18px;
  border: 1px solid;
  border-inline-start-width: 4px;
  border-radius: 8px;
  font-weight: 750;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
[data-feedback='success']:not(:empty) {
  color: #175e30;
  background: #e7f5eb;
  border-color: #83be95;
}
[data-feedback='error']:not(:empty) {
  color: #922424;
  background: #fdeaea;
  border-color: #d98d8d;
}
[data-feedback='pending']:not(:empty) {
  color: var(--foreground);
  background: var(--surface);
  border-color: var(--border);
}
:root[data-theme='dark'] [data-feedback='success']:not(:empty) {
  color: #bcebc9;
  background: #173b23;
  border-color: #4b9961;
}
:root[data-theme='dark'] [data-feedback='error']:not(:empty) {
  color: #ffc4c4;
  background: #492222;
  border-color: #bd6464;
}
.faq-page {
  max-width: 1040px;
  padding-block: clamp(40px, 6vw, 80px);
}
.faq-page h1 {
  margin-block: 16px 24px;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.15;
}
.faq-intro {
  max-width: 70ch;
  line-height: 1.75;
  color: var(--muted);
}
.faq-page .service-faq-list {
  margin-top: 36px;
}
.faq-page .service-faq-list p {
  margin-top: 20px;
  line-height: 1.8;
}
.faq-page .service-guide-actions {
  padding-top: 12px;
}
.faq-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.faq-callout h2 {
  margin: 0;
}
@media (max-width: 600px) {
  .account-links .button,
  .cart-bottom-links .button {
    flex: 1 1 100%;
  }
  .faq-page .service-guide-actions .button {
    width: 100%;
  }
}

/* FAQ topics retain comfortable spacing in every language and at mobile widths. */
.faq-page .faq-topics {
  margin-block: 2rem 3rem;
  gap: 1rem;
}
.faq-topic {
  margin-block: 3rem;
  min-width: 0;
}
.faq-topic h2 {
  margin-block: 0 1.25rem;
  scroll-margin-top: 11rem;
}
.faq-topic .service-faq-list p {
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.faq-topic summary {
  gap: 1.25rem;
}
.faq-topic summary > [aria-hidden] {
  flex-shrink: 0;
}

/* Private profile details share the same controls in registration and account settings. */
.account-fields .account-detail-group {
  min-width: 0;
  margin-block: 1.5rem;
  padding-block: 1.5rem;
  border-block: 1px solid var(--border);
}
.account-detail-group h2,
.account-detail-group h3 {
  margin-block: 0 1.25rem;
}
.account-detail-group h3 {
  margin-block-start: 2rem;
}
.account-fields .account-field-help {
  display: block;
  margin-block: .65rem 1.5rem;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--muted);
  font-weight: 500;
}
.account-fields .account-detail-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1.5rem;
}
.account-fields .account-detail-grid label {
  align-content: start;
  min-width: 0;
  margin: 0;
}
.account-fields .account-detail-grid .account-field-help {
  margin: 0;
}
.account-fields .account-extra-details {
  margin-block-start: 1.5rem;
}
.account-fields .account-extra-details > summary {
  padding-block: 1rem;
  font-weight: 750;
  cursor: pointer;
}
.account-fields input,
.account-fields select {
  min-width: 0;
  width: 100%;
}
@media(max-width:600px) {
  .account-fields .account-detail-grid {
    grid-template-columns: minmax(0,1fr);
  }
}

.account-fields > .account-detail-group,
.account-settings-section .account-fields:has(.account-detail-group) > label {
  grid-column: 1 / -1;
}

.request-contact-section {
  margin-block: 1rem 2rem;
  padding-block-end: 2rem;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.request-contact-section h2 {
  margin-block: 0 1rem;
}
.request-contact-section .account-detail-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1.5rem;
  margin-block: 1.5rem;
}
.request-contact-section label {
  min-width: 0;
}
.request-contact-section input[readonly] {
  color: var(--muted);
}
.request-contact-address summary {
  cursor: pointer;
  padding-block: 1rem;
  font-weight: 750;
}
.request-contact-section > .button {
  margin-block-start: 1rem;
}
.portal-form .account-field-help {
  line-height: 1.7;
  color: var(--muted);
  font-weight: 500;
}
.request-contact-snapshot {
  padding-block: 1rem;
}
.request-contact-snapshot p {
  overflow-wrap: anywhere;
}
@media(max-width:600px) {
  .request-contact-section .account-detail-grid {
    grid-template-columns: minmax(0,1fr);
  }
}

/* Company-owned permission editor: readable choices without a wide matrix. */
.company-role-layout { display: grid; grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr); gap: 2rem; align-items: start; margin-block: 1.5rem; }
.company-role-choices { display: grid; gap: .75rem; }
.company-role-choices .button { justify-content: start; text-align: start; overflow-wrap: anywhere; }
.company-role-editor { min-width: 0; padding: 1.5rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); }
.company-role-editor h2 { margin-block: 0 1.5rem; }
.company-role-editor .portal-form { gap: 1.25rem; }
.company-role-editor fieldset { display: grid; gap: 1rem; padding: 1.25rem; }
.company-role-editor .staff-role-choice { display: flex; align-items: start; gap: .75rem; line-height: 1.6; }
.company-role-editor input[type="checkbox"] { flex: 0 0 auto; margin-block-start: .35rem; }
.company-role-audit { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; font-size: .85rem; }
@media (max-width: 760px) { .company-role-layout { grid-template-columns: minmax(0, 1fr); } .company-role-choices { grid-template-columns: repeat(auto-fit,minmax(9rem,1fr)); } .company-role-editor { padding: 1rem; } }

.billing-contract-info {padding:1.5rem; margin-block:1.5rem 2rem; border:1px solid var(--border); border-radius:1rem;}
.billing-contract-info p {line-height:1.85; overflow-wrap:anywhere;}

/* QR enrolment stays black on white in both themes; four-module quiet zone is in the SVG. */
.mfa-enrolment:empty { display: none; }
.mfa-enrolment { display: grid; justify-items: start; gap: 1rem; min-width: 0; }
.mfa-enrolment > p { margin: 0; max-width: 62ch; }
.mfa-qr { display: block; width: min(100%, 18rem); height: auto; aspect-ratio: 1; background: #fff; border: 1px solid var(--border); border-radius: .5rem; forced-color-adjust: none; }
.mfa-manual { width: min(100%, 42rem); min-width: 0; border: 1px solid var(--border); border-radius: .65rem; padding: 1rem; }
.mfa-manual summary { cursor: pointer; font-weight: 700; }
.mfa-manual[open] summary { margin-block-end: 1rem; }
.mfa-manual p { margin-block: 0 1rem; }
.mfa-secret { display: block; max-width: 100%; direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.7; letter-spacing: .06em; user-select: all; }

/* Optional contact details use the same spacing on public and portal forms. */
.contact-fields-section { grid-column:1 / -1; min-width:0; margin-block:1.5rem; }
.contact-fields-section h3 { margin:0 0 .8rem; }
.contact-fields-section .account-field-help { margin:0 0 1rem; line-height:1.6; }
.contact-fields-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.5rem; }
.contact-fields-grid label { display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.contact-fields-grid input { width:100%; min-width:0; box-sizing:border-box; font:inherit; }
.contact-details-list { display:grid; grid-template-columns:minmax(9rem,1fr) minmax(0,2fr); gap:.6rem 1.25rem; margin:0; }
.contact-details-list dt { font-weight:700; overflow-wrap:anywhere; }
.contact-details-list dd { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }
@media(max-width:640px) {
 .contact-fields-grid,.contact-details-list { grid-template-columns:minmax(0,1fr); }
 .contact-details-list { gap:.3rem; }
 .contact-details-list dd { margin-block-end:.65rem; }
}

.contact-collections { grid-column:1 / -1; min-width:0; margin-block:1.5rem; }
.contact-collections h3,.contact-collections h4 { margin-block:0 1rem; }
.contact-collections .account-field-help { margin-block:0 1rem; line-height:1.6; }
.contact-people-list,.contact-phone-list { display:grid; gap:1rem; margin-block:1rem; }
.contact-person-card { min-width:0; margin:0; padding:1.25rem; border:1px solid var(--line,rgba(128,128,128,.35)); border-radius:12px; }
.contact-person-card legend { padding-inline:.5rem; font-weight:700; }
.contact-person-card p { overflow-wrap:anywhere; }
.contact-phone-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:1rem; align-items:end; }
.contact-phone-row label { display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.contact-phone-row input { width:100%; min-width:0; box-sizing:border-box; font:inherit; }
.contact-phone-row .button { margin:0; align-self:end; }
.contact-other-phones { margin-block-start:1.5rem; }
@media(max-width:760px) {
 .contact-phone-row { grid-template-columns:minmax(0,1fr); }
 .contact-person-card { padding:1rem; }
 .contact-phone-row .button { justify-self:start; }
}

/* Location-derived cupboard access is separate from contact and write permissions. */
.location-cupboard-access { grid-column:1 / -1; min-width:0; display:grid; gap:1rem; margin-block:1rem; padding:1.25rem; border:1px solid var(--line,rgba(128,128,128,.35)); border-radius:12px; }
.location-cupboard-access legend { padding-inline:.5rem; font-weight:700; }
.location-cupboard-access p { margin:0; line-height:1.65; overflow-wrap:anywhere; }
.location-cupboard-access p[hidden] { display:none; }
.location-cupboard-access label { display:grid; gap:.5rem; min-width:0; }
.location-cupboard-access .checkbox-label { display:flex; align-items:flex-start; gap:.75rem; }
.location-cupboard-access input[type="checkbox"] { flex:0 0 auto; width:auto; margin-block-start:.3rem; }
.location-cupboard-access select { width:100%; min-width:0; box-sizing:border-box; font:inherit; }
.location-cupboard-access .button { justify-self:start; white-space:normal; text-align:start; }
@media(max-width:640px) { .location-cupboard-access { padding:1rem; } }

.contact-person-card > .button {
  margin-block-start:.75rem;
  margin-inline-end:.75rem;
}

/* One shared, actual trial deadline in the account and portal workspace. */
.portal-trial-summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.5rem 1rem; padding:1.25rem; margin-block:0 1.5rem; border:1px solid var(--border); border-radius:12px; overflow-wrap:anywhere; }
.portal-trial-summary > strong { font-size:1.1rem; line-height:1.5; }
.portal-trial-summary > p { grid-column:1; margin:0; line-height:1.65; }
.portal-trial-summary > .button { grid-column:2; grid-row:1 / span 3; align-self:center; justify-self:start; max-width:100%; white-space:normal; }
@media (max-width:700px) { .portal-trial-summary { grid-template-columns:minmax(0,1fr); } .portal-trial-summary > .button { grid-column:1; grid-row:auto; } }

/* Reusable code entrance; no hidden instructions or code stored before login. */
.gift-code-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-block: 1.5rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-align: start; }
.gift-code-entry > div { flex: 1 1 240px; min-inline-size: 0; }
.gift-code-entry :is(h2,.gift-code-entry-title) { display: block; font-size: 1.15rem; line-height: 1.5; margin: 0 0 .5rem; }
.gift-code-entry p { margin: 0; line-height: 1.7; overflow-wrap: anywhere; }
.gift-code-entry .button { margin: 0; flex: 0 1 auto; }
.gift-code-entry .registration-check { display: flex; align-items: flex-start; gap: .75rem; margin: 0; }
.gift-code-entry input[type='checkbox'] { inline-size: 1.25rem; block-size: 1.25rem; min-inline-size: 1.25rem; padding: 0; margin-block-start: .2rem; }
.account-switch { display: grid; gap: 1rem; margin-block: 1.5rem; }
.account-content :where(p + p,h2 + p,h3 + p), .portal-page > :where(p + p,h2 + p,h3 + p) { margin-block-start: .85rem; }
.gift-code-list { margin-block: 1.5rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: 12px; }
.gift-code-list > summary { padding-block: .5rem; font-weight: 750; cursor: pointer; }
.gift-code-list > p { margin-block: 1rem; line-height: 1.7; }
.gift-code-rows { display: grid; gap: 1rem; margin-block-start: 1rem; }
.gift-code-row { padding: 1rem; border: 1px solid var(--border); border-radius: 10px; }
.gift-code-row > p { margin-block-start: .65rem; line-height: 1.65; }
.gift-code-reference { display: block; margin-block-start: .65rem; font-family: monospace; direction: ltr; unicode-bidi: isolate; }
.gift-code-state { display: inline-block; padding: .4rem .75rem; border: 1px solid currentColor; border-radius: 2rem; line-height: 1.5; }
.gift-code-state[data-state='issued'] { color: #166534; background: #ecfdf3; }
.gift-code-state[data-state='revoked'] { color: #991b1b; background: #fff1f2; }
.gift-code-state[data-state='redeemed'] { color: #1e40af; background: #eff6ff; }
[data-theme='dark'] .gift-code-state[data-state='issued'] { color: #a7f3d0; background: #123c2e; }
[data-theme='dark'] .gift-code-state[data-state='revoked'] { color: #fecdd3; background: #4c1824; }
[data-theme='dark'] .gift-code-state[data-state='redeemed'] { color: #bfdbfe; background: #182f50; }


/* Chosen account/admin menu rows. Action buttons elsewhere keep their existing styles. */
.account-menu-workspace { display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem; align-items:start; margin-block:1.5rem; }
.account-menu-content { min-inline-size:0; }
.account-menu-content > .local-account-profile { margin-block:0 1.5rem; }
.account-menu-content .account-settings, .account-menu-content .account-settings-section { max-inline-size:none; }
.account-menu-content .account-settings-section { padding-block:0 1.5rem; border:0; }
.workspace-menu { min-inline-size:0; border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden; }
.workspace-menu-toggle, .menu-group > summary { cursor:pointer; padding:.9rem 1rem; font-weight:750; line-height:1.5; overflow-wrap:anywhere; }
.workspace-menu-toggle { border-block-end:1px solid var(--border); }
.workspace-menu-navigation { display:grid; gap:.4rem; padding:.5rem; }
.menu-group { min-inline-size:0; }
.menu-group + .menu-group { border-block-start:1px solid var(--border); padding-block-start:.35rem; }
.menu-group > summary { border-radius:8px; }
.menu-group-current > summary { text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:.3em; }
main .workspace-menu .menu-row { display:flex; align-items:center; gap:.7rem; min-block-size:46px; padding:.7rem .75rem; margin:.15rem 0; border:1px solid transparent; border-radius:8px; background:transparent; color:inherit; text-decoration:none; text-align:start; font-weight:700; line-height:1.5; }
.menu-row-title { flex:1; min-inline-size:0; overflow-wrap:anywhere; }
.menu-row-icon { inline-size:20px; block-size:20px; flex:0 0 20px; }
.menu-row-arrow { inline-size:16px; flex-basis:16px; opacity:.65; }
main .workspace-menu .menu-row[aria-current='page'] { background:color-mix(in srgb,var(--accent) 12%,var(--surface)); border-color:var(--border); box-shadow:inset 3px 0 0 var(--accent); }
.workspace-menu :is(summary,.menu-row):hover { background:color-mix(in srgb,var(--foreground) 6%,var(--surface)); }
.workspace-menu :is(summary,.menu-row):focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
[dir='rtl'] .menu-row-arrow { transform:rotate(180deg); }
[dir='rtl'] .workspace-menu .menu-row[aria-current='page'] { box-shadow:inset -3px 0 0 var(--accent); }
.account-profile-form .account-profile-block { min-inline-size:0; margin:0; padding:1.25rem; border:1px solid var(--border); border-radius:12px; background:var(--surface); display:grid; gap:1rem; }
.account-profile-form .account-profile-block > :is(h2,h3) { font-size:1.1rem; line-height:1.5; margin:0; }
.account-profile-form .account-profile-block .account-detail-group { padding:0; border:0; margin:0; }
.account-profile-form > .account-extra-details { padding:1.25rem; border:1px solid var(--border); border-radius:12px; }
.account-profile-form > .account-extra-details > summary { cursor:pointer; font-weight:750; line-height:1.5; }
.account-profile-form .account-detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:1rem; }
.account-profile-form :is(label,input,select) { min-inline-size:0; }
@media(min-width:900px) {
  .account-menu-workspace { grid-template-columns:minmax(240px,290px) minmax(0,1fr); gap:2rem; }
  .workspace-menu-toggle { display:none; }
}