/* matter-bar.css — the ONE sitewide sticky command bar (rebuilt 2026-08-02;
   one-row refit + conditional flags later the same day, from Sergei's
   screenshot review).

   WHAT THIS IS
   A single floating bar, ONE ROW at every width:
       mobile  (<780px): [flag] [describe-your-matter input] [mic] [paperclip]
                         [Analyze]  — ~52-56px tall, never two rows
       desktop (>=780px): wordmark left, then input + mic + paperclip +
                          Analyze + flags as one centered cluster; the input
                          is capped (~640px) so the line reads coherent, not
                          as a huge empty stretch
   It is the ONLY sticky strip on the page. Everything else that used to
   compete for top:0 is suppressed from here (see the SINGLE-STICKY block).

   FLAGS ARE CONDITIONAL (2026-08-02): matter-bar.js reveals .mb-flags only
   when the page has 2+ live language versions (HEAD-verified). An
   English-only page renders NO flag at all — the input gets that width. On
   mobile the flags collapse into one current-language button (.mb-flag-toggle)
   that opens the other languages (.mb-flag-pop); on desktop the same links
   lay inline via display:contents and the toggle is hidden.

   WHY IT WAS REBUILT
   Pages that never loaded matter-bar.js were left with the standalone dark
   `.lang-flag-bar` as the only sticky element, so scrolling pinned an empty
   flag strip and nothing else — Sergei: "when people scroll, the only sticky
   bar is the flags bar and that's not what I need." The flags now live INSIDE
   this bar, so there is exactly one sticky affordance and it carries the
   conversion controls.

   Loaded with shared/matter-bar.js. */

/* ─────────────────────────────────────────────────────────────
   THE BAR — one row, every width (2026-08-02 refit)
   ───────────────────────────────────────────────────────────── */
.mb-bar{
  position:sticky;top:0;z-index:9999;
  display:flex;flex-wrap:nowrap;align-items:center;gap:6px;
  padding:6px 10px;background:#0d1226;border-bottom:1px solid #232a44;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  visibility:visible;
  transition:opacity .25s ease,transform .25s ease,visibility 0s linear 0s;
}
.mb-bar *{box-sizing:border-box;}

/* Brand — desktop only. On mobile the site header already carries the brand
   and the row is worth more to the input. */
.mb-brand{
  flex:0 0 auto;display:none;
  color:#fff;font-weight:800;font-size:15px;text-decoration:none;white-space:nowrap;
  letter-spacing:.2px;
}
.mb-brand small{display:block;font-weight:500;font-size:9px;color:#8b93c9;letter-spacing:.4px;}

/* The control group. On mobile it dissolves into the bar's own row
   (display:contents); on desktop it is the centered cluster. */
.mb-group{display:contents;}

/* Flags — hidden until matter-bar.js confirms a second live language.
   Mobile: one toggle showing the current flag; the other languages open in a
   small dropdown anchored under it. */
.mb-flags{
  order:0;position:relative;flex:0 0 auto;display:flex;align-items:center;
}
.mb-flags[hidden]{display:none;}
.mb-flag-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0;
  background:transparent;border:0;border-radius:8px;cursor:pointer;
  font-size:19px;line-height:1;
}
.mb-flag-toggle:hover,.mb-flag-toggle:focus-visible{background:rgba(255,255,255,.08);}
.mb-flag-pop{display:none;}
.mb-flags.mb-open .mb-flag-pop{
  display:flex;position:absolute;top:calc(100% + 6px);left:0;z-index:3;
  background:#171d36;border:1px solid #2c3454;border-radius:10px;
  padding:4px;gap:2px;box-shadow:0 10px 24px rgba(0,0,0,.45);
}
.mb-flag-pop a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;font-size:19px;line-height:1;text-decoration:none;
  opacity:.65;border-radius:8px;transition:opacity .18s,transform .18s;
}
.mb-flag-pop a:hover,.mb-flag-pop a:focus-visible{opacity:1;transform:scale(1.08);}
.mb-flag-pop a.mb-flag-checking{opacity:.3;}
/* The current language is the toggle itself on mobile — no duplicate link. */
.mb-flag-pop a.mb-flag-active{display:none;}

/* Input capsule: text + mic + paperclip, one rounded field. */
.mb-cap{
  order:1;flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:0;
  background:#171d36;border:1px solid #2c3454;border-radius:10px;padding:0 4px 0 8px;
}
.mb-cap:focus-within{border-color:#4c5691;}
.mb-input{
  flex:1;min-width:0;background:transparent;border:0;outline:0;color:#e8eaf6;
  font:400 16px/1.35 'Inter',-apple-system,sans-serif;padding:10px 4px 10px 0;
  text-overflow:ellipsis;
}
.mb-input::placeholder{color:#7d86b8;opacity:1;transition:opacity .35s;}
.mb-input.mb-fade::placeholder{opacity:0;}

/* Icon buttons (mic, paperclip). 40px targets per the one-row spec. */
.mb-ico{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;min-width:40px;padding:0;
  background:transparent;border:0;border-radius:9px;color:#9aa3d4;cursor:pointer;
}
.mb-ico:hover,.mb-ico:focus-visible{color:#fff;background:rgba(255,255,255,.08);}
.mb-ico svg{width:18px;height:18px;display:block;pointer-events:none;}

.mb-analyze{
  order:2;flex:0 0 auto;margin-left:0;
  background:#f5b301;color:#151515;border:0;border-radius:10px;
  font:700 14px 'Inter',-apple-system,sans-serif;
  padding:0 14px;height:40px;min-height:40px;cursor:pointer;white-space:nowrap;
}
.mb-analyze:hover{background:#ffc21a;}

/* Desktop: wordmark left, control cluster centered, input capped so the row
   reads as one coherent group instead of a full-width empty stretch. */
@media (min-width:780px){
  .mb-bar{gap:10px;padding:7px 14px;}
  .mb-brand{display:block;}
  .mb-group{
    display:flex;flex:1 1 auto;align-items:center;justify-content:center;
    gap:10px;min-width:0;
  }
  .mb-cap{order:1;flex:0 1 640px;box-shadow:0 1px 8px rgba(0,0,0,.35);}
  .mb-analyze{order:2;padding:0 18px;}
  .mb-flags{order:3;gap:2px;}
  .mb-flag-toggle{display:none;}
  /* Same links, laid inline in the cluster; no dropdown on desktop. */
  .mb-flag-pop{display:contents;}
  .mb-flag-pop a{opacity:.55;}
  .mb-flag-pop a:hover,.mb-flag-pop a:focus-visible{opacity:1;}
  .mb-flag-pop a.mb-flag-active{display:inline-flex;opacity:1;transform:scale(1.12);}
  .mb-input{font-size:14px;}
}

/* Very narrow phones (<=360px): shave paddings/gaps, keep 40px taps, so the
   input stays ~140px and nothing is pushed off-screen. No horizontal scroll. */
@media (max-width:360px){
  .mb-bar{padding:5px 7px;gap:3px;}
  .mb-analyze{padding:0 10px;font-size:13px;}
  .mb-cap{padding:0 2px 0 4px;}
}

/* ─────────────────────────────────────────────────────────────
   SINGLE-STICKY ENFORCEMENT (2026-08-02)
   matter-bar.js puts `mb-on` on <body> once the bar is built. Everything
   below used to compete for the same top strip and produced the "two dark
   bars stacked" / "empty flag strip is the only sticky thing" bugs:
     .lang-flag-bar        — the standalone dark flag strip (position:sticky,
                             z-index 9999). Its links are ADOPTED into
                             .mb-flags by the JS before this hides it, so no
                             language affordance is lost, only the duplicate
                             strip. Escape hatch: data-mb-keep-flags.
     .clab-desktop-sticky  — contextual-legal-ask-bar's own fixed top ask bar
                             (position:fixed;top:0;z-index:9998). Two "describe
                             your matter" bars stacked is the duplicate-AI-
                             surface bug of CLAUDE.md 4A.6.
     .clab-mobile-sticky   — CLAB's fixed bottom pill; same duplicate ask on
                             mobile, and it eats the bottom of the viewport.
   CLAB's chat panel itself is untouched — only its competing bars are hidden.
   ───────────────────────────────────────────────────────────── */
body.mb-on .lang-flag-bar:not([data-mb-keep-flags]),
body.mb-on .clab-desktop-sticky,
body.mb-on .clab-mobile-sticky{
  display:none !important;
}

/* ─────────────────────────────────────────────────────────────
   STICKY-STACK OFFSET. Page-level sticky navs that also sit at top:0 get
   painted over by this bar. matter-bar.js measures the bar and publishes
   --tl-sticky-offset; the 56px fallback is the desktop single-row height.
   ───────────────────────────────────────────────────────────── */
.gold-pagenav,
.ps-rail.is-sticky,
.section-nav-sticky{
  top:var(--tl-sticky-offset,56px) !important;
}

/* ─────────────────────────────────────────────────────────────
   YIELD-TO-CONTENT (2026-08-02). Sergei: sticky "except when it's right over
   the generator or other important parts." matter-bar.js watches a set of
   protected regions (generator UI, live document preview, the inline AI
   Legal Analyst cockpit, and any form the reader is filling) and adds
   .mb-yield the moment one of them would slide UNDER the bar. The bar
   floats back the instant the protected region clears the top strip.
   display:none is deliberately avoided so the motion reads as a float-away
   rather than a jump cut; visibility flips only after the transition so a
   hidden bar can never be tabbed into.
   ───────────────────────────────────────────────────────────── */
.mb-bar.mb-yield,
.mb-bar.mb-hidden{
  opacity:0;
  transform:translateY(-100%);
  pointer-events:none;
  visibility:hidden;
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
}

/* Fallback for pages whose body/html overflow settings break position:sticky.
   matter-bar.js detects the failure at runtime and switches to fixed, adding
   a spacer so the page content is not pulled under the bar. */
.mb-bar.mb-fixed{position:fixed;left:0;right:0;top:0;}
.mb-spacer{display:block;width:100%;}

@media (prefers-reduced-motion:reduce){
  .mb-bar{transition:none;}
  .mb-bar.mb-yield,.mb-bar.mb-hidden{transition:none;}
  .mb-flags a{transition:none;}
}