/* ============================================================
   Afranga · Invest - the final flow, 1:1 from the Figma section
   "Invest" (page "🟢 DESIGN", 11 September 2026).
   Tokens from styles.css, cards from savesmart.css. All sizing
   in rem/em (Figma px / 16), BEM naming, no px.
   ============================================================ */

:root {
  --inv-h2: 600 1.5rem/2rem 'Montserrat', sans-serif;        /* H2 */
  --inv-h3: 600 1.25rem/1.75rem 'Montserrat', sans-serif;    /* H3 */
  --inv-label-l: 600 1rem/1.5rem 'Montserrat', sans-serif;   /* Label L */
  --inv-caption: 400 0.75rem/1rem 'Montserrat', sans-serif;  /* Caption (12/16, +0.2 tracking) */
  --inv-warm: #737372;            /* semantic/text-secondary-warm */
  --inv-success: #30c07e;         /* semantic/accent-success */
  --inv-banner-border: #feebd3;   /* peach/200 */
  --inv-badge-bg: #fde0bd;        /* ivory/400 - Badge Warning */
  --inv-badge-text: #331918;      /* coral/900 */
  --inv-tip-bg: #2c2c2c;          /* Tooltip bubble: primary/charcoal */
  --inv-tip-sub: #e3e1de;         /* Tooltip subtitle: neutral/400 */
  --inv-overlay: rgba(33, 33, 33, 0.4);
  --inv-sidebar: 16.5rem;
}

.main--inv { padding: 2.25rem 2.5rem 2.5rem; min-width: 0; }
.main--inv.has-bar { padding-bottom: 8.5rem; }
body.inv-locked { overflow: hidden; }

.inv { max-width: 68.5rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }
.inv > * { min-width: 0; }

/* ---------- page header ---------- */

.inv-header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.inv-header__title { font: var(--display-s); letter-spacing: -0.019rem; }
.inv-header__wallet { display: flex; align-items: center; gap: 0.75rem; }
.inv-header__wallet-label { font: var(--body-m); color: var(--inv-warm); }
.inv-header__wallet-value { font: var(--title-l); }

/* ---------- market tabs ---------- */

.inv-tabs { display: flex; gap: 1.5rem; border-bottom: 0.0625rem solid var(--border); }
.inv-tabs__tab {
  padding-bottom: 0.75rem; margin-bottom: -0.0625rem;
  font: var(--label-m); color: var(--inv-warm);
  border-bottom: 0.125rem solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.inv-tabs__tab:hover { color: var(--text-primary); }
.inv-tabs__tab--on { color: var(--text-primary); border-color: var(--charcoal); }
.inv-tabs__spacer { flex: 1; }
.inv-tabs__link { align-self: flex-start; padding-bottom: 0.75rem; }

/* ---------- filters row (gap 8; selects hug their value; buttons on the right) ---------- */

.inv-filters { display: flex; align-items: center; gap: 0.5rem; }
.inv-filters__spacer { flex: 1; }
.inv-filters__results { font: var(--body-m); color: var(--text-primary); }

/* DS Select 12:74: 40px field, radius 4, 12px padding, 8px to the chevron */
.inv-select {
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: 2.5rem; padding: 0 0.75rem;
  background: var(--white); border: 0.0625rem solid var(--border); border-radius: 0.25rem;
  font: var(--body-m); color: var(--text-primary);
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--t-base) var(--ease);
}
.inv-select svg { width: 1rem; height: 1rem; flex: none; }
.inv-select:hover { border-color: var(--text-muted); }
.inv-select--open { border: 0.125rem solid var(--charcoal); padding: 0 0.6875rem; }
.inv-select-wrap { position: relative; display: inline-flex; }

/* the open list: 240 wide, radius 8, 4px vertical padding, 36px items, radius 4 */
.inv-dd {
  position: absolute; top: calc(100% + 0.375rem); left: 0; z-index: 30;
  display: flex; flex-direction: column;
  min-width: 15rem; width: max-content;
  padding: 0.25rem 0;
  background: var(--white); border: 0.0625rem solid var(--border); border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}
.inv-dd__item {
  display: flex; align-items: center; gap: 0.5rem;
  min-width: 15rem; height: 2.25rem; padding: 0.5rem 0.75rem; border-radius: 0.25rem;
  font: var(--body-m); color: var(--text-primary); text-align: left; white-space: nowrap;
}
.inv-dd__item:hover { background: var(--bg-light); }
.inv-dd__item.is-selected { background: var(--green-bg); }
.inv-dd__check {
  flex: 0 0 auto; width: 1.25rem; height: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0.09375rem solid var(--border); border-radius: 0.25rem; background: var(--white); color: var(--white);
}
.inv-dd__check.is-on { background: var(--charcoal); border-color: var(--charcoal); }
.inv-dd__check svg { width: 0.75rem; height: 0.75rem; }
.inv-dd__tick { flex: 0 0 auto; width: 1rem; height: 1rem; display: inline-flex; color: var(--text-primary); }
.inv-dd__tick svg { width: 1rem; height: 1rem; }

/* Advanced filters: Button Outline Default with the filter icon; active = badge count instead of the icon */
.inv-adv {
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: 2.5rem; padding: 0 1.25rem;
  border: 0.0625rem solid var(--charcoal); border-radius: 0.5rem; background: transparent;
  font: var(--label-m); color: var(--text-primary); white-space: nowrap;
  transition: background var(--t-fast) var(--ease);
}
.inv-adv:hover { background: var(--surface-subtle); }
.inv-adv svg { width: 1rem; height: 1rem; }

/* DS Button Default 40 */
.inv-btn-md {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.5rem; padding: 0 1.25rem; border-radius: 0.5rem;
  font: var(--label-m); white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.inv-btn-md--dark { background: var(--charcoal); color: var(--white); }
.inv-btn-md--dark:hover { background: #1f1f1f; }
.inv-btn-md--primary { background: var(--coral); color: var(--white); }
.inv-btn-md--primary:hover { background: var(--coral-dark); }
.inv-btn-md--tertiary { background: var(--white); border: 0.0625rem solid var(--border); color: var(--text-primary); }
.inv-btn-md--tertiary:hover { background: var(--surface-subtle); }
.inv-btn-md:disabled { background: var(--track); color: var(--text-muted); border-color: transparent; cursor: not-allowed; }

/* ---------- the loans table (cell x on the 1096 card: 16 / 120 / 248 / 385 / 549 / 690 / 778 / 904 / 1023) ---------- */

.inv-table { background: var(--white); border: 0.0625rem solid var(--track); border-radius: 1rem; }
.inv-table__head,
.inv-row__cells {
  display: grid;
  grid-template-columns: 6.5rem 8rem 8.5625rem 10.25rem 8.8125rem 5.5rem 7.875rem 7.4375rem minmax(0, 1fr);
  padding-left: 1rem;
}
.inv-table__head {
  align-items: center; height: 2.75rem;
  background: var(--bg-canvas); border-bottom: 0.0625rem solid var(--border);
  border-radius: 1rem 1rem 0 0;
}
.inv-th { font: var(--overline); letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--inv-warm); white-space: nowrap; }
.inv-th--right { text-align: right; }
.inv-th--action { text-align: right; padding-right: 1rem; }
.inv-table__head > .inv-th:nth-child(7) { padding-right: 2rem; }
.inv-table__head > .inv-th:nth-child(8) { padding-right: 1.8125rem; }
.inv-table__empty { padding: 2.5rem 1rem; text-align: center; font: var(--body-m); color: var(--inv-warm); }

.inv-row {
  border-bottom: 0.0625rem solid var(--border);
  transition: opacity var(--t-base) var(--ease), filter var(--t-base) var(--ease);
}
.inv-row:last-child { border-bottom: 0; }
/* the whole row opens the Loan page; the button keeps its own action */
.inv-row__cells[data-row-link] { cursor: pointer; transition: background var(--t-fast) var(--ease); }
.inv-row__cells[data-row-link]:hover { background: var(--bg-canvas); }
.inv-row:last-child .inv-row__cells[data-row-link] { border-radius: 0 0 1rem 1rem; }
/* every row that is not the open one steps back */
.inv-row--dim { opacity: 0.4; filter: blur(0.1875rem); pointer-events: none; }
.inv-row__cells { align-items: start; }

.inv-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 1.25rem 0; min-width: 0; }
.inv-cell--amount { align-items: flex-end; text-align: right; padding-right: 2rem; }
.inv-cell--available { align-items: flex-end; text-align: right; padding-right: 1.8125rem; }
.inv-cell--action { align-items: flex-end; padding-right: 0.6875rem; }
.inv-cell__text { font: var(--body-m); color: var(--text-primary); white-space: nowrap; }
.inv-cell__strong { font: var(--label-m); color: var(--text-primary); white-space: nowrap; }
.inv-cell__cashback {
  position: relative;
  font: var(--inv-caption); letter-spacing: 0.0125rem; color: var(--green);
  text-decoration: underline dotted; text-underline-offset: 0.1875rem; cursor: help;
}
.inv-cell__logo { height: 1.28rem; width: auto; max-width: 6.5rem; object-fit: contain; object-position: left center; display: block; }
/* "In your order / € N" under the loan id */
.inv-cell__in-order { font: var(--body-m); color: var(--text-primary); white-space: pre-line; }

/* row buttons: Button Secondary Small 32 / Outline Small */
.inv-btn-sm {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2rem; padding: 0 0.75rem; border-radius: 0.5rem;
  font: var(--label-s); white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.inv-btn-sm--dark { background: var(--charcoal); color: var(--white); }
.inv-btn-sm--dark:hover { background: #1f1f1f; }
.inv-btn-sm--outline { border: 0.0625rem solid var(--charcoal); color: var(--text-primary); background: var(--white); }
.inv-btn-sm--outline:hover { background: var(--surface-subtle); }

/* ---------- table footer: counter left, rows per page + pager right (static) ---------- */

.inv-tfoot { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.75rem 1rem 0; margin-top: -0.25rem; }
.inv-tfoot__count { font: var(--body-m); color: var(--inv-warm); }
.inv-tfoot__group { display: flex; align-items: center; gap: 1.5rem; }
.inv-tfoot__rows { display: flex; align-items: center; gap: 0.5rem; font: var(--body-m); color: var(--inv-warm); }
.inv-select--rows { cursor: default; }
.inv-pager { display: flex; align-items: center; gap: 0.25rem; }
.inv-pager__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  font: var(--label-m); color: var(--text-primary);
  transition: background var(--t-fast) var(--ease);
}
.inv-pager__btn svg { width: 1rem; height: 1rem; }
.inv-pager__btn:hover { background: var(--surface-subtle); }
.inv-pager__btn--on, .inv-pager__btn--on:hover { background: var(--charcoal); color: var(--white); }

/* ---------- tooltips (DS Tooltip: Title + Subtitle, dotted underline trigger) ---------- */

.inv-tt { position: relative; display: inline-flex; cursor: help; outline: 0; }
.inv-tt__text { text-decoration: underline dotted; text-decoration-thickness: 0.09375rem; text-underline-offset: 0.1875rem; }
.inv-tip {
  position: absolute; left: 50%; z-index: 50;
  display: flex; flex-direction: column; gap: 0.0625rem;
  width: max-content; max-width: 20rem;
  padding: 0.3125rem 0.5625rem; border-radius: 0.25rem;
  background: var(--inv-tip-bg); color: var(--white);
  box-shadow: 0 0.25rem 0.75rem rgba(16, 16, 16, 0.18);
  text-align: left; text-transform: none; letter-spacing: 0; white-space: normal; text-decoration: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), visibility var(--t-fast) var(--ease);
}
.inv-tip::after {
  content: ''; position: absolute; left: 50%; margin-left: -0.375rem;
  border: 0.375rem solid transparent;
}
.inv-tip--top { bottom: calc(100% + 0.625rem); transform: translateX(-50%); }
.inv-tip--top::after { top: 100%; border-top-color: var(--inv-tip-bg); border-bottom: 0; }
.inv-tip--bottom { top: calc(100% + 0.625rem); transform: translateX(-50%); }
.inv-tip--bottom::after { bottom: 100%; border-bottom-color: var(--inv-tip-bg); border-top: 0; }
.inv-tip__title { font: var(--label-s); color: var(--white); }            /* Label S, semantic/text-on-primary */
.inv-tip__sub { font: var(--caption-s); color: var(--inv-tip-sub); }       /* Caption S, neutral/400 */
.inv-tt:hover .inv-tip, .inv-tt:focus .inv-tip, .inv-tt:focus-within .inv-tip,
.inv-cell__cashback:hover .inv-tip, .inv-cell__cashback:focus .inv-tip, .inv-cell__cashback.is-open .inv-tip { opacity: 1; visibility: visible; }
/* the tooltips in the table header sit under the row above; lift the trigger */
.inv-th .inv-tt { vertical-align: top; }
.inv-th .inv-tt .inv-tip { text-transform: none; }
.inv-th .inv-tip--top { left: 0; transform: none; }
.inv-th .inv-tip--top::after { left: 1.5rem; }
.inv-th .inv-tip--bottom { left: auto; right: 0; transform: none; }
.inv-th .inv-tip--bottom::after { left: auto; right: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .inv-tip { transition: none; } }

/* ---------- the row editor "Set your investment" ---------- */

.inv-editor { display: flex; flex-direction: column; gap: 1rem; padding: 0 1rem 1.25rem; }
.inv-editor__panel {
  display: grid; grid-template-columns: 28.75rem minmax(0, 1fr); gap: 2rem;
  padding: 1.5rem; background: var(--bg-canvas); border-radius: 0.75rem;
}
.inv-editor__col { display: flex; flex-direction: column; gap: 0.75rem; }
.inv-editor__title { font: var(--inv-h3); }
.inv-editor__hint { font: var(--body-s); color: var(--inv-warm); }
.inv-editor__hint-part.is-error { color: var(--coral); }

.inv-field {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.25rem; background: var(--white);
  border: 0.125rem solid var(--border); border-radius: 0.75rem;
  transition: border-color var(--t-base) var(--ease);
}
.inv-field:focus-within { border-color: var(--charcoal); }
.inv-field__cur { font: var(--number-l); letter-spacing: -0.03125rem; color: var(--inv-warm); }
.inv-field__input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0;
  font: var(--number-l); letter-spacing: -0.03125rem; color: var(--text-primary);
}

.inv-kv { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 0.0625rem solid var(--border); }
.inv-kv__label { font: var(--body-m); color: var(--inv-warm); min-width: 0; }
.inv-kv__val { font: var(--value); color: var(--text-primary); text-align: right; white-space: nowrap; flex: none; }
.inv-kv__val--pos { color: var(--green); }
.inv-kv--total { border-bottom: 0; }
.inv-kv--total .inv-kv__label { font: var(--label-m); color: var(--text-primary); }
.inv-kv--total .inv-kv__val { font: var(--title-l); }
.inv-kv--strong .inv-kv__label { font: var(--label-m); color: var(--text-primary); }
.inv-kv-list { display: flex; flex-direction: column; }
.inv-kv-list .inv-kv:last-child { border-bottom: 0; }
.inv-kv-list--keep-last .inv-kv:last-child { border-bottom: 0.0625rem solid var(--border); }

.inv-editor__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.inv-editor__actions { display: flex; align-items: center; gap: 1rem; }

.inv-link { font: var(--label-m); color: var(--coral); text-decoration: underline; text-underline-offset: 0.125rem; }
.inv-link:hover { color: var(--coral-dark); }
.inv-link--s { font: var(--label-s); }

/* ---------- buttons (DS Button Large 48) ---------- */

.inv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 3rem; padding: 0 1.5rem; border-radius: 0.5rem;
  font: var(--inv-label-l); white-space: nowrap;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.inv-btn--primary { background: var(--coral); color: var(--white); }
.inv-btn--primary:hover { background: var(--coral-dark); }
.inv-btn--primary:disabled { background: var(--track); color: var(--text-muted); cursor: not-allowed; }
.inv-btn--outline { background: var(--white); border: 0.0625rem solid var(--charcoal); color: var(--text-primary); }
.inv-btn--outline:hover { background: var(--surface-subtle); }
.inv-btn--ghost { height: auto; padding: 0; color: var(--text-primary); }
.inv-btn--ghost:hover { color: var(--coral); }
.inv-btn--wide { width: 100%; }

/* ---------- separate pages: Confirm and Done ---------- */

.inv-page { display: flex; flex-direction: column; gap: 1.5rem; }
.inv-nav { display: flex; }
.inv-nav__back { display: inline-flex; align-items: center; gap: 0.5rem; font: var(--label-m); color: var(--text-primary); }
.inv-nav__back svg { width: 1.25rem; height: 1.25rem; }
.inv-nav__back:hover { color: var(--coral); }
.inv-page__content { width: 100%; max-width: 36.75rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }

.inv-card { display: flex; flex-direction: column; gap: 1.25rem; }
.inv-card__title { font: var(--inv-h2); letter-spacing: -0.0125rem; }
.inv-card__group { font: var(--overline); letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--inv-warm); margin-bottom: -0.5rem; }
.inv-card .ssv2-banner, .inv-card .ssv2-ecspr, .inv-card .ssv2-btn--primary { margin-top: 0; }
.inv-card .ssv2-btn--ghost { margin-top: 0; }

.inv-docs-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.inv-docs-head__title { font: var(--inv-h3); }
.inv-docs { display: flex; flex-direction: column; gap: 0.5rem; }
.inv-doc {
  display: flex; align-items: center; gap: 0.5rem;
  border: 0.0625rem solid var(--border); border-radius: 0.5rem; padding: 0.75rem 1rem;
}
.inv-doc svg { width: 1rem; height: 1rem; flex: none; color: var(--coral); }
.inv-doc__name { flex: 1; font: var(--body-s); color: var(--text-primary); }
.inv-doc__open { font: var(--label-s); color: var(--coral); }
.inv-doc__open:hover { color: var(--coral-dark); }
.inv-actions { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.inv-note { font: var(--body-s); color: var(--inv-warm); }

/* loan sub-cards in the Confirm / Done cards */
.inv-subcard { display: flex; flex-direction: column; border: 0.0625rem solid var(--border); border-radius: 0.75rem; padding: 1rem; }
.inv-subcard--tight { padding: 0.25rem 1rem; }
.inv-subcard__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.5rem; font: var(--label-m); }
.inv-subcard .inv-kv:last-of-type { border-bottom: 0; }
.inv-subcard__foot { padding-top: 0.5rem; }

/* done card head: medallion above the title */
.inv-success { display: flex; flex-direction: column; gap: 1rem; }
.inv-medallion {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--inv-success); color: var(--white);
}
.inv-medallion svg { width: 1.25rem; height: 1.25rem; }

/* reflection strip under the done card */
.inv-strip {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1rem; background: var(--bg-light);
  border: 0.0625rem solid var(--inv-banner-border); border-radius: 0.5rem;
  font: var(--body-m); color: var(--text-primary);
}

/* ---------- the Loan page (Figma "Loan page") ----------
   1096 content: header (H2 title + Body S id, wallet right), then two
   columns 704 + 360 with a 32 gap. Left: stat band, five tabs, the tab
   card. Right: the invest card. */

.inv-loan { gap: 1.5rem; }
.inv-loan__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.inv-loan__title-block { display: flex; flex-direction: column; gap: 0.375rem; }
.inv-loan__title { font: var(--inv-h2); letter-spacing: -0.0125rem; }
.inv-loan__id { font: var(--body-s); color: var(--inv-warm); }

.inv-loan__columns { display: grid; grid-template-columns: minmax(0, 1fr) 22.5rem; gap: 2rem; align-items: start; }
.inv-loan__col { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.inv-loan__col--invest { position: sticky; top: 1.5rem; }

.inv-loan__stats {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 1.5rem 2rem; background: var(--white); border-radius: 1rem; box-shadow: var(--shadow-card);
}
.inv-loan__stat { display: flex; flex-direction: column; gap: 0.375rem; }
.inv-loan__stat-label { font: var(--overline); letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--inv-warm); white-space: nowrap; }
.inv-loan__stat-value { font: var(--title-l); white-space: nowrap; }

.inv-loan__tabs { display: flex; gap: 1.5rem; }
.inv-loan__tab {
  padding-bottom: 0.75rem; border-bottom: 0.125rem solid transparent;
  font: var(--label-m); color: var(--inv-warm); white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.inv-loan__tab:hover { color: var(--text-primary); }
.inv-loan__tab--on { color: var(--text-primary); border-color: var(--charcoal); }

.inv-loan__card { padding: 2rem; background: var(--white); border-radius: 1rem; box-shadow: var(--shadow-card); }
.inv-loan__card--sched { padding: 1rem; }
.inv-loan__card .loan-sidebar__sec-title { margin-top: 2rem; }
.inv-loan__paragraph { font: var(--body-m); color: var(--text-primary); }
/* Listing page: the "Listing details" block under the loan facts, and the accrued-interest rule */
.inv-loan__section { font: var(--inv-h3); margin-top: 1.75rem; margin-bottom: 0.25rem; }
.inv-loan__rule { font: var(--body-s); color: var(--text-primary); padding-top: 0.75rem; }

/* Payment Schedule table (8 columns, Body S, 32px rows, wrapped header) */
.inv-sched { display: flex; flex-direction: column; }
.inv-sched__head, .inv-sched__row {
  display: grid; grid-template-columns: 5.25rem 4.625rem 4.5rem 4.75rem 4.75rem 4.75rem 5.875rem minmax(0, 1fr);
  gap: 0.375rem; padding: 0.5rem; align-items: start;   /* header labels sit at the top, as in Figma */
}
.inv-sched__head { background: var(--bg-canvas); border-radius: 0.5rem; }
.inv-sched__th { font: var(--overline); letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--inv-warm); white-space: normal; }
.inv-sched__row { border-bottom: 0.0625rem solid var(--border); align-items: center; }
.inv-sched__row:last-child { border-bottom: 0; }
.inv-sched__td { font: var(--body-s); color: var(--text-primary); white-space: nowrap; }
.inv-sched__td--muted { color: var(--inv-warm); }
/* the same table inside the 768 Loan sidebar (720px content): Figma widths 86 / 78 / 74 / 82 x3 / 96 / 70, gap 10 */
.loan-sidebar .inv-sched__head, .loan-sidebar .inv-sched__row { grid-template-columns: 5.375rem 4.875rem 4.625rem 5.125rem 5.125rem 5.125rem 6rem minmax(0, 1fr); gap: 0.625rem; }

.inv-loan__invest {
  display: flex; flex-direction: column; gap: 1.25rem;
  padding: 1.5rem; background: var(--white); border-radius: 1rem; box-shadow: var(--shadow-card);
}
.inv-loan__invest .inv-editor__col { gap: 1rem; }
.inv-loan__invest .inv-editor__title { font: var(--inv-h3); }
.inv-loan__invest .inv-kv { gap: 0.75rem; }
.inv-loan__invest .inv-kv__val { white-space: nowrap; }
.inv-loan__ecspr { font: var(--caption-s); color: var(--text-muted); }

/* ---------- Secondary market (cell x on the 1096 card: 16 / 98 / 198 / 307 / 412 / 490 / 580 / 704 / 810 / 910 / 1030) ---------- */

.inv-table__head--sm,
.inv-row__cells--sm {
  grid-template-columns: 5.125rem 6.25rem 6.8125rem 6.5625rem 4.875rem 5.625rem 7.75rem 6.625rem 6.25rem 7.5rem minmax(0, 1fr);
}
.inv-table__head--sm { height: 3.75rem; align-items: start; padding-top: 0.875rem; }
.inv-table__head--sm .inv-th { white-space: normal; }
.inv-table__head--sm .inv-th:nth-child(1) { max-width: 2.3125rem; }
.inv-table__head--sm .inv-th:nth-child(2) { max-width: 3.5rem; }
.inv-table__head--sm .inv-th:nth-child(3) { max-width: 2.3125rem; }
.inv-table__head--sm .inv-th:nth-child(4) { max-width: 5.25rem; }
.inv-table__head--sm .inv-th:nth-child(5) { max-width: 4rem; }
.inv-table__head--sm .inv-th:nth-child(6) { max-width: 4.8125rem; }
.inv-table__head--sm .inv-th:nth-child(7) { max-width: 3.0625rem; }
.inv-table__head--sm .inv-th:nth-child(8) { max-width: 5.5rem; }
.inv-table__head--sm .inv-th:nth-child(9) { max-width: 4.875rem; }
.inv-table__head--sm .inv-th:nth-child(10) { max-width: 2.75rem; }
.inv-table__head--sm .inv-th--action { text-align: right; padding-right: 1rem; white-space: nowrap; max-width: none; }
.inv-row__cells--sm .inv-cell { padding-right: 0.75rem; }
.inv-row__cells--sm .inv-cell--action { padding-right: 0.6875rem; }

/* DS Badge: Success (discount), Warning (premium), Neutral (at par) */
.inv-badge {
  display: inline-flex; align-items: center; height: 1.25rem; padding: 0 0.5rem; border-radius: 62.4375rem;
  font: var(--label-s); white-space: nowrap;
}
.inv-badge--success { background: #c1ecd8; color: #0e3a26; }
.inv-badge--warning { background: #ffd8d7; color: #331918; }
.inv-badge--neutral { background: var(--surface-subtle); color: var(--text-primary); }
.inv-badge--count { background: var(--inv-badge-bg); color: var(--inv-badge-text); padding: 0 0.5rem; }
.inv-tt--pill { cursor: help; }

/* ---------- the order bar (sticky to the bottom of the screen) ---------- */

.inv-bar {
  position: fixed; left: var(--inv-sidebar); right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 2.5rem;
  background: var(--white); border-top: 0.0625rem solid var(--border);
  box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform var(--t-base) var(--ease);
}
.inv-bar--on { transform: none; }
.inv-bar__text { display: flex; flex-direction: column; min-width: 0; }
.inv-bar__title { font: var(--inv-label-l); }
.inv-bar__sum { font: var(--body-m); color: var(--inv-warm); }
.inv-bar__actions { display: flex; align-items: center; gap: 1rem; flex: none; }

/* the order panel above the bar; more than five loans scroll inside */
.inv-order {
  position: fixed; right: 2.5rem; bottom: 6.5rem; z-index: 41;
  width: 30rem; max-width: calc(100vw - 2rem);
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.5rem; background: var(--white);
  border: 0.0625rem solid var(--border); border-radius: 1rem;
  box-shadow: 0 0.0625rem 0.125rem rgba(44, 44, 44, 0.04), 0 0.25rem 1rem rgba(44, 44, 44, 0.05);
  opacity: 0; transform: translateY(0.5rem); pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.inv-order--on { opacity: 1; transform: none; pointer-events: auto; }
.inv-order__title { font: var(--inv-h3); }
.inv-order__lines { display: flex; flex-direction: column; gap: 1rem; max-height: 36.5rem; overflow-y: auto; }
.inv-order__group { font: var(--overline); letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--inv-warm); }
.inv-order__line { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 0.0625rem solid var(--border); flex: none; }
.inv-order__loan { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.inv-order__name { font: var(--label-m); }
.inv-order__meta { font: var(--body-s); color: var(--inv-warm); }
.inv-order__amt { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; flex: none; }
.inv-order__amt-val { font: var(--value); }
.inv-order__icons { display: flex; gap: 1rem; }
.inv-icon-btn { width: 1.25rem; height: 1.25rem; color: var(--inv-warm); transition: color var(--t-fast) var(--ease); }
.inv-icon-btn svg { width: 100%; height: 100%; display: block; }
.inv-icon-btn:hover { color: var(--text-primary); }
.inv-icon-btn--remove:hover { color: var(--coral); }
.inv-icon-btn--close { width: 1.25rem; height: 1.25rem; color: var(--text-primary); }
.inv-order__total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.inv-order__total-label { font: var(--label-m); }
.inv-order__total-val { font: var(--inv-h3); }
.inv-order__return { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.inv-order__return-label { font: var(--body-m); color: var(--inv-warm); }
.inv-order__return-val { font: var(--value); color: var(--green); }

/* ---------- Invest in all N loans (modal 560, padding 32, gap 20) ---------- */

.inv-modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; }
.inv-modal__overlay { position: absolute; inset: 0; background: var(--inv-overlay); }
.inv-modal__panel {
  position: relative; width: 35rem; max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); overflow-y: auto;
  display: flex; flex-direction: column; gap: 1.25rem;
  padding: 2rem; background: var(--white);
  border: 0.0625rem solid var(--border); border-radius: 1rem;
  box-shadow: var(--shadow-pop);
}
.inv-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.inv-modal__title { font: var(--inv-h3); }
.inv-modal__desc { font: var(--body-m); color: var(--inv-warm); }
.inv-modal__amount { display: flex; flex-direction: column; gap: 1rem; }
.inv-modal__h3 { font: var(--inv-h3); }
.inv-modal__note { font: var(--body-s); color: var(--inv-warm); }
.inv-modal__footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }

/* ---------- Advanced filters drawer "All filters" (480 wide, right side) ---------- */

.inv-drawer { position: fixed; inset: 0; z-index: 65; }
.inv-drawer__overlay { position: absolute; inset: 0; background: var(--inv-overlay); }
.inv-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: 30rem; max-width: 92vw;
  display: flex; flex-direction: column;
  background: var(--white); box-shadow: var(--shadow-pop);
}
.inv-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.5rem 0; }
.inv-drawer__title { font: var(--inv-h3); }
.inv-drawer__body { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; }
.inv-drawer__footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem 1.5rem; }

.inv-fgroup { display: flex; flex-direction: column; gap: 0.75rem; }
.inv-fgroup__label { font: var(--value); color: var(--text-primary); }
.inv-range { display: flex; gap: 0.75rem; }
.inv-input { flex: 1; display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.inv-input__label { font: var(--label-m); color: var(--text-primary); }
.inv-input__field {
  display: flex; align-items: center; height: 2.5rem; padding: 0 0.75rem;
  background: var(--white); border: 0.0625rem solid var(--border); border-radius: 0.25rem;
  transition: border-color var(--t-fast) var(--ease);
}
.inv-input__field:focus-within { border: 0.125rem solid var(--charcoal); padding: 0 0.6875rem; }
.inv-input__control { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0; font: var(--body-m); color: var(--text-primary); }
.inv-input__control::placeholder { color: var(--text-muted); }
.inv-choices { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.inv-check, .inv-radio { display: inline-flex; align-items: center; gap: 0.5rem; font: var(--body-m); color: var(--text-primary); }
.inv-check__box {
  flex: none; width: 1.25rem; height: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0.09375rem solid var(--border); border-radius: 0.25rem; background: var(--white); color: var(--white);
}
.inv-check__box.is-on { background: var(--charcoal); border-color: var(--charcoal); }
.inv-check__box svg { width: 0.75rem; height: 0.75rem; }
.inv-radio__dot {
  flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  border: 0.09375rem solid var(--border); background: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
}
.inv-radio__dot.is-on { border: 0.125rem solid var(--charcoal); }
.inv-radio__dot.is-on::after { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--charcoal); }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .inv-editor, .inv-page, .inv-modal__panel, .inv-drawer__panel { animation: inv-reveal 0.25s var(--ease); }
  @keyframes inv-reveal {
    from { opacity: 0; transform: translateY(-0.25rem); }
    to { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .inv-row, .inv-bar, .inv-order { transition: none; }
}

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

@media (max-width: 82rem) {
  .inv-table { overflow-x: auto; }
  .inv-table__head, .inv-row__cells { min-width: 68.5rem; }
  .inv-editor__panel { grid-template-columns: 1fr; }
}
@media (max-width: 72rem) {
  .inv-loan__columns { grid-template-columns: 1fr; }
  .inv-loan__col--invest { position: static; }
  .inv-loan__stats { flex-wrap: wrap; gap: 1.5rem; justify-content: flex-start; }
  .inv-loan__tabs { overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 68rem) {
  .inv-bar { left: 0; }
}
@media (max-width: 48rem) {
  .main--inv { padding: 1rem 1rem 2rem; }
  .main--inv.has-bar { padding-bottom: 9rem; }
  .inv-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .inv-filters { flex-wrap: wrap; }
  .inv-bar { flex-direction: column; align-items: stretch; padding: 1rem; }
  .inv-bar__actions { justify-content: stretch; }
  .inv-bar__actions .inv-btn { flex: 1; }
  .inv-order { right: 1rem; bottom: 9.5rem; }
  .inv-editor__footer { flex-direction: column; align-items: stretch; }
  .inv-editor__actions { justify-content: flex-end; }
  .inv-tfoot { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Mobile (<= 768): 1:1 with the Figma section "Invest - mobile"
   (page "in progress", 13 September 2026). The rows become
   cards after the go.afranga.com/marketplace mobile card, the
   order panel and the "Invest in all" modal become bottom
   sheets, the quick filters are hidden, the Loan page puts the
   invest card right under the stat band, the Payment schedule
   scrolls sideways with the Due date column fixed.
   ============================================================ */

/* mobile-only elements stay out of the desktop layout */
.inv-cell--mmeta, .inv-adv--mobile, .inv-order__actions { display: none; }
.inv-cell__in-order b { font-weight: inherit; }

@media (max-width: 48rem) {
  .main--inv { padding: 1.5rem 1rem 2rem; }
  .inv-header { gap: 0.5rem; }
  .inv-header__wallet { width: 100%; justify-content: space-between; }

  /* market tabs: the "My listings" link becomes a button in the actions row */
  .inv-tabs__spacer, .inv-tabs__link { display: none; }

  /* no quick filters on mobile (Georgi, 13 September): two buttons, results line under them */
  .inv-filters { flex-wrap: wrap; gap: 0.5rem; }
  .inv-filters .inv-select-wrap, .inv-filters__spacer { display: none; }
  .inv-filters__results { order: 2; width: 100%; padding-top: 0.25rem; }
  .inv-adv, .inv-filters .inv-btn-md { flex: 1 1 0; justify-content: center; min-width: 0; padding: 0 0.75rem; }
  .inv-adv--mobile { display: inline-flex; }

  /* ---- loan rows -> cards (logo + id, 2x2 stats, divider, meta + button) ---- */
  .inv-table { background: none; border: 0; border-radius: 0; overflow: visible; }
  .inv-table__head { display: none; }
  .inv-table__head, .inv-row__cells { min-width: 0; }
  .inv-table__empty { background: var(--white); border: 0.0625rem solid var(--border); border-radius: 0.75rem; }
  .inv-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0;
    grid-template-areas: "logo id" "meta meta" "rate term" "amount avail" "badge status" "editor editor" "divider divider" "foot foot";
    padding: 1rem; margin-bottom: 0.75rem;
    background: var(--white); border: 0.0625rem solid var(--border); border-radius: 0.75rem;
  }
  .inv-row:last-child { margin-bottom: 0; border-bottom: 0.0625rem solid var(--border); }
  .inv-row--dim { filter: none; }
  .inv-row__cells { display: contents; }
  .inv-row__cells[data-row-link]:hover { background: none; }
  .inv-cell { padding: 0; }
  /* the id cell splits: the id goes top right, "In your order" goes to the footer next to Edit */
  .inv-cell:nth-child(1) { display: contents; }
  .inv-cell:nth-child(1) > .inv-cell__text { grid-area: id; justify-self: end; align-self: center; font: var(--body-m); color: var(--inv-warm); }
  .inv-cell__in-order { grid-area: foot; justify-self: start; align-self: center; max-width: calc(100% - 6.5rem); white-space: normal; font: var(--body-m); color: var(--inv-warm); }
  .inv-cell__in-order br { display: none; }
  .inv-cell__in-order b { font: var(--label-m); color: var(--text-primary); }
  .inv-cell:nth-child(2), .inv-cell:nth-child(3) { display: none; }   /* closes / listed and type: shown in the meta line */
  .inv-cell--mmeta { display: block; grid-area: foot; justify-self: start; align-self: center; max-width: calc(100% - 6.5rem); font: var(--body-s); color: var(--inv-warm); }
  .inv-cell--mmeta-up { grid-area: meta; max-width: none; padding-top: 0.5rem; }
  .inv-cell:nth-child(5) { grid-area: logo; align-self: center; }
  .inv-cell__logo { height: 1.25rem; }
  .inv-cell[data-k] { padding-top: 0.75rem; gap: 0.25rem; align-items: flex-start; text-align: left; }
  .inv-cell[data-k]::before { content: attr(data-k); font: var(--overline); letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--inv-warm); }
  .inv-cell[data-k] .inv-cell__strong, .inv-cell[data-k] .inv-cell__text { font: var(--title-l); white-space: normal; }
  .inv-cell[data-k="Interest rate"] { grid-area: rate; }
  .inv-cell[data-k="Term"], .inv-cell[data-k="Remaining term"] { grid-area: term; }
  .inv-cell[data-k="Loan amount"], .inv-cell[data-k="Available for invest."] { grid-area: amount; }
  .inv-cell[data-k="Available"], .inv-cell[data-k="Sale price"] { grid-area: avail; }
  .inv-cell[data-k="Discount / Premium"] { grid-area: badge; }
  .inv-cell[data-k="Loan status"] { grid-area: status; }
  .inv-cell[data-k="Loan status"] .inv-cell__text { font: var(--value); }
  .inv-cell--amount, .inv-cell--available { padding-right: 0; }
  .inv-cell__cashback { margin-top: -0.125rem; }
  /* the cashback tooltip opens from the left edge of its trigger so it stays inside the card */
  .inv-cell__cashback .inv-tip--top { left: 0; transform: none; max-width: calc(100vw - 4rem); }
  .inv-cell__cashback .inv-tip--top::after { left: 1.5rem; }
  .inv-cell--action { grid-area: foot; justify-self: end; align-self: center; padding: 0; }
  .inv-row::before { content: ''; grid-area: divider; height: 0.0625rem; margin: 0.75rem 0; background: var(--border); }
  .inv-btn-sm { height: 2.5rem; padding: 0 1.25rem; font: var(--label-m); }

  /* the row editor sits inside the card, above the divider */
  .inv-editor { grid-area: editor; padding: 0.75rem 0 0; min-width: 0; }
  .inv-editor__panel, .inv-editor__col, .inv-kv-list { min-width: 0; }
  .inv-editor__panel { grid-template-columns: minmax(0, 1fr); }
  .inv-editor__panel { padding: 1rem; gap: 1rem; }
  .inv-editor__footer { flex-direction: column; align-items: stretch; gap: 1rem; }
  .inv-editor__actions { flex-direction: column-reverse; align-items: center; gap: 1rem; }
  .inv-editor__actions .inv-btn--primary { width: 100%; }

  /* table footer: counter left, pager right, no rows-per-page */
  .inv-tfoot { flex-direction: row; align-items: center; justify-content: space-between; padding: 0.75rem 0 0; }
  .inv-tfoot__rows { display: none; }

  /* a loan in focus (Invest / Edit editor open) hides the sticky order bar (Georgi, 13 September) */
  body.inv-editing .inv-bar--on { transform: translateY(100%); }
  body.inv-editing .main--inv.has-bar { padding-bottom: 2rem; }

  /* ---- order panel -> bottom sheet with its own actions ---- */
  .inv-order {
    left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 85vh;
    padding: 0.75rem 1.25rem 1.5rem; border: 0; border-radius: 1rem 1rem 0 0;
    transform: translateY(100%); opacity: 1;
  }
  .inv-order--on { transform: none; box-shadow: 0 -0.25rem 1rem rgba(44, 44, 44, 0.08); }
  /* the scrim above the sheet */
  .inv-order--on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh; background: var(--inv-overlay); }
  .inv-order::before { content: ''; align-self: center; width: 2.25rem; height: 0.25rem; border-radius: 62rem; background: var(--track); }
  .inv-order__lines { max-height: 40vh; }
  .inv-order__actions { display: flex; gap: 0.75rem; }
  .inv-order__actions .inv-btn { flex: 1; padding: 0 1rem; }

  /* ---- Invest in all -> bottom sheet ---- */
  .inv-modal { align-items: flex-end; }
  .inv-modal__panel {
    width: 100%; max-width: none; max-height: 90vh;
    padding: 0.75rem 1.25rem 1.5rem; border: 0; border-radius: 1rem 1rem 0 0;
  }
  .inv-modal__panel::before { content: ''; align-self: center; width: 2.25rem; height: 0.25rem; border-radius: 62rem; background: var(--track); }
  .inv-modal__footer { flex-direction: column-reverse; align-items: center; gap: 1rem; }
  .inv-modal__footer .inv-btn-md--primary { width: 100%; height: 3rem; font: var(--inv-label-l); }
  .inv-modal__footer .inv-btn-md--tertiary { border: 0; background: none; height: auto; padding: 0; font: var(--inv-label-l); }

  /* ---- Advanced filters -> full-screen sheet ---- */
  .inv-drawer__panel { width: 100%; max-width: none; }
  .inv-drawer__head { padding: 1.25rem 1.25rem 0; }
  .inv-drawer__body { padding: 1.25rem; }
  .inv-drawer__footer { padding: 1rem 1.25rem; border-top: 0.0625rem solid var(--border); box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.06); }
  .inv-drawer__footer .inv-btn-md { flex: 1; height: 3rem; font: var(--inv-label-l); }

  /* ---- Loan / Listing page: stat band 2x2, invest card right under it, tabs scroll ---- */
  .inv-loan__header { flex-direction: column; align-items: stretch; gap: 1rem; }
  .inv-loan__header .inv-header__wallet { justify-content: space-between; }
  .inv-loan__columns { display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .inv-loan__col:not(.inv-loan__col--invest) { display: contents; }
  .inv-loan__stats { order: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; padding: 1.25rem; }
  .inv-loan__stat-label, .inv-loan__stat-value { white-space: normal; }
  .inv-loan__col--invest { order: 2; position: static; }
  .inv-loan__tabs { order: 3; overflow-x: auto; scrollbar-width: none; }
  .inv-loan__tabs::-webkit-scrollbar { display: none; }
  .inv-loan__card { order: 4; padding: 1.25rem; }
  .inv-loan__invest { padding: 1.25rem; }

  /* Payment schedule: sideways scroll, Due date fixed. The scroll box (.inv-sched-scroll) has
     no side padding: a sticky cell cannot cover a scroll container's padding on iOS, the other
     columns showed through that strip. The gutter lives inside the sticky Due date cell instead. */
  .inv-loan__card--sched { padding: 1rem 0; --inv-sched-gutter: 1rem; }
  .inv-sched-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .loan-sidebar .inv-sched-scroll { margin: 0 -1.5rem; --inv-sched-gutter: 1.5rem; }
  .inv-sched { min-width: calc(42rem + var(--inv-sched-gutter, 1rem)); }
  .inv-sched__head, .inv-sched__row,
  .loan-sidebar .inv-sched__head, .loan-sidebar .inv-sched__row { grid-template-columns: calc(6rem + var(--inv-sched-gutter, 1rem)) 4.5rem 4.75rem 4.75rem 4.75rem 5.875rem minmax(0, 1fr); gap: 0.625rem; padding-left: 0; }
  .inv-sched__th:first-child, .inv-sched__td:first-child { display: none; }
  .inv-sched__th:nth-child(2), .inv-sched__td:nth-child(2) {
    position: sticky; left: 0; z-index: 1; align-self: stretch; display: flex; align-items: center;
    background: var(--white); padding-left: calc(var(--inv-sched-gutter, 1rem) + 0.5rem); margin-right: -0.625rem; padding-right: 0.625rem;
    border-right: 0.0625rem solid var(--border);
  }
  /* the vertical padding moves from the rows into the cells so the sticky cell covers the full row height */
  .inv-sched__head, .inv-sched__row { padding-top: 0; padding-bottom: 0; }
  .inv-sched__th, .inv-sched__td { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .inv-sched__head { border-radius: 0; }
  .inv-sched__head .inv-sched__th:nth-child(2) { align-items: flex-start; }
  /* the header's canvas fill starts after the gutter and keeps the 8px corner */
  .inv-sched__head .inv-sched__th:nth-child(2)::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: var(--inv-sched-gutter, 1rem); right: 0; z-index: -1;
    background: var(--bg-canvas); border-radius: 0.5rem 0 0 0.5rem;
  }

  /* Confirm / Done cards */
  .inv-page__content .inv-card { padding: 1.5rem 1.25rem; }
}