/* responsive.css: screen-size rules for the HOME screen (phone, tablet, short laptop screens).
   Must load after home.css and BEFORE views.css (load order matters, see Doc/Elements/Responsive Layout.md) */
@media(max-width:980px){
  .main{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:10px}
  .left{padding:20px;gap:12px}
  .photo{width:clamp(112px,16vw,150px)}   /* tablets: scales with the screen (~123px on an iPad, ~128px on a Tab S7) */
  .right{gap:10px}
  .lead{max-width:520px}
  .tech-sub{display:none}
  .tech-card{min-height:250px}
}
@media(min-width:681px) and (max-width:980px){
  .page{height:auto;min-height:100dvh}
  .pg{flex:none;height:205px}
  .tile{min-height:78px;padding:10px 12px}
  .tb small{display:none}
  .tech-card{min-height:0}
  .facts-row{display:none}
  .photo{width:clamp(112px,16vw,150px)}
}
@media(max-width:680px){
  .page{padding-inline:10px}
  .topbar{min-height:38px}
  .top-meta .hide-m{display:none}
  .main{padding:6px 0;gap:8px}
  .left{padding:16px;border-radius:22px}
  .profile-top{align-items:center}
  .photo{width:66px}
  .photo::after{font-size:6px;bottom:7px;padding:4px 5px}
  h1{font-size:clamp(2.7rem,13vw,4.2rem);margin:8px 0 4px}
  .lead{font-size:.76rem;line-height:1.4}
  .identity{padding-top:10px}
  .identity .location{font-size:.62rem}
  .identity .status{font-size:.56rem}
  .right{gap:8px}
  .tech-card{padding:16px;border-radius:22px}
  .tech-title{font-size:1.55rem}
  .pg{margin-bottom:8px;gap:6px;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .tech-title,.tech-sub{display:none}
  .read{min-height:0;padding:9px 12px}
  .tiles{grid-template-columns:repeat(4,1fr);gap:6px}
  .tile{flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:74px;padding:8px 2px;border-radius:16px;gap:6px}
  .tt{justify-content:center}
  .tt .ix{display:none}
  .gl{width:30px;height:30px;border-radius:10px}
  .tb small{display:none}
  .tb b{font-size:.64rem;letter-spacing:-.01em}
  .bottom{min-height:26px;font-size:.55rem}
  .bottom-links{gap:10px}
}
/* Slide dots for the phone skill graph (js/radar.js); only shown on phones, below */
.pg-dots{display:none}
.pg-dots button{width:22px;height:22px;padding:0;border:0;background:none;display:grid;place-items:center}
.pg-dots button::before{content:"";width:6px;height:6px;border-radius:99px;background:#4a4a43;transition:width .3s cubic-bezier(.2,.7,.2,1),background .3s}
.pg-dots button[aria-selected=true]::before{width:18px;background:var(--green)}
/* Phones: the bars and the radar are two slides in the same spot (js/radar.js swipes / auto-advances).
   .side is "unwrapped" so the bars and the readout become direct cells of .pg: row 1 = both slides
   stacked (only one in view), row 2 = the readout. .s1 = radar showing. Docs: Doc/Elements/Skill Graph.md */
@media(max-width:680px){
  .pg{overflow:hidden;touch-action:pan-y}
  .side{display:contents}
  .stats2,.chart{grid-area:1/1;transition:translate .55s cubic-bezier(.2,.7,.2,1),opacity .55s ease}
  .stats2{justify-content:space-evenly;padding:0 2px}
  .read{grid-area:2/1}
  .chart{translate:100vw 0;opacity:0}
  .pg.s1 .stats2{translate:-100vw 0;opacity:0}
  .pg.s1 .chart{translate:0 0;opacity:1}
  .pg.drag :is(.stats2,.chart){transition:none;opacity:1}
  .pg-dots{display:flex;gap:6px;align-self:center}
}
@media(max-width:680px){
  .identity,.facts-row{display:none}
  .lead{font-size:.74rem;line-height:1.4}
  h1{font-size:clamp(2.3rem,11vw,3rem);margin:6px 0 4px}
  h1 .l{display:inline-block;margin-right:.16em}
  .title{margin-bottom:6px;font-size:.82rem}
  .ticker{height:28px}
  .tk{font-size:9px}
  .tech-title{font-size:1.3rem}
  .tech-card{padding:14px 16px;min-height:190px}
}
@media(max-width:680px) and (max-height:760px){
  .tech-title,.profile-top{display:none}   /* the intro stays: on phones it is one short line + "…" */
  .read small{display:none}
  .read{padding:7px 12px}
  .stats2{justify-content:space-between;padding:2px 2px 4px}   /* all 7 bars fit the short card */
  .srow{padding:0;font-size:9.5px;line-height:1.15}
  .srow .sb{height:5px}
  .tile{min-height:64px}
  .left{padding:14px}
}
@media(max-width:430px){.bottom-links{display:none}}

@media(min-width:981px) and (max-height:780px){
  .lead{font-size:.9rem;line-height:1.45}
  .facts-row{display:none}
  .tile{min-height:80px;padding:10px 12px}
  .tb small{display:none}
  .tech-sub{display:none}
}
@media(min-width:981px) and (max-height:660px){
  .lead{display:none}
  .tile{min-height:64px}
  .gl{width:28px;height:28px;border-radius:10px}
}
@media(max-width:980px) and (max-height:520px){
  .page{height:auto;min-height:0}
  .main{grid-template-rows:auto auto}
  .tech-card{min-height:330px}
  .lead,.facts-row{display:none}
}
@media(max-width:380px){
  .hide-xs{display:none}
  .page{padding-inline:8px}
  .brand{font-size:.74rem}
  .tile{min-height:66px}
  .tb b{font-size:.6rem}
}

/* Tablets (touch only, nothing that can hover): the photo is shown large, at 2x the normal size
   (computers zoom it to 2.3x on hover, css/home.css). html:not(.mouse) drops this the moment a real
   mouse/trackpad moves (js/profile-pop.js), so touchscreen laptops get the normal photo + hover zoom. Sideways, the intro collapses to one line + "…" (css/home.css) to make room.
   Tapping the photo opens the summary (js/profile-pop.js). */
@media(any-hover:none) and (min-width:681px) and (max-width:980px){
  html:not(.mouse) .photo{width:calc(2*clamp(112px,16vw,150px))}        /* upright: ~240px iPad, ~250px Galaxy Tab */
}
@media(any-hover:none) and (min-width:981px){
  html:not(.mouse) .photo{width:calc(2*clamp(84px,min(11vw,15vh),165px))}   /* sideways: ~200-210px, ~280px on tall tablets */
}