/* PaperBoy bar. Pairs with paperboy-bar.js. The same bar as the main site's OneBar (site-grownup,
   src/components/OneBar.astro) and the approved ConvertBoy build, so moving from the site into a tool does not
   change it. Values are written out (not var(--ol-*)) so the bar looks the same in every tool, whatever the
   tool's own stylesheet defines. Text uses Instrument Sans when the tool hosts it, the wordmark Fraunces. */
#pb-bar{--pb-ground:#f7efe3;--pb-ink:#1b243a;--pb-ink2:#4a5063;--pb-cream:#fbf2e4;--pb-sheet:#fffaf2;--pb-line:rgba(27,36,58,.14);--pb-focus:#d9a441;--pb-ease:cubic-bezier(.2,.7,.2,1);--pb-shadow-1:0 1px 0 rgba(27,36,58,.06),0 10px 24px -14px rgba(27,36,58,.28);--pb-shadow-2:0 2px 0 rgba(27,36,58,.08),0 22px 40px -18px rgba(27,36,58,.38);--pb-text:'Instrument Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  position:sticky;top:0;z-index:60;display:block;background:var(--pb-ground);color:var(--pb-ink);border-bottom:1px solid var(--pb-line);font:500 15px/1 var(--pb-text);text-align:left;-webkit-font-smoothing:antialiased}
#pb-bar *,#pb-bar *::before,#pb-bar *::after{box-sizing:border-box}
#pb-bar a{color:inherit;text-decoration:none}
#pb-bar img{display:block;max-width:none;border:0}
#pb-bar button{-webkit-appearance:none;appearance:none;margin:0}
/* 59 + the 1px line = 60px, the shell's pinned bar height */
#pb-bar .pb-bar__in{height:59px;display:flex;align-items:center;gap:30px;padding:0 28px;margin:0;max-width:none}
#pb-bar .pb-bar__home{display:flex;align-items:center;gap:10px;font:600 20px/1 Fraunces,'Fraunces Fallback',Georgia,serif;letter-spacing:-.01em;color:var(--pb-ink);flex:none}
#pb-bar .pb-bar__home img{width:32px;height:32px}
#pb-bar .pb-bar__phone{display:none}
#pb-bar .pb-bar__tools{display:flex;gap:4px;min-width:0}
#pb-bar .pb-bar__tools a{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:9px;color:var(--pb-ink2);white-space:nowrap;transition:background 140ms var(--pb-ease),color 140ms}
#pb-bar .pb-bar__tools a:hover,#pb-bar .pb-bar__tools a:focus-visible{background:var(--pb-tint,rgba(27,36,58,.06));color:var(--pb-ink)}
#pb-bar .pb-bar__tools img{width:20px;height:20px;filter:grayscale(1) brightness(.35);opacity:.6;transition:filter 140ms,opacity 140ms}
#pb-bar .pb-bar__tools a:hover img,#pb-bar .pb-bar__tools a:focus-visible img,#pb-bar .pb-bar__tools a[aria-current="page"] img{filter:none;opacity:1}
#pb-bar .pb-bar__tools a[aria-current="page"]{background:var(--pb-surf,#fff);color:var(--pb-ink);box-shadow:0 1px 0 var(--pb-line),0 6px 14px -10px rgba(27,36,58,.4)}
/* ONE RULE (14 Nov 2026), screen width only, the same on every PaperBoy site and page:
   1880 px and wider: every tool shows its badge and its name.
   760 to 1879 px: every tool shows its badge only, the current one too (white chip, badge in colour);
   the name appears under the badge on hover or keyboard focus.
   759 px and narrower: the phone bar and its menu.
   The main site's bar (site-grownup OneBar.astro) uses the same numbers. If tools.json grows past 9 tools,
   raise 1880 here and there (make-bar.mjs prints the width the names need). */
#pb-bar .pb-bar__tools a{position:relative}
@media (min-width:760px) and (max-width:1879px){
  #pb-bar .pb-bar__tools{gap:2px}
  #pb-bar .pb-bar__tools a{padding:8px}
  #pb-bar .pb-bar__tools img{width:24px;height:24px}
  #pb-bar .pb-bar__tools a span{position:absolute;top:calc(100% + 6px);left:50%;z-index:6;transform:translate(-50%,-2px);padding:7px 10px;border-radius:7px;background:var(--pb-ink);color:#fff;font:500 13px/1 var(--pb-text);opacity:0;pointer-events:none;transition:opacity 120ms,transform 120ms var(--pb-ease)}
  #pb-bar .pb-bar__tools a:hover span,#pb-bar .pb-bar__tools a:focus-visible span{opacity:1;transform:translate(-50%,0)}
}
#pb-bar .pb-bar__right{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
#pb-bar .pb-bar__find,#pb-bar .pb-bar__account,#pb-bar .pb-bar__invite{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:9px;font:500 15px/1 var(--pb-text);color:var(--pb-ink2);background:none;border:0;cursor:pointer;white-space:nowrap}
#pb-bar .pb-bar__find:hover,#pb-bar .pb-bar__account:hover{background:var(--pb-tint,rgba(27,36,58,.06));color:var(--pb-ink)}
#pb-bar .pb-bar__find[aria-expanded="true"]{background:var(--pb-tint,rgba(27,36,58,.08));color:var(--pb-ink)}
#pb-bar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex:none}
/* the language toggle: one compact control, "EN | BS" (Arabic is a third option where a tool has it).
   With one language the slot stays, empty, so the bar does not shift between tools. */
#pb-bar .pb-bar__lang{display:inline-flex;align-items:center;justify-content:center;gap:2px;min-width:84px;height:36px;padding:3px;border-radius:9px;background:var(--pb-tint,rgba(27,36,58,.06))}
#pb-bar .pb-bar__lang--none{background:none}
#pb-bar .pb-bar__lang button{flex:1;height:30px;min-width:36px;padding:0 8px;border:0;border-radius:7px;background:none;font:600 13px/1 var(--pb-text);color:var(--pb-ink2);cursor:pointer}
#pb-bar .pb-bar__lang button:hover{color:var(--pb-ink)}
#pb-bar .pb-bar__lang button[aria-pressed="true"]{background:var(--pb-surf,#fff);color:var(--pb-ink);box-shadow:0 1px 0 var(--pb-line),0 4px 10px -8px rgba(27,36,58,.5)}
#pb-bar .pb-bar__invite{color:var(--pb-ink);border:1px solid var(--pb-line-2,rgba(27,36,58,.3));padding:0 16px;margin-left:6px;transition:border-color 140ms}
#pb-bar .pb-bar__invite:hover{border-color:var(--pb-ink)}
#pb-bar .pb-bar__menu{display:none;margin-left:auto;width:48px;height:48px;place-items:center;background:none;border:0;padding:0;color:var(--pb-ink);cursor:pointer}
#pb-bar .pb-bar__menu svg{width:24px;height:24px}
#pb-bar a:focus-visible,#pb-bar button:focus-visible,#pb-bar input:focus-visible{outline:2px solid var(--pb-focus);outline-offset:2px}

/* tool search: a white card over a dimmed page */
#pb-bar .pb-find{position:absolute;left:0;right:0;top:100%;height:100vh;background:rgba(27,36,58,.28)}
#pb-bar .pb-find[hidden],#pb-bar .pb-sheet[hidden]{display:none}
#pb-bar .pb-find__in{max-width:640px;margin:18px auto 0;background:var(--pb-surf,#fff);border-radius:18px;box-shadow:var(--pb-shadow-2);padding:14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;animation:pb-rise 240ms var(--pb-ease) backwards}
@keyframes pb-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#pb-bar .pb-find input{height:52px;width:100%;min-width:0;margin:0;border:1px solid var(--pb-line-2,rgba(27,36,58,.25));border-radius:12px;padding:0 16px;font:400 17px var(--pb-text);color:var(--pb-ink);background:var(--pb-sheet);box-shadow:none}
#pb-bar .pb-find input:focus{outline:2px solid var(--pb-focus);outline-offset:1px}
#pb-bar .pb-find__close{height:52px;padding:0 16px;border-radius:12px;border:1px solid var(--pb-line-2,rgba(27,36,58,.3));background:none;font:500 15px var(--pb-text);color:var(--pb-ink);cursor:pointer}
#pb-bar .pb-find__list{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;gap:2px;max-height:60vh;overflow:auto}
#pb-bar .pb-find__list li{margin:0;padding:0}
#pb-bar .pb-find__list a{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;color:var(--pb-ink)}
#pb-bar .pb-find__list a:hover,#pb-bar .pb-find__list a.is-active{background:var(--pb-ground)}
#pb-bar .pb-find__list img{width:20px;height:20px}
#pb-bar .pb-find__list span{font:600 15px/1.25 var(--pb-text)}
#pb-bar .pb-find__list small{font:400 13px/1.3 var(--pb-text);color:var(--pb-ink2);text-align:end}
#pb-bar .pb-find__none{padding:12px;color:var(--pb-ink2);font-size:15px;line-height:1.3}

#pb-bar .pb-sheet{display:none}
/* quick switch: hold the name in the phone bar, every tool appears as a tile */
#pb-bar .pb-switch{position:fixed;left:0;right:0;top:56px;bottom:0;background:rgba(27,36,58,.28);z-index:2}
#pb-bar .pb-switch[hidden]{display:none}
#pb-bar .pb-switch__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px 16px 18px;background:var(--pb-ground);border-radius:0 0 18px 18px;box-shadow:var(--pb-shadow-2);animation:pb-rise 240ms var(--pb-ease) backwards}
#pb-bar .pb-switch__in a{display:grid;justify-items:center;gap:8px;padding:14px 4px;background:var(--pb-surf,#fff);border:1px solid var(--pb-line);border-radius:14px;font:600 13px/1.2 var(--pb-text);color:var(--pb-ink);box-shadow:var(--pb-shadow-1)}
#pb-bar .pb-switch__in a[aria-current="page"]{border-color:var(--pb-ink);box-shadow:inset 0 0 0 1px var(--pb-ink)}
#pb-bar .pb-switch__in img{width:44px;height:44px}
#pb-bar .pb-bar__phone{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
#pb-bar .pb-bar__phone img{pointer-events:none;-webkit-user-drag:none}
/* 1099 px and narrower: the tool names no longer fit beside "Find a tool", so the badges stand alone (the name stays as the tooltip and the label) */
@media (max-width:1099px){#pb-bar .pb-bar__in{gap:18px}#pb-bar .pb-bar__home span,#pb-bar .pb-bar__find span{display:none}#pb-bar .pb-bar__find{padding:0 10px}}
/* breakpoints (look v12): 759 and below phone; 760 to 1099 compact (head, badges, search icon, language, Work with us);
   1100 and up the full bar.
   phone: its own bar (head, PaperBoy, menu); the menu sheet holds the search, the tools as a
   3-across grid of tiles, the site pages and Saradnja */
@media (max-width:759px){
  #pb-bar .pb-bar__tools,#pb-bar .pb-bar__right{display:none}
  #pb-bar{background:var(--pb-ink);border-bottom:0;color:var(--pb-cream)}
  #pb-bar .pb-bar__in{padding:0 6px 0 16px;height:56px}
  #pb-bar .pb-bar__home{display:none}
  #pb-bar .pb-bar__phone{display:flex;align-items:center;gap:12px;font:600 20px/1 Fraunces,'Fraunces Fallback',Georgia,serif;letter-spacing:-.01em;color:var(--pb-cream);min-width:0}
  #pb-bar .pb-bar__head{position:relative;flex:none;width:34px;height:34px}
  #pb-bar .pb-bar__head img{width:34px;height:34px}
  #pb-bar .pb-bar__head .pb-bar__badge{position:absolute;right:-7px;bottom:-5px;width:20px;height:20px}
  #pb-bar .pb-bar__menu{display:grid;color:var(--pb-cream)}
  #pb-bar .pb-sheet:not([hidden]){display:grid;gap:18px;position:absolute;left:0;right:0;top:100%;background:var(--pb-ground);color:var(--pb-ink);border-bottom:1px solid var(--pb-line);padding:16px 16px 22px;box-shadow:var(--pb-shadow-2);animation:pb-rise 240ms var(--pb-ease) backwards;max-height:calc(100vh - 56px);overflow:auto}
  #pb-bar .pb-sheet__search{display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;border:1px solid var(--pb-line-2,rgba(27,36,58,.25));border-radius:12px;background:var(--pb-surf,#fff);font:500 16px var(--pb-text);color:var(--pb-ink2);cursor:pointer;text-align:start;width:100%}
  #pb-bar .pb-sheet__tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #pb-bar .pb-sheet__tools a{display:grid;justify-items:center;gap:8px;padding:14px 4px;background:var(--pb-surf,#fff);border:1px solid var(--pb-line);border-radius:14px;font:600 13px/1.2 var(--pb-text);color:var(--pb-ink);box-shadow:var(--pb-shadow-1)}
  #pb-bar .pb-sheet__tools a[aria-current="page"]{border-color:var(--pb-ink);box-shadow:inset 0 0 0 1px var(--pb-ink)}
  #pb-bar .pb-sheet__tools img{width:40px;height:40px}
  #pb-bar .pb-sheet__own{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
  #pb-bar .pb-sheet__own a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 10px;border-radius:12px;border:1px solid var(--pb-line-2,rgba(27,36,58,.25));background:var(--pb-surf,#fff);font:600 15px/1.2 var(--pb-text);color:var(--pb-ink);text-align:center}
  #pb-bar .pb-sheet__own a[aria-current="page"]{background:var(--pb-ink);border-color:var(--pb-ink);color:var(--pb-cream)}
  #pb-bar .pb-sheet__lang{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--pb-tint,rgba(27,36,58,.06))}
  #pb-bar .pb-sheet__lang button{flex:1;height:44px;border:0;border-radius:9px;background:none;font:600 15px/1 var(--pb-text);color:var(--pb-ink2);cursor:pointer}
  #pb-bar .pb-sheet__lang button[aria-pressed="true"]{background:var(--pb-surf,#fff);color:var(--pb-ink);box-shadow:0 1px 0 var(--pb-line),0 4px 10px -8px rgba(27,36,58,.5)}
  #pb-bar .pb-sheet__invite{display:flex;align-items:center;justify-content:center;min-height:52px;border:1px solid var(--pb-line-2,rgba(27,36,58,.3));border-radius:12px;font:500 16px var(--pb-text);color:var(--pb-ink)}
  #pb-bar .pb-find{position:fixed;top:56px}
  #pb-bar .pb-find__in{margin:0;border-radius:0 0 18px 18px}
}
@media (prefers-reduced-motion:reduce){#pb-bar .pb-find__in,#pb-bar .pb-sheet:not([hidden]){animation:none}#pb-bar *{transition:none!important}}


/* TACTILE (look v14): press is fast and small, release is a soft spring. Transform and opacity only, so nothing
   around a pressed thing moves. The bar itself, the head and the text never move. */
#pb-bar{--pb-spring:cubic-bezier(.34,1.45,.64,1);--pb-press:80ms;--pb-release:320ms}
@supports (transition-timing-function:linear(0,1)){#pb-bar{--pb-spring:linear(0,.36 8%,.72 16%,.96 25%,1.06 34%,1.075 41%,1.05 50%,1.015 62%,.998 75%,1)}}
#pb-bar .pb-bar__tools a,#pb-bar .pb-bar__find,#pb-bar .pb-bar__invite,#pb-bar .pb-bar__account,#pb-bar .pb-bar__menu,#pb-bar .pb-find__close,#pb-bar .pb-find__list a,#pb-bar .pb-sheet__search,#pb-bar .pb-sheet__invite,#pb-bar .pb-sheet__own a,#pb-bar .pb-sheet__tools a,#pb-bar .pb-switch__in a{transition:transform var(--pb-release) var(--pb-spring),background-color 140ms var(--pb-ease),border-color 140ms var(--pb-ease),color 140ms var(--pb-ease),box-shadow 140ms var(--pb-ease)}
#pb-bar .pb-bar__tools a:active,#pb-bar .pb-bar__find:active,#pb-bar .pb-bar__invite:active,#pb-bar .pb-bar__account:active,#pb-bar .pb-bar__menu:active,#pb-bar .pb-find__close:active,#pb-bar .pb-sheet__search:active,#pb-bar .pb-sheet__invite:active,#pb-bar .pb-sheet__own a:active{transform:scale(.95);transition-duration:var(--pb-press);transition-timing-function:ease-out}
#pb-bar .pb-find__list a:active{transform:scale(.98);transition-duration:var(--pb-press);transition-timing-function:ease-out}
@media (hover:hover){#pb-bar .pb-sheet__tools a:hover,#pb-bar .pb-switch__in a:hover{transform:translateY(-2px)}}
#pb-bar .pb-sheet__tools a:active,#pb-bar .pb-switch__in a:active{transform:scale(.96);transition-duration:var(--pb-press);transition-timing-function:ease-out}
/* the language toggle: a thumb that slides with the spring; the track does not move */
#pb-bar .pb-bar__lang,#pb-bar .pb-sheet__lang{position:relative;isolation:isolate}
#pb-bar .pb-bar__lang:not(.pb-bar__lang--none)::before,#pb-bar .pb-sheet__lang::before{content:"";position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc((100% - 6px - (var(--pb-n) - 1)*2px)/var(--pb-n));border-radius:7px;background:var(--pb-surf,#fff);box-shadow:0 1px 0 var(--pb-line),0 4px 10px -8px rgba(27,36,58,.5);transform:translateX(calc(var(--pb-i)*(100% + 2px)));transition:transform 280ms var(--pb-spring)}
#pb-bar .pb-sheet__lang::before{top:4px;bottom:4px;left:4px;width:calc((100% - 8px - (var(--pb-n) - 1)*4px)/var(--pb-n));border-radius:9px;transform:translateX(calc(var(--pb-i)*(100% + 4px)))}
#pb-bar .pb-bar__lang button,#pb-bar .pb-sheet__lang button{transition:color 140ms var(--pb-ease)}
#pb-bar .pb-bar__lang button[aria-pressed="true"],#pb-bar .pb-sheet__lang button[aria-pressed="true"]{background:none;box-shadow:none}
/* things arriving: the phone menu, the quick switch and the search card settle with the spring; closing is plain */
@keyframes pb-drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
#pb-bar .pb-sheet:not([hidden]),#pb-bar .pb-switch__in{animation:pb-drop 380ms var(--pb-spring) backwards}
#pb-bar .pb-find__in{animation:pb-rise 320ms var(--pb-spring) backwards}
@media (prefers-reduced-motion:reduce){
  #pb-bar *,#pb-bar *::before{transition:opacity 140ms linear !important;animation:none !important}
  #pb-bar a:active,#pb-bar button:active{transform:none !important;opacity:.8}
  #pb-bar .pb-sheet__tools a:hover,#pb-bar .pb-switch__in a:hover{transform:none}
}


/* look v16: a keyboard press (Enter, Space) looks like a click; lists carry the tool badge at 20px */
#pb-bar .pb-bar__tools a.is-pressed,#pb-bar .pb-bar__find.is-pressed,#pb-bar .pb-bar__invite.is-pressed,#pb-bar .pb-bar__account.is-pressed,#pb-bar .pb-bar__menu.is-pressed,#pb-bar .pb-find__close.is-pressed,#pb-bar .pb-sheet__search.is-pressed,#pb-bar .pb-sheet__invite.is-pressed,#pb-bar .pb-sheet__own a.is-pressed{transform:scale(.95);transition-duration:var(--pb-press);transition-timing-function:ease-out}
#pb-bar .pb-find__list a.is-pressed{transform:scale(.98);transition-duration:var(--pb-press);transition-timing-function:ease-out}
#pb-bar .pb-sheet__tools a.is-pressed,#pb-bar .pb-switch__in a.is-pressed{transform:scale(.96);transition-duration:var(--pb-press);transition-timing-function:ease-out}
@media (prefers-reduced-motion:reduce){#pb-bar .is-pressed{transform:none !important;opacity:.8}}


/* THE PICKER (look v17): the one dropdown. Built by PaperBoyBar.picker(select); the native select stays as the
   form value but is never shown. Values are written out so it looks the same in every tool.
   A tool may restyle the trigger to match its fields with --pb-pick-h, --pb-pick-radius, --pb-pick-bg,
   --pb-pick-font, or by passing className. */
.pb-pick-native{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;opacity:0 !important;pointer-events:none !important}
.pb-pick{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-width:0;height:var(--pb-pick-h,44px);padding:0 12px;margin:0;border:1px solid var(--pb-line-2,rgba(27,36,58,.25));border-radius:var(--pb-pick-radius,8px);background:var(--pb-pick-bg,#fffaf2);font:var(--pb-pick-font,400 15px/1.2 'Instrument Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);color:var(--pb-ink,#1b243a);text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;box-sizing:border-box;transition:border-color 140ms cubic-bezier(.2,.7,.2,1)}
.pb-pick:hover{border-color:var(--pb-ink-2,rgba(27,36,58,.45))}
.pb-pick[aria-expanded="true"]{border-color:var(--pb-ink,#1b243a)}
.pb-pick:focus-visible{outline:2px solid #d9a441;outline-offset:2px}
.pb-pick:disabled{opacity:.55;cursor:default}
/* the value keeps a full line box (line-height and a little padding), so a restyled, larger trigger does not clip g, j, p, y */
.pb-pick__value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35;padding-block:.12em}
.pb-pick__chev{flex:none;width:16px;height:16px;fill:none;stroke:var(--pb-ink-2,#4a5063);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform 220ms cubic-bezier(.34,1.45,.64,1)}
.pb-pick[aria-expanded="true"] .pb-pick__chev{transform:rotate(180deg)}
.pb-pick-scrim{display:none}
.pb-pick-menu{position:fixed;z-index:var(--pb-pick-z,2147483000);box-sizing:border-box;max-height:min(360px,60vh);display:flex;flex-direction:column;background:var(--pb-surface,#fff);color:var(--pb-ink,#1b243a);border-radius:14px;padding:6px;box-shadow:0 0 0 1px rgba(27,36,58,.14),0 24px 48px -18px rgba(27,36,58,.55);font:500 15px/1 'Instrument Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;opacity:0;transform:scale(.96);transform-origin:top left;pointer-events:none;transition:opacity 140ms cubic-bezier(.2,.7,.2,1),transform 220ms cubic-bezier(.34,1.45,.64,1)}
.pb-pick-menu[hidden],.pb-pick-scrim[hidden]{display:none}
.pb-pick-menu.is-open{opacity:1;transform:none;pointer-events:auto}
.pb-pick-menu.is-up{transform-origin:bottom left}
.pb-pick-menu *{box-sizing:border-box}
.pb-pick-menu__list{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;min-height:0}
.pb-pick-menu__group{position:sticky;top:0;z-index:1;background:var(--pb-surface,#fff);padding:10px 12px 4px;font:600 12px/1.2 'Instrument Sans',system-ui,sans-serif;color:var(--pb-ink-2,#4a5063)}
.pb-pick-menu__row{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 12px;border-radius:9px;font:500 15px/1.25 'Instrument Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--pb-ink,#1b243a);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color 140ms cubic-bezier(.2,.7,.2,1),transform 320ms cubic-bezier(.34,1.45,.64,1)}
.pb-pick-menu__row[hidden],.pb-pick-menu__group[hidden]{display:none}
.pb-pick-menu__row.is-active{background:var(--pb-tint,#f7efe3)}
.pb-pick-menu__row:active{transform:scale(.98);transition-duration:80ms;transition-timing-function:ease-out}
.pb-pick-menu__row[aria-selected="true"]{font-weight:600}
.pb-pick-menu__row[aria-selected="true"]::after{content:"";flex:none;margin-left:auto;width:14px;height:8px;border-left:2.5px solid #c8321f;border-bottom:2.5px solid #c8321f;transform:rotate(-45deg) translateY(-2px)}
.pb-pick-menu__row[aria-disabled="true"]{color:var(--pb-ink-2,rgba(27,36,58,.4));opacity:.6;cursor:default}
.pb-pick-menu__search{flex:none;width:100%;height:40px;margin:0 0 4px;padding:0 12px;border:1px solid var(--pb-line-2,rgba(27,36,58,.2));border-radius:9px;background:var(--pb-ground,#fffaf2);font:400 15px 'Instrument Sans',system-ui,sans-serif;color:var(--pb-ink,#1b243a)}
.pb-pick-menu__search:focus-visible{outline:2px solid #d9a441;outline-offset:1px}
/* phone: always a bottom sheet with a scrim, never a floating menu */
@media (max-width:759px){
  .pb-pick-scrim{display:block;position:fixed;inset:0;z-index:calc(var(--pb-pick-z,2147483000) - 1);background:rgba(27,36,58,.4);opacity:0;transition:opacity 240ms cubic-bezier(.2,.7,.2,1)}
  .pb-pick-scrim.is-open{opacity:1}
  /* a closing scrim is already out of the way: the tap that follows reaches the page (look v18) */
  .pb-pick-scrim:not(.is-open){pointer-events:none}
  .pb-pick-menu{left:0 !important;right:0;top:auto !important;bottom:0;min-width:0 !important;max-width:none !important;max-height:70vh;border-radius:22px 22px 0 0;padding:14px 12px calc(18px + env(safe-area-inset-bottom,0px));opacity:1;transform:translateY(105%);transition:transform 240ms cubic-bezier(.2,.7,.2,1)}
  .pb-pick-menu.is-open{transform:none;transition:transform 380ms cubic-bezier(.34,1.45,.64,1)}
  .pb-pick-menu::before{content:"";flex:none;display:block;width:44px;height:5px;border-radius:3px;background:rgba(27,36,58,.2);margin:0 auto 12px}
  .pb-pick-menu__row{min-height:52px;font-size:17px;border-radius:12px}
  .pb-pick-menu__group{font-size:13px}
  .pb-pick-menu__search{height:48px;font-size:17px}
  .pb-pick-scrim{touch-action:none}
  .pb-pick-menu{overscroll-behavior:contain}
}
@media (prefers-reduced-motion:reduce){
  .pb-pick-menu,.pb-pick-menu.is-open,.pb-pick-scrim,.pb-pick-menu__row,.pb-pick__chev{transition:opacity 140ms linear !important}
  .pb-pick-menu{transform:none !important}
  .pb-pick-menu:not(.is-open){opacity:0}
  .pb-pick-menu__row:active{transform:none;opacity:.8}
}
@media print{#pb-bar,.pb-pick-menu,.pb-pick-scrim{display:none}}
/* task-first tiles (13 Nov 2026): the job leads, the Boy name follows small */
#pb-bar .pb-sheet__tools a b,#pb-bar .pb-switch__in a b{font:600 13px/1.2 var(--pb-text);text-align:center}
#pb-bar .pb-sheet__tools a small,#pb-bar .pb-switch__in a small{margin-top:-6px;font:400 11px/1.2 var(--pb-text);color:var(--pb-ink2)}

/* ---- MyBoy face and Your work (bar 2026-11-14.2, wow spec E1 + E2) ----
   Pattern: Google account chip + panel (face, name, recent files grid, sign out); the start-screen row follows
   look/DESIGN.md section 5 (4 cards on a computer, a sideways row on a phone, "See all" on the right). */
.pb-face{position:relative;display:inline-grid;place-items:center;width:var(--pb-face,34px);height:var(--pb-face,34px);border-radius:50%;overflow:hidden;flex:none;background:#1b243a;color:#fbf2e4;font:600 calc(var(--pb-face,34px)*.42)/1 Fraunces,Georgia,serif}
.pb-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#pb-bar .pb-bar__me{display:inline-grid;place-items:center;width:44px;height:44px;margin-left:4px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;transition:transform var(--pb-release,320ms) var(--pb-spring,ease)}
#pb-bar .pb-bar__me .pb-face{box-shadow:0 0 0 2px var(--pb-ground),0 0 0 3px rgba(27,36,58,.18)}
#pb-bar .pb-bar__me:hover .pb-face,#pb-bar .pb-bar__me[aria-expanded="true"] .pb-face{box-shadow:0 0 0 2px var(--pb-ground),0 0 0 4px #1b243a}
#pb-bar .pb-bar__me:active{transform:scale(.94);transition-duration:80ms}
#pb-bar .pb-me{position:absolute;top:calc(100% + 8px);right:16px;z-index:70;width:360px;max-width:calc(100vw - 32px)}
#pb-bar .pb-me__in{background:var(--pb-surf,#fff);border-radius:18px;box-shadow:var(--pb-shadow-2);padding:18px;display:grid;gap:14px;animation:pb-rise 240ms var(--pb-ease) backwards;color:var(--pb-ink)}
.pb-me__head{display:flex;align-items:center;gap:12px;min-width:0}
.pb-me__who{display:grid;gap:4px;min-width:0;flex:1}
.pb-me__who b{font:600 17px/1.2 Fraunces,Georgia,serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-me__who small{font:500 13px/1.2 'Instrument Sans',system-ui,sans-serif;color:var(--pb-ink-2,#4a5063)}
.pb-me__acct{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--pb-line-2,rgba(27,36,58,.28));font:600 14px/1 'Instrument Sans',system-ui,sans-serif;color:var(--pb-ink,#1b243a);white-space:nowrap}
.pb-me__acct:hover{border-color:var(--pb-ink,#1b243a)}
.pb-me__sec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font:600 14px/1.2 'Instrument Sans',system-ui,sans-serif}
.pb-me__sec a{color:var(--pb-ink-2,#4a5063);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pb-me__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pb-me__empty{margin:0;font:400 14px/1.45 'Instrument Sans',system-ui,sans-serif;color:var(--pb-ink-2,#4a5063)}
.pb-me__out{justify-self:start;display:inline-flex;align-items:center;min-height:40px;font:500 14px/1 'Instrument Sans',system-ui,sans-serif;color:var(--pb-ink-2,#4a5063);text-decoration:underline;text-underline-offset:3px}
/* one work tile, used in the panel, the phone menu and the start-screen row */
.pb-work{display:grid;gap:6px;min-width:0;color:var(--pb-ink,#1b243a);text-decoration:none;border-radius:12px}
.pb-work__pic{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border-radius:10px;background:var(--pb-well,#f1e8da);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(27,36,58,.08)}
.pb-work__pic>img{width:100%;height:100%;object-fit:cover;display:block}
.pb-work__pic--none>img{width:40px;height:40px;object-fit:contain}
.pb-work__tool{position:absolute;inset-inline-end:6px;bottom:6px;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--pb-surf,#fff);box-shadow:0 2px 6px -2px rgba(27,36,58,.4)}
.pb-work__tool img{width:18px;height:18px}
.pb-work b{font:600 13px/1.25 'Instrument Sans',system-ui,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-work small{font:400 12px/1.2 'Instrument Sans',system-ui,sans-serif;color:var(--pb-ink-2,#4a5063);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-work:hover .pb-work__pic{box-shadow:inset 0 0 0 2px var(--pb-ink,#1b243a)}
.pb-work:focus-visible{outline:2px solid #d9a441;outline-offset:3px}
.pb-work:active{transform:scale(.97)}
/* start screen: Your recent work */
.pb-recent{display:grid;gap:14px;margin:0 0 28px;color:var(--pb-ink,#1b243a)}
.pb-recent[hidden]{display:none}
.pb-recent__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.pb-recent__head h2{margin:0;font:var(--pb-display-weight,600) 20px/1.2 var(--pb-display,Fraunces,Georgia,serif);letter-spacing:var(--pb-display-track,-.01em)}
.pb-recent__head a{font:600 14px/1 'Instrument Sans',system-ui,sans-serif;color:var(--pb-ink-2,#4a5063);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.pb-recent__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pb-recent__item{position:relative;min-width:0;background:var(--pb-surface,#fff);border-radius:14px;padding:10px 10px 12px;box-shadow:0 1px 0 rgba(27,36,58,.05),0 12px 28px -18px rgba(27,36,58,.32);transition:transform 200ms cubic-bezier(.2,.7,.2,1)}
.pb-recent__item:hover{transform:translateY(-2px)}
.pb-recent__item:nth-child(n+5){display:none}
.pb-recent__item .pb-work b{font-size:14px}
.pb-recent__x{position:absolute;top:14px;inset-inline-end:14px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--pb-ink,#1b243a);font:500 20px/1 system-ui,sans-serif;cursor:pointer;opacity:0;box-shadow:0 2px 8px -3px rgba(27,36,58,.5);transition:opacity 140ms}
.pb-recent__item:hover .pb-recent__x,.pb-recent__x:focus-visible{opacity:1}
@media (max-width:759px){
  #pb-bar .pb-sheet__me{display:grid;gap:14px;padding:16px;background:var(--pb-surf,#fff);border-radius:16px;box-shadow:var(--pb-shadow-1)}
  #pb-bar .pb-sheet__me:empty{display:none}
  #pb-bar .pb-sheet__me .pb-me__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pb-recent__grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none}
  .pb-recent__grid::-webkit-scrollbar{display:none}
  .pb-recent__item,.pb-recent__item:nth-child(n+5){display:block;flex:0 0 42%;scroll-snap-align:start}
  .pb-recent__x{opacity:1;width:36px;height:36px}
}
@media (min-width:760px){#pb-bar .pb-sheet__me{display:none}}
@media (prefers-reduced-motion:reduce){#pb-bar .pb-me__in{animation:none}.pb-recent__item,.pb-work{transition:none}}

/* inside a hand-off panel the outer tool's bar is the only bar (bar 2026-11-14.3, QA #7) */
html.pb-handoff #pb-bar{display:none!important}

/* ---- themes (bar 2026-11-14.5): with paperboy-theme.css/js loaded, <html data-theme> drives the bar's colours ---- */
html[data-theme] #pb-bar{--pb-ground:inherit;--pb-ink:inherit;--pb-line:inherit;--pb-shadow-1:inherit;--pb-shadow-2:inherit;--pb-ink2:var(--pb-ink-2);--pb-sheet:var(--pb-surface);--pb-surf:var(--pb-surface);--pb-cream:var(--pb-column-ink)}
:root[data-theme="night"]{--pb-line-2:rgba(243,234,217,.24);--pb-tint:rgba(243,234,217,.08)}
:root[data-theme="calm"]{--pb-line-2:rgba(22,24,29,.2);--pb-tint:rgba(22,24,29,.05)}
html[data-theme="calm"] #pb-bar .pb-bar__home{font-family:var(--pb-display);letter-spacing:var(--pb-display-track)}
/* the PaperBoy head: ink on light grounds, cream on dark ones */
#pb-bar .pb-bar__home .pb-cream,#pb-bar .pb-bar__head .pb-ink{display:none}
html[data-theme="night"] #pb-bar .pb-bar__home .pb-ink{display:none}
html[data-theme="night"] #pb-bar .pb-bar__home .pb-cream{display:block}
html[data-theme="night"] #pb-bar .pb-bar__tools a[aria-current="page"]{box-shadow:0 0 0 1px var(--pb-line-2)}
/* the theme switch: three dots of the theme colours, the name shows on hover (like the tool names) */
#pb-bar .pb-bar__theme{display:inline-flex;align-items:center;gap:2px;margin-left:4px}
#pb-bar .pb-bar__theme button{position:relative;display:grid;place-items:center;width:32px;height:40px;padding:0;border:0;background:none;cursor:pointer}
#pb-bar .pb-dot{display:block;width:18px;height:18px;border-radius:50%;background:var(--d1);box-shadow:0 0 0 1px rgba(27,36,58,.35);transition:box-shadow 140ms}
#pb-bar .pb-bar__theme button[aria-pressed="true"] .pb-dot,#pb-bar .pb-sheet__theme button[aria-pressed="true"] .pb-dot{box-shadow:0 0 0 2px var(--pb-ground),0 0 0 4px #1b243a}
html[data-theme="night"] #pb-bar .pb-bar__theme button[aria-pressed="true"] .pb-dot{box-shadow:0 0 0 2px var(--pb-ground),0 0 0 4px #f3ead9}
html[data-theme="night"] #pb-bar .pb-dot{box-shadow:0 0 0 1px rgba(243,234,217,.45)}
#pb-bar .pb-bar__theme button span.pb-tip{position:absolute;top:calc(100% + 2px);left:50%;z-index:6;transform:translate(-50%,-2px);padding:7px 10px;border-radius:7px;background:var(--pb-ink);color:var(--pb-ground);font:500 13px/1 var(--pb-text);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 120ms,transform 120ms var(--pb-ease)}
#pb-bar .pb-bar__theme button:hover span.pb-tip,#pb-bar .pb-bar__theme button:focus-visible span.pb-tip{opacity:1;transform:translate(-50%,0)}
#pb-bar .pb-sheet__theme{display:none}
@media (max-width:759px){
  html[data-theme] #pb-bar{background:var(--pb-column);color:var(--pb-column-ink)}
  html[data-theme="calm"] #pb-bar{border-bottom:1px solid var(--pb-line)}
  html[data-theme="calm"] #pb-bar .pb-bar__head .pb-ink{display:block}
  html[data-theme="calm"] #pb-bar .pb-bar__head .pb-cream{display:none}
  html[data-theme] #pb-bar .pb-sheet__own a[aria-current="page"]{color:var(--pb-ground)}
  #pb-bar .pb-sheet__theme{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #pb-bar .pb-sheet__theme button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:12px;border:1px solid var(--pb-line-2,rgba(27,36,58,.25));background:var(--pb-surf,#fff);font:600 15px/1 var(--pb-text);color:var(--pb-ink);cursor:pointer}
  #pb-bar .pb-sheet__theme button[aria-pressed="true"]{border-color:var(--pb-ink);box-shadow:inset 0 0 0 1px var(--pb-ink)}
}
/* Night: the grey badges and the face need light on a dark ground */
html[data-theme="night"] #pb-bar .pb-bar__tools img{filter:grayscale(1) brightness(2.2);opacity:.55}
html[data-theme="night"] #pb-bar .pb-bar__tools a:hover img,html[data-theme="night"] #pb-bar .pb-bar__tools a[aria-current="page"] img{filter:none;opacity:1}
html[data-theme="night"] .pb-face{background:var(--pb-well);color:var(--pb-ink)}
/* the whole Your work list (MyBoy page): every card, a grid on the phone too */
.pb-recent--all{margin:0}
.pb-recent--all .pb-recent__item:nth-child(n+5){display:block}
@media (max-width:759px){.pb-recent--all .pb-recent__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin:0;padding:0}.pb-recent--all .pb-recent__item{flex:none}}
/* ---- Open on phone (bar 2026-11-14.8): a centred card on a computer, a bottom sheet on a phone ---- */
.pb-phone{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:rgba(14,18,30,.45);padding:16px;animation:pb-phone-in 180ms ease-out}
.pb-phone__card{position:relative;width:360px;max-width:100%;background:var(--pb-surface,#fff);color:var(--pb-ink,#1b243a);border-radius:20px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);padding:28px 24px 24px;text-align:center;font:400 15px/1.45 var(--pb-text,'Instrument Sans',system-ui,sans-serif)}
.pb-phone__card h2{margin:0 0 16px;font:var(--pb-display-weight,600) 22px/1.2 var(--pb-display,Fraunces,Georgia,serif);letter-spacing:var(--pb-display-track,-.01em)}
.pb-phone__qr{width:232px;height:232px;margin:0 auto;padding:10px;background:#fff;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(27,36,58,.1)}
.pb-phone__qr svg{display:block;width:100%;height:100%}
.pb-phone__scan{margin:16px 0 4px;font-weight:600}
.pb-phone__lasts,.pb-phone__wait{margin:0;color:var(--pb-ink-2,#5a6072)}
.pb-phone__wait{min-height:120px;display:grid;place-items:center}
.pb-phone__name{margin:0 0 16px;font-weight:600;overflow-wrap:anywhere}
.pb-phone__save{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:12px;background:var(--pb-red,#c8321f);color:#fff;font-weight:600;text-decoration:none}
.pb-phone__x{position:absolute;top:10px;inset-inline-end:10px;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--pb-ink-2,#5a6072);font:400 26px/1 system-ui,sans-serif;cursor:pointer}
.pb-phone__x:hover{background:var(--pb-tint,rgba(27,36,58,.06))}
@keyframes pb-phone-in{from{opacity:0}to{opacity:1}}
@media (max-width:759px){.pb-phone{place-items:end stretch;padding:0}.pb-phone__card{width:100%;border-radius:20px 20px 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){.pb-phone{animation:none}}
/* QA #40: the chosen theme carries a tick in that theme's ink, and swatches are a little larger */
#pb-bar .pb-dot{position:relative;width:20px;height:20px}
#pb-bar [data-pb-theme][aria-pressed="true"] .pb-dot::after{content:"";position:absolute;left:6px;top:4px;width:5px;height:9px;border:solid var(--d2);border-width:0 2px 2px 0;transform:rotate(45deg)}