/* ==========================================================================
   Account page (#/accounts/<id>): js/views/account-page.js (the head and the
   tabs) and the single-account Dashboard (js/views/dashboard.view.js) under
   it. New look, stage 2 (docs/PROPOZYCJA-WYGLADU-2026-10-17.md): Inter, the
   Apple type scale, windows 22 recessed, groups 12, capsule and circle
   controls, no tracked capitals, arrows on gain and loss.

   The desk's FRAME (the .ac-desk rule just below: inset, radius, background,
   shadow, lit edge) is stage 1's. Everything inside it, and every window
   under it, is written here.
   --acct is the account's colour token (identity, never direction).
   ========================================================================== */

.view-container--acct {
  --ac-gutter: var(--section-gap);
  padding-top: 0;
}

@media (max-width: 560px) {
  .view-container--acct {
    --ac-gutter: var(--space-4);
  }
}

/* ---- The desk ---- */
.ac-desk {
  /* Out to the container's edge, back in by the frame: the card's width is
     the top bar's. Its look (colour, corners, edge, shadow) is .desk's. */
  margin: 0 calc(var(--ac-gutter) * -1 + var(--frame));
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 24px 40px 34px;
  container: acdesk / inline-size;
}

/* The desk's tooltips are sentences: they wrap. */
.ac-desk [data-tooltip]::after {
  width: max-content;
  max-width: min(260px, 70vw);
  white-space: normal;
  line-height: 1.35;
}

/* ==========================================================================
   Inside the desk (look stage 2). The frame above is stage 1's. Everything
   here is the account's own head: its name, balance, key figures and curve.
   No rotating display, no New trade button of its own (the top bar's
   preselects this account), one quiet line for today.
   ========================================================================== */

/* Height from content, not "fill the first screen" (audit point 2). */
.ac-desk {
  min-height: 0;
  gap: 24px;
}

/* ---- Head: the way back, the tile, the name and broker line | today ---- */
.ac-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  flex-wrap: wrap;
}

.ac-status__id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Icon-only: a circle, 44px (the touch size). */
.ac-back {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tile);
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}

.ac-back:hover {
  color: var(--text-1);
  background: var(--tile-2);
}

.ac-back:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 2px;
}

/* The account's colour as a dot at its name (identity, never direction). */
.ac-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--acct);
  vertical-align: 1px;
}

.ac-status__text {
  min-width: 0;
}

.ac-status__name {
  margin: 0;
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-1);
  overflow-wrap: anywhere;
}

.ac-status__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-2);
}

.ac-status__meta > span:not(:last-child)::after {
  content: ",";
}

/* Today's state, one quiet line (right on a computer, under the name on a phone). */
.ac-today {
  flex: 0 1 520px;
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-2);
  text-align: right;
}

.ac-today:empty {
  display: none;
}

/* ---- Desk body: the figures (left), the curve ---- */
.ac-desk__grid {
  display: grid;
  grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
  gap: 24px 48px;
  align-items: stretch;
}

.ac-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.ac-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

/* A size container, so the balance is sized against its own column: as large
   as the column allows for its number of characters (--len, set by the
   view), up to the key figure's 56px - a seven-digit or yen balance must not
   run out of the desk on a phone. The key figure: 56px, weight 500, -0.03em,
   tabular (the same on the account page, Analytics and Planner). */
.ac-bal {
  container-type: inline-size;
  width: 100%;
}

.ac-big {
  --fig-max: 56px;
  margin-top: 6px;
  font-size: min(var(--fig-max), calc(100cqi / (var(--len, 10) * 0.56)));
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-1);
  white-space: nowrap;
}

.ac-big small {
  margin-left: 3px;
  font-size: min(26px, 0.4em);
  letter-spacing: -0.02em;
  color: var(--text-2);
}

.ac-net {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}

/* The period's result: 28px, a step under the key figure; gain and loss by
   colour and by arrow. */
.ac-fig {
  margin-top: 4px;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-1);
}

.ac-fig small {
  margin-left: 3px;
  font-size: 17px;
  font-weight: 500;
  color: var(--text-2);
}

.ac-fig.text-profit,
.ac-kpi b.text-profit {
  color: var(--gain);
}

.ac-fig.text-loss,
.ac-kpi b.text-loss {
  color: var(--loss);
}

.ac-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  width: 100%;
}

.ac-kpi b {
  display: block;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-1);
  overflow-wrap: anywhere;
}

.ac-kpi b.text-tertiary {
  color: var(--text-3);
}

.ac-kpi span {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

/* The account's curve: the desk's chart, no window around it. */
.ac-chart {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 280px;
}

.ac-chart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
}

.ac-chart__cap {
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

.ac-chart__canvas.chart-card__canvas-wrap {
  flex: 1;
  height: auto;
  min-height: 240px;
  margin-top: 4px;
}

.ac-chart__canvas > canvas {
  position: absolute;
  top: 0;
  left: 0;
}

/* ---- The chart's own menu: period and unit behind a round button ---- */
.ac-menu {
  position: relative;
  flex: none;
  z-index: 3;
}

.ac-menu__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tile);
  color: var(--text-2);
  cursor: pointer;
}

/* 44 px touch target around the 40 px circle. */
.ac-menu__btn::after {
  content: "";
  position: absolute;
  inset: -2px;
}

.ac-menu__btn:hover,
.ac-menu__btn[aria-expanded="true"] {
  color: var(--text-1);
  background: var(--tile-2);
}

.ac-menu__btn:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 2px;
}

.ac-menu__pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 14px 16px;
  border-radius: 22px;
  background: var(--tile);
  box-shadow: 0 0 0 1px var(--color-border-strong), 0 12px 28px -12px rgba(0, 0, 0, 0.35);
}

.ac-menu__pop[hidden] {
  display: none;
}

.ac-menu__pop > * {
  max-width: 100%;
}

.ac-menu__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

.ac-menu__label:not(:first-child) {
  margin-top: 4px;
}

/* ---- Tabs under the desk: Overview, and links into the account's other
   sections (Trades, Results, Plan, Cash flow) ---- */
.acct-tabs {
  display: flex;
  gap: 32px;
  margin: calc(var(--section-gap) * -0.5) 8px 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden; /* sideways only (card.css .pill-toggle--scroll) */
  scrollbar-width: none;
}

.acct-tabs::-webkit-scrollbar {
  display: none;
}

.acct-tabs__tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 0 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color var(--dur-fast) var(--ease-standard);
}

.acct-tabs__tab:hover {
  color: var(--text-1);
}

.acct-tabs__tab.is-active {
  color: var(--text-1);
  box-shadow: inset 0 -2px 0 var(--lead);
}

.acct-tabs__tab:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 2px;
  border-radius: 10px;
}

/* ==========================================================================
   The windows (the style of Portfolio's windows, v13's insides): a grid with
   aligned rows. Four equal windows in the first row (limits, recent trades,
   challenge, insights), then pairs, then one across. Equal heights in a row,
   content at the top, the footer link at the bottom.
   ========================================================================== */
.ac-wins {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

/* ---- A tab other than Overview: another view's section under the tabs
   (TJ.Router's frame, js/core/router.js). The page above stays; the
   section's own .view-container gives the gap under the tabs. ---- */
.ac-wins[hidden],
.ac-slot[hidden] {
  display: none;
}

[data-acct-own]:has(.ac-wins[hidden]) .view-container--acct {
  padding-bottom: 0;
}

.ac-section-in {
  animation: fade-in var(--dur-fast) var(--ease-standard) both;
}

@media (prefers-reduced-motion: reduce) {
  .ac-section-in {
    animation: none;
  }
}

/* The page names the account, so a section does not offer another one. */
.ac-slot [data-account-filter],
.ac-slot .jv-chipwrap:has([data-chip="account"]) {
  display: none;
}

.ac-wins > .ac-win {
  min-width: 0;
  gap: 0;
  padding: 18px 20px;
  border-radius: var(--r-window);
  background: var(--window);
  box-shadow: var(--window-edge);
}

.ac-wins > .ac-win--2 {
  grid-column: span 2;
}

/* The last trades fill the row beside the month (no hole at the right of it). */
.ac-wins > .ac-win--3 {
  grid-column: span 3;
}

.ac-wins > .ac-win--span4,
.ac-wins > .ac-win--checkin {
  grid-column: 1 / -1;
}

@container vwins (max-width: 1000px) {
  .ac-wins {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ac-wins > .ac-win--3 {
    grid-column: auto;
  }

  .ac-wins > .ac-win--span4,
  .ac-wins > .ac-win--checkin {
    grid-column: 1 / -1;
  }
}

@container vwins (max-width: 560px) {
  .ac-wins {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  /* A window's phone padding (css/components/desk.css .win; the operator 21.10). */
  .ac-wins > .ac-win {
    padding: 14px 16px;
  }

  .ac-wins > .ac-win--2,
  .ac-wins > .ac-win--span4 {
    grid-column: auto;
  }
}

/* Window header: the title left, a quiet note right on the same baseline. */
.ac-win .win__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}

.ac-win .win__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-1);
}

.ac-win .win__note {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
  white-space: nowrap;
}

/* A line pinned to the foot of a window: the way on to the view that has it all. */
a.ac-foot,
button.ac-foot {
  margin-top: auto;
  padding: 14px 0 0;
  align-self: flex-start;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lead);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

a.ac-foot:hover,
button.ac-foot:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

a.ac-foot:focus-visible,
button.ac-foot:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 2px;
  border-radius: 10px;
}

@media (max-width: 880px), (pointer: coarse) {
  a.ac-foot,
  button.ac-foot {
    min-height: 44px;
    display: inline-flex;
    align-items: flex-end;
    padding-bottom: 4px;
  }
}

.ac-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}

.ac-note {
  padding-top: 12px;
  font-size: 13px;
}

.ac-note:empty {
  display: none;
}

/* Rows: a name and a line under it, hairline between rows. */
.ac-row {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.ac-row:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.ac-row b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}

.ac-row span {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-2);
}

/* ---- Risk limits ---- */
.ac-lead {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ac-lead b {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-1);
}

.ac-lead span {
  font-size: 13px;
  color: var(--text-2);
}

/* The month's trading days as small squares: within the limit, over it,
   today outlined; the day number under each. */
.ac-days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14px, 1fr));
  gap: 8px 4px;
  margin: 14px 0 6px;
}

.ac-days > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* The same squares as Portfolio's day strip (.pf-days2): lower, softer, a calmer share of the colour. */
.ac-days i {
  display: block;
  width: 100%;
  height: 16px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--gain) 22%, var(--window));
}

.ac-days .is-over i {
  background: color-mix(in srgb, var(--loss) 55%, var(--window));
}

.ac-days .is-bare i {
  background: none;
}

.ac-days .is-today i {
  box-shadow: inset 0 0 0 1.5px var(--lead);
}

.ac-days span {
  font-size: 12px;
  color: var(--text-2);
}

.ac-days .is-today span {
  color: var(--text-1);
  font-weight: 600;
}

/* A limit: the name and "0.4 of 2%" over a thin bar. */
.lm {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.lm:first-child {
  border-top: 0;
  padding-top: 0;
}

.lm > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.lm > div:first-child span {
  color: var(--text-1);
}

.lm b {
  font-weight: 600;
}

.lm .vbar {
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
}

.lm .vbar > i {
  border-radius: 999px;
}

.ac-lm__val {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* The weekly target's pencil: small, quiet, a 44px target on touch. */
.ac-lm__val .week-card__edit {
  width: 28px;
  height: 28px;
  margin: -8px -6px -8px 0;
  color: var(--text-2);
}

/* ---- Recent trades: a direction square, the name and a line, the result ---- */
.ac-tr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-radius: 12px;
  cursor: pointer;
}

.ac-tr + .ac-tr {
  border-top: 1px solid var(--line);
}

.ac-tr:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 2px;
}

.ac-side {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--win-tile);
  color: var(--text-2);
}

.ac-tx {
  flex: 1;
  min-width: 0;
}

.ac-tx b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}

.ac-tx span {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-r {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-2);
}

.ac-r.text-profit {
  color: var(--gain);
}

.ac-r.text-loss {
  color: var(--loss);
}

/* ---- Challenge ---- */
.ac-win--challenge .challenge-widget__name {
  margin-top: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}

.ac-win--challenge .challenge-widget__sub {
  font-size: 13px;
  color: var(--text-2);
}

.ac-win--challenge .challenge-widget__row {
  margin-top: 12px;
}

.ac-win--challenge .challenge-widget__row .row-between span {
  font-size: 13px !important;
  color: var(--text-2);
}

.ac-win--challenge .challenge-widget__risk {
  margin-top: 12px;
  padding-top: 12px;
}

.ac-win--challenge .challenge-widget__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

.ac-win--challenge .challenge-widget__pace,
.ac-win--challenge .challenge-widget__note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-2);
}

.ac-win--challenge .meter {
  height: 6px;
  border-radius: 999px;
}

.ac-win--challenge .meter__fill {
  border-radius: 999px;
}

/* ---- Before the session: the steps side by side in a wide window ---- */
.ac-win--checkin .win__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ac-win--checkin .checkin-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 32px;
}

.ac-win--checkin .checkin-step,
.ac-win--checkin .checkin-step + .checkin-step {
  padding: 0;
  border-top: 0;
}

.ac-win--checkin .checkin-step__head {
  margin-bottom: 8px;
}

.ac-win--checkin .checkin-step__q {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}

/* ---- The month (result per day) ---- */
.ac-cal {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  gap: 5px;
  /* A size container: a day's amount is sized against the calendar's width
     (see .ac-cal__v), so seven narrow columns never cut its last digit. */
  container-type: inline-size;
}

.ac-cal__h {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
}

.ac-cal__day {
  min-width: 0;
  height: 48px;
  padding: 5px 4px 5px 6px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--win-tile);
}

/* A day still to come: the quiet text tone, not a faded cell (opacity took
   the day number to 2.4:1; --text-3 keeps 4.5:1 on the tile in both themes). */
.ac-cal__day.is-future .ac-cal__n,
.ac-cal__day.is-future .ac-cal__v {
  color: var(--text-3);
}

.ac-cal__n {
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-2);
}

.ac-cal__v {
  /* 12px while the cell has room; below that the figure follows the cell's
     width (a fifth of it, 9px at the least) so "+$245" and "-$1.2k" fit
     whole on a 375px phone, where seven columns are 40px wide. */
  font-size: clamp(9px, calc(100cqw / var(--cols, 5) * 0.2), 12px);
  letter-spacing: -0.02em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-2);
  white-space: nowrap;
}

.ac-cal__v.text-profit { color: var(--gain); }
.ac-cal__v.text-loss { color: var(--loss); }

/* A phone: seven columns in about 310px. Tighter gaps and side padding give
   the amount the whole 36px of a 41px cell. */
@media (max-width: 560px) {
  .ac-cal {
    gap: 3px;
  }

  .ac-cal__day {
    padding: 5px 2px 5px 3px;
  }
}

/* ---- Curves in windows ---- */
.ac-win__canvas.chart-card__canvas-wrap {
  height: 220px;
  margin-top: 4px;
}

.ac-win__canvas > canvas {
  position: absolute;
  top: 0;
  left: 0;
}

/* ---- The last trades' counts ---- */
.ac-form__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-2);
}

.ac-form__counts b {
  font-weight: 600;
  color: var(--text-1);
}

/* ---- More figures: a figure with its name and a line under it ---- */
.ac-more.vfigs {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px 24px;
}

.ac-more .vfig__value {
  font-size: 22px;
  font-weight: 500;
}

.ac-more .vfig__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

.ac-more .vfig__cap {
  font-size: 13px;
  color: var(--text-2);
}

.vfig.ac-phone-only {
  display: none;
}

/* ---- Narrower than the first column plus a usable curve ---- */
@container acdesk (max-width: 900px) {
  .ac-desk__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ac-kpis {
    max-width: 420px;
  }
}

/* ---- Phone: the bar's title on an account's page ----
   The account's name is the desk's own heading right under the bar; the bar
   repeated it and, beside the Demo data tag, cut it to "Main Acc...". It stays
   in the page for assistive technology (the router writes it) and goes from
   the screen. */
@media (max-width: 880px) {
  .main:has(#view-root .view-container--acct) .topbar__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* ---- Phone: the name, today's line, the balance, the result, the curve,
   the key figures ---- */
@media (max-width: 700px) {
  .ac-desk {
    padding: 16px 20px 24px;
    gap: 18px;
  }

  .ac-status {
    flex-direction: column;
    align-items: flex-start;
  }

  .ac-today {
    flex: none;
    text-align: left;
    font-size: 14px;
  }
}

@media (max-width: 560px) {
  .ac-desk {
    /* 16px at the sides: the top bar's own padding, as on Portfolio. */
    padding: 8px 16px 16px;
    min-height: 0;
    gap: 12px;
  }

  /* The balance 42px, not 56 (the operator 21.10: smaller, more on a screen). */
  .ac-big {
    --fig-max: 42px;
  }

  .ac-status__meta > span:not(.ac-status__ccy) {
    display: none;
  }

  .ac-status__ccy::after {
    content: none !important;
  }

  .ac-desk__grid {
    gap: 12px;
  }

  /* Order on a phone: balance, result, curve, then the figures. */
  .ac-left {
    display: contents;
  }

  .ac-bal { order: 1; }
  .ac-net { order: 2; gap: 8px 24px; }
  .ac-chart { order: 3; height: 184px; min-height: 184px; }
  .ac-kpis { order: 4; gap: 12px 16px; max-width: none; }

  /* A size down (the operator 21.10): the result 19px, the four figures 17px, the curve 184px. */
  .ac-fig {
    font-size: 19px;
  }

  .ac-kpi b {
    font-size: 17px;
  }

  .ac-chart__canvas.chart-card__canvas-wrap {
    min-height: 130px;
  }

  .acct-tabs {
    gap: 24px;
    padding-right: var(--space-8);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }

  .ac-wins > .ac-win {
    padding: 16px 16px 18px;
  }
}