/* Business Buddy's look, over app.css (WizDash/architecture/07-look-and-feel.md, approved 2026-10-13).
   Light work area, the dark blue sidebar, teal for the thing to do next, an icon on what you act on. */

body.buddy{
  --brand:#0F536B; --brand-deep:#0B3F52;
  --accent:#19D0BE; --accent-ink:#0E8C80; --accent-soft:#E3F8F5;
  --grad:linear-gradient(135deg,#0F536B 0%,#137A8C 100%);
  --bg:#F3F6F7; --surface:#FFFFFF; --surface-2:#F7FAFA; --surface-3:#EEF3F4;
  --line:#E3EAEC; --line-strong:#D3DDE0;
  --text:#0E2A33; --muted:#5B7480; --faint:#8EA2AA;
  --ok:#15A36B; --ok-soft:#E4F6EE; --warn:#C27C0E; --warn-soft:#FDF3E1; --bad:#DC4A4F; --bad-soft:#FCE9EA;
  --radius:16px; --radius-sm:11px;
  background:var(--bg); color:var(--text);
}
body.buddy svg.i{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* ── the sidebar ── */
body.buddy .side{ background:var(--brand); border-right:0; color:#fff; padding:22px 14px 16px; }
body.buddy .side__brand--app{ padding:2px 8px 26px; }
body.buddy .side__brand--app img{ width:150px; height:auto; }
body.buddy .side__nav{ gap:14px; }
body.buddy .side__label{ color:rgba(255,255,255,.45); }
body.buddy .side__link{ justify-content:flex-start; gap:12px; padding:10px 12px; border-radius:12px; color:rgba(255,255,255,.78); font-weight:500; }
body.buddy .side__link:hover{ background:rgba(255,255,255,.08); color:#fff; }
body.buddy .side__link[aria-current="page"]{ background:rgba(25,208,190,.16); color:#fff; font-weight:600; box-shadow:inset 3px 0 0 var(--accent); }
body.buddy .side__link[aria-current="page"]::before{ display:none; }
body.buddy .side__link[aria-current="page"] svg{ color:var(--accent); }
body.buddy .side__me{ display:flex; align-items:center; gap:10px; padding:10px 10px 10px 12px; border-radius:12px; background:rgba(255,255,255,.08); margin-top:12px; }
body.buddy .avatar{ width:34px; height:34px; border-radius:50%; background:var(--accent); color:var(--brand-deep); display:grid; place-items:center; font-weight:700; flex:none; }
body.buddy .side__me-who{ flex:1; min-width:0; }
body.buddy .side__me-who b{ display:block; font-size:13px; }
body.buddy .side__me-who span{ display:block; font-size:12px; color:rgba(255,255,255,.65); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.buddy .side__me-out{ background:none; border:0; color:rgba(255,255,255,.65); cursor:pointer; padding:6px; border-radius:8px; display:grid; }
body.buddy .side__me-out:hover{ color:#fff; background:rgba(255,255,255,.1); }
body.buddy .side__foot{ border-top:0; padding:10px 4px 0; }
body.buddy .side__meta .pill{ color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.2); }
body.buddy .side__meta .pill--staging,body.buddy .side__meta .pill--mail-redirect{ color:#FFD58A; border-color:rgba(255,213,138,.45); }

/* ── page head ── */
body.buddy .main{ padding:28px var(--pad) 64px; }
body.buddy .page-head{ align-items:center; }
body.buddy .page-head h1{ font-size:clamp(22px,2.6vw,27px); font-weight:700; }
body.buddy .page-head__lead{ max-width:70ch; }

/* ── buttons ── */
body.buddy .btn{ min-height:42px; padding:0 16px; border-radius:12px; border:1px solid var(--line-strong); background:#fff; color:var(--text); font-size:13.5px; gap:8px; }
body.buddy .btn:hover{ background:var(--surface-2); border-color:#C2CFD3; }
body.buddy .btn svg.i{ width:18px; height:18px; }
body.buddy .btn--primary{ background:var(--accent); border-color:var(--accent); color:var(--brand-deep); box-shadow:0 6px 16px rgba(25,208,190,.25); }
body.buddy .btn--primary:hover{ background:#14C2B1; border-color:#14C2B1; filter:none; }
body.buddy .btn--brand{ background:var(--brand); border-color:var(--brand); color:#fff; }
body.buddy .btn--brand:hover{ background:var(--brand-deep); }
body.buddy .btn--small{ min-height:32px; padding:0 11px; font-size:12.5px; border-radius:10px; }
body.buddy .btn--danger{ background:#fff; color:var(--bad); border-color:#F2C4C6; }
body.buddy .btn--danger:hover{ background:var(--bad-soft); }
body.buddy .linkbtn{ color:var(--muted); }

/* ── cards, figures, tables ── */
body.buddy .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 1px 2px rgba(14,42,51,.04); }
body.buddy .card__head{ border-bottom:1px solid var(--line); padding:16px 20px; align-items:center; }
body.buddy .card__head h2{ font-size:15.5px; font-weight:700; display:flex; align-items:center; gap:8px; }
body.buddy .card__body{ padding:20px; }
body.buddy .stats{ gap:16px; }
body.buddy .stat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:0 1px 2px rgba(14,42,51,.04); }
body.buddy .stat__label{ font-size:13px; }
body.buddy .stat__value{ font-size:26px; font-weight:700; letter-spacing:-.02em; }
body.buddy .stat--key .stat__value{ background:none; color:var(--brand); -webkit-background-clip:border-box; background-clip:border-box; }
body.buddy .stat__note{ color:var(--muted); }
body.buddy thead th{ color:var(--faint); background:var(--surface-2); }
body.buddy tbody tr:hover{ background:var(--surface-2); }
body.buddy .sub{ color:var(--muted); }
body.buddy .dim{ color:var(--muted); }
body.buddy .empty{ color:var(--muted); }

/* ── chips and notices: colour means something ── */
body.buddy .chip{ border:0; padding:3px 10px; background:var(--surface-3); color:var(--muted); font-size:11.5px; }
body.buddy .chip--paid,body.buddy .chip--part_paid,body.buddy .chip--credited,body.buddy .chip--accepted,body.buddy .chip--active{ background:var(--ok-soft); color:var(--ok); }
body.buddy .chip--issued,body.buddy .chip--held,body.buddy .chip--paused,body.buddy .chip--provisional,body.buddy .chip--internal{ background:var(--warn-soft); color:var(--warn); }
body.buddy .chip--overdue,body.buddy .chip--declined{ background:var(--bad-soft); color:var(--bad); }
body.buddy .chip--sent,body.buddy .chip--lead,body.buddy .chip--monthly,body.buddy .chip--hourly{ background:var(--accent-soft); color:var(--accent-ink); }
body.buddy .sub.chip--overdue{ border:0; }
body.buddy .notice{ background:#fff; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; }
body.buddy .notice--ok{ background:var(--ok-soft); border-color:#BFE6D3; border-left-color:var(--ok); }
body.buddy .notice--bad{ background:var(--bad-soft); border-color:#F2C4C6; border-left-color:var(--bad); }
body.buddy .support{ background:var(--warn-soft); border-color:#F0D7A8; }
body.buddy .support--stop{ background:var(--bad-soft); border-color:#F2C4C6; }
body.buddy .pill{ border-color:var(--line-strong); }

/* ── forms ── */
body.buddy .field input,body.buddy .field textarea,body.buddy .field select,
body.buddy .editor select,body.buddy .editor input,body.buddy .editor textarea,
body.buddy .period input,body.buddy input.alloc,body.buddy .clause input,body.buddy .clause textarea,body.buddy .linkbox{
  background:#FAFCFC; border:1px solid var(--line-strong); border-radius:10px; color:var(--text);
}
body.buddy .field input:focus,body.buddy .field textarea:focus,body.buddy .field select:focus,
body.buddy .editor input:focus,body.buddy .editor textarea:focus,body.buddy .editor select:focus{ background:#fff; border-color:var(--accent); box-shadow:0 0 0 3px rgba(25,208,190,.22); }
body.buddy .field label,body.buddy .field__label,body.buddy .tools__row label{ color:var(--text); font-weight:600; }
body.buddy .field small{ color:var(--muted); }
body.buddy .maillog pre,body.buddy .notice code{ background:var(--surface-2); }

/* ── the editor ── */
body.buddy .totals__key dd{ background:none; color:var(--brand); -webkit-background-clip:border-box; background-clip:border-box; font-size:19px; }
body.buddy .icon{ border-radius:10px; background:#fff; color:var(--faint); border-color:var(--line); display:inline-grid; place-items:center; }
body.buddy .icon:hover:not(:disabled){ color:var(--text); }
body.buddy .icon--bad:hover:not(:disabled){ color:var(--bad); background:var(--bad-soft); }
body.buddy .icon svg.i{ width:16px; height:16px; }

/* ── the door (sign-in pages) ── */
body.buddy .door__box{ background:#fff; box-shadow:0 10px 30px rgba(14,42,51,.08); }
body.buddy .door__app{ background:none; color:var(--accent-ink); }

/* ── small screens: the menu becomes a strip of pills on the brand blue ── */
@media (max-width:860px){
  body.buddy .side{ padding:12px var(--pad); }
  body.buddy .side__brand--app{ padding:0 0 10px; }
  body.buddy .side__brand--app img{ width:120px; }
  body.buddy .side__link{ border:1px solid rgba(255,255,255,.18); border-radius:99px; padding:7px 12px; }
  body.buddy .side__link[aria-current="page"]{ box-shadow:none; border-color:var(--accent); }
  body.buddy .side__me{ display:none; }
}

/* ── shared pieces of the new screens: tones, badges, figure cards ── */
body.buddy .tone--acc{ background:var(--accent-soft); color:var(--accent-ink); }
body.buddy .tone--ok{ background:var(--ok-soft); color:var(--ok); }
body.buddy .tone--warn{ background:var(--warn-soft); color:var(--warn); }
body.buddy .tone--bad{ background:var(--bad-soft); color:var(--bad); }
body.buddy .tone--brand{ background:#E2EEF2; color:var(--brand); }
body.buddy .tone--mute{ background:var(--surface-3); color:var(--muted); }
body.buddy .badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; width:max-content; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.buddy .badge svg.i{ width:14px; height:14px; }
body.buddy .badge--acc{ background:var(--accent-soft); color:var(--accent-ink); }
body.buddy .badge--ok{ background:var(--ok-soft); color:var(--ok); }
body.buddy .badge--warn{ background:var(--warn-soft); color:var(--warn); }
body.buddy .badge--bad{ background:var(--bad-soft); color:var(--bad); }
body.buddy .badge--mute{ background:var(--surface-3); color:var(--muted); }
body.buddy .kpis{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:18px; }
body.buddy .kpi{ display:flex; flex-direction:column; gap:10px; padding:20px 22px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 1px 2px rgba(14,42,51,.04); text-decoration:none; color:inherit; }
body.buddy .kpi--link:hover{ border-color:#C2CFD3; box-shadow:0 6px 18px rgba(14,42,51,.07); }
body.buddy .kpi__ic,body.buddy .todo__ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none; }
body.buddy .kpi__label{ color:var(--muted); font-weight:500; }
body.buddy .kpi__value{ font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1.15; }

/* ── home ── */
body.buddy .home-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:16px; margin-bottom:18px; align-items:start; }
body.buddy .todo{ display:flex; align-items:center; gap:14px; padding:14px 20px; border-top:1px solid var(--line); }
body.buddy .card__head + .todo{ border-top:0; }
body.buddy .todo__ic{ width:38px; height:38px; border-radius:11px; }
body.buddy .todo__text{ flex:1; min-width:0; }
body.buddy .todo__text b{ display:block; font-weight:600; }
body.buddy .todo__text span{ color:var(--muted); font-size:13px; }
body.buddy .empty svg.i{ color:var(--ok); }
body.buddy .bars{ display:flex; align-items:flex-end; gap:10px; height:160px; padding:16px 20px 0; }
body.buddy .bars__month{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
body.buddy .bars__pair{ display:flex; gap:4px; align-items:flex-end; height:124px; }
body.buddy .bars__pair i{ display:block; width:12px; border-radius:6px 6px 3px 3px; }
body.buddy .bars__in{ background:var(--accent); }
body.buddy .bars__out{ background:#BFD5DC; }
body.buddy .bars__month small{ color:var(--faint); font-size:11px; font-weight:600; }
body.buddy .bars__legend{ display:flex; gap:16px; align-items:center; padding:12px 20px 18px; color:var(--muted); font-size:12px; flex-wrap:wrap; }
body.buddy .bars__legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
body.buddy .bars__legend b{ margin-left:auto; color:var(--text); }
body.buddy .feed{ display:flex; align-items:center; gap:12px; padding:12px 20px; border-top:1px solid var(--line); text-decoration:none; color:inherit; }
body.buddy .card__head + .feed{ border-top:0; }
body.buddy .feed:hover{ background:var(--surface-2); }
body.buddy .feed__amt{ margin-left:auto; color:var(--ok); }
body.buddy .feed__amt--out{ color:var(--text); }
@media (max-width:1100px){
  body.buddy .home-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px){
  body.buddy .kpis{ grid-template-columns:minmax(0,1fr); }
  body.buddy .feed{ flex-wrap:wrap; }
}
@media (max-width:760px){
  body.buddy .kpi{ display:grid; grid-template-columns:42px minmax(0,1fr); column-gap:14px; row-gap:4px; padding:16px 18px; }
  body.buddy .kpi__ic{ grid-row:span 3; }
  body.buddy .kpi__value{ font-size:24px; }
}

/* ── documents: progress steps ── */
.steps-bar{ list-style:none; margin:0 0 18px; padding:0; display:flex; align-items:center; flex-wrap:wrap; gap:6px 0; }
.steps-bar li{ display:flex; align-items:center; gap:8px; color:var(--faint); font-weight:600; font-size:13px; }
.steps-bar li + li::before{ content:""; width:34px; height:2px; background:var(--line-strong); margin:0 10px; }
.steps-bar__dot{ width:26px; height:26px; border-radius:50%; border:2px solid var(--line-strong); display:grid; place-items:center; font-size:12px; background:var(--surface); }
.steps-bar li.done,.steps-bar li.on{ color:var(--text); }
.steps-bar li.done .steps-bar__dot{ border-color:var(--accent); color:var(--accent-ink, var(--accent)); }
.steps-bar li.on .steps-bar__dot{ border-color:var(--accent); background:var(--accent); color:#0B3F52; }
.steps-bar li.done + li::before,.steps-bar li.done + li.on::before{ background:var(--accent); }

/* ── the editor in the new look ── */
body.buddy .totals__key{ background:var(--grad); border-radius:14px; padding:14px 16px !important; margin:8px 0 4px; border-bottom:0 !important; }
body.buddy .totals__key dt{ color:rgba(255,255,255,.8); }
body.buddy .totals__key dd{ color:#fff; font-size:24px; font-weight:700; }
body.buddy .editor__add{ background:var(--surface-2); border-radius:0 0 var(--radius) var(--radius); }
body.buddy .qline__acts .icon{ width:32px; height:32px; }
body.buddy details.disc > summary{ cursor:pointer; list-style:none; border-bottom:0; }
body.buddy details.disc > summary::-webkit-details-marker{ display:none; }
body.buddy details.disc > summary::after{ content:""; width:42px; height:24px; border-radius:999px; background:#D7E0E3; margin-left:auto; flex:none;
  background-image:radial-gradient(circle at 12px 12px,#fff 9px,transparent 10px); }
body.buddy details.disc[open] > summary{ border-bottom:1px solid var(--line); }
body.buddy details.disc[open] > summary::after{ background-color:var(--accent); background-image:radial-gradient(circle at 30px 12px,#fff 9px,transparent 10px); }
body.buddy details.disc > summary p{ order:0; }
body.buddy .check--switch input{ -webkit-appearance:none; appearance:none; width:42px; height:24px; min-height:0; padding:0; border:0;   /* not the form-field box, inside a .field */
   border-radius:999px; background:#D7E0E3; position:relative; cursor:pointer; margin:0; flex:none; transition:background .15s; }
body.buddy .check--switch input::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:left .15s; }
body.buddy .check--switch input:checked{ background:var(--accent); }
body.buddy .check--switch input:checked::after{ left:21px; }
body.buddy .check--switch{ gap:12px; }
body.buddy .editor__foot{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
body.buddy .editor__foot .btn--primary{ grid-column:1/-1; order:-1; min-height:46px; font-size:14.5px; }
body.buddy .editor__foot .btn--danger{ grid-column:1/-1; background:transparent; border-color:transparent; box-shadow:none; color:var(--bad); }
body.buddy details.disc > summary{ flex-wrap:nowrap; }
body.buddy details.disc > summary p{ display:none; }
body.buddy .editor__foot .btn{ white-space:nowrap; padding:0 10px; }

/* ── bank ── */
body.buddy .drop{ position:relative; display:flex; align-items:center; gap:20px; padding:24px 26px; border:2px dashed #BFE9E3; border-radius:var(--radius); background:linear-gradient(180deg,#F5FCFB 0%,#FFFFFF 100%); margin-bottom:8px; transition:border-color .15s,background .15s; }
body.buddy .drop.is-over{ border-color:var(--accent); background:var(--accent-soft); }
body.buddy .drop__ic{ width:60px; height:60px; border-radius:18px; background:var(--accent-soft); color:var(--accent-ink); display:grid; place-items:center; flex:none; }
body.buddy .drop__ic svg.i{ width:28px; height:28px; }
body.buddy .drop__text{ flex:1; min-width:0; }
body.buddy .drop__text h2{ font-size:18px; font-weight:700; }
body.buddy .drop__text p{ color:var(--muted); margin-top:4px; }
body.buddy .drop__pick{ position:relative; cursor:pointer; }
body.buddy .drop__input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
body.buddy .drop__more{ margin:0 0 18px 4px; font-size:13px; }
body.buddy .drop__more a{ color:var(--accent-ink); font-weight:600; }
body.buddy .months{ display:flex; flex-wrap:wrap; gap:8px; padding:16px 20px 20px; }
body.buddy .months__m{ display:flex; flex-direction:column; align-items:center; gap:6px; width:72px; padding:10px 0; border-radius:12px; font-size:12px; font-weight:600; }
body.buddy .months__m--done{ background:var(--ok-soft); color:var(--ok); }
body.buddy .months__m--miss{ background:var(--warn-soft); color:var(--warn); outline:1.5px dashed var(--warn); outline-offset:-1.5px; }
body.buddy .months__m--soon{ background:var(--surface-3); color:var(--faint); }
body.buddy .bank-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:16px; margin:18px 0; align-items:start; }
body.buddy .bank-status{ display:flex; flex-direction:column; gap:16px; }
body.buddy .status-card{ display:flex; align-items:center; gap:14px; padding:16px 20px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; color:inherit; box-shadow:0 1px 2px rgba(14,42,51,.04); }
body.buddy .status-card:hover{ border-color:#C2CFD3; }
body.buddy .status-card b{ display:block; font-size:19px; font-weight:700; }
body.buddy .status-card > span:last-child > span{ color:var(--muted); font-size:13px; }
body.buddy .feed__words{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.buddy .card__head h2 svg.i{ color:var(--accent-ink); }
@media (max-width:1100px){ body.buddy .bank-grid{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:640px){ body.buddy .drop{ flex-wrap:wrap; } body.buddy .months__m{ width:calc(25% - 6px); } }
/* a phone: the statement box stacks, so its words keep their width (16-the-app-rebuild.md phase 4) */
@media (max-width:640px){ body.buddy .drop{ flex-direction:column; align-items:flex-start; gap:14px; padding:20px; } body.buddy .drop__pick{ width:100%; justify-content:center; } }

/* ── scroll bars (Theo, 2026-10-13): the bar and arrows faded, full light blue when the pointer is on them; no background ── */
@supports not selector(::-webkit-scrollbar){
  html:has(body.buddy), body.buddy .side__nav, body.buddy .table-wrap{ scrollbar-color:rgba(25,208,190,.38) transparent; }
}
body.buddy ::-webkit-scrollbar{ width:10px; height:10px; }
body.buddy ::-webkit-scrollbar-track{ background:transparent; }
body.buddy ::-webkit-scrollbar-thumb{ background:rgba(25,208,190,.38); border-radius:8px; }
body.buddy ::-webkit-scrollbar-thumb:hover,body.buddy ::-webkit-scrollbar-thumb:active{ background:#19D0BE; }
body.buddy ::-webkit-scrollbar-button:single-button{ display:block; width:10px; height:12px; background-repeat:no-repeat; background-position:center; background-size:10px 10px; }
body.buddy ::-webkit-scrollbar-button:single-button:vertical:decrement{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cpolygon%20points%3D%225%2C3%208.5%2C7%201.5%2C7%22%20fill%3D%22rgba%2825%2C208%2C190%2C.38%29%22/%3E%3C/svg%3E"); }
body.buddy ::-webkit-scrollbar-button:single-button:vertical:increment{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cpolygon%20points%3D%221.5%2C3%208.5%2C3%205%2C7%22%20fill%3D%22rgba%2825%2C208%2C190%2C.38%29%22/%3E%3C/svg%3E"); }
body.buddy ::-webkit-scrollbar-button:single-button:horizontal:decrement{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cpolygon%20points%3D%223%2C5%207%2C1.5%207%2C8.5%22%20fill%3D%22rgba%2825%2C208%2C190%2C.38%29%22/%3E%3C/svg%3E"); }
body.buddy ::-webkit-scrollbar-button:single-button:horizontal:increment{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cpolygon%20points%3D%223%2C1.5%203%2C8.5%207%2C5%22%20fill%3D%22rgba%2825%2C208%2C190%2C.38%29%22/%3E%3C/svg%3E"); }
body.buddy ::-webkit-scrollbar-button:single-button:vertical:decrement:hover{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cpolygon%20points%3D%225%2C3%208.5%2C7%201.5%2C7%22%20fill%3D%22%2319D0BE%22/%3E%3C/svg%3E"); }
body.buddy ::-webkit-scrollbar-button:single-button:vertical:increment:hover{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cpolygon%20points%3D%221.5%2C3%208.5%2C3%205%2C7%22%20fill%3D%22%2319D0BE%22/%3E%3C/svg%3E"); }
body.buddy ::-webkit-scrollbar-button:single-button:horizontal:decrement:hover{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cpolygon%20points%3D%223%2C5%207%2C1.5%207%2C8.5%22%20fill%3D%22%2319D0BE%22/%3E%3C/svg%3E"); }
body.buddy ::-webkit-scrollbar-button:single-button:horizontal:increment:hover{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cpolygon%20points%3D%223%2C1.5%203%2C8.5%207%2C5%22%20fill%3D%22%2319D0BE%22/%3E%3C/svg%3E"); }
/* The menu's scroll bar sits on the sidebar's right edge, clear of the menu items. */
@media (min-width:861px){ body.buddy .side__nav{ margin-right:-6px; padding-right:6px; } }
body.buddy .tab{ background:#fff; border-color:var(--line); color:var(--muted); font-weight:600; }
body.buddy .tab:hover{ color:var(--text); border-color:var(--line-strong); }
body.buddy .tab[aria-current="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* ── the guided setup (08-guided-setup.md) ── */
body.buddy .setup-steps{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
body.buddy .setup-steps a{ display:flex; align-items:center; gap:8px; padding:8px 14px 8px 8px; border-radius:999px; background:#fff; border:1px solid var(--line); text-decoration:none; color:var(--muted); font-weight:600; font-size:13px; }
body.buddy .setup-steps__dot{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--surface-3); font-size:12px; }
body.buddy .setup-steps li.done a{ color:var(--ok); border-color:#BFE6D3; background:var(--ok-soft); }
body.buddy .setup-steps li.done .setup-steps__dot{ background:var(--ok); color:#fff; }
body.buddy .setup-steps li.on a{ color:#fff; background:var(--brand); border-color:var(--brand); }
body.buddy .setup-steps li.on .setup-steps__dot{ background:var(--accent); color:var(--brand-deep); }
body.buddy .setup-card{ max-width:860px; }
body.buddy .setup-note{ color:var(--muted); background:var(--accent-soft); border-radius:12px; padding:12px 14px; }
body.buddy .setup-drop{ max-width:860px; }
body.buddy .setup-next{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
body.buddy .setup-next__item{ display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--line); border-radius:14px; text-decoration:none; color:inherit; }
body.buddy .setup-next__item:hover{ border-color:var(--accent); }
body.buddy .setup-banner{ display:flex; align-items:center; gap:16px; padding:16px 20px; margin-bottom:18px; border-radius:var(--radius); background:#fff; border:1px solid #BFE9E3; text-decoration:none; color:inherit; box-shadow:0 1px 2px rgba(14,42,51,.04); }
body.buddy .setup-banner__text{ flex:1; min-width:0; }
body.buddy .setup-banner__text b{ display:block; }
body.buddy .setup-banner__text span{ color:var(--muted); font-size:13px; }
body.buddy .setup-banner__bar{ width:160px; height:8px; border-radius:99px; background:var(--surface-3); overflow:hidden; flex:none; }
body.buddy .setup-banner__bar i{ display:block; height:100%; background:var(--accent); border-radius:99px; }
@media (max-width:760px){ body.buddy .setup-next{ grid-template-columns:minmax(0,1fr); } body.buddy .setup-banner{ flex-wrap:wrap; } body.buddy .setup-banner__bar{ width:100%; } }

/* ── the Bizwizz wordmark, until the new logo arrives ── */
body.buddy .wordmark-app{ display:inline-block; font-size:26px; font-weight:800; letter-spacing:-.02em; color:#fff; }
body.buddy .wordmark-app::first-letter{ color:var(--accent); }
body.buddy .wordmark-app--door{ color:var(--brand); font-size:32px; margin:0 0 18px; }

/* ── how-to clips: "Watch how" and its player (src/ui/tutorials.tsx, public/watch.js) ── */
body.buddy .watch{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14px; color:var(--brand); text-decoration:none; }
body.buddy .watch svg.i{ width:18px; height:18px; color:var(--accent-ink, var(--brand)); }
body.buddy .watch:hover{ color:var(--brand-deep); text-decoration:underline; }
body.buddy .watch__secs{ font-weight:500; font-size:12px; color:var(--muted); background:#E2EEF2; border-radius:99px; padding:1px 8px; }
body.buddy .watch--btn{ text-decoration:none !important; }
body.buddy .watch--pill{ flex:none; padding:6px 8px 6px 12px; border:1px solid var(--line-strong); border-radius:999px; background:#fff; font-size:13px; }
body.buddy .watch--pill:hover{ border-color:var(--accent); text-decoration:none; }
body.buddy .card__head--step{ flex-wrap:nowrap; }
body.buddy .card__head--step p{ margin:2px 0 0 28px; }   /* under the title's words, not its icon (20px icon + 8px gap) */
body.buddy .setup-drop .watch--pill{ margin-left:auto; }
@media (max-width:560px){ body.buddy .card__head--step{ flex-wrap:wrap; } }
body.buddy .setup-videos{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; border-top:1px solid var(--line); }
body.buddy .setup-videos p{ margin:0; width:100%; }
.watch-dialog{ width:min(960px,calc(100vw - 32px),calc((100vh - 120px) * 16 / 9)); padding:0; border:0; border-radius:16px; overflow:hidden; background:#0B3F52; color:#fff; box-shadow:0 30px 80px rgba(0,0,0,.45); }
.watch-dialog::backdrop{ background:rgba(6,30,40,.72); }
.watch-dialog__bar{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px 10px 18px; font-size:15px; }
.watch-dialog__close{ font:inherit; font-size:26px; line-height:1; width:36px; height:36px; border-radius:50%; border:0; background:rgba(255,255,255,.1); color:#fff; cursor:pointer; }
.watch-dialog__close:hover{ background:rgba(255,255,255,.2); }
.watch-dialog video{ display:block; width:100%; aspect-ratio:16/9; background:#000; }


/* ── book a call (the site's Get your wizard): the door's page, wider, in steps ── */
body.buddy.book{ align-items:start; padding-top:28px; }
body.buddy.book--embed{ background:transparent; padding:0; min-height:0; }
body.buddy.book--embed .door__box{ box-shadow:none; border:0; padding:4px 2px; }
body.buddy .book__box--wide{ max-width:720px; }
body.buddy .book__head{ margin:8px 0 18px; }
body.buddy .book__head h1{ font-size:24px; margin-bottom:6px; }
body.buddy .book__kinds{ display:grid; gap:10px; margin:0 0 18px; }
body.buddy .book__kind{ display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--line-strong); border-radius:12px; text-decoration:none; color:var(--text); background:#fff; }
body.buddy .book__kind.is-on{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(25,208,190,.22); }
body.buddy .book__kind-ic{ flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); }
body.buddy .book__kind b{ display:block; font-size:15.5px; }
body.buddy .book__kind small{ display:block; color:var(--muted); font-size:13.5px; margin-top:2px; }
body.buddy .book__step{ margin:0 0 10px; font-size:14.5px; }
body.buddy .book__days{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:thin; }
body.buddy .book__day{ flex:none; width:64px; padding:8px 6px; border:1px solid var(--line-strong); border-radius:12px; text-align:center; text-decoration:none; color:var(--text); background:#fff; }
body.buddy .book__day small{ display:block; font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
body.buddy .book__day b{ display:block; font-size:14px; margin-top:2px; }
body.buddy .book__day.is-on{ background:var(--brand); border-color:var(--brand); color:#fff; }
body.buddy .book__day.is-on small{ color:rgba(255,255,255,.75); }
body.buddy .book__day.is-off{ opacity:.4; pointer-events:none; }
body.buddy .book__times{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; margin:10px 0 20px; }
body.buddy .book__time{ display:block; padding:10px 0; text-align:center; border:1px solid var(--line-strong); border-radius:10px; text-decoration:none; color:var(--text); font-weight:600; font-size:14.5px; background:#fff; }
body.buddy .book__time:hover{ border-color:var(--accent); }
body.buddy .book__time.is-on{ background:var(--accent); border-color:var(--accent); color:var(--brand-deep); }
body.buddy .book__form{ border-top:1px solid var(--line); padding-top:18px; }
body.buddy .book__chosen,body.buddy .book__when{ display:flex; align-items:center; gap:10px; margin:0 0 14px; }
body.buddy .book__chosen svg.i,body.buddy .book__when svg.i{ color:var(--accent-ink); flex:none; }
body.buddy .book__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
body.buddy .book__fine{ font-size:13px; margin-top:12px; }
body.buddy .book__done{ text-align:center; padding:10px 0; }
body.buddy .book__done-ic{ display:inline-grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); margin-bottom:12px; }
body.buddy .book__done-ic svg.i{ width:28px; height:28px; }
body.buddy .book__done h1{ font-size:24px; margin-bottom:10px; }
body.buddy .book__done .book__when{ justify-content:center; }
body.buddy .book__manage{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
body.buddy td .actions{ display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
body.buddy td .actions form{ margin:0; }
@media (min-width:600px){ body.buddy .book__kinds{ grid-template-columns:1fr 1fr; } }

/* ── the wizard (WizDash/architecture/11-the-wizard.md) ── */
body.buddy .btn--wizard svg.i{ color:var(--accent-ink); }
body.buddy .wiz{ padding:28px 22px 22px; text-align:center; }
body.buddy .wiz__rec{ display:flex; flex-direction:column; align-items:center; gap:12px; }
body.buddy .wiz__mic{ width:112px; height:112px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; color:#fff;
  background:var(--grad); box-shadow:0 10px 30px rgba(15,83,107,.28), inset 0 0 0 6px rgba(255,255,255,.12); transition:transform .15s ease, box-shadow .2s ease; }
body.buddy .wiz__mic svg.i{ width:44px; height:44px; stroke-width:1.7; }
body.buddy .wiz__mic:hover{ transform:scale(1.03); }
body.buddy .wiz__mic:focus-visible{ outline:3px solid var(--accent); outline-offset:4px; }
body.buddy .wiz__mic[disabled]{ opacity:.5; cursor:default; transform:none; }
body.buddy .wiz--rec .wiz__mic{ background:var(--bad); box-shadow:0 0 0 0 rgba(220,74,79,.45); animation:wiz-pulse 1.6s ease-out infinite; }
@keyframes wiz-pulse{ 0%{ box-shadow:0 0 0 0 rgba(220,74,79,.45); } 100%{ box-shadow:0 0 0 26px rgba(220,74,79,0); } }
body.buddy .wiz__time{ font-size:22px; font-weight:700; letter-spacing:.02em; margin:4px 0 0; }
body.buddy .wiz__say{ color:var(--muted); margin:0; max-width:34em; }
body.buddy .wiz__acts{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:4px; }
body.buddy .wiz__acts[hidden],body.buddy .wiz__busy[hidden],body.buddy [data-err][hidden],body.buddy [data-copied][hidden]{ display:none; }
body.buddy .wiz__busy{ display:flex; align-items:center; gap:10px; color:var(--accent-ink); font-weight:600; margin:4px 0 0; }
body.buddy .wiz__dots{ display:inline-flex; gap:4px; }
body.buddy .wiz__dots i{ width:7px; height:7px; border-radius:50%; background:var(--accent); animation:wiz-dot 1s ease-in-out infinite; }
body.buddy .wiz__dots i:nth-child(2){ animation-delay:.15s; } body.buddy .wiz__dots i:nth-child(3){ animation-delay:.3s; }
@keyframes wiz-dot{ 0%,100%{ opacity:.3; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-4px); } }
body.buddy .wiz__file{ margin:22px auto 0; max-width:30em; text-align:left; border-top:1px solid var(--line); padding-top:14px; }
body.buddy .wiz__file summary{ cursor:pointer; color:var(--muted); font-size:14.5px; }
body.buddy .wiz__file form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px; }
body.buddy .wiz__eg{ color:var(--faint); font-size:13.5px; margin:16px auto 0; max-width:36em; }
body.buddy .wiz-result{ display:grid; gap:16px; }
body.buddy .wiz-text{ width:100%; resize:vertical; font:inherit; font-size:15.5px; line-height:1.55; padding:12px 14px; border:1px solid var(--line-strong); border-radius:12px; background:var(--surface-2); color:var(--text); }
body.buddy .wiz-copy{ display:flex; align-items:center; gap:12px; margin:10px 0 0; }
body.buddy .card--focus{ box-shadow:0 0 0 3px rgba(25,208,190,.35); }
body.buddy .wiz-new{ grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; border:1px dashed var(--line-strong); border-radius:12px; padding:12px 14px 14px; margin:0; }
body.buddy .wiz-new legend{ font-size:13px; color:var(--muted); padding:0 6px; }
body.buddy .wiz-new[hidden]{ display:none; }
body.buddy .wiz-make{ justify-content:flex-start; }
body.buddy .src{ display:inline-block; font-size:12.5px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; }
body.buddy .src--price_list{ background:var(--ok-soft); color:var(--ok); }
body.buddy .src--spoken{ background:var(--accent-soft); color:var(--accent-ink); }
body.buddy .src--none{ background:var(--warn-soft); color:var(--warn); }
body.buddy .wizcard .card__head h2{ display:flex; align-items:center; gap:8px; }
body.buddy .wizcard__lines{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
body.buddy .wizcard__lines li{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:14px; }
body.buddy .wizcard__unsure{ margin-top:12px; padding:10px 12px; border-radius:10px; background:var(--warn-soft); font-size:14px; }
body.buddy .wizcard__unsure p{ margin:0 0 4px; }
body.buddy .wizcard__unsure ul{ margin:0; padding-left:18px; }
body.buddy .wizcard__said{ margin-top:12px; font-size:14px; }
body.buddy .wizcard__said summary{ cursor:pointer; color:var(--muted); }
body.buddy .wizcard__said p{ margin:8px 0 0; }
body.buddy .wizcard__back{ margin:12px 0 0; font-size:14px; }
body.buddy .wiz-heard summary{ cursor:pointer; list-style:none; }
body.buddy .wiz-heard summary::-webkit-details-marker{ display:none; }
@media (max-width:600px){ body.buddy .wiz-new{ grid-template-columns:minmax(0,1fr); } body.buddy .wiz-make .btn{ flex:1 1 100%; justify-content:center; }
  body.buddy .wiz-lines th,body.buddy .wiz-lines td{ padding-left:8px; padding-right:8px; } body.buddy .wiz-lines th:first-child,body.buddy .wiz-lines td:first-child{ padding-left:4px; } }
@media (prefers-reduced-motion:reduce){ body.buddy .wiz--rec .wiz__mic,body.buddy .wiz__dots i{ animation:none; } }

/* the microphone cards: WizDash's own screens before and after the browser's question */
.micdlg{ width:min(420px,calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; border:0; border-radius:20px; overflow:auto; background:#fff; color:var(--text,#0E2A33); box-shadow:0 30px 80px rgba(6,30,40,.35); }
.micdlg::backdrop{ background:rgba(6,30,40,.6); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.micdlg__head{ background:#0F536B; display:grid; place-items:center; padding:18px 0 0; overflow:hidden; }
/* the picture's own blue runs 2px under the edge, so a scaled edge never shows as a hairline */
.micdlg__head img{ display:block; width:96px; height:96px; margin-bottom:-2px; }
.micdlg__body{ padding:20px 22px 22px; }
.micdlg__body h2{ font-size:20px; margin:0 0 10px; }
.micdlg__body p{ margin:0 0 10px; line-height:1.5; }
.micdlg__fine{ font-size:13.5px; color:var(--muted,#5B7480); }
.micdlg__steps ol{ margin:0 0 12px; padding-left:20px; display:grid; gap:6px; line-height:1.45; }
.micdlg__steps[hidden]{ display:none; }
.micdlg__acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.micdlg__acts .btn{ flex:1 1 auto; justify-content:center; }
@media (max-width:600px){ .micdlg__acts .btn{ flex-basis:100%; } }

/* ── the wizard chat (WizDash/architecture/12-wizard-chat-and-job-cards.md section 3) ── */
body.buddy .chat{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:16px; align-items:start; }
body.buddy .chat__list{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:12px; position:sticky; top:16px; max-height:calc(100vh - 140px); overflow:auto; }
body.buddy .chat__new{ width:100%; justify-content:center; margin-bottom:10px; }
body.buddy .chat__list ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
body.buddy .chat__item{ display:block; padding:9px 10px; border-radius:10px; text-decoration:none; color:var(--text); }
body.buddy .chat__item:hover{ background:var(--surface-2); }
body.buddy .chat__item.is-on{ background:var(--accent-soft); }
body.buddy .chat__item-top{ display:flex; justify-content:space-between; gap:8px; font-size:14px; }
body.buddy .chat__item-top b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.buddy .chat__item-top time{ color:var(--faint); font-size:12px; white-space:nowrap; }
body.buddy .chat__item-sub{ display:block; color:var(--muted); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
body.buddy .chat__none{ font-size:13.5px; padding:6px 4px; margin:0; }
body.buddy .chat__main{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; min-height:calc(100vh - 140px); }
body.buddy .chat__head{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); }
body.buddy .chat__head h2{ font-size:17px; margin:0; }
body.buddy .chat__head p{ margin:2px 0 0; font-size:13px; }
body.buddy .chat__back{ display:none; }
body.buddy .chat__hello{ text-align:center; padding:28px 18px 4px; }
body.buddy .chat__hello img{ display:block; margin:0 auto; border-radius:18px; }
body.buddy .chat__hello h2{ font-size:20px; margin:12px 0 4px; }
body.buddy .chat__hello p{ margin:0 auto; max-width:30em; }
body.buddy .chat__hello .chat__watch{ margin-top:12px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
/* On your phone (Settings): the wizard on the home screen, steps for this phone (src/ui/home-screen.tsx) */
body.buddy .homescreen{ display:grid; gap:14px; max-width:560px; }
body.buddy .homescreen__intro{ display:flex; align-items:center; gap:14px; }
body.buddy .homescreen__intro img{ flex:none; border-radius:14px; }
body.buddy .homescreen__intro p{ margin:0; flex:1; }
/* a phone: the words keep their width; Watch how goes under them (16-the-app-rebuild.md phase 4) */
@media (max-width:640px){ body.buddy .homescreen__intro{ flex-wrap:wrap; } body.buddy .homescreen__intro p{ flex:1 1 calc(100% - 90px); } }
body.buddy .homescreen > .btn{ justify-self:start; }
body.buddy .homescreen__steps{ padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2,#F6FAFB); }
body.buddy .homescreen__steps p{ margin:0 0 8px; }
body.buddy .homescreen__steps ol{ margin:0; padding-left:20px; display:grid; gap:6px; line-height:1.45; }
body.buddy .homescreen__steps[hidden], body.buddy .homescreen__done[hidden], body.buddy .homescreen > [hidden]{ display:none; }
body.buddy .homescreen__done{ display:flex; align-items:center; gap:8px; margin:0; font-weight:600; color:var(--ok,#0E7A5F); }
body.buddy .chat__msgs{ flex:1; padding:16px 18px; display:flex; flex-direction:column; gap:12px; overflow-y:auto; max-height:calc(100vh - 300px); }
body.buddy .chat__main--new .chat__msgs{ max-height:none; }
body.buddy .msg{ max-width:min(560px,88%); padding:10px 13px; border-radius:16px; }
body.buddy .msg--owner{ align-self:flex-end; background:var(--brand); color:#fff; border-bottom-right-radius:6px; }
body.buddy .msg--wizard{ align-self:flex-start; background:var(--surface-2); border:1px solid var(--line); border-bottom-left-radius:6px; }
body.buddy .msg--failed{ background:var(--bad-soft); border-color:#F2C4C6; }
body.buddy .msg__text{ margin:0; white-space:pre-wrap; line-height:1.5; }
body.buddy .msg__time{ display:block; font-size:11px; opacity:.6; margin-top:4px; text-align:right; }
body.buddy .msg__voice{ display:flex; align-items:center; gap:6px; margin:0 0 4px; font-size:13px; opacity:.85; }
body.buddy .msg__voice svg.i{ width:16px; height:16px; }
body.buddy .msg__photos{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
body.buddy .msg__photos img{ width:96px; height:96px; object-fit:cover; border-radius:10px; display:block; }
body.buddy .msg__gone{ font-size:12px; opacity:.8; border:1px dashed rgba(255,255,255,.5); border-radius:10px; padding:8px; }
body.buddy .msg__read{ margin-top:6px; font-size:12.5px; }
body.buddy .msg__read summary{ cursor:pointer; opacity:.85; }
body.buddy .msg__read p{ white-space:pre-wrap; margin:6px 0 0; }
body.buddy .msg__state{ display:block; font-size:11px; opacity:.75; margin-top:4px; text-align:right; }
body.buddy .msg--waiting{ background:var(--brand-deep); }
body.buddy .msg--typing{ display:flex; align-items:center; gap:10px; color:var(--accent-ink); font-weight:600; font-size:14px; }
body.buddy .msg__options{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
body.buddy .msg__options form{ margin:0; }
body.buddy .chip-btn{ font:inherit; font-size:13.5px; padding:6px 12px; border-radius:999px; border:1px solid var(--accent); background:#fff; color:var(--accent-ink); cursor:pointer; }
body.buddy .chip-btn:hover{ background:var(--accent-soft); }
body.buddy .wcard{ margin-top:10px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
body.buddy .wcard__for{ margin:0 0 8px; font-size:14px; }
body.buddy .wcard__lines{ width:100%; border-collapse:collapse; font-size:13.5px; }
body.buddy .wcard__lines td{ padding:6px 4px; border-top:1px solid var(--line); vertical-align:top; }
body.buddy .wcard__lines tr:first-child td{ border-top:0; }
body.buddy .wcard__lines .sub{ display:block; color:var(--muted); font-size:12.5px; }
body.buddy .wcard__lines .src{ display:inline-block; margin-top:4px; }
body.buddy .wcard__make{ margin-top:10px; display:grid; gap:8px; }
body.buddy .wcard__make select{ width:100%; min-height:40px; padding:0 10px; border:1px solid var(--line-strong); border-radius:10px; background:#fff; color:var(--text); font:inherit; font-size:14px; }
body.buddy .wcard__acts{ display:flex; flex-wrap:wrap; gap:8px; }
body.buddy .wcard__acts form{ margin:0; }
body.buddy .wcard__made{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
body.buddy .wcard__made p{ margin:0 0 8px; font-size:14px; }
body.buddy .wcard__astext{ margin-top:8px; font-size:13px; }
body.buddy .wcard__astext summary,body.buddy .wcard > details > summary{ cursor:pointer; color:var(--muted); }
body.buddy .wcard .wiz-new{ grid-template-columns:minmax(0,1fr); }
body.buddy .card-text .wiz-text{ font-size:14.5px; margin-top:6px; }
body.buddy .composer{ border-top:1px solid var(--line); padding:12px 14px; position:sticky; bottom:0; background:#fff; border-radius:0 0 var(--radius) var(--radius); }
body.buddy .composer__kinds{ border:0; margin:0 0 10px; padding:0; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
body.buddy .composer__kinds legend{ width:100%; text-align:center; font-weight:600; margin-bottom:8px; }
body.buddy .kindpick{ position:relative; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--line-strong); border-radius:12px; cursor:pointer; font-weight:600; font-size:14.5px; background:#fff; }
body.buddy .kindpick input{ position:absolute; opacity:0; pointer-events:none; }
body.buddy .kindpick svg.i{ color:var(--accent-ink); }
body.buddy .kindpick:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 3px rgba(25,208,190,.2); }
body.buddy .kindpick:has(input:focus-visible){ outline:3px solid var(--accent); outline-offset:2px; }
body.buddy .composer__row{ display:flex; align-items:flex-end; gap:8px; }
body.buddy .composer__row textarea{ flex:1; min-width:0; resize:none; font:inherit; font-size:15px; line-height:1.45; padding:10px 12px; border:1px solid var(--line-strong); border-radius:14px; background:var(--surface-2); min-height:44px; max-height:160px; }
body.buddy .composer__btn,body.buddy .composer__send{ flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer; border:1px solid var(--line-strong); background:#fff; color:var(--brand); }
body.buddy .composer__btn[hidden]{ display:none; }
body.buddy .composer__send{ background:var(--accent); border-color:var(--accent); color:var(--brand-deep); }
body.buddy .composer--rec .composer__mic{ background:var(--bad); border-color:var(--bad); color:#fff; animation:wiz-pulse 1.6s ease-out infinite; }
body.buddy .composer__rec{ display:flex; align-items:center; gap:10px; margin-bottom:8px; font-weight:600; color:var(--bad); }
body.buddy .composer__rec[hidden],body.buddy .composer__photos[hidden]{ display:none; }
body.buddy .rec-dot{ width:10px; height:10px; border-radius:50%; background:var(--bad); animation:wiz-dot 1s ease-in-out infinite; }
body.buddy .composer__photos{ display:flex; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
body.buddy .photo-chip{ position:relative; }
body.buddy .photo-chip img{ width:64px; height:64px; object-fit:cover; border-radius:10px; display:block; }
body.buddy .photo-chip button{ position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; border:0; background:var(--brand-deep); color:#fff; cursor:pointer; line-height:1; }
body.buddy .composer__file{ margin-top:8px; font-size:13px; }
body.buddy .composer__file summary{ cursor:pointer; color:var(--muted); }
/* Job cards (doc 12 section 4): the card's parts as a list, its photos, and moving a message to another job. */
body.buddy .jcard{ margin:0; display:grid; gap:0; font-size:14px; }
body.buddy .jcard__row{ display:grid; grid-template-columns:118px minmax(0,1fr); gap:10px; padding:7px 0; border-top:1px solid var(--line); }
body.buddy .jcard__row:first-child{ border-top:0; padding-top:0; }
body.buddy .jcard dt{ color:var(--muted); font-size:13px; }
body.buddy .jcard dd{ margin:0; }
body.buddy .jcard dd .sub{ display:block; color:var(--muted); font-size:12.5px; margin-top:2px; }
body.buddy .jcard__text{ white-space:pre-wrap; }
body.buddy .jcard .wcard__lines td{ padding:4px 2px; }
body.buddy .jcard__photos{ display:flex; flex-wrap:wrap; gap:8px; }
body.buddy .jcard__photos a{ display:grid; gap:2px; text-decoration:none; color:var(--muted); font-size:12px; }
body.buddy .jcard__photos img{ width:84px; height:84px; object-fit:cover; border-radius:10px; display:block; }
body.buddy .msg__photos a{ position:relative; }
body.buddy .msg__kind{ position:absolute; left:4px; bottom:4px; background:rgba(0,0,0,.6); color:#fff; font-size:11px; padding:1px 6px; border-radius:8px; }
body.buddy .msg__moved{ margin:4px 0 0; font-size:12px; opacity:.8; }
body.buddy .msg__move{ margin-top:6px; font-size:12.5px; }
body.buddy .msg__move summary{ cursor:pointer; opacity:.85; }
body.buddy .msg__move form{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 0; }
body.buddy .msg__move select{ min-height:34px; border-radius:8px; border:0; padding:0 8px; font:inherit; font-size:13px; max-width:100%; }
@media (max-width:520px){ body.buddy .jcard__row{ grid-template-columns:minmax(0,1fr); gap:2px; } }
/* The WhatsApp line (doc 12 section 5): messages from site, the list's dot, what waits for an answer, the people on the line. */
body.buddy .msg--team{ align-self:flex-start; background:#E9F7F1; border:1px solid #BFE6D4; border-bottom-left-radius:6px; color:var(--text); }
body.buddy .msg--team .msg__gone{ border-color:var(--line-strong); }
body.buddy .msg__who{ margin:0 0 4px; font-size:12.5px; font-weight:600; color:#1F7A5A; }
/* A long job title ("Job for Mrs P Naidoo, Sea Point") is cut with an ellipsis, not pushed past the list's edge. */
body.buddy .chat__list ul{ grid-template-columns:minmax(0,1fr); }
body.buddy .chat__item-top b{ min-width:0; }
body.buddy .chat__dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-right:6px; vertical-align:middle; }
body.buddy .chat__waiting{ border:1px solid var(--line); border-radius:12px; padding:10px; margin-bottom:10px; background:var(--surface-2); font-size:13px; }
body.buddy .chat__waiting p{ margin:0 0 6px; }
body.buddy .chat__waiting ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
body.buddy .chat__waiting .sub{ display:block; color:var(--muted); }
body.buddy .chat__waiting form{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 0; }
body.buddy .chat__waiting select{ min-height:32px; max-width:100%; border:1px solid var(--line-strong); border-radius:8px; font:inherit; font-size:13px; }
body.buddy .chat__unread{ font-size:13px; margin:0 0 10px; }
body.buddy .line-people{ margin-top:22px; padding-top:16px; border-top:1px solid var(--line); }
body.buddy .line-people h3{ font-size:15px; margin:0 0 6px; }
body.buddy .composer [data-err]{ margin:8px 0 0; }
body.buddy .composer [data-err][hidden]{ display:none; }
body.buddy .chat__closed{ margin:12px; }
@media (max-width:900px){
  body.buddy .chat{ grid-template-columns:minmax(0,1fr); }
  body.buddy .chat__list{ position:static; max-height:none; order:2; }
  body.buddy .chat--thread .chat__list{ display:none; }
  body.buddy .chat__back{ display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:var(--brand); }
  body.buddy .chat__main{ min-height:0; }
  body.buddy .chat__msgs{ max-height:none; overflow:visible; padding:12px; }
  body.buddy .msg{ max-width:92%; }
  body.buddy .composer{ padding:10px; }
}
@media (prefers-reduced-motion:reduce){ body.buddy .composer--rec .composer__mic,body.buddy .rec-dot{ animation:none; } }

/* ── BIZWIZ LOGO (generated by the logo cut, see bizwiz-logo.tsx) ── */
.bzw{ position:relative; display:block; width:100%; aspect-ratio:800/236; }
.bzw img,.bzw__wiz,.bzw__staff,.bzw__word,.bzw__sparks{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.bzw__hat{ transform-origin:11.34% 23.26%; }
.bzw__staff{ transform-origin:19.59% 46.51%; }
.bzw__wiz{ transform-origin:10.65% 98.84%; }
.bzw__word{ transform-origin:55% 50%; }
.bzw__lid{ position:absolute; background:rgb(229,188,176); border-bottom:1px solid #0B2236; opacity:0; }
.bzw__glow{ position:absolute; left:19.66%; top:13.95%; width:10.31%; aspect-ratio:1; border-radius:50%; opacity:0; transform:translate(-50%,-50%) scale(.2);
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(25,208,190,.85) 18%,rgba(25,208,190,.3) 42%,transparent 70%); }
.bzw__spark{ position:absolute; left:22.63%; top:15.62%; width:1.24%; aspect-ratio:1; margin:-0.62% 0 0 -0.62%; opacity:0; border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#19D0BE 45%,transparent 72%); filter:drop-shadow(0 0 3px #19D0BE); }
.bzw__shine{ position:absolute; inset:0; -webkit-mask:url(/brand/bizwiz/text.png?v=2) 0 0/100% 100% no-repeat; mask:url(/brand/bizwiz/text.png?v=2) 0 0/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 0 40%,rgba(140,245,232,.95) 48%,rgba(255,255,255,.9) 50%,rgba(140,245,232,.95) 52%,transparent 60% 100%) no-repeat;
  background-size:300% 100%; background-position:100% 0; opacity:0; }

.bzw--cast .bzw__wiz{ animation:bzw-breathe 6s ease-in-out 1; }
.bzw--cast .bzw__staff{ animation:bzw-cast 6s cubic-bezier(.45,0,.3,1) 1; }
.bzw--cast .bzw__hat{ animation:bzw-hat 6s ease-in-out 1; }
.bzw--cast .bzw__lid{ animation:bzw-blink 6s steps(1,end) 1; }
.bzw--cast .bzw__glow{ animation:bzw-glow 6s ease-out 1; }
.bzw--cast .bzw__spark{ animation:bzw-fly 6s cubic-bezier(.3,.1,.3,1) 1; animation-delay:var(--d); }
.bzw--cast .bzw__word{ animation:bzw-hit 6s ease-out 1; }
.bzw--cast .bzw__shine{ animation:bzw-shine 6s ease-in-out 1; }
@keyframes bzw-breathe{ 0%,100%{transform:scaleY(1)} 12%{transform:scaleY(1.008)} 24%{transform:scaleY(.996) translateY(.3%)} 32%{transform:scaleY(1.004)} 50%{transform:scaleY(1)} }
@keyframes bzw-cast{ 0%,12%{transform:rotate(0)} 24%{transform:rotate(-11deg)} 29%{transform:rotate(18deg)} 40%{transform:rotate(15deg)} 56%{transform:rotate(-3deg)} 64%{transform:rotate(1.5deg)} 70%,100%{transform:rotate(0)} }
@keyframes bzw-hat{ 0%,14%{transform:rotate(0)} 25%{transform:rotate(1.5deg)} 31%{transform:rotate(-2.5deg)} 44%{transform:rotate(1deg)} 54%{transform:rotate(-.5deg)} 62%,100%{transform:rotate(0)} }
@keyframes bzw-blink{ 0%,82%{opacity:0} 83%{opacity:1} 85%,100%{opacity:0} }
@keyframes bzw-glow{ 0%,13%{opacity:0;transform:translate(-50%,-50%) scale(.2)} 24%{opacity:.8;transform:translate(-50%,-50%) scale(.7)} 29%{opacity:1;transform:translate(-50%,-50%) scale(1.5)} 40%,100%{opacity:0;transform:translate(-50%,-50%) scale(.3)} }
@keyframes bzw-fly{ 0%,28%{opacity:0;transform:translate(0,0) scale(.5)} 29%{opacity:1} 39%{opacity:1;transform:var(--to) scale(1.3)} 45%,100%{opacity:0;transform:var(--to) scale(2.4)} }
@keyframes bzw-hit{ 0%,37%{transform:none;filter:none} 39%{transform:scale(1.025) rotate(-.6deg);filter:drop-shadow(0 0 8px rgba(25,208,190,.55))} 48%{transform:scale(.995);filter:drop-shadow(0 0 7px rgba(25,208,190,.45))} 58%{transform:none;filter:drop-shadow(0 0 4px rgba(25,208,190,.25))} 66%,100%{transform:none;filter:none} }
@keyframes bzw-shine{ 0%,38%{opacity:1;background-position:100% 0} 72%{opacity:1;background-position:0 0} 73%,100%{opacity:0;background-position:0 0} }
@media (prefers-reduced-motion:reduce){ .bzw *{ animation:none !important; } }

body.buddy .side__brand--app{ padding-left:0; padding-right:0; }
body.buddy .side__brand--app .bzw{ width:220px; margin-left:-6px; }   /* as wide as the sidebar allows: 8px clear either side */
body.buddy .side__brand--app .bzw img{ width:100%; height:100%; }   /* the sidebar's own logo-image width must not reach the layers */
body.buddy .door__box .bzw{ width:260px; margin:0 0 18px; }
/* Error pages in WizDash's look (Theo 2026-10-26): the sign-in card with the number in the brand's teal. */
body.buddy .wd-error{ text-align:left; }
body.buddy .wd-error__status{ margin:0 0 4px; font-size:56px; font-weight:800; line-height:1; letter-spacing:-.02em; color:var(--accent-ink, #0E8C80); }
body.buddy .wd-error__go{ margin:18px 0 0; }
body.buddy .wd-error__help{ margin:14px 0 0; font-size:13.5px; color:var(--muted); }
@media (max-width:860px){ body.buddy .side__brand--app .bzw{ width:170px; margin-left:-4px; } }
/* ── END BIZWIZ LOGO ── */

/* Your spreadsheet (Settings, WizDash/architecture/13): the column check and the layout's facts */
body.buddy .layout-match select{ width:100%; min-width:200px; min-height:40px; padding:0 10px; border:1px solid var(--line-strong); border-radius:10px; background:#fff; color:var(--text); font:inherit; font-size:14px; }
body.buddy .layout-match select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(25,208,190,.2); }
body.buddy .layout-match__letter{ display:inline-grid; place-items:center; width:24px; height:24px; margin-right:10px; border-radius:6px; background:var(--surface-2,#EEF3F4); color:var(--muted); font-size:12px; font-weight:700; }
body.buddy .layout-facts{ margin:10px 0 0; padding-left:18px; display:grid; gap:4px; }
body.buddy .steps-list{ margin:0; padding-left:20px; display:grid; gap:8px; line-height:1.5; }
body.buddy .card__body + .card__body.form__actions{ padding-top:0; }
body.buddy .radio{ display:flex; align-items:center; gap:8px; margin:6px 0; }

/* Slips (WizDash/architecture/13 section 3): a thumbnail per row, what the wizard wasn't sure of, the fold-out form */
body.buddy .slips td{ vertical-align:middle; }
body.buddy .slip__photo{ width:56px; }
body.buddy .slip__noslip{ display:inline-block; font-size:10.5px; line-height:1.15; padding:3px 6px; text-align:center; white-space:normal; width:52px; }
body.buddy .slip__photo img{ display:block; width:44px; height:44px; object-fit:cover; border-radius:8px; border:1px solid var(--line); background:#fff; }
body.buddy .slip-check{ background:linear-gradient(transparent 60%, rgba(245,166,35,.35) 60%); border-radius:2px; padding:0 2px; }
body.buddy .slip__edit > td{ background:var(--surface-2,#F6FAFB); padding:14px 16px 18px; }
body.buddy .slip__form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px 14px; }
body.buddy .slip__form .field--wide{ grid-column:1 / -1; }
body.buddy .slip__form .form__actions{ grid-column:1 / -1; }
body.buddy .drop.is-busy{ opacity:.6; pointer-events:none; }
body.buddy .chat__more{ margin-top:10px; font-size:14px; }

/* ── the wizard's hub (WizDash/architecture/16-the-app-rebuild.md, version A, 2026-10-19) ── */
body.buddy .side__wizard{ display:flex; align-items:center; gap:12px; margin:14px 0 0; padding:12px 14px; border-radius:12px; background:var(--accent); color:var(--brand-deep); font-weight:700; text-decoration:none; box-shadow:0 8px 20px rgba(25,208,190,.3); }
body.buddy .side__wizard:hover{ background:#14C2B1; }
body.buddy .topbar, body.buddy .tabbar{ display:none; }

/* the wizard bar */
body.buddy .wizbar{ display:flex; align-items:center; gap:20px 24px; flex-wrap:wrap; background:var(--grad); color:#fff; border-radius:20px; padding:18px 22px; margin-bottom:18px; position:relative; overflow:hidden; }
body.buddy .wizbar::after{ content:""; position:absolute; right:-50px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(25,208,190,.35),transparent 70%); pointer-events:none; }
body.buddy .wizbar__go{ display:flex; align-items:center; gap:16px; flex:1 1 320px; color:#fff; text-decoration:none; position:relative; z-index:1; min-width:0; }
body.buddy .wizbar__mic{ width:58px; height:58px; border-radius:50%; background:var(--accent); color:var(--brand-deep); display:grid; place-items:center; flex:none; box-shadow:0 0 0 7px rgba(25,208,190,.22); }
body.buddy .wizbar__mic svg.i{ width:26px; height:26px; }
body.buddy .wizbar__go b{ display:block; font-size:19px; font-weight:800; }
body.buddy .wizbar__go small{ display:block; color:rgba(255,255,255,.82); font-size:13.5px; margin-top:2px; }
body.buddy .wizbar__quick{ display:flex; gap:10px; flex:1 1 360px; position:relative; z-index:1; }
body.buddy .wizbar__quick a{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 10px; border-radius:12px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); color:#fff; font-weight:700; font-size:13.5px; text-decoration:none; white-space:nowrap; }
body.buddy .wizbar__quick a:hover{ background:rgba(255,255,255,.2); }
/* Spent today (20-slips-on-the-line.md section 7.3): under the wizard bar, only when a slip came in today. */
/* Spells this month, always on Home (Theo 2026-10-26): green above half, orange to a quarter, red below. */
body.buddy .spells-card{ display:grid; gap:8px; margin:0 0 16px; padding:14px 16px; text-decoration:none; color:inherit; }
body.buddy .spells-card:hover{ border-color:var(--accent, #19D0BE); }
body.buddy .spells-card__head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
body.buddy .spells-card__head .num{ font-weight:800; font-size:16px; }
body.buddy .spells-bar{ display:block; height:10px; border-radius:99px; background:var(--surface-3, #EEF1F4); overflow:hidden; }
body.buddy .spells-bar > span{ display:block; height:100%; border-radius:99px; background:var(--ok); transition:width .4s ease; }
body.buddy .spells-bar--warn > span{ background:var(--warn); }
body.buddy .spells-bar--bad > span{ background:var(--bad); }
body.buddy .spells-card__wand{ font-size:14px; color:var(--muted); }
body.buddy .spent-today{ display:grid; gap:6px; margin:0 0 16px; padding:14px 16px; text-decoration:none; color:inherit; }
/* A special as it goes out (doc 23 section 3). */
body.buddy .special-preview{ margin:0; white-space:pre-wrap; word-break:break-word; font:inherit; font-size:14.5px; line-height:1.55; background:var(--surface-3, #F4F6F8); padding:14px 16px; border-radius:12px; }
/* A special on Home, the shop window (doc 23 section 5). */
body.buddy .special-home{ margin:0 0 16px; padding:16px 18px; border-left:4px solid var(--accent, #19D0BE); }
body.buddy .special-home__tag{ margin:0 0 4px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink, #0E8C80); }
body.buddy .special-home h2{ margin:0 0 6px; font-size:17px; }
body.buddy .special-home__body{ margin:0 0 12px; white-space:pre-line; font-size:14.5px; }
body.buddy .special-home__go{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
/* WizDash specials, asked once on Home (doc 23 section 4). */
body.buddy .specials-ask{ margin:0 0 16px; padding:14px 16px; }
body.buddy .specials-ask__in{ display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; }
body.buddy .specials-ask__in p{ margin:0; font-size:14.5px; flex:1 1 280px; }
body.buddy .specials-ask__go{ display:flex; gap:8px; }
body.buddy .spent-today:hover{ border-color:var(--accent, #19D0BE); }
body.buddy .spent-today__head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
body.buddy .spent-today__head .num{ font-weight:800; font-size:17px; }
body.buddy .spent-today__row{ display:flex; justify-content:space-between; gap:12px; font-size:14px; color:var(--muted); }
body.buddy .spent-today__all{ display:inline-flex; align-items:center; gap:4px; font-size:13.5px; font-weight:700; color:var(--accent-ink, #0E8C80); }
body.buddy .spent-today__all svg{ width:14px; height:14px; }
body.buddy .spent-today__vat{ font-size:14px; padding-top:6px; border-top:1px dashed var(--line); }
body.buddy .kindpick--link{ text-decoration:none; color:inherit; }
/* Bought for this job (20-slips-on-the-line.md section 8): under the job's card and messages. */
body.buddy .jobspend{ margin-top:16px; }
/* Quoted and bought (21-slips-version-2.md section 1.1), on a job's page. */
body.buddy .qb{ margin:4px 0 16px; }
body.buddy .qb h3{ margin:0 18px 8px; font-size:15px; }
body.buddy .qb__line{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:2px 0; font-size:14px; }
body.buddy .qb__line .chip{ margin-left:6px; }
body.buddy .qb__move summary{ cursor:pointer; font-size:12.5px; color:var(--accent-ink, #0E8C80); font-weight:700; }
body.buddy .qb__move form{ display:flex; gap:6px; margin-top:4px; }
body.buddy .qb__move select{ min-height:34px; max-width:220px; }
body.buddy .qb__note{ margin:8px 18px 0; font-size:12.5px; }
/* A bank line's slip (21-slips-version-2.md section 3), on Sort this line. */
body.buddy .linslip__row{ display:flex; align-items:center; gap:14px; }
body.buddy .linslip__row + .linslip__row{ border-top:1px solid var(--line); }
body.buddy .linslip__row span{ flex:1; }
body.buddy .linslip__row img{ display:block; width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
/* Bought for this job, not on the card yet (21-slips-version-2.md section 2.1). */
body.buddy .notcard__row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 18px; border-top:1px solid var(--line); }
body.buddy .notcard__row .sub{ display:block; }
body.buddy .notcard__all{ margin:10px 18px 0; }
body.buddy .show-sm{ display:none; }
@media (max-width:560px){ body.buddy .show-sm{ display:block; } }
/* A slip's lines (21-slips-version-2.md section 1.2), in its panel on Money, Slips. */
body.buddy .slip__items{ margin:0 0 12px; max-width:560px; }
body.buddy .slip__items p{ margin:0 0 4px; font-size:12.5px; font-weight:700; letter-spacing:.04em; }
body.buddy .slip__items table{ width:100%; font-size:14px; }
/* VAT back (doc 22 section 2): the slip's answer in its open panel. */
body.buddy .slip__vat{ margin:0 0 12px; max-width:560px; padding:9px 12px; border-radius:10px; border-left:4px solid var(--line); background:#fff; font-size:14px; line-height:1.45; }
body.buddy .slip__vat--claim{ background:var(--ok-soft); border-left-color:var(--ok); }
body.buddy .slip__vat--fix,body.buddy .slip__vat--check{ background:var(--warn-soft); border-left-color:var(--warn); }
body.buddy .slip__vat--cant{ background:var(--bad-soft); border-left-color:var(--bad); }
body.buddy .slip__vat p{ margin:0; }
body.buddy .slip__vat form{ margin-top:8px; }
/* The answer as a label, in the list and in To fix (doc 22 section 4.3). */
body.buddy .chip--vat{ margin-left:6px; vertical-align:1px; white-space:nowrap; }
body.buddy td > .chip--vat:first-child{ margin-left:0; }
body.buddy .chip--vat-claim{ background:var(--ok-soft); color:var(--ok); }
body.buddy .chip--vat-fix,body.buddy .chip--vat-check{ background:var(--warn-soft); color:var(--warn); }
body.buddy .chip--vat-cant{ background:var(--bad-soft); color:var(--bad); }
body.buddy #vat > .dim{ margin:12px 18px 0; }
body.buddy #vat .vat-note,body.buddy #card-no-slip .vat-note{ margin:12px 18px 16px; font-size:13px; }
body.buddy .vat-fix td{ vertical-align:top; }
body.buddy .slip__items td{ padding:3px 0; border-bottom:1px dashed var(--line); }
body.buddy .jobspend__vs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:4px 18px 14px; }
body.buddy .jobspend__vs > span{ display:grid; gap:2px; padding:12px 14px; border-radius:12px; background:var(--accent-soft, #E3F8F5); }
body.buddy .jobspend__vs small{ font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--muted); }
body.buddy .jobspend__vs b{ font-size:18px; }
body.buddy .jobspend__vs em{ font-style:normal; font-size:12.5px; color:var(--muted); }
body.buddy .jobspend__vs--over > span:last-child{ background:color-mix(in srgb, var(--bad, #c0392b) 12%, #fff); }
body.buddy .jobspend__vs--over > span:last-child b{ color:var(--bad, #c0392b); }
body.buddy .jobspend__link{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 18px 16px; font-size:14px; }
body.buddy .jobspend__link select{ flex:1 1 240px; min-height:40px; }
body.buddy .jobspend__empty{ margin:4px 18px 16px; }
@media (max-width:560px){ body.buddy .jobspend__vs{ grid-template-columns:1fr; } }
body.buddy .wizbar__quick svg.i{ width:16px; height:16px; }

/* the hub's two columns: the jobs, then what's waiting and the money */
body.buddy .hub-grid{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:18px; align-items:start; }
body.buddy .hub-side{ display:flex; flex-direction:column; gap:16px; min-width:0; }
body.buddy .card__head h2 .dim{ font-weight:600; }
body.buddy .hub-grid .empty p + p{ margin-top:12px; }

/* jobs on the board */
body.buddy .jobs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
body.buddy .card .jobs{ padding:14px; }
body.buddy .jobcard{ display:flex; flex-direction:column; gap:8px; padding:14px 15px; background:#fff; border:1px solid var(--line); border-radius:14px; color:inherit; text-decoration:none; min-width:0; }
body.buddy .jobcard:hover{ border-color:#C2CFD3; box-shadow:0 6px 18px rgba(14,42,51,.07); }
body.buddy .jobcard__top{ display:flex; align-items:center; gap:8px; min-width:0; }
body.buddy .jobcard__top b{ flex:1; min-width:0; font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.buddy .jobcard__top .badge{ flex:none; }
body.buddy .jobcard__dot{ width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); flex:none; }
body.buddy .jobcard__site{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.buddy .jobcard__site--none{ color:var(--warn); font-weight:600; }
body.buddy .jobcard__site svg.i{ width:15px; height:15px; flex:none; }
body.buddy .jobcard__last{ display:flex; align-items:center; gap:8px; font-size:13px; min-width:0; }
body.buddy .jobcard__who{ width:24px; height:24px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:800; flex:none; }
body.buddy .jobcard__who--site{ background:#7B5EA7; }
body.buddy .jobcard__text{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.buddy .jobcard__text b{ font-weight:600; }
body.buddy .jobcard time{ color:var(--faint); font-size:12px; font-weight:600; flex:none; }

/* money at a glance */
body.buddy .money-strip{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; text-decoration:none; color:inherit; }
body.buddy .money-strip > span{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 13px; min-width:0; }
body.buddy .money-strip:hover > span{ border-color:#C2CFD3; }
body.buddy .money-strip small{ display:block; color:var(--muted); font-size:12px; font-weight:600; }
body.buddy .money-strip b{ display:block; font-size:18px; font-weight:800; margin-top:3px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.buddy .money-strip em{ display:block; font-style:normal; font-size:11.5px; font-weight:700; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.buddy .money-strip .tone-ok{ color:var(--ok); }
body.buddy .money-strip .tone-bad{ color:var(--bad); }
body.buddy .setup-banner--small{ margin:0; padding:12px 16px; gap:12px; }
body.buddy .setup-banner--small .setup-banner__bar{ width:auto; flex:1; }
body.buddy .setup-banner--small .setup-banner__text{ flex:none; }

/* More, and the row of money pages */
body.buddy .more{ margin-bottom:16px; }
body.buddy .more__row{ display:flex; align-items:center; gap:14px; padding:14px 20px; border-top:1px solid var(--line); color:inherit; text-decoration:none; }
body.buddy .more__row:first-child, body.buddy .card__head + .more__row{ border-top:0; }
body.buddy .more__row:hover{ background:var(--surface-2); }
body.buddy .more__row > svg.i{ color:var(--faint); }
body.buddy .more__text{ flex:1; min-width:0; }
body.buddy .more__text b{ display:block; font-weight:600; }
body.buddy .more__text span{ color:var(--muted); font-size:13px; }
body.buddy .tabs--scroll{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; margin-bottom:18px; position:relative; }
body.buddy .tabs--scroll .tab{ white-space:nowrap; }
body.buddy .tab[aria-current="page"]{ background:var(--brand); border-color:var(--brand); color:#fff; }

@media (max-width:1100px){ body.buddy .hub-grid{ grid-template-columns:minmax(0,1fr); } }

/* a phone: a slim bar on top, the bottom bar with the wizard's mic, no side menu */
@media (max-width:860px){
  body.buddy .side{ display:none; }
  body.buddy .topbar{ display:flex; align-items:center; justify-content:space-between; padding:10px var(--pad); background:var(--bg); position:sticky; top:0; z-index:20; }
  body.buddy .topbar__brand{ display:flex; align-items:center; gap:8px; text-decoration:none; }
  body.buddy .topbar__brand > img{ border-radius:9px; }
  body.buddy .topbar__word{ width:78px; height:30px; overflow:hidden; position:relative; display:block; }
  body.buddy .topbar__word img{ position:absolute; right:0; top:0; height:30px; width:auto; max-width:none; }
  body.buddy .topbar .avatar{ text-decoration:none; }
  body.buddy .main{ padding-top:4px; padding-bottom:calc(110px + env(safe-area-inset-bottom)); }
  body.buddy .tabbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:30; height:calc(66px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line); padding:8px 6px env(safe-area-inset-bottom); justify-content:space-around; align-items:flex-start; }
  body.buddy .tabbar__tab, body.buddy .tabbar__wiz{ display:flex; flex-direction:column; align-items:center; gap:4px; width:64px; color:var(--faint); font-size:11px; font-weight:600; text-decoration:none; }
  body.buddy .tabbar__tab svg.i{ width:24px; height:24px; }
  body.buddy .tabbar__tab[aria-current="page"]{ color:var(--brand); }
  body.buddy .tabbar__wiz{ color:var(--brand); gap:2px; }
  body.buddy .tabbar__fab{ width:60px; height:60px; border-radius:50%; background:var(--accent); color:var(--brand-deep); display:grid; place-items:center; margin-top:-26px; box-shadow:0 10px 24px rgba(25,208,190,.45), 0 0 0 6px #fff; }
  body.buddy .tabbar__fab svg.i{ width:28px; height:28px; }
  /* the wizard's composer stays above the bottom bar */
  body.buddy .composer{ bottom:calc(66px + env(safe-area-inset-bottom)); }
  body.buddy .wizbar{ padding:16px; gap:14px; }
  body.buddy .wizbar__quick a{ font-size:12.5px; min-height:42px; }
  body.buddy .jobs{ grid-template-columns:minmax(0,1fr); }
  body.buddy .money-strip b{ font-size:15px; }
}

/* ── a job's page (16-the-app-rebuild.md section 6, version A, phase 2) ── */
body.buddy .page-back{ display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:13px; font-weight:600; text-decoration:none; margin-bottom:6px; }
body.buddy .page-back:hover{ color:var(--text); }
body.buddy .page-back svg.i{ width:16px; height:16px; }
body.buddy .page-head__actions .badge{ align-self:center; }
body.buddy .jobpage{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:18px; align-items:start; }
body.buddy .jobpage__body{ display:contents; }
body.buddy .jobsheet{ grid-column:1; grid-row:1 / span 2; }
body.buddy .jobtalk{ grid-column:2; grid-row:1; }
body.buddy .jobpage__talk{ grid-column:2; grid-row:2; position:sticky; bottom:16px; }
body.buddy .jobpage__talk .composer{ border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 6px 18px rgba(14,42,51,.07); }
body.buddy .jobsheet .jcard{ padding:14px 20px; }
body.buddy .jobsheet .jcard__row{ padding:10px 0; }
body.buddy .jobsheet .jcard__row:first-child{ padding-top:0; }
body.buddy .jobsheet .jcard dd .badge{ margin-left:8px; vertical-align:1px; }
body.buddy .jobsheet .wizcard__unsure{ margin:0 20px 14px; }
body.buddy .jobsheet__none{ padding:0 20px 14px; }
body.buddy .jobsheet__close{ padding:14px 20px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
body.buddy .jobsheet__close .wcard__acts{ display:flex; gap:10px; flex-wrap:wrap; }
body.buddy .jobsheet .wcard__astext{ padding:0 20px 14px; }
body.buddy .jobtalk__list{ padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
body.buddy .jobtalk__list .msg{ max-width:92%; }
/* a blank on the card: an Add button that opens a small form */
body.buddy .jadd > summary{ list-style:none; }
body.buddy .jadd > summary::-webkit-details-marker{ display:none; }
body.buddy .jadd__btn{ display:inline-flex; align-items:center; gap:6px; border:1.5px dashed var(--warn); color:var(--warn); background:var(--warn-soft); border-radius:10px; padding:6px 11px; font-weight:700; font-size:13px; cursor:pointer; }
body.buddy .jadd__btn svg.i{ width:15px; height:15px; }
body.buddy .jadd[open] .jadd__btn{ border-style:solid; }
body.buddy .jadd__form{ display:flex; gap:8px; margin-top:10px; align-items:center; }
body.buddy .jadd__form input:not([type=hidden]){ flex:1; min-width:0; }
body.buddy .jadd__form--stack{ flex-direction:column; align-items:stretch; }
body.buddy .jobsheet__close select, body.buddy .jadd__form select{ width:100%; min-height:42px; padding:0 10px; border:1px solid var(--line-strong); border-radius:10px; background:#fff; color:var(--text); font:inherit; font-size:14px; }
body.buddy .jadd__form input:not([type=hidden]){ min-height:42px; padding:0 12px; border:1px solid var(--line-strong); border-radius:10px; font:inherit; font-size:14px; }
@media (max-width:1100px){
  body.buddy .jobpage{ grid-template-columns:minmax(0,1fr); }
  body.buddy .jobsheet, body.buddy .jobtalk, body.buddy .jobpage__talk{ grid-column:1; grid-row:auto; }
}
@media (max-width:860px){
  body.buddy .jobpage__talk{ bottom:calc(66px + env(safe-area-inset-bottom)); }
  body.buddy .jobpage__talk .composer{ bottom:auto; position:static; }
  body.buddy .page-head__actions{ width:100%; }
}

/* ── the door's magic (Theo, 2026-10-28): the site's last panel behind the sign-in card. The night sky is the fallback
   without scripts or with reduced motion; door-magic.js lays the aurora and the stars over it. Not inside the site's frame. ── */
body.buddy.door:not(.book--embed){ position:relative; isolation:isolate; background:linear-gradient(180deg,#09313F 0%,#051D28 100%) fixed; }
body.buddy.door:not(.book--embed)::before{ content:""; position:fixed; inset:0; z-index:0; opacity:.55; pointer-events:none; transition:opacity 1s ease;
  background-image:radial-gradient(1.4px 1.4px at 9% 18%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 22% 64%,#fff 50%,transparent 52%),
    radial-gradient(1.6px 1.6px at 35% 30%,#8CF5E8 50%,transparent 52%),radial-gradient(1px 1px at 48% 80%,#fff 50%,transparent 52%),
    radial-gradient(1.4px 1.4px at 61% 14%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 72% 56%,#8CF5E8 50%,transparent 52%),
    radial-gradient(1.5px 1.5px at 84% 26%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 93% 72%,#fff 50%,transparent 52%),
    radial-gradient(1.2px 1.2px at 15% 88%,#fff 50%,transparent 52%),radial-gradient(1.2px 1.2px at 78% 90%,#fff 50%,transparent 52%); }
body.buddy.door.is-magic::before{ opacity:0; }
.door-sky,.door-dust{ position:fixed; inset:0; z-index:0; display:block; width:100%; height:100%; pointer-events:none; opacity:0; transition:opacity 1.1s ease; }
.door-sky.is-lit,.door-dust.is-lit{ opacity:1; }
body.buddy.door:not(.book--embed) .door__box{ position:relative; z-index:1; border-color:transparent; box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 0 1px rgba(140,245,232,.12); }

/* The six-digit code reads as a code: big, spaced, centred (Theo, 2026-10-28) */
body.buddy .door__box input[name="code"]{ min-height:60px; padding:10px 12px 10px calc(12px + .4em); font-size:28px; font-weight:700; letter-spacing:.4em;
  text-align:center; font-variant-numeric:tabular-nums; color:var(--brand); }
body.buddy .door__box input[name="code"]::placeholder{ color:var(--line-strong, #C9D6D9); letter-spacing:.4em; }