/* THE MONEY PAGES, TIDIED (Chase's picks, 3 Nov 2026): Get paid "Deck and next names", a job's billing page
   "Two columns", Back office "Tidy list". Only what these pages add is here; the cards, buttons, lists and
   tokens are the app's own. Phone first: one column, then the desk's two or three. */

/* ================================================================ GET PAID == */
.gp-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; }
.gp-nav .ui-tabs { align-self: flex-start; }
.gp-pages { display: flex; flex-wrap: wrap; align-items: center; margin-right: -0.625rem; }

/* What matters today: one quiet line, there only once the AI's words are in. */
.gp-today { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 0.75rem; margin: -0.5rem 0; font-size: 0.9375rem; line-height: 1.375rem; color: var(--color-ink); }
.gp-today:not(:has([data-ai-summary-body])) { display: none; }
.gp-today-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.gp-today-words { flex: 1 1 20rem; min-width: 0; }
.gp-today-words [data-ai-summary] { margin: 0; }
.gp-today-words [data-ai-summary-body] { font-size: 0.9375rem; line-height: 1.375rem; display: block; }
.gp-today-words [data-ai-summary-label] { font-size: 0.75rem; }

/* The two columns: the deck on the left, the money numbers and Up next on the right. */
.gp-split { display: grid; grid-template-columns: minmax(0, 46rem) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "deck money" "deck next"; gap: 1.5rem; align-items: start; }
.gp-deck-col { grid-area: deck; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.gp-money { grid-area: money; overflow: hidden; }
.gp-next { grid-area: next; overflow: hidden; }
.gp-next[hidden], .gp-money[hidden] { display: none; }
@media (max-width: 63.99rem) {
  .gp-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "money" "deck" "next"; gap: 1.25rem; }
}

/* A dot for the kind of money; the words beside it say the rest. */
.gp-dot { display: inline-block; flex: none; width: 0.5rem; height: 0.5rem; margin-right: 0.375rem; border-radius: 999px; background: var(--color-line-strong); vertical-align: 0.0625rem; }
.gp-dot-late { background: #f59e0b; }
.gp-dot-bill { background: var(--color-ink); }

/* The money card. */
.gp-m { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1.25rem; color: inherit; text-decoration: none; }
.gp-m + .gp-m { border-top: 1px solid var(--color-line); }
.gp-m:hover { background: var(--color-page); }
.gp-m-text { display: flex; flex-direction: column; min-width: 0; }
.gp-m-top { display: flex; align-items: center; gap: 0.75rem; }
.gp-m-label { font-size: 0.9375rem; font-weight: 600; color: var(--color-ink); }
.gp-m-sub { font-size: 0.8125rem; color: var(--color-muted); }
.gp-m-val { font-size: 1.5rem; line-height: 2rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; color: var(--color-ink); }
.gp-m-all { background: var(--color-page); }
.gp-m-all .gp-m-val { font-size: 1.125rem; }
.gp-m-go { display: inline-flex; align-items: center; gap: 0.125rem; font-size: 0.8125rem; font-weight: 600; color: var(--color-accent-strong); white-space: nowrap; }
@media (max-width: 47.99rem) {
  .gp-money:not([hidden]) { display: grid; grid-template-columns: repeat(var(--gp-money-n, 3), minmax(0, 1fr)); }
  .gp-money[data-count="1"] { --gp-money-n: 1; } .gp-money[data-count="2"] { --gp-money-n: 2; }
  .gp-m { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; padding: 0.75rem; }
  .gp-m + .gp-m { border-top: 0; border-left: 1px solid var(--color-line); }
  .gp-m-text, .gp-m-top { display: contents; }
  .gp-m-label { font-size: 0.8125rem; color: var(--color-muted); order: 0; }
  .gp-m-val { order: 1; font-size: 1.1875rem; line-height: 1.75rem; letter-spacing: -0.03em; text-align: left; }
  .gp-m-sub { order: 2; font-size: 0.75rem; line-height: 1rem; }
  .gp-m-all { background: transparent; }
  .gp-m-all .gp-m-val { font-size: 1.1875rem; }
  .gp-m-go { order: 3; margin-top: 0.25rem; font-size: 0.75rem; }
}

/* Up next. */
.gp-next-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem 0.5rem; }
.gp-next-head .ui-eyebrow { color: var(--color-ink); }
.gp-count { font-size: 0.8125rem; font-weight: 700; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.gp-up { margin: 0; padding: 0; list-style: none; }
.gp-up > li { border-top: 1px solid var(--color-line); }
.gp-nx { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.375rem 1.25rem; color: inherit; text-decoration: none; }
.gp-nx:hover { background: var(--color-page); }
.gp-nx .gp-dot { margin-right: 0.125rem; }
.gp-nx-main { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: 0.125rem 0; }
.gp-nx-name { display: block; min-width: 0; font-size: 0.9375rem; line-height: 1.375rem; font-weight: 600; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-nx-flag { font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--color-warn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-nx-amt { flex: none; font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.gp-nx-days { flex: none; min-width: 3.5rem; text-align: right; font-size: 0.8125rem; color: var(--color-muted); white-space: nowrap; }
.gp-nx-days.is-late { font-weight: 600; color: var(--color-warn); }
.gp-more { border-top: 1px solid var(--color-line); }
.gp-more > summary { display: flex; align-items: center; gap: 0.25rem; min-height: var(--spacing-tap); padding: 0 1.25rem; cursor: pointer; list-style: none; font-size: 0.9375rem; font-weight: 600; color: var(--color-accent-strong); }
.gp-more > summary::-webkit-details-marker { display: none; }
.gp-more[open] > summary .gp-more-chev { transform: rotate(90deg); }
@media (max-width: 47.99rem) {
  .gp-nx { padding: 0.375rem 1rem; }
  .gp-next-head { padding: 0.75rem 1rem 0.5rem; }
  .gp-more > summary { padding: 0 1rem; }
  .gp-pages { margin-right: 0; margin-left: -0.625rem; }
  .gp-nav { align-items: stretch; }
  .gp-nav .ui-tabs { align-self: stretch; }
  .gp-pages .ui-more-link { padding: 0 0.5rem; font-size: 0.875rem; }
}

/* The deck's card: the button, Write and Later in one row. */
.gp-deck-col .ui-deck { max-width: 46rem; }
@media (max-width: 47.99rem) {
  .gp-deck-col .ui-task-card-acts > .ui-btn-primary { flex: 1 1 auto; }
}

/* Record a payment: a find box under the deck. */
.gp-record { padding: 1rem 1.25rem 1.125rem; }
.gp-record h2 { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; letter-spacing: -0.005em; margin: 0; }
.gp-record p { margin: 0.125rem 0 0; font-size: 0.9375rem; color: var(--color-muted); }
.gp-record form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }

/* ======================================================= A JOB'S BILLING PAGE == */
.bl-rule { border-top: 1px solid var(--color-line); margin-top: 1rem; padding-top: 1rem; }

/* Two columns on a desk: what is used every day on the left, her messages on the right. */
.bl-grid { display: grid; gap: 1.5rem; align-items: start; }
.bl-grid > * { min-width: 0; }
.bl-stack { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
@media (min-width: 64rem) { .bl-grid:not(.bl-grid-one) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

/* The five ticks of where the job stands. */
.bl-ticks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem 1rem; margin: 0; padding: 0; list-style: none; }
.bl-ticks li { display: flex; align-items: flex-start; gap: 0.5rem; min-width: 0; color: var(--color-line-strong); }
.bl-ticks li svg { flex: none; margin-top: 0.0625rem; }
.bl-ticks li.is-done svg { color: var(--color-good-fill); }
.bl-tick-dot { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.0625rem; border: 1.75px solid var(--color-line-strong); border-radius: 999px; }
.bl-ticks li.is-next .bl-tick-dot { border-color: var(--color-accent); }
.bl-ticks b { display: block; font-size: 0.9375rem; line-height: 1.25rem; font-weight: 600; color: var(--color-ink); }
.bl-ticks em { display: block; font-style: normal; font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-muted); }
.bl-ticks li.is-next em { color: var(--color-accent-strong); font-weight: 600; }
.bl-ticks-short { display: none; }
.bl-closed { margin: 0.75rem 0 0; padding: 0.5rem 0.75rem; border-radius: var(--radius-ui); background: var(--color-good-soft); font-weight: 600; color: var(--color-good-ink); }
@media (max-width: 47.99rem) {
  .bl-ticks { display: none; }
  .bl-ticks-short { display: block; }
  .bl-ticks-done { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; font-size: 0.9375rem; line-height: 1.375rem; font-weight: 600; color: var(--color-ink); }
  .bl-ticks-done span { display: inline-flex; align-items: center; gap: 0.375rem; }
  .bl-ticks-done svg { width: 1.125rem; height: 1.125rem; color: var(--color-good-fill); }
  .bl-ticks-next { margin: 0.375rem 0 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--color-muted); text-wrap: balance; }
  .bl-ticks-next b { color: var(--color-accent-strong); font-weight: 600; }
}

/* The schedule's three thirds, as tiles. */
.bl-thirds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.bl-third { min-width: 0; padding: 0.75rem 0.875rem; border: 1px solid var(--color-line); border-top: 3px solid var(--color-line-strong); border-radius: var(--radius-ui); background: var(--color-card); }
.bl-third.is-paid { border-top-color: var(--color-good-fill); }
.bl-third.is-due, .bl-third.is-late { border-top-color: var(--color-warn-fill); background: var(--color-warn-soft); }
.bl-third-name { margin: 0; font-size: 0.9375rem; line-height: 1.375rem; font-weight: 600; color: var(--color-ink); }
.bl-third-amt { margin: 0; font-size: 1.125rem; line-height: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.bl-third-state { margin: 0.125rem 0 0; font-size: 0.8125rem; line-height: 1.125rem; font-weight: 600; }
.bl-third-state.is-paid { color: var(--color-good-ink); }
.bl-third-state.is-late { color: var(--color-warn); }
.bl-third-state.is-quiet { color: var(--color-muted); }
.bl-third-when { margin: 0; font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-muted); }
@media (max-width: 47.99rem) {
  .bl-thirds { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .bl-third { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; align-items: center; border-top-width: 1px; border-left: 4px solid var(--color-line-strong); }
  .bl-third.is-paid { border-left-color: var(--color-good-fill); border-top-color: var(--color-line); }
  .bl-third.is-due, .bl-third.is-late { border-left-color: var(--color-warn-fill); }
  .bl-third .bl-third-amt { grid-column: 2; grid-row: 1; text-align: right; }
  .bl-third .bl-third-state { grid-column: 2; grid-row: 2; text-align: right; margin-top: 0; }
  .bl-third .bl-third-name { grid-column: 1; grid-row: 1; }
  .bl-third .bl-third-when { grid-column: 1; grid-row: 2; }
}

/* The bill line, the Money card's foot. */
.bl-bill { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; }
.bl-bill-text { display: flex; align-items: center; gap: 0.625rem; min-width: 0; margin: 0; font-size: 0.9375rem; line-height: 1.375rem; color: var(--color-ink); }
.bl-bill-text b { font-weight: 600; }
.bl-bill-dot { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 999px; background: var(--color-warn-fill); box-shadow: 0 0 0 3px var(--color-warn-soft); }
.bl-bill-dot.is-ok { background: var(--color-good-fill); box-shadow: 0 0 0 3px var(--color-good-soft); }
.bl-bill-dot.is-grey { background: var(--color-line-strong); box-shadow: 0 0 0 3px var(--color-page); }
.bl-bill-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
@media (max-width: 47.99rem) { .bl-bill-acts { width: 100%; } .bl-bill-acts .ui-btn-primary { flex: 1 1 auto; } }

/* Who earns the commission: the last line of Payments received. */
.bl-split { display: block; }
.bl-split-k { margin: 0 0 0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--color-muted); }
.bl-split [data-commission-split-shares] > li { padding-block: 0.25rem; min-height: 0; }

/* The thread's foot: See all N messages. */
.bl-thread-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; padding: 0 1.25rem; min-height: 2.75rem; border-top: 1px solid var(--color-line); }
@media (max-width: 39.99rem) { .bl-thread-links { padding: 0 0.75rem; } }

/* The closed rows. */
.bl-folds { overflow: hidden; }
.bl-fold + .bl-fold { border-top: 1px solid var(--color-line); }
.bl-fold > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 1rem; align-items: center; gap: 0.125rem 1rem; min-height: 3.5rem; padding: 0.625rem 1.25rem; cursor: pointer; list-style: none; }
.bl-fold > summary::-webkit-details-marker { display: none; }
.bl-fold > summary:hover { background: var(--color-page); }
.bl-fold-main { display: block; min-width: 0; }
.bl-fold-name { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; line-height: 1.375rem; font-weight: 600; color: var(--color-ink); }
.bl-fold-icon { width: 1.125rem; height: 1.125rem; flex: none; color: var(--color-muted); }
.bl-fold-sub { display: block; padding-left: 1.75rem; font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-muted); overflow-wrap: anywhere; }
.bl-fold-val { font-size: 0.9375rem; line-height: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-ink); text-align: right; white-space: nowrap; }
.bl-fold-val.is-quiet { font-weight: 400; color: var(--color-muted); }
.bl-fold-chev { width: 1rem; height: 1rem; color: var(--color-muted); }
.bl-fold[open] > summary .bl-fold-chev { transform: rotate(90deg); }
.bl-fold[open] > summary { border-bottom: 1px solid var(--color-line); background: var(--color-page); }
.bl-fold-body { padding: 1.125rem 1.25rem 1.25rem; }
.bl-fold-card { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.bl-fold-card > .ui-card-subtitle { margin: 0; }
@media (max-width: 39.99rem) {
  .bl-fold > summary { padding: 0.625rem 1rem; gap: 0.125rem 0.75rem; }
  .bl-fold-body { padding: 1rem; }
}

/* ============================================================= BACK OFFICE == */
.bo-sentence { font-size: 1.0625rem; line-height: 1.5rem; color: var(--color-ink); }
.bo-sentence b { font-weight: 700; }
.bo-today-ai { margin-top: -0.5rem; }
.bo-today-ai [data-ai-summary] { margin: 0; }

/* The deck, Needs you and Finished job costs in one grid. A phone reads them in the page's order (deck, Needs you, then the
   costs); a desk puts the costs beside the deck and Needs you under both. */
.bo-a { display: grid; gap: 1.5rem; align-items: start; }
.bo-a > * { min-width: 0; }
@media (min-width: 64rem) {
  .bo-a:has(.bo-a-costs) { grid-template-columns: minmax(0, 46rem) minmax(0, 1fr); }
  .bo-a:has(.bo-a-costs) > .bo-a-deck { grid-column: 1; grid-row: 1; }
  .bo-a:has(.bo-a-costs) > .bo-a-costs { grid-column: 2; grid-row: 1; }
  .bo-a:has(.bo-a-costs) > [data-back-office-needs] { grid-column: 1 / -1; grid-row: 2; }
}
/* The last card done in place leaves the sentence empty: no blank line under the title. */
.ui-page-subtitle:has(> #back_office_sentence:empty) { display: none; }

/* The desks: one compact card of links on a phone, the group labels inside it. */
@media (max-width: 47.99rem) {
  [data-hub-compact] { gap: 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-ui); background: var(--color-card); box-shadow: var(--shadow-card); }
  [data-hub-compact] > * + * { border-top: 1px solid var(--color-line); }
  [data-hub-compact] .ui-card { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  [data-hub-compact] .ui-eyebrow { margin-bottom: 0; padding: 0.625rem 1rem 0.25rem; }
  [data-hub-compact] summary.ui-eyebrow { min-height: 2.75rem; padding: 0 1rem; }
  [data-hub-compact] li > a { padding-inline: 1rem; }
}