/* ---------------------------------------------------------------------------
   Phases -- the Hub's look follows the applicant journey.

     interest  (Phase 1)  light and airy: warm paper, soft shadowless cards,
                          a light serif title, a lighter sidebar.
     evaluate  (Phase 2)  structured: cool paper, hairline-ruled cards with a
                          teal top edge, shaded table heads, the core sidebar.
     team      (Phase 3)  solid: a full-bleed team-colored title band, heavy
                          left-edged cards, the deepest sidebar.
     hub       (Dashboard / Pipeline / Inbox)  the original neutral look.

   <body data-phase> follows the current tab; #modal-back[data-phase] follows
   the open profile's stage (closed stages go quiet gray). The tab and stage
   groupings live in core-config.js (PHASE_BY_TAB / PHASE_BY_STAGE).
   --ph-team is set to the team's brand color on team pages and on a hired
   applicant's profile. Colors come from the brand tokens in
   recruiting-hub.css; nothing here introduces a fourth hue.
   ------------------------------------------------------------------------- */

body {
  --ph-label: none;
  --ph-accent: var(--bright-orange);
  --ph-marker-interest: var(--warm-gold);
  --ph-marker-evaluate: var(--bright-orange);
  --ph-marker-team: #ffffff;
}
body[data-phase="interest"] { --ph-label: "Phase 1 · Interest"; --ph-accent: var(--bright-orange); }
body[data-phase="evaluate"] { --ph-label: "Phase 2 · Evaluate"; --ph-accent: var(--teal-500); }
/* Evaluate deepens step by step with the journey -- Discovery Calls, then
   References, then Drafting, then Offers -- and Team pages are darker than
   all of them. (canvas = page background, stripe = top edge, rule = card and
   title hairlines, th = table-head shade.) */
body[data-phase="evaluate"] { --ev-canvas: #eaf0f2; --ev-stripe: #7ea0ac; --ev-rule: #cfdde3; --ev-th: #f0f4f6; }
body[data-phase="evaluate"][data-tab="references"] { --ev-canvas: #dee8ec; --ev-stripe: #5a8294; --ev-rule: #b8ccd4; --ev-th: #e4edf1; }
body[data-phase="evaluate"][data-tab="drafting"] { --ev-canvas: #d2dfe5; --ev-stripe: #3a6475; --ev-rule: #a6bfc9; --ev-th: #d9e6eb; }
body[data-phase="evaluate"][data-tab="offers"] { --ev-canvas: #c5d5dc; --ev-stripe: #234856; --ev-rule: #92afbc; --ev-th: #ccdce3; }

body[data-phase="team"]     { --ph-label: "Phase 3 · Team"; --ph-accent: var(--ph-team, var(--teal)); }

/* ---- Sidebar: lighter -> deeper as the phases advance ------------------- */
.side-nav { transition: background-color .5s var(--ease-standard); }
body[data-phase="interest"] .side-nav { background: #2d5b6b; }
body[data-phase="evaluate"] .side-nav { background: #234856; }
body[data-phase="team"] .side-nav { background: #14303b; }

.tab { position: relative; }
.tab[data-phase]::before {
  content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; opacity: .5; transition: opacity .2s, top .2s, bottom .2s;
}
.tab[data-phase="interest"]::before { background: var(--ph-marker-interest); }
.tab[data-phase="evaluate"]::before { background: var(--ph-marker-evaluate); }
.tab[data-phase="team"]::before { background: var(--ph-marker-team); }
.tab.active[data-phase]::before { opacity: 1; top: 5px; bottom: 5px; }
.tab-sub[data-phase]::before { display: none; }
.tab[data-phase="hub"]::before { display: none; }

/* ---- Page canvas -------------------------------------------------------- */
.main-scroll { transition: background-color .5s var(--ease-standard); }
body[data-phase="interest"] .main-scroll {
  background:
    radial-gradient(820px 340px at 88% -90px, rgba(241, 192, 131, .38), rgba(241, 192, 131, 0) 72%),
    linear-gradient(180deg, #fdf6ea 0, #fcf9f3 340px);
}
body[data-phase="evaluate"] .main-scroll {
  background: var(--ev-canvas); box-shadow: inset 0 4px 0 var(--ev-stripe);
}
body[data-phase="team"] .main-scroll {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ph-team, var(--teal)) 14%, #b3c7cf) 0, #b0c4cc 420px);
}

/* ---- Page title: a phase eyebrow over a title that changes character ----- */
body[data-phase="interest"] .panel.active > h2::before,
body[data-phase="evaluate"] .panel.active > h2::before,
body[data-phase="team"] .panel.active h2::before {
  content: var(--ph-label); display: block; margin: 0 0 6px;
  font-family: var(--font-sans-alt); font-weight: var(--weight-bold); font-size: 11px;
  letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--ph-accent);
}
body[data-phase="interest"] .panel.active > h2 {
  font-family: var(--font-slab); font-weight: 300; font-size: 38px; letter-spacing: var(--tracking-tight);
  margin-bottom: 18px;
}
body[data-phase="evaluate"] .panel.active > h2 {
  font-weight: var(--weight-bold); font-size: 28px; padding-bottom: 10px; margin-bottom: 16px;
  border-bottom: 2px solid var(--ev-rule);
}
/* Team pages: the title becomes a full-bleed band in the team's color. */
body[data-phase="team"] .team-page-head {
  margin: -24px -28px 20px; padding: 30px 28px 26px; color: #fff;
  background: linear-gradient(115deg, var(--ph-team, #1a3642) 0%, color-mix(in srgb, var(--ph-team, #1a3642) 62%, #0a1a21) 100%);
  box-shadow: 0 6px 18px rgba(10, 26, 33, .18);
}
body[data-phase="team"] .team-page-head h2 {
  color: #fff; font-weight: var(--weight-black); font-size: 34px; margin: 0; letter-spacing: var(--tracking-tight);
}
body[data-phase="team"] .panel.active .team-page-head h2::before { color: rgba(255, 255, 255, .75); }

/* ---- Cards -------------------------------------------------------------- */
.card { transition: box-shadow .3s var(--ease-standard), border-color .3s, border-radius .3s; }
body[data-phase="interest"] .card {
  border: 0; border-radius: 18px; padding: 22px 24px;
  box-shadow: 0 12px 32px rgba(140, 100, 40, .09), 0 1px 2px rgba(35, 72, 87, .05);
}
body[data-phase="evaluate"] .card {
  border: 1px solid var(--ev-rule); border-top: 3px solid var(--ev-stripe); border-radius: 6px;
  box-shadow: var(--shadow-xs);
}
body[data-phase="team"] .card {
  border: 1px solid #b9ccd3; border-left: 5px solid var(--ph-team, var(--teal)); border-radius: 4px;
  box-shadow: 0 8px 20px rgba(20, 48, 59, .13);
}

/* ---- Tables ------------------------------------------------------------- */
body[data-phase="interest"] th, body[data-phase="interest"] td { border-bottom-color: #f0e7d8; }
body[data-phase="interest"] th { color: #9a8a70; font-weight: 600; }
body[data-phase="evaluate"] th { background: var(--ev-th); color: var(--teal); }
body[data-phase="team"] th { background: var(--teal); color: #fff; letter-spacing: .08em; }
body[data-phase="team"] tbody tr:nth-child(even) td { background: rgba(35, 72, 87, .04); }

/* ---- Pipeline: each stage group wears its phase, top to bottom ----------- */
.pipe-stage-section[data-phase] { padding-left: 14px; border-left: 3px solid transparent; }
.pipe-stage-section[data-phase="interest"] { border-left-color: var(--warm-gold); }
.pipe-stage-section[data-phase="evaluate"] { border-left-color: var(--bright-orange); }
.pipe-stage-section[data-phase="team"] { border-left-color: var(--teal); }
.pipe-stage-section[data-phase="closed"] { border-left-color: #c3c8ca; }
.pipe-stage-section[data-phase="interest"] th { color: #9a8a70; }
.pipe-stage-section[data-phase="evaluate"] th { background: #eef3f5; color: var(--teal); }
.pipe-stage-section[data-phase="team"] th { background: var(--teal); color: #fff; }
.pipe-stage-section[data-phase="closed"] { opacity: .85; }

/* ---- Sub tabs on team pages pick up the team color ---------------------- */
body[data-phase="team"] .team-subtab.active { color: var(--ph-team, var(--teal)); border-bottom-color: var(--ph-team, var(--bright-orange)); }

/* ===========================================================================
   Profile (side panel + full page) -- follows the applicant's own stage
   ========================================================================= */
#modal-back { --pp-accent: var(--bright-orange); }
#modal-back[data-phase="team"] { --pp-accent: var(--ph-team, var(--teal)); }

.modal header.m-modal-head { transition: background .4s var(--ease-standard); }

/* Interest: light and airy -- a paper-light header and soft cards. */
#modal-back[data-phase="interest"] .m-modal-head {
  background: linear-gradient(180deg, #fffaf1, #fbefdb); color: var(--teal);
  box-shadow: inset 0 -1px 0 #ecd9b6;
}
#modal-back[data-phase="interest"] .m-modal-head #m-name,
#modal-back[data-phase="interest"] .m-modal-head .x { color: var(--teal); }
#modal-back[data-phase="interest"] .m-modal-head .m-head-sub,
#modal-back[data-phase="interest"] .m-modal-head .m-head-sub a { color: var(--ink-soft); }
#modal-back[data-phase="interest"] .m-expand-btn {
  color: var(--teal); background: rgba(35, 72, 87, .06); border-color: rgba(35, 72, 87, .3);
}
#modal-back[data-phase="interest"] .m-expand-btn:hover { background: rgba(35, 72, 87, .12); }
#modal-back[data-phase="interest"] .m-stage-pill-btn:hover .pill { box-shadow: 0 0 0 2px rgba(35, 72, 87, .25); }
#modal-back[data-phase="interest"] .m-profile-pane { background: #fffdf8; }
#modal-back[data-phase="interest"] .m-profile-hero { background: linear-gradient(180deg, #fff7e9, #fffdf8); border-bottom-color: #f0e3c8; }
#modal-back[data-phase="interest"] .m-glance-card { border: 0; border-radius: 14px; box-shadow: 0 6px 18px rgba(140, 100, 40, .1); background: #fff; }
#modal-back[data-phase="interest"] .m-panel-tabs { background: #fffdf8; border-bottom-color: #f0e3c8; }
#modal-back[data-phase="interest"] .m-panel-tab.active { color: var(--teal); border-bottom-color: var(--bright-orange); }

/* Evaluate: structured -- the core teal header with an orange base line. */
#modal-back[data-phase="evaluate"] .m-modal-head { background: var(--teal); box-shadow: inset 0 -4px 0 var(--bright-orange); }
#modal-back[data-phase="evaluate"] .m-profile-pane { background: #f3f6f8; }
#modal-back[data-phase="evaluate"] .m-profile-hero { background: #fff; border-bottom: 1px solid #c9d8de; }
#modal-back[data-phase="evaluate"] .m-glance-card { border-radius: 6px; border-top: 3px solid var(--teal-500); }

/* Team: solid -- the team's color, heavy type, a deep base edge. */
#modal-back[data-phase="team"] .m-modal-head {
  background: linear-gradient(115deg, var(--ph-team, #1a3642), color-mix(in srgb, var(--ph-team, #1a3642) 60%, #0a1a21));
  box-shadow: inset 0 -5px 0 rgba(255, 255, 255, .22);
}
#modal-back[data-phase="team"] .m-modal-head #m-name { font-weight: var(--weight-black); }
#modal-back[data-phase="team"] .m-profile-pane { background: #e4ebee; }
#modal-back[data-phase="team"] .m-profile-hero {
  background: #f1f5f6; border-bottom: 3px solid var(--ph-team, var(--teal));
}
#modal-back[data-phase="team"] .m-glance-card { border-radius: 4px; border-left: 4px solid var(--ph-team, var(--teal)); }
#modal-back[data-phase="team"] .m-panel-tab.active { color: var(--ph-team, var(--teal)); border-bottom-color: var(--ph-team, var(--bright-orange)); }

/* Closed (rejected / withdrawn / too young): quiet and gray. */
#modal-back[data-phase="closed"] .m-modal-head { background: #5d6a70; }
#modal-back[data-phase="closed"] .m-profile-pane { background: #f2f3f3; }
#modal-back[data-phase="closed"] .m-profile-hero { filter: grayscale(.85); background: #f7f7f7; }

/* Full-page canvas + section cards per phase */
#modal-back.open.profile-full[data-phase="interest"] { background: #fbf5ea; }
#modal-back.open.profile-full[data-phase="interest"] .m-panes { background: #fbf5ea; }
#modal-back.open.profile-full[data-phase="interest"] .m-pane {
  border: 0; border-radius: 18px; box-shadow: 0 12px 30px rgba(140, 100, 40, .09);
}
#modal-back.open.profile-full[data-phase="interest"] .m-pane::before { border-bottom-color: #f0e7d8; }

#modal-back.open.profile-full[data-phase="evaluate"] { background: #e8eef1; }
#modal-back.open.profile-full[data-phase="evaluate"] .m-panes { background: #e8eef1; }
#modal-back.open.profile-full[data-phase="evaluate"] .m-pane {
  border: 1px solid #c9d8de; border-top: 3px solid var(--teal-500); border-radius: 6px; box-shadow: var(--shadow-xs);
}
#modal-back.open.profile-full[data-phase="evaluate"] .m-pane::before { color: var(--teal-500); }

#modal-back.open.profile-full[data-phase="team"] { background: #d9e3e7; }
#modal-back.open.profile-full[data-phase="team"] .m-panes { background: #d9e3e7; }
#modal-back.open.profile-full[data-phase="team"] .m-pane {
  border: 1px solid #b9ccd3; border-left: 5px solid var(--ph-team, var(--teal)); border-radius: 4px;
  box-shadow: 0 8px 20px rgba(20, 48, 59, .13);
}
#modal-back.open.profile-full[data-phase="team"] .m-pane::before { color: var(--ph-team, var(--teal)); }

#modal-back.open.profile-full[data-phase="closed"] { background: #e6e8e9; }
#modal-back.open.profile-full[data-phase="closed"] .m-panes { background: #e6e8e9; }

@media (prefers-reduced-motion: reduce) {
  .side-nav, .main-scroll, .card, .modal header.m-modal-head { transition: none; }
}

/* ---- Phone nav ---------------------------------------------------------------
   One compact, sideways-scrolling row. Every tab has a FIXED narrow width
   (68px) rather than sizing from its label, so no browser can stretch one
   across the screen; labels wrap to two lines. The Teams group's team links
   open inline to the right of Teams. Each tab's phase marker is a short bar
   along its bottom edge. */
@media (max-width: 640px) {
  .side-nav { max-width: 100vw; overflow-x: hidden; }
  .tabs {
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 2px;
    width: 100%; min-width: 0; max-width: 100%; padding: 4px 6px 6px;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex: 0 0 68px; width: 68px; min-width: 68px; max-width: 68px; min-height: 48px;
    padding: 6px 1px 8px; gap: 3px; font-size: 9.5px; letter-spacing: -.1px; line-height: 1.15; text-align: center;
    flex-direction: column; justify-content: center; align-items: center; white-space: normal;
  }
  .tab .tab-label { flex: 0 1 auto; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; }
  .side-nav-footer .tab { flex: 0 0 auto; width: auto; min-width: 0; max-width: none; min-height: 0; padding: 8px; }
  .tab-group { display: flex; flex-direction: row; flex: 0 0 auto; gap: 2px; }
  .tab-group-chevron { display: none; }
  .tab-subnav { display: none; transition: none; }
  .tab-group.open .tab-subnav { display: block; }
  .tab-subnav-inner { display: flex; flex-direction: row; overflow: visible; gap: 2px; }
  .tab-sub { flex: 0 0 84px; width: 84px; min-width: 84px; max-width: 84px; min-height: 48px; padding: 6px 4px; font-size: 11px; }
  .tab[data-phase]::before, .tab.active[data-phase]::before {
    left: 30%; right: 30%; width: auto; top: auto; bottom: 3px; height: 3px; border-radius: 3px;
  }
}