/* ═══════════════════════════════════════════════════════════════════
   OWLMARK STUDIO — RESPONSIVE TOOLBAR
   Companion stylesheet to owlmark-toolbar.js.
   ═══════════════════════════════════════════════════════════════════ */

/* ── The overflow trigger and its menu ───────────────────────────── */
.hd-overflow{position:relative;flex:0 0 auto}
.hd-overflow[hidden]{display:none !important}

.hd-of-trigger svg{width:17px;height:17px}
.hd-of-trigger[aria-expanded="true"]{
  background:rgba(232,201,120,.2);
  border-color:rgba(232,201,120,.5);
}

.hd-of-menu{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:1200;
  min-width:222px;max-width:min(300px, 90vw);
  max-height:min(70vh, 460px);overflow:auto;
  display:flex;flex-direction:column;align-items:stretch;gap:4px;
  padding:8px;border-radius:15px;
  background:linear-gradient(180deg,#FFFDF8,#F6F0E2);
  border:1px solid rgba(201,154,61,.34);
  box-shadow:0 20px 48px rgba(16,26,45,.3),0 2px 6px rgba(16,26,45,.14);
}
.hd-of-menu[hidden]{display:none !important}

/* A control keeps its own markup and handler when it moves; only its
   skin changes, from a dark-header button to a light menu row. */
/* A control parked in the menu must always be visible. Studios carry
   narrow-width header rules that hide buttons positionally (e.g. "the
   button after the language pills"); when the toolbar reorders controls
   into this menu, such a selector could otherwise match a menu row and
   blank it. This guarantees it never can — a menu item is a menu item. */
.hd-of-menu .hd-btn.in-overflow{display:flex !important}

.hd-of-menu .hd-btn.in-overflow{
  width:100%;justify-content:flex-start;gap:11px;
  min-height:44px;padding:9px 12px;
  border-radius:11px;
  background:transparent;border:1px solid transparent;
  color:#101A2D;font-size:.86rem;font-weight:700;
}
.hd-of-menu .hd-btn.in-overflow:hover{background:rgba(201,154,61,.15)}
.hd-of-menu .hd-btn.in-overflow:focus-visible{
  outline:2px solid #B8862F;outline-offset:-2px;background:rgba(201,154,61,.15);
}
.hd-of-menu .hd-btn.in-overflow svg{width:19px;height:19px;flex:0 0 19px;color:#8A6420}
.hd-of-menu .hd-btn.in-overflow img{width:19px;height:19px;flex:0 0 19px}

/* Captions are hidden in the header by the studios' own narrow-width
   rules. Inside the menu there is room, so they come back — an icon
   without a word is exactly what made the old narrow header unreadable. */
.hd-of-menu .hd-btn.in-overflow span{display:inline !important}

/* Pill groups (language) keep their shape but gain a readable row. */
.hd-of-menu .hd-pills.in-overflow{
  width:100%;justify-content:center;
  padding:4px;border-radius:12px;
  background:rgba(16,26,45,.055);border:1px solid rgba(16,26,45,.1);
}
.hd-of-menu .hd-pills.in-overflow button{
  flex:1 1 auto;min-height:38px;color:#3A4257;font-size:.82rem;
}
.hd-of-menu .hd-pills.in-overflow button.active{color:#101A2D}
.hd-of-menu .hd-pills.in-overflow button:focus-visible{
  outline:2px solid #B8862F;outline-offset:2px;
}

.hd-of-home{display:none !important}

body.lang-ar .hd-of-menu{font-family:'Cairo',system-ui,sans-serif}

/* ── Room to press ───────────────────────────────────────────────────
   Header controls measured 30–31px tall. That is tight with a mouse and
   genuinely awkward on the 768–1024px tablets that keep this layout, so
   the row grows a little everywhere and reaches a full 44px target
   wherever the pointer is coarse. */
#studioHeader .hd-btn{min-height:36px}
#studioHeader .hd-pills button{min-height:30px}
#studioHeader #saveName{min-height:36px}

@media (pointer: coarse){
  #studioHeader .hd-btn{min-height:44px;padding-inline:13px}
  #studioHeader .hd-btn.icon{min-width:44px;justify-content:center}
  #studioHeader .hd-pills button{min-height:38px;padding-inline:14px}
  #studioHeader #saveName{min-height:44px}
  .hd-of-trigger{min-width:44px}
}

.hd-of-caption{white-space:nowrap}

/* ── Group, do not shrink ────────────────────────────────────────────
   The studios thinned the header by deleting captions: at 1400px the
   small print went, at 1150px every caption went, leaving a row of
   unlabelled icons. That also made grouping behave oddly — captions
   returning at 1280px pushed FOUR controls into the menu that had been
   on the bar at 1150px, so widening the window hid things.

   Grouping already guarantees the row fits, so captions no longer need
   to be sacrificed for space. They stay, the menu absorbs the surplus,
   and the number of grouped controls falls steadily as the window
   widens instead of jumping about. */
@media (min-width: 761px){
  /* Captions belong to controls. The brand wordmark is not a control —
     it is decoration beside an emblem that already links home — so the
     studios' own rules may go on retiring it at narrow widths. Forcing
     it back cost roughly 150px and left the row overflowing at 768px
     even with every collapsible control already grouped. */
  #studioHeader .hd-btn span,
  #studioHeader .hd-btn.icon span{display:inline}
  #studioHeader .hd-btn.icon span:empty{display:none}

  /* The hidden scrollbar on .hd-center was how surplus controls used to
     disappear silently — 126px of them at 768px, Studio Home among
     them, painted at x=-83. With grouping in place the row should never
     need to scroll, and this makes that a rule rather than a hope. */
  #studioHeader .hd-center{overflow:visible}
}

@media (prefers-reduced-motion: reduce){
  .hd-of-menu,.hd-of-trigger{transition:none !important}
}

@media print{
  .hd-overflow,.hd-of-menu{display:none !important}
}

/* The project name is never grouped away, so it must be able to give a
   little ground instead. It stays comfortably readable and, being an
   input, still scrolls its own content. */
@media (min-width: 761px) and (max-width: 1080px){
  #studioHeader #saveName{min-width:92px;max-width:130px}
}

/* The studios bring the brand's small print back at 1400px. That widened
   .hd-left just enough to push three controls into the menu at 1440px
   that had been on the bar at 1366px — widening the window hid things,
   which is the opposite of what a teacher expects. The strapline now
   waits until there is genuinely room for it, so the count of grouped
   controls only ever falls as the window grows. */
@media (max-width: 1520px){
  #studioHeader .hd-brand-text small{display:none}
}

/* ═══════════════ R1: THE SHARED RTL OVERFLOW ═══════════════
   Every modern studio reported the same ~6px horizontal overflow in
   Arabic at desktop widths, and only in Arabic. Bisecting found it in
   #studioHeader .hd-right.

   The cause: .hd-right is flex:0 0 auto — it will not shrink — while
   Arabic sets several of its labels wider than their English
   equivalents. The row therefore asked for a few pixels more than the
   header had, body clipped them, and the root still reported them as
   scrollable width. No element was visibly off-screen, which is why it
   was hard to see and easy to dismiss.

   Two changes, because either alone leaves a gap:
     · .hd-right may now shrink, so the row can never demand more than
       the header has. It still never wraps, and the toolbar grouping
       from Stage 1C continues to move controls into the More menu long
       before anything is squeezed.
     · overflow-x:clip on the root, so no future element can reintroduce
       a phantom scrollbar. clip rather than hidden: it does not create a
       scroll container, so the sticky header keeps working. */
#studioHeader .hd-right{
  flex-shrink:1;
  min-width:0;
}

/* ═══════════════ THE EDIT PILL ON TOP OF ARRANGE ═══════════════
   Letting .hd-right shrink fixed the Arabic overflow above, but it
   bought that with a worse fault. .hd-right is justify-content:flex-end
   and its children are flex:0 0 auto, so once the group is squeezed
   narrower than its contents the surplus does not disappear — it
   overflows towards the group's START edge. The view-mode pills slid
   left and painted straight over the last button in .hd-center, which
   on Seating is Arrange, the tool's primary action. Two controls, one
   place, and the one underneath still taking the click.

   The group may still give ground, but only as far as its contents:
   min-width:min-content is the floor. Past that the row would rather be
   measured and grouped, which owlmark-toolbar.js now does properly —
   it weighs all three groups against the header, so the few Arabic
   pixels that started this move one more control into More instead of
   being absorbed by an overlap.

   The tooltips and the More menu must still escape the group, so this
   is a width floor and never overflow:hidden. */
#studioHeader .hd-right{
  min-width:min-content;
}

/* Last resort: everything collapsible is already in the More menu and
   the row still will not fit. Scrolling is honest; overlapping is not.
   The scrollbar is visible here precisely because the silent one was
   how controls used to vanish. */
#studioHeader.hd-tight .hd-center{
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(232,201,120,.6) transparent;
}
#studioHeader.hd-tight .hd-center::-webkit-scrollbar{height:5px}
#studioHeader.hd-tight .hd-center::-webkit-scrollbar-thumb{
  background:rgba(232,201,120,.6);border-radius:999px;
}
#studioHeader.hd-tight .hd-center::-webkit-scrollbar-track{background:transparent}

/* The root-level rule lives in owlmark-shell.css, because Studio Home
   and Certificate Studio need it too and never load this file. */


/* ── No hover tooltip inside the overflow menu ───────────────────────
   Icon buttons (sound, focus mode, undo…) carry a data-tip that renders
   as a floating dark tooltip on hover. That tooltip is meant for the
   compact header, where the button is icon-only. Once a button is parked
   in the overflow menu it already shows a full text caption
   (.hd-of-caption), so the tooltip is pure duplication — and worse, it
   floated on top of the menu row, doubling and blurring the label. Kill
   it for any control living in the menu; the caption is the label there.
   Scoped to .in-overflow so the header tooltip is untouched. */
.hd-of-menu .hd-btn.in-overflow[data-tip]::after{
  content:none !important;
  display:none !important;
}