/* Mock-up chrome on every page: the top strip, the Mode and Desktop/Phone controls, the More sheet, the toast, the phone frame.
   Linked after each page's own styles so the strip offset wins. */
:root{--strip:24px}
body{padding-top:calc(16px + var(--strip))}
.rail{top:calc(max(16px,env(safe-area-inset-top,0px)) + var(--strip))}
/* Rail labels sit clipped beside each icon at 76px; base.js adds .open (hover intent or keyboard focus) where a fine pointer can hover.
   The rail is fixed, so opening it lays it over the page without moving anything. */
.rail{align-items:stretch;padding-inline:14px;overflow-x:hidden}
.rail .logo,.rail .me{align-self:flex-start;margin-left:2px}
.rail a{width:auto;display:flex;align-items:center;gap:14px;padding-left:14px;overflow:hidden;white-space:nowrap}
.rail .rl{font-size:14px;font-weight:500;opacity:0}
.rail.pti-off{display:none}
@media (hover:hover) and (pointer:fine){
  .rail.open{width:224px;box-shadow:inset 0 0 0 1px var(--edge),0 18px 48px rgba(0,0,0,.3)}
  .rail.open .rl{opacity:1}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .rail{transition:width .2s ease-out,box-shadow .2s ease-out}
  .rail .rl{transition:opacity .08s}
  .rail.open .rl{transition:opacity .12s .1s}
}
.pti-strip{position:fixed;top:0;left:0;right:0;z-index:20;height:var(--strip);display:flex;align-items:center;justify-content:center;padding:0 16px;
  background:var(--page-glow),var(--page);background-attachment:fixed;color:var(--ink-3);font-size:12px;white-space:nowrap;overflow:hidden}

.review .sep{flex:none}
@media (max-width:767.98px){.review .pti-v{display:none}}
/* Desktop: the controls sit bottom-right, clear of the centred phone frame. */
@media (min-width:768px){.review{left:auto;right:16px;bottom:16px;transform:none}}
/* 44px tap targets that still look 32px: the bar loses its vertical padding and each button gains a clear 6px border. */
.review{padding-block:0}
.review button{height:44px;border-block:6px solid transparent;background-clip:padding-box}
/* Under 768px the floating bar goes; phones run in dark. */
@media (max-width:767.98px){.review{display:none}}
/* A table still wider than its card on a phone fades at the right edge, so the hidden columns read as scrollable. */
.tw.pti-more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}

.pti-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(70px + env(safe-area-inset-bottom,0px));z-index:12;
  background:var(--card);color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13px;white-space:nowrap;
  box-shadow:0 8px 30px rgba(0,0,0,.18);pointer-events:none}
.pti-toast:empty{display:none}
@media (max-width:760px){.pti-toast{bottom:calc(128px + env(safe-area-inset-bottom,0px))}}

button.lk{width:100%;text-align:left}
.tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--ink-3);min-height:44px;justify-content:center;width:100%}
.tabbar button[aria-current="page"]{color:var(--ink);font-weight:600}
/* The More sheet matches the app: a "More" title with a close button, then the five pages as a 3-across card grid. */
.more-sheet{position:fixed;left:0;right:0;bottom:calc(61px + env(safe-area-inset-bottom,0px));z-index:11;background:var(--card);border-top:1px solid var(--line);
  border-radius:16px 16px 0 0;padding:16px 16px 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.more-sheet[hidden]{display:none}
/* Dark backdrop behind the open sheet, as in the app. */
.more-backdrop{position:fixed;inset:0;z-index:10;background:rgba(0,0,0,.6)}
.more-backdrop[hidden]{display:none}
.more-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.more-head b{font-size:18px;font-weight:600;color:var(--ink)}
.more-head button{width:44px;height:44px;margin:-10px -10px -10px 0;border-radius:999px;display:grid;place-items:center;color:var(--ink-2)}
.more-head button .i{width:18px;height:18px}
.more-sheet a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:80px;border-radius:12px;background:var(--raised);
  color:var(--ink);text-decoration:none;font-size:12px;font-weight:500}
.more-sheet a .i{width:20px;height:20px}
.more-sheet a[aria-current="page"]{box-shadow:inset 0 0 0 1px var(--fill);background:var(--tint);color:var(--fill)}


/* Desktop "Phone" view: the page itself is hidden and shown again at phone size in a frame. */
html.pti-host body>:not(.pti-strip):not(.review):not(.pti-phone):not(.pti-toast){display:none!important}
/* The phone is always drawn whole: base.js sets --pscale so 844px fits the window below the strip, and the host never scrolls. */
html.pti-host,html.pti-host body{overflow:hidden;height:100%}
html.pti-host body{box-sizing:border-box;padding-bottom:0}
.pti-phone{--pscale:1;width:calc(390px * var(--pscale));height:calc(844px * var(--pscale));margin:0 auto;border-radius:calc(44px * var(--pscale));overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.pti-phone iframe{display:block;width:390px;height:844px;border:0;transform:scale(var(--pscale));transform-origin:0 0}
html.pti-in-frame .pti-strip,html.pti-in-frame .review{display:none}
html.pti-in-frame body{padding-top:16px}