/* ─────────────────────────────────────────────────────────────────────────
   Vertex shared chrome — palette tokens, header, user pill, dropdown, footer.

   App-specific styles (hero, page tiles, forms, etc.) live in each app's
   own <style> block. Page-specific responsive overrides also live there.

   Spec: docs/ui-style-guide.md  ·  Anchor: Vertex commit efe53f7

   Theme model
   ───────────
   • Brand palette (--dark-blue / --blue / --orange / etc.) is theme-INVARIANT
     — these are Valcourt brand colors, identical in light and dark.
   • Semantic tokens (--surface-*, --fg-*, --border-*, --shadow-*, status)
     are theme-AWARE. Light defaults live in :root; dark overrides under
     :root[data-theme='dark'].
   • Legacy aliases (--offwhite, --lgray, --muted, --dark-gray, --border) map
     to semantic tokens so existing templates flip automatically.
   • --white stays literal #FFFFFF — it's used as a *text* color on brand-
     dark surfaces (signin pill, icon glyphs, hero text). For card surfaces,
     use --surface-elevated instead.
   ───────────────────────────────────────────────────────────────────────── */

/* ── BRAND PALETTE (theme-invariant) ──────────────────────────────────── */
:root{
  --black:           #000000;
  --white:           #FFFFFF;   /* literal — text on dark surfaces */
  --dark-blue:       #063849;   /* brand-700 — header top accent, hero, footer */
  --blue:            #027EAC;   /* brand-600 — primary action / link hover */
  --light-dark-blue: #028BBC;   /* brand-500 */
  --brand-400:       #1a94bb;
  --brand-300:       #66afd0;
  --brand-200:       #b3d4e6;
  --light-blue:      #DBE7F1;   /* brand-100 — user avatar default bg */
  --orange:          #F35B04;   /* accent — sparingly */

  --head:            "Bebas Neue", sans-serif;
  --body:            "Inter", sans-serif;

  /* ── SEMANTIC TOKENS — LIGHT (theme defaults) ───────────────────────── */
  --surface-canvas:   #F5F7F8;  /* body / page bg */
  --surface-elevated: #FFFFFF;  /* cards, sticky header */
  --surface-overlay:  #FFFFFF;  /* dropdown panels, modals */
  --surface-tinted:   #EEEEEE;  /* chips, tag bg, code inline */
  --surface-hover:    #F5F7F8;  /* row / item hover */

  --border-subtle:    #EEEEEE;  /* dd-divider, table cell border */
  --border-default:   #D1D5DB;  /* card border */

  --fg-primary:       #303535;  /* body text */
  --fg-secondary:     #6B7280;  /* muted secondary */
  --fg-heading:       #063849;  /* page titles, card titles */
  --fg-on-brand:      #FFFFFF;  /* text on dark-blue / blue surfaces */

  --link:             #027EAC;
  --accent:           #F35B04;

  --shadow-elev:      0 1px 3px rgba(6,56,73,.08);
  --shadow-card:      0 12px 36px rgba(6,56,73,.12);
  --shadow-overlay:   0 8px 32px rgba(6,56,73,.16);

  --success:          #1A6B35;
  --success-bg:       #e8f5ee;
  --warn:             #92400E;
  --warn-bg:          #fff8e6;
  --danger:           #B91C1C;
  --danger-bg:        #fdecec;

  /* ── LEGACY ALIASES ─────────────────────────────────────────────────── */
  --offwhite:         var(--surface-canvas);
  --lgray:            var(--surface-tinted);
  --muted:            var(--fg-secondary);
  --dark-gray:        var(--fg-primary);
  --border:           var(--border-default);
}

/* ── SEMANTIC TOKENS — DARK OVERRIDES ─────────────────────────────────── */
:root[data-theme='dark']{
  --surface-canvas:   #0A1418;
  --surface-elevated: #0F1E25;
  --surface-overlay:  #163040;
  --surface-tinted:   #142E3D;
  --surface-hover:    #163040;

  --border-subtle:    #1F3340;
  --border-default:   #2A4A5C;

  --fg-primary:       #E6EEF2;
  --fg-secondary:     #A8B8C2;
  --fg-heading:       #A0D4E8;
  /* --fg-on-brand stays #FFFFFF — text on the brand dark band */

  --link:             #4FB8E0;

  --shadow-elev:      0 1px 3px rgba(0,0,0,.4);
  --shadow-card:      0 12px 36px rgba(0,0,0,.5);
  --shadow-overlay:   0 8px 32px rgba(0,0,0,.6);

  --success:          #3EAE65;
  --success-bg:       rgba(62,174,101,.14);
  --warn:             #D9A23A;
  --warn-bg:          rgba(217,162,58,.14);
  --danger:           #E26464;
  --danger-bg:        rgba(226,100,100,.14);

  color-scheme: dark;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;background:var(--surface-canvas);}
body{background:var(--surface-canvas);color:var(--fg-primary);font-family:var(--body);
     font-size:17px;line-height:1.6;font-weight:400;
     min-height:100vh;display:flex;flex-direction:column;
     -webkit-font-smoothing:antialiased;}

/* ── HEADER (sticky, 87px, 6px dark-blue top accent) ──────────────────── */
header{background:var(--surface-elevated);height:87px;padding:0 32px;display:flex;align-items:center;
       gap:16px;border-top:6px solid var(--dark-blue);
       box-shadow:var(--shadow-elev);
       position:sticky;top:0;z-index:100;}
.header-left{display:flex;align-items:center;gap:18px;flex-shrink:0;}
.logo-lockup{display:flex;align-items:center;text-decoration:none;}
.logo-img{height:42px;width:auto;display:block;}
.brand-divider{height:48px;width:1px;background:var(--border-default);}

/* >vertex_ wordmark — Vertex platform mark (JetBrains Mono terminal aesthetic) */
.brand-wordmark{display:flex;align-items:center;text-decoration:none;
                font-family:'JetBrains Mono',monospace;font-weight:700;
                font-size:30px;color:var(--fg-heading);letter-spacing:-1px;line-height:1;
                white-space:nowrap;}
.brand-wordmark .chev{color:var(--orange);margin-right:4px;}
.brand-wordmark .cursor{color:var(--orange);animation:vertex-blink 1s steps(2) infinite;}
@keyframes vertex-blink{50%{opacity:0;}}

/* Module chip — optional text after the wordmark identifying the active sub-tool */
.module-chip{font-family:var(--head);font-size:13px;font-weight:400;color:var(--blue);
             letter-spacing:3px;text-transform:uppercase;border:1px solid rgba(2,126,172,.5);
             padding:6px 14px;background:rgba(2,126,172,.06);margin-left:6px;white-space:nowrap;}

.header-spacer{flex:1;}
.header-right{display:flex;align-items:center;gap:12px;flex-shrink:0;}

/* ── USER PILL — flat hover button, 63px avatar ───────────────────────── */
.user-menu{position:relative;}
.user-pill{display:flex;align-items:center;gap:10px;padding:6px 10px;
           background:transparent;border:none;border-radius:8px;cursor:pointer;font:inherit;
           transition:background .15s;color:var(--fg-heading);}
.user-pill:hover,.user-menu.open .user-pill{background:var(--surface-hover);}
.user-avatar{width:63px;height:63px;border-radius:50%;background:var(--light-blue);
             display:flex;align-items:center;justify-content:center;
             font-family:var(--head);font-size:22px;font-weight:400;color:var(--dark-blue);
             overflow:hidden;flex-shrink:0;letter-spacing:.5px;}
.user-avatar img{width:100%;height:100%;object-fit:cover;}
.user-text{display:flex;flex-direction:column;gap:1px;line-height:1.15;text-align:left;
           min-width:0;max-width:180px;}
.user-name{font-family:var(--body);font-size:14px;font-weight:500;color:var(--fg-heading);
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-upn {font-family:var(--body);font-size:11px;font-weight:400;color:var(--fg-secondary);
           overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-caret{margin-left:2px;color:var(--fg-secondary);font-size:12px;flex-shrink:0;}

/* ── DROPDOWN PANEL ───────────────────────────────────────────────────── */
.user-dropdown{position:absolute;top:calc(100% + 10px);right:0;min-width:280px;
               background:var(--surface-overlay);border:1px solid var(--border-default);
               box-shadow:var(--shadow-overlay);
               opacity:0;visibility:hidden;transform:translateY(-6px);
               transition:opacity .15s,visibility .15s,transform .15s;z-index:200;}
.user-menu.open .user-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dd-header{padding:18px 18px 14px;display:flex;align-items:center;gap:12px;
           border-bottom:1px solid var(--border-subtle);}
.dd-header .user-avatar{width:44px;height:44px;font-size:16px;}
.dd-header-text{display:flex;flex-direction:column;gap:2px;line-height:1.2;min-width:0;}
.dd-name{font-family:var(--body);font-size:14px;font-weight:600;color:var(--fg-heading);
         overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dd-upn{font-family:var(--body);font-size:11px;font-weight:400;color:var(--fg-secondary);
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dd-source{font-family:var(--body);font-size:10px;font-weight:400;color:var(--fg-secondary);
           letter-spacing:.5px;margin-top:4px;}
.dd-source::before{content:'●';color:var(--success);margin-right:5px;font-size:8px;vertical-align:1px;}
.dd-divider{height:1px;background:var(--border-subtle);margin:0;}
.dd-item{display:flex;align-items:center;gap:12px;padding:11px 18px;
         font-family:var(--body);font-size:13px;font-weight:500;color:var(--fg-primary);
         text-decoration:none;cursor:pointer;background:none;border:none;width:100%;
         text-align:left;transition:background .12s,color .12s;}
.dd-item:hover{background:var(--surface-hover);color:var(--link);}
.dd-item .dd-icon{font-size:14px;width:18px;text-align:center;color:var(--fg-secondary);}
.dd-item:hover .dd-icon{color:var(--link);}
.dd-item.dd-signout{color:var(--fg-primary);}
.dd-item.dd-signout:hover{background:rgba(243,91,4,.08);color:var(--orange);}
.dd-item.dd-signout:hover .dd-icon{color:var(--orange);}

/* Inline theme toggle inside the dropdown (light/dark segmented control) */
.dd-theme{padding:10px 18px 14px;}
.dd-theme-label{font-family:var(--head);font-size:11px;letter-spacing:2px;
                text-transform:uppercase;color:var(--fg-secondary);margin-bottom:6px;}
.dd-theme-group{display:flex;background:var(--surface-tinted);border:1px solid var(--border-subtle);
                padding:2px;}
.dd-theme-btn{flex:1;background:transparent;border:none;cursor:pointer;font:inherit;
              font-family:var(--head);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
              color:var(--fg-secondary);padding:7px 10px;display:inline-flex;align-items:center;
              justify-content:center;gap:6px;transition:background .12s,color .12s;}
.dd-theme-btn:hover{color:var(--fg-primary);}
.dd-theme-btn[aria-pressed='true']{background:var(--surface-elevated);color:var(--fg-heading);
                                   box-shadow:0 1px 2px rgba(6,56,73,.08);}

/* ── SIGN-IN PILL (when anonymous) ────────────────────────────────────── */
.signin-pill{display:flex;align-items:center;gap:6px;padding:9px 18px;
             background:var(--blue);border:1px solid var(--blue);border-radius:24px;
             font-family:var(--head);font-size:13px;font-weight:400;color:var(--fg-on-brand);
             letter-spacing:2px;text-transform:uppercase;text-decoration:none;
             transition:background .15s,border-color .15s;}
.signin-pill:hover{background:var(--dark-blue);border-color:var(--dark-blue);}

/* ── FOOTER ───────────────────────────────────────────────────────────── */
footer{background:var(--dark-blue);border-top:3px solid var(--blue);padding:26px 56px;
       display:flex;align-items:center;justify-content:space-between;margin-top:auto;}
.footer-copy{font-family:var(--body);font-size:14px;font-weight:300;color:rgba(255,255,255,.3);}
.footer-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);}

/* ── DARK-MODE TARGETED OVERRIDES ──────────────────────────────────────
   For per-app templates that use --dark-blue as a *text* color directly
   (instead of --fg-heading), force the readable heading color. Keeps
   ambient dark text legible without requiring every template to be
   rewritten in this pass. Background uses of --dark-blue (hero, footer,
   card-icon) are unaffected. */
:root[data-theme='dark'] .page-title,
:root[data-theme='dark'] .card-title,
:root[data-theme='dark'] .sso-name,
:root[data-theme='dark'] .preview-name,
:root[data-theme='dark'] .empty-title,
:root[data-theme='dark'] .review-user-name,
:root[data-theme='dark'] .stat-val,
:root[data-theme='dark'] .session-tile .name,
:root[data-theme='dark'] .session-tile .stats span strong,
:root[data-theme='dark'] .phase-banner strong,
:root[data-theme='dark'] .key-mask code,
:root[data-theme='dark'] .field-input{
  color:var(--fg-heading);
}
:root[data-theme='dark'] .back-crumb:hover{color:var(--fg-heading);}
:root[data-theme='dark'] .status.draft{background:var(--surface-tinted);color:var(--fg-heading);}
:root[data-theme='dark'] .phase-banner code{background:var(--surface-tinted);color:var(--fg-primary);}
:root[data-theme='dark'] .key-mask code{background:var(--surface-tinted);}

/* ── RESPONSIVE — chrome only ─────────────────────────────────────────── */
@media(max-width:640px){
  header{padding:0 16px;gap:10px;}
  .header-left{gap:10px;}
  .logo-img{height:34px;}
  .brand-divider{height:38px;}
  .brand-wordmark{font-size:22px;letter-spacing:-.5px;}
  .module-chip{display:none;}
  .user-avatar{width:44px;height:44px;font-size:16px;}
  .user-text{display:none;}
  .user-caret{display:none;}
  footer{padding:22px;flex-direction:column;gap:12px;}
}