/* Mobile shell — COIN page (see mshell/coin.js). */
@media (max-width: 979px) {
  html.web-shell .mwc-hname { font-weight: 800; }
  html.web-shell .mwc-hero { gap: 14px; background: linear-gradient(180deg, var(--mws-hero-a), var(--mws-hero-b)); }
  html.web-shell .mwc-pricerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  html.web-shell .mwc-price {
    font-family: var(--mws-mono); font-size: 30px; font-weight: 600; letter-spacing: -0.02em;
  }
  html.web-shell .mwc-chg { font-size: 11px; padding: 3px 8px; }
  html.web-shell .mwc-live {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mws-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--mws-ink-3);
  }
  html.web-shell .mwc-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mws-ink-3); }
  html.web-shell .mwc-live .dot.on { background: var(--mws-up); box-shadow: 0 0 0 3px rgba(32,199,117,0.15); }
  html.web-shell .mwc-chartwrap { display: flex; flex-direction: column; gap: 6px; }
  html.web-shell .mwc-chartcap {
    display: flex; justify-content: space-between;
    font-family: var(--mws-mono); font-size: 10px; color: var(--mws-ink-3);
  }
  html.web-shell .mwc-poshead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  html.web-shell .mwc-earnchip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; color: var(--mws-up);
    border: 1px solid rgba(32,199,117,0.35); background: rgba(32,199,117,0.08);
    padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  }
  html.web-shell .mwc-earnchip .lf { display: inline-flex; }
  html.web-shell .mwc-pos { cursor: pointer; }
  html.web-shell .mwc-more {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 12px; border-top: 1px solid var(--mws-line-2);
    font-size: 12.5px; font-weight: 700; color: var(--mws-gold);
  }
  html.web-shell .mwc-more .chev { font-size: 18px; line-height: 1; }
  html.web-shell .mwc-flat { font-size: 12.5px; color: var(--mws-ink-3); padding: 4px 0; }
  html.web-shell .mwc-sub { font-family: var(--mws-mono); font-size: 10.5px; color: var(--mws-ink-3); }
  html.web-shell .mwc-filters { font-size: 12px; max-width: 60%; }
  html.web-shell .mwc-filters .blk { color: var(--mws-down); }
  html.web-shell .mwc-filters .sep { color: var(--mws-ink-3); }
  html.web-shell .mwc-filters .ok { color: var(--mws-up); }
  html.web-shell .mwc-filters button.blk {
    background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
    color: var(--mws-down); text-decoration: underline dotted; text-underline-offset: 3px;
  }
  html.web-shell .mwc-filthint { margin-top: -4px; text-align: right; font-size: 11.5px; color: var(--mws-ink-3); }
  html.web-shell .mwc-fpop { display: flex; flex-direction: column; gap: 10px; text-align: left; }
  html.web-shell .mwc-fpop .row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 10px 12px; border-radius: 10px; background: var(--mws-well);
  }
  html.web-shell .mwc-fpop .k { font-size: 12px; color: var(--mws-ink-3); }
  html.web-shell .mwc-fpop .v { font-family: var(--mws-mono); font-size: 13.5px; color: var(--mws-ink-2); text-align: right; }
  html.web-shell .mwc-fpop .v.need { color: var(--mws-ink); font-weight: 700; }
  html.web-shell .mwc-fpop .hint { font-size: 12px; line-height: 1.45; color: var(--mws-ink-3); }
  html.web-shell .mwc-earnrow { cursor: pointer; }
  html.web-shell .mwc-find { display: flex; gap: 10px; align-items: flex-start; }
  html.web-shell .mwc-find .d { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: var(--mws-up); }
  html.web-shell .mwc-find.warn .d { background: var(--mws-gold); }
  html.web-shell .mwc-find.bad .d, html.web-shell .mwc-find.error .d { background: var(--mws-down); }
  html.web-shell .mwc-find .t { font-size: 13.5px; font-weight: 700; }
  html.web-shell .mwc-find .s { font-size: 12px; color: var(--mws-ink-3); margin-top: 2px; line-height: 1.45; }
  html.web-shell .mwc-find .a { font-size: 12px; color: var(--mws-gold); margin-top: 3px; }
  html.web-shell .mwc-trades .mwc-poshead { padding-bottom: 6px; }
  html.web-shell .mwc-trow {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 11px 0; border-top: 1px solid var(--mws-line-2); cursor: pointer;
  }
  html.web-shell .mwc-trow .a { font-size: 12.5px; font-weight: 600; }
  html.web-shell .mwc-trow .b { font-size: 10.5px; color: var(--mws-ink-3); margin-top: 3px; }
  html.web-shell .mwc-trow .r { text-align: right; }
  html.web-shell .mwc-remove {
    align-self: center; display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; padding: 6px 12px; margin-top: 2px;
  }
}

/* Quick settings on the coin page (app.js _qs*): budget cap inside OPEN
   POSITION and the exchange stop in the HOW IT SELLS card. */
@media (max-width: 979px) {
  html.web-shell .mwc-cap {
    display: flex; flex-direction: column; gap: 7px;
    padding-top: 12px; border-top: 1px solid var(--mws-line-2);
  }
  html.web-shell .mwc-cap .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  html.web-shell .mwc-cap > .v {
    font-family: var(--mws-mono); font-size: 16px; font-weight: 700; color: var(--mws-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.web-shell .mwc-cap > .v .of { font-size: 12px; font-weight: 500; color: var(--mws-ink-3); }
  html.web-shell .mwc-capedit { padding: 4px 0 4px 6px; font-weight: 700; }
  html.web-shell .mwc-capbar {
    height: 5px; border-radius: 99px; background: var(--mws-well); overflow: hidden;
  }
  html.web-shell .mwc-capbar span { display: block; height: 100%; border-radius: 99px; background: var(--mws-up); }
  html.web-shell .mwc-cap.near .mwc-capbar span { background: var(--mws-gold-2); }
  html.web-shell .mwc-cap.over .mwc-capbar span,
  html.web-shell .mwc-cap.high .mwc-capbar span { background: var(--mws-down); }
  html.web-shell .mwc-cap .note { font-size: 11.5px; line-height: 1.45; color: var(--mws-ink-3); }
  html.web-shell .mwc-cap.near .note { color: var(--mws-gold); }
  html.web-shell .mwc-cap.over .note,
  html.web-shell .mwc-cap.high .note { color: var(--mws-down); }

  html.web-shell .mwc-sells { display: flex; flex-direction: column; gap: 0; }
  html.web-shell .mwc-sells .mwc-poshead { margin-bottom: 4px; }
  html.web-shell .mwc-sells .qs-row {
    display: flex; align-items: center; gap: 12px; padding: 11px 0;
    border-top: 1px solid var(--mws-line-2);
  }
  html.web-shell .mwc-sells .mwc-poshead + .qs-row { border-top: 0; }
  html.web-shell .mwc-sells .qs-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
  html.web-shell .mwc-sells .qs-l { font-size: 14px; color: var(--mws-ink); }
  html.web-shell .mwc-sells .qs-s { font-size: 11.5px; line-height: 1.4; color: var(--mws-ink-3); }
  html.web-shell .mwc-sells .qs-row.on .qs-s { color: var(--mws-ink-2); }
  html.web-shell .mwc-sells .qs-link {
    background: transparent; border: 0; padding: 4px 0; cursor: pointer;
    font-weight: 700; font-size: 13px; color: var(--mws-gold); white-space: nowrap;
  }
  html.web-shell .mwc-sells .mwc-qslink {
    align-self: flex-start; margin-top: 6px; padding: 6px 0 0; font-weight: 700;
  }
}