@font-face {
  font-family: "DSN Archivo";
  src: url("../fonts/archivo-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --blue: #1961ca;
  --blue-strong: #7db7ff;
  --blue-hover: #0f50ad;
  --blue-soft: #142b4b;
  --blue-pale: #101d31;
  --ink: #f4f6fa;
  --graphite: #d7dce5;
  --muted: #a4acba;
  --muted-strong: #c7ccd6;
  --line: #2b313d;
  --line-strong: #414a5a;
  --canvas: #0b0d12;
  --surface: #151922;
  --surface-warm: #10131a;
  --paper: #1b202a;
  --inverse-white: #ffffff;
  --focus: #ffdd57;
  --success: #72d39d;
  --success-bg: #123326;
  --hold: #ffc768;
  --hold-bg: #3a2a0d;
  --pending: #c6a9ff;
  --pending-bg: #2d2145;
  --negative: #ff929d;
  --negative-bg: #431b22;
  --requested: #8ac2fa;
  --requested-bg: #17324f;
  --paid: #72d39d;
  --paid-bg: #123326;
  /* Brand graphite, straight from the DSN palette. Too dark to be a
     foreground on this canvas, so it is only ever a surface. */
  --brand-graphite: #2d2d2f;
  --brand-graphite-edge: #565557;
  /* Being in the top five, wherever that is said: the Best Performers band,
     the rank chips inside it, the private status card and the ordinal on Your
     position. One token so they cannot drift apart. */
  --accolade: var(--requested);
  --accolade-bg: var(--requested-bg);
  --rail: 252px;
  --radius: 16px;
  --radius-control: 10px;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The UA rule for [hidden] is display:none at the lowest specificity, so any
   component that sets its own display quietly overrides it. .panel__foot is
   flex, which is how the table note kept rendering under an empty board after
   the server had marked it hidden. Anything the server or the script hides
   must actually be gone. */
[hidden] {
  display: none !important;
}

html {
  min-width: 320px;
  background: var(--canvas);
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100dvh;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Segoe UI Variable Text", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

p,
h1,
h2,
h3,
ul {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: "DSN Archivo", "Segoe UI", sans-serif;
  text-wrap: balance;
}

.icon {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.75;
}

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

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 11px 15px;
  border-radius: var(--radius-control);
  background: var(--blue);
  color: #fff;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100dvh;
}

.rail {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--rail);
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: #080a0f;
}

.rail__brand {
  display: flex;
  min-height: 84px;
  align-items: center;
  gap: 11px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
  font-family: "DSN Archivo", sans-serif;
  font-size: 1.24rem;
  font-weight: 760;
  letter-spacing: -0.03em;
}

.rail__brand img {
  width: 128px;
  height: auto;
}

.rail__identity {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin: 20px 14px 8px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface);
}

.rail__avatar {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue-strong);
  font-family: "DSN Archivo", sans-serif;
  font-size: 0.78rem;
  font-weight: 760;
}

.rail__name,
.rail__meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail__name {
  font-size: 0.91rem;
  font-weight: 700;
}

.rail__meta {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.77rem;
}

.rail__nav {
  display: grid;
  gap: 3px;
  padding: 14px;
}

.rail__link {
  display: flex;
  min-height: 47px;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 11px;
  color: var(--muted-strong);
  font-size: 0.91rem;
  font-weight: 620;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
}

.rail__link:hover {
  background: #1b202a;
  color: var(--ink);
}

.rail__link:active {
  transform: translateY(1px);
}

.rail__link[aria-current="page"] {
  background: var(--blue-soft);
  color: var(--blue-strong);
}

.rail__link[aria-current="page"] .icon {
  stroke-width: 2.2;
}

.rail__foot {
  margin-top: auto;
  padding: 14px;
}

.rail__foot > a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.rail__foot strong,
.rail__foot small {
  display: block;
}

.rail__foot strong {
  font-size: 0.86rem;
}

.rail__foot small,
.rail__foot > p {
  color: var(--muted);
  font-size: 0.72rem;
}

.rail__foot > p {
  padding: 11px 4px 2px;
}

.rail__logout {
  width: 100%;
  justify-content: flex-start;
  padding-inline: 4px;
  color: var(--muted);
  text-align: left;
}

.rail__logout:hover,
.guide-strip__skip:hover {
  color: var(--ink);
}

.main-column {
  grid-column: 2;
  min-width: 0;
}

.topbar {
  display: none;
}

.main {
  min-width: 0;
  padding: 50px clamp(24px, 4vw, 64px) 72px;
}

.wrap {
  width: min(100%, 1190px);
  margin-inline: auto;
}

.pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
}

.pagehead__title {
  max-width: 18ch;
  font-size: clamp(2.25rem, 3.6vw, 3.6rem);
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.pagehead__lede {
  max-width: 60ch;
  margin-top: 10px;
  color: var(--muted-strong);
  font-size: 1rem;
}

/* The one commitment a screen makes, under its lede. Quieter than the lede
   and never repeated further down the page. */
.pagehead__commitment {
  max-width: 60ch;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.9rem;
}

.pagehead > .note {
  max-width: 42ch;
  padding-bottom: 3px;
  text-align: right;
}

.pagehead__identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagehead__identity strong,
.pagehead__identity small {
  display: block;
}

.pagehead__identity small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

.guide-strip form,
.rail__foot form,
.sheet__panel form {
  margin: 0;
}

.guide-strip__skip,
.rail__logout {
  min-height: 32px;
  padding: 4px 7px;
  border: 0;
  background: transparent;
  color: var(--blue-strong);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 720;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.guide-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  padding: 17px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--blue-pale);
}

.guide-strip__mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue-strong);
}

.guide-strip__mark .icon {
  width: 20px;
  height: 20px;
}

.guide-strip__body h2 {
  margin-top: 2px;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.15;
}

.guide-strip__body > p:last-child {
  max-width: 66ch;
  margin-top: 5px;
  color: var(--muted-strong);
  font-size: 0.82rem;
}

.guide-strip__position {
  color: var(--blue-strong);
  font-size: 0.69rem;
  font-weight: 760;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.guide-strip__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.guide-strip__actions .btn {
  min-height: 40px;
  padding: 10px 13px;
}

.messages {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.message {
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--muted-strong);
  font-size: 0.84rem;
}

.message--success {
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success);
}

.message--info {
  border-color: var(--requested);
  background: var(--requested-bg);
  color: var(--requested);
}

.stack,
.grid {
  display: grid;
  gap: 22px;
}

.grid--7-5 {
  grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
}

.grid--halves {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.leaderboard-layout {
  align-items: start;
}

.leaderboard-side {
  display: contents;
}

.commissions-columns {
  display: flow-root;
  margin-top: 22px;
}

.commission-statement {
  float: left;
  width: calc(58.333% - 11px);
}

.withdraw-panel,
.withdrawal-history,
.fee-history {
  float: right;
  clear: right;
  width: calc(41.667% - 11px);
}

.withdrawal-history,
.fee-history {
  margin-top: 22px;
}

.dashboard-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr);
  gap: 22px;
}

.dashboard-mobile-pass {
  display: none;
}

.dashboard-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(310px, 0.75fr);
  gap: 22px;
}

.dashboard-body__main,
.dashboard-body__aside {
  align-content: start;
}

.panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel--paper {
  background: var(--paper);
}

.panel--ink {
  border-color: var(--line-strong);
  background: #07090d;
  color: #fff;
}

.panel--blue {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.panel--blue .panel__head,
.panel--blue .panel__foot {
  border-color: rgba(255, 255, 255, 0.18);
}

.panel--signature {
  border-top: 5px solid var(--blue);
}

.panel__head {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

/* A short explanation under a panel heading, aligned with its content. */
.panel__lede {
  margin: 0;
  padding: 14px 22px 0;
}

.panel--ink .panel__head {
  border-color: rgba(255, 255, 255, 0.16);
}

.panel--blue .note,
.panel--blue .muted {
  color: rgba(255, 255, 255, 0.92);
}

.panel__title {
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 720;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.panel__body,
.hero {
  padding: 22px;
}

.panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 22px;
  border-top: 1px solid var(--line);
}

.panel--ink .panel__foot {
  border-color: rgba(255, 255, 255, 0.16);
}

.label {
  color: var(--muted-strong);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.055em;
  line-height: 1.3;
  text-transform: uppercase;
}

.label--inverse {
  color: rgba(255, 255, 255, 0.92);
}

/* The fee period and the amount below it are two separate facts, and with every
 * paragraph margin reset they would otherwise sit flush against each other. */
.fee-card__period {
  margin-bottom: 14px;
}

.note,
.muted {
  color: var(--muted);
}

.note {
  font-size: 0.86rem;
  line-height: 1.5;
}

.note--inverse {
  color: rgba(255, 255, 255, 0.92);
}

/* Money the franchisee owes, stated beside a balance that stops at zero. */
.note--owed {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--negative-bg);
  color: var(--negative);
}

.num {
  font-family: "DSN Archivo", "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 710;
  letter-spacing: -0.035em;
  line-height: 1;
}

.num--md {
  font-size: clamp(1.9rem, 3vw, 2.8rem);
}

.num--sm {
  font-size: 1.08rem;
}

.num__pence {
  font-size: 0.52em;
  letter-spacing: -0.02em;
}

.btn,
.copy {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: #07090d;
  color: #fff;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 720;
  line-height: 1.1;
  white-space: nowrap;
  transition: transform 180ms var(--ease), background-color 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
}

.btn {
  padding: 12px 17px;
}

.btn:hover,
.copy:hover {
  transform: translateY(-1px);
}

.btn:active,
.copy:active {
  transform: translateY(1px);
}

.btn--primary {
  border-color: var(--blue);
  background: var(--blue);
}

.btn--primary:hover {
  border-color: var(--blue-hover);
  background: var(--blue-hover);
}

.btn--quiet,
.copy {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.btn--quiet:hover,
.copy:hover {
  border-color: var(--blue);
  color: var(--blue-strong);
}

.btn--inverse {
  border-color: #fff;
  background: #fff;
  color: #0b0d12;
}

.pagehead__title[data-greeting] {
  max-width: 22ch;
}

.btn--block {
  width: 100%;
}

.btn-row,
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn:disabled,
.copy:disabled {
  border-color: #303744;
  background: #202630;
  color: #7f8897;
  cursor: not-allowed;
  transform: none;
}

.stamp {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.69rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 1.1;
  white-space: nowrap;
}

.stamp--qualified,
.stamp--paid {
  background: var(--success-bg);
  color: var(--success);
}

.stamp--held {
  background: var(--hold-bg);
  color: var(--hold);
}

.stamp--pending {
  background: var(--pending-bg);
  color: var(--pending);
}

.stamp--requested {
  background: var(--requested-bg);
  color: var(--requested);
}

.stamp--reversed {
  background: var(--negative-bg);
  color: var(--negative);
}

.stamp--set_off,
.stamp--solid,
.stamp--live {
  background: var(--blue-soft);
  color: var(--blue-strong);
}

.stamp--inverse {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.stamp__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.money-card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(255px, 0.75fr);
  grid-template-rows: auto auto;
}

.money-card__primary {
  grid-row: 1 / 3;
  padding: clamp(24px, 4vw, 42px);
  background: var(--surface);
}

.money-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.money-card__heading h2 {
  font-size: 1.04rem;
  font-weight: 690;
  letter-spacing: -0.01em;
}

.hero__figure {
  margin-top: 24px;
  font-family: "DSN Archivo", sans-serif;
  font-size: clamp(4.1rem, 8vw, 7.2rem);
  font-variant-numeric: tabular-nums;
  font-weight: 735;
  letter-spacing: -0.045em;
  line-height: 0.84;
}

.money-card__helper {
  max-width: 46ch;
  margin-top: 24px;
  color: var(--muted-strong);
}

.money-card__actions {
  margin-top: 24px;
}

.states {
  display: grid;
}

.money-card__states {
  border-left: 1px solid var(--line);
}

.state {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 88px;
  padding: 16px 19px;
  border-bottom: 1px solid var(--line);
  transition: background-color 180ms var(--ease);
}

a.state:hover {
  background: var(--blue-pale);
}

.state__body,
.state__label,
.state__detail {
  display: block;
  min-width: 0;
}

.state__body {
  flex: 1 1 auto;
}

.state__label {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
}

.state__detail {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.4;
}

.state__end {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.state__chevron {
  width: 16px;
  height: 16px;
  color: #7f8897;
}

.disclose {
  grid-column: 2;
  align-self: end;
}

.disclose__summary {
  display: flex;
  min-height: 56px;
  align-items: center;
  gap: 10px;
  padding: 15px 19px;
  color: var(--blue-strong);
  cursor: pointer;
  font-size: 0.83rem;
  font-weight: 720;
  list-style: none;
}

.disclose__summary::-webkit-details-marker {
  display: none;
}

.disclose__sign {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid #a8bddb;
  border-radius: 50%;
}

.disclose__sign::before,
.disclose__sign::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 1px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
}

.disclose__sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.disclose[open] .disclose__sign::after {
  transform: translate(-50%, -50%) rotate(0);
}

.statement {
  border-top: 1px solid var(--line);
  background: var(--surface-warm);
}

.statement__row,
.statement__aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}

.statement__label {
  font-size: 0.78rem;
}

.statement__amount {
  text-align: right;
}

.statement__amount--negative {
  color: var(--negative);
}

.statement__row--total {
  background: var(--surface);
  font-weight: 700;
}

.statement__aside {
  display: block;
  border: 0;
}

/* The lead aside opens the breakdown, so it keeps a rule beneath it. */
.statement__aside--lead {
  border-bottom: 1px solid var(--line);
}

.share-pass {
  position: relative;
  display: grid;
  min-height: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 22px;
  padding: clamp(24px, 3vw, 34px);
  overflow: hidden;
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 14px 36px rgba(25, 97, 202, 0.2);
}

.share-pass::before {
  position: absolute;
  right: -36px;
  bottom: -48px;
  width: 190px;
  height: 190px;
  border: 34px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  content: "";
}

.share-pass__copy,
.share-pass__qr {
  position: relative;
  z-index: 1;
}

.share-pass .panel__title {
  max-width: 13ch;
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  line-height: 1;
}

.share-pass .hero__helper {
  max-width: 34ch;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.9rem;
}

.share-pass .hero__actions {
  align-items: center;
  margin-top: 22px;
}

/* The share panel is dark, so its empty states cannot use the page muted tone. */
.share-pass .empty {
  padding: 0;
  color: rgba(255, 255, 255, 0.82);
}

.share-pass__qr .empty {
  padding: 24px 0;
  font-size: 0.78rem;
}

.share-pass__text-link {
  padding: 10px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.65);
  font-size: 0.8rem;
  font-weight: 700;
}

.share-pass__qr {
  align-self: center;
  text-align: center;
}

.share-pass__qr-frame {
  padding: 10px;
  border-radius: 12px;
  background: #fff;
}

.share-pass__qr span {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.67rem;
  font-weight: 700;
}

.hero__helper {
  max-width: 58ch;
  margin-top: 12px;
}

.hero__actions {
  margin-top: 18px;
}

.records {
  min-width: 0;
}

.records__head,
.record {
  display: grid;
  grid-template-columns: var(--cols, minmax(0, 1fr) auto);
  gap: 18px;
}

.records__head {
  padding: 10px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-warm);
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 720;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.record {
  position: relative;
  align-items: center;
  padding: 17px 22px;
  border-bottom: 1px solid var(--line);
}

.record:last-child {
  border-bottom: 0;
}

.record__cell {
  min-width: 0;
}

.record__name,
.record__ref,
.record__label,
.record__value {
  display: block;
}

.record__name {
  font-size: 0.91rem;
  font-weight: 700;
}

.record__ref {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.75rem;
}

/* Clipped rather than removed at desktop width. The visible column header
   above is aria-hidden - it labels the columns for the eye, not for the
   accessibility tree - so without this each value was announced with no
   indication of which column it came from. Below the breakpoint the header
   goes and these become the visible labels. */
.record__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 680;
}

.record__value {
  font-size: 0.85rem;
}

.record__cell--num,
.record__cell--num .record__value {
  text-align: right;
}

.record__note {
  grid-column: 1 / -1;
  margin-top: -7px;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--surface-warm);
  color: var(--muted);
  font-size: 0.75rem;
}

/* A request that can no longer be paid is news, not a footnote. */
.record__note--alert {
  background: var(--negative-bg);
  color: var(--negative);
}

.record__note--alert strong {
  font-weight: 700;
}

.tally {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
}

.tally--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tally--performance {
  grid-template-columns: 1.25fr 1.25fr 0.75fr 0.75fr;
}

.tally__item {
  padding: 22px;
  border-right: 1px solid var(--line);
}

.tally__item:last-child {
  border-right: 0;
}

.tally__figure {
  margin-top: 12px;
}

.tally__note {
  margin-top: 8px;
  font-size: 0.8rem;
}

.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}

.tabs__tab {
  flex: 0 0 auto;
  padding: 9px 13px;
  border-radius: 999px;
  background: #242a35;
  color: var(--muted-strong);
  font-size: 0.78rem;
  font-weight: 680;
}

.tabs__tab[aria-current="true"] {
  background: var(--blue);
  color: #fff;
}

.kv {
  display: grid;
}

.kv__row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 18px;
  min-height: 56px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
}

.kv__row:last-child {
  border-bottom: 0;
}

.kv__key {
  color: var(--muted);
  font-size: 0.8rem;
}

.kv__value {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.86rem;
  font-weight: 620;
  text-align: right;
}

.meter {
  display: block;
  width: 100%;
  height: 8px;
  margin: 18px 0;
  overflow: hidden;
  border-radius: 999px;
  background: #303744;
}

.meter__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--success);
}

.meter__fill--short {
  background: var(--hold);
}

.milestones {
  display: grid;
  padding: 5px 22px 18px;
}

.milestone {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 12px 0;
}

.milestone__mark {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
  font-family: "DSN Archivo", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
}

.milestone--done .milestone__mark {
  border-color: var(--success);
  background: var(--success);
  color: #fff;
}

.milestone--next .milestone__mark {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue-strong);
}

.milestone__title {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
}

.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 22px;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding-right: 17px;
}

.step:not(:last-child)::after {
  position: absolute;
  top: 10px;
  left: 11px;
  width: 100%;
  height: 1px;
  background: var(--line-strong);
  content: "";
}

.step__mark {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  border: 5px solid var(--blue-soft);
  border-radius: 50%;
  background: var(--blue);
}

.step__title {
  position: relative;
  z-index: 1;
  display: block;
  padding-top: 32px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
}

.step .note {
  margin-top: 5px;
  font-size: 0.72rem;
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 17px 19px;
  border: 1px solid #29496f;
  border-radius: 12px;
  background: var(--blue-pale);
}

.notice__icon {
  margin-top: 1px;
  color: var(--blue);
}

.notice__title {
  font-size: 0.88rem;
  font-weight: 720;
}

.notice .note {
  margin-top: 3px;
}

.sales-kit-state__copy {
  max-width: 68ch;
  margin-top: 8px;
}

.sales-kit-state__date {
  margin-top: 10px;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
}

.sales-kit-product__personalisation {
  margin-top: 6px;
}

.sales-kit-primary__head {
  align-items: flex-start;
}

.sales-kit-primary__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.sales-kit-product__quantity {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 760;
  white-space: nowrap;
}

.sales-kit-primary__body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  gap: 28px;
  align-items: start;
  padding: 24px 22px 26px;
}

.sales-kit-primary__answer {
  max-width: 62ch;
}

.sales-kit-primary__state-title {
  color: var(--ink);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 720;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.sales-kit-primary__purchase {
  display: grid;
  gap: 14px;
}

.sales-kit-primary__purchase > form,
.sales-kit-primary__purchase > .btn {
  width: 100%;
}

.sales-kit-primary__purchase > form .btn {
  width: 100%;
}

.sales-kit-order-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-warm);
}

.sales-kit-order-summary > div {
  display: grid;
  gap: 6px;
  padding: 18px 22px;
  border-right: 1px solid var(--line);
}

.sales-kit-order-summary > div:last-child {
  border-right: 0;
}

.sales-kit-order-summary span,
.sales-kit-order-detail span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.sales-kit-order-summary strong,
.sales-kit-order-detail strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.sales-kit-handoff {
  align-items: center;
}

.sales-kit-handoff > div {
  flex: 1;
}

.sales-kit-operations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 22px;
}

.sales-kit-operations--single {
  grid-template-columns: minmax(0, 760px);
}

.sales-kit-order-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.sales-kit-order-detail > div {
  display: grid;
  gap: 6px;
  padding: 17px 22px;
  border-right: 1px solid var(--line);
}

.sales-kit-order-detail > div:last-child {
  border-right: 0;
}

.sales-kit-current__status {
  margin: 18px 22px;
  color: var(--muted-strong);
  font-size: 0.84rem;
}

.sales-kit-current > .btn {
  margin: 0 22px 22px;
}

.sales-kit-qr__form,
.sales-kit-qr__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 22px 22px;
}

.sales-kit-qr__manual {
  width: 100%;
  color: var(--muted-strong);
  font-size: 0.78rem;
}

.sales-kit-qr__manual summary {
  width: fit-content;
  cursor: pointer;
  font-weight: 700;
}

.sales-kit-qr__manual[open] summary {
  margin-bottom: 12px;
}

.sales-kit-qr__manual .field {
  max-width: 640px;
  margin-bottom: 10px;
}

.sales-kit-qr__manual input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface-warm);
  color: var(--ink);
}

.sales-kit-history {
  background: var(--surface-warm);
  box-shadow: none;
}

.sales-kit-history .panel__head {
  min-height: 60px;
}

.qr-block {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 28px;
}

.qr {
  padding: 14px;
  border-radius: 14px;
  background: #fff;
}

.qr-block__body {
  min-width: 0;
}

.linkfield {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 7px 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
}

.linkfield__value {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copy {
  min-height: 39px;
  padding: 8px 11px;
}

.copy .icon {
  width: 17px;
  height: 17px;
}

.empty {
  padding: 24px;
  color: var(--muted);
  font-size: 0.86rem;
}

.sales-tools__sharing {
  border-top: 1px solid var(--seam-inverse);
}

.sales-tools__guide-note {
  margin-top: 18px;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(7, 9, 13, 0.25);
  color: #fff;
}

.sales-tools__guide-note .notice__title {
  margin-bottom: 12px;
}

.sales-tools__qr-label {
  margin-top: 8px;
  text-align: center;
}

.guide-qr-example {
  display: grid;
  width: 128px;
  aspect-ratio: 1;
  place-items: center;
  border: 3px dashed var(--line-strong);
  color: var(--ink);
}

.guide-qr-example .icon {
  width: 56px;
  height: 56px;
}

.sales-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  background: var(--line);
}

.sales-plan {
  min-width: 0;
  padding: 22px;
  background: var(--surface);
}

.sales-plan h3 {
  margin-bottom: 10px;
  font-size: 1.12rem;
}

.sales-plan .stamp {
  display: inline-flex;
}

.sales-plan dl {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.sales-plan dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.sales-plan dt {
  color: var(--muted);
  font-size: 0.78rem;
}

.sales-plan dd {
  font-weight: 740;
  text-align: right;
}

.live-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 24px 22px;
}

.live-empty__mark {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue-strong);
}

.live-empty__mark .icon {
  width: 21px;
  height: 21px;
}

.live-empty h3 {
  font-size: 1rem;
  line-height: 1.2;
}

.live-empty p {
  max-width: 68ch;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.live-empty--inside {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.portal-form {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.portal-form .field input,
.portal-form .field select,
.portal-form .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  outline: 0;
  background: var(--surface-warm);
  color: var(--ink);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

.withdraw-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.withdraw-form .field {
  margin: 0;
}

.sensitive-gate {
  display: grid;
  justify-items: start;
  gap: 14px;
}

.payout-form {
  padding: 22px;
}

@media (max-width: 620px) {
  .payout-form {
    padding: 17px;
  }
}

.portal-form .field textarea {
  min-height: 132px;
  resize: vertical;
}

.portal-form .field input:hover,
.portal-form .field select:hover,
.portal-form .field textarea:hover {
  border-color: var(--muted);
}

.portal-form .field input:focus-visible,
.portal-form .field select:focus-visible,
.portal-form .field textarea:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(125, 183, 255, 0.22);
}

.field__help {
  color: var(--muted);
  font-size: 0.76rem;
}

.portal-form__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rank {
  display: inline-block;
  width: 34px;
  color: var(--blue-strong);
}

.tabbar {
  display: none;
}

@media (max-width: 1120px) {
  :root {
    --rail: 224px;
  }

  .main {
    padding-inline: 30px;
  }

  .dashboard-lead,
  .dashboard-body,
  .grid--7-5,
  .sales-kit-primary__body,
  .sales-kit-operations {
    grid-template-columns: 1fr;
  }

  .commissions-columns {
    display: grid;
    gap: 22px;
  }

  .commission-statement,
  .withdraw-panel,
  .withdrawal-history,
  .fee-history {
    float: none;
    clear: none;
    width: auto;
    margin-top: 0;
  }

  .share-pass {
    min-height: 310px;
  }

}

@media (max-width: 820px) {
  .shell {
    display: block;
  }

  .rail {
    display: none;
  }

  .main-column {
    min-width: 0;
  }

  .topbar {
    position: sticky;
    z-index: 30;
    top: 0;
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: space-between;
    padding: 10px max(16px, env(safe-area-inset-left)) 10px max(16px, env(safe-area-inset-right));
    border-bottom: 1px solid var(--line);
    background: rgba(8, 10, 15, 0.96);
    backdrop-filter: blur(12px);
  }

  .topbar__brand,
  .topbar__action {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 9px;
  }

  .topbar__brand img {
    width: 96px;
    height: auto;
  }

  .topbar__action {
    padding: 9px 13px;
    border-radius: 10px;
    background: var(--blue);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 720;
  }

  .main {
    padding: 30px 18px calc(104px + env(safe-area-inset-bottom));
  }

  .pagehead {
    align-items: flex-start;
  }

  .pagehead__title {
    font-size: clamp(2.25rem, 10vw, 3.05rem);
  }

  .pagehead > .note,
  .pagehead__identity {
    display: none;
  }

  .grid--halves,
  .dashboard-lead,
  .dashboard-body {
    grid-template-columns: 1fr;
  }

  .dashboard-mobile-pass {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border-radius: 14px;
    background: var(--blue);
    color: #fff;
    box-shadow: 0 12px 28px rgba(25, 97, 202, 0.2);
  }

  .dashboard-mobile-pass strong,
  .dashboard-mobile-pass small {
    display: block;
  }

  .dashboard-mobile-pass strong {
    font-size: 0.9rem;
  }

  .dashboard-mobile-pass small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.73rem;
  }

  .money-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .money-card__primary {
    grid-row: auto;
  }

  .money-card__states {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .disclose {
    grid-column: auto;
  }

  .steps {
    grid-template-columns: 1fr;
    padding: 8px 22px 22px;
  }

  .step {
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 14px 0;
  }

  .step:not(:last-child)::after {
    top: 36px;
    left: 11px;
    width: 1px;
    height: calc(100% - 14px);
  }

  .step__title {
    padding-top: 0;
  }

  .tabbar {
    position: fixed;
    z-index: 40;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: calc(70px + env(safe-area-inset-bottom));
    padding: 7px 6px env(safe-area-inset-bottom);
    border-top: 1px solid var(--line);
    background: rgba(12, 15, 21, 0.98);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.34);
  }

  .tabbar__item,
  .sheet__summary {
    display: flex;
    min-width: 0;
    min-height: 56px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 10px;
    color: #929baa;
    font-size: 0.67rem;
    font-weight: 680;
  }

  .tabbar__item .icon,
  .sheet__summary .icon {
    width: 22px;
    height: 22px;
  }

  .tabbar__item[aria-current="page"],
  .sheet__summary[data-active="true"] {
    background: var(--blue-soft);
    color: var(--blue-strong);
  }

  .sheet {
    min-width: 0;
  }

  .sheet__summary {
    cursor: pointer;
    list-style: none;
  }

  .sheet__summary::-webkit-details-marker {
    display: none;
  }

  .sheet__panel {
    position: fixed;
    z-index: 42;
    inset: auto 12px calc(78px + env(safe-area-inset-bottom));
    display: grid;
    gap: 5px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
  }

  .sheet__link {
    display: flex;
    min-height: 50px;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 650;
  }

  .sheet__button {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--muted-strong);
    cursor: pointer;
    text-align: left;
  }

  .sheet__button:hover {
    background: var(--paper);
    color: var(--ink);
  }

  .sheet__link[aria-current="page"] {
    background: var(--blue-soft);
    color: var(--blue-strong);
  }
}

@media (max-width: 620px) {
  body {
    font-size: 15px;
  }

  .main {
    padding: 25px 15px calc(102px + env(safe-area-inset-bottom));
  }

  .pagehead {
    margin-bottom: 18px;
  }

  .pagehead__lede {
    font-size: 0.94rem;
  }

  .stack,
  .grid,
  .dashboard-lead,
  .dashboard-body {
    gap: 16px;
  }

  .panel {
    border-radius: 14px;
  }

  .panel__head,
  .panel__body,
  .panel__lede,
  .hero,
  .panel__foot {
    padding-inline: 17px;
  }

  .panel__head {
    min-height: 62px;
  }

  .panel__foot {
    align-items: flex-start;
    flex-direction: column;
  }

  .money-card__primary {
    padding: 24px 20px 26px;
  }

  .hero__figure {
    margin-top: 22px;
    font-size: clamp(4.35rem, 22vw, 5.8rem);
  }

  .money-card__helper {
    margin-top: 20px;
  }

  .money-card__actions .btn {
    flex: 1 1 auto;
  }

  .state {
    min-height: 82px;
    padding: 15px 17px;
  }

  .state__detail {
    max-width: 31ch;
  }

  .share-pass {
    min-height: 310px;
    grid-template-columns: minmax(0, 1fr) 104px;
    padding: 24px 20px;
  }

  .share-pass .panel__title {
    font-size: 1.9rem;
  }

  .share-pass__qr-frame {
    padding: 8px;
  }

  .share-pass .hero__actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .records__head {
    display: none;
  }

  .record {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 12px;
    align-items: start;
    padding: 17px;
  }

  .record__cell--lead {
    grid-column: 1 / -1;
  }

  .record__label {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 4px;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .record__cell--num,
  .record__cell--num .record__value {
    text-align: left;
  }

  .record__note {
    margin-top: 0;
  }

  .tally {
    grid-template-columns: 1fr;
  }

  .tally--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tally__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 14px;
    padding: 17px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .tally__item:last-child {
    border-bottom: 0;
  }

  .tally--four .tally__item {
    display: block;
    min-width: 0;
    border-right: 1px solid var(--line);
  }

  .tally--four .tally__item:nth-child(2n) {
    border-right: 0;
  }

  .tally--four .tally__item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .tally--four .tally__figure {
    margin-top: 9px;
  }

  .tally--four .tally__note {
    margin-top: 7px;
  }

  .tally__figure {
    grid-row: 1 / 3;
    grid-column: 2;
    margin: 0;
  }

  .tally__note {
    margin: 0;
  }

  .kv__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 17px;
  }

  .kv__value {
    text-align: left;
  }

  .qr-block {
    grid-template-columns: 1fr;
  }

  .qr {
    width: min(100%, 260px);
    margin-inline: auto;
  }

  .linkfield {
    align-items: stretch;
    flex-direction: column;
    padding: 9px;
  }

  .linkfield__value {
    padding: 4px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .linkfield .copy {
    width: 100%;
  }

  .statement__row {
    padding-inline: 15px;
  }

  .notice {
    padding: 15px;
  }

  .sales-kit-order-summary,
  .sales-kit-order-detail {
    grid-template-columns: 1fr;
  }

  .sales-kit-primary__head {
    align-items: flex-start;
  }

  .sales-kit-primary__meta {
    align-items: flex-end;
    flex-direction: column;
  }

  .sales-kit-primary__body {
    gap: 20px;
    padding: 20px 17px 22px;
  }

  .sales-kit-order-summary > div,
  .sales-kit-order-detail > div {
    padding-inline: 17px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sales-kit-order-summary > div:last-child,
  .sales-kit-order-detail > div:last-child {
    border-bottom: 0;
  }

  .sales-kit-primary__purchase > form,
  .sales-kit-primary__purchase > .btn {
    width: 100%;
  }

  .sales-kit-primary__purchase > form .btn {
    width: 100%;
  }

  .sales-kit-current > .btn {
    width: calc(100% - 34px);
    margin-inline: 17px;
  }

  .sales-kit-handoff {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .sales-kit-handoff .btn,
  .sales-kit-qr__form > .btn,
  .sales-kit-qr__actions,
  .sales-kit-qr__actions .btn,
  .sales-kit-qr__actions form {
    width: 100%;
  }

  .sales-kit-qr__actions form .btn {
    width: 100%;
  }

  .sales-kit-qr__form,
  .sales-kit-qr__actions {
    padding-inline: 17px;
  }
}

@media (max-width: 400px) {
  .share-pass {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .share-pass__qr {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    text-align: left;
  }

  .share-pass__qr span {
    margin: 0;
  }

  .record {
    grid-template-columns: 1fr !important;
  }

  .record__cell--lead,
  .record__note {
    grid-column: auto;
  }
}

.auth-page {
  min-height: 100dvh;
  background: #080a0f;
}

.application-form {
  border-top: 1px solid var(--line);
}

.application-submit p {
  max-width: 42ch;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.55;
}

.application-field--wide {
  grid-column: 1 / -1;
}

.application-form .field input,
.application-form .field select,
.application-form .field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  outline: 0;
  background: var(--surface-warm);
  color: var(--ink);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

.application-form .field textarea {
  min-height: 124px;
  resize: vertical;
}

.application-form .field input:hover,
.application-form .field select:hover,
.application-form .field textarea:hover {
  border-color: var(--muted);
}

.application-form .field input:focus-visible,
.application-form .field select:focus-visible,
.application-form .field textarea:focus-visible {
  border-color: var(--blue-strong);
  box-shadow: 0 0 0 3px rgba(125, 183, 255, 0.22);
}

.application-submit {
  display: flex;
  padding-top: 32px;
  align-items: center;
  gap: 18px;
}

.application-submit .btn {
  flex: 0 0 auto;
}

.payment-shell {
  width: min(100% - 40px, 1040px);
}

.payment-intro {
  display: grid;
  max-width: 790px;
  gap: 18px;
  margin-bottom: clamp(38px, 7vw, 64px);
}

.payment-intro h1 {
  max-width: 16ch;
  font-size: clamp(2.5rem, 6.8vw, 5rem);
  font-weight: 780;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.payment-intro > p {
  max-width: 64ch;
  color: var(--muted-strong);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.6;
}

.payment-state {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 760;
}

.payment-state--awaiting {
  background: var(--hold-bg);
  color: var(--hold);
}

.payment-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(22px, 5vw, 58px);
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: clamp(28px, 5vw, 46px);
}

.payment-summary {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 4vw, 32px);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.payment-summary h2,
.payment-method h2 {
  font-size: clamp(1.18rem, 2vw, 1.45rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.payment-amount {
  font-family: "DSN Archivo", "Segoe UI", sans-serif;
  font-size: clamp(3.2rem, 7vw, 5.3rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.payment-facts,
.bank-details {
  display: grid;
  gap: 0;
}

.payment-facts > div,
.bank-details > div {
  display: grid;
  grid-template-columns: minmax(118px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.payment-facts dt,
.bank-details dt {
  color: var(--muted);
  font-size: 0.76rem;
}

.payment-facts dd,
.bank-details dd {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 680;
}

.payment-code {
  font-family: "DSN Archivo", "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.025em;
}

.payment-actions {
  display: grid;
  gap: 18px;
}

.payment-method {
  display: grid;
  gap: 20px;
  padding: clamp(20px, 4vw, 28px) 0;
  border-bottom: 1px solid var(--line);
}

.payment-method--primary {
  padding: clamp(20px, 4vw, 28px);
  border-bottom: 0;
  border-radius: var(--radius);
  background: var(--blue-soft);
}

.payment-method p,
.payment-assurance {
  max-width: 60ch;
  margin-top: 7px;
  color: var(--muted-strong);
  font-size: 0.87rem;
  line-height: 1.55;
}

.payment-bank-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.payment-bank-action img {
  flex: 0 0 auto;
  padding: 8px;
  border-radius: 8px;
  background: var(--inverse-white);
}

@media (max-width: 720px) {
  .sales-plans {
    grid-template-columns: 1fr;
  }

  .sales-plan dl div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .sales-plan dd {
    text-align: left;
  }

  .payment-intro h1 {
    font-size: clamp(2.35rem, 13vw, 4rem);
  }

  .application-submit {
    align-items: flex-start;
    flex-direction: column;
  }

  .application-field--wide {
    grid-column: auto;
  }

  .application-submit .btn {
    width: 100%;
  }

  .payment-shell {
    width: min(100% - 28px, 1040px);
  }

  .payment-layout {
    grid-template-columns: 1fr;
  }

  .payment-bank-action {
    align-items: flex-start;
    flex-direction: column;
  }

  .payment-bank-action .btn {
    width: 100%;
  }
}

@media (max-width: 410px) {
  .payment-facts > div,
  .bank-details > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.auth-shell {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: clamp(22px, 5vw, 64px);
}

.auth-card {
  width: min(100%, 520px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.auth-card__head {
  display: grid;
  gap: 34px;
  padding: clamp(26px, 6vw, 46px);
  border-bottom: 1px solid var(--line);
  background: var(--surface-warm);
}

.auth-card__head img {
  width: 132px;
  height: auto;
}

.auth-card__head h1 {
  max-width: 12ch;
  font-size: clamp(2.25rem, 3.6vw, 3.6rem);
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.auth-card__head p {
  max-width: 42ch;
  margin-top: 12px;
  color: var(--muted);
}

.auth-form {
  display: grid;
  gap: 18px;
  padding: clamp(26px, 6vw, 46px);
}

.auth-assurance {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-warm);
}

.auth-assurance strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.auth-assurance p {
  color: var(--muted);
  font-size: 0.82rem;
}

.auth-form__note {
  color: var(--muted);
  font-size: 0.76rem;
  text-align: center;
}

/* Two named local accounts, grouped so it reads as a choice between people
   rather than one shortcut with a hidden mode. */
.auth-local {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.auth-local__label {
  margin: 0;
  color: var(--muted-strong);
  font-size: 0.74rem;
  font-weight: 650;
  text-align: center;
}

.auth-local .auth-form__note { margin: 0; }

.field {
  display: grid;
  gap: 7px;
}

.field label {
  color: var(--muted-strong);
  font-size: 0.78rem;
  font-weight: 720;
}

.field input {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  outline: 0;
  background: var(--surface-warm);
  color: var(--ink);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

.field input:hover {
  border-color: var(--muted);
}

.field input:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(125, 183, 255, 0.22);
}

.field__error {
  color: var(--negative);
  font-size: 0.78rem;
}

.form-error {
  padding: 12px 14px;
  border: 1px solid var(--negative);
  border-radius: var(--radius-control);
  background: var(--negative-bg);
  color: var(--negative);
  font-size: 0.82rem;
}

.auth-card__foot {
  padding: 20px clamp(26px, 6vw, 46px) 24px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.auth-card__foot strong,
.auth-card__foot p {
  display: block;
}

.auth-card__foot strong {
  font-size: 0.84rem;
}

.auth-card__foot p {
  max-width: 54ch;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
}

@media (max-width: 820px) {
  .guide-strip {
    grid-template-columns: auto minmax(0, 1fr);
    margin-bottom: 20px;
  }

  .guide-strip__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-left: 58px;
  }
}

@media (max-width: 620px) {
  .guide-strip {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 15px;
  }

  .guide-strip__mark {
    display: none;
  }

  .guide-strip__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 0;
  }

  .guide-strip__actions .btn,
  .guide-strip__actions form,
  .guide-strip__actions form .btn {
    width: 100%;
  }

  .guide-strip__actions form:last-child {
    grid-column: 1 / -1;
  }

  .live-empty {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 20px 17px;
  }

  .live-empty > .btn,
  .live-empty > form {
    grid-column: 1 / -1;
    width: 100%;
  }

  .live-empty > form .btn {
    width: 100%;
  }

  .live-empty--inside {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .portal-form {
    padding: 18px 17px;
  }

  .portal-form__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .portal-form__actions .btn {
    width: 100%;
  }

  .auth-shell {
    align-items: start;
    padding: 0;
  }

  .auth-card {
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .auth-card__head {
    gap: 42px;
    padding-top: max(32px, env(safe-area-inset-top));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  .rail,
.topbar,
.tabbar,
.guide-strip,
.messages,
.btn,
.copy {
    display: none !important;
  }

  .shell,
  .main-column {
    display: block;
  }

  .main {
    padding: 0;
  }

  .panel {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   Leaderboard

   The page is a competition, so it is allowed to look like one. Colour is
   spent deliberately rather than sprinkled: the selected metric column, the
   Best Performers group, the franchisee's own row and an earned status are
   the four things that get accent, and everything else stays neutral so those
   four still read as significant.

   Per-status accents come from the existing state palette, so a status card
   sits in the same colour language as the rest of the Portal rather than
   introducing a private one.
   -------------------------------------------------------------------------- */

.leaderboard-layout {
  grid-template-areas:
    "network position"
    "network performance"
    "network targets"
    "network milestones"
    "network notice";
}

.leaderboard-position { grid-area: position; }
.leaderboard-performance { grid-area: performance; }
.leaderboard-targets { grid-area: targets; }
.leaderboard-network { grid-area: network; }
.leaderboard-notice { grid-area: notice; }

/* --- Chips ------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip--metric {
  background: rgba(125, 183, 255, 0.16);
  color: var(--blue-strong);
}

.chip--progress {
  background: var(--blue-soft);
  color: var(--blue-strong);
}

.chip--progress.is-complete {
  background: var(--success-bg);
  color: var(--success);
}

/* --- Your position ------------------------------------------------------ */

.rank-figure {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0;
}

.rank-figure__place {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.rank-figure__of {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 620;
}

.rank-figure__value {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}

.meter--floor .meter__fill { background: var(--blue-strong); }

.meter--floor { margin: 14px 0 0; }

/* --- Your targets ------------------------------------------------------- */

.target-figure {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.target-figure__done {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.target-figure__of {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 620;
}

.leaderboard-targets .meter { background: var(--line); }

.meter--target .meter__fill {
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-strong) 100%);
  transition: width 320ms var(--ease);
}

.meter--target.is-complete .meter__fill {
  background: linear-gradient(90deg, #2f8f60 0%, var(--success) 100%);
}

/* --- Your performance --------------------------------------------------- */

.awards {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px 22px 20px;
  list-style: none;
}

.award {
  --award: var(--blue-strong);
  --award-bg: var(--blue-soft);
  --award-edge: color-mix(in srgb, var(--award) 26%, transparent);
  position: relative;
  display: grid;
  align-items: center;
  gap: 13px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 14px 15px;
  overflow: hidden;
  border: 1px solid var(--award-edge);
  border-radius: 14px;
  background: var(--award-bg);
}

/* A quiet wash of the status colour, so the card is tinted rather than
   flooded and the text on it keeps its contrast. */
.award::after {
  position: absolute;
  inset: 0 0 0 auto;
  width: 45%;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--award) 12%, transparent)
  );
  content: "";
  pointer-events: none;
}

.award__mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--award) 20%, transparent);
  color: var(--award);
}

.award__mark .icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.9;
}

.award__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.award__label {
  color: var(--award);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.005em;
}

.award__detail {
  color: var(--muted-strong);
  font-size: 0.77rem;
  line-height: 1.4;
}

.award--best_performer { --award: var(--accolade); --award-bg: var(--accolade-bg); }
.award--rising_star { --award: var(--pending); --award-bg: var(--pending-bg); }
.award--on_track { --award: var(--success); --award-bg: var(--success-bg); }

/* --- Ranking controls --------------------------------------------------- */

.board__context {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.board__context strong {
  color: var(--blue-strong);
  font-weight: 780;
}

.board__pills {
  display: none;
  gap: 8px;
  padding: 13px 22px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.board__pills::-webkit-scrollbar { display: none; }

.board__pill {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted-strong);
  font-size: 0.79rem;
  font-weight: 700;
  scroll-snap-align: start;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 140ms ease-out, color 140ms ease-out,
    border-color 140ms ease-out;
}

.board__pill.is-selected {
  border-color: var(--blue-strong);
  background: var(--blue-strong);
  color: var(--canvas);
}

.board__scroll { min-width: 0; }

/* --- The table ---------------------------------------------------------- */

.board {
  width: 100%;
  border-collapse: collapse;
}

.board thead th {
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-warm);
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 720;
  letter-spacing: 0.035em;
  text-align: left;
  text-transform: uppercase;
  vertical-align: bottom;
}

.board__col--rank { width: 46px; padding: 11px 0 11px 22px !important; }
.board__col--who { padding: 11px 12px 11px 8px !important; }
.board__col--num { text-align: right; }

.board__sort {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  padding: 11px 12px;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  text-transform: inherit;
  transition: color 140ms ease-out;
}

.board__col:last-child .board__sort { padding-right: 22px; }

.board__sort:hover,
.board__sort:focus-visible { color: var(--ink); }

/* The selected criterion is identified four ways over: a filled header, a
   weight change, a direction glyph and the sentence above the table. None of
   them is colour on its own. */
.board thead th.is-selected {
  border-bottom-color: var(--blue-strong);
  background: var(--blue-soft);
  color: var(--blue-strong);
}

.board thead th.is-selected .board__sort { font-weight: 820; }

.board__arrow { font-size: 0.6rem; line-height: 1; }

.board__row {
  border-bottom: 1px solid var(--line);
  transition: transform 200ms ease-out, background-color 140ms ease-out;
}

.board__row:last-child { border-bottom: 0; }

.board__rank,
.board__who,
.board__num {
  padding: 15px 12px;
  font-size: 0.85rem;
  vertical-align: middle;
}

.board__rank {
  padding-left: 22px;
  text-align: left;
}

.board__place {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  font-weight: 760;
}

/* The top five carry one identical mark between them. Nobody in the group is
   decorated above anybody else in it - that is what makes it collective. */
.board__row.is-best .board__place {
  background: color-mix(in srgb, var(--accolade) 22%, transparent);
  color: var(--accolade);
}

.board__who { padding-left: 8px; }

.board__ref {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.board__you {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-strong);
  color: var(--canvas);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.board__num {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.board__num:last-child { padding-right: 22px; }

/* The column the board is ranked by is the one that matters, so it is the one
   that is bright. It says so in brightness and weight, not colour: the filled
   header, the glyph, the "Ranked by" line and this tint already identify it
   four times over, and off-white outreads a mid-blue on a canvas this dark.
   That leaves blue meaning two things only - you, and the top five. */
.board tbody td.is-selected {
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 800;
}

.board__row.is-you {
  background: var(--blue-pale);
  box-shadow: inset 3px 0 0 var(--blue-strong);
}

/* Hover has to be legible over the tinted rows as well as the plain ones, so
   it lifts the surface rather than replacing it. */
@media (hover: hover) {
  .board__row:hover {
    background: var(--paper);
    box-shadow: inset 3px 0 0 var(--line-strong);
  }

  .board__row.is-best:hover {
    box-shadow: inset 3px 0 0 var(--accolade);
  }

  /* The franchisee must stay findable through the hover, so their accent bar
     survives and their tint only brightens. */
  .board__row.is-you:hover {
    background: var(--blue-soft);
    box-shadow: inset 3px 0 0 var(--blue-strong);
  }

  .board__row:hover td.is-selected {
    background: rgba(255, 255, 255, 0.08);
    color: var(--inverse-white);
  }
}

/* --- Best Performers ---------------------------------------------------- */

.board__band td {
  padding: 12px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--accolade) 32%, transparent);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accolade) 14%, transparent),
    transparent 70%
  );
  vertical-align: middle;
}

.board__band-mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 9px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accolade) 24%, transparent);
  color: var(--accolade);
  vertical-align: -6px;
}

.board__band-mark .icon { width: 13px; height: 13px; stroke-width: 2; }

.board__band-title {
  color: var(--accolade);
  font-size: 0.73rem;
  font-weight: 820;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.board__band-note {
  margin-left: 10px;
  color: var(--muted);
  font-size: 0.73rem;
}

.board__row.is-best {
  background: color-mix(in srgb, var(--accolade) 12%, transparent);
}

/* Lifted, and still unmistakably yours. Pitched so it stands off the group
   tint by about as much as your row stands off a plain one outside it. */
.board__row.is-best.is-you {
  background: color-mix(in srgb, var(--blue-strong) 22%, transparent);
}

/* The group closes with a rule the eye can follow. */
.board__row.is-best-last {
  border-bottom: 1px solid color-mix(in srgb, var(--accolade) 36%, transparent);
}

/* --- My DSN contextual leaderboard ------------------------------------- */

/* My DSN keeps the canonical Current Commission order but chooses the rows
   that answer a dashboard question: the leaders, and where the signed-in
   franchisee sits among the people nearest them. It is deliberately not the
   full page's table compressed into a nested scroll region. */
.compact-leaderboard__head {
  align-items: flex-start;
}

.compact-leaderboard__metric {
  margin: 6px 0 0;
  color: var(--blue-strong);
  font-size: 0.78rem;
  font-weight: 760;
}

.compact-leaderboard__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  margin: -6px -8px -6px 0;
  padding: 8px;
  color: var(--muted-strong);
  font-size: 0.8rem;
  font-weight: 720;
  text-decoration: none;
  transition: color 140ms ease-out;
}

.compact-leaderboard__link .icon {
  width: 15px;
  height: 15px;
  transition: transform 160ms var(--ease);
}

.compact-leaderboard__link:hover,
.compact-leaderboard__link:focus-visible {
  color: var(--blue-strong);
}

.compact-leaderboard__link:hover .icon,
.compact-leaderboard__link:focus-visible .icon {
  transform: translateX(2px);
}

.compact-leaderboard__foot { display: none; }

.compact-board {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.compact-board__rank-col { width: 56px; }
.compact-board__amount-col { width: 136px; }

.compact-board__row {
  border-bottom: 1px solid var(--line);
  transition: background-color 140ms ease-out;
}

.compact-board__row:last-child { border-bottom: 0; }

.compact-board__rank,
.compact-board__who,
.compact-board__amount {
  height: 54px;
  padding: 12px;
  vertical-align: middle;
}

.compact-board__rank {
  width: 56px;
  padding-left: 22px;
  text-align: left;
}

.compact-board__place {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--surface-warm);
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  font-weight: 760;
}

.compact-board__place.is-leading {
  background: color-mix(in srgb, var(--accolade) 20%, transparent);
  color: var(--accolade);
}

.compact-board__place--unranked {
  color: var(--muted-strong);
}

.compact-board__who {
  padding-left: 8px;
}

.compact-board__name {
  color: var(--ink);
  font-size: 0.87rem;
  font-weight: 700;
  letter-spacing: 0.005em;
}

.compact-board__amount {
  width: 136px;
  padding-right: 22px;
  color: var(--ink);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  font-weight: 780;
  text-align: right;
  white-space: nowrap;
}

.compact-board__amount--unranked {
  color: var(--muted-strong);
  font-size: 0.76rem;
  font-weight: 700;
}

.compact-board__row.is-you {
  background: var(--blue-pale);
  box-shadow: inset 1px 0 0 var(--blue-strong);
}

.compact-board__row.is-you .compact-board__place {
  background: color-mix(in srgb, var(--blue-strong) 24%, transparent);
  color: var(--blue-strong);
}

.compact-board__context td {
  padding: 9px 22px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 740;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.compact-board__context span {
  display: flex;
  align-items: center;
  gap: 10px;
}

.compact-board__context span::after {
  height: 1px;
  flex: 1;
  background: var(--line);
  content: "";
}

.compact-board__empty {
  padding: 24px 22px;
  color: var(--muted);
  font-size: 0.84rem;
  text-align: left;
}

@media (hover: hover) {
  .compact-board__row:hover {
    background: var(--paper);
  }

  .compact-board__row.is-you:hover {
    background: var(--blue-soft);
  }
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1120px) {
  .leaderboard-layout {
    grid-template-areas:
      "position"
      "performance"
      "targets"
      "network"
      "milestones"
      "notice";
  }
}

/* Below this width the column headers go, so the pills take over as the way
   to change criterion and each row becomes a record card carrying all five
   values. The same criteria and the same numbers stay available - the table is
   restated, not reduced. */
@media (max-width: 720px) {
  .board__pills {
    display: flex;
    /* The same gutter every other element in this card uses, so the first
       pill lines up with the heading above it rather than sitting on the
       border.

       scroll-padding matters as much as padding here. ``scroll-snap-align:
       start`` aligns a pill to the *scrollport* edge, which ignores padding -
       so without this the resting snap scrolled the leading gutter away and
       could not be scrolled back. The trailing edge still bleeds, because the
       clipped last pill is what says the row scrolls. */
    --board-gutter: 17px;
    padding: 13px var(--board-gutter);
    scroll-padding-inline-start: var(--board-gutter);
    gap: 7px;
    mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
  }

  .board__pills::after {
    flex: 0 0 10px;
    content: "";
  }

  .board,
  .board tbody,
  .board__row { display: block; }

  .board thead { display: none; }

  .board__band td { display: block; }

  .board__row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 17px 17px 52px;
  }

  .board__rank {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 0;
  }

  .board__who {
    grid-column: 1 / -1;
    padding: 0;
  }

  .board__num {
    padding: 0;
    text-align: left;
  }

  .board__num::before {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    content: attr(data-label);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .board tbody td.is-selected {
    background: none;
    font-size: 1.02rem;
  }

  .board tbody td.is-selected::before { color: var(--blue-strong); }

  .board__num:last-child { padding-right: 0; }

  .awards { padding: 12px 17px 18px; }
}

@media (max-width: 620px) {
  .board__band td { padding-inline: 17px; }

  .compact-leaderboard__head {
    padding: 17px;
  }

  .compact-leaderboard__link--desktop { display: none; }

  .compact-leaderboard__foot {
    display: flex;
    min-height: 56px;
    align-items: center;
    padding: 5px 9px;
    border-top: 1px solid var(--line);
  }

  .compact-leaderboard__foot .compact-leaderboard__link {
    width: 100%;
    justify-content: space-between;
    margin: 0;
  }

  .compact-board__rank {
    padding-left: 17px;
  }

  .compact-board__rank-col { width: 49px; }
  .compact-board__amount-col { width: 116px; }

  .compact-board__who { padding-left: 6px; }

  .compact-board__amount {
    width: 116px;
    padding-right: 17px;
    font-size: 0.84rem;
  }

  .compact-board__context td,
  .compact-board__empty {
    padding-inline: 17px;
  }
}

/* Motion is feedback, not reward: rows slide to their new place and the
   selected column changes weight. The global prefers-reduced-motion rule
   clamps all of it to nothing, which is safe because the reorder is a DOM
   change that has already happened by then. */
.board__row[data-moving] { transition: none; }

/* ---------------------------------------------------------------------------
   Settings rows — Profile & Security
   ------------------------------------------------------------------------ */

/* A settings card reads as a list of facts. Label left, value right, a
   hairline between, and any action kept quiet at the end of the row it acts
   on. Nothing here is a component with a personality: the information is the
   interface, and editing is the exception it makes room for. */
.settings {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.settings dt,
.settings dd {
  margin: 0;
}

.setting {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto;
  align-items: baseline;
  gap: 6px 18px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line);
}

.settings > .setting:last-child {
  border-bottom: 0;
}

.setting__label {
  color: var(--muted);
  font-size: 0.8rem;
}

.setting__label--strong {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 640;
}

.setting__value {
  min-width: 0;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

/* An address is several lines, so its row lets the value run full width
   underneath the label rather than compressing it into a column. */
.setting--stacked {
  grid-template-columns: 1fr;
  gap: 5px;
}

.setting__hint {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.78rem;
}

.address-block {
  font-style: normal;
  line-height: 1.5;
}

/* A secondary route out of a read-only row: quiet, inline, and clearly not a
   control that changes the value in place. */
.setting__link {
  display: block;
  margin-top: 4px;
  color: var(--blue-strong);
  font-size: 0.78rem;
}

/* ---- editing ------------------------------------------------------------
   The summary is the Edit affordance. It reads as a link, not as a chunky
   accordion header, so a card at rest is information rather than machinery. */
.settings--actions {
  border-top: 1px solid var(--line);
}

.setting--editable {
  display: block;
  padding: 0;
  border-bottom: 1px solid var(--line);
}

.settings--actions > .setting--editable:last-child {
  border-bottom: 0;
}

.setting__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  color: var(--blue-strong);
  font-size: 0.83rem;
  font-weight: 620;
  cursor: pointer;
  list-style: none;
}

.setting__summary::-webkit-details-marker {
  display: none;
}

/* A small chevron, drawn rather than iconographic, so the affordance is
   legible without competing with the values above it. */
.setting__summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translate(-1px, 1px);
  transition: transform 0.15s ease;
}

.setting--editable[open] > .setting__summary::after {
  transform: rotate(45deg) translate(-1px, -1px);
}

.setting__summary:hover {
  background: var(--surface-warm);
}

.setting__summary:focus-visible {
  outline: 2px solid var(--blue-strong);
  outline-offset: -2px;
}

.setting__form {
  display: grid;
  gap: 14px;
  padding: 2px 22px 20px;
}

/* Address and contact fields are short. A two-column grid keeps a form the
   height of the information it edits instead of a column of full-width
   inputs. */
.field-grid,
.setting__form .address__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.field-grid > .field:first-child,
.setting__form .address__fields > .field:first-child,
.setting__form .address__fields > .field:nth-child(2) {
  grid-column: 1 / -1;
}

.setting__actions {
  display: flex;
  gap: 10px;
}

.btn--sm {
  padding: 8px 15px;
  font-size: 0.82rem;
}

/* ---- device and preference rows ---------------------------------------- */

.setting--device {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 18px;
}

.setting--device .setting__label--strong {
  grid-column: 1;
}

.setting--device .setting__value {
  grid-column: 1;
  font-size: 0.78rem;
}

.setting--device .setting__control,
.setting--device .setting__action {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.setting__action {
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue-strong);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 620;
  cursor: pointer;
}

.setting__action:focus-visible {
  outline: 2px solid var(--blue-strong);
  outline-offset: 2px;
}

/* A real checkbox, visually replaced. Keeping the input in the accessibility
   tree is what gives the control its name, state and keyboard behaviour. */
.switch {
  display: inline-flex;
  align-items: center;
}

.switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.switch__track {
  position: relative;
  display: block;
  width: 40px;
  height: 23px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-warm);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s ease, background 0.15s ease;
}

.switch input:checked + .switch__track {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.switch input:checked + .switch__track::after {
  background: var(--blue-strong);
  transform: translateX(17px);
}

.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--blue-strong);
  outline-offset: 2px;
}

/* ---- address entry ------------------------------------------------------ */

.address {
  display: grid;
  gap: 12px;
  border: 0;
  margin: 0;
  padding: 0;
}

.address > legend {
  padding: 0;
  margin-bottom: 10px;
}

.address__row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.address__row input {
  flex: 1 1 auto;
  min-width: 0;
}

.address__fields {
  display: grid;
  gap: 12px;
}

/* ---- mobile -------------------------------------------------------------
   Not the desktop rows restacked: the label sits above its value, the row
   loses its column geometry, and horizontal padding matches the rest of the
   Portal's mobile cards. */
@media (max-width: 720px) {
  .setting {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 17px;
  }

  .setting__value {
    font-size: 0.92rem;
  }

  .setting--device {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .setting__summary,
  .setting__form {
    padding-left: 17px;
    padding-right: 17px;
  }

  .field-grid,
  .setting__form .address__fields {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Support
   --------------------------------------------------------------------------
   The request list leads and the compose form follows, in one source order
   that works on both widths - so a franchisee on a phone finds out whether
   DSN has replied before they meet a form they did not come for.
   -------------------------------------------------------------------------- */

.support-attention {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--requested-bg);
  color: var(--requested);
  font-size: 0.85rem;
}

.support-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.support-list > li {
  border-bottom: 1px solid var(--line);
}

.support-list > li:last-child {
  border-bottom: 0;
}

.support-item {
  display: grid;
  gap: 7px;
  padding: 16px 22px;
  color: inherit;
  text-decoration: none;
  transition: background 0.16s var(--ease);
}

.support-item:hover,
.support-item:focus-visible {
  background: var(--surface-warm);
}

/* An unread request is marked twice over: the rail and the "New reply"
   stamp. Neither is colour on its own. */
.support-item--unread {
  position: relative;
}

.support-item--unread::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--requested);
  content: "";
}

.support-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.support-item__subject {
  min-width: 0;
  font-size: 0.94rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.support-item__meta {
  color: var(--muted);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.support-item__latest {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--muted-strong);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.support-item__who {
  font-weight: 700;
  color: var(--graphite);
}

.support-item__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.74rem;
}

.support-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
}

/* The compose form is a disclosure once there is history to read first. The
   summary keeps the panel-head shape so it does not read as a lesser thing,
   only a closed one. */
.support-compose__summary {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}

.support-compose__summary::-webkit-details-marker {
  display: none;
}

.support-compose__summary::after {
  flex: none;
  color: var(--muted);
  content: "Open";
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.support-compose[open] .support-compose__summary {
  border-bottom: 1px solid var(--line);
}

.support-compose[open] .support-compose__summary::after {
  content: "Close";
}

.support-compose__summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.support-compose__body {
  padding: 20px 22px 22px;
}

.support-context {
  margin-bottom: 16px;
  padding: 11px 13px;
  border-radius: var(--radius-control);
  background: var(--blue-pale);
  color: var(--muted-strong);
}

/* Where the franchisee came from, as a label rather than a sentence. */
.support-context__from {
  display: block;
  margin-bottom: 4px;
  color: var(--muted-strong);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.support-topic-help {
  margin-top: -8px;
}

.support-privacy {
  margin-top: 14px;
}

/* Request detail */

.pagehead__back {
  margin-bottom: 8px;
  font-size: 0.8rem;
}

.pagehead__title--request {
  max-width: 24ch;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.thread {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 20px 22px;
  list-style: none;
}

.thread__item {
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-warm);
}

/* DSN's side is tinted and shifted, so who is speaking is legible from the
   shape of the thread as well as from the name on it. */
.thread__item--dsn {
  margin-right: 22px;
  border-color: var(--line-strong);
  background: var(--blue-pale);
}

.thread__item:not(.thread__item--dsn) {
  margin-left: 22px;
}

.thread__by {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.thread__author {
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.thread__when {
  font-size: 0.73rem;
}

.thread__body {
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.thread__closed {
  margin: 0 22px 20px;
  padding: 11px 13px;
  border-radius: var(--radius-control);
  background: var(--success-bg);
  color: var(--success);
  font-size: 0.82rem;
}

.support-detail .panel__foot {
  display: block;
  padding: 18px 22px 22px;
}

/* A quiet panel for secondary navigation - present, findable, and not
   competing with the workflow above it. */
.panel--quiet {
  background: transparent;
  box-shadow: none;
}

.panel--quiet .panel__body {
  padding: 18px 20px;
}

.panel__title--sm {
  font-size: 0.98rem;
  font-weight: 720;
  letter-spacing: -0.01em;
}

/* Django renders field errors as a list so that its own
   ``aria-describedby`` target exists. It is styled as the single line it
   almost always is. */
.field__error ul,
.field__error ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 720px) {
  .support-attention,
  .support-item,
  .support-pager,
  .support-compose__summary,
  .support-compose__body,
  .thread {
    padding-left: 17px;
    padding-right: 17px;
  }

  .thread__item--dsn {
    margin-right: 12px;
  }

  .thread__item:not(.thread__item--dsn) {
    margin-left: 12px;
  }

  .thread__closed {
    margin-left: 17px;
    margin-right: 17px;
  }

  .support-detail .panel__foot {
    padding: 16px 17px 18px;
  }
}

/* The unread-reply count, on whichever navigation is showing. The number is
   the signal; the colour only reinforces it, and "More" carries a dot
   because the count itself is inside the sheet. */
.nav-badge {
  display: inline-flex;
  min-width: 19px;
  height: 19px;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--requested-bg);
  color: var(--requested);
  font-size: 0.68rem;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.rail__link .nav-badge,
.sheet__link .nav-badge {
  margin-left: auto;
}

.nav-badge--dot {
  position: absolute;
  top: 6px;
  right: calc(50% - 16px);
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  background: var(--requested);
}

.tabbar .sheet__summary {
  position: relative;
}

/* ==========================================================================
   Head Office control centre
   --------------------------------------------------------------------------
   Replaces a single column of always-open forms. The page now answers what is
   switched on in its first viewport and holds the fields behind an edit
   action, which is the pattern Webflow's Discounts panel and Vercel's project
   Overview both use, and the reason neither of them needs a page of scrolling.

   The grids are all auto-fit/minmax, so the desktop width that previously sat
   empty is filled by content reflowing rather than by anything being stretched.
   ========================================================================== */

.ho {
  display: grid;
  gap: 24px;
}

.ho__section-title {
  font-family: "DSN Archivo", "Segoe UI", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

/* --- Summary band ------------------------------------------------------- */

.ho__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.ho-tile {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.ho-tile__label {
  font-size: 0.78rem;
  color: var(--muted);
}

.ho-tile__value {
  font-family: "DSN Archivo", "Segoe UI", sans-serif;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--ink);
}

.ho-tile__note {
  font-size: 0.76rem;
  color: var(--muted);
}

/* Dense label / value / note rows, three across on desktop. The Vercel
   settings idiom: everything readable without opening anything. */
.ho__states {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px;
  margin-top: 12px;
  padding: 4px;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.ho-state {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
}

.ho-state__label {
  font-size: 0.76rem;
  color: var(--muted);
}

.ho-state__value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink);
}

.ho-state__note {
  font-size: 0.74rem;
  color: var(--muted);
}

.ho-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.ho-dot.is-on { background: var(--success); }
.ho-dot.is-off { background: var(--line-strong); }

/* --- Tabs --------------------------------------------------------------- */

.ho__tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}

.ho-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
  margin-bottom: -1px;
}

.ho-tab:hover { color: var(--ink); }

.ho-tab.is-selected {
  color: var(--ink);
  border-bottom-color: var(--blue-strong);
}

.ho-tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.ho-panel.is-hidden { display: none; }

/* --- Cards -------------------------------------------------------------- */

.ho__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.ho-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  display: grid;
  gap: 14px;
  align-content: start;
}

.ho-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ho-card__title {
  font-family: "DSN Archivo", "Segoe UI", sans-serif;
  font-size: 1.05rem;
  margin: 0 0 6px;
  color: var(--ink);
}

.ho-card__meta,
.ho-card__body,
.ho-card__stamp,
.ho__footnote {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
}

.ho-card__stamp { font-size: 0.76rem; }

.ho-card__edit { flex: none; }

.ho-card__actions {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

/* Label / value rows inside a card. */
.ho-rows {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}

.ho-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.ho-row dt {
  font-size: 0.82rem;
  color: var(--muted);
}

.ho-row dd {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink);
  text-align: right;
}

.ho-row s { color: var(--muted); }

/* --- Fields and the edit sheet ------------------------------------------ */

.ho-field {
  display: grid;
  gap: 5px;
}

.ho-field--grow { flex: 1 1 220px; }

.ho-field__label {
  font-size: 0.78rem;
  color: var(--muted);
}

.ho-field__optional {
  color: var(--line-strong);
  font-weight: 400;
}

.ho-field__hint {
  font-size: 0.74rem;
  color: var(--muted);
}

.ho-field input {
  width: 100%;
  padding: 9px 11px;
  background: var(--surface-warm);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--ink);
  font: inherit;
}

.ho-field input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* A switch rather than a bare checkbox: the old page put an unlabelled box
   next to the word Active and it read as a form field rather than a state. */
.ho-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.ho-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ho-toggle__track {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--line-strong);
  position: relative;
  transition: background 120ms ease;
  flex: none;
}

.ho-toggle__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--inverse-white);
  transition: transform 120ms ease;
}

.ho-toggle input:checked + .ho-toggle__track { background: var(--success); }
.ho-toggle input:checked + .ho-toggle__track::after { transform: translateX(18px); }
.ho-toggle input:focus-visible + .ho-toggle__track { outline: 2px solid var(--focus); outline-offset: 2px; }

.ho-toggle__text { font-weight: 600; color: var(--ink); }

/* The side sheet. Slides in over the page on desktop, becomes an ordinary
   block on narrow screens where there is no room beside anything. */
.ho-sheet {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 100vw);
  background: var(--paper);
  border-left: 1px solid var(--line-strong);
  padding: 24px;
  overflow-y: auto;
  z-index: 60;
  box-shadow: -24px 0 48px rgba(0, 0, 0, 0.45);
}

.ho-sheet[hidden] { display: none; }

.ho-sheet__form { display: grid; gap: 16px; }

.ho-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ho-sheet__head h4 {
  margin: 0;
  font-family: "DSN Archivo", "Segoe UI", sans-serif;
  font-size: 1rem;
  color: var(--ink);
}

.ho-sheet__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ho-sheet__actions { display: flex; justify-content: flex-end; }

/* --- Review personas ---------------------------------------------------- */

.ho-personas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.ho-persona { margin: 0; }

.ho-persona__button {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.ho-persona__button:hover { border-color: var(--line-strong); }
.ho-persona__button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.ho-persona__kind {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.ho-persona__name { font-weight: 600; color: var(--ink); }
.ho-persona__stats { font-size: 0.76rem; color: var(--muted); }

/* --- Operations grid ---------------------------------------------------- */

.ho__ops {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.ho-op {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
}

.ho-op:hover { border-color: var(--line-strong); }
.ho-op__title { font-weight: 600; color: var(--ink); }
.ho-op__note { font-size: 0.78rem; color: var(--muted); }

@media (max-width: 720px) {
  .ho-sheet {
    position: static;
    width: auto;
    border-left: 0;
    border-top: 1px solid var(--line-strong);
    box-shadow: none;
    padding: 18px 0 0;
  }
  .ho-sheet__pair { grid-template-columns: 1fr; }
  .ho-card { padding: 16px; }
}

/* ==========================================================================
   Head Office operator surface - 29 August 2026
   Mobbin sources: Supabase dashboard, v0 Project Settings, Notion Settings.
   ========================================================================== */

body.ho-sheet-open {
  overflow: hidden;
}

.ho {
  display: grid;
  min-width: 0;
  width: 100%;
  gap: 0;
}

.ho-overview {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-warm);
  box-shadow: var(--shadow);
}

.ho-overview__heading {
  list-style: none;
}

.ho-overview__heading::-webkit-details-marker {
  display: none;
}

.ho-overview__mobile-summary,
.ho-overview__toggle {
  display: none;
}

.ho-overview__heading,
.ho-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.ho-overview__heading {
  align-items: center;
  padding: 18px 22px;
}

.ho-overview[open] > .ho-overview__heading { border-bottom: 1px solid var(--line); }

.ho-overview__title,
.ho-section-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: "DSN Archivo", "Segoe UI", sans-serif;
  font-size: 1.04rem;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.ho-overview__heading p,
.ho-section-head p,
.ho-finder__heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.ho-overview__updated,
.ho-section-note {
  color: var(--muted-strong);
  font-size: 0.76rem;
  white-space: nowrap;
}

.ho-overview__updated {
  padding: 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
}

.ho-overview__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  min-height: 244px;
}

.ho-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ho-metric {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 6px;
  padding: 24px 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.ho-metric:nth-child(even) {
  border-right: 0;
}

.ho-metric:nth-child(n + 3) {
  border-bottom: 0;
}

.ho-metric__label,
.ho-metric__note,
.ho-discount-card__scope,
.ho-sheet__context {
  color: var(--muted);
  font-size: 0.74rem;
}

.ho-metric__value {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-family: "DSN Archivo", "Segoe UI", sans-serif;
  font-size: clamp(1.85rem, 3vw, 2.5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  letter-spacing: -0.04em;
  line-height: 1;
}

.ho-metric__note {
  color: var(--muted-strong);
}

.ho-status-board {
  display: grid;
  align-content: stretch;
  background: #0d1016;
}

.ho-status-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.ho-status-row:last-child {
  border-bottom: 0;
}

.ho-status-row__icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
}

.ho-status-row__icon--success { background: var(--success); }
.ho-status-row__icon--attention { background: var(--hold); }

.ho-status-row__body,
.ho-result__body,
.ho-operation__body {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.ho-status-row__body strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ho-status-row__body small,
.ho-operation__body small {
  color: var(--muted);
  font-size: 0.72rem;
}

.ho-badge {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 720;
  line-height: 1;
  white-space: nowrap;
}

.ho-badge--success { background: var(--success-bg); color: var(--success); }
.ho-badge--attention { background: var(--hold-bg); color: var(--hold); }
.ho-badge--scheduled { background: var(--requested-bg); color: var(--requested); }
.ho-badge--neutral { background: #242a35; color: var(--muted-strong); }

.ho-tabs-shell {
  position: sticky;
  z-index: 9;
  min-width: 0;
  top: 0;
  margin-top: 24px;
  padding-top: 1px;
  background: var(--canvas);
}

.ho-tabs {
  display: flex;
  min-width: 0;
  gap: 4px;
  overflow-x: auto;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #0e1118;
  scrollbar-width: none;
}

.ho-tabs::-webkit-scrollbar { display: none; }

.ho-tab {
  position: relative;
  flex: 1 0 auto;
  min-height: 44px;
  appearance: none;
  padding: 10px 18px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 650;
  margin: 0;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}

.ho-tab:hover {
  background: var(--surface);
  color: var(--ink);
}

.ho-tab.is-selected {
  background: var(--blue-soft);
  color: var(--blue-strong);
}

.ho-tab.is-selected::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 4px;
  left: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue-strong);
}

.ho-tab:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.ho-panel {
  display: grid;
  min-width: 0;
  gap: 18px;
  padding-top: 30px;
  animation: ho-panel-in 180ms var(--ease);
}

.ho-panel[hidden] { display: none; }

@keyframes ho-panel-in {
  from { opacity: 0.01; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.ho-section-head {
  align-items: flex-end;
}

.ho-control-card {
  display: flex;
  min-height: 168px;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 26px 28px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.ho-control-card__main {
  display: grid;
  gap: 16px;
}

.ho-control-card__heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.ho-control-card__mark,
.ho-operation__mark,
.ho-discount-empty__mark {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue-strong);
}

.ho-control-card h3,
.ho-discount-card h3,
.ho-finder h3,
.ho-sheet h3 {
  margin: 0;
  color: var(--ink);
  font-family: "DSN Archivo", "Segoe UI", sans-serif;
  font-size: 1.08rem;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.ho-control-card__status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.75rem;
  flex-wrap: wrap;
}

.ho-control-card__copy {
  max-width: 62ch;
  margin: 0;
  color: var(--muted-strong);
  font-size: 0.86rem;
}

.ho-discount-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.ho-discount-card {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.ho-discount-card__head,
.ho-discount-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.ho-discount-card__head {
  border-bottom: 1px solid var(--line);
}

.ho-discount-card__scope,
.ho-sheet__context {
  display: block;
  margin-bottom: 3px;
}

.ho-discount-price {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 142px;
  padding: 22px 20px 20px;
  background: #11151d;
}

.ho-discount-price > span,
.ho-discount-price small,
.ho-discount-card__history,
.ho-discount-card__foot > span {
  color: var(--muted);
  font-size: 0.74rem;
}

.ho-discount-price strong {
  color: var(--ink);
  font-family: "DSN Archivo", "Segoe UI", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.ho-discount-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 6px 20px 12px;
}

.ho-discount-facts > div {
  min-width: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

.ho-discount-facts > div:nth-child(odd) { padding-right: 16px; }
.ho-discount-facts > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.ho-discount-facts > div:nth-last-child(-n + 2) { border-bottom: 0; }

.ho-discount-facts dt {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.71rem;
}

.ho-discount-facts dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.ho-discount-card__history {
  margin: 0;
  padding: 0 20px 16px;
}

.ho-discount-empty {
  display: flex;
  min-height: 250px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 34px;
  text-align: left;
}

.ho-discount-empty strong { color: var(--ink); font-size: 0.92rem; }
.ho-discount-empty p { max-width: 34ch; margin: 3px 0 0; color: var(--muted); font-size: 0.8rem; }

.ho-discount-card__foot {
  min-height: 70px;
  border-top: 1px solid var(--line);
  background: var(--surface-warm);
}

.ho-rule-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.ho-rule-note .icon { width: 17px; height: 17px; color: var(--requested); }

.ho-sheet-layer {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(480px, 100%);
}

.ho-sheet-layer[hidden] { display: none; }

.ho-sheet-layer__backdrop {
  appearance: none;
  border: 0;
  border-radius: 0;
  background: rgba(3, 5, 8, 0.72);
  cursor: default;
  backdrop-filter: blur(2px);
}

.ho-sheet {
  position: static;
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-left: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--paper);
  box-shadow: -28px 0 64px rgba(0, 0, 0, 0.48);
  animation: ho-sheet-in 220ms var(--ease) both;
}

@keyframes ho-sheet-in {
  from { transform: translateX(24px); opacity: 0.3; }
  to { transform: translateX(0); opacity: 1; }
}

.ho-sheet__head {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.ho-sheet__close {
  min-height: 38px;
  appearance: none;
  padding: 7px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--muted-strong);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 650;
}

.ho-sheet__form {
  display: grid;
  align-content: start;
  gap: 22px;
  padding: 24px 22px calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto;
}

.ho-sheet__intro {
  margin: 0;
  color: var(--muted-strong);
  font-size: 0.86rem;
}

.ho-field {
  display: grid;
  gap: 7px;
}

.ho-field__label {
  color: var(--muted-strong);
  font-size: 0.78rem;
  font-weight: 650;
}

.ho-field__optional { color: var(--muted); font-weight: 400; }
.ho-field__hint { color: var(--muted); font-size: 0.73rem; }

.ho-field input,
.ho-field textarea,
.ho-combobox input {
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--deep-control, #07090d);
  color: var(--ink);
  font: inherit;
}

.ho-field textarea { resize: vertical; line-height: 1.45; }
.ho-field input:focus-visible,
.ho-field textarea:focus-visible,
.ho-combobox input:focus-visible { border-color: var(--blue-strong); outline: 3px solid var(--focus); outline-offset: 2px; }

.ho-sheet__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ho-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.ho-toggle > span:first-child { display: grid; gap: 2px; }
.ho-toggle strong { color: var(--ink); font-size: 0.84rem; }
.ho-toggle small { max-width: 40ch; color: var(--muted); font-size: 0.73rem; }
.ho-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.ho-toggle__track {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #303744;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}

.ho-toggle__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--inverse-white);
  transition: transform 160ms var(--ease);
}

.ho-toggle input:checked + .ho-toggle__track { border-color: var(--blue); background: var(--blue); }
.ho-toggle input:checked + .ho-toggle__track::after { transform: translateX(18px); }
.ho-toggle input:focus-visible + .ho-toggle__track { outline: 3px solid var(--focus); outline-offset: 3px; }

.ho-sheet__economics {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-warm);
}

.ho-sheet__economics > strong { color: var(--ink); font-size: 0.8rem; }
.ho-sheet__economics dl { display: grid; gap: 8px; margin: 12px 0 0; }
.ho-sheet__economics dl > div { display: flex; justify-content: space-between; gap: 16px; }
.ho-sheet__economics dt { color: var(--muted); font-size: 0.75rem; }
.ho-sheet__economics dd { margin: 0; color: var(--ink); font-size: 0.77rem; font-weight: 650; }

.ho-sheet__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.ho-personas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ho-persona { min-width: 0; margin: 0; }
.ho-persona__button {
  display: grid;
  width: 100%;
  min-height: 210px;
  align-content: start;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), transform 160ms var(--ease);
}

.ho-persona__button:hover { border-color: var(--blue); background: #181e29; transform: translateY(-1px); }
.ho-persona__button:active { transform: translateY(1px); }
.ho-persona__kind { color: var(--requested); font-size: 0.7rem; font-weight: 700; }
.ho-persona__name { margin-top: 5px; color: var(--ink); font-family: "DSN Archivo", "Segoe UI", sans-serif; font-size: 1.05rem; font-weight: 720; }
.ho-persona__money { display: grid; margin-top: 12px; color: var(--ink); font-family: "DSN Archivo", "Segoe UI", sans-serif; font-size: 1.45rem; font-variant-numeric: tabular-nums; letter-spacing: -0.035em; line-height: 1.05; }
.ho-persona__money small { margin-top: 3px; color: var(--muted); font-family: "Segoe UI", sans-serif; font-size: 0.68rem; font-weight: 400; letter-spacing: 0; }
.ho-persona__stats { color: var(--muted); font-size: 0.73rem; }
.ho-persona__action { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); color: var(--blue-strong); font-size: 0.78rem; font-weight: 650; }
.ho-persona__action .icon { width: 16px; height: 16px; transform: rotate(-90deg); }

.ho-finder {
  display: grid;
  grid-template-columns: minmax(190px, 0.6fr) minmax(0, 1.4fr);
  gap: 28px;
  margin-top: 6px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-warm);
}

.ho-finder__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.ho-combobox { position: relative; display: grid; gap: 7px; }
.ho-combobox > label { color: var(--muted-strong); font-size: 0.76rem; font-weight: 650; }
.ho-combobox input { background: var(--surface); }
.ho-combobox__empty { margin: 0; padding: 12px; color: var(--muted); font-size: 0.78rem; }
.ho-combobox__hint { margin: 0; color: var(--muted); font-size: 0.72rem; }

/* Search results and the performance panel. A result is an identity and a
   state; the figures arrive only once one is chosen. */
.ho-finder__results { display: grid; gap: 8px; margin-top: 14px; }
.ho-finder__results:empty { display: none; }

.ho-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; }
.ho-result:hover { border-color: var(--blue); background: #181e29; }
.ho-result:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ho-result__body { display: grid; gap: 2px; min-width: 0; }
.ho-result__body strong { color: var(--ink); font-size: 0.86rem; }
.ho-result__body small { color: var(--muted); font-size: 0.7rem; font-variant-numeric: tabular-nums; }

.ho-detail { margin-top: 18px; padding: 18px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--paper); }
.ho-detail[hidden] { display: none; }
.ho-detail__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px; }
.ho-detail__context { color: var(--requested); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ho-detail__head h3 { margin: 4px 0 0; color: var(--ink); font-family: "DSN Archivo", "Segoe UI", sans-serif; font-size: 1.2rem; font-weight: 720; }
.ho-detail__reference { margin: 4px 0 0; color: var(--muted); font-size: 0.74rem; font-variant-numeric: tabular-nums; }

.ho-detail__figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 18px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--line); overflow: hidden; }
.ho-detail__figures > div { display: grid; gap: 4px; padding: 12px 14px; background: var(--surface); }
.ho-detail__figures dt { color: var(--muted); font-size: 0.7rem; font-weight: 600; }
.ho-detail__figures dd { margin: 0; color: var(--ink); font-family: "DSN Archivo", "Segoe UI", sans-serif; font-size: 1.05rem; font-variant-numeric: tabular-nums; font-weight: 720; }

.ho-detail__states { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.ho-detail__history { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.ho-detail__history h4 { margin: 0; color: var(--ink); font-size: 0.88rem; font-weight: 700; }
.ho-detail__history-note { margin: 4px 0 12px; color: var(--muted); font-size: 0.74rem; }
.ho-detail__weeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ho-detail__week { display: grid; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ho-detail__week.is-quiet { opacity: 0.62; }
.ho-detail__week-label { color: var(--muted); font-size: 0.68rem; }
.ho-detail__week strong { color: var(--ink); font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.ho-detail__week small { color: var(--muted); font-size: 0.68rem; }

@media (max-width: 760px) {
  .ho-detail__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ho-detail__weeks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ho-operations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ho-operation {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 18px;
  min-height: 86px;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  text-decoration: none;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), transform 160ms var(--ease);
}

.ho-operation:hover { border-color: var(--blue); background: #181e29; transform: translateY(-1px); }
.ho-operation:active { transform: translateY(1px); }
.ho-operation__mark { background: #202632; color: var(--muted-strong); }
.ho-operation__body strong { color: var(--ink); font-size: 0.86rem; }
.ho-operation__arrow { width: 17px; height: 17px; color: var(--muted); transform: rotate(-90deg); }


@media (max-width: 1120px) {
  .ho-overview__layout { grid-template-columns: 1fr; }
  .ho-status-board { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
  .ho-status-row:nth-child(odd) { border-right: 1px solid var(--line); }
  .ho-status-row:nth-last-child(-n + 2) { border-bottom: 0; }
  .ho-personas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .ho-tabs-shell { top: 65px; margin-inline: -18px; padding-inline: 18px; }
  .ho-tabs { border-radius: 0; border-right: 0; border-left: 0; }
  .ho-tab { flex: 0 0 auto; min-width: max-content; }
  .ho-discount-grid { grid-template-columns: 1fr; }
  .ho-operations { grid-template-columns: 1fr; }
  .ho-finder { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 620px) {
  .ho-tabs-shell { margin-inline: -15px; padding-inline: 15px; }
  .ho-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .ho-tab { min-width: 0; width: 100%; padding-inline: 10px; }
  .ho-overview { border-radius: 14px; }
  .ho-overview__heading { min-height: 76px; padding: 13px 15px; cursor: pointer; }
  .ho-overview__description { display: none; }
  .ho-overview__mobile-summary { display: block; }
  .ho-overview__updated { display: none; }
  .ho-overview__toggle { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; color: var(--blue-strong); font-size: 0.73rem; font-weight: 680; }
  .ho-overview__toggle span::before { content: "Show"; }
  .ho-overview[open] .ho-overview__toggle span::before { content: "Hide"; }
  .ho-overview__toggle .icon { width: 14px; height: 14px; transform: rotate(90deg); transition: transform 160ms var(--ease); }
  .ho-overview[open] .ho-overview__toggle .icon { transform: rotate(-90deg); }
  .ho-metric { padding: 19px 16px; }
  .ho-metric__value { font-size: 1.75rem; }
  .ho-status-board { grid-template-columns: 1fr; }
  .ho-status-row,
  .ho-status-row:nth-child(odd) { border-right: 0; border-bottom: 1px solid var(--line); }
  .ho-status-row:last-child { border-bottom: 0; }
  .ho-status-row__body strong { overflow: visible; line-height: 1.25; text-overflow: clip; white-space: normal; }
  .ho-panel { gap: 16px; padding-top: 22px; }
  .ho-section-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .ho-control-card { min-height: 0; align-items: stretch; flex-direction: column; gap: 22px; padding: 20px; }
  .ho-control-card > .btn { width: 100%; }
  .ho-discount-card__head,
  .ho-discount-card__foot { padding: 16px; }
  .ho-discount-card__foot { align-items: flex-start; flex-direction: column; }
  .ho-discount-card__foot .btn { width: 100%; }
  .ho-discount-price { padding-inline: 16px; }
  .ho-discount-facts { padding-inline: 16px; }
  .ho-personas { display: flex; gap: 12px; margin-inline: -15px; padding-inline: 15px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ho-personas::-webkit-scrollbar { display: none; }
  .ho-persona { flex: 0 0 min(82vw, 310px); scroll-snap-align: start; }
  .ho-persona__button { min-height: 206px; }
  .ho-finder { padding: 18px; }
  .ho-finder__form { grid-template-columns: 1fr; }
  .ho-finder__form > .btn { width: 100%; }
  .ho-operation { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 14px; }
  .ho-operation__mark { width: 38px; height: 38px; }
  .ho-operation__arrow { display: none; }
  .ho-sheet-layer { grid-template-columns: 1fr; }
  .ho-sheet-layer__backdrop { display: none; }
  .ho-sheet { border-left: 0; }
  .ho-sheet__head { min-height: 72px; padding: 14px 16px; }
  .ho-sheet__form { padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); }
  .ho-sheet__pair { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .ho-metric { min-height: 116px; }
  .ho-metric__label { font-size: 0.69rem; }
  .ho-metric__note { font-size: 0.69rem; }
  .ho-status-row { grid-template-columns: 8px minmax(0, 1fr) auto; gap: 9px; padding-inline: 13px; }
  .ho-discount-facts { grid-template-columns: 1fr; }
  .ho-discount-facts > div,
  .ho-discount-facts > div:nth-child(odd),
  .ho-discount-facts > div:nth-child(even) { padding: 11px 0; border-right: 0; border-bottom: 1px solid var(--line); border-left: 0; }
  .ho-discount-facts > div:last-child { border-bottom: 0; }
  .ho-discount-empty { min-height: 220px; padding: 24px 18px; }
  .ho-operation .ho-badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ho-panel,
  .ho-sheet { animation: none; }
  .ho-persona__button,
  .ho-operation { transition: none; }
}