/* ============================================================================
   Shared UI primitives — the 1b Tonal button system, chips, inputs, modal,
   drawer, empty state and skeleton.

   These render in two token scopes: the admin console defines its tokens on
   :root (market-theme.css) and the storefront on .mb (market-browse.css). The
   two sheets spell a few tokens differently, so every such token is read with
   a fallback: --line-h or --line-strong, --accent-h or --accent-hover. Nothing
   here hard-codes a palette value except the destructive tint, which is mixed
   from --red.
   ============================================================================ */

/* ── Button ───────────────────────────────────────────────────────────────
   Hover changes colour only: nothing moves, lifts or gains a shadow. No icons
   or arrows live inside a button. */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .14s, border-color .14s, color .14s;
}

.ui-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ui-btn:disabled,
.ui-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

/* Sizes. 36px is the auth and bid submit; 44px is the mobile target. */
.ui-btn.ui-btn--lg { min-height: 36px; padding: 0 16px; }
.ui-btn.ui-btn--touch { min-height: 44px; padding: 0 18px; font-size: 14px; }
.ui-btn.ui-btn--block { width: 100%; }

/* Primary: the ink fill inverts against the page. */
.ui-btn.ui-btn--primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.ui-btn.ui-btn--primary:hover {
  background: color-mix(in srgb, var(--ink) 84%, var(--bg));
  border-color: color-mix(in srgb, var(--ink) 84%, var(--bg));
}

/* Secondary: a raised surface with a visible control border. */
.ui-btn.ui-btn--secondary {
  background: var(--bg-3);
  color: var(--ink);
  border-color: var(--line-h, var(--line-strong, var(--line)));
}
.ui-btn.ui-btn--secondary:hover {
  background: color-mix(in srgb, var(--ink) 10%, var(--bg-3));
}

/* Link: blue is reserved for links, focus and selected state. */
.ui-btn.ui-btn--link {
  background: none;
  border-color: transparent;
  color: var(--accent-2);
  padding: 0 2px;
  min-height: 0;
}
.ui-btn.ui-btn--link:hover { text-decoration: underline; }

/* Destructive: tinted, never a solid red fill. */
.ui-btn.ui-btn--destructive {
  background: color-mix(in srgb, var(--red) 6%, var(--bg-2));
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 50%, var(--bg-2));
}
.ui-btn.ui-btn--destructive:hover {
  background: color-mix(in srgb, var(--red) 12%, var(--bg-2));
}

/* ── Chip / status tag ────────────────────────────────────────────────────
   A label, not a control: no hover, no pointer. */
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  background: var(--bg-3);
  color: var(--ink-2);
}
.ui-chip--open    { background: color-mix(in srgb, var(--green) 16%, transparent);  color: var(--green); }
.ui-chip--warn    { background: color-mix(in srgb, var(--yellow) 16%, transparent); color: var(--yellow); }
.ui-chip--danger  { background: color-mix(in srgb, var(--red) 16%, transparent);    color: color-mix(in srgb, var(--red) 78%, #FFFFFF); }
.ui-chip--info    { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-2); }

/* ── Field ────────────────────────────────────────────────────────────────── */
.ui-field { display: flex; flex-direction: column; gap: 6px; }
.ui-field__label { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.ui-field__hint  { font-size: 12px; color: var(--ink-3); }
.ui-field__error { font-size: 12px; color: var(--red); }

.ui-input {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--line-h, var(--line-strong, var(--line)));
  background: var(--bg-3);
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.4;
}
.ui-input::placeholder { color: var(--ink-4); }
.ui-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.ui-input[aria-invalid="true"] { border-color: var(--red); }
textarea.ui-input { min-height: 96px; resize: vertical; }

/* ── Modal ────────────────────────────────────────────────────────────────
   Shadow is allowed here and on the drawer, nowhere else. */
.ui-modal__bg {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(4, 6, 8, .62);
}
.ui-modal {
  width: 100%; max-width: 460px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .6);
}
.ui-modal__head { padding: 16px 20px 0; }
.ui-modal__title { font-size: 16px; font-weight: 700; color: var(--ink); }
.ui-modal__body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.ui-modal__foot { padding: 0 20px 16px; display: flex; gap: 8px; justify-content: flex-end; }

/* ── Drawer ───────────────────────────────────────────────────────────────
   The only motion in the system. */
.ui-drawer__overlay { position: fixed; inset: 0; z-index: 100; background: rgba(4, 6, 8, .5); }
.ui-drawer {
  position: fixed; top: 0; inset-inline-end: 0; bottom: 0; z-index: 101;
  width: min(480px, 100%);
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border-inline-start: 1px solid var(--line);
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .6);
  transform: translateX(100%);
  transition: transform .22s ease;
}
.ui-drawer--open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .ui-drawer { transition: none; }
}
.ui-drawer__head {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.ui-drawer__title { font-size: 15px; font-weight: 700; color: var(--ink); }
.ui-drawer__body { padding: 16px 20px; overflow-y: auto; }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.ui-empty { padding: 48px 20px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ui-empty__title { font-size: 15px; font-weight: 600; color: var(--ink); }
.ui-empty__body { font-size: 13px; color: var(--ink-3); max-width: 44ch; }
.ui-empty__action { margin-top: 8px; }

/* ── Skeleton ─────────────────────────────────────────────────────────────
   A resting placeholder. It does not shimmer: motion is reserved for the
   drawer, and a pulsing page is the thing this design set out to avoid. */
.ui-skeleton {
  display: block;
  border-radius: 6px;
  background: var(--bg-3);
}
.ui-skeleton--text { height: 12px; margin: 6px 0; }
.ui-skeleton--title { height: 18px; margin: 8px 0; }
.ui-skeleton--block { height: 88px; }

/* Light. A hue tint is too pale on white (~3.2:1) and a black tint pushes the
   darker Light status colours under 4.5, so a chip here is a white fill with a
   hairline: lighter than the page, which lifts contrast instead of cutting it. */
.mb.theme-light .ui-chip, html.theme-light .ui-chip {
  background: #FFFFFF;
  border: 1px solid var(--line);
}
.mb.theme-light .ui-chip--open,   html.theme-light .ui-chip--open   { color: var(--green); }
.mb.theme-light .ui-chip--warn,   html.theme-light .ui-chip--warn   { color: var(--yellow); }
.mb.theme-light .ui-chip--danger, html.theme-light .ui-chip--danger { color: var(--red); }
.mb.theme-light .ui-chip--info,   html.theme-light .ui-chip--info   { color: var(--accent-2); }


/* ── Public RFP page (screen 09) ──────────────────────────────────────────
   Scoped under .mb so it inherits the storefront palette and type. */
.mb .rfp-wrap { max-width: 760px; margin: 0 auto; padding: 24px 20px 64px; }
.mb .rfp-back { margin-bottom: 16px; }
.mb .rfp-head { display: flex; flex-direction: column; gap: 10px; }
.mb .rfp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mb .rfp-title { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.mb .rfp-sub { font-size: 13px; color: var(--ink-3); }

.mb .rfp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0;
}
.mb .rfp-fact {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 14px;
}
.mb .rfp-fact-l { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 6px; }
.mb .rfp-fact-v { font-size: 18px; font-weight: 700; color: var(--ink); }

.mb .rfp-h2 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.mb .rfp-desc p { font-size: 14px; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap; margin: 0; }

.mb .rfp-cta {
  margin-top: 32px; padding: 20px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.mb .rfp-cta-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.mb .rfp-cta-body { font-size: 13px; color: var(--ink-3); max-width: 52ch; }

/* Screen-reader-only text for the busy region. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Coverage B: one column below the 640 breakpoint. */
@media (max-width: 640px) {
  .mb .rfp-grid { grid-template-columns: 1fr; }
  .mb .rfp-title { font-size: 22px; }
  .mb .rfp-cta { flex-direction: column; align-items: stretch; }
}
.mb .drawer-permalink { margin: 6px 0 2px; }

/* Coverage B: 44px touch targets below the 640 breakpoint. Link buttons are
   inline text, not targets, so they keep their intrinsic height. */
@media (max-width: 640px) {
  .ui-btn:not(.ui-btn--link) { min-height: 44px; padding: 0 16px; }
}

/* ── Theme toggle ─────────────────────────────────────────────────────────
   Both labels ship; CSS picks the one for the current theme, because the
   server cannot know which theme the browser will resolve to. */
.ui-theme-toggle__to-dark { display: none; }
html.theme-light .ui-theme-toggle__to-light { display: none; }
html.theme-light .ui-theme-toggle__to-dark { display: inline; }

/* ── Light theme at the document level ────────────────────────────────────
   market-browse.css themes .mb, but body takes its background from the :root
   tokens in market-theme.css — so without this the page paints a light board
   inside a dark frame. html.theme-light is (0,1,1) and outranks :root, and
   ui.css loads last. Values mirror the storefront Light set.
   color-scheme flips the UA's own surfaces: form controls and scrollbars. */
html.theme-light {
  color-scheme: light;

  --bg:          #F5F6F8;
  --bg-2:        #FFFFFF;
  --bg-3:        #ECEFF3;
  --paper:       #FFFFFF;
  --paper-2:     #E3E7EC;

  --ink:         #14181D;
  --ink-2:       #39414A;
  --ink-3:       #56606B;
  --ink-4:       #6B7684;   /* non-text only */

  --line:        #E3E7EC;
  --line-soft:   #EDF0F4;
  --line-strong: #C7CDD5;
  --line-h:      #C7CDD5;

  --accent:      #1F63D1;
  --accent-2:    #1A55B8;
  --accent-hover:#1A55B8;
  --accent-h:    #1A55B8;
  --accent-3:    #17805C;
  --accent-rgb:  31, 99, 209;
  --accent-strong: #1F63D1;
  --accent-strong-hover: #1A55B8;

  --green:       #17805C;
  --red:         #C0362E;
  --yellow:      #8A6410;
  --blue:        #1A55B8;
}

/* ── Light fixes for page styles written dark-only ────────────────────────
   These were unreachable until the toggle shipped, so they had never been
   checked against a light page. */

/* The nav's resting ink is a step too pale once the page is white. */
/* :not(.active) because this selector out-ranks `.mb .topnav-link.active`,
   which would otherwise lose the stronger ink that marks the current page. */
html.theme-light .mb .topnav-link:not(.active) { color: var(--ink-2); }

/* Green-on-green tint reads 4.19 on white; the neutral chip treatment that the
   status chips already use clears it. */
html.theme-light .mb .dir-verified {
  background: #FFFFFF;
  border-color: var(--line);
  color: var(--green);
}

/* ════════════════════════════════════════════════════════════════════════════
   Phase 4 — bidding and RFP lifecycle (screens 04, 10, 12, 21, 22, 26, 34)

   Everything here uses tokens rather than literals so it follows the theme. The
   only literals are in the light block at the end, where a tint on white needs a
   different treatment from a tint on near-black.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Shared ──────────────────────────────────────────────────────────────── */
.mb .mng-error {
  border: 1px solid rgba(var(--red-rgb), .4);
  background: rgba(var(--red-rgb), .10);
  color: var(--ink);
  border-radius: var(--r, 8px);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

.mb .mng-textarea { min-height: 76px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.mb .mng-modal-b { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 0 0 4px; }

/* ── 21 Manage an RFP ────────────────────────────────────────────────────── */
.mb .mng-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.mb .mng-banner {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  border: 1px solid var(--line); border-radius: var(--r, 8px);
  padding: 12px 16px; margin-bottom: 20px;
}
.mb .mng-banner--open { border-color: rgba(var(--green-rgb), .35); }
.mb .mng-banner--bad  { border-color: rgba(var(--red-rgb), .35); }
.mb .mng-banner-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mb .mng-banner-b { font-size: 13px; color: var(--ink-2); }

.mb .mng-fields { border: 1px solid var(--line); border-radius: var(--r, 8px); margin: 18px 0 10px; }
.mb .mng-field {
  display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-size: 13.5px; align-items: center;
}
.mb .mng-field:last-child { border-bottom: 0; }
.mb .mng-field-k { color: var(--ink-3); }
.mb .mng-field-v { color: var(--ink); overflow-wrap: anywhere; }
.mb .mng-field-l { font-size: 12px; color: var(--ink-3); }

.mb .mng-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; margin: 0 0 24px; }

.mb .mng-actions {
  display: grid; gap: 12px; margin-bottom: 28px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.mb .mng-action {
  border: 1px solid var(--line); border-radius: var(--r, 8px);
  padding: 14px 16px; display: grid; gap: 8px; align-content: start;
}
.mb .mng-action-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mb .mng-action-b { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

.mb .mng-clars { margin-bottom: 32px; }
.mb .mng-clar { border-top: 1px solid var(--line); padding: 12px 0; }
.mb .mng-clar-w { font-size: 11.5px; color: var(--ink-3); margin-bottom: 4px; }
.mb .mng-clar-b { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }

/* ── 34 Questions ────────────────────────────────────────────────────────── */
.mb .qa-sec { margin-bottom: 36px; }
.mb .qa-item { border: 1px solid var(--line); border-radius: var(--r, 8px); padding: 16px; margin-bottom: 12px; }
.mb .qa-item--done { border-style: dashed; }
.mb .qa-q { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.5; margin-bottom: 6px; }
.mb .qa-a { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 8px; }
.mb .qa-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 11.5px; color: var(--ink-3); margin-bottom: 10px;
}
.mb .qa-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mb .qa-hint { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; margin: 8px 0 0; }

/* Public Q&A on the RFP page */
.mb .rfp-qa { margin: 32px 0; }
.mb .rfp-qa-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mb .rfp-qa-count { font-size: 12px; color: var(--ink-3); }
.mb .rfp-qa-empty { font-size: 13px; color: var(--ink-3); }
.mb .rfp-qa-item { border-top: 1px solid var(--line); padding: 14px 0; }
.mb .rfp-qa-q { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.mb .rfp-qa-a { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin-top: 6px; }
.mb .rfp-qa-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; }
.mb .rfp-ask { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 8px; }

/* ── 22 Full bid ─────────────────────────────────────────────────────────── */
.mb .fb-head { margin-bottom: 18px; }
.mb .fb-sub { font-size: 12.5px; color: var(--ink-3); margin-bottom: 6px; }
.mb .fb-proposal { font-size: 14px; color: var(--ink-2); line-height: 1.65; margin: 0 0 24px; max-width: 68ch; }

.mb .fb-grid {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r, 8px); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 28px;
}
.mb .fb-fact { background: var(--bg); padding: 14px 16px; }

.mb .fb-sec { margin-bottom: 30px; }
.mb .fb-rows { border: 1px solid var(--line); border-radius: var(--r, 8px); }
.mb .fb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.mb .fb-row:last-child { border-bottom: 0; }
.mb .fb-row-n {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3); color: var(--ink-3); font-size: 11px; font-weight: 700;
}
.mb .fb-row-k { flex: 1; color: var(--ink-2); overflow-wrap: anywhere; }
.mb .fb-row-v { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.mb .fb-row--total { font-weight: 700; border-top: 1px solid var(--line); }
.mb .fb-row--total .fb-row-k { color: var(--ink); }
.mb .fb-file { color: var(--accent-2); text-decoration: none; flex: 1; }
.mb .fb-file:hover { text-decoration: underline; }
.mb .fb-note { font-size: 12px; color: var(--ink-3); margin: 8px 0 0; line-height: 1.5; }

.mb .fb-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 24px; }
.mb .fb-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line); padding-top: 16px;
}
.mb .fb-pager-n { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── 10 / 12 / 26 Portal ─────────────────────────────────────────────────── */
.mb .pt-head { margin-bottom: 28px; }
.mb .pt-h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 4px; }
.mb .pt-sub { font-size: 13px; color: var(--ink-3); }

.mb .pt-sec { margin-bottom: 40px; }
.mb .pt-sec-head {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: baseline; justify-content: space-between; margin-bottom: 16px;
}
.mb .pt-sec-actions { display: flex; align-items: center; gap: 12px; }
.mb .pt-h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.mb .pt-h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.mb .pt-count { font-size: 12.5px; color: var(--ink-3); }
.mb .pt-note { font-size: 12px; color: var(--ink-3); margin: 12px 0 0; }

/* Two panes: RFPs on the left, the selected one's bids on the right. */
.mb .pt-panes { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.mb .pt-pane { border: 1px solid var(--line); border-radius: var(--r, 8px); }
.mb .pt-pane--list { padding: 6px; display: grid; gap: 2px; }
.mb .pt-pane--detail { padding: 18px 20px; min-height: 220px; }

.mb .pt-rfp {
  display: grid; gap: 6px; text-align: start; width: 100%;
  padding: 11px 12px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: inherit; cursor: pointer; font: inherit;
}
.mb .pt-rfp:hover { background: var(--bg-3); }
.mb .pt-rfp--on { background: var(--bg-3); border-color: var(--line-h); }
.mb .pt-rfp-t { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.mb .pt-rfp-m { display: flex; align-items: center; gap: 8px; }
.mb .pt-rfp-n { font-size: 11.5px; color: var(--ink-3); }

.mb .pt-detail-head { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; }
.mb .pt-detail-sub { font-size: 12.5px; color: var(--ink-3); margin-bottom: 10px; }
.mb .pt-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mb .pt-awarded {
  font-size: 13px; color: var(--ink-2); border: 1px solid rgba(var(--green-rgb), .35);
  border-radius: 6px; padding: 10px 12px; margin-bottom: 14px;
}
.mb .pt-awarded a { color: var(--accent-2); }

.mb .pt-bid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px;
  align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line);
}
.mb .pt-bid:last-child { border-bottom: 0; }
.mb .pt-bid-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.mb .pt-bid-agency { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.mb .pt-bid-agency:hover { text-decoration: underline; }
.mb .pt-bid-perf { font-size: 11.5px; color: var(--ink-3); }
.mb .pt-bid-pitch { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin-top: 4px; }
.mb .pt-bid-num { text-align: end; }
.mb .pt-bid-fee { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.mb .pt-bid-tl { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.mb .pt-bid-act { display: flex; gap: 8px; align-items: center; }

.mb .pt-stats {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r, 8px); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.mb .pt-stat { background: var(--bg); padding: 14px 16px; }
.mb .pt-stat-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 600; }
.mb .pt-stat-v { font-size: 17px; font-weight: 700; color: var(--ink); margin-top: 6px; }

.mb .pt-bids { display: grid; gap: 12px; }
.mb .pt-out { border: 1px solid var(--line); border-radius: var(--r, 8px); padding: 16px; }
.mb .pt-out-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.mb .pt-out-when { font-size: 11.5px; color: var(--ink-3); }
.mb .pt-out-t { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.mb .pt-out-b { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin-top: 6px; }
.mb .pt-out-f { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; font-variant-numeric: tabular-nums; }
.mb .pt-out-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ── 04 Bid submitted ────────────────────────────────────────────────────── */
.mb .bid-done { border: 1px solid rgba(var(--green-rgb), .35); border-radius: var(--r, 8px); padding: 14px 16px; }
.mb .bid-done-t { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.mb .bid-done-b { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.mb .bid-done-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }

/* ── Narrow ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .mb .pt-panes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mb .mng-field { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mb .mng-field-l { grid-row: 1; justify-self: start; }
  .mb .pt-bid { grid-template-columns: minmax(0, 1fr); }
  .mb .pt-bid-num { text-align: start; }
  .mb .fb-pager { flex-wrap: wrap; }
}

/* ── Light ───────────────────────────────────────────────────────────────── */
html.theme-light .mb .fb-fact,
html.theme-light .mb .pt-stat { background: var(--bg-2); }

/* A hue tint on white lands near 3:1, so these panels take a white fill and say
   what they are with a hairline instead — the same move the chips use. */
html.theme-light .mb .bid-done,
html.theme-light .mb .pt-awarded {
  background: var(--bg-2);
  border-color: var(--line-h);
}
html.theme-light .mb .mng-error {
  background: var(--bg-2);
  border-color: rgba(var(--red-rgb), .45);
}

/* Two card badges that only appear when the board has briefs, so they were never
   measured until now. Both are a hue on its own tint, which lands just under 4.5
   on white; the white-fill-plus-hairline treatment the chips use clears it. */
html.theme-light .mb .bc-status.s-open,
html.theme-light .mb .new-badge {
  background: var(--bg-2);
  border: 1px solid var(--line-h);
}

/* ════════════════════════════════════════════════════════════════════════════
   Phase 5 — awards, escrow and money (screens 11, 13, 19, 24, 25, 35, 36, 37)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 13 Milestone ledger rows ────────────────────────────────────────────── */
.mb .ms-row {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 26px minmax(0, 1fr) auto 110px auto;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.mb .ms-row:last-child { border-bottom: 0; }
.mb .ms-n {
  width: 24px; height: 24px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3); color: var(--ink-3); font-size: 11px; font-weight: 700;
}
.mb .ms-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mb .ms-ledger { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.mb .ms-amt { font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.mb .ms-act { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* 36 — the resolved split, sitting under the milestone it settled. */
.mb .ms-refund {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 4px 14px;
  padding: 10px 16px 14px 56px; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.mb .ms-refund-k { color: var(--ink-3); }
.mb .ms-refund-v { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Client review of the agency, once every milestone is released. */
.mb .rv-stars { display: flex; gap: 4px; }
.mb .rv-star {
  width: 36px; height: 36px; border-radius: var(--r, 8px); cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink-4);
  font-size: 18px; line-height: 1;
}
.mb .rv-star:hover { border-color: var(--line-h, var(--line-strong, var(--line))); color: var(--ink-2); }
.mb .rv-star--on { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 45%, transparent); }
.mb .rv-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mb .rv-shown { display: grid; gap: 6px; }
.mb .rv-shown-stars { color: var(--yellow); font-size: 16px; letter-spacing: 2px; }
.mb .rv-shown-stars span { color: var(--ink-4); }
.mb .rv-shown-body { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin: 0; }
.mb .rv-shown-meta { font-size: 11.5px; color: var(--ink-3); }

/* ── 19 Fund escrow ──────────────────────────────────────────────────────── */
.mb .fund-panes {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start;
}
.mb .fund-methods { display: grid; gap: 10px; align-content: start; }
.mb .fund-method {
  display: grid; gap: 3px; text-align: start; width: 100%; font: inherit; cursor: pointer;
  padding: 13px 16px; border-radius: var(--r, 8px);
  border: 1px solid var(--line); background: transparent; color: inherit;
}
.mb .fund-method:hover { border-color: var(--line-h); }
.mb .fund-method--on { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.mb .fund-method-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mb .fund-method-s { font-size: 12px; color: var(--ink-3); }

.mb .fund-card { display: grid; gap: 10px; }
.mb .fund-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mb .fund-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; margin: 4px 0 0; }
.mb .fund-note strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.mb .fund-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }

.mb .fund-summary {
  border: 1px solid var(--line); border-radius: var(--r, 8px); padding: 18px 20px;
}
.mb .fund-summary-t {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); font-weight: 600; margin-bottom: 12px;
}
.mb .fund-sum-brief { font-size: 12.5px; color: var(--ink-2); margin-bottom: 14px; line-height: 1.5; }
.mb .fund-sum-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2);
}
.mb .fund-sum-row span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mb .fund-sum-row--total { font-weight: 700; }
.mb .fund-sum-row--total span { color: var(--ink); }

.mb .fund-declined {
  border: 1px solid rgba(var(--red-rgb), .45); border-radius: var(--r, 8px);
  padding: 13px 16px; margin-bottom: 18px;
}
.mb .fund-declined-t { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.mb .fund-declined-b { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }

/* ── 24 Dispute ──────────────────────────────────────────────────────────── */
.mb .dsp-form { display: grid; gap: 14px; max-width: 640px; }

.mb .dsp-timeline { border-inline-start: 2px solid var(--line); padding-inline-start: 18px; }
.mb .dsp-entry { padding-bottom: 18px; position: relative; }
.mb .dsp-entry::before {
  content: ""; position: absolute; inset-inline-start: -25px; top: 5px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--line-h);
}
.mb .dsp-entry--end::before { background: var(--green); }
.mb .dsp-entry-head {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 5px;
}
.mb .dsp-who { font-size: 13px; font-weight: 600; color: var(--ink); }
.mb .dsp-role {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); font-weight: 600;
}
.mb .dsp-when { font-size: 11.5px; color: var(--ink-3); }
.mb .dsp-body { font-size: 13px; color: var(--ink-2); line-height: 1.6; white-space: pre-wrap; }
.mb .dsp-reply { margin-top: 18px; display: grid; gap: 12px; max-width: 640px; }

/* ── 35 Receipt / invoice, A4 ────────────────────────────────────────────── */
.mb .doc-wrap { max-width: 900px; margin: 0 auto; padding: 40px 24px; }
.mb .doc-toolbar {
  max-width: 820px; margin: 0 auto; padding: 20px 24px 0;
  display: flex; gap: 10px; justify-content: space-between; align-items: center;
}

/* 210mm at 96dpi is 794px; the page is that wide and white in both themes,
   because a document that changes colour with the reader's theme is not a document. */
.mb .doc-page {
  width: min(794px, calc(100% - 32px));
  margin: 20px auto 60px;
  background: #FFFFFF;
  color: #14181D;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 56px 56px 44px;
  font-size: 13px;
  line-height: 1.55;
}
.mb .doc-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.mb .doc-brand { font-size: 17px; font-weight: 700; letter-spacing: -0.03em; color: #14181D; }
.mb .doc-brand-sub { color: #4D5560; font-weight: 500; margin-inline-start: 5px; }
.mb .doc-issuer { font-size: 13px; font-weight: 600; margin-top: 14px; }
.mb .doc-issuer-sub { font-size: 11.5px; color: #4D5560; }
.mb .doc-meta { text-align: end; }
.mb .doc-kind {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 700; color: #4D5560;
}
.mb .doc-no { font-size: 17px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mb .doc-date { font-size: 12px; color: #4D5560; }

.mb .doc-parties {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px;
  margin: 36px 0 28px; padding-top: 24px; border-top: 1px solid #E3E7EC;
}
.mb .doc-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: #4D5560; font-weight: 700; margin-bottom: 5px;
}
.mb .doc-party { font-size: 13.5px; font-weight: 600; }
.mb .doc-party-sub { font-size: 12px; color: #4D5560; }

.mb .doc-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.mb .doc-table th, .mb .doc-table td { padding: 10px 0; text-align: start; }
.mb .doc-table thead th {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: #4D5560; border-bottom: 1px solid #14181D;
}
.mb .doc-table tbody td { border-bottom: 1px solid #E3E7EC; }
.mb .doc-table tfoot th { font-weight: 500; color: #4D5560; }
.mb .doc-table tfoot tr:first-child th, .mb .doc-table tfoot tr:first-child td { padding-top: 16px; }
.mb .doc-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mb .doc-total th, .mb .doc-total td {
  font-size: 15px; font-weight: 700; color: #14181D; border-top: 1px solid #14181D;
}
.mb .doc-foot { margin-top: 36px; padding-top: 18px; border-top: 1px solid #E3E7EC; }
.mb .doc-foot p { font-size: 11.5px; color: #4D5560; line-height: 1.6; margin: 0 0 6px; }
.mb .doc-foot-sub { font-size: 10.5px; }

@media print {
  /* The page is the deliverable; everything around it is not. */
  .mb .doc-toolbar { display: none; }
  .mb .doc-page {
    width: auto; margin: 0; border: 0; border-radius: 0; padding: 0;
    background: #FFFFFF; color: #000000;
  }
  body { background: #FFFFFF; }
  @page { size: A4; margin: 18mm; }
}

/* ── Narrow ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .mb .fund-panes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mb .ms-row { grid-template-columns: 26px minmax(0, 1fr); row-gap: 8px; }
  .mb .ms-amt, .mb .ms-state, .mb .ms-act { grid-column: 2; justify-content: flex-start; }
  .mb .ms-refund { padding-inline-start: 16px; }
  .mb .doc-page { padding: 28px 22px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Phase 6 — agency workspace and accounts (screens 18, 27, 28, 30, 32)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 18 Application steps ────────────────────────────────────────────────── */
.mb .ap-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; list-style: none; padding: 0; margin: 0 0 28px;
  counter-reset: none;
}
.mb .ap-step { margin: 0; }
.mb .ap-step-btn {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px;
  align-items: center; width: 100%; text-align: start; font: inherit; cursor: pointer;
  padding: 12px 14px; border-radius: var(--r, 8px);
  border: 1px solid var(--line); background: transparent; color: inherit;
}
.mb .ap-step-btn:hover { border-color: var(--line-h); }
.mb .ap-step--on .ap-step-btn { border-color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.mb .ap-step-n {
  width: 24px; height: 24px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3); color: var(--ink-3); font-size: 11px; font-weight: 700;
}
.mb .ap-step--done .ap-step-n { background: rgba(var(--green-rgb), .16); color: var(--green); }
.mb .ap-step-l { font-size: 13px; font-weight: 600; color: var(--ink); }
.mb .ap-step-s { font-size: 11px; color: var(--ink-3); }

.mb .ap-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mb .ap-chip {
  font: inherit; font-size: 12.5px; cursor: pointer;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-2);
}
.mb .ap-chip:hover { border-color: var(--line-h); }
.mb .ap-chip--on {
  border-color: var(--accent); background: rgba(var(--accent-rgb), .12); color: var(--accent-2);
  font-weight: 600;
}

.mb .ap-confirm {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 18px 0 4px;
}
.mb .ap-confirm a { color: var(--accent-2); }

/* ── 27 Team ─────────────────────────────────────────────────────────────── */
.mb .tm-role { max-width: 130px; height: 32px; padding: 0 8px; font-size: 12.5px; }

/* ── 32 Portfolio ────────────────────────────────────────────────────────── */
.mb .pf-row {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 34px minmax(0, 1fr) minmax(0, 200px) auto;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.mb .pf-row:last-child { border-bottom: 0; }
.mb .pf-move { display: grid; gap: 2px; }
.mb .pf-arrow {
  width: 22px; height: 16px; line-height: 1; font-size: 11px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 4px;
  background: transparent; color: var(--ink-3);
}
.mb .pf-arrow:hover { border-color: var(--line-h); color: var(--ink); }
.mb .pf-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mb .pf-src { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.mb .pf-client { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mb .pf-client-v { font-size: 12.5px; color: var(--ink-2); }
.mb .pf-act { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.mb .pf-link { max-width: 160px; height: 32px; padding: 0 8px; font-size: 12.5px; }

@media (max-width: 720px) {
  .mb .pf-row { grid-template-columns: 34px minmax(0, 1fr); row-gap: 8px; }
  .mb .pf-client, .mb .pf-act { grid-column: 2; justify-content: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Phase 7 — mobile

   The Market console is English, left to right. The Arabic type, mirroring and
   bidi-isolation rules that used to sit here were removed along with the language
   switcher: nothing sets dir="rtl" any more, so they were styling a state the app
   could not reach.

   The inline-axis logical properties (margin-inline-start, inset-inline-end and
   friends) are deliberately kept. They behave identically in a left-to-right
   document, and they are what would make a future Arabic console a translation
   job rather than a restyle.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Mobile: under 640px ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /*
    44px minimum touch target. A 32px desktop button is a miss on a phone, and a
    miss on "Release escrow" is worse than a slightly taller button.
  */
  /*
    Every control, not an enumerated list of class names — the storefront predates
    the shared primitives and keeps inventing button classes, and each one missed
    is a 26px tap target on a real thumb.

    Link-style buttons are excluded: they are inline text inside a sentence, and
    giving them a 44px box would space the prose out instead.
  */
  .mb button,
  .mb [role="button"],
  .mb .ui-btn,
  .mb .btn,
  .mb .pt-rfp,
  .mb .fund-method { min-height: 44px; }

  .mb .ui-btn--link,
  .mb .pf-arrow { min-height: 0; }

  .mb .pf-arrow { width: 44px; height: 22px; }

  /*
    16px or larger on inputs: iOS Safari zooms the whole page on focus for
    anything smaller, and the zoom does not come back.
  */
  .mb .ui-input,
  .mb .bid-in,
  .mb .m-input,
  .mb input,
  .mb select,
  .mb textarea { font-size: 16px; }

  /* Tables become stacked rows showing the two values that matter. */
  .mb .fb-row,
  .mb .ms-row,
  .mb .pf-row,
  .mb .pt-bid { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }

  .mb .fb-row { display: grid; }
  .mb .fb-row-v { text-align: start; }

  .mb .doc-page { padding: 24px 18px; }
  .mb .doc-head { gap: 12px; }
  .mb .doc-meta { text-align: start; }
}

/* ── Mobile: 640–1024px ──────────────────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  /* The board keeps its filter rail, but it collapses to a narrower column. */
  .mb .pt-panes { grid-template-columns: 260px minmax(0, 1fr); }
  .mb .fund-panes { grid-template-columns: minmax(0, 1fr); }

  /* Same overflow story as the phone: the bar is too wide for the band. */
  .mb .topbar { padding-inline: 16px; gap: 8px; }
  .mb .topbar-right { flex-wrap: wrap; gap: 6px; min-width: 0; }
  .mb .top-search { max-width: 150px; }
  .mb .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .mb .tabs::-webkit-scrollbar { display: none; }
  .mb .tab { flex: 0 0 auto; }
  .mb { overflow-x: hidden; }
}

/* ── One sticky action ───────────────────────────────────────────────────── */
/*
  Each screen gets one primary action pinned to the bottom on a phone, clear of
  the home indicator. Secondary actions stay in the page rather than competing
  for the bar.
*/
@media (max-width: 640px) {
  .mb .sticky-action {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    margin-inline: -16px;
    background: var(--bg-2);
    border-top: 1px solid var(--line);
  }
  .mb .sticky-action .ui-btn { flex: 1; }
}


/* ── Mobile overflow fixes ───────────────────────────────────────────────── */
/*
  At 390px the top bar and the tab row were both wider than the screen, in both
  directions, which made the whole page scroll sideways. Neither is new to RTL —
  they had simply never been measured at phone width.
*/
@media (max-width: 640px) {
  /* The bar keeps its height but lets its right-hand group shrink and wrap. */
  .mb .topbar { padding-inline: 12px; gap: 8px; }
  .mb .topbar-right { flex-wrap: wrap; gap: 6px; min-width: 0; }
  .mb .topbar-right .ui-btn,
  .mb .topbar-right .btn { padding-inline: 10px; }

  /* The search field is the one thing that can give up its width entirely. */
  .mb .top-search { display: none; }

  /*
    Tabs are the legitimate case for sideways movement: a row of filters is a
    list, and swiping it is expected. It scrolls inside itself so the page does
    not.
  */
  .mb .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mb .tabs::-webkit-scrollbar { display: none; }
  .mb .tab { flex: 0 0 auto; }

  /* Nothing else may push the page sideways. */
  .mb { overflow-x: hidden; }
}

/* Body carries no visible text of its own, but inherits into anything outside
   .mb — so it follows the direction's face too. */
html[dir="rtl"] body { font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif; }