/* The site toolbar (design/site-header-v1/header.css, Anurag 2026-09-28): the home page, every
   page of the site and the app's pages around a book. The app imports it (shell.js); the site
   build copies it to /toolbar.css (build.mjs) and every page links it (layout.mjs). Every colour
   is a token that brand.css and tokens.css both define, so it follows light and dark alike.
   Widths (design/site-header-v1/README.md):
   desktop  >= 1280 signed in, >= 1024 signed out: everything in one row
   tablet   721 - 1279: the section links move under the menu button; every action stays in the
            bar; under 900 "Create a new book" reads "New book"
   phone    <= 720: logo, the bookshelf, New book, menu; the menu and the card are sheets from the bottom */

.tj-bar { top: env(safe-area-inset-top, 0px); z-index: 30; gap: 20px; }
.tj-bar .sitenav { gap: 26px; }
.tj-bar[data-auth="out"] [data-in],
.tj-bar[data-auth="in"] [data-out] { display: none !important; }

.tj-acts { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.tj-bar svg, .tj-sheet svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.tj-bar .logomark { width: auto; }

.tj-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--r-pill); background: transparent;
  color: var(--ink); font: 600 15px/1 var(--body); cursor: pointer; white-space: nowrap;
}
.tj-btn:hover { background: var(--sunk); }
.tj-btn[disabled] { opacity: .6; cursor: default; }
.tj-btn.line { border-color: var(--line-strong); background: var(--surface); }
.tj-btn[aria-expanded="true"] { background: var(--accent-pale); border-color: var(--accent-lift); color: var(--accent-dark); }
.tj-bar .tj-caret { width: 14px; height: 14px; opacity: .6; transition: transform .2s; }
[aria-expanded="true"] > .tj-caret { transform: rotate(180deg); }
.tj-icon { width: 44px; padding: 0; justify-content: center; }
.tj-bar .tj-icon svg { width: 22px; height: 22px; }
/* My Bookshelf's icon: Anurag's 3D shelf (20 October 2026), web/public/brand/bookshelf.webp. */
.tj-bar .tj-icon .tj-shelf-i { width: 28px; height: 28px; display: block; }
.tj-menu { width: 44px; padding: 0; justify-content: center; display: none; }
.tj-bar .tj-menu svg { width: 22px; height: 22px; }

.tj-bar .go.tj-new { gap: 8px; border-radius: var(--r-pill); padding: 0 1.2rem; }
.tj-new .short { display: none; }

:is(.tj-btn, .tj-wide, .tj-book):focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- the two dropdowns ---------- */
.tj-drop { position: relative; }
.tj-pop {
  position: absolute; top: calc(100% + 12px); right: 0; width: 360px; z-index: 40;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-float, 0 18px 48px rgba(28, 36, 38, .14)); padding: 16px;
  display: grid; gap: 14px; transform-origin: top right; animation: tjpop .16s ease-out; text-align: left;
}
.tj-pop[hidden] { display: none; }
@keyframes tjpop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.tj-pop-h { margin: 0; font: 600 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.tj-books { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tj-book {
  display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; padding: 8px;
  margin: 0 -8px; border-radius: var(--r-control); color: var(--ink); text-decoration: none;
}
.tj-book:hover { background: var(--accent-pale); }
/* a cover on its way (img-retry.js): the drawing-board colour, never a blank box */
.tj-book img { background: var(--artwell); }
.tj-book img, .tj-nocover { width: 76px; height: 50px; object-fit: cover; border-radius: 7px; box-shadow: var(--shadow-book); display: block; }
.tj-nocover { background: var(--artwell); display: grid; place-items: center; text-align: center; font-size: 11px; line-height: 1.2; color: var(--muted); padding: 2px; box-sizing: border-box; }
.tj-book b { display: block; font: 600 15px/1.25 var(--body); }
.tj-book span:not(.tj-steps):not(.tj-nocover) { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.tj-book .ready { color: var(--accent); font-weight: 600; }
.tj-steps { display: flex; gap: 3px; margin-top: 6px; }
.tj-steps i { height: 4px; width: 22px; border-radius: 2px; background: var(--line); }
.tj-steps i.on { background: var(--accent); }
/* The books are on their way: three rows in the shape of a book row, with a slow shimmer. */
.tj-skel .tj-book { pointer-events: none; }
.tj-skel .tj-book:hover { background: none; }
/* Same blocks and shimmer as the "Assemble your heroes" blanks (character.css), with the tokens
   defined here because the site pages that carry this toolbar do not load character.css. The
   shimmer runs always, reduced motion included, as it does there: a still skeleton reads as empty. */
.tj-pop { --tj-blank: #EFE9DE; --tj-blank-shape: #E3DACB; --tj-shimmer: rgba(255, 255, 255, .75); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tj-pop { --tj-blank: #2A2824; --tj-blank-shape: #34312C; --tj-shimmer: rgba(255, 255, 255, .07); }
}
:root[data-theme="dark"] .tj-pop { --tj-blank: #2A2824; --tj-blank-shape: #34312C; --tj-shimmer: rgba(255, 255, 255, .07); }
.tj-sk-l { display: block; height: 11px; width: 80%; border-radius: 6px; }
.tj-sk-l + .tj-sk-l { margin-top: 9px; }
.tj-sk-l.short { width: 50%; height: 9px; }
.tj-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tj-skel .tj-nocover, .tj-sk-l {
  background-color: var(--tj-blank-shape);
  background-image: linear-gradient(100deg, transparent 30%, var(--tj-shimmer) 50%, transparent 70%);
  background-size: 250% 100%; background-repeat: no-repeat; animation: tjshimmer 1.8s ease-in-out infinite;
}
@keyframes tjshimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.tj-empty { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.tj-err { margin: 0; color: var(--warn); font-size: 14px; line-height: 1.5; }
.tj-err[hidden] { display: none; }

.tj-wide {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px;
  border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface);
  color: var(--ink); font: 600 15px/1 var(--body); cursor: pointer; text-decoration: none;
}
.tj-wide:hover { background: var(--sunk); color: var(--ink); }
.tj-wide.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tj-wide.primary:hover { background: var(--accent-dark); color: var(--on-accent); }
/* The menu's Dark mode switch (theme.js): the word on the left, a track on the right. */
.tj-m-theme { justify-content: flex-start; padding: 0 14px; }
.tj-sw { position: relative; margin-left: auto; width: 38px; height: 22px; border-radius: 99px; background: var(--line-strong); transition: background .15s; }
.tj-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.tj-m-theme[aria-checked="true"] .tj-sw { background: var(--accent); }
.tj-m-theme[aria-checked="true"] .tj-sw::after { transform: translateX(16px); }
.tj-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tj-row1 { display: grid; }

/* ---------- the account's links under My Bookshelf (toolbar.js accountLinks) ---------- */
.tj-admin { border-top: 1px solid var(--rule); padding-top: 12px; }
.tj-admin .tj-wide { justify-content: flex-start; padding: 0 14px; border-style: dashed; color: var(--purple-dark); }
:root[data-theme="dark"] .tj-admin .tj-wide { color: var(--purple-tint); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tj-admin .tj-wide { color: var(--purple-tint); } }
.tj-admin .tj-wide small { margin-left: auto; font-weight: 500; color: var(--muted); font-size: 12px; }

/* ---------- the menu panel (tablet: sections; phone: everything) ---------- */
.tj-menupanel {
  position: absolute; top: calc(100% + 8px); right: 16px; width: 280px; z-index: 40;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-float, 0 18px 48px rgba(28, 36, 38, .14)); padding: 16px;
  display: grid; gap: 18px; animation: tjpop .16s ease-out; text-align: left;
}
.tj-menupanel[hidden] { display: none; }
.tj-menupanel > .tj-m-close { display: none; }
.tj-menupanel > :is(.tj-m-acct, .tj-m-out, .tj-m-shelf, .tj-m-signout) { display: none !important; }
.tj-m-nav { display: grid; gap: 2px; }
.tj-m-nav a { padding: 10px 8px; margin: 0 -8px; border-radius: var(--r-small); color: var(--ink); text-decoration: none; font-weight: 500; font-size: 16px; }
.tj-m-nav a:hover { background: var(--sunk); }

.tj-scrim { position: fixed; inset: 0; z-index: 25; background: rgba(20, 24, 26, .38); }
.tj-scrim[hidden] { display: none; }

/* ---------- the Sign in modal ---------- */
.tj-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(20, 24, 26, .5); animation: tjfade .15s; }
@keyframes tjfade { from { opacity: 0; } }
.tj-sheet {
  position: relative; width: min(100%, 440px); max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--surface); color: var(--ink); border-radius: var(--r-rail); padding: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .3); display: grid; gap: 16px; animation: tjpop .2s ease-out; text-align: left;
}
.tj-sheet h2 { margin: 0; font: 600 28px/1.15 var(--display); text-wrap: balance; }
.tj-sheet p { margin: 0; line-height: 1.55; }
.tj-sheet .lede { color: var(--muted); }
.tj-sheet .note { font-size: 13px; color: var(--muted); }
.tj-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--sunk); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.tj-google { display: flex; align-items: center; justify-content: center; gap: 12px; height: 52px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font: 600 16px/1 var(--body); cursor: pointer; }
.tj-google:hover { background: var(--sunk); }
.tj-google[disabled] { opacity: .7; cursor: progress; }
.tj-sheet .tj-google .g { width: 20px; height: 20px; stroke: none; }
/* The Sign in box wears the front door's type (picturebook.css --pb-display, --pb-ui; reader.css
   @font-face), so it reads as the door's own box (Anurag, 21 Oct 2026). */
.tj-signin .tj-sheet { --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-family: var(--body); }
.tj-signin .tj-sheet h2 { font-weight: 400; font-size: clamp(28px, 8vw, 34px); letter-spacing: -.01em; padding-right: 44px; }

/* The front door's slim bar (/picturebook, front door v4): the logo, and Sign in, or for
   someone signed in their bookshelf (Anurag 2026-10-17: the bookshelf icon he sees on the home
   page). Nothing else at any width. */
.tj-bar.tj-slim .sitenav, .tj-bar.tj-slim .tj-new, .tj-bar.tj-slim .tj-menu,
.tj-bar.tj-slim .tj-acts > [data-signout] { display: none !important; }
.tj-bar.tj-slim .tj-acts > [data-signin] { height: 36px; padding: 0 14px; font-size: 14px; }

/* The account's own screens (shell.js barKind "app": Your books, Orders & receipts): Create a
   book and the bookshelf, but not the home page's section links. Signed in, the door
   and these screens keep the rest in the menu at every width: the account, Dark mode, FAQ and
   Sign out (toolbar review, Anurag 18 October 2026: the door had no way to sign out). */
.tj-bar.tj-app .sitenav, .tj-bar.tj-app .tj-acts > [data-signout] { display: none !important; }
.tj-bar.tj-app .tj-menu, .tj-bar.tj-slim[data-auth="in"] .tj-menu { display: inline-flex !important; }
.tj-bar:is(.tj-app, .tj-slim) .tj-m-nav a:not([href="/#faq"]) { display: none; }
.tj-bar:is(.tj-app, .tj-slim)[data-auth="in"] .tj-menupanel > .tj-m-acct { display: grid !important; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; }
.tj-bar:is(.tj-app, .tj-slim)[data-auth="in"] .tj-menupanel > .tj-m-signout { display: flex !important; }
.tj-bar:is(.tj-app, .tj-slim) .tj-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-dark); font: 600 17px var(--body); }
.tj-bar:is(.tj-app, .tj-slim) .tj-m-acct b { display: block; font-size: 15px; overflow-wrap: anywhere; }
/* The door's bar holds the bookshelf at every width: the menu doesn't repeat it. */
.tj-bar.tj-slim .tj-menupanel > .tj-m-shelf { display: none !important; }

/* ---------- widths ---------- */
@media (max-width: 1279px) {
  .tj-bar[data-auth="in"] .sitenav { display: none; }
  .tj-bar[data-auth="in"] .tj-menu { display: inline-flex; }
}
@media (max-width: 1023px) {
  .tj-bar .sitenav { display: none; }
  .tj-bar .tj-menu { display: inline-flex; }
}
@media (max-width: 1100px) { .tj-bar { gap: 12px; } }
@media (max-width: 900px) {
  .tj-new .long { display: none; }
  .tj-new .short { display: inline; }
  .tj-bar .tj-btn { padding: 0 12px; }
}

@media (max-width: 720px) {
  /* backdrop-filter would make the bar the box the bottom sheets are fixed to. */
  .tj-bar { gap: 8px; }
  .topbar.tj-bar[data-auth] { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tj-bar .brand .logomark { height: 28px; }
  .tj-acts { gap: 6px; }
  /* [id=…], never #shelfBtn: the build wraps this list in :is(), which weighs every entry as its
     heaviest, and an id there outweighed the slim bar's Sign in below (a visitor's phone had none). */
  .tj-acts > [data-signin], .tj-acts > .tj-drop:has([id="shelfBtn"]), .tj-acts > [data-signout] { display: none !important; }
  .tj-bar.tj-slim[data-auth="out"] .tj-acts > [data-signin] { display: inline-flex !important; }
  .tj-bar.tj-slim[data-auth="in"] .tj-acts > .tj-drop:has(#shelfBtn) { display: block !important; }
  .tj-bar .go.tj-new { height: 40px; padding: 0 14px 0 11px; font-size: 14px; box-shadow: none; margin-left: 0; }
  .tj-bar .tj-menu { width: 40px; height: 40px; }

  /* Every dropdown becomes a sheet from the bottom, over a scrim. */
  .tj-pop, .tj-menupanel {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: calc(100dvh - 72px); overflow: auto;
    border-radius: var(--r-rail) var(--r-rail) 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    animation: tjup .22s ease-out;
  }
  .tj-menupanel { padding-top: 64px; }
  .tj-menupanel > .tj-m-close { display: grid; }
  @keyframes tjup { from { transform: translateY(24px); opacity: 0; } }
  .tj-menupanel > .tj-m-acct, .tj-menupanel > .tj-m-shelf { display: grid !important; }
  /* Sign out is a .tj-wide button (icon and word in one row); as a grid it stacked the word under its icon. */
  .tj-menupanel > .tj-m-signout { display: flex !important; }
  .tj-bar[data-auth="out"] .tj-menupanel > .tj-m-out { display: grid !important; }
  .tj-bar[data-auth="out"] .tj-menupanel [data-in] { display: none !important; }
  .tj-m-shelf, .tj-m-acct { gap: 12px; }
  .tj-m-shelf { padding-top: 16px; border-top: 1px solid var(--rule); }
  .tj-m-nav { padding-top: 16px; border-top: 1px solid var(--rule); }
  .tj-m-acct { grid-template-columns: 44px 1fr; align-items: center; }
  .tj-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-dark); font: 600 17px var(--body); }
  .tj-m-acct b { display: block; font-size: 15px; overflow-wrap: anywhere; }
  .tj-sheet { padding: 24px 18px; }
  .tj-sheet h2 { font-size: 24px; }
}
@media (min-width: 721px) {
  .tj-scrim { display: none; }
}
@media (max-width: 360px) {
  .tj-bar .brand .logomark { height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .tj-pop, .tj-menupanel, .tj-sheet, .tj-modal { animation: none; }
}

/* ---------- the dark bar, on every page (Anurag 2026-09-30; the look he approved inside a book, studio.css) ----------
   Deep ink with a slow aurora in the logo's colours behind it, a gold line along its foot, the
   white wordmark. What the bar holds is unchanged; only its colours are: links, hovers and focus rings
   are drawn for a dark ground, and the panels that hang from it keep their own light
   (or dark-theme) surface and ink. It is dark in both themes, like the studio's. */
.topbar.tj-bar[data-auth] {
  --bar-ink0: #0E141B; --bar-ink1: #151E2A; --bar-teal: #60A9B3; --bar-coral: #EB7D80;
  --bar-dim: rgba(255, 255, 255, .8); --bar-hair: rgba(255, 255, 255, .14);
  color: #fff; border-bottom: 0; gap: 8px;
  background: linear-gradient(90deg, var(--bar-ink0), var(--bar-ink1) 45%, var(--bar-ink0));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 10px 30px -18px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* The aurora is the studio's (studio.css .st-aurora): soft blurred blooms in the logo's colours,
   drifting, on a layer that clips itself so the bar's cards can still hang below it. The studio
   lays its own, so inside a book this one steps aside (studio.css). */
.tj-bar > :is(.brand, .sitenav, .tj-acts) { position: relative; }
.tj-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tj-aurora::before { content: ""; position: absolute; inset: -60% -5%; filter: blur(28px);
  background:
    radial-gradient(28% 70% at 12% 50%, color-mix(in srgb, var(--orange) 42%, transparent), transparent 65%),
    radial-gradient(26% 70% at 46% 30%, color-mix(in srgb, var(--bar-teal) 40%, transparent), transparent 65%),
    radial-gradient(24% 70% at 72% 70%, color-mix(in srgb, var(--bar-coral) 34%, transparent), transparent 65%),
    radial-gradient(22% 70% at 92% 40%, color-mix(in srgb, var(--gold) 34%, transparent), transparent 65%); }
@media (prefers-reduced-motion: no-preference) {
  .tj-aurora::before { animation: tj-aurora 16s ease-in-out infinite alternate; }
  @keyframes tj-aurora { to { transform: translateX(6%) scale(1.08); } }
}
/* The studio's edges and logo (Anurag 2026-10-08, "the studio header is the approved toolbar"):
   16px in from each side, the 30px wordmark with a soft shadow and a hairline after it. */
@media (min-width: 721px) {
  .topbar.tj-bar[data-auth] { padding: 0 16px; }
  .tj-bar .brand .logomark { height: 30px; }
}
.topbar.tj-bar[data-auth] .brand { box-sizing: border-box; height: 32px; align-self: center; padding-right: 12px; margin-right: 4px;
  border-right: 1px solid var(--bar-hair); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }
.topbar.tj-bar[data-auth]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 60%, transparent) 30%, color-mix(in srgb, var(--bar-teal) 55%, transparent) 70%, transparent); }
/* The wordmark for a dark ground (brand/logo-dark.svg): the same drawing with its two themed colours set for it. */
.tj-bar .brand { --logo-ink: #fff; --logo-star: #fff; }
.tj-bar .sitenav a { color: var(--bar-dim); }
.tj-bar .sitenav a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; }
.tj-bar .tj-btn { color: #fff; }
.tj-bar .tj-btn:hover { background: rgba(255, 255, 255, .12); }
.tj-bar .tj-btn.line { border-color: var(--bar-hair); background: rgba(255, 255, 255, .06); }
.tj-bar .tj-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .16); border-color: var(--gold); color: #fff; }
:is(.tj-bar .brand, .tj-bar .sitenav a, .tj-bar .tj-acts > .tj-btn, .tj-bar .tj-drop > .tj-btn, .tj-bar .go):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; box-shadow: none; }
/* What hangs from the bar keeps a light (or, in the dark theme, dark) surface with its own ink. */
.tj-bar :is(.tj-pop, .tj-menupanel) { color: var(--ink); }

/* ---------- names for the bar's icons (Anurag 2026-09-30) ----------
   An icon with no word (My Bookshelf, the menu) says what it is on hover, on keyboard
   focus and while it is pressed and held (a phone has no hover; the browser's own title tip
   never shows on touch). The words are the button's data-tip, and its aria-label says the same
   to a screen reader. Not shown while the button's own card is open: the card is the answer. */
.tj-bar [data-tip] { position: relative; }
.tj-bar [data-tip]::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  padding: 6px 10px; border-radius: var(--r-small); background: #0E141B; color: #fff; border: 1px solid var(--bar-hair, rgba(255, 255, 255, .16));
  font: 600 13px/1.2 var(--body); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(-4px); transition: opacity .12s, transform .12s;
}
.tj-bar [data-tip]:is(:hover, :focus-visible, :active):not([aria-expanded="true"])::after { opacity: 1; transform: none; transition-delay: .25s; }
.tj-bar [data-tip]:active:not([aria-expanded="true"])::after { transition-delay: 0s; }
.tj-bar [data-tip]:disabled::after { display: none; }
@media (prefers-reduced-motion: reduce) { .tj-bar [data-tip]::after { transition: none; } }
/* Press and hold on a phone must not open the browser's own menu or select the icon. */
.tj-bar [data-tip] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* The email-code part of the sign-in boxes (src/email-code.js): the sheet, the toolbar's modal and
   the signed-out screen all wear it. Here, in the toolbar's sheet, because the landing site links
   only this file and the app loads it on every screen (shell.js). */
.ec { display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; }
.ec-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.ec-divider::before, .ec-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.ec-input { box-sizing: border-box; width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); font: 500 16px var(--body); }
.ec-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ec-code { text-align: center; letter-spacing: .4em; font-size: 22px; }
/* Email me a code and Sign in: the site's green pill (character.css .btn-cs.primary; Anurag, 21 Oct 2026). */
.ec-btn { height: 48px; border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font: 600 16px var(--body); cursor: pointer; }
.ec-btn:hover:not([disabled]) { background: var(--accent-dark); }
.ec-btn[disabled] { opacity: .7; cursor: progress; }
.ec-more { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }
.ec-link { padding: 4px 0; border: 0; background: none; color: var(--accent); font: 600 14px var(--body); cursor: pointer; text-decoration: underline; }
.ec-link[disabled] { opacity: .6; cursor: progress; }
.ec-sent, .ec-note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.ec-err { margin: 0; color: var(--warn); font-size: 14px; line-height: 1.5; }
.ec-note:empty, .ec-err:empty { display: none; }

/* The front door's slim bar is v5's (Anurag 2026-10-16, "Your v5 is approved"): the site's dark
   bar, 56px, the white wordmark, and Sign in as an outlined pill. Only on /picturebook. */
.topbar.tj-bar.tj-slim[data-auth] { height: 56px; min-height: 56px; }
.topbar.tj-bar.tj-slim[data-auth] .brand { border-right: 0; padding-right: 0; }
.tj-bar.tj-slim .tj-acts > [data-signin] { border-radius: 999px; padding: 0 16px; border: 0;
  background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); color: #fff; }
.tj-bar.tj-slim .tj-acts > [data-signin]:hover { background: rgba(255, 255, 255, .1); }
/* The menu's Studio links box (toolbar.js studioSwitch), an admin's alone: the word, the box at the right. */
.tj-m-studio { justify-content: flex-start; padding: 0 14px; cursor: pointer; }
.tj-m-studio input { margin-left: auto; width: 18px; height: 18px; accent-color: var(--accent); }
.tj-admin .tj-m-studio { margin-top: 8px; }