/* ══════════════════════════════════════════════════════════════════════
   OWLMARK — TOOLBAR CHROME
   Two corrections to the app's own bars, loaded last so they hold.

   1. The main toolbar is a nowrap flex row inside `.main { overflow:hidden }`,
      so whatever sits at the end — usually the Help owl — was sliced off at
      the right edge. It now scrolls instead of clipping, and its buttons
      stop being squeezed.
   2. The "?" utility button is a labelled About button, parked at the
      right-hand end of the utility group.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1 · one line, nothing clipped ──────────────────────────────────
   The row was overflowing: first it clipped the last button, then it
   wrapped Help onto a second line. The studio name has gone from the
   toolbar (the header already says it twice) and everything left is
   tightened, which buys back enough room for a single row. On a genuinely
   narrow window it scrolls rather than wrapping or slicing. */
.main-toolbar{
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  gap:6px !important;
  padding:8px 16px 8px 14px !important;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.main-toolbar > *{flex-shrink:0 !important}
.main-toolbar::-webkit-scrollbar{height:4px}
.main-toolbar::-webkit-scrollbar-track{background:transparent}
.main-toolbar::-webkit-scrollbar-thumb{background:rgba(201,154,61,.3);border-radius:4px}

/* compact enough to fit: smaller pills, tighter groups, quieter label */
.main-toolbar .tb-btn{
  padding:6px 10px !important;
  font-size:12px !important;
  gap:5px;
}
.main-toolbar .toolbar-group{gap:3px !important}
.main-toolbar .toolbar-sep{margin:0 2px}
.main-toolbar .toolbar-label{font-size:11px !important;letter-spacing:.8px !important;white-space:nowrap}
.main-toolbar .zoom-val{font-size:12px !important}

/* the page-size read-out is the first thing to go when room runs out */
@media (max-width:1280px){
  .main-toolbar #toolbarStatus{display:none !important}
}
@media (max-width:1040px){
  .main-toolbar .toolbar-sep{display:none !important}
  .main-toolbar .tb-btn{padding:6px 8px !important}
}

/* ── 2 · About, at the right-hand end ─────────────────────────────── */
#csHelp.cs-ic{
  order:99;
  width:auto !important;
  min-width:0 !important;
  display:inline-flex !important;
  align-items:center;gap:7px;
  padding:0 14px !important;
  border-radius:999px !important;
  font-family:'Manrope','Nunito',system-ui,sans-serif !important;
  font-size:12px !important;font-weight:800 !important;
  letter-spacing:1.4px;text-transform:uppercase;
  margin-inline-start:auto;
}
#csHelp.cs-ic .om-about-owl{width:16px;height:16px;object-fit:contain;flex:0 0 auto}
.cs-util{margin-inline-start:auto}