/* Phone layout shares the same data and authorization as desktop. */
@media(max-width:640px){
  :root{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
  #shell{min-height:100svh;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  #shell>aside{padding:18px 20px 10px;background:#0c100f;border:0}
  .brand{font-size:20px;gap:10px}.brand-icon{width:34px;height:34px;border-radius:10px}
  #shell nav{position:fixed;z-index:20;bottom:0;left:0;right:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border-top:1px solid #35402e;background:#131b16f5;backdrop-filter:blur(18px)}
  #shell nav a{display:flex;flex-direction:column;gap:5px;min-width:0;min-height:56px;padding:7px 2px;font-size:20px;line-height:1.2;border-radius:12px;white-space:normal;text-align:center}
  #shell nav a span{font-size:14px;line-height:1.4}#shell nav a.active{background:#27371d}
  #shell main{padding:0 16px}header{min-height:58px;height:auto;padding:6px 0 12px;position:relative}
  .header-right{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
  #connection{margin-right:auto;font-size:13px}#refresh{min-height:44px;padding:10px 12px;font-size:14px}#logout{min-height:44px;padding:6px;font-size:14px}
  .page-heading{margin:22px 0 18px;gap:14px}.page-heading h1{font-size:25px;line-height:1.35;letter-spacing:0;margin-bottom:8px}.eyebrow{font-size:13px;letter-spacing:.3px}
  #subtitle{font-size:14px;line-height:1.6}#connect{min-height:44px;width:100%;border-radius:10px}
  .banner{padding:15px;border-radius:12px;gap:12px;margin-bottom:16px}.banner p{font-size:14px;line-height:1.7}.banner .secondary{min-height:44px;width:100%}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card{padding:16px;border-radius:18px}
  .cards .card:first-child{grid-column:1/-1;background:linear-gradient(120deg,#1f2e18,#151d17)}
  .card:first-child .card-body{margin:14px 0}.card:first-child .big-number{font-size:64px}.card:first-child .ring{width:104px;height:104px}
  .card:not(:first-child) .card-top{align-items:flex-start;flex-direction:column;gap:8px}.card:not(:first-child) .card-body{position:relative;display:block;margin:18px 0 12px}
  .card:not(:first-child) .ring{display:none}.card:not(:first-child) .big-number{font-size:36px;letter-spacing:-1px}.card:not(:first-child) .unit{margin-left:4px}
  .card h3{font-size:16px}.tag{font-size:12px}.card-note,.card-foot{font-size:14px;line-height:1.65}.card-foot{padding-top:12px}.card .unit{font-size:14px}
  .grid{gap:16px;margin-top:16px}.panel{border-radius:18px;padding:18px}.panel-top{gap:12px;margin-bottom:18px}.panel h2{font-size:18px}
  body[data-view=overview] .cards+.grid>.panel:last-child{order:-1}
  .vitals{gap:0 16px}.vital{padding:16px 0}.vital p{font-size:14px;line-height:1.5}.vital strong{font-size:28px}.vital small{font-size:13px}
  .switch button{font-size:14px;min-width:54px;min-height:42px}.switch{border-radius:10px}.metric-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.metric-choice button{min-height:46px;padding:10px 8px;white-space:normal}
  .chart{height:auto;aspect-ratio:580/210}.chart text{font-size:14px}.legend{font-size:14px;line-height:1.6}.chart-labels{font-size:13px}
  .table-wrap{overflow:visible}table,tbody{display:block;white-space:normal}thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;padding:18px 0;border-top:1px solid var(--line)}
  tbody td{display:block;border:0;padding:0;min-width:0;font-size:16px;line-height:1.6;overflow-wrap:anywhere}tbody td:first-child{grid-column:1/-1;font-size:17px;font-weight:600}
  tbody td::before{content:attr(data-label);display:block;color:var(--muted);font-size:13px;font-weight:400;margin-bottom:4px}tbody td:first-child::before{display:none}td small{font-size:14px;font-weight:400;line-height:1.5}
  .full{margin-top:16px}.stage-row{line-height:1.6}.help{font-size:16px;line-height:1.8}
  footer{padding:24px 0 8px;font-size:13px;line-height:1.8}
  #login{min-height:100svh;padding:24px 18px}.login-card{padding:28px 22px;border-radius:22px}.login-card input{font-size:16px;min-height:50px}.login-card button{min-height:50px;font-size:16px}.login-card .muted{font-size:16px}
  dialog{max-height:85svh;overflow:auto;padding:24px;width:calc(100% - 24px);border-radius:20px}.close{min-width:44px;min-height:44px}.loading,.empty{font-size:16px}
}
@media(max-width:350px){.cards{grid-template-columns:1fr}.card:not(:first-child) .card-top{flex-direction:row}.page-heading h1{font-size:23px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

@media(max-width:640px){#shell nav{grid-template-columns:repeat(5,minmax(0,1fr))}#shell nav a span{font-size:12px}}

/* Connection action belongs to the top toolbar. */
.header-right #connect{order:3;width:auto;flex-shrink:0}.mobile-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.mobile-topbar .brand{min-width:0}.mobile-topbar #connect{width:auto;min-height:44px;padding:10px 12px;flex-shrink:0;font-size:14px}@media(min-width:901px){header{height:auto;min-height:88px;padding:16px 0;flex-wrap:wrap}.header-right{flex-wrap:wrap}}@media(max-width:380px){.mobile-topbar{gap:8px}.mobile-topbar .brand{font-size:17px;gap:7px}.mobile-topbar .brand-icon{width:28px;height:28px}.mobile-topbar #connect{font-size:13px;padding:10px}}