/* Log-in pages: sign in, set up two-step sign-in, choose a password, and
   the list of businesses. Built entirely from the brand tokens
   (brand/tokens.css), so every page wears whichever of the five themes the
   person last chose -- in the product or here. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
[hidden] { display: none !important; }

body {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--page-background, var(--color-page));
  background-attachment: fixed;
  color: var(--color-text-primary);
  font: 15px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-link); text-underline-offset: 3px; }
a:hover { color: var(--color-nav-active); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------- brand */
.brandline { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brandline img { display: block; width: 44px; height: auto; filter: drop-shadow(0 1px 2px rgba(11, 31, 45, .18)); }
.wordmark {
  display: block; width: 150px; aspect-ratio: 1056 / 204;
  background: var(--color-brand-primary);
  -webkit-mask: url("/brand/img/wordmark.png") center / contain no-repeat;
          mask: url("/brand/img/wordmark.png") center / contain no-repeat;
}

/* ------------------------------------------------------ the single card */
.shell {
  flex: 1 0 auto;
  display: grid; place-items: center;
  padding: 48px 16px 32px;
}
.card {
  width: min(440px, 100%);
  padding: 32px 32px 28px;
  background: var(--color-dialog-bg, var(--color-surface-raised));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-raised);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
}
.card.wide { width: min(560px, 100%); }
.card .brandline { margin-bottom: 26px; }
.eyebrow {
  margin: 0 0 6px;
  font-size: 11.5px; font-weight: 650; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-text-muted);
}
h1 {
  margin: 0 0 8px;
  font: 700 26px/1.18 var(--font-display); letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.lede { margin: 0 0 22px; color: var(--color-text-secondary); }
.small { font-size: 13px; color: var(--color-text-muted); }

/* ---------------------------------------------------------------- forms */
form { margin: 0; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 600; }
.field .hint { font-size: 12.5px; color: var(--color-text-muted); }
.input {
  width: 100%; min-height: 46px; padding: 11px 13px;
  font: 15px/1.4 var(--font-body);
  color: var(--color-field-text, var(--color-text-primary));
  background: var(--color-field-bg, #fff);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
}
.input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.input.code { font: 600 22px/1 var(--font-body); letter-spacing: .32em; text-align: center; font-variant-numeric: tabular-nums; }
.pw { position: relative; }
.pw .input { padding-right: 70px; }
.pw .reveal {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent;
  font: 600 12.5px var(--font-body); color: var(--color-text-secondary); cursor: pointer;
}
.pw .reveal:hover { color: var(--color-text-primary); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; width: 100%;
  border-radius: var(--radius-control); border: 1px solid transparent;
  font: 600 15px/1 var(--font-body); text-decoration: none; cursor: pointer;
  background: var(--color-button-primary-bg); color: var(--color-button-primary-text);
  border-color: var(--color-button-primary-border, transparent);
  box-shadow: var(--highlight-top);
  transition: background-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.btn:hover { background: var(--color-button-primary-hover); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn.secondary {
  background: var(--color-button-secondary-bg); color: var(--color-button-secondary-text);
  border-color: var(--color-button-secondary-border);
}
.btn.auto { width: auto; }
.linkbtn {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--color-link); text-decoration: underline; text-underline-offset: 3px;
}
.linkbtn:hover { color: var(--color-nav-active); }
.actions { display: grid; gap: 12px; margin-top: 6px; }

.msg { margin: 0 0 16px; padding: 11px 13px; border-radius: var(--radius-control); font-size: 14px; }
.msg.error { background: color-mix(in srgb, var(--color-error) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-error) 45%, transparent); color: var(--color-text-primary); }
.msg.ok { background: color-mix(in srgb, var(--color-success) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-success) 45%, transparent); color: var(--color-text-primary); }

/* ------------------------------------------------ two-step sign-in set-up */
.steps { display: flex; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.steps li { flex: 1; height: 4px; border-radius: 4px; background: var(--color-border); }
.steps li.on { background: var(--color-brand-primary); }
.qr {
  display: grid; place-items: center; margin: 4px auto 14px;
  width: 196px; height: 196px; padding: 8px; border-radius: 12px; background: #fff;
  border: 1px solid var(--color-border);
}
.qr svg { display: block; width: 100%; height: 100%; }
.secret {
  display: block; margin: 0 0 18px; padding: 10px 12px; border-radius: var(--radius-control);
  background: var(--color-field-bg, #fff); border: 1px dashed var(--color-border-strong);
  font: 600 14px/1.5 ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; letter-spacing: .06em;
  color: var(--color-field-text, var(--color-text-primary)); text-align: center; user-select: all;
  /* Wrap between the groups of four, never inside one: a group split
     across two lines is easy to mistype. */
  word-break: normal; overflow-wrap: normal;
}
.codes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px;
  margin: 0 0 16px; padding: 14px 16px; border-radius: var(--radius-control);
  background: var(--color-field-bg, #fff); border: 1px solid var(--color-border);
  font: 600 14px/1.6 ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  color: var(--color-field-text, var(--color-text-primary));
}
.check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; font-size: 14px; }
.check input { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: var(--color-brand-primary); }

/* ------------------------------------------- the free trial and the plan */
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* A field no person fills in (signup.html); kept off screen, not display:none, which some
   bots skip. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.choice legend { margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choice legend { grid-column: 1 / -1; }
.choice.two { grid-template-columns: 1fr; }
.choice label {
  display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 12px; cursor: pointer;
  font-size: 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control);
  background: var(--color-field-bg, #fff); color: var(--color-field-text, var(--color-text-primary));
}
.choice label:has(input:checked) { border-color: var(--color-brand-primary); box-shadow: 0 0 0 1px var(--color-brand-primary); }
.choice input { width: 17px; height: 17px; margin: 0; accent-color: var(--color-brand-primary); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.plancard {
  position: relative; display: grid; gap: 4px; padding: 16px 16px 14px; cursor: pointer;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-card);
  background: var(--color-field-bg, #fff); color: var(--color-field-text, var(--color-text-primary));
}
.plancard:has(input:checked) { border-color: var(--color-brand-primary); box-shadow: 0 0 0 1px var(--color-brand-primary); }
.plancard input { position: absolute; top: 14px; right: 14px; width: 17px; height: 17px; margin: 0; accent-color: var(--color-brand-primary); }
.pc-name { font-size: 12px; font-weight: 650; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.pc-price { font: 700 28px/1.1 var(--font-display); }
.pc-price small { font: 500 13px var(--font-body); color: var(--color-text-secondary); }
.pc-note { font-size: 12.5px; color: var(--color-text-secondary); }
.terms { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 18px; padding: 14px 16px;
  border-radius: var(--radius-control); border: 1px solid var(--color-border); font-size: 13.5px; }
.terms dt { font-weight: 600; color: var(--color-text-secondary); }
.terms dd { margin: 0; }
/* A registered charity's check, on the plan page (D65, 10 Oct 2026). */
.charity-line { display: block; margin: -8px 0 20px; line-height: 1.5; }
/* Back from Stripe's page with a plan set up (Dean, 10 Oct 2026, from Xero's own sign-up): what happens next, and
   the summary of what is paid for beside it - one column on a phone. */
.paid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 26px; margin: 4px 0 6px; align-items: start; }
.paid-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.paid-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; }
.ps-tick {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font: 700 16px/1 var(--font-body);
  color: var(--color-text-muted); border: 2px solid var(--color-border-strong); background: transparent;
}
.paid-steps li.done .ps-tick { color: var(--color-button-primary-text); background: var(--color-button-primary-bg); border-color: var(--color-button-primary-bg); }
.paid-steps b { display: block; margin: 5px 0 4px; font: 700 16.5px/1.3 var(--font-display); color: var(--color-text-primary); }
.paid-steps p { margin: 0 0 10px; font-size: 14px; color: var(--color-text-secondary); }
.paid-summary { padding: 18px 20px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); }
.paid-summary .ps-head { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--color-text-secondary); }
.paid-summary dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; margin: 8px 0; font-size: 14.5px; }
.paid-summary dt { overflow-wrap: anywhere; }
.paid-summary dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.paid-summary .ps-total { padding-top: 10px; border-top: 1px solid var(--color-border); font-weight: 700; font-size: 16px; }
.paid-summary .small { margin: 8px 0 0; }
@media (max-width: 760px) { .paid { grid-template-columns: minmax(0, 1fr); } }
/* Updated details from the plan page, and Dean's review page (D70, D71). */
.charity-update { margin: 0 0 22px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.charity-update h2 { margin: 0 0 10px; font: 700 17px/1.3 var(--font-display); }
.review-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 22px; font-size: 14.5px; }
.review-facts dt { font-weight: 600; color: var(--color-text-secondary); }
.review-facts dd { margin: 0; overflow-wrap: anywhere; }
.review-actions { gap: 22px; }
textarea.input { min-height: 84px; resize: vertical; }
@media (max-width: 480px) { .review-facts { grid-template-columns: 1fr; gap: 2px; } .review-facts dd { margin-bottom: 8px; } }
/* The products on these books, and those that could be added (D64, 10 Oct 2026). */
.products { margin: 22px 0 0; }
.products .sec { margin: 0 0 10px; font: 700 18px/1.3 var(--font-display); }
.products #addWrap .sec { margin-top: 20px; }
.prodlist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.prod {
  display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-card);
  background: var(--color-field-bg, #fff); color: var(--color-field-text, var(--color-text-primary));
}
.prod-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.prod-name { font-weight: 650; font-size: 15px; }
.prod-about { font-size: 13.5px; color: var(--color-text-secondary); }
.prod-price { font-size: 13.5px; font-weight: 600; }
.prod > .btn { justify-self: start; margin-top: 6px; min-height: 38px; padding: 0 16px; font-size: 14px; }
.prod-confirm { display: grid; gap: 10px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.prod-confirm .small { margin: 0; }
.prod-confirm .check { margin: 0; }
.prod-confirm > .btn { justify-self: start; min-height: 40px; }

/* --------------------------------------------------- the list of businesses */
.topbar {
  position: sticky; top: 0; z-index: 5;
  background: var(--color-nav-bg); border-bottom: 1px solid var(--color-nav-border);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
}
.topbar-inner {
  max-width: 1040px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; gap: 16px;
}
.topbar .brandline img { width: 36px; }
.topbar .wordmark { width: 128px; }
.who { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--color-nav-text); min-width: 0; }
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .btn { min-height: 36px; padding: 0 14px; font-size: 13.5px; }

.list-wrap { flex: 1 0 auto; width: 100%; max-width: 1040px; margin: 0 auto; padding: 36px 16px 48px; }
.list-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.list-head h1 { margin: 0; }
.list-head .count { margin: 4px 0 0; color: var(--color-text-secondary); }
.list-head .search { margin-left: auto; width: min(320px, 100%); }
.biz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.biz {
  display: flex; flex-direction: column; gap: 6px; width: 100%; height: 100%;
  padding: 18px 18px 16px; text-align: left; cursor: pointer;
  font: inherit; color: var(--color-text-primary);
  background: var(--surface-card, var(--color-dialog-bg, var(--color-surface-raised)));
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.biz:hover { border-color: var(--color-border-strong); transform: translateY(-1px); }
.biz:disabled { cursor: progress; opacity: .7; }
.biz .name { font-weight: 650; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.biz .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--color-text-secondary); }
.tag {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; border: 1px solid var(--color-border-strong); color: var(--color-text-secondary);
}
.tag.current { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
.biz .open { margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 650; color: var(--color-link); }
/* A practice's Practice Dashboard, above its clients. */
.dash-wrap { margin: 0 0 18px; }
.dash-wrap .biz { max-width: 560px; border-color: var(--color-brand-primary); }
/* Books that hold more than one product (Dean, 10 Oct 2026): the business across the row, a card for each product. */
.biz-grid > .bizset-li { grid-column: 1 / -1; }
.bizset {
  padding: 16px 16px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--color-surface-muted, transparent);
}
.bizset-head { display: flex; flex-direction: column; gap: 6px; margin: 2px 2px 14px; }
.bizset-head .name { font-weight: 650; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.bizset-head .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--color-text-secondary); }
.bizset.solo { padding: 0; border: 0; background: none; }
.bizset.solo .bizset-head .name { display: none; }
.biz-grid.apps { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.biz.app .meta { font-size: 13.5px; line-height: 1.45; }
.empty {
  max-width: 560px; padding: 28px; border-radius: var(--radius-panel);
  background: var(--color-dialog-bg, var(--color-surface-raised)); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}
.empty h2 { margin: 0 0 8px; font: 700 21px/1.25 var(--font-display); }
.empty p { margin: 0; color: var(--color-text-secondary); }

/* ------------------------------------------------------------- the footer */
.foot {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 16px 26px; font-size: 12.5px; color: var(--color-text-muted);
}

/* ---------- moving between themes (Dean, 3 Oct 2026) ----------
   The old screen dissolves into the new one: each fades across while it
   softens through a light blur, so the colours shift rather than snap. The
   slider's thumb is lifted out and glides from its old place to its new
   one. Behind both, the new theme's page colour, so the blur never shows a
   pale edge. See themeShift(). */
::view-transition{background:var(--color-page)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.7s;animation-timing-function:cubic-bezier(.45,0,.2,1);animation-fill-mode:both}
::view-transition-old(root){animation-name:theme-out}
::view-transition-new(root){animation-name:theme-in}
::view-transition-group(theme-thumb){animation-duration:.7s;animation-timing-function:cubic-bezier(.45,0,.2,1)}
@keyframes theme-out{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(8px)}}
@keyframes theme-in{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}
.themes .thumb{view-transition-name:theme-thumb}
/* The page's own colour transitions wait while the screens dissolve, so the
   new screen is the finished theme from its first frame. */
html.theme-shifting *,html.theme-shifting *::before,html.theme-shifting *::after{transition:none!important}
html.theme-dip body{animation:theme-dip .64s cubic-bezier(.45,0,.2,1)}
@keyframes theme-dip{0%{opacity:1;filter:none}40%{opacity:.14;filter:blur(6px)}100%{opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  html.theme-dip body{animation:none}
}

/* The four themes, as the product and website offer them. */
.themes {
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 3px; border-radius: 999px; isolation: isolate;
  background: var(--color-switch-bg); border: 1px solid var(--color-border);
}
.themes .thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(25% - 1.5px); z-index: 0;
  border-radius: 999px; background: var(--color-switch-thumb);
  transition: transform .42s var(--ease);
}
.themes[data-pos="chrome-flow"] .thumb { transform: translateX(100%); }
.themes[data-pos="modern-a"] .thumb { transform: translateX(200%); }
.themes[data-pos="liquid-metal"] .thumb { transform: translateX(300%); }
.themes label { position: relative; z-index: 1; display: flex; cursor: pointer; }
.themes input { position: absolute; opacity: 0; width: 0; height: 0; }
.themes span { display: flex; padding: 5px 9px; color: var(--color-switch-icon); transition: color .42s var(--ease); }
.themes input:checked + span { color: var(--color-switch-icon-on); }
.themes input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 1px; border-radius: 999px; }
.themes svg { display: block; width: 15px; height: 15px; }

@media (max-width: 520px) {
  .card { padding: 26px 20px 22px; }
  .who span { display: none; }
  .codes { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .terms { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}