/*
 * Motor Trade - CEO and Finance pages.
 *
 * Visual system transcribed from design/reference/01-02-ui-mockup-spec.md:
 * near-white content, white rounded cards with a soft border and no heavy
 * shadow, inset grey panels holding a muted label above a large teal figure,
 * ONE teal accent (primary buttons, headline figures), pale-blue and pale-green
 * status pills, monochrome line icons using currentColor, neutral initials
 * avatars, no emoji, no gradients, no animation.
 *
 * The dark navy sidebar and the white top bar are the shell's
 * (lib/ui-motor-shell.js) and are deliberately not styled here. A page in this
 * file is the content region the shell renders into. Every selector sits under
 * `.motor-ui` and every class is prefixed `mceo-`, and every custom property
 * `--mceo-`, so this file cannot reach the shell or the Sales/Operations
 * stylesheet, which prefixes its own `mui-`.
 *
 * Section and card variant classes (mceo-preorder, mceo-fleet, mceo-capacity,
 * mceo-feature and the mceo-*-section names) carry no styles of their own: they
 * are stable hooks for the integrator and for tests, and inherit .mceo-card and
 * .mceo-section.
 */

.motor-ui {
  --mceo-ink: #0c141d;
  --mceo-ink-soft: #68758a;
  /* #9aa5b4 was a 2.5:1 ratio on the card's white - a line a student could
     not read. This is the lightest ink that still clears 3:1 in the same
     family, so the hierarchy holds and the words are legible. */
  --mceo-ink-faint: #78849a;
  --mceo-line: #ebedf0;
  --mceo-line-strong: #d3d9e0;
  --mceo-bg: #f8f8f6;
  --mceo-surface: #ffffff;
  --mceo-inset: #f3f5f7;
  --mceo-accent: #00858f;
  --mceo-accent-strong: #006e78;
  --mceo-accent-soft: #e2f1f2;
  --mceo-blue: #0a4d87;
  --mceo-blue-soft: #dbeffe;
  --mceo-green: #0f6b4a;
  --mceo-green-soft: #dcf3e8;
  --mceo-amber: #8a5300;
  --mceo-amber-soft: #fdf3e3;
  --mceo-icon: #2f4a63;
  --mceo-strip: #f2f5f9;
  --mceo-radius-pill: 7px;
  --mceo-radius: 14px;
  --mceo-radius-sm: 8px;
  --mceo-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  --mceo-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

.motor-ui .mceo-page {
  box-sizing: border-box;
  min-height: 100%;
  background: var(--mceo-bg);
  color: var(--mceo-ink);
  font-family: var(--mceo-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.motor-ui .mceo-page *,
.motor-ui .mceo-page *::before,
.motor-ui .mceo-page *::after {
  box-sizing: border-box;
}

.motor-ui .mceo-content {
  padding: 30px 28px 48px;
}

/* ---------- composing inside the shell ---------- */

/*
 * The page keeps the near-white content background of the mockups so white
 * cards are never drawn on white, whichever frame it lands in.
 *
 * `mceo-page-standalone` marks a preview that brings its own top bar; like the
 * card variant hooks it carries no styles of its own. `mceo-page-flush` drops
 * this page's content padding for a shell that already pads its content region.
 */

.motor-ui .mceo-page-flush > .mceo-content {
  padding: 0;
}

/* ---------- top bar ---------- */

.motor-ui .mceo-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 28px;
  background: var(--mceo-surface);
  border-bottom: 1px solid var(--mceo-line);
}

.motor-ui .mceo-topbar-firm {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--mceo-ink);
}

.motor-ui .mceo-stats {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.motor-ui .mceo-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  color: var(--mceo-ink-soft);
  white-space: nowrap;
}

.motor-ui .mceo-stat + .mceo-stat {
  border-left: 1px solid var(--mceo-line);
}

.motor-ui .mceo-stat:last-child {
  padding-right: 0;
}

.motor-ui .mceo-stat-label {
  font-size: 15px;
  color: var(--mceo-ink-soft);
}

.motor-ui .mceo-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--mceo-ink);
}

.motor-ui .mceo-stat .mceo-icon {
  color: var(--mceo-accent);
}

/* ---------- page title ---------- */

.motor-ui .mceo-page-head {
  margin-bottom: 18px;
}

.motor-ui .mceo-page-title {
  margin: 0 0 4px;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mceo-ink);
}

.motor-ui .mceo-page-sub {
  margin: 0;
  max-width: 72ch;
  color: var(--mceo-ink-soft);
  font-size: 17px;
}

/* ---------- sections ---------- */

.motor-ui .mceo-section {
  margin-top: 28px;
}

.motor-ui .mceo-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--mceo-ink);
}

.motor-ui .mceo-section-sub {
  margin: 0 0 14px;
  max-width: 72ch;
  color: var(--mceo-ink-soft);
  font-size: 14px;
}

.motor-ui .mceo-empty {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--mceo-line-strong);
  border-radius: var(--mceo-radius);
  background: var(--mceo-surface);
  color: var(--mceo-ink-soft);
  font-size: 14px;
}

.motor-ui .mceo-icon {
  flex: 0 0 auto;
  color: currentColor;
}

.motor-ui .mceo-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--mceo-line);
  border-radius: var(--mceo-radius);
  background: var(--mceo-surface);
  color: var(--mceo-ink);
  font-size: 14px;
}

.motor-ui .mceo-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}

/* ---------- cards ---------- */

.motor-ui .mceo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--mceo-line);
  border-radius: var(--mceo-radius);
  background: var(--mceo-surface);
  box-shadow: var(--mceo-shadow);
  overflow: hidden;
}

.motor-ui .mceo-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.motor-ui .mceo-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  color: var(--mceo-ink);
}

.motor-ui .mceo-card-title .mceo-icon {
  width: 26px;
  height: 26px;
  color: var(--mceo-icon);
}

.motor-ui .mceo-card-sub,
.motor-ui .mceo-card-note {
  margin: 0;
  color: var(--mceo-ink-soft);
  font-size: 15px;
}

.motor-ui .mceo-card-rule {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--mceo-radius-sm);
  background: var(--mceo-inset);
  color: var(--mceo-ink-soft);
  font-size: 13px;
}

/* ---------- photographs ---------- */

/*
 * A PHOTOGRAPH MUST NOT PUSH THE DECISION OFF THE SCREEN.
 *
 * 16/10 is the right shape for a card in a three-column grid. The grid is
 * auto-fit, so a section holding ONE card - warehouse capacity always does -
 * gives that card the full content column, and at 1366 x 768 with the shell's
 * sidebar that is about 1010px: a 631px-tall forecourt photograph, taller than
 * the screen below the top bar. The figures, the Buy control and the reason it
 * is greyed all fell below the fold, and a student in a nine-minute round
 * scrolled past a picture to find the decision.
 *
 * The cap keeps the shape wherever the card is narrow (a three-column grid at
 * 16/10 is about 200px tall and untouched) and stops it running away when the
 * card is wide. object-fit: contain on .mceo-photo below shows the whole
 * vehicle - a cropped car reads as a different car.
 */
.motor-ui .mceo-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 260px;
  border-radius: var(--mceo-radius-sm);
  overflow: hidden;
  background: var(--mceo-inset);
}

.motor-ui .mceo-photo {
  display: block;
  width: 100%;
  height: 100%;
  /* A cropped car is a different car: show the whole vehicle, centered. */
  object-fit: contain;
}

.motor-ui .mceo-media-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--mceo-line-strong);
  color: var(--mceo-ink-faint);
}

.motor-ui .mceo-media-empty .mceo-icon {
  width: 32px;
  height: 32px;
}

/* ---------- pills ---------- */

.motor-ui .mceo-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--mceo-radius-pill);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--mceo-inset);
  color: var(--mceo-ink-soft);
}

.motor-ui .mceo-pill-grey {
  background: var(--mceo-inset);
  color: var(--mceo-ink-soft);
}

.motor-ui .mceo-pill-blue {
  background: var(--mceo-blue-soft);
  color: var(--mceo-blue);
}

.motor-ui .mceo-pill-green {
  background: var(--mceo-green-soft);
  color: var(--mceo-green);
}

.motor-ui .mceo-pill-amber {
  background: var(--mceo-amber-soft);
  color: var(--mceo-amber);
}

/* ---------- inset figure panels ---------- */

.motor-ui .mceo-figures {
  display: flex;
  flex-wrap: wrap;
  border-radius: var(--mceo-radius-sm);
  background: var(--mceo-inset);
  overflow: hidden;
}

.motor-ui .mceo-figure {
  flex: 1 1 140px;
  padding: 16px 20px;
}

.motor-ui .mceo-figure + .mceo-figure {
  border-left: 1px solid var(--mceo-line);
}

.motor-ui .mceo-figure-label {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--mceo-ink-soft);
}

.motor-ui .mceo-figure-value {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mceo-accent);
}

/* The plain reference figure stays ink; the headline figure carries the teal. */
.motor-ui .mceo-figure-ink .mceo-figure-value {
  color: var(--mceo-ink);
}

.motor-ui .mceo-figure-note {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--mceo-ink-soft);
}

/* Full-width stat card: icon, very large teal number, muted label beside it. */
.motor-ui .mceo-statcard {
  padding: 22px 24px;
}

.motor-ui .mceo-bigstats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap: 8px;
}

.motor-ui .mceo-bigstat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 1 1 200px;
  padding: 6px 18px;
}

.motor-ui .mceo-bigstat + .mceo-bigstat {
  border-left: 1px solid var(--mceo-line);
}

.motor-ui .mceo-bigstat .mceo-icon {
  width: 34px;
  height: 34px;
  color: var(--mceo-accent);
}

.motor-ui .mceo-bigstat-value {
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mceo-accent);
}

.motor-ui .mceo-bigstat-label {
  font-size: 17px;
  color: var(--mceo-ink-soft);
}

/* ---------- icon + label + value rows ---------- */

.motor-ui .mceo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  color: var(--mceo-ink-soft);
}

.motor-ui .mceo-row .mceo-icon {
  width: 22px;
  height: 22px;
  color: var(--mceo-icon);
}

.motor-ui .mceo-row-label {
  color: var(--mceo-ink-soft);
}

.motor-ui .mceo-row-value {
  font-weight: 700;
  color: var(--mceo-accent);
}

/* ---------- the two rounds of a seasonal product ---------- */

/* ---------- the market signal ----------
   A compact direction card: the season's lean in words, beside the seasonal
   order it informs. Inline, never a popup; a direction, never a demand
   figure. */
.motor-ui .mceo-signal {
  display: grid;
  gap: 4px;
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid var(--mceo-line);
  border-left: 3px solid var(--mceo-accent);
  border-radius: var(--mceo-radius-sm);
  background: var(--mceo-surface);
  box-shadow: var(--mceo-shadow);
}
.motor-ui .mceo-signal-kicker {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mceo-accent);
}
.motor-ui .mceo-signal-headline {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--mceo-ink);
}
.motor-ui .mceo-signal-list {
  margin: 2px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--mceo-ink-soft);
}
.motor-ui .mceo-signal-list li + li {
  margin-top: 2px;
}
.motor-ui .mceo-signal-note {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--mceo-ink-faint);
}

/* ---------- order controls ---------- */

.motor-ui .mceo-order {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--mceo-line);
}

.motor-ui .mceo-order-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mceo-ink-soft);
}

.motor-ui .mceo-order-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.motor-ui .mceo-order-input {
  flex: 0 1 110px;
  padding: 10px 12px;
  border: 1px solid var(--mceo-line-strong);
  border-radius: var(--mceo-radius-sm);
  background: var(--mceo-surface);
  color: var(--mceo-ink);
  font: inherit;
  font-weight: 700;
}

.motor-ui .mceo-order-controls .mceo-btn {
  flex: 1 1 auto;
}

.motor-ui .mceo-order-input:focus-visible,
.motor-ui .mceo-btn:focus-visible {
  outline: 2px solid var(--mceo-accent);
  outline-offset: 2px;
}

.motor-ui .mceo-order-locked {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--mceo-radius-sm);
  background: var(--mceo-green-soft);
  color: var(--mceo-green);
  font-size: 14px;
  font-weight: 600;
}

.motor-ui .mceo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border: 1px solid transparent;
  border-radius: var(--mceo-radius-sm);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.motor-ui .mceo-btn-primary {
  background: var(--mceo-accent);
  color: #ffffff;
}

.motor-ui .mceo-btn-primary:hover {
  background: var(--mceo-accent-strong);
}

.motor-ui .mceo-btn-secondary {
  background: var(--mceo-surface);
  border-color: var(--mceo-accent);
  color: var(--mceo-accent);
}

.motor-ui .mceo-btn-quiet {
  background: var(--mceo-inset);
  color: var(--mceo-ink-soft);
}

.motor-ui .mceo-btn[disabled] {
  background: var(--mceo-inset);
  border-color: var(--mceo-line-strong);
  color: var(--mceo-ink-faint);
  cursor: not-allowed;
}

/* ---------- inline blockers (never full screen, never a popup) ---------- */

.motor-ui .mceo-blocker {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--mceo-radius-sm);
  background: var(--mceo-strip);
  color: var(--mceo-ink);
  font-size: 16px;
}

.motor-ui .mceo-blocker .mceo-icon {
  width: 24px;
  height: 24px;
  color: var(--mceo-icon);
}

.motor-ui .mceo-blocker-blue {
  background: var(--mceo-strip);
}

.motor-ui .mceo-blocker-amber {
  background: var(--mceo-amber-soft);
}

.motor-ui .mceo-blocker-amber .mceo-icon {
  color: var(--mceo-amber);
}

.motor-ui .mceo-blocker-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.motor-ui .mceo-blocker-sentence {
  font-weight: 600;
  color: var(--mceo-ink);
}

.motor-ui .mceo-blocker-next {
  font-size: 15px;
  color: var(--mceo-ink-soft);
}

.motor-ui .mceo-blocker-ask {
  font-weight: 600;
  color: var(--mceo-ink);
}

/* The reason a CONTROL is off, as opposed to a reason the CARD is blocked.
   A disabled button has to say why and what to do next on the card itself: a
   disabled button takes no keyboard focus and a tablet has no hover, so a
   `title` tooltip reaches nobody in a classroom. The note belongs to the
   button above it, so it sits tighter than the card's own 14px rhythm. */
.motor-ui .mceo-blocker-disabled {
  margin-top: -6px;
}

/* A STRIP THAT SAYS "NOT YOURS TO PRESS" IS NOT A STRIP THAT SAYS "DONE".
   .mceo-order-locked is green because it reports a thing the firm HAS done -
   bought, hired, filed. The same strip also carries the line that says the
   decision sits in another chair, or that the card is shut right now, and in
   green a student reading at arm's length takes it for a tick: they see a
   green panel on the Second showroom card and believe the firm owns one. This
   modifier keeps the shape and the icon and drops the claim: neutral grey ink
   on the same inset panel the rest of the card already uses. */
.motor-ui .mceo-order-locked.mceo-order-elsewhere {
  background: var(--mceo-inset);
  color: var(--mceo-ink);
  border: 1px solid var(--mceo-line-strong);
}

.motor-ui .mceo-order-locked.mceo-order-elsewhere .mceo-icon {
  color: var(--mceo-ink-soft);
}

/* ---------- locked / blurred ---------- */

.motor-ui .mceo-card-locked {
  isolation: isolate;
}

.motor-ui .mceo-blurred {
  display: flex;
  flex-direction: column;
  gap: 12px;
  filter: blur(5px);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

.motor-ui .mceo-lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
  color: var(--mceo-ink);
}

.motor-ui .mceo-lock .mceo-icon {
  width: 26px;
  height: 26px;
  color: var(--mceo-ink-soft);
}

.motor-ui .mceo-lock-when {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.motor-ui .mceo-lock-what {
  margin: 0;
  max-width: 34ch;
  font-size: 13px;
  color: var(--mceo-ink-soft);
}

/* ---------- avatars ---------- */

.motor-ui .mceo-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #828993;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.motor-ui .mceo-avatar-empty {
  background: var(--mceo-inset);
  border: 1px dashed var(--mceo-line-strong);
  color: var(--mceo-ink-faint);
}

/* ---------- combined work queue ---------- */

.motor-ui .mceo-queue {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.motor-ui .mceo-queue-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--mceo-line);
  border-radius: var(--mceo-radius-sm);
  background: var(--mceo-surface);
}

.motor-ui .mceo-queue-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mceo-accent-soft);
  color: var(--mceo-accent);
  font-size: 13px;
  font-weight: 700;
}

.motor-ui .mceo-queue-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}

.motor-ui .mceo-queue-label {
  font-weight: 600;
}

.motor-ui .mceo-queue-detail {
  font-size: 13px;
  color: var(--mceo-ink-soft);
}

/* the one live job, and the ones already done */

.motor-ui .mceo-queue-item-now {
  border-color: var(--mceo-accent);
  box-shadow: inset 3px 0 0 0 var(--mceo-accent);
}

.motor-ui .mceo-queue-item-done .mceo-queue-label {
  color: var(--mceo-ink-soft);
  text-decoration: line-through;
}

.motor-ui .mceo-queue-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.motor-ui .mceo-queue-tags .mceo-pill {
  padding: 3px 9px;
  font-size: 12px;
}

.motor-ui .mceo-section-flag {
  margin-left: 2px;
  padding: 3px 9px;
  border-radius: var(--mceo-radius-pill);
  background: var(--mceo-accent-soft);
  color: var(--mceo-accent-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* ---------- margin table ---------- */

/*
 * A TABLE THAT SCROLLS HAS TO LOOK LIKE ONE.
 *
 * The margin table carries five columns and every cell is nowrap, so on a
 * phone it is wider than the card and this box scrolls it. It scrolled
 * silently: the student saw LINE, COST and SELLING PRICE ending at a clean
 * edge, with no cue that VAT ON THE MARGIN and MARGIN - the two columns the
 * whole table exists to teach - were a swipe away. The shadow below appears
 * only at an edge that still has content behind it and fades out when that
 * edge is reached, and it is drawn in CSS, so no script and no extra element.
 */
.motor-ui .mceo-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--mceo-line);
  border-radius: var(--mceo-radius);
  background-color: var(--mceo-surface);
  background-image:
    linear-gradient(to right, var(--mceo-surface), rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--mceo-surface), rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(12, 20, 29, 0.18), rgba(12, 20, 29, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(12, 20, 29, 0.18), rgba(12, 20, 29, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

.motor-ui .mceo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.motor-ui .mceo-table th,
.motor-ui .mceo-table td {
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--mceo-line);
}

.motor-ui .mceo-table thead th {
  background: var(--mceo-inset);
  color: var(--mceo-ink-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.motor-ui .mceo-table .mceo-cell-accent {
  color: var(--mceo-accent);
  font-weight: 700;
}

.motor-ui .mceo-table tbody tr:last-child th,
.motor-ui .mceo-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- narrow screens ---------- */

/* ---------- the full warehouse, stated inline ---------- */

/* Buying is what stops. Selling is never blocked, and neither is this card:
   it is one strip inside the card, never a dialog, never a full-screen page. */

.motor-ui .mceo-capacity[data-buying="blocked"] {
  border-color: var(--mceo-line-strong);
}

.motor-ui .mceo-capacity[data-buying="blocked"] .mceo-blocker-amber {
  border: 1px solid rgba(138, 83, 0, 0.18);
}

@media (max-width: 640px) {
  .motor-ui .mceo-content {
    padding: 16px 16px 40px;
  }

  .motor-ui .mceo-topbar {
    padding: 12px 16px;
    align-items: flex-start;
    flex-direction: column;
  }

  .motor-ui .mceo-stat:first-child {
    padding-left: 0;
  }

  .motor-ui .mceo-grid {
    grid-template-columns: 1fr;
  }

  .motor-ui .mceo-queue-item {
    flex-wrap: wrap;
  }

  .motor-ui .mceo-queue-tags {
    width: 100%;
    padding-left: 36px;
    justify-content: flex-start;
  }

  .motor-ui .mceo-figure + .mceo-figure {
    border-left: 0;
    border-top: 1px solid var(--mceo-line);
  }

  .motor-ui .mceo-bigstat + .mceo-bigstat {
    border-left: 0;
    border-top: 1px solid var(--mceo-line);
  }

  .motor-ui .mceo-bigstat-value {
    font-size: 32px;
  }

  .motor-ui .mceo-page-title {
    font-size: 24px;
  }
}

@media print {
  .motor-ui .mceo-card {
    box-shadow: none;
  }
}

/* My desk carries the staff SUMMARY; the cards that hire live on the Staff
   page. Without this the link reads as body text and nobody presses it. */
.mceo-staff-link { margin: 12px 0 0; }
.mceo-staff-link-btn {
  font: 700 13px/1 Inter, system-ui, sans-serif;
  padding: 10px 16px;
  border-radius: 9px;
  border: 1px solid var(--border, rgba(15, 23, 42, .18));
  background: var(--card, #fff);
  color: inherit;
  cursor: pointer;
}
.mceo-staff-link-btn:hover { filter: brightness(.97); }

/* ---------- My desk: the picture cards and the CEO's primary decision ----
   The Finance desk (renderFinanceDesk, lib/ui-motor-finance.js) and the CEO
   desk (renderCeoDesk, lib/ui-motor-ceo.js). White cards on the near-white
   content, the ONE teal accent, values read from the shared tokens through
   var(--mt-*, fallback). No gradients, no emoji. */

.motor-ui .mceo-deskgrid {
  display: grid;
  gap: var(--mt-space-5, 22px);
  /* Two cards across on a laptop: at 430px a third track no longer fits the
     shell's content column, so the four desk cards keep the 2x2 rhythm. */
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  align-items: stretch;
}

.motor-ui .mceo-deskcard .mceo-media {
  aspect-ratio: 16 / 9;
  /* Jäänajo: both card rows and their action buttons stay on a 1366x768
     screen without hunting - the photo is large enough to judge the vehicle
     and no larger. */
  max-height: 120px;
}

.motor-ui .mceo-desk-line {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--mt-ink, #16202c);
}

/* Stock space: the count and the slot indicator. */
.motor-ui .mceo-spacecount {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}
.motor-ui .mceo-spacecount strong {
  font-size: 19px;
  font-weight: 800;
  color: var(--mt-ink, #16202c);
  font-variant-numeric: tabular-nums;
}
.motor-ui .mceo-spacecount span {
  font-size: 13px;
  font-weight: 700;
  color: var(--mt-ink-muted, #5d6a78);
}
.motor-ui .mceo-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.motor-ui .mceo-slot {
  width: 22px;
  height: 14px;
  border: 1.5px solid var(--mt-line-strong, #d3d9e0);
  border-radius: 4px;
  background: var(--mt-surface, #ffffff);
}
.motor-ui .mceo-slot-used {
  background: var(--mt-accent, #00858f);
  border-color: var(--mt-accent, #00858f);
}

/* VAT and Funding: the photograph left, the one headline figure right. */
.motor-ui .mceo-split {
  display: grid;
  grid-template-columns: minmax(120px, 42%) 1fr;
  gap: var(--mt-space-4, 16px);
  align-items: stretch;
}
.motor-ui .mceo-split .mceo-media {
  aspect-ratio: 4 / 3;
  max-height: none;
  height: 100%;
}
.motor-ui .mceo-split-figure {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--mt-radius-sm, 10px);
  background: var(--mt-inset, #f3f5f7);
  min-width: 0;
}
.motor-ui .mceo-split-label {
  font-size: var(--mt-font-size-xs, 10.5px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mt-ink-muted, #5d6a78);
}
.motor-ui .mceo-split-value {
  font-size: 26px;
  line-height: 1.15;
  font-weight: 800;
  color: var(--mt-accent-strong, #006e78);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.motor-ui .mceo-split-note {
  font-size: var(--mt-font-size-sm, 12.5px);
  color: var(--mt-ink-muted, #5d6a78);
}
.motor-ui .mceo-desk-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.motor-ui .mceo-desk-actions .mceo-btn {
  flex: 1 1 140px;
}

/* The CEO desk: the live decision full-width and large, the rest as links. */
.motor-ui .mceo-desk-primary {
  margin: 0 0 var(--mt-space-6, 32px);
}
.motor-ui .mceo-fleetdesk {
  display: grid;
  /* The floor that ends the narrow-text-pillar failure: the photograph and
     the facts sit side by side on a laptop, and the card collapses to one
     column (below) rather than ever squeezing into a pillar of text. */
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: var(--mt-space-5, 22px);
  min-width: min(100%, 560px);
}
.motor-ui .mceo-fleetdesk .mceo-media {
  aspect-ratio: 4 / 3;
  max-height: none;
  height: 100%;
}
.motor-ui .mceo-fleetdesk-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.motor-ui .mceo-fleetdesk-kicker {
  margin: 0;
  font-size: var(--mt-font-size-xs, 10.5px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mt-ink-muted, #5d6a78);
}
.motor-ui .mceo-fleetdesk-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--mt-ink, #16202c);
  overflow-wrap: anywhere;
}
.motor-ui .mceo-fleetdesk-need {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--mt-ink-soft, #3c4753);
}
.motor-ui .mceo-fleetdesk-quiet { display: block; }

.motor-ui .mceo-desk-others .mceo-section-title {
  margin-bottom: 4px;
}
.motor-ui .mceo-desklinks {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.motor-ui .mceo-desklink {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--mt-line, #e3e7ea);
  border-radius: var(--mt-radius, 14px);
  background: var(--mt-surface, #ffffff);
  color: var(--mt-ink, #16202c);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--mt-shadow, 0 1px 2px rgba(16, 26, 40, 0.05));
}
.motor-ui .mceo-desklink:hover {
  border-color: var(--mt-accent-line, #9fd3d6);
}
.motor-ui .mceo-desklink:focus-visible {
  outline: 2px solid var(--mt-accent-strong, #006e78);
  outline-offset: 2px;
}
.motor-ui .mceo-desklink .mceo-icon {
  flex: 0 0 auto;
  color: var(--mt-slate, #7d8b9e);
}
.motor-ui .mceo-desklink-body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 1px;
}
.motor-ui .mceo-desklink-body strong {
  font-size: 14px;
  font-weight: 700;
}
.motor-ui .mceo-desklink-body span {
  font-size: var(--mt-font-size-sm, 12.5px);
  color: var(--mt-ink-muted, #5d6a78);
}

@media (max-width: 900px) {
  .motor-ui .mceo-fleetdesk {
    grid-template-columns: 1fr;
    min-width: 0;
  }
  .motor-ui .mceo-fleetdesk .mceo-media {
    aspect-ratio: 16 / 9;
    height: auto;
  }
  .motor-ui .mceo-split {
    grid-template-columns: 1fr;
  }
  .motor-ui .mceo-split .mceo-media {
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

/* Jäänajo: at 1366x768 the desk's two card rows and their action buttons must
   stay on screen. The cards give up padding and photo height, never the
   figures or the buttons. Nothing here applies at 1440x900 and up. */
@media (max-height: 780px) {
  .motor-ui .mceo-card { padding: 14px 16px; gap: 10px; }
  .motor-ui .mceo-deskgrid { gap: 12px; }
  .motor-ui .mceo-deskcard .mceo-media { max-height: 88px; }
  .motor-ui .mceo-split .mceo-media { height: auto; max-height: 96px; }
  .motor-ui .mceo-split-figure { padding: 10px 12px; }
  .motor-ui .mceo-figure-value { font-size: 19px; }
  .motor-ui .mceo-card-title { font-size: 15px; }
}