/* Kybos Office (js/office.js): the few looks the Portal's own styles (portal.css) don't already have. */

/* Overview: the getting-ready steps */
.office .o-steps { list-style: none; display: grid; gap: 0; padding: 0; margin: 0; }
.office .o-step { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.office .o-step:last-child { border-bottom: 0; }
.office .o-step b { font-weight: 650; }
.office .o-step p { color: var(--ink-3); font-size: 14.5px; margin-top: 2px; }
.office .o-tick { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgb(var(--ink-rgb) / .2); }
.office .o-step.is-done .o-tick { background: var(--good); border-color: var(--good); color: #fff; }
.office .o-tick .ic { width: 16px; height: 16px; }

/* Services: the tables */
.office .o-tbl { min-width: 0; }
.office .o-tbl td:first-child { width: 100%; max-width: 0; }
/* A row that starts with a quote or invoice number, or a date: that keeps its own width and the name after it takes the
   spare room instead. (On a phone the number was squeezed to nothing and drawn over the name, and the amount was pushed
   off the card.) */
.office .o-tbl td.o-col-num:first-child, .office .o-tbl td.om-date:first-child { width: auto; max-width: none; white-space: nowrap; }
.office .o-tbl td.o-col-num:first-child + td, .office .o-tbl td.om-date:first-child + td { width: 100%; max-width: 0; }
/* On a phone those lists (quotes, invoices, payments, spending: a number or date first) have more columns than fit, so
   each row becomes a small card: the number or date above the name on the left, the amount and the status on the right.
   Where two amounts stand side by side, the phone shows only the last (what is owed, what was paid); the item itself
   still shows both. */
@media (max-width: 759px) {
  .office .o-tbl:has(td.o-col-num:first-child, td.om-date:first-child),
  .office .o-tbl:has(td.o-col-num:first-child, td.om-date:first-child) tbody { display: block; }
  .office .o-tbl:has(td.o-col-num:first-child, td.om-date:first-child) thead { display: none; }
  .office .o-tbl:has(td.o-col-num:first-child, td.om-date:first-child) tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; column-gap: 14px; row-gap: 2px; align-items: center; padding: 11px 8px; border-bottom: 1px solid var(--line); }
  .office .o-tbl:has(td.o-col-num:first-child, td.om-date:first-child) tbody tr:last-child { border-bottom: 0; }
  .office .o-tbl:has(td.o-col-num:first-child, td.om-date:first-child) tbody td { display: block; width: auto; max-width: none; padding: 0; border: 0; }
  .office .o-tbl:has(td.o-col-num:first-child, td.om-date:first-child) tbody td:nth-child(-n+2) { grid-column: 1; }
  .office .o-tbl:has(td.o-col-num:first-child, td.om-date:first-child) tbody td:nth-child(n+3) { grid-column: 2; justify-self: end; text-align: right; }
  .office .o-tbl:has(td.o-col-num:first-child, td.om-date:first-child) tbody td:first-child { font-size: 13.5px; color: var(--ink-3); }
  .office .o-tbl:has(td.o-col-num:first-child, td.om-date:first-child) tbody .o-desc { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .office .o-tbl:has(td.o-col-num:first-child, td.om-date:first-child) tbody td.num:has(+ td.num),
  .office .o-tbl:has(td.o-col-num:first-child, td.om-date:first-child) tbody td.o-col-last { display: none; }
  /* Money's month-by-month table (four columns of money): a little tighter, so it fits without sliding sideways. */
  .office .om-table .o-tbl th, .office .om-table .o-tbl td { padding-left: 5px; padding-right: 5px; font-size: 14px; }
}
.office .o-name { display: block; font-weight: 650; }
.office .o-desc { display: block; color: var(--ink-3); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.office .o-services td:nth-child(2) { white-space: nowrap; }
.office .o-price small { display: block; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.office .o-hidden summary { cursor: pointer; list-style: none; }
.office .o-hidden summary::-webkit-details-marker { display: none; }
.office .o-hidden summary h3 { font-size: 18px; font-weight: 650; }
.office .o-hidden summary p { font-size: 14.5px; color: var(--ink-3); margin: 2px 0 12px; }
.office .o-hidden:not([open]) summary p { margin-bottom: 0; }
.office .o-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 34px 24px; }
.office .o-empty .big-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--ink-rgb) / .08); }
.office .o-empty .big-ic .ic { width: 26px; height: 26px; }
.office .o-empty h3 { font-size: 21px; }
.office .o-empty p { color: var(--ink-2); max-width: 520px; }
.office .o-empty .btn-row { justify-content: center; margin-top: 6px; }

/* The item form (in the Portal's modal) and the business details form */
#modal-root textarea.o-ta { height: 132px; }
.o-sum { font-size: 14.5px; color: var(--ink-2); background: rgb(var(--ink-rgb) / .06); padding: 10px 12px; border-radius: 12px; }
.office .o-form .card { display: grid; gap: 12px; }
.office .o-form .card-head { margin-bottom: 0; }
.office .o-hint { font-weight: 500; color: var(--ink-3); font-size: 13.5px; }
.office .o-field-err { font-weight: 600; color: var(--bad-ink); font-size: 13.5px; }
.office [aria-invalid=true] { border-color: var(--bad-ink); box-shadow: 0 0 0 3px rgb(155 47 29 / .16); }
.office .o-check { align-self: end; min-height: 50px; }
.office textarea[name=terms] { height: 220px; }
.office .o-savebar { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 20px; }
.office .o-savebar .field-err { margin: 0; flex: 1 1 100%; text-align: right; }

@media (max-width: 759px) {
  .office .o-step { grid-template-columns: 30px 1fr; }
  .office .o-step .btn { grid-column: 2; justify-self: start; }
  .office .o-services th:nth-child(2), .office .o-services td:nth-child(2) { display: none; }
  .office .o-savebar { justify-content: stretch; }
  .office .o-savebar .btn { flex: 1; }
  .office .o-savebar .field-err { text-align: left; }
}

/* The item form: set price or floor area */
#modal-root .o-fixed, #modal-root .o-area { display: grid; gap: 12px; }
#modal-root .o-fixed[hidden], #modal-root .o-area[hidden] { display: none; }

/* How floor-area prices work */
.office .o-rates summary { cursor: pointer; list-style: none; }
.office .o-rates summary::-webkit-details-marker { display: none; }
.office .o-rates summary h3 { font-size: 18px; font-weight: 650; }
.office .o-rates summary p { font-size: 14.5px; color: var(--ink-3); margin-top: 2px; }
.office .o-rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 14px; }
.office .o-rate-grid h4 { font-size: 15px; font-weight: 650; margin-bottom: 6px; }
.office .o-mini { min-width: 0; font-size: 14.5px; }
.office .o-mini td { padding: 7px 10px; }
.office .o-rate-note { margin-top: 10px; }
@media (max-width: 759px) { .office .o-rate-grid { grid-template-columns: 1fr; } }

/* ---------- Leads, contacts, activity (js/office-clients.js) ---------- */
.office .o-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 14px; }
.office .o-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; margin-bottom: 20px; align-items: start; }
.office .o-status { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: rgb(var(--ink-rgb) / .08); color: var(--ink-2); }
.office .o-status.st-prospect { background: rgb(var(--ink-rgb) / .06); color: var(--ink-3); }
.office .o-status.st-new { background: color-mix(in srgb, var(--st-presale) 16%, transparent); color: var(--st-presale); }
.office .o-status.st-talking { background: color-mix(in srgb, var(--st-preconstruction) 16%, transparent); color: var(--st-preconstruction); }
.office .o-status.st-quoted { background: color-mix(in srgb, var(--st-construction) 18%, transparent); color: var(--accent-deep); }
.office .o-status.st-won { background: rgba(35, 133, 79, .14); color: var(--good-ink); }
.office .o-status.st-lost { background: rgb(var(--ink-rgb) / .06); color: var(--ink-3); text-decoration: line-through; }
.office .o-prio { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 5px; margin-right: 7px; border-radius: 6px; font-size: 11.5px; font-weight: 800;
  background: rgb(var(--ink-rgb) / .08); color: var(--ink-2); vertical-align: 1px; }
.office .o-prio.p-Aplus { background: var(--accent); color: var(--accent-ink); }
.office .o-prio.p-A { background: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent-ink); }
.office .o-li { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 1px 6px; border-radius: 5px; margin-left: 4px; vertical-align: 1px; }
.office .o-li.on { background: #0a66c2; color: #fff; }
.office .o-li.wait { background: rgb(10 102 194 / .14); color: #0a66c2; }
.office .o-late { color: var(--bad-ink); font-weight: 650; }
.office .o-fact-link { color: inherit; text-decoration: none; }
.office .o-fact-link:hover { background: var(--hi); }
.office .o-lead-head .ph-title { flex-wrap: wrap; gap: 8px; }
.office .o-facts { display: grid; gap: 0; }
.office .o-fact { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 15px; }
.office .o-fact:last-child { border-bottom: 0; }
.office .o-fact span { color: var(--ink-3); font-weight: 600; }
.office .o-fact b { font-weight: 550; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.office .o-sub { font-size: 15px; font-weight: 650; margin: 14px 0 4px; }
.office .o-text { white-space: pre-line; overflow-wrap: anywhere; font-size: 15px; color: var(--ink-2); }
.office .o-banner { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 14px; margin: 0 0 14px; background: rgb(var(--ink-rgb) / .06); color: var(--ink-2); font-size: 15px; }
.office .o-banner.good { background: rgba(35, 133, 79, .12); color: var(--good-ink); }
.office .o-banner .ic { width: 16px; height: 16px; flex: none; }
.office .o-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.office .o-quick .ic { width: 14px; height: 14px; }
.office .o-act-form { display: grid; gap: 10px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.office .o-act-go { justify-content: flex-end; }
.office .o-notes { display: grid; }
.office .o-note { padding: 11px 2px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.office .o-note:last-child { border-bottom: 0; }
.office .o-note-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 14.5px; }
.office .o-note-head small { margin-left: auto; color: var(--ink-3); white-space: nowrap; }
.office .o-act-type { display: inline-flex; gap: 5px; align-items: center; font-weight: 650; color: var(--accent-deep); }
.office .o-act-type .ic { width: 14px; height: 14px; }
.office .o-search { margin: -6px 0 14px; }
.office .o-contact { grid-template-columns: 40px 1fr auto; }
.office .o-contact small { white-space: normal; }
.office .o-contact a { color: inherit; }
.office .o-gone { opacity: .55; }
.office .o-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.office .o-row-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.office .o-from-leads { margin: -8px 0 20px; }
.office .o-from-leads a, .office .o-note a { color: inherit; }
.office .o-more { margin-top: 10px; }
.office .o-bar { display: grid; grid-template-columns: minmax(90px, 170px) minmax(40px, 1fr) 30px auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 14.5px; }
.office .o-bar-label { color: var(--ink-2); font-weight: 600; }
.office .o-bar-track { height: 10px; border-radius: 6px; background: rgb(var(--ink-rgb) / .08); overflow: hidden; }
.office .o-bar-track i { display: block; height: 100%; border-radius: 6px; background: var(--accent); min-width: 0; }
.office .o-bar b { text-align: right; font-variant-numeric: tabular-nums; }
.office .o-bar small { color: var(--ink-3); font-size: 13px; min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; }
.office .o-col-last, .office .o-col-when { white-space: nowrap; font-size: 14.5px; }
@media (max-width: 759px) {
  .office .o-cols { grid-template-columns: 1fr; }
  .office .o-col-last, .office .o-col-email, .office .o-col-value { display: none; }
  .office .o-fact { grid-template-columns: 110px 1fr; }
  .office .o-contact { grid-template-columns: 40px 1fr; }
  .office .o-contact .o-row-acts { grid-column: 2; justify-content: flex-start; }
  .office .o-bar { grid-template-columns: 120px 1fr 30px; }
  .office .o-bar small { display: none; }
}

/* Office has six sections: a little tighter in the floating bottom bar, so they fit beside the + button. */
@media (min-width: 760px) {
  body[data-view="a-office"] .tabbar a { padding: 0 15px; gap: 6px; font-size: 15px; }
}
.office .o-lead-head { margin-bottom: 16px; }
.office .o-phone-only { display: none; }
@media (max-width: 759px) {
  .office .o-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -14px; margin-right: -14px; padding: 2px 14px; }
  .office .o-chips::-webkit-scrollbar { display: none; }
  .office .o-chips .chip { flex: none; }
  .office .o-leads .o-col-when { display: none; }
  .office .o-phone-only { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }
}

/* ---------- Quotes (js/office-quotes.js); the paper itself is css/quote-paper.css ---------- */
.office .o-status.st-q-draft { background: rgb(var(--ink-rgb) / .08); color: var(--ink-2); }
.office .o-status.st-q-sent { background: color-mix(in srgb, var(--st-presale) 16%, transparent); color: var(--st-presale); }
.office .o-status.st-q-accepted { background: rgba(35, 133, 79, .14); color: var(--good-ink); }
.office .o-status.st-q-declined, .office .o-status.st-q-void { background: rgb(var(--ink-rgb) / .06); color: var(--ink-3); text-decoration: line-through; }
.office .o-col-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.office .oq-head { margin-bottom: 14px; }
.office .oq-head .ph-actions { align-items: center; }
.office .oq-state { font-size: 14px; color: var(--ink-3); margin-right: 4px; }
.office .oq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 44%); gap: 16px; align-items: start; }
.office .oq-edit { min-width: 0; }
.office .oq-edit .card { display: grid; gap: 12px; }
.office .oq-edit .card-head { margin-bottom: 0; }
.office .oq-preview { position: sticky; top: 0; max-height: calc(100vh - 150px); overflow: auto; border-radius: 14px; scrollbar-width: thin; }
.office .oq-paper { background: #fff; border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; }
.office .oq-paper-only { max-width: 794px; margin: 0 auto 20px; }
.office .ql-list { display: grid; gap: 10px; }
.office .ql { display: grid; gap: 10px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: rgb(var(--w) / calc(.3 * var(--wk))); }
.office .ql.ql-todo { border-color: var(--accent); }
.office .ql-head { display: flex; gap: 8px; align-items: center; }
.office .ql-name { flex: 1; min-width: 0; font-weight: 650; }
.office .ql-acts { display: flex; gap: 2px; flex: none; }
.office .ql-acts .icon-btn[disabled] { opacity: .3; cursor: default; }
.office .ql-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.office .ql-row.ql-area { grid-template-columns: 1.1fr 1.7fr .7fr; }
.office .ql-foot { display: flex; gap: 12px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.office .ql-was { width: 210px; }
.office .ql-total { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; padding-bottom: 12px; }
.office .ql-add { margin-top: 2px; }
.office .oq-terms summary { cursor: pointer; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
#modal-root .oq-cats { margin: 2px 0 0; flex-wrap: wrap; }
#modal-root .oq-picks { display: grid; gap: 6px; max-height: 48vh; overflow: auto; padding: 2px; }
#modal-root .oq-pick { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--hi); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
#modal-root .oq-pick:hover, #modal-root .oq-pick:focus-visible { border-color: var(--accent); }
#modal-root .oq-pick b { font-weight: 600; }
#modal-root .oq-pick span { color: var(--ink-3); white-space: nowrap; font-size: 14px; }
@media (max-width: 1099px) {
  .office .oq-layout { grid-template-columns: 1fr; }
  .office .oq-preview { position: static; max-height: none; }
}
@media (max-width: 759px) {
  .office .ql-row, .office .ql-row.ql-area { grid-template-columns: 1fr 1fr; }
  .office .ql-was { width: 100%; }
}
/* Seven sections: tighter still in the floating bottom bar. */
@media (min-width: 760px) {
  body[data-view="a-office"] .tabbar a { padding: 0 12px; gap: 5px; font-size: 14.5px; }
}

/* Quotes that have gone out */
.office .oq-status .card-head h3 { display: flex; gap: 8px; align-items: center; }
.office .oq-accepted { border: 2px solid rgba(35, 133, 79, .45); }
.office .oq-accepted .card-head h3 { color: var(--good-ink); }
.office .oq-hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; font-weight: 500; }
#modal-root .oq-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); font-size: 15px; }
#modal-root .oq-warn li::marker { color: var(--accent-deep); }
#modal-root .oq-send-sum { font-size: 16px; }
#modal-root .oq-send-sum b { font-size: 22px; }
#modal-root textarea.oq-mail { height: 260px; font-weight: 450; }
/* The quote's header has no picture: the text takes the first column, the buttons go below it on smaller screens. */
.office .oq-head { grid-template-columns: 1fr auto; }
@media (max-width: 1169px) { .office .oq-head { grid-template-columns: 1fr; } .office .oq-head .ph-actions { justify-content: flex-start; } }

/* Invoices */
.office .o-status.st-i-draft { background: rgb(var(--ink-rgb) / .08); color: var(--ink-2); }
.office .o-status.st-i-issued { background: color-mix(in srgb, var(--st-presale) 16%, transparent); color: var(--st-presale); }
.office .o-status.st-i-paid { background: rgba(35, 133, 79, .14); color: var(--good-ink); }
.office .o-status.st-i-online { background: rgba(217, 143, 60, .16); color: var(--ink); }
.office .oq-online { margin: 6px 0 4px; }
.office .oq-online .btn-row { margin: 6px 0; }
.office .o-status.st-i-overdue { background: rgba(155, 47, 29, .12); color: var(--bad-ink); }
.office .o-status.st-i-void { background: rgb(var(--ink-rgb) / .06); color: var(--ink-3); text-decoration: line-through; }
.office .oq-checks { border: 1.5px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.office .oq-checks .oq-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); }
/* Eight sections: the bottom bar shows icons and short words, tighter again. */
@media (min-width: 760px) {
  body[data-view="a-office"] .tabbar a { padding: 0 10px; gap: 4px; font-size: 14px; }
}

/* The payments on an invoice: the date stays short, the method and reference take the room. */
.office .oq-pay-tbl td:first-child { width: auto; max-width: none; white-space: nowrap; }
.office .oq-pay-tbl td:nth-child(2) { width: 100%; }

/* Import contacts (js/office-import.js) */
.office .oi-drop { border: 2px dashed rgb(var(--ink-rgb) / .16); transition: border-color .15s, background-color .15s; }
.office .oi-drop.is-over { border-color: var(--good); background: rgb(var(--ink-rgb) / .04); }
.office .oi-how { margin: 4px auto 6px; padding: 0 0 0 18px; max-width: 560px; display: grid; gap: 6px; color: var(--ink-2); font-size: 14.5px; }
.office .oi-from { max-width: 280px; }
.office .oi-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.office .oi-col { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: rgb(var(--ink-rgb) / .045); }
.office .oi-col.is-off { opacity: .62; }
.office .oi-col-name b { display: block; font-weight: 650; overflow-wrap: anywhere; }
.office .oi-col-name small { display: block; color: var(--ink-3); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.office .oi-facts { margin: 14px 0; }
.office .oi-bar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.office .oi-all { display: flex; gap: 6px; align-items: center; }
.office .oi-all span { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-right: 4px; }
.office .oi-bar .input { flex: 0 1 300px; }
.office .oi-list { display: grid; max-height: 62vh; overflow: auto; border-top: 1px solid var(--line); }
.office .oi-row { display: grid; grid-template-columns: 1fr 170px; gap: 14px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.office .oi-row[hidden] { display: none; }
.office .oi-row.is-off .oi-who { opacity: .55; }
.office .oi-who { min-width: 0; }
.office .oi-who b { font-weight: 650; overflow-wrap: anywhere; }
.office .oi-who small { display: block; color: var(--ink-3); font-size: 13.5px; margin-top: 3px; overflow-wrap: anywhere; }
.office .oi-who small.oi-out { color: var(--ink-2); font-style: italic; }
.office .oi-go { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 16px; }
.office .oi-go p { flex: 1 1 320px; margin: 0; }
.office .oi-progress { display: grid; gap: 6px; flex: 0 1 320px; }
.office .oi-track { display: block; height: 8px; border-radius: 99px; background: rgb(var(--ink-rgb) / .1); overflow: hidden; }
.office .oi-track i { display: block; height: 100%; background: var(--good); transition: width .3s; }
.office .oi-skipped { margin-top: 8px; }
.office .oi-skipped summary { cursor: pointer; font-weight: 600; }
.office .oi-skipped ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; color: var(--ink-2); font-size: 14px; max-height: 40vh; overflow: auto; }
.office .oi-past { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: baseline; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.office .oi-past:last-child { border-bottom: 0; }
.office .oi-past small { color: var(--ink-3); }
@media (max-width: 759px) {
  .office .oi-facts { gap: 8px; margin: 10px 0; }
  .office .oi-facts .fact { padding: 10px 12px; }
  .office .oi-facts .fact .s { display: none; }
  .office .oi-list { max-height: none; overflow: visible; }   /* one scroll on a phone: the page's */
  .office .oi-row { grid-template-columns: 1fr; gap: 8px; }
  .office .oi-bar .input { flex: 1 1 100%; }
  .office .oi-go .btn { flex: 1 1 100%; }
  .office .oi-past { grid-template-columns: 1fr; gap: 2px; }
}
.office .oi-files { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; justify-items: center; }
.office .oi-files li { display: flex; gap: 8px; align-items: center; color: var(--ink-2); font-size: 14.5px; }
.office .oi-files li .ic { width: 16px; height: 16px; }
.office .oi-files li.is-in .ic { color: var(--good); }
.office .oi-next { margin-top: 12px; }

/* Talk to Office from Claude (Business page) */
.office .o-claude-steps { margin: 4px 0 10px; padding-left: 20px; display: grid; gap: 10px; color: var(--ink-2); }
.office .o-claude-url { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: 4px; }
.office .o-claude-url code { font-size: 13.5px; padding: 4px 8px; border-radius: 8px; background: rgb(var(--ink-rgb) / .07); color: var(--ink); overflow-wrap: anywhere; }
.office .oi-due { display: grid; gap: 4px; }
.office .oi-due-says { color: var(--ink-3); font-size: 13px; }

/* Money (js/office-money.js): one series, so one colour, checked for contrast and colour blindness on the light
   and dark cards (dataviz validate_palette: light #b06e25, dark #c47f35). */
/* Money's chart: came in (amber) and spent (blue), checked for colour blindness and contrast on the light and dark cards. */
.office { --chart-bar: #b06e25; --chart-bar-2: #2a78d6; }
html[data-theme=dark] .office { --chart-bar: #c47f35; --chart-bar-2: #3987e5; }
.office .om-plot { position: relative; height: 200px; margin: 26px 0 6px 52px; }
.office .om-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid rgb(var(--ink-rgb) / .12); }
.office .om-line span { position: absolute; right: calc(100% + 8px); top: -8px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.office .om-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; }
.office .om-col { height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; background: none; border: 0; padding: 0; margin: 0 1px; cursor: default; border-radius: 6px; }
.office .om-col:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.office .om-bar { position: relative; width: min(14px, 40%); background: var(--chart-bar); border-radius: 4px 4px 0 0; transition: filter .15s; }
.office .om-bar.spent { background: var(--chart-bar-2); }
.office .om-legend { display: flex; gap: 16px; font-size: 13px; color: var(--ink-2); margin: 2px 0 -14px; }
.office .om-legend span { display: inline-flex; align-items: center; gap: 6px; }
.office .om-sw { width: 10px; height: 10px; border-radius: 3px; background: var(--chart-bar); }
.office .om-sw.spent { background: var(--chart-bar-2); }
.office .om-col:hover .om-bar, .office .om-col:focus-visible .om-bar { filter: brightness(1.15); }
.office .om-bar b { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 650; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.office .om-months { display: grid; grid-template-columns: repeat(12, 1fr); margin-left: 52px; font-size: 12px; color: var(--ink-3); text-align: center; }
.office .om-months small { display: block; font-size: 11px; }
.office .om-months i { font-style: normal; }
.office .om-months .m1 { display: none; }
.office .om-tip { position: absolute; top: -8px; transform: translate(-50%, -100%); background: var(--hi); color: var(--ink); border-radius: 10px; padding: 6px 10px; box-shadow: 0 6px 18px rgba(40, 25, 10, .18); pointer-events: none; display: grid; gap: 1px; font-size: 13px; white-space: nowrap; z-index: 2; }
.office .om-tip[hidden] { display: none; }
.office .om-tip b { font-size: 15px; font-variant-numeric: tabular-nums; }
.office .om-tip span { color: var(--ink-3); white-space: pre-line; font-variant-numeric: tabular-nums; }
/* Glass tubes (chosen 07-11-2026): each month's money is a frosted tube with round ends; this month, and the month
   under the pointer, fill with warm amber and glow. Spent is a slimmer blue tube beside it. They rise when the chart is
   first drawn on a visit. */
.office .om-col { gap: 4px; }
.office .om-bar { width: min(20px, 46%); border-radius: 999px; min-height: 0;
  background: linear-gradient(180deg, rgb(246 226 198 / .95), rgb(196 140 78 / .62)); border: 1px solid rgb(255 255 255 / .7);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -10px 16px rgb(176 110 37 / .14), 0 6px 14px rgb(64 42 20 / .1);
  transform-origin: bottom; transition: background .3s, box-shadow .3s, filter .15s; }
.office .om-bar.spent { width: min(10px, 24%); background: linear-gradient(180deg, rgb(206 225 252 / .95), rgb(42 120 214 / .7)); border-color: rgb(255 255 255 / .6); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 4px 10px rgb(20 50 90 / .1); }
.office .om-col.now .om-bar:not(.spent), .office .om-col:hover .om-bar:not(.spent), .office .om-col:focus-visible .om-bar:not(.spent) {
  background: linear-gradient(180deg, #f6c27f, #c9782c); border-color: rgb(255 236 210 / .9);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 0 0 1px rgb(201 120 44 / .25), 0 8px 26px rgb(214 130 50 / .45); }
.office .om-col:hover .om-bar, .office .om-col:focus-visible .om-bar { filter: none; }
.office .om-bar b { bottom: calc(100% + 8px); padding: 3px 8px; border-radius: 8px; background: #fff; color: #2a211a; font-size: 12px; box-shadow: 0 4px 12px rgb(40 25 10 / .16); }
html[data-theme=dark] .office .om-bar { background: linear-gradient(180deg, rgb(255 255 255 / .34), rgb(255 255 255 / .06)); border-color: rgb(255 240 222 / .3);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 6px 14px rgb(0 0 0 / .3); }
html[data-theme=dark] .office .om-bar.spent { background: linear-gradient(180deg, rgb(150 195 255 / .55), rgb(57 135 229 / .2)); border-color: rgb(170 205 255 / .35); }
html[data-theme=dark] .office .om-col.now .om-bar:not(.spent), html[data-theme=dark] .office .om-col:hover .om-bar:not(.spent), html[data-theme=dark] .office .om-col:focus-visible .om-bar:not(.spent) {
  background: linear-gradient(180deg, #f2b866, #b8691f); border-color: rgb(255 214 160 / .6); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 0 22px rgb(230 140 50 / .5); }
.office .om-sw { border-radius: 999px; }
@media (prefers-reduced-motion: no-preference) {
  .office .om-chart.rise .om-bar { animation: tube-rise .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
  .office .om-chart.rise .om-bar.spent { animation-delay: calc(var(--i, 0) * 45ms + 90ms); }
}
@keyframes tube-rise { from { transform: scaleY(0); } to { transform: none; } }
.office .om-table { margin-top: 12px; }
.office .om-table summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.office .om-check { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.office .om-check:last-child { border-bottom: 0; }
.office .om-check-text { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); flex: 1 1 320px; }
.office .om-check-text .ic { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent-deep); }
.office .om-tools { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 8px; }
.office .om-tools .input { flex: 0 1 320px; }
.office .om-pays td.om-date { white-space: nowrap; }
@media (max-width: 759px) {
  .office .om-plot { height: 160px; margin-left: 44px; }
  .office .om-months { margin-left: 44px; font-size: 11px; }
  .office .om-months .m3 { display: none; }   /* a phone has room for one letter a month */
  .office .om-months .m1 { display: inline; }
  .office .om-bar b { font-size: 11px; }
  .office .om-tools .input { flex: 1 1 100%; }
  .office .om-pays th:nth-child(3), .office .om-pays td:nth-child(3) { display: none; }
}

/* Money: by client. */
.office .om-client-head, .office .om-client summary { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px 110px; gap: 10px; align-items: center; }
.office .om-client-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); padding: 0 8px 6px; border-bottom: 1px solid var(--line); }
.office .om-client-head span:not(:first-child), .office .om-client summary span { text-align: right; font-variant-numeric: tabular-nums; }
.office .om-client { border-bottom: 1px solid var(--line); }
/* By client: order (chips), List or Graph, archived clients; the graph is one bar per client. */
.office .om-ctools { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.office .om-ctools-r { display: flex; gap: 8px; align-items: center; }
.office .om-ctools .seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgb(var(--ink-rgb) / .06); }
.office .om-ctools .seg button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.office .om-ctools .seg button[aria-pressed=true] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-pill); }
.office .om-graph-what { margin: 0 0 8px; }
.office .om-hbars { display: grid; gap: 2px; }
.office .om-hb { display: grid; grid-template-columns: minmax(110px, 30%) minmax(0, 1fr) 96px; gap: 12px; align-items: center; padding: 7px 8px; border-radius: 10px; color: inherit; text-decoration: none; }
.office a.om-hb:hover, .office a.om-hb:focus-visible { background: rgb(var(--ink-rgb) / .05); }
.office .om-hb-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.office .om-hb-track { height: 14px; display: flex; align-items: center; }
.office .om-hb-bar { display: block; height: 10px; border-radius: 0 4px 4px 0; background: var(--chart-bar); }
.office .om-hbars.owes .om-hb-bar { background: var(--chart-bar-2); }
.office .om-hb-bar.late { background: var(--bad-ink); }
.office .om-hb-v { text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .office .om-hb { grid-template-columns: minmax(0, 1fr) 84px; row-gap: 4px; }
  .office .om-hb-track { grid-column: 1 / -1; grid-row: 2; }
}
.office .om-client summary { padding: 10px 8px; cursor: pointer; list-style: none; border-radius: 8px; }
.office .om-client summary::-webkit-details-marker { display: none; }
.office .om-client summary:hover, .office .om-client[open] summary { background: rgb(var(--ink-rgb) / .04); }
.office .om-client summary b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.office .om-invs { display: grid; gap: 2px; padding: 6px 8px 12px 18px; }
.office .om-inv { display: grid; grid-template-columns: minmax(0, 1fr) 100px 110px 110px; gap: 10px; align-items: center; padding: 6px 4px; color: inherit; text-decoration: none; font-size: 14px; border-radius: 6px; }
.office .om-inv:hover { background: rgb(var(--ink-rgb) / .05); }
.office .om-inv span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.office .om-inv b, .office .om-inv small { text-align: right; font-variant-numeric: tabular-nums; }
.office .om-inv small { color: var(--ink-3); font-size: 13px; }
.office .om-inv small.o-late { color: var(--bad-ink); }
.office .om-invs .btn { justify-self: start; margin-top: 6px; }
.office .om-more { margin-top: 10px; }

/* Spending. */
.office .os-howto { margin: 2px 0 16px 22px; padding: 0; display: grid; gap: 6px; color: var(--ink-2); }
.office .os-cat { width: 100%; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 8px; padding: 6px 6px; grid-template-columns: minmax(110px, 230px) minmax(40px, 1fr) 100px; }
.office .os-cat:hover, .office .os-cat[aria-pressed=true] { background: rgb(var(--ink-rgb) / .05); }
.office .os-cat[aria-pressed=true] .o-bar-label { color: var(--ink); }
.office .os-cat:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 1px; }
.office .os-list td.om-date { white-space: nowrap; }
.office .chip .ic { width: 14px; height: 14px; }
.os-check { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-2); margin: -2px 0 12px; }
.modal footer .os-left { margin-right: auto; }

/* Spending from Wave. */
.office .ow-from { max-width: 460px; margin-bottom: 4px; }
.office .ow-from small { display: block; margin-top: 4px; font-size: 13px; }
.office .ow-h { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin: 18px 0 4px; }
.office .ow-acc { display: grid; grid-template-columns: 20px minmax(0, 1fr) 80px 110px; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.office .ow-acc input { width: 18px; height: 18px; accent-color: var(--accent-deep); }
.office .ow-acc small { color: var(--ink-3); text-align: right; font-size: 13px; }
.office .ow-acc b { text-align: right; font-variant-numeric: tabular-nums; }
.office .ow-out { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: rgb(var(--ink-rgb) / .04); font-size: 14px; color: var(--ink-2); }
.office .ow-out ul { margin: 6px 0 0 18px; padding: 0; display: grid; gap: 3px; }
.office .ow-facts { margin-bottom: 14px; }

/* GST. */
.office .og-q h3 .tag { vertical-align: 2px; margin-left: 6px; white-space: nowrap; }
.office .og-tag.is-paid { background: rgba(35, 133, 79, .14); color: var(--good-ink); }
.office .og-tag.is-due { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--accent-deep); }
.office .og-tag.is-late { background: color-mix(in srgb, var(--bad-ink) 14%, transparent); color: var(--bad-ink); }
.office .og-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.office .og-figs > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: rgb(var(--ink-rgb) / .04); }
.office .og-figs span { font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.office .og-figs span small { color: var(--ink-3); font-weight: 500; margin-left: 4px; }
.office .og-figs b { font-size: 21px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.office .og-figs > div > small { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.office .og-figs .og-net { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.office .og-diff { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); margin: 12px 0 0; font-size: 14px; }
.office .og-diff .ic { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent-deep); }
.office .og-q.is-late { box-shadow: inset 3px 0 0 var(--bad-ink); }
.office .og-basis button { width: auto; padding: 0 16px; font-weight: 600; font-size: 14px; }
.office .og-reg { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.office .og-reg .field { flex: 0 1 230px; margin: 0; }
.office .og-reg p { flex: 1 1 100%; margin: 4px 0 0; }
.office .og-lines td:nth-child(2) { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
  .office .om-client-head { display: none; }
  .office .om-client summary { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 4px; }
  .office .om-client summary b { grid-column: 1 / -1; }
  .office .om-client summary span { text-align: left; font-size: 14px; }
  .office .om-client summary span::before { content: attr(data-k); display: block; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
  .office .om-invs { padding-left: 8px; }
  .office .om-inv { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  .office .om-inv small:first-of-type { display: none; }
  .office .om-legend { margin-bottom: -8px; }
  .office .os-cat { grid-template-columns: 110px minmax(30px, 1fr) 84px; font-size: 13.5px; }
  .office .os-list th:nth-child(3), .office .os-list td:nth-child(3) { display: none; }
  .office .ow-acc { grid-template-columns: 20px minmax(0, 1fr) 96px; }
  .office .ow-acc small { display: none; }
  .office .og-q .card-head, .office .og-how .card-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .office .og-figs { grid-template-columns: 1fr; gap: 6px; }
  .office .og-figs > div { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 10px 12px; }
  .office .og-figs > div > small { grid-column: 1 / -1; }
  .office .og-figs b { font-size: 18px; }
  .office .og-lines td:nth-child(2) { max-width: 150px; }
}

/* Spending: groups and their categories, the sorting screen, receipts. */
.office .os-grp .o-bar-label { font-weight: 700; color: var(--ink); }
.office .os-subs { margin: 2px 0 10px 14px; padding-left: 12px; border-left: 2px solid var(--line); }
.office .os-subs > p { margin: 4px 0 2px; }
.office .os-sub { font-size: 14px; }
.office .os-sub .o-bar-track { height: 8px; }
.office .os-unsorted { color: var(--accent-deep); font-weight: 600; }
.office .os-clip .ic { width: 14px; height: 14px; vertical-align: -2px; color: var(--ink-3); }
.office .os-sortcard { background: color-mix(in srgb, var(--accent) 10%, var(--card, transparent)); }
.office .os-sortcard .card-head { margin-bottom: 0; align-items: center; }
.office .os-sort select { min-width: 230px; }
.office .os-pickcell small { display: block; margin-top: 3px; font-size: 12.5px; }
.office .os-sort tr.os-needs td:first-child { box-shadow: inset 3px 0 0 var(--accent-deep); padding-left: 10px; }
.office .os-sortbar { margin-top: 14px; align-items: center; gap: 12px; flex-wrap: wrap; }
.os-receipts { margin: 4px 0 12px; }
/* GST: what each BAS said, and the next BAS with the fixes from earlier quarters. */
.og-lodged { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0 2px; border-top: 1px solid var(--line); margin-top: 10px; font-size: 14px; }
.og-lodged small, .og-lodged .og-est { display: block; color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.og-lodged .og-est { color: var(--accent-ink); }
.og-next .og-enter th small { font-weight: 400; }
.og-next .og-enter td.num b { font-size: 16px; }
.og-topay { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 12px 0 4px; border-top: 1px solid var(--line); margin-top: 8px; }
.og-topay span { font-weight: 600; }
.og-topay b { font-size: 22px; }
.og-topay small { flex-basis: 100%; color: var(--ink-3); font-size: 13px; }
.og-fixes { margin: 8px 0; padding-left: 18px; font-size: 14px; }
.og-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 560px) { .og-three { grid-template-columns: 1fr; } .og-lodged { flex-wrap: wrap; } }
/* Business share: the setting (by category) and a purchase's own. */
.os-share-field { display: grid; grid-template-columns: minmax(120px, 160px) 1fr; gap: 4px 14px; align-items: end; margin: 0 0 12px; }
.os-share-field .field { margin: 0; }
.os-share-field p { margin: 0 0 9px; }
.os-share-in { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.os-share-in .input { width: 76px; text-align: right; }
.os-share-group { border: 0; padding: 0; margin: 0 0 14px; }
.os-share-group legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.os-share-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.os-share-row:last-child { border-bottom: 0; }
.os-share-note { display: block; font-size: 12px; color: var(--ink-3); font-weight: 400; white-space: nowrap; }
@media (max-width: 560px) { .os-share-field { grid-template-columns: 1fr; } .os-share-field p { margin: 0; } }
.os-rc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; margin-bottom: 8px; }
.os-rc-list { display: flex; flex-wrap: wrap; gap: 8px; }
.os-rc { position: relative; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; background: rgb(var(--ink-rgb) / .06); flex: none; }
.os-rc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.os-rc.is-new { outline: 2px dashed var(--accent-deep); outline-offset: -2px; }
.os-rc-pdf { display: grid; place-items: center; align-content: center; gap: 4px; width: 100%; height: 100%; color: var(--ink-2); text-decoration: none; padding: 6px; text-align: center; }
.os-rc-pdf .ic { width: 22px; height: 22px; }
.os-rc-pdf small { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 64px; }
.os-rc-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .58); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.os-rc-x .ic { width: 14px; height: 14px; }
.os-rc-none { margin: 0; }
@media (max-width: 640px) {
  .office .os-sort thead { display: none; }
  .office .os-sort tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .office .os-sort td { border: 0; padding: 0; }
  .office .os-sort td:first-child { width: auto; max-width: none; min-width: 0; }
  .office .os-sort .o-desc { white-space: normal; }
  .office .os-sort .os-pickcell { grid-column: 1 / -1; }
  .office .os-sort select { width: 100%; min-width: 0; }
  .office .os-sortcard .card-head { align-items: flex-start; flex-direction: column; }
}

/* Bank. */
.office .ob-tbl td { vertical-align: middle; }
.office .ob-desc { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.office .ob-in { color: var(--good-ink); font-weight: 650; }
.office .ob-pick { width: 300px; }
.office .ob-pick .select { width: 100%; }
.office .ob-pick .ob-cat { margin-top: 6px; }
.office .ob-tick { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.office .ob-tick input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--accent-deep); }
.office .ob-bar { margin-top: 14px; align-items: center; gap: 12px; flex-wrap: wrap; }
.office .ob-tbl tr.os-needs .ob-pick > .select { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-deep) 55%, transparent); }
.office .linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-deep); text-decoration: underline; cursor: pointer; }
.office button.ob-fact { text-align: left; font: inherit; color: inherit; cursor: pointer; border: 0; }
/* Phones: the lists' card layout (above), with the choice under the line at full width. */
@media (max-width: 759px) {
  .office .o-tbl.ob-tbl:has(td.om-date:first-child) tbody td.om-date { grid-column: 1; }
  .office .o-tbl.ob-tbl:has(td.om-date:first-child) tbody td.num { grid-column: 2; grid-row: 1; align-self: start; }
  .office .o-tbl.ob-tbl:has(td.om-date:first-child) tbody td.ob-pick { grid-column: 1 / -1; justify-self: stretch; text-align: left; width: auto; margin-top: 8px; }
  .office .ob-desc { white-space: normal; overflow-wrap: anywhere; }
}

/* ---------- Renewals: hosting of clients' 3D captures (js/office-hosting.js) ---------- */
.office .o-status.oh-st-due { background: color-mix(in srgb, var(--st-construction) 18%, transparent); color: var(--accent-deep); }
.office .o-status.oh-st-lapsed { background: rgb(155 47 29 / .12); color: var(--bad-ink); }
.office .o-status.oh-st-running { background: rgba(35, 133, 79, .14); color: var(--good-ink); }
.office .o-status.oh-st-ended { background: rgb(var(--ink-rgb) / .06); color: var(--ink-3); }
.office .oh-check { display: inline-flex; align-items: center; gap: 5px; font-weight: 650; white-space: nowrap; }
.office .oh-check svg { width: 15px; height: 15px; }
.office .oh-check.oh-live { color: var(--good-ink); }
.office .oh-check.oh-offline { color: var(--bad-ink); }
.office .oh-check.oh-unsure { color: var(--ink-3); }
.office .oh-link small.o-desc { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.office .oh-actions { white-space: nowrap; }
.office .oh-actions .btn + .btn, .office .oh-actions .o-desc + .btn { margin-left: 6px; }
.office .oh-actions small.o-desc { display: inline; margin-right: 4px; }
.office .oh-doc { font-weight: 650; }
.office button.oh-fact { text-align: left; font: inherit; color: inherit; cursor: pointer; }
.office button.oh-fact[aria-pressed=true] { outline: 2px solid var(--accent); outline-offset: -2px; }
.office .oh-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-deep); text-decoration: underline; cursor: pointer; }
.oh-cost { display: flex; gap: 8px; }
.oh-cost .input { flex: 1 1 auto; min-width: 0; }
.oh-cost .select { flex: 0 0 auto; width: auto; }
.oh-choices { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; }
/* On a phone each capture is a small card: name and price, then when it runs out, its link, and the renewal. */
@media (max-width: 759px) {
  .office .oh-list thead { display: none; }
  .office .oh-list, .office .oh-list tbody { display: block; width: 100%; }
  .office .o-tbl.oh-list tbody td { display: block; width: auto; min-width: 0; max-width: none; text-align: left; }
  .office .oh-list tbody td:nth-child(4) { text-align: right; }
  .office .oh-list tbody tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 6px; padding: 12px 4px; border-bottom: 1px solid rgb(var(--ink-rgb) / .08); }
  .office .oh-list tbody td { padding: 0; border: 0; }
  .office .oh-list tbody td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .office .oh-list tbody td:nth-child(4) { grid-column: 2; grid-row: 1; }
  .office .oh-list tbody td:nth-child(2), .office .oh-list tbody td:nth-child(3), .office .oh-list tbody td:nth-child(5) { grid-column: 1 / -1; }
  .office .oh-list tbody td[colspan] { grid-column: 1 / -1; }
  .office .oh-list small.o-desc { white-space: normal; overflow: visible; }
  .office .oh-actions { white-space: normal; text-align: left; }
  .office .oh-link small.o-desc { max-width: none; white-space: normal; }
}
.oh-keep { align-self: end; padding-bottom: 10px; }
.oh-cost-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 150px; gap: 6px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .08); }
.oh-cost-row > small { grid-column: 2 / -1; }
.oh-cost-in { display: flex; align-items: center; gap: 6px; }
.oh-cost-in .input { min-width: 0; }
@media (max-width: 759px) { .oh-cost-row { grid-template-columns: 1fr 1fr; } .oh-cost-row > b { grid-column: 1 / -1; } }
.office .o-status.oh-st-demo { background: color-mix(in srgb, var(--st-presale) 16%, transparent); color: var(--st-presale); }