/*
 * frame.css — Skilark app shell v2 (Phase 1: discover.html only)
 *
 * Defines:
 *   - Four body.theme-* token scopes (cream / paper / slate / ink)
 *   - .app-frame, .app-bar, .app-body, .app-status chrome
 *
 * All surface components consume only the tokens declared here.
 * No hard-coded colors below the token block.
 *
 * Phase 2 (PR #6) will load this file from remaining auth pages.
 * Until then, only discover.html includes it.
 */

/* ── SHARED :root — non-color design tokens ─────────────────────── */
:root {
  --radius-card:     10px;
  --radius-btn:      8px;
  --radius-input:    8px;
  --radius-badge:    6px;
  --radius-pill:     9999px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-reveal: cubic-bezier(.22, .61, .36, 1);

  /* Frame geometry */
  --frame-radius:    16px;
  --frame-shadow:    rgba(50,50,93,0.10) 0px 18px 48px -12px,
                     rgba(50,50,93,0.06) 0px 6px 16px -6px;
  --bar-h:           42px;

  /* Stacking tokens for layered slots inside .app-body — top-down.
     Each layer below offsets by the sum of layers above it. Pages bump
     these via body classes (e.g. body.has-banner) when the slot is active.
     Sticky math for any layer that lives below should reference the token,
     never a hardcoded pixel value. */
  --banner-stack-h:    0px;  /* signal-bar / nudges; bumped by body.has-banner */
  --region-toolbar-h:  0px;  /* reserved: a 3rd-layer slot below .region-toolbar
                                would consume this. Today the .region-toolbar
                                rule references --banner-stack-h directly (no
                                toolbar-below-toolbar exists yet). */
}

/* ── CREAM (light, default — warm) ─────────────────────────────── */
body.theme-cream {
  --matte:           #efeae0;
  --bg:              #f6f3ee;
  --surface:         #ffffff;
  --header-bg:       #ffffff;
  --border:          #e5edf5;
  --divider:         #efebe3;

  --text-primary:    #061b31;
  --text-secondary:  #64748d;
  --text-muted:      #6b7280; /* darkened for WCAG AA: ~4.6:1 on #fff */

  --accent:          #6366F1;
  --accent-light:    rgba(99, 102, 241, 0.06);
  --accent-mid:      #C7D2FE;
  --accent-hover:    #4F46E5;
  --tab-active-fg:   #4F46E5; /* indigo-700: ≥4.5:1 on #fff header-bg */

  --shadow-card:     rgba(50,50,93,0.08) 0px 4px 10px -2px,
                     rgba(0,0,0,0.03) 0px 2px 4px -2px;
  --shadow-elevated: rgba(50,50,93,0.15) 0px 8px 20px -4px,
                     rgba(0,0,0,0.08) 0px 4px 8px -4px;
  --shadow-header:   0 1px 0 var(--border);

  --input-bg:        #ffffff;
  --input-border:    #e5edf5;

  --error-color:     #DC2626;
  --error-bg:        rgba(220, 38, 38, 0.08);
  --success-color:   #16A34A;
  --success-bg:      rgba(22, 163, 74, 0.10);
  --warn-color:      #d97706;
  --warn-bg:         rgba(217, 119, 6, 0.10);

  --real:            #C2410C;
  --real-bg:         rgba(194, 65, 12, 0.08);
  --real-mid:        rgba(194, 65, 12, 0.22);
}

/* ── PAPER (light, neutral) ─────────────────────────────────────── */
body.theme-paper {
  --matte:           #e9eaee;
  --bg:              #f5f6f8;
  --surface:         #ffffff;
  --header-bg:       #ffffff;
  --border:          #e3e7ee;
  --divider:         #eef0f4;

  --text-primary:    #1a1f2e;
  --text-secondary:  #5c6478;
  --text-muted:      #6b7280; /* darkened for WCAG AA: ~4.6:1 on #fff */

  --accent:          #6366F1;
  --accent-light:    rgba(99, 102, 241, 0.06);
  --accent-mid:      #C7D2FE;
  --accent-hover:    #4F46E5;
  --tab-active-fg:   #4F46E5; /* indigo-700: ≥4.5:1 on #fff header-bg */

  --shadow-card:     rgba(20,30,60,0.07) 0px 4px 10px -2px,
                     rgba(0,0,0,0.03) 0px 2px 4px -2px;
  --shadow-elevated: rgba(20,30,60,0.14) 0px 8px 20px -4px,
                     rgba(0,0,0,0.07) 0px 4px 8px -4px;
  --shadow-header:   0 1px 0 var(--border);

  --input-bg:        #ffffff;
  --input-border:    #e3e7ee;

  --error-color:     #DC2626;
  --error-bg:        rgba(220, 38, 38, 0.08);
  --success-color:   #16A34A;
  --success-bg:      rgba(22, 163, 74, 0.10);
  --warn-color:      #d97706;
  --warn-bg:         rgba(217, 119, 6, 0.10);

  --real:            #C2410C;
  --real-bg:         rgba(194, 65, 12, 0.08);
  --real-mid:        rgba(194, 65, 12, 0.22);
}

/* ── SLATE (dark, default — deep cool slate) ────────────────────── */
body.theme-slate {
  --matte:           #0a0c10;
  --bg:              #14171c;
  --surface:         #1c2028;
  --header-bg:       #181b22;
  --border:          rgba(255, 255, 255, 0.07);
  --divider:         rgba(255, 255, 255, 0.05);

  --text-primary:    #f0f0f3;
  --text-secondary:  #9ca0ae;
  --text-muted:      #9498a8; /* darkened for WCAG AA: ~4.5:1 on #1c2028 */

  --accent:          #818CF8;
  --accent-light:    rgba(129, 140, 248, 0.06);
  --accent-mid:      rgba(129, 140, 248, 0.25);
  --accent-hover:    #6366F1;
  --tab-active-fg:   #818CF8; /* indigo-400: ~6.3:1 on #181b22 header-bg */

  --shadow-card:     rgba(0,0,0,0.30) 0px 4px 10px -2px,
                     rgba(0,0,0,0.20) 0px 2px 4px -2px;
  --shadow-elevated: rgba(0,0,0,0.45) 0px 12px 30px -6px,
                     rgba(0,0,0,0.30) 0px 6px 12px -4px;
  --shadow-header:   0 1px 0 var(--border);

  --input-bg:        rgba(255, 255, 255, 0.03);
  --input-border:    rgba(255, 255, 255, 0.08);

  --error-color:     #F87171;
  --error-bg:        rgba(248, 113, 113, 0.12);
  --success-color:   #4ADE80;
  --success-bg:      rgba(74, 222, 128, 0.12);
  --warn-color:      #fbbf24;
  --warn-bg:         rgba(251, 191, 36, 0.12);

  --real:            #FB923C;
  --real-bg:         rgba(251, 146, 60, 0.10);
  --real-mid:        rgba(251, 146, 60, 0.3);

  --frame-shadow:    rgba(0,0,0,0.50) 0px 18px 48px -12px,
                     rgba(0,0,0,0.30) 0px 6px 16px -6px;
}

/* ── INK (dark, near-black) ─────────────────────────────────────── */
body.theme-ink {
  --matte:           #050507;
  --bg:              #0a0a0c;
  --surface:         #131316;
  --header-bg:       #0e0e11;
  --border:          rgba(255, 255, 255, 0.06);
  --divider:         rgba(255, 255, 255, 0.04);

  --text-primary:    #ededf2;
  --text-secondary:  #8a8e9d;
  --text-muted:      #8285a0; /* darkened for WCAG AA: ~4.6:1 on #131316 */

  --accent:          #818CF8;
  --accent-light:    rgba(129, 140, 248, 0.05);
  --accent-mid:      rgba(129, 140, 248, 0.22);
  --accent-hover:    #6366F1;
  --tab-active-fg:   #818CF8; /* indigo-400: ~7.2:1 on #0e0e11 header-bg */

  --shadow-card:     rgba(0,0,0,0.40) 0px 4px 10px -2px,
                     rgba(0,0,0,0.30) 0px 2px 4px -2px;
  --shadow-elevated: rgba(0,0,0,0.55) 0px 12px 30px -6px,
                     rgba(0,0,0,0.40) 0px 6px 12px -4px;
  --shadow-header:   0 1px 0 var(--border);

  --input-bg:        rgba(255, 255, 255, 0.02);
  --input-border:    rgba(255, 255, 255, 0.06);

  --error-color:     #F87171;
  --error-bg:        rgba(248, 113, 113, 0.10);
  --success-color:   #4ADE80;
  --success-bg:      rgba(74, 222, 128, 0.10);
  --warn-color:      #fbbf24;
  --warn-bg:         rgba(251, 191, 36, 0.10);

  --real:            #FB923C;
  --real-bg:         rgba(251, 146, 60, 0.08);
  --real-mid:        rgba(251, 146, 60, 0.25);

  --frame-shadow:    rgba(0,0,0,0.60) 0px 18px 48px -12px,
                     rgba(0,0,0,0.40) 0px 6px 16px -6px;
}

/* ── Base reset (only applies when frame is active) ─────────────── */
body.sk-frame-active {
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--matte);
  -webkit-font-smoothing: antialiased;
  transition: background .35s var(--ease), color .35s var(--ease);
  overflow: hidden;
  height: 100vh;
}

/* ── APP FRAME ───────────────────────────────────────────────────── */
.app-frame {
  position: fixed;
  inset: 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--frame-radius);
  box-shadow: var(--frame-shadow);
  display: grid;
  grid-template-rows: var(--bar-h) 1fr var(--bar-h);
  overflow: hidden;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}

/* ── APP BAR (top) ───────────────────────────────────────────────── */
.app-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 18px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  height: var(--bar-h);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  user-select: none;
}
.app-bar .bar-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
}
.app-bar .bar-left .bar-wordmark {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
}
.app-bar .bar-left .bar-wordmark .ark { color: #F97316; }
.app-bar .bar-center { color: var(--text-secondary); }
.app-bar .bar-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
  overflow: hidden;
}

/* Theme-cycle pill */
.theme-cycle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 10px 5px 8px;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.theme-cycle:hover { color: var(--text-primary); border-color: var(--accent-mid); }
.theme-cycle .theme-ico { width: 13px; height: 13px; flex-shrink: 0; color: currentColor; }
.theme-cycle .theme-name { font-weight: 600; }

/* Avatar button — <summary> inside <details> */
.bar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0;
  cursor: pointer;
  border: none;
  position: relative;
  transition: background .15s var(--ease);
  list-style: none; /* remove <summary> disclosure triangle */
}
.bar-avatar:hover { background: var(--accent-hover); }
/* Remove disclosure triangle in WebKit */
.bar-avatar::-webkit-details-marker { display: none; }

/* Avatar dropdown — <details>[open] replaces old .bar-avatar-wrap.open */
.bar-avatar-wrap { position: relative; }
.bar-avatar-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 6px;
  box-shadow: var(--shadow-elevated);
  z-index: 200;
  display: none;
}
.bar-avatar-wrap[open] .bar-avatar-menu { display: block; }
.bar-avatar-menu .menu-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 10px 8px;
}
.bar-avatar-menu a,
.bar-avatar-menu button {
  display: flex;
  width: 100%;
  padding: 8px 10px;
  gap: 8px;
  align-items: center;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  text-decoration: none;
  text-align: left;
}
.bar-avatar-menu a:hover,
.bar-avatar-menu button:hover {
  background: var(--accent-light);
  color: var(--accent);
}
.bar-avatar-menu hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 6px;
}

/* ⌘K button */
.bar-cmd-k {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-badge);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.bar-cmd-k:hover { color: var(--text-secondary); border-color: var(--accent-mid); }
.bar-cmd-k kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
}

/* ⌘K dialog — native <dialog> element; showModal() controls visibility.
   Browser handles display:none until opened, so no .open class needed. */
.cmdK-dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
}
/* Dim the backdrop behind the modal */
.cmdK-dialog::backdrop { background: rgba(0,0,0,0.35); }
.cmdK-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-elevated);
  padding: 28px 32px;
  min-width: 300px;
  text-align: center;
}
.cmdK-box p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.cmdK-box .cmdK-close {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.cmdK-box .cmdK-close:hover { color: var(--text-primary); border-color: var(--accent-mid); }

/* ── APP BODY (only scroll surface) ─────────────────────────────── */
.app-body {
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  transition: background .35s var(--ease);
}

/* ── APP STATUS BAR (bottom) ─────────────────────────────────────── */
.app-status {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  background: var(--header-bg);
  border-top: 1px solid var(--border);
  height: var(--bar-h);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  user-select: none;
}
.app-status .status-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  flex-shrink: 0;
}
.app-status .status-hint {
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.12em;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.app-status .status-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  margin: 0 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
}
.app-status .status-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.app-status .status-stamp .live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success-color);
  animation: framePulse 2.4s ease-in-out infinite;
}
@keyframes framePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.45); }
  50%       { box-shadow: 0 0 0 5px rgba(22,163,74,0); }
}

/* ── Cross-surface tab nav (.bar-center) ─────────────────────────── */
.bar-tabs {
  display: inline-flex;
  gap: 4px;
}
.bar-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: all .15s var(--ease);
}
.bar-tab:hover {
  color: var(--text-primary);
  background: var(--accent-light);
}
.bar-tab[aria-current="page"],
.bar-tab.active {
  color: var(--tab-active-fg);
  background: var(--accent-light);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--accent);
}
/* Tab icons — visible at all sizes; hidden text shows on desktop only */
.bar-tab .tab-ico { flex-shrink: 0; }
.bar-tab .tab-label { display: inline; }

/* ── Résumé chip (.bar-left) ─────────────────────────────────────── */
.bar-resume-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: all .15s var(--ease);
}
.bar-resume-chip:hover {
  color: var(--text-secondary);
  border-color: var(--accent-mid);
}
.bar-resume-chip .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success-color);
  display: none; /* shown by JS when résumé present */
}
.bar-resume-chip .dot.has-resume {
  display: inline-block;
}

/* ── Layered slot pattern for content inside .app-body ─────────────
   The frame defines .app-body as the sole scroll container; this section
   names the slots that stack inside it so pages don't hand-roll sticky
   math. New pages MUST wrap their .app-body content in .scroll-region and
   tag children with the slot class. Legacy pages (discover/interviews/
   profile) currently hand-roll their own sticky math but reference the
   --banner-stack-h token; they migrate to .scroll-region opportunistically.

   Stack order (top → bottom):
     .banner          → sticky top: 0           (uses --banner-stack-h)
     .region-toolbar  → sticky top: --banner-stack-h
     .region-body     → fills remaining height, owns its own scroll

   Pages without view-mode toolbars can omit .region-toolbar; pages without
   nudges leave --banner-stack-h at 0px (the default) and the toolbar lands
   flush at the top. */
.scroll-region {
  display: grid;
  grid-template-rows: auto auto 1fr;
  height: 100%;
}
.scroll-region > .banner {
  position: sticky; top: 0; z-index: 40;
}
.scroll-region > .region-toolbar {
  position: sticky; top: var(--banner-stack-h); z-index: 30;
}
.scroll-region > .region-body {
  overflow: hidden; min-height: 0;
}

/* ── Date stamp — subtle differentiation from .status-hint ──────── */
#frame-status-date {
  letter-spacing: 0.10em;
}

/* ── Hide legacy header when frame is active ─────────────────────── */
body.sk-frame-active .header { display: none !important; }
body.sk-frame-active .site-footer { display: none !important; }
/* tailor.html uses .tailor-bar instead of .header — hide it too.
   The tailor context (company/role) is mirrored into #tailor-bar-context
   in .bar-left so no job context is lost when this bar is hidden. */
body.sk-frame-active .tailor-bar { display: none !important; }
/* next-steps.html "preview new discover" banner is moot once the frame
   is on all pages — both surfaces now share the same chrome */
body.sk-frame-active #new-discover-banner { display: none !important; }
/* Hide Discover/Pipeline toggle when Brief surface is active */
body.sk-brief-active #nav-mode-toggle { display: none; }

/* ── Legacy 100vh / --nav-h neutralization ──────────────────────────
   Legacy pages were authored against the old 56px sticky .header that
   the frame now hides.  Inside .app-body the scroll container is a
   grid 1fr row with a known computed height — 100vh overshoots by
   ~132px (24+24+42+42 = frame inset + bars).  Neutralise the layout
   variables so calc() expressions land correctly on .app-body instead
   of the viewport. */
body.sk-frame-active {
  --nav-h: 0px;
  --switcher-h: 0px;
}
body.sk-frame-active .listcol,
body.sk-frame-active .rail,
body.sk-frame-active .detail {
  height: 100% !important;
  max-height: 100% !important;
  top: 0 !important;
}
body.sk-frame-active .main,
body.sk-frame-active .workspace {
  min-height: 100% !important;
}

/* ── Profile: hide résumé chip (self-link) ───────────────────────── */
/* The chip links to /profile#resume — redundant and confusing when the
   user is already on /profile. data-page="profile" is set on <body>. */
body[data-page="profile"] .bar-resume-chip { display: none; }

/* ── Tailor back-arrow ───────────────────────────────────────────── */
.bar-back {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 4px;
  border-radius: var(--radius-badge);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.bar-back:hover { color: var(--text-primary); background: var(--accent-light); }

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .app-frame { inset: 8px; border-radius: 12px; }
  .app-bar   { padding: 0 12px; }
  /* tabs stay visible on mobile — icon only, label hidden */
  .app-status { padding: 0 12px; gap: 10px; }
  .app-status .status-hint { display: none; }
  .theme-cycle .theme-name { display: none; }
  .theme-cycle { padding: 5px 8px; }
  .bar-cmd-k { display: none; }
  /* Mobile: tab text hidden, icons remain */
  .bar-tab .tab-label { display: none; }
  .bar-tab { padding: 6px 8px; }
  /* Mobile: résumé chip — label hidden, icon+dot remain */
  .bar-resume-chip .resume-label { display: none; }
  .bar-resume-chip { padding: 4px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-frame, .app-body { transition: none !important; }
  .status-stamp .live-dot { animation: none !important; }
}