/* O-113: the stylesheet of Bizfront's own pages - My sites and the wizard (#472: drawn by the theme's
   product layout, Layout-Product.liquid, which loads it) - and (O-118) of every tenant's sign-in
   page, whose fields' view registers it; so a rule here that isn't scoped to .bizfront-page or
   .auth-form reaches the sign-in page too. Bootstrap loads before it on Bizfront's own pages and
   after it on the sign-in page, so a rule that overrides one of Bootstrap's is one step more
   specific than Bootstrap's own. */

:root {
  /* O-114 (Umbraco's U-107): the longest comfortable line of body text, as Umbraco's site.css has it. */
  --bf-measure: 68ch;
}

/* O-126 (Umbraco's U-117): Bizfront's own palette, bizfront.cc's (Main's site.css): its violet
   accent for what an owner acts on, its ink, muted and border colours for the rest. Light unless
   the page is in TheAdmin's dark colour mode (the sign-in and sign-up pages are; Bizfront's own
   pages are never), as Bootstrap's own colours are. */
:root,
[data-bs-theme='light'] {
  --bf-product-text: #1a1a2e;
  --bf-product-muted: #565673;
  --bf-product-border: #e4e4ef;
  --bf-product-bg-alt: #f6f6fb;
  --bf-product-accent: #5b3df6;
  --bf-product-accent-dark: #4029c9;
  --bf-product-on-accent: #ffffff;
}

/* O-126: in TheAdmin's dark mode (the account pages), Main's dark palette. */
[data-bs-theme='dark'] {
  --bf-product-text: #edf0ff;
  --bf-product-muted: #a7abd6;
  --bf-product-border: #2c2c48;
  --bf-product-bg-alt: #17172c;
  --bf-product-accent: #8a7bff;
  --bf-product-accent-dark: #a598ff;
  --bf-product-on-accent: #100f1e;
}

/* O-126: Bizfront's pages in that palette where Bootstrap's own colours would show - its primary
   (the stepper, a chosen card, a checked box), its text, muted and border colours, a link, a code
   sample and an information notice. Status colours (a success or error notice, a badge, a
   validation message, a red button) stay Bootstrap's. */
:is(.bizfront-page, .auth-form) {
  --bs-primary: var(--bf-product-accent);
  --bs-body-color: var(--bf-product-text);
  --bs-secondary-color: var(--bf-product-muted);
  --bs-border-color: var(--bf-product-border);
  --bs-code-color: var(--bf-product-text);
  --bs-info-text-emphasis: var(--bf-product-text);
  --bs-info-bg-subtle: var(--bf-product-bg-alt);
  --bs-info-border-subtle: var(--bf-product-border);
  color: var(--bs-body-color);
}

/* #472 (Umbraco's U-117): Bizfront's own pages in Bizfront's palette, not a site's: what the theme's
   base stylesheet draws from the site's colours (a link, a heading's rule, a skip link) draws from
   Bizfront's here, as on Umbraco's .bizfront-page. Status colours stay the same on both. */
.bizfront-page {
  --bf-color-primary: var(--bf-product-accent);
  --bf-color-primary-contrast: var(--bf-product-on-accent);
  --bf-color-text: var(--bf-product-text);
  --bf-color-muted: var(--bf-product-muted);
  --bf-color-border: var(--bf-product-border);
  --bf-color-surface: var(--bf-product-bg-alt);
}

/* #472 (Umbraco's U-120): the header of Bizfront's own pages - the name and mark, the pages an owner
   goes between and an account menu - in a tinted band under a rule, drawn by Layout-Product.liquid
   as _ProductHeader.cshtml draws it on Umbraco. Every control is a 44px tap target; on a phone the
   pages are behind a Menu button that shares a line with the name and the account menu (D21), on a
   wide screen they show beside the name with no button. */
.product-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.5rem;
  padding: 0.5rem 1.5rem;
  border-bottom: 1px solid var(--bf-product-border);
  background: var(--bf-product-bg-alt);
}

.product-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bf-product-text);
  text-decoration: none;
}

.product-mark {
  flex: none;
  color: var(--bf-product-accent);
}

/* 40rem is also the breakpoint in Layout-Product.liquid's script: change them together. */
.product-menu {
  position: relative;
  margin-left: auto;
}

/* One nav-link style for every item in the header (#466): the pages, the Menu button and the Account
   menu share colour and weight, with no underline at rest and one for hover and keyboard focus. */
.product-header
  :is(.product-nav a, .product-visitor a, .product-menu summary, .product-account summary) {
  display: flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  font-weight: 600;
  color: var(--bf-product-accent-dark);
  text-decoration: none;
}

.product-header
  :is(.product-nav a, .product-visitor a, .product-menu summary, .product-account summary):is(
    :hover,
    :focus-visible
  ) {
  text-decoration: underline;
}

.product-nav {
  position: absolute;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--bf-product-border);
  border-radius: 0.5rem;
  background: var(--bf-color-bg);
}

@media (min-width: 40rem) {
  .product-menu {
    margin-left: 0;
    margin-right: auto;
  }

  .product-header .product-menu summary {
    display: none;
  }

  .product-nav {
    position: static;
    flex-direction: row;
    gap: 0 1rem;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
  }
}

.product-account {
  position: relative;
  margin-left: 1rem;
}

@media (min-width: 40rem) {
  .product-account {
    margin-left: 0;
  }
}

.product-account form {
  position: absolute;
  right: 0;
  z-index: 1;
  padding: 0.5rem;
  border: 1px solid var(--bf-product-border);
  border-radius: 0.5rem;
  background: var(--bf-color-bg);
}

/* #491: a visitor's header (sign-up, sign-in, check-your-email, email-confirmed) has no pages and no
   account menu, only Sign in and Create account (Sign in alone on a customer's site), on the same line as the name at 390 and 1440px. */
.product-visitor {
  display: flex;
  gap: 0 1rem;
  margin-left: auto;
}

/* The page under the header, at the width of the site's own pages (Umbraco's .wrap.page-body). */
.product-main {
  max-width: var(--bf-max-width, 64rem);
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* A link in a status notice (.alert-link) keeps the notice's colour. */
:is(.bizfront-page, .auth-form) a:not(.btn, .alert-link) {
  color: var(--bf-product-accent);
}

:is(.bizfront-page, .auth-form) a:not(.btn, .alert-link):hover {
  color: var(--bf-product-accent-dark);
}

/* O-127 (Umbraco's U-118): a button on Bizfront's pages is drawn as bizfront.cc's (Main's) are -
   rounded 0.5rem, its words semibold, 1.3rem of padding each side - alike on both tracks and as
   tall as a field (44px). */
:is(.bizfront-page, .auth-form) .btn {
  --bs-btn-padding-x: 1.3rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 0.5rem;
}

/* A primary button filled with the accent; every secondary one outlined in the muted colour, as
   Main's ghost button is, but with an outline that shows (3:1). Each is ringed in the accent when
   focused; a status button keeps its own ring. */
:is(.bizfront-page, .auth-form) :is(.btn-primary, .btn-secondary, .btn-outline-secondary) {
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem
    color-mix(in srgb, var(--bf-product-accent) 50%, transparent);
}

:is(.bizfront-page, .auth-form) .btn-primary {
  --bs-btn-color: var(--bf-product-on-accent);
  --bs-btn-bg: var(--bf-product-accent);
  --bs-btn-border-color: var(--bf-product-accent);
  --bs-btn-hover-color: var(--bf-product-on-accent);
  --bs-btn-hover-bg: var(--bf-product-accent-dark);
  --bs-btn-hover-border-color: var(--bf-product-accent-dark);
  --bs-btn-active-color: var(--bf-product-on-accent);
  --bs-btn-active-bg: var(--bf-product-accent-dark);
  --bs-btn-active-border-color: var(--bf-product-accent-dark);
}

:is(.bizfront-page, .auth-form) :is(.btn-secondary, .btn-outline-secondary) {
  --bs-btn-color: var(--bf-product-text);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--bf-product-muted);
  --bs-btn-hover-color: var(--bf-product-text);
  --bs-btn-hover-bg: var(--bf-product-bg-alt);
  --bs-btn-hover-border-color: var(--bf-product-muted);
  --bs-btn-active-color: var(--bf-product-text);
  --bs-btn-active-bg: var(--bf-product-bg-alt);
  --bs-btn-active-border-color: var(--bf-product-muted);
}

:is(.bizfront-page, .auth-form) :is(.form-control, .form-select):focus {
  border-color: var(--bf-product-accent);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bf-product-accent) 25%, transparent);
}

/* O-140 (Umbraco's U-133): a text area grows to hold what it contains, so text a person or the AI wrote
   is never cut off behind a scrollbar they can't see (design review round 1, #460). */
.bizfront-page textarea.form-control {
  field-sizing: content;
}

/* O-115: the page title is the browser's own h1 size (2rem, as on Umbraco's pages) at every width, where
   Bootstrap's own h1 grows to 40px on a wide screen, and a section heading under it (h2) is smaller
   still at every width, where Bootstrap's own h2 grows to 32px. #472: the title was TheAdmin's
   (its .ta-content h1, 28px); it is the page's own h1 now, in the heading face the theme gives every
   heading, as on Umbraco. */
.bizfront-page h1 {
  font-size: 2rem;
}

.bizfront-page :is(h1, h2, h3) {
  font-family: var(--bf-heading-font-family);
  font-weight: 600;
}

.bizfront-page h2 {
  font-size: 1.375rem;
}

/* O-114 (Umbraco's U-107): help text at body size, a site address in it in the page's own font, and
   paragraphs, help text and validation messages no wider than the measure, so a wide column
   doesn't run lines past 90 characters. */
body .form-text {
  font-size: 1rem;
}

.form-text code {
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
}

.bizfront-page p,
.form-text,
[data-valmsg-for] {
  display: block;
  max-width: var(--bf-measure);
}

/* O-116 (Umbraco's U-108): every control on Bizfront's pages is a tap target at least 44px each
   way, and on the sign-in form (.auth-form) too (O-118). Fields, selects and buttons are 44px tall.
   A checkbox is a 44px square with its box drawn 1.5rem across at its left edge, in line with the
   fields and labels above it; what follows it overlaps the rest of the square. It has an outline
   just inside the square when it has keyboard focus. A button holding only an icon (sign-in's
   show-password) is at least 44px wide too. */
:is(.bizfront-page, .auth-form) .form-control,
:is(.bizfront-page, .auth-form) .form-select {
  min-height: 44px;
  /* O-134 (Umbraco's text fields, 32rem): a field stays within a form's width, not the whole content
     area (design review round 2, B2). */
  max-width: 32rem;
}

/* O-150 (#493): the sign-in's password field, in its input group with the show-password button, is as
   wide as the fields above it (the group's own width is its column's, which a field's max-width
   never reached). Only the sign-in form's: the wizard's own groups are not fields to cap. */
.auth-form .input-group {
  max-width: 32rem;
}

:is(.bizfront-page, .auth-form) .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* O-121: a Branding card's radio mark takes its ring from these too. */
:is(.bizfront-page, .auth-form) input[type='checkbox'],
.bizfront-page .choice {
  --bf-check-ring: var(--bs-secondary-color);
  --bf-check-fill: var(--bs-body-bg);
  --bf-check-mark: none;
}

:is(.bizfront-page, .auth-form) input[type='checkbox'] {
  flex: none;
  width: 44px;
  height: 44px;
  margin: 0 calc(1.5rem - 44px) 0 0;
  border: 0;
  vertical-align: middle;
  appearance: none;
  box-shadow: none;
  background:
    var(--bf-check-mark) 2px center / calc(1.5rem - 4px) no-repeat,
    linear-gradient(var(--bf-check-fill), var(--bf-check-fill)) 2px center / calc(1.5rem - 4px)
      calc(1.5rem - 4px) no-repeat,
    linear-gradient(var(--bf-check-ring), var(--bf-check-ring)) left center / 1.5rem 1.5rem
      no-repeat;
  cursor: pointer;
}

:is(.bizfront-page, .auth-form) input[type='checkbox']:checked,
.bizfront-page .choice:has(> input:checked) {
  --bf-check-ring: var(--bs-primary);
  --bf-check-fill: var(--bs-primary);
  --bf-check-mark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

:is(.bizfront-page, .auth-form) input[type='checkbox']:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -6px;
}

/* High Contrast mode (forced colours) drops the background layers the box is drawn with, so there
   the checkbox is the browser's own, which the mode draws itself, still 44px; nothing overlaps it. */
@media (forced-colors: active) {
  :is(.bizfront-page, .auth-form) input[type='checkbox'] {
    appearance: auto;
    margin-right: 0;
  }
}

/* A checkbox beside its label, the label's first line level with the box. */
:is(.bizfront-page, .auth-form) .form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-left: 0;
}

:is(.bizfront-page, .auth-form) .form-check-label {
  padding-top: calc((44px - 1.5em) / 2);
}

/* O-118: the sign-in form's links (register, forgot password) are 44px-tall tap targets, each on a
   line of its own; O-125: so is a site card's address. */
.auth-form li > a,
.bizfront-page .site-card-address a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* O-139 (Umbraco's U-132): an account page's prose stays within the page's measure, not the width of
   its column (the design review's text check, 90 characters a line). */
.auth-form p {
  max-width: var(--bf-measure);
}

/* O-139: so is a link that stands on a line of its own on an account page ("Home"),
   in each dimension: .link-action, the theme's class for an action link. */
.auth-form .link-action {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}

/* O-117 (Umbraco's U-109): every value in a list of details (.summary-list, the wizard's review) is at least 44px
   tall, its text at the top, so a link in one (a phone number, an email address, each invited
   editor on a line of its own) is a 44px tap target taking its own space, never overlapping the
   next, and the rows keep one rhythm. */
.bizfront-page .summary-list > dd {
  min-height: 44px;
}

.bizfront-page .summary-list > dd a {
  display: inline-block;
  min-height: 44px;
  vertical-align: top;
}

/* O-113 (Umbraco's U-106): a stacked table - a table in a .stacked-table frame - turns each record
   (a tbody) into a block when the frame is narrower than 45rem, so a wide table (the wizard's
   hours) fits a phone, or a column beside a sidebar, instead of scrolling sideways. Each cell is
   named by its column (data-label). */
.stacked-table {
  container-type: inline-size;
}

@container (max-width: 45rem) {
  /* Hidden as .visually-hidden hides, which a container query can't apply as a class. */
  .stacked-table > table > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .stacked-table > table,
  .stacked-table > table > tbody {
    display: block;
  }

  .stacked-table > table > tbody {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  }

  .stacked-table > table > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }

  .stacked-table > table > tbody > tr > td {
    display: block;
    padding: 0.25rem 0;
    border: 0;
  }

  .stacked-table > table > tbody > tr > td:first-child {
    grid-column: 1 / -1;
    font-weight: 700;
  }

  .stacked-table > table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
  }
}

/* O-120 (Umbraco's U-111): the wizard's opening-hours editor, a stacked table of days. A day
   ticked Closed or 24 hours shows no times. Stacked, each control's label sits beside it: a day's
   name and its two ticks on one line, its times on the next, and no time line on a ticked day. */
.hours-editor tr:has(.hours-flag input:checked) .hours-time > * {
  visibility: hidden;
}

@container (max-width: 45rem) {
  .stacked-table > .hours-editor > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
  }

  .stacked-table > .hours-editor > tbody > tr > td:first-child {
    flex: 1 1 auto;
  }

  .stacked-table > .hours-editor > tbody > tr > .hours-flag,
  .stacked-table > .hours-editor > tbody > tr > .hours-time {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .stacked-table > .hours-editor > tbody > tr > .hours-flag {
    flex: none;
  }

  .stacked-table > .hours-editor > tbody > tr > .hours-flag::before {
    order: 1;
    font-weight: 400;
  }

  .stacked-table > .hours-editor > tbody > tr > .hours-time {
    order: 1;
    flex: 1 1 40%;
  }

  .stacked-table > .hours-editor > tbody > tr:has(.hours-flag input:checked) > .hours-time {
    display: none;
  }
}

/* O-121 (Umbraco's U-112): the Branding step's colours and fonts are cards to choose from, each
   showing what a site gets - a palette's primary, surface and text colours, and a typography's
   heading and body fonts, the values Bizfront.Theme's Layout.liquid gives each name (a new palette
   or typography there needs its swatch or sample here too). Each card's radio covers the whole
   card, transparent, so the card is its tap target; the card draws the radio's state. Colours sit
   two to a row on a phone, fonts one. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../Bizfront.Theme/fonts/fraunces-latin-600.woff2') format('woff2');
}

.bizfront-page .choice-group {
  margin-bottom: 1.5rem;
}

/* Each set's heading reads like the step's other labels: at body size and normal weight, as Bootstrap's .form-label is. */
.bizfront-page .choice-group > legend {
  float: none;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.bizfront-page .choice-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.75rem;
  max-width: 48rem;
}

.bizfront-page .choice-list-wide {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.bizfront-page .choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.5rem;
}

.bizfront-page .choice > input[type='radio'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.bizfront-page .choice-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.bizfront-page .choice-name::before {
  content: '';
  flex: none;
  box-sizing: border-box;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--bf-check-ring);
  border-radius: 50%;
  background: var(--bs-body-bg, #fff);
}

.bizfront-page .choice:has(> input:checked) {
  border-color: var(--bs-primary, #0d6efd);
  box-shadow: 0 0 0 1px var(--bs-primary, #0d6efd);
}

.bizfront-page .choice:has(> input:checked) .choice-name::before {
  border-width: 0.375rem;
}

.bizfront-page .choice:has(> input:focus-visible) {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
}

.bizfront-page .palette-swatch {
  display: flex;
  height: 2rem;
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 0.25rem;
}

.bizfront-page .palette-swatch > span {
  flex: 1;
}

.bizfront-page .palette-swatch > :first-child {
  flex: 2;
  background: var(--swatch-primary);
}

.bizfront-page .palette-swatch > :nth-child(2) {
  background: var(--swatch-surface);
}

.bizfront-page .palette-swatch > :nth-child(3) {
  background: var(--swatch-text);
}

.bizfront-page .palette-swatch[data-palette='Forest'] {
  --swatch-primary: #1a5c4a;
  --swatch-surface: #eef5f1;
  --swatch-text: #1f2430;
}

.bizfront-page .palette-swatch[data-palette='Ocean'] {
  --swatch-primary: #1a4d8f;
  --swatch-surface: #eff4fb;
  --swatch-text: #1f2430;
}

.bizfront-page .palette-swatch[data-palette='Sunset'] {
  --swatch-primary: #a94d1c;
  --swatch-surface: #fbf6f2;
  --swatch-text: #241f1a;
}

.bizfront-page .palette-swatch[data-palette='Slate'] {
  --swatch-primary: #3a3f4b;
  --swatch-surface: #f5f6f8;
  --swatch-text: #1f2228;
}

.bizfront-page .font-sample {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  --sample-heading: 'Fraunces', Georgia, serif;
}

.bizfront-page .font-sample-heading {
  font-family: var(--sample-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}

.bizfront-page .font-sample-body {
  font-family: var(--sample-body);
}

.bizfront-page .font-sample[data-typography='Default'] {
  --sample-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.bizfront-page .font-sample[data-typography='Serif'] {
  --sample-body: Georgia, 'Times New Roman', serif;
}

.bizfront-page .font-sample[data-typography='Modern'] {
  --sample-body: 'Helvetica Neue', Arial, sans-serif;
  --sample-heading: var(--sample-body);
}

/* In forced colours (High Contrast mode) the swatches keep their own colours, since they are what's
   being chosen, and the chosen card is outlined in the system's highlight colour, where its border
   and shadow are repainted like every other card's. */
@media (forced-colors: active) {
  .bizfront-page .palette-swatch {
    forced-color-adjust: none;
  }

  .bizfront-page .choice:has(> input:checked) {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}

/* O-122 (Umbraco's U-113): the wizard's steps are one row of numbered circles - a done step's
   filled, the current one's ringed more thickly and its title bold, one to come plain - joined by
   a line that is the primary colour up to the current step. Each step is titled under its circle;
   in a frame under 40rem (a phone) the titles are hidden as .visually-hidden hides them, still read
   out, and a line above names the current step instead. */
.bizfront-page .wizard-steps {
  container-type: inline-size;
  margin-bottom: 1.5rem;
}

.bizfront-page .wizard-steps-status {
  display: none;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.bizfront-page .wizard-steps ol {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0;
  padding: 0;
  list-style: none;
  isolation: isolate;
}

.bizfront-page .wizard-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.25rem;
  color: var(--bs-secondary-color);
  text-align: center;
}

.bizfront-page .wizard-steps li + li::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: calc(1rem - 1px);
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--bs-border-color);
}

.bizfront-page .wizard-step-number {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--bs-secondary-color);
  border-radius: 50%;
  background: var(--bs-body-bg);
  font-weight: 600;
  line-height: 1;
}

/* A step reached - done, or the current one: its title, the line into it and its ring. */
.bizfront-page .wizard-steps li:is(.wizard-step-done, [aria-current='step']) {
  color: var(--bs-body-color);
}

.bizfront-page .wizard-steps li:is(.wizard-step-done, [aria-current='step'])::before {
  background: var(--bs-primary);
}

.bizfront-page .wizard-steps li:is(.wizard-step-done, [aria-current='step']) .wizard-step-number {
  border-color: var(--bs-primary);
}

.bizfront-page .wizard-step-done .wizard-step-number {
  background: var(--bs-primary);
  color: var(--bf-product-on-accent);
}

.bizfront-page .wizard-steps [aria-current='step'] .wizard-step-number {
  border-width: 3px;
  color: var(--bs-primary);
}

.bizfront-page .wizard-steps [aria-current='step'] .wizard-step-title {
  font-weight: 700;
}

@container (max-width: 40rem) {
  .bizfront-page .wizard-steps-status {
    display: block;
  }

  /* Hidden as .visually-hidden hides, which a container query can't apply as a class. */
  .bizfront-page .wizard-step-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* In forced colours (High Contrast mode) the mode repaints a done step's fill and the line up to the
   current step like the rest, so the steps draw those, and the rings of the steps reached, in the
   system's highlight colour instead. */
@media (forced-colors: active) {
  .bizfront-page .wizard-step-number {
    border-color: GrayText;
  }

  .bizfront-page .wizard-steps li + li::before {
    background: GrayText;
  }

  .bizfront-page .wizard-steps li:is(.wizard-step-done, [aria-current='step'])::before {
    background: Highlight;
  }

  .bizfront-page .wizard-steps li:is(.wizard-step-done, [aria-current='step']) .wizard-step-number {
    border-color: Highlight;
  }

  .bizfront-page .wizard-step-done .wizard-step-number {
    background: Highlight;
    color: HighlightText;
  }
}

/* O-125 (Umbraco's U-116): a row of actions - a page's own (My sites' Create a new site and the
   rest) or a card's - 8px apart across and down when they wrap. A form in it is just its button. */
.bizfront-page .action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bizfront-page .action-row form {
  display: contents;
}

/* O-136 (Umbraco's U-129): a row of fields (City, State and Postal code; Phone and Email) wraps, each
   field at least 10rem wide, and stays within 48rem, so it is neither squeezed on a phone nor a whole
   content area wide on a desktop (design review round 3, R3-02). */
.bizfront-page .field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  max-width: 48rem;
}

.bizfront-page .field-row > * {
  flex: 1 1 10rem;
  min-width: 10rem;
}

/* O-135 (Umbraco's U-128): a wizard step's own row of actions stays at the bottom of the screen while the
   step scrolls, so its primary action is in reach on a step of any length (design review round 2,
   B3: the business profile is some 3,000px of fields). */
.bizfront-page .action-row-sticky {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-body-bg, #fff);
}

/* O-125 (Umbraco's U-116): My sites lists each site as a framed card - its name, a status badge,
   its address, when it was created and its subscription, then its row of actions - in as many
   columns as fit. Its colours are Bootstrap's, with Bootstrap 5.3's values where a variable isn't
   set. */
.bizfront-page .site-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.bizfront-page .site-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.5rem;
}

.bizfront-page .site-card > * {
  margin: 0;
}

.bizfront-page .site-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

/* A step below the section heading (.bizfront-page h2, 22px), where Bootstrap's h3 is 28px. */
.bizfront-page .site-card-name {
  margin: 0;
  font-size: 1.125rem;
}

.bizfront-page .site-status {
  padding: 0.125rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--bs-secondary-color, rgba(33, 37, 41, 0.75));
  line-height: 1.5;
}

.bizfront-page .site-status[data-status='live'] {
  color: var(--bs-success-text-emphasis, #0a3622);
  background: var(--bs-success-bg-subtle, #d1e7dd);
}

.bizfront-page .site-status[data-status='failed'] {
  color: var(--bs-danger-text-emphasis, #58151c);
  background: var(--bs-danger-bg-subtle, #f8d7da);
}

.bizfront-page .site-card-error {
  color: var(--bs-danger-text-emphasis, #58151c);
}

.bizfront-page .site-card-address a {
  overflow-wrap: anywhere;
}

.bizfront-page .site-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
}

.bizfront-page .site-card-facts dt {
  font-weight: 600;
}

.bizfront-page .site-card-facts dd {
  margin: 0;
}

/* The trial field under its label, its button beside it. */
.bizfront-page .site-card-trial {
  display: grid;
  grid-template-columns: 8rem auto;
  justify-content: start;
  align-items: end;
  gap: 0.25rem 0.5rem;
}

.bizfront-page .site-card-trial label {
  grid-column: 1 / -1;
  margin: 0;
  font-weight: 600;
}