/* apps shared v6 — phone fit, thumb dock, readability + native tab strip (t1001/t1007/t1010) */
html{height:100%;height:100dvh;overflow-x:hidden}
html,body{max-width:100%;overscroll-behavior-y:contain;-webkit-text-size-adjust:100%}
body{min-height:100%;min-height:100dvh;min-height:100svh;overflow-x:hidden}
.phone,main.phone,#app,.app-shell{width:100%;max-width:100vw;min-height:100%;min-height:100dvh;overflow-x:hidden;box-sizing:border-box;position:relative}
.screen{box-sizing:border-box;max-width:100%}
.screen.app{
  padding-bottom:calc(160px + env(safe-area-inset-bottom,0px))!important;
  height:100%;max-height:100dvh;min-height:0;
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;box-sizing:border-box;
  scroll-padding-bottom:calc(108px + env(safe-area-inset-bottom,0px));
}

/* Readability floors — body ≥17, secondary ≥16, labels ≥13, ~1.5 lh */
body,.screen,.lede,p,li,label,.opt .lbl,.deck p,.prompt,.flash .q{font-size:max(17px,1em);line-height:1.5}
.lede,.sub,.meta,.opt .sub,.disclaimer,.hint,small,.card p{font-size:max(16px,.94em)!important;line-height:1.5;opacity:1}
.eyebrow,.legal,.badge,.tabs button,.tabs nav button,nav.tabs button,.chip,.wtag{font-size:max(13px,.8em)!important;line-height:1.35}
:root{--muted-strong:color-mix(in srgb, var(--ink, #111) 62%, transparent)}

/* Bottom dock: thumb reach, 48px+ targets, clear active — fixed from first paint */
.tabs{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;z-index:50!important;
  padding:0 10px calc(8px + env(safe-area-inset-bottom,0px))!important;pointer-events:none;display:none;
  background:transparent!important;transform:none!important}
.tabs.on{display:block!important}
.tabs .mast{display:none!important}
.tabs nav, .tabs > nav, nav.dock{
  pointer-events:auto;display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(56px,1fr));
  grid-auto-flow:column; gap:2px;align-items:stretch;
  min-height:56px;max-height:72px;padding:6px 4px!important;border-radius:22px;position:relative;
  box-sizing:border-box; width:100%}
.tabs button, .tabs nav button, nav.dock button{
  min-height:48px!important;min-width:48px;padding:8px 4px 6px!important;
  font-size:max(12px,.75em)!important;font-weight:700!important;
  display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tabs button.on, .tabs nav button.on{transform:none}
/* Dock indicator — transform for 60fps follow */
.tabs .ind, .tabs #ind, .tabs #tabInd, nav .ind, #ind, #tabInd{
  will-change:transform,width; transition:none;
  left:0!important; /* position via transform */
}

/* Nested horizontal carousels — native scroll-snap, WebKit-friendly */
.h-scroll,.pages,[data-hscroll]{
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;touch-action:pan-x;
  scrollbar-width:none;will-change:scroll-position;
}
.h-scroll::-webkit-scrollbar,.pages::-webkit-scrollbar,[data-hscroll]::-webkit-scrollbar{display:none}
.h-scroll > *,.pages > .page,[data-hscroll] > *{
  scroll-snap-align:start;scroll-snap-stop:normal;
  flex:0 0 auto;
  will-change:transform;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.pages-wrap{position:relative}
.page-dots{display:flex;justify-content:center;gap:7px;padding:10px 0 2px;pointer-events:auto}
.page-dots i{width:7px;height:7px;border-radius:99px;background:rgba(128,100,70,.28);display:block;transition:transform .25s cubic-bezier(.22,1.2,.36,1),background .25s;cursor:pointer}
.page-dots i.on{background:rgba(28,20,16,.85);transform:scale(1.25)}

/* ===== t1010u: native horizontal tab strip (compositor-driven) ===== */
.v6-strip{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:row;align-items:stretch;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-snap-stop:always;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:none;
  scrollbar-width:none;
  touch-action:pan-x;
  visibility:hidden;pointer-events:none;
  background:inherit;
}
.v6-strip::-webkit-scrollbar{display:none}
.phone.v6-tabs-on > .v6-strip,
body.v6-tabs-on > .v6-strip{
  visibility:visible;pointer-events:auto;
}
/* Each tab pane: full viewport, own vertical scroll; no heavy effects while moving */
.v6-strip > .screen,
.v6-strip > .v6-pane{
  flex:0 0 100%!important;
  width:100%!important;max-width:100%!important;
  height:100%!important;max-height:100%!important;min-height:0!important;
  scroll-snap-align:start;scroll-snap-stop:always;
  overflow-x:hidden!important;overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  overscroll-behavior-x:none;
  touch-action:pan-y;
  contain:layout paint;
  box-sizing:border-box!important;
  display:flex!important;flex-direction:column!important;
  animation:none!important;
  /* kill hitch magnets on moving panes */
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  filter:none!important;
  box-shadow:none!important;
  will-change:scroll-position;
  padding-bottom:calc(160px + env(safe-area-inset-bottom,0px))!important;
}
/* Keep all 4–5 tab panes painted — avoids content-visibility reveal spikes */
.v6-strip > .screen{
  content-visibility:visible;
}
/* When strip is active, non-strip screens stay hidden via .on as usual */
.phone.v6-tabs-on > .screen{display:none!important}

@media (prefers-reduced-motion:reduce){
  .v6-strip{scroll-behavior:auto}
  .tabs .ind,#ind,#tabInd,.screen,.sheet,.page-dots i{transition:none!important;animation:none!important}
}

/* Sheets: grab handle affordance */
.sheet{touch-action:none}
.sheet::before{content:"";display:block;width:40px;height:5px;border-radius:99px;background:rgba(128,128,128,.45);margin:4px auto 10px}

/* Edge-back affordance */
.v6-edge{position:fixed;left:0;top:0;bottom:0;width:20px;z-index:60;pointer-events:auto;touch-action:none}

/* v6.1 readability enforce */
html body, html body .screen, html body .screen.on, html body .lede, html body p, html body .opt .lbl, html body .prompt, html body .flash .q{
  font-size:17px!important; line-height:1.5!important;
}
html body .lede, html body .sub, html body .meta, html body .opt .sub, html body .hint, html body .disclaimer, html body .card p, html body small{
  font-size:16px!important; line-height:1.5!important;
  color: inherit;
}
html body .eyebrow, html body .legal, html body .badge, html body .lang, html body .tabs button, html body .tabs nav button, html body nav button{
  font-size:13px!important; line-height:1.35!important;
}
html body{--muted: color-mix(in srgb, var(--ink,#111) 58%, #888)!important}

/* v7 contrast: keep dock text on theme tokens */
html body .tabs button{color:var(--muted)!important}html body .tabs button.on{color:var(--ink)!important}