/* topbar.css - THE topbar (10/02). Every page with the locked topbar loads this one file; no page carries its own
   copy, so there is nothing to drift. Tokens only (the light-theme token VALUES below are the theme definitions).
   Layout: [home pill][family pills, the open page muted in its slot] .......... [page actions][msg][req][parts][?][theme]
   - every pill and the open page are the SAME box (font, padding, border box), so a pill sits at the same x/y on
     every page of its family; the open page is muted and not a link (aria-current="page")
   - the right cluster: ONE button style for Messages / Requests / Parts / Help / Theme (the bell3 icon style)
   - phones (<700px): the pill group scrolls sideways inside itself; the right cluster always stays on screen */

/* light theme - the values theme.js used to inject late; here they apply before the first paint (html.light is
   set by each page's critical head script from the stored choice) */
html.light body, body.light{
  --bg:#e7e9ef; --surface:#f4f5f8; --surface2:#dde0e8; --border:#c3c7d2;
  --accent:#00a88a; --accent2:#6a5ae0; --warn:#c2410c; --text:#1a1a26;
  --muted:#6b7280; --green:#15803d; --red:#dc2626; --amber:#b45309;
}
html.light body, body.light{background:var(--bg);color:var(--text)}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:env(safe-area-inset-top,0px) 32px 0;
  height:calc(64px + env(safe-area-inset-top,0px));box-sizing:border-box;
  background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;flex-shrink:0}
.tb-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto;overflow-x:auto;scrollbar-width:none}   /* never under the cluster */
.tb-left::-webkit-scrollbar{display:none}
.tb-left > *{flex:none}
.topbar .logo,.topbar .crumb{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:16px;line-height:21px;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 12px;border:1px solid var(--border);border-radius:8px;box-sizing:border-box;white-space:nowrap;
  text-decoration:none;display:inline-block;margin:0}
.topbar .logo{color:var(--accent);cursor:pointer;transition:border-color .15s}
.topbar .logo:hover{border-color:var(--accent)}
.topbar .logo:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.topbar .crumb{color:var(--muted);border-color:transparent;background:var(--surface2);cursor:default}

.topbar-right{display:flex;align-items:center;gap:6px;flex:none}
.topbar-right .pill-btn{order:-2;margin-right:6px}
.topbar-right .tbi{order:1}
.topbar-right .user-area{order:2;margin-left:6px}

/* the right cluster's one button style (= bell3's icons): 34x34, no border, muted; hover / open = surface2 */
.tbi{position:relative;width:34px;height:34px;padding:0;box-sizing:border-box;background:none;border:none;border-radius:8px;
  color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  font:700 16px/1 Inter,system-ui,sans-serif;transition:background .15s,color .15s;margin:0}
.tbi:hover,.tbi[aria-expanded="true"]{background:var(--surface2);color:var(--text)}
.tbi:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tbi > svg{width:19px;height:19px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* "updating..." - shown while a page shows its LAST data from this session and asks the server for fresh. A fixed
   chip under the topbar so it is visible at every width (cached data is never on screen without it). */
#az-updating{display:none;position:fixed;top:72px;left:50%;transform:translateX(-50%);z-index:30;font:600 12px Inter,system-ui,sans-serif;
  color:var(--text);background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:4px 12px;white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.25);pointer-events:none}
#az-updating.on{display:block}

@media (max-width:699px){
  .topbar{padding:env(safe-area-inset-top,0px) 12px 0;gap:8px}
  .topbar .logo,.topbar .crumb{font-size:13px;padding:5px 9px}
  .topbar-right{gap:2px}
  .topbar-right .pill-btn{margin-right:2px}
  /* 10/06 (Art, phone): the home pill is just the hexagon - the words took half the row and pushed the page name off.
     The text stays in the link (screen readers, title), only its size is 0; the icon is drawn by ::before. */
  .topbar .logo.tb-home{font-size:0;padding:5px 10px;letter-spacing:0}
  .topbar .logo.tb-home::before{content:'\2B22';font-size:15px;line-height:1}
  /* the pill row swipes sideways (scrollbar hidden) - a soft fade at its right edge says there is more */
  .tb-left{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)}
}
@media (prefers-reduced-motion:reduce){.tbi,.topbar .logo{transition:none}}

/* the stale lock (topbar.js): while a cached view shows, its controls are visibly not available - the fresh render
   releases them. bell3's panels lock on their own (az-stale-panels). */
html.az-stale body :is(button, input, select, textarea, [role="button"], [onclick]):not(.topbar *):not(.b3-panel *):not(#az-help-modal *):not([data-az-read]),
html.az-stale-panels .b3-panel :is(button, input, select, textarea, [role="button"], [onclick]){opacity:.5;cursor:progress}
#az-updating.nudge{display:block;animation:az-nudge .3s ease-in-out 2}
@keyframes az-nudge{0%,100%{transform:translateX(-50%)}25%{transform:translateX(calc(-50% - 6px))}75%{transform:translateX(calc(-50% + 6px))}}
@media (prefers-reduced-motion:reduce){#az-updating.nudge{animation:none}}
/* My day (Art 10/05): a processing tech's own pace - shown only when /my/pace says so */
.topbar .tb-myday{font:500 12px Inter,sans-serif;color:var(--muted);white-space:nowrap;margin-right:6px;align-self:center;cursor:default}
.topbar .tb-myday b{color:var(--text);font-weight:700}
.topbar .tb-myday b.t-ok{color:var(--green)}.topbar .tb-myday b.t-warn{color:var(--amber)}.topbar .tb-myday b.t-bad{color:var(--red)}
.topbar .tb-myday .tb-mdo{opacity:.7}
@media (max-width:699px){.topbar .tb-myday .tb-mdl,.topbar .tb-myday .tb-mdo{display:none}}

/* 10/13 Back (topbar.js 5.) - first in the pill row on every page but Home */
.topbar .tb-back{flex:none;width:30px;height:34px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font:700 18px/1 Inter,system-ui,sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.topbar .tb-back:hover{border-color:var(--accent);color:var(--accent)}
.topbar .tb-back:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.topbar .tb-back.tb-ph{visibility:hidden;pointer-events:none}   /* Home: the slot kept, so every pill sits at the same x on every page */
/* 10/14 (Vlad): one-tap copy next to order numbers (topbar.js section 6) */
.az-copy{display:inline-flex;align-items:center;justify-content:center;margin-left:4px;padding:0 4px;min-width:20px;height:18px;border:1px solid var(--border,#333);border-radius:5px;background:transparent;color:var(--muted,#888);font-size:11px;line-height:1;cursor:pointer;vertical-align:middle;position:relative}
.az-copy:hover{color:var(--accent,#00d4aa);border-color:var(--accent,#00d4aa)}
.az-copy.az-copied{color:var(--accent,#00d4aa);border-color:var(--accent,#00d4aa)}
.az-copy.az-copied::after{content:'copied';position:absolute;left:100%;margin-left:4px;font-size:11px;color:var(--accent,#00d4aa);white-space:nowrap}