/* ============================================================================
   chrome.css — Phase A · v2 §1.2/1.3/§4.3
   ----------------------------------------------------------------------------
   Phase A safety boundary: every selector below targets a class or data
   attribute that does NOT exist in any current preview.php page (.cb, .sb,
   .mcb, .tier-workspace .premium-only, .tier-retained .top-nav, etc.). No
   token redefinition on body, no shadowing of the existing inline-style
   palette in preview.php which already sets --surface-* / --text-*
   locally and is consumed in 1,326 places.
   ============================================================================ */

/* ----- Tier chrome — gated on body.tier-* + a NEW selector ---------------- */
/* Workspace tier locks: .premium-only is added in Phase B by lockedFeatureCard.
   No element today carries this class so this rule is inert. */
body.tier-workspace .premium-only {
    opacity: 0.55;
    cursor: not-allowed;
}
body.tier-workspace .premium-only::after {
    content: "🔒";
    display: inline-block;
    margin-left: var(--sp-2);
    color: var(--sev-locked);
}

/* Retained tier gold strip + engagement panel — both target Phase B DOM. */
body.tier-retained .uip-top-nav::before {
    content: "";
    display: block;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg,
        var(--brand-brass-600) 0%,
        var(--brand-brass-500) 50%,
        var(--brand-brass-700) 100%);
}

body.tier-retained .uip-sidebar-footer .engagement-panel { display: block; }
body:not(.tier-retained) .uip-sidebar-footer .engagement-panel { display: none; }

/* ----- Classification banner — hidden by default, gated on data attr ------ */
.cb { display: none; }                                      /* default off */

body[data-classification="cui"]        .cb { display: flex; background: var(--cls-cui-bg);  color: var(--cls-cui-fg);  border-bottom: 2px solid var(--cls-cui-border);  }
body[data-classification="controlled"] .cb { display: flex; background: var(--cls-ctrl-bg); color: var(--cls-ctrl-fg); border-bottom: 2px solid var(--cls-ctrl-border); }
body[data-classification="secret"]     .cb { display: flex; background: var(--cls-sec-bg);  color: var(--cls-sec-fg);  border-bottom: 2px solid var(--cls-sec-border);  }
body[data-classification="top_secret"] .cb { display: flex; background: var(--cls-ts-bg);   color: var(--cls-ts-fg);   border-bottom: 2px solid var(--cls-ts-border);   }

/* ----- Three-banner stacking math (per finalized plan §7) ----------------- */
/* Selectors .cb, .sb, .mcb do not exist in current pages so positioning
   rules are inert in Phase A; Phase B partials emit these elements. */
.cb  { position: sticky; top: 0;    z-index: var(--z-sticky); height: 36px; align-items: center; padding: 0 var(--sp-5); gap: var(--sp-3); font-size: var(--ts-body-sm-size); }
.sb  { position: sticky; top: 36px; z-index: var(--z-sticky); height: 32px; }
.mcb { position: sticky; top: 68px; z-index: var(--z-sticky); height: 48px; }

body[data-classification="commercial"] .sb,
body:not([data-classification]) .sb  { top: 0; }
body[data-classification="commercial"] .mcb,
body:not([data-classification]) .mcb { top: 32px; }

.mcb[data-mcb-state="empty"] { opacity: 0.6; }

/* ----- Mobile collapse for the new chrome --------------------------------- */
@media (max-width: 640px) {
    .sb, .mcb { height: 40px; font-size: var(--ts-body-sm-size); }
    .mcb__quick { display: none; }
    .mcb__change[aria-expanded="true"] + .mcb__quick { display: flex; }
}

/* Phase A intentionally omits brand surface-token blocks. Phase B adds
   them when partials are introduced and we can scope under .uip-* roots
   without colliding with preview.php's existing local --surface-* /
   --text-* declarations. */