/* Underridge phone layer. Loaded last; applies at 860px and below only.
   A real app bar replaces the floating menu box, actions become a thumb grid,
   and every tap target is at least 44px. */

#m-bar{display:none}

@media (max-width:860px){
  html{-webkit-text-size-adjust:100%}
  body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
  button,a{touch-action:manipulation}
  button:active{transform:scale(.98)}

  /* App bar */
  #m-bar{
    display:flex;align-items:center;gap:8px;position:fixed;left:0;right:0;top:0;z-index:44;
    height:calc(58px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0 6px;
    background:rgba(11,22,17,.78);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
    border-bottom:1px solid rgba(210,176,110,.16);box-shadow:0 8px 24px rgba(4,10,7,.18)
  }
  #m-bar .m-logo{flex:1;display:flex;align-items:center;justify-content:center;height:44px;margin-right:-38px}
  #m-bar .m-logo img{height:24px;width:auto;display:block}
  #m-bar .rail-hamb{
    position:static!important;display:grid!important;place-items:center;flex:0 0 44px;width:44px!important;height:44px!important;
    padding:0!important;margin:0;border:0!important;border-radius:12px!important;background:transparent!important;
    color:#EEF0EA!important;box-shadow:none!important;font-size:0!important;line-height:0!important
  }
  #m-bar .rail-hamb:active{background:rgba(238,240,234,.08)!important}
  #m-bar .rail-hamb svg{width:24px;height:24px}
  #m-bar .m-new{
    flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;padding:0;border:0;border-radius:12px;cursor:pointer;
    background:linear-gradient(180deg,#D8B77A,#A9844C);color:#16130C;box-shadow:0 6px 16px rgba(169,132,76,.35),inset 0 1px 0 rgba(255,255,255,.35)
  }
  #m-bar .m-new svg{width:20px;height:20px}

  /* Page frame */
  .shell{padding:calc(58px + env(safe-area-inset-top) + 22px) 20px calc(36px + env(safe-area-inset-bottom))!important}
  main#root{padding:0!important}

  /* Hero */
  .uv4-home .uv4-eyebrow{font-size:11px!important;letter-spacing:.14em!important;margin-bottom:10px!important}
  .uv4-home .uv4-display{font-size:clamp(34px,10vw,42px)!important;line-height:1.02!important;letter-spacing:-.02em!important;margin:0 0 14px!important}
  .uv4-home .uv4-lede{font-size:15.5px!important;line-height:1.55!important;margin:0!important;max-width:none}

  /* Actions: one primary, then an even 2x2 grid */
  .uv4-cta{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important;margin:26px 0 18px!important;align-items:stretch}
  .uv4-cta>button{width:100%!important;margin:0!important;min-height:50px;justify-content:center;text-align:center;border-radius:14px!important;font-size:14.5px!important;padding:0 12px!important;white-space:nowrap}
  .uv4-cta #home-start{grid-column:1/-1;min-height:56px;font-size:16px!important;font-weight:600!important;border-radius:16px!important}
  .uv4-cta .uv4-btng{background:rgba(238,240,234,.035)!important}
  body:not(.dark) .uv4-cta .uv4-btng{background:rgba(255,255,255,.72)!important}
  .uv4-cta #hm-bal{grid-column:1/-1;justify-self:center;margin:4px 0 0!important;font-size:13px!important}

  /* Quick underwrite */
  .uv4-quick{padding:16px 18px!important;border-radius:18px!important;gap:14px!important;margin:0 0 22px!important}
  .uv4-quick .uv4-quick-ic{flex:0 0 44px;width:44px!important;height:44px!important;border-radius:12px!important}
  .uv4-quick .uv4-quick-tk{font-size:16px;width:100%}

  /* Stats: compact 2-up tiles */
  .uv4-stats{grid-template-columns:1fr 1fr!important;gap:10px!important;margin:0 0 26px!important}
  .uv4-stat{padding:14px 16px!important;border-radius:16px!important;min-height:0!important}
  .uv4-stat .k{font-size:10.5px!important}
  .uv4-stat .v{font-size:28px!important;margin:6px 0 2px!important}
  .uv4-stat .d{font-size:12px!important}

  .uv4-stat::after{display:none!important}

  /* Pipeline: rows become cards (deal + verdict, then walk-away + date) */
  .uv4-home .uv4-gtable{overflow:visible!important;border-radius:18px!important}
   .uv4-home .uv4-table{display:block!important;width:100%!important;min-width:0!important}
   .uv4-home .uv4-table tbody{display:block}
   .uv4-home .uv4-table tr:has(th){display:none!important}
   .uv4-home .uv4-table tr{display:grid!important;grid-template-columns:1fr auto;column-gap:12px;row-gap:6px;align-items:center;padding:14px 16px;
    border-bottom:1px solid var(--ur-hair)}
   .uv4-home .uv4-table tr:last-child{border-bottom:0}
   .uv4-home .uv4-table td{display:block!important;padding:0!important;border:0!important;background:none!important;min-width:0}
   .uv4-home .uv4-table td:nth-child(1){grid-column:1;grid-row:1;font-size:15px!important;font-weight:600!important;line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
   .uv4-home .uv4-table td:nth-child(2){grid-column:2;grid-row:1;justify-self:end}
   .uv4-home .uv4-table td:nth-child(3){grid-column:1;grid-row:2;font-size:13px!important;color:var(--ur-ink-2)!important}
   .uv4-home .uv4-table td:nth-child(3)::before{content:"Walk-away ";color:var(--ur-ink-3)}
   .uv4-home .uv4-table td:nth-child(4){display:none!important}
   .uv4-home .uv4-table td:nth-child(5){grid-column:2;grid-row:2;justify-self:end;font-size:12.5px!important;color:var(--ur-ink-3)!important}

  /* Drawer */
  .rail{width:min(86vw,330px)!important;flex-basis:auto!important;border-radius:0 22px 22px 0;border-right:1px solid rgba(210,176,110,.18)!important;
    box-shadow:24px 0 60px rgba(0,0,0,.4);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
    transition:transform .32s cubic-bezier(.32,.72,0,1)!important}
  .rail-top,.rail-hist,.rail-dock{min-width:0!important}
  .rl-scrim-m.open{background:rgba(6,12,9,.42)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .rail-row .rail-item{min-height:52px}
  .rail-kebab{opacity:.8}
}

/* Not underwritten yet (Home): deal and size, then the run pill and the
   options button. Phones get 44px targets on every deal's options. */
@media (max-width:860px){
  .uv4-home .pp-home .uv4-table tr{grid-template-columns:minmax(0,1fr) auto 44px}
  .uv4-home .pp-home .uv4-table td:nth-child(2),.uv4-home .pp-home .uv4-table td:nth-child(3){display:none!important}
  .uv4-home .pp-home .uv4-table td:nth-child(4){display:block!important;grid-column:1;grid-row:2;justify-self:start;font-size:13px!important;color:var(--ur-ink-2)!important}
  .uv4-home .pp-home .uv4-table td:nth-child(5){grid-column:2;grid-row:1 / span 2;align-self:center}
  .uv4-home .pp-home .uv4-table td:nth-child(6){grid-column:3;grid-row:1 / span 2;align-self:center;justify-self:end}
  .pp-kebab{width:44px;height:44px}
  .rail-kebab{flex-basis:44px}
  .rail-ctx button{min-height:44px}
  .rail-ctx .ctx-input{font-size:16px}
}