/* app.css — the dashboard's only stylesheet.
   Admin pages are dark by default, fintech style: near-black surfaces, big
   numbers, rounded cards, and one yellow accent for tiles too; the sidebar
   toggle switches them to light (html[data-theme="light"]). Chart colours are classes here, so each
   mode keeps its own validated steps (dataviz reference palette: the dark
   column on #18181c, the light column on #ffffff). */

:root {
  color-scheme: dark;
  --bg: #0c0c0e;
  --sidebar: #111114;
  --card: #18181c;
  --card-2: #202026;
  --line: #2a2a31;
  --fg: #f4f4f5;
  --fg-2: #c9c9cf;
  --muted: #8b8b94;
  --accent: #d4ff3a;
  --accent-ink: #0c0c0e;
  --on-pastel: #121214;
  /* tile / card / avatar slots: all the one yellow accent */
  --lavender: #d4ff3a;
  --mint: #d4ff3a;
  --cream: #d4ff3a;
  --sky: #d4ff3a;
  --butter: #d4ff3a;
  --ok: #4ed17f;
  --ok-bg: rgba(78, 209, 127, .14);
  --info: #7fb2ff;
  --info-bg: rgba(127, 178, 255, .14);
  --warn: #f5c451;
  --warn-bg: rgba(245, 196, 81, .14);
  --bad: #ff7a7a;
  --bad-bg: rgba(255, 122, 122, .14);
  --plain-bg: rgba(255, 255, 255, .07);
  --row-hover: rgba(255, 255, 255, .025);
  --accent-text: #d4ff3a; /* lime as text: only on dark */
  --radius: 18px;
  /* charts */
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --chart-grid: #2a2a31;
  --chart-axis: #3a3a42;
  --chart-dim: #3a3a44;
  --chart-accent: #d4ff3a;
  --chart-context: #6b6b74; /* 3.4:1 on the card */
}

/* Light admin theme: same layout, white cards on soft grey. Lime stays for
   fills with dark ink; as text or a lone bar it would vanish on white, so
   those take olive / ink. Chart slots switch to the light column of the
   reference palette (validated on #ffffff). */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f1f2f4;
  --sidebar: #ffffff;
  --card: #ffffff;
  --card-2: #f4f5f7;
  --line: #e3e5e9;
  --fg: #111114;
  --fg-2: #3c3c43;
  --muted: #6b6b74;
  --accent-text: #4f6b00;
  --ok: #1a7f37;
  --ok-bg: #dafbe1;
  --info: #0550ae;
  --info-bg: #ddf4ff;
  --warn: #7d4e00;
  --warn-bg: #fff4c2;
  --bad: #b3261e;
  --bad-bg: #ffebe9;
  --plain-bg: rgba(17, 17, 20, .06);
  --row-hover: rgba(17, 17, 20, .025);
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --chart-grid: #e8e9ee;
  --chart-axis: #c9ccd3;
  --chart-dim: #d5d8de;
  --chart-accent: #111114;
  --chart-context: #8b8b94; /* 3.4:1 on the card */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  color: var(--fg);
  background: var(--bg);
}

a { color: var(--fg); text-decoration: none; }
a:hover { color: var(--accent-text); }

h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 1rem; }
h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .75rem; }

/* ── App shell: sidebar + content ─────────────────────────────────────── */
body.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 1.5rem;
  padding: 1.4rem 1rem; background: var(--sidebar); border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.15rem; color: var(--fg); padding: 0 .5rem; }
.brand:hover { color: var(--fg); }
.brand-mark { color: var(--accent); }
:root[data-theme="light"] .brand-mark { color: var(--fg); }
.side-nav { display: flex; flex-direction: column; gap: .2rem; }
.side-nav a {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .75rem; border-radius: 12px; color: var(--muted); font-weight: 500;
}
.side-nav a:hover { color: var(--fg); background: var(--plain-bg); }
.side-nav a[aria-current="page"] { color: var(--accent-ink); background: var(--accent); }
.side-nav .icon { flex: none; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: .6rem; }
.side-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.side-note { font-size: .78rem; color: var(--warn); background: var(--warn-bg); border-radius: 12px; padding: .55rem .7rem; margin: 0; }
.icon { width: 18px; height: 18px; }

main { min-width: 0; max-width: 1360px; width: 100%; margin: 0 auto; padding: 1.6rem 1.8rem 3rem; }

/* ── Layout helpers ───────────────────────────────────────────────────── */
.split { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.grow { flex: 1 1 560px; min-width: 0; }
.side { flex: 0 1 340px; }
.split > .side { display: flex; flex-direction: column; gap: 1rem; }
.split > .side.card { display: block; }
.grow > .card + .card { margin-top: 1rem; }
.narrow { max-width: 480px; }
.head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.head h1 { margin: 0; }
.crumbs { margin: 0 0 .35rem; color: var(--muted); font-size: .85rem; }
.crumbs a { color: var(--muted); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; overflow-x: auto; }
main > .card + .card { margin-top: 1rem; }

/* ── Tables ───────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: .8rem; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--row-hover); }
td a { font-weight: 500; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }
.muted { color: var(--muted); }
.sub { color: var(--muted); font-size: .82rem; }
.inactive td { color: var(--muted); }
.empty { color: var(--muted); margin: .5rem 0; }

/* ── Pills & tabs ─────────────────────────────────────────────────────── */
.pill { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; background: var(--plain-bg); color: var(--fg-2); }
.pill-plain { background: var(--plain-bg); color: var(--fg-2); }
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-info { background: var(--info-bg); color: var(--info); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-bad { background: var(--bad-bg); color: var(--bad); }
.pill-muted { background: var(--plain-bg); color: var(--muted); }
.pill-orange { background: rgba(255, 109, 1, .16); color: #ff6d01; }
/* A message opened in WhatsApp: the WhatsApp mark instead of a pill. */
.wa-mark { display: inline-flex; flex: none; width: 22px; height: 22px; color: #075e54; }
.wa-mark svg { width: 100%; height: 100%; }
.dry-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #ff6d01; color: #fff; }
.dry-mark svg { width: 16px; height: 16px; }
.badge { display: inline-block; min-width: 1.35em; padding: 0 .4em; border-radius: 999px; background: var(--bad); color: #fff; font-size: .72rem; font-weight: 700; text-align: center; margin-left: auto; }
.side-nav a[aria-current="page"] .badge { background: var(--accent-ink); color: var(--accent); }

.tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs a { padding: .35rem .85rem; border-radius: 999px; color: var(--muted); background: var(--card); border: 1px solid var(--line); font-size: .88rem; }
.tabs a[aria-current="page"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.count { font-size: .78rem; opacity: .7; }

/* ── Facts, timeline, pay link ────────────────────────────────────────── */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.paylink { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.paylink-label { color: var(--muted); }
.paylink code { user-select: all; word-break: break-all; font-size: .85rem; color: var(--fg-2); }
.timeline { margin: 0; padding-left: 1.2rem; }
.timeline li { margin: .35rem 0; }
.msg-body { white-space: pre-line; max-width: 36rem; font-size: .9rem; color: var(--fg-2); }

/* ── Forms & buttons ──────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: .75rem; }
.form.inline { flex-direction: row; align-items: center; flex-wrap: wrap; }
.form label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--muted); }
.form label.check { flex-direction: row; align-items: center; gap: .45rem; color: var(--fg); }
input, select, textarea {
  font: inherit; color: var(--fg); padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); width: 100%;
}
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); }
.form.inline input { width: auto; flex: 1 1 10rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-text); outline-offset: -1px; border-color: transparent; }
fieldset { border: 1px solid var(--line); border-radius: 14px; padding: .7rem .9rem .9rem; display: flex; flex-direction: column; gap: .55rem; }
legend { color: var(--muted); font-size: .85rem; padding: 0 .3rem; }
.hint { color: var(--muted); font-size: .85rem; margin: 0 0 .5rem; }
.notice { background: var(--warn-bg); color: var(--warn); padding: .6rem .8rem; border-radius: 12px; font-size: .88rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-weight: 600; padding: .5rem 1.05rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--fg); cursor: pointer;
}
.btn:hover { border-color: var(--fg-2); color: var(--fg); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.06); color: var(--accent-ink); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { border-color: var(--bad); color: var(--bad); }
.btn.small { padding: .25rem .75rem; font-size: .82rem; }
.btn.link { border: 0; background: none; color: var(--fg-2); padding: .2rem 0; font-weight: 500; }
.btn.link:hover { color: var(--accent-text); }

.flash { padding: .7rem .95rem; border-radius: 14px; margin: 0 0 1rem; }
.flash-ok { background: var(--ok-bg); color: var(--ok); }
.flash-err { background: var(--bad-bg); color: var(--bad); }

.login { max-width: 380px; margin: 14vh auto 0; padding: 1.8rem; }
.login .brand { padding: 0; margin-bottom: 1.2rem; }
/* The login page: the red Batman (static/login-bg.jpg) behind it, the card
   invisible (no panel, just the form) at the right on a wide screen,
   centred on a phone. */
body:has(main.look-bento section.login) { min-height: 100vh; background: #1a0000 url("/static/login-bg.jpg") center / cover no-repeat fixed; }
body:has(main.look-bento section.login) .login { margin: 18vh 6vw 0 auto; background: none; border: 0; box-shadow: none; }
@media (max-width: 900px) { body:has(main.look-bento section.login) .login { margin: 14vh auto 0; } }
/* Rain falling over the picture (static/rain.svg, two layers at two speeds
   so it never looks like a grid), under the form; still for reduced motion. */
body:has(main.look-bento section.login)::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("/static/rain.svg"), url("/static/rain.svg");
  background-size: 320px 320px, 520px 520px; background-position: 0 0, 140px 60px;
  opacity: .55; animation: login-rain .55s linear infinite;
}
@keyframes login-rain { to { background-position: -38px 320px, 102px 580px; } }
@media (prefers-reduced-motion: reduce) { body:has(main.look-bento section.login)::before { animation: none; } }
body:has(main.look-bento section.login) main { position: relative; z-index: 1; }
/* Its form (not a card: it never lifts or rises in): two glass boxes (see-through, slightly blurred), the password's followed by the bat-winged tick
   that logs in — red and black like the picture, no yellow, no labels. */
.login-form { display: flex; flex-direction: column; gap: .8rem; }
.login-row { display: flex; align-items: center; gap: .7rem; }
.login-row input { flex: 1; min-width: 0; }
body:has(main.look-bento section.login) .login input { background: rgba(255, 255, 255, .07); border: 0; color: rgba(12, 11, 10, .85); caret-color: #0c0b0a; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body:has(main.look-bento section.login) .login input:-webkit-autofill { -webkit-text-fill-color: rgba(12, 11, 10, .85); caret-color: #0c0b0a; transition: background-color 600000s 0s; } /* keep Chrome's autofill fill off */
body:has(main.look-bento section.login) .login input::placeholder { color: rgba(12, 11, 10, .5); }
body:has(main.look-bento section.login) .login input:focus { outline: none; background: rgba(255, 255, 255, .13); }
.login-go { flex: none; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .07); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color 150ms ease, transform 120ms ease; }
.login-go svg { width: 40px; height: 27px; fill: #0c0b0a; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.login-go:hover { background: rgba(255, 255, 255, .15); }
.login-go:active { transform: scale(.94); }
.login-go:focus-visible { outline: 2px solid rgba(12, 11, 10, .8); outline-offset: 2px; }

/* ── Home: the overview ───────────────────────────────────────────────── */
.hello { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.hello h1 { font-size: 1.9rem; margin: 0; }
.hello .sub { margin: 0; }
.hello-actions { margin-left: auto; display: flex; gap: .5rem; }
.ov-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.card-head h2 { margin: 0; }
.card-head a { font-size: .82rem; color: var(--muted); }

/* The hero card is black in both themes, so its ink is fixed too. */
.hero { background: #050506; color: #f4f4f5; border-color: #050506; display: flex; flex-direction: column; gap: .35rem; min-height: 230px; }
.hero-label { color: #9a9aa3; font-size: .88rem; }
.hero-value { font-size: 2.9rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.hero-sub { color: #c9c9cf; font-size: .88rem; }
.hero .meter-text { color: #9a9aa3; }
.meter { margin-top: auto; display: flex; flex-direction: column; gap: .45rem; }
.meter-track { height: 10px; border-radius: 999px; background: rgba(212, 255, 58, .16); overflow: hidden; }
.meter-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
/* meter fill widths, 5% steps */
.meter-0{width:0%} .meter-5{width:5%} .meter-10{width:10%} .meter-15{width:15%} .meter-20{width:20%} .meter-25{width:25%} .meter-30{width:30%}
.meter-35{width:35%} .meter-40{width:40%} .meter-45{width:45%} .meter-50{width:50%} .meter-55{width:55%} .meter-60{width:60%} .meter-65{width:65%}
.meter-70{width:70%} .meter-75{width:75%} .meter-80{width:80%} .meter-85{width:85%} .meter-90{width:90%} .meter-95{width:95%} .meter-100{width:100%}
.meter-text { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tile { border-radius: var(--radius); padding: 1.1rem 1.15rem; color: var(--on-pastel); display: flex; flex-direction: column; gap: .2rem; min-height: 230px; }
a.tile:hover { color: var(--on-pastel); filter: brightness(1.03); }
.tile-lavender { background: var(--lavender); }
.tile-mint { background: var(--mint); }
.tile-cream { background: var(--cream); }
.tile-sky { background: var(--sky); }
.tile-butter { background: var(--butter); }
.tile-icon { width: 38px; height: 38px; border-radius: 12px; background: rgba(18, 18, 20, .08); display: grid; place-items: center; margin-bottom: auto; }
.tile-label { font-size: .88rem; font-weight: 600; opacity: .75; }
.tile-value { font-size: 1.9rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.tile-sub { font-size: .8rem; opacity: .7; }
.up-good { color: #0a6b2d; font-weight: 700; }
.up-bad { color: #a4231c; font-weight: 700; }

.big { font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.15; }

.upcoming { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.bill-card { border-radius: 16px; padding: .9rem; color: var(--on-pastel); display: flex; flex-direction: column; gap: .15rem; min-height: 150px; }
a.bill-card:hover { color: var(--on-pastel); filter: brightness(1.03); }
.bill-card .who { font-size: .85rem; font-weight: 600; margin-top: auto; }
.bill-card .amt { font-size: 1.3rem; font-weight: 700; }
.bill-card .when { font-size: .75rem; opacity: .7; }

.avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; color: var(--on-pastel); }
.t1 { background: var(--lavender); } .t2 { background: var(--mint); } .t3 { background: var(--cream); }
.t4 { background: var(--sky); } .t5 { background: var(--butter); }

.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.cat { display: flex; align-items: center; gap: .7rem; }
.cat-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--card-2); border: 1px solid var(--line); display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: var(--fg-2); }
.cat-value { display: block; font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.cat-name { display: block; font-size: .78rem; color: var(--muted); }

.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.feed li { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.feed li:last-child { border-bottom: 0; }
.feed .what { min-width: 0; flex: 1; }
.feed .what a, .feed .what strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed .amount { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.feed .plus { color: var(--ok); }

/* ── Charts ───────────────────────────────────────────────────────────── */
.chart-svg { width: 100%; height: auto; display: block; }
.chart-svg text { font-family: inherit; }
.c-grid { stroke: var(--chart-grid); stroke-width: 1; }
.c-axis { stroke: var(--chart-axis); stroke-width: 1; }
.c-tick { fill: var(--muted); font-size: 10px; }
.c-label { fill: var(--fg-2); font-size: 10px; font-weight: 600; }
.s1 { fill: var(--series-1); } .s2 { fill: var(--series-2); } .s3 { fill: var(--series-3); }
.s4 { fill: var(--series-4); } .s5 { fill: var(--series-5); } .s6 { fill: var(--series-6); }
.s-dim { fill: var(--chart-dim); }
.s-accent { fill: var(--chart-accent); }
.s-context { fill: var(--chart-context); }
.chart-svg .line, .key .line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.line.s1 { stroke: var(--series-1); } .line.s2 { stroke: var(--series-2); } .line.s3 { stroke: var(--series-3); }
.line.s4 { stroke: var(--series-4); } .line.s5 { stroke: var(--series-5); } .line.s6 { stroke: var(--series-6); }
.line.s-accent { stroke: var(--chart-accent); } .line.s-context { stroke: var(--chart-context); }
.chart-svg .dot { stroke: var(--card); stroke-width: 2; pointer-events: none; }
/* Bubble chart: the average lines (hairline, a step stronger than the grid)
   and the 5-step orange ramp for "share still owed" — dark (all paid) to
   bright (most owed) on the dark card, light to dark on the light one; both
   validated with the dataviz ordinal check. */
.c-ref { stroke: var(--chart-axis); stroke-width: 1; }
.q1 { fill: #8a3d10; } .q2 { fill: #b04f14; } .q3 { fill: #d9621a; } .q4 { fill: #f2803a; } .q5 { fill: #ffa564; }
:root[data-theme="light"] .q1 { fill: #f08a3e; } :root[data-theme="light"] .q2 { fill: #d9681c; }
:root[data-theme="light"] .q3 { fill: #b5520f; } :root[data-theme="light"] .q4 { fill: #8e3f0b; } :root[data-theme="light"] .q5 { fill: #652c07; }
.chart-svg .hit { fill: transparent; cursor: pointer; }
.chart-svg .mark { cursor: pointer; }
/* A clicked point's or bar's value (app.js). */
.chart-tip {
  position: absolute; z-index: 60; pointer-events: none;
  padding: .35rem .6rem; border-radius: 8px;
  background: #0c0c0e; color: #fff; font-size: .8rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
.chart-svg .gap { stroke: var(--card); stroke-width: 2; }
.mark:hover, .hit:hover + .dot { opacity: .8; }
.chart-empty { text-align: center; padding: 2.5rem 0; }

.legend { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: 0 0 .4rem; padding: 0; font-size: .78rem; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: .35rem; }
.legend .key { flex: none; }
/* A donut alone, centred: each slice's name, share and amount show on hover. */
.donut-wrap { display: flex; justify-content: center; }
.donut-wrap .chart-svg { width: min(100%, 190px); }


/* ── Reports: the analytics grid ──────────────────────────────────────── */
.dash-grid { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.dash-left { grid-column: span 10; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.dash-left .chart-card { flex: 1; }
.dash-table { grid-column: span 7; min-width: 0; }
.dash-table td, .dash-table th { padding: .45rem .5rem; }
.chart-card { grid-column: span 6; margin: 0; min-width: 0; padding: .95rem 1rem; }
.chart-card.wide { grid-column: span 24; }
.chart-card.half { grid-column: span 12; }
.section-head { margin: 2rem 0 1rem; }
.section-head h2 { font-size: 1.3rem; margin: 0; }
.section-head .sub { margin: .2rem 0 0; }
.chart-card figcaption { display: flex; flex-direction: column; margin-bottom: .45rem; }
.chart-card figcaption .sub { font-size: .75rem; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.kpi { display: flex; flex-direction: column; gap: .1rem; padding: .8rem .95rem; }
.kpi-label { font-size: .82rem; color: var(--muted); }
.kpi-value { font-size: 1.55rem; font-weight: 700; line-height: 1.2; }
.kpi-sub { font-size: .75rem; color: var(--muted); }
.delta { font-weight: 600; white-space: nowrap; }
.kpi-value .delta { font-size: .9rem; vertical-align: middle; }
.delta-good { color: var(--ok); }
.delta-bad { color: var(--bad); }

.center { text-align: center; }

/* ── Small screens ────────────────────────────────────────────────────── */
.show-sm, .narrow-only { display: none; }

@media (max-width: 1180px) {
  .span-4, .span-5, .span-7, .span-8 { grid-column: span 12; }
  .dash-left, .dash-table { grid-column: span 24; }
  .chart-card { grid-column: span 12; }
}

/* Phones & small tablets: a compact top bar, one swipeable row of menu
   pills, slim tiles, fewer table columns. */
@media (max-width: 860px) {
  body.app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidebar {
    position: sticky; top: 0; z-index: 10; height: auto;
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand foot" "pills pills" "wa wa" "nav nav"; align-items: center;
    gap: .55rem .5rem; padding: .65rem .8rem .55rem;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .brand { grid-area: brand; padding: 0; font-size: 1.05rem; }
  .side-foot { grid-area: foot; margin: 0; flex-direction: row; align-items: center; gap: .4rem; }
  .bp-pills { grid-area: pills; flex-direction: row; flex-wrap: wrap; margin: 0; }
  .side-wa { grid-area: wa; margin: 0; }
  .side-note { padding: .2rem .55rem; font-size: .72rem; border-radius: 999px; white-space: nowrap; }
  .side-buttons { flex-wrap: nowrap; gap: .35rem; }
  .side-buttons .btn { padding: .35rem .5rem; }
  .side-nav {
    grid-area: nav; flex-direction: row; flex-wrap: nowrap; gap: .3rem;
    overflow-x: auto; scrollbar-width: none; margin: 0 -.8rem; padding: 0 .8rem;
  }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav a { flex: none; padding: .4rem .7rem; border-radius: 999px; background: var(--plain-bg); font-size: .88rem; }
  .side-nav .badge { margin-left: .2rem; }
  .hide-sm { display: none; }
  .show-sm { display: block; }
  main { padding: 1rem .9rem 2.5rem; }
  h1 { font-size: 1.35rem; }
  .card { padding: .95rem 1rem; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -.9rem; margin-right: -.9rem; padding: 0 .9rem; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex: none; }
  .side { flex: 1 1 100%; }
  th, td { padding: .55rem .45rem; }
  td.nowrap { white-space: normal; }
  .peek { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: anywhere; margin-top: .2rem; }
  td.mono .sub { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; font-size: .78rem; }

  .hello { margin-bottom: 1rem; }
  .hello h1 { font-size: 1.5rem; }
  .hero { min-height: 0; }
  .hero-value { font-size: 2.3rem; }
  .meter { margin-top: 1rem; }
  .tiles, .upcoming, .kpis { grid-template-columns: 1fr; gap: .7rem; }
  .tile { min-height: 0; display: grid; grid-template-columns: auto 1fr; column-gap: .85rem; align-items: center; padding: .85rem 1rem; }
  .tile-icon { grid-row: span 3; margin: 0; }
  .tile-value { font-size: 1.5rem; }
  .bill-card { min-height: 0; display: grid; grid-template-columns: auto 1fr auto; column-gap: .75rem; align-items: center; }
  .bill-card .avatar { grid-row: span 2; }
  .bill-card .who { margin: 0; }
  .bill-card .amt { grid-row: span 2; grid-column: 3; }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feed .sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chart-card, .chart-card.half { grid-column: span 24; }
  .fy-right { grid-column: span 24; }
  .facts { grid-template-columns: max-content 1fr; gap: .35rem .9rem; }
}

/* Charts with a phone-sized twin show it below 600px. */
@media (max-width: 600px) {
  .narrow-only { display: block; }
  .wide-only { display: none; }
}

/* ── The icon rail: the menu shows each entry as its icon; the names stay
   for screen readers and show on hover, the badges sit on the icons. Wide
   screens only: phones have the top bar. */
.side-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.side-top .brand { min-width: 0; gap: .45rem; font-size: 1.02rem; white-space: nowrap; }
.side-top .brand .icon { flex: none; }

/* ── bp pills: is bp running on Admin's / Operator's machine (its heartbeat
   on the sheet). Green running, amber stopping, grey off / not seen; Stop
   while it runs. Folded: just the dots. */
.bp-pills { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: .9rem 0 .2rem; }
.bp-pill { display: flex; }
.bp-pill form { margin: 0; }
/* The machine's mark is the switch: green while bp runs (click to stop),
   grey when it's off or stopping. */
.bp-mark { display: inline-flex; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: var(--muted); opacity: .55; }
.bp-mark svg { width: 100%; height: 100%; }
.bp-running .bp-mark { color: var(--ok); opacity: 1; cursor: pointer; }
.bp-running .bp-mark:hover { filter: brightness(1.15); }
/* Open WhatsApp: the saved number's chat, in the sends' reused tab. */
.side-wa { display: flex; align-items: center; gap: .55rem; margin: .4rem 0 .2rem; padding: .35rem .5rem; border-radius: 12px; color: #25d366; font-size: .82rem; font-weight: 600; text-decoration: none; }
.side-wa svg { flex: none; width: 22px; height: 22px; }
.side-wa:hover { background: var(--card-2); }
.side-wa .side-label { color: var(--fg-2); }
@media (min-width: 861px) {
  .side-mini .bp-pills { margin-top: .7rem; }
  .side-mini .side-wa { justify-content: center; padding: .35rem; }
}
@media (min-width: 861px) {
  body.app.side-mini { grid-template-columns: 76px minmax(0, 1fr); }
  .side-mini .sidebar { padding: 1.4rem .6rem; }
  .side-mini .side-top { flex-direction: column; gap: .9rem; }
  .side-mini .brand { padding: 0; }
  .side-mini .side-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .side-mini .side-nav a { position: relative; justify-content: center; padding: .65rem; }
  .side-mini .side-nav .badge { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; margin: 0; padding: 0 4px; font-size: .6rem; line-height: 16px; }
  .side-mini .hide-sm { display: none; }
  .side-mini .side-note { padding: .35rem .25rem; text-align: center; font-size: .66rem; }
  .side-mini .side-buttons { flex-direction: column; align-items: center; }
  .side-mini .side-buttons .btn { padding: .45rem .55rem; }
}
@media (max-width: 860px) {
  .side-top { grid-area: brand; }
}

/* ── Motion ───────────────────────────────────────────────────────────────
   The phone app's feel on the web: pages fade and slide in (the sidebar
   stays put), taps ripple, charts grow in as they scroll into view, and a
   thin bar shows a page is loading. app.js adds html.motion, the ripples and
   the in-view marks; without it every page still reads as before. None of
   it runs for anyone who asked their system for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .sidebar { view-transition-name: sidebar; }
  /* The old page goes at once and the new one slides in — no cross-fade,
     so cards are never see-through. */
  ::view-transition-old(root) { display: none; }
  ::view-transition-new(root) { animation: vt-in 260ms cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes vt-in { from { transform: translateX(28px); } }

  /* Taps: a ripple from the finger, and a small press. */
  .btn, .tile, .bill-card, .side-nav a, .tabs a { position: relative; overflow: hidden; }
  .ripple {
    position: absolute; border-radius: 50%; background: currentColor; opacity: .22;
    transform: scale(0); pointer-events: none; animation: ripple 520ms cubic-bezier(.2, .8, .2, 1) forwards;
  }
  @keyframes ripple { to { transform: scale(1); opacity: 0; } }
  .btn, .tabs a { transition: transform 120ms ease, border-color 150ms ease, background-color 150ms ease; }
  .btn:active, .tabs a:active { transform: scale(.97); }
  a.tile, a.bill-card { transition: transform 180ms ease, filter 180ms ease; }
  a.tile:hover, a.bill-card:hover { transform: translateY(-2px); }
  a.tile:active, a.bill-card:active { transform: scale(.985); }

  /* Loading: a thin accent bar at the top until the next page shows. */
  html.navigating body::before {
    content: ""; position: fixed; z-index: 100; inset: 0 0 auto 0; height: 3px; background: var(--accent);
    transform-origin: 0 50%; animation: loading 6s cubic-bezier(.1, .7, .2, 1) forwards;
  }
  @keyframes loading { from { transform: scaleX(0); } to { transform: scaleX(.92); } }

  .flash { animation: drop-in 320ms cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes drop-in { from { opacity: 0; transform: translateY(-8px); } }

  /* The meter fills from the left. */
  .motion .meter-fill { transform-origin: 0 50%; animation: grow-x 900ms cubic-bezier(.2, .8, .2, 1) 120ms both; }

  /* Charts: hidden until in view, then columns grow up, bars grow right,
     lines draw themselves, dots pop in and donut slices open. */
  .motion .chart-svg .mark, .motion .chart-svg .dot { transform-box: fill-box; }
  .motion .chart-column .mark { transform-origin: 50% 100%; }
  .motion .chart-bar .mark { transform-origin: 0 50%; }
  .motion .chart-donut .mark, .motion .chart-svg .dot { transform-origin: 50% 50%; }
  .motion .chart-svg .line { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .motion .chart-svg:not(.seen) .mark, .motion .chart-svg:not(.seen) .dot { opacity: 0; }
  .motion .chart-svg.seen .mark { animation: fade 500ms ease both; animation-delay: calc(var(--i, 0) * 28ms); }
  .motion .chart-column.seen .mark { animation-name: grow-y; animation-duration: 650ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  .motion .chart-bar.seen .mark { animation-name: grow-x; animation-duration: 650ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  .motion .chart-donut.seen .mark { animation-name: open; animation-duration: 600ms; }
  .motion .chart-svg.seen .line { animation: draw 900ms cubic-bezier(.4, 0, .2, 1) forwards; }
  .motion .chart-svg.seen .dot { animation: pop 280ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(500ms + var(--i, 0) * 28ms); }
  @keyframes grow-y { from { transform: scaleY(0); } }
  @keyframes grow-x { from { transform: scaleX(0); } }
  @keyframes open { from { opacity: 0; transform: scale(.82) rotate(-12deg); } }
  @keyframes fade { from { opacity: 0; } }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes pop { from { opacity: 0; transform: scale(0); } }

  /* Cards rise in one after another (app.js numbers them, --ci); only the
     start is held (backwards), so hover lifts stay free afterwards. */
  .motion main .card:not([popover]) { animation: card-in 480ms cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--ci, 0) * 40ms); }
  @keyframes card-in { from { transform: translateY(14px) scale(.985); } } /* slides, never see-through */

  /* With a mouse (not on a phone or tablet, where a tap would leave a
     "hover" stuck): a card glides up a few pixels as its shadow deepens,
     on a long ease-out that settles instead of snapping, and eases back
     the same way; round icons grow and the big arrows step forward. */
  @media (hover: hover) and (pointer: fine) {
    .motion main .card:not([popover]) {
      transition: transform 420ms cubic-bezier(.22, 1, .36, 1), box-shadow 420ms cubic-bezier(.22, 1, .36, 1);
    }
    .motion main .card:not([popover]):hover { transform: translateY(-4px); box-shadow: 0 16px 32px -10px rgba(0, 0, 0, .5); }
    .motion main a.card:active, .motion main button.card:active { transform: translateY(-1px) scale(.99); transition-duration: 120ms; }
    .motion .card .round-btn { transition: transform 420ms cubic-bezier(.22, 1, .36, 1); }
    .motion .card:hover .round-btn { transform: scale(1.08); }
    .motion .btn-do .icon { transition: transform 420ms cubic-bezier(.22, 1, .36, 1); }
    .motion .btn-do:hover .icon, .motion .card:hover > .btn-do .icon { transform: translateX(6px); }
  }

  /* Big figures and names slide up into place, just after their card. */
  .motion .change-big, .motion .lc-big, .motion .fx-balance, .motion .req-name, .motion .req-payer-name {
    animation: num-in 560ms cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--ci, 0) * 40ms + 140ms);
  }
  @keyframes num-in { from { transform: translateY(8px); } }

  /* bp's verdicts pop in, one by one. */
  .motion .st { animation: pop 300ms cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--si, 0) * 60ms + 260ms); }

  /* Pop-ups scale in as they open. */
  .motion .fx-pop:popover-open { animation: pop-in 220ms cubic-bezier(.2, .8, .2, 1); }
  @keyframes pop-in { from { opacity: 0; transform: scale(.96); } }
}

/* ── Bento (the whole admin) ─────────────────────────────────────────────
   After the operator's references (Zextras/dashboard/design/dash): a charcoal page, rounded
   near-black cards, vivid colour blocks (mustard, green, slate, red-orange),
   big green / coral numbers, round icon buttons, lists fading down the
   card, serif page titles in mustard. The two dashboards stack their cards
   on black backings like phone screens. <main class="look-bento"> on every
   admin page carries a full token set (so a saved light-theme cookie can't
   leak light colours in) and the theme toggle is hidden while it's on.
   Contrast checked with the dataviz validator: ink on the colour blocks
   >= 5.9:1, the green / coral / mustard text on the cards >= 7:1. */
body:has(main.look-bento) {
  background: #eef0f3;
  /* Look 2 (the operator's second reference, 2026-10-28): the colour blocks
     keep their names but take its cornflower blue, fresh green and ink. */
  --b-mustard: #4a7cf6;
  --b-green: #5bd33c;
  --b-slate: #e4e5e8;
  --b-red: #f25c54;
  --b-up: #23941a;
  --b-down: #d93a31;
  --b-ink: #0d0d0f;
  --b-coral: #ff8a7a;
  --b-purple: #a9c2ff;
  --b-purple-text: #3563d8;
}
main.look-bento {
  color-scheme: light;
  color: var(--fg);
  --bg: #eef0f3;
  --sidebar: #ffffff;
  --card: #ffffff;
  --card-2: #f4f5f7;
  --line: #e7e8eb;
  --fg: #111114;
  --fg-2: #3c3c43;
  --muted: #7d8088;
  --accent: var(--b-mustard);
  --accent-ink: #ffffff;
  --accent-text: #3563d8;
  --on-pastel: var(--b-ink);
  --ok: var(--b-up);
  --ok-bg: #e3f7dc;
  --info: #3563d8;
  --info-bg: #e5edff;
  --warn: #8a5a00;
  --warn-bg: #fff3cd;
  --bad: var(--b-down);
  --bad-bg: #ffe7e5;
  --plain-bg: rgba(17, 17, 20, .06);
  --row-hover: rgba(17, 17, 20, .03);
  --series-1: #4a7cf6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #0d0d0f;
  --chart-grid: #e8e9ee;
  --chart-axis: #c9ccd3;
  --chart-dim: #d5d8de;
  --chart-accent: #4a7cf6;
  --chart-context: #8b8b94;
  --radius: 24px;
}
body:has(main.look-bento) form[action="/theme"] { display: none; }

/* Every page: serif titles in mustard, rounded cards, black-pill buttons
   with mustard text, mustard filter tabs, soft inputs. */
.look-bento h1 {
  font-family: "Didot", "Bodoni 72", "Iowan Old Style", Georgia, serif; font-weight: 400;
  font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -.01em; color: var(--accent);
}
.look-bento .card { border: 0; border-radius: 26px; }
.look-bento .card h2 { font-weight: 500; }
.look-bento .btn { background: var(--b-ink); border-color: var(--b-ink); color: var(--accent); }
.look-bento .btn:hover { border-color: var(--b-ink); color: var(--accent); filter: brightness(1.35); }
.look-bento .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--b-ink); }
.look-bento .btn.primary:hover { color: var(--b-ink); filter: brightness(1.06); }
.look-bento .btn.danger { color: var(--b-down); }
.look-bento .btn.link { background: none; border: 0; color: var(--fg-2); }
.look-bento .tabs a { background: var(--card); border-color: transparent; color: var(--fg-2); }
.look-bento .tabs a:hover { color: var(--accent); }
.look-bento .tabs a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--b-ink); }
.look-bento input, .look-bento select, .look-bento textarea { background: var(--card-2); border-color: var(--line); }
.look-bento .kpi-value, .look-bento .big { letter-spacing: -.03em; }
.look-bento .paylink code { color: var(--fg-2); }

/* Flash messages float as a toast over the top of the page instead of
   pushing the cards down: opaque (the tint over the card colour), centred
   with translate so drop-in's transform still animates. app.js fades a
   success out after a few seconds; a tap closes either. */
.look-bento > .flash {
  position: fixed; z-index: 90; top: 18px; left: 50%; translate: -50% 0;
  width: max-content; max-width: min(560px, calc(100vw - 32px)); margin: 0;
  border-radius: 20px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); cursor: pointer;
  transition: opacity 300ms ease;
}
.look-bento > .flash-ok { background: linear-gradient(var(--ok-bg), var(--ok-bg)), var(--card); }
.look-bento > .flash-err { background: linear-gradient(var(--bad-bg), var(--bad-bg)), var(--card); }
.look-bento > .flash + .flash { top: 76px; }
.look-bento > .flash.flash-out { opacity: 0; }

/* The serif page word. */
.look-bento .title-word {
  margin: 0; font-family: "Didot", "Bodoni 72", "Iowan Old Style", Georgia, serif; font-weight: 400;
  font-size: clamp(2.8rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -.01em; color: var(--accent);
}
/* Two cards side by side. */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.look-bento .card { border: 0; border-radius: 26px; padding: 1.2rem 1.35rem; }
.look-bento .card-head { margin-bottom: .8rem; gap: .6rem; }
.look-bento .card-head h2 { font-size: 1.05rem; font-weight: 500; }
.look-bento .empty { color: var(--muted); }

/* Round icon buttons: black on the colour blocks, dark gray on the cards. */
.round-btn {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--b-ink); color: #fff; font-weight: 700; font-size: .95rem;
}
.round-btn .icon { width: 18px; height: 18px; }
.round-btn.accent { background: var(--accent); color: var(--b-ink); }
.round-btn.is-good { color: var(--b-up); }
.round-btn.is-bad { color: var(--b-down); }
.round-btn.is-flat { color: var(--muted); }

/* The mustard summary: a bold sentence, then plain uppercase, an ink pill. */
.look-bento .hero { background: var(--b-mustard); border-color: var(--b-mustard); color: var(--b-ink); min-height: 360px; gap: 1rem; }
.hero-copy { margin: 0; font-size: clamp(1.45rem, 2.1vw, 2rem); line-height: 1.12; font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; }
.hero-copy strong { font-weight: 700; }
/* The explanation after a headline's state: its own line, small, in normal case. */
.hero-copy .hero-note { display: block; margin-top: .45rem; font-size: .95rem; line-height: 1.4; text-transform: none; letter-spacing: 0; }
.look-bento .hero .meter { margin-top: auto; }
.look-bento .hero .meter-track { background: rgba(20, 20, 20, .14); }
.look-bento .hero .meter-fill { background: var(--b-ink); }
.look-bento .hero .meter-text { color: var(--b-ink); }
.hero-foot { display: flex; align-items: center; justify-content: space-between; }
.hero-mark .icon { width: 40px; height: 40px; color: var(--b-ink); }
.look-bento .btn.ink { background: var(--b-ink); border-color: var(--b-ink); color: var(--accent); padding: .75rem 1.5rem; font-size: 1rem; font-weight: 500; }
.look-bento .btn.ink:hover { color: var(--accent); filter: brightness(1.4); }

/* Change cards: the label, a round arrow, the change as the big number. */
.change-card { display: flex; flex-direction: column; min-height: 170px; color: var(--fg); }
.change-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: 1.05rem; font-weight: 500; }
.change-big {
  margin-top: auto; padding-top: .8rem; font-size: clamp(2.8rem, 4.2vw, 4.2rem); font-weight: 400; letter-spacing: -.035em; line-height: 1;
}
.change-big.is-good { color: var(--b-up); }
.change-big.is-bad { color: var(--b-down); }
.change-big.is-flat { color: var(--muted); }
.pair .change-card { min-height: 150px; }
.pair .change-big { font-size: clamp(2.2rem, 3vw, 3.2rem); }

/* Lists: plain rows, name left and value right, fading down the card. */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { transition: opacity 200ms ease; }
.rows li:nth-child(2) { opacity: .84; }
.rows li:nth-child(3) { opacity: .68; }
.rows li:nth-child(4) { opacity: .54; }
.rows li:nth-child(5) { opacity: .42; }
.rows li:nth-child(n+6) { opacity: .32; }
.rows:hover li { opacity: 1; }
.rows > li > a { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; padding: .32rem 0; color: var(--fg); }
.rows > li > a:hover { color: var(--accent); }
.row-name { min-width: 0; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-name.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92rem; }
.row-sub { margin-left: .5rem; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: .78rem; color: var(--muted); }
.row-value { flex: none; font-size: 1rem; font-variant-numeric: tabular-nums; }
.row-value.plus { color: var(--b-up); }
.rows .pill { flex: none; }

/* A detail card whose main action is a big arrow ("Finish →"). */
.do-card { display: flex; flex-direction: column; min-height: 170px; }

/* A pill switch (Month / FY, Own words). */
.pill-toggle { flex: none; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--b-ink); font-size: .82rem; }
.pill-toggle > * { padding: .2rem .7rem; border-radius: 999px; color: var(--b-up); white-space: nowrap; }
.pill-toggle [aria-current="true"] { background: var(--b-green); color: var(--b-ink); box-shadow: inset 0 0 0 1px var(--b-ink); }

/* On these pages the sidebar joins in: charcoal, the mustard accent. */
body.app:has(main.look-bento) .sidebar {
  --sidebar: #ffffff; --accent: var(--b-ink); --accent-ink: #ffffff; --accent-text: #3563d8;
  --fg: #111114; --fg-2: #3c3c43; --muted: #7d8088; --line: #e7e8eb; --plain-bg: rgba(17, 17, 20, .06);
  --card: #ffffff; --card-2: #f4f5f7; --warn: #8a5a00; --warn-bg: #fff3cd; --bad: var(--b-red);
  color: var(--fg); color-scheme: light;
}
body.app:has(main.look-bento) .side-nav a[aria-current="page"] .badge { background: var(--b-red); color: #fff; }

@media (max-width: 700px) {
  .look-bento .hero { min-height: 0; }
}

/* ── Bento interiors: every page in the cards' language ──────────────────
   Filter tabs are count cards (the chosen one a mustard block); lists are
   two-line rows (a title and its details left, the key number and status
   right, no grid lines); label / value facts are rows too; detail pages lead
   with a mustard summary block; forms are soft and rounded; the main
   action of a card is a big mustard arrow. */
.look-bento .head { align-items: center; margin-bottom: .6rem; }
.look-bento .head h1 { margin: 0; }
.look-bento .sync { color: var(--fg-2); }
.look-bento .hint { color: #bdbdbd; }
.look-bento > .hint, .look-bento .head + .hint { margin-bottom: 1rem; }
.look-bento .crumbs, .look-bento .crumbs a { color: var(--fg-2); }

/* Count cards. */
.look-bento .tabs { gap: 8px; margin-bottom: 1.2rem; }
.look-bento .tabs a {
  display: flex; flex-direction: column; justify-content: space-between; gap: .7rem;
  min-width: 7.5rem; min-height: 5.8rem; padding: .85rem 1rem; border: 0; border-radius: 22px;
  background: var(--card); color: var(--fg-2); font-size: .9rem; font-weight: 500;
}
.look-bento .tabs .count { font-size: 2.1rem; line-height: 1; letter-spacing: -.03em; font-weight: 400; color: var(--fg); opacity: 1; }
/* Working's count cards with the bp control at the right end. */
.tabs-bar { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 1.2rem; }
.look-bento .tabs-bar .tabs { flex: 1; min-width: 0; margin-bottom: 0; }
.look-bento .tab-action {
  display: flex; flex-direction: column; justify-content: space-between; gap: .7rem; flex: none;
  min-width: 7.5rem; min-height: 5.8rem; padding: .85rem 1rem; border: 0; border-radius: 22px;
  color: var(--b-ink); font: inherit; font-size: 1.15rem; font-weight: 600; text-align: left; cursor: pointer;
}
/* Run / Stop as in the IDE: a green triangle and a red square on the dark card. */
.look-bento .tab-run, .look-bento .tab-stop { background: var(--card); color: var(--fg); }
.tab-label { display: flex; align-items: center; gap: .45rem; }
.tab-label .icon { width: 1.35em; height: 1.35em; flex: none; }
.look-bento .tab-run .icon { color: #1fe35e; }
.look-bento .tab-stop .icon { color: #ff3b30; }
.tab-form { display: flex; margin: 0; }
.look-bento a.tab-action { text-decoration: none; }
.look-bento .tab-log { background: var(--b-slate); }
.look-bento .tab-kill { background: #7a0f0a; color: #fff; }
.look-bento .tab-action:disabled { opacity: .4; cursor: not-allowed; }
.tab-action-sub { font-size: .78rem; font-weight: 500; }
@media (max-width: 760px) { .tabs-bar { flex-wrap: wrap; } }
.look-bento .tabs a[aria-current="page"], .look-bento .tabs a[aria-current="page"] .count { background: var(--b-mustard); color: var(--b-ink); }
.look-bento .tabs a:hover .count { color: var(--accent); }
.look-bento .tabs a[aria-current="page"]:hover .count { color: var(--b-ink); }
/* Tabs with no count (Finance's Overview / Bills / Income): pills, not cards. */
.look-bento .tabs.tabs-compact a { flex-direction: row; align-items: center; min-width: 0; min-height: 0; padding: .45rem 1.1rem; border-radius: 999px; font-size: .9rem; }

/* Two-line rows. */
.rows.plain li { opacity: 1; }
.rows.plain > li + li { border-top: 1px solid var(--line); }
.rows.plain > li > a, .rows.plain .row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .1rem; color: var(--fg); }
.rows.plain > li > a:hover .row-title { color: var(--accent); }
.row-main { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.row-title { font-size: 1.02rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-title.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; }
.row-title a { color: inherit; }
.row-meta { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-body { font-size: .86rem; color: var(--fg-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.row-side { flex: none; display: flex; align-items: center; gap: .6rem; }
.row-num { font-size: 1.3rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.row-num small { font-size: .72rem; color: var(--muted); letter-spacing: 0; margin-right: .2rem; }
.row-num.good { color: var(--b-up); }
.row-num.bad { color: var(--b-down); }
.row-side form { margin: 0; }
.rows-card { padding: .6rem 1.35rem; }

/* Facts as rows: the label left, the value right. */
.look-bento .facts { grid-template-columns: minmax(8.5rem, auto) minmax(0, 1fr); gap: 0; }
.look-bento .facts dd { padding-left: 1rem; overflow-wrap: anywhere; }
.look-bento .facts dt, .look-bento .facts dd { padding: .62rem 0; border-top: 1px solid var(--line); }
.look-bento .facts dt:first-of-type, .look-bento .facts dd:first-of-type { border-top: 0; }
.look-bento .facts dt { color: var(--muted); }
.look-bento .facts dd { text-align: right; font-size: 1.02rem; }

/* Tables that stay tables (Reports, messages on a record): quiet rules. */
.look-bento th { font-size: .74rem; color: var(--muted); font-weight: 500; }
.look-bento th, .look-bento td { border-bottom-color: var(--line); padding-top: .7rem; padding-bottom: .7rem; }

/* History as rows. */
.look-bento .timeline { list-style: none; margin: 0; padding: 0; }
.look-bento .timeline li { padding: .6rem 0; border-top: 1px solid var(--line); }
.look-bento .timeline li:first-child { border-top: 0; }
.look-bento .timeline time { display: block; font-size: .78rem; }

/* Forms: soft rounded fields, choices as chips, the primary a wide pill. */
.look-bento .form { gap: .85rem; }
.look-bento .form label { font-size: .8rem; }
.look-bento input, .look-bento select, .look-bento textarea { background: var(--card-2); border: 1px solid var(--line); border-radius: 14px; padding: .7rem .9rem; }
.look-bento .form label.check { padding: .6rem .85rem; border-radius: 14px; background: var(--card-2); font-size: .92rem; }
.look-bento .form .btn { padding: .75rem 1.3rem; font-size: 1rem; }
.look-bento .form .btn.primary { align-self: stretch; }
.look-bento .notice { border-radius: 18px; padding: .8rem 1rem; }

/* A detail page's summary: the mustard block, its number big. */
.look-bento .hero.summary { min-height: 0; gap: .9rem; }
.look-bento .hero .facts { margin-top: .2rem; }
.hero-big { font-size: clamp(2.8rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -.035em; font-weight: 400; }
.hero-big.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing: -.02em; }
.look-bento .hero .pill { background: rgba(12, 11, 10, .12); color: var(--b-ink); }
.look-bento .hero form { margin: 0; }
.look-bento .hero .form.inline input { background: rgba(255, 255, 255, .5); color: var(--b-ink); border-color: transparent; }
.look-bento .hero .hint { color: #3a3a1a; }
.look-bento .hero a:not(.btn), .look-bento .hero a:not(.btn):hover { color: var(--b-ink); text-decoration: underline; }

/* The big mustard arrow: a card's main action. */
.btn-do { display: inline-flex; align-items: center; gap: .55rem; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -.03em; color: var(--accent); text-align: left; }
.btn-do .icon { width: .8em; height: .8em; stroke-width: 2.2; flex: none; }
.btn-do:hover { filter: brightness(1.15); }
.btn-do.danger { color: var(--b-down); }
.side .card h2 { font-size: 1.05rem; }

.look-bento .hero .form label { color: var(--b-ink); }
.look-bento .hero .form.inline { align-items: flex-end; }
.rows-card > h2, .rows-card > .card-head { margin: .75rem 0 .2rem; }
.look-bento .dash-table h2 a { color: var(--fg); }

/* ── Number cards (after the operator's KPI-grid reference) ──────────────
   Equal rounded cards in a grid: a label and a round "…" button on top, the
   number giant below. Tones: black, slate, coral, mustard, purple, green;
   a status card carries an on / off switch; "Add" closes the grid. */
.k-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 1.4rem; }
.k-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  min-height: 160px; padding: 1.15rem 1.3rem; border-radius: 26px; background: var(--card); color: var(--fg);
}
a.k-card:hover { filter: brightness(1.08); }
.k-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: 1.05rem; font-weight: 500; }
.k-value { font-size: clamp(2.6rem, 4.4vw, 4.2rem); line-height: 1; letter-spacing: -.035em; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-sub { font-size: .82rem; opacity: .75; margin-top: -.6rem; }
.k-card .round-btn { background: var(--b-ink); }
.k-card.slate, a.k-card.slate:hover { background: var(--b-slate); color: var(--b-ink); }
.k-card.coral, a.k-card.coral:hover { background: var(--b-coral); color: var(--b-ink); }
.k-card.mustard, a.k-card.mustard:hover { background: var(--b-mustard); color: var(--b-ink); }
.k-card.purple, a.k-card.purple:hover { background: var(--b-purple); color: var(--b-ink); }
.k-card.green, a.k-card.green:hover { background: var(--b-green); color: var(--b-ink); }
.k-card.coral .round-btn { color: var(--b-coral); }
.k-card.mustard .round-btn { color: var(--b-mustard); }
.k-card.purple .round-btn { color: var(--b-purple); }
.k-card.green .round-btn { color: var(--b-green); }
.k-card.slate .round-btn { color: var(--b-slate); }
.k-card.add .round-btn { background: var(--b-coral); color: var(--b-ink); }
.k-card.add .k-value { color: var(--fg); }

/* An on / off switch as a status, not a control: the knob shows the state. */
.toggle { flex: none; position: relative; width: 52px; height: 30px; border-radius: 999px; background: var(--b-ink); }
.toggle::after { content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--b-slate); transition: left 200ms ease; }
.toggle.on::after { left: 26px; background: var(--b-green); }
.k-head form { margin: 0; }
.k-head a { color: inherit; }
button.toggle { border: 0; padding: 0; cursor: pointer; }

/* Filter count cards wear the tone their filter means: filled when chosen,
   dark with the number tinted otherwise. */
.look-bento .tabs a .count { color: var(--tab-tone, var(--fg)); }
.look-bento .tabs a[aria-current="page"] { background: var(--tab-tone, var(--b-mustard)); }
.look-bento .tabs a[aria-current="page"] .count { background: none; color: var(--b-ink); }
.tabs a[href*="f=new"], .tabs a[href*="f=unbilled"], .tabs a[href*="f=tobill"], .tabs a[href*="f=open"], .tabs a[href*="f=bill"] { --tab-tone: var(--b-mustard); }
.tabs a[href*="f=overdue"], .tabs a[href*="f=needs-call"], .tabs a[href*="f=failed"], .tabs a[href*="f=link"], .tabs a[href*="f=rejected"] { --tab-tone: var(--b-coral); }
.tabs a[href*="f=promised"], .tabs a[href*="f=progress"], .tabs a[href*="f=issue"] { --tab-tone: var(--b-purple-text); }
.tabs a[href*="f=paid"], .tabs a[href*="f=done"], .tabs a[href*="f=receipt"] { --tab-tone: var(--b-green); }
.tabs a[href*="f=claimed"], .tabs a[href*="f=earlier"], .tabs a[href*="f=all"] { --tab-tone: var(--b-slate); }
.tabs a[href*="f=cancelled"], .tabs a[href*="f=removed"], .tabs a[href*="f=test"] { --tab-tone: #d6d6d6; }
.tabs a[aria-current="page"][href*="f=promised"], .tabs a[aria-current="page"][href*="f=progress"], .tabs a[aria-current="page"][href*="f=issue"] { --tab-tone: var(--b-purple); }

/* The request page's action cards. */
.reject-card { background: var(--b-red); color: var(--b-ink); }
.reject-card h2, .reject-card .hint { color: var(--b-ink); }
.reject-card .round-btn { color: var(--b-red); }
.reject-card .form label.check { background: rgba(12, 11, 10, .14); color: var(--b-ink); }
.btn-do:disabled { opacity: .45; cursor: not-allowed; }
.reject-card .btn-do { color: var(--b-ink); }
.reject-card input[type="radio"] { accent-color: var(--b-ink); }

@media (max-width: 1180px) { .k-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .k-grid { grid-template-columns: minmax(0, 1fr); } }
.hero-copy { overflow-wrap: anywhere; }
.reject-card > .hint { margin: .7rem 0 0; }

/* ── One request, like the operator's reference (Zextras/dashboard/design/dash/img_2.png) ──
   Two phone-like stacks on a near-black backing and a column of actions:
   left (with the yellow tab) is Details in the green Balance card, then AI
   and PD + / PD −; middle is the WhatsApp message in the yellow card, then
   the messages sent; right, the Add item column, is Approve (dark, green
   text) and Reject (the red #error). Every card only as tall as it holds. */
.req-bento { display: grid; gap: 40px clamp(32px, 6vw, 96px); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "left mid acts"; align-items: start; }
.req-left { grid-area: left; margin-top: 30px; }
.req-mid { grid-area: mid; }
.req-acts { grid-area: acts; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.req-phone { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-bottom: 12px; border-radius: 26px; background: var(--card-2); }
.req-phone > *, .req-acts > * { min-width: 0; }
.req-phone .pair { gap: 12px; }
.req-left { position: relative; padding-top: 26px; background: linear-gradient(var(--b-mustard) 0 80px, var(--card-2) 80px); }
.req-left::before { content: ""; position: absolute; top: 10px; left: 50%; width: 48px; height: 6px; margin-left: -24px; border-radius: 3px; background: var(--b-ink); }

.req-bento .card { padding: .85rem 1.1rem; }
.req-bento .change-card { min-height: 0; gap: .25rem; padding: .8rem 1rem; }
.req-bento .change-big { margin-top: 0; padding-top: 0; font-size: clamp(1.9rem, 2.4vw, 2.5rem); }

/* The user: the green Balance card — "User", the state as the reference's
   Daily / Weekly toggle, the user ID big at the foot. */
.req-user.card { display: flex; flex-direction: column; background: var(--b-green); color: var(--b-ink); }
.req-user h2 { color: var(--b-ink); }
.req-user .card-head { margin-bottom: .2rem; }
.req-name { margin: 0; font-size: clamp(1.5rem, 2.1vw, 2.2rem); font-weight: 400; line-height: 1.05; letter-spacing: -.035em; overflow-wrap: anywhere; }

.req-person { margin: .15rem 0 0; font-size: 1.05rem; font-weight: 500; overflow-wrap: anywhere; }

/* The details: a list like Starred Crypto, name left and value right — a
   short window that fades out downward, swiped (scrolled) to bring the rest
   up; the bottom padding lets the last rows reach the clear part. */
.req-details .card-head { margin-bottom: .5rem; }
.req-details .fx-list, .fx-wide .fx-list-card .fx-list {
  max-height: 12.5rem; overflow-y: auto; padding-bottom: 6rem;
  overscroll-behavior: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent 100%);
}
.req-details .fx-list::-webkit-scrollbar, .fx-wide .fx-list-card .fx-list::-webkit-scrollbar { display: none; }
/* The request page fits one screen: a shorter window, clear for longer. */
.req-details .fx-list {
  max-height: 9rem; padding-bottom: 3.5rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
}

/* The WhatsApp message: yellow, ink text, an ink-tinted field. */
.req-message.card { background: var(--b-mustard); color: var(--b-ink); }
.req-message { display: flex; flex-direction: column; gap: .5rem; --muted: #3a3a1a; }
.req-message h2 { color: var(--b-ink); }
.req-message .hint, .req-message .form label { color: #3a3a1a; }
.req-message textarea, .req-message input { background: rgba(12, 11, 10, .12); color: var(--b-ink); border-color: transparent; color-scheme: light; }
.req-message input { padding: .45rem .7rem; }
.req-message .fx-seg > label { color: var(--fg); }
.req-status .fx-seg > label:has(input:checked) { background: var(--b-orange); color: var(--b-ink); }
/* A sheet row's Status: the message card in orange. */
.req-status.card { background: var(--b-orange); }
.req-status .pill-toggle [aria-current="true"] { background: var(--b-orange); }
/* PD work's Status: the PD Summary's total, ink on the orange. */
.req-pdsum .fx-balance { margin: 0; color: var(--b-ink); }
.req-message .form { margin-top: .4rem; }
.req-message .btn.ink { align-self: flex-start; }
.req-message .pill-toggle [aria-current="true"] { background: var(--b-mustard); }
/* The request's Summary: the yellow card names it; the black card under it
   holds the form's review table — Details' grey headings and light values,
   a short window that fades out downward and swipes (scrolls) up. */
.req-summary .req-name { margin-top: .2rem; }
.req-table-wrap {
  max-height: 9rem; overflow: auto; padding-bottom: 3.5rem;
  overscroll-behavior: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%);
}
.req-table-wrap::-webkit-scrollbar { display: none; }
.req-table { width: 100%; border-collapse: collapse; font-size: .8rem; line-height: 1.3; }
.req-table th, .req-table td { padding: .3rem .25rem; text-align: left; white-space: nowrap; }
.req-table th { position: sticky; top: 0; background: var(--card); color: #b9b9c0; font-weight: 500; }
.req-table td { color: var(--fg); border-top: 1px solid var(--line); }
.req-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.req-table td.mono { font-size: .76rem; letter-spacing: -.02em; }
.req-to { margin: .4rem 0 0; font-size: clamp(1.2rem, 1.75vw, 1.8rem); letter-spacing: -.02em; }
.req-to .mono { white-space: nowrap; }

/* The messages sent: plain rows. */
.req-sent .row-line { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .35rem 0; }
.req-sent .row-name { font-size: .92rem; }

/* Approve: the Add item card — dark, a green round plus, the big green arrow. */
.req-approve { display: flex; flex-direction: column; gap: .5rem; }
.req-approve .round-btn { background: var(--b-green); color: var(--b-ink); }
.req-approve .btn-do { color: var(--b-up); }
.req-revert { display: flex; flex-direction: column; gap: .5rem; }
.req-revert .round-btn { background: var(--b-mustard); color: var(--b-ink); }
.req-revert .btn-do { color: var(--warn); }
a.req-approve:hover { filter: brightness(1.15); }

/* Approve and Reject: compact forms, the arrow as the button. */
.req-approve .btn-do, .req-reject .btn-do { font-size: clamp(1.5rem, 2.1vw, 2rem); }
.req-approve .form, .req-reject .form { gap: .55rem; }
.req-approve > .hint, .req-reject > .hint { margin: .2rem 0 0; font-size: .8rem; }
.req-bills { margin: 0; }
/* Who Approve bills: the slate Active Wallets card, the payer big. */
.req-bills-card { display: flex; flex-direction: column; gap: .4rem; }
.req-payer-name { margin: .1rem 0 0; font-size: clamp(1.5rem, 2.2vw, 2.2rem); line-height: 1.08; letter-spacing: -.03em; overflow-wrap: anywhere; }
.req-bills-card .hint, .req-bills-card label, .req-bills-card summary { color: #2b3036; }
.req-bills-card select, .req-bills-card input { background: rgba(12, 11, 10, .12); color: var(--b-ink); border-color: transparent; color-scheme: light; }
.req-bills-card .round-btn { background: var(--b-ink); color: #fff; }
.req-payer summary { font-size: .8rem; color: var(--muted); cursor: pointer; }
.req-payer[open] summary { margin-bottom: .4rem; }
.req-reject .form { flex-direction: row; flex-wrap: wrap; align-items: center; }
.req-reject .form label.check { flex: 1 1 100%; padding: .5rem .7rem; font-size: .88rem; }
.req-reject .form .btn-do { flex-basis: 100%; }
.look-bento .btn { white-space: nowrap; }

/* Narrower: the two stacks side by side, Approve and Reject in a row under
   them; a phone: one column, the actions straight after Details. */
@media (max-width: 1180px) {
  .req-bento { gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "left mid" "acts acts"; }
  .req-left { margin-top: 0; }
  .req-acts { flex-direction: row; align-items: flex-start; }
  .req-acts > * { flex: 1 1 0; }
}
@media (max-width: 700px) {
  .req-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "left" "acts" "mid"; }
  .req-acts { flex-direction: column; align-items: stretch; }
  /* Stacked, each card takes its own height: the row's flex: 1 1 0 would
     squash them to a sliver. */
  .req-acts > * { flex: none; }
  /* The page scrolls anyway: the whole details list, no fading window. */
  .req-details .fx-list { max-height: none; padding-bottom: 0; -webkit-mask-image: none; mask-image: none; }
}

/* ── One row, one bill: the operator's reference (Zextras/dashboard/design/dash/img_1.png) ──
   The cards on the page, 4 columns, one card unit per row, cell for cell:
     ·                     | yellow summary (2 cols, 3 rows) | tabs
     list (Starred Crypto) | yellow summary                  | ·
     list                  | yellow summary                  | ·
     Add item              | fig 1 | green Balance           | slate (Active Wallets)
     ·                     | fig 2 | green Balance           | Do it
     ·                     | ·     | green Balance           | ·
   The empty cells are the reference's too. Long forms and lists are
   pop-ups, so each card keeps its size. */
.fx {
  --u: 132px;
  display: grid; gap: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto repeat(5, minmax(var(--u), auto));
  grid-template-areas:
    ".    promo promo tabs"
    "list promo promo ."
    "list promo promo ."
    ".    figs  green slate"
    ".    figs  green doit"
    ".    .     green .";
}
.fx > :not([popover]) { margin: 0; min-width: 0; }
.fx-nav { grid-area: tabs; align-self: start; justify-content: flex-end; }
.fx-promo { grid-area: promo; }
.fx-list-card { grid-area: list; }
/* Paid and Outstanding share one slot, two equal rows. */
.fx-figs { grid-area: figs; display: grid; grid-template-rows: 1fr 1fr; gap: 20px; min-width: 0; }
.fx > .fx-green { grid-area: green; }
/* Mark paid sizes to its form, not the three rows it spans. */
.fx > .fx-pay { align-self: start; }
.fx > .fx-slate { grid-area: slate; }
.fx > .fx-do { grid-area: doit; }
/* The client page's orange Paid bills card, under the yellow summary. */
.fx > .fx-paid { grid-column: 2 / 4; grid-row: 3 / 6; }
.card.fx-paid { display: flex; flex-direction: column; gap: .55rem; background: #ff6d01; color: var(--b-ink); }
.fx-paid .card-head h2 { color: var(--b-ink); }
.fx-paid-total { font-weight: 700; }
.fx-paid .hint { color: rgba(12, 11, 10, .7); }
.fx-paid-rows { display: flex; flex-direction: column; gap: 2px; max-height: 22rem; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.fx-paid-rows a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: .75rem; padding: .45rem .2rem; border-bottom: 1px solid rgba(12, 11, 10, .18); color: var(--b-ink); text-decoration: none; }
.fx-paid-rows a:hover { background: rgba(12, 11, 10, .08); }
.fx-paid-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.fx-paid-when { font-size: .75rem; opacity: .75; white-space: nowrap; }
.fx-paid-amt { font-weight: 700; white-space: nowrap; }
.fx .card { padding: 1.1rem 1.25rem; }
.fx-fig1, .fx-fig2, .fx > .fx-slate, .fx > .fx-do { min-height: var(--u); }

/* The yellow summary: the big uppercase sentence, the user ID or client,
   the small facts, its action at the foot. */
.fx-promo .hero-copy { font-size: clamp(1.5rem, 2.3vw, 2.25rem); line-height: 1.12; }
.fx-promo .hero-foot { margin-top: auto; }
.look-bento .fx-promo-user { margin: 1rem 0 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: clamp(1.5rem, 2.3vw, 2.3rem); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: var(--b-ink); overflow-wrap: anywhere; }
.fx-promo-user a, .fx-promo-user a:hover { color: inherit; }
.look-bento .fx-promo-user .fx-small { font-weight: 500; color: #3a3a1a; }
.fx-promo-sheet { margin-top: .9rem; display: flex; flex-direction: column; gap: .45rem; }
.fx-promo-tab { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 600; }
.fx-promo-facts { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; font-size: .84rem; }
.fx-promo-facts dt { font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #3a3a1a; }
.fx-promo-facts dd { margin: .05rem 0 0; }

/* Lists like Starred Crypto: name left, value right, no rules; a value too
   long to sit beside its name drops whole to the next line. */
.fx-list { margin: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .95rem; line-height: 1.3; }
.fx-list > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem 1rem; }
.fx-list dt { color: #b9b9c0; }
.fx-list dd { flex: 0 0 auto; max-width: 100%; margin: 0 0 0 auto; text-align: right; color: var(--fg); overflow-wrap: anywhere; }
.fx-rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .6rem; font-size: .93rem; line-height: 1.3; }
.fx-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.fx-rows li > span { min-width: 0; overflow-wrap: anywhere; }
.fx-rows small { display: block; font-size: .8rem; color: var(--muted); }
.fx-rows time { flex: none; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.fx-rows b { flex: none; font-weight: 500; }
/* The order page's History: a slate card in the actions column, ink text. */
.card.req-history { background: var(--b-slate); color: var(--b-ink); display: flex; flex-direction: column; gap: .6rem; }
.req-history h2 { color: var(--b-ink); }
.req-history .round-btn { background: var(--b-ink); color: var(--b-slate); }
.req-history .fx-rows { max-height: 22rem; overflow-y: auto; scrollbar-width: none; font-size: .88rem; }
.req-history .fx-rows li { padding-bottom: .55rem; border-bottom: 1px solid rgba(12, 11, 10, .14); }
.req-history .fx-rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.req-history .fx-rows time, .req-history .fx-rows .empty { color: #23353c; }

/* Figures like Bitcoin / Ethereum: the label and a round arrow, the number
   big at the foot. */
.fx .change-card { gap: .4rem; padding: 1rem 1.15rem; }
.fx .change-big { margin-top: auto; padding-top: .3rem; font-size: clamp(2.2rem, 3.4vw, 3.4rem); overflow-wrap: anywhere; }
.fx .change-big .is-good { color: var(--b-up); }
.fx .change-big .is-bad { color: var(--b-down); }
.fx .change-head button.round-btn { border: 0; cursor: pointer; }

/* Add item: a yellow round button top right, the big word at the foot. */
.fx-add { display: flex; flex-direction: column; justify-content: space-between; gap: .4rem; border: 0; background: var(--card); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.fx-add .round-btn { align-self: flex-end; background: var(--b-mustard); color: var(--b-ink); }
.fx-add-word { font-size: clamp(2rem, 3.1vw, 3.1rem); line-height: 1; letter-spacing: -.03em; transition: color 150ms ease; }
.fx-add:hover .fx-add-word { color: var(--b-mustard); }
.fx-link-text { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; color: var(--muted); }

/* The green Balance card and the slate Active Wallets: ink text, the value
   big, ink-tinted fields and chips, ink buttons. */
.fx-green, .fx > .fx-slate, .fx > .fx-do { display: flex; flex-direction: column; gap: .55rem; }
.card.fx-green { background: var(--b-green); color: var(--b-ink); }
.card.fx-slate { background: var(--b-slate); color: var(--b-ink); }
/* A finished bill: Payments blue, and Status a brighter green once paid. */
.card.fx-blue { background: #7fb2ff; }
.fx-earlier-head { margin: .5rem 0 0; padding-top: .6rem; border-top: 1px solid rgba(12, 11, 10, .18); color: #13305c; font-weight: 600; }
.fx-blue .fx-earlier { flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: .2rem; }
.fx-earlier li { padding-bottom: .5rem; border-bottom: 1px solid rgba(12, 11, 10, .12); }
.fx-earlier li:last-child { border-bottom: 0; }
.fx-earlier a { color: var(--b-ink); font-weight: 600; }
.fx-blue .hint, .fx-blue label, .fx-blue small, .fx-blue time { color: #13305c; }
.fx-blue .round-btn { background: var(--b-ink); color: #7fb2ff; }
.card.fx-paid { background: #1fe35e; }
.fx-paid .round-btn { background: var(--b-ink); color: #1fe35e; }
.fx-green h2, .fx-slate h2 { color: var(--b-ink); }
.fx-green .card-head, .fx-slate .card-head, .fx-do .card-head { margin-bottom: .2rem; }
.fx-balance { margin: .1rem 0; font-size: clamp(2.2rem, 3.4vw, 3.4rem); font-weight: 400; line-height: 1; letter-spacing: -.035em; overflow-wrap: anywhere; }
.fx-to { font-size: clamp(1.1rem, 1.5vw, 1.5rem); letter-spacing: -.01em; }
.fx-to .mono { white-space: nowrap; }
.fx-big { margin: auto 0 0; font-size: clamp(1.15rem, 1.45vw, 1.55rem); line-height: 1.15; letter-spacing: -.02em; overflow-wrap: anywhere; }
.fx-big a, .fx-big a:hover { color: inherit; }
.fx-small { display: block; margin-bottom: .15rem; font-size: .8rem; letter-spacing: 0; }
.fx-foot { margin-top: auto; align-self: flex-start; }
.fx-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.fx-green .hint, .fx-green label, .fx-green small, .fx-green time { color: #1d4a2a; }
.fx-green .pill, .fx-slate .pill { background: rgba(12, 11, 10, .12); color: var(--b-ink); }
.fx-green input, .fx-green select, .fx-green textarea { background: rgba(12, 11, 10, .12); color: var(--b-ink); border-color: transparent; color-scheme: light; }
.fx-green input { padding: .45rem .7rem; }
.fx-fields { display: grid; gap: .45rem; }
.look-bento .fx-green .btn.primary { align-self: flex-start; background: var(--b-ink); border-color: var(--b-ink); color: var(--b-mustard); }

/* The message kind as the reference's Daily / Weekly toggle; each kind
   shows only its own field. */
.fx-seg > label { display: inline-flex; position: relative; margin: 0; padding: .22rem .65rem; border-radius: 999px; font-size: .78rem; color: var(--b-up); cursor: pointer; }
.fx-seg input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fx-seg > label:has(input:checked) { background: var(--b-green); color: var(--b-ink); box-shadow: inset 0 0 0 1px var(--b-ink); }
.fx-seg > label:has(:focus-visible) { outline: 2px solid var(--b-ink); outline-offset: 1px; }
/* The Status card: what bp found, in the sheet's own good / bad fills. */
.fx-status { display: flex; flex-direction: column; gap: .45rem; margin: 0; }
.fx-status > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem .6rem; }
.fx-status dt { font-size: .78rem; font-weight: 600; }
.fx-status dd { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; margin: 0; }
.st { display: inline-flex; gap: .3rem; padding: .18rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: rgba(12, 11, 10, .12); color: var(--b-ink); }
.st.st-ok { background: #c6efce; color: #0b5a1e; }
.st.st-bad { background: #ffc7ce; color: #9c0006; }
.fx-msg-kind { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; margin-top: .3rem; padding-top: .55rem; border-top: 1px solid rgba(12, 11, 10, .18); }
.fx-msg .fx-when-password, .fx-msg .fx-when-bull, .fx-msg .fx-when-custom { display: none; }
.fx-msg:has(input[value="password"]:checked) .fx-when-password { display: block; }
.fx-msg:has(input[value="bull"]:checked) .fx-when-bull,
.fx-msg:has(input[value="custom"]:checked) .fx-when-custom { display: flex; }

/* Do it: the big arrow as the button, at the foot. */
.fx-do .btn-do { margin-top: auto; font-size: clamp(2rem, 3vw, 3rem); }
.fx-finish .btn-do { font-size: clamp(2rem, 3vw, 3rem); color: var(--b-ink); }
.fx-finish .hint { margin-top: auto; color: var(--b-ink); opacity: .7; }
.fx-pop .btn-do { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }

/* The pop-ups: one card in the middle of the screen, the page dimmed. */
.fx-pop { width: min(480px, 92vw); max-height: 85vh; margin: auto; padding: 1.2rem 1.35rem; overflow: auto; border: 0; border-radius: 26px; background: var(--card); color: var(--fg); box-shadow: 0 24px 80px rgba(0, 0, 0, .55); }
.fx-pop::backdrop { background: rgba(8, 8, 8, .6); }
.fx-pop.fx-pop-wide { width: min(900px, 94vw); }
.lh-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
/* The pop-up is dark in both themes: its bubbles keep the dark-card ramp
   and rings, its grid and ticks the dark tones. */
:root .fx-pop .q1 { fill: #8a3d10; } :root .fx-pop .q2 { fill: #b04f14; } :root .fx-pop .q3 { fill: #d9621a; }
:root .fx-pop .q4 { fill: #f2803a; } :root .fx-pop .q5 { fill: #ffa564; }
:root .fx-pop .chart-svg .dot { stroke: var(--card); }
:root .fx-pop .c-grid { stroke: #2e2e34; } :root .fx-pop .c-axis, :root .fx-pop .c-ref { stroke: #5a5a62; }
:root .fx-pop .c-tick { fill: #8b8b94; } :root .fx-pop .c-label { fill: #e8e8ea; } :root .fx-pop .legend { color: #d6d6da; }
.fx-pop .sub { margin: .2rem 0 .6rem; color: #b9b9bf; font-size: .8rem; }
.fx-pop.fx-pop-bare { padding: 0; overflow: visible; background: none; box-shadow: none; }
.fx-pop .card-head { margin-bottom: .9rem; }
.fx-pop .form { margin-bottom: .6rem; }
.fx-pop .rows-card { padding: 0; background: none; }
.fx-pop .rows-card > h2 { display: none; }
.fx-pop .round-btn { border: 0; cursor: pointer; }

/* Narrower: two columns, the summary across both; a phone: one. */
@media (max-width: 1180px) {
  .fx {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas: ". tabs" "promo promo" "list figs" "list figs" "green slate" "green doit";
  }
}
@media (max-width: 1180px) { .fx > .fx-paid { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 700px) {
  .fx { display: flex; flex-direction: column; }
  .fx-nav { justify-content: flex-start; }
}

/* The bill page: the tabs beside the crumbs and the yellow summary three
   columns wide (the client beside the facts), only as tall as the list,
   so Mark paid fits on one screen. */
.fx-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .6rem; }
.fx-bar .crumbs { margin: 0; }
.fx.fx-wide {
  grid-template-rows: repeat(5, minmax(var(--u), auto));
  grid-template-areas:
    "list promo promo promo"
    "list promo promo promo"
    "list figs  green slate"
    ".    figs  green doit"
    ".    .     green .";
}
.fx-promo-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 2.5rem; margin-top: .9rem; }
.look-bento .fx-promo-row > * { margin: 0; }
/* The Bill list starts lower than the yellow summary, like the reference's
   Starred Crypto beside the yellow card, and reaches down level with the
   Paid / Promise date row; its fading list fills it (beats
   ".fx > :not([popover])"'s margin: 0). */
.fx.fx-wide > .fx-list-card { align-self: stretch; margin-top: 110px; display: flex; flex-direction: column; }
.fx-wide .fx-list-card .fx-list { flex: 1 1 0; min-height: 6rem; max-height: none; }
/* The bill's phone-like stack (yellow tab, green header, details), as on a
   request's page; it starts a little below the yellow summary. */
.fx.fx-wide > .fx-phone { margin-top: 30px; gap: 10px; }
.fx-phone { position: relative; padding-top: 26px; background: linear-gradient(var(--b-mustard) 0 80px, var(--card-2) 80px); }
.fx-phone::before { content: ""; position: absolute; top: 10px; left: 50%; width: 48px; height: 6px; margin-left: -24px; border-radius: 3px; background: var(--b-ink); }
.fx-phone .fx-details { flex: 1; display: flex; flex-direction: column; }
.fx-wide .fx-promo .hero-copy { font-size: clamp(1.3rem, 1.85vw, 1.85rem); }
.fx-wide .fx-promo .hero-foot { gap: 1rem; }
.fx-wide .fx-promo .hero-foot .hint { flex: 1; margin: 0; }
.fx-pay .fx-fields { grid-template-columns: repeat(auto-fit, minmax(6.4rem, 1fr)); gap: .45rem .5rem; }
.fx-pay input { padding: .4rem .55rem; font-size: .85rem; }
.fx-pay .hint { font-size: .78rem; }
@media (max-width: 1180px) {
  .fx.fx-wide { grid-template-rows: none; grid-template-areas: "promo promo" "list figs" "list figs" "green slate" "green doit"; }
  .fx.fx-wide > .fx-list-card { margin-top: 0; }
  .fx-wide .fx-list-card .fx-list { flex: none; max-height: 12.5rem; }
}

/* The bill's sending as a milestone track on the yellow card (after the
   operator's reference h.jpeg): ink checks for what's done, an ink ring for
   the step due now, faint dots after; a line joins them, solid up to now. */
.look-bento .fx-promo .hero-copy.fx-sent { font-size: clamp(1.3rem, 1.85vw, 1.85rem); }
.ms-track { display: flex; margin: .9rem 0 .2rem; padding: 0; list-style: none; }
.ms { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; }
.ms::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 3px; background: rgba(12, 11, 10, .2); }
.ms:first-child::before { display: none; }
.ms-done::before, .ms-now::before { background: var(--b-ink); }
.ms-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.ms-done .ms-dot { background: var(--b-ink); color: var(--b-mustard); }
.ms-done .ms-dot .icon { width: 16px; height: 16px; stroke-width: 2.6; }
.ms-now .ms-dot { background: var(--b-mustard); box-shadow: inset 0 0 0 3px var(--b-ink), inset 0 0 0 7px var(--b-mustard), inset 0 0 0 14px var(--b-ink); }
.ms-next .ms-dot { width: 18px; height: 18px; margin: 5px 0; background: rgba(12, 11, 10, .25); }
.ms-label { font-size: .8rem; font-weight: 600; overflow-wrap: anywhere; }
.ms-when { font-size: .7rem; color: #3a3a1a; }

/* ── Finance charts on coloured cards, after the operator's reference: ink
   marks on green, lavender, olive, slate and orange (the colours of the bill
   and row pages), a small uppercase title and a round ink button, the
   headline figure big. Small text is a dark tint of each card; contrast
   checked: ink 6.3–11.5, tints 5.0–6.8. */
.chart-tone {
  --fg: var(--b-ink); --fg-2: var(--b-ink); --line: rgba(12, 11, 10, .18); color: var(--b-ink);
  --chart-accent: var(--b-ink); --chart-context: rgba(12, 11, 10, .38); --chart-dim: rgba(12, 11, 10, .2);
  --chart-grid: rgba(12, 11, 10, .12); --chart-axis: rgba(12, 11, 10, .3);
  --series-1: var(--b-ink); --series-2: rgba(12, 11, 10, .6); --series-3: rgba(12, 11, 10, .38);
  --series-4: rgba(255, 255, 255, .8); --series-5: rgba(255, 255, 255, .5); --series-6: rgba(12, 11, 10, .2);
}
.look-bento .chart-tone.tone-green { --card: var(--b-green); --muted: #1d4a2a; background: var(--b-green); }
.look-bento .chart-tone.tone-lavender { --card: var(--b-lavender); --muted: #2e2645; background: var(--b-lavender); }
.look-bento .chart-tone.tone-olive { --card: var(--b-olive); --muted: #2e2b08; background: var(--b-olive); }
.look-bento .chart-tone.tone-slate { --card: var(--b-slate); --muted: #23353c; background: var(--b-slate); }
.look-bento .chart-tone.tone-orange { --card: var(--b-orange); --muted: #3a1206; background: var(--b-orange); }
/* The calendar heatmap's five shades of ink: none paid, then the days'
   quartiles (insights.go). */
.chart-svg .heat-0 { fill: rgba(12, 11, 10, .08); }
.chart-svg .heat-1 { fill: rgba(12, 11, 10, .28); }
.chart-svg .heat-2 { fill: rgba(12, 11, 10, .5); }
.chart-svg .heat-3 { fill: rgba(12, 11, 10, .74); }
.chart-svg .heat-4 { fill: var(--b-ink); }
.chart-svg .heat-future { fill: none; stroke: rgba(12, 11, 10, .12); stroke-width: 1; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.chart-tone .chart-head strong { font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.chart-tone .chart-head .round-btn { width: 26px; height: 26px; }
.chart-tone .chart-head .round-btn .icon { width: 15px; height: 15px; }
.chart-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: .4rem 0 .15rem; font-size: clamp(1.9rem, 2.6vw, 2.6rem); line-height: 1; letter-spacing: -.035em; }
.chart-big small { font-size: .78rem; letter-spacing: 0; color: var(--muted); }
.chart-tone .sub, .chart-tone .legend { color: var(--muted); }
.chart-tone .chart-svg .dot { fill: var(--card); stroke: var(--b-ink); stroke-width: 1.5; }

/* This year vs last year: the income tracker sheet's total and averages —
   a green header card (filter, legend, table), then four green cards, each
   an ink line of the two years over this year's figure big and last year's
   beneath. */
.fy-track .legend { margin: .2rem 0 0; }
.fy-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin: .5rem 0 .7rem; }
.fy-filter label { display: flex; flex-direction: column; gap: .2rem; font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.look-bento .fy-filter select { padding: .38rem .65rem; border: 0; border-radius: 10px; background: rgba(12, 11, 10, .12); color: var(--b-ink); font: inherit; font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none; color-scheme: light; cursor: pointer; }
.look-bento .fy-filter .btn { align-self: flex-end; }
/* The Bills page's Year / Month filter, on the dark page. */
.bill-filter { margin: 0; }
.look-bento .bill-filter select { background: var(--card); color: var(--fg); color-scheme: light; }
.fy-panel { display: flex; flex-direction: column; min-width: 0; }
/* A year tracker, laid out like the Bills tab (fyBento): By day the big card
   on the left (.dash-left), the filter over the other figures two by two on
   the right. */
.fy-right { grid-column: span 14; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.fy-quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; flex: 1; }
.fy-quad .chart-card.fy-panel { grid-column: auto; }
.dash-left .fy-panel .fy-chart { display: flex; align-items: center; }
/* The tracker's header card, compact: the title, then the filter (labels
   beside their selects) and the legend on one line. */
.fy-track { padding: .75rem 1rem; }
.chart-card.wide.fy-track { justify-self: start; max-width: 100%; } /* as wide as its contents, not a long strip */
.fy-track figcaption { margin-bottom: .45rem; }
.fy-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1.4rem; }
.fy-track .fy-filter { margin: 0; align-items: center; }
.fy-track .fy-filter label { flex-direction: row; align-items: center; gap: .45rem; }
.fy-track .legend { margin: 0; }
.fy-label { margin: 0 0 .3rem; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.fy-label small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.fy-chart { flex: 1; min-height: 0; }
.fy-chart .empty { margin: 1.5rem 0; text-align: center; }
.fy-dense .chart-svg .dot { display: none; }
.fy-this { margin: .4rem 0 0; font-size: clamp(1.7rem, 2.3vw, 2.3rem); line-height: 1; letter-spacing: -.03em; }
.fy-last { margin: .25rem 0 0; font-size: .95rem; color: var(--muted); }
.fy-last small { font-size: .74rem; }

/* Bare charts, like the reference's live tracker: the marks alone (no
   grid, axes or labels; tooltips and the table carry the values). On the
   year tracker this year's line is ink with hollow dots, last year's thin
   and faint behind it. */
.fy-chart .c-grid, .fy-chart .c-tick, .fy-chart .c-axis, .fy-chart .c-label,
.fx-history .c-grid, .fx-history .c-tick, .fx-history .c-axis, .fx-history .c-label { display: none; }
.fy-chart .line.s-accent { stroke-width: 1.6; }
.fy-chart .line.s-context { stroke-width: 1.2; stroke: rgba(12, 11, 10, .3); }
.fy-chart .dot.s-context { display: none; }
.fy-chart .mark.s-context { fill: rgba(12, 11, 10, .3); } /* last year's bar, faint like its line */

/* The row page's bill: the amount big, a paid-of bar like the reference's
   Active Wallets, the client's bills as thin bars (this one in ink). */
.card.fx-green { --card: var(--b-green); }
.fx-paid { display: flex; flex-direction: column; gap: .3rem; }
.fx-paid-text { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; }
.fx-meter { display: block; height: 8px; border-radius: 999px; background: rgba(12, 11, 10, .15); overflow: hidden; }
.fx-meter-fill { display: block; height: 100%; border-radius: 999px; background: var(--b-ink); }
.fx-history { display: flex; flex-direction: column; gap: .3rem; margin-top: .4rem; }
.fx-history .fx-small { color: #1d4a2a; }

/* ── List pages (Requests, Working, To bill, Collect) in the bento look:
   the title and step left, the flow as pill tabs right (with the sheet
   sync); the count cards; then each item its own card. */
.lh { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .8rem 1.5rem; margin-bottom: 1.1rem; }
.lh h1 { margin: 0; }
.lh-title { display: flex; align-items: center; gap: .6rem; }
.lh-title form { margin: 0; }
.lh-title .round-btn { border: 0; cursor: pointer; }
.lh-title .crumbs { margin: 0; }
div.lh-title:has(> .crumbs) { margin-bottom: .6rem; }
.fx-bar div.lh-title:has(> .crumbs) { margin-bottom: 0; }
.look-bento .lh .hint { margin: .35rem 0 0; }
.lh-side { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.lh-sync { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; color: var(--fg-2); font-size: .85rem; }
.lh-sync form { margin: 0; }
@media (max-width: 700px) { .lh-side { align-items: flex-start; } }

/* Each item its own card, four across: the ID and a round arrow in the
   chosen count card's colour, the name, the key figure big in that colour,
   the pills and the uppercase action, the details small at the foot. */
.lc-grid { --tone: var(--b-mustard); display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.lc-grid.tone-overdue, .lc-grid.tone-needs-call, .lc-grid.tone-link, .lc-grid.tone-rejected, .lc-grid.tone-failed { --tone: var(--b-coral); }
.lc-grid.tone-promised, .lc-grid.tone-progress, .lc-grid.tone-issue { --tone: var(--b-purple-text); }
.lc-grid.tone-paid, .lc-grid.tone-done, .lc-grid.tone-receipt { --tone: var(--b-green); }
.lc-grid.tone-claimed, .lc-grid.tone-earlier, .lc-grid.tone-all { --tone: var(--b-slate); }
.lc-grid.tone-cancelled, .lc-grid.tone-removed, .lc-grid.tone-test { --tone: #d6d6d6; }
.lc { display: flex; flex-direction: column; gap: .35rem; min-width: 0; padding: 1rem 1.1rem; color: var(--fg); transition: transform 120ms ease, background-color 150ms ease; }
.lc:hover { background: var(--card-2); color: var(--fg); }
.lc.inactive { box-shadow: inset 0 0 0 2px rgba(12, 11, 10, .45); outline: 2px dashed rgba(12, 11, 10, .45); outline-offset: -6px; } /* off the sheet: solid, a dashed edge */
.lc-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.lc-id { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-id.mono { font-size: .95rem; }
.lc-go { flex: none; width: 30px; height: 30px; background: var(--tone); color: var(--b-ink); }
.lc-go .icon { width: 16px; height: 16px; }
.lc-name { font-size: .88rem; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-work { font-size: .78rem; }
.lc-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; margin-top: .2rem; font-size: 2rem; line-height: 1.05; letter-spacing: -.03em; color: var(--tone); }
.lc-big small { margin-right: -.3rem; font-size: .7rem; letter-spacing: 0; color: #9a9aa3; }
.lc-big.lc-word { font-size: 1.45rem; letter-spacing: -.02em; }
.lc-sub { font-size: .8rem; letter-spacing: 0; color: #b9b9c0; }
.lc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: auto; padding-top: .3rem; }
.lc-act { margin-left: auto; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tone); }
.lc-meta { font-size: .74rem; color: #9a9aa3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Requests: a colour per kind — htmlAI requests sky, PD planners violet
   (no green / red: those mean ok / wrong) — with ink text. */
.req-grid > .lc { color: var(--b-ink); --tone: var(--b-ink); }
.req-grid > .lc-html, .req-grid > .lc-html:hover { background: var(--b-sky); color: var(--b-ink); }
.req-grid > .lc-pd, .req-grid > .lc-pd:hover { background: var(--b-violet); color: var(--b-ink); }
.req-grid .lc-name, .req-grid .lc-sub, .req-grid .lc-meta, .req-grid .lc-big small { color: rgba(12, 11, 10, .7); }
.req-grid .lc-go { background: var(--b-ink); color: #fff; }
/* The request's tab, a chip of its own colour: htmlAI mustard, calf teal (no red: it means wrong). */
.req-tab { display: inline-block; padding: .05rem .45rem; border-radius: 999px; color: var(--b-ink); background: var(--b-mustard); }
.req-tab-calf { background: var(--b-teal); }
.req-grid .pill { background: rgba(12, 11, 10, .14); color: var(--b-ink); }
/* Compact: about a third of a full card — more columns, tighter padding,
   smaller type; every line kept. */
.lc-grid.req-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; }
.req-grid > .lc { gap: .12rem; padding: .55rem .7rem; border-radius: 14px; }
.req-grid .lc-id.mono { font-size: .8rem; }
.req-grid .lc-go { width: 22px; height: 22px; }
.req-grid .lc-go .icon { width: 12px; height: 12px; }
.req-grid .lc-name { font-size: .74rem; }
.req-grid .lc-big { margin-top: 0; font-size: 1.15rem; }
.req-grid .lc-big.lc-word { font-size: .95rem; }
.req-grid .lc-big small, .req-grid .lc-sub { font-size: .66rem; }
.req-grid .lc-foot { padding-top: .1rem; }
.req-grid .lc-act { font-size: .58rem; }
.req-grid .lc-meta { font-size: .64rem; }
.req-grid .pill { padding: .05rem .4rem; font-size: .62rem; }
/* Working's and Bills' cards fill with the chosen count card's colour (the
   filled top box), ink text — e.g. Working purple, Done / Paid green, No
   client / Overdue coral, On the sheet / All slate, To bill / Open yellow
   (the default), Removed / Cancelled light grey. */
.row-grid.tone-progress, .row-grid.tone-promised { --card-bg: var(--b-purple); }
.row-grid.tone-done, .row-grid.tone-paid { --card-bg: var(--b-green); }
.row-grid.tone-link, .row-grid.tone-overdue, .row-grid.tone-needs-call { --card-bg: var(--b-coral); }
.row-grid.tone-all, .row-grid.tone-claimed { --card-bg: var(--b-slate); }
.row-grid.tone-removed, .row-grid.tone-cancelled { --card-bg: #d6d6d6; }
/* Messages: the tabs' colours (bill = the default mustard), each message a
   card with its whole text and its links in ink. */
.row-grid.tone-failed { --card-bg: var(--b-coral); }
.row-grid.tone-receipt { --card-bg: var(--b-green); }
.row-grid.tone-issue { --card-bg: var(--b-purple); }
.row-grid.tone-test { --card-bg: #d6d6d6; }
.mc-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.mc a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mc .lc-name { white-space: normal; }
.mc-body { font-size: .9rem; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.mc-err { white-space: normal; color: #6b0a0a; font-weight: 600; }
.mc-retry { margin: 0 0 0 auto; }
.row-grid > .lc { --tone: var(--b-ink); }
.row-grid > .lc-wrap > .lc { --tone: var(--b-ink); } /* a card with a × (Recent bill activity) */
.row-grid > .lc, .row-grid > .lc:hover, .row-grid > .lc-wrap > .lc, .row-grid > .lc-wrap > .lc:hover { background: var(--card-bg, var(--b-mustard)); color: var(--b-ink); }
.row-grid .lc-name, .row-grid .lc-sub, .row-grid .lc-meta, .row-grid .lc-big small { color: rgba(12, 11, 10, .7); }
.row-grid .lc-go { background: var(--b-ink); color: #fff; }
.row-grid .pill { background: rgba(12, 11, 10, .14); color: var(--b-ink); }
.row-grid .pill-orange, .rows .pill-orange { background: #ff6d01; color: #fff; }
/* Bills' small cards: three lines — client + amount, the job, then the
   state, date and action. */
.bc-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.bc { gap: .2rem; padding: .55rem .7rem; border-radius: 14px; }
.bc-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.bc-top .lc-id { font-size: .85rem; }
.bc-amt { flex: none; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.bc-work { font-size: .7rem; }
.bc-foot { display: flex; align-items: center; gap: .35rem; min-width: 0; margin-top: .15rem; }
.bc-foot .pill { padding: .05rem .4rem; font-size: .64rem; }
.bc-foot .lc-meta { min-width: 0; font-size: .66rem; }
.bc-foot .lc-act { flex: none; font-size: .6rem; }
.bc-dot { display: inline-block; width: 7px; height: 7px; margin-right: .3rem; border-radius: 50%; background: var(--b-red); vertical-align: middle; }
.lc-bar { display: flex; align-items: center; justify-content: space-between; margin: 1.6rem 0 .7rem; }
.lc-bar h2 { margin: 0; font-size: 1.15rem; }

/* Settings: the Finance home's colour cards — the prices typed on their
   cards as the big figure; message and sheet cards are buttons that open
   their editors as pop-ups. */
.st-field { display: flex; align-items: baseline; gap: .3rem; padding: .05rem .7rem; border-radius: 14px; background: rgba(128, 128, 128, .18); }
.st-field:focus-within { box-shadow: inset 0 0 0 2px currentColor; }
.st-rupee { font-size: 1.4rem; }
.look-bento .st-field input { flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: clamp(1.9rem, 2.8vw, 2.6rem); line-height: 1.15; letter-spacing: -.035em; outline: none; }
button.k-card { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
.k-grid.st-k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* four to a row */
@media (max-width: 1180px) { .k-grid.st-k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .k-grid.st-k4 { grid-template-columns: minmax(0, 1fr); } }
/* Settings' text cards ("Edit", a sheet's name): smaller than a figure and
   wrapping, so the whole name and the line under it show. */
.k-value.st-k-text { font-size: clamp(1.35rem, 1.9vw, 1.75rem); line-height: 1.15; letter-spacing: -.02em; white-space: normal; overflow-wrap: anywhere; }
.k-value.st-k-text + .k-sub { margin-top: 0; }
.k-head .pill { font-size: .72rem; }
.k-card:is(.mustard, .green, .coral, .purple, .slate) .k-head .pill { background: rgba(12, 11, 10, .14); color: var(--b-ink); }
.k-head .btn.small { padding: .3rem .7rem; font-size: .8rem; }
.st-pop { box-shadow: 0 24px 80px rgba(0, 0, 0, .6); }
.st-pop-form { display: flex; flex-direction: column; gap: .6rem; }
.st-pop textarea { width: 100%; min-height: 6rem; resize: vertical; font: inherit; font-size: .92rem; line-height: 1.45; }
.st-pop input[name="sheet"] { width: 100%; }
.st-note { margin: 0; font-size: .82rem; color: var(--fg-2); }
.st-ph code { font-size: .8rem; }
.st-err { color: var(--bad); }
.st-lead { margin: -.3rem 0 .8rem; }
.st-btns { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: auto; }
.st-bubble { margin: .2rem 0 0; padding: .8rem .95rem; border-radius: 4px 16px 16px 16px; background: #ffffff; color: #111; font-size: .92rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 0 rgba(12, 11, 10, .12); }
.st-card code { padding: 0 .25rem; border-radius: 5px; background: rgba(127, 127, 127, .2); font-size: .85em; }
@media (max-width: 560px) { .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── The Project dashboard, after the operator's reference img_4.png ──────
   (Finance is the Reports page now.) outlined pill
   labels, a paper / olive / lavender / orange palette beside the mustard,
   thin bars, big plain figures, rows that fade. Contrast checked with the
   dataviz validator: ink on paper 15.4, olive 6.8 (the reference's #7d7614
   was 4.2, lifted), lavender 7.7, orange 6.3. */
body:has(main.look-bento) { --b-paper: #dfe6dc; --b-olive: #a49b2c; --b-lavender: #a99bc8; --b-orange: #ff5a1f; }

.pill-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pill-nav form { margin: 0; }
.pill-nav a, .pill-nav-btn {
  display: inline-flex; align-items: center; gap: .35rem; padding: .42rem 1rem; border: 1.5px solid var(--fg);
  border-radius: 999px; background: none; color: var(--fg); font: inherit; font-size: .92rem; cursor: pointer;
}
.pill-nav a:hover, .pill-nav-btn:hover { color: var(--b-mustard); border-color: var(--b-mustard); }
.pill-nav a[aria-current="page"] { background: #fff; color: var(--b-ink); }
.pill-nav-btn { padding: .42rem .55rem; }
.pill-nav-btn .icon { width: 18px; height: 18px; }

/* An outlined pill label: "Your Saving", "Growth", "Account" in the references. */
.pill-o { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; padding: .28rem .9rem; border: 1.5px solid currentColor; border-radius: 999px; font-size: .95rem; font-weight: 500; color: inherit; white-space: nowrap; }
.pill-o .icon { width: 16px; height: 16px; }
.pill-o.wide { align-self: stretch; justify-content: center; margin-top: auto; padding: .45rem .9rem; }
a.pill-o:hover { color: inherit; background: rgba(12, 11, 10, .08); }
.pill-o.light { color: var(--fg); }

/* The dashboards' head: the title and date left, the pills right. */
.f5-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.f5-top h1 { margin: 0; }
.f5-top .sub { margin: .3rem 0 0; color: var(--fg-2); }
.f5-top > .tabs { margin-bottom: 0; }

/* Project's coloured cards and their pieces. */
.p4-olive { display: flex; flex-direction: column; gap: .7rem; color: var(--b-ink); }
.p4-olive {
  background: var(--b-olive);
  --card: var(--b-olive); --muted: #2e2b08; --fg-2: var(--b-ink); --line: rgba(12, 11, 10, .18);
  --chart-accent: var(--b-ink); --chart-grid: rgba(12, 11, 10, .12); --chart-axis: rgba(12, 11, 10, .3);
}
.p4-lavender { background: var(--b-lavender); color: var(--b-ink); }
.p4-orange { background: var(--b-orange); color: var(--b-ink); }
.f5-note { margin: 0; font-size: .85rem; line-height: 1.35; }
.seg-nav { flex: none; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--b-ink); font-size: .8rem; }
.seg-nav a { padding: .2rem .65rem; border-radius: 999px; color: var(--b-olive); }
.seg-nav a[aria-current="true"] { background: var(--b-olive); color: var(--b-ink); box-shadow: inset 0 0 0 1px var(--b-ink); }
a.seg-nav.single { padding: .3rem .85rem; color: var(--b-olive); }
.f5-sliders, .f5-sliders:hover { color: var(--b-ink); }
.f5-sliders .icon { width: 24px; height: 24px; }
.f5-menu { list-style: none; margin: 0; padding: 0; }
.f5-menu a { display: flex; align-items: center; gap: .7rem; padding: .3rem 0; font-size: 1.25rem; letter-spacing: -.01em; color: var(--b-ink); }
.f5-menu a:hover { color: var(--b-ink); opacity: .7; }
.f5-menu .icon { flex: none; width: 22px; height: 22px; }
.f5-menu span { margin-left: auto; font-size: .95rem; font-variant-numeric: tabular-nums; }

/* Project: three columns of cards. */
.p4 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.p4-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.p4 form { margin: 0; }
.look-bento .p4-day h1.title-word { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 500; font-size: clamp(3rem, 5vw, 4.6rem); letter-spacing: -.035em; color: var(--fg); }
.p4-date { margin: .15rem 0 0; font-size: 1.6rem; color: #8f8f8f; }
.p4-cal { padding: .3rem .1rem; }
.p4-week { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1.5px solid #e6e6e6; }
.p4-week-head { border-top: 0; padding-bottom: .3rem; font-size: .68rem; text-transform: uppercase; color: var(--muted); text-align: center; }
.p4-d { position: relative; padding: .3rem 0; text-align: center; font-size: 1.3rem; color: var(--fg); }
.p4-d.done { color: var(--b-up); }
.p4-d.req::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--b-mustard); }
.p4-d.today { color: var(--b-ink); background: radial-gradient(circle at center, var(--b-orange) 0 1rem, transparent 1.05rem); }
.p4-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .5rem 0 0; font-size: .75rem; color: var(--muted); }
.p4-key .key::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .35rem; border-radius: 50%; vertical-align: middle; }
.p4-key .key.req::before { background: var(--b-mustard); }
.p4-key .key.done::before { background: var(--b-up); }
/* The Project dashboard's Finished card, compact: a smaller figure, slim
   bars, tight spacing (the f5-* parts stay full size on Finance). */
.p4-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.p4-two b { display: block; font-size: 1.6rem; font-weight: 500; }
.p4-small { display: block; font-size: .78rem; font-weight: 600; }
.p4-slider { position: relative; display: block; height: 3px; margin: 1rem 0 .55rem; background: var(--b-ink); }
.p4-slider-fill { position: relative; display: block; height: 100%; }
.p4-slider-fill::after { content: ""; position: absolute; right: -9px; top: -8px; width: 18px; height: 18px; border: 3px solid var(--b-ink); border-radius: 50%; background: var(--b-mustard); }
.p4-slider.dark .p4-slider-fill::after { background: var(--b-lavender); }
.p4-rows { list-style: none; margin: 0; padding: 0; }
.p4-rows a { display: flex; align-items: baseline; gap: .7rem; padding: .32rem 0; border-top: 1px solid rgba(12, 11, 10, .2); color: var(--b-ink); font-size: .95rem; }
.p4-rows li:first-child a { border-top: 0; }
.p4-row-sub { font-size: .78rem; opacity: .7; }
.p4-link { margin-left: auto; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.p4-rows a:hover { color: var(--b-ink); opacity: .7; }
.p4-paper { background: var(--b-paper); color: var(--b-ink); --fg: var(--b-ink); --fg-2: #2a2e28; --muted: #4a4f48; --line: rgba(12, 11, 10, .12); --accent: var(--b-ink); }
.p4-big { margin: .2rem 0; font-size: clamp(3rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -.04em; }
.p4-look, a.p4-look:hover { display: block; padding: .12rem 0; font-size: .85rem; color: var(--b-ink); }
.p4-goal { display: flex; justify-content: space-between; gap: .6rem; font-size: .7rem; }
.p4-pillcard { display: flex; align-items: center; gap: .9rem; width: 100%; padding: .5rem 1.2rem .5rem .5rem; border: 0; border-radius: 999px; font: inherit; font-size: 1.25rem; text-transform: uppercase; letter-spacing: -.01em; color: var(--b-ink); text-align: left; cursor: pointer; }
.p4-pillcard:hover { color: var(--b-ink); filter: brightness(1.05); }
.p4-pillcard.paper { background: var(--b-paper); }
.p4-pillcard.orange { background: var(--b-orange); }
.p4-pillcard.lavender { background: var(--b-lavender); }
.p4-pillcard.violet { background: var(--b-violet); }

/* Project's palette: a colour per card, vivid, ink text on every one —
   orange (work), yellow (the totals), teal, violet, green, sky and pink. */
body:has(main.look-bento) { --b-teal: #2fd4c4; --b-violet: #b49cff; --b-sky: #5ab8ff; --b-pink: #ff86b3; }
.card.p4-teal { background: var(--b-teal); --card: var(--b-teal); --muted: #0b3b37; }
.card.p4-violet { background: var(--b-violet); --card: var(--b-violet); }
.card.p4-green { background: var(--b-green); --card: var(--b-green); --muted: #12401f; }
.card.p4-pink { background: var(--b-pink); --card: var(--b-pink); --muted: #4d1027; }
.card.p4-pink .pill { background: rgba(12, 11, 10, .14); color: var(--b-ink); }
.p4-round { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--b-ink); color: #fff; font-size: 1.2rem; font-weight: 700; }
.p4-round .icon { width: 20px; height: 20px; }

@media (max-width: 1180px) {
  .p4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .p4 { grid-template-columns: minmax(0, 1fr); }
}
.p4-round { text-transform: none; }
.look-bento .card-head a.f5-sliders, .look-bento .card-head a.f5-sliders:hover { color: var(--b-ink); }
.look-bento .card-head a.seg-nav.single { color: var(--b-olive); }

/* Recent bill activity: each card with a small × in its top-right corner
   that takes it off the list. */
.lc-wrap { position: relative; display: flex; min-width: 0; }
.lc-wrap > .lc { flex: 1; min-width: 0; }
.lc-x { position: absolute; top: -6px; right: -6px; margin: 0; z-index: 2; }
.lc-x button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: #3a3a40; color: #e8e8ec; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.lc-x button:hover { background: var(--b-red); color: #fff; }
.lc-x .icon { width: 12px; height: 12px; }

/* bp's question popup (every admin page) and the bp log page. */
.bp-ask { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 1rem; background: rgba(0, 0, 0, .55); }
.bp-ask[hidden] { display: none; }
.bp-ask-card { width: min(560px, 100%); max-height: 86vh; overflow-y: auto; display: flex; flex-direction: column; gap: .7rem;
  background: var(--b-mustard); color: var(--b-ink); border-radius: 26px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.bp-ask-card h2 { color: var(--b-ink); }
.bp-ask-card .round-btn { background: var(--b-ink); color: var(--b-mustard); }
.bp-ask-text { margin: 0; font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.bp-ask-ctx { margin: 0; padding: .6rem .75rem; max-height: 12rem; overflow: auto; border-radius: 12px; background: rgba(12, 11, 10, .1);
  font-size: .8rem; line-height: 1.4; white-space: pre-wrap; }
.bp-ask-ctx:empty { display: none; }
.bp-ask-opts { display: flex; flex-wrap: wrap; gap: .45rem; }
.bp-ask-opts button { padding: .45rem .85rem; border: 0; border-radius: 999px; background: var(--b-ink); color: var(--b-mustard); font: inherit; font-size: .9rem; cursor: pointer; }
.bp-ask-form { display: flex; gap: .5rem; }
.bp-ask-form input { flex: 1; min-width: 0; background: rgba(12, 11, 10, .12); color: var(--b-ink); border-color: transparent; }
.bp-ask-card .hint { margin: 0; font-size: .78rem; color: #3a3a1a; }
.bp-bar { justify-content: flex-start; }
.look-bento .work-tabs { margin-top: -.4rem; }
.bp-log-card { margin-top: 1rem; }
.bp-log { margin: 0; max-height: 65vh; overflow: auto; padding: 0; color: var(--fg-2);
  font-size: .76rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
  scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
/* bp's terminal colours in the theme (bprun.LogHTML): success is the normal
   case, so it reads as plain text; only warnings and errors keep a colour.
   Its label boxes become the theme's soft pills. */
.bp-log .lg-ok, .bp-log .lg-info, .bp-log .lg-purple, .bp-log .lg-ink { color: inherit; }
.bp-log .lg-warn { color: var(--warn); }
.bp-log .lg-bad { color: var(--bad); }
.bp-log .lg-muted { color: var(--muted); }
.bp-log .lg-b { font-weight: 500; }
.bp-log .lb { padding: .08rem .55rem; border-radius: 999px; font-weight: 600; letter-spacing: .01em; }
.bp-log .lb-ok { background: var(--ok-bg); color: var(--ok); }
.bp-log .lb-warn { background: var(--warn-bg); color: var(--warn); }
.bp-log .lb-bad { background: var(--bad-bg); color: var(--bad); }
.bp-log .lb-info { background: var(--info-bg); color: var(--info); }
.bp-log .lb-purple { background: var(--info-bg); color: var(--b-purple-text); }
.bp-log .lb-muted, .bp-log .lb-fg { background: var(--plain-bg); color: var(--fg-2); }

/* Working: the bp controls, then the rows (small two-line tiles). */
.work-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.work-left .bp-bar { margin-bottom: 0; }
.work-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.look-bento .work-tile { display: flex; flex-direction: column; gap: .35rem; padding: .55rem .75rem; border-radius: 14px;
  background: var(--card); color: var(--fg); text-decoration: none; border: 1px solid transparent; transition: border-color 150ms ease; }
.look-bento .work-tile:hover { border-color: var(--accent); }
.work-tile.has-issue { border-left: 3px solid var(--b-red); }
/* Each sheet type its own colour (ink text): two blue, pd purple, primecamp
   green, repeatcamp yellow, boostcamp coral, any other slate. */
.look-bento .work-tile { background: var(--b-slate); color: var(--b-ink); }
.look-bento .work-tile.sheet-two { background: #7fb2ff; }
.look-bento .work-tile.sheet-pd { background: var(--b-purple); }
.look-bento .work-tile.sheet-primecamp { background: var(--b-green); }
.look-bento .work-tile.sheet-repeatcamp { background: var(--b-mustard); }
.look-bento .work-tile.sheet-boostcamp { background: var(--b-coral); }
.look-bento .work-tile:hover { border-color: var(--b-ink); }
.work-tile.has-issue { border-left-color: var(--b-ink); }
.work-tile .work-tile-sheet, .work-tile .work-tile-status { color: rgba(12, 11, 10, .72); }
.work-tile .pill-bad { background: var(--b-ink); color: #ff9b85; }
.work-tile-top { display: flex; align-items: baseline; gap: .4rem; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-tile-sheet { font-size: .7rem; color: var(--muted); }
.work-tile-status { font-size: .78rem; color: var(--fg-2); }
.work-tile-status .pill { font-size: .68rem; }

/* bp's log as a feed (bprun.LogHTML): one entry per line — the label pill,
   the message, user · time beneath, every detail line shown; banners as a rule. */
.bp-feed { display: flex; flex-direction: column; gap: 2px; padding: .4rem; font-family: inherit; font-size: .82rem; white-space: normal; }
.bp-feed .empty { margin: .6rem; }
.lg-entry { padding: .5rem .4rem; border-bottom: 1px solid var(--line, rgba(255, 255, 255, .06)); }
.lg-entry:last-child { border-bottom: 0; }
.lg-line { display: flex; align-items: baseline; gap: .55rem; }
.lg-line .lb { flex: none; min-width: 4.6rem; text-align: center; font-size: .7rem; padding: .05rem .4rem; }
.lg-msg { min-width: 0; overflow-wrap: anywhere; color: var(--fg); font-size: .84rem; }
.lg-meta { margin: .1rem 0 0 5.15rem; font-size: .68rem; color: var(--muted); }
.lg-detail, .lg-block { margin: .3rem 0 0 5.15rem; font-size: .72rem; line-height: 1.45; color: var(--muted); }
.lg-block { margin: .2rem .6rem; }
.bp-feed pre { margin: 0; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); white-space: pre; overflow-x: auto; }
/* A block-letter banner (COMPLETED, GET READY …) as a thin accent rule. */
.lg-banner { display: flex; align-items: center; gap: .6rem; margin: .5rem .4rem; color: var(--accent); font-size: .8rem; }
.lg-banner::before, .lg-banner::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .45; }

/* bp's approval gates (posting=READY …): green, stacked bottom-right, never modal. */
.bp-gates { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; display: flex; flex-direction: column; gap: .6rem; width: min(360px, calc(100vw - 2rem)); }
.bp-gate { background: linear-gradient(var(--ok-bg), var(--ok-bg)), var(--card, #fff); border: 2px solid var(--ok); border-radius: 14px; padding: .8rem .9rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.bp-gate.busy { opacity: .6; pointer-events: none; }
.bp-gate-title { margin: 0; font-size: 1rem; color: var(--ok); }
.bp-gate-title strong { color: inherit; }
.bp-gate-sub { margin: .25rem 0 .6rem; font-size: .8rem; opacity: .8; overflow-wrap: anywhere; }
.bp-gate-btns { display: flex; gap: .5rem; }
.bp-gate .btn.ok { background: var(--ok); color: #fff; border-color: var(--ok); }


/* bp's log on a dark-blue panel (light text). The theme's colours are
   re-pointed inside it so every tone stays readable on the navy: light text,
   light green / amber / red / blue for the pills and messages, a light rule
   for banners. */
.look-bento .log-panel {
  --log-bg: #0f3470;
  background: var(--log-bg); color: #f2f4f8;
  --fg: #f2f4f8; --fg-2: rgba(242, 244, 248, .9); --muted: rgba(242, 244, 248, .62);
  --line: rgba(242, 244, 248, .18); --accent: #f2f4f8;
  --ok: #7ee2a0; --ok-bg: rgba(126, 226, 160, .16);
  --warn: #ffd36b; --warn-bg: rgba(255, 211, 107, .16);
  --bad: #ff9a8a; --bad-bg: rgba(255, 154, 138, .16);
  --info: #a8d0ff; --info-bg: rgba(168, 208, 255, .16);
  --plain-bg: rgba(242, 244, 248, .1); --b-purple-text: #cdb8ff;
}
.look-bento .log-panel .card-head h2 { color: #f2f4f8; }
.look-bento .log-panel .round-btn { background: #f2f4f8; color: var(--log-bg); }
.look-bento .log-panel .bp-log { scrollbar-color: rgba(242, 244, 248, .35) transparent; }

/* ── The Project dashboard's day timeline and month browsing ─────────────
   The timeline is a CSS grid of hour columns (09:00–20:00; col-1 … col-11,
   each chip two hours wide); the month calendar's days open their day; a
   paid day is green; last year's line rides the Finished chart. No inline
   styles (the CSP). */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.flip { display: inline-grid; transform: scaleX(-1); }

a.p4-d { display: block; border-radius: 999px; }
a.p4-d:hover { background: rgba(242, 242, 242, .1); }
.p4-d.pay::before { content: ""; position: absolute; left: 50%; bottom: 1px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--b-sky); }
.p4-d.pay.req::before { margin-left: 1.5px; }
.p4-d.pay.req::after { margin-left: -6.5px; }
.p4-d.picked { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.p4-key .key.pay::before { background: var(--b-sky); }
/* The Messages page: a third for the calendar (the Project page's, in a
   card of its own) and the filter tabs three across, two thirds for the
   messages, three across in smaller cards. */
.msg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; align-items: start; }
.msg-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.msg-cal { margin: 0; padding: .9rem 1rem; }
.look-bento .msg-side .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.look-bento .msg-side .tabs a { min-width: 0; min-height: 4.6rem; padding: .7rem .85rem; }
.look-bento .msg-side .tabs .count { font-size: 1.7rem; }
.msg-main { min-width: 0; }
.msg-main .mc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.msg-main .mc { gap: .25rem; padding: .75rem .85rem; }
.msg-main .mc .lc-name { font-size: .8rem; }
.msg-main .mc-body { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; line-height: 1.35; }
@media (max-width: 1180px) { .msg-main .mc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .msg-split { grid-template-columns: minmax(0, 1fr); } }
.msg-cal .p4-key a { margin-left: auto; color: var(--b-mustard); }
.msg-day { margin: 0 0 .6rem; }
.p4-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-top: .6rem; color: var(--fg); }
.p4-cal-nav .round-btn { background: none; border: 1.5px solid var(--fg); color: var(--fg); }

.p4-green .chart-svg .line.s-context { stroke: rgba(12, 11, 10, .45); stroke-width: 1.6; }
.p4-green .chart-svg .dot.s-context { fill: rgba(12, 11, 10, .45); }
.p4-green .key .line.s-context { stroke: rgba(12, 11, 10, .45); }

.p4-timer { flex-wrap: wrap; row-gap: 0; }
.p4-clock { font-size: 1.6rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.p4-clock.idle { opacity: .55; }
.p4-timer small { flex-basis: 100%; padding-left: 3.4rem; font-size: .8rem; opacity: .7; }

.p4-daycard { margin-top: 18px; }
.p4-daycard .card-head { flex-wrap: wrap; }
.p4-daycard .cal-people { margin-left: auto; }
.day-nav { display: flex; gap: .4rem; }
.p4-day h1 a, .p4-date a { color: inherit; }
.p4-day h1 a:hover, .p4-date a:hover { color: inherit; opacity: .8; }
.cal-people { display: flex; }
.cal-people .avatar { width: 34px; height: 34px; margin-left: -8px; background: var(--b-mustard); border: 2px solid var(--card); font-size: .72rem; }
.cal-people .avatar:nth-child(2) { background: var(--b-paper); }
.cal-people .avatar:nth-child(3) { background: var(--b-slate); }
.cal-people .avatar.more { background: var(--b-ink); color: #fff; }
.cal-tl {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 10px 6px;
  padding-bottom: .4rem; overflow-x: auto;
  background: repeating-linear-gradient(to right, transparent 0 calc(100% / 12 - 1px), var(--line) calc(100% / 12 - 1px) calc(100% / 12));
}
.cal-hour { grid-row: 1; text-align: center; font-size: .78rem; color: var(--muted); padding: .2rem 0; border-radius: 999px; }
.cal-hour.now { background: var(--b-paper); color: var(--b-ink); font-weight: 600; }
.cal-ev { display: flex; flex-direction: column; gap: .15rem; padding: .45rem .6rem; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); font-size: .82rem; min-width: 0; }
.cal-ev b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev.tone-req { background: var(--b-mustard); color: var(--b-ink); border-color: transparent; }
.cal-ev.tone-ok { background: var(--b-paper); color: var(--b-ink); border-color: transparent; }
.cal-ev.tone-pay { background: var(--b-green); color: var(--b-ink); border-color: transparent; }
.cal-ev.tone-req small, .cal-ev.tone-ok small, .cal-ev.tone-pay small { color: rgba(12, 11, 10, .7); }
.cal-ev.col-1 { grid-column: 1 / span 2; } .cal-ev.col-2 { grid-column: 2 / span 2; } .cal-ev.col-3 { grid-column: 3 / span 2; }
.cal-ev.col-4 { grid-column: 4 / span 2; } .cal-ev.col-5 { grid-column: 5 / span 2; } .cal-ev.col-6 { grid-column: 6 / span 2; }
.cal-ev.col-7 { grid-column: 7 / span 2; } .cal-ev.col-8 { grid-column: 8 / span 2; } .cal-ev.col-9 { grid-column: 9 / span 2; }
.cal-ev.col-10 { grid-column: 10 / span 2; } .cal-ev.col-11 { grid-column: 11 / span 2; }
@media (max-width: 700px) { .cal-tl { grid-template-columns: repeat(12, 90px); } }

/* ── Phones: full-width cards ─────────────────────────────────────────────
   Last in the file so it wins over the grids above. The count cards share
   the row in thirds instead of running off the right edge, and the request /
   Working / message cards go one to a row at full size, not two squeezed. */
@media (max-width: 600px) {
  .look-bento .tabs:not(.tabs-compact) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-left: 0; margin-right: 0; padding: 0; }
  .look-bento .tabs:not(.tabs-compact) a { min-width: 0; min-height: 4.8rem; padding: .75rem .85rem; border-radius: 18px; }
  .look-bento .tabs:not(.tabs-compact) .count { font-size: 1.75rem; }
  .lc-grid, .lc-grid.req-grid, .work-tiles, .msg-main .mc-grid { grid-template-columns: minmax(0, 1fr); }
  .req-grid > .lc { gap: .25rem; padding: .9rem 1rem; border-radius: 18px; }
  .req-grid .lc-id.mono { font-size: .95rem; }
  .req-grid .lc-go { width: 30px; height: 30px; }
  .req-grid .lc-go .icon { width: 16px; height: 16px; }
  .req-grid .lc-name { font-size: .88rem; }
  .req-grid .lc-big { font-size: 1.6rem; }
  .req-grid .lc-big.lc-word { font-size: 1.2rem; }
  .look-bento .work-tile { padding: .8rem 1rem; }
}

/* ─── Home (reports.html: wmHome), after the operator's chosen reference
   design (Look 2, dashboard/design/dash/look2-reference.webp): white cards on light grey, a cornflower blue, a fresh
   green and ink black; the dark theme keeps them on dark cards. */
.wm {
  --wm-bg: #f2f3f5; --wm-card: #ffffff; --wm-soft: #f4f5f7; --wm-line: #e7e8eb; --wm-fg: #111114; --wm-muted: #8a8d94;
  --wm-blue: #4a7cf6; --wm-green: #5bd33c; --wm-ink: #0d0d0f; --wm-on-ink: #ffffff; --wm-red: #f25c54; --wm-grey: #e4e5e8;
  color: var(--wm-fg); background: var(--wm-bg); border-radius: 28px; padding: 22px; margin: -.6rem -.4rem 0;
}
.wm a { color: inherit; text-decoration: none; }
.wm .icon { width: 18px; height: 18px; }
.wm-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; }
.wm-hello h1 { margin: 0; font-size: 2rem; font-weight: 600; letter-spacing: -.02em; }
.wm-hello p { margin: .2rem 0 0; color: var(--wm-muted); }
.wm-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wm-date { display: flex; align-items: center; gap: 12px; padding: 5px 18px 5px 5px; border-radius: 999px; background: var(--wm-card); font-size: 1.02rem; }
.wm-date-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #0d0d0f; color: #fff; }
.wm-round { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--wm-card); border: 1px solid var(--wm-line); }
.wm-card .wm-round { width: 40px; height: 40px; }
.wm-round:hover { border-color: var(--wm-blue); }
.wm-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--wm-red); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.wm-avatar { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--wm-blue); color: #fff; font-weight: 700; font-size: 1.05rem; }
.wm-tabs { display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: center; padding: 8px 10px; margin-bottom: 14px; border-radius: 22px; background: var(--wm-soft); }
.wm-tabs a { padding: .6rem 1.4rem; border-radius: 999px; color: var(--wm-muted); font-size: 1.05rem; }
.wm-tabs a:hover { color: var(--wm-fg); }
.wm-tabs a[aria-current] { background: var(--wm-blue); color: #fff; }

.wm-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.wm-card { background: var(--wm-card); border-radius: 24px; padding: 18px 20px; min-width: 0; }
.wm-card h2 { margin: 0; font-size: 1.45rem; font-weight: 500; letter-spacing: -.01em; }
.wm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.wm-muted { color: var(--wm-muted); }
.wm svg { display: block; width: 100%; height: auto; }
.wm svg text { font-family: inherit; }
.wm-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 10px 0 0; padding: 0; font-size: .92rem; }
.wm-legend li { display: flex; align-items: center; gap: 8px; }
.wm-legend i { width: 12px; height: 12px; border-radius: 50%; }
.wm-legend.wm-stack { flex-direction: column; gap: 14px; margin-top: auto; }
.wm-legend.wm-center { justify-content: center; }
i.wm-blue { background: var(--wm-blue); } i.wm-green { background: var(--wm-green); } i.wm-ink { background: var(--wm-ink); } i.wm-grey { background: var(--wm-grey); }
.wm rect.wm-blue, .wm circle.wm-blue { fill: var(--wm-blue); }
.wm rect.wm-green { fill: var(--wm-green); }
.wm rect.wm-ink { fill: var(--wm-ink); }
.wm rect.wm-red { fill: var(--wm-red); }
.wm-hatch-bg { fill: var(--wm-soft); }
.wm-hatch-line { stroke: var(--wm-grey); stroke-width: 4; }
.wm-pills .wm-hatch { fill: url(#wm-hatch); }
.wm-timeline .wm-hatch { fill: url(#wm-hatch2); }
.wm-tick { fill: var(--wm-muted); font-size: 13px; }
.wm-tick.is-today { fill: var(--wm-fg); font-weight: 700; }

/* Row 1: the black next-up card and three white number cards. */
.wm-next { grid-column: span 3; position: relative; overflow: hidden; background: #0d0d0f; color: #fff;
  background-image: radial-gradient(circle at 92% 0%, rgba(74, 124, 246, .9) 0 18%, transparent 38%), radial-gradient(circle at 70% 10%, rgba(91, 211, 60, .7) 0 8%, transparent 22%); }
.wm-next-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.wm-white-round { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--wm-blue); }
.wm-white-round .icon { width: 24px; height: 24px; }
.wm-switches { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; font-size: .8rem; }
.wm-switches > span { display: flex; align-items: center; gap: 8px; }
.wm-switches form { display: flex; }
.wm .toggle { width: 40px; height: 24px; background: rgba(255, 255, 255, .2); }
.wm .toggle::after { top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; }
.wm .toggle.on { background: var(--wm-green); }
.wm .toggle.on::after { left: 19px; }
.wm-next h2 { margin: 1.6rem 0 .8rem; font-size: 1.9rem; color: #fff; }
.wm-next-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.wm-next-chips a { display: inline-flex; align-items: center; gap: 6px; padding: .45rem .9rem; border-radius: 999px; background: #fff; color: #111; font-weight: 600; }
.wm-next-chips a span { font-weight: 400; }
.wm-next-chips a.is-dark { background: rgba(255, 255, 255, .16); color: #fff; }
.wm-next-chips .icon { width: 15px; height: 15px; }
.wm-kpi { grid-column: span 3; display: flex; flex-direction: column; gap: 6px; }
.wm-kpi-top { display: flex; justify-content: space-between; margin-bottom: auto; }
.wm-kpi-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--wm-soft); color: var(--wm-blue); }
.wm-kpi-label { margin-top: 1.4rem; font-size: 1.1rem; }
.wm-kpi b { font-size: 2.1rem; font-weight: 600; letter-spacing: -.02em; }
.wm-kpi small { display: flex; align-items: center; gap: 6px; color: var(--wm-muted); font-size: .88rem; }
.wm-kpi em { font-style: normal; font-weight: 600; }
.wm-kpi em.is-up { color: #2fa714; } .wm-kpi em.is-down { color: var(--wm-red); }
.wm-up { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--wm-green); color: #fff; }
.wm-up.is-down { background: var(--wm-red); }
.wm-up .icon { width: 13px; height: 13px; }

/* Row 2: the collection rate's pill bars beside the day grid. */
.wm-deals { grid-column: span 6; }
.wm-deals-body { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr); gap: 12px; }
.wm-deals-text { display: flex; flex-direction: column; gap: 8px; padding-top: 2rem; }
.wm-big { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 3.4rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.wm-big .wm-up { width: 32px; height: 32px; }
.wm-big .wm-up .icon { width: 18px; height: 18px; }
.wm-sched { grid-column: span 6; }
.wm-chip { display: inline-flex; align-items: center; gap: 8px; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--wm-line); font-size: .95rem; }
.wm-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.wm-wd { text-align: center; font-size: .92rem; padding: .2rem 0 .3rem; }
.wm-day { min-height: 104px; border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; background: var(--wm-soft); }
.wm-day b { font-size: 1.15rem; font-weight: 600; }
.wm-day span { font-size: .85rem; margin-top: auto; }
.wm-day small { font-size: .74rem; opacity: .85; }
.wm-day.is-empty { align-items: center; justify-content: center; text-align: center; }
.wm-day.is-empty span { margin: 0; font-size: .82rem; }
.wm-day-dim { color: var(--wm-muted); font-weight: 500 !important; font-size: .95rem !important; }
.wm-day.is-soon { opacity: .55; }
.wm-day.wm-blue { background: var(--wm-blue); color: #fff; }
.wm-day.wm-green { background: var(--wm-green); color: #fff; }
.wm-day.wm-ink { background: var(--wm-ink); color: var(--wm-on-ink); }
.wm-day.is-today { outline: 3px solid var(--wm-blue); outline-offset: 2px; }
.wm-day.wm-blue.is-today { outline-color: var(--wm-ink); }

/* Row 3: the timeline, the gauge and what's owed. */
.wm-timeline { grid-column: span 3; }
.wm-grid-line { stroke: var(--wm-line); stroke-dasharray: 3 5; }
.wm-today { stroke: var(--wm-blue); stroke-width: 2; }
.wm-today-dot { fill: var(--wm-card); stroke: var(--wm-blue); stroke-width: 2; }
.wm-task { fill: #fff; font-size: 12px; pointer-events: none; }
.wm-timeline rect.wm-ink + .wm-task { fill: var(--wm-on-ink); }

@media (max-width: 1200px) {
  .wm-next { grid-column: span 12; }
  .wm-kpi { grid-column: span 4; }
  .wm-deals, .wm-sched { grid-column: span 12; }
  .wm-timeline { grid-column: span 6; }
}
@media (max-width: 760px) {
  .wm { padding: 12px; margin: 0; }
  .wm-grid > * { grid-column: span 12 !important; }
  .wm-deals-body { grid-template-columns: minmax(0, 1fr); }
  .wm-hello h1 { font-size: 1.5rem; }
}

/* ─── Look 2 everywhere (2026-10-28) ─────────────────────────────────────
   Every admin page in Home's look (wmHome): light grey page, white cards,
   sans-serif titles, cornflower-blue pills for what's chosen, ink-black
   buttons with white text, round white buttons with a hairline. The colour
   blocks keep their fills (blue / green / ink via the --b-* tokens above). */
.look-bento h1, .look-bento .title-word {
  font-family: inherit; font-weight: 600; color: var(--fg); letter-spacing: -.02em;
}
.look-bento h1 { font-size: clamp(1.7rem, 2.4vw, 2.1rem); line-height: 1.15; }
.look-bento .title-word { font-size: clamp(2.2rem, 3.6vw, 3.2rem); }
.look-bento .card h2, .look-bento .card-head h2 { font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em; }
.look-bento .card { border-radius: 24px; }
.look-bento .btn { background: var(--b-ink); border-color: var(--b-ink); color: #fff; border-radius: 999px; }
.look-bento .btn:hover { color: #fff; filter: none; opacity: .88; }
.look-bento .btn.primary { background: var(--b-mustard); border-color: var(--b-mustard); color: #fff; }
.look-bento .btn.primary:hover { color: #fff; }
.look-bento .btn.ink, .look-bento .btn.ink:hover { color: #fff; }
.look-bento .btn.danger { background: var(--card); border-color: var(--line); color: var(--b-down); }
.look-bento .btn.link { background: none; border: 0; color: var(--fg-2); }
.look-bento .tabs a { background: var(--card); color: var(--muted); border-radius: 999px; }
.look-bento .tabs a:hover { color: var(--fg); }
.look-bento .tabs a[aria-current="page"] { background: var(--b-mustard); border-color: var(--b-mustard); color: #fff; }
.look-bento .tabs a[aria-current="page"] .count { color: #fff; }
.look-bento .round-btn { background: var(--card); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.look-bento .card[class*="fx-"] .round-btn, .look-bento .hero .round-btn, .look-bento .k-card .round-btn { background: #fff; color: var(--b-ink); box-shadow: none; }
.look-bento input, .look-bento select, .look-bento textarea { background: var(--card-2); border-color: var(--line); color: var(--fg); color-scheme: light; }
.look-bento .bill-filter select { color: var(--fg); color-scheme: light; }
.look-bento .crumbs, .look-bento .crumbs a { color: var(--muted); }
.look-bento .fx-pop { background: var(--card); color: var(--fg); box-shadow: 0 24px 60px rgba(17, 17, 20, .18); }
:root .fx-pop .chart-svg .dot { stroke: var(--card); }
.look-bento > .flash { box-shadow: 0 12px 32px rgba(17, 17, 20, .16); }
.look-bento .pill-nav a, .look-bento .pill-nav button { border-color: var(--line); color: var(--fg-2); }
.look-bento .pill-nav a[aria-current="page"] { background: var(--b-mustard); border-color: var(--b-mustard); color: #fff; }
.look-bento .k-card:not(.mustard, .coral, .purple, .green, .slate) { background: var(--card); color: var(--fg); }
.look-bento .k-card.add .k-value { color: var(--fg); }
@media (prefers-reduced-motion: no-preference) {
  .motion main .card:not([popover]):hover { box-shadow: 0 16px 32px -14px rgba(17, 17, 20, .22); }
}

/* The sidebar: a white rail, the chosen page an ink-black pill. */
body.app:has(main.look-bento) .sidebar { background: #ffffff; border-right: 1px solid #e7e8eb; }
body.app:has(main.look-bento) .side-nav a { border-radius: 999px; }
body.app:has(main.look-bento) .side-nav a[aria-current="page"] { background: var(--b-ink); color: #fff; }
body.app:has(main.look-bento) .brand-mark { color: var(--b-mustard); }

/* The other colour blocks (Project, the Finance charts, request chips) take
   Look 2's palette too: blues, greens and soft grey. */
body:has(main.look-bento) {
  --b-orange: #4a7cf6; --b-olive: #c9f2b8; --b-lavender: #a9c2ff; --b-paper: #f4f5f7;
  --b-teal: #c9f2b8; --b-violet: #a9c2ff; --b-sky: #a9c2ff; --b-pink: #c7d6ff;
}
.look-bento .fx-green .btn.primary { background: var(--b-ink); border-color: var(--b-ink); color: #fff; }

/* Home's Bills progress: three rings on dotted tracks, the outer one's
   share in the middle (reports.html: wmHome). Row 3 now holds four cards. */
.wm-rings { grid-column: span 3; display: flex; flex-direction: column; }
.wm-rings svg { max-width: 230px; margin: 0 auto; }
.wm circle.wm-ring-track { fill: none; stroke: var(--wm-grey); stroke-width: 2; stroke-dasharray: 1.5 7; stroke-linecap: round; }
.wm circle.wm-ring { fill: none; stroke-width: 11; stroke-linecap: round; }
.wm-ring.wm-blue { stroke: var(--wm-blue); } .wm-ring.wm-ink { stroke: var(--wm-ink); } .wm-ring.wm-green { stroke: var(--wm-green); }
.wm-ring-num { fill: var(--wm-fg); font-size: 40px; font-weight: 600; letter-spacing: -.02em; }
.wm-ring-legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; font-size: .88rem; }
.wm-ring-legend li { display: flex; align-items: center; gap: 10px; }
.wm-ring-legend i { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.wm-ring-legend span { flex: 1; min-width: 0; }
.wm-ring-legend small { display: block; color: var(--wm-muted); font-size: .76rem; }
@media (max-width: 1200px) { .wm-rings { grid-column: span 6; } }

/* ─── Clients: the card board (clients.html), after the operator's CRM
   reference — a big title with a white Add pill and the counts, filter
   pills beside a search, and cards with an initials avatar, a notch in the
   top-right corner holding the round arrow, the name big, chips and five
   payer dots. The fill keeps meaning: blue owing, green paid up, grey none. */
.cc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-bottom: 26px; }
.look-bento .cc-title { margin: 0; font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 500; letter-spacing: .01em; text-transform: uppercase; }
.cc-new { display: inline-flex; align-items: center; gap: 12px; padding: 6px 22px 6px 6px; border: 0; border-radius: 999px; background: var(--card); color: var(--fg); font: inherit; font-size: 1rem; cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.cc-new:hover { box-shadow: 0 0 0 1px var(--b-mustard); }
.cc-plus { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--card-2); }
.cc-stats { display: flex; gap: 40px; margin: 0 0 0 auto; }
.cc-stats div { display: flex; align-items: flex-end; gap: 8px; }
.cc-stats dt { font-size: 3rem; font-weight: 400; line-height: .9; letter-spacing: -.03em; }
.cc-stats dd { margin: 0; position: relative; color: var(--muted); font-size: 1.15rem; }
.cc-delta { position: absolute; top: -26px; left: 0; padding: 0 .45rem; border-radius: 999px; background: var(--b-green); color: var(--b-ink); font-size: .72rem; font-weight: 700; }
.cc-round { display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--card); color: var(--fg); cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.cc-round:hover { box-shadow: 0 0 0 1px var(--b-mustard); }

.cc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-bottom: 18px; }
.cc-bar h2 { display: flex; align-items: baseline; gap: 18px; margin: 0 10px 0 0; font-size: 1.8rem; font-weight: 400; letter-spacing: -.01em; }
.cc-count { font-size: 1rem; color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.cc-search label { display: flex; align-items: center; gap: 6px; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.cc-search-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.look-bento .cc-search input { width: 190px; padding: .4rem 0; border: 0; background: none; box-shadow: none; outline: none; }
.cc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-pills a { padding: .7rem 1.25rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); background: var(--card); color: var(--fg-2); font-size: .95rem; }
.cc-pills a small { margin-left: .3rem; color: var(--muted); }
.cc-pills a:hover { color: var(--fg); }
.cc-pills a[aria-current="page"] { background: var(--b-ink); color: #fff; box-shadow: none; }
.cc-pills a[aria-current="page"] small { color: rgba(255, 255, 255, .7); }

.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.cc-card { position: relative; min-width: 0; }
.cc-body {
  height: 100%; display: flex; flex-direction: column; padding: 22px 24px 20px; border-radius: 30px;
  background: var(--card); color: var(--b-ink);
  -webkit-mask: radial-gradient(circle at calc(100% - 30px) 30px, transparent 36px, #000 37px);
  mask: radial-gradient(circle at calc(100% - 30px) 30px, transparent 36px, #000 37px);
}
.cc-card.cc-blue .cc-body { background: var(--b-mustard); }
.cc-card.cc-green .cc-body { background: var(--b-green); }
.cc-card.cc-grey .cc-body { background: var(--b-slate); }
.cc-go { position: absolute; top: 0; right: 0; z-index: 1; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--card); color: var(--fg); box-shadow: 0 0 0 1px var(--line); transition: transform 160ms ease; }
.cc-go:hover { transform: rotate(45deg); color: var(--fg); }
.cc-go .icon { width: 22px; height: 22px; }
.cc-avatar { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #fff; color: var(--b-ink); font-weight: 700; font-size: 1.1rem; box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }
.cc-name { margin-top: 26px; font-size: 1.75rem; line-height: 1.15; letter-spacing: -.01em; color: var(--b-ink); overflow-wrap: anywhere; }
.cc-name:hover { color: var(--b-ink); text-decoration: underline; text-underline-offset: 4px; }
.cc-sub { margin: .35rem 0 0; font-size: .92rem; opacity: .75; }
.cc-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: auto; padding-top: 22px; }
.cc-foot small { display: block; margin-bottom: 6px; font-size: .78rem; opacity: .75; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-chip { padding: .35rem .8rem; border-radius: 999px; background: rgba(12, 11, 10, .12); font-size: .8rem; }
.cc-chip.is-bad { background: var(--b-ink); color: #fff; }
.cc-rate { text-align: right; }
.cc-dots { display: inline-flex; gap: 4px; padding: 5px 6px; border-radius: 999px; background: rgba(12, 11, 10, .14); }
.cc-dots i { width: 15px; height: 15px; border-radius: 50%; background: rgba(12, 11, 10, .2); }
.cc-dots i.d1 { background: #ff6b6b; } .cc-dots i.d2 { background: #ff9f43; } .cc-dots i.d3 { background: #ffd43b; }
.cc-dots i.d4 { background: #8ce99a; } .cc-dots i.d5 { background: #2fbf3a; }
.cc-card.cc-green .cc-dots i.d5 { background: #0d0d0f; }
@media (max-width: 760px) { .cc-stats { margin-left: 0; gap: 24px; } .cc-stats dt { font-size: 2.2rem; } }

/* The three-week grid's tiles open their day's timeline; on the timeline
   page (day.html) the grid sits above it, the picked day outlined. */
a.wm-day { color: inherit; transition: transform 140ms ease; }
a.wm-day:hover { transform: translateY(-2px); color: inherit; }
a.wm-day.is-empty:hover { background: var(--wm-grey); }
.wm-day.is-picked { outline: 3px solid var(--wm-ink); outline-offset: 2px; }
.wm.wm-embed { background: none; padding: 0; margin: 0 0 16px; border-radius: 0; }
.wm-embed .wm-sched { max-width: 760px; }


/* Home's Activity: three overlapping bubbles — green, light grey, ink —
   sized by the last three weeks' requests, bills made and payments. */
.wm-activity { grid-column: span 6; display: flex; flex-direction: column; }
.wm-activity-k { margin: -.4rem 0 .4rem; font-size: .9rem; }
.wm-activity svg { max-width: 360px; max-height: 340px; margin: auto; overflow: visible; }
.wm-bub circle { stroke: var(--wm-card); stroke-width: 4; transition: transform 200ms ease; transform-box: fill-box; transform-origin: center; }
.wm-bub:hover circle { transform: scale(1.04); }
.wm-bub-1 circle { fill: var(--wm-green); }
.wm-bub-2 circle { fill: #eef0f3; }
.wm-bub-3 circle { fill: var(--wm-ink); }
.wm-bub-v { fill: #111114; font-size: 24px; font-weight: 700; pointer-events: none; }
.wm-bub-l { fill: #111114; font-size: 12px; pointer-events: none; }
.wm-bub-3 .wm-bub-v, .wm-bub-3 .wm-bub-l { fill: #fff; }
.wm-bub-3 .wm-bub-v { font-size: 18px; }
.wm-bub-3 .wm-bub-l { font-size: 10px; }
.wm-bub-s { font-size: 11px; opacity: .75; }

/* Income's half-year card (reports.html, incomeStatement.go): the total
   big in the middle, grey day bars, this month's in ink with a bracket
   under them, the seven-day average as a smooth ink line. */
.look-bento .hy-card { position: relative; margin-bottom: 16px; padding: 1.4rem 1.6rem 1rem; overflow: visible; }
.hy-k { margin: 0; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hy-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 1rem 0 0; padding: 0; font-size: .86rem; color: var(--fg-2); }
.hy-legend li { display: flex; align-items: center; gap: 7px; }
.hy-legend i { width: 11px; height: 11px; border-radius: 50%; }
.hy-key-bar { background: #c9ccd3; }
.hy-key-line { background: #0d0d0f; border-radius: 2px !important; height: 3px !important; width: 16px !important; }
.hy-key-hi { background: #5d6068; }
.hy-total { margin: -2.4rem 0 0; text-align: center; font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.hy-total-k { margin: .2rem 0 .6rem; text-align: center; color: var(--muted); font-size: .9rem; }
.hy-chart { display: block; width: 100%; height: auto; }
.hy-chart text { font-family: inherit; }
.hy-grid { stroke: var(--line); stroke-dasharray: 2 6; }
.hy-tick { fill: var(--muted); font-size: 12px; }
.hy-bar { fill: #c9ccd3; }
.hy-bar.is-hi { fill: #5d6068; }
.hy-bar:hover { fill: var(--b-mustard); }
.hy-line { fill: none; stroke: #0d0d0f; stroke-width: 2; stroke-linejoin: round; pointer-events: none; }
.hy-bracket { fill: #0d0d0f; }
@media (max-width: 760px) { .hy-total { margin-top: .6rem; } }
/* The Income tab's tracker, full width: filter, statement, then the
   figures four to a row (reports.html: fyStatementBento). */
.fy-full { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.fy-full .hy-card { margin: 0; }
.fy-quad.fy-quad-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ─── The Finance tabs' lines (finStyle.go), after the operator's
   reference: hollow ring points, the latest filled under a big white
   value bubble. */
.chart-svg .dot.fin-ring { fill: var(--card); stroke: #1b1b1f; stroke-width: 2; }
.chart-svg .dot.fin-ring.s-context { stroke: rgba(27, 27, 31, .45); }
.chart-svg .dot.fin-end { fill: #f4f4f5; stroke: #1b1b1f; stroke-width: 2; }
.fin-tag.is-big rect { fill: #f4f4f5; stroke: rgba(27, 27, 31, .15); }
.fin-tag.is-big path { fill: #1b1b1f; }
.fin-tag.is-big text { font-size: 17px; font-weight: 600; }

/* Requests and Bills cards, one size (2026-10-28): the same column width
   and height on Requests, Bills' To bill (its cards in the requests'
   compact size) and the bill and activity cards; each card's last line
   sits at its foot. */
.lc-grid.req-grid, .lc-grid.bc-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.req-grid > .lc, .bc-grid > .lc, .bc-grid > .lc-wrap > .lc { min-height: 118px; padding: .6rem .75rem; border-radius: 14px; }
.bc .bc-foot { margin-top: auto; }
@media (max-width: 600px) { .lc-grid.req-grid, .lc-grid.bc-grid { grid-template-columns: minmax(0, 1fr); } }

/* Clients' cards, smaller (2026-10-28): near the Requests / Bills cards'
   size — the same look, everything scaled down. */
.cc-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.cc-body { padding: 12px 14px 12px; border-radius: 18px;
  -webkit-mask: radial-gradient(circle at calc(100% - 18px) 18px, transparent 23px, #000 24px);
  mask: radial-gradient(circle at calc(100% - 18px) 18px, transparent 23px, #000 24px); }
.cc-go { width: 36px; height: 36px; }
.cc-go .icon { width: 16px; height: 16px; }
.cc-avatar { width: 36px; height: 36px; font-size: .8rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, .45); }
.cc-name { margin-top: 10px; font-size: 1.05rem; }
.cc-sub { margin-top: .15rem; font-size: .72rem; }
.cc-foot { gap: 6px; padding-top: 10px; }
.cc-foot small { margin-bottom: 3px; font-size: .64rem; }
.cc-chip { padding: .15rem .5rem; font-size: .66rem; }
.cc-dots { gap: 3px; padding: 3px 4px; }
.cc-dots i { width: 9px; height: 9px; }

/* Work-type colours, the same on Requests and Bills (overview.go:
   workKind): htmlAI (AI/PD) light blue, PD lavender, calf mint, camps
   soft amber, manual and the rest slate. */
body:has(main.look-bento) { --wt-html: #8fb4ff; --wt-pd: #c3b5ff; --wt-calf: #9fe8c6; --wt-camp: #ffd98a; --wt-other: #dfe2e8; }
.req-grid > .lc.wt-html, .bc-grid > .lc.wt-html, .bc-grid > .lc-wrap > .lc.wt-html { background: var(--wt-html); }
.req-grid > .lc.wt-pd, .bc-grid > .lc.wt-pd, .bc-grid > .lc-wrap > .lc.wt-pd { background: var(--wt-pd); }
.req-grid > .lc.wt-calf, .bc-grid > .lc.wt-calf, .bc-grid > .lc-wrap > .lc.wt-calf { background: var(--wt-calf); }
.req-grid > .lc.wt-camp, .bc-grid > .lc.wt-camp, .bc-grid > .lc-wrap > .lc.wt-camp { background: var(--wt-camp); }
.req-grid > .lc.wt-other, .bc-grid > .lc.wt-other, .bc-grid > .lc-wrap > .lc.wt-other { background: var(--wt-other); }
.req-grid > .lc[class*="wt-"]:hover, .bc-grid > .lc[class*="wt-"]:hover, .bc-grid > .lc-wrap > .lc[class*="wt-"]:hover { filter: brightness(1.04); color: var(--b-ink); }
.req-tab { background: rgba(12, 11, 10, .12); }

/* Home without the cards Finance already shows (2026-10-28): the next-up
   card and two number cards share the first row; the open bills and the
   bills' progress the last. */
.wm-next, .wm-kpi { grid-column: span 4; }
.wm-timeline, .wm-rings { grid-column: span 6; }
@media (max-width: 1200px) { .wm-next { grid-column: span 12; } .wm-kpi, .wm-timeline, .wm-rings { grid-column: span 6; } }
.wm-timeline svg { max-width: 460px; margin: 0 auto; }

/* ─── Home, arranged after the operator's credit-score reference
   (2026-10-28; reports.html: wmHome, homeDesign2.go: khArrange; the one
   before it is kept at design/dash/home-before-arrange.html). One green
   panel: a header row (logo, who, the page pills, the date); the title
   with its switches, the rate big beside its gauge, two white cards; a
   flat 3×2 grid of tiles; then a black band with the weekly rate line and
   the three oldest open bills, flush to its foot. */
.wm.kh { padding: 22px 26px 0; overflow: hidden; background: #3ddc84; --wm-muted: #1f5e3a; }

.kh-top { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); gap: 22px; align-items: stretch; }
.kh-left { display: flex; flex-direction: column; }
.kh-brand { display: flex; align-items: center; gap: 24px; }
.look-bento .kh-title { margin: 0; font-size: clamp(2.4rem, 4vw, 3.3rem); font-weight: 600; line-height: .98; letter-spacing: -.03em; color: #0d0d0f; }
.kh .toggle { width: 38px; height: 22px; background: rgba(255, 255, 255, .5); }
.kh .toggle::after { top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; }
.kh .toggle.on { background: #0d0d0f; }
.kh .toggle.on::after { left: 19px; }
.kh-score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 8px; margin: auto 0 18px; padding-top: 18px; }
.kh-delta { margin: 0; font-size: 1rem; font-weight: 500; color: #0d0d0f; }
.kh-delta.is-down { color: #7a1010; }
.kh-big { margin: 0; font-size: clamp(4rem, 7.4vw, 6.2rem); font-weight: 600; line-height: .92; letter-spacing: -.05em; color: #0d0d0f; }
.kh-big small { font-size: .42em; letter-spacing: 0; }
.kh-cap { margin: .4rem 0 0; color: #14482b; font-size: .8rem; line-height: 1.3; }
.kh-gauge { width: 100%; max-width: 330px; justify-self: end; }
.kh-arc-rest { fill: none; stroke: #f4f4f5; stroke-width: 46; stroke-linecap: round; }
.kh-arc-fill { fill: none; stroke: url(#kh-g); stroke-width: 46; }
.kh-needle { fill: #0d0d0f; }


.kh-card { display: flex; flex-direction: column; gap: 22px; min-height: 200px; padding: 20px 22px; border-radius: 32px 32px 0 0; color: #0b0b0c; }
.kh-card:hover { color: #0b0b0c; filter: brightness(1.05); }
.kh-card.kh-red { background: #f2454c; } .kh-card.kh-blue { background: #2f7bff; } .kh-card.kh-lime { background: #8fe322; }
.kh-card-top { display: flex; align-items: center; gap: 14px; }
.kh-card-top b { font-size: 1.15rem; font-weight: 500; line-height: 1.15; }
.kh-card-icon { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #fff; color: #0b0b0c; box-shadow: 0 0 0 5px rgba(255, 255, 255, .3); }
.kh-card-figs { display: flex; gap: 28px; margin-top: auto; }
.kh-card-figs small { display: block; font-size: .78rem; opacity: .85; }
.kh-card-figs strong { font-size: 2.2rem; font-weight: 500; letter-spacing: -.02em; }
.kh-card-figs em { font-style: normal; font-size: .9rem; font-weight: 400; margin-left: .3rem; opacity: .85; }
@media (max-width: 1100px) {
  .kh-top, .kh-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .kh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh-brand { flex-wrap: wrap; }
}

/* Full width on every page (2026-10-28): no 1360px cap, small side
   margins; the top icon bar spans the same width. */
body.app:has(main.look-bento) main.look-bento { max-width: none; padding-left: 1.1rem; padding-right: 1.1rem; }
.wm.kh { margin: 0; border-radius: 32px; }

/* Home green edge to edge (2026-10-28): the page, the top icon bar and the
   panel one green, no margins; the black band runs to the foot of the
   screen. Other pages keep their light grey. */
body:has(.wm.kh) { background: #3ddc84; }
body.app:has(.wm.kh) main.look-bento { padding: 0; }
.wm.kh { display: flex; flex-direction: column; min-height: calc(100vh - 64px); margin: 0; border-radius: 0; padding: 6px 1.6rem 0; }

/* Clients in letter decks (clients.html): a closed deck is its first card
   with the next two peeking out behind; open, it spans the row and deals
   its cards out. Expand all / Collapse all beside the filter pills. */
.cc-all { padding: .7rem 1.2rem; border-radius: 999px; background: var(--b-ink); color: #fff; font-size: .9rem; }
.cc-all:hover { color: #fff; opacity: .88; }
.cc-stacks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px 14px; align-items: start; }
.cc-stack[open] { grid-column: 1 / -1; }
.cc-stack > summary { list-style: none; cursor: pointer; }
.cc-stack > summary::-webkit-details-marker { display: none; }
.cc-pile { position: relative; display: block; height: 150px; margin-bottom: 4px; }
.cc-sheet { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; gap: 4px; height: 128px; padding: 14px 16px; border-radius: 20px; color: var(--b-ink); box-shadow: 0 6px 14px -8px rgba(17, 17, 20, .35); transition: transform 200ms ease; }
.cc-sheet.cc-blue { background: var(--b-mustard); } .cc-sheet.cc-green { background: var(--b-green); } .cc-sheet.cc-grey { background: var(--b-slate); }
.cc-sheet:nth-child(1) { z-index: 3; }
.cc-sheet:nth-child(2) { z-index: 2; transform: translateY(11px) scale(.95); filter: brightness(.93); }
.cc-sheet:nth-child(3) { z-index: 1; transform: translateY(22px) scale(.9); filter: brightness(.86); }
.cc-stack > summary:hover .cc-sheet:nth-child(2) { transform: translateY(15px) scale(.95); }
.cc-stack > summary:hover .cc-sheet:nth-child(3) { transform: translateY(30px) scale(.9); }
.cc-sheet .cc-avatar { width: 34px; height: 34px; font-size: .78rem; }
.cc-sheet b { margin-top: auto; font-size: 1.05rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-sheet small { font-size: .72rem; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-stack-label { display: flex; align-items: baseline; gap: 8px; padding: 0 4px; }
.cc-stack-label b { font-size: 1.15rem; }
.cc-stack-label small { color: var(--muted); font-size: .82rem; }
.cc-stack-toggle { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1px var(--line); position: relative; }
.cc-stack-toggle::before { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1rem; line-height: 1; }
.cc-stack[open] .cc-stack-toggle::before { content: "−"; }
.cc-stack[open] .cc-pile { display: none; }
.cc-stack[open] > summary { margin-bottom: 10px; }
.cc-stack[open] .cc-stack-label b { font-size: 1.4rem; }
.cc-pile { height: 168px; }
.cc-sheet:nth-child(2) { transform: translateY(18px) scale(.94); }
.cc-sheet:nth-child(3) { transform: translateY(34px) scale(.88); }
.cc-stack > summary:hover .cc-sheet:nth-child(2) { transform: translateY(22px) scale(.94); }
.cc-stack > summary:hover .cc-sheet:nth-child(3) { transform: translateY(42px) scale(.88); }

/* ─── The side menu (2026-10-28): back on the left, its entries round
   white icon buttons (the open page ink-black, counts as red badges), a
   slim rail; the names show on hover. */
body.app:has(main.look-bento) .sidebar { gap: 1rem; background: #fff; border-right: 1px solid #e7e8eb; }
body.app:has(main.look-bento) .side-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
body.app:has(main.look-bento) .side-nav { gap: 8px; }
body.app:has(main.look-bento) .side-nav a { position: relative; gap: .75rem; min-height: 44px; padding: 4px 14px 4px 4px; border-radius: 999px; color: #0d0d0f; font-weight: 500; }
body.app:has(main.look-bento) .side-nav a .icon { box-sizing: content-box; padding: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(17, 17, 20, .14); }
body.app:has(main.look-bento) .side-nav a:hover { background: #f1f2f4; color: #0d0d0f; }
body.app:has(main.look-bento) .side-nav a[aria-current="page"] { background: #0d0d0f; color: #fff; }
body.app:has(main.look-bento) .side-nav a[aria-current="page"] .icon { background: #0d0d0f; box-shadow: none; }
body.app:has(main.look-bento) .side-nav .badge { margin-left: auto; background: var(--b-red); color: #fff; }
/* Collapsed: the slim rail of round icons, the toggle under the logo. */
@media (min-width: 861px) {
  body.app.side-mini:has(main.look-bento) { grid-template-columns: 80px minmax(0, 1fr); }
  body.app.side-mini:has(main.look-bento) .side-top { flex-direction: column; }
  body.app.side-mini:has(main.look-bento) .side-nav { align-items: center; }
  body.app.side-mini:has(main.look-bento) .side-nav a { width: 44px; padding: 0; justify-content: center; }
  body.app.side-mini:has(main.look-bento) .side-nav a:hover { background: transparent; }
  body.app.side-mini:has(main.look-bento) .side-nav a:hover .icon { transform: translateY(-2px); }
  body.app.side-mini:has(main.look-bento) .side-nav .badge { position: absolute; top: -3px; right: -3px; margin: 0; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid #fff; font-size: .6rem; line-height: 14px; }
}

/* Clients' Expand all / Collapse all, beside the heading: + / − in a circle. */
.cc-all { display: inline-flex; align-items: center; gap: 8px; padding: .45rem 1rem .45rem .45rem; }
.cc-all-icon { position: relative; width: 26px; height: 26px; border-radius: 50%; background: #fff; }
.cc-all-icon::before { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; color: #0d0d0f; font-size: 1.05rem; font-weight: 700; line-height: 1; }
.cc-all.is-open .cc-all-icon::before { content: "−"; }
body.app:has(main.look-bento) .side-nav a { overflow: visible; }
body.app:has(main.look-bento) .sidebar { overflow: visible; }

/* The side menu in Home's mint green (2026-10-28), on every page. */
body.app:has(main.look-bento) .sidebar { background: #3ddc84; border-right: 0; }
body.app:has(main.look-bento) .side-nav a:hover { background: rgba(255, 255, 255, .3); }
body.app:has(main.look-bento) .brand-mark { color: #0d0d0f; }
body.app:has(main.look-bento) .side-nav .badge { border-color: #3ddc84; }

/* Home: nine tiles (3×3) a little shorter, and the black band's
   Collection rate line smaller. */

/* The earlier Home cards, back under the black band for now (reports.html:
   kh-more): white cards on the green, next up and the rate side by side,
   then activity, open bills and the rings. */
.kh-more { margin: 0 -1.6rem; padding: 22px 1.6rem 26px; background: #3ddc84; }
.kh-more .wm-next { grid-column: span 4; }
.kh-more .wm-deals { grid-column: span 8; }
.kh-more .wm-activity, .kh-more .wm-timeline, .kh-more .wm-rings { grid-column: span 4; }
.kh-more .wm-card { --wm-muted: #8a8d94; }
@media (max-width: 1200px) { .kh-more > * { grid-column: span 12 !important; } }

/* Home's top right: the five cards in place of the tiles (reports.html:
   kh-five) — next up beside a short collection rate, then activity, open
   bills and the rings, all scaled to fit. */
.kh-five { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.kh-five > .wm-card { grid-column: span 1; padding: 14px 16px; border-radius: 24px; --wm-muted: #8a8d94; }
.kh-five > .wm-deals { grid-column: span 2; }
.kh-five .wm-card h2 { font-size: 1.05rem; }
.kh-five .wm-card-head { margin-bottom: 6px; }
.kh-five .wm-card .wm-round { width: 32px; height: 32px; }
/* Next up, compact */
.kh-five .wm-next h2 { margin: .6rem 0 .5rem; font-size: 1.35rem; }
.kh-five .wm-white-round { width: 42px; height: 42px; }
.kh-five .wm-next-chips a { padding: .3rem .65rem; font-size: .8rem; }
/* Collection rate, short */
.kh-five .wm-deals-body { grid-template-columns: minmax(120px, .6fr) minmax(0, 1.4fr); align-items: center; }
.kh-five .wm-deals-text { padding-top: 0; gap: 4px; }
.kh-five .wm-big { font-size: 2.2rem; }
.kh-five .wm-big .wm-up { width: 22px; height: 22px; }
.kh-five .wm-deals-text .wm-muted { font-size: .74rem; }
.kh-five .wm-legend { font-size: .74rem; margin-top: 4px; }
.kh-five .wm-legend.wm-stack { gap: 4px; }
.kh-five .wm-pills { max-height: 118px; }
/* Activity, open bills, rings: smaller drawings */
.kh-five .wm-activity-k { font-size: .72rem; margin: -.2rem 0 .2rem; }
.kh-five .wm-activity svg { max-height: 190px; }
.kh-five .wm-timeline svg { max-height: 190px; max-width: none; }
.kh-five .wm-rings svg { max-width: 150px; }
.kh-five .wm-ring-legend { gap: 4px; font-size: .74rem; margin-top: 6px; }
.kh-five .wm-ring-legend small { font-size: .66rem; }
@media (max-width: 1100px) { .kh-five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .kh-five { grid-template-columns: minmax(0, 1fr); } .kh-five > .wm-deals { grid-column: span 1; } }

/* Home's top right, row one: next up, a narrower collection rate, and four
   small pills one under another — Project, Finance, two kept for later. */
.kh-five > .wm-deals { grid-column: span 1; }
.kh-five .wm-deals-body { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.kh-five .wm-deals-text .wm-legend { display: none; }
.kh-five .wm-pills { max-height: 92px; }

/* Home (2026-10-28): the black band takes Next up's look — ink with the
   blue and green glow — and the oldest open bills' cards are half as tall. */
.kh-card { min-height: 100px; gap: 8px; padding: 12px 16px; border-radius: 22px 22px 0 0; }
.kh-card-top { gap: 10px; }
.kh-card-top b { font-size: .95rem; }
.kh-card-icon { width: 32px; height: 32px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
.kh-card-icon .icon { width: 15px; height: 15px; }
.kh-card-figs { gap: 18px; }
.kh-card-figs small { font-size: .68rem; }
.kh-card-figs strong { font-size: 1.3rem; }
.kh-card-figs em { font-size: .72rem; }

/* Home in Next up's look (2026-10-28): the whole page ink with a blue and
   a green glow; light text on it; the band a shade lighter so it still
   stands apart; the white cards as they are. */
body:has(.wm.kh) { background: #0d0d0f; }
.wm.kh { background: #0d0d0f; background-image: radial-gradient(circle at 96% 0%, rgba(74, 124, 246, .75) 0 12%, transparent 34%), radial-gradient(circle at 78% 4%, rgba(91, 211, 60, .55) 0 6%, transparent 20%), radial-gradient(circle at 8% 70%, rgba(74, 124, 246, .18) 0 10%, transparent 34%); --wm-muted: #a3a6ad; }
.look-bento .kh-title, .kh-big, .kh-delta { color: #f4f4f5; }
.kh-delta.is-down { color: #ff8a80; }
.kh-cap { color: #a3a6ad; }
.kh-needle { fill: #f4f4f5; }
.kh-arc-rest { stroke: rgba(255, 255, 255, .9); }

/* Every page in Home's look (2026-10-28): ink with a blue and a green glow
   behind the page; text that sits on the page itself goes light, text in
   the cards stays dark. Home gets a little room at the top. */
body:has(main.look-bento) {
  background: #0d0d0f;
  background-image: radial-gradient(circle at 96% 0%, rgba(74, 124, 246, .6) 0 10%, transparent 32%), radial-gradient(circle at 80% 3%, rgba(91, 211, 60, .4) 0 5%, transparent 18%), radial-gradient(circle at 10% 80%, rgba(74, 124, 246, .16) 0 10%, transparent 36%);
  background-attachment: fixed;
}
.wm.kh { padding-top: 22px; background: transparent; }
.look-bento h1, .look-bento .title-word, .look-bento .cc-title { color: #f4f4f5; }
.look-bento .sub, .look-bento .crumbs, .look-bento .crumbs a, .look-bento .p4-date,
.look-bento .section-head h2, .look-bento .section-head .sub, .look-bento .lc-bar h2,
.look-bento .cc-bar h2, .look-bento .cc-count, .look-bento .cc-stats dt, .look-bento .cc-stack-label b,
.look-bento .lh-sync, .look-bento .f5-top .sub { color: #f4f4f5; }
.look-bento .cc-stats dd, .look-bento .cc-stack-label small, .look-bento .sub, .look-bento .crumbs a { color: #b4b7be; }
.look-bento > .flash { color: var(--fg); }
/* …and the page-level bits the first pass missed: Project's day word and
   calendar, the bill page's crumbs and pills, the sync note. */
.look-bento .p4-day h1.title-word, .look-bento .p4-day .title-word { color: #f4f4f5; }
.look-bento .p4-d, .look-bento .p4-cal-nav, .look-bento .p4-week-head, .look-bento .p4-key { color: #e4e6ea; }
.look-bento .p4-cal-nav .round-btn { border-color: #e4e6ea; color: #e4e6ea; background: none; box-shadow: none; }
.look-bento .fx-bar .crumbs, .look-bento .fx-bar .crumbs a, .look-bento .sync, .look-bento .lh-sync { color: #e4e6ea; }
.look-bento .pill-nav a, .look-bento .pill-nav button { border-color: rgba(255, 255, 255, .45); color: #f4f4f5; }
.wm.kh { padding-top: 36px; }

/* Blue, not black (2026-10-28): every page on a rich blue — Next up's glow
   blue at the top right deepening to navy — and the side menu in the same
   deep blue instead of green. */
body:has(main.look-bento) {
  background: #1d3fb8;
  background-image: radial-gradient(circle at 92% 4%, #4a7cf6 0, rgba(74, 124, 246, 0) 46%), linear-gradient(160deg, #2f5fe0 0%, #1d3fb8 45%, #132a7e 100%);
  background-attachment: fixed;
}
body.app:has(main.look-bento) .sidebar { background: #132a7e; }
body.app:has(main.look-bento) .brand-mark { color: #fff; }
body.app:has(main.look-bento) .side-nav a:hover { background: rgba(255, 255, 255, .12); }
body.app:has(main.look-bento) .side-nav .badge { border-color: #132a7e; }
.wm.kh { background-image: none; }
body:has(.wm.kh) {
  background: #1d3fb8;
  background-image: radial-gradient(circle at 92% 4%, #4a7cf6 0, rgba(74, 124, 246, 0) 46%), linear-gradient(160deg, #2f5fe0 0%, #1d3fb8 45%, #132a7e 100%);
  background-attachment: fixed;
}

/* The page in the original Next up card's light (2026-10-28): ink, with a
   big soft blurred blue glow from the top right and a touch of green, as
   on that card; the side menu the same ink. */
body:has(main.look-bento), body:has(.wm.kh) {
  background: #0b0c10;
  background-image:
    radial-gradient(ellipse 55% 60% at 92% 0%, rgba(74, 124, 246, .95) 0%, rgba(74, 124, 246, .55) 30%, rgba(74, 124, 246, 0) 70%),
    radial-gradient(ellipse 22% 26% at 70% 6%, rgba(91, 211, 60, .55) 0%, rgba(91, 211, 60, 0) 70%),
    radial-gradient(ellipse 45% 50% at 0% 100%, rgba(74, 124, 246, .28) 0%, rgba(74, 124, 246, 0) 70%);
  background-attachment: fixed;
}
body.app:has(main.look-bento) .sidebar { background: rgba(11, 12, 16, .92); border-right: 1px solid rgba(255, 255, 255, .06); }
body.app:has(main.look-bento) .side-nav .badge { border-color: #0b0c10; }

/* Home's cards blend into the glow (2026-10-28): frosted glass — see-
   through, blurred, a faint light edge — with light text and light ink in
   the drawings. Next up keeps its own glow; the bill cards keep their fill. */
.kh .kh-five > .wm-card:not(.wm-next) {
  background: rgba(255, 255, 255, .08); color: #f4f4f5;
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.kh .kh-five > .wm-card:not(.wm-next) {
  --wm-fg: #f4f4f5; --wm-muted: #a9acb4; --wm-soft: rgba(255, 255, 255, .07); --wm-line: rgba(255, 255, 255, .14);
  --wm-grey: rgba(255, 255, 255, .22); --wm-ink: #f4f4f5; --wm-on-ink: #0d0d0f; --wm-card: rgba(20, 22, 30, .6);
}
.kh .kh-five .wm-card h2 { color: #f4f4f5; }
.kh .kh-five .wm-round, .kh .kh-five .wm-chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #f4f4f5; }
.kh .kh-five .wm-bub-2 circle { fill: rgba(255, 255, 255, .85); }
.kh .kh-five .wm-bub-3 .wm-bub-v, .kh .kh-five .wm-bub-3 .wm-bub-l { fill: #0d0d0f; }
.kh .kh-five .wm-bub circle { stroke: rgba(20, 22, 30, .6); }
.kh .kh-five .wm-tick { fill: #a9acb4; }
.kh .kh-five .wm-tick.is-today { fill: #f4f4f5; }
.kh .kh-five .wm-legend { color: #d6d8dd; }

/* Urbanist everywhere (static/fonts, SIL Open Font License — OFL.txt
   beside it), one variable file for every weight. */
@font-face { font-family: "Urbanist"; src: url("/static/fonts/Urbanist.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
body, button, input, select, textarea, .look-bento h1, .look-bento .title-word, .mono, td.mono .sub { font-family: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* The count tabs (Requests, Working, Bills, Clients, Messages): rounded
   rectangles of one size, not the pill ends that made them egg-shaped;
   the small compact tabs keep their pill. */
.look-bento .tabs:not(.tabs-compact) a { width: 8.4rem; min-width: 0; min-height: 5.2rem; padding: .8rem 1rem; border-radius: 20px; }
.look-bento .tabs:not(.tabs-compact) .count { font-size: 1.9rem; }

/* Clients' title in normal case, like the other pages. */
.look-bento .cc-title { text-transform: none; font-size: clamp(2.1rem, 3.6vw, 3rem); }
/* On the dark side menu the open page shows in the glow's blue. */
body.app:has(main.look-bento) .side-nav a[aria-current="page"] { background: #4a7cf6; color: #fff; }
body.app:has(main.look-bento) .side-nav a[aria-current="page"] .icon { background: #4a7cf6; box-shadow: 0 0 0 4px rgba(74, 124, 246, .3); }

/* Request, Working and Bill pages blend in too (2026-10-28): their white
   cards and the phone backing turn frosted glass with light text; the
   coloured cards keep their fill and dark ink. */
.look-bento .req-bento, .look-bento .fx {
  --card: rgba(255, 255, 255, .08); --card-2: rgba(255, 255, 255, .05); --fg: #f4f4f5; --fg-2: #d6d8dd; --muted: #a9acb4;
  --line: rgba(255, 255, 255, .14); --plain-bg: rgba(255, 255, 255, .1); --row-hover: rgba(255, 255, 255, .05);
}
.look-bento .req-bento .card, .look-bento .fx .card, .look-bento .req-phone, .look-bento .fx-phone {
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.look-bento .req-phone, .look-bento .fx-phone { border: 1px solid rgba(255, 255, 255, .12); }
.look-bento .req-bento .card-head h2, .look-bento .fx .card-head h2 { color: inherit; }
.look-bento .req-bento .round-btn, .look-bento .fx .round-btn { background: rgba(255, 255, 255, .1); color: #f4f4f5; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
/* …and the near-white slate cards there (History, Status) too. */
.look-bento .req-bento .card.req-history, .look-bento .fx .card.fx-slate:not(.fx-paid) { background: rgba(255, 255, 255, .08); color: #f4f4f5; border: 1px solid rgba(255, 255, 255, .14); }
.look-bento .req-bento .req-history h2, .look-bento .fx .fx-slate h2, .look-bento .fx .fx-slate .fx-balance, .look-bento .fx .fx-slate .hint { color: #f4f4f5; }
.look-bento .req-bento .req-history .fx-rows li { border-bottom-color: rgba(255, 255, 255, .12); }
.look-bento .req-bento .req-history .fx-rows time, .look-bento .req-bento .req-history small { color: #a9acb4; }

/* The day timeline page blends in too: the three-week grid and the hour
   timeline in frosted glass with light text; the coloured days keep their
   fill, the empty ones go see-through, the picked one outlined in white. */
.wm.wm-embed .wm-card, .look-bento .card.p4-daycard {
  background: rgba(255, 255, 255, .08); color: #f4f4f5; border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.wm.wm-embed { --wm-fg: #f4f4f5; --wm-muted: #a9acb4; --wm-soft: rgba(255, 255, 255, .06); --wm-line: rgba(255, 255, 255, .14); --wm-ink: #f4f4f5; --wm-on-ink: #0d0d0f; }
.wm.wm-embed .wm-card h2, .wm.wm-embed .wm-wd, .wm.wm-embed .wm-legend { color: #f4f4f5; }
.wm.wm-embed .wm-chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #f4f4f5; }
.wm.wm-embed .wm-day.is-picked { outline-color: #f4f4f5; }
.look-bento .p4-daycard { --fg: #f4f4f5; --fg-2: #d6d8dd; --muted: #a9acb4; --line: rgba(255, 255, 255, .14); }
.look-bento .p4-daycard .pill-o { border-color: rgba(255, 255, 255, .5); color: #f4f4f5; }
.look-bento .p4-daycard .cal-hour { color: #a9acb4; border-color: rgba(255, 255, 255, .12); }
.look-bento .p4-daycard .empty { color: #a9acb4; }
.look-bento .p4-daycard .round-btn { background: rgba(255, 255, 255, .1); color: #f4f4f5; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }

/* Messages blends in too: the calendar, the count tabs and the message
   cards in frosted glass with light text. The chosen tab stays blue. */
.look-bento .msg-split { --fg: #f4f4f5; --fg-2: #d6d8dd; --muted: #a9acb4; --line: rgba(255, 255, 255, .14); --card-bg: rgba(255, 255, 255, .08); }
.look-bento .msg-split .card.msg-cal, .look-bento .msg-split .tabs a:not([aria-current]), .look-bento .msg-split .mc-grid > .lc {
  background: rgba(255, 255, 255, .08); color: #f4f4f5; border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.look-bento .msg-split .tabs a:not([aria-current]) .count { color: #f4f4f5; }
.look-bento .msg-split .mc-grid > .lc:hover { background: rgba(255, 255, 255, .13); color: #f4f4f5; }
.look-bento .msg-split .mc-grid .lc-name, .look-bento .msg-split .mc-grid .lc-meta, .look-bento .msg-split .mc-grid .lc-id a { color: #b4b7be; }
.look-bento .msg-split .mc-grid .lc-id, .look-bento .msg-split .mc-grid .lc-id a { color: #f4f4f5; }
.look-bento .msg-split .mc-body { color: #e4e6ea; }
.look-bento .msg-split .mc-grid a { color: #9ec0ff; }
.look-bento .msg-split .p4-d.picked, .look-bento .msg-split .p4-d.today { color: #fff; }
.look-bento .msg-day { color: #f4f4f5; }
.look-bento .lh .hint { color: #b4b7be; }

/* Heavier Urbanist throughout (2026-10-28): body text medium, titles bold,
   card headings and the big figures semibold. */
body { font-weight: 500; }
.look-bento h1, .look-bento .title-word, .look-bento .cc-title, .look-bento .kh-title { font-weight: 700; }
.look-bento h2, .look-bento .card h2, .look-bento .card-head h2, .wm-card h2, .kh-panel-head h2, .cc-bar h2 { font-weight: 650; }
.kh-big, .wm-big, .lc-big, .tabs .count, .fx-balance, .change-big, .hy-total, .wm-ring-num, .wm-gauge-num, .cc-stats dt, .kh-card-figs strong, .bc-amt { font-weight: 700; }
b, strong, .lc-id, .cc-name, .lc-act { font-weight: 700; }
small, .hint, .lc-meta, .sub { font-weight: 500; }
.look-bento .tabs .count, .look-bento .tabs:not(.tabs-compact) .count { font-weight: 700; }
.look-bento .sub a, .look-bento .lh .hint a, .look-bento .section-head a { color: #9ec0ff; font-weight: 700; }


/* Home (2026-10-28): the cards dark like Next up (ink, its glow), the
   collection rate two columns wide where the pills were, and Project /
   Finance / Settings as the band's coloured cards. */
.kh .kh-five > .wm-card:not(.wm-next) {
  background: #0d0d0f; border: 1px solid rgba(255, 255, 255, .08);
  background-image: radial-gradient(circle at 96% 0%, rgba(74, 124, 246, .55) 0 12%, transparent 40%), radial-gradient(circle at 74% 6%, rgba(91, 211, 60, .32) 0 5%, transparent 20%);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.kh-five > .wm-deals { grid-column: span 2; }
.kh-five .wm-deals-body { grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr); }
.kh-five .wm-deals-text .wm-legend { display: flex; }
.kh-five .wm-pills { max-height: 120px; }
.kh-card-sub { margin-top: auto; font-size: .82rem; opacity: .85; line-height: 1.3; }
.kh-card { min-height: 110px; }
.kh-card-top b { font-size: 1.2rem; }

/* Text that sits on the glow, brighter and with a faint shadow so it reads
   on the bright blue too; the open-bills names on the green bar in ink;
   the small chart labels a touch bigger. */
.look-bento h1, .look-bento .sub, .look-bento .crumbs, .look-bento .lh .hint, .look-bento .cc-stats, .look-bento .cc-bar h2, .look-bento .cc-count,
.look-bento .lc-bar h2, .look-bento .section-head, .look-bento .sync, .look-bento .lh-sync, .look-bento .p4-day, .kh-score, .kh-title {
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}
.look-bento .cc-stats dd, .look-bento .sub, .look-bento .crumbs a, .look-bento .lh .hint, .kh-cap { color: #e4e6ea; }
.wm-timeline rect.wm-green + .wm-task, .wm-timeline rect.wm-blue + .wm-task { fill: #0d0d0f; font-weight: 700; }
.kh-five .wm-pills .wm-tick { font-size: 15px; }

/* Phones: one compact top bar — the logo with bp's Mac / Windows marks
   right beside it, Dry run and log out on the right; below, one row of
   round icons that scrolls sideways, each count a badge on its icon. */
@media (max-width: 860px) {
  body.app:has(main.look-bento) .sidebar {
    display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "brand pills . foot" "nav nav nav nav";
    align-items: center; gap: 8px 10px; padding: 10px 12px 8px; height: auto;
  }
  body.app:has(main.look-bento) .side-top { grid-area: brand; flex-direction: row; }
  body.app:has(main.look-bento) .bp-pills { grid-area: pills; flex-direction: row; margin: 0; gap: 6px; }
  body.app:has(main.look-bento) .side-foot { grid-area: foot; flex-direction: row; margin: 0; gap: 6px; }
  body.app:has(main.look-bento) .side-wa { display: none; }
  body.app:has(main.look-bento) .side-nav {
    grid-area: nav; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overflow-y: visible;
    padding: 6px 2px 4px; scrollbar-width: none;
  }
  body.app:has(main.look-bento) .side-nav::-webkit-scrollbar { display: none; }
  body.app:has(main.look-bento) .side-nav a { flex: none; width: 42px; min-height: 42px; padding: 0; justify-content: center; background: transparent; }
  body.app:has(main.look-bento) .side-nav a[aria-current="page"] { background: transparent; }
  body.app:has(main.look-bento) .side-nav .side-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.app:has(main.look-bento) .side-nav .badge { position: absolute; top: -2px; right: -4px; margin: 0; min-width: 18px; height: 18px; padding: 0 5px; font-size: .6rem; line-height: 14px; }
  body.app:has(main.look-bento) .side-note .hide-sm { display: none; }

  /* Home on a phone: the title smaller, the rate and a smaller gauge side
     by side, the band's headings on one line. */
  .wm.kh { padding: 16px 12px 0; }
  .look-bento .kh-title { font-size: 2.1rem; }
  .kh-score { grid-template-columns: auto minmax(0, 1fr); margin: 10px 0 14px; padding-top: 6px; }
  .kh-big { font-size: 3.6rem; }
  .kh-gauge { max-width: 170px; }
  .kh-panel { margin: 18px -12px 0; padding: 26px 12px 0; }
  .kh-panel-head h2 { font-size: 1.2rem; }
  .kh-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kh-card { min-height: 86px; padding: 10px; }
  .kh-card-top b { font-size: .95rem; }
  .kh-card-sub { font-size: .66rem; }
  .kh-card-icon { width: 28px; height: 28px; }
}
@media (max-width: 700px) {
  .kh-panel { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .kh-panel-head h2 { white-space: nowrap; }
  .kh-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh-five > .wm-next, .kh-five > .wm-deals { grid-column: span 2 !important; }
  .kh-five > .wm-activity, .kh-five > .wm-timeline, .kh-five > .wm-rings { grid-column: span 1 !important; }
  .kh-five > .wm-rings { grid-column: span 2 !important; }
}
/* The lime card's text in ink: white on lime didn't read. */
.kh-card.kh-lime, .kh-card.kh-lime:hover { color: #0d0d0f; }
.kh-card.kh-lime .kh-card-sub { opacity: 1; font-weight: 600; }
.kh-card.kh-red .kh-card-sub, .kh-card.kh-blue .kh-card-sub { opacity: 1; font-weight: 600; color: #fff; }

/* The band's promised-ahead bars: blue, the empty weeks a low stub. */
/* Home's band sits at the foot of the screen; the room opens above it. */
.wm.kh { min-height: 100vh; }
.kh-card { min-height: 96px; }
/* The top area fills the room down to the band: its two card rows share
   the height and the drawings inside may grow with them. */
.wm.kh .kh-top { flex: 1; align-items: stretch; }
.wm.kh .kh-five { grid-template-rows: auto 1fr; align-content: stretch; }
.wm.kh .kh-five > .wm-card { display: flex; flex-direction: column; }
.wm.kh .kh-five .wm-activity svg, .wm.kh .kh-five .wm-timeline svg { flex: 1; max-height: 300px; margin: auto; }
.wm.kh .kh-five .wm-rings svg { max-width: 200px; margin: auto; }
.wm.kh .kh-five .wm-pills { max-height: 150px; }
@media (max-width: 1100px) { .wm.kh .kh-five { grid-template-rows: none; } }
/* Both card rows share the height evenly; the first row's contents spread
   to fill — Next up's chips at its foot, the rate's bars taller. */
.wm.kh .kh-five { grid-template-rows: 1fr 1fr; }
.wm.kh .kh-five > .wm-next { justify-content: space-between; }
.wm.kh .kh-five > .wm-next .wm-next-chips { margin-top: auto; }
.wm.kh .kh-five > .wm-deals .wm-deals-body { flex: 1; align-items: stretch; }
.wm.kh .kh-five > .wm-deals .wm-deals-text { justify-content: center; }
.wm.kh .kh-five .wm-pills { max-height: 210px; height: 100%; }
@media (max-width: 1100px) { .wm.kh .kh-five { grid-template-rows: none; } }

/* Home without the band (2026-10-28): the left column runs the full height
   (title on top, the rate and speedometer at the foot); the right grid has
   three rows — next up + rate; activity, open bills, progress; Project,
   Finance and Settings, each under the card above it, fully rounded. */
.wm.kh { min-height: 100vh; padding-bottom: 24px; }
.wm.kh .kh-five { grid-template-rows: 1fr 1fr auto; }
.wm.kh .kh-five > .kh-card { grid-column: span 1; min-height: 104px; border-radius: 24px; }
.wm.kh .kh-left .kh-score { margin-bottom: 0; }
@media (max-width: 1100px) { .wm.kh .kh-five { grid-template-rows: none; } }
@media (max-width: 700px) { .wm.kh .kh-five > .kh-card { grid-column: span 2 !important; } }

/* Income's statement card dark like Home's cards (Next up's ink and
   glow): light text, light day bars, this month in blue, a white average
   line, a dark callout. */
.look-bento .card.hy-card {
  background: #0d0d0f; color: #f4f4f5; border: 1px solid rgba(255, 255, 255, .08);
  background-image: radial-gradient(circle at 96% 0%, rgba(74, 124, 246, .5) 0 10%, transparent 34%), radial-gradient(circle at 80% 4%, rgba(91, 211, 60, .28) 0 4%, transparent 16%);
}
.hy-card .hy-k, .hy-card .hy-total-k, .hy-card .hy-legend { color: #b4b7be; }
.hy-card .hy-total { color: #fff; }
.hy-card .hy-tick { fill: #8f939b; }
.hy-card .hy-grid { stroke: rgba(255, 255, 255, .1); }
.hy-card .hy-bar { fill: rgba(255, 255, 255, .35); }
.hy-card .hy-bar.is-hi { fill: #4a7cf6; }
.hy-card .hy-line { stroke: #fff; }
.hy-card .hy-bracket { fill: #4a7cf6; }
.hy-card .hy-key-bar { background: rgba(255, 255, 255, .35); }
.hy-card .hy-key-line { background: #fff; }
.hy-card .hy-key-hi { background: #4a7cf6; }
.hy-card .empty { color: #a9acb4; }
/* Comparison's statement card: last year's seven-day average, faint dashed. */
.hy-line-last { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.6; stroke-dasharray: 5 5; pointer-events: none; }
.hy-key-last { width: 16px !important; height: 0 !important; border-radius: 0 !important; border-top: 2px dashed rgba(255, 255, 255, .6); }
/* Thin bars get a wider, invisible hover edge so their value is easy to
   reach; whatever carries a value shows a pointer. */
.hy-bar { stroke: rgba(0, 0, 0, 0); stroke-width: 6; }
main svg [data-tip] { cursor: pointer; }

/* The side menu floats (2026-10-28): no bar behind it — the page and its
   glow show through — and the round icons cast a soft shadow. */
body.app:has(main.look-bento) .sidebar { background: transparent; border-right: 0; box-shadow: none; }
body.app:has(main.look-bento) .side-nav a .icon { box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); }
body.app:has(main.look-bento) .side-nav a[aria-current="page"] .icon { box-shadow: 0 6px 18px -4px rgba(74, 124, 246, .7), 0 0 0 4px rgba(74, 124, 246, .25); }
body.app:has(main.look-bento) .side-buttons .btn, body.app:has(main.look-bento) .side-note { box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .55); }
@media (max-width: 860px) {
  body.app:has(main.look-bento) .sidebar { background: rgba(11, 12, 16, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}

/* Home's collection rate and open bills fill their cards (2026-10-28): the
   pill bars run the body's full height (a taller drawing, 480×500), and the
   open-bills chart (up to seven bills) grows with its card. */
.wm.kh .kh-five .wm-pills { max-height: none; height: 100%; width: 100%; }
.wm.kh .kh-five .wm-timeline svg[role=img] { max-height: none; width: 100%; }
.wm.kh .kh-five .wm-timeline .wm-task { font-size: 17px; }
.wm.kh .kh-five .wm-timeline .wm-tick { font-size: 17px; }
.wm.kh .kh-five .wm-pills .wm-tick { font-size: 22px; }

/* Vivid work-type colours (2026-10-28, the operator's palette: mint
   #3EEA9C, blue #299CFF, lime #92E50A, white; PD orange, red being kept
   for errors): Requests and
   Bills cards by work type, Working's tiles by sheet type, black text. */
body:has(main.look-bento) { --wt-html: #299cff; --wt-pd: #ff9a3c; --wt-calf: #3eea9c; --wt-camp: #92e50a; --wt-other: #ffffff; }
.req-grid > .lc[class*="wt-"], .bc-grid > .lc[class*="wt-"], .bc-grid > .lc-wrap > .lc[class*="wt-"] { color: #000; }
.look-bento .work-tile { background: #ffffff; color: #000; }
.look-bento .work-tile.sheet-two { background: #299cff; }
.look-bento .work-tile.sheet-pd { background: #ff9a3c; }
.look-bento .work-tile.sheet-primecamp, .look-bento .work-tile.sheet-repeatcamp, .look-bento .work-tile.sheet-boostcamp { background: #92e50a; }
.look-bento .work-tile.sheet-calf { background: #3eea9c; }
.work-tile .work-tile-sheet, .work-tile .work-tile-status { color: rgba(0, 0, 0, .78); }
/* The status tiles' figures in the same palette, none faint on white:
   blue for open work, red for trouble, green for paid, black for the rest. */
.look-bento .tabs a:not([aria-current]) .count { color: #000; }
.look-bento .tabs a:not([aria-current]):is([href*="f=new"], [href*="f=unbilled"], [href*="f=tobill"], [href*="f=open"], [href*="f=bill"]) .count { color: #299cff; }
.look-bento .tabs a:not([aria-current]):is([href*="f=overdue"], [href*="f=needs-call"], [href*="f=failed"], [href*="f=link"], [href*="f=rejected"]) .count { color: #fe5858; }
.look-bento .tabs a:not([aria-current]):is([href*="f=paid"], [href*="f=done"], [href*="f=receipt"]) .count { color: #22c47e; }

/* Project's and Messages' month calendars as tiles, like the day page's
   three weeks (2026-10-28): a glass card, a rounded tile per day — grey
   when quiet, white for new requests, blue for rows finished (Messages:
   messages sent), green for paid — the open day ringed white, today blue. */
.look-bento .p4-cal { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 24px; padding: 16px 18px; }
.look-bento .p4-cal .p4-week { gap: 6px; border-top: 0; }
.look-bento .p4-cal .p4-week + .p4-week { margin-top: 6px; }
.look-bento .p4-cal .p4-week-head { padding-bottom: 2px; font-size: .74rem; font-weight: 700; color: #f4f4f5; }
.look-bento .p4-cal .p4-d { min-height: 46px; padding: 7px 9px; border-radius: 12px; text-align: left; font-size: 1rem; font-weight: 700; color: #f4f4f5; background: none; text-decoration: none; }
.look-bento .p4-cal a.p4-d { background: rgba(255, 255, 255, .06); transition: transform 140ms ease; }
.look-bento .p4-cal a.p4-d:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .14); }
.look-bento .p4-cal .p4-d::before, .look-bento .p4-cal .p4-d::after { content: none; }
.look-bento .p4-cal a.p4-d.req { background: #f4f4f5; color: #0d0d0f; }
.look-bento .p4-cal a.p4-d.done, .look-bento .msg-cal a.p4-d.req { background: #4a7cf6; color: #fff; }
.look-bento .p4-cal a.p4-d.pay { background: #5bd33c; color: #fff; }
.look-bento .p4-cal a.p4-d.today { outline: 3px solid #4a7cf6; outline-offset: 2px; }
.look-bento .p4-cal a.p4-d.picked, .look-bento .p4-cal a.p4-d.done.today, .look-bento .msg-cal a.p4-d.req.today { outline: 3px solid #f4f4f5; outline-offset: 2px; }
.look-bento .p4-cal .p4-key { margin-top: 12px; font-size: .82rem; font-weight: 600; color: #f4f4f5; }
.look-bento .p4-cal .p4-key .key::before { width: 10px; height: 10px; }
.look-bento .p4-cal .p4-key .key.req::before { background: #f4f4f5; }
.look-bento .p4-cal .p4-key .key.done::before, .look-bento .msg-cal .p4-key .key.req::before { background: #4a7cf6; }
.look-bento .p4-cal .p4-key .key.pay::before { background: #5bd33c; }

/* Clients (2026-10-28): no per-deck +/− — a deck opens or closes by a
   click on its pile or letters, all of them by Expand / Collapse all at
   the top; the cards smaller again. */
.cc-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.cc-body { padding: 10px 12px; border-radius: 16px;
  -webkit-mask: radial-gradient(circle at calc(100% - 15px) 15px, transparent 19px, #000 20px);
  mask: radial-gradient(circle at calc(100% - 15px) 15px, transparent 19px, #000 20px); }
.cc-go { width: 30px; height: 30px; }
.cc-go .icon { width: 14px; height: 14px; }
.cc-avatar { width: 30px; height: 30px; font-size: .7rem; }
.cc-name { margin-top: 8px; font-size: .95rem; }
.cc-sub { font-size: .68rem; }
.cc-foot { padding-top: 8px; }
/* Open bills' fourth bar orange, not red (red is for errors). */
.wm rect.wm-orange { fill: #ff9a3c; }
.wm-timeline rect.wm-orange + .wm-task { fill: #0d0d0f; font-weight: 700; }
/* An open deck takes two columns (three cards a row) instead of the full
   width, so open and closed decks sit side by side. */
.cc-stack[open] { grid-column: span 2; }
.cc-stack .cc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) { .cc-stack .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The client page's Details card with How they pay under the details
   (2026-10-28): the board card's payer dots large, then the figures behind
   them two a row and a collected slider. The phone stack runs the left
   column's full height so nothing scrolls; the summary shows the dots too. */
.fx.fx-wide > .fx-client-phone { grid-area: auto; grid-column: 1; grid-row: 2 / 7; align-self: start; }
.fx-wide .fx-client-phone .fx-list { flex: none; max-height: none; overflow: visible; }
.fx-payer-head { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 1rem; font-weight: 650; color: #f4f4f5; }
.fx-payer-rate { display: flex; align-items: center; gap: .7rem; margin: .6rem 0; font-size: 1.05rem; color: #f4f4f5; }
.fx-payer-rate .cc-dots { gap: 6px; padding: 6px 8px; background: rgba(255, 255, 255, .1); }
.fx-payer-rate .cc-dots i { width: 18px; height: 18px; }
.fx-payer-rate .cc-dots i.off { background: rgba(255, 255, 255, .2); }
.fx-payer-figs { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; margin: 0; }
.fx-payer-figs dt { font-size: .74rem; color: #c9ccd2; }
.fx-payer-figs dd { margin: .1rem 0 0; font-size: 1.3rem; font-weight: 700; color: #f4f4f5; }
.fx-payer-figs dd small { font-size: .74rem; font-weight: 600; color: #c9ccd2; }
.fx-payer-figs .is-bad dd { color: #fe5858; }
.fx-payer-bar.p4-slider { margin: 1rem 0 .4rem; background: rgba(255, 255, 255, .2); }
.fx-payer-bar .p4-slider-fill { background: #f4f4f5; }
.fx-payer-bar .p4-slider-fill::after { background: #299cff; border-color: #f4f4f5; }
.fx-payer-last { margin: 0; font-size: .8rem; color: #c9ccd2; }
.fx-promo-tab .cc-dots { margin-left: .2rem; }
/* … and the merged Details card white, black text (2026-10-28). */
main .fx .fx-phone .card.fx-details.fx-payer { background: #fff; color: #000; border-color: transparent; }
main .fx .fx-payer .card-head h2, main .fx .fx-payer .fx-list dd, .fx-payer .fx-payer-head, .fx-payer .fx-payer-rate, .fx-payer .fx-payer-figs dd { color: #000; }
main .fx .fx-payer .fx-list dt, .fx-payer .fx-payer-figs dt, .fx-payer .fx-payer-figs dd small, .fx-payer .fx-payer-last { color: rgba(0, 0, 0, .6); }
main .fx .fx-payer .fx-list > div { border-color: rgba(0, 0, 0, .12); }
.fx-payer .fx-payer-head { border-top-color: rgba(0, 0, 0, .14); }
.fx-payer .fx-payer-rate .cc-dots { background: rgba(0, 0, 0, .08); }
.fx-payer .fx-payer-rate .cc-dots i.off { background: rgba(0, 0, 0, .18); }
.fx-payer .fx-payer-figs .is-bad dd { color: #fe5858; }
.fx-payer .fx-payer-bar.p4-slider { background: rgba(0, 0, 0, .16); }
.fx-payer .fx-payer-bar .p4-slider-fill { background: #000; }
.fx-payer .fx-payer-bar .p4-slider-fill::after { border-color: #000; }
main .fx .fx-payer .round-btn { background: #000; color: #fff; border-color: #000; }
.fx.fx-wide > .fx-client-phone { margin-top: 0; grid-row: 1 / 7; }
.fx-wide .fx-client-phone .fx-list { min-height: 0; padding-bottom: 0; -webkit-mask-image: none; mask-image: none; }
/* A client card's WhatsApp-link channel as the WhatsApp mark, not words. */
.cc-chip.cc-wa { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; background: #25d366; color: #fff; }
.cc-chip.cc-wa svg { width: 15px; height: 15px; }

/* The side icons name themselves on hover (and keyboard focus): the label
   as a dark pill beside the icon (2026-10-28). */
@media (min-width: 701px) {
  body.app .side-nav a, body.app .side-wa { position: relative; overflow: visible; }
  body.app .side-nav a:is(:hover, :focus-visible) .side-label,
  body.app .side-wa:is(:hover, :focus-visible) .side-label {
    position: absolute; left: calc(100% + 12px); top: 50%; z-index: 50; transform: translateY(-50%);
    width: auto; height: auto; clip: auto; overflow: visible; white-space: nowrap; pointer-events: none;
    padding: 6px 12px; border-radius: 999px; background: #0d0d0f; color: #f4f4f5;
    font-size: .82rem; font-weight: 700; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .12);
  }
}
/* Home's Project card orange (2026-10-28): red is kept for errors. */
.kh-card.kh-red { background: #ff9a3c; }
.kh-card.kh-red, .kh-card.kh-red .kh-card-sub { color: #000; }

/* Pop-ups in the theme (2026-10-28): the forms' pop-ups, bp's question and
   the confirm dialog (app.js, in place of the browser's) as the Home cards —
   near-black with the blue glow, light text, glassy inputs, the page
   blurred behind. bp's green ready gates keep their colour. */
main.look-bento .fx-pop:not(.fx-pop-bare), .bp-ask-card, .sa-confirm-card {
  background: radial-gradient(120% 70% at 100% 0%, rgba(41, 156, 255, .3), transparent 60%), #0d0d0f;
  color: #f4f4f5; border: 1px solid rgba(255, 255, 255, .14); border-radius: 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, .65);
}
.fx-pop::backdrop { background: rgba(5, 6, 10, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bp-ask, .sa-confirm { background: rgba(5, 6, 10, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
main.look-bento .fx-pop h2, .bp-ask-card h2, main.look-bento .fx-pop label, main.look-bento .fx-pop .card-head h2 { color: #f4f4f5; }
main.look-bento .fx-pop .sub, main.look-bento .fx-pop .hint, .bp-ask-card .hint { color: #c9ccd2; }
main.look-bento .fx-pop :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea), .bp-ask-form input {
  background: rgba(255, 255, 255, .08); color: #f4f4f5; border: 1px solid rgba(255, 255, 255, .16);
}
main.look-bento .fx-pop :is(input, textarea)::placeholder, .bp-ask-form input::placeholder { color: #8d9099; }
main.look-bento .fx-pop .check { background: rgba(255, 255, 255, .06); color: #f4f4f5; }
main.look-bento .fx-pop .round-btn, .bp-ask-card .round-btn { background: rgba(255, 255, 255, .12); color: #fff; }
main.look-bento .fx-pop .btn.primary, .sa-confirm .btn.primary, .bp-ask-form .btn { background: #299cff; color: #000; border: 0; font-weight: 700; }
.bp-ask-ctx { background: rgba(255, 255, 255, .06); color: #e4e6ea; }
.bp-ask-opts button { background: #f4f4f5; color: #0d0d0f; }

.sa-confirm { position: fixed; inset: 0; z-index: 120; display: none; place-items: center; padding: 1rem; }
.sa-confirm.is-open { display: grid; }
.sa-confirm-card { width: min(420px, 100%); padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 1.1rem; }
.sa-confirm-text { margin: 0; font-size: 1.02rem; font-weight: 600; line-height: 1.4; }
.sa-confirm-btns { display: flex; justify-content: flex-end; gap: .6rem; }
.sa-confirm .btn { padding: .55rem 1.2rem; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #f4f4f5; border: 0; cursor: pointer; font: inherit; font-weight: 600; }

/* Every client card one size (2026-10-28): a fixed height; the name and
   mobile one line each, the rating and what's owed a line each, so no card
   grows with its text. */
.cc-card { height: 164px; }
.cc-name, .cc-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-rate { min-width: 0; }
.cc-rate small span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Status tiles on a phone (2026-10-28): one compact row that scrolls
   sideways, not a block of rows above the cards. */
@media (max-width: 760px) {
  .look-bento .tabs:not(.tabs-compact) {
    display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px;
  }
  .look-bento .tabs:not(.tabs-compact)::-webkit-scrollbar { display: none; }
  .look-bento .tabs:not(.tabs-compact) a {
    flex: 0 0 auto; width: auto; min-width: 92px; min-height: 0; padding: .55rem .8rem; border-radius: 16px; scroll-snap-align: start;
  }
  .look-bento .tabs:not(.tabs-compact) .count { font-size: 1.45rem; }
}

/* The bill page's Cancel bill and Finish on the sheets cards readable on the
   dark (2026-10-28): their headings and notes were near-black. */
main.look-bento .fx :is(.fx-do, .fx-finish) .card-head h2 { color: #f4f4f5; }
main.look-bento .fx :is(.fx-do, .fx-finish) .hint { color: #c9ccd2; }
main.look-bento .fx .fx-finish .btn-do { color: #299cff; }
main.look-bento .fx .fx-do .btn-do.danger { color: #fe5858; }

/* Bills in decks by work type (2026-10-29), as Clients' letter decks: the
   pile's sheets in the work type's colour; an open deck the full width. */
.bill-bar { margin: 4px 0 10px; }
.bill-stacks .cc-stack[open] { grid-column: 1 / -1; }
.bill-stacks .cc-sheet { color: #000; }
.bill-stacks .cc-sheet.wt-html { background: var(--wt-html); }
.bill-stacks .cc-sheet.wt-pd { background: var(--wt-pd); }
.bill-stacks .cc-sheet.wt-calf { background: var(--wt-calf); }
.bill-stacks .cc-sheet.wt-camp { background: var(--wt-camp); }
.bill-stacks .cc-sheet.wt-other { background: var(--wt-other); }
.bill-stacks .cc-sheet small { opacity: .8; }
/* A pop-up's ink button (Save) light on the dark pop-up. */
main.look-bento .fx-pop .btn.ink { background: #f4f4f5; color: #0d0d0f; border: 0; font-weight: 700; }
main.look-bento .fx-pop .st-note { color: #c9ccd2; }
/* The report folder link, until its folder is found. */
.fx-share .btn-do.is-waiting { opacity: .45; pointer-events: none; }
.fx-share .hint a { color: #299cff; }
.fx-share-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fx-share-btns .btn { background: rgba(255, 255, 255, .12); color: #f4f4f5; border: 0; }
/* The request page's Bills card: the new client's mobile and email small
   under the name, Change beneath them, small too. */
.req-payer-sub { margin: .1rem 0 .4rem; font-size: .78rem; opacity: .85; overflow-wrap: anywhere; }
.req-payer > summary { font-size: .78rem; cursor: pointer; }
/* A request's / work order's Details show every line (the metaJSON fields
   too), not a few that fade out. */
.req-details .fx-list { max-height: none; padding-bottom: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }

/* A section heading with its Expand / Collapse all as a ⊕ / ⊖ right beside
   it (Bills: Current bills, Recent bill activity). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lc-bar.sec-head { display: flex; align-items: center; gap: 10px; }
.lc-bar.sec-head h2 { margin: 0; }
.lc-bar.sec-head .round-btn { margin-left: auto; }
.cc-all.cc-all-icon-only { padding: 0; background: none; box-shadow: none; }
.cc-all.cc-all-icon-only .cc-all-icon { width: 28px; height: 28px; }

/* The phone-like stacks (request, work order, bill, client pages) in the
   theme (2026-10-29): near-black with the blue glow, as the Home cards, and
   their plain cards — Details, AI / PD tiles, Messages sent, History — as
   dark glass instead of flat grey; the coloured cards keep their colour. */
.look-bento .req-phone {
  background: radial-gradient(120% 55% at 100% 0%, rgba(41, 156, 255, .22), transparent 60%), #0d0d0f;
}
.look-bento .fx-phone {
  background: linear-gradient(#4a7cf6 0 80px, transparent 80px), radial-gradient(120% 55% at 100% 20%, rgba(41, 156, 255, .2), transparent 60%), #0d0d0f;
}
.look-bento :is(.req-phone, .fx-phone) > .card:not(.req-user):not(.fx-payer):not(.req-message):not(.fx-green),
.look-bento :is(.req-phone, .fx-phone) .pair > .card {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); box-shadow: none;
}
.look-bento :is(.req-phone, .fx-phone) > .card:not(.req-user):not(.fx-payer):not(.req-message):not(.fx-green) .card-head h2,
.look-bento :is(.req-phone, .fx-phone) > .card:not(.req-user):not(.fx-payer):not(.req-message):not(.fx-green) .change-head { color: #f4f4f5; }
.lc-bar.sec-head { justify-content: flex-start; }

/* Contrast fixes from the visual audit (2026-10-29): every text at least
   3:1 against what's behind it. */
/* Status tile figures on white: darker blue and green. */
.look-bento .tabs a:not([aria-current]):is([href*="f=new"], [href*="f=unbilled"], [href*="f=tobill"], [href*="f=open"], [href*="f=bill"]) .count { color: #1268c9; }
.look-bento .tabs a:not([aria-current]):is([href*="f=paid"], [href*="f=done"], [href*="f=receipt"]) .count { color: #0e8a52; }
/* A work order's Next card: light text on its dark card. */
.look-bento .req-approve .card-head h2, .look-bento .req-approve .req-bills, .look-bento .req-approve .req-bills strong { color: #f4f4f5; }
/* Paid (green) calendar tiles and day tiles: dark text. */
.look-bento .p4-cal a.p4-d.pay { color: #0d0d0f; }
.wm-day.wm-green, .wm-day.wm-green b, .wm-day.wm-green span, .wm-day.wm-green small { color: #0d0d0f; }
/* The day timeline's light event pills: dark text. */
.look-bento .cal-ev.tone-ok, .look-bento .cal-ev.tone-ok b, .look-bento .cal-ev.tone-req b, .look-bento .cal-ev.tone-pay b { color: #0d0d0f; }
.look-bento .cal-ev.tone-ok small, .look-bento .cal-ev.tone-ok .mono { color: rgba(13, 13, 15, .7); }
/* Finance's coloured chart cards: their subtitles dark. */
.look-bento .chart-tone .sub, .look-bento .chart-tone .chart-sub { color: rgba(13, 13, 15, .72); }
.look-bento .cal-ev.tone-bill, .look-bento .cal-ev.tone-bill b { color: #0d0d0f; }
.look-bento .cal-ev.tone-bill small, .look-bento .cal-ev.tone-bill .mono { color: rgba(13, 13, 15, .7); }

/* Home's Next up card: a slight outline, like the cards beside it. */
.wm-next { border: 1px solid rgba(255, 255, 255, .16); }

/* Animations (2026-10-29), only for those who haven't asked for reduced
   motion (app.js adds html.motion):
   - cards rise in as a page opens, one after another;
   - cards lift a little under the pointer;
   - an opened deck deals its cards out;
   - the speedometer's arc and needle sweep up to the rate. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
  @keyframes deal-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
  @keyframes sweep { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes needle-in { from { transform: rotate(-70deg); } }

  .motion :is(.wm-card, .kh-card, .k-card, .cc-stack, .lc-grid > .lc, .lc-grid > .lc-wrap, .tabs a, .req-phone, .fx > .card, .req-bento > .card) {
    animation: rise-in 460ms cubic-bezier(.2, .8, .2, 1) both;
  }
  .motion :is(.kh-five, .k-grid, .cc-stacks, .lc-grid, .tabs, .fx, .req-bento) > :nth-child(2) { animation-delay: 40ms; }
  .motion :is(.kh-five, .k-grid, .cc-stacks, .lc-grid, .tabs, .fx, .req-bento) > :nth-child(3) { animation-delay: 80ms; }
  .motion :is(.kh-five, .k-grid, .cc-stacks, .lc-grid, .tabs, .fx, .req-bento) > :nth-child(4) { animation-delay: 120ms; }
  .motion :is(.kh-five, .k-grid, .cc-stacks, .lc-grid, .tabs, .fx, .req-bento) > :nth-child(5) { animation-delay: 160ms; }
  .motion :is(.kh-five, .k-grid, .cc-stacks, .lc-grid, .tabs, .fx, .req-bento) > :nth-child(6) { animation-delay: 200ms; }
  .motion :is(.kh-five, .k-grid, .cc-stacks, .lc-grid, .tabs, .fx, .req-bento) > :nth-child(7) { animation-delay: 240ms; }
  .motion :is(.kh-five, .k-grid, .cc-stacks, .lc-grid, .tabs, .fx, .req-bento) > :nth-child(n+8) { animation-delay: 280ms; }

  :is(.wm-card, .kh-card, a.lc, .cc-card, .k-card, .work-tile) { transition: transform 180ms ease, box-shadow 180ms ease; }
  :is(.wm-card, .kh-card, a.lc, .cc-card, button.k-card, .work-tile):hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7); }

  .cc-stack[open] > :is(.cc-grid, .lc-grid) > * { animation: deal-in 380ms cubic-bezier(.2, .8, .2, 1) both; }
  .cc-stack[open] > :is(.cc-grid, .lc-grid) > :nth-child(2) { animation-delay: 35ms; }
  .cc-stack[open] > :is(.cc-grid, .lc-grid) > :nth-child(3) { animation-delay: 70ms; }
  .cc-stack[open] > :is(.cc-grid, .lc-grid) > :nth-child(4) { animation-delay: 105ms; }
  .cc-stack[open] > :is(.cc-grid, .lc-grid) > :nth-child(n+5) { animation-delay: 140ms; }

  .motion .kh-gauge .kh-arc-fill { stroke-dasharray: 1; animation: sweep 1100ms cubic-bezier(.2, .8, .2, 1) 200ms both; }
  .motion .kh-gauge .kh-needle { transform-box: view-box; transform-origin: 150px 150px; animation: needle-in 1100ms cubic-bezier(.2, .8, .2, 1) 200ms both; }
}

/* ── Every coloured card in Next up's style (2026-10-29) ──
   Near-black, a soft blur of its own colour in the top-right corner, a thin
   outline and white text — the colour now a glow, not a fill. --glow is
   the card's colour (r, g, b). The per-user cards (Requests, Bills,
   Working), Settings and Clients keep their colour fills. */
body.app {
  --g-blue: 41, 156, 255; --g-orange: 255, 154, 60; --g-mint: 62, 234, 156; --g-lime: 146, 229, 10;
  --g-white: 226, 230, 236; --g-green: 91, 211, 60; --g-red: 254, 88, 88; --g-yellow: 255, 205, 60;
}
body.app :is(.kh-card.kh-blue,
  .fx-promo, .req-message, .fx-green.fx-blue) { --glow: var(--g-blue); }
body.app :is(.kh-card.kh-red, .k-card.coral) { --glow: var(--g-orange); }
body.app :is(.kh-card.kh-lime) { --glow: var(--g-lime); }
body.app :is(.req-user, .fx-green, .fx-paid, .k-card.green) { --glow: var(--g-green); }
body.app :is(.k-card.slate) { --glow: var(--g-white); }
body.app .k-card.mustard { --glow: var(--g-yellow); }
body.app .k-card:not(.mustard):not(.green):not(.coral):not(.slate) { --glow: var(--g-blue); }

body.app main.look-bento :is(.kh-card, .k-card:not(.st-k4 *), .fx-promo, .req-message, .req-user, .fx-green, .fx-paid):not(.fx-payer) {
  background: radial-gradient(circle at 92% 0%, rgba(var(--glow), .9) 0 18%, transparent 42%), #0d0d0f !important;
  color: #f4f4f5 !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
}
/* Their text white; secondary text a softer white; pills glassy. */
body.app main.look-bento :is(.kh-card, .k-card:not(.st-k4 *), .fx-promo,
  .req-message, .req-user, .fx-green, .fx-paid):not(.fx-payer) :is(h1, h2, h3, b, strong, .lc-id, .lc-name, .bc-amt, .lc-big, .lc-act,
  .cc-name, .req-name, .fx-balance, .k-value, .k-head, .change-big, .fx-paid-amt, .fx-paid-what, .work-tile-top, .hero-copy, .fx-promo-user, label) { color: #f4f4f5 !important; }
body.app main.look-bento :is(.kh-card, .k-card:not(.st-k4 *), .fx-promo,
  .req-message, .req-user, .fx-green, .fx-paid):not(.fx-payer) :is(small, .lc-meta, .lc-sub, .cc-sub, .k-sub, .hint, .fx-small, .work-tile-sheet,
  .work-tile-status, .fx-paid-when, .kh-card-sub, .cc-foot small, dt, .req-person, .sub) { color: rgba(244, 244, 245, .72) !important; }
body.app main.look-bento :is(.kh-card, .req-user, .fx-promo) .pill:not(.pill-bad) {
  background: rgba(255, 255, 255, .14); color: #f4f4f5;
}
body.app main.look-bento .fx-paid-rows a { border-bottom-color: rgba(255, 255, 255, .12); }
body.app main.look-bento :is(.fx-green, .req-message) :is(input, textarea, select) { background: rgba(255, 255, 255, .08); color: #f4f4f5; border: 1px solid rgba(255, 255, 255, .16); }
/* … their pills, links and small labels light too; a trouble pill red. */
body.app main.look-bento :is(.kh-card, .k-card:not(.st-k4 *), .fx-promo, .req-message, .req-user, .fx-green, .fx-paid):not(.fx-payer) .pill {
  background: rgba(255, 255, 255, .14) !important; color: #f4f4f5 !important; border-color: transparent !important;
}
body.app main.look-bento :is(.kh-card, .k-card:not(.st-k4 *), .fx-promo, .req-message, .req-user, .fx-green, .fx-paid):not(.fx-payer) .pill.pill-bad {
  background: #fe5858 !important; color: #0d0d0f !important;
}
body.app main.look-bento :is(.fx-promo, .req-message, .req-user, .fx-green, .fx-paid) :is(a:not(.btn):not(.btn-do):not(.round-btn), .st, .ms-when, .ms-label, .ms-name, span:not(.pill):not(.round-btn):not(.icon)) {
  color: inherit;
}
/* Pills and toggles on a glowing card: dark glass, readable over any glow. */
body.app main.look-bento :is(.kh-card, .k-card:not(.st-k4 *), .fx-promo, .req-message, .req-user, .fx-green, .fx-paid):not(.fx-payer) :is(.pill:not(.pill-bad), .pill-toggle, .pill-toggle span) {
  background: rgba(13, 13, 15, .6) !important; color: #f4f4f5 !important; border-color: rgba(255, 255, 255, .2) !important;
}
body.app main.look-bento .fx-green .btn.primary { background: #f4f4f5; color: #0d0d0f; border: 0; font-weight: 700; }

/* The request page's left stack (User, Details, AI / PD) as one Next up
   card (2026-10-29): near-black, the green glow in its top-right corner,
   the User card see-through so the stack reads as one card. */
body.app main.look-bento .req-phone.req-left {
  background: radial-gradient(circle 240px at 92% 0%, rgba(var(--g-green), .9) 0 30%, transparent 100%), #0d0d0f;
  border-color: rgba(255, 255, 255, .16);
}
body.app main.look-bento .req-phone.req-left > .card.req-user {
  background: transparent !important; border-color: transparent !important;
}
/* The middle stack (Summary, review table, Messages sent) the same way, in
   blue. */
body.app main.look-bento .req-phone.req-mid {
  background: radial-gradient(circle 240px at 92% 0%, rgba(var(--g-blue), .9) 0 30%, transparent 100%), #0d0d0f;
  border-color: rgba(255, 255, 255, .16);
}
body.app main.look-bento .req-phone.req-mid > .card.req-message {
  background: transparent !important; border-color: transparent !important;
}
/* More room at the page's sides (2026-10-29): the cards stood too close to
   the window edge; Home keeps its own edge-to-edge panel. */
@media (min-width: 701px) {
  body.app:has(main.look-bento) main.look-bento { padding-left: 2.6rem; padding-right: 2.6rem; }
  body.app:has(.wm.kh) main.look-bento { padding: 0; }
}

/* Status tiles filled with their figure's colour (2026-10-29): blue = to act
   on, red = to chase, green = done; dark text on the fill. The tile you're
   on keeps its fill and gets a white ring. */
body.app main.look-bento .tabs a:is([href*="f=new"], [href*="f=unbilled"], [href*="f=tobill"], [href*="f=open"], [href*="f=bill"], [href*="f=tosend"]) { background: #299cff; }
body.app main.look-bento .tabs a:is([href*="f=overdue"], [href*="f=needs-call"], [href*="f=failed"], [href*="f=link"], [href*="f=rejected"]) { background: #fe5858; }
body.app main.look-bento .tabs a:is([href*="f=paid"], [href*="f=done"], [href*="f=receipt"]) { background: #22c47e; }
body.app main.look-bento .tabs a:is([href*="f=new"], [href*="f=unbilled"], [href*="f=tobill"], [href*="f=open"], [href*="f=bill"], [href*="f=tosend"], [href*="f=overdue"], [href*="f=needs-call"], [href*="f=failed"], [href*="f=link"], [href*="f=rejected"], [href*="f=paid"], [href*="f=done"], [href*="f=receipt"]),
body.app main.look-bento .tabs a:is([href*="f=new"], [href*="f=unbilled"], [href*="f=tobill"], [href*="f=open"], [href*="f=bill"], [href*="f=tosend"], [href*="f=overdue"], [href*="f=needs-call"], [href*="f=failed"], [href*="f=link"], [href*="f=rejected"], [href*="f=paid"], [href*="f=done"], [href*="f=receipt"]) :is(*, .count) { color: #0d0d0f; }
body.app main.look-bento .tabs a[aria-current="page"] { box-shadow: 0 0 0 2px #f4f4f5, 0 0 0 4px rgba(13, 13, 15, .9); }

/* The year tracker's figure cards (2026-10-29): the label top left, the
   amount top right with last year's under it, and the graph filling the
   rest of the card. */
.fy-quad .fy-panel:not(.fy-wide) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr);
  column-gap: .8rem; min-height: 16rem;
}
.fy-quad .fy-panel:not(.fy-wide) .fy-label { grid-column: 1; grid-row: 1; align-self: start; margin: .35rem 0 0; }
.fy-quad .fy-panel:not(.fy-wide) .fy-this { grid-column: 2; grid-row: 1; margin: 0; text-align: right; font-size: clamp(1.4rem, 1.9vw, 1.9rem); }
.fy-quad .fy-panel:not(.fy-wide) .fy-last { grid-column: 2; grid-row: 2; margin: .2rem 0 0; text-align: right; font-size: .85rem; }
.fy-quad .fy-panel:not(.fy-wide) .fy-chart { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: flex-end; margin-top: .7rem; }
.fy-quad .fy-panel:not(.fy-wide) .fy-chart svg { display: block; width: 100%; height: auto; }
.fy-quad .fy-panel:not(.fy-wide) .fy-chart .line.s-accent { stroke-width: 2.6; }
.fy-quad .fy-panel:not(.fy-wide) .fy-chart .line.s-context { stroke-width: 1.8; }

/* 2026-10-30: a paid bill's pill is a green rupee; the phone's top-bar
   name light on its dark bar; the Selected period card only as wide as
   its filter, not the Income section's width. */
.pill-paid { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ok); color: #0d0d0f; vertical-align: middle; }
.pill-paid .icon { width: 15px; height: 15px; stroke-width: 2.2; }
@media (max-width: 860px) {
  body.app:has(main.look-bento) .sidebar .brand, body.app:has(main.look-bento) .sidebar .brand:hover { color: #f4f4f5; }
}
.fy-full > .fy-track { align-self: flex-start; }

/* Bill cards as folders (2026-10-30, after the operator's folder
   reference): a darker back panel with its tab, a white sheet peeking out
   with the work type on its corner, the coloured front holding the card. */
.bc-grid .lc.bc-folder, .bc-grid > .lc-wrap > .lc.bc-folder {
  --fc: var(--wt-other); position: relative; isolation: isolate; display: block; min-height: 0; margin-top: 16px; padding: 0;
  border: 0; border-radius: 0; box-shadow: none; overflow: visible; background: transparent !important;
}
.bc-grid .lc.bc-folder.wt-html, .bc-grid > .lc-wrap > .lc.bc-folder.wt-html { --fc: var(--wt-html); }
.bc-grid .lc.bc-folder.wt-pd, .bc-grid > .lc-wrap > .lc.bc-folder.wt-pd { --fc: var(--wt-pd); }
.bc-grid .lc.bc-folder.wt-calf, .bc-grid > .lc-wrap > .lc.bc-folder.wt-calf { --fc: var(--wt-calf); }
.bc-grid .lc.bc-folder.wt-camp, .bc-grid > .lc-wrap > .lc.bc-folder.wt-camp { --fc: var(--wt-camp); }
.bcf-back { position: absolute; inset: 0 0 8px; z-index: 0; border-radius: 16px; background: color-mix(in srgb, var(--fc) 72%, #000); }
.bcf-back::before { content: ""; position: absolute; top: -12px; left: 0; width: 44%; height: 24px; border-radius: 12px 12px 0 0; background: inherit; }
.bcf-paper {
  position: absolute; top: 5px; left: 6%; right: 6%; height: 44px; z-index: 1; padding: 4px 10px; border-radius: 10px;
  background: #fff; color: #0d0d0f; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2;
}
.bcf-front {
  position: relative; z-index: 2; display: flex; flex-direction: column; gap: .2rem; min-height: 112px; margin-top: 22px;
  padding: .55rem .75rem .6rem; border-radius: 0 16px 16px 16px; background: var(--fc); color: #000;
}
.bcf-front::before { content: ""; position: absolute; top: -10px; right: 0; width: 64%; height: 22px; border-radius: 16px 16px 0 0; background: var(--fc); }
.bcf-front > * { position: relative; }
.bc-folder .bc-foot { margin-top: auto; }
.bc-folder:hover .bcf-front, .bc-folder:hover .bcf-front::before { filter: brightness(1.05); }
.bc-folder:hover .bcf-paper { transform: translateY(-3px); }
.bcf-paper { transition: transform 150ms ease; }
/* A paid bill's folder in the Paid tile's green, whatever its work; the
   rupee badge ink on it. */
.bc-grid .lc.bc-folder.is-paid { --fc: #22c47e; }
.bc-folder.is-paid .pill-paid { background: #0d0d0f; color: #22c47e; }



/* Finance Bills as a bento (2026-10-30; financeBento.go): the layout of the
   operator's "Modern & Clean Dashboard Elements" reference in the
   dashboard's own theme — dark glass cards with the blue / green glow,
   light text, the blue and green accents, one white circle. */
.fb { --fb-card: #0d0d0f; --fb-line: rgba(255, 255, 255, .12); --fb-fg: #f4f4f5; --fb-muted: #a3a6ad; --fb-blue: #4a7cf6; --fb-blue-2: #8fb0ff;
  --fb-green: #22c47e; --fb-green-2: #9be7c4; --fb-glass: rgba(255, 255, 255, .07);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin: 6px 0 2rem; color: var(--fb-fg); }
.fb a { color: inherit; text-decoration: none; }
.fb-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px; border-radius: 26px; overflow: hidden;
  background: radial-gradient(circle 220px at 96% 0%, rgba(74, 124, 246, .45) 0 20%, transparent 100%), var(--fb-card); border: 1px solid var(--fb-line); }
.fb-card:nth-child(even) { background: radial-gradient(circle 220px at 96% 0%, rgba(34, 196, 126, .38) 0 20%, transparent 100%), var(--fb-card); }
a.fb-card { transition: transform 150ms ease, border-color 150ms ease; }
a.fb-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .28); }
main.look-bento .fb :is(h3, p, b, small, span) { text-shadow: none; }
main.look-bento .fb h3 { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: var(--fb-fg); line-height: 1.2; }
.fb-sub { margin: 4px 0 0; color: var(--fb-muted); font-size: .76rem; line-height: 1.35; }
.fb-center { text-align: center; }
.fb .icon { width: 18px; height: 18px; }

/* Placement: three rows, as the reference. */
.fb-clients { grid-column: 1 / 5; grid-row: 1; }
.fb-steps { grid-column: 5 / 7; grid-row: 1; }
.fb-venn { grid-column: 7 / 11; grid-row: 1 / 3; }
.fb-three { grid-column: 11 / 13; grid-row: 1 / 3; }
.fb-total { grid-column: 1 / 5; grid-row: 2; }
.fb-score { grid-column: 5 / 7; grid-row: 2; }
.fb-progress { grid-column: 1 / 3; grid-row: 3; }
.fb-stack { grid-column: 3 / 5; grid-row: 3; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fb-owed { grid-column: 5 / 7; grid-row: 3; }
.fb-growth { grid-column: 7 / 9; grid-row: 3; }
.fb-year { grid-column: 9 / 13; grid-row: 3; }
@media (max-width: 1180px) {
  .fb { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fb > * { grid-row: auto !important; }
  .fb-clients, .fb-total, .fb-venn, .fb-year { grid-column: span 6 !important; }
  .fb-steps, .fb-score, .fb-three, .fb-progress, .fb-stack, .fb-owed, .fb-growth { grid-column: span 3 !important; }
}
@media (max-width: 640px) { .fb > * { grid-column: 1 / -1 !important; } }

/* Clients */
.fb-brand { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
.fb-brand-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fb-blue); color: #fff; }
.fb-brand-ico .icon { width: 15px; height: 15px; }
.fb-brand b { display: block; font-size: .62rem; letter-spacing: .04em; }
.fb-brand small { display: block; font-size: .62rem; color: var(--fb-muted); }
.fb-map { position: absolute; right: -6px; top: 10px; width: 62%; height: auto; opacity: .9; }
.fb-map circle { fill: #fff; }
main.look-bento .fb .fb-caps { position: relative; z-index: 1; margin-top: 18px; font-size: 1.1rem; font-weight: 800; text-transform: uppercase; }
main.look-bento .fb-huge { position: relative; z-index: 1; margin: auto 0 0; font-size: 2.9rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--fb-fg); }
.fb-huge small { margin-left: 6px; font-size: .95rem; font-weight: 500; letter-spacing: 0; color: var(--fb-muted); }
.fb-note { position: relative; z-index: 1; margin: 4px 0 0; font-size: .72rem; color: var(--fb-muted); }

/* Steps */
main.look-bento .fb-steps h3 { font-size: 1.15rem; font-weight: 400; }
main.look-bento .fb-steps h3 b { font-weight: 700; }
.fb-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: auto; padding-top: 14px; }
.fb-tiles a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 2px 10px; border-radius: 16px; background: var(--fb-glass); }
.fb-tiles a.is-on { background: var(--fb-green); color: #0d0d0f; }
.fb-tiles a.is-on small { color: #0d0d0f; }
.fb-tiles a:hover { background: #fff; color: #0d0d0f; }
.fb-tiles b { font-size: .95rem; }
.fb-tiles small { font-size: .58rem; color: var(--fb-muted); }

/* Venn */
main.look-bento .fb-venn h3 { text-align: center; font-size: 1.45rem; font-weight: 500; }
.fb-circles { position: relative; flex: 1; min-height: 260px; margin: 14px -22px 10px; }
.fb-c { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; text-align: center; transition: transform 200ms ease; }
.fb-c:hover { transform: scale(1.03); }
.fb-c b { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.fb-c small { margin-top: 3px; font-size: .64rem; line-height: 1.25; }
.fb-c-blue { left: -4%; top: 6%; width: 46%; aspect-ratio: 1; background: linear-gradient(135deg, #2f5fe0, #4a7cf6 55%, #8fb0ff); color: #fff; padding-left: 6%; }
.fb-c-mint { right: -4%; top: 22%; width: 46%; aspect-ratio: 1; background: linear-gradient(135deg, #4a7cf6, #22c47e); color: #0d0d0f; padding-right: 4%; }
.fb-c-grey { left: 37%; top: 0; width: 30%; aspect-ratio: 1; background: #26262c; z-index: 2; color: var(--fb-fg); border: 1px solid var(--fb-line); }
.fb-c-ink { left: 30%; top: 40%; width: 28%; aspect-ratio: 1; background: #f4f4f5; z-index: 3; }
.fb a.fb-c-ink, main.look-bento .fb .fb-c-ink :is(b, small) { color: #0d0d0f; }
.fb-c-ink b { font-size: 1.15rem; }

/* Last three months */
main.look-bento .fb-big { margin: 0; font-size: 2.6rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--fb-fg); }
.fb-lead { margin: 4px 0 0; font-size: .86rem; line-height: 1.25; color: var(--fb-muted); }
.fb-lead b { color: var(--fb-fg); }
.fb-three svg { display: block; width: 100%; height: auto; margin-top: auto; }
.fb-axis { stroke: rgba(255, 255, 255, .35); stroke-width: 1; }
.fb-bar-total { fill: rgba(255, 255, 255, .14); }
.fb-bar-paid { fill: var(--fb-green); }
.fb-bar-pct { font-size: 11px; font-weight: 700; fill: var(--fb-fg); }
.fb-tick { font-size: 10px; fill: var(--fb-muted); }

/* Total outstanding */
.fb-total-head { display: flex; gap: 18px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--fb-line); }
main.look-bento .fb-total-head h3 { flex: none; font-size: 1.45rem; font-weight: 400; letter-spacing: .01em; }
.fb-total-head .fb-sub { margin: 2px 0 0; max-width: 220px; font-size: .7rem; }
.fb-total-body { display: flex; align-items: center; gap: 22px; margin-top: auto; padding-top: 12px; }
.fb-vpill { flex: none; writing-mode: vertical-rl; transform: rotate(180deg); padding: 14px 8px; border-radius: 10px; background: var(--fb-green); color: #0d0d0f; font-size: .72rem; font-weight: 600; }
main.look-bento .fb-money { margin: 0; font-size: clamp(2.6rem, 4.6vw, 4.4rem); font-weight: 300; letter-spacing: -.04em; line-height: 1; color: var(--fb-fg); overflow-wrap: anywhere; }

/* Paid on time */
.fb-score svg { display: block; width: 100%; height: auto; margin-top: 6px; }
.fb-seg { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 26; }
.fb-seg.is-on { stroke: var(--fb-blue-2); }
.fb-seg.is-on:last-child { stroke: var(--fb-blue); }
.fb-score-num { font-size: 22px; font-weight: 800; fill: var(--fb-fg); }
.fb-score-k { font-size: 8px; fill: var(--fb-muted); }
.fb-legend { display: flex; justify-content: space-between; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; font-size: .64rem; font-weight: 700; }
.fb-legend i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--fb-blue); vertical-align: middle; }
.fb-legend i.is-2 { background: var(--fb-blue-2); }
.fb-legend i.is-3 { background: rgba(255, 255, 255, .25); }
.fb-legend small { display: block; padding-left: 10px; font-weight: 400; color: var(--fb-muted); }

/* Paid in full */
main.look-bento .fb-progress h3 { font-size: .95rem; }
main.look-bento .fb-arrow { margin: auto 0 0; font-size: 2.7rem; font-weight: 300; letter-spacing: -.04em; line-height: 1; color: var(--fb-fg); }
.fb-arrow span { margin-right: 4px; color: var(--fb-green); }

/* Gradient + monthly */
.fb-card.fb-grad { flex: 1; justify-content: center; background: linear-gradient(120deg, #2f5fe0, #4a7cf6 45%, #22c47e); border: 0; color: #fff; }
main.look-bento .fb-grad b { font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #fff; }
.fb-grad span { margin-top: 6px; font-size: .64rem; font-weight: 700; letter-spacing: .04em; }
main.look-bento .fb-grad small { font-size: .62rem; color: rgba(255, 255, 255, .85); }
.fb-month { flex-direction: row; align-items: center; gap: 10px; padding: 14px 16px; }
.fb-month-ico { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--fb-blue); color: #fff; }
.fb-month p { margin: 0; font-size: .72rem; }
.fb-month b { display: block; font-size: .78rem; }
.fb-month small { display: block; color: var(--fb-muted); font-size: .64rem; line-height: 1.3; }
.fb-month em { font-style: normal; font-weight: 700; color: var(--fb-green); }

/* Where it's owed */
.fb-owed-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.fb-dots-btn { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--fb-blue); color: #fff; }
.fb-dots-btn .icon { width: 14px; height: 14px; }
.fb-owed ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: .82rem; }
.fb-owed li { display: flex; justify-content: space-between; }
.fb-owed li.fade-1 { opacity: .72; } .fb-owed li.fade-2 { opacity: .52; } .fb-owed li.fade-3 { opacity: .36; } .fb-owed li.fade-4 { opacity: .24; }

/* Growth */
.fb-growth { padding: 10px; }
.fb-growth-in { display: flex; flex-direction: column; height: 100%; padding: 14px; border-radius: 18px; background: var(--fb-glass); }
.fb-chips { display: flex; justify-content: space-between; align-items: center; margin: 0; font-size: .55rem; font-weight: 700; color: var(--fb-muted); }
.fb-chip { padding: 3px 9px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; color: var(--fb-fg); }
main.look-bento .fb-growth-num { margin: 14px 0 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; color: var(--fb-fg); }
.fb-growth-k { margin: 0; font-size: .8rem; color: var(--fb-muted); }
.fb-growth svg { display: block; width: 100%; height: auto; margin-top: auto; }
.fb-gbar { fill: rgba(143, 176, 255, .45); }
.fb-gbar.is-now { fill: var(--fb-blue); }

/* The year so far */
main.look-bento .fb-year h3 { position: relative; z-index: 1; font-size: .95rem; font-weight: 600; }
.fb-year svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; }
.fb-year-last { fill: var(--fb-green); opacity: .35; }
.fb-year-this { fill: var(--fb-blue); opacity: .55; }
.fb-today-line { stroke: #f4f4f5; stroke-width: 1.5; }
.fb-today { fill: #f4f4f5; }
.fb-today-t { fill: #0d0d0f; font-size: 9px; font-weight: 700; }
.fb-today-dot { fill: #0d0d0f; stroke: #f4f4f5; stroke-width: 2; }
.fb-year-lbl { font-size: 11px; font-weight: 600; fill: #f4f4f5; }
main.look-bento .fb-year-big { position: relative; z-index: 1; margin: auto 0 0; align-self: flex-end; font-size: 3.6rem; font-weight: 400; letter-spacing: -.04em; line-height: 1; color: var(--fb-fg); }
.fb-year { min-height: 210px; }

/* The Bills tab's "More charts" as a bento under the first one: the same
   dark glass cards with the blue / green glow, light text, blue and green
   marks, in three rows. */
main.look-bento .fb-more { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
main.look-bento .fb-more > * { min-width: 0; margin: 0; }
main.look-bento .fb-more > .dash-left { grid-column: 1 / 7; grid-row: 1; display: flex; }
main.look-bento .fb-more > .dash-left > * { flex: 1; }
main.look-bento .fb-more > .dash-table { grid-column: 7 / 10; grid-row: 1 / 3; }
main.look-bento .fb-more > :nth-child(3) { grid-column: 10 / 13; grid-row: 1; }
main.look-bento .fb-more > :nth-child(4) { grid-column: 1 / 4; grid-row: 2; }
main.look-bento .fb-more > :nth-child(5) { grid-column: 4 / 7; grid-row: 2; }
main.look-bento .fb-more > :nth-child(6) { grid-column: 10 / 13; grid-row: 2; }
main.look-bento .fb-more > :nth-child(7) { grid-column: 1 / 4; grid-row: 3; }
main.look-bento .fb-more > :nth-child(8) { grid-column: 4 / 8; grid-row: 3; }
main.look-bento .fb-more > :nth-child(9) { grid-column: 8 / 10; grid-row: 3; }
main.look-bento .fb-more > :nth-child(10) { grid-column: 10 / 13; grid-row: 3; }
@media (max-width: 1180px) {
  main.look-bento .fb-more { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  main.look-bento .fb-more > * { grid-row: auto !important; grid-column: span 3 !important; }
  main.look-bento .fb-more > .dash-left { grid-column: span 6 !important; }
}
@media (max-width: 640px) { main.look-bento .fb-more > * { grid-column: 1 / -1 !important; } }

main.look-bento .fb-more :is(.chart-card, .dash-table) {
  --card: #0d0d0f; --muted: #a3a6ad; --fg: #f4f4f5; --fg-2: #f4f4f5; --line: rgba(255, 255, 255, .12); color: #f4f4f5;
  --chart-accent: #4a7cf6; --chart-context: #22c47e; --chart-dim: rgba(143, 176, 255, .35); --chart-grid: rgba(255, 255, 255, .08); --chart-axis: rgba(255, 255, 255, .25);
  --series-1: #4a7cf6; --series-2: #22c47e; --series-3: #8fb0ff; --series-4: #9be7c4; --series-5: #2f5fe0; --series-6: #f4f4f5;
  height: 100%; padding: 22px; border-radius: 26px; border: 1px solid rgba(255, 255, 255, .12); box-shadow: none;
  background: radial-gradient(circle 220px at 96% 0%, rgba(74, 124, 246, .45) 0 20%, transparent 100%), #0d0d0f;
}
main.look-bento .fb-more > :nth-child(even) :is(.chart-card, .dash-table), main.look-bento .fb-more > :nth-child(even):is(.chart-card, .dash-table) {
  background: radial-gradient(circle 220px at 96% 0%, rgba(34, 196, 126, .38) 0 20%, transparent 100%), #0d0d0f;
}
main.look-bento .fb-more :is(.chart-card, .dash-table) * { text-shadow: none; }
main.look-bento .fb-more .chart-card .chart-head strong { font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: #f4f4f5; }
main.look-bento .fb-more .chart-card .chart-big { color: #f4f4f5; font-weight: 700; }
main.look-bento .fb-more :is(.chart-card, .dash-table) :is(.sub, .legend, .chart-big small, .row-meta, .empty) { color: #a3a6ad; }
main.look-bento .fb-more .chart-card .c-tick { fill: #a3a6ad; }
main.look-bento .fb-more .chart-card .c-label { fill: #f4f4f5; }
main.look-bento .fb-more .chart-card .round-btn { background: rgba(255, 255, 255, .1); color: #f4f4f5; border: 0; }
main.look-bento .fb-more .chart-card .chart-svg .dot { fill: #0d0d0f; stroke: #4a7cf6; }
main.look-bento .fb-more .chart-card .fin-tag rect, main.look-bento .fb-more .chart-card .fin-tag path { fill: #f4f4f5; }
main.look-bento .fb-more .chart-card .fin-tag text { fill: #0d0d0f; }
main.look-bento .fb-more .dash-table :is(h2, h2 a, .row-title) { color: #f4f4f5; }

/* "More charts" in the first bento's format (2026-10-30): the same twelve
   columns, fixed rows and the same two tall cards on the right; each chart
   shrinks into its card. */
main.look-bento .fb-more { grid-auto-rows: 290px; }
main.look-bento .fb-more > .dash-left { grid-column: 1 / 5; grid-row: 1; }
main.look-bento .fb-more > .dash-table { grid-column: 5 / 7; grid-row: 1; overflow: auto; }
main.look-bento .fb-more > :nth-child(3) { grid-column: 7 / 11; grid-row: 1 / 3; }
main.look-bento .fb-more > :nth-child(4) { grid-column: 11 / 13; grid-row: 1 / 3; }
main.look-bento .fb-more > :nth-child(5) { grid-column: 1 / 5; grid-row: 2; }
main.look-bento .fb-more > :nth-child(6) { grid-column: 5 / 7; grid-row: 2; }
main.look-bento .fb-more > :nth-child(7) { grid-column: 1 / 3; grid-row: 3; }
main.look-bento .fb-more > :nth-child(8) { grid-column: 3 / 5; grid-row: 3; }
main.look-bento .fb-more > :nth-child(9) { grid-column: 5 / 7; grid-row: 3; }
main.look-bento .fb-more > :nth-child(10) { grid-column: 7 / 13; grid-row: 3; }
main.look-bento .fb-more .chart-card { display: flex; flex-direction: column; overflow: hidden; }
main.look-bento .fb-more .chart-card figcaption { flex: none; margin-bottom: .35rem; }
main.look-bento .fb-more .chart-card .chart-big { margin: .3rem 0 .1rem; font-size: 1.9rem; }
main.look-bento .fb-more .chart-card .legend { flex: none; margin: 0 0 .3rem; }
main.look-bento .fb-more .chart-card :is(.chart-plot, .donut-wrap) { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
@media (min-width: 601px) { main.look-bento .fb-more .chart-card .wide-only { display: flex; align-items: center; justify-content: center; } }
main.look-bento .fb-more .chart-card .chart-svg { width: 100%; height: 100%; max-height: 100%; }
main.look-bento .fb-more .chart-card .donut-wrap .chart-svg { width: 100%; }
main.look-bento .fb-more .chart-card .chart-empty { margin: auto; }
@media (max-width: 1180px) {
  main.look-bento .fb-more { grid-auto-rows: 300px; }
  main.look-bento .fb-more > * { grid-row: auto !important; grid-column: span 3 !important; }
  main.look-bento .fb-more > :nth-child(3), main.look-bento .fb-more > :nth-child(10) { grid-column: span 6 !important; }
}
@media (max-width: 640px) { main.look-bento .fb-more > * { grid-column: 1 / -1 !important; } }
main.look-bento .fb-more .chart-card :is(.chart-plot, .donut-wrap) { overflow: hidden; }
main.look-bento .fb-more .chart-card .chart-plot > .wide-only, main.look-bento .fb-more .chart-card .chart-plot > .narrow-only { width: 100%; height: 100%; }

/* The Income tab in the same bento format (2026-10-30): the period's
   filter and its four figures on the left, the statement big on the
   right, then the income charts; dark glass cards throughout. The
   wrappers (fy-full, fy-quad) step aside so their cards join the grid. */
main.look-bento .fb-more.fb-inc > .fy-full, main.look-bento .fb-inc .fy-quad { display: contents; }
main.look-bento .fb-inc .fy-track { grid-column: 1 / 5; grid-row: 1; max-width: none; justify-self: stretch; }
main.look-bento .fb-inc .hy-card { grid-column: 5 / 13; grid-row: 1 / 3; }
main.look-bento .fb-inc .fy-quad > .fy-panel:nth-child(1) { grid-column: 1 / 3; grid-row: 2; }
main.look-bento .fb-inc .fy-quad > .fy-panel:nth-child(2) { grid-column: 3 / 5; grid-row: 2; }
main.look-bento .fb-inc .fy-quad > .fy-panel:nth-child(3) { grid-column: 1 / 3; grid-row: 3; }
main.look-bento .fb-inc .fy-quad > .fy-panel:nth-child(4) { grid-column: 3 / 5; grid-row: 3; }
main.look-bento .fb-more.fb-inc > :nth-child(2) { grid-column: 5 / 9; grid-row: 3; }
main.look-bento .fb-more.fb-inc > :nth-child(3) { grid-column: 9 / 13; grid-row: 3; }
main.look-bento .fb-more.fb-inc > :nth-child(4) { grid-column: 1 / 5; grid-row: 4; }
main.look-bento .fb-more.fb-inc > :nth-child(5) { grid-column: 5 / 8; grid-row: 4; }
main.look-bento .fb-more.fb-inc > :nth-child(6) { grid-column: 1 / 9; grid-row: 5; }
main.look-bento .fb-more.fb-inc > :nth-child(7) { grid-column: 8 / 13; grid-row: 4; }
main.look-bento .fb-more.fb-inc > :nth-child(8) { grid-column: 9 / 13; grid-row: 5; }
@media (max-width: 1180px) {
  main.look-bento .fb-inc :is(.fy-track, .hy-card, .fy-panel) { grid-row: auto !important; }
  main.look-bento .fb-inc .fy-track, main.look-bento .fb-inc .hy-card, main.look-bento .fb-more.fb-inc > :nth-child(6) { grid-column: span 6 !important; }
  main.look-bento .fb-inc .fy-panel { grid-column: span 3 !important; }
  main.look-bento .fb-inc .hy-card { grid-row: span 2 !important; }
}
@media (max-width: 640px) { main.look-bento .fb-inc :is(.fy-track, .hy-card, .fy-panel) { grid-column: 1 / -1 !important; } }

/* The cards: dark glass like the rest; the statement's chart fills it. */
main.look-bento .fb-inc :is(.hy-card, .fy-panel, .fy-track) {
  --card: #0d0d0f; --muted: #a3a6ad; --fg: #f4f4f5; color: #f4f4f5; margin: 0; height: 100%; min-width: 0; overflow: hidden;
  padding: 20px 22px; border-radius: 26px; border: 1px solid rgba(255, 255, 255, .12); box-shadow: none;
  background: radial-gradient(circle 220px at 96% 0%, rgba(74, 124, 246, .45) 0 20%, transparent 100%), #0d0d0f;
}
main.look-bento .fb-inc .fy-quad > .fy-panel:nth-child(even), main.look-bento .fb-inc .fy-track {
  background: radial-gradient(circle 220px at 96% 0%, rgba(34, 196, 126, .38) 0 20%, transparent 100%), #0d0d0f;
}
main.look-bento .fb-inc :is(.hy-card, .fy-panel, .fy-track) * { text-shadow: none; }
main.look-bento .fb-inc .hy-card { display: flex; flex-direction: column; }
main.look-bento .fb-inc .hy-card .hy-chart { flex: 1; min-height: 0; width: 100%; height: 100%; }
main.look-bento .fb-inc .hy-card :is(.hy-total) { color: #f4f4f5; }
main.look-bento .fb-inc :is(.fy-panel, .fy-track) :is(.fy-label, .fy-this, .chart-head strong) { color: #f4f4f5; }
main.look-bento .fb-inc :is(.fy-panel, .fy-track) :is(.fy-last, .fy-last small, .fy-label small, .sub, .legend, .fy-filter label) { color: #a3a6ad; }
main.look-bento .fb-inc .fy-track .chart-head strong { font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; text-transform: none; }
main.look-bento .fb-inc .fy-filter select { background: rgba(255, 255, 255, .08); color: #f4f4f5; }
main.look-bento .fb-inc .fy-filter select option { color: #0d0d0f; }
main.look-bento .fb-inc .fy-track .round-btn { background: rgba(255, 255, 255, .1); color: #f4f4f5; border: 0; }
main.look-bento .fb-inc .fy-panel .fy-chart { min-height: 0; }
main.look-bento .fb-inc .fy-panel .fy-chart svg { max-height: 150px; }

/* The every-day calendar's shades in blue on the dark card. */
main.look-bento .fb-inc .chart-svg .heat-0 { fill: rgba(255, 255, 255, .06); }
main.look-bento .fb-inc .chart-svg .heat-1 { fill: rgba(74, 124, 246, .35); }
main.look-bento .fb-inc .chart-svg .heat-2 { fill: rgba(74, 124, 246, .55); }
main.look-bento .fb-inc .chart-svg .heat-3 { fill: rgba(74, 124, 246, .8); }
main.look-bento .fb-inc .chart-svg .heat-4 { fill: #4a7cf6; }
main.look-bento .fb-inc .chart-svg .heat-future { fill: none; stroke: rgba(255, 255, 255, .08); }


/* ── The Finance tabs (Bills, Income, Charts) in the reference's card
   theme (2026-10-30, "Modern & Clean Dashboard Elements"): white cards,
   ink type, blue and mint accents, one black circle, one grey card — on
   Home's dark glow page. */
body:has(.fin-light) main.look-bento .f5-top .tabs a:not([aria-current]) { background: #ffffff; color: #0e1116; }
body:has(.fin-light) main.look-bento .f5-top .tabs a[aria-current] { background: #0e1116; color: #ffffff; }
body:has(.fin-light) main.look-bento :is(.fb, .fb-more) { font-family: "Helvetica Neue", Helvetica, Inter, Arial, sans-serif; }

/* The Bills bento. */
body:has(.fin-light) .fb { --fb-card: #ffffff; --fb-fg: #0e1116; --fb-muted: #6b7380; --fb-line: #c9ced5; --fb-glass: #e6e8eb;
  --fb-blue: #4f86f7; --fb-blue-2: #8db5ff; --fb-green: #9ef0cf; --fb-green-2: #c8f7e6; color: #0e1116; }
body:has(.fin-light) .fb .fb-card, body:has(.fin-light) .fb .fb-card:nth-child(even) { background: #ffffff; border: 0; }
body:has(.fin-light) .fb a.fb-card:hover { border-color: transparent; box-shadow: 0 14px 30px -18px rgba(14, 17, 22, .45); }
body:has(.fin-light) .fb-tiles a.is-on, body:has(.fin-light) .fb-tiles a.is-on small { background: #d9e8ff; color: #4f86f7; }
body:has(.fin-light) .fb-tiles a:hover { background: #0e1116; color: #fff; }
body:has(.fin-light) .fb-c-blue { background: linear-gradient(135deg, #3f78f2, #9cc0ff); color: #0e1116; }
body:has(.fin-light) .fb-c-mint { background: linear-gradient(135deg, #5f93f8, #a8f0d2); color: #0e1116; }
body:has(.fin-light) .fb-c-grey { background: #e6e8eb; border: 0; color: #0e1116; }
body:has(.fin-light) .fb-c-ink { background: #0e1116; }
body:has(.fin-light) .fb a.fb-c-ink, body:has(.fin-light) main.look-bento .fb .fb-c-ink :is(b, small) { color: #ffffff; }
body:has(.fin-light) .fb-axis { stroke: #3a3f47; }
body:has(.fin-light) .fb-bar-total { fill: #c8f7e6; }
body:has(.fin-light) .fb-bar-paid { fill: #4f86f7; }
body:has(.fin-light) .fb-vpill { background: #9ef0cf; color: #0e1116; font-weight: 400; }
body:has(.fin-light) .fb-total-head .fb-sub { color: #0e1116; }
body:has(.fin-light) .fb-seg { stroke: #dbe6fb; }
body:has(.fin-light) .fb-legend i.is-3 { background: #dbe6fb; }
body:has(.fin-light) .fb-arrow span { color: #4f86f7; }
body:has(.fin-light) .fb .fb-card.fb-grad { background: linear-gradient(120deg, #4f86f7, #9ef0cf); }
body:has(.fin-light) .fb-month em { color: #4f86f7; }
body:has(.fin-light) .fb-chip { border-color: #0e1116; color: #0e1116; }
body:has(.fin-light) .fb-chips { color: #0e1116; }
body:has(.fin-light) .fb-gbar { fill: #8db5ff; }
body:has(.fin-light) .fb-gbar.is-now { fill: #4f86f7; }
body:has(.fin-light) .fb-year-last { fill: #9ef0cf; opacity: .85; }
body:has(.fin-light) .fb-year-this { fill: #d6e6ff; opacity: 1; }
body:has(.fin-light) .fb-today-line { stroke: #0e1116; }
body:has(.fin-light) .fb-today { fill: #0e1116; }
body:has(.fin-light) .fb-today-t { fill: #ffffff; }
body:has(.fin-light) .fb-today-dot { fill: #ffffff; stroke: #0e1116; }
body:has(.fin-light) .fb-year-lbl { fill: #0e1116; }

/* More charts and Income cards. */
body:has(.fin-light) main.look-bento .fb-more :is(.chart-card, .dash-table, .hy-card, .fy-panel, .fy-track) {
  --card: #ffffff; --muted: #6b7380; --fg: #0e1116; --fg-2: #0e1116; --line: #e3e7ec; color: #0e1116;
  --chart-accent: #4f86f7; --chart-context: #7fe3bd; --chart-dim: #c9dcff; --chart-grid: #edf0f3; --chart-axis: #c9ced5;
  --series-1: #4f86f7; --series-2: #7fe3bd; --series-3: #8db5ff; --series-4: #2f5fd6; --series-5: #c8f7e6; --series-6: #0e1116;
  background: #ffffff !important; background-image: none !important; border: 0 !important;
}
body:has(.fin-light) main.look-bento .fb-more .chart-card :is(.chart-head strong, .chart-big, .c-label) { color: #0e1116; fill: #0e1116; }
body:has(.fin-light) main.look-bento .fb-more :is(.chart-card, .dash-table, .fy-panel, .fy-track) :is(.sub, .legend, .chart-big small, .row-meta, .empty, .fy-last, .fy-last small, .fy-label small, .fy-filter label) { color: #6b7380; }
body:has(.fin-light) main.look-bento .fb-more .chart-card .c-tick { fill: #6b7380; }
body:has(.fin-light) main.look-bento .fb-more :is(.chart-card, .fy-track) .round-btn { background: #4f86f7; color: #ffffff; }
body:has(.fin-light) main.look-bento .fb-more .chart-card .chart-svg .dot { fill: #ffffff; stroke: #4f86f7; }
body:has(.fin-light) main.look-bento .fb-more .chart-card .fin-tag :is(rect, path) { fill: #0e1116; }
body:has(.fin-light) main.look-bento .fb-more .chart-card .fin-tag text { fill: #ffffff; }
body:has(.fin-light) main.look-bento .fb-more .dash-table :is(h2, h2 a, .row-title) { color: #0e1116; }
body:has(.fin-light) main.look-bento .fb-inc :is(.fy-panel, .fy-track) :is(.fy-label, .fy-this, .chart-head strong) { color: #0e1116; }
body:has(.fin-light) main.look-bento .fb-inc .fy-filter select { background: #f1f3f6; color: #0e1116; }
body:has(.fin-light) main.look-bento .fb-inc .hy-card :is(.hy-k, .hy-total-k, .hy-legend) { color: #6b7380; }
body:has(.fin-light) main.look-bento .fb-inc .hy-card .hy-total { color: #0e1116; }
body:has(.fin-light) main.look-bento .fb-inc .hy-card .hy-tick { fill: #6b7380; }
body:has(.fin-light) main.look-bento .fb-inc .hy-card .hy-grid { stroke: #edf0f3; }
body:has(.fin-light) main.look-bento .fb-inc .hy-card :is(.hy-bar, .hy-key-bar) { fill: #c9dcff; background: #c9dcff; }
body:has(.fin-light) main.look-bento .fb-inc .hy-card :is(.hy-bar.is-hi, .hy-bracket, .hy-key-hi) { fill: #4f86f7; background: #4f86f7; }
body:has(.fin-light) main.look-bento .fb-inc .hy-card .hy-line { stroke: #0e1116; }
body:has(.fin-light) main.look-bento .fb-inc .hy-card .hy-key-line { background: #0e1116; }
body:has(.fin-light) main.look-bento .fb-inc .hy-line-last { stroke: #7fe3bd; }
body:has(.fin-light) main.look-bento .fb-inc .hy-key-last { border-top-color: #7fe3bd; }
body:has(.fin-light) main.look-bento .fb-inc .chart-svg .heat-0 { fill: #eef1f5; }
body:has(.fin-light) main.look-bento .fb-inc .chart-svg .heat-future { stroke: #e3e7ec; }

/* The Bills page's closed decks as a fan of folders (2026-10-30, after
   the operator's folder reference): each sheet a folder with its tab on
   the left, a darker bookmark on the right and a white sheet line along
   the top; the ones behind step up and to the right. */
.bill-stacks .cc-pile { height: 176px; }
.bill-stacks .cc-sheet { --sc: var(--wt-other); top: auto; bottom: 8px; right: 36px; height: 124px; padding-top: 22px; border-radius: 6px 18px 18px 18px; overflow: visible;
  background: linear-gradient(#ffffff, #ffffff) 0 9px / 100% 3px no-repeat, var(--sc) !important; box-shadow: -6px 6px 14px -8px rgba(0, 0, 0, .45); filter: none; }
.bill-stacks .cc-sheet.wt-html { --sc: var(--wt-html); }
.bill-stacks .cc-sheet.wt-pd { --sc: var(--wt-pd); }
.bill-stacks .cc-sheet.wt-calf { --sc: var(--wt-calf); }
.bill-stacks .cc-sheet.wt-camp { --sc: var(--wt-camp); }
.bill-stacks .cc-sheet::before { content: ""; position: absolute; top: -12px; left: 0; width: 42%; height: 18px; border-radius: 12px 14px 0 0; background: var(--sc); }
.bill-stacks .cc-sheet::after { content: ""; position: absolute; top: -6px; right: 18%; width: 24px; height: 40px; border-radius: 4px; background: color-mix(in srgb, var(--sc) 72%, #000); }
.bill-stacks .cc-sheet:nth-child(1) { z-index: 3; transform: none; }
.bill-stacks .cc-sheet:nth-child(2) { z-index: 2; transform: translate(16px, -16px); filter: none; }
.bill-stacks .cc-sheet:nth-child(3) { z-index: 1; transform: translate(32px, -32px); filter: none; }
.bill-stacks .cc-stack > summary:hover .cc-sheet:nth-child(2) { transform: translate(20px, -20px); }
.bill-stacks .cc-stack > summary:hover .cc-sheet:nth-child(3) { transform: translate(40px, -40px); }

/* More charts without the cards the bento already shows (2026-10-30):
   eight cards in three rows. */
main.look-bento .fb-more:not(.fb-inc) > :nth-child(6) { grid-column: 5 / 7; grid-row: 2; }
main.look-bento .fb-more:not(.fb-inc) > :nth-child(7) { grid-column: 1 / 5; grid-row: 3; }
main.look-bento .fb-more:not(.fb-inc) > :nth-child(8) { grid-column: 5 / 13; grid-row: 3; }

/* Income: the Selected period card only as tall as its filter (2026-10-30);
   the first row follows it, the rest keep their height. */
main.look-bento .fb-more.fb-inc { grid-template-rows: auto; }
main.look-bento .fb-inc .fy-track { height: auto; align-self: start; padding: 16px 20px; }
main.look-bento .fb-inc .fy-track .fy-filter { margin: .4rem 0 0; }
main.look-bento .fb-inc .hy-card { min-height: 0; }

/* Income rearranged (2026-10-30): the filter a slim strip across the top,
   the four figures in one row of short cards, the statement big with
   quarter and week stacked beside it, then payers / type / weekdays, then
   every day and concentration. */
main.look-bento .fb-more.fb-inc { grid-template-rows: auto 170px; grid-auto-rows: 290px; }
main.look-bento .fb-inc .fy-track { grid-column: 1 / 13; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; }
main.look-bento .fb-inc .fy-track figcaption { margin: 0; }
main.look-bento .fb-inc .fy-track .fy-tools { display: flex; align-items: center; gap: 16px; }
main.look-bento .fb-inc .fy-track .fy-filter { margin: 0; }
main.look-bento .fb-inc .fy-track .legend { margin: 0; }
main.look-bento .fb-inc .fy-quad > .fy-panel:nth-child(1) { grid-column: 1 / 4; grid-row: 2; }
main.look-bento .fb-inc .fy-quad > .fy-panel:nth-child(2) { grid-column: 4 / 7; grid-row: 2; }
main.look-bento .fb-inc .fy-quad > .fy-panel:nth-child(3) { grid-column: 7 / 10; grid-row: 2; }
main.look-bento .fb-inc .fy-quad > .fy-panel:nth-child(4) { grid-column: 10 / 13; grid-row: 2; }
main.look-bento .fb-inc .fy-panel { padding: 16px 20px; }
main.look-bento .fb-inc .fy-panel .fy-chart { margin-top: .3rem; }
main.look-bento .fb-inc .fy-panel .fy-chart svg { max-height: 70px; }
main.look-bento .fb-inc .hy-card { grid-column: 1 / 9; grid-row: 3 / 5; }
main.look-bento .fb-more.fb-inc > :nth-child(2) { grid-column: 9 / 13; grid-row: 3; }
main.look-bento .fb-more.fb-inc > :nth-child(3) { grid-column: 9 / 13; grid-row: 4; }
main.look-bento .fb-more.fb-inc > :nth-child(4) { grid-column: 1 / 5; grid-row: 5; }
main.look-bento .fb-more.fb-inc > :nth-child(5) { grid-column: 5 / 8; grid-row: 5; }
main.look-bento .fb-more.fb-inc > :nth-child(7) { grid-column: 8 / 13; grid-row: 5; }
main.look-bento .fb-more.fb-inc > :nth-child(6) { grid-column: 1 / 9; grid-row: 6; }
main.look-bento .fb-more.fb-inc > :nth-child(8) { grid-column: 9 / 13; grid-row: 6; }
@media (max-width: 1180px) {
  main.look-bento .fb-more.fb-inc { grid-template-rows: auto; }
  main.look-bento .fb-inc .fy-track { grid-column: 1 / -1 !important; }
  main.look-bento .fb-inc .fy-panel { grid-row: auto !important; grid-column: span 3 !important; height: 170px; }
}
/* The short figure cards: label on top, the small line filling the
   middle, the figure bottom-right; nothing spills out. */
main.look-bento .fb-inc .fy-quad > .fy-panel { display: flex !important; flex-direction: column; overflow: hidden !important; }
main.look-bento .fb-inc .fy-panel .fy-label { margin: 0; }
main.look-bento .fb-inc .fy-panel .fy-chart { flex: 1; min-height: 0; display: flex; align-items: flex-end; margin: .2rem 0; }
main.look-bento .fb-inc .fy-panel .fy-chart svg { width: 100%; height: 100%; max-height: 100%; }
main.look-bento .fb-inc .fy-panel .fy-this { align-self: flex-end; margin: 0; font-size: 1.7rem; line-height: 1; }
main.look-bento .fb-inc .fy-panel .fy-last { align-self: flex-end; margin: .15rem 0 0; }
/* The filter strip: title on the left, the filter on the right. */
main.look-bento .fb-inc .fy-track { flex-wrap: nowrap; text-align: left; }
main.look-bento .fb-inc .fy-track figcaption { flex: 0 1 auto; width: auto; align-items: flex-start; }
main.look-bento .fb-inc .fy-track .fy-tools { flex: none; flex-wrap: nowrap; margin-left: auto; }
@media (max-width: 760px) { main.look-bento .fb-inc .fy-track { flex-wrap: wrap; } main.look-bento .fb-inc .fy-track .fy-tools { margin-left: 0; } }
main.look-bento .fb-more.fb-inc .fy-quad > .fy-panel { min-height: 0 !important; height: 100% !important; }
main.look-bento .fb-more.fb-inc .fy-track :is(figcaption, .chart-head, .sub) { text-align: left; justify-content: flex-start; align-items: flex-start; align-self: center; margin-right: auto; }

/* Income, tidier (2026-10-30): the Selected period a small stacked card
   (title, period, then the filter) with the four figures beside it in the
   same row; the statement and the rest below. */
main.look-bento .fb-more.fb-inc { grid-template-rows: 170px; grid-auto-rows: 290px; }
main.look-bento .fb-more.fb-inc .fy-track { grid-column: 1 / 5; grid-row: 1; height: 100%; align-self: stretch;
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: space-between; gap: 10px; padding: 18px 20px; }
main.look-bento .fb-more.fb-inc .fy-track figcaption { margin: 0; align-self: stretch; }
main.look-bento .fb-more.fb-inc .fy-track .fy-tools { margin: 0; flex-wrap: wrap; justify-content: flex-start; }
main.look-bento .fb-more.fb-inc .fy-track .fy-filter { margin: 0; flex-wrap: nowrap; }
main.look-bento .fb-more.fb-inc .fy-track .fy-filter label { flex: 1; min-width: 0; }
main.look-bento .fb-more.fb-inc .fy-track .fy-filter select { width: 100%; }
main.look-bento .fb-more.fb-inc .fy-quad > .fy-panel:nth-child(1) { grid-column: 5 / 7; grid-row: 1; }
main.look-bento .fb-more.fb-inc .fy-quad > .fy-panel:nth-child(2) { grid-column: 7 / 9; grid-row: 1; }
main.look-bento .fb-more.fb-inc .fy-quad > .fy-panel:nth-child(3) { grid-column: 9 / 11; grid-row: 1; }
main.look-bento .fb-more.fb-inc .fy-quad > .fy-panel:nth-child(4) { grid-column: 11 / 13; grid-row: 1; }
main.look-bento .fb-more.fb-inc .hy-card { grid-column: 1 / 9; grid-row: 2 / 4; }
main.look-bento .fb-more.fb-inc > :nth-child(2) { grid-column: 9 / 13; grid-row: 2; }
main.look-bento .fb-more.fb-inc > :nth-child(3) { grid-column: 9 / 13; grid-row: 3; }
main.look-bento .fb-more.fb-inc > :nth-child(4) { grid-column: 1 / 5; grid-row: 4; }
main.look-bento .fb-more.fb-inc > :nth-child(5) { grid-column: 5 / 8; grid-row: 4; }
main.look-bento .fb-more.fb-inc > :nth-child(7) { grid-column: 8 / 13; grid-row: 4; }
main.look-bento .fb-more.fb-inc > :nth-child(6) { grid-column: 1 / 9; grid-row: 5; }
main.look-bento .fb-more.fb-inc > :nth-child(8) { grid-column: 9 / 13; grid-row: 5; }
@media (max-width: 1180px) {
  main.look-bento .fb-more.fb-inc { grid-template-rows: none; }
  main.look-bento .fb-more.fb-inc .fy-track { grid-column: span 6 !important; grid-row: auto !important; }
  main.look-bento .fb-more.fb-inc .fy-quad > .fy-panel { grid-column: span 3 !important; grid-row: auto !important; height: 170px !important; }
  main.look-bento .fb-more.fb-inc .hy-card { grid-column: span 6 !important; grid-row: span 2 !important; }
}
main.look-bento .fb-more.fb-inc .fy-track .fy-filter label { flex: none; } main.look-bento .fb-more.fb-inc .fy-track .fy-filter select { width: auto; }

/* Requests: the Sent back tab's tile in amber, ink text (2026-10-30). */
body.app main.look-bento .tabs a[href*="f=sentback"] { background: #ff9a3c; }
body.app main.look-bento .tabs a[href*="f=sentback"] :is(*, .count), body.app main.look-bento .tabs a[href*="f=sentback"] { color: #0d0d0f; }

/* Bills: the table under the decks (2026-10-30, after the operator's
   reference) — one dark card; work-type pills and Export on top; each bill
   a rounded row: icon · client (Job ID, bp user) · date · type · amount
   (owed red, paid green) · state with its dot. */
.bt-card { margin: 0 0 1.4rem; padding: 14px; border-radius: 24px; background: #121214; border: 1px solid rgba(255, 255, 255, .07); }
.bt-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bt-pills { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .05); overflow-x: auto; scrollbar-width: none; }
.bt-pills a { padding: 8px 16px; border-radius: 10px; color: #a3a6ad; font-size: .8rem; white-space: nowrap; }
.bt-pills a span { margin-left: 4px; opacity: .6; font-size: .72rem; }
.bt-pills a:hover { color: #f4f4f5; }
.bt-pills a[aria-current="page"] { background: #f4f4f5; color: #0d0d0f; font-weight: 600; }
.bt-export { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #f4f4f5; font-size: .8rem; }
.bt-export:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.bt-export .icon { width: 15px; height: 15px; }
.bt-rows { display: flex; flex-direction: column; gap: 6px; }
.bt-row { display: grid; grid-template-columns: 36px minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 14px;
  padding: 10px 16px 10px 10px; border-radius: 14px; background: #1b1b1e; color: #f4f4f5; transition: background 150ms ease; }
.bt-row:hover { background: #242428; color: #fff; }
.bt-ico { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--wt-other); color: #0d0d0f; font-size: .66rem; font-weight: 800; }
.bt-ico.wt-html { background: var(--wt-html); } .bt-ico.wt-pd { background: var(--wt-pd); } .bt-ico.wt-calf { background: var(--wt-calf); } .bt-ico.wt-camp { background: var(--wt-camp); }
.bt-name { min-width: 0; font-size: .86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-name small { display: block; color: #8d9099; font-size: .7rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.bt-date { color: #c9cacd; font-size: .8rem; white-space: nowrap; }
.bt-type { justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: #d6d7da; font-size: .74rem; text-transform: lowercase; }
.bt-type i { width: 8px; height: 8px; border-radius: 3px; background: var(--wt-other); }
.bt-type i.wt-html { background: var(--wt-html); } .bt-type i.wt-pd { background: var(--wt-pd); } .bt-type i.wt-calf { background: var(--wt-calf); } .bt-type i.wt-camp { background: var(--wt-camp); }
.bt-amt { justify-self: end; font-size: .88rem; font-weight: 600; white-space: nowrap; }
.bt-amt.is-owed { color: #ff6b5e; }
.bt-amt.is-paid { color: #22c47e; }
.bt-state { justify-self: end; display: inline-flex; align-items: center; gap: 8px; color: #d6d7da; font-size: .78rem; white-space: nowrap; }
.bt-state > i { width: 10px; height: 10px; border-radius: 50%; background: #8d9099; box-shadow: 0 0 0 3px rgba(141, 144, 153, .2); }
.bt-state.tone-ok > i { background: #22c47e; box-shadow: 0 0 0 3px rgba(34, 196, 126, .2); }
.bt-state.tone-bad > i { background: #ff6b5e; box-shadow: 0 0 0 3px rgba(255, 107, 94, .2); }
.bt-state.tone-warn > i { background: #ffb547; box-shadow: 0 0 0 3px rgba(255, 181, 71, .2); }
.bt-state.tone-info > i { background: #4a7cf6; box-shadow: 0 0 0 3px rgba(74, 124, 246, .2); }
.bt-state .pill-paid { width: 20px; height: 20px; }
.bt-state .pill-paid .icon { width: 12px; height: 12px; }
.bt-card .empty { color: #8d9099; }
@media (max-width: 760px) {
  .bt-row { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "ico name amt" "ico date state"; row-gap: 4px; }
  .bt-ico { grid-area: ico; } .bt-name { grid-area: name; } .bt-amt { grid-area: amt; } .bt-date { grid-area: date; } .bt-state { grid-area: state; }
  .bt-type { display: none; }
}

/* Bills: the List view tile (2026-10-30) — after All, ink with a menu icon;
   white while the table is shown. */
body.app main.look-bento .tabs a.tab-list { background: #1b1b1e; border: 1px solid rgba(255, 255, 255, .14); }
body.app main.look-bento .tabs a.tab-list, body.app main.look-bento .tabs a.tab-list :is(*, .count) { color: #f4f4f5; }
body.app main.look-bento .tabs a.tab-list .count .icon { width: 22px; height: 22px; }
body.app main.look-bento .tabs a.tab-list[aria-current="page"] { background: #f4f4f5; }
body.app main.look-bento .tabs a.tab-list[aria-current="page"], body.app main.look-bento .tabs a.tab-list[aria-current="page"] :is(*, .count) { color: #0d0d0f; }

/* Mark paid: "Close the bill with this amount" — one row across the card. */
.fx-pay .fx-fields label.fx-settle { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; gap: 8px; }
.fx-pay .fx-fields label.fx-settle input { width: 16px; height: 16px; flex: none; margin: 0; accent-color: #22c47e; }

/* Bill page: Edit beside the amount, Undo last payment under the payments. */
.fx-details .fx-edit { margin-left: 6px; padding: 1px 9px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: none; color: inherit; font: inherit; font-size: 11px; cursor: pointer; }
.fx-undo { margin-top: 10px; }

/* Folders, 2026-10-31: more of the white sheet showing, and the flow on it
   in its own colour (two blue, pd orange, calf green, camp olive). */
.bc-folder, .bill-stacks .cc-sheet { --ft: #5b5f66; }
.bc-folder.wt-html, .bill-stacks .cc-sheet.wt-html { --ft: #1a6fe0; }
.bc-folder.wt-pd, .bill-stacks .cc-sheet.wt-pd { --ft: #e8710a; }
.bc-folder.wt-calf, .bill-stacks .cc-sheet.wt-calf { --ft: #0f9d58; }
.bc-folder.wt-camp, .bill-stacks .cc-sheet.wt-camp { --ft: #5a8f00; }
.bc-grid .bcf-paper { top: 2px; left: 5%; right: 5%; height: 64px; padding: 7px 12px; border-radius: 12px;
  color: var(--ft); font-size: .82rem; font-weight: 800; letter-spacing: .06em; box-shadow: 0 -1px 0 rgba(0, 0, 0, .06); }
.bc-grid .bcf-front { margin-top: 36px; }
.bc-grid .bcf-front::before { top: -12px; width: 46%; }
/* The decks: the sheet line and dark bookmark make way for a white sheet
   peeking out of each folder with its flow. */
.bill-stacks .cc-sheet { background: var(--sc) !important; }
.bill-stacks .cc-sheet::after { content: attr(data-flow); top: -24px; left: 46%; right: 8%; width: auto; height: 30px; padding: 5px 10px 0;
  border-radius: 10px 10px 0 0; background: #fff; color: var(--ft); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.bc-grid .bcf-paper { height: 74px; padding-top: 9px; }
.bc-grid .bcf-front { margin-top: 44px; }
.bill-stacks .cc-sheet:not(:first-child)::after { content: none; }
.bill-stacks .cc-sheet::after { top: -30px; height: 36px; padding-top: 8px; font-size: .8rem; }
.bc-folder.wt-other .bcf-paper, .bill-stacks .cc-sheet.wt-other::after { box-shadow: 0 0 0 1px #d4d7dc; }
/* Mark paid's Upload screenshot (the payment form, pre-filled). */
.fx-pay .fx-shot { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 2px 0 8px; }
.fx-pay .fx-fields label .fx-shot { margin: 0; justify-content: center; }
.fx-pay .fx-fields label .fx-shot { display: flex; height: 44px; border: 1px dashed rgba(255, 255, 255, .35); border-radius: 14px; background: rgba(255, 255, 255, .06); color: #f4f4f5; font-weight: 700; }
.fx-pay .fx-fields label .fx-shot:hover { border-color: #22c47e; color: #22c47e; }
/* Back from the payment form: Mark paid glows green three times. */
@keyframes pay-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 196, 126, 0); } 50% { box-shadow: 0 0 0 8px rgba(34, 196, 126, .55); } }
.fx-pay .fx-foot.is-nudge { animation: pay-nudge 900ms ease-in-out 3; outline: 2px solid #22c47e; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fx-pay .fx-foot.is-nudge { animation: none; } }