/* The site menu, shared by every page (home, preview, book, legal pages).
   Only tb- classes, so it can sit next to the book's own styles.
   In RTL the order reads (left to right): כניסה לספר, מה בספר, הצצה לספר, איך מקבלים, שאלות. */
.topbar{position:sticky; top:0; z-index:30; background:var(--paper,#FFFEF8); border-bottom:2.5px solid var(--ink,#23264A); color:var(--ink,#23264A)}
.tb-in{max-width:1120px; margin:0 auto; padding:10px max(16px, env(safe-area-inset-left,0px)); display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap}
.tb-brand{font:700 21px var(--f-display); color:var(--ink,#23264A); text-decoration:none; white-space:nowrap}
.tb-brand .tb-name{color:var(--tupi,#E5589B)}
.tb-nav{display:flex; gap:18px; margin-inline-start:auto}
.tb-nav a{color:var(--ink,#23264A); text-decoration:none; font:600 16px var(--f-display); white-space:nowrap}
.tb-nav a:hover{text-decoration:underline}
.tb-btn{display:inline-flex; align-items:center; justify-content:center; padding:7px 14px; background:var(--paper,#FFFEF8); color:var(--ink,#23264A);
  border:2.5px solid var(--ink,#23264A); border-radius:var(--r-hand); box-shadow:3px 3px 0 var(--ink,#23264A);
  font:600 16px var(--f-display); text-decoration:none; cursor:pointer; white-space:nowrap}
.tb-btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink,#23264A)}
.tb-btn:hover{background:var(--hh-soft,#FFE793)}
.tb-btn[aria-current="page"]{background:var(--hh,#F5B800)}
.topbar a:focus-visible, .topbar button:focus-visible{outline:3px solid var(--bd,#2F6BE0); outline-offset:3px}
/* signed-in controls on the book page */
.tb-acct{display:flex; align-items:center; gap:8px}
.tb-who{font:400 14px var(--f-body); color:var(--ink-soft,#5A5E85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:22vw}
.tb-acct .tb-btn{padding:5px 11px; font-size:14px; box-shadow:2px 2px 0 var(--ink,#23264A)}

/* phones: brand and buttons on the first row, the menu links on a second row */
@media (max-width:760px){
  .tb-nav{order:3; width:100%; margin:0; justify-content:space-between; gap:12px; overflow-x:auto; padding-top:8px; border-top:1.5px dashed var(--line,#CDD1E4)}
  .tb-nav a{font-size:15px}
  .tb-btn, .tb-acct{margin-inline-start:auto}
  .tb-who{display:none}
}
@media (max-width:400px){
  .tb-in{gap:8px 10px}
  .tb-brand{font-size:18px}
  .tb-nav a{font-size:14px}
  .tb-acct .tb-btn{padding:4px 8px; font-size:13px}
  .topbar.has-acct .tb-pre{display:none}  /* only "תופי" next to the account buttons */
}
@media print{ .topbar{display:none} }