/* Typography borrowed from the Arc Marketing landing site so the marketplace
   reads as the same company: Bricolage Grotesque for display, Plus Jakarta
   Sans for text. Imported here rather than per page so every marketplace
   view — public and logged-in — picks it up from one line. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Bricolage+Grotesque:wght@400;500;600;700;800&display=swap');

/* Route Marketplace — shares the purple-on-white brand language used by the
   portal's public signup pages (portal/public/signup-theme.css) so a supplier
   who has seen one recognises the other. Kept as its own file rather than
   imported: the marketplace is a separate process and must not break if the
   portal's theme is restyled. */

:root {
  --bg: #ffffff;
  --bg2: #faf8ff;
  --surface: #f6f2ff;
  --border: #e6dff5;
  --border-strong: #d3c6ee;
  --accent: #6d28d9;
  --accent-light: #f3e8ff;
  --accent-dark: #4c1d95;
  --text: #1a0a2e;
  --muted: #5a4f70;
  --muted2: #9088a3;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --ok: #16a34a;
  --ok-bg: #f0fdf4;
  --warn: #b45309;
  --warn-bg: #fffbeb;
  --shadow: 0 2px 20px rgba(109, 40, 217, .08);
  --shadow-md: 0 4px 32px rgba(109, 40, 217, .12);
  --radius: 12px;
  /* From the landing site's palette — the second accent is what makes the
     gradient headline and the glow read as Arc rather than generic purple. */
  --accent2: #a855f7;
  --accent-glow: #c084fc;
  --font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Chrome ─────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  height: 64px; padding: 0 24px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav .brand { font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: var(--accent-dark); }
.nav .brand span { color: var(--accent); }
.nav .links { display: flex; gap: 18px; margin-left: auto; align-items: center; }
.nav .links a { color: var(--muted); font-size: 14px; font-weight: 600; }
.nav .links a.active, .nav .links a:hover { color: var(--accent); text-decoration: none; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 28px 24px 80px; }
.wrap.narrow { max-width: 460px; padding-top: 56px; }

h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
h2 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted2); margin-bottom: 10px; }
.sub { color: var(--muted); font-size: 14px; margin-bottom: 24px; }

/* ── Surfaces ───────────────────────────────────────────────────────── */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.card + .card { margin-top: 16px; }
.panel { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }

/* ── Forms ──────────────────────────────────────────────────────────── */
label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border-strong); border-radius: 9px;
  font-family: inherit; font-size: 14px; color: var(--text); background: var(--bg);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
textarea { resize: vertical; min-height: 76px; }
.field { margin-bottom: 15px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.hint { font-size: 12px; color: var(--muted2); margin-top: 4px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); font-weight: 500; margin-bottom: 8px; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px; border: none; border-radius: 9px;
  background: var(--accent); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
button:hover, .btn:hover { background: var(--accent-dark); text-decoration: none; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.ghost, .btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--border-strong); }
button.ghost:hover { background: var(--accent-light); }
button.sm, .btn.sm { padding: 6px 12px; font-size: 13px; }
button.danger { background: var(--danger); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Feedback ───────────────────────────────────────────────────────── */
.msg { padding: 11px 14px; border-radius: 9px; font-size: 13.5px; margin-bottom: 16px; display: none; }
.msg.show { display: block; }
.msg.err { background: var(--danger-bg); color: var(--danger); border: 1px solid #fecaca; }
.msg.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid #bbf7d0; }
.msg.info { background: var(--warn-bg); color: var(--warn); border: 1px solid #fde68a; }

/* ── Enhanced form controls (market/public/ui.js) ───────────────────── */
/* The native <select> stays in the DOM as the source of truth and is visually
   hidden; the trigger + popup below are painted on top of it. */
.mk-select { position: relative; }
.mk-select .mk-native { position: absolute; opacity: 0; pointer-events: none; width: 100%; height: 100%; }

.mk-trigger {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 9px;
  font-family: inherit; font-size: 14px; font-weight: 500; text-align: left;
}
.mk-trigger:hover { background: var(--bg); border-color: var(--accent); }
.mk-select.open .mk-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.mk-trigger .mk-val { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.mk-trigger .mk-caret {
  margin-left: auto; flex: 0 0 auto; color: var(--muted);
  font-size: 15px; line-height: 1; transition: transform .12s;
}
.mk-select.open .mk-trigger .mk-caret { transform: rotate(180deg); color: var(--accent); }
.mk-ph { color: var(--muted2); font-weight: 400; }
.mk-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-code { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted2); letter-spacing: .04em; }
.mk-icon { width: 18px; text-align: center; flex: 0 0 18px; }

/* Overrides flag-icons' own .fi sizing — market.css is linked after it, and
   both are single-class selectors, so these win. display is set explicitly
   because .mk-flag-none carries no .fi class to inherit it from. */
.mk-flag {
  display: inline-block; vertical-align: middle;
  width: 20px; height: 15px; flex: 0 0 20px; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); background-size: cover;
}
.mk-flag-none { background: var(--surface); }

.mk-pop {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 60;
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 11px;
  box-shadow: 0 12px 34px rgba(26, 10, 46, .16); overflow: hidden;
}
.mk-select.open .mk-pop { display: block; }
.mk-select.up .mk-pop { top: auto; bottom: calc(100% + 5px); }

.mk-search { padding: 9px; border-bottom: 1px solid var(--border); }
.mk-search input { width: 100%; padding: 8px 10px; font-size: 13.5px; border-radius: 7px; }
.mk-list { max-height: 240px; overflow-y: auto; padding: 5px; }
.mk-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 7px; font-size: 14px; cursor: pointer;
}
.mk-opt:hover, .mk-opt.cur { background: var(--accent-light); }
.mk-opt.on { font-weight: 700; color: var(--accent-dark); }
.mk-empty { padding: 16px 12px; text-align: center; color: var(--muted2); font-size: 13px; }

/* ── File dropzone ──────────────────────────────────────────────────── */
.mk-file-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.mk-drop {
  position: relative; display: flex; align-items: center; gap: 13px;
  min-height: 76px; padding: 14px 16px; cursor: pointer;
  border: 1.5px dashed var(--border-strong); border-radius: 11px;
  background: var(--bg2); transition: border-color .12s, background .12s;
}
.mk-drop:hover { border-color: var(--accent); background: var(--accent-light); }
/* Dragging over: solid border + filled, so the drop target is unmistakable. */
.mk-drop.over { border-style: solid; border-color: var(--accent); background: var(--accent-light); }
.mk-drop.filled { border-style: solid; border-color: var(--ok); background: var(--ok-bg); cursor: default; }
.mk-drop.bad { border-color: var(--danger); background: var(--danger-bg); }

.mk-drop-body { display: flex; align-items: center; gap: 13px; width: 100%; min-width: 0; }
.mk-drop-icon { font-size: 22px; flex: 0 0 auto; line-height: 1; }
.mk-drop-copy { flex: 1; min-width: 0; }
.mk-drop-cta { font-size: 14px; font-weight: 600; color: var(--text); }
.mk-drop.bad .mk-drop-cta { color: var(--danger); }
.mk-drop-cta u { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.mk-drop-hint { font-size: 12px; color: var(--muted2); margin-top: 2px; }
.mk-file-name { font-size: 14px; font-weight: 700; color: var(--text);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mk-thumb {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; background: var(--bg); border: 1px solid var(--border); overflow: hidden;
}
.mk-thumb.img { padding: 0; }
.mk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mk-file-x {
  flex: 0 0 auto; background: none; border: none; color: var(--muted2);
  font-size: 20px; line-height: 1; padding: 5px 8px; border-radius: 7px; cursor: pointer;
}
.mk-file-x:hover { background: rgba(220, 38, 38, .1); color: var(--danger); }

/* Password field with a reveal toggle. */
.mk-pw { position: relative; display: flex; }
.mk-pw input { padding-right: 42px; }
.mk-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted2);
  padding: 6px 8px; font-size: 15px; line-height: 1; cursor: pointer; border-radius: 7px;
}
.mk-eye:hover { background: var(--accent-light); }

.mk-meter { font-size: 12px; color: var(--muted2); margin-top: 4px; }
.mk-meter.weak { color: var(--danger); }
.mk-meter.ok { color: var(--warn); }
.mk-meter.good { color: var(--ok); }

/* ── Tags / badges ──────────────────────────────────────────────────── */
.tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  background: var(--surface); color: var(--accent-dark); border: 1px solid var(--border);
}
.tag.ok { background: var(--ok-bg); color: var(--ok); border-color: #bbf7d0; }
.tag.warn { background: var(--warn-bg); color: var(--warn); border-color: #fde68a; }
.tag.err { background: var(--danger-bg); color: var(--danger); border-color: #fecaca; }
.tag.mut { background: #f4f4f5; color: var(--muted); border-color: #e4e4e7; }

.band { font-weight: 800; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.band.A { background: var(--ok-bg); color: var(--ok); }
.band.B { background: var(--warn-bg); color: var(--warn); }
.band.C { background: var(--danger-bg); color: var(--danger); }
.band.Untested { background: #f4f4f5; color: var(--muted2); font-size: 11px; }

/* ── Listing grid ───────────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.listing { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; transition: border-color .12s, transform .12s; }
.listing:hover { border-color: var(--accent); transform: translateY(-1px); }
.listing .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.listing .country { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.listing .price { font-size: 21px; font-weight: 800; color: var(--accent); letter-spacing: -.02em; }
.listing .price small { font-size: 11px; font-weight: 700; color: var(--muted2); display: block; text-align: right; letter-spacing: .04em; }
.listing .facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; margin: 12px 0; }
.listing .facts dt { color: var(--muted2); font-weight: 600; }
.listing .facts dd { color: var(--text); }
.listing .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }

/* ── Tables ─────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted2); padding: 8px 10px; border-bottom: 1px solid var(--border); }
td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }

/* ── Filter bar ─────────────────────────────────────────────────────── */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 20px; }
.filters .field { margin-bottom: 0; min-width: 130px; }

/* ── Modal ──────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; background: rgba(26, 10, 46, .45); display: none; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; z-index: 100; }
.modal.show { display: flex; }
.modal .box { background: var(--bg); border-radius: 14px; padding: 24px; width: 100%; max-width: 620px; box-shadow: 0 20px 60px rgba(26, 10, 46, .25); }
.modal .box.wide { max-width: 860px; }
.modal .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.modal .close { background: none; color: var(--muted2); font-size: 22px; padding: 0 6px; line-height: 1; }
.modal .close:hover { background: none; color: var(--text); }

/* ── Chat thread ────────────────────────────────────────────────────── */
.thread { max-height: 340px; overflow-y: auto; padding: 4px; display: flex; flex-direction: column; gap: 9px; }
.bubble { padding: 9px 13px; border-radius: 11px; font-size: 13.5px; max-width: 82%; }
.bubble.them { background: var(--surface); align-self: flex-start; }
.bubble.me { background: var(--accent); color: #fff; align-self: flex-end; }
.bubble .who { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .6; margin-bottom: 2px; }

.empty { text-align: center; padding: 48px 20px; color: var(--muted2); font-size: 14px; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; }
.sep { height: 1px; background: var(--border); margin: 18px 0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

@media (max-width: 640px) {
  .row, .row3 { grid-template-columns: 1fr; }
  .nav { padding: 0 14px; gap: 12px; }
  .nav .links { gap: 12px; }
  .wrap { padding: 20px 14px 60px; }
}

/* ── Public shop window ────────────────────────────────────────────────────
   The logged-out page is the only one a stranger judges us by, so it gets a
   real hero, a toolbar rather than a row of loose selects, and an empty state
   that offers a next step instead of apologising. */
.nav { position: sticky; top: 0; z-index: 40; backdrop-filter: saturate(180%) blur(8px); }

.hero h1 { margin-bottom: 12px; }
.hero .lede { color: var(--muted); margin: 0 0 20px; }
.hero .cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px) { .hero h1 { font-size: 26px; max-width: none; } }

.toolbar {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 18px;
}
.toolbar .filters { margin-bottom: 0; }
.toolbar .bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--muted);
}
.toolbar .bar .spacer { margin-left: auto; }

/* Loading placeholders — a blank page while fetching reads as a broken page. */
.skel { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   APP SHELL
   ═══════════════════════════════════════════════════════════════════════════
   The signed-out pages got a hero and a toolbar; the signed-in ones were left
   as white boxes on a white page with a link bar on top. That reads as an
   internal tool, and the people looking at it are wholesale counterparties
   deciding whether to hand us their rate card.

   Three changes do most of the work, and they are the same three every
   respectable CRM makes:

     1. The page has a ground colour and the cards do not. On white-on-white a
        card is only its border, so the eye gets no hierarchy for free.
     2. Borders are hairlines and depth comes from shadow. A 1px solid line at
        full strength around every surface is what makes a layout look drawn
        rather than composed.
     3. Space is proportional to importance. The old 20px padding was the same
        on a page header as on a table cell.

   Layered as overrides at the end of the file rather than edited through it:
   the rules above are shared with the public pages, which already look right,
   and rewriting them in place risks the one surface nobody complained about.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* A ground the cards can sit on. Warm rather than grey — it belongs to the
     purple the rest of the brand is built from. */
  --ground: #faf9fc;
  --ring: rgba(26, 10, 46, .07);          /* hairline, not a drawn border */
  --ring-strong: rgba(26, 10, 46, .12);
  --lift-sm: 0 1px 2px rgba(26, 10, 46, .04), 0 1px 3px rgba(26, 10, 46, .03);
  --lift: 0 1px 2px rgba(26, 10, 46, .04), 0 4px 12px rgba(26, 10, 46, .05);
  --lift-lg: 0 2px 4px rgba(26, 10, 46, .04), 0 12px 32px rgba(26, 10, 46, .09);
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
}

body.app { background: var(--ground); }

/* ── App bar ─────────────────────────────────────────────────────────────
   Taller, quieter, and it ends in an account chip rather than trailing off
   into a bare "Sign out" link. */
body.app .nav {
  height: 62px; padding: 0 20px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--ring);
  box-shadow: 0 1px 2px rgba(26, 10, 46, .03);
}
body.app .nav .brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: -.02em; color: var(--text);
}
/* Gradient mark. A wordmark alone at 16px is indistinguishable from a link. */
body.app .nav .brand::before {
  content: '⇄';
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; font-size: 15px; font-weight: 800;
  box-shadow: 0 2px 8px rgba(109, 40, 217, .28);
}
body.app .nav .brand span { color: var(--accent); }

body.app .nav .links { gap: 4px; align-items: center; }
body.app .nav .links a {
  padding: 7px 13px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  transition: background .13s, color .13s;
}
body.app .nav .links a:hover { background: var(--surface); color: var(--accent-dark); text-decoration: none; }
body.app .nav .links a.active { background: var(--accent-light); color: var(--accent-dark); }

/* Account chip: avatar, company, handle. Built by nav.js. */
.nav-acct {
  display: flex; align-items: center; gap: 9px;
  margin-left: 10px; padding: 5px 6px 5px 5px;
  border-radius: 999px; border: 1px solid var(--ring);
  background: #fff;
}
.nav-acct .av {
  width: 27px; height: 27px; border-radius: 999px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; font-size: 12px; font-weight: 800; letter-spacing: -.01em;
}
.nav-acct .who { display: flex; flex-direction: column; line-height: 1.15; padding-right: 4px; }
.nav-acct .who b { font-size: 12.5px; font-weight: 700; color: var(--text); max-width: 150px;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-acct .who small { font-size: 10.5px; color: var(--muted2); font-weight: 600; letter-spacing: .02em; }
.nav-out {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px; flex: none;
  color: var(--muted2); font-size: 14px;
}
.nav-out:hover { background: var(--danger-bg); color: var(--danger); text-decoration: none; }
@media (max-width: 720px) { .nav-acct .who { display: none; } }

/* ── Page header ─────────────────────────────────────────────────────────
   The title used to sit 6px above its own subtitle and 24px above the
   content, so it read as a label on the first card rather than a heading for
   the page. */
body.app .wrap { padding-top: 32px; }
body.app .wrap > h1 {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15;
  margin-bottom: 7px;
}
body.app .wrap > .sub { font-size: 14.5px; color: var(--muted); max-width: 68ch; margin-bottom: 26px; }

/* ── Surfaces ────────────────────────────────────────────────────────────── */
body.app .card {
  border: 1px solid var(--ring);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--lift);
}
body.app .card + .card { margin-top: 18px; }
body.app .panel {
  background: var(--bg2); border: 1px solid var(--ring); border-radius: var(--r);
}
body.app h3 { font-size: 11.5px; letter-spacing: .08em; color: var(--muted2); margin-bottom: 13px; }
body.app .sep { background: var(--ring); margin: 20px 0; }

/* ── Tables ──────────────────────────────────────────────────────────────
   A table is most of what a signed-in page shows, so it carries most of the
   impression. Header band, roomier cells, whole-row hover. */
body.app .card > table,
body.app table.data { border-radius: var(--r); overflow: hidden; }
body.app th {
  background: var(--bg2);
  font-size: 10.5px; letter-spacing: .07em; font-weight: 700; color: var(--muted2);
  padding: 11px 14px; border-bottom: 1px solid var(--ring);
}
body.app td { padding: 14px; border-bottom: 1px solid var(--ring); }
body.app tbody tr { transition: background .12s; }
body.app tbody tr:hover td { background: var(--bg2); }
body.app tbody tr:last-child td { border-bottom: none; }

/* ── Buttons ─────────────────────────────────────────────────────────────
   Depth on the primary action only. Everything else recedes, which is what
   makes the one that matters read as the one that matters. */
body.app button, body.app .btn {
  border-radius: var(--r-sm); font-weight: 650; font-size: 13.5px; padding: 10px 17px;
  box-shadow: 0 1px 2px rgba(76, 29, 149, .18);
  transition: background .13s, box-shadow .13s, transform .06s;
}
body.app button:hover, body.app .btn:hover { box-shadow: 0 2px 10px rgba(109, 40, 217, .26); }
body.app button:active, body.app .btn:active { transform: translateY(.5px); }
body.app button.ghost, body.app .btn.ghost {
  background: #fff; color: var(--text); border: 1px solid var(--ring-strong); box-shadow: var(--lift-sm);
}
body.app button.ghost:hover, body.app .btn.ghost:hover { background: var(--bg2); color: var(--accent-dark); }
body.app button.sm, body.app .btn.sm { padding: 7px 13px; font-size: 12.5px; }
body.app button:disabled { box-shadow: none; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
body.app input[type=text], body.app input[type=email], body.app input[type=password],
body.app input[type=number], body.app input[type=date], body.app input[type=search],
body.app select, body.app textarea, body.app .mk-trigger {
  border: 1px solid var(--ring-strong); border-radius: var(--r-sm);
  background: #fff; box-shadow: var(--lift-sm);
}
body.app label { font-size: 12px; font-weight: 650; color: var(--muted); letter-spacing: .01em; }

/* ── Tabs ────────────────────────────────────────────────────────────────
   Segmented control rather than an underline: it reads as a control you can
   press, which an underlined word does not. */
body.app .tabs {
  display: inline-flex; gap: 2px; border: 1px solid var(--ring); border-radius: 11px;
  background: var(--bg2); padding: 3px; margin-bottom: 22px;
}
body.app .tabs button {
  background: none; border: none; box-shadow: none; border-radius: 8px;
  padding: 8px 15px; font-size: 13.5px; font-weight: 650; color: var(--muted);
}
body.app .tabs button:hover { background: rgba(255, 255, 255, .7); color: var(--accent-dark); box-shadow: none; }
body.app .tabs button.on {
  background: #fff; color: var(--accent-dark);
  box-shadow: 0 1px 2px rgba(26, 10, 46, .06), 0 2px 6px rgba(26, 10, 46, .05);
}

/* ── Listing cards ───────────────────────────────────────────────────────── */
body.app .listing {
  border: 1px solid var(--ring); border-radius: var(--r-lg);
  padding: 18px; box-shadow: var(--lift-sm);
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
body.app .listing:hover {
  border-color: var(--border-strong); box-shadow: var(--lift-lg); transform: translateY(-2px);
}

/* ── Tags ────────────────────────────────────────────────────────────────── */
body.app .tag { padding: 3px 9px; font-size: 11px; font-weight: 700; border-radius: 7px; }

/* ── Banners ─────────────────────────────────────────────────────────────── */
body.app .msg { border-radius: var(--r); padding: 14px 16px; font-size: 13.5px; line-height: 1.6; }

/* ── Empty states ────────────────────────────────────────────────────────
   Centred in a dashed frame rather than floating grey text, so an empty
   screen looks deliberate instead of unfinished. */
body.app .empty {
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg);
  background: var(--bg2); padding: 44px 24px; color: var(--muted);
}

/* ── KPI strip ───────────────────────────────────────────────────────────
   Opt-in: <div class="kpis"><div class="kpi"><b>12</b><span>Live routes</span></div>…

   Named kpi, not stat, and that is the point: the public hero further down
   this file already owns `.stats`/`.stat` — a dark band with white numbers.
   Reusing those names put a white card behind each one and left white text on
   white. Scoping to body.app would have fixed the collision one way only,
   since the unscoped public `.stats { background: var(--text) }` would still
   have painted a dark band behind the app strip. Two components with opposite
   palettes need two names. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.kpi {
  background: #fff; border: 1px solid var(--ring); border-radius: var(--r);
  padding: 15px 17px; box-shadow: var(--lift-sm);
}
.kpi b { display: block; font-family: var(--font-display); font-size: 25px; font-weight: 700;
         letter-spacing: -.025em; line-height: 1.1; color: var(--text); }
.kpi span { display: block; margin-top: 3px; font-size: 11px; font-weight: 700;
            text-transform: uppercase; letter-spacing: .06em; color: var(--muted2); }
.kpi.accent b { color: var(--accent); }

@media (max-width: 640px) {
  body.app .wrap > h1 { font-size: 24px; }
  body.app .card { padding: 17px; }
  body.app td, body.app th { padding: 11px 10px; }
}
.skel .line { height: 11px; border-radius: 6px; background: linear-gradient(90deg, var(--surface), #efe9fb, var(--surface)); background-size: 200% 100%; animation: mkshimmer 1.1s linear infinite; margin-bottom: 9px; }
.skel .line.w40 { width: 40%; } .skel .line.w70 { width: 70%; } .skel .line.w25 { width: 25%; }
@keyframes mkshimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.empty-card { text-align: center; padding: 44px 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg2); }
.empty-card h3 { margin: 0 0 6px; font-size: 17px; }
.empty-card p { color: var(--muted); font-size: 14px; max-width: 46ch; margin: 0 auto 16px; }

/* Two-up explainer at the foot of the page. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
@media (max-width: 780px) { .split { grid-template-columns: 1fr; } }
.split .panel h3 { margin: 0 0 8px; font-size: 15px; }
.split .panel p, .split .panel li { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.split .panel ul { margin: 0; padding-left: 18px; }

/* A band is a range, not a quote — styled so nobody mistakes it for one. */
/* A range, not a quote. NOT called `.band` — that class is the 26px stability
   chip, and sharing it would give the price cell a fixed square. */
.price.range { font-size: 19px; letter-spacing: -.02em; text-align: right; line-height: 1.25; }
.price.range small { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted2); letter-spacing: .03em; text-transform: none; }

/* Demand chips. */
.demand { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.demand .lane { border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; background: var(--bg); }
.demand .lane b { font-weight: 700; color: var(--text); }
.demand .lane.unserved { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }

/* ── Arc house style ───────────────────────────────────────────────────────
   Typography and hero treatment lifted from the landing site, so a visitor
   moving between arcmarketing.xyz and the marketplace does not feel handed
   off to a different company. Colours were already shared; this is the part
   that was missing. */
body { font-family: var(--font-body); }

h1, h2, h3, .nav .brand, .stats .stat b, .price {
  font-family: var(--font-display);
  letter-spacing: -.02em;
}
h1 { font-weight: 800; }
.nav .brand { font-size: 20px; font-weight: 800; }

/* Gradient headline word. Used as <h1>Something <span>emphasised</span></h1>. */
.grad {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent);
}

/* Pill above a section heading — the landing site's signature label. */
.section-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-light); color: var(--accent);
  font-size: 11.5px; font-weight: 700; padding: 5px 14px; border-radius: 100px;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px;
}
.section-tag::before { content: ''; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }

/* Tinted hero with the corner glow. */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #f5edff 0%, #ffffff 62%);
  border-bottom: 1px solid var(--border);
  margin: 0 -24px 28px; padding: 46px 24px 34px;
}
.hero::before {
  content: ''; position: absolute; top: -240px; right: -180px;
  width: 620px; height: 620px; pointer-events: none;
  background: radial-gradient(circle, rgba(109, 40, 217, .10) 0%, transparent 70%);
}
.hero > * { position: relative; }
.hero h1 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.1; letter-spacing: -1.4px; max-width: 22ch; }
.hero .lede { font-size: 16px; line-height: 1.72; max-width: 60ch; }

/* Dark stats band, straight off the landing page. */
.stats {
  background: var(--text); border-radius: var(--radius);
  display: flex; flex-wrap: wrap; padding: 22px 10px; margin-top: 26px;
  box-shadow: var(--shadow-md);
}
.stats .stat { flex: 1 1 140px; text-align: center; padding: 4px 18px; position: relative; }
.stats .stat + .stat::before {
  content: ''; position: absolute; left: 0; top: 12%; height: 76%; width: 1px;
  background: rgba(255, 255, 255, .12);
}
.stats .stat b { display: block; font-size: 26px; font-weight: 800; color: #fff; }
.stats .stat span { font-size: 11.5px; font-weight: 600; color: var(--accent-glow); text-transform: uppercase; letter-spacing: .07em; }

/* Buttons pick up the display face and a touch more presence. */
button, .btn { font-family: var(--font-body); font-weight: 700; letter-spacing: -.01em; }
.btn:not(.ghost):not(.sm) { box-shadow: 0 2px 14px rgba(109, 40, 217, .22); }

/* Prose blocks on the explainer pages. */
.prose { max-width: 74ch; }
.prose h3 { font-size: 18px; margin: 0 0 10px; }
.prose p, .prose li { font-size: 14.5px; line-height: 1.72; color: var(--muted); }
.prose li + li { margin-top: 9px; }
.prose li b, .prose p b { color: var(--text); }

/* Numbered steps for "how it works". */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.step { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.step .n {
  width: 30px; height: 30px; border-radius: 9px; display: inline-flex;
  align-items: center; justify-content: center; font-family: var(--font-display);
  font-weight: 800; font-size: 15px; color: #fff; margin-bottom: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.step h4 { margin: 0 0 6px; font-size: 15px; font-family: var(--font-display); }
.step p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* Closing call to action. */
.cta-band {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  border-radius: var(--radius); padding: 34px 30px; text-align: center;
  margin-top: 34px; box-shadow: var(--shadow-md);
}
.cta-band h3 { font-size: 24px; color: #fff; margin: 0 0 8px; }
.cta-band p { color: #e9d5ff; font-size: 14.5px; max-width: 52ch; margin: 0 auto 18px; }
.cta-band .btn { background: #fff; color: var(--accent-dark); }
.cta-band .btn:hover { background: var(--accent-light); }
.cta-band .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }

/* Side-by-side comparison, for "what you see / what you pay". */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.compare > div { padding: 18px 20px; }
.compare > div + div { border-left: 1px solid var(--border); }
.compare .h { font-family: var(--font-display); font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.compare .v { font-size: 22px; font-weight: 800; font-family: var(--font-display); color: var(--accent); letter-spacing: -.02em; }
.compare .n { font-size: 13px; color: var(--muted); line-height: 1.6; margin-top: 6px; }
@media (max-width: 680px) {
  .compare { grid-template-columns: 1fr; }
  .compare > div + div { border-left: none; border-top: 1px solid var(--border); }
}

/* ── Delivery proof gallery ──────────────────────────────────────────────────
   Thumbnail strip on a listing card, and the full-size viewer it opens.
   Screenshots arrive at whatever aspect ratio the supplier's panel happened
   to be, so thumbnails crop to a fixed square (object-fit: cover) to keep the
   strip tidy, and the viewer never crops — the point of opening one is to
   read the numbers in it. */
.mk-gal-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); margin: 12px 0 6px; display: flex; align-items: center; gap: 6px;
}
.mk-gal-n {
  background: var(--accent-light, rgba(168, 85, 247, .14)); color: var(--accent);
  border-radius: 999px; padding: 0 6px; font-size: 10.5px; letter-spacing: 0;
}
.mk-gal { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-thumb {
  position: relative; width: 56px; height: 56px; padding: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft, #f6f4fb);
  cursor: zoom-in; transition: border-color .15s, transform .15s;
}
.mk-thumb:hover { border-color: var(--accent); transform: translateY(-1px); }
.mk-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* "+3" sits over the last visible thumbnail rather than taking a slot of its
   own — the strip stays the same width whether there are 4 images or 40. */
.mk-thumb-more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(17, 12, 26, .68); color: #fff; font-size: 13px; font-weight: 700;
}

.mk-lb {
  position: fixed; inset: 0; z-index: 4000; display: none;
  align-items: center; justify-content: center;
  background: rgba(12, 8, 20, .92); padding: 48px 64px;
  backdrop-filter: blur(3px);
}
.mk-lb.open { display: flex; }
body.mk-lb-locked { overflow: hidden; }
.mk-lb-stage {
  margin: 0; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.mk-lb-stage img {
  max-width: 100%; max-height: calc(100vh - 150px);
  object-fit: contain; border-radius: 10px; background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.mk-lb-stage figcaption {
  color: #e7e2f2; font-size: 13.5px; text-align: center; max-width: 70ch; line-height: 1.6;
}
.mk-lb-x, .mk-lb-nav {
  position: absolute; background: rgba(255, 255, 255, .1); color: #fff;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.mk-lb-x:hover, .mk-lb-nav:hover { background: rgba(255, 255, 255, .22); }
.mk-lb-x:focus-visible, .mk-lb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mk-lb-x { top: 16px; right: 18px; width: 38px; height: 38px; font-size: 16px; }
.mk-lb-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 30px; line-height: 1; padding-bottom: 4px; }
.mk-lb-nav:hover { transform: translateY(-50%) scale(1.06); }
.mk-lb-nav.prev { left: 16px; }
.mk-lb-nav.next { right: 16px; }
.mk-lb-count {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: #cfc7e0; font-size: 12.5px; letter-spacing: .04em;
  background: rgba(255, 255, 255, .08); border-radius: 999px; padding: 4px 12px;
}
/* On a phone the arrows would sit on top of the image at these insets, so they
   drop to the bottom corners where a thumb can reach them anyway. */
@media (max-width: 640px) {
  .mk-lb { padding: 44px 12px 74px; }
  .mk-lb-nav { top: auto; bottom: 14px; transform: none; width: 44px; height: 44px; }
  .mk-lb-nav:hover { transform: none; }
  .mk-lb-nav.prev { left: 20px; }
  .mk-lb-nav.next { right: 20px; }
  .mk-lb-count { bottom: 26px; }
  .mk-lb-stage img { max-height: calc(100vh - 190px); }
}

/* Supplier-side proof list: thumbnail beside its review verdict, so "why is
   this not showing on my listing" is answered without opening anything. */
.proof-item {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px; width: 100%;
}
.proof-item img {
  width: 76px; height: 76px; object-fit: cover; border-radius: 7px;
  border: 1px solid var(--border); flex: none; background: var(--bg-soft, #f6f4fb);
}
.proof-item figcaption { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; min-width: 0; }