/* ==========================================================================
   Contractor Trade, pages.css
   Page-level compositions inside the authenticated app shell.
   ========================================================================== */

/* ==========================================================================
   Dashboard
   ========================================================================== */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s6);
}
/* The number is the point. A full-size coloured icon tile next to it competes
   with the one thing the card exists to show, so the icon drops to a quiet
   mark at label height and the figure gets the weight instead. */
.kpi {
  padding: var(--s5) var(--s6) var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.kpi-head { display: flex; align-items: center; gap: var(--s2); }
.kpi-head .grow { min-width: 0; }
.kpi-head .icon-tile {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  background: transparent;
  border: none;
  color: var(--text-3);
}
.kpi-head .icon-tile svg { width: 16px; height: 16px; }
.kpi .stat-value {
  font-size: var(--fs-30);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.kpi-foot { margin-top: auto; padding-top: var(--s1); }

/* A KPI that carries a status keeps its colour, on the mark rather than on a
   filled tile: one hue, one shape, no second background to read. */
.kpi-head .icon-tile-accent   { color: var(--accent); }
.kpi-head .icon-tile-good     { color: var(--good); }
.kpi-head .icon-tile-warning  { color: var(--warning); }
.kpi-head .icon-tile-critical { color: var(--critical); }
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .kpi-row { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } }

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}
@media (max-width: 1100px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }

/* The next-action block: what this role has to do right now.
   "Clear status" is a PRD design principle, so it gets the top of the page. */
.next-actions { display: flex; flex-direction: column; }
.next-action {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s6);
  border-bottom: 1px solid var(--border);
  min-height: 64px;
  transition: background var(--t-fast) var(--ease);
}
.next-action:last-child { border-bottom: none; }
.next-action:hover { background: var(--surface-2); }
.next-action .grow { min-width: 0; }
.next-action-title { font-size: var(--fs-14); font-weight: 550; }
.next-action-note { font-size: var(--fs-12); color: var(--text-2); margin-top: 1px; }

/* ==========================================================================
   Project list & cards
   ========================================================================== */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s4); }
.project-card {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-out);
}
.project-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.project-card-head { display: flex; align-items: flex-start; gap: var(--s3); }
.project-card-head .grow { min-width: 0; }
.project-card-title { font-size: var(--fs-15); font-weight: 600; letter-spacing: -.01em; }
.project-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  font-size: var(--fs-12);
  color: var(--text-2);
}
.project-card-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.project-card-meta .ico { opacity: .65; }
.project-card-foot {
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}
/* Slot pips, a compact read of the 3-engagement rule on a card. */
.pips { display: inline-flex; gap: 3px; }
.pips i {
  width: 16px; height: 5px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  display: block;
}
.pips i.on { background: var(--accent); }

/* ==========================================================================
   Project detail
   ========================================================================== */
.project-manage-content {
  min-width: 0;
  container: project-content / inline-size;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aside-w);
  gap: var(--s5);
  align-items: start;
}
.detail-aside { display: flex; flex-direction: column; gap: var(--s5); position: sticky; top: calc(var(--topbar-h) + var(--s5)); }
@media (max-width: 1100px) {
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .detail-aside { position: static; }
}

@container project-content (max-width: 1000px) {
  .project-manage-content .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .project-manage-content .detail-aside { position: static; }
}

.brief-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); }
.brief-cell { background: var(--surface); padding: var(--s5) var(--s6); }
.brief-label { font-size: var(--fs-12); color: var(--text-2); }
.brief-value { font-size: var(--fs-14); font-weight: 550; margin-top: 2px; }
/* A section of the brief, as the form asks it: Planning approval, and so on (29 Sep). */
.brief-section-head { padding: var(--s4) var(--s6) var(--s2); font-size: var(--fs-12); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-2); border-top: 1px solid var(--border); background: var(--surface-2); }
.about-section { letter-spacing: .04em; text-transform: uppercase; margin-top: var(--s2); }
@media (max-width: 640px) { .brief-grid { grid-template-columns: minmax(0, 1fr); } }

.doc-row {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s6);
  border-bottom: 1px solid var(--border);
}
.doc-row:last-child { border-bottom: none; }
.doc-row .grow { min-width: 0; }

/* ==========================================================================
   Opportunities (trade side)
   ========================================================================== */
.opp-card {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  position: relative;
  transition: border-color var(--t-fast) var(--ease);
}
.opp-card:hover { border-color: var(--border-strong); }
/* The title's link covers the card, so anywhere on it opens the brief; the
   card's own buttons and links sit above it and still do their own thing. */
.card-link { color: inherit; display: block; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
/* A card that is itself the link keeps that cover inside itself: unplaced,
   every such card's cover spread over the page and the last card caught
   every click (Content opened Outside services, 29 Sep). */
.card.card-link { position: relative; }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after { box-shadow: 0 0 0 2px var(--accent); }
.opp-card, .list-row.has-link { isolation: isolate; }
.opp-card :is(button, .btn, a:not(.card-link), .chip, summary) { position: relative; z-index: 2; }
.list-row.has-link { position: relative; }
.list-row.has-link :is(button, .btn, a:not(.card-link)) { position: relative; z-index: 2; }
.opp-card[data-locked="true"] { background: var(--surface-2); }
.opp-card[data-locked="true"] .opp-body { opacity: .55; }
.opp-lock {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  margin: 0 calc(var(--s6) * -1) calc(var(--s6) * -1);
  border-top: 1px solid var(--border);
  background: var(--warning-soft);
  color: var(--warning-ink);
  font-size: var(--fs-12);
  font-weight: 550;
}
.opp-lock .btn { margin-left: auto; }

/* Why this match: explainable scoring, shown to the user. */
.match-why {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s3);
  background: var(--accent-soft);
  border-radius: var(--r-md);
}
.match-why-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-11);
  font-weight: 550;
  color: var(--accent-ink);
}
.match-why-item svg { width: 12px; height: 12px; }

.match-score {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}
.match-score b { font-size: var(--fs-18); font-weight: 650; letter-spacing: -.02em; }
.match-score span { font-size: var(--fs-11); color: var(--text-3); }

/* ==========================================================================
   Messaging
   ========================================================================== */
.msg-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  /* A chat pane is a fixed-height box with two scrollers inside it: the
     composer has to stay on screen, so the page must not scroll the
     conversation away.

     This rule is the fallback. It subtracts a guessed allowance for the
     heading and caps the result, which is why the pane looked short on a
     large display, the cap bit long before the screen ran out. The rule
     below replaces both the guess and the cap wherever `:has()` is
     supported, which is every current browser. */
  height: calc(100vh - var(--topbar-h) - 210px);
  min-height: 540px;
  max-height: 840px;
}

/* Preferred: the page fills its grid row and the thread takes whatever is
   left after the heading. Nothing is guessed, nothing is capped, so the pane
   grows with the display instead of stopping at a fixed number. */
.app-main:has(> .page-fill) {
  height: calc(100vh - var(--topbar-h));
  display: flex;
}
.page-fill {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  /* A pane that fills the window does not also want the page's tall foot. */
  padding-bottom: var(--s7);
}
/* Everything above the pane keeps its natural height; the pane absorbs the
   rest. Stated for every child, not just the heading, so adding a banner or a
   filter row above the thread cannot squash it. */
.page-fill > * { flex: 0 0 auto; min-height: 0; }
.page-fill > .msg-layout {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  max-height: none;
}

/* min-height: 0 on every flex/grid child in the chain. Without it a grid item
   defaults to min-height:auto, refuses to shrink below its content, and the
   composer is pushed out of the clipped box, which is exactly what was
   happening. This one line is the whole fix. */
.msg-list, .msg-pane { min-height: 0; }
.msg-list { border-right: 1px solid var(--border); overflow-y: auto; }
.msg-pane { display: flex; flex-direction: column; min-width: 0; }
.msg-pane-head {
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-shrink: 0;
}
.msg-pane-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s6); }
.msg-composer { border-top: 1px solid var(--border); padding: var(--s4); flex-shrink: 0; }
.msg-item {
  display: flex;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
  width: 100%;
  text-align: left;
  min-height: 68px;
  align-items: center;
  transition: background var(--t-fast) var(--ease);
}
.msg-item:hover { background: var(--surface-2); }
.msg-item[aria-current="true"] { background: var(--surface-3); }
.msg-item .grow { min-width: 0; }

@media (max-width: 860px) {
  .msg-layout {
    grid-template-columns: minmax(0, 1fr);
    height: calc(100vh - var(--topbar-h) - var(--bottom-nav-h) - 150px);
    min-height: 420px;
    max-height: none;
  }
  .app-main:has(> .page-fill) {
    height: calc(100vh - var(--topbar-h) - var(--bottom-nav-h));
  }
  .page-fill { padding-bottom: var(--s4); }
  .page-fill > .msg-layout { min-height: 0; }
  .msg-layout[data-pane="thread"] .msg-list { display: none; }
  .msg-layout[data-pane="list"] .msg-pane { display: none; }
  .msg-list { border-right: none; }
  .msg-pane-body { padding: var(--s4); }
  .msg-composer { padding: var(--s3); }
}

/* --- Conversation list ---------------------------------------------------- */
.msg-list-head {
  padding: var(--s4);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  flex-shrink: 0;
}
.msg-list-head .input { min-height: 40px; }
.msg-item-name { display: flex; align-items: center; gap: 5px; min-width: 0; }
.msg-item-name svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; }

/* --- Thread ---------------------------------------------------------------
   A day separator, sender grouping and a delivery receipt are the three
   things that make a transcript readable rather than a wall of boxes. */
.thread-day { display: flex; align-items: center; gap: var(--s4); margin: var(--s6) 0 var(--s3); }
.thread-day::before, .thread-day::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--border);
}
.thread-day span {
  font-size: var(--fs-11);
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.thread-day:first-child { margin-top: 0; }

.thread-system { display: flex; justify-content: center; margin: var(--s4) 0; }
.thread-system span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--s4);
  border-radius: var(--r-btn);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--text-2);
}
.thread-system svg { width: 13px; height: 13px; }

.bubble-row.grouped { margin-top: calc(var(--s4) * -1 + 4px); }
.bubble-row.grouped .avatar { visibility: hidden; }
.bubble-sender { font-size: var(--fs-11); font-weight: 650; color: var(--text-2); margin-bottom: 4px; }

.bubble-time { display: flex; align-items: center; gap: 5px; }
.bubble-row.mine .bubble-time { justify-content: flex-end; }
.bubble-receipt { display: inline-flex; align-items: center; color: var(--text-3); }
.bubble-receipt svg { width: 14px; height: 14px; }
.bubble-receipt[data-read="true"] { color: var(--accent); }

.msg-attach {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-top: var(--s3);
  min-width: 0;
}
.bubble-row.mine .msg-attach {
  background: color-mix(in srgb, var(--brand-on) 12%, transparent);
  border-color: color-mix(in srgb, var(--brand-on) 22%, transparent);
}

.typing { display: inline-flex; gap: 4px; align-items: center; padding: var(--s4) var(--s5); }
.typing i {
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: var(--text-3);
  animation: bounce 1.2s var(--ease) infinite;
}
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* --- Composer -------------------------------------------------------------
   One capsule that grows with the message, tools inside it rather than
   floating beside it, and the send button anchored to the bottom-right so it
   does not drift as the textarea grows. */
.msg-composer {
  border-top: 1px solid var(--border);
  padding: var(--s4);
  flex-shrink: 0;
  background: var(--surface);
}
.composer-quick {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--s3);
}
.composer-quick::-webkit-scrollbar { display: none; }
.composer-box {
  display: flex;
  align-items: flex-end;
  gap: var(--s2);
  padding: var(--s2);
  border: 1.5px solid var(--border-strong);
  /* --r-md, the same corner as every other input. The capsule is for things
     you press and for search fields; a message box is neither. */
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.composer-box textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  max-height: 150px;
  border: none;
  background: none;
  resize: none;
  padding: var(--s3) var(--s2);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--text);
}
.composer-box textarea:focus { outline: none; box-shadow: none; }
.composer-tools { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.composer-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s3);
  font-size: var(--fs-11);
  color: var(--text-3);
}
.composer-hint svg { width: 12px; height: 12px; flex-shrink: 0; }
.composer-hint kbd { font-size: var(--fs-11); }
.composer-shortcuts { display: flex; align-items: center; gap: 6px; margin-left: auto; }
@media (max-width: 640px) {
  .composer-shortcuts { display: none; }
}

/* ==========================================================================
   Quote builder & comparison
   ========================================================================== */
.quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aside-w);
  gap: var(--s5);
  align-items: start;
}
.quote-aside { position: sticky; top: calc(var(--topbar-h) + var(--s5)); display: flex; flex-direction: column; gap: var(--s5); }
@media (max-width: 1100px) {
  .quote-layout { grid-template-columns: minmax(0, 1fr); }
  .quote-aside { position: static; }
}

/* ==========================================================================
   Contract
   ========================================================================== */
.contract-doc ol { list-style: decimal; padding-left: var(--s5); color: var(--text-2); }
.contract-doc ol li { margin-bottom: var(--s2); }
/* A clause list is read by jumping to the one you want, so each clause leads
   with what it is about rather than making you read it to find out. */
.contract-doc ol.clauses li { margin-bottom: var(--s3); }
.contract-doc ol.clauses b { color: var(--text); font-weight: 650; }

.sign-box {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--s5);
  text-align: center;
  background: var(--surface-2);
}
.sign-box[data-signed="true"] {
  border-style: solid;
  border-color: color-mix(in srgb, var(--good) 34%, transparent);
  background: var(--good-soft);
}
.signature {
  font-size: var(--fs-18);
  font-style: italic;
  font-weight: 600;
  color: var(--good-ink);
}
/* An e-signature drawn with a finger or the mouse */
.sign-pad {
  display: block;
  width: 100%;
  height: 150px;
  border: 1px dashed var(--border-strong, var(--border));
  border-radius: var(--r-md);
  background: var(--surface);
  touch-action: none;
  cursor: crosshair;
}
.signature-drawn {
  display: block;
  max-width: 220px;
  height: auto;
  margin: 0 auto var(--s1, 4px);
}

/* ==========================================================================
   Subscription / billing
   ========================================================================== */
.tier-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 1100px) { .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .tier-grid { grid-template-columns: minmax(0, 1fr); } }
.tier {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s5);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  text-align: left;
  transition: border-color var(--t-fast) var(--ease);
  min-height: 150px;
}
.tier:hover { border-color: var(--border-strong); }
.tier[data-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.tier-amount {
  font-size: var(--fs-24);
  font-weight: 620;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.tier-foot { margin-top: auto; }

/* ==========================================================================
   Profile editor & verification
   ========================================================================== */
.verify-row {
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: var(--s5) var(--s6);
  border-bottom: 1px solid var(--border);
}
.verify-row:last-child { border-bottom: none; }
.verify-row .grow { min-width: 0; }
@media (max-width: 640px) {
  .verify-row { flex-wrap: wrap; }
  .verify-row .btn { width: 100%; }
}

/* ==========================================================================
   Admin
   ========================================================================== */
.admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
@media (max-width: 1100px) { .admin-grid { grid-template-columns: minmax(0, 1fr); } }

.queue-row {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s6);
  border-bottom: 1px solid var(--border);
  min-height: 68px;
}
.queue-row:last-child { border-bottom: none; }
.queue-row .grow { min-width: 0; }
@media (max-width: 640px) {
  .queue-row { flex-wrap: wrap; }
  .queue-row .queue-actions { width: 100%; display: flex; gap: var(--s2); }
  .queue-row .queue-actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Assistant
   ========================================================================== */
.assistant-context {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-size: var(--fs-11);
  color: var(--text-2);
  flex-shrink: 0;
}
.assistant-context svg { width: 13px; height: 13px; color: var(--text-3); flex-shrink: 0; }
.assistant-context strong { color: var(--text); font-weight: 650; }

.assist-msg { display: flex; gap: var(--s3); margin-bottom: var(--s4); }
.assist-msg.mine { flex-direction: row-reverse; }
.assist-msg-body { min-width: 0; max-width: 88%; }
.assist-bubble {
  padding: var(--s4);
  border-radius: var(--r-lg);
  border-bottom-left-radius: var(--s2);
  font-size: var(--fs-13);
  line-height: 1.6;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.assist-msg.mine .assist-bubble {
  background: var(--brand);
  color: var(--brand-on);
  border-color: var(--brand);
  border-bottom-left-radius: var(--r-lg);
  border-bottom-right-radius: var(--s2);
}
.assist-bubble ul { margin-top: var(--s3); display: flex; flex-direction: column; gap: 6px; }
.assist-bubble li { display: flex; gap: var(--s2); align-items: flex-start; }
.assist-bubble li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: var(--r-full);
  background: var(--accent);
  margin-top: 7px;
  flex-shrink: 0;
}
.assist-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
/* A reply the assistant prepared, for the member to change and send */
.assist-draft { margin-top: var(--s3); }
.assist-draft .textarea { width: 100%; background: var(--surface); font-size: var(--fs-13); }

.assist-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: var(--s2);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.assist-msg:hover .assist-tools, .assist-tools:focus-within { opacity: 1; }
.assist-tools .btn { height: 26px; width: 26px; }
.assist-tools .btn svg { width: 13px; height: 13px; }
.assist-tools .btn[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent-soft); }

.assist-quick {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--s3);
}
.assist-quick::-webkit-scrollbar { display: none; }
.assist-quick .chip { height: 30px; font-size: var(--fs-12); padding: 0 var(--s3); }

.assist-empty { text-align: center; padding: var(--s6) var(--s4); }

/* ==========================================================================
   Settings
   ========================================================================== */
.setting-row {
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: var(--s5) var(--s6);
  border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }
.setting-row .grow { min-width: 0; }
@media (max-width: 640px) { .setting-row { flex-wrap: wrap; } }

/* ==========================================================================
   Requirements: one project, several trades
   ========================================================================== */
/* Each trade on a job is its own conversation with its own three slots, so
   each one needs a visible boundary. A heading alone is not enough once
   there are five of them and every one contains a list of cards. */
.req-block + .req-block { margin-top: var(--s6); }
.req-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.req-head .grow { min-width: 0; }
.req-head-name { display: block; font-size: var(--fs-14); font-weight: 650; color: var(--text); }
.req-head-note {
  display: block;
  font-size: var(--fs-12);
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.req-head .icon-tile { border-color: var(--border-strong); }

/* ==========================================================================
   Help and support
   ========================================================================== */
/* The route in sits at the bottom of the card with what it costs you in
   time next to it, so the choice is made on the two facts that matter. */
.support-card { display: flex; flex-direction: column; }
.support-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--s4);
}

/* ==========================================================================
   Legal
   ==========================================================================
   Numbered, spaced and set at a readable measure, because the whole point of
   a clause is that somebody can find it again and quote it back. */
.legal-clause + .legal-clause { margin-top: var(--s6); }
.legal-clause .h4 { display: flex; gap: var(--s3); align-items: baseline; }
.legal-num {
  flex-shrink: 0;
  min-width: 1.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  font-weight: 650;
}
.legal-clause p { padding-left: calc(1.75rem + var(--s3)); }
.legal-clause b { color: var(--text); font-weight: 650; }

@media (max-width: 640px) {
  .legal-clause p { padding-left: 0; }
}

/* ==========================================================================
   What a trade decides a lead on
   ==========================================================================
   How old it is and who else is already on it. Every marketplace a
   subcontractor uses shows both, because without them a quiet lead and one
   with six others chasing it look identical, and quoting blind is the thing
   they resent most. */
.opp-signals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px dashed var(--border);
}
.opp-signal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-12);
  color: var(--text-3);
}
.opp-signal svg { opacity: .8; }
/* A candidate: the actions sit beside them, and under them on a phone. */
.cand-aside { align-items: flex-end; min-width: 150px; }
.conn-actions { justify-content: flex-end; flex-shrink: 0; }
@media (max-width: 640px) {
  .cand-row { flex-wrap: wrap; }
  .conn-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .cand-aside { width: 100%; min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .cand-aside .match-score { margin-right: auto; }
}

/* Put forward: where one application stands, in three steps. */
.pf-trail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: var(--fs-12); color: var(--text-3); }
.pf-step { display: inline-flex; align-items: center; gap: 6px; }
.pf-step .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }
.pf-step.is-done { color: var(--text-2); }
.pf-step.is-done .dot { background: var(--accent); }
.pf-step.is-bad .dot { background: var(--text-3); }
.pf-sep { width: 18px; height: 1px; background: var(--border); }
/* Two states worth a colour: it has just landed, or it is already full. */
.opp-signal.is-new { color: var(--good); font-weight: 600; }
.opp-signal.is-full { color: var(--warning-ink); font-weight: 600; }

/* ==========================================================================
   Quotes: the clock, and the chain
   ========================================================================== */
/* A date on a quote is only useful as a sentence. The tone is set from the
   state rather than chosen: neutral while there is time, critical in the
   last five days, warning once it has gone. */
.quote-clock { display: flex; align-items: center; gap: 5px; color: var(--text-3); }
.quote-clock[data-tone="good"] { color: var(--good); }
.quote-clock[data-tone="warning"] { color: var(--warning-ink); }
.quote-clock[data-tone="critical"] { color: var(--critical); font-weight: 600; }

/* Every version of a quote, linked. Three versions used to be three
   unrelated rows that happened to share a project. */
/* --- Quote builder, driven by the category of work --------------------------
   The stage grid is the client's own allocation table made editable: one row
   per stage, and the column that says who supplies it sitting next to the
   price rather than buried in an appendix. */
.pick-row {
  display: flex;
  align-items: center;
  gap: var(--s4);
  width: 100%;
  padding: var(--s4);
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pick-row:hover { border-color: var(--accent); background: var(--accent-soft); }

.phase-block { border-top: 1px solid var(--border); }
.phase-block:first-of-type { margin-top: var(--s5); }
.phase-head {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  background: var(--surface-2);
  font-size: var(--fs-13);
}

.stage-grid { display: flex; flex-direction: column; }
.stage-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 124px 72px 104px 108px 96px;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--border);
}
.stage-row:first-child { border-top: 0; }
.stage-row > * { min-width: 0; }
.stage-row input, .stage-row select { width: 100%; }
.stage-row-head {
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  font-weight: 600;
}
/* A stage taken out of scope stays visible: the customer needs to see that
   it was considered and excluded, not that it silently vanished. */
.stage-row.is-out { opacity: .5; }
.stage-name {
  min-width: 0;
  font-size: var(--fs-13);
  overflow: hidden;
  text-overflow: ellipsis;
}
.stage-name .link-btn { display: block; margin-top: 2px; }

.link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent-ink);
  cursor: pointer;
  text-align: left;
}
.link-btn:hover { text-decoration: underline; }

.input-sm, .select-sm { height: 32px; padding: 0 var(--s2); font-size: var(--fs-13); }
.pb-0 { padding-bottom: 0; }

/* Below this the seven columns stop fitting. The row becomes two lines
   rather than seven: the tick and the stage, then the controls wrapping
   underneath. Flex does this in four rules; grid needed a dozen. */
@media (max-width: 1100px) {
  .stage-row-head { display: none; }
  .stage-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s3);
    padding: var(--s4) var(--s5);
  }
  .stage-row > :first-child { flex: 0 0 22px; }
  .stage-name { flex: 1 1 calc(100% - 40px); }
  .stage-row > :nth-child(n + 3) { flex: 1 1 96px; }
  .stage-row input, .stage-row select { width: 100%; }
}

/* ==========================================================================
   Quotes and contracts as documents
   One layout for the quote a client reads, the contract, and what prints:
   the sections of the client's own proposals, in plain rows.
   ========================================================================== */
.doc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s7);
}
.doc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--s5);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--border);
}
.doc-kind {
  font-size: var(--fs-11);
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.doc-meta { display: flex; flex-wrap: wrap; gap: var(--s5); }
.doc-meta dt { font-size: var(--fs-11); color: var(--text-3); }
.doc-meta dd { font-size: var(--fs-13); font-weight: 600; font-variant-numeric: tabular-nums; }
.doc-parties {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--border);
}
.doc-sec { padding-top: var(--s6); }
.doc-h { font-size: var(--fs-15); font-weight: 650; margin-bottom: var(--s3); }

/* Tables inside a document sit flush with its text: no second box. */
table.data.doc-table th,
table.data.doc-table td { padding: var(--s3) var(--s3); vertical-align: top; }
table.data.doc-table th:first-child,
table.data.doc-table td:first-child { padding-left: 0; }
table.data.doc-table th:last-child,
table.data.doc-table td:last-child { padding-right: 0; }
table.data.doc-table th { background: transparent; }
table.data.doc-table tbody tr:hover { background: transparent; }
table.data.doc-table tbody tr:last-child td { border-bottom: 1px solid var(--border); }
table.data.doc-table tr.doc-phase td {
  padding-top: var(--s4);
  font-weight: 650;
  color: var(--text);
}
table.data.doc-table tr.is-queried td { background: var(--warning-soft); }
table.data.doc-sum td:last-child { text-align: right; }
table.data.doc-table tr.doc-total td {
  font-weight: 700;
  border-top: 1px solid var(--text);
  border-bottom: 0;
}
table.data.doc-table tfoot td { font-weight: 650; background: transparent; padding-left: 0; padding-right: 0; }

/* The programme, drawn from the stages' weeks. */
.plan-track {
  position: relative;
  display: block;
  height: 10px;
  border-radius: var(--r-bar);
  background: var(--surface-2);
}
.plan-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: var(--r-bar);
  background: var(--accent);
}
.plan-bar.is-client { background: var(--border-strong); }
.plan-view { display: flex; flex-direction: column; gap: 6px; }
.plan-view-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 120px;
  gap: var(--s3);
  align-items: center;
}
.plan-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 84px 72px 128px minmax(0, 3fr);
  gap: var(--s3);
  align-items: center;
  padding: var(--s2) var(--s5);
  border-top: 1px solid var(--border);
}
.plan-row input { width: 100%; }
.plan-row-head {
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
}
.head-field { width: 180px; }
.head-field .field { gap: 4px; }

/* The builder's own bits. */
.add-stage { display: inline-flex; align-items: center; gap: 6px; margin: var(--s3) var(--s5) var(--s4); }
.link-danger { color: var(--critical); }
.stage-note { grid-column: span 4; }
.quote-card-total { text-align: right; min-width: 120px; }
.contract-meter { display: flex; align-items: center; gap: var(--s3); max-width: 380px; }
.contract-meter > :first-child { flex: 1; }
.var-actions { min-width: 150px; align-items: flex-end; }
table.data.pay-table td:last-child { width: 1%; white-space: nowrap; }

/* Choosing stages in a dialog: the tick, the name, the price on the right. */
.pick-list {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  max-height: 260px;
  overflow-y: auto;
}
.pick-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-13);
  cursor: pointer;
}
.pick-item:first-child { border-top: 0; }
.pick-item:hover { background: var(--surface-2); }
.pick-item:has(input:checked) { background: var(--accent-soft); }
.pick-item input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.pick-price { color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Comparing quotes: one column each, the rows that differ marked. */
.compare-table th.compare-col-head { min-width: 190px; vertical-align: top; text-transform: none; letter-spacing: 0; }
.compare-table tr.is-differs td { background: var(--warning-soft); }
.compare-table tr.doc-phase td { font-weight: 650; background: var(--surface-2); }

/* Small shared helpers these screens use. */
.block { display: block; }
.justify-end { justify-content: flex-end; }
.span-2 { grid-column: 1 / -1; }
.mx-5 { margin-left: var(--s5); margin-right: var(--s5); }
.pt-0 { padding-top: 0; }
.good-ink { color: var(--good-ink); }

/* Contractor Trade service pages and the reusable package journey. */
.service-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s3);
}
.service-fact {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.service-fact strong {
  display: block;
  font-size: var(--fs-14);
  line-height: 1.25;
}
.service-fact span:not(.icon-tile) {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-12);
  line-height: 1.45;
  color: var(--text-2);
}
.service-section-card .icon-tile {
  background: var(--accent-soft);
  color: var(--accent);
}
.service-package { background: var(--surface-brand); }
.service-package-price {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--text-2);
  font-size: var(--fs-12);
}
.service-package-price strong,
.service-total {
  color: var(--text);
  font-family: var(--display);
  font-size: var(--fs-38);
  line-height: 1.05;
  letter-spacing: var(--tr-tight);
}
.service-template-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s3);
}
.service-template,
.service-palette { position: relative; cursor: pointer; }
.service-template input,
.service-palette input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.service-template-card,
.service-palette-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.service-template:hover .service-template-card,
.service-palette:hover .service-palette-card { border-color: var(--border-strong); }
.service-template input:focus-visible + .service-template-card,
.service-palette input:focus-visible + .service-palette-card { box-shadow: 0 0 0 3px var(--ring); }
.service-template input:checked + .service-template-card,
.service-palette input:checked + .service-palette-card {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.service-template-card strong,
.service-palette-card strong { font-size: var(--fs-14); margin-top: var(--s3); }
.service-template-card small { color: var(--text-2); line-height: 1.45; margin-top: var(--s1); }
.service-template-preview {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: 22px 42px 28px;
  gap: 5px;
  height: 112px;
  padding: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.service-template-preview i { display: block; border-radius: var(--r-preview); background: var(--surface-3); }
.service-template-preview i:first-child { grid-column: 1 / -1; background: var(--brand); }
.service-template-preview i:nth-child(2) { grid-row: 2 / 4; background: var(--accent-soft-2); }
.service-template-preview i:nth-child(4) { background: var(--accent); }
.service-template-portfolio { grid-template-columns: 1fr 1fr 1fr; }
.service-template-portfolio i:first-child { grid-column: 1 / -1; }
.service-template-portfolio i:nth-child(2) { grid-row: 2 / 4; }
.service-template-local { grid-template-columns: .8fr 1.2fr; }
.service-template-local i:nth-child(3) { background: var(--brand-soft-2); }
.service-template-commercial { grid-template-columns: 1.4fr .6fr; }
.service-template-commercial i:nth-child(2) { background: var(--brand-soft-2); }
.service-palette-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.service-swatches { display: grid; grid-template-columns: repeat(3, 1fr); height: 52px; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--border); }
.service-swatches i { display: block; }
.service-review .detail-aside { height: max-content; }

@media (max-width: 900px) {
  .service-template-grid, .service-palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .service-facts { grid-template-columns: minmax(0, 1fr); }
  .service-package .row-top { flex-wrap: wrap; }
  .service-package-price { align-items: flex-start; width: 100%; }
  .service-template-grid, .service-palette-grid { grid-template-columns: minmax(0, 1fr); }
}
.warning-ink { color: var(--warning-ink); }
.serious-ink { color: var(--serious-ink); }

@media (max-width: 640px) {
  .doc { padding: var(--s5); }
  .doc-parties { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .plan-row { grid-template-columns: minmax(0, 1fr) 64px 64px; }
  .plan-row .plan-track, .plan-row .plan-dates { grid-column: 1 / -1; }
  .plan-row-head > :nth-last-child(2) { display: none; }
  .plan-row-head > :last-child { display: none; }
  .plan-view-row { grid-template-columns: minmax(0, 1fr) 96px; }
  .plan-view-row .plan-track { grid-column: 1 / -1; grid-row: 2; }
  .head-field { width: 100%; }
}

/* Printing one document: only the sheet prints, and on screen it never shows. */
@media screen { #print-sheet { display: none; } }
@media print {
  body.is-printing > *:not(#print-sheet) { display: none !important; }
  body.is-printing #print-sheet { display: block; }
  #print-sheet .doc { border: 0; padding: 0; }
  #print-sheet .doc-sec { break-inside: avoid-page; }
  .print-brand { font-weight: 700; font-size: 14px; margin-bottom: 18px; }
}

/* The builder: one wide column, the job along the top, the summary at the end. */
.brief-strip {
  display: grid;
  grid-template-columns: minmax(140px, .8fr) minmax(260px, 1.7fr) minmax(140px, .8fr) minmax(170px, 1fr);
  align-items: start;
  gap: var(--s3) var(--s6);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.brief-strip-item { min-width: 0; }
.quote-answers > summary { list-style: none; cursor: pointer; border-bottom: 0; }
.quote-answers > summary::-webkit-details-marker { display: none; }
.quote-answers[open] > summary { border-bottom: 1px solid var(--border); }
.quote-answers-chev { display: inline-flex; transition: transform var(--t-fast) var(--ease); }
.quote-answers[open] .quote-answers-chev { transform: rotate(180deg); }
.quote-answers-body > .brief-grid:first-child { border-top: 0; }
.plan-row .input { height: 32px; }
.stage-row .input, .stage-row .select { height: 34px; }
/* The builder's bar: the total and what is left, then the actions. */
.quote-bar { align-items: center; }
.save-bar-note { margin-right: auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.save-bar-note > .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* On a phone a bar that stays would take a quarter of the screen: it sits
   at the end of the form instead. */
@media (max-width: 760px) {
  .quote-bar { position: static; flex-wrap: wrap; padding-right: 0; }
  .save-bar-note { flex: 1 1 100%; }
}

@media (max-width: 900px) {
  .brief-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .brief-strip { grid-template-columns: minmax(0, 1fr); }
}

/* A conversation whose connection has ended: readable, not writable. */
.msg-composer.msg-closed {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4) var(--s5);
  color: var(--text-3);
  font-size: var(--fs-13);
}

/* An odd last answer takes the whole row, so the grid never shows a blank. */
.brief-grid > .brief-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* A project can need several trades. Keep every choice visible above its
   people list and let the row wrap instead of turning it into a scroller. */
.trade-switcher { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.trade-switcher .chip { height: auto; min-height: 38px; white-space: normal; }
.trade-switcher .chip[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-on);
}
.trade-switcher .chip[aria-selected="true"] .chip-count { color: inherit; opacity: .8; }

.invitation-actions { flex: 0 0 auto; }
@media (max-width: 640px) {
  .invitation-row { flex-direction: column; align-items: stretch; }
  .invitation-actions .btn { flex: 1 1 auto; }
}

@media (max-width: 560px) {
  .leads-tabs .tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    gap: var(--s2);
  }
  .leads-tabs .tab { min-width: 0; justify-content: center; }
}
/* The trades table keeps related facts together, so the project view remains
   readable inside the panel shell without clipping long scopes or controls. */
.trades-table { table-layout: fixed; }
.trades-table th,
.trades-table td { padding-inline: var(--s3); }
.trades-table th:first-child { width: 29%; }
.trades-table th:nth-last-child(2) { width: 19%; }
.trades-table th:last-child { width: 19%; }
.trades-table td { vertical-align: top; }
.trade-table-name {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
}
.trade-table-name svg { flex: 0 0 auto; color: var(--accent); }
.trade-table-detail {
  display: block;
  margin-top: var(--s2);
  font-size: var(--fs-12);
  line-height: 1.45;
  font-weight: 400;
  color: var(--text-2);
}
.trade-table-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
  line-height: 1.4;
}
.trade-table-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--s2);
}
.trade-table-actions .btn { width: 100%; justify-content: center; }
.trades-table .trades-total-value { text-align: left; }

@media (max-width: 860px) {
  .trades-table,
  .trades-table tbody { display: block; width: 100%; table-layout: auto; }
  .trades-table tbody td[data-label="Actions"] { align-items: flex-start; }
  .trade-table-actions { max-width: min(100%, 260px); }
  .trades-table tfoot { display: block; }
  .trades-table tfoot tr {
    display: flex;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s4) var(--s5);
  }
  .trades-table tfoot td { display: none; padding: 0; border: 0; }
  .trades-table tfoot .trades-total-label,
  .trades-table tfoot .trades-total-value { display: block; background: transparent; }
}