/* Readable text (P23.4): nothing under 13 px; sizes follow the browser's own zoom. */
/* The APXBI palette (P23.3, D147): every colour of the look in one place, the provider's own theme (no
   colour choices for clients, v136). Change a colour here and every screen follows; the dark theme is the
   inverted light page (html[data-theme="dark"] below), so it follows too. Chart and status colours are the
   --viz-* / --status-* tokens further down. */
:root{
  --apx-surface:#ffffff;
  --apx-surface-2:#f8fafc;
  --apx-surface-3:#f2f4f7;
  --apx-page:#f5f7fb;
  --apx-border:#e5e7eb;
  --apx-border-strong:#d0d5dd;
  --apx-border-faint:#eef1f5;
  --apx-ink:#111827;
  --apx-ink-soft:#1f2937;
  --apx-ink-2:#344054;
  --apx-ink-3:#475467;
  --apx-muted:#667085;
  --apx-muted-2:#98a2b3;
  --apx-slate:#56626d;
  --apx-brand:#2563eb;
  --apx-brand-strong:#1d4ed8;
  --apx-brand-deep:#1e3a8a;
  --apx-brand-soft:#eff4ff;
  --apx-brand-wash:#dbeafe;
  --apx-brand-line:#b2ddff;
  --apx-brand-mid:#84adff;
  --apx-brand-pale:#d1e0ff;
  --apx-brand-light:#93c5fd;
  --apx-brand-tint:#bfd0ff;
  --apx-chart-blue:#2a78d6;
  --apx-good:#067647;
  --apx-good-bright:#12b76a;
  --apx-good-soft:#ecfdf3;
  --apx-good-line:#abefc6;
  --apx-warn:#b54708;
  --apx-warn-bright:#f59e0b;
  --apx-warn-soft:#fffaeb;
  --apx-warn-pale:#fef3c7;
  --apx-warn-line:#fedf89;
  --apx-warn-deep:#78350f;
  --apx-warn-dark:#93370d;
  --apx-bad:#b42318;
  --apx-bad-bright:#d92d20;
  --apx-bad-soft:#fef3f2;
  --apx-bad-line:#fecdca;
  --apx-bad-deep:#912018;
  --apx-info:#175cd3;
  --apx-info-soft:#eff8ff;
  --apx-violet:#7a5af8;
  --apx-violet-soft:#f4f3ff;
  --apx-pink:#c11574;
  --apx-pink-soft:#fdf2fa;
  --apx-teal-soft:#f0fdf9;
  --apx-teal-line:#99f6e0;
  --apx-orange:#dc6803;
  --apx-dark-bg:#1b1d22;
  --apx-night:#0a1730;
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  min-height:100%;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background:var(--apx-page);
  color:var(--apx-ink-soft);
}

body{
  overflow-x:hidden;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  cursor:pointer;
}

.shell{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width:250px;
  background:var(--apx-night);
  color:var(--apx-border);
  position:fixed;
  inset:0 auto 0 0;
  z-index:20;
  display:flex;
  flex-direction:column;
}

.brand{
  padding:18px 16px 16px 18px;
  border-bottom:1px solid #1c2b47;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.brand-text{
  min-width:0;
}

/* The hide-sidebar button while it sits inside the dark sidebar (v21). */
.sidebar-slot .btn.icon-only{
  background:transparent;
  border-color:var(--apx-ink-2);
  color:var(--apx-border);
}

.sidebar-slot .btn.icon-only:hover{
  background:var(--apx-ink-soft);
}

.topbar-slot:empty{
  display:none;
}

.brand strong{
  font-size:17px;
  display:block;
}

/* The APXBI logo (v48): the wordmark on the sidebar's navy, the business name under it. */
.brand-logo{
  display:block;
  width:150px;
  height:auto;
  margin:0 0 4px -4px;
  /* The artwork's own darker patch behind the letters blends into the navy. */
  mix-blend-mode:lighten;
}

.brand span{
  font-size:13px;
  color:var(--apx-muted-2);
}

.nav{
  padding:14px 10px;
  overflow:auto;
}

.nav a,
.nav button{
  width:100%;
  border:0;
  background:transparent;
  color:var(--apx-border-strong);
  text-align:left;
  padding:11px 12px;
  border-radius:9px;
  margin:2px 0;
  display:flex;
  gap:10px;
  align-items:center;
}

.nav a:hover,
.nav a.active,
.nav button:hover,
.nav button.active{
  background:var(--apx-ink-soft);
  color:var(--apx-surface);
}

.nav .section{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--apx-muted-2); /* v88: readable on the navy sidebar (was var(--apx-muted), too faint) */
  padding:14px 12px 6px;
}

.main{
  margin-left:250px;
  width:calc(100% - 250px);
  min-width:0;
}

.topbar{
  height:72px;
  background:var(--apx-surface);
  border-bottom:1px solid var(--apx-border);
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 28px;
  position:sticky;
  top:0;
  z-index:10;
}

.topbar h1{
  font-size:20px;
  margin:0;
}

.topbar p{
  font-size:13px;
  color:var(--apx-muted);
  margin:2px 0 0;
}

.headcopy{
  flex:1;
}

.global{
  width:min(380px,35vw);
  padding:10px 12px;
  border:1px solid var(--apx-border-strong);
  border-radius:9px;
}

.content{
  padding:26px;
  max-width:1600px;
  margin:auto;
}

.grid{
  display:grid;
  gap:16px;
}

.kpis{
  grid-template-columns:
    repeat(
      5,
      minmax(0,1fr)
    );
}

.card,
.panel{
  background:var(--apx-surface);
  border:1px solid var(--apx-border);
  border-radius:13px;
  box-shadow:
    0 2px 8px
    rgba(16,24,40,.035);
}

.card{
  padding:18px;
}

.kpi-label{
  font-size:13px;
  color:var(--apx-muted);
}

.kpi-value{
  font-size:25px;
  font-weight:700;
  margin-top:6px;
}

.kpi-note{
  font-size:13px;
  color:var(--apx-muted);
  margin-top:4px;
}

.panel{
  padding:20px;
  margin-top:16px;
}

.panel h2{
  font-size:16px;
  margin:0 0 5px;
}

.muted{
  color:var(--apx-muted);
  font-size:13px;
}

.toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.toolbar-left{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.search{
  min-width:250px;
}

.input,
.select,
.search,
.textarea{
  width:100%;
  padding:9px 10px;
  border:1px solid var(--apx-border-strong);
  border-radius:8px;
  background:var(--apx-surface);
}

.btn{
  border:1px solid var(--apx-border-strong);
  background:var(--apx-surface);
  padding:9px 12px;
  border-radius:8px;
  color:var(--apx-ink-2);
}

.btn:hover{
  background:var(--apx-surface-2);
}

.primary{
  background:var(--apx-brand);
  color:var(--apx-surface);
  border-color:var(--apx-brand);
}

.danger{
  color:var(--apx-bad);
  border-color:#f2b8b5;
}

.small{
  padding:7px 9px;
  font-size:13px;
}

.table-wrap{
  overflow:auto;
  border:1px solid var(--apx-border);
  border-radius:10px;
}

table{
  width:100%;
  border-collapse:collapse;
  min-width:900px;
}

th,
td{
  padding:11px 12px;
  border-bottom:1px solid var(--apx-border-faint);
  text-align:left;
  font-size:13px;
  white-space:nowrap;
}

th{
  background:var(--apx-surface-2);
  color:var(--apx-ink-3);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

tr:last-child td{
  border-bottom:0;
}

.icon-btn{
  width:31px;
  height:31px;
  padding:0;
  border:1px solid var(--apx-border-strong);
  background:var(--apx-surface);
  border-radius:7px;
  position:relative;
}

.icon-btn:hover{
  background:var(--apx-surface-3);
}

.icon-btn[data-tip]:hover:after{
  content:attr(data-tip);
  position:absolute;
  z-index:50;
  left:50%;
  top:-34px;
  transform:
    translateX(-50%);
  background:var(--apx-ink);
  color:var(--apx-surface);
  font-size:13px;
  padding:5px 7px;
  border-radius:5px;
  white-space:nowrap;
}

.actions{
  display:flex;
  gap:6px;
}

.pill{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  font-size:13px;
  border:1px solid var(--apx-border-strong);
  background:var(--apx-surface-2);
}

.pill.good{
  background:var(--apx-good-soft);
  color:var(--apx-good);
  border-color:var(--apx-good-line);
}

.pill.warn{
  background:var(--apx-warn-soft);
  color:var(--apx-warn);
  border-color:var(--apx-warn-line);
}

.pill.bad{
  background:var(--apx-bad-soft);
  color:var(--apx-bad);
  border-color:var(--apx-bad-line);
}

.pill.info{
  background:var(--apx-info-soft);
  color:var(--apx-info);
  border-color:var(--apx-brand-line);
}

.level-low{
  color:var(--apx-bad);
  font-weight:700;
}

.level-medium{
  color:var(--apx-warn);
  font-weight:700;
}

.level-full{
  color:var(--apx-good);
  font-weight:700;
}

.level-out{
  color:var(--apx-bad);
  font-weight:800;
  text-transform:uppercase;
  font-size:13px;
}

.level-unknown{
  color:var(--apx-muted);
  font-weight:600;
}

.two{
  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );
}

.three{
  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );
}

.four{
  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );
}

.list{
  display:grid;
  gap:9px;
}

.list-item{
  border:1px solid var(--apx-border);
  border-radius:9px;
  padding:12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
}

.alert{
  border-left:4px solid var(--apx-warn-bright);
  background:var(--apx-warn-soft);
}

.critical{
  border-left-color:var(--apx-bad-bright);
}

.empty{
  padding:34px;
  text-align:center;
  color:var(--apx-muted);
}

.modal-backdrop{
  position:fixed;
  inset:0;
  background:
    rgba(15,23,42,.52);
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}

.modal{
  background:var(--apx-surface);
  width:min(760px,94vw);
  max-height:
    calc(100vh - 44px);
  overflow:auto;
  border-radius:14px;
  box-shadow:
    0 25px 70px
    rgba(0,0,0,.22);
}

.modal.wide{
  width:min(1050px,96vw);
}

.modal-head{
  padding:17px 20px;
  border-bottom:1px solid var(--apx-border);
  display:flex;
  justify-content:space-between;
  gap:12px;
  position:sticky;
  top:0;
  background:var(--apx-surface);
  z-index:2;
}

.modal-body{
  padding:20px;
}

.modal-foot{
  padding:14px 20px;
  border-top:1px solid var(--apx-border);
  display:flex;
  justify-content:flex-end;
  gap:9px;
  position:sticky;
  bottom:0;
  background:var(--apx-surface);
}

.form-grid{
  display:grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );
  gap:13px;
}

.field label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--apx-ink-3);
  margin-bottom:5px;
}

.field.full{
  grid-column:1/-1;
}

.check{
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-size:13px;
}

.divider{
  height:1px;
  background:var(--apx-border);
  margin:17px 0;
}

.module-card{
  padding:15px;
  border:1px solid var(--apx-border);
  border-radius:11px;
  background:var(--apx-surface);
}

.module-card strong{
  display:block;
}

.module-card span{
  font-size:13px;
  color:var(--apx-muted);
}

.hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}

.hero h2{
  font-size:22px;
}

.progress{
  height:8px;
  background:var(--apx-border-faint);
  border-radius:99px;
  overflow:hidden;
}

.progress > i{
  display:block;
  height:100%;
  background:var(--apx-brand);
}

.footer-note{
  font-size:13px;
  color:var(--apx-muted-2);
  margin-top:10px;
}

.toast{
  position:fixed;
  right:22px;
  bottom:22px;
  background:var(--apx-ink);
  color:var(--apx-surface);
  padding:11px 14px;
  border-radius:9px;
  z-index:200;
  box-shadow:
    0 12px 30px
    rgba(0,0,0,.2);
}

@media(max-width:1100px){
  .kpis{
    grid-template-columns:
      repeat(3,1fr);
  }

  .two{
    grid-template-columns:1fr;
  }
}

/* Three sizes (P23.2, D147): phone up to 700 px, tablet up to 1100 px, computer above. On a tablet (an iPad
   upright is 810 px) the sidebar is a drawer over the page, as on a phone, so the page has the whole width;
   the menu button opens it and choosing a page closes it (shell.js). The icons-only sidebar is gone. */
@media(max-width:1100px){
  .sidebar{
    width:260px;
    box-shadow:4px 0 20px rgba(0, 0, 0, .25);
  }

  .main,
  body.sidebar-hidden .main{
    margin-left:0 !important;
    width:100% !important;
  }
}

@media(max-width:1100px){
  .subnav{
    padding:8px 15px;
  }

  .topbar{
    height:auto;
    min-height:60px;
    padding:10px 15px;
    gap:10px;
  }

  .topbar h1{
    font-size:18px;
  }

  .topbar p{
    display:none;
  }

  .global{
    flex:1 1 140px;
    width:auto;
    min-width:0;
  }

  .content{
    padding:15px;
  }

  .kpis{
    grid-template-columns:
      repeat(2,1fr);
  }

}

.list-item.clickable{
  cursor:pointer;
}

.list-item.clickable:hover,
.list-item.clickable:focus{
  border-color:var(--apx-brand-mid);
  background:var(--apx-page);
  outline:none;
}

/* ---- Phase 4: icons, links, tabs, confirmations ---- */

.icon{
  flex:0 0 auto;
  vertical-align:middle;
}

.nav a{
  text-decoration:none;
  font-size:14px;
}

.nav a .icon{
  opacity:.8;
}

.nav a.active .icon{
  opacity:1;
  color:var(--apx-brand-light);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.btn.icon-only{
  justify-content:center;
  padding-left:10px;
  padding-right:10px;
}

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--apx-ink-2);
}

.icon-btn[data-tip="Delete"]:hover,
.icon-btn[data-tip="Cancel order"]:hover{
  color:var(--apx-bad);
  border-color:#fda29b;
}

/* Tabs never shrink below their names; when a page has more than fit (Settings), they wrap onto another line. */
.subnav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:10px 28px;
  border-bottom:1px solid var(--apx-border);
  background:var(--apx-surface);
}

.subnav:empty{
  display:none;
}

/* Tabs at the top of a page (v48): bold buttons, easy to see, with a short transition on hover. */
.subnav .tab{
  flex:0 0 auto;
  padding:9px 16px;
  color:var(--apx-ink-soft);
  background:var(--apx-surface-3);
  border:1px solid var(--apx-border);
  border-radius:999px;
  text-decoration:none;
  font-size:15px;
  font-weight:700;
  white-space:nowrap;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.subnav .tab:hover{
  color:var(--apx-brand-strong);
  background:var(--apx-brand-soft);
  border-color:var(--apx-brand-tint);
  transform:translateY(-1px);
  box-shadow:0 3px 8px rgba(29, 78, 216, .15);
}

.subnav .tab:focus-visible{
  outline:3px solid var(--apx-brand-mid);
  outline-offset:2px;
}

.subnav .tab.active{
  color:var(--apx-surface);
  background:var(--apx-brand-strong);
  border-color:var(--apx-brand-strong);
  box-shadow:0 3px 10px rgba(29, 78, 216, .3);
}

.subnav .tab.active:hover{
  color:var(--apx-surface);
  background:#1e40af;
}

@media (prefers-reduced-motion: reduce){
  .subnav .tab{ transition:none; }
  .subnav .tab:hover{ transform:none; }
}

.panel-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding-top:14px;
}

.module-card.check{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}

.module-card .muted{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:13px;
}

.verify-box{
  margin:10px 0;
  background:var(--apx-surface-2);
}

.danger-note{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:var(--apx-bad-deep);
  background:var(--apx-bad-soft);
  border:1px solid var(--apx-bad-line);
  border-radius:9px;
  padding:12px 14px;
}

.btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* ---- Sales channels (D24) ---- */

.channel{
  display:inline-block;
  padding:3px 9px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  background:var(--apx-surface-3);
  color:var(--apx-ink-2);
  border:1px solid var(--apx-border);
  white-space:nowrap;
}

/* By position in the workspace's sales-channel list (core.js channelBadge). */
.channel-c0{ background:var(--apx-good-soft); color:var(--apx-good); border-color:var(--apx-good-line); }
.channel-c1{ background:var(--apx-warn-soft); color:#b93815; border-color:#fddcab; }
.channel-c2{ background:var(--apx-info-soft); color:var(--apx-info); border-color:var(--apx-brand-line); }
.channel-c3{ background:var(--apx-violet-soft); color:#5925dc; border-color:#d9d6fe; }
.channel-c4{ background:var(--apx-teal-soft); color:#107569; border-color:var(--apx-teal-line); }
.channel-c5{ background:var(--apx-pink-soft); color:var(--apx-pink); border-color:#fcceee; }
.channel-none{ background:var(--apx-surface); color:var(--apx-muted-2); border-style:dashed; }

.channel-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:14px;
  margin-bottom:18px;
}

.channel-card{
  text-align:left;
  cursor:pointer;
  font:inherit;
}

.channel-card:hover{
  border-color:var(--apx-brand-mid);
}

.channel-card.selected{
  border-color:var(--apx-brand-strong);
  box-shadow:0 0 0 2px var(--apx-brand-pale);
}

.clickable-row{
  cursor:pointer;
}

.clickable-row:hover td{
  background:var(--apx-page);
}

.channel-other{ background:var(--apx-surface-3); color:var(--apx-ink-3); border-color:var(--apx-border-strong); }

/* ---- Notes (D25) ---- */

th.notes-col,
td.notes-col{
  width:200px;
  min-width:170px;
  max-width:220px;
  white-space:normal;
}

.note-chip{
  display:inline-flex;
  align-items:flex-start;
  gap:6px;
  width:100%;
  max-width:210px;
  padding:5px 8px;
  border:1px solid var(--apx-warn-line);
  background:var(--apx-warn-soft);
  color:var(--apx-warn-deep);
  border-radius:8px;
  font:inherit;
  font-size:13px;
  text-align:left;
  cursor:pointer;
}

.note-chip span{
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.note-chip:hover{
  border-color:#fdb022;
}

.note-chip .icon{
  margin-top:1px;
}

.note-text{
  width:100%;
  min-height:130px;
  resize:vertical;
  font:inherit;
  line-height:1.45;
}

.note-meta{
  margin:0 0 10px;
}

.modal-foot .spacer{
  flex:1;
}

.note-confirm{
  color:var(--apx-bad-deep);
  font-weight:600;
  align-self:center;
}

/* ---- Inventory changes (D26) ---- */

.stock-now{
  margin-bottom:14px;
}

.segmented{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin-bottom:14px;
}

.segment{
  position:relative;
  cursor:pointer;
}

.segment input{
  position:absolute;
  opacity:0;
}

.segment span{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 12px;
  border:1px solid var(--apx-border-strong);
  border-radius:9px;
  background:var(--apx-surface);
}

.segment small{
  color:var(--apx-muted);
  font-size:13px;
}

.segment input:checked + span{
  border-color:var(--apx-brand-strong);
  background:var(--apx-brand-soft);
  box-shadow:0 0 0 2px var(--apx-brand-pale);
}

.segment input:focus-visible + span{
  outline:2px solid var(--apx-brand-strong);
  outline-offset:2px;
}

.stock-preview{
  min-height:20px;
  margin:10px 0 0;
  color:var(--apx-ink-2);
}

.section-title{
  font-size:14px;
  margin:0 0 10px;
}

table.compact{
  min-width:0;
}

.change-in{
  color:var(--apx-good);
  font-weight:700;
}

.change-out{
  color:var(--apx-bad);
  font-weight:700;
}

td.wrap{
  white-space:normal;
  min-width:160px;
}

.link-btn{
  border:0;
  background:none;
  padding:0;
  color:var(--apx-brand-strong);
  font:inherit;
  cursor:pointer;
  text-decoration:underline;
}

.stock-info div{
  padding:9px 0;
  color:var(--apx-ink-2);
}

.stock-info a{
  margin-left:8px;
  color:var(--apx-brand-strong);
}

@media (max-width: 1100px){
  .segmented{
    grid-template-columns:1fr;
  }
}

/* ---- Dashboard (Phase 5) ----
   Chart colours from the validated reference palette: one series in slot-1 blue,
   hairline grid, status colours only with an icon and a label. */

:root{
  --viz-series-1:#2a78d6;
  --viz-series-1-wash:rgba(42,120,214,0.10);
  --viz-series-1-track:#cde2fb;
  --viz-grid:#e1e0d9;
  --viz-baseline:#c3c2b7;
  --viz-muted:#898781;
  --viz-ink:#0b0b0b;
  --viz-ink-2:#52514e;
  --status-good:#0ca30c;
  --status-good-text:#006300;
  --status-warning:#fab219;
  --status-critical:#d03b3b;
}

.dash-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.dash-head p{
  margin:0;
}

.dash-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:12px;
  margin-bottom:16px;
}

.dash-tile{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "icon name"
    "stat stat"
    "note note";
  gap:4px 10px;
  text-decoration:none;
  color:inherit;
  transition:border-color .15s, box-shadow .15s;
}

.dash-tile:hover,
.dash-tile:focus-visible{
  border-color:var(--apx-brand-mid);
  box-shadow:0 0 0 3px var(--apx-brand-soft);
  outline:none;
}

.dash-tile-icon{
  grid-area:icon;
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--apx-brand-soft);
  color:var(--apx-brand-strong);
}

.dash-tile-name{
  grid-area:name;
  align-self:center;
  font-weight:700;
}

.dash-tile-stat{
  grid-area:stat;
  font-size:22px;
  font-weight:700;
  margin-top:6px;
}

.dash-tile-note{
  grid-area:note;
  color:var(--apx-muted);
  font-size:13px;
}

.kpi-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-bottom:16px;
}

.stat-tile .kpi-value{
  font-size:26px;
  margin:6px 0 4px;
}

.delta{
  display:block;
  font-size:13px;
  font-weight:600;
}

.delta-up{
  color:var(--status-good-text);
}

.delta-down{
  color:var(--apx-bad);
}

.dash-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin-bottom:16px;
}

.dash-grid > .panel{
  margin:0;
}

.dash-grid.wide-left{
  grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);
}

.dash-grid:empty{
  display:none;
}

.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}

.panel-head h2{
  margin:0 0 2px;
}

.panel-head p{
  margin:0;
}

.text-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--apx-brand-strong);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}

.text-link:hover{
  text-decoration:underline;
}

.small{
  font-size:13px;
}

/* Trend chart */

.trend-chart,
#channelBars{
  position:relative;
}

.trend-chart svg{
  display:block;
  max-width:100%;
  height:auto;
  overflow:visible;
}

.trend-chart .grid{
  stroke:var(--viz-grid);
  stroke-width:1;
}

.trend-chart .baseline{
  stroke:var(--viz-baseline);
  stroke-width:1;
}

.trend-chart .axis{
  fill:var(--viz-muted);
  font-size:13px;
  font-variant-numeric:tabular-nums;
}

.trend-chart .area{
  fill:var(--viz-series-1-wash);
}

.trend-chart .line{
  fill:none;
  stroke:var(--viz-series-1);
  stroke-width:2;
  stroke-linejoin:round;
  stroke-linecap:round;
}

.trend-chart .dot{
  fill:var(--viz-series-1);
  stroke:var(--apx-surface);
  stroke-width:2;
  pointer-events:none;
}

.trend-chart .peak-label{
  fill:var(--viz-ink-2);
  font-size:13px;
  font-weight:700;
}

.trend-chart .cross-line{
  stroke:var(--viz-baseline);
  stroke-width:1;
  pointer-events:none;
}

.trend-chart .crosshair{
  pointer-events:none;
}

.trend-chart .hit{
  fill:transparent;
  cursor:crosshair;
}

.trend-chart .hit:focus-visible{
  outline:2px solid var(--apx-brand-strong);
}

.viz-tooltip{
  position:absolute;
  transform:translateX(-50%);
  background:var(--apx-surface);
  color:var(--viz-ink);
  border:1px solid rgba(11,11,11,0.10);
  border-radius:8px;
  box-shadow:0 6px 18px rgba(16,24,40,.12);
  padding:7px 10px;
  font-size:13px;
  pointer-events:none;
  white-space:nowrap;
  z-index:5;
}

.viz-tooltip strong{
  display:block;
  font-size:14px;
}

.viz-tooltip span{
  color:var(--viz-ink-2);
}

td.num,
th.num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Channel bars */

.bar-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.bar-row{
  display:grid;
  grid-template-columns:96px minmax(0, 1fr);
  align-items:center;
  gap:10px;
  padding:4px 6px;
  margin:0 -6px;
  border-radius:8px;
  cursor:default;
}

.bar-row.hover,
.bar-row:focus-visible{
  background:var(--apx-page);
  outline:none;
}

.bar-label{
  font-size:13px;
  font-weight:600;
  color:var(--viz-ink-2);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* The value label sits at the bar's tip; the right margin keeps room for it. */
.bar-area{
  position:relative;
  display:flex;
  align-items:center;
  height:20px;
  margin-right:128px;
  min-width:0;
}

.bar{
  display:block;
  height:14px;
  background:var(--viz-series-1);
  border-radius:0 4px 4px 0;
}

.bar-value{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:13px;
  color:var(--viz-ink-2);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* Business reach */

.reach-overall{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.reach-value{
  font-size:34px;
  font-weight:800;
}

.reach-status,
.platform-status,
.stock-status-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
}

.status-good{
  color:var(--status-good-text);
}

.status-warning{
  color:var(--apx-warn-dark);
}

.status-critical{
  color:var(--apx-bad);
}

.status-neutral{
  color:var(--apx-muted);
}

.status-good .icon{
  color:var(--status-good);
}

.status-warning .icon{
  color:var(--status-warning);
}

.status-critical .icon{
  color:var(--status-critical);
}

.meter-row{
  margin:12px 0;
}

.meter-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
  margin-bottom:6px;
}

.meter{
  position:relative;
  height:10px;
  background:var(--viz-series-1-track);
  border-radius:999px;
}

.meter-fill{
  position:absolute;
  inset:0 auto 0 0;
  background:var(--viz-series-1);
  border-radius:999px;
}

.meter-pace{
  position:absolute;
  top:-4px;
  bottom:-4px;
  width:2px;
  margin-left:-1px;
  background:var(--viz-ink-2);
  border-radius:1px;
}

.mini-stats{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px 18px;
}

.mini-stats > div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.mini-stats b{
  font-size:20px;
}

.stock-status{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.stock-status-item{
  padding:7px 10px;
  border:1px solid var(--apx-border);
  border-radius:9px;
  text-decoration:none;
  background:var(--apx-surface);
}

.stock-status-item b{
  color:var(--viz-ink);
}

.stock-status-item:hover{
  border-color:var(--apx-brand-mid);
}

/* Needs attention */

.attention-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.attention-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border:1px solid var(--apx-border);
  border-left-width:4px;
  border-radius:9px;
  text-decoration:none;
  color:inherit;
}

.attention-item:hover{
  background:var(--apx-surface-2);
}

.attention-item.level-critical{
  border-left-color:var(--status-critical);
}

.attention-item.level-warning{
  border-left-color:var(--status-warning);
}

.attention-item.level-info{
  border-left-color:var(--apx-brand-mid);
}

.attention-item.level-critical .attention-icon{
  color:var(--status-critical);
}

.attention-item.level-warning .attention-icon{
  color:var(--apx-orange);
}

.attention-item.level-info .attention-icon{
  color:var(--apx-brand-strong);
}

.attention-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.attention-tag{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--apx-muted);
  font-weight:700;
}

.empty .icon{
  color:var(--status-good);
  vertical-align:-3px;
}

.rank-table{
  width:100%;
}

.rank-table td{
  white-space:normal;
}

/* Platforms and MVP status */

.platform-list{
  display:flex;
  flex-direction:column;
}

.platform-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--apx-border-faint);
}

.platform-row:last-child{
  border-bottom:0;
}

.platform-row > div{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.platform-name{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-weight:700;
  color:var(--apx-ink);
  text-decoration:none;
}

a.platform-name:hover{
  color:var(--apx-brand-strong);
  text-decoration:underline;
}

.platform-status{
  white-space:nowrap;
}

.powerbi-slot{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:160px;
  margin-top:12px;
  border:1px dashed var(--apx-border-strong);
  border-radius:10px;
  color:var(--apx-muted-2);
  font-weight:600;
}

@media(max-width:1100px){
  .kpi-row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .dash-grid,
  .dash-grid.wide-left{
    grid-template-columns:minmax(0, 1fr);
  }
}

@media (max-width: 700px){
  .kpi-row,
  .mini-stats{
    grid-template-columns:minmax(0, 1fr);
  }

  .dash-head{
    flex-direction:column;
    align-items:flex-start;
  }
}

a.btn{
  text-decoration:none;
  color:inherit;
}

/* ---- Stock level gauge (D8, v8): icon + bar, no words ----
   Status colours: red = out of stock, orange = low, yellow = medium,
   green = healthy, grey = unknown. Icon shape repeats the meaning. */

.stock-out{ --stock:#d03b3b; --stock-track:#fde2e1; }
.stock-low{ --stock:#ea580c; --stock-track:#ffead5; }
.stock-medium{ --stock:#e0a100; --stock-icon:#a86f00; --stock-track:#fef4d6; }
.stock-healthy{ --stock:#0ca30c; --stock-icon:var(--apx-good); --stock-track:#dcfae6; }
.stock-unknown{ --stock:var(--apx-muted-2); --stock-icon:var(--apx-muted); --stock-track:var(--apx-border-faint); }

.stock-gauge{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:default;
}

.stock-gauge .icon,
.stock-legend-item .icon{
  color:var(--stock-icon, var(--stock));
}

.gauge-track{
  display:block;
  width:64px;
  height:8px;
  background:var(--stock-track);
  border-radius:999px;
  overflow:hidden;
}

.gauge-fill{
  display:block;
  height:100%;
  background:var(--stock);
  border-radius:999px;
}

.stock-gauge[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute;
  left:calc(100% + 8px);
  top:50%;
  transform:translateY(-50%);
  z-index:20;
  background:var(--apx-ink);
  color:var(--apx-surface);
  font-size:13px;
  font-weight:500;
  padding:5px 8px;
  border-radius:5px;
  white-space:nowrap;
  pointer-events:none;
}

.stock-legend{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 14px;
  margin:0 0 12px;
  font-size:13px;
}

.stock-legend-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--apx-ink-2);
  font-weight:600;
}

/* ---- Phase 6 ---- */

/* Order status pills (D9): the text always names the status. */
.order-status{ border:1px solid transparent; }
.os-draft{ background:var(--apx-surface-3); color:var(--apx-ink-3); border-color:var(--apx-border); }
.os-pending{ background:var(--apx-warn-soft); color:var(--apx-warn-dark); border-color:var(--apx-warn-line); }
.os-processing{ background:var(--apx-info-soft); color:var(--apx-info); border-color:var(--apx-brand-line); }
.os-shipped{ background:var(--apx-brand-soft); color:#3538cd; border-color:var(--apx-brand-tint); }
.os-completed{ background:var(--apx-good-soft); color:var(--apx-good); border-color:var(--apx-good-line); }
.os-cancelled{ background:var(--apx-surface); color:var(--apx-muted); border-color:var(--apx-border-strong); text-decoration:line-through; }
.os-returned{ background:var(--apx-bad-soft); color:var(--apx-bad); border-color:var(--apx-bad-line); }

/* Customer 360 / order detail info row */
.c360-info{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  margin-top:14px;
}

.c360-info > div{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.note-block .note-chip{
  max-width:100%;
}

.interaction-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.interaction{
  padding:10px 12px;
  border:1px solid var(--apx-border-faint);
  border-radius:9px;
  background:var(--apx-surface);
}

.interaction-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.interaction-notes{
  margin-top:4px;
  color:var(--apx-ink-2);
  white-space:pre-wrap;
}

#interactionForm{
  margin-bottom:12px;
  padding:12px;
  border:1px solid var(--apx-brand-pale);
  border-radius:10px;
  background:var(--apx-page);
}

/* Inventory summary and reorder list */
.inv-summary{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
  margin-bottom:14px;
}

.inv-summary .kpi-value{
  font-size:22px;
}

.inv-reorder{
  text-align:left;
  font:inherit;
  cursor:pointer;
}

.inv-reorder:hover{
  border-color:var(--apx-brand-mid);
}

.inv-reorder.selected{
  border-color:#ea580c;
  box-shadow:0 0 0 2px #ffead5;
}

.banner{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  margin:0 0 14px;
  border:1px solid var(--apx-warn-line);
  background:var(--apx-warn-soft);
  color:var(--apx-warn-dark);
  border-radius:9px;
  font-weight:600;
}

/* Reports */
.report-bar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.report-range,
.report-range #rCustom{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.report-range .field{
  min-width:170px;
}

.report-range #rCustom[hidden]{
  display:none;
}

.report-table tfoot th{
  background:var(--apx-surface-2);
  font-size:13px;
  text-transform:none;
  letter-spacing:0;
  color:var(--apx-ink);
}

@media(max-width:1100px){
  .inv-summary{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .c360-info{
    grid-template-columns:minmax(0, 1fr);
  }
}


/* Dashboard: a lone panel in a row takes the full width (Phase 10 templates can hide panels). */
.dash-grid > .panel:only-child{
  grid-column:1/-1;
}

/* ---------- Templates (Phase 10) ---------- */

.tpl-current .panel-head h2{
  margin-top:2px;
}

.tpl-current code,
.tpl-invalid code{
  font-size:13px;
  background:var(--apx-surface-3);
  padding:1px 5px;
  border-radius:5px;
}

.tpl-invalid{
  border-color:var(--apx-warn-line);
  background:var(--apx-surface);
}

.tpl-invalid h2{
  display:flex;
  gap:8px;
  align-items:center;
  color:var(--apx-warn);
}

.tpl-invalid ul{
  margin:8px 0 0;
  padding-left:18px;
  font-size:13px;
}

.tpl-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:14px;
  margin-top:16px;
}

.tpl-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  color:inherit;
  text-decoration:none;
  transition:border-color .15s, box-shadow .15s;
}

.tpl-card:hover{
  border-color:var(--apx-brand-line);
}

.tpl-card:focus-visible{
  outline:2px solid var(--apx-chart-blue);
  outline-offset:2px;
}

.tpl-card.selected{
  border-color:var(--apx-chart-blue);
  box-shadow:0 0 0 1px var(--apx-chart-blue);
}

.tpl-card-top{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}

.tpl-industry{
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--apx-muted);
  margin-right:auto;
}

.tpl-name{
  font-size:15px;
}

.tpl-summary{
  font-size:13px;
  line-height:1.45;
}

.tpl-facts{
  font-size:13px;
  color:var(--apx-ink-2);
  border-top:1px solid var(--apx-border-faint);
  padding-top:8px;
  margin-top:auto;
  line-height:1.5;
}

.tpl-preview h3{
  font-size:14px;
  margin:20px 0 8px;
}

.tpl-mock{
  display:grid;
  grid-template-columns:190px minmax(0, 1fr);
  border:1px solid var(--apx-border);
  border-radius:12px;
  overflow:hidden;
  margin-top:14px;
}

.mock-sidebar{
  background:var(--apx-ink);
  color:var(--apx-border);
  padding:14px 10px;
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:13px;
}

.mock-sidebar > b{
  padding:0 8px 8px;
}

.mock-section{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--apx-muted-2);
  padding:10px 8px 4px;
}

.mock-nav-item{
  display:flex;
  gap:8px;
  align-items:center;
  padding:6px 8px;
  border-radius:7px;
}

.mock-nav-item.active{
  background:var(--apx-ink-soft);
  color:var(--apx-surface);
}

.mock-main{
  background:var(--apx-page);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

.mock-title{
  font-weight:700;
  font-size:14px;
}

.mock-tiles,
.mock-kpis,
.mock-panels{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.mock-tile,
.mock-kpi,
.mock-panel{
  background:var(--apx-surface);
  border:1px solid var(--apx-border);
  border-radius:9px;
  padding:8px 10px;
  font-size:13px;
  display:inline-flex;
  gap:6px;
  align-items:center;
}

.mock-tile{
  font-weight:600;
}

.mock-kpi{
  color:var(--apx-info);
}

.mock-panel{
  color:var(--apx-muted);
}

.tpl-sections{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
}

.tpl-statuses{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.tpl-status{
  display:flex;
  gap:8px;
  align-items:center;
}

.tpl-status.hidden-status .pill{
  opacity:.5;
  text-decoration:line-through;
}

.tpl-channels{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.tpl-connectors{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:10px;
}

.tpl-connector{
  border:1px solid var(--apx-border);
  border-radius:10px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.apply-plan h3{
  font-size:13px;
  margin:16px 0 6px;
}

.apply-plan ul{
  margin:0;
  padding-left:18px;
  font-size:13px;
  line-height:1.6;
}

.apply-confirm{
  margin-top:18px;
  font-size:13px;
}

/* ---------- Custom fields (D30) ---------- */

.cf-heading{
  border-top:1px solid var(--apx-border-faint);
  padding-top:12px;
  margin-top:4px;
}

.cf-heading span{
  font-size:13px;
  font-weight:700;
  color:var(--apx-muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.field small.muted{
  font-size:13px;
  margin-top:4px;
  display:block;
}

.cf-table table{
  width:100%;
  margin-bottom:8px;
}

.cf-table td{
  padding:4px;
}

.cf-table .input{
  width:100%;
  min-width:0;
}

.cf-range{
  display:flex;
  gap:4px;
}

.cf-range .input{
  width:84px;
}

.cf-filter-group{
  border:1px solid var(--apx-border);
  border-radius:10px;
  padding:10px 12px;
  margin:0;
}

.cf-filter-group legend{
  font-size:13px;
  font-weight:700;
  padding:0 4px;
}

.cf-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:12px 20px;
  margin:16px 0 0;
}

.cf-list > div.full{
  grid-column:1/-1;
}

.cf-list dt{
  font-size:13px;
  color:var(--apx-muted);
}

.cf-list dd{
  margin:3px 0 0;
  font-size:14px;
}

[data-cf-field][hidden]{
  display:none;
}

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

  .mock-sidebar{
    flex-direction:row;
    flex-wrap:wrap;
  }

  .mock-sidebar > b,
  .mock-section{
    display:none;
  }

  .tpl-sections{
    grid-template-columns:minmax(0, 1fr);
  }
}

/* Customer name fields (D31): the business / individual groups sit in the form grid. */
.name-group{
  display:contents;
}

.name-group[hidden]{
  display:none;
}

/* ---------- Connectors (Phase 7) ---------- */

.modal-tabs{
  display:flex;
  gap:4px;
  border-bottom:1px solid var(--apx-border);
  margin:-4px 0 16px;
  flex-wrap:wrap;
}

.modal-tabs .tab{
  border:0;
  background:none;
  padding:8px 12px;
  font-size:13px;
  font-weight:600;
  color:var(--apx-muted);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}

.modal-tabs .tab.active{
  color:var(--apx-info);
  border-bottom-color:var(--apx-chart-blue);
}

.modal-tabs .tab:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.catalog-title{
  font-size:13px;
  margin:6px 0 10px;
}

.catalog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:10px;
  margin-bottom:16px;
}

.catalog-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  text-align:left;
  font:inherit;
  color:inherit;
}

.catalog-card:not(:disabled):hover{
  border-color:var(--apx-chart-blue);
}

.catalog-card:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.form-section{
  font-size:13px;
  margin:18px 0 6px;
}

.endpoint{
  border:1px solid var(--apx-border);
  border-radius:10px;
  padding:8px 12px;
  margin-bottom:8px;
}

.endpoint summary{
  cursor:pointer;
  display:flex;
  gap:10px;
  align-items:center;
}

.endpoint .form-grid{
  margin-top:10px;
}

.endpoint-row{
  border-bottom:1px solid var(--apx-border-faint);
  padding-bottom:8px;
  margin-bottom:8px;
}

.auth-group{
  display:contents;
}

.auth-group[hidden]{
  display:none;
}

.owned-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
}

.connector-state{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.error-text{
  color:var(--apx-bad);
}

.map-table select,
.map-table .input{
  width:100%;
  min-width:140px;
}

.map-table textarea{
  font-size:13px;
}

.secret-once{
  border:1px solid var(--apx-warn-line);
  background:var(--apx-surface);
  border-radius:10px;
  padding:12px;
  margin:12px 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.panel-head > .btn{
  flex-shrink:0;
  white-space:nowrap;
}

/* Connected platforms: status + Log in on the right (D14, v12). */
.platform-row > .platform-actions{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.panel-actions-inline{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}

.login-btn{
  text-decoration:none;
}

/* ---------- Sign-in (Phase 3) ---------- */

.nav{
  flex:1;
}

.user-box{
  border-top:1px solid var(--apx-ink-soft);
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:space-between;
}

.user-name{
  display:flex;
  gap:8px;
  align-items:center;
  color:var(--apx-border);
  text-decoration:none;
  min-width:0;
}

.user-name span{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.user-name b,
.user-name small{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.user-name small{
  color:var(--apx-muted-2);
  font-size:13px;
}

.user-name:hover b{
  text-decoration:underline;
}

.btn.signout{
  background:transparent;
  color:var(--apx-border);
  border-color:var(--apx-ink-2);
  flex-shrink:0;
}

.auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  background:var(--apx-page);
}

.auth-card{
  width:100%;
  max-width:420px;
  background:var(--apx-surface);
  border:1px solid var(--apx-border);
  border-radius:14px;
  padding:28px;
  box-shadow:0 8px 24px rgba(16,24,40,.06);
}

.auth-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin:-4px -4px 18px;
  padding:16px 12px 14px;
  background:var(--apx-night);
  border-radius:12px;
}

.auth-brand img{
  width:220px;
  max-width:100%;
  height:auto;
  display:block;
  mix-blend-mode:lighten;
}

.auth-brand strong{
  font-size:20px;
}

.auth-brand span{
  color:var(--apx-border-strong);
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.auth-card h1{
  font-size:20px;
  margin:0 0 12px;
}

.auth-form{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.auth-form label{
  font-size:13px;
  font-weight:600;
  color:var(--apx-ink-2);
  margin-top:6px;
}

.auth-form .btn{
  margin-top:14px;
  justify-content:center;
}

.auth-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.auth-row > div{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.auth-message{
  border-radius:9px;
  padding:9px 12px;
  font-size:13px;
  margin:0 0 10px;
}

.auth-message.error{
  background:var(--apx-bad-soft);
  color:var(--apx-bad);
  border:1px solid var(--apx-bad-line);
}

.auth-message.info{
  background:var(--apx-info-soft);
  color:var(--apx-info);
  border:1px solid var(--apx-brand-line);
}

.auth-message.success{
  background:var(--apx-good-soft);
  color:var(--apx-good);
  border:1px solid var(--apx-good-line);
}

.auth-switch{
  margin:16px 0 0;
  font-size:13px;
  color:var(--apx-muted);
}

/* "Forgot password?" under the sign-in button (P12.17) */
.auth-forgot{
  margin:12px 0 0;
  font-size:13px;
}

@media (max-width: 700px){
  .auth-row{
    grid-template-columns:1fr;
  }
}

.profile-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  margin-bottom:0;
}

.profile-grid > .panel{
  margin-top:16px;
}

.role-matrix select{
  min-width:90px;
}

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

/* ---------- User groups and features (D35) ---------- */

.group-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:12px;
}

.group-card{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.group-card-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
}

.feature-tools{
  display:flex;
  gap:8px;
  align-items:center;
  margin:12px 0 8px;
}

.feature-tools .muted{
  margin-right:auto;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:12px;
  margin-top:8px;
}

.feature-page{
  border:1px solid var(--apx-border);
  border-radius:10px;
  padding:10px 12px 12px;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.feature-page legend{
  font-weight:700;
  font-size:13px;
  padding:0 4px;
}

.feature{
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-size:13px;
  cursor:pointer;
}

.feature input{
  margin-top:3px;
}

.feature > span{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}

.feature small{
  color:var(--apx-muted);
  font-size:13px;
}

.feature.admin-only{
  opacity:.7;
  cursor:not-allowed;
}

.exceptions{
  margin-top:14px;
}

.exceptions summary{
  cursor:pointer;
  margin-bottom:8px;
}

.feature-summary{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:14px;
}

.feature-summary ul{
  list-style:none;
  padding:0;
  margin:6px 0 0;
  font-size:13px;
  line-height:1.7;
}

.feature-summary li.no{
  color:var(--apx-muted-2);
}

.feature-summary li.yes{
  color:var(--apx-good);
}

/* Server-paged lists (P6.22) */
.sort-btn{
  all:unset;
  min-height:24px; /* P23.5: a 24 × 24 px target (all:unset clears every size first) */
  min-width:24px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font:inherit;
  color:inherit;
}

.sort-btn:focus-visible{
  outline:2px solid var(--apx-brand);
  outline-offset:2px;
  border-radius:3px;
}

/* The arrow is drawn here, so the header text stays just the column name (aria-sort tells screen readers). */
.sort-btn::after{
  content:"↕";
  font-size:13px;
  color:var(--apx-muted-2);
}

.sort-btn.active.asc::after{
  content:"▲";
  color:var(--apx-ink-soft);
}

.sort-btn.active.desc::after{
  content:"▼";
  color:var(--apx-ink-soft);
}

.pager{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:10px;
  font-size:13px;
}

.pager-count{
  margin-right:auto;
}

.pager-size{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--apx-ink-3); /* v88: enough contrast on the list background */
}

.pager-size .select{
  width:auto;
}

/* Two-step sign-in (P3.14) */
.code-input{
  font-size:20px;
  letter-spacing:4px;
  text-align:center;
}

.setup-steps{
  padding-left:20px;
  line-height:1.6;
}

.qr-box{
  display:flex;
  justify-content:center;
  margin:12px 0;
}

.qr-box img{
  border:1px solid var(--apx-border);
  border-radius:8px;
  background:var(--apx-surface);
}

.setup-key{
  word-break:break-all;
  user-select:all;
}

.recovery-codes{
  margin-bottom:14px;
}

.recovery-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px 24px;
  padding-left:22px;
  margin:12px 0;
}

.recovery-list code{
  font-size:15px;
  user-select:all;
}

.recovery-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* Hide / show the sidebar with the same button (v18) */
.sidebar{
  transition:transform .2s ease;
}

.main{
  transition:margin-left .2s ease, width .2s ease;
}

body.sidebar-hidden .sidebar{
  transform:translateX(-100%);
}

body.sidebar-hidden .main{
  margin-left:0;
  width:100%;
}

@media (prefers-reduced-motion: reduce){
  .sidebar,
  .main{
    transition:none;
  }
}

/* Same phone or email as another customer (P6.23) */
.dup-warning{
  margin:12px 0 0;
  padding:10px 12px;
  border:1px solid #f5c26b;
  background:var(--apx-warn-soft);
  border-radius:8px;
  font-size:13px;
}

.dup-warning ul{
  margin:6px 0;
  padding-left:20px;
}

/* Help desk (P6.25) */
.nav-badge{
  margin-left:auto;
  min-width:20px;
  padding:1px 6px;
  border-radius:10px;
  background:var(--apx-bad-bright);
  color:var(--apx-surface);
  font-size:13px;
  font-weight:700;
  text-align:center;
}

.unread-dot{
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:6px;
  border-radius:50%;
  background:var(--apx-brand);
  vertical-align:middle;
}

.ticket-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.ticket-pills{
  display:flex;
  gap:6px;
  align-items:flex-start;
}

.ticket-controls{
  margin-top:12px;
}

.ticket-thread{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:12px 0 18px;
}

.ticket-message{
  border:1px solid var(--apx-border);
  border-radius:10px;
  padding:10px 14px;
  max-width:860px;
}

.ticket-message header{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.ticket-message p{
  margin:6px 0 0;
  white-space:normal;
  overflow-wrap:anywhere;
}

.ticket-message.support{
  background:var(--apx-info-soft);
  border-color:var(--apx-brand-line);
  margin-left:40px;
}

.ticket-message.internal{
  background:var(--apx-warn-soft);
  border-color:#fcd34d;
  border-style:dashed;
  margin-left:40px;
}

.ticket-reply textarea{
  width:100%;
  margin:6px 0 10px;
}


/* Contact checks before saving (P6.26) */
.dup-warning.check-errors{
  border-color:#f2b8b5;
  background:var(--apx-bad-soft);
}

.input-error{
  border-color:var(--apx-bad-bright) !important;
  box-shadow:0 0 0 2px rgba(220, 38, 38, .15);
}

.address-suggestion{
  margin-bottom:8px;
  padding:8px 10px;
  border:1px solid var(--apx-good-line);
  background:var(--apx-good-soft);
  border-radius:6px;
}

.address-suggestion .btn{
  margin-top:6px;
}

/* Stock condition (P6.27) */
.condition-counts{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-bottom:10px;
}

.condition-counts > div{
  border:1px solid var(--apx-border);
  border-radius:8px;
  padding:8px 10px;
  display:flex;
  flex-direction:column;
}

.condition-counts b{
  font-size:20px;
}

/* ---- Proforma (P6.28–P6.30, D43): phone first ---- */
.pf-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
}

.pf-toolbar .search{
  flex:1 1 220px;
}

.pf-toolbar .select{
  width:auto;
}

.pf-new{
  margin-left:auto;
}

.pf-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:12px;
}

.pf-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px;
  border:1px solid var(--apx-border);
  border-radius:12px;
  background:var(--apx-surface);
  color:inherit;
  text-decoration:none;
}

a.pf-card:hover{
  border-color:var(--apx-brand-light);
}

.pf-card-top,
.pf-card-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.pf-card-customer{
  font-size:15px;
}

.pf-editor{
  max-width:900px;
  padding-bottom:90px;
}

.pf-search-box{
  position:relative;
  margin-bottom:10px;
}

.pf-search-box .input{
  width:100%;
  font-size:16px; /* no zoom on phones */
}

.pf-results{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:6px;
}

.pf-result{
  all:unset;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 12px;
  border:1px solid var(--apx-border);
  border-radius:10px;
  cursor:pointer;
  background:var(--apx-surface);
}

.pf-result:hover,
.pf-result:focus-visible{
  border-color:var(--apx-brand);
  outline:none;
}

.pf-chosen{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:var(--apx-info-soft);
  border:1px solid #bae6fd;
  border-radius:10px;
}

.pf-free{
  margin-bottom:12px;
}

.pf-line{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto auto auto auto;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-top:1px solid var(--apx-border-faint);
}

.pf-line-name{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.pf-qty{
  display:flex;
  align-items:center;
  gap:4px;
}

.pf-qty .input{
  width:64px;
  text-align:center;
  font-size:16px;
}

.pf-step{
  min-width:40px;
  min-height:40px;
  font-size:18px;
}

.pf-price{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
}

.pf-price .input{
  width:96px;
  font-size:16px;
}

.pf-line-total{
  min-width:80px;
  text-align:right;
  font-weight:700;
}

.pf-savebar{
  position:fixed;
  bottom:0;
  left:250px;
  right:0;
  z-index:15;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
  padding:12px 20px;
  background:var(--apx-surface);
  border-top:1px solid var(--apx-border);
  box-shadow:0 -4px 12px rgba(15, 23, 42, .06);
}

.pf-savebar > div{
  margin-right:auto;
  font-size:18px;
}

body.sidebar-hidden .pf-savebar{
  left:0;
}

.pf-view-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.pf-view-total{
  font-size:26px;
  font-weight:700;
}

.pf-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.pf-done{
  margin-top:10px;
  padding:10px 12px;
  border-radius:10px;
  background:var(--apx-good-soft);
  border:1px solid var(--apx-good-line);
}

.pf-print-actions{
  display:flex;
  gap:10px;
  margin-bottom:14px;
}

.pf-document{
  max-width:800px;
  margin:0 auto;
  padding:40px;
  background:var(--apx-surface);
  border:1px solid var(--apx-border);
  border-radius:8px;
  color:var(--apx-ink);
}

.pf-document header{
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-bottom:2px solid var(--apx-ink);
  padding-bottom:14px;
}

.pf-document h1{
  margin:0;
  font-size:22px;
}

.pf-doc-title{
  text-align:right;
}

.pf-doc-title h2{
  margin:0 0 4px;
  letter-spacing:.1em;
}

.pf-doc-to{
  margin:20px 0;
  line-height:1.5;
}

.pf-doc-lines{
  width:100%;
  min-width:0;
}

.pf-doc-lines th{
  background:var(--apx-surface-3);
}

.pf-doc-lines td,
.pf-doc-lines th{
  white-space:normal;
  font-size:13px;
}

.pf-doc-notes{
  margin-top:18px;
}

.pf-document footer{
  margin-top:30px;
  color:var(--apx-muted);
}

@media print{
  .sidebar,
  .topbar,
  .subnav,
  .no-print,
  .toast,
  .pf-savebar{
    display:none !important;
  }

  .main{
    margin:0 !important;
    width:100% !important;
  }

  body{
    background:var(--apx-surface) !important;
  }

  .pf-document{
    border:none;
    padding:0;
  }
}

/* ---- Performance (P6.32, P6.33, D44) ---- */
.perf-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.perf-period{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
}

.perf-period .select{
  width:auto;
}

.perf-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
  margin-bottom:14px;
}

.perf-buy{
  border:1px solid var(--apx-brand-line);
  background:var(--apx-info-soft);
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:14px;
}

.perf-buy h3{
  margin:0 0 6px;
}

.perf-advice{
  font-size:15px;
  font-weight:600;
  margin:0 0 10px;
}

.perf-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:8px;
}

.perf-facts > div{
  display:flex;
  flex-direction:column;
}

.pf-chart{
  margin:14px 0;
}

.pf-chart figcaption{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  font-size:13px;
  margin-bottom:6px;
}

.pf-chart .legend{
  color:var(--apx-ink-3);
  font-size:13px;
}

.pf-chart .key{
  display:inline-block;
  width:12px;
  height:10px;
  margin:0 4px 0 8px;
  vertical-align:middle;
}

.pf-chart .key-bar{
  background:var(--apx-chart-blue);
  border-radius:2px;
}

.pf-chart .key-ghost{
  border:1.5px solid var(--apx-muted-2);
  border-bottom:none;
  border-radius:2px 2px 0 0;
}

/* Month chart (v24): fixed height, value axis, last year as an outlined bar */
.mc{
  display:grid;
  grid-template-columns:52px 1fr;
  grid-template-rows:190px auto;
  column-gap:6px;
}

.mc-axis{
  position:relative;
}

.mc-axis span{
  position:absolute;
  right:0;
  transform:translateY(50%);
  font-size:13px;
  color:var(--apx-muted);
  font-variant-numeric:tabular-nums;
}

.mc-plot{
  position:relative;
  border-bottom:1px solid var(--apx-border-strong);
}

.mc-grid{
  position:absolute;
  left:0;
  right:0;
  border-top:1px solid var(--apx-border-faint);
}

.mc-cols{
  position:absolute;
  inset:0;
  display:flex;
  gap:2px;
}

.mc-col{
  flex:1;
  position:relative;
  height:100%;
  cursor:default;
}

.mc-col:hover{
  background:rgba(42, 120, 214, .06);
}

.mc-bar,
.mc-ghost{
  position:absolute;
  bottom:0;
  left:50%;
  width:64%;
  max-width:24px;
  transform:translateX(-50%);
  border-radius:4px 4px 0 0;
}

.mc-bar{
  z-index:1;
  min-height:2px;
  background:var(--apx-chart-blue);
  box-shadow:0 0 0 1px var(--apx-surface); /* keeps the bar apart from the outline behind it */
}

.mc-ghost{
  border:1.5px solid var(--apx-muted-2);
  border-bottom:none;
}

.mc-col:hover .mc-bar{
  background:#1d5fb3;
}

.mc-col[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% - 28px);
  left:50%;
  z-index:5;
  background:var(--apx-ink);
  color:var(--apx-surface);
  font-size:13px;
  padding:5px 8px;
  border-radius:5px;
  white-space:nowrap;
  pointer-events:none;
}

.mc-col.tip-left[data-tip]:hover::after{
  left:auto;
  right:50%;
}

.mc-labels{
  display:flex;
  gap:2px;
  padding-top:4px;
}

.mc-labels span{
  flex:1;
  font-size:13px;
  color:var(--apx-muted);
  white-space:nowrap;
  overflow:visible;
  text-align:left;
}

/* ---- Phones (D45, P6.31): same app, sidebar over the page ---- */
@media (max-width:700px){
  .sidebar{
    width:260px;
    box-shadow:4px 0 20px rgba(0, 0, 0, .25);
  }

  .brand span,
  .nav a span,
  .nav button span,
  .nav .section{
    display:revert;
  }

  .brand-logo{
    width:150px;
    margin:0 0 4px -4px;
  }

  .brand{
    flex-direction:row;
    align-items:flex-start;
    padding:18px 16px;
  }

  .nav a,
  .nav button{
    justify-content:flex-start;
  }

  .main,
  body.sidebar-hidden .main{
    margin-left:0 !important;
    width:100% !important;
  }

  .topbar{
    padding:0 12px;
    gap:8px;
    height:auto;
    min-height:60px;
    flex-wrap:wrap;
  }

  .topbar .global{
    order:5;
    flex:1 1 100%;
    margin-bottom:8px;
  }

  #app{
    padding:12px;
  }

  .form-grid{
    grid-template-columns:1fr !important;
  }

  .modal{
    width:100% !important;
    max-width:100% !important;
    max-height:100vh;
    border-radius:0;
  }

  .pf-line{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "name remove"
      "qty total"
      "price price";
  }

  .pf-line-name{ grid-area:name; }
  .pf-remove{ grid-area:remove; }
  .pf-qty{ grid-area:qty; }
  .pf-line-total{ grid-area:total; }
  .pf-price{ grid-area:price; }

  .pf-savebar{
    left:0;
    padding:10px 12px;
  }

  .pf-new{
    margin-left:0;
    width:100%;
    justify-content:center;
  }

  .pf-document{
    padding:16px;
  }
}

/* =========================================================
   PRODUCT PICTURES (D46): from the business's website; placeholder when missing
   ========================================================= */

.product-pic{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  object-fit:contain;
  background:var(--apx-surface);
  border:1px solid var(--apx-border);
  border-radius:6px;
  color:var(--apx-muted-2);
  vertical-align:middle;
}

.product-pic.small{
  width:40px;
  height:40px;
}

.product-pic.large{
  width:112px;
  height:112px;
  border-radius:10px;
}

.product-pic.no-pic{
  background:var(--apx-surface-3);
}

.name-with-pic{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.pic-input{
  display:flex;
  align-items:center;
  gap:10px;
}

.pic-input .input{
  flex:1;
}

.pf-result.pf-result-pic{
  flex-direction:row;
  align-items:center;
  gap:10px;
}

.pf-result.pf-result-pic > span{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.perf-product{
  display:flex;
  align-items:center;
  gap:14px;
}

.perf-product > div{
  display:flex;
  flex-direction:column;
  gap:4px;
}

td > .product-pic.small{
  margin-right:10px;
  float:left;
}

@media print{
  td > .product-pic.small{
    width:32px;
    height:32px;
  }
}

.pf-chosen-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Picture preview (v24): hold or hover a small product picture */
img.product-pic[data-full]{
  cursor:zoom-in;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

img.product-pic[data-full]:focus-visible{
  outline:2px solid var(--apx-brand);
  outline-offset:2px;
}

.pic-peek{
  position:fixed;
  z-index:2000;
  padding:10px;
  background:var(--apx-surface);
  border:1px solid var(--apx-border);
  border-radius:12px;
  box-shadow:0 12px 32px rgba(15, 23, 42, .22);
  pointer-events:none;
}

.pic-peek img{
  display:block;
  width:100%;
  aspect-ratio:1;
  object-fit:contain;
}

.pic-peek-name{
  margin-top:6px;
  font-size:13px;
  color:var(--apx-ink-2);
  line-height:1.3;
}

/* Pending sync (D50): saved in APXBI, waiting for the system that owns the record */
.sync-pill{
  display:inline-block;
  margin-left:6px;
  padding:0 7px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  line-height:18px;
  vertical-align:middle;
  white-space:nowrap;
  color:#8a4b00;
  background:var(--apx-warn-soft);
  border:1px solid #f3d3a4;
}

/* Your plan (P13.6, D53) */
.plan-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.plan-meters{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
  margin:14px 0;
}

.plan-meter-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:14px;
  margin-bottom:6px;
}

.plan-meter .meter{
  height:8px;
  border-radius:999px;
  background:var(--apx-surface-3);
  overflow:hidden;
}

.plan-meter .meter-fill{
  display:block;
  height:100%;
  background:var(--apx-chart-blue);
}

.plan-meter .meter-fill.full{
  background:#c2410c;
}

.plan-table th.current{
  color:var(--apx-chart-blue);
}

.plan-table td:not(:first-child),
.plan-table th:not(:first-child){
  text-align:center;
}

.auth-legal{
  margin-top:10px;
  font-size:13px;
  color:var(--apx-muted);
  text-align:center;
}

/* QuickBooks sign-in panel (P8.2) */
.qb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.qb-owns { margin-bottom: 12px; }

/* Invoices (P8.10) */
.invoice-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.invoice-toolbar { justify-content: flex-start; }
.invoice-toolbar .search { flex: 1 1 260px; width: auto; min-width: 0; }
.invoice-toolbar .select { flex: 0 0 auto; width: auto; }
.inline-field { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--apx-slate); }
.inline-field input { width: auto; max-width: 150px; }
@media (max-width: 700px) {
  .invoice-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inline-field { width: 100%; }
}
.warn-note { background: var(--apx-warn-soft); color: #8a5300; border: 1px solid #f5d9a8; border-radius: 9px; padding: 9px 11px; }

/* Profit (Phase 14) */
.profit-basis { margin: 0 0 12px; }
.profit-basis p { margin: 2px 0; }
.profit-table tr.loss td:first-child { box-shadow: inset 3px 0 0 var(--apx-bad-bright); }
.profit-table tfoot td { border-top: 2px solid var(--apx-border); font-weight: 600; }
.cost-input { width: 90px; text-align: right; padding: 5px 7px; border: 1px solid var(--apx-border-strong); border-radius: 7px; font: inherit; }
.cost-input.wide { width: 180px; text-align: left; }
.inline-field[hidden] { display: none; }

/* Business calendar (P14.8): one hue, darker = busier; 100% line dashed */
.season-chart { width: 100%; max-width: 760px; height: auto; margin: 8px 0 16px; }
.season-chart .bar rect { fill: #3b6fb6; }
.season-chart .bar.slow rect { fill: #a9c1e3; }
.season-chart .grid { stroke: var(--apx-border); stroke-width: 1; }
.season-chart .avg { stroke: var(--apx-slate); stroke-width: 1.5; stroke-dasharray: 4 4; }
.season-chart .axis { font-size: 13px; fill: var(--apx-slate); }
.season-chart .tag { font-weight: 600; }
.season-table td.heat { background: rgba(59, 111, 182, var(--heat)); }
.season-table td.heat[style*="--heat:0.5"], .season-table td.heat[style*="--heat:0.6"], .season-table td.heat[style*="--heat:0.7"],
.season-table td.heat[style*="--heat:0.8"], .season-table td.heat[style*="--heat:0.9"], .season-table td.heat[style*="--heat:1"] { color: var(--apx-surface); }

/* Plan preview in the demo workspace (v31) */
.plan-preview-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Marketing segments (P14.5) */
.starter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.card.starter { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.card.starter:hover { border-color: #3b6fb6; }
.segment-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 12px 0; }
.segment-rules fieldset { border: 1px solid var(--apx-border); border-radius: 10px; padding: 10px 12px; margin: 0; }
.segment-rules legend { font-weight: 600; font-size: 13px; padding: 0 4px; }
.segment-rules .check { display: block; margin: 3px 0; }
.segment-scroll { max-height: 180px; overflow-y: auto; }

/* One customer across channels (P14.4) */
.match-card { margin-bottom: 12px; }
.match-why { margin-bottom: 8px; }
.match-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.match-side { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .match-pair { grid-template-columns: 1fr; } }

/* Sync now on every page (P4.10) */
.sync-list { display: grid; gap: 10px; margin: 10px 0; }
.sync-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--apx-border); border-radius: 10px; }
.sync-name { min-width: 0; overflow-wrap: anywhere; }
.sync-done { color: var(--status-good-text); }
#syncBtn.syncing svg { animation: sync-pulse 1s ease-in-out infinite; }
@keyframes sync-pulse { 50% { opacity: .35; transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { #syncBtn.syncing svg { animation: none; opacity: .5; } }

/* Searchable picker (P6.38) */
.picker-btn { text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-btn::after { content: "⌕"; float: right; color: var(--apx-muted-2); margin-left: 8px; }
.picker-empty { color: var(--apx-muted); }
.picker-overlay { position: fixed; inset: 0; background: rgba(16, 24, 40, .35); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; }
.picker { background: var(--apx-surface); border-radius: 14px; width: min(620px, 100%); max-height: 80vh; display: flex; flex-direction: column; padding: 14px; box-shadow: 0 20px 50px rgba(16, 24, 40, .25); }
.picker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.picker-search { margin-bottom: 8px; }
.picker-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 80px; }
.picker-item { padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.picker-item.active, .picker-item:hover { background: var(--apx-brand-soft); }
.picker-none { padding: 12px 10px; color: var(--apx-muted); }
.picker-note { margin: 8px 0 0; }

/* Deleted in the owning system (P8.4) */
.removed-pill { background: var(--apx-bad-soft); color: var(--apx-bad); border-color: var(--apx-bad-line); }

/* Record history (P6.39) */
.record-menu { position: fixed; z-index: 250; background: var(--apx-surface); border: 1px solid var(--apx-border); border-radius: 10px; box-shadow: 0 10px 30px rgba(16, 24, 40, .18); padding: 4px; min-width: 160px; }
.record-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 12px; border-radius: 7px; cursor: pointer; font: inherit; }
.record-menu button:hover, .record-menu button:focus { background: var(--apx-brand-soft); outline: none; }
.history { width: min(760px, 100%); }
.history-list { list-style: none; margin: 8px 0; padding: 0; overflow-y: auto; flex: 1; }
.history-list li { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--apx-surface-3); }
.history-when { color: var(--apx-muted); font-size: 13px; }
.history-what { min-width: 0; overflow-wrap: anywhere; }
.history-changes { margin-top: 6px; }
.history-changes td { padding: 2px 8px 2px 0; }
.history-pairs { margin-top: 4px; }
.history-pair { margin-right: 10px; }
@media (max-width: 700px) { .history-list li { grid-template-columns: 1fr; gap: 2px; } }
.history-bar { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* Reorder → purchase order (P8.14) */
.po-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.po-group { border: 1px solid var(--apx-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }

/* Customer statement (P8.15) */
.statement h3 { margin: 18px 0 6px; font-size: 14px; }
.statement-owed { display: flex; gap: 32px; margin: 12px 0; }
.statement-total { font-size: 22px; font-weight: 700; }
.statement-aging th, .statement-aging td { width: 20%; }

/* Email choices (P12.17) */
.check-row { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; cursor: pointer; }
.check-row input { margin-top: 3px; }

/* Installed on a phone (P12.18): room for the notch and home bar; the install offer; no connection */
@supports (padding: env(safe-area-inset-top)) {
  @media (display-mode: standalone) {
    .topbar { padding-top: env(safe-area-inset-top); height: calc(72px + env(safe-area-inset-top)); }
    .sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
    .main { padding-bottom: env(safe-area-inset-bottom); }
  }
}
.install-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--apx-surface); border: 1px solid var(--apx-border); border-radius: 12px; box-shadow: 0 8px 24px rgba(17, 24, 39, .18);
}
.install-bar img { border-radius: 8px; flex: none; }
.install-text { flex: 1; display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; }
.install-text span { color: var(--apx-muted); }
.offline-notice {
  position: sticky; top: 0; z-index: 70; padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
  background: var(--apx-warn-dark); color: var(--apx-surface); font-size: 13px; text-align: center;
}

/* Barcode scanning (P6.41) */
.scan-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(17, 24, 39, .75); display: flex; align-items: center; justify-content: center; padding: 12px; }
.scan-box { background: var(--apx-surface); border-radius: 14px; width: min(520px, 100%); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.scan-head { display: flex; justify-content: space-between; align-items: center; }
.scan-view { position: relative; background: #000; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; left: 12%; right: 12%; top: 30%; bottom: 30%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 10px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .25); }
.scan-type { display: flex; gap: 8px; }
.scan-type .input { flex: 1; }
@media (max-width: 700px) { .scan-overlay { padding: 0; align-items: stretch; } .scan-box { border-radius: 0; width: 100%; } .scan-view { flex: 1; aspect-ratio: auto; } }

/* Audit log (P12.20) */
.audit-details { font-size: 13px; color: var(--apx-ink-2); max-width: 560px; overflow-wrap: anywhere; }
.audit-table .nowrap, .nowrap { white-space: nowrap; }
.audit-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.audit-toolbar .search { flex: 1 1 240px; width: auto; }
.audit-toolbar .select { flex: 0 1 190px; width: auto; }
.audit-toolbar .inline-field { flex: 0 0 auto; }

/* Files on records (P9.5) */
.files-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.files-list { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; }
.files-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--apx-border); border-radius: 8px; }
.files-name { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.files-icon { font-size: 18px; }
.files-add input { display: none; }
.files-buttons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.files-thumb { flex: none; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: rgba(127, 127, 127, 0.12); }
.files-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.danger-text { color: var(--apx-bad); }

/* Price list chosen in Customer 360 (P15.1) */
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline-form .input{max-width:280px}

/* Credit check in the order form and proforma editor (P15.3) */
.credit-box{border:1px solid var(--apx-warn-bright);background:var(--apx-warn-soft);border-radius:8px;padding:10px 12px;margin:10px 0;font-size:14px}
.credit-box.stop{border-color:var(--apx-bad-bright);background:var(--apx-bad-soft)}
.credit-box ul{margin:6px 0 6px 18px;padding:0}
.credit-box .input{margin-top:4px}

/* Units of sale in the proforma editor (P15.4) */
.pf-pack{display:flex;align-items:center;gap:6px}
.pf-pack select{width:auto;min-width:140px}

/* Follow-ups: visit and call lists (P15.5, P15.6) */
.fu-list{display:flex;flex-direction:column;gap:10px}
.fu-card{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;border:1px solid var(--line, #e5e7eb);border-radius:10px;padding:12px 14px;background:var(--apx-surface)}
.fu-card.done{opacity:.6}
.fu-main{min-width:0;display:flex;flex-direction:column;gap:4px}
.fu-reasons{display:flex;flex-wrap:wrap;gap:6px}
.fu-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:360px}
@media (max-width:700px){.fu-card{flex-direction:column}.fu-actions{justify-content:flex-start;max-width:none}.fu-actions .btn{min-height:40px}}

/* Proof of delivery (P15.10) */
.signature-pad{width:100%;max-width:600px;height:180px;border:1px dashed var(--apx-muted-2);border-radius:8px;background:var(--apx-surface);touch-action:none;display:block}
.signature-img{max-width:300px;max-height:110px;display:block;margin-top:6px}

/* Incoming calls on screen (P15.7) */
.call-cards{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:10px;max-width:340px;width:calc(100% - 32px)}
.call-card{background:var(--apx-surface);border:1px solid var(--apx-brand);border-left:5px solid var(--apx-brand);border-radius:10px;padding:10px 12px;box-shadow:0 8px 24px rgba(17,24,39,.18);display:flex;flex-direction:column;gap:4px}
.call-card.ended{border-color:var(--apx-muted-2);border-left-color:var(--apx-muted-2)}
.call-head{display:flex;justify-content:space-between;align-items:center}
.call-who{font-size:16px;font-weight:600}
.call-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
@media print{.call-cards{display:none}}

/* Switching the level in the demo and practice workspaces (v49) */
.plan-switch{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:10px}
.plan-switch-card{border:1px solid var(--apx-border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;transition:border-color .18s ease, box-shadow .18s ease}
.plan-switch-card:hover{border-color:var(--apx-brand-tint);box-shadow:0 3px 10px rgba(29,78,216,.12)}
.plan-switch-card.on{border-color:var(--apx-brand-strong);box-shadow:0 0 0 2px var(--apx-brand-strong) inset}
.plan-switch-card h3{margin:0;font-size:18px}

/* Plan designer (P16.1) */
.pd-actions{display:flex;gap:8px;flex-wrap:wrap}
.pd-wrap{max-height:70vh;overflow:auto}
.pd-table th,.pd-table td{vertical-align:middle}
.pd-table thead th{position:sticky;top:0;background:var(--apx-surface);z-index:2}
.pd-first{position:sticky;left:0;background:var(--apx-surface);z-index:1;width:340px;min-width:340px;max-width:340px;white-space:normal;line-height:1.35}
.pd-level{min-width:170px}
.pd-name{font-weight:700}
.pd-move{display:flex;gap:4px;margin-top:6px}
.pd-cell{text-align:center}
.pd-cell input[type=checkbox]{width:18px;height:18px}
.pd-limit{width:110px;margin:0 auto}
.pd-section td{background:var(--apx-surface-3);font-weight:700;color:var(--apx-ink-soft);position:sticky;left:0}

/* The dashboard as cards (P16.2, P16.4) */
.dash-head-actions{display:flex;gap:8px;flex-wrap:wrap}
.dash-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.dash-cards .dash-wide{grid-column:1 / -1}
.dash-cards .panel{margin:0}
.dash-card h2{margin:0 0 10px;font-size:17px}
.dash-figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dash-figure{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--apx-border);border-radius:10px;text-decoration:none;color:inherit;transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease}
.dash-figure:hover{border-color:var(--apx-brand-tint);box-shadow:0 3px 8px rgba(29,78,216,.12);transform:translateY(-1px)}
.dash-figure-value{font-size:22px;font-weight:700;color:var(--apx-ink)}
.dash-figure-label{font-size:13px;color:var(--apx-ink-3)}
.dash-figure.warn .dash-figure-value{color:var(--apx-warn)}
.dash-figure.bad .dash-figure-value{color:var(--apx-bad)}
.dash-choices{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dash-choice{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;border:1px solid var(--apx-border);border-radius:10px;padding:8px 10px}
.dash-choice .muted{grid-column:1}
.dash-choice-move{grid-row:1 / span 2;grid-column:2;display:flex;gap:4px}
.dash-choice.off{opacity:.65}
@media (prefers-reduced-motion: reduce){.dash-figure{transition:none}.dash-figure:hover{transform:none}}

/* Long lists (P6.42, v55): the name column fixed at the left and wrapping, headings fixed at the top,
   alternate rows shaded, the row under the mouse highlighted, a pinned row, numbers on the right, columns to show. */
.data-list-wrap{max-height:max(340px, calc(100vh - 210px))}
.data-list td{background:var(--apx-surface);font-variant-numeric:tabular-nums}
.data-list tbody tr:nth-child(even) td{background:var(--apx-surface-2)}
.data-list tbody tr:hover td{background:var(--apx-brand-soft)}
.data-list tbody tr.row-pinned td{background:var(--apx-brand-wash)}
.data-list tbody tr.row-pinned td:first-child{box-shadow:inset 3px 0 0 var(--apx-brand)}
.data-list thead th{position:sticky;top:0;z-index:3;background:var(--apx-surface-2);box-shadow:inset 0 -1px 0 var(--apx-border)}
.data-list .col-name{position:sticky;left:0;z-index:2;white-space:normal;width:280px;min-width:200px;max-width:280px;line-height:1.35;box-shadow:inset -1px 0 0 var(--apx-border)}
.data-list thead th.col-name{z-index:4;box-shadow:inset -1px 0 0 var(--apx-border), inset 0 -1px 0 var(--apx-border)}
.data-list .col-hidden{display:none}
/* Every other table (v103): its first column stays at the left when the table scrolls sideways, so the
   row's name never scrolls away. Zero specificity, so a row's own colour still wins. Long text wraps
   (td.wrap, added by watchTables in table-view.js). */
:where(.table-wrap > table:not(.data-list) > * > tr > :first-child){position:sticky;left:0;z-index:1;background:var(--apx-surface);box-shadow:inset -1px 0 0 var(--apx-border-faint)}
:where(.table-wrap > table:not(.data-list) > thead > tr > :first-child){z-index:2;background:var(--apx-surface-2)}
td.wrap.long-text{min-width:220px}
.table-tools{display:flex;justify-content:flex-end;margin:0 0 6px;position:relative}
.columns-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:30;background:var(--apx-surface);border:1px solid var(--apx-border);border-radius:10px;box-shadow:0 10px 30px rgba(16,24,40,.14);padding:10px 12px;min-width:220px;max-height:60vh;overflow:auto;display:flex;flex-direction:column;gap:6px}
.columns-menu label{display:flex;gap:8px;align-items:center;font-size:13px;cursor:pointer}
.columns-menu p{margin:0 0 2px}
.columns-menu [data-show-all]{align-self:flex-start;margin-top:4px}
@media print{.table-tools{display:none}.data-list-wrap{max-height:none}}

/* Analytics → Profit & loss: by product, channel, customer or month (v56) */
.by-switch{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px}
.by-switch a{padding:6px 12px;border:1px solid var(--apx-border-strong);border-radius:999px;font-size:13px;font-weight:600;color:var(--apx-ink-2);text-decoration:none;background:var(--apx-surface);transition:background .15s ease,border-color .15s ease,color .15s ease}
.by-switch a:hover{border-color:var(--apx-brand);color:var(--apx-brand-strong)}
.by-switch a.active{background:var(--apx-brand);border-color:var(--apx-brand);color:var(--apx-surface)}
.demo-call{margin-top:10px;padding:10px 12px;border:1px dashed var(--apx-warn-bright);border-radius:10px;background:var(--apx-warn-soft);font-size:13px}
.demo-call .toolbar{margin:8px 0 0}
.accounting-table tr.ac-section td{background:var(--apx-surface-2)}
.accounting-table tr.ac-total td{font-weight:700;border-top:1px solid var(--apx-border-strong)}

/* Phones (P6.43, v61): lists as cards, finger-sized controls (44 px), 16 px text boxes (no zoom on
   iPhone), tabs wrapping onto a second line. */
.table-tools .table-sort{display:none;align-items:center;gap:6px;margin-right:auto;font-size:13px}
@media (max-width:700px){
  input:not([type=checkbox]):not([type=radio]), select, textarea, .input, .select, .global{font-size:16px}
  .btn, .btn.small, .icon-btn, .icon-only, select, .select, .pager select, .subnav .tab{min-height:44px}
  .icon-btn, .icon-only, [data-sort-dir]{min-width:44px}
  input[type=checkbox], input[type=radio]{width:22px;height:22px}
  .check{min-height:44px;align-items:center}
  .subnav{flex-wrap:wrap;overflow-x:visible;padding:10px 16px}
  .table-tools .table-sort{display:flex}
  .table-tools{flex-wrap:wrap;gap:8px}
  .data-list-wrap{max-height:none;overflow:visible;border:0;border-radius:0}
  .data-list{min-width:0}
  .data-list, .data-list tbody{display:block}
  .data-list thead{display:none}
  .data-list tbody tr{display:block;border:1px solid var(--apx-border);border-radius:12px;margin:0 0 10px;padding:10px 12px;background:var(--apx-surface)}
  .data-list tbody tr.row-pinned{border-color:var(--apx-brand);box-shadow:0 0 0 2px var(--apx-brand-wash)}
  .data-list tbody td, .data-list tbody tr:nth-child(even) td, .data-list tbody tr:hover td, .data-list tbody tr.row-pinned td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;padding:5px 0;white-space:normal;text-align:right;background:transparent;box-shadow:none;position:static;width:auto;max-width:none;min-width:0}
  .data-list tbody td::before{content:attr(data-label);color:var(--apx-muted);font-size:13px;text-align:left;flex:0 0 auto}
  .data-list tbody td[data-label=""]::before{content:none}
  .data-list tbody td.col-name{display:block;font-size:15px;text-align:left;padding:0 0 6px;width:auto;max-width:none;min-width:0;position:static;box-shadow:none}
  .data-list tbody td.col-name::before, .data-list tbody td.cell-actions::before{content:none}
  .data-list tbody td.cell-actions{justify-content:flex-start;border-top:1px solid var(--apx-border-faint);margin-top:6px;padding-top:8px}
  .data-list tbody td.empty{display:block;text-align:center}
  .data-list tbody td.empty::before{content:none}
  .data-list .col-hidden, .data-list tbody td.col-hidden{display:none}
}
.session-list{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.session-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--apx-border);border-radius:10px;padding:10px 12px}
.plain-list{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:4px}

/* Touch screens of any size, phones and tablets (P23.2): finger-sized controls (44 px) and 16 px text boxes
   (no zoom on iPhone and iPad), so Deliveries, Inventory, the pick list and scanning are easy on an iPad too. */
@media (pointer: coarse){
  input:not([type=checkbox]):not([type=radio]), select, textarea, .input, .select, .global{font-size:16px}
  .btn, .btn.small, .icon-btn, .icon-only, select, .select, .pager select, .subnav .tab{min-height:44px}
  .icon-btn, .icon-only, [data-sort-dir]{min-width:44px}
  input[type=checkbox], input[type=radio]{width:22px;height:22px}
  .check{min-height:44px;align-items:center}
}

/* Customer 360 and other dialogs on phones (v62): full screen, nothing wider than the screen. */
.mc{grid-template-columns:52px minmax(0,1fr)}
.mc-labels span{min-width:0;overflow:hidden;white-space:nowrap}
@media (max-width:700px){
  .modal-backdrop{padding:0;align-items:stretch}
  .modal, .modal.wide{width:100vw;max-width:100vw;max-height:100vh;height:100%;border-radius:0}
  .modal-head, .modal-body, .modal-foot{padding-left:14px;padding-right:14px}
  .modal table{min-width:0}
  .modal td, .modal th{white-space:normal}
  .kpis, .grid.four, .grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mc{grid-template-columns:40px minmax(0,1fr)}
  .mc-labels span:nth-child(even){visibility:hidden}
}

/* Big figures shrink to fit their box (v64): sized by the box's own width, 15–25 px. */
.channel-card, .kpis > .card{container-type:inline-size}
.channel-card .kpi-value, .kpis > .card .kpi-value{font-size:clamp(15px, 11cqw, 25px);line-height:1.15;overflow-wrap:anywhere}
.call-card.missed{border-left:4px solid var(--apx-bad-bright)}
.data-list tbody tr.call-open td:first-child{box-shadow:inset 3px 0 0 var(--apx-bad-bright)}

/* Call log (v65): filters grouped, summary spaced, numbers as plain text. */
.call-summary{margin-bottom:16px;grid-template-columns:repeat(auto-fill, minmax(200px, 260px))}
.call-filters{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;margin:0 0 12px}
.call-filters .by-switch{margin:0}
.by-switch button{padding:6px 12px;border:1px solid var(--apx-border-strong);border-radius:999px;font:inherit;font-size:13px;font-weight:600;color:var(--apx-ink-2);background:var(--apx-surface);cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.by-switch button:hover{border-color:var(--apx-brand);color:var(--apx-brand-strong)}
.by-switch button.active{background:var(--apx-brand);border-color:var(--apx-brand);color:var(--apx-surface)}
.call-number{color:inherit;text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.call-number:hover{color:var(--apx-brand-strong);text-decoration:underline}

/* Contracts (P17.2): how much of a contract's funding its orders use. */
.contract-bar{
  display:inline-block;
  width:64px;
  height:8px;
  background:var(--apx-border-faint);
  border-radius:999px;
  overflow:hidden;
  vertical-align:middle;
}

.contract-bar-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--apx-good-bright);
}

.contract-bar-fill.warn{ background:#f79009; }
.contract-bar-fill.bad{ background:#f04438; }

/* Compliance checklists (P17.3) */
.checklist-item{
  border-top:1px solid var(--apx-border-faint);
  padding:10px 0;
}

.checklist-item:first-child{ border-top:0; }
.checklist-head{ display:flex; gap:10px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.checklist-ref{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; color:var(--apx-ink-3); }
.checklist-how{ white-space:pre-wrap; margin:4px 0 0; }

/* Dark theme (P6.44, v67): light surfaces dark and dark text light, colours kept recognisable
   (inverted, then the hue turned back). Applied to each surface, not the whole page, so fixed and
   sticky parts keep their places; the navy sidebar stays as it is; pictures keep their real colours. */
html[data-theme="dark"] body{background:var(--apx-dark-bg)}
html[data-theme="dark"] .main,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .picker,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .call-card,
html[data-theme="dark"] .auth-card{filter:invert(.92) hue-rotate(180deg)}
html[data-theme="dark"] :is(.main, .modal, .picker, .call-card) :is(img, video, canvas, picture, iframe),
html[data-theme="dark"] .auth-brand{filter:invert(1) hue-rotate(180deg)}
html[data-theme="dark"] .auth-page{background:var(--apx-dark-bg)}
@media print{
  html[data-theme="dark"] :is(.main, .modal, .main img, .modal img){filter:none}
}

/* Rules (P18.3) */
.rule-condition { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.rule-condition .select, .rule-condition .input { flex: 1 1 140px; min-width: 0; }
.rule-condition [data-c-remove] { flex: 0 0 auto; }
.rule-tried { margin-top: 10px; }
.rule-matches { margin: 6px 0; padding-left: 20px; max-height: 180px; overflow: auto; }

/* What if (P18.4) */
.whatif-kpis { margin: 12px 0; }
.whatif-kpis .kpi-value { font-size: 1.15rem; }
tr.row-warning td { background: var(--warn-bg, #fff7e6); }

/* Records of template-defined types (P18.5) */
.record-fields { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: 6px 12px; margin: 8px 0 12px; }
.record-fields dt { color: var(--muted, #64748b); }
.record-fields dd { margin: 0; overflow-wrap: anywhere; }
.record-links { margin: 4px 0 10px; padding-left: 20px; }
.record-history ul { margin: 6px 0; padding-left: 20px; font-size: 0.9em; }
tr.clickable { cursor: pointer; }
@media (max-width: 700px) { .record-fields { grid-template-columns: 1fr; } .record-fields dd { margin-bottom: 6px; } }

/* First-run set-up (P18.6) */
.setup-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.setup-banner span { flex: 1 1 260px; }
.setup-step h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.setup-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; margin-bottom: 8px; }
.setup-systems { padding-left: 0; list-style: none; }
.setup-systems li { margin: 6px 0; }
.setup-finish { margin: 16px 0; align-items: center; }

/* AI assistant (P18.8) */
.ask-log { max-height: 55vh; min-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 8px; }
.ask-msg { padding: 8px 12px; border-radius: 10px; max-width: 92%; overflow-wrap: anywhere; }
.ask-user { align-self: flex-end; background: var(--apx-brand-wash); }
.ask-bot { align-self: flex-start; background: var(--apx-surface-3); }
.ask-used { margin-top: 6px; }
.ask-draft { margin-top: 8px; padding: 8px; border: 1px dashed var(--apx-muted-2); border-radius: 8px; background: var(--apx-surface); }
.ask-draft .actions { margin-top: 6px; }
.ask-examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ask-input { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.ask-input textarea { flex: 1; resize: vertical; }

/* Cash flow (P18.10) */
.cf-list { padding-left: 0; list-style: none; margin: 0; }
.cf-list li { padding: 6px 0; border-bottom: 1px solid var(--apx-border); }
#cfOut .neg { color: var(--apx-bad); font-weight: 600; }
#cfOut .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

/* Data quality (P18.11) */
.quality-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.quality-type h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.quality-checks { list-style: none; padding-left: 0; margin: 6px 0; }
.quality-checks > li { margin: 6px 0; }
.quality-checks summary { cursor: pointer; }
.quality-checks ul { margin: 4px 0 6px; padding-left: 20px; }

/* Connections (P18.12) */
.picker.conn { max-width: 760px; }
.conn-map { position: relative; height: 300px; margin: 8px 0 12px; }
.conn-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.conn-map line { stroke: var(--apx-muted-2); stroke-width: 0.4; vector-effect: non-scaling-stroke; }
.conn-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 30%;
  padding: 6px 10px; border: 1px solid var(--apx-border-strong); border-radius: 10px; background: var(--apx-surface); font: inherit; font-size: max(13px, 0.85em); text-align: center; cursor: pointer; }
.conn-node span { color: var(--apx-ink-3); overflow-wrap: anywhere; }
.conn-center { background: var(--apx-brand-deep); color: var(--apx-surface); border-color: var(--apx-brand-deep); cursor: default; max-width: 40%; }
.conn-center span { color: var(--apx-brand-wash); }
.conn-group { scroll-margin-top: 8px; border-radius: 8px; transition: background 0.4s; }
.conn-group ul { margin: 4px 0 12px; padding-left: 20px; }
.conn-flash { background: var(--apx-warn-pale); }
@media (max-width: 700px) { .conn-map { height: 240px; } .conn-node { font-size: max(13px, 0.75em); padding: 4px 6px; } }
.ask-text p { margin: 0 0 6px; }
.ask-text ul, .ask-text ol { margin: 4px 0 6px; padding-left: 20px; }
.ask-text code { font-size: 0.9em; background: var(--apx-border); padding: 0 3px; border-radius: 3px; }

/* Starter rules (v88) */
.starter-rules { list-style: none; padding-left: 0; margin: 6px 0 10px; }
.starter-rules li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--apx-border); }
.starter-rules li > div { flex: 1; min-width: 0; }

/* The assistant minimized (v93): a button in the corner while a question is answered, and when it is */
.ask-chip { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 95; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--apx-brand-deep); color: var(--apx-surface); font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .25); }
.ask-chip:hover { background: #1e40af; }
.ask-chip:focus-visible { outline: 3px solid var(--apx-brand-light); outline-offset: 2px; }
.ask-chip.ready { background: #047857; }
.ask-chip.ready:hover { background: #065f46; }
@media (max-width: 700px) { .ask-chip { left: 16px; right: 16px; justify-content: center; } }

/* A connector that stopped working (P7.11): above every page for the people who set up connectors */
.connector-banner { margin: 12px 24px 0; display: grid; gap: 8px; }
.connector-banner-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 10px;
  background: var(--apx-warn-pale); border: 1px solid var(--apx-warn-bright); color: var(--apx-warn-deep); overflow-wrap: anywhere; }
.connector-banner-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) { .connector-banner { margin: 10px 16px 0; } }

/* Try it yourself (P20.7): the start box on the practice copy's sign-in page, and the line above every page */
.practice-start { margin: 0 0 22px; padding: 18px 18px 14px; border: 1px solid var(--apx-brand-line); border-radius: 12px; background: var(--apx-brand-wash); }
.practice-start h2 { margin: 0 0 6px; font-size: 18px; }
.practice-start p { margin: 0 0 12px; }
.practice-agree { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; font-weight: 500; }
.practice-agree input { margin-top: 3px; flex: none; width: 18px; height: 18px; }
.practice-start .btn { width: 100%; justify-content: center; margin-bottom: 12px; }
.practice-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 4px 0 14px; }
.practice-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.practice-fields label .muted { font-weight: 400; }
.practice-fields .wide { grid-column: 1 / -1; }
@media (max-width: 480px) { .practice-fields { grid-template-columns: 1fr; } }
.practice-start { animation: practice-rise .35s ease-out both; }
@keyframes practice-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.demo-opening { display: flex; gap: 8px; justify-content: center; margin: 22px 0; }
.demo-opening span { width: 10px; height: 10px; border-radius: 50%; background: var(--apx-brand); animation: demo-dot 1.2s ease-in-out infinite; }
.demo-opening span:nth-child(2) { animation-delay: .15s; }
.demo-opening span:nth-child(3) { animation-delay: .3s; }
@keyframes demo-dot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .practice-start, .demo-opening span { animation: none; } }
.practice-staff { border-top: 1px solid var(--apx-border); padding-top: 10px; margin-bottom: 0 !important; }
.practice-banner { margin: 12px 24px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px;
  border-radius: 10px; background: var(--apx-brand-wash); border: 1px solid var(--apx-brand-line); color: var(--apx-ink); }
@media (max-width: 700px) { .practice-banner { margin: 10px 16px 0; } }

/* Friendlier screens (P6.45) */
/* Errors that stay: red, with a close button; and the same message next to the button pressed */
.toast.toast-error { background: var(--apx-bad); display: flex; align-items: flex-start; gap: 10px; max-width: min(520px, calc(100vw - 32px)); }
.toast-close { background: transparent; border: 0; color: var(--apx-surface); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; min-height: 0; }
.inline-error { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: var(--apx-bad-soft); border: 1px solid #fda29b; color: var(--apx-bad-deep); font-size: 14px; overflow-wrap: anywhere; }
/* APXBI's own "Are you sure?" */
.confirm-box .modal { max-width: 460px; }
.confirm-text { margin: 4px 0 14px; line-height: 1.5; }
/* Words under the top bar's icons on wide screens; icons only on narrow screens (the names stay for screen readers) */
.tb-label { display: none; }
@media (min-width: 1101px) {
  .topbar .btn.icon-only:has(.tb-label) { flex-direction: column; gap: 2px; padding: 4px 10px; min-width: 52px; }
  .topbar .tb-label { display: block; font-size: 13px; font-weight: 600; line-height: 1.1; }
}
/* Helpful empty lists (P6.45): what the page is for and its first step */
.empty-help { max-width: 640px; margin: 6px auto; text-align: left; white-space: normal; }
.empty-help p { margin: 0 0 8px; color: var(--apx-ink-2); }
.empty-help .muted { color: var(--apx-muted); }
/* Users & groups settings in sections (P6.45) */
.settings-group { margin: 22px 0 2px; padding-top: 14px; border-top: 1px solid var(--apx-border); font-size: 1.05rem; }
.panel > .settings-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.settings-group-note { margin: 0 0 12px; }
.panel-head h3 { margin: 0 0 2px; font-size: 1rem; }
/* While loading (P6.45): a soft grey shape instead of the word (the word stays for screen readers) */
@keyframes apxbi-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.loading, .page-skeleton .sk {
  color: transparent !important; user-select: none; border-radius: 8px; min-height: 18px;
  background: linear-gradient(90deg, var(--apx-border-faint) 25%, var(--apx-surface-2) 50%, var(--apx-border-faint) 75%); background-size: 200% 100%; animation: apxbi-shimmer 1.4s linear infinite;
}
p.loading, div.loading { min-height: 48px; }
.page-skeleton { display: grid; gap: 12px; padding: 4px 0; }
.page-skeleton .sk-title { height: 26px; width: 40%; }
.page-skeleton .sk-bar { height: 40px; width: 70%; }
.page-skeleton .sk-row { height: 22px; }
@media (prefers-reduced-motion: reduce) { .loading, .page-skeleton .sk { animation: none; } }
/* First-visit tip (P6.45) */
.page-tip { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; padding: 12px 14px;
  border-radius: 10px; background: var(--apx-info-soft); border: 1px solid var(--apx-brand-line); color: var(--apx-ink-soft); line-height: 1.45; }
.page-tip > div:first-child { flex: 1 1 320px; min-width: 0; }
.page-tip-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
/* The owner's "Everything OK?" card (P16.7): a headline and one line per check (mark + word, never colour alone) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.health-card { border-left: 4px solid var(--apx-good-bright); }
.health-card.health-check { border-left-color: #f79009; }
.health-card.health-problem { border-left-color: var(--apx-bad-bright); }
.health-headline { font-size: 1.15rem; font-weight: 700; margin: 4px 0 10px; display: flex; align-items: center; gap: 8px; }
.health-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.health-list li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; overflow-wrap: anywhere; }
.health-list a { color: inherit; text-decoration: none; }
.health-list a:hover, .health-list a:focus-visible { text-decoration: underline; }
.health-mark { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 13px; font-weight: 700; color: var(--apx-surface); background: var(--apx-good-bright); }
.health-check > .health-mark, li.health-check .health-mark, .health-card.health-check .health-headline .health-mark { background: var(--apx-orange); }
.health-problem > .health-mark, li.health-problem .health-mark, .health-card.health-problem .health-headline .health-mark { background: var(--apx-bad-bright); }
li.health-ok .health-mark { background: var(--apx-good-bright); }

/* Do this next (P20.2): a finding per line with its fix */
.next-list, .next-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.next-list li, .next-items li { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; overflow-wrap: anywhere; }
.next-list .next-body, .next-items li > div:first-child { flex: 1 1 260px; min-width: 0; }
/* The route planner (P20.4, v134): name and the ↑ ↓ buttons on one line, the address below. */
#routeStops li > label { flex: 1 1 200px; min-width: 0; }
#routeStops li > div { flex-basis: 100%; margin-top: -4px; }
.route-move { display: inline-flex; gap: 4px; }
#routeLegs { display: flex; flex-wrap: wrap; gap: 6px; }
li.next-problem .health-mark { background: var(--apx-bad-bright); }
li.next-check .health-mark { background: var(--apx-orange); }
.next-items li { padding: 8px 0; border-bottom: 1px solid var(--apx-border-faint); }

/* At a glance (P20.1): the business on one page */
.glance { display: grid; gap: 16px; }
.glance-head h2 { font-size: 1.3rem; margin: 0 0 4px; }
.glance-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 12px; }
.glance-list h3 { font-size: 1rem; margin: 0 0 6px; }
.glance-list ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.glance-list li > * { vertical-align: top; }
.glance-list li { overflow-wrap: anywhere; }
.glance-list li b { float: right; margin-left: 8px; }
.glance-big { font-size: 1.8rem; font-weight: 700; margin: 4px 0; }
.bad-text { color: var(--apx-bad); }

/* Progress (P21.1): a bar with its number */
.progress { display: inline-block; vertical-align: middle; width: 90px; height: 8px; border-radius: 999px; background: var(--apx-border-faint); overflow: hidden; }
.progress-bar { display: block; height: 100%; background: var(--apx-brand); border-radius: 999px; }

/* Site photos (P21.2): folders as chips, an add row, a grid of photos with who / when */
.album-block { margin-top: 18px; }
.album-view .link-btn.active { font-weight: 700; text-decoration: underline; }
.album-folders { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.album-chip { border: 1px solid rgba(127, 127, 127, 0.35); background: transparent; color: inherit; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 0.85rem; cursor: pointer; min-height: 32px; }
.album-chip.active { background: var(--apx-brand); border-color: var(--apx-brand); color: var(--apx-surface); }
.album-chip.active .muted { color: rgba(255, 255, 255, 0.85); }
.album-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.album-add .input { flex: 1 1 220px; min-width: 0; }
.album-group { margin: 14px 0 6px; font-size: 0.95rem; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.album-tile { margin: 0; border-radius: 8px; overflow: hidden; background: rgba(127, 127, 127, 0.08); }
.album-tile img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.album-tile figcaption { padding: 6px 8px; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .album-chip { min-height: 44px; }
  .album-add .btn, .album-add label { min-height: 44px; }
}
.album-space.warn-text { color: var(--apx-warn); font-weight: 600; }
/* Photos reach the office at once (P21.2, v110): waiting on the phone, and the line while sending */
.album-local img { opacity: 0.6; }
.album-latest { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.photo-queue { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 94; max-width: min(420px, calc(100vw - 32px));
  background: var(--apx-brand-strong); color: var(--apx-surface); border-radius: 10px; padding: 8px 12px; font-size: 0.85rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); }
.photo-queue.waiting { background: var(--apx-warn); }
/* Project folders in a cloud drive (P21.3) */
.album-drive { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.drive-copied { color: var(--apx-good); }
/* Job costing (P21.4): totals, the table per cost code with its used bar, the lines behind a code */
.costs-block { margin-top: 18px; }
.cost-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.cost-totals > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: rgba(127, 127, 127, 0.08); }
.cost-totals b { font-size: 1.1rem; }
.cost-table .num, .cost-lines .num { text-align: right; white-space: nowrap; }
.cost-row { cursor: pointer; }
.cost-row:hover, .cost-row:focus-visible { background: rgba(127, 127, 127, 0.08); }
.cost-bar { width: 70px; }
.cost-bar.cost-near .progress-bar, .cost-near .cost-bar .progress-bar { background: var(--apx-orange); }
.cost-bar.cost-over .progress-bar, .cost-over .cost-bar .progress-bar { background: var(--apx-bad-bright); }
.cost-over .cost-word, .cost-over > b { color: var(--apx-bad); font-weight: 600; }
.cost-near .cost-word { color: var(--apx-warn); }
.cost-detail td { background: rgba(127, 127, 127, 0.05); }
.budget-grid .field label { font-size: 0.85rem; }
/* Profit per record (P21.5) */
.cost-profit { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 12px; }
.cost-profit > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(127, 127, 127, 0.25); }
.cost-profit b { font-size: 1.1rem; }
.glance-records { margin-bottom: 16px; }
/* Estimates and proposals (P21.6) */
.estimates-block { margin-top: 18px; }
.estimate-list { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; }
.estimate-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.est-lines .input { min-width: 0; width: 100%; }
.est-lines td:nth-child(2) { min-width: 180px; }
.est-lines .num { text-align: right; }
.billing-block { margin-top: 18px; }
/* The schedule (P21.8): a timeline of bars and milestones; scrolls sideways inside itself on phones */
.schedule-block { margin-top: 18px; }
.gantt { --gantt-name: 34%; position: relative; overflow-x: auto; border: 1px solid rgba(127, 127, 127, 0.25); border-radius: 8px; margin: 6px 0 10px; }
.gantt-row { display: grid; grid-template-columns: var(--gantt-name) 1fr; min-width: 560px; border-top: 1px solid rgba(127, 127, 127, 0.15); }
.gantt-head { border-top: 0; font-size: 0.8125rem; }
.gantt-name { padding: 6px 8px; display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.gantt-track { position: relative; min-height: 34px; }
.gantt-month { position: absolute; top: 8px; color: var(--muted, #667085); border-left: 1px solid rgba(127, 127, 127, 0.3); padding-left: 3px; }
.gantt-bar { position: absolute; top: 9px; height: 16px; border-radius: 4px; background: rgba(37, 99, 235, 0.25); overflow: hidden; }
.gantt-fill { display: block; height: 100%; background: var(--apx-brand); }
.gantt-done .gantt-fill, .gantt-bar.gantt-done { background: var(--apx-good-bright); }
.gantt-behind { background: rgba(220, 104, 3, 0.25); } .gantt-behind .gantt-fill { background: var(--apx-orange); }
.gantt-late { background: rgba(217, 45, 32, 0.25); } .gantt-late .gantt-fill { background: var(--apx-bad-bright); }
.gantt-todo { background: rgba(127, 127, 127, 0.25); }
.gantt-milestone { position: absolute; top: 6px; transform: translateX(-50%); font-size: 1.1rem; color: var(--apx-brand); }
.gantt-milestone.gantt-late { color: var(--apx-bad-bright); } .gantt-milestone.gantt-done { color: var(--apx-good-bright); }
.gantt-label { position: absolute; right: 4px; top: 9px; }
.gantt-today, .gantt-due { position: absolute; top: 0; bottom: 0; width: 2px; pointer-events: none; }
.gantt-today { background: var(--apx-bad-bright); } .gantt-due { background: var(--apx-violet); border-left: 1px dashed var(--apx-violet); }
.plan-table td { vertical-align: top; } .plan-table [data-f="lag"], .plan-table [data-f="headcount"] { max-width: 80px; margin-top: 4px; } .plan-table [data-f="crew"] { margin-top: 4px; }
/* Subcontractor paperwork (P21.9) */
.subs-block { margin-top: 18px; }
.paper-chip { display: inline-block; font-size: 0.8125rem; padding: 1px 6px; border-radius: 999px; border: 1px solid rgba(127, 127, 127, 0.35); white-space: nowrap; }
.paper-ok { border-color: var(--apx-good-bright); color: var(--apx-good); } .paper-expiring { border-color: var(--apx-orange); color: var(--apx-warn); }
.paper-expired, .paper-missing { border-color: var(--apx-bad-bright); color: var(--apx-bad); }
/* Timesheets (P21.10) */
.time-block { margin-top: 18px; }
.time-clock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; }
.time-clock .btn { min-height: 44px; }
.ask-off { opacity: 0.6; }
/* More kinds of record folded in the sidebar (P21.12) */
.nav-more > summary { list-style: none; cursor: pointer; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more[open] > summary { opacity: 0.8; }
.nav-more > .nav-link { padding-left: 28px; }

/* Supplier prices compared (P21.14) */
.good-text { color: var(--status-good-text, #006300); }
.sp-cheapest td, td.sp-cheapest { background: color-mix(in srgb, var(--status-good-text, #006300) 9%, transparent); }
.est-line-source { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-top: 2px; }
.est-line-source [data-line-supplier]:not(:empty) { cursor: pointer; }
.sp-block, .sp-list { margin-top: 16px; }

/* A connected system not answering (P22.2): one line for everyone */
.outage-line { margin: 12px 24px 0; display: grid; gap: 6px; }
/* A browser too old for APXBI (P23.1, public/js/browser-check.js). */
.old-browser { padding: 10px 16px; background: var(--apx-warn-pale); border-bottom: 1px solid var(--apx-warn-bright); color: var(--apx-warn-deep); font-size: 15px; line-height: 1.4; }
.old-browser span { display: block; margin-top: 2px; }
.old-browser.full { position: fixed; inset: 0; z-index: 10000; background: var(--apx-surface); color: var(--apx-ink-soft); border: 0; padding: 32px 20px; overflow: auto; }
.old-browser.full h1 { font-size: 22px; margin: 0 0 8px; }
.outage-row { padding: 9px 14px; border-radius: 10px; background: var(--apx-warn-pale); border: 1px solid var(--apx-warn-bright); color: var(--apx-warn-deep); font-size: 14px; overflow-wrap: anywhere; }
.outage-row.maintenance-row { background: var(--apx-brand-soft); border-color: #0284c7; color: #0c4a6e; }
@media (max-width: 700px) { .outage-line { margin: 10px 16px 0; } }

/* Tablet widths (P23.1, found by WebKit on an iPad): beside the sidebar the top bar has about 560 px, so the
   search box takes its own row, as on phones, instead of pushing the buttons past the edge. */
@media (min-width: 701px) and (max-width: 1100px) {
  .topbar { flex-wrap: wrap; height: auto; min-height: 64px; padding: 8px 20px; gap: 10px; }
  .topbar .headcopy { min-width: 0; }
  .topbar .global { order: 5; flex: 1 1 100%; width: auto; margin-bottom: 4px; }
}
/* Up to tablet width: a table outside the usual scrolling frame (.table-wrap) scrolls inside its panel, and
   no box or menu is wider than the screen (P23.1, found by WebKit and Firefox on a phone). */
@media (max-width: 1100px) {
  #app table:not(.table-wrap table) { display: block; max-width: 100%; overflow-x: auto; }
  /* :where() gives no weight, so a size a box already has (e.g. the amount filters) still wins. */
  :where(#app select, #app input:not([type="checkbox"]):not([type="radio"]), #app textarea) { max-width: 100%; }
}

/* WCAG 2.2 AA (P23.5, D147): every control at least 24 × 24 px (2.5.8), and a focused field never hidden under the
   sticky top bar (2.4.11; shell.js also moves the page when a field under it gets the focus). */
html { scroll-padding-top: 96px; scroll-padding-bottom: 16px; }
/* :where() gives these no weight, so the 44 px of touch screens (above) still wins. */
:where(.btn, .icon-btn, .icon-only, .link-btn, .pager button, .tab, .sort-btn, .select) { min-height: 24px; }
/* Drop-downs drawn the same in every browser, in the APXBI look: Safari otherwise draws its own and ignores the
   padding and height (found by WebKit, P23.5), so the arrow is APXBI's own small chevron. */
select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none; min-height: 24px; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 8px;
}
select:not(.select):not(.input):not([multiple]):not([size]) {
  padding: 3px 30px 3px 8px; border: 1px solid var(--apx-border-strong); border-radius: 6px; background-color: var(--apx-surface); color: inherit;
}
:where(.btn, .icon-btn, .icon-only, .link-btn, .pager button, .tab, .sort-btn) { min-width: 24px; }
.link-btn { display: inline-flex; align-items: center; }

/* The quick finder (P23.6): Ctrl / Cmd + K. */
.cmd-list { list-style: none; margin: 10px 0 6px; padding: 0; max-height: min(60vh, 420px); overflow-y: auto; }
.cmd-item { display: flex; align-items: baseline; gap: 8px; padding: 9px 10px; border-radius: 8px; cursor: pointer; min-height: 24px; }
.cmd-item.active { background: var(--apx-brand-soft); outline: 1px solid var(--apx-brand-line); }
.cmd-kind { flex: 0 0 auto; min-width: 64px; font-size: 13px; color: var(--apx-muted); }
.cmd-empty { padding: 10px; }
kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border: 1px solid var(--apx-border-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--apx-surface-2); font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.keys-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 4px 0 10px; }
.keys-list dt { white-space: nowrap; }
.keys-list dd { margin: 0; }
/* Saved views (P23.7): the picker beside Filter and Clear. */
.views-bar { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.views-bar .select { width: auto; max-width: 220px; padding-top: 7px; padding-bottom: 7px; }
/* Getting started (P23.9): a person's first two weeks, above the dashboard cards. */
.getting-started .start-list { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 6px; }
.getting-started .start-list li { display: flex; gap: 10px; align-items: baseline; }
.getting-started .start-list li.done { color: var(--apx-muted); text-decoration: line-through; }
.getting-started .start-list li > span[aria-hidden] { width: 18px; color: var(--apx-good); font-weight: 700; }
/* Help next to a field (P23.9). */
.field-help { display: block; margin-top: 4px; font-size: 13px; color: var(--apx-muted); line-height: 1.35; }
/* Windows contrast themes (P23.3): the system's own colours take over; the drop-downs get their usual arrow back
   (background pictures are removed in that mode) and buttons, notes and the chosen result keep an outline. */
@media (forced-colors: active) {
  select:not([multiple]):not([size]) { -webkit-appearance: auto; appearance: auto; background-image: none; padding-right: 8px; }
  .btn, .pill, .cmd-item.active, .outage-row, .old-browser, .channel-card.selected { border: 1px solid CanvasText; }
}

/* The demo host waking up after a quiet spell (D149). */
.waking-note { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1000; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 10px; background: var(--apx-brand-soft); border: 1px solid var(--apx-brand-line); color: var(--apx-brand-deep); font-size: 14px; box-shadow: 0 4px 16px rgba(15, 23, 42, .12); }

/* The top bar follows the room it really has (v139): the window's width, the browser's zoom and whether the
   sidebar is open, not only fixed screen sizes. It wraps instead of running past the edge: with less room the
   search box takes its own row, then the buttons drop their words, then the page's subtitle goes. */
.topbar { container: topbar / inline-size; flex-wrap: wrap; height: auto; min-height: 72px; padding-top: 8px; padding-bottom: 8px; row-gap: 8px; }
.topbar .headcopy { flex: 1 1 220px; min-width: 0; }
.topbar #subtitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.topbar .global { flex: 0 1 380px; width: auto; min-width: 200px; }
@container topbar (max-width: 1050px) {
  .topbar .global { order: 5; flex: 1 1 100%; max-width: none; margin-bottom: 4px; }
}
@container topbar (max-width: 760px) {
  .topbar .tb-label { display: none; }
  .topbar .btn.icon-only:has(.tb-label) { flex-direction: row; padding: 6px 10px; min-width: 0; }
}
@container topbar (max-width: 520px) {
  .topbar #subtitle { display: none; }
}

/* Do this next (v139): the mark, the sentence and its button in three columns, the same on every finding; when the
   card is narrow (a phone, a narrow column) the button goes under the sentence, never under the mark. */
.next-list { container: nextlist / inline-size; gap: 0; }
.next-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 8px; align-items: start; padding: 12px 0; border-top: 1px solid var(--apx-border); }
.next-list li:first-child { border-top: 0; padding-top: 4px; }
.next-list li > .btn { grid-column: 3; align-self: center; white-space: nowrap; }
@container nextlist (max-width: 560px) {
  .next-list li > .btn { grid-column: 2 / -1; justify-self: start; align-self: start; }
}
/* Anything hidden stays hidden, whatever its own display (v139: a hidden top-bar button showed as an empty box). */
[hidden] { display: none !important; }
/* The sidebar's page list scrolls inside it (v139): on a phone or a short window the Account pages are never hidden
   under the name and Sign out. On phones and tablets the page behind the open drawer is dimmed; a tap closes it. */
.nav { min-height: 0; overscroll-behavior: contain; }
.drawer-backdrop { display: none; }
@media (max-width: 1100px) {
  body:not(.sidebar-hidden) .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 19; background: rgba(15, 23, 42, .45); }
}