/* Account wall pages: set up an account, pending, and account messages.
   Builds on the design system tokens in /assets/styles.css.
   Phone layout up to 900px, desktop above (same switch as the home page). */

/* The interaction signals (Main and Secondary buttons, links, chevron rows):
   imported here, not from styles.css, so they reach every page that loads
   this file and never the admin quote tool (which loads styles.css only). */
@import url("../components/interaction.css");

.aw {
  --aw-pad: 24px;
  --aw-input-h: var(--control-h-md);
  background: var(--pw-white);
  letter-spacing: -0.01em;
}

.aw a:not([class]) {
  border-bottom: 0;
}

.aw-desktop-only { display: none !important; }

@media (min-width: 901px) {
  .aw { --aw-pad: 80px; }
  .aw-desktop-only { display: revert !important; }
  .aw-phone-only { display: none !important; }
}

.aw-icon { flex: none; }

/* ---------- Header ---------- */

.aw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 65px;  /* border included: the same height with or without a nav */
  padding: 10px var(--aw-pad);
  border-bottom: 1px solid var(--border-hairline);
}

.aw-brand { display: inline-flex; flex: none; border: 0; }
.aw-brand img { width: var(--pw-logo-header); height: auto; }  /* one width for every header (tokens/spacing.css) */

.aw-header__action { margin: 0; }

.aw-headbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-md);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-body);
  font: var(--weight-regular) 17px/1.2 var(--font-core);
  cursor: pointer;
  white-space: nowrap;
}

/* No magenta: ink at rest and on hover (the colour is set for :hover so
   base.css's link hover colour never reaches "Help" or "Sign in"). From 901px
   it is a Secondary button and hovers to Paper. */
.aw-headbtn:hover { color: var(--text-body); }

/* Signed-in pages (aw-header--signed-in: an approved account's pages and the
   library pages) and a header that opts in with aw-header--sticky (the public
   home page): the header stays at the top while the page scrolls. White, as
   every signed-in page is. Above the page; below the catalogue panel
   (z-index 50) and Accept and pay (100). Sign-in, pending, not-active and the
   static pages are not sticky. If the manifest's display becomes standalone or
   these pages get viewport-fit=cover, add
   padding-top: calc(10px + env(safe-area-inset-top)) (admin.md). */
.aw-header:is(.aw-header--signed-in, .aw-header--sticky) {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--pw-white);
}

/* The signed-in header: raised off the page, 65px on phones and 81px from
   901px (border included), with its one outlined button (.aw-headlink). */
.aw-header--signed-in { box-shadow: var(--shadow-raised); }

.aw-headlink {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  color: var(--text-body);
  font: var(--weight-medium) 16px/1.2 var(--font-core);
  white-space: nowrap;
  transition: var(--transition-control);
}
.aw-headlink .aw-icon { width: 20px; height: 20px; }
/* A Secondary button (interaction.css) in colour, border, hover and focus;
   its size is its own, tuned for a 360px phone. */
.aw-headlink:hover { color: var(--text-body); }
@media (hover: hover) {
  .aw-headlink:hover { background: var(--act-secondary-hover); }
}
.aw-headlink:focus-visible { outline: 2px solid var(--pw-magenta); outline-offset: 2px; }

/* In-page links land below the sticky header (65px phone; 81px from 901px,
   signed in and on the public home alike, border included). */
html:has(.aw-header--signed-in, .aw-header--sticky) { scroll-padding-top: 65px; }

@media (min-width: 901px) {
  html:has(.aw-header--signed-in, .aw-header--sticky) { scroll-padding-top: 81px; }
  .aw-header { min-height: 95px; padding: 14px 48px; }
  .aw-header--signed-in { min-height: 81px; padding-block: 0; }
  .aw-headlink { min-height: 48px; padding: 0 20px; }
  .aw-headbtn {
    padding: 0 18px;
    border: 1px solid var(--border-strong);
    transition: var(--transition-control);
  }
}
@media (min-width: 901px) and (hover: hover) {
  .aw-headbtn:hover { background: var(--act-secondary-hover); }
}

/* The signed-in column: the account home's (1120px, centred; 16px sides on
   phones, 48px from 901px, as .aw-home). On signed-in pages
   (aw-header--signed-in) the header's logo and button sit in it (the home
   page sets its own column on .pw-home); the background still runs full
   width. Your details, Contact,
   the requote pages and the order quote page use it too (.aw-page--column);
   a header followed by one, or by the pending account home (.aw-pending),
   joins the column without becoming sticky (pending Contact and home). */
.aw { --aw-col: 1120px; --aw-col-pad: 16px; }
@media (min-width: 901px) { .aw { --aw-col-pad: 48px; } }
.aw-header:is(.aw-header--signed-in, :has(+ .aw-page--column), :has(+ .aw-pending), .aw-header--sticky) {
  padding-inline: max(var(--aw-col-pad), calc((100% - var(--aw-col)) / 2));
}

/* ---------- Shared type ---------- */

.aw-eyebrow {
  margin: 0 0 12px;
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.aw-title {
  font: var(--weight-bold) 30px/1.08 var(--font-core);
  letter-spacing: var(--tracking-display);
}

.aw-lead {
  margin-top: 14px;
  font: var(--weight-regular) 17px/1.5 var(--font-core);
}

@media (min-width: 901px) {
  .aw-title { font-size: 52px; line-height: 1.04; }
  .aw-lead { margin-top: 24px; font-size: 19px; font-weight: var(--weight-light); line-height: 1.6; }
}

.aw-benefits {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  border-top: 1px solid var(--border-hairline);
}

.aw-benefits li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-hairline);
}

.aw-benefits strong {
  display: block;
  font: var(--weight-bold) 17px/1.3 var(--font-core);
}

.aw-benefits span {
  display: block;
  color: var(--text-muted);
  font: var(--weight-regular) 15px/1.45 var(--font-core);
}

/* ---------- Set up an account ---------- */

.aw-setup {
  padding: 28px var(--aw-pad) 64px;
}

@media (min-width: 901px) {
  .aw-setup {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 720px);
    gap: clamp(48px, 7vw, 100px);
    max-width: 1280px;
    padding-top: 64px;
    padding-bottom: 96px;
  }
}

.aw-form { margin-top: 32px; }

@media (min-width: 901px) {
  .aw-form { margin-top: 0; }
}

.aw-group {
  margin: 0 0 32px;
  padding: 0;
  border: 0;
  min-width: 0;
}

.aw-group__title {
  padding: 0;
  margin-bottom: 16px;
  font: var(--type-subhead);
}

.aw-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  min-width: 0;
}

.aw-field__label {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-body);
}

.aw-field__optional {
  font: var(--weight-regular) 13px/1 var(--font-core);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

.aw-field__hint {
  color: var(--text-muted);
  font: var(--weight-regular) 14px/1.45 var(--font-core);
}

.aw-field__error {
  color: var(--magenta-700);
  font: var(--weight-medium) 14px/1.45 var(--font-core);
}

.aw-group__hint { margin-top: -4px; }

.aw-input {
  width: 100%;
  height: var(--aw-input-h);
  padding: 0 14px;
  background: var(--pw-white);
  color: var(--text-body);
  border: 1px solid var(--ink-300);
  border-radius: 0;
  font: var(--weight-regular) 17px/1.2 var(--font-core);
  transition: var(--transition-control);
}

.aw-input::placeholder { color: var(--ink-500); }
.aw-input:hover { border-color: var(--ink-500); }
.aw-input:focus { outline: none; border-color: var(--pw-ink); box-shadow: inset 0 0 0 1px var(--pw-ink); }
.aw-input[aria-invalid="true"] { border-color: var(--pw-magenta); box-shadow: inset 0 0 0 1px var(--pw-magenta); }
.aw-input--caps { text-transform: uppercase; }
.aw-input + .aw-input { margin-top: 4px; }

.aw-select { position: relative; display: block; }
.aw-select select { appearance: none; padding-right: 44px; cursor: pointer; }
.aw-select__chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }

/* Phone: title on its own half-width row, then first name and surname. */
.aw-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 20px;
}

.aw-row--names { grid-template-areas: "title ." "first surname"; }
.aw-field--title { grid-area: title; }
.aw-field--first { grid-area: first; }
.aw-field--surname { grid-area: surname; }

/* Phone: mobile, its hint, then email, one per line. */
.aw-row--contact { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mobile" "hint" "email"; }
.aw-field--mobile { grid-area: mobile; }
.aw-row__hint { grid-area: hint; margin: -8px 0 16px; }
.aw-field--email { grid-area: email; }

@media (min-width: 901px) {
  .aw-row--names {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.8fr) minmax(0, 1.8fr);
    grid-template-areas: "title first surname";
  }
  .aw-row--contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "mobile email" "hint hint";
  }
  .aw-row--town { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .aw-field--password { max-width: 360px; }
}

.aw-trade {
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid var(--border-hairline);
}

.aw-check {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  min-height: 56px;
  background: var(--pw-paper);
  cursor: pointer;
  font: var(--weight-regular) 17px/1.45 var(--font-core);
}

.aw-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.aw-check__box {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border: 2px solid var(--ink-700);
  border-radius: var(--radius-hairline);
  background: var(--pw-white);
  color: var(--pw-white);
  transition: var(--transition-control);
}

.aw-check__box svg { opacity: 0; }
.aw-check:hover .aw-check__box { border-color: var(--pw-magenta); }
.aw-check input:checked + .aw-check__box { background: var(--pw-magenta); border-color: var(--pw-magenta); }
.aw-check input:checked + .aw-check__box svg { opacity: 1; }
.aw-check input:focus-visible + .aw-check__box { box-shadow: var(--shadow-focus); }
.aw-trade .aw-field__error { margin-top: 8px; }

.aw-legal {
  margin: 20px 0 24px;
  color: var(--text-muted);
  font: var(--weight-regular) 14px/1.6 var(--font-core);
}

/* ---------- Links in sentences and lines ----------
   The shared link (interaction.css .pw-link) for the links these pages draw
   without a class: ink, underlined 3px below, the underline 2px on hover. No
   magenta text links. Links with a class of their own take .pw-link. */
:is(.aw-legal, .aw-job__text, .aw-message__body, .aw-start__alt, .aw-page__note, .aw-details__note, .aw-check__text, .tc, .aw-quote__state, .aw-op__more, .aw-op__empty) a:not([class]),
:is(.aw-legal, .aw-job__text, .aw-message__body, .aw-start__alt, .aw-page__note, .aw-details__note, .aw-check__text, .tc, .aw-quote__state, .aw-op__more, .aw-op__empty) a:not([class]):hover {
  border-bottom: 0;
  color: var(--pw-ink);
  text-decoration: underline;
  text-decoration-thickness: var(--link-thickness);
  text-underline-offset: var(--link-offset);
}
@media (hover: hover) {
  :is(.aw-legal, .aw-job__text, .aw-message__body, .aw-start__alt, .aw-page__note, .aw-details__note, .aw-check__text, .tc, .aw-quote__state, .aw-op__more, .aw-op__empty) a:not([class]):hover {
    text-decoration-thickness: var(--link-thickness-hover);
  }
}

.aw-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.aw-form__error {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 3px solid var(--pw-magenta);
  background: var(--magenta-050);
  font: var(--weight-medium) 15px/1.45 var(--font-core);
}

/* .aw-submit: the old magenta submit button. The account pages now use the
   Main button (interaction.css .pw-act--main); this stays, unchanged, for the
   Lab pages, which still use it. */
.aw-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--control-h-lg);
  padding: 0 32px;
  border: 0;
  border-radius: 0;
  background: var(--pw-magenta);
  color: var(--pw-white);
  font: var(--weight-bold) 17px/1 var(--font-core);
  letter-spacing: var(--tracking-caps);
  cursor: pointer;
  transition: var(--transition-control);
}

.aw-submit:hover:not(:disabled) { background: var(--magenta-600); }
.aw-submit:active:not(:disabled) { background: var(--magenta-700); transform: translateY(1px); }
.aw-submit:disabled { background: var(--ink-200); color: var(--ink-600); cursor: not-allowed; }

@media (min-width: 901px) {
  .aw-submit { width: auto; min-width: 276px; }
}

/* Where a Main or Secondary button sits (the look is interaction.css's):
   .aw-act-wide, full width on phones and at least 276px from 901px (as the
   old submit button); .aw-act-block, full width at every size. */
.aw-act-wide { width: 100%; }
.aw-act-block { display: flex; width: 100%; }
@media (min-width: 901px) {
  .aw-act-wide { width: auto; min-width: 276px; }
}

/* ---------- Account pending ----------
   In the signed-in column, under the logo: on phones the sections' own side
   padding is the column's (the dark panel still runs edge to edge); from
   901px the grid is the 1120px column, centred. */

.aw-pending { --aw-pad: var(--aw-col-pad); padding-bottom: 0; }

.aw-ink {
  background: var(--pw-ink);
  color: var(--pw-white);
  padding: 36px var(--aw-pad) 32px;
}

.aw-ink .aw-eyebrow { color: rgba(255, 255, 255, 0.72); }

.aw-ink__title {
  font: var(--weight-bold) 28px/1.12 var(--font-core);
  letter-spacing: var(--tracking-display);
}

.aw-ink__text {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.66);
  font: var(--weight-regular) 17px/1.5 var(--font-core);
}

.aw-next { padding: 28px var(--aw-pad) 64px; }

.aw-section-title { font: var(--type-subhead); }

.aw-steps {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  border-top: 1px solid var(--border-hairline);
}

.aw-steps__item {
  position: relative;
  padding: 16px 0 18px 28px;
  border-bottom: 1px solid var(--border-hairline);
}

.aw-steps__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink-500);
}

.aw-steps__item.is-current::before { background: var(--pw-magenta); border-color: var(--pw-magenta); }

.aw-steps__item strong {
  display: block;
  font: var(--weight-bold) 16px/1.4 var(--font-core);
}

.aw-steps__item span {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font: var(--weight-regular) 15px/1.5 var(--font-core);
}

.aw-job {
  padding: 28px var(--aw-pad) 32px;
  background: var(--pw-paper);
  border-top: 1px solid var(--border-hairline);
}

.aw-job__title { font: var(--type-subhead); }

.aw-job__text {
  margin: 12px 0 20px;
  color: var(--text-muted);
  font: var(--weight-regular) 16px/1.55 var(--font-core);
}

/* .aw-btn-outline: the old outlined button. The account pages now use the
   Secondary button (interaction.css .pw-act--secondary); this stays,
   unchanged, for the Lab pages, which still use it. */
.aw-btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 20px;
  border: 1px solid var(--border-strong);
  background: var(--pw-white);
  color: var(--text-body);
  font: var(--weight-bold) 16px/1.2 var(--font-core);
  letter-spacing: var(--tracking-caps);
  transition: var(--transition-control);
}

.aw-btn-outline:hover { background: var(--pw-ink); color: var(--pw-white); }

@media (min-width: 901px) {
  .aw-pending {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    gap: clamp(48px, 7vw, 80px);
    max-width: calc(var(--aw-col) + 2 * var(--aw-col-pad));
    margin: 0 auto;
    padding: 64px var(--aw-col-pad) 96px;
  }
  .aw-pending__intro .aw-title { font-size: 56px; }
  .aw-ink { padding: 44px 40px 46px; }
  .aw-ink__title { font-size: 40px; line-height: 1.08; }
  .aw-ink__text { font-size: 17px; }
  .aw-job--box {
    margin-top: 20px;
    padding: 28px 28px 30px;
    border: 1px solid var(--border-hairline);
  }
  .aw-job--box .aw-job__text { margin-bottom: 0; color: var(--ink-700); }
}

/* ---------- Message pages (suspended, ready, form errors) ---------- */

.aw-message {
  max-width: 760px;
  padding: 48px var(--aw-pad) 96px;
}

.aw-message__title {
  font: var(--weight-bold) 30px/1.1 var(--font-core);
  letter-spacing: var(--tracking-display);
}

.aw-message__body {
  margin-top: 16px;
  font: var(--weight-regular) 17px/1.55 var(--font-core);
}

.aw-message__body p + p,
.aw-message__body ul + p { margin-top: 20px; }
.aw-message__list { margin: 12px 0 0; padding-left: 20px; }

@media (min-width: 901px) {
  .aw-message { padding-top: 80px; }
  .aw-message__title { font-size: 44px; }
}

/* ---------- Header account button (public pages) ---------- */

.aw-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  gap: 0;  /* not the shared 8px: "Sign in" and "or create an account" are one label */
  font: var(--weight-medium) 15px/1.2 var(--font-core);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* Its colours, hover, pressed and focus are the Main button's (.pw-act--main in
   the markup, interaction.css); its size is its own, tuned for a 360px phone. */

@media (min-width: 901px) {
  .aw-account-btn { min-height: 48px; padding: 0 22px; font-size: 16px; }
}

/* ---------- Sign in: shared pieces ---------- */

.aw-signin__title {
  font: var(--weight-bold) 28px/1.1 var(--font-core);
  letter-spacing: var(--tracking-display);
}

.aw-signin-form .aw-field { margin-bottom: 20px; }

.aw-signin-form .aw-field--signin-password { margin-bottom: 0; }

.aw-forgotten {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 8px;
}

/* Buttons that look like links ("Forgotten it?", "Email me a sign-in link
   instead"); real buttons so the form works without JavaScript. */
.aw-textlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -12px 0;
  padding: 0;
  border: 0;
  background: none;
  font: var(--weight-regular) 17px/1.3 var(--font-core);
  cursor: pointer;
}

/* The look is the shared link's (the markup adds .pw-link): ink, underlined.
   An exception recorded in DESIGN-DEVIATIONS.md: both send an email, an
   action, but read as links in the form. */
.aw-textlink--accent { font-size: 15px; }

.aw-password { position: relative; }
.aw-password .aw-input { padding-right: 84px; }

.aw-password__toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  min-width: 72px;
  padding: 0 16px;
  border: 0;
  background: none;
  color: var(--text-body);
  font: var(--weight-regular) 16px/1 var(--font-core);
  cursor: pointer;
}

.aw-password__toggle:hover { color: var(--pw-magenta); }
.aw-password__toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -4px; }

.aw-check--plain {
  align-items: center;
  margin: 4px 0 24px;
  padding: 0;
  min-height: 44px;
  background: none;
}

.aw-check--plain .aw-check__box { margin-top: 0; }

.aw-signin-form__alt { margin: 28px 0 0; }

.aw-form__notice {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-left: 3px solid var(--pw-ink);
  background: var(--pw-paper);
  font: var(--weight-medium) 15px/1.45 var(--font-core);
}

.aw-signin-form .aw-form__error { margin-bottom: 20px; }

.aw-new__title { font: var(--weight-bold) 22px/1.2 var(--font-core); letter-spacing: var(--tracking-display); }
.aw-new__text { margin: 10px 0 20px; color: var(--text-muted); font: var(--weight-regular) 17px/1.45 var(--font-core); }

/* ---------- Sign in page (/sign-in, and emailed-link pages) ---------- */

.aw-signin-page__intro {
  padding: 32px var(--aw-pad) 36px;
  background: var(--pw-ink);
  color: var(--pw-white);
}

.aw-signin-page__intro .aw-eyebrow { color: rgba(255, 255, 255, 0.72); }

.aw-signin-page__lead {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.66);
  font: var(--weight-light) 17px/1.6 var(--font-core);
}

.aw-signin-page__form { padding: 28px var(--aw-pad) 36px; }

.aw-new {
  padding: 28px var(--aw-pad) 64px;
  background: var(--pw-paper);
  border-top: 1px solid var(--border-hairline);
}

/* Desktop: the same content as the sign-in box, as a card on paper. */
@media (min-width: 901px) {
  .aw-signin-page {
    min-height: calc(100vh - 94px);
    min-height: calc(100svh - 94px); /* the small viewport: steady while Safari's toolbars show and hide */
    padding: 64px 24px 96px;
    background: var(--pw-paper);
  }
  .aw-signin-card {
    max-width: 440px;
    margin: 0 auto;
    padding: 32px 32px 36px;
    background: var(--pw-white);
    border: 1px solid var(--border-hairline);
  }
  .aw-signin-page__intro { padding: 0 0 24px; background: none; color: var(--text-body); }
  .aw-signin-page__intro .aw-eyebrow { color: var(--text-muted); }
  .aw-signin-page__lead { margin-top: 8px; color: var(--text-muted); font-size: 16px; }
  .aw-signin-page__form { padding: 0; }
  .aw-new { margin-top: 32px; padding: 24px 0 0; background: none; }
}

/* ---------- Desktop sign-in box over the current page ---------- */

.aw-signin-box {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-body);
  letter-spacing: -0.01em;
  overflow: hidden;
}

.aw-signin-box::backdrop { background: transparent; }

/* The page dims below the header; the header stays as it was. */
.aw-signin-box__dim {
  position: absolute;
  inset: var(--aw-box-top, 0) 0 0 0;
  background: rgba(34, 31, 32, 0.36);
}

.aw-signin-box__panel {
  --aw-pad: 32px;
  --aw-input-h: var(--control-h-md);
  position: absolute;
  top: calc(var(--aw-box-top, 0px) + 16px);
  right: var(--aw-box-right, 24px);
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - var(--aw-box-top, 0px) - 32px);
  max-height: calc(100svh - var(--aw-box-top, 0px) - 32px); /* the small viewport: steady while Safari's toolbars show and hide */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--pw-white);
  border: 1px solid var(--border-hairline);
  box-shadow: 0 16px 40px rgba(34, 31, 32, 0.18);
}

/* The padding sits on this inner block, not on the scrolling panel: Safari
   drops a scroll box's bottom padding, which left the last button flush
   against the edge with no room below it. */
.aw-signin-box__body { padding: 28px var(--aw-pad); }

/* The fade at the foot of the box while there is more below (header.js adds
   --more). It sits on the panel's bottom edge as the box scrolls, and its
   negative margin cancels its height, so it takes no space. */
.aw-signin-box__panel::after {
  content: "";
  position: sticky;
  bottom: 0;
  display: block;
  height: 56px;
  margin-top: -56px;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--pw-white) 90%);
  pointer-events: none;
  opacity: 0;
}

.aw-signin-box__panel--more::after { opacity: 1; }

.aw-signin-box__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 24px;
}

.aw-signin-box__head .aw-eyebrow { margin-bottom: 6px; }

.aw-signin-box__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -6px -10px 0 0;
  border: 0;
  background: none;
  color: var(--text-body);
  cursor: pointer;
}

.aw-signin-box__close:hover { color: var(--pw-magenta); }

.aw-new--box { margin-top: 28px; padding: 24px 0 0; background: none; }
.aw-new--box .aw-new__title { font-size: 18px; }
.aw-new--box .aw-new__text { margin: 8px 0 18px; font-size: 16px; }

html.aw-signin-open { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .aw-signin-box[open] .aw-signin-box__panel { animation: aw-drop 160ms cubic-bezier(0.2, 0, 0.2, 1); }
  .aw-signin-box[open] .aw-signin-box__dim { animation: aw-fade 160ms linear; }
  .aw-signin-box__panel::after { transition: opacity 160ms linear; }
}

@keyframes aw-drop { from { opacity: 0; transform: translateY(-8px); } }
@keyframes aw-fade { from { opacity: 0; } }

.aw-label {
  margin: 0 0 16px;
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-body);
}

.aw-home__head { padding: 32px var(--aw-pad) 0; }

/* Links under the pending screen's sections and /contact's Add to home screen */

.aw-start__alt {
  margin-top: 16px;
  color: var(--ink-700);
  font: var(--weight-regular) 15px/1.5 var(--font-core);
}


@media (min-width: 901px) {
  .aw-home__head { padding: 64px 0 0; }
  .aw-home__head .aw-eyebrow { margin-bottom: 8px; }
}

/* Add to home screen: phones, and wider screens with a touchscreen (iPads,
   with or without a keyboard or trackpad). Not on a PC with only a mouse. */
@media (min-width: 901px) and (not (any-pointer: coarse)) {
  .aw-home-screen-link { display: none !important; }
}

/* ---------- Account home: the launchpad (/account) ----------
   The signed-in header (.aw-header--signed-in), with Contact. Magenta only
   for the current progress step. */

.aw-home { --aw-pad: 16px; --aw-grey: #5E5A5B; }

.aw-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The top: "Trade homescreen", the business name and the Your account box,
   on white, with a hairline under it that runs full width. Phone: stacked.
   Desktop: the name on the left, the box on the right (460px), their bottoms
   aligned. */
.aw-home__top { border-bottom: 1px solid var(--border-hairline); }
.aw-id {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: 28px var(--aw-pad) 24px;
}
.aw-id__who { min-width: 0; }
.aw-id__label {
  margin-bottom: 8px;
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.aw-id__name {
  font: var(--weight-bold) 32px/1.15 var(--font-core);
  letter-spacing: var(--tracking-headline);
  overflow-wrap: anywhere;
}

/* Your account: one link, white with an ink border, the chevron on the right.
   The status line is one line at 19px, "Items needing review – N" in light
   grey; the number is bold, ink at 0 and magenta above (bold at 19px is
   large text, so #FF0050 passes). */
.aw-yours {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 16px 20px;
  border: 1px solid var(--border-strong);
  background: var(--pw-white);
  color: var(--text-body);
}
.aw-yours .aw-chev { width: 24px; height: 24px; }
/* Hover, pressed and focus: the chevron row's (interaction.css .pw-row). */
.aw-yours__text { display: grid; flex: 1; gap: 4px; min-width: 0; }
.aw-yours__title { font: var(--weight-bold) 20px/1.2 var(--font-core); }
.aw-yours__status {
  overflow: hidden;
  color: var(--aw-grey);
  font: var(--weight-light) 19px/1.3 var(--font-core);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.aw-yours__count { color: var(--pw-ink); font-weight: var(--weight-bold); }
.aw-yours__count--needs { color: var(--pw-magenta); }

/* The library */

.aw-home__body { padding: 32px var(--aw-pad) 0; }

.aw-lib__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.aw-lib__head .aw-label { margin: 0; }
.aw-lib__note { color: var(--aw-grey); font: var(--weight-light) 13px/1.3 var(--font-core); text-align: right; }

/* Shared 1px hairlines: the gap shows the grid's background. */
.aw-lib__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border-hairline);
  background: var(--border-hairline);
}
.aw-lib__grid li { display: flex; }
/* Icon in a fixed square on the left, top-aligned; the title and line beside
   it. Whatever goes in .aw-lib__icon (Lucide, or a branded .svg/.png) is held
   to the square, so the text never moves. */
.aw-lib__tile {
  --aw-lib-icon: 40px;
  display: grid;
  flex: 1;
  grid-template-columns: var(--aw-lib-icon) minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-height: 140px;
  padding: 16px 10px 16px 12px;
  border-bottom: 0;
  background: var(--pw-white);
  color: var(--text-body);
}
.aw-lib__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--aw-lib-icon);
  height: var(--aw-lib-icon);
  overflow: hidden;
}
.aw-lib__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.aw-lib__text { display: grid; gap: 4px; min-width: 0; padding-top: 1px; }
.aw-lib__tile strong { font: var(--weight-bold) 17px/1.25 var(--font-core); overflow-wrap: break-word; }
.aw-lib__text span { color: var(--aw-grey); font: var(--weight-light) 13px/1.4 var(--font-core); }
/* The heading's right chevron, inline after its last word (tileHeading in
   server/pages.mjs): the last word and the chevron never part, and the
   chevron takes no column of its own. Not the description's grey type. */
.aw-lib__text .aw-lib__end { color: inherit; font: inherit; white-space: nowrap; }
.aw-lib__chev { display: inline-block; margin-left: 2px; vertical-align: -2px; }
/* Hover, pressed and focus: the chevron row's (interaction.css .pw-row). */


@media (min-width: 901px) {
  .aw-home { --aw-pad: 48px; }
  .aw-id {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    align-items: end;
    gap: 32px;
    max-width: calc(1120px + 2 * var(--aw-pad));
    margin: 0 auto;
    padding-block: 56px;
  }
  .aw-id__label { margin-bottom: 12px; }
  .aw-id__name { font-size: clamp(32px, 4.5vw, 56px); line-height: 1.05; }
  .aw-yours { padding: 20px 24px; }
  .aw-yours__title { font-size: 22px; }

  .aw-home__body { max-width: calc(1120px + 2 * var(--aw-pad)); margin: 0 auto; padding-top: 56px; }
  .aw-lib__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Your details, Add to home screen ---------- *//* ---------- Your details, Add to home screen ---------- */

.aw-page__body { padding: 28px var(--aw-pad) 64px; }

.aw-page__lead { font: var(--weight-regular) 17px/1.5 var(--font-core); }

.aw-details {
  margin: 0;
  border-top: 1px solid var(--border-hairline);
}

.aw-details__row {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-hairline);
}

.aw-details dt {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.aw-details dd {
  margin: 6px 0 0;
  font: var(--weight-regular) 17px/1.5 var(--font-core);
  overflow-wrap: anywhere;
}

.aw-page__note {
  margin-top: 24px;
  font: var(--weight-regular) 16px/1.55 var(--font-core);
}

.aw-page__note a { white-space: nowrap; }

/* Back to your account: a link (the markup adds .pw-link) with a 44px target */
.aw-back {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h-md);
  margin-top: 16px;
  font: var(--weight-regular) 16px/1.3 var(--font-core);
}

/* Your factory: the materials-list link (.pw-link), a 44px target in its row */
.aw-details__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--control-h-md);
}

.aw-details--spaced { margin-top: 24px; }

/* Account details: a short note under a value the customer can't change */
.aw-details__note {
  margin-top: 4px;
  color: var(--text-muted);
  font: var(--weight-regular) 14px/1.45 var(--font-core);
}

.aw-details__note a { white-space: nowrap; }

/* Account details: the form under the details, and "Your details are saved."
   Save changes takes the shared focus ring (interaction.css). */
.aw-edit { margin-top: 32px; }
.aw-edit .aw-input:focus { box-shadow: var(--shadow-focus); }
.aw-edit .pw-act { margin-top: 8px; }

.aw-saved {
  margin: 0 0 24px;
  padding: 12px 16px;
  border-left: 3px solid var(--pw-ink);
  background: var(--ink-050);
  font: var(--weight-medium) 15px/1.45 var(--font-core);
}

/* Account details: a new email waiting for its two links, under the field */
.aw-email-wait {
  padding: 10px 14px;
  border-left: 3px solid var(--pw-ink);
  background: var(--ink-050);
  font: var(--weight-regular) 14px/1.45 var(--font-core);
  overflow-wrap: anywhere;
}

.aw-requote { margin-top: 28px; }

.aw-howto { margin-top: 32px; }

.aw-howto__steps {
  margin: 12px 0 0;
  padding-left: 22px;
  font: var(--weight-regular) 17px/1.5 var(--font-core);
}

.aw-howto__steps li + li { margin-top: 8px; }

/* Contact: the three buttons, stacked full width */
.aw-contact__actions { display: grid; gap: 8px; margin-top: 16px; }

/* Contact: tighter spacing, so the page fits one phone screen */
.aw-contact { --aw-pad: 16px; }
.aw-contact .aw-home__head { padding-top: 20px; }
.aw-contact .aw-page__body { padding-top: 16px; padding-bottom: 24px; }
.aw-contact .aw-job { padding-top: 18px; padding-bottom: 18px; }
.aw-contact .aw-howto { margin-top: 26px; }
.aw-contact .aw-label { margin-bottom: 6px; }
.aw-contact .aw-howto__steps { margin-top: 0; line-height: 1.4; }
.aw-contact .aw-howto__steps li + li { margin-top: 2px; }

/* Contact: "Add this page to your home screen" opens the steps in place;
   it looks like the link it replaced (no disclosure triangle). */
.aw-contact .aw-contact__add summary { list-style: none; color: var(--pw-ink); text-decoration: underline; text-decoration-thickness: var(--link-thickness); text-underline-offset: var(--link-offset); cursor: pointer; }
@media (hover: hover) {
  .aw-contact .aw-contact__add summary:hover { text-decoration-thickness: var(--link-thickness-hover); }
}
.aw-contact .aw-contact__add summary::-webkit-details-marker { display: none; }

/* Contact: "I've added it", under the steps. [hidden] beats the button's own
   display: flex, so it stays hidden until the page's script shows it. */
.aw-contact .aw-contact__added { margin-top: 16px; }
.aw-contact .aw-contact__added[hidden] { display: none; }

@media (min-width: 901px) {
  .aw-page { max-width: 880px; padding: 0 var(--aw-pad) 96px; }
  .aw-page__body { padding: 40px 0 0; }
  .aw-details__row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
  }
  .aw-details dd { margin: 0; }
}

/* Your details, Contact, the requote pages and the order
   quote page: in the signed-in column, under the logo. The text keeps its
   720px line length, from the column's left edge. */
.aw-page--column { --aw-pad: var(--aw-col-pad); }
@media (min-width: 901px) {
  .aw-page--column { max-width: calc(var(--aw-col) + 2 * var(--aw-pad)); margin: 0 auto; }
  .aw-page--column > * { max-width: 720px; }
}

/* ---------- Accept and pay (panel over /account?pay=<ref>) ----------
   Phone: a sheet that slides up from the bottom. Desktop: a centred box.
   The whole page behind, header included, is dimmed and blurred. */

html:has(.aw-pay[open]) { overflow: hidden; }

.aw-pay {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-body);
  letter-spacing: -0.01em;
}

.aw-pay__dim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(34, 31, 32, 0.5);
  backdrop-filter: var(--blur-overlay);
  -webkit-backdrop-filter: var(--blur-overlay);
}

.aw-pay__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: calc(100% - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px var(--aw-pad) calc(24px + env(safe-area-inset-bottom));
  background: var(--pw-white);
  box-shadow: var(--shadow-overlay);
}

.aw-pay:focus,
.aw-pay__panel:focus { outline: none; }

.aw-pay__handle {
  display: block;
  width: 40px;
  height: 3px;
  margin: 0 auto 22px;
  background: var(--ink-200);
}

.aw-pay__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.aw-pay__head .aw-eyebrow { margin-bottom: 6px; }

.aw-pay__title {
  font: var(--weight-bold) 30px/1.1 var(--font-core);
  letter-spacing: var(--tracking-display);
}

.aw-pay__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: 2px -10px 0 0;
  border: 0;
  color: var(--text-body);
}

.aw-pay__close:hover { color: var(--pw-magenta); }

.aw-pay__sum {
  margin: 20px 0 0;
  border-top: 1px solid var(--border-hairline);
}

.aw-pay__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-hairline);
  font: var(--weight-regular) 16px/1.3 var(--font-core);
}

.aw-pay__row dt { color: var(--ink-700); }
.aw-pay__row dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }

.aw-pay__row--total {
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--pw-ink);
}

.aw-pay__row--total dt { color: var(--text-body); font-weight: var(--weight-bold); }

.aw-pay__row--total dd {
  font: var(--weight-bold) 28px/1.1 var(--font-core);
  letter-spacing: var(--tracking-display);
}

.aw-pay__text {
  margin-top: 20px;
  color: var(--ink-700);
  font: var(--weight-regular) 15px/1.45 var(--font-core);
}

.aw-pay__text p + p { margin-top: 6px; }

.aw-pay__form { margin-top: 20px; }


.aw-pay__check { padding: 12px 12px 16px; }

.aw-pay__btn { margin-top: 18px; }

.aw-pay__hint {
  margin-top: 10px;
  color: var(--text-muted);
  font: var(--weight-regular) 13px/1.45 var(--font-core);
}

.aw-pay__hint[hidden] { display: none; }

@media (min-width: 901px) {
  .aw-pay__panel {
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    width: min(640px, calc(100vw - 48px));
    max-height: calc(100% - 48px);
    padding: 40px 40px 44px;
    transform: translate(-50%, -50%);
  }
  .aw-pay__handle { display: none; }
  .aw-pay__title { font-size: 36px; }
  .aw-pay__close { margin-top: -4px; }
  .aw-pay__sum { margin-top: 28px; }
  .aw-pay__row { padding: 12px 0; font-size: 17px; }
  .aw-pay__row--total { padding: 16px 0 14px; }
  .aw-pay__row--total dd { font-size: 36px; }
  .aw-pay__text { margin-top: 24px; font-size: 17px; line-height: 1.6; }
  .aw-pay__text p + p { margin-top: 8px; }
  .aw-pay__form { margin-top: 24px; }
  .aw-pay__check { padding: 16px 18px 36px; }
  .aw-pay__btn { margin-top: 28px; }
  .aw-pay__hint { margin-top: 16px; font-size: 15px; }
}

@media (prefers-reduced-motion: no-preference) {
  .aw-pay .aw-pay__dim { animation: aw-fade 200ms linear; }
  .aw-pay .aw-pay__panel { animation: aw-sheet 240ms var(--ease-out); }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
  .aw-pay .aw-pay__panel { animation: aw-pop 200ms var(--ease-out); }
}

@keyframes aw-sheet { from { transform: translateY(100%); } }
@keyframes aw-pop { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); } }

/* ---------- Terms and conditions page ---------- */

.tc-draft {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin: 0;
  padding: 12px var(--aw-pad);
  background: var(--pw-ink);
  color: var(--pw-white);
  font: var(--weight-regular) 15px/1.4 var(--font-core);
}

.tc-draft strong {
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.tc-draft span { color: rgba(255, 255, 255, 0.72); }

.tc {
  max-width: 880px;
  padding: 32px var(--aw-pad) 96px;
}

.tc-section { margin-top: 36px; }

.tc-heading {
  margin-bottom: 12px;
  font: var(--type-subhead);
}

.tc-clause {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 6px;
  padding: 6px 0;
  font: var(--weight-regular) 16px/1.55 var(--font-core);
}

.tc-clause--sub { padding-left: 42px; grid-template-columns: 30px minmax(0, 1fr); }

.tc-num { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.tc-heading .tc-num { color: inherit; }

.tc-para {
  margin-top: 12px;
  font: var(--weight-regular) 16px/1.6 var(--font-core);
}

.tc-list {
  margin: 12px 0 0;
  padding-left: 22px;
  font: var(--weight-regular) 16px/1.6 var(--font-core);
}

.tc-list li + li { margin-top: 6px; }

/* Tables scroll sideways on narrow phones rather than squashing. */
.tc-tablewrap { margin-top: 16px; overflow-x: auto; }

.tc-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--weight-regular) 15px/1.5 var(--font-core);
}

.tc-table th {
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--border-strong);
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
}

.tc-table td {
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--border-hairline);
  text-align: left;
  vertical-align: top;
}

.tc-table td:first-child { min-width: 120px; }

.tc-foot {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--border-hairline);
  color: var(--text-muted);
  font: var(--weight-regular) 14px/1.5 var(--font-core);
}

@media (min-width: 901px) {
  .tc { padding-top: 64px; }
  .tc-clause { grid-template-columns: 48px minmax(0, 1fr); gap: 8px; font-size: 17px; line-height: 1.6; }
  .tc-para,
  .tc-list { font-size: 17px; }
  .tc-table { font-size: 16px; }
  .tc-clause--sub { padding-left: 56px; grid-template-columns: 36px minmax(0, 1fr); }
}

/* ---------- Design pack and quote (/account/order) ---------- */

.aw-quote .aw-page__body { max-width: 720px; }
.aw-quote__section + .aw-quote__section,
.aw-quote__section + .aw-quote__form,
.aw-quote__section + .aw-quote__state { margin-top: 36px; }

.aw-docs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-hairline); }
.aw-docs li {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-hairline);
  font: var(--weight-regular) 16px/1.45 var(--font-core);
}
.aw-docs li span { color: var(--text-muted); }
.aw-quote__pack { margin-top: 16px; }

.aw-quote__expiry { margin: 0 0 16px; font: var(--weight-regular) 17px/1.5 var(--font-core); }
.aw-quote__options { display: grid; gap: 16px; }
@media (min-width: 640px) { .aw-quote__options { grid-template-columns: 1fr 1fr; } }
.aw-quote__option { padding: 16px; border: 1px solid var(--border-hairline); border-radius: var(--radius-hairline); }
.aw-quote__option-title { margin: 0 0 8px; font: var(--weight-bold) 17px/1.3 var(--font-core); }
.aw-quote__sum { margin: 0; }
.aw-quote__sum div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font: var(--weight-regular) 16px/1.45 var(--font-core); }
.aw-quote__sum dd { margin: 0; font-variant-numeric: tabular-nums; }
.aw-quote__sum-total { border-top: 1px solid var(--border-hairline); margin-top: 4px; padding-top: 8px !important; font-weight: var(--weight-bold) !important; }

/* The declaration exactly as supplied: its paragraph breaks kept, nothing reflowed. */
.aw-quote__declaration,
.aw-quote__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.aw-quote__declaration {
  margin: 0 0 24px;
  padding: 16px;
  background: var(--pw-paper);
  font: var(--weight-regular) 16px/1.55 var(--font-core);
}

.aw-quote__choice { margin: 0 0 20px; padding: 0; border: 0; display: grid; gap: 8px; }
.aw-quote__choice legend { margin-bottom: 8px; padding: 0; }
.aw-quote__price { display: block; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.aw-quote__amendment { margin-top: 4px; }
.aw-quote__amendment[hidden] { display: none; }
.aw-textarea { height: auto; min-height: 120px; padding-top: 12px; padding-bottom: 12px; resize: vertical; }
.aw-quote__terms { margin-bottom: 20px; }
.aw-quote__name { margin-bottom: 24px; }
.aw-quote__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.aw-quote__chosen { font: var(--weight-bold) 17px/1.3 var(--font-core); font-variant-numeric: tabular-nums; }
.aw-quote__state { font: var(--weight-bold) 17px/1.5 var(--font-core); }

/* Radios: the tick box's look, round, with a dot. */
.aw-check--radio .aw-check__box { border-radius: 50%; }
.aw-check--radio input:checked + .aw-check__box { background: var(--pw-white); border-color: var(--pw-magenta); box-shadow: inset 0 0 0 5px var(--pw-magenta); }

/* ---------- Site footer (SITE_FOOTER, server/pages.mjs) ----------
   The home page's footer (.pw-footer in home.css), on design-system tokens. */

.pw-footer {
  margin-top: 64px;
  padding: 20px var(--aw-pad) 36px;
  background: var(--pw-ink);
  color: var(--ink-400);
  border-top: 1px solid var(--border-on-ink);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 300;
}
.pw-footer .pw-inner { max-width: 1320px; margin: 0 auto; }
.pw-footer__links { display: flex; flex-wrap: wrap; gap: 0 28px; margin-bottom: 12px; }
.pw-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-300); border-bottom: 0; }
.pw-footer a:hover { color: var(--pw-white); }
.pw-footer__copy { white-space: nowrap; }  /* the copyright line never splits, e.g. a © alone at a line end */
.pw-footer__nowrap { white-space: nowrap; }  /* the company and VAT numbers never split, e.g. "511 / 3952 16" */
/* The signed-in footer (SIGNED_IN_FOOTER): light, as every signed-in page is.
   White with a hairline above; links and Sign out in ink (16:1), the company
   line in ink-700 (8:1). Sign out is a quiet text button, as the links
   beside it. The magenta focus ring on every control. Its text sits in the
   signed-in column, under the header's logo (the same sides as
   .aw-header--signed-in); the white and the hairline still run full width.
   Its type is set here, not inherited: the library pages' body resets
   letter-spacing (.lib in library.css), which made their company line longer
   than the account pages'. 13px with the account pages' -0.01em at their
   16px body (-0.16px), on every signed-in page. */
.pw-footer--light {
  padding-inline: max(var(--aw-col-pad), calc((100% - var(--aw-col)) / 2));
  font-size: 13px;
  letter-spacing: -0.16px;
  background: var(--pw-white);
  color: var(--ink-700);
  border-top-color: var(--border-hairline);
}
.pw-footer--light .pw-inner { max-width: none; }
.pw-footer--light a { color: var(--text-body); }
.pw-footer--light a:hover { color: var(--text-body); text-decoration: underline; text-underline-offset: 3px; }
.pw-footer--light :is(a, button):focus-visible { outline: 2px solid var(--pw-magenta); outline-offset: 2px; }
.pw-footer__signout { display: inline-flex; margin: 0; }
.pw-footer__signout button {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-body);
  font: inherit;
  cursor: pointer;
}
.pw-footer__signout button:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Your account (/account/orders) ----------
   Magenta only for the open tab's rule and the current progress step.
   760px wide, from the signed-in column's left edge (under the logo), not
   centred: the left margin takes off the page's own side padding (--aw-pad),
   so the content starts at --aw-col-pad, or at the column's edge when the
   screen is wider than the column. */

.aw-op { --aw-pad: 16px; --aw-op-grey: #5E5A5B; max-width: 760px; margin: 0 auto 0 max(calc(var(--aw-col-pad) - var(--aw-pad)), calc((100% - var(--aw-col)) / 2)); padding-bottom: 48px; }

/* "Your account", then the business name. No back arrow: the header has
   Home. */
.aw-op__head { padding: 28px var(--aw-pad) 20px; }
.aw-op__label { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.aw-op__title { margin-top: 8px; font: var(--weight-bold) 32px/1.15 var(--font-core); letter-spacing: var(--tracking-headline); overflow-wrap: anywhere; }
/* The business name, on the account home and Your account: two lines at
   most, then an ellipsis. The full name is on Account details. */
.aw-id__name, .aw-op__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* Your account's fixed links (Your factory, then Account details): they
   never move with the page. Phones (900px and narrower, the site's
   switch): a bar pinned to the bottom of the screen, equal outlined
   buttons filling it, padded for the home indicator; the page leaves room
   for it, so the last card and the footer scroll clear. Above the page and
   the header (30); below the catalogue panel (50) and Accept and pay (100).
   From 901px: no bar; text buttons in the header, before Home. */
.aw-headnav { display: flex; align-items: center; gap: 8px; }
.aw-headtext { display: none; }
.aw-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 8px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-hairline);
  background: var(--pw-white);
  box-shadow: 0 -1px 2px rgba(34, 31, 32, 0.08);
}
.aw-bar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 52px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  background: var(--pw-white);
  color: var(--text-body);
  font: var(--weight-medium) 16px/1.2 var(--font-core);
  text-align: center;
  transition: var(--transition-control);
}
.aw-bar__link:hover { background: var(--pw-ink); color: var(--pw-white); }
.aw-bar__link:focus-visible,
.aw-headtext:focus-visible { outline: 2px solid var(--pw-magenta); outline-offset: 2px; }
body:has(.aw-bar) { padding-bottom: calc(81px + env(safe-area-inset-bottom)); }

@media (min-width: 901px) {
  .aw-bar { display: none; }
  body:has(.aw-bar) { padding-bottom: 0; }
  .aw-headtext {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 16px;
    border-bottom: 0;
    color: var(--text-body);
    font: var(--weight-medium) 16px/1.2 var(--font-core);
    white-space: nowrap;
  }
  .aw-headtext:hover { text-decoration: underline; text-underline-offset: 3px; }
}

.aw-op__tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--border-hairline); scrollbar-width: none; }
.aw-op__tabs::-webkit-scrollbar { display: none; }
.aw-op__tab {
  display: inline-flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-bottom: -1px;
  padding: 0 12px;
  border-bottom: 2px solid transparent;
  color: var(--text-body);
  font: var(--weight-regular) 15px/1.2 var(--font-core);
  white-space: nowrap;
}
.aw-op__tab[aria-selected="true"] { border-bottom-color: var(--pw-magenta); font-weight: var(--weight-bold); }
.aw-op__tab:focus-visible,
.aw-op__panel:focus-visible { outline: 2px solid var(--pw-ink); outline-offset: -2px; }

.aw-op__panel { padding: 24px var(--aw-pad) 0; }
.aw-op__panel[hidden] { display: none; }

.aw-op__cards { display: grid; gap: 16px; }
.aw-op__card { padding: 20px; border: 1px solid var(--border-hairline); background: var(--surface-card); }
.aw-op__card--first { border-color: var(--border-strong); }

.aw-op__meta { color: var(--aw-op-grey); font: var(--weight-medium) 14px/1.4 var(--font-core); }
.aw-op__card-title { margin-top: 6px; font: var(--weight-bold) 22px/1.2 var(--font-core); letter-spacing: var(--tracking-headline); }
.aw-op__body { margin-top: 10px; font: var(--weight-light) 16px/1.55 var(--font-core); }

/* A card's buttons: Main and Secondary (interaction.css). */
.aw-op__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 20px; }

.aw-op__ref { font: var(--weight-bold) 17px/1.35 var(--font-core); }

.aw-op__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 16px 0 0; padding: 0; list-style: none; }
.aw-op__steps li { display: flex; flex-direction: column; gap: 8px; color: var(--aw-op-grey); font: var(--weight-regular) 12px/1.3 var(--font-core); }
.aw-op__steps li::before { content: ""; height: 4px; background: var(--border-hairline); }
.aw-op__steps .is-done::before { background: var(--pw-ink); }
.aw-op__steps .is-current { color: var(--text-body); font-weight: var(--weight-bold); }
.aw-op__steps .is-current::before { background: var(--pw-magenta); }

.aw-op__status { margin-top: 14px; font: var(--weight-light) 16px/1.5 var(--font-core); }
.aw-op__more { margin-top: 4px; }
/* Their links are the shared link (above); here only the 44px target. */
.aw-op__more a,
.aw-op__empty a { display: inline-flex; align-items: center; min-height: 44px; }

.aw-op__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-hairline); }
.aw-op__list li { border-bottom: 1px solid var(--border-hairline); }
.aw-op__row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 0; color: var(--text-body); }
.aw-op__row-text { display: grid; gap: 2px; }
.aw-op__row-text strong { font: var(--weight-bold) 16px/1.35 var(--font-core); }
.aw-op__row-text span { color: var(--aw-op-grey); font: var(--weight-light) 14px/1.4 var(--font-core); }
.aw-op__row .aw-chev { flex: none; margin-left: auto; }
/* A row that opens (an a, with its chevron) takes the chevron row's hover,
   pressed and focus (interaction.css .pw-row); a row with nowhere to go is a
   div and takes none. */
/* A row with Download invoice under it: the invoice link sits close beneath. */
.aw-op__row:has(+ .aw-op__more) { min-height: 52px; padding-bottom: 0; }
.aw-op__list .aw-op__more { margin: 0 0 6px; }

/* Download invoice: a text link of its own, on the Orders page and the order's
   page. */
.aw-invoice { display: inline-flex; align-items: center; min-height: 44px; }  /* the look: .pw-link */
.aw-quote__invoice { margin: 0 0 8px; }

.aw-op__empty { font: var(--weight-light) 16px/1.55 var(--font-core); }

/* Completed's Cancelled list, under the completed orders if there are any. */
.aw-op__list + .aw-op__sub { margin-top: 32px; }

/* "ZZ-01001 v1 cancelled.", at the top of the page straight after cancelling. */
.aw-op__notice { margin: 24px var(--aw-pad) 0; }

/* Cancel order: "Confirm cancellation of …?" in a box over the Orders page,
   centred, the page behind dimmed (no shadow: the Orders page has one, the
   phone bar's). The dialog fills the screen so a tap outside the box lands
   on it (cancel.js closes it). The safe choice is the Main button: "No, keep
   order" ink (and focused first), "Yes, cancel order" Secondary, outlined.
   The confirm page without script uses the same form. */
html:has(.aw-confirm[open]) { overflow: hidden; }

.aw-confirm {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 16px;
  border: 0;
  background: transparent;
  color: var(--text-body);
}
.aw-confirm[open] { display: grid; place-items: center; }
.aw-confirm::backdrop { background: rgba(34, 31, 32, 0.5); }

.aw-confirm__panel {
  width: min(480px, 100%);
  padding: 24px 20px;
  background: var(--pw-white);
}
.aw-confirm__title { font: var(--weight-bold) 22px/1.25 var(--font-core); letter-spacing: var(--tracking-headline); overflow-wrap: anywhere; }
.aw-confirm__note { margin-top: 10px; font: var(--weight-light) 16px/1.55 var(--font-core); }

.aw-confirm__form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.aw-confirm__form .pw-act { flex: 1 1 auto; }
.aw-page .aw-confirm__form { max-width: 480px; }

@media (min-width: 901px) {
  .aw-confirm__panel { padding: 32px; }
  .aw-confirm__title { font-size: 26px; }
}

@media (prefers-reduced-motion: no-preference) {
  .aw-confirm[open] .aw-confirm__panel { animation: aw-drop 160ms cubic-bezier(0.2, 0, 0.2, 1); }
  .aw-confirm[open]::backdrop { animation: aw-fade 160ms linear; }
}

@media (min-width: 901px) {
  .aw-op { --aw-pad: 0px; padding-top: 16px; }
  .aw-op__head { padding: 40px 0 28px; }
  .aw-op__title { margin-top: 12px; font-size: clamp(32px, 4.5vw, 56px); line-height: 1.05; }
  .aw-op__tab { flex: 0 0 auto; padding: 0 20px; }
}