/* =====================================================================
   MB SUITE v3.2.1 · STANDARD TOP BAR  (2026-10-14)  · mb-suite-topbar v3.2.1
   Load LAST, after every other stylesheet / <style> block in the app.
   One look for the page bar in every app, on every screen size.

   Order inside .page-bar .actions (leave out what the app doesn't have):
     [search] · [extra icon tools, e.g. Undo] · [backup chip, desktop only] · Data · theme switch · [primary] · [More ≡]

   Classes (add to the app's EXISTING elements; keep their ids, data-* and handlers):
     .tb            every button in the bar (search, Data, tools, More)
     .tb-lbl        the text inside a .tb  → hidden on phones (icon only)
     .tb-chev       Data's chevron           → hidden on phones
     .tb-dot        the "no recent backup" dot inside Data (app JS still toggles [hidden])
     .tb-primary    the view's main action (accent fill). Must contain an icon + .tb-lbl and an aria-label.
     .tb-opt        optional tool that may drop out on very narrow phones (≤380px)
     .themesw       theme switch, standard markup only:
       <button class="themesw" role="switch" aria-checked="false" aria-label="Dark mode">
         <span class="tk"><svg class="i-sun">…</svg><svg class="i-moon">…</svg><i class="th"></i></span>
       </button>
   Sizes: desktop/tablet 36px controls; phones (<768px) 42px. Bar 56px. Icons 18px.
   ===================================================================== */
:root{
  --tb-h:36px; --tb-gap:6px; --tb-ic:18px;
}
@media (max-width:767px){ :root{ --tb-h:42px; --tb-gap:4px } }

.page-bar{min-height:56px}
.page-bar .actions{display:flex;align-items:center;gap:var(--tb-gap);margin-left:auto;flex:none;flex-wrap:nowrap}
.page-bar .actions > *{min-height:0}

/* ---- every bar button ---- */
.page-bar .actions .tb{
  box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:var(--tb-h);min-height:var(--tb-h);min-width:var(--tb-h);padding:0 11px;margin:0;
  border:1px solid var(--border-strong,var(--border,#cfd4db));border-radius:var(--r-sm,6px);
  background:var(--surface,#fff);color:var(--ink-2,#3a414a);
  font:500 13.5px/1 var(--font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);letter-spacing:0;text-decoration:none;white-space:nowrap;
  box-shadow:none;cursor:pointer;list-style:none;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease}
.page-bar .actions .tb::-webkit-details-marker{display:none}
.page-bar .actions .tb:hover{background:var(--surface-2,#f3f4f6);border-color:var(--border-strong,#c3c9d1);color:var(--ink,#1b1f24)}
.page-bar .actions .tb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.page-bar .actions .tb:disabled,.page-bar .actions .tb[aria-disabled="true"]{opacity:.45;cursor:default;background:var(--surface,#fff)}
.page-bar .actions .tb[aria-expanded="true"],details[open] > .tb{background:var(--accent-soft,var(--surface-2));border-color:var(--accent-line,var(--accent));color:var(--accent)}
.page-bar .actions .tb > svg,.page-bar .actions .tb > .uic,.page-bar .actions .tb > .i,.page-bar .actions .tb > .icon,.page-bar .actions .tb > .ic{
  flex:none;width:var(--tb-ic);height:var(--tb-ic);margin:0}
.page-bar .actions .tb > .tb-chev{width:13px;height:13px;margin-left:-2px;opacity:.7}
.page-bar .actions .tb kbd{display:none}
.page-bar .actions .tb-lbl{display:inline}

/* icon-only buttons stay square */
.page-bar .actions .tb:not(:has(.tb-lbl)){width:var(--tb-h);padding:0}

/* backup-status dot on Data */
.page-bar .actions .tb .tb-dot{position:absolute;top:4px;right:4px;left:auto;bottom:auto;width:8px;height:8px;margin:0;border-radius:2px;
  background:var(--warn,#e5a100);box-shadow:0 0 0 2px var(--surface,#fff);display:block}
.page-bar .actions .tb .tb-dot[hidden]{display:none}

/* primary action */
.page-bar .actions .tb.tb-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff);font-weight:600}
.page-bar .actions .tb.tb-primary:hover{background:var(--accent-hover,var(--accent));border-color:var(--accent-hover,var(--accent));color:var(--accent-ink,#fff)}

/* ---- standard theme switch ---- */
.page-bar .themesw{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:none;
  height:var(--tb-h);min-height:var(--tb-h);width:auto;min-width:0;padding:0 2px;margin:0;border:0;border-radius:var(--r-sm,6px);background:none;box-shadow:none;cursor:pointer}
.page-bar .themesw .tk{position:relative;display:inline-flex;align-items:center;justify-content:space-between;box-sizing:border-box;
  width:52px;height:28px;padding:0 6px;border-radius:var(--r-sm,6px);background:var(--surface-2,#eef0f3);border:1px solid var(--border-strong,#cfd4db);color:var(--muted,#6b7280)}
.page-bar .themesw .tk svg{position:relative;z-index:1;width:14px;height:14px;flex:none;display:block}
.page-bar .themesw .th{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:4px;background:var(--accent);box-shadow:none;transform:none;transition:transform .12s ease}
.page-bar .themesw[aria-checked="true"] .th{transform:translateX(24px)}
.page-bar .themesw[aria-checked="false"] .i-sun,.page-bar .themesw[aria-checked="true"] .i-moon{color:var(--accent-ink,#fff)}
.page-bar .themesw:hover .tk{border-color:var(--accent-line,var(--accent))}
.page-bar .themesw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.page-bar .themesw > :not(.tk){display:none}   /* no text labels beside the switch */

/* backup chip: desktop only, same height as the buttons */
.page-bar .actions .tb-chip{min-height:var(--tb-h);box-sizing:border-box}
@media (max-width:1023px){ .page-bar .actions .tb-chip{display:none} }
/* .tb sets display, so re-assert the kit's hide-phone helper for bar items */
@media (max-width:767px){ .page-bar .actions .hide-phone,.page-bar .actions .tb.hide-phone{display:none} }

/* ---- desktop: show the keyboard hint on Search ---- */
@media (min-width:1024px){
  .page-bar .actions .tb kbd{display:inline-block;margin-left:2px;padding:1px 5px;border:1px solid var(--border,#dfe2e7);border-radius:3px;
    background:var(--surface-2,#f3f4f6);font:500 11px/1.4 var(--font,system-ui);color:var(--muted,#6b7280)}
}

/* ---- phones: brand left, square icon controls right, nothing truncated ---- */
@media (max-width:767px){
  .page-bar{gap:6px}
  .page-bar .phone-brand{flex:0 1 auto;min-width:0}
  .page-bar .actions .tb-lbl,.page-bar .actions .tb-chev,.page-bar .actions .tb kbd{display:none}
  .page-bar .actions .tb{width:var(--tb-h);padding:0}
  .page-bar .themesw .tk{width:50px}
  .page-bar .themesw[aria-checked="true"] .th{transform:translateX(22px)}
}
@media (max-width:380px){
  .page-bar .actions .tb-opt{display:none}
  .page-bar .brand b{font-size:14px}
}
@media print{ .page-bar .actions{display:none!important} }

/* sidebar brand: same position in every app (left-aligned, full width) */
@media (min-width:1024px){ .mb-side > a.brand{align-self:stretch;justify-content:flex-start} }

/* =====================================================================
   v3.2.1 · SEARCH, BACKUP CHIP, BRAND, TITLE — identical in every app
   ===================================================================== */

/* ---- Search: one control that looks like a search field, in every app ----
   Button apps:  <button class="tb tb-search" …><svg search/><span class="tb-lbl">Search…</span><kbd>/</kbd></button>
   Field apps:   <label class="tb tb-search"> (or a div)<svg search/><input type="search" placeholder="Search…" aria-label="Search notes"><kbd>/</kbd></label>
   Same width, height, border, icon, text color and "/" hint either way. Phones: square icon button. */
.page-bar .actions .tb.tb-search{width:240px;min-width:0;justify-content:flex-start;gap:8px;padding:0 6px 0 10px;
  background:var(--surface,#fff);color:var(--muted,#6b7280);font-weight:400;cursor:text}
.page-bar .actions .tb.tb-search:hover{background:var(--surface,#fff);border-color:var(--accent-line,var(--accent))}
.page-bar .actions .tb.tb-search .tb-lbl{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis}
.page-bar .actions .tb.tb-search > svg,.page-bar .actions .tb.tb-search > .uic,.page-bar .actions .tb.tb-search > .icon{position:static;transform:none;inset:auto;color:var(--muted,#6b7280);pointer-events:none}
/* the field inside is borderless: the .tb wrapper draws the box (beats app/Tailwind input rules) */
.page-bar .actions .tb.tb-search input[type=search]{border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;min-height:0!important;height:100%!important;border-radius:0!important}
.page-bar .actions .tb.tb-search input{flex:1;min-width:0;width:auto;height:100%;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;outline:none;
  font:400 13.5px/1 var(--font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);color:var(--ink,#1b1f24);-webkit-appearance:none;appearance:none}
.page-bar .actions .tb.tb-search input::placeholder{color:var(--muted,#6b7280);opacity:1}
.page-bar .actions .tb.tb-search input::-webkit-search-cancel-button{margin-right:2px}
.page-bar .actions .tb.tb-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft,transparent)}
.page-bar .actions .tb.tb-search kbd{margin-left:auto}
@media (max-width:1279px){ .page-bar .actions .tb.tb-search{width:200px} }
@media (max-width:1023px){ .page-bar .actions .tb.tb-search{width:var(--tb-h);padding:0;justify-content:center;cursor:pointer} .page-bar .actions .tb.tb-search .tb-lbl{display:none} }
@media (max-width:1023px){ .page-bar .actions .tb.tb-search:has(input){width:180px;padding:0 6px 0 10px;justify-content:flex-start;cursor:text} }

/* ---- Backup chip: neutral with a status square; amber when a backup is due ----
   App JS toggles .warn on the chip (never backed up / backup overdue). Auto's older .stale class works too. */
.page-bar .actions .tb-chip{display:inline-flex;align-items:center;gap:7px;height:var(--tb-h);min-height:var(--tb-h);padding:0 10px;margin:0;
  border:1px solid var(--border,#dfe2e7);border-radius:var(--r-sm,6px);background:var(--surface,#fff);color:var(--muted,#6b7280);
  font:500 12.5px/1 var(--font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);white-space:nowrap;box-shadow:none;cursor:pointer}
.page-bar .actions .tb-chip > svg,.page-bar .actions .tb-chip > .bk-ic,.page-bar .actions .tb-chip > i{display:none}
.page-bar .actions .tb-chip::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:color-mix(in srgb,var(--muted,#6b7280) 55%,transparent)}
.page-bar .actions .tb-chip.ok::before{background:var(--good,#16a34a)}
.page-bar .actions .tb-chip:hover{background:var(--surface-2,#f3f4f6);color:var(--ink,#1b1f24)}
.page-bar .actions .tb-chip:is(.warn,.stale){background:color-mix(in srgb,var(--warn,#e5a100) 12%,var(--surface,#fff));border-color:color-mix(in srgb,var(--warn,#e5a100) 50%,transparent);color:var(--warn-ink,#7a5200);font-weight:600}
.page-bar .actions .tb-chip:is(.warn,.stale)::before{background:var(--warn,#e5a100)}
.page-bar .actions .tb-chip[hidden]{display:none}
@media (max-width:1023px){ .page-bar .actions .tb-chip{display:none} }

/* ---- Brand block + page title: same size and spacing everywhere ---- */
a.brand{gap:9px}
a.brand .logo,a.brand .logo svg{width:28px;height:28px}
a.brand .bt b{font-size:14.5px;font-weight:650;letter-spacing:-.005em;line-height:1.15}
a.brand .bt > span{font-size:11px;font-weight:400;line-height:1.15;color:var(--muted,#6b7280)}
@media (min-width:1024px){ .mb-side > a.brand{margin:0 8px 12px;padding:6px 8px} }
.page-bar .page-title{font-size:18px;font-weight:650;letter-spacing:-.01em;line-height:1.2;margin:0}

/* phones: show just the app name; the .mcbflow.com ending is hidden to keep the header on one line */
@media (max-width:600px){ .phone-brand .tld{display:none} }