/*
 * R32 (owner 16.10.2026). One file for the R32 screens, linked after the
 * Motor sheets in index.html, so styles.css itself is untouched.
 *
 *  1. Investments: a locked card names its own round.
 *  2. The teacher's firm setup board.
 *  3. The deal card on Do now (player-to-player trade).
 */

/* 1. Investments: "Opens in Round 2" for the whole page in Round 1. */
.motor-invest-locked__badge[data-opens]::after { content: attr(data-opens); }

/* 1b. R33 (owner 18.10.2026): the Investments page without helper text -
   the same look as the Do now deal card. Name, two big figures, one teal
   button per card; the market product adds Buy one / Sell one; the
   portfolio is one table. Colours from the Trade view's tokens. */
.motor-theme .invest-page-hero .invest-hero-title { font-size: 1.35rem; }
.motor-theme .invest-hero-note { margin: 4px 0 0; font-size: 14px; color: #3c4753; }
.motor-theme .invest-section-head { margin: 14px 0 8px; }
.motor-theme .invest-section-title { font-size: 16px; }
.motor-theme .invest-prop-grid-wave3 { gap: 12px; margin-bottom: 4px; }
/* Owner 18.10.2026: a simulation, not a game - quiet rows, one figure a line,
   label left and value right, the same height on every card, no grey boxes
   and nothing in capitals. */
.motor-theme .motor-capital-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 10px; }
.motor-theme .motor-capital-card__name { display: block; font-size: 16px; line-height: 1.25; font-weight: 700; color: #16202c; min-height: 40px; }
.motor-theme .motor-capital-card__figures,
.motor-theme .equity-card-wave3__figures { display: block; border-top: 1px solid #e3e7eb; }
.motor-theme .motor-capital-card__figure,
.motor-theme .equity-card-wave3__figures > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #e3e7eb; min-width: 0; }
.motor-theme .motor-capital-card__figure span,
.motor-theme .equity-card-wave3__figures span { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #5d6a78; white-space: nowrap; }
.motor-theme .motor-capital-card__figure b,
.motor-theme .equity-card-wave3__figures b { font-size: 17px; line-height: 1.2; font-weight: 700; color: #16202c; font-variant-numeric: tabular-nums; font-family: inherit; text-align: right; }
.motor-theme .equity-card-wave3__figures .equity-card-wave3__price { color: #16202c; }
.motor-theme .equity-card-wave3__figures .equity-card-wave3__chg { font-size: 17px; }
.motor-theme .motor-capital-card__state { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: #e2f1f2; color: #006e78; font-size: 13px; font-weight: 800; }
.motor-theme .motor-capital-card .btn-prop-buy { align-self: stretch; min-height: 44px; border-radius: 10px; background: #00858f !important; font-size: 15px !important; letter-spacing: 0; text-transform: none; }
.motor-theme .motor-capital-card .btn-prop-buy:hover:not([disabled]) { background: #006e78 !important; }
.motor-theme .motor-capital-card .btn-prop-buy:disabled { opacity: .55; cursor: not-allowed; }
.motor-theme .motor-invest-locked { min-height: 0; }
/* The lock's one line sits in its pill: the badge's rows are centred as a
   block, not packed at the top (the line used to hang under the pill). */
.motor-theme .motor-invest-locked__badge { align-content: center; }
.motor-theme .equity-card-wave3 { padding: 14px 16px; border-radius: 12px; }
.motor-theme .equity-card-wave3__head { margin-bottom: 10px; }
.motor-theme .equity-card-wave3__name { font-size: 17px; }
.motor-theme .equity-card-wave3__sector { font-size: 12px; letter-spacing: .04em; color: #3c4753; }
.motor-theme .equity-card-wave3__hold { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: #006e78; font-family: inherit; }
.motor-theme .equity-card-wave3__warn { margin: 8px 0 0; font-size: 13px; }
.motor-theme .equity-card-wave3__actions { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 12px; }
.motor-theme .equity-btn-wave3 { min-height: 44px; border-radius: 10px; font-size: 15px; letter-spacing: 0; text-transform: none; }
.motor-theme .equity-btn-wave3--buy { background: #00858f; border-color: #00858f; color: #fff; }
.motor-theme .equity-btn-wave3--buy:hover:not([disabled]) { background: #006e78; border-color: #006e78; }
.motor-theme .equity-btn-wave3--sell { background: #fff; border-color: #d3d9e0; color: #3c4753; }
.motor-theme .equity-btn-wave3--sell:hover:not([disabled]) { border-color: #00858f; color: #006e78; }
.motor-theme .invest-big-chart-card { margin: 12px 0 0; }
.motor-theme .invest-holdings { margin-top: 16px; padding: 14px 16px; border: 1px solid #e3e7ea; border-radius: 12px; background: #fff; }
.motor-theme .invest-holdings__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.motor-theme .invest-holdings__head > b { font-size: 22px; font-weight: 800; color: #16202c; font-variant-numeric: tabular-nums; }
.motor-theme .invest-holdings__table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 15px; color: #16202c; }
.motor-theme .invest-holdings__table th { padding: 6px 8px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #3c4753; border-bottom: 1px solid #e3e7ea; }
.motor-theme .invest-holdings__table td { padding: 8px; border-bottom: 1px solid #eef1f3; font-variant-numeric: tabular-nums; }
.motor-theme .invest-holdings__table tr:last-child td { border-bottom: 0; }
.motor-theme .invest-holdings__table td:last-child { text-align: right; width: 1%; white-space: nowrap; }
.motor-theme .invest-holdings__table .btn-prop-sell { min-height: 36px; padding: 6px 14px; border-radius: 10px; font-size: 14px; }

/* 2. The teacher's firm setup board - one row per firm, roles taken, the
   confirmed location and ready or not (app.js motorTeacherSetupBoardHtml).
   The setup ends when every firm is ready. */
.motor-setup-board { padding: 18px 20px; min-height: 220px; }
.motor-setup-board__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.motor-setup-board__head strong { font-size: 15px; font-weight: 800; color: #1b252a; }
.motor-setup-board__head span { font-size: 12px; color: #4f5d66; }
.motor-setup-board__rows { display: grid; gap: 6px; }
.motor-setup-board__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(90px, .6fr) minmax(0, 1.4fr) 90px; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #e3e7ea; border-radius: 10px; background: #f9fafb; font-size: 13px; color: #344054; }
.motor-setup-board__row.is-ready { border-color: #9fd8db; background: #effafa; }
.motor-setup-board__firm { min-width: 0; font-weight: 700; }
.motor-setup-board__firm > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.motor-setup-board__roles, .motor-setup-board__place { color: #4f5d66; }
.motor-setup-board__state { justify-self: end; padding: 3px 10px; border-radius: 999px; background: #eef1f3; color: #5e6773; font-size: 12px; font-weight: 800; }
.motor-setup-board__row.is-ready .motor-setup-board__state { background: #008b94; color: #fff; }

/* 3. The deal between two firms on Do now (lib/ui-motor-trade.js
   renderLaneDealCard). Inside .motor-trade, so the tokens and the teal
   buttons are the Trade view's own.

   Owner 18.10.2026 (proportions): the card - pictures, texts, offer - is
   the big thing; "Talk to buyer/seller" sits under the offer, smaller.
   Pictures 130px tall (three in a row 110px), the vehicle line 30px, the
   other firm and the classmate both 22px (no "From"/"To"), the move clock 15px; the customer band
   under the vehicle row with its figure at 30px; the price box and the one
   teal button 64px tall with 28px digits, the received offer 36px; the chat
   list at most 150px and scrolling inside itself, its box 40px. The whole
   card stands inside 1366x768 and 1280x720 without page scrolling: the
   content column is a flex column down to the card, and the chat list is
   the one part that gives (test/motor-r33-deal-card-proportions.browser.test.js). */
#panel-motor-now .motor-deal-host { min-width: 0; }
/* Everything is on the card: the old inline deal host under it stays empty. */
#panel-motor-now:has(.motor-deal) #customer-orders-inventory-now,
#panel-motor-now:has(.motor-deal) #customer-orders-list-now { display: none; }
.motor-deal { background: var(--mtr-surface, #fff); border: 1px solid var(--mtr-line, #e3e7ea); border-radius: 16px; padding: 16px 20px 14px; box-shadow: var(--mtr-shadow, 0 1px 2px rgba(16, 26, 40, .05)); }
/* The role line and the firm's cash open the text column beside the pictures. */
.motor-deal__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 0 2px; }
.motor-deal__role { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mtr-accent-strong, #006e78); }
/* The vehicle row, then (buyer) the customer band under it. */
.motor-deal__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }
.motor-deal__vehicle { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; min-width: 0; }
.motor-deal__photos { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.motor-deal__photo { flex: 0 0 150px; width: 150px; height: 130px; object-fit: contain; border-radius: 12px; background: var(--mtr-inset, #f3f5f7); }
.motor-deal__photo--empty { display: flex; align-items: center; justify-content: center; color: var(--mtr-ink-muted, #5d6a78); }
/* Three in a row (the CEO lot) a little smaller, so the text keeps its column. */
.motor-deal__photos[data-count="3"] { gap: 8px; }
.motor-deal__photos[data-count="3"] .motor-deal__photo { flex-basis: 112px; width: 112px; height: 110px; border-radius: 10px; }
.motor-deal__photo-more { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 999px; background: var(--mtr-inset, #f3f5f7); color: var(--mtr-ink-soft, #3c4753); font-size: 14px; font-weight: 800; }
/* The text keeps at least 180px beside the pictures; narrower than that it
   drops under them instead of squeezing. */
.motor-deal__vehicle-text { flex: 1 1 180px; min-width: 0; }
.motor-deal__title { margin: 0 0 4px; font-size: 30px; line-height: 1.1; font-weight: 800; color: var(--mtr-ink, #16202c); }
/* Who you deal with, large: the firm's mark and name, then the classmate. */
.motor-deal__party { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 4px; font-size: 22px; line-height: 1.2; font-weight: 800; color: var(--mtr-ink, #16202c); min-width: 0; }
.motor-deal__party .motor-firm-mark-line { min-width: 0; }
.motor-deal__party .motor-firm-mark-line > span:last-child { overflow-wrap: anywhere; }
.motor-deal__party .motor-firm-mark--card { --firm-mark-size: 28px; border-radius: 8px; font-size: 11px; }
.motor-deal__person { font-size: inherit; font-weight: 800; color: var(--mtr-ink, #16202c); }
.motor-deal__person::before { content: '·'; margin-right: 8px; color: var(--mtr-ink-muted, #5d6a78); }
.motor-deal__time { margin: 0; font-size: 15px; }
#panel-motor-now .motor-deal__time .motor-now-card__clock { float: none; margin: 0; font-weight: 700; color: var(--mtr-accent-strong, #006e78); }
/* The customer band: face, "Your customer" and the name on one line, the
   promise under it, the figure large at the right. */
.motor-deal__customer { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 12px; border: 1px solid var(--mtr-accent-line, #9fd3d6); border-radius: 12px; background: var(--mtr-accent-soft, #e2f1f2); min-width: 0; }
.motor-deal__customer-face { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #fff; }
.motor-deal__customer-text { flex: 1 1 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'label name total' 'offer offer total'; align-items: center; column-gap: 8px; row-gap: 0; min-width: 0; }
.motor-deal__customer-label { grid-area: label; font-size: 12px; color: var(--mtr-ink-muted, #5d6a78); }
.motor-deal__customer-name { grid-area: name; display: flex; align-items: center; gap: 6px; font-size: 16px; line-height: 1.25; font-weight: 800; color: var(--mtr-ink, #16202c); min-width: 0; }
.motor-deal__customer-name > span { min-width: 0; overflow-wrap: anywhere; }
.motor-deal__customer-offer { grid-area: offer; font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--mtr-ink-soft, #3c4753); }
.motor-deal__customer-total { grid-area: total; justify-self: end; margin-left: 12px; font-size: 30px; line-height: 1.1; font-weight: 800; color: var(--mtr-accent-strong, #006e78); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The offer boxes. */
.motor-deal__offers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.motor-deal__box { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; border: 1px solid var(--mtr-line, #e3e7ea); border-radius: 12px; background: var(--mtr-inset, #f3f5f7); min-width: 0; }
.motor-deal__box--mine { background: var(--mtr-surface, #fff); border-color: var(--mtr-accent-line, #9fd3d6); }
.motor-deal__box-title { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--mtr-ink-soft, #3c4753); }
.motor-deal__amount { margin: 0; font-size: 36px; line-height: 1.1; font-weight: 800; color: var(--mtr-ink, #16202c); font-variant-numeric: tabular-nums; }
.motor-deal__box .motor-trade__btn { min-height: 44px; font-size: 15px; }
.motor-deal__box .motor-trade__btn--primary { min-height: 64px; font-size: 17px; }
/* Accept offer and Skip deal share one row under the received figure. */
.motor-deal__box--received .motor-deal__actions { display: flex; flex-wrap: nowrap; gap: 10px; margin-top: auto; }
.motor-deal__box--received .motor-deal__actions .motor-trade__btn--primary { flex: 1 1 auto; width: auto; min-width: 0; padding-left: 10px; padding-right: 10px; }
/* Accept and Skip stay side by side on a narrow window too (owner 19.10.2026). */
/* Owner 19.10.2026: Skip read as a second big choice beside Accept. It is a
   small quiet text button under Accept now. */
.motor-deal__box--received .motor-deal__actions { flex-direction: column; align-items: stretch; gap: 4px; }
#panel-motor-now .motor-deal__box--received .motor-deal__actions .motor-deal__skip,
.motor-deal__box--received .motor-deal__actions .motor-deal__skip { flex: 0 0 auto; align-self: flex-end; min-height: 0 !important; margin: 0; padding: 2px 4px; border: 0; background: none; box-shadow: none; font-size: 13px !important; font-weight: 500; color: var(--mtr-ink-muted, #5d6a78); text-decoration: underline; cursor: pointer; }
.motor-deal__box--received > .motor-trade__btn { margin-top: auto; }
.motor-deal__box .motor-trade__btn + .motor-deal__muted { margin-top: 4px; }
/* The price box and its button: the box 64px with 28px digits, on one row
   with the button when the box is wide enough, else the button under it (it
   keeps the Trade view's .motor-trade__counter-row name, so a row is found
   the same way on both surfaces). */
.motor-trade .motor-deal__form { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 10px 12px; flex: 1 1 auto; }
.motor-deal__form .motor-trade__btn { flex: 1 1 auto; width: auto; min-width: 170px; margin: 0; }
.motor-deal__form .motor-deal__waiting { flex: 1 1 100%; }
.motor-deal__price { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1 1 200px; min-width: 0; }
.motor-deal__currency { font-size: 28px; font-weight: 800; color: var(--mtr-ink-soft, #3c4753); }
.motor-deal__input { flex: 1 1 auto; min-width: 0; height: 64px; padding: 4px 16px; font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; border: 1px solid var(--mtr-line-strong, #d3d9e0); border-radius: 10px; background: #fff; color: var(--mtr-ink, #16202c); }
.motor-deal__input:focus { outline: 2px solid var(--mtr-accent, #00858f); outline-offset: 1px; }
.motor-deal__waiting { margin: 4px 0 0; font-size: 16px; font-weight: 800; color: var(--mtr-accent-strong, #006e78); }
.motor-deal__muted { margin: 4px 0 0; font-size: 14px; color: var(--mtr-ink-muted, #5d6a78); }
.motor-deal__buy-missing { margin: 4px 0 2px; }
.motor-deal__agreed { display: grid; gap: 10px; padding: 12px 14px 14px; border: 1px solid var(--mtr-accent-line, #9fd3d6); border-radius: 12px; background: var(--mtr-surface, #fff); }
.motor-deal__agreed-line { margin: 0; font-size: 17px; font-weight: 800; color: var(--mtr-ink, #16202c); }
.motor-deal__deliver { min-height: 64px; font-size: 17px; }
.motor-deal__note { margin: 0; font-size: 13px; color: var(--mtr-ink-muted, #5d6a78); }
.motor-deal__box:only-child { grid-column: 1 / -1; }
.motor-deal__box:only-child .motor-deal__form { max-width: 560px; }
/* Counteroffer and Skip quiet, 44px, 12px apart; the Skip row only when it
   has no received offer to stand beside. */
.motor-deal__box .motor-trade__btn--quiet { min-height: 44px; }
.motor-deal__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.motor-deal__skip { flex: 0 0 auto; min-height: 44px; padding: 8px 18px; }
/* The chat, under the offer and visibly second: a 12px label, the list at
   most 150px and scrolling inside itself, a 40px box with Send. */
.motor-deal__talk { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; margin-top: 12px; }
.motor-deal__talk-title { margin: 0; flex: 0 0 auto; font-size: 12px; color: var(--mtr-ink-muted, #5d6a78); }
#panel-motor-now .motor-deal__talk .motor-trade__chat { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; margin-top: 0; padding-top: 0; border-top: 0; }
/* Owner 19.10.2026: with an offer on the table the card has two boxes, and an
   80px chat list pushed the message field under the screen's edge at
   1366x768, 1280x720 and 1240x870. The list may shrink to one message line
   (44px); the field stays on screen. */
#panel-motor-now .motor-deal__talk .motor-trade__chat-list { flex: 1 1 150px; margin-top: 4px; min-height: 44px; max-height: 150px; padding: 6px 10px; border: 1px solid var(--mtr-line, #e3e7ea); border-radius: 10px; background: var(--mtr-inset, #f3f5f7); font-size: 14px; }
#panel-motor-now .motor-deal__talk .motor-trade__composer { flex: 0 0 auto; margin-top: 6px; }
#panel-motor-now .motor-deal__talk .motor-trade__composer-row .motor-trade__input { min-height: 40px; height: 40px; padding: 4px 12px; font-size: 14px; }
#panel-motor-now .motor-deal__talk .motor-trade__composer-row .motor-trade__btn { min-height: 40px; padding: 6px 18px; font-size: 14px; }
.motor-deal__switch { margin-top: 12px; }
/* In the card header (owner 19.10.2026): a small button beside "You are buying". */
/* Owner 19.10.2026: it read as a badge; now a filled button with an arrow. */
#panel-motor-now .motor-deal__head .motor-deal__switch { margin: 0; padding: 7px 14px; min-height: 0; font-size: 14px; line-height: 1.2; align-self: center; background: var(--mui-accent, #00858f); color: #fff; border-color: var(--mui-accent, #00858f); box-shadow: 0 2px 6px rgba(0, 80, 90, 0.25); }
#panel-motor-now .motor-deal__head .motor-deal__switch:hover { background: var(--mui-accent-strong, #006e78); color: #fff; }
/* While a deal card is up, the Do now body is a column that ends 12px above
   the screen's bottom: its top (--motor-now-top, under the status bar, the
   round strip and the page padding) is read from the real column on each
   render (app.js renderMotorNow), so a status bar that wraps to two lines
   still leaves the card on screen. The heading and the strip keep their
   height, the card takes the rest and gives from its chat list first. On a
   tall screen the card ends under its chat. */
#panel-motor-now:has(.motor-now-layout--deal) .page-content { padding-bottom: 12px; }
#panel-motor-now:has(.motor-now-layout--deal) #motor-now-body { display: flex; flex-direction: column; min-height: 0; height: calc(100vh - var(--motor-now-top, 122px) - 12px); }
#panel-motor-now #motor-now-body > .motor-now-layout--deal { flex: 1 1 auto; min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
#panel-motor-now .motor-now-layout--deal .motor-deal-host { display: flex; flex-direction: column; min-height: 0; }
#panel-motor-now .motor-deal { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; }
#panel-motor-now .motor-deal__top, #panel-motor-now .motor-deal__offers, #panel-motor-now .motor-deal__actions, #panel-motor-now .motor-deal__agreed { flex: 0 0 auto; }
/* The firm column stays at the right of the deal down to a 900px content
   column (1280x720 included), so the card keeps the screen's height. */
/* Narrower than that (a laptop at 125% zoom) the firm column has no room
   beside the deal and, under the screen-high card, it was drawn over the
   chat and Send (audit 22.10.2026). The same figures are in the bar at the
   top and the sidebar, so the column steps aside there. */
@container motor-now-panel (max-width: 899px) {
  #panel-motor-now .motor-now-layout--deal .motor-now-aside { display: none; }
}
@container motor-now-panel (min-width: 900px) {
  #panel-motor-now .motor-now-layout--deal { grid-template-columns: minmax(0, 1fr) 250px; }
  #panel-motor-now .motor-now-layout--deal .motor-now-aside { flex-direction: column; flex-wrap: nowrap; }
  #panel-motor-now .motor-now-layout--deal .motor-now-aside__box { flex: 0 0 auto; }
}
/* A short screen (1280x720): the pictures 110px, the price box and the teal
   button 52px, the quiet buttons 40px, so the chat list keeps its height. */
@media (max-height: 740px) {
  .motor-deal { padding: 14px 20px 12px; }
  .motor-deal__photo { flex-basis: 140px; width: 140px; height: 110px; }
  .motor-deal__photos[data-count="3"] .motor-deal__photo { flex-basis: 100px; width: 100px; height: 110px; }
  /* Four or more (three pictures and "+N"): narrower still, so the text keeps two lines. */
  .motor-deal__photos[data-count="3"]:has(.motor-deal__photo-more) .motor-deal__photo { flex-basis: 90px; width: 90px; }
  .motor-deal__top { margin-bottom: 10px; }
  .motor-deal__title { font-size: 28px; }
  .motor-deal__party { font-size: 21px; }
  .motor-deal__customer { padding: 6px 14px 6px 10px; }
  .motor-deal__box { padding: 10px 14px 12px; }
  .motor-deal__input { height: 52px; font-size: 26px; }
  .motor-deal__box .motor-trade__btn--primary, .motor-deal__box--received .motor-deal__actions .motor-deal__skip, .motor-deal__deliver { min-height: 52px; font-size: 16px; }
  .motor-deal__box .motor-trade__btn--quiet { min-height: 40px; }
  .motor-deal__talk { margin-top: 8px; }
  #motor-now-body:has(.motor-now-benefits) .motor-deal__photo { flex-basis: 140px; width: 140px; height: 110px; }
  #motor-now-body:has(.motor-now-benefits) .motor-deal__photos[data-count="3"] .motor-deal__photo { flex-basis: 100px; width: 100px; height: 110px; }
  #motor-now-body:has(.motor-now-benefits) .motor-deal__input { height: 52px; }
  #motor-now-body:has(.motor-now-benefits) .motor-deal__box .motor-trade__btn--primary,
  #motor-now-body:has(.motor-now-benefits) .motor-deal__box--received .motor-deal__actions .motor-deal__skip,
  #motor-now-body:has(.motor-now-benefits) .motor-deal__deliver { min-height: 52px; }
}
/* When the in-force strip takes a row above the card, the card gives a
   little everywhere before its chat does: pictures 120px, the price box and
   the teal button 56px. */
#motor-now-body:has(.motor-now-benefits) .motor-deal__photo { flex-basis: 140px; width: 140px; height: 120px; }
#motor-now-body:has(.motor-now-benefits) .motor-deal__photos[data-count="3"] .motor-deal__photo { flex-basis: 112px; width: 112px; height: 110px; }
#motor-now-body:has(.motor-now-benefits) .motor-deal__input { height: 56px; font-size: 26px; }
#motor-now-body:has(.motor-now-benefits) .motor-deal__box .motor-trade__btn--primary,
#motor-now-body:has(.motor-now-benefits) .motor-deal__box--received .motor-deal__actions .motor-deal__skip,
#motor-now-body:has(.motor-now-benefits) .motor-deal__deliver { min-height: 56px; font-size: 16px; }
#motor-now-body:has(.motor-now-benefits) .motor-deal__customer { padding: 6px 14px 6px 10px; }
#motor-now-body:has(.motor-now-benefits) .motor-deal__talk { margin-top: 8px; }
/* The older Do now card (External Dealer Network, own stock, Fleet): the
   same pictures by quantity. */
/* Owner 23.10.2026 sweep: a fleet of three spilled past both card edges
   (centred and wider than the card). The photos now share the row and
   shrink to fit it. */
#panel-motor-now .motor-now-card--v2 .motor-now-card__photo[data-count] { display: flex; align-items: center; justify-content: flex-start; gap: 10px; max-width: 100%; overflow: hidden; }
#panel-motor-now .motor-now-card--v2 .motor-now-card__photo[data-count] img { flex: 1 1 0; min-width: 0; width: auto; max-width: 100%; object-fit: contain; }
#panel-motor-now .motor-now-card--v2 .motor-now-card__photo[data-count="2"] img,
#panel-motor-now .motor-now-card--v2 .motor-now-card__photo[data-count="3"] img { height: 110px; margin: 0; }
#panel-motor-now .motor-now-card__photo-more { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 999px; background: #f3f5f7; color: #3c4753; font-size: 15px; font-weight: 800; }

/* 3b. Owner 18.10.2026: what is in force for the firm this round, above the
   deal for every seat of the firm - the campaign and the Sales Executive,
   each with what is left (app.js motorNowBenefitsStripHtml, in the Do now
   campaign slot); the Commercial Sales Manager the same way above the
   tender on the Fleet tenders page (#fleet-benefits-host). One hairline
   box, 13px muted name, 15px figure, 13px muted remainder; no colour, no
   icon, no sentence. Nothing when nothing is in force. */
#panel-motor-now .motor-now-slot[data-now-slot="campaign"]:not(:empty) { flex: 0 0 auto; margin: 0 0 10px; }
.motor-theme .motor-now-benefits { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 24px; box-sizing: border-box; width: 100%; padding: 7px 14px; border: 1px solid var(--mtr-line, #e3e7ea); border-radius: 10px; background: var(--mtr-surface, #fff); color: var(--mtr-ink, #16202c); font-variant-numeric: tabular-nums; }
.motor-theme .motor-now-benefits__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-height: 20px; min-width: 0; }
.motor-theme .motor-now-benefits__item > span { font-size: 13px; font-weight: 500; color: var(--mtr-ink-muted, #5d6a78); white-space: nowrap; }
.motor-theme .motor-now-benefits__item > b { font-size: 15px; line-height: 1.3; font-weight: 700; color: var(--mtr-ink, #16202c); }
.motor-theme .motor-now-benefits__item > span + span::before { content: '·'; margin-right: 8px; }

/* 4. The end of the lesson on the teacher's live view: the podium (app.js
   motorTeacherFinalBoardHtml; R33, owner 18.10.2026: the projector page that
   first drew it is gone). Second, first, third when each place has one firm;
   a shared place keeps the list. */
.motor-teacher-final { padding: 20px clamp(18px, 4vw, 56px) 22px; color: #e8eef6; }
.motor-teacher-final__head { text-align: center; margin-bottom: 16px; }
.motor-teacher-final__head h2 { margin: 0; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.1; font-weight: 800; color: #f4f7fb; }
.motor-teacher-final__head p { margin: 8px 0 0; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #9fb0c4; }
.motor-teacher-final__board { display: flex; flex-direction: column; gap: 12px; max-width: 980px; margin: 0 auto; }
.motor-teacher-final__row { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 18px; padding: 14px 20px; border: 1px solid #dde4eb; border-radius: 12px; background: #fff; color: #1f2738; }
.motor-teacher-final__row.is-waiting { opacity: .45; }
.motor-teacher-final__who { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.motor-teacher-final__firm strong { display: block; font-size: clamp(20px, 2.2vw, 30px); color: #1f2738; }
.motor-teacher-final__firm > span, .motor-teacher-final__value > span, .motor-teacher-final__rank > span { display: block; margin-top: 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; }
.motor-teacher-final__value { text-align: right; }
.motor-teacher-final__value strong { display: block; font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; color: #007985; font-variant-numeric: tabular-nums; }
.motor-teacher-final__rank { order: -1; text-align: center; }
.motor-teacher-final__rank strong { display: block; font-size: 38px; line-height: 1; color: #303a4a; }
.motor-teacher-final__board--podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: clamp(12px, 1.6vw, 22px); }
.motor-teacher-final__board--podium-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.motor-teacher-final__board--podium .motor-teacher-final__row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.motor-teacher-final__board--podium .motor-teacher-final__row.is-waiting { opacity: 1; }
.motor-teacher-final__board--podium .motor-teacher-final__row--2 { order: 1; }
.motor-teacher-final__board--podium .motor-teacher-final__row--1 { order: 2; }
.motor-teacher-final__board--podium .motor-teacher-final__row--3 { order: 3; }
.motor-teacher-final__board--podium .motor-teacher-final__who { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 14px 16px; text-align: center; border: 1px solid #dde4eb; border-radius: 12px; background: #fff; }
.motor-teacher-final__board--podium .motor-teacher-final__row.is-waiting .motor-teacher-final__who { opacity: .45; border-style: dashed; }
.motor-teacher-final__board--podium .motor-teacher-final__row--1:not(.is-waiting) .motor-teacher-final__who { border-color: rgba(0, 131, 143, .55); }
.motor-teacher-final__board--podium .motor-teacher-final__firm { width: 100%; min-width: 0; }
.motor-teacher-final__board--podium .motor-teacher-final__firm .motor-firm-mark-line { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.motor-teacher-final__board--podium .motor-teacher-final__firm .motor-firm-mark { --firm-mark-size: clamp(44px, 4.4vw, 60px); width: var(--firm-mark-size); height: var(--firm-mark-size); border-radius: 14px; }
.motor-teacher-final__board--podium .motor-teacher-final__firm strong { font-size: clamp(17px, 1.7vw, 24px); line-height: 1.15; overflow-wrap: anywhere; }
.motor-teacher-final__board--podium .motor-teacher-final__value { text-align: center; }
.motor-teacher-final__board--podium .motor-teacher-final__rank { order: 2; display: flex; flex-direction: column; align-items: center; padding-top: 14px; border-radius: 12px 12px 0 0; background: #e3e9ef; }
.motor-teacher-final__board--podium .motor-teacher-final__row--1 .motor-teacher-final__rank { height: clamp(96px, 13vh, 140px); }
.motor-teacher-final__board--podium .motor-teacher-final__row--2 .motor-teacher-final__rank { height: clamp(78px, 10vh, 110px); }
.motor-teacher-final__board--podium .motor-teacher-final__row--3 .motor-teacher-final__rank { height: clamp(72px, 8.5vh, 88px); }
.motor-teacher-final__board--podium .motor-teacher-final__row--1:not(.is-waiting) .motor-teacher-final__rank { background: linear-gradient(180deg, #14a596, #00747e); }
.motor-teacher-final__board--podium .motor-teacher-final__row--1:not(.is-waiting) .motor-teacher-final__rank strong,
.motor-teacher-final__board--podium .motor-teacher-final__row--1:not(.is-waiting) .motor-teacher-final__rank span { color: #fff; }
.motor-teacher-final__row.is-revealed .motor-teacher-final__who { animation: motorTeacherFinalRise 700ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes motorTeacherFinalRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* The podium step grows up from the floor as its firm is named (owner
   18.10.2026: "the bar should rise smoothly"); a waiting step is a low grey
   stub, a named one stands at its height. */
.motor-teacher-final__board--podium .motor-teacher-final__rank { transform-origin: bottom center; }
.motor-teacher-final__board--podium .motor-teacher-final__row.is-waiting .motor-teacher-final__rank { transform: scaleY(.28); opacity: .55; }
.motor-teacher-final__board--podium .motor-teacher-final__row.is-waiting .motor-teacher-final__rank strong,
.motor-teacher-final__board--podium .motor-teacher-final__row.is-waiting .motor-teacher-final__rank span { opacity: 0; }
.motor-teacher-final__board--podium .motor-teacher-final__row.is-revealed .motor-teacher-final__rank { animation: motorTeacherFinalGrow 900ms cubic-bezier(.2, .8, .2, 1) both; }
.motor-teacher-final__board--podium .motor-teacher-final__row.is-revealed .motor-teacher-final__rank strong,
.motor-teacher-final__board--podium .motor-teacher-final__row.is-revealed .motor-teacher-final__rank span { animation: motorTeacherFinalFadeIn 500ms 500ms ease-out both; }
@keyframes motorTeacherFinalGrow { from { transform: scaleY(.28); opacity: .55; } to { transform: scaleY(1); opacity: 1; } }
@keyframes motorTeacherFinalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.motor-teacher-final__all { animation: motorTeacherFinalFadeIn 700ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .motor-teacher-final__row.is-revealed .motor-teacher-final__who,
  .motor-teacher-final__board--podium .motor-teacher-final__row.is-revealed .motor-teacher-final__rank,
  .motor-teacher-final__board--podium .motor-teacher-final__row.is-revealed .motor-teacher-final__rank strong,
  .motor-teacher-final__board--podium .motor-teacher-final__row.is-revealed .motor-teacher-final__rank span,
  .motor-teacher-final__all { animation: none; }
  .motor-teacher-final__board--podium .motor-teacher-final__row.is-waiting .motor-teacher-final__rank { transform: none; }
}
.motor-teacher-final__all { max-width: 980px; margin: 18px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.motor-teacher-final__all-head { grid-column: 1 / -1; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9fb0c4; }
.motor-teacher-final__all-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: #e8eef6; font-size: 15px; }
.motor-teacher-final__all-row span { font-weight: 800; color: #9fb0c4; }
.motor-teacher-final__all-row b { font-variant-numeric: tabular-nums; }

/* R33 (owner 18.10.2026): the teacher's live view crossfades between its kinds
   (firm boxes -> Net position chart). The old view is a still copy on top that
   fades out; the new view rises in underneath; the box glides in height. */
#t-motor-live-chart { position: relative; }
#t-motor-live-chart.motor-live-swap > :first-child { animation: motorLiveIn 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
#t-motor-live-chart .motor-live-ghost { position: absolute; inset: 0; background: #fff; pointer-events: none; overflow: hidden; animation: motorLiveOut 520ms cubic-bezier(0.4, 0, 0.6, 1) both; }
@keyframes motorLiveIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes motorLiveOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.985); } }
@media (prefers-reduced-motion: reduce) {
  #t-motor-live-chart.motor-live-swap > :first-child, #t-motor-live-chart .motor-live-ghost { animation: none; }
}

/* 5. R33 (owner 18.10.2026, "a simulation, not a game"): the Finance page.
   "Loans" and "VAT" as quiet rows (lib/ui-motor-ceo.js quietCard), side by
   side in one row of four equal white cards - the three facilities under
   "Loans", the return under "VAT" - so the whole page sits inside 1366x768
   and 1280x720 without scrolling (test/motor-r33-finance-page.browser.test.js).
   A card is its name, one figure a line (label left, figure right, a
   hairline between; the Investments property card's own sizes), and one
   plain button, or a muted state line in the button's place; every card in
   the row is the same height and the buttons stand on one line. No icon,
   pill, grey box, padlock or sentence; the one teal button is File this
   return while the return is open. */
.motor-theme #panel-motor-desk .page-content { padding: 14px 32px 12px; }
.motor-theme #panel-motor-desk .mceo-page[data-role="finance"] { min-height: 0; background: transparent; }
.motor-theme #panel-motor-desk .mceo-page[data-role="finance"] .mceo-content { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; padding: 0; }
.motor-theme .mceo-page[data-role="finance"] .mceo-section { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.motor-theme .mceo-page[data-role="finance"] .mceo-loans-section { grid-column: span 3; }
.motor-theme .mceo-page[data-role="finance"] .mceo-books-section { grid-column: span 1; }
.motor-theme .mceo-page[data-role="finance"] .mceo-grid { flex: 1 1 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.motor-theme .mceo-page[data-role="finance"] .mceo-books-section .mceo-grid { grid-template-columns: minmax(0, 1fr); }
.motor-ui .mceo-quiet { display: flex; flex-direction: column; gap: 0; padding: 16px 18px; border: 1px solid #e3e7ea; border-radius: 12px; background: #fff; box-shadow: none; overflow: hidden; }
/* The lender's photograph across the card's top (owner 18.10.2026), the
   Staff card's way: the card's full width, cropped to one height. */
.motor-ui .mceo-quiet-photo { display: block; width: calc(100% + 36px); height: 112px; margin: -16px -18px 12px; object-fit: cover; background: #f3f5f7; }
.motor-ui .mceo-quiet-title { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 17px; line-height: 1.25; font-weight: 700; color: #16202c; }
.motor-ui .mceo-quiet-title > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The small icons stay (owner 18.10.2026): 14px, grey, never coloured. */
.motor-ui .mceo-quiet .mceo-icon { flex: 0 0 auto; width: 14px; height: 14px; color: var(--muted, #5d6a78); }
.motor-ui .mceo-quiet-title .mceo-icon { width: 16px; height: 16px; }
.motor-ui .mceo-quiet-rows { border-top: 1px solid #e3e7eb; }
.motor-ui .mceo-quiet-row { display: flex; align-items: center; gap: 7px; margin: 0; padding: 9px 0; border-bottom: 1px solid #e3e7eb; min-width: 0; }
.motor-ui .mceo-quiet-row span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #5d6a78; white-space: nowrap; }
/* The figure never breaks into two lines; a label gives way first. */
.motor-ui .mceo-quiet-row b { flex: 0 0 auto; font-size: 17px; line-height: 1.2; font-weight: 700; color: #16202c; font-variant-numeric: tabular-nums; font-family: inherit; text-align: right; white-space: nowrap; }
/* Four cards across a 1280px screen: a little less card padding so "Available Rounds 1–2" stays one line. */
@media (max-width: 1300px) {
  .motor-ui .mceo-quiet { padding: 14px 13px; }
  .motor-ui .mceo-quiet-photo { width: calc(100% + 26px); margin: -14px -13px 12px; }
}
/* The foot sits at the card's bottom: the four buttons (or state lines) of the row share one line. */
.motor-ui .mceo-quiet-foot { display: flex; align-items: center; margin-top: auto; padding-top: 12px; min-height: 56px; }
.motor-ui .mceo-quiet-foot .mceo-btn { width: 100%; min-height: 44px; padding: 8px 14px; border-radius: 10px; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.motor-ui .mceo-btn-plain { background: #fff; border: 1px solid #d3d9e0; color: #16202c; }
.motor-ui .mceo-btn-plain:hover { border-color: #00858f; color: #006e78; }
.motor-ui .mceo-quiet-state { margin: 0; font-size: 14px; line-height: 1.3; color: #5d6a78; }
.motor-ui .mceo-quiet-note { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: #5d6a78; }

/* R33 (owner 18.10.2026): the result of a hire or a campaign, shown where it
   lands - one quiet row, the label muted and the amount in the figure weight,
   no colour, no icon, no sentence. The deal card's line sits under the agreed
   price; the Marketing and Staff rows under the booked campaign and the hire;
   Do now's "Last sale" box uses the aside's own rows. */
.motor-deal__benefits { display: grid; gap: 4px; }
.motor-deal__benefit { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.motor-deal__benefit span { font-size: 13px; font-weight: 500; color: var(--mtr-ink-muted, #5d6a78); }
.motor-deal__benefit b { font-size: 17px; line-height: 1.2; font-weight: 700; color: var(--mtr-ink, #16202c); font-variant-numeric: tabular-nums; }
.motor-theme .motor-campaign-paid,
.motor-theme .motor-staff-card__paid { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 9px 0; border-top: 1px solid #e3e7eb; border-bottom: 1px solid #e3e7eb; min-width: 0; }
.motor-theme .motor-campaign-paid span,
.motor-theme .motor-staff-card__paid span { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #5d6a78; white-space: nowrap; }
/* The figure stays whole: on a narrow card it moves to its own line, right-aligned. */
.motor-theme .motor-campaign-paid b,
.motor-theme .motor-staff-card__paid b { margin-left: auto; font-size: 17px; line-height: 1.2; font-weight: 700; color: #16202c; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.motor-theme .motor-campaign-paid { margin: 0 0 4px; padding-left: 16px; padding-right: 16px; }
.motor-theme .motor-staff-card__paid { align-self: stretch; margin-top: 10px; }
#panel-motor-now .motor-now-empty + .motor-now-aside--inline { max-width: 360px; margin-top: 14px; }

/* 6. Owner 18.10.2026: the notices are quiet and never cover the sidebar.
   The student's notice column stays the zero-height sticky layer at the top
   of the content column (styles.css), but its notices stand at the right,
   see-through over the status line, 13px, and leave after six seconds
   (app.js notify). Behaviour and the two-newest rule are unchanged. */
.motor-theme #screen-game .notif-area { display: flex; flex-direction: column; align-items: flex-end; }
.motor-theme #screen-game .notif-area:empty { display: none; }
.motor-theme .notif-area .notif { max-width: 420px; padding: 7px 12px; font-size: 13px; border: 1px solid rgba(22, 32, 44, .12); border-left: 3px solid rgba(0, 133, 143, .55); border-radius: 8px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(16, 26, 40, .08); animation: nIn .3s ease, nOut .4s ease 5.6s forwards; }
.motor-theme .notif-area .notif span { color: #16202c; font-size: 13px; line-height: 1.35; }
.motor-theme .notif-area .notif.success { border-left-color: rgba(0, 133, 143, .7); }
.motor-theme .notif-area .notif.error { border-left-color: rgba(180, 35, 24, .7); }
.motor-theme .notif-area .notif.money,
.motor-theme .notif-area .notif.penalty { background: rgba(255, 255, 255, .72); box-shadow: 0 2px 8px rgba(16, 26, 40, .08); animation: nIn .3s ease, nOut .4s ease 5.6s forwards; }
.motor-theme .notif-area .notif.penalty { border-left-color: rgba(180, 35, 24, .7); }
.motor-theme.pro-mode .notif-area .notif.money span,
.motor-theme.pro-mode .notif-area .notif.penalty span,
.motor-theme .pro-mode .notif-area .notif.money span,
.motor-theme .pro-mode .notif-area .notif.penalty span { color: #16202c !important; }
#fleet-benefits-host { margin: 0 0 12px; }
/* The Last sale box right after a sale that paid extra (app.js
   motorNowLastSaleHtml): it comes up once - a fade in and one soft teal
   wash that settles to white over four seconds - then stays as the quiet
   row. No movement, no colour left behind. */
#panel-motor-now .motor-now-aside__box.is-fresh { animation: motorNowSaleIn 4s ease-out both; }
#panel-motor-now .motor-now-aside__row b em { font-style: normal; font-weight: 500; font-size: 13px; color: var(--mtr-ink-muted, #5d6a78); }
@keyframes motorNowSaleIn {
  0% { opacity: 0; background: #e2f1f2; border-color: #9fd3d6; }
  12% { opacity: 1; background: #e2f1f2; border-color: #9fd3d6; }
  100% { opacity: 1; background: #fff; border-color: #e3e7ea; }
}
@media (prefers-reduced-motion: reduce) { #panel-motor-now .motor-now-aside__box.is-fresh { animation: none; } }
/* With no deal up the strip sits under the heading of the empty Do now, with
   the same gap under it as above the card. */
#panel-motor-now .motor-now-empty > .motor-now-benefits { margin: 0 0 12px; }

/* R33: on a narrow 1024px screen the loan names wrap instead of being cut. */
@media (max-width: 1180px) {
  .motor-ui .mceo-quiet-title { font-size: 15px; align-items: flex-start; }
  .motor-ui .mceo-quiet-title > span { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* R33 (owner 18.10.2026): the big investments get the big curve, the small funds a small one. */
/* Later the same day: the big chart under the property cards is the
   properties' picture, so every card keeps a small live curve. */
#prop-grid .invest-sparkline, .motor-capital-card .invest-sparkline { height: 48px; }
#stock-grid .invest-sparkline { height: 48px; }
#prop-grid .motor-capital-card[data-stock-id] { cursor: pointer; }
#prop-grid .motor-capital-card.is-selected { border-color: #00a19a; box-shadow: 0 0 0 1px #00a19a inset; }
.motor-theme .motor-capital-card__figure b.is-up { color: #00695c; }
.motor-theme .motor-capital-card__figure b.is-down { color: #c0392b; }
#prop-grid .invest-sparkline svg, .motor-capital-card .invest-sparkline svg,
#stock-grid .invest-sparkline svg { width: 100%; height: 100%; }

/* An owner chip with nothing to say takes no room. */
.motor-owner-chip[hidden], .motor-owner-chip:empty { display: none !important; }
/* The seller's line under the classmate (owner 22.10.2026). */
.motor-deal__resell { margin: 2px 0 0; font-size: 14px; font-weight: 500; color: #5e6773; }

/* Owner 23.10.2026: the Extra deal's margin question is one sum to read
   down - three rows alike, label left, big figure right, the answer box in
   the figures' column; one short line after a miss. */
.motor-deal__sum-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 6px 0; }
.motor-deal__sum-row > span, .motor-deal__check-label { font-size: 22px; font-weight: 700; color: var(--mtr-ink, #0e2038); white-space: nowrap; }
.motor-deal__sum-row > b { font-size: 32px; font-weight: 800; color: var(--mtr-ink, #0e2038); }
.motor-deal__sum-row--last { padding-bottom: 12px; margin-bottom: 8px; border-bottom: 2px solid var(--mtr-ink, #0e2038); }
.motor-deal__sum-row.motor-deal__check { margin-bottom: 12px; }
/* Owner 23.10.2026: the box says it is for typing - "Type here" in the
   middle, a teal edge like Buy; the answer stands right like the figures. */
.motor-deal__check-input { flex: 0 0 190px; width: 190px; height: 64px; min-width: 0; padding: 0 16px; box-sizing: border-box; text-align: right; font-size: 30px; font-weight: 800; border: 2px solid #0a8a8a; background: #f2fbfb; box-shadow: 0 0 0 4px rgba(10, 138, 138, .12); }
.motor-deal__check-input:focus { outline: none; border-color: #076d6d; box-shadow: 0 0 0 4px rgba(10, 138, 138, .28); }
.motor-deal__check-input:placeholder-shown { font-size: 22px; font-weight: 600; text-align: center; }
.motor-deal__check-input::placeholder { color: #6b7d93; opacity: 1; }
.motor-deal__sum-row--answer { margin-bottom: 12px; }
.motor-deal__sum-row--answer > b.motor-deal__sum-answer { color: #b45309; }
.motor-deal__check-line { margin: -4px 0 12px; font-size: 18px; font-weight: 700; color: #b45309; }
.motor-deal__correct { margin: 4px 0 14px; font-size: 26px; font-weight: 800; color: #0f8a5f; text-align: center; }
.motor-deal__correct::before { content: '\2713\00a0'; }

/* Owner 23.10.2026 (approved mockups kauppakortti-skip.png and
   myyja-jarjestys.png): who you trade with large - the classmate's name,
   their firm under it, then the vehicles and the clock on one line - and
   the classmate deal as one sum to read down, like the Extra deal. Tight
   rows, so the sum, the price box, Buy/Sell and the chat stand whole on a
   1280x720 laptop (test/motor-r33-deal-card-proportions.browser.test.js). */
.motor-deal__party.motor-deal__party--person, .motor-deal__party.motor-deal__party--person .motor-deal__person { margin: 2px 0 0; font-size: 30px; line-height: 1.1; }
.motor-deal__party--person .motor-deal__person::before { content: none; }
.motor-deal__party:not(.motor-deal__party--person) { font-size: 28px; margin-top: 2px; }
.motor-deal__firm { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; font-size: 17px; font-weight: 700; color: var(--mtr-ink-soft, #3c4753); min-width: 0; }
.motor-deal__firm .motor-firm-mark--card { --firm-mark-size: 22px; border-radius: 6px; font-size: 9px; }
.motor-deal__top { margin-bottom: 8px; }
.motor-deal__top .motor-deal__title { display: inline; margin: 0; font-size: 21px; }
.motor-deal__top .motor-deal__title + .motor-deal__time { display: inline; margin: 0 0 0 10px; }
.motor-deal__vehicle:has(.motor-deal__photo-more) .motor-deal__title { font-size: 20px; }
.motor-deal__vehicle:has(.motor-deal__photo-more) .motor-deal__time { font-size: 14px; }

.motor-deal__box--sum { display: block; padding: 4px 14px 10px; }
.motor-deal__box--sum .motor-deal__sum-row { gap: 12px; padding: 2px 0; }
.motor-deal__box--sum .motor-deal__sum-row > b, .motor-deal__sent > b { line-height: 1.15; }
.motor-deal__box--sum .motor-deal__sum-row--last { padding-bottom: 6px; margin-bottom: 4px; }
.motor-deal__sum-row--customer > span { display: flex; align-items: center; min-width: 0; white-space: normal; }
.motor-deal__customer-face { flex: 0 0 38px; width: 38px; height: 38px; margin-right: 10px; border-radius: 50%; object-fit: cover; border: 2px solid var(--mtr-line, #d8e3ea); }
.motor-deal__customer-mark { display: inline-flex; flex: 0 0 auto; margin-right: 10px; }
.motor-deal__customer-mark .motor-firm-mark { --firm-mark-size: 38px; font-size: 14px; }
.motor-deal__row-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; line-height: 1.15; }
.motor-deal__row-name { font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--mtr-ink-muted, #5d6a78); }

.motor-deal__offer-row { margin-bottom: 0; }
.motor-deal__offer-input { flex: 0 0 190px; width: 190px; height: 50px; min-width: 0; padding: 0 16px; box-sizing: border-box; text-align: right; font-size: 30px; font-weight: 800; border: 2px solid #0a8a8a; background: #f2fbfb; box-shadow: 0 0 0 4px rgba(10, 138, 138, .12); -moz-appearance: textfield; }
.motor-deal__offer-input::-webkit-outer-spin-button, .motor-deal__offer-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.motor-deal__offer-input:focus { outline: none; border-color: #076d6d; box-shadow: 0 0 0 4px rgba(10, 138, 138, .28); }
.motor-deal__offer-input:placeholder-shown { font-size: 22px; font-weight: 600; text-align: center; }
.motor-deal__offer-input::placeholder { color: #6b7d93; opacity: 1; }
/* Send under the box and as wide as it; Skip deal quietly at its left; the
   line under them, then Buy or Sell. */
.motor-deal__send-row { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 4px 0; margin-bottom: 6px; border-bottom: 2px solid var(--mtr-ink, #0e2038); }
.motor-deal__send-row--end { border-bottom: 0; margin-bottom: 0; }
.motor-deal__send-row .motor-deal__skip { margin-right: auto; }
.motor-deal__box .motor-trade__btn.motor-deal__send { width: 190px; min-height: 44px; font-size: 18px; font-weight: 800; border: 2px solid #0a8a8a; color: #0a6b73; background: #fff; border-radius: 10px; }
.motor-deal__box--sum .motor-trade__btn--primary { min-height: 52px; }
.motor-deal__box--sum .motor-deal__deliver { display: block; width: 100%; font-size: 17px; }
#panel-motor-now .motor-deal__box--sum .motor-deal__skip, .motor-deal__box--sum .motor-deal__skip { min-height: 0; width: auto; padding: 2px 0; border: 0; background: none; box-shadow: none; font-size: 14px; font-weight: 600; color: var(--mtr-ink-muted, #5d6a78); text-decoration: underline; }
.motor-deal__skip-row { display: flex; justify-content: flex-end; margin-top: 2px; }

.motor-deal__sent { display: flex; flex-direction: column; align-items: flex-end; }
.motor-deal__sent > b { font-size: 32px; font-weight: 800; color: var(--mtr-ink, #0e2038); }
.motor-deal__sent-state { font-size: 14px; font-weight: 700; color: #0a8a8a; }
.motor-deal__wait { font-size: 22px; font-weight: 800; color: #0a8a8a; text-align: right; }
.motor-deal__hint, .motor-deal__box--sum .motor-deal__resell { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--mtr-ink-soft, #40506e); }
.motor-deal__sum-row > b.motor-deal__margin { color: #0f8a5f; }
.motor-deal__sum-row > b.motor-deal__margin.is-loss { color: #b42318; }
.motor-deal__sum-row--margin { margin-bottom: 10px; }
.motor-deal__sum-row > b.motor-deal__stock.is-ready { color: #0f8a5f; }
.motor-deal__box--sum .motor-deal__agreed-line { margin: 0 0 12px; font-size: 20px; font-weight: 800; }
.motor-deal__box--sum .motor-trade__counter-row.motor-deal__price-box { display: block; }
/* The Trade view's counter-row rule stretches its input; this box keeps the
   figures' column. */
.motor-deal__box--sum .motor-deal__price-box .motor-deal__offer-input { flex: 0 0 190px; width: 190px; }

/* LOCKED - owner 23.10.2026 ("lukitse toi Do now -näkymä"; the approved
   pictures are in handoff/do-now-lukko-20261023/). Do now with a deal:
   the title, the firm's net position and the benefit chips on one row; the
   card at the left; the deal's chat filling the right-hand column with Send
   always on screen. The card: the clock (time only) and "2 × 4×4 SUV" over
   the pictures at the left, who you trade with on the right; one grey sum
   box - the customer with their face, the offers in a white box (your last
   price grey, a thin line, theirs), your price box with Send under it, a
   black line, then "Buy for £X" / "Sell for £X". Changing any of it needs
   the owner's yes (.claude/skills/bs-lukitut). */
#panel-motor-now .motor-now-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; min-height: 44px; margin: 0 0 10px; }
#panel-motor-now .motor-now-head h1 { margin: 0; font-size: 26px; }
#panel-motor-now .motor-now-head__net { font-size: 15px; color: var(--mtr-ink-soft, #40506e); white-space: nowrap; }
#panel-motor-now .motor-now-head__net b { color: var(--mtr-ink, #0e2038); font-variant-numeric: tabular-nums; }
#panel-motor-now .motor-now-head > .motor-now-slot { margin: 0 0 0 8px; }
.motor-theme .motor-now-benefits { display: flex; flex-wrap: wrap; gap: 10px; width: auto; padding: 0; margin: 0; background: none; border: 0; }
.motor-theme .motor-now-benefits__item { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; padding: 4px 14px 4px 4px; background: var(--mtr-surface, #fff); border: 1px solid var(--mtr-line, #e3e7ea); border-radius: 12px; line-height: 1.2; }
.motor-theme .motor-now-benefits__item.is-paid { background: #effaf4; border-color: #bfe6cf; }
.motor-theme .motor-now-benefits__img { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.motor-theme .motor-now-benefits__text { display: flex; flex-direction: column; min-width: 0; }
.motor-theme .motor-now-benefits__item .motor-now-benefits__name { font-size: 15px; font-weight: 700; color: var(--mtr-ink, #0e2038); white-space: nowrap; }
.motor-theme .motor-now-benefits__item b { font-size: 16px; font-weight: 800; color: #0f8a5f; white-space: nowrap; }
.motor-theme .motor-now-benefits__item > span + span::before, .motor-theme .motor-now-benefits__text > span + b::before { content: none; }

#panel-motor-now #motor-now-body > .motor-now-layout--chat { display: block; }
#panel-motor-now .motor-now-layout--chat .motor-deal-host { height: 100%; }
#panel-motor-now .motor-now-layout--chat .motor-deal { display: grid; grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: minmax(0, 1fr); gap: 24px; height: 100%; padding: 0; background: none; border: 0; box-shadow: none; }
#panel-motor-now .motor-now-layout--chat .motor-deal__main { align-self: start; min-width: 0; max-height: 100%; overflow: auto; background: var(--mtr-surface, #fff); border: 1px solid var(--mtr-line, #e3e7ea); border-radius: 16px; padding: 16px 20px 18px; box-sizing: border-box; }
#panel-motor-now .motor-now-layout--chat .motor-deal__main:only-child { grid-column: 1; }
#panel-motor-now .motor-now-layout--chat .motor-deal__talk { grid-column: 2; display: flex; flex-direction: column; min-height: 0; height: 100%; margin: 0; }
#panel-motor-now .motor-now-layout--chat .motor-deal__talk-title { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mtr-ink, #16202c); }
#panel-motor-now .motor-now-layout--chat .motor-deal__talk .motor-trade__chat { flex: 1 1 auto; min-height: 0; }
#panel-motor-now .motor-now-layout--chat .motor-deal__talk .motor-trade__chat-list { flex: 1 1 auto; max-height: none; min-height: 0; overflow-y: auto; margin: 0; padding: 12px; border-radius: 12px; font-size: 15px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__talk .motor-trade__composer { flex: 0 0 auto; margin-top: 8px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__talk .motor-trade__composer-row .motor-trade__input { height: 42px; min-height: 42px; font-size: 15px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__talk .motor-trade__composer-row .motor-trade__btn { min-height: 42px; }

.motor-deal__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 12px; }
.motor-deal__top > .motor-deal__customer { grid-column: 1 / -1; }
.motor-deal__top .motor-deal__vehicle { display: block; }
.motor-deal__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; white-space: nowrap; }
.motor-deal__clock { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: 999px; background: #eef1f4; color: var(--mtr-ink, #0e2038); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.motor-deal__clock .motor-now-card__clock { color: inherit; font: inherit; background: none; padding: 0; }
.motor-deal__top .motor-deal__title, .motor-deal__vehicle:has(.motor-deal__photo-more) .motor-deal__title { display: block; margin: 0; font-size: 18px; font-weight: 800; }
.motor-deal__top .motor-deal__photo, #motor-now-body:has(.motor-now-benefits) .motor-deal__top .motor-deal__photo { flex: 0 0 150px; width: 150px; height: 110px; }
.motor-deal__top .motor-deal__photos[data-count="1"] .motor-deal__photo, #motor-now-body:has(.motor-now-benefits) .motor-deal__top .motor-deal__photos[data-count="1"] .motor-deal__photo { flex-basis: 240px; width: 240px; height: 124px; }
.motor-deal__top .motor-deal__photos[data-count="3"] .motor-deal__photo, #motor-now-body:has(.motor-now-benefits) .motor-deal__top .motor-deal__photos[data-count="3"] .motor-deal__photo { flex-basis: 104px; width: 104px; height: 84px; }
.motor-deal__top .motor-deal__head { margin: 0; }
.motor-deal__top .motor-deal__role { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #006e78; }
.motor-deal__top .motor-deal__party.motor-deal__party--person, .motor-deal__top .motor-deal__party--person .motor-deal__person { margin: 4px 0; font-size: 34px; font-weight: 800; line-height: 1.1; }
.motor-deal__top .motor-deal__party:not(.motor-deal__party--person) { margin: 4px 0; font-size: 30px; font-weight: 800; line-height: 1.1; }
.motor-deal__top .motor-deal__firm { font-size: 19px; gap: 8px; }
/* Owner 27.10.2026: the trade partner's logo sits at the start of their
   firm name, level with its first line, not floating beside a wrapped name. */
.motor-deal__top .motor-deal__firm > .motor-firm-mark-line { display: flex; align-items: flex-start; gap: 8px; line-height: 1.25; }
.motor-deal__top .motor-deal__firm .motor-firm-mark--card { --firm-mark-size: 24px; flex: 0 0 auto; margin-top: 0; }

.motor-deal__box--sum { padding: 8px 18px 14px; border-radius: 14px; background: var(--mtr-inset, #f3f5f7); border: 0; }
.motor-deal__box--sum .motor-deal__sum-row { padding: 5px 0; }
.motor-deal__box--sum .motor-deal__sum-row > span { font-size: 21px; font-weight: 700; }
.motor-deal__box--sum .motor-deal__sum-row > b { font-size: 30px; font-weight: 800; }
.motor-deal__box--sum .motor-deal__sum-row--last { padding-bottom: 5px; margin-bottom: 0; border-bottom: 0; }
.motor-deal__customer-face { flex-basis: 40px; width: 40px; height: 40px; }
.motor-deal__offers-box { margin: 4px 0 8px; padding: 2px 12px; background: var(--mtr-surface, #fff); border: 1px solid var(--mtr-line, #e3e7ea); border-radius: 10px; }
.motor-deal__box--sum .motor-deal__sum-row--muted > b { font-size: 26px; color: #7b8794; }
.motor-deal__thin { margin: 6px 0; border-bottom: 1px solid #c9d2dc; }
.motor-deal__rule { margin: 4px 0 6px; border-bottom: 2px solid var(--mtr-ink, #0e2038); }
.motor-deal__offer-input, .motor-deal__box--sum .motor-deal__price-box .motor-deal__offer-input { flex: 0 0 200px; width: 200px; height: 52px; }
.motor-deal__send-row, .motor-deal__send-row--end { padding: 6px 0 4px; margin-bottom: 0; border-bottom: 0; }
.motor-deal__box .motor-trade__btn.motor-deal__send { width: 200px; min-height: 46px; }
.motor-deal__box--sum .motor-trade__btn--primary, #motor-now-body:has(.motor-now-benefits) .motor-deal__box .motor-trade__btn--primary { min-height: 54px; margin-top: 6px; font-size: 18px; }
/* The locked card stands whole on a 1366x768 and a 1280x720 screen with the
   chips up: the tight measures. */
#panel-motor-now .motor-now-head .motor-now-benefits { margin: 0; }
#panel-motor-now .motor-now-layout--chat .motor-deal__main { padding: 14px 20px 14px; }
.motor-deal__clock .motor-now-card__clock { margin: 0; padding: 0; border: 0; min-width: 0; }
.motor-deal__top .motor-deal__photo, #motor-now-body:has(.motor-now-benefits) .motor-deal__top .motor-deal__photo { height: 100px; }
.motor-deal__top { margin-bottom: 10px; }
.motor-deal__box--sum { padding-bottom: 12px; }
.motor-deal__box--sum .motor-trade__counter-row.motor-deal__price-box { margin: 0; padding: 0; gap: 0; }
.motor-deal__box--sum .motor-deal__offer-input, #motor-now-body:has(.motor-now-benefits) .motor-deal__box--sum .motor-deal__input { height: 52px; }
.motor-deal__box--sum .motor-deal__send-row { padding: 4px 0 2px; }
#panel-motor-now .motor-now-head > .motor-now-slot[data-now-slot="campaign"]:not(:empty) { margin: 0 0 0 8px; }
.motor-deal__box--sum .motor-deal__sum-row.motor-deal__check.motor-deal__offer-row { margin-bottom: 0; }
#panel-motor-now .motor-deal__clock .motor-now-card__clock { float: none; margin: 0; color: inherit; font-weight: inherit; }
/* The CEO's Fleet tender banner above an open deal (owner 23.10.2026). */
#panel-motor-now .motor-now-slot[data-now-slot="fleet"]:not(:empty) { flex: 0 0 auto; margin: 0 0 10px; }
.motor-now-fleet-banner { display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 14px; background: #fff7e6; border: 1px solid #f3d38a; border-radius: 12px; font-size: 16px; color: var(--mtr-ink, #16202c); }
.motor-now-fleet-banner b { font-weight: 800; }
.motor-now-fleet-banner__text { min-width: 0; }
#panel-motor-now .motor-now-fleet-banner .motor-now-fleet-banner__open { margin-left: auto; flex: 0 0 auto; width: auto; min-height: 38px; padding: 6px 18px; font-size: 15px; }

/* LOCKED - owner 23.10.2026: the Fleet tender card on the Fleet tenders page
   in the Do now card's look (handoff/do-now-lukko-20261023/). The clock pill
   and "3 × EV hatchback" over the pictures, "Sealed price · lowest wins"
   and the customer large at the right; one grey box: "Pays up to" with the
   customer's face, a white box (In stock, a thin line, Up against), "Your
   firm's price" with "Propose to team" under it, then "Buy N on Wholesale".
   The proposer's "Ask a teammate to press Yes" is a big box - something to
   say out loud in the classroom; the same on the stock page's second
   showroom. No chat between firms. */
.fleet-tender-card.is-page { max-width: none; padding: 18px 28px 22px; border: 1px solid var(--mtr-line, #e3e7ea); border-radius: 16px; }
.fleet-tender-card .fleet-tender-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 12px; }
.fleet-tender-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; white-space: nowrap; }
.fleet-tender-card .fleet-tender-clock { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border: 0; border-radius: 999px; background: #eef1f4; text-align: left; }
.fleet-tender-card .fleet-tender-clock::before { content: '\23F1'; font-size: 16px; }
.fleet-tender-card .fleet-tender-clock span { display: inline; font-size: 13px; color: var(--mtr-ink-soft, #40506e); letter-spacing: 0; text-transform: none; font-weight: 700; }
.fleet-tender-card .fleet-tender-clock span[hidden] { display: none; }
.fleet-tender-card .fleet-tender-clock strong { display: inline; font-size: 18px; color: var(--mtr-ink, #0e2038); }
.fleet-tender-what { font-size: 18px; font-weight: 800; color: var(--mtr-ink, #0e2038); }
.fleet-tender-photos { display: flex; gap: 8px; }
.fleet-tender-photos img, .fleet-tender-card #fleet-tender-photo { flex: 0 0 150px; width: 150px; height: 110px; margin: 0; object-fit: contain; border: 0; border-radius: 12px; background: var(--mtr-inset, #f3f5f7); }
.fleet-tender-photos[data-count="1"] img, .fleet-tender-photos[data-count="1"] #fleet-tender-photo { flex-basis: 240px; width: 240px; height: 124px; }
.fleet-tender-photos[data-count="3"] img, .fleet-tender-photos[data-count="3"] #fleet-tender-photo { flex-basis: 104px; width: 104px; height: 84px; }
.fleet-tender-card .fleet-tender-head { display: block; margin: 0; }
.fleet-tender-card .fleet-tender-kicker { font-size: 13px; letter-spacing: .06em; color: #006e78; }
.fleet-tender-card .fleet-tender-head h2 { margin: 4px 0; font-size: 34px; line-height: 1.1; color: var(--mtr-ink, #0e2038); }
.fleet-tender-card .fleet-tender-body { display: block; padding: 8px 18px 14px; border-radius: 14px; background: var(--mtr-inset, #f3f5f7); }
.fleet-tender-card .fleet-tender-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 5px 0; border-bottom: 0; }
.fleet-tender-card .fleet-tender-row > span { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 700; color: var(--mtr-ink, #0e2038); }
.fleet-tender-card .fleet-tender-row > strong { font-size: 30px; font-weight: 800; color: var(--mtr-ink, #0e2038); }
.fleet-tender-card .fleet-tender-row.is-short > strong { color: var(--mtr-ink, #0e2038); }
.fleet-tender-card .fleet-tender-row .motor-deal__customer-face { margin: 0; }
.fleet-tender-offers { margin: 4px 0 8px; padding: 2px 12px; background: var(--mtr-surface, #fff); border: 1px solid var(--mtr-line, #e3e7ea); border-radius: 10px; }
.fleet-tender-card .fleet-tender-rivals { font-size: 21px !important; }
.fleet-tender-card .fleet-tender-rule { display: none; }
.fleet-tender-card .fleet-tender-price { display: grid; grid-template-columns: minmax(0, 1fr) 200px; align-items: center; gap: 6px 14px; padding: 5px 0; }
.fleet-tender-price__label { font-size: 21px; font-weight: 700; color: var(--mtr-ink, #0e2038); }
.fleet-tender-card .fleet-tender-currency { display: none; }
.fleet-tender-card .fleet-tender-price input { grid-column: 2; width: 200px; height: 52px; box-sizing: border-box; padding: 0 14px; text-align: right; font-size: 30px; font-weight: 800; border: 2px solid #0a8a8a; border-radius: 10px; background: #f2fbfb; box-shadow: 0 0 0 4px rgba(10, 138, 138, .12); -moz-appearance: textfield; }
.fleet-tender-card .fleet-tender-price input::-webkit-outer-spin-button, .fleet-tender-card .fleet-tender-price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fleet-tender-card .fleet-tender-price input:placeholder-shown { font-size: 22px; font-weight: 600; text-align: center; }
.fleet-tender-card .fleet-tender-submit { grid-column: 2; width: 200px; min-height: 46px; padding: 0 10px; border: 2px solid #0a8a8a; border-radius: 10px; background: #fff; color: #0a6b73; font-size: 17px; font-weight: 800; box-shadow: none; }
.fleet-tender-card .fleet-tender-submit[hidden] { display: none; }
.fleet-tender-card .fleet-tender-profit { margin: 0; min-height: 0; font-size: 16px; }
.fleet-tender-card .fleet-tender-profit:empty { display: none; }
.fleet-tender-card .fleet-tender-buy { display: block; width: 100%; min-height: 54px; margin: 6px 0 0; border: 0; border-radius: 12px; background: #00858f; color: #fff; font-size: 18px; font-weight: 800; }
.fleet-tender-card .fleet-tender-buy:hover { background: #006e78; border: 0; }
.fleet-tender-card .fleet-tender-status { margin-top: 8px; font-size: 16px; }
/* The big "say it out loud" box: the proposer's wait and the teammate's ask. */
.motor-yes-say { display: flex !important; align-items: center; gap: 12px; grid-column: 1 / -1; box-sizing: border-box; width: 100%; padding: 12px 16px; margin: 6px 0 4px; border: 2px solid #0a8a8a; border-radius: 12px; background: #e6f6f6; color: #0a5f66; font-size: 24px !important; font-weight: 800; line-height: 1.2; white-space: normal !important; }
.motor-yes-say::before { content: '\1F5E3'; font-size: 30px; line-height: 1; }
.motor-yes-ask--fleet { display: block; }
/* Owner 1.11.2026: a Yes request's time left, one quiet figure at the right
   edge, and the requester's one line once it lapsed unanswered. */
.motor-yes-time { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; font-weight: 700; opacity: .7; }
.motor-yes-ask__line .motor-yes-time { margin-left: 12px; padding-left: 0; }
.motor-yes-ask__line.motor-yes-say .motor-yes-time { margin-left: auto; padding-left: 12px; }
.motor-yes-lapsed { display: block; grid-column: 1 / -1; margin: 4px 0 6px; color: #374151; font-size: 18px; font-weight: 700; line-height: 1.25; }
.motor-fc-cap .motor-yes-lapsed { margin: 0; white-space: nowrap; }
.motor-fc-cap .motor-fc-fig strong { white-space: nowrap; }
.fleet-tender-card .fleet-tender-price .motor-yes-lapsed { grid-column: 1; grid-row: 2; margin: 0; align-self: center; }
.motor-fc-cap .motor-yes-lapsed + .motor-fc-cap__buy { white-space: nowrap; }
.motor-yes-ask--fleet .motor-yes-ask__yes { display: block; width: 100%; min-height: 54px; margin-top: 6px; font-size: 18px; }
.fleet-tender-card .fleet-tender-row--price { padding-top: 8px; }
.fleet-tender-buyrow:empty { display: none; }
/* A long customer name ("Community transport provider") on two lines, so
   the teammate's Yes stays on a 1366x768 screen under the stats bar. */
.fleet-tender-card .fleet-tender-head h2 { font-size: 28px; }
#fleet-benefits-host .motor-now-benefits { margin: 0 0 10px; }
#fleet-benefits-host:not([hidden]) { margin-top: -24px; }
#fleet-benefits-host .motor-now-benefits { margin: 0 0 8px; }
/* The locked card on a narrower column (a laptop at 110-150 % zoom): the chat
   column narrows first and who you trade with stands under the pictures;
   narrower still, the chat goes under the card and the page scrolls - every
   figure, box and button stays whole (test/motor-now-money-fit.browser). */
.motor-deal__top .motor-deal__party--person .motor-deal__person, .motor-deal__top .motor-deal__firm { overflow-wrap: anywhere; }
@container motor-now-panel (max-width: 1000px) {
  #panel-motor-now .motor-now-layout--chat .motor-deal { grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; }
  #panel-motor-now .motor-deal__top { gap: 16px; }
  #panel-motor-now .motor-deal__top .motor-deal__party.motor-deal__party--person, #panel-motor-now .motor-deal__top .motor-deal__party--person .motor-deal__person { font-size: 30px; }
  #panel-motor-now .motor-deal__top .motor-deal__photo, #motor-now-body:has(.motor-now-benefits) .motor-deal__top .motor-deal__photo { flex-basis: 120px; width: 120px; height: 100px; }
  #panel-motor-now .motor-deal__top .motor-deal__photos[data-count="1"] .motor-deal__photo, #motor-now-body:has(.motor-now-benefits) .motor-deal__top .motor-deal__photos[data-count="1"] .motor-deal__photo { flex-basis: 180px; width: 180px; height: 110px; }
  #panel-motor-now .motor-deal__top .motor-deal__photos[data-count="3"] .motor-deal__photo, #motor-now-body:has(.motor-now-benefits) .motor-deal__top .motor-deal__photos[data-count="3"] .motor-deal__photo { flex-basis: 88px; width: 88px; height: 84px; }
}
@container motor-now-panel (max-width: 860px) {
  #panel-motor-now .motor-deal__top { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #panel-motor-now:has(.motor-now-layout--chat) #motor-now-body { height: auto; min-height: 0; }
  #panel-motor-now .motor-now-layout--chat .motor-deal { height: auto; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__main { max-height: none; overflow: visible; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__talk { height: auto; min-height: 420px; }
}
@container motor-now-panel (max-width: 760px) {
  #panel-motor-now .motor-now-layout--chat .motor-deal { grid-template-columns: minmax(0, 1fr); }
  #panel-motor-now .motor-now-layout--chat .motor-deal__talk { grid-column: 1; min-height: 0; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__talk .motor-trade__chat-list { min-height: 160px; max-height: 240px; }
  #panel-motor-now .motor-deal__box--sum .motor-deal__sum-row > span { font-size: 18px; }
  #panel-motor-now .motor-deal__box--sum .motor-deal__sum-row > b { font-size: 24px; }
  #panel-motor-now .motor-deal__box--sum .motor-deal__offer-input, #panel-motor-now .motor-deal__box .motor-trade__btn.motor-deal__send { flex-basis: 180px; width: 180px; }
  #panel-motor-now .motor-deal__box--sum .motor-deal__offer-input { font-size: 24px; padding: 0 12px; }
  #panel-motor-now .motor-deal__row-label { flex-direction: column; align-items: flex-start; }
}
/* Two or three rivals on the Fleet card wrap under one another, the label stays whole. */
.fleet-tender-card .fleet-tender-row > span { white-space: nowrap; }
.fleet-tender-card .fleet-tender-rivals { font-size: 17px !important; text-align: right; gap: 2px 12px; }
.fleet-tender-card .fleet-tender-row > span { flex: 0 0 auto; }
.fleet-tender-card .fleet-tender-row > strong { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; }
.fleet-tender-card .fleet-tender-row .fleet-tender-rivals { display: flex; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
/* Owner 24.10.2026: the Fleet card has the whole page (no chat beside it),
   so it is larger - bigger pictures, bigger figures, the customer very
   large - and still whole on a 1366x768 screen under the stats bar. */
.fleet-tender-card.is-page .fleet-tender-top { grid-template-columns: auto minmax(0, 1fr); gap: 32px; margin-bottom: 14px; }
.fleet-tender-card.is-page .fleet-tender-photos img, .fleet-tender-card.is-page #fleet-tender-photo { flex-basis: 190px; width: 190px; height: 124px; }
.fleet-tender-card.is-page .fleet-tender-photos[data-count="3"] img, .fleet-tender-card.is-page .fleet-tender-photos[data-count="3"] #fleet-tender-photo { flex-basis: 150px; width: 150px; height: 104px; }
.fleet-tender-card.is-page .fleet-tender-photos[data-count="1"] img, .fleet-tender-card.is-page .fleet-tender-photos[data-count="1"] #fleet-tender-photo { flex-basis: 300px; width: 300px; height: 150px; }
.fleet-tender-card.is-page .fleet-tender-what, .fleet-tender-card.is-page .fleet-tender-clock strong { font-size: 20px; }
.fleet-tender-card.is-page .fleet-tender-head h2 { font-size: 40px; }
.fleet-tender-card.is-page .fleet-tender-kicker { font-size: 14px; }
.fleet-tender-card.is-page .fleet-tender-body { padding: 10px 24px 16px; }
.fleet-tender-card.is-page .fleet-tender-row > span { font-size: 23px; }
.fleet-tender-card.is-page .fleet-tender-row > strong { font-size: 32px; }
.fleet-tender-card.is-page .fleet-tender-rivals { font-size: 20px !important; }
.fleet-tender-card.is-page .fleet-tender-price { grid-template-columns: minmax(0, 1fr) 240px; }
.fleet-tender-card.is-page .fleet-tender-price input, .fleet-tender-card.is-page .fleet-tender-submit { width: 240px; }
.fleet-tender-card.is-page .fleet-tender-price input { height: 56px; font-size: 32px; }
.fleet-tender-card.is-page .fleet-tender-buy, .fleet-tender-card.is-page .motor-yes-ask--fleet .motor-yes-ask__yes { min-height: 58px; font-size: 20px; }
.fleet-tender-card.is-page .motor-yes-say { font-size: 26px !important; }
/* Tighter, so the teammate's Yes is on a 1366x768 screen; the benefit chip
   stands in the card's top-right corner instead of a row of its own. */
#fleet-benefits-host:not([hidden]) { margin: 0 0 8px; }
#fleet-benefits-host .motor-now-benefits { margin: 0; flex-wrap: wrap; }
.fleet-tender-card.is-page { padding: 14px 28px 18px; }
.fleet-tender-card.is-page .fleet-tender-top { margin-bottom: 10px; }
.fleet-tender-card.is-page .fleet-tender-head { padding-right: 300px; }
.fleet-tender-card.is-page .fleet-tender-head h2 { font-size: 36px; }
.fleet-tender-card.is-page .fleet-tender-photos img, .fleet-tender-card.is-page #fleet-tender-photo { height: 112px; }
.fleet-tender-card.is-page .fleet-tender-photos[data-count="3"] img, .fleet-tender-card.is-page .fleet-tender-photos[data-count="3"] #fleet-tender-photo { height: 96px; }
.fleet-tender-card.is-page .fleet-tender-body { padding: 6px 24px 12px; }
.fleet-tender-card.is-page .fleet-tender-row { padding: 4px 0; }
.fleet-tender-card.is-page .fleet-tender-offers { margin: 2px 0 6px; }
.fleet-tender-card.is-page .fleet-tender-price { padding: 4px 0; gap: 4px 14px; }
.fleet-tender-card.is-page .motor-yes-say { padding: 10px 16px; margin: 4px 0 2px; }
.fleet-tender-card.is-page .fleet-tender-buy, .fleet-tender-card.is-page .motor-yes-ask--fleet .motor-yes-ask__yes { margin-top: 4px; }
.fleet-tender-card.is-page .fleet-tender-head { padding-right: 0; }
.fleet-tender-card.is-page .fleet-tender-kicker { padding-right: 0; }
.fleet-tender-card.is-page .fleet-tender-head h2 { font-size: 34px; padding-right: 0; }
#fleet-benefits-host .motor-now-benefits { top: 14px; }
/* One vehicle: the picture keeps its own shape, no grey bars either side. */
.motor-deal__top .motor-deal__photos[data-count="1"] .motor-deal__photo, #motor-now-body:has(.motor-now-benefits) .motor-deal__top .motor-deal__photos[data-count="1"] .motor-deal__photo { flex-basis: auto; width: auto; max-width: 240px; }
.motor-deal__box--sum .motor-deal__correct { margin: 8px 0 10px; }

/* Four or five vehicles on the Fleet card: one picture each, smaller. */
.fleet-tender-card.is-page .fleet-tender-photos[data-count="4"] img, .fleet-tender-card.is-page .fleet-tender-photos[data-count="4"] #fleet-tender-photo { flex-basis: 118px; width: 118px; height: 84px; }
.fleet-tender-card.is-page .fleet-tender-photos[data-count="5"] img, .fleet-tender-card.is-page .fleet-tender-photos[data-count="5"] #fleet-tender-photo { flex-basis: 96px; width: 96px; height: 72px; }
.fleet-tender-card.is-page .fleet-tender-photos { gap: 6px; }
/* Extra deal (no chat): the card has the page's width, like the Fleet card. */
#panel-motor-now .motor-now-layout--chat .motor-deal:not(:has(.motor-deal__talk)) { grid-template-columns: minmax(0, 1fr); }
#panel-motor-now .motor-now-layout--chat .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__main { padding: 18px 28px 20px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__top { gap: 32px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__top .motor-deal__photo { height: 124px; flex-basis: 190px; width: 190px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__top .motor-deal__photos[data-count="1"] .motor-deal__photo { height: 150px; max-width: 300px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__top .motor-deal__party:not(.motor-deal__party--person) { font-size: 36px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box--sum { padding: 10px 24px 16px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box--sum .motor-deal__sum-row > span, #panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__check-label { font-size: 23px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box--sum .motor-deal__sum-row > b { font-size: 32px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__check-input { flex-basis: 240px; width: 240px; height: 56px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box .motor-trade__btn--primary { min-height: 58px; font-size: 20px; }

/* Owner 25.10.2026 ("eks hintoi ja tekstei saa isommaks ettei o noi iso väli
   niide välis"): on the full-page Fleet card and the full-width Extra deal
   the label and the figure sit far apart, so both read larger. Same rows,
   same order; the card still ends above the fold at 1366x768. */
.fleet-tender-card.is-page .fleet-tender-row > span { font-size: 28px; }
.fleet-tender-card.is-page .fleet-tender-row > strong { font-size: 40px; }
.fleet-tender-card.is-page .fleet-tender-rivals { font-size: 24px !important; }
.fleet-tender-card.is-page .fleet-tender-price__label { font-size: 28px; }
.fleet-tender-card.is-page .fleet-tender-price { grid-template-columns: minmax(0, 1fr) 280px; }
.fleet-tender-card.is-page .fleet-tender-price input, .fleet-tender-card.is-page .fleet-tender-submit { width: 280px; }
.fleet-tender-card.is-page .fleet-tender-price input { height: 62px; font-size: 38px; }
.fleet-tender-card.is-page .fleet-tender-price input:placeholder-shown { font-size: 26px; }
.fleet-tender-card.is-page .fleet-tender-submit { font-size: 19px; }
.fleet-tender-card.is-page .motor-yes-say { font-size: 30px !important; }
.fleet-tender-card.is-page .fleet-tender-buy, .fleet-tender-card.is-page .motor-yes-ask--fleet .motor-yes-ask__yes { font-size: 22px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box--sum .motor-deal__sum-row > span, #panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__check-label { font-size: 28px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box--sum .motor-deal__sum-row > b { font-size: 40px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__check-input { flex-basis: 280px; width: 280px; height: 62px; font-size: 38px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box .motor-trade__btn--primary { font-size: 22px; }
/* The teammate's view (the ask box and the Yes button together) must end
   above the fold at 1366x768 with the larger figures: tighter spacing. */
.fleet-tender-card.is-page { padding-top: 10px; }
.fleet-tender-card.is-page .fleet-tender-photos[data-count="4"] img, .fleet-tender-card.is-page .fleet-tender-photos[data-count="4"] #fleet-tender-photo { height: 76px; }
.fleet-tender-card.is-page .fleet-tender-photos img, .fleet-tender-card.is-page #fleet-tender-photo { height: 100px; }
.fleet-tender-card.is-page .fleet-tender-body { padding: 4px 24px 10px; }
.fleet-tender-card.is-page .fleet-tender-row { padding: 2px 0; }
.fleet-tender-card.is-page .fleet-tender-price { padding: 2px 0; }
.fleet-tender-card.is-page .motor-yes-say { padding: 6px 16px; margin: 2px 0 0; }
.fleet-tender-card.is-page .fleet-tender-buy, .fleet-tender-card.is-page .motor-yes-ask--fleet .motor-yes-ask__yes { margin-top: 2px; min-height: 54px; }
/* Owner 25.10.2026 ("saisiko isommaks numeroit ja tekstei diileihi"): the
   classmate deal card (chat on the right) reads a step larger too. */
#panel-motor-now .motor-now-layout--chat .motor-deal__box--sum .motor-deal__sum-row > span { font-size: 24px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__box--sum .motor-deal__sum-row > b { font-size: 36px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__top .motor-deal__party:not(.motor-deal__party--person) { font-size: 34px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__check-label { font-size: 24px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__check-input { font-size: 32px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__box .motor-trade__btn--primary { font-size: 22px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__resell { font-size: 18px; }
/* Owner 25.10.2026 ("ei oo symmetrisesti hinnat samas rivis"): the white
   offers box has 12px padding and a 1px border, so its figures sat 13px left
   of the Customer pays / Your offer figures. The box now reaches 13px past
   the rows on both sides: every figure ends on the same line, every label
   starts on the same line. */
.motor-deal__offers-box { margin-left: -13px; margin-right: -13px; }
.fleet-tender-offers { margin-left: -13px; margin-right: -13px; }
/* Owner 25.10.2026 ("ei oo symmetrisesti hinnat samas rivis"): the white
   offers box has 12px padding and a 1px border, so its figures sat 13px left
   of the Customer pays / Your offer figures. The box now reaches 13px past
   the rows on both sides: every figure ends on the same line, every label
   starts on the same line. */
.motor-deal__offers-box { margin-left: -13px; margin-right: -13px; }
.fleet-tender-offers { margin-left: -13px; margin-right: -13px; }

/* Owner 25.10.2026 ("haluan et se on tosi selvää, tekstit ja numerot tosi
   isona"): the deal cards read at the largest size that still ends above
   the fold at 1366x768. Pictures a little smaller, rows tighter, figures
   and labels much larger. The same right edge for every figure. */
/* Classmate deal with the chat on the right */
#panel-motor-now .motor-now-layout--chat .motor-deal__main { padding: 12px 20px 12px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__top .motor-deal__photo { height: 100px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__top .motor-deal__photos[data-count="1"] .motor-deal__photo { height: 110px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__top .motor-deal__party:not(.motor-deal__party--person) { font-size: 36px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__box--sum { padding: 8px 20px 12px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__box--sum .motor-deal__sum-row { padding: 3px 0; }
#panel-motor-now .motor-now-layout--chat .motor-deal__box--sum .motor-deal__sum-row > span { font-size: 28px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__box--sum .motor-deal__sum-row > b { font-size: 44px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__offers-box { margin-top: 2px; margin-bottom: 6px; padding: 0 12px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__check-label { font-size: 28px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__check-input { font-size: 36px; height: 62px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__check-input:placeholder-shown { font-size: 28px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__box .motor-trade__btn--primary { font-size: 25px; min-height: 60px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__resell { font-size: 19px; }
/* Extra deal, full width */
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__top .motor-deal__photo { height: 110px; flex-basis: 170px; width: 170px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__top .motor-deal__photos[data-count="1"] .motor-deal__photo { height: 124px; max-width: 250px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__top .motor-deal__party:not(.motor-deal__party--person) { font-size: 40px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box--sum { padding: 8px 24px 14px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box--sum .motor-deal__sum-row { padding: 3px 0; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box--sum .motor-deal__sum-row > span, #panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__check-label { font-size: 32px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box--sum .motor-deal__sum-row > b { font-size: 48px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__check-input { flex-basis: 300px; width: 300px; height: 66px; font-size: 40px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__check-input:placeholder-shown { font-size: 30px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box .motor-trade__btn--primary { min-height: 62px; font-size: 26px; }
/* Fleet tender, the page */
.fleet-tender-card.is-page { padding: 8px 28px 14px; }
.fleet-tender-card.is-page .fleet-tender-top { margin-bottom: 6px; }
.fleet-tender-card.is-page .fleet-tender-head h2 { font-size: 32px; line-height: 1.05; }
.fleet-tender-card.is-page .fleet-tender-photos img, .fleet-tender-card.is-page #fleet-tender-photo { height: 90px; }
.fleet-tender-card.is-page .fleet-tender-photos[data-count="4"] img, .fleet-tender-card.is-page .fleet-tender-photos[data-count="4"] #fleet-tender-photo { height: 70px; flex-basis: 110px; width: 110px; }
.fleet-tender-card.is-page .fleet-tender-photos[data-count="3"] img, .fleet-tender-card.is-page .fleet-tender-photos[data-count="3"] #fleet-tender-photo { height: 84px; }
.fleet-tender-card.is-page .fleet-tender-body { padding: 2px 24px 10px; }
.fleet-tender-card.is-page .fleet-tender-row { padding: 1px 0; }
.fleet-tender-card.is-page .fleet-tender-row > span { font-size: 32px; }
.fleet-tender-card.is-page .fleet-tender-row > strong { font-size: 46px; }
.fleet-tender-card.is-page .fleet-tender-rivals { font-size: 26px !important; }
.fleet-tender-card.is-page .fleet-tender-offers { margin: 2px -13px 4px; padding: 0 12px; }
.fleet-tender-card.is-page .fleet-tender-price__label { font-size: 32px; }
.fleet-tender-card.is-page .fleet-tender-price { grid-template-columns: minmax(0, 1fr) 300px; padding: 2px 0; gap: 4px 14px; }
.fleet-tender-card.is-page .fleet-tender-price input, .fleet-tender-card.is-page .fleet-tender-submit { width: 300px; }
.fleet-tender-card.is-page .fleet-tender-price input { height: 64px; font-size: 42px; }
.fleet-tender-card.is-page .fleet-tender-price input:placeholder-shown { font-size: 30px; }
.fleet-tender-card.is-page .fleet-tender-submit { font-size: 21px; min-height: 48px; }
.fleet-tender-card.is-page .motor-yes-say { font-size: 32px !important; padding: 6px 16px; margin: 2px 0 0; }
.fleet-tender-card.is-page .fleet-tender-buy, .fleet-tender-card.is-page .motor-yes-ask--fleet .motor-yes-ask__yes { font-size: 25px; min-height: 58px; margin-top: 2px; }
/* Owner 25.10.2026: the pound sign sits ready at the left of every price
   box; the typed figure is as large as the figures on the card. */
.motor-deal__money { position: relative; display: inline-flex; flex: 0 0 auto; }
.motor-deal__money .motor-deal__check-input { padding-left: 44px; }
.motor-deal__money-sign { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 30px; font-weight: 800; color: #0a6b73; pointer-events: none; line-height: 1; }
.motor-deal__money .motor-deal__check-input:placeholder-shown { text-align: right; }
.fleet-tender-card .fleet-tender-price .motor-deal__money { grid-column: 2; }
.fleet-tender-card .fleet-tender-currency { display: block; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 32px; font-weight: 800; color: #0a6b73; pointer-events: none; line-height: 1; }
.fleet-tender-card .fleet-tender-price input { padding-left: 46px; }
.fleet-tender-card .fleet-tender-price input:placeholder-shown { text-align: right; }
.motor-deal__money .motor-deal__offer-input { padding-left: 44px; }
.motor-deal__money .motor-deal__offer-input:placeholder-shown { text-align: right; }
.motor-deal__money--pct .motor-deal__money-sign { left: auto; right: 14px; }
.motor-deal__money--pct .motor-deal__check-input { padding-left: 16px; padding-right: 44px; }

/* Owner 25.10.2026 ("noi hyödyt ja kaikki muu teksti on niin pienellä"):
   the seat-duties line under the firm name goes (it only explained the
   roles), and the room goes to the benefit chips and the net position. */
.motor-theme .sm5-team-status-bar__roles { display: none; }
.motor-theme .sm5-team-status-bar { padding: 6px 12px; }
#panel-motor-now .motor-now-head { min-height: 60px; gap: 8px 22px; margin-bottom: 8px; }
#panel-motor-now .motor-now-head h1 { font-size: 30px; }
#panel-motor-now .motor-now-head__net { font-size: 22px; }
.motor-theme .motor-now-benefits__item { gap: 12px; padding: 5px 18px 5px 6px; border-radius: 14px; }
.motor-theme .motor-now-benefits__img { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 12px; }
.motor-theme .motor-now-benefits__item .motor-now-benefits__name { font-size: 19px; }
.motor-theme .motor-now-benefits__item b { font-size: 22px; }
/* The price boxes: one size beside the chat (240 x 60, the Send under it
   the same width), the typed figure 36 px; the full-width cards keep 300. */
#panel-motor-now .motor-now-layout--chat .motor-deal__check-input, #panel-motor-now .motor-now-layout--chat .motor-deal__offer-input { flex-basis: 240px; width: 240px; height: 60px; font-size: 36px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__offer-input:placeholder-shown, #panel-motor-now .motor-now-layout--chat .motor-deal__check-input:placeholder-shown { font-size: 26px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__box--sum .motor-deal__price-box .motor-deal__offer-input { flex-basis: 240px; width: 240px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__send-row .motor-deal__send, #panel-motor-now .motor-now-layout--chat .motor-deal__check .motor-trade__btn:not(.motor-trade__btn--primary) { width: 240px; min-height: 48px; font-size: 19px; }

/* Owner 25.10.2026 ("levitä boxi alaspäin, symmetrisesti chatin kanssa"):
   beside the chat the card reaches the chat's bottom edge, the sum box takes
   the room and spreads its rows evenly; who you trade with reads larger;
   the typed figure is as large as the figures above it and its pound sign
   stands where theirs do (the box is as wide as a five-figure sum). */
#panel-motor-now .motor-now-layout--chat .motor-deal__main { align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
#panel-motor-now .motor-now-layout--chat .motor-deal__main .motor-deal__box--sum { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly; }
#panel-motor-now .motor-now-layout--chat .motor-deal__main .motor-deal__box--sum > * { flex: 0 0 auto; }
#panel-motor-now .motor-now-layout--chat .motor-deal__top .motor-deal__kicker, #panel-motor-now .motor-now-layout--chat .motor-deal__top .motor-deal__who { font-size: 16px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__top .motor-deal__party.motor-deal__party--person, #panel-motor-now .motor-now-layout--chat .motor-deal__top .motor-deal__party--person .motor-deal__person { font-size: 40px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__top .motor-deal__party:not(.motor-deal__party--person) { font-size: 38px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__check-input, #panel-motor-now .motor-now-layout--chat .motor-deal__offer-input { flex-basis: 200px; width: 200px; height: 66px; font-size: 44px; padding-left: 40px; padding-right: 10px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__box--sum .motor-deal__price-box .motor-deal__offer-input { flex-basis: 200px; width: 200px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__money-sign { left: 10px; font-size: 34px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__offer-input:placeholder-shown, #panel-motor-now .motor-now-layout--chat .motor-deal__check-input:placeholder-shown { font-size: 24px; }
#panel-motor-now .motor-now-layout--chat .motor-deal__send-row .motor-deal__send, #panel-motor-now .motor-now-layout--chat .motor-deal__check .motor-trade__btn:not(.motor-trade__btn--primary) { width: 200px; }

/* Owner 25.10.2026: Your firm stock reads like the deal card - the vehicle's
   name, its quantity and what was paid, large; no "Ready to sell" pill. */
.motor-ui .mui-warehouse-unit .mui-card-title { font-size: 26px; line-height: 1.15; }
.motor-ui .mui-warehouse-unit .mui-detail { font-size: 20px; }
.motor-ui .mui-warehouse-unit .mui-detail-label { font-size: 20px; }
.motor-ui .mui-warehouse-unit .mui-detail-value { font-size: 26px; font-weight: 800; }
/* The Fleet page's price box like the Do now card's: the typed figure as
   large as the figures above it, the pound sign where theirs stand. */
.fleet-tender-card.is-page .fleet-tender-price { grid-template-columns: minmax(0, 1fr) 210px; }
.fleet-tender-card.is-page .fleet-tender-price input, .fleet-tender-card.is-page .fleet-tender-submit { width: 210px; }
.fleet-tender-card.is-page .fleet-tender-price input { height: 68px; font-size: 46px; padding-left: 40px; padding-right: 10px; }
.fleet-tender-card.is-page .fleet-tender-price input:placeholder-shown { font-size: 24px; }
.fleet-tender-card.is-page .fleet-tender-currency { left: 10px; font-size: 34px; }

/* Your firm stock: the photo a little smaller so the name, the quantity and
   Paid stand in view on a 1366x768 screen. */
.motor-ui .mui-warehouse-unit .mui-photo { width: min(100%, 240px); }
/* 1280x720: the stretched classmate card keeps everything inside itself. */
@media (max-height: 740px) {
  #panel-motor-now .motor-now-layout--chat .motor-deal__top .motor-deal__photo { height: 100px; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__top .motor-deal__photos[data-count="1"] .motor-deal__photo { height: 104px; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__main { padding: 10px 18px 10px; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__top .motor-deal__party.motor-deal__party--person, #panel-motor-now .motor-now-layout--chat .motor-deal__top .motor-deal__party--person .motor-deal__person { font-size: 32px; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__top .motor-deal__party:not(.motor-deal__party--person) { font-size: 30px; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__box--sum { padding: 6px 18px 8px; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__box--sum .motor-deal__sum-row { padding: 2px 0; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__box--sum .motor-deal__sum-row > span { font-size: 22px; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__box--sum .motor-deal__sum-row > b { font-size: 32px; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__check-label { font-size: 22px; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__check-input, #panel-motor-now .motor-now-layout--chat .motor-deal__offer-input { height: 52px; font-size: 32px; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__box--sum { padding: 4px 18px 6px; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__money-sign { font-size: 26px; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__send-row .motor-deal__send, #panel-motor-now .motor-now-layout--chat .motor-deal__check .motor-trade__btn:not(.motor-trade__btn--primary) { min-height: 42px; font-size: 17px; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__box .motor-trade__btn--primary { min-height: 50px; font-size: 21px; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__resell { font-size: 16px; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__offers-box { margin-bottom: 4px; }
}
/* 1280-wide screens: the chips a step smaller so the title row stays one row. */
@media (max-width: 1300px) {
  #panel-motor-now .motor-now-head { gap: 6px 14px; min-height: 52px; }
  #panel-motor-now .motor-now-head h1 { font-size: 26px; }
  #panel-motor-now .motor-now-head__net { font-size: 18px; }
  .motor-theme .motor-now-benefits__item { gap: 8px; padding: 4px 12px 4px 4px; }
  .motor-theme .motor-now-benefits__img { flex: 0 0 40px; width: 40px; height: 40px; }
  .motor-theme .motor-now-benefits__item .motor-now-benefits__name { font-size: 15px; }
  .motor-theme .motor-now-benefits__item b { font-size: 17px; }
}
/* The Fleet price box ends on the figures' right edge (border-box, 210 px). */
.fleet-tender-card.is-page .fleet-tender-price .motor-deal__money { width: 210px; }
.fleet-tender-card.is-page .fleet-tender-price input, .fleet-tender-card.is-page #fleet-tender-price-input { box-sizing: border-box; width: 210px; max-width: 210px; }
/* Owner 25.10.2026 (ii): the pound sign of the price box is the same size,
   weight and colour as the sums above it and starts on the same x as their
   pound signs; "You are buying from / selling to" reads larger. */
#panel-motor-now .motor-now-layout--chat .motor-deal__money-sign { left: 18px; font-size: 44px; font-weight: 800; color: #16202c; }
#panel-motor-now .motor-now-layout--chat .motor-deal__check-input, #panel-motor-now .motor-now-layout--chat .motor-deal__offer-input { padding-left: 52px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__money-sign { left: 20px; font-size: 40px; font-weight: 800; color: #16202c; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__check-input { padding-left: 50px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__money--pct .motor-deal__check-input { padding-left: 16px; padding-right: 50px; }
.fleet-tender-card.is-page .fleet-tender-currency { left: 19px; font-size: 46px; font-weight: 800; color: #0e2038; }
.fleet-tender-card.is-page .fleet-tender-price input { padding-left: 54px; }
.motor-deal__top .motor-deal__role { font-size: 18px; }
@media (max-height: 740px) {
  #panel-motor-now .motor-now-layout--chat .motor-deal__money-sign { font-size: 32px; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__check-input, #panel-motor-now .motor-now-layout--chat .motor-deal__offer-input { flex-basis: 150px; width: 150px; padding-left: 42px; }
  #panel-motor-now .motor-now-layout--chat .motor-deal__box--sum .motor-deal__price-box .motor-deal__offer-input { flex-basis: 150px; width: 150px; }
}
/* Extra deal: the sums as large as the typed figure (40 px) and the answer
   box as wide as those sums, so its pound sign starts on their pound signs'
   x; at 720 px the classmate box keeps its five digits visible. */
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box--received .motor-deal__sum-row > b { font-size: 40px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__check-input { flex-basis: 160px; width: 160px; padding-right: 8px; }
@media (max-height: 740px) {
  #panel-motor-now .motor-now-layout--chat .motor-deal__check-input, #panel-motor-now .motor-now-layout--chat .motor-deal__offer-input { padding-left: 40px; padding-right: 6px; }
}
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__check-input:placeholder-shown { font-size: 20px; }
@media (max-height: 740px) {
  #panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box--received .motor-deal__sum-row > b { font-size: 36px; }
  #panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box--received .motor-deal__sum-row { padding: 2px 0; }
}
/* Five typed digits always fit whole: the digits start 4 px after the pound
   sign and end 4 px inside the box's right edge (owner 25.10.2026: "menee
   hieman rajojen yli"). */
#panel-motor-now .motor-now-layout--chat .motor-deal__check-input, #panel-motor-now .motor-now-layout--chat .motor-deal__offer-input { padding-left: 50px; padding-right: 4px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__check-input { padding-left: 50px; padding-right: 4px; }
.fleet-tender-card.is-page .fleet-tender-price input { padding-left: 52px; padding-right: 4px; }
@media (max-height: 740px) {
  #panel-motor-now .motor-now-layout--chat .motor-deal__check-input, #panel-motor-now .motor-now-layout--chat .motor-deal__offer-input { padding-left: 40px; padding-right: 4px; }
}
/* The larger role line keeps the card's height: tight line-height, no
   margin; at 720 px the Send button stays as wide as the narrower box. */
.motor-deal__top .motor-deal__role { line-height: 1.1; margin: 0 0 2px; display: block; }
@media (max-height: 740px) {
  #panel-motor-now .motor-now-layout--chat .motor-deal__send-row .motor-deal__send, #panel-motor-now .motor-now-layout--chat .motor-deal__check .motor-trade__btn:not(.motor-trade__btn--primary) { width: 150px; }
}
/* Owner 25.10.2026 (iii): the other pages read at the deal cards' scale -
   names ~20 px, sums 24-26 px bold, descriptions 14-15 px - same style,
   same right edges, nothing else moved (bs-symmetria). */
.motor-theme .motor-campaign-row .motor-campaign-row__copy strong { font-size: 20px; }
.motor-theme .motor-campaign-row .motor-campaign-row__copy span { font-size: 15px; }
.motor-theme .motor-campaign-row .motor-campaign-row__copy .motor-campaign-row__badge { font-size: 13px; }
.motor-theme .motor-campaign-row > b { font-size: 26px; }
/* Owner 25.10.2026: the campaign's benefit is the card's second figure, not grey small print. */
.motor-theme .motor-campaign-row .motor-campaign-row__copy span.is-muted { font-size: 18px; font-weight: 700; color: #0f7a6a; opacity: 1; margin-top: 2px; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-name { font-size: 20px; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-history { font-size: 13px; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-pricing span { font-size: 11px; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-pricing strong { font-size: 24px; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-pricing.is-sub strong { font-size: 14px; }
.motor-theme .motor-seasonal-aside__row { font-size: 14px; }
.motor-theme .motor-seasonal .motor-stock-grouphead strong { font-size: 16px; }
.motor-theme .motor-seasonal .motor-stock-grouphead span { font-size: 12px; }
.motor-ui .mui-ws-row .mui-ws-row__name { font-size: 22px; }
.motor-ui .mui-ws-row .mui-ws-row__meta { font-size: 20px; }
.motor-ui .mui-ws-row .mui-btn.mui-ws-select { font-size: 17px; }
.motor-ui .mui-stat .mui-stat-label { font-size: 15px; }
.motor-theme .motor-staff-card .motor-staff-card__body h3 { font-size: 20px; }
.motor-theme .motor-staff-card .motor-staff-card__salary { font-size: 26px; }
/* Owner 25.10.2026: the salary is said once, on the button; the benefit is the card's big line. */
.motor-theme .motor-staff-card p { font-size: 19px; font-weight: 700; color: #16202c; }
.motor-theme .motor-staff-card .motor-staff-card__body p { font-size: 14px; }
.motor-theme .motor-staff-card .btn-buy { font-size: 16px; }
.motor-theme .motor-trade__order-top .motor-trade__order-customer { font-size: 20px; }
.motor-theme .motor-trade__order-body .motor-trade__order-need { font-size: 16px; }
.motor-theme .motor-trade__order-status .motor-trade__pill { font-size: 14px; }
.motor-theme .motor-staff-card .motor-staff-card__status { font-size: 12px; }
.motor-theme .motor-seasonal-aside .motor-seasonal-aside__head { font-size: 14px; }
.motor-theme .motor-trade__order-top .motor-trade__badge, .motor-theme .motor-trade__deadline { font-size: 14px; }
/* Seasonal: the wholesale label sits above its price, both on the right, so
   a wide price never touches the label; names reserve two lines so the
   three cards' rows stay level. Trade: a notch smaller, one line each. */
/* Owner 25.10.2026 night ("sesonki ... hinta ja teksti isommaks ja järkeväks"):
   the price is the card's big figure under the name, on the left like every
   other sum; the past-seasons band is the second figure (teal, bold); the
   owned line is small print. Names reserve two lines so the three cards'
   figures stay level. One heading on the page. */
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-name { font-size: 20px; min-height: 48px; line-height: 1.2; }
/* The card's body and action stretch to the card: the old row rule's align-items: center let a body
   whose longest word or price row exceeded the card float centred, so the three cards' columns
   started at different x (measured 25.10.2026 night: 10 / 1 / 10 px). */
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-card { align-items: stretch; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-card__body, .motor-theme .motor-seasonal.is-sheet .motor-seasonal-card__action { width: 100%; min-width: 0; }
/* Owner 25.10.2026 night, second picture: "teksti keskelle, hinta keskelle, symmetrisesti" - every
   line of the card is centred under the photo and the price is the biggest figure (32 px). */
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-card__body { text-align: center; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-pricing { display: flex; justify-content: center; align-items: baseline; gap: 10px; text-align: center; margin-top: 8px; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-pricing strong { font-size: 32px; font-weight: 800; color: #16202c; line-height: 1.1; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-card__action { display: flex; justify-content: center; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-card__action .motor-seasonal-action { justify-content: center; width: 100%; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-card__action .btn-buy { width: auto; min-width: 104px; }
/* Owner 25.10.2026 night: "Ostetaan ensi kierroksella 1–4" - the words, then the figure big on its
   own line, so no sentence breaks mid-way at any width. */
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-benefit { margin-top: 8px; font-size: 16px; font-weight: 700; color: #0f7a6a; line-height: 1.25; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-benefit span, .motor-theme .motor-seasonal.is-sheet .motor-seasonal-benefit b { display: block; }
/* The words may wrap at a word (Finnish "Myyntiarvio ensi kierroksella" takes two lines in a 178 px
   card); the figure never breaks and is the band's big line. */
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-benefit b { font-size: 24px; font-weight: 800; margin-top: 2px; white-space: nowrap; }
/* Owner 26.10.2026 night ("ei tajua miksi edes ostaa jos ei tiedä katettakaan"): what the customer
   pays stands under the price, so the margin is two figures apart; the next-round count follows. */
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-benefit--pays { margin-top: 6px; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-benefit--pays b { color: #16202c; }
/* Owner 26.10.2026 night ("tee noihin sesonkeihin viivat et erottaa noi tekstit ja summat"): the card
   is three ruled rows of the same shape - a word line and a figure line - "You pay", "Customer pays",
   "Bought next round" - with a hairline between every row and before the buy row, so the price and
   the customer's price read apart at a glance. The price stays the biggest figure. */
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-pricing,
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-benefit { display: block; width: 100%; margin: 0; padding: 6px 0; border-top: 1px solid #d9e0e8; text-align: center; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-pricing span,
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-benefit span { display: block; font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: 0; text-transform: none; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-pricing span { color: #40506e; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-pricing strong { display: block; margin-top: 0; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-benefit b { margin-top: 0; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-name { margin-bottom: 4px; }
/* The photo gives the rows their room: 110 px tall (was 4:3 of the card width, 133 px), so the three
   ruled rows and the buy row fit above the fold at 1366×768. */
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-photo { aspect-ratio: auto; height: 110px; margin-bottom: 8px; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-card__action { border-top: 1px solid #d9e0e8; padding-top: 8px; margin-top: 0; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-card { min-width: 0; }
.motor-theme .motor-seasonal.is-sheet .motor-seasonal-history { margin-top: 6px; font-size: 15px; }
.motor-theme .motor-seasonal-action select { width: 64px; min-height: 40px; font-size: 17px; }
.motor-theme .motor-seasonal-card__action .btn-buy { font-size: 16px; }
.motor-theme .motor-seasonal-ordered { font-size: 17px; font-weight: 700; }
/* Owner 25.10.2026 night: an empty Do now says one clear thing, large, no small print. */
#panel-motor-now .motor-now-empty p { font-size: 22px; font-weight: 700; color: #16202c; }
.motor-theme .motor-trade__order-top .motor-trade__order-customer { font-size: 18px; }
.motor-theme .motor-trade__order-body .motor-trade__order-need { font-size: 15px; }
/* A six-digit price: the box grows to the left while it is typed (the row's
   label keeps its place); the sign and the figure keep their size. */
#panel-motor-now .motor-now-layout--chat .motor-deal__money--wide .motor-deal__offer-input, #panel-motor-now .motor-now-layout--chat .motor-deal__box--sum .motor-deal__price-box .motor-deal__money--wide .motor-deal__offer-input { flex-basis: 250px; width: 250px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__money--wide .motor-deal__check-input { flex-basis: 250px; width: 250px; }
.fleet-tender-card.is-page .fleet-tender-price .motor-deal__money--wide { width: 256px; }
.fleet-tender-card.is-page .fleet-tender-price .motor-deal__money--wide input, .fleet-tender-card.is-page .motor-deal__money--wide #fleet-tender-price-input { width: 256px; max-width: 256px; }
@media (max-height: 740px) {
  #panel-motor-now .motor-now-layout--chat .motor-deal__money--wide .motor-deal__offer-input, #panel-motor-now .motor-now-layout--chat .motor-deal__box--sum .motor-deal__price-box .motor-deal__money--wide .motor-deal__offer-input { flex-basis: 190px; width: 190px; }
}

/* Owner 25.10.2026 evening: the Sabotage rows in the Staff and Marketing
   scale - the name, the effect as the strong figure, the price big. */
.motor-theme .motor-sabotage-row { padding: 14px 16px; grid-template-columns: 20px 96px minmax(0, 1fr) auto; gap: 16px; }
.motor-theme .motor-sabotage-row img { width: 96px; }
.motor-theme .motor-sabotage-row__copy strong { font-size: 20px; font-weight: 800; }
.motor-theme .motor-sabotage-row__copy span { font-size: 17px; font-weight: 700; color: #0f7a6a; margin-top: 3px; }
.motor-theme .motor-sabotage-row b { font-size: 24px; font-weight: 800; }
/* A loan facility whose round has not come is on the page blurred, the
   locked Staff card's way; only its "Opens in Round 2" line reads. */
.motor-theme .mceo-quiet.mceo-loan[data-status="locked"] .mceo-quiet-photo,
.motor-theme .mceo-quiet.mceo-loan[data-status="locked"] .mceo-quiet-title,
.motor-theme .mceo-quiet.mceo-loan[data-status="locked"] .mceo-quiet-rows { filter: blur(5px); opacity: .35; user-select: none; }

/* Owner 25.10.2026 evening: the facts strip's five figures sit on one row.
   A label never wraps, so no figure drops below the others. */
.motor-theme .motor-sheet-fact span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.motor-theme .motor-sheet-fact { min-width: 0; }

/* Owner 27.10.2026 (header grid, every deal card): the role line ("You are
   buying from") stands on the card's top line, level with the clock and the
   product at the left; a switch to another deal sits in the top-right corner
   on that same line, small and quiet; the name and the firm stand under the
   role line. */
#panel-motor-now .motor-deal__top { align-items: start; }
#panel-motor-now .motor-deal__top .motor-deal__meta, #panel-motor-now .motor-deal__top .motor-deal__head { display: flex; align-items: center; min-height: 34px; margin-top: 0; }
#panel-motor-now .motor-deal__top .motor-deal__meta { margin-bottom: 8px; }
#panel-motor-now .motor-deal__top .motor-deal__head { justify-content: space-between; flex-wrap: nowrap; gap: 12px; margin: 0; }
#panel-motor-now .motor-deal__top .motor-deal__role { line-height: 1.2; }
#panel-motor-now .motor-deal__head .motor-deal__switch, #panel-motor-now .motor-now-card__switch { flex: 0 0 auto; margin: 0 0 0 auto; padding: 5px 12px; min-height: 0; font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; background: #fff; color: var(--mui-accent-strong, #006e78); border: 1.5px solid var(--mui-accent, #00858f); border-radius: 8px; box-shadow: none; }
#panel-motor-now .motor-deal__head .motor-deal__switch:hover, #panel-motor-now .motor-now-card__switch:hover { background: var(--mui-accent-soft, #e2f1f2); color: var(--mui-accent-strong, #006e78); }
#panel-motor-now .motor-now-card__eyebrow:has(.motor-now-card__switch) { display: flex; align-items: center; gap: 10px; min-height: 34px; }
#panel-motor-now .motor-now-card__eyebrow .motor-now-card__switch { text-transform: none; letter-spacing: 0; }
/* Owner 27.10.2026: on a 1280-wide screen the empty price box's "Type here"
   fits whole (bs-symmetria 1). */
@media (max-width: 1300px) {
  #panel-motor-now .motor-now-layout--chat .motor-deal__offer-input:placeholder-shown, #panel-motor-now .motor-now-layout--chat .motor-deal__check-input:placeholder-shown { font-size: 20px; }
}
/* Owner 27.10.2026: the Extra deal's Skip deal stands in view without
   scrolling at 1366x768 and 1280x720 - tighter spacing, the same text. */
#panel-motor-now .motor-now-layout--chat .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__main { padding-top: 12px; padding-bottom: 10px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__top { margin-bottom: 6px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__top .motor-deal__photos[data-count="1"] .motor-deal__photo { height: 108px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box { padding-top: 6px; padding-bottom: 8px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box .motor-deal__sum-row { padding-top: 2px; padding-bottom: 2px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box .motor-deal__sum-row--last { padding-bottom: 4px; margin-bottom: 4px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box .motor-deal__check { margin-bottom: 4px; }
#panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__box .motor-trade__btn--primary { margin-top: 2px; }
@media (max-height: 740px) {
  #panel-motor-now .motor-deal:not(:has(.motor-deal__talk)) .motor-deal__top .motor-deal__photos[data-count="1"] .motor-deal__photo { height: 100px; }
}
/* Owner 27.10.2026: the empty Do now is the deal card's frame - the same
   width and place, the chat's column left free - with one line in its
   middle. */
#panel-motor-now .motor-now-layout--chat .motor-now-emptycard { display: grid; grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: minmax(0, 1fr); gap: 24px; height: 100%; }
#panel-motor-now .motor-now-emptycard__main.motor-now-empty { grid-column: 1; display: flex; align-items: center; justify-content: center; max-width: none; margin: 0; padding: 16px 20px; min-height: 0; box-sizing: border-box; background: var(--mtr-surface, #fff); border: 1px solid var(--mtr-line, #e3e7ea); border-radius: 16px; }
#panel-motor-now .motor-now-emptycard__main.motor-now-empty p { margin: 0; font-size: 22px; font-weight: 700; color: var(--mtr-ink-soft, #40506e); text-align: center; }
#panel-motor-now .motor-now-emptycard > .motor-now-aside--inline { grid-column: 2; max-width: none; margin: 0; align-self: start; }
@container motor-now-panel (max-width: 1000px) {
  #panel-motor-now .motor-now-layout--chat .motor-now-emptycard { grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; }
}
@container motor-now-panel (max-width: 860px) {
  #panel-motor-now .motor-now-layout--chat .motor-now-emptycard { grid-template-columns: minmax(0, 1fr); height: auto; }
  #panel-motor-now .motor-now-emptycard__main.motor-now-empty { min-height: 240px; }
  #panel-motor-now .motor-now-emptycard > .motor-now-aside--inline { grid-column: 1; }
}
/* Owner 4.11.2026: before a tender the Fleet page says one thing, large -
   "Next tender in 1:00 · 6 × Used hatchback", "First tender: round 2" - not
   two small grey lines (group game and small class). */
.motor-theme .motor-fleet-event.is-next { padding: 22px 26px; }
.motor-theme .motor-fleet-event.is-next strong { font-size: 32px; font-weight: 800; line-height: 1.2; color: var(--mtr-ink, #0e2038); }
/* Owner 4.-5.11.2026: the result is one big row on the Fleet card ("You won
   £29,500", "Volt Motors won £29,500", "No firm won"), the same size as the
   card's other rows. */
.fleet-tender-card .fleet-tender-row--result > span { white-space: normal; }
/* Owner 4.11.2026: the Do now fleet card is the Fleet card, full width under
   the Do now title, with one button to the Fleet tenders page. */
.motor-now-layout--fleet { display: block; }
.motor-now-fleet-card .fleet-tender-buy { width: 100%; }
.fleet-tender-card .fleet-tender-kicker[hidden] { display: none; }
/* A fleet price with its thousands separator (owner 5.11.2026): from five
   digits ("29,500") the box is a little wider, from six ("129,500") wider
   again - always growing to the LEFT, so the figure keeps the right edge
   of the sums above it (bs-symmetria). */
.fleet-tender-card.is-page .fleet-tender-price .motor-deal__money--wide { width: 246px; justify-self: end; }
.fleet-tender-card.is-page .fleet-tender-price .motor-deal__money--wide input, .fleet-tender-card.is-page .motor-deal__money--wide #fleet-tender-price-input { width: 246px; max-width: 246px; min-width: 246px; flex: 0 0 246px; }
.fleet-tender-card.is-page .fleet-tender-price .motor-deal__money--wider { width: 290px; }
.fleet-tender-card.is-page .fleet-tender-price .motor-deal__money--wider input, .fleet-tender-card.is-page .motor-deal__money--wider #fleet-tender-price-input { width: 290px; max-width: 290px; min-width: 290px; flex: 0 0 290px; }
/* The Do now fleet card spans the page like the Fleet page's card. */
#panel-motor-now .motor-now-layout.motor-now-layout--fleet, .motor-now-layout.motor-now-layout--fleet { display: block; max-width: none; width: 100%; }

/* STEP 4 (owner 5.11.2026): the warning before the firm's topic task opens. A notice only: no clicks, no layout shift. */
.motor-topic-warning { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 60; max-width: min(760px, calc(100vw - 32px)); box-sizing: border-box; padding: 12px 22px; background: #fff7e6; border: 2px solid #e0a526; border-radius: 12px; box-shadow: 0 4px 14px rgba(22, 32, 44, .18); font-size: 22px; font-weight: 800; line-height: 1.25; text-align: center; color: var(--mtr-ink, #16202c); pointer-events: none; }
.motor-topic-warning[hidden] { display: none; }

#panel-motor-now .motor-now-emptycard__main.motor-now-empty { flex-direction: column; gap: 16px; }

/* SPEC CHANGE (owner 5.11.2026): a classmate deal waits on this pupil while the
   Extra deal is open - one calm line and the header's own switch button. */
#panel-motor-now .motor-deal__head .motor-deal__alert { margin-left: auto; align-self: center; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--mui-accent-strong, #006e78); }
#panel-motor-now .motor-deal__head:has(.motor-deal__alert) .motor-deal__role { white-space: nowrap; }
@media (max-width: 1320px) { #panel-motor-now .motor-deal__head .motor-deal__alert { font-size: 15px; white-space: nowrap; } }
#panel-motor-now .motor-now-emptycard__main .motor-deal__extra-link { position: absolute; right: 14px; bottom: 12px; }
/* Owner 27.10.2026 (option A): one quiet line at the card's foot, at the right - an outline
   link, smaller than the card's own buttons, never a filled teal button. */
.motor-deal__extra-row { display: flex; justify-content: flex-end; margin: 6px 0 0; }
#panel-motor-now .motor-deal__extra-link, .motor-deal__extra-link { min-height: 0; width: auto; padding: 5px 12px; border: 1.5px solid var(--mui-accent, #00858f); border-radius: 8px; background: #fff; box-shadow: none; font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--mui-accent-strong, #006e78); cursor: pointer; }
#panel-motor-now .motor-deal__extra-link:hover, .motor-deal__extra-link:hover { background: var(--mui-accent-soft, #e2f1f2); }
#panel-motor-now .motor-deal__extra-link:focus-visible, .motor-deal__extra-link:focus-visible { outline: 2px solid var(--mui-accent, #00858f); outline-offset: 2px; }
#panel-motor-now .motor-now-emptycard__main.motor-now-empty { position: relative; }