/* ============================================================
   Afranga · My investments · cards prototype
   Sits on top of invest-concepts.css (same tokens, tabs, filters,
   drawer, modal, order bar). Only what the cards add lives here.
   All sizing in rem.
   ============================================================ */

.mi-tabs__count { font: var(--body-m); color: var(--inv-warm); margin-left: 0.125rem; }

/* ---------- overview ---------- */

.mi-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.mi-stat { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.25rem 1.5rem; background: var(--white); border: 0.0625rem solid var(--track); border-radius: 1rem; }
.mi-stat__label { font: var(--overline); letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--inv-warm); }
.mi-stat__value { font: var(--inv-h3); }
.mi-stat__value--pos { color: var(--green); }
.mi-stat__sub { font: var(--body-s); color: var(--inv-warm); }
.mi-overview-wrap { display: contents; }
.mi-dots { display: none; }

/* ---------- filters row additions ---------- */

.inv-filters { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.mi-dd--right { left: auto; right: 0; }
.mi-divider { flex: none; width: 0.0625rem; height: 1.5rem; margin: 0 0.5rem; background: var(--border); }
.mi-view { display: inline-flex; height: 2.5rem; padding: 0.1875rem; gap: 0.125rem; border: 0.0625rem solid var(--border); border-radius: 0.5rem; background: var(--white); }
.mi-view__opt { width: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.3125rem; color: var(--inv-warm); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.mi-view__opt svg { width: 1.125rem; height: 1.125rem; }
.mi-view__opt:hover { color: var(--text-primary); }
.mi-view__opt.is-on { background: var(--surface-subtle); color: var(--text-primary); }
.mi-hint { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.5rem; background: var(--bg-light); border-radius: 0.75rem; font: var(--body-m); color: var(--inv-warm); }
.inv-dd__item:disabled { color: var(--text-muted); cursor: not-allowed; }

/* ---------- groups + list ---------- */

.mi-body { display: flex; flex-direction: column; gap: 0.75rem; }
.mi-list { display: flex; flex-direction: column; gap: 0.75rem; }
.mi-list--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

/* ---------- the card ---------- */

.mi-card {
  background: var(--white); border: 0.0625rem solid var(--track); border-radius: 1rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.mi-card:hover { border-color: var(--border); box-shadow: var(--shadow-card); }
.mi-card--picked { border-color: var(--charcoal); }
.mi-card__summary { cursor: pointer; display: flex; align-items: center; gap: 1.5rem; padding: 1.25rem 1.5rem; }
.mi-card__summary--off { cursor: default; }
.mi-card__check { flex: none; width: 1.25rem; display: inline-flex; }
.mi-card__id { flex: 1.1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.mi-card__logo { height: 1.25rem; width: auto; display: block; margin-bottom: 0.25rem; }
.mi-card__loan { font: var(--label-m); }
.mi-card__meta { font: var(--body-s); color: var(--inv-warm); }
.mi-card__badges { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.125rem; }

.mi-col { flex: none; width: 8.5rem; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.mi-col--grow { flex: 1.3 1 0; width: auto; }
.mi-col__label { font: var(--overline); letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--inv-warm); }
.mi-col__value { font: var(--label-m); }
.mi-col__sub { font: var(--body-s); color: var(--inv-warm); }
.mi-col--lead .mi-col__value { font: var(--title-l); }
.mi-col--grow .mi-col__value { font: var(--body-m); }

.mi-progress { display: block; height: 0.375rem; margin: 0.4375rem 0; background: var(--track); border-radius: 62.4375rem; overflow: hidden; }
.mi-progress__fill { display: block; height: 100%; background: var(--charcoal); border-radius: inherit; }

.mi-card__action { flex: none; width: 10.5rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; text-align: right; }
.mi-card__btns { display: inline-flex; align-items: center; gap: 0.5rem; }
.mi-card__price { font: var(--body-s); color: var(--inv-warm); }
.mi-btn-menu { gap: 0.25rem; }
.mi-btn-menu svg { width: 0.875rem; height: 0.875rem; }
.mi-icon { flex: none; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5rem; color: var(--text-primary); transition: background var(--t-fast) var(--ease); }
.mi-icon:hover { background: var(--surface-subtle); }
.mi-icon svg { width: 1.25rem; height: 1.25rem; }
.mi-icon:focus-visible, .mi-seg__opt:focus-visible, .mi-view__opt:focus-visible { outline: 0.125rem solid var(--charcoal); outline-offset: 0.125rem; }

/* the menu on a card */
.mi-menu { min-width: 19rem; white-space: normal; }
.mi-menu__item { height: auto; min-height: 2.25rem; flex-direction: column; align-items: flex-start; gap: 0; white-space: normal; }
.mi-menu__item > span:first-child { font: var(--label-m); }
.mi-menu__price { font: var(--body-s); color: var(--inv-warm); }
.mi-menu__blocked { padding: 0.5rem 0.75rem; font: var(--body-s); color: var(--inv-warm); max-width: 19rem; white-space: normal; }
.mi-menu__rule { height: 0.0625rem; margin: 0.25rem 0; background: var(--border); }

/* ---------- details in the side panel: one column, one fact per row ---------- */

.mi-details { display: flex; flex-direction: column; gap: 1.5rem; }
.mi-kvtable { display: flex; flex-direction: column; }
.mi-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 0.75rem 0; border-bottom: 0.0625rem solid var(--track); min-width: 0; }
.mi-kv:first-child { padding-top: 0; }
.mi-kv__label { flex: none; font: var(--body-m); color: var(--inv-warm); }
.mi-kv__val { font: var(--label-m); text-align: right; display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.5rem; }
.mi-flag { width: 1.25rem; height: 0.875rem; flex: none; }

.mi-sub { display: flex; flex-direction: column; gap: 0.5rem; }
.mi-sub__title { font: var(--overline); letter-spacing: 0.0625rem; text-transform: uppercase; color: var(--inv-warm); }
.mi-sub__text { font: var(--body-m); color: var(--inv-warm); }
.mi-purchase { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: 0.75rem 1rem; background: var(--bg-light); border-radius: 0.75rem; font: var(--body-m); }
.mi-purchase__amt { font: var(--label-m); }
.mi-purchase__id { font: var(--body-s); color: var(--inv-warm); }
.mi-purchase__amt, .mi-purchase__id { text-align: right; }
.mi-panel__footer { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem 1.5rem 1.5rem; border-top: 0.0625rem solid var(--border); }
.mi-acts { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.mi-act { flex: 1 1 9rem; min-width: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.mi-act .inv-btn-md { width: 100%; padding: 0 0.75rem; }
.mi-act__price { font: var(--body-s); color: var(--inv-warm); text-align: center; }
.mi-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

.mi-dhead { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.mi-panel { width: 32rem; }

/* ---------- totals, empty state ---------- */


.mi-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 3.5rem 1.5rem; background: var(--white); border: 0.0625rem solid var(--track); border-radius: 1rem; text-align: center; }
.mi-empty__title { font: var(--title-l); }
.mi-empty__text { font: var(--body-m); color: var(--inv-warm); margin-bottom: 0.75rem; }

.mi-error { font: var(--body-s); color: #a3302c; }
.mi-sale-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; font: var(--body-m); }
.mi-sale-line strong { font: var(--label-m); }

/* ---------- toast ---------- */

.mi-toast { position: fixed; left: 50%; bottom: 7.5rem; z-index: 80; transform: translateX(-50%); padding: 0.75rem 1.25rem; background: var(--charcoal); color: var(--white); border-radius: 0.75rem; font: var(--body-m); box-shadow: var(--shadow-pop); max-width: calc(100vw - 2rem); }

/* ---------- design tweaks panel (prototype only, not part of the design) ---------- */

.mi-tweaks {
  position: fixed; right: 1rem; top: 1rem; z-index: 60; width: 16rem; max-height: calc(100vh - 2rem); overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.875rem; padding: 1rem;
  background: var(--charcoal); color: var(--white); border-radius: 1rem; box-shadow: var(--shadow-pop);
}
.mi-tweaks--closed { width: auto; flex-direction: row; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font: var(--label-s); }
.mi-tweaks svg { width: 1rem; height: 1rem; }
.mi-tweaks__head { display: flex; align-items: center; justify-content: space-between; }
.mi-tweaks__title { display: inline-flex; align-items: center; gap: 0.5rem; font: var(--label-m); }
.mi-tweaks .inv-icon-btn { color: var(--white); }
.mi-tweaks .inv-link { color: var(--peach); align-self: flex-start; }
.mi-tweak { display: flex; flex-direction: column; gap: 0.375rem; }
.mi-tweak__label { font: var(--caption-s); color: rgba(255, 255, 255, 0.7); }
.mi-seg { display: flex; padding: 0.125rem; background: rgba(255, 255, 255, 0.1); border-radius: 0.5rem; }
.mi-seg__opt { flex: 1; padding: 0.375rem 0.25rem; border-radius: 0.375rem; font: var(--label-s); color: rgba(255, 255, 255, 0.8); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.mi-seg__opt.is-on { background: var(--white); color: var(--charcoal); }

@media (min-width: 75.0625rem) { .main--inv.has-tweaks { padding-right: 18rem; } }

/* ---------- two-column layout and narrow screens: the card stacks ---------- */

.mi-list--grid .mi-card__summary { flex-wrap: wrap; gap: 1rem 1.5rem; }
.mi-list--grid .mi-card__id { flex: 1 1 100%; }
.mi-list--grid .mi-col { flex: 1 1 0; width: auto; }
.mi-list--grid .mi-col--grow { flex: 1 1 100%; }
.mi-list--grid .mi-card__summary { position: relative; }
.mi-list--grid .mi-card__badges { position: absolute; top: 1.25rem; right: 1.5rem; max-width: 60%; justify-content: flex-end; margin-top: 0; }
.mi-list--grid .mi-card__action { flex: 1 1 100%; width: auto; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 0.75rem; text-align: left; }

@media (max-width: 75rem) {
  .mi-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mi-list--grid { grid-template-columns: minmax(0, 1fr); }
  .mi-card__summary { flex-wrap: wrap; gap: 1rem 1.5rem; }
  .mi-card__id { flex: 1 1 100%; }
  .mi-col { flex: 1 1 0; width: auto; }
  .mi-col--grow { flex: 1 1 100%; }
  .mi-card__action { flex: 1 1 auto; width: auto; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 0.75rem; text-align: left; }
  .mi-tweaks { top: auto; bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mi-card, .mi-icon, .mi-seg__opt, .mi-view__opt { transition: none; }
}

/* date picker in the filters drawer */
.mi-date { width: 100%; justify-content: space-between; gap: 0.5rem; cursor: pointer; font: var(--body-m); color: var(--text-primary); text-align: left; }
.mi-date svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--inv-warm); }
.mi-date.is-open { border: 0.125rem solid var(--charcoal); padding: 0 0.6875rem; }
.mi-date__val--empty { color: var(--text-muted); }
.mi-cal { margin-top: 0.75rem; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; border: 0.0625rem solid var(--border); border-radius: 0.75rem; background: var(--white); }
.mi-cal__head { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.mi-cal__title { font: var(--label-m); }
.mi-cal__grid { width: 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.125rem; }
.mi-cal__wd { padding: 0.375rem 0; text-align: center; font: var(--body-s); color: var(--inv-warm); }
.mi-cal__day { height: 2.25rem; border-radius: 0.5rem; font: var(--body-m); color: var(--text-primary); transition: background var(--t-fast) var(--ease); }
.mi-cal__day:hover { background: var(--surface-subtle); }
.mi-cal__day--today { box-shadow: inset 0 0 0 0.0625rem var(--border); }
.mi-cal__day.is-between { background: var(--bg-light); border-radius: 0; }
.mi-cal__day.is-on, .mi-cal__day.is-on:hover { background: var(--charcoal); color: var(--white); }
.mi-cal__day:disabled { color: var(--text-muted); cursor: default; background: none; }
.mi-cal__day:focus-visible { outline: 0.125rem solid var(--charcoal); outline-offset: 0.125rem; }

/* My investments content inside the shared loan sidebar */
.loan-sidebar__view .mi-sub { margin-top: 1.5rem; }
.loan-sidebar__footer .mi-acts { flex-wrap: nowrap; }
.loan-sidebar__footer .mi-act { flex: 1 1 0; }

.mi-flow__input { margin: 0.5rem 0 0.75rem; }
.inv-subcard .mi-error { margin: -0.25rem 0 0.5rem; }

/* ---------- footer: loans per page + pager ---------- */

.mi-dd--up { top: auto; bottom: calc(100% + 0.375rem); }
.inv-tfoot__rows .inv-select { min-width: 4.5rem; }
.inv-pager__gap { padding: 0 0.25rem; font: var(--body-m); color: var(--inv-warm); }
.inv-pager__btn:disabled { color: var(--text-muted); cursor: not-allowed; }
.inv-pager__btn:disabled:hover { background: none; }

/* ---------- Set prices step (only on /sell-prices/, data-prices) ---------- */

.mi-intro { font: var(--body-m); color: var(--inv-warm); }
.mi-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem 0 0.5rem; }
.mi-help { font: var(--body-s); color: var(--inv-warm); }
.mi-affix { flex: none; font: var(--body-m); color: var(--inv-warm); }
.mi-affix:first-child { margin-right: 0.375rem; }
.mi-affix:last-child { margin-left: 0.375rem; }
.mi-apply { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--bg-light); border-radius: 0.75rem; font: var(--body-m); }
.mi-apply__label { flex: 1; min-width: 0; }
.mi-apply__field { flex: none; width: 6rem; }
.mi-kv__badge { display: inline-flex; align-items: center; gap: 0.5rem; }
.mi-ab { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 60; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.25rem 0.25rem 0.875rem; background: var(--charcoal); color: var(--white); border-radius: 62.4375rem; box-shadow: var(--shadow-pop); font: var(--label-s); }
.mi-ab__label { margin-right: 0.5rem; color: rgba(255, 255, 255, 0.7); }
.mi-ab__opt { padding: 0.5rem 0.75rem; border-radius: 62.4375rem; font: var(--label-s); color: rgba(255, 255, 255, 0.85); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.mi-ab__opt.is-on { background: var(--white); color: var(--charcoal); }
.has-bar .mi-ab { bottom: 7.5rem; }
@media (max-width: 47.9375rem) { .mi-fields { grid-template-columns: 1fr; } .mi-apply { flex-wrap: wrap; } .mi-ab { right: 0.75rem; bottom: 0.75rem; } }

/* ---------- interest callout on Withdraw early (#142) ---------- */
.mi-callout { margin: 1rem 0 0.25rem; padding: 0.75rem 1rem; background: var(--inv-badge-bg); border-radius: 0.5rem; font: var(--body-m); color: var(--text-primary); }
.mi-callout strong { font: var(--label-m); }

/* ---------- after Eftim's review (decisions/027): 3 cards on the SaveSmart / Marketplace tabs, listings row ---------- */
.mi-overview--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mi-listings { padding: 0.25rem 1.5rem 0; font: var(--body-m); color: var(--inv-warm); }
.mi-listings .inv-link { display: inline-flex; align-items: center; gap: 0.25rem; font: var(--label-m); text-decoration: none; }
.mi-listings .inv-link span { text-decoration: underline; text-underline-offset: 0.125rem; }
.mi-listings .inv-link svg { width: 1rem; height: 1rem; flex: none; }

/* ============================================================
   Mobile (<= 768): the same rules as the Figma section "Invest -
   mobile" (13 September) and the demo's Invest mobile layout.
   Cards after the marketplace mobile card (logo + id, 2x2 stats,
   full-width status, divider, note + button), the overview as a
   2x2 grid, no quick filters (the sort moves into the filters
   sheet), the sale list as a bottom sheet, modals as sheets, the
   loan panel full screen with stacked actions. Since 29 September
   this is the official /my-investments (the 1280 px gate is gone);
   /mobile/my-investments only redirects here.
   ============================================================ */

/* mobile-only elements stay out of the desktop layout */
.inv-fgroup--sort, .mi-sorted { display: none; }
.mi-results { display: inline-flex; align-items: center; gap: 1rem; }

@media (max-width: 48rem) {
  /* ---- overview: horizontal scroller bleeding to the right screen edge, two cards in view + the third cut,
          dots under it (Georgi 28.09) ---- */
  .mi-overview-wrap { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
  /* Georgi 28.09 (2): wider cards (229 px, ~118 px tall) and the scroller spans the whole screen width,
     so the cards slide out under both screen edges; the only gutter is the 1rem scroll padding on the left */
  .mi-overview, .mi-overview--3 { display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; width: calc(100% + 2rem); margin-left: -1rem; margin-right: -1rem; padding: 0 0 0 1rem; scroll-padding-left: 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mi-overview::-webkit-scrollbar { display: none; }
  .mi-overview::after { content: ''; flex: 0 0 0.0625rem; margin-left: -0.75rem; }
  .mi-stat { flex: 0 0 14.3125rem; scroll-snap-align: start; padding: 1rem; gap: 0.25rem; min-width: 0; }
  .mi-stat__value { font: var(--title-l); overflow-wrap: anywhere; }
  .mi-stat__sub { overflow-wrap: anywhere; }
  .mi-dots { display: flex; justify-content: center; gap: 0.375rem; }
  .mi-dots:empty { display: none; }
  .mi-dots__dot { display: block; width: 0.375rem; height: 0.375rem; border-radius: 62.4375rem; background: var(--track); transition: width 0.2s var(--ease), background 0.2s var(--ease); }
  .mi-dots__dot.is-on { width: 1rem; background: var(--charcoal); }

  /* ---- filters row: [Advanced filters] [Actions], results / sorted lines under them ---- */
  .inv-filters .inv-select-wrap.mi-bulk { display: inline-flex; flex: 1 1 0; min-width: 0; }
  .mi-bulk .inv-adv { width: 100%; }
  .mi-divider { display: none; }
  .mi-results { order: 2; width: 100%; padding-top: 0.25rem; justify-content: space-between; }
  .mi-results .inv-filters__results { order: 0; width: auto; padding-top: 0; }
  .mi-results .inv-link { flex: none; white-space: nowrap; }
  .mi-sorted { display: block; order: 3; width: 100%; font: var(--body-m); color: var(--inv-warm); }
  .mi-results + .mi-divider + .inv-select-wrap { display: none; }
  .inv-fgroup--sort { display: flex; }
  .inv-fgroup--sort .inv-choices { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .mi-hint { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 1rem; }

  /* ---- the card ---- */
  .mi-card { border-radius: 0.75rem; border-color: var(--border); }
  .mi-card:hover { box-shadow: none; }
  .mi-card--picked { border-color: var(--charcoal); }
  .mi-card__summary {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0;
    grid-template-areas: "id id" "invested next" "status status" "foot foot";
    padding: 1rem; gap: 0; align-items: start;
  }
  .mi-list--selecting .mi-card__summary { grid-template-columns: 1.25rem minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "check id id" ". invested next" ". status status" ". foot foot"; }
  .mi-card__check { grid-area: check; align-self: start; margin-top: 0.125rem; }
  .mi-list--selecting .mi-card__summary { column-gap: 0.75rem; }
  .mi-card__id { grid-area: id; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
  .mi-card__logo { height: 1.25rem; margin: 0; }
  .mi-card__loan { margin-left: auto; font: var(--body-m); color: var(--inv-warm); }
  .mi-card__meta { flex: 1 1 100%; padding-top: 0.25rem; }
  .mi-card__badges { flex: 1 1 100%; margin-top: 0.25rem; }
  .mi-col, .mi-col--grow { width: auto; flex: none; padding-top: 0.75rem; gap: 0.25rem; }
  .mi-col--lead { grid-area: invested; }
  .mi-col--lead + .mi-col { grid-area: next; }
  .mi-col--grow { grid-area: status; }
  .mi-col__value, .mi-col--lead .mi-col__value { font: var(--title-l); overflow-wrap: anywhere; }
  .mi-col--grow .mi-col__value { font: var(--body-m); }
  .mi-col__sub { overflow-wrap: anywhere; }
  .mi-card__summary--noact .mi-card__action { display: none; }
  .mi-card__action { grid-area: foot; width: auto; padding-top: 1rem; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 0.75rem; text-align: left; }
  .mi-card__price { flex: 1 1 0; min-width: 0; }
  .mi-card__action .inv-btn-sm { height: 2.5rem; padding: 0 1.25rem; font: var(--label-m); }
  .mi-listings { padding: 0.25rem 0 0; }
  .mi-empty { padding: 2.5rem 1.25rem; border-radius: 0.75rem; }

  /* ---- sale list: sticky bar + bottom sheet with its own actions ---- */
  .inv-order__lines.mi-sale-lines { gap: 0.75rem; }
  .mi-sale-line { padding-bottom: 0.75rem; border-bottom: 0.0625rem solid var(--border); }
  .mi-sale-line:last-child { border-bottom: 0; padding-bottom: 0; }
  .has-bar .mi-toast { bottom: 10rem; }
  .mi-toast { bottom: 5rem; }

  /* ---- yes / no modals as sheets (Revoke, Remove SM listing) ---- */
  .inv-modal__footer .inv-btn-md--dark { width: 100%; height: 3rem; font: var(--inv-label-l); }

  /* ---- loan panel: full screen, stacked actions ---- */
  .mi-panel__footer { padding: 1rem 1.25rem 1.25rem; }
  .loan-sidebar__footer .mi-acts { flex-direction: column; gap: 0.75rem; }
  .loan-sidebar__footer .mi-act { flex: none; width: 100%; }
  .loan-sidebar__footer .mi-act .inv-btn-md { height: 3rem; font: var(--inv-label-l); }
  .mi-kv { gap: 1rem; }

  /* ---- Confirm the sale / Early withdrawal / Done pages ---- */
  .mi-apply { flex-wrap: wrap; }
  .mi-apply__label { flex: 1 1 100%; }
  .mi-apply__field { flex: 1 1 0; }
  .mi-ab { right: 0.75rem; bottom: 0.75rem; }
  .has-bar .mi-ab { bottom: 10rem; }
}