/* Admin Hub (js/office-hub.js). Every selector starts with .office-. Colours come from the suite's :root tokens; the few below are this hub's own. */
.office-app,
.office-overlay {
  --office-accent: #6c7bf2;
  --office-new: #4b8df0;
  --office-wait: #e4a72b;
  --office-done: #3fb950;
  --office-no: #8b95a5;
  --office-surface: rgba(255, 255, 255, 0.05);
}
.office-app {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 16px 18px 18px;
  box-sizing: border-box;
  color: var(--text);
  font-family: inherit;
}
.office-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.office-caption {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
}
.office-tabs {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--office-surface);
}
.office-tabs button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.office-tabs button.is-on {
  background: var(--office-accent);
  color: #fff;
}
.office-tabs i {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: 13px;
  font-style: normal;
}
.office-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.office-primary,
.office-actions button,
.office-note button,
.office-dialog-actions button,
.office-export {
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--office-surface);
  color: inherit;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.office-actions .office-primary,
.office-note .office-primary,
.office-dialog-actions .office-primary,
.office-top-actions .office-primary {
  border-color: transparent;
  background: var(--office-accent);
  color: #fff;
}
.office-dialog-actions button:disabled {
  opacity: 0.45;
  cursor: default;
}
.office-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--office-surface);
  color: inherit;
  cursor: pointer;
}
.office-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.office-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.office-filters input,
.office-filters select,
.office-note textarea,
.office-handler input[type="text"] {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--office-surface);
  color: inherit;
  font: inherit;
  font-size: 16px;
}
.office-filters input[type="search"] {
  flex: 1 1 260px;
}
.office-note textarea {
  width: 100%;
  padding: 12px 14px;
  box-sizing: border-box;
}
.office-exports {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.office-split {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}
.office-list,
.office-detail {
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  padding: 10px;
}
.office-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.office-list > .office-card {
  flex: 0 0 auto;
}
.office-card {
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--office-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.office-card.is-selected {
  border-color: var(--office-accent);
  background: rgba(108, 123, 242, 0.16);
}
.office-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.office-card-summary {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.office-card.is-person .office-card-top b {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
}
.office-card.is-person .office-card-summary {
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}
.office-card small {
  color: var(--muted);
  font-size: 13px;
}
.office-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.office-chip.is-new {
  background: rgba(75, 141, 240, 0.22);
  color: var(--office-new);
}
.office-card-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.office-chip.is-date {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}
.office-chip.is-needs_info {
  background: rgba(228, 167, 43, 0.22);
  color: var(--office-wait);
}
.office-chip.is-ordered {
  background: rgba(108, 123, 242, 0.24);
  color: var(--office-accent);
}
.office-chip.is-done {
  background: rgba(63, 185, 80, 0.22);
  color: var(--office-done);
}
.office-chip.is-declined {
  background: rgba(139, 149, 165, 0.22);
  color: var(--office-no);
}
.office-detail-card {
  display: grid;
  gap: 14px;
  padding: 6px;
}
.office-detail-card > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.office-ref {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
}
.office-detail-card h3 {
  margin: 2px 0 0;
  font-size: 24px;
}
.office-detail-card h4 {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.office-answers {
  display: grid;
  gap: 8px;
}
.office-answer {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--office-surface);
}
.office-answer span {
  color: var(--muted);
  font-size: 14px;
}
.office-answer b {
  font-size: 17px;
  overflow-wrap: anywhere;
}
.office-actions,
.office-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.office-note {
  display: grid;
  gap: 10px;
}
.office-note label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}
.office-note > div {
  display: flex;
  gap: 10px;
}
.office-timeline {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.office-timeline li {
  padding-left: 14px;
  border-left: 3px solid var(--line);
}
.office-timeline span {
  color: var(--muted);
  font-size: 14px;
}
.office-timeline p {
  margin: 4px 0 0;
}
.office-empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 160px;
  padding: 20px;
  color: var(--muted);
  text-align: center;
}
.office-empty h3 {
  margin: 0;
  color: var(--text);
}
.office-empty p {
  margin: 0;
}
.office-loading {
  color: var(--muted);
}
.office-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 11000001;
  translate: -50% 0;
  margin: 0;
  padding: 12px 20px;
  border-radius: 999px;
  background: #1f2430;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
/* The workspace sits at z-index 9999999, so dialogs and the toast use the same layer as the suite's other modals. */
.office-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.62);
}
.office-dialog {
  width: min(680px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
  color: var(--text);
}
.office-dialog > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.office-dialog h3 {
  margin: 0;
  font-size: 22px;
}
.office-help {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.4;
}
.office-handler {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.office-handler label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}
.office-handler .office-check {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.office-check input {
  width: 22px;
  height: 22px;
  margin-right: 10px;
}
.office-pick {
  display: grid;
  gap: 10px;
}
.office-pick button {
  display: grid;
  gap: 2px;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--office-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.office-pick small {
  color: var(--muted);
}
@media (max-width: 900px) {
  .office-split {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(220px, auto);
  }
  .office-tabs {
    margin-left: 0;
  }
  .office-answer {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
.office-answer.is-figure {
  background: rgba(108, 123, 242, 0.12);
}
select.office-export {
  appearance: auto;
}
.office-map {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  font-weight: 700;
}
.office-map select,
.office-map input[type="file"] {
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--office-surface);
  color: inherit;
  font: inherit;
  font-size: 16px;
}
.office-map.is-missing select {
  border-color: #e5484d;
}
.office-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 14px;
  margin-top: 10px;
}
.office-columns summary {
  min-height: 44px;
  cursor: pointer;
  font-weight: 800;
}
.office-columns > button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--office-surface);
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.office-import-count {
  margin: 0 0 8px;
  font-size: 17px;
}
.office-skips {
  margin: 0 0 12px;
  padding-left: 20px;
  color: var(--muted);
  font-size: 14px;
}
.office-error {
  margin: 0 0 12px;
  color: #ff7b72;
  font-weight: 700;
}
.office-imports {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.office-imports li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.office-imports small {
  display: block;
  color: var(--muted);
}
.office-imports button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--office-surface);
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.office-import-done {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}
.office-import-done > b {
  font-size: 44px;
  color: var(--office-done);
}

/* ---- Home: buckets and records ---- */
.office-back-link {
  min-height: 44px;
  padding: 0 14px 0 8px;
  border: 0;
  background: transparent;
  color: var(--office-accent);
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}
.office-top-actions > button[data-all] {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.office-top > .office-caption {
  flex: 1 1 auto;
}
.office-home {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.office-group h3 {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.office-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.office-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "count title"
    "count sub";
  align-items: center;
  column-gap: 16px;
  min-height: 108px;
  padding: 16px 20px;
  border: 3px solid var(--tile);
  border-radius: 24px;
  background: color-mix(in srgb, var(--tile) 9%, transparent);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.office-tile.is-quiet {
  border-color: color-mix(in srgb, var(--tile) 45%, transparent);
}
.office-tile.has-new {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tile) 22%, transparent);
}
.office-tile-count {
  grid-area: count;
  min-width: 64px;
  color: var(--tile);
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.office-tile b {
  grid-area: title;
  align-self: end;
  font-size: 19px;
  font-weight: 800;
}
.office-tile small {
  grid-area: sub;
  align-self: start;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

/* ---- Tables (change fund, Guest Recovery) ---- */
.office-sheet {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
}
.office-sheet-note {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}
.office-sheet-note b {
  color: var(--text);
}
.office-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--office-surface);
}
.office-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.office-table th,
.office-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.office-table thead th {
  position: sticky;
  top: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.office-table tbody tr:last-child > * {
  border-bottom: 0;
}
.office-table .is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.office-table .is-empty {
  color: var(--muted);
  text-align: center;
}
.office-table .is-expired {
  color: #e5484d;
  font-weight: 800;
}
.office-table.is-grid th[scope="row"] {
  white-space: nowrap;
  font-weight: 800;
}
.office-table.is-grid td {
  min-width: 118px;
}
.office-count {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  min-height: 52px;
  margin: 2px 0;
  padding: 6px 10px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: color-mix(in srgb, var(--count) 12%, transparent);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  --count: var(--office-no);
}
.office-count b {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.office-count small {
  color: var(--count);
  font-size: 12px;
  font-weight: 800;
}
.office-count.is-balanced {
  --count: var(--office-done);
}
.office-count.is-short {
  --count: #e5484d;
}
.office-count.is-over {
  --count: var(--office-wait);
}
.office-count.needs-look {
  border-color: var(--count);
}
.office-came {
  min-height: 40px;
  padding: 0 14px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.office-came.is-on {
  border-color: var(--office-done);
  background: color-mix(in srgb, var(--office-done) 16%, transparent);
  color: var(--office-done);
}
.office-link {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--office-accent);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.office-pills {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--office-surface);
}
.office-pills button {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.office-pills button.is-on {
  background: var(--office-accent);
  color: #fff;
}

.office-month-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.office-month-head h4 {
  margin: 0;
  font-size: 20px;
}
.office-month-head span {
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}
.office-split-tables {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 2.4fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 820px) {
  .office-split-tables {
    grid-template-columns: 1fr;
  }
}

/* ---- Laptop density: with a mouse (not touch), everything is a size down, so the Admin Hub is not overblown on a laptop. iPads keep the big sizes. ---- */
@media (hover: hover) and (pointer: fine) {
  .office-app {
    gap: 10px;
    padding: 12px 16px 14px;
  }
  .office-caption {
    font-size: 18px;
  }
  .office-back-link {
    min-height: 36px;
    font-size: 15px;
  }
  .office-top-actions > button[data-all],
  .office-dialog-actions button,
  .office-export {
    min-height: 38px;
    padding: 0 14px;
    font-size: 14px;
  }
  .office-icon {
    width: 40px;
    height: 40px;
  }
  .office-home {
    gap: 16px;
  }
  .office-group h3 {
    margin-bottom: 8px;
    font-size: 12px;
  }
  .office-tiles {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
  }
  .office-tile {
    min-height: 80px;
    padding: 12px 16px;
    border-width: 2px;
    border-radius: 16px;
    column-gap: 12px;
  }
  .office-tile-count {
    min-width: 50px;
    font-size: 30px;
  }
  .office-tile b {
    font-size: 16px;
  }
  .office-tile small {
    font-size: 13px;
  }
  .office-table {
    font-size: 14px;
  }
  .office-table th,
  .office-table td {
    padding: 7px 12px;
  }
  .office-table.is-grid td {
    min-width: 104px;
  }
  .office-count {
    min-height: 42px;
    padding: 4px 9px;
  }
  .office-count b {
    font-size: 14px;
  }
  .office-count small {
    font-size: 11px;
  }
  .office-came,
  .office-link {
    min-height: 32px;
    font-size: 13px;
  }
  .office-pills button {
    min-height: 34px;
    padding: 0 13px;
    font-size: 14px;
  }
  .office-month-head h4 {
    font-size: 17px;
  }
  .office-dialog {
    padding: 14px 16px;
    border-radius: 18px;
  }
}

/* ---- Colours for the parts of a change fund count (the same ones the form's equation uses) ---- */
.office-app,
.office-overlay {
  --part-regular: #4b8df0;
  --part-mobile: #a468e8;
  --part-other: #e8618c;
  --part-bills: #3fb97d;
  --part-coins: #d4a63a;
  --fund-ok: #3fb950;
  --fund-bad: #e5484d;
  --fund-seen: #e4a72b;
}
.office-app [data-part="regular"],
.office-overlay [data-part="regular"] {
  --part: var(--part-regular);
}
.office-app [data-part="mobile"],
.office-overlay [data-part="mobile"] {
  --part: var(--part-mobile);
}
.office-app [data-part="other"],
.office-overlay [data-part="other"] {
  --part: var(--part-other);
}
.office-app [data-part="bills"],
.office-overlay [data-part="bills"] {
  --part: var(--part-bills);
}
.office-app [data-part="coins"],
.office-overlay [data-part="coins"] {
  --part: var(--part-coins);
}

/* ---- A count is green when it balances, red (with a !) until somebody has looked, yellow once reviewed ---- */
.office-chip.is-fund-balanced {
  background: color-mix(in srgb, var(--fund-ok) 18%, transparent);
  color: var(--fund-ok);
}
.office-chip.is-fund-needs {
  background: color-mix(in srgb, var(--fund-bad) 18%, transparent);
  color: var(--fund-bad);
}
.office-chip.is-fund-reviewed {
  background: color-mix(in srgb, var(--fund-seen) 20%, transparent);
  color: var(--fund-seen);
}
.office-count.is-balanced {
  --count: var(--fund-ok);
}
.office-count.is-needs {
  --count: var(--fund-bad);
  border-color: var(--count);
}
.office-count.is-reviewed {
  --count: var(--fund-seen);
}

/* ---- The detail of a count ---- */
.office-detail-card > header {
  align-items: flex-start;
}
.office-actions.is-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.office-detail-card:not(.is-fund) > .office-actions.is-top {
  justify-content: flex-start;
  margin: 2px 0 12px;
}
.office-detail-card.is-fund > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.office-detail-card.is-fund > header > div:first-child {
  display: grid;
  gap: 4px;
  justify-items: start;
}
.office-fund-eq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 12px 0 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--office-surface);
}
.office-fund-eq .office-sum-part {
  display: grid;
  gap: 1px;
  padding: 3px 10px 4px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--part) 16%, transparent);
}
.office-fund-eq .office-sum-part small,
.office-fund-total small {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.office-fund-eq .office-sum-part small {
  color: color-mix(in srgb, var(--part) 70%, #fff);
}
.office-fund-eq .office-sum-part b {
  color: color-mix(in srgb, var(--part) 45%, #fff);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.office-fund-eq .office-sum-part.is-zero {
  opacity: 0.42;
}
.office-fund-eq > i {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}
.office-fund-total {
  display: grid;
  gap: 1px;
  margin-left: 4px;
}
.office-fund-total small {
  color: var(--muted);
}
.office-fund-total b {
  font-size: 28px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.office-fund-total.is-balanced b {
  color: var(--fund-ok);
}
.office-fund-total.is-needs b {
  color: var(--fund-bad);
}
.office-fund-total.is-reviewed b {
  color: var(--fund-seen);
}
.office-fund-expected {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
}
.office-fund-expected.is-balanced {
  color: var(--fund-ok);
}
.office-fund-expected.is-needs {
  color: var(--fund-bad);
}
.office-fund-expected.is-reviewed {
  color: var(--fund-seen);
}
.office-fund-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.office-fund-tile {
  display: grid;
  gap: 1px;
  min-width: 108px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--part) 55%, transparent);
  border-left-width: 5px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--part) 12%, var(--office-surface));
}
.office-fund-tile small {
  color: color-mix(in srgb, var(--part) 65%, #fff);
  font-size: 12px;
  font-weight: 800;
}
.office-fund-tile b {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.office-fund-tile em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}
.office-fund-note {
  margin: 8px 0;
  color: var(--text);
}
.office-fund-note span {
  color: var(--muted);
  font-weight: 800;
  margin-right: 6px;
}
.office-timeline.is-compact {
  gap: 4px;
}

/* ---- The picker: a finished form is marked ---- */

/* ---- Settings, one tab per form ---- */
.office-dialog:has(.office-settings-tabs) {
  width: min(760px, 100%);
}
.office-settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.office-settings-tabs button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--office-surface);
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.office-settings-tabs button.is-on {
  border-color: transparent;
  background: var(--office-accent);
  color: #fff;
}
.office-settings-panel[hidden] {
  display: none;
}
.office-field {
  display: grid;
  gap: 4px;
  font-weight: 700;
}
.office-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.office-seg {
  display: inline-flex;
  gap: 4px;
  margin: 4px 0 12px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--office-surface);
}
.office-seg button {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.office-seg button.is-on {
  background: var(--office-accent);
  color: #fff;
}
.office-season {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 14px;
}
.office-season[hidden] {
  display: none;
}
.office-season-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.office-select {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--office-surface);
  color: inherit;
  font: inherit;
}
.office-money-input {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--office-surface);
}
.office-money-input i {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}
.office-money-input input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
.office-dialog-actions.is-end {
  justify-content: flex-end;
  margin-top: 14px;
}

/* ---- On a wide screen the Admin Hub keeps normal page margins ---- */
@media (min-width: 1200px) {
  .office-app {
    width: 100%;
    max-width: 1160px;
    margin-inline: auto;
  }
}

.office-fund-result {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.office-fund-result > i {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}

/* ---- Last touches ---- */

/* The suite's classic yellow */
.office-yellow {
  border-color: transparent !important;
  background: #e4a72b !important;
  color: #17191f !important;
  font-weight: 850;
  box-shadow: 0 2px 0 #8a6414;
}
.office-yellow:hover {
  background: #f2b93e !important;
}
.office-new-pill {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #e4a72b;
  color: #17191f;
  font: inherit;
  font-size: 15px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 0 #8a6414;
}
.office-new-pill:hover {
  background: #f2b93e;
}
.office-new-pill[hidden] {
  display: none;
}

/* The change fund day-by-day page: every row the same height, headers that stay put while the rows scroll */
.office-sheet.is-fixed-head {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.office-table-wrap.is-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.office-table-wrap.is-scroll .office-table {
  border-collapse: separate;
  border-spacing: 0;
}
.office-table-wrap.is-scroll .office-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--card, #181a1f);
  box-shadow: inset 0 -1px 0 var(--line);
  border-bottom: 0;
}
.office-table.is-grid tbody tr > * {
  box-sizing: border-box;
  height: 68px;
  padding-block: 6px;
}
.office-table.is-grid .office-count {
  height: 52px;
  min-height: 0;
  margin: 0;
  justify-content: center;
}
@media (hover: hover) and (pointer: fine) {
  .office-table.is-grid tbody tr > * {
    height: 58px;
  }
  .office-table.is-grid .office-count {
    height: 44px;
  }
}

/* The breakdown on a count: one row per group (tills, other funds, bills, coins) */
.office-fund-tiles {
  display: grid;
  gap: 8px;
}
.office-fund-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* An equation never breaks onto a second line: it shrinks to fit the width it has */
.office-form-total {
  container-type: inline-size;
}
.office-sum {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0.55em;
  font-size: clamp(8px, 1.55cqw, 15px);
  white-space: nowrap;
}
.office-sum .office-sum-part,
.office-sum .office-sum-total {
  flex: 0 1 auto;
  min-width: 0;
}
.office-sum small {
  font-size: 0.74em;
}
.office-sum b {
  font-size: 1.2em;
}
.office-sum i {
  font-size: 1.3em;
}
.office-sum .office-sum-total b {
  font-size: 2.3em;
}
.office-form.is-eq.is-review .office-sum-part b {
  padding: 0.05em 0.55em;
}
.office-fund-eq {
  container-type: inline-size;
  flex-wrap: nowrap;
  gap: 0.5em;
  font-size: clamp(8px, 1.8cqw, 15px);
  white-space: nowrap;
}
.office-fund-eq .office-sum-part {
  flex: 0 1 auto;
  min-width: 0;
}
.office-fund-eq .office-sum-part small,
.office-fund-total small {
  font-size: 0.74em;
}
.office-fund-eq .office-sum-part b {
  font-size: 1.2em;
}
.office-fund-total b {
  font-size: 2.2em;
}

.tool-workspace-header .tool-workspace-actions .office-new-pill {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #e4a72b;
  color: #17191f;
  font-size: 15px;
  font-weight: 850;
  box-shadow: 0 2px 0 #8a6414;
}
.tool-workspace-header .tool-workspace-actions .office-new-pill:hover {
  background: #f2b93e;
}

/* ---- Month slider on the change fund page ---- */
.office-month-slider {
  display: flex;
  align-items: center;
  gap: 12px;
}
.office-month-slider > button {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--office-surface);
  color: var(--text);
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.office-month-slider > button:disabled {
  opacity: 0.35;
  cursor: default;
}
.office-month-range {
  flex: 1;
  min-width: 0;
}
.office-month-range input[type="range"] {
  width: 100%;
  height: 34px;
  margin: 0;
  accent-color: #e4a72b;
}
.office-month-ticks {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.office-fund-eq {
  font-size: clamp(7px, 1.4cqw, 14px);
}
.office-fund-eq .office-sum-part {
  padding: 0.3em 0.6em 0.35em;
}
@media (hover: hover) and (pointer: fine) {
  .office-month-slider > button {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}

/* The equation on a count sizes itself from the card around it (an element cannot size itself from its own container). */
.office-detail-card.is-fund {
  container-type: inline-size;
}
.office-fund-eq {
  container-type: normal;
  font-size: clamp(7px, 1.5cqw, 14px);
}

.office-fund-eq {
  font-size: clamp(7px, 1.85cqw, 15px);
}

/* ---- Change fund page: fixed columns, counts as a short vertical list, month pills ---- */
.office-table.is-grid {
  table-layout: fixed;
  width: 100%;
}
.office-table.is-grid col.office-col-day {
  width: 128px;
}
.office-table.is-grid tbody tr > * {
  height: 92px;
}
.office-table.is-grid td {
  min-width: 0;
  vertical-align: middle;
}
.office-table.is-grid .office-count {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  width: 100%;
  height: auto;
  min-height: 74px;
  padding: 6px 10px;
}
.office-table.is-grid .office-count b {
  font-size: 16px;
}
.office-table.is-grid .office-count-gap {
  color: var(--count);
  font-size: 13px;
  font-weight: 850;
}
.office-table.is-grid .office-count small {
  font-size: 12px;
}
@media (hover: hover) and (pointer: fine) {
  .office-table.is-grid tbody tr > * {
    height: 82px;
  }
  .office-table.is-grid .office-count {
    min-height: 66px;
  }
  .office-table.is-grid .office-count b {
    font-size: 15px;
  }
}
.office-month-pills {
  display: flex;
  align-items: center;
  gap: 10px;
}
.office-year,
.office-year-fixed {
  flex: none;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--office-surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 850;
}
.office-year-fixed {
  display: inline-flex;
  align-items: center;
}
.office-month-pillrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.office-month-pillrow button {
  position: relative;
  min-width: 52px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--office-surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.office-month-pillrow button.is-empty {
  color: var(--muted);
}
.office-month-pillrow button.is-on {
  border-color: transparent;
  background: #e4a72b;
  color: #17191f;
  box-shadow: 0 2px 0 #8a6414;
}

@media (hover: hover) and (pointer: fine) {
  .office-year,
  .office-year-fixed,
  .office-month-pillrow button {
    min-height: 34px;
    font-size: 13px;
  }
  .office-month-pillrow button {
    min-width: 46px;
    padding: 0 11px;
  }
}

/* ---- Back pill in the top bar; Expected Change Fund box; a tighter log page ---- */
.tool-workspace-header .tool-workspace-lead .office-back-pill {
  padding: 0 16px;
}
.office-back-pill[hidden] {
  display: none;
}
.office-top-actions:has(.office-expected-box) {
  margin-left: auto;
}
.office-expected-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1.5px solid color-mix(in srgb, #e4a72b 70%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, #e4a72b 12%, transparent);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.office-expected-box b {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.office-fund-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
}
.office-fund-bar .office-month-head {
  flex: none;
}
@media (hover: hover) and (pointer: fine) {
  .office-expected-box {
    padding: 6px 14px;
    font-size: 14px;
  }
  .office-expected-box b {
    font-size: 16px;
  }
}

.tool-workspace-header .tool-workspace-lead .office-new-pill {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #e4a72b;
  color: #17191f;
  font-size: 15px;
  font-weight: 850;
  box-shadow: 0 2px 0 #8a6414;
}
.tool-workspace-header .tool-workspace-lead .office-new-pill:hover {
  background: #f2b93e;
}

/* Months with counts to review carry a small red dot with how many */
.office-month-pillrow button .office-pill-dot {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  vertical-align: 1px;
  font-variant-numeric: tabular-nums;
}

/* A finished form (and its log) is marked on its home tile and on the log page */
.office-tile {
  position: relative;
}

.office-handler textarea.office-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--of-line, rgba(127, 127, 127, 0.35));
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  resize: vertical;
}

/* Guest Recovery status: grey while logged, blue while an app load is pending, green once recovered, red when expired */
.office-chip.is-care-logged,
.office-care-status.is-care-logged {
  --care: #8a93a5;
}
.office-chip.is-care-app,
.office-care-status.is-care-app {
  --care: #e5484d;
}
.office-chip.is-care-recovered,
.office-care-status.is-care-recovered {
  --care: #3fb950;
}
.office-chip.is-care-expired,
.office-care-status.is-care-expired {
  --care: #e8eaf0;
}
.office-chip[class*="is-care-"],
.office-care-status {
  border: 1px solid color-mix(in srgb, var(--care) 55%, transparent);
  background: color-mix(in srgb, var(--care) 18%, transparent);
  color: var(--care);
}
.office-care-status {
  min-width: 96px;
  padding: 6px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}
.office-care-status:disabled {
  cursor: default;
}

/* Expired is black: solid, so it reads on light and dark */
.office-chip.is-care-expired,
.office-care-status.is-care-expired {
  border-color: #3a3f4b;
  background: #111317;
  color: #e8eaf0;
}

/* Guest Recovery filter pills carry their status colours: yellow for All, then the same colours as the status pills */
.office-pills button[data-cares-filter] {
  --pill: #e4a72b;
  border: 1px solid color-mix(in srgb, var(--pill) 45%, transparent);
  background: color-mix(in srgb, var(--pill) 14%, transparent);
  color: var(--pill);
}
.office-pills button[data-cares-filter="logged"] {
  --pill: #8a93a5;
}
.office-pills button[data-cares-filter="app"] {
  --pill: #e5484d;
}
.office-pills button[data-cares-filter="recovered"] {
  --pill: #3fb950;
}
.office-pills button[data-cares-filter="expired"] {
  --pill: #e8eaf0;
  background: #111317;
  border-color: #3a3f4b;
}
.office-pills button[data-cares-filter].is-on {
  border-color: var(--pill);
  background: var(--pill);
  color: #17191f;
}
.office-pills button[data-cares-filter="expired"].is-on {
  background: #111317;
  color: #fff;
  border-color: #e8eaf0;
}

/* The filter highlight is one piece that slides across and changes colour */
.office-pills.is-sliding {
  position: relative;
}
.office-pills.is-sliding .office-pill-slider {
  position: absolute;
  z-index: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  pointer-events: none;
}
.office-pills.is-sliding .office-pill-slider.is-ready {
  transition:
    left 0.3s cubic-bezier(0.3, 0.8, 0.3, 1),
    width 0.3s cubic-bezier(0.3, 0.8, 0.3, 1),
    background-color 0.3s ease,
    border-color 0.3s ease;
}
.office-pills.is-sliding button[data-cares-filter] {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}
.office-pills.is-sliding button[data-cares-filter].is-on {
  border-color: transparent;
  background: transparent;
}
.office-pills.is-sliding button[data-cares-filter="expired"].is-on {
  background: transparent;
  border-color: transparent;
}

/* The filter pills have no colour of their own: only the sliding highlight is coloured, and it blends from one colour to the next as it moves */
.office-pills.is-sliding button[data-cares-filter] {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  transition: color 0.3s ease;
}
.office-pills.is-sliding button[data-cares-filter].is-on {
  color: #17191f;
}
.office-pills.is-sliding button[data-cares-filter="expired"].is-on {
  color: #fff;
}
.office-pills.is-sliding .office-pill-slider.is-ready {
  transition-duration: 0.38s;
}

/* Expired is one black with white text, on the pill in the table and on the sliding highlight */
.office-pills button[data-cares-filter="expired"] {
  --pill: #111317;
}
.office-pills.is-sliding button[data-cares-filter="expired"].is-on {
  color: #fff;
}
.office-chip.is-care-expired,
.office-care-status.is-care-expired {
  color: #fff;
}

/* Every filter pill is as wide as "Recovered 888", so the highlight is one size and the search bar takes the rest */
.office-pills.is-sliding {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  flex: none;
}
.office-pills.is-sliding button[data-cares-filter] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  text-align: center;
}
.office-pills.is-sliding button[data-cares-filter]::after {
  content: "Recovered 888";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 800;
}
.office-filters:has(.office-pills.is-sliding) input[type="search"] {
  flex: 1 1 0;
  min-width: 150px;
}

/* Guest Recovery: pills sized to "Recovered 88", the calendar button, guest links and the guest's own table */
.office-pills.is-sliding button[data-cares-filter]::after {
  content: "Recovered 88";
}
.office-filters {
  position: relative;
}
.office-cal-wrap {
  position: relative;
  flex: none;
}
.office-cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--office-surface);
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.office-cal-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.office-cal-btn.is-on {
  border-color: #e4a72b;
  background: color-mix(in srgb, #e4a72b 18%, transparent);
  color: #e4a72b;
}
.office-pop-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
}
.office-cal-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 31;
  width: 310px;
  background: var(--card, #181a1f);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.office-cal-wrap .office-cal-day {
  position: relative;
}
.office-cal-wrap .office-cal-day.has-entry::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #e4a72b;
}
.office-cal-wrap .office-cal-day.is-on.has-entry::after {
  background: #17191f;
}
.office-cal-clear {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.office-guest-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.office-guest-link:hover,
.office-guest-link:focus-visible {
  color: #e4a72b;
  text-decoration: underline;
}
.office-table.is-condensed td,
.office-table.is-condensed th {
  white-space: nowrap;
}

/* Guest Recovery: a clear button inside the search box, and a yellow Clear in the calendar */
.office-search-wrap {
  position: relative;
  flex: 1 1 0;
  min-width: 150px;
}
.office-search-wrap input[type="search"] {
  width: 100%;
  box-sizing: border-box;
  padding-right: 46px;
}
.office-search-wrap input[type="search"]::-webkit-search-cancel-button {
  display: none;
}
.office-search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.office-cal-clear {
  border-color: #e4a72b;
  background: #e4a72b;
  color: #17191f;
}

/* The search clear button is yellow with a cross drawn dead centre; a status pill asks "Confirm?" before it changes */
.office-search-clear {
  background: #e4a72b;
  color: #17191f;
}
.office-search-clear svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.office-care-status.is-confirm {
  --care: #e4a72b;
  border-color: #e4a72b;
  background: #e4a72b;
  color: #17191f;
}

/* ---- The request board (uniforms and smallwares): New, Ordered, Arrived. Cards are quiet; the bar and the side panel do the work ---- */
.office-board-wrap {
  position: relative;
  display: grid;
  gap: 14px;
  padding-bottom: 90px;
}
.office-board-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.office-board-chip {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}
button.office-board-chip {
  cursor: pointer;
}
.office-board-chip.is-urgent {
  border-color: color-mix(in srgb, #e5484d 55%, transparent);
  background: color-mix(in srgb, #e5484d 15%, transparent);
  color: #ff6b70;
}
.office-board-chip.is-urgent.is-quiet {
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
}
.office-board-chip.is-urgent.is-on {
  background: #e5484d;
  color: #fff;
}
.office-board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.office-board-layout.has-panel {
  grid-template-columns: minmax(0, 1fr) 380px;
}
.office-board {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.office-board-col {
  --col: #4b8df0;
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--col) 6%, var(--office-surface));
}
.office-board-col.is-ordered {
  --col: #a468e8;
}
.office-board-col.is-arrived {
  --col: #3fb950;
}
.office-board-col > header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 0;
}
.office-board-col h4 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.2px;
}
.office-board-col > header span {
  margin-left: auto;
  min-width: 26px;
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--col) 24%, transparent);
  color: var(--col);
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}
.office-board-cards {
  display: grid;
  gap: 8px;
}
.office-board-empty {
  margin: 4px 0;
  padding: 18px 8px;
  border: 1px dashed color-mix(in srgb, var(--col) 30%, transparent);
  border-radius: 14px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.office-board-card {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 13px 16px 12px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card, #181a1f);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}
.office-board-card:active {
  transform: scale(0.985);
}
.office-board-card::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 4px;
  background: transparent;
  transition: background 0.2s ease;
}
.office-board-card.is-urgent::before {
  background: #e5484d;
}
.office-board-card.is-picked {
  border-color: #e4a72b;
  background: color-mix(in srgb, #e4a72b 11%, var(--card, #181a1f));
  box-shadow:
    0 0 0 1px #e4a72b,
    0 10px 24px rgba(0, 0, 0, 0.35);
}
.office-board-card.is-open {
  border-color: #4b8df0;
  box-shadow: 0 0 0 1px #4b8df0;
}
.office-board-card b {
  font-size: 16px;
  line-height: 1.25;
}
.office-board-sub {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}
.office-board-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 18px;
}
.office-board-meta em {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}
.office-urgency {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}
.office-urgency.is-urgent {
  background: color-mix(in srgb, #e5484d 20%, transparent);
  color: #ff6b70;
}
.office-urgency.is-hold {
  background: color-mix(in srgb, #4b8df0 22%, transparent);
  color: #6ea6f5;
}
.office-board-panel {
  position: sticky;
  top: 8px;
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card, #181a1f);
  animation: board-panel-in 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.office-panel-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}
@keyframes board-panel-in {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
}
.office-board-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 9px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background: color-mix(in srgb, var(--card, #181a1f) 78%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  animation: board-bar-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.office-board-bar[hidden] {
  display: none;
}
@keyframes board-bar-in {
  from {
    opacity: 0;
    transform: translate(-50%, 22px);
  }
}
.office-board-bar button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.office-board-bar .office-primary {
  background: #e4a72b;
  color: #17191f;
}
.office-batch-list {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}
.office-batch-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--office-surface);
}
.office-batch-list small {
  margin-left: auto;
  color: var(--muted);
}
.office-toast {
  display: flex;
  align-items: center;
  gap: 14px;
}
.office-toast[hidden] {
  display: none;
}
.office-toast button {
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: #e4a72b;
  color: #17191f;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
@media (max-width: 760px) {
  .office-board,
  .office-board-layout.has-panel {
    grid-template-columns: 1fr;
  }
}

.office-urgency.is-urgent {
  letter-spacing: 0.6px;
}

/* One scroll area under the header (the header never moves). Inside it, pages that keep their own scrolling (tables with fixed headers,
   the request list) still do, and everything else simply scrolls here. */
.office-app {
  overflow: hidden;
}
.office-body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
  margin: 0 -18px;
  padding: 0 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.office-board-panel {
  max-height: calc(100dvh - 220px);
  top: 0;
}
.office-board-panel .office-detail-card > header {
  padding-right: 46px;
}
.office-detail-flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.office-urgent-switch {
  padding: 3px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.office-urgent-switch.is-on {
  border-color: #e5484d;
  background: #e5484d;
  color: #fff;
}
.office-board-bar .office-decline {
  background: color-mix(in srgb, #e5484d 24%, transparent);
  color: #ff6b70;
}
.office-board-bar .office-decline.is-confirm {
  background: #e5484d;
  color: #fff;
}

/* The board fills the page: each column scrolls by itself under a header that stays put, and so does the details panel */
.office-board-wrap {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 0;
}
.office-board-layout {
  flex: 1 1 auto;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}
.office-board {
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  min-height: 0;
}
.office-board-col {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}
.office-board-cards {
  align-content: start;
  min-height: 0;
  margin: 0 -4px;
  padding: 0 4px 96px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.office-board-panel {
  position: relative;
  top: auto;
  align-self: stretch;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Messages appear at the top, so they never cover the action bar at the bottom */
.office-toast {
  top: 84px;
  bottom: auto;
}
.office-board-layout {
  align-items: stretch;
}

/* Select mode: a Select / Done pill beside the chips; boxes appear on the cards only while it is on */
.office-board-select {
  margin-left: auto;
  padding: 7px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}
.office-board-select.is-on {
  border-color: #e4a72b;
  background: #e4a72b;
  color: #17191f;
}
.office-board-card.is-selecting {
  padding-right: 52px;
}
.office-board-check {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 24px;
  height: 24px;
  border: 2px solid var(--muted);
  border-radius: 8px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.office-board-check.is-on {
  border-color: #e4a72b;
  background: #e4a72b;
}
.office-board-check.is-on::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid #17191f;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* A column is only as tall as its cards (up to the space there is); when it has to scroll, its bottom stays square until the end */
.office-board-wrap.has-bar {
  padding-bottom: 84px;
}
.office-board {
  align-items: start;
}
.office-board-col {
  display: flex;
  flex-direction: column;
  align-self: start;
  max-height: 100%;
  padding-bottom: 10px;
  transition: border-radius 0.25s ease;
}
.office-board-col.is-scroll:not(.is-end) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: 0;
}
.office-board-col > header {
  flex: none;
}
.office-board-cards {
  flex: 0 1 auto;
  padding-bottom: 0;
}

/* The Select Multiple switch lives in the page header; the columns start right under the title */
.office-top .office-board-select {
  margin-left: 0;
}
.office-board-wrap {
  gap: 0;
}

/* Arrived cards are a record only */
.office-board-card.is-static {
  cursor: default;
}

/* The uniform board's last stop, and the priced order in its details */
.office-board-col.is-distributed {
  --col: #e4a72b;
}
.office-chip.is-distributed {
  background: color-mix(in srgb, #e4a72b 22%, transparent);
  color: #e4a72b;
}
.office-cost-list {
  display: grid;
  gap: 6px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}
.office-cost-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--office-surface);
}
.office-cost-list li.is-total {
  background: color-mix(in srgb, #e4a72b 16%, transparent);
  font-weight: 850;
}
.office-cost-list small {
  color: var(--muted);
}
/* The uniform article editor in settings */
.office-uni-row {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--office-surface);
}
.office-uni-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.office-uni-top input[data-uni="name"] {
  flex: 1 1 auto;
  min-width: 0;
}
.office-uni-move {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.office-uni-move button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.office-uni-move .office-uni-remove {
  color: #ff6b70;
}
.office-uni-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* A card never grows past a few lines, however long the order */
.office-board-sub {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.office-uni-row input[type="text"],
.office-uni-row input[type="number"],
.office-uni-row .office-select {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--office-surface);
  color: inherit;
  font: inherit;
  font-size: 16px;
  box-sizing: border-box;
}
.office-uni-row .office-field input[type="number"],
.office-uni-row .office-field input[type="text"] {
  width: 100%;
}

/* Uniform cards: the name over the item names, and the amount owed in green, centred on the right edge */
.office-board-card.is-uniform {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.office-uni-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.office-uni-amount {
  flex: none;
  color: #3fb950;
  font-size: 18px;
  font-weight: 850;
  white-space: nowrap;
}

/* Uniform cards are all one height: the name and room for three lines of items */
.office-board-card.is-uniform .office-uni-main .office-board-sub {
  height: 3.9em;
  line-height: 1.3;
}

/* ---- Phones: inside a view the bar is menu, Back, New request and settings (the title is the page's own heading) ---- */
@media (max-width: 560px) {
  .tool-workspace-screen[data-tool="office-hub"] > .tool-workspace-header:has(.office-back-pill:not([hidden])) {
    grid-template-columns: 48px minmax(0, 1fr) auto 48px !important;
    gap: 8px !important;
  }
  .tool-workspace-screen[data-tool="office-hub"] > .tool-workspace-header:has(.office-back-pill:not([hidden])) .tool-workspace-heading {
    display: none;
  }
}

/* A wide log table scrolls inside its own box; it never stretches the page or the top bar */
.tool-workspace-screen[data-tool="office-hub"] > *,
.tool-workspace-screen[data-tool="office-hub"] .office-app,
.tool-workspace-screen[data-tool="office-hub"] .office-body,
.tool-workspace-screen[data-tool="office-hub"] .office-sheet {
  min-width: 0;
  max-width: 100%;
}

/* ---- Phones: the log pages. One row of months, filters that wrap, and each table row as a small card ---- */
@media (max-width: 560px) {
  .office-month-pills {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .office-month-pillrow {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .office-month-pillrow::-webkit-scrollbar {
    display: none;
  }
  .office-month-pillrow button,
  .office-month-pills .office-year,
  .office-month-pills .office-year-fixed {
    flex: none;
  }
  .office-filters {
    flex-wrap: wrap;
    gap: 8px;
  }
  .office-filters .office-search-wrap {
    flex: 1 1 100%;
  }
  .office-filters .office-pills {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .office-filters .office-pills::-webkit-scrollbar {
    display: none;
  }
  .office-table-wrap .office-table,
  .office-table-wrap .office-table tbody {
    display: block;
    width: 100%;
  }
  .office-table-wrap .office-table colgroup,
  .office-table-wrap .office-table thead {
    display: none;
  }
  .office-table-wrap .office-table tbody {
    display: grid;
    gap: 8px;
    padding: 2px 0 8px;
  }
  .office-table-wrap .office-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--card) 70%, transparent);
  }
  .office-table-wrap .office-table tbody th,
  .office-table-wrap .office-table tbody td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
  }
  .office-table-wrap .office-table td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }
  /* Change fund: the day is the card's heading; each daypart with a count is a labelled line */
  .office-table.is-grid tbody tr {
    display: grid;
    gap: 4px;
  }
  .office-table.is-grid tbody th {
    font-size: 16px;
    font-weight: 800;
  }
  .office-table.is-grid tbody td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
  }
  .office-table.is-grid tbody td::before {
    flex: 0 0 74px;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .office-table.is-grid tbody td.is-empty {
    display: none !important;
  }
  .office-table.is-grid .office-count {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    min-width: 0;
    padding: 4px 10px;
    text-align: left;
  }
  /* Guest Recovery: the guest and status on top, then what was replaced, then the small details */
  .office-table:not(.is-grid):not(.is-condensed) tbody td:nth-child(2) {
    order: 1;
    flex: 1 1 0;
    font-weight: 800;
  }
  .office-table:not(.is-grid):not(.is-condensed) tbody td:nth-child(2)::before,
  .office-table:not(.is-grid):not(.is-condensed) tbody td:nth-child(3)::before,
  .office-table:not(.is-grid):not(.is-condensed) tbody td:nth-child(1)::before {
    display: none;
  }
  .office-table:not(.is-grid):not(.is-condensed) tbody td:nth-child(7) {
    order: 2;
  }
  .office-table:not(.is-grid):not(.is-condensed) tbody td:nth-child(3) {
    order: 3;
    flex: 1 1 100%;
  }
  .office-table:not(.is-grid):not(.is-condensed) tbody td:nth-child(1),
  .office-table:not(.is-grid):not(.is-condensed) tbody td:nth-child(4),
  .office-table:not(.is-grid):not(.is-condensed) tbody td:nth-child(5),
  .office-table:not(.is-grid):not(.is-condensed) tbody td:nth-child(6) {
    order: 4;
    color: var(--muted);
    font-size: 12px;
  }
}

@media (max-width: 560px) {
  .office-app {
    padding-left: 12px;
    padding-right: 12px;
  }
  .office-body {
    padding-left: 0;
    padding-right: 0;
  }
  .office-table-wrap .office-table tbody tr,
  .office-table-wrap .office-table tbody th,
  .office-table-wrap .office-table tbody td {
    height: auto;
    min-height: 0;
  }
  .office-table.is-grid tbody td {
    flex-wrap: nowrap;
    align-items: center;
  }
  .office-table.is-grid .office-count {
    flex: 1 1 0;
    flex-direction: row;
    justify-content: flex-start;
    height: auto;
    min-height: 0;
  }
  .office-table.is-grid tbody tr:not(:has(td:not(.is-empty))) {
    padding: 6px 12px;
  }
}

@media (max-width: 560px) {
  .office-body {
    margin-left: 0;
    margin-right: 0;
  }
  .office-month-pills {
    width: 100%;
    max-width: 100%;
  }
  .office-month-pillrow {
    flex: 1 1 0;
  }
}

@media (max-width: 560px) {
  [data-fund-pills],
  [data-care-pills],
  .office-fund-bar > * {
    min-width: 0;
    max-width: 100%;
  }
  .office-fund-bar {
    flex-wrap: wrap;
    min-width: 0;
  }
  .office-expected-box {
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
  }
}

@media (max-width: 560px) {
  .office-table:not(.is-grid):not(.is-condensed) tbody td:nth-child(7)::before {
    display: none;
  }
  .office-filters .office-search-wrap {
    flex: 1 1 0;
    min-width: 0;
  }
  .office-filters .office-pills {
    flex: 1 1 100%;
  }
  .office-filters .office-pills button {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* ---- Phones: the board's columns stack, each showing all of its cards; the board itself scrolls ---- */
@media (max-width: 560px) {
  .office-board-wrap {
    overflow-y: auto;
    min-height: 0;
  }
  .office-board-layout,
  .office-board {
    height: auto;
    grid-template-rows: none;
    grid-auto-rows: auto;
    align-items: start;
  }
  .office-board-col,
  .office-board-col.is-scroll {
    max-height: none;
    height: auto;
  }
  .office-board-cards {
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 560px) {
  .office-board-card.is-uniform {
    height: auto;
    min-height: 66px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .office-board-col {
    padding: 10px;
  }
  .office-board-cards {
    gap: 6px;
  }
}

/* ---- Phones: a count's detail. The equation is a small grid and the bills and coins sit in rows that fit ---- */
@media (max-width: 560px) {
  .office-dialog .office-fund-eq {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 10px;
    overflow: visible;
  }
  .office-dialog .office-fund-eq > i {
    display: none;
  }
  .office-dialog .office-fund-eq .office-sum-part,
  .office-dialog .office-fund-eq .office-sum-total {
    min-width: 0;
  }
  .office-dialog .office-fund-eq .office-sum-part b {
    font-size: 14px;
  }
  .office-dialog .office-fund-eq .office-sum-total {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .office-dialog .office-fund-group {
    flex-wrap: wrap;
    gap: 6px;
  }
  .office-dialog .office-fund-tile {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    padding: 6px 10px;
  }
  .office-dialog .office-fund-tile b {
    font-size: 17px;
  }
  .office-dialog .office-actions.is-top:not(:has(button)) {
    display: none;
  }
}

/* ---- Phones: settings rows are one column and never wider than the window ---- */
@media (max-width: 560px) {
  .office-dialog .office-pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .office-dialog .office-field,
  .office-dialog .office-handler,
  .office-dialog .office-help,
  .office-dialog fieldset {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 560px) {
  .office-dialog .office-uni-row,
  .office-dialog .office-uni-row * {
    min-width: 0;
  }
  .office-dialog .office-uni-row,
  .office-dialog .office-uni-row > * {
    max-width: 100%;
  }
  .office-dialog .office-uni-top {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .office-dialog .office-uni-top input {
    flex: 1 1 100%;
  }
  .office-dialog [data-uni-list],
  .office-dialog .office-uni-row {
    box-sizing: border-box;
  }
}

/* A priced uniform order waiting in New: unpaid in amber, paid in green, and a PAID switch in its details */
.office-uni-amount {
  display: grid;
  justify-items: end;
  line-height: 1.1;
}
.office-uni-amount small {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.office-uni-amount.is-unpaid {
  color: #e4a72b;
}
.office-uni-amount.is-paid {
  color: #3fb950;
}

/* The paid mark stays with a uniform card: yellow total while owed, green with a tick once paid, and Free with a tick */
.office-uni-amount {
  display: block;
}
.office-uni-amount.is-unpaid {
  color: #e4a72b;
}
.office-uni-amount.is-paid,
.office-uni-amount.is-free {
  color: #3fb950;
}
/* The board bar's extra buttons */
.office-paid-btn {
  border: 2px solid #3fb950;
  background: #3fb950;
  color: #08210f;
  font-weight: 800;
}
.office-unpaid-btn {
  border: 2px solid #3fb950;
  background: transparent;
  color: #3fb950;
  font-weight: 800;
}
.office-trash-btn {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.office-trash-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.office-trash-btn.is-confirm {
  background: #b3262b;
}
.office-board-bar button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* The details panel is slim, the board's columns ease over to make room, and a card that gets tight drops its amount underneath */
.office-board-layout {
  transition: grid-template-columns 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.office-board-layout.has-panel {
  grid-template-columns: minmax(0, 1fr) 280px;
}
.office-detail-card.is-compact {
  padding: 4px 6px 8px;
}
.office-detail-card.is-compact > header {
  padding: 8px 46px 6px 8px;
}
.office-detail-card.is-compact h3 {
  margin: 0;
  font-size: 20px;
}
.office-detail-card.is-compact .office-cost-list {
  margin: 0;
}
.office-board-card.is-uniform {
  flex-wrap: wrap;
}
.office-board-card.is-uniform .office-uni-main {
  flex: 1 1 100px;
}
.office-board-card.is-uniform .office-uni-amount {
  margin-left: auto;
}

.office-board-bar .office-paid-btn {
  border: 2px solid #3fb950;
  background: #3fb950;
  color: #08210f;
}
.office-board-bar .office-unpaid-btn {
  border: 2px solid #3fb950;
  background: transparent;
  color: #3fb950;
}
.office-board-bar .office-trash-btn {
  background: #e5484d;
  color: #fff;
}
.office-board-panel:has(.is-compact) {
  align-self: start;
}

/* Narrow screens: the details sit above the board instead of beside it, and the bar's buttons wrap */
@media (max-width: 900px) {
  .office-board-layout.has-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .office-board-layout.has-panel .office-board-panel {
    order: -1;
    align-self: start;
  }
}
@media (max-width: 560px) {
  .office-board-bar {
    left: 8px;
    right: 8px;
    max-width: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 6px;
  }
  .office-board-bar button {
    min-height: 40px;
    padding: 0 12px;
    font-size: 14px;
  }
}

@media (max-width: 560px) {
  .office-board-bar {
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    width: auto !important;
  }
  .office-board-layout.has-panel .office-board-panel {
    position: static;
    max-height: none;
    margin-bottom: 8px;
  }
}

@media (max-width: 900px) {
  .office-board-layout.has-panel {
    grid-template-rows: auto auto !important;
    height: auto;
  }
}

@media (max-width: 900px) {
  .office-board-layout.has-panel {
    height: auto !important;
    flex: none;
    align-content: start;
  }
  .office-board-layout.has-panel .office-board-panel {
    overflow: visible;
    max-height: none;
    min-height: max-content;
  }
}

/* In the slim details, each item leads with its quantity */
.office-detail-card.is-compact .office-cost-list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.office-detail-card.is-compact .office-cost-list li.is-total {
  grid-template-columns: minmax(0, 1fr) auto;
}
.office-line-qty {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text, #fff) 14%, transparent);
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
}

/* Quantities of two or more stand out in yellow; the bottom line turns green once it is paid */
.office-line-qty.is-many {
  background: #e4a72b;
  color: #231a05;
}
.office-detail-card.is-compact .office-cost-list li.is-total.is-paid {
  background: color-mix(in srgb, #3fb950 20%, transparent);
  color: #3fb950;
}

/* A supply request's slim details: reference and status on one line, then who and what */
.office-detail-card.is-supply > header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 46px 8px 8px;
}
.office-detail-card.is-supply .office-supply-rows {
  display: grid;
  gap: 6px;
  padding: 0 4px 6px;
}

.office-detail-card.is-supply > header {
  flex-wrap: wrap;
}
.office-detail-card.is-supply .office-ref {
  white-space: nowrap;
}
.office-detail-card.is-supply .office-detail-flags {
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.office-supply-row {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}
.office-supply-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.office-supply-row b {
  font-size: 17px;
  overflow-wrap: anywhere;
}

/* Supply details, tidied: one tight header line, then two short groups separated by a rule */
.office-detail-card.is-supply > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 6px 44px 6px 8px;
}
.office-detail-card.is-supply .office-urgent-switch {
  min-height: 0;
  padding: 3px 10px;
  font-size: 11px;
}
.office-detail-card.is-supply .office-supply-rows {
  display: grid;
  gap: 4px;
  padding: 0 6px 6px;
}
.office-detail-card.is-supply .office-supply-rows.is-second {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.office-supply-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}
.office-supply-row.is-block {
  display: grid;
  gap: 2px;
}
.office-supply-row span {
  flex: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.office-supply-row b {
  min-width: 0;
  font-size: 15px;
  text-align: right;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.office-supply-row.is-block b {
  text-align: left;
  font-weight: 600;
}

.office-detail-card.is-supply > header {
  flex-wrap: nowrap;
  gap: 6px;
  padding-right: 40px;
}
.office-detail-card.is-supply .office-ref {
  font-size: 12px;
}
.office-detail-card.is-supply > header .office-chip,
.office-detail-card.is-supply > header .office-urgency {
  padding: 3px 8px;
  font-size: 11px;
  white-space: nowrap;
}

/* ---- Missed time punch: the work queue. One tight row per adjustment; a member's rows share a bar and a tint, and the next member alternates ---- */
.office-table.is-punch {
  width: 100%;
  border-collapse: collapse;
}
.office-table.is-punch thead th {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}
.office-table.is-punch tbody td {
  padding: 8px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
  vertical-align: middle;
}
.office-table.is-punch tbody tr.is-first td {
  border-top: 1px solid var(--line);
}
.office-table.is-punch tbody tr.is-alt td {
  background: rgba(255, 255, 255, 0.04);
}
.office-table.is-punch tbody td:first-child {
  box-shadow: inset 4px 0 0 var(--accent, #4b8df0);
}
.office-table.is-punch tbody tr.is-alt td:first-child {
  box-shadow: inset 4px 0 0 #e4a72b;
}
.office-punch-name {
  width: 180px;
  padding-left: 16px !important;
}
.office-punch-name b {
  display: block;
  font-size: 16px;
}
.office-punch-name small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.office-punch-day {
  font-weight: 700;
  white-space: nowrap;
}
.office-table.is-punch td.is-time {
  font-size: 17px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.office-punch-notes {
  max-width: 240px;
  color: var(--muted);
  font-size: 14px;
}
.office-punch-actions {
  white-space: nowrap;
  text-align: right !important;
}
/* A phone shows the times as one line (the separate time columns are for wider screens) */
.office-punch-times {
  display: none;
}
@media (max-width: 560px) {
  [data-punch-view] {
    border: 0;
    background: transparent;
  }
  [data-punch-view] .office-table.is-punch.is-punch tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name act"
      "day day"
      "sum sum"
      "note note";
    gap: 2px 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent, #4b8df0);
    border-radius: 14px;
    background: color-mix(in srgb, var(--card) 70%, transparent);
  }
  [data-punch-view] .office-table.is-punch.is-punch tbody tr.is-alt {
    border-left-color: #e4a72b;
  }
  [data-punch-view] .office-table.is-punch.is-punch tbody td {
    display: none !important;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  [data-punch-view] .office-table.is-punch.is-punch tbody td.office-punch-name,
  [data-punch-view] .office-table.is-punch.is-punch tbody td.office-punch-day,
  [data-punch-view] .office-table.is-punch.is-punch tbody td.office-punch-times,
  [data-punch-view] .office-table.is-punch.is-punch tbody td.office-punch-actions {
    display: block !important;
  }
  [data-punch-view] .office-table.is-punch.is-punch tbody td.office-punch-notes:not(:empty) {
    display: block !important;
  }
  [data-punch-view] .office-table.is-punch.is-punch tbody td::before {
    content: none !important;
  }
  [data-punch-view] .office-table.is-punch.is-punch td.office-punch-name {
    grid-area: name;
    min-width: 0;
    color: inherit !important;
    font-size: 16px !important;
    font-weight: 800;
  }
  [data-punch-view] .office-table.is-punch.is-punch td.office-punch-name > * {
    display: none;
  }
  [data-punch-view] .office-table.is-punch.is-punch td.office-punch-name::before {
    content: attr(data-name) !important;
    display: inline;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
  [data-punch-view] .office-table.is-punch.is-punch td.office-punch-actions {
    grid-area: act;
    text-align: right;
  }
  [data-punch-view] .office-table.is-punch.is-punch td.office-punch-day {
    grid-area: day;
    color: var(--muted) !important;
    font-size: 13px !important;
  }
  [data-punch-view] .office-table.is-punch.is-punch td.office-punch-times {
    grid-area: sum;
    padding-top: 2px;
  }
  [data-punch-view] .office-punch-times span {
    display: inline-block;
    margin-right: 14px;
  }
  [data-punch-view] .office-punch-times small {
    margin-right: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }
  [data-punch-view] .office-punch-times b {
    font-size: 16px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
  }
  [data-punch-view] .office-table.is-punch.is-punch td.office-punch-notes {
    grid-area: note;
    max-width: none;
    color: var(--muted) !important;
    font-size: 13px !important;
    font-weight: 600;
  }
}

@media (max-width: 560px) {
  [data-punch-view] .office-table.is-punch.is-punch td.office-punch-name {
    padding-left: 0 !important;
  }
  [data-punch-view] .office-table.is-punch.is-punch td.office-punch-times,
  [data-punch-view] .office-table.is-punch.is-punch td.office-punch-day,
  [data-punch-view] .office-table.is-punch.is-punch td.office-punch-notes {
    justify-self: stretch;
    margin: 0;
    padding-left: 0 !important;
    text-align: left;
  }
}

/* ---- Missed time punch: picking rows (yellow), entered rows (green), the bar that acts on them, and the paper copy ---- */
.office-filters:has(.office-punch-bar) {
  align-items: center;
}
.office-punch-bar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 40px;
  margin-left: auto;
}
.office-punch-bar button {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.office-punch-all,
.office-punch-clear {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0 6px !important;
}
.office-punch-go {
  border: 0;
  background: #3fb950;
  color: #08210f;
}
.office-punch-go.is-print {
  border: 1px solid #3fb950;
  background: transparent;
  color: #3fb950;
}
.office-punch-undo {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
}
.office-punch-count {
  font-size: 14px;
  font-weight: 800;
}
.office-punch-name {
  cursor: pointer;
}
.office-punch-check {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--muted) 70%, transparent);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
}
tr.is-entered .office-punch-check {
  border-color: #3fb950;
  background: #3fb950;
}
tr.is-picked .office-punch-check,
.office-punch-check[aria-pressed="true"] {
  border-color: #e4a72b;
  background: #e4a72b;
}
tr.is-entered .office-punch-check::after,
.office-punch-check[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 4px;
  width: 6px;
  height: 12px;
  border: solid #08210f;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.office-table.is-punch tbody tr.is-entered td {
  background: rgba(63, 185, 80, 0.14);
}
.office-table.is-punch tbody tr.is-picked td {
  background: rgba(228, 167, 43, 0.2);
}
@media (max-width: 560px) {
  [data-punch-view] .office-table.is-punch.is-punch tr.is-entered {
    background: rgba(63, 185, 80, 0.14);
  }
  [data-punch-view] .office-table.is-punch.is-punch tr.is-picked {
    background: rgba(228, 167, 43, 0.2);
  }
  .office-punch-bar {
    margin-left: 0;
    width: 100%;
  }
}
/* The sheet itself (preview and paper): black on white, one line per adjustment, a box to tick as each is entered */
.office-punch-sheet {
  box-sizing: border-box;
  width: 816px;
  padding: 48px;
  background: #fff;
  color: #000;
  font:
    11pt/1.3 system-ui,
    sans-serif;
}
.office-punch-sheet h1 {
  margin: 0 0 4pt;
  font-size: 18pt;
}
.office-punch-sheet p {
  margin: 0 0 12pt;
  color: #333;
}
.office-punch-sheet table {
  width: 100%;
  border-collapse: collapse;
}
.office-punch-sheet th,
.office-punch-sheet td {
  padding: 6pt 6pt;
  border-bottom: 1px solid #999;
  text-align: left;
  font-size: 10pt;
}
.office-punch-sheet th {
  font-size: 8pt;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.office-punch-sheet tr {
  break-inside: avoid;
}
.office-punch-sheet td.box {
  width: 44px;
}
.office-punch-sheet td.box::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.5px solid #000;
}
.office-punch-print {
  display: none;
}
/* ---- Print preview window ---- */
.office-pv-wrap {
  position: fixed;
  inset: 0;
  z-index: 10000000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.6);
}
.office-pv {
  display: flex;
  flex-direction: column;
  width: min(1040px, 100%);
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  padding: 20px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
}
.office-pv header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.office-pv header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.office-pv header h2 {
  margin: 3px 0;
  font-size: 20px;
}
.office-pv header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.office-pv header button {
  align-self: flex-start;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.office-pv-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  min-height: 0;
}
.office-pv aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
.office-pv-note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.office-pv footer {
  display: flex;
  gap: 10px;
}
.office-pv footer button {
  flex: 1;
  min-height: 44px;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 850;
  cursor: pointer;
}
.office-pv-cancel {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
}
.office-pv-print {
  border: 0;
  background: #f5c842;
  color: #241a00;
}
.office-pv-frame {
  min-height: 0;
  max-height: calc(100vh - 36px - 120px);
  max-height: calc(100dvh - 36px - 120px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}
.office-pv-space {
  margin: 0 auto;
}
.office-pv-paper {
  transform-origin: top left;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
@media (max-width: 700px) {
  .office-pv-grid {
    grid-template-columns: 1fr;
  }
  .office-pv aside {
    order: 2;
  }
  .office-pv-frame {
    max-height: calc(100vh - 290px);
    max-height: calc(100dvh - 290px);
  }
}
@media print {
  @page {
    margin: 12mm;
  }
  html,
  body {
    background: #fff !important;
  }
  body > *:not(.office-punch-print) {
    display: none !important;
  }
  .office-punch-print {
    display: block !important;
  }
  .office-punch-print .office-punch-sheet {
    width: auto;
    padding: 0;
  }
}

/* The pay period readout under the tabs and on the paper copy; nothing but the note may wrap onto a second line */
.office-punch-period {
  margin: 8px 2px 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}
.office-punch-sheet p {
  margin-bottom: 2pt;
}
.office-punch-sheet p.office-punch-period {
  margin: 0 0 12pt;
  color: #000;
  font-size: 11pt;
}
.office-punch-sheet th,
.office-punch-sheet td:not(.note) {
  white-space: nowrap;
}

/* Unmarked entries: a red dot on the corner of each payroll pill; a late line carries a small tag */
.office-filters:has(.office-punch-bar) {
  margin-top: 8px;
}
.office-filters:has(.office-punch-bar) .office-pills {
  overflow: visible;
}
[data-punch-tab] {
  position: relative;
  overflow: visible;
}
.office-punch-badge {
  position: absolute;
  top: -9px;
  right: -7px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #e5484d;
  box-shadow: 0 0 0 2px var(--bg, #14161a);
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 22px;
  text-align: center;
}
.office-punch-late {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(229, 72, 77, 0.18);
  color: #ff8a8e;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* The pay period readout: larger, "Pay Period" then "Payroll Day" */
.office-punch-period {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  color: var(--text);
  font-size: 19px;
  font-weight: 800;
}
.office-punch-period span {
  white-space: nowrap;
}
.office-punch-sheet p.office-punch-period {
  display: block;
  font-size: 13pt;
}
.office-punch-sheet p.office-punch-period span {
  display: inline-block;
  margin-right: 24pt;
}

/* The dates in the readout stand out: yellow on screen, a marker highlight on paper */
.office-punch-period b {
  padding: 1px 9px;
  border-radius: 6px;
  background: #e4a72b;
  color: #17191f;
  font-weight: 850;
}
.office-punch-sheet p.office-punch-period b {
  padding: 0 3pt;
  border-radius: 2pt;
  background: #e4a72b;
  color: #000;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ---- Dialogs open with the forms' motion: the panel rises and settles. Only the panel moves (never the full-screen layer behind it),
   and closing is immediate, so nothing is left animating over the page when a form is done. ---- */
@keyframes office-dialog-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.office-dialog {
  animation: office-dialog-in 0.36s var(--of-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
@media (prefers-reduced-motion: reduce) {
  .office-dialog {
    animation-duration: 0.01ms !important;
  }
}

/* ---- Home: the tiles stacked down the left third, the inbox filling the right two thirds ---- */
.office-home2 {
  display: grid;
  flex: 1 1 0;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
  gap: 18px;
  min-height: 0;
  padding-bottom: 14px;
}
.office-home2-tiles {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.office-home2-tiles .office-tiles {
  grid-template-columns: 1fr;
  gap: 10px;
}
.office-home2-tiles .office-tile {
  min-height: 84px;
  padding: 12px 18px;
  border-width: 2px;
  border-radius: 20px;
}
.office-inbox {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.15fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px 14px;
  min-height: 0;
}
.office-inbox-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.office-inbox-head h3 {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.office-inbox-list,
.office-inbox-detail {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  padding: 8px;
}
.office-inbox-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.office-inbox-row {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "pill chip"
    "ref age";
  align-items: center;
  gap: 4px 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--office-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.office-inbox-row.is-selected {
  border-color: var(--office-accent);
  background: rgba(108, 123, 242, 0.16);
}
.office-inbox-row:not(.is-open) {
  opacity: 0.72;
}
.office-inbox-row > .office-inbox-pill {
  grid-area: pill;
  justify-self: start;
}
.office-inbox-row > .office-chip {
  grid-area: chip;
  justify-self: end;
}
.office-inbox-row > b {
  grid-area: ref;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.office-inbox-age {
  grid-area: age;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}
.office-inbox-pill {
  max-width: 100%;
  overflow: hidden;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--tile) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tile) 20%, transparent);
  color: color-mix(in srgb, var(--tile) 70%, #fff);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.office-inbox-urgent {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(229, 72, 77, 0.2);
  color: #ff8a8e;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}
.office-inbox-go {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 8px;
}
.office-inbox-go button {
  min-height: 44px;
}
@media (max-width: 900px) {
  .office-home2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    overflow-y: auto;
  }
  .office-home2-tiles {
    overflow: visible;
  }
  .office-home2-tiles .office-tiles {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .office-inbox {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .office-inbox-detail {
    display: none;
  }
  .office-inbox-list {
    max-height: none;
    overflow: visible;
  }
}

/* On a narrow screen the home is one long page: the tiles, then the inbox, scrolling together */
@media (max-width: 900px) {
  .office-home2 {
    flex: 0 0 auto;
    grid-template-rows: auto auto;
    min-height: auto;
    overflow: visible;
  }
  .office-inbox {
    min-height: auto;
    grid-template-rows: auto auto;
  }
  .office-inbox-list {
    min-height: auto;
  }
}

/* The inbox lines: the form's tag and the age on top, then who or what in bold, then what is wanted */
.office-inbox-row {
  grid-template-areas:
    "pill age"
    "title chip"
    "sub sub";
  gap: 6px 10px;
  padding: 11px 13px;
}
.office-inbox-row:not(.is-open) {
  opacity: 1;
}
.office-inbox-title {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.office-inbox-sub {
  grid-area: sub;
  min-width: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* a long item or name wraps instead of being cut off */
.office-inbox-title {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* All six tiles fit on an iPad screen without scrolling: shorter tiles and tighter gaps in the left column */
.office-home2-tiles {
  gap: 14px;
}
.office-home2-tiles .office-tiles {
  gap: 8px;
}
.office-home2-tiles .office-tile {
  min-height: 66px;
  padding: 8px 16px;
}
.office-home2-tiles .office-group h3 {
  margin-bottom: 6px;
}

/* ---- Private details on a request: shown on request, deleted once recorded ---- */
.office-sealed {
  display: grid;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, #e4a72b 45%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, #e4a72b 7%, transparent);
}
.office-sealed h4 {
  margin: 0;
  color: #e4a72b;
}
.office-sealed-label {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}
.office-sealed-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.office-sealed button,
.office-sealed-wrap > button {
  justify-self: start;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.office-sealed-list {
  display: grid;
  gap: 6px;
  margin: 0;
}
.office-sealed-list div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}
.office-sealed-wrap {
  display: grid;
  justify-items: start;
  gap: 10px;
}
/* Hidden and shown take exactly the same room: both are monospace lines, and a hidden line is a run of dots as wide as the shown one */
.office-sealed-list dd {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre;
}
.office-sealed-list dd.is-hidden {
  color: var(--muted);
  user-select: none;
}
/* The copy icon sits at the right end of a row. Its place is kept while the values are hidden so nothing moves. */
.office-sealed-list .office-copy {
  display: grid;
  place-items: center;
  width: 28px;
  height: 22.5px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  position: relative;
}
.office-sealed-list .office-copy::before {
  content: "";
  position: absolute;
  inset: -11px -8px;
}
.office-sealed-list .office-copy.is-idle {
  visibility: hidden;
}
.office-sealed-list .office-copy svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.office-sealed-list .office-copy:active,
.office-sealed-list .office-copy.is-copied {
  color: #e4a72b;
}
.office-dots {
  display: block;
  width: calc(var(--n) * 1ch);
  height: 1.5em;
  background: radial-gradient(circle at 50% 50%, currentColor 0 1.5px, transparent 2px) 0 0 / 1ch 1.5em repeat-x;
}
.office-sealed-list dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 22.5px;
}
.office-sealed-list dd {
  white-space: pre;
  margin: 0;
  font-weight: 800;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Seven tiles: a little shorter again so they all fit on an iPad without scrolling */
.office-home2-tiles {
  gap: 10px;
}
.office-home2-tiles .office-tiles {
  gap: 6px;
}
.office-home2-tiles .office-tile {
  min-height: 58px;
  padding: 6px 16px;
}
.office-home2-tiles .office-group h3 {
  margin-bottom: 4px;
}

/* The delete button sits at the end of the action row; armed, it asks for a second tap */
.office-actions .office-trash-btn {
  margin-left: auto;
  min-height: 44px;
}
.office-actions .office-trash-btn.is-confirm::after {
  content: "Tap again to delete";
  margin-left: 8px;
  font-size: 13px;
}
.office-actions .office-trash-btn.is-confirm {
  display: inline-flex;
  align-items: center;
}

/* ---- The inbox's reading view: a header, label and value rows, notes set apart, and the way to the right page at the bottom ---- */
.office-inbox-detail {
  padding: 18px 20px;
}
.office-inbox-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
}
.office-inbox-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.office-inbox-when {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.office-inbox-card h3 {
  margin: 10px 0 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.office-inbox-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}
.office-leader-pill {
  display: inline-block;
  padding: 1px 11px;
  border-radius: 999px;
  background: rgba(228, 167, 43, 0.2);
  color: #e4a72b;
  font-weight: 800;
}
.office-facts {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--line);
}
.office-fact {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
}
.office-fact dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.office-fact dd {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.office-inbox-note {
  padding: 12px 16px;
  border-left: 3px solid var(--office-accent);
  border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, 0.04);
}
.office-inbox-note span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.office-inbox-note p {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.office-inbox-lines {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.office-inbox-lines li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  font-weight: 700;
}
.office-inbox-lines .office-line-qty {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  font-style: normal;
  font-weight: 850;
}
.office-inbox-lines .office-line-qty.is-many {
  background: rgba(228, 167, 43, 0.25);
  color: #e4a72b;
}
.office-inbox-lines small {
  color: var(--muted);
  font-weight: 600;
}
.office-inbox-owed {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 2px 2px 0;
  font-size: 18px;
  font-weight: 850;
}
.office-inbox-owed.is-owed b,
.office-inbox-owed.is-owed span {
  color: #e4a72b;
}
.office-inbox-owed.is-paid b,
.office-inbox-owed.is-paid span {
  color: #3fb950;
}
.office-inbox-private {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, #e4a72b 8%, transparent);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}
.office-inbox-private svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  fill: none;
  stroke: #e4a72b;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.office-inbox-foot {
  margin-top: auto;
  padding-top: 6px;
}
.office-inbox-foot button {
  width: 100%;
  min-height: 50px;
  font-size: 16px;
}
@media (max-width: 560px) {
  .office-fact {
    grid-template-columns: 104px minmax(0, 1fr);
  }
  .office-inbox-card h3 {
    font-size: 22px;
  }
}

/* General Admin: the buttons sit to the right of the name; Other is a plain box; the revealed private details line up in two columns */
.office-actions.is-head {
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}
.office-answer.is-note {
  grid-template-columns: 1fr;
}
.office-sealed-list div {
  display: grid;
  grid-template-columns: minmax(96px, 140px) minmax(0, 1fr) 28px;
  column-gap: 12px;
  justify-content: stretch;
  align-items: start;
}
.office-sealed-list dd {
  text-align: left;
}

.office-sealed-undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.office-sealed-undo b {
  margin-right: auto;
  font-variant-numeric: tabular-nums;
}

/* ---- Admin Hub settings: the suite's settings shell, with the hub's own controls dressed to match ---- */
.office-overlay.is-settings {
  padding: 24px;
}
.office-settings-shell .settings-content {
  padding: 28px 32px 40px;
}
.office-settings-shell .settings-card .office-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.office-settings-shell .settings-field textarea,
.office-settings-shell .office-textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #1e1f22;
  border-radius: 4px;
  background: #1e1f22;
  color: #dbdee1;
  font: inherit;
  font-size: 15px;
  line-height: 1.45;
  text-transform: none;
}
.office-settings-shell .office-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: #dbdee1;
  font-size: 15px;
}
.office-settings-shell .office-money-input,
.office-settings-shell .office-select {
  border-color: #1e1f22;
  background: #1e1f22;
  color: #dbdee1;
}
.office-settings-shell .office-money-input input {
  height: 42px;
  border: 0;
  background: transparent;
  color: inherit;
}
/* fields: roomy, rounded, with a clear focus ring */
.office-settings-shell .settings-field > span:first-child {
  display: block;
  margin-bottom: 6px;
  color: #b5bac1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.office-settings-shell input[type="text"],
.office-settings-shell input[type="number"],
.office-settings-shell .office-select,
.office-settings-shell .office-money-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #1e1f22;
  border-radius: 10px;
  background: #1e1f22;
  color: #dbdee1;
  font: inherit;
  font-size: 15px;
}
.office-settings-shell .office-money-input {
  display: flex;
  align-items: center;
  gap: 8px;
}
.office-settings-shell .office-money-input input {
  min-height: 0;
  padding: 0;
  border-radius: 0;
}
.office-settings-shell input:focus-visible,
.office-settings-shell textarea:focus-visible,
.office-settings-shell .office-select:focus-visible,
.office-settings-shell .office-money-input:focus-within {
  outline: 2px solid #6c7bf2;
  outline-offset: 0;
}
.office-settings-shell .office-textarea {
  border-radius: 10px;
}
.office-settings-shell .custom-select-display {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  border: 1px solid #1e1f22;
  border-radius: 10px;
  background: #1e1f22;
  color: #dbdee1;
  font: inherit;
  font-size: 15px;
}
.office-settings-shell .settings-card > .settings-field + .settings-field,
.office-settings-shell .office-uni-body > * + * {
  margin-top: 14px;
}
.office-settings-shell .settings-card > .settings-help {
  margin: 0 0 14px;
}
.office-settings-shell .office-days {
  max-width: 160px;
}
.office-settings-shell .office-list-title {
  display: block;
  margin: 18px 0 8px;
  color: #b5bac1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* lists of lines (positions, steps) */
.office-lines {
  display: grid;
  gap: 8px;
}
.office-line {
  display: flex;
  gap: 8px;
}
.office-line input {
  flex: 1 1 auto;
  min-width: 0;
}
.office-line-remove {
  flex: 0 0 46px;
  height: 46px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #9aa0a8;
  font: inherit;
  cursor: pointer;
}
.office-line-remove:hover {
  background: #3a2a2d;
  color: #ff6b70;
}
.office-add {
  justify-self: start;
  min-height: 44px;
  margin-top: 6px;
  padding: 0 16px;
  border: 1px dashed #4e5058;
  border-radius: 10px;
  background: transparent;
  color: #aab4ff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.office-add:hover {
  border-color: #6c7bf2;
  background: #6c7bf21a;
}
.office-add[hidden] {
  display: none;
}
/* an article: folded to a line, opens to its settings */
.office-settings-shell .office-uni-row {
  margin-bottom: 10px;
  border: 1px solid #3f4147;
  border-radius: 12px;
  background: #2b2d31;
  overflow: hidden;
}
.office-uni-sum {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 12px 8px 16px;
  list-style: none;
  cursor: pointer;
}
.office-uni-sum::-webkit-details-marker {
  display: none;
}
.office-chev {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid #9aa0a8;
  border-bottom: 2px solid #9aa0a8;
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}
.office-uni-row[open] > .office-uni-sum .office-chev {
  transform: rotate(45deg);
}
.office-uni-name {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}
.office-uni-name b {
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.office-uni-name small {
  color: #9aa0a8;
  font-size: 13px;
}
.office-settings-shell .office-uni-move {
  display: flex;
  gap: 2px;
  margin-left: auto;
}
.office-settings-shell .office-uni-move button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #9aa0a8;
}
.office-settings-shell .office-uni-move button:hover {
  background: #383a40;
  color: #fff;
}
.office-settings-shell .office-uni-move .office-uni-remove:hover {
  background: #3a2a2d;
  color: #ff6b70;
}
.office-settings-shell .office-uni-body {
  padding: 16px 16px 18px;
  border-top: 1px solid #3f4147;
}
.office-settings-shell .office-uni-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 12px;
}
.office-more > summary {
  display: inline-block;
  margin: 14px 0 6px;
  color: #aab4ff;
  font-weight: 700;
  cursor: pointer;
}
.office-more .settings-switch-row {
  margin-top: 12px;
}
/* sizes, styles, waists and lengths as chips */
.office-settings-shell .office-mini {
  display: block;
  margin: 0 0 6px;
  color: #b5bac1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.office-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 6px 8px;
  border: 1px solid #1e1f22;
  border-radius: 10px;
  background: #1e1f22;
}
.office-chips:focus-within {
  outline: 2px solid #6c7bf2;
}
.office-chip-list {
  display: contents;
}
.office-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 32px;
  padding: 0 4px 0 12px;
  border-radius: 999px;
  background: #3b3f6b;
  color: #e3e6ff;
  font-size: 14px;
  font-weight: 700;
}
.office-chip-x {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #aab4ff;
  font-size: 11px;
  cursor: pointer;
}
.office-chip-x:hover {
  background: #ffffff22;
}
.office-settings-shell .office-chips .office-chip-input {
  flex: 1 1 120px;
  width: auto;
  min-width: 120px;
  min-height: 32px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  outline: 0;
}
.office-link {
  margin: 8px 0 0;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: #aab4ff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.office-choices {
  display: grid;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
  background: #232428;
}
.office-choices [hidden] {
  display: none;
}
.office-fit {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px;
  border-radius: 10px;
  background: #2b2d31;
}
.office-fit-top {
  display: flex;
  gap: 8px;
}
.office-fit-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 760px) {
  .office-fit-pair {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .office-settings-shell .office-uni-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.office-settings-shell .office-imports {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
@media (max-width: 760px) {
  .office-overlay.is-settings {
    padding: 0;
  }
  .office-settings-shell .settings-content {
    padding: 20px 18px 32px;
  }
  .office-settings-shell .settings-card .office-pair {
    grid-template-columns: 1fr;
  }
}