/* ============================================================
   Compass — Public portal chrome (c-pub* family)
   Loaded by the PUBLIC area _Layout only, after tokens + components.
   The logged-in portal's _Layout does NOT load this file.

   Two portals, one design system — split by LAYER, not copied per portal:

   1. TOKENS (compass-tokens.css) — SHARED. A brand/colour/type change
      hits both portals. Do not fork.

   2. GUIDE BODY (c-guide primitives · c-prose · c-callout · c-gcard ·
      c-glist · c-kdgroup · c-driver · c-toc · c-gsearch) — SHARED and
      rendered identically in both portals. Additive-only, and
      chrome-agnostic: MUST NOT depend on --appbar-h / --tabbar-h (the
      public shell sets its own sticky offsets, see --pubhead-h below).

   3. CHROME — per-portal, MUST NOT share a class. App chrome = c-appbar* /
      c-tabs* / switcher / c-user (never loaded here); public chrome = the
      c-pub* family in THIS file. Sharing no selector, neither can affect
      the other.

   The public LEFT NAV (c-pubnav*) is deliberately its own family, not the
   shared app nav (c-gnav*), so neither portal's nav styling can drift into
   the other. Both navigate the same content tree.

   GUARD: the shell root carries data-portal="public"; any tuning of a
   shared class for the public portal is scoped under [data-portal="public"]
   so it cannot leak into the logged-in portal.
   ============================================================ */

:root {
  /* Height of the sticky slim inner-page header — the public shell's
     own sticky offset. Decoupled from --appbar-h/--tabbar-h so the
     shared guide body never depends on app-chrome dimensions. */
  --pubhead-h: 94px;
  /* Public canvas — a hair warmer than the app --canvas (#F5F6FC).
     Promote to a token if a second public surface ever needs it. */
  --canvas-public: #FBFAFD;
  /* Deep-violet ink used for the active nav item text (sits between
     --brand-violet and --brand-violet-700). Public-nav only. */
  --pubnav-active: #4A2FB0;
}

/* ---------- Shell + responsive layout ---------- */
.c-pubshell { min-height: 100vh; background: var(--canvas-public); color: var(--ink-900); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
.c-pubshell__overlay { display: none; position: fixed; inset: 0; background: rgba(20,16,40,.42); z-index: 55; }
.c-pubshell__layout { display: flex; gap: var(--space-8); padding: var(--space-8) 44px var(--space-16); max-width: 1180px; margin: 0 auto; align-items: flex-start; }
.c-pubshell__nav  { width: 250px; flex-shrink: 0; position: sticky; top: calc(var(--pubhead-h) + var(--space-4)); max-height: calc(100vh - var(--pubhead-h) - var(--space-8)); overflow-y: auto; }
.c-pubshell__main { flex: 1; min-width: 0; display: flex; gap: var(--space-8); align-items: flex-start; }
.c-pubshell__doc  { flex: 1; min-width: 0; max-width: 760px; padding: 6px 0 44px; }
.c-pubshell__toc  { width: 196px; flex-shrink: 0; position: sticky; top: calc(var(--pubhead-h) + var(--space-4)); }

/* ---------- Skip link (a11y — first focusable element) ---------- */
.c-pubskip { position: absolute; left: var(--space-3); top: -52px; z-index: 100; background: var(--ink-900); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 10px; font-family: var(--font-body); font-size: 13px; font-weight: var(--weight-bold); text-decoration: none; }
.c-pubskip:focus { top: 0; }

/* ---------- Shared header pieces (logo lockup + links) ---------- */
.c-publogo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; cursor: pointer; color: #fff; }
.c-publogo__mark { flex-shrink: 0; }
.c-publogo__name { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 16px; color: #fff; }
.c-publogo__name b { font-weight: var(--weight-medium); color: rgba(255,255,255,.7); }   /* "by Mastertek" */
.c-publink { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); text-decoration: none; cursor: pointer; color: rgba(255,255,255,.92); }
.c-publink--ghost { color: #fff; border: 1.5px solid rgba(255,255,255,.45); border-radius: 9px; padding: 7px 14px; }   /* Log in */

/* ---------- Hero (guide HOME only) ---------- */
.c-pubhero { position: relative; overflow: hidden; background: var(--brand-gradient-deep); padding: 22px 44px 46px; }
.c-pubhero__glow { position: absolute; right: -60px; top: -90px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), rgba(255,255,255,0) 70%); pointer-events: none; }
.c-pubhero__inner { position: relative; max-width: 1180px; margin: 0 auto; }
.c-pubhero__bar  { display: flex; align-items: center; gap: var(--space-3); }
.c-pubhero__body { margin-top: 34px; max-width: 680px; }
.c-pubhero__title { font-family: var(--font-display); font-size: 38px; font-weight: var(--weight-extra); letter-spacing: -.02em; color: #fff; margin: 0 0 var(--space-3); line-height: 1.08; }
.c-pubhero__standfirst { font-size: var(--text-body-lg); line-height: 1.6; color: rgba(255,255,255,.88); margin: 0; }

/* ---------- Slim header (every page EXCEPT home; sticky) ---------- */
.c-pubhead { position: sticky; top: 0; z-index: 30; overflow: hidden; background: var(--brand-gradient-deep); padding: 13px 44px 15px; }
.c-pubhead__glow { position: absolute; right: -40px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.13), rgba(255,255,255,0) 70%); pointer-events: none; }
.c-pubhead__inner { position: relative; max-width: 1180px; margin: 0 auto; }
.c-pubhead__bar { display: flex; align-items: center; gap: 11px; }
.c-pubhead__title { display: inline-block; margin-top: 9px; font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--weight-extra); letter-spacing: -.01em; color: #fff; text-decoration: none; cursor: pointer; }
.c-pubhead .c-publink--ghost { padding: 6px 13px; }

/* ---------- Burger + drawer close (mobile-only affordances) ---------- */
.c-pubburger { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32); border-radius: 9px; cursor: pointer; color: #fff; }
.c-pubhead .c-pubburger { width: 36px; height: 36px; }
.c-pubnavclose { display: none; align-items: center; justify-content: center; width: 30px; height: 30px; background: transparent; border: none; border-radius: 7px; cursor: pointer; color: var(--ink-500); }

/* ---------- Public left nav (c-pubnav — distinct from app c-gnav) ---------- */
.c-pubnav { padding: 4px 4px var(--space-5); }
.c-pubnav__head  { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 10px 10px; }
.c-pubnav__label { font-size: var(--text-overline); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-300); }
/* Search reuses the SHARED .c-gsearch control (guide-body contract). */

/* Guide-home row (public-only affordance — the app hides Home as a nav row) */
.c-pubnav__home { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 3px; padding: 6px 10px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: var(--weight-semibold); color: var(--ink-400); text-decoration: none; cursor: pointer; }
.c-pubnav__home:hover { background: var(--brand-violet-50); }
.c-pubnav__home--current { background: var(--brand-violet-50); box-shadow: inset 3px 0 0 var(--brand-violet); color: var(--pubnav-active); font-weight: var(--weight-extra); }

/* Section header — group header, never a link target; only a caret + colour + fill signal state */
.c-pubnav__sec { width: 100%; display: flex; align-items: center; gap: var(--space-2); border: none; background: transparent; padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; text-align: left; }
.c-pubnav__sec:hover { background: var(--brand-violet-50); }
.c-pubnav__sec--open { background: var(--brand-violet-50); box-shadow: inset 3px 0 0 var(--brand-violet); }  /* the 2b highlight */
.c-pubnav__num   { flex-shrink: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); color: var(--ink-400); }
.c-pubnav__label-t { font-size: 12.5px; font-weight: var(--weight-semibold); color: var(--ink-400); }
.c-pubnav__sec--open .c-pubnav__num,
.c-pubnav__sec--open .c-pubnav__label-t { font-weight: var(--weight-extra); color: var(--pubnav-active); }
.c-pubnav__spacer { flex: 1; }
.c-pubnav__caret  { flex-shrink: 0; font-size: 9px; color: var(--ink-300); transition: transform var(--t); }
.c-pubnav__sec--open .c-pubnav__caret { color: var(--brand-violet); transform: rotate(90deg); }

/* Child pages — connecting rail; the current page is the only extra emphasis (text, no second fill) */
.c-pubnav__pages { margin: 2px 0 6px 20px; border-left: 1.5px solid var(--brand-violet-100); display: flex; flex-direction: column; gap: 1px; }
.c-pubnav__page  { display: block; padding: 6px 10px 6px 12px; border-radius: var(--radius-sm); font-size: 12.3px; line-height: 1.35; font-weight: var(--weight-medium); color: var(--ink-500); text-decoration: none; cursor: pointer; }
.c-pubnav__page:hover { background: var(--surface-2); }
.c-pubnav__page--current { color: var(--pubnav-active); font-weight: var(--weight-bold); }

/* ---------- Footer ---------- */
.c-pubfoot { background: var(--ink-900); padding: 18px 44px; }
.c-pubfoot__inner  { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.c-pubfoot__brand  { font-family: var(--font-display); font-weight: var(--weight-extra); font-size: 14px; color: #E4E7F0; }
.c-pubfoot__copy   { font-size: 12px; color: #6E7690; }
.c-pubfoot__spacer { flex: 1; }
.c-pubfoot__link   { font-size: 12.5px; font-weight: var(--weight-medium); color: #C7CCDC; text-decoration: none; }
.c-pubfoot__link--login { color: #B39BEA; font-weight: var(--weight-semibold); }

/* ---------- Accessibility — visible focus (scoped to the public portal) ---------- */
[data-portal="public"] :focus-visible { outline: 2px solid var(--brand-violet); outline-offset: 2px; border-radius: 3px; }
.c-pubhero :focus-visible,
.c-pubhead :focus-visible,
.c-pubfoot :focus-visible { outline-color: #fff; }

/* ---------- Responsive — off-canvas drawer at ≤880px ---------- */
@media (max-width: 880px) {
  .c-pubshell__layout { flex-direction: column; padding: var(--space-5) var(--space-5) var(--space-12); gap: 0; max-width: 100%; }
  .c-pubshell__toc  { display: none; }
  .c-pubshell__main { width: 100%; }
  .c-pubburger, .c-pubnavclose { display: inline-flex; }
  .c-pubhero { padding: 18px var(--space-5) var(--space-8); }
  .c-pubhero__title { font-size: var(--text-h1); }
  .c-pubshell__nav {
    position: fixed; top: 0; left: 0; bottom: 0; width: 288px; max-height: 100vh;
    padding: 18px 14px var(--space-10); background: var(--surface); z-index: 60;
    box-shadow: var(--shadow-lg); transform: translateX(-104%); transition: transform var(--t-slow);
  }
  .c-pubshell[data-drawer="open"] .c-pubshell__nav { transform: translateX(0); }
  .c-pubshell[data-drawer="open"] .c-pubshell__overlay { display: block; }
}