/* =====================================================================
   suite.css: the owner and staff Suite's surface layout (docs/DESIGN.md 2.1, 3.15, 5.29, 5.34).
   Sidebar, top bar, page grids and the Suite-only components (calendar, revenue chart, chat, the
   Research Lab frame, the pattern and gallery grids, blog art pickers). Tokens only: no color,
   shadow, duration, easing or z-index literals. Shared components (buttons, fields, cards, tables,
   badges, alerts, timeline, photos, ...) come from ls.css and overlays.css and are not redefined here.
   ===================================================================== */

/* ---------- 1. Surface tokens (3.15): the top bar sticks, the sidebar never covers the main column ---------- */
:root { --header-h: var(--topbar-h); --sticky-top: var(--topbar-h); }

/* ---------- 2. Shell ---------- */
body.suite { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100dvh; }
/* Sign-in, setup and reset: no sidebar and no top bar; the card centres in the full width */
body.suite.no-side { grid-template-columns: minmax(0, 1fr); }
body.suite.no-side :is(.side, .side-scrim, .topbar) { display: none; }
.main { display: flex; flex-direction: column; min-width: 0; }
main#app { width: 100%; max-width: var(--container-wide); padding: var(--page-pad) var(--page-pad) var(--space-16); }
main#app:focus { outline: none; }

/* Route skeleton: shown only when a page takes longer than --delay-reveal, so fast loads never flash */
.route-skeleton { animation: ls-fade-in var(--dur-base) var(--ease-out) var(--delay-reveal) both; }

/* ---------- 3. Sidebar (5.29): navy chrome, on-dark scope (tokens.css block F) ---------- */
.side { position: sticky; top: 0; display: flex; flex-direction: column; height: 100dvh; min-height: 0; overflow: hidden;
        background: var(--chrome-bg); color: var(--text); }
.side .brand { display: flex; align-items: center; gap: var(--space-3); flex: none; margin: var(--space-2) var(--space-2) 0;
               padding: var(--space-2) var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--white); text-decoration: none; }
.side .brand img { flex: none; width: 36px; height: 36px; border-radius: var(--radius-sm); }
.side .brand-name { display: block; min-width: 0; font: var(--fw-bold) 1.0625rem/1.15 var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 0; color: var(--white); }
.side .brand small { display: block; margin-top: 3px; font: var(--fw-heavy) var(--fs-overline)/1.2 var(--font-body);
                     letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--mustard); }
.side nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-1) var(--space-2) var(--space-4); }
.side nav .grp { display: flex; align-items: center; gap: var(--space-2); width: 100%; margin: 0; padding: var(--space-4) var(--space-3) var(--space-1);
                 border: 0; border-radius: var(--radius-sm); background: none; color: var(--on-navy-3); text-align: left;
                 font: var(--fw-heavy) var(--fs-overline)/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.side nav button.grp { cursor: pointer; }
.side nav .grp-label { flex: 1; min-width: 0; }
.side nav .grp .icon { --icon-size: 14px; flex: none; transition: transform var(--dur-fast) var(--ease-standard); }
.side nav button.grp[aria-expanded="false"] .icon { transform: rotate(-90deg); }
@media (hover: hover) { .side nav button.grp:hover { color: var(--on-navy-2); } }
.side nav .grp:focus-visible { outline-offset: -3px; }
.side nav .grp-items { padding-top: 2px; }
/* More items above or below the fold: the list fades at that edge (suite.js sets the classes while it can scroll) */
.side nav.has-more-end { -webkit-mask-image: linear-gradient(to bottom, var(--text) calc(100% - 48px), transparent);
                         mask-image: linear-gradient(to bottom, var(--text) calc(100% - 48px), transparent); }
.side nav.has-more-start { -webkit-mask-image: linear-gradient(to bottom, transparent, var(--text) 32px);
                           mask-image: linear-gradient(to bottom, transparent, var(--text) 32px); }
.side nav.has-more-start.has-more-end { -webkit-mask-image: linear-gradient(to bottom, transparent, var(--text) 32px, var(--text) calc(100% - 48px), transparent);
                                        mask-image: linear-gradient(to bottom, transparent, var(--text) 32px, var(--text) calc(100% - 48px), transparent); }
.side nav a { display: flex; align-items: center; gap: var(--space-3); min-height: 36px; margin: 0 0 2px; padding: 0 var(--space-3);
              border-radius: var(--radius-sm); color: var(--on-navy-2); font: var(--fw-semibold) .875rem/1.2 var(--font-body); text-decoration: none;
              transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
@media (pointer: coarse) { .side nav a { min-height: 40px; } }
.side nav a .icon { --icon-size: 18px; flex: none; }
.side nav .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .side nav a:hover { background: var(--on-navy-hover); color: var(--white); } }
.side nav a:focus-visible { outline-offset: -3px; }
.side nav a:is([aria-current="page"], .active) { background: var(--mustard); color: var(--navy); font-weight: var(--fw-bold); }
.side nav a:is([aria-current="page"], .active):focus-visible { outline-color: var(--white); }
/* Counts: the .badge-count look, coral with navy text (4.84:1); navy with white text on the current item */
.side .cnt { display: inline-grid; place-items: center; flex: none; min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px;
             border-radius: var(--radius-pill); background: var(--coral); color: var(--navy);
             font: var(--fw-heavy) .75rem/1 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
.side nav a:is([aria-current="page"], .active) .cnt { background: var(--navy); color: var(--white); }

/* Footer: who is signed in, and the account menu (Security, Theme, Sign out). The menu itself is hosted in
   #ls-layer by ui.js on first open, so it is a light surface (2.4). */
.side-foot { display: flex; align-items: center; gap: var(--space-3); flex: none; padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
             border-top: 1px solid var(--on-navy-line); }
.side-foot .avatar { flex: none; }
.side-foot .who { flex: 1; min-width: 0; font-size: .75rem; line-height: 1.35; color: var(--on-navy-3); }
.side-foot .who strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; color: var(--white); }
.side-foot .who span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot .btn-icon { flex: none; }

/* Off-canvas below 1024px (5.29). ui.js toggles .open, adds the .side-scrim, sets html.has-drawer and makes the page inert. */
.menu-btn { display: none; }
@media (max-width: 1023.98px) {
  body.suite { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: 0; top: 0; bottom: 0; z-index: var(--z-drawer); width: min(var(--sidebar-w), 86vw); height: 100dvh;
          box-shadow: var(--shadow-lg); transform: translateX(-100%); visibility: hidden;
          transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); }
  .side:is(.open, .is-open) { transform: none; visibility: visible; transition: transform var(--dur-slow) var(--ease-out); }
  .menu-btn { display: inline-flex; }
}

/* ---------- 4. Top bar (5.29): breadcrumb left, global search right ---------- */
.topbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-3);
          min-height: var(--topbar-h); padding: 0 var(--page-pad); background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar .crumb { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.topbar .search-field { flex: 0 1 360px; width: min(360px, 100%); margin-left: auto; }
.topbar .search-close, .topbar .search-btn { display: none; }
@media (max-width: 767.98px) {
  .topbar .search-btn { display: inline-flex; margin-left: auto; }
  .topbar .search-field { display: none; }
  .topbar.is-search-open .search-field { position: absolute; inset: 0; z-index: var(--z-raised); display: flex; gap: var(--space-2);
                                         width: auto; margin: 0; padding: 0 var(--page-pad); background: var(--surface); }
  .topbar.is-search-open .search-field input { flex: 1; }
  .topbar.is-search-open .search-close { display: inline-flex; }
  .topbar.is-search-open .search-kbd { display: none; }
}

/* ---------- 5. Page grids ---------- */
/* Main column and a side column (360px from 1440px, 320px below, so a record's line items fit at 1280px); both stack
   when the main column gets narrow (the sidebar takes 248px from 1024px) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-5); align-items: start; }
.split-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1180px) and (max-width: 1439.98px) { .split:not(.split-even) { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 1179.98px) { .split, .split-even { grid-template-columns: minmax(0, 1fr); } }
.form-card { max-width: 820px; }
.form-card-sm { max-width: var(--container-sm); }

/* Page header extras: the dashboard greeting is the one Display heading in admin (3.8) */
.page-head .display { font-size: var(--fs-display); line-height: 1.1; }
.page-head .eyebrow { display: block; margin-bottom: var(--space-1); }
.page-head-actions .month-label { min-width: 9.5em; margin: 0; text-align: center; font: var(--fw-heavy) var(--fs-body)/1.2 var(--font-body); color: var(--text); }
.record-title .avatar { margin-right: var(--space-1); }
/* A record's badges wrap as one group: all on the title line, or all together under it */
.record-badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Sign-in, setup and reset cards in the Suite: admin density, centred card (5.40) */
.suite-auth { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: calc(100dvh - 2 * var(--page-pad)); padding: var(--space-8) 0; }
.suite-auth .auth-card { margin: 0; }
.suite-auth .brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); text-align: center; }
.suite-auth .brand img { width: 56px; height: 56px; border-radius: var(--radius); }
.suite-auth h1 { margin: 0; font-size: var(--fs-page-title); }
.suite-auth .auth-lead { margin: var(--space-1) 0 var(--space-5); color: var(--muted); }

/* Key facts in a grid of small label/value pairs (request details) */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--space-3) var(--space-4); margin: var(--space-4) 0 0; }
.facts > div { min-width: 0; }
.facts dt { margin: 0 0 2px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--muted); }
.facts dd { margin: 0; font-weight: var(--fw-bold); color: var(--text); overflow-wrap: anywhere; }
.facts dd .caption { display: block; font-weight: var(--fw-regular); color: var(--muted); }
/* A long list (repair symptoms) takes the whole row, and its badges wrap instead of running into the next column */
.facts > .fact-wide { grid-column: 1 / -1; }
.facts .fact-badges { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.facts dd .badge { height: auto; min-height: var(--badge-h); max-width: 100%; padding-block: 3px; line-height: 1.3; white-space: normal; }
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Line-item tables (5.15): ticket estimate lines and invoice lines. Compact cells and fixed widths for everything but
   the description, so a whole invoice row (7 columns) fits the card at 1280px beside the 320px side column. When the
   card is narrower than a row needs (phones, and 1180-1279px) each line becomes a small card of labelled fields:
   the container query reads the width of .items-wrap, not the window, because the side column decides it. */
.items-wrap { container: items / inline-size; }
.items-table th { padding-inline: var(--space-2); }
.items-table td { padding: var(--space-1); }
.items-table :is(th, td):first-child { padding-left: var(--space-3); }
.items-table :is(th, td):last-child { padding-right: var(--space-2); }
.items-table .col-kind { width: 118px; }          /* the longest type, "Discount", fits beside the chevron */
.items-table .col-qty { width: 64px; }
.items-table .col-money { width: 96px; }
.items-table .col-tax { width: 44px; text-align: center; }
.items-table .col-kind select { width: 100%; min-width: 0; }
.items-table .col-desc input { width: 100%; min-width: 8rem; }
.items-table .num input { width: 100%; min-width: 0; }
.items-table td.col-total { font-weight: var(--fw-semibold); }
.items-table .cell-note { display: block; margin-top: 2px; font-size: var(--fs-caption); color: var(--faint); text-align: right; }
.items-empty td { padding: var(--space-6) var(--space-4); text-align: center; color: var(--muted); font-size: var(--fs-small); }
@container items (max-width: 599.98px) {
  .items-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .items-table, .items-table tbody { display: block; }
  /* one line = the description (remove sits at its right end); type, quantity and price; then taxable and the line total */
  .items-table tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr);
                          grid-template-areas: "desc desc desc" "kind qty unit" "tax total total"; gap: var(--space-2);
                          padding: var(--space-3); border-bottom: 1px solid var(--border); }
  .items-table tbody tr:not(:has(> .col-tax)) { grid-template-areas: "desc desc desc" "kind qty unit" "total total total"; }
  .items-table tbody tr:last-child { border-bottom: 0; }
  .items-table tbody td:is(.col-kind, .col-desc, .col-qty, .col-unit, .col-tax, .col-total, .col-actions) { display: flex; flex-direction: column; gap: 2px; width: auto; min-width: 0; padding: 0; border: 0; background: none;
                                                                                                            text-align: left; animation: none; }
  .items-table tbody td[data-label]::before { content: attr(data-label); font: var(--fw-bold) var(--fs-caption)/1.3 var(--font-body); color: var(--muted); }
  .items-table td.col-desc { grid-area: desc; }
  .items-table tr:has(> .col-actions :is(button, a)) td.col-desc { padding-right: calc(var(--btn-h-sm) + var(--space-2)); }
  .items-table tbody td.col-actions { position: absolute; top: calc(var(--space-3) + var(--fs-caption) * 1.3 + 2px); right: var(--space-3); display: block; }
  .items-table td.col-kind { grid-area: kind; }
  .items-table td.col-qty { grid-area: qty; }
  .items-table td.col-unit { grid-area: unit; }
  .items-table tbody td.col-tax { grid-area: tax; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: var(--space-2); }
  .items-table tbody td.col-total { grid-area: total; flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--space-3);
                              padding-top: var(--space-1); font-variant-numeric: tabular-nums; }
  .items-table td.col-qty .cell-note { display: none; }   /* the label already says Hours */
  .items-table .cell-note { text-align: left; }
  .items-table tbody tr.items-empty { display: block; padding: 0; }
  .items-table tbody tr.items-empty td { display: block; padding: var(--space-6) var(--space-4); text-align: center; }
}

/* Machine models: the per-row tier select is wide enough to read the longest tier name ("Vintage / Mechanical-only") */
.tbl .col-tier select { min-width: 14.5rem; }
.tbl .col-model { min-width: 9rem; }
.tbl .col-model > span { overflow-wrap: anywhere; }   /* long alias lists break; the phone card's label never does */
.img-ai-log .cell-sub { overflow-wrap: anywhere; }   /* Settings, AI quilt previews, This month: a service's error text has long codes; the table fits its half-width card */

/* Estimate card header on a ticket: title, approval badge and the total, like the summary rows (5.37) */
.est-card-total { font: var(--fw-bold) 1.125rem/1.2 var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 0; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Check lists on a ticket (checklist, customer prep): a check row with a remove button */
.check-list { margin: 0; padding: 0; list-style: none; }
.check-list > li { display: flex; align-items: center; gap: var(--space-2); margin: 0; border-bottom: 1px solid var(--border); }
.check-list > li:last-child { border-bottom: 0; }
.check-list .check { flex: 1; min-width: 0; }
.check-list .check:has(input:checked) > span { color: var(--faint); text-decoration: line-through; }
.add-row { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.add-row input { flex: 1; min-width: 0; }

/* One-time code field that also takes an 11-character backup code (5.40) */
.otp-input.otp-wide { max-width: calc(11ch + 2.4em + 2 * var(--control-px) + 4px); padding-left: calc(var(--control-px) + .2em); letter-spacing: .2em; }
.upper { text-transform: uppercase; }
/* Scrolling boxes for long lists inside a card (campaign deliveries, template previews) */
.scroll-box { max-height: 260px; overflow: auto; }
.clip-box { max-height: 120px; margin: 0; overflow: auto; }
/* A library document opened for reading */
.doc-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--fw-regular) var(--fs-small)/1.6 var(--font-body); color: var(--text); }
/* Chatbot FAQ rows: question, answer, topic, remove */
.faq-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 150px auto; gap: var(--space-3); align-items: start; }
.faq-row > .btn-icon { margin-top: calc(var(--fs-label) * 1.3 + var(--space-2)); }
@media (max-width: 767.98px) { .faq-row { grid-template-columns: minmax(0, 1fr); } .faq-row > .btn-icon { margin-top: 0; justify-self: end; } }
/* A checkbox that sits in a form row next to fields lines up with their controls */
.form-row > .field-check { display: flex; align-items: flex-end; min-height: calc(var(--fs-label) * 1.3 + var(--space-2) + var(--control-h)); }
/* Long forms (Settings): the save button stays in reach at the bottom of the screen */
.savebar { position: sticky; bottom: var(--space-3); z-index: var(--z-raised); grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
           gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
/* On/off settings with a value (5.5): name and description, then the price field and the switch on one row. A small
   column head names the two controls; each control also has its own accessible name. */
.setting-list { margin: var(--space-2) 0 var(--space-5); }
.setting-list-head { display: flex; justify-content: flex-end; gap: var(--space-3); padding-bottom: var(--space-1); border-bottom: 1px solid var(--border);
                     font: var(--fw-bold) var(--fs-caption)/1.3 var(--font-body); color: var(--muted); }
.setting-list-head > span:first-child { flex: 1; }
.setting-list-head .c-price { width: 128px; }
.setting-list-head .c-switch { width: 52px; text-align: right; }
.setting-row-field { flex-wrap: wrap; align-items: center; }
.setting-row-field .setting-text { flex: 1 1 12rem; }
.setting-control { display: flex; flex: none; align-items: center; gap: var(--space-3); margin-left: auto; }
.setting-control .input-money { width: 128px; }
.setting-control .switch-slot { display: flex; justify-content: flex-end; width: 52px; }
/* Booking days and time slots (Settings): day toggles, removable time chips, a time field and Add */
.slot-chips { margin: var(--space-2) 0 var(--space-3); }
.slot-chips:empty { display: none; }
.slot-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.slot-add input[type="time"] { width: 10rem; }

/* Scroll edge fades: the tab bars' fade lives in ls.css (13) and ui.js; the sidebar list's is above (suite.js edgeFade). */

/* Seven dashboard tiles: from 768px the four work counts share the first row and the two amounts and Customers the
   second (twelve columns, so both rows fill the width and an amount like "$12,340.00" keeps its full size); on phones
   two columns, with Customers across the last row. Seven in one row left each tile under 150px, too narrow for money. */
.kpis.kpis-7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis.kpis-7 > .kpi:last-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .kpis.kpis-7 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .kpis.kpis-7 > .kpi { grid-column: span 3; }
  .kpis.kpis-7 > .kpi:nth-child(n+5) { grid-column: span 4; }
}

/* ---------- 6. Calendar (5.34): month grid, event chips, agenda below 768px ---------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; overflow: hidden;
       background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--card-shadow); }
.cal .dh { padding: var(--space-2) var(--space-1); background: var(--surface-2); color: var(--muted); text-align: center;
           font: var(--fw-heavy) var(--fs-overline)/1.2 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.cal .day { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; min-height: 104px; padding: var(--space-1); background: var(--surface); cursor: pointer; }
@media (max-width: 1023.98px) { .cal .day { min-height: 88px; } }
.cal .day.other { background: var(--surface-2); }
.cal .day.today { box-shadow: inset 0 0 0 2px var(--accent-strong); }
.day-num { align-self: flex-start; display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin: 0; padding: 0 var(--space-1);
           border: 0; border-radius: var(--radius-pill); background: none; color: var(--muted); cursor: pointer;
           font: var(--fw-heavy) .75rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.cal .day.other .day-num { color: var(--faint); }
.cal .day.today .day-num { background: var(--accent-strong); color: var(--accent-contrast); }
@media (hover: hover) { .day-num:hover { background: var(--surface-3); color: var(--text); } }
/* Event chips: 24px tall buttons, the tone's tint and ink (the .st-* and channel classes set the colors) */
:where(.ap) { background: var(--surface-2); color: var(--muted); }
.ap { display: block; width: 100%; min-height: 24px; margin: 0; padding: 0 6px; border: 0; border-radius: var(--radius-xs);
      font: var(--fw-bold) .75rem/24px var(--font-body); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ap .icon { --icon-size: 12px; margin-right: 3px; vertical-align: -1px; }
.ap:focus-visible { outline-offset: -2px; outline-width: 2px; }
.ap:is(.st-cancelled, .st-no_show) { text-decoration: line-through; }
.ap-more { align-self: flex-start; min-height: 24px; font-size: .75rem; font-weight: var(--fw-bold); }
/* Marketing channels use tones, not other companies' colors (4.2, 5.34) */
.ap.mk-email     { background: var(--teal-soft);    color: var(--teal-ink); }
/* v1.29.4: work in progress on the shop calendar */
.ap.job-repair   { background: var(--navy-soft);    color: var(--navy-ink); }
.ap.job-quilt    { background: var(--mustard-soft); color: var(--mustard-ink); }
.ap.job-done     { background: var(--green-soft);   color: var(--green-ink); }
.ap.job-meet     { background: var(--teal-soft);    color: var(--teal-ink); font-weight: var(--fw-bold); }   /* v1.32: coordinated drop-off meetings */
.wip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: var(--space-2) var(--space-6); }
.wip-grid h3 { margin-top: 0; }
.ap.mk-facebook  { background: var(--navy-soft);    color: var(--navy-ink); }
.ap.mk-instagram { background: var(--coral-soft);   color: var(--coral-ink); }
.ap.mk-blog      { background: var(--mustard-soft); color: var(--mustard-ink); }
.ap.mk-promo     { background: var(--green-soft);   color: var(--green-ink); }
.ap.mk-note      { background: var(--surface-3);    color: var(--muted); }
.ap.is-draft { outline: 1px dashed currentColor; outline-offset: -1px; }
.ap.is-failed { box-shadow: inset 0 0 0 2px var(--danger); }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); padding: 0; list-style: none;
              font-size: var(--fs-caption); color: var(--muted); }
.cal-legend li { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.cal-legend .ap { display: inline-block; width: auto; min-height: 20px; line-height: 20px; cursor: default; }
.cal-legend .icon { --icon-size: 14px; }
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.cal-bar .cal-legend { margin: 0; }
/* View switch: month or agenda. The page picks agenda below 768px; the choice can be changed either way. */
.cal-wrap[data-view="month"] .agenda, .cal-wrap[data-view="agenda"] .cal { display: none; }
.agenda { display: grid; gap: var(--space-3); }
.agenda-day { padding: 0; }
.agenda-day > h3 { margin: 0; padding: var(--space-3) var(--card-pad) var(--space-2); font-size: var(--fs-small); border-bottom: 1px solid var(--border); }
.agenda-day.is-today > h3 { color: var(--teal-ink); }
.agenda-day .list { padding: 0 var(--card-pad); }
button.list-row { width: 100%; margin: 0; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; text-align: left; cursor: pointer; }
.list > li:last-child > button.list-row { border-bottom: 0; }
@media (hover: hover) { button.list-row:hover .list-title { color: var(--link); } }
button.list-row:focus-visible { outline-offset: -3px; }
.agenda .empty { padding: var(--space-6) var(--space-4); }

/* ---------- 7. Revenue chart (5.34): twelve month slots always, bar heights through --value, 12px labels ---------- */
.chart-scroll { overflow-x: auto; margin: 0 calc(var(--space-1) * -1); padding: 0 var(--space-1); }
.rev { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2); height: 180px; min-width: calc(12 * 34px); margin: 0;
       padding: var(--space-6) 0 var(--space-6); list-style: none; border-bottom: 1px solid var(--chart-grid); }
.rev li { position: relative; flex: 1 1 0; min-width: 26px; max-width: 40px; height: var(--value, 2%); min-height: 2px; margin: 0;
          border-radius: var(--radius-xs) var(--radius-xs) 0 0; background: var(--chart-2); }
.rev li.is-empty { background: var(--chart-grid); }
.rev li.is-current span { font-weight: var(--fw-bold); color: var(--text); }
.rev li b, .rev li span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .75rem; line-height: 1; font-variant-numeric: tabular-nums; }
.rev li b { bottom: calc(100% + var(--space-1)); font-weight: var(--fw-bold); color: var(--muted); }
.rev li span { top: calc(100% + var(--space-2)); color: var(--chart-label); }

/* ---------- 8. Chat: Ask the shop and message threads (bubbles are .msg in ls.css) ---------- */
.chat { display: flex; flex-direction: column; min-height: 420px; height: calc(100dvh - var(--topbar-h) - 220px); padding: 0; overflow: hidden; }
.chat.is-thread { height: auto; min-height: 320px; }
.chat .log { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--space-3); min-height: 0; overflow: auto; padding: var(--space-4); }
.chat.is-thread .log { max-height: calc(100dvh - var(--topbar-h) - 300px); min-height: 200px; }
.chat .msg { margin: 0; }
.msg .src { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px dashed var(--border); font-size: var(--fs-caption); color: var(--faint); white-space: normal; }
.msg .src .chip { margin: 2px 4px 2px 0; min-height: 22px; font-size: .75rem; }
.msg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: var(--space-2); white-space: normal; }
.msg-foot .caption { margin-right: auto; color: var(--faint); }
.msg .btn-icon[aria-pressed="true"] { --btn-bg: var(--selected-bg); --btn-fg: var(--selected); }
.msg-working { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); white-space: normal; }
.chat-composer { display: flex; align-items: flex-end; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); background: var(--surface); }
.chat-composer :is(input, textarea) { flex: 1; min-width: 0; }
.chat-composer textarea { min-height: var(--control-h); max-height: 40vh; }

/* ---------- 9. Research Lab frame (5.29): the embedded Lab fills the rest of the screen, so only the Lab scrolls ---------- */
main#app:has(> .frame) { display: flex; flex-direction: column; min-height: calc(100dvh - var(--topbar-h)); padding-bottom: var(--page-pad); }
main#app:has(> .frame) > .page-head { margin-bottom: var(--space-4); }
.frame { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 520px; overflow: hidden; background: var(--surface); border: 1px solid var(--border);
         border-radius: var(--radius); box-shadow: var(--card-shadow); }
.frame-head { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
              border-bottom: 1px solid var(--border); background: var(--surface-2); }
.frame-title { flex: 1; min-width: 0; margin: 0; font: var(--fw-heavy) var(--fs-small)/1.2 var(--font-body); color: var(--text); }
.engine-frame { display: block; flex: 1 1 auto; width: 100%; height: auto; min-height: 520px; border: 0; background: var(--bg); }

/* ---------- 10. Pattern library and website gallery grids ---------- */
.patterns { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(184px, 100%), 1fr)); gap: var(--space-3); scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
@media (max-width: 479.98px) { .patterns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } }
.pat { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; overflow: hidden; color: var(--text);
       background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--card-shadow);
       transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
/* Pattern line art sits on white even in the dark theme (4.7) */
.pat > img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--white); }
.pat .b { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); padding: var(--space-3); font-size: var(--fs-small); }
.pat .b > strong { overflow-wrap: anywhere; }
.pat .pat-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-2); }
/* One action row: the ownership badge (or "I own it") on the left, the design's More menu on the right (5.23) */
.pat .pat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.pat .pat-actions > [popovertarget] { margin-left: auto; }
/* Pattern grid pages (5.30): 48 designs a page */
button.page-btn { border: 0; background: none; cursor: pointer; }   /* (0,1,1): the current page and hover rules in ls.css still win */
.pagination .page-btn .icon { --icon-size: 16px; }
.pat.sel { border-color: var(--selected); background: var(--selected-bg); box-shadow: inset 0 0 0 1px var(--selected), var(--card-shadow); }
.pat-select { position: absolute; top: var(--space-2); left: var(--space-2); z-index: var(--z-raised); display: grid; place-items: center;
              width: 32px; height: 32px; margin: 0; border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; }
.pat-select:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.warn-text { color: var(--attention-ink); font-weight: var(--fw-bold); }
/* Website gallery: photos, so they fill the frame */
.gal-tile > img { aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
.gal-tile .b { gap: var(--space-2); }
.gal-tile .setting-row { padding: var(--space-1) 0; border: 0; }
.gal-tile .setting-title { font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.gal-tile.is-dragging { opacity: .55; }
.gal-tile[draggable="true"] { cursor: grab; }
/* Gallery albums (v1.43): the album list on Marketing -> Website gallery */
.gal-album > img, .gal-album-empty { flex: none; width: 56px; height: 42px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-2); }
.gal-album-empty { display: inline-grid; place-items: center; color: var(--muted); }
.gal-tile select { width: 100%; }

/* Blog header art pickers: radio buttons in a roving radiogroup */
.artgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--space-2); }
.artgrid.small { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.art-opt { position: relative; display: block; width: 100%; margin: 0; padding: 0; overflow: hidden; border: 2px solid var(--border);
           border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-standard); }
.art-opt img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.art-opt.is-logo img { object-fit: contain; background: var(--white); }
@media (hover: hover) { .art-opt:hover { border-color: var(--border-hover); } }
.art-opt[aria-checked="true"] { border-color: var(--selected); box-shadow: 0 0 0 2px var(--selected-bg); }
.art-opt[aria-checked="true"]::after { content: ""; position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%;
                                       background: var(--selected) var(--icon-check) center / 12px no-repeat; box-shadow: 0 0 0 2px var(--surface); }
.cover-preview { display: block; width: 100%; margin-bottom: var(--space-3); border-radius: var(--radius-sm); }
/* The chosen piece as one preview tile with its name and a Change button; the full grid opens in a dialog */
.art-pick { display: flex; align-items: center; gap: var(--space-3); }
.art-pick + .art-pick { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.art-preview { flex: none; width: 136px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.art-preview img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.art-preview.is-logo img { object-fit: contain; background: var(--white); }
.art-preview.is-empty { display: grid; place-items: center; aspect-ratio: 16 / 9; color: var(--faint); }
.art-pick-text { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; }
.art-pick-text .label { margin: 0; }
.art-pick-name { margin: 0; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--text); overflow-wrap: anywhere; }
.art-pick-text .btn { margin-top: var(--space-1); }
.modal .artgrid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--space-3); }
.modal .artgrid.small { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }

/* Markdown toolbar above the blog body */
.md-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); }
.md-bar .caption { margin-left: var(--space-2); color: var(--muted); }

/* Community moderation: board settings fold away under the queue; the summary says how the board is set */
.board-settings > summary { flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding-block: var(--space-2); }
.board-settings > summary .caption { margin-left: auto; font-weight: var(--fw-regular); }
.board-settings .setting-row:has(> .btn) { flex-wrap: wrap; align-items: center; }
.board-settings .setting-row:has(> .btn) > .setting-text { flex: 1 1 16rem; }
.board-settings .setting-row > .btn { flex: none; margin-left: auto; }

/* ---------- 11. Social feed cards ---------- */
.feed-card { padding: 0; overflow: hidden; }
.feed-card > a > img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-2); }
.feed-card .feed-body { padding: var(--space-3) var(--space-4); }
.feed-stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--fs-small); color: var(--muted); }
.feed-stats span { display: inline-flex; align-items: center; gap: var(--space-1); }
.feed-stats .icon { --icon-size: 16px; }

/* ---------- 12. Print window (work order, customer history, invoice): loaded with tokens, controls and ls.css ---------- */
/* Work orders, customer history and backup codes follow the invoice's paper look (.invoice-doc in ls.css): navy
   display headings, small caps section labels, and tables with rules between rows instead of a full grid. */
.print-doc { margin: 0; padding: var(--space-6); background: var(--white); color: var(--text); font-size: .9375rem; line-height: 1.5; }
.print-doc h2 { margin-bottom: var(--space-2); color: var(--navy); font-variation-settings: "SOFT" 0, "WONK" 0; }
.print-doc h4 { margin: var(--space-5) 0 var(--space-2); font: var(--fw-heavy) var(--fs-overline)/1.4 var(--font-body); letter-spacing: var(--ls-caps);
                text-transform: uppercase; color: var(--muted); }
.print-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 3px solid var(--navy); }
.print-head img { width: 48px; height: 48px; border-radius: var(--radius-sm); }
.print-head strong { display: block; font: var(--fw-bold) 1.25rem/1.2 var(--font-display); color: var(--navy); }
.print-head span { font-size: var(--fs-small); color: var(--muted); }
.print-list { margin: 0; padding-left: 0; list-style: none; }
.print-list > li { padding: 3px 0; }
.print-doc .print-table { font: var(--fw-regular) .9375rem/1.45 var(--font-body); font-variant-numeric: tabular-nums; }
.print-doc .print-table :is(th, td) { padding: 9px 6px; border: 0; border-bottom: 1px solid var(--border); }
.print-doc .print-table th { padding-block: var(--space-2); border-bottom-color: var(--border-strong); background: none;
                             font: var(--fw-bold) .75rem/1.2 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); }
.print-doc .print-table .num { white-space: nowrap; }
/* Check lists on paper: an empty box, or a filled box with a tick (printed even with background graphics off) */
.print-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px var(--space-5); margin: 0; padding: 0; list-style: none; }
.print-check { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: 3px 0; list-style: none; }
.print-check::before { content: ""; flex: none; width: 13px; height: 13px; margin-top: .3em; border: 1.5px solid var(--text); border-radius: 2px;
                       -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.print-check.is-done::before { background: var(--text) var(--icon-check) center / 10px no-repeat; }
.print-note { margin: var(--space-2) 0 0; }
/* Blank lines to write on when a field is still empty */
.print-rule { height: 1.9em; border-bottom: 1px solid var(--border-strong); }
.inv-logo { width: 64px; height: auto; border-radius: var(--radius-sm); }
.inv-title { font: var(--fw-bold) 1.6rem/1.1 var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 0; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.inv-label { font: var(--fw-heavy) var(--fs-overline)/1.4 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); }
.inv-parties { align-items: flex-start; margin-bottom: var(--space-4); }
.inv-thanks { text-align: center; color: var(--navy); }

/* ---------- 13. Quilt previews on a longarm request (5.31, 5.32): saved previews, the staff preview maker, the pattern picker ---------- */
/* Saved previews: the 4:3 thumbnail (quilt-preview.css) with its pattern and age on two lines under it */
.qp-thumbs > li { display: grid; align-content: start; gap: var(--space-1); min-width: 0; margin: 0; }
.qp-cap { display: grid; min-width: 0; }
.qp-studio .studio-stage > .qp-list { margin-top: var(--space-4); }
/* The card sits in the request's main column, after Photos. In that column the maker stacks its stage over the controls
   (quilt-preview.css: the studio's parent is a size container from 1024px, 5.32); on a phone the "Make a preview"
   button goes under the title instead of squeezing it */
@media (max-width: 479.98px) {
  .qp-card > .card-head { flex-wrap: wrap; }
  .qp-card > .card-head > .card-head-actions { width: 100%; }
}
/* The maker's controls: request photos as 4:3 radio tiles; the pattern chip with Change under the name at every width
   (the admin panel is 320px or half a column, so beside the name it left the name a few characters); the thread tiers
   sharing the width; width and length steppers with their own labels, wrapping as a pair; the row height slider beside
   its exact number (stacked on phones) */
.qp-photos .art-opt img { aspect-ratio: 4 / 3; }
.qp-pat-text { display: grid; gap: 2px; min-width: 0; }
.qp-pat-text .meta { flex-wrap: wrap; }
.qp-card .pattern-chip:not(.is-empty) { grid-template-columns: 56px minmax(0, 1fr); align-items: start; }
.qp-card .pattern-chip:not(.is-empty) > img { grid-row: span 2; }
.qp-card .pattern-chip:not(.is-empty) > .btn { grid-column: 2; justify-self: start; }
.qp-card .segmented-block span { padding-inline: var(--space-2); }
.qp-card .qp-size { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.qp-card .qp-size > .field { margin: 0; }
.qp-card .qp-size .stepper input { width: 5ch; }
.qp-row { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; align-items: end; gap: var(--space-3); }
.qp-row > .field { margin: 0; }
.qp-row input[type="range"] { width: 100%; min-width: 0; }
/* Phones: tighter sections so the three thread tiers fit side by side (each as wide as its word), and the drop zone
   without its decorative "Choose photo" pill (the whole zone is the button; the pill is aria-hidden, 5.7) */
@media (max-width: 479.98px) {
  .qp-row { grid-template-columns: minmax(0, 1fr); }
  .qp-row > .field { max-width: 8rem; }
  .qp-card .studio-section { padding: var(--space-4); }
  .qp-card .segmented-block > label { flex: 1 1 auto; }
  .qp-card .segmented-block span { padding-inline: var(--space-1); }
  .qp-card .dropzone-sm > .btn { display: none; }
}
/* On phones the Suite keeps the action bar at the end of the panel, in the page's flow: stuck to the screen it covered a
   third of it (quilt-preview.css fixes it to the bottom for the portal's task flow) */
@media (max-width: 767.98px) {
  .qp-card .studio-actions { position: static; box-shadow: none; border-radius: 0 0 var(--radius) var(--radius); padding-bottom: var(--space-4); }
}
/* Pattern cards as radios in the maker's picker (5.19): the chosen look and its check badge */
button.pat { width: 100%; padding: 0; text-align: start; cursor: pointer; }
@media (hover: hover) { button.pat:is(:hover, .is-hover):not([aria-checked="true"]) { border-color: var(--border-hover); } }
.pat[aria-checked="true"] { border-color: var(--selected); background: var(--selected-bg); box-shadow: inset 0 0 0 1px var(--selected), var(--card-shadow); }
.pat[aria-checked="true"]::after { content: ""; position: absolute; top: var(--space-2); right: var(--space-2); width: 22px; height: 22px; border-radius: 50%;
                                   background: var(--selected) var(--icon-check) center / 13px no-repeat; box-shadow: 0 0 0 2px var(--surface); }
/* The owner's setup steps (Settings, AI quilt previews): click paths with a chevron icon between the steps */
.img-steps > li + li { margin-top: var(--space-1); }
.path-sep .icon { margin-inline: 2px; color: var(--muted); }

/* ---------- 14. Studio renders on a longarm request (v1.31): sets of 3 AI pictures to rate, note and send one ---------- */
.sr-card #srBody { display: grid; gap: var(--space-6); }
.sr-set { display: grid; gap: var(--space-3); min-width: 0; }
.sr-set + .sr-set { padding-top: var(--space-5); border-top: 1px solid var(--border); }
.sr-set-head { display: grid; gap: var(--space-1); min-width: 0; }
.sr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.sr-tile { display: grid; align-content: start; gap: var(--space-2); min-width: 0; }
.sr-tile.is-sent .lsqp-thumb { border-color: var(--mustard); box-shadow: 0 0 0 2px var(--mustard); }
.sr-rate { flex-wrap: nowrap; }
.sr-rate [data-sr-rate][aria-pressed="true"] { background: var(--navy-soft); color: var(--navy-ink); }
.sr-rate [data-sr-rate="bad"][aria-pressed="true"] { background: var(--red-soft); color: var(--red-ink); }
.sr-note { min-height: 0; }
.sr-guide-btn { justify-self: start; }
.sr-wait { cursor: default; }
.sr-wait .skeleton { display: block; width: 100%; height: 100%; }
.sr-err { margin: 0; }
.sr-send-img { display: block; width: 100%; max-width: 320px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.sr-guide { margin: 0; padding-left: 1.4em; display: grid; gap: var(--space-1); }
.sr-lessons { display: grid; gap: var(--space-3); }
.sr-lessons > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); }
.sr-lesson-text { min-width: 0; }
.sr-lesson-icon { display: inline-flex; padding-top: 2px; color: var(--muted); }
.sr-lesson-icon.is-good { color: var(--green-ink); }
.sr-lesson-icon.is-bad { color: var(--red-ink); }
@media (max-width: 599.98px) {
  .sr-grid { grid-template-columns: minmax(0, 1fr); }
  .sr-lessons > li { grid-template-columns: auto minmax(0, 1fr); }
  .sr-lessons > li > .btn { grid-column: 2; justify-self: start; }
}

/* ---------- 15. Coordinated drop-offs and how customers pay (v1.32) ---------- */
.meet-box { padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.meet-slot { padding: var(--space-2) 0; }
.meet-box p.row { flex-wrap: nowrap; align-items: flex-start; }
.meet-box p.row > .icon { flex: none; margin-top: 3px; }
.meet-box .row > span { min-width: 0; overflow-wrap: anywhere; }
.pay-how { padding-top: var(--space-3); border-top: 1px solid var(--border); }

/* v1.38 Coupons page: the customer picker in "Give a coupon" */
.cp-pick { max-height: 240px; overflow-y: auto; margin-bottom: 0; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius); }
.cp-pick > li { padding: var(--space-1) 0; }
.cp-who { border: 0; padding: 0; min-width: 0; }
.cp-who > legend { padding: 0; margin-bottom: var(--space-2); font-weight: var(--fw-heavy); }
.cp-acts { flex-wrap: nowrap; justify-content: flex-end; }

/* ---------- v1.40 Reports (reports.js): share bars beside numbers, the period form, the requests summary ---------- */
.rpt-range { align-items: flex-end; gap: var(--space-3); }
.rpt-range .field input { min-width: 0; }
.rpt-bar { display: block; width: 100%; min-width: 64px; height: 8px; border-radius: var(--radius-pill); background: var(--chart-grid); overflow: hidden; }
.rpt-bar > span { display: block; height: 100%; width: var(--value, 0%); border-radius: inherit; background: var(--chart-1); }
.rpt-bar.is-teal > span { background: var(--chart-2); }
.rpt-bar.is-minus > span { background: var(--chart-4); }
.tbl .col-bar { width: 28%; }
.rpt-rev { min-width: 100%; }
.rpt-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--space-3); margin: 0; }
.rpt-dl > div { margin: 0; }
.rpt-dl dt { font: var(--fw-heavy) var(--fs-overline)/1.2 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); }
.rpt-dl dd { margin: var(--space-1) 0 0; font: var(--fw-bold) 1.375rem/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.rpt-dl dd .cell-sub { display: block; margin-top: var(--space-1); font: var(--fs-caption)/1.3 var(--font-body); color: var(--faint); }
/* v1.48 New ticket price builder: the labor hours box beside its quick picks */
.pb-hours { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pb-hours > input { width: 7rem; flex: none; }