/* touch screens: every :hover that only restyles the element under the finger is fenced to devices that can hover. iOS kept :hover on after a tap,
   so a tapped button or row stayed lit until the next tap. Hovers that reveal something inside (a tooltip, a row's actions) are left as they were */
/* Nods on the phone: the phone shell's own layer. Every rule sits under .m-app, which renders only on a phone-width screen, so the desktop
   never sees any of it. Ink ground, Slate cards, Bone for the one primary action, Long and Short only for market state. Geist for words,
   Inter Tight for every figure. 16px gutters; nothing you tap is under 44px. Bars float on glass over the content, never over a card edge. */
.m-app {
  --m-w: min(100vw, 560px);
  --m-x: max(12px, calc(50vw - var(--m-w) / 2 + 12px));
  --m-bb: calc(10px + env(safe-area-inset-bottom));
  --m-top: calc(56px + env(safe-area-inset-top));
  --m-glass: rgba(24, 24, 27, 0.72);
  --m-blur: blur(22px) saturate(160%);
  min-height: 100vh;
  min-height: 100dvh;
  max-width: var(--m-w);
  margin: 0 auto;
  background: var(--bg-page);
  color: var(--text-primary);
  font: var(--type-body);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
html.force-phone .m-app {
  --m-w: 390px;
  width: 390px;
  box-shadow: 0 0 0 1px var(--line);
}
:where(.m-app button) {
  font-family: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
} /* zero specificity: every system button keeps its own colours */
.m-app .num {
  font-variant-numeric: tabular-nums;
}
.m-grow {
  flex: 1;
}
.m-scr {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(var(--m-bb) + 100px);
  animation: m-fade 220ms var(--ease-out) both;
}
/* the slide in holds no transform once it ends (fill backwards, never forwards): a transform left on the screen would make it the box that
   every fixed bar and sheet inside it (Long / Short, the ticket, the chart's menus) is positioned against, instead of the phone's screen */
.m-scr--stack {
  animation: m-push 320ms var(--ease-out) backwards;
}
@keyframes m-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes m-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes m-push {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-scr,
  .m-scr--stack,
  .m-over,
  .m-feed,
  .m-act,
  .m-sheet,
  .m-sheet-scrim {
    animation: none;
  }
}
/* header: sticky glass, one row */
.m-hd {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 2px;
  height: var(--m-top);
  padding: env(safe-area-inset-top) 6px 0 16px;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.m-hd--bar {
  padding-left: 4px;
  gap: 4px;
}
.m-hd__logo {
  display: inline-flex;
  color: var(--text-primary);
}
.m-hd__mid {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-hd__r {
  display: flex;
  align-items: center;
}
.m-h1 {
  margin: 0;
  font: 600 26px/32px var(--font-ui);
  letter-spacing: -0.025em;
}
.m-ib {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition:
    background-color 160ms var(--ease-out),
    color 160ms;
}
.m-ib:active {
  background: var(--fill-ghost-active);
}
.m-ib--sm {
  width: 36px;
  height: 36px;
  color: var(--text-secondary);
}
.m-ib--fill {
  border-radius: 14px;
  background: var(--surface-raised);
}
.m-ib.is-star {
  color: var(--bone);
}
.m-ib.is-star svg {
  fill: currentColor;
}
.m-ib__dot {
  position: absolute;
  top: 10px;
  right: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bone);
  box-shadow: 0 0 0 2px var(--bg-page);
}
/* the tab bar: a floating glass pill; the tab you are on sits in its own lit capsule */
.m-tabbar {
  position: fixed;
  z-index: 30;
  left: var(--m-x);
  right: var(--m-x);
  bottom: var(--m-bb);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  height: 64px;
  padding: 0 6px;
  border-radius: 32px;
  background: var(--m-glass);
  -webkit-backdrop-filter: var(--m-blur);
  backdrop-filter: var(--m-blur);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 14px 36px rgba(0, 0, 0, 0.6);
}
.m-tab {
  position: relative;
  display: grid;
  place-items: center;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 26px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color 220ms var(--ease-out);
}
.m-tab::before {
  content: "";
  position: absolute;
  inset: 0 3px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 220ms var(--ease-out),
    transform 320ms var(--ease-out);
}
.m-tab > * {
  position: relative;
}
.m-tab.is-on {
  color: var(--text-primary);
}
.m-tab.is-on::before {
  opacity: 1;
  transform: none;
}
.m-tab__me {
  display: inline-grid;
  border-radius: 50%;
  opacity: 0.7;
  box-shadow: 0 0 0 2px transparent;
  transition:
    box-shadow 220ms,
    opacity 220ms;
}
.m-tab.is-on .m-tab__me {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--bone);
}
/* money: the one large figure, cents a step quieter */
/* the figure fills its box and never runs out of it: the box is a container, the size follows the number of characters (--n, set by MMoney) */
.m-money {
  display: block;
  font: 600 40px/46px var(--font-num);
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--text-primary);
}
.m-bal__v,
.m-fit {
  container-type: inline-size;
}
.m-bal__v .m-money,
.m-fit .m-money {
  font-size: min(40px, calc(100cqw / (var(--n) * 0.56)));
  line-height: 46px;
}
.m-money__c {
  color: var(--text-tertiary);
}
/* a hidden figure: its glyphs go clear and a soft glow of their own colour stays where they were. The glow is the text's own shadow, part of its
   paint, so no box can cut it: a filter blur was clipped square at the figure's box on iOS, and flickered as the browser moved it on and off its own layer */
.m-app .m-secret {
  transition:
    text-shadow 200ms var(--ease-out),
    -webkit-text-fill-color 200ms var(--ease-out);
}
.m-app.hide-bal .m-secret {
  filter: none;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 9px currentColor,
    0 0 16px currentColor;
}
.m-app.hide-bal .m-money.m-secret {
  text-shadow:
    0 0 14px currentColor,
    0 0 26px currentColor;
}
/* a hidden figure's blur fades out on every side: the boxes that clip it (the balance, a row's second line, the positions card) stop clipping while
   balances are hidden, so no edge of the blur ever shows */
.m-app.hide-bal
  :is(
    .m-bal__v,
    .m-fit,
    .m-mrow__s,
    .m-arow__s,
    .m-prow__s,
    .m-orow__s,
    .m-plist
  ) {
  overflow: visible;
}
.m-bal {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px 6px;
}
.m-bal__l {
  display: grid;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.m-bal__v,
.m-fit {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.m-bal__d {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 15px/20px var(--font-ui);
  color: var(--text-tertiary);
}
.m-bal__d .nods-num {
  font-size: 15px;
}
/* the eye sits 1px low of the box centre: that is where the middle of the lowercase label beside it is, so the two read as one level line */
.m-eye {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -7px 0 -9px -4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}
.m-bal .nods-btn {
  flex: none;
  height: 48px;
  padding: 0 24px;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 600;
}
/* sections */
.m-sec {
  padding-top: 28px;
}
.m-sec--tight {
  padding-top: 18px;
}
.m-sh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px 12px;
}
.m-sh h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 600 18px/24px var(--font-ui);
  letter-spacing: -0.015em;
}
.m-sh__n {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--surface-raised);
  font: 600 12px/1 var(--font-num);
  color: var(--text-secondary);
}
.m-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: -4px;
  padding: 8px 0;
  border: 0;
  background: none;
  font: 500 14px/20px var(--font-ui);
  color: var(--text-secondary);
  cursor: pointer;
}
.m-l {
  font: 400 13px/18px var(--font-ui);
  color: var(--text-secondary);
}
.m-hs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0 16px 2px;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}
.m-hs::-webkit-scrollbar {
  display: none;
}
.m-hs > * {
  flex: none;
  scroll-snap-align: start;
}
.m-card {
  background: var(--surface-card);
  border: 1px solid var(--line-soft);
  border-radius: 22px;
}
/* home tiles */
.m-ptile {
  display: grid;
  gap: 16px;
  width: 188px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--surface-card);
  text-align: left;
  cursor: pointer;
}
.m-ptile__h {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.m-ptile .coin-ico,
.m-tt .coin-ico {
  border-radius: 50%;
}
.m-ptile__id {
  display: grid;
  justify-items: start;
  gap: 5px;
}
.m-ptile__id b {
  font: 600 15px/18px var(--font-ui);
}
.m-ptile__v {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.m-ptile__v .nods-num:first-child {
  font-size: 19px;
  letter-spacing: -0.02em;
}
.m-ptile__v .nods-num + .nods-num {
  font-size: 13px;
}
.m-tt {
  display: grid;
  width: 236px;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--surface-card);
  overflow: hidden;
  cursor: pointer;
}
.m-tt__h {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  background: var(--surface-raised);
  font: 600 14px/18px var(--font-ui);
}
.m-tt__h b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-tt__b {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
}
.m-tt__v {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.m-tt__v .nods-num {
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.02em;
}
.m-tt__s {
  font: 400 12px/16px var(--font-ui);
  color: var(--text-tertiary);
  white-space: nowrap;
}
/* underline tabs */
.m-seg {
  display: flex;
  gap: 24px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line-soft);
}
.m-seg::-webkit-scrollbar {
  display: none;
}
.m-seg__t {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  height: 50px;
  padding: 0;
  border: 0;
  background: none;
  font: 600 16px/1 var(--font-ui);
  letter-spacing: -0.01em;
  color: var(--text-tertiary);
  white-space: nowrap;
  cursor: pointer;
  transition: color 200ms var(--ease-out);
}
.m-seg__t::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--bone);
  transform: scaleX(0);
  transition: transform 280ms var(--ease-out);
}
.m-seg__t.is-on {
  color: var(--text-primary);
}
.m-seg__t.is-on::after {
  transform: none;
}
.m-seg__n {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--surface-raised);
  font: 600 11px/1 var(--font-num);
  color: var(--text-secondary);
}
.m-seg__ic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.m-seg--sticky {
  position: sticky;
  top: var(--m-top);
  z-index: 15;
  background: var(--bg-page);
}
.m-segrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.m-segrow > .m-seg {
  flex: 1;
  min-width: 0;
  border-bottom: 0;
}
.m-sortbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 17px;
  background: var(--surface-card);
  font: 500 13px/1 var(--font-ui);
  color: var(--text-secondary);
  cursor: pointer;
}
/* chips */
.m-chips {
  display: flex;
  gap: 8px;
  padding: 14px 16px 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.m-chips::-webkit-scrollbar {
  display: none;
}
.m-chip {
  flex: none;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: transparent;
  font: 500 14px/1 var(--font-ui);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background-color 200ms var(--ease-out),
    color 200ms,
    border-color 200ms;
}
.m-chip.is-on {
  border-color: var(--surface-raised);
  background: var(--surface-raised);
  font-weight: 600;
  color: var(--text-primary);
}
/* rows */
.m-list {
  display: grid;
  padding: 6px 0;
}
.m-list--flush {
  padding: 0;
}
.m-mrow,
.m-arow,
.m-prow {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out);
}
.m-mrow:active,
.m-arow:active,
.m-prow:active,
.m-lrow:active,
.m-th:active,
.m-orow:active,
.m-kpi:active {
  background: var(--fill-ghost-active);
}
.m-mrow .coin-ico,
.m-prow .coin-ico,
.m-orow .coin-ico,
.m-mkt .coin-ico,
.m-th .coin-ico,
.m-coins .coin-ico,
.m-kpi .coin-ico {
  border-radius: 50%;
}
.m-mrow__l,
.m-arow__l,
.m-prow__l {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.m-mrow__t,
.m-arow__t,
.m-prow__t {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font: 600 16px/20px var(--font-ui);
  letter-spacing: -0.01em;
}
.m-mrow__t b,
.m-arow__t b,
.m-prow__t b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-mrow__s,
.m-arow__s,
.m-prow__s {
  overflow: hidden;
  font: 400 13px/18px var(--font-ui);
  color: var(--text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-prow__s {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.m-prow__s .nods-num {
  font-size: 13px;
  color: var(--text-secondary);
}
.m-mrow__r,
.m-arow__r,
.m-prow__r {
  display: grid;
  justify-items: end;
  gap: 3px;
}
.m-mrow__r > .nods-num,
.m-arow__r > .nods-num:first-child,
.m-prow__r > .nods-num:first-child {
  font-size: 16px;
  line-height: 20px;
}
.m-arow__r > .nods-num + .nods-num,
.m-prow__r > .nods-num + .nods-num {
  font-size: 13px;
}
.m-arow__time,
.m-prow__time {
  font: 400 12px/16px var(--font-num);
  color: var(--text-tertiary);
}
.m-arow.is-fresh {
  animation: m-fresh 900ms var(--ease-out);
}
@keyframes m-fresh {
  from {
    background: rgba(243, 242, 238, 0.07);
  }
  to {
    background: transparent;
  }
}
.m-arow .nods-btn {
  height: 36px;
  border-radius: 12px;
}
.m-lev {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--surface-raised);
  font: 600 11px/1 var(--font-num);
  color: var(--text-secondary);
}
.m-chg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 13px/16px var(--font-num);
  font-variant-numeric: tabular-nums;
}
.m-chg.is-up {
  color: var(--text-long);
}
.m-chg.is-down {
  color: var(--text-short);
}
.m-tri {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid currentColor;
}
.m-chg.is-down .m-tri {
  transform: rotate(180deg);
}
.m-side {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  font: 600 12px/1 var(--font-ui);
  white-space: nowrap;
}
.m-side.is-long {
  background: var(--long-tint);
  color: var(--text-long);
}
.m-side.is-short {
  background: var(--short-tint);
  color: var(--text-short);
}
.m-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 44px 28px;
  text-align: center;
}
.m-empty > svg,
.m-empty > .nods-icon {
  margin-bottom: 4px;
  color: var(--text-tertiary);
}
.m-empty b {
  font: 600 16px/22px var(--font-ui);
}
.m-empty p {
  max-width: 300px;
  margin: 0;
  font: 400 14px/20px var(--font-ui);
  color: var(--text-secondary);
  text-wrap: pretty;
}
.m-empty .nods-btn {
  margin-top: 8px;
}
.m-more {
  display: block;
  width: calc(100% - 32px);
  height: 48px;
  margin: 6px 16px 0;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--surface-card);
  font: 600 15px/1 var(--font-ui);
  color: var(--text-primary);
  cursor: pointer;
}
/* theses */
.m-th {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.m-th__b {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.m-th__h {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.m-th__h b {
  overflow: hidden;
  font: 600 15px/20px var(--font-ui);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-th__time {
  flex: none;
  margin-left: auto;
  font: 400 12px/1 var(--font-num);
  color: var(--text-tertiary);
}
.m-th__q {
  overflow: hidden;
  font: 400 15px/21px var(--font-ui);
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-th__f {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 400 13px/1 var(--font-ui);
  color: var(--text-tertiary);
}
.m-th__f .nods-num {
  font-size: 13px;
}
.m-th__c {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}
.m-th__c b {
  font-weight: 600;
  color: var(--text-primary);
}
.m-th__k {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
/* market screen */
.m-mkt__id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.m-mkt__nm {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.m-mkt__nm small {
  overflow: hidden;
  font: 400 12px/14px var(--font-ui);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-mkt__nm small.is-px {
  display: flex;
  align-items: center;
  gap: 6px;
  animation: m-fade 200ms var(--ease-out);
}
.m-mkt__nm small.is-px .nods-num {
  font-size: 12px;
  line-height: 14px;
  color: var(--text-primary);
}
.m-mkt__nm small .m-chg {
  font-size: 11px;
}
.m-mkt__tk {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 17px/20px var(--font-ui);
  letter-spacing: -0.015em;
}
.m-mkt__px {
  display: grid;
  gap: 6px;
  padding: 4px 16px 16px;
}
.m-mkt__px > .nods-num {
  font-size: 38px;
  line-height: 42px;
  letter-spacing: -0.04em;
}
.m-mkt__chg {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 14px/1 var(--font-ui);
  color: var(--text-tertiary);
}
.m-mkt__chg .m-chg {
  font-size: 14px;
}
.m-chart {
  position: relative;
  display: flex;
  height: 420px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.m-chart .tvchart {
  flex: 1;
  min-width: 0;
}
.m-chart .tv-top {
  gap: 4px;
  height: 44px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  overflow-y: hidden;
}
.m-chart .tv-top > .nods-iconbtn,
.m-chart .tv-top > .tv-sep,
.m-chart .tv-grow,
.m-chart .tv-lbl,
.m-chart .tv-left {
  display: none !important;
}
/* the intervals fold into one button that names the chart's interval; a tap opens every interval, seconds to weeks, as a sheet */
.m-chart .tv-top .tv-tfs {
  display: none !important;
}
.m-chart .tv-top .tv-tfpick {
  display: block !important;
}
/* the toolbar's controls are thumb-sized (36px), quiet until touched; the one whose menu is open sits on a raised tile */
.m-chart .tv-top .tv-btn {
  height: 36px;
  padding: 0 9px;
  gap: 5px;
  border-radius: 12px;
}
.m-chart .tv-top .nods-iconbtn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}
.m-chart .tv-top :is(.tv-btn.is-on, .nods-iconbtn.is-active) {
  background: var(--surface-raised);
  color: var(--text-primary);
}
.m-chart .tv-tfpick .tv-btn {
  padding: 0 8px 0 11px;
  font: 600 14px/1 var(--font-num);
  color: var(--text-primary);
}
/* the favourite drawing tools float over the chart only while drawing */
.m-chart:not(.is-draw) .tvd-favs {
  display: none !important;
}
.m-chart .tv-bottom {
  gap: 2px;
  padding: 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.m-chart .tv-bottom::-webkit-scrollbar {
  display: none;
}
.m-chart .tv-bottom > * {
  flex: none;
}
.m-chart .tv-bottom .tv-clock,
.m-chart .tv-bottom .tv-sep {
  display: none;
}
.m-chart .tv-bottom .tv-grow {
  display: block !important;
  flex: 1 1 auto;
} /* the ranges on the left, the scale modes (%, log, auto) on the right */
.m-chart .tv-top .tv-rel:has(.nods-iconbtn) {
  display: inline-flex;
}
/* the chart's menus on the phone are the app's own sheet (MSheet, fitted to its rows): the handle on top, a title, then the rows straight
   on the sheet's glass with hairlines between them; choices are the app's chips and switches */
.m-sheet--fit .m-sheet__b {
  padding-bottom: var(--m-sheet-off, 0px);
}
.tvs.tvs {
  width: auto;
  min-width: 0;
  max-width: none;
  max-height: none;
  overflow: visible;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom));
}
.tvs__h {
  padding: 2px 2px 10px;
}
.tvs__h b {
  font: 600 24px/30px var(--font-ui);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.tvs .tv-item {
  height: auto;
  min-height: 54px;
  gap: 14px;
  padding: 0 2px;
  border-radius: 0;
  background: none;
  font: 500 16px/20px var(--font-ui);
  color: var(--text-primary);
  white-space: normal;
}
.tvs :is(.tv-item, .tvd-it, .tvd-tr) + :is(.tv-item, .tvd-it, .tvd-tr) {
  border-top: 1px solid var(--line-soft);
}
.tvs .tv-item.is-on,
.tvs :is(.tvd-it, .tvd-tr).is-on {
  background: none;
}
@media (hover: hover) {
  .tvs .tv-item:hover,
  .tvs :is(.tvd-it, .tvd-tr):hover {
    background: none;
  }
}
.tvs :is(.tv-item, .tvd-it__b, .tvd-tr__b):active {
  background: rgba(243, 242, 238, 0.05);
}
.tvs .tv-item > svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
}
.tvs .tvd-it__chk {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--text-primary);
}
.tvs .tv-item > .tv-item__chk {
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--text-primary);
}
/* every on / off row carries the app's switch, never a checkbox */
.tvs .tv-item:has(> :is(.tv-check, .tv-chk)) {
  justify-content: space-between;
}
.tvs :is(.tv-check, .tv-chk) {
  order: 2;
  position: relative;
  flex: none;
  margin: 0;
  width: 51px;
  height: 31px;
  border: 0;
  border-radius: 16px;
  background: var(--surface-raised);
  transition: background-color 200ms var(--ease-out);
}
.tvs :is(.tv-check, .tv-chk) svg {
  display: none;
}
.tvs :is(.tv-check, .tv-chk)::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--ash);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition:
    transform 220ms var(--ease-out),
    background-color 200ms var(--ease-out);
}
.tvs :is(.tv-check, .tv-chk).is-on {
  background: var(--bone);
}
.tvs :is(.tv-check, .tv-chk).is-on::after {
  transform: translateX(20px);
  background: var(--ink);
}
/* each chart type carries its own drawing (TypeGlyph, Chart.jsx), the chosen one in full white */
.tvs.tv-fly--type .tv-item > svg.tv-tyg {
  width: 22px;
  height: 22px;
}
.tvs .tv-item.is-on > svg.tv-tyg {
  color: var(--text-primary);
}
.tvs .tv-item__sep {
  height: 1px;
  margin: 6px 0;
  background: var(--line);
}
.tvs .tv-item--row {
  cursor: default;
}
.tvs .tv-seg {
  gap: 2px;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-raised);
}
.tvs .tv-seg button {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  font: 600 14px/1 var(--font-ui);
}
.tvs .fine {
  margin: 0;
  padding: 14px 2px 0 !important;
  font: 400 13px/18px var(--font-ui);
  color: var(--text-tertiary);
}
/* the intervals: a row of chips per unit, the chosen one in Bone */
.tvs .tv-tfg + .tv-tfg {
  margin-top: 8px;
}
.tvs .tvd-sec,
.tvs .tv-trdp__sec {
  padding: 0 2px 8px;
  font: 600 12px/16px var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.tvs .tvd-sec,
.tvs .tv-trdp__sec {
  padding-top: 18px;
}
.tvs .tv-tfg__row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.tvs .tv-tf {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0;
  border-radius: 14px;
  background: var(--surface-raised);
  color: var(--text-secondary);
  font: 600 15px/1 var(--font-num);
  text-align: center;
  transition:
    background-color 160ms var(--ease-out),
    color 160ms var(--ease-out),
    transform 160ms var(--ease-out);
}
@media (hover: hover) {
  .tvs .tv-tf:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0;
    border-radius: 14px;
    background: var(--surface-raised);
    color: var(--text-secondary);
    font: 600 15px/1 var(--font-num);
    text-align: center;
    transition:
      background-color 160ms var(--ease-out),
      color 160ms var(--ease-out),
      transform 160ms var(--ease-out);
  }
}
.tvs .tv-tf:active {
  transform: scale(0.96);
}
.tvs .tv-tf.is-on {
  background: var(--bone);
  color: var(--text-on-accent);
}
/* the drawing tools: a tool per row with its favourite star, the one in hand carries the check; no key hints on a phone */
.tvs .tvd-it,
.tvs .tvd-tr {
  min-height: 54px;
  border-radius: 0;
}
.tvs .tvd-it__b,
.tvs .tvd-tr__b {
  height: 54px;
  gap: 14px;
  padding: 0 2px;
  font: 500 16px/20px var(--font-ui);
}
.tvs .tvd-it__k {
  display: none;
}
.tvs .tvd-it.is-on .tvd-it__l,
.tvs .tvd-tr.is-on .tvd-tr__l {
  font-weight: 650;
}
.tvs .tvd-star {
  width: 44px;
  height: 44px;
  margin: 0 -10px 0 0;
  opacity: 1;
}
.tvs .tvd-star svg {
  width: 18px;
  height: 18px;
}
.tvs .tvd-tr__i {
  width: 40px;
  height: 40px;
}
.tvs .tvd-tr__i svg {
  width: 18px;
  height: 18px;
}
.tvs .tvd-tr__t {
  font-size: 14px;
}
.tvs .tvd-empty {
  padding: 2px 2px 6px;
  font: 400 15px/21px var(--font-ui);
  color: var(--text-tertiary);
}
.tvs .tvd-icons {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  padding: 0;
}
.tvs .tvd-ico {
  width: auto;
  height: 50px;
  border-radius: 14px;
  background: var(--surface-raised);
}
.tvs .tvd-ico svg {
  width: 22px;
  height: 22px;
}
.tvs .tvd-ico.is-on {
  background: var(--bone);
  color: var(--text-on-accent);
}
.tvs .tvd-mi {
  padding: 12px 2px;
  align-items: center;
}
.tvs .tvd-mi > svg {
  margin-top: 0;
}
.tvs .tvd-mi__t {
  gap: 3px;
}
.tvs .tvd-mi__t b {
  font: 600 16px/20px var(--font-ui);
}
.tvs .tvd-mi__t small {
  font: 400 13px/18px var(--font-ui);
  color: var(--text-tertiary);
}
.tvs .tvd-li.is-danger:not(:disabled),
.tvs .tvd-li.is-danger:not(:disabled) > svg {
  color: var(--text-short);
}
/* traders on the chart: whose trades as four chips, the bubbles as switch rows */
.tvs .tv-trdp__h {
  padding: 0 2px 2px;
  margin-top: -6px;
}
.tvs .tv-trdp__h strong {
  display: none;
}
.tvs .tv-trdp__h span {
  font: 400 14px/20px var(--font-ui);
  color: var(--text-tertiary);
} /* the sheet's title says it; the line under it says what the bubbles are */
.tvs .tv-trdp__who {
  gap: 6px;
  padding: 0;
}
.tvs .tv-trdp__who button {
  gap: 7px;
  padding: 13px 2px 12px;
  border-radius: 14px;
  background: var(--surface-raised);
  color: var(--text-secondary);
  font: 500 13px/16px var(--font-ui);
}
@media (hover: hover) {
  .tvs .tv-trdp__who button:hover {
    gap: 7px;
    padding: 13px 2px 12px;
    border-radius: 14px;
    background: var(--surface-raised);
    color: var(--text-secondary);
    font: 500 13px/16px var(--font-ui);
  }
}
.tvs .tv-trdp__who button.is-on {
  background: var(--bone);
  color: var(--ink);
  font-weight: 600;
}
.tvs .tv-trdp__who svg {
  width: 19px;
  height: 19px;
}
.tvs .tv-trdp__opts {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.tvs .tv-trdp__row {
  min-height: 64px;
  padding: 10px 2px;
  border-radius: 0;
}
@media (hover: hover) {
  .tvs .tv-trdp__row:hover:not(:disabled) {
    background: none;
  }
}
.tvs .tv-trdp__row + .tv-trdp__row {
  border-top: 1px solid var(--line-soft);
}
.tvs .tv-trdp__t b {
  font: 600 15px/20px var(--font-ui);
}
.tvs .tv-trdp__t small {
  font: 400 13px/18px var(--font-ui);
}
.tvs .tv-sw {
  width: 51px;
  height: 31px;
  border-radius: 16px;
}
.tvs .tv-sw::after {
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
}
.tvs .tv-sw.is-on::after {
  transform: translateX(20px);
}
/* drawing tools stay out of the way until asked for: a tab on the chart's left edge slides the tool column out, and rides on its edge while it is open */
.m-chart.is-draw .tv-left {
  display: flex !important;
}
.m-draw {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 50%;
  display: grid;
  place-items: center;
  width: 24px;
  height: 60px;
  margin-top: -30px;
  padding: 0;
  border: 0;
  border-radius: 0 16px 16px 0;
  background: rgba(30, 30, 33, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    6px 0 18px rgba(0, 0, 0, 0.35);
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 160ms var(--ease-out),
    width 160ms var(--ease-out);
}
.m-draw::before {
  content: "";
  position: absolute;
  inset: -10px -22px -10px 0;
} /* a thumb-wide target around a slim tab */
.m-draw:active {
  color: var(--text-primary);
}
.m-draw:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.m-chart.is-draw .m-draw {
  left: 38px;
  color: var(--text-primary);
  transition:
    left 240ms var(--ease-out),
    color 160ms var(--ease-out),
    width 160ms var(--ease-out);
} /* it slides out with the column; on closing it jumps straight back to the edge, never floating loose */
.m-chart.is-draw .tv-left {
  background: rgba(14, 14, 16, 0.96);
  animation: m-draw-in 240ms var(--ease-out);
}
@keyframes m-draw-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-draw,
  .m-chart.is-draw .m-draw {
    transition: none;
  }
  .m-chart.is-draw .tv-left {
    animation: none;
  }
}
.m-orow.m-orow--ro {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  padding-right: 16px;
  cursor: default;
}
.m-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 16px 16px 0;
}
.m-stat {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  text-align: center;
}
.m-stat > span {
  font: 400 12px/16px var(--font-ui);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.m-stat b {
  font: 600 15px/20px var(--font-num);
  white-space: nowrap;
}
.m-pc {
  display: grid;
  gap: 16px;
  margin: 0 16px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--surface-card);
}
.m-pc__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.m-pc__id {
  display: grid;
  justify-items: start;
  gap: 8px;
}
.m-pc__mode {
  font: 400 13px/1 var(--font-ui);
  color: var(--text-tertiary);
}
.m-pc__pnl {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 0;
}
.m-pc__pnl .nods-num:first-child {
  font-size: 26px;
  line-height: 30px;
  letter-spacing: -0.03em;
}
.m-pc__pnl .nods-num + .nods-num {
  font-size: 14px;
}
.m-pc__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.m-pc__grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.m-pc__grid dt {
  font: 400 12px/16px var(--font-ui);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.m-pc__grid dd {
  margin: 0;
  white-space: nowrap;
}
.m-pc__grid dd .nods-num {
  font-size: 14px;
}
.m-pc__tpsl {
  display: flex;
  gap: 18px;
  font: 400 13px/1 var(--font-ui);
  color: var(--text-tertiary);
}
.m-pc__tpsl b {
  margin-left: 6px;
  font: 600 13px/1 var(--font-num);
  color: var(--text-primary);
}
.m-pc__acts {
  display: grid;
  grid-template-columns: 1fr 1fr 44px;
  gap: 8px;
}
.m-pc__acts .nods-btn {
  height: 44px;
  border-radius: 14px;
  font-size: 15px;
}
.m-orow {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 36px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 8px 8px 16px;
  cursor: pointer;
  transition: background-color 160ms;
}
.m-orow__l {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.m-orow__l b {
  font: 600 15px/20px var(--font-ui);
}
.m-orow__l .is-long {
  color: var(--text-long);
}
.m-orow__l .is-short {
  color: var(--text-short);
}
.m-orow__s {
  overflow: hidden;
  font: 400 13px/18px var(--font-ui);
  color: var(--text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-orow__r {
  display: grid;
  justify-items: end;
  gap: 3px;
}
.m-orow__r .nods-num {
  font-size: 15px;
}
.m-orow__r small {
  font: 400 12px/1 var(--font-num);
  color: var(--text-tertiary);
}
.m-book {
  display: flex;
  height: 540px;
  padding: 4px 8px 0;
}
.m-book .book {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
}
.m-book .book__tabs .nods-iconbtn {
  display: none;
}
/* Long and Short: one glass bar under the thumb */
.m-act {
  animation: m-rise 280ms var(--ease-out) 330ms backwards;
  position: fixed;
  z-index: 30;
  left: var(--m-x);
  right: var(--m-x);
  bottom: var(--m-bb);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
  border-radius: 28px;
  background: var(--m-glass);
  -webkit-backdrop-filter: var(--m-blur);
  backdrop-filter: var(--m-blur);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 14px 36px rgba(0, 0, 0, 0.6);
}
.m-act__b {
  display: grid;
  place-items: center;
  height: 52px;
  border: 0;
  border-radius: 20px;
  font: 600 17px/1 var(--font-ui);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    transform 160ms var(--ease-out),
    filter 160ms;
}
.m-act__b:active {
  transform: scale(0.97);
}
.m-act__l {
  background: var(--long);
  color: var(--text-on-long);
}
.m-act__s {
  background: var(--short);
  color: var(--text-on-short);
}
/* the ticket as a sheet: the desktop ticket, sized for a thumb */
.m-tkt .nods-dialog__body {
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
}
.m-tkt__t {
  display: flex;
  align-items: center;
  gap: 10px;
}
.m-tkt__t b {
  font: 600 18px/1 var(--font-ui);
}
.m-tkt__t .nods-num {
  font-size: 15px;
  color: var(--text-secondary);
}
.m-tkt__t .coin-ico {
  border-radius: 50%;
}
.m-tkt .ticket {
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
}
.m-tkt .ticket .nods-btn--sm {
  height: 38px;
  font-size: 13px;
}
.m-tkt .ticket > .nods-btn--lg {
  height: 54px;
  border-radius: 18px;
  font-size: 17px;
}
.m-tkt .ticket .nods-seg--lg .nods-seg__item {
  height: 44px;
  font-size: 15px;
}
.m-tkt .ticket .nods-seg--sm .nods-seg__item {
  height: 34px;
  font-size: 13px;
}
.m-tkt .ticket .nods-input--lg {
  height: 52px;
}
.m-tkt .ticket .tpsl .nods-input {
  height: 46px;
}
.m-tkt .ticket .nods-tabs .nods-tab {
  height: 42px;
  font-size: 14px;
}
.m-tkt .ticket .nods-check {
  font-size: 14px;
  line-height: 20px;
}
.m-tkt .ticket .ticket__row {
  min-height: 24px;
  font-size: 13px;
}
.m-tkt .levpop {
  z-index: 5;
}
/* leaderboard */
.m-board__ctl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 2px;
}
.m-you {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 36px;
  align-items: center;
  gap: 12px;
  margin: 12px 16px 6px;
  padding: 12px 6px 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--surface-card);
  cursor: pointer;
}
.m-you__t {
  display: grid;
  gap: 2px;
}
.m-you__t > span {
  font: 400 13px/18px var(--font-ui);
  color: var(--text-secondary);
}
.m-you__t b {
  font: 600 20px/24px var(--font-num);
  letter-spacing: -0.02em;
}
.m-you > .nods-num {
  font-size: 17px;
}
.m-lrow {
  display: grid;
  grid-template-columns: 28px 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms;
}
.m-rank {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font: 600 14px/1 var(--font-num);
  color: var(--text-tertiary);
}
.m-rank--1 {
  background: var(--bone);
  color: var(--ink);
}
.m-rank--2,
.m-rank--3 {
  box-shadow: inset 0 0 0 1.5px var(--ash);
  color: var(--text-primary);
}
.m-lrow__id {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.m-lrow__id b {
  overflow: hidden;
  font: 600 16px/20px var(--font-ui);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-lrow__id span {
  overflow: hidden;
  font: 400 13px/18px var(--font-ui);
  color: var(--text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-lrow__r {
  display: grid;
  justify-items: end;
  gap: 7px;
}
.m-lrow__r > .nods-num {
  font-size: 16px;
}
.m-coins {
  display: flex;
  align-items: center;
}
.m-coins .coin-ico {
  box-shadow: 0 0 0 2px var(--bg-page);
}
.m-coins > * + * {
  margin-left: -6px;
}
.m-coins__n {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--surface-raised);
  font: 600 11px/1 var(--font-num);
  color: var(--text-secondary);
  box-shadow: 0 0 0 2px var(--bg-page);
}
/* profiles */
.m-id {
  display: grid;
  justify-items: start;
  gap: 4px;
  padding: 6px 16px 0;
}
.m-id__ava {
  position: relative;
  display: inline-grid;
  margin-bottom: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.m-id__edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px var(--bg-page);
}
.m-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  font: 600 26px/32px var(--font-ui);
  letter-spacing: -0.025em;
}
.m-name > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-x {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-primary);
}
.m-handle {
  font: 400 15px/20px var(--font-ui);
  color: var(--text-secondary);
}
.m-bio {
  margin: 10px 0 0;
  font: 400 15px/21px var(--font-ui);
  color: var(--text-secondary);
  text-wrap: pretty;
}
.m-addbio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: 500 15px/20px var(--font-ui);
  color: var(--text-primary);
  cursor: pointer;
}
.m-addbio__i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-secondary);
}
.m-counts {
  display: flex;
  gap: 20px;
  margin-top: 12px;
}
.m-counts button {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  font: 400 15px/20px var(--font-ui);
  color: var(--text-secondary);
  cursor: pointer;
}
.m-counts b {
  font: 600 15px/20px var(--font-num);
  color: var(--text-primary);
}
.m-id__acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-top: 18px;
}
.m-id__acts--3 {
  grid-template-columns: 1fr 1fr 44px;
}
.m-id__acts .nods-btn {
  height: 44px;
  border-radius: 14px;
  font-size: 15px;
}
.m-acct {
  padding-top: 28px;
}
.m-acct__h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
}
.m-acct__l {
  display: grid;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.m-acct__d {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 14px/18px var(--font-ui);
  color: var(--text-tertiary);
}
.m-acct__d .nods-num {
  font-size: 15px;
}
.m-acct__l .m-big.nods-num {
  font-size: 34px;
  line-height: 40px;
  letter-spacing: -0.035em;
}
.m-curve {
  margin-top: 12px;
}
.m-curve .eqc {
  margin: 0;
}
.m-acct__rng {
  display: flex;
  justify-content: center;
  padding: 14px 16px 0;
}
/* the window switch: a quiet capsule, the chosen window lit */
.m-rng {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 19px;
  background: var(--surface-card);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.m-rng button {
  min-width: 44px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  font: 600 13px/1 var(--font-num);
  color: var(--text-tertiary);
  cursor: pointer;
  transition:
    background-color 200ms var(--ease-out),
    color 200ms;
}
.m-rng button.is-on {
  background: var(--surface-raised);
  color: var(--text-primary);
}
.m-bals {
  margin: 20px 16px 0;
  padding: 2px 16px 16px;
}
.m-bals__r {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  border-bottom: 1px solid var(--line-soft);
}
.m-bals__i {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-secondary);
}
.m-bals__t {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.m-bals__t > span:first-child {
  font: 400 13px/18px var(--font-ui);
  color: var(--text-secondary);
}
.m-bals__t .nods-num {
  font-size: 17px;
}
.m-bals__s {
  display: grid;
  justify-items: end;
  gap: 2px;
  font: 400 12px/16px var(--font-ui);
  color: var(--text-tertiary);
}
.m-bals__s .nods-num {
  font-size: 14px;
}
.m-bals__a {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
.m-bals__a .nods-btn {
  height: 44px;
  padding: 0 8px;
  border-radius: 14px;
  font-size: 15px;
}
.m-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 20px 16px 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--line-soft);
}
.m-kpis--in {
  margin: 12px 16px 4px;
}
.m-kpis--flat {
  margin-top: 0;
}
.m-kpi {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 14px 16px;
  border: 0;
  background: var(--surface-card);
  text-align: left;
}
.m-kpi > span:first-child {
  font: 400 12px/16px var(--font-ui);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.m-kpi > b,
.m-kpi > .nods-num {
  font: 600 17px/22px var(--font-num);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.m-kpi > b.is-bad {
  color: var(--text-short);
}
.m-kpi__mk {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui) !important;
}
.m-kpi__mk .nods-num {
  font-size: 13px;
}
button.m-kpi {
  cursor: pointer;
}
.m-tblw {
  overflow-x: auto;
  padding: 6px 0 8px;
  -webkit-overflow-scrolling: touch;
}
.m-tblw .tbl {
  min-width: 640px;
}
.m-ref {
  display: grid;
  gap: 8px;
  margin: 0 16px;
  padding: 16px;
}
.m-ref__v {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.m-ref__v .nods-num {
  font-size: 26px;
  letter-spacing: -0.03em;
}
.m-ref__n {
  font: 400 13px/18px var(--font-ui);
  color: var(--text-secondary);
}
.m-ref__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 46px;
  margin-top: 6px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-raised);
  font: 500 14px/1 var(--font-num);
  color: var(--text-primary);
  cursor: pointer;
}
.m-cal {
  margin: 0 16px;
  padding: 14px;
}
/* search: the field under the thumb, above the tab bar; above the keyboard once it opens */
.m-search {
  padding-bottom: calc(var(--m-bb) + 170px);
}
.m-chips--top {
  position: sticky;
  top: 0;
  z-index: 15;
  padding-top: calc(14px + env(safe-area-inset-top));
  padding-bottom: 12px;
  background: rgba(0, 0, 0, 0.84);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.m-sbar {
  position: fixed;
  z-index: 31;
  left: var(--m-x);
  right: var(--m-x);
  bottom: calc(var(--m-bb) + 74px);
}
html.m-kb .m-sbar:not(.m-sheet .m-sbar) {
  bottom: calc(var(--m-keys, 0px) + 8px);
} /* a screen's search bar rides the keys; in a sheet it rises with its sheet (below) */
.m-sbar__f {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 8px 0 18px;
  border-radius: 28px;
  background: rgba(32, 32, 36, 0.78);
  -webkit-backdrop-filter: var(--m-blur);
  backdrop-filter: var(--m-blur);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 12px 30px rgba(0, 0, 0, 0.55);
  color: var(--text-tertiary);
}
.m-sbar__f input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: 400 16px/1 var(--font-ui);
  color: var(--text-primary);
  caret-color: var(--bone);
}
.m-sbar__f input::placeholder {
  color: var(--text-tertiary);
}
.m-sbar__b {
  flex: none;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.09);
  font: 600 14px/1 var(--font-ui);
  color: var(--text-primary);
  cursor: pointer;
}
.m-sbar__x {
  display: grid;
  place-items: center;
  width: 40px;
  padding: 0;
}
.m-rc {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 150px;
  padding: 20px 12px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--surface-card);
  cursor: pointer;
}
.m-rc__n {
  max-width: 100%;
  margin-top: 4px;
  overflow: hidden;
  font: 600 15px/20px var(--font-ui);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-rc__s {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 400 13px/18px var(--font-num);
  color: var(--text-secondary);
}
.m-rc .nods-btn {
  height: 36px;
  margin-top: 8px;
  border-radius: 12px;
}
.m-rc__x {
  position: absolute;
  top: 6px;
  right: 6px;
}
/* feed: the desktop rail, full screen */
.m-feed {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding-top: env(safe-area-inset-top);
  animation: m-fade 220ms var(--ease-out) both;
}
.m-feed .frail {
  flex: 1;
  min-height: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.m-feed .frail__h {
  height: 56px;
  padding: 0 10px 0 12px;
  border-bottom: 1px solid var(--line-soft);
}
.m-feed .frail__h .nods-tab {
  height: 56px;
  padding: 0 6px;
  font-size: 17px;
  font-weight: 600;
}
.m-feed .frail__tools > .nods-iconbtn,
.m-feed .frail__tools .panel__sep {
  display: none;
}
.m-feed .panel__fbtn {
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  background: var(--surface-card);
}
.m-feed .pfl {
  position: fixed;
  z-index: 45;
  left: var(--m-x);
  right: var(--m-x);
  top: auto;
  bottom: calc(var(--m-bb) + 76px);
  width: auto;
  max-height: 70vh;
  overflow: auto;
  border-radius: 22px;
}
.m-feed .frail__list {
  gap: 10px;
  padding: 12px 12px calc(var(--m-bb) + 100px);
}
.m-thc {
  display: grid;
  gap: 10px;
  padding: 12px 12px 0;
}
:is(.m-feed, .m-thc) .frow {
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 10px;
  padding: 14px;
  border-color: var(--line-soft);
  border-radius: 22px;
}
@media (hover: hover) {
  :is(.m-feed, .m-thc) .frow:hover {
    background: var(--surface-card);
  }
}
:is(.m-feed, .m-thc) .frow__ava {
  width: 36px !important;
  height: 36px !important;
}
:is(.m-feed, .m-thc) .frow__who {
  font-size: 15px;
}
:is(.m-feed, .m-thc) .frow__time {
  font-size: 12px;
}
:is(.m-feed, .m-thc) .frow__thesis {
  font-size: 15px;
  line-height: 21px;
}
.m-app .frow__tile {
  padding: 10px 12px;
  border-radius: 14px;
}
.m-app .frow__tile .coin-ico {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
}
.m-app .frow__tile .frow__coin {
  font-size: 15px;
}
.m-app .frow__tile .frow__at {
  font-size: 13px;
}
.m-thf {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 24px;
  padding: 2px 2px 0;
  font: 500 13px/1 var(--font-ui);
  color: var(--text-tertiary);
}
.m-thf__b {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-thf__b::before {
  content: "";
  position: absolute;
  inset: -10px -11px;
}
.m-thf__b .num,
.m-thf__prev .num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.m-thf__like.is-on .num {
  color: var(--text-primary);
}
.m-thf__like.is-on svg {
  color: var(--short);
  fill: currentColor;
  animation: m-like-pop 380ms cubic-bezier(0.3, 1.5, 0.4, 1);
}
@media (hover: hover) {
  .m-thf__b:hover {
    color: var(--text-primary);
  }
}
.m-thf__prev {
  margin-left: auto;
  overflow: hidden;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce) {
  .m-thf__like.is-on svg {
    animation: none;
  }
}
/* alerts, full screen */
.m-over {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  max-width: var(--m-w);
  margin: 0 auto;
  background: var(--bg-page);
  animation: m-push 300ms var(--ease-out) backwards;
}
.m-over__b {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
}
:is(.m-over, .m-sheet) .apop {
  position: static;
  width: auto;
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:is(.m-over, .m-sheet) .apop__h {
  padding: 4px 16px 12px;
}
:is(.m-over, .m-sheet) .apop__h b {
  font: 600 26px/32px var(--font-ui);
  letter-spacing: -0.025em;
}
/* action sheets */
.m-acts .nods-dialog__body {
  padding: 6px 8px calc(12px + env(safe-area-inset-bottom));
}
.m-acts__l {
  display: grid;
}
.m-acts__i {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 54px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  font: 500 16px/1 var(--font-ui);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.m-acts__i:active {
  background: var(--fill-ghost-active);
}
.m-acts__i.is-on {
  font-weight: 600;
}
.m-acts__ic {
  display: grid;
  place-items: center;
  width: 22px;
  color: var(--text-secondary);
}
.m-acts__i.is-danger,
.m-acts__i.is-danger .m-acts__ic {
  color: var(--text-short);
}
.m-app .toasts {
  top: calc(env(safe-area-inset-top) + 8px);
  left: var(--m-x);
  right: var(--m-x);
  width: auto;
  max-width: none;
}

/* ===== v2: Nods' own phone language. A docked bar with a word under each icon and a Bone tick over the tab you are on; switches inside a
   screen are the system's dark segmented track; filters are plain words, the chosen one a Bone pill; section heads are small uppercase
   labels; profiles and the account sit in cards. Nothing floats but the sheets. ===== */
.m-app {
  --m-nav: calc(62px + env(safe-area-inset-bottom));
  --m-edge: max(0px, calc(50vw - var(--m-w) / 2));
}
.m-scr,
.m-scr--stack {
  padding-bottom: calc(var(--m-nav) + 32px);
}
.m-tabbar {
  left: var(--m-edge);
  right: var(--m-edge);
  bottom: 0;
  height: var(--m-nav);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  padding: 0 6px env(safe-area-inset-bottom);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.9);
  box-shadow: inset 0 1px 0 var(--line-soft);
}
.m-tab {
  height: 62px;
  gap: 5px;
  align-content: center;
  border-radius: 0;
}
.m-tab::before {
  inset: 0 auto auto 50%;
  width: 22px;
  height: 2px;
  margin-left: -11px;
  border-radius: 0 0 2px 2px;
  background: var(--bone);
  box-shadow: none;
  opacity: 1;
  transform: scaleX(0);
}
.m-tab.is-on::before {
  transform: none;
}
.m-tab__l {
  font: 500 11px/12px var(--font-ui);
  letter-spacing: 0.01em;
}
.m-tab__me {
  opacity: 0.75;
}
.m-tab.is-on .m-tab__me {
  box-shadow: 0 0 0 1.5px var(--bone);
}
.m-act {
  left: var(--m-edge);
  right: var(--m-edge);
  bottom: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-radius: 0;
  background: rgba(0, 0, 0, 0.92);
  box-shadow: inset 0 1px 0 var(--line-soft);
}
.m-act__b {
  height: 50px;
  border-radius: 14px;
  font-size: 16px;
}
/* section heads: small uppercase labels, the count beside them in figures */
.m-sh {
  padding-bottom: 10px;
  align-items: baseline;
}
.m-sh h2 {
  font: 600 12px/16px var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.m-sh__n {
  min-width: 0;
  height: auto;
  padding: 0;
  background: none;
  font: 600 12px/16px var(--font-num);
  color: var(--text-secondary);
}
.m-link {
  font-size: 13px;
}
/* switches: the dark segmented track */
.m-seg {
  gap: 2px;
  margin: 0 16px;
  padding: 3px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-card);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.m-seg__t {
  flex: 1 0 auto;
  justify-content: center;
  height: 38px;
  padding: 0 12px;
  border-radius: 11px;
  font-size: 14px;
  transition:
    background-color 200ms var(--ease-out),
    color 200ms;
}
.m-seg__t::after {
  display: none;
}
.m-seg__t.is-on {
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.m-seg__n {
  min-width: 0;
  height: auto;
  padding: 0;
  background: none;
  color: var(--text-tertiary);
}
.m-seg__t.is-on .m-seg__n {
  color: var(--text-secondary);
}
.m-seg--sticky {
  top: calc(var(--m-top) + 6px);
  box-shadow:
    inset 0 0 0 1px var(--line-soft),
    0 0 0 6px var(--bg-page),
    0 -12px 0 6px var(--bg-page);
}
/* filters: words; the chosen one a Bone pill */
.m-chips {
  gap: 4px;
  padding: 12px 12px 2px;
}
.m-chip {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--text-tertiary);
}
.m-chip.is-on {
  border: 0;
  background: var(--bone);
  color: var(--ink);
}
/* market rows carry their 24h line */
.m-mrow {
  grid-template-columns: 40px minmax(0, 1fr) 56px minmax(76px, auto);
}
.m-spark {
  display: block;
}
.m-spark polyline {
  stroke: var(--text-tertiary);
}
.m-spark.is-up polyline {
  stroke: var(--long);
}
.m-spark.is-down polyline {
  stroke: var(--short);
}
.m-list--ranked {
  counter-reset: mr;
}
/* home */
.m-hd--home {
  gap: 10px;
  padding-right: 4px;
}
.m-sfield {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 4px 0 14px;
  border: 0;
  border-radius: 21px;
  background: var(--surface-card);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  color: var(--text-tertiary);
  cursor: text;
}
.m-sfield--btn {
  font: 400 15px/1 var(--font-ui);
  text-align: left;
  cursor: pointer;
}
.m-sfield--btn span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-sfield input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: 400 16px/1 var(--font-ui);
  color: var(--text-primary);
  caret-color: var(--bone);
}
.m-sfield input::placeholder {
  color: var(--text-tertiary);
}
.m-acc {
  display: grid;
  gap: 6px;
  padding: 14px 16px 0;
}
.m-acc__l {
  display: flex;
  align-items: center;
  gap: 4px;
}
.m-acc .m-eye {
  margin: -7px 0 -9px;
}
.m-acc .m-bal__d {
  font-size: 14px;
}
.m-acc .m-bal__d .nods-num {
  font-size: 15px;
}
.m-bp {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.m-bp__h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 400 13px/18px var(--font-ui);
  color: var(--text-secondary);
}
.m-bp__h .nods-num {
  font-size: 14px;
}
.m-bp__bar {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--surface-raised);
}
.m-bp__bar b {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--bone);
  transition: width 400ms var(--ease-out);
}
.m-acc__a {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
.m-acc__a .nods-btn {
  height: 48px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
}
.m-plist {
  margin: 0 16px;
  padding: 4px 0 0;
  overflow: hidden;
}
.m-plist .m-prow {
  padding: 10px 14px;
}
.m-plist .m-prow .coin-ico {
  width: 36px !important;
  height: 36px !important;
}
.m-plist .m-prow {
  grid-template-columns: 36px minmax(0, 1fr) auto;
}
.m-plist__f {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  margin-top: 2px;
  padding: 0 14px;
  border-top: 1px solid var(--line-soft);
  font: 400 13px/1 var(--font-ui);
  color: var(--text-secondary);
}
.m-plist__f .nods-num {
  font-size: 15px;
}
/* biggest wins: the trader and the trade side by side on top, the win under them */
.m-win {
  display: flex;
  flex-direction: column;
  width: auto;
  min-width: 156px;
  max-width: 250px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--surface-card);
  cursor: pointer;
  text-align: left;
}
/* the win sits in its own darker tray under a hairline, apart from who made it */
.m-win__b {
  display: block;
  padding: 9px 14px 11px;
  border-top: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.32);
}
.m-win__top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
}
.m-win__ava {
  position: relative;
  display: inline-grid;
  flex: none;
  border-radius: 50%;
  cursor: pointer;
}
.m-win__ava .coin-ico {
  position: absolute;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  box-shadow: 0 0 0 2.5px var(--surface-card);
}
.m-win__id {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.m-win__h {
  overflow: hidden;
  font: 600 14px/18px var(--font-ui);
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.m-win__t {
  overflow: hidden;
  font: 600 12px/16px var(--font-ui);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-win__t.is-long {
  color: var(--text-long);
}
.m-win__t.is-short {
  color: var(--text-short);
}
/* the win in full, to the cent; the card is as wide as its longest line (the win or the handle), from 156px to 250px */
.m-win .m-win__v {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
/* search, its own screen */
.m-search .m-hd__mid {
  padding-right: 8px;
}
.m-rrow {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 36px;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 4px 8px 4px 16px;
  cursor: pointer;
}
.m-rrow .coin-ico {
  border-radius: 50%;
}
.m-rrow b {
  overflow: hidden;
  font: 600 15px/20px var(--font-ui);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-rrow__k {
  font: 400 12px/1 var(--font-ui);
  color: var(--text-tertiary);
}
.m-list--ranked .m-mrow {
  position: relative;
}
/* leaderboard: the top three on a podium, your own place pinned over the tab bar */
.m-pod {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end;
  gap: 8px;
  padding: 16px 16px 8px;
}
.m-pod__c {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  padding: 16px 8px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background: var(--surface-card);
  text-align: center;
  cursor: pointer;
}
.m-pod__c.is-1 {
  padding-top: 22px;
  padding-bottom: 18px;
  background: var(--surface-raised);
}
.m-pod__a {
  position: relative;
  margin-bottom: 8px;
}
.m-pod__r {
  position: absolute;
  left: 50%;
  bottom: -9px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  background: var(--surface-raised);
  box-shadow: 0 0 0 2px var(--surface-card);
  font: 600 12px/1 var(--font-num);
  color: var(--text-primary);
}
.m-pod__c.is-1 .m-pod__r {
  background: var(--bone);
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--surface-raised);
}
.m-pod__c b {
  max-width: 100%;
  overflow: hidden;
  font: 600 14px/18px var(--font-ui);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-pod__h {
  max-width: 100%;
  overflow: hidden;
  font: 400 12px/16px var(--font-ui);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-pod__c > .nods-num {
  margin-top: 4px;
  font-size: 15px;
}
.m-you {
  position: sticky;
  z-index: 12;
  bottom: calc(var(--m-nav) + 10px);
  margin: 10px 16px 0;
  background: rgba(22, 22, 25, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
/* profiles: the photo beside the name, the counts as one strip of cells */
.m-id {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ava name" "ava handle" "bio bio" "counts counts" "acts acts";
  column-gap: 14px;
  row-gap: 2px;
  align-items: end;
}
.m-id__ava {
  grid-area: ava;
  margin: 0;
  align-self: center;
}
.m-name {
  grid-area: name;
  font-size: 24px;
  line-height: 30px;
}
.m-handle {
  grid-area: handle;
  align-self: start;
}
.m-bio,
.m-addbio {
  grid-area: bio;
  margin-top: 14px;
}
.m-counts {
  grid-area: counts;
}
.m-id__acts {
  grid-area: acts;
}
.m-counts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
  width: 100%;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--line-soft);
}
.m-counts button {
  display: grid;
  justify-items: start;
  gap: 2px;
  padding: 12px 14px;
  background: var(--surface-card);
  font-size: 13px;
  line-height: 18px;
}
.m-counts b {
  font-size: 17px;
  line-height: 22px;
}
.m-id__acts {
  margin-top: 10px;
}
/* the account (and a trader's PnL) as one card: the figure, the curve, the window switch */
.m-acct {
  margin: 18px 16px 0;
  padding: 18px 0 14px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--surface-card);
}
.m-acct__h {
  padding: 0 18px;
}
.m-acct__rng {
  padding-top: 10px;
}
.m-acct .m-rng {
  background: var(--bg-page);
}
.m-bals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 16px 0;
  padding: 0;
  border: 0;
  background: none;
}
.m-bals__r {
  display: grid;
  justify-items: start;
  gap: 10px;
  min-height: 0;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background: var(--surface-card);
}
.m-bals__t .nods-num {
  font-size: 16px;
}
.m-bals__s {
  justify-items: start;
}
.m-bals__a {
  grid-column: 1/-1;
  margin-top: 0;
}
.m-kpis {
  margin-top: 10px;
}

/* ===== v3: in a phone's browser. The page never scrolls: the app is one screen exactly as tall as what Safari or Chrome leaves visible
   (100dvh) and each screen scrolls inside it (.m-app), so the browser's bars never slide, never cover the tab bar or Long / Short, and no
   content shows under them. The bars sit on the screen's edges exactly as in the phone frames. html.m-on is set while the phone app is up. ===== */
html.m-on,
html.m-on body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg-page);
}
/* the body is pinned to the screen: iOS can still scroll or pan a body under overflow:hidden (a tab change, the bar sliding, the keyboard),
   and a page left scrolled hides the top of the app (the header with Settings and Alerts) with no gesture that brings it back */
html.m-on body {
  position: fixed;
  inset: 0;
  width: 100%;
}
html.m-on #root {
  height: 100%;
}
html.m-on .m-app {
  height: 100%;
}
.m-app {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.m-app::-webkit-scrollbar {
  display: none;
}
.m-app :is(button, [role="button"], [role="tab"], a, img) {
  -webkit-touch-callout: none;
}
.m-app :is(button, [role="button"], [role="tab"], nav) {
  -webkit-user-select: none;
  user-select: none;
}
.m-over__b,
.m-feed .frail__list,
.m-feed .pfl {
  overscroll-behavior-y: contain;
}
.m-feed .pfl {
  max-height: 70dvh;
}
/* a window's foot clears the home indicator when Nods runs from the home screen (in the browser the inset is 0) */
html.m-on .nods-dialog:not(.m-tkt):not(.m-acts) {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ===== v4: the tab bar floats again, the way it did at first: a glass pill held off the bottom and side edges, a word under each icon, the
   tab you are on in its own lit capsule. --m-nav is the pill plus the gap under it, so every screen still scrolls clear of it. ===== */
.m-app {
  --m-nav: calc(76px + env(safe-area-inset-bottom));
}
.m-tabbar {
  left: calc(var(--m-x) + 4px);
  right: calc(var(--m-x) + 4px);
  bottom: calc(14px + env(safe-area-inset-bottom));
  height: 66px;
  padding: 5px;
  gap: 2px;
  align-items: stretch;
  border-radius: 33px;
  background: rgba(22, 22, 25, 0.74);
  -webkit-backdrop-filter: var(--m-blur);
  backdrop-filter: var(--m-blur);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 40px rgba(0, 0, 0, 0.65),
    0 2px 8px rgba(0, 0, 0, 0.4);
}
.m-tab {
  height: auto;
  gap: 4px;
  align-content: center;
  border-radius: 28px;
}
.m-tab::before {
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  opacity: 0;
  transform: scale(0.86);
}
.m-tab.is-on::before {
  opacity: 1;
  transform: none;
}
.m-tab:not(.is-on):active::before {
  opacity: 0.45;
  transform: scale(0.94);
}
.m-tab.is-on .m-tab__l {
  font-weight: 600;
}
.m-tab.is-on .m-tab__me {
  opacity: 1;
  box-shadow: 0 0 0 1.5px var(--bone);
}
@media (hover: hover) {
  .m-tab:not(.is-on):hover {
    color: var(--text-secondary);
  }
}
/* icons only, five of them: Markets, Search, Feed, Leaders, You. Search is a tab of its own, its field at the top of its screen */
.m-tabbar {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: 62px;
  border-radius: 31px;
}
.m-tab {
  gap: 0;
  border-radius: 26px;
}
.m-tab::before {
  border-radius: 26px;
}
.m-search.is-tab .m-hd--bar {
  padding-left: 16px;
  padding-right: 16px;
}

/* ===== a sheet from the bottom (alerts): two thirds of the screen, the whole screen when its handle is pulled up. The handle is the one place
   that drags; a tap on it, on the dimmed screen behind it or Escape closes the sheet. ===== */
.m-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  max-width: var(--m-w);
  margin: 0 auto;
  overflow: hidden;
  background: rgba(10, 10, 11, 0);
  transition: background-color 320ms var(--ease-out);
}
.m-sheet-scrim.is-in {
  background: rgba(10, 10, 11, 0.62);
}
.m-sheet-scrim.is-drag {
  transition: none;
}
.m-sheet-scrim.is-out {
  background: rgba(10, 10, 11, 0);
  transition: background-color 260ms var(--ease-out);
}
.m-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -40px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 26px 26px 0 0;
  background: var(--surface-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    var(--shadow-sheet);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.m-sheet.is-drag,
.m-sheet.is-still {
  transition: none;
}
.m-sheet.is-closing {
  transition: transform 260ms cubic-bezier(0.4, 0, 1, 1);
}
.m-sheet__grip {
  flex: none;
  display: grid;
  place-items: center;
  height: 30px;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.m-sheet__grip i {
  display: block;
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  transition:
    background-color 160ms var(--ease-out),
    width 200ms var(--ease-out);
}
.m-sheet.is-drag .m-sheet__grip {
  cursor: grabbing;
}
.m-sheet.is-drag .m-sheet__grip i {
  width: 48px;
  background: rgba(255, 255, 255, 0.4);
}
.m-sheet__grip:focus-visible {
  outline: none;
}
.m-sheet__grip:focus-visible i {
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(243, 242, 238, 0.4));
}
.m-sheet__b {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding-bottom: calc(
    var(--m-sheet-off, 0px) + 64px + env(safe-area-inset-bottom)
  );
  scrollbar-width: none;
}
.m-sheet__b::-webkit-scrollbar {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .m-sheet {
    transition-duration: 1ms;
  }
  .m-sheet-scrim {
    transition-duration: 1ms;
  }
}
/* a screen inside a sheet (search): no screen height, no entrance of its own; its header sits on the sheet's surface, under the handle */
.m-sheet .m-scr {
  min-height: 0;
  padding-bottom: 24px;
  animation: none;
}
.m-sheet .m-hd {
  top: 0;
  height: 56px;
  padding-top: 0;
  background: var(--surface-card);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.m-sheet .m-sfield {
  background: var(--surface-raised);
}

/* ===== every window on the phone is the same sheet as alerts and search: 26px top corners on the card surface, a gap of 44px left above it at
   its tallest, the same handle in a 28px strip that drags it (mGrips), gliding back or away on release. html.m-phone is set whenever the phone
   layout is up, signed in or not, since the windows are portalled outside .m-app ===== */
html.m-phone .nods-dialog-scrim .nods-dialog {
  max-height: calc(100% - 44px);
  border: 0;
  border-radius: 26px 26px 0 0;
  background: var(--surface-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    var(--shadow-sheet);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
html.m-phone .nods-dialog-scrim .nods-dialog.is-drag {
  transition: none;
}
html.m-phone .nods-dialog-scrim .nods-dialog.is-leaving {
  transition: transform 240ms cubic-bezier(0.4, 0, 1, 1);
}
html.m-phone .nods-dialog-scrim.is-drag {
  transition: none;
}
html.m-phone .nods-dialog-scrim.is-leaving {
  background-color: rgba(10, 10, 11, 0);
  transition: background-color 240ms var(--ease-out);
}
html.m-phone .nods-dialog__grip {
  position: relative;
  flex: none;
  width: 100%;
  height: 28px;
  margin: 0 0 -12px;
  border-radius: 0;
  background: none;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
html.m-phone .nods-dialog__grip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 11px;
  width: 40px;
  height: 5px;
  margin-left: -20px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  transition:
    background-color 160ms var(--ease-out),
    width 200ms var(--ease-out),
    margin-left 200ms var(--ease-out);
}
html.m-phone .nods-dialog.is-drag .nods-dialog__grip {
  cursor: grabbing;
}
html.m-phone .nods-dialog.is-drag .nods-dialog__grip::after {
  width: 48px;
  margin-left: -24px;
  background: rgba(255, 255, 255, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  html.m-phone .nods-dialog-scrim .nods-dialog {
    transition-duration: 1ms;
  }
}

/* alerts in their sheet: the title with the count of new ones and Mark all read; the kinds as words, a Bone line under the one you are on that
   slides to the next, a Bone dot on a kind with something new; both stay pinned while the list scrolls */
.m-al__top {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-card);
}
.m-al__h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 16px 8px;
}
.m-al__h b {
  font: 600 24px/30px var(--font-ui);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.m-al__n {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--bone);
  font: 600 12px/1 var(--font-num);
  color: var(--ink);
}
.m-al__read {
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  font: 500 14px/20px var(--font-ui);
  color: var(--text-secondary);
  cursor: pointer;
}
.m-al__read:disabled {
  color: var(--text-tertiary);
  opacity: 0.6;
  cursor: default;
}
.m-al__tabs {
  position: relative;
  display: flex;
  gap: 24px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: inset 0 -1px 0 var(--line-soft);
}
.m-al__tabs::-webkit-scrollbar {
  display: none;
}
.m-al__tab {
  position: relative;
  flex: none;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: 500 15px/20px var(--font-ui);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color 200ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.m-al__tab[aria-selected="true"] {
  color: var(--text-primary);
}
@media (hover: hover) {
  .m-al__tab:not([aria-selected="true"]):hover {
    color: var(--text-secondary);
  }
}
.m-al__tab i {
  position: absolute;
  top: 12px;
  right: -8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bone);
}
.m-al__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--text-primary);
  transition:
    transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
    width 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m-al__bar.is-still {
  transition: none;
}
.m-al__list {
  padding: 4px 6px 0;
}
.m-al__list .arow {
  padding: 12px 10px;
}
.m-al__cap {
  padding: 14px 10px 6px;
  font: 600 12px/16px var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.m-al .m-empty {
  padding: 56px 28px 36px;
}
.m-al__f {
  display: flex;
  justify-content: center;
  padding: 18px 16px 0;
}
.m-al__set {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 20px;
  background: var(--surface-raised);
  font: 500 14px/1 var(--font-ui);
  color: var(--text-secondary);
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .m-al__bar {
    transition: none;
  }
}

/* the line under the tab you are on (feed, alerts): 2px of full white, rounded, never a grey hairline */
.m-feed .nods-tabs--underline .nods-tab::after {
  left: 6px;
  right: 6px;
  height: 2px;
  border-radius: 2px;
}
.m-feed .nods-tabs--underline .nods-tab.is-selected::after {
  background: var(--text-primary);
}
/* a profile's counts sit right under the handle, beside the photo, as on the desktop: two quiet figures, never a row of cells */
.m-id {
  grid-template-areas: "ava name" "ava handle" "ava counts" "bio bio" "acts acts";
}
.m-counts {
  display: flex;
  gap: 14px;
  width: auto;
  margin-top: 4px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
}
.m-counts button {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 0;
  background: none;
  font: 400 13px/18px var(--font-ui);
  color: var(--text-secondary);
}
.m-counts b {
  font: 600 14px/18px var(--font-num);
  color: var(--text-primary);
}

/* feed filters in their sheet: the popover's box drops away, the title reads like the other sheets', rows get room for a thumb */
.m-sheet .pfl {
  position: static;
  width: auto;
  max-width: none;
  gap: 18px;
  padding: 2px 16px 8px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: none;
}
.m-sheet .pfl__h b {
  font: 600 24px/30px var(--font-ui);
  letter-spacing: -0.02em;
}
.m-sheet .pfl__reset {
  font-size: 14px;
}
.m-sheet .pfl__sec {
  gap: 10px;
}
.m-sheet .pfl__l {
  font: 600 12px/16px var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.m-sheet .pfl__sw {
  min-height: 44px;
}

/* ===== a position in its sheet (MPosition): who, the market and the PnL large, the chart full width, four facts between hairlines, the
   activity under text tabs, the actions pinned at the foot ===== */
.m-sheet--pos > .m-sheet__b {
  padding-bottom: var(--m-sheet-off, 0px);
}
.m-pos {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.m-pos__who {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 16px;
}
.m-pos__tr {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  cursor: pointer;
}
.m-pos__tr b {
  overflow: hidden;
  font: 600 16px/20px var(--font-ui);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-pos__who .nods-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
}
.m-pos__hero {
  display: grid;
  gap: 2px;
  padding: 20px 16px 12px;
}
.m-pos__mkt {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  margin-bottom: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  cursor: pointer;
}
.m-pos__mkt b {
  font: 600 17px/22px var(--font-ui);
}
.m-pos__mkt .coin-ico {
  border-radius: 50%;
}
.m-pos__st {
  font: 500 13px/18px var(--font-ui);
  color: var(--text-tertiary);
}
.m-pos__st.is-liq {
  color: var(--text-short);
}
.m-pos__pnl {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.m-pos__pnl > .nods-num {
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.035em;
}
.m-pos__chart {
  display: flex;
  height: 232px;
}
.m-pos__chart .pmod__canvas {
  flex: 1;
  min-height: 0;
  border-bottom: 0;
}
.m-pos__rng {
  display: flex;
  gap: 4px;
  padding: 8px 12px 0;
}
.m-pos__r {
  flex: 1;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  font: 500 13px/1 var(--font-num);
  color: var(--text-tertiary);
  cursor: pointer;
  transition:
    background-color 200ms var(--ease-out),
    color 200ms;
}
.m-pos__r.is-on {
  background: var(--surface-raised);
  color: var(--text-primary);
}
.m-pos__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 12px;
  margin: 16px 16px 0;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.m-pos__facts > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.m-pos__facts dt {
  font: 400 13px/18px var(--font-ui);
  color: var(--text-tertiary);
}
.m-pos__facts dd {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  margin: 0;
  font: 600 16px/20px var(--font-num);
  color: var(--text-primary);
  white-space: nowrap;
}
.m-pos__facts dd .nods-num {
  font-size: 16px;
}
.m-pos__sub {
  overflow: hidden;
  font: 400 12px/16px var(--font-num);
  color: var(--text-tertiary);
  text-overflow: ellipsis;
}
.m-pos__tabs {
  margin-top: 8px;
}
.m-pos__n {
  margin-left: 6px;
  font: 500 13px/1 var(--font-num);
  color: var(--text-tertiary);
}
.m-al__tab[aria-selected="true"] .m-pos__n {
  color: var(--text-secondary);
}
.m-pos__list {
  flex: 1;
  padding: 2px 0 12px;
}
.m-pos__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 16px;
  transition: background-color 500ms var(--ease-out);
}
.m-pos__row + .m-pos__row {
  box-shadow: inset 0 1px 0 var(--line-soft);
}
.m-pos__row.is-hl {
  background: rgba(243, 242, 238, 0.06);
}
.m-pos__k {
  font: 600 13px/18px var(--font-ui);
  white-space: nowrap;
}
.m-pos__k.is-long {
  color: var(--text-long);
}
.m-pos__k.is-short {
  color: var(--text-short);
}
.m-pos__k.is-flat {
  color: var(--text-secondary);
}
.m-pos__m {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  font: 400 13px/18px var(--font-num);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.m-pos__m .nods-num {
  font-size: 15px;
  color: var(--text-primary);
}
.m-pos__t {
  font: 400 12px/16px var(--font-num);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.m-pos__thc {
  padding-top: 10px;
}
.m-pos .m-pos__thc .frow,
.m-pos .m-pos__thc .frow:hover {
  background: var(--surface-raised);
}
.m-pos__th .frow {
  transition: box-shadow 500ms var(--ease-out);
}
.m-pos__th.is-hl .frow {
  box-shadow: inset 0 0 0 1px rgba(243, 242, 238, 0.22);
}
.m-pos__empty {
  padding: 28px 16px;
  font: 400 14px/20px var(--font-ui);
  color: var(--text-tertiary);
  text-align: center;
}
.m-pos__acts {
  position: sticky;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 3;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  margin: 0 10px calc(10px + env(safe-area-inset-bottom));
  padding: 6px;
  border-radius: 32px;
  background: var(--m-cap-bg);
  -webkit-backdrop-filter: var(--m-cap-blur);
  backdrop-filter: var(--m-cap-blur);
  box-shadow: var(--m-cap-sh);
}
.m-pos__acts .nods-btn {
  width: 100%;
  height: 48px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
}

/* a section head over a card (or a strip of cards) lines up with what is inside the card, not with its rounded corner, and sits close to it */
.m-sec:has(> .m-card, > .m-hs, > .m-kpis) > .m-sh {
  padding: 0 30px 8px;
}
.m-sec:has(> .m-card, > .m-hs) > .m-sh .m-link {
  margin-right: -2px;
}

/* ===== profiles, as on X: a banner across the top, the photo overlapping its foot in a ring of the page, then the name, the handle, the
   counts, the bio, stacked under the photo; the text lines up with the inside of the banner, the buttons run the full width ===== */
.m-ban {
  position: relative;
  height: 128px;
  margin: 4px 16px 0;
  overflow: hidden;
  border-radius: 22px;
  background: var(--surface-card);
  isolation: isolate;
}
.m-ban__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.m-ban__wash {
  position: absolute;
  left: -25%;
  top: -60%;
  width: 150%;
  height: 220%;
  object-fit: cover;
  filter: blur(36px) saturate(1.25);
  opacity: 0.55;
}
.m-ban__edit {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--text-primary);
  cursor: pointer;
}
.m-id {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "ava" "name" "handle" "counts" "bio" "acts";
  row-gap: 2px;
  align-items: start;
  margin-top: -40px;
  padding: 0 30px;
}
.m-id__ava {
  position: relative;
  z-index: 1;
  justify-self: start;
  align-self: start;
  margin: 0 0 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--bg-page);
}
.m-counts {
  margin-top: 10px;
}
.m-bio,
.m-addbio {
  margin-top: 10px;
}
.m-id__acts {
  margin: 16px -14px 0;
  width: auto;
}

/* You, kept short: the balances and the money actions live inside the account card; positions, orders and theses sit under the same text
   tabs as everywhere else, pinned under the header while the list scrolls; the referral is one row */
.m-acct__bal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 18px 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.m-acct__bal > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.m-acct__bal span {
  font: 400 13px/18px var(--font-ui);
  color: var(--text-tertiary);
}
.m-acct__bal .nods-num {
  font-size: 16px;
}
.m-acct__a {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 8px;
  margin: 16px 14px 0;
}
.m-acct__a .nods-btn {
  height: 44px;
  padding: 0 8px;
  border-radius: 14px;
  font-size: 15px;
}
.m-me__tabs {
  position: sticky;
  top: var(--m-top);
  z-index: 12;
  margin-top: 22px;
  background: var(--bg-page);
}
.m-me__list {
  padding-top: 4px;
  min-height: calc(100vh - var(--m-top) - 44px);
  min-height: calc(100dvh - var(--m-top) - 44px);
} /* at least a screen under the tabs: switching tabs never shortens the page, so nothing jumps; a short list leaves empty room below */
.m-me__list .m-empty {
  padding: 40px 28px 24px;
}
.m-refrow {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  width: calc(100% - 32px);
  margin: 0 16px;
  padding: 14px;
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
}
.m-refrow:active {
  background: var(--surface-raised);
}
.m-refrow__i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-secondary);
}
.m-refrow__t {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.m-refrow__t b {
  font: 600 15px/20px var(--font-ui);
}
.m-refrow__t span {
  overflow: hidden;
  font: 400 13px/18px var(--font-ui);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-refrow > svg {
  color: var(--text-tertiary);
}

/* the banner runs edge to edge from the very top of the screen, under the header; the header starts clear, its buttons floating on the
   banner in glass discs, and takes its glass back once the screen scrolls (data-scrolled on .m-app) */
.m-ban {
  height: calc(var(--m-top) + 64px);
  margin: calc(-1 * var(--m-top)) 0 0;
  border-radius: 0;
}
.m-scr:has(> .m-ban) > .m-hd {
  gap: 8px;
  padding-right: 12px;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 200ms var(--ease-out);
}
.m-scr:has(> .m-ban) > .m-hd .m-ib {
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--text-primary);
  transition: background-color 200ms var(--ease-out);
}
.m-app[data-scrolled="1"] .m-scr:has(> .m-ban) > .m-hd {
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.m-app[data-scrolled="1"] .m-scr:has(> .m-ban) > .m-hd .m-ib {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* the photo on the banner's foot, Edit profile level with the photo's bottom on the right */
.m-id {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "ava edit" "name name" "handle handle" "counts counts" "bio bio" "acts acts";
}
.m-id__editbtn {
  grid-area: edit;
  align-self: end;
  margin-bottom: 10px;
}
.m-id .m-id__editbtn.nods-btn {
  height: 34px;
  padding: 0 16px;
  border-radius: 17px;
  font-size: 14px;
}

/* the account card no longer clips: a hidden balance's blur fades out past the card's edge instead of being cut there; the curve clips itself */
.m-acct {
  overflow: visible;
}
.m-curve {
  overflow: hidden;
}
/* the track record in its sheet: a title, then the figures on the sheet's surface */
.m-rec {
  padding: 2px 16px 8px;
}
.m-rec__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 14px;
}
.m-rec__h b {
  font: 600 24px/30px var(--font-ui);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.m-rec__s {
  font: 400 13px/18px var(--font-ui);
  color: var(--text-tertiary);
}
.m-rec .m-kpis {
  margin: 0;
}
.m-sheet .m-kpi {
  background: var(--surface-raised);
}

/* the header's buttons over a banner share one frosted capsule (a lone back or share keeps its own disc); once the screen scrolls the
   capsule melts into the header's glass */
.m-hd__pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  border-radius: 24px;
  background: rgba(18, 18, 20, 0.52);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 6px 18px rgba(0, 0, 0, 0.28);
  transition:
    background-color 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out);
}
.m-scr:has(> .m-ban) > .m-hd .m-hd__pill .m-ib {
  width: 40px;
  height: 40px;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.m-app[data-scrolled="1"] .m-hd__pill {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Edit profile: the green of Follow, straddling the banner's foot, cut in half by its edge, in a ring of the page like the photo */
.m-id {
  position: relative;
}
.m-id__editbtn {
  position: relative;
  z-index: 1;
  align-self: start;
  margin: 23px 0 0;
}
.m-id .m-id__editbtn.nods-btn {
  height: 34px;
  padding: 0 18px;
  border-radius: 17px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--bg-page);
}

/* Close all / Cancel all sit at the right end of the tabs, never at the foot of the list; with nothing open the list offers markets to trade */
.m-me__act {
  flex: none;
  align-self: center;
  height: 32px;
  margin-right: -4px;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  background: var(--surface-raised);
  font: 500 13px/1 var(--font-ui);
  color: var(--text-secondary);
  cursor: pointer;
}
.m-me__act:active {
  background: var(--fill-ghost-active);
}
.m-me__hint {
  margin: 0;
  padding: 16px 16px 4px;
  font: 400 14px/20px var(--font-ui);
  color: var(--text-tertiary);
}

/* ===== one button language on the phone: every action button is a pill (the tab bar, Edit profile, the range switch already are), filled
   Bone for the one primary action, dark for the rest; a list's bulk action (Close all) is a quiet word, not another button ===== */
.m-acct__a .nods-btn,
.m-acc__a .nods-btn,
.m-pos__acts .nods-btn,
.m-id__acts .nods-btn,
.m-bal .nods-btn {
  border-radius: 999px;
}
.m-acc__a .nods-btn {
  height: 46px;
}
.m-me__tabs {
  overflow: visible;
}
.m-me__act {
  height: 32px;
  margin: 0;
  padding: 0 2px;
  border-radius: 0;
  background: none;
  font: 500 14px/1 var(--font-ui);
  color: var(--text-secondary);
}
.m-me__act:active {
  background: none;
  color: var(--text-primary);
}
/* the balances under the curve: the label quiet, the figure in full ink */
.m-acct__bal > div > span:first-child {
  font: 400 13px/18px var(--font-ui);
  color: var(--text-tertiary);
}
.m-acct__bal .nods-num {
  color: var(--text-primary);
}
/* a banner nobody set: a quiet slate with a faint sheen from the top corner, never a smudge of the photo */
.m-ban:not(.has-img) {
  background:
    radial-gradient(
      120% 160% at 88% -10%,
      rgba(243, 242, 238, 0.08),
      transparent 58%
    ),
    #141417;
}

/* the sheet's 40px that run past the screen's foot (so a pull past the top never shows a gap) hold no content: the scroller ends at the
   screen's edge, so a bar pinned to its foot (a position's actions) is always fully on screen */
.m-sheet {
  padding-bottom: 40px;
}
/* a sheet opened inside another sheet (Chart from a position) is placed in that sheet's box, which runs the same 40px past the screen's foot:
   its dimmed layer stops at the screen's edge, so the sheet on top ends there too and its last rows scroll fully into view */
.m-sheet .m-sheet-scrim {
  bottom: 40px;
}

/* the position sheet, tidied: the range capsule centred like the account's; the tabs never scroll (they fit); the head row's Follow a pill */
.m-pos__rng {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 12px 16px 0;
}
.m-pos__rng .m-rng {
  background: var(--bg-page);
}
.m-pos__tabs {
  overflow: visible;
}
.m-pos__who .nods-btn {
  border-radius: 999px;
}
.m-pos__facts {
  margin-top: 18px;
}

/* ===== Settings on the phone (SettingsModal, phone branch): a sheet with the sections as a list, you on top, the rest in two groups, each
   section opening in place under a back arrow; every setting stacks its label over its control at full width, a switch sits on the right ===== */
.mset {
  padding: 0 16px 8px;
}
.mset__h {
  padding: 2px 2px 14px;
}
.mset__h b {
  font: 600 24px/30px var(--font-ui);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.mset__me {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 18px;
  background: var(--surface-raised);
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
}
.mset__me-t {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.mset__me-t b {
  overflow: hidden;
  font: 600 16px/20px var(--font-ui);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mset__me-t span {
  overflow: hidden;
  font: 400 13px/18px var(--font-ui);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mset__group {
  margin-top: 14px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface-raised);
}
.mset__row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 0 14px;
  border: 0;
  background: none;
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
}
.mset__row + .mset__row {
  border-top: 1px solid var(--line-soft);
}
.mset__row:active,
.mset__me:active {
  background: rgba(243, 242, 238, 0.05);
}
.mset__ic {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(243, 242, 238, 0.07);
  color: var(--text-secondary);
}
.mset__l {
  font: 500 15px/20px var(--font-ui);
}
.mset__row > svg,
.mset__me > svg {
  color: var(--text-tertiary);
}
.mset__out {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin-top: 18px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: 500 15px/1 var(--font-ui);
  color: var(--text-short);
  text-align: center;
  cursor: pointer;
}
.mset__bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  margin: 0 -16px;
  padding: 0 16px 0 6px;
  background: var(--surface-card);
}
.mset__bar b {
  font: 600 18px/24px var(--font-ui);
  color: var(--text-primary);
}
.mset__back {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-primary);
  cursor: pointer;
}
.mset__hd {
  margin: 2px 0 4px;
  font: 400 13px/18px var(--font-ui);
  color: var(--text-tertiary);
}
.mset .smod__body {
  display: block;
  padding: 0;
  overflow: visible;
  max-height: none;
}
.mset .setrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 16px 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
}
.mset .setrow:has(> .setrow__c > .nods-switch) {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.mset .setrow__t {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.mset .setrow__t b {
  font: 600 15px/20px var(--font-ui);
  color: var(--text-primary);
}
.mset .setrow__t small {
  font: 400 13px/18px var(--font-ui);
  color: var(--text-tertiary);
}
.mset .setrow__c {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  width: 100%;
}
.mset .setrow:has(> .setrow__c > .nods-switch) .setrow__c {
  width: auto;
}
.mset .setrow__c > * {
  max-width: 100%;
}
.mset :is(.smod__ctl, .smod__snd, .smod__slip, .smod__pre, .pf__ctl) {
  width: 100%;
  max-width: none;
}
.mset .smod__sub {
  padding: 24px 0 8px;
  font: 600 12px/16px var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.mset .nods-btn {
  border-radius: 999px;
}
.mset .pf__id {
  padding: 8px 0 16px;
}
.mset .pf__save {
  position: sticky;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 4;
}
.mset .pf__save .nods-btn {
  width: 100%;
  height: 48px;
}

/* switches in Settings run the full width, their options sharing it evenly; slippage keeps its custom field beside them */
.mset .nods-seg {
  display: flex;
  width: 100%;
}
.mset .nods-seg__item {
  flex: 1 1 0;
  justify-content: center;
}
.mset .smod__slip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  align-items: center;
  gap: 8px;
  width: 100%;
}
/* Profile on the phone reads like the profile itself: the banner on top (its button in the corner), the photo overlapping its foot, then the fields */
.mset .pf {
  display: flex;
  flex-direction: column;
}
.mset .pf__id + .setrow {
  order: -1;
  position: relative;
  padding: 4px 0 0;
  border-top: 0;
}
.mset .pf__id + .setrow .setrow__t {
  display: none;
}
.mset .pf__id + .setrow .pf__ban {
  height: 112px;
  border-radius: 18px;
}
.mset .pf__id + .setrow .pf__banacts {
  position: absolute;
  top: 14px;
  right: 10px;
  margin: 0;
}
.mset .pf__id + .setrow .pf__banacts .nods-btn {
  height: 32px;
  padding: 0 12px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 0;
}
.mset .pf__id {
  position: relative;
  z-index: 1;
  margin-top: -34px;
  padding: 0 0 16px 14px;
}
.mset .pf__id .pf__ava-wrap {
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--surface-card);
}
.mset .pf__id .pf__who {
  padding-top: 30px;
}
.mset .pf__save {
  margin: 18px -6px calc(10px + env(safe-area-inset-bottom));
  padding: 6px;
  border: 0;
  border-radius: 32px;
  background: var(--m-cap-bg);
  -webkit-backdrop-filter: var(--m-cap-blur);
  backdrop-filter: var(--m-cap-blur);
  box-shadow: var(--m-cap-sh);
}
.mset .pf__save .nods-btn {
  border-radius: 999px;
}

/* Settings' Save bar sits on the screen's foot: the sheet adds no room under it */
.m-sheet--set .m-sheet__b {
  padding-bottom: var(--m-sheet-off, 0px);
}
/* ===== every window on the phone speaks the same language: no close cross (the handle, the dimmed screen and Escape close it), pill
   buttons, the white 2px line under the tab you are on ===== */
html.m-phone
  .nods-dialog-scrim
  .nods-dialog__header
  .nods-iconbtn[aria-label="Close"] {
  display: none;
}
html.m-phone .nods-dialog-scrim .nods-btn {
  border-radius: 999px;
}
html.m-phone .nods-dialog-scrim .nods-tabs--underline .nods-tab::after {
  left: 6px;
  right: 6px;
  height: 2px;
  border-radius: 2px;
}
html.m-phone
  .nods-dialog-scrim
  .nods-tabs--underline
  .nods-tab.is-selected::after {
  background: var(--text-primary);
}
html.m-phone .nods-dialog-scrim .nods-dialog__title {
  font: 600 22px/28px var(--font-ui);
  letter-spacing: -0.02em;
}
/* people (followers, following, copiers): taller, one row per trader with one button; sending money lives on the trader's own profile */
html.m-phone .people-dialog {
  height: calc(100% - 44px);
}
html.m-phone .people-dialog .nods-dialog__body {
  flex: 1;
  height: auto;
  max-height: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
html.m-phone .people-dialog .people {
  flex: 1;
  min-height: 0;
  max-height: none;
}
html.m-phone .people-dialog .pp {
  min-height: 60px;
  padding: 8px 4px;
  gap: 12px;
}
html.m-phone .people-dialog .pp__id b {
  font: 600 15px/20px var(--font-ui);
}
html.m-phone .people-dialog .pp__acts .nods-btn--ghost {
  display: none;
}
html.m-phone .people-dialog .pp__follow {
  min-width: 96px;
  height: 34px;
}

/* every sheet floats a hair off the screen's sides, as on iOS: 6px of the dimmed screen shows on either side; its foot runs 40px past the
   screen's bottom (a pull past the top never opens a gap), so its lower corners never show and its content still ends at the screen's edge */
.m-sheet {
  left: 6px;
  right: 6px;
}
html.m-phone .nods-dialog-scrim .nods-dialog {
  width: calc(100% - 12px);
  max-height: calc(100% - 4px);
  margin: 0 6px -40px;
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

/* ===== Settings controls sized for a thumb (every control inside .mset): switches 51x31 as on iOS, choices as 44px pill tracks, fields and
   menus 48px at 16px type (no focus zoom), the leverage slider with a 26px thumb, the presets as four even fields ===== */
.mset .setrow {
  padding: 18px 0;
}
.mset .setrow__t b {
  font-size: 16px;
  line-height: 22px;
}
.mset .setrow__t small {
  font-size: 13px;
  line-height: 18px;
}
.mset .nods-switch__track {
  width: 51px;
  height: 31px;
  border-width: 0;
}
.mset .nods-switch__track::after {
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.mset .nods-switch input:checked + .nods-switch__track::after {
  transform: translateX(20px);
}
.mset .nods-seg,
.mset .nods-seg--sm,
.mset .nods-seg--lg {
  height: auto;
  padding: 3px;
  gap: 2px;
  border-radius: 999px;
  background: var(--bg-page);
}
.mset .nods-seg .nods-seg__item,
.mset .nods-seg--sm .nods-seg__item {
  flex: 1 1 0;
  height: 38px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 15px;
}
.mset :is(.nods-input, .nods-input--sm, .nods-select, .nods-select--sm) {
  height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  font-size: 16px;
}
.mset .nods-input__ctl {
  font-size: 16px;
}
.mset .nods-select {
  width: 100%;
}
.mset .smod__slip {
  grid-template-columns: minmax(0, 1fr) 88px;
}
.mset .smod__pre {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.mset .smod__pre > * {
  width: auto;
  min-width: 0;
}
.mset .nods-slider__track,
.mset .nods-slider__ctl {
  height: 34px;
}
.mset .nods-slider__ctl::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  margin-top: -11px;
}
.mset .nods-slider__ctl::-moz-range-thumb {
  width: 26px;
  height: 26px;
}
.mset .nods-slider__rail {
  height: 4px;
}
.mset .setrow__c .nods-btn {
  height: 44px;
  padding: 0 18px;
  font-size: 15px;
}
.mset .setrow__c .nods-btn--sm {
  height: 40px;
}
/* long lists inside a section (referral people, devices) keep rows a thumb tall */
.mset :is(.reft__row, .dev__row, .smod__dev) {
  min-height: 52px;
}

/* Settings, second pass: slippage fills its row (the presets share the width, the custom field beside them); every menu runs the full
   width (a sound's play button keeps its place beside it); the wallet address stays inside its card; the referral table gives the trader room */
.mset .smod__slip {
  display: flex;
  width: 100%;
  max-width: none;
}
.mset .smod__slip .nods-seg {
  flex: 1 1 auto;
}
.mset .smod__slipin {
  width: 92px;
}
.mset .smod__slip .nods-input,
.mset .smod__pre .nods-input {
  height: 44px;
  padding: 0 12px;
  border-radius: 999px;
}
.mset .smod__snd {
  width: 100%;
}
.mset .smod__snd .nods-select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.mset .smod__snd .nods-iconbtn {
  width: 44px;
  height: 44px;
  flex: none;
}
.mset .wal__addr {
  max-width: 100%;
  min-width: 0;
}
.mset .wal__addr code {
  font-size: 15px;
}
.mset .reft__row {
  --reft-cols: minmax(0, 1fr) auto auto;
  gap: 0 16px;
  height: 56px;
}
.mset .reft__row--h {
  height: auto;
}

/* a menu in Settings (language, a sound, the landing screen) runs the full row, whatever wraps it; a play button keeps its place beside it */
.mset .smod__snd > :not(.nods-iconbtn) {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
.mset .smod__snd .nods-select,
.mset .smod__snd > :not(.nods-iconbtn) .nods-select {
  width: 100%;
}

/* Edit profile and, beside it, the referral as a gift disc: the pair straddles the banner's foot, each in a ring of the page */
.m-id__btns {
  grid-area: edit;
  position: relative;
  z-index: 1;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 23px;
}
.m-id__btns .m-id__editbtn {
  margin: 0;
  align-self: auto;
}
.m-id__gift {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px var(--bg-page);
  cursor: pointer;
}
.m-id__gift:active {
  background: var(--fill-ghost-active);
}

/* the account card, compact: the label with the three money actions as icon discs (Deposit lit), the value, its change, a short curve, then
   one foot row: perps balance and cash, the window switch at its end */
.m-acct--tight {
  padding: 14px 0 14px;
}
.m-acct--tight > .m-l,
.m-acct--tight > .m-fit,
.m-acct--tight > .m-acct__d {
  display: flex;
  margin: 0 18px;
}
.m-acct__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 12px 4px 18px;
}
.m-acct__ic {
  display: flex;
  gap: 6px;
}
.m-acct__i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-primary);
  cursor: pointer;
}
.m-acct__i.is-primary {
  background: var(--bone);
  color: var(--ink);
}
.m-acct__i:active {
  transform: scale(0.94);
}
.m-acct--tight .m-acct__d {
  margin-top: 2px;
}
.m-acct--tight .m-curve {
  margin-top: 10px;
}
.m-acct__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 14px 0 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.m-acct__foot .m-acct__bal {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.m-acct__foot .m-acct__bal > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.m-acct__foot .m-acct__bal > div > span:first-child {
  font: 400 12px/16px var(--font-ui);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.m-acct__foot .m-acct__bal .nods-num {
  color: var(--text-primary);
}
.m-acct__foot .m-acct__bal .nods-num {
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
}
.m-acct__foot .m-rng {
  flex: none;
  padding: 2px;
}
.m-acct__foot .m-rng button {
  height: 28px;
  min-width: 0;
  padding: 0 8px;
  font-size: 12px;
}
.m-acct--tight .m-curve {
  height: 92px;
}
.m-acct--tight .m-curve > * {
  max-height: 92px;
}

/* Funds on the phone (MoneySheet, phone branch): the Settings sheet's language; fields and buttons a thumb tall, the address wraps inside its box */
.m-sheet--fund .m-sheet__b {
  padding-bottom: var(--m-sheet-off, 0px);
}
.mfund__tabs {
  margin: 0 -16px;
  padding: 0 16px;
}
.mfund__hd {
  margin: 12px 0 4px;
}
.mfund > .smod__body,
.mfund .fmod__body {
  padding: 0;
}
.mfund :is(.nods-input, .nods-select) {
  height: 52px;
  border-radius: 14px;
  font-size: 16px;
}
.mfund .nods-input__ctl {
  font-size: 17px;
}
.mfund .nods-field {
  gap: 8px;
  margin-top: 16px;
}
.mfund .dep3 {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 18px;
  border-radius: 18px;
  background: var(--surface-raised);
}
.mfund .dep2__addr {
  max-width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 14px;
}
.mfund .dep2__addr code {
  white-space: normal;
  word-break: break-all;
  font-size: 14px;
  line-height: 20px;
}
.mfund .dep3__facts {
  margin-top: 16px;
}
.mfund > .nods-btn,
.mfund .nods-btn--full {
  height: 52px;
  margin-top: 18px;
  border-radius: 999px;
  font-size: 16px;
}
.mfund .sh__tiles {
  margin-top: 16px;
}

/* the copy window in its sheet: the desktop window's box drops away; the stats, the amount and the chips fit the width; the foot is pinned */
.m-sheet--cpw .m-sheet__b {
  padding-bottom: var(--m-sheet-off, 0px);
}
.cpw--sheet {
  position: static;
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  min-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: none;
  overflow: visible;
}
.cpw--sheet .cpw__head {
  padding: 0 16px 14px;
}
.cpw--sheet .cpw__head .nods-iconbtn {
  display: none;
}
.cpw--sheet .cpw__stats {
  margin: 0 16px;
  grid-template-columns: 1fr 1fr;
}
.cpw--sheet .cpw__body {
  flex: 1;
  padding: 0 16px;
  overflow: visible;
}
.cpw--sheet .cpw__h {
  flex-wrap: wrap;
  gap: 4px 12px;
}
.cpw--sheet .cpw__amt {
  height: 60px;
  border-radius: 16px;
}
.cpw--sheet .cpw__amt input {
  font-size: 26px;
}
.cpw--sheet .cpw__chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.cpw--sheet .cpw__chips button {
  height: 40px;
  min-width: 0;
  border-radius: 999px;
  font-size: 14px;
}
.cpw--sheet .cpw__foot {
  position: sticky;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 4;
  margin: 0 10px calc(10px + env(safe-area-inset-bottom));
  padding: 6px;
  border: 0;
  border-radius: 32px;
  background: var(--m-cap-bg);
  -webkit-backdrop-filter: var(--m-cap-blur);
  backdrop-filter: var(--m-cap-blur);
  box-shadow: var(--m-cap-sh);
}
.cpw--sheet .cpw__foot .nods-btn {
  height: 52px;
  border-radius: 999px;
  font-size: 16px;
}
/* ===== every window's controls sized for a thumb, as in Settings: choices as 38px pill tracks, fields 48px at 16px type (no focus zoom),
   sliders with a 26px thumb, switches 51x31, quick chips 40px ===== */
:is(html.m-phone .nods-dialog-scrim, .m-sheet) .nods-seg {
  padding: 3px;
  gap: 2px;
  border-radius: 999px;
}
:is(html.m-phone .nods-dialog-scrim, .m-sheet) .nods-seg .nods-seg__item {
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 14px;
}
:is(html.m-phone .nods-dialog-scrim, .m-sheet)
  :is(.nods-input:not(.nods-input--lg), .nods-select) {
  height: 48px;
  border-radius: 14px;
}
:is(html.m-phone .nods-dialog-scrim, .m-sheet) .nods-input__ctl {
  font-size: 16px;
}
:is(html.m-phone .nods-dialog-scrim, .m-sheet) .nods-slider__track,
:is(html.m-phone .nods-dialog-scrim, .m-sheet) .nods-slider__ctl {
  height: 34px;
}
:is(html.m-phone .nods-dialog-scrim, .m-sheet)
  .nods-slider__ctl::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  margin-top: -11px;
}
:is(html.m-phone .nods-dialog-scrim, .m-sheet)
  .nods-slider__ctl::-moz-range-thumb {
  width: 26px;
  height: 26px;
}
:is(html.m-phone .nods-dialog-scrim, .m-sheet) .nods-switch__track {
  width: 51px;
  height: 31px;
  border-width: 0;
}
:is(html.m-phone .nods-dialog-scrim, .m-sheet) .nods-switch__track::after {
  width: 27px;
  height: 27px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
:is(html.m-phone .nods-dialog-scrim, .m-sheet)
  .nods-switch
  input:checked
  + .nods-switch__track::after {
  transform: translateX(20px);
}
html.m-phone
  .nods-dialog-scrim
  :is(.tps__chips button, .tps__chip, .sh__chip, .cls__chip) {
  min-height: 40px;
  border-radius: 999px;
}
html.m-phone .nods-dialog-scrim .nods-dialog__footer .nods-btn,
html.m-phone .nods-dialog-scrim .nods-btn--lg {
  height: 52px;
  font-size: 16px;
}
.cpw--sheet .cpw__sec {
  grid-template-columns: minmax(0, 1fr);
}
.cpw--sheet .cpw__amt {
  min-width: 0;
}
.cpw--sheet .cpw__amt input {
  width: 0;
}
.cpw--sheet .cpw__stats > span {
  min-width: 0;
}
/* a trader's Follow and Copy trades share the full width (the profile's column otherwise shrinks them to their words); the claim key keeps its disc */
.m-id__acts {
  justify-self: stretch;
}
.m-id__acts .nods-btn {
  width: 100%;
  height: 46px;
  font-size: 15px;
}
.m-id__acts--3 .m-ib {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}

/* the account card, swapped: the window switch sits on the label's row, the money actions at the foot beside the balances */
.m-acct__top .m-rng {
  flex: none;
  padding: 2px;
}
.m-acct__top .m-rng button {
  height: 28px;
  min-width: 0;
  padding: 0 9px;
  font-size: 12px;
}
.m-acct__foot {
  align-items: center;
}
.m-acct__foot .m-acct__ic {
  flex: none;
  gap: 8px;
}
.m-acct__foot .m-acct__i {
  width: 40px;
  height: 40px;
}

/* the chart keeps its touches: nothing that starts on it (a pan, a pinch, a drag on the price or time axis) scrolls or zooms the page */
.m-chart :is(.tv-canvas, .tv-lightweight-charts, .tv-main),
.m-pos__chart,
.m-pos__chart .pmod__canvas {
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
}
.m-chart .tv-canvas canvas,
.m-pos__chart canvas {
  touch-action: none;
}

/* ===== a market on the phone, second pass ===== */
/* its tabs: the same text tabs as everywhere, pinned under the header while the list scrolls */
.m-mkt__tabs {
  position: sticky;
  top: var(--m-top);
  z-index: 12;
  background: var(--bg-page);
  justify-content: center;
}
/* Long and Short float in the tab bar's glass pill, held off the screen's edges */
.m-act {
  left: calc(var(--m-x) + 4px);
  right: calc(var(--m-x) + 4px);
  bottom: calc(14px + env(safe-area-inset-bottom));
  gap: 6px;
  padding: 6px;
  border-radius: 34px;
  background: rgba(22, 22, 25, 0.74);
  -webkit-backdrop-filter: var(--m-blur);
  backdrop-filter: var(--m-blur);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 40px rgba(0, 0, 0, 0.65),
    0 2px 8px rgba(0, 0, 0, 0.4);
}
.m-act__b {
  height: 54px;
  border-radius: 999px;
  font-size: 17px;
}
/* the ticket in its sheet: the market's name larger, every control a thumb tall, the TP / SL tick a full row */
.m-tkt .m-tkt__t {
  gap: 10px;
}
.m-tkt .m-tkt__t b {
  font: 600 20px/24px var(--font-ui);
}
.m-tkt .m-tkt__t .nods-num {
  font-size: 16px;
  color: var(--text-secondary);
}
.m-tkt .nods-check {
  align-items: center;
  min-height: 44px;
  font-size: 15px;
}
.m-tkt .nods-check__box {
  width: 22px;
  height: 22px;
  margin-top: 0;
  border-radius: 7px;
}
.m-tkt .nods-input--lg,
.m-tkt .nods-input {
  height: 52px;
  border-radius: 14px;
}
.m-tkt .nods-input__ctl {
  font-size: 18px;
}
.m-tkt .nods-btn--lg,
.m-tkt .ticket__submit,
.m-tkt .nods-btn--full {
  height: 54px;
  border-radius: 999px;
  font-size: 17px;
}

/* the keyboard is up (iOS): every sheet rides on top of it, the floating bars step aside */
html.m-kb:not(:has(.m-sheet-scrim, .nods-dialog-scrim)) :is(.m-act, .m-tabbar) {
  display: none;
} /* behind a window they stay: nothing behind it changes while you type */
/* the thesis in its sheet: the desktop window's box drops away, the reply field pinned at the foot */
html.m-phone .nods-dialog-scrim .nods-dialog {
  max-width: none;
}
.m-sheet--tmod .m-sheet__b {
  padding-bottom: var(--m-sheet-off, 0px);
}
.tmod--sheet {
  position: static;
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  min-height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: none;
  overflow: visible;
}
.tmod--sheet .pmod__head {
  padding: 0 12px 10px 16px;
}
.tmod--sheet .pmod__head .nods-iconbtn[aria-label="Close"] {
  display: none;
}
.tmod--sheet .tmod__body {
  flex: 1;
  overflow: visible;
  padding: 0 16px 12px;
}
.tmod--sheet .tmod__quote {
  font-size: 17px;
  line-height: 25px;
}
.tmod--sheet :is(.tmod__composer, .tmod__locked) {
  position: sticky;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 3;
  margin: 0 10px calc(10px + env(safe-area-inset-bottom));
  padding: 6px 6px 6px 8px;
  border: 0;
  border-radius: 30px;
  background: var(--m-cap-bg);
  -webkit-backdrop-filter: var(--m-cap-blur);
  backdrop-filter: var(--m-cap-blur);
  box-shadow: var(--m-cap-sh);
}
.tmod--sheet .tmod__in {
  font-size: 16px;
}
.tmod--sheet .tmod__composer .nods-btn,
.tmod--sheet .tmod__locked .nods-btn {
  height: 40px;
  border-radius: 999px;
}

/* the leaderboard's Everyone / Following and a trader's tabs: the same text tabs as everywhere */
.m-board__tabs {
  margin: 0 0 4px;
}
.m-tr__tabs {
  margin-top: 0;
}
.m-app .nods-toast {
  touch-action: none;
}

/* long translations (German, Russian) never break a button: a label that cannot fit ends in an ellipsis, a tab row scrolls sideways */
.m-app :is(.m-acct__a, .m-pos__acts, .m-id__acts, .m-acc__a) .nods-btn,
.m-act__b {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-app .m-al__tab,
.m-sheet .m-al__tab {
  white-space: nowrap;
}

/* ===== v5 polish: fewer strokes. A card stands off the page by its surface alone; hairlines stay only where they divide what is inside
   one card (a list's rows, the foot of the account, the win's tray). Switch tracks lose their rings too ===== */
.m-app :is(.m-card, .m-acct, .m-win, .m-pc, .m-pod__c, .m-rc, .m-bals__r),
.m-sheet :is(.m-card, .m-kpis) {
  border-color: transparent;
}
.m-app .m-kpis {
  border-color: transparent;
}
.m-app :is(.m-rng, .m-seg, .m-sfield),
.m-sheet :is(.m-rng, .m-seg, .m-sfield) {
  box-shadow: none;
}
:is(.m-feed, .m-thc) .frow {
  border-color: transparent;
  background: var(--surface-card);
}
.m-app .m-pod__c.is-1 {
  background:
    linear-gradient(
        180deg,
        rgba(243, 242, 238, 0.07),
        rgba(243, 242, 238, 0) 70%
      )
      border-box no-repeat,
    var(--surface-card);
} /* the wash spans the border box once: repeated from the padding box, its bright top showed again along the card's lower edge */
/* the market's chart toolbar, shorter on the phone */
.m-chart .tv-pm {
  display: none;
} /* Price / Mkt cap leave the phone's toolbar */
/* your rank sits in the flow under the podium, never floating over the list */
.m-you {
  position: relative;
  bottom: auto;
  margin: 14px 16px 4px;
}
/* a phone has no light theme yet: its switch stays hidden */
.mset [data-set="theme"] {
  display: none;
}
/* a sheet's body hands a pull at its top to the sheet (MSheet, mGrips), so it never bounces the page or the sheet's own content instead */
.m-sheet__b,
html.m-phone .nods-dialog-scrim .nods-dialog__body {
  overscroll-behavior-y: none;
}

/* every sheet: 3px off the screen's sides (closer, still clear of them); a hairline all round, bright along the top, much fainter down
   the sides, so the sheet's edge reads against the dimmed screen without a frame */
.m-sheet {
  left: 3px;
  right: 3px;
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-top-color: rgba(255, 255, 255, 0.1);
  border-bottom: 0;
  box-shadow: var(--shadow-sheet);
}
html.m-phone .nods-dialog-scrim .nods-dialog {
  width: calc(100% - 6px);
  margin-left: 3px;
  margin-right: 3px;
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-top-color: rgba(255, 255, 255, 0.1);
  border-bottom: 0;
  box-shadow: var(--shadow-sheet);
}
/* the eye beside "Account value": its centre sits exactly on the middle of the capitals (measured: cap middle, not the line box), at the
   words' own weight */
.m-acc .m-eye {
  margin: -8px 0;
}
.m-acc .m-eye svg {
  width: 15px;
  height: 15px;
  transform: translateY(-0.5px);
}

/* a position's card (the dossier's card, for the phone): one raised surface; the market and its side on top with how long it ran, the PnL
   large, then size, entry and the way out side by side under one hairline */
.m-pos__card {
  margin: 12px 16px 0;
  padding: 14px 16px 16px;
  border-radius: 20px;
  background: var(--surface-raised);
}
.m-pos__ct {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.m-pos__card .m-pos__mkt {
  margin: 0;
}
.m-pos__card .m-pos__mkt b {
  font: 600 17px/22px var(--font-ui);
}
.m-pos__card .m-pos__st {
  overflow: hidden;
  font: 400 12px/16px var(--font-ui);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-pos__lbl {
  display: block;
  margin-top: 16px;
  font: 400 13px/18px var(--font-ui);
  color: var(--text-tertiary);
}
.m-pos__card .m-pos__pnl {
  margin-top: 2px;
}
.m-pos__card .m-pos__pnl > .nods-num {
  font-size: 32px;
  line-height: 38px;
}
.m-pos__card .m-pos__facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 0;
}
.m-pos__card .m-pos__facts dt {
  font-size: 12px;
  line-height: 16px;
}
.m-pos__card .m-pos__facts dd,
.m-pos__card .m-pos__facts dd .nods-num {
  font-size: 14px;
  line-height: 18px;
}
.m-pos__card + .m-pos__chart {
  margin-top: 10px;
}

/* ===== a position, after the fomo trade view: who (Follow on the right), the market large with its side, its status and the mark, the
   chart, the ranges as quiet words, one line of how it ran, the position card (size and PnL large, quantity and return under them, entry and
   the way out after a dashed rule, Share at its foot), the activity as folds, the actions pinned at the foot ===== */
.m-pos__who {
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.m-pos__tr {
  gap: 12px;
}
.m-pos__tr b {
  font: 600 18px/24px var(--font-ui);
}
.m-pos__tr > svg {
  color: var(--text-tertiary);
}
.m-pos__who .m-pos__follow.nods-btn {
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 15px;
}
.m-pos__mk {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 6px;
}
.m-pos__coin {
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.m-pos__coin .coin-ico {
  border-radius: 50%;
}
.m-pos__mkl {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.m-pos__tk {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  cursor: pointer;
}
.m-pos__tk b {
  font: 600 20px/24px var(--font-ui);
}
.m-pos__tk svg {
  color: var(--text-tertiary);
}
.m-pos__tags {
  display: flex;
  align-items: center;
  gap: 6px;
}
.m-pos__stt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--surface-raised);
  font: 600 12px/1 var(--font-ui);
  color: var(--text-secondary);
}
.m-pos__stt.is-open {
  background: rgba(243, 242, 238, 0.1);
  color: var(--text-primary);
}
.m-pos__stt i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--long);
}
.m-pos__stt.is-liquidated {
  background: var(--short-tint);
  color: var(--text-short);
}
.m-pos__mkr {
  display: grid;
  justify-items: end;
  gap: 2px;
}
.m-pos__mkr .nods-num {
  font-size: 20px;
  line-height: 24px;
}
.m-pos__mkr > span:last-child {
  font: 400 13px/18px var(--font-ui);
  color: var(--text-tertiary);
}
.m-pos__rng {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 8px 16px 0;
}
.m-pos__r {
  flex: none;
  min-width: 48px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  font: 600 14px/1 var(--font-num);
  color: var(--text-tertiary);
  cursor: pointer;
}
.m-pos__r.is-on {
  background: var(--surface-raised);
  color: var(--text-primary);
}
.m-pos__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 16px 0;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--surface-raised);
  font: 500 15px/20px var(--font-ui);
  color: var(--text-secondary);
}
.m-pos__note > svg {
  flex: none;
  color: var(--text-tertiary);
}
.m-pos__note.is-liq > svg {
  color: var(--text-short);
}
.m-pos__card2 {
  margin: 10px 16px 0;
  overflow: hidden;
  border-radius: 22px;
  background: var(--surface-raised);
}
.m-pos__in {
  padding: 16px 18px;
  border-radius: 22px;
  background: var(--bg-page);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.m-pos__row1,
.m-pos__row2,
.m-pos__row3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.m-pos__row1 .nods-num {
  font-size: 26px;
  line-height: 32px;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.m-pos__row2 {
  margin-top: 4px;
  font: 400 15px/20px var(--font-num);
  color: var(--text-secondary);
}
.m-pos__row3 {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.m-pos__row3 > span {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.m-pos__row3 i {
  font: 400 14px/18px var(--font-ui);
  font-style: normal;
  color: var(--text-tertiary);
}
.m-pos__row3 .nods-num {
  font-size: 16px;
}
.m-pos__share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  padding: 0;
  border: 0;
  background: none;
  font: 600 16px/1 var(--font-ui);
  color: var(--text-primary);
  cursor: pointer;
}
.m-pos__share:active {
  background: rgba(243, 242, 238, 0.05);
}
.m-pos__accs {
  margin-top: 8px;
}
.m-pos__acch {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 0;
  background: none;
  text-align: left;
  font: 600 19px/24px var(--font-ui);
  color: var(--text-primary);
  cursor: pointer;
}
.m-pos__acch svg {
  color: var(--text-tertiary);
  transition: transform 220ms var(--ease-out);
}
.m-pos__acc.is-open .m-pos__acch svg {
  transform: rotate(180deg);
}
.m-pos__acc .m-pos__list {
  padding-top: 0;
}
.m-pos__acts:has(> :nth-child(2):last-child) {
  grid-template-columns: 1fr 1.7fr;
}

/* the sheet's hairline fades: bright along the top, easing down to the faint sides through the rounded corners over the first 72px, so
   there is no point where one colour cuts to the other (a gradient border drawn on top of the content, never taking a click) */
.m-sheet,
html.m-phone .nods-dialog-scrim .nods-dialog {
  border: 0;
}
html.m-phone .nods-dialog-scrim .nods-dialog {
  position: relative;
}
.m-sheet::after,
html.m-phone .nods-dialog-scrim .nods-dialog::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  padding: 1px 1px 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12) 0,
    rgba(255, 255, 255, 0.07) 24px,
    rgba(255, 255, 255, 0.035) 72px,
    rgba(255, 255, 255, 0.035) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  pointer-events: none;
}

/* the chart's controls: the ranges as quiet words, the chosen one in a soft capsule, then a hairline and the candles / line switch */
.m-pos__rng {
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px 2px;
}
.m-pos__rs {
  display: flex;
  gap: 2px;
}
.m-pos__r {
  min-width: 44px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.m-pos__r.is-on {
  background: rgba(243, 242, 238, 0.1);
}
.m-pos__rsep {
  width: 1px;
  height: 18px;
  background: var(--line-soft);
}
.m-pos__lt {
  display: grid;
  place-items: center;
  width: 36px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--long);
  cursor: pointer;
}
.m-pos__lt:active {
  background: rgba(243, 242, 238, 0.06);
}
/* the position card, Nods' own: one raised surface; how it ran as a quiet line with the share disc beside it; size and PnL as the two large
   figures, quantity and return under them; entry, the way out and the margin in three columns under one hairline */
.m-pos__c3 {
  margin: 14px 16px 0;
  padding: 14px 16px 16px;
  border-radius: 22px;
  background: var(--surface-raised);
}
.m-pos__c3h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.m-pos__c3s {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  font: 500 13px/18px var(--font-ui);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-pos__c3s > svg {
  flex: none;
}
.m-pos__c3s.is-liq {
  color: var(--text-short);
}
.m-pos__c3x {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  margin: -4px -6px -4px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(243, 242, 238, 0.06);
  color: var(--text-primary);
  cursor: pointer;
}
.m-pos__c3x:active {
  background: rgba(243, 242, 238, 0.12);
}
.m-pos__c3v {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.m-pos__c3v > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.m-pos__c3v > .is-r {
  justify-items: end;
  text-align: right;
}
.m-pos__c3v > div > span:first-child {
  font: 400 12px/16px var(--font-ui);
  color: var(--text-tertiary);
}
.m-pos__c3v > div > .nods-num {
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.m-pos__c3v > div:first-child > .nods-num {
  color: var(--text-primary);
}
.m-pos__c3v small {
  font: 400 13px/18px var(--font-num);
  color: var(--text-secondary);
}
/* under Size (your margin): the leveraged size, in dollars or the coin, its arrows switching; plain text, no chip */
.m-pos__lvg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  min-width: 0;
  padding: 6px 2px;
  margin: -6px -2px;
  border: 0;
  background: none;
  font: 400 13px/18px var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-state) var(--ease-out);
}
.m-pos__lvg > span:first-child {
  font-family: var(--font-ui);
  color: var(--text-tertiary);
}
.m-pos__lvg .nods-icon {
  flex: none;
  color: var(--text-tertiary);
}
@media (hover: hover) {
  .m-pos__lvg:hover {
    color: var(--text-primary);
  }
}
.m-pos__c3f {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(243, 242, 238, 0.08);
}
.m-pos__c3f > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.m-pos__c3f > div:nth-child(2) {
  justify-items: center;
  text-align: center;
}
.m-pos__c3f > div:nth-child(3) {
  justify-items: end;
  text-align: right;
}
.m-pos__c3f dt {
  font: 400 12px/16px var(--font-ui);
  color: var(--text-tertiary);
}
.m-pos__c3f dd {
  margin: 0;
  white-space: nowrap;
}
.m-pos__c3f dd .nods-num {
  font-size: 15px;
  line-height: 20px;
}
.m-pos__dur {
  font: 600 15px/20px var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* ===== centring pass: every capsule with a fill centres its word on both axes, optically (a word in lowercase sits on its x-height, so the
   box is lifted by its descender room); ranges, tabs, badges and price tags alike ===== */
.m-app
  :is(
    .m-pos__r,
    .m-rng button,
    .m-side,
    .m-lev,
    .m-pos__stt,
    .m-sh__n,
    .m-me__act,
    .m-chip,
    .nods-tab,
    .nods-seg__item
  ),
.m-sheet
  :is(
    .m-pos__r,
    .m-rng button,
    .m-side,
    .m-pos__stt,
    .nods-tab,
    .nods-seg__item
  ),
html.m-phone .nods-dialog-scrim :is(.nods-tab, .nods-seg__item) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
}
.m-app :is(.m-side, .m-lev, .m-pos__stt),
.m-sheet :is(.m-side, .m-pos__stt) {
  padding-top: 1px;
}
/* the market chart on the phone: the OHLC legend leaves (the price above the chart says it), the toolbar keeps the timeframes and one menu */
.m-chart .tv-legend {
  display: none;
}
.m-chart .tv-top {
  border-bottom: 0;
}
/* the position's activity: Fills, Theses and Orders as the app's text tabs, always all three */
.m-pos__tabs {
  margin-top: 14px;
}

/* ===== every window's actions stay on screen: an action row that lives inside a window's scrolling body (Share PnL, the Funds button,
   onboarding, export key) is pinned to the foot of that body, on the window's own surface, so however tall the content, the buttons are
   whole and one tap away; the system footer already sits outside the scroll ===== */
html.m-phone .nods-dialog-scrim :is(.auth__acts, .sh__acts) {
  position: sticky;
  bottom: calc(-1 * var(--m-dlg-pad, 16px));
  z-index: 4;
  margin: 0 -20px calc(-1 * var(--m-dlg-pad, 16px));
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface-card);
  box-shadow: 0 -1px 0 var(--line-soft);
}
html.m-phone .nods-dialog-scrim .shr__acts .nods-btn,
html.m-phone .nods-dialog-scrim .auth__acts .nods-btn,
html.m-phone .nods-dialog-scrim .xk__foot .nods-btn {
  height: 50px;
  border-radius: 999px;
}
html.m-phone .nods-dialog.shr-dlg {
  background: var(--surface-card);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mfund > .nods-btn--full,
.mfund > .nods-btn {
  position: sticky;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 4;
  margin: 24px 6px calc(16px + env(safe-area-inset-bottom));
  width: calc(100% - 12px);
  height: 48px;
  border-radius: 999px;
  box-shadow:
    0 0 0 6px var(--m-cap-ring),
    0 0 0 7px rgba(255, 255, 255, 0.08),
    0 18px 40px rgba(0, 0, 0, 0.6);
}
/* the dialog body's own padding, known to the pinned rows above */
html.m-phone .nods-dialog-scrim .nods-dialog__body {
  --m-dlg-pad: 16px;
}

/* ===== notices on the phone, as iOS draws its own: one card across the top, 8px off the sides and just under the status bar, dropping in
   from above with a spring, the newest on top and at most two in sight; a larger lead, the title and one line under it, the action a thumb
   tall; a flick up or sideways sends one away (Shell.jsx ToastHost) ===== */
.m-app .toasts {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 8px);
  left: 8px;
  right: 8px;
  z-index: 200;
  display: grid;
  justify-items: stretch;
  gap: 8px;
  width: auto;
  max-width: none;
  transform: none;
  pointer-events: none;
}
.m-app .toasts > * {
  pointer-events: auto;
}
.m-app .toasts > .nods-toast:nth-child(n + 3) {
  display: none;
}
.m-app .nods-toast {
  width: 100%;
  min-height: 68px;
  padding: 10px 10px 10px 12px;
  gap: 12px;
  border-radius: 24px;
  background: rgba(22, 22, 25, 0.84);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  animation: m-toast-in 460ms cubic-bezier(0.22, 1.25, 0.36, 1) both;
}
.m-app .nods-toast.is-leaving {
  animation: m-toast-out 240ms cubic-bezier(0.4, 0, 1, 1) both;
}

.m-app .nods-toast__title {
  font-size: 15px;
  line-height: 20px;
}
.m-app .nods-toast__desc {
  font-size: 13px;
  line-height: 18px;
}
.m-app .nods-toast__side .nods-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14px;
}
.m-app .nods-toast__side .nods-iconbtn,
.m-app .nods-toast__side .nods-toast__share {
  width: 38px;
  height: 38px;
  min-width: 38px;
}
@keyframes m-toast-in {
  from {
    opacity: 0;
    transform: translate3d(0, -120%, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes m-toast-out {
  to {
    opacity: 0;
    transform: translate3d(0, -110%, 0) scale(0.98);
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-app .nods-toast,
  .m-app .nods-toast.is-leaving {
    animation-duration: 1ms;
  }
}

/* the home header carries the account value once the big figure has scrolled away: centred between the logo and the bell, the value over
   today's change, rising in as the figure leaves; a tap scrolls back to the top */
.m-hd--home {
  position: sticky;
}
.m-hd__val {
  position: absolute;
  left: 50%;
  top: calc(env(safe-area-inset-top) + 50%);
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--text-primary);
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -30%);
  pointer-events: none;
  transition:
    opacity 220ms var(--ease-out),
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m-hd--home.is-mini .m-hd__val {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.m-hd__val > .nods-num:first-child {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.m-hd__val > .nods-num:last-child {
  font-size: 12px;
  line-height: 15px;
  white-space: nowrap;
}
.m-hd--home.is-mini {
  box-shadow: 0 1px 0 var(--line-soft);
}

/* the chart's controls: candles or a line on the left, the ranges in the middle, its settings on the right (a dot when something is hidden) */
.m-pos__rng {
  justify-content: space-between;
  gap: 6px;
  padding: 10px 12px 2px;
}
.m-pos__ty {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: var(--surface-raised);
}
.m-pos__tyb {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
}
.m-pos__tyb.is-on {
  background: rgba(243, 242, 238, 0.12);
  color: var(--text-primary);
}
.m-pos__rs {
  gap: 0;
}
.m-pos__r {
  min-width: 38px;
  padding: 0 8px;
}
.m-pos__cs {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-secondary);
  cursor: pointer;
}
.m-pos__cs.is-set::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bone);
}
/* the chart settings sheet: one row per layer, its switch on the right */
.mcs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 14px;
  cursor: pointer;
}
.mcs__row + .mcs__row {
  border-top: 1px solid var(--line-soft);
}
.mcs__t {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.mcs__t b {
  font: 600 15px/20px var(--font-ui);
  color: var(--text-primary);
}
.mcs__t small {
  font: 400 13px/18px var(--font-ui);
  color: var(--text-tertiary);
}

/* ===== the app's height is measured (--m-vvh, MShell.jsx), never a viewport unit: iOS 26 Safari paints nothing fixed below its floating
   toolbar while 100vh runs on under it, and a viewer page can pin every viewport unit to a fixed device size. The body ends where the
   visible area ends and, through its transform, is the containing block of every fixed layer (the tab bar, Long / Short, every sheet and
   window), so each of them ends there too, whole. Without the measure the body keeps inset:0 ===== */
html.m-on body {
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: var(--m-vvh, 100%);
  transform: translateZ(0);
}
/* every height that followed the viewport follows the measured height (--m-vvh) instead: a window is at most the screen less 44px
   (a share of its scrim, which is the body, never 92dvh), a screen at least one visible screen tall, the feed exactly one */
html.m-phone .nods-dialog-scrim .nods-dialog {
  max-height: calc(100% - 44px);
}
html.m-on .m-scr {
  min-height: var(--m-vvh, 100dvh);
}
html.m-on .m-feed {
  height: var(--m-vvh, 100dvh);
}
html.m-on .m-me__list {
  min-height: calc(var(--m-vvh, 100dvh) - var(--m-top) - 44px);
}
html.m-on .m-feed .pfl {
  max-height: calc(var(--m-vvh, 100dvh) * 0.7);
}
/* a window runs 40px past the bottom of the screen (so a pull up never opens a gap under it) and pads its foot by the same 40px, so its
   last row and its buttons end exactly at the screen's edge. The home-screen inset rule above had dropped those 40px, which pushed every
   window's buttons 40px under the edge */
html.m-phone .nods-dialog-scrim .nods-dialog.nods-dialog {
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}
html.m-phone .nods-dialog-scrim .nods-dialog:is(.m-tkt, .m-acts) {
  padding-bottom: 40px;
}
html.m-phone .shr-dlg .nods-dialog__footer {
  display: grid;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--line-soft);
}
html.m-phone .shr-dlg .nods-dialog__footer .shr__acts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
  gap: 8px;
  width: 100%;
  margin: 0;
}
html.m-phone .shr-dlg .nods-dialog__footer .shr__acts > .nods-btn {
  width: 100%;
  height: 50px;
  border-radius: 999px;
}
html.m-phone .shr-dlg .nods-dialog__footer .shr__acts > .nods-btn:last-child {
  width: 50px;
  padding: 0;
}

/* ===== dropdowns on the phone: every Select opens as a sheet from the bottom of the screen (as iOS does its menus), whatever the field's
   place: the whole width less 3px, options a thumb tall, the chosen one marked, the screen dimmed around it; a tap outside closes it ===== */
html.m-phone .nods-select__menu {
  position: fixed !important;
  left: 3px !important;
  right: 3px !important;
  top: auto !important;
  bottom: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: 62% !important;
  padding: 26px 10px calc(14px + env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-radius: 28px 28px 0 0 !important;
  background: var(--surface-card) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow:
    0 0 0 100vmax rgba(10, 10, 11, 0.55),
    0 -1px 0 rgba(255, 255, 255, 0.1) !important;
  transform: none !important;
  animation: m-sel-up 320ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
  overscroll-behavior: contain;
}
html.m-phone .nods-select__menu::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 36px;
  height: 5px;
  margin-left: -18px;
  border-radius: 3px;
  background: rgba(243, 242, 238, 0.22);
}
html.m-phone .nods-select__opt {
  height: 52px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  font: 500 16px/1 var(--font-ui) !important;
}
html.m-phone .nods-select__opt + .nods-select__opt {
  margin-top: 2px;
}
html.m-phone .nods-select__opt.is-active:not(.is-selected) {
  background: none !important;
}
html.m-phone .nods-select__opt.is-selected {
  background: rgba(243, 242, 238, 0.08) !important;
  font-weight: 600 !important;
}
@keyframes m-sel-up {
  from {
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: none;
  }
}
/* notices on the phone have no close button: a flick up or sideways sends one away (a tap would leave the button stuck on, iOS keeps :hover) */
html.m-phone .nods-toast__close {
  display: none !important;
}
/* every window with a handle: 4px off the screen's sides (one step further in than 3px) */
.m-sheet {
  left: 4px;
  right: 4px;
}
html.m-phone .nods-dialog-scrim .nods-dialog {
  width: calc(100% - 8px);
  margin-left: 4px;
  margin-right: 4px;
}
html.m-phone .nods-select__menu {
  left: 4px !important;
  right: 4px !important;
}

/* ===== the tab bar, alive: the chosen tab's capsule is one element that glides between tabs (the per-tab fill is off), and the bar shrinks
   to a slim pill while a screen scrolls down, growing back on the way up, on a new screen or at the top ===== */
.m-tabbar {
  --pad: 5px;
  padding: var(--pad);
  transform-origin: 50% 100%;
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    height 420ms cubic-bezier(0.22, 1, 0.36, 1),
    left 420ms cubic-bezier(0.22, 1, 0.36, 1),
    right 420ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 420ms cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 420ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 300ms;
}
.m-tab::before {
  display: none;
}
.m-tab {
  z-index: 1;
  transition:
    color 260ms var(--ease-out),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m-tabbar__pill {
  position: absolute;
  top: var(--pad);
  bottom: var(--pad);
  left: var(--pad);
  width: calc((100% - 2 * var(--pad) - 8px) / 5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateX(calc(var(--i, 0) * (100% + 2px)));
  transition: transform 460ms cubic-bezier(0.3, 1.35, 0.4, 1);
  pointer-events: none;
  z-index: 0;
}
.m-tabbar.is-mini {
  --pad: 4px;
  left: calc(var(--m-x) + 44px);
  right: calc(var(--m-x) + 44px);
  height: 50px;
  border-radius: 25px;
  background-color: rgba(22, 22, 25, 0.84);
}
.m-tabbar.is-mini .m-tab {
  transform: scale(0.84);
}
.m-tabbar.is-mini .m-tab__me .nods-avatar {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .m-tabbar,
  .m-tabbar__pill,
  .m-tab {
    transition-duration: 1ms;
  }
}

/* a notice takes the finger itself: iOS would otherwise claim the drag as a page pan and cancel it */
.m-app .nods-toast {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
/* a screen on top shows a handle at its top: pulled down from there (or anywhere at the page's top) it closes (MShell.jsx) */
.m-scr--stack {
  position: relative;
}
.m-scr--stack::before {
  content: "";
  position: absolute;
  top: calc(env(safe-area-inset-top) + 5px);
  left: 50%;
  z-index: 40;
  width: 36px;
  height: 5px;
  margin-left: -18px;
  border-radius: 3px;
  background: rgba(243, 242, 238, 0.24);
  pointer-events: none;
}
.m-app.is-pulling {
  overflow: hidden;
}
.m-app.is-pulling .m-scr--stack {
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.1),
    0 -20px 60px rgba(0, 0, 0, 0.6);
}
.m-app.is-pulling .m-act {
  opacity: 0;
  transition: opacity 160ms;
}

/* ===== a window you can type in rests as it is, only as tall as its content, nothing empty under it. It makes room for the keys only while
   a field in it has them, or a tap is giving them to one: MShell (mViewport) marks it [data-keys] in the same touch, before the focus, so
   it is laid out for the keys when iOS looks, and draws the change as a slide. While marked it keeps the keys' height of its own surface
   under its content (--m-kbh), so a short window's content ends above the keys and a long one can be dragged up until its last row clears
   them. Pulled up on the foot, its surface runs on to the screen's bottom edge ===== */
html.m-phone
  .nods-dialog-scrim
  .nods-dialog:has(
    :is(
      input:not(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="button"],
        [type="submit"],
        [type="reset"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [readonly],
        [disabled]
      ),
      textarea:not([readonly], [disabled])
    )
  ) {
  max-height: calc(100% + 28px) !important;
} /* 12px under the top: the window runs 40px past the foot */
html.m-phone
  :is(
    .nods-dialog-scrim .nods-dialog[data-keys] > .nods-dialog__body,
    .m-sheet[data-keys]:not(.m-sheet--tmod) > .m-sheet__b
  ) {
  padding-bottom: 16px !important;
}
html.m-phone
  :is(
    .nods-dialog-scrim .nods-dialog[data-keys] > .nods-dialog__body,
    .m-sheet[data-keys]:not(.m-sheet--tmod) > .m-sheet__b
  )::after {
  content: "";
  display: block;
  flex: none;
  height: var(--m-kbh, 0px);
}
/* the thesis: its reply bar rests on the screen's foot and rises to the keys' line with them; the thread scrolls above it */
html.m-phone .m-sheet--tmod[data-keys] {
  padding-bottom: calc(var(--m-kbh, 0px) + 40px) !important;
}
html.m-phone
  .m-sheet--tmod:has(
    :is(
      input:not(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="button"],
        [type="submit"],
        [type="reset"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [readonly],
        [disabled]
      ),
      textarea:not([readonly], [disabled])
    )
  )
  .m-sheet__b {
  padding-bottom: 0 !important;
}
html.m-phone .m-sheet--tmod .m-sheet__b::after {
  display: none;
}
html.m-phone .m-sheet--tmod[data-keys] :is(.tmod__composer, .tmod__locked) {
  bottom: 10px;
  margin-bottom: 10px;
}
/* the sign-in and first-steps windows let the title lead: their logo row would push the field down into the keys' height */
html.m-phone
  .auth:has(
    :is(
      input:not(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="button"],
        [type="submit"],
        [type="reset"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [readonly],
        [disabled]
      ),
      textarea:not([readonly], [disabled])
    )
  )
  .nods-dialog__header {
  display: none;
}
html.m-phone
  .auth:has(
    :is(
      input:not(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="button"],
        [type="submit"],
        [type="reset"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [readonly],
        [disabled]
      ),
      textarea:not([readonly], [disabled])
    )
  )
  .nods-dialog__body {
  padding-top: 10px;
}
/* and they sit a touch tighter, so the field and its buttons stand above that line on a phone */
html.m-phone
  .auth:has(
    :is(
      input:not(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="button"],
        [type="submit"],
        [type="reset"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [readonly],
        [disabled]
      ),
      textarea:not([readonly], [disabled])
    )
  )
  .auth__b {
  gap: 12px;
}
html.m-phone
  .auth:has(
    :is(
      input:not(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="button"],
        [type="submit"],
        [type="reset"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [readonly],
        [disabled]
      ),
      textarea:not([readonly], [disabled])
    )
  )
  .auth__h {
  font-size: 26px;
  line-height: 30px;
}
html.m-phone
  .auth:has(
    :is(
      input:not(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="button"],
        [type="submit"],
        [type="reset"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [readonly],
        [disabled]
      ),
      textarea:not([readonly], [disabled])
    )
  )
  .auth__acts {
  margin-top: 8px;
}
html.m-phone
  .auth:has(
    :is(
      input:not(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="button"],
        [type="submit"],
        [type="reset"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [readonly],
        [disabled]
      ),
      textarea:not([readonly], [disabled])
    )
  )
  .auth__social {
  margin-top: 16px;
  gap: 8px;
}
html.m-phone
  .auth:has(
    :is(
      input:not(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="button"],
        [type="submit"],
        [type="reset"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [readonly],
        [disabled]
      ),
      textarea:not([readonly], [disabled])
    )
  )
  .auth__or {
  margin: 12px 0;
}
html.m-phone
  .auth:has(
    :is(
      input:not(
        [type="checkbox"],
        [type="radio"],
        [type="range"],
        [type="button"],
        [type="submit"],
        [type="reset"],
        [type="hidden"],
        [type="file"],
        [type="color"],
        [readonly],
        [disabled]
      ),
      textarea:not([readonly], [disabled])
    )
  )
  :is(.auth__prov, .auth__form .nods-input, .auth__form .nods-btn) {
  height: 50px;
}
/* search in its sheet: the bar rests on the screen's foot and rises to the keys' line with them (like every window with a field) */
html.m-phone .m-sheet .m-sbar {
  bottom: calc(48px + env(safe-area-inset-bottom));
}
html.m-phone .m-sheet[data-keys] .m-sbar {
  bottom: calc(var(--m-kbh, 0px) + 48px);
}
/* a screen with a field (search opened as a screen) gets the keys' height of room under its content while they are up, so its last row
   can scroll above them: the page itself never pans (MShell, mViewport) */
html.m-kb .m-app {
  padding-bottom: var(--m-keys, 0px);
}
/* every field on the phone is 16px or more: under 16px iOS zooms the page in as the field takes the keys */
html.m-phone .thc__in {
  font-size: 16px;
  line-height: 22px;
}
/* the capsule rests by its left edge and width (MTabBar animates those two between tabs), never past the bar */
.m-tabbar__pill {
  left: calc(
    var(--pad) + var(--i, 0) * ((100% - 2 * var(--pad) - 8px) / 5 + 2px)
  );
  transform: none;
  transition: none;
}
/* a window's hairline draws over everything inside it: a sticky row or a raised layer in the content could cover it down the sides */
.m-sheet::after,
html.m-phone .nods-dialog-scrim .nods-dialog::after {
  z-index: 99;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12) 0,
    rgba(255, 255, 255, 0.075) 24px,
    rgba(255, 255, 255, 0.05) 72px,
    rgba(255, 255, 255, 0.05) 100%
  );
}
/* a trader's profile, as yours: Follow and Copy on the banner's foot, three counts (following is a figure, not a link), the account card */
.m-counts button[aria-disabled="true"] {
  cursor: default;
}
.m-id__btns .m-id__copybtn.nods-btn {
  padding: 0 14px;
  box-shadow: 0 0 0 3px var(--bg-page);
}
.m-app.is-pulling {
  -webkit-user-select: none;
  user-select: none;
}
/* the profile's History: Fills or Trades on a quiet track above the list; four tabs scroll sideways if they ever outgrow the row */
.m-me__hk {
  display: inline-flex;
  margin: 12px 16px 6px;
}
.m-me__tabs.m-al__tabs {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.m-me__tabs.m-al__tabs::-webkit-scrollbar {
  display: none;
}
.m-me__tabs.m-al__tabs > *:not(.m-grow) {
  flex: none;
}
.m-me__tabs.m-al__tabs {
  gap: 20px;
}
html.m-phone .shr-dlg .nods-dialog__footer .shr__acts > .shr__link {
  width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 999px;
}
/* History's four ledgers on one track, each word whole; an order's status as a quiet tag */
.m-me__hk {
  display: flex;
  margin: 12px 16px 6px;
}
.m-me__hk button {
  flex: 1;
  min-width: 0;
  padding: 0 6px;
}
/* Home's lists on the same track as History's ledgers */
.m-me__hk.m-home__lists {
  margin: 0 16px 6px;
}
.m-hst {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--surface-raised);
  font: 600 11px/1 var(--font-ui);
  color: var(--text-secondary);
}
.m-hst.is-filled {
  color: var(--text-primary);
}
.m-hst.is-rejected {
  color: var(--text-short);
}
/* Share: the actions as a row of four discs with their words under them */
html.m-phone .shr-dlg .nods-dialog__footer {
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  padding: 12px 10px 14px;
} /* one track the full width: the four discs spread evenly across it */
html.m-phone .shr-dlg .nods-dialog__footer .shr__acts--ph {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 2px !important;
  width: 100%;
  margin: 0;
}
.shr__pa {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: 500 12px/16px var(--font-ui);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shr__pd {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-primary);
  transition:
    transform 160ms var(--ease-out),
    background-color 160ms;
}
.shr__pa:active .shr__pd {
  transform: scale(0.92);
  background: rgba(243, 242, 238, 0.14);
}
.shr__pa.is-primary {
  color: var(--text-primary);
}
.shr__pa.is-primary .shr__pd {
  background: var(--bone);
  color: var(--ink);
}
.shr__pa.is-primary:active .shr__pd {
  background: var(--bone);
}
.shr__pl {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* a thesis row is one tap target (it opens the thread); its heart is its own, a thumb wide, lit as the thread's heart is (the count in ink, the heart filled) with a small pop */
.m-th {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.m-th:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.m-th__like {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: -10px -8px;
  padding: 10px 8px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-th__like.is-on {
  color: var(--text-primary);
}
.m-th__like.is-on svg {
  color: var(--short);
  fill: currentColor;
  animation: m-like-pop 380ms cubic-bezier(0.3, 1.5, 0.4, 1);
}
@keyframes m-like-pop {
  0% {
    transform: scale(0.55);
  }
  60% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
/* the market's position card, compact: side and PnL on one line with a way into the trade, the three actions under it */
.m-pc.m-pc--mini {
  gap: 12px;
  padding: 14px;
}
.m-pc--mini .m-pc__top {
  align-items: center;
  gap: 10px;
}
.m-pc--mini .m-pc__id {
  flex: none;
  gap: 6px;
}
.m-pc__k {
  font: 400 12px/16px var(--font-ui);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.m-pc--mini .m-pc__pnl {
  flex: 1;
  gap: 2px;
}
.m-pc--mini .m-pc__pnl .nods-num:first-child {
  font-size: 22px;
  line-height: 26px;
}
.m-pc--mini .m-pc__pnl .nods-num + .nods-num {
  font-size: 13px;
  line-height: 16px;
}
.m-pc__go {
  flex: none;
  display: grid;
  place-items: center;
  margin-right: -4px;
  color: var(--text-tertiary);
}
.m-pc--mini .m-pc__acts {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px;
}
.m-pc--mini .m-pc__acts .nods-btn {
  height: 40px;
  border-radius: 999px;
  font-size: 14px;
}
.m-pc--mini .m-pc__acts .m-ib {
  width: 40px;
  height: 40px;
}
/* the list's summary (MMe): a quiet panel on the page's gutters, the account card's surface without its weight; what the list makes
   together under its label on the left, the action for all of them as a pill a step raised on the right */
.m-me__lh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  margin: 14px 16px 6px;
  padding: 12px 12px 12px 16px;
  border-radius: 18px;
  background: var(--surface-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.m-me__lhl {
  display: grid;
  gap: 3px;
  min-width: 0;
  white-space: nowrap;
}
.m-me__lhk {
  font: 400 12px/16px var(--font-ui);
  color: var(--text-tertiary);
}
.m-me__lhl > .nods-num {
  overflow: hidden;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
}
.m-me__all {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font: 600 13px/1 var(--font-ui);
  cursor: pointer;
  transition:
    background-color 160ms var(--ease-out),
    transform 120ms var(--ease-out);
}
@media (hover: hover) {
  .m-me__all:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}
.m-me__all:active {
  transform: scale(0.96);
}
.m-me__all:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
/* Home's categories as text tabs with the sliding line, as in the other windows; they scroll sideways when they outgrow the row */
.m-home__cats.m-al__tabs {
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.m-home__cats.m-al__tabs::-webkit-scrollbar {
  display: none;
}
.m-home__cats.m-al__tabs > * {
  flex: none;
}
/* no seam where two surfaces meet: content scrolling under a pinned bar never shows through the sub-pixel line between them. A sheet's
   body starts 2px under its handle, which is opaque on the sheet's own surface and drawn over whatever is pinned at the body's top; tabs
   pinned under a screen's header tuck 2px under it */
.m-sheet__grip {
  position: relative;
  z-index: 30;
  background: inherit;
}
.m-sheet__b {
  margin-top: -2px;
  padding-top: 2px;
}
.m-mkt__tabs,
.m-me__tabs {
  top: calc(var(--m-top) - 2px);
}
/* the body's 2px under the handle are padding, and a pinned bar counts from the padding: whatever is pinned at a sheet's top counts from the
   body's edge instead, so it slides the 2px under the handle and meets it with no line between */
.m-sheet__b :is(.m-hd, .m-al__top, .mset__bar) {
  top: -2px;
}
/* a sheet or window pulled by a mouse selects no text on the way */
.m-sheet.is-drag,
html.m-phone .nods-dialog.is-drag {
  -webkit-user-select: none;
  user-select: none;
}
/* a finished transfer, send or withdrawal stands in the middle of the space under the tabs, never pressed against them */
.m-sheet--fund .mfund:has(> .fmod__ok) {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.m-sheet--fund .mfund > .fmod__ok {
  flex: 1;
  padding: 36px 8px calc(72px + env(safe-area-inset-bottom));
}
/* the thesis sheet: the thread grows with its replies, so the pinned foot stays on the screen's edge however far it scrolls (it held
   one screen's height, and the foot rode up the middle once the replies ran past it); the call sits a step under the header's line */
.tmod--sheet .tmod__body {
  flex: 1 0 auto;
  padding-top: 12px;
}
/* when you cannot reply: a lock, what it takes, the way to it */
.tmod--sheet .tmod__locked--ph {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 8px;
}
.tmod__lk {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-secondary);
}
.tmod__lkt {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.tmod__lkt b {
  overflow: hidden;
  font: 600 15px/20px var(--font-ui);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tmod__lkt span {
  overflow: hidden;
  font: 400 13px/17px var(--font-ui);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tmod--sheet .tmod__locked--ph .nods-btn {
  flex: none;
  margin-left: 0;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
}
/* ===== every bar at the foot of a window floats as the tab bar and Long / Short do: a capsule of dark glass inset from the window's sides
   and foot, the content scrolling on under it, its buttons pills. Windows are portalled out of the app, so the look is set on the page ===== */
html.m-phone {
  --m-cap-bg: rgba(22, 22, 25, 0.78);
  --m-cap-ring: rgba(22, 22, 25, 0.92);
  --m-cap-blur: blur(22px) saturate(160%);
  --m-cap-sh:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 40px rgba(0, 0, 0, 0.6),
    0 2px 8px rgba(0, 0, 0, 0.4);
}
html.m-phone .nods-dialog-scrim .nods-dialog__footer {
  margin: 8px 10px 10px;
  padding: 6px;
  gap: 6px;
  border: 0;
  border-radius: 32px;
  background: var(--m-cap-bg);
  -webkit-backdrop-filter: var(--m-cap-blur);
  backdrop-filter: var(--m-cap-blur);
  box-shadow: var(--m-cap-sh);
}
html.m-phone .nods-dialog-scrim .nods-dialog__footer > .nods-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  border-radius: 999px;
}
html.m-phone .nods-dialog-scrim .tvd-dlg .nods-dialog__footer > .nods-btn {
  flex: 1 1 auto;
  white-space: nowrap;
} /* Reset to the Nods style is longer than Done: each takes the width its words need */
html.m-phone .nods-dialog-scrim :is(.auth__acts, .sh__acts) {
  bottom: 10px;
  margin: 18px -10px 0;
  padding: 6px;
  gap: 6px;
  border: 0;
  border-radius: 32px;
  background: var(--m-cap-bg);
  -webkit-backdrop-filter: var(--m-cap-blur);
  backdrop-filter: var(--m-cap-blur);
  box-shadow: var(--m-cap-sh);
}
html.m-phone .nods-dialog-scrim :is(.auth__acts, .sh__acts) .nods-btn {
  height: 48px;
  border-radius: 999px;
}
/* a bar pinned inside a window's scrolling body: the body clips at its foot, 17px under the bar, so a shadow falling under the bar was cut
   there into a grey band. Its soft shadow rises onto the content above instead, and nothing of it reaches the clip */
html.m-phone .nods-dialog-scrim :is(.auth__acts, .sh__acts) {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 -12px 28px -10px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.4);
}
html.m-phone .nods-dialog-scrim .sh__acts > .nods-btn {
  flex: 1 1 0;
  min-width: 0;
}
.m-pos__acts .nods-btn,
.cpw--sheet .cpw__foot .nods-btn {
  height: 48px;
  border-radius: 999px;
}
/* Share: the four actions in the capsule, discs a step smaller so it reads as a bar */
/* Home: Watchlist / All / Gainers / Losers and the categories stay under the header while the markets scroll */
.m-home__fl {
  position: sticky;
  top: calc(var(--m-top) - 2px);
  z-index: 12;
  padding-top: 10px;
  background: var(--bg-page);
}
.m-home__fl > .m-me__hk.m-home__lists {
  margin: 0 16px 6px;
}
/* the account curve held by a finger */
.eqc.is-scrub {
  cursor: grabbing;
}
/* your tabs and a trader's (Positions, Orders, Theses, History), and the Funds tabs, sit in the middle of the row; when they outgrow it they scroll from its start */
.m-me__tabs.m-al__tabs > .m-al__tab:first-of-type,
.mfund__tabs > .m-al__tab:first-of-type {
  margin-left: auto;
}
.m-me__tabs.m-al__tabs > .m-al__tab:last-of-type,
.mfund__tabs > .m-al__tab:last-of-type {
  margin-right: auto;
}
/* the photo in Edit profile sits in the page's ring with nothing between (the desktop's inner 4px and hairline drew a gap the banner showed through) */
.mset .pf__id .me-ava {
  padding: 0;
  box-shadow: none;
}
.mset .pf__id .pf__ava-veil {
  inset: 0;
}
/* a sheet never scrolls sideways: a row a hair too wide would give it a sideways bar under the pointer */
.m-sheet__b {
  overflow-x: hidden;
}
/* a swipe between a page's options: nothing under the finger is selected on the way */
html.m-swiping,
html.m-swiping * {
  -webkit-user-select: none !important;
  user-select: none !important;
  cursor: grabbing;
}
@keyframes m-in-r {
  from {
    opacity: 0;
    transform: translate3d(56px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes m-in-l {
  from {
    opacity: 0;
    transform: translate3d(-56px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.m-app[data-enter="r"] > :is(.m-scr, .m-feed) {
  animation: m-in-r 300ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.m-app[data-enter="l"] > :is(.m-scr, .m-feed) {
  animation: m-in-l 300ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@media (prefers-reduced-motion: reduce) {
  .m-app[data-enter] > :is(.m-scr, .m-feed) {
    animation: none;
  }
}
/* ===== money (MMoneyMenu): the total large in the middle, perps and cash with the transfer between them, the three moves, the record.
   Every row sits straight on the window ===== */
.m-mm .nods-dialog__body {
  display: grid;
  gap: 4px;
  padding: 6px 16px 10px;
}
.m-mm__tot {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 4px 0 14px;
  text-align: center;
}
.m-mm__tot > span {
  font: 500 14px/18px var(--font-ui);
  color: var(--text-secondary);
}
.m-mm__tot .nods-num {
  font-size: 38px;
  line-height: 44px;
  letter-spacing: -0.035em;
}
.m-mm__bal {
  display: grid;
  gap: 10px;
  padding: 12px 4px 16px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.m-mm__r {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
  font: 400 15px/20px var(--font-ui);
  color: var(--text-secondary);
}
.m-mm__r .nods-num {
  font-size: 15px;
  color: var(--text-primary);
}
.m-mm__tr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  margin-top: 4px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font: 600 15px/1 var(--font-ui);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 160ms var(--ease-out),
    transform 120ms var(--ease-out);
}
.m-mm__tr:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.1);
}
.m-mm__list {
  display: grid;
}
.m-mm__it {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 70px;
  margin: 0;
  padding: 12px 4px 12px 6px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-mm__it:active .m-mm__ic {
  transform: scale(0.92);
}
.m-mm__it:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.m-mm__tx {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}
.m-mm__tx b {
  font: 600 17px/22px var(--font-ui);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.m-mm__tx span {
  overflow: hidden;
  font: 400 13px/17px var(--font-ui);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-mm__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bone);
  color: var(--ink);
  transition: transform 120ms var(--ease-out);
}
.m-mm__hist {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  margin-top: 6px;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: 600 15px/1 var(--font-ui);
  cursor: pointer;
}
.m-mm__hist:active {
  color: var(--text-primary);
}
/* the record of what moved */
.m-led {
  padding: 0 16px 8px;
}
.m-led__h {
  padding: 2px 2px 12px;
}
.m-led__h b {
  font: 600 24px/30px var(--font-ui);
  letter-spacing: -0.02em;
}
.m-led__list {
  display: grid;
}
.m-led__r {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line-soft);
}
.m-led__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-secondary);
}
.m-led__l {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.m-led__l b {
  font: 600 15px/20px var(--font-ui);
}
.m-led__l span {
  overflow: hidden;
  font: 400 13px/17px var(--font-ui);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-led__rt {
  flex: none;
  display: grid;
  justify-items: end;
  gap: 2px;
}
.m-led__rt .nods-num {
  font-size: 15px;
}
.m-led__rt > span {
  font: 400 12px/16px var(--font-ui);
  color: var(--text-tertiary);
}
/* Share on the phone: the foot is one slim capsule like the tab bar, Post as a Bone pill with the X mark, Copy image, Copy link and Save as
   discs beside it (their names on the buttons for screen readers and as tips) */
html.m-phone .nods-dialog-scrim .shr-dlg .nods-dialog__footer {
  padding: 6px;
}
html.m-phone .shr-dlg .nods-dialog__footer .shr__acts--ph {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) repeat(3, 48px) !important;
  gap: 6px !important;
  width: 100%;
  margin: 0;
}
.shr__pb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  min-width: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--bone);
  color: var(--ink);
  font: 600 16px/1 var(--font-ui);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out);
}
.shr__pi {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 120ms var(--ease-out),
    background-color 160ms;
}
.shr__pb:active,
.shr__pi:active {
  transform: scale(0.94);
}
.shr__pi:active {
  background: rgba(255, 255, 255, 0.14);
}
.shr__pb:focus-visible,
.shr__pi:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
/* ===== a notice from Nods at the top of Home: a bright band right under the header, edge to edge (a halt in Short, anything else in
   Bone, the words in Ink); the page below it begins as a sheet laid over the band, its top corners rounded with a handle on it, so the
   colour shows behind those corners. The cross sits in the middle of the band's right side. The header is untouched ===== */
.m-note {
  position: relative;
  margin: 0 0 -12px;
  padding: 0;
  border-radius: 24px 24px 0 0;
  background: var(--short);
  color: var(--ink);
  animation: m-note-in 360ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.m-note.is-info {
  background: var(--bone);
}
@keyframes m-note-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.m-note__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 8px 38px 18px;
}
.m-note__b {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-note__b:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(10, 10, 11, 0.5);
}
.m-note__t {
  font: 700 16px/21px var(--font-ui);
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.m-note__p {
  font: 500 14px/19px var(--font-ui);
  color: rgba(10, 10, 11, 0.8);
  text-wrap: pretty;
}
.m-note__w {
  margin-top: 3px;
  font: 500 12px/16px var(--font-ui);
  color: rgba(10, 10, 11, 0.58);
}
.m-note__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgba(10, 10, 11, 0.72);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-note__x:active {
  color: var(--ink);
}
.m-note__x:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(10, 10, 11, 0.5);
}
.m-note__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 25px;
  border-radius: 24px 24px 0 0;
  background: var(--bg-page);
}
.m-note__cap i {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 36px;
  height: 5px;
  margin-left: -18px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
}
@media (prefers-reduced-motion: reduce) {
  .m-note {
    animation: none;
  }
}
/* the account card's window ("7 days", "30 days", "All time") stays on one line beside PnL */
html.m-phone .shr__mkt em span {
  white-space: nowrap;
}
/* the drawing tools' tab: a small glass tab on the chart's left edge. Its fill is a veil of Bone over whatever lies under it (the page, a
   sheet, a card, the candles, blurred), never a fixed colour, so it reads one step lighter than its surface on every window, dark or
   lighter. It lights while pressed or open. Its touch target stays a thumb wide */
.m-draw {
  width: 18px;
  height: 46px;
  margin-top: -23px;
  border-radius: 0 12px 12px 0;
  background: rgba(243, 242, 238, 0.1);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    inset -1px 0 0 rgba(243, 242, 238, 0.1),
    inset 0 1px 0 rgba(243, 242, 238, 0.05),
    inset 0 -1px 0 rgba(243, 242, 238, 0.05);
  color: var(--text-secondary);
  opacity: 1;
}
.m-draw svg {
  width: 12px;
  height: 12px;
}
.m-draw:active {
  background: rgba(243, 242, 238, 0.16);
  color: var(--text-primary);
}
.m-chart.is-draw .m-draw {
  background: rgba(243, 242, 238, 0.16);
  color: var(--text-primary);
  opacity: 1;
}
/* ===== Home's markets: the head carries Filters, a menu that drops down under it (what shows, and the order); the category row under it
   starts with your watchlist, far left ===== */
.m-home__sh {
  position: relative;
}
.m-flt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  margin-right: -4px;
  padding: 0 10px 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-card);
  color: var(--text-secondary);
  font: 600 13px/1 var(--font-ui);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 160ms var(--ease-out),
    color 160ms var(--ease-out);
}
.m-flt.is-open,
.m-flt.is-set {
  color: var(--text-primary);
}
.m-flt.is-set {
  background: var(--surface-raised);
}
.m-flt__chev {
  transition: transform 200ms var(--ease-out);
}
.m-flt.is-open .m-flt__chev {
  transform: rotate(180deg);
}
.m-flt:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.m-flt__veil {
  position: fixed;
  inset: 0;
  z-index: 39;
}
.m-flt__pop {
  position: absolute;
  z-index: 40;
  top: calc(100% + 2px);
  right: 12px;
  display: grid;
  width: 224px;
  padding: 6px;
  border-radius: 20px;
  background: rgba(28, 28, 31, 0.92);
  -webkit-backdrop-filter: var(--m-blur);
  backdrop-filter: var(--m-blur);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 40px rgba(0, 0, 0, 0.6);
  transform-origin: top right;
  animation: m-flt-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes m-flt-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.m-flt__cap {
  padding: 10px 12px 4px;
  font: 600 11px/14px var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.m-flt__it {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--text-primary);
  font: 500 15px/1 var(--font-ui);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-flt__it:active {
  background: rgba(255, 255, 255, 0.06);
}
.m-flt__it.is-on {
  font-weight: 600;
}
.m-flt__it:disabled {
  color: var(--text-tertiary);
  cursor: default;
}
.m-flt__note {
  padding: 6px 12px 8px;
  font: 400 12px/16px var(--font-ui);
  color: var(--text-tertiary);
  text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
  .m-flt__pop {
    animation: none;
  }
}
.m-home__fl > .m-home__cats {
  margin-top: 0;
}
/* ===== the market while you hold it: your position as its dossier's card (the whole card opens the dossier), and the foot bar carries
   the position's actions (TP / SL, Close, More) in place of Long / Short ===== */
.m-sec--pc .m-pos__c3--mkt {
  margin: 0 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out);
}
.m-pos__c3--mkt:active {
  transform: scale(0.99);
}
.m-pos__c3--mkt:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.m-pos__c3--mkt .m-pos__c3s {
  gap: 8px;
}
.m-pos__c3k {
  font: 600 13px/18px var(--font-ui);
  color: var(--text-primary);
}
.m-pos__c3a {
  overflow: hidden;
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.m-act.m-act--pos {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px;
}
.m-act--pos .nods-btn {
  height: 52px;
  min-width: 0;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
}
.m-act--pos .m-act__more {
  width: 52px;
  padding: 0;
}
/* the swap between your position and Long / Short: the card folds (rows to 0, so the list under it slides up instead of jumping) and fades;
   the bar sinks and fades; then the other one rises in. Opacity and rows only on the card's wrapper, never a transform: the bar inside is
   fixed to the screen, and a transform on its ancestor would carry it off */
.m-pcw {
  display: grid;
  grid-template-rows: 1fr;
}
.m-pcw__in {
  min-height: 0;
  overflow: hidden;
}
.m-pcw.is-leaving {
  animation: m-pcw-out 220ms var(--ease-out) both;
  pointer-events: none;
}
.m-pcw.is-swap {
  animation: m-pcw-in 280ms var(--ease-out) backwards;
}
@keyframes m-pcw-out {
  to {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
@keyframes m-pcw-in {
  from {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
.m-act.is-leaving {
  animation: m-act-out 180ms var(--ease-out) both;
  pointer-events: none;
}
.m-act.is-swap {
  animation: m-act-in 260ms var(--ease-out) backwards;
}
@keyframes m-act-out {
  to {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}
@keyframes m-act-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}
.m-pos__acts.is-swap {
  animation: m-act-in 260ms var(--ease-out) backwards;
}
@media (prefers-reduced-motion: reduce) {
  .m-pcw.is-leaving,
  .m-pcw.is-swap,
  .m-act.is-leaving,
  .m-act.is-swap {
    animation-duration: 1ms;
  }
}
/* Funds on the phone: its body is part of the sheet's own scroll, never a scroller of its own (it gave the window a sideways bar, and a
   second scroll the keyboard could shift inside), and nothing in it runs past its sides */
.mfund .fmod__body {
  flex: none;
  min-height: 0;
  overflow: visible;
}
.mfund,
.mfund .fmod__body {
  max-width: 100%;
  min-width: 0;
}
.mfund .fmod__body > * {
  min-width: 0;
  max-width: 100%;
}
/* the position card's head: Post a thesis, Flip and Share as three quiet discs on the right */
.m-pos__c3i {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -4px -6px -4px 0;
}
.m-pos__c3i .m-pos__c3x {
  margin: 0;
}
/* the foot of your open position (market and dossier alike): Close, Add, and More holding TP / SL and the rest */
.m-act--pos .m-act__more {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}
.m-pos__acts:has(> .m-act__more) {
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 48px;
}
.m-pos__acts .m-act__more {
  width: 48px;
  min-width: 0;
  padding: 0;
}
/* the dossier chart's price figures while it is being moved */
.pm-ticks {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 58px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 520ms var(--ease-out);
}
.pm-ticks.is-on {
  opacity: 1;
  transition-duration: 160ms;
}
.pm-ticks span {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font: 500 10px/1 var(--font-num);
  color: rgba(243, 242, 238, 0.5);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* the sort button in the Markets head: read like the other section actions (All, See all), the order in use and a chevron, no pill behind it */
.m-flt,
.m-flt.is-set {
  gap: 2px;
  height: auto;
  margin-right: -4px;
  padding: 8px 0;
  border-radius: 6px;
  background: none;
  font: 500 13px/20px var(--font-ui);
  color: var(--text-secondary);
}
.m-flt.is-open {
  color: var(--text-primary);
}
/* the notice's handle: a thumb-tall strip to pull the page up over the band and close it */
.m-note__cap {
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.m-note__cap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 120px;
  height: 40px;
  margin-left: -60px;
}
.m-note__cap:active {
  cursor: grabbing;
}
.m-note__cap:active i {
  width: 44px;
  margin-left: -22px;
  background: rgba(255, 255, 255, 0.34);
}
.m-note__cap i {
  transition:
    width 160ms var(--ease-out),
    margin 160ms var(--ease-out),
    background-color 160ms;
}
.m-note__cap:focus-visible {
  outline: 0;
}
.m-note__cap:focus-visible i {
  box-shadow: 0 0 0 3px rgba(243, 242, 238, 0.35);
}
/* Share account on the phone: the period sits under the card, small and quiet (plain words, the chosen one on a faint pill), so the card leads */
html.m-phone .shr__win {
  order: 2;
  justify-self: center;
  display: flex;
  gap: 2px;
  width: auto;
  margin: 14px 0 0;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  box-shadow: inset 0 0 0 1px rgba(243, 242, 238, 0.05);
}
html.m-phone .shr__win button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-tertiary);
  font: 500 13px/1 var(--font-ui);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 180ms var(--ease-out),
    color 180ms;
}
html.m-phone .shr__win button.is-on {
  background: rgba(243, 242, 238, 0.1);
  color: var(--text-primary);
}
html.m-phone .shr__win button:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
/* your balances on the account card open the money menu, as its more button does */
.m-acct__bal--btn {
  cursor: pointer;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 120ms var(--ease-out);
}
.m-acct__bal--btn:active {
  opacity: 0.7;
}
.m-acct__bal--btn:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
/* Edit profile on the phone: the photo always shows it can be changed (a touch screen has no hover): a light veil and the camera sit on it */
.mset .pf__id .pf__ava-veil {
  opacity: 1;
  background: rgba(0, 0, 0, 0.34);
}
.mset .pf__id .pf__ava-veil .nods-icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.mset .pf__id .pf__ava:active .pf__ava-veil {
  background: rgba(0, 0, 0, 0.5);
}
/* X on the phone: one row on the window, the X mark on a disc, who you are there (or what connecting does), and the action as a pill */
.pf__xc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
}
.pf__xm {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-primary);
}
.pf__xc.is-on .pf__xm {
  background: var(--bone);
  color: var(--ink);
}
.pf__xt {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.pf__xt b {
  overflow: hidden;
  font: 600 16px/21px var(--font-ui);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf__xt span {
  overflow: hidden;
  font: 400 13px/17px var(--font-ui);
  color: var(--text-tertiary);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pf__xb {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 96px;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--bone);
  color: var(--ink);
  font: 600 15px/1 var(--font-ui);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 120ms var(--ease-out),
    background-color 160ms;
}
.pf__xb:active {
  transform: scale(0.96);
}
.pf__xb:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.pf__xb:disabled {
  cursor: default;
}
.pf__xb--off {
  background: var(--surface-raised);
  color: var(--text-secondary);
}
.pf__xb--off:active {
  color: var(--text-short);
}
.pf__xs {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(10, 10, 11, 0.25);
  border-top-color: var(--ink);
  animation: pf-xs 700ms linear infinite;
}
@keyframes pf-xs {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pf__xs {
    animation-duration: 2s;
  }
}
/* the share foot's lead pill carries a longer name (Copy profile link): it never breaks or runs out of the pill */
.shr__pb {
  white-space: nowrap;
  font-size: 15px;
}
.shr__pb span {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* a neutral notice on the phone (a link copied, a profile saved): the white theme, its edge and the arcs that orbit it in Bone */
html.m-phone .nods-toast--info {
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--bone) 18%, transparent),
    0 18px 48px rgba(0, 0, 0, 0.6);
}
html.m-phone .nods-toast--info .nods-toast__ring i {
  background: conic-gradient(
    from 0deg,
    transparent 0 12%,
    color-mix(in oklab, var(--bone) 35%, transparent) 28%,
    var(--bone) 38%,
    transparent 50%,
    transparent 62%,
    color-mix(in oklab, var(--bone) 35%, transparent) 78%,
    var(--bone) 88%,
    transparent 100%
  );
}
html.m-phone .nods-toast--info .nods-toast__flame i {
  background: conic-gradient(
    from 0deg,
    transparent 0 16%,
    color-mix(in oklab, var(--bone) 8%, transparent) 30%,
    color-mix(in oklab, var(--bone) 22%, transparent) 38%,
    transparent 50%,
    transparent 66%,
    color-mix(in oklab, var(--bone) 8%, transparent) 80%,
    color-mix(in oklab, var(--bone) 22%, transparent) 88%,
    transparent 100%
  );
}
/* the account curve on the phone keeps every touch on it: the finger scrubs it however long it rests, only a clear pull up or down scrolls */
html.m-phone .eqc {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* ===== the landing on the phone: the wordmark and the promise up top, the SOL line in the middle with real traders' longs and shorts pinned
   on it, the markets drifting around the copy, and the two actions at the thumb. The entrance turns the mark into the word with a blur alone:
   no hard-contrast layer (on iOS it showed as a box with banding), and the word's box is fixed, so nothing moves when the mark goes ===== */
html.m-phone .land .land__top {
  display: none;
}
html.m-phone .land .land__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: calc(env(safe-area-inset-top, 0px) + clamp(56px, 11vh, 112px)) 20px
    calc(env(safe-area-inset-bottom, 0px) + 16px);
}
html.m-phone .land .land__morph {
  --mark: 80px;
  height: 80px;
  min-width: 0;
  grid-template-rows: 80px;
  align-items: center;
}
html.m-phone .land .land__morph-fx {
  display: none;
}
html.m-phone .land .land__morph-mark-clean .nods-logo {
  height: 80px !important;
}
html.m-phone .land .land__morph-mark-clean {
  animation: land-m-mark 1000ms cubic-bezier(0.5, 0, 0.15, 1) 650ms forwards;
}
html.m-phone .land .land__morph-clean {
  font-size: 64px;
  opacity: 0;
  animation: land-m-word 1000ms cubic-bezier(0.3, 0, 0.1, 1) 850ms forwards;
}
html.m-phone .land.is-in .land__morph-clean {
  opacity: 1;
  filter: none;
  animation: none;
}
@keyframes land-m-mark {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    filter: blur(16px);
    transform: scale(1.08);
  }
}
@keyframes land-m-word {
  0% {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(0.02em) scale(0.94);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0.02em) scale(1);
  }
}
html.m-phone .land .land__h {
  margin-top: 10px;
  font-size: 21px;
}
html.m-phone .land .land__cta {
  margin-top: auto;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding-top: 24px;
}
html.m-phone .land .land__cta .nods-btn--lg {
  height: 54px;
  font-size: 16px;
  border-radius: 999px;
}
html.m-phone .land .land__plot {
  top: 35%;
  bottom: auto;
  height: 45%;
}
html.m-phone .land .land__line {
  opacity: 0.6;
}
html.m-phone .land .land__pin {
  display: none;
}
html.m-phone .land .land__mpin {
  display: block;
}
html.m-phone .land .land__drift:not(.land__drift--m) {
  display: none;
}
html.m-phone .land .land__drift.land__drift--m {
  display: block;
}
html.m-phone .land .land__shade {
  background:
    radial-gradient(
      ellipse 78% 20% at 50% 22%,
      var(--bg-page) 0%,
      rgba(0, 0, 0, 0.78) 55%,
      transparent 100%
    ),
    linear-gradient(180deg, transparent 74%, var(--bg-page) 88%);
}
.land__mpin {
  position: absolute;
  width: 0;
  height: 0;
}
.land__mpin-card {
  position: absolute;
  left: 0;
  bottom: 12px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  padding: 6px 11px 6px 6px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--surface-card) 86%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    0 0 0 1px var(--line-soft),
    0 10px 28px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.land__mpin-card > .nods-avatar {
  grid-row: 1/3;
}
.land__mpin-card > b {
  font: 600 12px/15px var(--font-ui);
  color: var(--text-primary);
}
.land__mpin-f {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 11px/14px var(--font-ui);
}
.land__mpin.is-left .land__mpin-card {
  left: -10px;
  transform: none;
}
.land__mpin.is-right .land__mpin-card {
  left: auto;
  right: -10px;
  transform: none;
}
.land__mpin.is-below .land__mpin-card {
  bottom: auto;
  top: 12px;
}
@media (prefers-reduced-motion: reduce) {
  html.m-phone .land .land__morph-mark-clean {
    display: none;
  }
  html.m-phone .land .land__morph-clean {
    opacity: 1;
    animation: none;
  }
}
/* ===== signing in on the phone: one column, the name of the step big and left-aligned, X and Google first as full-width rows with their
   names, then the email; every control 54px and round, the fine print last ===== */
html.m-phone .auth .nods-dialog__header {
  padding: 22px 20px 0;
}
html.m-phone .auth .nods-dialog__body {
  padding: 26px 20px calc(env(safe-area-inset-bottom, 0px) + 22px);
}
html.m-phone .auth .auth__b {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
}
html.m-phone .auth .auth__h {
  margin: 0;
  font: 700 28px/32px var(--font-ui);
  letter-spacing: -0.025em;
  text-align: left;
  text-wrap: balance;
}
html.m-phone .auth .auth__p {
  margin: 8px 0 0;
  font: 400 15px/21px var(--font-ui);
  color: var(--text-secondary);
  text-align: left;
  text-wrap: pretty;
}
html.m-phone .auth .auth__social {
  order: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 24px 0 0;
}
html.m-phone .auth .auth__prov {
  width: 100%;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font: 600 16px/1 var(--font-ui);
  color: var(--text-primary);
}
html.m-phone .auth .auth__prov-l {
  display: inline;
}
html.m-phone .auth .auth__or {
  order: 2;
  margin: 18px 0;
}
html.m-phone .auth .auth__form {
  order: 3;
  display: grid;
  gap: 10px;
  margin: 0;
}
html.m-phone .auth .auth__form .nods-input {
  height: 54px;
  border-radius: 16px;
}
html.m-phone .auth .auth__form .nods-btn {
  height: 54px;
  border-radius: 999px;
  font-size: 16px;
}
html.m-phone .auth .auth__fine {
  order: 4;
  margin: 18px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 17px;
}
html.m-phone .auth .auth__back {
  align-self: flex-start;
  margin: 0 0 16px;
}
html.m-phone .auth .auth__code {
  margin-top: 24px;
}
html.m-phone .auth .auth__b {
  padding-top: 12px;
}
/* Sign out: the last group of the settings list, one row in the Short colour */
.mset__row--out,
.mset__row--out .mset__ic {
  color: var(--text-short);
}
.mset__row--out .mset__l {
  color: var(--text-short);
}
/* the connecting and confirmed steps (X, Google, a verified code) stay one centred composition on the phone: the ring and the check in the
   middle of the window, the words centred under them, the space around them even */
html.m-phone .auth .auth__b.auth__b--center {
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 300px;
  padding: 28px 0 20px;
}
html.m-phone .auth .auth__b--center .auth__stage {
  margin: 0 auto 18px;
}
html.m-phone .auth .auth__b--center :is(.auth__h, .auth__p) {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 300px;
}
html.m-phone .auth .auth__b--center .auth__h {
  font-size: 24px;
  line-height: 30px;
}
html.m-phone .auth .auth__b--center > :not(.auth__stage) {
  align-self: center;
}
/* the settings list always ends with air under its last row (Sign out), home indicator or not (framed, the inset reads 0) */
.mset.is-root {
  padding-bottom: calc(max(env(safe-area-inset-bottom, 0px), 20px) + 28px);
}
.mset__group--out {
  margin-top: 6px;
}
/* while the keys are up no scroller hands a drag on to the page when it reaches its end (the page would pan up over the keys): with the
   touch hold in MShell (mViewport), a drag moves only what can scroll */
:where(html.m-kb body *) {
  overscroll-behavior-y: contain;
}

/* a sheet holding the screen behind it still (window.nodsHold, counted) */
.m-app[data-held] {
  overflow-y: hidden;
}
/* the smallest trade shown: under Buys and sells in a position's chart settings, and in the market chart's Traders sheet */
.mcs__min {
  display: grid;
  gap: 12px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line-soft);
  transition: opacity 160ms var(--ease-out);
}
.mcs__min + .mcs__row {
  border-top: 1px solid var(--line-soft);
}
.mcs__min.is-off {
  opacity: 0.45;
}
.mcs__sizes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.mcs__sizes button {
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(243, 242, 238, 0.07);
  color: var(--text-secondary);
  font: 600 13px/1 var(--font-num);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mcs__sizes button.is-on {
  background: var(--bone);
  color: var(--ink);
}
.mcs__sizes button:disabled {
  cursor: default;
}
.mcs__sizes button:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.tvs .tv-trdp__min {
  gap: 6px;
  padding: 0;
}
.tvs .tv-trdp__min button {
  height: 44px;
  border-radius: 14px;
  font-size: 14px;
}

/* what lies behind the position's candles: a dot grid that fades out toward the chart's edges (lines and clean are the chart's own) */
.m-pos__chart .pmod__canvas.is-dots {
  isolation: isolate;
}
.m-pos__chart .pmod__canvas.is-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
      circle,
      rgba(243, 242, 238, 0.17) 0 1px,
      transparent 1.4px
    )
    center/14px 14px;
  -webkit-mask-image: radial-gradient(
    ellipse 72% 78% at 50% 50%,
    #000 25%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 72% 78% at 50% 50%,
    #000 25%,
    transparent 100%
  );
}
/* the chart settings: Background as three small previews of the chart (the chosen one ringed in Bone), then what is drawn on it */
.mcs__sec {
  padding: 6px 2px 10px;
  font: 600 12px/16px var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.mcs__sec ~ .mcs__sec {
  padding-top: 22px;
}
.mcs__layers {
  margin-top: 0;
}
.mcs__bgs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.mcs__bg {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mcs__pv {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.45;
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px rgba(243, 242, 238, 0.06);
  transition:
    box-shadow 200ms var(--ease-out),
    transform 160ms var(--ease-out);
}
.mcs__pv.is-lines {
  background:
    repeating-linear-gradient(
        180deg,
        transparent 0 13px,
        rgba(243, 242, 238, 0.09) 13px 14px
      )
      0 4px/100% 100%,
    var(--surface-raised);
}
.mcs__pv.is-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle,
      rgba(243, 242, 238, 0.22) 0 1px,
      transparent 1.4px
    )
    center/9px 9px;
  -webkit-mask-image: radial-gradient(
    ellipse 70% 75% at 50% 50%,
    #000 20%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 70% 75% at 50% 50%,
    #000 20%,
    transparent 100%
  );
}
.mcs__pv svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(243, 242, 238, 0.55);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mcs__bg.is-on .mcs__pv {
  box-shadow: inset 0 0 0 1.5px var(--bone);
}
.mcs__bg.is-on .mcs__pv svg {
  stroke: var(--bone);
}
.mcs__bg:active .mcs__pv {
  transform: scale(0.97);
}
.mcs__bg:focus-visible {
  outline: 0;
}
.mcs__bg:focus-visible .mcs__pv {
  box-shadow: var(--focus-ring);
}
.mcs__bgl {
  font: 500 14px/18px var(--font-ui);
  transition: color 200ms var(--ease-out);
}
.mcs__bg.is-on .mcs__bgl {
  color: var(--text-primary);
  font-weight: 600;
}

/* a sheet opened over a window rises above it (MSheet: over) */
.m-sheet-scrim--over {
  z-index: 101;
}
/* a field's own small buttons (Max, Paste, Mine): 2px more room each side for the pressed fill, the words where they were */
html.m-phone .nods-input__affix button {
  padding: 0 4px;
  margin: 0 -6px;
  border-radius: 8px;
}
/* ===== Funds on the phone, redrawn (MoneySheet, phone branch): each mode leads with its choice, the amount the one large figure, the facts
   as quiet rows straight on the sheet, the action pinned at the foot ===== */
.mf2__b {
  display: grid;
  gap: 18px;
  padding-top: 20px;
}
.mf2 .nods-field {
  margin-top: 0;
}
.mf2 .clos2__hero {
  padding: 6px 0 2px;
}
.mf2 .clos2__cap {
  align-items: center;
  font: 400 14px/20px var(--font-ui);
}
.mf2__max {
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 13px;
  background: rgba(243, 242, 238, 0.08);
  font: 600 12px/1 var(--font-ui);
  color: var(--text-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mf2__max:active {
  background: rgba(243, 242, 238, 0.14);
}
.mf2__max:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.mf2__sub {
  font: 400 13px/18px var(--font-ui);
  color: var(--text-tertiary);
  text-align: center;
}
.mf2__sub.is-over {
  color: var(--text-short);
}
.mf2 .clos2__card--flat {
  background: transparent;
  padding: 0 2px;
}
.mf2 .clos2__rows {
  gap: 12px;
  padding: 14px 0 2px;
  border-top: 1px solid var(--line-soft);
}
.mf2 .clos2__row {
  align-items: center;
  font: 400 14px/20px var(--font-ui);
  color: var(--text-tertiary);
}
.mf2__v,
.mf2__v .nods-num {
  font: 500 14px/20px var(--font-num);
  color: var(--text-primary);
}
.mf2__warn {
  margin: -4px 0 0;
  padding: 0 2px;
  font: 400 13px/18px var(--font-ui);
  color: var(--text-tertiary);
  text-wrap: pretty;
}
.mf2__qr {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 20px 16px 18px;
  border-radius: 22px;
  background: rgba(243, 242, 238, 0.04);
}
.mf2__qrb {
  display: block;
  padding: 10px;
  border: 0;
  border-radius: 18px;
  background: var(--bone);
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.mf2__qrb .sh__qr {
  display: block;
}
.mf2__qrb:active {
  transform: scale(0.98);
}
.mf2__qrb:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.mf2__qrl {
  margin-top: 4px;
  font: 400 13px/18px var(--font-ui);
  color: var(--text-tertiary);
}
.mf2__addr {
  max-width: 290px;
  font: 500 14px/20px var(--font-num);
  color: var(--text-primary);
  text-align: center;
  word-break: break-all;
}
.mf2__dir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 20px;
  background: rgba(243, 242, 238, 0.05);
}
.mf2__end {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.mf2__end.is-r {
  text-align: right;
}
.mf2__end small {
  font: 400 12px/16px var(--font-ui);
  color: var(--text-tertiary);
}
.mf2__end b {
  font: 600 17px/22px var(--font-ui);
  color: var(--text-primary);
}
.mf2__swap {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(243, 242, 238, 0.08);
  color: var(--text-primary);
  cursor: pointer;
  transition:
    transform 240ms var(--ease-out),
    background-color 160ms;
  -webkit-tap-highlight-color: transparent;
}
.mf2__swap:active {
  transform: rotate(180deg);
  background: rgba(243, 242, 238, 0.14);
}
.mf2__swap:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.mf2__to {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 14px;
  border: 0;
  border-radius: 20px;
  background: rgba(243, 242, 238, 0.05);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .mf2__to:hover {
    background: rgba(243, 242, 238, 0.07);
  }
}
.mf2__to:active {
  background: rgba(243, 242, 238, 0.09);
}
.mf2__to:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.mf2__to-ph {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(243, 242, 238, 0.08);
  color: var(--text-secondary);
}
.mf2__to-t {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
}
.mf2__to-t small {
  font: 400 12px/16px var(--font-ui);
  color: var(--text-tertiary);
}
.mf2__to-t b {
  overflow: hidden;
  font: 600 16px/20px var(--font-ui);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mf2__to.is-empty .mf2__to-t b {
  font-weight: 500;
  color: var(--text-secondary);
}
.mf2__to-go {
  flex: none;
  color: var(--text-tertiary);
}
/* Send to: a sheet of its own from the bottom, a little over half the screen; the field takes the whole screen once tapped */
.mf2__pick {
  padding-bottom: 24px;
}
.mf2__q {
  margin: 0 0 2px;
}
.mf2__sec {
  padding-top: 18px;
}
.mf2__hits {
  display: grid;
}
.mf2__hit {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 8px 2px;
  border: 0;
  background: none;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mf2__hit + .mf2__hit {
  border-top: 1px solid var(--line-soft);
}
.mf2__hit:active {
  background: rgba(243, 242, 238, 0.04);
}
.mf2__hit:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.mf2__hit-t {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
}
.mf2__hit-t b {
  overflow: hidden;
  font: 600 16px/20px var(--font-ui);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mf2__hit-t small {
  font: 400 13px/18px var(--font-ui);
  color: var(--text-tertiary);
}
.mf2__hit-on {
  flex: none;
  color: var(--text-primary);
}
.mf2__none {
  margin: 0;
  padding: 28px 2px;
  font: 400 14px/20px var(--font-ui);
  color: var(--text-tertiary);
  text-align: center;
}

/* Home's markets on the page's content line (30px from each side, where every other head and every card's content sits): the head and
   Filters, the categories, the rows. The head sits 8px over its categories, as every head sits over its card */
.m-home .m-home__sh {
  padding: 0 30px;
}
.m-home .m-home__fl {
  padding-top: 8px;
}
.m-home .m-home__cats.m-al__tabs {
  padding: 0 30px;
  scroll-padding-inline: 30px;
}
.m-home .m-list .m-mrow {
  padding-left: 30px;
  padding-right: 30px;
}
/* a market's figures under its chart sit in the middle of their thirds (m-stat) */
/* the size choices: each figure in the middle of its key (a button here starts its words at the left) */
.mcs__sizes button,
.tvs .tv-trdp__min button {
  display: grid;
  place-items: center;
  text-align: center;
}
/* the Lines preview draws its lines where they can be seen */
.mcs__pv.is-lines {
  background:
    repeating-linear-gradient(
        180deg,
        transparent 0 13px,
        rgba(243, 242, 238, 0.14) 13px 14px
      )
      0 4px/100% 100%,
    var(--surface-raised);
}
/* the dots behind the candles: fine and faint, gathered in the middle and gone before the sides; they stop where the prices begin */
.m-pos__chart .pmod__canvas.is-dots::before {
  right: var(--pm-axis, 0px);
  background: radial-gradient(
      circle,
      rgba(243, 242, 238, 0.12) 0 0.6px,
      transparent 1px
    )
    center/12px 12px;
  -webkit-mask-image: radial-gradient(
    ellipse 54% 60% at 50% 50%,
    #000 0,
    rgba(0, 0, 0, 0.5) 50%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 54% 60% at 50% 50%,
    #000 0,
    rgba(0, 0, 0, 0.5) 50%,
    transparent 100%
  );
}
.mcs__pv.is-dots::before {
  background: radial-gradient(
      circle,
      rgba(243, 242, 238, 0.22) 0 0.7px,
      transparent 1.1px
    )
    center/8px 8px;
  -webkit-mask-image: radial-gradient(
    ellipse 56% 62% at 50% 50%,
    #000 0,
    rgba(0, 0, 0, 0.5) 50%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 56% 62% at 50% 50%,
    #000 0,
    rgba(0, 0, 0, 0.5) 50%,
    transparent 100%
  );
}

/* the chart's bubbles on the phone: a touch never opens a card by itself (a touch leaves hover behind); a tap does (is-peek), and the card
   ends on the way into it */
html.m-phone .tvpin:not(.is-peek):hover .tvcard,
html.m-phone .pmpin:not(.is-peek):hover .tvcard {
  display: none;
}
html.m-phone .tvpin:not(.is-peek):hover .tvpin__more,
html.m-phone .pmpin:not(.is-peek):hover .pmpin__more {
  display: none;
}
/* the card a tap opens, scaled down whole so it covers less of the chart; it needs no footer, a tap on it opens the trade */
html.m-phone .tvpin .tvcard,
html.m-phone .pmpin .tvcard {
  zoom: 0.8;
}
html.m-phone .tvpin.is-peek .tvcard,
html.m-phone .pmpin.is-peek .tvcard {
  cursor: pointer;
}
/* Transfer: From and To as two tiles cut apart in the middle, the swap in the gap with the sheet's own colour around it, touching neither */
.mf2__dir {
  position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  padding: 0;
  border-radius: 0;
  background: none;
}
.mf2__end {
  padding: 14px 16px 15px;
  border-radius: 18px;
  background: rgba(243, 242, 238, 0.05);
}
.mf2__end.is-r {
  justify-items: end;
}
.mf2__end .nods-num {
  margin-top: 2px;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-tertiary);
}
.mf2__swap {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  background: var(--surface-raised);
  box-shadow: 0 0 0 6px var(--surface-card);
}
.mf2__swap:active {
  transform: translate(-50%, -50%) rotate(180deg);
  background: rgba(243, 242, 238, 0.14);
}
/* a Select on the phone: a sheet of its own (Shell.jsx), options a thumb tall, the chosen one marked */
.mpick {
  padding: 0 12px 18px;
}
.mpick__h {
  padding: 2px 4px 12px;
}
.mpick__list {
  display: grid;
  gap: 2px;
}
.mpick__o {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--text-primary);
  font: 500 16px/20px var(--font-ui);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mpick__o.is-on {
  background: rgba(243, 242, 238, 0.07);
  font-weight: 600;
}
.mpick__o:active {
  background: rgba(243, 242, 238, 0.1);
}
.mpick__o:disabled {
  opacity: 0.4;
  cursor: default;
}
.mpick__o:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.mpick__l {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mpick__chk {
  flex: none;
  color: var(--text-primary);
}

/* ===== the market chart on the phone, as the position's: the candles alone (no toolbar, no ranges or scale modes), the prices only
   under a finger, one row of controls under it (candles or a line, the interval, settings), everything else in its settings sheet ===== */
.m-chart {
  border-top: 0;
  border-bottom: 0;
}
.m-chart .tv-top,
.m-chart .tv-bottom {
  display: none !important;
}
.m-chart .tv-mrow {
  flex: none;
  padding: 10px 12px 4px;
}
.m-chart .tv-canvas.is-dots {
  isolation: isolate;
}
.m-chart .tv-canvas.is-dots::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: var(--pm-axis, 0px);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
      circle,
      rgba(243, 242, 238, 0.12) 0 0.6px,
      transparent 1px
    )
    center/12px 12px;
  -webkit-mask-image: radial-gradient(
    ellipse 54% 60% at 50% 50%,
    #000 0,
    rgba(0, 0, 0, 0.5) 50%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 54% 60% at 50% 50%,
    #000 0,
    rgba(0, 0, 0, 0.5) 50%,
    transparent 100%
  );
}
/* its settings: the position chart's sheet, with the market's own sections */
/* the dots on the market chart sit on the page's black, darker than the dossier's sheet: a step brighter and a touch larger, so they read the same */
.m-chart .tv-canvas.is-dots::before {
  background: radial-gradient(
      circle,
      rgba(243, 242, 238, 0.2) 0 0.7px,
      transparent 1.15px
    )
    center/12px 12px;
  -webkit-mask-image: radial-gradient(
    ellipse 60% 64% at 50% 50%,
    #000 0,
    rgba(0, 0, 0, 0.55) 50%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 60% 64% at 50% 50%,
    #000 0,
    rgba(0, 0, 0, 0.55) 50%,
    transparent 100%
  );
}
.tvs.tv-mset {
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}
.tv-mcs .mcs__layers.is-off {
  opacity: 0.45;
}
.tv-mcs .mcs__layers.is-off .mcs__row {
  cursor: default;
}
.tv-mrow--s {
  min-height: 54px;
}
.tv-mnote {
  margin: 8px 2px 0;
  font: 400 13px/18px var(--font-ui);
  color: var(--text-tertiary);
}
.tv-mtypes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.tv-mtype {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  min-height: 80px;
  padding: 10px 4px;
  border: 0;
  border-radius: 16px;
  background: var(--surface-raised);
  color: var(--text-secondary);
  font: 500 12px/15px var(--font-ui);
  text-align: center;
  cursor: pointer;
  transition:
    box-shadow 200ms var(--ease-out),
    transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.tv-mtype span {
  text-wrap: balance;
}
.tv-mtype svg {
  width: 22px;
  height: 22px;
}
.tv-mtype.is-on {
  box-shadow: inset 0 0 0 1.5px var(--bone);
  color: var(--text-primary);
}
.tv-mtype:active {
  transform: scale(0.97);
}
.tv-mtype:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.tv-mtfs {
  display: grid;
  gap: 6px;
}
.tv-mtfs__r {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.tv-mtf {
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--surface-raised);
  color: var(--text-secondary);
  font: 600 14px/1 var(--font-num);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tv-mtf.is-on {
  background: var(--bone);
  color: var(--ink);
}
.tv-mtf:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.tv-mwho {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}
.tv-mwho__b {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 2px 11px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-raised);
  color: var(--text-secondary);
  font: 500 12px/15px var(--font-ui);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tv-mwho__b.is-on {
  background: var(--bone);
  color: var(--ink);
  font-weight: 600;
}
.tv-mwho__b:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.tv-mseg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin-bottom: 10px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-raised);
}
.tv-mseg__b {
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-secondary);
  font: 500 15px/1 var(--font-ui);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tv-mseg__b.is-on {
  background: rgba(243, 242, 238, 0.12);
  color: var(--text-primary);
  font-weight: 600;
}
.tv-mseg__b:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.tv-mlink {
  width: 100%;
  border: 0;
  background: none;
  color: var(--text-primary);
  text-align: left;
}
.tv-mlink > svg {
  color: var(--text-tertiary);
}

/* the market chart on the phone, second pass: what is drawn on the chart (the traders, the indicators) as two pills over it, how it is drawn
   (candles or a line, the interval, settings) in the row under it; each pill opens its own sheet */
.m-chart .tv-mtop {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 12px 8px;
}
.tv-mpill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 10px 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font: 600 13px/1 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms var(--ease-out);
}
.tv-mpill > svg:first-child {
  color: var(--text-secondary);
}
.tv-mpill__chev {
  color: var(--text-tertiary);
  margin-left: -1px;
}
.tv-mpill.is-off {
  color: var(--text-secondary);
}
.tv-mpill:active {
  background: rgba(243, 242, 238, 0.12);
}
.tv-mpill:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.tv-mpill__n {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--bone);
  color: var(--ink);
  font: 700 11px/1 var(--font-num);
}
/* the sheets' keys: every word in the middle of its key (a button here starts its words at the left) */
.tv-mtfs {
  display: grid;
  gap: 8px;
}
.tv-mtfs__r {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-raised);
}
.tv-mtf {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  min-width: 0;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-secondary);
  font: 600 14px/1 var(--font-num);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tv-mtf.is-on {
  background: var(--bone);
  color: var(--ink);
}
.tv-mseg__b {
  display: grid;
  place-items: center;
}
.tv-mseg__b.is-on {
  background: var(--bone);
  color: var(--ink);
}
.tv-mgap {
  margin-top: 22px;
}
.tv-mlead {
  margin: -4px 2px 14px;
  font: 400 14px/20px var(--font-ui);
  color: var(--text-tertiary);
  text-wrap: pretty;
}
.tv-mcs .mset__group {
  margin-top: 0;
}
.tv-mcs .tv-mgap {
  margin-top: 12px;
}
.mcs__pv.is-lines {
  background:
    linear-gradient(rgba(243, 242, 238, 0.13) 1px, transparent 1px) 0 6px/100%
      14px repeat-y,
    var(--surface-raised);
}

/* the position card's TP / SL disc lit while a take profit or a stop is set */
.m-pos__c3x.is-on {
  background: rgba(243, 242, 238, 0.14);
  color: var(--text-primary);
}

/* a screen pulled down to go back: its top corners round off as it lifts, the header and a profile's banner with them */
.m-scr--stack,
.m-scr--stack > :is(.m-hd, .m-ban) {
  transition: border-radius 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.m-app.is-pulling .m-scr--stack,
.m-app.is-pulling .m-scr--stack > :is(.m-hd, .m-ban) {
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
}
.m-app.is-pulling .m-scr--stack > .m-ban {
  overflow: hidden;
}
/* the screen a pull goes back to is simply there under it: no entrance of its own */
.m-app.no-enter > :is(.m-scr, .m-feed) {
  animation: none !important;
}

/* the market chart on the phone, third pass: its tools across the top as the toolbar had them (the interval, the chart type, Draw; the
   traders and the indicators on the right), the ranges under it with settings, as the position's row. Draw is the one way into the tools */
.m-chart .tv-mtop {
  justify-content: flex-start;
  gap: 6px;
  padding: 2px 12px 8px;
}
.tv-mtop__grow {
  flex: 1 1 auto;
}
.tv-mpill {
  gap: 6px;
  padding: 0 10px 0 12px;
}
.tv-mpill .num {
  font: 600 14px/1 var(--font-num);
}
.tv-mpill--ic {
  padding: 0 8px 0 10px;
}
.tv-mpill--ic > svg:first-child {
  color: var(--text-primary);
}
.tv-mpill.is-on {
  background: var(--bone);
  color: var(--ink);
}
.tv-mpill.is-on > svg:first-child {
  color: var(--ink);
}
.tv-mic {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tv-mic:active {
  background: rgba(243, 242, 238, 0.12);
}
.tv-mic.is-off {
  color: var(--text-tertiary);
}
.tv-mic:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.tv-mic__n {
  position: absolute;
  top: -3px;
  right: -3px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--bone);
  color: var(--ink);
  font: 700 10px/1 var(--font-num);
  box-shadow: 0 0 0 2px var(--bg-page);
}
.m-chart .tv-mbot {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  justify-items: center;
}
.m-chart .m-draw {
  display: none;
}
.tv-mset .tv-mtypes {
  margin-top: 2px;
}

/* Traders on the chart: one switch for the bubbles, whose trades as a capsule, what they show as rows, the smallest size as keys */
.tv-mwrap {
  transition: opacity 200ms var(--ease-out);
}
.tv-mwrap.is-off {
  opacity: 0.42;
  pointer-events: none;
}
/* the smallest trade shown: one capsule, the sizes and Custom at its end, a Bone mark sliding to the chosen one; Custom opens leftward over the sizes into one field */
.tv-min__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 84px;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-raised);
}
.tv-min__th {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: calc(3px + var(--i, 0) * ((100% - 98px) / 4 + 2px));
  width: calc((100% - 98px) / 4);
  border-radius: 999px;
  background: var(--bone);
  pointer-events: none;
  transition:
    left 380ms cubic-bezier(0.32, 0.72, 0, 1),
    width 380ms cubic-bezier(0.32, 0.72, 0, 1);
}
.tv-min__th.is-c {
  width: 84px;
}
.tv-min__o {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-secondary);
  font: 600 14px/1 var(--font-num);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 240ms var(--ease-out);
}
.tv-min__o.is-on {
  color: var(--ink);
}
.tv-min__o:active:not(.is-on) {
  color: var(--text-primary);
}
.tv-min__o:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.tv-min__c {
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: 3px;
  width: 84px;
  border-radius: 999px;
  cursor: text;
  -webkit-tap-highlight-color: transparent;
  transition:
    width 400ms cubic-bezier(0.32, 0.72, 0, 1),
    top 400ms cubic-bezier(0.32, 0.72, 0, 1),
    right 400ms cubic-bezier(0.32, 0.72, 0, 1),
    bottom 400ms cubic-bezier(0.32, 0.72, 0, 1),
    background-color 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out);
}
.tv-min__cl {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  font: 600 14px/1 var(--font-ui);
  color: var(--text-secondary);
  white-space: nowrap;
  transition:
    color 240ms var(--ease-out),
    opacity 160ms var(--ease-out);
}
.tv-min__cl.num {
  font-family: var(--font-num);
}
.tv-min__c.is-on .tv-min__cl {
  color: var(--ink);
}
.tv-min__cd {
  position: absolute;
  left: 18px;
  top: 50%;
  margin-top: -8px;
  font: 600 16px/16px var(--font-num);
  color: var(--text-tertiary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms var(--ease-out);
}
.tv-min__c input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0 52px 0 32px;
  border: 0;
  outline: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--text-primary);
  font: 600 16px/1 var(--font-num);
  caret-color: var(--bone);
  opacity: 0;
  transition: opacity 140ms var(--ease-out);
}
.tv-min__c input::placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}
.tv-min__ok {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bone);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 160ms var(--ease-out),
    transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}
.tv-min__ok::before {
  content: "";
  position: absolute;
  inset: -6px;
}
.tv-min__ok:active {
  transform: scale(0.92);
}
.tv-min__ok:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.tv-min.is-ed .tv-min__c {
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 1.5px var(--bone);
}
.tv-min.is-ed .tv-min__cl {
  opacity: 0;
  transition-duration: 240ms, 80ms;
}
.tv-min.is-ed :is(.tv-min__cd, .tv-min__c input) {
  opacity: 1;
  transition-delay: 160ms;
}
.tv-min.is-ed .tv-min__ok {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 140ms;
}
.tv-min.is-off {
  opacity: 0.42;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .tv-min__th,
  .tv-min__c,
  .tv-min__cl,
  .tv-min__cd,
  .tv-min__c input,
  .tv-min__ok {
    transition: none !important;
  }
}
.tv-mcs .tv-mnote {
  margin-top: 10px;
}

/* a row's description in these sheets stays on one line */
.mcs__t small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* the chart's controls, settled: the interval over the chart (the traders and indicators on the right), candles or a line bottom left with
   the ranges and settings, the drawing tools on the chart's left edge as before; no arrows on any of them */
.m-chart .tv-mbot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.m-chart .m-draw {
  display: grid;
}

/* the traders in settings: whose trades under the switch, then what they show */
.tv-mseg--sp {
  margin: 10px 0;
}

/* the row under the market chart: the chart type as one key (its sheet holds every type), the intervals, the traders and the settings */
.tv-mkeys {
  display: flex;
  gap: 6px;
}
.tv-mkey > svg {
  color: var(--text-primary);
}
.tv-mkey.is-off > svg {
  color: var(--text-tertiary);
}
.tv-mkey:active {
  background: rgba(243, 242, 238, 0.12);
}
.tv-mkey:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

/* four keys and the intervals on one row: the keys a step narrower */
.tv-mrow .tv-mkeys {
  gap: 4px;
}
.tv-mrow .tv-mkey {
  width: 34px;
}

/* Drawing tools on the phone: the chosen tool as one tile (its icon, its name, whose style, Change); every tool in a sheet of its own */
html.m-phone .tvd-defs__pick {
  min-height: 64px;
  padding: 0 16px;
  border-radius: 18px;
  background: rgba(243, 242, 238, 0.06);
}
html.m-phone .tvd-defs__pick > svg:first-child {
  color: var(--text-primary);
}
.tvd-defs__chg {
  flex: none;
  height: 30px;
  padding: 0 12px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(243, 242, 238, 0.1);
  font: 600 13px/1 var(--font-ui);
  color: var(--text-primary);
}
html.m-phone .tvd-defs .nods-dialog__description {
  margin-top: 2px;
  font-size: 14px;
  line-height: 20px;
}
.tvd-tools {
  padding: 0 16px 24px;
}
.tvd-tools .mcs__sec:first-of-type {
  padding-top: 0;
}
.tvd-tools__g {
  display: grid;
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface-raised);
}
.tvd-tools__it {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--text-primary);
  text-align: left;
  font: 500 15px/20px var(--font-ui);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tvd-tools__it + .tvd-tools__it {
  border-top: 1px solid var(--line-soft);
}
.tvd-tools__it > svg:first-child {
  flex: none;
  color: #cfcec9;
}
.tvd-tools__l {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tvd-tools__it.is-on {
  font-weight: 600;
}
.tvd-tools__it:active {
  background: rgba(243, 242, 238, 0.06);
}
.tvd-tools__it:focus-visible {
  outline: 0;
  box-shadow: inset var(--focus-ring);
}
.tvd-tools__tag {
  flex: none;
  height: 22px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(243, 242, 238, 0.08);
  font: 600 11px/1 var(--font-ui);
  color: var(--text-secondary);
}
.tvd-tools__chk {
  flex: none;
  color: var(--text-primary);
}

/* the Drawing tools window on the phone, fitted: as tall as what it holds (never an empty foot), each setting a thumb-tall row between
   hairlines, its label on the left, and every on / off choice a key that fills in Bone when on (a checkbox is too small for a thumb) */
html.m-phone .nods-dialog.tvd-dlg.tvd-defs {
  height: auto;
}
html.m-phone .tvd-defs .tvd-set {
  min-height: 0;
  gap: 0;
  padding-top: 6px;
}
html.m-phone .tvd-defs .tvd-row {
  min-height: 54px;
  padding: 6px 2px;
  font: 500 15px/20px var(--font-ui);
  color: var(--text-secondary);
}
html.m-phone .tvd-defs .tvd-row + .tvd-row {
  border-top: 1px solid var(--line-soft);
}
html.m-phone .tvd-defs .tvd-row .nods-check {
  align-items: center;
  gap: 0;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--surface-raised);
  font: 600 13px/1 var(--font-ui);
  color: var(--text-secondary);
  transition:
    background-color 160ms var(--ease-out),
    color 160ms;
}
html.m-phone .tvd-defs .tvd-row .nods-check .nods-check__box {
  display: none;
}
html.m-phone .tvd-defs .tvd-row .nods-check:has(input:checked) {
  background: var(--bone);
  color: var(--ink);
}
html.m-phone .tvd-defs .tvd-row .nods-check:has(input:focus-visible) {
  box-shadow: var(--focus-ring);
}
html.m-phone .tvd-defs .nods-tabs {
  margin-top: 4px;
}

/* the interval as one key in the middle of the row; every interval, seconds to weeks, in its own sheet */
.tv-mtf-key {
  display: grid;
  place-items: center;
  min-width: 64px;
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font: 600 14px/1 var(--font-num);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tv-mtf-key:active {
  background: rgba(243, 242, 238, 0.12);
}
.tv-mtf-key:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.tv-mrow .tv-mkey {
  width: 36px;
}
.tv-mrow .tv-mkeys {
  gap: 6px;
}
/* the drawing tools on the phone: a floating column over the chart's left edge (the chart never narrows under it), its free corners
   rounded, glass over the candles, a hairline on its edge; the keys a thumb wide; the tab rides its edge */
.m-chart .tv-body {
  position: relative;
}
.m-chart.is-draw .tv-left {
  position: absolute;
  z-index: 7;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 48px;
  padding: 6px 0;
  gap: 4px;
  border: 0;
  border-radius: 0 18px 18px 0;
  background: rgba(22, 22, 25, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset -1px 0 0 rgba(243, 242, 238, 0.08),
    inset 0 1px 0 rgba(243, 242, 238, 0.06),
    inset 0 -1px 0 rgba(243, 242, 238, 0.04),
    12px 0 30px rgba(0, 0, 0, 0.45);
}
.m-chart.is-draw .tv-left .tv-tool {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}
.m-chart.is-draw .m-draw {
  left: 48px;
}
/* the tab centres on the chart body (where the tool column lives), not on the whole chart: the 46px row of controls under it is left out */
.m-chart .m-draw {
  top: calc(50% - 23px);
}
/* the tool column and its tab stay in front of the traders' bubbles, even while one is open (its layer rises to 12); the floating bars (19) still pass over */
.m-chart.is-draw .tv-left,
.m-chart.is-draw .m-draw {
  z-index: 14;
}

/* the tool tile on the phone: the live preview across the top, the name, whose style and Change under it */
html.m-phone .tvd-defs__pick {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-height: 0;
  padding: 8px 8px 10px;
}
html.m-phone .tvd-defs__pick .tvd-pv {
  height: 112px;
}
.tvd-defs__pr {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0 6px;
}
html.m-phone .tvd-defs__pvw {
  display: none;
}

/* every interval, each row named by its unit */
.tv-mtfs {
  gap: 14px;
}
.tv-mtfs__g {
  display: grid;
  gap: 8px;
}
.tv-mtfs__h {
  padding: 0 4px;
  font: 600 12px/16px var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
/* the interval key: a tap opens every interval; held and pulled up or down, a wheel of them rises over it, the chosen one on the Bone band
   in its middle, each step a tick; the chart follows when the finger rests, and takes the last one on release */
.tv-mtf-wrap {
  position: relative;
  display: inline-flex;
}
.tv-mtf-key {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background-color 160ms var(--ease-out),
    transform 160ms var(--ease-out);
}
.tv-mtf-key.is-scrub {
  background: var(--bone);
  color: var(--ink);
  transform: scale(1.04);
}
.tv-wheel {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 30;
  width: 92px;
  height: 180px;
  margin-left: -46px;
  overflow: hidden;
  border-radius: 24px;
  background: rgba(22, 22, 25, 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    inset 0 0 0 1px rgba(243, 242, 238, 0.08),
    0 24px 50px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  animation: tv-wheel-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tv-wheel::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 72px;
  height: 36px;
  border-radius: 12px;
  background: rgba(243, 242, 238, 0.1);
}
.tv-wheel {
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 34%,
    #000 66%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 34%,
    #000 66%,
    transparent 100%
  );
}
.tv-wheel__col {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: grid;
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tv-wheel__i {
  display: grid;
  place-items: center;
  height: 36px;
  font: 600 15px/1 var(--font-num);
  color: var(--text-tertiary);
  transition:
    color 140ms,
    transform 140ms;
}
.tv-wheel__i.is-on {
  color: var(--text-primary);
  transform: scale(1.12);
}
.tv-wheel__i.is-far {
  opacity: 0.4;
}
@keyframes tv-wheel-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tv-wheel {
    animation: none;
  }
  .tv-wheel__col,
  .tv-wheel__i {
    transition: none;
  }
}

/* the "drawings are hidden" notice on the phone: at the top of the chart, over everything drawn on it, its Show a thumb tall */
html.m-phone .tvd-chip {
  z-index: 40;
  height: 40px;
  padding: 0 5px 0 14px;
  border-radius: 20px;
  font: 500 13px/1 var(--font-ui);
}
/* a phone never hovers: a tapped key keeps no hover light (the last tap leaves it lit, so a new drawing's bar looked as if Hide were
   chosen); a key shows only while it is pressed, and when it is really on */
@media (hover: hover) {
  html.m-phone .tvd-bb:hover:not(.is-on),
  html.m-phone .tvd-fb:hover:not(.is-on) {
    background: transparent;
    color: var(--text-secondary);
  }
}
@media (hover: hover) {
  html.m-phone .tvd-bb--del:hover {
    color: var(--text-secondary);
  }
}
html.m-phone .tvd-bb:active,
html.m-phone .tvd-fb:active {
  background: var(--fill-ghost-hover);
  color: var(--text-primary);
}
@media (hover: hover) {
  html.m-phone .tv-tool:hover:not(.is-on) {
    background: transparent;
  }
}
@media (hover: hover) {
  html.m-phone .tv-left .tv-tool:hover:not(.is-on) {
    color: #cfcec9;
  }
}
html.m-phone .tv-tool:active {
  background: var(--fill-ghost-hover);
}
html.m-phone .tvd-chip button {
  height: 30px;
  padding: 0 14px;
  border-radius: 15px;
  font: 600 13px/1 var(--font-ui);
  touch-action: manipulation;
}

/* the interval key says it can be pulled: two short strokes before its figure, one over the other */
.tv-mtf-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 12px;
}
.tv-mtf-grip {
  display: grid;
  gap: 3px;
  flex: none;
}
.tv-mtf-grip i {
  display: block;
  width: 9px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.5;
}
/* the wheel: a darker pane of the ground under it (never a grey card), the chosen row a faint lift; the chart changes only on release */
.tv-wheel {
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(22px) brightness(0.6) saturate(120%);
  backdrop-filter: blur(22px) brightness(0.6) saturate(120%);
  box-shadow:
    inset 0 0 0 1px rgba(243, 242, 238, 0.07),
    0 24px 50px rgba(0, 0, 0, 0.55);
}
.tv-wheel::before {
  background: rgba(243, 242, 238, 0.07);
}
.tv-mtf-key.is-scrub {
  background: rgba(0, 0, 0, 0.45);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px rgba(243, 242, 238, 0.14);
  transform: none;
}

/* the interval key, narrow: its figure, then two small arrows, one up, one down (it can be pulled either way) */
.tv-mtf-key {
  min-width: 0;
  gap: 5px;
  padding: 0 10px 0 13px;
}
.tv-mtf-arr {
  flex: none;
  width: 8px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}
.tv-wheel {
  width: 76px;
  margin-left: -38px;
}

/* the chart keeps its layers to itself: its notes, bars and tools stack over the candles but always pass under the page's header */
html.m-phone .m-chart {
  isolation: isolate;
}

/* the tool column scrolls under the thumb, and only itself: a scroll that reaches its end never carries on into the page */
.m-chart.is-draw .tv-left {
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.m-chart.is-draw .tv-left :is(.tv-tool, .tvd-more) {
  touch-action: pan-y;
}
/* the hidden drawings' pill on the phone: the same small glass at the chart's foot on the left, beside the tool column while it is out; each key's touch area reaches past the pill */
html.m-phone .tvd-peek {
  left: 10px;
  bottom: 10px;
}
html.m-phone .tvd-peek .tvd-fb::before {
  content: "";
  position: absolute;
  inset: -10px -3px;
}
html.m-phone .tvd-peek.is-up {
  bottom: 86px;
}
html.m-phone .m-chart:not(.is-draw) .tvd-peek.is-up {
  bottom: 10px;
}
html.m-phone .m-chart.is-draw .tvd-peek {
  left: 58px;
}

/* the dates along the foot of the market chart: a few small quiet figures, a new day a step brighter; under the bubbles, and they fade in and out with the setting */
.tv-dates {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  z-index: 3;
  height: 14px;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}
.tv-dates.is-on {
  opacity: 1;
}
.tv-date {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font: 500 10px/14px var(--font-num);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: rgba(243, 242, 238, 0.34);
}
.tv-date.is-day {
  color: rgba(243, 242, 238, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  .tv-dates {
    transition: none;
  }
}
/* the dates take a finger: a strip along the foot of the plot that scales time when dragged; held, its figures brighten */
.tv-dates {
  bottom: 0;
  height: 28px;
}
.tv-dates.is-on {
  pointer-events: auto;
  touch-action: none;
  cursor: ew-resize;
}
.tv-date {
  top: auto;
  bottom: 6px;
  transition: color 160ms var(--ease-out);
}
.tv-dates.is-drag .tv-date {
  color: rgba(243, 242, 238, 0.62);
}

/* the chart settings in three tabs: one pill track, a faint thumb gliding under the chosen tab; the pane below changes with a soft rise */
.tv-mtabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 24px 0 16px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-raised);
}
.tv-mtabs__thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 3);
  border-radius: 999px;
  background: rgba(243, 242, 238, 0.12);
  transition: transform 280ms var(--ease-panel);
}
.tv-mtabs__b {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  min-width: 0;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-tertiary);
  font: 500 14px/1 var(--font-ui);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms var(--ease-out);
}
.tv-mtabs__b.is-on {
  color: var(--text-primary);
  font-weight: 600;
}
.tv-mtabs__b:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}
.tv-mpane {
  animation: tv-mpane-in 240ms var(--ease-out) both;
}
.tv-mpane > .mcs__sec:first-child {
  padding-top: 0;
}
@keyframes tv-mpane-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tv-mtabs__thumb {
    transition: none;
  }
  .tv-mpane {
    animation: none;
  }
}
/* the interval wheel and its key while pulled: the same dark glass, no hairline edge */
.tv-wheel {
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
}
.tv-mtf-key.is-scrub {
  box-shadow: none;
}

/* a finger held on the market chart: the moment under it in a Bone tag at the foot of the plot, over the dates, which step back while it shows */
.tv-xdate {
  position: absolute;
  left: 0;
  bottom: 4px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 22px;
  padding: 0 9px;
  border-radius: 6px;
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-primary);
  font: 400 11px/1 var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms var(--ease-out);
}
.tv-xdate.is-on {
  opacity: 1;
}
.tv-xdate b {
  font-weight: 500;
}
.tv-xdate span {
  font-weight: 400;
  color: var(--text-secondary);
}
.tv-date {
  transition:
    color 160ms var(--ease-out),
    opacity 160ms var(--ease-out);
}
.tv-dates.is-x .tv-date {
  opacity: 0.22;
}
/* an oscillator's options in the chart settings: a small heading, then steppers (− value +) and switches, the rows of the same list */
.mcs__cfgh {
  padding: 20px 2px 8px;
  font: 600 12px/16px var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.mcs__row--step {
  cursor: default;
}
.mcs__step {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-raised);
}
.mcs__step button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mcs__step button:active {
  background: rgba(243, 242, 238, 0.1);
  color: var(--text-primary);
}
.mcs__step button:disabled {
  opacity: 0.3;
  cursor: default;
}
.mcs__step b {
  min-width: 34px;
  text-align: center;
  font: 600 15px/1 var(--font-num);
  color: var(--text-primary);
}
.mcs__cfgh {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mcs__reset {
  padding: 4px 2px;
  border: 0;
  background: none;
  font: 500 13px/16px var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
  cursor: pointer;
}
.mcs__reset:active {
  color: var(--text-primary);
}
.mcs__step button {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* ===== the phone's live order book and trades tape (Market › Book) ===== */
.mob {
  display: grid;
  padding: 4px 8px 16px;
}
.mob__tabs {
  display: flex;
  justify-content: center;
  padding: 6px 2px 2px;
}
.mob__seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 232px;
  max-width: 100%;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-card);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.mob__seg > i {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: transform 320ms var(--ease-out);
}
.mob__seg.is-trades > i {
  transform: translateX(100%);
}
.mob__seg > button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 1px 12px 0;
  border: 0;
  background: none;
  font: 500 13px/1 var(--font-ui);
  letter-spacing: -0.005em;
  text-align: center;
  white-space: nowrap;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color 200ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.mob__seg > button::before {
  content: "";
  position: absolute;
  inset: -6px 0;
}
.mob__seg > button[aria-selected="true"] {
  font-weight: 600;
  color: var(--text-primary);
}
.mob__seg > button:focus-visible {
  outline: 0;
  border-radius: 999px;
  box-shadow: var(--focus-ring);
}
.mob__h {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 10px 6px;
  font: 400 12px/16px var(--font-ui);
  color: var(--text-tertiary);
}
.mob__h span:not(:first-child) {
  text-align: right;
}
.mob__rows {
  display: grid;
}
.mob__r {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  font: 500 12.5px/1 var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.mob__r > span {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
.mob__r > span:not(:first-of-type) {
  text-align: right;
}
.mob__r > i {
  position: absolute;
  top: 1px;
  bottom: 1px;
  right: 0;
  width: 100%;
  border-radius: 3px;
  transform-origin: right center;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mob__r.is-ask > i {
  background: var(--short-tint);
}
.mob__r.is-bid > i {
  background: var(--long-tint);
}
.mob__r.is-ask > span:first-of-type {
  color: var(--text-short);
}
.mob__r.is-bid > span:first-of-type {
  color: var(--text-long);
}
.mob__dim {
  color: var(--text-secondary);
}
.mob__r.is-ask .is-chg {
  animation: mob-flash-a 560ms var(--ease-out);
}
.mob__r.is-bid .is-chg {
  animation: mob-flash-b 560ms var(--ease-out);
}
@keyframes mob-flash-a {
  from {
    color: var(--text-short);
  }
}
@keyframes mob-flash-b {
  from {
    color: var(--text-long);
  }
}
.mob__mid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  margin: 2px 0;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}
.mob__mid > :not(:first-child) {
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}
.mob__pr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 10px 4px;
  font: 600 12px/1 var(--font-num);
}
.mob__pr .is-b {
  color: var(--text-long);
}
.mob__pr .is-s {
  color: var(--text-short);
}
.mob__prbar {
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--short);
}
.mob__prbar > i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--long);
  box-shadow: 2px 0 0 var(--bg-page);
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mob__t.is-new {
  animation: mob-in 260ms var(--ease-out);
}
@keyframes mob-in {
  from {
    opacity: 0;
  }
}
.mob__views {
  display: grid;
}
.mob__v {
  grid-area: 1/1;
  display: grid;
  align-content: start;
  min-width: 0;
  transition: opacity 180ms var(--ease-out);
}
.mob__v.is-off {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.mob__t.is-big {
  font-weight: 700;
}
.mob__t.is-big.is-bid {
  background: rgba(140, 240, 25, 0.06);
}
.mob__t.is-big.is-ask {
  background: rgba(242, 90, 90, 0.07);
}
.mob__t.is-big {
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .mob__r > i,
  .mob__prbar > i,
  .mob__seg > i,
  .mob__v {
    transition: none;
  }
  .mob__t.is-new,
  .mob__r .is-chg {
    animation: none;
  }
}

/* a running TWAP on the phone: its type, parts done and time left under the market, a thin progress line under that */
.m-app .m-algo__s {
  display: flex;
  gap: 8px;
}
.m-app .m-algo__bar {
  display: block;
  position: relative;
  height: 3px;
  margin-top: 8px;
  border-radius: 2px;
  background: rgba(243, 242, 238, 0.1);
  overflow: hidden;
}
.m-app .m-algo__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--bone);
  transition: width 600ms cubic-bezier(0.2, 0, 0, 1);
}

/* the guide on the phone: the screen dims with one part lit in a soft ring; a glass card rests over the bottom edge (or the top, when the lit part
   is low), the chapter and count over a thin progress line, a title, one line, and the actions in reach of a thumb */
.m-app .mtour {
  position: fixed;
  inset: 0;
  z-index: 150;
  touch-action: none;
  overscroll-behavior: contain;
}
.m-app .mtour__hole {
  position: absolute;
  border-radius: 20px;
  transition-property: top, left, width, height, border-radius, box-shadow;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(243, 242, 238, 0.5),
    0 0 0 6px rgba(243, 242, 238, 0.06),
    0 0 0 200vmax rgba(4, 4, 5, 0.74);
  transition:
    top 480ms cubic-bezier(0.32, 0.72, 0, 1),
    left 480ms cubic-bezier(0.32, 0.72, 0, 1),
    width 480ms cubic-bezier(0.32, 0.72, 0, 1),
    height 480ms cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 320ms;
}
.m-app .mtour__hole.is-none {
  box-shadow:
    0 0 0 0 rgba(243, 242, 238, 0),
    0 0 0 0 rgba(243, 242, 238, 0),
    0 0 0 200vmax rgba(4, 4, 5, 0.74);
}
.m-app .mtour__card {
  position: absolute;
  left: 12px;
  right: 12px;
  max-width: 420px;
  margin-inline: auto;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  display: grid;
  gap: 8px;
  padding: 18px 18px 14px;
  border-radius: 28px;
  background: rgba(22, 22, 25, 0.8);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: mtour-in 340ms cubic-bezier(0.2, 0, 0, 1) both;
}
.m-app .mtour__card.is-top {
  bottom: auto;
  top: calc(env(safe-area-inset-top) + 12px);
}
.m-app .mtour__card--welcome {
  gap: 10px;
  padding: 26px 22px 16px;
}
.m-app .mtour__logo {
  margin-bottom: 6px;
  color: var(--text-primary);
}
.m-app .mtour__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  row-gap: 10px;
  margin-bottom: 4px;
}
.m-app .mtour__ch {
  font: 500 11px/14px var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.m-app .mtour__n {
  font: 500 12px/16px var(--font-num);
  color: var(--text-tertiary);
}
.m-app .mtour__prog {
  grid-column: 1/-1;
  position: relative;
  height: 2px;
  border-radius: 1px;
  background: rgba(243, 242, 238, 0.12);
  overflow: hidden;
}
.m-app .mtour__prog i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--bone);
  transition: width 480ms cubic-bezier(0.32, 0.72, 0, 1);
}
.m-app .mtour__t {
  margin: 0;
  font: 600 20px/26px var(--font-ui);
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.m-app .mtour__card--welcome .mtour__t {
  font-size: 26px;
  line-height: 32px;
  letter-spacing: -0.025em;
}
.m-app .mtour__d {
  margin: 0;
  font: 400 15px/22px var(--font-ui);
  color: var(--text-secondary);
  text-wrap: pretty;
}
.m-app .mtour__f {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.m-app .mtour__f--welcome {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-top: 16px;
}
.m-app .mtour__f--welcome .nods-btn {
  height: 52px;
  border-radius: 999px;
  font-size: 16px;
}
.m-app .mtour__end {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: 500 14px/1 var(--font-ui);
  color: var(--text-tertiary);
  -webkit-tap-highlight-color: transparent;
}
.m-app .mtour__acts {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.m-app .mtour__back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  -webkit-tap-highlight-color: transparent;
}
.m-app .mtour__next {
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--bone);
  color: var(--ink);
  font: 600 15px/1 var(--font-ui);
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--ease-out);
}
.m-app .mtour__next:active,
.m-app .mtour__back:active {
  transform: scale(0.96);
}
@keyframes mtour-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-app .mtour__hole {
    transition: none;
  }
  .m-app .mtour__card {
    animation: none;
  }
}

/* the way to the next screen: the dim lightens a touch while the ring glides to what you would tap, and a soft touch presses it (a Bone dot
   that settles, sinks, and sends one ring out), then the real button is pressed */
.m-app .mtour.is-walking .mtour__hole {
  box-shadow:
    0 0 0 1px rgba(243, 242, 238, 0.7),
    0 0 0 8px rgba(243, 242, 238, 0.08),
    0 0 0 200vmax rgba(4, 4, 5, 0.6);
}
.m-app .mtour__tap {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 2;
}
.m-app .mtour__tap::before {
  content: "";
  position: absolute;
  left: -17px;
  top: -17px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(243, 242, 238, 0.92);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  animation: mtour-press 620ms cubic-bezier(0.2, 0, 0, 1) both;
}
.m-app .mtour__tap i {
  position: absolute;
  left: -17px;
  top: -17px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(243, 242, 238, 0.8);
  animation: mtour-ring 620ms cubic-bezier(0.2, 0, 0, 1) 220ms both;
}
@keyframes mtour-press {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
  55% {
    transform: scale(0.8);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}
@keyframes mtour-ring {
  0% {
    opacity: 0.9;
    transform: scale(0.8);
  }
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-app .mtour__tap::before,
  .m-app .mtour__tap i {
    animation-duration: 1ms;
  }
}

/* the same on the phone: the ring presses with the tap, closes to the point you tapped, and opens out from the middle of what comes next */
.m-app .mtour__hole.is-press {
  transform: scale(0.94);
  transition-property: transform;
  transition-duration: 140ms;
}
.m-app .mtour__hole.is-close {
  transition-duration: 280ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.9, 0.55);
}
.m-app .mtour__hole.is-jump {
  transition: none;
}
.m-app .mtour__hole.is-open {
  transition-duration: 520ms;
  transition-timing-function: cubic-bezier(0.16, 0.84, 0.24, 1);
}