/* Stack ID: phone and tablet layout. Loaded after /styles.css and /portal.css on every Stack ID page. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden;-webkit-tap-highlight-color:transparent}
img,svg{max-width:100%}

/* Keep long things (emails, IP addresses, device names) from pushing the page sideways */
.row-title,.row-meta span,.tl-meta span,.kv dd,.desc,.notice{overflow-wrap:anywhere;word-break:break-word}

/* Touch targets: only on touch screens, at least 44px tall, as Apple and Google recommend */
@media (pointer:coarse){
  a,button,.btn-soft,.btn,.tabs a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .link{min-height:44px;display:inline-flex;align-items:center}
}

/* Inputs: 16px stops phones zooming in on focus; full width; comfortable height */
input,select,textarea{font-size:16px;min-height:48px;width:100%;max-width:100%}
input[type="checkbox"]{width:22px;height:22px;min-height:22px}

/* Keyboard users can always see where they are */
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}

/* Auth pages (sign-in, sign-up, codes): a centred narrow column */
.auth{padding:56px 22px 96px}
.auth > div{max-width:440px;margin:0 auto}
.auth h1{font-size:clamp(34px,9vw,44px);line-height:1.1;letter-spacing:-1px}
.auth .card{padding:24px 22px}

/* Tabs: a single scrollable row on narrow screens, never a wrapped mess */
.tabs{width:100%;max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none}

/* Phones */
@media (max-width:640px){
  .portal{padding:28px 16px 80px}
  .portal-head{gap:14px;margin-bottom:20px}
  .portal-head h1{font-size:28px}
  .avatar{width:48px;height:48px;font-size:19px}
  .panel{padding:20px 18px;border-radius:16px}
  .panel-head{flex-direction:column;gap:12px}
  .panel-head .badge{align-self:flex-start}
  .panel h2{font-size:17px}
  .row{flex-wrap:wrap;gap:12px;align-items:flex-start}
  .row-main{flex:1 1 calc(100% - 60px);min-width:0}
  .row-action{width:auto}
  .panel-foot{flex-wrap:wrap;gap:10px}
  .kv{grid-template-columns:1fr;gap:4px}
  .kv dt{margin-top:10px;font-size:12px;letter-spacing:1px;text-transform:uppercase}
  .timeline{padding-left:24px;margin-left:6px}
  .tl-dot{left:-24px}
  .notice{font-size:15px}
  .btn-soft{padding:9px 14px;font-size:13px}
  .empty{padding:28px 8px}
}

/* Very small phones */
@media (max-width:360px){
  .portal{padding:22px 12px 64px}
  .tabs a span{display:none}
  .tabs a{padding:0 14px}
  .auth{padding:36px 14px 72px}
}

/* Tablets and up: give the panels room, without stretching text too wide */
@media (min-width:641px) and (max-width:1024px){
  .portal{max-width:640px}
}

/* Hover effects only where a mouse exists, so phones don't stick on hover */
@media (hover:none){
  .tabs a:hover,.btn-soft:hover{color:inherit;background:inherit;border-color:inherit}
}

/* Respect the device's notch and home-bar areas */
@supports (padding:max(0px)){
  .portal,.auth{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
}

/* Respect "reduce motion" on the device */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}