/* Approved master canvas typography. Self-hosted, including extended Latin glyphs. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-Italic-Variable.ttf") format("truetype");
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
}
/* =============================================================================
   selyvo market — design system.  m016.

   Palette and component geometry: SELYVO B2B HTML Mockup v1.0.
   Layout and behaviour: B2B Portal UX & Functional Specification v1.1
   (§02 layout/spacing/typography, §03 component dimensions, §04 responsive,
   ICON SYSTEM/02 states and accessible interaction).

   HISTORY, SO IT READS AS A DECISION AND NOT AS DRIFT.
   m001-m015 used the platform orange #FF8B1F with white label text, on
   instruction, in place of the specification's teal. The mockup returns to
   teal/cyan and supersedes that. The brand mark is the only thing unchanged.

   CONTRAST, STATED ONCE.  White on the mockup's --cyan #009BB4 is about 3.3:1.
   Button labels are 14px bold, which is below the 18.66px threshold for large
   text, so AA asks 4.5:1 and cyan does not reach it. The mockup's own --teal
   #007C91 does, at about 4.9:1 — and it is already the hover colour, so the
   hover state is more legible than the resting one. Shipped as drawn; changing
   --accent to #007C91 is one line. See the round document.

   ONE PLACE HOLDS EACH FACT.  Every colour, radius, size and spacing step is a
   custom property consumed by the rules beneath it. No rule hard-codes a value
   that also exists as a token, which is why swapping the whole palette was a
   single block.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     Palette: SELYVO B2B HTML Mockup v1.0, taken verbatim.

     This REPLACES the earlier instruction to use the platform orange. That was a
     deliberate departure from the spec's teal; the mockup returns to teal/cyan and
     is now the authority. Recorded here so a later session reads it as a decision
     rather than drift, and does not "correct" it back.

     Only the brand mark is unchanged, as instructed.

     Everything below is a token consumed by the rules beneath it. That is why this
     change is one block rather than a sweep: no rule hard-codes a colour that also
     exists here, and DesignSystemTest fails the build if one ever does.
     --------------------------------------------------------------------------- */

  /* --- surfaces --- */
  --canvas:            #F2F7FB;   /* mockup --bg   */
  --surface:           #FFFFFF;
  --surface-subtle:    #F2F7FB;
  --surface-sunken:    #E7F7FB;   /* mockup --pale */

  /* --- ink --- */
  --text:              #071C3C;   /* mockup --ink   */
  --text-secondary:    #4A6282;   /* mockup --muted */
  --text-on-accent:    #FFFFFF;

  --border:            #DCE6EF;   /* mockup --line */
  --border-strong:     #BBCBDB;   /* mockup secondary-button border */
  --border-soft:       #EEF2F6;   /* 349k: the boards — a row's divider inside a card (For … only) */
  --table-head:        #F7FAFC;   /* 349k: the boards AiModelSimple and AiModelEffort — a table's head */

  /* --- accent --- */
  --accent:            #009BB4;   /* mockup --cyan */
  --accent-hover:      #007C91;   /* mockup --teal */
  --accent-deep:       #007C91;
  /* The mockup's --navy. Carried so a dark surface, if one is ever needed, is
     the designed one rather than whichever slate I reach for. */
  --navy:              #05364B;   /* teal is the mockup's colour for text and links
                                     on light surfaces, and it clears AA where cyan
                                     does not — see the note in the round document */
  --accent-surface:    #E7F7FB;   /* mockup --pale */
  --accent-line:       #B9E4EE;
  --accent-wash:       #F4FBFD;   /* 349k: the board AiModelEffort — "How hard it works" on its card */

  /* --- status — m333: Jiri's scheme (13 Oct 22:57, his edited token page) in place of the mockup's green, gold, red and
     coral. His values are the fills, tints, bars, dots, edges and the badge. As TEXT they would read at about 2:1 (lime,
     amber) and 3.7:1 (rose) on white, under the 4.5:1 text needs, so text — and an icon drawn in its colour — takes the
     -text shade: his hue and saturation, darker, at 4.5:1 or more on white AND on its own tint. On his bright fills the
     foreground is the ink (8.6:1 on the lime, 7.3:1 on the orange). The stars keep his gold: a symbol beside its number.
     DesignSystemTest DS-10 holds all of this.
     m340 — Jiri, 15 Oct 11:44 (answer 14: "use the bright shades - can be changed back as I need to check visuality in real life like
     morning and evening light, different monitors, etc."): the three -text shades are his bright values for now. Back to the darker
     shades of m333 — #507B0D, #916900, #DA0C30 — is these three values. The danger button keeps the darker red (--danger-button), so its
     white words stay readable. --- */
  --success:           #84CC16;   /* lime: fills, dots, ticks, edges */
  --success-surface:   #F4FBE7;
  --success-line:      #CDE9A0;   /* 349k: the board AiModelEffort — Test it's strip, its edge */
  --success-deep:      #84CC16;   /* his "deep": the lime too — a done step's circle */
  --success-text:      #84CC16;   /* m340: his lime (m333's darker shade: #507B0D, 5.0:1 on white) */
  --warning:           #FFB800;   /* amber: edges and marks */
  --warning-surface:   #FFF7DE;
  --warning-fill:      #FFB800;   /* the deadline bar */
  --warning-text:      #FFB800;   /* m340: his amber (m333's darker shade: #916900, 5.0:1 on white) */
  --danger:            #F43F5E;   /* rose: edges — 3.7:1 on white, enough for a field's edge (3:1) */
  --danger-surface:    #FFF0F3;
  --danger-text:       #F43F5E;   /* m340: his rose (m333's darker shade: #DA0C30, 5.2:1 on white) */
  --danger-button:     #DA0C30;   /* the danger button's fill: white on it 5.2:1 (m333's decision 3) */
  --rating:            #FFB800;   /* the stars */
  --violet:            #5B3FA8;   /* m307: the first rating, from the questionnaires — apart from the reviews' green (board v67) */
  --violet-surface:    #F1EEFA;   /* m307: its chip's tint */
  --violet-bar:        #8E7CC9;   /* m307: the score's bar on the scale of levels */
  --own:               #4B3A8F;   /* m311: own time — its violet text, buttons and tags (boards "Time sheets — own time", v69) */
  --own-line:          #C9BFEA;   /* m311: the violet edge of own time's cells, cards and tiles */
  --own-wash:          #FBFAFE;   /* m311: the violet wash of own time's rows and form */
  --badge:             #FF8C1F;   /* m333: orange — its digits in the ink, 7.3:1 */
  --scrim:             rgba(7, 28, 60, .78);   /* label over a photograph */
  --shadow-menu:       0 16px 40px rgba(7, 28, 60, .18);   /* m349r: a list that opens over the page (the board PricingForCustomers' search) */
  --shadow-dock:       0 -12px 40px rgba(7, 28, 60, .22);  /* m349r: a new message risen from the bottom (the board MailComposeBottom) */
  --focus-ring:        #007C91;   /* mockup focus ring is the teal */

  /* --- geometry --- */
  --radius-card:       9px;       /* mockup --radius */
  --radius-button:     6px;
  --radius-input:      6px;
  --border-width:      1px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  /* m320: a card's padding and border — where its fields end, which a wizard's top actions line up with; and .split's panel. */
  --wiz-inset: calc(var(--space-6) + var(--border-width));
  --split-side: 430px;

  /* --- component sizes --- */
  --control-h:         44px;
  --commerce-h:        48px;
  --tab-h:             48px;
  --topbar-h:          64px;      /* mockup .topbar */
  --navbar-h:          52px;      /* mockup .navrow */
  --shell-h:           116px;
  --content-max:       1416px;
  --gutter:            24px;

  /* --- type --- */
  --font-ui: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
  --title-size: 40px;      --title-lh: 47px;   /* mockup h1 40/1.18 */
  --section-size: 24px;    --section-lh: 30px; /* mockup h2 24/1.25 */
  --body-size: 16px;       --body-lh: 23px;    /* mockup body 16/1.45 */
  --label-size: 14px;      --label-lh: 19px;
  --helper-size: 13px;     --helper-lh: 18px;
  --micro-size: 12px;      --micro-lh: 16px;
}

* { box-sizing: border-box; }

html { scroll-padding-top: 128px; }   /* §02: anchor scroll clears the sticky shell */

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--body-size);
  line-height: var(--body-lh);
}

/* [hidden] must beat display:flex on the containers the app toggles. Without
   !important a hidden flex row stays visible, which is a bug that looks like a
   data problem. */
[hidden] { display: none !important; }

:focus-visible {
  /* Mockup: 2px teal at 3px offset. Never removed — §07 requires a visible ring. */
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* --------------------------------------------------------------- shell (§02) */

.shell {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: var(--border-width) solid var(--border);
}
.shell-row {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; gap: var(--space-4);
}
.shell-row--top { height: var(--topbar-h); }
.shell-row--nav { height: var(--navbar-h); border-top: var(--border-width) solid var(--border); }

.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; }
.brand-mark { width: 28px; height: 28px; flex: none; border-radius: 6px; display: block; }
.brand-word { font-size: 28px; line-height: 1; letter-spacing: -0.7px; white-space: nowrap; }
.brand-word b { font-weight: 750; }
.brand-word span { font-weight: 400; margin-left: var(--space-1); }

/* G02 search: reference 744x40, built at the minimum control height */
.search { flex: 1 1 auto; max-width: 744px; }
.search-field {
  display: flex; align-items: center; gap: var(--space-2);
  /* Mockup .searchbox: 42px on the canvas colour, not white. */
  height: 42px;
  padding: 0 14px;
  background: var(--canvas);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-input);
}
.search-field input {
  flex: 1; border: 0; background: transparent; font: inherit; color: inherit;
}
/* The input sits inside a styled field, so the RING goes on the field. Removing the
   input's own outline without putting one back is how a keyboard user loses the search
   box, which is why DS-05 forbids a bare `outline: none` anywhere. */
.search-field:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.search-field svg { color: var(--text-secondary); flex: none; }

.shell-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

/* Icon-only control: 24px glyph in a 44x44 target (ICON SYSTEM/01) */
.iconbtn {
  position: relative;
  width: var(--control-h); height: var(--control-h);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--radius-button);
  color: var(--text); cursor: pointer;
}
.iconbtn:hover:where(:not(:disabled):not([aria-disabled="true"])) { background: var(--accent-surface); color: var(--accent-deep); }
/* Mockup: a coral count badge with a white ring, not the danger red. */
.badge {
  position: absolute; top: 1px; right: 1px; border: 2px solid var(--surface);
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 100%; background: var(--badge); color: var(--text); font-weight: 700;
  font-size: var(--micro-size); line-height: 18px; text-align: center;
}

.navlinks { display: flex; align-items: center; gap: var(--space-1); }
.navlink {
  height: var(--control-h); padding: 0 var(--space-3);
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: transparent; border: 0; border-radius: var(--radius-button);
  font-size: var(--label-size); line-height: var(--label-lh); font-weight: 600;
  color: var(--text); cursor: pointer; white-space: nowrap;
}
.navlink:hover { background: var(--accent-surface); color: var(--accent-deep); }
.navlink[aria-current="page"] { color: var(--accent-deep); }

/* --------------------------------------------------------------- buttons (§03) */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-h); min-width: 96px; padding: 0 var(--space-4);
  border-radius: var(--radius-button); border: var(--border-width) solid transparent;
  font-family: inherit; font-size: var(--label-size); line-height: var(--label-lh);
  font-weight: 700; cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--text-on-accent); }
.btn-primary:hover:where(:not(:disabled):not([aria-disabled="true"])) { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover:where(:not(:disabled):not([aria-disabled="true"])) { border-color: var(--accent); color: var(--accent-deep); }
.btn-commerce { height: var(--commerce-h); width: 100%; }
/* §03: width stays stable while loading, so the layout does not jump under the cursor */
.btn[aria-busy="true"] { opacity: .75; pointer-events: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------- page (§02) */

.page { max-width: var(--content-max); margin: 0 auto; padding: var(--space-6) var(--gutter) 64px; }
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
.crumbs a { color: inherit; }
.title {
  font-size: var(--title-size); line-height: var(--title-lh);
  /* Mockup h1: 750 weight and -1.05px tracking. At 40px the tighter tracking is most of
     what makes the heading read as the mockup's rather than a default bold. */
  font-weight: 750; letter-spacing: -1.05px; margin: 5px 0;
}
.lede { font-size: 18px; line-height: 26px; color: var(--text-secondary); margin: 0 0 var(--space-6); }
.section-title {
  font-size: var(--section-size); line-height: var(--section-lh);
  font-weight: 700; letter-spacing: -0.3px; margin: var(--space-6) 0 var(--space-4);
}

.card {
  /* Mockup .panel: 9px radius, 24px padding. */
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}

/* Category tiles (S01-A03): the whole tile is one link */
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }
.tile {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 64px; padding: 17px 14px;
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card); color: inherit; text-decoration: none;
  font-size: var(--helper-size); line-height: var(--helper-lh); font-weight: 700;
  text-align: left; cursor: pointer;
}
.tile:hover { border-color: var(--accent); background: var(--accent-surface); }
.tile svg { color: var(--accent-deep); flex: none; width: 25px; height: 25px; }

/* Listing cards (S01-A06 / S02-A09) */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.listing {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: 8px; overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
/* Mockup .product-card: a small lift on hover. Suppressed under reduced-motion, since a
   card that jumps is exactly what that preference is asking us not to do. */
.listing:hover { box-shadow: 0 8px 22px rgba(15, 53, 80, .07); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .listing:hover { transform: none; } }
.listing-media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-subtle); }
.listing-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing-type {
  position: absolute; left: var(--space-2); bottom: var(--space-2);
  padding: 2px var(--space-2); border-radius: var(--radius-input);
  background: var(--scrim); color: var(--text-on-accent);
  font-size: var(--micro-size); line-height: var(--micro-lh); letter-spacing: .04em;
}
.listing-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.listing-title { font-size: var(--body-size); line-height: var(--body-lh); font-weight: 700; }
.listing-title a { color: inherit; text-decoration: none; }
.meta {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary);
}
.meta svg { flex: none; }
.verified { color: var(--success-text); }
.rating { color: var(--rating); font-weight: 600; }
/* An unrated provider is a distinct class, not a zero score (§INTERACTION/Empty results) */
.rating-none { color: var(--text-secondary); font-style: normal; }
.price { font-size: 19px; line-height: 26px; font-weight: 750; margin-top: auto; }
.price small { font-size: var(--helper-size); font-weight: 400; color: var(--text-secondary); }

/* Save heart: 34px visual, 44x44 target (S01-A08) */
.save {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: var(--control-h); height: var(--control-h);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer; color: var(--text);
}
.save::before {
  content: ""; position: absolute; width: 34px; height: 34px;
  border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(7,28,60,.18);
}
.save svg { position: relative; }
.save[aria-pressed="true"] svg { fill: var(--accent); color: var(--accent); }

.tabs {
  display: flex; align-items: center; gap: 26px;
  border-bottom: var(--border-width) solid var(--border);
  overflow-x: auto; white-space: nowrap; margin: var(--space-5) 0;
}
.tab {
  height: var(--tab-h); padding: 0;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  font: inherit; font-size: var(--label-size); font-weight: 600;
  color: var(--text-secondary); cursor: pointer;
}
.tab[aria-selected="true"] {
  /* Mockup: teal label, 3px cyan underline. */
  color: var(--accent-deep); font-weight: 700; border-bottom: 3px solid var(--accent);
}

.notice {
  display: flex; gap: var(--space-3); padding: var(--space-4);
  border-radius: var(--radius-card); border: var(--border-width) solid var(--border);
  background: var(--surface);
  font-size: var(--label-size); line-height: var(--label-lh);
}
.notice-error { background: var(--danger-surface); border-color: var(--danger); color: var(--danger-text); }
.notice > div { min-width: 0; overflow-wrap: anywhere; }   /* 349g (looked at): a long name — one word — breaks inside its notice */
.skeleton {
  background: linear-gradient(90deg, var(--surface-subtle), var(--border), var(--surface-subtle));
  background-size: 200% 100%; animation: sheen 1.2s infinite linear; border-radius: var(--radius-input);
}
@keyframes sheen { to { background-position: -200% 0; } }
/* §03: honour reduced-motion rather than animating regardless */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* --------------------------------------------------------------- responsive (§04) */

/* Compact desktop / tablet: 768-1279 — 32px outer margins, 3-across cards */
@media (max-width: 1279px) {
  .page, .shell-row { padding-left: 32px; padding-right: 32px; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .tiles { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile: 320-767 — 16px margins, compact 56px top bar, nav in a drawer */
@media (max-width: 767px) {
  :root { --topbar-h: 56px; --title-size: 32px; --title-lh: 40px; }
  .page, .shell-row { padding-left: var(--space-4); padding-right: var(--space-4); }
  .shell-row--nav { overflow-x: auto; }
  .search { display: none; }            /* G02: mobile opens a dedicated search view */
  .search-trigger { display: inline-flex; }
  /* §04: 2 columns while each stays >= 160px, otherwise 1 */
  .cards { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .title { font-size: var(--title-size); line-height: var(--title-lh); }
}
@media (max-width: 380px) {
  .cards, .tiles { grid-template-columns: 1fr; }
}
/* m342 (ROUND-m328…m339's "not fixed": this rule came after the phone's and hid the search button everywhere): only from 768 px. */
@media (min-width: 768px) { .search-trigger { display: none; } }
/* m342: on a phone the search button opens the field under the bar, the width of the screen; the bar's two words (the currency, the
   language) give the button its room — with it the bar was 28 px wider than a 390 px screen. */
@media (max-width: 767px) {
  .shell-row--top { gap: var(--space-2); }
  .shell-row--top .shell-actions .navlink { padding-left: 6px; padding-right: 6px; }
  .shell-row--top .lang-host { margin-right: 0; }
  .shell-row--top .lang-btn { padding: 0 4px; }
  body.search-open .shell-row--top > .search { display: flex; position: absolute; left: 0; right: 0; top: var(--topbar-h); z-index: 21;
    padding: var(--space-2) var(--space-4); background: var(--surface); border-bottom: var(--border-width) solid var(--border); }
  body.search-open .shell-row--top > .search .search-field { flex: 1 1 auto; }
}
/* m334, found by the look at 900 px (Mail's folder picker) — "the header scrolls sideways at 768–800 px", carried since m324: from
   768 to 1023 px the page scrolled sideways, by up to 206 px on Mail (its bell is one more control): the top row's search would not
   shrink below the width of its own box, and the signed-in tabs with Create… are wider than the window. The search now gives way
   (the actions keep their size), and the tab row scrolls sideways within itself, as it has on a phone since m306 — with Create… held
   at its right end, so it is never scrolled away or cut in half (it was, at 390 px). */
.search, .search-field { min-width: 0; }
.search-field input { min-width: 0; width: 100%; }
/* m342 (ROUND-m339's "not fixed": at 390 px the tabs scrolled under Create…, held at the row's end, and showed again past it, in the
   row's own margin): the tabs scroll in their own box, which ends where Create… begins — it covers none of them and is never
   scrolled away. */
@media (max-width: 1023px) {
  .shell-row--nav > .navlinks { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .shell-row--nav > .navlinks::-webkit-scrollbar { display: none; }
  .shell-row--nav > .shell-actions { flex: none; } }
#account .acct-icon { display: none; }
/* m349t (board TopTabs, 449 — your mockup, 22 Oct): on a phone the tabs scroll sideways under the search with the button held at their
   right end, saying what it creates (m343's row of its own above them gave way); My listings scrolls with the tabs, at their end; the
   tabs never show past the button (m342). ▾ is a sheet from the bottom. */
@media (max-width: 767px) {
  .shell-row--nav { scrollbar-width: none; }
  .shell-row--nav::-webkit-scrollbar { display: none; }
  .shell-row--nav > .navlinks { flex: none; overflow: visible; }
  .shell-row--nav > .shell-actions { display: contents; }
  .shell-row--nav .create-split { position: sticky; right: 0; z-index: 3; flex: none; margin-left: auto; padding-left: var(--space-2);
    background: var(--surface); box-shadow: var(--space-4) 0 0 var(--surface), calc(-1 * var(--space-3)) 0 var(--space-3) calc(-1 * var(--space-1)) var(--surface); }
  #create-menu { position: fixed; left: 0; right: 0; top: auto; bottom: 0; min-width: 0; max-height: 75vh; overflow-y: auto; z-index: 80;
    border-radius: var(--radius-card) var(--radius-card) 0 0; padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }
  /* m343 (seen in Chromium): signed out, the words "Sign in" made the top bar wider than the screen in five of the seven languages —
     on a phone it is a person; the words stay for whoever hears the page. */
  #account.acct-signin { width: var(--control-h); padding: 0; justify-content: center; }
  #account.acct-signin .acct-word { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0; }
  #account.acct-signin .acct-icon { display: inline-flex; }
}
/* m343 (seen in Chromium): at 360 px — many Android phones — the top bar was 8–10 px wider than the screen, signed in or out. There its
   buttons are 34 px wide (44 high, as before; 32 with MailChat's bell), the avatar 32 and the currency's word closer. These outrank m306's
   40 px and the bell's 36 px further down. */
@media (max-width: 374px) {
  .shell-row--top .shell-actions .iconbtn:not(.lang-btn), #account.acct-signin { width: 34px; }
  .shell-row--top .shell-actions:has(#wm-bell-wrap:not([hidden])) .iconbtn:not(.lang-btn) { width: 32px; }
  #account .avatar { width: 32px; height: 32px; }
  .shell-row--top .shell-actions .navlink { padding-left: 2px; padding-right: 2px; }
}

@media print {
  .shell, .save { display: none; }
  body { background: var(--surface); }
}

/* ------------------------------------------------------- forms (§03) — m003 */

.split { display: grid; grid-template-columns: minmax(0, 1fr) var(--split-side); gap: var(--space-6); align-items: start; }
.form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-narrow { max-width: 480px; }
.form-title { font-size: 18px; line-height: 26px; font-weight: 700; margin: 0; }

.field { display: flex; flex-direction: column; }
/* §03: label above with an 8px gap; a placeholder never stands in for a label */
.field-label { font-size: var(--label-size); line-height: var(--label-lh); font-weight: 600; margin-bottom: var(--space-2); }
.field-optional { font-weight: 400; color: var(--text-secondary); }
.input {
  height: var(--control-h); padding: 0 var(--space-3);
  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-input);
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: var(--body-size); line-height: var(--body-lh);
}
.input:focus-visible { border-color: var(--accent); }
.input-invalid, .input.input-invalid, .input[aria-invalid="true"] { border-color: var(--danger); }
/* §07: helper below with a 6px gap */
.field-help { margin: var(--space-1) 0 0; font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary); }
.field-error { margin: var(--space-1) 0 0; font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--danger-text); font-weight: 600; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); }
.form-actions { display: flex; justify-content: flex-end; gap: var(--space-4); }
.form-actions .btn-secondary { margin-right: auto; }   /* Back stays left of Continue */

/* Step indicator (S06, S07) */
.steps { display: flex; align-items: center; gap: var(--space-4); list-style: none; padding: 0; margin: 0 0 var(--space-6); flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--label-size); font-weight: 600; }
.step-n {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-subtle); border: var(--border-width) solid var(--border-strong);
  font-size: var(--helper-size);
}
.step.current { color: var(--text); }
.step.current .step-n, .step.done .step-n { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.step.done { color: var(--text); }

/* Single-choice and multi-choice cards (S06-A01/A02, A08/A09) */
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.choice {
  display: flex; align-items: flex-start; gap: var(--space-3);
  min-height: 87px; padding: var(--space-4);
  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-card);
  background: var(--surface); cursor: pointer;
}
.choice:hover { border-color: var(--accent); }
.choice-on { border-color: var(--accent); background: var(--accent-surface); }
.choice input { margin-top: 3px; width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.choice-text { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--label-size); line-height: var(--label-lh); }
.choice-text span { color: var(--text-secondary); font-size: var(--helper-size); line-height: var(--helper-lh); }

.review { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.review dt { color: var(--text-secondary); font-size: var(--label-size); }
.review dd { margin: 0; font-size: var(--label-size); font-weight: 600; }

.panel { display: flex; flex-direction: column; gap: var(--space-4); }
.panel-title { font-size: var(--section-size); line-height: var(--section-lh); font-weight: 700; margin: 0; }
.panel-point { display: flex; flex-direction: column; gap: 2px; font-size: var(--label-size); line-height: var(--label-lh); }
.panel-point span { color: var(--text-secondary); font-size: var(--helper-size); line-height: var(--helper-lh); }

/* A link that is really a button, because it performs an action rather than navigating */
.linkbtn {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--accent-deep); font-weight: 600; cursor: pointer; text-decoration: underline;
}

@media (max-width: 1023px) {
  /* m308, found by the look at 390 px: a plain 1fr track grows to its widest content (the wizard's Suppliers step: 392 px on a 390 px phone). */
  .split { grid-template-columns: minmax(0, 1fr); }
  .grid-2, .choice-row { grid-template-columns: 1fr; }
  .review { grid-template-columns: 1fr; }
  .review dd { margin-bottom: var(--space-2); }
}

/* Organisation switcher (§05) — m004 */
.ctx-list { display: flex; flex-direction: column; gap: var(--space-3); }
.ctx-list .choice { min-height: 0; }

/* ------------------------------------------------------- S02 results — m005 */

/* §02: filter rail 278 wide, 24-28 gap, main keeps a usable minimum width */
.results-layout { display: grid; grid-template-columns: 278px minmax(0, 1fr); gap: 28px; align-items: start; }
.results-main { min-width: 0; }

.filters { display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: calc(var(--shell-h) + var(--space-4)); }
.filters-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.fgroup { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.fgroup legend { font-size: var(--label-size); line-height: var(--label-lh); font-weight: 700; padding: 0 0 var(--space-2); }
/* §03: the whole row is the target, at the 44px minimum */
.frow { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-h); cursor: pointer; font-size: var(--label-size); }
.frow input { width: 19px; height: 19px; accent-color: var(--accent); flex: none; }
.price-range { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-2); align-items: center; }
.price-range .input { min-width: 0; }

.subcats { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.chipbtn {
  min-height: var(--control-h); padding: 0 var(--space-4);
  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-button);
  background: var(--surface); color: inherit; font: inherit; font-size: var(--label-size);
  font-weight: 600; cursor: pointer;
}
.chipbtn:hover { border-color: var(--accent); color: var(--accent-deep); }

.toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.result-count { font-size: var(--label-size); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  /* Mockup .chip: pale fill, teal text, 6px radius, 12px/650 — not a pill. */
  min-height: 31px; padding: 5px 9px;
  border-radius: var(--radius-input); border: var(--border-width) solid transparent;
  background: var(--accent-surface); color: var(--accent-deep);
  font: inherit; font-size: var(--micro-size); font-weight: 650; cursor: pointer;
}
.select { min-width: 171px; }
.viewtoggle { display: flex; gap: var(--space-1); margin-left: auto; }
.viewtoggle .iconbtn[aria-pressed="true"] { background: var(--accent-surface); color: var(--accent-deep); }

.rows { display: flex; flex-direction: column; gap: var(--space-2); }
.rowcard {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--space-4);
  align-items: center; padding: var(--space-3);
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
}
.rowcard-media { aspect-ratio: 4/3; background: var(--surface-subtle); border-radius: var(--radius-input); overflow: hidden; }
.rowcard-media img { width: 100%; height: 100%; object-fit: cover; }
.rowcard-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.rowcard-price { display: flex; align-items: center; gap: var(--space-2); position: relative; }
.rowcard-price .save { position: static; }

.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); }
.pagebtn {
  min-width: var(--control-h); height: var(--control-h);
  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-button);
  background: var(--surface); font: inherit; font-weight: 600; cursor: pointer;
}
.pagebtn[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.pager .iconbtn:disabled { opacity: .4; cursor: not-allowed; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* §04: below 768 the rail becomes a drawer; here it collapses above the results */
@media (max-width: 1023px) {
  .results-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
}
@media (max-width: 767px) {
  .rowcard { grid-template-columns: 72px minmax(0, 1fr); }
  .rowcard-price { grid-column: 1 / -1; justify-content: space-between; }
  .viewtoggle { margin-left: 0; }
}

/* ------------------------------------------------------- S03 detail + cart — m006 */

.detail-layout { display: grid; grid-template-columns: minmax(0, 723px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.gallery { display: flex; flex-direction: column; gap: var(--space-3); }
.gallery-main { position: relative; aspect-ratio: 4/3; background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-empty { width: 100%; height: 100%; background: var(--surface-subtle); }
.stock-flag { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1; padding: 2px var(--space-3); border-radius: 999px; font-size: var(--micro-size); font-weight: 700; }
.stock-in { background: var(--success-surface); color: var(--success-text); }
.stock-out { background: var(--danger-surface); color: var(--danger-text); }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.thumb { aspect-ratio: 4/3; padding: 0; border: 2px solid var(--border); border-radius: var(--radius-input); background: var(--surface); overflow: hidden; cursor: pointer; }
.thumb-on { border-color: var(--accent); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.buy { display: flex; flex-direction: column; gap: var(--space-4);
  position: relative; }   /* m349r: the heart (S03-C09) in the card's corner — it sat over the avatar, at the page's */
.buy .detail-head { padding-right: var(--control-h); }
.detail-title { font-size: 32px; line-height: 40px; font-weight: 700; margin: 0; }
.buy-price strong { font-size: 28px; line-height: 36px; }
.buy-price p { margin: var(--space-1) 0 0; }
.buy-actions { display: flex; flex-direction: column; gap: var(--space-3); }

.tiers { width: 100%; border-collapse: collapse; }
.tier { border: var(--border-width) solid var(--border); padding: var(--space-3); text-align: left; vertical-align: top; }
.tier-on { border-color: var(--accent); background: var(--accent-surface); }
.tier-band { display: block; font-size: var(--helper-size); color: var(--text-secondary); }
.tier-price { display: block; font-weight: 700; font-size: var(--label-size); }

.swatches { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.swatch { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-3); border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-button); cursor: pointer; font-size: var(--label-size); }
.swatch-on { border-color: var(--accent); background: var(--accent-surface); }
.swatch-off { opacity: .55; cursor: not-allowed; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch-dot { width: 20px; height: 20px; border-radius: 50%; border: var(--border-width) solid var(--border-strong); flex: none; }

.qty-row { display: flex; flex-direction: column; }
.qty { display: flex; align-items: center; gap: var(--space-2); }
.qty .iconbtn { border: var(--border-width) solid var(--border-strong); font-size: 20px; }
.qty-input { width: 72px; text-align: center; }
/* m329 (Jiri, 13 Oct 10:19: "unlimited means unlimited - no 999 limits"): a quantity of six digits fits its box — no spin arrows taking
   its room — and, where the browser sizes a field by its content, the box grows with longer ones (up to ten digits). */
.qty-input { appearance: textfield; -moz-appearance: textfield; padding-left: 6px; padding-right: 6px; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@supports (field-sizing: content) { .qty-input { width: auto; field-sizing: content; min-width: 72px; max-width: 140px; } }

.notice-ok { background: var(--success-surface); border-color: var(--success); color: var(--success-text); }
.detail-panel { margin-top: var(--space-4); }

/* Drawer: §03 desktop 480, full-width sheet on mobile */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100%;
  z-index: 40; background: var(--surface); border-left: var(--border-width) solid var(--border);
  display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(7,28,60,.12);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: var(--border-width) solid var(--border); }
.drawer-body { padding: var(--space-6); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-5); }
.cart-group { display: flex; flex-direction: column; gap: var(--space-3); }
.cart-group small { color: var(--text-secondary); font-weight: 400; }
.cart-line { display: grid; grid-template-columns: minmax(0,1fr) auto auto var(--control-h); gap: var(--space-3); align-items: center; padding-bottom: var(--space-3); border-bottom: var(--border-width) solid var(--border); font-size: var(--label-size); }
.cart-line > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-line-bad { background: var(--danger-surface); border-radius: var(--radius-input); padding: var(--space-2); }
.cart-qty, .cart-total { white-space: nowrap; }
/* m327: the line's price under its quantity, not beside it — "× €1,050.00 / BOX" beside the box squeezed the name to a word a line
   (and ran into the line's total on a phone). */
/* m329: − the box + on one row however many digits the box holds (no 999 any more), the price on a row of its own under them. */
.cart-qty { display: grid; grid-template-columns: auto auto auto; justify-content: start; align-items: center; column-gap: 6px; }
.cart-qty > .field-help { grid-column: 1 / -1; margin: 2px 0 0; white-space: normal; text-align: center; }
/* m321: on a phone the line's name has the row to itself; the quantity, the line's total and Remove go under it */
@media (max-width: 560px) {
  .cart-line { grid-template-columns: minmax(0,1fr) auto var(--control-h); row-gap: var(--space-2); }
  .cart-line > div:first-child { grid-column: 1 / -1; }
  /* m342 (ROUND-m329…m339's "not fixed": a 7-digit quantity cut a digit off, and + sat on the line's total): the quantity has the row,
     with Remove at its end; the total its own row under them, at the right. */
  .cart-line > .cart-qty { grid-column: 1 / 3; grid-row: 2; }
  .cart-line > .cart-qty ~ [data-remove] { grid-column: 3; grid-row: 2; }
  .cart-line > .cart-qty ~ .cart-total { grid-column: 1 / -1; grid-row: 3; justify-self: end; }
}
.cart-total { font-weight: 700; }
.cart-subtotal { display: flex; justify-content: space-between; font-size: var(--label-size); }

@media (max-width: 1023px) { .detail-layout { grid-template-columns: minmax(0, 1fr); } }   /* m349l: never wider than the screen */
@media (max-width: 767px) { .drawer { width: 100%; } }

/* ------------------------------------------------------- S04 service detail — m007 */

.service-main { display: flex; flex-direction: column; gap: var(--space-4); }
.service-hero { aspect-ratio: 16/9; }
.service-hero img { object-fit: cover; }
.provider-card {
  position: absolute; right: var(--space-4); top: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); max-width: 287px;
  background: var(--surface); border-radius: var(--radius-card);
  box-shadow: 0 2px 10px rgba(7,28,60,.14); font-size: var(--label-size);
}
.provider-card > div { display: flex; flex-direction: column; }

.outcomes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.outcomes li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--label-size); line-height: var(--label-lh); }
.outcomes svg { color: var(--success-text); flex: none; }

.meta-stack { display: flex; flex-direction: column; gap: var(--space-2); }
.meta-stack > span { display: flex; align-items: center; gap: var(--space-2); font-size: var(--label-size); color: var(--text-secondary); }

.scope-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.scope-card { display: flex; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--border); border-radius: var(--radius-card); }
.scope-card svg { color: var(--accent-deep); flex: none; }
.scope-card > div { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--label-size); }
.scope-card span { color: var(--text-secondary); font-size: var(--helper-size); line-height: var(--helper-lh); }
.plainlist { margin: 0 0 var(--space-4); padding-left: var(--space-5); font-size: var(--label-size); line-height: 26px; }

.faq { border-bottom: var(--border-width) solid var(--border); padding: var(--space-3) 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: var(--label-size); min-height: 24px; }
.faq p { margin: var(--space-2) 0 0; color: var(--text-secondary); }

@media (max-width: 1023px) {
  .provider-card { position: static; max-width: none; margin-top: var(--space-3); box-shadow: none; border: var(--border-width) solid var(--border); }
  .service-hero { aspect-ratio: 4/3; }
  .outcomes, .scope-cards { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- S05 provider profile — m008 */

.profile-head { display: flex; flex-direction: column; gap: var(--space-5); }
.profile-id { display: flex; gap: var(--space-5); align-items: flex-start; }
.profile-logo {
  width: 96px; height: 96px; flex: none; border-radius: var(--radius-card);
  background: var(--text); color: var(--text-on-accent); display: flex; align-items: center;
  justify-content: center; font-size: 30px; font-weight: 700; overflow: hidden;
}
.profile-logo img { width: 100%; height: 100%; object-fit: cover; }
.profile-id .lede { margin: var(--space-2) 0; }
.profile-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); border-top: var(--border-width) solid var(--border); padding-top: var(--space-4); }
.metric { display: flex; flex-direction: column; gap: 2px; }
.metric strong { font-size: 22px; line-height: 30px; }
.metric > span { font-size: var(--label-size); color: var(--text-secondary); }
.provider-panel { margin-top: var(--space-4); }

.bars { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.bar-row { display: grid; grid-template-columns: 16px 1fr 32px; gap: var(--space-3); align-items: center; font-size: var(--helper-size); }
.bar { height: 8px; background: var(--surface-sunken); border-radius: 4px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--rating); }
.review-item { padding: var(--space-4) 0; border-top: var(--border-width) solid var(--border); }
.review-item p { margin: var(--space-2) 0 0; font-size: var(--label-size); line-height: 24px; }

@media (max-width: 767px) {
  .profile-id { flex-direction: column; }
  .profile-logo { width: 64px; height: 64px; font-size: 22px; }
  .profile-actions .btn {
  /* Mockup: 44px minimum, 6px radius, 14px/700, 10px 18px padding. */
  flex: 1 1 auto; }
}

/* Verification banner — m009 */
.banner {
  display: flex; gap: var(--space-3); align-items: flex-start;
  max-width: var(--content-max); margin: var(--space-4) auto 0;
  padding: var(--space-4); border-radius: var(--radius-card);
  background: var(--accent-surface); border: var(--border-width) solid var(--accent-line);
  font-size: var(--label-size); line-height: var(--label-lh);
}
.banner svg { color: var(--accent-deep); flex: none; }

/* S07 wizard — m010 */
.textarea { height: auto; min-height: 120px; padding: var(--space-3); resize: vertical; line-height: var(--body-lh); }
.counter { text-align: right; }

/* G11 My requests — m013 */
.mine-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.req-row {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto;
  gap: var(--space-4); align-items: center; padding: var(--space-4);
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card);
}
.req-row > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.req-title { font-size: var(--body-size); font-weight: 700; text-align: left; text-decoration: none; }
.req-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--helper-size); }
.req-actions { display: flex; gap: var(--space-2); }
.pill { padding: 2px var(--space-3); border-radius: 999px; font-size: var(--micro-size); font-weight: 700; }
.pill-open { background: var(--accent-surface); color: var(--accent-deep); }
.pill-done { background: var(--success-surface); color: var(--success-text); }
.pill-quiet { background: var(--surface-sunken); color: var(--text-secondary); }
.tab-count { color: var(--text-secondary); font-weight: 400; }
@media (max-width: 767px) {
  .req-row { grid-template-columns: 1fr; }
  .req-actions .btn {
  /* Mockup: 44px minimum, 6px radius, 14px/700, 10px 18px padding. */
  flex: 1 1 auto; }
}

/* A single-purpose screen — sign in, reset, confirm — is centred rather than stranded
   against the left edge of a 1416px page. m018. */
.centred { max-width: 480px; margin: 48px auto 0; }
.centred .title { text-align: center; }
.centred .form-narrow { max-width: none; }
.centred > p { text-align: center; }
@media (max-width: 767px) { .centred { margin-top: var(--space-5); } }

/* S08 proposal comparison — m022 */
.priority-bar { display: flex; align-items: center; gap: 18px; padding: 14px 18px; background: var(--surface); border: var(--border-width) solid var(--border); border-radius: 7px; margin: var(--space-5) 0 var(--space-2); flex-wrap: wrap; }
.priority-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--label-size); flex: 1; min-width: 200px; }
.priority-number { background: var(--canvas); border: var(--border-width) solid var(--border); width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; font-size: var(--micro-size); flex: none; }
.priority-item .iconbtn { width: 32px; height: 32px; }
.priority-item .iconbtn:first-of-type { margin-left: auto; }

.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-4); }
.offer { position: relative; padding: 23px; border: var(--border-width) solid var(--border); border-radius: var(--radius-card); background: var(--surface); display: flex; flex-direction: column; gap: var(--space-3); }
.offer-lead { border: 2px solid var(--accent); padding: 22px; }
.offer-chosen { border: 2px solid var(--success); padding: 22px; }
.chip-done { background: var(--success-surface); color: var(--success-text); }
.offer-head { display: flex; gap: var(--space-3); align-items: center; min-height: 65px; }
.offer-head h3 { font-size: 18px; margin: 0 0 4px; }
.offer-head p { font-size: var(--micro-size); color: var(--text-secondary); margin: 0; }
.offer-head .verified { margin-left: auto; }
.offer dl { display: grid; grid-template-columns: 1fr auto; gap: 18px 12px; font-size: var(--label-size); margin: var(--space-5) 0; }
.offer dt { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); }
.offer dd { margin: 0; text-align: right; font-weight: 700; }
.offer dd small { font-size: var(--micro-size); font-weight: 400; display: block; color: var(--text-secondary); }
.wide { width: 100%; }
@media (max-width: 1023px) { .offers { grid-template-columns: 1fr; } }

/* S08 full-offer disclosure — m023 */
.offer-full { border-top: var(--border-width) solid var(--border); padding-top: var(--space-3); }
.offer-full summary { cursor: pointer; min-height: 32px; font-weight: 700; font-size: var(--label-size); color: var(--accent-deep); }
.offer-full .review { grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }
.offer-full .review dd { text-align: right; }
.check-list { list-style: none; padding: 0; margin: var(--space-2) 0 0; font-size: var(--label-size); line-height: 1.8; }
.check-list svg { color: var(--success-text); margin-right: 7px; }
.check-list .field-help { display: block; margin: 0 0 var(--space-2) 24px; }

/* Members panel — m025 */
#members-panel { margin-top: var(--space-5); }
.member-list { display: flex; flex-direction: column; gap: var(--space-2); }
.member-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--border); }
/* m348 (looked at): the state's column is a share of the row, not "auto" — each row is its own grid, so an invited person's row (its
   pill, Resend, Cancel) moved its roles left of everyone else's. */
.member-row > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.member-roles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.member-state { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 767px) { .member-row { grid-template-columns: 1fr; } .member-state { justify-content: flex-start; } }

/* Attachments — m026 */
.upload-box { display: block; border: 1px dashed #A9C6D8; background: var(--canvas); border-radius: 7px; padding: 22px; text-align: center; cursor: pointer; font-size: var(--label-size); }
.upload-box:hover { border-color: var(--accent); background: var(--accent-surface); }
.upload-box svg { color: var(--accent-deep); margin-right: var(--space-2); vertical-align: middle; }
.upload-box small { display: block; color: var(--text-secondary); margin-top: var(--space-1); font-size: var(--micro-size); }
.attachments { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.attachments li { display: flex; align-items: center; gap: var(--space-3); background: var(--canvas); padding: var(--space-2) var(--space-3); border-radius: var(--radius-input); font-size: var(--label-size); }
.attachments span { display: flex; flex-direction: column; }

/* S01 hero — m034, taken from the mockup (1.65fr / 1fr, banner + request feature).
   m029 shipped a single band of my own design; these are the mockup's own values. */
.hero { display: grid; grid-template-columns: 1.65fr 1fr; gap: var(--space-5); margin-bottom: 28px; }
.hero-banner { min-height: 300px; position: relative; overflow: hidden; background: #E1EEF2;
  border-radius: 10px; display: flex; align-items: center; padding: 32px; }
.hero-copy { width: 48%; z-index: 1; }
.hero-copy h1 { font-size: 34px; line-height: 41px; letter-spacing: -0.7px; margin: 0 0 var(--space-3); }
.hero-copy p { color: var(--text-secondary); margin: 0 0 var(--space-5); }
/* .hero-img is positioned by .hero-figure below; the figure holds the slot. */
.request-feature { background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: 10px; padding: 26px; display: flex; flex-direction: column; align-items: flex-start; }
.request-feature svg { color: var(--accent-deep); }
.request-feature h2 { font-size: 20px; margin: var(--space-3) 0 var(--space-2); }
.request-feature .muted { color: var(--text-secondary); font-size: var(--label-size); margin: 0 0 var(--space-4); }
.request-feature ul { list-style: none; padding: 0; margin: var(--space-4) 0 0;
  font-size: var(--label-size); display: flex; flex-direction: column; gap: var(--space-2); }
.request-feature li { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); }
.request-feature li svg { color: var(--success-text); flex: none; }
/* m319: Buying for a project?'s own Create request — at the foot of the card, the list's breadth above it at least. */
.request-feature ul { margin-bottom: var(--space-5); }
.request-feature-btn { margin-top: auto; }
/* m320 (approved 11 Oct 19:41, HomeSignedIn): signed in, four cards in place of "Buying for a project?", two a row, both rows as tall
   as the taller card; the hero's row stretches to them, so the banner (and its picture, inset 0) is as tall as the cards (19:41: "the
   home page cards section has same height as the picture"). A card the person may not see leaves its partner the whole row. */
.home-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--space-4); min-width: 0; }
.hc-card { background: var(--surface); border: var(--border-width) solid var(--border); border-radius: 12px; padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.hc-card.hc-wide { grid-column: 1 / -1; }
.hc-skel { min-height: 150px; background: linear-gradient(90deg, var(--surface) 0%, var(--canvas) 50%, var(--surface) 100%); }
.hc-head { display: flex; align-items: center; gap: var(--space-2); min-height: 30px; }
.hc-title { margin: 0; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--accent-deep); }
.hc-ico--amber { color: var(--warning-text); } .hc-ico--green { color: var(--success-text); } .hc-ico--violet { color: var(--violet); } .hc-ico--grey { color: var(--text-secondary); }
.hc-ico--doc { width: 36px; height: 36px; border-radius: 8px; background: var(--accent-surface); }
.hc-ico--doc.hc-ico--amber { background: var(--warning-surface); } .hc-ico--doc.hc-ico--green { background: var(--success-surface); }
.hc-ico--doc.hc-ico--violet { background: var(--violet-surface); } .hc-ico--doc.hc-ico--grey { background: var(--canvas); }
.hc-ico--round { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-surface); }
.hc-ico--round.hc-ico--green { background: var(--success-surface); } .hc-ico--round.hc-ico--grey { background: var(--canvas); }
.hc-badge { padding: 0 8px; border-radius: 999px; background: var(--accent-surface); color: var(--accent-deep); font-size: 12px; font-weight: 800; line-height: 20px; }
.hc-badge--amber { background: var(--warning-surface); color: var(--warning-text); }
.hc-link { margin-left: auto; font-size: 13px; white-space: nowrap; text-decoration: none; }
.hc-live { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--success-text); }
.hc-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.hc-item { display: flex; gap: 10px; align-items: flex-start; min-width: 0; color: var(--text); text-decoration: none; border-radius: 8px; }
.hc-item:hover .hc-item-title { text-decoration: underline; }
.hc-item-body { display: flex; flex-direction: column; min-width: 0; }
.hc-item-title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-item-sub { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-item-act { font-size: 13px; font-weight: 700; color: var(--warning-text); }
.hc-item-act.hc-late { color: var(--danger-text); }
.hc-item-act--plain { color: var(--text); }
.hc-pager { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; }
.hc-arrow { flex: none; width: 28px; height: 28px; border-radius: 50%; border: var(--border-width) solid var(--border-strong); background: var(--surface);
  color: var(--text); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.hc-arrow:disabled { opacity: .4; cursor: default; }
.hc-dots { display: inline-flex; gap: 5px; align-items: center; }
.hc-dot { width: 6px; height: 6px; border-radius: 3px; background: var(--border-strong); }
.hc-dot--on { width: 14px; background: var(--accent); }
.hc-count { margin-left: auto; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.hc-empty { display: flex; gap: 10px; align-items: center; }
.hc-empty strong { display: block; font-size: 13px; }
.hc-empty .field-help { display: block; margin: 0; }
.hc-amount { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.hc-change { align-self: flex-start; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.hc-change--up { background: var(--success-surface); color: var(--success-text); }
.hc-change--down { background: var(--danger-surface); color: var(--danger-text); }
.hc-inout { margin: auto 0 0; display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-2); font-size: 12px; color: var(--text-secondary); line-height: 1.35; }
.hc-inout dd { margin: 0; text-align: right; color: var(--text); font-weight: 700; }
.hc-date { flex: none; width: 40px; border-radius: 8px; border: var(--border-width) solid var(--accent-line); overflow: hidden; text-align: center; line-height: 1.15; }
.hc-date-m { display: block; background: var(--accent-deep); color: var(--text-on-accent); font-size: 10px; font-weight: 800; padding: 2px 0; text-transform: uppercase; }
.hc-date-d { display: block; font-size: 16px; font-weight: 800; padding-top: 2px; }
.hc-date-w { display: block; font-size: 10px; color: var(--text-secondary); padding-bottom: 2px; }
.hc-avail { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.hc-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--border); }
.hc-bar-av { background: var(--accent); }
.hc-bar-pending { background: var(--warning-fill); }
.hc-budfoot { margin-top: auto; display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.hc-budfoot > span { color: var(--warning-text); font-weight: 700; }
.hc-add { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; text-decoration: none; }
@media (max-width: 767px) { .home-cards { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .hc-card.hc-wide { grid-column: auto; } }
/* m349t2 (board HomeByRole): the four cards are the person's home's, two by two beside its role's part (the home's styles, below);
   the signed-in hero beside them and their picture went (the picture is the home's carousel). */
.home-cards .hc-card.hc-full { grid-column: 1 / -1; }
/* m330 (look D): ‹ › half-way down the card's sides, the dots and "1 of 7" at its foot; the document between them keeps clear of
   them. */
.hc-card.hc-carousel { position: relative; }
.hc-carousel .hc-item { margin: 0 34px; }
.hc-carousel .hc-arrow { position: absolute; top: 50%; transform: translateY(-50%); }
.hc-carousel .hc-arrow[data-hc="prev"] { left: var(--space-2); }
.hc-carousel .hc-arrow[data-hc="next"] { right: var(--space-2); }
.hc-carousel .hc-pager { justify-content: center; }
.hc-carousel .hc-count { margin-left: 0; }
/* And the cards' own words: a pill wraps inside its card rather than past its edge (German at 1180 px). */
.hc-card .hc-change { white-space: normal; max-width: 100%; border-radius: 12px; }
.between { display: flex; align-items: center; gap: var(--space-4); }
.between.wrap { flex-wrap: wrap; }
.between .tight { margin: 0; }
.between .tabs { margin-left: auto; }
.tile { position: relative; overflow: hidden; }
.tile svg, .tile span { position: relative; z-index: 1; }
.empty-market { display: flex; align-items: center; gap: var(--space-5); }
.empty-market img { flex: none; border-radius: var(--radius-input); }
@media (max-width: 1023px) {
  .hero { grid-template-columns: 1fr; margin-bottom: 22px; }
  .hero-banner { min-height: 280px; }
}
@media (max-width: 767px) {
  .hero-banner { padding: 24px 20px; min-height: 250px; }
  .hero-copy { width: 63%; }
  .hero-figure { width: 48%; }
  .hero-figure .hero-img { opacity: .85; }
  .between .tabs { margin-left: 0; }
}

/* Behind the label rather than beside it: the tile is 64px tall and a second element
   competing for that space makes the name harder to read, not easier. */
.tile svg, .tile span { position: relative; z-index: 1; }
.empty-market { display: flex; align-items: center; gap: var(--space-5); }
.empty-market img { flex: none; border-radius: var(--radius-input); }
@media (max-width: 1023px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding: var(--space-6); }
  .hero-art { position: static; width: 100%; height: 160px; border-radius: 8px; }
}

/* Build stamp — m029 */
.build-stamp { max-width: var(--content-max); margin: var(--space-2) auto 0; padding: 0 4%;
  text-align: right; font-size: var(--micro-size); color: var(--text-secondary); }

/* Activity — m030 */
#audit-panel { margin-top: var(--space-5); }
.audit-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.audit-list li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: var(--border-width) solid var(--border); font-size: var(--label-size); }
.audit-when { color: var(--text-secondary); font-size: var(--helper-size); white-space: nowrap; }
.audit-list span span { display: block; }
@media (max-width: 767px) { .audit-list li { grid-template-columns: 1fr; } }

/* S05 provider banner and stats — m035, from the mockup */
.profile-banner { position: relative; min-height: 220px; border-radius: 10px; overflow: hidden;
  background: #E1EEF2; display: flex; align-items: flex-end; margin-bottom: var(--space-4); }
.profile-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-intro { position: relative; z-index: 1; display: flex; gap: var(--space-4);
  align-items: flex-end; padding: var(--space-5); width: 100%;
  background: linear-gradient(to top, rgba(255,255,255,.94), rgba(255,255,255,.74) 60%, transparent); }
.company-logo { width: 72px; height: 72px; border-radius: 10px; background: var(--surface);
  border: var(--border-width) solid var(--border); display: grid; place-items: center;
  font-weight: 700; font-size: 24px; color: var(--accent-deep); flex: none; overflow: hidden; }
.company-logo img { width: 100%; height: 100%; object-fit: cover; }
.profile-intro h1 { font-size: 28px; margin: 0 0 var(--space-2); }
.profile-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4);
  padding: var(--space-4) 0; border-top: var(--border-width) solid var(--border);
  border-bottom: var(--border-width) solid var(--border); }
.profile-stats > div { display: flex; gap: var(--space-3); align-items: center; }
.profile-stats svg { color: var(--accent-deep); flex: none; }
.profile-stats span { display: flex; flex-direction: column; min-width: 0; }
.profile-stats strong { font-size: 17px; }
.profile-stats small { color: var(--text-secondary); font-size: var(--micro-size); }
.profile-stats-empty { grid-template-columns: 1fr; }
.profile-actions.between { margin: var(--space-5) 0; }
@media (max-width: 1023px) { .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .profile-intro { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .profile-stats { grid-template-columns: 1fr; }
}

/* S03 photograph strip — m036 */
.thumbnails { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.thumb { width: 72px; height: 72px; padding: 0; border: 2px solid var(--border); border-radius: 8px;
  overflow: hidden; background: var(--canvas); cursor: pointer; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-on { border-color: var(--accent); }
.thumb:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

/* Listing editor — m037 */
.photo-item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.photo-item img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px;
  border: var(--border-width) solid var(--border); }
.pill-warn { background: var(--warning-surface); color: var(--warning-text); }

/* Option and tier tables — m038 */
.set-table { width: 100%; border-collapse: collapse; font-size: var(--label-size); margin-bottom: var(--space-3); }
.set-table th { text-align: left; font-size: var(--micro-size); color: var(--text-secondary);
  font-weight: 700; padding: 0 var(--space-2) var(--space-2) 0; }
.set-table td { padding: 0 var(--space-2) var(--space-2) 0; vertical-align: middle; }
.set-table .input { min-height: 38px; padding: 6px 10px; }
@media (max-width: 767px) { .set-table, .set-table tbody, .set-table tr, .set-table td { display: block; width: 100%; }
  .set-table thead { display: none; } .set-table tr { border-bottom: var(--border-width) solid var(--border); padding-bottom: var(--space-2); } }

/* Category admin — m044 */
.row-muted td { opacity: .55; }
.set-table .field-help { display: block; }

/* Standard and SELYVO pricing — m053 */
.price-dual { display: flex; flex-direction: column; gap: 2px; }
.price-row { display: flex; align-items: baseline; gap: var(--space-2); }
.price-label { font-size: var(--micro-size); color: var(--text-secondary); text-transform: uppercase;
  letter-spacing: .04em; min-width: 62px; }
.price-standard { font-size: var(--label-size); color: var(--text-secondary);
  text-decoration: line-through; }
.price-selyvo .price-now { color: var(--accent-deep); font-weight: 700; }
.saving { font-size: var(--micro-size); font-weight: 700; color: var(--success-text);
  background: var(--success-surface); border-radius: 4px; padding: 1px 5px; }
.price-basis small { color: var(--text-secondary); font-size: var(--micro-size); }
/* The placeholder has the SHAPE of a price but no real figure behind it: the server never
   sent one. Blurring exists so the layout does not jump when somebody signs in. */
.blurred { filter: blur(5px); user-select: none; pointer-events: none; }
.price-unlock { font-size: var(--micro-size); padding: 0; text-align: left; }

/* Getting paid — m058 */
.pay-state { list-style: none; margin: var(--space-3) 0; padding: 0; display: grid; gap: 4px; }
.pay-state li { font-size: var(--label-size); color: var(--text-secondary); }

/* Sign-in as a dialog — m060 */
.modal-scrim { position: fixed; inset: 0; background: rgba(7,28,60,.55); z-index: 90; }
.modal { position: fixed; z-index: 91; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(460px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto;
  background: var(--surface); border-radius: var(--radius-card);
  box-shadow: 0 24px 60px rgba(7,28,60,.28); padding: var(--space-6); }
.modal .title { margin-top: 0; }
.modal .form { box-shadow: none; padding: 0; background: transparent; }
.modal-close { position: absolute; top: 10px; right: 12px; border: 0; background: transparent;
  font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--text-secondary); }

/* Rating — m063 */
.rate-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.rate-form { display: flex; flex-direction: column; gap: var(--space-2); }       /* m337: the rating's parts one under the other (they ran off a phone) */
.rate-form > .rate-row { flex-wrap: wrap; }
.rate-row .btn[aria-pressed="true"] { background: var(--accent-deep); color: #fff; }

/* Category picker — m064 */
.catpick { position: relative; }
.catpick-btn { display: flex; align-items: center; gap: var(--space-2); text-align: left;
  /* NOWRAP on the closed control. It wrapped, so a long commodity name — and the chart has
     plenty, "Office, furniture and workplace supplies" among them — turned the field into a
     two- or three-line block that pushed the form about as somebody chose. One line, cut
     with an ellipsis, keeps the field the height it was before they touched it. */
  width: 100%; cursor: pointer; flex-wrap: nowrap; min-width: 0; }
.catpick-btn .catpick-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0; flex: 1 1 auto; }
/* The open list still shows the whole name and its path: that is where somebody is READING
   to choose, and truncating there would hide the thing that tells two commodities apart. */
.catpick-list .catpick-name { overflow: visible; text-overflow: clip; white-space: normal; }
.catpick-caret { margin-left: auto; color: var(--text-secondary); }
.catpick-empty { font-weight: 400; color: var(--text-secondary); }
.catpick-path { display: block; width: 100%; font-size: var(--micro-size);
  font-weight: 400; color: var(--text-secondary); }
.catpick-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 320px; overflow: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: 0 12px 32px rgba(7,28,60,.16); }
.catpick-opt { padding: 8px 10px; border-radius: var(--radius-input); cursor: pointer; }
.catpick-opt .catpick-name { font-weight: 700; display: block; }
.catpick-opt:hover, .catpick-active { background: var(--surface-subtle); }
.catpick-root { font-style: italic; }

/* Category picker search — m066 */
.catpick-panel { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: 0 12px 32px rgba(7,28,60,.16); padding: 4px; }
.catpick-panel .catpick-list { position: static; border: 0; box-shadow: none; padding: 0; }
.catpick-search { margin: 4px 4px 6px; width: calc(100% - 8px); }
.catpick-none { padding: 10px; color: var(--text-secondary); font-size: var(--label-size); }

/* Delete, and settings — m069 */
.btn-danger { background: var(--danger-button); color: #fff; border-color: transparent; }
.pill-quiet { background: var(--surface-subtle); color: var(--text-secondary); }
.field-label .pill { margin-left: var(--space-2); font-size: var(--micro-size); }

/* Seller balance — m070 */
.balance-row { gap: var(--space-4); margin-bottom: var(--space-4); }
.balance-row .price-label { text-transform: uppercase; letter-spacing: .04em;
  font-size: var(--micro-size); color: var(--text-secondary); }

/* The hero picture and its caption — m094.
   The FIGURE takes the position .hero-img used to hold. m091 wrapped the image without
   moving that rule, so the image was absolutely positioned against a figure whose own
   height was a percentage of an auto-height parent — which resolves to zero. The picture
   was there, loaded, and 0px tall. */
.hero-figure { position: absolute; right: 0; top: 0; bottom: 0; width: 53%; margin: 0;
  overflow: hidden; }
.hero-figure .hero-img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }

/* One line, two if it wraps. A gradient rather than a panel: the name has to stay legible
   over a photograph whose bottom edge could be any colour, and a hard-edged box over a
   picture reads as a banner somebody stuck on afterwards. */
.hero-caption { position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-7, 40px) var(--space-4) var(--space-4);
  /* A deeper wash than before, because the text over it is now three times the size and
     covers more of whatever the photograph happens to show. */
  background: linear-gradient(to top, rgba(7,28,60,.80), rgba(7,28,60,0)); }
.hero-cat { background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  /* Three times the label size, and it has to stay readable on a phone as well as a
     desktop, so a clamp rather than one fixed number. */
  color: #fff; font-size: clamp(1.4rem, 3.4vw, 2.6rem); font-weight: 650; line-height: 1.12;
  letter-spacing: -.015em; text-shadow: 0 2px 16px rgba(0,0,0,.55);
  /* Two lines at most: a long Czech category name must not grow into a paragraph over
     somebody's photograph. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.hero-cat:hover { text-decoration: underline; }
.hero-cat:focus-visible { outline: 2px solid #fff; outline-offset: 3px;
  border-radius: var(--radius-input); }

/* Browse categories — m093. A clean surface: the icon carries the meaning and the label is
   read, not decoded. Two earlier attempts put artwork behind the text and both made a 64px
   button into a picture with a word on it. */
.tile { position: relative; background: var(--surface); }
.tile svg { flex: 0 0 auto; color: var(--accent); }

/* Browse categories: one row, with the rest a press away — m095. */
.tile-more { color: var(--text-secondary); }
.tile-more span { font-weight: 600; }

/* Browse categories, expanded — m098. Every top category with its second level under it. */
.section-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); }
.catgroups { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-5); margin-bottom: 28px; }
.catgroup-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
  font-size: var(--label-size); }
.catgroup-title .linkbtn { font-weight: 650; display: flex; align-items: center; gap: 8px; }
.catgroup-list { list-style: none; margin: 0; padding: 0 0 0 28px; }
.catgroup-list li { margin: 2px 0; }
.catgroup-list .linkbtn { color: var(--text-secondary); font-size: var(--micro-size); }
.catgroup-list .linkbtn:hover { color: var(--text); }

/* Countries a listing reaches — m106. A grid of checkboxes: a multi-select list box shows
   two of twelve options and needs somebody to know ctrl-click exists. */
.checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px 14px; margin: 6px 0 4px; }
.checkitem { display: flex; align-items: center; gap: 8px; font-size: var(--label-size);
  color: var(--text); }

/* A section's strip is ONE row — m110. Four cards is the width of the grid; the help line
   sits under the heading rather than pushing the cards down. */
.band-help { margin: calc(var(--space-4) * -1) 0 var(--space-4); }
.cards { grid-auto-rows: 1fr; }

/* "Available in" — m110. A dropdown that holds several, with what is chosen shown as chips
   on the closed control: "3 selected" makes somebody open it to find out which three. */
.catpick-toggle .chip { display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-subtle)); border-radius: 999px; padding: 2px 8px;
  margin: 2px 4px 2px 0; font-size: var(--micro-size); }
.chip-x { cursor: pointer; opacity: .6; font-weight: 700; }
.chip-x:hover { opacity: 1; }

/* The provider directory — m115. The same card as a listing, because it is the same kind of
   thing to scan: a name, what it is, and how much of it there is. */
.provider-card { align-items: flex-start; text-align: left; padding: var(--space-5);
  gap: 4px; cursor: pointer; }

/* The other categories a listing is in — m117. Chips, so what is chosen is readable without
   opening anything. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.chips .chip { display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-subtle)); border-radius: 999px; padding: 3px 10px;
  font-size: var(--micro-size); }

/* Commodity mapping — m125. Filters in the table header, because at row four hundred that
   is where the eye is; a panel above the table is one somebody has already scrolled past. */
.map-table thead tr.filters-row th { background: var(--surface); padding: 8px 10px;
  vertical-align: top; border-bottom: 1px solid var(--border); }
.map-table thead tr.filters-row .input { min-height: 38px; padding: 8px 10px; }
/* two lines whether open or closed, so a column of six hundred reads as one column */
.catpick-btn.two-line { flex-direction: column; align-items: flex-start; gap: 2px;
  flex-wrap: wrap;
  position: relative; padding-right: 34px; min-height: 58px; justify-content: center; }
.catpick-btn.two-line .catpick-caret { position: absolute; right: 12px; top: 50%;
  margin: 0; transform: translateY(-50%); }
.chip-ok { background: var(--success-surface); color: var(--success-text); }
.chip-warn { background: var(--warning-surface); color: var(--warning-text); }

/* Mapping toolbar — m127. The file control is a label over a hidden input, because a bare
   file input cannot be styled and reads as a different control from the buttons beside it. */
.map-tools { flex-wrap: wrap; align-items: center; }
.map-tools .field-help { margin: 0; }
ul.plain { margin: 8px 0 0; padding-left: 18px; }
ul.plain li { margin: 2px 0; }

/* Connected systems — m129 */
.check-card { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.check-card input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--success); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; }

/* Account settings rail — m132. Taken from the mockup: .account-sidebar + .side-links in
   the .catalogue grid, the same geometry as the results filters. One rail treatment in the
   product, not one per screen. */
.catalogue { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 26px; }
.account-sidebar { background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 18px 5px; }
.account-person { display: flex; gap: 12px; padding: 3px 12px 18px; }
.side-links { display: flex; flex-direction: column; gap: 1px; }   /* m321: 1px (was 3) — Business settings' eleven entries fit 1440 × 900 */
.side-links button { display: flex; align-items: center; gap: 18px; padding: 12px 17px;
  min-height: 48px; border-left: 4px solid transparent; border-radius: 6px; text-align: left;
  font-size: 16px; width: 100%; background: none; border-top: 0; border-right: 0;
  border-bottom: 0; cursor: pointer; }
.side-links button:hover { background: var(--canvas); }
.side-links .active { background: var(--accent-surface); border-left-color: var(--accent);
  color: var(--accent-deep); font-weight: 700; }
/* m345: Business settings' twelve entries (AI joined) fit 1440 × 900 with no scrollbar — each 44 px high (still a whole touch target),
   measured in Chromium: the rail's content 721 px in 726. The console's rail keeps its own. */
.account-sidebar:not(.console-rail) .side-links button { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
/* m348 (board AccountMenus, decision 2): My account is one rail — fourteen entries, fifteen with the mailbox, and "Selling as" above them
   for a person in two businesses. On a wide screen (a pointer, not a finger) each is 36 px high, so the rail fits 1440 × 900 with no
   scrollbar; a touch screen's row keeps 44. Measured in Chromium — ROUND-m348.md. */
/* m349: Questionnaires joined (sixteen with the mailbox and "Selling as") — 34 px each, 5 px above and below the words. */
@media (min-width: 901px) {
  .account-sidebar:not(.console-rail) .side-links button { min-height: 34px; padding-top: 5px; padding-bottom: 5px; }
}
.avatar { border-radius: 100%; background: var(--surface-sunken); display: inline-flex;
  align-items: center; justify-content: center; width: 44px; height: 44px; font-weight: 700;
  /* An avatar sits inside flex rows — the header actions, the rail's person block. A flex
     item shrinks by default, so the width gave way while the height held and the circle
     became an ellipse. Fixed basis and an aspect ratio keep it round wherever it is put. */
  flex: 0 0 auto; aspect-ratio: 1 / 1; overflow: hidden; }
.avatar.large { width: 52px; height: 52px; }
@media (max-width: 900px) {
  .catalogue { grid-template-columns: 1fr; }
  .side-links { flex-direction: row; overflow-x: auto; }
  .side-links button { border-left: 0; border-bottom: 4px solid transparent;
    white-space: nowrap; }
  .side-links .active { border-left-color: transparent; border-bottom-color: var(--accent); }
}

/* All categories — m142, on the v1.1 concept: search first, then type tabs, then tiles. */
.taxonomy-search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.taxonomy-search .input { flex: 1; min-width: 280px; }
.taxonomy-meta { width: 100%; margin: 0; }
.taxonomy-types { display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-3); }
.taxonomy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3); }
.taxonomy-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; cursor: pointer; padding: var(--space-4); }
.taxonomy-tile:hover { border-color: var(--accent); }
.category-code { font-size: var(--micro-size); letter-spacing: .5px;
  color: var(--text-secondary); }
@media (max-width: 900px) { .taxonomy-grid { grid-template-columns: 1fr; } }

/* Order timeline — m145, from the mockup: four steps, done or pending, nothing guessed. */
.order-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3); list-style: none; margin: var(--space-4) 0; padding: 0; }
.order-step { display: flex; flex-direction: column; gap: 4px; font-size: var(--label-size); }
.order-step .step-circle { width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); display: inline-block; }
.order-step-pending { color: var(--text-secondary); }
.order-step-pending .step-circle { background: var(--border-strong); }
.summary-money { display: flex; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) 0; font-size: var(--label-size); }
@media (max-width: 700px) { .order-timeline { grid-template-columns: repeat(2, 1fr); } }

/* Delivery documents — m146 (S10-A01/A02). */
.document-row { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-input); margin-top: var(--space-2); text-decoration: none;
  color: inherit; }
.document-row:hover { border-color: var(--accent); }
.document-row span { display: flex; flex-direction: column; }

/* Satisfaction stars — m147 (S10-A05). Real 44px targets, each with its own name. */
.starbtn { min-width: 44px; min-height: 44px; font-size: 24px; line-height: 1;
  background: none; border: 0; cursor: pointer; color: var(--rating); padding: 0; }
.starbtn[aria-pressed="true"] { color: var(--rating); }
.starbtn:focus-visible { outline: 2px solid var(--accent); border-radius: 6px; }

/* Activity date range — m152 (S11-A10). */
.range-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.range-row .input { width: auto; }
.btn-on { background: var(--accent-surface); border-color: var(--accent);
  color: var(--accent-deep); }

/* Order messages — m161 (S10-A03). */
.thread { list-style: none; margin: var(--space-3) 0; padding: 0; display: flex;
  flex-direction: column; gap: var(--space-3); }
.msg { border: var(--border-width) solid var(--border); border-radius: var(--radius-input);
  padding: var(--space-3); background: var(--surface); }
.msg-mine { background: var(--accent-surface); border-color: var(--accent-line); }
.msg p { margin: 4px 0 0; }

/* Category picture tiles — m181. The label sits BENEATH the image, not over it: text on a
   photograph is unreadable at some point in every set, and the point is never the one you
   checked. */
.tile-photo { padding: 0; overflow: hidden; display: flex; flex-direction: column;
  align-items: stretch; text-align: left; }
.tile-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  background: var(--surface-sunken); }
.tile-photo .tile-label { padding: var(--space-3); font-weight: 600; }
.tile-photo .tile-icon { display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; background: var(--surface-sunken); }

/* Account rail entries — m186. Icon and label on one line, the label allowed to wrap rather
   than run out of the rail: "Ways to work" was doing exactly that at the widths this column
   uses. */
.side-links button { display: flex; align-items: center; gap: var(--space-2);
  text-align: left; width: 100%; min-width: 0; }
.side-links button span { min-width: 0; overflow-wrap: anywhere; }
.side-links button svg { flex: 0 0 auto; }

/* Rating summary on a listing — m196. */
.rating-summary { display: inline-flex; align-items: center; gap: 6px; }

/* A part of a section, not a section — m202. */
.form-subtitle { margin: var(--space-5) 0 var(--space-2); font-size: var(--label-size);
  font-weight: 700; color: var(--text-secondary); }

/* The editor's right-hand column: the publish checklist and the pricing dialog, stacked —
   m203. They were two siblings of a two-column grid, so the second wrapped below the form. */
.side-column { display: flex; flex-direction: column; gap: var(--space-6);
  align-self: start; min-width: 0; }

/* m285: pages under the avatar \u2014 see body.rail-mode below (one mechanism, no guessed heights). The sticky rail stays
   only as the behaviour of a browser without JavaScript-driven rail mode. */
.catalogue > .account-sidebar { position: sticky; top: var(--space-4); align-self: start; }

/* While a price detail is open the page behind it does not move: the detail is the thing
   being read, and a form scrolling away under a dialog is how somebody loses their place. */
/* m285: no longer \u2014 a page under the avatar has ONE scrolling body, and the detail at the right scrolls WITH it. The form
   is not clipped and the detail has no height of its own (both were guessed from the bar's size). */
.row-fixed td { color: var(--text-secondary); }
.row-actions { white-space: nowrap; text-align: right; }
.drag-handle { cursor: grab; color: var(--text-secondary); width: 24px; }

/* The card's picture is a link — m209. Fills the media box so the whole image is the target,
   and sits under the heart and the type badge rather than over them. */
.listing-media .media-link { position: absolute; inset: 0; display: block; z-index: 0; }
.listing-media .listing-type, .listing-media .save { z-index: 1; }
.tile-icon-l2 img { width: 48px; height: 48px; display: block; }

/* m323 — Create… and ▾ beside it: one button in two parts (the tab's own, and the list of what else can be created), or "Create ▾"
   alone on a tab that creates nothing itself. The list is anchored under it, as the avatar's menu is. */
.create-split { position: relative; display: inline-flex; align-items: stretch; }
.create-more { min-width: 0; gap: 6px; }
.create-split--two [data-gid="G13"] { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.create-split--two .create-more { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 10px;
  border-left: 1px solid rgba(255, 255, 255, .35); }
.create-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.create-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 220px; padding: var(--space-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: 0 12px 32px rgba(16, 24, 32, .16); display: flex; flex-direction: column; }
.create-menu .menu-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 10px var(--space-3); background: none;
  border: 0; border-radius: var(--radius-input); text-align: left; cursor: pointer; color: var(--text); font: inherit; white-space: nowrap; }
.create-menu .menu-item:hover, .create-menu .menu-item:focus-visible { background: var(--surface-subtle); }

/* The avatar's menu — m210. Anchored to the avatar, above everything, closed by default. */
.acct-menu-wrap { position: relative; display: inline-flex; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 220px; padding: var(--space-2); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: 0 12px 32px rgba(16, 24, 32, .16); display: flex; flex-direction: column; }
.acct-menu .menu-item { display: flex; align-items: center; gap: var(--space-2);
  width: 100%; padding: 10px var(--space-3); background: none; border: 0;
  border-radius: var(--radius-input); text-align: left; cursor: pointer;
  color: var(--text); font: inherit; }
.acct-menu .menu-item:hover { background: var(--surface-subtle); }
.acct-menu .menu-sep { height: 1px; margin: var(--space-2) 0; background: var(--border); }
.chipbtn { display: inline-flex; align-items: center; gap: 6px; }
.catgroup-list .catrow { display: inline-flex; align-items: center; gap: 8px; }
.catgroup-list .catrow .tile-icon-l2 img { width: 24px; height: 24px; }
.tab-flag { color: var(--warning-text); font-size: 18px; line-height: 1; }
.chipbtn .tile-icon-l2 img { width: 20px; height: 20px; }
.chipbtn .tile-img { width: 20px; height: 20px; object-fit: cover; border-radius: 4px; }
.tile-icon-l1 img { display: block; }
.chipbtn .tile-icon-l1 img { width: 20px; height: 20px; }

/* Category cards on the offering tabs — m220. Four to a row, one width, and the name given
   exactly two lines so a card is the same height whether its name is one word or seven. */
.catcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3); margin-bottom: var(--space-5); }
.catcard { display: flex; align-items: center; gap: var(--space-2); min-width: 0;
  padding: var(--space-3); text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); color: var(--text); font: inherit; }
.catcard:hover { border-color: var(--text-secondary); }
.catcard .tile-icon, .catcard .tile-icon-l1, .catcard .tile-icon-l2 { flex: 0 0 auto; }
/* The name is CENTRED against the icon. It sat at the top, so a one-line name floated above
   a 24px mark with a line of empty space under it and the row looked ragged even though the
   cards were the same height. */
.catcard-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35; min-width: 0; overflow-wrap: anywhere;
  align-self: center; }
/* The CARD keeps the two-line height, not the text: that is what equalises the row, and
   putting it on the text is what pushed a short name off centre. */
.catcard { min-height: calc(2 * 1.35em + 2 * var(--space-3)); }
/* Narrower screens step down rather than squeezing four unreadable columns. */
@media (max-width: 1100px) { .catcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .catcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .catcards { grid-template-columns: 1fr; } }
.tile-icon-l3 img { display: block; }
.chipbtn .tile-icon-l3 img, .catcard .tile-icon-l3 img { width: 20px; height: 20px; }

/* Wizard step numbers — m225. */
.step-num { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 8px; border-radius: 50%;
  font-size: 12px; font-weight: 700; border: 1.5px solid currentColor; }
/* The SELECTED step's number. Its fill was var(--text-primary), a token this stylesheet never
   defined — so the fill was void and the white number sat on a white page (m235). It takes the
   selected tab's own colour now, with the token made for text on it. */
.tab[aria-selected="true"] .step-num { background: var(--accent-deep);
  color: var(--text-on-accent); border-color: var(--accent-deep); }

/* The specification sheet — m227. A grid of cells that reads like a spreadsheet: thin rules,
   no field chrome inside the cells, a row number, and the empty row at the bottom quieter
   than the rows that hold something. */
.sheet-wrap { overflow-x: auto; position: relative; }   /* m313: what is placed absolutely inside stays inside (a phone's page was 778 px wide) */
.sheet { width: 100%; border-collapse: collapse; table-layout: fixed;
  border: 1px solid var(--border); border-radius: var(--radius-input); }
.sheet th { text-align: left; font-size: var(--label-size); font-weight: 700;
  color: var(--text-secondary); padding: 8px 10px; background: var(--surface-subtle);
  border-bottom: 1px solid var(--border); }
.sheet td { border-bottom: 1px solid var(--border); padding: 0; }
.sheet td + td { border-left: 1px solid var(--border); }
.sheet .sheet-n { width: 44px; text-align: center; color: var(--text-secondary);
  font-size: var(--label-size); }
.sheet .sheet-x { width: 44px; text-align: center; }
.sheet-cell { width: 100%; border: 0; background: transparent; padding: 9px 10px;
  font: inherit; color: var(--text); }
.sheet-cell:focus { outline: 2px solid var(--text); outline-offset: -2px;
  background: var(--surface); }
.sheet-new .sheet-cell::placeholder { color: var(--text-secondary); }
.sheet-new td { background: var(--surface-subtle); }
.doc-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.doc-list li { display: flex; align-items: center; gap: var(--space-2);
  padding: 8px 0; border-bottom: 1px solid var(--border); }
.doc-list li a { display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  overflow-wrap: anywhere; }
.spec-view th { width: 40%; text-align: left; font-weight: 600; }
.buy-selyvo { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.buy-price .price-standard { text-decoration: line-through; color: var(--text-secondary);
  font-weight: 400; }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-top: var(--space-2); }
.manage-request { margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--border); }
.inline-row { display: flex; gap: var(--space-2); align-items: center; }
.to-wiz-main .inline-row > .input { flex: 1 1 auto; min-width: 0; }   /* m313: the own answer's box gives way on a phone, its button stays whole */
.to-wiz-main .inline-row > .btn { flex: none; }
.propose-scope { margin-top: var(--space-3); }

/* My requests, as designed — m237. */
.mr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.mr-head .lede { margin: 4px 0 0; color: var(--text-secondary); }
.mr-tools { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.mr-search { margin: 0; }
.mr-search .input { width: 280px; max-width: 100%; }
.mr-kicker { margin: var(--space-4) 0 var(--space-2); font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-secondary); }
.mr-attn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.mr-attn-card strong, .mr-attn-card .field-help { display: block; }
.mr-attn-card .linkbtn { margin-top: 4px; font-weight: 700; }
.mr-list { margin-top: var(--space-4); padding: 0; }
.mr-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); }
.mr-tabs { border-bottom: 0; flex-wrap: wrap; }
.mr-sort { display: flex; align-items: center; gap: var(--space-2); }
.mr-sort .field-label { margin: 0; }
.mr-row { display: grid; grid-template-columns: minmax(260px, 3fr) 1fr 1.2fr 1.3fr 1fr 170px; gap: var(--space-3);
  align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.mr-row-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-secondary); padding-top: 10px; padding-bottom: 10px; }
.mr-row .field-help { display: block; }
.mr-what { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.mr-what .req-title { font-size: 16px; font-weight: 700; text-align: left; }
.mr-row .req-actions .btn { width: 100%; }
.mr-urgent { color: var(--danger-text); }
.mr-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); }
@media (max-width: 900px) {
  .mr-row { grid-template-columns: 1fr 1fr; }
  .mr-row-head { display: none; }
  .mr-what, .mr-row .req-actions { grid-column: 1 / -1; }
}

/* The request page, as designed — m238. */
.rq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.rq-head .lede { margin: 0 0 6px; color: var(--text-secondary); }
.rq-head .title { margin: 0; }
.rq-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3);
  margin: var(--space-4) 0; }
.rq-fact { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); }
.rq-fact-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-secondary); }
.rq-fact strong { font-size: 17px; }
.rq-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--space-4);
  align-items: start; margin-top: var(--space-4); }
.rq-main, .rq-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.rq-scope { margin: 0; }
.rq-offers { border: 1px solid var(--border); border-radius: var(--radius-card); overflow-x: auto; }
.rq-offer { display: grid; grid-template-columns: 2fr 1fr 1fr 1.6fr; gap: var(--space-3); align-items: center;
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); min-width: 520px; }
.rq-offer:first-child { border-top: 0; }
.rq-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rq-activity li { display: grid; grid-template-columns: 92px 1fr; gap: var(--space-2); }
@media (max-width: 900px) { .rq-cols { grid-template-columns: 1fr; } }

/* m239 — My requests and the request page, aligned with the mockup's values. */
.mr-tile { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-card); display: inline-flex;
  align-items: center; justify-content: center; }
.mr-tile--row { width: 44px; height: 44px; }
.mr-tile img { width: 22px; height: 22px; }
.mr-tile--accent { background: var(--accent-surface); color: var(--accent-deep); }
.mr-tile--warn { background: var(--warning-surface); color: var(--warning-text); }
.mr-tile--quiet { background: var(--surface-subtle); color: var(--text-secondary); }
.mr-attn-card { display: flex; gap: 14px; padding: 18px; }
.mr-what .tile-icon, .mr-what .tile-icon img { width: 22px; height: 22px; }
.mr-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 13px;
  line-height: 1.4; white-space: nowrap; }
.mr-pill--open { background: var(--success-surface); color: var(--success-text); }
.mr-pill--paused { background: var(--warning-surface); color: var(--warning-text); }
.mr-pill--draft { background: var(--surface-subtle); color: var(--text-secondary); border: 1px solid var(--border); }
.mr-pill--awarded { background: var(--text); color: var(--text-on-accent); }
.mr-pill--closed { background: var(--surface-subtle); color: var(--text-secondary); }
.mr-bar-track { display: block; height: 4px; border-radius: 2px; background: var(--border); margin-top: 6px; }
.mr-bar-fill { display: block; height: 4px; border-radius: 2px; }
.mr-bar-fill--accent { background: var(--accent-deep); }
.mr-bar-fill--warn { background: var(--warning-fill); }
.mr-bar-fill--quiet { background: var(--text-secondary); }
.mr-urgent { color: var(--warning-text); font-weight: 600; }
.mr-seg { display: flex; gap: 4px; flex-wrap: wrap; }
.mr-seg .tab { min-height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--radius-button);
  background: var(--surface); color: var(--text-secondary); font-weight: 600; }
.mr-seg .tab[aria-selected="true"] { border: 1px solid var(--accent-deep); background: var(--accent-surface);
  color: var(--accent-deep); font-weight: 700; }
.mr-row .req-actions .btn { width: 100%; min-height: 44px; }
.mr-btn-accent { border-color: var(--accent-deep); color: var(--accent-deep); }
.btn-block { width: 100%; min-height: 44px; }
.btn-danger-outline { background: var(--surface); border: 1px solid var(--danger); color: var(--danger-text); }
.rq-sub { margin-left: 10px; color: var(--text-secondary); font-size: 14px; }
.rq-title { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.tab-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--accent-deep);
  color: var(--text-on-accent); font-size: 12px; }
.rq-fact strong { font-size: 18px; font-weight: 800; }
.rq-main .form-title { font-size: 20px; font-weight: 800; margin: 0; }
.rq-side .form-title { font-size: 18px; font-weight: 800; margin: 0; }
.rq-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  flex-wrap: wrap; margin-bottom: var(--space-3); }
.rq-offer-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-secondary); background: var(--surface-subtle); }
.rq-offer .field-help { display: block; }
.rq-scope-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.rq-who { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rq-choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-card); }
.rq-choice .field-help { display: block; }
.rq-choice--on { border-color: var(--accent-deep); background: var(--accent-surface); }
.rq-choice--off { color: var(--text-secondary); }
.manage-request { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; border: 0; }

/* m240 — My requests: the icon in its own column; the name and description cut to the column. */
.mr-row { grid-template-columns: 44px minmax(0, 3fr) 1fr 1.2fr 1.3fr 1fr 170px; }
.mr-icon-cell { display: flex; align-items: center; }
.mr-what { display: block; min-width: 0; }
.mr-what .req-title, .mr-what .mr-meta { display: block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mr-what .req-title { width: 100%; text-align: left; }
.mr-bar .mr-tabs { border-bottom: 0; }
@media (max-width: 900px) {
  .mr-row { grid-template-columns: 44px 1fr 1fr; }
  .mr-what { grid-column: 2 / -1; }
  .mr-row .req-actions { grid-column: 1 / -1; }
}

/* m241 — the budget is a number: right-aligned, figures of equal width, currency in its own column. */
.mr-row { grid-template-columns: 44px minmax(0, 3fr) 1fr 1.2fr 1.3fr 0.9fr 44px 170px; }
.mr-amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.mr-row-head .mr-amount { font-weight: 700; }
.mr-cur { color: var(--text-secondary); }
@media (max-width: 900px) {
  .mr-row { grid-template-columns: 44px 1fr 1fr; }
  .mr-amount { text-align: left; }
}

/* m242 — questions and answers, as designed. */
.tab-badge--warn { background: var(--warning-surface); color: var(--warning-text); font-weight: 700; }
.qa-card { display: flex; flex-direction: column; gap: 16px; }
.qa-item { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px;
  display: flex; flex-direction: column; gap: 12px; }
.qa-item--open { border-color: var(--border-strong); }
.qa-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.qa-head > div + .qa-topic { margin-left: auto; }
.qa-head .field-help + .qa-chip { margin-left: auto; }
.qa-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-surface); color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.qa-inline { display: inline; }
.qa-chip { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.qa-topic { background: var(--surface-subtle); border: 1px solid var(--border); color: var(--text-secondary); }
.qa-chip--warn { background: var(--warning-surface); color: var(--warning-text); }
.qa-chip--ok { background: var(--success-surface); color: var(--success-text); }
.qa-chip--accent { background: var(--accent-surface); color: var(--accent-deep); }
.qa-question { margin: 0; font-size: 16px; }
.qa-answer { padding: 12px 14px; border-radius: var(--radius-card); background: var(--accent-surface); }
.qa-answer p { margin: 4px 0 0; }
.qa-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-card);
  background: var(--surface-subtle); color: var(--text-secondary); font-size: 14px; }
.qa-how { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.qa-closes { color: var(--warning-text); font-weight: 600; font-size: 14px; }
.qa-topic-field { max-width: 320px; }
.rq-who legend.field-label { margin-bottom: 8px; }

/* m243 — My listings as My requests is designed, and the shared pager. */
.ml-row { display: grid; grid-template-columns: 44px minmax(0, 3fr) 1fr 1fr 0.9fr 44px 170px; gap: var(--space-3);
  align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.ml-row.mr-row-head { padding-top: 10px; padding-bottom: 10px; }
.ml-row .req-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.ml-row .req-actions .btn { width: 100%; min-height: 44px; }
.ml-preview { align-self: center; font-size: 13px; }
.ml-thumb { overflow: hidden; }
.ml-thumb img { width: 44px; height: 44px; object-fit: cover; }
.pager-nav { display: flex; align-items: center; gap: var(--space-2); }
.pager-btn { min-width: 44px; min-height: 44px; padding: 0 12px; font-weight: 700; }
@media (max-width: 900px) {
  .ml-row { grid-template-columns: 44px 1fr 1fr; }
  .ml-row .mr-what { grid-column: 2 / -1; }
  .ml-row .req-actions { grid-column: 1 / -1; }
}

/* m244 — icon actions on My listings; Options and Volume prices as lines with a dialog. */
.ml-row .ml-actions { flex-direction: row; justify-content: flex-end; align-items: center; gap: 4px; }
.ml-act { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.line-acts { white-space: nowrap; text-align: right; }
.line-acts .iconbtn { min-width: 40px; min-height: 40px; }
.line-dialog { margin: var(--space-3) 0; display: flex; flex-direction: column; gap: var(--space-3); }

/* m245 — switching organisation in the avatar menu. */
.menu-group { display: flex; flex-direction: column; }
.menu-label { padding: 6px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-secondary); }
.menu-gap { display: inline-block; width: 18px; }

/* m246 — targeted offers, as the mockup draws them. */
.to-budget { margin: 0 0 var(--space-3); }
.to-head { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.to-head .form-title { margin: 0; }
.to-row { display: grid; grid-template-columns: 1.1fr 1.4fr minmax(0, 2.6fr) 1fr 48px; gap: var(--space-3);
  align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.to-row .field-help { display: block; }
.to-detail { font-size: 15px; line-height: 1.5; }
.to-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.to-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border-radius: 999px;
  background: var(--accent-surface); color: var(--accent-deep); font-weight: 700; font-size: 14px; }
.to-search { max-width: 420px; }
.to-found, .to-picklist .linkbtn { display: block; text-align: left; padding: 6px 0; }
.to-picklist { border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-2) var(--space-3); }
.to-lines { border: 1px solid var(--border); border-radius: var(--radius-card); overflow-x: auto; }
.to-line { display: grid; grid-template-columns: minmax(0, 2.2fr) 1fr 1.1fr 0.9fr 1.1fr 40px; gap: 10px;
  align-items: center; padding: 10px 14px; border-top: 1px solid var(--border); min-width: 600px; }
.to-line:first-child { border-top: 0; }
.to-line-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-secondary); background: var(--surface-subtle); }
.to-num { width: 76px; height: 40px; padding: 0 8px; text-align: right; font-size: 15px; font-weight: 600; }
.to-num[id^="to-qty-"] { width: 64px; }
.to-list { color: var(--text-secondary); text-decoration: line-through; }
.to-total { display: flex; justify-content: flex-end; gap: var(--space-4); padding: 10px 14px;
  border-top: 1px solid var(--border); background: var(--surface-subtle); min-width: 600px; }
.to-saving { color: var(--success-text); font-weight: 600; }
.to-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.to-reasons li { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-card); }
.to-reasons .to-other { border-style: dashed; color: var(--text-secondary); }
.to-cost { display: flex; justify-content: space-between; gap: var(--space-3); }
.to-cost .field-help { display: block; }
.to-budget-box { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: 12px 14px; border-radius: var(--radius-card); background: var(--surface-subtle); font-size: 14px; }
.to-recv { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2.2fr); gap: var(--space-5); align-items: start; font-size: 15px; line-height: 1.5; }
.to-cards { display: flex; flex-direction: column; gap: 10px; }
.to-card { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 14px 16px; cursor: pointer; }
.to-card--on { border-color: var(--accent-deep); box-shadow: inset 0 0 0 1px var(--accent-deep); }
.to-card-foot { display: flex; justify-content: space-between; margin-top: 6px; }
.to-detail-card { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.to-decline { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px;
  background: var(--surface-subtle); display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 900px) { .to-recv { grid-template-columns: 1fr; } .to-row { grid-template-columns: 1fr 1fr; } }
/* m319: an accepted offer's purchase order and its basket — one under the other on a phone; the pill as wide as its words (the card's
   column stretched it across); and on a phone the lines scroll in their box instead of widening the page (their six columns did, by
   300 px at 390). */
.rcv-po-actions { flex-wrap: wrap; justify-content: flex-start; }
/* m319: New invoice asking a business to say whether it is a VAT payer — apart from the card under it. */
.inv-vatask { margin-bottom: var(--space-4); }
.to-detail-card > .mr-pill { align-self: flex-start; }
@media (max-width: 900px) { .to-recv { grid-template-columns: minmax(0, 1fr); } .to-lines { overflow-x: auto; } }

/* m249 — the targeted-offer wizard: the chosen things on the left, the list to choose from on the right. */
.to-wiz { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--space-5); align-items: start; margin-top: var(--space-4); font-size: 15px; line-height: 1.5; }
.to-picked, .to-plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.to-picked li, .to-plist li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: 8px 0; border-bottom: 1px solid var(--border); }
.to-plist li .field-help { display: block; }
.to-list-price { color: var(--text-secondary); text-decoration: line-through; }
.to-panel-pager { display: flex; justify-content: flex-end; gap: var(--space-2); }
.to-reasons .to-fixed { color: var(--text-secondary); }
.to-wiz-actions { margin-top: var(--space-4); }
@media (max-width: 900px) { .to-wiz { grid-template-columns: minmax(0, 1fr); } }   /* m313: 1fr let the widest line stretch a phone's page (441 px) */

/* Source155 — TargetedWizard / TargetedCustomer board contracts, with app theme tokens. */
.to-wiz > .wiz-head > .tabs { gap: 4px; }
.to-wiz > .wiz-head .tab { height: 44px; padding: 0 14px; border-bottom-width: 3px; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.to-wiz > .wiz-head .tab .step-num { margin-right: 0; }
.to-wiz > .wiz-head .tab[aria-selected="true"] { border-bottom-color: var(--accent-deep); }

.to-wiz .to-wiz-main.card { gap: 14px; }
.to-wiz-main > .form-title { font-size: 20px; line-height: 1.5; font-weight: 800; }
.to-wiz-panel.card { padding: 20px; gap: 10px; min-width: 0; }
.to-wiz-panel > .form-title { font-size: 18px; line-height: 1.5; font-weight: 800; }
.to-wiz-panel > .input { font-size: 15px; }
.to-line .iconbtn { width: 36px; height: 36px; font-size: 18px; }
.to-plist li { gap: 10px; }
.to-plist li:last-child { border-bottom: 0; }
.to-plist .btn { height: 36px; min-width: 0; padding: 0 12px; font-size: 14px; }
.to-panel-pager .iconbtn { width: 40px; height: 40px; border: 1px solid var(--border-strong); border-radius: var(--radius-button); background: var(--surface); color: var(--text); }
.to-panel-pager .iconbtn:disabled { border-color: var(--border); background: var(--surface-subtle); color: var(--text-secondary); }
.to-wiz .wiz-ico--next { background: var(--accent-deep); border-color: var(--accent-deep); }
.to-card { font: inherit; color: var(--text); }
.to-card > .field-help:last-of-type { font-size: 14px; }
.to-card-foot strong, .to-detail-card .mr-amount, .to-total strong { font-variant-numeric: tabular-nums; }
.to-detail-card > .form-title { margin: 8px 0 0; font-size: 26px; line-height: 1.5; font-weight: 800; }
.to-detail-card .to-line { grid-template-columns: minmax(0, 2.4fr) 1fr 1fr 0.8fr 1.1fr; gap: 12px; padding: 12px 16px; min-width: 620px; }
.to-detail-card .to-line-head { padding: 10px 16px; }
.to-detail-card .to-line > :nth-child(6):empty { display: none; }
.to-detail-card .to-total { padding: 12px 16px; min-width: 620px; }
.to-detail-card > .rcv-acts { justify-content: flex-start; gap: 10px; flex-wrap: wrap; align-items: center; }
.to-detail-card > .rcv-acts .btn { height: 48px; font-size: 16px; padding: 0 22px; }
.to-detail-card > .rcv-acts .btn-primary { background: var(--accent-deep); }
.to-detail-card > .rcv-acts .btn-secondary { margin-right: 0; padding: 0 20px; }
.to-decline .form-subtitle { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 800; }
.to-decline .rq-choice { align-items: center; background: var(--surface); }
.to-decline .rq-choice--on { background: var(--accent-surface); }
.to-decline .field-label { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.to-decline textarea.input { height: auto; padding: 10px 12px; font-size: 15px; }
.to-decline > .btn { align-self: flex-start; padding: 0 18px; font-size: 15px; }


/* m250 — which offers and requests reach you. */
/* m251: inside the standard card — a quiet divider above, the standard grid, no indented strip. */
.rf-block { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) 0 var(--space-4);
  border-top: 1px solid var(--border); }
.rf-block .form-subtitle { margin: 0; }
.rf-min { max-width: 180px; }

/* m252 — a switch: on = allowed, off = excluded. A real checkbox (role="switch"), drawn as a track and thumb. */
.switch-row { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.switch-row input[role="switch"] { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.switch-track { flex: 0 0 auto; position: relative; width: 44px; height: 24px; border-radius: 999px; background: var(--border-strong);
  transition: background 0.15s; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); transition: transform 0.15s; }
.switch-row input[role="switch"]:checked + .switch-track { background: var(--accent-deep); }
.switch-row input[role="switch"]:checked + .switch-track::after { transform: translateX(20px); }
.switch-row input[role="switch"]:focus-visible + .switch-track { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* m253 — the left menu's heading, centred. */
.account-sidebar h3 { text-align: center; }

/* m254 — 8px between a switch, its chosen list and its dropdown. */
.rf-block .field { gap: var(--space-2); }
.rf-block .switch-row { margin: 0; }
/* The sub-tabs under one top tab; the Save star; the Saved rows. */
.subtabs { margin-bottom: var(--space-4); }
.save-toggle { color: var(--text-secondary); }
.save-toggle.save-on { color: var(--accent-deep); }
.save-toggle.save-on svg { fill: currentColor; }
.rq-head-actions { display: flex; align-items: center; gap: var(--space-2); }
.saved-list { display: flex; flex-direction: column; gap: var(--space-3); }
.saved-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-4); align-items: center; }
.saved-row .field-help { display: block; }
.saved-actions { display: flex; gap: var(--space-3); align-items: center; }

/* m256 — the home band's card grid takes a whole row of its own, so the items span the page. It sat in a
   header-style flex row (.between) and shrank to its content. */
.between.wrap { flex-wrap: wrap; }
.between.wrap > .cards { flex: 0 0 100%; width: 100%; min-width: 0; }

/* m260 — the date field: our own calendar. The native box stays in the form, hidden; this stands in for it. */
.dp-wrap { position: relative; display: block; }
.dp-native { display: none !important; }
.dp-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; text-align: left; cursor: pointer; }
.dp-btn .dp-placeholder { color: var(--text-secondary); }
.dp-icon { flex: 0 0 auto; color: var(--text-secondary); }
.dp-pop { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; width: 296px; padding: var(--space-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: 0 12px 32px rgba(7, 28, 60, 0.16); }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.dp-title { font-size: 15px; text-transform: capitalize; }
.dp-grid { display: flex; flex-direction: column; gap: 2px; }
.dp-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--text-secondary); padding: 4px 0; }
.dp-day { width: 100%; aspect-ratio: 1 / 1; min-height: 36px; border: 0; border-radius: 6px; background: transparent;
  color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.dp-day:hover:not([disabled]) { background: var(--accent-surface); }
.dp-day:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.dp-day.dp-today { font-weight: 800; box-shadow: inset 0 0 0 1px var(--accent-deep); }
.dp-day.dp-mark { font-weight: 700; box-shadow: inset 0 0 0 2px var(--warning); }   /* m349d: the day a field marks — the deadline for offers */
.dp-day[aria-selected="true"] { background: var(--accent-deep); color: var(--surface); font-weight: 700; }
.dp-day[disabled] { color: var(--border-strong); cursor: not-allowed; }
.dp-foot { display: flex; justify-content: space-between; margin-top: var(--space-2); }

/* m264 — invoices, as the mockup draws them. */
.inv-list-error { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.inv-record-actions { display:flex; flex-direction:column; align-items:stretch; }
.inv-record-actions>.btn,.inv-record-issue { width:100%; box-sizing:border-box; }
.inv-record-issue { display:flex; flex-direction:column; gap:12px; }
.inv-record-activity { width:100%; margin-top:18px; padding-top:16px; border-top:1px solid var(--border); box-sizing:border-box; }
.inv-record-activity>h3 { margin:0 0 12px; font-size:14px; font-weight:800; }
.inv-record-activity .inv-hist { padding-left:18px; }
.inv-private-notes { list-style:none; padding:0; margin:12px 0; display:flex; flex-direction:column; gap:12px; }
.inv-private-notes li { border-top:1px solid var(--border); padding-top:12px; }
.inv-private-notes time { color:var(--text-secondary); font-size:12px; }
.inv-private-notes p { margin:6px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.inv-note-editor { display:flex; flex-direction:column; gap:10px; width:100%; }
.inv-note-editor textarea { resize:vertical; min-height:88px; }
.inv-list-skeleton { padding:0 18px; }
.inv-list-skeleton-row { display:grid; grid-template-columns:2fr 1.5fr 1.5fr 1fr 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--border); }
.inv-list-skeleton-row .skeleton { height:20px; min-width:0; }
.inv-attn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.inv-attn-card { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--accent-deep); border-radius: var(--radius-card); }
.inv-attn--bad { border-left-color: var(--danger); }
.inv-attn--warn { border-left-color: var(--warning); }
.inv-attn-card .linkbtn { align-self: flex-start; }
.inv-row { display: grid; grid-template-columns: 1.3fr 1.6fr 1.3fr 1fr 1fr 0.9fr 44px 1fr 48px; gap: var(--space-3); align-items: center;
  padding: 12px var(--space-4); border-bottom: 1px solid var(--border); }
.inv-row .field-help { display: block; }
.inv-row-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.inv-late { color: var(--danger-text); font-weight: 700; }
.inv-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.inv-pill--ok { background: var(--success-surface); color: var(--success-text); }
.inv-pill--warn { background: var(--warning-surface); color: var(--warning-text); }
.inv-pill--bad { background: var(--danger-surface); color: var(--danger-text); }
.inv-pill--quiet { background: var(--surface-subtle); color: var(--text-secondary); border: 1px solid var(--border); }
.inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.inv-cap { margin: 0 0 6px; font-size: 13px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.inv-lines .form-title, .inv-pad { padding: var(--space-3) var(--space-4) 0; }
.inv-line { display: grid; grid-template-columns: minmax(0, 2.4fr) 0.6fr 1fr 0.6fr 1fr 1fr; gap: var(--space-3); padding: 10px var(--space-4); border-top: 1px solid var(--border); }
.inv-line-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); background: var(--surface-subtle); }
.inv-totals { display: grid; grid-template-columns: auto auto; justify-content: end; gap: 4px var(--space-6); padding: 12px var(--space-4);
  border-top: 1px solid var(--border); background: var(--surface-subtle); font-variant-numeric: tabular-nums; }
.inv-note { padding: 0 var(--space-4) var(--space-3); }
.inv-kv { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 14px; }
.inv-hist { margin: 0; padding-left: 18px; font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
.inv-orderlink { display: block; font-weight: 800; font-size: 16px; }
@media (max-width: 900px) { .inv-attn, .inv-parties { grid-template-columns: 1fr; } .inv-row { grid-template-columns: 1fr 1fr; } }


/* m266 — business roles as chips: one to choose in Preferences, several in a targeted offer. */
.role-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.chip-toggle { min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
  color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.chip-toggle:hover { border-color: var(--accent-deep); }
.chip-toggle--on { background: var(--accent-surface); border-color: var(--accent-deep); color: var(--accent-deep); }
.chip-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* m267 — a message asking you to sign in carries the button to do it. */
.notice .notice-signin { display: inline-flex; margin-top: var(--space-2); margin-left: 0; }
.notice > div > .notice-signin, .notice > .notice-signin { display: flex; width: fit-content; }

/* m268 — "May interest you": more from the same category, under the product, as the catalogue shows them. */
.dt-related { margin-top: var(--space-8); }
.dt-related .cards { margin-top: var(--space-3); }

/* m269 — Customers: who buys from you, and buyers to find. */
.cust-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 0.7fr 1fr 1.3fr auto; gap: var(--space-3); align-items: center;
  padding: 12px var(--space-4); border-bottom: 1px solid var(--border); }
.cust-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
@media (max-width: 900px) { .cust-row { grid-template-columns: 1fr 1fr; } }

/* m270 — Suppliers and Customers, as the mockups draw them. */
.sup-filters, .list-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin: var(--space-3) 0 var(--space-4); }
.sup-filters .field, .list-filters .field { margin: 0; min-width: 180px; }
.sup-verified { align-self: flex-end; min-height: 44px; display: flex; align-items: center; }
.sup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.sup-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.sup-top { display: flex; gap: var(--space-3); align-items: center; }
.sup-avatar { width: 48px; height: 48px; flex: none; border-radius: 10px; background: var(--accent-surface); color: var(--accent-deep); display: grid; place-items: center; font-weight: 800; }
.sup-id { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sup-badges, .sup-cats { display: flex; gap: 6px; flex-wrap: wrap; min-height: 24px; align-items: center; }
.sup-mine { background: var(--accent-surface); color: var(--accent-deep); }
.sup-cat { padding: 2px 10px; border-radius: 999px; background: var(--surface-subtle); color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.sup-stats { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 14px; color: var(--text-secondary); }
.sup-actions { display: flex; gap: var(--space-2); margin-top: auto; }
.sup-actions .btn { flex: 1; }
.cust-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) 0.7fr 1fr 1.2fr 0.8fr 1.1fr auto; }
.cust-row--find { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 2fr) 0.8fr auto; }
.cust-center { text-align: center; }
.cust-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.inv-attn--ok { border-left-color: var(--success-deep); }
@media (max-width: 1000px) { .sup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sup-grid { grid-template-columns: 1fr; } }

/* m271 — Invoices and Customers drawn with My requests' components: the same rows, pills, tiles and distances. */
.mr-row.inv-cols { grid-template-columns: 1.2fr 1.6fr 1.3fr 1fr 1fr 0.9fr 44px minmax(0, 1fr) 48px; }   /* m345: the status no wider in one row than another */
.mr-row.cust-cols { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) 0.7fr 1fr 1.2fr 0.8fr 1.1fr auto; }
.mr-row.cust-cols.cust-find { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 2fr) 0.8fr auto; }
.mr-pill--late { background: var(--danger-surface); color: var(--danger-text); }
.mr-pill--new { background: var(--accent-surface); color: var(--accent-deep); }
.mr-tile--bad { background: var(--danger-surface); color: var(--danger-text); }
.mr-tile--ok { background: var(--success-surface); color: var(--success-text); }
@media (max-width: 900px) { .mr-row.inv-cols, .mr-row.cust-cols, .mr-row.cust-cols.cust-find { grid-template-columns: 1fr 1fr; } }

/* m272 — rich text: the editor (toolbar, area, link row, counter) and how it reads on a page. */
.rt { display: flex; flex-direction: column; border: 1px solid var(--border-strong); border-radius: var(--radius-input, 6px); background: var(--surface); }
.rt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--border); }
.rt-btn { min-width: 36px; height: 36px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--text);
  font: inherit; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rt-btn:hover { background: var(--surface-subtle); }
.rt-sep { width: 1px; height: 22px; margin: 0 4px; background: var(--border); }
.rt-linkrow { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-2); border-bottom: 1px solid var(--border); }
.rt-linkrow .input { flex: 1 1 240px; }
.rt-linkrow[hidden], .rt-linkerr[hidden] { display: none; }
.rt-area { height: auto; min-height: 140px; max-height: 420px; overflow: auto; border: 0; border-radius: 0; box-shadow: none; padding: var(--space-3); line-height: 1.6; }
.rt-area p, .rt-view p { margin: 0 0 var(--space-2); }
.rt-area ul, .rt-area ol, .rt-view ul, .rt-view ol { margin: 0 0 var(--space-2); padding-left: 22px; }
.rt-count { align-self: flex-end; padding: 2px var(--space-3) var(--space-2); }
.rt-view { line-height: 1.6; }
.rt-view a, .rt-area a { color: var(--accent-deep); text-decoration: underline; }
/* m349e (board RichTextAi, 199–202): the size, a table and a picture — in the editor, and wherever rich text is read. Its menus and tools
   stay under a page's sticky head (the rail's, 6; the header's, 20). */
.rt { position: relative; }
.rt-area { position: relative; }
.rt-btn:disabled { opacity: .4; cursor: default; }
.rt-size { gap: 4px; font-size: var(--label-size); font-weight: 600; }
.rt-size .rt-caret { font-size: 11px; color: var(--text-secondary); }
.rt-menu, .rt-grid { position: absolute; z-index: 5; padding: 6px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: 0 12px 32px rgba(7, 28, 60, .16); }
.rt-menu[hidden], .rt-grid[hidden], .rt-picrow[hidden], .rt-tbar[hidden], .rt-pbar[hidden], .rt-picerr[hidden] { display: none; }
.rt-menu { min-width: 190px; display: flex; flex-direction: column; gap: 2px; }
.rt-mi { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 4px 10px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.rt-mi svg { visibility: hidden; color: var(--accent-deep); flex: none; }
.rt-mi:hover, .rt-mi[aria-checked="true"] { background: var(--surface-subtle); }
.rt-mi[aria-checked="true"] svg { visibility: visible; }
.rt-mi--sm span { font-size: .8125em; }
.rt-mi--lg span { font-size: 1.25em; }
.rt-mi--hd span { font-size: 1.375em; font-weight: 700; }
.rt-grid-title { margin: 0 0 6px; font-size: var(--label-size); font-weight: 700; }
.rt-grid-cells { display: grid; grid-template-columns: repeat(var(--rt-cols, 8), 22px); gap: 3px; }   /* --rt-cols: the grid's RT_GRID_COLS, set on it */
.rt-cell { width: 22px; height: 22px; padding: 0; border: 1px solid var(--border-strong); border-radius: 3px; background: var(--surface); cursor: pointer; }
.rt-cell--on { background: var(--accent-surface); border-color: var(--accent); }
.rt-grid-size { margin: 6px 0 0; text-align: center; font-size: var(--label-size); font-weight: 700; }
.rt-grid-help { margin: 4px 0 0; max-width: 220px; }
.rt-area h3, .rt-view h3 { margin: var(--space-3) 0 var(--space-2); font-size: 1.375em; line-height: 1.3; font-weight: 700; }
.rt-area h3:first-child, .rt-view h3:first-child { margin-top: 0; }
.rt-area .rt-sm, .rt-view .rt-sm { font-size: .8125em; }
.rt-area .rt-lg, .rt-view .rt-lg { font-size: 1.25em; }
.rt-area .rt-hd, .rt-view .rt-hd { font-size: 1.375em; line-height: 1.3; font-weight: 700; }
/* a wide table scrolls sideways — on a phone too — inside the text */
.rt-area table, .rt-view table { display: block; max-width: 100%; overflow-x: auto; margin: 0 0 var(--space-3); border-collapse: collapse; }
.rt-area th, .rt-area td, .rt-view th, .rt-view td { min-width: 72px; padding: 6px 10px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.rt-area th, .rt-view th { background: var(--surface-subtle); font-weight: 700; }
.rt-area th p, .rt-area td p, .rt-view th p, .rt-view td p { margin: 0; }
.rt-area table.rt-tbl-on { margin-bottom: var(--rt-tbar-h, 64px); }
.rt-area .rt-cell-on { box-shadow: inset 0 0 0 2px var(--accent); }
/* a picture is never made larger than it is: a third, a half or the whole width at most */
.rt-area img, .rt-view img { max-width: 100%; height: auto; border-radius: 6px; vertical-align: bottom; }
.rt-area img.rt-w2, .rt-view img.rt-w2 { max-width: 50%; }
.rt-area img.rt-w3, .rt-view img.rt-w3 { max-width: 33.333%; }
.rt-area img.rt-pic-on { outline: 2px solid var(--accent); outline-offset: 2px; }
.rt-area img.rt-wait { display: inline-block; width: 160px; height: 96px; background: var(--surface-sunken); animation: rt-pulse 1.2s ease-in-out infinite; }
@keyframes rt-pulse { 50% { opacity: .45; } }
.rt-tbar { position: absolute; z-index: 3; left: var(--space-3); right: var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 10px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-card); }
.rt-tbar-what { display: inline-flex; align-items: center; gap: 6px; font-size: var(--label-size); font-weight: 600; color: var(--text-secondary); }
.rt-tbar-what svg { width: 16px; height: 16px; color: var(--accent-deep); }
.rt-tb { min-height: 32px; padding: 4px 10px; }
.rt-tchk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--label-size); font-weight: 600; cursor: pointer; }
.rt-tdel { color: var(--danger-text); font-weight: 600; }
.rt-pbar { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 2px; padding: 4px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 20px rgba(7, 28, 60, .16); }
.rt-pb { min-width: 32px; height: 30px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--text);
  font: inherit; font-size: var(--label-size); font-weight: 600; cursor: pointer; }
.rt-pb:hover { background: var(--surface-subtle); }
.rt-pb[aria-pressed="true"] { background: var(--accent-surface); color: var(--accent-deep); }
.rt-picrow { display: grid; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--border); }
.rt-pic-title { margin: 0; font-weight: 700; }
.rt-pic-file { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-input);
  background: var(--surface); color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.rt-pic-file svg { flex: none; color: var(--accent-deep); }
.rt-pic-name { overflow-wrap: anywhere; }
.rt-picrow--edit .rt-pic-file, .rt-picrow--edit .rt-pic-help { display: none; }
.rt-pic-label { font-size: var(--label-size); font-weight: 700; }
.rt-pic-help { margin: 0; }
.rt-seg { display: inline-flex; justify-self: start; gap: 2px; padding: 3px; background: var(--surface-subtle); border-radius: 8px; }
.rt-seg-b { min-height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); font: inherit; font-weight: 600; cursor: pointer; }
.rt-seg-b[aria-checked="true"] { background: var(--surface); color: var(--accent-deep); box-shadow: 0 1px 2px rgba(7, 28, 60, .12); }
.rt-pic-go { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rt-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 var(--space-3); }
.rt-busy, .rt-note { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--helper-size); line-height: var(--helper-lh); font-weight: 600; }
.rt-busy { color: var(--accent-deep); }
.rt-note { color: var(--danger-text); }
.rt-busy:empty, .rt-note:empty { display: none; }
.rt-spin { width: 14px; height: 14px; flex: none; border: 2px solid var(--accent-line); border-top-color: var(--accent-deep); border-radius: 50%; animation: rt-spin .8s linear infinite; }
@keyframes rt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rt-spin, .rt-area img.rt-wait { animation: none; } }
@media (max-width: 600px) {
  /* on a phone, the table's tools one line under it, moved sideways */
  .rt-tbar { flex-wrap: nowrap; overflow-x: auto; }
  .rt-tbar > * { flex: none; }
  .rt-sep { display: none; }
  .rt-grid-cells { grid-template-columns: repeat(var(--rt-cols, 8), 28px); }
  .rt-cell { width: 28px; height: 28px; }
  .rt-area img.rt-w2, .rt-view img.rt-w2 { max-width: 100%; }
  .rt-area img.rt-w3, .rt-view img.rt-w3 { max-width: 50%; }
}

/* m273 — sign-in: show password, and 8px between the password and Sign in in the console's window. */
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap .input { flex: 1; padding-right: 48px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); }
.pw-toggle.pw-on { color: var(--accent-deep); }
.con-actions { margin-top: 8px; }
/* m273 — the top search: ONE frame, the field's. The input inside drew its own (a native search box and its own ring). */
.search-field input { -webkit-appearance: none; appearance: none; box-shadow: none; border: 0; min-width: 0; }
.search-field input:focus, .search-field input:focus-visible { outline-color: transparent; box-shadow: none; }
.search-field input::-webkit-search-decoration { -webkit-appearance: none; }
/* m273 — the language, in the top bar. */
.lang-host { position: relative; display: flex; align-items: center; }
.lang-btn { gap: 4px; width: auto; padding: 0 8px; }
.lang-code { font-size: 13px; font-weight: 700; }
.lang-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 160px; padding: 4px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-menu, 0 8px 24px rgba(0,0,0,0.12)); }
.lang-item { text-align: left; padding: 8px 12px; border: 0; border-radius: 6px; background: transparent; font: inherit; color: var(--text); cursor: pointer; }
.lang-item:hover, .lang-item[aria-checked="true"] { background: var(--surface-subtle); font-weight: 700; }
/* m273 — Payment terms and Incoterms as a spreadsheet. */
.grid-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); }
.grid-table { width: 100%; border-collapse: collapse; }
.grid-table th { text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary);
  background: var(--surface-subtle); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.grid-table td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 0; height: 40px; }
.grid-table td:last-child { border-right: 0; }
.grid-cell { width: 100%; height: 40px; border: 0; background: transparent; padding: 0 10px; font: inherit; color: var(--text); }
.grid-cell:focus-visible { background: var(--accent-surface); }
.grid-code { display: block; padding: 0 10px; font-family: var(--font-mono, monospace); font-weight: 700; }
.grid-handle { width: 32px; text-align: center; color: var(--text-secondary); cursor: grab; }
.grid-narrow { width: 72px; text-align: center; }
.grid-codecol { width: 160px; }
.grid-new td { background: var(--canvas); }
.grid-add { margin: var(--space-2) 0 var(--space-4); }
.sup-block { align-self: center; font-size: 13px; color: var(--text-secondary); }

/* m274 — console: charge templates, and suppliers & customers. */
.chg-top { margin: var(--space-3) 0; }
/* m310, found by the look: an `auto` track for the buttons is sized row by row, so a template with four buttons pushed its
   numbers left of the others'. One width for every row; under 1200 px the buttons go under the template. */
.mr-row.chg-cols { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 27rem); }
.mr-row.chg-cols .cust-actions { flex-wrap: wrap; }
@media (max-width: 1200px) {
  .mr-row.chg-cols { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.2fr); }
  .mr-row.chg-cols .cust-actions { grid-column: 1 / -1; }
  .mr-row-head.chg-cols > span:empty { display: none; }
}
/* m289: td-qualified — ".grid-table td { padding: 0 }" out-ranked the bare class, so the charge's name sat on the cell's edge. */
.grid-table td.chg-cell, .chg-cell { padding: 10px; vertical-align: top; }
.chg-cell .field-help { display: block; }
/* m310: the buttons' track the same width in every row (it was `auto`, sized row by row, so the columns did not line up). */
/* m320: the actions are icons now — five fit 13.5rem; the second press of Delete, in words, may take a line of its own. */
.mr-row.org-cols { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) 1fr 0.6fr 1.4fr 0.9fr 13.5rem; }
/* m342 (found by the look): "Follows the default (Standard)" pushed its row's columns — each row is a grid of its own, so the rows no longer
   lined up. Every column keeps its width; the button's words wrap in it (two lines at most at 1440 — the charges' column is the wider);
   its menu is wide enough for an item on one line, and opens from the cell's left, so a phone shows all of it. */
.mr-row.org-cols { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.6fr) minmax(0, 1.8fr) minmax(0, 0.9fr) 13.5rem; }
.org-tpl > .btn { max-width: 100%; white-space: normal; text-align: left; }
.org-tpl .lang-menu { min-width: 18rem; left: 0; right: auto; }
.org-acts { flex-wrap: wrap; max-width: 420px; }
.org-ico { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-button); background: var(--surface); color: var(--text); }
.org-ico:hover { border-color: var(--accent); color: var(--accent-deep); }
.org-ico--on { background: var(--accent-surface); border-color: var(--accent); color: var(--accent-deep); }
.org-ico--danger { color: var(--danger-text); }
.org-ico--danger:hover { border-color: var(--danger); color: var(--danger-text); background: var(--danger-surface); }
.org-del-confirm { display: inline-flex; align-items: center; gap: 6px; }
.org-tpl { position: relative; }
.org-panel { padding: var(--space-4); border-bottom: 1px solid var(--border); background: var(--canvas); }
.org-member { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.org-member .field-help { display: block; }
@media (max-width: 900px) { .mr-row.chg-cols, .mr-row.org-cols { grid-template-columns: 1fr 1fr; } .mr-row.chg-cols .cust-actions { justify-content: flex-start; } }

/* m276 — exchange rates: the buyer's price in brackets; the console screen; the invoice's rate. */
.price-buyer { margin-left: 6px; font-size: 0.85em; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.fx-tools { display: flex; gap: var(--space-2); align-items: center; }
.fx-settings { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; margin: var(--space-4) 0; padding: var(--space-4); }
.fx-settings .field { min-width: 160px; margin: 0; }
.fx-ro { display: inline-flex; align-items: center; min-height: 42px; font-weight: 700; }
.fx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-4); align-items: start; }
.fx-side { display: flex; flex-direction: column; gap: var(--space-4); }
.fx-side .card { padding: var(--space-4); }
.fx-side .field-help { display: block; }
.fx-spark { width: 100%; height: 140px; color: var(--accent-deep); margin-top: var(--space-2); }
.fx-conv { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.fx-conv .input { max-width: 140px; }
.fx-sel td { background: var(--accent-surface); }
.fx-code { font-family: var(--font-mono, monospace); font-weight: 800; }
.fx-table td, .fx-sources td { padding: 0 10px; }
.fx-sources .field-help { display: block; }
.fx-editor { margin-top: var(--space-4); }
.xp-block { margin-top: var(--space-4); }
.xp-actions { justify-content: flex-start; margin-top: var(--space-2); }
.inv-fx { margin-top: var(--space-2); border-top: 1px dashed var(--border); padding-top: var(--space-2); }
@media (max-width: 1000px) { .fx-layout { grid-template-columns: 1fr; } }
/* m288 — Exchange rates as the mockup draws it: five controls that save themselves, the day's change in colour, switches in the
   table, a page of ten, the sparkline on a baseline, the conversion's answer on a tinted field. */
.fx-settings .field { min-width: 170px; }
.fx-settings .catpick { min-width: 170px; }
.fx-pct { display: flex; align-items: center; gap: 6px; }
.fx-pct .input { width: 110px; }
.fx-viewing { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-4); }
.fx-table th.mr-amount, .fx-table td.mr-amount { text-align: right; }
.fx-val { font-variant-numeric: tabular-nums; font-weight: 700; }
.fx-val .fx-pinval { width: 120px; text-align: right; font-weight: 700; }
.fx-up { color: var(--success-text); }
.fx-down { color: var(--danger-text); }
.fx-flat { color: var(--text-secondary); }
.fx-when { color: var(--text-secondary); white-space: nowrap; }
.fx-fixcol { text-align: center; }
.fx-switch { display: inline-flex; vertical-align: middle; }
.fx-switch input[role="switch"] { width: 36px; height: 20px; }
.fx-switch .switch-track { width: 36px; height: 20px; }
.fx-switch .switch-track::after { top: 2px; left: 2px; width: 16px; height: 16px; }
.fx-switch input[role="switch"]:checked + .switch-track::after { transform: translateX(16px); }
.switch-row input[role="switch"]:disabled { cursor: not-allowed; }
.switch-row input[role="switch"]:disabled + .switch-track { opacity: .5; }
.fx-pager { margin-top: 0; }
.fx-spark { height: 160px; }
.fx-spark-base { stroke: var(--border); stroke-width: 1; }
.fx-spark-wait { height: 160px; }
.fx-hist .linkbtn, .fx-add .linkbtn { display: inline-block; margin-top: var(--space-2); font-weight: 700; }
.fx-conv { align-items: stretch; }
.fx-amt { flex: 1; display: flex; align-items: center; gap: 6px; }
.fx-amt .input { max-width: none; width: 100%; }
.fx-conv > [aria-hidden] { align-self: center; }
.fx-out { flex: 1; min-height: 42px; display: flex; align-items: center; padding: 0 12px; border-radius: 8px;
  background: var(--accent-surface); font-weight: 800; }
.fx-add .field { margin: var(--space-2) 0 0; }
.fx-add .form-actions { margin-top: var(--space-3); }
.fx-head > div:first-child { flex: 1 1 480px; max-width: 860px; }
.fx-table .fx-code.linkbtn { color: inherit; text-decoration: none; }
.fx-table .fx-code.linkbtn:hover, .fx-table .fx-code.linkbtn:focus-visible { text-decoration: underline; }
.fx-nowrap { white-space: nowrap; }
.fx-src-actions { display: flex; gap: 4px 14px; flex-wrap: wrap; align-items: center; }
.fx-src-actions .linkbtn { font-weight: 700; white-space: nowrap; }

/* ===== m281 ===== */
/* The top menu: the item you are on stands out by COLOUR — teal and bold, with the tabs' cyan underline — not by hover. */
.navlink[aria-current="page"] { color: var(--accent-deep); font-weight: 700; border-radius: 0; box-shadow: inset 0 -3px 0 var(--accent); }
.navlink[aria-current="page"]:hover { background: transparent; color: var(--accent-deep); }
/* Suppliers, Customers, Requests, Offers: their tabs' TEXT sits as far below the menu as "Marketplace" does on All
   categories — (18-13)/2 there, (48-14)/2 inside a tab, so the tab row moves up by the difference. */
.page > .subtabs:first-child, .page > .tabs.subtabs:first-child {
  margin-top: calc((var(--helper-lh) - var(--helper-size)) / 2 - (var(--tab-h) - var(--label-size)) / 2);
}
/* m285: every page under the avatar. The PAGE does not scroll: the screen is a column \u2014 the top bar, then the frame filling
   the rest. In the frame the left menu stays put (scrolling within itself only if taller than the screen) and the body,
   with the detail at the right, is the ONE thing that scrolls; its title strip sticks at the top edge of that body.
   Flexbox does the arithmetic, so there is no height guessed from the bar's size \u2014 the guesses (100vh - 140px, and a
   top offset measured from the page while the strip lives inside a scrolling body) are what moved the title down. */
body.rail-mode { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body.rail-mode > .shell, body.rail-mode > #verify-banner { flex: 0 0 auto; }
body.rail-mode > #view { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; padding-bottom: 0; }
body.rail-mode > #view > .catalogue { flex: 1 1 auto; min-height: 0; height: auto; align-items: stretch; }
body.rail-mode .catalogue > .account-sidebar { position: static; align-self: stretch; min-height: 0; max-height: none; overflow-y: auto; }
body.rail-mode .catalogue > section { min-height: 0; overflow-y: auto; padding-right: var(--space-3); padding-bottom: var(--space-8); }
body.rail-mode .catalogue > section > .rail-head { position: sticky; top: 0; z-index: 6; background: var(--canvas); padding-bottom: var(--space-3); }
body.rail-mode .editor-locked > form { max-height: none; overflow: visible; }
.rail-head > .title { margin-top: 0; }
.rail-head > .lede { margin-bottom: 0; }
.rail-head > .crumbs { margin-bottom: var(--space-2); }
/* The editor says what state the item is in, top right. */
.ed-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.ed-status { flex: 0 0 auto; margin-top: 6px; padding: 4px 12px; border-radius: 999px; font-size: var(--helper-size); font-weight: 700;
  background: var(--canvas); color: var(--text-secondary); border: var(--border-width) solid var(--border); }
.ed-status-published { background: var(--success-surface); color: var(--success-text); border-color: transparent; }
.ed-status-draft { background: var(--accent-surface); color: var(--accent-deep); border-color: transparent; }
/* Volume prices. */
.vol-block { margin-top: var(--space-6); }
.vol-table td:nth-child(2) { white-space: nowrap; }
.vol-calc { margin: var(--space-2) 0 0; }
.vol-saving { margin: var(--space-2) 0; color: var(--success-text); font-weight: 600; }
.side-panel { margin-bottom: var(--space-4); }
/* A dropdown with no room below opens upwards. */
.catpick.drop-up .catpick-list, .catpick.drop-up .catpick-panel { top: auto; bottom: calc(100% + 4px); }

/* m282: the volume discount, one line before the total */
.cart-discount strong, .vol-discount-row > :last-child { color: var(--success-text); }
.cart-subtotal.cart-total { border-top: var(--border-width) solid var(--border); padding-top: var(--space-2); }   /* m321: the total row's, not a line's */

/* m284: 8px more between the language switch and the avatar */
.lang-host { margin-right: var(--space-2); }

/* m285: below 900px the menu sits ABOVE the body (one column) — a fixed frame would squeeze the body under it on a
   phone, so there the page scrolls as any other page. The frame is for the two-column layout only. */
@media (max-width: 900px) {
  body.rail-mode { height: auto; overflow: visible; display: block; }
  body.rail-mode > #view { display: block; padding-bottom: 64px; }
  body.rail-mode .catalogue > .account-sidebar, body.rail-mode .catalogue > section { overflow: visible; }
  body.rail-mode .catalogue > section > .rail-head { position: static; }
  /* m342 (ROUND-m337…m339's "not fixed": Business settings' cards ended 12 px short of the right margin): the room kept for the
     body's own scroll bar — there is none below 900 px. */
  body.rail-mode .catalogue > section { padding-right: 0; }
}

/* m287: the volume price panel \u2014 From and To (and the discount type and value) together exactly as wide as the
   pricing dropdown above them: two equal columns across the full width, every field filling its column. */
#tier-dialog .grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
#tier-dialog .grid-2 > .field { min-width: 0; }
#tier-dialog .field .input, #tier-dialog .catpick, #tier-dialog .catpick-btn { width: 100%; box-sizing: border-box; }
/* m287: the pricing table \u2014 a pricing's SELYVO line sits under its Standard line, quieter. */
.set-table tr.row-selyvo td { color: var(--text-secondary); border-top: 0; padding-top: 0; }

/* ===== m289 ===== */
/* The console, its own page (console.html): its own header (operator, Sign out, language, the way back to the marketplace),
   a sign-in card in the middle of the page, and the rail in groups. */
.console-shell .brand-word span { color: var(--accent-deep); }
.console-operator { display: inline-flex; align-items: center; gap: var(--space-2); }
.console-operator .avatar { width: 36px; height: 36px; font-size: var(--helper-size); }
.console-op-name { font-weight: 600; white-space: nowrap; }
.console-signin { max-width: 440px; margin: var(--space-8) auto; padding: var(--space-6); }
.console-signin-mark { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 100%;
  background: var(--accent-surface); color: var(--accent-deep); }
.console-signin .title { margin-top: var(--space-3); }
.console-signin .form-actions .btn { width: 100%; }
.console-signin-foot { margin: var(--space-4) 0 0; text-align: center; }
.console-moved { max-width: 640px; }
.console-rail .side-links { gap: 2px; }
.console-rail-group { margin: var(--space-4) 17px var(--space-1); font-size: var(--micro-size); line-height: var(--micro-lh); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.console-rail-group:first-child { margin-top: 0; }
@media (max-width: 900px) {
  .console-rail-group { display: none; }
  .console-op-name { display: none; }
}
/* Exchange rates as a LIST of data sources, the chosen record's detail at the right. */
.fx-records { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 500px); gap: var(--space-4); align-items: start; }
.fx-detail { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.fx-detail .card { padding: var(--space-4); margin: 0; }
.fx-rec-row.fx-sel td { background: var(--accent-surface); }
.fx-rec-link { text-align: left; font-weight: 600; color: inherit; text-decoration: none; }
.fx-rec-link:hover, .fx-rec-link:focus-visible { text-decoration: underline; }
.fx-rec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.fx-rec-head .section-title { margin: 0; }
.fx-rec-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.fx-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: var(--space-4) 0; }
.fx-facts dt { color: var(--text-secondary); font-weight: 600; align-self: center; }
.fx-facts dd { margin: 0; min-width: 0; }
.fx-url { overflow-wrap: anywhere; font-size: var(--helper-size); }
.fx-lasterr { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.fx-rates-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.fx-rates-head .form-title { margin: 0; }
.fx-against { max-width: 220px; margin: var(--space-3) 0; }
.fx-rates .mr-bar { flex-wrap: wrap; }
.fx-rates .fx-table td .field-help { display: block; }
.fx-keynote { margin: var(--space-3) var(--space-4) var(--space-4); }
.fx-list .mr-foot { gap: var(--space-3); }
@media (max-width: 1180px) { .fx-records { grid-template-columns: 1fr; } }
.fx-detail .field-help { display: block; }
.fx-detail .fx-hist > strong { display: block; }
.console-signin .field + .field { margin-top: var(--space-3); }

/* ===== m291: the Feed ===== */
/* Your feed: the head with the four views as pills; the cards on the left, the settings, liked lately and how it works on the
   right. A card: who promotes it, the listing (photo, title, line, price, facts, quantity and the buttons), then the answer
   row (like / neutral / not interesting, give feedback). */
.fd-head .lede { max-width: 760px; }
.fd-views { display: flex; gap: 6px; flex-wrap: wrap; }
.fd-view { height: 40px; padding: 0 14px; border: var(--border-width) solid var(--border-strong); border-radius: 999px; background: var(--surface);
  color: var(--text); font: inherit; font-size: var(--label-size); font-weight: 600; cursor: pointer; white-space: nowrap; }
.fd-view[aria-selected="true"] { border-color: var(--accent-deep); background: var(--accent-surface); color: var(--accent-deep); font-weight: 700; }
.fd-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-6); align-items: start; margin-top: var(--space-4); }
.fd-main, .fd-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fd-card { padding: 0; overflow: hidden; }
.fd-card-head { display: flex; align-items: center; gap: var(--space-3); padding: 14px 18px; }
.fd-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-surface); color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--label-size); }
.fd-who { flex: 1; min-width: 0; }
.fd-supplier { font-weight: 700; color: var(--text); text-decoration: none; }
.fd-supplier:hover, .fd-supplier:focus-visible { text-decoration: underline; }
.fd-meta { font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary); }
.fd-why-btn { font-size: var(--helper-size); font-weight: 700; white-space: nowrap; }
.fd-why { margin: 0; padding: 10px 18px; border-top: var(--border-width) solid var(--border); background: var(--surface-subtle);
  font-size: var(--label-size); line-height: var(--label-lh); color: var(--text-secondary); }
.fd-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); border-top: var(--border-width) solid var(--border); }
.fd-media { display: block; min-height: 240px; background: var(--surface-subtle); }
.fd-media img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; display: block; }
.fd-info { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; min-width: 0; }
.fd-title { margin: 0; font-size: 21px; line-height: 1.25; font-weight: 800; }
.fd-title a { color: inherit; text-decoration: none; }
.fd-title a:hover, .fd-title a:focus-visible { text-decoration: underline; }
.fd-text { margin: 0; color: var(--text-secondary); }
.fd-deal { display: flex; flex-direction: column; gap: 10px; }
.fd-card--service .fd-deal { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.fd-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fd-now { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fd-was, .fd-unit { color: var(--text-secondary); }
.fd-facts { margin: 4px 0 0; font-size: var(--label-size); color: var(--text-secondary); }
.fd-buy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fd-qty { display: inline-flex; align-items: center; border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-button); overflow: hidden; }
.fd-qty button { width: 40px; height: var(--control-h); border: 0; background: var(--surface); color: var(--text); font: inherit; font-size: 18px;
  font-weight: 700; cursor: pointer; }
.fd-qty button:disabled { color: var(--text-secondary); cursor: not-allowed; }
.fd-qty-in { width: 52px; height: var(--control-h); border: 0; border-left: var(--border-width) solid var(--border);
  border-right: var(--border-width) solid var(--border); text-align: center; font: inherit; font-weight: 600; color: var(--text); }
/* m329: no 99,999 any more — the box grows with a longer quantity where the browser can. */
@supports (field-sizing: content) { .fd-qty-in { width: auto; field-sizing: content; min-width: 52px; max-width: 132px; padding: 0 6px; } }
.fd-open { font-size: var(--label-size); font-weight: 700; color: var(--accent-deep); }
/* m324: which of the listing's pricings a card's goods are ordered at — a row of its own above the quantity, its word beside the list. */
.fd-pricing { flex: 1 0 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fd-pricing-label { font-size: var(--label-size); font-weight: 700; color: var(--text-secondary); }
.fd-pricing .catpick { flex: 0 1 340px; min-width: 0; max-width: 100%; }
.svo-pricing { max-width: 420px; margin-top: var(--space-2); }
.cart-pricing { display: block; }
.fd-note { margin: 0; font-size: var(--label-size); font-weight: 600; color: var(--success-text); }
.fd-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-top: var(--border-width) solid var(--border);
  background: var(--surface-subtle); }
.fd-react { display: inline-flex; border: var(--border-width) solid var(--border-strong); border-radius: 999px; overflow: hidden; background: var(--surface); }
.fd-react button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0;
  border-left: var(--border-width) solid var(--border); background: var(--surface); color: var(--text); font: inherit;
  font-size: var(--label-size); font-weight: 600; cursor: pointer; }
.fd-react button:first-child { border-left: 0; }
.fd-react button[aria-pressed="true"] { background: var(--accent-surface); color: var(--accent-deep); font-weight: 700; }
.fd-react button:disabled { cursor: not-allowed; }
.fd-said { font-size: var(--helper-size); font-weight: 600; color: var(--text-secondary); }
.fd-said--like { color: var(--success-text); }
.fd-fb-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 700; text-decoration: none; }
.fd-fb { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; border-top: var(--border-width) solid var(--border); }
.fd-fb-title { margin: 0; font-size: 16px; font-weight: 800; }
.fd-fb .field-label { margin: 0; }
.fd-fb-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.fd-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fd-chip { min-height: 36px; padding: 0 12px; border: var(--border-width) solid var(--border-strong); border-radius: 999px; background: var(--surface);
  color: var(--text); font: inherit; font-size: var(--helper-size); font-weight: 700; cursor: pointer; }
.fd-chip[aria-pressed="true"] { border-color: var(--accent-deep); background: var(--accent-surface); color: var(--accent-deep); }
.fd-chip:disabled { cursor: not-allowed; opacity: .6; }
.fd-hidden { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-style: dashed; }
.fd-hidden-head { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); }
.fd-hidden-head p { flex: 1; margin: 0; color: var(--text); }
.fd-hidden .field-help { margin: 0; }
.fd-more { display: flex; justify-content: center; }
.fd-empty { display: flex; flex-direction: column; gap: var(--space-2); }
.fd-empty p { margin: 0; }
.fd-skeleton { height: 220px; }
.fd-skeleton-sm { height: 80px; }
.fd-panel { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.fd-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.fd-panel-title { margin: 0; font-size: 17px; font-weight: 800; }
.fd-panel > .field-help { margin: 0; }
.fd-cats { margin: 2px 0; }
.fd-cats .iconbtn { width: 28px; height: 28px; }
.fd-switch { justify-content: space-between; align-items: center; gap: var(--space-3); font-size: var(--label-size); }
.fd-switch-label { flex: 1; }
.fd-switch input[role="switch"] { right: 0; }
.fd-liked { list-style: none; margin: 0; padding: 0; }
.fd-liked li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 10px 0;
  border-top: var(--border-width) solid var(--border); }
.fd-liked li a { color: var(--text); text-decoration: none; }
.fd-liked li a:hover, .fd-liked li a:focus-visible { text-decoration: underline; }
.fd-liked .field-help { display: block; }
.fd-liked .btn, .pl-card .btn-sm { height: 36px; min-width: 0; padding: 0 12px; }
@media (max-width: 1100px) { .fd-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .fd-body { grid-template-columns: minmax(0, 1fr); }
  .fd-media, .fd-media img { min-height: 180px; }
  .fd-fb-btn { margin-left: 0; }
}

/* Your placements: what needs attention; the list with its tabs on the left, the chosen placement's record (the form, how it is
   doing, its feedback) on the right. */
.pl-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 520px); gap: 18px; align-items: start; margin-top: var(--space-4); }
.pl-list { margin-top: 0; }
.mr-row.pl-grid { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .7fr); }
.pl-row { width: 100%; border: 0; border-bottom: var(--border-width) solid var(--border); background: var(--surface); color: inherit;
  font: inherit; text-align: left; cursor: pointer; }
.pl-row:hover { background: var(--surface-subtle); }
.pl-row--on, .pl-row--on:hover { background: var(--accent-surface); }
.pl-what { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.pl-foot { margin: 0; padding: 12px var(--space-4); }
.mr-pill--sched { background: var(--accent-surface); color: var(--accent-deep); }
.pl-detail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pl-card { display: flex; flex-direction: column; gap: var(--space-3); padding: 18px; margin: 0; }
.pl-card .field { margin: 0; }
.pl-rec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.pl-rec-title { margin: 0 0 6px; font-size: 20px; line-height: 1.3; font-weight: 800; }
.pl-sec { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: var(--helper-size); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.pl-sec::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.pl-money { display: flex; align-items: center; gap: var(--space-2); }
.pl-cur { color: var(--text-secondary); font-weight: 600; }
.pl-often { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: end; }
.pl-often .catpick, .pl-when .catpick { width: 100%; }
.pl-num { width: 100%; }
.pl-when-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.pl-when { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(96px, 1fr); gap: var(--space-2); }
.pl-when .dp-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-card .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pl-card .input { width: 100%; min-width: 0; }
.pl-money .input { flex: 1; }
.pl-list .mr-bar .tabs { margin: 0; }
.pl-countries .iconbtn { width: 28px; height: 28px; }
.pl-card p.field-help { margin: 0; }
.pl-days { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-day { min-width: 52px; }
.pl-aud { display: flex; flex-direction: column; gap: var(--space-2); }
.pl-radio { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card); cursor: pointer; }
.pl-radio input { margin-top: 3px; }
.pl-radio--on { border-color: var(--accent-deep); background: var(--accent-surface); }
.pl-radio .field-help { display: block; }
.pl-fee { padding: 12px 14px; border-radius: var(--radius-card); background: var(--surface-subtle); font-size: var(--label-size); line-height: var(--label-lh); }
.pl-actions { flex-wrap: wrap; gap: 10px; margin: 0; }
.pl-confirm { flex-basis: 100%; margin: 0; font-weight: 600; }
.pl-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.pl-card-title { margin: 0; font-size: 18px; font-weight: 800; }
.pl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pl-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: var(--border-width) solid var(--border); border-radius: var(--radius-card); }
.pl-tile-label { font-size: var(--helper-size); color: var(--text-secondary); }
.pl-tile strong { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pl-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--border); }
.pl-bar-like { background: var(--accent-deep); }
.pl-bar-neutral { background: var(--border-strong); }
.pl-bar-not { background: var(--badge); }
.pl-legend { margin: 0; }
.pl-fb-list { list-style: none; margin: 0; padding: 0; }
.pl-fb-item { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3) 0; border-top: var(--border-width) solid var(--border); }
.pl-fb-body { margin: 0; }
.pl-fb-acts { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pl-answer { padding: 10px 12px; border-radius: var(--radius-card); background: var(--surface-subtle); }
.pl-answer p { margin: 4px 0 0; }
.notice-warn { background: var(--warning-surface); border-color: var(--warning-fill); color: var(--warning-text); }
@media (max-width: 1180px) { .pl-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .pl-often { grid-template-columns: 1fr 1fr; } .mr-row.pl-grid { grid-template-columns: 1fr 1fr; } }

/* m295: requests in suppliers' feeds — Requests for you (a request's card: who asks, what, how and where, the budget, until when;
   make an offer, open the request, ask; the side's two feeds and switches), a request's placement in Your placements (what
   appears, the cap at the deadline for offers, what it costs, how the card is doing), the wizard's step with the card as
   suppliers see it, and the console's two feed placement fees with who pays each. */
.rf-card .fd-body { grid-template-columns: 260px minmax(0, 1fr); }
.rf-media, .rf-media img { min-height: 200px; }
.rf-invited { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--warning-surface); color: var(--warning-text);
  font-size: 12px; font-weight: 700; white-space: nowrap; }
.rf-offered { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--label-size); font-weight: 700; color: var(--success-text); }
.rf-buy { margin-top: 4px; }
.rf-switch .field-help { display: block; }
.rf-what { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card); background: var(--surface-subtle); }
.rf-what .linkbtn { font-weight: 700; text-align: left; }
.rf-what-cat { color: var(--text-secondary); }
.rf-profile { align-self: flex-start; font-size: var(--label-size); font-weight: 700; text-align: left; }
.rf-cap { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 14px; border: 0; border-radius: var(--radius-card);
  background: var(--accent-surface); color: var(--accent-deep); font-size: var(--label-size); line-height: var(--label-lh); }
.rf-cap svg { flex: none; margin-top: 2px; }
.rf-fee .linkbtn { font-weight: 700; }
.rf-fee-note { display: block; margin-top: 4px; }
.rf-free { display: flex; align-items: flex-start; gap: 10px; color: var(--success-text); }
.rf-free svg { flex: none; margin-top: 2px; }
.rf-names { margin-top: 8px; }
.rf-questions { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding: 10px 12px;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-card); }
.rf-questions .field-help { display: block; }
.rf-on { margin-bottom: var(--space-2); }
.pl-kind .field-label { margin: 0 0 2px; }
.pl-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.mr-pill--kind { background: var(--surface); color: var(--text-secondary); border: 1px solid var(--border); }
.mr-pill--invited { background: var(--warning-surface); color: var(--warning-text); }
.rf-wiz-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rf-preview { display: flex; flex-direction: column; gap: 8px; }
.rf-preview .panel-title, .rf-preview > .field-help { margin: 0; }
.rf-preview .rf-card { margin-top: 6px; }
.rf-preview .fd-card-head { padding: 12px 14px; }
.rf-preview .fd-body { grid-template-columns: 130px minmax(0, 1fr); }
.rf-preview .rf-media, .rf-preview .rf-media img { min-height: 160px; }
.rf-preview .fd-info { padding: 14px; }
.rf-preview .fd-title { font-size: 18px; }
.rf-preview .fd-foot { padding: 10px 14px; }
.rf-preview .fd-react button { padding: 0 10px; }
.rf-preview .fd-fb-btn { margin-left: 0; }
.chg-row--payer > td { background: var(--surface-subtle); }
.chg-payer { display: inline-block; margin-top: 6px; padding: 1px 8px; border: var(--border-width) solid var(--border-strong); border-radius: 999px;
  background: var(--surface); color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.chg-free { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--success-surface); color: var(--success-text);
  font-size: 12px; font-weight: 700; }
@media (max-width: 700px) {
  .rf-card .fd-body, .rf-preview .fd-body { grid-template-columns: minmax(0, 1fr); }
  .rf-media, .rf-media img { min-height: 160px; }
}

/* m293: Time sheets, under Invoices — Your time (the week across every customer, a time sheet per customer for its own
   period, what is ready to invoice) and To approve (the list, the chosen time sheet, an invoice to accept with its time
   sheets, and the company's two rules), as the three approved boards draw them. */
.ts-mode { display: inline-flex; gap: 4px; padding: 4px; border: var(--border-width) solid var(--border); border-radius: 12px; background: var(--surface); }
.ts-mode-btn { min-height: 40px; padding: 0 14px; border: var(--border-width) solid transparent; border-radius: 8px; background: transparent;
  color: var(--text-secondary); font: inherit; font-weight: 600; cursor: pointer; }
.ts-mode-btn[aria-pressed="true"] { border-color: var(--accent-deep); color: var(--accent-deep); background: var(--accent-surface); }
.ts-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 18px; align-items: start; margin-top: var(--space-4); }
.ts-main, .ts-side, .ts-qmain { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ts-week { padding: 16px; margin: 0; }
.ts-week-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: 12px; }
.ts-week-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ts-nav { min-width: 40px; padding: 0 12px; }
.ts-week-title { margin: 0 4px; font-size: 20px; line-height: 1.3; font-weight: 800; }
.ts-empty { margin: 8px 0 0; }
.ts-grid { display: flex; flex-direction: column; }
.ts-gr { display: grid; grid-template-columns: minmax(200px, 1fr) repeat(7, 58px) 72px; gap: 6px; align-items: center; padding: 10px 0;
  border-top: var(--border-width) solid var(--border); }
.ts-gr-head { border-top: 0; padding-top: 0; align-items: end; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-secondary); }
.ts-dh { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ts-dh b { font-size: 15px; color: var(--text); text-transform: none; letter-spacing: 0; }
.ts-dh--today, .ts-dh--today b { color: var(--accent-deep); }
.ts-tot { text-align: right; }
.ts-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ts-cust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ts-chip { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.ts-chip--APPROVE_FIRST { background: var(--success-surface); color: var(--success-text); }
.ts-chip--WITH_INVOICE { background: var(--warning-surface); color: var(--warning-text); }
.ts-chip--NOT_REQUIRED { background: var(--surface-subtle); color: var(--text-secondary); border: var(--border-width) solid var(--border); }
.ts-cell { width: 100%; height: 40px; border: var(--border-width) solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text);
  font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; }
.ts-cell--we { background: var(--surface-subtle); }
.ts-cell--on { border: 2px solid var(--accent-deep); box-shadow: 0 0 0 3px var(--accent-surface); }
.ts-cell--locked { background: var(--surface-subtle); color: var(--text-secondary); border-style: dashed; }
.ts-gr-sum { color: var(--text-secondary); font-weight: 600; }
.ts-gr-sum > span:not(:first-child) { text-align: center; }
.ts-gr-sum .ts-tot { text-align: right; color: var(--text); }
.ts-addbtn { margin-top: 12px; border-style: dashed; }
.ts-add { margin-top: 12px; max-width: 420px; }
.ts-foot { margin: 12px 0 0; }
.ts-editor { padding: 18px; margin: 0; }
.ts-ed-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.ts-ed-fields { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-3); }
.ts-ed-fields .input { width: 100%; }
.ts-note-read { margin: 0; }
.ts-percust, .ts-ready, .ts-focus { display: flex; flex-direction: column; gap: 12px; padding: 18px; margin: 0; }
.ts-percust > .field-help, .ts-ready > .field-help, .ts-focus > .field-help { margin: 0; }
.ts-checknote { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius-card); background: var(--accent-surface); color: var(--accent-deep); }
.ts-checknote p { margin: 0; font-size: var(--label-size); }
.ts-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: var(--border-width) solid var(--border); border-radius: var(--radius-card); }
.ts-card--warn { border-color: var(--warning-fill); background: var(--warning-surface); }
.ts-card p { margin: 0; }
.ts-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.ts-rule { font-size: 12px; font-weight: 700; }
.ts-rule--APPROVE_FIRST { color: var(--success-text); }
.ts-rule--WITH_INVOICE { color: var(--warning-text); }
.ts-rule--NOT_REQUIRED { color: var(--text-secondary); }
.ts-last { margin: 0; font-size: var(--label-size); font-weight: 600; }
.ts-last--ok { color: var(--success-text); }
.ts-last--warn { color: var(--warning-text); }
.ts-last--quiet { color: var(--text-secondary); }
.ts-card-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ts-ready-lines { list-style: none; margin: 0; padding: 0; }
.ts-ready-lines li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 10px 0; border-top: var(--border-width) solid var(--border); }
.ts-ready-lines .field-help { display: block; }
.mr-row.ts-qgrid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, .6fr) minmax(0, 1fr); }
.ts-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ts-state { font-size: 12px; font-weight: 700; }
.ts-state--paused { color: var(--warning-text); }
.ts-state--open { color: var(--success-text); }
.ts-state--late { color: var(--danger-text); }
.ts-state--new { color: var(--accent-deep); }
.ts-state--draft { color: var(--text-secondary); }
.ts-days { border: var(--border-width) solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.ts-days-row { display: grid; grid-template-columns: 110px 64px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-top: var(--border-width) solid var(--border); }
.ts-days-head { border-top: 0; background: var(--surface-subtle); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-secondary); }
.ts-days-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 10px 12px; border-top: var(--border-width) solid var(--border); }
.ts-invsheet { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding: 10px 12px; border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card); }
.ts-invsheet .field-help { display: block; }
.ts-rules { margin: 0; }
.ts-fs { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0 0 var(--space-3); padding: 0; border: 0; }
.ts-rule-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-4); }
.ts-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.ts-seg-btn { min-height: 44px; padding: 0 16px; border: var(--border-width) solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text);
  font: inherit; font-weight: 700; cursor: pointer; }
.ts-seg-btn[aria-pressed="true"] { border-color: var(--accent-deep); background: var(--accent-surface); color: var(--accent-deep); }
.ts-check { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-card); }
.ts-check--on { border-color: var(--accent-deep); background: var(--accent-surface); }
.ts-check-in { display: flex; align-items: center; gap: 8px; }
.ts-pick { width: auto; min-width: 160px; max-width: 100%; }
.ts-radio { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.ts-exc { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 10px 12px; border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card); }
.ts-exc-acts { display: flex; gap: 6px; align-items: center; }
.ts-order-sheets { list-style: none; margin: 8px 0; padding: 0; }
.ts-order-sheets li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 8px 0; border-top: var(--border-width) solid var(--border); }
.ts-print { display: none; }
@media print {
  body.ts-printing .shell, body.ts-printing .build-stamp, body.ts-printing #verify-banner, body.ts-printing #cart-drawer,
  body.ts-printing #view > *:not(.ts-print) { display: none !important; }
  body.ts-printing .ts-print { display: block !important; }
}
@media (max-width: 1180px) { .ts-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .ts-gr { grid-template-columns: repeat(7, minmax(34px, 1fr)); }
  /* m311: a day counted in days ("0.5 d") fits its narrow cell on a phone. */
  .ts-cell { padding: 0 2px; }
  .ts-cell--d { font-size: 12px; }
  .ts-gr > .ts-who, .ts-gr-head > span:first-child, .ts-gr-sum > span:first-child, .ts-gr .ts-tot { grid-column: 1 / -1; text-align: left; }
  .ts-rule-row, .ts-ed-fields { grid-template-columns: minmax(0, 1fr); }
}
.ts-head > div:first-child { flex: 1 1 520px; max-width: 880px; }
.ts-head .ts-mode { margin-bottom: 4px; }
.ts-acts { justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
.ts-acts .btn-secondary { margin-right: 0; }
.ts-check { justify-content: flex-start; }
.ts-check .ts-pick { margin-left: auto; }
.ts-checknote svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; }
.ts-record .pl-tile strong.ts-tile-money { font-size: 18px; white-space: nowrap; }
.ts-pick { flex: 0 1 260px; min-width: 200px; max-width: 100%; }
.ts-pick .catpick { width: 100%; }
.ts-picked { font-weight: 600; }

/* m311: own time — the boards "Time sheets — own time, not billed: your week" and "… what NovaData invests" (canvas version 69):
   a violet of its own (--own, with the first rating's tint and bar), apart from the teal of billed time; amber over a maximum. */
.own-agreed { display: block; font-weight: 600; }
.own-agreed--near { color: var(--warning-text); }
.own-strip { display: flex; padding: 14px 0 6px; border-top: var(--border-width) solid var(--border); }
.own-strip-cell { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.own-chip-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--violet-surface); color: var(--own); font-size: 12px;
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.own-gr { border-left: 3px solid var(--violet-bar); padding-left: 10px; }
.own-gr--over { border-left-color: var(--warning-fill); }
.own-for { font-weight: 600; }
.own-overline { color: var(--warning-text); font-weight: 600; }
.own-cell { border-color: var(--own-line); background: var(--own-wash); }
.own-cell.ts-cell--we { background: var(--surface-subtle); }
.own-cell.ts-cell--on { border-color: var(--own); box-shadow: 0 0 0 3px var(--violet-surface); }
.own-sum-o, .own-sum-o .ts-tot { color: var(--own); }
.own-sum-all { border-top: var(--border-width) solid var(--border); color: var(--text); font-weight: 800; }
.ts-addbtns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ts-addbtns .ts-addbtn { margin-top: 0; }
.own-addbtn, .own-btn-soft { border: var(--border-width) solid var(--own); background: var(--violet-surface); color: var(--own); }
.own-btn { border: var(--border-width) solid var(--own); background: var(--own); color: var(--text-on-accent); }
.own-add { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding: 14px; border: var(--border-width) solid var(--own-line);
  border-radius: var(--radius-card); background: var(--own-wash); }
.own-add-grid { display: grid; grid-template-columns: minmax(150px, 180px) minmax(180px, 240px) minmax(0, 1fr) minmax(170px, 190px); gap: 12px; align-items: end; }
.own-add .field, .own-add .form-actions, .own-add-help { margin: 0; }
.own-add .catpick { width: 100%; }
.own-unit { margin: 0; padding: 0; border: 0; min-width: 0; }
.own-seg { display: flex; gap: 6px; }
.own-seg-opt { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-input); background: var(--surface); font-weight: 600; cursor: pointer; }
.own-seg-opt--on { border: 2px solid var(--own); color: var(--own); font-weight: 700; }
.own-seg-opt input, .own-share-opt input { margin: 0; accent-color: var(--own); }
.own-find { max-width: 520px; }
.own-hits { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.own-over-card { border: 2px solid var(--warning-fill); }
.own-over-alert { padding: 10px 14px; border-radius: 8px; background: var(--warning-surface); border: var(--border-width) solid var(--warning-fill); color: var(--warning-text);
  font-size: var(--label-size); }
.own-over { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.own-over-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: var(--border-width) solid var(--border); border-radius: 8px; cursor: pointer; }
.own-over-opt input { margin: 3px 0 0; }
.own-over-opt > span { display: flex; flex-direction: column; gap: 2px; }
.own-over-opt--bill input { accent-color: var(--accent-deep); }
.own-over-opt--bill.own-over-opt--on { border: 2px solid var(--accent-deep); background: var(--accent-surface); }
.own-over-opt--own { border-color: var(--own-line); background: var(--own-wash); }
.own-over-opt--own input { accent-color: var(--own); }
.own-over-opt--own.own-over-opt--on { border: 2px solid var(--own); }
.own-over-note { align-self: center; }
.own-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; margin: 0; border-color: var(--own-line); }
.own-card .field-help { margin: 0; }
.own-sofar { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.own-sofar strong { font-size: 22px; color: var(--own); }
.own-split { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-subtle); min-width: 60px; }
.own-split-c { background: var(--accent-deep); }
.own-split-o { background: var(--violet-bar); }
.own-kinds { list-style: none; margin: 0; padding: 0; font-size: var(--label-size); }
.own-kinds li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: var(--border-width) solid var(--border); }
.own-kinds li > span, .own-money > span { display: flex; flex-direction: column; }
.own-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.own-money { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--violet-surface); font-size: var(--label-size); }
.own-money .own-num { color: var(--own); }
.own-share { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px 0 0; border: 0; border-top: var(--border-width) solid var(--border); min-width: 0; }
.own-share-legend { float: left; width: 100%; padding: 0 0 2px; font-size: 15px; font-weight: 800; }
.own-share-opt { display: flex; gap: 8px; align-items: center; min-height: 32px; font-size: var(--label-size); cursor: pointer; }
.own-share-opt--on { font-weight: 700; }
.own-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-left: 26px; }
.own-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--violet-surface); color: var(--own);
  font-size: 13px; font-weight: 700; }
.own-chip-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--surface); color: var(--own); font-weight: 700; cursor: pointer; }
.own-addwho { min-width: 200px; }
.own-share-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ot-filters { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-top: var(--space-4); }
.ot-filter { margin: 0; width: 210px; max-width: 100%; }
.ot-filter .catpick { width: 100%; }
.ot-csv { margin-left: auto; }
.ot-note { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: var(--space-4); padding: 10px 14px; border: var(--border-width) solid var(--own-line);
  border-radius: 8px; background: var(--own-wash); font-size: var(--label-size); }
.ot-i { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--violet-surface); color: var(--own); display: inline-flex; align-items: center;
  justify-content: center; font-weight: 800; }
.ot-yours { margin-left: auto; }
.ot-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: var(--space-4); }
.ot-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 16px 18px; background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card); }
.ot-tile--own { border-color: var(--own-line); }
.ot-tile-label { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.ot-tile-value { font-size: 28px; line-height: 1.25; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ot-tile--own .ot-tile-value { color: var(--own); }
.ot-tile-sub { font-size: 13px; color: var(--text-secondary); }
.ot-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 18px; }
.ot-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; margin: 18px 0 0; }
.ot-two .ot-card { margin: 0; }
.ot-card .field-help { margin: 0; }
.ot-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ot-table { display: flex; flex-direction: column; }
.ot-tr { display: grid; gap: 10px; align-items: center; padding: 8px 0; border-top: var(--border-width) solid var(--border); font-variant-numeric: tabular-nums; }
.ot-tr > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.ot-th { border-top: 0; padding-top: 0; font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.ot-total { border-top: 2px solid var(--border); font-weight: 800; }
.ot-r { text-align: right; }
.ot-kinds .ot-tr { grid-template-columns: 1.3fr 1.5fr 0.6fr; }
.ot-kinds.ot-money .ot-tr { grid-template-columns: 1.3fr 1.5fr 0.6fr 1fr; }
.ot-custs .ot-tr { grid-template-columns: 1.5fr 1.5fr 0.5fr; }
.ot-custs.ot-money .ot-tr { grid-template-columns: 1.5fr 1.5fr 0.5fr 0.95fr; }
.ot-people .ot-tr { grid-template-columns: 1.5fr 0.8fr 0.8fr 1.6fr 0.7fr; }
.ot-people.ot-money .ot-tr { grid-template-columns: 1.5fr 0.8fr 0.8fr 1.6fr 0.7fr 1fr 1fr; }
.ot-oversub { font-size: 12px; color: var(--warning-text); font-weight: 600; }
.ot-bar { display: flex; align-items: center; gap: 8px; }
.ot-track { flex: 1; display: flex; height: 10px; border-radius: 999px; background: var(--surface-subtle); overflow: hidden; }
.ot-fill { background: var(--violet-bar); }
.ot-fill--over { background: var(--warning-fill); }
.ot-pct { width: 44px; text-align: right; font-size: 13px; color: var(--text-secondary); }
.ot-own, .ot-total .ot-own { color: var(--own); }
.ot-chart { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: end; height: 150px; padding-top: 8px; }
.ot-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.ot-col-v { font-size: 13px; font-weight: 700; }
.ot-col-bar { width: 56px; max-width: 100%; min-height: 2px; border-radius: 6px 6px 0 0; background: var(--own-line); }
.ot-col--now .ot-col-bar { background: var(--violet-bar); }
.ot-col--now .ot-col-v, .ot-chart-x .ot-col--now { color: var(--own); font-weight: 800; }
.ot-chart-x { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; font-size: 13px; color: var(--text-secondary); text-align: center; }
.ot-col-m { font-variant-numeric: tabular-nums; }
.ot-x-short { display: none; }
.ot-foot { margin: 18px 0 0; }
.ot-set { gap: 14px; border-color: var(--own-line); }
.ot-set-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.ot-kindlist, .ot-rates { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; border: 0; }
.ot-set-legend { padding: 0; margin-bottom: 4px; font-size: 15px; font-weight: 800; }
.ot-kind { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: var(--border-width) solid var(--border); }
.ot-kind > strong, .ot-kind > span:first-child { flex: 1; min-width: 0; }
.ot-kind > span:first-child { display: flex; flex-direction: column; }
.ot-kind--edit .input { flex: 1; min-width: 160px; height: 40px; border: 2px solid var(--own); }
.ot-was { flex-basis: 100%; }
.ot-kind--add { align-items: flex-end; padding-top: 12px; }
.ot-kind--add .field { flex: 1; min-width: 180px; margin: 0; }
.ot-kind--gone { border-top-style: dashed; color: var(--text-secondary); font-size: var(--label-size); }
.ot-fixed { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.ot-set .btn-sm { height: 36px; min-height: 36px; padding: 0 12px; font-size: 13px; }
.ot-set-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ot-set-right .field { margin: 0; }
.ot-day { display: flex; align-items: center; gap: 8px; }
.ot-day .input { width: 90px; text-align: right; }
.ot-rates { gap: 8px; padding-top: 14px; border-top: var(--border-width) solid var(--border); }
.ot-rate { display: grid; grid-template-columns: minmax(0, 1fr) 120px 110px; gap: 8px; align-items: center; }
.ot-rate > span:first-child { display: flex; flex-direction: column; min-width: 0; }
/* A person's own rate: the name and its × on one line, as drawn (more specific than the column above it). */
.ot-rate > span.ot-rate-who { flex-direction: row; align-items: center; gap: 6px; }
.ot-rate-who strong { font-weight: 600; }
.ot-rate:not(.ot-rate--person) + .ot-rate--person { padding-top: 6px; border-top: var(--border-width) solid var(--border); }
.ot-rate-who .own-chip-x { background: var(--surface-subtle); color: var(--text-secondary); }
.ot-rate .input { text-align: right; }
.ot-addrate { max-width: 260px; }
.ot-set-acts { margin: 0; padding-top: 12px; border-top: var(--border-width) solid var(--border); }
@media (max-width: 1180px) {
  .own-add-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ot-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ot-two, .ot-set-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .own-add-grid { grid-template-columns: minmax(0, 1fr); }
  .ot-tiles { grid-template-columns: minmax(0, 1fr); }
  .ot-filter { width: 100%; }
  .ot-csv, .ot-yours { margin-left: 0; }
  .ot-th { display: none; }
  .ot-tr, .ot-kinds .ot-tr, .ot-kinds.ot-money .ot-tr, .ot-custs .ot-tr, .ot-custs.ot-money .ot-tr, .ot-people .ot-tr, .ot-people.ot-money .ot-tr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ot-tr > :first-child, .ot-tr > .ot-split, .ot-tr > .ot-bar { grid-column: 1 / -1; }
  .ot-tr > [data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: .04em; }
  .ot-r { text-align: left; }
  .ot-chart, .ot-chart-x { gap: 6px; }
  .ot-col-bar { width: 32px; }
  .ot-x-long { display: none; }
  .ot-x-short { display: inline; }
  .ot-rate { grid-template-columns: minmax(0, 1fr) 88px auto; }
}

/* m294: Expenses, under Invoices — Your expenses (the list, the charges each customer gets, the form with its receipt) and
   To approve (the supplier's review of a full charge, the customer's approval, the lines with their receipts, what is
   building up, the expenses by order, and the company's rules), as the three approved boards draw them. */
.ex-cols { grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); }
.ex-list { margin-top: 0; }
.mr-row.ex-grid { grid-template-columns: 60px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); gap: 10px; padding: 12px 16px; }
.mr-row.ex-grid.mr-row-head { padding-top: 10px; padding-bottom: 10px; }
.mr-row.ex-grid > span:first-child { font-size: var(--label-size); }
.ex-row--back, .ex-row--back:hover { background: color-mix(in srgb, var(--warning-surface) 45%, var(--surface)); }
.ex-said { color: var(--warning-text); }
.ex-missing { font-weight: 700; color: var(--warning-text); }
.ts-chip.ex-chip--APPROVE_FIRST { background: var(--accent-surface); color: var(--accent-deep); }
.ts-chip.ex-chip--WITH_INVOICE { background: var(--warning-surface); color: var(--warning-text); }
.ts-chip.ex-chip--NOT_ACCEPTED { background: var(--surface-subtle); color: var(--text-secondary); border: var(--border-width) solid var(--border); }
.ex-charges, .ex-building, .ex-byorder { display: flex; flex-direction: column; padding: 18px; margin: 0; }
.ex-charges .form-title, .ex-building .form-title, .ex-byorder .form-title { font-size: 17px; font-weight: 800; }
.ex-charges > .field-help, .ex-building > .field-help, .ex-byorder > .field-help { margin: 2px 0 10px; }
.ex-ch-row { display: grid; grid-template-columns: minmax(0, 1.1fr) 132px minmax(0, 1.8fr) minmax(0, .9fr); gap: 12px; align-items: center;
  padding: 10px 0; border-top: var(--border-width) solid var(--border); }
.ex-ch-row:last-child { padding-bottom: 0; }
.ex-ch-text { font-size: var(--label-size); }
.ex-ch-row .field-help { display: block; }
/* The form: the receipt first, then what it was, who pays it, a note. */
.ex-form { gap: 14px; padding: 18px; margin: 0; min-width: 0; }
.ex-form .form-title { font-size: 20px; font-weight: 800; }
.ex-form .field { margin: 0; }
.ex-form .field-label { margin-bottom: 4px; font-weight: 700; }
.ex-form .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ex-form .input, .ex-form .catpick { width: 100%; min-width: 0; }
.ex-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px; border: 2px dashed var(--border-strong);
  border-radius: var(--radius-card); background: var(--surface-subtle); text-align: center; }
.ex-drop .ex-rc-icon { color: var(--text-secondary); }
.ex-drop-name { overflow-wrap: anywhere; }
.ex-drop-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ex-drop-acts .sr-only:focus-visible + label { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ex-drop .field-help { font-size: var(--micro-size); }
.ex-amount-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
#ex-amount, #ex-km { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ex-suffix { display: flex; align-items: center; gap: 6px; }
.ex-suffix .input { flex: 1; text-align: right; font-weight: 600; }
.ex-suffix > span { font-weight: 600; color: var(--text-secondary); }
.ex-rate { display: flex; align-items: center; min-height: var(--control-h); font-weight: 600; }
.ex-who { margin: 0; }
.ex-who .form-subtitle { margin: 0 0 8px; padding: 0; color: var(--text); }
.ex-who .pl-radio { flex-direction: column; gap: 0; }
.ex-who .pl-radio + .pl-radio { margin-top: 8px; }
.ex-who .ts-check-in { align-items: flex-start; cursor: pointer; }
.ex-who .ts-check-in input { margin-top: 4px; }
.ex-who-pick { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 8px; }
.ex-who-pick .catpick { width: 100%; }
.ex-goes { margin: 2px 0 0; font-size: var(--helper-size); font-weight: 600; color: var(--accent-deep); }
.ex-goes--over { color: var(--danger-text); }
.ex-form > p.field-help { margin: 0; }
.ex-form .ts-acts { margin: 0; }
/* One of your own, no longer yours to change; its receipt. */
.ex-record .pl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-record .pl-tile strong.ts-tile-money { font-size: 18px; white-space: nowrap; }
.ex-receipt-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--label-size); }
.ex-receipt-links a { font-weight: 700; }
/* To approve: the list, the charge chosen with its lines and their receipts. */
.ex-qcols { grid-template-columns: minmax(0, 1fr) minmax(400px, 560px); }
.mr-row.ex-qgrid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 76px minmax(0, 1fr); gap: 10px; padding: 14px 16px; }
.mr-row.ex-qgrid.mr-row-head { padding-top: 10px; padding-bottom: 10px; }
.ex-chrec .pl-tile strong.ts-tile-money { font-size: 18px; white-space: nowrap; }
.ex-chrec .pl-rec-title { margin: 0; }
.ex-chrec .pl-rec-head .field-help { margin: 2px 0 0; }
.pl-tile.ex-tile--bad { border-color: var(--danger); background: var(--danger-surface); }
.pl-tile.ex-tile--bad strong { color: var(--danger-text); }
.ex-within { font-size: var(--micro-size); font-weight: 700; color: var(--success-text); }
.ex-within::before { content: "\2713\00a0"; }
.ex-over { align-items: flex-start; border-color: transparent; padding: 10px 12px; }
.ex-over svg { flex: none; margin-top: 2px; }
.ex-lines { border: var(--border-width) solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.ex-line { display: grid; grid-template-columns: 58px minmax(0, 1fr) 96px; gap: 10px; align-items: center; padding: 10px 12px;
  border-bottom: var(--border-width) solid var(--border); }
.ex-lines--tick .ex-line { grid-template-columns: 28px 58px minmax(0, 1fr) 96px; }
.ex-line > span:first-child input { width: 18px; height: 18px; margin: 0; }
.ex-line-head { padding-top: 8px; padding-bottom: 8px; background: var(--surface-subtle); font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-secondary); }
.ex-line--ticked { background: color-mix(in srgb, var(--warning-surface) 45%, var(--surface)); }
.ex-line--on { background: var(--accent-surface); box-shadow: inset 3px 0 0 var(--accent-deep); }
.ex-line .pl-what { gap: 2px; }
.ex-line-what { color: var(--text); font-weight: 700; text-decoration: none; text-align: left; }
.ex-line-what:hover, .ex-line-what:focus-visible { text-decoration: underline; }
.ex-line .mr-amount .field-help { font-weight: 400; }
.ex-lines-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; font-size: var(--label-size); }
.ex-lines-foot .field-help { font-size: var(--label-size); }
.ex-lines-foot strong { font-variant-numeric: tabular-nums; }
.ex-panel { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 16px; align-items: start; }
.ex-panel-doc { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; background: var(--surface-subtle);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-card); min-width: 0; }
.ex-preview { display: block; width: 100%; max-height: 300px; object-fit: contain; background: var(--surface); box-shadow: 0 1px 3px rgba(7, 28, 60, .18); }
.ex-preview--doc { display: flex; align-items: center; justify-content: center; height: 160px; color: var(--text-secondary); }
.ex-panel-doc .field-help { font-size: var(--micro-size); overflow-wrap: anywhere; text-align: center; }
.ex-panel-links { font-size: var(--helper-size); font-weight: 700; }
.ex-panel-facts { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ex-panel-kicker { margin: 0; font-size: var(--helper-size); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
.ex-panel-facts .pl-tile strong.ts-tile-money { font-size: 22px; white-space: nowrap; }
.ex-panel-facts p.field-help { margin: 0; }
.ex-inorder { margin: 0; font-size: var(--label-size); color: var(--text-secondary); }
.ex-inorder strong { color: var(--text); font-variant-numeric: tabular-nums; }
.ex-check { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 8px 10px; border-radius: var(--radius-card); font-size: var(--helper-size); font-weight: 600; }
.ex-check svg { flex: none; margin-top: 1px; }
.ex-check--ok { background: var(--success-surface); color: var(--success-text); }
.ex-check--warn { background: var(--warning-surface); color: var(--warning-text); }
.ex-chrec .ts-acts .field-help { align-self: center; }
/* What is building up, and the customer's expenses by order. */
.ex-bu-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) 90px minmax(0, 1.1fr); gap: 12px; align-items: center;
  padding: 10px 0; border-top: var(--border-width) solid var(--border); font-size: var(--label-size); }
.ex-bu-row:last-child { padding-bottom: 0; }
.ex-bu-row .ts-amt .linkbtn { font-size: var(--helper-size); }
.ex-bo { border: var(--border-width) solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.ex-bo-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 12px;
  border-top: var(--border-width) solid var(--border); font-size: var(--label-size); }
.ex-bo-head { border-top: 0; padding-top: 8px; padding-bottom: 8px; background: var(--surface-subtle); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
.ex-bo-row .linkbtn { color: var(--text); font-weight: 700; text-decoration: none; text-align: left; }
.ex-bo-row .linkbtn:hover, .ex-bo-row .linkbtn:focus-visible { text-decoration: underline; }
.ex-bo-total { font-weight: 800; }
/* The rules: the kinds a customer takes, the amounts beside their currency. */
.ex-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.ex-catchip { min-height: 36px; padding: 0 12px; border: var(--border-width) solid var(--border-strong); border-radius: 999px; background: var(--surface);
  color: var(--text-secondary); font: inherit; font-size: var(--helper-size); font-weight: 600; cursor: pointer; }
.ex-catchip[aria-pressed="true"] { border-color: var(--accent-deep); background: var(--accent-surface); color: var(--accent-deep); font-weight: 700; }
.ex-catchip:disabled { cursor: default; }
.ex-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-inline > .input { width: 140px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ex-inline > span { font-weight: 600; }
.ex-inline .catpick { flex: 0 0 auto; width: auto; min-width: 230px; }
.ex-rules .ts-rule-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.ex-rules .ts-seg-btn { padding: 0 12px; }
.ex-foot-l { display: inline-flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
/* The order's expenses, and the invoice's. */
.ex-ordercard .summary-money span:last-child { text-align: right; }
.inv-ex-charge { padding: 8px 0; border-top: var(--border-width) solid var(--border); }
.inv-ex-lines { list-style: none; margin: 6px 0 0; padding: 0; font-size: var(--label-size); }
.inv-ex-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 4px 0; }
.inv-ex-lines a { font-weight: 700; }
/* The console's expense categories. */
.excat-rec .ts-fs { margin: 0; }
.excat-rec .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.excat-rec .input, .excat-rec .catpick { width: 100%; min-width: 0; }
.excat-on { align-self: end; min-height: var(--control-h); flex-wrap: nowrap; align-items: center; }
.excat-rec .section-title { margin: 0; }
.grid-table.excat-table td { padding: 8px 10px; }
.excat-table .field-help code { font-size: var(--micro-size); }
@media (max-width: 1180px) { .ex-cols, .ex-qcols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .mr-row.ex-grid, .mr-row.ex-qgrid, .ex-ch-row, .ex-bu-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ex-panel, .ex-amount-row { grid-template-columns: minmax(0, 1fr); }
  .ex-lines--tick .ex-line { grid-template-columns: 28px 48px minmax(0, 1fr) 84px; }
}

/* m296: the Budget (its own page under Account settings) — what can be spent and what waits, the top-ups still open, Add funds
   in two steps (the amount and how it is paid; then Stripe's form or the payment details), what was added and taken, and the
   side's panels; SELYVO's receipt, laid out to print; and the console's Top-ups. As the four approved boards draw them. */
.bud-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-6); align-items: start; }
.bud-main, .bud-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.bud-main > .card, .bud-side > .card { margin: 0; }
.bud-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.bud-fig { display: flex; flex-direction: column; }
.bud-fig .field-help { margin: 0; }
.bud-amount { font-size: 28px; line-height: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bud-fig--wait .bud-amount, .bud-fig--wait .field-help { color: var(--warning-text); }
.bud-addbtn { margin-left: auto; }
.bud-open { display: flex; flex-direction: column; gap: var(--space-3); }
.bud-open .notice { margin: 0; }
.bud-waitbox { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 10px;
  background: var(--warning-surface); color: var(--warning-text); }
.bud-waitbox .field-help { color: var(--warning-text); margin: 2px 0 0; }
.bud-waitbox .bud-amount { font-size: 24px; line-height: 30px; }
.bud-overdue { margin-top: 4px; font-weight: 700; font-size: var(--helper-size); color: var(--danger-text); }
.bud-acts { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.bud-open > .field-help, .bud-open > p { margin: 0; }
.bud-openline { margin: 0; }
.bud-details { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); margin: 0; border: var(--border-width) solid var(--border);
  border-radius: 8px; overflow: hidden; }
.bud-details dt, .bud-details dd { margin: 0; padding: 10px 14px; border-bottom: var(--border-width) solid var(--border); }
.bud-details dt { background: var(--surface-subtle); color: var(--text-secondary); }
.bud-details dt:last-of-type, .bud-details dd:last-of-type { border-bottom: 0; }
.bud-details .bud-strong { font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bud-notice { margin: 0 0 var(--space-4); }
.bud-add { gap: var(--space-4); }
.bud-addhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.bud-steps { margin: 0; padding: 0; list-style: none; display: flex; gap: 18px; font-size: var(--label-size); color: var(--text-secondary); }
.bud-steps li { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.bud-steps li > span { width: 24px; height: 24px; border-radius: 50%; border: var(--border-width) solid var(--border-strong); display: inline-flex;
  align-items: center; justify-content: center; font-size: 13px; }
.bud-steps li[aria-current="step"] { color: var(--accent-deep); font-weight: 700; }
.bud-steps li[aria-current="step"] > span { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--text-on-accent); }
.bud-steps li.bud-done { color: var(--success-text); font-weight: 700; }
.bud-steps li.bud-done > span { background: var(--success-deep); border-color: var(--success-deep); color: var(--text); }
.bud-why { margin: 0; }
.bud-amountfield { max-width: 320px; }
.bud-how { margin: 0; padding: 0; border: 0; min-width: 0; }
.bud-howgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.bud-howcard { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: var(--border-width) solid var(--border-strong);
  border-radius: 10px; background: var(--surface); cursor: pointer; }
.bud-howcard input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent-deep); }
.bud-howcard > span { display: flex; flex-direction: column; gap: 2px; }
.bud-howcard .field-help { margin: 0; }
.bud-howcard--on { border: 2px solid var(--accent-deep); background: var(--accent-surface); padding: 13px 15px; }
.bud-sum { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-radius: 10px; background: var(--surface-subtle); }
.bud-sum > div { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-variant-numeric: tabular-nums; }
.bud-sum .bud-total { font-weight: 800; }
.bud-actions { justify-content: flex-start; flex-wrap: wrap; align-items: center; }
.bud-actions .btn-secondary { margin-right: 0; }
.bud-cardset { margin: 0; padding: 16px; border: var(--border-width) solid var(--border); border-radius: 10px; min-width: 0; }
.bud-cardset .field-label { padding: 0 6px; }
.bud-pay { min-height: 120px; }
.bud-payby { padding: 2px 10px; border-radius: 999px; background: var(--warning-surface); color: var(--warning-text); font-size: var(--helper-size); font-weight: 700; }
.bud-st { padding: 0; overflow: hidden; }
.bud-sthead { display: flex; flex-direction: column; gap: var(--space-3); padding: 18px 20px; border-bottom: var(--border-width) solid var(--border); }
.bud-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bud-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.bud-pill-btn { border-radius: 999px; }
.bud-custom { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bud-custom .field-label { margin: 0; }
.bud-totals { margin: 0; }
.bud-plus { color: var(--success-text); }
.bud-wait { color: var(--warning-text); }
.bud-none { padding: 18px 20px; margin: 0; }
.bud-table { width: 100%; }
.bud-table th, .bud-table td { vertical-align: top; }
.bud-table td.bud-date { white-space: nowrap; }
.bud-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.bud-num { font-weight: 700; }
.bud-ref { white-space: nowrap; }
.bud-reflabel { display: block; font-size: var(--micro-size); color: var(--text-secondary); }
.bud-row--wait { background: var(--warning-surface); }
.bud-row--no { color: var(--text-secondary); }
.bud-pill { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: var(--micro-size); font-weight: 700;
  white-space: nowrap; background: var(--surface-subtle); color: var(--text-secondary); }
.bud-pill--wait { background: var(--warning-surface); color: var(--warning-text); }
.bud-pill--no { background: var(--danger-surface); color: var(--danger-text); }
.bud-pill--ok { background: var(--success-surface); color: var(--success-text); }
.bud-more { display: flex; justify-content: center; padding: 14px 20px; border-top: var(--border-width) solid var(--border); }
.bud-panel { display: flex; flex-direction: column; gap: 8px; }
.bud-panel .form-title { font-size: 17px; line-height: 24px; }
.bud-panel .field-help { margin: 0; }
.bud-pays { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; font-size: var(--label-size); }
.bud-pays dt { margin: 0; }
.bud-pays dd { margin: 0; font-weight: 700; text-align: right; }
.bal-empty .lede { margin: 0 0 var(--space-2); }
@media (max-width: 1180px) { .bud-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .bud-details { grid-template-columns: minmax(0, 1fr); } .bud-details dt { border-bottom: 0; padding-bottom: 0; } }

/* SELYVO's receipt for a top-up: the sheet, and "Print or save as PDF" printing it and nothing else. */
.rc-page { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4); }
.rc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.rc-bar .field-help { margin: 0; }
.rc-back { min-height: var(--control-h); font-weight: 700; }
.rc-print { margin-left: auto; }
.rc-sheet { background: var(--surface); border: var(--border-width) solid var(--border); border-radius: 4px; padding: 48px 52px; display: flex;
  flex-direction: column; gap: 28px; }
.rc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.rc-brand { display: flex; align-items: center; gap: 12px; font-size: 26px; letter-spacing: -0.7px; }
.rc-brand img { border-radius: 6px; }
.rc-brand b { font-weight: 750; }
.rc-titleblock { text-align: right; }
.rc-titleblock h1 { margin: 0; font-size: 32px; line-height: 38px; font-weight: 800; }
.rc-number { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-titleblock .field-help { margin: 0; }
.rc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.rc-parties > div { display: flex; flex-direction: column; gap: 2px; }
.rc-kicker { font-size: var(--micro-size); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.rc-name { font-size: 16px; }
.rc-facts { margin: 0; padding: 16px 0; border-top: var(--border-width) solid var(--border); border-bottom: var(--border-width) solid var(--border);
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 16px; }
.rc-facts dt { color: var(--text-secondary); }
.rc-facts dd { margin: 0; }
.rc-lines { width: 100%; border-collapse: collapse; }
.rc-lines th { text-align: left; padding: 0 0 8px; font-size: var(--micro-size); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-secondary); border-bottom: var(--border-width) solid var(--border); }
.rc-lines td { padding: 14px 0; vertical-align: top; }
.rc-lines td .field-help { display: block; margin: 2px 0 0; }
.rc-lines tfoot td { padding: 6px 0 0; }
.rc-lines tfoot tr:first-child td { border-top: var(--border-width) solid var(--border); padding-top: 10px; }
.rc-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rc-lines tbody .rc-num { font-weight: 700; }
.rc-lines td:first-child.rc-num { padding-right: 24px; }
.rc-total td { font-size: 18px; font-weight: 800; }
.rc-thanks { margin: 0; padding-top: 18px; border-top: var(--border-width) solid var(--border); }
@media (max-width: 640px) {
  .rc-sheet { padding: 24px 20px; }
  .rc-parties, .rc-facts { grid-template-columns: minmax(0, 1fr); }
  .rc-top { flex-direction: column; }
  .rc-titleblock { text-align: left; }
}
@media print {
  body.rc-printing .shell, body.rc-printing .build-stamp, body.rc-printing #verify-banner, body.rc-printing #cart-drawer,
  body.rc-printing .rc-bar { display: none !important; }
  body.rc-printing .rc-sheet { border: 0; padding: 0; }
}

/* The console's Top-ups. */
.rail-count { margin-left: auto; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--warning-surface);
  color: var(--warning-text); font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.tu-list { padding: 0; overflow: hidden; }
.tu-listhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 16px;
  border-bottom: var(--border-width) solid var(--border); }
.tu-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tu-tab { min-height: var(--control-h); padding: 0 12px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--text-secondary);
  font: inherit; font-weight: 700; cursor: pointer; }
.tu-tab--on { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }
.tu-find .input { width: 320px; max-width: 100%; }
.tu-none { padding: 16px; margin: 0; }
.tu-table td { vertical-align: middle; }
/* m315: the list card has no padding of its own — the first and last cells keep off its edges (Top-ups and Collections). */
.tu-table th:first-child, .tu-table td:first-child { padding-left: 16px; }
.tu-table th:last-child, .tu-table td:last-child { padding-right: 16px; }
.tu-row--on { background: var(--accent-surface); box-shadow: inset 3px 0 0 var(--accent); }
.tu-mono { font-variant-numeric: tabular-nums; }
.tu-late { color: var(--danger-text); font-weight: 700; }
.tu-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; margin-top: var(--space-4); }
.tu-cols > .card { margin: 0; }
.tu-rechead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.tu-rechead .field-help { margin: 0; }
.tu-facts { margin: 0; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 6px 16px; }
.tu-facts dt { color: var(--text-secondary); }
.tu-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.tu-arrived { margin: 0; padding: 16px; border: var(--border-width) solid var(--border); border-radius: 10px; display: flex; flex-direction: column;
  gap: 12px; min-width: 0; }
.tu-diff { margin: 0; color: var(--warning-text); font-weight: 600; }
.tu-acts { justify-content: flex-start; flex-wrap: wrap; align-items: center; }
.tu-acts .btn-secondary { margin-right: 0; }
.tu-acts .field-help { margin: 0; flex: 1 1 260px; }
.tu-history { padding-top: 14px; border-top: var(--border-width) solid var(--border); }
.tu-history ul { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 1180px) { .tu-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .tu-facts { grid-template-columns: minmax(0, 1fr); } }

/* m297 kept every step in a window of ONE height, its content scrolling inside, so Back / Save draft / Continue stayed in one
   place. m313 (Jiri, 11 Oct): the actions are on the steps' line at the top, always in one place — so a step is as tall as
   what it holds, and nothing in it is cut off (the Unit and Budget currency lists, the line-items box). */
.rq-step-body { display: flex; flex-direction: column; gap: var(--space-5); }
.rq-step-body > * { flex-shrink: 0; }
.rq-card > .form-actions { padding-top: var(--space-4); border-top: var(--border-width) solid var(--border); }

/* m298: a request specified line by line — the Scope step's box, the Line items sheet, the import, the lines read on a request's
   page and by a supplier; who may quote, at the top of the Suppliers step; the console's Request limits and a unit's words. */
.rl-box { align-items: flex-start; padding: 12px 14px; border: var(--border-width) solid var(--border); border-radius: var(--radius-input); background: var(--surface); }
.rl-box:has(> input:checked) { border-color: var(--accent); background: var(--accent-surface); }
.rl-box .field-help { display: block; margin-top: 2px; }
.rl-tools { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.rl-tools .btn svg { margin-right: 6px; vertical-align: -3px; }
.rl-tools .field-help { flex: 1 1 260px; margin: 0; }
.rl-sheet { table-layout: auto; min-width: 760px; }
.rl-sheet th.rl-qty, .rl-sheet td:nth-child(3) { width: 96px; }
.rl-sheet .rl-unit { width: 150px; padding: 2px 4px; }
.rl-sheet .rl-unit .catpick-btn { min-height: 34px; border: 0; background: transparent; }
.rl-attach { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.rl-foot { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; margin: 0; }
.rl-foot .field-help { margin: 0; }
.rl-import { border-color: var(--accent-line); background: var(--accent-surface); }
.rl-import .upload-box { background: var(--surface); }
.rl-ex { width: 100%; border-collapse: collapse; font-size: var(--helper-size); }
.rl-ex th, .rl-ex td { text-align: left; padding: 6px 4px; border-bottom: var(--border-width) solid var(--border); }
.rl-ex .num { text-align: right; }
.rl-ex-blank { color: var(--text-secondary); }
.rl-review { list-style: none; margin: 0; padding: 0; border: var(--border-width) solid var(--border); border-radius: var(--radius-input); }
.rl-review li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--space-3); padding: 8px 12px; border-bottom: var(--border-width) solid var(--border); font-size: var(--label-size); }
.rl-review li:last-child { border-bottom: 0; }
.rl-review .rl-n, .rl-table .rl-n { color: var(--text-secondary); }
.rl-review .rl-q { white-space: nowrap; color: var(--text-secondary); }
.rl-table { width: 100%; border-collapse: collapse; font-size: var(--label-size); }
.rl-table th { text-align: left; font-size: var(--helper-size); color: var(--text-secondary); font-weight: 700; padding: 6px 8px; border-bottom: var(--border-width) solid var(--border-strong); }
.rl-table td { padding: 8px; border-bottom: var(--border-width) solid var(--border); vertical-align: top; }
.rl-table .num { text-align: right; white-space: nowrap; }
.rl-table .rl-details { display: block; margin-top: 2px; }
.rl-table a { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-deep); }
.wq-policy { margin: 0; }
.wq-chips { margin-top: calc(-1 * var(--space-2)); }
.to-chip--mail svg { color: var(--text-secondary); }
.wq-tabs { margin-bottom: var(--space-2); }
.wq-list { list-style: none; margin: 0; padding: 0; border: var(--border-width) solid var(--border); border-radius: var(--radius-input); }
.wq-row { display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px; border-bottom: var(--border-width) solid var(--border); }
.wq-row:last-child { border-bottom: 0; }
.wq-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wq-who .field-help { margin: 0; }
.wq-on { display: inline-flex; align-items: center; gap: 4px; color: var(--success-text); font-size: var(--label-size); font-weight: 700; }
.wq-feeds { padding-top: var(--space-4); border-top: var(--border-width) solid var(--border); display: flex; flex-direction: column; gap: var(--space-4); }
.wq-big { font-size: var(--section-size); line-height: var(--section-lh); font-weight: 700; margin: 0; }
.rf-invited { margin: 0; }
.unit-words .grid-2 { gap: var(--space-2) var(--space-4); }

/* m299: an offer priced line by line (the supplier's "Your offer"), how every offer is paid, and Compare › Line by line (the
   buyer's): the summary cards, the matrix with the lowest price on each line, an offer's lines on the Offers tab. */
.ol-basis { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: var(--border-width) solid var(--accent-line); border-radius: var(--radius-input); background: var(--accent-surface); }
.ol-basis .field-help { margin: 0; }
.ol-cur { max-width: 300px; }
.ol-table { min-width: 720px; }
.ol-table .ol-what { min-width: 260px; }
.ol-table .ol-doc { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: var(--helper-size); color: var(--accent-deep); }
.ol-no { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--helper-size); color: var(--text-secondary); cursor: pointer; }
.ol-note { margin-top: 6px; }
.ol-note-text { margin: 6px 0 0; font-size: var(--helper-size); color: var(--text-secondary); }
.ol-note-add { display: block; margin-top: 4px; font-size: var(--helper-size); }
.ol-price { width: 150px; }
.ol-price-in { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
#offer-form { min-width: 0; }
.ol-err-row td { padding-top: 0; border-top: 0; }
.ol-err-row .field-error { margin: 0; }
.ol-line-total { width: 130px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ol-row--no td { color: var(--text-secondary); }
.ol-row--no .ol-line-total { font-weight: 400; }
.ol-row--bad td { background: var(--danger-surface); }
.ol-was { display: block; width: max-content; margin: 4px 0 0 auto; }
.ol-sum { margin: var(--space-2) 0 0; font-weight: 700; }
.ol-total { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; padding: 12px 14px; border: var(--border-width) solid var(--border); border-radius: var(--radius-input); background: var(--surface-subtle); }
.ol-total-label { display: block; font-size: var(--helper-size); font-weight: 700; color: var(--text-secondary); }
.ol-total strong { font-size: var(--section-size); line-height: var(--section-lh); font-variant-numeric: tabular-nums; }
.ol-total .field-help { margin: 0; }
.ol-adv-box { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.ol-revised .ol-changes { margin: 6px 0 0; padding-left: 18px; }
.ol-if { margin-top: var(--space-4); }
.cmp-switch { margin-top: var(--space-2); }
.cmp-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.cmp-card { display: flex; gap: 14px; padding: 16px 18px; border: var(--border-width) solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.cmp-card strong { display: block; }
.cmp-card .field-help { margin: 0; }
.cmp-card-icon { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-input); background: var(--surface-subtle); color: var(--text-secondary); }
.cmp-card-label { display: block; font-size: var(--micro-size); font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.cmp-wrap { position: relative; overflow-x: auto; border: var(--border-width) solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.cmp-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: var(--label-size); }
.cmp-table th, .cmp-table td { padding: 12px 16px; vertical-align: top; text-align: left; border-top: var(--border-width) solid var(--border); }
.cmp-table thead th { border-top: 0; background: var(--surface-subtle); }
.cmp-table td, .cmp-table thead th + th { border-left: var(--border-width) solid var(--border); }
.cmp-line-h { width: 30%; vertical-align: bottom !important; font-size: var(--micro-size); font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.cmp-who { display: flex; align-items: center; gap: 10px; }
.cmp-who .avatar { flex: none; width: 36px; height: 36px; background: var(--accent-surface); color: var(--accent-deep); font-weight: 800; }
.cmp-who strong { display: block; font-size: var(--body-size); }
.cmp-who .field-help { margin: 0; }
.cmp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cmp-line { font-weight: 400; }
.cmp-line .field-help { display: block; margin: 2px 0 0; }
.cmp-line a { display: inline-flex; align-items: center; gap: 4px; font-size: var(--helper-size); font-weight: 700; color: var(--accent-deep); }
.cmp-n { margin-right: 6px; font-weight: 700; color: var(--text-secondary); }
.cmp-cell { text-align: right !important; font-variant-numeric: tabular-nums; }
.cmp-cell strong { font-size: var(--body-size); }
.cmp-amt { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.cmp-cell--low { background: var(--success-surface); }
.cmp-cell--low .cmp-sub { color: var(--success-text); }
.cmp-low { margin-right: auto; padding: 1px 8px; border-radius: 999px; background: var(--surface); color: var(--success-text); font-size: var(--micro-size); font-weight: 700; }
.cmp-sub { display: block; font-size: var(--helper-size); color: var(--text-secondary); }
.cmp-for { font-style: italic; }
.cmp-note { display: flex; gap: 6px; justify-content: flex-start; margin-top: 6px; text-align: left; font-size: var(--micro-size); color: var(--text-secondary); }
.cmp-note svg { flex: none; margin-top: 2px; }
.cmp-cell--no, .cmp-cell--none { text-align: left !important; color: var(--text-secondary); }
.cmp-cell--none { font-size: var(--helper-size); }
.cmp-no { display: block; font-weight: 700; }
.cmp-table tfoot th { font-size: var(--helper-size); font-weight: 700; color: var(--text-secondary); }
.cmp-foot { font-variant-numeric: tabular-nums; }
.cmp-row-total th, .cmp-row-total td { background: var(--surface-subtle); }
.cmp-total { font-size: var(--section-size); }
.cmp-act { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cmp-warn p { margin: 4px 0 0; }
.cmp-warn .form-actions { margin-top: var(--space-2); }
.offer-lines { list-style: none; margin: var(--space-2) 0 0; padding: 0; border-top: var(--border-width) solid var(--border); }
.offer-lines li { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: 6px 0; border-bottom: var(--border-width) solid var(--border); font-size: var(--helper-size); }
.offer-line-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.offer-line-note { flex-basis: 100%; margin: 0; }
.rq-offer-toggle { display: block; margin-top: 2px; font-size: var(--helper-size); }
.rq-offer-lines { padding: 0 12px 10px; }

/* m300: one layout for every list (Suppliers, Customers, Requests, Offers, Orders, Invoices): the search on the right of the
   head, the filters of a card list on one line under the title, and a list card's tabs and Sort on one line. A table in a list
   card keeps the card's inner margin, as its rows do; its rows are ruled like the card's other rows. */
.mr-list > .set-table { margin: 0; }
.mr-list > .set-table th, .mr-list > .set-table td { padding: var(--space-3) var(--space-2); border-bottom: var(--border-width) solid var(--border); }
.mr-list > .set-table th:first-child, .mr-list > .set-table td:first-child { padding-left: var(--space-4); }
.mr-list > .set-table th:last-child, .mr-list > .set-table td:last-child { padding-right: var(--space-4); }
.rcv-bar { margin-bottom: var(--space-4); }
@media (max-width: 640px) {
  .mr-head .mr-tools, .mr-head .mr-search, .mr-head .mr-search .input { width: 100%; }
  .list-filters .field { min-width: 0; flex: 1 1 140px; }
}
.rcv-bar .mr-bar { border-bottom: 0; }

/* m301: the purchase order — from the offer selected, as the board "An awarded offer → a purchase order" draws it: the lines as
   offered with the total under them, the delivery as an address with Change beside it, how it is paid in a box, the order and
   what happens next at the side; on the order page, its delivery and how it is paid; the payment of an unpaid order. */
.po-selected-note { margin-bottom: var(--space-4); }
.po-table td:last-child { white-space: nowrap; }
.po-table .chip { margin-left: 4px; }
.po-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-3) var(--space-2) 0;
  border-top: var(--border-width) solid var(--border-strong); font-variant-numeric: tabular-nums; }
.po-total strong { font-size: var(--section-size); }
.po-kv { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) auto; gap: var(--space-3); align-items: start;
  padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--border); }
.po-kv > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.po-address { overflow-wrap: anywhere; }
.po-paybox { padding: var(--space-3); border: var(--border-width) solid var(--accent-line); border-radius: var(--radius-card); background: var(--accent-surface); }
.po-paybox p { margin: 4px 0 0; }
.po-fee { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3) 0 0; }
.po-sum { display: flex; flex-direction: column; gap: 6px; padding-top: var(--space-2); font-variant-numeric: tabular-nums; }
.po-sum > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.po-sum-total { padding-top: 6px; border-top: var(--border-width) solid var(--border-strong); }
.po-actions { justify-content: flex-end; }
.po-facts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--space-3); margin: var(--space-2) 0; font-size: var(--label-size); }
.po-facts dt { color: var(--text-secondary); margin: 0; }
.po-facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.po-steps { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: 6px; font-size: var(--label-size); }
.po-selected .chip { align-self: flex-start; }
.po-prompt { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.po-onorder .po-note, .po-onorder .summary-money span:last-child { overflow-wrap: anywhere; }
.po-note { margin: var(--space-2) 0 0; }
@media (max-width: 640px) {
  .po-kv { grid-template-columns: minmax(0, 1fr); }
  .po-actions .btn { flex: 1 1 auto; }
}

/* m302: Join SELYVO — as the approved boards draw it (canvas version 53): the first questions as cards that are pressed, the
   registration they make at the side; the sign-in and its six-digit code; the business found in its register with "That is
   us"; what you sell; who buys; and you are in. Then the profile's "What you do here" and the console's Onboarding. */
.join-page { display: flex; flex-direction: column; gap: var(--space-5); }
.join-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.join-eyebrow { margin: 0; font-size: var(--helper-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.join-saved { margin: 0; }
.join-head .lede { margin-bottom: 0; }
.join-split { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.join-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.join-aside { flex: 1 1 300px; max-width: 420px; display: flex; flex-direction: column; gap: var(--space-4); }
.join-q { display: flex; flex-direction: column; gap: var(--space-3); }
.join-q .form-title { font-size: 20px; }
.join-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--space-3); }
.join-opt { min-height: 96px; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); text-align: left;
  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-card); background: var(--surface); color: var(--text);
  font: inherit; cursor: pointer; }
.join-opt strong { font-size: 17px; }
.join-opt span { color: var(--text-secondary); font-size: var(--label-size); }
.join-opt:hover { border-color: var(--accent); }
.join-opt[aria-pressed="true"] { border-color: var(--accent-deep); background: var(--accent-surface); box-shadow: 0 0 0 3px var(--accent-line); }
.join-go { align-items: center; }
.join-plan { flex: 1 1 300px; max-width: 420px; display: flex; flex-direction: column; gap: var(--space-3); }
.join-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.join-chip { padding: 4px var(--space-3); border-radius: 999px; background: var(--accent-surface); color: var(--accent-deep); font-weight: 700; font-size: var(--label-size); }
.join-chip--me { background: var(--surface); border: var(--border-width) solid var(--accent-line); }
.join-plan-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.join-plan-steps li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: var(--border-width) solid var(--border); border-radius: var(--radius-card); }
.join-plan-n { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-surface); color: var(--accent-deep); font-weight: 800; font-size: var(--helper-size); }
.join-plan-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.join-plan-title { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.join-plan-title .field-help, .join-plan-body .field-help { margin: 0; }
.join-because { align-self: flex-start; padding: 1px var(--space-2); border-radius: 999px; background: var(--warning-surface); color: var(--warning-text);
  font-size: var(--micro-size); font-weight: 700; }
.join-total { margin: 0; padding-top: var(--space-3); border-top: var(--border-width) solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.join-total .field-help { margin: 0; }
.join-steps { margin-bottom: 0; }
.join-form { display: flex; flex-direction: column; gap: var(--space-4); }
.join-form > div > .form-title + .field-help { margin-top: var(--space-1); }
.join-terms { align-items: flex-start; }
.join-terms a { margin-left: var(--space-1); }
.join-terms--bad { color: var(--danger-text); }
.join-nav { justify-content: flex-end; flex-wrap: wrap; align-items: center; }
.join-nav .btn-secondary { margin-right: auto; }
.join-note { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5); }
.join-note .form-subtitle { margin: 0; color: var(--text); }
.join-code { display: flex; flex-direction: column; gap: var(--space-2); border-color: var(--accent-line); background: var(--accent-surface); }
.join-code .form-subtitle { margin: 0; color: var(--text); }
.join-code--small { padding: var(--space-4); }
.join-code-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.join-code-input { width: 9.5em; flex: 0 0 auto; font-size: 20px; letter-spacing: .3em; font-variant-numeric: tabular-nums; text-align: center; }
.join-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--space-4); }
.join-wide { grid-column: 1 / -1; }
.join-numrow { display: flex; gap: var(--space-2); align-items: center; }
.join-numrow .input { flex: 1 1 auto; min-width: 0; }
.join-number { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.join-found { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--success);
  border-radius: var(--radius-card); background: var(--success-surface); }
.join-found--wait { border-color: var(--border); background: var(--surface-subtle); }
.join-found-head { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.join-found-head .form-subtitle { margin: 0; color: var(--success-text); }
.join-found-head .field-help { margin: 0 0 0 auto; }
.join-tick { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--success); color: var(--text); flex: none; }
.join-tick--big { width: 44px; height: 44px; }
.join-dl { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: 0; font-size: var(--label-size); }
.join-dl dt { color: var(--text-secondary); margin: 0; }
.join-dl dd { margin: 0; overflow-wrap: anywhere; }
.join-inactive { margin: 0; color: var(--warning-text); font-weight: 600; font-size: var(--label-size); }
.join-confirmed { margin: 0; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; color: var(--success-text); font-weight: 700; }
.join-us { align-items: center; flex-wrap: wrap; }
.join-manual { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-2); border-top: var(--border-width) solid var(--border); }
.join-manual .form-subtitle { margin: 0; color: var(--text); }
.join-uploaded { display: inline-flex; gap: var(--space-1); align-items: center; color: var(--success-text); }
.join-cats { display: flex; flex-direction: column; gap: var(--space-2); }
.join-cats .form-subtitle { margin: 0; color: var(--text); }
.join-cats .field-help { margin: 0; }
.join-invite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: var(--space-3); align-items: end; margin: 0;
  padding: var(--space-3) 0; border: 0; border-bottom: var(--border-width) solid var(--border); }
.join-invite > .field:nth-of-type(3), .join-invite > .join-approves { grid-column: 1 / 3; }
.join-invite-rm { grid-column: 3; grid-row: 1; align-self: end; }
.join-approves { align-items: flex-start; }
.join-add { align-self: flex-start; }
.join-team { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.join-team li { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; color: var(--success-text); }
.join-team .field-help { margin: 0; }
.join-welcome { display: flex; flex-direction: column; gap: var(--space-4); }
.join-welcome-head { display: flex; gap: var(--space-4); align-items: flex-start; }
.join-welcome-head .lede { margin: 0; }
.join-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--space-2); }
.join-check--ok { padding: var(--space-2) var(--space-3); border-radius: var(--radius-card); background: var(--success-surface); color: var(--success-text); font-weight: 600; font-size: var(--label-size); }
.join-check--ok::before { content: "\2713"; margin-right: var(--space-2); }
.join-verified { margin: 0; color: var(--success-text); font-weight: 700; }
.join-next-wrap { display: flex; flex-direction: column; gap: var(--space-3); }
.join-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--space-3); }
.join-next-card { display: flex; flex-direction: column; gap: var(--space-1); text-align: left; font: inherit; color: var(--text); cursor: pointer; padding: var(--space-5); }
.join-next-card:hover { border-color: var(--accent); }
.join-next-card .field-help { margin: 0; }
@media (max-width: 640px) {
  .join-invite { grid-template-columns: minmax(0, 1fr) auto; }
  .join-invite > .field, .join-invite > .join-approves { grid-column: 1 / 2; }
  .join-invite-rm { grid-column: 2; }
  .join-dl { grid-template-columns: minmax(0, 1fr); }
  .join-code-input { width: 100%; }
  .join-nav .btn { flex: 1 1 auto; }
}
/* The profile's "What you do here" (m302). */
#does-panel .ts-seg { margin-top: var(--space-2); }
/* The console's Onboarding (m302): Registers, Waiting for a decision, Proof to check. */
.onb-tabs { margin-bottom: var(--space-4); }
.onb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.onb-head .field-help { margin: var(--space-1) 0 0; max-width: 72ch; }
.onb-table td { vertical-align: top; }
.onb-row--on td { background: var(--accent-surface); }
.onb-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--helper-size); }
code.onb-mono { padding: 1px 6px; border-radius: 6px; background: var(--surface-subtle); }
.onb-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: var(--space-4); margin-top: var(--space-4); align-items: start; }
.onb-list { display: flex; flex-direction: column; gap: var(--space-3); }
.onb-case { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--border); border-radius: var(--radius-card); }
.onb-case-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.onb-case-name { margin: 0; font-size: 17px; }
.onb-case-head .field-help { margin: 2px 0 0; }
.onb-facts { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: 0; font-size: var(--label-size); }
.onb-facts dt { color: var(--text-secondary); margin: 0; }
.onb-facts dd { margin: 0; overflow-wrap: anywhere; }
.onb-file { display: inline-flex; gap: var(--space-1); align-items: center; }
.onb-none { margin: var(--space-3) 0; }
/* m303: an invoice WITHOUT A PURCHASE ORDER — New invoice › What it bills, the customer and its rule, the lines typed, the totals and
   the meter, what goes on the invoice; Business settings › Invoices without a PO; the "No purchase order" mark. */
.mr-pill--nopo { background: var(--surface-subtle); color: var(--text); border: 1px solid var(--border); }
.np-bills { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--space-3); }
.np-bills legend { grid-column: 1 / -1; }
.np-bills .rq-choice { padding: var(--space-4); }
.np-pad { margin: 0 var(--space-5); }
.np-switch .frow > span { display: flex; flex-direction: column; gap: 2px; }
.np-switch .frow .field-help { margin: 0; }
/* m319: What this organisation does here — Accounting and Project management, each saying what it brings under its name. */
.bp-roles .frow > span { display: flex; flex-direction: column; gap: 2px; }
.bp-roles .frow .field-help { margin: 0; }
.bp-roles .frow { padding: 2px 0; }
.np-bills legend.form-title { margin-bottom: var(--space-2); }
.np-cust .field { margin-bottom: 0; }
.np-hits { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.np-hit { display: flex; gap: var(--space-3); align-items: center; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer;
          padding: var(--space-3); border: var(--border-width) solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.np-hit:hover, .np-hit:focus-visible { border-color: var(--accent-deep); background: var(--accent-surface); }
.np-none { margin: var(--space-2) 0 0; }
.np-avatar { flex: none; width: 40px; height: 40px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
             background: var(--accent-surface); color: var(--accent-deep); font-weight: 800; font-size: 15px; }
.np-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.np-who .field-help { margin: 0; }
.np-chosen { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border: 2px solid var(--accent-deep);
             border-radius: var(--radius-card); background: var(--accent-surface); }
.np-cust > .field-help { margin: var(--space-2) 0; }
.np-rule { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); font-size: var(--label-size); line-height: 1.45; }
.np-rule svg { flex: none; margin-top: 2px; }
.np-rule--ok { background: var(--success-surface); color: var(--success-text); }
.np-rule--no { background: var(--warning-surface); color: var(--warning-text); }
.np-lines { padding: 0; overflow: hidden; }
.np-lines-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-5) var(--space-5) var(--space-3); }
.np-cur { display: inline-flex; align-items: center; gap: var(--space-2); }
.np-cur .field-help { margin: 0; }
.np-cur .catpick { min-width: 96px; }
.np-grid { border-top: var(--border-width) solid var(--border); }
.np-row { display: grid; grid-template-columns: minmax(140px, 2.2fr) minmax(58px, .7fr) minmax(128px, 1.3fr) minmax(88px, 1fr) minmax(84px, .85fr) minmax(74px, .8fr) 32px;
          gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-5); border-bottom: var(--border-width) solid var(--border); }
.np-row-head { font-size: var(--micro-size); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); background: var(--surface-subtle); }
.np-row .input { min-width: 0; }
.np-num { text-align: right; }
.np-net { font-weight: 700; }
.np-del { width: 32px; height: 32px; }
.np-row-err { margin: 0; padding: var(--space-1) var(--space-5) var(--space-2); }
.np-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-5); background: var(--surface-subtle); }
.np-addline { border-style: dashed; }
.np-totals { display: grid; grid-template-columns: auto auto; gap: var(--space-1) var(--space-6); margin: 0; font-size: var(--label-size); }
.np-totals dt { color: var(--text-secondary); margin: 0; }
.np-totals dd { margin: 0; text-align: right; }
.np-totals .np-total { color: var(--text); font-weight: 800; }
.np-meter { padding: var(--space-3) var(--space-5) var(--space-4); }
.np-meter:empty { display: none; }
.np-bar { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.np-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent-deep); }
.np-bar--over span { background: var(--warning-fill); }
.np-meter-text { margin: var(--space-2) 0 0; }
.np-on-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--space-3); align-items: start; }
.np-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.np-actions .field-help { margin: 0; }
.np-actions-btns { display: inline-flex; align-items: center; gap: var(--space-4); margin-left: auto; }
.np-how p { margin: 0; }
.np-note { margin: var(--space-3) var(--space-5) 0; }
.np-inv .field-help { margin: 0; }
/* Business settings › Invoices without a PO (m303). */
.np-set-lede { margin-top: 0; }
.np-mode { align-items: center; flex-wrap: wrap; }
.np-mode-pick { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.np-mode-rest { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; color: var(--text-secondary); }
.np-mode-rest .catpick { min-width: 96px; }
.np-amt { width: 140px; text-align: right; }
.np-sups { margin: var(--space-2) calc(-1 * var(--space-5)) 0; border-top: var(--border-width) solid var(--border); }
.np-sup { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-5);
          border-bottom: var(--border-width) solid var(--border); }
.np-sup-head { font-size: var(--micro-size); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); background: var(--surface-subtle); }
.np-sup-amt { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); }
.np-sup-err { grid-column: 1 / -1; margin: 0; }
.np-sup-add { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-5); background: var(--surface-subtle); }
.np-sup-add .input { flex: 1 1 auto; }
#np-shits { padding-bottom: var(--space-2); }
#np-shits:empty { display: none; }
.np-recv-list { list-style: none; margin: 0; padding: 0; }
.np-recv-list li { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--border); }
.np-recv-list li:last-child { border-bottom: 0; }
.np-sees .np-rule { margin: 0; }
@media (max-width: 760px) {
  .np-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .np-row > input:first-child { grid-column: 1 / -1; }
  .np-row-head { display: none; }
  .np-net { text-align: left; }
  .np-sup { grid-template-columns: minmax(0, 1fr) auto; }
  .np-sup .np-who { grid-column: 1 / -1; }
}

/* m304: RULES FOR SETS OF SUPPLIERS AND CUSTOMERS — the bottom of Time sheets and of Expenses: the rules as cards (one the
   default), the suppliers or customers chosen for each, the dropdown that chooses them; beside them who follows which and what
   a party reads. Tokens only. */
.rs-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: var(--space-4); align-items: start; margin-top: var(--space-4); }
.rs-rules { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.rs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.rs-head .form-title { margin: 0; }
.rs-head .field-help { margin: 2px 0 0; max-width: 680px; }
.rs-add { border-style: dashed; }
.rs-kicker { margin: 0; font-size: var(--micro-size); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.rs-rule { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--border);
           border-radius: var(--radius-card); background: var(--surface); }
.rs-rule--open { border: 2px solid var(--accent-deep); background: var(--surface-subtle); }
.rs-rule-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.rs-rule-title { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; min-width: 0; }
.rs-rule-h { margin: 0; font-size: 17px; font-weight: 800; }
.rs-default { padding: 2px 10px; border-radius: 999px; background: var(--accent-deep); color: var(--text-on-accent); font-weight: 700; font-size: var(--micro-size); }
.rs-sum { color: var(--text-secondary); font-size: var(--helper-size); }
.rs-rule-acts { display: flex; gap: 6px; align-items: center; }
.rs-form { display: flex; flex-direction: column; gap: var(--space-3); }
.rs-form .ts-fs { margin: 0; }
.rs-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.rs-modes .pl-radio { padding: 10px 12px; }
.rs-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
/* Who checks / reviews: a row per choice, its picker beside the words (wrapping under them when the column is narrow). */
.rs-check .pl-radio + .pl-radio { margin-top: 8px; }
.rs-stack { display: flex; flex-direction: column; gap: 6px; }
.rs-form .ts-check { justify-content: flex-start; }
.rs-for { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--border-width) solid var(--border); }
.rs-defline { margin: 0; justify-content: flex-start; }
.rs-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.rs-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 12px; border-radius: 999px; background: var(--accent-surface);
           color: var(--accent-deep); font-weight: 700; font-size: var(--helper-size); min-height: 36px; }
.rs-chip-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: inherit; font: 700 16px var(--font-ui); cursor: pointer; }
.rs-chip-x:hover, .rs-chip-x:focus-visible { background: var(--surface); }
.rs-choose-btn { min-height: 40px; }
.rs-panel { max-width: 560px; border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-card); background: var(--surface);
            box-shadow: 0 8px 24px var(--scrim); overflow: hidden; }
.rs-find { padding: var(--space-2); border-bottom: var(--border-width) solid var(--border); }
.rs-find .input { width: 100%; box-sizing: border-box; }
.rs-opts { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; }
.rs-opts > .field-help { margin: 0; padding: var(--space-3); }
.rs-opt { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 44px; padding: 8px 12px;
          border: 0; border-top: var(--border-width) solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rs-opt:first-child { border-top: 0; }
.rs-opt:hover, .rs-opt:focus-visible { background: var(--accent-surface); }
.rs-opt--on { background: var(--surface-subtle); }
.rs-opt--on .rs-opt-name { font-weight: 700; }
.rs-box { width: 18px; height: 18px; border: var(--border-width) solid var(--border-strong); border-radius: 4px; display: inline-flex; align-items: center;
          justify-content: center; font-size: 13px; font-weight: 800; color: var(--accent-deep); background: var(--surface); }
.rs-opt--on .rs-box { border-color: var(--accent-deep); background: var(--accent-surface); }
.rs-opt-name { min-width: 0; overflow-wrap: anywhere; }
.rs-opt-where { font-size: var(--micro-size); color: var(--text-secondary); }
.rs-opt-where--moves { color: var(--warning-text); font-weight: 700; }
.rs-panel-foot { margin: 0; padding: var(--space-2) var(--space-3); border-top: var(--border-width) solid var(--border); }
.rs-makedef { align-self: flex-start; }
.rs-km { margin: 0; padding-top: var(--space-3); border-top: var(--border-width) solid var(--border); }
.rs-acts { justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding-top: var(--space-3);
           border-top: var(--border-width) solid var(--border); }
.rs-acts .field-help { margin: 0; }
.rs-saved { margin: 0; }
.rs-invalid { outline: 2px solid var(--warning); outline-offset: 4px; border-radius: 6px; }
.rs-aside { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.rs-side { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rs-side .section-title { margin: 0; }
.rs-side .field-help { margin: 0; }
.rs-follows { border: var(--border-width) solid var(--border); border-radius: var(--radius-card); overflow: visible; }
.rs-follow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 160px); gap: 10px; align-items: center; padding: 8px 12px;
             border-top: var(--border-width) solid var(--border); font-size: var(--helper-size); }
.rs-follows--time .rs-follow { grid-template-columns: minmax(0, 1fr) minmax(150px, 160px) 64px; gap: 8px; }   /* "Default (Rule 1)" whole */
.rs-follow--head { border-top: 0; background: var(--surface-subtle); font-size: var(--micro-size); font-weight: 700; color: var(--text-secondary);
                   text-transform: uppercase; letter-spacing: .05em; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.rs-follow-name { min-width: 0; overflow-wrap: anywhere; }
.rs-follow-pick .catpick { width: 100%; }
.rs-sees { padding: var(--space-3) 14px; border: var(--border-width) solid var(--accent-line); border-radius: var(--radius-card); background: var(--accent-surface); }
.rs-sees p { margin: 0; }
.rs-sees p + p { margin-top: 6px; }
@media (max-width: 1100px) {
  .rs-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .rs-modes, .rs-two { grid-template-columns: minmax(0, 1fr); }
  .rs-follows--time .rs-follow, .rs-follow { grid-template-columns: minmax(0, 1fr); }
  .rs-follow--head { display: none; }
}

/* m305: CUSTOMERS — A CATEGORY FILTER (the board "Customers — a category filter"): a number beside each option of a dropdown and a
   line under its list; the category chosen above the rows, with the way back to all; Bought from you in, the chosen one marked. */
.catpick-opt--count { display: flex; align-items: baseline; gap: var(--space-3); }
.catpick-opt--count .catpick-name { flex: 1 1 auto; min-width: 0; }
.catpick-count { flex: none; margin-left: auto; color: var(--text-secondary); font-size: var(--label-size); font-variant-numeric: tabular-nums; }
.catpick-opt--zero .catpick-name { color: var(--text-secondary); font-weight: 600; }
.list-filters .field.cust-catfield { min-width: 250px; }
.catpick-foot { margin: 6px 0 0; padding: 8px 10px 4px; border-top: var(--border-width) solid var(--border); font-size: var(--micro-size);
                color: var(--text-secondary); }
.sup-cat--on { background: var(--accent-surface); color: var(--accent-deep); box-shadow: inset 0 0 0 1px var(--accent); }
.sup-cat--by { background: var(--surface); box-shadow: none; border: 1px dashed var(--accent); }
.sup-cat--more { background: transparent; color: var(--text-secondary); padding-left: 2px; padding-right: 2px; }
.cust-catbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--space-3); padding: 12px 16px; background: var(--surface-subtle);
               border-bottom: var(--border-width) solid var(--border); font-size: var(--helper-size); }
.cust-catbar .field-help { display: inline; margin: 0; }
.cust-catchip { min-height: 32px; padding: 0 12px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-surface);
                color: var(--accent-deep); font: inherit; font-size: var(--label-size); font-weight: 700; cursor: pointer; }
.cust-catchip:hover { background: var(--surface); }
/* Every column a share of the width (minmax(0, …)), the buttons' too: each row is its own grid, so a column sized by its content
   (auto, or a plain fr) was as wide as THAT row needed — the head and the rows did not line up, nor the rows with each other. */
.mr-row.cust-cols { grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr) minmax(0, 1.65fr) minmax(0, .5fr) minmax(0, .9fr) minmax(0, 1.1fr)
                    minmax(0, .6fr) minmax(0, 1.1fr) minmax(0, 2.4fr); }
.mr-row.cust-cols.cust-find { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 2.4fr) minmax(0, .8fr) minmax(0, 1.4fr); }
.mr-row.cust-cols .sup-cats { min-height: 0; }
.mr-row.cust-cols .cust-actions { flex-wrap: wrap; }
@media (max-width: 900px) {
  .mr-row.cust-cols, .mr-row.cust-cols.cust-find { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mr-row.cust-cols .cust-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
/* m305: SUPPLIERS AS A LIST — Cards or List, each person's choice; the rows laid out as Customers'. */
.viewtoggle--text .iconbtn { width: auto; min-width: var(--control-h); padding: 0 12px; gap: 6px; font: inherit; font-size: var(--label-size); font-weight: 600;
                             border: var(--border-width) solid var(--border); background: var(--surface); }
.viewtoggle--text .iconbtn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-surface); color: var(--accent-deep); font-weight: 700; }
.sup-viewtoggle { align-self: flex-end; }
.sup-list { margin-bottom: var(--space-4); }
.mr-row.sup-cols { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.1fr) minmax(0, 1.9fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, .6fr)
                   minmax(0, 2.6fr); }
.mr-row.sup-cols .cust-actions { flex-wrap: wrap; }
.sup-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sup-name { font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.sup-name:hover, .sup-name:focus-visible { color: var(--accent-deep); text-decoration: underline; }
/* m342: a business named on an order, an offer or an invoice opens its profile — its name as the text around it, underlined on hover. */
.org-link { color: inherit; font-weight: inherit; text-decoration: none; overflow-wrap: anywhere; }
.org-link:hover, .org-link:focus-visible { color: var(--accent-deep); text-decoration: underline; }
.sup-who .sup-badges { min-height: 0; }
.mr-row.sup-cols .sup-cats { min-height: 0; }
.mr-row.sup-cols .sup-block { white-space: nowrap; }
@media (max-width: 900px) {
  .mr-row.sup-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mr-row.sup-cols .cust-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
/* m306: THE CUSTOMER'S PROFILE AND THE SUPPLIER'S PROFILE — the boards approved 9 Oct (18:00, 19:00): a banner with the company over
   it, the tiles, the tabs, and a main column with a side column. Every colour a token. */
.prof-head { background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-card); overflow: hidden;
             margin-bottom: var(--space-4); }
.prof-banner { height: 112px; background: linear-gradient(120deg, var(--navy) 0%, var(--accent-deep) 45%, var(--accent) 100%); }
.prof-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.prof-id { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; padding: 0 28px 22px; }
.prof-logo { flex: none; margin-top: -44px; width: 96px; height: 96px; border-radius: 12px; background: var(--surface);
             border: var(--border-width) solid var(--border); box-shadow: 0 6px 18px rgba(7, 28, 60, .10); display: grid; place-items: center;
             color: var(--accent-deep); font-size: 32px; font-weight: 800; overflow: hidden; }
.prof-logo img { width: 100%; height: 100%; object-fit: cover; }
.prof-who { flex: 1 1 420px; min-width: 0; padding-top: 14px; }
.prof-title { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.prof-title h1 { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.prof-verified { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--success-surface);
                 color: var(--success-text); font-size: 13px; font-weight: 700; }
.prof-lede { margin: 6px 0 0; color: var(--text-secondary); max-width: 760px; }
.prof-meta { margin: 6px 0 0; font-size: var(--label-size); color: var(--text-secondary); }
.prof-meta strong { color: var(--text); }
.prof-acts { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); padding-top: 18px; }
.prof-acts-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }
.prof-notyet { margin: 0 0 var(--space-4); color: var(--text-secondary); }
.ptiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.ptile { min-width: 0; padding: 14px 16px; background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-card); }
.ptile-label { display: block; font-size: var(--micro-size); font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.ptile-value { display: block; font-size: 24px; line-height: 1.3; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.ptile-sub { display: block; font-size: var(--helper-size); color: var(--text-secondary); }
.ptile--reviews .ptile-value { color: var(--success-text); }
.ptile--new .ptile-value { font-size: 18px; }
.ptile .mr-pill { font-size: 15px; }
.prof-tabs { margin-bottom: var(--space-4); gap: 4px; flex-wrap: wrap; white-space: normal; overflow: visible; }
.prof-tabs .tab { display: inline-flex; align-items: center; min-height: 44px; height: auto; padding: 0 16px; border-bottom-width: 3px; font-size: 15px; text-decoration: none; }
.prof-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.prof-main, .prof-aside { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.prof-card { display: flex; flex-direction: column; gap: var(--space-3); padding: 18px 20px; background: var(--surface);
             border: var(--border-width) solid var(--border); border-radius: var(--radius-card); }
.prof-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.prof-card h2 { margin: 0; font-size: 17px; font-weight: 800; }
.prof-card p { margin: 0; }
.prof-bars { display: flex; flex-direction: column; gap: 10px; }
.prof-bar { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) minmax(0, 1.4fr); gap: var(--space-3); align-items: center; }
.prof-bar-name { font-weight: 700; overflow-wrap: anywhere; }
.prof-bar-track { height: 10px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.prof-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.prof-bar-fig { font-size: var(--helper-size); color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; }
.prof-orders { margin: 0; }
.prof-orders .mr-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1fr); padding-left: 0; padding-right: 0; }
.prof-orders a { font-weight: 700; color: var(--accent-deep); }
.prof-card .linkbtn { align-self: flex-start; }
.prof-card-head .linkbtn { align-self: auto; }
.prof-what { overflow-wrap: anywhere; }
.prof-offers { display: flex; flex-direction: column; }
.prof-offer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0;
              border-top: var(--border-width) solid var(--border); }
.prof-offer:first-child { border-top: 0; padding-top: 0; }
.prof-offer strong, .prof-offer .field-help { display: block; }
.prof-offer-end { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.prof-seen { color: var(--success-text); font-weight: 600; }
.prof-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--space-4); margin: 0; }
.prof-kv dt { color: var(--text-secondary); }
.prof-kv dd { margin: 0; font-weight: 600; }
.prof-kv dd.prof-late { color: var(--danger-text); }
.prof-chips { min-height: 0; }
.cust-row { cursor: pointer; }
.cust-name { font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.cust-name:hover, .cust-name:focus-visible { color: var(--accent-deep); text-decoration: underline; }
@media (max-width: 1100px) {
  .ptiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prof-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ptile-value { font-size: 19px; }
  .prof-id { padding: 0 var(--space-4) var(--space-4); }
  .prof-acts { align-items: flex-start; padding-top: 0; }
  .prof-acts-row { justify-content: flex-start; }
  .prof-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .prof-bar-fig { grid-column: 1 / -1; text-align: left; }
  .prof-orders .mr-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .prof-offer-end { align-items: flex-start; }
}
/* m306: ON A PHONE THE TOP BAR FITS THE SCREEN — it was 590 px wide at 390 (ROUND-m305, "found, not fixed"): the wordmark and seven
   controls side by side. The controls sit closer, and under 520 px the mark alone names the product (its link says so). */
@media (max-width: 767px) {
  .shell-row--top { gap: var(--space-2); }
  .shell-actions { gap: 0; }
  .shell-actions .iconbtn:not(.lang-btn) { width: 40px; }
}
@media (max-width: 520px) {
  .brand-word { display: none; }
}

/* m307: QUALIFICATION AND THE FIRST RATING — the boards "Join SELYVO — qualification, a question at a time", "— you are in: the first
   rating", "Console — onboarding questions and the first rating" (version 53) and the two colours of the supplier's profile (version
   67): the first rating, from the questionnaires, in violet; the rating from experience, customers' reviews, in green. */
.frate { display: inline-flex; align-items: center; gap: 4px; padding: 1px var(--space-2); border-radius: 999px; background: var(--violet-surface);
  color: var(--violet); font-weight: 750; font-size: var(--label-size); line-height: 20px; white-space: nowrap; }
.frate--big { font-size: 16px; padding: 2px var(--space-3); }
.meta .frate, .sup-badges .frate, .fd-who .frate, .req-row .frate, .wq-who .frate, .prof-title .frate { margin-left: var(--space-1); }
.ptile--first .ptile-value { color: var(--violet); }
.ptile--first .ptile-value .frate { font-size: 20px; padding: 2px var(--space-3); white-space: normal; max-width: 100%; line-height: 1.3; border-radius: 12px; }   /* a tile is ~170 px on a phone */
.prof-legend { margin: calc(-1 * var(--space-2)) 0 0; color: var(--text-secondary); font-size: var(--helper-size); }
.qual-q { display: flex; flex-direction: column; gap: var(--space-3); }
.qual-q-top { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.qual-q-top .field-help { margin: 0; }
.qual-stopnote { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-input); background: var(--warning-surface); color: var(--warning-text);
  font-size: var(--label-size); }
.qual-opts { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.qual-opt { min-height: 0; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.qual-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--text); }
.qual-opt-text span { color: var(--text-secondary); font-size: var(--label-size); }
.qual-pts { flex: 0 0 auto; padding: 0 var(--space-2); border-radius: 999px; background: var(--accent-surface); color: var(--accent-deep); font-weight: 750;
  font-size: var(--label-size); line-height: 22px; display: inline-block; }
.qual-pts--minus { background: var(--warning-surface); color: var(--warning-text); }
.qual-pts--stop { background: var(--danger-surface); color: var(--danger-text); }
.qual-named, .qual-fields { grid-column: 1 / -1; }
.qual-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--space-3); }
.qual-list { display: flex; flex-direction: column; gap: var(--space-3); }
.qual-refs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.qual-refs li { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-3);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-card); }
.qual-refform { display: flex; flex-direction: column; gap: var(--space-3); }
.qual-refrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--space-3); }
.qual-proof { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--border-width) solid var(--border); }
.qual-sub { margin: var(--space-2) 0 0; font-size: 16px; }
.qual-proofs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.qual-proofs li { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; padding: var(--space-3);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-card); background: var(--surface-subtle); }
.qual-proof-add { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.qual-until { width: auto; }
.qual-file { position: relative; cursor: pointer; }
.qual-ok { color: var(--success-text); font-weight: 700; }
.qual-late { color: var(--danger-text); font-weight: 700; }
.qual-plus { color: var(--violet); font-weight: 750; white-space: nowrap; }
.qual-side { gap: var(--space-4); }
.qual-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); counter-reset: none; }
.qual-steps li { display: flex; gap: var(--space-2); align-items: flex-start; }
.qual-steps .step-n { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-subtle); color: var(--text-secondary); font-weight: 800; font-size: var(--micro-size); }
.qual-steps li.qual-done .step-n { background: var(--success-surface); color: var(--success-text); }
.qual-steps li.qual-now .step-n { background: var(--accent-deep); color: var(--text-on-accent); }
.qual-step-text { flex: 1 1 auto; min-width: 0; font-size: var(--label-size); }
.qual-step-text strong { font-weight: 650; }
.qual-steps .linkbtn { flex: 0 0 auto; font-size: var(--label-size); }
.qual-legend { margin: 0; }
.qual-sofar .qual-score { margin: 0; font-size: 20px; }
.qual-score strong { color: var(--violet); }
.qual-scale { display: flex; flex-direction: column; gap: 4px; margin: var(--space-2) 0; }
.qual-scale-bar { height: 8px; border-radius: 999px; background: var(--surface-subtle); border: var(--border-width) solid var(--border); overflow: hidden; }
.qual-scale-fill { display: block; height: 100%; background: var(--violet-bar); }
.qual-scale-steps { display: flex; justify-content: space-between; gap: var(--space-2); color: var(--text-secondary); font-size: var(--micro-size); flex-wrap: wrap; }
.qual-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--label-size); }
.qual-lines li { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.qual-lines li span:first-child { min-width: 0; }
.qual-line-wait { color: var(--text-secondary); }
.qual-open { margin: var(--space-2) 0 0; font-size: var(--label-size); color: var(--text-secondary); }
.qual-big .qual-bignum { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.qual-big .qual-bignum strong { font-size: 44px; line-height: 1; color: var(--violet); }
.qual-preview { box-shadow: none; }
.qual-preview .sup-card-head { display: flex; gap: var(--space-3); align-items: center; }
.qual-preview .sup-card-head > div { display: flex; flex-direction: column; }
.qual-preview-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-2) 0; }
.prof-logo--sm { width: 40px; height: 40px; font-size: 15px; margin-top: 0; border-radius: 8px; box-shadow: none; }   /* no banner to overlap here */
.qual-card-head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.qual-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-5); }
.qual-card .qual-score { margin: 0; font-size: 18px; }
.qual-in-profile { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.qual-profile-top { display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; }
.qual-held .join-checks li::before { content: none; }
.qual-refpage { max-width: 720px; }
.onbq-kinds { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.onbq-kinds[aria-invalid="true"] .check { color: var(--danger-text); }
.onb-levels-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); align-items: center; margin: 0; }
.onb-levels-list dd { margin: 0; }
.input-num { width: 96px; }
/* The reference's two answers carry the business's name — a long name wraps inside its button rather than running out of it. */
.qual-refpage .form-actions { flex-wrap: wrap; justify-content: flex-start; }
.qual-refpage .form-actions .btn { white-space: normal; height: auto; min-height: var(--control-h); padding-top: var(--space-2); padding-bottom: var(--space-2);
  text-align: center; max-width: 100%; }
.qual-refpage .form-actions .btn-secondary { margin-right: 0; }
/* m308: what a level opens (Console › Onboarding › Levels) — a thing per row: what it is and for whom, the level that opens it, × to
   take it off; rating details; the sanctions list on Registers; what the level opens at the end of joining; what a first rating is made
   of, on a profile; paying by invoice at the checkout. */
.onb-opens, .onb-details, .onb-sanc { margin-top: var(--space-4); }
.onb-cases + .onb-cases { margin-top: var(--space-4); }   /* Waiting for a decision's sections (m307's and m308's), apart */
.opens-list { list-style: none; margin: var(--space-3) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.opens-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--border); border-radius: var(--radius-card); background: var(--surface-subtle); }
.opens-what { flex: 1 1 220px; min-width: 0; }
.opens-level { display: flex; align-items: center; gap: var(--space-2); flex: 0 1 280px; min-width: 0; }
.opens-level .catpick { flex: 1 1 auto; min-width: 0; }
.opens-add { max-width: 380px; margin-bottom: var(--space-3); }
.onb-details .grid-2 { margin-top: var(--space-3); }
.onb-sanc-list { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--border); }
.onb-sanc-list .form-subtitle { margin: 0; }
.onb-sanc-list p { margin: 0; }
.onb-sanc-list .input { width: 100%; box-sizing: border-box; }
.onb-sanc-list .form-actions { margin: 0; flex-wrap: wrap; justify-content: flex-start; row-gap: var(--space-2); }
.onb-sanc > .field { margin-top: var(--space-3); }
.qual-opens .qual-lines li > span:last-child { white-space: nowrap; }
.qual-opens-yes { color: var(--success-text); font-weight: 700; }
.rdet { margin: var(--space-2) 0 var(--space-4); }
.rdet-panel { margin-top: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: var(--violet-surface);
  display: flex; flex-direction: column; gap: var(--space-2); max-width: 640px; }
.rdet-panel p, .rdet-panel .form-actions { margin: 0; }
.rdet-panel .form-actions { justify-content: flex-start; }
.co-invoice .notice { margin: 0 0 var(--space-3); }
.join-vatrow { margin-top: var(--space-3); }
@media (max-width: 767px) {
  .opens-level { flex: 1 1 100%; }
  .rdet-panel { padding: var(--space-3); }
}
@media (max-width: 767px) {
  .qual-opt { flex-direction: column; }
  .qual-big .qual-bignum strong { font-size: 36px; }
  .onb-levels-list { grid-template-columns: 1fr; }
  .ptile--first .ptile-value .frate { font-size: 17px; }
  .qual-refpage .form-actions .btn { flex: 1 1 100%; }
}
/* m307, found by the look at 390 px (there since the rail became a row, m132/m186): below 900 px the rail is ONE row of links that
   scrolls sideways — the page's single column may not grow to that row's width (a `1fr` track grows to its content's widest line:
   1,208 px on Account settings, 2,982 in the console), and each link keeps its own width instead of being squeezed under the next. */
@media (max-width: 900px) {
  .catalogue { grid-template-columns: minmax(0, 1fr); }
  .side-links button { width: auto; flex: 0 0 auto; }
}
/* The console's top bar on a phone (486 px wide at 390): "Open the marketplace" above the language, the operator and Leave. */
@media (max-width: 520px) {
  .console-shell .shell-row--top { height: auto; min-height: var(--topbar-h); padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .console-shell .shell-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: var(--space-1); min-width: 0; }
}
/* m309: Order a service (FeedServiceOrder, canvas version 65) — the panel under a feed card or a service's page: a tinted band with
   the fields three to a row, where (two choices, the address beside them), the time sheets' rule, what it comes to with Cancel and
   Place the order in a box of its own, and how the supplier takes orders; then the order's answer, and the two settings' cards. */
.svo { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) 18px 18px; border-top: var(--border-width) solid var(--border);
  background: var(--surface-subtle); }
.svo--page { margin-top: var(--space-4); border-top: var(--border-width) solid var(--border); }
.svo .field { margin: 0; }
.svo .notice { margin: 0; }
.svo-skeleton { height: 120px; }
.svo-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); flex-wrap: wrap; }
.svo-title { margin: 0; font-size: 18px; font-weight: 800; }
.svo-price { color: var(--text-secondary); font-size: 14px; }
.svo-price strong { color: var(--text); }
.svo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
/* m327: the console's Things to watch — a mailbox SELYVO Mail has not finished, the line in the warning's colour, the mailboxes under it. */
.adm-watch-warn { color: var(--warning-text); font-weight: 700; }
.adm-watch-warn > svg { vertical-align: -3px; }
.adm-watch-list { margin: 4px 0 0; padding-left: 22px; font-weight: 400; font-size: 13px; color: var(--text-secondary); }
.adm-watch-list strong { color: var(--text); }
.svo-grid2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-3) var(--space-4); align-items: start; }
/* m327: What it is for, rich text — an editor as low as the panel allows, growing as it is written; on the order, as it was formatted. */
.svo-purpose-field .rt-area { height: auto; min-height: 88px; max-height: 320px; }
/* A rich editor refused: its frame red, as a box's (the area itself has no border of its own). */
.rt:has(> .rt-area.input-invalid) { border-color: var(--danger); }
.svo-purpose-view .rt-view, .svo-purpose-view .rt-plain { margin: 2px 0 0; }
.svo-purpose-view .rt-view > :last-child { margin-bottom: 0; }
.svo-ro { min-height: var(--control-h); display: flex; align-items: center; padding: 0 var(--space-3); border-radius: var(--radius-input);
  background: var(--border); color: var(--text-secondary); }
.svo-where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.svo-opt { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-4); font-weight: 600;
  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-input); background: var(--surface); cursor: pointer; }
.svo-opt--on { border-color: var(--accent-hover); box-shadow: inset 0 0 0 1px var(--accent-hover); }
.svo-place { flex: 1 1 260px; min-width: 0; max-width: 360px; }
.svo-place--off { opacity: .6; }
.svo-rule { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text-secondary); font-size: 14px; }
.svo-rule a, .svo-price a { color: var(--accent-deep); font-weight: 700; }
/* Under an order's progress in Orders: how its supplier takes it. */
.set-table .svo-sub { display: block; }
.svo-rule strong { color: var(--text); }
.svo-sum { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.svo-sum-text { margin: 0; flex: 1 1 320px; color: var(--text-secondary); }
.svo-sum-text strong { color: var(--text); }
.svo-acts { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.svo-mode { margin: 0; color: var(--text-secondary); font-size: 13px; }
.svo-mode--auto { color: var(--success-text); }
.svo-mode--confirm { color: var(--warning-text); }
.svo-attn-acts { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.svo-answer textarea { width: 100%; }
.svo-acceptby { margin: var(--space-2) 0 0; }
.svo-modes { display: grid; gap: var(--space-2); }
.svo-modeopt { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); cursor: pointer;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-card); }
.svo-modeopt input { margin-top: 4px; }
.svo-modeopt > span { display: flex; flex-direction: column; gap: 2px; }
.svo-modeopt--on { border-color: var(--accent-hover); box-shadow: inset 0 0 0 1px var(--accent-hover); }
.svo-days-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.svo-days-in { width: 80px; text-align: right; }
.svo-saved { color: var(--success-text); }
@media (max-width: 767px) {
  .svo { padding: var(--space-3); }
  .svo-grid, .svo-grid2 { grid-template-columns: minmax(0, 1fr); }
  .svo-place { max-width: none; flex-basis: 100%; }
  .svo-acts { width: 100%; }
  .svo-acts .btn { flex: 1 1 0; }
}

/* m310: Membership (Business settings — the billing day, how it is paid, and when it is not; canvas version 67) — three figures, what
   waits to be paid, the billing day's timeline, the three ways to pay as cards (the card's consent under it), the steps when it is
   not paid with the banner as it would be, what was charged; the two side panels; the banner at the top of every page while it
   waits; the page a business closed for business meets; and the console's days. */
.mbr-lede { margin-top: calc(var(--space-2) * -1); }
.mbr-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; }
.mbr-main, .mbr-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.mbr-main > .card, .mbr-side > .card { margin: 0; }
.mbr-notice { margin: 0 0 var(--space-4); }
.mbr-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); }
.mbr-fig { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mbr-kicker { color: var(--text-secondary); font-size: var(--micro-size); line-height: var(--micro-lh); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mbr-figline { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mbr-big { font-size: 26px; line-height: 32px; font-weight: 800; color: var(--text); }
.mbr-unit { color: var(--text-secondary); font-weight: 600; }
.mbr-card .field-help { margin: 0; }
.mbr-card { display: flex; flex-direction: column; gap: var(--space-2); }
/* How the billing day was set: points on a line — the time deactivated dashed. */
.mbr-line { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; }
.mbr-pt { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 30px var(--space-3) 0 0; }
.mbr-pt::before { content: ""; position: absolute; top: 10px; left: 0; right: 0; height: 4px; background: var(--accent-hover); }
.mbr-pt:first-child::before { left: 10px; }
/* Today: the last point, as wide as its words; the light line after it is the time ahead. */
.mbr-pt--today { flex: 0 0 auto; padding-right: 0; }
.mbr-pt--today::before { left: 22px; right: 0; }
/* Each point draws the line to the next one; from a deactivation or a close it is dashed — the time without a membership. */
.mbr-pt--gap::before { background: repeating-linear-gradient(90deg, var(--border-strong) 0 8px, transparent 8px 12px); }
.mbr-pt--today::before { background: var(--border); min-width: 32px; }
.mbr-dot { position: absolute; top: 1px; left: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-hover);
  border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--accent-hover); }
.mbr-pt--deactivated .mbr-dot, .mbr-pt--closed .mbr-dot { background: var(--surface); box-shadow: 0 0 0 3px var(--warning); }
.mbr-pt--today .mbr-dot { background: var(--surface); box-shadow: 0 0 0 3px var(--accent-hover); }
.mbr-ptwhat { font-size: var(--label-size); line-height: var(--label-lh); }
/* How it is paid: each way a card, the chosen one teal. */
.mbr-ways { border: 0; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.mbr-way { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-card); background: var(--surface); cursor: pointer; }
.mbr-way--on { border: 2px solid var(--accent-hover); background: var(--accent-surface); padding: 15px; }
.mbr-way--off { cursor: default; }
.mbr-way--off .mbr-waytext strong { color: var(--text-secondary); }
.mbr-wayrow { display: flex; gap: var(--space-3); align-items: flex-start; }
.mbr-wayrow input[type="radio"] { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--accent-hover); }
.mbr-waytext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mbr-waytext label { cursor: pointer; }
.mbr-wayside { flex: none; }
.mbr-consent { display: flex; gap: var(--space-2); align-items: flex-start; margin-left: 32px; padding: var(--space-3); border-radius: var(--radius-input);
  background: var(--success-surface); border: var(--border-width) solid var(--success); font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary); }
.mbr-consent p { margin: 0; }
.mbr-consent strong { color: var(--text); }
.mbr-consent .mbr-given { color: var(--success-text); }
.mbr-tick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px;
  background: var(--success); color: var(--text); font-size: 12px; font-weight: 800; }
.mbr-cardform { margin-left: 32px; padding: var(--space-4); border: var(--border-width) solid var(--border); border-radius: var(--radius-card); background: var(--surface); cursor: default; }
.mbr-cardform .form-subtitle { margin: 0 0 var(--space-2); }
.mbr-consentbox { display: flex; gap: var(--space-2); align-items: flex-start; }
.mbr-consentbox input { margin-top: 3px; }
.mbr-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-2) calc(var(--space-6) * -1) calc(var(--space-6) * -1);
  padding: var(--space-4) var(--space-6); border-top: var(--border-width) solid var(--border); background: var(--surface-subtle); border-radius: 0 0 var(--radius-card) var(--radius-card); }
/* What waits to be paid. */
.mbr-due { display: flex; flex-direction: column; gap: var(--space-3); border-color: var(--warning-fill); background: var(--warning-surface); }
.mbr-due--closed { border-color: var(--danger); background: var(--danger-surface); }
.mbr-due p { margin: 0; }
.mbr-payways { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.mbr-payways legend { margin-bottom: var(--space-2); }
.mbr-payway { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-4); font-weight: 600; cursor: pointer;
  border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-input); background: var(--surface); }
.mbr-payway--on { border-color: var(--accent-hover); box-shadow: inset 0 0 0 1px var(--accent-hover); }
.mbr-transfer .bud-details { margin: var(--space-2) 0 0; }
.mbr-why { color: var(--danger-text); }
/* When it is not paid. */
.mbr-rules { display: flex; flex-direction: column; margin-top: var(--space-2); }
.mbr-rule { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-top: var(--border-width) solid var(--border); }
.mbr-rule p { margin: 2px 0 0; }
.mbr-when { font-weight: 700; color: var(--warning-text); }
.mbr-rule--closed .mbr-when { color: var(--danger-text); }
.mbr-rule--open .mbr-when { color: var(--success-text); }
.mbr-previewcap { margin: var(--space-3) 0 0; }
.mbr-npfoot { margin-top: var(--space-2) !important; }
/* The banner — at the top of every page while the membership waits to be paid; under When it is not paid as it would be. */
.mbr-banner { align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--warning-surface); border-color: var(--warning-fill); }
.mbr-banner--closed { background: var(--danger-surface); border-color: var(--danger); }
.mbr-banner--preview { margin: var(--space-2) 0 0; max-width: none; }
.mbr-banner-text { flex: 1 1 360px; min-width: 0; }
.mbr-banner-btn { flex: none; }
.mbr-banner-link { flex: none; font-weight: 700; }
/* What was charged. */
.mbr-chhead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); flex-wrap: wrap; }
/* What was charged, as drawn: the card's whole width, a band of headings, a line between the periods. */
.mbr-chargedcard .grid-wrap { margin: var(--space-3) calc(var(--space-6) * -1) calc(var(--space-6) * -1); border: 0; border-top: var(--border-width) solid var(--border);
  border-radius: 0 0 var(--radius-card) var(--radius-card); }
.mbr-table { margin: 0; }
.mbr-table th { text-transform: uppercase; letter-spacing: .06em; background: var(--surface-subtle); padding: 10px var(--space-2);
  border-bottom: var(--border-width) solid var(--border); }
.mbr-table td { vertical-align: top; padding: 10px var(--space-2); border-bottom: var(--border-width) solid var(--border); }
.mbr-table tbody tr:last-child td { border-bottom: 0; }
.mbr-table th:first-child, .mbr-table td:first-child { padding-left: var(--space-6); }
.mbr-table th:last-child, .mbr-table td:last-child { padding-right: var(--space-6); }
.mbr-table td .field-help { display: block; }
.mbr-num { text-align: right; white-space: nowrap; }
.mbr-kind { color: var(--text-secondary); font-size: var(--helper-size); }
.mbr-gap td { color: var(--text-secondary); background: var(--surface-subtle); }
.mbr-pill { display: inline-block; padding: 2px var(--space-2); border-radius: 999px; font-size: var(--micro-size); line-height: var(--micro-lh); font-weight: 700; white-space: nowrap; }
.mbr-pill--ok { background: var(--success-surface); color: var(--success-text); }
.mbr-pill--no { background: var(--danger-surface); color: var(--danger-text); }
.mbr-pill--wait { background: var(--warning-surface); color: var(--warning-text); }
.mbr-pill--off { background: var(--surface-subtle); color: var(--text-secondary); }
/* The side panels. */
.mbr-panel p { margin: 0; }
.mbr-lockfield { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-3);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-input); background: var(--surface-subtle); font-weight: 600;
  font-size: var(--label-size); line-height: var(--label-lh); }
.mbr-panel .linkbtn { align-self: flex-start; font-size: var(--helper-size); line-height: var(--helper-lh); }
.mbr-lockfield svg { color: var(--text-secondary); flex: none; }
/* Closed for business: what the marketplace's screens show instead. */
.mbr-closedpage { max-width: 760px; margin: var(--space-6) auto; display: flex; flex-direction: column; gap: var(--space-3); }
.mbr-closedpage p { margin: 0; }
.mbr-closedpage .form-actions { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--space-3); }
.mbr-closedpage .form-actions .btn-secondary { margin-right: 0; }
/* The console's org line, and its days. */
.org-mbr { display: block; }
.mbr-dayscard { margin-top: var(--space-4); }
.mbr-daysgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.mbr-daysin { width: 100px; text-align: right; }
@media (max-width: 1180px) { .mbr-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .mbr-sum { grid-template-columns: minmax(0, 1fr); }
  .mbr-line { flex-direction: column; }
  .mbr-pt { flex-basis: auto; padding: 0 0 var(--space-4) 36px; }
  .mbr-pt::before { top: 11px; bottom: -11px; left: 9px; right: auto; width: 4px; height: auto; }
  .mbr-pt:first-child::before { left: 9px; top: 11px; }
  .mbr-pt--today { padding-bottom: 0; }
  .mbr-pt--today::before { top: 23px; bottom: auto; left: 9px; right: auto; width: 4px; height: 12px; min-width: 0; }
  .mbr-pt--gap::before { background: repeating-linear-gradient(180deg, var(--border-strong) 0 8px, transparent 8px 12px); }
  .mbr-rule { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mbr-wayrow { flex-wrap: wrap; }
  .mbr-waytext { flex: 1 1 0; }                         /* beside its circle — only what belongs to the way goes under it */
  .mbr-wayside { width: 100%; padding-left: 32px; }
  .mbr-consent, .mbr-cardform { margin-left: 0; }
  .mbr-daysgrid { grid-template-columns: minmax(0, 1fr); }
  .mbr-banner-btn { width: 100%; }
  /* A period in two lines: what and how much; how it was paid and its state — its receipt under them. */
  .mbr-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); padding: var(--space-3) var(--space-6);
    border-bottom: var(--border-width) solid var(--border); }
  .mbr-table tbody tr:last-child { border-bottom: 0; }
  .mbr-table td, .mbr-table td:first-child, .mbr-table td:last-child { width: auto; padding: 0; border: 0; }
  .mbr-table td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .mbr-table td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; }
  .mbr-table td:nth-child(5), .mbr-table td[colspan] { grid-column: 1 / -1; }
  .mbr-table tr.mbr-gap { background: var(--surface-subtle); }
  .mbr-table tr.mbr-gap td { background: none; }
}

/* m312: the console's Overview — columns this version uses that the database lacks, named first. */
.adm-schema { border-color: var(--danger); background: var(--danger-surface); }
.adm-schema .form-title { color: var(--danger-text); }
.adm-schema-list { margin: var(--space-2) 0 0; padding-left: 20px; columns: 2 240px; column-gap: 24px; }
.adm-schema-list code { font-size: 13px; word-break: break-all; }

/* m313 (Jiri, 11 Oct): a wizard's actions as icons — back, save, continue — on the steps' line at the top right AND at the
   foot; the last step's submit a button, last. Continue in the accent, the rest as the secondary buttons are drawn. */
.wiz-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); flex-wrap: wrap; margin: 0 0 var(--space-6); }
.wiz-head > .steps, .wiz-head > .tabs, .wiz-head > .bud-steps { margin: 0; flex: 1 1 auto; min-width: 0; }
.wiz-acts { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; flex: none; }
.wiz-ico { width: var(--control-h); height: var(--control-h); display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border-radius: var(--radius-button); border: var(--border-width) solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; }
.wiz-ico:hover:where(:not(:disabled):not([aria-disabled="true"])) { border-color: var(--accent); color: var(--accent-deep); }
.wiz-ico--next { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.wiz-ico--next:hover:where(:not(:disabled):not([aria-disabled="true"])) { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent); }
.wiz-ico:disabled { opacity: .4; cursor: not-allowed; }
.wiz-ico[aria-busy="true"] { opacity: .7; pointer-events: none; }
.wiz-foot { align-items: center; flex-wrap: wrap; }
.wiz-foot .wiz-lead { display: flex; align-items: center; gap: var(--space-4); margin-right: auto; flex-wrap: wrap; }
.wiz-foot .wiz-lead .btn-secondary { margin-right: 0; }
@media (max-width: 600px) { .wiz-head .wiz-acts { width: 100%; justify-content: flex-end; } }
/* m320 (approved 11 Oct 19:41 — WizardActionsRequest, WizardActionsListing): the top actions end where the foot's do, at the right
   edge of the step's fields inside its card, so the top and the foot are one line; the panel on the right starts level with the
   form, the space above it left empty. .wiz-split: a two-column grid whose first child (the steps and their actions) sits over the
   first column only, the form under it and the panel beside the form. */
.wiz-split > :first-child { grid-column: 1; grid-row: 1; }
.wiz-split > :nth-child(2) { grid-column: 1; grid-row: 2; }
.wiz-split > :nth-child(3) { grid-column: 2; grid-row: 2; }
.wiz-split > .wiz-head { margin: 0; padding-right: var(--wiz-inset); }
.to-wiz.wiz-split { row-gap: var(--space-5); }
.to-wiz-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.to-wiz-main > .wiz-foot { margin-top: var(--space-1); padding-top: var(--space-4); border-top: var(--border-width) solid var(--border); }
/* A listing: the actions on the title's line (the editor's fixed strip, m285), ending over the details' fields — the panel's
   column, the gap and the card's inset in from the right. */
.ed-head--acts { align-items: center; justify-content: flex-start; flex-wrap: wrap; column-gap: var(--space-4); row-gap: var(--space-2);
  padding-right: calc(var(--split-side) + var(--space-6) + var(--wiz-inset)); }
.ed-head--acts .ed-status { margin-top: 0; }
#listing-form > .tabs:first-child { margin-top: 0; }   /* the steps head the details card, as the board draws them */
/* Join SELYVO: the steps and their actions over the step's card; the note beside it level with the card. */
.join-split--wiz { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); column-gap: var(--space-6); align-items: start; }
.join-split--wiz.join-split--side { grid-template-columns: minmax(0, 1fr) 300px; }
.join-split--wiz > .join-aside { max-width: none; }
@media (max-width: 1023px) {
  .split.wiz-split > :nth-child(n) { grid-column: 1; grid-row: auto; }
  .ed-head--acts { padding-right: var(--wiz-inset); }
}
@media (max-width: 960px) {
  .join-split--wiz.join-split--side { grid-template-columns: minmax(0, 1fr); }
  .join-split--wiz > :nth-child(n) { grid-column: 1; grid-row: auto; }
}
@media (max-width: 900px) { .to-wiz.wiz-split > :nth-child(n) { grid-column: 1; grid-row: auto; } }

/* m313: rich text for the scope of work and the note with an invitation — as tall as what is written, Draft with AI (m349f, every
   rich text field) at the toolbar's end, a placeholder while empty. m329: "as tall as what is written" for real — the area is also an
   .input, whose fixed height held it at its least while a longer text ran out over the form; with no limit any more (Jiri, 13 Oct
   10:19) a long scope showed it. The other editors grow too, up to their most, then scroll. */
.rt--grow .rt-area { height: auto; max-height: none; overflow: visible; min-height: 160px; }
.rt-end { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
/* m349f (board RichTextAi, 203–209): Draft with AI — its button at the toolbar's end, its row, the field at work (a moving violet bar,
   what is done and the seconds, Stop — its text and toolbar not used), the draft beside it; the AI at work — the header's sign and its
   list, the strip under the header, the message when it is done. Violet is AI's, as the questionnaires' AI is. */
.rt-ai { gap: 6px; color: var(--violet); font-size: var(--label-size); font-weight: 700; }
.rt-ai:hover { background: var(--violet-surface); }
.rt-ai:disabled { opacity: .5; cursor: progress; }
.rt-ai svg { flex: none; }
.rt-airow { display: grid; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--own-line); background: var(--violet-surface); }
.rt-airow-t { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; color: var(--violet); }
.rt-airow .field-help { margin: 0; }
.rt-ai-go { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rt-aiwork { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--violet-surface);
  border-bottom: 1px solid var(--own-line); }
.rt-aiwork-bar, .ai-strip-bar { position: absolute; left: 0; right: 0; height: 3px; overflow: hidden; background: var(--own-line); }
.rt-aiwork-bar { top: 0; }
.ai-strip-bar { bottom: 0; }
.rt-aiwork-bar span, .ai-strip-bar span { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--violet-bar), var(--violet), transparent); animation: rt-ai-move 1.2s ease-in-out infinite; }
@keyframes rt-ai-move { from { left: -40%; } to { left: 100%; } }
.rt-aiwork-t { display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; color: var(--violet); font-weight: 700; }
.rt-aiwork-t svg { flex: none; }
.rt-aiwork-s { font-variant-numeric: tabular-nums; }
[data-aiw-secs] { white-space: nowrap; }
.rt--ai-work .rt-area, .rt--ai-work .rt-bar { opacity: .5; }
.rt-aidraft { margin: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--own-line); border-left: 4px solid var(--violet);
  border-radius: var(--radius-input); background: var(--own-wash); }
.rt-aidraft-h { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--space-2); color: var(--violet); font-size: var(--micro-size);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rt-aidraft-text { max-height: 420px; overflow: auto; }
.rt-aidraft-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 var(--space-1); }
.rt-aidraft .field-help { margin: 0; }
.ai-work-wrap { position: relative; display: inline-flex; align-items: center; }
.ai-work-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--own-line); border-radius: 999px;
  background: var(--violet-surface); color: var(--violet); font: inherit; font-size: var(--label-size); font-weight: 700; white-space: nowrap; cursor: pointer; }
.ai-work-btn:hover { border-color: var(--violet); }
.ai-work-dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--violet); }
.ai-work-btn--on .ai-work-dot { display: inline-block; animation: ai-pulse 1.2s ease-in-out infinite; }
@keyframes ai-pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
.ai-work-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(400px, calc(100vw - 32px)); padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: 0 12px 32px rgba(16, 24, 32, .16); }
.ai-work-h { margin: 0 0 var(--space-1); font-weight: 700; }
.ai-work-list ul { margin: 0; padding: 0; list-style: none; }
.ai-work-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.ai-work-row:first-child { border-top: 0; }
.ai-work-what { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.ai-work-what .field-help { margin: 0; }
.ai-work-row--done strong { color: var(--text-secondary); font-weight: 600; }
.ai-strip { position: sticky; top: var(--shell-h); z-index: 15; background: var(--violet-surface); border-bottom: 1px solid var(--own-line); }
.ai-strip-in { position: relative; display: flex; align-items: center; gap: var(--space-3); max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-2) var(--gutter) calc(var(--space-2) + 3px); color: var(--violet); }
.ai-strip-in svg { flex: none; }
.ai-strip-in p { flex: 1; min-width: 0; margin: 0; color: var(--text); overflow-wrap: anywhere; }   /* 349g: his file's long name breaks */
.ai-strip-in strong { color: var(--violet); }
.ai-done { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 70; width: min(460px, calc(100vw - 32px)); }
.ai-done-in { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--own-line);
  border-left: 4px solid var(--violet); border-radius: var(--radius-card); background: var(--surface); color: var(--violet);
  box-shadow: 0 12px 32px rgba(16, 24, 32, .16); }
.ai-done-in--bad { border-left-color: var(--danger-text); }
.ai-done-in p { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; margin: 0; color: var(--text); overflow-wrap: anywhere; }
.ai-done-in p strong { color: var(--violet); }
.ai-done-what { font-weight: 600; }
.ai-done-why { color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) {
  .rt-aiwork-bar span, .ai-strip-bar span { left: 0; width: 100%; animation: none; }
  .ai-work-btn--on .ai-work-dot { animation: none; }
}
/* On a phone the top bar has no room for one more control (m343 fitted it to 360 px): the sign floats at the screen's bottom left, over
   the page, its list opening upward; the message when work is done sits above it. The strip stays at its page's top — the phone's
   header is taller than --shell-h, and the sign says AI is at work wherever the page is scrolled. */
@media (max-width: 767px) {
  .ai-work-wrap { position: fixed; left: var(--space-4); bottom: var(--space-4); z-index: 65; }
  .ai-work-btn { height: 40px; box-shadow: 0 6px 18px rgba(16, 24, 32, .18); }
  .ai-work-list { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
  .ai-done { bottom: calc(var(--space-4) + 52px); }
  .ai-strip { position: static; }
}
@media (max-width: 600px) {
  .ai-strip-in { padding-left: var(--space-4); padding-right: var(--space-4); }
}
/* m349e: and an emptied one (its line's break left: .rt-empty) — over the empty line, not above it */
.rt-area[data-ph]:empty::before, .rt-area[data-ph].rt-empty::before { content: attr(data-ph); position: absolute; left: var(--space-3); right: var(--space-3);
  top: var(--space-3); color: var(--text-secondary); pointer-events: none; }
.rq-scope-rt { margin: 0; }
/* m313: an open list that its container would cut off is drawn over everything, where its button is (flipOpenPickers). */
.catpick.drop-fixed .catpick-panel, .catpick.drop-fixed > .catpick-list { z-index: 70; }

/* m313 (Jiri, 11 Oct): Orders as My requests rows — icon, order, with whom, status, progress, amount, currency, action. On a narrow
   screen they stack. (m349t: Received requests' rows went with their list — Sales' Opportunity.) */
.mr-row.ord-cols { grid-template-columns: 44px minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 0.9fr) 44px auto; }
.ord-party strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord-cols .req-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
/* m313: under "Ask the buyer", what asking is for and how it works (the side's lists are .qa-how). */
.qa-explain { margin: 0; }
/* On a narrow screen: the icon and the title, then where it stands (and, for an order, with whom) under the title, then the time
   (or the order's progress) beside the amount and its currency, then the action across. */
@media (max-width: 900px) {
  .mr-row.ord-cols { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "icon what what what" ". party party party" ". status status status" ". time amount cur" "act act act act"; }
  .mr-row.ord-cols > .mr-icon-cell { grid-area: icon; }
  .mr-row.ord-cols > .mr-what { grid-area: what; }
  .mr-row.ord-cols > :nth-child(4) { grid-area: status; }
  .mr-row.ord-cols > :nth-child(5) { grid-area: time; }
  .mr-row.ord-cols > .ord-party { grid-area: party; }
  .mr-row.ord-cols > .mr-amount { grid-area: amount; text-align: right; }
  .mr-row.ord-cols > .mr-cur { grid-area: cur; }
  .mr-row.ord-cols > .req-actions { grid-area: act; }
  .ord-cols .req-actions { justify-content: flex-start; }
}
/* m313: the console's Overview, when no mail server is set up — e-mail is only written to the log. */
.adm-mail { border-color: var(--warning); background: var(--warning-surface); }
.adm-mail .form-title { color: var(--warning-text); }


/* m314 (Jiri, 11 Oct): Business settings › Time sheets and expenses — the rules and own time's settings, a tab each; where they were,
   a line saying where they are now. */
.tss-lede { margin: 0 0 var(--space-4); }
.tss-moved { margin: var(--space-5) 0 0; }
.ot-setlink { margin: var(--space-5) 0 0; }
/* m314: a week with no order but own time — the note above the grid, not run into its day headings (found by the look). */
.ts-empty + .ts-grid { margin-top: var(--space-4); }
/* m315: cash collection — the approved board "Invoices — cash collection: SELYVO pays you on your terms, the customer pays later". */
.cc-get { border: 2px solid var(--accent); padding: 0; overflow: hidden; }
.cc-get-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; padding: 18px 22px 6px; }
.cc-get-head h2 { margin: 0; font-size: 20px; font-weight: 800; }
.cc-newpill { vertical-align: 3px; margin-left: 4px; }
.cc-get-lede { margin: 0; padding: 0 22px 14px; color: var(--text-secondary); }
.cc-two { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: stretch; padding: 0 22px 16px; }
.cc-box { padding: 14px 16px; border-radius: 10px; background: var(--canvas); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-box--you { background: var(--success-surface); }
.cc-box--late { background: var(--danger-surface); }
.cc-box strong { font-size: 22px; }
.cc-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.cc-box--you .cc-kicker { color: var(--success-text); }
.cc-boxsub { font-size: 13px; color: var(--text-secondary); }
.cc-gap { display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--text-secondary); font-size: 13px; text-align: center; }
.cc-gap strong { font-size: 22px; color: var(--text); }
.cc-calc { margin: 0 22px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cc-rows { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; padding: 14px 16px; font-variant-numeric: tabular-nums; }
.cc-k { color: var(--text-secondary); min-width: 0; }
.cc-k strong { color: var(--text); }
.cc-v { text-align: right; white-space: nowrap; }
.cc-feek, .cc-fee { color: var(--text); }
.cc-receive { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: var(--accent-surface); border-top: 1px solid var(--border); }
.cc-receive strong:first-child { font-size: 17px; }
.cc-payout { font-size: 22px; font-variant-numeric: tabular-nums; }
.cc-act { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 16px 22px 20px; }
.cc-acthelp { flex: 1; min-width: 240px; font-size: 13px; }
.cc-get .cc-err, .cc-get .cc-done { margin: 0 22px 12px; }
.cc-ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.cc-tick { color: var(--success-text); font-weight: 800; }
.cc-reason { margin: 0; font-size: 14px; }
.cc-other { font-size: 14px; }
.cc-other + .cc-other { margin-top: var(--space-2); }
.cc-otherline { display: block; color: var(--text-secondary); }
.cc-otherline--ok { color: var(--success-text); }
.cc-delivered { color: var(--success-text); }
.cc-pay { border: 2px solid var(--accent); }
.cc-pay-h { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.cc-pay-lede { margin: 0 0 var(--space-3); color: var(--text-secondary); }
.cc-paydl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; margin: 0 0 var(--space-3); font-size: 14px; }
.cc-paydl dt { color: var(--text-secondary); }
.cc-paydl dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cc-pay-note { margin: 0; }
.cc-pay--done p { margin: 0; color: var(--success-text); font-weight: 600; }
.chg-group th { text-align: left; padding-top: var(--space-4); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
.cc-con-foot { padding: 8px 14px 12px; margin: 0; }
@media (max-width: 640px) {
  .cc-two { grid-template-columns: minmax(0, 1fr); }
  .cc-gap { flex-direction: row; gap: 6px; justify-content: flex-start; }
  .cc-get-head, .cc-get-lede, .cc-two, .cc-act { padding-left: 16px; padding-right: 16px; }
  .cc-calc { margin: 0 16px; }
  .cc-get .cc-err, .cc-get .cc-done { margin: 0 16px 12px; }
}

/* m315 (found by the look): on a phone an invoice's six columns ran into each other — each line's item on a row of its own, then
   quantity, unit price and VAT, then net and gross under the last two; the heading's labels in the same places. And Collections'
   record alone in its row, as wide as the list. */
@media (max-width: 640px) {
  .inv-line { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px var(--space-3); }
  .inv-line > span:first-child { grid-column: 1 / -1; }
  .inv-line > span:nth-child(5) { grid-column: 2; }
  .inv-line > span:nth-child(6) { grid-column: 3; }
  .inv-line-head > span:first-child { display: none; }
}
.cc-cols { grid-template-columns: minmax(0, 1fr); }
/* Business settings › Payments: "Paying invoices" kept apart from the card above it (they touched). */
.cc-termscard { margin-top: var(--space-4); }

/* m316 — "Will you send an offer?" with reasons: the supplier's question on a request's first page, the buyer's "Will suppliers
   send an offer?" (the boards "Requests you can quote for — Will you send an offer?, with reasons" and "My requests — who will
   send an offer, and why not", canvas version 70). */
.oi-card { display: flex; flex-direction: column; gap: 12px; }
.oi-ask { border: 2px solid var(--accent-deep); }
.oi-new { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--warning-surface);
  color: var(--warning-text); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; vertical-align: 3px; }
.oi-lede, .oi-state, .oi-why { margin: 0; }
.oi-changed { margin: 0; color: var(--warning-text); font-weight: 600; }
.oi-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.oi-reasons { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.oi-reasons .rq-choice { cursor: pointer; }
.oi-reasons[aria-invalid="true"] .rq-choice { border-color: var(--danger); }
.oi-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.oi-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.oi-pill--offer { background: var(--accent-surface); color: var(--accent-deep); }
.oi-pill--yes { background: var(--success-surface); color: var(--success-text); }
.oi-pill--no { background: var(--surface-subtle); color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border); }
.oi-pill--none { background: var(--warning-surface); color: var(--warning-text); }
.oi-table { display: flex; flex-direction: column; }
.oi-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 200px minmax(0, 1.6fr) 74px; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--border); align-items: start; }
.oi-row:last-child { border-bottom: 0; }
.oi-row-head { padding: 8px 0; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); }
.oi-who, .oi-answer, .oi-reason { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.oi-who strong, .oi-reason { overflow-wrap: anywhere; }
.oi-note { font-size: 14px; }
.oi-answer .linkbtn { font-size: 14px; }
.oi-when { text-align: right; }
.oi-foot, .oi-none { margin: 0; }
.oi-bars { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.oi-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: baseline; }
.oi-bar .mr-bar-track { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .oi-reasons { grid-template-columns: minmax(0, 1fr); }
  .oi-row-head { display: none; }
  .oi-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .oi-who { grid-column: 1; }
  .oi-when { grid-column: 2; grid-row: 1; }
  .oi-answer, .oi-reason { grid-column: 1 / -1; }
  .oi-reason--none { display: none; }   /* no reason to give: no dash on a line of its own */
}

/* m316 — questions as conversations: each message in the order written, the buyer's on one side and the supplier's on the
   other; a follow-up that waits for the buyer marked (the boards "Questions — conversations with the whole history, buyer" and
   "Questions and answers — conversations, supplier"). */
.qa-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.qa-msg { max-width: 82%; padding: 12px 14px; border-radius: 12px 12px 12px 4px; background: var(--surface-subtle);
  border: 1px solid var(--border); overflow-wrap: anywhere; }
.qa-msg p { margin: 4px 0 0; white-space: pre-wrap; }
.qa-msg--us { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: var(--accent-surface); border-color: var(--accent-surface); }
.qa-msg--waiting { border: 2px solid var(--warning-fill); }
.qa-msg-head { display: block; font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.qa-new { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--warning-surface);
  color: var(--warning-text); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.qa-started { margin: 0; font-weight: 600; }
.qa-more { padding-left: 14px; font-weight: 600; }
.qa-links { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.qa-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qa-who legend { grid-column: 1 / -1; }
.qa-ask-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.qa-ask-row > div { flex: 1 1 320px; min-width: 0; }
.qa-ask-row .rq-card-head { margin-bottom: 2px; }
/* who asked, beside the initials — not a line of its own when the conversation's count and start make it long (m316) */
.qa-head > .qa-avatar + div { flex: 1 1 220px; min-width: 0; }
@media (max-width: 900px) {
  .qa-msg { max-width: 92%; }
  .qa-who { grid-template-columns: minmax(0, 1fr); }
  .qa-head > div + .qa-topic, .qa-head .field-help + .qa-chip { margin-left: 0; }
}

/* m317 — a request started from a supplier's card: its listings beside the line items, each a line at a press; the line's
   "From its listing" under its item; "from its card" on its chip (the boards "New request from a supplier's card"). */
.rc-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--accent-surface); color: var(--accent-deep);
  font-size: 12px; font-weight: 700; white-space: nowrap; }
.rc-from { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 12px; }
.rc-from .field-help { margin: 0; font-size: 12px; }
.rl-sheet .rc-from { padding: 0 2px; }
.to-chip--card .rc-chip { margin-left: 2px; background: var(--surface); color: var(--text-secondary); }
.rc-side { display: flex; flex-direction: column; gap: 12px; }
.rc-head { display: flex; gap: 12px; align-items: center; }
.rc-avatar { flex: none; width: 48px; height: 48px; border-radius: 10px; background: var(--accent-surface); color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.rc-who { min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.rc-who .panel-title { overflow-wrap: anywhere; }
.rc-tabs { margin: 0; }
.rc-list { list-style: none; margin: 0; padding: 0; }
.rc-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: var(--border-width) solid var(--border); }
.rc-row:first-child { border-top: 0; }
.rc-thumb { flex: none; width: 48px; height: 48px; border-radius: 8px; background: var(--accent-surface); color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; }
.rc-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-what strong { overflow-wrap: anywhere; }
.rc-added { display: inline-flex; align-items: center; gap: 6px; font-size: var(--label-size); font-weight: 700; color: var(--success-text); white-space: nowrap; }
.rc-note { margin: 0; padding-top: 12px; border-top: var(--border-width) solid var(--border); }
.rc-notice .linkbtn { font-weight: 700; }
/* m323 — beside the Suppliers step: the same kind of thing from other suppliers, each with its picture, its supplier and price. */
.rq-sim { display: flex; flex-direction: column; gap: 8px; }
.rq-sim > .field-help { margin: 0; }
.rq-sim-img { flex: none; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--accent-surface); display: block; }
.rq-sim-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rq-sim-title { font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.rq-sim-title:hover, .rq-sim-title:focus-visible { color: var(--accent-deep); text-decoration: underline; }
.rq-sim-price { font-size: var(--label-size); font-weight: 700; color: var(--text); }
.rq-sim-row .btn-sm { flex: none; }

/* m317 — fill a request from a file: the box at the top of Scope, what AI found with a tick each, "From the file" beside what
   it filled (the boards "New request — fill it from a file" and "what AI found in the file"). */
.ff-box { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: var(--border-width) solid var(--accent-line);
  border-radius: var(--radius-card); background: var(--accent-surface); }
.ff-head, .ff-found-head { display: flex; gap: 12px; align-items: flex-start; }
.ff-head > div, .ff-found-head > div { min-width: 0; flex: 1; }
.ff-head .field-help, .ff-found-head .field-help { margin: 2px 0 0; }
.ff-found-head .form-title { overflow-wrap: anywhere; }   /* 349l (looked at): a file's long name — one word — breaks in its heading */
.ff-mark { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--surface); border: var(--border-width) solid var(--accent-line);
  color: var(--accent-deep); display: inline-flex; align-items: center; justify-content: center; }
.ff-title { margin: 0; font-size: 18px; font-weight: 800; }
.ff-pick { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-left: 52px; }
.ff-pick .field-help { margin: 0; }
.ff-choose { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ff-file { margin-left: 52px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-radius: 9px;
  border: var(--border-width) solid var(--accent-line); background: var(--surface); }
.ff-file-what { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ff-file-what strong { overflow-wrap: anywhere; }
.ff-bar { display: block; height: 6px; margin-top: 8px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.ff-bar span { display: block; width: 40%; height: 100%; border-radius: 999px; background: var(--accent); animation: ff-run 1.4s ease-in-out infinite; }
@keyframes ff-run { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .ff-bar span { animation: none; } }
.ff-err { margin: 0 0 0 52px; }
.ff-rows { list-style: none; margin: 4px 0 0; padding: 0; }
.ff-row { display: grid; grid-template-columns: 26px 150px minmax(0, 1fr) auto; gap: 6px 14px; align-items: start; padding: 14px 0;
  border-top: var(--border-width) solid var(--border); }
.ff-row > input { margin-top: 4px; width: 18px; height: 18px; }
.ff-row--none { color: var(--text-secondary); }
.ff-val { min-width: 0; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.ff-replaces { font-size: 13px; color: var(--warning-text); }
.ff-where { text-align: right; margin: 0; white-space: nowrap; }
.ff-scope { display: block; padding: 8px 10px; border-left: 3px solid var(--accent-line); background: var(--surface-subtle); }
.ff-q { color: var(--warning-text); font-weight: 700; }
.ff-lines { margin-top: 6px; }
.ff-lines .rl-table { font-size: 13px; }
.ff-cats { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; }
.ff-cat { display: inline-flex; gap: 6px; align-items: center; }
.ff-missing { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 9px; background: var(--warning-surface); color: var(--warning-text); }
.ff-missing ul { margin: 0; padding-left: 18px; }
.ff-missing span { font-size: 13px; }
.ff-attach { margin: 0; }
.ff-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--violet-surface); color: var(--violet); vertical-align: middle; }
@media (max-width: 900px) {
  .ff-pick, .ff-file { margin-left: 0; padding-left: 0; }
  .ff-err { margin-left: 0; }   /* 349g (looked at): its padding kept — the words touched the notice's edge */
  .ff-file { padding-left: 14px; }
  .ff-row { grid-template-columns: 26px minmax(0, 1fr); }
  .ff-row > .ff-val, .ff-row > .ff-where, .ff-row > strong, .ff-row--none > .field-help { grid-column: 2; }
  .ff-row--none > span:first-child, .ff-row--none > span:last-child { display: none; }
  .ff-where { text-align: left; }
  .ff-acts .btn { flex: 1 1 100%; }
}
/* m317, as Chromium showed it: what was found reads as text ("Office chairs — found among…"); its lines table scrolls on a phone
   rather than breaking its words letter by letter; the actions wrap, all three at the left. A line taken from a listing says so
   in line with the item's text, and the item has room for a listing's title. */
.ff-val { display: block; }
.ff-val > .ff-replaces { display: block; margin-top: 4px; }
.ff-lines { display: block; overflow-x: auto; overflow-wrap: normal; }
.ff-lines .rl-table { min-width: 480px; }
.ff-acts { flex-wrap: wrap; justify-content: flex-start; }
.ff-acts .btn-secondary { margin-right: 0; }
.rl-sheet .rc-from { padding: 0 10px 8px; margin-top: 0; }
.rl-sheet td:nth-child(2) { min-width: 220px; }

/* m321 (Jiri's item 16 of 11 Oct): the order page as a document — boards OrderPage and OrderDelivery (canvas 77–78). The head, the
   steps (done in teal, the one now ringed in amber), the next step with its buttons and the form it opens, then the order and, on
   the side, what the customer wants, the documents, the messages and the history. */
.od-crumbs { margin-bottom: 6px; }
.od-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.od-head .od-ref { margin: 0; }
.od-state { font-size: 13px; padding: 4px 12px; }
.od-head-acts { margin-left: auto; display: flex; gap: 8px; }
.od-head-acts .btn { display: inline-flex; align-items: center; gap: 6px; }
.od-sub { margin: 6px 0 16px; font-size: 15px; color: var(--text-secondary); }
.od-sub strong { color: var(--text); }
.od-steps { padding: 20px 22px; margin-bottom: 16px; }
.od-progress { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.od-progress .order-step { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.od-progress .order-step:not(:last-child)::after { content: ""; position: absolute; left: 34px; right: 8px; top: 12px; height: 2px; background: var(--border); }
.od-progress .od-step--done:not(:last-child)::after { background: var(--accent); }
.od-progress .step-circle { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.od-progress .od-step--done .step-circle { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.od-progress .od-step--now .step-circle { border: 3px solid var(--warning-fill); }
.od-progress strong { font-size: 14px; }
.od-progress .order-step-pending strong { color: var(--text-secondary); }
.od-progress .od-step--now strong { color: var(--text); }
.od-progress .field-help { margin: 0; font-size: 12px; }
.od-progress .od-step--now .field-help { color: var(--warning-text); font-weight: 700; }
.od-next { background: var(--surface); border: var(--border-width) solid var(--border); border-left: 5px solid var(--border-strong);
  border-radius: 12px; padding: 18px 22px; margin-bottom: 16px; }
.od-next--amber { border-left-color: var(--warning-fill); } .od-next--teal { border-left-color: var(--accent); }
.od-next--green { border-left-color: var(--success); } .od-next--red { border-left-color: var(--danger); }
.od-next-row { display: flex; align-items: flex-start; gap: 16px; }
.od-next-ico { flex: none; margin-top: 2px; color: var(--text-secondary); }
.od-next--amber .od-next-ico, .od-next--amber .od-kicker { color: var(--warning-text); }
.od-next--teal .od-next-ico, .od-next--teal .od-kicker { color: var(--accent-deep); }
.od-next--green .od-next-ico, .od-next--green .od-kicker { color: var(--success-text); }
.od-next--red .od-next-ico, .od-next--red .od-kicker { color: var(--danger-text); }
.od-next-body { flex: 1 1 auto; min-width: 0; }
.od-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.od-next-title { margin: 2px 0 4px; font-size: 20px; font-weight: 800; line-height: 1.3; }
.od-next-text { margin: 0; font-size: 14px; color: var(--text-secondary); }
.od-next-acts { display: flex; gap: 10px; flex: none; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.od-panel { margin-top: 14px; padding-top: 14px; border-top: var(--border-width) solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.od-panel .field { margin: 0; }
.od-panel .form-actions { margin: 0; }
.od-panel-title { margin: 0; font-size: 16px; font-weight: 800; }
.od-panel .rq-card-head { margin-bottom: 0; }
.od-dntable .od-dnq { width: 96px; min-height: 36px; text-align: right; }
.od-dntable td { vertical-align: middle; }
.od-dnfields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.od-dnfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px;
  border-top: var(--border-width) solid var(--border); }
.od-dnacts { display: flex; gap: 8px; margin-left: auto; }
.od-note { display: flex; flex-direction: column; gap: 6px; }
.od-note-lines { list-style: none; margin: 0; padding: 0; }
.od-note-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: var(--border-width) solid var(--border); font-size: 14px; }
.od-note .field-help { margin: 0; }
.od-note-text { margin: 0; font-size: 14px; color: var(--text-secondary); }
.od-cols { margin-top: 0; }
.od-doc .rq-card-head { margin-bottom: 6px; }
.od-lines tfoot td { border-bottom: 0; }
.od-lines tfoot tr:first-child td { border-top: var(--border-width) solid var(--border-strong); }
.od-lines tfoot .od-total td { border-top: 2px solid var(--text); font-size: 15px; }
.od-side { display: flex; flex-direction: column; gap: 10px; }
.od-wants-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.od-wants-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.od-wants-list svg { flex: none; margin-top: 1px; color: var(--accent-deep); }
.od-side .field-help { margin: 0; }
.od-docrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: var(--border-width) solid var(--border); }
.od-docrow > svg { flex: none; color: var(--accent-deep); }
.od-docmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.od-docmain .mr-pill { font-size: 12px; padding: 2px 8px; margin-left: 4px; }
.od-doclink { font-weight: 700; text-align: left; }
.od-docopen { padding: 0 0 10px 28px; display: flex; flex-direction: column; gap: 8px; }
.od-docacts { display: flex; gap: 8px; flex-wrap: wrap; }
.od-docs .order-docs .document-row { border-top: var(--border-width) solid var(--border); }
.od-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.od-hist li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.od-hist .field-help { margin: 0; }
.od-held { margin: 0; }
.od-print { display: none; }
@media print {
  body.od-printing .shell, body.od-printing .build-stamp, body.od-printing #verify-banner, body.od-printing #cart-drawer,
  body.od-printing #view > *:not(.od-print) { display: none !important; }
  body.od-printing .od-print { display: block !important; font-size: 12pt; color: var(--text); }
}
.od-print h1 { font-size: 20pt; margin: 0 0 12pt; }
.od-pparties { display: grid; grid-template-columns: 1fr 1fr; gap: 12pt; margin-bottom: 12pt; }
.od-pkick { display: block; font-size: 9pt; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.od-pfacts { display: grid; grid-template-columns: 160px 1fr; gap: 4pt 12pt; margin: 0 0 12pt; }
.od-pfacts dt { color: var(--text-secondary); }
.od-pfacts dd { margin: 0; }
.od-ptable { width: 100%; border-collapse: collapse; margin-bottom: 12pt; }
.od-ptable th, .od-ptable td { text-align: left; padding: 4pt 6pt; border-bottom: 1px solid var(--border-strong); }
.od-ptable .num { text-align: right; }
.od-psign { display: grid; grid-template-columns: 1fr 1fr; gap: 24pt; margin-top: 36pt; }
.od-psign span { border-top: 1px solid var(--text); padding-top: 4pt; }
@media (max-width: 900px) {
  .od-progress { flex-direction: column; gap: 10px; }
  .od-progress .order-step { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 0; }
  .od-progress .order-step:not(:last-child)::after { display: none; }
  .od-progress .field-help { flex: 1 1 100%; padding-left: 36px; }
}
@media (max-width: 760px) {
  .od-head-acts { margin-left: 0; }
  .od-next { padding: 16px; }
  .od-next-row { flex-wrap: wrap; gap: 12px; }
  .od-next-body { flex: 1 1 0; }                     /* beside its icon; the buttons below, the width of the card */
  .od-next-acts { width: 100%; justify-content: stretch; }
  .od-next-acts .btn { flex: 1 1 auto; }
  .od-dnfields { grid-template-columns: minmax(0, 1fr); }
  .od-dnacts { width: 100%; }
  .od-dnacts .btn { flex: 1 1 auto; }
  .od-hist li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* m321: the basket's services (each sent to its supplier — not paid here), Business settings › Orders, and New invoice's orders
   whose invoice comes later. */
.cart-svc { border-top: var(--border-width) solid var(--border); padding-top: var(--space-3); }
.cart-svcline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: 10px 0;
  border-top: var(--border-width) solid var(--border); }
.cart-svcmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 180px; }
.cart-svcmain .field-help { margin: 0; }
.cart-svcacts { display: flex; gap: 8px; flex-wrap: wrap; }
.cart-svcacts .btn-sm { height: 36px; min-height: 36px; padding: 0 12px; font-size: 13px; }
.ost-lede { margin-bottom: var(--space-4); }
.ost-card { margin-bottom: var(--space-4); }
.ost-card .form-subtitle { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.ost-opt input { margin-top: 3px; }
.ost-save { justify-content: flex-end; align-items: center; gap: var(--space-3); }
.ost-moved .field-help { margin: 0; }
.inv-notready { opacity: 0.85; }
.inv-notready .inv-when { color: var(--warning-text); font-weight: 600; }
/* m321, as Chromium showed it: the order's cards read as the board's — titles of one size, label and value side by side; the
   reject and issue forms as wide as a form; a delivery note's state beside its link; on a phone the lines as stacked rows. */
.od-main .section-title, .od-main .form-title { font-size: 20px; line-height: 1.3; font-weight: 800; margin: 0 0 6px; }
.od-sidecol .section-title, .od-sidecol .form-title { font-size: 18px; line-height: 1.3; font-weight: 800; margin: 0; }
.od-main > .card, .od-sidecol > .card { padding: 20px 22px; }
.od-main .summary-money { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 8px 0; margin: 0;
  border-top: var(--border-width) solid var(--border); font-size: 14px; }
.od-main .summary-money > :first-child { color: var(--text-secondary); }
.od-main .summary-money > :last-child { text-align: left; }
.od-main .po-note { margin: 8px 0 0; font-size: 14px; }
.od-main .po-note .field-label { font-size: 13px; }
.od-sidecol .thread { margin: 0; }
.od-reject, .od-issue { max-width: 720px; }
.od-panel .form-actions .btn-secondary { margin-right: 0; }
.od-docline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.od-docline .mr-pill { margin-left: 0; }
.od-mob { display: none; }
@media (max-width: 760px) {
  .od-main .summary-money { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .od-lines thead { display: none; }
  .od-lines tbody tr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 6px; padding: 10px 0;
    border-bottom: var(--border-width) solid var(--border); }
  .od-lines tbody td { display: block; padding: 0; border: 0; }
  .od-lines tbody td.rl-n { grid-row: 1 / span 2; }
  .od-lines tbody td.od-c-item { grid-column: 2; grid-row: 1; }
  .od-lines tbody td.od-c-total { grid-column: 3; grid-row: 1; text-align: right; }
  .od-lines tbody td.od-c-qty, .od-lines tbody td.od-c-unit { display: none; }
  .od-lines tbody td.od-c-del { grid-column: 2; grid-row: 2; text-align: left; }
  .od-mob { display: block; margin-top: 2px; font-size: 13px; color: var(--text-secondary); }
  .od-lines tfoot tr { display: flex; justify-content: space-between; gap: 12px; }
  .od-lines tfoot td { display: block; padding: 8px 0; text-align: left; }
  /* the rule above the total across the whole row, not under each of its two words */
  .od-lines tfoot tr:first-child { border-top: var(--border-width) solid var(--border-strong); }
  .od-lines tfoot tr.od-total { border-top: 2px solid var(--text); }
  .od-lines tfoot tr:first-child td, .od-lines tfoot tr.od-total td { border-top: 0; }
  .od-lines tfoot td:last-child { text-align: right; }
  /* Master O12 B3: all quantities remain visible; the sheet scrolls in its own box. */
  .od-dntable thead th, .od-dntable tbody td { display: table-cell; }
}

/* ===================== m325: Mail (Direction C) — SELYVO Mail, a tab of the marketplace (the approved Mail-tab boards). Tokens only:
   MK-02, DS-03 and WebmailUi's colour check, which also refuses a short hex, rgb(), hsl() or a named colour here. The frame is the
   market's own: body.rail-mode with .catalogue in #view.page (m285); nothing here guesses a height. ===================== */
.nav-count { margin-left: var(--space-2); }                     /* the Inbox's unread beside Mail: the market's .pill.pill-open */
body.rail-mode .catalogue > section.wm-section { display: flex; flex-direction: column; overflow: hidden; padding-bottom: var(--space-6); }
.wm-section { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; min-width: 0; }
.wm-rail { display: flex; flex-direction: column; }
.wm-rail-body { flex: 1 0 auto; display: flex; flex-direction: column; }   /* so .wm-storage sits at the bottom */
.wm-person { min-width: 0; }
.wm-person > strong { display: block; font-size: var(--label-size); line-height: var(--label-lh); }
.wm-addr { overflow-wrap: anywhere; font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary); }
.wm-sso > .title { margin-bottom: var(--space-5); }
.wm-rail-label { margin: var(--space-5) 0 7px; padding: 0 17px; font-size: 11px; line-height: 16px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--text-secondary); }
.account-person + .wm-rail-label { margin-top: var(--space-1); }
.wm-box-row, .wm-label-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--control-h);
  padding: 7px 14px 7px 17px; border: 0; border-radius: var(--radius-button); background: none; font: inherit;
  font-size: var(--label-size); line-height: var(--label-lh); color: var(--text); text-align: left; cursor: pointer; }
.wm-box-row:hover, .wm-label-row:hover { background: var(--canvas); }
.wm-box-row[aria-current="true"] { color: var(--accent-deep); font-weight: 700; }
.wm-box-row svg { color: var(--accent-deep); flex: 0 0 auto; }
.wm-box-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-box-count { margin-left: auto; font-size: var(--helper-size); }
.wm-label-row[aria-pressed="true"] { background: var(--accent-surface); color: var(--accent-deep); font-weight: 700; }
.wm-count { margin-left: auto; font-size: var(--label-size); color: var(--text-secondary); font-weight: 400; }
.wm-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--badge);
  color: var(--text); font-size: var(--micro-size); line-height: 20px; font-weight: 700; text-align: center; }
.wm-folder-head { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 17px;
  font-size: var(--label-size); color: var(--text-secondary); }
.wm-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--wm-dot); flex: 0 0 auto; }
.wm-tone-1 { --wm-dot: var(--accent);         --wm-ink: var(--accent-deep);    --wm-fill: var(--accent-surface); }
.wm-tone-2 { --wm-dot: var(--success);        --wm-ink: var(--success-text);   --wm-fill: var(--success-surface); }
.wm-tone-3 { --wm-dot: var(--warning-fill);   --wm-ink: var(--warning-text);        --wm-fill: var(--warning-surface); }
.wm-tone-4 { --wm-dot: var(--danger);         --wm-ink: var(--danger-text);         --wm-fill: var(--danger-surface); }
.wm-tone-5 { --wm-dot: var(--navy);           --wm-ink: var(--navy);           --wm-fill: var(--surface-subtle); }
.wm-tone-6 { --wm-dot: var(--text-secondary); --wm-ink: var(--text-secondary); --wm-fill: var(--surface-subtle); }
.wm-storage { margin-top: auto; padding: 14px 17px 4px; font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary); }
.wm-storage-line { display: flex; justify-content: space-between; gap: var(--space-2); }
.wm-meter { height: 6px; border-radius: 3px; background: var(--accent-surface); overflow: hidden; margin-top: var(--space-2); }
.wm-meter > i { display: block; height: 100%; background: var(--accent); }
.wm-meter.is-high > i { background: var(--warning-fill); }
.wm-meter.is-full > i { background: var(--danger); }
.wm-storage-full { margin: var(--space-2) 0 0; color: var(--danger-text); font-weight: 600; }
.wm-card { flex: 1; min-height: 0; display: flex; background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: 12px; overflow: hidden; }
.wm-list { flex: 0 0 380px; width: 380px; border-right: var(--border-width) solid var(--border); }
.wm-conv { flex: 1; min-width: 0; }
.wm-skel-row { height: 36px; margin: var(--space-2) 17px; }
.wm-skel-head { height: 47px; max-width: 320px; margin-bottom: var(--space-4); }
/* W02-X08: the account's address, why Mail did not open, and what can be done. */
.wm-sso-card { display: flex; flex-direction: column; gap: var(--space-3); }
.wm-sso-who { display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-3); border-radius: var(--radius-button);
  background: var(--surface-subtle); overflow-wrap: anywhere; }
.wm-sso-who .avatar { width: 32px; height: 32px; font-size: var(--micro-size); color: var(--accent-deep); background: var(--surface); }
.wm-sso-text { margin: 0; }
.wm-sso-acts { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 1179px) { .wm-card .wm-list { flex: 1 1 auto; width: auto; border-right: 0; }  .wm-card .wm-conv { display: none; } }
@media (max-width: 900px) {   /* the market's rail-mode falls back to a scrolling page here, and .catalogue to one column */
  body.rail-mode .catalogue > section.wm-section { overflow: visible; }
  .wm-card { min-height: 240px; }
  .wm-labels { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .wm-label-row { width: auto; } }
/* ===================== m328: Mail R2 — the list (W01-C13…C20), its search (MG02), a message read as text (R3 brings the conversation)
   and new mail's bell (MG03, MG10, MG11). Tokens only (MK-02, DS-03): no colour of its own. ===================== */
.wm-search { margin: 0; }
.wm-search-open { display: none; }                               /* MG02m: the phone's search button (767 px and below) */
.wm-search-field { display: flex; align-items: center; gap: var(--space-2); width: 300px; max-width: 100%; height: var(--control-h); padding: 0 var(--space-3);
  box-sizing: border-box; border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-input); background: var(--surface);
  color: var(--text-secondary); }
.wm-search-clear { flex: none; width: 26px; height: 26px; min-width: 26px; color: var(--text-secondary); }
.wm-search-field:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
/* As the market's own search (DS-05): the ring moves to the field around the box, never removed — transparent, so it still shows in
   a forced-colours mode. */
.wm-search-field .input { flex: 1; min-width: 0; height: auto; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.wm-search-field .input:focus, .wm-search-field .input:focus-visible { outline-color: transparent; box-shadow: none; }
.wm-head-act { display: inline-flex; align-items: center; gap: var(--space-2); }
.wm-ask p { margin: 0 0 var(--space-3); }
.wm-ask-acts { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.wm-notice { display: flex; align-items: center; gap: var(--space-2); }
.wm-notice > div { flex: 1; min-width: 0; }
.wm-chips { margin: 0; }
.wm-list { padding: 0; display: flex; flex-direction: column; overflow-y: auto; }
.wm-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.wm-row { display: flex; gap: 10px; padding: 11px 14px; border-top: var(--border-width) solid var(--border-soft); border-radius: 0; color: var(--text); text-decoration: none; }
.wm-row:hover { background: var(--canvas); }
.wm-row[aria-current="true"] { background: var(--accent-surface); }
.wm-row[aria-current="true"] .wm-who { color: var(--text); }
.wm-av { width: 40px; height: 40px; flex: 0 0 40px; font-size: 13px; font-weight: 700; color: var(--text); background: var(--surface-sunken); }
.wm-row.is-unread .wm-av, .wm-row[aria-current="true"] .wm-av, .wm-av-sys { color: var(--accent-deep); }
.wm-row > .wm-av, .wm-row.is-unread > .wm-av, .wm-row[aria-current="true"] > .wm-av { width: 36px; height: 36px; flex-basis: 36px; font-weight: 800; background: var(--accent-surface); color: var(--wm-slice-ink); }
.wm-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wm-row-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wm-who { flex: 1; min-width: 0; font-size: var(--label-size); line-height: var(--label-lh); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-sub { font-size: var(--label-size); line-height: var(--label-lh); }
.wm-row .wm-sub { font-size: var(--helper-size); line-height: var(--helper-lh); font-weight: 600; }
.wm-row .wm-who { font-weight: 600; }
.wm-row.is-unread .wm-who, .wm-row.is-unread .wm-sub { font-weight: 800; }
.wm-sub, .wm-snip { margin-top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-snip { font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary); }
.wm-when { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--micro-size); line-height: var(--micro-lh);
  color: var(--text-secondary); }
.wm-star-on { display: inline-flex; color: var(--rating); }
.wm-star-on svg { fill: currentColor; }
.wm-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
.wm-meta { margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.wm-label { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--radius-input); font-size: var(--micro-size); line-height: var(--micro-lh);
  font-weight: 650; color: var(--wm-ink); background: var(--wm-fill); }
.wm-att { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; font-size: var(--micro-size); line-height: var(--micro-lh);
  color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; padding: 10px 14px; border-top: var(--border-width) solid var(--border-soft);
  font-size: var(--helper-size); color: var(--text-secondary); }
.wm-pager-btns { display: inline-flex; gap: var(--space-1); }
.wm-empty { margin: auto; padding: var(--space-6) var(--space-4); text-align: center; color: var(--text-secondary); font-size: var(--label-size); }
.wm-empty p { margin: 0 0 var(--space-2); }
.wm-skel-li { display: flex; gap: 10px; padding: 11px 14px; border-top: var(--border-width) solid var(--border-soft); list-style: none; }
.wm-skel-av { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; }
.wm-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.wm-skel-lines .skeleton { height: 12px; }
.wm-skel-lines .skeleton:nth-child(2) { width: 80%; }
.wm-skel-lines .skeleton:nth-child(3) { width: 60%; }
.wm-conv { padding: 18px 22px; display: flex; flex-direction: column; overflow-y: auto; }
.wm-conv-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-width: 0; }
.wm-conv-head h2 { margin: 0; min-width: 0; max-width: 100%; font-size: var(--section-size); line-height: var(--section-lh); font-weight: 700; letter-spacing: -0.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-chips-line { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.wm-conv-line { margin: var(--space-1) 0 18px; font-size: var(--label-size); color: var(--text-secondary); overflow-wrap: anywhere; }
.wm-msg { padding: var(--space-4) 18px; }
.wm-msg-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); }
.wm-msg-head .wm-av { width: 32px; height: 32px; flex-basis: 32px; font-size: 12px; }
.wm-msg-who { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; overflow-wrap: anywhere; }
.wm-msg-who strong { font-size: var(--label-size); }
.wm-msg-to { margin: calc(-1 * var(--space-2)) 0 var(--space-3); }
.wm-reply-to { margin: calc(-1 * var(--space-2)) 0 var(--space-3); color: var(--warning-text); font-weight: 600; font-size: var(--helper-size); }
.wm-text { font-size: 14.5px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.wm-quote { display: block; color: var(--text-secondary); border-left: 3px solid var(--border); padding-left: var(--space-3); }
.wm-atts { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.wm-att-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.wm-conv-skel { display: flex; flex-direction: column; gap: var(--space-3); }
.wm-conv-skel .skeleton { height: 14px; }
.wm-conv-skel .wm-skel-title { height: 28px; width: 60%; }
.wm-back { display: none; align-self: flex-start; margin-bottom: var(--space-3); }
@media (max-width: 1179px) {   /* one pane at a time: a message open shows alone, with the way back to its folder (C42) */
  .wm-card.is-reading .wm-list { display: none; }
  .wm-card.is-reading .wm-conv { display: flex; }
  .wm-card .wm-back { display: inline-flex; } }
@media (max-width: 767px) {
  /* MG02m: the search a button beside the head's action; pressed (or with a search on screen) the field opens full width below them. */
  .wm-search-open { display: inline-flex; }
  .wm-search { display: none; order: 3; flex: 1 1 100%; }
  .wm-search.is-open { display: block; }
  .wm-search-field { width: 100%; }
  .mr-head .mr-tools { flex-wrap: wrap; align-items: center; }
  .mr-tools .wm-head-act { flex: 1 1 auto; justify-content: center; }
  /* The tabs in one row, scrolled sideways, as the phone board has them — not wrapped onto rows of their own. m349l (240): the row
     theirs alone, Mail · Auto · Chat under it, on the right. */
  .wm-section .mr-tabs { flex-wrap: nowrap; gap: 20px; }
  .wm-section .mr-bar > .mr-tabs { flex: 1 1 100%; min-width: 0; }
  .wm-slicer { flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2) var(--space-3); }
  .wm-slicer .wm-slice-btn { padding: 0 14px; }
  .wm-conv { padding: var(--space-4); }
  /* The sender's address is the line under the subject (C23): the head keeps the name and the date on one line. */
  .wm-msg-who .field-help { display: none; } }
/* The bell (MG03): the market's .iconbtn and .badge; its panel (MG10) the avatar menu's .acct-menu frame. */
.wm-bell-panel { width: 360px; padding: var(--space-3); gap: var(--space-2); }
.wm-bell-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-1); }
.wm-bell-head h2 { margin: 0; font-size: var(--label-size); line-height: var(--label-lh); font-weight: 700; }
.wm-bell-section { margin: 0; padding: 0 var(--space-1); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--text-secondary); }
.wm-bell-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; }
.wm-bell-row { display: flex; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-input); color: var(--text); text-decoration: none; }
.wm-bell-row:hover { background: var(--surface-subtle); }
.wm-bell-row .wm-av { width: 32px; height: 32px; flex-basis: 32px; font-size: 12px; }
.wm-bell-row .wm-who { font-weight: 700; }                       /* MG10: the sender 14/19 700, the subject 13/18 on one line */
.wm-bell-row .wm-sub { font-size: var(--helper-size); line-height: 18px; margin-top: 0; }
.wm-bell-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wm-bell-empty { margin: 0; padding: var(--space-2) var(--space-1); color: var(--text-secondary); font-size: var(--helper-size); }
.wm-bell-foot { border-top: var(--border-width) solid var(--border); padding-top: var(--space-3); }
.wm-bell-foot .switch-row strong { display: block; font-size: var(--label-size); }
.wm-bell-foot .field-error { display: block; margin-top: var(--space-1); }
@media (max-width: 640px) { .wm-bell-panel { position: fixed; left: var(--space-4); right: var(--space-4); top: 64px; width: auto; } }
/* The bell is one more control in a phone's top bar (m306 fitted seven): while it is there, the controls sit 4 px closer. */
@media (max-width: 420px) { .shell-actions:has(#wm-bell-wrap:not([hidden])) .iconbtn:not(.lang-btn) { width: 36px; } }
/* m342: and with the market's search button beside the bell, the currency's word 4 px narrower each side (8 px past the margin else). */
@media (max-width: 420px) { .shell-row--top .shell-actions:has(#wm-bell-wrap:not([hidden])) .navlink { padding-left: 2px; padding-right: 2px; } }
/* ===================== m331: Mail R3 — the conversation (W01-C22…C41): as e-mails, its toolbar and menus, the message frame, the quick
   reply; and as a chat (board MailChat, approved 13 Oct 13:39). Tokens only (MK-02, DS-03, WebmailUi's colour check). ===================== */
.wm-conv-top { display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.wm-conv-top .wm-conv-head { flex: 1 1 260px; }
.wm-conv-sub { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; margin: var(--space-1) 0 18px; }
.wm-conv-sub .wm-conv-line { flex: 1 1 200px; margin: 0; }
.wm-tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.wm-tool { color: var(--text); }
.wm-tool.wm-star-on { color: var(--rating); }
.wm-menu-wrap { position: relative; display: inline-flex; }
.wm-menu { min-width: 248px; }
.wm-menu .menu-item { min-height: var(--control-h); text-decoration: none; }
.wm-menu .menu-item svg { flex: 0 0 auto; color: var(--text-secondary); }
.wm-menu-pick { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-1) var(--space-3) var(--space-2); }
.wm-menu-pick .catpick-btn { width: 100%; }
.wm-pop { padding: var(--space-3); gap: var(--space-3); }
.wm-pop-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wm-pop .chip-toggle { display: inline-flex; align-items: center; gap: var(--space-2); }
/* m347 (board MailChatInbox): Mail · Auto · Chat on the Inbox's and Sent's tabs' row (m349l, 240: at its right), Formal · Business usual
   in a chat's head and in a new chat — one slicer: a track, the chosen part raised; Auto's two colours, a chat's row, its greeting and
   closing. Tokens only. */
/* Source155: MailChatLists, MailChatReading and MailComposeBottom use the same
   neutral slicer and selected ink. These are control tokens, not status colours. */
:root { --wm-slice-fill: #E6EDF3; --wm-slice-ink: #005E6E; --wm-slice-shadow: 0 1px 3px rgba(7,28,60,.18); }
.wm-slice { display: inline-flex; flex: none; align-self: flex-start; gap: 2px; padding: 3px; border: 0;
  border-radius: var(--radius-card); background: var(--wm-slice-fill); }
.wm-slice-btn { min-height: 34px; padding: 0 14px; border: 0; border-radius: var(--radius-button); background: transparent;
  color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.wm-slice-btn:hover { color: var(--text); }
.wm-slice-btn[aria-pressed="true"] { background: var(--surface); color: var(--wm-slice-ink); box-shadow: var(--wm-slice-shadow); }
.wm-slice-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.wm-slice-btn:disabled { cursor: default; }
.wm-slicer { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
.wm-legend-keys { display: inline-flex; gap: var(--space-4); color: var(--text-secondary); }
.wm-key { display: inline-flex; align-items: center; gap: 6px; font-size: var(--micro-size); line-height: var(--micro-lh); white-space: nowrap; }
.wm-key-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-surface); box-shadow: inset 0 0 0 1px var(--accent-line); }
.wm-key-chat { background: var(--accent-surface); box-shadow: inset 0 0 0 2px var(--accent-deep); }
.wm-av.wm-av-mail, .wm-row.is-unread .wm-av-mail { background: var(--accent-surface); color: var(--wm-slice-ink); }
.wm-av.wm-av-chat, .wm-row.is-unread .wm-av-chat, .wm-row[aria-current="true"] .wm-av-chat { background: var(--accent-surface); color: var(--wm-slice-ink);
  box-shadow: inset 0 0 0 2px var(--accent-deep); }
.wm-mc-count { flex: none; padding: 0 7px; border-radius: 999px; background: var(--accent-surface); color: var(--accent-deep); font-size: var(--micro-size);
  line-height: var(--micro-lh); font-weight: 800; }
.wm-mc-line { margin-top: 2px; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--helper-size); line-height: var(--helper-lh);
  color: var(--text-secondary); }
.wm-mc-line svg { flex: none; color: var(--accent-deep); }
.wm-mc-line span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-tone { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; }
.wm-tone-l { font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary); }
.wm-mc-field { margin: 0 0 var(--space-3); }
.wm-mc-close { margin: var(--space-3) 0 0; }
.wm-mc-text { display: block; width: 100%; box-sizing: border-box; height: auto; min-height: 0; padding: var(--space-2) var(--space-3);
  line-height: var(--body-lh); resize: vertical; }
.wm-mc-field .field-help, .wm-c-field .field-help { margin: var(--space-1) 0 0; }
.wm-mc-added { margin: 2px 0 0; font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.wm-bub-row.is-mine .wm-mc-added { text-align: right; }
.acct-mc-skel { height: 64px; }
.acct-mc-set { border: 0; padding: 0; margin: 0 0 var(--space-4); min-width: 0; }
.acct-mc-set legend { padding: 0; margin-bottom: var(--space-2); }
.acct-mc-choice { min-height: 0; }
.wm-c-text.wm-c-chat { min-height: 180px; }
.wm-spam, .wm-pictures { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.wm-pictures > div { flex: 1 1 220px; }
.wm-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.wm-thread-item { min-width: 0; }
.wm-msg-line { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: var(--control-h); padding: var(--space-3) var(--space-4);
  font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.wm-msg-line strong { flex: none; font-size: var(--label-size); }
.wm-msg-line .field-help { flex: none; }
.wm-msg-line .wm-snip { flex: 1; min-width: 0; margin: 0; font-size: var(--label-size); }
.wm-msg-line[aria-busy="true"] { opacity: .7; }
.wm-msg-fold { width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.wm-frame { display: block; width: 100%; min-height: 120px; border: 0; background: var(--surface); }
.wm-reply-host { margin-top: auto; padding-top: var(--space-3); border-top: var(--border-width) solid var(--border); }
.wm-reply { display: flex; flex-direction: column; gap: 10px; }
.wm-reply textarea { display: block; width: 100%; min-height: 72px; max-height: 200px; resize: vertical; box-sizing: border-box; margin-top: 0; }
.wm-reply-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 0; }
.wm-reply-foot .field-help { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.wm-reply-foot .wm-btns { margin-left: auto; display: flex; gap: 10px; }
.wm-reply-foot .btn { display: inline-flex; align-items: center; gap: var(--space-2); }
.wm-reply-foot .btn-primary, .wm-drawer-foot .btn-primary { background: var(--accent-deep); color: var(--text-on-accent); }
.wm-reply-foot .btn-primary:hover, .wm-drawer-foot .btn-primary:hover { background: var(--wm-slice-ink); }
.wm-reply-foot .btn { height: 40px; }
/* As a chat — the other side at the left with their avatar, you at the right; a day line where the day changes. */
.wm-chat { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-3); }
.wm-day { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0; color: var(--text-secondary);
  font-size: var(--micro-size); line-height: var(--micro-lh); font-weight: 700; }
.wm-day::before, .wm-day::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.wm-bub-row { display: flex; align-items: flex-end; gap: var(--space-2); max-width: 100%; }
.wm-bub-row.is-mine { flex-direction: row-reverse; }
.wm-bub-row .wm-av { width: 32px; height: 32px; flex-basis: 32px; font-size: 12px; margin-bottom: 22px; }
.wm-bub-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: min(560px, 78%); }
.wm-bub-row.is-mine .wm-bub-col { align-items: flex-end; }
.wm-bub-name { margin: 0; font-size: var(--micro-size); line-height: var(--micro-lh); font-weight: 700; color: var(--text-secondary); }
.wm-bub { padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); min-width: 0; overflow-wrap: anywhere; }
.wm-bub-row.is-mine .wm-bub { background: var(--accent-surface); border-color: var(--accent-line); }
.wm-bub-text { font-size: var(--body-size); line-height: var(--body-lh); }
.wm-bub-atts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.wm-bub-att { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3); max-width: 100%;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-input); background: var(--surface); color: var(--text); font-weight: 600;
  text-decoration: none; overflow-wrap: anywhere; }
.wm-bub-meta { margin: 0; font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.wm-bub-sent { font-weight: 600; }
.wm-bub-tools { align-self: center; }
.wm-bub-more { opacity: .55; }
.wm-bub-row:hover .wm-bub-more, .wm-bub-more:focus-visible, .wm-bub-more[aria-expanded="true"] { opacity: 1; }
.wm-bub-row.is-mine .wm-bub-menu { right: auto; left: 0; }      /* yours: the ⋯ at the bubble's left, the menu over it */
.wm-bub-card p { margin: 0 0 var(--space-2); }
.wm-card-kind { display: flex; align-items: center; gap: var(--space-2); }
.wm-card-sub { overflow-wrap: anywhere; }
.wm-whole { min-width: 0; }
.wm-whole .msg { margin-bottom: var(--space-2); }
.wm-chat-host { margin-top: auto; padding-top: var(--space-3); border-top: var(--border-width) solid var(--border); }
.wm-only { margin: 0 0 var(--space-2); }
.wm-chat-compose { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: var(--border-width) solid var(--border-strong);
  border-radius: 10px; background: var(--surface); }
.wm-chat-field { display: flex; align-items: flex-end; padding: 0; border: 0; background: var(--surface); }
.wm-chat-field:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wm-chat-field textarea { flex: 1; min-width: 0; min-height: 44px; max-height: none; overflow-y: hidden; padding: 0; border: 0; background: transparent; resize: none;
  box-shadow: none; font-size: var(--label-size); }
.wm-chat-field textarea:focus, .wm-chat-field textarea:focus-visible { outline-color: transparent; box-shadow: none; }
.wm-chat-foot { display: flex; align-items: center; gap: 10px; }
.wm-chat-foot > .field-help, .wm-chat-foot-space { flex: 1 1 auto; min-width: 0; }
.wm-chat-foot > .field-help { font-size: var(--micro-size); }
.wm-chat-send { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 var(--space-4);
  border: 0; border-radius: var(--radius-button); background: var(--accent-deep); color: var(--text-on-accent); font: inherit; font-size: var(--label-size); font-weight: 700; cursor: pointer; }
.wm-chat-send:disabled { background: var(--border-strong); cursor: default; }
.wm-chat-send:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wm-chat-compose .field-help { margin: var(--space-2) 0 0; }
@media (max-width: 767px) {
  .wm-conv-top { gap: var(--space-2); }
  .wm-tone { order: -1; }
  .wm-tools { margin-left: -10px; }
  .wm-bub-col { max-width: 86%; } }
/* ===================== m332: Mail R4 — writing (W03): the compose drawer under the market's header, as the approved board MailCompose
   draws it (on a phone, the whole screen); New message (MG09); Attach beside a reply box (C39). Tokens only, as the blocks above. ===================== */
.wm-drawer { width: 640px; top: calc(var(--topbar-h) + var(--navbar-h)); }
.wm-drawer .drawer-head .panel-title { margin: 0; }
.wm-drawer .drawer-body { flex: 1 1 auto; min-height: 0; gap: var(--space-4); }
.wm-c-field { margin: 0; }
.wm-c-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.wm-c-more { display: inline-flex; gap: var(--space-3); }
.wm-recips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: var(--control-h); height: auto; padding: 6px 8px; cursor: text; }
.wm-recips input { flex: 1 1 160px; min-width: 120px; border: 0; outline: 0; font: inherit; color: inherit; background: transparent; padding: 4px 2px;
  box-shadow: none; }
.wm-recips input:focus, .wm-recips input:focus-visible { outline-color: transparent; box-shadow: none; }
.wm-recips:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }   /* the box's own ring is off: the field shows it */
.wm-recips .chip { max-width: 100%; overflow-wrap: anywhere; cursor: default; }
.wm-recips .chip-x { border: 0; background: transparent; color: inherit; padding: 0 2px; font: inherit; }
.wm-chip-bad { background: var(--danger-surface); color: var(--danger-text); }
.wm-c-from-only { margin: 0; font-size: var(--label-size); line-height: var(--label-lh); color: var(--text-secondary); }
.wm-c-from-only strong { color: var(--text); }
.wm-c-text { min-height: 280px; resize: vertical; }
.wm-c-atts { display: flex; flex-direction: column; gap: var(--space-2); }
.wm-c-atts:empty { display: none; }
.wm-c-att { margin-top: 0; }
.wm-c-att .wm-c-att-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wm-c-att.is-bad { border-color: var(--danger); }
.wm-c-att .field-error { margin: 0; }
.wm-c-bar { display: block; width: 180px; max-width: 100%; height: 4px; border-radius: 2px; }
.wm-c-attach .btn, .wm-draft-acts .btn, .wm-compose-btn { display: inline-flex; align-items: center; gap: var(--space-2); }
.wm-c-skel { display: flex; flex-direction: column; gap: var(--space-3); }
.wm-c-skel .wm-skel-title { height: 28px; width: 50%; }
.wm-c-skel-text { height: 200px; }
.wm-drop { outline: 2px dashed var(--accent-line); outline-offset: -8px; }
.wm-drawer-foot { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4) var(--space-6);
  border-top: var(--border-width) solid var(--border); background: var(--surface); }
.wm-drawer-foot .field-help { flex: 1 1 180px; min-width: 0; margin: 0; }
.wm-drawer-foot .wm-btns { margin-left: auto; display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }
.wm-drawer-foot .btn { display: inline-flex; align-items: center; gap: var(--space-2); }
.wm-drawer-foot .wm-c-savebtn { border-color: var(--accent-deep); color: var(--wm-slice-ink); }
.wm-draft-acts { margin-top: var(--space-4); }
.wm-chat-attach { flex: none; color: var(--text-secondary); }
@media (max-width: 900px) { .wm-drawer { width: 100%; } }
/* ===================== m349r (board MailComposeBottom, approved 22 Oct 11:29 — 485–492): a new message rises from the bottom — the dock,
   over the column of the mail list (its left edge, right of the left menu) to the page's right (491 a); 470 px high, never more than the
   window less the header; up to three side by side (492 b), a minimized one a bar at the left; on a phone one at a time, a sheet from the
   bottom to under the top bar (490). Inside, the compose as built (488). Tokens only. ===================== */
.wm-dock { display: flex; align-items: flex-end; gap: 10px; pointer-events: none; position: relative; z-index: 35; }
.wm-dock[hidden] { display: none; }
.wm-dock > * { pointer-events: auto; }
@media (min-width: 901px) {
  /* the mail page's grid: the dock in the cell of the mail list's column, over it — the list and the conversation above it usable */
  .wm-mail > .wm-rail { grid-area: 1 / 1; }
  .wm-mail > section { grid-area: 1 / 2; }
  .wm-mail > .wm-dock { grid-area: 1 / 2; align-self: stretch; min-height: 0; margin-right: var(--space-3); }
}
@media (min-width: 768px) and (max-width: 900px) {
  .wm-dock { position: fixed; left: var(--gutter); right: var(--gutter); bottom: 0; top: calc(var(--topbar-h) + var(--navbar-h)); }
}
.wm-dock-win { flex: 1 1 0; min-width: 0; height: min(470px, 100%); display: flex; flex-direction: column; background: var(--surface);
  border-radius: var(--space-3) var(--space-3) 0 0; box-shadow: var(--shadow-dock); container-type: inline-size; overflow: hidden; }
.wm-dock-win.is-full { height: 100%; }
.wm-dock-head, .wm-dock-bar { display: flex; align-items: center; gap: var(--space-1); background: var(--text); color: var(--text-on-accent);
  border-radius: var(--space-3) var(--space-3) 0 0; }
.wm-dock-head { flex: none; min-height: 52px; padding: var(--space-2) 10px var(--space-2) 18px; }
.wm-dock-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 15px; line-height: 20px; font-weight: 700; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.wm-dock-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0;
  border-radius: var(--radius-button); background: transparent; color: inherit; cursor: pointer; }
.wm-dock-btn:hover { background: var(--navy); }
.wm-dock-btn:focus-visible, .wm-dock-name:focus-visible { outline: 2px solid var(--text-on-accent); outline-offset: -2px; }
.wm-dock-btn:disabled { cursor: default; opacity: .6; }
.wm-dock-bar { flex: 0 0 272px; min-width: 0; min-height: 46px; padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4); box-shadow: var(--shadow-dock); }
.wm-dock-name { flex: 1 1 auto; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: var(--label-size);
  line-height: var(--label-lh); font-weight: 700; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
/* inside: the compose as built — its body scrolls, its foot stays; a chat's To and tone in rows, its one box filling the window */
.wm-dock-win .wm-c-body { flex: 1 1 auto; min-height: 0; gap: 10px; padding: 14px 18px; }
.wm-dock-win .wm-drawer-foot { flex: none; gap: 10px; padding: 10px 18px 14px; border-top: var(--border-width) solid var(--border); }
.wm-dock-win .wm-drawer-foot .field-help { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-dock-win .wm-drawer-foot .wm-btns { flex: none; flex-wrap: nowrap; gap: 10px; }
.wm-dock-win .wm-drawer-foot .btn { height: 38px; min-width: 0; }
.wm-c-fsub strong { color: var(--text); }
.wm-dock-win .wm-c-body--chat .wm-c-tofield { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; column-gap: 10px; }
.wm-dock-win .wm-c-body--chat .wm-c-tofield > .wm-c-label-row { grid-column: 1; }
.wm-dock-win .wm-c-body--chat .wm-c-tofield > :not(.wm-c-label-row) { grid-column: 2; }
.wm-dock-win .wm-c-body--chat .wm-c-tonefield { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
.wm-dock-win .wm-c-body--chat .wm-c-tonerow .field-label { width: 52px; }
.wm-dock-win .wm-c-tonehelp { margin: 0; }
.wm-dock-win .wm-c-boxfield { flex: 1 0 auto; display: flex; flex-direction: column; min-height: auto; }
.wm-dock-win .wm-c-boxfield > .field-label, .wm-dock-win .wm-c-texthelp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wm-dock-win .wm-mc-box { flex: 1 0 auto; min-height: 120px; overflow-y: visible; }
/* three side by side (a narrow window): the tone without its label and help, the foot the subject alone, Save draft and Send — as drawn */
@container (max-width: 520px) {
  .wm-dock-win .wm-drawer-foot .btn { height: 34px; }
  .wm-c-body--chat .wm-c-tofield { grid-template-columns: 30px minmax(0, 1fr); }
  .wm-c-body--chat .wm-c-tonerow .field-label, .wm-c-tonehelp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .wm-c-ffrom, .wm-c-fsep { display: none; }
  /* the one chosen and the box on one line, as drawn — the box's hint while nobody is chosen; typed in, the box its own line again */
  .wm-recips .chip ~ input { flex: 1 1 0; min-width: 12px; }
  .wm-recips .chip ~ input:not(:focus)::placeholder { color: transparent; }
  .wm-recips .chip ~ input:focus { min-width: 120px; }
  .wm-drawer-foot [data-wm-c="discard"] { display: none; }
  .wm-c-body { padding: 12px 14px; }
}
@media (max-width: 767px) {
  /* a sheet from the bottom to under the top bar — the whole width, one at a time; – and ⤢ not offered (490) */
  .wm-dock { position: fixed; left: 0; right: 0; top: var(--topbar-h); bottom: 0; z-index: 45; }
  .wm-dock > .wm-dock-bar, .wm-dock > .wm-dock-win:not(:last-child) { display: none; }
  .wm-dock-win { height: 100%; border-radius: var(--space-4) var(--space-4) 0 0; }
  .wm-dock-head { border-radius: var(--space-4) var(--space-4) 0 0; padding-left: var(--space-4); }
  .wm-dock-min, .wm-dock-full, .wm-dock-who { display: none; }
  .wm-dock-win .wm-c-body--chat .wm-c-tofield { display: block; }
  /* the tone the sheet's width, its two choices each as wide as its word (the board's phone) */
  .wm-dock-win .wm-c-body--chat .wm-c-tonefield { display: block; }
  .wm-dock-win .wm-c-tonerow .wm-slice { flex: 1 1 auto; }
  .wm-dock-win .wm-c-tonerow .wm-slice-btn { flex: none; white-space: nowrap; }
  .wm-dock-win .wm-c-body--chat .wm-c-tofield .wm-c-label-row { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .wm-dock-win .wm-c-foot--chat .wm-c-savebtn { display: inline-flex; }          /* the sheet's board: Save draft and Send */
  .wm-dock-win .wm-drawer-foot .btn { height: 40px; }
  .wm-dock-win .wm-drawer-foot [data-wm-c="discard"], .wm-dock-win .wm-drawer-foot .field-help { display: none; }
  .wm-dock-win .wm-drawer-foot .wm-btns { width: auto; margin-left: 0; justify-content: flex-start; }
  .wm-dock-win .wm-drawer-foot .wm-btns [data-wm-c="send"] { margin-left: 0; }
}
/* m349t (TopTabs 449): on a phone the bar is one row again — the button at the tabs' end — and Mail's drawer starts under it as everywhere. */
@media (max-width: 640px) {
  .wm-drawer { top: 0; z-index: 45; }
  .wm-drawer .drawer-head { padding: var(--space-3) var(--space-4); }
  .wm-drawer .drawer-body { padding: var(--space-4); }
  .wm-drawer-foot { padding: var(--space-3) var(--space-4); }
  .wm-drawer-foot .is-limits { display: none; }             /* the phone board's foot: its buttons alone, Send at the right */
  .wm-drawer-foot .wm-btns { width: 100%; margin-left: 0; justify-content: flex-start; }
  .wm-drawer-foot .wm-btns [data-wm-c="send"] { margin-left: auto; }
  .wm-compose-label { display: none; }
  .wm-compose-btn { min-width: var(--control-h); padding: 0 var(--space-3); } }
/* ===================== m336: boards F, G and C (approved 12 Oct, 18:14) — a supplier's own delivery-note numbers and what it sends its
   customers (Business settings › Orders), the order's documents as both sides want them, and Confirm what arrived — a delivery note
   made from the customer's receipt. Tokens only. ===================== */
.chip-new { background: var(--accent-surface); color: var(--navy); font-size: var(--micro-size); vertical-align: middle; }
.ost-num-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.ost-num-row .field { margin-bottom: 0; }
.ost-opt--off { cursor: not-allowed; }
.ost-opt--off strong { color: var(--text-secondary); }
.ost-num-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card); background: var(--surface-subtle); }
.ost-num-next strong { font-size: 18px; line-height: 24px; font-variant-numeric: tabular-nums; }
.ost-notyet { margin-top: var(--space-2); }
.od-rctable .od-rc-tick { width: 44px; text-align: center; }
.od-rctable .od-rc-tick input { width: 20px; height: 20px; accent-color: var(--accent); }
.od-rctable label { cursor: pointer; }
.od-rctable tr.od-rc-off td { color: var(--text-secondary); }
.od-rctable tr.od-rc-off .od-rcq { background: var(--surface-subtle); color: var(--text-secondary); border-style: dashed; cursor: not-allowed; }
.od-rc-left { margin: var(--space-2) 0 0; }
.od-rcform + .notice { margin-top: var(--space-3); }
.od-dn-series { display: block; }
/* The supplier's delivery-note form hides its 4th column on a phone (delivered before); the receipt's 4th is what arrives now. */
.od-rctable thead th:nth-child(4), .od-rctable tbody td:nth-child(4) { display: table-cell; }
@media (max-width: 640px) {
  .ost-num-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ost-num-row .field:first-child { grid-column: 1 / -1; }
  .od-rctable .od-rcq { width: 72px; } }
/* ===================== m335: board A — a category on each line of a request, an offer, an order and an invoice (approved 12 Oct,
   18:14). Its chip: the request's, followed — a dashed edge in the muted ink; the line's own — the accent's tint, in the navy (the
   board's dark teal is no token, and the accent's own on its tint reads 4.4:1); AI's suggestion — the violet. The line's card opens on
   the side; on a phone (640 px and less) from below, with Done. Tokens only. ===================== */
.rl-sheet { min-width: 640px; }
.rl-sheet .rl-cat { width: 196px; padding: 4px 8px; }
.rl-sheet tr.rl-row--on td { background: var(--surface-subtle); }
.rl-sheet tr.rl-row--on td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.lc-lede { margin-top: 0; }
.lc-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 2px 10px; border: var(--border-width) solid transparent;
  border-radius: 999px; font: inherit; font-size: var(--helper-size); font-weight: 700; line-height: var(--helper-lh); text-align: left; cursor: pointer; }
.lc-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-chip > svg { flex: none; }
.lc-chip--follow, .lc-chip--none { background: var(--surface); border-style: dashed; border-color: var(--border-strong); color: var(--text-secondary); font-weight: 600; }
.lc-chip--own { background: var(--accent-surface); color: var(--navy); }
.lc-chip--ai { background: var(--violet-surface); color: var(--violet); }
.lc-chip--blank { padding-left: 0; background: none; color: var(--text-secondary); font-weight: 400; cursor: default; }
.lc-chip--on { box-shadow: 0 0 0 2px var(--accent); }
.lc-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lc-chip--sample { cursor: default; }
.lc-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.lc-legend li { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.lc-count { color: var(--text-secondary); }
.lc-name { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--text-secondary); font-size: var(--helper-size); line-height: var(--helper-lh); }
.lc-name > svg { flex: none; }
.lc-doc { display: flex; width: fit-content; max-width: 100%; margin-top: 4px; }
.lc-buyers { margin-top: 0; }
.rl-review .lc-name { margin-top: 0; }
.catpick-opt--code { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: center; }
.catpick-opt--code .catpick-name, .catpick-opt--code .catpick-path { grid-column: 1; }
.catpick-opt--code .catpick-code { grid-column: 2; grid-row: 1 / span 2; }
.catpick-code { color: var(--text-secondary); font-size: var(--micro-size); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-panel .lc-of { margin: 0; color: var(--text-secondary); font-size: var(--micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lc-panel .lc-title { margin: 2px 0 0; font-size: 18px; line-height: 24px; overflow-wrap: anywhere; }
.lc-panel .lc-title:focus { outline-color: transparent; }
.lc-panel .lc-bits { margin: 2px 0 var(--space-3); }
.lc-panel .lc-field { margin-bottom: var(--space-2); }
.lc-panel .lc-now { margin: 0; }
.lc-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--space-2); color: var(--violet); font-size: var(--helper-size); }
.lc-back { margin: 0 0 var(--space-2); }
.lc-back .linkbtn { font-size: var(--helper-size); text-align: left; }
.lc-saved { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--space-2); color: var(--success-text); font-size: var(--helper-size); font-weight: 600; }
.lc-nav { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); }
.lp-done { display: none; }
.np-catrow { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-5) var(--space-3); }
@media (max-width: 640px) {
  .lp-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; max-height: 82vh; margin: 0; overflow-y: auto;
    padding: var(--space-5) var(--space-4) var(--space-4); border-radius: 16px 16px 0 0; background: var(--surface);
    box-shadow: 0 -10px 30px rgba(7, 28, 60, .22); }
  .lp-done { display: block; margin-top: var(--space-4); }
  .np-catrow { padding: 0 var(--space-4) var(--space-3); } }
/* ===================== m334: Mail R5 — Mail settings (W04, board MailSettings), the folder picker of the narrow widths (W01-C43, board
   MailPhone) and the gear (MG04). Tokens only, as the Mail blocks above. ===================== */
.wm-gear { flex: 0 0 auto; border: var(--border-width) solid var(--border-strong); background: var(--surface); }
.wm-gear:hover { border-color: var(--accent); }
.wm-gear[aria-current="page"] { border-color: var(--accent); background: var(--accent-surface); color: var(--accent-deep); }
.wm-folder-pick { display: none; }                               /* C43: only at 900 px and below, instead of the rail's body */
.wm-box-line { display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: var(--control-h); margin: 0; padding: 0 var(--space-3);
  box-sizing: border-box; border: var(--border-width) solid var(--border); border-radius: var(--radius-input); background: var(--surface);
  font-size: var(--label-size); line-height: var(--label-lh); color: var(--text-secondary); }
.wm-box-line svg { flex: 0 0 auto; color: var(--accent-deep); }
.wm-box-line .wm-box-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 700; }
.wm-box-unread { flex: 0 0 auto; white-space: pre; }
.wm-pick-row { display: flex; align-items: center; gap: var(--space-3); }
.wm-pick { flex: 1 1 auto; min-width: 0; }
.wm-pick .catpick, .wm-pick .catpick-btn { width: 100%; }
@media (max-width: 900px) {
  .wm-rail { background: none; border: 0; border-radius: 0; padding: 0; }   /* the aside stays (the rail's host); only C43 shows */
  .wm-rail > .wm-rail-body { display: none; }
  .wm-folder-pick { display: flex; flex-direction: column; gap: var(--space-3); }
  .mr-tools > .wm-gear { display: none; } }                          /* the head's gear: C43 has its own */
/* W04: a plain section that scrolls under its pinned title (§8); the cards one under another, at most 760 wide, 20 apart. */
#wm-page .rail-head > .lede { max-width: 760px; }
#wm-set-title:focus { outline-color: transparent; }              /* focused when W04 opens (a page of its own); not a control — DS-05:
                                                                    transparent, never removed, so a forced-colours mode still shows it */
.wm-set-head { max-width: 760px; }
.wm-set-head:empty { display: none; }
.wm-set-head .wm-notice { margin-bottom: 20px; }
.wm-set-cards { display: flex; flex-direction: column; gap: 20px; max-width: 760px; margin-top: var(--space-3); }
.wm-set-card { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.wm-set-card > .section-title { margin: 0; }
.wm-set-field { margin: 0; min-width: 0; }
.wm-set-help { margin: calc(-1 * var(--space-2)) 0 0; }
.wm-set-value { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.wm-set-none { margin: 0; }
.wm-set-sig { width: 100%; box-sizing: border-box; }
.wm-set-switch { align-items: center; }
.wm-set-check .field-help { display: block; }
.wm-set-pics .catpick { max-width: 330px; }
.wm-set-note { align-items: flex-start; background: var(--accent-surface); }
.wm-set-note > svg { flex: 0 0 auto; margin-top: 1px; color: var(--accent-deep); }
.wm-set-note p { margin: 0; }
.wm-set-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wm-set-row { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: var(--space-1) 0;
  border-bottom: var(--border-width) solid var(--border); }
.wm-set-row:last-of-type { border-bottom: 0; }
.wm-set-row > .wm-swatch { width: 14px; height: 14px; border-radius: 3px; }
.wm-set-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.wm-set-addr { color: var(--text-secondary); }
.wm-set-rename { flex: 1 1 auto; min-width: 0; }
.wm-set-acts { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--space-4); }
.wm-set-acts .linkbtn { text-decoration: none; min-height: var(--control-h); }
.wm-set-acts .linkbtn:hover { text-decoration: underline; }
.wm-set-askrow { list-style: none; padding: var(--space-2) 0; }
.wm-set-new { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-4); align-items: end; }
.wm-set-new-id { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: start; }
.wm-set-new-id .wm-set-add { margin-top: calc(var(--label-lh) + var(--space-2)); }
.wm-set-new .field { margin: 0; min-width: 0; }
.wm-set-tones { display: flex; align-items: center; gap: 6px; min-height: var(--control-h); }
.wm-set-tone { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 2px solid transparent; background: none; cursor: pointer; }
.wm-set-tone > .wm-swatch { width: 26px; height: 26px; border-radius: 50%; }
.wm-set-tone[aria-checked="true"] { border-color: var(--text); }
.wm-set-tone:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wm-set-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.wm-set-saved, .wm-set-cardErr { margin: 0; padding: var(--space-2) var(--space-3); align-items: center; gap: var(--space-2); }
.wm-set-save { margin-left: auto; min-width: 88px; }
.wm-set-save[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.wm-set-box { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); overflow-wrap: anywhere; }
.wm-set-skel-title { display: block; width: 40%; height: 30px; }
.wm-set-skel { display: block; height: var(--control-h); }
@media (max-width: 640px) {
  .wm-set-new, .wm-set-new-id { grid-template-columns: minmax(0, 1fr); }
  .wm-set-new-id .wm-set-add { margin-top: 0; }
  .wm-set-add { justify-self: start; }
  .wm-set-row { flex-wrap: wrap; } }

/* ===================== m326: My account › Mailbox — a SELYVO mailbox for each business a person is in (boards MailboxGet and
   MailboxMine, approved 13 Oct 01:03). Tokens only, as the Mail block above. ===================== */
.mbx-lede { margin: 0 0 var(--space-4); }
.mbx-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--space-5); align-items: start; }
.mbx-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.mbx-card .form-title { margin-bottom: var(--space-2); }
.mbx-big-help { font-size: var(--body-size); line-height: var(--body-lh); margin-top: 0; }
.mbx-addr { display: flex; align-items: stretch; max-width: 600px; }
.mbx-addr-local { flex: 1 1 auto; display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-h); padding: 0 var(--space-3);
  border: var(--border-width) solid var(--border-strong); border-right: 0; border-radius: var(--radius-input) 0 0 var(--radius-input);
  background: var(--surface-subtle); font-weight: 700; font-size: 17px; }
.mbx-unknown { color: var(--border-strong); letter-spacing: .2em; }
.mbx-made { margin-left: auto; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.mbx-addr-domain { flex: none; display: flex; align-items: center; padding: 0 var(--space-3); border: var(--border-width) solid var(--border-strong);
  border-radius: 0 var(--radius-input) var(--radius-input) 0; background: var(--surface-subtle); color: var(--text-secondary); font-size: 17px; }
.mbx-choices { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.mbx-choices legend { padding: 0; margin-bottom: var(--space-2); }
.mbx-choice { display: flex; gap: var(--space-3); align-items: flex-start; min-height: var(--control-h); cursor: pointer; }
.mbx-choice input { flex: none; margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--accent-deep); }
.mbx-choice .field-help { display: block; }
.mbx-kicker { display: block; font-size: var(--micro-size); line-height: var(--micro-lh); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-secondary); }
.mbx-inbox { display: flex; flex-direction: column; gap: var(--space-2); }
.mbx-preview { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card); background: var(--surface); }
.mbx-preview .avatar { flex: none; width: 40px; height: 40px; color: var(--accent-deep); background: var(--accent-surface); }
.mbx-preview-who { min-width: 0; overflow-wrap: anywhere; }
.mbx-preview-who .field-help { display: block; }
.mbx-get-acts { align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.mbx-get-acts .btn svg { margin-right: var(--space-2); vertical-align: -4px; }
.mbx-top-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.mbx-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-card);
  background: var(--accent-surface); color: var(--accent-deep); }
.mbx-top-addr { min-width: 0; }
.mbx-address { display: block; font-size: var(--section-size); line-height: var(--section-lh); font-weight: 800; overflow-wrap: break-word; }
.mbx-open { margin-left: auto; }
.mbx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.mbx-tile { padding: var(--space-3); border-radius: var(--radius-card); background: var(--surface-subtle); border: var(--border-width) solid var(--border);
  display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mbx-name-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.mbx-name-acts .btn-secondary { margin-right: 0; }      /* board B: Save on the right — no Back beside it */
.mbx-pw { display: flex; flex-direction: row; gap: var(--space-3); align-items: flex-start; }
.mbx-shield { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-card);
  background: var(--success-surface); color: var(--success-text); }
.mbx-pw-last { margin-top: var(--space-1); }
.mbx-del { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.mbx-del > div { flex: 1 1 320px; min-width: 0; }
.mbx-points dl { margin: 0; }
.mbx-points dt { font-weight: 700; font-size: var(--label-size); line-height: var(--label-lh); margin-top: var(--space-3); }
.mbx-points dd { margin: 2px 0 0; font-size: var(--label-size); line-height: var(--label-lh); color: var(--text-secondary); }
.mbx-dialog { width: min(560px, calc(100vw - 2rem)); }
.mbx-del-list { margin: 0 0 var(--space-4); padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.mbx-typed { font-family: ui-monospace, Menlo, Consolas, monospace; }
.member-mailbox { display: flex; align-items: center; gap: var(--space-1); overflow-wrap: anywhere; }
.member-mailbox svg { flex: none; color: var(--accent-deep); }
.member-ask { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3);
  border-radius: var(--radius-card); background: var(--danger-surface); }
.member-ask .field-help { flex: 1 0 100%; margin: 0; }
@media (max-width: 1179px) { .mbx-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .mbx-tiles, .mbx-name-cols { grid-template-columns: minmax(0, 1fr); }
  .mbx-open { margin-left: 0; }
  /* The address in two rows: the four letters with Made for you, then the domain — side by side they are wider than a phone. */
  .mbx-addr { flex-direction: column; }
  .mbx-addr-local { border-right: var(--border-width) solid var(--border-strong); border-bottom: 0; border-radius: var(--radius-input) var(--radius-input) 0 0; }
  .mbx-addr-domain { min-height: var(--control-h); border-radius: 0 0 var(--radius-input) var(--radius-input); overflow-wrap: anywhere; }
  .mbx-addr-local, .mbx-addr-domain { font-size: var(--body-size); }
  .mbx-address { font-size: calc(var(--section-size) - 4px); } }

/* ===================== m337: boards B and D (approved 12 Oct 18:14) — receiving: over-delivery, lines not in the order, What the customer
   takes, My account › Orders › Receiving; accepting with another date: Needed by, the panel, the customer told, an order needed sooner.
   Tokens only. ===================== */
/* D — the purchase order's Needed by; the supplier's panel; what both read once another date is agreed */
.po-need .chip-new { margin-left: var(--space-1); }
.po-need .dp-wrap, .po-need input[type="date"] { max-width: 260px; }
.od-datepanel { max-width: 760px; }
.od-date-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.od-date-row .field { flex: 0 1 220px; min-width: 0; }
.od-date-ro { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); background: var(--surface-subtle); color: var(--text); font-weight: 700; }
.od-date-ro svg { flex: none; color: var(--text-secondary); }
.od-date-acts { justify-content: flex-start; }
.od-told { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--accent-surface); border-color: var(--accent-line); color: var(--navy); }
.od-told > svg { flex: none; margin-top: 2px; color: var(--accent-deep); }
.od-told strong { font-weight: 700; }
.od-told-word { font-style: italic; }
.od-told .field-help { margin: var(--space-1) 0 0; color: var(--text-secondary); }
.ost-sooner { margin: calc(-1 * var(--space-2)) 0 0 var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.ost-sooner .form-subtitle { margin: 0; }
.ost-sooner .field-help { margin: 0; }
/* B — an option shown and not to be chosen */
.catpick-opt--off { cursor: not-allowed; color: var(--text-secondary); }
.catpick-opt--off .catpick-name { font-weight: 400; }
.catpick-opt--off:hover { background: none; }
/* B — the order received and soft-closed; closed and why; a note beyond the order */
.od-soft { display: flex; gap: var(--space-3); align-items: flex-start; }
.od-told, .od-soft { margin-bottom: 16px; }
.od-mlab { display: none; }
.od-soft > svg { flex: none; margin-top: 2px; color: var(--warning-text); }
.od-closed-why { margin: 0; }
.od-note-warn { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--warning-text); }
.od-note-warn svg { flex: none; margin-top: 1px; }
.od-note-lines .mr-pill, .od-note-lines .od-xtag { margin-left: var(--space-1); vertical-align: 1px; }
.od-pernote { padding-top: var(--space-2); border-top: var(--border-width) solid var(--border); }
/* B — the lines: delivered and received, by line; a line not in the order */
.od-xtag { font-size: 11px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; font-weight: 800; padding: 2px 8px; }
.od-xtags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.od-lines tbody tr.od-xrow td { background: var(--warning-surface); }
.od-lines tfoot tr.od-xtotal td { color: var(--text-secondary); }
/* B — the delivery note's form: beyond the order, lines not in the order, the limit */
.od-dntable .od-dnq.od-dnq--over { border-color: var(--warning-fill); box-shadow: 0 0 0 1px var(--warning-fill); }
.od-dnover { display: flex; gap: var(--space-3); align-items: flex-start; }
.od-dnover > svg { flex: none; margin-top: 2px; }
.od-dnover[hidden] { display: none; }
.od-xlines { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--border-width) solid var(--border); }
.od-xlines .form-subtitle { margin: 0; }
.od-xform { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: var(--space-3); align-items: end; }
.od-xform .field { margin: 0; min-width: 0; }
.od-xamt-box { display: flex; align-items: center; gap: var(--space-2); }
.od-xamt-box .input { flex: 1 1 auto; min-width: 0; text-align: right; }
.od-xcur { flex: none; font-size: var(--label-size); color: var(--text-secondary); }
.od-xdel { margin-bottom: 4px; }
.od-xadd { align-self: flex-start; font-weight: 700; }
.od-xbar { display: flex; flex-direction: column; gap: var(--space-2); }
.od-xbar-head { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--label-size); }
.od-xbar-track { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.od-xbar-track > span { display: block; height: 100%; border-radius: 999px; background: var(--warning-fill); }
.od-xbar--over .od-xbar-track > span { background: var(--danger); }
.od-xbar--over .od-xbar-head span { color: var(--danger-text); font-weight: 700; }
.od-xbar .field-help { margin: 0; }
/* B — My account › Orders › Receiving */
.ost-xfield { display: flex; flex-direction: column; gap: var(--space-2); }
.ost-xchips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ost-xchip { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--accent-surface); color: var(--navy); font-weight: 700; }
.ost-xchip .chip-x { border: 0; background: none; padding: 0 2px; font: inherit; color: inherit; min-width: 24px; min-height: 24px; }
.ost-xadd { max-width: 360px; }
.ost-xadd .catpick-btn { border-style: dashed; color: var(--accent-deep); font-weight: 700; }
.ost-xlimits { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.ost-xlimits .field-label { margin: 0; }
.ost-xnum { width: 110px; text-align: right; }
.ost-xgrp { display: inline-flex; align-items: center; gap: var(--space-2); }
/* B — an invoice's line not in the order */
.inv-line--x { background: var(--warning-surface); }
.inv-xdel { margin-left: var(--space-2); font-size: var(--helper-size); }
.inv-xcard .od-xamt-box .input { text-align: right; }
@media (max-width: 760px) {
  .od-lines tbody td.od-c-rcv { grid-column: 3; grid-row: 2; text-align: right; }
  .od-lines--both .od-mlab { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; color: var(--text-secondary); }
  .od-lines tbody tr.od-xrow { background: var(--warning-surface); }
  .od-lines tbody tr.od-xrow td { background: none; }
  .od-xform { grid-template-columns: minmax(0, 1fr) auto; }
  .od-xform .od-xcat, .od-xform .od-xwhat { grid-column: 1 / -1; }
  .od-date-row .field { flex: 1 1 100%; }
  .ost-sooner { margin-left: 0; }
}

/* ------------------------------------------------------- m338 (board E): when a listing is paid — after delivery or upfront */
/* The listing editor's "When the customer pays": two choices, one under the other, as the board draws them. */
.paid-when { gap: var(--space-3); padding: var(--space-5); border: var(--border-width) solid var(--border); border-radius: var(--radius-card); }
.paid-when .paid-when-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--section-size); line-height: var(--section-lh); padding: 0; }
.paid-when > .field-help { margin: 0; }
.choice-col { display: flex; flex-direction: column; gap: var(--space-3); }
.choice-col .choice { min-height: 0; }
.pill-upfront { display: inline-block; white-space: nowrap; }
.price-basis .pill-upfront { margin-left: var(--space-2); vertical-align: middle; }
.buy-price .pill-upfront, .fd-price .pill-upfront { margin-top: var(--space-2); }
.fd-price .pill-upfront { margin-left: var(--space-2); }
/* The basket: each line where it is paid, what is paid now and on the invoices, and one Check out. */
.cart-part { display: flex; flex-direction: column; gap: var(--space-3); }
.cart-part-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--label-size); line-height: var(--label-lh); font-weight: 700; }
.cart-when { display: block; }
.cart-svcup { grid-template-columns: minmax(0, 1fr) auto; }
.cart-svcup .cart-svcacts { grid-column: 1 / -1; justify-content: flex-end; }
.cart-level { margin: 0; }
.cart-sums { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: 2px solid var(--text); }
.cart-sums .cart-pay strong { font-weight: 800; }
.cart-later-sum span:last-child { color: var(--text-secondary); }
.cart-checkout { width: 100%; }
/* The checkout: its orders, what is paid now and how, what is ordered. */
.bco-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bco-part { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--border-width) solid var(--border); }
.bco-part:first-child { border-top: 0; padding-top: 0; }
.bco-part > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bco-amount { white-space: nowrap; }
.bco-sum { display: flex; flex-direction: column; gap: var(--space-3); }
.bco-sum .summary-money span:last-child, .bco-sum .summary-money strong { text-align: right; }
.bco-held { margin: 0; }
.od-together { margin: var(--space-2) 0 0; }
/* The Order panel's button of a service paid upfront ("Add to the basket — paid at checkout") is longer than half a phone's row: its
   words wrap rather than run out of the button (and off a 390-px page). */
@media (max-width: 767px) {
  .svo-acts .btn { white-space: normal; height: auto; min-height: var(--control-h); padding-top: var(--space-2); padding-bottom: var(--space-2); text-align: center; }
}

/* ------------------------------------------------------- m339 (boards PaidInvoiceLevel, UpfrontAccept, FeedOrderNow) */
/* The cart: a supplier's level (amber) and its acceptance first (teal), under its goods; the third part, paid once accepted. */
.cart-why { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-radius: 8px;
  font-size: var(--label-size); line-height: var(--label-lh); color: var(--text); }
.cart-why svg { flex: none; margin-top: 2px; }
.cart-why--first { background: var(--accent-surface); }
.cart-why--first svg { color: var(--accent-deep); }
.cart-svcup .cart-why { margin-top: var(--space-2); }
.cart-first-sum span:last-child { color: var(--text-secondary); text-align: right; }
/* The checkout: sent for acceptance; "Pay it now instead" under an order on invoice; Order now's own. */
.bco-part--first .field-help { color: var(--warning-text); }
.bco-instead { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--label-size); font-weight: 700;
  color: var(--text); cursor: pointer; }
.bco-instead input { margin: 0; }
.bco-first-sum span:last-child { color: var(--text-secondary); }
.bco-first { margin: 0; }
.bco-direct { margin: 0 0 var(--space-4); }
/* Business settings › Orders: what Orders you receive means for what is paid upfront. (m339's paying by invoice and cash collection's
   ticks went with m344 — each listing decides; SELYVO asks cash collection by itself for the customers it pays for.) */
.ost-extra { display: block; margin-top: var(--space-1); color: var(--text); font-size: var(--label-size); line-height: var(--label-lh); }
/* Found by the look at 390 px. A notice's icon keeps its size beside long words (it shrank to a dot in the basket's drawer — since m338's
   "This basket will become …"). Pay for this order's buttons wrap — every order paid once accepted is paid there (they ran off the screen). */
.notice > svg { flex: none; }
.ord-pay .form-actions { flex-wrap: wrap; row-gap: var(--space-3); }
@media (max-width: 767px) {
  .ord-pay .form-actions .btn { flex: 1 1 100%; }
  .ord-pay .form-actions .btn-secondary { margin-right: 0; }
}

/* ---- m340: Jiri's ten listing fixes (15 Oct 11:44) ---- */
/* The Pricing detail: accepted automatically (a switch, its quantity below it), the default pricing, Remove asked once. */
.pd-auto .switch-row, .pd-default .frow { align-items: flex-start; }
.pd-auto .switch-row > span:last-child, .pd-default .frow > span { display: flex; flex-direction: column; gap: 2px; }
.pd-default .frow input { margin-top: 2px; }
.pd-remove { margin-left: auto; }
.pd-remove-note { margin: var(--space-2) 0 0; }
.pl-default { margin-left: var(--space-2); padding: 1px 8px; font-size: var(--micro-size); vertical-align: 1px; }
/* The Conditions: available from — to, side by side (one under the other on a phone). */
.lst-avail { gap: var(--space-4); }
/* The listing's page: not for sale today. */
.det-notonsale { margin: 0; }
/* The console's Payment terms: what each is for — a narrow column per kind; its help a step above the grid. */
.grid-table .term-kind { text-align: center; white-space: nowrap; }
.term-help { margin: 0 0 var(--space-2); }
/* Found by the look at 390 px: on a phone a pricing line's three buttons (Save, Cancel, Remove) wrap — Remove on a row of its own. */
@media (max-width: 767px) {
  #pricing-dialog .form-actions { flex-wrap: wrap; row-gap: var(--space-3); }
  #pricing-dialog .form-actions .pd-remove { flex: 1 1 100%; margin-left: 0; }
}
/* Found by the look at 390 px: a grid scrolls inside its frame — and a hidden label in its last column (.sr-only, absolutely placed)
   escaped it, so the whole console page scrolled sideways once the Payment terms grid had its four columns. The frame holds it now. */
.grid-wrap { position: relative; }

/* ------------------------------------------------------- m344 (boards InvoiceByListing and SelyvoPaysAdvance) */
/* The cart: why a supplier's lines are paid when they are — what is paid at checkout (amber), what is invoiced after delivery (green). */
.cart-why--now { background: var(--warning-surface); }
.cart-why--now svg { color: var(--warning-text); }
.cart-why--after { background: var(--success-surface); }
.cart-why--after svg { color: var(--success-text); }
/* The checkout: paid by SELYVO for you (teal), over what is left of your limit (amber), SELYVO's note under the orders. */
.bco-part--selyvo > div > .field-help { color: var(--accent-deep); font-weight: 700; }
.bco-over { display: block; margin-top: var(--space-1); color: var(--warning-text); }
.bco-selyvo { margin: var(--space-3) 0 0; }
.bco-nothing { margin: 0; }
.bco-selyvo-sum strong { color: var(--accent-deep); }
/* The listing editor: under After delivery, the customers it names pay it upfront — their chips, the search, what it finds. */
.paid-named { display: flex; flex-direction: column; gap: var(--space-2); margin: calc(-1 * var(--space-1)) 0 var(--space-1) var(--space-6);
  padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent-surface); }
.paid-named .form-subtitle { margin: 0; }
.paid-named > .field-help { margin: 0; }
.pn-chips { margin: 0; }
.pn-chips .chip-x { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; margin: -4px -6px -4px 0;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.pn-find { margin: 0; max-width: 420px; }
.pn-hits { display: flex; flex-direction: column; max-width: 420px; }
.pn-hits > .field-help { margin: 0; }
.pn-hit { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0;
  border-top: var(--border-width) solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pn-hit:first-child { border-top: 0; }
.pn-hit:hover, .pn-hit:focus-visible { background: var(--accent-surface); }
.pn-hit[disabled] { cursor: default; opacity: .7; }
.pn-hit-name { font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 767px) { .paid-named { margin-left: 0; } }
/* The order's page: paid by SELYVO for its customer — what the customer owes SELYVO, whose the money is for the supplier. */
.od-selyvo { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); border-radius: 9px;
  background: var(--accent-surface); }
.od-selyvo strong { color: var(--accent-deep); }
.od-selyvo .field-help { margin: 0; }
/* Business settings › Payments: SELYVO pays in advance for your business. */
.adv-card .summary-money { margin: 0; }
.adv-said { margin: 0; }
.adv-note { color: var(--text-secondary); }
.adv-late { color: var(--warning-text); margin: 0; }
.adv-asked { margin: 0; }
/* The console: SELYVO pays in advance — its card above Suppliers & customers, its two lists, a customer's panel. */
.adv-con-card .switch-row { margin: 0; }
.adv-con-card .switch-row strong, .adv-con-card .switch-row .field-help { display: block; }   /* m344: the label, then its help */
.adv-con-set, .adv-con-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.adv-con-set .field, .adv-con-form .field { margin: 0; }
.adv-con-acts { align-items: center; flex-wrap: wrap; }
.adv-con-counts { margin: 0; }
.mr-row.adv-cols { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1.3fr) 3.5rem; }
.mr-row.adv-cols--asked { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 2.4fr) 3.5rem; }
.adv-con-note { overflow-wrap: anywhere; color: var(--text-secondary); }
.adv-con-panel { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border);
  background: var(--canvas); }
.org-panel .adv-con-panel { margin-top: var(--space-4); padding: var(--space-4) 0 0; border-top: 1px solid var(--border); border-bottom: 0; }
.adv-con-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.adv-con-head .form-subtitle { margin: 0; }
.adv-con-state, .adv-con-used, .adv-con-off { margin: 0; }
.adv-con-facts { display: flex; flex-direction: column; gap: var(--space-2); }
.adv-con-facts .form-subtitle { margin: 0; }
.adv-facts { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; }
.adv-fact { display: flex; align-items: flex-start; gap: var(--space-2); }
.adv-fact svg { flex: none; margin-top: 2px; color: var(--text-secondary); }
.adv-fact--ok svg { color: var(--success-text); }
.adv-con-invs { display: flex; flex-direction: column; }
.adv-con-invs .form-subtitle { margin: 0 0 var(--space-2); }
.mr-row.adv-inv-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.4fr); padding-left: 0; padding-right: 0; }
.adv-inv-act { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 900px) {
  .adv-con-set, .adv-con-form { grid-template-columns: 1fr; }
  .mr-row.adv-cols, .mr-row.adv-cols--asked, .mr-row.adv-inv-cols { grid-template-columns: 1fr 1fr; }
  /* m344: the column heads are gone on a phone — each cell says what it is */
  .mr-row.adv-cols > [data-label]::before, .mr-row.adv-inv-cols > [data-label]::before { content: attr(data-label); display: block; font-size: 11px;
    font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
  .adv-inv-act { justify-content: flex-start; }
}
/* m345 — Console › AI: the engines and models (a row each, Default · Active · Off), a model's editor; Business settings › AI and its Usage. */
.aim-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.aim-head .form-title { margin: 0; }
.aim-editor .textarea { min-height: 96px; }
.aim-table .num, .aia-table .num { text-align: right; }
.aim-pills { white-space: nowrap; }
.aim-before { display: block; }
.aim-note { margin: var(--space-2) 0 0; }
.aim-prompt { margin-top: var(--space-5); }
.aim-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
.aim-pctrow { display: flex; align-items: center; gap: var(--space-2); }
.aim-pctrow .input { max-width: 120px; }
.aim-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--helper-size); }
.aim-tokens-help { margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
.aim-who { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.aim-who legend { margin-bottom: var(--space-2); }
.aim-named { margin-left: 0; }
.aim-check > span { display: flex; flex-direction: column; gap: 2px; }
.aim-check .field-help { margin: 0; }
/* 349g (board AiModelSimple, 210–217): SELYVO's API keys — a row each: the engine, its key by its first and last four (whole only while
   it is typed) and how it went when it was tried, Test it · Change; a known engine's model — its key and its model side by side, what the
   engine sets in a panel of its own; the model's maximum wait; Test it's answer. */
.aim-keys { margin-bottom: var(--space-5); }
.aim-keys-h { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.aim-keys-h svg { flex: none; color: var(--accent-deep); }
.aim-keys-lede { margin: var(--space-2) 0 var(--space-3); }
.aim-key-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-3) 0;
  border-top: var(--border-width) solid var(--border); }
.aim-key-what { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.aim-key-what .input { max-width: 420px; }
.aim-key-what .field-help, .aim-key-what .field-error { margin: 0; }
.aim-key-mask { font-size: var(--helper-size); overflow-wrap: anywhere; }
.aim-key-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--helper-size); color: var(--text-secondary); }
.aim-key-state svg { flex: none; }
.aim-key-state--ok { color: var(--success-text); font-weight: 700; }
.aim-key-state--bad { color: var(--danger-text); }
.aim-key-acts { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.aim-keycell code { font-size: var(--helper-size); overflow-wrap: anywhere; }
.aim-keymodel { align-items: start; margin-bottom: var(--space-4); }
.aim-keyfrom { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.aim-keyfrom legend { margin-bottom: var(--space-2); }
.aim-ownkey { margin: var(--space-2) 0 0; }
.aim-ownonly, .aim-list-line { margin: var(--space-2) 0 0; }
.aim-list-bad { color: var(--danger-text); }
.aim-unlisted { margin-top: var(--space-2); }
.aim-panel { margin: 0 0 var(--space-5); padding: var(--space-4); border: var(--border-width) solid var(--border); border-radius: var(--radius-card);
  background: var(--surface-subtle); }
.aim-panel-h { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.aim-panel-h svg { flex: none; color: var(--text-secondary); }
.aim-panel-list { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }
.aim-panel-list dt { color: var(--text-secondary); }
.aim-panel-list dd { margin: 0; overflow-wrap: anywhere; }
.aim-panel-list code { font-size: var(--helper-size); }
.aim-other-help { margin: 0 0 var(--space-4); }
.aim-test { margin: 0; }
.aia-list { display: flex; flex-direction: column; gap: var(--space-2); }
.aia-who { margin: 0; }
.aia-uhead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.aia-uhead .form-title { margin: 0; }
.aia-month strong { color: var(--accent-deep); }
.aia-allowance { margin: 0 0 var(--space-3); }
.aia-detail { display: block; overflow-wrap: anywhere; }
.aia-table td { padding-top: var(--space-2); vertical-align: top; }
.aia-pager { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.aia-usage { margin-top: var(--space-5); }
@media (max-width: 767px) {
  .aim-grid2 { grid-template-columns: minmax(0, 1fr); }
  /* 349g: a key's row and the engine's panel one column on a phone — the engine, its key, then its buttons. */
  .aim-key-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .aim-key-acts { justify-content: flex-start; }
  .aim-panel-list { grid-template-columns: minmax(0, 1fr); }
  .aim-panel-list dd { margin-bottom: var(--space-2); }
  .aim-table td[data-label]::before, .aia-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700;
    color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
  .aim-table .num, .aia-table .num { text-align: left; }
  /* A request on a phone: its day and its charge on one line, what it was under them, then its tokens — four labelled rows each were
     a screen of labels. */
  .aia-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); padding-top: var(--space-2); }
  .aia-table td { padding: 0 0 var(--space-1); }
  .aia-table td:nth-child(1), .aia-table td:nth-child(4) { grid-row: 1; }
  .aia-table td:nth-child(4) { grid-column: 2; text-align: right; font-weight: 700; }
  .aia-table td:nth-child(2), .aia-table td:nth-child(3) { grid-column: 1 / -1; }
  .aia-table td:nth-child(1)::before, .aia-table td:nth-child(2)::before, .aia-table td:nth-child(4)::before { content: none; }
  .aia-table td:nth-child(3)::before { display: inline; margin-right: var(--space-2); }
}
/* m345 (board 5): e-mails read by AI — the tag in the list, the strip on the e-mail (violet: AI's, as board A's suggested category),
   Business settings › AI's Read by AI card. */
.mai-tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 1px 10px; border-radius: 999px; background: var(--violet-surface);
           color: var(--violet); font-size: var(--micro-size); font-weight: 700; }
.mai-tag > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mai-tag > svg { flex: none; }
.mai-tag--reading { background: var(--canvas); color: var(--text-secondary); }
.mai-host:empty { display: none; }
.mai-strip { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-3); padding: 12px 14px; border-radius: 10px;
             background: var(--violet-surface); border: var(--border-width) solid var(--own-line); }
.mai-strip--ask { background: var(--surface); border-style: dashed; }
.mai-strip--error { background: var(--danger-surface); border-color: var(--danger); }
.mai-head { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--violet); font-size: var(--label-size); font-weight: 800; }
.mai-head > svg { flex: none; }
.mai-line { margin: 0; overflow-wrap: anywhere; }
.mai-line .linkbtn { font-size: inherit; }
.mai-added { margin: 0; font-weight: 600; }
.mai-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.mai-ghost { background: none; border-color: transparent; color: var(--text-secondary); min-width: 0; }
.mai-ghost:hover { color: var(--violet); }
.mai-lines { background: var(--surface); border-radius: 8px; }
.mai-skipped { margin: var(--space-3) 0 0; }
.mai-card { margin-top: var(--space-5); }
.mai-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-3) 0 var(--space-4); }
.mai-card .mai-group { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mai-legend { padding: 0; margin-bottom: 4px; font-size: var(--label-size); font-weight: 800; }
.mai-note, .mai-month, .mai-offnote, .mai-noai, .mai-who { margin: 0 0 var(--space-2); }
@media (max-width: 1100px) {
  .mai-groups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  /* What was read on a phone: each line its words, then its category and its amount — never a column out of sight. */
  .pi-table.mai-lines tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: 4px; padding: 10px 8px;
    border-top: var(--border-width) solid var(--border); }
  .pi-table.mai-lines tr:first-child { border-top: 0; }
  .pi-table.mai-lines td { display: block; padding: 0; border: 0; }
  .pi-table.mai-lines td:first-child { grid-column: 1 / -1; }
  .pi-table.mai-lines td.num { align-self: center; }
}

/* m345 — Your past invoices (board H): the drop zone, how the upload is going, the files and their looks, the suppliers found, what you buy;
   an invoice received outside SELYVO (its pill, the file it was read from). */
.inv-pastbtn { display: inline-flex; align-items: center; gap: 6px; }
.mr-pill--outside { background: var(--accent-surface); color: var(--navy); border: var(--border-width) solid var(--accent-line); white-space: normal; border-radius: 12px; }
.pi-card { display: flex; flex-direction: column; gap: var(--space-4); }
.pi-card > .notice { margin: 0; }
.pi-drop { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); border: 2px dashed var(--accent-line); border-radius: var(--radius-card);
  background: var(--accent-surface); color: var(--accent-deep); }
.pi-drop--over { border-style: solid; border-color: var(--accent); }
.pi-drop > svg { flex: none; }
.pi-drop-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--text); }
.pi-drop-text strong { font-size: 16px; }
.pi-drop .sr-only:focus-visible + label { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pi-drop label[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.pi-progress { display: flex; flex-direction: column; gap: 6px; }
.pi-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.pi-meter { display: block; height: 8px; border-radius: 8px; background: var(--surface-subtle); overflow: hidden; }
.pi-meter > span { display: block; height: 8px; border-radius: 8px; background: var(--accent); }
.pi-refused { margin: 0; }
.pi-refused ul { margin: var(--space-1) 0 0; padding-left: 1.2em; }
.pi-wrap { min-width: 0; }
.pi-table { width: 100%; border-collapse: collapse; font-size: var(--label-size); }
.pi-table th { text-align: left; font-size: var(--micro-size); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  padding: 8px 6px; border-bottom: var(--border-width) solid var(--border-strong); }
.pi-table td { padding: 9px 6px; border-top: var(--border-width) solid var(--border); vertical-align: top; }
.pi-table .num { text-align: right; white-space: nowrap; }
.pi-c-date { white-space: nowrap; }
.pi-file { font-weight: 700; color: var(--accent-deep); overflow-wrap: anywhere; }
.pi-c-state .mr-pill { white-space: nowrap; }
.pi-why { display: block; margin-top: 4px; max-width: 240px; }
.pi-again { display: block; margin-top: 2px; }
.pi-mlab { display: none; }
.pi-table tr.pi-lookrow td { border-top: 0; padding-top: 0; }
.pi-look { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: 9px; background: var(--warning-surface); }
.pi-look-head { margin: 0; }
.pi-look-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 300px)); gap: var(--space-3); }
.pi-look-fields .field { margin: 0; }
.pi-look .btn { align-self: flex-start; }
.pi-foot { padding: 0; }
.pi-sup-count, .pi-sup p, .pi-fee p, .pi-spend p, .pi-filecard p { margin: 0; }
.pi-nolines { margin: 0; padding: var(--space-2) var(--space-4) var(--space-4); }
.pi-spend { display: flex; flex-direction: column; gap: var(--space-3); }
.pi-suplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pi-supitem { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 0; border-top: var(--border-width) solid var(--border); cursor: pointer; }
.pi-supitem input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); }
.pi-supitem--off { cursor: default; }
.pi-supname { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pi-supname .field-help { margin: 0; }
.pi-supmore { align-self: flex-start; }
.pi-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pi-bars li { display: flex; flex-direction: column; gap: 4px; }
.pi-bar-head { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--label-size); }
.pi-bar-head strong { white-space: nowrap; }
.pi-filecard .pi-file--card { display: inline-flex; align-items: center; gap: 6px; }
.pi-looknote { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
@media (max-width: 767px) {
  .pi-drop { flex-direction: column; align-items: flex-start; padding: var(--space-4); }
  /* A file on a phone: its name and what became of it on one line, its supplier under them, then its number and total, its date and lines. */
  .pi-table thead { display: none; }
  .pi-table, .pi-table tbody { display: block; }
  .pi-table tr.pi-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: 2px; padding: var(--space-3) 0;
    border-top: var(--border-width) solid var(--border); }
  .pi-table tr.pi-row td { display: block; padding: 0; border: 0; }
  .pi-c-file { grid-column: 1; grid-row: 1; }
  .pi-c-state { grid-column: 2; grid-row: 1; text-align: right; }
  .pi-c-sup { grid-column: 1 / -1; grid-row: 2; }
  .pi-c-num { grid-column: 1; grid-row: 3; }
  .pi-table td.pi-c-total { grid-column: 2; grid-row: 3; }
  .pi-c-date { grid-column: 1; grid-row: 4; }
  .pi-table td.pi-c-lines { grid-column: 2; grid-row: 4; color: var(--text-secondary); }
  .pi-mlab { display: inline; }
  .pi-table tr.pi-row td.pi-blank { display: none; }
  .pi-look-fields { grid-template-columns: minmax(0, 1fr); }
  .pi-why { max-width: none; }
  .pi-table tr.pi-lookrow { display: block; }
  .pi-table tr.pi-lookrow td { display: block; padding: 0 0 var(--space-3); }
}

/* ------------------------------------------------------- m346: a listing as the customer sees it (board ListingPage, approved 16 Oct)
   The Pricing chooser above the price; the Feed card's price; the Conditions as a table of rows; the SELYVO tab's three services — one
   that cannot be used dashed and grey, with its value and why; About supplier, its summary under the usual card. */
.det-pricing .catpick { width: 100%; }
.det-feednote { margin: var(--space-1) 0 0; }
.det-cond { margin: 0; }
.det-cond th, .det-cond td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-top: var(--border-width) solid var(--border); vertical-align: top;
  font-size: var(--label-size); line-height: var(--label-lh); }
.det-cond tr:first-child th, .det-cond tr:first-child td { border-top: 0; }
.det-cond th { width: 170px; font-weight: 400; color: var(--text-secondary); }
.det-cond td { font-weight: 500; color: var(--text); }
.det-sel { display: flex; flex-direction: column; gap: var(--space-3); }
.det-sel-title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 800; }
.det-sel .field-help { margin: var(--space-1) 0 0; }
.det-svc { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) 18px; border: var(--border-width) solid var(--border);
  border-radius: 10px; background: var(--surface); }
.det-svc--off { border-style: dashed; border-color: var(--border-strong); background: var(--surface-subtle); color: var(--text-secondary); }
.det-svc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.det-svc-name { margin: 0; font-size: 16px; line-height: 22px; font-weight: 800; }
.det-svc--off .det-svc-name { color: var(--text-secondary); }
.det-svc-headval { font-weight: 700; font-size: var(--label-size); }
.det-svc-body, .det-svc-value, .det-svc-why, .det-svc-note { margin: 0; font-size: var(--label-size); line-height: var(--label-lh); }
.det-svc-value { font-weight: 700; color: var(--accent-deep); }
.det-svc-why { display: flex; gap: 6px; align-items: flex-start; font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary); }
.det-svc-why svg { flex: none; margin-top: 1px; }
.det-svc-act { display: flex; }
.det-about { display: flex; flex-direction: column; gap: var(--space-3); }
.det-about-id { display: flex; align-items: center; gap: var(--space-3); }
.det-about-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.det-about-name { align-self: flex-start; font-weight: 800; }
.det-about-rating { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.det-about-quote { margin: 0; padding: var(--space-2) var(--space-3); border-radius: 8px; background: var(--surface-subtle); }
@media (max-width: 767px) {
  /* A phone: each row still its label and its words side by side (.set-table stacks its cells there). */
  .det-cond tr { display: grid; grid-template-columns: 112px minmax(0, 1fr); padding-bottom: 0; border-bottom: 0; }
  .det-cond th, .det-cond td { display: block; width: auto; }
}

/* ------------------------------------------------------- m346: My listings' costs and figures (board ListingFigures, approved 16 Oct)
   My price / costs on each pricing with its profit — the volume prices as rows under it; How it does on the General step, its period a
   switch, seven tiles in four columns; Revenue and Margin on the list; SELYVO negotiation on Console › Charges. */
.pl-table .pl-cost .input { width: 120px; }
/* m349r (board PricingForCustomers, 476): a line for chosen customers — its name, "Only for" and its businesses under it, its row tinted. */
.pl-new { margin-left: var(--space-2); padding: 1px 8px; font-size: var(--micro-size); vertical-align: 1px; }
.pl-table .row-chosen > td { background: var(--accent-wash); }
.pl-only { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.pl-only-l { font-size: var(--micro-size); color: var(--text-secondary); }
.chips .chip.pl-cust, .chip.pl-cust { min-height: 0; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--accent-surface); color: var(--accent-deep);
  font-size: var(--micro-size); font-weight: 700; cursor: default; }
/* Its detail: Who it is for — a box of its own, edged in the accent. */
.pd-who { gap: var(--space-2); min-width: 0; padding: calc(var(--space-3) + 2px); border: 2px solid var(--accent); border-radius: var(--radius-card);
  background: var(--accent-wash); }
.pd-who > .pd-who-title { float: left; width: 100%; padding: 0; font-size: var(--label-size); line-height: var(--label-lh); font-weight: 700; }
.pd-who .choice { background: var(--surface); }
.pd-who .choice-on { background: var(--accent-surface); }
.pl-cust-chips { gap: 6px; margin: 0; }
.pl-cust-chips .chip-x { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; margin: -4px -6px -4px -2px;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.pl-cust-find { margin: 0; }
.pl-cust-find .input { min-height: var(--control-h); }
.pl-hits-box { display: flex; flex-direction: column; gap: 2px; padding: 6px; border: var(--border-width) solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); box-shadow: var(--shadow-menu); }
.pl-hits-h { margin: 0; padding: 6px 10px; font-size: var(--micro-size); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.pl-hits-box .pl-hit { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 38px; padding: var(--space-2) 10px;
  border: 0; border-radius: var(--radius-button); }
.pl-hits-box .pl-hit .pn-hit-name { font-size: var(--label-size); }
.pl-hits-box .pl-hit .field-help { margin: 0; font-size: var(--micro-size); text-align: right; white-space: nowrap; }
.pd-valid { margin: 0; }
/* m349r (477): "Your price" with the customer's business, over the price the page shows. */
.det-yours { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); font-size: var(--label-size); }
.det-yours .chip.pl-cust { font-size: var(--micro-size); }
.pl-table .pl-profit strong, .pl-table .pl-profit .field-help { display: block; }
.pl-gain { color: var(--success-text); font-weight: 800; }
.pl-loss { color: var(--danger-text); }
.set-table tr.row-step td { color: var(--text-secondary); border-top: 0; padding-top: 0; }
.set-table tr.row-step td.pl-stepname { padding-left: var(--space-4); }
.pl-costhelp { margin: 0 0 var(--space-3); }
.fig-card { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); padding-bottom: var(--space-5);
  border-bottom: var(--border-width) solid var(--border); }
.fig-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }   /* m349s: the period below, as drawn */
.fig-head .form-title { margin: 0; }
.fig-head .field-help { margin: var(--space-1) 0 0; }
.fig-seg .tab { min-height: 36px; padding: 0 12px; font-size: var(--helper-size); }
.fig-tiles .ptiles, .ptiles.fig-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-bottom: 0; }
.ptile--warn .ptile-value { color: var(--warning-text); }
.ptile--good .ptile-value { color: var(--success-text); }
.ptile .linkbtn { font-size: var(--helper-size); text-align: left; }
.fig-note { margin: 0; align-items: flex-start; }
.fig-note svg { flex: none; margin-top: 2px; }
.ml-row { grid-template-columns: 44px minmax(0, 3fr) 1fr 1fr 0.9fr 44px 1fr 0.6fr 100px; }
.neg-card { margin-top: var(--space-4); }
.neg-card .neg-in { max-width: 220px; }
.neg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.neg-closed { margin: 0; }
@media (max-width: 900px) {
  .ml-row { grid-template-columns: 44px 1fr 1fr; }
}
@media (max-width: 767px) {
  .pl-table .pl-cost .input { width: 100%; }
  .set-table tr.row-step td.pl-stepname { padding-left: 0; }
  .neg-grid { grid-template-columns: minmax(0, 1fr); }
}

/* m348 (boards AccountMenus, Partners, LeaveClose): My listings at the top menu's right end, a thin line before it; Partners' four lists;
   Your businesses, leaving one and closing the account; Activity and history. Tokens only. */
.nav-mine { border-left: var(--border-width) solid var(--border); border-radius: 0; padding-left: var(--space-4); margin-right: var(--space-2); }
.par-tabs .tab-count { margin-left: var(--space-1); color: var(--text-secondary); font-weight: 600; }
.par-invite { margin-bottom: var(--space-4); }
.par-invite > .btn { display: inline-flex; align-items: center; gap: var(--space-2); }
.par-search { padding: 0 var(--space-4) var(--space-3); max-width: 360px; }
/* Each row is a grid of its own: the actions' column has one width for all (an "auto" one made every row's columns its own). */
.mr-row.par-cols { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.5fr) minmax(0, 1.6fr) 0.7fr 220px; }
.mr-row.par-cols3 { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) 0.8fr 220px; }
.par-who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.par-av { flex: none; width: 36px; height: 36px; border-radius: var(--radius-input); display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-surface); color: var(--accent-deep); font-weight: 800; font-size: var(--micro-size); }
.par-whotext { display: flex; flex-direction: column; min-width: 0; }
.par-whotext strong { overflow-wrap: anywhere; }
.par-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.par-ok { color: var(--accent); display: inline-flex; vertical-align: middle; }
.par-pills { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.par-pill { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: 999px; font-size: var(--micro-size); font-weight: 700; white-space: nowrap; }
.par-pill--ok { background: var(--success-surface); color: var(--success-text); }
.par-pill--quiet { background: var(--surface-subtle); color: var(--text-secondary); border: var(--border-width) solid var(--border); }
.par-pill--warn { background: var(--warning-surface); color: var(--warning-text); }
.par-acts { display: flex; gap: var(--space-3); justify-content: flex-end; flex-wrap: wrap; }
.par-pager { display: flex; justify-content: center; align-items: center; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.lvc-card { margin-bottom: var(--space-4); }
.lvc-list { display: flex; flex-direction: column; }
.lvc-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--border); }
.lvc-row--on { background: var(--accent-surface); }
.lvc-icon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-input); display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-surface); color: var(--accent-deep); }
.lvc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lvc-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.lvc-foot { display: flex; justify-content: flex-end; padding-top: var(--space-3); }
.lvc-close-link { color: var(--danger-text); }
.lvc-bullets { margin: var(--space-3) 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.lvc-mbx .field-help { display: block; }
.lvc-days strong { display: block; }
/* Found by the look: the download links' arrow sat high and touched the words — centred on them now, a little apart. */
.lvc-dl > svg { vertical-align: -0.2em; margin-right: var(--space-1); }
.lvc-mbx .lvc-dl { white-space: nowrap; }    /* mid-sentence, the arrow went to the line's end and its words to the next (390 px) */
.lvc-last-acts { flex-wrap: wrap; justify-content: flex-start; }
.lvc-ask { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.lvc-banner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.act-card { margin-bottom: var(--space-4); }
.act-biz { display: block; }
.chip-quiet { background: var(--surface-subtle); color: var(--text-secondary); border: var(--border-width) solid var(--border); cursor: default; }
@media (max-width: 900px) {
  .mr-row.par-cols, .mr-row.par-cols3 { grid-template-columns: 1fr 1fr; }
  .par-who, .par-acts { grid-column: 1 / -1; }
  .par-acts { justify-content: flex-start; }
}
@media (max-width: 767px) {
  .lvc-row { flex-wrap: wrap; }
}
/* m348 (looked at, My listings on a phone): the list's column heads showed over one another — .ml-row's grid comes after the lists'
   .mr-row-head none — and a row's cells fell into a 44 px column (its status over its photographs). On a phone a row is the listing's
   name, then what it is, one after another: Published · 3 photographs · 310.00 EUR, its icons at the end. */
@media (max-width: 900px) {
  .ml-row.mr-row-head { display: none; }
  .ml-row.req-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
  .ml-row.req-row > .mr-what { flex: 1 1 calc(100% - 44px - var(--space-3)); }
  .ml-row.req-row > div:empty { display: none; }
  .ml-row.req-row > .mr-cur { margin-left: calc(var(--space-1) - var(--space-3)); }
  .ml-row.req-row > .ml-actions { margin-left: auto; }
}

/* ===================== m349: questionnaires (boards QuestionnairesConsole, QuestionnaireQuestion, QuestionnairesBusiness, QuestionnaireAnswer)
   My account › Questionnaires (the lists, one questionnaire open, one business's answers), the console's templates, the question's
   dialog, answering one, the request's page, Compare and a profile — the market's own parts (cards, tables, pills, chips) and tokens. */
.qn-new-wrap { position: relative; }
.qn-new-menu { min-width: 300px; gap: 2px; left: 0; right: auto; }   /* opens under the button, to the right — the column's edge cut it off on the left */
.qn-new-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px var(--space-3); background: none;
  border: 0; border-radius: var(--radius-input); text-align: left; cursor: pointer; color: var(--text); font: inherit; }
.qn-new-menu button:hover, .qn-new-menu button:focus-visible { background: var(--surface-subtle); }
.qn-table td { padding-top: var(--space-2); vertical-align: top; }
.qn-table thead th, .qn-qtable thead th { padding-top: var(--space-3); }
.qn-list .qn-table, .qn-list .mr-foot { padding: 0 var(--space-5); }
.qn-list .qn-table { margin-top: var(--space-2); }
.qn-open { font-weight: 700; text-align: left; }
.qn-review-n { color: var(--accent-deep); font-weight: 700; white-space: nowrap; }
.qn-score { white-space: nowrap; }
.qn-score strong { font-variant-numeric: tabular-nums; }
.qn-admins { margin: var(--space-3) 0 0; }
.qn-tpl-lede { padding: var(--space-3) var(--space-5) 0; }
.qn-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); padding: var(--space-3) var(--space-5) var(--space-5); }
.qn-tpl { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card); background: var(--surface); }
.qn-tpl-name { margin: 0 0 var(--space-1); font-size: var(--body-size); line-height: var(--body-lh); }
.qn-tpl .btn { align-self: flex-start; }
.qn-tpl-n { display: block; margin-top: var(--space-2); }
.qn-who { margin-top: var(--space-4); }
.qn-who-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.qn-who-list li { display: flex; flex-direction: column; gap: 2px; }
/* One questionnaire, open: its name, pills and actions; the tabs; the sections as cards with their questions as lines. */
.qn-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3) var(--space-5); flex-wrap: wrap; }
.qn-head .title { margin-bottom: var(--space-1); }
.qn-pills { margin: 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.qn-head-acts { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.qn-news { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.qn-etabs { margin: var(--space-5) 0 var(--space-4); }
.qn-general, .qn-sec, .qn-when, .qn-scoring, .qn-result, .qn-preview, .qn-con { margin-bottom: var(--space-4); }
.qn-langs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.qn-lang { min-height: 32px; font-size: var(--label-size); }
.qn-lang-dot { color: var(--warning-text); font-weight: 900; }
.qn-lang-ok { color: var(--success-text); }
.qn-translate { display: inline-flex; align-items: center; gap: var(--space-1); }
.qn-howto { margin: 0 0 var(--space-3); }
.qn-sec-head { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.qn-sec-n { margin: 0 0 10px; white-space: nowrap; }
.qn-sec-title { flex: 1 1 260px; margin: 0; }
.qn-sec-w { margin: 0; width: 96px; }
.qn-w-in { display: inline-flex; align-items: center; gap: var(--space-1); }
.qn-w-in .input { width: 64px; text-align: right; }
.qn-sec-count { margin: 0 0 12px; white-space: nowrap; }
.qn-row-acts { display: inline-flex; gap: 2px; align-items: center; white-space: nowrap; }
.qn-sec-head .qn-row-acts { margin-bottom: 4px; }
.qn-qtable td { padding-top: var(--space-2); border-top: var(--border-width) solid var(--border); vertical-align: top; }
.qn-qnum { font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
.qn-qtext { text-align: left; font-weight: 600; }
.qn-cond { color: var(--text-secondary); }
.qn-crit { margin-left: var(--space-1); }
.qn-missing { background: var(--warning-surface); color: var(--warning-text); }
.qn-sec-sure { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.qn-sec-empty { margin: 0 0 var(--space-2); }
.qn-add-q { margin: var(--space-2) 0 0; }
.qn-add-q .linkbtn, .qn-add-sec .btn { display: inline-flex; align-items: center; gap: var(--space-1); }
.qn-add-sec { margin: 0 0 var(--space-4); }
.qn-foot-acts { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; margin-top: var(--space-2); }
.qn-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.qn-of { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.qn-opt { margin-bottom: var(--space-2); }
.qn-cats { margin: 0 0 var(--space-3) 30px; }
.qn-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.qn-cat-add { max-width: 360px; }
.qn-wtable td { padding-top: var(--space-2); border-top: var(--border-width) solid var(--border); }
.qn-wsum { font-weight: 700; margin: var(--space-2) 0; }
.qn-wsum--ok { color: var(--success-text); }
.qn-wsum--bad { color: var(--danger-text); }
.qn-below { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 0 30px; }
.qn-below .field-label { margin: 0; }
.qn-below .input { width: 72px; }
.qn-pv-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.qn-preview .qna-q { margin-top: var(--space-4); }
.qn-preview { margin-top: var(--space-5); }            /* no tabs above it: apart from the buttons */
.qn-preview .qna-steps { margin-top: var(--space-4); }
.qn-con-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.qn-con-tabs { margin: var(--space-3) 0 var(--space-4); }
.qn-con-tabs .tab .chip { margin-left: var(--space-1); }
/* The question in full: the dialog, wide — the form on the left, how it is asked and what each answer does on the right. */
.modal.qn-dlg { width: min(1120px, calc(100vw - 2rem)); padding: var(--space-6) var(--space-6) var(--space-4); }
.qn-dlg-sub { margin: 0 0 var(--space-4); }
.qn-dlg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-6); align-items: start; }
.qn-dlg-prev { position: sticky; top: 0; padding: var(--space-4); border-radius: var(--radius-card); background: var(--surface-subtle);
  border: var(--border-width) solid var(--border); }
.qnd-part { border: 0; border-top: var(--border-width) solid var(--border); margin: 0; padding: var(--space-4) 0; min-width: 0; }
.qnd-part:first-child { border-top: 0; padding-top: 0; }
.qnd-part > legend { padding: 0; margin-bottom: var(--space-2); }
/* A part's fields apart from each other; a helper stays with what it explains, a choice's options keep their 8px (.qnd-opt). */
.qnd-part > * + * { margin-top: var(--space-4); }
.qnd-part > legend + * { margin-top: 0; }
.qnd-part > .field-help { margin-top: var(--space-1); }
.qnd-part > .rq-choice + .rq-choice { margin-top: 0; }
.qnd-rule-vals .input + .field-label, .qnd-rule-vals .input + .field-help + .field-label { margin-top: var(--space-3); }
/* A label worn as a chip (a radio or a box inside): its words in the middle, and the ring when the box inside has the keyboard. */
label.chip-toggle { display: inline-flex; align-items: center; gap: var(--space-1); }
label.chip-toggle:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.qnd-num { display: block; font-size: var(--section-size); line-height: var(--section-lh); }
.qnd-row, .qnd-types { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.qnd-types { margin-bottom: var(--space-1); }
.qnd-opt { margin-bottom: var(--space-2); }
.qnd-opts td, .qnd-ranges td { padding-top: var(--space-1); }
.qnd-pts { width: 80px; text-align: right; }
.qnd-short { max-width: 320px; }
.qnd-rule-vals .field-label { margin-top: 0; }
.qnd-pa { margin-top: var(--space-2); }
.qnd-unsure { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.qnd-unsure .field-label { margin: 0; }
.qnd-unsure .catpick { min-width: 200px; }
.qnd-cond { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) auto; gap: var(--space-2); align-items: end; margin-bottom: var(--space-2); }
.qnd-cond .field { margin: 0; }
.qnd-cond-rm { margin-bottom: 4px; }
.qnd-doc { margin: 0 0 var(--space-2); display: flex; align-items: center; gap: var(--space-1); }
.qnd-prev-h { margin: 0 0 var(--space-2); text-transform: uppercase; letter-spacing: .04em; font-size: var(--micro-size); color: var(--text-secondary); }
.qnd-prev-q { padding: var(--space-3); margin-bottom: var(--space-4); background: var(--surface); border-radius: var(--radius-card); border: var(--border-width) solid var(--border); }
.qnd-does { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.qnd-does li { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--space-2); border-bottom: var(--border-width) solid var(--border); }
/* A question as it is asked — the same in the preview, the dialog and the page that answers it. */
.qna-q { padding: var(--space-4) 0; border-top: var(--border-width) solid var(--border); }
.qna-q:first-of-type { border-top: 0; }
.qna-q--bad { border-left: 3px solid var(--danger); padding-left: var(--space-3); }
.qna-qhead { margin: 0 0 var(--space-2); }   /* the number, the words and their chip run as one line of text, wrapping as words do */
.qna-qhead .chip { margin-left: var(--space-1); }
.qna-num { color: var(--text-secondary); font-variant-numeric: tabular-nums; font-weight: 700; }
.qna-filled { background: var(--violet-surface); color: var(--violet); }
.qna-guide, .qna-check { margin: 0 0 var(--space-2); }
.qna-yesno { gap: var(--space-2); }
.qna-pill { display: inline-flex; align-items: center; min-width: 72px; justify-content: center; cursor: pointer; }
.qna-choices { display: grid; gap: var(--space-2); }
.qna-choice { margin: 0; cursor: pointer; }
.qna-other { margin-top: var(--space-2); }
.qna-number { display: inline-flex; align-items: center; gap: var(--space-2); }
.qna-number .input { width: 160px; }
.qna-unit { color: var(--text-secondary); }
.qna-date { width: 200px; }
.dp-wrap:has(> .qna-date) { width: 220px; }           /* the calendar's button takes the date's width, not the line's */
.dp-wrap:has(> .qna-until) { width: 180px; }
.qna-calc { margin: 0; font-weight: 700; }
.qna-doc { margin: 0 0 var(--space-2); }                 /* m349b: runs as words — a narrow preview wraps the line, never the file's name */
.qna-doc svg { vertical-align: -3px; margin-right: 2px; }
.qna-fake { opacity: .75; text-align: left; }
.qna-proof { margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-card); background: var(--surface-subtle); border: var(--border-width) solid var(--border); }
.qna-proof-h { margin: 0 0 var(--space-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.qna-file { margin: 0 0 var(--space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.qna-ai { font-size: var(--helper-size); color: var(--text-secondary); }
.qna-ai--ok { color: var(--success-text); font-weight: 600; }
.qna-ai--warn { color: var(--warning-text); font-weight: 600; }
.qna-ai--bad { color: var(--danger-text); font-weight: 600; }
.qna-addfile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.qna-until-l { margin: 0; }
.qna-until { width: 180px; }
.qna-waits { color: var(--warning-text); }
.qna-later { display: flex; width: fit-content; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--label-size); cursor: pointer; }
.qna-q .textarea { width: 100%; }
.qna-later-note { margin: 0; }
.qna-why { margin: var(--space-2) 0 0; }
.qna-note { margin-top: var(--space-3); }
/* Answering: the steps are the sections; the form on the left, how far it is on the right. */
.qna-head .lede { margin-top: var(--space-1); }
.qna-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: var(--space-6); row-gap: var(--space-5); align-items: start; margin-top: var(--space-5); }
.qna-steps .step { gap: 0; }
.qna-stepbtn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.qna-stepbtn:hover span:last-child { text-decoration: underline; }
.qna-intro { margin: 0 0 var(--space-3); }
.qna-confirm { margin-top: var(--space-4); }
.qna-saved-at { margin: 0; }
.qna-side { position: sticky; top: calc(var(--shell-h) + var(--space-4)); }
.qna-side p { margin: 0; }
.qna-notes { margin: 0; display: grid; gap: var(--space-1); }
.qna-notes dt { font-weight: 700; margin-top: var(--space-2); }
.qna-notes dd { margin: 0; color: var(--text-secondary); font-size: var(--helper-size); line-height: var(--helper-lh); }
.qna-sent { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.qna-sent-acts { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.qna-sent-sec { margin-top: var(--space-4); }
.qna-later-acts { margin-top: var(--space-4); }       /* Send these answers: apart from the last section's card */
/* The answers received: the score and its sections, what waits for review, then every answer. */
.qnr-score { padding-top: var(--space-2); }
.qnr-secs > .form-title, .qnr-review > .form-title, .qnr-all > .form-title, .qn-who > .form-title, .qnp > .form-title { margin-bottom: var(--space-3); }
.qnr-score .mr-pill { font-size: var(--body-size); padding: 6px 14px; }
.qnr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-4); align-items: start; margin: var(--space-4) 0; }
.qnr-counts { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--label-size); }
.qnr-a { padding: var(--space-3) 0; border-top: var(--border-width) solid var(--border); }
.qnr-a--review { border-left: 3px solid var(--accent); padding-left: var(--space-3); }
.qnr-ans { margin: 0 0 var(--space-2); white-space: pre-wrap; }
.qnr-pts { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-secondary); }
.qnr-aisuggest { margin: 0 0 var(--space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); color: var(--violet); }
.qnr-yournote { margin: 0 0 var(--space-2); }
.qnr-decide { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.qnr-form { margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-card); background: var(--surface-subtle); display: flex; flex-direction: column; gap: var(--space-3); }
.qnr-points .input { width: 96px; }
.qnr-sec { margin: var(--space-4) 0 0; font-size: var(--body-size); }
/* A request's page (the supplier's): what comes with it. Compare: beside each offer, and what is set aside. A profile's card. */
.qn-sell { margin: var(--space-4) 0; }
.qn-sell-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.qn-sell-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-2);
  border-top: var(--border-width) solid var(--border); }
.qn-sell-name { display: flex; flex-direction: column; gap: 2px; }
.qn-sell-act { display: inline-flex; align-items: center; gap: var(--space-2); }
.qn-sell-blocked { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.qn-offer { display: flex; flex-direction: column; gap: var(--space-1); margin: 0 0 var(--space-3); }
.qn-offer-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.qn-offer-link { text-decoration: none; }
.qn-aside { margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--border-width) dashed var(--border-strong); }
.qn-aside .offer { opacity: .85; }
.qnp { margin: var(--space-4) 0; }
.qnp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.qnp-list li { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.qnp-send { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.qnp-send .field { margin: 0; min-width: 260px; }
@media (max-width: 1100px) {
  .qn-dlg-grid { grid-template-columns: minmax(0, 1fr); }
  .qn-dlg-prev { position: static; }
  .qna-split { grid-template-columns: minmax(0, 1fr); }
  .qna-split.wiz-split > :nth-child(n) { grid-column: 1; grid-row: auto; }
  .qna-side { position: static; }
  .qnr-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .qn-table td[data-label]::before, .qn-qtable td[data-label]::before, .qn-wtable td[data-label]::before, .qnd-opts td[data-label]::before,
  .qnd-ranges td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: var(--text-secondary); }
  .qn-who-list, .qn-of { grid-template-columns: minmax(0, 1fr); }
  .qn-list .qn-table, .qn-list .mr-foot { padding: 0 var(--space-4); }
  .qn-qtable td { border-top: 0; }
  .qn-qtable tr { padding-top: var(--space-2); }
  .qnd-cond { grid-template-columns: minmax(0, 1fr); }
  .qn-sec-w { width: auto; }
  .modal.qn-dlg { padding: var(--space-5) var(--space-4) var(--space-4); }
  .qna-number .input, .qna-date, .qna-until, .dp-wrap:has(> .qna-date), .dp-wrap:has(> .qna-until) { width: 100%; }
  .qn-cats { margin-left: 0; }
}

/* m349b (Jiri, 18 Oct 11:33): every checkbox and radio as Requests draws them — 20 px, the accent colour; Safari's own are too small.
   :where() keeps the rule beneath a component's own size and colour; hidden ones (sr-only, switches) are left as they are. */
:where(input[type="checkbox"]:not(.sr-only):not([role="switch"]), input[type="radio"]:not(.sr-only)) { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
/* m349b: One of as cards side by side (its question says so); a phone keeps two to a row as long as they fit. */
.qna-choices--cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-items: stretch; }
.qna-choices--cards .qna-choice { flex-direction: column; gap: var(--space-2); min-height: 88px; padding: var(--space-3) var(--space-4); }
.qna-choices--cards .qna-choice .qna-other { width: 100%; }
.qnd-display .qnd-row, .qnd-docfield .qnd-doc { margin-bottom: var(--space-1); }
/* m349c: the question dialog — a few small numbers side by side (the most points, the first that count nothing, per item, how many); a
   line under an answer, under its words; SELYVO's own type said in a line. */
.qnd-nums { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.qnd-nums .field { flex: 0 1 200px; margin: 0; }
.qnd-opts .qnd-ohelp { margin-top: var(--space-1); font-size: var(--helper-size); }
.qnd-jointype { margin: 0; }
/* m349c: SELYVO's — the levels of the first rating side by side; Onboarding's line pointing to the questionnaires. */
.qn-lv-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-2); }
.onb-qnote { margin: 0 0 var(--space-3); }
/* ===================== m349d: board RequestLineDetail (approved 18 Oct, 13:42) — the line items' table (#, Item, Quantity, Unit,
   Category); the line's detail beside it, from the start: its fields, the table's too, its category, details, document and fields of
   the buyer's own (⋯ Change · Remove; Add a field and its seven kinds; the field's form); on a phone (640 px and less) a screen of its
   own, "‹ Lines" back; the fields read on a request, an offer and in Compare; a supplier's fields to fill in; How often per day — 1 and
   1, read-only, a lock in each; the completion date emptied, said. Tokens only. ===================== */
.rl-sheet .rl-open { min-width: 28px; min-height: 28px; padding: 2px 6px; border: 0; border-radius: var(--radius-button); background: none;
  color: var(--text-secondary); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.rl-sheet .rl-open:hover { color: var(--accent-deep); text-decoration: underline; }
.rl-sheet .rl-open:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.rl-sheet .rl-open[aria-pressed="true"] { color: var(--accent-deep); font-weight: 700; }
.rl-side .rl-tabs { margin: 0; }
.rl-detail { display: flex; flex-direction: column; gap: var(--space-4); }
.rl-detail .field, .rl-d-two .field { margin: 0; }
.rl-d-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.rl-d-nav { display: inline-flex; gap: 6px; }
.rl-d-step { min-width: 34px; padding-left: 0; padding-right: 0; justify-content: center; }
.rl-d-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.rl-detail .rt-area { min-height: 90px; }
.rl-detail .lc-field .field-help, .rl-detail .lc-ai, .rl-detail .lc-back { margin: 0; }
.rl-d-doc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: var(--border-width) solid var(--border); border-radius: var(--radius-input); }
.rl-d-doc > svg { flex: none; color: var(--accent-deep); }
.rl-d-docname { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rl-d-docname a { font-weight: 700; color: var(--accent-deep); }
.rl-d-docname .field-help { margin: 0; }
.rl-d-replace { font-weight: 700; cursor: pointer; }
.rl-d-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.rl-d-attach .field-help, .rl-d-busy { margin: 0; }
.rl-fields { display: flex; flex-direction: column; }
.rl-fields-h { margin: 0 0 var(--space-1); font-size: 15px; line-height: 22px; }
.rl-fields-none { margin: 0; }
.rl-field { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 10px; align-items: center; padding: 10px 0;
  border-top: var(--border-width) solid var(--border); }
.rl-field-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rl-field-what strong { font-size: var(--label-size); line-height: var(--label-lh); overflow-wrap: anywhere; }
.rl-field-what .field-help { margin: 0; overflow-wrap: anywhere; }
.rl-field-ctl { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.rl-field--wide .rl-field-ctl { display: block; grid-column: 1 / -1; grid-row: 2; }
.rl-field--wide .rl-field-more { grid-column: 3; grid-row: 1; }
.rl-field-ctl .catpick { min-width: 150px; }
.rl-field-more { position: relative; }
.rl-field-err { grid-column: 1 / -1; margin: 0; }
.rl-f-text { width: 200px; max-width: 100%; }
.rl-f-num { display: inline-flex; align-items: center; gap: 6px; }
.rl-f-num .input { width: 96px; }
.rl-f-unit { color: var(--text-secondary); font-size: var(--helper-size); white-space: nowrap; }
.rl-f-switch { align-items: center; margin: 0; }
.rl-f-check { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-deep); }
.rl-fill { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--accent-surface); color: var(--accent-deep);
  font-size: var(--helper-size); font-weight: 700; line-height: var(--helper-lh); }
.rl-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; padding: 6px 0; border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-input); background: var(--surface); box-shadow: 0 8px 24px rgba(7, 28, 60, .12); }
.rl-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; background: none; font: inherit;
  font-size: var(--label-size); color: var(--text); text-align: left; cursor: pointer; }
.rl-menu-item:hover, .rl-menu-item:focus-visible { background: var(--accent-surface); }
.rl-menu-item:focus-visible { outline-offset: -2px; }   /* the ring inside the menu */
.rl-menu-item > svg { flex: none; }
.rl-kind-help { margin-left: auto; padding-left: 12px; color: var(--text-secondary); font-size: var(--helper-size); white-space: nowrap; }
.rl-add { position: relative; }
.rl-add-btn { display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px; border-color: var(--accent); color: var(--accent-deep); }
.rl-kinds { left: 0; right: 0; }
.rl-add-full, .rl-f-note { margin: 0; }
.rl-ff { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-card); background: var(--surface); }
.rl-ff .field { margin: 0; }
.rl-ff-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.rl-ff-title { margin: 0; font-size: 17px; line-height: 24px; }
.rl-ff-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rl-ff-optadd { display: inline-flex; gap: 6px; align-items: center; }
.rl-ff-optadd .input { width: 160px; }
.rl-ff-box { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.rl-ff-box input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent-deep); }
.rl-ff-box .field-help { display: block; margin: 2px 0 0; }
.rl-ff-acts { margin: 0; padding: 0; border: 0; justify-content: flex-end; }
.rl-d-foot { display: flex; justify-content: flex-end; padding-top: var(--space-3); border-top: var(--border-width) solid var(--border); }
.rl-d-foot:empty { display: none; }
.rl-back, .rl-tap { display: none; }
.rl-fread { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 6px 0 0; padding: 8px 12px; border-radius: var(--radius-input);
  background: var(--surface-subtle); font-size: var(--helper-size); line-height: var(--helper-lh); }
.rl-fread dt { color: var(--text-secondary); }
.rl-fread dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.rl-fread dd .rt-view { font-weight: 400; }
.rl-fread dd a { color: var(--accent-deep); }
.rt-view.rl-details { margin-top: 2px; color: var(--text-secondary); font-size: var(--helper-size); line-height: var(--helper-lh); }
.rt-view.rl-details p, .rt-view.rl-details ul, .rt-view.rl-details ol { margin-bottom: 2px; }
.ol-fill { display: flex; flex-direction: column; gap: var(--space-2); margin: 8px 0; padding: 10px 12px; border: var(--border-width) solid var(--accent-line);
  border-radius: var(--radius-input); background: var(--accent-surface); }
.ol-fill-h { margin: 0; font-size: var(--helper-size); font-weight: 700; color: var(--accent-deep); }
.ol-fill .field { margin: 0; }
.ol-fill-num { width: 120px; }
.ol-fill-check { display: flex; gap: 8px; align-items: center; font-size: var(--label-size); cursor: pointer; }
.ol-fill-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-deep); }
.cmp-filled, .cmp-cell--low .cmp-filled { display: block; color: var(--text-secondary); }   /* what was filled in is not the line's price */
.pl-numwrap { position: relative; display: inline-flex; align-items: center; }
.pl-numwrap > svg { position: absolute; right: 10px; color: var(--text-secondary); pointer-events: none; }
.pl-numwrap--fixed .input { padding-right: 30px; background: var(--surface-subtle); color: var(--text-secondary); }
.pl-fixed { margin-top: 0; }
.rq-moved { color: var(--warning-text); }
@media (max-width: 640px) {
  .rl-tap { display: block; margin: 0; }
  .rl-detail { display: none; }
  .rl-detail--open { display: flex; position: fixed; inset: 0; z-index: 45; overflow-y: auto; margin: 0;
    padding: var(--space-4) var(--space-4) var(--space-6); background: var(--surface); }
  .rl-detail--open .rl-back { display: inline-flex; align-self: flex-start; font-weight: 700; }
  .rl-field { grid-template-columns: minmax(0, 1fr) auto; }
  .rl-field .rl-field-ctl { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .rl-field .rl-field-more { grid-column: 2; grid-row: 1; }
  .rl-f-text { width: 100%; }
  .rl-kind-help { display: none; }
  .ol-fill { max-width: calc(100vw - 120px); } }   /* the offer's table scrolls across; what the buyer asks stays in sight */

/* 349h (board RequestQuestionnaire): Create request's Questionnaire step — asked once; what a result does; beside it, what the side
   answering answers. m349r: Create offer's is a list (below) — the single choice's sources and radios gone. */
.qq-lede { margin: 0 0 var(--space-3); }
.qq-core { align-self: flex-start; min-height: 0; padding: 1px var(--space-2); font-size: var(--helper-size); }
.qq-asked { margin: 0 0 var(--space-4); }
.qq-result { margin-top: var(--space-2); }
.qq-below { margin: 0 0 0 30px; }
.qq-side .qq-side-name { margin: 0; overflow-wrap: anywhere; }
.qq-side > .field-help { margin: 0; }
.qq-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.qq-parts li { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding-top: var(--space-2);
  border-top: var(--border-width) solid var(--border); }
.qq-parts li > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.qq-w { flex: none; color: var(--text-secondary); font-size: var(--helper-size); line-height: var(--helper-lh); white-space: nowrap; }
.qq-side p { margin: 0; }
/* The customer's offer: answered before it is accepted. */
.rcv-qn { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-3) 0; }
.rcv-qn > div { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.rcv-qn-done { margin: var(--space-3) 0; }
/* My account's editor as a page of a wizard; SELYVO core's — read, never changed here. */
.qn-embed-note { margin: var(--space-2) 0 var(--space-3); }
.qn-core-note { margin: var(--space-3) 0; }
.qn-core-lede { padding: var(--space-3) var(--space-5) 0; margin: 0; }
.qn-core-table .qq-core { display: flex; width: fit-content; margin-top: var(--space-1); }
.qn-dlg-fixed { min-width: 0; margin: 0; padding: 0; border: 0; }
.qn-dlg-fixed .input:disabled { background: var(--surface-subtle); cursor: default; }
/* Connected systems: which way a kind of data goes, under its name. */
.check-card .conn-dir { display: block; margin-top: 2px; }
@media (max-width: 480px) {
  .conn-kinds { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .qq-below { margin-left: 0; } }

/* ---------------------------------------------------------------------------------------------------------------------------------
   349i — board PromotionCodes (approved 18 Oct 13:42): Console › Promotion codes, the code on Suppliers & customers, Join SELYVO's
   "Have a promotion code?", My account › Membership's codes and its box, My account › Charges' running code. Tokens only (MK-02).
   --------------------------------------------------------------------------------------------------------------------------------- */
.pc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.pc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.pc-head .lede { margin: 0; max-width: 680px; }
.pc-headacts { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pc-table td { vertical-align: top; padding-top: var(--space-3); }
.pc-table td .field-help { display: block; }
.pc-num { text-align: right; white-space: nowrap; }
.pc-foot { padding: 0 var(--space-4) var(--space-4); margin: 0; }
.pc-edit, .pc-uses { margin-top: var(--space-4); }
.pc-crumb { margin: 0; }
.pc-edithead { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pc-endednote { margin: 0; }
.pc-ids { align-items: start; }
.pc-coderow { display: flex; align-items: center; gap: var(--space-3); }
.pc-coderow .input { flex: 1 1 auto; min-width: 0; }
.pc-fixed { margin: 0; font-weight: 700; font-size: var(--body-size); }
.pc-csv { margin-top: var(--space-2); width: fit-content; display: inline-flex; align-items: center; gap: var(--space-1); }
.pc-batchrow { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 var(--space-3); }
.pc-batchhelp { grid-column: 1 / -1; margin: 0; }
.pc-seg { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); background: var(--surface-subtle);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-input); width: fit-content; max-width: 100%; }
.pc-segbtn { min-height: 36px; padding: 0 var(--space-4); border: var(--border-width) solid transparent; border-radius: var(--radius-button);
  background: none; color: var(--text-secondary); font: inherit; font-weight: 700; cursor: pointer; }
.pc-segbtn--on { background: var(--surface); border-color: var(--border); color: var(--accent-deep); }
.pc-segbtn:disabled { cursor: default; }
.pc-changes { display: flex; flex-direction: column; gap: var(--space-2); }
.pc-changes .form-subtitle, .pc-changes > .field-help { margin: 0; }
.pc-chtable { margin: 0; }
.pc-chtable th, .pc-chtable td { padding: var(--space-3); border-bottom: var(--border-width) solid var(--border); vertical-align: top; }
.pc-chtable th { background: var(--surface-subtle); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.pc-chtable tr:last-child td { border-bottom: 0; }
.pc-tplcell { white-space: nowrap; }
.pc-with { min-width: 240px; }
.pc-withrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pc-withrow .catpick { flex: 1 1 170px; min-width: 0; max-width: 220px; }
.pc-valbox { display: inline-flex; align-items: center; gap: var(--space-1); }
.pc-val { width: 90px; }
.pc-unit { color: var(--text-secondary); font-size: var(--helper-size); }
.pc-res { display: block; margin-top: var(--space-1); color: var(--success-text); font-size: var(--helper-size); font-weight: 700; }
.pc-row--bad td { background: var(--danger-surface); }
.pc-lockedmode { font-weight: 700; }
.pc-all { width: fit-content; }
.pc-whowhen { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-4) var(--space-6); align-items: start; }
.pc-when { display: flex; flex-direction: column; gap: var(--space-3); }
.pc-once { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; padding: var(--space-3); border: var(--border-width) solid var(--accent-line);
  border-radius: var(--radius-input); background: var(--accent-surface); color: var(--text); font-size: var(--helper-size); line-height: var(--helper-lh); }
.pc-once svg { flex: none; color: var(--accent-deep); margin-top: 1px; }
.pc-once strong { color: var(--accent-deep); }
.pc-locked { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.pc-acts { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  border-top: var(--border-width) solid var(--border); padding-top: var(--space-4); }
.pc-actsl, .pc-actsr { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pc-useshead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.pc-usetable { margin: 0; }
.pc-usetable th, .pc-usetable td { padding: var(--space-3); border-bottom: var(--border-width) solid var(--border); vertical-align: top; }
.pc-usetable th { background: var(--surface-subtle); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.pc-usetable td .field-help { display: block; }
.pc-endrow td { background: var(--surface-subtle); }
.pc-endform { display: flex; flex-direction: column; gap: var(--space-2); max-width: 640px; }
.pc-endform .form-actions { margin: 0; }
.pc-refused { margin: var(--space-3) 0 0; }
.pc-orgline { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); color: var(--success-text); font-weight: 700; }
.pc-orgline svg { flex: none; }

.join-promo { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: var(--border-width) dashed var(--border-strong);
  border-radius: var(--radius-card); }
.join-promohead, .mbr-promotitle { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.join-promohead svg, .mbr-promotitle svg, .mbr-promohead svg { flex: none; color: var(--accent-deep); }
.join-promorow .input { max-width: 260px; }
.join-promook { margin: 0; }
.mbr-promohead { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.mbr-promohead .form-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.mbr-promodl { margin: 0; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-2) var(--space-4); }
.mbr-promodl dt { color: var(--text-secondary); }
.mbr-promodl dd { margin: 0; overflow-wrap: anywhere; }
.mbr-promorow .input { max-width: 260px; }
.mbr-promoline { color: var(--success-text); font-weight: 700; }
.mbr-with { display: block; color: var(--success-text); font-size: var(--micro-size); font-weight: 700; }
.chg-promo { margin: 0 0 var(--space-3); }
.chg-promo svg { vertical-align: -3px; }
.chg-promoval { display: block; color: var(--success-text); }

@media (max-width: 767px) {
  .pc-whowhen, .pc-batchrow, .mbr-promodl { grid-template-columns: minmax(0, 1fr); }
  .pc-num { text-align: left; }
  .pc-with { min-width: 0; }
  .pc-withrow .catpick { max-width: none; }
  .pc-acts { flex-direction: column-reverse; align-items: stretch; }
  .pc-actsl, .pc-actsr { justify-content: flex-start; }
  .pc-tplcell { white-space: normal; }
  .join-promorow .input, .mbr-promorow .input { max-width: none; }
}
/* ---------------------------------------------------------------------------------------------------------------------------------
   349j — board AiModelEffort (approved 19 Oct 18:24): Console › AI's three tabs, a model's effort (the switch and its levels) and the
   most tokens of its answer, Test it's charge, Console › AI › Use; My account › AI's level of the model. Tokens only (MK-02).
   --------------------------------------------------------------------------------------------------------------------------------- */
/* 349k — as the boards draw them (AiModelEffort, AiModelSimple): the lede under the title, above the tabs; the editor's way back and its
   title inside its card; Add a model, Change and Test it outlined in the accent; a card's heading with its icon. */
.aim-lede { margin: 0; }
.aim-tabs { margin: var(--space-4) 0; }
.aim-editor { gap: var(--space-4); }
.aim-editor-top { display: flex; flex-direction: column; gap: 2px; }
.aim-crumbs { margin: 0; gap: var(--space-1); font-size: var(--micro-size); line-height: var(--micro-lh); }
.aim-crumbs .linkbtn { color: inherit; font-weight: inherit; text-decoration: none; }
.aim-crumbs .linkbtn:hover { text-decoration: underline; }
.aim-editor-h { margin: 0; font-size: 22px; line-height: 28px; font-weight: 800; }
.aim-head .form-title, .aim-keys-h { font-size: 19px; font-weight: 800; }
.aim-btn-accent { border-color: var(--accent-deep); color: var(--accent-deep); }
/* The model by its name and, in the engine's own words, its id — closed as in its list (the boards) */
.catpick-shut-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--helper-size); }
.aim-modelfield .catpick-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--helper-size); color: var(--text); }
.aim-card-h { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--body-size); line-height: var(--body-lh); font-weight: 700; }
.aim-card-h svg { flex: none; color: var(--accent-deep); }
/* How hard it works — its card: the switch, then the board's slider and what is sent */
.aim-effort { display: flex; flex-direction: column; gap: 14px; padding: var(--space-4) 18px; border: var(--border-width) solid var(--accent); border-radius: 10px;
  background: var(--accent-wash); }
.aim-effort .field-help, .aim-only .field-help { margin: 0; }
.aim-effort-switch { margin: 0; gap: 14px; }
.aim-switch-said { display: flex; flex-direction: column; gap: 2px; }
.aim-switch-said strong { font-size: 15px; line-height: 20px; }
.aim-effort-switch--off { cursor: not-allowed; }
.aim-effort-switch--off input[role="switch"]:disabled + .switch-track { opacity: 1; }   /* the board draws it off, not faded */
.aim-effort-levels { display: flex; flex-direction: column; gap: 6px; }
.aim-effort-levels > .field-help { padding: 0 12px; }
.aim-effort-sent code { font-size: var(--micro-size); overflow-wrap: anywhere; }
/* The board's slider: a line filled up to the level chosen, a dot for each level (one the model has not got hollow), the thumb on the one
   chosen; under the line the levels' names in columns centred under their dots — the first at its left, the last at its right — each
   column reaching up over the line, so the line pressed above a level chooses it. */
.ai-slider { display: flex; flex-direction: column; gap: 6px; width: 100%; box-sizing: border-box; padding: 0 12px; }
.ai-track { position: relative; height: 26px; }
.ai-track-line, .ai-track-fill { position: absolute; top: 11px; left: 0; height: 4px; border-radius: 2px; }
.ai-track-line { right: 0; background: var(--border); }
.ai-track-fill { background: var(--accent-deep); }
.ai-slider--bad .ai-track-line { background: var(--danger); }
.ai-dot { position: absolute; top: 8px; width: 10px; height: 10px; margin-left: -5px; box-sizing: border-box; border-radius: 50%; background: var(--border);
  border: 2px solid var(--border-strong); }
.ai-dot--on { background: var(--accent-deep); border-color: var(--accent-deep); }
.ai-dot--not { background: var(--surface); border-color: var(--border); }
.ai-thumb { position: absolute; top: 1px; width: 24px; height: 24px; margin-left: -12px; box-sizing: border-box; border-radius: 50%; background: var(--surface);
  border: 3px solid var(--accent-deep); box-shadow: 0 2px 6px rgba(7, 28, 60, .18); }
.ai-stops { position: relative; z-index: 1; display: grid; min-height: 36px; }
.ai-stop { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; margin-top: -32px; padding-top: 32px; text-align: center;
  font-size: var(--helper-size); line-height: var(--helper-lh); font-weight: 600; color: var(--text); cursor: pointer; }
.ai-stop--first { align-items: flex-start; text-align: left; margin-left: -12px; }
.ai-stop--last { align-items: flex-end; text-align: right; margin-right: -12px; }
.ai-stop input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.ai-stop--on { font-weight: 800; }
.ai-stop--not { color: var(--text-secondary); cursor: not-allowed; }
.ai-stop:focus-within .ai-stop-name { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 2px; }
.ai-stop-mark { font-size: 11px; line-height: 14px; font-weight: 600; color: var(--text-secondary); }
/* For … only — its card: the field's name, its engine's name for it and what it holds on the left; its box and the model's limit on the right */
.aim-only { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) 18px; border: var(--border-width) solid var(--border);
  border-radius: 10px; background: var(--surface); }
.aim-only-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.aim-only-whose { margin-left: auto; font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary); }
.aim-only-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--space-4); align-items: center; margin-top: var(--space-1); padding: 10px 0;
  border-top: var(--border-width) solid var(--border-soft); }
.aim-only-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aim-only-label { font-size: var(--label-size); line-height: var(--label-lh); font-weight: 700; }
.aim-only-what code { font-size: var(--micro-size); overflow-wrap: anywhere; }
.aim-only-box { display: inline-flex; align-items: center; gap: var(--space-2); }
.aim-only-box .input { width: 110px; }
.aim-most-of { font-size: var(--helper-size); color: var(--text-secondary); white-space: nowrap; }
.aim-most-other { padding-top: 6px; }
/* The maximum wait, then the costs in one row; who may choose it beside the default and active (AiModelSimple) */
.aim-wait .input { width: 80px; }
.aim-unit { font-size: var(--helper-size); color: var(--text-secondary); }
.aim-costs { display: grid; grid-template-columns: repeat(4, auto); gap: var(--space-3); justify-content: start; align-items: start; }
.aim-costs .field-label { white-space: nowrap; }
.aim-cost .input { width: 100px; }
.aim-cur .catpick { width: 90px; }
.aim-markupf .input { width: 70px; }
.aim-costs .field-error { max-width: 24ch; }
.aim-whorow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.aim-flags { display: flex; flex-direction: column; gap: var(--space-2); padding-top: calc(var(--label-lh) + var(--space-2)); }
.aim-flags .frow { align-items: flex-start; min-height: 0; }
.aim-flags .frow input { margin-top: 2px; }
/* Test it's strip; the buttons on the right, under a line */
.aim-test--ok { align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; border-color: var(--success-line); flex-wrap: wrap; }
.aim-test--ok svg { flex: none; }
.aim-test-said { margin: 0; }
.aim-test-use { font-weight: 700; }
.aim-actions { justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 14px; border-top: var(--border-width) solid var(--border); }
.aim-actions .btn-secondary { margin-right: 0; }
/* The boards' tables (the list, Use): a frame, a tinted head, a line between the rows; a model's name in ink */
.aim-tbl { border: var(--border-width) solid var(--border); margin: 0; }
.aim-tbl th { padding: 10px; background: var(--table-head); font-size: var(--helper-size); line-height: var(--helper-lh); font-weight: 700; color: var(--text);
  text-align: left; vertical-align: bottom; }
.aim-tbl td { padding: 10px; border-top: var(--border-width) solid var(--border); vertical-align: top; }
.aim-tbl .num { text-align: right; }
.aim-tbl .aim-open { color: var(--text); text-decoration: none; }
.aim-tbl .aim-open:hover { text-decoration: underline; }
.aim-tbl .pill { display: inline-block; padding: 3px var(--space-3); font-size: var(--helper-size); line-height: var(--helper-lh); white-space: nowrap; }
/* Console › AI › Use — the board's card: its title and what it is, the filters with the month's totals beside them, the table */
.aim-use { display: flex; flex-direction: column; gap: var(--space-3); }
.aim-use-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.aim-use-h { margin: 0; font-size: 19px; line-height: 26px; font-weight: 800; }
.aim-use-lede { margin: 0; font-size: var(--label-size); line-height: var(--label-lh); color: var(--text-secondary); }
.aim-use-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aim-use-filters { display: flex; gap: 10px; flex-wrap: wrap; min-width: 0; }
.aim-use-filters .catpick { width: 200px; max-width: 100%; }
.aim-use-filters .catpick:last-child { width: 180px; }
.aim-use-totals { margin: 0 0 0 auto; font-size: var(--label-size); line-height: var(--label-lh); }
.aim-to--selyvo { background: var(--violet-surface); color: var(--violet); }
.aim-to--biz { background: var(--accent-surface); color: var(--accent-deep); }
.aim-use-note, .aim-use-none { margin: 0; }
/* My account › AI — how hard the business's model works for it (229 b) */
.aia-effort { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border); }
.aia-effort .form-subtitle, .aia-effort .field-help { margin: 0; }
.aia-effort .ai-slider { margin: var(--space-2) 0 var(--space-1); }
@media (max-width: 767px) {
  /* 349k — the board's slider on a phone too: its names smaller and, five levels or more, every other one a row lower (seven names on
     one line of a phone would cover each other); the cards' rows one column; the costs two by two; who may choose it above the default
     and active. */
  .ai-stop { font-size: var(--micro-size); line-height: var(--micro-lh); }
  .ai-slider--many .ai-stop:nth-child(2n) { grid-row: 2; margin-top: 0; padding-top: 2px; }
  .ai-slider--many .ai-stop:not(.ai-stop--first):not(.ai-stop--last) { white-space: nowrap; }   /* its neighbours are a row away */
  .aim-effort, .aim-only { padding: var(--space-3); }
  .aim-effort-levels > .field-help { padding: 0; }
  .aim-only-whose { margin-left: 0; flex-basis: 100%; }
  .aim-only-row { grid-template-columns: minmax(0, 1fr); }
  .aim-costs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aim-costs .field-label { white-space: normal; }
  .aim-whorow { grid-template-columns: minmax(0, 1fr); }
  .aim-flags { padding-top: 0; }
  .aim-use-head { align-items: flex-start; }
  .aim-use-totals { margin-left: 0; }
  .aim-tbl { border: 0; }
  .aim-tbl td { border-top: 0; padding: 0 0 var(--space-1); }
  .aim-use-filters { width: 100%; }
  .aim-use-filters .catpick, .aim-use-filters .catpick:last-child { width: 100%; }
  /* A request on a phone as My account › AI's are: its day and what was charged on one line, what it was under them, then who, the
     effort, the tokens, the cost and to whom — each label beside its value (eight labelled rows each were a screen of labels). */
  .aim-use-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); padding-top: var(--space-2); }
  .aim-use-table td { padding: 0 0 var(--space-1); }
  .aim-use-table td:nth-child(1), .aim-use-table td:nth-child(7) { grid-row: 1; }
  .aim-use-table td:nth-child(7) { grid-column: 2; text-align: right; font-weight: 700; }
  .aim-use-table td:nth-child(2), .aim-use-table td:nth-child(3), .aim-use-table td:nth-child(4), .aim-use-table td:nth-child(5),
  .aim-use-table td:nth-child(6), .aim-use-table td:nth-child(8) { grid-column: 1 / -1; }
  .aim-use-table td[data-label]::before { content: attr(data-label); display: inline; margin-right: var(--space-2); font-size: 11px; font-weight: 700;
    color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
  .aim-use-table td:nth-child(1)::before, .aim-use-table td:nth-child(2)::before, .aim-use-table td:nth-child(7)::before { content: none; }
  .aim-use-table .num { text-align: left; }
  .aim-use-table td.num:nth-child(7) { text-align: right; }
}
/* 349m — the board VatByCountry: Console › Finance › VAT (the rates; the rules by country), each charge's VAT kind on Charges, an invoice
   of SELYVO's words and VIES's word, SELYVO's business in the OSS since. Tokens only. */
.vat-lede { margin: 0 0 var(--space-3); }
.vat-tabs { margin-bottom: var(--space-4); }
.vat-card, .vat-kinds { display: flex; flex-direction: column; gap: 14px; padding: var(--space-6); margin-bottom: var(--space-4); }
.vat-cardhead { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.vat-cardhead .form-title { margin: 0; font-size: 19px; line-height: 26px; font-weight: 800; }
.vat-cardhead .field-help { margin: 0; font-size: var(--label-size); line-height: var(--label-lh); }
.vat-strip { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 8px; border: var(--border-width) solid var(--border);
  background: var(--surface-subtle); color: var(--text-secondary); font-size: var(--label-size); line-height: var(--label-lh); }
.vat-strip > svg { flex: none; margin-top: 2px; }
.vat-strip > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.vat-strip--ok { background: var(--success-surface); border-color: var(--success-line); color: var(--success-text); }
.vat-strip--warn { background: var(--warning-surface); border-color: var(--warning-fill); color: var(--warning-text); }
.vat-strip .vat-seen { flex: none; color: var(--warning-text); font-weight: 700; }
.vat-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vat-findbox { position: relative; display: inline-flex; align-items: center; width: 260px; max-width: 100%; }
.vat-findbox svg { position: absolute; left: 12px; color: var(--text-secondary); pointer-events: none; }
.vat-findbox .input { width: 100%; padding-left: 36px; }
.vat-show { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.vat-show .field-help { margin: 0; }
.vat-addout { margin-left: auto; }
.vat-table { margin: 0; border: var(--border-width) solid var(--border); }
.vat-table th, .vat-ktable th { padding: 10px; background: var(--table-head); font-size: var(--helper-size); line-height: var(--helper-lh); font-weight: 700;
  color: var(--text); text-align: left; vertical-align: bottom; }
.vat-table td, .vat-ktable td { padding: 10px; border-top: var(--border-width) solid var(--border); vertical-align: top; }
.vat-table .num { text-align: right; }
.vat-num { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.vat-muted { color: var(--text-secondary); }
.vat-setby { display: block; }
.vat-src { display: inline-block; padding: 3px var(--space-3); background: var(--border-soft); color: var(--text-secondary); font-size: var(--helper-size);
  line-height: var(--helper-lh); white-space: nowrap; }
.vat-src--ec { background: var(--accent-surface); color: var(--accent-deep); }
.vat-act { text-align: right; white-space: nowrap; }
.vat-act .linkbtn { font-weight: 700; }
.vat-act .linkbtn[aria-pressed="true"] { text-decoration: underline; }
.vat-more td { color: var(--text-secondary); }
.vat-below { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.vat-box { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: var(--border-width) solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); font-size: var(--helper-size); line-height: var(--helper-lh); min-width: 0; }
.vat-box > strong { font-size: var(--label-size); line-height: var(--label-lh); }
.vat-ecbox { gap: 8px; }
.vat-lock { display: flex; align-items: center; gap: var(--space-2); }
.vat-lock svg { flex: none; }
.vat-histrow { display: flex; justify-content: space-between; gap: var(--space-3); padding: 6px 0; border-top: var(--border-width) solid var(--border-soft); }
.vat-histrow .vat-muted { text-align: right; }
.vat-form, .vat-ruleform { margin: 0; padding: var(--space-4); background: var(--surface-subtle); }
.vat-form .form-title, .vat-ruleform .form-title { margin: 0 0 var(--space-3); }
.vat-fgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.vat-pctrow { display: flex; align-items: center; gap: var(--space-2); }
.vat-pctrow .input { width: 100px; }
/* Rules by country: the countries on the left, a country's rules on the right — who, what SELYVO charges, the words */
.vat-rules { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.vat-countries { display: flex; flex-direction: column; gap: 2px; padding: 8px; border: var(--border-width) solid var(--border); border-radius: 10px; }
.vat-country { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: 9px 12px; border: 0; border-radius: var(--radius-button);
  background: transparent; color: var(--text); font: inherit; font-size: var(--label-size); line-height: var(--label-lh); font-weight: 500; text-align: left; cursor: pointer; }
.vat-country:hover { background: var(--accent-surface); }
.vat-country--on { background: var(--accent-surface); color: var(--accent-deep); font-weight: 700; }
.vat-country:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.vat-count { flex: none; font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); font-weight: 500; }
.vat-allc { align-self: flex-start; margin: 4px 12px; font-size: var(--label-size); line-height: var(--label-lh); }
.vat-rules-main { display: flex; flex-direction: column; min-width: 0; }
.vat-rules-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-bottom: var(--space-2); }
.vat-rules-head .field-help { display: block; margin: 0; font-size: var(--micro-size); line-height: var(--micro-lh); }
.vat-h3 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 800; }
.vat-rule { display: grid; grid-template-columns: 250px 260px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: var(--border-width) solid var(--border-soft);
  align-items: start; font-size: var(--label-size); line-height: var(--label-lh); }
.vat-rule--head { padding: 6px 0; border-top: 0; font-size: var(--micro-size); line-height: var(--micro-lh); font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-secondary); }
.vat-rule--own { margin-top: 4px; padding: 12px; border: var(--border-width) solid var(--warning-fill); border-radius: 8px; background: var(--warning-surface); }
.vat-who { font-weight: 700; }
.vat-words { display: flex; flex-direction: column; gap: 4px; font-size: var(--helper-size); line-height: var(--helper-lh); min-width: 0; overflow-wrap: anywhere; }
.vat-ownmeta { color: var(--warning-text); }
.vat-ownmeta .linkbtn { color: var(--warning-text); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.vat-ruleform { margin-top: var(--space-3); }
.vat-area { min-height: 64px; resize: vertical; }
.vat-rfrom .input { max-width: 220px; }
.vat-homebox { gap: 4px; margin-bottom: var(--space-4); }
.vat-homebox > strong { font-size: 15px; }
.vat-homebox .vat-rule { grid-template-columns: 250px 260px minmax(0, 1fr); }
/* Charges — each charge's VAT kind: its kind chosen in place; another reason said beside it */
.vat-ktable { margin: 0; border: var(--border-width) solid var(--border); }
.vat-ktable td:first-child { width: 34%; }
.vat-ktable td.vat-kindcell { width: 36%; }
.vat-kindcell .catpick { width: 100%; }
.vat-reason { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: end; margin-top: var(--space-2); }
.vat-reason .field-label { grid-column: 1 / -1; }
.vat-kinds .field-help { margin: 0; }
.vat-kindnote { color: var(--success-text); }
/* An invoice of SELYVO's: VIES's word after its customer's VAT ID, in the line; its legal words, each language marked */
.inv-vies { font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary); }
.inv-vies svg { display: inline-block; vertical-align: -2px; margin-right: 3px; }
.inv-vies--ok { color: var(--success-text); }
.inv-vies--no { color: var(--warning-text); }
.inv-words { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-3); padding: 8px 10px; border-radius: 8px; background: var(--table-head);
  font-size: var(--helper-size); line-height: var(--helper-lh); overflow-wrap: anywhere; }
.inv-words-lang { color: var(--text-secondary); }
.bp-oss .input { max-width: 260px; }
@media (max-width: 767px) {
  /* 349m — on a phone: the filters one under another, the table's rows each a card of labelled values, the boxes one column; a country's
     rules one under another, the countries a list above them. */
  .vat-card, .vat-kinds { padding: var(--space-4); }
  .vat-findbox { width: 100%; }
  .vat-addout { margin-left: 0; width: 100%; }
  .vat-table, .vat-ktable { border: 0; }
  .vat-table thead, .vat-ktable thead { display: none; }
  .vat-table tr, .vat-ktable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); padding: var(--space-2) 0;
    border-top: var(--border-width) solid var(--border); }
  .vat-table td, .vat-ktable td { grid-column: 1 / -1; padding: 0 0 var(--space-1); border-top: 0; text-align: left; width: auto; }
  .vat-table td.num { text-align: left; }
  .vat-table td:first-child { grid-column: 1; grid-row: 1; }
  .vat-ktable td:first-child, .vat-ktable td.vat-kindcell { width: auto; }
  .vat-table td[data-label]:not(:first-child)::before, .vat-ktable td[data-label]:not(:first-child)::before { content: attr(data-label); display: inline;
    margin-right: var(--space-2); font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
  .vat-table td.vat-act { grid-column: 2; grid-row: 1; text-align: right; }
  .vat-more td { grid-column: 1 / -1; }
  .vat-below { grid-template-columns: minmax(0, 1fr); }
  .vat-fgrid { grid-template-columns: minmax(0, 1fr); }
  .vat-rules { grid-template-columns: minmax(0, 1fr); }
  .vat-rule, .vat-homebox .vat-rule { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .vat-rule--head { display: none; }
  .vat-histrow { flex-direction: column; gap: 2px; }
  .vat-histrow .vat-muted { text-align: left; }
}

/* 349m — the board MailNewChat: To, Cc and Bcc searched like an address book (the list under the box, each person a chip with the name and
   the business); a new chat's one box — the greeting and the closing tinted, the signature quieter; the tone's help under it. Tokens only. */
.wm-c-field { position: relative; }
.wm-recips-icon { display: inline-flex; flex: none; color: var(--text-secondary); margin-left: 2px; }
.wm-recips .wm-chip-person { min-height: 30px; padding: 0 6px 0 4px; border-radius: 999px; gap: 6px; font-size: var(--helper-size); font-weight: 700; color: var(--navy); }
.wm-chip-av, .wm-find-av { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: var(--surface);
  color: var(--accent-deep); font-weight: 800; }
.wm-chip-av { width: 22px; height: 22px; font-size: 11px; }
.wm-chip-biz { font-weight: 500; color: var(--text-secondary); }
.wm-find-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; }
.wm-find-pop:empty { display: none; }
.wm-find { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; padding: 6px; border: var(--border-width) solid var(--border);
  border-radius: 8px; background: var(--surface); box-shadow: 0 10px 26px rgba(7, 28, 60, .14); }
.wm-find-group { display: flex; flex-direction: column; gap: 2px; }
.wm-find-h { display: flex; align-items: center; gap: 6px; padding: 6px 10px 2px; font-size: 11px; line-height: 16px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-secondary); }
.wm-find-h svg { flex: none; }
.wm-find-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-button); cursor: pointer; }
.wm-find-row:hover, .wm-find-row.is-on { background: var(--accent-surface); }
.wm-find-av { width: 30px; height: 30px; font-size: 11px; background: var(--surface-sunken); }
.wm-find-av--at { background: var(--border-soft); color: var(--text-secondary); }
.wm-find-main { display: flex; flex-direction: column; min-width: 0; }
.wm-find-main strong { font-size: var(--label-size); line-height: var(--label-lh); }
.wm-find-sub { font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-find-hit { background: var(--warning-surface); color: inherit; border-radius: 3px; }
.wm-find-none { margin: 0; padding: 8px 10px; font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary); }
.wm-c-tonerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wm-c-tonerow .field-label { margin: 0; }
.wm-mc-box { display: flex; flex-direction: column; height: auto; min-height: 220px; padding: 10px 8px; font-size: 15px; line-height: 24px; white-space: pre-wrap;
  overflow-wrap: anywhere; cursor: text; }
.wm-mc-box:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wm-mc-bl { min-height: 24px; padding: 0 6px; }
.wm-mc-bl--greet, .wm-mc-bl--close { background: var(--warning-surface); }
/* each tinted block rounded, as the board draws the greeting and the closing */
.wm-mc-bl--greet:first-child, .wm-mc-bl:not(.wm-mc-bl--close) + .wm-mc-bl--close { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.wm-mc-bl--greet:not(:has(+ .wm-mc-bl--greet)), .wm-mc-bl--close:not(:has(+ .wm-mc-bl--close)) { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.wm-mc-bl--sig { color: var(--text-secondary); }
.wm-c-foot--chat .field-help { color: var(--text-secondary); }
.wm-mc-box + .field-help { margin-top: 10px; }
@media (max-width: 640px) {
  .wm-c-foot--chat .wm-c-savebtn { display: none; }        /* the phone board's new chat: Discard, Send */
  /* ... and its tone the slicer alone, the drawer's width — its name kept for a screen reader */
  .wm-c-tonerow .field-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .wm-c-tonerow .wm-slice { flex: 1 1 auto; }
  .wm-c-tonerow .wm-slice-btn { flex: 1 1 0; }
  .wm-c-tonefield #wm-c-tone-h { display: none; }
  .wm-find { max-height: 50vh; }
  .wm-mc-box { min-height: 200px; }
}

/* 349o (boards RequestFileLots, LineItemsLots, LotsCompareAward, approved 20 Oct 21:02): lines under lots — the request's own setting in
   Scope; Line items' strip, its lots' headers, grips, the teal line where a dragged line lands, a lot's detail, a phone's lots; Import's
   columns as read; what AI found by lot, its questions; a supplier's offer by lot, its discounts; Compare and the award by lot. */
.rl-boxcard { display: flex; flex-direction: column; border: var(--border-width) solid var(--accent); border-radius: var(--radius-input); background: var(--accent-surface); }
.rl-boxcard > .rl-box { border: 0; border-radius: var(--radius-input) var(--radius-input) 0 0; background: transparent; }
.rl-lots-mode { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 14px 0 calc(14px + 19px + var(--space-3)); padding: var(--space-3) 0 14px;
  border-top: var(--border-width) solid var(--border); }
.rl-lm-h { margin: 0; font-size: var(--label-size); line-height: var(--label-lh); }
.rl-lm-opts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
.rl-lm-opt { margin: 0; background: var(--surface); }
.rl-lm-opt strong { font-size: var(--label-size); line-height: var(--label-lh); }
.rl-lots-mode > .field-help { margin: 0; }
.ff-boxchip { display: inline-flex; width: fit-content; max-width: 100%; margin-top: 6px; white-space: normal; }
.rl-lots-lede { margin: 0 0 var(--space-3); }
.rl-lot-strip { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-3) 0; }
.rl-lot-strip-text { flex: 1 1 320px; min-width: 0; }
.rl-lot-strip-where { display: inline-flex; align-items: center; gap: var(--space-2); }
.rl-lot-strip-where .field-help { margin: 0; }
.rl-sheet--lots .rl-grip { width: 34px; padding: 0; text-align: center; }
.rl-sheet--lots th.rl-qty, .rl-sheet--lots td:nth-child(3) { width: auto; }
.rl-sheet--lots td:nth-child(2) { min-width: 0; }
.rl-sheet--lots td:nth-child(3) { min-width: 220px; }
.rl-sheet--lots td:nth-child(4) { width: 96px; }
.rl-grip-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-button);
  background: transparent; color: var(--text-secondary); cursor: grab; font-size: var(--label-size); }
.rl-grip-btn:hover { background: var(--surface-sunken); color: var(--accent-deep); }
.rl-grip-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.rl-grip-btn[aria-pressed="true"] { background: var(--accent-surface); color: var(--accent-deep); cursor: grabbing; }
.rl-sheet tr.rl-lot td { background: var(--surface-subtle); border-bottom: var(--border-width) solid var(--border); }
.rl-sheet tr.rl-lot td + td, .rl-sheet tr.rl-more td + td { border-left: 0; }                       /* the board: one band each */
.rl-sheet tr.rl-lot--on td { background: var(--accent-surface); }
.rl-sheet tr.rl-lot--on td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.rl-lot-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-height: 44px; padding: 4px 8px; }
.rl-lot-caret { width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-button); background: transparent; color: var(--text-secondary); cursor: pointer; }
.rl-lot-caret:hover { background: var(--surface-sunken); }
.rl-lot-name-btn { padding: 4px 6px; border: 0; border-radius: var(--radius-button); background: transparent; color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.rl-lot-name-btn:hover { text-decoration: underline; }
.rl-lot-k { font-weight: 700; white-space: nowrap; }
.rl-lot-name { flex: 1 1 220px; min-height: 36px; max-width: 420px; }
.rl-lot-meta { margin: 0; }
.rl-lot-opt { background: color-mix(in srgb, var(--warning) 28%, var(--surface)); color: var(--text); }
.rl-lotd .lc-of { margin: 0; color: var(--text-secondary); font-size: var(--micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rl-lot-more { position: relative; margin-left: auto; }
.rl-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column; min-width: 200px; padding: 4px;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-input); background: var(--surface); box-shadow: 0 8px 24px rgba(7, 28, 60, .12); }
.rl-menu-item { min-height: 40px; padding: 8px 12px; border: 0; border-radius: var(--radius-button); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rl-menu-item:hover:not([disabled]), .rl-menu-item:focus-visible { background: var(--surface-sunken); }
.rl-menu-item[disabled] { color: var(--text-secondary); cursor: default; }
.rl-lot-none { display: inline-block; padding: 10px 8px; color: var(--text-secondary); font-size: var(--label-size); font-weight: 700; }
.rl-sheet tr.rl-more td { padding: 8px 10px; color: var(--text-secondary); font-size: var(--helper-size); background: var(--surface); }
.rl-sheet tr.rl-row--moving td { background: var(--surface); box-shadow: inset 0 2px 0 var(--accent), 0 8px 14px -10px rgba(7,28,60,.45); }   /* lifted, landing here */
.rl-sheet tr.rl-drop-before td { box-shadow: inset 0 2px 0 var(--accent); }
.rl-sheet tr.rl-drop-after td { box-shadow: inset 0 -2px 0 var(--accent); }
.rl-sheet tr.rl-drop td { box-shadow: inset 0 -2px 0 var(--accent); background: var(--accent-surface); }
.rl-lotd-label { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.rl-lotd-label .field-label { margin: 0; }
.rl-lotd-budget { grid-template-columns: minmax(0, 1fr) 120px; }
.rl-lotd-sup { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.rl-lotd-sup legend { margin-bottom: var(--space-2); }
.rl-lotd-sup .field-help { margin: 0; }
.rl-lotd-opt { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.rl-lotd-opt input { width: 18px; height: 18px; margin: 2px 0 0; }
.rl-lotd-opt > span { display: flex; flex-direction: column; }
.rl-d-lot .rl-lotd-label { margin-bottom: 6px; }
.rl-phone { display: none; }
.rl-phone-list { list-style: none; margin: 0; padding: 0; border: var(--border-width) solid var(--border); border-radius: var(--radius-input); overflow: hidden; }
.rl-phone-list > li + li { border-top: var(--border-width) solid var(--border-soft); }
.rl-phone-lot { display: flex; align-items: center; gap: var(--space-2); padding: 0 8px 0 4px; background: var(--surface-subtle); }
.rl-phone-caret { width: 36px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--text-secondary); }
.rl-phone-head, .rl-phone-line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: 52px; padding: 8px 10px;
  border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rl-phone-head > span:first-child, .rl-phone-line > span:first-child { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.rl-phone-head strong, .rl-phone-line strong { font-size: var(--label-size); line-height: var(--label-lh); }
.rl-phone-head .field-help, .rl-phone-line .field-help { margin: 0; }
.rl-phone-line { padding-left: 34px; }
.rl-phone-more { padding: 8px 14px 8px 34px; margin: 0; }
.rl-phone-add { margin: 6px 0 6px 34px; }
.rl-phone-none { padding: 10px 14px; }
.rl-phone-addlot { margin-top: var(--space-3); }
.rl-review-lots { display: flex; flex-direction: column; gap: 6px; }
.rl-review-lot { margin: var(--space-2) 0 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.rl-review-lot .field-help { margin: 0; }
.rl-table tr.rl-read-lot td { background: var(--surface-subtle); }
.rl-read-covers { margin-top: 4px; color: var(--text-secondary); font-size: var(--helper-size); line-height: var(--helper-lh); }
.rl-imp-read { margin: var(--space-2) 0 0; }
.rl-imp-cols { list-style: none; margin: 0; padding: 0; }
.rl-imp-cols li { display: grid; grid-template-columns: minmax(0, 200px) 18px minmax(0, 1fr); gap: var(--space-2); align-items: center; padding: 6px 0;
  border-top: var(--border-width) solid var(--border-soft); font-size: var(--helper-size); line-height: var(--helper-lh); }
.rl-imp-cols li > svg { color: var(--text-secondary); }
.rl-imp-from { font-weight: 700; overflow-wrap: anywhere; }
.rl-imp-count { margin: var(--space-2) 0 0; }
.ff-row--grps .ff-val { display: flex; flex-direction: column; gap: var(--space-2); }
.ff-grps { display: flex; flex-direction: column; gap: var(--space-2); }
.ff-grp { border: var(--border-width) solid var(--border); border-radius: var(--radius-input); background: var(--surface); }
.ff-grp--open { border-color: var(--accent-line); background: var(--accent-wash); }                 /* the board: an open lot or section */
.ff-grp-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--radius-input);
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ff-grp--open .ff-grp-head { border-radius: var(--radius-input) var(--radius-input) 0 0; }
.ff-grp-caret { color: var(--text-secondary); }
.ff-grp-title { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--label-size); line-height: var(--label-lh); }
.ff-grp-meta { flex-basis: 100%; margin: 0 0 0 22px; font-size: var(--helper-size); line-height: var(--helper-lh); }
.ff-grp-go, .ff-grp-back, .ff-grp-screen-h { display: none; }
.ff-grp-body { padding: 0 12px 10px; border-top: var(--border-width) solid var(--border-soft); border-radius: 0 0 var(--radius-input) var(--radius-input); background: var(--surface); }
.ff-cols { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 10px 12px; border-radius: var(--radius-input); background: var(--table-head);
  font-size: var(--helper-size); line-height: var(--helper-lh); }
.ff-col-n { color: var(--text-secondary); }
.ff-qrow { display: grid; grid-template-columns: 24px 36px minmax(0, 1fr); gap: var(--space-2); padding: 8px 0; border-top: var(--border-width) solid var(--border-soft); font-size: var(--helper-size);
  line-height: var(--helper-lh); }
.ff-qrow:first-of-type { border-top: 0; }
.ff-qn { color: var(--text-secondary); }
.ff-qref { color: var(--text-secondary); font-weight: 700; }
.ff-qmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 4px; color: var(--text-secondary); font-size: var(--micro-size); }
.ff-qmore > .field-help { grid-column: 2 / -1; margin: 0; }
.ff-crit { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--danger-surface); color: var(--danger-text);
  font-size: var(--micro-size); font-weight: 700; }
.ff-crit-n { margin-left: 4px; color: var(--text-secondary); font-size: var(--helper-size); }
.ff-code { padding: 0 6px; border-radius: 4px; background: var(--border-soft); color: var(--text-secondary); font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700;
  white-space: nowrap; }
.ff-qsaid { color: var(--text-secondary); }
.ff-tick { width: 18px; height: 18px; margin: 0; }
.ff-qrow > .ff-tick { width: 16px; height: 16px; margin-top: 1px; }
.ff-grp .rl-lot-opt { background: var(--warning-surface); }                                         /* on white, as the board's */
.ff-grp--tick { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; }
.ff-grp--tick > .ff-tick { justify-self: center; margin-top: 13px; }
.ff-grp--tick > .ff-grp-body { grid-column: 1 / -1; }
.ff-lines th.ff-tick, .ff-lines td.ff-tick { width: 28px; padding-right: 0; }
.ff-lines td.ff-tick input { width: 16px; height: 16px; margin: 0; }
/* a lot's lines as the board's small table */
.ff-lines .rl-table th { padding: 8px 6px; border-bottom: 0; font-size: var(--micro-size); line-height: var(--micro-lh); }
.ff-lines .rl-table td { padding: 7px 6px; border-bottom: 0; border-top: var(--border-width) solid var(--border-soft); line-height: var(--helper-lh); }
.ff-off, .ff-off strong { color: var(--text-secondary); }
.ff-units { display: block; margin-top: 4px; }
.ff-head { display: block; }
.ff-grp-all { display: flex; flex-direction: column; gap: var(--space-2); }
.ff-said-short, .ff-row-go { display: none; }
.ff-gates { margin: 0; }
.ol-table--lots tr.ol-lot td { padding: 8px 10px; background: var(--surface-subtle); }
.ol-table--lots tr.ol-lot--none td { color: var(--text-secondary); }
.ol-table--lots tr.ol-lot--opt td { background: var(--warning-surface); border-top: var(--border-width) dashed var(--warning); border-bottom: var(--border-width) dashed var(--warning); }
.ol-lot-opt { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; cursor: pointer; }
.ol-lot-opt input, .ol-lotpick-item input { width: 18px; height: 18px; margin: 0; }
.ol-lot-opt .field-help { margin: 0; }
.ol-lot-total { font-weight: 700; white-space: nowrap; }
.ol-lotpick { margin: var(--space-3) 0; padding: 0; border: 0; }
.ol-lotpick-list { display: flex; gap: 14px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--radius-input); background: var(--table-head); }
.ol-lotpick-item { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--label-size); cursor: pointer; }
.ol-disc { display: flex; flex-direction: column; gap: 6px; margin: var(--space-4) 0 0; }
.ol-disc-h { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ol-disc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; gap: 10px; align-items: center; padding: 6px 0; border-top: var(--border-width) solid var(--border-soft); }
.ol-disc-row .field-error { grid-column: 1 / -1; margin: 0; }
.ol-disc-what { font-size: var(--label-size); }
.ol-disc-pct { display: inline-flex; align-items: center; gap: 8px; }
.ol-disc-pct .input { width: 72px; text-align: right; }
.ol-disc-pct .field-help { margin: 0; white-space: nowrap; }
.ol-disc-pick { display: flex; flex-direction: column; gap: var(--space-2); padding: 10px 12px; border: var(--border-width) solid var(--border); border-radius: var(--radius-input); }
.ol-disc-pick .field-label, .ol-disc-pick .form-actions { margin: 0; }
.ol-total--lots { display: flex; flex-direction: column; gap: 4px; }
.ol-total--lots > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.ol-total-opt { color: var(--text-secondary); }
.cmp-lots { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0; }
.cmp-lots .form-title { margin: 0; }
.cmp-lots-table th[scope="row"] { min-width: 200px; text-align: left; }
.cmp-lots-table td.num, .cmp-lots-table th.num { text-align: right; white-space: nowrap; }
.cmp-lots-table .cmp-sub { display: block; font-weight: 500; }
.cmp-pick { min-width: 200px; }
.cmp-won td .cmp-disc { display: block; font-size: var(--micro-size); font-weight: 700; color: var(--accent-deep); }
.cmp-opt { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px 12px; border: var(--border-width) dashed var(--warning); border-radius: var(--radius-input);
  background: var(--warning-surface); }
.cmp-opt legend { display: contents; }
.cmp-opt-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--helper-size); cursor: pointer; }
.cmp-opt-row input { width: 16px; height: 16px; margin: 0; }
.cmp-opt-row > span { flex: 1 1 auto; }
.cmp-opt .field-help { margin: 0; }
.cmp-lowest { align-items: center; border-color: var(--accent-line); background: var(--accent-surface); }
.cmp-lowest > div { flex: 1 1 300px; min-width: 0; }
.cmp-award { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); border: var(--border-width) solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); }
.cmp-opt-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-award-row > span.cmp-aw-line { display: block; }
.cmp-award .form-subtitle { margin: 0 0 4px; color: var(--text); }
.cmp-award--plain { padding: var(--space-3) 0 0; border: 0; border-top: 2px solid var(--border); border-radius: 0; background: transparent; }
.cmp-award--plain .cmp-award-row:first-child { border-top: 0; }
/* the board's lots tables: no borders between the columns; all in, a lot's row plain, the proposal's bold and not tinted */
.cmp-lots-table td, .cmp-lots-table thead th + th { border-left: 0; }
.cmp-lots-table--allin tbody th[scope="row"] { font-weight: 400; }
.cmp-lots-table .cmp-row-total th, .cmp-lots-table .cmp-row-total td { background: transparent; }
.cmp-award-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; border-top: var(--border-width) solid var(--border-soft); font-size: var(--helper-size); }
.cmp-award-row > span { display: flex; flex-direction: column; }
.cmp-award-row .field-help { margin: 0; }
.cmp-award-row > strong { align-self: center; white-space: nowrap; }
.cmp-award-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 2px solid var(--border); }
.cmp-left { margin: 0; color: var(--warning-text); }
.cmp-awarded-list { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cmp-awarded-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.po-gross, .po-disc { color: var(--text-secondary); font-weight: 500; }
@media (max-width: 640px) {
  .rl-lm-opts { grid-template-columns: minmax(0, 1fr); }
  .rl-phone { display: block; }
  .sheet-wrap:has(> .rl-sheet--lots) { display: none; }
  .rl-lot-strip-where { flex-wrap: wrap; }
  .rl-imp-cols li { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); }
  .ff-grp--open:not(.ff-grp--screen) .ff-grp-body { display: none; }
  .ff-grp--open:not(.ff-grp--screen) .ff-grp-caret { visibility: hidden; }
  .ff-grp-go { display: inline; margin-left: auto; color: var(--text-secondary); }
  .ff-grp-caret { display: none; }
  .ff-grp-meta { margin-left: 0; }
  .ff-grp--screen .ff-grp-body { position: fixed; inset: 0; z-index: 45; overflow-y: auto; padding: var(--space-4) var(--space-4) var(--space-6); background: var(--surface); }
  .ff-grp--screen .ff-grp-back { display: inline-flex; margin-bottom: var(--space-3); font-weight: 700; }
  .ff-grp--screen .ff-grp-body { border-top: 0; border-radius: 0; }
  .ff-grp--screen .ff-grp-screen-h { display: flex; flex-direction: column; gap: 2px; margin: 0 0 var(--space-2); }
  .ff-grp-head { position: relative; padding-right: 32px; }
  .ff-grp-go { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
  .ff-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ff-cols > .ff-col-n:not(:first-child) { margin-top: 6px; }
  /* the board: on a phone a row of lots or questions its summary — "Lots and line items ›" — its lots or sections shown when pressed */
  .ff-said { display: none; }
  .ff-said-short { display: inline; }
  .ff-row--grps > strong { display: none; }
  .ff-row > .ff-row-go { display: inline-flex; align-items: center; gap: 6px; grid-column: 2; justify-self: start; color: var(--text); font-weight: 700;
    text-align: left; text-decoration: none; }
  .ff-row--grps:not(.ff-row--open) .ff-grp-all { display: none; }
  .ff-lines .rl-table { min-width: 0; }
  .ff-lines .rl-table thead { display: none; }
  .ff-lines .rl-table, .ff-lines .rl-table tbody { display: block; }
  .ff-lines .rl-table tr { display: block; position: relative; padding: 8px 0 8px 66px; border-top: var(--border-width) solid var(--border-soft); }
  .ff-lines .rl-table tr.rl-more { padding-left: 0; }
  .ff-lines .rl-table td { display: inline; padding: 0 6px 0 0; border: 0; text-align: left; white-space: normal; }
  .ff-lines .rl-table td.ff-tick { position: absolute; left: 0; top: 8px; width: auto; }
  .ff-lines .rl-table td.rl-n { position: absolute; left: 28px; top: 8px; }
  .ff-lines .rl-table td.ff-item { display: block; margin-bottom: 2px; }
  .ol-disc-row { grid-template-columns: minmax(0, 1fr) 32px; }
  .ol-disc-pct { grid-column: 1; grid-row: 2; }
  .cmp-award-foot .btn { width: 100%; } }

/* m349p (board QuestionsAboutLots): Create request › Questionnaire — the request's questionnaires, each with its About and its weight;
   beside them what suppliers answer of the one chosen, and an offer's score; the About picker — a card, at 390 px a sheet from below. */
.rqq-list-h { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.rqq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rqq-row { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) 240px 88px 32px; column-gap: var(--space-3); row-gap: var(--space-2);
  align-items: center; padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--border); border-radius: var(--radius-input); background: var(--surface); }
.rqq-row--on { border-color: var(--accent); background: var(--accent-wash); }
.rqq-row--bad { border-color: var(--danger-text); }
.rqq-n { font-weight: 700; color: var(--text-secondary); }
.rqq-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; }
.rqq-name { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--text); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.rqq-name:hover { color: var(--accent-deep); }
.rqq-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); max-width: 100%; min-width: 0; }
.rqq-kind { min-height: 0; padding: 1px var(--space-2); font-size: var(--helper-size); }
.rqq-kind--other { background: var(--border-soft); color: var(--text-secondary); }
.rqq-file { max-width: 100%; min-width: 0; border-radius: var(--radius-button); white-space: normal; overflow-wrap: anywhere; }
.rqq-acts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.rqq-acts .linkbtn { text-align: left; }
.rqq-about, .rqq-w { margin: 0; min-width: 0; }
.rqq-about .field-label, .rqq-w .field-label { display: block; margin-bottom: 2px; font-size: var(--helper-size); font-weight: 400; color: var(--text-secondary); }
.rqq-w .input { width: 56px; }
.rqq-more { position: relative; }
.rqq-sure, .rqq-row-err { grid-column: 2 / -1; margin: 0; }
.rqq-none, .rqq-help { margin: var(--space-2) 0 var(--space-3); }
.rqq-gone { margin: 0 0 var(--space-3); }
.rqq-add { position: relative; display: inline-block; margin-bottom: var(--space-4); }
.rqq-add-btn { display: inline-flex; align-items: center; gap: 6px; border-color: var(--accent); color: var(--accent-deep); }
.rqq-menu { left: 0; right: auto; width: 372px; max-width: calc(100vw - 32px); }
.rqq-mi { align-items: flex-start; padding: 10px 16px; }
.rqq-mi > span { display: flex; flex-direction: column; gap: 2px; }
.rqq-mi .field-help { white-space: normal; }
.rqq-mi-back { color: var(--text-secondary); }
.rqq-mi-none { margin: 0; padding: 8px 16px; }
.rqq-eyebrow { margin: 0; font-size: var(--micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.rqq-side-name { margin: 0; font-size: 20px; line-height: 26px; overflow-wrap: anywhere; }
.rqq-parts li { flex-direction: column; align-items: stretch; }
.rqq-part-h { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.rqq-part-h > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.rqq-part-about { display: flex; align-items: center; gap: var(--space-2); }
.rqq-part-about .catpick { width: auto; min-width: 0; }
.rqq-sec-note { margin: var(--space-2) 0 0; }
/* the About ▾ as the board draws it — compact, beside a weight or a section's head */
.rqq-about .catpick-btn, .rqq-part-about .catpick-btn, .qn-sec-about .catpick-btn { min-height: 36px; height: 36px; padding-top: 0; padding-bottom: 0;
  font-size: var(--label-size); }
.rqq-about .catpick-btn .catpick-name, .rqq-part-about .catpick-btn .catpick-name, .qn-sec-about .catpick-btn .catpick-name { font-weight: 600; }
.rqq-score { margin-top: var(--space-4); }
.rqq-score .panel-title { display: flex; align-items: center; gap: var(--space-2); }
.rqq-score-rows { list-style: none; margin: 0; padding: 0; }
.rqq-score-rows li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: var(--border-width) solid var(--border-soft); }
.rqq-score-w { flex: none; color: var(--text-secondary); white-space: nowrap; }
.rqq-score-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin: 0; padding-top: var(--space-2);
  border-top: 2px solid var(--border-strong); }
.rqq-score-lots { margin: var(--space-1) 0 0; }
@media (max-width: 760px) {
  .rqq-row { grid-template-columns: 20px minmax(0, 1fr) 32px; }
  .rqq-about { grid-column: 2 / 4; grid-row: 2; }
  .rqq-w { grid-column: 2 / 4; grid-row: 3; }
  .rqq-more { grid-column: 3; grid-row: 1; align-self: start; }
  .rqq-n { align-self: start; }
}

/* the About picker (283) */
.ab-scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); }
.ab-dlg { position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 440px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px);
  overflow: auto; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-card); background: var(--surface);
  box-shadow: 0 16px 48px rgba(7, 28, 60, .24); }
.ab-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.ab-h { margin: 0; font-size: var(--section-size); line-height: var(--section-lh); }
.ab-what { margin: 0; }
.ab-kinds { display: flex; flex-direction: column; gap: var(--space-2); }
.ab-kind { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.ab-kind input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent-deep); }
.ab-kind .field-help { display: block; }
.ab-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; }
.ab-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: var(--border-width) solid var(--accent-line); border-radius: 999px;
  background: var(--accent-surface); color: var(--accent-deep); font-size: var(--helper-size); font-weight: 700; line-height: var(--helper-lh); white-space: nowrap; }
.ab-tree { padding: var(--space-2); border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-input); background: var(--surface);
  font-size: var(--label-size); line-height: var(--label-lh); }
.ab-tree .ab-list { position: relative; max-height: 360px; overflow: auto; }
.ab-dlg--sheet .ab-tree .ab-list { max-height: none; }
.ab-find { width: 100%; margin-bottom: var(--space-2); }
.ab-list, .ab-lines { list-style: none; margin: 0; padding: 0; }
.ab-lot-row { display: flex; align-items: center; gap: var(--space-1); padding: 4px 0; }
.ab-caret { flex: none; width: 24px; min-height: 24px; padding: 0; border: 0; background: none; color: var(--text-secondary); font: inherit; cursor: pointer; }
.ab-check { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.ab-check input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--accent-deep); }
.ab-lines { padding-left: 28px; }
.ab-line { padding: 4px 0; }
.ab-n { color: var(--text-secondary); }
.ab-none-h { margin: var(--space-2) 0 var(--space-1); }
@media (max-width: 640px) {
  .ab-dlg { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: auto; max-width: none; max-height: 82vh; padding: var(--space-4);
    border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .ab-dlg::before { content: ""; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); }
  .ab-tree { border: 0; padding: 0; }
}

/* m349p (board QuestionnaireFromDocument): a questionnaire from a document — the file, what AI found, how AI reads it; a member's own
   (Waiting for approval, sent back with why) and an administrator's To approve. */
.qfd-split { align-items: flex-start; }
.qfd-main { min-width: 0; }
.qfd-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); width: 100%; min-height: 112px; padding: var(--space-5);
  border: 2px dashed var(--accent-line); border-radius: var(--radius-card); background: var(--accent-wash); color: var(--accent-deep); font: inherit; text-align: center; cursor: pointer; }
.qfd-drop:hover { border-color: var(--accent); }
.qfd-drop .field-help { color: var(--text-secondary); }
.qfd-drop--busy { flex-direction: row; justify-content: flex-start; gap: var(--space-3); cursor: default; }
.qfd-drop-text { display: flex; flex-direction: column; gap: 2px; text-align: left; overflow-wrap: anywhere; }
.qfd-err { margin: 0 0 var(--space-3); }
.qfd-acts { margin-top: var(--space-3); }
.qfd-left strong { color: var(--text-secondary); }
.qfd-note { margin: var(--space-2) 0 0; }
.qfd-how .panel-point strong { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.qn-new-pill { margin-left: var(--space-2); align-self: center; }
.qn-new-menu .mr-pill { margin-left: var(--space-1); }
.qn-sent-note, .qn-back-note, .qn-ver-note { margin: 0 0 var(--space-3); }
.qn-list > .qn-sent-note, .qn-list > .qn-back-note { margin: var(--space-3) var(--space-4) 0; }
.qn-sent-note { border-color: var(--accent-line); background: var(--accent-surface); }
.qn-sent-note strong { color: var(--accent-deep); }
.qn-list .qn-ver-note { margin: var(--space-3) var(--space-4) var(--space-4); border-color: var(--accent-line); background: var(--accent-surface); color: var(--accent-deep); }
/* the board: New questionnaire ▾ beside the title, its menu under it to the left */
.mr-head:has(> .mr-tools > .qn-new-wrap) { flex-wrap: nowrap; align-items: flex-start; }
.mr-head:has(> .mr-tools > .qn-new-wrap) > div:first-child { flex: 1 1 auto; min-width: 0; }
.mr-head:has(> .mr-tools > .qn-new-wrap) .mr-tools { flex: none; flex-wrap: nowrap; align-items: center; }
.mr-tools .qn-new-menu { left: auto; right: 0; min-width: 380px; max-width: calc(100vw - 32px); }
.qn-con-head .qn-new-menu { left: auto; right: 0; }
.qn-back-note p { margin: 0; }
.qn-back-note p.qn-back-acts { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.qn-biz-lede, .qn-approve-lede { margin: var(--space-3) var(--space-4) 0; }
.qn-approve-lede { display: flex; align-items: center; gap: var(--space-2); }
.qn-biz-note, .qn-approve-note { margin: var(--space-2) 0 0; }
.qn-tpl-back { margin: var(--space-3) var(--space-4) 0; }
.qn-mine-table td .field-help, .qn-approve-table td .field-help, .qn-biz-table td .field-help { display: block; }
.qn-approve-v { color: var(--text-secondary); font-weight: 400; }
.qn-approve-open { text-align: right; }
.qn-approve-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-4); align-items: start; margin-top: var(--space-4); }
.qn-approve-card .form-title { margin-bottom: var(--space-1); }
.qn-approve-acts { justify-content: flex-start; gap: var(--space-2); margin: var(--space-3) 0; }
.qn-approve-acts .btn-secondary { margin-right: 0; }
.qn-approve-parts strong { font-size: var(--label-size); line-height: var(--label-lh); }
.qn-approve-parts .field-help, .qn-approve-parts .qq-w { font-size: var(--micro-size); line-height: var(--micro-lh); }
.qn-back-card { display: flex; flex-direction: column; gap: var(--space-2); }
.qn-back-card .form-actions { justify-content: flex-start; margin: 0; }
.qn-back-card .field-help { margin: 0; }
.qn-mine-note { margin: 0 0 var(--space-3); }
.qn-theirs { margin: 0 0 var(--space-3); }
@media (max-width: 900px) {
  .qn-approve-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mr-head:has(> .mr-tools > .qn-new-wrap) { flex-wrap: wrap; }
  .mr-tools .qn-new-menu { left: 0; right: auto; }
}
/* on a phone (the board): what AI found, its sections folded — each opens in place, not as a screen of its own as a request's file does */
@media (max-width: 640px) {
  .qfd-row.ff-row--grps > strong { display: block; }
  .qfd-row.ff-row--grps .ff-grp-all { display: flex; }
  .qfd-row .ff-grp--open .ff-grp-body { display: block; }
  .qfd-row .ff-grp .ff-grp-caret { display: inline; visibility: visible; }
  .qfd-row .ff-grp-head { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: var(--space-2); align-items: start; }
  .qfd-row .ff-grp-head .ff-grp-meta { grid-column: 2; }
}

/* m349p (board QuestionsAboutLots): the editor of one written for a request — a section's About ▾, the questions' About column, a
   question's own About in its dialog (at 390 px a sheet from below); "From the file" beside a part still as the file wrote it. */
.qn-sec-about { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 200px; }
.qn-sec-about .field-label { display: flex; align-items: center; gap: var(--space-1); font-size: var(--helper-size); }
.qn-qabout { min-width: 140px; }
.qn-qabout .ab-chip { white-space: normal; }
.ab-cell-lot { display: block; margin-top: 2px; }
.qn-ff-chip { margin-left: var(--space-1); }
.qn-qtable .ff-code { margin-right: 2px; }
.qnd-about { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-4); padding: var(--space-3); border: var(--border-width) solid var(--accent-line);
  border-radius: var(--radius-input); background: var(--accent-wash); }
.qnd-about-h { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.qnd-about-full { display: flex; flex-direction: column; gap: var(--space-2); }
.qnd-about-short { display: none; align-items: center; justify-content: space-between; gap: var(--space-2); }
.qnd-about .field-help { margin: 0; }
@media (max-width: 640px) {
  .qnd-about-full .ab-chips, .qnd-about-full .ab-tree { display: none; }
  .qnd-about--some .qnd-about-short { display: flex; }
  .ab-scrim--sheet { z-index: 70; }
  .ab-dlg--sheet { z-index: 71; }
}
@media (min-width: 641px) {
  .ab-scrim--sheet, .ab-dlg--sheet { display: none; }
}

/* m349p (boards LineItemsLots, QuestionsAboutLots): Line items — the questions about a lot or a line; + Ask about ▾ and its menu. */
.rlq-sec { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border-width) solid var(--border-soft); }
.rlq-h { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.rlq-sum, .rlq-see { margin: 0; }
.rlq-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rlq-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 28px; gap: var(--space-2); align-items: start; padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-input); background: var(--surface); font-size: var(--label-size); line-height: var(--label-lh); }
.rlq-n { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.rlq-text { min-width: 0; overflow-wrap: anywhere; }
.rlq-text .ab-chip { margin-top: 2px; }
.rlq-ans { color: var(--text-secondary); }
.rlq-x { width: 28px; height: 28px; min-height: 28px; padding: 0; color: var(--text-secondary); }
.rlq-qn { margin: var(--space-2) 0 0; font-weight: 700; }
.rlq-more { padding: 0 var(--space-3); }
.rlq-ask { position: relative; align-self: flex-start; }
.rlq-ask-btn { display: inline-flex; align-items: center; gap: 6px; border-color: var(--accent); color: var(--accent-deep); }
.rlq-menu { left: 0; right: auto; width: 360px; max-width: calc(100vw - 32px); max-height: 420px; overflow: auto; }
.rlq-menu > * { flex-shrink: 0; }
.rlq-mi { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); text-align: left; }
.rlq-mi--on { color: var(--text-secondary); }
.rlq-mi-go { flex: none; color: var(--text-secondary); }
.rlq-mi-group { margin: 0; padding: 8px 12px 2px; font-size: var(--micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.rlq-tab { display: flex; flex-direction: column; gap: var(--space-3); }
.rlq-tab-h { margin: 0; font-size: 20px; line-height: 26px; overflow-wrap: anywhere; }
.rlq-tab .lc-of { margin: 0; color: var(--text-secondary); font-size: var(--micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* m349p (board QuestionsAboutLots, 281 and 290 a): the questions under a line of a supplier's offer; over those about lots or lines on the
   questionnaire's page. */
.olb { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--accent-line); border-radius: var(--radius-input); background: var(--accent-surface); }
.olb-h { margin: 0; font-size: var(--helper-size); font-weight: 700; color: var(--accent-deep); }
.olb-q { display: flex; flex-direction: column; gap: 6px; }
.olb-text { margin: 0; overflow-wrap: anywhere; }
.olb-n { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.olb-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.olb-opt { min-height: 32px; padding: 4px 12px; border: var(--border-width) solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--helper-size); font-weight: 700; cursor: pointer; }
.olb-opt--on { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-deep); }
.olb-opts[aria-busy="true"] .olb-opt { cursor: progress; }
.olb-in, .olb-named { width: 100%; }
.olb-note { margin: 0; }
.qna-about { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 var(--space-1); padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border-soft); }
.qna-about-box { margin: var(--space-4) 0 var(--space-2); padding: 0 var(--space-4) var(--space-2); border: var(--border-width) solid var(--accent-line);
  border-radius: var(--radius-card); background: var(--accent-surface); }
.qna-about-box > .qna-about { margin-top: 0; border-top: 0; }
.qna-about-box .rq-choice:not(.rq-choice--on) { background: var(--surface); }

/* m349p: Compare — a lot set aside for one offer (284), the offer's score by the weights. */
.cmp-lot-aside { color: var(--warning-text); }
.qn-offer-total strong { font-variant-numeric: tabular-nums; }

/* ===================== m349r (board QuestionnairesInvite, approved 22 Oct 11:29 — 493–500): several questionnaires in a targeted offer and
   in an invitation; the customer's several before it accepts; Join SELYVO's step after the Qualification; Business settings ›
   Questionnaires. Tokens only. ===================== */
/* the offer's and an invitation's rows: the number, the questionnaire, ⋯ — a request's columns without its About and weight */
.oqq-row { grid-template-columns: 20px minmax(0, 1fr) 32px; align-items: center; }
.rqq-kind.qq-core { background: var(--violet-surface); color: var(--violet); }
.to-held { color: var(--warning-text); }
/* the customer's offer: how many, each with its state and its way in; Accept opens once all are answered */
.rcv-qns-head { justify-content: flex-start; flex-wrap: nowrap; background: var(--accent-surface); border-color: var(--accent-line); }
.rcv-qns-head > svg { flex: none; color: var(--accent-deep); }
.rcv-qns { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.rcv-qn-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) 0;
  border-top: var(--border-width) solid var(--border); }
.rcv-qn-name { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
.rcv-qn-row > .btn, .rcv-qn-row > .linkbtn { flex: none; }
.rcv-accept-why { align-self: center; margin: 0; }
/* Questionnaires to answer: SELYVO's joining one locked and first, then those chosen; + Add a questionnaire ▾ in groups */
.piq-qns { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0 var(--space-4); padding: var(--space-4);
  border: 2px solid var(--accent); border-radius: var(--radius-card); background: var(--accent-wash); }
.piq-qns-h { margin: 0; }
.piq-qns .rqq-row { background: var(--surface); }
.piq-lock { grid-template-columns: 20px minmax(0, 1fr) auto; }
.piq-lock-ico { display: inline-flex; color: var(--text-secondary); }
.piq-name { overflow-wrap: anywhere; }
.piq-first { align-self: center; white-space: nowrap; }
.piq-add { margin-bottom: 0; }
.piq-menu-h { margin: 0; padding: 10px 16px 4px; font-size: var(--micro-size); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.piq-help { margin: 0; }
/* Join SELYVO: "Acme s.r.o. asks you to answer" — each questionnaire, its way in; Your registration beside it, where this is */
.join-inv-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.join-inv-lede { margin: 0; }
.join-inv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.join-inv-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-card); }
.join-inv-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.join-inv-name .field-help { margin: 0; }
.join-inv-done { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.join-inv-row > .btn { flex: none; }
.join-inv-foot { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.join-inv-foot .field-help { flex: 1 1 260px; margin: 0; }
.join-plan--now .join-plan-steps { gap: 0; }
.join-plan--now .join-plan-steps li { padding: var(--space-3) 0; border: 0; border-top: var(--border-width) solid var(--border-soft); border-radius: 0; }
.join-plan--now .join-plan-n { background: var(--surface); color: var(--text-secondary); box-shadow: inset 0 0 0 var(--border-width) var(--border-strong); }
.join-plan--now .join-plan-done .join-plan-n, .join-plan--now .join-plan-now .join-plan-n { background: var(--accent); color: var(--text-on-accent); box-shadow: none; }
/* Business settings › Questionnaires: what a business invited is until it has answered — an administrator's choice */
.qn-gate { margin-top: var(--space-4); }
.qn-gate-opts { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; border: 0; }
.qn-gate-opt { padding: var(--space-3) var(--space-4); }
.qn-gate-acts { align-items: center; }
.qn-gate-acts .field-help { margin: 0; }
/* the photographs beside the board: the offer's list as tight as drawn — under the lede, the head, the rows, what they are and + Add */
.to-wiz-main .qq-lede { margin-bottom: 0; }
.oqq-block { display: flex; flex-direction: column; align-items: flex-start; margin-top: calc(var(--space-1) * -1); }
.oqq-block > .rqq-list, .oqq-block > .field-error { align-self: stretch; }
.oqq-block .rqq-list-h { margin: 0 0 10px; }
.oqq-block .rqq-none, .oqq-block .rqq-help { margin: 11px 0 9px; }
.oqq-block .rqq-add { margin-bottom: 0; }
.oqq-row .rqq-acts .linkbtn { font-size: var(--label-size); line-height: var(--label-lh); }
/* … and beside it, what customers answer */
.to-wiz-panel.rqq-side { gap: 0; }
.to-wiz-panel.rqq-side .rqq-eyebrow { margin-bottom: 6px; }
.to-wiz-panel.rqq-side .panel-title { margin-bottom: 6px; }
.to-wiz-panel.rqq-side > .field-help { margin-bottom: 10px; }
.to-wiz-panel.rqq-side .qq-parts { gap: var(--space-1); margin-bottom: var(--space-2); }
.to-wiz-panel.rqq-side .qq-parts li { padding: 10px 0 9px; }
/* the customer's several: the notice's words in the accent, compact; each way in small */
.rcv-qns-head { color: var(--accent-deep); padding: var(--space-3) var(--space-4); margin-bottom: calc(var(--space-1) * -1); }
.rcv-qns { margin-bottom: 0; }
.rcv-qn-row .btn-sm { height: 36px; min-height: 36px; }
.rcv-acts { flex-wrap: wrap; }
/* joining: the title and the lede at the board's sizes; the buttons small */
.join-inv .join-inv-title { font-size: 28px; line-height: 34px; }
.join-inv .join-inv-lede { font-size: var(--label-size); line-height: 21px; }
.join-inv-row > .btn { height: 36px; min-height: 36px; }
/* Business settings › Questionnaires: its eyebrow, its title a section's, Save at the left */
.qn-gate-eyebrow { display: flex; align-items: center; gap: var(--space-2); margin-bottom: calc(var(--space-2) * -1); }
.qn-gate .form-title { font-size: var(--section-size); line-height: var(--section-lh); }
.qn-gate-acts { justify-content: flex-start; }
@media (max-width: 640px) {
  .rcv-acts .rcv-accept-why { order: 3; flex-basis: 100%; }
}
/* (499 a) its answers shown as missing: on its profile, beside its offer */
.qnp-missing { margin-top: var(--space-2); }
.qn-invited .mr-pill { margin-left: var(--space-1); }
/* + Add a questionnaire ▾ on a phone: its menu as wide as its card (a request's too) */
@media (max-width: 520px) {
  .rqq-add, .oqq-block > .rqq-add { display: block; align-self: stretch; }
  .rqq-menu { right: 0; width: auto; }
}
@media (max-width: 640px) {
  .rcv-qn-row, .join-inv-row { flex-direction: column; align-items: stretch; }
  .piq-lock { grid-template-columns: 20px minmax(0, 1fr); }
  .piq-first { grid-column: 2; }
}

/* m349s (board ListingHowItDoes, 299, 304 a): How it does — four cards a row, every number and the line under it to the right; on a
   phone two a row. The eighth card, Promote the product, the same size (300–302). */
.fig-tiles .ptiles, .ptiles.fig-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fig-tiles .ptile-value, .fig-tiles .ptile-sub, .fig-tiles .ptile .linkbtn { text-align: right; }
.fig-tiles .ptile .linkbtn { display: block; margin-left: auto; }
@media (max-width: 760px) { .fig-tiles .ptiles, .ptiles.fig-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fig-promote { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; border-color: var(--accent); }
.fig-tiles .fig-promote .fig-promote-sub { text-align: left; }
.fig-promote-btn { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 0; border: 0;
  background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.fig-promote-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 6px; border-radius: var(--radius-button); }
.fig-promote-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fig-promote-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-button);
  background: var(--accent); color: var(--text-on-accent); }
.fig-promote-title { font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--accent-deep); }
.fig-promote--setting { background: var(--accent-surface); border-width: 2px; padding: 13px 15px; }
.fig-promote--on { background: var(--accent-wash); border-color: var(--accent-line); }
.fig-promote--on .fig-promote-head, .fig-promote--off .fig-promote-head { flex-direction: row; align-items: center; gap: var(--space-2); }
.fig-promote--on .fig-promote-icon, .fig-promote--off .fig-promote-icon { width: auto; height: auto; background: none; color: var(--accent-deep); }
.fig-promote--on .fig-promote-title, .fig-promote--off .fig-promote-title { font-size: 15px; font-weight: 800; }
.fig-tiles .fig-promote .mr-pill { font-size: var(--helper-size); }
.fig-promote-acts { display: flex; flex-wrap: wrap; gap: 6px var(--space-3); }
.fig-tiles .fig-promote .fig-promote-acts .linkbtn { display: inline; margin: 0; text-align: left; font-weight: 700; }
.fig-tiles .fig-promote .fig-promote-open { font-size: var(--label-size); }
.fig-promote--off { border-style: dashed; border-color: var(--border-strong); background: var(--table-head); }
.fig-promote--off .fig-promote-head { opacity: .72; }
.fig-promote--off .fig-promote-icon, .fig-promote--off .fig-promote-title { color: var(--text-secondary); }

/* The placement set up in the right section, as a record's detail (300, 305 a) */
.fig-pl { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.fig-pl .pl-card { padding: 22px; box-shadow: 0 0 0 2px var(--accent-line); }
.fig-pl .pl-rec-title { margin: 4px 0 6px; font-size: 21px; }
.fig-pl-kicker { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--micro-size); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.fig-pl-acts { display: flex; align-items: flex-start; gap: var(--space-2); flex: none; }
.fig-pl-x { color: var(--text-secondary); }
.fig-pl-days { display: block; margin-bottom: -6px; }
.fig-pl .fig-pl-fee { display: flex; align-items: flex-start; gap: var(--space-2); padding: 8px 10px; border: var(--border-width) solid var(--accent-line);
  background: var(--accent-surface); color: var(--accent-deep); font-size: var(--helper-size); line-height: 1.45; }
.fig-pl .fig-pl-fee svg { flex: none; margin-top: 2px; }
.fig-pl .pl-actions { padding-top: var(--space-3); border-top: var(--border-width) solid var(--border); }
.fig-pl-kept { margin: 0; }
.fig-pl--done { display: flex; flex-direction: column; gap: 10px; }
.fig-pl--done .notice { margin: 0; }
.fig-pl-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.fig-pl-links .linkbtn { font-size: var(--label-size); font-weight: 700; }   /* side by side, as drawn */
.fig-pl-back { margin-bottom: var(--space-3); }
/* As the board draws it there: From and To side by side, the days as two-letter boxes in one row */
.fig-pl-when { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fig-pl-when .pl-when { grid-template-columns: minmax(0, 1fr); }
.fig-pl .pl-days { flex-wrap: nowrap; }
.fig-pl .pl-day { display: inline-flex; align-items: center; justify-content: center; min-width: 0; width: 36px; height: 36px; padding: 0; border-radius: 6px; }
@media (max-width: 760px) {
  /* On a phone, as drawn: each card its name and its number; Promote its mark and its name */
  .fig-tiles .ptile-sub { display: none; }
  .fig-tiles .fig-promote--on .fig-promote-sub { display: block; }
}
@media (max-width: 760px) {
  /* The placement's own screen on a phone, as drawn: its fields one under another, Publish and Save draft the width of the screen */
  .fig-pl-kicker .mr-pill { display: none; }
  .fig-pl .pl-card .grid-2, .fig-pl .pl-often, .fig-pl .fig-pl-when { grid-template-columns: minmax(0, 1fr); }
  .fig-pl .pl-actions { flex-direction: column; align-items: stretch; }
  .fig-pl .pl-actions .btn { width: 100%; }
}

/* m349s (board EntityLogoBackground, 306–312): the Entity profile's Logo and background, the picture's part chosen, the logo beside names */
.ep-card { display: flex; flex-direction: column; gap: 14px; margin-bottom: var(--space-4); }
.ep-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.ep-head .form-title { margin: 0; font-size: 20px; }
.ep-head .field-help { margin: var(--space-1) 0 0; font-size: var(--label-size); }
.ep-see { flex: none; font-size: var(--label-size); font-weight: 700; color: var(--accent-deep); }
.ep-prof { border: var(--border-width) solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.ep-id { display: flex; gap: 18px; align-items: flex-start; padding: 0 22px 18px; }
.ep-logo { position: relative; z-index: 1; }
.ep-who { display: flex; flex-direction: column; min-width: 0; padding-top: 10px; }
.ep-name { font-size: 26px; line-height: 1.25; font-weight: 800; overflow-wrap: anywhere; }
.ep-sum { font-size: var(--label-size); color: var(--text-secondary); }
.ep-meta { font-size: var(--helper-size); color: var(--text-secondary); }
.ep-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: 14px 0;
  border-top: var(--border-width) solid var(--border); }
.ep-row-name { font-size: 15px; }
.ep-spec { font-size: var(--helper-size); line-height: 1.5; color: var(--text-secondary); }
.ep-spec strong { color: var(--text); }
.ep-acts { display: inline-flex; align-items: center; gap: 10px; }
.btn.ep-change { height: 40px; border-color: var(--accent-deep); color: var(--accent-deep); }
.ep-remove { font-size: var(--label-size); font-weight: 700; }
.ep-limits, .ep-refused-help { margin: 0; }
.ep-phone-spec { display: none; margin: 0; }
.ep-refused, .ep-member { margin: 0; align-items: flex-start; }
.ep-refused svg, .ep-member svg { flex: none; margin-top: 2px; }
.ep-member { background: var(--accent-surface); border: var(--border-width) solid var(--accent-line); color: var(--accent-deep); }
@media (max-width: 760px) {
  /* 312, as drawn at 390 px: the card in one column — its name, the business as others see it, the two Change buttons, the sizes */
  .ep-card { padding: 12px; gap: 10px; }
  .ep-head .form-title { font-size: 16px; }
  .ep-head .field-help, .ep-head .mr-pill, .ep-see, .ep-sum, .ep-row-name, .ep-spec, .ep-limits, .ep-remove { display: none; }
  .ep-phone-spec { display: block; }
  .ep-banner { height: 64px; }
  .ep-logo { width: 56px; height: 56px; margin-top: -25px; font-size: 18px; }
  .ep-name { font-size: 20px; }
  .ep-row { grid-template-columns: minmax(0, 1fr); padding: 0; border-top: 0; }
  .ep-rows { display: flex; flex-direction: column; gap: 10px; }
  .ep-acts { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .btn.ep-change { width: 100%; }
}

/* Choose its part: the picture under a frame of the kind's ratio; outside the frame dimmed */
.modal.ep-dlg { width: min(916px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.modal.ep-dlg--logo { width: min(560px, calc(100vw - 2rem)); }
.ep-dlg-h { margin: 0; padding-right: var(--space-8); font-size: 28px; }
.ep-dlg-sub { margin: 0; }
.ep-dlg-bar, .ep-touch-hint { display: none; }
.ep-stage { position: relative; overflow: hidden; width: min(100%, 820px); aspect-ratio: 820 / 560; max-height: 56vh; border-radius: var(--radius-button);
  background: var(--text); touch-action: none; cursor: grab; user-select: none; }
.ep-stage:active { cursor: grabbing; }
.ep-stage:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.ep-pic { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.ep-frame { position: absolute; border: 2px solid var(--surface); box-shadow: 0 0 0 100vmax rgba(7, 28, 60, .45); pointer-events: none; }
.ep-phone-l, .ep-phone-r { position: absolute; top: 0; bottom: 0; border-left: 1.5px dashed var(--surface); }
.ep-phone-cap { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: var(--micro-size);
  font-weight: 700; color: var(--surface); }
.ep-move { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--surface); color: var(--text); }
.ep-hd { position: absolute; width: 12px; height: 12px; background: var(--surface); border: 2px solid var(--accent); }
.ep-hd--tl { left: -7px; top: -7px; } .ep-hd--tr { right: -7px; top: -7px; } .ep-hd--bl { left: -7px; bottom: -7px; } .ep-hd--br { right: -7px; bottom: -7px; }
.ep-stage-name { position: absolute; left: 10px; bottom: 8px; font-size: var(--micro-size); font-weight: 600; color: var(--surface); opacity: .55; }
.ep-zoom { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); }
/* the slider as drawn: teal up to its knob, the rest light; a white knob ringed in teal */
.ep-zoom input[type="range"] { flex: 1; height: 24px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.ep-zoom input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent) var(--ep-fill, 0%), var(--border) var(--ep-fill, 0%)); }
.ep-zoom input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--border); }
.ep-zoom input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
.ep-zoom input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(7, 28, 60, .18); }
.ep-zoom input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
.ep-zoom input[type="range"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: 12px; }
.ep-zoom input[type="range"]:disabled { cursor: default; opacity: .5; }
.ep-zoom-v { min-width: 52px; text-align: right; font-size: var(--label-size); font-variant-numeric: tabular-nums; }
.ep-show { display: flex; flex-direction: column; gap: var(--space-1); }
.ep-show-h { font-size: var(--label-size); }
.ep-show-row { display: flex; gap: var(--space-3); align-items: flex-end; }
.ep-show-row .field-help { display: block; margin: 0 0 var(--space-1); font-size: var(--micro-size); }
.ep-show-wide { flex: 1 1 0; min-width: 0; }
.ep-show-phone { flex: 0 0 190px; }
.ep-pv-card { border: var(--border-width) solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.ep-pv { position: relative; display: block; overflow: hidden; background: var(--accent-surface); }
.ep-pv img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }
.ep-pv-banner { height: 56px; background: linear-gradient(120deg, var(--navy) 0%, var(--accent-deep) 45%, var(--accent) 100%); }
.ep-pv-id { display: flex; gap: var(--space-4); align-items: flex-start; padding: 0 22px var(--space-3); min-height: 48px; }
.ep-pv-id > div { display: flex; flex-direction: column; padding-top: 6px; min-width: 0; }
.ep-pv-id strong { font-size: 20px; line-height: 1.3; font-weight: 800; }
.prof-logo.ep-pv-logo { position: relative; z-index: 1; width: 48px; height: 48px; margin-top: -22px; font-size: 16px; border-radius: 9px; }   /* over the banner */
.ep-pv-card--phone .ep-pv-id { padding: 0 10px 10px; }
.ep-pv-card--phone .prof-logo.ep-pv-logo { width: 44px; height: 44px; }
.ep-show-row--logo { align-items: flex-end; gap: var(--space-4); }
.ep-pv-96, .ep-pv-40 { flex: none; border: var(--border-width) solid var(--border); background: var(--surface); box-shadow: 0 6px 18px rgba(7, 28, 60, .10); }
.ep-pv-96 { width: 96px; height: 96px; border-radius: 12px; }
.ep-pv-40 { width: 40px; height: 40px; border-radius: 8px; box-shadow: none; }
.ep-show-row--logo .field-help { margin: 0; }
.ep-dlg-acts { justify-content: flex-start; gap: var(--space-2); margin: 0; padding-top: 14px; border-top: var(--border-width) solid var(--border); }
.ep-dlg-acts .btn-secondary { margin-right: 0; }                 /* side by side, as drawn */
.ep-kept { margin: 0; }
@media (max-width: 760px) {
  .modal.ep-dlg, .modal.ep-dlg--logo { inset: 0; top: 0; left: 0; transform: none; width: 100vw; max-width: none; height: 100%; max-height: none; border-radius: 0;
    padding: var(--space-4); background: var(--text); color: var(--surface); }
  .ep-dlg-x, .ep-dlg-h, .ep-dlg-sub, .ep-zoom, .ep-show, .ep-dlg-acts, .ep-kept { display: none; }
  .ep-dlg-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; }
  .ep-dlg-bar .linkbtn { color: var(--surface); font-weight: 700; text-decoration: none; }
  .ep-dlg-bar .ep-dlg-use { color: var(--accent-line); }
  .ep-dlg-bar-h { font-weight: 800; }
  .ep-stage { aspect-ratio: auto; height: 360px; max-height: 60vh; }
  .ep-touch-hint { display: block; margin: var(--space-2) 0 0; text-align: center; font-size: var(--helper-size); }
}

/* 311: a business's logo where its initials are, and beside a name that had none */
.org-mark--logo { overflow: hidden; padding: 0; background: var(--surface); border: var(--border-width) solid var(--border); }
.org-mark--logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar.org-mark--logo, .fd-avatar.org-mark--logo, .np-avatar.org-mark--logo { border-radius: 8px; }
.org-slot { display: inline-block; flex: none; vertical-align: middle; border-radius: 6px; }
.org-slot[hidden] { display: none; }
.org-slot--row { width: 28px; height: 28px; margin-right: var(--space-2); }
.org-slot--inline { width: 22px; height: 22px; margin-right: 6px; border-radius: 5px; }

/* m349s (board DocumentsLogo, 530–535 b): the issuer's logo at the head of a printed sheet, beside its name; "Made on SELYVO" at its foot */
.pr-head { display: flex; align-items: center; gap: 12pt; margin: 0 0 14pt; }
.pr-logo { flex: none; width: 48px; height: 48px; border: var(--border-width) solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface); }
.pr-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pr-name { font-size: 15pt; font-weight: 800; }
.pr-addr { display: block; font-size: 9pt; line-height: 1.45; color: var(--text-secondary); }
.pr-foot { margin: 24pt 0 0; text-align: center; font-size: 8pt; color: var(--text-secondary); }
.iv-print .od-ptable tfoot td { border-bottom: 0; }

/* 349s2 — invoices received to review (board InvoiceMailbox): Add an invoice ▾, To review, the match, Your action, the e-mail, what it lacks;
   an invoice from a file (InvoiceFromFile); a supplier's own from a file (InvoiceOwnFromFile); Console › Finance › Invoice mailbox. */
.inv-add-wrap { position: relative; }
.inv-addbtn { display: inline-flex; align-items: center; gap: 6px; }
.mr-tools .inv-add-menu { left: auto; right: 0; min-width: 340px; max-width: calc(100vw - 32px); }
.inv-add-menu .mr-pill { margin-left: var(--space-1); }
.mr-head:has(> .mr-tools > .inv-add-wrap) .mr-tools { align-items: flex-end; }
.mr-tile--violet { background: var(--violet-surface); color: var(--violet); }                       /* what AI read — invoices to review */
.mr-pill--review { display: inline-flex; align-items: center; gap: 4px; background: var(--violet-surface); color: var(--violet); }   /* AI's own, as the board */
.inv-ownpdf { margin-left: var(--space-1); font-weight: 600; background: var(--accent-surface); color: var(--navy); font-size: var(--micro-size); vertical-align: middle; }
.inv-invite-pill { margin-top: 4px; }                                                                /* 540 b's state, under the invoice's own */
.inv-matchcard .grid-wrap { margin-top: var(--space-1); }
.inv-match td { vertical-align: top; }
.inv-match .inv-match-st { text-align: right; white-space: nowrap; }
.inv-match-row--not_in_order td:first-child { font-weight: 600; }
.inv-match-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }   /* the title, and AI's chip at its right */
.inv-match-head .form-title { margin: 0; }
.inv-match-sum { margin: var(--space-2) 0 0; }
.inv-match-tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--micro-size); font-weight: 700; }
.inv-match-tag--ok { color: var(--success-text); }
.inv-match-tag--warn { color: var(--warning-text); }
.rq-side .inv-act-btns { flex-direction: column; align-items: stretch; }                 /* Your action beside the invoice: one under another */
.rq-side .inv-act-btns .btn { width: 100%; justify-content: center; }
.inv-rv-read { display: flex; align-items: flex-start; gap: 6px; }
.inv-rv-read > svg { flex: none; margin-top: 3px; }
.inv-rv-file { font-weight: 700; color: var(--accent-deep); overflow-wrap: anywhere; }
.inv-act .form-actions { flex-wrap: wrap; gap: var(--space-2); }
.inv-act p { margin: 0; }
.inv-act-asks { font-weight: 600; }
.inv-act-text { margin: 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--warning-text); background: var(--warning-surface); border-radius: var(--radius-input);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.inv-act-form { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-2); border-top: var(--border-width) solid var(--border); }
.inv-act-form .form-actions { margin: 0; justify-content: flex-start; }
.inv-mail .form-title, .inv-lacks .form-title { display: flex; align-items: center; gap: var(--space-2); }
.inv-mail p, .inv-lacks p { margin: 0; overflow-wrap: anywhere; }
.inv-mail-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.inv-mail-files a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent-deep); overflow-wrap: anywhere; }
.inv-mail-words summary { cursor: pointer; font-weight: 700; color: var(--accent-deep); }
.inv-mail-text { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font: inherit; font-size: var(--label-size); background: var(--surface-subtle); border-radius: var(--radius-input); }
.inv-lacks-list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 2px; }
.inv-own p { margin: 0; }
.inv-own .btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.inv-own-st { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }

/* From a file: the drop zone (the phone's camera too), the files and their states, what was read (each section From the file), the match. */
.iff-pickbtns { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.iff-pick .iff-camera, .iff-camhelp { display: none; }                                            /* the camera on a phone only */
.iff-pick .pi-choose { display: inline-flex; align-items: center; gap: 6px; }
.iff-list { list-style: none; margin: 0; padding: 0 var(--space-4) var(--space-2); display: flex; flex-direction: column; }
.iff-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: 10px 0; border-top: var(--border-width) solid var(--border); }
.iff-row:first-child { border-top: 0; }
.iff-row-name { flex: 1 1 220px; min-width: 0; display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.iff-row-name > svg { flex: none; }
.iff-why { flex-basis: 100%; }
.iff-rows .inv-pad { margin: 0; }
.iff-found { gap: var(--space-4); }
.iff-strip { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: var(--radius-input); background: var(--accent-surface); color: var(--accent-deep);
  font-weight: 600; overflow-wrap: anywhere; }
.iff-strip > svg { flex: none; }
.iff-sec { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--border-width) solid var(--border); }
.iff-sec p { margin: 0; }
.iff-sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.iff-sec-head .field-label { margin: 0; }
.iff-from { background: var(--surface-subtle); color: var(--text-secondary); font-size: var(--micro-size); }
.iff-sec-head .chip-warn { font-size: var(--micro-size); }
.iff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-3); }
.iff-grid .field, .iff-sec > .field { margin: 0; }
.iff-grid .iff-wide { grid-column: span 2; }
.iff-acts { flex-wrap: wrap; gap: var(--space-2); }
.iff-dup { margin: 0; }
.iff-how-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.iff-how-list li { display: flex; flex-direction: column; gap: 2px; }
.iof-number { margin: var(--space-2) 0 0; }
.mai-box { border: var(--border-width) solid var(--accent-line); }
.ost-rauto .rq-who { margin: 0; }

/* Console › Finance › Invoice mailbox */
.cim-found strong, .cim-found .field-help, .cim-cust .field-help { display: block; }
.cim-rec p, .cim-says, .cim-invs { margin: 0; }
.cim-says, .cim-invs { padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.cim-says { list-style: none; padding: var(--space-2) var(--space-3); background: var(--surface-subtle); border-radius: var(--radius-input); }   /* what was read, in a box (the board) */
.cim-table td:first-child { white-space: nowrap; }
.cim-why { padding: var(--space-2) var(--space-3); background: var(--warning-surface); border-radius: var(--radius-input); }
.cim-assign { margin: 0; }
.cim-hits { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }

/* 540 b: the invitation's page — Send me the invoice by e-mail */
.ibe-page { max-width: 640px; width: 100%; margin: 0 auto; }                                       /* one invoice, read at a glance */
.ibe-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--space-4); margin: 0; }
.ibe-facts dt { color: var(--text-secondary); }
.ibe-facts dd { margin: 0; font-weight: 700; }

@media (max-width: 767px) {
  /* 349s2 (InvoiceFromFile, at 390): the camera or a file; the match's rows labelled; Your action's buttons one under another. */
  .iff-pick .iff-camera { display: inline-flex; }
  .iff-camhelp { display: block; margin: 0; }
  .iff-pick .pi-drop { flex-direction: column; align-items: stretch; text-align: left; }
  .iff-pickbtns { flex-direction: column; }
  .iff-pickbtns .btn { justify-content: center; }
  .iff-grid .iff-wide { grid-column: auto; }
  .inv-match thead { display: none; }
  .inv-match tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); padding: var(--space-2) 0; border-top: var(--border-width) solid var(--border); }
  .inv-match td { border-top: 0; padding: 2px 0; }
  .inv-match td:first-child { grid-column: 1 / -1; font-weight: 700; }
  .inv-match td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase;
    letter-spacing: .04em; }
  .inv-act-btns .btn, .iff-acts .btn { width: 100%; justify-content: center; }
  .mr-tools .inv-add-menu { left: 0; right: auto; min-width: 0; width: calc(100vw - 32px); }
}
/* 349s2: the console's Invoice mailbox — the e-mails, and the one chosen beside them (as the board) */
.cim-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.cim-split > .card { margin: 0; }
@media (max-width: 1180px) { .cim-split { grid-template-columns: minmax(0, 1fr); } }
.console-rail-new { margin-left: auto; }                                                               /* the rail's NEW at its right, as the board */


/* =============================================================================
   m349t — the tabs together (boards TopTabs, SalesTab, Workspaces, FeedNetwork, ProjectsTab; Jiri, 22 Oct 11:29). His mockup's layout —
   the page's head, the pipeline, the measures, the list and the record beside it, the posts and the publisher beside them — in the market's
   design system: its type (12 px the least), its buttons (44 px) and its colours (the tokens above; MK-02). On a phone one column, a record
   its own page (1023 px and below).
   ============================================================================= */

/* --- the create menu: each with the tab it goes to (452 b) --- */
.menu-item.create-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; white-space: normal; }   /* over .create-menu .menu-item's centre */
.create-item-label { font-weight: 700; color: var(--text); }
.create-item-hint { font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); font-weight: 500; }
#create-menu { min-width: 300px; }

/* --- What you do here — four ticks (451 b) --- */
.tick-rows { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.tick-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--border); border-radius: var(--radius-card);
            cursor: pointer; background: var(--surface); }
.tick-row--on { border-color: var(--accent); background: var(--accent-wash); }
.tick-row--locked { cursor: default; }
.tick-row input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--accent-deep); }
.tick-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.tick-text strong { font-size: var(--label-size); }
.tick-help { font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary); }
.tick-tabs { font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--accent-deep); font-weight: 650; }
.tick-lock { color: var(--text-secondary); flex: none; }
.tick-save { display: flex; align-items: center; gap: var(--space-3); }
.tick-mini .frow { align-items: flex-start; }

/* --- the pages' head (SELYVO Market / Sales …) --- */
.wk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.wk-crumbs { display: flex; gap: var(--space-2); font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary); margin-bottom: var(--space-1); }
.wk-title { font-size: 28px; line-height: 34px; font-weight: 750; letter-spacing: -.6px; margin: 0; }
.wk-lede { font-size: 15px; line-height: 22px; color: var(--text-secondary); margin: var(--space-1) 0 0; }
.wk-tools { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.wk-h2 { font-size: 20px; line-height: 26px; font-weight: 750; letter-spacing: -.3px; margin: 0; }
.wk-h3 { font-size: var(--label-size); line-height: var(--label-lh); font-weight: 750; margin: var(--space-5) 0 var(--space-2); }
.wk-eyebrow { font-size: var(--micro-size); line-height: var(--micro-lh); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); }
.wk-count { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--border-soft); color: var(--text-secondary);
            font-size: var(--micro-size); line-height: var(--micro-lh); font-weight: 700; text-align: center; }
.wk-link { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 700; }

/* Show all · My only, For you · Following · Saved */
.wk-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 8px; background: var(--border-soft); }
.wk-seg button { min-height: 38px; padding: 0 var(--space-4); border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: var(--label-size);
                 font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.wk-seg button[aria-pressed="true"] { background: var(--surface); color: var(--accent-deep); font-weight: 750; box-shadow: 0 1px 3px rgba(7, 28, 60, .12); }

/* --- the list and the record beside it --- */
.wk-cols { display: grid; grid-template-columns: minmax(0, 1fr) clamp(330px,27vw,410px); gap: var(--space-5); align-items: start; }
.wk-side { position: sticky; top: var(--space-4); min-width: 0; }
.wk-solo { max-width: 720px; }
.wk-back { margin-bottom: var(--space-3); }
.wk-back .linkbtn { display: inline-flex; align-items: center; gap: var(--space-1); }
.wk-list { padding: 0; overflow: hidden; min-width: 0; }
.wk-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: var(--border-width) solid var(--border); flex-wrap: wrap; }
.wk-search { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 240px; min-width: 0; padding: 0 var(--space-3); border: var(--border-width) solid var(--border);
             border-radius: var(--radius-input); background: var(--canvas); color: var(--text-secondary); }
.wk-search:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.wk-search .input { border: 0; background: transparent; padding-left: 0; min-width: 0; flex: 1 1 auto; }
.wk-search .input:focus { outline: 0; }
.wk-sort { min-width: 180px; }
.wk-new { flex: none; }
.wk-countline { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); font-size: var(--helper-size);
                line-height: var(--helper-lh); color: var(--text-secondary); }
.wk-empty { padding: var(--space-6) var(--space-4); margin: 0; color: var(--text-secondary); }
.wk-list .mr-bar { padding: var(--space-2) var(--space-4) 0; }
.wk-list .mr-foot { padding: var(--space-3) var(--space-4); border-top: var(--border-width) solid var(--border-soft); }

.wk-table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; font-size: var(--label-size); }
.wk-table th { padding: 10px var(--space-3); background: var(--table-head); border-block: var(--border-width) solid var(--border-soft); font-size: var(--micro-size);
               line-height: var(--micro-lh); font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.wk-table th:nth-child(1) { width: 32%; }
.wk-table th:nth-child(2) { width: 19%; }
.wk-table th:nth-child(3) { width: 22%; }
.wk-table th:nth-child(4) { width: 14%; }
.wk-table th:nth-child(5) { width: 13%; }
.wk-table td { padding: var(--space-4) var(--space-3); border-bottom: var(--border-width) solid var(--border-soft); vertical-align: middle; overflow-wrap: anywhere; }
.wk-table tr:last-child td { border-bottom: 0; }
.wk-row { cursor: pointer; }
.wk-row:hover { background: var(--accent-wash); }
.wk-row--on { background: var(--accent-surface); }
.wk-row--on td:first-child { box-shadow: inset 3px 0 var(--accent-deep); }
.wk-num { text-align: right; }
.wk-num strong { white-space: nowrap; }
.wk-num small, .wk-who + small, .wk-table td > small { display: block; margin-top: 4px; font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.wk-rowbtn { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; text-align: left;
             cursor: pointer; min-height: 44px; }
.wk-rec-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wk-rec-name small { font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.wk-rec-name strong { font-size: var(--label-size); line-height: var(--label-lh); }
.wk-who { display: block; font-size: var(--label-size); line-height: var(--label-lh); }
.wk-pill-sub { display: block; margin-top: 6px; font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.wk-due strong { display: block; white-space: nowrap; }
.wk-sub { display: block; margin-top: 4px; font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.wk-sub--late { color: var(--danger-text); font-weight: 700; }

/* a status as a dot and its words */
.wk-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 5px; font-size: var(--micro-size); line-height: var(--micro-lh); font-weight: 750;
           background: var(--accent-surface); color: var(--accent-deep); white-space: nowrap; }
.wk-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.wk-pill--teal { background: var(--accent-surface); color: var(--accent-deep); }
.wk-pill--amber { background: var(--warning-surface); color: var(--text); }
.wk-pill--amber .wk-dot { background: var(--warning); }
.wk-pill--green { background: var(--success-surface); color: var(--text); }
.wk-pill--green .wk-dot { background: var(--success); }
.wk-pill--rose { background: var(--danger-surface); color: var(--danger-button); }
.wk-pill--grey { background: var(--border-soft); color: var(--text-secondary); }
.wk-pill--violet { background: var(--violet-surface); color: var(--violet); }

/* a record's kind as its icon on a tint */
.wk-kind { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; flex: none;
           background: var(--accent-surface); color: var(--accent-deep); }
.wk-kind--teal { background: var(--accent-surface); color: var(--accent-deep); }
.wk-kind--amber { background: var(--warning-surface); color: var(--text); }
.wk-kind--green { background: var(--success-surface); color: var(--text); }
.wk-kind--rose { background: var(--danger-surface); color: var(--danger-button); }
.wk-kind--violet { background: var(--violet-surface); color: var(--violet); }
.wk-kind--blue { background: var(--accent-wash); color: var(--navy); }
.wk-kind--grey { background: var(--border-soft); color: var(--text-secondary); }
.wk-kind--plain { background: var(--surface); color: var(--text-secondary); border: var(--border-width) solid var(--border); }
.wk-pic { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; border: var(--border-width) solid var(--border-soft); }
.wk-pic--big { width: 64px; height: 64px; }

.wk-rec { padding: 0; overflow: hidden; }
.wk-rec-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: var(--border-width) solid var(--border);
               background: var(--table-head); }
.wk-rec-head > div { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; font-size: var(--label-size); }
.wk-rec-head small { font-size: var(--micro-size); color: var(--text-secondary); }
.wk-rec-body { padding: var(--space-5); }
.wk-rec-title { font-size: 22px; line-height: 28px; font-weight: 750; letter-spacing: -.35px; margin: var(--space-3) 0 0; overflow-wrap: anywhere; }
.wk-rec-who { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--label-size); }
.wk-figure { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); padding: var(--space-5) 0 var(--space-4); }
.wk-figure > div { display: flex; flex-direction: column; gap: 4px; }
.wk-figure span { font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.wk-figure strong { font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -.8px; }
.wk-figure small { font-size: var(--micro-size); color: var(--text-secondary); }
.wk-figure-due { text-align: right; }
.wk-figure-due strong { font-size: var(--label-size); line-height: var(--label-lh); letter-spacing: 0; }
.wk-figure--box { margin-top: var(--space-4); padding: var(--space-4); border: var(--border-width) solid var(--accent-line); border-radius: var(--radius-card); background: var(--accent-wash); }
.wk-stage-box { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--border); border-radius: var(--radius-input);
                background: var(--surface-subtle); font-size: var(--helper-size); line-height: var(--helper-lh); }
.wk-about { font-size: var(--label-size); line-height: 22px; color: var(--text-secondary); margin: var(--space-4) 0; }
.wk-facts { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-2) var(--space-3); margin: var(--space-4) 0 0; font-size: var(--helper-size);
            line-height: var(--helper-lh); }
.wk-facts dt { color: var(--text-secondary); }
.wk-facts dd { margin: 0; overflow-wrap: anywhere; }
.wk-next { margin-top: var(--space-5); padding: var(--space-4); border: var(--border-width) solid var(--accent-line); border-radius: var(--radius-card); background: var(--accent-wash); }
.wk-next h3 { font-size: var(--label-size); line-height: var(--label-lh); font-weight: 750; margin: 0; }
.wk-next > p { font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary); margin: var(--space-2) 0 var(--space-3); }
.wk-next-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wk-wide { width: 100%; }
.wk-why, .wk-edit { margin-top: var(--space-4); border: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.wk-why legend { font-weight: 700; font-size: var(--label-size); margin-bottom: var(--space-2); }
.wk-side .grid-2, .wk-solo .wk-rec .grid-2 { grid-template-columns: minmax(0, 1fr); }
.wk-rec-head > .iconbtn { margin-left: auto; }
#invite-panel.wk-rec .wk-rec-body > .field, #invite-panel.wk-rec .wk-rec-body > .grid-2 { margin-bottom: var(--space-4); }   /* New lead's fields apart */
.wk-act { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-width) solid var(--border); }
.wk-act summary { font-size: var(--label-size); font-weight: 750; cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: var(--space-2); list-style: none; }
.wk-act summary::-webkit-details-marker { display: none; }
/* ▸ closed, ▾ open — as the mockup's Activity (a summary drawn as flex loses the browser's own marker) */
.wk-act summary::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent currentColor;
  transition: transform .15s ease; }
.wk-act[open] summary::before { transform: rotate(90deg); }
.wk-act-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: flex; flex-direction: column; gap: var(--space-2); }
.wk-act-list li { border-left: 2px solid var(--accent-line); padding: 0 0 0 var(--space-3); font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary); }
.wk-act-day { color: var(--text); font-weight: 650; }
.wk-note { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.wk-note-add { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-1); }
.wk-rec-foot { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-5); border-top: var(--border-width) solid var(--border); }

/* the views — All active · Requests · Offers · Negotiations · Archived; All · Payables · Receivables · Overdue · Expenses */
.wk-views-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin: var(--space-3) 0 var(--space-4); flex-wrap: wrap; }
.wk-views { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.wk-views--plain { margin: 0 0 var(--space-4); }
.wk-view { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); border: var(--border-width) solid transparent;
           border-radius: 7px; background: transparent; font: inherit; font-size: var(--label-size); font-weight: 600; color: var(--text-secondary); cursor: pointer;
           white-space: nowrap; }
.wk-view:hover { color: var(--accent-deep); }
.wk-view--on { background: var(--surface); border-color: var(--border); color: var(--text); font-weight: 750; box-shadow: 0 1px 3px rgba(7, 28, 60, .06); }
.wk-view-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; }
.wk-link-btn { gap: var(--space-2); }

/* Negotiation now (466 a) */
.wk-neg { margin-top: var(--space-4); padding: var(--space-4); border: var(--border-width) solid var(--border); border-radius: var(--radius-card); background: var(--surface);
          display: flex; flex-direction: column; gap: var(--space-2); }
.wk-neg-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.wk-neg-head h4 { margin: 0; font-size: var(--label-size); font-weight: 750; }
.wk-neg-who, .wk-neg-asks, .wk-neg-note { margin: 0; font-size: var(--helper-size); line-height: var(--helper-lh); }
.wk-neg-asks { font-weight: 700; }
.wk-neg-note { color: var(--text-secondary); }

/* --- Sales (SalesTab 456–467): the pipeline, value by stage, the two rates --- */
.sl-pipe { display: grid; grid-template-columns: minmax(0, 2fr) minmax(230px, 1fr) 170px; gap: 0; padding: var(--space-5) var(--space-6); margin-bottom: var(--space-5); }
.sl-journey { min-width: 0; padding-right: var(--space-5); display: flex; flex-direction: column; justify-content: space-between; }
.sl-journey-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.sl-h2 { font-size: 18px; line-height: 24px; font-weight: 750; margin: var(--space-1) 0 0; }
.sl-active { display: inline-flex; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 0;
             border-radius: 10px; background: var(--badge); font: inherit; font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; text-align: left; white-space: nowrap; }
.sl-active-count { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 800; }
.sl-active-values { color: inherit; }
.sl-active[aria-pressed="true"] { box-shadow: none; }
@media (max-width: 900px) {
  .sl-journey-head { flex-wrap: wrap; }
  .sl-active { width: 100%; flex-wrap: wrap; justify-content: flex-start; padding-top: 10px; padding-bottom: 10px; }
  .sl-active-values { white-space: normal; }
}
.sl-track-scroll { overflow-x: auto; scrollbar-width: thin; padding: var(--space-6) 0 var(--space-3); }
.sl-track { --sl-at: 0; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; min-width: 540px; }
.sl-track::before { content: ''; position: absolute; left: 10%; right: 10%; top: 23px; height: 3px; background: var(--text-secondary); }
.sl-track::after { content: ''; position: absolute; left: 10%; top: 23px; height: 3px; width: calc(80% * var(--sl-at)); background: var(--accent-deep); }
.sl-node { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); position: relative; z-index: 1; text-align: center; min-width: 0; }
.sl-stage { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); border: 0; background: transparent; font: inherit; color: var(--text); cursor: pointer; padding: 0 2px; }
.sl-circle { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--text-secondary); background: var(--surface);
             color: var(--text-secondary); font-size: 19px; font-weight: 800; box-shadow: 0 0 0 5px var(--surface); }
.sl-stage b { font-size: var(--helper-size); font-weight: 650; color: var(--text-secondary); white-space: nowrap; }
.sl-stage:hover .sl-circle { border-color: var(--accent-deep); background: var(--accent-surface); }
.sl-stage--on .sl-circle { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--text-on-accent); box-shadow: 0 0 0 4px var(--accent-surface), 0 0 0 5px var(--accent-deep); }
.sl-stage--on b { color: var(--accent-deep); font-weight: 800; }
.sl-node small { font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.sl-outcomes { display: flex; gap: var(--space-1); }
.sl-outcomes button { min-height: 30px; padding: 2px 8px; border-radius: 5px; font: inherit; font-size: var(--micro-size); font-weight: 700; cursor: pointer; }
.sl-win { border: var(--border-width) solid var(--success-line); background: var(--success-surface); color: var(--text); }
.sl-loss { border: var(--border-width) solid var(--danger); background: var(--danger-surface); color: var(--danger-button); }
.sl-outcomes button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent-deep); }
.sl-note { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.sl-archive { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--micro-size); }
.sl-archive[aria-pressed="true"] { text-decoration: underline; }
.sl-chart { min-width: 0; border-left: var(--border-width) solid var(--border); padding: 0 var(--space-5); }
.sl-chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.sl-chart-head h3 { margin: 0; font-size: var(--label-size); font-weight: 750; }
.sl-chart-head small { font-size: var(--micro-size); color: var(--text-secondary); }
.sl-chart-row { display: grid; grid-template-columns: 86px minmax(30px, 1fr) 92px; align-items: center; gap: var(--space-2); width: 100%; min-height: 30px; padding: 0;
                border: 0; background: transparent; font: inherit; font-size: var(--micro-size); text-align: left; cursor: pointer; color: var(--text); }
.sl-chart-row > span { color: var(--text-secondary); }
.sl-chart-row > i { display: flex; height: 10px; border-radius: 3px; overflow: hidden; background: var(--border-soft); }
.sl-chart-row > i > b { display: block; height: 100%; background: var(--accent-deep); }
.sl-chart-row > i > .sl-bar-win { background: var(--accent-deep); }
.sl-chart-row > i > .sl-bar-loss { background: var(--badge); }
.sl-chart-row > strong { text-align: right; font-weight: 700; white-space: nowrap; }
.sl-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-3) 0 var(--space-1); font-size: var(--micro-size); }
.sl-legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.sl-legend-win::before { background: var(--accent-deep); }
.sl-legend-loss::before { background: var(--badge); }
.sl-chart-note { margin: 0; font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.sl-rates { display: flex; flex-direction: column; gap: var(--space-3); }
.sl-rate { position: relative; padding: var(--space-3); border: var(--border-width) solid var(--border); border-radius: var(--radius-card); background: var(--surface);
           display: flex; flex-direction: column; gap: 4px; }
.sl-rate-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--helper-size); font-weight: 750; }
.sl-rate-i { width: 32px; height: 32px; }
.sl-rate > strong { font-size: 26px; line-height: 30px; font-weight: 800; letter-spacing: -.6px; color: var(--accent-deep); }
.sl-rate small { font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.sl-rate-bar { display: block; height: 5px; border-radius: 5px; background: var(--border-soft); overflow: hidden; }
.sl-rate-bar b { display: block; height: 100%; background: var(--accent-deep); }
.sl-rate-how { margin: 0; padding: var(--space-2); border-radius: var(--radius-input); background: var(--accent-wash); font-size: var(--micro-size); line-height: var(--micro-lh); }
/* the record's five stages: done, now, skipped, to come */
.sl-segs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: var(--space-2); }
.sl-seg { height: 5px; border-radius: 3px; background: var(--border-strong); }
.sl-seg--done, .sl-seg--now, .sl-seg--won { background: var(--accent-deep); }
.sl-seg--skip { background: repeating-linear-gradient(90deg, var(--border-strong) 0 4px, transparent 4px 7px); }
.sl-seg--lost { background: var(--danger); }
.sl-seg--todo { background: var(--border); }
.sl-segs-cap { margin: var(--space-2) 0 0; font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
/* + New lead: a business found by its name */
.sl-biz { position: relative; }
.sl-biz-chosen { display: flex; align-items: center; gap: var(--space-1); color: var(--accent-deep); }
.sl-hits { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin-top: 4px; background: var(--surface); border: var(--border-width) solid var(--border);
           border-radius: var(--radius-input); box-shadow: var(--shadow-menu); max-height: 280px; overflow-y: auto; }
.sl-hit { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: 0; background: transparent;
          font: inherit; text-align: left; cursor: pointer; }
.sl-hit:hover, .sl-hit:focus { background: var(--accent-surface); }
.sl-hit small { color: var(--text-secondary); font-size: var(--micro-size); }

/* --- Purchases (Workspaces 468–470) --- */
.pw-measures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.pw-measure { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.pw-measure-head { display: flex; justify-content: space-between; align-items: center; }
.pw-measure-head h3 { margin: 0; font-size: var(--label-size); font-weight: 750; }
.pw-measure-value { font-size: 28px; line-height: 34px; font-weight: 800; letter-spacing: -.7px; }
.pw-measure-line { font-size: var(--micro-size); line-height: var(--micro-lh); font-weight: 650; color: var(--text); }
.pw-measure-bar { display: block; height: 5px; border-radius: 5px; background: var(--border-soft); overflow: hidden; }
.pw-measure-bar b { display: block; height: 100%; background: var(--accent-deep); }
.pw-measure--green .pw-measure-bar b { background: var(--success); }
.pw-measure--amber .pw-measure-bar b { background: var(--warning); }
.pw-measure--violet .pw-measure-bar b { background: var(--violet-bar); }
.pw-measure small { font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.pw-measures-note { margin: var(--space-2) 0 var(--space-5); font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.pw-waits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.pw-wait { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); min-height: 72px; border: var(--border-width) solid var(--border); border-radius: var(--radius-card);
           background: var(--surface); font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.pw-wait--teal { background: var(--accent-wash); border-color: var(--accent-line); }
.pw-wait--amber { background: var(--warning-surface); border-color: var(--warning); }
.pw-wait--on { box-shadow: 0 0 0 2px var(--accent-deep); }
.pw-wait-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--surface); color: var(--accent-deep); flex: none; }
.pw-wait-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.pw-wait-text strong { font-size: var(--label-size); }
.pw-wait-text small { font-size: var(--micro-size); color: var(--text-secondary); }
.pw-wait-arrow { color: var(--text-secondary); flex: none; }
.pw-work-head { margin-bottom: var(--space-2); }
.pw-rec-title { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.pw-rec-title .wk-rec-title { margin: 0; }
.pw-sup { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.pw-sup > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pw-sup small { font-size: var(--micro-size); color: var(--text-secondary); }
.pw-sup-mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9px; background: var(--accent-surface);
               color: var(--navy); font-weight: 800; font-size: var(--helper-size); overflow: hidden; flex: none; border: var(--border-width) solid var(--accent-line); }
.pw-sup-mark img { width: 100%; height: 100%; object-fit: contain; }

/* --- Invoices (Workspaces 471) --- */
.inv-wait { align-items: center; margin-bottom: var(--space-3); }
.inv-wait span { flex: 1 1 auto; }
.inv-rec-orders { margin: var(--space-2) 0 0; font-size: var(--helper-size); }
.ts-title { font-size: var(--section-size); line-height: var(--section-lh); letter-spacing: -.3px; }

/* --- Feeds (FeedNetwork 432–444) --- */
.fn-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-4) 0 var(--space-5); }
.fn-tools { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.fn-home { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 700; }
.fn-cols { display: grid; grid-template-columns: minmax(0, 1fr) clamp(330px,27vw,410px); gap: var(--space-5); align-items: start; }
.fn-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.fn-side { position: sticky; top: var(--space-4); min-width: 0; }
.fn-side-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.fn-side-title { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--helper-size); font-weight: 700; color: var(--text-secondary); }
.fn-side-name { font-size: var(--helper-size); font-weight: 700; }
.fn-composer { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); color: var(--text-secondary); }
.fn-composer-box { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 var(--space-4); border: var(--border-width) solid var(--border); border-radius: 22px;
                   background: var(--canvas); font: inherit; font-size: var(--label-size); color: var(--text-secondary); text-align: left; cursor: pointer; }
.fn-composer-box:hover { border-color: var(--accent); }
.fn-composer-as { font-size: var(--micro-size); white-space: nowrap; }
.fn-avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--accent-surface);
             color: var(--navy); font-weight: 800; font-size: var(--label-size); flex: none; overflow: hidden; }
.fn-avatar img { width: 100%; height: 100%; object-fit: contain; }
.fn-avatar--me { width: 36px; height: 36px; border-radius: 50%; font-size: var(--micro-size); }
.fn-avatar--sm { width: 32px; height: 32px; border-radius: 8px; font-size: var(--micro-size); }
.fn-avatar--lg { width: 48px; height: 48px; }
.fn-post { padding: 0; overflow: visible; position: relative; }
.fn-post--on { border-color: var(--accent-line); box-shadow: inset 3px 0 var(--accent-deep); }
.fn-post-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-2); }
.fn-post-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fn-post-who > div { display: flex; align-items: center; gap: var(--space-1); }
.fn-name { font-size: var(--label-size); font-weight: 750; color: var(--text); text-align: left; }
.fn-tick { display: inline-flex; color: var(--accent-deep); }
.fn-meta { font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.fn-follow { min-width: 0; }
.fn-follow--on { background: var(--surface-subtle); }
.fn-menu-wrap { position: relative; }
.fn-menu { position: absolute; right: 0; top: 100%; z-index: 6; min-width: 300px; }
.fn-why { margin: 0 var(--space-5) var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-input); background: var(--accent-wash);
          font-size: var(--helper-size); line-height: var(--helper-lh); }
.fn-post-words { padding: 0 var(--space-5) var(--space-3); }
.fn-kind { display: block; font-size: var(--micro-size); line-height: var(--micro-lh); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); }
.fn-text { margin: var(--space-2) 0 0; font-size: 15px; line-height: 23px; }
.fn-media { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border-block: var(--border-width) solid var(--border-soft); background: var(--accent-wash); }
.fn-media-pic { display: block; min-height: 220px; max-height: 320px; overflow: hidden; background: var(--surface-subtle); }
.fn-media-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fn-media-info { padding: var(--space-5); display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); min-width: 0; }
.fn-media-title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 750; }
.fn-media-title a { color: inherit; text-decoration: none; }
.fn-media-title a:hover { color: var(--accent-deep); }
.fn-buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.fn-picture { border-block: var(--border-width) solid var(--border-soft); max-height: 420px; overflow: hidden; }
.fn-picture img { width: 100%; display: block; object-fit: cover; }
.fn-promoted { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-2) var(--space-5) 0; font-size: var(--micro-size); color: var(--text-secondary); }
.fn-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-5); }
.fn-counts { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-5); font-size: var(--micro-size);
             color: var(--text-secondary); }
.fn-likes { display: inline-flex; align-items: center; gap: var(--space-1); }
.fn-counts-r { display: inline-flex; align-items: center; gap: var(--space-3); }
.fn-acts a.btn { text-decoration: none; }
.fn-company { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }
.fn-err { margin: 0 var(--space-5); }
.fn-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--border-width) solid var(--border-soft); }
.fn-ctl { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; border: 0; background: transparent; font: inherit;
          font-size: var(--label-size); color: var(--text-secondary); cursor: pointer; }
.fn-ctl:hover { background: var(--accent-wash); color: var(--accent-deep); }
.fn-ctl--on { color: var(--accent-deep); font-weight: 750; }
.fn-ctl--on svg { fill: var(--accent-surface); }
.fn-few, .fn-comment { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-4); border-top: var(--border-width) solid var(--border-soft);
                       background: var(--accent-wash); }
.fn-few-q { font-size: var(--helper-size); line-height: var(--helper-lh); }
.fn-few-row { display: flex; align-items: center; gap: var(--space-2); }
.fn-pill-input { flex: 1 1 auto; min-width: 0; border-radius: 22px; }
.fn-sent { display: flex; align-items: center; gap: var(--space-1); margin: 0; padding: var(--space-3) var(--space-5); border-top: var(--border-width) solid var(--border-soft);
           font-size: var(--helper-size); color: var(--accent-deep); }
.fn-post--hidden { padding: 0; }
.fn-hidden-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.fn-hidden-head p { flex: 1 1 auto; margin: 0; font-size: var(--helper-size); }
.fn-who { padding: var(--space-4) var(--space-5); border-top: var(--border-width) solid var(--border-soft); }
.fn-who-h { margin: 0 0 var(--space-2); font-size: var(--label-size); font-weight: 750; }
.fn-who-list { list-style: none; margin: var(--space-2) 0; padding: 0; }
.fn-who-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--border-width) solid var(--border-soft); }
.fn-who-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.fn-who-row small { font-size: var(--micro-size); color: var(--text-secondary); }
.fn-who-text { margin: var(--space-1) 0; font-size: var(--helper-size); }
.fn-who-pills { display: flex; gap: var(--space-1); flex-wrap: wrap; justify-content: flex-end; }
/* the publisher's panel */
.fn-pub { padding: 0; overflow: hidden; }
.fn-pub-band { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-5); background: var(--accent-surface); }
.fn-pub-verified { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--micro-size); font-weight: 700; color: var(--accent-deep); }
.fn-pub-body { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.fn-pub-who { display: flex; align-items: center; gap: var(--space-3); }
.fn-pub-who > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fn-pub-name { font-size: 18px; line-height: 24px; font-weight: 750; }
.fn-pub-who small { font-size: var(--micro-size); color: var(--text-secondary); }
.fn-pub-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.fn-pub-chips .chip { cursor: default; background: var(--surface); border-color: var(--border); color: var(--text-secondary); }
.fn-pub-chips .chip-on { background: var(--accent-surface); border-color: var(--accent-line); color: var(--accent-deep); }
.fn-pub-about { margin: 0; font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary); }
.fn-pub-h { margin: 0; font-size: var(--micro-size); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.fn-pub-rating { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); padding: var(--space-3); border: var(--border-width) solid var(--border-soft);
                 border-radius: var(--radius-card); background: var(--surface-subtle); }
.fn-pub-rating > strong { font-size: 30px; line-height: 34px; font-weight: 800; }
.fn-stars { color: var(--rating); letter-spacing: 2px; }
.fn-pub-rating small { font-size: var(--micro-size); color: var(--text-secondary); }
.fn-pub-facts { margin: 0; }
.fn-pub-perf-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.fn-pub-perf-head small { font-size: var(--micro-size); color: var(--text-secondary); }
.fn-pub-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.fn-pub-tile { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border: var(--border-width) solid var(--border); border-radius: var(--radius-input);
               font-size: var(--micro-size); color: var(--text-secondary); }
.fn-pub-tile strong { font-size: 22px; line-height: 26px; color: var(--text); }
.fn-pub-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.fn-pub-line { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3); border: var(--border-width) solid var(--border); border-radius: var(--radius-input);
               font-size: var(--micro-size); color: var(--text-secondary); }
.fn-pub-line strong { font-size: 18px; color: var(--text); }
.fn-pub-assess { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-input); background: var(--accent-wash);
                 border: var(--border-width) solid var(--accent-line); }
.fn-pub-assess > strong { font-size: 24px; color: var(--accent-deep); }
.fn-pub-assess > span { font-size: var(--micro-size); color: var(--text-secondary); }
.fn-pub-assess > div { display: flex; flex-direction: column; gap: 2px; font-size: var(--micro-size); }
.fn-pub-assess small { color: var(--text-secondary); }
.fn-pub-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.fn-pub-btns .btn { min-width: 0; }
.fn-pub-foot { padding: var(--space-3) var(--space-5); border-top: var(--border-width) solid var(--border-soft); background: var(--surface-subtle); font-size: var(--micro-size);
               color: var(--text-secondary); }
/* the publisher on a phone, and the dialogs */
.fn-scrim { z-index: 40; }
.fn-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 88vh; overflow-y: auto; background: var(--canvas); border-radius: 14px 14px 0 0;
            box-shadow: var(--shadow-dock); padding: var(--space-3) var(--space-4) var(--space-6); }
.fn-sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.fn-sheet-head h2 { margin: 0; font-size: var(--label-size); }
.fn-dlg { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.fn-dlg-h { margin: 0; font-size: 20px; font-weight: 800; }
.fn-share-who { display: flex; align-items: center; gap: var(--space-3); }
.fn-share-who > span { display: flex; flex-direction: column; gap: 2px; }
.fn-share-who small { font-size: var(--micro-size); color: var(--text-secondary); }
.fn-share-adds { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.fn-file { position: relative; cursor: pointer; }
.fn-share-listing { min-width: 240px; flex: 1 1 240px; }
.fn-share-pic { display: flex; align-items: center; gap: var(--space-3); }
.fn-share-pic img { width: 120px; height: 80px; object-fit: cover; border-radius: var(--radius-input); border: var(--border-width) solid var(--border); }
.fn-share-cats { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.fn-quota { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--accent-line);
            border-radius: var(--radius-card); background: var(--accent-wash); }
.fn-quota p { margin: 0; }
.fn-set { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--border-width) solid var(--border-soft); }
.fn-set-h { margin: 0; font-size: var(--label-size); font-weight: 750; }
/* My listings › Promotion: the promoted updates */
.fn-promoted-card { margin-bottom: var(--space-4); }
.fn-promoted-head { display: flex; align-items: center; gap: var(--space-2); }
.fn-promoted-head .form-title { margin: 0; }
.fn-promoted-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.fn-promoted-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--border-width) solid var(--border-soft); }
.fn-promoted-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fn-promoted-row small { font-size: var(--micro-size); color: var(--text-secondary); }

/* the console's Feeds */
.cfd-cols { grid-template-columns: 110px 180px minmax(0, 1fr) 170px 140px; }
.cfd-form { padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); border-bottom: var(--border-width) solid var(--border-soft); }
.mbx-norole { margin-top: var(--space-2); }

/* --- wider than a phone, narrower than the mockup --- */
@media (max-width: 1280px) {
  .sl-pipe { grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr); row-gap: var(--space-5); }
  .sl-rates { grid-column: 1 / -1; flex-direction: row; }
  .sl-rate { flex: 1 1 0; }
}
@media (max-width: 1100px) {
  /* WR1: the shared record width remains the same through tablet desktop widths. */
  .pw-measures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* --- on a phone (and up to 1023 px): one column; a record its own page; the publisher a sheet --- */
@media (max-width: 1023px) {
  .wk-cols, .fn-cols { grid-template-columns: minmax(0, 1fr); }
  .wk-side, .fn-side { position: static; }
  .fn-side { display: none; }
  .sl-pipe { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  .sl-journey { padding-right: 0; }
  .sl-chart { border-left: 0; border-top: var(--border-width) solid var(--border); padding: var(--space-4) 0 0; }
  .wk-table:not(.wr-offer-lines-table) thead { display: none; }
  .wk-table:not(.wr-offer-lines-table), .wk-table:not(.wr-offer-lines-table) tbody, .wk-table:not(.wr-offer-lines-table) tr, .wk-table:not(.wr-offer-lines-table) td { display: block; width: 100%; }
  .wk-table:not(.wr-offer-lines-table) tr { padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--border-soft); display: grid; grid-template-columns: minmax(0, 1fr) auto;
                 gap: var(--space-2) var(--space-3); }
  .wk-table:not(.wr-offer-lines-table) td { padding: 0; border: 0; }
  .wk-table:not(.wr-offer-lines-table) td:nth-child(1) { grid-column: 1 / -1; }
  .wk-table:not(.wr-offer-lines-table) td:nth-child(4) { grid-row: 3; grid-column: 2; }
  .wk-table:not(.wr-offer-lines-table) td:nth-child(5) { grid-column: 1; }
  .wk-row--on td:first-child { box-shadow: none; }
  .pw-waits { grid-template-columns: minmax(0, 1fr); }
  .fn-media { grid-template-columns: minmax(0, 1fr); }
  .fn-media-pic { min-height: 180px; max-height: 240px; }
}
@media (max-width: 640px) {
  .wk-title { font-size: 24px; line-height: 30px; }
  .wk-head { align-items: stretch; }
  .wk-tools { width: 100%; }
  .wk-tools .btn { flex: 1 1 auto; }
  .pw-measures { grid-template-columns: minmax(0, 1fr); }
  .sl-journey-head { flex-direction: column; }
  .sl-active { align-items: flex-start; text-align: left; }
  .sl-rates { flex-direction: column; }
  .sl-chart-row { grid-template-columns: 78px minmax(30px, 1fr) 86px; }
  .wk-figure strong { font-size: 24px; line-height: 30px; }
  .wk-facts { grid-template-columns: 96px minmax(0, 1fr); }
  .fn-post-head, .fn-post-words, .fn-acts, .fn-counts, .fn-few, .fn-comment { padding-left: var(--space-4); padding-right: var(--space-4); }
  .fn-composer-as { display: none; }
  .fn-ctl span { font-size: var(--micro-size); }
  .fn-ctl { flex-direction: column; gap: 2px; }
  .fn-tools { width: 100%; justify-content: space-between; }
  .cfd-cols { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   m349t2 — Home by role and style (board HomeByRole; Jiri, 22 Oct 11:29). His mockup's home — the head with the style, the role's area
   beside the category picture and the four cards, the process line, the network, the workspace, Go to — in the market's design system:
   its type (12 px the least), its buttons (44 px), its colours (the tokens; MK-02). On a phone one column in the same order (427).
   ============================================================================= */

/* --- the head: Home / role, the greeting, the date, Style ▾ --- */
.hm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.hm-crumbs { align-items: center; }
.hm-title { font-size: 28px; line-height: 34px; font-weight: 750; letter-spacing: -.6px; margin: 0; }
.hm-tools { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.hm-date { font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary); }
.hm-style-wrap { position: relative; }
.hm-style { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-3); border: var(--border-width) solid var(--border);
            border-radius: var(--radius-input); background: var(--surface); color: var(--text); font: inherit; font-size: var(--label-size); cursor: pointer; }
.hm-style:hover { border-color: var(--accent); }
.hm-style--open { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hm-style--open svg:last-child { transform: rotate(180deg); }
.hm-style-k { color: var(--text-secondary); }
.hm-style-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 330px; padding: var(--space-2); border: var(--border-width) solid var(--border);
                 border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-menu); }
.hm-style-menu:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.hm-opt { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border-radius: 8px; cursor: pointer; }
.hm-opt strong { display: block; font-size: var(--label-size); }
.hm-opt small { display: block; font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.hm-opt--at, .hm-opt:hover { background: var(--accent-wash); }
.hm-opt--on strong { color: var(--accent-deep); }
.hm-opt-tick { width: 16px; flex: none; color: var(--accent-deep); padding-top: 2px; }
.hm-style-note { margin: var(--space-2) var(--space-3) var(--space-1); font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.hm-style-note .linkbtn { font-size: inherit; }

/* --- the top: the role's area (with the picture) and the four cards --- */
.hm-top { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-4); align-items: stretch; margin-bottom: var(--space-4); }
.hm-area { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.hm-rolewrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-4); flex: 1 1 auto; min-height: 0; }
.hm-rolewrap--wide { grid-template-columns: minmax(0, 1fr); }
.hm-top .home-cards { min-height: 0; }
.hm-skel { height: 262px; border-radius: var(--radius-card); }

.hm-intro { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--accent-wash); border-color: var(--accent-line); }
.hm-intro-h { font-size: 26px; line-height: 32px; font-weight: 800; letter-spacing: -.5px; margin: 0; }
.hm-lede { font-size: var(--label-size); line-height: var(--label-lh); color: var(--text-secondary); margin: 0; }
.hm-acts { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.hm-acts .btn { display: inline-flex; align-items: center; gap: var(--space-2); }
.hm-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-2); margin-top: auto; }
.hm-q { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-height: 76px; padding: var(--space-3); border: var(--border-width) solid var(--accent-line);
        border-radius: 8px; background: var(--surface); color: var(--accent-deep); font: inherit; text-align: left; cursor: pointer; }
.hm-q strong { display: block; color: var(--text); font-size: var(--micro-size); line-height: var(--micro-lh); }
.hm-q small { display: block; color: var(--text-secondary); font-size: var(--micro-size); line-height: var(--micro-lh); }
.hm-q:hover { border-color: var(--accent); }

.hm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.hm-stat { padding: var(--space-4); }
.hm-stat-k { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.hm-stat-k svg { color: var(--accent-deep); flex: none; }
.hm-stat-v { margin-top: var(--space-2); font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -.4px; }
.hm-stat-l { margin-top: var(--space-1); font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.hm-stat-l.hm-good { color: var(--success-text); }
.hm-stat-l.hm-warn { color: var(--warning-text); }

.hm-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.hm-panel-head > svg { color: var(--accent-deep); flex: none; }
.hm-h2 { font-size: 18px; line-height: 24px; font-weight: 750; letter-spacing: -.2px; margin: 0; }
.hm-sub { margin: 2px 0 0; font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.hm-note { margin: var(--space-3) 0 0; font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.hm-empty { margin: var(--space-3) 0; font-size: var(--helper-size); line-height: var(--helper-lh); color: var(--text-secondary); }

.hm-chart { padding: var(--space-4); min-width: 0; }
.hm-svg { display: block; width: 100%; height: auto; }
.hm-bar { fill: var(--accent); }
.hm-grid { stroke: var(--border-soft); stroke-width: 1; }
.hm-axis { fill: var(--text-secondary); font-size: 11px; }

.hm-plan { display: flex; flex-direction: column; padding: var(--space-4); min-width: 0; }
.hm-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.hm-day { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: var(--space-2) 0; border: var(--border-width) solid var(--border);
          border-radius: 8px; background: var(--surface); color: var(--text-secondary); font: inherit; font-size: var(--micro-size); cursor: pointer; }
.hm-day strong { font-size: 18px; line-height: 22px; color: var(--text); }
.hm-day--on { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-deep); }
.hm-dots { display: flex; gap: 3px; min-height: 5px; }
.hm-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.hm-agenda { display: flex; flex-direction: column; gap: var(--space-1); }
.hm-agenda-pager { border: 0; padding: 0; margin: var(--space-3) 0 0; min-width: 0; }
.hm-agenda-pager .pager-nav { flex-wrap: wrap; }
.hm-ev { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border: 0; border-bottom: var(--border-width) solid var(--border-soft); background: transparent;
         font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.hm-ev > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.hm-ev strong { display: block; font-size: var(--micro-size); line-height: var(--micro-lh); }
.hm-ev small { display: block; font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.hm-ev-bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--accent); flex: none; }
.hm-plan-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-3); font-size: var(--micro-size);
                color: var(--text-secondary); }

.hm-later, .hm-none { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }

/* the category picture: ‹ › 1 / 6, Browse category */
.hm-pic { position: relative; min-height: 262px; overflow: hidden; border-radius: var(--radius-card); background: var(--canvas); }
.hm-pic-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-pic-top { position: absolute; left: var(--space-3); right: var(--space-3); top: var(--space-3); display: flex; justify-content: space-between; color: var(--text-on-accent);
              font-size: var(--micro-size); line-height: var(--micro-lh); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 3px var(--scrim); }
.hm-pic-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%;
                background: var(--surface); color: var(--text); cursor: pointer; }
.hm-pic-prev { left: var(--space-2); } .hm-pic-next { right: var(--space-2); }
.hm-pic-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-6) var(--space-4) var(--space-3);
              background: linear-gradient(to top, var(--scrim), transparent); }
.hm-pic-name { margin: 0; color: var(--text-on-accent); font-size: 22px; line-height: 27px; font-weight: 750; letter-spacing: -.3px; }
.hm-pic-go { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 36px; background: var(--surface); color: var(--text); border-color: var(--surface); }
.hm-pic-dots { display: flex; gap: 4px; }
.hm-pic-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--text-on-accent); opacity: .55; }
.hm-pic-dots i.on { width: 16px; opacity: 1; }

/* --- the process line, the network --- */
.hm-proc { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); flex-wrap: wrap; }
.hm-proc-words { display: flex; align-items: center; gap: var(--space-3); color: var(--accent-deep); }
.hm-proc-words strong { display: block; color: var(--text); font-size: var(--label-size); }
.hm-proc-words small { display: block; color: var(--text-secondary); font-size: var(--micro-size); line-height: var(--micro-lh); }
.hm-proc .btn { display: inline-flex; align-items: center; gap: var(--space-2); }
.hm-net { margin-bottom: var(--space-5); }
.hm-net-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.hm-net-tools { display: flex; align-items: center; gap: var(--space-4); }
.hm-net .fn-composer { margin-bottom: var(--space-3); }
.hm-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.hm-posts .fn-post { margin: 0; }

/* --- the workspace --- */
.hm-ws { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--micro-size); line-height: var(--micro-lh); font-weight: 800;
         letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); }
.hm-low { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; margin-bottom: var(--space-5); }
.hm-low--one { grid-template-columns: minmax(0, 1fr); }
.hm-tbl, .hm-watch, .hm-spread { padding: var(--space-4); min-width: 0; }
.hm-scroll { overflow-x: auto; }
.hm-table th:nth-child(1) { width: 36%; } .hm-table th:nth-child(2) { width: 20%; } .hm-table th:nth-child(3) { width: 16%; }
.hm-table th:nth-child(4) { width: 16%; } .hm-table th:nth-child(5) { width: 12%; }
.hm-row-title { display: block; padding: 0; border: 0; background: none; font: inherit; font-weight: 750; color: var(--text); text-align: left; cursor: pointer; }
.hm-row-title:hover { color: var(--accent-deep); text-decoration: underline; }
.hm-table td small { display: block; color: var(--text-secondary); font-size: var(--micro-size); line-height: var(--micro-lh); }
.hm-num { white-space: nowrap; }
.hm-row-act { font-weight: 700; white-space: nowrap; }
.hm-filter button { min-height: 32px; font-size: var(--micro-size); }
.hm-w { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) 0; border: 0; border-bottom: var(--border-width) solid var(--border-soft);
        background: transparent; font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.hm-w > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.hm-w strong { display: block; font-size: var(--label-size); line-height: var(--label-lh); }
.hm-w small { display: block; font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.hm-w-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--accent-surface); color: var(--accent-deep); flex: none; }
.hm-ai { display: flex; gap: var(--space-2); margin-top: var(--space-4); padding: var(--space-3); border: var(--border-width) solid var(--accent-line); border-radius: 8px;
         background: var(--accent-wash); }
.hm-ai-ico { color: var(--accent-deep); padding-top: 2px; }
.hm-ai-k { display: block; font-size: var(--micro-size); line-height: var(--micro-lh); font-weight: 750; color: var(--accent-deep); }
.hm-ai strong { display: block; font-size: var(--label-size); line-height: var(--label-lh); }
.hm-ai p { margin: 2px 0 var(--space-1); font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.hm-part { margin-bottom: var(--space-3); }
.hm-part-row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--label-size); }
.hm-part-row small { color: var(--text-secondary); white-space: nowrap; }
.hm-hbar { height: 6px; margin-top: var(--space-1); border-radius: 3px; background: var(--border-soft); overflow: hidden; }
.hm-hbar span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.hm-hbar .hm-hbar-late_30, .hm-hbar .hm-hbar-late_60 { background: var(--warning); }
.hm-hbar .hm-hbar-late_more { background: var(--danger); }

.hm-board-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.hm-board-tools { display: flex; align-items: center; gap: var(--space-3); }
.hm-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.hm-lane { padding: var(--space-3); border-radius: var(--radius-card); background: var(--surface-subtle); border: var(--border-width) solid var(--border-soft); min-width: 0; }
.hm-lane-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.hm-lane-head h3 { margin: 0; flex: 1 1 auto; font-size: var(--label-size); }
.hm-lane-head span { font-size: var(--micro-size); color: var(--text-secondary); }
.hm-lane-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.hm-lane-dot--2 { background: var(--warning); } .hm-lane-dot--3 { background: var(--success); }
.hm-card { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-bottom: var(--space-2); padding: var(--space-3); border: var(--border-width) solid var(--border);
           border-radius: 8px; background: var(--surface); font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.hm-card:hover { border-color: var(--accent); }
.hm-card-ref { font-size: var(--micro-size); color: var(--text-secondary); }
.hm-card strong { font-size: var(--label-size); line-height: var(--label-lh); }
.hm-card small { font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.hm-card-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.hm-ini { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-surface); color: var(--accent-deep); font-size: var(--micro-size);
          font-weight: 750; flex: none; }
.hm-more { margin: 0; font-size: var(--micro-size); color: var(--text-secondary); }

/* --- Go to --- */
.hm-goto { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) 0; border-top: var(--border-width) solid var(--border); font-size: var(--helper-size);
           color: var(--text-secondary); }
.hm-goto .linkbtn { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 700; }
.hm-goto-prefs { margin-left: auto; }

/* --- Preferences › Your home, Join SELYVO, an invitation: a role and a style as cards to choose --- */
.hm-choices { border: 0; padding: 0; margin: 0 0 var(--space-4); }
.hm-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-2) 0; }
.hm-choice-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-choice-grid--1 { grid-template-columns: minmax(0, 1fr); }
.hm-choice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--border); border-radius: var(--radius-card);
             background: var(--surface); cursor: pointer; }
.hm-choice input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent-deep); }
.hm-choice strong { display: block; font-size: var(--label-size); }
.hm-choice small { display: block; font-size: var(--micro-size); line-height: var(--micro-lh); color: var(--text-secondary); }
.hm-choice--on { border-color: var(--accent); background: var(--accent-wash); }
.hm-choice--off { cursor: default; opacity: .6; }
.hm-pref-ai { margin-bottom: var(--space-4); }
.hm-join .hm-choice-grid--3, .hm-join .hm-choice-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- on a phone: one column, in the wide screen's order; the four cards two by two; the style ▾ a sheet (427) --- */
@media (max-width: 1023px) {
  .hm-top, .hm-low { grid-template-columns: minmax(0, 1fr); }
  .hm-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hm-head { align-items: flex-start; }
  .hm-date { display: none; }
  .hm-rolewrap { grid-template-columns: minmax(0, 1fr); }
  .hm-stats { grid-template-columns: minmax(0, 1fr); }
  .hm-top .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .hm-posts, .hm-lanes, .hm-choice-grid, .hm-choice-grid--3, .hm-join .hm-choice-grid--3, .hm-join .hm-choice-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .hm-style-menu--sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; z-index: 70; border-radius: var(--radius-card) var(--radius-card) 0 0;
                          padding: var(--space-4) var(--space-3) var(--space-5); }
  .hm-scrim { z-index: 60; }
  .hm-goto-prefs { margin-left: 0; }
  .hm-table th:nth-child(2), .hm-table td:nth-child(2) { display: none; }
}

/* M349T4-NAV-FIT-START
 * The expanded signed-in tabs can exceed the available row above 1023 px too.
 * Keep the existing tab scrolling behaviour and reserve room for Create. */
@media (min-width: 768px) {
  .shell-row--nav > .navlinks { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .shell-row--nav > .navlinks::-webkit-scrollbar { display: none; }
  .shell-row--nav > .shell-actions { flex: none; }
}
/* M349T4-NAV-FIT-END */

/* m349t4: approved R3 Customers and role counts. */
/* Market's mr-list/mr-row and wizard styles are retained; only column placement is new. */
.to-customer-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.to-customer-main .mr-list { margin-top: 0; }
.to-customer-main .mr-bar { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.to-customer-main .form-title { margin: 0; }
.to-customer-main .mr-search { min-width: 200px; }
.to-customer-main .to-customer-columns { grid-template-columns: minmax(0,1.8fr) minmax(0,1.25fr) minmax(0,1.25fr) 44px; }
.to-customer-columns > * { min-width: 0; overflow-wrap: anywhere; }
.to-customer-columns[aria-current="true"] { background: var(--accent-surface); box-shadow: inset 3px 0 0 var(--accent); }
.to-customer-columns.cust-row { cursor: pointer; }
.to-customer-columns .cust-name { text-align: left; }
.to-customer-main .wiz-foot { margin: 0; padding: var(--space-4) 0 0; }
.to-customer-main .wiz-foot .wiz-acts { margin-left: 0; }
.to-customer-main .wiz-foot .to-add-customer { margin-right: 0; }
.to-footer-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.to-mobile-label { display: none; }
.to-offer-detail { min-width: 0; }
@media (min-width:1024px) {
  .fn-cols { grid-template-columns: minmax(0,1fr) clamp(330px,27vw,410px); }
}
@media (min-width:1024px) and (max-width:1120px) {
  .fn-cols { grid-template-columns: minmax(0,1fr) 315px; }
}
.to-customer-picker { width: min(620px,calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; }
.to-customer-picker::backdrop { background: color-mix(in srgb, var(--text) 40%, transparent); }
.to-customer-picker .mr-head { margin: 0 0 var(--space-4); align-items: center; }
.to-customer-picker .form-title { margin: 0; }
.to-customer-picker .to-available-row { grid-template-columns: minmax(0,1fr) auto; }
.to-customer-picker:not([open]) { display: none; }
@media (max-width:900px) {
  .to-customer-main .to-customer-columns { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 44px; }
  .to-customer-main .mr-row-head { display: none; }
  .to-customer-columns > :first-child { grid-column: 1 / 3; }
  .to-customer-columns > :last-child { grid-column: 3; grid-row: 1 / 3; }
  .to-mobile-label { display: block; font-size: 11px; color: var(--text-secondary); margin-bottom: 3px; }
}
@media (max-width:600px) {
  .to-customer-main .mr-search { width: 100%; min-width: 0; }
  .to-customer-main .wiz-foot { gap: var(--space-2); }
  .to-customer-main .wiz-foot .wiz-lead { gap: 0; margin-right: auto; width: 100%; }
  .to-customer-main .wiz-foot .wiz-acts { margin-left: auto; }
  .to-customer-main .wiz-foot .btn { padding-left: 10px; padding-right: 10px; }
}

.to-recipient-roles .chip-toggle{display:inline-flex;align-items:center;gap:24px;min-width:160px}.to-recipient-count{margin-left:auto;font-variant-numeric:tabular-nums}.to-customer-main .wiz-acts--foot{flex-wrap:wrap}

/* J1 proposal geometry only. All visual tokens/components come from Market CSS. */
#view.command-live{display:flex;flex-direction:column;overflow:hidden;min-height:0;padding-bottom:0}
.command-live>.wk-head,.command-live>[role=status],.command-live>[role=alert]{flex:none}
.command-live>.wk-cols,.command-live>.wk-solo{flex:1;min-height:0;overflow:hidden;align-items:stretch}
.command-live .wk-list{display:flex;flex-direction:column;min-height:0}
.command-live .command-table-scroll{flex:1;min-height:0;overflow:auto}
.command-live .wk-list>.mr-foot{margin-top:auto;flex:none}
.command-live .wk-side,.command-live .wk-solo{overflow:auto;min-height:0;position:static}
.command-live .sl-pipe:not([hidden]){flex:none;max-height:45vh;overflow:auto}
.command-live [hidden]{display:none!important}
@media(max-width:800px){.command-live>.wk-cols{overflow:auto;display:block}.command-live .wk-list{min-height:220px;max-height:100%}.command-live .wk-side{overflow:visible}}

/* m349v1 review R4: country chips, address and shared composer actions. */
.country-selection > .to-chips:not(:empty) { margin-bottom: var(--space-3); }
.input.join-address { height: auto; min-height: 0; padding-top: var(--space-2); padding-bottom: var(--space-2); resize: vertical; }
.form-actions.fn-share-actions { width: 100%; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.fn-share-actions > [data-fnshareact="preview"] { margin-right: auto; }
.fn-share-submit { display: flex; flex: none; gap: var(--space-3); margin-left: auto; }
.fn-share-submit > .btn-secondary { margin-right: 0; }

/* m349v1 review R5: the introduction uses Market's type, cards, controls and icons. */
.join-go { flex-wrap: wrap; }
.join-go > .field-help { flex: 1 1 240px; margin: 0; }
.join-go > .btn { flex: 0 0 auto; margin-left: auto; }
.join-intro-hero { display: flex; align-items: center; gap: var(--space-6); border-top: 3px solid var(--accent); }
.join-intro-hero > div:first-child { flex: 1; min-width: 0; }
.join-intro-hero .title { margin: var(--space-3) 0; }
.join-intro-hero .lede { max-width: 78ch; margin: 0; }
.join-intro-start { flex: none; }
.join-intro [data-join="intro-start"] { display: inline-flex; align-items: center; gap: var(--space-3); }
.join-intro-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--space-6); align-items: start; }
.join-intro-roadmap > .form-title, .join-intro-aside .form-title { margin: 0; }
.join-intro-roadmap > .field-help { margin: var(--space-2) 0 var(--space-4); max-width: 90ch; }
.join-intro-steps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-4); list-style: none; padding: 0; margin: 0; }
.join-intro-steps > li { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; }
.join-intro-steps > li:first-child { grid-column: 1/-1; border-color: var(--accent-line); background: var(--accent-surface); }
.join-intro-steps > li > div { min-width: 0; }
.join-intro .form-subtitle { margin: 0; font-size: 18px; line-height: 25px; }
.join-intro-steps p, .join-intro-tip p, .join-intro-capabilities p { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--label-size); line-height: 21px; }
.join-intro-aside { display: flex; flex-direction: column; gap: var(--space-4); }
.join-intro-ready { display: flex; flex-direction: column; gap: var(--space-4); list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.join-intro-ready li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--label-size); line-height: 21px; }
.join-intro-ready svg { flex: none; color: var(--accent-deep); margin-top: 2px; }
.join-intro-tip > svg { color: var(--accent-deep); margin-bottom: var(--space-3); }
.join-intro-capabilities { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.join-intro-icon { display: inline-flex; padding: var(--space-2); background: var(--accent-surface); color: var(--accent-deep); border-radius: var(--radius-input); margin-bottom: var(--space-3); }
.join-intro-footer { border-top: var(--border-width) solid var(--border); padding-top: var(--space-5); }
@media (max-width:1100px) {
  .join-intro-layout { grid-template-columns: minmax(0,1fr); }
  .join-intro-aside { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .join-intro-hero { flex-direction: column; align-items: stretch; }
  .join-intro-start { align-self: flex-end; }
  .join-intro-steps, .join-intro-aside, .join-intro-capabilities { grid-template-columns: minmax(0,1fr); }
}

/* R7: paired Back / Continue actions above and below the first questions. */
.join-first-split > .wiz-head { padding-right: 0; }
.join-first-split .wiz-acts { min-width: 0; max-width: 100%; }
.join-first-split .wiz-ico { flex: none; }
.join-first-split .wiz-submit { min-width: 0; white-space: normal; }
.join-first-actions .wiz-lead { flex: 1 1 240px; }
.join-first-actions .field-help { margin: 0; }

/* Listing preview: keep the edit action at the trailing edge, including wrapped rows. */
.preview-banner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.preview-banner > div { flex: 1 1 280px; min-width: 0; }
.preview-banner > [data-lst="editback"] { flex: 0 0 auto; margin-inline-start: auto; }

/* Source99: the requested four business facts and their indicative equivalents. */
.business-facts-grid,.business-facts-equivalents { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3); }
.business-facts-grid>.field { min-width:0; }
.business-facts-grid .input,.business-facts-grid .pick { max-width:100%;min-width:0; }
.business-facts-conversion { margin:var(--space-3) 0 var(--space-4); }
.business-facts-equivalents strong { overflow-wrap:anywhere; }
.business-facts-previous { margin-bottom:var(--space-4); }
@media(max-width:700px){.business-facts-grid,.business-facts-equivalents{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:420px){.business-facts-grid,.business-facts-equivalents{grid-template-columns:minmax(0,1fr);}}

/* Source106: preparation is prominent; creation holds focus without clearing the form. */
.join-ready-card { border: 2px solid var(--accent); background: var(--accent-surface); box-shadow: 0 3px 12px rgba(0,0,0,.08); }
.join-ready-card .form-title { margin: 0; color: var(--text); }
.join-first-aside { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.join-creating { border: 2px solid var(--accent); border-radius: var(--radius-card,12px); background: var(--surface); color: var(--text); padding: var(--space-6); max-width: calc(100vw - 48px); text-align: center; }
.join-creating h2 { margin: var(--space-4) 0 var(--space-2); font-size: 24px; line-height: 1.3; }
.join-creating p { margin: 0; color: var(--text-secondary); font-size: 16px; line-height: 1.6; font-weight: 400; }
.join-creating { width: 440px; box-sizing: border-box; box-shadow: 0 16px 48px rgba(7,28,60,.18); border: 1px solid var(--border); }
.join-creating-mark { display: inline-flex; padding: var(--space-3); color: var(--accent-deep); background: var(--accent-surface); border-radius: 50%; }
.join-creating-mark svg { width: 28px; height: 28px; }
.join-creating-progress { display: block; height: 4px; margin-top: var(--space-5); border-radius: 4px; background: var(--accent-surface); overflow: hidden; }
.join-creating-progress::after { content: ""; display: block; width: 40%; height: 100%; background: var(--accent); animation: join-progress 1.5s ease-in-out infinite alternate; }
@keyframes join-progress { to { transform: translateX(150%); } }
@media (prefers-reduced-motion: reduce) { .join-creating-progress::after { animation: none; width: 100%; } }
.join-creating::backdrop { background: rgba(0,0,0,.48); }
.join-creating[data-fallback] { position: fixed; inset: 0; z-index: 10000; margin: auto; height: max-content; }
.join-creating[data-fallback]::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.48); z-index: -1; }

/* Source110: approved lead wizard; shared SELYVO controls and palette. */
.sl-lead-head{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;margin-bottom:16px}.sl-lead-head .tabs{flex:1;min-width:0;margin:0}.sl-lead-head .wm-slice,.sl-lead-head .wiz-acts{flex:none}.sl-lead-columns{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,1fr);gap:20px;align-items:start}.sl-lead-form,.sl-lead-side{min-width:0}.sl-lead-side{margin:0}.sl-customer-row{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:14px;border:0;border-bottom:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer}.sl-customer-row>span:nth-child(2){flex:1}.sl-customer-row strong,.sl-customer-row small{display:block}.sl-customer-row small{color:var(--text-secondary);margin-top:4px}.sl-customer-row[aria-pressed=true]{background:var(--accent-surface);color:var(--accent-deep)}.sl-lead-email{margin-bottom:26px}.sl-lead-review{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;margin:24px 0}.sl-lead-review dt{color:var(--text-secondary)}.sl-lead-review dd{margin:0;overflow-wrap:anywhere}.sl-lead-form .wiz-foot{display:flex;align-items:center;justify-content:space-between;margin-top:24px}.sl-lead-wizard .pager{display:flex;gap:12px;align-items:center;justify-content:flex-end;margin-top:16px}
@media(max-width:1100px){.sl-lead-head{flex-wrap:wrap}.sl-lead-head .tabs{flex-basis:100%}.sl-lead-head .wiz-acts{margin-left:auto}}@media(max-width:800px){.sl-lead-columns{grid-template-columns:minmax(0,1fr)}.sl-lead-head .tabs{overflow:auto}.sl-lead-head .tab{white-space:nowrap}}

/* Source110: reuse the email form and existing colour tokens. */
.wm-reply-envelope{display:flex;flex-direction:column;gap:10px;margin:0}.wm-reply-envelope .field{display:grid;grid-template-columns:90px minmax(0,1fr);gap:10px;margin:0}.wm-reply-envelope .field>div{overflow-wrap:anywhere}.wm-source{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}.wm-source .input{width:auto;max-width:220px}.wm-chat-field{align-items:flex-end}.wm-chat-compose textarea,.wm-compose-chat textarea{max-height:none;overflow-y:hidden;resize:none}
@media(max-width:700px){.wm-source{flex-wrap:wrap}.wm-source .input{max-width:160px}}

/* Source112: use the shared searchable picker in the MailChat source filter. */
.wm-source .catpick{min-width:160px;max-width:220px}.wm-source .catpick-search{width:100%;max-width:none}
@media(max-width:700px){.wm-source .catpick{min-width:140px;max-width:180px}}

/* Source117: approved master LeadWizard / LeadWizardSaved, 30 October 2026.
   Scoped to New lead. Product cards and the shared application header stay shared. */
.lm-master{color:#071c3c;width:100%;box-sizing:border-box;max-width:1600px;margin:0 auto;padding:0 4px 28px;font-size:14px;line-height:1.5}
.command-live>.lm-master{flex:1;min-height:0;overflow:auto;scrollbar-gutter:stable}
.lm-master button,.lm-master input,.lm-master select{font:inherit}.lm-back{font-size:12px;display:inline-flex;align-items:center;gap:4px;margin:0 0 12px}.lm-intro{margin-bottom:22px}.lm-intro h1{font-size:26px;line-height:1.25;margin:0 0 8px;font-weight:800}.lm-intro p{color:#4a6282;margin:0;font-size:14px}
.lm-master .sl-lead-columns{grid-template-columns:minmax(0,2.1fr) minmax(300px,1fr);gap:24px;align-items:start}.lm-main{min-width:0}.lm-master .sl-lead-head{display:flex;gap:12px;align-items:center;flex-wrap:nowrap;margin-bottom:20px;min-height:38px}.lm-steps{display:flex;align-items:center;gap:13px;flex:1;min-width:0}.lm-step{display:flex;flex-shrink:0;gap:5px;align-items:center;border:0;background:none;padding:3px 0;color:#4a6282;white-space:nowrap;cursor:pointer;min-width:0}.lm-step b{font-size:11px;font-weight:600}.lm-step>span{width:21px;height:21px;border-radius:50%;background:#e9f0f6;display:grid;place-items:center;font-size:11px;color:#4a6282;flex:none}.lm-step.active{color:#071c3c}.lm-step.active>span,.lm-step[aria-selected=false]:not(:disabled)>span{background:#009bb4;color:#fff}.lm-step:disabled{opacity:1;cursor:default}.lm-step:disabled>b{color:#526986}.lm-actions{display:flex;align-items:center;gap:7px;flex:none}.lm-actions .iconbtn{border:1px solid #dce6ef;border-radius:5px;background:#fff;width:34px;height:34px;color:#005e6e}.lm-actions .lm-next{background:#009bb4;color:#fff;border-color:#009bb4}.lm-actions button:focus-visible,.lm-step:focus-visible,.lm-master .sl-customer-row:focus-visible{outline:3px solid #007c91;outline-offset:3px}
.lm-master .sl-lead-form{padding:22px;border:1px solid #dce6ef;border-radius:10px;box-shadow:none;background:#fff}.lm-master .field{margin-bottom:17px}.lm-master .field-label{font-size:13px;font-weight:700;line-height:1.5;color:#071c3c}.lm-master .input{border:1px solid #bbcbdb;border-radius:5px;min-height:38px;background:#fff;color:#071c3c;font-size:14px;padding:8px 10px;width:100%;box-sizing:border-box}.lm-master .input:focus{border-color:var(--accent);outline:2px solid var(--focus-ring);outline-offset:3px}.lm-master .input.input-invalid,.lm-master .input[aria-invalid="true"]{border-color:var(--danger)}.lm-master .field-help{color:#4a6282;font-size:12px;line-height:1.5;margin:6px 0}.lm-master .grid-2{gap:16px}.lm-master .form-title{font-size:17px;margin:0 0 12px;font-weight:750}.lm-master h3{font-size:14px;margin:0 0 8px}.lm-master .rt-bar{background:var(--surface);flex-wrap:wrap}.lm-master .rt{border-color:#bbcbdb;border-radius:6px}.lm-master [contenteditable=true]{min-height:115px}.lm-master .sl-lead-side{padding-top:58px}.lm-summary{padding:20px;border:1px solid #dce6ef;box-shadow:none;border-radius:10px}.lm-summary-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:19px}.lm-summary-title h2{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#4a6282;margin:0}.lm-summary-title .chip{font-size:11px;background:#e7f7fb;color:#005e6e;font-weight:700}.lm-summary dl,.lm-phone-summary dl{display:grid;grid-template-columns:90px minmax(0,1fr);gap:14px 12px;margin:0}.lm-summary dt,.lm-phone-summary dt{font-size:12px;color:#4a6282}.lm-summary dd,.lm-phone-summary dd{font-size:13px;overflow-wrap:anywhere;margin:0}.lm-summary dd:first-of-type{font-weight:750}.lm-summary-value{grid-column:2;color:#005e6e}.lm-invite-hint{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:#6b4a00;background:#fff7e6;padding:12px;border-radius:6px;margin:20px 0 0}.lm-invite-hint svg{flex:none;margin-top:2px}
.lm-master .sl-customer-results{border:1px solid #dce6ef;border-radius:6px;padding:10px;margin-top:12px}.lm-master .sl-customer-results h3{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#4a6282}.lm-master .sl-customer-row{border:1px solid transparent;border-radius:6px;padding:11px 9px;gap:11px;color:#071c3c;background:#fff}.lm-master .sl-customer-row[aria-pressed=true]{border-color:#009bb4;background:#e7f7fb}.lm-master .sl-customer-row strong{font-size:13px;font-weight:750}.lm-master .sl-customer-row small{font-size:12px;margin-top:3px}.lm-master .sl-customer-row .avatar{display:grid;place-items:center;width:34px;height:34px;background:#e7f0f6;border-radius:6px;font-size:12px;font-weight:750;flex:none}.lm-row-skeleton{height:54px;margin:6px 0}.lm-master .pager{margin-top:10px;font-size:12px}.lm-manual{font-size:12px;margin-top:14px;text-decoration:underline}.lm-business-fields{padding:16px;background:#f7fafc;border:1px solid #e5edf4;border-radius:6px;margin-top:18px}.lm-business-fields .field:last-child{margin-bottom:0}
.lm-value-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.2fr);gap:15px}.lm-money{display:flex;gap:6px}.lm-money>.input{min-width:0;flex:1}.lm-money>.catpick{width:100px;min-width:100px;flex:0 0 100px}.lm-money button{min-height:38px}.lm-choice{display:inline-flex;align-items:center;background:#fff;border:1px solid #bbcbdb;border-radius:999px;color:#4a6282;padding:5px 11px;font-size:12px!important;font-weight:650!important;cursor:pointer}.lm-choice[aria-pressed=true]{background:#e7f7fb;border-color:#007c91;color:#005e6e}.lm-choices{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 14px}.lm-stage-note{background:#e7f7fb;color:#005e6e;padding:12px;border-radius:6px;font-size:12px;margin:18px 0 0}.lm-chips{display:flex;flex-wrap:wrap;gap:7px;margin:5px 0 9px}.lm-chips .chip{display:inline-flex;gap:7px;align-items:center;max-width:100%;white-space:normal;background:#e7f7fb;color:#005e6e}.lm-chips button{background:none;border:0;color:inherit;cursor:pointer}.lm-review-section>div:first-child{display:flex;align-items:center;justify-content:space-between}.lm-review-section h3{font-size:13px;margin:0}.lm-review-section p{font-size:13px;color:#4a6282;margin:6px 0}.lm-review-section .linkbtn{font-size:12px}.lm-invitation>p{font-size:12px;color:#6b4a00}.lm-invitation .rt{background:white}.lm-email-preview{background:#fff;border:1px solid #dce6ef;border-radius:6px;padding:14px;margin-top:14px}.lm-email-preview pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:13px}.lm-master .wiz-foot{justify-content:space-between;display:flex;gap:12px;border-top:1px solid #e5edf4;padding-top:18px;margin-top:22px}.lm-master .wiz-foot>.linkbtn{font-size:12px}.lm-phone-summary,.lm-mobile-progress{display:none}.lm-leave{position:fixed;z-index:4000;inset:40% auto auto 50%;transform:translateX(-50%);background:#fff;padding:24px;border:1px solid #bbcbdb;border-radius:10px;box-shadow:0 0 0 100vmax #071c3c66;display:flex;flex-wrap:wrap;gap:12px;max-width:90vw;width:520px}.lm-leave strong{flex-basis:100%}
@media(min-width:901px) and (max-width:1250px){.lm-master .sl-lead-columns{grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:16px}.lm-steps{gap:6px;overflow-x:auto}.lm-step b{font-size:10px}.lm-step>span{width:18px;height:18px}.lm-actions{gap:4px}.lm-actions .iconbtn{width:29px;height:31px}.lm-summary{padding:16px}.lm-value-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.lm-master .sl-lead-columns{grid-template-columns:minmax(0,1fr)}.lm-master .sl-lead-side{display:none}.lm-steps{display:none}.lm-master .sl-lead-head{flex-wrap:nowrap;gap:12px;margin-bottom:12px}.lm-mobile-progress{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px}.lm-mobile-progress>span{font-size:12px;color:#4a6282}.lm-mobile-progress strong{font-size:18px}.lm-mobile-progress progress{width:100%;height:4px;accent-color:#009bb4}.lm-actions{margin-left:auto}.lm-intro{display:none}.lm-master .sl-lead-form{padding:16px}.lm-value-grid{grid-template-columns:minmax(0,1fr)}.lm-phone-summary{display:block;background:#e7f7fb;border:1px solid #c6e7ee;border-radius:6px;padding:12px;margin-top:20px}.lm-phone-summary summary{cursor:pointer;color:#005e6e;font-weight:650}.lm-phone-summary[open] summary{margin-bottom:16px}.lm-master .wiz-foot{flex-wrap:wrap}.lm-master .wiz-foot .lm-actions{margin-left:auto}.lm-master .grid-2{grid-template-columns:1fr;gap:0}.lm-summary-title{margin-top:15px}.lm-money>.input{min-width:100px}}

.lm-master .pager{gap:6px;flex-wrap:nowrap;margin-top:12px}.lm-master .pager-btn{width:34px;min-width:34px;min-height:34px;padding:0;flex:0 0 34px}.lm-master .pager>span{white-space:nowrap;font-size:12px}.sl-chart-row strong small{display:block;font-size:11px;font-weight:400;color:var(--text-secondary)}
/* Source117: approved lead extraction and provenance, within the existing SELYVO palette. */
.lm-contact-heading,.lm-ai-head,.lm-ai-actions{display:flex;align-items:center;justify-content:space-between;gap:16px}.lm-ai-dialog{color:#071c3c;background:#fff;border:1px solid #d6e5ec;border-radius:12px;padding:24px;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;box-shadow:0 16px 56px #071c3c33}.lm-ai-dialog::backdrop{background:#071c3c77}.lm-ai-dialog h2{margin:0;font-size:20px}.lm-ai-dialog .field{margin-top:20px}.lm-ai-dialog .lm-choices{margin-top:20px}.lm-ai-dialog .lm-ai-actions{justify-content:flex-end;margin-top:24px}.lm-ai-dialog textarea{width:100%;resize:vertical}.lm-ai-results{margin-top:20px;max-height:50vh;overflow:auto}.lm-ai-results .frow{align-items:flex-start;border-bottom:1px solid #e1ebf0;padding:12px 0}.lm-ai-results .frow>span{display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}.lm-provenance{display:flex;gap:8px;color:#007c91;align-items:center}.lm-register-result{border:1px solid #c8e4eb;border-radius:8px;background:#edf8fb;padding:16px;margin-top:12px}.lm-register-result p{color:#627587}.lm-contact-heading .form-title{margin:0}.lm-contact-heading{margin-bottom:20px}@media(max-width:600px){.lm-contact-heading{align-items:flex-start;flex-direction:column}.lm-ai-dialog{padding:18px}}

/* Source117: customer profile action menu uses the shared account-menu appearance. */
.prof-more{position:relative}.prof-more>summary{list-style:none;cursor:pointer}.prof-more>summary::-webkit-details-marker{display:none}.prof-more>.acct-menu{position:absolute;inset:calc(100% + 6px) 0 auto auto;min-width:170px;z-index:25}.hm-weighted{display:block;color:var(--text-secondary);margin-top:5px}

.lm-register-search{margin-top:18px;padding:14px;border:1px solid var(--border);border-radius:6px;background:var(--surface)}.lm-register-search h3{font-size:11px;text-transform:uppercase;letter-spacing:.04em}.lm-register-search .grid-2{margin-top:12px}.lm-register-search .sl-customer-row{width:100%;margin-top:12px;border-color:var(--border)}

/* Category pictures in feeds: keep the caption inside the picture at every card size. */
.fn-picture, .fn-media-pic, .fd-media { position: relative; }
.feed-illustrative { position: absolute; inset-inline: 0; bottom: 0; padding: 5px 10px; background: rgba(7, 28, 60, .82); color: #fff; font-size: 11px; line-height: 1.4; font-weight: 400; text-align: end; pointer-events: none; }

/* Lead discovery keeps the approved shared search and compact option row. */
.lm-search-options{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin:0 0 16px}.lm-search-options .frow{margin:0;display:flex;align-items:center;gap:8px}.lm-search-country{display:flex;align-items:center;gap:8px;min-width:220px;flex:1}.lm-search-country .catpick{min-width:160px;flex:1}.lm-register-search .sl-customer-row span{min-width:0;overflow-wrap:anywhere}

/* Master 2 Nov / NewLeadA: one cascade level per phone view; full-width step bar. */
.lm-master{max-width:1416px;font-size:15px;background:#f2f7fb}
.lm-master .lm-intro h1{font-size:32px;letter-spacing:-.02em}.lm-master .lm-intro p{font-size:15px}
.lm-master .sl-lead-head{width:100%;justify-content:space-between;gap:12px;margin-bottom:18px}
.lm-master .sl-lead-columns{grid-template-columns:minmax(0,1fr) 330px;gap:20px}
.lm-master .lm-steps{gap:4px}.lm-master .lm-step{padding:6px 12px 6px 8px;border-radius:999px;gap:7px}
.lm-master .lm-step b{font-size:13px;font-weight:700}.lm-master .lm-step>span{width:24px;height:24px;font-size:12px;font-weight:800;background:#e3eaf1}
.lm-master .lm-step.active{background:#e7f7fb}.lm-master .lm-step.active>span{background:#007c91}
.lm-master .lm-actions{gap:8px}.lm-master .lm-actions .iconbtn{width:38px;height:38px;border-radius:6px;border-color:#bbcbdb}
.lm-master .lm-actions .lm-next{background:#007c91;border-color:#007c91}
.lm-master .sl-lead-form{border-radius:12px;padding:22px}.lm-master .input{min-height:40px;border-radius:6px}
.lm-master .sl-lead-side{padding-top:0;display:flex;flex-direction:column;gap:14px}
.lm-master .lm-summary{padding:18px;border-radius:12px}.lm-master .lm-summary-title{margin-bottom:10px}
.lm-master .lm-summary-title h2{font-size:16px;letter-spacing:0;text-transform:none;font-weight:800;color:#071c3c}
.lm-master .lm-summary-title>.chip{background:#eef2f6;color:#4a6282;font-size:12px;padding:3px 12px}
.lm-master .lm-summary dl,.lm-master .lm-phone-summary dl{grid-template-columns:92px minmax(0,1fr);gap:0 12px}
.lm-master .lm-summary dt,.lm-master .lm-summary dd,.lm-master .lm-phone-summary dt,.lm-master .lm-phone-summary dd{padding:10px 0;border-top:1px solid #dce6ef}
.lm-master .lm-summary dt{font-size:13px}.lm-master .lm-summary dd{font-size:14px;font-weight:400}
.lm-kind{display:inline-block;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:700;background:#eef2f6;color:#4a6282}
.lm-kind-YOUR{background:#f4fbe7;color:#507b0d}.lm-kind-BUYING{background:#e7f7fb;color:#005e6e}.lm-kind-NOT_BUYING{background:#fdf3e0;color:#8a5a00}.lm-kind-OFF_PLATFORM{background:#fff1e6;color:#8a3a00}.lm-kind-PROSPECT{background:#f1eefa;color:#4b3a8f}
.lm-kind-effect{display:block;color:#4a6282;font-size:12px;margin-top:6px;font-weight:400}
.lm-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start;margin:14px 0 18px}
.lm-subdoors{gap:12px}.lm-door{display:flex;flex-direction:column;gap:8px;min-width:0;width:100%;padding:16px;text-align:start;background:#fff;color:#071c3c;border:1px solid #dce6ef;border-radius:12px;cursor:pointer}
.lm-door strong{font-size:16px;font-weight:800}.lm-door>span:not(.lm-door-icon){font-size:13px}.lm-door small{font-size:12px;color:#4a6282;line-height:1.5}
.lm-door[aria-pressed=true]{border:2px solid #009bb4;padding:15px;background:#f2fbfd;box-shadow:0 6px 18px #007c911f}
.lm-door:disabled{cursor:default;opacity:1}.lm-door:focus-visible,.lm-path button:focus-visible,.lm-path a:focus-visible{outline:3px solid #007c91;outline-offset:3px}
.lm-door-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#e7f7fb;color:#007c91;flex:none}
.lm-door-empty{display:block;margin-top:6px}.lm-master .sl-customer-row .avatar img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.lm-door-ai .lm-door-icon{background:#f1eefa;color:#4b3a8f}.lm-count-skeleton{display:inline-block;width:100%;height:28px}
.lm-path{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:16px;font-size:13px}
.lm-path button,.lm-path a{font:inherit;text-decoration:none;border:0;border-radius:999px;background:#e7f7fb;color:#005e6e;padding:4px 10px;font-weight:700;cursor:pointer}
.lm-path button[aria-current=step],.lm-path a[aria-current=step]{background:#007c91;color:#fff}.lm-path .lm-path-change{background:none;color:#007c91;border-radius:0;margin-left:8px}
.lm-directory-toolbar{display:flex;align-items:end;gap:12px}.lm-directory-search{min-width:0;flex:1}.lm-directory-sort{width:220px;flex:none}
.lm-master #sl-customer-search{min-height:42px;border-radius:8px;padding:8px 12px;font-size:15px}
.lm-directory-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}.lm-directory-filters .lm-choice{font-size:13px!important;padding:5px 12px;color:#071c3c}
.lm-directory-filters .lm-choice[aria-pressed=true]{background:#007c91;color:#fff;border-color:#007c91}.lm-directory-filters .lm-choice span{margin-left:5px}
.lm-master .sl-customer-results{display:flex;flex-direction:column;gap:8px;border:0;padding:0;margin:12px 0}
.lm-master .sl-customer-row{width:100%;border:1px solid #dce6ef;border-radius:9px;padding:10px 12px;gap:12px;text-align:start}
.lm-master .sl-customer-row[aria-pressed=true]{border:2px solid #009bb4;padding:9px 11px;background:#f2fbfd}
.lm-master .sl-customer-row .avatar{border-radius:50%;font-size:11px}.lm-master .sl-customer-row strong{font-size:14px}.lm-business-name{flex:1;min-width:0;overflow-wrap:anywhere}
.lm-master .sl-customer-row small{color:#4a6282}.lm-selected-business{margin:12px 0}
.lm-directory-paging{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:#4a6282}
.lm-master .lm-directory-paging .pager{margin-top:0;gap:6px}.lm-master .lm-directory-paging .pager-btn{width:32px;min-width:32px;min-height:32px;border-radius:6px}
.lm-directory-links,.lm-fill-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:18px;font-size:13px}
.lm-fill-row{border-top:1px solid #dce6ef;padding-top:16px;color:#4a6282}.lm-own-matches{margin-top:18px}.lm-own-matches .sl-customer-row{margin-top:8px}
.lm-purchasing-choice{background:#eef6fb;border:1px solid #b9e4ee;color:#005e6e;border-radius:9px;padding:10px 12px;margin-top:16px}
.lm-purchasing-choice>p{margin:0 0 10px;font-size:14px}.lm-purchasing-choice .frow{display:flex;gap:10px;align-items:flex-start}.lm-purchasing-choice input{margin-top:4px;flex:none}
.lm-active-cases{background:#fff7e6;border-color:#f2d9a6;color:#6b4a00;border-radius:9px}
.lm-master .lm-business-fields{background:#fff;border:0;padding:0;margin-top:18px}.lm-master .lm-business-fields .grid-2{gap:12px}
.lm-master .lm-choice:disabled{cursor:default;background:#f4f6f8;color:#6c7d90;border-color:#dce6ef}
@media(min-width:901px) and (max-width:1250px){.lm-master .lm-step{padding-inline:6px}.lm-master .lm-step b{font-size:12px}.lm-master .lm-directory-toolbar{flex-wrap:wrap}.lm-master .lm-directory-sort{width:190px}.lm-master .lm-value-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.lm-master .sl-lead-columns{grid-template-columns:minmax(0,1fr)}.lm-master .sl-lead-side{display:none}.lm-master .lm-steps{display:none}.lm-master .lm-mobile-progress{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px}.lm-master .lm-mobile-progress progress{width:100%;height:6px;accent-color:#009bb4}.lm-master .lm-intro{display:block;margin-bottom:14px}.lm-master .lm-intro h1{font-size:20px}.lm-master .lm-intro p{display:none}.lm-master .sl-lead-form{padding:16px}.lm-master .lm-phone-summary{display:block;background:#e7f7fb;border:1px solid #c6e7ee;border-radius:9px;padding:12px;margin-top:20px}.lm-master .lm-desktop-subdoors{display:none}.lm-master .lm-doors{grid-template-columns:1fr;gap:10px}.lm-master .lm-door{padding:11px 12px;display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 10px}.lm-master .lm-door-icon{width:32px;height:32px;grid-row:1/4}.lm-master .lm-door strong{font-size:14px}.lm-master .lm-door>span:not(.lm-door-icon),.lm-master .lm-door small{grid-column:2;font-size:12px}.lm-master .lm-directory-toolbar{flex-wrap:wrap}.lm-master .lm-directory-search{flex-basis:100%}.lm-master .lm-directory-sort{width:100%}.lm-master .lm-path{gap:5px}.lm-master .lm-path button,.lm-master .lm-path a{font-size:12px}.lm-master .wiz-foot{flex-wrap:wrap}.lm-master .lm-actions{margin-left:auto}}
@media(max-width:600px){.lm-master .lm-directory-paging{display:block}.lm-master .lm-directory-paging .pager{justify-content:flex-end;margin-top:10px}.lm-master .lm-value-grid{grid-template-columns:1fr}.lm-master .grid-2{grid-template-columns:1fr}.lm-master .lm-doors{margin-top:10px}.lm-master .wiz-foot .lm-actions{width:100%}.lm-master .wiz-foot .lm-actions>.btn-primary{flex:1}}

/* Master 2 Nov / WR1–WR9: existing page envelope, Feed-width record, full-width sections. */
.wk-side,.wr-body,.wr-side{min-width:0;width:100%}
.wk-side>.card,.wr-body>.card,.wr-side>.card{width:100%;max-width:none;box-sizing:border-box}
.wk-rec-head{flex-wrap:wrap}
.wk-rec-head>.wr-link{margin-left:auto}
.wr-link{color:inherit;text-decoration:none;cursor:pointer}
.wr-link:hover,.wr-link:focus-visible{text-decoration:underline}
.wr-expand{font-size:1em;white-space:nowrap;color:var(--accent-deep)}
.wr-form{display:flex;flex-direction:column;gap:18px;width:100%;min-width:0}
.wr-form-head,.wr-form-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px;width:100%;box-sizing:border-box}
.wr-form-head{padding:0;align-items:flex-start;background:transparent;border:0;box-shadow:none;border-radius:0}
.wr-form-head h1{margin:8px 0;font-size:30px;font-weight:800;line-height:1.5;overflow-wrap:anywhere}
.wr-form-head p{margin:8px 0 0}
/* WorkspaceRecordForm, approved 2 Nov: compact labelled fields and four value controls. */
.wr-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;min-width:0}
.wr-form .field{min-width:0}
.wr-form .field-label{font-size:13px;font-weight:700;line-height:1.5;margin-bottom:4px}
.wr-form .input{height:40px;min-width:0;font-size:14px;border-radius:6px}
/* Multiline notes keep their rows; the compact height belongs to single-line controls. */
.wr-form textarea.input{height:auto}
.wr-form .catpick-btn{height:40px;min-height:40px;padding:0 12px;font-size:14px;border-radius:6px}
.wr-value-fields>.field{justify-content:flex-end}
.wr-form .grid-2{gap:12px;margin-bottom:12px}
.wr-value-fields{display:grid;grid-template-columns:1.2fr .8fr .8fr 1fr;gap:12px;margin-bottom:12px}
.wr-read-value{display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-height:40px;padding:8px 12px;border-radius:6px;background:var(--surface-subtle);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.wr-read-value small{font-size:12px;color:var(--text-secondary)}
@media(max-width:1200px){.wr-value-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.wr-value-fields,.wr-form .grid-2{grid-template-columns:minmax(0,1fr)}}

.wr-form-cols,.rq-cols.od-cols{display:grid;grid-template-columns:minmax(0,1fr) clamp(330px,27vw,410px);gap:var(--space-5);align-items:start}
.wr-body,.wr-side{display:flex;flex-direction:column;gap:14px}
.wr-body.wk-edit{border:0;background:transparent;padding:0;margin:0}
.wr-card{padding:18px;border-radius:12px;min-width:0;box-sizing:border-box}
.wr-card>h2{font-size:16px;font-weight:800;margin:0 0 12px;line-height:1.5}
.wr-card .wk-next{border:0;background:transparent;padding:0;margin:0;width:100%}
.wr-card .wk-activity{margin:0;border:0;padding:0}
.wr-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:12px 0}
.wr-facts>div{min-width:0}
.wr-facts dt{font-size:12px;color:var(--text-secondary);margin-bottom:5px}
.wr-facts dd{font-weight:600;margin:0;overflow-wrap:anywhere}
.wr-save-actions{display:flex;flex-wrap:wrap;gap:10px}.wr-save-actions[hidden]{display:none}
.wr-save-actions .btn{height:38px;min-width:0;padding-inline:16px;font-size:14px}
.wr-form .btn-primary{background:var(--accent-deep);color:var(--text-on-accent)}
.wr-form .btn-primary:hover:not(:disabled){background:#005E6E}
.wr-form-foot{padding:14px 18px;justify-content:flex-end;border-radius:12px}
.wr-form-foot:has(.wr-save-actions[hidden]){display:none}
.wr-documents{padding-left:18px;display:grid;gap:12px}
.wr-placeholder{height:160px}
.wr-loading{display:flex;flex-direction:column;gap:18px;width:100%;min-width:0}
.wr-milestones{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.wr-milestone{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:0 10px;min-width:0}
.wr-milestone:before{content:'';position:absolute;top:12px;height:2px;left:calc(-50% + 13px);right:calc(50% + 13px);background:var(--border)}
.wr-milestone:first-child:before{display:none}
/* WorkspaceRecordForm, 2 Nov: 26px circles, solid completed teal, orange current halo. */
.wr-dot{display:flex;align-items:center;justify-content:center;width:26px;height:26px;box-sizing:border-box;border:2px solid #C9D6E3;border-radius:50%;background:var(--surface);color:var(--text-secondary);font-size:12px;font-weight:800;z-index:1}
.wr-milestone strong{font-size:13px;color:var(--text-secondary)}
.wr-milestone small{display:block;font-size:12px;line-height:16px;color:var(--text-secondary);font-weight:500;overflow-wrap:anywhere}
.wr-milestone--done .wr-dot{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--text-on-accent)}
.wr-milestone--current .wr-dot{background:var(--badge);border-color:var(--badge);color:var(--text-on-accent);box-shadow:0 0 0 4px #FFE8D2}
.wr-milestone--current small{color:#8A3A00;font-weight:700}
.wr-milestone--done strong,.wr-milestone--current strong,.wr-milestone--won strong,.wr-milestone--lost strong{color:var(--text)}
/* Source155: the explicit bright status-colour decision also governs Sales record milestones. */
.wr-milestone--won .wr-dot{background:var(--success-surface);border-color:var(--success);color:var(--success-text)}
.wr-milestone--lost .wr-dot{background:var(--danger-surface);border-color:var(--danger);color:var(--danger-text)}
.wr-milestone--skipped .wr-dot{border-style:dashed;border-color:var(--border-strong);color:#8A9AB0}
@media(max-width:1023px){.wr-form-cols,.rq-cols.od-cols{grid-template-columns:minmax(0,1fr)}.wr-form-head{align-items:flex-start;flex-direction:column}.wr-milestones{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px}.wr-milestone:nth-child(3n+1):before{display:none}}
@media(max-width:560px){.wr-card,.wr-form-foot{padding:18px}.wr-form-head{padding:0}.wr-form-head h1{font-size:24px}.wr-facts{grid-template-columns:minmax(0,1fr)}.wr-milestones{grid-template-columns:repeat(2,minmax(0,1fr))}.wr-milestone:nth-child(3n+1):before{display:block}.wr-milestone:nth-child(2n+1):before{display:none}}

/* Existing invoice full pages share the same record width as Sales and Orders. */
.rq-cols.wr-existing-form{grid-template-columns:minmax(0,1fr) clamp(330px,27vw,410px)}
.wr-existing-form>.rq-main,.wr-existing-form>.rq-side{min-width:0;width:100%}
.wr-existing-form .card,.od-cols .card{width:100%;box-sizing:border-box}
@media(max-width:1023px){.rq-cols.wr-existing-form{grid-template-columns:minmax(0,1fr)}}

/* WR shared full-form actions and bounded received-offer lines.
 * Source159: use the defined app tokens; --line/--muted/--ink/--brand were never
 * defined and invalidated borders, stage connectors and muted labels. */
.wr-head-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px;max-width:50%}
.wr-head-next,.wr-command-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.wr-head-next[hidden]{display:none}
.wr-command-actions:empty{display:none}
.wr-table-scroll{max-width:100%;overflow-x:auto}
.wr-table-scroll .wk-table{width:100%;margin:0}
/* WR5/G36: keep readable columns inside the scroll region on narrow forms. */
.wr-table-scroll .wr-offer-lines-table{min-width:640px}
.wr-offer-lines-table th:nth-child(1){width:40%;white-space:normal;overflow-wrap:anywhere}
.wr-offer-lines-table th:nth-child(2),.wr-offer-lines-table th:nth-child(3),.wr-offer-lines-table th:nth-child(4){width:20%;white-space:normal}
.wr-offer-lines-table tbody th{background:transparent;font-size:inherit;font-weight:600;text-transform:none;letter-spacing:normal}
.wr-offer-lines-table tbody .wk-num{white-space:nowrap}
.wr-table-scroll:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}
.wr-offer-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.wr-line-pages{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
.wr-line-pages>span{font-size:13px;color:var(--text-secondary)}
.ow-lines{list-style:none;padding:0;margin:12px 0;display:grid;gap:12px}
.ow-lines li{padding-bottom:12px;border-bottom:1px solid var(--border)}
.ow-lines li:last-child{border-bottom:0}
.ow-lines strong,.ow-lines span,.ow-lines small{display:block;overflow-wrap:anywhere}
.ow-lines small{color:var(--text-secondary);margin-top:4px}
.ow-placeholder{min-height:56px;margin:16px 0}
.ow-record{width:100%;box-sizing:border-box}
.ow-table tr:focus-visible{outline:2px solid var(--accent-deep);outline-offset:-2px}
@media(max-width:1180px){.ow-table th:nth-child(3),.ow-table td:nth-child(3),.ow-table th:nth-child(5),.ow-table td:nth-child(5){display:none}}
@media(max-width:1023px){.wr-head-actions{max-width:none;align-items:flex-start}.wr-head-next,.wr-command-actions{justify-content:flex-start}}
@media(max-width:560px){.wr-offer-total{align-items:flex-start;flex-direction:column}.wr-table-scroll .wk-table th,.wr-table-scroll .wk-table td{padding:10px 8px}}

/* Source150 / 2-Nov Master RequestSuppliers: the steps span both columns. */
.rq-suppliers-page{--rs-ink:#071C3C;--rs-muted:#4A6282;--rs-line:#DCE6EF;--rs-teal:#007C91;--rs-cyan:#0097B2;--rs-pale:#F2F7FB;color:var(--rs-ink)}
.rq-suppliers-page>.wiz-head{display:flex;align-items:center;justify-content:space-between;width:100%;gap:18px;margin-bottom:20px;grid-column:auto}
.rq-suppliers-page>.wiz-head .steps{flex:1;min-width:0;margin:0}
.rq-suppliers-page>.wiz-head .step-n{width:24px;height:24px;min-width:24px;line-height:24px}
.rq-suppliers-page>.wiz-head .wiz-acts{flex:none}
.rq-suppliers-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.rq-suppliers-grid>.rq-card{margin:0;padding:22px;background:#fff;border:1px solid var(--rs-line);border-radius:12px;min-width:0}
.rq-suppliers-grid .rq-step-body{padding:0}
.rq-suppliers-page .rq-sup-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.rq-suppliers-page .rq-choice{border:1px solid var(--rs-line);border-radius:10px;padding:14px;background:#fff;color:var(--rs-ink)}
.rq-suppliers-page .rq-choice--on{border:2px solid var(--rs-cyan);padding:13px;background:#F7FCFD}
.rq-suppliers-page .field-help{color:var(--rs-muted)}
.rq-suppliers-page .rq-sup-cascade{border-top:1px solid var(--rs-line);padding-top:20px;margin:22px 0}
.rq-suppliers-page .rq-sup-cascade>h3{font-size:17px;margin:0 0 14px;font-weight:800}
.rq-suppliers-page .rq-sup-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rq-suppliers-page .rq-sup-door{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;text-align:left;background:#fff;border:1px solid var(--rs-line);border-radius:12px;font:inherit;color:var(--rs-ink);min-width:0;line-height:1.5;cursor:pointer}
.rq-suppliers-page .rq-sup-door:hover:not(:disabled){border-color:var(--rs-cyan);background:#F7FCFD}
.rq-suppliers-page [data-rqs-action="door:AI"] .rq-sup-door-icon{color:#4B3A8F;background:#F1EEFA}
.rq-suppliers-page .rq-sup-door:focus-visible,.rq-suppliers-page .rq-sup-row-pick:focus-visible,.rq-suppliers-page .rq-sup-filter:focus-visible{outline:3px solid var(--rs-teal);outline-offset:3px}
.rq-suppliers-page .rq-sup-door:disabled{opacity:.65;cursor:default}
.rq-suppliers-page .rq-sup-door>strong{font-size:16px;line-height:1.5;font-weight:800}
.rq-suppliers-page .rq-sup-door>span:not(.rq-sup-door-icon){color:var(--rs-ink);font-size:13px}
.rq-suppliers-page .rq-sup-door>small{font-size:12px;color:var(--rs-muted)}
.rq-suppliers-page .rq-sup-door-icon{width:40px;height:40px;border-radius:10px;background:#E7F7FB;display:grid;place-items:center;color:var(--rs-teal)}
.rq-suppliers-page .rq-sup-path{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px;color:var(--rs-muted);font-size:12px}
.rq-suppliers-page .rq-sup-path-chip{border:1px solid var(--rs-line);border-radius:20px;padding:5px 10px;background:var(--rs-pale);font:inherit;color:var(--rs-teal)}
.rq-suppliers-page .rq-sup-directory-tools{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rq-suppliers-page .rq-sup-directory-tools>.field:first-child{flex:1;min-width:0}
.rq-suppliers-page .rq-sup-directory-tools>.field{margin:0}
.rq-suppliers-page .rq-sup-directory-tools>.field:last-child:not(:first-child){max-width:210px}
.rq-suppliers-page .rq-sup-search{position:relative}
.rq-suppliers-page .rq-sup-search>svg{position:absolute;left:12px;top:13px;color:var(--rs-muted);pointer-events:none}
.rq-suppliers-page .rq-sup-search>.input{height:42px;padding-left:36px;font-size:15px;border-radius:8px}
.rq-suppliers-page .rq-sup-sort{width:210px;flex:none}
.rq-suppliers-page .rq-sup-sort .catpick-btn{height:40px;min-height:40px;font-size:14px}
.rq-suppliers-page .rq-sup-filters{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 14px}
.rq-suppliers-page .rq-sup-filter{border:1px solid var(--rs-line);background:#fff;border-radius:20px;padding:6px 10px;color:var(--rs-muted);font:inherit;font-size:11px;cursor:pointer}
.rq-suppliers-page .rq-sup-filter[aria-pressed=true]{background:#E7F7FB;border-color:var(--rs-cyan);color:var(--rs-teal);font-weight:700}
.rq-suppliers-page .rq-sup-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--rs-line)}
.rq-suppliers-page .rq-sup-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border-bottom:1px solid var(--rs-line);padding:12px 0}
.rq-suppliers-page .rq-sup-row--selected{background:#F7FCFD;box-shadow:inset 3px 0 var(--rs-cyan)}
.rq-suppliers-page .rq-sup-row-pick{flex:1;display:flex;align-items:flex-start;gap:12px;min-width:0;border:0;background:transparent;padding:2px 8px;font:inherit;text-align:left;color:var(--rs-ink);cursor:pointer}
.rq-suppliers-page .rq-sup-row-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.rq-suppliers-page .rq-sup-row-copy>strong{font-size:14px}
.rq-suppliers-page .rq-sup-row-copy>small{font-size:11px;color:var(--rs-muted);overflow-wrap:anywhere}
.rq-suppliers-page .rq-sup-row .avatar{flex:none;width:38px;height:38px;max-width:38px;max-height:38px;border-radius:9px;background:#E7F7FB;color:var(--rs-teal)}
.rq-suppliers-page .rq-sup-row-action{flex:none;margin-right:4px}
.rq-suppliers-page .rq-sup-held{flex-basis:100%;font-size:12px;color:var(--rs-muted);margin:0 8px 0 58px}
.rq-suppliers-page .rq-sup-paging{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;font-size:12px;color:var(--rs-muted)}
.rq-suppliers-page .rq-sup-paging>div{display:flex;gap:6px}
.rq-suppliers-page .rq-sup-cross{display:flex;flex-wrap:wrap;gap:12px;margin-top:15px;font-size:12px}
.rq-suppliers-page .rq-sup-loading>.skeleton{height:74px;margin:8px 0}
.rq-suppliers-page .rq-sup-activation{border:1px solid #F1D8A5;border-radius:10px;padding:14px;background:#FFF9ED;margin-top:16px;font-size:13px}
.rq-suppliers-page .rq-sup-activation .frow{margin:12px 0 0}
.rq-suppliers-page .rq-sup-profile{min-width:0}
.rq-suppliers-page #rq-supplier-profile{width:100%;min-width:0}
.rq-suppliers-page .rq-sup-summary{padding:20px;border-radius:12px;border-color:var(--rs-line);margin:0}
.rq-suppliers-page .rq-sup-summary .panel-title{font-size:17px;margin-bottom:14px}
.rq-suppliers-page .rq-sup-summary-count{font-size:12px;color:var(--rs-teal);font-weight:700;margin:14px 0}
.rq-suppliers-page .rq-sup-invited{list-style:none;padding:0;margin:0 0 14px}
.rq-suppliers-page .rq-sup-invited>li{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:11px 0;border-bottom:1px solid var(--rs-line)}
.rq-suppliers-page .rq-sup-invited>li>span{min-width:0}
.rq-suppliers-page .rq-sup-invited strong{display:block;font-size:13px;overflow-wrap:anywhere}
.rq-suppliers-page .rq-sup-invited small{display:block;font-size:11px;color:var(--rs-muted);margin-top:3px;overflow-wrap:anywhere}
.rq-suppliers-page .rq-sup-invited .iconbtn{flex:none;width:28px;height:28px}
.rq-suppliers-page .rq-sup-register-query{display:flex;align-items:flex-end;gap:12px}
.rq-suppliers-page .rq-sup-register-query>.field{flex:1;min-width:0;margin-bottom:0}
.rq-suppliers-page .rq-sup-register-query>.btn{flex:none}
.rq-suppliers-page .rq-sup-register-results{list-style:none;padding:0;margin:14px 0}
.rq-suppliers-page .rq-sup-register-results li{border:1px solid var(--rs-line);border-radius:8px;padding:12px;margin:7px 0}
.rq-suppliers-page .rq-sup-register-result{background:transparent;border:0;padding:0;color:var(--rs-teal);font:inherit;font-weight:700;text-align:left;cursor:pointer}
.rq-suppliers-page .rq-sup-register-results small{display:block;margin-top:4px;color:var(--rs-muted)}
.rq-suppliers-page .rq-sup-register-loading{height:60px;margin-top:12px}
.rq-suppliers-page .rq-sup-mail-fields{border-top:1px solid var(--rs-line);padding-top:18px;margin-top:18px}
.rq-suppliers-page .rq-sup-mobile-summary{display:none}
@media(max-width:1100px){.rq-suppliers-page .rq-sup-doors{gap:8px}.rq-suppliers-page .rq-sup-door{padding:12px}.rq-suppliers-page>.wiz-head{align-items:flex-start}.rq-suppliers-page>.wiz-head .steps{flex-wrap:wrap;gap:10px}}
@media(max-width:900px){.rq-suppliers-grid{grid-template-columns:minmax(0,1fr)}.rq-suppliers-page>.wiz-head{flex-wrap:wrap}.rq-suppliers-page>.wiz-head .steps{flex-basis:100%}.rq-suppliers-page>.wiz-head .wiz-acts{margin-left:auto}.rq-suppliers-page .rq-sup-doors{grid-template-columns:1fr}.rq-suppliers-page .rq-sup-door{padding:16px}.rq-suppliers-page .rq-sup-side .rq-sup-summary{display:none}.rq-suppliers-page .rq-sup-side .rq-sup-summary--open{display:block}.rq-suppliers-page .rq-sup-mobile-summary{display:flex;width:100%;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--rs-line);border-radius:8px;background:var(--rs-pale);font:inherit;color:var(--rs-teal);font-weight:700;margin:18px 0 0}.rq-suppliers-page .rq-sup-directory-tools{align-items:stretch;flex-direction:column}.rq-suppliers-page .rq-sup-directory-tools>.field:last-child:not(:first-child){max-width:none}.rq-suppliers-page .rq-sup-register-query{flex-direction:column;align-items:stretch}.rq-suppliers-page .rq-sup-row{gap:6px}.rq-suppliers-page .rq-sup-sort{width:100%}.rq-suppliers-page .rq-sup-row-pick{flex-basis:100%}.rq-suppliers-page .rq-sup-row-action{margin-left:58px}.rq-suppliers-grid>.rq-card{padding:18px}}

/* Source151 / RequestSuppliers: recipient outcomes, review and phone navigation. */
.rq-sup-recipient-group{margin:18px 0;padding-top:14px;border-top:1px solid #DCE6EF}
.rq-sup-recipient-group>h3{font-size:13px;font-weight:800;line-height:1.5;margin:0 0 8px;color:#007C91}
.rq-sup-review .rq-sup-recipient-group:first-child{margin-top:0;padding-top:0;border-top:0}
.rq-sup-review .rq-sup-invited{list-style:none;margin:0 0 10px;padding:0}
.rq-sup-review .rq-sup-invited>li{padding:7px 0}
.rq-sup-review .rq-sup-invited strong,.rq-sup-review .rq-sup-invited small{display:block;overflow-wrap:anywhere}
.rq-sup-review .rq-sup-invited strong{font-size:13px}
.rq-sup-review .rq-sup-invited small{font-size:12px;color:var(--text-secondary);margin-top:3px}
.rq-sup-review .field-help{margin:8px 0;line-height:1.6}
.rq-suppliers-page .rq-sup-path-chip{text-decoration:none;cursor:pointer}
.rq-suppliers-page .rq-sup-path-chip[aria-current=page]{font-weight:700}
.rq-suppliers-page .rq-sup-path-chip:focus-visible{outline:3px solid var(--rs-teal);outline-offset:3px}
.rq-sup-phone-progress{display:none}
.rq-sup-mobile-recipients{display:flex;align-items:center;gap:9px;min-width:0}
.rq-sup-initials{display:inline-flex;align-items:center;padding-left:4px}
.rq-sup-initial{display:grid;place-items:center;flex:none;width:29px;height:29px;margin-left:-4px;border:2px solid #fff;border-radius:50%;background:#E7F7FB;color:#007C91;font-size:10px;font-weight:800}
@media(max-width:900px){
 .rq-sup-phone-progress{display:block;margin-bottom:18px}
 .rq-sup-phone-progress>a{display:inline-block;font-size:13px;margin:0 0 14px}
 .rq-sup-phone-progress>p{font-size:14px;font-weight:800;color:var(--rs-ink);margin:0 0 10px}
 .rq-sup-phone-progress>progress{display:block;width:100%;height:4px;border:0;border-radius:4px;background:var(--rs-line);accent-color:var(--rs-cyan)}
 .rq-sup-phone-progress>progress::-webkit-progress-bar{background:var(--rs-line);border-radius:4px}
 .rq-sup-phone-progress>progress::-webkit-progress-value{background:var(--rs-cyan);border-radius:4px}
 .rq-sup-phone-progress>progress::-moz-progress-bar{background:var(--rs-cyan);border-radius:4px}
 .rq-suppliers-page>.wiz-head .steps{display:none}
 .rq-suppliers-page .rq-sup-mobile-summary{gap:12px;text-align:left;font-size:12px}
 .rq-suppliers-page .rq-sup-mobile-summary>span:last-child{margin-left:auto;text-align:right}
 .rq-suppliers-page .rq-sup-paging{flex-wrap:wrap}
}

.rq-sup-initial--own{background:#F4FBE7;color:#507B0D}
[data-request-write-status]>div{min-width:0;width:100%}
.rq-write-review{margin:18px 0;max-width:100%;min-width:0;color:var(--text)}
.rq-write-review-group{margin:10px 0;border:1px solid var(--border);border-radius:8px;background:#fff;overflow:hidden}
.rq-write-review-group>summary{padding:12px 14px;cursor:pointer;font-weight:700;overflow-wrap:anywhere}
.rq-write-review-group>.field-help{margin:0;padding:0 14px 12px}
.rq-write-review-scroll{max-width:100%;overflow-x:auto}
.rq-write-review-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
.rq-write-review-table th,.rq-write-review-table td{padding:10px 12px;text-align:left;vertical-align:top;border-top:1px solid var(--border);overflow-wrap:anywhere;white-space:pre-wrap}
.rq-write-review-table thead th{background:var(--wash,#f5f8fa);font-weight:700}
.rq-write-review-table th:first-child{width:28%}
.rq-write-review-table tr[data-different=true]>td{background:#fff7ed}
.rq-write-review-change{display:block;margin-top:4px;font-size:11px;font-weight:600;color:#8a3a00}
.rq-write-review-table .rt-view,.rq-write-review-table .rt-plain{margin:0;white-space:normal}
.rq-write-review-table .rt-view>:first-child{margin-top:0}
.rq-write-review-table .rt-view>:last-child{margin-bottom:0}
@media(max-width:900px){.rq-write-review-table{min-width:600px}.rq-write-review-group>summary{padding:11px 12px}}
@media(max-width:850px){
 .rq-suppliers-page:not([data-rqs-level=ROOT]) .rq-sup-policy,
 .rq-suppliers-page:not([data-rqs-level=ROOT]) .rq-sup-note,
 .rq-suppliers-page:not([data-rqs-level=ROOT]) .wq-feeds{display:none}
 .rq-suppliers-page:not([data-rqs-level=ROOT]) .rq-sup-cascade{border-top:0;padding-top:0;margin-top:0}
 .rq-suppliers-page:not([data-rqs-level=ROOT]) .rq-sup-cascade>h3{display:none}
}

/* Source155 / Master NL1, NL10, NL15, NL16 and General G36. */
.lm-master .form-title,.lm-master .lm-business-heading h2{font-size:16px;font-weight:800}
.lm-master .lm-actions>.btn-primary{min-height:38px;border-radius:6px;background:#007c91;border-color:#007c91;color:#fff;font-size:14px;font-weight:700}
.lm-master .lm-step[aria-selected=false]:not(:disabled)>span{background:#007c91;color:#fff}
.lm-master .lm-value-grid>#lm-weighted{grid-column:auto}
.lm-master .lm-chips .chip{overflow-wrap:anywhere;min-width:0}
.lm-master .lm-chips button{flex:none;min-width:24px;min-height:24px;border-radius:4px}
.lm-master .lm-chips button:focus-visible{outline:3px solid #007c91;outline-offset:2px}
.lm-draft-review-scroll{max-width:100%;overflow:auto}
.lm-draft-review-scroll table{width:100%;table-layout:fixed;min-width:560px}
.lm-draft-review-scroll th,.lm-draft-review-scroll td{white-space:normal;overflow-wrap:anywhere;vertical-align:top}
.lm-draft-review-scroll th:first-child{width:28%}
.lm-draft-review-scroll [data-changed=true]{background:#fff7e6}
@media(min-width:901px){.lm-master .lm-steps{overflow:visible;flex-wrap:wrap}.lm-master .lm-mobile-progress{display:none}.lm-master .lm-phone-summary{display:none}.lm-master .sl-lead-side{display:flex}.lm-master .sl-lead-columns{grid-template-columns:minmax(0,1fr) 330px;gap:20px}}

/* Source155 · OrdersBehaviour O1/O3/O4, scoped to Orders; shared Master tokens remain authoritative. */
.ow-sidebar{display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--border);margin-bottom:20px}.ow-sidebar .subtabs{margin:0;border:0}.ow-side-description{font-size:13px;color:var(--text-secondary)}.ow-tab-count{margin-left:5px;font-size:12px}.ow-tools{gap:12px;align-items:center}.ow-tools .cat-picker{min-width:160px;max-width:260px}.ow-overdue{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;margin:0 0 18px;border:1px solid #F3D19A;border-radius:8px;background:#FFF6E8;color:#8A5A00;font-size:13px}.ow-overdue .linkbtn{color:inherit;font-weight:700}.ow-row-overdue:not(.wk-row--on){background:#FFFBF5}.ow-late{display:inline-block;margin-left:8px;font-size:12px;font-weight:700;color:#B42318}.ow-starts{display:block;margin-top:8px;color:var(--text-secondary)}
.ow-meter{margin-top:8px;min-width:100px}.ow-meter>span{display:flex;justify-content:space-between;gap:12px;color:var(--text-secondary);font-size:11px}.ow-meter>span strong{font-weight:600}.ow-meter-bar{display:block;appearance:none;-webkit-appearance:none;width:100%;height:4px;border:0;border-radius:3px;overflow:hidden;margin-top:4px;background:#E3EBF2;color:var(--success)}.ow-meter-bar::-webkit-progress-bar{background:#E3EBF2}.ow-meter-bar::-webkit-progress-value{background:var(--success)}.ow-meter-bar::-moz-progress-bar{background:var(--success)}.ow-meter-bar--part{color:#E29600}.ow-meter-bar--part::-webkit-progress-value{background:#E29600}.ow-meter-bar--part::-moz-progress-bar{background:#E29600}
.ow-stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;padding:0;margin:20px 0 8px}.ow-stages li{display:flex;align-items:center;flex-direction:column;gap:4px;text-align:center;font-size:13px;position:relative;min-width:0;color:var(--text-secondary)}.ow-stages li:before{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--border)}.ow-stages li:first-child:before{display:none}.ow-stages li>span{position:relative;display:grid;place-items:center;width:22px;height:22px;box-sizing:border-box;border:1px solid var(--border);border-radius:50%;background:var(--surface);font-size:11px;font-weight:700}.ow-stages .ow-stage-done>span{color:var(--text-on-accent);background:var(--accent-deep);border-color:var(--accent-deep)}.ow-stages .ow-stage-current>span{color:var(--text-on-accent);background:var(--accent-deep);border-color:var(--accent-deep)}.ow-stage-detail{font-size:11px;color:var(--text-secondary);margin:0 0 18px}.ow-record-tabs{display:flex;gap:18px;border-bottom:1px solid var(--border);margin:20px 0 14px}.ow-record-tabs button{border:0;border-bottom:3px solid transparent;background:transparent;padding:10px 0;font:inherit;font-size:13px;font-weight:700;color:var(--text-secondary);cursor:pointer}.ow-record-tabs button[aria-selected=true]{color:var(--accent-deep);border-bottom-color:var(--accent-deep)}.ow-record-tabs button:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
.ow-progress-table{border-collapse:collapse;width:100%;font-size:11px}.ow-progress-table th,.ow-progress-table td{padding:10px 7px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap}.ow-progress-table th:first-child{text-align:left;white-space:normal;min-width:100px}.ow-progress-table thead th{font-size:10px;color:var(--text-secondary);background:#F7FAFC}.ow-progress-table small{display:block;color:#8A5A00;font-size:10px}.ow-progress-table .ow-quantity{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}.ow-quantity-unknown{color:var(--text-secondary)}.ow-quantity-none{color:#4A6282;background:#EEF2F6}.ow-quantity-part{color:#8A5A00;background:#FDF3E0}.ow-quantity-full{color:#0F6B40;background:#E8F7EF}.ow-document-list{list-style:none;padding:0;margin:8px 0 18px;display:grid;gap:12px}.ow-document-list li{padding-bottom:12px;border-bottom:1px solid var(--border);font-size:12px}.ow-document-list strong,.ow-document-list span,.ow-document-list small{display:block}.ow-document-list small{color:var(--text-secondary);margin-top:4px}.ow-record .od-history{border:0;padding:0;box-shadow:none}.ow-invoice-totals{margin:16px 0}.ow-table .org-slot--inline{vertical-align:middle;margin-right:5px}
@media(max-width:1180px){.ow-tools{flex-wrap:wrap}.ow-tools .wk-search{flex-basis:100%}.ow-side-description{display:none}}@media(max-width:600px){.ow-sidebar{align-items:stretch}.ow-sidebar .tab{padding-left:8px;padding-right:8px}.ow-overdue{align-items:flex-start;flex-direction:column}.ow-tools .cat-picker{max-width:none;width:100%}}

.ow-more{position:relative;margin-left:8px}.ow-more summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border);border-radius:6px;color:var(--text);font-weight:700}.ow-more summary::-webkit-details-marker{display:none}.ow-more-menu{position:absolute;z-index:5;right:0;top:38px;display:flex;flex-direction:column;min-width:180px;padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow-menu)}.ow-more-menu .linkbtn{display:block;width:100%;min-height:44px;padding:10px 12px;text-align:left;white-space:nowrap;border-radius:4px}.ow-more-menu .linkbtn:hover,.ow-more-menu .linkbtn:focus-visible{background:var(--accent-surface)}.ow-more-menu .linkbtn:focus-visible,.ow-progress-scroll:focus-visible,.ow-lines-scroll:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}.ow-private-notes .wk-note{display:grid;gap:10px;margin:16px 0}.ow-note-body{white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0 0}

/* Source155 / NewLeadA exact form spacing; prevent legacy .form and field margins adding twice. */
.lm-master .lm-breadcrumb{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:14px;color:#4a6282}
.lm-master .lm-breadcrumb .lm-back{margin:0;font-size:14px}
.lm-master .lm-breadcrumb .lm-back svg{display:none}
.lm-master .lm-breadcrumb-current{display:inline-flex;gap:6px;align-items:center}
.lm-master .lm-intro{margin-bottom:18px}
.lm-master .lm-intro h1{margin:0}
.lm-master .lm-intro p{margin:4px 0 0}
.lm-master .lm-step{gap:8px}
.lm-master .sl-lead-form{gap:16px}
.lm-master .sl-lead-form .form-title{margin:0}
.lm-master .sl-lead-form .field{margin-bottom:0}
.lm-master .sl-lead-form .field-label{margin-bottom:4px}
.lm-master .sl-lead-form .input{padding-inline:12px}
.lm-master .lm-doors,.lm-master .sl-customer-results,.lm-master .lm-directory-filters{margin-block:0}
.lm-master .lm-fill-row{border-top:0;padding-top:0;margin-top:0}
.lm-master .lm-business-fields{margin-top:0}
@media(max-width:900px){.lm-master .lm-breadcrumb-current{display:none}.lm-master .lm-breadcrumb .lm-back svg{display:inline-block}}

/* Source156 / Offers O2 B9: a single live card beneath its selected row on phones. */
.to-customer-mobile-card { display: none; }
@media (max-width:900px) {
  .to-customer-mobile-card { display: block; padding: var(--space-4); border-bottom: 1px solid var(--border); }
  .to-offer-detail { display: none; }
}

.to-role-unavailable { color: var(--text-secondary); background: var(--table-head); border-color: var(--border); }
.to-roles-unavailable .field-error { margin-bottom: var(--space-2); }
.to-role-missing .linkbtn { margin-left: var(--space-2); }

/* Master O4 B5: the page rating is the same form inside the selected record. */
.ow-record .orr-form{width:100%;max-width:none;margin:18px 0;padding:0;border:0;box-shadow:none;background:transparent}
.ow-record .orr-form .form-actions{flex-wrap:wrap}

/* Source159 · shared Master G30/G36 and AccountBehaviour A2 B5.
   A scrolled header must keep its focus ring inside the tab's visible bounds.
   Header menus use the same bottom-sheet boundary at 900px; keep a long
   account/context list scrollable inside its sheet. Other language menus retain
   their own screen's layout. */
.shell .navlinks .navlink:focus-visible { outline-offset: -3px; }
@media (max-width: 900px) {
  .shell #create-menu,
  .shell .acct-menu,
  .shell #lang-host > .lang-menu {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0;
    width: auto; min-width: 0; max-width: none;
    max-height: 75vh; max-height: 75dvh; overflow-y: auto;
    z-index: 80; border-radius: var(--radius-card) var(--radius-card) 0 0;
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }
}

/* Source159 · exact LeadWizard approved steps 2–5. These are local section
   surfaces from that board, independent of global status colours. */
.lm-master .lm-next-fields {
  display: flex; flex-direction: column; gap: 10px; padding: 16px;
  border-radius: 10px; background: #F6F9FC; border: 1px solid var(--border); margin-top: 0;
}
.lm-master .lm-invitation {
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  border-radius: 10px; background: #FFFBF2; border: 1px solid #F1D9A6; margin-top: 0;
}
.lm-master .lm-review-section {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 0;
  border-top: 1px solid var(--border); border-bottom: 0;
}

.lm-master .lm-next-fields > .form-title { margin: 0; }
.lm-master .lm-next-fields .lm-choices { margin: 0; gap: 8px; }
.lm-master .lm-next-fields .lm-choice {
  gap: 6px; height: 36px; padding: 0 14px; color: var(--text);
  font-size: 14px !important; font-weight: 700 !important;
}
.lm-master .lm-next-fields .lm-choice[aria-pressed="true"] {
  background: #EAF7FA; border-color: #0097B2; color: #005E6E;
}
.lm-master .lm-next-fields .lm-choice:disabled {
  background: #F4F6F8; border-color: var(--border); color: #6C7D90;
}
.lm-master .lm-next-fields .field-help { margin: 0; }
.lm-master .lm-review-section h3 { margin: 0; font-size: 15px; }
.lm-master .lm-review-section p { margin: 0; font-size: 14px; }
.lm-master .lm-review-section .linkbtn { font-size: 14px; font-weight: 700; }
.lm-master .lm-invitation h3 { margin: 0; font-size: 16px; font-weight: 800; }
.lm-master .lm-invitation > p { margin: 0; font-size: 14px; color: var(--text-secondary); }

/* Source160 O2: Master four-card structure. Raster-only exact amber token/native geometry remain verification gates. */
.ow-measures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
.ow-measure{padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.ow-measure-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.ow-measure-head h3{margin:0;font-size:var(--label-size);font-weight:750;color:var(--text-secondary)}
.ow-measure-head>span{display:inline-flex;color:var(--accent-deep)}
.ow-measure-value{font-size:28px;line-height:34px;font-weight:800;letter-spacing:-.7px}
.ow-measure-line{font-size:var(--micro-size);line-height:var(--micro-lh);color:var(--text-secondary)}
.ow-measure--amber{border-color:var(--warning);background:var(--warning-surface)}
.ow-measures-note,.ow-measure-warning{margin:var(--space-2) 0 var(--space-4);font-size:var(--micro-size);line-height:var(--micro-lh);color:var(--text-secondary)}
.ow-measures-state{margin:0 0 var(--space-4);display:flex;align-items:center;gap:var(--space-3);min-height:118px}
.ow-measures-state p{margin:0;color:var(--text-secondary)}
@media(max-width:1023px){.ow-measures{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.ow-measures{grid-template-columns:minmax(0,1fr)}.ow-measures-state{align-items:flex-start;flex-direction:column}}

/* Source161: NewLeadA cascade and phone header; LeadWizard contact/scope controls.
   Geometry is scoped to the lead: 40px business fields, 44px subsequent fields. */
.lm-door-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;width:100%}
.lm-door-kind{display:inline-flex;align-items:center;padding:3px 12px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.5;white-space:normal}
.lm-row-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap;flex:none}
.lm-row-badge--active{background:#fdf3e0;color:#8a5a00}.lm-row-badge--followed{background:#e7f7fb;color:#005e6e}
.lm-master .lm-directory-toolbar{align-items:center}.lm-master[data-lm-step=business] .catpick-btn .catpick-name{font-weight:400}
.lm-master:not([data-lm-step=business]) .sl-lead-form .input{min-height:44px;padding:0 12px;font-size:15px}
.lm-master:not([data-lm-step=business]) .sl-lead-form textarea.input{padding:10px 12px}
.lm-master:not([data-lm-step=business]) .sl-lead-form .field-label{font-size:14px;margin-bottom:6px}
.lm-master:not([data-lm-step=business]) .sl-lead-form .catpick-btn .catpick-name{font-weight:600}
.lm-master:not([data-lm-step=business]) .grid-2{gap:14px;align-items:start}
.lm-master .lm-value-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr);gap:14px;align-items:start}
.lm-master .lm-money{gap:8px}.lm-intro-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.lm-phone-step{display:none}
@media(max-width:900px){
 .lm-master .lm-phone-step{display:block;font-size:12px;color:#4a6282;text-align:right;line-height:1.5}
 .lm-master .lm-intro h1{margin:0}.lm-master .lm-intro{margin-bottom:10px}
 .lm-master .lm-door>span.lm-door-head{width:auto;grid-row:1/4;grid-column:1}.lm-master .lm-door-kind{display:none}
 .lm-master .lm-door strong,.lm-master .lm-door>span:not(.lm-door-head),.lm-master .lm-door small{grid-column:2}
 .lm-master .lm-row-badge{white-space:normal;padding:3px 8px;max-width:95px}
 .lm-master .lm-phone-summary{padding:10px 12px;background:#eef6fb;border-color:#b9e4ee;font-size:14px}
 .lm-master .lm-value-grid,.lm-master:not([data-lm-step=business]) .grid-2{grid-template-columns:minmax(0,1fr)}
}

/* Source161 — Master HomeFeedsBehaviour F13: phone actions/settings rise from the bottom. */
@media (max-width: 1023px) {
  .fn-menu.fn-menu--sheet { position: fixed; inset: auto 0 0; z-index: 41; min-width: 0; width: auto; max-height: 88vh; overflow-y: auto; border-radius: 14px 14px 0 0; padding: var(--space-3) var(--space-4) var(--space-6); box-shadow: var(--shadow-dock); }
  .fn-menu-close { display: flex; margin-left: auto; }
  .fn-settings.modal { inset: auto 0 0; transform: none; width: auto; max-width: none; max-height: 88vh; margin: 0; border-radius: 14px 14px 0 0; padding-bottom: max(var(--space-6), env(safe-area-inset-bottom)); }
}

/* Source163 / Master RequestSuppliers phone board, RS15 B1–B2.
 * Desktop cards keep their approved icon tiles. Phone choices are lines. */
.rq-suppliers-page .rq-sup-door-phone,.rq-suppliers-page .rq-sup-door-chevron{display:none}
@media(max-width:900px){
 .rq-sup-desktop-intro{display:none}
 .rq-suppliers-page>.wiz-head{display:none}
 .rq-sup-phone-progress{margin-bottom:16px}
 .rq-sup-phone-progress>a{font-weight:700;margin-bottom:10px}
 .rq-sup-phone-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
 .rq-sup-phone-heading>h1{font-size:20px;line-height:1.3;font-weight:800;margin:0;color:var(--rs-ink)}
 .rq-sup-phone-heading>span{font-size:12px;line-height:1.5;color:var(--rs-muted)}
 .rq-sup-phone-progress>progress{height:6px;background:#E3EAF1;border-radius:999px;accent-color:#009BB4}
 .rq-sup-phone-progress>progress::-webkit-progress-bar{background:#E3EAF1;border-radius:999px}
 .rq-sup-phone-progress>progress::-webkit-progress-value{background:#009BB4;border-radius:999px}
 .rq-sup-phone-progress>progress::-moz-progress-bar{background:#009BB4;border-radius:999px}
 .rq-suppliers-page .rq-sup-doors{gap:10px}
 .rq-suppliers-page .rq-sup-door{display:grid;grid-template-columns:20px minmax(0,1fr) 16px;grid-template-rows:auto auto;align-items:center;gap:0 10px;padding:11px 12px;border-radius:10px}
 .rq-suppliers-page .rq-sup-door>.rq-sup-door-icon{grid-column:1;grid-row:1 / 3;width:20px;height:20px;border-radius:0;background:transparent}
 .rq-suppliers-page .rq-sup-door-icon>svg{width:20px;height:20px}
 .rq-suppliers-page .rq-sup-door>strong{grid-column:2;grid-row:1;font-size:14px;line-height:1.5}
 .rq-suppliers-page .rq-sup-door>.rq-sup-door-help,.rq-suppliers-page .rq-sup-door>.rq-sup-door-hint{display:none}
 .rq-suppliers-page .rq-sup-door>span.rq-sup-door-phone{display:block;grid-column:2;grid-row:2;font-size:12px;line-height:1.5;color:var(--rs-muted);overflow-wrap:anywhere}
 .rq-suppliers-page .rq-sup-door>.rq-sup-door-chevron{display:block;grid-column:3;grid-row:1 / 3;width:16px;height:16px;color:var(--rs-muted)}
 .rq-suppliers-page .rq-sup-door:disabled>.rq-sup-door-chevron{visibility:hidden}
 .rq-suppliers-page .rq-sup-mobile-summary{padding:10px 0;border:0;border-radius:0;background:#fff;gap:8px;font-size:13px;color:var(--rs-ink)}
 .rq-suppliers-page .rq-sup-mobile-summary>span:last-child{color:var(--rs-teal)}
 .rq-suppliers-page .rq-sup-initial{box-sizing:content-box;width:24px;height:24px;font-size:10px;margin-left:-5px}
 .rq-suppliers-page .rq-sup-mobile-recipients{gap:8px;flex-wrap:wrap}
 .rq-suppliers-page:not([data-rqs-level=ROOT]) .rq-sup-policy,
 .rq-suppliers-page:not([data-rqs-level=ROOT]) .rq-sup-note,
 .rq-suppliers-page:not([data-rqs-level=ROOT]) .wq-feeds{display:none}
 .rq-suppliers-page:not([data-rqs-level=ROOT]) .rq-sup-cascade{border-top:0;padding-top:0;margin-top:0}
 .rq-suppliers-page:not([data-rqs-level=ROOT]) .rq-sup-cascade>h3{display:none}
}

.rq-sup-phone-action{display:none}
@media(max-width:900px){
 .rq-suppliers-page .wiz-foot .wiz-acts{width:100%;gap:8px}
 .rq-suppliers-page .wiz-foot .wiz-ico{width:38px;height:38px;border-radius:6px}
 .rq-suppliers-page .wiz-foot .wiz-ico--next{flex:1;min-width:0;padding:0 10px;background:#007C91;border-color:#007C91}
 .rq-suppliers-page .wiz-foot .wiz-ico--next>svg{display:none}
 .rq-suppliers-page .rq-sup-phone-action{display:inline;font-family:var(--font-ui);font-size:14px;font-weight:700;line-height:1.3}
 .rq-suppliers-page .rq-step-body{gap:12px}
 .rq-suppliers-page .wiz-foot{margin-top:8px;padding-top:8px}
}

.rq-sup-phone-screen-title{display:none}
@media(max-width:900px){.rq-suppliers-page .rq-sup-phone-screen-title{display:block;margin:0 0 12px;font-size:15px;line-height:1.5;font-weight:800;color:var(--rs-ink)}}

/* Source163: the shared phone header keeps every control inside a 320px viewport.
   Let the existing compact icon targets give up spare width, keeping 44px height,
   the 28px brand, labelled currency/language controls and the 16px page gutters. */
@media (max-width: 389px) {
  .shell-row--top { gap: 4px; }
  .shell-row--top .shell-actions { min-width: 0; }
  .shell-row--top .shell-actions .iconbtn:not(.lang-btn) { flex-shrink: 1; min-width: 24px; padding-inline: 0; }
  .shell-row--top .shell-actions .navlink { gap: 4px; }
  .shell-row--top #account .avatar { max-width: 100%; height: auto; aspect-ratio: 1; }
}
@media (max-width: 359px) {
  .shell-row--top .shell-actions .navlink { gap: 2px; }
  .shell-row--top .lang-btn { padding-inline: 0; }
}

/* Source165 / RS8 and G36: invitation country and language use shared picker controls;
   their phone menu is a labelled, dismissible sheet, scoped to this form. */
.rq-sup-mail-picker .rq-sup-picker-head{display:none}
@media(max-width:900px){
 .rq-sup-mail-picker .catpick-panel{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;max-height:min(75vh,560px)!important;margin:0!important;overflow:auto!important;box-sizing:border-box;border-radius:14px 14px 0 0;padding:12px 12px max(12px,env(safe-area-inset-bottom))}
 .rq-sup-mail-picker .catpick-panel .catpick-list{max-height:min(45vh,320px)!important}
 .rq-sup-mail-picker .rq-sup-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 4px 8px;font-size:14px}
 .rq-sup-mail-picker .rq-sup-picker-head .iconbtn{width:44px;height:44px;flex:none}
}
/* Source166: five record stages remain readable at the shared 330px minimum width. */
.ow-record{container-type:inline-size}
.ow-record .ow-stages strong{max-width:100%;font-size:clamp(11px,3.3cqi,13px);line-height:1.4;letter-spacing:-.1px;overflow-wrap:anywhere}
/* Source166: invoice columns retain their approved mapping; only this detail table scrolls. */
.inv-lines .form-title{margin:0;padding:16px 20px;font-size:18px;border-bottom:1px solid var(--border)}
.inv-lines-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.inv-lines-scroll:focus-visible{outline:2px solid var(--accent-deep);outline-offset:-2px}
.inv-lines-table{min-width:660px}
.inv-lines-scroll .inv-line{grid-template-columns:minmax(0,2.4fr) .6fr .9fr .6fr 1fr 1fr;gap:10px;padding:12px 20px}
.inv-lines-scroll .inv-line-head{padding:10px 20px;border-top:0}
.inv-lines-scroll .inv-line>span{min-width:0;grid-column:auto;overflow-wrap:anywhere}
.inv-lines-scroll .inv-line-head>span:first-child{display:block}
.inv-lines-scroll .inv-line>.mr-amount{white-space:nowrap;overflow-wrap:normal}
.inv-lines .inv-totals{padding:14px 20px;column-gap:28px}
.inv-add-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:340px;max-width:calc(100vw - 32px)}
.inv-add-panel .inv-add-menu{position:static;min-width:0;width:100%;max-width:none;box-sizing:border-box}
.inv-add-sheet-head{display:none}
@media(max-width:900px){
 .inv-add-panel{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:160;width:100%;max-width:none;max-height:min(75vh,560px);overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:14px 14px 0 0;padding:12px 12px max(12px,env(safe-area-inset-bottom));box-shadow:var(--shadow);box-sizing:border-box}
 .inv-add-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 4px 8px}
 .inv-add-sheet-head .iconbtn{width:44px;height:44px;flex:none}
 .inv-add-panel .inv-add-menu{border:0;box-shadow:none;padding:0}
 .inv-add-menu [role=menuitem]{min-height:44px}
}
/* Source166: invoice actions wrap within the phone form width (Master G36). */
.inv-detail-head .rq-head-actions{flex-wrap:wrap;max-width:100%}
/* Source166: InvoiceIssued draws line heading, rows and totals to the card edge. */
.inv-lines{padding:0}

/* Source166: listing editor spacing and step controls follow WizardActionsListing. */
#listing-form { min-width: 0; gap: 18px; }
#listing-form > .lst-step-tabs { margin: 0; gap: 26px; flex: none; }
.lst-step-tabs .tab { display: inline-flex; align-items: center; gap: 8px; flex: none; height: auto; min-height: 44px; padding: 12px 2px; font-size: 15px; }
.lst-step-tabs .tab[aria-selected="true"] { font-weight: 800; }
.lst-step-panel { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
#fig-period-panel { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

/* Keep the payment choice fieldset within the listing form on narrow phones. */
#listing-form .paid-when { min-width: 0; }
#listing-form .paid-when-title { max-width: 100%; }
/* Source167: Questionnaire creation menus and editor tabs. */
.qn-create-panel{position:absolute;left:auto;right:0;top:calc(100% + 8px);z-index:60;width:380px;max-width:calc(100vw - 32px)}
.qn-create-panel .qn-new-menu{position:static;min-width:0;width:100%;max-width:none;box-sizing:border-box}
.qn-create-panel [role="menuitem"]{min-height:44px}
.qn-create-sheet-head{display:none}
.qn-list-read{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qn-etabs{max-width:100%;min-width:0;overflow-x:auto;flex-wrap:nowrap}
.qn-etabs [role="tab"]{min-height:44px;flex:none}
@media(max-width:900px){
 .qn-create-panel{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:160;width:100%;max-width:none;max-height:min(75vh,560px);overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:14px 14px 0 0;padding:12px 12px max(12px,env(safe-area-inset-bottom));box-shadow:var(--shadow);box-sizing:border-box}
 .qn-create-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 4px 8px}
 .qn-create-sheet-head .btn{min-width:44px;min-height:44px;flex:none}
 .qn-create-panel .qn-new-menu{border:0;box-shadow:none;padding:0}
}
/* Source167: the approved Expenses status strips; keep Master E11's 1180px/760px layout. */
.ex-status-list > .mr-bar { padding: 4px 16px 0; }
.ex-status-tabs { gap: 2px; min-width: 0; }
.ex-status-tabs .tab { min-height: 44px; padding: 0 10px; font-size: 14px; font-weight: 600; }
.ex-status-tabs .tab[aria-selected="true"] { font-weight: 700; }
.ex-status-tabs .tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -3px; }
.ex-status-panel { min-width: 0; }
.ex-status-panel:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -3px; }
.ex-status-loading { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; }
.ex-status-loading .skeleton { height: 44px; }
/* Source167 — BudgetStatement board spacing, with local keyboard scrolling on narrow screens. */
.bud-table-scroll { max-width: 100%; overflow-x: auto; }
.bud-table-scroll:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.bud-table { min-width: 650px; }
.bud-table th { padding: 10px 12px; font-size: 12px; letter-spacing: .06em; }
.bud-table td { padding: 12px; font-size: 14px; }
.bud-table th:first-child, .bud-table th:last-child { padding: 10px 20px; }
.bud-table td:first-child, .bud-table td:last-child { padding: 12px 20px; }
@media (max-width: 767px) {
  .bud-table { display: table; }
  .bud-table thead { display: table-header-group; }
  .bud-table tbody { display: table-row-group; width: auto; }
  .bud-table tr { display: table-row; width: auto; padding-bottom: 0; }
  .bud-table th, .bud-table td { display: table-cell; width: auto; }
}

/* Source168: approved TimeSheetsApprove/Check status strip and queue geometry. */
.ts-status-list > .mr-bar { padding: 4px 16px 0; }
.ts-status-list .mr-tabs { gap: 2px; }
.ts-status-list [data-tstab] { min-height: 44px; padding: 0 12px; font-size: 14px; }
.ts-status-list [data-tstab]:focus-visible, #ts-queue-panel:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.ts-status-loading { display: grid; gap: 10px; padding: 16px; }
.ts-status-loading .skeleton { min-height: 44px; }
.ts-qcols { grid-template-columns: minmax(0, 1fr) 540px; }
.ts-qgrid.mr-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 64px minmax(0, 1fr); gap: 10px; padding: 14px 16px; }
.ts-qgrid.mr-row-head { padding: 10px 16px; }
@media (max-width: 1180px) { .ts-qcols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .ts-qgrid.mr-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Preserve all day columns locally, and keep long money values inside phone cards. */
.ts-days { overflow-x: auto; }
.ts-days:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.ts-days-row { grid-template-columns: 92px 48px minmax(0, 1fr); min-width: 400px; }
@media (max-width: 600px) {
  .ts-record .pl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-record .pl-tile:last-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .ts-qcols .pl-rec-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ts-qcols .ts-acts .btn { max-width: 100%; white-space: normal; height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 10px; overflow-wrap: anywhere; }
}

/* Source168: Membership keeps its approved charge columns and editable controls. */
#mbr-view { min-width: 0; }
#mbr-read-status .notice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mbr-chargedcard { padding: 18px 20px 0; overflow: hidden; }
.mbr-chargedcard .mbr-charge-scroll { margin: 10px -20px 0; overflow-x: auto; }
.mbr-charge-scroll:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.mbr-charge-scroll .mbr-table { display: table; width: 100%; min-width: 680px; border-collapse: collapse; }
.mbr-charge-scroll .mbr-table thead { display: table-header-group; }
.mbr-charge-scroll .mbr-table tbody { display: table-row-group; }
.mbr-charge-scroll .mbr-table tr { display: table-row; padding: 0; border: 0; }
.mbr-charge-scroll .mbr-table th, .mbr-charge-scroll .mbr-table td { display: table-cell; width: auto; grid-column: auto; grid-row: auto; }
.mbr-charge-scroll .mbr-table th { padding: 10px 8px; font-size: 12px; letter-spacing: .05em; }
.mbr-charge-scroll .mbr-table td { padding: 9px 8px; font-size: 14px; border-bottom: 1px solid var(--border); }
.mbr-charge-scroll .mbr-table th:first-child, .mbr-charge-scroll .mbr-table td:first-child { padding-left: 20px; }
.mbr-charge-scroll .mbr-table th:last-child, .mbr-charge-scroll .mbr-table td:last-child { padding-right: 20px; text-align: right; }
.mbr-charge-scroll .mbr-table td:nth-child(4) { text-align: left; }
.mbr-charge-scroll .mbr-table .mbr-gap td { background: var(--surface-subtle); }
@media (max-width: 900px) {
  .mbr-sum { grid-template-columns: minmax(0, 1fr); }
  .mbr-line { flex-direction: column; }
  .mbr-pt { flex-basis: auto; padding: 0 0 var(--space-4) 36px; }
  .mbr-pt::before { top: 11px; bottom: -11px; left: 9px; right: auto; width: 4px; height: auto; }
  .mbr-pt:first-child::before { left: 9px; top: 11px; }
  .mbr-pt--today { padding-bottom: 0; }
  .mbr-pt--today::before { top: 23px; bottom: auto; left: 9px; right: auto; width: 4px; height: 12px; min-width: 0; }
  .mbr-pt--gap::before { background: repeating-linear-gradient(180deg, var(--border-strong) 0 8px, transparent 8px 12px); }
  .mbr-rule { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mbr-wayrow { flex-wrap: wrap; }
  .mbr-waytext { flex: 1 1 0; }
  .mbr-wayside { width: 100%; padding-left: 32px; }
  .mbr-consent, .mbr-cardform { margin-left: 0; }
  .mbr-banner-btn { width: 100%; }
}

/* Source168 — approved Partners tabs and wide list containment (Account A7, G8/G30/G36). */
.par-tabs { gap: 22px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
.par-tabs .tab { flex: none; min-height: 44px; padding: 10px 2px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.par-list .mr-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
.par-list .mr-tabs .tab { flex: none; min-height: 44px; white-space: nowrap; }
.par-list #par-results { max-width: 100%; overflow-x: auto; outline-offset: 2px; }
.par-list #par-results:focus-visible { outline: var(--focus-ring); }
.par-list .mr-row.par-cols { display: grid; grid-template-columns: minmax(180px, 2.2fr) minmax(160px, 1.5fr) minmax(160px, 1.6fr) 90px 180px; min-width: 920px; }
.par-list .mr-row.par-cols3 { display: grid; grid-template-columns: minmax(220px, 2.2fr) minmax(190px, 1.4fr) 100px 220px; min-width: 820px; }
.par-list .par-who, .par-list .par-acts { grid-column: auto; }
.par-list .par-acts { justify-content: flex-end; gap: 12px; }
.par-list .par-who { gap: 10px; }
.par-list .par-av { width: 40px; height: 40px; border-radius: 10px; font-size: 13px; }
.par-list .par-placeholder { display: block; min-width: 0; }
.par-list .par-placeholder .skeleton { height: 40px; }
.par-list .par-pager { min-width: 280px; flex-wrap: wrap; }
.par-list .mr-foot { min-width: 280px; }
@media (max-width: 900px) {
  .par-list .par-acts .linkbtn { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Source169 — preserve the approved product columns inside a named local scroll. */
.to-product-scroll { position: relative; max-width: 100%; }
.to-product-scroll [role="cell"] { min-width: 0; overflow-wrap: anywhere; }
.to-product-scroll:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.to-product-placeholder { height: 44px; margin: 8px 0; }
.to-wiz-panel .to-plist li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.to-wiz-panel .to-plist li > .btn { flex: none; min-height: 44px; }
.to-wiz .to-panel-pager .iconbtn, .to-product-scroll .iconbtn { min-width: 44px; min-height: 44px; }
#to-cost-summary .to-budget-box { flex-wrap: wrap; }
.to-wiz-main .inline-row:has(#to-date) { flex-wrap: wrap; align-items: flex-start; }
.to-wiz-main .inline-row:has(#to-date) > .field { flex: 1 1 180px; min-width: 0; }
.to-wiz-main .inline-row:has(#to-date) .dp-text { white-space: nowrap; }
.to-wiz .wiz-foot .wiz-acts { max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }
/* Source169: approved AI usage columns and controls remain usable through the phone breakpoint. */
#aia-view { min-width: 0; }
.aia-model, .mai-choice { gap: 12px; padding: 12px 14px; min-height: 44px; overflow-wrap: anywhere; }
.aia-model > span, .mai-choice > span { min-width: 0; }
.aia-usage-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; margin-bottom: var(--space-3); }
.aia-usage-scroll:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.aia-usage-scroll .aia-table { display: table; width: 100%; min-width: 650px; margin: 0; border-collapse: collapse; font-size: 14px; }
.aia-usage-scroll .aia-table thead { display: table-header-group; }
.aia-usage-scroll .aia-table tbody { display: table-row-group; }
.aia-usage-scroll .aia-table tr { display: table-row; padding: 0; width: auto; border: 0; }
.aia-usage-scroll .aia-table th, .aia-usage-scroll .aia-table td { display: table-cell; width: auto; padding: 10px; vertical-align: top; text-align: left; }
.aia-usage-scroll .aia-table th { font-size: 13px; font-weight: 700; color: var(--text); }
.aia-usage-scroll .aia-table td { border-top: 1px solid var(--border); }
.aia-usage-scroll .aia-table td::before { display: none; content: none; }
.aia-usage-scroll .aia-table .num { text-align: right; font-weight: inherit; }
.aia-usage-scroll .aia-table th.num { font-weight: 700; }
.aia-usage-scroll .aia-table td:first-child { white-space: nowrap; }
.aia-pager > .btn, .aia-effort-back { min-height: 44px; white-space: normal; }
@media (max-width: 900px) {
  #aia-view .mai-groups { grid-template-columns: minmax(0, 1fr); }
  .aia-pager { align-items: stretch; }
  .aia-pager > .field-help { flex-basis: 100%; order: 1; }
}

/* Source169: Activity keeps recorded facts readable at every width. */
.act-panel { min-width:0; }
.act-tabs { flex-wrap:wrap; }
.act-tabs .tab { min-height:44px; white-space:normal; overflow-wrap:anywhere; }
.act-card { min-width:0; max-width:100%; box-sizing:border-box; }
.act-card .audit-list li > span { min-width:0; overflow-wrap:anywhere; }
.act-read-error { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.act-read-error > span { min-width:0; overflow-wrap:anywhere; }
.act-read-error .btn, .act-card .form-actions .btn { min-height:44px; }

@media (max-width:900px) { .act-card .audit-list li { grid-template-columns:1fr; } }
.act-read-error { margin-bottom:16px; }

/* Source170: approved ListingPage purchase-column geometry and contained detail controls. */
.det-listing-layout { grid-template-columns:minmax(0,1fr) 560px; gap:22px; }
.det-listing-layout > * { min-width:0; max-width:100%; }
.det-listing-layout .gallery { gap:16px; }
.det-listing-layout .buy { gap:12px; }
.det-listing-layout .detail-title { font-size:34px; line-height:1.5; font-weight:800; overflow-wrap:anywhere; }
.det-listing-layout .meta, .det-listing-layout .meta-stack, .detail-panel { min-width:0; overflow-wrap:anywhere; }
.det-tabs { max-width:100%; overflow-x:auto; }
.det-tabs .tab { min-height:44px; flex-shrink:0; }
.det-read-retry { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.det-read-retry .btn { min-height:44px; }
@media (max-width:1023px) { .det-listing-layout { grid-template-columns:minmax(0,1fr); } }

/* Source170: basket and checkout facts remain readable on narrow screens. */
.bco-loading, .cart-loading { display:flex; flex-direction:column; gap:12px; }
.bco-read-notice, .basket-read-notice { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.bco-read-notice > div, .basket-read-notice > div { flex:1 1 180px; min-width:0; overflow-wrap:anywhere; }
.bco-orders, .bco-sum, .bco-part, .bco-part > div { min-width:0; }
.bco-part strong, .bco-part .field-help, .bco-sum .summary-money, .cart-line > div:first-child, .cart-why > div, .cart-svcmain { overflow-wrap:anywhere; }
.bco-instead { min-height:44px; }
.cart-svcacts .btn-sm { height:auto; min-height:44px; white-space:normal; }
.basket-read-notice .btn, .bco-read-notice .btn { min-height:44px; }
@media(max-width:600px) {
 .bco-part { flex-wrap:wrap; }
 .bco-amount { max-width:100%; white-space:normal; overflow-wrap:anywhere; margin-left:auto; }
 .bco-sum .summary-money { flex-wrap:wrap; }
 .bco-sum .summary-money > :last-child { margin-left:auto; max-width:100%; overflow-wrap:anywhere; }
 .cart-sums .cart-subtotal { flex-wrap:wrap; gap:8px; }
 .cart-sums .cart-subtotal > :last-child { margin-left:auto; max-width:100%; overflow-wrap:anywhere; white-space:normal; }
}

.cart-why > span { min-width:0; overflow-wrap:anywhere; }

.cart-checkout { flex-shrink:0; min-height:var(--commerce-h); }

/* Source170: LeaveClose board rows and contained account confirmation controls. */
.lvc-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:14px; padding:14px 0; }
.lvc-icon { width:44px; height:44px; border-radius:10px; }
.lvc-icon svg { width:22px; height:22px; }
.lvc-card { min-width:0; max-width:100%; box-sizing:border-box; overflow-wrap:anywhere; }
.lvc-card .field, .lvc-card .field-label { min-width:0; white-space:normal; overflow-wrap:anywhere; }
.lvc-main, .lvc-name, .lvc-card .field-help, .lvc-card .notice, .lvc-card .form-title { min-width:0; overflow-wrap:anywhere; }
.lvc-card .notice > div, .lvc-ask { min-width:0; }
.lvc-card .btn, .lvc-card .linkbtn { min-height:44px; }
.lvc-card .btn { height:auto; white-space:normal; overflow-wrap:anywhere; }
.lvc-card .form-actions { flex-wrap:wrap; }
.lvc-mbx .lvc-dl { white-space:normal; }
.lvc-dl { display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; }
.lvc-dl > svg { flex:none; }
.lvc-read-error { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.lvc-placeholders { display:flex; flex-direction:column; gap:14px; }
.lvc-placeholders .skeleton { height:44px; }
@media (max-width:900px) {
  .lvc-row { grid-template-columns:44px minmax(0,1fr); }
  .lvc-row > .btn { grid-column:2; justify-self:start; }
  .lvc-card .form-actions > .btn { max-width:100%; }
}

/* Source171: HomeByRole heading and contained keyboard/recovery controls. */
.hm-title { font-size:26px; line-height:32px; font-weight:800; letter-spacing:-.02em; }
.hm, .hm-pref, .hm-head > div, .hm-tools, .hm-style-wrap, .hm-choice > span { min-width:0; max-width:100%; box-sizing:border-box; }
.hm, .hm-pref { overflow-wrap:anywhere; }
.hm .btn, .hm .linkbtn, .hm-style, .hm-opt, .hm-pref .btn { min-height:44px; }
.hm .btn, .hm-pref .btn { height:auto; white-space:normal; }
.hm-style-menu { max-width:calc(100vw - 24px); box-sizing:border-box; max-height:calc(100dvh - 24px); overflow-y:auto; }
.hm-style-menu--sheet { max-width:100%; }
.hm-read-status { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; grid-column:1 / -1; }
.hm-read-status > span { min-width:0; overflow-wrap:anywhere; }
.hm-style-menu .hm-style-note .linkbtn { white-space:normal; }
.hm-pref .tick-save { flex-wrap:wrap; }
.hm-pref .hm-choice, .hm .hm-w, .hm .hm-card { overflow-wrap:anywhere; min-width:0; }

.hm .wk-seg > button { min-height:44px; white-space:nowrap; }
.hm-filter { flex-shrink:0; max-width:100%; }
.hm-net-tools { flex-wrap:wrap; }
@media (max-width:767px) {
  .hm-tbl > .hm-panel-head { flex-wrap:wrap; }
  .hm-tbl > .hm-panel-head > div:first-child { flex:1 1 100%; }
  .hm .home-cards .hc-empty { flex-direction:column; align-items:flex-start; }
  .hm .home-cards .hc-title { white-space:normal; overflow:visible; text-overflow:clip; }
  .hm .home-cards .hc-head { align-items:flex-start; }
}

/* Source171: contained, keyboard-accessible personal preference cards. */
.acct-pref-card { min-width:0; max-width:100%; box-sizing:border-box; overflow-wrap:anywhere; }
.acct-pref-card .field-help, .acct-pref-card .choice-text, .acct-pref-card .frow > span, .acct-pref-card .notice > div { min-width:0; overflow-wrap:anywhere; white-space:normal; }
.acct-pref-card .acct-mc-choice, #notifications-panel .frow { min-height:44px; box-sizing:border-box; }
.acct-pref-card .acct-mc-choice input, #notifications-panel .frow input { flex:none; }
.acct-pref-card .frow .field-help { display:block; margin-top:4px; }
.acct-pref-card .btn { min-height:44px; height:auto; white-space:normal; overflow-wrap:anywhere; }
.acct-pref-notice { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.acct-pref-card h2:focus { outline:2px solid var(--accent); outline-offset:4px; }

/* Source171: MailboxMine geometry and contained keyboard/pointer controls. */
.mbx-tiles { gap:14px; }
.mbx-name-cols { gap:18px; }
#mbx-region, .mbx-cols, .mbx-side, .mbx-card, .mbx-top, .mbx-points, .mbx-dialog { min-width:0; max-width:100%; box-sizing:border-box; overflow-wrap:anywhere; }
.mbx-choice > span, .mbx-pw > div, .mbx-top-addr, .mbx-tile > strong { min-width:0; overflow-wrap:anywhere; }
.mbx-address { overflow-wrap:anywhere; }
#mbx-region .btn, #mbx-region .linkbtn, .mbx-choice { min-height:44px; }
#mbx-region .btn { height:auto; white-space:normal; overflow-wrap:anywhere; }
.mbx-dialog { max-width:calc(100vw - 2rem); max-height:calc(100dvh - 2rem); overflow-y:auto; }
.mbx-dialog .form-title, .mbx-dialog .field-label { white-space:normal; overflow-wrap:anywhere; }
.mbx-dialog .form-actions { flex-wrap:wrap; }
.mbx-read-error { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
@media (max-width:700px) { .mbx-copy, .mbx-open, .mbx-del-btn { max-width:100%; } .mbx-dialog .form-actions > .btn { flex:1 1 auto; } }

/* Source172 — Customers and Suppliers keep readable controls and long names at narrow widths. */
.directory-shell { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.directory-shell:focus { outline: 2px solid var(--accent); outline-offset: 4px; }
.directory-shell .directory-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0; }
.directory-shell .sup-card { padding: 18px; gap: 10px; }
.directory-shell .sup-id .sup-name { font-size: 16px; font-weight: 700; }
.directory-shell .sup-card, .directory-shell .mr-row > span, .directory-shell .sup-id, .directory-shell .sup-stats > span { min-width: 0; overflow-wrap: anywhere; }
.directory-shell .sup-cat { max-width: 100%; overflow-wrap: anywhere; }
.directory-shell .sup-stats, .directory-shell .sup-actions { flex-wrap: wrap; }
.directory-shell .sup-actions .btn { min-width: 0; white-space: normal; }
.directory-shell .btn, .directory-shell .iconbtn, .directory-shell .tab, .directory-shell .sup-block, .directory-shell .cust-catchip { min-height: 44px; }
.directory-shell .save-toggle { min-width: 44px; }
.directory-shell .sup-verified { min-height: 44px; }
.directory-shell .cust-actions .btn { white-space: normal; }
.directory-shell .mr-foot { gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .directory-shell .sup-filters > *, .directory-shell .list-filters > .field { min-width: 0; max-width: 100%; }
  .directory-shell .sup-stats { justify-content: flex-start; }
  .directory-shell .sup-actions .btn { flex-basis: 110px; }
}

@media (max-width: 900px) {
  .directory-shell .cust-row > span:first-child, .directory-shell .sup-cols > .sup-who { grid-column: 1 / -1; }
  .directory-shell .mr-row > span[data-label] { text-align: left; align-content: flex-start; }
  .directory-shell .mr-row > span[data-label]::before { content: attr(data-label); display: block; flex-basis: 100%; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
}

/* Source172 / O19 and G36: long profile names and review text stay in their own region. */
.profile-crumbs > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.provider-panel .review-item { min-width: 0; overflow-wrap: anywhere; }
.profile-read-notice { flex-wrap: wrap; }
.profile-read-notice > span { min-width: 0; overflow-wrap: anywhere; }

/* Source172: Later is a full-sized keyboard and touch action. */
.join-page [data-join="skipbuy"] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Source173: invitation names remain readable at the narrow joining breakpoints. */
.join-invitation-notice { overflow-wrap:anywhere; }

/* Source173: refused Compare commands remain above their offers. */
.cmp-action-error{overflow-wrap:anywhere;scroll-margin-top:24px}
[data-reopen]{min-height:44px}

/* Source174: recipient facts wait for the current authoritative read. */
.to-customer-unconfirmed { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; }
.to-customer-placeholder { display:block; height:44px; width:100%; }
.to-customer-read-state { padding:0 18px; }
.to-customer-unconfirmed .cust-actions { flex-wrap:wrap; }
.to-customer-unconfirmed [role="cell"] { min-width:0; overflow-wrap:anywhere; }
@media(max-width:640px) { .to-customer-unconfirmed { grid-template-columns:minmax(0,1fr); } .to-customer-unconfirmed .cust-actions { justify-content:flex-end; } }

.to-customer-list [data-tocustrm] { min-width:44px; min-height:44px; }