/* Labdhi Desk — phone.
   Not the desktop at a narrower width. A trader is on a call, one hand on the
   phone, and needs the deal recorded before the conversation moves on. So:
   one decision per screen, targets you can hit without looking, a numeric pad
   that never lets the OS keyboard cover the page, and the two actions that
   matter parked under the thumb. */

body.phone .topbar { display: none; }
/* A grid column defaults to `auto`, which sizes to its content - so one long
   <option> in the material filter was widening the entire document. minmax(0,1fr)
   is what stops a grid item refusing to shrink. */
body.phone #app { grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); }
body.phone main, body.phone .view, body.phone .mflow, body.phone .mdesk { min-width: 0; }
body.phone .mselect { min-width: 0; max-width: 100%; }
body.phone main { padding: 0 0 var(--dock-h) 0; }
body.phone .view { max-width: 100%; }

:root { --dock-h: 108px; --tap: 48px; }
body.phone.trading { --dock-h: 0px; }

/* ---------------------------------------------------------------- header */
/* One line, not two. The header and the dock were together eating close to
   40% of a small phone, and every pixel they give back is a row of stock. */
.mhead {
  position: sticky; top: 0; z-index: 30; background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: calc(7px + env(safe-area-inset-top, 0px)) 14px 7px;
}
.mhead-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Without this the company name has no width to give back, so a long one
   widens the header and with it the whole document. */
.mhead-name { font-size: 15px; font-weight: 680; letter-spacing: -.01em;
              min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mhead-stat { flex: 0 0 auto; }
.mhead-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); flex: 0 0 8px; }
.mhead-logo { width: 18px; height: 18px; flex: 0 0 18px; display: block; object-fit: contain; }
.mhead-stat { margin-left: auto; text-align: right; white-space: nowrap; }
.mhead-stat b { display: block; font-size: 15px; font-weight: 700; line-height: 1.15; }
.mhead-stat span { font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
/* The strip is context for the desk; on every other screen it is noise. */
.mhead-strip { display: flex; gap: 14px; margin-top: 5px; overflow-x: auto; scrollbar-width: none; }
body.phone:not(.on-desk) .mhead-strip { display: none; }
.mhead-strip::-webkit-scrollbar { display: none; }
.mhead-strip div { white-space: nowrap; font-size: 12px; color: var(--ink-2); }
.mhead-strip b { color: var(--ink); font-weight: 640; }

/* ---------------------------------------------------------------- dock */
/* Buy and Sell live above the tabs, full width, thumb height. They are the
   whole point of the app and never more than one tap away. */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        background: var(--surface); border-top: 1px solid var(--line);
        padding-bottom: env(safe-area-inset-bottom, 0px); }
body.phone.trading .dock { display: none; }
.dock-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 7px 12px 4px; }
.dock-btn { height: var(--tap); border-radius: 13px; font-size: 17px; font-weight: 750;
            letter-spacing: .02em; color: #fff; display: flex; align-items: center;
            justify-content: center; gap: 9px; }
.dock-btn.buy { background: var(--accent); }
.dock-btn.sell { background: var(--up); }
.dock-btn:active { transform: scale(.97); filter: brightness(.94); }
.dock-tabs { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 6px 4px; }
.dock-tab { padding: 5px 2px 3px; border-radius: 9px; font-size: 10px; font-weight: 600;
            color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 1px; }
.dock-tab i { font-size: 15px; font-style: normal; line-height: 1.1; }
.dock-tab.on { color: var(--accent); }

/* ---------------------------------------------------------------- desk */
.mdesk { padding: 14px 14px 6px; }
.mstat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.mstat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; }
.mstat span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.mstat b { display: block; font-size: 21px; font-weight: 700; margin-top: 4px; letter-spacing: -.02em; }

.mlabel { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
          color: var(--ink-3); margin: 20px 0 10px; display: flex; align-items: center; gap: 10px; }
.mlabel span { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500;
               font-size: 13px; color: var(--ink-3); }

/* One position per row: what it is, how much, what it cost, and a sell button
   big enough to hit while walking. */
.mpos { display: flex; align-items: center; gap: 12px; padding: 14px;
        background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
        margin-bottom: 9px; }
.mpos-main { flex: 1; min-width: 0; }
.mpos-name { font-size: 15.5px; font-weight: 650; white-space: nowrap; overflow: hidden;
             text-overflow: ellipsis; }
.mpos-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; font-family: var(--mono); }
.mpos-qty { text-align: right; }
.mpos-qty b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.mpos-qty span { font-size: 12px; }
.mpos-go { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px; background: var(--up-soft);
           color: var(--up); font-size: 22px; font-weight: 700; display: grid; place-items: center; }
.mpos-go:active { background: var(--up); color: #fff; }

/* Repeat a deal you have already done: the fastest path there is. */
.mrepeat { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 2px 14px 4px; }
.mrep { background: var(--surface); border: 1px solid var(--line); min-width: 0;
        border-radius: 14px; padding: 11px 13px; text-align: left; }
.mrep i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
          text-transform: uppercase; }
.mrep.buy i { color: var(--accent); }
.mrep.sell i { color: var(--up); }
.mrep b { display: block; font-size: 14.5px; font-weight: 640; margin-top: 3px;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrep span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- ticket */
.mtrade { position: fixed; inset: 0; z-index: 60; background: var(--bg);
          display: flex; flex-direction: column; }
.mt-head { display: flex; align-items: center; gap: 12px; padding: calc(8px + env(safe-area-inset-top,0px)) 12px 10px;
           background: var(--surface); border-bottom: 1px solid var(--line); }
.mt-back { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; font-size: 24px;
           display: grid; place-items: center; color: var(--ink-2); }
.mt-back:active { background: var(--bg); }
.mt-title { flex: 1; min-width: 0; }
.mt-title b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.mt-title span { display: block; font-size: 12.5px; color: var(--ink-3); white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; }
.mtrade.sell .mt-kind { color: var(--up); }
.mtrade.buy .mt-kind { color: var(--accent); }
.mt-steps { display: flex; gap: 5px; padding: 0 14px 10px; background: var(--surface);
            border-bottom: 1px solid var(--line); }
.mt-steps i { height: 3px; flex: 1; border-radius: 2px; background: var(--line); }
.mt-steps i.done { background: var(--accent); }
.mtrade.sell .mt-steps i.done { background: var(--up); }

.mt-body { flex: 1; overflow-y: auto; padding: 16px 14px 20px;
            display: flex; flex-direction: column; }
/* The pad hugs the bottom of the screen: keys at the top of a tall phone
   cannot be reached with the hand that is holding it. */
.mt-q { font-size: 22px; font-weight: 720; letter-spacing: -.02em; margin-bottom: 4px; }
.mt-hint { font-size: 13.5px; color: var(--ink-3); margin-bottom: 16px; }

/* Choice rows: full width, 60px tall, one tap and the flow moves on. */
.mopt { display: flex; align-items: center; gap: 13px; width: 100%; padding: 15px 16px;
        background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
        margin-bottom: 9px; text-align: left; }
.mopt:active { border-color: var(--accent); background: var(--accent-soft); }
.mopt.on { border-color: var(--accent); border-width: 2px; background: var(--accent-soft); }
.mopt-main { flex: 1; min-width: 0; }
.mopt-main b { display: block; font-size: 16.5px; font-weight: 640; white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
.mopt-main span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px;
                  font-family: var(--mono); }
.mopt-tag { font-size: 13px; font-weight: 650; color: var(--ink-2); white-space: nowrap; }
.mopt-tag.up { color: var(--up); }
.mopt.ghost { border-style: dashed; color: var(--ink-2); justify-content: center; font-weight: 600; }

.msearch { display: flex; align-items: center; gap: 10px; background: var(--surface);
           border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; margin-bottom: 14px; }
.msearch input { flex: 1; border: 0; background: none; outline: none; font-size: 16px; min-width: 0; }

/* ---------------------------------------------------------------- numpad */
/* The OS keyboard covers half a phone and needs precision. This does not. */
.mnum-value { text-align: center; padding: 18px 0 6px; }
.mnum-value b { display: block; font-size: 52px; font-weight: 750; letter-spacing: -.035em;
                line-height: 1; font-family: var(--mono); }
.mnum-value small { display: block; font-size: 14px; color: var(--ink-3); margin-top: 7px; }
.mnum-value.warn b { color: var(--down); }

/* Chips are laid out in a grid, never a scroller. The most useful one on the
   rate screen is +25 paise, and in a horizontal strip it sat off the edge. */
.mchips { display: grid; gap: 8px; padding: 12px 0 14px; grid-template-columns: repeat(3, 1fr); }
.mchips.g2 { grid-template-columns: repeat(2, 1fr); }
.mchips.g4 { grid-template-columns: repeat(4, 1fr); }
.mchip { padding: 13px 6px; border-radius: 13px; background: var(--surface); text-align: center;
         border: 1px solid var(--line); font-size: 15px; font-weight: 620;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mchip:active { border-color: var(--accent); color: var(--accent); }
.mchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.mpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mkey { height: 62px; border-radius: 15px; background: var(--surface); border: 1px solid var(--line);
        font-size: 26px; font-weight: 620; font-family: var(--mono); display: grid; place-items: center; }
.mkey:active { background: var(--accent-soft); border-color: var(--accent); }
.mkey.wide { grid-column: span 2; }
.mkey.fn { font-size: 20px; color: var(--ink-2); font-family: var(--sans); }

/* margin readout that moves while the rate moves */
.mlive { border-radius: 16px; padding: 15px 17px; margin-bottom: 14px;
         background: var(--surface); border: 1px solid var(--line); }
.mlive.good { background: var(--up-soft); border-color: #b9e0cb; }
.mlive.bad { background: var(--down-soft); border-color: #f3c9c9; }
.mlive-top { display: flex; align-items: baseline; gap: 10px; }
.mlive-top b { font-size: 27px; font-weight: 750; letter-spacing: -.02em; }
.mlive-top span { font-size: 14px; font-weight: 620; }
.mlive-sub { font-size: 13px; color: var(--ink-2); margin-top: 5px; }

/* ---------------------------------------------------------------- split */
.mlot { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px;
        background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
        margin-bottom: 9px; text-align: left; }
.mlot.on { border-color: var(--accent); border-width: 2px; background: var(--accent-soft); }
.mlot-rate { font-size: 20px; font-weight: 720; letter-spacing: -.02em; min-width: 76px; }
.mlot-main { flex: 1; min-width: 0; }
.mlot-main b { display: block; font-size: 14.5px; font-weight: 620; white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
.mlot-main span { display: block; font-size: 12px; color: var(--ink-3); font-family: var(--mono); margin-top: 2px; }
.mlot-take { text-align: right; min-width: 74px; }
.mlot-take b { display: block; font-size: 17px; font-weight: 700; }
.mlot-take span { font-size: 11px; color: var(--ink-3); }

.massign { position: sticky; top: -16px; z-index: 2; display: flex; align-items: center; gap: 12px;
           padding: 14px 16px; border-radius: 15px; margin-bottom: 14px;
           background: var(--sell-soft, #fff6e6); border: 1px solid #f0d9ae; }
.massign.done { background: var(--up-soft); border-color: #b9e0cb; }
.massign b { font-size: 22px; font-weight: 740; letter-spacing: -.02em; }
.massign span { font-size: 12.5px; color: var(--ink-2); }
.massign .grow { flex: 1; }
.massign-act { padding: 11px 15px; border-radius: 12px; background: var(--surface);
               border: 1px solid var(--line); font-size: 14px; font-weight: 640; }

/* ---------------------------------------------------------------- footer */
.mt-foot { padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
           background: var(--surface); border-top: 1px solid var(--line); display: flex; gap: 10px; }
.mt-next { flex: 1; height: var(--tap); border-radius: 15px; font-size: 18px; font-weight: 720;
           color: #fff; background: var(--accent); display: grid; place-items: center; }
.mtrade.sell .mt-next { background: var(--up); }
.mtrade .mt-next:disabled { background: var(--line); color: var(--ink-3); }
.mt-next:active:not(:disabled) { filter: brightness(.94); }
.mt-skip { padding: 0 18px; height: var(--tap); border-radius: 15px; border: 1px solid var(--line);
           background: var(--surface); font-size: 15px; font-weight: 620; color: var(--ink-2); }

/* review */
.mrev { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
        padding: 4px 16px; margin-bottom: 14px; }
.mrev-row { display: flex; align-items: center; gap: 12px; padding: 14px 0;
            border-bottom: 1px solid var(--line); }
.mrev-row:last-child { border-bottom: 0; }
.mrev-row span { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
                 color: var(--ink-3); min-width: 92px; }
.mrev-row b { font-size: 16.5px; font-weight: 640; flex: 1; text-align: right; }
.mrev-row em { font-style: normal; font-size: 14px; color: var(--accent); font-weight: 620; }

.mdone { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center;
         text-align: center; background: var(--bg); animation: mfade .2s ease both; }
@keyframes mfade { from { opacity: 0 } to { opacity: 1 } }
.mdone b { display: block; font-size: 46px; font-weight: 800; letter-spacing: -.03em; }
.mdone span { display: block; font-size: 16px; color: var(--ink-2); margin-top: 8px; }


/* ---------------------------------------------------------------- filters */
body.phone .filt-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px;
  border-radius: 13px; background: var(--surface); border: 1px solid var(--line);
  font-size: 15px; font-weight: 620; margin-bottom: 4px;
}
body.phone .filt-toggle::after { content: '▾'; font-size: 11px; color: var(--ink-3); }
body.phone .filterbar.open .filt-toggle::after { content: '▴'; }
body.phone .filt-toggle.has { border-color: var(--accent); color: var(--accent); }
body.phone .filterbar .filt-row { display: none; }
body.phone .filterbar.open .filt-row { display: flex; margin-top: 12px; }
body.phone .filterbar .filt-active { margin-top: 10px; }

/* the desktop views still render inside the phone shell; give them room */
body.phone .section-head { padding: 0 14px; }
body.phone .searchbar,
body.phone .filterbar,
body.phone .tape,
body.phone .morebar,
body.phone .flow-wrap,
body.phone .range { margin-left: 14px; margin-right: 14px; }


/* ---------------------------------------------------------------- flow */
/* A sankey is a laptop drawing. On a phone the same information reads better
   as a list: each trade, and directly beneath it the lots it came from or the
   buyers it went to. Nothing to drag sideways. */
.mflow { padding: 0 14px 6px; }
.mflow-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
              padding: 14px; margin-bottom: 10px; }
.mflow-head { display: flex; align-items: flex-start; gap: 11px; }
.mflow-side { font-size: 10.5px; font-weight: 750; letter-spacing: .07em; padding: 5px 9px;
              border-radius: 8px; }
.mflow-side.sell { background: var(--up-soft); color: var(--up); }
.mflow-side.lot { background: var(--accent-soft); color: var(--accent); }
.mflow-head .grow { flex: 1; min-width: 0; }
.mflow-head b { display: block; font-size: 15px; font-weight: 650; white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; }
.mflow-head span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.mflow-money { text-align: right; white-space: nowrap; }
.mflow-money b { display: block; font-size: 16px; font-weight: 700; }
.mflow-money span { font-size: 11.5px; color: var(--ink-3); }
.mflow-links { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line);
               display: flex; flex-direction: column; gap: 8px; }
.mflow-link { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.mflow-link i { width: 3px; align-self: stretch; border-radius: 2px; flex: 0 0 3px; }
.mflow-link .who { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
                   text-overflow: ellipsis; }
.mflow-link .qty { font-weight: 650; font-family: var(--mono); }
.mflow-link .pl { font-family: var(--mono); font-size: 12.5px; }
.mflow-empty { font-size: 13px; color: var(--ink-3); padding: 4px 0 2px; }

/* shared bits for the phone screens above */
.mselect { width: 100%; padding: 14px 15px; border-radius: 13px; background: var(--surface);
  border: 1px solid var(--line); font-size: 16px; color: var(--ink); appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.mmore { width: 100%; padding: 14px; border-radius: 13px; background: var(--surface);
         border: 1px solid var(--line); font-size: 15px; font-weight: 620; color: var(--ink-2); }
.mmore:active { border-color: var(--accent); color: var(--accent); }
.mflow-card.off { opacity: .5; }
.mflow-card.off .mflow-head b { text-decoration: line-through; }
.msetup-x { width: 34px; height: 34px; border-radius: 9px; color: var(--ink-3); font-size: 19px;
            flex: 0 0 34px; }
.msetup-x:active { background: var(--down-soft); color: var(--down); }
.mpos-hero { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.mpos-hero > b { display: block; font-size: 18px; font-weight: 680; letter-spacing: -.01em; }
.mpos-hero-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.mpos-hero-row span { display: block; font-size: 10.5px; letter-spacing: .07em;
                      text-transform: uppercase; color: var(--ink-3); }
.mpos-hero-row b { display: block; font-size: 19px; font-weight: 700; margin-top: 2px; }
body.phone .alert { margin-bottom: 9px; }

/* ------------------------------------------------------- visualisation */
.mbar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden;
        background: var(--bg); margin-top: 11px; }
.mbar.thin { height: 7px; }
.mbar i { display: block; height: 100%; }
.mfan { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.mfan-svg { width: 100%; display: block; }
.mfan-key { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.mfan-key span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.mfan-key i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.mfan-note { color: var(--ink-3); font-size: 11.5px; padding-left: 18px; }

/* ------------------------------------------------------------- sheet */
.msheet { position: fixed; inset: 0; z-index: 100; background: rgba(20,22,28,.45);
          display: flex; align-items: flex-end; }
.msheet-card { width: 100%; background: var(--surface); border-radius: 22px 22px 0 0;
               padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px));
               display: flex; flex-direction: column; gap: 12px;
               animation: msheetup .22s cubic-bezier(.2,.9,.3,1) both; max-height: 92vh;
               overflow-y: auto; }
@keyframes msheetup { from { transform: translateY(100%) } to { transform: none } }
.msheet-title { font-size: 20px; font-weight: 720; letter-spacing: -.02em; }
.msheet-field { display: flex; flex-direction: column; gap: 6px; }
.msheet-field span { font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
                     text-transform: uppercase; color: var(--ink-3); }
.msheet-field .msheet-toggles { margin-top: 2px; }
.msheet-field input { border: 1px solid var(--line); border-radius: 13px; padding: 14px 15px;
                      font-size: 17px; outline: none; background: var(--bg); }
.msheet-field input:focus { border-color: var(--accent); background: var(--surface);
                            box-shadow: 0 0 0 3px var(--accent-soft); }
.msheet-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.msheet-toggle { padding: 14px 10px; border-radius: 13px; border: 1px solid var(--line);
                 background: var(--bg); font-size: 15px; font-weight: 620; color: var(--ink-2); }
.msheet-toggle.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.msheet-foot { display: flex; gap: 10px; margin-top: 4px; }
.msheet-foot .mt-next { background: var(--accent); }
.mparty-tags { display: flex; gap: 7px; margin-top: 10px; }

/* --------------------------------------------------- overview diagram */
.moview { position: relative; background: var(--surface); border: 1px solid var(--line);
          border-radius: 16px; padding: 26px 12px; margin-bottom: 12px; }
.moview-svg { width: 100%; display: block; }
.moview-side { position: absolute; left: 12px; right: 12px; top: 8px;
               display: flex; align-items: baseline; gap: 8px; }
.moview-side.bottom { top: auto; bottom: 8px; }
.moview-side span { font-size: 10px; font-weight: 750; letter-spacing: .1em; color: var(--ink-3); }
.moview-side b { font-size: 12px; color: var(--ink-2); }
.moview-side em { font-style: normal; font-size: 11px; color: var(--ink-3); margin-left: auto; }
.moband { cursor: pointer; transition: .12s; }
.moband:active { filter: brightness(1.15); }
.mo-detail { padding: 12px 14px; background: var(--bg); border-radius: 12px; margin-bottom: 10px; }
.mo-detail b { display: block; font-size: 14.5px; font-weight: 650; }
.mo-detail span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.mo-detail.hint b { display: none; }
.mo-key { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; }
.mo-key span { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); }
.mo-key i { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 11px; }

/* ==================================================================== scale
   The phone had been inheriting the desktop type scale, so a filter chip came
   out 50px tall at 15px type and a position row took 79px. On a 568px screen
   that is four rows of stock.

   The rule applied below: anything the trader *acts* on stays at a comfortable
   tap size - Buy and Sell, the numeric pad, the choices inside a ticket. Every-
   thing he only *reads* or *browses* gets tighter. Nothing interactive is
   allowed under 40px. */
@media (max-width: 760px) {
  body.phone { font-size: 14px; }

  /* --- header ------------------------------------------------------ */
  .mhead-name { font-size: 14.5px; }
  .mhead-stat b { font-size: 14px; }
  .mhead-strip div { font-size: 11.5px; }

  /* --- section labels ---------------------------------------------- */
  .mlabel { font-size: 10px; letter-spacing: .09em; margin: 16px 0 8px; }
  .mlabel span { font-size: 11.5px; }
  .mt-hint { font-size: 12.5px; }

  /* --- browsing chrome: filters, search, secondary buttons ---------- */
  .mchip { font-size: 13.5px; padding: 11px 8px; border-radius: 11px; }
  .msearch { padding: 11px 14px; border-radius: 12px; }
  .msearch input { font-size: 15px; }
  .mselect { font-size: 14.5px; padding: 12px 14px; }
  .mmore { font-size: 13.5px; padding: 12px; }
  .filt-toggle { font-size: 13.5px; padding: 10px 15px; }
  body.phone .tag { font-size: 11.5px; padding: 4px 9px; }

  /* --- position rows ------------------------------------------------ */
  .mpos { padding: 12px; gap: 10px; border-radius: 13px; margin-bottom: 8px; }
  .mpos-name { font-size: 14.5px; }
  .mpos-sub { font-size: 11.5px; margin-top: 2px; }
  .mpos-qty b { font-size: 17px; }
  .mpos-qty span { font-size: 11px; }
  .mpos-go { width: 42px; height: 42px; flex-basis: 42px; font-size: 19px; border-radius: 12px; }

  /* --- cards: flow, tape, setup, position --------------------------- */
  .mflow-card { padding: 12px; border-radius: 13px; margin-bottom: 8px; }
  .mflow-head { gap: 9px; }
  .mflow-head b { font-size: 14px; }
  .mflow-head span { font-size: 11.5px; }
  .mflow-side { font-size: 9.5px; padding: 4px 7px; border-radius: 7px; }
  .mflow-money b { font-size: 14.5px; }
  .mflow-money span { font-size: 10.5px; }
  .mflow-links { margin-top: 9px; padding-top: 9px; gap: 6px; }
  .mflow-link { font-size: 12.5px; gap: 8px; }
  .mflow-link .pl { font-size: 11.5px; }
  .mo-key span, .mfan-key span { font-size: 11.5px; }
  .mo-detail b { font-size: 13.5px; }
  .mo-detail span { font-size: 11.5px; }
  body.phone .alert { padding: 12px 14px; gap: 11px; }
  body.phone .alert b { font-size: 14px; }
  body.phone .alert span { font-size: 12.5px; }

  /* --- position hero ------------------------------------------------ */
  .mpos-hero { padding: 14px; }
  .mpos-hero > b { font-size: 16px; }
  .mpos-hero-row b { font-size: 17px; }
  .mpos-hero-row span { font-size: 9.5px; }

  /* --- the ticket keeps its size: this is the part being used at speed */
  .mt-q { font-size: 20px; }
  .mopt { padding: 14px 15px; margin-bottom: 8px; }
  .mopt-main b { font-size: 15.5px; }
  .mopt-main span { font-size: 12px; }
  .mlot { padding: 13px; }
  .mlot-rate { font-size: 18px; min-width: 68px; }
  .mlot-main b { font-size: 13.5px; }
  .mlot-take b { font-size: 15.5px; }
  .mrev-row { padding: 12px 0; }
  .mrev-row span { font-size: 11.5px; min-width: 84px; }
  .mrev-row b { font-size: 15px; }
  /* value readout, pad and confirm stay deliberately large */
  .mnum-value b { font-size: 46px; }
  .mkey { height: 58px; font-size: 24px; }
  .mt-next, .mt-skip { height: 50px; font-size: 16.5px; }
}

/* A filter is not a primary action. It gets a segmented-control height (~34px,
   the same as the platform's own) rather than the 44px reserved for the things
   a trader taps mid-call. */
@media (max-width: 760px) {
  .mchips.filter { gap: 6px; }
  .mchips.filter .mchip { padding: 8px 6px; font-size: 12.5px; border-radius: 9px;
                          font-weight: 600; }

  /* Card meta on one line: a wrapped second line costs a whole row of history. */
  .mflow-head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mflow-head .grow { min-width: 0; }
  .msearch { padding: 10px 13px; }
  .msearch input { font-size: 14.5px; }
}

/* ---------------------------------------------------- deal identity */
.mgst { width: 100%; padding: 11px 14px; border-radius: 12px; margin-top: 2px;
        border: 1px solid var(--line); background: var(--surface); text-align: left;
        font-size: 13.5px; font-weight: 620; color: var(--ink-2); }
.mgst.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.msheet-dchips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.msheet-dchips .mchip { padding: 9px 2px; font-size: 12.5px; }
.msheet-hint { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.mdeal-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mdeal-meta span { font-size: 11.5px; padding: 4px 9px; border-radius: 99px;
                   background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); }

.mparty-addr { font-size: 12px; color: var(--ink-3); margin-top: 8px; line-height: 1.4;
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ------------------------------------------------ records and lists */
.dock-tabs { grid-template-columns: repeat(5, 1fr); }
body.phone .morebar { padding: 6px 0 12px; gap: 10px; flex-direction: column; }
body.phone .more-btn { width: 100%; padding: 12px; font-size: 14px; border-radius: 12px; }
body.phone .more-count { font-size: 12px; }
.mcard-btn { display: block; width: 100%; text-align: left; }
.mcard-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.mcard-acts .mchip { padding: 10px 6px; }

/* warehouse strip on the stock screen: a row you swipe, not a wall */
.mwh-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.mwh-row::-webkit-scrollbar { display: none; }
.mwh { flex: 0 0 auto; min-width: 104px; text-align: left; padding: 10px 12px; border-radius: 13px;
       background: var(--surface); border: 1px solid var(--line); }
.mwh b { display: block; font-size: 14px; font-weight: 660; white-space: nowrap; }
.mwh span { display: block; font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }
.mwh.on { border-color: var(--accent); background: var(--accent-soft); }
.mwh.on b { color: var(--accent); }
.mwh.add { border-style: dashed; min-width: 88px; }

.mledger { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface);
           border: 1px solid var(--line); border-radius: 12px; margin-bottom: 7px; }
.mledger .grow { flex: 1; min-width: 0; }
.mledger .grow b { display: block; font-size: 13.5px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mledger .grow span { display: block; font-size: 11.5px; color: var(--ink-3); }

/* a deal card carries the tape's columns */
.mdeal { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px;
         margin-bottom: 8px; cursor: pointer; }
.mdeal.cancelled { opacity: .55; }
.mdeal.cancelled .mdeal-party { text-decoration: line-through; }
.mdeal-top { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.mdeal-top .mono { font-weight: 650; font-size: 12.5px; }
.mdeal-top .grow { flex: 1; }
.mdeal .side-tag { font-size: 9.5px; padding: 3px 7px; }
.mdeal .pill { font-size: 11px; padding: 2px 8px; }
.mdeal-party { font-size: 15px; font-weight: 660; margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdeal-product { font-size: 13px; color: var(--ink-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdeal-product small { color: var(--ink-3); font-size: 12.5px; }
.mdeal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px;
              padding-top: 9px; border-top: 1px solid var(--line); }
.mdeal-grid.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mdeal-grid span { display: block; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.mdeal-grid b { display: block; font-size: 13px; font-weight: 640; margin-top: 1px; white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; }
.mdeal-margin { font-size: 12.5px; font-weight: 650; margin-top: 8px; font-family: var(--mono); }
.mdeal-more { margin-top: 10px; }

/* ------------------------------------------------ split progress */
.massign { flex-direction: column; align-items: stretch; gap: 10px; }
.massign-row { display: flex; align-items: center; gap: 12px; }
.massign.over { background: var(--down-soft); border-color: #f3c9c9; }
.mprog { height: 10px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.mprog i { display: block; height: 100%; background: var(--accent); border-radius: 6px; transition: width .2s ease; }
.massign.done .mprog i { background: var(--up); }
.massign.over .mprog i, .mprog.over i { background: var(--down); }
.mprog.lot { margin: 4px 0 6px; height: 12px; background: var(--bg); }
.mprog-legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); }
.mprog-legend + .mchips { padding-top: 10px; }
/* each lot card fills blue from the left by the share of the lot being taken */
.mlot { background: linear-gradient(to right, var(--accent-soft) var(--fill, 0%), var(--surface) var(--fill, 0%)); }
.mlot.on { background: linear-gradient(to right, #d6e3ff var(--fill, 0%), var(--surface) var(--fill, 0%)); }
.mlot.full { border-color: var(--accent); }

/* ------------------------------------------------ lot card: rate and tonnes */
.mlot-left { display: flex; flex-direction: column; gap: 1px; min-width: 92px; }
.mlot-left .mlot-rate { min-width: 0; }
.mlot-qty { font-size: 20px; font-weight: 720; letter-spacing: -.02em; color: var(--ink); }

/* ------------------------------------------------ the numeric pad, on every phone
   The pad is not part of the scrolling body. The ticket is a column: header,
   a body that scrolls, the pad, the footer. Whatever the phone's height the pad
   and the Next button are always on screen, and only the content above them
   scrolls. Key height follows the screen height (svh = the smallest visible
   height, so a browser toolbar sliding in never pushes keys off), clamped so
   keys stay thumb-sized on a tall phone and still fit on a short one. */
.mtrade { height: 100vh; height: 100dvh; }
.mt-body { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.mt-body.with-pad { padding-bottom: 10px; }
.mt-padzone { flex: none; padding: 8px 14px 6px; background: var(--bg); border-top: 1px solid var(--line); }
.mt-padzone .mpad { gap: clamp(5px, 0.9svh, 8px); }
.mkey { touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
@media (max-width: 760px) {
  .mt-padzone .mkey { height: clamp(40px, 6.6svh, 58px); font-size: clamp(19px, 2.9svh, 24px); border-radius: 13px; }
  .mt-foot { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .mt-next, .mt-skip { height: clamp(44px, 6.4svh, 50px); }
  .mnum-value { padding: clamp(6px, 1.6svh, 18px) 0 4px; }
  .mnum-value b { font-size: clamp(34px, 6svh, 46px); }
  .mt-q { font-size: clamp(17px, 2.6svh, 20px); }
  .mt-hint { margin-bottom: clamp(6px, 1.4svh, 16px); }
  .mt-body .mchips { padding: clamp(6px, 1.2svh, 12px) 0 clamp(6px, 1.2svh, 14px); }
  .mlive { padding: clamp(9px, 1.6svh, 15px) 15px; margin-bottom: clamp(6px, 1.4svh, 14px); }
  .mlive-top b { font-size: clamp(21px, 3.4svh, 27px); }
}

/* ================================================= fits every phone
   - the app is the height of the visible screen (dvh), so nothing sits under
     Safari's toolbar the way it does with 100vh
   - the page keeps exactly the dock's measured height free (--dock-h is set
     from the real dock by mobile.js), plus breathing room
   - notices sit just above the dock
   - a sheet is a column: its fields scroll, its buttons stay pinned on screen */
body.phone #app { height: 100vh; height: 100dvh; }
body.phone main { padding-bottom: calc(var(--dock-h) + 16px); scroll-padding-bottom: calc(var(--dock-h) + 16px); }
body.phone.trading main { padding-bottom: 0; }
body.phone #toasts { bottom: calc(var(--dock-h) + 10px); }
body.phone.trading #toasts { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 760px) {
  .modal { height: 100vh; height: 100dvh; }
  .modal-card { max-height: 92vh; max-height: 92dvh; overflow: hidden; display: flex; flex-direction: column; }
  .modal-card .form-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
                           margin: 0 -16px; padding: 2px 16px 8px; }
  .modal-card .modal-foot { position: static; flex: none; padding: 10px 0 0; margin: 0; border-top: 1px solid var(--line); }
  .modal-card.wa-card { overflow-y: auto; }
  .modal-card.wa-card .wa-msg { max-height: 34vh; max-height: 34dvh; }
  .modal-card .modal-head, .modal-card .form-err { flex: none; }
}

.mflow-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mflow-top b { flex: 1; font-size: 15px; font-weight: 700; }
.mexport { padding: 9px 13px; border-radius: 11px; background: #107c41; color: #fff; font-weight: 680; font-size: 13.5px; white-space: nowrap; }
@media (max-width: 760px) {
  .modal-card.review-card { overflow: hidden; }
  .modal-card.review-card .modal-foot { position: static; flex: none; padding: 10px 0 0; margin: 0; border-top: 1px solid var(--line); }
}
.mt-hint.neg, .mflow-empty.neg { color: var(--down); font-weight: 600; }
.mdeal-meta span.neg { color: var(--down); font-weight: 650; }
.mflow-card .mark-btn { margin-top: 10px; font-size: 13px; padding: 10px; }
.msg-view { gap: 14px; }
.msg-card { padding: 14px; border-radius: 14px; }
.msg-area { font-size: 12.5px; min-height: 150px; }
.msg-preview { max-height: 240px; font-size: 12px; }
.msg-actions .form-save, .msg-actions .form-cancel { flex: 1; text-align: center; }
.wa-tab { padding: 9px 10px; font-size: 13.5px; }
.msort-row { display: flex; gap: 8px; align-items: center; }
.msort-row .mselect { flex: 1; min-width: 0; }
.msort-row .mchip { flex: 0 0 auto; }
