/* ==== SUPPLIER APP (owner: supplier lane, assets/js/app-supplier.js) :: start ==== */
/* Supplier surfaces: supplier*.html. Every rule is scoped under body.sp or an sp- class so buyer and admin pages are untouched. */
body.sp { --sp-red: #c42b1c; --sp-red-text: #a8261a; --sp-red-soft: #f7dcd6; }
[data-theme='dark'] body.sp { --sp-red-text: #ff9384; --sp-red-soft: #3d1f1d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) body.sp { --sp-red-text: #ff9384; --sp-red-soft: #3d1f1d; } }

body.sp .nav { view-transition-name: sp-nav; }
body.sp .nav-bar { gap: 20px; }
.sp-tabs { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--w); box-shadow: var(--press); }
.sp-tabs a { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; color: var(--ink2); font-weight: 500; font-size: var(--fs-small); text-decoration: none; transition: background-color .25s, color .25s, box-shadow .25s; }
.sp-tabs a:hover { color: var(--ink); }
.sp-tabs a[aria-current='page'] { background: var(--p2); color: var(--ink); box-shadow: var(--lift-sm); font-weight: 600; }
.sp-tabs .i { width: 18px; height: 18px; }
.sp-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--b); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; }
.sp-badge.ur { background: var(--sp-red); }
.sp-badge:empty { display: none; }
.sp-me { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--p2); box-shadow: var(--lift-sm); color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; }
.sp-bell { position: relative; }
.sp-bell .sp-badge { position: absolute; top: 0; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; }
.sp .i { width: 20px; height: 20px; flex: none; }
.sp-dock { display: none; }
@media (max-width: 960px) {
  .sp-tabs { display: none; }
  body.sp { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .sp-dock { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; padding: 6px; border-radius: 28px; background: var(--p2); box-shadow: var(--ds-raised-card); view-transition-name: sp-dock; }
  .sp-dock a { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 0 6px; border-radius: 22px; color: var(--ink2); font-size: 14px; font-weight: 500; text-decoration: none; }
  .sp-dock a[aria-current='page'] { color: var(--ink); background: var(--w); box-shadow: var(--press); font-weight: 600; }
  .sp-dock .sp-badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 20px; height: 20px; }
  .sp-dock .i { width: 22px; height: 22px; }
}
@media (max-width: 520px) { body.sp .nav-act .btn { display: none; } }

/* Page frame */
.sp-main { padding: clamp(18px, 2.6vw, 36px) 0 clamp(64px, 7vw, 112px); min-height: 72vh; }
.sp-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.sp-head > div:first-child { min-width: 0; }
.sp-h1 { font-family: var(--display); font-weight: 400; font-size: clamp(52px, 5.6vw, 84px); line-height: .9; letter-spacing: .01em; text-wrap: balance; }
.sp-sub { margin: 10px 0 0; color: var(--ink2); font-size: var(--fs-lead); line-height: 1.4; max-width: 56ch; }
.sp-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; color: var(--ink2); font-size: var(--fs-small); font-weight: 600; }
.sp-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 0 6px -4px; padding: 0 4px; color: var(--ink2); font-size: var(--fs-small); font-weight: 600; text-decoration: none; border-radius: 12px; }
.sp-back:hover { color: var(--ink); }
.sp-back .i { width: 18px; height: 18px; transform: scaleX(-1); }
.sp-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--gap); align-items: start; }
.sp-cols.wide-aside { grid-template-columns: minmax(0, 1fr) 460px; }
@media (max-width: 1120px) { .sp-cols, .sp-cols.wide-aside { grid-template-columns: minmax(0, 1fr); } }
.sp-stack { display: grid; gap: 16px; align-content: start; min-width: 0; }
.sp-card { background: var(--p); border-radius: var(--r-lg); box-shadow: var(--ds-raised-card); padding: var(--pad); min-width: 0; }
.sp-card.tight { padding: 18px 20px; border-radius: var(--r); }
.sp-well { background: var(--w); border-radius: var(--r); box-shadow: var(--press); padding: 16px 18px; }
.sp-card > h2, .sp-h2 { font-family: var(--body); font-weight: 700; font-size: 20px; letter-spacing: -.01em; margin: 0 0 4px; }
.sp-note { margin: 0; color: var(--ink2); font-size: var(--fs-small); line-height: 1.5; }
.sp-sticky { position: sticky; top: calc(var(--nav-h) + 16px); }
@media (max-width: 1120px) { .sp-sticky { position: static; } }
.sp-sec-t { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 30px 0 14px; }
.sp-sec-t h2 { font-family: var(--body); font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.sp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sp-spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.sp-muted { color: var(--ink2); }
.sp-small { font-size: var(--fs-small); }
.sp-strong { font-weight: 700; }
.sp-red { color: var(--sp-red-text); }
.sp-gap { margin-top: 16px; }

/* Pills */
.sp-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--w); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.sp-pill .i { width: 16px; height: 16px; }
.sp-pill.ur { background: var(--sp-red); color: #fff; }
.sp-pill.ok { background: var(--olp); color: var(--old); }
.sp-pill.info { background: var(--grp); color: var(--grd); }
.sp-pill.blue { background: var(--bp); color: var(--bt); }
.sp-pill.mute { color: var(--ink2); }
.sp-pill.lock { background: transparent; color: var(--ink2); padding: 0; min-height: 0; }

/* Buttons and links */
.sp .btn[disabled], .sp .btn[aria-disabled='true'] { opacity: .5; pointer-events: none; }
.btn.sp-ur-btn { background: var(--sp-red); color: #fff; box-shadow: var(--btn); }
.btn.sp-ur-btn:hover { background: #a8261a; transform: translateY(-2px); }
.sp-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; font-size: var(--fs-small); text-decoration: underline; text-decoration-color: var(--u-line, rgba(42,42,41,.3)); text-underline-offset: 5px; text-decoration-thickness: 1.5px; cursor: pointer; }
.sp-link:hover { text-decoration-color: var(--b); }
.sp-link.danger { color: var(--sp-red-text); }
.sp :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid rgba(30,91,255,.6); outline-offset: 2px; }
.sp .field input:focus-visible, .sp .field select:focus-visible, .sp .field textarea:focus-visible, .sp .sp-in:focus-visible, .sp .sp-compose textarea:focus-visible { outline: none; }
.sp button { font: inherit; cursor: pointer; }

/* Inputs */
.sp-in { width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--w); box-shadow: var(--press); color: var(--ink); font: 600 var(--fs-body) var(--body); font-variant-numeric: tabular-nums; }
.sp-in:focus-visible { box-shadow: var(--press), var(--ring); }
.sp-in::placeholder { color: var(--ph, #6e6d68); font-weight: 500; }
.sp-lab { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink2); min-width: 0; }
.sp-step { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--w); box-shadow: var(--press); width: fit-content; }
.sp-step button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--p2); color: var(--ink); box-shadow: var(--lift-sm); font-size: 20px; font-weight: 600; line-height: 1; transition: transform .15s var(--ease); }
.sp-step button:active { transform: scale(.9); box-shadow: var(--press); }
.sp-step input { width: 52px; min-height: 36px; border: 0; background: transparent; color: var(--ink); text-align: center; font: 700 var(--fs-body) var(--body); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.sp-step input::-webkit-inner-spin-button, .sp-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sp-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--w); box-shadow: var(--press); width: fit-content; max-width: 100%; }
.sp-seg button, .sp-seg a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink2); font-size: var(--fs-small); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .25s, color .25s, box-shadow .25s, transform .15s var(--ease); }
.sp-seg button[aria-pressed='true'], .sp-seg a[aria-current='true'] { background: var(--p2); color: var(--ink); box-shadow: var(--lift-sm); font-weight: 600; }
.sp-seg button:active { transform: scale(.96); }
.sp-seg .n { color: var(--ink2); font-weight: 600; }
.sp-seg.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sp-seg.scroll::-webkit-scrollbar { display: none; }
.sp-seg button.ur[aria-pressed='true'] { background: var(--sp-red); color: #fff; }
.sp-switch { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; font-size: var(--fs-small); text-align: left; }
.sp-switch .track { position: relative; width: 52px; height: 30px; border-radius: 999px; background: var(--t); box-shadow: var(--press); transition: background-color .3s var(--ease); flex: none; }
.sp-switch .knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--p2); box-shadow: 2px 3px 6px rgba(110,118,134,.45); transition: transform .35s var(--ease); }
.sp-switch[aria-checked='true'] .track { background: var(--b); }
.sp-switch[aria-checked='true'] .knob { transform: translateX(22px); }
.sp-switch.ur[aria-checked='true'] .track { background: var(--sp-red); }

/* Thumbs */
.sp-th { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 16px; background: var(--w); box-shadow: var(--press); overflow: hidden; }
.sp-th img { width: 78%; height: 78%; object-fit: contain; }
.sp-th.sm { width: 40px; height: 40px; border-radius: 12px; }
.sp-th.mono { font-weight: 700; color: var(--ink2); font-size: 14px; }
.sp-thumbs { display: flex; }
.sp-thumbs .sp-th { width: 44px; height: 44px; border-radius: 50%; margin-left: -10px; box-shadow: var(--lift-sm); background: var(--p2); }
.sp-thumbs .sp-th:first-child { margin-left: 0; }

/* Lists */
.sp-list { display: grid; gap: 14px; }
.sp-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 18px 22px; border-radius: var(--r); background: var(--p); box-shadow: var(--ds-raised-card); color: inherit; text-decoration: none; transition: transform .3s var(--ease); }
a.sp-item:hover { transform: translateY(-2px); }
a.sp-item:active { transform: scale(.99); }
.sp-item .t { margin: 0; font-weight: 700; font-size: 18px; line-height: 1.3; }
.sp-item .m { margin: 4px 0 0; color: var(--ink2); font-size: var(--fs-small); line-height: 1.45; }
.sp-item .end { display: grid; justify-items: end; gap: 6px; text-align: right; }
.sp-item .end .chev { color: var(--ink2); }
.sp-item[hidden], .sp-alert[hidden] { display: none; }
.sp-item .acts { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) {
  .sp-item { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .sp-item .end { justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; align-items: center; }
  .sp-item .acts { grid-column: 1 / -1; }
}
.sp-empty { padding: 32px; text-align: center; color: var(--ink2); border-radius: var(--r); background: var(--w); box-shadow: var(--press); }

/* Urgent alert card */
.sp-alert { display: grid; gap: 14px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--p); box-shadow: var(--ds-raised-card); }
.sp-alert .top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.sp-alert .t { margin: 0; font-weight: 700; font-size: 20px; line-height: 1.3; }
.sp-alert .due { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.sp-alert .due b { font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1; color: var(--sp-red-text); letter-spacing: .01em; }
.sp-replies { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-replies .btn[aria-pressed='true'] { background: var(--ink); color: var(--g); }
.sp-done { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 16px; border-radius: 18px; background: var(--olp); color: var(--old); font-weight: 600; font-size: var(--fs-small); line-height: 1.45; }
.sp-done .i { margin-top: 1px; }
.sp-done.no { background: var(--w); color: var(--ink2); }
.sp-done .sp-link { min-height: 0; margin-left: auto; color: inherit; }

/* KPI tiles */
.sp-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sp-kpi { padding: 14px 16px; border-radius: 22px; background: var(--w); box-shadow: var(--press); }
.sp-kpi b { display: block; font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: .01em; }
.sp-kpi span { color: var(--ink2); font-size: 14px; font-weight: 600; }
.sp-kpis.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .sp-kpis.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Quote builder */
.qb { display: grid; gap: 14px; }
.qb-line { padding: 18px 20px; border-radius: var(--r); background: var(--p); box-shadow: var(--ds-raised-card); }
.qb-top { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px 16px; align-items: center; }
.qb-top .t { margin: 0; font-weight: 700; font-size: 17px; line-height: 1.3; }
.qb-top .m { margin: 2px 0 0; color: var(--ink2); font-size: var(--fs-small); }
.qb-fields { display: grid; grid-template-columns: auto minmax(110px, 1fr) auto minmax(110px, auto); gap: 12px 16px; align-items: end; margin-top: 16px; }
.qb-total { justify-self: end; text-align: right; font-size: 14px; color: var(--ink2); font-weight: 600; }
.qb-total b { display: block; color: var(--ink); font-size: 20px; font-weight: 700; }
.qb-priv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 14px 0 0; padding: 10px 14px; border-radius: 14px; background: var(--band); color: var(--ink2); font-size: 14px; font-weight: 500; }
.qb-priv b { color: var(--ink); }
.qb-priv b.short { color: var(--sp-red-text); }
.qb-sub, .qb-why { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.qb-why { grid-template-columns: minmax(0, 1fr); }
.qb-line[data-mode='no'] .qb-top .t, .qb-line[data-mode='no'] .qb-top .m { color: var(--ink2); }
.qb-line[data-mode='no'] .qb-top .t { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.qb-line[data-mode='no'] .qb-fields, .qb-line[data-mode='no'] .qb-priv, .qb-line[data-mode='no'] .qb-sub { display: none; }
.qb-line[data-mode='quote'] .qb-sub, .qb-line[data-mode='quote'] .qb-why, .qb-line[data-mode='sub'] .qb-why { display: none; }
.qb-line .qb-subname { display: none; }
.qb-line[data-mode='sub'] .qb-subname { display: block; margin: 4px 0 0; color: var(--grd); font-size: 14px; font-weight: 600; }
@media (max-width: 760px) {
  .qb-top { grid-template-columns: 48px minmax(0, 1fr); }
  .qb-top .sp-th { width: 48px; height: 48px; }
  .qb-top .sp-seg { grid-column: 1 / -1; width: 100%; }
  .qb-top .sp-seg button { flex: 1; justify-content: center; padding: 0 8px; }
  .qb-fields { grid-template-columns: auto minmax(0, 1fr); }
  .qb-total { grid-column: 1 / -1; justify-self: stretch; display: flex; justify-content: space-between; align-items: baseline; text-align: left; }
  .qb-sub { grid-template-columns: minmax(0, 1fr); }
}
.qb-bar { position: sticky; bottom: 16px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 20px; padding: 12px 12px 12px 26px; border-radius: 999px; background: var(--p2); box-shadow: var(--ds-raised-card); }
.qb-bar .sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; font-size: var(--fs-small); color: var(--ink2); font-weight: 600; }
.qb-bar .sum b { color: var(--ink); font-size: 22px; font-weight: 700; }
@media (max-width: 960px) { .qb-bar { bottom: calc(96px + env(safe-area-inset-bottom)); border-radius: 26px; padding: 14px 14px 14px 18px; } .qb-bar .sp-acts { width: 100%; } .qb-bar .sp-acts .btn { flex: 1; } }
.sp-lines { display: grid; }
.sp-lines > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 10px 14px; border-radius: 12px; font-size: var(--fs-small); }
.sp-lines > div:nth-child(odd) { background: var(--band); }
.sp-lines .tot { font-weight: 700; font-size: var(--fs-body); }

/* Brief */
.sp-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 20px; margin: 16px 0 0; }
.sp-dl dt { color: var(--ink2); font-size: 14px; font-weight: 600; }
.sp-dl dd { margin: 2px 0 0; font-weight: 600; }
.sp-file { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; border-radius: 16px; background: var(--w); box-shadow: var(--press); color: inherit; text-decoration: none; text-align: left; font-weight: 600; font-size: var(--fs-small); }
.sp-file small { display: block; color: var(--ink2); font-weight: 500; font-size: 14px; }

/* Chat */
.sp-chat { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.sp-threads { display: grid; gap: 6px; padding: 10px; border-radius: var(--r-lg); background: var(--p); box-shadow: var(--ds-raised-card); }
.sp-thread { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; width: 100%; padding: 12px 14px; border: 0; border-radius: 22px; background: transparent; color: inherit; text-align: left; transition: background-color .2s; }
.sp-thread:hover { background: var(--band); }
.sp-thread[aria-current='true'] { background: var(--w); box-shadow: var(--press); }
.sp-thread .sp-th { grid-row: span 2; }
.sp-thread .t { font-weight: 700; font-size: var(--fs-small); min-width: 0; }
.sp-thread .m { grid-column: 2 / 4; color: var(--ink2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-thread .when { color: var(--ink2); font-size: 14px; }
.sp-convo { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 600px; padding: 0; overflow: hidden; }
.sp-convo-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 16px 22px; background: var(--band); }
.sp-msgs { display: flex; flex-direction: column; gap: 10px; padding: 22px; overflow-y: auto; max-height: 62vh; }
.sp-msg { max-width: min(78%, 560px); padding: 12px 16px; border-radius: 20px 20px 20px 6px; background: var(--w); font-size: var(--fs-small); line-height: 1.5; align-self: flex-start; }
.sp-msg .who { display: block; margin-bottom: 2px; font-weight: 700; font-size: 14px; color: var(--ink2); }
.sp-msg.me { align-self: flex-end; border-radius: 20px 20px 6px 20px; background: var(--b); color: #fff; }
.sp-msg.me .who { color: rgba(255,255,255,.88); }
.sp-msg.all { background: var(--grp); color: var(--ink); }
.sp-msg.sys { align-self: center; max-width: 92%; background: transparent; color: var(--ink2); text-align: center; padding: 4px 8px; font-size: 14px; }
.sp-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; padding: 14px; background: var(--band); }
.sp-compose textarea { width: 100%; min-height: 52px; max-height: 160px; padding: 14px 16px; border: 0; border-radius: 22px; background: var(--w); box-shadow: var(--press); color: var(--ink); font: 500 var(--fs-small)/1.5 var(--body); resize: none; }
.sp-compose textarea:focus-visible { box-shadow: var(--press), var(--ring); }
.sp-chat-back { display: none; }
@media (max-width: 900px) {
  .sp-chat { grid-template-columns: minmax(0, 1fr); }
  .sp-chat[data-view='list'] .sp-convo, .sp-chat[data-view='thread'] .sp-threads { display: none; }
  .sp-convo { min-height: 0; }
  .sp-msgs { max-height: none; }
  .sp-chat-back { display: inline-flex; }
}

/* Tables (kit) */
.sp-table { display: grid; gap: 2px; }
.sp-tr { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr) 80px 96px 80px minmax(0, 1.1fr) 150px; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 16px; }
.sp-tr:nth-child(even) { background: var(--band); }
.sp-tr.th { color: var(--ink2); font-size: 14px; font-weight: 600; padding-top: 4px; padding-bottom: 8px; }
.sp-tr .nm { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sp-tr .nm b { display: block; font-size: var(--fs-small); line-height: 1.3; }
.sp-tr .nm small { display: block; color: var(--ink2); font-size: 14px; }
.sp-tr .c { font-size: var(--fs-small); min-width: 0; }
.sp-tr .c.num { font-weight: 700; }
.sp-tr[hidden] { display: none; }
.sp-tr .lo { color: var(--sp-red-text); }
@media (max-width: 980px) {
  .sp-tr.th { display: none; }
  .sp-tr { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px; background: var(--p); box-shadow: var(--ds-raised-card); border-radius: 22px; margin-bottom: 10px; }
  .sp-tr:nth-child(even) { background: var(--p); }
  .sp-tr .nm { grid-column: 1 / -1; }
  .sp-tr .c[data-l]::before { content: attr(data-l); display: block; color: var(--ink2); font-size: 14px; font-weight: 600; }
  .sp-tr .act { grid-column: 1 / -1; }
}

/* Connectors */
.sp-conns { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.sp-conn { display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: var(--r); background: var(--p); box-shadow: var(--ds-raised-card); }
.sp-conn .hd { display: flex; align-items: center; gap: 12px; }
.sp-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--w); box-shadow: var(--press); font-weight: 800; font-size: 14px; letter-spacing: .02em; color: var(--ink); flex: none; }
.sp-conn .nm { font-weight: 700; line-height: 1.25; }
.sp-conn .nm small { display: block; color: var(--ink2); font-size: 14px; font-weight: 500; }
.sp-conn .acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.sp-spin .i { animation: sp-spin 1s linear infinite; }
@keyframes sp-spin { to { rotate: 360deg; } }

/* Timeline */
.sp-tl { list-style: none; margin: 0; padding: 0; display: grid; }
.sp-tl li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
.sp-tl li::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--t); border-radius: 2px; }
.sp-tl li:last-child { padding-bottom: 0; }
.sp-tl li:last-child::before { display: none; }
.sp-tl .dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--w); box-shadow: var(--press); color: var(--ink2); }
.sp-tl .dot .i { width: 16px; height: 16px; }
.sp-tl li.done .dot { background: var(--olp); color: var(--old); box-shadow: none; }
.sp-tl li.now .dot { background: var(--b); color: #fff; box-shadow: none; }
.sp-tl b { display: block; font-size: var(--fs-small); }
.sp-tl span { color: var(--ink2); font-size: 14px; }
.sp-track { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-track i { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: var(--w); color: var(--ink2); font-style: normal; font-size: 14px; font-weight: 600; }
.sp-track i.done { background: var(--olp); color: var(--old); }
.sp-track i.now { background: var(--bp); color: var(--bt); }

/* Settings and forms */
.sp-set { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.sp-setnav { position: sticky; top: calc(var(--nav-h) + 16px); display: grid; gap: 4px; padding: 8px; border-radius: var(--r-lg); background: var(--w); box-shadow: var(--press); }
.sp-setnav a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 999px; color: var(--ink2); font-weight: 500; font-size: var(--fs-small); text-decoration: none; white-space: nowrap; }
.sp-setnav a:hover { color: var(--ink); }
.sp-setnav a[aria-current='true'] { background: var(--p2); color: var(--ink); box-shadow: var(--lift-sm); font-weight: 600; }
@media (max-width: 900px) { .sp-set { grid-template-columns: minmax(0, 1fr); } .sp-setnav { position: sticky; top: calc(var(--nav-h) - 4px); z-index: 10; display: flex; overflow-x: auto; border-radius: 999px; scrollbar-width: none; } .sp-setnav::-webkit-scrollbar { display: none; } .sp-setnav a { flex: none; } }
.sp-set section { scroll-margin-top: calc(var(--nav-h) + 72px); }
.sp-opts { display: grid; gap: 4px; margin-top: 12px; }
.sp-opt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 12px 14px; border-radius: 16px; }
.sp-opt:nth-child(even) { background: var(--band); }
.sp-opt > div { min-width: 0; flex: 1 1 240px; }
.sp-opt b { display: block; font-size: var(--fs-small); }
.sp-opt span { color: var(--ink2); font-size: 14px; }
.sp-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin-top: 16px; }
.sp-form .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .sp-form { grid-template-columns: minmax(0, 1fr); } }
textarea.sp-in { min-height: 96px; padding: 12px 14px; line-height: 1.5; font-weight: 500; resize: vertical; }
select.sp-in { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink2) 50%), linear-gradient(135deg, var(--ink2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.sp-lab .err { color: var(--sp-red-text); font-weight: 600; }
.sp-lab.bad .sp-in { background: var(--sp-red-soft); }
.sp-drop { position: relative; display: grid; justify-items: center; gap: 8px; padding: 26px 18px; border-radius: var(--r); background: var(--w); box-shadow: var(--press); text-align: center; color: var(--ink2); font-size: var(--fs-small); cursor: pointer; transition: background-color .2s; }
.sp-drop:hover, .sp-drop.over { background: var(--t); }
.sp-drop b { color: var(--ink); }
.sp-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sp-drop.done { background: var(--olp); color: var(--old); }
.sp-drop.done b { color: var(--old); }
.sp-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: s; }
.sp-steps li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 6px; border-radius: 999px; background: var(--w); color: var(--ink2); font-size: var(--fs-small); font-weight: 600; counter-increment: s; }
.sp-steps li::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--p2); color: var(--ink2); box-shadow: var(--lift-sm); font-size: 14px; }
.sp-steps li.now { background: var(--bp); color: var(--bt); }
.sp-steps li.now::before { background: var(--b); color: #fff; box-shadow: none; }
.sp-steps li.done { background: var(--olp); color: var(--old); }
.sp-steps li.done::before { content: '\2713'; background: var(--old); color: var(--olp); box-shadow: none; }
.sp-pane[hidden] { display: none; }

/* VAT invoice: always white paper, in light and dark. */
.sp-inv { --iv-ink: #1d1d1b; --iv-ink2: #5a5955; --iv-band: rgba(0,0,0,.045); color-scheme: light; display: grid; gap: 22px; padding: clamp(22px, 3vw, 44px); border-radius: 14px; background: #ffffff; color: var(--iv-ink); font-size: 14px; line-height: 1.5; box-shadow: 0 34px 60px -34px rgba(20,24,32,.5), 0 2px 10px rgba(20,24,32,.08); }
.sp-inv .iv-m { color: var(--iv-ink2); }
.sp-inv .iv-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; }
.sp-inv .iv-from { display: flex; gap: 12px; align-items: flex-start; }
.sp-inv .iv-from b { display: block; font-size: 16px; }
.sp-inv .iv-mono { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: #1d1d1b; color: #fff; font-weight: 800; }
.sp-inv h3 { font-family: var(--display); font-weight: 400; font-size: 40px; line-height: .95; letter-spacing: .02em; text-align: right; color: var(--iv-ink); }
.sp-inv .iv-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 18px; margin: 0; }
.sp-inv .iv-meta dt { color: var(--iv-ink2); font-weight: 600; }
.sp-inv .iv-meta dd { margin: 2px 0 0; font-weight: 600; }
.sp-inv .iv-lines > div { display: grid; grid-template-columns: minmax(0, 1fr) 48px 96px 104px; gap: 10px; padding: 8px 10px; border-radius: 8px; }
.sp-inv .iv-lines > div:nth-child(even) { background: var(--iv-band); }
.sp-inv .iv-lines .h { color: var(--iv-ink2); font-weight: 700; }
.sp-inv .iv-lines .r { text-align: right; font-variant-numeric: tabular-nums; }
.sp-inv .iv-sum { display: grid; justify-items: end; gap: 4px; }
.sp-inv .iv-sum > div { display: grid; grid-template-columns: auto 120px; gap: 16px; text-align: right; }
.sp-inv .iv-sum .tot { font-weight: 800; font-size: 20px; padding-top: 6px; }
.sp-inv .iv-pay { padding: 14px 16px; border-radius: 10px; background: var(--iv-band); }
.sp-inv .iv-foot { display: flex; align-items: baseline; gap: .35em; margin: 0; color: var(--iv-ink2); font-size: 13px; }
.sp-inv .iv-foot img { display: inline-block; height: .78em; width: auto; vertical-align: -0.02em; }
.sp-inv .iv-foot[hidden] { display: none; }
.sp-inv .iv-stamp { justify-self: start; display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: #e3ecd9; color: #2e6a44; font-weight: 700; }
.sp-inv .iv-stamp[hidden] { display: none; }
@media (max-width: 560px) { .sp-inv .iv-lines > div { grid-template-columns: minmax(0, 1fr) 36px 92px; } .sp-inv .iv-lines > div > :nth-child(3) { display: none; } .sp-inv h3 { text-align: left; } }
@media print {
  body.sp .nav, body.sp .foot, body.sp .sp-dock, body.sp .sp-noprint { display: none !important; }
  body.sp { background: #fff !important; padding: 0 !important; }
  body.sp .sp-cols { display: block; }
  .sp-inv { box-shadow: none; }
}

/* Phone-first urgent page */
.sp-urg { max-width: 680px; margin: 0 auto; display: grid; gap: 16px; }
.sp-urg .sp-alert .due b { font-size: clamp(56px, 12vw, 84px); }
.sp-urg .sp-replies { display: grid; grid-template-columns: minmax(0, 1fr); }
.sp-urg .sp-replies .btn { --h: 60px; justify-content: flex-start; padding: 0 22px; font-size: var(--fs-body); }

/* Toast */
.sp-toast { position: fixed; left: 0; right: 0; bottom: 28px; z-index: 80; display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
.sp-toast > div { display: flex; align-items: center; gap: 12px; max-width: 640px; padding: 12px 12px 12px 22px; border-radius: 999px; background: var(--ink); color: var(--g); font-weight: 600; font-size: var(--fs-small); box-shadow: 0 18px 40px -18px rgba(0,0,0,.5); pointer-events: auto; animation: sp-rise .3s var(--ease) both; }
.sp-toast > div:not(:has(button)) { padding-right: 22px; }
.sp-toast button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(127,127,127,.28); color: inherit; font-weight: 700; }
.sp-toast.out > div { animation: sp-sink .22s var(--ease) both; }
@media (max-width: 960px) { .sp-toast { bottom: calc(100px + env(safe-area-inset-bottom)); } }

/* Motion: things condense out of the clay; nothing cuts. */
@keyframes sp-rise { from { opacity: 0; filter: blur(6px); translate: 0 8px; } }
@keyframes sp-sink { to { opacity: 0; filter: blur(6px); translate: 0 6px; } }
html.js body.sp [data-rise] { animation: sp-rise .34s var(--ease) both; animation-delay: calc(min(var(--i, 0), 8) * 30ms); }
body.sp .sp-in-anim { animation: sp-rise .32s var(--ease) both; }
body.sp .sp-out-anim { animation: sp-sink .2s var(--ease) both; }
::view-transition-group(sp-nav), ::view-transition-group(sp-dock) { animation-duration: 0s; }
@media (prefers-reduced-motion: reduce) { body.sp [data-rise], body.sp .sp-in-anim, body.sp .sp-out-anim, .sp-toast > div { animation: none !important; } }

/* -- supplier: pass 2 additions -- */
.sp-lk-d { display: none; }
[data-theme='dark'] .sp-lk-l { display: none; }
[data-theme='dark'] .sp-lk-d { display: inline-block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .sp-lk-l { display: none; } :root:not([data-theme='light']) .sp-lk-d { display: inline-block; } }
.sp-big { font-family: var(--display); font-size: 56px; line-height: 1; margin: 0; }
.sp-narrow { max-width: 760px; margin-inline: auto; }
@media (max-width: 760px) { .sp-hide-sm { display: none !important; } }
a.btn[aria-disabled='true'] { pointer-events: none; opacity: .45; }
.sp-takeimg { width: 72px; height: 72px; border-radius: 16px; object-fit: contain; background: var(--w); box-shadow: var(--press); flex: none; }
.sp-seg.wrap { flex-wrap: wrap; overflow: visible; }
.sp-search { position: relative; display: flex; align-items: center; min-width: min(280px, 100%); }
.sp-search .i { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--ink2); pointer-events: none; }
.sp-search .sp-in { padding-left: 42px; width: 100%; }
.sp-invline { display: grid; grid-template-columns: minmax(0, 1fr) 72px 104px 116px 44px; gap: 10px; align-items: end; }
.sp-invline .sp-lt { display: flex; align-items: center; min-height: 44px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .sp-invline { grid-template-columns: 1fr 1fr; padding: 14px; border-radius: 18px; background: var(--band); } .sp-invline > :first-child { grid-column: 1 / -1; } }
.sp-inv.mini { padding: 16px 20px; gap: 8px; }
.sp-link.danger { color: var(--sp-red-text); }
.sp-cols.inv { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
@media (max-width: 1120px) { .sp-cols.inv { grid-template-columns: minmax(0, 1fr); } }

/* ==== SUPPLIER APP :: end ==== */

/* >>> buyer_app: buyer pages (request, dashboard, requests, bid, compare, messages, invoices, invoice, notifications, settings, onboarding).
   Every selector is scoped to body[data-app="buyer"] or prefixed .bx-. Tokens come from site.css. Separation by tone and space, never borders. */

/* Page-to-page: the header stays put, content cross-fades through the clay. */
@view-transition { navigation: auto; }
body[data-app="buyer"] .bx-nav { view-transition-name: bx-nav; }
::view-transition-group(bx-nav) { animation: none; }
::view-transition-old(bx-nav), ::view-transition-new(bx-nav) { animation: none; }
html:has(body[data-app="buyer"])::view-transition-old(root) { animation: bx-sink .16s cubic-bezier(.22,1,.3,1) both; }
html:has(body[data-app="buyer"])::view-transition-new(root) { animation: bx-rise .26s cubic-bezier(.22,1,.3,1) .04s both; }
@keyframes bx-sink { to { opacity: 0; filter: blur(4px); } }
@keyframes bx-rise { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } }
html.bx-motion .bx-in { animation: bx-rise .42s cubic-bezier(.22,1,.3,1) both; animation-delay: calc(var(--i, 0) * 40ms); }
@media (prefers-reduced-motion: reduce) { html.bx-motion .bx-in { animation: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } }
.bx-breathe { animation: bx-breathe 1.8s ease-in-out infinite; }
@keyframes bx-breathe { 50% { opacity: .55; } }
html:not(.bx-motion) .bx-breathe { animation: none; }

body[data-app="buyer"] { min-height: 100vh; display: flex; flex-direction: column; }
body[data-app="buyer"] .bx-main { flex: 1 0 auto; padding-bottom: clamp(48px, 6vw, 96px); }
body[data-app="buyer"] .bx-main:focus { outline: none; }
body[data-app="buyer"] .bx-main a:not(.btn):not(.link):not(.icon-btn):not(.bx-rq):not(.bx-tr):not([role="menuitem"]):not(.bx-role) { color: var(--bt); text-underline-offset: 3px; }
body[data-app="buyer"] :focus-visible { outline: 3px solid var(--b); outline-offset: 2px; border-radius: 10px; }
.bx-links a { gap: 6px; }
.bx-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--b); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.bx-bell { position: relative; }
.bx-pip { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--ur); box-shadow: 0 0 0 2px var(--g); }
.bx-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--p2); box-shadow: var(--lift-sm); color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.bx-nav .icon-btn[aria-current] { color: var(--ink); background: var(--w); }
@media (max-width: 1100px) { .bx-post span { display: none; } .bx-post { padding: 0 12px; } }
@media (max-width: 520px) { .bx-nav .theme-btn, .bx-nav .bx-me { display: none; } .bx-nav .nav-bar { gap: 8px; } .bx-nav .brand img { width: 128px; height: auto; } }

/* Heads */
.bx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(18px, 2.4vw, 32px); }
.bx-head-t { min-width: 0; flex: 1 1 420px; }
.bx-title { font-family: var(--display); font-size: clamp(44px, 5.4vw, 80px); line-height: .92; letter-spacing: .01em; text-wrap: balance; }
.bx-sub { margin-top: 12px; font-size: var(--fs-lead); line-height: 1.4; color: var(--ink2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.bx-sub .muted { font-size: var(--fs-body); }
.bx-head-act { display: flex; flex-wrap: wrap; gap: 10px; }
.bx-crumb { padding-top: 18px; margin-bottom: -18px; }
.bx-crumb .link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); }
.bx-crumb .link .i { margin: 0; order: -1; }
.bx-h2 { font-family: var(--display); font-size: clamp(32px, 3vw, 44px); line-height: 1; }
.bx-h3 { font-family: var(--body); font-size: var(--fs-lead); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.bx-h3 .i { color: var(--old); }
.bx-pad { padding: var(--pad); display: grid; gap: 16px; align-content: start; }
.bx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.bx-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bx-sec-h .link { min-height: 0; padding: 0; font-size: var(--fs-small); }
.bx-big { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.bx-empty { display: flex; align-items: center; gap: 10px; padding: 22px 4px; color: var(--ink2); }
.bx-empty .i { color: var(--old); }
.bx-money { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-small); line-height: 1.45; color: var(--ink2); }
.bx-money .i { color: var(--old); width: 20px; height: 20px; margin-top: 1px; }
.bx-money strong { color: var(--ink); }
.bx-urgent { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--urp); color: var(--ur); font-weight: 600; font-size: var(--fs-small); }
.bx-inl { min-height: 0; padding: 0; font-size: inherit; }

/* Status words: colour and weight, no pills */
.bx-st { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 700; }
.bx-st .i { width: 16px; height: 16px; }
.bx-info { color: var(--grd); } .bx-act { color: var(--bt); } .bx-ok { color: var(--old); } .bx-mut { color: var(--ink2); } .bx-bad { color: var(--err); }

/* Steps (words joined by a groove, no numbers) */
.bx-steps { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0 0 24px; padding: 0; list-style: none; font-size: var(--fs-small); font-weight: 600; color: var(--ink2); }
.bx-steps li { display: flex; align-items: center; }
.bx-steps li + li::before { content: ""; width: clamp(24px, 5vw, 64px); height: 4px; margin: 0 12px; border-radius: 4px; background: var(--t); box-shadow: var(--press); }
.bx-steps li.done { color: var(--old); }
.bx-steps li.done + li::before { background: var(--ol); box-shadow: none; }
.bx-steps li[aria-current] { color: var(--ink); }

/* Request page */
.bx-req { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap); align-items: start; }
.bx-req-main { display: grid; gap: var(--gap); min-width: 0; }
.bx-req-side { position: sticky; top: calc(var(--nav-h) + 16px); }
.bx-sum { display: grid; gap: 18px; padding: var(--pad); border-radius: var(--r-lg); background: var(--p); }
.bx-form .form-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; }
.bx-form .field label .muted { font-weight: 500; }
.bx-form .fld-urg { align-content: end; }
.bx-form .city-other { display: block; margin-top: 8px; }
.bx-form .field .hint a { font-weight: 600; }
.bx-as { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--ink2); }
.bx-as strong { color: var(--ink); }
.bx-resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px var(--pad); }
.bx-dl { display: grid; gap: 0; margin: 0; }
.bx-dl > div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 10px 0; }
.bx-dl > div:nth-child(odd) { background: var(--band); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 10px; }
.bx-dl dt { font-size: var(--fs-small); color: var(--ink2); font-weight: 500; }
.bx-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.bx-files { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.bx-files li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px 4px 12px; border-radius: var(--r-sm); background: var(--w); font-size: var(--fs-small); font-weight: 600; }
.bx-files li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-files img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.bx-tidy { display: grid; gap: 14px; margin-top: 12px; padding: 18px; border-radius: var(--r); background: var(--w); }
.bx-tsteps { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--ink2); font-weight: 600; }
.bx-tsteps li.on { color: var(--ink); }
.bx-tsteps li.ok { color: var(--old); }
.bx-tlines { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bx-tlines li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 6px 0; }
.bx-tlines .cat, .bx-cat { font-size: var(--fs-small); font-weight: 700; color: var(--grd); }
.bx-review { display: grid; gap: var(--gap); }
.bx-rv-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bx-lines { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.bx-lgrp { display: grid; gap: 8px; }
.bx-lgrp > ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bx-line { display: grid; grid-template-columns: 1fr 140px 44px; gap: 8px; align-items: center; }
.bx-lines-ro .bx-line { display: block; padding: 8px 12px; border-radius: 10px; }
.bx-lines-ro .bx-line:nth-child(odd) { background: var(--band); }
.bx-line input, .bx-line select, .bx-addline input, .bx-search input, .bx-mini, .bx-compose textarea { width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: var(--w); box-shadow: var(--press); font-size: var(--fs-body); }
.bx-line select, .bx-mini { appearance: none; font-size: var(--fs-small); font-weight: 600; background-image: linear-gradient(45deg, transparent 50%, var(--ink2) 50%), linear-gradient(135deg, var(--ink2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.bx-addline { display: flex; gap: 10px; align-items: center; }
.bx-addline .ta { flex: 1; min-width: 0; }
.bx-invited { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bx-invited li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fs-small); }
.bx-invited li span { flex: 1; }
.bx-invited .link { min-height: 0; padding: 0; font-size: var(--fs-small); }
.bx-post-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bx-posted .saved-top, .bx-onb-f .saved-top { display: flex; align-items: center; gap: 12px; }
.bx-posted .saved-top .i, .bx-onb-f .saved-top .i { width: 34px; height: 34px; color: var(--old); }

/* Status track */
.bx-track { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); font-weight: 600; color: var(--ink2); }
.bx-track li { display: flex; align-items: center; }
.bx-track li + li::before { content: ""; width: clamp(18px, 3vw, 44px); height: 4px; margin: 0 10px; border-radius: 4px; background: var(--t); box-shadow: var(--press); }
.bx-track li.done { color: var(--old); }
.bx-track li.done + li::before { background: var(--ol); box-shadow: none; }
.bx-track li.now { color: var(--ink); }
.bx-track-l { margin-bottom: clamp(20px, 2.4vw, 32px); }

/* Dashboard */
.bx-dash { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap); align-items: start; }
.bx-needs, .bx-open { grid-column: 1; display: grid; gap: 12px; }
.bx-dash-side { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: var(--gap); position: sticky; top: calc(var(--nav-h) + 16px); }
.bx-acts { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bx-act a { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px 22px; border-radius: var(--r); background: var(--p2); box-shadow: var(--lift-sm); text-decoration: none; color: var(--ink) !important; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.bx-act a:hover { transform: translateY(-1px); }
.bx-act a:active { transform: scale(.99); box-shadow: var(--press); }
.bx-act a > .i { width: 26px; height: 26px; color: var(--grd); }
.bx-act-p a > .i { color: var(--bt); }
.bx-act-t { display: grid; gap: 2px; min-width: 0; }
.bx-act-t .muted { font-size: var(--fs-small); }
.bx-act-a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 700; color: var(--bt); white-space: nowrap; }
.bx-reqs { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bx-rq { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 150px) 22px; gap: 16px; align-items: center; padding: 16px 20px; border-radius: var(--r); text-decoration: none; color: var(--ink); background: var(--p); transition: background-color .2s, box-shadow .25s var(--ease), transform .25s var(--ease); }
.bx-rq:hover { background: var(--p2); box-shadow: var(--lift-sm); }
.bx-rq:active { box-shadow: var(--press); transform: scale(.995); }
.bx-rq-t, .bx-rq-s { display: grid; gap: 2px; min-width: 0; }
.bx-rq-t .muted, .bx-rq-s .muted { font-size: var(--fs-small); }
.bx-rq-n { text-align: right; font-weight: 700; white-space: nowrap; }
.bx-rq-n .muted { font-weight: 500; font-size: var(--fs-small); }
.bx-go { color: var(--ink2); transition: transform .25s var(--ease); }
.bx-rq:hover .bx-go { transform: translateX(3px); color: var(--bt); }
.bx-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin: 0; }
.bx-kpis dt { font-size: var(--fs-small); color: var(--ink2); font-weight: 500; }
.bx-kpis dd { margin: 4px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.bx-kpis-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.bx-kpis-row .card { padding: 20px var(--pad); }
.bx-feed { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.bx-feed a { display: grid; gap: 2px; padding: 10px 12px; margin: 0 -12px; border-radius: 12px; text-decoration: none; color: var(--ink2) !important; font-size: var(--fs-small); }
.bx-feed a.unread { color: var(--ink) !important; font-weight: 600; }
.bx-feed a:hover { background: var(--band); }

/* Lists, search, segments */
.bx-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-bottom: 18px; }
.bx-search { position: relative; flex: 1 1 280px; max-width: 460px; }
.bx-search .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink2); pointer-events: none; }
.bx-search input { padding-left: 42px; }
.bx-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 26px; background: var(--w); box-shadow: var(--press); }
.bx-seg button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font-size: var(--fs-small); font-weight: 600; color: var(--ink2); transition: background-color .2s, box-shadow .25s var(--ease), color .2s; }
.bx-seg button[aria-checked="true"] { background: var(--p2); box-shadow: var(--lift-sm); color: var(--ink); }
.bx-narrow { max-width: calc(860px + 2 * var(--gut)); margin-left: 0; }

/* Request workspace */
.bx-bid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap); align-items: start; }
.bx-bid-main, .bx-bid-side { display: grid; gap: var(--gap); min-width: 0; }
.bx-qcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.bx-qc { display: grid; gap: 4px; align-content: start; padding: 18px 20px; border-radius: var(--r); background: var(--w); }
.bx-qc h3 { font-family: var(--body); font-size: var(--fs-body); font-weight: 700; }
.bx-qc-n { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.bx-qc .small .i { color: var(--old); }
.bx-qc.chosen { background: var(--olp); }
.bx-qc-wait .bx-qc-n { font-size: var(--fs-body); color: var(--ink2); font-weight: 600; }
.bx-orig summary { cursor: pointer; font-weight: 600; font-size: var(--fs-small); color: var(--bt); min-height: 44px; display: flex; align-items: center; }
.bx-orig p { white-space: pre-line; color: var(--ink2); }
.bx-sup { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bx-sup li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.bx-sup li > span { display: grid; gap: 2px; }
.bx-tl { display: grid; gap: 12px; margin: 0; padding: 0 0 0 22px; list-style: none; position: relative; }
.bx-tl::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--t); }
.bx-tl li { display: grid; gap: 2px; position: relative; font-size: var(--fs-small); }
.bx-tl li::before { content: ""; position: absolute; left: -22px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--ol); }
.bx-more { position: relative; }
.bx-more summary { list-style: none; }
.bx-more summary::-webkit-details-marker { display: none; }
.bx-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; display: grid; min-width: 250px; padding: 8px; border-radius: var(--r); background: var(--p2); box-shadow: var(--ds-raised-card); }
.bx-more[open] .bx-menu { animation: bx-rise .25s var(--ease) both; }
.bx-menu > * { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: none; text-align: left; text-decoration: none; color: var(--ink) !important; font-size: var(--fs-small); font-weight: 600; }
.bx-menu > *:hover { background: var(--w); }
.bx-warn { margin-bottom: var(--gap); background: var(--urp); }
.bx-danger { background: var(--err); }
:root[data-theme="dark"] .bx-danger { color: #1b0d0a; }

/* Compare */
.bx-cmp-w { overflow-x: auto; padding: 8px 0; overscroll-behavior-x: contain; }
.bx-cmp { min-width: calc(220px + var(--n, 3) * 150px); }
.bx-cr { display: grid; grid-template-columns: minmax(200px, 1.5fr) repeat(var(--n, 3), minmax(140px, 1fr)); align-items: stretch; }
.bx-cr > * { padding: 12px 16px; }
.bx-cr:not(.bx-cr-h):not(.bx-cr-c):nth-child(even) { background: var(--band); }
.bx-cl { position: sticky; left: 0; z-index: 1; background: var(--p); font-weight: 500; }
.bx-cr:not(.bx-cr-h):not(.bx-cr-c):nth-child(even) .bx-cl { background: linear-gradient(var(--band), var(--band)), var(--p); }
.bx-cr-h > * { display: grid; gap: 2px; align-content: end; font-size: var(--fs-small); font-weight: 600; color: var(--ink2); }
.bx-cr-h > .bx-cc { justify-items: end; text-align: right; }
.bx-cr-h strong { color: var(--ink); font-size: var(--fs-body); }
.bx-cr-c { grid-template-columns: 1fr; }
.bx-cr-c .bx-cl { padding-top: 18px; padding-bottom: 4px; font-size: var(--fs-small); font-weight: 700; color: var(--grd); background: transparent; position: static; }
.bx-cc { text-align: right; display: grid; justify-items: end; align-content: center; gap: 2px; }
.bx-cc.none { color: var(--ink2); font-size: var(--fs-small); }
.bx-cc.low { color: var(--old); font-weight: 700; grid-template-columns: auto auto; justify-content: end; align-items: center; column-gap: 6px; }
.bx-cc.low .i { width: 16px; height: 16px; }
.bx-cc.low .bx-subn { grid-column: 1 / -1; }
.bx-cc.chosen { background: color-mix(in srgb, var(--olp) 70%, transparent); }
.bx-subn { display: block; font-size: 13px; line-height: 1.3; color: var(--ur); font-weight: 600; text-align: right; max-width: 22ch; }
.bx-cr-t > * { font-size: 21px; padding-top: 16px; padding-bottom: 16px; }
.bx-cr-t .bx-cl { font-size: var(--fs-small); font-weight: 700; }
/* A lowest total that leaves lines out carries the caution tone, like the partial supplier on the home comparison. */
.bx-cr-t .bx-part { color: var(--ur); font-weight: 600; }
.bx-cr-note .bx-cc { text-align: left; justify-items: start; }
.bx-cr-act > * { padding-top: 14px; padding-bottom: 14px; }
.bx-cr-act .btn[aria-pressed="true"] { background: var(--b); color: #fff; }
.bx-decide { margin-top: var(--gap); }
.bx-decide:empty { display: none; }
.bx-confirm { max-width: 760px; }
.bx-next { display: grid; gap: 8px; margin: 0; padding: 0 0 0 20px; }
.bx-ms { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bx-ms li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--r-sm); background: var(--w); }
.bx-ms li > span { display: grid; gap: 2px; }
.bx-ms li.done { background: var(--olp); }
.bx-ms li.done > .i { color: var(--old); width: 24px; height: 24px; }

/* Messages */
.bx-msg { display: grid; grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr); gap: var(--gap); padding-top: clamp(20px, 3vw, 40px); height: calc(100vh - var(--nav-h) - 24px); min-height: 520px; }
.bx-threads { display: grid; grid-template-rows: auto 1fr; gap: 12px; padding: 16px; min-height: 0; }
.bx-threads .bx-search { max-width: none; flex: none; }
.bx-threads ul { display: grid; align-content: start; gap: 4px; margin: 0; padding: 0; list-style: none; overflow: auto; min-height: 0; }
.bx-threads a { position: relative; display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-sm); text-decoration: none; color: var(--ink) !important; }
.bx-threads a:hover { background: var(--band); }
.bx-threads a[aria-current] { background: var(--p2); box-shadow: var(--lift-sm); }
.bx-threads a.unread strong { color: var(--bt); }
.bx-threads .bx-count { position: absolute; right: 12px; bottom: 12px; }
.bx-th-top { display: flex; justify-content: space-between; gap: 8px; }
.bx-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 28px; }
.bx-thread { display: grid; grid-template-rows: auto 1fr auto auto; min-height: 0; padding: 16px 20px 20px; gap: 12px; }
.bx-th-h { display: flex; align-items: center; gap: 10px; }
.bx-th-h > span { display: grid; gap: 2px; }
.bx-th-back { display: none; }
.bx-bubbles { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 4px; list-style: none; overflow: auto; min-height: 0; }
.bx-bubbles li { max-width: min(560px, 82%); display: grid; gap: 4px; padding: 12px 16px; border-radius: 20px 20px 20px 6px; background: var(--w); }
.bx-bubbles li.me { align-self: flex-end; border-radius: 20px 20px 6px 20px; background: var(--bp); }
.bx-bubbles li.bx-empty, .bx-bubbles li.bx-typing { background: none; max-width: none; color: var(--ink2); }
.bx-bubbles .small .i { width: 14px; height: 14px; }
.bx-quick { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.bx-quick .btn { flex: none; }
.bx-compose { display: flex; align-items: flex-end; gap: 8px; }
.bx-compose .ta { flex: 1; min-width: 0; }
.bx-compose textarea { padding: 12px 14px; min-height: 48px; max-height: 160px; line-height: 1.4; }

/* Invoices */
.bx-tbl-w { padding: 8px; overflow-x: auto; }
.bx-tbl { min-width: 720px; }
.bx-tr { display: grid; grid-template-columns: 110px 1.3fr 1.2fr 90px 130px 150px; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-sm); text-decoration: none; color: var(--ink); }
a.bx-tr:hover { background: var(--p2); box-shadow: var(--lift-sm); }
.bx-tr-h { font-size: var(--fs-small); font-weight: 600; color: var(--ink2); padding-top: 8px; padding-bottom: 8px; }
.r { text-align: right; }
.bx-inv { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap); align-items: start; padding-top: 40px; }
.bx-inv-side { display: grid; gap: var(--gap); position: sticky; top: calc(var(--nav-h) + 16px); }
.bx-paper { display: grid; gap: 28px; padding: clamp(24px, 4vw, 48px); border-radius: var(--r); background: var(--paper); }
.bx-p-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.bx-p-k { font-size: var(--fs-small); color: var(--ink2); font-weight: 600; margin-bottom: 4px; }
.bx-p-n { font-family: var(--display); font-size: clamp(40px, 4vw, 56px); line-height: 1; }
.bx-p-st { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--bt); }
.bx-p-st .i { color: var(--old); }
.bx-p-parties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; font-size: var(--fs-small); line-height: 1.55; }
.bx-p-r { display: grid; grid-template-columns: 1fr 140px; gap: 12px; padding: 10px 0; }
.bx-p-r:nth-child(even):not(.bx-p-sum):not(.bx-p-tot) { background: var(--band); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 8px; }
.bx-p-rh { font-size: var(--fs-small); color: var(--ink2); font-weight: 600; }
.bx-p-sum { font-size: var(--fs-small); }
.bx-p-tot { font-size: 21px; font-weight: 700; padding-top: 14px; }
.bx-p-pay { font-size: var(--fs-small); line-height: 1.6; }
.bx-p-f { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-small); color: var(--ink2); }
.bx-p-f img { display: inline-block; }
.bx-dropbtn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-radius: var(--r-sm); background: var(--w); box-shadow: var(--press); font-weight: 600; font-size: var(--fs-small); color: var(--ink); text-align: left; }
.bx-file { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 600; }

/* Notifications */
.bx-ngrp { display: grid; gap: 10px; margin-bottom: 26px; }
.bx-nlist { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bx-nlist a { display: grid; grid-template-columns: 24px 1fr 22px; gap: 14px; align-items: center; padding: 14px 18px; border-radius: var(--r-sm); background: var(--p); text-decoration: none; color: var(--ink2) !important; transition: background-color .2s, box-shadow .25s var(--ease); }
.bx-nlist a > span { display: grid; gap: 2px; }
.bx-nlist a.unread { color: var(--ink) !important; font-weight: 600; }
.bx-nlist a.unread > .i:first-child { color: var(--bt); }
.bx-nlist a:hover { background: var(--p2); box-shadow: var(--lift-sm); }
.bx-new { color: var(--bt); font-weight: 700; }
button[data-readall]:disabled { opacity: .5; cursor: default; }

/* Settings */
.bx-set { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.bx-set-nav { position: sticky; top: calc(var(--nav-h) + 16px); }
.bx-set-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.bx-set-nav a { display: flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; text-decoration: none; color: var(--ink2) !important; font-size: var(--fs-small); font-weight: 600; }
.bx-set-nav a:hover { background: var(--p2); box-shadow: var(--lift-sm); color: var(--ink) !important; }
.bx-set-main { display: grid; gap: var(--gap); max-width: 860px; }
.bx-set-main section { scroll-margin-top: calc(var(--nav-h) + 16px); }
.bx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.bx-team { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bx-team li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; }
.bx-team li > span:first-child { display: grid; gap: 2px; min-width: 0; }
.bx-team .link { min-height: 0; padding: 0; font-size: var(--fs-small); }
.bx-mini { width: 120px; min-height: 40px; }
.bx-ntbl { display: grid; gap: 2px; }
.bx-nr { display: grid; grid-template-columns: 1fr repeat(3, 96px); align-items: center; gap: 8px; padding: 4px 0; }
.bx-nr > span:not(:first-child) { display: flex; justify-content: center; }
.bx-nr-h { font-size: var(--fs-small); font-weight: 600; color: var(--ink2); }
.bx-look { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.bx-look .flabel { font-weight: 600; font-size: var(--fs-small); }

/* Onboarding */
.bx-onb { max-width: calc(760px + 2 * var(--gut)); margin-left: 0; }
.bx-roles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.bx-role { display: grid; gap: 8px; align-content: start; padding: 28px var(--pad); border: 0; border-radius: var(--r-lg); background: var(--p2); box-shadow: var(--lift-sm); text-align: left; text-decoration: none; color: var(--ink); font-size: var(--fs-body); transition: transform .25s var(--ease); }
.bx-role:hover { transform: translateY(-2px); }
.bx-role:active { box-shadow: var(--press); transform: scale(.99); }
.bx-role .i { width: 30px; height: 30px; color: var(--bt); }
.bx-role strong { font-size: var(--fs-lead); }
.bx-onb-f { display: grid; gap: 16px; }
.bx-onb-f.form { grid-template-columns: 1fr; }
.bx-onb-f .form-foot { display: flex; justify-content: space-between; gap: 12px; }

/* Toast */
.bx-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; max-width: min(92vw, 520px); padding: 14px 22px; border-radius: 999px; background: var(--ink); color: var(--g); font-size: var(--fs-small); font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.18); transform: translate(-50%, 12px); opacity: 0; filter: blur(6px); pointer-events: none; transition: opacity .3s var(--ease), transform .35s var(--ease), filter .3s var(--ease); }
.bx-toast.on { opacity: 1; transform: translate(-50%, 0); filter: none; }

/* Higher contrast (settings) */
:root[data-contrast="high"] { --ink2: var(--ink); --band: rgba(42,42,41,.09); }
:root[data-contrast="high"] .card, :root[data-contrast="high"] .bx-rq, :root[data-contrast="high"] .bx-qc { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 35%, transparent); }

/* Narrow screens */
@media (max-width: 1024px) {
  .bx-req, .bx-dash, .bx-bid, .bx-inv { grid-template-columns: 1fr; }
  .bx-req-side, .bx-dash-side, .bx-inv-side { position: static; grid-column: auto; grid-row: auto; }
  .bx-needs, .bx-open { grid-column: auto; }
  .bx-set { grid-template-columns: 1fr; }
  .bx-set-nav { position: static; overflow-x: auto; }
  .bx-set-nav ul { display: flex; }
  .bx-set-nav a { white-space: nowrap; }
}
@media (max-width: 860px) {
  .bx-msg { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .bx-msg.open .bx-threads { display: none; }
  .bx-msg:not(.open) .bx-thread { display: none; }
  .bx-msg.open .bx-thread { height: calc(100vh - var(--nav-h) - 40px); }
  .bx-th-back { display: inline-grid; }
}
@media (max-width: 720px) {
  .bx-rq { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 16px; }
  .bx-rq-t { grid-column: 1 / -1; }
  .bx-rq .bx-go { display: none; }
  .bx-act a { grid-template-columns: auto 1fr; padding: 16px; }
  .bx-act-a { grid-column: 2; }
  .bx-line { grid-template-columns: 1fr 44px; }
  .bx-line select { grid-column: 1; grid-row: 2; }
  .bx-line .icon-btn { grid-row: 1; grid-column: 2; }
  .bx-grid2, .bx-roles, .bx-p-parties { grid-template-columns: 1fr; }
  .bx-kpis-row { grid-template-columns: 1fr; }
  .bx-nr { grid-template-columns: 1fr repeat(3, 56px); font-size: var(--fs-small); }
  .bx-form { grid-template-columns: 1fr; }
  .bx-form .field { grid-column: 1 / -1; }
  .bx-steps li + li::before, .bx-track li + li::before { width: 16px; margin: 0 8px; }
  .bx-dl > div { grid-template-columns: 96px 1fr; }
  .bx-addline { flex-wrap: wrap; }
  .bx-addline .ta { flex-basis: 100%; }
}

@media print {
  body[data-app="buyer"] .bx-nav, body[data-app="buyer"] .foot, .bx-crumb, .bx-inv-side, .bx-head-act, .bx-tools, .bx-decide, .bx-toast, .bx-cr-act { display: none !important; }
  body[data-app="buyer"] { background: #fff; }
  .bx-inv { grid-template-columns: 1fr; padding: 0; }
}

/* Fixes after first shoot */
[data-app="buyer"] [tabindex="-1"]:focus { outline: none; }
[data-app="buyer"] .fld-kit .drop, [data-app="buyer"] .fld-kit .ta, [data-app="buyer"] .fld-kit textarea { width: 100%; max-width: none; }
[data-app="buyer"] .fld-kit .drop-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; width: 100%; }
[data-app="buyer"] .fld-kit .tidy-btn { margin-left: auto; }
.bx-cr-note .bx-cc { text-align: right; justify-items: end; }
@media (max-width: 640px) {
  .bx-cmp { min-width: calc(128px + var(--n, 3) * 118px); }
  .bx-cr { grid-template-columns: 128px repeat(var(--n, 3), minmax(118px, 1fr)); }
  .bx-cr > * { padding: 10px 10px; }
  .bx-cl { font-size: 14px; line-height: 1.35; }
  .bx-cr-t > * { font-size: 17px; }
  .bx-subn { font-size: 12px; }
}
/* <<< buyer_app */