/* =====================================================================
   Praxis skin for the Workspace (Concierge home) — brings the home into
   the Mazlan / Groom Lake language and adds a Mazlan-style dark mode, so
   the Workspace and the record page read as one system. Layered on top
   of praxis-chrome-legacy.css (which already shares the --praxis-* tokens and a
   dot-grid page background). Toggled via body[data-theme].
   ===================================================================== */

/* =====================================================================
   App header + nav rail: "floating" light treatment, mirroring the
   record page (record-page.html .appbar / .praxis-navrail). The header
   blends into the page background (no dark bar, no border, no shadow);
   the search becomes a fully-rounded Mazlan-style floating pill; the
   right-side controls read as dark ink on the light header; the nav
   rail loses its background + border and blends into the page. Works
   in both light and dark (the dark-mode token block below recolors it).
   ===================================================================== */

/* ---- App header: blend into the page (solid page-color bg — it's fixed) ---- */
.appbar{
  background:var(--praxis-color-surface-subtle);
  color:var(--praxis-color-text-primary);
  border:0; box-shadow:none;
  /* Span the full viewport width (incl. the scrollbar gutter) so the fixed
     header geometry matches the record page's naturally full-width bar — the
     content scrollbar then sits under the header, and the avatar + centred
     search no longer shift when switching between the two pages. */
  width:100vw; right:auto;
}
/* Brand wordmark — theme-aware (dark wordmark on light header, white in dark) */
/* Match the record page's brand cluster geometry so the wordmark + page
   switcher land in the exact same spot across pages */
.appbar__logo-area{ padding-left:var(--praxis-space-16); gap:var(--praxis-space-16); }
.appbar__brand{ display:inline-flex; align-items:center; text-decoration:none; }
.appbar__logo-img{ display:block; height:26px; width:auto; }
.appbar__logo-img--ondark{ display:none; }
body[data-theme="dark"] .appbar__logo-img--onlight{ display:none; }
body[data-theme="dark"] .appbar__logo-img--ondark{ display:block; }

/* ---- Page switcher (next to the wordmark), mirrors the record page ---- */
.appswitch{ position:relative; }
.appswitch__trigger{
  display:inline-flex; align-items:center; gap:4px; height:32px; padding:0 8px 0 10px;
  border:0; background:transparent; color:inherit; font-family:inherit; font-size:.875rem;
  font-weight:600; border-radius:8px; cursor:pointer;
}
.appswitch__trigger:hover{ background:rgba(16,36,58,.06); }
.appswitch__pop{
  position:absolute; top:calc(100% + 6px); left:0; min-width:200px; z-index:200;
  background:var(--praxis-color-surface-default); border:1px solid var(--praxis-color-border-default);
  border-radius:12px; padding:6px;
  box-shadow:0 0 0 .5px rgba(16,36,58,.06), 0 18px 38px -16px rgba(16,36,58,.22);
}
.appswitch__pop[hidden]{ display:none; }
.appswitch__item{
  display:block; padding:8px 10px; border-radius:8px; font-size:.875rem; font-weight:500;
  color:var(--praxis-color-text-primary); text-decoration:none;
}
.appswitch__item:hover{ background:var(--praxis-color-neutral-05); text-decoration:none; }
.appswitch__item--active{ color:var(--praxis-color-text-link,var(--praxis-color-teal-60)); font-weight:600; }
body[data-theme="dark"] .appswitch__trigger:hover{ background:rgba(255,255,255,.08); }
body[data-theme="dark"] .appswitch__item:hover{ background:rgba(255,255,255,.06); }

/* ---- Search: fully-rounded floating field (Mazlan style) ---- */
.appbar__search{
  border-radius:9999px;
  background:var(--praxis-color-surface-default);
  overflow:visible;
  padding:0 6px 0 4px;
  box-shadow:0 0 0 1px rgba(16,36,58,.08), 0 1px 2px rgba(16,36,58,.05);
}
body[data-theme="dark"] .appbar__search{ box-shadow:0 0 0 1px rgba(255,255,255,.10); }
/* Module selector — transparent floating text with a short centered divider */
.appbar__module-selector{
  background:transparent;
  color:var(--praxis-color-text-secondary);
  border-right:1px solid var(--praxis-color-border-default);
  align-self:center; height:56%;
  min-width:0; padding:0 14px;
}
.appbar__module-selector .material-symbols-rounded{ color:var(--praxis-color-text-secondary); }
/* Input area + input — transparent, primary ink */
.appbar__input-area{ background:transparent; }
.appbar__search-input{ background:transparent; color:var(--praxis-color-text-primary); }
/* Run-search button — transparent floating magnifier */
.appbar__search-go{
  background:transparent;
  color:var(--praxis-color-text-secondary);
  border-radius:9999px;
}
.appbar__search-go:hover{ background:transparent; color:var(--praxis-color-text-primary); }

/* ---- Right-side controls: read as dark ink on the light header ---- */
.appbar__action-btn{
  background:rgba(16,36,58,.06);
  color:var(--praxis-color-text-primary);
  border-color:rgba(16,36,58,.10);
}
.appbar__action-btn:hover{ background:rgba(16,36,58,.10); }
.appbar__icon-btn{ color:var(--praxis-color-text-secondary); }
.appbar__icon-btn:hover{ background:rgba(16,36,58,.06); color:var(--praxis-color-text-primary); }
.appbar__avatar{ border-color:rgba(16,36,58,.12); }
.appbar__avatar--photo{ background-size:cover; background-position:center; background-repeat:no-repeat; color:transparent; overflow:hidden; }
/* Persona picker (styled inline in index.html — needs body-prefix to win) */
body .persona-trigger{
  background:rgba(16,36,58,.06);
  color:var(--praxis-color-text-primary);
}
body .persona-trigger:hover{ background:rgba(16,36,58,.10); }
body .persona-trigger[aria-expanded="true"]{ background:rgba(16,36,58,.14); }
body .persona-trigger__sub{ color:var(--praxis-color-text-secondary); }

/* dark: swap dark-tints for light-tints */
body[data-theme="dark"] .appbar__action-btn{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); }
/* Mazlan trigger: light neutral pill matching the shared lit-edge button
   convention (nav-rail tools / search pill). The four-dot mark keeps its
   teal→pink signature — its dark-slate dot reads on the light surface. */
#mazlan-trigger{ background:var(--px-surface); color:var(--praxis-color-text-secondary); border:0;
  box-shadow:0 0 0 .5px rgba(16,36,58,.06),0 1px 2px rgba(16,36,58,.05); }
#mazlan-trigger:hover{ filter:none; color:var(--praxis-color-text-primary);
  box-shadow:0 0 0 .5px rgba(16,36,58,.09),0 2px 6px -1px rgba(16,36,58,.14); }
body[data-theme="dark"] #mazlan-trigger{ background:var(--px-surface-2,#232c3b); color:var(--praxis-color-text-secondary); border:0;
  box-shadow:var(--praxis-elevation-card); }
body[data-theme="dark"] #mazlan-trigger:hover{ background:var(--px-surface-2,#232c3b); color:var(--praxis-color-white);
  box-shadow:0 0 0 .5px rgba(255,255,255,.12),0 6px 18px -6px rgba(0,0,0,.6),inset 0 .5px 0 rgba(255,255,255,.08); }
body[data-theme="dark"] .appbar__action-btn:hover{ background:rgba(255,255,255,.12); }
body[data-theme="dark"] .appbar__icon-btn:hover{ background:rgba(255,255,255,.10); }
body[data-theme="dark"] .appbar__avatar{ border-color:rgba(255,255,255,.22); }
body[data-theme="dark"] .persona-trigger{ background:rgba(255,255,255,.08); }
body[data-theme="dark"] .persona-trigger:hover{ background:rgba(255,255,255,.12); }
body[data-theme="dark"] .persona-trigger[aria-expanded="true"]{ background:rgba(255,255,255,.16); }

/* Mazlan trigger reads as a neutral control (base .appbar__action-btn) —
   the four-dot Mazlan mark carries the identity */

/* ---- Nav rail: blend into the page — no background, no border ---- */
.praxis-navrail{ background:transparent; border-right:1px solid var(--praxis-color-border-default); }
/* Hide the expand/collapse control for now — the record page's rail has none,
   so this keeps the two consistent. Kept in the DOM (button + JS intact) so it
   can be re-enabled later by removing this rule. The whole cell is hidden to
   avoid leaving its 56px slot empty at the top of the rail. */
.praxis-navrail__cell:has(> .praxis-navrail__toggle){ display:none; }

/* ---- Nav rail buttons: neutral filled containers (a set with Create) ----
   The Create button colors its 40×40 .praxis-navrail__icon box (radius-md); give the
   plain nav buttons' icon boxes the SAME container silhouette but neutral, so
   they read as a matched set of pickable chips rather than floating icons.
   Create keeps its teal; the active item keeps its pink. */
.praxis-navrail__btn:not(.praxis-navrail__btn--create):not(.praxis-navrail__btn--active) .praxis-navrail__icon{
  background:var(--praxis-color-surface-default);
  box-shadow:0 0 0 .5px rgba(16,36,58,.06), 0 1px 2px rgba(16,36,58,.05);
}
.praxis-navrail__btn:not(.praxis-navrail__btn--create):not(.praxis-navrail__btn--active):hover .praxis-navrail__icon{
  background:var(--praxis-color-surface-default);
  box-shadow:0 0 0 .5px rgba(16,36,58,.09), 0 2px 6px -1px rgba(16,36,58,.14);
}
body[data-theme="dark"] .praxis-navrail__btn:not(.praxis-navrail__btn--create):not(.praxis-navrail__btn--active) .praxis-navrail__icon{
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 .5px rgba(255,255,255,.10);
}
body[data-theme="dark"] .praxis-navrail__btn:not(.praxis-navrail__btn--create):not(.praxis-navrail__btn--active):hover .praxis-navrail__icon{
  background:rgba(255,255,255,.10);
  box-shadow:0 0 0 .5px rgba(255,255,255,.14);
}

/* ---- Cards: Mazlan slate elevation with a lit top edge, 12px geometry ---- */
.card{
  border:0; border-radius:12px;
  box-shadow:0 0 0 .5px rgba(16,36,58,.06), 0 1px 1.5px rgba(16,36,58,.045),
             0 10px 28px -14px rgba(16,36,58,.10), inset 0 .5px 0 rgba(255,255,255,.7);
}

/* ---- Dot grid: align pitch to the record page (18px), and fade the dots to
   the page background at the left + right edges and top by compositing a
   page-color gradient OVER the dots (not masking — masking would hide content). */
.page{
  background-color:var(--praxis-color-surface-subtle);
  background-image:
    linear-gradient(to right, var(--praxis-color-surface-subtle), transparent 7%, transparent 93%, var(--praxis-color-surface-subtle)),
    linear-gradient(to bottom, var(--praxis-color-surface-subtle), transparent 10%),
    radial-gradient(circle, rgba(16,36,58,.11) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 18px 18px;
  background-repeat:no-repeat, no-repeat, repeat;
}

/* Theme toggle — inline moon/sun SVGs that swap by [data-theme] (same as the record page) */
.gl-theme-btn{ color:rgba(255,255,255,.85); }
.gl-theme-btn:hover{ color:var(--praxis-color-white); }
.gl-theme-btn .gl-sun{ display:none; }
body[data-theme="dark"] .gl-theme-btn .gl-moon{ display:none; }
body[data-theme="dark"] .gl-theme-btn .gl-sun{ display:block; }
/* Profile menu — shared component, see praxis-profile-menu.css */

/* =====================================================================
   Persona switcher relocated INTO the profile menu ("Viewing as").
   The existing .persona-trigger + .persona-popover flyout keep working;
   here we re-lay it out to sit as a full-width control inside the menu,
   and open its proto-list flyout to the LEFT so it never clips.
   ===================================================================== */
.profile-menu__row--persona{ padding-bottom:2px; }
.persona-picker--in-menu{ position:relative; padding:0 6px 2px; }
/* Trigger becomes a full-width menu control (override the header pill sizing) */
body .persona-picker--in-menu .persona-trigger{
  display:flex; width:100%; height:auto; margin:0; box-sizing:border-box;
  padding:8px 10px; gap:10px; border-radius:8px;
  background:var(--praxis-color-neutral-05); color:var(--praxis-color-text-primary);
}
body .persona-picker--in-menu .persona-trigger:hover{ background:var(--praxis-color-neutral-10); }
body[data-theme="dark"] .persona-picker--in-menu .persona-trigger{ background:rgba(255,255,255,.06); }
body[data-theme="dark"] .persona-picker--in-menu .persona-trigger:hover{ background:rgba(255,255,255,.10); }
.persona-picker--in-menu .persona-trigger__icon{ font-size:20px; color:var(--praxis-color-text-secondary); }
.persona-picker--in-menu .persona-trigger__label{ font-size:var(--praxis-type-size-sm); font-weight:600; color:var(--praxis-color-text-primary); }
.persona-picker--in-menu .persona-trigger__sub{ font-size:12px; font-weight:500; color:var(--praxis-color-text-secondary); }
.persona-picker--in-menu .persona-trigger__text{ flex:1; }
.persona-picker--in-menu .persona-trigger__chev{ margin-left:auto; color:var(--praxis-color-text-secondary); }
/* Flyout opens to the LEFT of the profile popover so it doesn't clip */
.persona-picker--in-menu .persona-popover{
  position:absolute; top:0; right:calc(100% + 12px); left:auto;
  min-width:320px; max-width:340px;
  background:var(--praxis-color-surface-default);
  border:1px solid var(--praxis-color-border-default); border-radius:12px; padding:6px;
  box-shadow:0 0 0 .5px rgba(16,36,58,.06), 0 24px 50px -18px rgba(16,36,58,.30);
}
body[data-theme="dark"] .persona-picker--in-menu .persona-popover{
  background:rgba(26,32,45,.96);
  -webkit-backdrop-filter:saturate(1.3) blur(16px); backdrop-filter:saturate(1.3) blur(16px);
  box-shadow:0 0 0 .5px rgba(255,255,255,.08), 0 24px 50px -20px rgba(0,0,0,.7);
}
@media (max-width: 639px){
  /* Phone: keep the label visible in-menu, and drop the flyout below the trigger */
  .persona-picker--in-menu .persona-trigger__text{ display:flex; }
  .persona-picker--in-menu .persona-popover{
    position:fixed; top:auto; right:var(--praxis-space-12); left:var(--praxis-space-12); min-width:0; max-width:none;
  }
}

/* =====================================================================
   DARK MODE — Mazlan deep-slate palette (token overrides cascade to the
   token-driven Concierge components; plus targeted surface fixes).
   ===================================================================== */
/* Token declarations go on :root, never on body — see praxis-core.css.
   NOTE: this block is a drifted duplicate of the base dark remap in
   praxis-core.css and should not exist. It is preserved verbatim here,
   including the two values that disagree with core (surface-subtle
   #12161f vs #161c27, neutral-05 #12161f vs #10151e), because deleting it
   is a rendering change and this commit is a pure move. Tracked separately. */
:root:has(body[data-theme="dark"]){
  color-scheme:dark;
  --praxis-color-surface-default:#192336;
  --praxis-color-surface-subtle:#12161f;
  --praxis-color-neutral-05:#12161f;
  --praxis-color-neutral-10:#222b39;
  --praxis-color-neutral-20:#3a4556;
  --praxis-color-neutral-30:#3a4556;
  --praxis-color-border-default:rgba(255,255,255,.10);
  --praxis-color-text-primary:#e7ebf1;
  --praxis-color-text-secondary:#9aa7b4;
}
body[data-theme="dark"]{ color:var(--praxis-color-text-primary); }
body[data-theme="dark"] .page{
  background-color:var(--px-page);
  background-image:
    linear-gradient(to right, var(--px-page), transparent 7%, transparent 93%, var(--px-page)),
    linear-gradient(to bottom, var(--px-page), transparent 10%),
    radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:100% 100%, 100% 100%, 18px 18px;
  background-repeat:no-repeat, no-repeat, repeat;
}
body[data-theme="dark"] .card{
  background:#192336;
  box-shadow:0 0 0 .5px rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.4),
             0 16px 40px -18px rgba(0,0,0,.6), inset 0 .5px 0 rgba(255,255,255,.07);
}
body[data-theme="dark"] .praxis-navrail{ background:transparent; border-right:1px solid var(--praxis-color-border-default); }
/* soft cyan accent lift for the primary action in dark, matching Praxis */
body[data-theme="dark"] .btn--primary{ filter:saturate(1.05) brightness(1.05); }