/* system/lib/toolbar-renderer/styles.css
 *
 * The ONLY stylesheet for the Toolbar Renderer lib (see main.js). Linked
 * by hand in index.html next to system/lib/shared-app-styles/styles.css
 * -- the generated block there covers apps only (current best guess,
 * open to revision). Reuses the studio's theme variables (--brand,
 * --card, --line, --slate, --fs-*) with literal fallbacks so the lib
 * still looks right outside the shell.
 *
 * Font Awesome is vendored here, solid font only, and loaded lazily by
 * the browser the first time a glyph is actually drawn. The family name
 * is the lib's own, so it can never collide with another Font Awesome
 * on the page.
 */

@font-face {
  font-family: 'Toolbar Renderer FA Solid';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('./fa-solid-900.woff2') format('woff2');
}

.tbr-root {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--tbr-gap, 8px);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 60px;
  padding: 6px var(--tbr-pad-x, 10px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  text-align: left;
}
.tbr-root::-webkit-scrollbar { display: none; }

/* Density (1.5.21; current best guess, open to revision): a host that has
   less room than a phone's full width may set these custom properties on
   the container it hands to renderToolbar() (the Animations screen's
   preview does, so seven tools fit): --tbr-size (button side, default
   48px; never below the 44px touch minimum), --tbr-gap (8px) and
   --tbr-pad-x (10px). A row that still has more tools than fit scrolls
   INSIDE its own container (overflow-x above), never the page. */

.tbr-btn {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--tbr-size, 48px);
  min-width: 44px;
  height: var(--tbr-size, 48px);
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 2px solid var(--brand, #3b6fd6);
  background: var(--card, #fff);
  color: var(--brand, #3b6fd6);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--fs-sm, 14px);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Pressed state only: no side effects on tap yet. */
.tbr-btn:active {
  background: rgba(59, 111, 214, 0.14);
}

.tbr-fa {
  font-family: 'Toolbar Renderer FA Solid';
  font-weight: 900;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.tbr-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  pointer-events: none;
}

.tbr-letters {
  letter-spacing: 0.02em;
  max-width: 100%;
  padding: 0 2px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A declared shortName is shown verbatim; longer ones shrink to fit the
   fixed-size button, and past four characters also ellipsize. */
.tbr-letters--3 { font-size: 12px; letter-spacing: 0; }
.tbr-letters--4 { font-size: 10px; letter-spacing: 0; }
.tbr-letters--long { font-size: 9px; letter-spacing: 0; }

/* Role "branch mark" (toolbar-vocabulary.md): a small filled corner mark on a tool that is a PARENT (it has child
   tools, or the manifest says `parent: true`), hinting that tapping enters it. Colour: --tbr-branch-mark. */
.tbr-btn--branch {
  position: relative;
}
.tbr-btn--branch::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  border-style: solid;
  border-width: 0 0 9px 9px;
  border-color: transparent transparent var(--tbr-branch-mark, var(--brand, #3b6fd6)) transparent;
}

/* Role "current" (toolbar-vocabulary.md). The open (highlighted) tool: inverted fill, an outer ring and an
   underline bar, so it never relies on colour alone. Tapping it goes
   back one level. Since 1.5.22 only the DEEPEST entered tool has this
   look; its entered ancestors (breadcrumbs, below) get a quieter one. */
.tbr-btn--open {
  background: var(--brand, #3b6fd6);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(59, 111, 214, 0.35);
}
.tbr-btn--open::after {
  content: '';                  /* its own, so a current tool that is not a branch (a prefix item) has the bar too */
  position: absolute;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  border-width: 0;
  right: 8px;
  left: 8px;
  bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
}

/* Role "ancestor" / crumb (toolbar-vocabulary.md). A breadcrumb (1.5.22; current best guess, open to revision): an entered
   ancestor that stays on the left of the deepest tool. A quieter "open"
   look so only the deepest one reads as current: a tint, a thin ring, a
   little dimmer, no corner notch (it is open, not closed). Tapping it
   makes it the active level (the deeper ones are dismissed). Tunable from outside through three CSS
   custom properties (set them on the container, or on :root), so a
   settings screen can wire to them later without touching this file:
     --tbr-crumb-fill     background   (default: a light tint of the brand colour; stronger in dark mode, see below)
     --tbr-crumb-ring     box-shadow   (default: a thin 2px ring)
     --tbr-crumb-opacity  opacity      (default: 0.9) */
.tbr-btn--crumb {
  background: var(--tbr-crumb-fill, rgba(59, 111, 214, 0.16));
  box-shadow: var(--tbr-crumb-ring, 0 0 0 2px rgba(59, 111, 214, 0.28));
  opacity: var(--tbr-crumb-opacity, 0.9);
}
.tbr-btn--crumb::after {
  display: none;
}
/* Dark mode (Oct 2026; current best guess, open to revision): the studio themes dark with prefers-color-scheme only. In dark
   the light crumb look (faint tint, thin dim ring, 0.9) was too close to a plain tool, so the dark defaults are stronger:
   the dark-theme brand tint, a thicker brighter ring, full opacity and the light brand text; still dimmer than `current`
   (solid fill) and unlike `lit` (warm colour, dot, glow). These numbers mirror prefs.js CRUMB_DEFAULTS_DARK, which main.js
   writes on :root (and re-writes when the scheme changes), so a value the user saved wins in both schemes. */
@media (prefers-color-scheme: dark) {
  :root {
    --tbr-crumb-fill: rgba(109, 151, 239, 0.32);
    --tbr-crumb-ring: 0 0 0 3px rgba(109, 151, 239, 0.7);
    --tbr-crumb-opacity: 1;
  }
  .tbr-btn--crumb { color: var(--brand-deep, #b9cbf7); }
}

/* Role "lit" (1.5.23; toolbar-vocabulary.md; current best guess, open to revision): a toggle that is ON, or a multi-state
   tool whose current state says `lit: true`. Deliberately unlike "current" (inverted fill + ring + underline bar) and
   "ancestor" (quiet brand tint + thin ring): a WARM colour, an inner ring, a soft glow AND a solid dot in the top-left
   corner, so it never relies on colour alone. Tunable through custom properties (set on the container or :root; the
   lib's prefs set them from litColor / litFillAlpha / litRingWidthPx / litGlowPx, see prefs.js litStyleVars()):
     --tbr-lit-color  the solid colour (border, dot)        --tbr-lit-fill  tint over the card colour
     --tbr-lit-ring   an inset box-shadow (the inner ring)   --tbr-lit-glow  an outer box-shadow (the glow) */
.tbr-btn--lit {
  border-color: var(--tbr-lit-color, #d97706);
  background-image: linear-gradient(var(--tbr-lit-fill, rgba(217, 119, 6, 0.14)), var(--tbr-lit-fill, rgba(217, 119, 6, 0.14)));
  box-shadow: var(--tbr-lit-ring, inset 0 0 0 2px #d97706), var(--tbr-lit-glow, 0 0 8px 1px rgba(217, 119, 6, 0.7));
}
.tbr-btn--lit::before {
  content: '';
  position: absolute;
  box-sizing: border-box;
  top: var(--tbr-mark-inset, 2px);
  left: var(--tbr-mark-inset, 2px);
  width: calc(var(--tbr-mark-size, 9px) + 2 * var(--tbr-mark-border, 2px));
  height: calc(var(--tbr-mark-size, 9px) + 2 * var(--tbr-mark-border, 2px));
  border: var(--tbr-mark-border, 2px) solid var(--tbr-mark-border-color, var(--card, #fff));
  border-radius: 50%;
  background: var(--tbr-lit-color, #d97706);
}
/* combinations: each role keeps its own signal */
.tbr-btn--open.tbr-btn--lit {
  background-image: none;
  box-shadow: 0 0 0 3px rgba(59, 111, 214, 0.35), var(--tbr-lit-ring, inset 0 0 0 2px #d97706), var(--tbr-lit-glow, 0 0 8px 1px rgba(217, 119, 6, 0.7));
}
.tbr-btn--crumb.tbr-btn--lit {
  box-shadow: var(--tbr-crumb-ring, 0 0 0 2px rgba(59, 111, 214, 0.28)), var(--tbr-lit-ring, inset 0 0 0 2px #d97706), var(--tbr-lit-glow, 0 0 8px 1px rgba(217, 119, 6, 0.7));
}

/* Corner marks (Oct 2026; current best guess, open to revision): the lit dot (top-left), the red badge dot (top-right,
   `badge: true`) and the text badge (top-right) are ONE family, so they are all derived from these shared custom properties
   and a future change to one is a change to all. Set them on :root or a container to tune; the defaults are the lit dot as
   it has always looked (the owner likes it).
     --tbr-mark-size          the coloured core's diameter (9px)
     --tbr-mark-border        the ring's thickness around the core (2px)
     --tbr-mark-inset         distance from the button's padding-box edge (top, and left for the lit dot / right for the
                              badges) to the mark's OUTER edge, ring included (2px; so the core sits 4px in)
     --tbr-mark-border-color  the ring colour (default: the card colour, which is white in light mode and the dark card in
                              dark mode, so the ring separates the mark from the solid current and lit fills in both)
   Outer diameter of a dot = size + 2 * border = 13px. The dot marks are therefore identical except for colour and side. */
:root {
  --tbr-mark-size: 9px;
  --tbr-mark-border: 2px;
  --tbr-mark-inset: 2px;
}

/* Role "badge" (1.5.23; toolbar-vocabulary.md): a small pill in the top-right corner (a count or a few characters), or a
   plain dot when the manifest says `badge: true`. Colour: --tbr-badge-bg (prefs badgeColor). The pill keeps its 16px outer
   height, 16px min-width, 4px side padding and 10px font; since the ring is now part of its box (border-box), the coloured
   core is 12px high (line-height 12px). Its outer edge sits --tbr-mark-inset from the top and right edges, like the dot's. */
.tbr-badge {
  position: absolute;
  top: var(--tbr-mark-inset, 2px);
  right: var(--tbr-mark-inset, 2px);
  box-sizing: border-box;
  min-width: 16px;
  max-width: calc(100% - 2 * var(--tbr-mark-inset, 2px));
  height: 16px;
  padding: 0 4px;
  border: var(--tbr-mark-border, 2px) solid var(--tbr-mark-border-color, var(--card, #fff));
  border-radius: 8px;
  background: var(--tbr-badge-bg, #dc2626);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: calc(16px - 2 * var(--tbr-mark-border, 2px));
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 1;
}
/* A lit tool also has the dot in the top-left: a long text badge stops 1px short of it (and ellipsizes). */
.tbr-btn--lit > .tbr-badge {
  max-width: calc(100% - 2 * var(--tbr-mark-inset, 2px) - var(--tbr-mark-size, 9px) - 2 * var(--tbr-mark-border, 2px) - 1px);
}
/* Short text on a lit tool (Oct 2026; current best guess, open to revision): the room between the lit dot and the right inset
   is 26px outer on a 48px button, 24px on 46px and 22px on the 44px minimum (the ring takes 4px of that), too little for "new"
   at the normal 10px / 4px padding (it showed "n..."). main.js marks a text badge of 2 or more characters `tbr-badge--wide`;
   on a lit tool that one gets a compact pill (8px font, no side padding, the ring is the margin), so "99", "new" and "99+" read in
   full at every button size from 44px up, still 1px clear of the lit dot, the ring and the branch mark. A 1-character badge ("2") and the dot are untouched. Longer text (4 or more characters, or wide capitals such as "NEW") may still ellipsize.
     --tbr-badge-wide-font  font size of that compact pill (8px)      --tbr-badge-wide-pad  its side padding (0) */
.tbr-btn--lit > .tbr-badge--wide {
  padding: 0 var(--tbr-badge-wide-pad, 0px);
  font-size: var(--tbr-badge-wide-font, 8px);
}
/* The dot variant (`badge: true`) is the lit dot's mirror image across the vertical axis: the same outer diameter (size +
   2 * border, 13px), the same ring thickness and colour, the same inset from the top and (mirrored) the right edge; only the
   fill differs (--tbr-badge-bg, the same token as the text badge). It clears the lit inner ring (2px), the current and crumb
   rings, the branch mark (bottom-right) and the lit dot, never crosses the button's edge, and (z-index 1) sits above the
   underline bar's pseudo-element. */
.tbr-badge--dot {
  min-width: 0;
  max-width: none;
  width: calc(var(--tbr-mark-size, 9px) + 2 * var(--tbr-mark-border, 2px));
  height: calc(var(--tbr-mark-size, 9px) + 2 * var(--tbr-mark-border, 2px));
  padding: 0;
  border-radius: 50%;
}
.tbr-btn:focus-visible {
  outline: 2px solid var(--ink, #131a2a);
  outline-offset: 2px;
}

.tbr-empty {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--slate, #5b6478);
  font-size: var(--fs-sm, 14px);
  white-space: nowrap;
}

/* Hidden but still laid out: used for peers and children while the
   focused tool slides, so layout (and the slide's destination) is real. */
.tbr-hidden {
  visibility: hidden;
}

/* System alert (see showAlert in main.js): dismissible banner fixed at
   the top of the screen, above the shell chrome and dialogs. */
.tbr-alert-host {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 8px;
  right: 8px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.tbr-alert {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 6px 10px 14px;
  border-radius: 12px;
  border: 1.5px solid #b45309;
  background: #fff7ed;
  color: #7c2d12;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--fs-sm, 14px);
  line-height: 1.35;
  text-align: left;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.tbr-alert-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  padding-top: 8px;
}
.tbr-alert-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  .tbr-alert { background: #3a2410; color: #fed7aa; border-color: #f59e0b; }
}

/* Animator support (see animators/): the layer holds extra visuals under
   the tools; collapsed / absent tools are removed from layout. */
.tbr-root { position: relative; }
.tbr-btn { position: relative; z-index: 1; }
.tbr-layer {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.tbr-absent { display: none !important; }

/* The black hole (animators/hole.js): a dark disk with a subtle edge
   glow, readable in both light and dark themes. */
.tbr-hole {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #000 0%, #04060f 55%, #0c1233 100%);
  box-shadow: 0 0 10px 2px var(--brand, #3b6fd6);
  will-change: transform;
}

/* doorway animator: a solid black slot drawn in the toolbar-provided layer (see animators/slot.js) */
.tbr-slot {
  position: absolute;
  border-radius: 3px;
  background: var(--tbr-slot-color, #000);
}

/* Twins (1.5.20; see twins.js / carriers/): the flying clones live in a fixed,
   full-screen, click-through overlay on <body> (not clipped by the toolbar),
   below the alert host. Each clone is a copy of the real button, positioned
   absolutely at its start rect; a carrier moves it with transform. The overlay
   is exactly the viewport and clips at it (1.5.21: overflow hidden, so a clone
   or an arc that strays past the screen edge can never make the page scroll;
   carriers also keep their paths inside the viewport). */
.tbr-twin-overlay {
  position: fixed;
  inset: 0;
  z-index: 299;
  pointer-events: none;
  overflow: hidden;
}
.tbr-twin-overlay .tbr-twin {
  position: absolute;
  margin: 0;
  pointer-events: none;
  will-change: transform;
}

/* debugTwins: one outline colour per twin pair (a hash of its key), on the
   real buttons of both levels and on the flying clone. */
.tbr-twin-debug { outline: 3px solid var(--tbr-twin-color, #e11d48); outline-offset: 2px; }
.tbr-twin-c0 { --tbr-twin-color: #e11d48; }
.tbr-twin-c1 { --tbr-twin-color: #ea580c; }
.tbr-twin-c2 { --tbr-twin-color: #16a34a; }
.tbr-twin-c3 { --tbr-twin-color: #0891b2; }
.tbr-twin-c4 { --tbr-twin-color: #7c3aed; }
.tbr-twin-c5 { --tbr-twin-color: #db2777; }
.tbr-twin-c6 { --tbr-twin-color: #ca8a04; }
.tbr-twin-c7 { --tbr-twin-color: #0f766e; }