/* ══════════════════════════════════════════════════════════════════════
   MARBLELENS · SHELL — the furniture every surface shares.

   The products keep their own chrome, because that chrome is the product:
   AI Content is a sidebar workspace, the Website Builder is a progress bar
   over a canvas, Orders is a document. What they had no business doing was
   each inventing their own brand mark, their own wordmark treatment and
   their own way out of the page — four wordmarks in four typefaces, and no
   route from the builder to AI Content at all.

   So this file owns exactly three things, and nothing else:
     1. .ml-brand   — one mark, one wordmark, one home link
     2. .ml-xnav    — the same way across the products, from anywhere
     3. .ml-btn     — one button language, matching the home's .btn-p/.btn-g

   Linked LAST on each product page so it outranks the older brand rules
   (.wordmark, .brand-mark, .orders-wordmark) it replaces.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1 · THE BRAND ──────────────────────────────────────────────────────
   Mirrors .brand in css/universe-home.css, which is the canonical
   declaration — the home cannot share this file and this file cannot load
   the home composition, so the numbers are kept in step by hand.
   The lens: a gold ring around a solid pupil. Drawn with flat fills, not
   a gradient — a <linearGradient> would have to be defined per page, and
   a missing def renders an invisible mark. */
.ml-brand{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;                       /* the touch target, not the ink */
  font:600 clamp(.96rem,.92rem + .2vw,1.06rem)/1 var(--serif);
  letter-spacing:.002em;text-transform:none;
  color:var(--ob-ink);text-decoration:none;white-space:nowrap;
  flex:0 0 auto;
  transition:color var(--dur-f,.18s) var(--ease,ease);
}
.ml-brand:hover{color:var(--gold-hi)}
.ml-brand .ml-m{
  width:23px;height:23px;flex:0 0 23px;display:block;
  /* no tile, no rounded coral square — the mark is the mark */
  background:none;border-radius:0;box-shadow:none;
}
.ml-brand:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* the product name sits beside the brand, quiet, never competing with it */
.ml-product{
  font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ob-muted);white-space:nowrap;
}
.ml-product::before{content:"";display:inline-block;width:1px;height:.9em;
  margin-right:.7em;vertical-align:-.06em;background:var(--ob-line)}

/* ── 2 · THE WAY ACROSS ─────────────────────────────────────────────────
   Same three destinations on every surface, in the same order, so the
   products stop being dead ends. The current one is marked, not hidden. */
.ml-xnav{display:flex;align-items:center;gap:clamp(.35rem,1.2vw,1rem);min-width:0}
/* in a sidebar the same three destinations stack instead of running across */
.ml-xnav--stack{flex-direction:column;align-items:stretch;gap:2px;
  margin:0 0 10px;padding-top:10px;border-top:1px solid var(--ob-line2)}
.ml-xnav--stack a{min-height:34px;padding:6px 8px}
/* deliberately Inter at .9rem/500, NOT the mono caps the product chrome uses
   for its own labels. These three words also appear in the home's header, and
   reading "AI Content" there and "AI CONTENT" one click later was the seam
   that made the site feel like separate apps. Mono stays where it belongs:
   product state — stage names, save state, viewport widths. */
.ml-xnav a{
  display:inline-flex;align-items:center;min-height:38px;padding:9px 11px;
  font-family:var(--sans);font-size:.9rem;font-weight:500;
  letter-spacing:normal;text-transform:none;
  color:var(--ob-muted);text-decoration:none;border-radius:var(--r-sm,6px);
  white-space:nowrap;
  transition:color var(--dur-f,.18s) var(--ease,ease),background var(--dur-f,.18s) var(--ease,ease);
}
.ml-xnav a:hover{color:var(--ob-ink);background:rgba(244,239,228,.05)}
/* the home marks its current page the same way — bright ink, not a colour */
.ml-xnav a[aria-current="page"]{color:var(--ob-ink)}
.ml-xnav a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── 3 · THE BUTTONS ────────────────────────────────────────────────────
   The home's pill language, available to the products. Gold pill is the
   one primary action on a surface; ghost is everything else. */
.ml-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:40px;padding:0 16px;border-radius:var(--r-pill,999px);
  font:600 var(--t-small)/1 var(--sans);letter-spacing:.01em;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform var(--dur-f,.18s) var(--ease,ease),
             background var(--dur-f,.18s) var(--ease,ease),
             border-color var(--dur-f,.18s) var(--ease,ease);
}
.ml-btn:hover{transform:translateY(-1px)}
.ml-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ml-btn--p{background:var(--gold);color:#0B0A08;border-color:var(--gold)}
.ml-btn--p:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.ml-btn--g{background:transparent;color:var(--ob-ink);border-color:var(--ob-line)}
.ml-btn--g:hover{border-color:var(--gold);color:var(--gold-hi)}

/* ── narrow ─────────────────────────────────────────────────────────────
   The wordmark is the first thing to lose its text, never its mark: the
   ring stays a recognisable home affordance at any width. */
@media (max-width:700px){
  .ml-brand{gap:0;font-size:0}
  .ml-brand .ml-m{width:26px;height:26px;flex-basis:26px}
  .ml-product{display:none}
  .ml-xnav a{padding:9px 7px}
}
@media (max-width:560px){
  .ml-xnav a[data-xnav="orders"]{display:none}
  /* The Website Builder's app bar is already full at phone widths — the
     stage list, the save state, the templates label and the help control
     all live in it, and adding the cross-nav pushed the help control 18px
     past the right edge where overflow clipped it. Below 560 the cross-nav
     yields; the brand mark still goes home, and the full navigation is
     there. AI Content is unaffected: its cross-nav is in the sidebar. */
  .hd .ml-xnav{display:none}
}