/* Shared poster style for every tool: fonts, tokens, grain, and the app nav bar. */
@font-face{font-family:"Bowlby One";font-weight:400;font-display:swap;src:url(../fonts/BowlbyOne-Regular.ttf) format("truetype")}
@font-face{font-family:"Rubik";font-weight:500;font-display:swap;src:url(../fonts/Rubik-500.ttf) format("truetype")}
@font-face{font-family:"Rubik";font-weight:800;font-display:swap;src:url(../fonts/Rubik-800.ttf) format("truetype")}
@font-face{font-family:"Rubik";font-weight:900;font-display:swap;src:url(../fonts/Rubik-900.ttf) format("truetype")}
:root{
  --paper:#F2E8D5;--ink:#1B1511;--accent:#19A06B;--accent-ink:#0B6B47;--stamp-bg:#1B1511;--stamp-fg:#F2E8D5;
  --k:#1B1511;--c:#F2E8D5;--grain:.16;
  --f-display:"Bowlby One","Arial Black",Impact,sans-serif;--f-ui:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --disp:var(--f-display);--body:var(--f-ui);color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#17120E;--ink:#F2E8D5;--accent-ink:#3FD39A;--stamp-bg:#F2E8D5;--stamp-fg:#1B1511;--grain:.3;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#17120E;--ink:#F2E8D5;--accent-ink:#3FD39A;--stamp-bg:#F2E8D5;--stamp-fg:#1B1511;--grain:.3;color-scheme:dark}
html{background:var(--paper)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
button,select{font:inherit;color:inherit}
body::after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:var(--grain);mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='220' height='220' filter='url(%23g)'/></svg>")}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- app nav bar: Home first, then the tool's own pages ---- */
.tabs{position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));max-width:496px;margin:0 auto;isolation:isolate;display:flex;gap:4px;padding:8px;z-index:20;filter:drop-shadow(5px 5px 0 var(--accent))}
.tabs::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);filter:url(#rough-static)}
.tabs .it{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 2px 8px;border:0;background:none;cursor:pointer;color:var(--paper);font-family:var(--f-ui);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:900;line-height:1;text-decoration:none}
.tabs .home{flex:0 0 auto;min-width:64px;margin-right:2px;border-right:3px solid var(--paper);padding-right:8px;border-radius:0}
.tabs .apps{flex:1;min-width:0;display:flex;gap:4px;position:relative}
.tabs .apps>.it{flex:1}
.tabs .apps.one{justify-content:center}
.tabs .apps.one>.it{flex:0 0 auto;min-width:104px}
.tabs .ph{flex:1;align-self:center;text-align:center;padding:0 10px;color:var(--paper);opacity:.62;font-weight:800;font-size:11px;letter-spacing:.08em;line-height:1.35;text-transform:uppercase;animation:phin .3s cubic-bezier(.3,1.3,.5,1) .07s backwards}
.tabs .apps.enter>.it{animation:tabin .28s cubic-bezier(.34,1.56,.64,1) calc(var(--i,0)*40ms + 70ms) backwards}
.tabs.leaving .apps>.it{animation:tabout .13s cubic-bezier(.5,0,.8,.4) calc(var(--i,0)*20ms) forwards}
@keyframes tabin{from{opacity:0;translate:0 22px;scale:.55}}
@keyframes tabout{to{opacity:0;translate:0 16px;scale:.55}}
@keyframes phin{from{opacity:0;translate:0 10px}}
/* the bar stays put while pages change; only the icons of each tool come and go */
@view-transition{navigation:auto}
.tabs{view-transition-name:tabs}
::view-transition-group(root){animation-duration:.22s}
.tabs svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}
.tabs .on{background:var(--accent);color:var(--k);transform:rotate(-2.2deg)}
.tabs .on.pop svg{animation:tabpop .34s steps(4,end)}
@keyframes tabpop{0%{transform:scale(1.5) translateY(-6px) rotate(-12deg)}35%{transform:scale(.9) translateY(1px) rotate(4deg)}70%{transform:scale(1.08)}100%{transform:none}}
.tabs .it:active{transform:translate(2px,2px)}
.tabs .it:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.tabs .on.pop svg{animation:none}.tabs .it:active{transform:none}}

/* ---------- branded components (shared/ui.js) ---------- */
select.nui-native{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;border:0!important}
.nui-sel{position:relative;display:block;min-width:0;max-width:100%;text-align:left;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:0;padding:8px 30px 7px 11px;font-family:var(--f-ui);font-weight:900;font-size:14px;line-height:1.2;box-shadow:4px 4px 0 var(--ink);cursor:pointer}
.nui-sel span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nui-sel::after{content:"";position:absolute;right:10px;top:50%;margin-top:-3px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--ink)}
.nui-sel:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.nui-sel:focus-visible,.nui-opt:focus-visible,.nui-btn:focus-visible,.nui-stamp:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.nui-sel:focus-visible{outline-color:var(--accent-ink)}
.nui-scrim{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center;background:rgba(27,21,17,.62);padding:12px max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));animation:nui-fade .3s steps(1,end)}
.nui-scrim.center{align-items:center}
.nui-sheet{position:relative;isolation:isolate;width:min(100%,480px);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;box-sizing:border-box;padding:18px 18px 16px;color:var(--k);font-family:var(--f-ui);filter:drop-shadow(6px 6px 0 var(--k));animation:nui-up .36s steps(1,end)}
.nui-sheet::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);filter:url(#rough-anim)}
.nui-kick{font-weight:900;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.nui-title{margin:6px 0 14px;font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:28px;line-height:1;color:var(--c);text-shadow:3px 3px 0 var(--k);text-wrap:balance}
.nui-body{margin:0 0 16px;font-weight:800;font-size:15.5px;line-height:1.35}
.nui-list{overflow-y:auto;overscroll-behavior:contain;margin:0 -6px;padding:0 6px 4px;min-height:0}
.nui-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;margin:0 0 10px;padding:12px 14px 11px;background:var(--c);color:var(--k);border:3px solid var(--k);border-radius:0;box-shadow:3px 3px 0 var(--k);font-family:var(--f-ui);font-weight:900;font-size:16px;text-align:left;cursor:pointer}
.nui-opt svg{width:20px;height:20px;flex:none}
.nui-opt.on{background:var(--k);color:var(--c);box-shadow:3px 3px 0 var(--c)}
.nui-opt:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--k)}
.nui-stamp,.nui-btn{position:relative;isolation:isolate;border:0;border-radius:0;cursor:pointer;font-family:var(--f-ui);font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.nui-stamp{display:block;margin:6px auto 0;padding:11px 28px 9px;font-size:12px;color:var(--c);transform:rotate(-1.6deg)}
.nui-stamp::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--k);filter:url(#rough-static)}
.nui-actions{display:flex;gap:12px}
.nui-btn{flex:1;padding:13px 8px 11px;font-size:13px;background:var(--c);color:var(--k);border:3px solid var(--k);box-shadow:3px 3px 0 var(--k)}
.nui-btn.main{background:var(--k);color:var(--c);box-shadow:3px 3px 0 var(--c);transform:rotate(-1.2deg)}
.nui-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--k)}
@keyframes nui-fade{0%{opacity:0}50%{opacity:.6}100%{opacity:1}}
@keyframes nui-up{0%{transform:translateY(46px);opacity:0}34%{transform:translateY(26px);opacity:1}67%{transform:translateY(9px)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.nui-scrim,.nui-sheet{animation:none}}