/* The admin frame and its rules, loaded last.

   1. One rail holds everything that is not the page: the company, search, the
      one action, every place, the Tally status and Settings. No bar across the
      top on a wide screen.
   2. One mark for Tally (two arrows, in the one hue kept for it). A place that
      is kept in step with Tally carries it; a place that is not says so.
   3. Colour says something or is not used: green is done or money in, amber is
      waiting or needs a look, red is wrong or overdue, marigold is the one
      action. Kinds of thing are told apart by their icon and their name.
   4. One corner scale: 12 for a card, 8 for a control, 6 for a tag. No pills. */

:root {
  --r-card: 12px; --r-ctl: 8px; --r-tag: 6px;
  --tally: #0b7a7f; --tally-bg: #def1f0; --tally-on-dark: #7fd4d0;
  /* figures are set in the text face, in columns that line up */
  --mono: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* money going out is not wrong, so it is not red; red is kept for what is */
  --c-out: #5a5c64; --t-out: #ebebee;
  --c-bad: #c0392b; --t-bad: #fde9e6;
  --c-stock: #4f6184; --t-stock: #e8ecf3;
}
body { font-variant-numeric: tabular-nums; }
.tone-bad { --tone: var(--c-bad); --tint: var(--t-bad); }
/* icon squares: only money in, what is waiting and what is wrong carry a colour */
.ico.tone-sales, .ico.tone-stock, .ico.tone-tax, .tone-sales .ico, .tone-stock .ico, .tone-tax .ico { background: var(--t-plain); color: var(--c-plain); }
.kinds .chip .dot { display: none; }
.fig, .hero-fig, .row-val, .entry-amt, .bl-val, table.data td, .line > span:last-child, .month-head b, .summary-line b, .line-amt, .share b, .tip .v, .place .v, .hero-split b { letter-spacing: -0.01em; }
.fig, .hero-fig, .hero-card .big { letter-spacing: -0.025em; font-weight: 600; }

/* ---------- the Tally mark ---------- */
.scope { display: inline-flex; flex: none; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-tag); font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1; white-space: nowrap; vertical-align: middle; }
.scope .tg { flex: none; }
.scope-tally { background: var(--tally-bg); color: var(--tally); }
.scope-read { color: var(--tally); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tally) 35%, transparent); }
.scope-local { color: var(--muted); box-shadow: inset 0 0 0 1px var(--dash); }
.tag .tg { margin-right: -1px; }
h1.page-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

/* ---------- one corner scale ---------- */
.card, .entries, .tray, .install-card, .sk > *, .sk-tiles i { border-radius: var(--r-card); }
.card { box-shadow: 0 1px 2px rgba(22, 23, 26, 0.05); }
.entries { box-shadow: 0 1px 2px rgba(22, 23, 26, 0.05); }
.pill { border-radius: var(--r-ctl); height: 36px; padding: 0 14px; font-size: 13.5px; box-shadow: inset 0 0 0 1px rgba(22, 23, 26, 0.14), 0 1px 0 rgba(22, 23, 26, 0.04); }
.pill.dark, .pill.accent { box-shadow: none; }
.pill.small { height: 30px; border-radius: 7px; }
.pill.wide { height: 44px; }
.pill.round { width: 36px; }
.field, .field.sm, .chip, .token, .choice button, .inset, .bill-line, .banner, .alert, .toast, .top-icon, .close, .icon-x, .subnav a, .tabs button, .tabs a, .steps li, .stickybar, .pick-list, .note { border-radius: var(--r-ctl); }
.chip { height: 32px; padding: 0 12px; font-size: 13px; }
.seg { border-radius: 9px; }
.seg button { border-radius: 7px; height: 30px; }
.tag { border-radius: var(--r-tag); }
.ico { border-radius: 8px; }
.ico.lg, .avatar { border-radius: 9px; }
.menu, dialog.palette { border-radius: var(--r-card); }
.menu button, .menu a, .palette-list button, .pick-opt { border-radius: 7px; }
dialog.sheet { border-radius: 16px 16px 0 0; }
.choices a, .choices button { border-radius: 10px; padding: 11px 12px; }
.close { width: 36px; height: 36px; box-shadow: inset 0 0 0 1px var(--line); }
.alert a, .alert button { border-radius: 7px; }
.wgrid.editing .wg { border-radius: 14px; }
.empty-period .ico.lg { border-radius: 10px; }
.tabs button, .tabs a { background: none; }
.tabs [aria-selected="true"] { background: rgba(22, 23, 26, 0.08); color: var(--ink); }
.tabs [aria-selected="true"] small { background: rgba(22, 23, 26, 0.1); }
@media (min-width: 640px) { dialog.sheet { border-radius: 16px; } }
@media (min-width: 700px) {
  .field { height: 40px; font-size: 14.5px; }
  .field.sm { height: 36px; font-size: 13.5px; }
}

/* ---------- the "New" and "More" lists ---------- */
.sheet-body h3.sheet-group { display: flex; margin-bottom: 8px; }
.choices.two { grid-template-columns: 1fr 1fr; }
.choices.two a, .choices.two button { gap: 10px; padding: 9px 10px; }
.choices.two small, .choices.two .chev { display: none; }
.choices.two b { font-size: 14px; font-weight: 500; }
.choices.two .ico.lg { width: 30px; height: 30px; border-radius: 8px; }
.choices.two .ico.lg svg { width: 17px; height: 17px; }

/* ---------- Home ---------- */
.home2 { display: grid; gap: 16px; }
.home2 > .page-head { margin-bottom: 0; }
.home2 .card { --pad: 16px; padding: var(--pad); }
.home2 .card-head { margin-bottom: 10px; }
.home2 .kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; overflow: hidden; }
.kpi { display: grid; gap: 3px; align-content: start; padding: 14px 16px; min-width: 0; border-top: 1px solid var(--hair); }
.kpi:nth-child(-n + 2) { border-top: 0; }
.kpi:nth-child(even) { border-left: 1px solid var(--hair); }
.kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
.kpi:hover { background: rgba(22, 23, 26, 0.025); }
.kpi-l { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-v { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi small { display: flex; align-items: center; gap: 6px; min-height: 20px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.kpi small.bad, .row-val small.bad { color: var(--bad); font-weight: 500; }
.kpi .tag { height: 20px; padding: 0 6px; font-size: 11px; }
.home-grid { display: grid; gap: 16px; }
.home-main, .home-side { display: grid; gap: 16px; min-width: 0; align-content: start; }
.home2 .todo a:first-child { padding-top: 4px; }
.home2 .todo a:last-child { padding-bottom: 2px; }
.all-clear { display: flex; align-items: center; gap: 12px; }
.all-clear b { display: block; font-weight: 500; font-size: 14.5px; }
.all-clear small { display: block; font-size: 12.5px; color: var(--muted); }
.trend { padding-bottom: 0 !important; overflow: hidden; }
.trend-fig { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 14px; font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.trend .spark { height: 110px; gap: 4px; }
.trend .spark i { background: #dcdbd4; border-radius: 3px 3px 0 0; }
.trend .spark i:hover { background: #bdbcb4; }
.trend .spark i.now { background: var(--accent); }
.trend .spark-axis { margin-top: 6px; color: var(--muted); }
.trend-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px calc(var(--pad) * -1) 0; border-top: 1px solid var(--hair); }
.trend-foot div { display: grid; gap: 1px; padding: 12px var(--pad); min-width: 0; }
.trend-foot div + div { border-left: 1px solid var(--hair); }
.trend-foot small { font-size: 12.5px; color: var(--muted); }
.trend-foot b { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.trend-foot span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick { display: grid; gap: 1px; margin: 0 -8px -6px; }
.quick a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 8px; border-radius: var(--r-ctl); font-size: 14px; font-weight: 500; }
.quick a:hover { background: rgba(22, 23, 26, 0.05); }
.quick svg { flex: none; color: var(--muted); }
.quick kbd { display: none; margin-left: auto; padding: 2px 6px; border-radius: 5px; font: 500 11px var(--sans); color: var(--muted); background: rgba(22, 23, 26, 0.06); }
.team-now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.team-now div { display: grid; }
.team-now b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.team-now small { font-size: 12.5px; color: var(--muted); }
.sold-map { margin-top: 14px; }
@media (min-width: 700px) { .home2 .card { --pad: 20px; } }
@media (min-width: 900px) {
  .home2 .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kpi, .kpi:nth-child(even) { border-top: 0; border-left: 1px solid var(--hair); padding: 16px 20px; }
  .kpi:first-child { border-left: 0; }
  .kpi:last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 1100px) { .home-grid { grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); align-items: start; } }

/* ---------- Settings ---------- */
.set { display: grid; gap: 0; max-width: 1120px; margin: 0 auto; }
.set > .page-head { margin-bottom: 4px; }
.set form { display: grid; gap: 0; }
.set .line > span:last-child { white-space: normal; text-align: right; }
.set .line.bad > span:first-child { color: var(--bad); }
.set-line { display: flex; align-items: center; gap: 12px; padding: 12px 0; min-width: 0; }
.set-line + .set-line { border-top: 1px solid var(--hair); }
.set-line:first-child { padding-top: 0; }
.set-line:last-child { padding-bottom: 0; }
.set-line .t { flex: 1; min-width: 0; }
.set-line .t b { display: block; font-weight: 500; font-size: 14.5px; }
.set-line .t small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.set-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 16px; align-items: center; }
.set-status .who b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.set-counts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 14px; border-top: 1px solid var(--hair); }
.set-counts div { display: grid; }
.set-counts b { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.set-counts small { font-size: 12.5px; color: var(--muted); }
.set-save { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 4px 0 8px; }
.set-later { display: flex; align-items: center; gap: 14px; }
.set-later b { font-size: 15px; font-weight: 600; }
.set-text { max-width: 62ch; margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.set-points { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.set-points li { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; }
.set-points svg { flex: none; margin-top: 2px; color: var(--muted); }
@media (min-width: 700px) { .set-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- wide screens: the rail, and no bar across the top ---------- */
@media (min-width: 1000px) {
  .topbar { display: none; }
  .app { grid-template-columns: 248px minmax(0, 1fr); }
  .side { gap: 0; padding: 14px 10px 10px; }
  .side .logo { padding: 2px 8px 12px; font-size: 16px; gap: 8px; }
  .rail-co { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; cursor: pointer; text-align: left; background: rgba(255, 255, 255, 0.06); color: var(--on-dark); }
  .rail-co:hover { background: rgba(255, 255, 255, 0.1); }
  .rail-co-t { flex: 1; min-width: 0; display: grid; }
  .rail-co-t b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rail-co-t small { font-size: 11.5px; color: var(--on-dark-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rail-co-chev { flex: none; color: var(--on-dark-dim); }
  .rail-search { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; margin: 8px 0; padding: 0 7px 0 10px; border: 0; border-radius: var(--r-ctl); cursor: text; text-align: left; font-size: 13px; color: var(--on-dark-dim); background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13); }
  .rail-search:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); }
  .rail-search span { flex: 1; }
  .rail-search kbd { padding: 2px 6px; border-radius: 5px; font: 500 10.5px var(--sans); color: var(--on-dark-dim); background: rgba(255, 255, 255, 0.08); }
  .side-new { height: 36px; margin: 0 0 10px; border-radius: var(--r-ctl); font-size: 13.5px; }
  .side-scroll { margin: 0 -2px; padding: 0 2px; }
  .rail-nav { display: grid; gap: 1px; }
  .rail-group { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 10px 5px; font-size: 11.5px; font-weight: 500; color: #7f828b; }
  .rail-nav > .rail-group:first-child { margin-top: 4px; }
  .rail-item, .rail-back { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: var(--r-ctl); font-size: 13.5px; color: #c3c5cb; }
  .rail-item span, .rail-back span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rail-item svg { flex: none; color: #8d9099; }
  .rail-item:hover, .rail-back:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
  .rail-item[aria-current="page"] { background: rgba(255, 255, 255, 0.11); color: #fff; font-weight: 500; }
  .rail-item[aria-current] { color: #fff; font-weight: 500; }
  .rail-item[aria-current] svg { color: var(--accent); }
  .rail-item .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: var(--bad); color: #fff; }
  .rail-soon { font-style: normal; font-size: 10.5px; color: #7f828b; }
  .rail-sub { display: grid; gap: 1px; margin-bottom: 4px; }
  .rail-sub a { display: flex; align-items: center; min-height: 30px; padding: 0 10px 0 38px; border-radius: var(--r-ctl); font-size: 13px; color: var(--on-dark-dim); }
  .rail-sub a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
  .rail-sub a[aria-current="page"] { background: rgba(255, 255, 255, 0.11); color: #fff; font-weight: 500; }
  .rail-back { margin-bottom: 2px; color: var(--on-dark-dim); }
  .side .scope { height: 18px; padding: 0 6px; border-radius: 5px; font-size: 10.5px; }
  .side .scope-tally { background: rgba(127, 212, 208, 0.13); color: var(--tally-on-dark); }
  .side .scope-local { color: #8d9099; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
  .side-foot { display: grid; gap: 6px; padding: 10px 0 0; }
  .side-status { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-radius: 10px; background: var(--ink-2); }
  .ss-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
  .side-status b { gap: 6px; font-size: 13px; }
  .side-status b .tg { color: var(--wait); }
  .side-status[data-state="ok"] b .tg { color: #5fd3a0; }
  .side-status[data-state="bad"] b .tg { color: #fff; }
  .side-status span { font-size: 11.5px; color: var(--on-dark-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-status[data-state="bad"] span { color: #ffe1dc; }
  .side-status button.ss-check { flex: none; justify-self: auto; width: 30px; height: 30px; padding: 0; justify-content: center; border-radius: var(--r-ctl); }
  .alert { margin: 16px 32px 0; }
  .page { padding: 22px 32px 56px; }
  .page-title { font-size: 23px; letter-spacing: -0.025em; }
  .page-head { margin-bottom: 16px; }
  .back { margin-bottom: 6px; }
  .quick kbd { display: inline-block; }
  dialog.sheet { max-width: 31rem; }
}
@media (min-width: 1700px) { .app { grid-template-columns: 264px minmax(0, 1fr); } }

/* controls from the stock and team screens, on the same corner scale */
.st-extra, .attached { border-radius: var(--r-ctl); }
.st-extra { height: 34px; }

/* ---------- a list of one kind, as a table: views, search, then the rows ---------- */
.card.index { padding: 0; overflow: hidden; }
.index-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 12px; }
.views { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.views::-webkit-scrollbar { display: none; }
.views button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: none; cursor: pointer; font-size: 13.5px; color: var(--muted); }
.views button:hover { background: rgba(22, 23, 26, 0.05); color: var(--ink); }
.views [aria-selected="true"] { background: rgba(22, 23, 26, 0.08); color: var(--ink); font-weight: 500; }
.views small { padding: 1px 6px; border-radius: 5px; font-size: 11.5px; font-weight: 500; background: rgba(22, 23, 26, 0.07); color: var(--muted); }
.index-top .searchbox { flex: 1 1 220px; max-width: 340px; }
.index-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; padding: 0 16px 10px; font-size: 13px; color: var(--muted); }
.index-sum i { width: 1px; height: 12px; margin: 0 10px; background: var(--dash); }
.index-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.index-table th { padding: 8px 12px; text-align: left; font-weight: 500; font-size: 12.5px; color: var(--muted); white-space: nowrap; background: #f7f6f3; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.index-table td { padding: 11px 12px; border-bottom: 1px solid var(--hair); white-space: nowrap; vertical-align: middle; }
.index-table th:first-child, .index-table td:first-child { padding-left: 16px; }
.index-table th:last-child, .index-table td:last-child { padding-right: 16px; }
.index-table .num { text-align: right; }
.index-table tbody tr { cursor: pointer; }
.index-table tbody tr:hover td { background: rgba(22, 23, 26, 0.025); }
.index-table tbody tr:last-child td { border-bottom: 0; }
.index-table .c-no a { font-weight: 500; }
.index-table .c-no a:hover { text-decoration: underline; text-underline-offset: 3px; }
.index-table .c-no .tag { margin-left: 8px; }
.index-table .c-no .m-date { display: none; }
.index-table .c-party { white-space: normal; min-width: 150px; }
.index-table .c-date, .index-table .c-due, .index-table .c-extra { color: var(--muted); }
.index-table .c-due.late { color: var(--bad); font-weight: 500; }
.index-table tr.off .c-no a, .index-table tr.off .c-amt { color: var(--faint); text-decoration: line-through; }
.index-table .quiet { color: var(--faint); }
.index-more { display: grid; place-items: center; padding: 12px; border-top: 1px solid var(--hair); }
.index-empty { display: grid; justify-items: center; gap: 6px; padding: 48px 20px 52px; text-align: center; border-top: 1px solid var(--hair); }
.index-empty b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.index-empty p { max-width: 44ch; font-size: 13.5px; color: var(--muted); }
.index-empty .actions { justify-content: center; margin-top: 10px; }
@media (max-width: 699px) {
  /* a phone has no room for columns: each row becomes two lines, the name and the amount first */
  .index-table, .index-table tbody { display: block; }
  .index-table thead { display: none; }
  .index-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "party amt" "no pay"; gap: 2px 12px; padding: 11px 14px; border-bottom: 1px solid var(--hair); }
  .index-table tbody tr:last-child { border-bottom: 0; }
  .index-table td, .index-table td:first-child, .index-table td:last-child { padding: 0; border: 0; }
  .index-table .c-party { grid-area: party; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .index-table .c-amt { grid-area: amt; }
  .index-table .c-no { grid-area: no; font-size: 12.5px; color: var(--muted); }
  .index-table .c-no a { font-weight: 400; }
  .index-table .c-pay { grid-area: pay; justify-self: end; }
  .index-table .c-date, .index-table .c-due, .index-table .c-unpaid, .index-table .c-extra { display: none; }
  .index-top .searchbox { max-width: none; }
}

/* ---------- one entry, opened as a record ---------- */
h1.page-title .tag { height: 22px; font-size: 12px; letter-spacing: 0; }
.record .doc-body { padding-top: 14px; }
.record-fig { display: grid; gap: 2px; margin-bottom: 10px; }
.record-fig small { font-size: 12.5px; color: var(--muted); }
.record-fig b { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.record-party { font-size: 15px; font-weight: 500; }
.record-text { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.record-tally b { display: block; font-weight: 600; font-size: 14.5px; }
.line > span small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.line > span small.bad { color: var(--bad); font-weight: 500; }
.line > span:last-child:has(a) { white-space: normal; text-align: right; }

/* ---------- writing a bill: each line reads across, like a row of the bill itself ---------- */
.bill-line { padding: 0 0 10px; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; background: none; }
.bill-line:last-child { border-bottom: 0; padding-bottom: 0; }
.bill-line .field { background: #fff; box-shadow: inset 0 0 0 1px rgba(22, 23, 26, 0.16); }
.bill-line .field:focus { box-shadow: inset 0 0 0 2px var(--ink); }
.line-nums label { font-size: 12px; color: var(--muted); }
@media (min-width: 1100px) {
  .bill-line:has(> .pick) { grid-template-columns: minmax(180px, 1fr) minmax(0, 2.3fr); column-gap: 8px; align-items: end; }
  .bill-line:has(> .pick) > .line-foot { grid-column: 1 / -1; }
  .bill-line:has(> .pick) > .line-nums { grid-column: 2; }
  .bill-line:has(> .pick) > .pick { grid-column: 1; }
}

/* ---------- the desk: tasks and follow-ups ---------- */
.home2 .kpis.four, .kpis.four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; overflow: hidden; margin-bottom: 16px; }
.index-note { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.task-add, .task { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-top: 1px solid var(--hair); }
.task-add .field { box-shadow: none; padding-left: 0; background: none; height: 34px; }
.task-add .field:focus { box-shadow: none; }
.task-box { flex: none; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; background: #fff; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(22, 23, 26, 0.32); }
.task-box:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.task-box[aria-checked="true"] { background: var(--ok); box-shadow: none; }
.task-box.ghost { cursor: default; box-shadow: inset 0 0 0 1.5px var(--dash); }
.task-main { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 4px 0; border: 0; background: none; cursor: pointer; text-align: left; }
.task-main b { font-weight: 500; font-size: 14px; }
.task-main small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-main small .bad { color: var(--bad); font-weight: 500; }
.task-main small .now { color: var(--wait); font-weight: 500; }
.task.done .task-main b { color: var(--faint); text-decoration: line-through; }
.task:hover { background: rgba(22, 23, 26, 0.02); }
.danger-link { color: var(--bad); justify-self: center; }
.index-table.chase tbody tr { cursor: pointer; }
.index-table td small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.index-table td.late { color: var(--bad); }
.index-table td.late small { color: var(--bad); }
.index-table.chase .c-extra { white-space: normal; max-width: 340px; }
.chase-notes { display: grid; }
.chase-note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; }
.chase-note + .chase-note { border-top: 1px solid var(--hair); }
.chase-note > div { flex: 1; min-width: 0; }
.chase-note b { display: block; font-size: 13.5px; font-weight: 500; }
.chase-note small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
@media (min-width: 900px) { .home2 .kpis.four, .kpis.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  .index-table.chase tr { grid-template-areas: "party amt" "pay unpaid"; }
  .index-table.chase .c-unpaid { display: block; grid-area: unpaid; justify-self: end; font-size: 12.5px; }
  .index-table.chase .c-unpaid small { display: none; }
  .index-table.chase .c-pay { justify-self: start; }
  .index-table.chase .c-party small { display: none; }
}

/* ---------- the avatar of a company: its initials on the one accent ---------- */
.rail-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0; background: var(--accent); color: var(--accent-ink); }

/* ---------- Settings: each part says what it is on the left and holds the thing on the right ---------- */
.set-part { display: grid; gap: 10px; padding: 14px 0; }
.set-about h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.set-about p { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.set-about .scope { margin-top: 10px; }
.set-part > .card { min-width: 0; }
.set-rows .line:first-child { padding-top: 0; }
.set-rows .line:last-child { padding-bottom: 0; }
.set-status .set-counts { margin-top: 0; }
@media (min-width: 900px) {
  .set-part { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; padding: 18px 0; align-items: start; }
  .set-about { padding-top: 4px; }
}

/* ---------- the bar that sends a bill: two buttons side by side, the one that sends taking the room ---------- */
.stickybar { gap: 8px; }
.stickybar .pill.wide { width: auto; height: 44px; }
.stickybar.glass { padding: 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(22, 23, 26, 0.14); }
@media (min-width: 1000px) {
  /* on a wide screen it sits in its card like any other row of buttons */
  .stickybar, .stickybar.glass { position: static; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
}

/* ---------- the menu on a phone: the whole map, as the rail holds it ---------- */
.m-menu { gap: 14px; }
.m-co { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-card); cursor: pointer; text-align: left; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.m-co > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.m-co b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-co small { font-size: 12.5px; color: var(--muted); }
.m-co .rail-av { width: 36px; height: 36px; border-radius: 9px; font-size: 13px; }
.m-status { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: var(--r-card); background: var(--ink); color: var(--on-dark); }
.m-status a { flex: 1; min-width: 0; display: grid; gap: 1px; }
.m-status b { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; }
.m-status b .tg { color: var(--accent); }
.m-status[data-state="ok"] b .tg { color: #5fd3a0; }
.m-status span { font-size: 12.5px; color: var(--on-dark-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-status button { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; cursor: pointer; background: rgba(255, 255, 255, 0.1); color: #fff; }
.m-status[data-state="bad"] { background: var(--bad); }
.m-status[data-state="bad"] b .tg { color: #fff; }
.m-status[data-state="bad"] span { color: #ffe1dc; }
.m-group h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.m-list { display: grid; padding: 4px; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.m-list a, .m-list button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 6px 10px; border: 0; border-radius: var(--r-ctl); cursor: pointer; text-align: left; font-size: 15px; background: none; }
.m-list a:active, .m-list button:active { background: rgba(22, 23, 26, 0.05); }
.m-list > * > svg:first-child { flex: none; color: var(--muted); }
.m-list > * > span { flex: 1; min-width: 0; }
.m-list b { display: block; font-weight: 500; }
.m-list small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.m-list .chev { flex: none; }
.m-list .count { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 600; background: var(--bad); color: #fff; }
.m-later { flex: none; font-style: normal; font-size: 12px; color: var(--faint); }

/* ---------- phones ---------- */
@media (max-width: 999px) {
  /* across the top: the company and how it stands, and search. Nothing else. */
  .topbar { gap: 6px; padding: max(8px, env(safe-area-inset-top)) 8px 8px 14px; }
  .top-status { display: flex; align-items: center; gap: 10px; cursor: pointer; }
  .top-status .rail-av { display: grid; width: 34px; height: 34px; border-radius: 9px; font-size: 12.5px; color: var(--accent-ink); }
  .top-status .top-co { display: grid; gap: 0; min-width: 0; text-align: left; }
  .top-status b { font-size: 15px; }
  .top-status .top-co > span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); min-width: 0; }
  .top-status.several b { justify-self: start; }
  .top-icon { width: 42px; height: 42px; background: none; box-shadow: none; }
  .alert { margin: 0 14px 10px; }
  /* the screens inside a place: a row of words, the one on show underlined */
  .subnav { gap: 0; padding: 0 6px; margin-bottom: 12px; border-bottom: 1px solid var(--hair); }
  .subnav a { height: 40px; padding: 0 10px; border-radius: 0; font-size: 14px; background: none; box-shadow: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .subnav a[aria-current="page"] { background: none; color: var(--ink); font-weight: 600; box-shadow: none; border-bottom-color: var(--ink); }
  /* across the foot: two places, the one action, a third place, the menu. Flat, edge to edge. */
  .tabbar { inset: auto 0 0 0; border-radius: 0; padding: 0 0 env(safe-area-inset-bottom, 0px); box-shadow: none; }
  .tabbar div { max-width: 560px; height: 58px; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 4px; }
  .tabbar a, .tabbar button { gap: 3px; font-size: 10.5px; }
  .tabbar .tab-new, body:has(.stickybar) .tabbar .tab-new, body:has(dialog[open]) .tabbar .tab-new { position: static; display: grid; place-items: center; justify-self: center; width: 48px; height: 40px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); box-shadow: none; }
  .tabbar .pip { top: 9px; left: calc(50% + 6px); right: auto; box-shadow: 0 0 0 2px var(--ink); }
  .page { padding: 2px 14px calc(78px + env(safe-area-inset-bottom, 0px)); }
  .toast { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  /* the buttons that send a bill stay in reach, above the bar at the foot, however long the bill is */
  .stickybar { position: fixed; left: 10px; right: 10px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); z-index: 19; }
  body:has(.stickybar) .page { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  body:has(.stickybar) .toast { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
  body:has(dialog[open]) .stickybar { display: none; }
  .page-title { font-size: 22px; }
  .back { margin-bottom: 4px; }
  /* a screen with several things to do keeps them on one line that slides, not a pile of rows */
  .page-head:not(:has(.actions > .pill:only-child)) .actions { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px 2px; }
  .page-head .actions::-webkit-scrollbar { display: none; }
  .page-head .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .page-head .seg button { padding: 0 10px; font-size: 13px; }
  .index-table .c-no .m-date { display: inline; }
  /* the menu takes the whole screen, like the place it is */
  dialog.sheet:has(.m-menu) { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .index-sum { font-size: 12.5px; }
  .kpis.four .kpi small { white-space: normal; }
  .set-part { padding: 10px 0; }
}

/* ---------- a heading that sorts, and the tables of the parties ---------- */
.index-table th button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.index-table th button:hover, .index-table th button[aria-sort] { color: var(--ink); }
.index-table th button[aria-sort]::after { content: ""; border: 4px solid transparent; }
.index-table th button[aria-sort="descending"]::after { border-top-color: var(--ink); transform: translateY(2px); }
.index-table th button[aria-sort="ascending"]::after { border-bottom-color: var(--ink); transform: translateY(-2px); }
.index-table td b, .index-table .c-party a { font-weight: 500; }
.index-table .c-party a:hover { text-decoration: underline; text-underline-offset: 3px; }
.index-table tr:not([data-go]) { cursor: default; }
.index-pad { padding: 4px 16px 14px; }
.kv .quiet { color: var(--faint); }
/* a note inside a form says something; it is tinted only when it warns */
.note.tone-tax, .note.tone-sales, .note.tone-stock, .note.tone-plain { background: var(--t-plain); }
@media (max-width: 699px) {
  .index-table.parties tr { grid-template-areas: "party unpaid" "extra due"; }
  .index-table.parties .c-unpaid { display: block; grid-area: unpaid; justify-self: end; }
  .index-table.parties .c-due { display: block; grid-area: due; justify-self: end; font-size: 12.5px; }
  .index-table.parties .c-due small, .index-table.parties .c-party small { display: none; }
  .index-table.parties .c-extra { display: block; grid-area: extra; font-size: 12.5px; }
  .index-table.parties .c-amt { display: none; }
  .index-table.dues tr { grid-template-areas: "no unpaid" "date due"; }
  .index-table.dues .c-no { font-size: 14px; color: var(--ink); }
  .index-table.dues .c-no a { font-weight: 500; }
  .index-table.dues .c-unpaid { display: block; grid-area: unpaid; justify-self: end; }
  .index-table.dues .c-date { display: block; grid-area: date; font-size: 12.5px; }
  .index-table.dues .c-due { display: block; grid-area: due; justify-self: end; font-size: 12.5px; }
  .index-table.dues .c-due small { display: inline; margin-left: 6px; }
  .index-table.dues .c-amt { display: none; }
  .index-table.ledger tr { grid-template-areas: "no amt" "date pay"; }
  .index-table.ledger .c-no { font-size: 14px; color: var(--ink); }
  .index-table.ledger .c-no a { font-weight: 500; }
  .index-table.ledger .c-date { display: block; grid-area: date; font-size: 12.5px; }
  /* the account month by month stays a table: four figures across read better than stacked */
  .index-table.months { display: table; font-size: 12.5px; }
  .index-table.months thead { display: table-header-group; }
  .index-table.months tbody { display: table-row-group; }
  .index-table.months tr { display: table-row; padding: 0; }
  .index-table.months th, .index-table.months td, .index-table.months td:first-child, .index-table.months td:last-child { display: table-cell; padding: 9px 6px; border-bottom: 1px solid var(--hair); }
  .index-table.months th:first-child, .index-table.months td:first-child { padding-left: 14px; }
  .index-table.months th:last-child, .index-table.months td:last-child { padding-right: 14px; }
  .index-table.months .c-extra { display: none; }
  .index-table.months .c-no { font-size: 12.5px; color: var(--ink); }
}

/* ---------- stock ---------- */
.index-tools { display: flex; flex: 1 1 320px; justify-content: flex-end; align-items: center; gap: 8px; min-width: 0; }
.index-tools select.field { width: auto; flex: none; max-width: 200px; }
.index-tools .searchbox { flex: 1 1 200px; max-width: 320px; }
.index-table .c-party .tag { margin-left: 8px; }
.index-table .c-amt .tag { margin-left: 8px; }
.index-table td.soon { color: var(--wait); font-weight: 500; }
.index-table td.came { color: var(--ok); }
.index-sum .scope { margin-left: 6px; }
@media (max-width: 699px) {
  .index-tools { flex-basis: 100%; }
  .index-tools select.field { max-width: 44vw; }
  .index-table.stock tr { grid-template-areas: "party amt" "extra unpaid"; }
  .index-table.stock .c-party small { display: none; }
  .index-table.stock td.c-extra { display: none; }
  .index-table.stock td.c-extra:nth-child(2) { display: block; grid-area: extra; font-size: 12.5px; }
  .index-table.stock .c-unpaid { display: block; grid-area: unpaid; justify-self: end; font-size: 12.5px; color: var(--muted); }
  .index-table.moves tr, .index-table.buys tr { grid-template-areas: "party amt" "date unpaid"; }
  .index-table.moves .c-date, .index-table.buys .c-date { display: block; grid-area: date; font-size: 12.5px; }
  .index-table.moves .c-party small { display: none; }
  .index-table.buys .c-unpaid { display: block; grid-area: unpaid; justify-self: end; font-size: 12.5px; color: var(--muted); }
  .index-table.houses tr { grid-template-areas: "party amt"; }
}

/* ---------- ledgers ---------- */
.drcr { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.index-table .quiet-inline { display: inline; color: var(--faint); }
.index-table tr.carried td { background: #fbfaf7; }
.index-table tfoot td { padding: 11px 12px; font-weight: 600; white-space: nowrap; border-top: 1px solid var(--line); background: #f7f6f3; }
.index-table tfoot td:first-child { padding-left: 16px; }
.index-table tfoot td:last-child { padding-right: 16px; }
@media (max-width: 699px) {
  .index-table.daybook tr { grid-template-areas: "party amt" "no pay"; }
  .index-table.ledgers tr { grid-template-areas: "party due" "extra due"; }
  .index-table.ledgers td.c-extra { display: none; }
  .index-table.ledgers td.c-extra:nth-child(2) { display: block; grid-area: extra; font-size: 12.5px; }
  .index-table.ledgers .c-amt, .index-table.ledgers .c-unpaid { display: none; }
  .index-table.ledgers .c-due { grid-area: due; align-self: center; justify-self: end; font-weight: 600; color: var(--ink); }
  .index-table.statement tr { grid-template-areas: "party pay" "no due"; }
  .index-table.statement .c-amt, .index-table.statement .c-unpaid, .index-table.statement .c-date { display: none; }
  .index-table.statement .c-pay { grid-area: pay; justify-self: end; font-weight: 600; }
  .index-table.statement .c-due { display: block; grid-area: due; justify-self: end; font-size: 12.5px; color: var(--muted); }
  .index-table.statement tfoot { display: block; }
  .index-table.statement tfoot tr { background: #f7f6f3; }
  .index-table.statement tfoot .c-due { color: var(--ink); font-weight: 600; font-size: 14px; }
}

/* ---------- GST ---------- */
.gst-span { flex-wrap: nowrap; gap: 6px; }
.gst-span select.field { width: auto; min-width: 190px; }
.gst-span .pill:disabled { opacity: 0.35; }
.gst-due { display: flex; align-items: flex-start; gap: 8px; margin: -4px 2px 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.gst-due svg { flex: none; margin-top: 2px; }
.gst-due b { font-weight: 600; color: var(--ink); }
.gst-tabs { margin-bottom: 12px; }
.index-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; }
.index-head h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.index-head p { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--muted); max-width: 70ch; }
.index-head .actions { flex: none; }
.index-top > .pill.small { flex: none; margin-left: auto; }
.gst-t .index-top { flex-wrap: nowrap; }
.gst-t .index-top .views { flex: 1 1 auto; }
.gst-t .not-phone { overflow-x: auto; }
.gst-t .index-sum { padding-top: 2px; max-width: 90ch; }
.gst-t .phone-list { padding: 0 16px 6px; margin: 0; }
.index-table.plain td, .index-table.plain th { padding-left: 10px; padding-right: 10px; }
.index-table.plain td:first-child a { font-weight: 500; }
.index-table.heads tbody tr { cursor: default; }
.index-table.plain tbody tr:not([data-go]) { cursor: default; }
@media (max-width: 699px) {
  /* these tables are too wide for a phone, which gets each as a list of rows */
  .gst-t .phone-list { display: grid; }
  .gst-t .not-phone { display: none; }
  .gst-span { flex: 1 1 100%; }
  .gst-span select.field { flex: 1; min-width: 0; }
  .index-table.heads { display: table; font-size: 12.5px; }
  .index-table.heads thead { display: table-header-group; }
  .index-table.heads tbody { display: table-row-group; }
  .index-table.heads tfoot { display: table-footer-group; }
  .index-table.heads tr { display: table-row; padding: 0; }
  .index-table.heads th, .index-table.heads td, .index-table.heads td:first-child, .index-table.heads td:last-child { display: table-cell; padding: 9px 6px; white-space: normal; border-bottom: 1px solid var(--hair); }
  .index-table.heads th:first-child, .index-table.heads td:first-child { padding-left: 14px; }
  .index-table.heads th:last-child, .index-table.heads td:last-child { padding-right: 14px; }
  .index-table.heads .c-party { font-weight: 500; }
  .kpis.four .kpi-v { font-size: 19px; }
  .index-head { flex-wrap: wrap; }
}
/* the balance a statement carries in: one tinted row, on any screen */
.index-table tr.carried { background: #fbfaf7; }
.index-table tr.carried td { background: none; }

/* ---------- the team: a face for each person ---------- */
.face { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; background: hsl(var(--h, 212) 62% 93%); color: hsl(var(--h, 212) 46% 30%); }
.face.big { width: 52px; height: 52px; border-radius: 15px; font-size: 17px; }
.who-lead { display: flex; align-items: center; gap: 14px; min-width: 0; }
.who-lead > div { min-width: 0; }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; font: 500 11.5px/1 var(--sans); color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px rgba(22, 23, 26, 0.16), 0 1px 0 rgba(22, 23, 26, 0.1); }

/* ---------- attendance: the day in one look ---------- */
.att-day { display: grid; gap: 18px 32px; padding: 18px 20px; margin-bottom: 16px; }
.att-when { display: grid; gap: 10px; align-content: start; min-width: 0; }
.att-when .st-stepper { margin: 0; max-width: 380px; }
.att-when > .linkish { justify-self: start; }
.att-notes { display: grid; gap: 6px; }
.att-note { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink); }
.att-note svg { flex: none; color: var(--muted); }
.att-note.n-gift svg, .att-note.n-award svg { color: var(--c-tax); }
.att-note.n-calendar { color: var(--muted); }
.att-now { display: grid; gap: 8px; align-content: start; min-width: 0; }
.att-hello { font-size: 12.5px; color: var(--muted); }
.att-fig { display: flex; align-items: baseline; gap: 8px; }
.att-fig b { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.att-fig span { font-size: 15px; color: var(--muted); }
.att-bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--paper); }
.att-bar i { min-width: 4px; }
.att-bar .s-present { background: var(--ok); }
.att-bar .s-half { background: var(--yellow-ink); }
.att-bar .s-absent { background: var(--bad); }
.att-bar .s-leave { background: var(--c-tax); }
.att-bar .s-holiday { background: var(--c-stock); }
.att-bar .s-off { background: rgba(22, 23, 26, 0.22); }
.att-bar .s-unmarked { background: rgba(22, 23, 26, 0.08); }
.att-line { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.att-line.ok { color: var(--ok); }
.att-key { margin-top: 0; }
@media (min-width: 900px) { .att-day { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .att-now { padding-left: 32px; border-left: 1px solid var(--hair); } }

/* ---------- attendance: one line a person ---------- */
.att .index-top { align-items: center; }
.att-tools { flex-wrap: wrap; }
.att-tools .pill:disabled { opacity: 0.45; pointer-events: none; }
.att-nudge { font-size: 13px; padding-left: 4px; }
.att-group { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--hair); background: var(--paper); font-size: 13px; }
.att-group b { font-weight: 600; }
.att-group small { font-size: 12.5px; color: var(--muted); }
.att-group .linkish { margin-left: auto; font-size: 12.5px; }
.att-row { display: grid; grid-template-columns: 34px minmax(140px, 1.3fr) auto minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; padding: 9px 16px; border-top: 1px solid var(--hair); outline: 0; }
.att-row:hover { background: rgba(22, 23, 26, 0.018); }
.att-row:focus-visible, .att-row:focus { background: rgba(22, 23, 26, 0.04); box-shadow: inset 0 0 0 1.5px var(--ink); }
.att-who { display: grid; gap: 1px; min-width: 0; }
.att-who b { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; font-weight: 500; }
.att-who b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-who small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-who:hover b span { text-decoration: underline; text-underline-offset: 2px; }
.att-occ { flex: none; display: inline-grid; color: var(--c-tax); }
.att-week { display: flex; gap: 3px; }
.att-week i { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 5px; font-style: normal; font-size: 10px; font-weight: 600; background: #fff; color: var(--faint); box-shadow: inset 0 0 0 1px var(--dash); }
.att-week i:last-child { margin-left: 3px; }
.att-week .s-present { background: var(--green-bg); color: var(--green-ink); box-shadow: none; }
.att-week .s-half { background: var(--yellow-bg); color: var(--yellow-ink); box-shadow: none; }
.att-week .s-absent { background: var(--red-bg); color: var(--red-ink); box-shadow: none; }
.att-week .s-leave { background: var(--t-tax); color: var(--c-tax); box-shadow: none; }
.att-week .s-holiday { background: var(--t-stock); color: var(--c-stock); box-shadow: none; }
.att-week .s-off { background: var(--t-plain); color: var(--c-plain); box-shadow: none; }
.att-week .s-none { background: none; box-shadow: none; color: transparent; }
.att-more { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.att-more .st-hours.field { width: 70px; height: 32px; }
.att-more .st-extra { height: 32px; min-width: 32px; padding: 0 10px; border-radius: var(--r-ctl); background: none; font-size: 12.5px; }
.att-more .st-extra:hover { background: rgba(22, 23, 26, 0.06); }
.att-more .st-extra.on { background: var(--yellow-bg); }
.att-marks { display: flex; gap: 4px; }
.att-marks button { height: 32px; min-width: 68px; padding: 0 10px; border: 0; border-radius: var(--r-ctl); cursor: pointer; font-size: 13px; color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px rgba(22, 23, 26, 0.14); }
.att-marks button:hover { background: rgba(22, 23, 26, 0.04); }
.att-marks .l { display: none; }
.att-marks button[aria-pressed="true"] { color: #fff; font-weight: 500; box-shadow: none; }
.att-marks button[aria-pressed="true"][data-mark="present"] { background: var(--ok); }
.att-marks button[aria-pressed="true"][data-mark="half"] { background: var(--yellow-ink); }
.att-marks button[aria-pressed="true"][data-mark="absent"] { background: var(--bad); }
.att-marks button[aria-pressed="true"][data-mark="leave"] { background: var(--c-tax); }
.att-marks button:disabled, .att-more button:disabled { opacity: 0.4; pointer-events: none; }
.att-hint { padding: 12px 16px; border-top: 1px solid var(--hair); font-size: 12.5px; line-height: 1.7; color: var(--muted); }
@media (max-width: 1180px) {
  .att-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .att-week { grid-column: 2; grid-row: 2; }
  .att-more { grid-column: 3; grid-row: 2; }
  .att-marks { grid-column: 3; grid-row: 1; }
}

/* ---------- people ---------- */
.index-table.people .c-party { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.index-table.people .c-party .face { grid-row: 1 / 3; }
.index-table.people .c-party a { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.index-table.people tbody tr { cursor: pointer; }
.index-table.people .quiet, .dept .quiet { color: var(--faint); }

/* ---------- departments ---------- */
.dept-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
.dept { display: grid; gap: 14px; padding: 18px; }
.dept.loose { background: none; box-shadow: inset 0 0 0 1px var(--dash); }
.dept-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dept-top h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.dept-top .sub { font-size: 12.5px; color: var(--muted); }
.dept-figs { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-ctl); background: var(--paper); }
.dept.loose .dept-figs { background: rgba(22, 23, 26, 0.04); }
.dept-figs > div { display: grid; gap: 1px; padding: 10px 12px; min-width: 0; }
.dept-figs > div + div { border-left: 1px solid var(--hair); }
.dept-figs b { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.dept-figs small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dept-people { display: grid; }
.dept-person { display: flex; align-items: center; gap: 10px; padding: 7px 0; min-width: 0; }
.dept-person + .dept-person { border-top: 1px solid var(--hair); }
.dept-person > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.dept-person b { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dept-person small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dept-person:hover b { text-decoration: underline; text-underline-offset: 2px; }
.dept-rest { padding-top: 6px; font-size: 12.5px; color: var(--muted); }
.dept > .pill { justify-self: start; }
.dept-offer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.sheet-body .dept-offer { justify-content: flex-start; margin-top: -4px; }
.dept-offer .chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--r-ctl); }
.assign-list { display: grid; max-height: min(52vh, 440px); overflow-y: auto; margin: 0 -4px; }
.assign-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; cursor: pointer; border-radius: var(--r-ctl); }
.assign-row:hover { background: rgba(22, 23, 26, 0.04); }
.assign-row input { flex: none; width: 18px; height: 18px; accent-color: var(--ink); }
.assign-row > span:last-child { display: grid; min-width: 0; }
.assign-row b { font-size: 14px; font-weight: 500; }
.assign-row small { font-size: 12.5px; color: var(--muted); }

/* ---------- payroll, by department ---------- */
.st-payroll .issues { padding: 0 16px 8px; }
.st-payroll .index-top { border-bottom: 1px solid var(--hair); }
.st-pay > summary .face { margin-right: 2px; }

/* ---------- analytics: figures that read like the rest of the app ---------- */
.wg .card.stat:not(.ink) .stat-top > .ico { display: none; }
.wg .card.stat:not(.ink) .stat-label { font-size: 12.5px; }
.wg .card.stat:not(.ink) .fig { margin: 6px 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; }
.wg .card.stat:not(.ink) { padding: 16px 20px; }
.changes .line { align-items: center; }
.changes .line > span:first-child { display: grid; gap: 1px; }
.changes .line small { font-size: 12px; color: var(--muted); }
.changes .line > span:last-child { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.changes .tag { height: 20px; padding: 0 6px; font-size: 11px; }
.index-table.reps tbody tr { cursor: pointer; }
.index-table.reps .c-party a { font-weight: 500; }
.index-table .quiet { color: var(--muted); }

/* ---------- a card that is a table, with its own title ---------- */
.index-title { display: grid; gap: 1px; min-width: 0; padding: 2px 4px; }
.index-title b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.index-title small { font-size: 12.5px; line-height: 1.45; color: var(--muted); max-width: 84ch; }
.index-foot { padding: 10px 16px 12px; border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--muted); }
.index-table .c-party a { font-weight: 500; }
.index-table td .grade { width: 24px; height: 24px; border-radius: 7px; font-size: 11.5px; }
.card.index.reorder + .card.index.reorder { margin-top: 16px; }
.kpi .switch { margin: 5px 0 3px; }
a.kpi { color: inherit; }

/* ---------- stock analysis: who sells against who sits ---------- */
.sbars { display: grid; gap: 8px; margin: 2px 0 12px; }
.sbar-row { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); }
.sbar { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; background: var(--paper); }
.sbar i { min-width: 3px; }
.sbar .g-A { background: var(--ok); }
.sbar .g-B { background: #d9a31c; }
.sbar .g-C { background: rgba(22, 23, 26, 0.4); }
.sbar .g-None { background: rgba(22, 23, 26, 0.16); }
.sbar-say { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--paper); font-size: 13px; line-height: 1.5; }

/* ---------- a report: the figures lead, the set-up sits beside them ---------- */
.rep { display: grid; gap: 16px; align-items: start; }
.rep-main { display: grid; gap: 16px; min-width: 0; }
.rep-main > .card { margin: 0; }
.rep-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 0; overflow: hidden; background: #e8e7e3; }
.rep-kpis .kpi { border: 0; background: #fff; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.rep-kpis .kpi:hover { background: #fbfaf8; }
.rep-kpis .kpi[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--ink); }
.rep-kpis .kpi[aria-pressed="true"] .kpi-l { color: var(--ink); font-weight: 500; }
.rep-side { padding: 0; }
.rep-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.rep-toggle span { display: grid; gap: 1px; min-width: 0; }
.rep-toggle b { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.rep-toggle small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-toggle svg { flex: none; color: var(--muted); }
.rep-parts { display: grid; }
.rep-part { display: grid; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--hair); }
.rep-part.across { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.rep-l { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.rep-l small { font-weight: 400; }
.rep-part select.field { width: 100%; }
.rep-part > .pill { justify-self: start; }
.rep-checks { display: grid; gap: 1px; margin: 0 -6px; }
.rep-checks button { display: flex; align-items: center; gap: 10px; padding: 6px; border: 0; border-radius: var(--r-ctl); background: none; cursor: pointer; font: inherit; font-size: 13.5px; text-align: left; color: var(--ink); }
.rep-checks button:hover { background: rgba(22, 23, 26, 0.05); }
.rep-checks i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(22, 23, 26, 0.3); }
.rep-checks [aria-checked="true"] i { background: var(--ink); box-shadow: none; }
.rep-checks [aria-checked="false"] i svg { visibility: hidden; }
.rep-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.rep-table .up { color: var(--ok); }
.rep-table .down { color: var(--bad); }
.rep-table tbody tr[data-open] { cursor: pointer; }
.rep-table th.num button { flex-direction: row-reverse; }
@media (min-width: 900px) { .rep-kpis { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .rep { grid-template-columns: minmax(0, 1fr) 300px; }
  .rep-side { position: sticky; top: 16px; }
  .rep-toggle { pointer-events: none; }
  .rep-toggle svg, .rep-toggle small { display: none; }
}
@media (max-width: 1099px) {
  .rep-side { order: -1; }
  .rep-side.shut .rep-parts { display: none; }
  .rep-side:not(.shut) .rep-toggle svg { transform: rotate(180deg); }
}

/* ---------- on the web: people, roles and the account ---------- */
.you { margin-left: 6px; padding: 1px 6px; border-radius: var(--r-tag); background: var(--amber-soft); color: var(--yellow-ink); font-size: 11px; font-weight: 600; vertical-align: 1px; }
a.set-line { color: inherit; }
a.set-line:hover .t b { text-decoration: underline; text-underline-offset: 3px; }
.avatar.quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--dash); color: var(--muted); }
.role-list { display: grid; gap: 8px; }
.role-opt, .perm { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: var(--r-ctl, 10px); box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer; }
.role-opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.role-opt input, .perm input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--ink); }
.role-opt b, .perm b { display: block; font-size: 14.5px; font-weight: 500; }
.role-opt small, .perm small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.perm { box-shadow: none; padding: 7px 0; }
.perm:has(input:disabled) { opacity: 0.55; cursor: default; }
.perm-group + .perm-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair); }
.perm-head { font-size: 12px; font-weight: 600; color: var(--muted); padding-bottom: 2px; }
.pill.danger { color: var(--bad, #b3261e); }
.rail-me .rail-av.sm { width: 22px; height: 22px; font-size: 10px; border-radius: 6px; flex: none; }
.rail-me span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.own-home { max-width: 560px; }
@media (min-width: 700px) { .role-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }