/* Shakha — phone experience. Loaded after styles.css; everything here is scoped to html.narrow
   (the app's own "effective width under 900px" switch), so desktop is untouched.
   Sizes are in rem so the reader's text size still scales everything; layouts reflow by container width.
   Variables set by js/mobile.js:  --m-top-h (top bar)  --m-tab-h (tab bar)  --m-kb-h (keyboard)
   --m-vvh / --m-vvt (visible viewport)  --m-chart-lift (how far the tree controls rise above the tab bar). */

html.narrow{
  --tap:max(2.85rem,48px);
  --m-top-h:4.5rem; --m-tab-h:5.5rem; --m-kb-h:0px;
  --m-sheet-ease:cubic-bezier(.2,.8,.2,1);
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain; /* the app has its own pull to refresh; no browser reload */
  scroll-padding-top:calc(var(--m-top-h) + .75rem);
}
html.narrow body{overscroll-behavior-y:contain}
html.narrow :is(a,button,[role=button],label,summary,select,input,textarea){touch-action:manipulation}
html.narrow :is(.tabbar,.btn,.iconbtn,.pill,.seg,.tile,.item.click,.place,.pname,.m-hit){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.narrow :is(input,select,textarea){font-size:max(1rem,16px)} /* 16px or more: iPhones don't zoom into the field */
html.narrow :is(.tabbar a,.tile,.item,.btn,.pname,.place,.m-hit):is(a,button):not(:focus-visible){text-decoration:none}

/* press feedback: everything tappable gives a little */
html.narrow :is(.btn,.iconbtn,.pill,.item.click,.tile,.place,.tbl tr,.pname,.seg button,.m-hit):active{transform:scale(.97);transition-duration:60ms}
html.narrow .item.click:active,html.narrow .m-hit:active,html.narrow .tbl tr:active{background:var(--panel-2)}
@media (hover:none){
  html.narrow .tile:hover,html.narrow .place:hover{transform:none;box-shadow:none}
  html.narrow .btn:hover,html.narrow .iconbtn:hover{box-shadow:none}
}

/* ── top bar ─────────────────────────────────────────────────────────── */
.narrow .top{
  flex-wrap:nowrap;gap:.5rem;
  padding:max(.5rem,env(safe-area-inset-top)) max(.75rem,env(safe-area-inset-right)) .5rem max(.75rem,env(safe-area-inset-left));
}
.narrow .search-wrap{flex:1 1 auto;max-width:none;min-width:0}
.narrow .search-wrap input{cursor:pointer;caret-color:transparent;text-overflow:ellipsis;min-height:var(--tap)}
.narrow .search-wrap input::placeholder{color:var(--muted);opacity:1}
.narrow .top-actions{flex:none;gap:.5rem}
.narrow .top .btn{min-width:var(--tap);min-height:var(--tap);padding:.35rem;border-radius:999px}
/* very large text: the search field becomes a round button like its neighbours */
.m-tight.narrow .search-wrap{flex:none;width:var(--tap)}
.m-tight.narrow .search-wrap input{padding:0;color:transparent;border-radius:50%}
.m-tight.narrow .search-wrap input::placeholder{color:transparent}
.m-tight.narrow .search-wrap>.svg-i{left:50%;transform:translate(-50%,-50%)}
.m-tight.narrow .top-actions{margin-left:auto}
.narrow .a11y-pop{left:.75rem;right:.75rem;max-height:calc(100dvh - var(--m-top-h) - var(--m-tab-h) - 1rem);overscroll-behavior:contain}
.narrow .a11y-pop .pills>.pill{flex:1 1 auto}

/* ── page room: content never hides behind the bars ──────────────────── */
.narrow .view{
  padding:1.1rem max(1rem,env(safe-area-inset-right)) calc(var(--m-tab-h) + 1.5rem) max(1rem,env(safe-area-inset-left));
}
.narrow .banner{margin:.75rem 1rem 0}
.narrow .toasts{bottom:calc(var(--m-tab-h) + .75rem);max-width:calc(100vw - 1.5rem)}
.m-kb.narrow .toasts{bottom:calc(var(--m-kb-h) + .75rem)}
.m-kb.narrow .tabbar{display:none}

/* ── bottom tab bar ──────────────────────────────────────────────────── */
.narrow .tabbar{
  padding:.3rem max(.25rem,env(safe-area-inset-right)) max(.3rem,env(safe-area-inset-bottom)) max(.25rem,env(safe-area-inset-left));
  box-shadow:0 -6px 22px rgba(10,20,14,.22);border-top:1px solid rgba(255,255,255,.07);
}
.narrow .tabbar a{
  min-height:3.75rem;gap:.15rem;padding:.4rem .1rem .3rem;align-content:center;
  font-size:.78rem;line-height:1.15;font-weight:600;
  background:none!important;border-radius:.9rem;-webkit-tap-highlight-color:transparent;
  transition:color var(--dur-fast);
}
.narrow .tabbar a .lbl{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  white-space:normal;overflow:hidden;text-overflow:clip;text-align:center;text-wrap:balance;overflow-wrap:anywhere;max-width:100%;
}
.narrow .tabbar .svg-i{
  box-sizing:content-box;width:1.45rem;height:1.45rem;padding:.22rem .65rem;border-radius:999px;
  transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--spring);
}
.narrow .tabbar a[aria-current="page"]{color:var(--sand);font-weight:700}
.narrow .tabbar a[aria-current="page"] .svg-i{background:rgba(220,200,163,.2)}
.narrow .tabbar a:active .svg-i{transform:scale(.86)}
.narrow .tabbar a:active{transform:none}
.narrow .tabbar .count{top:.15rem;right:auto;left:calc(50% + .35rem);box-shadow:0 0 0 2px var(--side-bg)}
.narrow .tabbar a:focus-visible{outline-offset:-3px}

/* ── page furniture ──────────────────────────────────────────────────── */
.narrow .page-head{gap:.75rem;margin-bottom:1rem}
.narrow .page-head>div:first-child{flex:1 1 100%}
.narrow .page-head h1{font-size:clamp(1.5rem,6.5cqi,2.1rem);overflow-wrap:anywhere}
.narrow .page-head .actions{flex:1 1 100%}
.narrow .page-head .actions>.btn{flex:1 1 auto}
.narrow .page-head .seg{display:flex;width:100%}
.narrow .page-head .seg button{flex:1 1 0}
.narrow .section-title h2{font-size:1.15rem}
.narrow .card,.narrow .panel{padding:1rem 1.05rem;border-radius:1.1rem}
.narrow .pills>.pill{flex:1 1 auto;justify-content:center;text-align:center}
.narrow .pills.chiplist>*,.narrow .chiplist>.pill{flex:0 1 auto}
.narrow .toolbar{gap:.6rem}
.narrow .toolbar>:is(input,.input,label){flex:1 1 100%;max-width:none;min-width:0}
.narrow .toolbar>select{max-width:none;min-width:0}
.narrow .toolbar .grow{display:none}
.narrow .toolbar>select{flex:1 1 min(100%,11rem)} /* two drop-downs share a row when they fit */
.narrow .toolbar>.btn{flex:1 1 auto}
.narrow .empty{padding:1.5rem 1rem}

.narrow .tiles{grid-template-columns:minmax(0,1fr);gap:.7rem}
@container (min-width:17.5rem){.narrow .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.narrow .tile{padding:.9rem 1rem}
.narrow .tile b{font-size:2rem}
.narrow .welcome{padding:1.25rem}
.narrow .item{padding:.8rem .45rem;min-height:var(--tap);gap:.35rem .85rem}
.narrow .item .t{font-size:1.02rem}
.narrow .item .av.s{display:grid;font-size:.75rem} /* styles.css's ".item .s" (a text line) also matches the small avatar */
.narrow .item .end{justify-self:stretch;text-align:left}
.narrow .item .end select{width:100%}
.narrow .item .end .when{white-space:normal}
.narrow .more{display:inline-flex;align-items:center;min-height:var(--tap)}
.narrow[data-mview="more"] .item.click{grid-template-columns:auto minmax(0,1fr) auto;min-height:4rem;font-size:1.1rem}

/* sticky headings: History days and Calendar months stay in view while their rows scroll */
.narrow .day-h{position:sticky;top:var(--m-top-h);z-index:4;margin:.5rem -1rem 0;padding:.65rem 1rem .5rem;background:var(--bg)}
.narrow .month h3{position:sticky;top:var(--m-top-h);z-index:3;margin:-.35rem -.55rem .4rem;padding:.6rem .55rem;background:var(--panel);border-bottom:1px solid var(--rule);border-radius:1rem 1rem 0 0}
.narrow .occ{grid-template-columns:2.2rem auto minmax(0,1fr);padding:.7rem 0}
.narrow .occ>a.btn{grid-column:2/-1;justify-self:start}
.narrow .occ>span:empty{display:none}
.narrow .occ .day{font-size:1.45rem}
.narrow .q{padding:1rem 1rem 1rem 1.25rem}
.narrow .q .pills{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}
.narrow .act{padding:.8rem .85rem}
.narrow .act summary{display:flex;align-items:center;min-height:var(--tap)}
.narrow .facts dd a{display:inline-flex;align-items:center;min-height:var(--tap)}
/* small text links and chips: at least 44px tall (or 2.5rem when the text is large) */
.narrow{--m-hit:max(44px,2.5rem)}
.narrow .linkbtn{display:inline-flex;align-items:center;min-height:var(--m-hit);padding:0 .4rem;white-space:nowrap}
.narrow .occ a[data-act="open-person"],.narrow .item a[data-act="open-person"],.narrow .drawer a[href="#/history"]{display:inline-flex;align-items:center;min-height:var(--m-hit);padding-block:.1rem}
.narrow .drawer a[href="#/history"]{padding-inline:.15rem}

/* ── the Family table becomes a list of cards ────────────────────────── */
.narrow .tbl{background:none;border:0;border-radius:0;overflow:visible}
.narrow .tbl table,.narrow .tbl tbody{display:block}
.narrow .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.narrow .tbl tbody{display:grid;gap:.75rem}
.narrow .tbl tr{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 1rem;align-items:start;
  padding:.85rem 1rem;background:var(--panel);border:1px solid var(--rule);border-radius:1.1rem;box-shadow:var(--shadow-sm);
}
.narrow .tbl td{display:block;min-width:0;padding:0;border:0;overflow-wrap:anywhere}
.narrow .tbl td.wide{display:block}
.narrow .tbl td:empty,.narrow .tbl td.m-empty{display:none}
.narrow .tbl td:first-child{grid-column:1/-1}
.narrow .tbl td:first-child .pname{display:flex;width:100%;margin:0;padding:.1rem .25rem .1rem .1rem}
.narrow .tbl td:first-child .nm{font-size:1.15rem}
.narrow .tbl td:first-child .av{width:3rem;height:3rem;font-size:1rem}
.narrow .tbl td[data-label]::before{content:attr(data-label);display:block;font-size:.78rem;font-weight:700;color:var(--faint);margin-bottom:.05rem}
.narrow .tbl td:first-child::before{display:none}
.narrow .tbl td.rel,.narrow .tbl td:has(.meter),.narrow .tbl td:has(.iconbtn){grid-column:1/-1}
.narrow .tbl td.rel{font-size:1rem;color:var(--fg)}
.narrow .tbl td:has(.meter)::before{display:none}
.narrow .tbl td:has(.iconbtn){display:flex;flex-wrap:wrap;gap:.5rem}
.narrow .tbl td:has(.iconbtn)::before{display:none}
.narrow .tbl td .iconbtn{width:auto;min-width:var(--tap);padding:0 1.1rem;gap:.55rem;display:inline-flex;align-items:center;border:1.5px solid var(--rule-strong);background:var(--panel-2);border-radius:999px;font-weight:600;font-size:1rem}
.narrow .tbl td .iconbtn::after{content:attr(aria-label);text-decoration:none}
.narrow .tbl td .iconbtn,.narrow .tbl td .iconbtn:hover{text-decoration:none}
.narrow .tbl .meter{width:100%!important}
.narrow .foot-note{text-align:center}

/* ── tree: floating controls within thumb reach, above the tab bar ───── */
.narrow .chart{overscroll-behavior:contain;-webkit-user-select:none;user-select:none;min-height:0} /* its height comes from fitChartHeight(): window minus the tab bar */
.narrow .view.full{padding:0}
html.narrow:has(#view.full){overflow:hidden} /* the tree owns every drag and pinch: the page itself never scrolls */
/* Fit and Find-me only (pinch zooms), one column at the bottom right: it sits below the tools panel and above the tab bar */
.narrow .chart-ctl{
  left:auto;right:max(.75rem,env(safe-area-inset-right));bottom:calc(.8rem + var(--m-chart-lift,0px));
  max-width:none;flex-direction:column;gap:.55rem;
}
.narrow .chart-ctl [data-act="chart-zoom"]{display:none}
.narrow .chart-ctl .iconbtn{width:3.1rem;height:3.1rem;border-radius:1rem;box-shadow:var(--shadow)}
/* tools panel: starts after the vertical timeline, never wider than what is left of the screen, two slim rows */
.narrow .tree-tools{
  left:calc(var(--axis-w,0px) + max(.6rem,env(safe-area-inset-left)));
  max-width:calc(100% - var(--axis-w,0px) - 1.2rem);
  grid-template-columns:minmax(0,1fr);gap:4px;padding:5px;border-radius:.9rem;
}
.narrow .tree-tools>*{min-width:0}
.narrow .tree-tools{--m-hit:44px} /* fixed-size touch targets here: the panel must not grow with the text size */
.narrow .tt-row{flex-wrap:wrap;gap:4px}
.narrow .tt-row>.seg,.narrow .tt-row>.iconbtn{flex:none}
.narrow .tt-row .seg{padding:2px;gap:2px}
/* the branch picker takes the rest of the row; if even 9rem of label will not fit (vertical timeline on a small phone) it drops to a row of its own */
.narrow .tt-row .menu{flex:1 1 9rem;min-width:0;order:3}
.narrow .tt-row>.seg{order:1}.narrow .tt-row>.iconbtn{order:2}
.narrow .tt-branch{width:100%;max-width:none;min-width:0;justify-content:flex-start;padding-inline:.6rem;gap:.4rem}
.narrow .tt-branch .tt-show{flex:1 1 auto;min-width:0;text-align:left}
.narrow .tree-tools .seg button{min-height:var(--m-hit);min-width:var(--m-hit);padding:.2rem .35rem}
.narrow .tt-row .iconbtn{width:var(--m-hit);height:var(--m-hit);min-width:0;min-height:0;padding:0}
.narrow .tt-branch{min-width:var(--m-hit);min-height:var(--m-hit)}
.narrow .tt-gens{
  flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x;
  scrollbar-width:none;gap:5px;padding:2px 3px;margin:-2px -3px;-webkit-overflow-scrolling:touch;
}
.narrow .tt-gens::-webkit-scrollbar{display:none}
.narrow .tt-gens>*{flex:none}
.narrow .tt-label{white-space:nowrap}
.narrow .gen-pill{min-width:var(--m-hit);min-height:var(--m-hit)}
.narrow .chart-hint{display:none}
/* ── Places: map fills the screen, the list is a bottom sheet over it ── */
html.narrow:has(#view .places){overflow:hidden}
.narrow #view:has(.places){
  position:relative;max-width:none;margin:0;padding:0;overflow:hidden;
  height:calc(100vh - var(--m-top-h) - var(--m-tab-h));height:calc(100dvh - var(--m-top-h) - var(--m-tab-h));
}
.narrow #view:has(.places) .page-head{position:absolute;z-index:700;top:.6rem;left:max(.6rem,env(safe-area-inset-left));right:max(.6rem,env(safe-area-inset-right));margin:0;pointer-events:none}
.narrow #view:has(.places) .page-head>div:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.narrow #view:has(.places) .page-head .actions{pointer-events:auto}
.narrow #view:has(.places) .page-head .seg{background:var(--panel);box-shadow:var(--shadow);border-color:var(--rule-strong)}
.narrow .places{position:absolute;inset:0;display:block;--m-sheet-h:8.5rem}
.narrow .places .map{position:absolute;inset:0;height:auto;min-height:0;border:0;border-radius:0}
.narrow .places .map-empty{bottom:calc(var(--m-sheet-h) + 1rem)}
.narrow .place-list{
  position:absolute;left:0;right:0;bottom:0;z-index:650;height:var(--m-sheet-h);max-height:none;
  display:flex;flex-direction:column;gap:.6rem;padding:0 max(.75rem,env(safe-area-inset-right)) 1rem max(.75rem,env(safe-area-inset-left));
  background:var(--panel);border:1px solid var(--rule);border-bottom:0;border-radius:1.5rem 1.5rem 0 0;box-shadow:0 -8px 28px rgba(15,26,19,.24);
  overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;transition:height .32s var(--m-sheet-ease);
}
.narrow .place-list>*{flex:none}
.narrow .place-list[data-m-state="peek"],.narrow .place-list[data-m-state="half"]{overflow-y:hidden}
.narrow .place-list.m-drag{transition:none;overflow-y:hidden}
.narrow .m-grab{position:sticky;top:0;z-index:2;display:grid;place-items:center;height:1.9rem;margin:0 -.75rem;background:var(--panel);touch-action:none;cursor:grab}
.narrow .m-grab::before{content:"";width:3rem;height:.32rem;border-radius:9px;background:var(--rule-strong)}
.narrow .place{padding:.8rem 1rem;min-height:var(--tap)}
.narrow .place.on{transform:none;background:var(--moss-soft);border-color:var(--moss)}
.narrow .places .leaflet-bottom.leaflet-right{bottom:min(var(--m-sheet-h),70%);transition:bottom .32s var(--m-sheet-ease)}
.narrow .places .leaflet-top.leaflet-left{left:auto;right:0;top:4.3rem}
.narrow .places .leaflet-left .leaflet-control{float:right;margin-left:0;margin-right:.6rem}
.narrow .places .leaflet-bar a{width:2.9rem!important;height:2.9rem!important;line-height:2.9rem!important;font-size:1.3rem}

/* ── profile: a full-screen sheet ────────────────────────────────────── */
.narrow .scrim{background:transparent}
.narrow .drawer{
  inset:0;width:100%;max-width:none;height:100dvh;box-shadow:none;
  padding-bottom:var(--m-kb-h,0px);will-change:transform;
  animation:m-slide-in var(--dur-slow) var(--ease-out);
}
html.vt-drawer.narrow .drawer{animation:m-fade var(--dur) var(--ease)} /* the avatar flies in; the sheet only fades */
.narrow .drawer.closing{animation:m-slide-out var(--dur) var(--ease) forwards}
.narrow .drawer.closing.m-dir-y{animation-name:m-slide-out-y}
@keyframes m-slide-in{from{transform:translateX(100%)}}
@keyframes m-slide-out{to{transform:translateX(100%)}}
@keyframes m-slide-out-y{to{transform:translateY(100%)}}
@keyframes m-fade{from{opacity:0}}
.narrow .d-head{
  flex-wrap:nowrap;gap:.5rem;min-height:calc(var(--tap) + 1.1rem);
  padding:max(.8rem,calc(env(safe-area-inset-top) + .4rem)) max(.75rem,env(safe-area-inset-right)) .5rem max(.75rem,env(safe-area-inset-left));
  background:var(--bg);backdrop-filter:none;
}
.narrow .d-head::before{content:"";position:absolute;top:max(.3rem,env(safe-area-inset-top));left:50%;width:2.6rem;height:.28rem;border-radius:9px;background:var(--rule-strong);transform:translateX(-50%);pointer-events:none}
.narrow .d-head>.iconbtn:first-child{border:1.5px solid var(--rule-strong);background:var(--panel)}
.narrow .d-body{padding:1rem max(1rem,env(safe-area-inset-right)) calc(5rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));gap:1rem}
.narrow .d-body>.pills>.btn{flex:1 1 auto}
.narrow .hero h2{font-size:1.6rem;overflow-wrap:anywhere}
/* menus keep to the space above the tab bar (mobile.js measures the exact room) and scroll inside */
.narrow .menu-pop{
  max-width:min(calc(100vw - 1.5rem),var(--m-pop-w,100vw));
  max-height:var(--m-pop-max,calc(100dvh - var(--m-top-h) - var(--m-tab-h) - 1.5rem));
  overflow-y:auto;overscroll-behavior:contain;
}
.narrow .tt-pop{min-width:min(16rem,100%)}
.narrow .menu-pop button{white-space:normal}

/* ── modals: bottom sheets ───────────────────────────────────────────── */
.narrow .modal-wrap{padding:0;place-items:end stretch;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);background:rgba(14,22,17,calc(.5 * var(--m-dim,1)));animation:m-fade var(--dur) var(--ease)}
.m-kb.narrow .modal-wrap{inset:auto;left:0;right:0;top:var(--m-vvt,0px);height:var(--m-vvh,100%)} /* follows the part of the screen above the keyboard */
.narrow .modal,.narrow .modal.wide{
  width:100%;max-height:min(94dvh,100%);min-height:0;border-radius:1.5rem 1.5rem 0 0;
  animation:m-sheet-up var(--dur-slow) var(--m-sheet-ease);overscroll-behavior:contain;
}
.narrow .modal.m-leaving{animation:m-sheet-down .2s var(--ease) forwards}
.narrow .modal::before{content:"";flex:none;width:2.8rem;height:.32rem;margin:.6rem auto 0;border-radius:9px;background:var(--rule-strong)}
@keyframes m-sheet-up{from{transform:translateY(100%)}}
@keyframes m-sheet-down{to{transform:translateY(100%)}}
.narrow .modal header{padding:.45rem .85rem .5rem 1.25rem;touch-action:none}
.narrow .modal header h2{font-size:1.35rem;overflow-wrap:anywhere}
/* a long intro never pushes the form off the sheet: the header scrolls inside itself past 40% of the screen */
.narrow .modal header{flex:none;max-height:40dvh;overflow-y:auto;overscroll-behavior:contain}
/* large text: the avatar and the close button share the first row, so the title keeps the full width */
@container (max-width:21rem){
  .narrow .modal header:has(>.av){display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:.6rem}
  .narrow .modal header:has(>.av)>.av{grid-row:1;grid-column:1}
  .narrow .modal header:has(>.av)>div{grid-row:2;grid-column:1/-1}
  .narrow .modal header:has(>.av)>.iconbtn{grid-row:1;grid-column:3}
}
.narrow .modal .m-body{padding:.5rem 1.25rem 1.25rem;overscroll-behavior:contain;scroll-padding-bottom:6rem;-webkit-overflow-scrolling:touch}
.narrow .modal footer{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:.6rem;align-items:stretch;
  padding:.75rem 1rem max(.75rem,env(safe-area-inset-bottom));border-radius:0;box-shadow:0 -6px 16px rgba(15,26,19,.07);
}
.narrow .modal footer .left{grid-column:1/-1;margin:0}
/* the extra action ("Remove this marriage link") moves to the end of the form on phones, and goes away while typing */
.narrow .modal .m-body>.left.m-moved{display:block;margin:.25rem 0 0;padding-top:.9rem;border-top:1px solid var(--rule)}
.narrow .modal .m-body>.left.m-moved .btn{width:100%;min-height:3.3rem;white-space:normal}
.m-kb.narrow .modal .m-body>.left.m-moved{display:none}
.narrow .modal footer .btn{width:100%;min-height:3.3rem;padding-inline:.5rem;white-space:normal;line-height:1.2}
.narrow .modal footer>.btn:only-of-type:not(.primary):not(.danger){grid-column:1/-1}
.narrow .modal .pills{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr))}
.narrow .modal .pills>.pill{justify-content:center;text-align:center}
.narrow .modal .check{min-height:var(--tap)}
.narrow .modal .check input{width:1.6rem;height:1.6rem}
@container (min-width:19.5rem){
  .narrow .date{grid-template-columns:minmax(3.4rem,.8fr) minmax(0,1.7fr) minmax(4.2rem,1fr)}
  .narrow .date label:first-child{grid-column:auto}
}
.narrow .date select,.narrow .date input{padding-left:.55rem;padding-right:.35rem}
.narrow .picker-list{max-height:min(16rem,32dvh)}

/* ── full-screen search ──────────────────────────────────────────────── */
.m-search{position:fixed;inset:0;z-index:65;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);animation:m-fade var(--dur) var(--ease)}
.m-search-bar{display:flex;align-items:center;gap:.4rem;padding:max(.6rem,env(safe-area-inset-top)) max(.6rem,env(safe-area-inset-right)) .6rem max(.75rem,env(safe-area-inset-left));border-bottom:1px solid var(--rule)}
.m-search-field{position:relative;flex:1;min-width:0;display:block}
.m-search-field .svg-i{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.m-search-field input{width:100%;min-height:3.5rem;padding:.5rem 1rem .5rem 3rem;border:2px solid var(--rule-strong);border-radius:999px;background:var(--panel);font-size:max(1.15rem,16px)}
.m-search-field input:focus{outline:none;border-color:var(--moss);box-shadow:0 0 0 4px var(--moss-soft)}
.m-search-cancel{flex:none}
.m-search-list{flex:1;overflow:auto;overscroll-behavior:contain;padding:.4rem max(.6rem,env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom)) max(.6rem,env(safe-area-inset-left))}
.m-search-h{font-size:.85rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:.8rem .6rem .3rem}
:lang(bn) .m-search-h,:lang(hi) .m-search-h{text-transform:none;letter-spacing:0;font-size:.95rem}
.m-hit{display:flex;align-items:center;gap:1rem;width:100%;min-height:4.6rem;padding:.6rem .7rem;border:0;border-radius:1.1rem;background:none;text-align:left;color:inherit;transition:background var(--dur-fast),transform var(--dur-fast) var(--spring)}
.m-hit .av{width:3.25rem;height:3.25rem;font-size:1.05rem}
.m-hit>span:last-child{min-width:0;display:block}
.m-hit b{display:block;font-size:1.2rem;line-height:1.3;overflow-wrap:anywhere}
.m-hit i{font-style:normal;font-weight:400;color:var(--muted)}
.m-hit small{display:block;margin-top:.1rem;font-size:.95rem;color:var(--muted);line-height:1.35}
.m-search-none{padding:1.25rem .75rem;color:var(--muted);font-size:1.05rem}
.m-search-none .btn{margin-left:.4rem}

/* ── pull to refresh ─────────────────────────────────────────────────── */
.m-ptr{position:fixed;left:50%;top:var(--m-top-h,4.5rem);z-index:15;width:2.8rem;height:2.8rem;margin-left:-1.4rem;pointer-events:none;
  transform:translateY(calc(var(--m-pull,0) * 1px - 3.2rem));opacity:min(1,calc(var(--m-pull,0) / 40));transition:transform .28s var(--ease-out),opacity .2s}
.m-ptr.pulling{transition:none}
.m-ptr-dot{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--panel);color:var(--moss-ink);border:1.5px solid var(--rule-strong);box-shadow:var(--shadow)}
.m-ptr .svg-i{width:1.4rem;height:1.4rem;transition:transform .15s}
.m-ptr.pulling .svg-i{transform:rotate(calc(var(--m-pull,0) * 4deg))}
.m-ptr.ready .m-ptr-dot{background:var(--forest);color:#FBF5E8;border-color:var(--forest)}
.m-ptr.busy .svg-i{animation:m-spin .8s linear infinite}
.m-ptr.done .m-ptr-dot{background:var(--sage-soft);color:var(--sage-ink)}
@keyframes m-spin{to{transform:rotate(360deg)}}
@media (display-mode:standalone){.m-ptr{top:calc(var(--m-top-h,4.5rem))}}

/* ── motion: every animation above goes quiet when the reader asks ───── */
:root[data-motion="reduced"] .m-ptr,:root[data-motion="reduced"] .m-ptr *,:root[data-motion="reduced"] .m-search,:root[data-motion="reduced"] .modal,:root[data-motion="reduced"] .drawer,:root[data-motion="reduced"] .place-list,
:root[data-motion="reduced"] .m-hit,:root[data-motion="reduced"] .tabbar *{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  :root:not([data-motion="full"]) .m-ptr,:root:not([data-motion="full"]) .m-ptr *,:root:not([data-motion="full"]) .m-search,:root:not([data-motion="full"]) .modal,:root:not([data-motion="full"]) .drawer,:root:not([data-motion="full"]) .place-list,
  :root:not([data-motion="full"]) .m-hit,:root:not([data-motion="full"]) .tabbar *{animation:none!important;transition:none!important}
}