/* responsive.css — tablet (panel below), touch targets, mobile (rails · pan/zoom viewport · bottom sheet) */

/* tablet: drawing above, panel below */
@media (max-width:1180px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .panel{position:static;max-height:none}
  .top{grid-template-columns:auto minmax(0,1fr)}
  .meta{grid-column:1/-1;width:auto;border-left:0;border-top:1.5px solid var(--ink);padding:12px 0 0;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 18px}
  .meta .mi{display:block}
  .meta dt{padding-top:0}
}

/* touch targets ≥ 44px wherever the pointer is coarse or the screen is tablet-sized */
@media (max-width:1024px),(pointer:coarse){
  .btn,.btn.sm,.views .btn,.pair,.ref,.sw-sel,.back{min-height:44px}
  .ref{padding:0 10px}
  .zoomctl .btn{min-width:48px}
  .tb tr[data-ref] td{padding-top:12px;padding-bottom:12px}
  .evrow{padding:12px 0}
}
@media (pointer:coarse){
  .h-desk{display:none}
  .h-touch{display:inline}
  #tip{display:none!important}
}

/* ---------------- mobile ---------------- */
@media (max-width:768px){
  :root{--gut:16px}
  html,body{overflow-x:hidden;max-width:100vw}
  .wrap{padding:14px var(--gut) 104px;max-width:100vw;overflow-x:clip}
  .wrap>*,.layout>*{max-width:100%}

  /* compressed header */
  .top{grid-template-columns:minmax(0,1fr);gap:10px}
  .badge{width:auto;min-height:0;flex-direction:row;align-items:baseline;gap:8px;justify-self:start;padding:7px 10px}
  .badge small{font-size:12px}
  .badge b{font-size:22px;line-height:1;letter-spacing:-.02em}
  .titles h1{font-size:26px;line-height:.94}
  .titles h1 span{display:block}
  .titles .sub{font-size:13px;margin-top:6px;line-height:1.35}
  .meta dd>span{display:none}
  .meta dt{font-size:12px;line-height:1.2}
  .hint{display:none}
  .titles .kick{display:none}
  .meta{grid-column:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;padding-top:10px}
  .meta dd{font-size:13px}
  .rule{margin:14px 0 12px;height:2px}

  /* view tabs → swipe rail */
  .views{width:100%;border-left:0;border-right:0;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;margin-bottom:12px}
  .views .btn{scroll-snap-align:start;padding:0 16px;font-size:13px;min-height:48px}

  /* toolbars → horizontal filter rails (edge to edge, last item never clipped) */
  .row{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    margin:0 calc(-1*var(--gut)) 8px;padding:0 var(--gut) 2px;max-width:none;width:calc(100% + 2*var(--gut))}
  .row::-webkit-scrollbar{display:none}
  .row::after{content:'';flex:0 0 calc(var(--gut) - 8px)}
  .row>*{flex:0 0 auto;scroll-snap-align:start}
  .row,.views{scroll-padding-inline:var(--gut)}
  .row .lab{min-width:0;padding-right:4px}
  .sep{margin:0 2px}
  .hint{font-size:13px;margin:4px 0 12px}

  /* stage: drawing edge to edge, controls above */
  .stagebar{align-items:stretch}
  .stagebar h3{font-size:16px;flex:1 1 100%;min-width:0}
  .stagebar h3 small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stagebar{padding-top:8px}
  .stagectl{width:100%;justify-content:space-between}
  .stagebtns2{gap:6px}
  .dwrap{margin:8px calc(-1*var(--gut)) 0;width:calc(100% + 2*var(--gut));max-width:none;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .legend{gap:6px 12px}

  /* lower area */
  .reg{grid-template-columns:minmax(0,1fr)}
  .reg>span{padding-top:0}
  .tbwrap{max-height:60vh}
  .tbwrap table{min-width:560px}
  .blocks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .blocks>div:nth-child(2){border-right:0}
  .blocks>div:nth-child(-n+2){border-bottom:1.5px solid var(--ink)}
  .phrows>div{grid-template-columns:minmax(0,1fr) 60px 60px;gap:8px}
  .phrows>div>span:nth-child(2),.phrows>div>span:nth-child(5){display:none}
  .strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .strip div{padding:12px 10px 12px 0;border-bottom:1px solid var(--rule)}
  .strip b{font-size:36px}
  .projline{margin-top:24px}

  /* information panel → bottom sheet */
  .panel{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:30;border:0;border-top:3px solid var(--ink);max-height:none;overflow:visible;display:flex;flex-direction:column;background:#fff;padding-bottom:env(safe-area-inset-bottom)}
  .sheet-bar{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:0 16px;border:0;background:var(--accent);color:var(--accent-ink);text-align:left;font:inherit;touch-action:none}
  .sheet-bar::before{content:'';position:absolute;left:50%;top:5px;width:36px;height:4px;margin-left:-18px;background:currentColor;opacity:.45}
  .sheet-bar .sb-code{font:800 16px var(--f-sans);white-space:nowrap}
  .sheet-bar .sb-name{font:500 13px var(--f-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
  .sheet-bar .sb-arrow{font:800 18px var(--f-sans);flex:0 0 auto}
  .panel-body{max-height:0;overflow:hidden;transition:max-height .28s ease}
  .panel.open .panel-body{max-height:calc(72vh - 56px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .panel.open{box-shadow:none}
  .ph{padding:16px}
  .ph .big{font-size:48px}
  .ph .h2{font-size:22px}
  .pb{padding:4px 16px 24px}
  .kv{grid-template-columns:104px minmax(0,1fr)}
  .rels .rk{min-width:100%}
}