/* Guided request forms (js/office-form.js): one question per screen, big touch targets. Used inside the Admin Hub and the public Team Hub page,
   which do not share colour tokens, so the form carries its own and falls back to the host page's where it has them. */
.office-form {
  --of-text: var(--text, #f6f7f8);
  --of-muted: var(--muted, #9da5b0);
  --of-line: var(--line, #343a43);
  --of-surface: rgba(255, 255, 255, 0.06);
  --of-accent: #4b8df0;
  --of-danger: #ff7b72;
  display: grid;
  gap: 14px;
  max-width: 640px;
  margin: 0 auto;
  color: var(--of-text);
  font-family: inherit;
}
.office-form-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--of-surface);
  overflow: hidden;
}
.office-form-progress i {
  display: block;
  height: 100%;
  background: var(--of-accent);
  border-radius: inherit;
  transition: width 0.25s var(--of-ease-out);
}
.office-form-count {
  margin: 0;
  color: var(--of-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.office-form-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
}
.office-form-help {
  margin: -6px 0 0;
  color: var(--of-muted);
  font-size: 15px;
  line-height: 1.4;
}
.office-form-field {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.office-form-field legend {
  padding: 0;
}
.office-form-label {
  font-size: 15px;
  font-weight: 700;
}
.office-form-label small {
  color: var(--of-muted);
  font-weight: 600;
}
.office-form-input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--of-line);
  border-radius: 14px;
  background: var(--of-surface);
  color: inherit;
  font: inherit;
  font-size: 18px;
}
.office-form-input:focus {
  outline: 2px solid var(--of-accent);
  outline-offset: 1px;
}
textarea.office-form-input {
  min-height: 110px;
  resize: vertical;
}
.office-form-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.office-form-tile {
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid var(--of-line);
  border-radius: 14px;
  background: var(--of-surface);
  color: inherit;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.office-form-tile:active {
  transform: scale(0.98);
}
.office-form-tile.is-on {
  border-color: var(--of-accent);
  background: rgba(75, 141, 240, 0.22);
}
.office-form-other-date {
  margin-top: 2px;
}
.office-form-error {
  margin: 0;
  color: var(--of-danger);
  font-size: 14px;
  font-weight: 700;
}
.office-form-actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  margin-top: 6px;
}
.office-form-back,
.office-form-next {
  min-height: 54px;
  border-radius: 999px;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}
.office-form-back {
  border: 1px solid var(--of-line);
  background: transparent;
  color: inherit;
}
.office-form-next {
  border: 0;
  background: var(--of-accent);
  color: #fff;
}
.office-form-next:disabled {
  opacity: 0.4;
  cursor: default;
}
.office-form-actions [hidden] {
  display: none;
}
.office-form-actions:has([hidden]) {
  grid-template-columns: 1fr;
}
.office-form-review {
  display: grid;
  gap: 8px;
}
.office-form-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid var(--of-line);
  border-radius: 14px;
  background: var(--of-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.office-form-row span {
  grid-column: 1;
  color: var(--of-muted);
  font-size: 13px;
  font-weight: 700;
}
.office-form-row b {
  grid-column: 1;
  font-size: 17px;
}
.office-form-row em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--of-accent);
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
}
.office-form-sent {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 18px 0;
  text-align: center;
}
.office-form-sent > b {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(63, 185, 80, 0.2);
  color: #3fb950;
  font-size: 34px;
}
.office-form-ref {
  margin: 0;
  padding: 8px 22px;
  border: 1px dashed var(--of-line);
  border-radius: 12px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;
}
.office-form-sent .office-form-next {
  width: 100%;
  max-width: 320px;
  margin-top: 8px;
}
.office-form-fields {
  display: grid;
  gap: 14px;
}
.office-form-counter {
  display: grid;
  grid-template-columns: 1fr 52px 76px 52px;
  align-items: center;
  gap: 8px;
}
.office-form-counter span {
  font-size: 17px;
  font-weight: 700;
}
.office-form-counter .office-form-input {
  min-height: 52px;
  padding: 0 6px;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
}
.office-form-step {
  min-width: 52px;
  min-height: 52px;
  border: 1px solid var(--of-line);
  border-radius: 14px;
  background: var(--of-surface);
  color: inherit;
  font: inherit;
  font-size: 24px;
  font-weight: 800;
  cursor: pointer;
}
.office-form-step:active {
  transform: scale(0.95);
}
.office-form-total {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border: 1px solid var(--of-line);
  border-radius: 14px;
  background: var(--of-surface);
}
.office-form-total b {
  font-size: 30px;
  font-weight: 900;
}
.office-form-gap {
  font-size: 15px;
  font-weight: 800;
}
.office-form-gap.is-ok {
  color: #3fb950;
}
.office-form-gap.is-off {
  color: #e4a72b;
}
/* Bills on the left, coins on the right when there is room, so a whole count fits on an iPad without scrolling. */
@media (min-width: 560px) {
  .office-form-fields:has(.office-form-counter) {
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
  }
}
.office-form-again {
  width: 100%;
  max-width: 320px;
  min-height: 54px;
  border: 1px solid var(--of-line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}
.office-form-photo {
  display: grid;
  gap: 10px;
}
.office-form-photo img {
  display: block;
  width: 100%;
  max-height: 280px;
  border: 1px solid var(--of-line);
  border-radius: 14px;
  object-fit: contain;
  background: #000;
}
.office-form-photo-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.office-form-pick {
  display: grid;
  place-items: center;
  text-align: center;
}
.office-form-photo-note {
  min-height: 1.2em;
  margin: 0;
  color: var(--of-muted);
  font-size: 14px;
  font-weight: 700;
}
.office-form-tiles.is-list {
  grid-template-columns: 1fr;
}
.office-form-tile small {
  display: block;
  margin-top: 2px;
  color: var(--of-accent);
  font-size: 12px;
  font-weight: 800;
}
.office-form-tile.is-suggested {
  border-color: var(--of-accent);
}

/* ---- Change fund count: number pad + one tile per bill or coin ---- */
.office-form-fields.is-denom {
  max-width: none;
}
.office-denom {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 760px) {
  .office-denom {
    grid-template-columns: 1fr;
  }
}
.office-denom-entry {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.office-denom-readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 112px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--office-surface);
  font-size: 56px;
}
.office-denom-readout b {
  display: flex;
  justify-content: center;
}
.office-denom-readout small {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.office-denom-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.office-denom-pad button {
  min-height: 62px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--office-surface);
  color: var(--text);
  font: inherit;
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
}
.office-denom-pad button.is-quiet {
  color: var(--muted);
  font-size: 17px;
}
.office-denom-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.office-denom-tile {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas:
    "art amount"
    "art count";
  align-items: center;
  column-gap: 10px;
  min-height: 62px;
  padding: 6px 14px;
  border: 2px solid var(--denom);
  border-radius: 14px;
  background: color-mix(in srgb, var(--denom) 8%, transparent);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  --denom: #3fb97d;
}
.office-denom-tile.is-coin {
  --denom: #d4a63a;
}
.office-denom-tile:not(.has-count) {
  border-color: color-mix(in srgb, var(--denom) 40%, transparent);
}
.office-denom-art {
  grid-area: art;
  width: 52px;
  height: 30px;
}
.office-denom-tile b {
  grid-area: amount;
  align-self: end;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.office-denom-tile small {
  grid-area: count;
  align-self: start;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.office-denom-readout {
  position: relative;
}
.office-denom-readout small.is-error {
  color: #e5484d;
  font-weight: 800;
}
/* The count gets the whole screen: total on top, pad on the left, every bill and coin on the right, Back and Next always in view. */
.office-dialog:has(.office-denom) {
  display: flex;
  flex-direction: column;
  width: min(1120px, 100%);
  height: calc(100dvh - 32px);
  overflow: hidden;
}
.office-dialog:has(.office-denom) > header {
  flex: none;
}
.office-dialog:has(.office-denom) [data-body] {
  flex: 1 1 auto;
  min-height: 0;
}
.office-form:has(.office-denom) {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  max-width: none;
  height: 100%;
}
.office-form:has(.office-denom) .office-form-fields {
  min-height: 0;
}
.office-denom-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.office-denom-head .office-form-total {
  min-width: 280px;
  padding: 8px 16px;
}
.office-denom-head .office-form-total b {
  font-size: 28px;
}
.office-denom {
  height: 100%;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  align-items: stretch;
}
.office-denom-entry {
  min-height: 0;
}
.office-denom-readout {
  flex: none;
  min-height: 104px;
}
.office-denom-pad {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-rows: repeat(4, minmax(48px, 1fr)) auto;
}
.office-denom-pad button {
  min-height: 48px;
}
.office-denom-clear {
  grid-column: 1 / -1;
  min-height: 44px !important;
  font-size: 16px !important;
}
.office-denom-readout small.is-error {
  color: #e5484d;
  font-weight: 800;
}
@media (max-width: 700px) {
  .office-dialog:has(.office-denom) {
    overflow-y: auto;
  }
  .office-form:has(.office-denom),
  .office-denom {
    height: auto;
  }
  .office-denom {
    grid-template-columns: 1fr;
  }
}
.office-denom-tiles {
  grid-template-rows: repeat(5, minmax(60px, 1fr));
}
.office-denom-tile {
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 14px;
  min-height: 0;
}
.office-denom-art {
  width: 64px;
  height: 36px;
}
.office-denom-tile b {
  font-size: 24px;
  white-space: nowrap;
}
.office-denom-tile small {
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .office-denom-tile {
    grid-template-columns: 50px minmax(0, 1fr);
    column-gap: 10px;
    padding: 6px 10px;
  }
  .office-denom-art {
    width: 50px;
    height: 29px;
  }
  .office-denom-tile b {
    font-size: 20px;
  }
}

/* ---- Tills and the concessions switch ---- */
.office-till-note {
  grid-column: 1 / -1;
  margin-top: -2px;
  color: var(--of-muted);
  font-size: 14px;
  font-weight: 700;
}
.office-form-field.is-switch {
  display: grid;
  gap: 12px;
}
.office-form-switch {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 8px 16px;
  border: 1px solid var(--of-line);
  border-radius: 16px;
  background: var(--of-surface);
  color: var(--of-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.office-form-switch i {
  position: relative;
  flex: none;
  width: 58px;
  height: 34px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--of-muted) 40%, transparent);
  transition: background 0.15s;
}
.office-form-switch i::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
.office-form-switch.is-on {
  border-color: var(--of-accent);
}
.office-form-switch.is-on i {
  background: var(--of-accent);
}
.office-form-switch.is-on i::after {
  transform: translateX(24px);
}
.office-form-switch b {
  font-size: 17px;
  font-weight: 800;
}

/* ---- The total at the bottom, with the parts it is made of ---- */
.office-form-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  padding: 10px 16px;
}
.office-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.office-sum i {
  color: var(--of-muted);
  font-size: 20px;
  font-style: normal;
  font-weight: 800;
}
.office-sum-part,
.office-sum-total {
  display: grid;
  gap: 1px;
}
.office-sum small {
  color: var(--of-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.office-sum b {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.office-sum-part.is-zero b {
  color: var(--of-muted);
  font-weight: 700;
}
.office-sum-total b {
  font-size: 28px;
}
.office-form-total .office-form-gap {
  font-size: 15px;
  font-weight: 800;
}

/* ---- The count window is narrower, and money not counted yet is greyed out ---- */
.office-dialog:has(.office-denom) {
  width: min(900px, 100%);
}
.office-denom {
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
}
.office-denom-head {
  display: block;
}
.office-denom-tile:not(.has-count) {
  filter: grayscale(1);
  opacity: 0.5;
  border-color: var(--of-line);
  background: transparent;
}
.office-denom-tile:not(.has-count) b {
  color: var(--of-muted);
}

/* ---- Till cards ---- */
.office-form-fields:has(.office-till-card) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.office-form-fields:has(.office-till-card) .office-form-field.is-switch {
  grid-column: 1 / -1;
}
.office-till-card {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 16px 14px 14px;
  border: 2px solid var(--of-line);
  border-radius: 20px;
  background: var(--of-surface);
  text-align: center;
}
.office-till-icon svg {
  width: 56px;
  height: 36px;
  fill: color-mix(in srgb, var(--of-accent) 22%, transparent);
  stroke: var(--of-accent);
  stroke-width: 2.4;
  stroke-linejoin: round;
}
.office-till-name {
  font-size: 20px;
  font-weight: 800;
}
.office-till-each {
  color: var(--of-muted);
  font-size: 14px;
  font-weight: 700;
}
.office-till-stepper {
  display: grid;
  grid-template-columns: 64px minmax(80px, 110px) 64px;
  align-items: center;
  gap: 10px;
  margin: 8px 0 2px;
}
.office-till-stepper .office-form-step {
  min-width: 0;
  min-height: 64px;
}
.office-till-stepper .office-form-input {
  min-height: 64px;
  font-size: 30px;
  text-align: center;
}
.office-till-card .office-till-note {
  margin: 0;
  color: var(--of-text);
  font-size: 15px;
  font-weight: 800;
}

/* Keep Back and Next in view when a step is taller than the window. */
.office-form-actions {
  position: sticky;
  bottom: -18px;
  z-index: 2;
  margin: 0 -2px;
  padding: 8px 2px 4px;
  background: linear-gradient(to bottom, transparent, var(--panel, #181a1f) 24%);
}
.office-till-icon svg {
  width: 44px;
  height: 30px;
}
.office-till-card {
  padding: 12px 12px 10px;
}
.office-till-stepper .office-form-step,
.office-till-stepper .office-form-input {
  min-height: 56px;
}

/* The Concessions/Catering amount slides in beside its switch, so the screen is always the same size and never scrolls. */
.office-form-field.is-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
.office-form-field.is-switch .office-form-switch {
  flex: 1 1 0;
  min-width: 0;
}
.office-reveal {
  flex: none;
  width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(16px);
  transition:
    width 0.32s var(--of-ease-out),
    margin-left 0.32s var(--of-ease-out),
    opacity 0.26s var(--of-ease-out),
    transform 0.32s var(--of-ease-out);
}
.office-reveal.is-open {
  width: min(300px, 42%);
  margin-left: 12px;
  opacity: 1;
  transform: none;
}
.office-reveal .office-form-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 60px;
  font-size: 22px;
  font-weight: 800;
}
.office-form-field.is-switch > .office-form-error {
  flex: 1 1 100%;
}
@media (prefers-reduced-motion: reduce) {
  .office-reveal {
    transition: none;
  }
}

/* A form window is pinned near the top, so opening a section inside it grows the window downward and nothing above moves. */
.office-overlay:has(.office-form):not(:has(.office-denom)) {
  align-items: start;
  padding-top: 6vh;
}
.office-overlay:has(.office-form):not(:has(.office-denom)) .office-dialog {
  max-height: calc(100dvh - 6vh - 16px);
}

/* The tills screen is one fixed size: the switch row never changes height when the amount slides in, and short screens drop the extras. */
.office-form-field.is-switch .office-form-switch {
  min-height: 88px;
}
.office-form-field.is-switch .office-form-switch b {
  font-size: 16px;
}
@media (max-height: 820px) {
  .office-overlay:has(.office-till-card) {
    padding-top: 3vh;
  }
  .office-overlay:has(.office-till-card) .office-dialog {
    max-height: calc(100dvh - 3vh - 12px);
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .office-dialog:has(.office-till-card) .office-form-help,
  .office-dialog:has(.office-till-card) .office-till-icon {
    display: none;
  }
  .office-dialog:has(.office-till-card) .office-form {
    gap: 8px;
  }
  .office-dialog:has(.office-till-card) .office-form-switch {
    min-height: 76px;
  }
  .office-dialog:has(.office-till-card) .office-reveal .office-form-input {
    min-height: 52px;
  }
}

/* The concessions amount box: labelled, with a dollar sign. */
.office-money {
  display: grid;
  gap: 2px;
  min-height: 60px;
  padding: 6px 14px 4px;
  border: 1px solid var(--of-line);
  border-radius: 14px;
  background: var(--of-surface);
}
.office-money-tag {
  color: var(--of-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.office-money-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.office-money-row i {
  color: var(--of-muted);
  font-size: 22px;
  font-style: normal;
  font-weight: 800;
}
.office-money .office-form-input {
  min-height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 22px !important;
}
.office-form-gaps {
  display: grid;
  gap: 2px;
}
.office-sum {
  gap: 4px 10px;
}
.office-sum b {
  font-size: 18px;
}
.office-sum-total b {
  font-size: 26px;
}

/* Two switches (Concessions Change Fund, Other), each with its amount sliding in beside it. */
.office-reveal-row {
  display: flex;
  gap: 10px;
}
.office-reveal-row .office-money {
  flex: 1 1 0;
  min-width: 0;
}
.office-fund-name {
  flex: 1.3 1 0;
  min-width: 0;
  min-height: 60px;
  font-size: 18px;
}
.office-reveal.has-name.is-open {
  width: min(560px, 64%);
}
.office-form-field.is-switch .office-form-switch,
.office-dialog:has(.office-till-card) .office-form-switch {
  min-height: 64px;
}
.office-form-field.is-switch .office-form-switch b {
  font-size: 17px;
}
.office-form-fields:has(.office-till-card) {
  row-gap: 10px;
}

/* The tills screen is as wide as the count screen, so the whole equation fits on one line. */
.office-dialog:has(.office-till-card) {
  width: min(900px, 100%);
}
.office-dialog:has(.office-till-card) .office-sum {
  flex-wrap: nowrap;
}
.office-dialog:has(.office-till-card) .office-form-total {
  flex-direction: column;
  align-items: stretch;
}
@media (max-height: 820px) {
  .office-dialog:has(.office-till-card) .office-till-card {
    padding: 8px 12px 6px;
  }
  .office-dialog:has(.office-till-card) .office-till-stepper .office-form-step,
  .office-dialog:has(.office-till-card) .office-till-stepper .office-form-input {
    min-height: 48px;
  }
  .office-dialog:has(.office-till-card) .office-form-switch {
    min-height: 56px;
  }
  .office-dialog:has(.office-till-card) .office-money,
  .office-dialog:has(.office-till-card) .office-fund-name {
    min-height: 52px;
  }
  .office-dialog:has(.office-till-card) .office-form-title {
    font-size: 22px;
  }
}

.office-form:has(.office-till-card) {
  max-width: none;
}

/* The grand total is the number people look for. */
.office-sum-total b {
  font-size: 38px;
  line-height: 1;
}
.office-sum-total small {
  font-size: 13px;
}

/* ---- The change fund count: a fixed window, an equation that never moves, steps that slide over it, a review the equation grows into ---- */
.office-overlay:has([data-eq-shell]) {
  align-items: center;
  padding-top: 16px;
}
.office-dialog:has([data-eq-shell]) {
  display: flex;
  flex-direction: column;
  width: min(900px, 100%);
  height: min(calc(100dvh - 32px), 780px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}
.office-dialog:has([data-eq-shell]) [data-body] {
  flex: 1 1 auto;
  min-height: 0;
}
.office-form.is-eq,
.office-form.is-eq:has(.office-denom),
.office-form.is-eq:has(.office-till-card) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: none;
  height: 100%;
}
.office-eq-stage {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  transition:
    flex-grow 0.5s var(--of-ease-out),
    opacity 0.3s var(--of-ease-out);
}
.office-eq-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 2px;
}
.office-eq-page .office-form-fields {
  flex: 1 1 auto;
  min-height: 0;
}
.office-eq-page.in-right {
  animation: eq-in-right 0.4s var(--of-ease-out) both;
}
.office-eq-page.in-left {
  animation: eq-in-left 0.4s var(--of-ease-out) both;
}
.office-eq-page.out-left {
  animation: eq-out-left 0.4s var(--of-ease-out) both;
}
.office-eq-page.out-right {
  animation: eq-out-right 0.4s var(--of-ease-out) both;
}
@keyframes eq-in-right {
  from {
    transform: translateX(110%);
  }
}
@keyframes eq-in-left {
  from {
    transform: translateX(-110%);
  }
}
@keyframes eq-out-left {
  to {
    transform: translateX(-35%);
    opacity: 0;
  }
}
@keyframes eq-out-right {
  to {
    transform: translateX(35%);
    opacity: 0;
  }
}
.office-eq-bar {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  min-height: 0;
  transition: flex-grow 0.5s var(--of-ease-out);
}
.office-eq-bar .office-form-total {
  flex: none;
}
.office-eq-review {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.35s var(--of-ease-out) 0.2s;
}
.office-form.is-eq.is-review .office-eq-stage {
  flex-grow: 0;
  opacity: 0;
  pointer-events: none;
}
.office-form.is-eq.is-review .office-eq-bar {
  flex: 1 1 auto;
}
.office-form.is-eq.is-review .office-eq-review {
  opacity: 1;
}
.office-eq-lines {
  display: grid;
  gap: 6px;
  padding: 10px 2px 2px;
}
.office-eq-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 6px 14px;
  border: 1px solid var(--of-line);
  border-radius: 12px;
  background: var(--of-surface);
  color: var(--of-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.office-eq-line span {
  color: var(--of-muted);
  font-weight: 700;
}
.office-eq-line b {
  font-variant-numeric: tabular-nums;
}
.office-eq-line em {
  color: var(--of-accent);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}
.office-eq-review .office-form-help {
  margin: 10px 2px 0;
}
.office-sum-part.is-pending {
  opacity: 0.28;
}
.office-form.is-eq .office-form-actions {
  position: static;
  margin: 0;
  padding: 0;
  background: none;
}
.office-form.is-eq .office-form-actions[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .office-eq-page,
  .office-eq-stage,
  .office-eq-bar,
  .office-eq-review {
    animation: none !important;
    transition: none !important;
  }
}

/* The window and the equation are the same size on every step (these win over the per-screen sizes above). */
.office-overlay.office-overlay:has([data-eq-shell]) {
  align-items: center;
  padding-top: 16px;
}
.office-overlay .office-dialog.office-dialog:has([data-eq-shell]) {
  width: min(900px, 100%);
  height: min(calc(100dvh - 32px), 780px);
  max-height: calc(100dvh - 32px);
  padding: 14px 18px 14px;
  overflow: hidden;
}
.office-form.is-eq .office-form-actions {
  min-height: 54px;
}
.office-form.is-eq .office-form-actions[hidden] {
  display: grid;
  visibility: hidden;
}
.office-eq-bar .office-form-gaps {
  min-height: 0;
  align-content: start;
  transition: min-height 0.35s var(--of-ease-out);
}
.office-eq-bar .office-form-gaps.is-open {
  min-height: 44px;
}

/* Choice tiles (the leader pick) keep their normal height instead of stretching to fill the page. */
.office-eq-page .office-form-tiles {
  align-content: start;
  grid-auto-rows: minmax(64px, auto);
}
.office-eq-page .office-form-fields:not(.is-denom):not(:has(.office-till-card)) {
  flex: 0 0 auto;
}

/* ---- Laptop density for the forms (a mouse, not a finger) ---- */
@media (hover: hover) and (pointer: fine) {
  .office-form {
    gap: 10px;
  }
  .office-form-title {
    font-size: 21px;
  }
  .office-form-help {
    font-size: 14px;
  }
  .office-form-back,
  .office-form-next {
    min-height: 44px;
    font-size: 15px;
  }
  .office-form.is-eq .office-form-actions {
    min-height: 44px;
  }
  .office-overlay .office-dialog.office-dialog:has([data-eq-shell]) {
    width: min(800px, 100%);
    height: min(calc(100dvh - 32px), 700px);
    padding: 12px 16px;
  }
  .office-till-card {
    gap: 2px;
    padding: 8px 12px 8px;
    border-radius: 14px;
  }
  .office-till-icon svg {
    width: 36px;
    height: 24px;
  }
  .office-till-name {
    font-size: 16px;
  }
  .office-till-each {
    font-size: 13px;
  }
  .office-till-stepper {
    grid-template-columns: 44px minmax(64px, 88px) 44px;
    gap: 8px;
    margin: 4px 0 0;
  }
  .office-till-stepper .office-form-step,
  .office-till-stepper .office-form-input {
    min-height: 42px;
  }
  .office-till-stepper .office-form-input {
    font-size: 22px;
  }
  .office-till-card .office-till-note {
    font-size: 13px;
  }
  .office-form-field.is-switch .office-form-switch,
  .office-dialog:has(.office-till-card) .office-form-switch {
    min-height: 50px;
    padding: 4px 14px;
    border-radius: 14px;
  }
  .office-form-switch i {
    width: 46px;
    height: 27px;
  }
  .office-form-switch i::after {
    top: 3px;
    left: 3px;
    width: 21px;
    height: 21px;
  }
  .office-form-switch.is-on i::after {
    transform: translateX(19px);
  }
  .office-form-field.is-switch .office-form-switch b {
    font-size: 15px;
  }
  .office-money,
  .office-fund-name,
  .office-reveal .office-form-input {
    min-height: 50px !important;
  }
  .office-money .office-form-input {
    min-height: 28px !important;
    font-size: 18px !important;
  }
  .office-money-row i {
    font-size: 18px;
  }
  .office-fund-name {
    font-size: 16px;
  }
  .office-sum b {
    font-size: 15px;
  }
  .office-sum-total b {
    font-size: 30px;
  }
  .office-sum small {
    font-size: 11px;
  }
  .office-form-total {
    padding: 8px 14px;
  }
  .office-eq-bar .office-form-gaps.is-open {
    min-height: 38px;
  }
  .office-form-total .office-form-gap {
    font-size: 13px;
  }
  .office-denom-readout {
    min-height: 84px;
    font-size: 44px;
  }
  .office-denom-readout small {
    font-size: 13px;
  }
  .office-denom-pad {
    gap: 6px;
  }
  .office-denom-pad button {
    min-height: 38px;
    font-size: 22px;
  }
  .office-denom-clear {
    min-height: 36px !important;
    font-size: 14px !important;
  }
  .office-denom-tiles {
    gap: 6px;
  }
  .office-denom-tile {
    grid-template-columns: 50px minmax(0, 1fr);
    column-gap: 10px;
    padding: 4px 10px;
    border-radius: 12px;
  }
  .office-denom-art {
    width: 50px;
    height: 29px;
  }
  .office-denom-tile b {
    font-size: 19px;
  }
  .office-denom-tile small {
    font-size: 12px;
  }
  .office-eq-line {
    min-height: 38px;
    padding: 4px 12px;
    font-size: 14px;
  }
}

/* The total's colour says how the count stands: white while short, green on the number, red over (and red when short on the last page). */
.office-sum-total.is-exact b {
  color: #3fb950;
}
.office-sum-total.is-over b,
.office-sum-total.is-short b {
  color: #e5484d;
}
.office-eq-confirm {
  margin: 12px 2px 4px;
  padding: 12px 14px;
  border: 1px solid #e5484d;
  border-radius: 12px;
  background: color-mix(in srgb, #e5484d 10%, transparent);
  font-weight: 700;
}

/* Money keeps its money colours before it is counted: a little dimmer, not grey. */
.office-denom-tile:not(.has-count) {
  filter: none;
  opacity: 0.68;
  border-color: color-mix(in srgb, var(--denom) 38%, transparent);
  background: color-mix(in srgb, var(--denom) 4%, transparent);
}
.office-denom-tile:not(.has-count) .office-denom-art {
  opacity: 0.92;
}
.office-denom-tile:not(.has-count) b {
  color: var(--of-text);
}
.office-denom-tile:not(.has-count) .office-denom-name,
.office-denom-tile:not(.has-count) small {
  color: var(--of-muted);
}

/* The equation fades in after the leader is picked (the space stays, so nothing else shifts). */
.office-eq-bar {
  transition:
    flex-grow 0.5s var(--of-ease-out),
    opacity 0.6s var(--of-ease-out),
    transform 0.6s var(--of-ease-out),
    visibility 0s;
}
.office-form.is-eq.is-intro .office-eq-bar {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
  transition:
    flex-grow 0.5s var(--of-ease-out),
    opacity 0.3s var(--of-ease-out),
    transform 0.3s var(--of-ease-out),
    visibility 0s 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  .office-eq-bar {
    transition: none !important;
  }
}

/* ---- One colour per part of the equation, used lightly: a dot and underline in the equation, the till cards, the switches and the review lines ---- */
.office-form {
  --part-regular: #4b8df0;
  --part-mobile: #a468e8;
  --part-other: #e8618c;
  --part-bills: #3fb97d;
  --part-coins: #d4a63a;
}
[data-part="regular"] {
  --part: var(--part-regular);
}
[data-part="mobile"] {
  --part: var(--part-mobile);
}
[data-part="other"] {
  --part: var(--part-other);
}
[data-part="bills"] {
  --part: var(--part-bills);
}
[data-part="coins"] {
  --part: var(--part-coins);
}
.office-sum-part {
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s var(--of-ease-out);
}
.office-sum-part small::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--part);
  vertical-align: 1px;
}
.office-sum-part.is-current {
  border-bottom-color: var(--part);
}
.office-sum-part.is-current small {
  color: var(--part);
}
.office-till-card[data-part] {
  border-color: color-mix(in srgb, var(--part) 50%, var(--of-line));
}
.office-till-card[data-part] .office-till-icon svg {
  stroke: var(--part);
  fill: color-mix(in srgb, var(--part) 22%, transparent);
}
.office-form-field.is-switch[data-part] .office-form-switch.is-on {
  border-color: var(--part);
}
.office-form-field.is-switch[data-part] .office-form-switch.is-on i {
  background: var(--part);
}
.office-eq-line[data-part] {
  border-left: 4px solid var(--part);
}

/* The review lines do not need the whole width of the window. */
.office-eq-lines,
.office-eq-review .office-form-help,
.office-eq-review .office-eq-confirm {
  width: min(100%, 560px);
  margin-inline: auto;
}

/* ---- Next / Submit pills are the suite's classic yellow ---- */
.office-form-next {
  border-color: transparent;
  background: #e4a72b;
  color: #17191f;
  font-weight: 850;
  box-shadow: 0 2px 0 #8a6414;
}
.office-form-next:hover:not(:disabled) {
  background: #f2b93e;
}
.office-form-next:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #8a6414;
}
.office-form-next:disabled {
  background: color-mix(in srgb, #e4a72b 26%, var(--of-surface));
  color: color-mix(in srgb, #17191f 55%, var(--of-muted));
  box-shadow: none;
  opacity: 0.7;
  cursor: not-allowed;
}
.office-form-next.is-sure {
  background: #f2b93e;
  outline: 3px solid color-mix(in srgb, #e5484d 70%, transparent);
  outline-offset: 2px;
}

/* ---- The title is one size on every page, so it does not snap while a page slides in beside another ---- */
.office-overlay .office-dialog .office-eq-page .office-form-title {
  font-size: 24px;
}
@media (hover: hover) and (pointer: fine) {
  .office-overlay .office-dialog .office-eq-page .office-form-title {
    font-size: 21px;
  }
}

/* ---- The window never taller than the screen that is really visible ---- */
.office-overlay .office-dialog.office-dialog:has([data-eq-shell]) {
  height: min(calc(100dvh - 32px), 740px);
  height: min(calc(100svh - 32px), 740px);
  max-height: calc(100dvh - 32px);
  max-height: calc(100svh - 32px);
}
@media (hover: hover) and (pointer: fine) {
  .office-overlay .office-dialog.office-dialog:has([data-eq-shell]) {
    height: min(calc(100dvh - 32px), 700px);
    height: min(calc(100svh - 32px), 700px);
  }
}

/* ---- Review: the amounts themselves carry the colour (no dot), and each line is tinted ---- */
.office-form.is-eq.is-review .office-sum-part small::before {
  display: none;
}
.office-form.is-eq.is-review .office-sum-part small {
  color: color-mix(in srgb, var(--part) 80%, var(--of-muted));
}
.office-form.is-eq.is-review .office-sum-part b {
  padding: 1px 9px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--part) 24%, transparent);
  color: color-mix(in srgb, var(--part) 55%, #fff);
}
.office-form.is-eq.is-review .office-sum-part.is-zero b {
  background: transparent;
  color: var(--of-muted);
}
.office-form.is-eq.is-review .office-sum-part {
  border-bottom-color: transparent;
}
.office-eq-line[data-part] {
  border-color: color-mix(in srgb, var(--part) 45%, transparent);
  border-left-width: 6px;
  background: color-mix(in srgb, var(--part) 12%, var(--of-surface));
}
.office-eq-line[data-part] span {
  color: color-mix(in srgb, var(--part) 65%, #fff);
}
.office-eq-line[data-part] b {
  color: color-mix(in srgb, var(--part) 50%, #fff);
}

/* ---- Guest Recovery: the HEARD strip, the intro cards, the open calendar, the name on one line ---- */
.office-form {
  --heard-red: #e5484d;
}
.office-heard {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.office-heard-step {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--of-line);
  border-radius: 12px;
  color: var(--of-muted);
  line-height: 1.15;
  transition:
    background 0.3s var(--of-ease-out),
    border-color 0.3s var(--of-ease-out),
    color 0.3s var(--of-ease-out);
}
.office-heard-step b {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 900;
}
.office-heard-step span {
  min-width: 0;
  font-size: 12px;
}
.office-heard-step strong {
  display: block;
  font-size: 13px;
}
.office-heard-step small {
  font-size: 11px;
  font-weight: 600;
}
.office-heard-step.is-on {
  border-color: var(--heard-red);
  background: color-mix(in srgb, var(--heard-red) 16%, transparent);
  color: var(--of-text);
}
.office-heard-step.is-on b {
  border-color: var(--heard-red);
  background: var(--heard-red);
  color: #fff;
}
.office-heard-step.is-done {
  border-color: color-mix(in srgb, var(--heard-red) 40%, transparent);
  color: color-mix(in srgb, var(--heard-red) 55%, var(--of-muted));
}
.office-heard-step.is-done b {
  background: color-mix(in srgb, var(--heard-red) 20%, transparent);
}
.office-heard-cards {
  display: grid;
  gap: 10px;
}
.office-heard-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 2px solid var(--heard-red);
  border-radius: 16px;
  background: color-mix(in srgb, var(--heard-red) 10%, transparent);
}
.office-heard-card b {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--heard-red);
  color: #fff;
  font-size: 26px;
  font-weight: 900;
}
.office-heard-card strong {
  display: block;
  font-size: 18px;
}
.office-heard-card p {
  margin: 2px 0 0;
  color: var(--of-muted);
  font-size: 15px;
}
.office-dialog:has(.office-cal) {
  width: min(900px, 100%);
}
.office-form-fields:has(.office-cal) {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
  align-items: start;
  gap: 14px 26px;
}
.office-form-fields:has(.office-cal) > .office-cal {
  grid-row: span 4;
}
@media (max-width: 760px) {
  .office-form-fields:has(.office-cal) {
    grid-template-columns: 1fr;
  }
  .office-form-fields:has(.office-cal) > .office-cal {
    grid-row: auto;
  }
}
.office-cal {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--of-line);
  border-radius: 16px;
  background: var(--of-surface);
}
.office-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.office-cal-head b {
  font-size: 17px;
}
.office-cal-head button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--of-line);
  border-radius: 50%;
  background: transparent;
  color: var(--of-text);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.office-cal-head button:disabled {
  opacity: 0.3;
  cursor: default;
}
.office-cal-week,
.office-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.office-cal-week span {
  color: var(--of-muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.office-cal-day {
  height: 42px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--of-text);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.office-cal-day:disabled {
  color: var(--of-muted);
  opacity: 0.35;
  cursor: default;
}
.office-cal-day.is-today {
  border-color: color-mix(in srgb, #e4a72b 70%, transparent);
}
.office-cal-day.is-on {
  border-color: transparent;
  background: #e4a72b;
  color: #17191f;
  font-weight: 850;
}
.office-form-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* On the details screen the five places a mistake can happen sit two to a row, so the whole screen fits without scrolling. */
.office-form-fields:has(.office-cal) .office-form-tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.office-form-fields:has(.office-cal) .office-form-tile {
  min-height: 44px;
  padding: 6px 10px;
}
.office-form-fields:has(.office-cal) .office-cal-day {
  height: 36px;
}

/* Room between a question and the answers under it, everywhere in the form */
.office-form-field {
  gap: 14px;
}
.office-form-field legend {
  padding: 0 0 14px;
}

/* A list the leader works through reads as check boxes, not buttons */
.office-form-tile.is-check {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-align: left;
}
.office-check-box {
  flex: none;
  position: relative;
  width: 28px;
  height: 28px;
  border: 2px solid var(--of-muted);
  border-radius: 8px;
  transition:
    background 0.15s var(--of-ease-out),
    border-color 0.15s var(--of-ease-out);
}
.office-form-tile.is-check.is-on .office-check-box {
  border-color: var(--of-accent);
  background: var(--of-accent);
}
.office-form-tile.is-check.is-on .office-check-box::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 3px;
  width: 7px;
  height: 14px;
  border: solid #17191f;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.office-form-field {
  gap: 20px;
}
.office-form-field legend {
  padding-bottom: 20px;
}

/* A guided call keeps one window size from the first screen to the last; Back and Next stay at the bottom */
.office-dialog:has(.office-heard, .office-heard-hold) {
  display: flex;
  flex-direction: column;
  height: min(710px, calc(100dvh - 6vh - 16px));
}
.office-dialog:has(.office-heard, .office-heard-hold) > header {
  flex: none;
}
.office-dialog:has(.office-heard, .office-heard-hold) [data-body] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.office-form:has(.office-heard, .office-heard-hold) {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.office-form:has(.office-heard, .office-heard-hold) .office-form-actions {
  margin-top: auto;
}
.office-form-sent.office-heard-hold {
  flex: 1 1 auto;
  justify-content: center;
}
.office-form-sent.office-heard-hold {
  align-content: center;
}
.office-form-sent.office-heard-hold .office-form-next {
  flex: none;
  align-self: center;
  width: min(320px, 100%);
  height: 54px;
}

/* Guest Recovery: no progress bar (the HEARD strip shows where the call is); the five places a mistake can happen sit three to a row */
.office-form:has(.office-heard) .office-form-progress {
  display: none;
}
.office-form-fields:has(.office-cal) .office-form-tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.office-form-fields:has(.office-cal) .office-form-tile {
  min-height: 40px;
  padding: 6px 4px;
  font-size: 14px;
  line-height: 1.15;
}

/* Guest Recovery: centered text in the mistake-by buttons, slimmer review lines */
.office-form-fields:has(.office-cal) .office-form-tile {
  text-align: center;
}
.office-form:has(.office-heard) .office-form-row {
  min-height: 0;
  gap: 0 12px;
  padding: 6px 14px;
  border-radius: 12px;
}
.office-form:has(.office-heard) .office-form-row span {
  font-size: 12px;
  line-height: 1.2;
}
.office-form:has(.office-heard) .office-form-row b {
  font-size: 16px;
  line-height: 1.25;
}
.office-form:has(.office-heard) .office-form-review {
  gap: 6px;
}

/* ---- The guided call: strip and buttons stay put, each screen slides over the stage, the window never changes size ---- */
.office-dialog:has(.office-heard) {
  width: min(900px, 100%);
}
.office-form.is-heard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: none;
  height: 100%;
  min-height: 0;
}
.office-form.is-heard .office-eq-page {
  gap: 14px;
}
.office-form.is-heard .office-eq-page .office-form-fields {
  flex: 0 0 auto;
}
.office-form.is-heard .office-heard {
  transition: opacity 0.3s var(--of-ease-out);
}
.office-form.is-heard.is-sent .office-heard {
  opacity: 0;
}
.office-form.is-heard .office-eq-page > .office-form-sent {
  margin: auto;
}
.office-form.is-heard .office-form-actions {
  flex: none;
  margin-top: 0;
}

/* Back and Next sit side by side; a hidden button takes no space in the row */
.office-form.is-heard .office-form-actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}
.office-form.is-heard .office-form-actions [hidden] {
  display: none !important;
}
.office-form.is-heard .office-form-actions:has([data-back][hidden]) {
  grid-template-columns: 1fr;
}

/* A choice with a line of explanation under each option: stacked cards, title over small text */
.office-form-tiles.is-stack {
  grid-template-columns: 1fr;
  gap: 12px;
}
.office-form-tiles.is-stack .office-form-tile {
  display: grid;
  gap: 4px;
  min-height: 0;
  padding: 18px 20px;
  border-radius: 16px;
  text-align: left;
}
.office-form-tiles.is-stack .office-form-tile b {
  font-size: 19px;
  font-weight: 800;
}
.office-form-tiles.is-stack .office-form-tile .office-tile-detail {
  margin: 0;
  color: var(--of-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.office-form-field legend:empty {
  display: none;
}

/* The stacked choices are centred cards, 40% of the space available */
.office-form-tiles.is-stack {
  justify-items: center;
}
.office-form-tiles.is-stack .office-form-tile {
  width: 40%;
  min-width: 260px;
  text-align: center;
}

/* The stacked cards are as wide as their longest line (up to three quarters of the space), all the same width, and centred */
.office-form-tiles.is-stack {
  grid-template-columns: fit-content(75%);
  justify-content: center;
}
.office-form-tiles.is-stack .office-form-tile {
  width: 100%;
  min-width: 260px;
}

/* The Logged screen: the window gives up its X and shrinks to fit a check mark, the word and one button */
.office-dialog:has(.office-heard) {
  transition:
    width 0.45s var(--of-ease-out),
    height 0.45s var(--of-ease-out);
}
.office-dialog:has(.is-heard.is-sent) {
  width: min(420px, 100%);
  height: min(300px, calc(100dvh - 6vh - 16px));
}
.office-dialog:has(.is-heard.is-sent) > header [data-close] {
  display: none;
}
.office-form.is-heard.is-sent .office-heard {
  display: none;
}

/* A costed form's review: the items as priced lines, then what is owed */
.office-cost {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}
.office-cost h3 {
  margin: 6px 0 0;
  font-size: 15px;
  letter-spacing: 0.3px;
}
.office-cost-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--of-line);
  border-radius: 14px;
  background: var(--of-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.office-cost-line span {
  font-weight: 700;
}
.office-cost-line small {
  margin-left: 8px;
  color: var(--of-muted);
  font-weight: 700;
}
.office-cost-line b {
  white-space: nowrap;
}
.office-cost-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, #e4a72b 18%, transparent);
  border: 1px solid color-mix(in srgb, #e4a72b 55%, transparent);
  font-size: 18px;
  font-weight: 850;
}
.office-cost-total.is-free {
  background: color-mix(in srgb, #3fb950 18%, transparent);
  border-color: color-mix(in srgb, #3fb950 55%, transparent);
}

/* The item list of an order form: one row per item, then its size and quantity on their own screen */
.office-cart-list {
  display: grid;
  gap: 8px;
}
.office-cart-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--of-line);
  border-radius: 16px;
  background: var(--of-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.2s var(--of-ease-out),
    background 0.2s var(--of-ease-out);
}
.office-cart-row.is-on {
  border-color: #e4a72b;
  background: color-mix(in srgb, #e4a72b 10%, var(--of-surface));
}
.office-cart-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.office-cart-main b {
  font-size: 17px;
}
.office-cart-main small {
  color: var(--of-muted);
  font-size: 13px;
  font-weight: 650;
}
.office-cart-add {
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 14px;
  font-weight: 850;
}
.office-cart-price {
  font-size: 16px;
  font-weight: 850;
  white-space: nowrap;
}
.office-cart-qty {
  display: flex;
  align-items: center;
  gap: 14px;
}
.office-cart-qty button {
  width: 52px;
  height: 52px;
  border: 1px solid var(--of-line);
  border-radius: 16px;
  background: var(--of-surface);
  color: inherit;
  font: inherit;
  font-size: 26px;
  cursor: pointer;
}
.office-cart-qty button:disabled {
  opacity: 0.35;
  cursor: default;
}
.office-cart-qty b {
  min-width: 32px;
  font-size: 26px;
  text-align: center;
}
.office-cart-line-price {
  margin-left: auto;
  color: var(--of-muted);
  font-weight: 750;
}
.office-cart-remove {
  align-self: start;
  padding: 8px 14px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, #e5484d 18%, transparent);
  color: #ff6b70;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

/* Two columns of items, so the list fits a landscape iPad without scrolling */
.office-cart-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.office-cart-row {
  padding: 11px 14px;
}
.office-cart-main b {
  font-size: 16px;
  line-height: 1.2;
}

/* The priced lines sit two to a row, so a full order still fits a landscape iPad */
.office-cost-lines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.office-cost-line {
  padding: 9px 12px;
  font-size: 15px;
}
.office-cost-line span {
  min-width: 0;
}

/* Toggles: a short choice as a segmented switch, beside the name */
.office-toggle {
  display: flex;
  padding: 4px;
  border: 1px solid var(--of-line);
  border-radius: 16px;
  background: var(--of-surface);
  gap: 4px;
}
.office-toggle-btn {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--of-muted);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.2s var(--of-ease-out),
    color 0.2s var(--of-ease-out);
}
.office-toggle-btn.is-on {
  background: var(--of-accent);
  color: #fff;
}
.office-toggle-field {
  gap: 8px;
}
.office-toggle-field legend {
  padding-bottom: 8px;
}
/* Dropdowns on an item's screen */
.office-cart-select {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--of-line);
  border-radius: 14px;
  background: var(--of-surface);
  color: inherit;
  font: inherit;
  font-size: 17px;
}
.office-cart-select:disabled {
  opacity: 0.45;
}
.office-cart-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* The suite's dropdown, dressed for the forms (it is also used on the public Team Hub page, which has no other sheet for it) */
.office-form .custom-select,
.office-form .cfa-select {
  position: relative;
  border: 1px solid var(--of-line);
  border-radius: 14px;
  background: var(--of-surface);
  color: inherit;
  padding: 0;
}
.office-form .cfa-select > button {
  min-height: 52px;
  padding: 0 14px;
  font-size: 17px;
}
.office-form .custom-select-options {
  position: absolute;
  left: 0;
  z-index: 60;
  display: none;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--of-line);
  border-radius: 14px;
  background: var(--panel, #1c1f26);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}
.office-form .custom-select.open .custom-select-options {
  display: block;
}
.office-form .custom-select-option {
  min-height: 48px;
  font-size: 16px;
}
.office-form .cfa-select button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* The screen a team member shows a leader after sending a priced order */
.office-received {
  width: 100%;
  gap: 10px;
}
.office-received .office-form-next {
  width: min(320px, 100%);
}

/* ---- An order form keeps one window size from the first screen to the last; Back and Next stay at the bottom ---- */
.office-dialog:has(.office-form.is-costed) {
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  height: min(720px, calc(100dvh - 6vh - 16px));
}
.office-dialog:has(.office-form.is-costed) > header {
  flex: none;
}
.office-dialog:has(.office-form.is-costed) [data-body] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.office-form.is-costed {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.office-form.is-costed .office-form-actions {
  margin-top: auto;
}
.office-form.is-costed .office-form-sent {
  flex: 1 1 auto;
  align-content: center;
}

/* ---- More details: each switch is as wide as its choices, with its label beside it ---- */
.office-toggle-field {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 4px 14px;
}
.office-toggle-field .office-form-label {
  color: var(--of-muted);
  font-size: 14px;
}
.office-toggle-field .office-toggle {
  width: max-content;
  max-width: 100%;
  flex-wrap: wrap;
}
.office-toggle-field .office-toggle-btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 18px;
  font-size: 15px;
}
.office-toggle-field .office-form-error {
  grid-column: 1 / -1;
}
@media (max-width: 560px) {
  .office-toggle-field {
    grid-template-columns: 1fr;
  }
}

/* ---- The item list, App Store style ---- */
.office-form.is-costed .office-cart-list {
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
  overflow-y: auto;
}
.office-cart-row {
  min-height: 72px;
}
.office-cart-main small.office-cart-cost {
  color: #3fb950;
  font-weight: 800;
}
.office-cart-get {
  flex: none;
  min-width: 78px;
  padding: 9px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--of-accent) 22%, transparent);
  color: var(--of-accent);
  font-size: 16px;
  font-weight: 850;
  text-align: center;
}
.office-cart-get.is-free {
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.office-cart-added {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, #3fb950 22%, transparent);
  color: #3fb950;
  font-size: 15px;
  font-weight: 850;
}
.office-cart-added i {
  font-style: normal;
}
.office-cart-hint {
  margin: 0;
  color: var(--of-muted);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 560px) {
  .office-cart-list {
    grid-template-columns: 1fr;
  }
}

/* A free item still to be taken, and one that is already on the order for you */
.office-cart-row.is-needed {
  border-color: var(--of-accent);
  box-shadow: 0 0 0 1px var(--of-accent);
}
.office-cart-row.is-locked {
  cursor: default;
}
.office-cart-hint.is-warn {
  color: #e4a72b;
}

/* ---- One item: its name, what it costs you, a size picker of chips, and a quantity card ---- */
.office-cart-head {
  display: grid;
  gap: 8px;
  justify-items: start;
}
.office-cart-pill {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--of-muted);
  font-size: 13px;
  font-weight: 800;
}
.office-cart-pill.is-free {
  background: color-mix(in srgb, #3fb950 20%, transparent);
  color: #3fb950;
}
.office-cart-group legend {
  padding: 0 0 10px;
}
.office-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 76px);
  gap: 10px;
}
.office-chip-grid.is-wide {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.office-size-chip {
  height: 52px;
  padding: 0 10px;
  border: 1.5px solid var(--of-line);
  border-radius: 14px;
  background: var(--of-surface);
  color: inherit;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.15s var(--of-ease-out),
    border-color 0.15s var(--of-ease-out),
    box-shadow 0.15s var(--of-ease-out);
}
.office-size-chip.is-on {
  border-color: var(--of-accent);
  background: var(--of-accent);
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--of-accent) 38%, transparent);
}
.office-cart-qtycard {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 16px 16px;
  border: 1px solid var(--of-line);
  border-radius: 18px;
  background: var(--of-surface);
}
.office-cart-qtycard .office-form-label {
  justify-self: start;
}
.office-cart-qtycard .office-cart-qty {
  justify-content: center;
  gap: 26px;
}
.office-cart-qtycard .office-cart-qty button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 28px;
}
.office-cart-qtycard .office-cart-qty b {
  min-width: 56px;
  font-size: 38px;
  line-height: 1;
}
.office-cart-qtycard .office-cart-line-price {
  margin: 0;
  color: var(--of-muted);
  font-size: 16px;
  font-weight: 800;
}
.office-cart-qtycard .office-cart-line-price.is-free {
  color: #3fb950;
}
.office-cart-remove {
  justify-self: center;
}

/* ---- Fit: a pill with a highlight that slides to the choice ---- */
.office-slide-pill {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--of-line);
  border-radius: 999px;
  background: var(--of-surface);
}
.office-slide-btn {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--of-muted);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: color 0.25s var(--of-ease-out);
}
.office-slide-btn.is-on {
  color: #fff;
}
.office-slide-thumb {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  background: var(--of-accent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--of-accent) 40%, transparent);
  opacity: 0;
  pointer-events: none;
}
.office-slide-thumb.is-ready {
  transition:
    left 0.32s var(--of-ease-out),
    width 0.32s var(--of-ease-out),
    opacity 0.2s var(--of-ease-out);
}

/* ---- Numbers on a dial: slide sideways, tap, use the arrows, the arrow keys or the mouse wheel ---- */
.office-dials {
  display: grid;
  gap: 12px;
}
.office-dial-hint {
  margin: 0;
  padding: 18px 12px;
  border: 1px dashed var(--of-line);
  border-radius: 16px;
  color: var(--of-muted);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.office-dial {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 8px;
  outline: none;
}
.office-dial:focus-visible .office-dial-window {
  box-shadow: 0 0 0 2px var(--of-accent);
}
.office-dial-window {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--of-line);
  border-radius: 18px;
  background: var(--of-surface);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.office-dial-track {
  display: flex;
  padding: 6px calc(50% - var(--dial-item, 68px) / 2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.office-dial-track::-webkit-scrollbar {
  display: none;
}
.office-dial-item {
  flex: none;
  width: var(--dial-item, 68px);
  height: var(--dial-h, 52px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--of-muted);
  font: inherit;
  font-size: 24px;
  font-weight: 800;
  scroll-snap-align: center;
  cursor: pointer;
  opacity: calc(1 - var(--d, 0) * 0.26);
  transform: scale(calc(1 - var(--d, 0) * 0.11));
}
.office-dial-item.is-on {
  color: inherit;
  font-weight: 900;
}
.office-dial-mark {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 50%;
  width: var(--dial-item, 68px);
  margin-left: calc(var(--dial-item, 68px) / -2);
  border: 2px dashed var(--of-line);
  border-radius: 14px;
  pointer-events: none;
  transition:
    border-color 0.2s var(--of-ease-out),
    background 0.2s var(--of-ease-out);
}
.office-dial.is-set .office-dial-mark {
  border: 2px solid var(--of-accent);
  background: color-mix(in srgb, var(--of-accent) 16%, transparent);
}
.office-dial-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--of-line);
  border-radius: 50%;
  background: var(--of-surface);
  color: var(--of-accent);
  cursor: pointer;
  transition:
    background 0.15s var(--of-ease-out),
    transform 0.15s var(--of-ease-out);
}
.office-dial-arrow:hover {
  background: color-mix(in srgb, var(--of-accent) 18%, transparent);
}
.office-dial-arrow:active {
  transform: scale(0.92);
}
.office-dial-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Dials stay compact, and the form never scrolls sideways */
.office-form.is-costed,
.office-form.is-costed .office-form-fields {
  overflow-x: clip;
}
.office-dial {
  max-width: 380px;
}
.office-dial-track {
  overscroll-behavior: contain;
  touch-action: pan-x;
}

/* With dials, the quantity card sits beside them instead of below */
.office-form-fields:has(.office-dials) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  align-items: stretch;
  gap: 14px;
}
.office-form-fields:has(.office-dials) > * {
  grid-column: 1 / -1;
}
.office-form-fields:has(.office-dials) > .office-dials {
  grid-column: 1;
}
.office-form-fields:has(.office-dials) > .office-cart-qtycard {
  grid-column: 2;
  align-content: center;
  padding: 12px;
}
.office-form-fields:has(.office-dials) .office-cart-qtycard .office-cart-qty {
  gap: 10px;
}
.office-form-fields:has(.office-dials) .office-cart-qtycard .office-cart-qty button {
  width: 44px;
  height: 44px;
  font-size: 24px;
}
.office-form-fields:has(.office-dials) .office-cart-qtycard .office-cart-qty b {
  min-width: 36px;
  font-size: 32px;
}

/* Item screen polish: one label style, even gaps, dials fill their column, pill segments equal */
.office-cart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.office-cart-head .office-form-title {
  margin: 0;
}
.office-form-fields:has(.office-dials) {
  gap: 18px 14px;
}
.office-form-fields:has(.office-dials) .office-form-label {
  display: block;
  color: var(--of-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.office-form-fields:has(.office-dials) > .office-form-field,
.office-dial-field {
  display: grid;
  gap: 8px;
}
.office-form-fields:has(.office-dials) .office-slide-pill {
  display: flex;
  width: 100%;
}
.office-form-fields:has(.office-dials) .office-slide-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 8px;
  white-space: nowrap;
}
.office-dials {
  gap: 18px;
}
.office-dial {
  max-width: none;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 6px;
}
.office-dial-arrow {
  width: 44px;
  height: 44px;
}
.office-dial-item {
  height: var(--dial-h, 60px);
  font-size: 26px;
}
.office-dial-mark {
  top: 4px;
  bottom: 4px;
}
.office-form-fields:has(.office-dials) > .office-cart-qtycard {
  gap: 10px;
  padding: 14px 12px;
}
.office-form-fields:has(.office-dials) > .office-cart-qtycard .office-form-label {
  justify-self: center;
}

/* Reserve the height of two dials so choosing a fit never resizes the row */
.office-form-fields:has(.office-dials) > .office-dials {
  min-height: 212px;
  align-content: start;
}
.office-dials > .office-dial-hint {
  display: grid;
  align-content: center;
  min-height: 212px;
  box-sizing: border-box;
}

/* The quantity card keeps its natural height, centred beside the dials */
.office-form-fields:has(.office-dials) > .office-cart-qtycard {
  align-self: center;
}

/* A single dial (polo, coat sizes): reserve one dial's height, centred beside the quantity card */
.office-form-fields:has(.office-dials) > .office-dials.is-single {
  min-height: 97px;
  align-self: center;
  align-content: center;
}

/* The quantity card never changes size: the price line always takes two lines of room */
.office-cart-qtycard {
  box-sizing: border-box;
  min-height: 134px;
}
.office-cart-qtycard .office-cart-line-price {
  display: grid;
  place-items: center;
  min-height: 2.7em;
  line-height: 1.3;
  text-align: center;
}

/* A costed review fits without scrolling: short one-line rows, and the tagline sits in the amount box */
.office-form.is-costed .office-form-review {
  gap: 6px;
}
.office-form.is-costed .office-form-row {
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 0;
  padding: 8px 14px;
}
.office-form.is-costed .office-form-row span,
.office-form.is-costed .office-form-row b,
.office-form.is-costed .office-form-row em {
  grid-column: auto;
  grid-row: auto;
}
.office-form.is-costed .office-form-row b {
  font-size: 16px;
}
.office-form.is-costed .office-form-help {
  margin: 0;
}
.office-cost-total {
  flex-wrap: wrap;
}
.office-cost-note {
  flex-basis: 100%;
  margin-top: 2px;
  color: var(--of-muted);
  font-size: 13px;
  font-weight: 700;
}

/* The received screen of a priced order: who, how much, and what to do with this screen */
.office-received {
  gap: 10px;
}
.office-received .office-received-name {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}
.office-received-pay {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  justify-self: center;
  box-sizing: border-box;
  padding: 12px 40px 14px;
  border-radius: 20px;
  background: color-mix(in srgb, #e4a72b 20%, transparent);
  border: 2px solid color-mix(in srgb, #e4a72b 70%, transparent);
}
.office-received-pay.is-free {
  background: color-mix(in srgb, #3fb950 20%, transparent);
  border-color: color-mix(in srgb, #3fb950 70%, transparent);
}
.office-received-pay small {
  color: var(--of-muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.office-received-pay strong {
  font-size: 56px;
  font-weight: 900;
  line-height: 1.05;
}
.office-received .office-received-how {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--of-surface);
  border: 1px solid var(--of-line);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}
.office-received .office-received-items {
  margin: 0;
  color: var(--of-muted);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
.office-received-items small {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.office-received .office-received-ref {
  margin: 0;
  color: var(--of-muted);
  font-size: 12px;
  font-weight: 700;
}

/* The name sits beside its label like the switches, and only as wide as a name needs */
.office-form-field.office-inline-field {
  display: grid;
  grid-template-columns: 96px minmax(0, 340px);
  align-items: center;
  gap: 4px 14px;
}
.office-inline-field .office-form-label {
  color: var(--of-muted);
  font-size: 14px;
}
.office-inline-field .office-form-error {
  grid-column: 2;
}
@media (max-width: 560px) {
  .office-form-field.office-inline-field {
    grid-template-columns: 1fr;
  }
}

/* ---- Phones: everything on an order form is scaled down so each screen fits without scrolling ---- */
@media (max-width: 560px) {
  .office-dialog:has(.office-form.is-costed) {
    height: min(780px, calc(100dvh - 20px));
  }
  .office-form.is-costed {
    gap: 10px;
  }
  .office-form.is-costed .office-form-title {
    font-size: 21px;
  }
  .office-form.is-costed .office-form-help {
    margin: 0;
    font-size: 13px;
  }
  .office-form.is-costed .office-form-fields {
    gap: 12px;
  }
  .office-form.is-costed .office-form-input {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 16px;
  }
  .office-form.is-costed .office-form-label {
    font-size: 12px;
  }
  .office-toggle-field .office-toggle {
    width: 100%;
  }
  .office-toggle-field .office-toggle-btn {
    flex: 1 1 auto;
    min-height: 36px;
    padding: 0 12px;
    font-size: 14px;
  }
  .office-form.is-costed .office-form-actions button {
    min-height: 46px;
    font-size: 16px;
  }
  /* The list of items */
  .office-cart-row {
    min-height: 58px;
  }
  .office-cart-main b {
    font-size: 15px;
  }
  /* One item: the dials take the full width and the quantity sits under them as a single row */
  .office-form-fields:has(.office-dials) {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .office-form-fields:has(.office-dials) > .office-dials,
  .office-form.is-costed .office-cart-qtycard {
    grid-column: 1;
  }
  .office-form-fields:has(.office-dials) > .office-dials {
    min-height: 0;
    gap: 12px;
  }
  .office-dials > .office-dial-hint {
    min-height: 0;
  }
  .office-dial {
    --dial-item: 54px;
    --dial-h: 48px;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 4px;
  }
  .office-dial-arrow {
    width: 38px;
    height: 38px;
  }
  .office-dial-arrow svg {
    width: 18px;
    height: 18px;
  }
  .office-dial-item {
    font-size: 21px;
  }
  .office-form.is-costed .office-cart-qtycard {
    align-self: stretch;
    grid-template-columns: auto 1fr;
    justify-items: stretch;
    align-items: center;
    min-height: 0;
    padding: 10px 14px;
    gap: 2px 12px;
  }
  .office-form.is-costed .office-cart-qtycard .office-form-label {
    justify-self: start;
    grid-column: 1;
    grid-row: 1;
  }
  .office-form.is-costed .office-cart-qtycard .office-cart-qty {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
  }
  .office-form.is-costed .office-cart-qtycard .office-cart-line-price {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    justify-self: start;
    text-align: left;
    font-size: 13px;
  }
  .office-cart-head .office-form-title {
    font-size: 21px;
  }
  .office-cart-pill {
    font-size: 12px;
    padding: 4px 10px;
  }
  /* The review */
  .office-form.is-costed .office-form-row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 7px 12px;
  }
  .office-form.is-costed .office-form-row b {
    font-size: 14px;
  }
  .office-form.is-costed .office-form-row em {
    font-size: 12px;
  }
  .office-cost-lines {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .office-cost-line {
    padding: 8px 12px;
    font-size: 14px;
  }
  .office-cost-total {
    padding: 10px 14px;
    font-size: 16px;
  }
  /* The received screen */
  .office-received .office-received-name {
    font-size: 22px;
  }
  .office-received-pay strong {
    font-size: 44px;
  }
  .office-received .office-received-how {
    padding: 10px 12px;
    font-size: 14px;
  }
  .office-received .office-received-items {
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .office-form.is-costed .office-cart-list {
    gap: 6px;
  }
  .office-form.is-costed .office-cart-row {
    min-height: 0;
    padding: 7px 12px;
    gap: 8px;
  }
  .office-form.is-costed .office-cart-main {
    gap: 0;
  }
  .office-form.is-costed .office-cart-main small {
    font-size: 12px;
    line-height: 1.25;
  }
  .office-form.is-costed .office-cart-get,
  .office-form.is-costed .office-cart-added {
    min-width: 0;
    padding: 6px 12px;
    font-size: 14px;
  }
  .office-form.is-costed .office-cart-hint {
    margin: 0;
    font-size: 13px;
  }
}

@media (max-width: 560px) {
  .office-form.is-costed .office-review-help {
    display: none;
  }
  .office-form.is-costed .office-cost-line {
    padding: 6px 12px;
    font-size: 13px;
  }
  .office-form.is-costed .office-cost-note {
    font-size: 12px;
  }
  .office-form.is-costed .office-cost h3 {
    margin: 2px 0 0;
    font-size: 14px;
  }
  .office-form.is-costed .office-form-row {
    padding: 6px 12px;
  }
}

/* Back and Next stay in view at the bottom of the window, even when a screen has to scroll on a short phone */
.office-form.is-costed .office-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding-top: 8px;
  background: var(--card, #1a1c20);
  box-shadow: 0 -12px 10px -6px var(--card, #1a1c20);
}
/* Short phones: a little tighter again */
@media (max-width: 560px) and (max-height: 720px) {
  .office-dialog:has(.office-form.is-costed) {
    padding: 12px;
  }
  .office-form.is-costed {
    gap: 8px;
  }
  .office-form.is-costed .office-form-fields {
    gap: 8px;
  }
  .office-form.is-costed .office-form-title {
    font-size: 19px;
  }
  .office-toggle-field .office-toggle-btn {
    min-height: 32px;
    font-size: 13px;
  }
  .office-form.is-costed .office-form-input {
    min-height: 40px;
  }
  .office-form.is-costed .office-cart-row {
    padding: 5px 10px;
  }
  .office-form.is-costed .office-cost-line {
    padding: 4px 10px;
  }
  .office-form.is-costed .office-form-row {
    padding: 4px 10px;
  }
  .office-received-pay strong {
    font-size: 38px;
  }
}

/* Nothing on an item screen can be wider than the window, whatever the phone */
.office-form.is-costed .office-form-fields > *,
.office-dial-field,
.office-dial {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.office-form.is-costed .office-form-fields {
  min-width: 0;
}

@media (max-width: 560px) {
  .office-form.is-costed .office-cart-qtycard .office-cart-qty {
    gap: 8px;
  }
  .office-form.is-costed .office-cart-qtycard .office-cart-qty button {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  .office-form.is-costed .office-cart-qtycard .office-cart-qty b {
    min-width: 30px;
    font-size: 28px;
  }
}

/* ---- Phones: the HEARD strip keeps the letters and opens the current one ---- */
@media (max-width: 560px) {
  .office-heard {
    gap: 4px;
  }
  .office-heard-step {
    flex: 0 0 auto;
    gap: 6px;
    padding: 5px 7px;
  }
  .office-heard-step b {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }
  .office-heard-step span {
    display: none;
  }
  .office-heard-step.is-on {
    flex: 1 1 auto;
  }
  .office-heard-step.is-on span {
    display: block;
  }
  .office-heard-step small {
    display: none;
  }
}

@media (max-width: 560px) {
  .office-heard {
    justify-content: space-between;
  }
  /* When several letters are current at once (the intro cards), none of them has room for its word */
  .office-heard:has(.is-on + .is-on) .office-heard-step.is-on {
    flex: 0 0 auto;
  }
  .office-heard:has(.is-on + .is-on) .office-heard-step span {
    display: none;
  }
}

@media (max-width: 560px) {
  .office-form-fields:has(.office-cal) {
    gap: 10px;
  }
  .office-cal {
    gap: 4px;
    padding: 8px;
  }
  .office-form-fields:has(.office-cal) .office-cal-day {
    height: 30px;
    font-size: 14px;
  }
  .office-form-fields:has(.office-cal) .office-form-input {
    min-height: 42px;
  }
}

/* ---- Phones: the change fund count (tills as rows, the equation in a compact grid) ---- */
@media (max-width: 560px) {
  .office-form-fields:has(.office-till-card) {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .office-till-card {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: start;
    align-items: center;
    gap: 0 10px;
    padding: 8px 10px;
    text-align: left;
  }
  .office-till-card .office-till-icon {
    display: none;
  }
  .office-till-name {
    font-size: 16px;
  }
  .office-till-each {
    font-size: 12px;
  }
  .office-till-card .office-till-stepper {
    grid-column: 2;
    grid-row: 1 / span 2;
    grid-template-columns: 38px 52px 38px;
    gap: 6px;
    margin: 0;
  }
  .office-till-card .office-till-stepper .office-form-step,
  .office-till-card .office-till-stepper .office-form-input {
    min-height: 38px;
  }
  .office-till-card .office-till-stepper .office-form-input {
    font-size: 20px;
  }
  .office-till-card .office-till-note {
    grid-column: 1 / -1;
    margin-top: 2px;
    font-size: 12px;
    text-align: left;
  }
  .office-form-field.is-switch .office-form-switch,
  .office-dialog:has(.office-till-card) .office-form-switch {
    min-height: 46px;
  }
  .office-form-total .office-sum,
  .office-dialog:has(.office-till-card) .office-sum {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 8px;
    width: 100%;
  }
  .office-form-total .office-sum i,
  .office-dialog:has(.office-till-card) .office-sum i {
    display: none;
  }
  .office-form-total .office-sum b,
  .office-dialog:has(.office-till-card) .office-sum b {
    font-size: 15px;
  }
  .office-form-total .office-sum small {
    font-size: 10px;
  }
  .office-form-total .office-sum .office-sum-total {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }
  .office-form-total .office-sum .office-sum-total b,
  .office-dialog:has(.office-till-card) .office-sum-total b {
    font-size: 24px;
  }
}

@media (max-width: 560px) {
  .office-dialog:has(.office-till-card) .office-form-help {
    display: none;
  }
}

/* ---- Phones: the count screen is one column, the bills and coins in two rows of five ---- */
@media (max-width: 560px) {
  .office-dialog:has([data-eq-shell]) .office-denom,
  .office-form.is-eq:has(.office-denom) .office-denom {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    height: auto;
    gap: 8px;
    align-items: start;
  }
  .office-dialog:has([data-eq-shell]) .office-denom-entry {
    gap: 6px;
  }
  .office-dialog:has([data-eq-shell]) .office-denom-readout {
    min-height: 60px;
    padding: 6px 10px;
    font-size: 36px;
  }
  .office-dialog:has([data-eq-shell]) .office-denom-readout small {
    font-size: 11px;
  }
  .office-dialog:has([data-eq-shell]) .office-denom-pad {
    grid-template-rows: none;
    gap: 5px;
  }
  .office-dialog:has([data-eq-shell]) .office-denom-pad button {
    min-height: 36px;
    font-size: 20px;
  }
  .office-dialog:has([data-eq-shell]) .office-denom-clear {
    min-height: 32px !important;
    font-size: 13px !important;
  }
  .office-dialog:has([data-eq-shell]) .office-denom-tiles {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 5px;
  }
  .office-dialog:has([data-eq-shell]) .office-denom-tile {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "amount"
      "count";
    justify-items: center;
    column-gap: 0;
    padding: 4px 2px;
    min-height: 44px;
    text-align: center;
  }
  .office-dialog:has([data-eq-shell]) .office-denom-art {
    display: none;
  }
  .office-dialog:has([data-eq-shell]) .office-denom-tile b {
    align-self: center;
    font-size: 15px;
  }
  .office-dialog:has([data-eq-shell]) .office-denom-tile small {
    font-size: 11px;
  }
}

/* ---- Phones: a switch and its amount are stacked, with the amount's room always kept so nothing moves when it opens ---- */
@media (max-width: 560px) {
  .office-form-field.is-switch {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .office-form-field.is-switch .office-form-switch {
    min-height: 44px;
    padding: 4px 12px;
  }
  .office-form-field.is-switch .office-form-switch b {
    font-size: 15px;
  }
  .office-form-field.is-switch .office-reveal,
  .office-form-field.is-switch .office-reveal.is-open,
  .office-form-field.is-switch .office-reveal.has-name.is-open {
    width: 100%;
    margin: 0;
    overflow: visible;
    transform: none;
  }
  .office-form-field.is-switch .office-reveal-row {
    gap: 8px;
  }
  .office-form-field.is-switch .office-reveal .office-form-input,
  .office-form-field.is-switch .office-fund-name {
    min-height: 46px;
    font-size: 16px;
  }
  .office-form-field.is-switch .office-money {
    min-height: 46px;
    padding: 3px 10px 2px;
  }
  .office-form-field.is-switch .office-money .office-form-input {
    min-height: 26px !important;
    font-size: 18px !important;
  }
  .office-form-field.is-switch .office-money-tag {
    font-size: 10px;
  }
  .office-form-field.is-switch .office-money-row i {
    font-size: 18px;
  }
}

/* ---- Phones: avoid scrolling. The date step packs the calendar, the name and the five places into one screen ---- */
@media (max-width: 560px) {
  .office-form-fields:has(.office-cal) {
    gap: 8px;
  }
  .office-form-fields:has(.office-cal) .office-form-field {
    gap: 6px;
  }
  .office-form-fields:has(.office-cal) .office-cal {
    gap: 2px;
    padding: 6px 8px;
  }
  .office-form-fields:has(.office-cal) .office-cal-head {
    gap: 6px;
  }
  .office-form-fields:has(.office-cal) .office-cal-head button {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
  .office-form-fields:has(.office-cal) .office-cal-head b {
    font-size: 15px;
  }
  .office-form-fields:has(.office-cal) .office-cal-week,
  .office-form-fields:has(.office-cal) .office-cal-grid {
    gap: 2px;
  }
  .office-form-fields:has(.office-cal) .office-cal-day {
    height: 26px;
    font-size: 13px;
    border-radius: 8px;
  }
  .office-form-fields:has(.office-cal) .office-form-label {
    font-size: 13px;
  }
  .office-form-fields:has(.office-cal) .office-form-input {
    min-height: 38px;
  }
  .office-form-fields:has(.office-cal) .office-form-tile {
    min-height: 34px;
    font-size: 13px;
  }
  .office-form-fields:has(.office-cal) .office-form-tiles {
    gap: 6px;
  }
  /* The tills screen: a few pixels back */
  .office-till-card {
    padding: 6px 10px;
  }
  .office-form-fields:has(.office-till-card) {
    gap: 6px;
  }
}

@media (max-width: 560px) {
  .office-form-fields:has(.office-cal) .office-form-tiles {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }
  .office-form-fields:has(.office-cal) .office-form-tile {
    min-height: 40px;
    padding: 2px;
    font-size: 11px;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }
  .office-form-fields:has(.office-cal) .office-cal-day {
    height: 23px;
  }
  .office-form-fields:has(.office-cal) .office-form-input {
    min-height: 36px;
  }
  .office-form-fields:has(.office-cal) .office-form-field {
    gap: 4px;
  }
}

@media (max-width: 560px) {
  .office-form-fields:has(.office-cal) legend,
  .office-form-fields:has(.office-cal) .office-form-field legend {
    padding: 0 0 4px;
    margin: 0;
  }
  .office-form-fields:has(.office-cal) fieldset.office-form-field {
    gap: 0;
  }
  .office-form-fields:has(.office-cal) .office-cal-day {
    height: 22px;
  }
}

@media (max-width: 560px) {
  .office-form.is-eq {
    gap: 6px;
  }
  .office-eq-page {
    gap: 8px;
  }
  .office-eq-page .office-form-title {
    font-size: 20px;
  }
  .office-heard-step {
    padding: 3px 6px;
  }
}

@media (max-width: 560px) {
  .office-form-fields:has(.office-cal) .office-cal-day {
    height: 20px;
  }
  .office-form-fields:has(.office-cal) .office-form-input {
    min-height: 34px;
  }
}

/* ---- Short phones (667 high and under): the window uses nearly the whole screen, with a slimmer header ---- */
@media (max-width: 560px) and (max-height: 740px) {
  .office-overlay.office-overlay {
    padding: 6px 8px !important;
    align-items: stretch !important;
  }
  .office-overlay .office-dialog.office-dialog {
    height: calc(100dvh - 12px) !important;
    max-height: none !important;
    padding: 10px 12px !important;
  }
  .office-overlay .office-dialog > header {
    margin-bottom: 6px;
  }
  .office-overlay .office-dialog > header h3 {
    font-size: 17px;
  }
  .office-overlay .office-dialog > header .office-icon {
    width: 34px;
    height: 34px;
  }
  .office-form {
    gap: 8px;
  }
  /* The count screen */
  .office-dialog:has([data-eq-shell]) .office-denom-readout {
    min-height: 48px;
    font-size: 30px;
  }
  .office-dialog:has([data-eq-shell]) .office-denom-readout small {
    display: none;
  }
  .office-dialog:has([data-eq-shell]) .office-denom-pad {
    gap: 4px;
  }
  .office-dialog:has([data-eq-shell]) .office-denom-pad button {
    min-height: 30px;
    font-size: 18px;
  }
  .office-dialog:has([data-eq-shell]) .office-denom-clear {
    min-height: 28px !important;
  }
  .office-dialog:has([data-eq-shell]) .office-denom-tile {
    min-height: 38px;
    padding: 2px;
  }
  .office-dialog:has([data-eq-shell]) .office-denom-tile b {
    font-size: 14px;
  }
  /* The tills screen */
  .office-till-card {
    padding: 4px 10px;
  }
  .office-till-card .office-till-stepper .office-form-step,
  .office-till-card .office-till-stepper .office-form-input {
    min-height: 32px;
  }
  .office-till-card .office-till-stepper {
    grid-template-columns: 32px 46px 32px;
  }
  .office-form-field.is-switch {
    gap: 4px;
  }
  .office-form-field.is-switch .office-form-switch {
    min-height: 38px;
  }
  .office-form-field.is-switch .office-reveal .office-form-input,
  .office-form-field.is-switch .office-fund-name,
  .office-form-field.is-switch .office-money {
    min-height: 38px;
  }
  /* The sum bar: smaller */
  .office-form-total .office-sum small {
    font-size: 9px;
  }
  .office-form-total .office-sum b {
    font-size: 13px;
  }
  .office-form-total .office-sum .office-sum-total b {
    font-size: 20px;
  }
}

@media (max-width: 560px) and (max-height: 740px) {
  .office-till-card .office-till-note {
    display: none;
  }
  .office-form-fields:has(.office-cal) .office-cal-day {
    height: 18px;
  }
  .office-form-fields:has(.office-cal) .office-cal {
    padding: 4px 8px;
  }
  .office-form-fields:has(.office-cal) .office-form-tile {
    min-height: 34px;
  }
  .office-form-help:has(+ .office-form-review) {
    display: none;
  }
  .office-form-review {
    gap: 5px;
  }
  .office-form-review .office-form-row {
    min-height: 0;
    padding: 5px 12px;
  }
}

@media (max-width: 560px) and (max-height: 740px) {
  .office-form-fields:has(.office-cal) .office-form-tile {
    min-height: 30px;
  }
  .office-form-fields:has(.office-cal) .office-form-input {
    min-height: 32px;
  }
  .office-form-fields:has(.office-cal) .office-cal-head button {
    width: 24px;
    height: 24px;
  }
  .office-till-card {
    padding: 3px 10px;
  }
  .office-form-fields:has(.office-till-card) {
    gap: 4px;
  }
}

@media (max-width: 560px) and (max-height: 740px) {
  .office-form-fields:has(.office-cal) .office-cal-day {
    height: 17px;
  }
  .office-form-fields:has(.office-cal) .office-form-tile {
    min-height: 28px;
  }
}

@media (max-width: 560px) {
  .office-form-fields:has(.office-cal) .office-cal-day {
    height: 19px;
  }
}

/* ---- Phones: a bill or coin is just its picture until something is counted, then its amount and count ---- */
@media (max-width: 560px) {
  .office-dialog:has([data-eq-shell]) .office-denom-tile:not(.has-count) .office-denom-art {
    display: block;
    grid-area: 1 / 1 / 3 / 2;
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: 52px;
    height: auto;
  }
  .office-dialog:has([data-eq-shell]) .office-denom-tile:not(.has-count) b,
  .office-dialog:has([data-eq-shell]) .office-denom-tile:not(.has-count) small {
    display: none;
  }
}

/* Big tiles on a fixed-size form: the punches to fix are two across, the day choices three across */
.office-form.is-costed .office-form-tiles:not(:has([data-date])) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.office-form.is-costed .office-form-tiles:has([data-date]) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.office-form.is-costed .office-form-tile {
  min-height: 84px;
  font-size: 19px;
  font-weight: 800;
}
@media (max-width: 560px) {
  .office-form.is-costed .office-form-tiles:has([data-date]) {
    grid-template-columns: 1fr;
  }
  .office-form.is-costed .office-form-tiles {
    gap: 8px;
  }
  .office-form.is-costed .office-form-tile {
    min-height: 60px;
    font-size: 16px;
  }
}

/* ---- Missed time punch: each punch is a row; its time box slides in beside it once it is picked ---- */
.office-punches {
  display: grid;
  gap: 12px;
}
.office-punch {
  display: flex;
  align-items: stretch;
}
.office-punch-tile {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 0 18px;
  border: 1.5px solid var(--of-line);
  border-radius: 16px;
  background: var(--of-surface);
  color: inherit;
  font: inherit;
  font-size: 19px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.2s var(--of-ease-out),
    background 0.2s var(--of-ease-out);
}
.office-punch.is-on .office-punch-tile {
  border-color: var(--of-accent);
  background: color-mix(in srgb, var(--of-accent) 16%, transparent);
}
.office-punch .office-check-box {
  flex: none;
  position: relative;
  width: 24px;
  height: 24px;
  border: 2px solid var(--of-line);
  border-radius: 8px;
}
.office-punch.is-on .office-check-box {
  border-color: var(--of-accent);
  background: var(--of-accent);
}
.office-punch.is-on .office-check-box::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.office-punch-time {
  flex: none;
  width: 0;
  margin-left: 0;
  padding: 0;
  overflow: hidden;
  border: 0 solid transparent;
  border-radius: 16px;
  background: color-mix(in srgb, #e4a72b 20%, transparent);
  color: #e4a72b;
  font: inherit;
  font-size: 18px;
  font-weight: 850;
  white-space: nowrap;
  opacity: 0;
  cursor: pointer;
  transition:
    width 0.34s var(--of-ease-out),
    margin-left 0.34s var(--of-ease-out),
    opacity 0.25s var(--of-ease-out);
}
.office-punch.is-on .office-punch-time {
  width: 150px;
  margin-left: 10px;
  border-width: 1.5px;
  border-color: #e4a72b;
  opacity: 1;
}
.office-punch-time.is-set {
  background: #e4a72b;
  color: #231a05;
}
/* The numpad that slides up inside the window */
.office-dialog:has(.office-pad-scrim) {
  position: relative;
}
.office-pad-scrim {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0);
  transition: background 0.25s var(--of-ease-out);
}
.office-pad-scrim.is-open {
  background: rgba(0, 0, 0, 0.55);
}
.office-pad {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 18px 18px;
  border-radius: 22px 22px 0 0;
  background: var(--card, #1b1d22);
  border-top: 1px solid var(--line, #343a43);
  transform: translateY(100%);
  transition: transform 0.3s var(--of-ease-out);
}
.office-pad-scrim.is-open .office-pad {
  transform: none;
}
.office-pad-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  color: var(--muted, #9da5b0);
}
.office-pad-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 22px;
  cursor: pointer;
}
.office-pad-read {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 12px;
}
.office-pad-time {
  font-size: 44px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.office-pad-time em {
  font-style: normal;
}
.office-pad-time em.is-dim {
  color: var(--muted, #9da5b0);
  opacity: 0.55;
}
.office-pad-period {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line, #343a43);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}
.office-pad-period button {
  min-width: 64px;
  min-height: 46px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted, #9da5b0);
  font: inherit;
  font-size: 18px;
  font-weight: 850;
  cursor: pointer;
}
.office-pad-period button.is-on {
  background: #4b8df0;
  color: #fff;
}
.office-pad-keys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.office-pad-keys button {
  min-height: 58px;
  border: 1px solid var(--line, #343a43);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
}
.office-pad-keys button:active {
  transform: scale(0.96);
}
.office-pad-keys .is-quiet {
  color: var(--muted, #9da5b0);
  font-size: 22px;
}
.office-pad-keys .is-set {
  border: 0;
  background: #e4a72b;
  color: #231a05;
  font-size: 20px;
  font-weight: 850;
}
.office-pad-keys .is-set:disabled {
  opacity: 0.4;
  cursor: default;
}
@media (max-width: 560px) {
  .office-punch-tile {
    min-height: 56px;
    padding: 0 12px;
    gap: 10px;
    font-size: 16px;
  }
  .office-punch.is-on .office-punch-time {
    width: 118px;
    margin-left: 8px;
    font-size: 16px;
  }
  .office-pad {
    padding: 10px 12px 12px;
  }
  .office-pad-time {
    font-size: 36px;
  }
  .office-pad-keys button {
    min-height: 50px;
  }
}
@media (max-width: 560px) and (max-height: 740px) {
  .office-pad-keys {
    gap: 6px;
  }
  .office-pad-keys button {
    min-height: 44px;
    font-size: 22px;
  }
  .office-pad-read {
    margin: 4px 0 8px;
  }
}

/* ---- The day: Today, Yesterday or Other; Other slides a small calendar open ---- */
.office-dialog:has(.office-form.is-costed .office-cal) {
  width: min(680px, 100%);
}
.office-form.is-costed .office-form-fields:has(.office-cal-reveal) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.office-form.is-costed .office-form-fields:has(.office-cal-reveal) > .office-cal {
  grid-row: auto;
}
.office-form.is-costed .office-form-tiles:has([data-date-quick]) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.office-form.is-costed .office-form-tiles:has([data-date-quick]) .office-form-tile {
  min-height: 52px;
  font-size: 17px;
}
.office-cal-reveal {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  transition:
    grid-template-rows 0.38s var(--of-ease-out),
    opacity 0.3s var(--of-ease-out),
    margin-top 0.38s var(--of-ease-out);
  pointer-events: none;
}
.office-cal-reveal > div {
  min-height: 0;
  overflow: hidden;
}
.office-cal-reveal.is-open {
  grid-template-rows: 1fr;
  margin-top: 10px;
  opacity: 1;
  pointer-events: auto;
}
.office-cal-reveal .office-cal > .office-form-label {
  display: none;
}
.office-cal-reveal .office-cal {
  padding: 8px 10px;
  gap: 4px;
}
.office-cal-reveal .office-cal-day {
  height: 32px;
  font-size: 14px;
}
.office-cal-reveal .office-cal-head button {
  width: 30px;
  height: 30px;
  font-size: 18px;
}
@media (max-width: 560px) {
  .office-form.is-costed .office-form-tiles:has([data-date-quick]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .office-form.is-costed .office-form-tiles:has([data-date-quick]) .office-form-tile {
    min-height: 46px;
    font-size: 15px;
  }
  .office-cal-reveal .office-cal-day {
    height: 24px;
    font-size: 13px;
  }
  .office-cal-reveal .office-cal-head button {
    width: 26px;
    height: 26px;
  }
}

/* ---- A sleeker numpad ---- */
.office-pad {
  max-width: 340px;
  margin: 0 auto;
  padding: 12px 14px 14px;
  border: 1px solid var(--line, #343a43);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
}
.office-pad-top {
  font-size: 13px;
}
.office-pad-close {
  width: 30px;
  height: 30px;
  font-size: 18px;
}
.office-pad-read {
  margin: 2px 0 8px;
}
.office-pad-time {
  font-size: 32px;
}
.office-pad-period {
  padding: 3px;
  border-radius: 12px;
}
.office-pad-period button {
  min-width: 52px;
  min-height: 36px;
  border-radius: 9px;
  font-size: 15px;
}
.office-pad-keys {
  gap: 6px;
}
.office-pad-keys button {
  min-height: 44px;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 650;
}
.office-pad-keys .is-quiet {
  font-size: 18px;
}
.office-pad-keys .is-set {
  font-size: 16px;
}
@media (max-width: 560px) {
  .office-pad {
    max-width: none;
    padding: 10px 12px 12px;
  }
  .office-pad-time {
    font-size: 30px;
  }
  .office-pad-keys button {
    min-height: 42px;
    font-size: 19px;
  }
}

/* ---- Smaller: the calendar and the choices only take the room they need ---- */
.office-cal-reveal .office-cal {
  box-sizing: border-box;
  width: min(100%, 300px);
  margin: 0 auto;
  padding: 6px 8px;
}
.office-cal-reveal .office-cal-day {
  height: 28px;
  font-size: 13px;
  border-radius: 9px;
}
.office-cal-reveal .office-cal-head b {
  font-size: 14px;
}
.office-cal-reveal .office-cal-head button {
  width: 26px;
  height: 26px;
}
.office-cal-reveal .office-cal-week span {
  font-size: 10px;
}
@media (min-width: 561px) {
  .office-form.is-costed .office-form-tiles:has([data-date-quick]) {
    grid-template-columns: repeat(3, minmax(0, 150px));
    justify-content: start;
  }
  .office-punches {
    max-width: 520px;
  }
}
@media (max-width: 560px) {
  .office-cal-reveal .office-cal-day {
    height: 22px;
    font-size: 12px;
  }
}

/* The numpad's time is drawn in seven segments, like the Waste Hub and the change fund count */
.office-pad-seg.waste-prep-display {
  display: inline-grid;
  grid-template-rows: auto;
  justify-items: start;
  padding: 0;
  border: 0;
  background: none;
}
.office-pad-seg.waste-prep-display b {
  min-height: 0;
  color: var(--text, #f6f7f8);
  font-size: 26px;
  line-height: 1;
}
.office-pad-seg .seg-text {
  gap: 0.12em;
}
.office-pad-seg .seg-colon {
  display: inline-grid;
  gap: 0.28em;
  margin: 0 0.04em;
}
.office-pad-seg .seg-colon::before,
.office-pad-seg .seg-colon::after {
  content: "";
  width: 0.11em;
  height: 0.11em;
  background: currentColor;
}

/* The numpad says why a time is not allowed, in a line that is always there so the pad never changes size */
.office-pad-note {
  min-height: 16px;
  margin: 0 0 6px;
  color: #ff7b72;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

/* The note sits under the punches, a couple of lines tall */
.office-form.is-costed textarea.office-form-input {
  min-height: 0;
  height: 68px;
  resize: none;
  font-size: 16px;
}
.office-form.is-costed .office-form-fields:has(.office-punches) {
  gap: 10px;
}
@media (max-width: 560px) {
  .office-form.is-costed textarea.office-form-input {
    height: 52px;
    padding: 8px 12px;
  }
  .office-form.is-costed .office-form-fields:has(.office-punches) {
    gap: 8px;
  }
  .office-form.is-costed .office-punches {
    gap: 8px;
  }
  .office-punch-tile {
    min-height: 48px;
  }
}
/* ---- The review: who and when, then the shift as it should read ---- */
.office-punch-who {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--of-line);
  border-radius: 16px;
  background: var(--of-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.office-punch-who b {
  font-size: 20px;
}
.office-punch-who span {
  color: var(--of-muted);
  font-size: 16px;
  font-weight: 700;
}
.office-punch-who em {
  margin-left: auto;
  color: var(--of-accent);
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
}
.office-punch-sum {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, #e4a72b 45%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, #e4a72b 8%, transparent);
}
.office-punch-sum h3 {
  margin: 0 0 2px;
  color: #e4a72b;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.office-punch-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.office-punch-line span {
  color: var(--of-muted);
  font-size: 15px;
  font-weight: 700;
}
.office-punch-line b {
  font-size: 24px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.office-punch-note {
  display: grid;
  gap: 2px;
  padding: 8px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.office-punch-note span {
  color: var(--of-muted);
  font-size: 12px;
  font-weight: 700;
}
.office-punch-note i {
  font-size: 14px;
  font-style: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .office-punch-who {
    padding: 10px 12px;
  }
  .office-punch-who b {
    font-size: 17px;
  }
  .office-punch-sum {
    gap: 6px;
    margin-top: 8px;
    padding: 10px;
  }
  .office-punch-line {
    padding: 8px 12px;
  }
  .office-punch-line b {
    font-size: 20px;
  }
}

/* The review only takes the width it needs on a tablet */
@media (min-width: 561px) {
  .office-punch-who,
  .office-punch-sum {
    box-sizing: border-box;
    width: 100%;
    max-width: 440px;
  }
  .office-punch-who em {
    margin-left: auto;
  }
}

/* The missed-punch review is centered from the heading down */
.office-form:has(.office-punch-sum) .office-form-title {
  text-align: center;
}
.office-form:has(.office-punch-sum) .office-form-review {
  display: grid;
  justify-items: center;
  align-content: start;
}
.office-punch-who {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.office-punch-who em {
  margin: 4px 0 0;
}
.office-punch-sum {
  margin-left: auto;
  margin-right: auto;
}
.office-punch-sum h3 {
  text-align: center;
}
.office-punch-note {
  text-align: center;
}

.office-sent-message {
  max-width: 420px;
  margin: 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.45;
}

/* ---- A stacked panel: each question animates in under the one before it ---- */
.office-stack {
  display: grid;
  align-content: start;
}
.office-stack-row {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.42s var(--of-ease-out),
    opacity 0.32s var(--of-ease-out);
}
.office-stack-row.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.office-stack-inner {
  min-height: 0;
  overflow: hidden;
}
.office-stack-body {
  padding: 2px 2px 14px;
}
.office-stack .office-form-tiles {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* The stacked panel stays compact so every question fits in the window at once */
.office-form .office-stack .office-form-tiles {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  grid-auto-rows: auto;
  align-content: start;
  gap: 8px;
}
.office-form .office-stack .office-form-tile {
  min-height: 48px;
  padding: 6px 12px;
}
.office-form .office-stack .office-form-field {
  gap: 8px;
}
.office-form .office-stack .office-form-field legend {
  padding: 0;
}
.office-form .office-stack .office-form-input {
  min-height: 48px;
}
.office-form .office-stack .office-slide-btn {
  min-height: 42px;
}
.office-form .office-stack-body {
  padding-bottom: 10px;
}

/* three across on a tablet or laptop, two across on a phone; the fixed-size form's big tiles do not apply here */
.office-form.is-costed .office-stack .office-stack-body .office-form-tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.office-form.is-costed .office-stack .office-stack-body .office-form-tile {
  min-height: 48px;
  font-size: 16px;
}
@media (max-width: 560px) {
  .office-form.is-costed .office-stack .office-stack-body .office-form-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .office-form.is-costed .office-stack .office-stack-body .office-form-tile {
    min-height: 46px;
    font-size: 15px;
  }
}

/* the urgency pill is only as wide as its two choices */
.office-stack .office-slide-pill {
  justify-self: start;
  width: auto;
}
.office-stack .office-slide-btn {
  min-width: 132px;
  padding: 0 22px;
}

/* A phone: three tiles across at a smaller size so every question fits, and the panel scrolls if it ever cannot */
.office-form .office-stack {
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 560px) {
  .office-form.is-costed .office-stack .office-stack-body .office-form-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .office-form.is-costed .office-stack .office-stack-body .office-form-tile {
    min-height: 44px;
    padding: 4px 6px;
    font-size: 13.5px;
    line-height: 1.15;
  }
  .office-form .office-stack-body {
    padding-bottom: 8px;
  }
  .office-form .office-stack .office-form-input {
    min-height: 44px;
  }
  .office-form .office-stack .office-slide-btn {
    min-height: 40px;
    min-width: 118px;
  }
}

/* The Smallwares review shares the missed-punch review look; a long item wraps, urgent stands out, a photo shows small */
.office-punch-line b {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}
.office-punch-line b.is-urgent {
  color: #ff6b6b;
}
.office-punch-line img {
  height: 44px;
  max-width: 120px;
  border-radius: 8px;
  object-fit: cover;
}

/* ================= One motion language for every form =================
   A soft ease-out curve, three speeds, small movements, and nothing that moves when the person asked for less motion. */
:root {
  --of-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --of-ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --of-quick: 0.18s;
  --of-base: 0.34s;
  --of-slow: 0.5s;
}
/* a new screen slides in a short way and fades up; the progress bar stays put and just grows */
@keyframes of-enter-forward {
  from {
    opacity: 0;
    transform: translate3d(22px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes of-enter-back {
  from {
    opacity: 0;
    transform: translate3d(-22px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.office-form[data-enter] > :not(.office-form-progress) {
  animation: of-enter-forward var(--of-base) var(--of-ease-out) both;
}
.office-form[data-enter="back"] > :not(.office-form-progress) {
  animation-name: of-enter-back;
}
.office-form[data-enter] > .office-form-actions {
  animation-delay: 50ms;
}
.office-form-progress i {
  transition: width var(--of-slow) var(--of-ease-out);
}
/* the sent screen: the check pops in with a little spring, then the words rise under it */
@keyframes of-pop {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes of-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.office-form-sent > b {
  animation: of-pop 0.55s var(--of-ease-spring) 0.1s both;
}
.office-form-sent > :not(b) {
  animation: of-rise 0.42s var(--of-ease-out) 0.22s both;
}
/* every tappable thing answers the same way: it settles into its state quickly and gives a little under a finger */
.office-form-tile,
.office-form-next,
.office-form-back,
.office-form-row,
.office-form-switch,
.office-toggle-btn,
.office-form-step,
.office-size-chip,
.office-slide-btn,
.office-dial-arrow,
.office-cal-day,
.office-punch-line,
.office-punch-who,
.office-punch-note,
.office-cart-qty button {
  transition:
    transform var(--of-quick) var(--of-ease-out),
    background-color var(--of-quick) ease,
    border-color var(--of-quick) ease,
    box-shadow var(--of-base) var(--of-ease-out),
    color var(--of-quick) ease,
    opacity var(--of-quick) ease;
}
.office-form-tile:not(:disabled):active,
.office-form-next:not(:disabled):active,
.office-form-back:not(:disabled):active,
.office-form-row:active,
.office-size-chip:active,
.office-punch-line:active,
.office-punch-who:active,
.office-cart-qty button:not(:disabled):active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .office-form-tile:not(:disabled):hover,
  .office-size-chip:hover,
  .office-form-row:hover,
  .office-punch-line:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  }
  .office-form-tile:not(:disabled):active,
  .office-size-chip:active,
  .office-form-row:active,
  .office-punch-line:active {
    transform: scale(0.97);
  }
}
/* the question rows, calendars and boxes that reveal themselves share one reveal */
.office-stack-row,
.office-cal-reveal {
  transition:
    grid-template-rows var(--of-slow) var(--of-ease-out),
    opacity var(--of-base) ease;
}
@media (prefers-reduced-motion: reduce) {
  .office-form *,
  .office-form *::before,
  .office-form *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* A short hint under a question's label */
.office-form-hint {
  margin-top: -4px;
  color: var(--of-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

/* ---- General Admin: the address search and the "where to find your numbers" guide ---- */
.office-address-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.office-address-go {
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: var(--of-accent);
  color: #fff;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.office-address-go:disabled {
  opacity: 0.6;
}
.office-address-results {
  display: grid;
  gap: 6px;
}
.office-address-pick {
  padding: 12px 14px;
  border: 1px solid var(--of-line);
  border-radius: 14px;
  background: var(--of-surface);
  color: inherit;
  font: inherit;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}
.office-address-pick:hover,
.office-address-pick:focus-visible {
  border-color: var(--of-accent);
}
.office-address-note {
  margin: 0;
  color: var(--of-muted);
  font-size: 14px;
  font-weight: 600;
}
.office-address-chosen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #3fb950;
  border-radius: 14px;
  background: rgba(63, 185, 80, 0.1);
}
.office-address-chosen b {
  overflow-wrap: anywhere;
}
.office-address-chosen button {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--of-accent);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.office-guide {
  display: grid;
  gap: 12px;
}
.office-guide-art {
  width: 100%;
  max-width: 440px;
  justify-self: center;
}
.office-guide-art .paper {
  fill: var(--of-surface);
  stroke: var(--of-line);
  stroke-width: 2;
}
.office-guide-art text {
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.office-guide-art .faint {
  fill: var(--of-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.office-guide-art .faint-line {
  stroke: var(--of-line);
  stroke-width: 1.5;
}
.office-guide-art .micr {
  fill: currentColor;
  font-size: 13px;
  font-weight: 800;
}
.office-guide-art .box {
  fill: none;
  stroke-width: 2.5;
}
.office-guide-art .box.route,
.office-guide-art .tag.route {
  stroke: #4b8df0;
  fill: rgba(75, 141, 240, 0.12);
  color: #4b8df0;
}
.office-guide-art .box.acct,
.office-guide-art .tag.acct {
  stroke: #3fb950;
  fill: rgba(63, 185, 80, 0.12);
  color: #3fb950;
}
.office-guide-art .box.skip {
  stroke: var(--of-muted);
  stroke-dasharray: 4 3;
}
.office-guide-art .tag {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  stroke: none;
}
.office-guide-art .tag.route {
  fill: #4b8df0;
}
.office-guide-art .tag.acct {
  fill: #3fb950;
}
.office-guide-art .tag.skip {
  fill: var(--of-muted);
}
.office-guide-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.4;
}
.office-guide-list li {
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--of-surface);
}

/* A range calendar: the days between the first and last day are tinted, with a line saying what is picked */
.office-cal-day.is-range {
  border-radius: 0;
  background: color-mix(in srgb, var(--of-accent) 24%, transparent);
}
.office-cal-range {
  margin: 8px 0 0;
  color: var(--of-muted);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

/* A step with many questions (personal info, several changes at once) scrolls inside the window; its sections have small headings */
.office-form-fields.is-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 6px;
}
.office-form-section {
  margin: 6px 0 -2px;
  padding-top: 10px;
  border-top: 1px solid var(--of-line);
  color: var(--of-accent);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.office-form-fields.is-scroll > .office-form-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* the section headings stay small (the form's own heading rules would make them large) */
.office-form .office-form-section {
  margin: 8px 0 -4px;
  padding-top: 10px;
  color: var(--of-accent);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.1em;
  line-height: 1.2;
}
.office-form .office-form-fields.is-scroll > .office-form-section:first-child {
  margin-top: 0;
  padding-top: 0;
}