/* ============================================================
   DESIGN TOKENS
   Aligned to jobavet-resume.html app shell so the navigation
   bar, sidebar, and topbar match the rest of the product.
   ============================================================ */
:root{
  /* Brand / semantic colors */
  --primary:        #1e1b2e;   /* dark brand — buttons, logo, active states, headings */
  --primary-90:     #2c2842;   /* hover:bg-primary/90 */
  --primary-20:     rgba(30,27,46,.20); /* colored shadows / focus ring */
  --primary-10:     rgba(30,27,46,.10);
  --secondary:      #64748b;   /* muted body text, inactive icons (slate-500) */
  --secondary-2:    #94a3b8;   /* slate-400 micro text */
  --secondary-70:   rgba(100,116,139,.70);
  --secondary-40:   rgba(100,116,139,.40);
  --page:           #f8fafc;   /* app/content background */
  --border:         #e7eaf0;   /* default borders */
  --border-2:       #eef1f6;
  --highlight:      #e0e7ff;   /* selection bg */

  /* Surfaces */
  --surface:        #ffffff;
  --sidebar:        #f8fafc;   /* slate-50 */

  /* Status & accent palette */
  --indigo-50:#eef2ff; --indigo-500:#6366f1; --indigo-600:#4f46e5;
  --purple-50:#faf5ff; --purple-500:#a855f7; --purple-600:#9333ea;
  --emerald-50:#ecfdf5; --emerald-600:#059669;
  --red-50:#fef2f2; --red-200:#fecaca; --red-500:#ef4444; --red-700:#b91c1c;
  --amber-50:#fffbeb; --amber-600:#d97706;
  --slate-300:#cbd5e1;

  /* Radius */
  --r-2xl:1rem; --r-xl:.75rem; --r-lg:.5rem; --r-md:.375rem; --r-full:9999px;

  /* Shadow */
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-soft:0 2px 8px -1px rgba(15,23,42,.08);
  --shadow-md:0 4px 12px -2px rgba(15,23,42,.08),0 2px 6px -2px rgba(15,23,42,.06);
  --shadow-lg:0 24px 60px -20px rgba(15,23,42,.30);

  /* Motion */
  --ease-sidebar:cubic-bezier(0.25,0.1,0.25,1.0);
  --ease:cubic-bezier(.25,.1,.25,1);
}

::selection{ background:var(--highlight); }

*{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }

body{
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,
              Helvetica,Arial,sans-serif;
  background:var(--page);
  color:var(--primary);
  font-size:14px;
  line-height:1.5;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
}
.serif{ font-family:'Inter Tight',sans-serif; }

/* no-scrollbar utility */
.no-scrollbar{ scrollbar-width:none; -ms-overflow-style:none; }
.no-scrollbar::-webkit-scrollbar{ display:none; }

button{ font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
svg{ display:block; }

/* ============================================================
   APP SHELL — sidebar nav + topbar (from jobavet-resume.html)
   ============================================================ */
.shell{ display:flex; height:100vh; overflow:hidden; }

/* ---------- SIDEBAR (primary nav) ---------- */
.nav-side{
  width:280px; background:var(--sidebar); color:var(--secondary); flex:none;
  display:flex; flex-direction:column; transition:width .3s var(--ease);
  position:relative; z-index:30; border-right:1px solid var(--border);
}
.shell.collapsed .nav-side{ width:76px; }
.side-top{ display:flex; align-items:center; gap:11px; height:80px; padding:0 18px; }
.brand-mark{ width:38px; height:38px; flex:none; border-radius:11px; box-shadow:var(--shadow-md); }
.brand-word{ font-family:'Inter Tight',sans-serif; font-weight:700; font-size:20px; color:var(--primary); letter-spacing:-.02em; white-space:nowrap; transition:opacity .18s; }
.brand-word .v{ color:var(--indigo-600); }
.shell.collapsed .brand-word{ opacity:0; pointer-events:none; }

.side-scroll{ flex:1; overflow-y:auto; overflow-x:hidden; padding:8px 14px 4px; }
.side-scroll::-webkit-scrollbar{ width:0; }
.nav-group-label{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--secondary-2); font-weight:700; padding:16px 12px 7px; white-space:nowrap; transition:opacity .18s; }
.shell.collapsed .nav-group-label{ opacity:0; height:16px; padding-top:10px; }

.nav-item{ position:relative; }
.nav-link{
  display:flex; align-items:center; gap:13px; padding:10px 14px; border-radius:var(--r-xl); cursor:pointer;
  color:var(--secondary); font-size:.9rem; font-weight:500; white-space:nowrap; margin-bottom:3px;
  transition:background .2s,color .2s,box-shadow .2s;
}
.nav-link:hover{ background:rgba(255,255,255,.6); color:var(--primary); box-shadow:var(--shadow-sm); }
.nav-link.active{ background:var(--surface); color:var(--primary); font-weight:600; box-shadow:var(--shadow-sm); outline:1px solid rgba(0,0,0,.05); }
.nav-link .ic{ width:22px; height:22px; flex:none; display:grid; place-items:center; }
.nav-link .ic svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.nav-link .lbl{ flex:1; transition:opacity .16s; }
.nav-link .badge{ font-size:10px; font-weight:700; letter-spacing:.02em; background:var(--indigo-50); color:var(--indigo-600); padding:2px 7px; border-radius:var(--r-md); transition:opacity .16s; }
.nav-link .chev{ transition:transform .2s,opacity .16s; opacity:.5; }
.nav-item.open .chev{ transform:rotate(90deg); }
.shell.collapsed .nav-link .lbl,.shell.collapsed .nav-link .badge,.shell.collapsed .nav-link .chev{ opacity:0; pointer-events:none; }
.shell.collapsed .nav-link{ justify-content:center; padding:11px; }

.subnav{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); margin-left:20px; border-left:1px solid var(--border); padding-left:8px; }
.nav-item.open .subnav{ max-height:260px; }
.shell.collapsed .subnav{ display:none; }
.sublink{ display:block; padding:8px 12px; border-radius:var(--r-lg); font-size:13px; color:var(--secondary); cursor:pointer; white-space:nowrap; transition:.16s; font-weight:500; }
.sublink:hover{ color:var(--primary); background:rgba(255,255,255,.6); }
.sublink.active{ color:var(--primary); font-weight:600; }

.nav-item .flyout{
  position:absolute; left:70px; top:50%; transform:translateY(-50%) translateX(-6px);
  background:var(--primary); color:#fff; padding:7px 12px; border-radius:var(--r-lg); font-size:13px; white-space:nowrap;
  box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:.15s; z-index:60; font-weight:500;
}
.shell.collapsed .nav-item:hover .flyout{ opacity:1; transform:translateY(-50%) translateX(0); }
.shell:not(.collapsed) .flyout{ display:none; }

/* inert nav items: dimmed, no navigation */
.nav-link.locked{ cursor:default; opacity:.5; }
.nav-link.locked:hover{ background:none; color:var(--secondary); box-shadow:none; }
.shell.collapsed .nav-link.locked{ opacity:.5; }
.sublink.locked{ cursor:default; opacity:.5; }
.sublink.locked:hover{ background:none; color:var(--secondary); }

.side-bottom{ border-top:1px solid var(--border); padding:12px 14px; }
.profile{ display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:var(--r-xl); cursor:pointer; transition:.16s; }
.profile:hover{ background:rgba(255,255,255,.7); box-shadow:var(--shadow-sm); }
.profile .pf-av{ width:32px; height:32px; border-radius:var(--r-lg); background:linear-gradient(to top right,var(--indigo-500),var(--purple-500)); display:grid; place-items:center; color:#fff; font-weight:700; font-size:12px; flex:none; box-shadow:inset 0 1px 2px rgba(255,255,255,.3); }
.profile .pf-meta{ min-width:0; transition:opacity .16s; }
.profile .pf-meta b{ font-size:13px; color:var(--primary); font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile .pf-meta span{ font-size:11px; color:var(--secondary-2); white-space:nowrap; }
.shell.collapsed .profile .pf-meta{ opacity:0; width:0; pointer-events:none; }
.shell.collapsed .profile{ justify-content:center; }

.collapse-btn{
  display:flex; align-items:center; gap:13px; width:100%; background:none; border:none; color:var(--secondary);
  cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:500; padding:10px 14px; border-radius:var(--r-xl); margin-top:4px; transition:.16s;
}
.collapse-btn:hover{ background:rgba(255,255,255,.7); color:var(--primary); }
.collapse-btn .ic{ width:22px; flex:none; display:grid; place-items:center; }
.collapse-btn .ic svg{ transition:transform .3s var(--ease); width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.shell.collapsed .collapse-btn .ic svg{ transform:rotate(180deg); }
.shell.collapsed .collapse-btn .lbl{ opacity:0; pointer-events:none; }

/* ---------- MAIN column ---------- */
.shell-main{ flex:1; display:flex; flex-direction:column; min-width:0; height:100vh; }
.topbar{
  height:72px; background:rgba(255,255,255,.8); backdrop-filter:blur(12px); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:16px; padding:0 28px; flex:none; position:relative; z-index:20;
}
.crumbs{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--secondary); }
.crumbs b{ color:var(--primary); font-weight:600; }
.crumbs .sl{ color:var(--secondary-2); }
.topbar .grow{ flex:1; }
.tb-search{
  width:320px; height:42px; border:1px solid var(--border); border-radius:var(--r-xl); background:var(--surface);
  padding:0 14px 0 40px; font-family:inherit; font-size:14px; color:var(--primary); transition:.2s;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>");
  background-repeat:no-repeat; background-position:14px center;
}
.tb-search:focus{ outline:none; border-color:var(--indigo-500); box-shadow:0 0 0 3px var(--indigo-50); }
.tb-btn{ height:42px; border:none; background:var(--primary); border-radius:var(--r-xl); padding:0 18px; font-family:inherit; font-weight:700; font-size:13.5px; color:#fff; cursor:pointer; display:flex; align-items:center; gap:7px; box-shadow:var(--shadow-sm); transition:.2s; }
.tb-btn:hover{ background:var(--primary-90); }
.tb-btn:active{ transform:scale(.95); }
.tb-icon{ width:42px; height:42px; border:1px solid var(--border); background:var(--surface); border-radius:var(--r-xl); display:grid; place-items:center; cursor:pointer; color:var(--secondary); transition:.2s; }
.tb-icon:hover{ color:var(--primary); box-shadow:var(--shadow-sm); }

.screen{ flex:1; overflow-y:auto; }
/* On the tailor page the panels scroll internally, not the screen */
.shell-main[data-page="tailor"] .screen{ overflow:hidden; }
.shell-main[data-page="cover"] .screen{ overflow:hidden; }
.shell-main[data-page="interview"] .screen{ overflow-y:auto; }
@media(max-width:980px){
  .shell-main[data-page="tailor"] .screen{ overflow-y:auto; }
  .shell-main[data-page="cover"] .screen{ overflow-y:auto; }
}

@media(max-width:760px){
  .nav-side{ position:fixed; height:100vh; box-shadow:var(--shadow-lg); }
  .tb-search{ display:none; }
}

/* ============================================================
   INNER CONTENT LAYOUT (inside .screen)
   ============================================================ */
.content{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  padding:1.75rem;
  max-width:1320px;
  margin:0 auto;
}
@media(min-width:1024px){ .content{ padding:2.25rem 2.5rem; } }

/* top header strip: title + toolbar + search bar */
.jobs-header{ display:flex; flex-direction:column; gap:1rem; }
.jobs-header .page-title{ margin-bottom:0; }
.jobs-header .toolbar{ margin-bottom:0; }
.jobs-header .job-search-bar{ margin-bottom:0; }

/* body row: sidebar + job list side by side */
.jobs-body{ display:flex; gap:1.5rem; align-items:flex-start; }
@media(max-width:1023px){ .jobs-body{ flex-direction:column; } }

/* ---- Full-height jobs layout: header fixed on top, body fills the rest ---- */
@media(min-width:1024px){
  .shell-main[data-page="jobs"] .screen{ overflow:hidden; }       /* screen no longer scrolls; inner areas do */
  #pageJobs.page.active{ height:100%; }
  #pageJobs .content{ height:100%; max-height:100%; }
  #pageJobs .jobs-body{ flex:1; min-height:0; align-items:stretch; }   /* fill leftover height */
  #pageJobs .sidebar{ height:100%; align-self:stretch; top:0; position:relative; }
  #pageJobs .main{ height:100%; min-height:0; display:flex; }
  #pageJobs .main-inner{ flex:1; min-height:0; display:flex; flex-direction:column; }
  #pageJobs .job-list{ flex:1; overflow-y:auto; min-height:0; padding-right:.25rem; }
}

/* ---- Job Preference filter panel ---- */
.sidebar{
  width:280px;
  flex-shrink:0;
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-2xl);
  box-shadow:var(--shadow-sm);
  padding:1.5rem 1.25rem 1.25rem;
  position:sticky;
  top:1.75rem;
  max-height:calc(100vh - 72px - 3.5rem);   /* fallback for non-stretch contexts */
  transition:width .3s var(--ease-sidebar),
             padding .3s var(--ease-sidebar),
             opacity .25s var(--ease-sidebar),
             margin .3s var(--ease-sidebar),
             transform .3s var(--ease-sidebar);
}
.sidebar-scroll{ flex:1; overflow-y:auto; min-height:0; margin:0 -.25rem; padding:0 .25rem; }
.sidebar-actions{
  flex-shrink:0; display:flex; gap:.6rem;
  padding-top:1rem; margin-top:.5rem;
  border-top:1px solid var(--border);
}
.sb-refine-btn{
  flex:1; padding:.6rem 1rem;
  background:var(--primary); color:#fff; border:none;
  border-radius:var(--r-lg); font-size:.85rem; font-weight:700;
  cursor:pointer; box-shadow:var(--shadow-sm);
  transition:background .2s, transform .12s;
}
.sb-refine-btn:hover{ background:var(--primary-90); }
.sb-refine-btn:active{ transform:scale(.97); }
.sb-reset-btn{
  padding:.6rem 1rem;
  background:transparent; color:var(--secondary);
  border:1px solid var(--border); border-radius:var(--r-lg);
  font-size:.85rem; font-weight:600; cursor:pointer;
  transition:background .2s, color .2s, transform .12s;
}
.sb-reset-btn:hover{ background:var(--page); color:var(--primary); }
.sb-reset-btn:active{ transform:scale(.97); }

/* ---- Minimum Match Score box (profile + onboarding prefs + slider) ---- */
.ms-box{
  background:linear-gradient(180deg, var(--indigo-50), #ffffff);
  border:1px solid var(--indigo-200, #c7d2fe);
  border-radius:var(--r-xl);
  padding:.9rem;
  margin-bottom:1.1rem;
}
.ms-profile{ display:flex; align-items:center; gap:.55rem; }
.ms-avatar{
  width:34px; height:34px; flex-shrink:0; border-radius:var(--r-lg);
  background:var(--indigo-600); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.8125rem; font-weight:700; letter-spacing:.02em;
}
.ms-id{ display:flex; flex-direction:column; min-width:0; flex:1; }
.ms-name{ font-size:.85rem; font-weight:700; color:var(--primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ms-role{ font-size:.72rem; color:var(--secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* access buttons (Profile / Preferences) */
.ms-access{ display:flex; gap:.5rem; margin:.75rem 0; }
.ms-link-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  padding:.45rem .5rem;
  background:rgba(255,255,255,.7); border:1px solid var(--indigo-200,#c7d2fe);
  border-radius:var(--r-lg); color:var(--indigo-600);
  font-size:.7rem; font-weight:600; cursor:pointer;
  transition:background .15s, transform .12s;
}
.ms-link-btn:hover{ background:#fff; }
.ms-link-btn:active{ transform:scale(.97); }
.ms-link-btn svg{ flex-shrink:0; }
.ms-slider-block{ margin-top:.25rem; }

.sb-slider-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.sb-slider-head label{ margin-bottom:0; }
.sb-slider-val{ font-size:.8125rem; font-weight:700; color:var(--indigo-600); }
.ms-track-wrap{ position:relative; }
.sb-slider{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:var(--r-full);
  background:linear-gradient(to right, var(--indigo-600) var(--pct,0%), var(--border) var(--pct,0%));
  cursor:pointer; outline:none; position:relative; z-index:2;
}
.sb-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid var(--indigo-600);
  box-shadow:var(--shadow-sm); cursor:pointer;
}
.sb-slider::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid var(--indigo-600);
  box-shadow:var(--shadow-sm); cursor:pointer;
}
/* threshold marker showing the set value */
.ms-threshold{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:2px; height:16px; background:var(--indigo-600); border-radius:1px;
  z-index:1; pointer-events:none;
}
.ms-threshold-tip{
  position:absolute; bottom:calc(100% + 5px); left:50%; transform:translateX(-50%);
  font-size:.625rem; font-weight:700; color:#fff; background:var(--indigo-600);
  padding:.05rem .3rem; border-radius:var(--r-md); white-space:nowrap;
}
.ms-threshold-tip::after{
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:3px solid transparent; border-top-color:var(--indigo-600);
}
.ms-scale{ display:flex; justify-content:space-between; margin-top:.4rem; font-size:.625rem; color:var(--secondary-2); }
/* Collapsed when on Saved Jobs view */
.app[data-view="saved"] .sidebar{
  width:0;
  padding-left:0;
  padding-right:0;
  margin-right:-1.5rem;
  opacity:0;
  transform:translateX(-12px);
  pointer-events:none;
  overflow:hidden;
  border-color:transparent;
}

.sidebar h2{
  font-size:1.125rem;          /* text-lg */
  font-weight:700;
  letter-spacing:-0.01em;       /* tracking-tight */
  margin-bottom:0;
  white-space:nowrap;
}
.sidebar-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.75rem;
}
.sb-reset{
  display:none; align-items:center;
  background:none; border:none; cursor:pointer;
  font-size:.75rem; font-weight:600; color:var(--indigo-600);
  padding:.2rem .4rem; border-radius:var(--r-md);
}
.sb-reset:hover{ background:var(--indigo-50); }
/* clear-value button inside a select control */
.ctrl-x{
  display:flex; align-items:center; justify-content:center;
  width:18px; height:18px; flex-shrink:0;
  border:none; border-radius:var(--r-full);
  background:var(--page); color:var(--secondary); cursor:pointer;
  transition:background .15s, color .15s;
}
.ctrl-x:hover{ background:var(--red-50); color:var(--red-500); }
.control{ cursor:pointer; }
/* expandable option dropdown for sidebar fields */
.sb-field{ position:relative; }
.sb-field .chev{ display:inline-flex; transition:transform .2s var(--ease); }
.sb-field.drop-open .chev{ transform:rotate(180deg); }
.sb-field.drop-open .control,
.sb-field.drop-open .tokens{ border-color:var(--indigo-500); box-shadow:0 0 0 2px var(--indigo-50); }
.sb-drop{
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
  padding:.35rem; z-index:50;
  max-height:240px; overflow-y:auto;
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none;
  transition:opacity .16s var(--ease), transform .16s var(--ease);
}
.sb-field.drop-open .sb-drop{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.sb-opt{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  width:100%; text-align:left;
  padding:.5rem .65rem; border:none; background:none; cursor:pointer;
  font-size:.85rem; color:var(--primary); border-radius:var(--r-md);
  transition:background .12s;
}
.sb-opt:hover{ background:var(--page); }
.sb-opt.selected{ color:var(--indigo-600); font-weight:600; }
.sb-opt svg{ color:var(--indigo-600); width:15px; height:15px; flex-shrink:0; }

.field{ margin-bottom:1.1rem; }
.field > label{
  display:block;
  font-size:.8125rem;
  font-weight:700;
  margin-bottom:.45rem;
  white-space:nowrap;
}

/* select / input shells share the Input recipe */
.control{
  display:flex;
  align-items:center;
  gap:.5rem;
  width:100%;
  padding:.5rem .75rem;          /* px-3 py-2 */
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  background:var(--surface);
  font-size:.875rem;
  transition:box-shadow .2s, border-color .2s;
}
.control:focus-within{
  box-shadow:0 0 0 2px var(--primary-20);
}
.control input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  font-size:.875rem;
  color:var(--primary);
  min-width:0;
}
.control .chev{ color:var(--secondary); flex-shrink:0; }
.select-text{ flex:1; }
.select-text.placeholder{ color:var(--secondary); }

/* tag/token multiselect (Employment type, Location) */
.tokens{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.35rem;
  padding:.4rem .55rem;
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  background:var(--surface);
}
.token{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.15rem .4rem .15rem .5rem;
  background:var(--page);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  font-size:.8125rem;
  font-weight:500;
  white-space:nowrap;
}
.token button{
  display:flex;
  color:var(--secondary);
  border-radius:var(--r-full);
  transition:color .2s;
}
.token button:hover{ color:var(--red-500); }
.token-icon{ color:var(--secondary); margin-right:.1rem; }

/* ---- Main content column ---- */
.main{
  flex:1;
  min-width:0;
}

.main-inner{
  width:100%;
  max-width:80rem;             /* max-w-7xl */
}

.page-title{
  font-family:'Inter Tight',sans-serif;
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:-0.03em;
  margin-bottom:1.5rem;
}

/* ---- Toolbar row: segmented tabs + count + sort ---- */
.toolbar{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}

/* ---- Job search bar (Search view) ---- */
.job-search-bar{
  display:flex; gap:.5rem; flex-wrap:wrap;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-2xl);
  box-shadow:var(--shadow-sm);
  padding:.75rem;
  margin-bottom:1.25rem;
}
.jsb-field{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem;
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  background:var(--page);
  transition:box-shadow .15s, border-color .15s;
}
.jsb-field:focus-within{ border-color:var(--indigo-500); box-shadow:0 0 0 3px var(--indigo-50); }
.jsb-field svg{ color:var(--secondary); flex-shrink:0; }
.jsb-field input{
  flex:1; min-width:0; border:none; background:transparent;
  font-size:.875rem; color:var(--primary); outline:none;
}
.jsb-field input::placeholder{ color:var(--secondary); }
.jsb-grow{ flex:1; min-width:200px; }
.jsb-loc{ width:200px; flex-shrink:0; }
.jsb-chev{ background:none; border:none; color:var(--secondary); cursor:pointer; flex-shrink:0; display:flex; }
.jsb-chev:hover{ color:var(--primary); }
.jsb-platform{
  display:flex; align-items:center; gap:.5rem;
  width:200px; flex-shrink:0;
  padding:.5rem .75rem;
  border:1px solid var(--border); border-radius:var(--r-xl);
  background:var(--page); cursor:pointer;
  transition:background .15s;
}
.jsb-platform:hover{ background:var(--border-2); }
.jsb-platform svg{ color:var(--secondary); flex-shrink:0; }
.jsb-platform-label{ flex:1; text-align:left; font-size:.875rem; color:var(--secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jsb-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.5rem 1.25rem;
  background:var(--primary); color:#fff;
  border:none; border-radius:var(--r-xl);
  font-size:.875rem; font-weight:700;
  box-shadow:var(--shadow-sm); cursor:pointer;
  transition:background .2s, opacity .2s, transform .12s;
}
.jsb-submit svg{ width:14px; height:14px; }
.jsb-submit:hover:not(:disabled){ background:var(--primary-90); }
.jsb-submit:active:not(:disabled){ transform:scale(.97); }
.jsb-submit:disabled{ opacity:.5; cursor:not-allowed; }
/* hide the bar in Saved view */
.app[data-view="saved"] .job-search-bar{ display:none; }
@media(max-width:760px){
  .jsb-grow, .jsb-loc, .jsb-platform{ width:100%; flex:1 1 100%; }
}


/* Segmented tabs ✅ */
.segmented{
  display:inline-flex;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-full);
  padding:.25rem;
  box-shadow:var(--shadow-sm);
}
.seg-tab{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem 1rem;
  font-size:.875rem;
  font-weight:700;
  color:var(--secondary);
  border-radius:var(--r-full);
  transition:background .2s, color .2s, transform .12s;
}
.seg-tab:active{ transform:scale(.95); }
.seg-tab:hover{ color:var(--primary); }
.seg-tab[aria-selected="true"]{
  background:var(--primary);
  color:#fff;
}
.seg-tab[aria-selected="true"]:hover{ color:#fff; }

.count{
  flex:1;
  text-align:center;
  font-size:1rem;
  font-weight:500;
}
@media(max-width:640px){ .count{ flex-basis:100%; order:3; text-align:left; } }

.sort{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-left:auto;
}
.sort-label{ font-size:.875rem; font-weight:600; }
.sort-select{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.5rem .85rem;
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  background:var(--surface);
  font-size:.875rem;
  box-shadow:var(--shadow-sm);
}
.sort-select .chev{ color:var(--secondary); }

/* ============================================================
   JOB CARD
   ============================================================ */
.job-list{ display:flex; flex-direction:column; gap:1.25rem; }

/* ---- Pagination ---- */
.pagination{
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  padding:1.25rem 0 .5rem; flex-shrink:0;
}
.pg-btn{
  min-width:36px; height:36px; padding:0 .5rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); color:var(--primary);
  font-size:.85rem; font-weight:600; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.pg-btn:hover:not(:disabled):not(.active){ background:var(--page); border-color:var(--secondary-2); }
.pg-btn.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
.pg-btn:disabled{ opacity:.4; cursor:not-allowed; }
.pg-arrow{ color:var(--secondary); }

.job-card{
  flex-shrink:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-2xl);
  box-shadow:var(--shadow-sm);
  overflow:visible;            /* allow status / cta dropdowns to escape the card */
  transition:box-shadow .2s, opacity .3s, transform .3s;
}
.job-card:hover{ box-shadow:var(--shadow-md); }

.job-body{ padding:12px; }

.job-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.job-source{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:.8125rem;
  color:var(--secondary);
  font-weight:500;
}
.job-source svg{ flex-shrink:0; }

.match-badge{
  font-size:.75rem;
  font-weight:600;
  color:var(--secondary);
  background:var(--page);
  padding:.15rem .5rem;
  border-radius:var(--r-md);
}
.match-badge b{ color:var(--primary); font-weight:700; }

/* right-side progress controls */
.job-actions{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
}
.progress-label{ font-size:.8125rem; color:var(--secondary); font-weight:500; }

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.4rem .35rem .4rem .65rem;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface);
  font-size:.8125rem;
  font-weight:500;
  position:relative;
  user-select:none;
}
.status-dot{ width:6px; height:6px; border-radius:var(--r-full); background:var(--secondary); flex-shrink:0; transition:background .2s; }
.status-pill .divide{ width:1px; height:14px; background:var(--border); flex-shrink:0; }
.status-pill .chev-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.15rem .3rem;
  border-radius:var(--r-md);
  color:var(--secondary);
  cursor:pointer;
  transition:background .18s, color .18s, transform .22s var(--ease);
  border:none; background:none;
}
.status-pill .chev-btn:hover{ background:var(--page); color:var(--primary); }
.status-pill.open .chev-btn{ transform:rotate(180deg); color:var(--primary); }

/* per-status dot colors */
.status-pill[data-status="Saved"]      .status-dot{ background:var(--emerald-600); }
.status-pill[data-status="Preparing"]  .status-dot{ background:var(--indigo-500); }
.status-pill[data-status="Applied"]    .status-dot{ background:var(--amber-600); }
.status-pill[data-status="Interview"]  .status-dot{ background:var(--purple-500); }
.status-pill[data-status="Offer"]      .status-dot{ background:#10b981; }
.status-pill[data-status="Rejected"]   .status-dot{ background:var(--red-500); }

/* status dropdown */
.status-drop{
  position:fixed;            /* portal-style: escapes the list/screen overflow clip */
  top:0; left:0;            /* real coordinates set in JS (positionStatusDrop) */
  min-width:170px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  opacity:0;
  transform:translateY(-6px) scale(.97);
  pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease);
  z-index:1000;            /* above every card */
  transform-origin:top left;
  padding:.35rem;
}
.status-pill.open .status-drop{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.status-opt{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .75rem;
  border-radius:var(--r-lg);
  font-size:.8125rem; font-weight:500;
  color:var(--primary);
  cursor:pointer;
  transition:background .14s;
  border:none; background:none; width:100%; text-align:left;
}
.status-opt:hover{ background:var(--page); }
.status-opt.active{ font-weight:700; background:var(--page); }
.status-opt .opt-dot{
  width:7px; height:7px; border-radius:var(--r-full); flex-shrink:0;
}
.status-opt[data-val="Saved"]     .opt-dot{ background:var(--emerald-600); }
.status-opt[data-val="Preparing"] .opt-dot{ background:var(--indigo-500); }
.status-opt[data-val="Applied"]   .opt-dot{ background:var(--amber-600); }
.status-opt[data-val="Interview"] .opt-dot{ background:var(--purple-500); }
.status-opt[data-val="Offer"]     .opt-dot{ background:#10b981; }
.status-opt[data-val="Rejected"]  .opt-dot{ background:var(--red-500); }
/* active checkmark */
.status-opt .opt-check{ margin-left:auto; color:var(--primary); opacity:0; }
.status-opt.active .opt-check{ opacity:1; }

/* main CTA (Prepare Application / Fast Apply / Apply on Website) */
.cta-wrap{
  position:relative;
  display:inline-flex;
}
.cta{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.5rem .9rem;
  background:var(--primary);
  color:#fff;
  font-size:.8125rem;
  font-weight:700;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:background .2s, transform .12s;
}
.cta:hover{ background:var(--primary-90); }
.cta:active{ transform:scale(.98); }
.cta .cta-chev{
  margin-left:.1rem; padding-left:.5rem;
  border-left:1px solid rgba(255,255,255,.25);
  display:inline-flex; align-items:center;
  transition:transform .2s;
}
.cta-wrap.open .cta .cta-chev{ transform:rotate(180deg); }

/* dropdown menu */
.cta-drop{
  position:fixed;            /* portal-style: escapes the list/screen overflow clip */
  top:0; left:0;            /* real coordinates set in JS (positionCtaDrop) */
  width:auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  opacity:0;
  transform:translateY(-6px) scale(.98);
  pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease);
  z-index:1000;            /* above every card */
  transform-origin:top center;
}
.cta-wrap.open .cta-drop{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.cta-drop-item{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.7rem 1rem;
  font-size:.875rem;
  font-weight:500;
  color:var(--primary);
  cursor:pointer;
  transition:background .15s;
  border:none;
  background:none;
  width:100%;
  text-align:left;
  white-space:nowrap;
}
.cta-drop-item:hover{ background:var(--page); }
.cta-drop-item + .cta-drop-item{ border-top:1px solid var(--border-2); }
.cta-drop-item svg{ color:var(--secondary); flex-shrink:0; }

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.4rem;
  border-radius:var(--r-lg);
  color:var(--secondary);
  transition:background .2s, color .2s;
}
.icon-btn:hover{ background:var(--page); color:var(--primary); }

/* Save Job button (Search view) — secondary, with active/saved state */
.btn-save-job{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem 1rem;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--primary);
  border-radius:var(--r-lg);
  font-size:.8125rem; font-weight:600; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, transform .12s;
}
.btn-save-job svg{ color:var(--secondary); transition:color .2s; }
.btn-save-job:hover{ background:var(--page); border-color:var(--secondary-2); }
.btn-save-job:active{ transform:scale(.96); }
.btn-save-job.saved{
  background:var(--emerald-50);
  border-color:#bbf7d0;
  color:var(--emerald-600);
}
.btn-save-job.saved svg{ color:var(--emerald-600); }

/* title row */
.job-head{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-top:1rem;
}
.company-logo{
  width:52px; height:52px;
  border-radius:var(--r-xl);
  background:var(--page);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden;
  color:var(--secondary);
  border:1px solid var(--border);
}
.company-logo svg{ width:30px; height:30px; }
.job-title{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:1.0625rem;
  font-weight:700;
  letter-spacing:-0.01em;
}
.job-title .ext{ color:var(--secondary); }
.job-title .ext:hover{ color:var(--primary); }
.job-company{ font-size:.9rem; margin-top:.1rem; }
.job-company .name{ font-weight:600; color:var(--primary); }
.job-company .loc{ color:var(--secondary); margin-left:.35rem; }

.job-divider{ height:1px; background:var(--border); margin:1rem 0 .9rem; }

.job-meta{
  display:flex;
  align-items:center;
  gap:1.5rem;
  flex-wrap:wrap;
  font-size:.875rem;
  font-weight:600;
}
.job-meta .item{ display:inline-flex; align-items:center; gap:.5rem; }
.job-meta svg{ color:var(--secondary); }

/* footer strip: resume / cover letter generation */
.job-foot{
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  align-items:stretch;
  padding:0;
  background:var(--page);
  border-top:1px solid var(--border);
  border-radius:0 0 var(--r-2xl) var(--r-2xl);
}
/* round the clickable columns so their hover bg respects the card corners */
.job-foot .doc-col-wrap:first-child .doc-col{ border-bottom-left-radius:var(--r-2xl); }
.job-foot .doc-col-wrap:last-child .doc-col{ border-bottom-right-radius:var(--r-2xl); }
/* each readiness column is clickable */
.doc-col-wrap{ position:relative; display:flex; align-items:stretch; }
.doc-col{
  flex:1;
  display:flex; flex-direction:column; gap:.3rem;
  padding:12px;
  background:transparent; border:none; text-align:left;
  cursor:pointer;
  transition:background .15s;
}
.doc-col:hover{ background:var(--border-2); }
.doc-col:active{ background:var(--border); }
/* ellipsis overflow menu button — 24x24 */
.doc-menu-btn{
  flex-shrink:0; width:24px; height:24px; margin:auto .9rem auto 0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:var(--r-md);
  color:var(--secondary); cursor:pointer;
  transition:background .15s, border-color .15s;
}
.doc-menu-btn svg{ width:16px; height:16px; }
.doc-menu-btn:hover{ background:var(--surface); border-color:var(--border); color:var(--primary); }
.doc-menu{
  position:absolute; bottom:calc(100% - 6px); right:.75rem;
  min-width:210px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
  overflow:hidden; z-index:60;
  opacity:0; transform:translateY(6px) scale(.98); pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease);
  transform-origin:bottom right;
}
.doc-col-wrap.menu-open .doc-menu{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.doc-col-wrap.menu-open .doc-menu-btn{ background:var(--surface); border-color:var(--border); color:var(--primary); }
.doc-label{ font-size:.8125rem; font-weight:600; color:var(--primary); }
/* score line: colored number + neutral /100 */
.doc-score{ font-size:1.0625rem; font-weight:800; line-height:1; }
.doc-score .dc-den{ font-size:.75rem; font-weight:600; color:var(--secondary); }
/* "Ready" tag for cover letter */
.doc-ready{
  display:inline-flex; align-items:center; gap:.3rem; align-self:flex-start;
  font-size:.7rem; font-weight:700;
  color:var(--emerald-600); background:var(--emerald-50);
  border:1px solid #bbf7d0; padding:.12rem .5rem; border-radius:var(--r-full);
}
.doc-ready svg{ width:12px; height:12px; }
/* not-ready CTA */
.doc-cta{
  display:inline-flex; align-items:center; gap:.35rem; align-self:flex-start;
  font-size:.8125rem; font-weight:600; color:var(--indigo-600);
}
.doc-cta svg{ width:13px; height:13px; }
.gen-status{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.875rem;
  color:var(--secondary);
}
.gen-status .x{ color:var(--secondary); }
.gen-status.done{ color:var(--emerald-600); }
.gen-status.ready{ color:var(--emerald-600); }
.tailor-score{
  font-size:.7rem; font-weight:700;
  padding:.1rem .45rem; border-radius:var(--r-full);
  margin-left:.1rem;
}
.foot-divide{ width:1px; background:var(--border); }
/* Edit button — outline style (replaces Generate once tailored) */
.btn-edit{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .8rem;
  background:transparent;
  border:1px solid var(--indigo-600);
  color:var(--indigo-600);
  border-radius:var(--r-lg);
  font-size:.8125rem; font-weight:600;
  transition:background .2s, color .2s, transform .12s;
}
.btn-edit:hover{ background:var(--indigo-50); }
.btn-edit:active{ transform:scale(.95); }
.btn-generate{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .8rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  font-size:.8125rem;
  font-weight:600;
  transition:background .2s, color .2s, transform .12s;
}
.btn-generate:hover{ background:var(--surface); color:var(--primary); box-shadow:var(--shadow-sm); }
.btn-generate:active{ transform:scale(.95); }

/* Empty state */
.empty{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:5rem 1rem;
  color:var(--secondary);
}
.empty svg{ color:var(--secondary-40); margin-bottom:1rem; }
.empty h3{ font-size:.95rem; font-weight:700; color:var(--primary); margin-bottom:.35rem; }
.empty p{ font-size:.875rem; max-width:22rem; }
/* active-filter chips on the search empty state */
.empty-chips{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:1.25rem; max-width:32rem; }
.empty-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.8125rem; font-weight:600; color:var(--primary);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-full); padding:.3rem .35rem .3rem .7rem;
}
.empty-chip .ec-cat{ color:var(--secondary); font-weight:500; }
.empty-chip button{
  display:flex; align-items:center; justify-content:center;
  width:18px; height:18px; border:none; border-radius:var(--r-full);
  background:var(--page); color:var(--secondary); cursor:pointer;
  transition:background .15s, color .15s;
}
.empty-chip button:hover{ background:var(--red-50); color:var(--red-500); }
.empty-clear{
  margin-top:1.25rem;
  padding:.5rem 1.1rem;
  background:var(--primary); color:#fff; border:none;
  border-radius:var(--r-lg); font-size:.8125rem; font-weight:700;
  cursor:pointer; transition:background .2s, transform .12s;
}
.empty-clear:hover{ background:var(--primary-90); }
.empty-clear:active{ transform:scale(.97); }

/* card removal animation */
.job-card.removing{ opacity:0; transform:scale(.97) translateY(-6px); }

/* ============================================================
   PAGE NAVIGATION — job-list ↔ tailor
   shell-main carries data-page="jobs" or data-page="tailor"
   ============================================================ */
.shell-main{ transition:none; }

/* Topbar slots — only one visible per page */
.tb-jobs{ display:flex; align-items:center; gap:16px; flex:1; }
.tb-tailor{ display:none; align-items:center; gap:12px; flex:1; }
.tb-cover{ display:none; }
.tb-context{ display:none; align-items:center; gap:14px; flex:1; }
.shell-main[data-page="tailor"] .tb-jobs{ display:none; }
.shell-main[data-page="tailor"] .tb-tailor:not(.tb-cover){ display:flex; }
.shell-main[data-page="cover"] .tb-jobs{ display:none; }
.shell-main[data-page="cover"] .tb-cover{ display:flex; }
/* Tracker & Interview pages use the shared breadcrumb context bar */
.shell-main[data-page="tracker"] .tb-jobs,
.shell-main[data-page="interview"] .tb-jobs{ display:none; }
.shell-main[data-page="tracker"] .tb-context,
.shell-main[data-page="interview"] .tb-context{ display:flex; }
/* clickable breadcrumb */
.crumbs a{ color:var(--secondary); text-decoration:none; cursor:pointer; border-radius:var(--r-md); padding:1px 4px; transition:color .15s, background .15s; }
.crumbs a:hover{ color:var(--primary); background:var(--page); }
.crumbs .sep{ color:var(--secondary-2); }
.crumbs .cur{ color:var(--primary); font-weight:600; }

/* back button */
.tb-back{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .8rem;
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  background:var(--surface);
  font-size:.875rem; font-weight:600; color:var(--secondary);
  box-shadow:var(--shadow-sm);
  transition:background .18s,color .18s,transform .12s;
}
.tb-back:hover{ background:var(--page); color:var(--primary); }
.tb-back:active{ transform:scale(.96); }

/* tailor topbar job context chip */
.tb-job-chip{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.4rem .85rem .4rem .55rem;
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  background:var(--surface);
  font-size:.875rem; font-weight:500;
  box-shadow:var(--shadow-sm);
}
.tb-job-chip .chip-logo{
  width:26px; height:26px; border-radius:var(--r-lg);
  background:var(--page); border:1px solid var(--border);
  display:grid; place-items:center; flex-shrink:0; overflow:hidden;
}
.tb-job-chip .chip-logo svg{ width:16px; height:16px; color:var(--secondary); }
.tb-job-chip .chip-title{ font-weight:600; color:var(--primary); }
.tb-job-chip .chip-sep{ color:var(--secondary-2); margin:0 .1rem; }
.tb-job-chip .chip-co{ color:var(--secondary); }

/* match score badge in topbar */
.tb-match{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem;
  border-radius:var(--r-xl);
  background:var(--emerald-50);
  color:var(--emerald-600);
  font-size:.8125rem; font-weight:700;
  border:1px solid #abe0b8;
}

/* tailor topbar action buttons */
.tb-tailor-actions{ display:flex; align-items:center; gap:.6rem; margin-left:auto; }
.tb-save{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem 1rem;
  background:var(--primary); color:#fff;
  border-radius:var(--r-xl);
  font-size:.875rem; font-weight:700;
  box-shadow:var(--shadow-sm);
  transition:background .2s,transform .12s;
}
.tb-save:hover{ background:var(--primary-90); }
.tb-save:active{ transform:scale(.97); }

/* Screen pages */
.page{ display:none; }
.page.active{ display:block; animation:pageIn .25s var(--ease) both; }
@keyframes pageIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

/* Tailor page full layout — fills viewport, panels scroll independently */
.tailor-page-body{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:1.5rem;
  padding:1.5rem 2.5rem;
  max-width:1400px;
  margin:0 auto;
  align-items:stretch;
  /* fill the screen area: full viewport minus the 72px topbar */
  height:calc(100vh - 72px);
}
@media(max-width:980px){
  .tailor-page-body{ grid-template-columns:1fr; padding:1.5rem; height:auto; }
}

/* Expanded state on tailor page */
.tailor-page-body.expanded{ grid-template-columns:1fr; }
.tailor-page-body.expanded .resume-side-page{ display:none; }
.tailor-page-body.expanded .breakdown{ grid-template-columns:repeat(6,1fr); }
@media(max-width:760px){ .tailor-page-body.expanded .breakdown{ grid-template-columns:repeat(3,1fr); } }

/* tailor panels as cards — each fills column height and scrolls internally */
.tailor-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-2xl);
  box-shadow:var(--shadow-sm);
  height:100%;
  overflow-y:auto;
  overflow-x:clip;
  min-height:0;
}
@media(max-width:980px){
  .tailor-card{ height:auto; overflow-y:visible; }
}

/* ===== Cover Letter page ===== */
.cover-pill{ background:var(--indigo-50); color:var(--indigo-600); }
.cover-page-body{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:1.5rem; padding:1.5rem 2.5rem; max-width:1400px; margin:0 auto;
  align-items:stretch; height:calc(100vh - 72px);
}
@media(max-width:980px){ .cover-page-body{ grid-template-columns:1fr; padding:1.5rem; height:auto; } }
.cover-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-2xl); box-shadow:var(--shadow-sm);
  height:100%; overflow-y:auto; overflow-x:clip; min-height:0;
}
@media(max-width:980px){ .cover-card{ height:auto; overflow-y:visible; } }

/* the letter document */
.cover-doc{ padding:2.5rem 2.75rem; font-size:.875rem; color:var(--primary); line-height:1.65; }
.cover-letterhead{ margin-bottom:1.5rem; }
.cover-letterhead .cl-name{ font-family:'Inter Tight',sans-serif; font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }
.cover-letterhead .cl-contact{ font-size:.8125rem; color:var(--secondary); margin-top:.25rem; }
.cover-meta{ font-size:.8125rem; color:var(--secondary); margin-bottom:1.25rem; }
.cover-doc .cl-greeting{ margin-bottom:.9rem; font-weight:600; }
/* editable paragraph boxes — same pattern as resume rz-box */
.cl-para{
  display:block; background:var(--surface);
  border:1px solid transparent; border-radius:var(--r-md);
  padding:.55rem .7rem; margin:0 -.7rem .7rem;
  cursor:text; outline:none;
  transition:background .2s, border-color .2s, box-shadow .2s;
}
.cl-para:hover{ border-color:var(--border); background:#fcfcfd; }
.cl-para:focus{ border-color:var(--indigo-500); box-shadow:0 0 0 2px var(--indigo-50); background:var(--surface); }
.cl-sign{ margin-top:1.25rem; }

/* loading / generating state */
.cover-loading{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; text-align:center; padding:2rem; gap:1.25rem;
}
.cl-spinner{
  width:54px; height:54px; border-radius:50%;
  border:4px solid var(--indigo-50); border-top-color:var(--indigo-600);
  animation:clspin .8s linear infinite;
}
@keyframes clspin{ to{ transform:rotate(360deg); } }
.cover-loading h3{ font-size:1.0625rem; font-weight:700; color:var(--primary); }
.cover-loading p{ font-size:.85rem; color:var(--secondary); max-width:34ch; }
.cl-steps{ display:flex; flex-direction:column; gap:.55rem; margin-top:.5rem; text-align:left; }
.cl-step{ display:flex; align-items:center; gap:.55rem; font-size:.8125rem; color:var(--secondary); opacity:.45; transition:opacity .3s, color .3s; }
.cl-step.active{ opacity:1; color:var(--primary); }
.cl-step.done{ opacity:1; color:var(--emerald-600); }
.cl-step .dot{ width:16px; height:16px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
/* skeleton shimmer lines */
.cl-skel{ padding:2.5rem 2.75rem; }
.cl-skel .sk{ height:12px; border-radius:4px; background:linear-gradient(90deg,#eef1f6 25%,#f6f8fb 37%,#eef1f6 63%); background-size:400% 100%; animation:skshimmer 1.4s ease infinite; margin-bottom:.7rem; }
@keyframes skshimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

/* right assist panel for cover letter */
.cl-assist h3{ font-size:1.0625rem; font-weight:700; margin-bottom:1rem; }
.cl-assist .match-card{ margin-bottom:1.25rem; }
/* assist card: content scrolls, regen button sticks to the bottom */
.cover-assist-card{ overflow:hidden; }       /* card itself doesn't scroll */
.cl-assist{ display:flex; flex-direction:column; height:100%; padding:0; }
.cl-assist-scroll{ flex:1; overflow-y:auto; padding:1.75rem 1.75rem 1rem; min-height:0; }
.cl-regen-bar{
  flex-shrink:0;
  padding:1rem 1.75rem;
  border-top:1px solid var(--border);
  background:var(--surface);
}
.cl-tip{ display:flex; gap:.6rem; padding:.8rem; border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:.6rem; font-size:.8125rem; color:var(--secondary); line-height:1.5; }
.cl-tip .cl-tip-ic{ color:var(--indigo-500); flex-shrink:0; }
.cl-regen{
  display:inline-flex; align-items:center; gap:.5rem; width:100%; justify-content:center;
  padding:.7rem 1rem;
  background:var(--indigo-600); color:#fff; border-radius:var(--r-lg);
  font-size:.875rem; font-weight:700; box-shadow:var(--shadow-sm);
  transition:background .2s, transform .12s;
}
.cl-regen:hover{ background:#4338ca; }
.cl-regen:active{ transform:scale(.98); }

/* ===== Job Tracker (Kanban) ===== */
.tracker{
  padding:1.75rem 2.5rem;
  max-width:1400px; margin:0 auto;
  display:flex; flex-direction:column; gap:1.25rem;
  height:100%; min-height:0;
}
.tracker-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-shrink:0; }
.tracker-sub{ font-size:.875rem; color:var(--secondary); }
.tracker-count{
  font-size:.8125rem; color:var(--secondary);
  background:var(--surface); border:1px solid var(--border);
  padding:.4rem .75rem; border-radius:var(--r-full);
}
.tracker-count b{ color:var(--primary); font-weight:700; }
.kanban{
  flex:1; min-height:0;
  display:grid; grid-auto-flow:column; grid-auto-columns:320px;
  gap:.85rem;
  overflow-x:auto;
}
.kb-col{
  display:flex; flex-direction:column; min-height:0;
  background:var(--page);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  transition:background .15s, border-color .15s;
}
.kb-col.drag-over{ background:var(--indigo-50); border-color:var(--indigo-500); }
.kb-col-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.85rem .9rem;
  border-bottom:1px solid var(--border);
}
.kb-col-title{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:700; color:var(--primary); }
.kb-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.kb-count{ font-size:.75rem; font-weight:600; color:var(--secondary); background:var(--surface); padding:.1rem .45rem; border-radius:var(--r-full); border:1px solid var(--border); }
.kb-list{ flex:1; min-height:0; overflow-y:auto; padding:.7rem; display:flex; flex-direction:column; gap:.6rem; }
.kb-card{
  position:relative;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:.9rem 1rem;
  cursor:grab;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .15s, border-color .15s, opacity .15s;
}
.kb-card:hover{ box-shadow:var(--shadow-md); border-color:var(--secondary-2); }
.kb-card:active{ cursor:grabbing; }
.kb-card.dragging{ opacity:.4; }
.kb-card-title{ font-size:16px; font-weight:700; color:var(--primary); line-height:1.3; padding-right:1.75rem; }
.kb-card-co{ font-size:14px; color:var(--secondary); margin-top:.2rem; }

/* ---- Contextual footer (per status) ---- */
.kb-ctx{
  margin-top:.75rem; padding-top:.7rem;
  border-top:1px dashed var(--border);
  display:flex; align-items:center; gap:.5rem;
}
.kb-ctx-stack{ flex-direction:column; align-items:stretch; gap:.25rem; }
.kb-ctx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.5rem .75rem;
  background:var(--surface); color:var(--primary);
  border:1px solid var(--border); border-radius:var(--r-md);
  font-size:.8125rem; font-weight:600; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s, transform .12s;
  width:100%;
}
.kb-ctx-btn:hover{ background:var(--page); }
.kb-ctx-btn:active{ transform:scale(.97); }
.kb-ctx-btn.primary{
  background:var(--primary); color:#fff; border-color:var(--primary);
}
.kb-ctx-btn.primary:hover{ background:var(--primary-90); }
.kb-ctx-btn svg{ flex-shrink:0; }
.kb-ctx-sub{ font-size:.7rem; color:var(--secondary); text-align:center; }
/* Saved → match pill */
.kb-match-pill{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.75rem; font-weight:500;
  padding:.25rem .6rem; border-radius:var(--r-full);
  border:1px solid;
}
.kb-match-pill b{ font-weight:700; }
/* Preparing → AI document buttons row */
.kb-ctx-docs{ flex-wrap:wrap; gap:.4rem; align-items:stretch; }
.kb-doc-btn{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .6rem;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); color:var(--primary);
  font-size:.75rem; font-weight:600; line-height:1;
  cursor:pointer; white-space:nowrap;
  transition:background .15s, box-shadow .15s, border-color .15s, transform .12s;
}
.kb-doc-btn:hover{ background:var(--page); border-color:var(--secondary-2); box-shadow:var(--shadow-sm); }
.kb-doc-btn:active{ transform:scale(.96); }
.kb-doc-btn svg{ width:13px; height:13px; flex-shrink:0; }
.kb-doc-btn .spark{ display:inline-flex; color:var(--indigo-500); }

/* generated → full-width document row with inline Download */
.kb-doc-row{
  display:flex; align-items:center; justify-content:space-between; gap:.4rem;
  width:100%;
  padding:.42rem .5rem;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--page);
}
.kb-doc-open{
  display:inline-flex; align-items:center; gap:.35rem;
  background:none; border:none; padding:0; cursor:pointer;
  font-size:.75rem; font-weight:600; color:var(--primary);
  flex:1 1 auto; min-width:0; text-align:left;
}
.kb-doc-open svg{ width:14px; height:14px; flex-shrink:0; color:var(--emerald-600); }
.kb-doc-open:hover .kb-doc-text{ text-decoration:underline; }
.kb-doc-text{ color:var(--primary); flex:1 1 auto; min-width:0; line-height:1.2; }
.kb-doc-score{ font-weight:700; flex-shrink:0; white-space:nowrap; }
.kb-doc-den{ font-weight:600; opacity:.7; font-size:.85em; }
.kb-doc-dl{
  display:inline-flex; align-items:center; gap:.28rem; flex-shrink:0;
  padding:.28rem .5rem;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface); color:var(--primary);
  font-size:.7rem; font-weight:600; cursor:pointer;
  transition:box-shadow .15s, border-color .15s, transform .12s;
}
.kb-doc-dl:hover{ border-color:var(--secondary-2); box-shadow:var(--shadow-sm); }
.kb-doc-dl:active{ transform:scale(.96); }
.kb-doc-dl svg{ width:12px; height:12px; flex-shrink:0; }
/* Offer → salary range */
.kb-ctx-salary{ flex-direction:column; align-items:flex-start; gap:.25rem; }
.kb-salary-label{ font-size:.7rem; color:var(--secondary); display:inline-flex; align-items:center; gap:.3rem; }
.kb-salary-label svg{ width:12px; height:12px; }
.kb-salary-range{ font-size:1rem; font-weight:800; color:var(--emerald-600); font-family:'Inter Tight',sans-serif; letter-spacing:-.01em; }
.kb-salary-sep{ color:var(--secondary-2); font-weight:500; margin:0 .15rem; }
.kb-salary-per{ font-size:.7rem; font-weight:600; color:var(--secondary); }
/* vertical ellipsis menu trigger */
.kb-more-btn{
  position:absolute; top:.6rem; right:.6rem;
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:var(--r-md);
  color:var(--secondary); cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.kb-more-btn:hover{ background:var(--page); border-color:var(--border); color:var(--primary); }
.kb-more-btn svg{ width:14px; height:14px; }
.kb-menu{
  position:fixed; top:0; left:0;   /* coords set in JS (positionKbMenu); escapes column overflow */
  min-width:200px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:.3rem; z-index:1000;
  opacity:0; transform:translateY(-4px) scale(.97); pointer-events:none;
  transition:opacity .15s var(--ease), transform .15s var(--ease);
  display:flex; flex-direction:column; gap:1px;
}
.kb-menu.open{ opacity:1; transform:none; pointer-events:auto; }
.kb-menu button{
  display:flex; align-items:center; gap:.55rem;
  padding:.55rem .65rem; background:none; border:none; cursor:pointer;
  font-size:.8125rem; color:var(--primary); border-radius:var(--r-md);
  text-align:left; width:100%;
}
.kb-menu button:hover{ background:var(--page); }
.kb-menu button.danger{ color:var(--red-500); }
.kb-menu button.danger:hover{ background:var(--red-50); }
.kb-menu button svg{ flex-shrink:0; color:var(--secondary); }
.kb-menu button.danger svg{ color:var(--red-500); }
.kb-menu .kb-menu-sep{ height:1px; background:var(--border-2); margin:.2rem .3rem; }
.kb-menu-status-trigger{
  position:relative;
  display:flex; align-items:center; gap:.55rem;
  padding:.55rem .65rem; cursor:pointer;
  font-size:.8125rem; color:var(--primary); border-radius:var(--r-md);
}
.kb-menu-status-trigger:hover{ background:var(--page); }
.kb-menu-status-trigger > svg{ flex-shrink:0; color:var(--secondary); }

/* Status submenu — fixed so it escapes the column overflow; JS places it beside the menu */
.kb-submenu{
  position:fixed; top:0; left:0;   /* coords set in JS (positionKbSubmenu) */
  min-width:170px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:.3rem; z-index:1001;
  opacity:0; transform:translateX(-4px) scale(.97); pointer-events:none;
  transition:opacity .15s var(--ease), transform .15s var(--ease);
  display:flex; flex-direction:column; gap:1px;
}
.kb-submenu.open{ opacity:1; transform:none; pointer-events:auto; }
.kb-menu-status-trigger .kb-chev{ margin-left:auto; color:var(--secondary); }
.kb-empty{
  font-size:.75rem; color:var(--secondary-2);
  text-align:center; padding:1.5rem .5rem; line-height:1.5;
}
/* status dot colours (re-using app palette) */
.kb-dot.Saved      { background:var(--emerald-600); }
.kb-dot.Preparing  { background:var(--indigo-500); }
.kb-dot.Applied    { background:var(--amber-600); }
.kb-dot.Interview  { background:var(--purple-500); }
.kb-dot.Offer      { background:#10b981; }
.kb-dot.Rejected   { background:var(--red-500); }
/* tracker page in full-height layout */
@media(min-width:1024px){
  .shell-main[data-page="tracker"] .screen{ overflow:hidden; }
  #pageTracker.page.active{ height:100%; }
  #pageTracker .tracker{ height:100%; }
}
@media(max-width:980px){
  .kanban{ grid-auto-columns:340px; }
}


   TAILORING RESUME — overlay kept for backward compat but hidden
   ============================================================ */
/* Highlight colors — not in token file; matched to wireframe.
   Resolve against real config later. */
:root{
  --hl-warn:#fde9d3;   --hl-warn-bd:#f6c899;   /* summary needs work (amber) */
  --hl-metric:#fdf3c8; --hl-metric-bd:#f2e08a; /* quantified win (yellow) */
  --hl-issue:#fbdcd2;  --hl-issue-bd:#f3b4a2;  /* problematic (red/orange) */
}

.tailor-overlay{
  position:fixed; inset:0;
  background:rgba(17,20,24,.45);
  backdrop-filter:blur(2px);
  z-index:60;
  display:none;
  padding:1.5rem;
  overflow-y:auto;
}
.tailor-overlay.open{ display:block; animation:fadeIn .2s var(--ease-sidebar); }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

.tailor-shell{
  max-width:80rem;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:1.25rem;
  align-items:start;
  animation:sheetUp .3s var(--ease-sidebar);
}
@keyframes sheetUp{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }
@media(max-width:980px){ .tailor-shell{ grid-template-columns:1fr; } }

/* Expanded: analysis panel fills the shell, resume hidden */
.tailor-shell.expanded{ grid-template-columns:1fr; }
.tailor-shell.expanded .resume-side{ display:none; }
.tailor-shell.expanded .breakdown{ grid-template-columns:repeat(6,1fr); }
@media(max-width:760px){ .tailor-shell.expanded .breakdown{ grid-template-columns:repeat(3,1fr); } }

/* expand toggle button (top-right of analysis panel) */
.expand-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .7rem;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface);
  font-size:.8125rem; font-weight:600; color:var(--secondary);
  transition:background .2s,color .2s,transform .12s;
}
.expand-btn:hover{ background:var(--page); color:var(--primary); }
.expand-btn:active{ transform:scale(.95); }

.tailor-panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-2xl);
  box-shadow:var(--shadow-lg);
}

/* close button floating top-right of overlay */
.tailor-close{
  position:sticky; top:0; float:right;
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-full);
  color:var(--secondary);
  box-shadow:var(--shadow-md);
  margin:-.25rem -.25rem .5rem 0;
  transition:color .2s,transform .12s;
  z-index:2;
}
.tailor-close:hover{ color:var(--primary); }
.tailor-close:active{ transform:scale(.92); }

/* ---- LEFT: resume document ---- */
.resume-doc{ padding:2.5rem 2.75rem; font-size:.8125rem; color:var(--primary); }
.resume-name{ text-align:center; font-size:1.5rem; font-weight:800; letter-spacing:.02em; }
.resume-contact{ text-align:center; color:var(--primary); margin-top:.5rem; font-size:.8125rem; }
.resume-rule{ height:1px; background:var(--slate-300); margin:1.1rem 0 1.4rem; }
.resume-h{ font-size:.8125rem; font-weight:800; letter-spacing:.04em; margin:1.5rem 0 .6rem; }
.resume-h:first-of-type{ margin-top:0; }
.resume-section:first-of-type .resume-h{ margin-top:0; }
.resume-row{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.resume-role{ font-weight:600; }
.resume-date{ color:var(--secondary); white-space:nowrap; font-size:.78rem; }
.resume-doc ul{ list-style:none; margin:.35rem 0 .25rem; }
.resume-doc li{ position:relative; padding-left:1rem; margin:.18rem 0; line-height:1.45; background:transparent; }
.resume-doc li::before{ content:""; position:absolute; left:.2rem; top:.55em; width:3px; height:3px; border-radius:50%; background:var(--primary); }
.resume-doc p{ line-height:1.5; }
.resume-block{ margin-bottom:.4rem; }

/* section divider — subdued grey line under each section */
.resume-section{ padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid var(--border); }
.resume-section:last-child{ border-bottom:none; margin-bottom:0; }
/* more breathing room between role groups in Work Experience */
.rz-role-group{ padding:.5rem 0 1rem; }
.rz-role-group + .rz-role-group{ border-top:1px solid var(--border-2); padding-top:1rem; }
.rz-role-group:last-child{ padding-bottom:0; }

/* each bullet row: [grip handle OUTSIDE] [editable box] */
.resume-doc ul{ list-style:none; margin:.5rem 0 .25rem; display:flex; flex-direction:column; gap:6px; }
.resume-doc li{
  display:flex; align-items:flex-start; gap:.4rem;
  line-height:1.45;
  background:transparent; border:none; padding:0; margin:0;
}
.resume-doc li::before{ display:none; }      /* kill old dot/grip pseudo */
/* grip handle — sits outside the box */
.rz-grip{
  flex-shrink:0;
  width:16px; height:24px;
  margin-top:.15em;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='24' viewBox='0 0 24 24' fill='%2394a3b8'><circle cx='9' cy='5' r='1.6'/><circle cx='15' cy='5' r='1.6'/><circle cx='9' cy='12' r='1.6'/><circle cx='15' cy='12' r='1.6'/><circle cx='9' cy='19' r='1.6'/><circle cx='15' cy='19' r='1.6'/></svg>");
  background-repeat:no-repeat; background-position:center;
  cursor:grab; opacity:.4;
  transition:opacity .15s;
}
.resume-doc li:hover .rz-grip{ opacity:.9; }
.rz-grip:active{ cursor:grabbing; }
/* the editable box */
.rz-box{
  flex:1;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:4px 8px;
  cursor:text;
  outline:none;
  transition:background .2s, border-color .2s, box-shadow .2s;
}
.rz-box:hover{ border-color:var(--slate-300); }
.rz-box:focus{ border-color:var(--indigo-500); box-shadow:0 0 0 2px var(--indigo-50); background:var(--surface); }
/* drag states */
.resume-doc li.dragging{ opacity:.4; }
.resume-doc li.drop-above .rz-box{ box-shadow:0 -2px 0 var(--indigo-500); }
.resume-doc li.drop-below .rz-box{ box-shadow:0 2px 0 var(--indigo-500); }

/* highlight — flagged boxes carry severity stroke color */
.hl{
  display:block;
  text-decoration:none;
  transition:background .2s, border-color .2s, box-shadow .2s;
}
/* span-level highlights (summary, skills, certs) become editable boxes too */
.resume-block > .hl{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:.6rem .8rem;
  cursor:text; outline:none;
}
.resume-block > .hl:focus{ border-color:var(--indigo-500); box-shadow:0 0 0 2px var(--indigo-50); }
/* severity colors apply to the box (li uses .rz-box, span uses .hl itself) */
.hl.critical .rz-box, .resume-block > .hl.critical{ border-color:#e8a8a0; }
.hl.high .rz-box,     .resume-block > .hl.high{ border-color:#edc59a; }
.resume-doc li.hl.critical .rz-box{ border-color:#e8a8a0; }
.resume-doc li.hl.high .rz-box{ border-color:#edc59a; }
/* focused state on a severity box → ring matches its severity, not indigo */
.resume-doc li.hl.critical .rz-box:focus,
.resume-block > .hl.critical:focus{ border-color:#dc2626; box-shadow:0 0 0 2px rgba(220,38,38,.15); }
.resume-doc li.hl.high .rz-box:focus,
.resume-block > .hl.high:focus{ border-color:#ea8a3c; box-shadow:0 0 0 2px rgba(234,138,60,.18); }
.hl.good{ }

/* a resume line after Fix All — subtle green confirmation */
.rz-fixed .rz-box,
.resume-block > .hl.rz-fixed{
  border-color:#abe0b8 !important;
  background:#f3fbf5 !important;
  box-shadow:none !important;
  transition:background .4s, border-color .4s;
}
.rz-fixed .rz-box:focus,
.resume-block > .hl.rz-fixed:focus{
  border-color:var(--emerald-600) !important;
  box-shadow:0 0 0 2px rgba(5,150,105,.15) !important;
}

/* per-issue resolved state after Fix All */
.issue.resolved{
  background:linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border-color:#bbf7d0;
  animation:pageIn .3s var(--ease) both;
}
.issue.resolved .issue-num.done{
  background:var(--emerald-600); color:#fff;
}
.issue.resolved .issue-title{ color:var(--primary); }
.issue-fixed{ margin-top:.6rem; }
.issue-fixed .if-label{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.7rem; font-weight:700; letter-spacing:.02em;
  color:var(--emerald-600); text-transform:uppercase;
  margin-bottom:.3rem;
}
.issue-fixed .if-label svg{ width:12px; height:12px; }
.issue-fixed p{
  font-size:.8125rem; color:var(--primary); line-height:1.5; margin:0;
}
/* affected score chips on a resolved card */
.if-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
.if-chip{
  font-size:.7rem; font-weight:600; color:var(--secondary);
  background:rgba(255,255,255,.7); border:1px solid #bbf7d0;
  padding:.15rem .5rem; border-radius:var(--r-full);
}
.if-chip b{ color:var(--emerald-600); }
/* brief pop when a metric gauge is bumped */
.metric-bumped{ animation:metricPop .8s var(--ease); }
@keyframes metricPop{ 0%{ transform:scale(1); } 30%{ transform:scale(1.06); } 100%{ transform:scale(1); } }

/* focus box when the matching issue card is selected — intensifies the wrapper */
.hl.rz-active{ z-index:5; }
.resume-doc li.hl.rz-active.critical .rz-box,
.resume-block > .hl.rz-active.critical{ background:#fdf4f3; border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }
.resume-doc li.hl.rz-active.high .rz-box,
.resume-block > .hl.rz-active.high{ background:#fdf8f2; border-color:#ea8a3c; box-shadow:0 0 0 1px #ea8a3c; }

/* issue card shows it's clickable / linked */
.issue[data-ref]{ cursor:pointer; transition:border-color .2s, box-shadow .2s; }
.issue[data-ref]:hover{ border-color:var(--slate-300); box-shadow:var(--shadow-sm); }
.issue[data-ref].selected{
  background:linear-gradient(135deg, #f5f3ff 0%, #eef2ff 100%);
  border-color:#ddd6fe;
  box-shadow:0 0 0 1px #ddd6fe;
}

/* ---- RIGHT: analysis panel ---- */
.analysis{ padding:0 1.75rem 1.75rem; }
/* sticky section headers — pin to top of the scrolling panel */
.analysis-h{
  font-size:1.0625rem; font-weight:700; letter-spacing:-0.01em;
  margin:0 -1.75rem 1rem;
  padding:1.1rem 1.75rem .8rem;
  position:sticky; top:0; z-index:10;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.analysis-h.mt{ margin-top:1.25rem; }
/* the first header sits in a flex titlebar with the Expand button */
.analysis-titlebar{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin:0 -1.75rem 1rem;
  padding:1.1rem 1.75rem .8rem;
  position:sticky; top:0; z-index:10;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.analysis-titlebar .analysis-h{
  margin:0; padding:0; position:static; border:none; background:none;
}

/* job matching mini card */
.match-card{
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:1.1rem 1.25rem;
}
.match-card .job-head{ margin-top:0; }
.match-card .company-logo{ width:48px; height:48px; }
.match-card .job-meta{ margin-top:.9rem; font-size:.8125rem; }

/* score hero */
.score-hero{
  display:flex; align-items:center; gap:1.25rem;
  background:var(--page);
  border-radius:var(--r-xl);
  padding:1.25rem 1.4rem;
}
.gauge{ position:relative; flex-shrink:0; }
.gauge svg{ transform:rotate(-90deg); }
.gauge .gauge-val{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:800; line-height:1;
}
.gauge .gauge-num{ font-size:1.25rem; color:var(--primary); }
.gauge .gauge-den{ font-size:.625rem; color:var(--secondary); font-weight:600; margin-top:1px; }
.score-hero .verdict{ font-size:1.0625rem; font-weight:700; }
.score-hero p{ color:var(--secondary); font-size:.8125rem; margin-top:.25rem; }

/* breakdown grid */
.breakdown-label{ font-size:.875rem; font-weight:600; margin:1.1rem 0 .75rem; }
.breakdown{ display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
@media(max-width:520px){ .breakdown{ grid-template-columns:repeat(2,1fr); } }
.metric{
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:.9rem .5rem 1rem;
  text-align:center;
}
.metric .gauge{ margin:0 auto .6rem; }
.metric .gauge-num{ font-size:1rem; }
.metric .m-title{ font-size:.8125rem; font-weight:700; }
.metric .m-sub{ font-size:.75rem; color:var(--secondary); margin-top:.1rem; }

/* issues accordion */
.issues{ display:flex; flex-direction:column; gap:.85rem; margin-top:.25rem; }
.issue{
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:1rem 1.1rem;
}
.issue-head{ display:flex; align-items:center; gap:.6rem; }
.issue-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; flex-shrink:0;
  border-radius:var(--r-full);
  background:var(--primary); color:#fff;
  font-size:.7rem; font-weight:700;
}
.issue-num.muted{ background:var(--slate-300); }
/* number badge color reflects severity */
.issue.sev-critical .issue-num{ background:#dc2626; }
.issue.sev-high .issue-num{ background:#ea8a3c; }
.issue.matched .issue-num{ background:var(--emerald-600); }
/* bullet points reflect severity too */
.issue.sev-critical li::before{ background:#dc2626; }
.issue.sev-high li::before{ background:#ea8a3c; }
.issue-title{ font-size:.9rem; font-weight:700; flex:1; }
.sev{
  font-size:.7rem; font-weight:600;
  padding:.1rem .5rem; border-radius:var(--r-md);
  border:1px solid var(--border); color:var(--secondary);
}
.sev.critical{ background:var(--red-50); color:var(--red-700); border-color:var(--red-200); }
.sev.high{ background:#fff4e8; color:#c2620f; border-color:#f7d4ad; }
.issue ul{ list-style:none; margin:.75rem 0 0; }
.issue li{
  position:relative; padding:.55rem 0 .55rem 1rem;
  font-size:.8125rem; color:var(--secondary);
  border-top:1px solid var(--border);
}
.issue li:first-child{ border-top:none; }
.issue li::before{ content:""; position:absolute; left:.15rem; top:.95em; width:3px; height:3px; border-radius:50%; background:var(--secondary); }
.issue.matched li::before{ background:var(--emerald-600); }
.issue-action{ display:flex; align-items:center; gap:.75rem; margin-top:.9rem; }
.btn-ai{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .8rem;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface);
  font-size:.8125rem; font-weight:600;
  transition:background .2s,box-shadow .2s,transform .12s;
}
.btn-ai:hover{ box-shadow:var(--shadow-sm); }
.btn-ai:active{ transform:scale(.96); }
.btn-ai .spark{ color:var(--indigo-500); }
/* when the card is focused, its action matches the One-click optimise button */
.issue.selected .issue-action{
  display:flex; align-items:center; gap:.75rem;
  margin-top:.9rem;
}
.issue.selected .btn-ai{
  background:var(--indigo-600); color:#fff; border-color:var(--indigo-600);
  box-shadow:var(--shadow-sm);
}
.issue.selected .btn-ai:hover{ background:#4338ca; }
.issue.selected .btn-ai .spark{ color:#fff; }
.issue.selected .credit{ color:var(--secondary); }
.credit{ font-size:.75rem; color:var(--secondary); }

/* One-click optimise panel — global Fix All */
.fixall{
  background:linear-gradient(135deg, #f5f3ff 0%, #eef2ff 100%);
  border:1px solid #ddd6fe;
  border-radius:var(--r-xl);
  padding:1.1rem 1.25rem 1.25rem;
  margin-bottom:1rem;
}
.fixall h4{
  font-size:.95rem; font-weight:700; color:var(--primary);
  display:flex; align-items:center; gap:.4rem;
  margin-bottom:.4rem;
}
.fixall h4::first-letter{ color:var(--indigo-600); }
.fixall p{
  font-size:.8125rem; color:var(--secondary); line-height:1.5;
  margin-bottom:.9rem;
}
.fixall-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  width:100%; justify-content:center;
  padding:.7rem 1rem;
  background:var(--indigo-600); color:#fff;
  border-radius:var(--r-lg);
  font-size:.875rem; font-weight:700;
  box-shadow:var(--shadow-sm);
  transition:background .2s, transform .12s;
}
.fixall-btn:hover{ background:#4338ca; }
.fixall-btn:active{ transform:scale(.98); }
.fixall-btn .cr{
  font-size:.7rem; font-weight:600;
  background:rgba(255,255,255,.2); color:#fff;
  padding:.1rem .45rem; border-radius:var(--r-md);
}

/* footer buttons */
.tailor-foot{ padding:0 .25rem 1.75rem; margin-top:1.5rem; }
.btn-save-resume{
  width:100%;
  padding:.85rem; margin-bottom:.6rem;
  background:var(--primary); color:#fff;
  border-radius:var(--r-xl);
  font-size:.9rem; font-weight:700;
  box-shadow:var(--shadow-sm);
  transition:background .2s,transform .12s;
}
.btn-save-resume:hover{ background:var(--primary-90); }
.btn-save-resume:active{ transform:scale(.99); }
.btn-cancel{
  width:100%;
  padding:.8rem;
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  background:var(--surface);
  font-size:.9rem; font-weight:600;
  transition:background .2s;
}
.btn-cancel:hover{ background:var(--page); }

/* App modal (Profile / Preferences) */
.app-modal{
  position:fixed; inset:0; z-index:100;
  display:none; align-items:center; justify-content:center;
  background:rgba(15,23,42,.45); padding:1.5rem;
}
.app-modal.open{ display:flex; animation:modalFade .2s var(--ease); }
@keyframes modalFade{ from{opacity:0;} to{opacity:1;} }
.app-modal-card{
  width:100%; max-width:380px;
  background:var(--surface); border-radius:var(--r-2xl);
  box-shadow:var(--shadow-lg); overflow:hidden;
  animation:modalPop .2s var(--ease);
}
@keyframes modalPop{ from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;} }
.app-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.25rem; border-bottom:1px solid var(--border);
}
.app-modal-head h3{ font-size:1rem; font-weight:700; }
.app-modal-close{
  width:28px; height:28px; border:none; background:var(--page); border-radius:var(--r-md);
  color:var(--secondary); cursor:pointer; font-size:.8rem;
}
.app-modal-close:hover{ background:var(--border); color:var(--primary); }
.app-modal-body{ padding:1.25rem; }
.pm-note{ font-size:.8125rem; color:var(--secondary); line-height:1.5; margin-bottom:1rem; }
.pm-profile{ display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.pm-avatar{
  width:48px; height:48px; border-radius:var(--r-lg);
  background:var(--indigo-600); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:700;
}
.pm-name{ font-size:1rem; font-weight:700; color:var(--primary); }
.pm-role{ font-size:.85rem; color:var(--secondary); }
.pm-rows{ display:grid; gap:.1rem; }
.pm-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.65rem 0; border-bottom:1px solid var(--border-2); font-size:.875rem;
}
.pm-row:last-child{ border-bottom:none; }
.pm-k{ color:var(--secondary); }
.pm-v{ color:var(--primary); font-weight:600; text-align:right; }

/* ============================================================
   JOB DETAIL MODAL — two columns (detail + tracker journey)
   ============================================================ */
.jd-modal{
  position:fixed; inset:0; z-index:1200;
  display:none; align-items:center; justify-content:center;
  background:rgba(15,23,42,.5); padding:1.5rem;
}
.jd-modal.open{ display:flex; animation:modalFade .2s var(--ease); }
.jd-card{
  width:100%; max-width:940px; max-height:88vh;
  background:var(--surface); border-radius:var(--r-2xl);
  box-shadow:var(--shadow-lg); overflow:hidden;
  display:flex; flex-direction:column;
  animation:modalPop .22s var(--ease);
}
.jd-head{
  flex-shrink:0; display:flex; align-items:flex-start; gap:.9rem;
  padding:1.1rem 1.25rem; border-bottom:1px solid var(--border);
}
.jd-logo{
  width:46px; height:46px; flex-shrink:0; border-radius:var(--r-lg);
  background:var(--page); border:1px solid var(--border);
  display:grid; place-items:center; color:var(--primary);
}
.jd-logo svg{ width:24px; height:24px; }
.jd-head-main{ flex:1; min-width:0; }
.jd-title{ font-size:1.15rem; font-weight:700; color:var(--primary); line-height:1.25; }
.jd-sub{ font-size:.85rem; color:var(--secondary); margin-top:.25rem; display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .7rem; }
.jd-sub-i{ display:inline-flex; align-items:center; gap:.3rem; }
.jd-sub-i svg{ width:14px; height:14px; }
.jd-head-actions{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
.jd-match{ font-size:.78rem; font-weight:700; padding:.32rem .65rem; border-radius:var(--r-full); white-space:nowrap; }
.jd-close{
  width:30px; height:30px; flex-shrink:0; border:none; background:var(--page);
  border-radius:var(--r-md); color:var(--secondary); cursor:pointer; font-size:.85rem;
  display:grid; place-items:center;
}
.jd-close:hover{ background:var(--border); color:var(--primary); }
/* columns */
.jd-cols{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
.jd-main{ overflow-y:auto; padding:1.25rem 1.4rem; }
.jd-side{ overflow-y:auto; padding:1.25rem; background:var(--page); border-left:1px solid var(--border); }
/* meta cards */
.jd-meta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:1.35rem; }
.jd-meta{ display:flex; align-items:center; gap:.55rem; padding:.55rem .7rem; background:var(--page); border:1px solid var(--border); border-radius:var(--r-lg); }
.jd-meta-ic{ width:30px; height:30px; flex-shrink:0; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--border); display:grid; place-items:center; color:var(--secondary); }
.jd-meta-ic svg{ width:15px; height:15px; }
.jd-meta-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.jd-meta-k{ font-size:.66rem; color:var(--secondary); text-transform:uppercase; letter-spacing:.03em; font-weight:600; }
.jd-meta-v{ font-size:.82rem; color:var(--primary); font-weight:600; }
/* ============================================================
   INTERVIEW PREPARATION — multi-step flow
   ============================================================ */
.iv-body{ max-width:880px; margin:0 auto; padding:.5rem 0 3rem; }
.iv-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.iv-back{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .85rem; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); color:var(--secondary); font-size:.85rem; font-weight:600; cursor:pointer; transition:background .15s,color .15s,transform .12s; }
.iv-back:hover{ background:var(--page); color:var(--primary); }
.iv-back:active{ transform:scale(.97); }
.iv-back svg{ width:15px; height:15px; }
.iv-jobchip{ display:inline-flex; align-items:center; gap:.55rem; padding:.4rem .7rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); font-size:.85rem; }
.iv-jobchip .lg{ width:24px; height:24px; border-radius:var(--r-md); background:var(--page); border:1px solid var(--border); display:grid; place-items:center; color:var(--primary); }
.iv-jobchip .lg svg{ width:14px; height:14px; }
.iv-jobchip b{ color:var(--primary); font-weight:700; }
.iv-jobchip span{ color:var(--secondary); }
.iv-prog{ display:flex; align-items:center; gap:.4rem; }
.iv-prog .pdot{ width:8px; height:8px; border-radius:50%; background:var(--border); transition:background .2s, width .2s; }
.iv-prog .pdot.on{ background:var(--indigo-500); }
.iv-prog .pdot.cur{ width:22px; border-radius:var(--r-full); background:var(--indigo-500); }
.iv-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl); box-shadow:var(--shadow-sm); padding:1.75rem; }
.iv-hl{ font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--indigo-500); margin-bottom:.5rem; }
.iv-title{ font-size:1.4rem; font-weight:700; color:var(--primary); line-height:1.25; margin-bottom:.4rem; }
.iv-lead{ font-size:.9rem; color:var(--secondary); line-height:1.6; margin-bottom:1.4rem; }
.iv-group{ margin-bottom:1.4rem; }
.iv-glabel{ font-size:.85rem; font-weight:700; color:var(--primary); margin-bottom:.6rem; }
.iv-opts{ display:grid; gap:.6rem; }
.iv-opts.cols2{ grid-template-columns:1fr 1fr; }
.iv-opt{ display:flex; align-items:flex-start; gap:.7rem; text-align:left; padding:.85rem .95rem; border:1.5px solid var(--border); border-radius:var(--r-xl); background:var(--surface); cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s; }
.iv-opt:hover{ border-color:var(--secondary-2); }
.iv-opt.sel{ border-color:var(--indigo-500); background:var(--indigo-50); box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.iv-opt .ck{ width:18px; height:18px; flex-shrink:0; border-radius:50%; border:2px solid var(--border); margin-top:1px; display:grid; place-items:center; color:#fff; }
.iv-opt.sel .ck{ background:var(--indigo-500); border-color:var(--indigo-500); }
.iv-opt .ck svg{ width:11px; height:11px; opacity:0; }
.iv-opt.sel .ck svg{ opacity:1; }
.iv-opt-t{ display:block; font-size:.88rem; font-weight:600; color:var(--primary); }
.iv-opt-d{ font-size:.78rem; color:var(--secondary); margin-top:.15rem; line-height:1.45; }
.iv-badge{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--indigo-600); background:var(--indigo-50); border-radius:var(--r-full); padding:.15rem .45rem; margin-left:.4rem; }
.iv-actions{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:1.6rem; }
.iv-actions.end{ justify-content:flex-end; }
.iv-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.7rem 1.2rem; border-radius:var(--r-lg); font-size:.88rem; font-weight:600; border:1px solid var(--border); background:var(--surface); color:var(--primary); cursor:pointer; transition:background .15s, box-shadow .15s, border-color .15s, transform .12s; }
.iv-btn svg{ width:15px; height:15px; }
.iv-btn:hover{ background:var(--page); border-color:var(--secondary-2); }
.iv-btn:active{ transform:scale(.97); }
.iv-btn.primary{ background:var(--primary); border-color:var(--primary); color:#fff; }
.iv-btn.primary:hover{ background:#2c2740; box-shadow:var(--shadow-md); }
.iv-btn.ghost{ border-color:transparent; background:transparent; color:var(--secondary); }
.iv-btn.ghost:hover{ background:var(--page); color:var(--primary); }
.iv-btn:disabled{ opacity:.5; cursor:not-allowed; }
.iv-review-grid{ display:grid; gap:.75rem; }
.iv-rrow{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1rem; border:1px solid var(--border); border-radius:var(--r-xl); background:var(--page); }
.iv-rrow-l{ display:flex; align-items:center; gap:.7rem; min-width:0; }
.iv-rrow-ic{ width:34px; height:34px; flex-shrink:0; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); display:grid; place-items:center; color:var(--indigo-500); }
.iv-rrow-ic svg{ width:16px; height:16px; }
.iv-rrow-k{ font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--secondary); font-weight:600; }
.iv-rrow-v{ font-size:.88rem; color:var(--primary); font-weight:600; }
.iv-link{ background:none; border:none; color:var(--indigo-600); font-size:.82rem; font-weight:600; cursor:pointer; padding:.3rem .4rem; border-radius:var(--r-md); }
.iv-link:hover{ background:var(--indigo-50); }
.iv-gen{ text-align:center; padding:3.5rem 1.5rem; }
.iv-spinner{ width:54px; height:54px; margin:0 auto 1.4rem; border-radius:50%; border:4px solid var(--indigo-50); border-top-color:var(--indigo-500); animation:ivspin .8s linear infinite; }
@keyframes ivspin{ to{ transform:rotate(360deg); } }
.iv-gen-title{ font-size:1.15rem; font-weight:700; color:var(--primary); margin-bottom:.4rem; }
.iv-gen-sub{ font-size:.88rem; color:var(--secondary); }
.iv-gen-steps{ max-width:340px; margin:1.6rem auto 0; display:flex; flex-direction:column; gap:.6rem; text-align:left; }
.iv-gen-step{ display:flex; align-items:center; gap:.6rem; font-size:.83rem; color:var(--secondary-2); transition:color .3s; }
.iv-gen-step .gck{ width:18px; height:18px; border-radius:50%; border:2px solid var(--border); display:grid; place-items:center; flex-shrink:0; }
.iv-gen-step.done{ color:var(--primary); }
.iv-gen-step.done .gck{ background:var(--emerald-600); border-color:var(--emerald-600); color:#fff; }
.iv-gen-step.done .gck svg{ width:10px; height:10px; }
.iv-qmeta{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.iv-qcount{ font-size:.8rem; font-weight:700; color:var(--secondary); }
.iv-qtype{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--purple-600); background:var(--purple-50); border-radius:var(--r-full); padding:.2rem .55rem; }
.iv-qbar{ height:6px; border-radius:var(--r-full); background:var(--border); overflow:hidden; margin-bottom:1.4rem; }
.iv-qbar i{ display:block; height:100%; background:var(--indigo-500); border-radius:var(--r-full); transition:width .35s var(--ease); }
.iv-question{ font-size:1.2rem; font-weight:700; color:var(--primary); line-height:1.4; margin-bottom:1.2rem; }
.iv-hint{ display:flex; gap:.6rem; padding:.85rem 1rem; background:var(--amber-50); border:1px solid #fde68a; border-radius:var(--r-xl); margin-bottom:1.2rem; animation:pageIn .2s var(--ease); }
.iv-hint svg{ width:16px; height:16px; color:var(--amber-600); flex-shrink:0; margin-top:1px; }
.iv-hint-t{ font-size:.82rem; line-height:1.55; color:#92660c; }
.iv-hint-t b{ color:#7a5409; }
.iv-answer{ width:100%; min-height:150px; resize:vertical; padding:.9rem 1rem; border:1.5px solid var(--border); border-radius:var(--r-xl); font:inherit; font-size:.9rem; line-height:1.6; color:var(--primary); background:var(--surface); transition:border-color .15s, box-shadow .15s; }
.iv-answer:focus{ outline:none; border-color:var(--indigo-500); box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.iv-answer::placeholder{ color:var(--secondary-2); }
.iv-answer-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:.5rem; }
.iv-wordcount{ font-size:.75rem; color:var(--secondary-2); }
.iv-readiness{ display:flex; align-items:center; gap:.85rem; padding:1rem 1.15rem; border-radius:var(--r-xl); margin-bottom:1.4rem; }
.iv-readiness .rdot{ width:42px; height:42px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; color:#fff; }
.iv-readiness .rdot svg{ width:20px; height:20px; }
.iv-readiness-t{ font-size:1.02rem; font-weight:700; }
.iv-readiness-s{ font-size:.82rem; margin-top:.1rem; opacity:.85; }
.iv-fb-section{ margin-bottom:1.2rem; }
.iv-fb-h{ display:flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:700; color:var(--primary); margin-bottom:.55rem; }
.iv-fb-h svg{ width:15px; height:15px; }
.iv-fb-list{ list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.iv-fb-list li{ position:relative; padding-left:1.4rem; font-size:.85rem; line-height:1.5; color:var(--secondary); }
.iv-fb-list li svg{ position:absolute; left:0; top:.18em; width:14px; height:14px; flex-shrink:0; }
.iv-fb-list.good li svg{ color:var(--emerald-600); }
.iv-fb-list.improve li svg{ color:var(--amber-600); }
.iv-your-answer{ font-size:.83rem; line-height:1.6; color:var(--secondary); background:var(--page); border:1px solid var(--border); border-radius:var(--r-xl); padding:.85rem 1rem; font-style:italic; }
.iv-sum-hero{ text-align:center; padding:1.5rem 0 .5rem; }
.iv-sum-emoji{ width:64px; height:64px; margin:0 auto 1rem; border-radius:50%; display:grid; place-items:center; color:#fff; }
.iv-sum-emoji svg{ width:30px; height:30px; }
.iv-sum-title{ font-size:1.5rem; font-weight:700; color:var(--primary); margin-bottom:.4rem; }
.iv-sum-sub{ font-size:.9rem; color:var(--secondary); line-height:1.6; max-width:480px; margin:0 auto; }
.iv-sum-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin:1.8rem 0; }
.iv-stat{ text-align:center; padding:1.1rem .75rem; border:1px solid var(--border); border-radius:var(--r-xl); background:var(--page); }
.iv-stat-v{ font-size:1.5rem; font-weight:700; color:var(--primary); }
.iv-stat-k{ font-size:.74rem; color:var(--secondary); margin-top:.2rem; }
.iv-sum-readiness{ display:flex; align-items:center; gap:.85rem; padding:1.1rem 1.25rem; border-radius:var(--r-xl); margin-bottom:1.5rem; }
.iv-sum-list{ list-style:none; display:flex; flex-direction:column; gap:.6rem; margin-top:.6rem; }
.iv-sum-list li{ position:relative; padding-left:1.5rem; font-size:.86rem; line-height:1.55; color:var(--secondary); }
.iv-sum-list li svg{ position:absolute; left:0; top:.15em; width:15px; height:15px; color:var(--amber-600); }
.iv-sum-actions{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:1.5rem; }
.iv-sum-actions .full{ grid-column:1 / -1; }
.iv-fbq-divider{ height:1px; background:var(--border); margin:1.6rem 0 1.4rem; }
.iv-fbq-list{ display:flex; flex-direction:column; gap:1rem; }
.iv-fbq{ border:1px solid var(--border); border-radius:var(--r-xl); padding:1.1rem 1.15rem; background:var(--surface); }
.iv-fbq-head{ display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem; }
.iv-fbq-n{ font-size:.75rem; font-weight:700; color:#fff; background:var(--primary); border-radius:var(--r-md); padding:.18rem .45rem; }
.iv-fbq-r{ margin-left:auto; font-size:.72rem; font-weight:700; padding:.22rem .6rem; border-radius:var(--r-full); }
.iv-fbq-q{ font-size:.92rem; font-weight:700; color:var(--primary); line-height:1.45; margin-bottom:.7rem; }
.iv-fbq-cols{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.5rem; margin-top:.9rem; }
/* mode selection */
.iv-modes{ display:flex; flex-direction:column; gap:.7rem; margin-bottom:.4rem; }
.iv-mode{ display:flex; align-items:center; gap:1rem; text-align:left; width:100%; padding:1rem 1.1rem; border:1.5px solid var(--border); border-radius:var(--r-xl); background:var(--surface); cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .12s; }
.iv-mode:hover{ border-color:var(--indigo-500); box-shadow:var(--shadow-md); }
.iv-mode:active{ transform:scale(.99); }
.iv-mode-ic{ width:54px; height:54px; flex-shrink:0; border-radius:var(--r-lg); background:var(--indigo-50); color:var(--indigo-600); display:grid; place-items:center; overflow:hidden; }
.iv-mode-ic svg{ width:26px; height:26px; }
.iv-mode-ic svg[viewBox="0 0 96 96"]{ width:54px; height:54px; }
.iv-mode-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.2rem; }
.iv-mode-t{ font-size:.95rem; font-weight:700; color:var(--primary); }
.iv-mode-d{ font-size:.82rem; color:var(--secondary); line-height:1.5; }
.iv-mode-meta{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--secondary-2); margin-top:.15rem; }
.iv-mode-go{ flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--page); color:var(--secondary); display:grid; place-items:center; transition:background .15s,color .15s; }
.iv-mode-go svg{ width:16px; height:16px; }
.iv-mode:hover .iv-mode-go{ background:var(--primary); color:#fff; }
/* live session */
.iv-live-head{ display:flex; align-items:center; gap:.5rem; margin-bottom:1.2rem; }
.iv-live-dot{ width:9px; height:9px; border-radius:50%; background:var(--red-500); animation:ivpulse 1.4s ease-in-out infinite; }
@keyframes ivpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.iv-live-label{ font-size:.8rem; font-weight:700; color:var(--primary); }
.iv-live-timer{ margin-left:auto; font-size:.85rem; font-weight:700; color:var(--secondary); font-variant-numeric:tabular-nums; background:var(--page); border:1px solid var(--border); border-radius:var(--r-md); padding:.25rem .6rem; }
.iv-stage{ display:grid; place-items:center; padding:1.5rem 0 .5rem; }
.iv-stage.avatar svg{ width:120px; height:120px; border-radius:24px; box-shadow:var(--shadow-md); }
.iv-stage.avatar.speaking svg{ animation:ivbob 2.4s ease-in-out infinite; }
@keyframes ivbob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
.iv-orb{ display:flex; align-items:flex-end; gap:5px; height:48px; }
.iv-orb span{ width:7px; height:14px; border-radius:var(--r-full); background:var(--indigo-500); }
.iv-stage.orb.speaking .iv-orb span{ animation:ivbars 1s ease-in-out infinite; }
.iv-orb span:nth-child(2){ animation-delay:.15s; } .iv-orb span:nth-child(3){ animation-delay:.3s; } .iv-orb span:nth-child(4){ animation-delay:.45s; } .iv-orb span:nth-child(5){ animation-delay:.6s; }
@keyframes ivbars{ 0%,100%{ height:14px; } 50%{ height:40px; } }
.iv-live-who{ text-align:center; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--indigo-500); margin-bottom:.5rem; }
.iv-live-state{ text-align:center; font-size:.85rem; color:var(--secondary); background:var(--page); border:1px solid var(--border); border-radius:var(--r-xl); padding:.7rem 1rem; margin-bottom:1.2rem; }
.iv-live-foot{ text-align:center; font-size:.74rem; color:var(--secondary-2); margin-top:.9rem; }

/* ============================================================
   INTERVIEW PREPARATION — front-door flow (ip-*)
   History → Job Scenario → Paste Link → Summary → Select Resume
   Reuses iv-* / jd-* components; tokens shared with the system.
   ============================================================ */
.ip-wrap{ max-width:760px; margin:0 auto; padding:80px 0 3rem; }
.ip-wrap.wide{ max-width:980px; }
.ip-wrap.narrow{ max-width:560px; padding-top:80px; }
/* Fill the screen height and centre content vertically, keeping ~80px top/bottom breathing room */
#pageInterview.page.active:has(.ip-fill){ height:100%; }
#pageInterview .iv-body:has(.ip-fill){ min-height:100%; display:flex; flex-direction:column; box-sizing:border-box; padding-bottom:0; }
.ip-wrap.ip-fill{ padding-top:80px; padding-bottom:80px; display:flex; flex-direction:column; flex:1; min-height:0; }

/* numbered stepper */
.ip-steps{ display:flex; align-items:center; justify-content:center; gap:.5rem; margin:0 auto 1.9rem; flex-wrap:wrap; }
.ip-step{ display:flex; align-items:center; gap:.55rem; }
.ip-step .n{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:.78rem; font-weight:700; background:var(--border); color:var(--secondary); flex:none; transition:background .2s,color .2s; }
.ip-step .n svg{ width:13px; height:13px; }
.ip-step .t{ font-size:.85rem; font-weight:600; color:var(--secondary-2); white-space:nowrap; transition:color .2s; }
.ip-step.active .n{ background:var(--primary); color:#fff; }
.ip-step.active .t{ color:var(--primary); }
.ip-step.done .n{ background:var(--secondary); color:#fff; }
.ip-step.done .t{ color:var(--secondary); }
.ip-line{ width:48px; height:1.5px; background:var(--border); flex:none; }

/* onboarding-style pill stepper */
.ob-stepper{ display:flex; align-items:center; justify-content:center; gap:.4rem; margin:0 auto 1.9rem; flex-wrap:nowrap; max-width:100%; }
.ob-st{ display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .9rem .45rem .45rem; border-radius:var(--r-full); background:var(--border-2); border:2px solid transparent; font-size:.9rem; font-weight:600; color:var(--secondary-2); white-space:nowrap; transition:background .2s, color .2s, border-color .2s; }
.ob-stn{ width:27px; height:27px; flex:none; border-radius:var(--r-full); display:grid; place-items:center; font-size:.82rem; font-weight:700; background:var(--surface); color:var(--secondary-2); box-shadow:inset 0 0 0 1px var(--border); transition:background .2s, color .2s, box-shadow .2s; }
.ob-stn svg{ width:15px; height:15px; }
.ob-st.active{ background:var(--surface); border-color:var(--primary); color:var(--primary); }
.ob-st.active .ob-stn{ background:var(--primary); color:#fff; box-shadow:none; }
.ob-st.done{ background:var(--border-2); color:var(--secondary); }
.ob-st.done .ob-stn{ background:var(--secondary); color:#fff; box-shadow:none; }
.ob-sep{ width:20px; height:2px; border-radius:2px; background:var(--border); flex:none; }
/* split 'Job Summary' card: fixed header bar + separate scrolling body */
.ip-sum-card{ display:flex; flex-direction:column; padding:0; overflow:hidden; }
.ip-sum-header{ flex:none; padding:16px; background:var(--surface); border-bottom:1px solid var(--border); border-radius:var(--r-2xl) var(--r-2xl) 0 0; font-size:1.05rem; font-weight:700; color:var(--primary); }
.ip-sum-body{ padding:16px; }

/* shared headings */
.ip-h1{ font-size:1.7rem; font-weight:700; color:var(--primary); line-height:1.2; margin-bottom:.5rem; letter-spacing:-.01em; }
.ip-sub{ font-size:.92rem; color:var(--secondary); line-height:1.6; margin-bottom:1.6rem; max-width:560px; }
.ip-label{ display:block; font-size:.82rem; font-weight:700; color:var(--primary); margin-bottom:.55rem; }

/* history */
.ip-hist-card{ background:none; border:none; box-shadow:none; padding:0; display:flex; flex-direction:column; flex:1; min-height:0; }
.ip-hist-card > .ip-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ip-hist-head{ position:sticky; top:0; z-index:20; flex:none; width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:16px 24px; margin-bottom:0; background:var(--page); border-bottom:1px solid var(--border); }
.ip-hist-head + .ip-wrap.ip-fill{ padding-top:1.75rem; }
#pageInterview .iv-body:has(> .ip-hist-head){ max-width:none; padding-left:0; padding-right:0; }
.ip-hist-head h2{ font-size:1.15rem; font-weight:700; color:var(--primary); }
.ip-sort{ position:relative; display:flex; align-items:center; gap:.65rem; }
.ip-sort > .lbl{ font-size:.82rem; color:var(--secondary); font-weight:600; }
.ip-sort-btn{ display:inline-flex; align-items:center; justify-content:space-between; gap:.7rem; min-width:170px; padding:.55rem .85rem; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); font:inherit; font-size:.85rem; font-weight:600; color:var(--primary); cursor:pointer; transition:border-color .15s; }
.ip-sort-btn:hover{ border-color:var(--secondary-2); }
.ip-sort-btn svg{ width:15px; height:15px; color:var(--secondary); transition:transform .2s; }
.ip-sort.open .ip-sort-btn svg{ transform:rotate(180deg); }
.ip-sort-menu{ position:absolute; top:calc(100% + 6px); right:0; min-width:190px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:.3rem; opacity:0; pointer-events:none; transform:translateY(-4px); transition:opacity .15s,transform .15s; z-index:30; }
.ip-sort.open .ip-sort-menu{ opacity:1; pointer-events:auto; transform:none; }
.ip-sort-opt{ padding:.55rem .7rem; border-radius:var(--r-md); font-size:.85rem; color:var(--secondary); cursor:pointer; }
.ip-sort-opt:hover{ background:var(--page); color:var(--primary); }
.ip-sort-opt.sel{ color:var(--primary); font-weight:600; }
.ip-empty{ text-align:center; padding:4rem 1.5rem; }
.ip-empty-ic{ width:58px; height:58px; margin:0 auto 1.25rem; border-radius:var(--r-xl); background:var(--indigo-50); color:var(--indigo-600); display:grid; place-items:center; }
.ip-empty-ic svg{ width:27px; height:27px; }
.ip-empty h3{ font-size:1.12rem; font-weight:700; color:var(--primary); margin-bottom:.45rem; }
.ip-empty p{ font-size:.88rem; color:var(--secondary); line-height:1.6; max-width:380px; margin:0 auto 1.5rem; }

/* paste link field */
.ip-field{ position:relative; }
.ip-field-ic{ position:absolute; left:.9rem; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--secondary-2); pointer-events:none; }
.ip-input{ width:100%; padding:.8rem .95rem .8rem 2.5rem; border:1.5px solid var(--border); border-radius:var(--r-lg); font:inherit; font-size:.9rem; color:var(--primary); background:var(--surface); transition:border-color .15s, box-shadow .15s; }
.ip-input:focus{ outline:none; border-color:var(--indigo-500); box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.ip-input::placeholder{ color:var(--secondary-2); }

/* job summary (two-column) */
.ip-sum-grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1.25rem; align-items:start; }
.ip-jhead{ display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; padding-bottom:1.1rem; border-bottom:1px solid var(--border); margin-bottom:1.2rem; }
.ip-co{ font-size:.82rem; color:var(--secondary); margin-bottom:.3rem; }
.ip-jtitle{ font-size:1.4rem; font-weight:700; color:var(--primary); line-height:1.2; }
.ip-loc{ font-size:.85rem; color:var(--secondary-2); margin-top:.3rem; }
.ip-src{ display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .6rem; border:1px solid var(--border); border-radius:var(--r-md); font-size:.74rem; font-weight:600; color:var(--secondary); background:var(--surface); white-space:nowrap; flex:none; }
.ip-src svg{ width:12px; height:12px; }
.ip-jlabel{ font-size:.82rem; font-weight:700; color:var(--primary); margin:1.3rem 0 .55rem; }
.ip-jlabel:first-of-type{ margin-top:0; }
.ip-jbox{ border:1px solid var(--border); border-radius:var(--r-xl); padding:.95rem 1.05rem; font-size:.86rem; line-height:1.65; color:var(--secondary); background:var(--surface); cursor:text; transition:border-color .15s, box-shadow .15s; }
.ip-jbox[contenteditable]:hover{ border-color:var(--secondary-2); }
.ip-jbox[contenteditable]:focus{ outline:none; border-color:var(--indigo-500); box-shadow:0 0 0 3px var(--indigo-50); }
.ip-jbox ul{ margin:0; padding-left:1.15rem; }
.ip-jbox li{ margin:.2rem 0; }
.ip-aside{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl); box-shadow:var(--shadow-sm); padding:1.25rem; position:sticky; top:.25rem; }
.ip-aside-k{ font-size:.82rem; font-weight:700; color:var(--primary); margin-bottom:.4rem; }
.ip-aside-v{ font-size:.9rem; color:var(--secondary); margin-bottom:1.15rem; }
.ip-aside-div{ height:1px; background:var(--border); margin:0 0 1.15rem; }

/* seniority radio group */
.ip-radio-group{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.15rem; }
.ip-radio{ display:flex; align-items:center; gap:.6rem; padding:.5rem .65rem; border:1px solid var(--border); border-radius:var(--r-lg); cursor:pointer; font-size:.85rem; color:var(--secondary); transition:border-color .15s, background .15s, color .15s; }
.ip-radio:hover{ border-color:var(--secondary-2); }
.ip-radio input{ position:absolute; opacity:0; width:0; height:0; }
.ip-radio-mark{ width:16px; height:16px; flex:none; border-radius:50%; border:2px solid var(--border); position:relative; transition:border-color .15s; }
.ip-radio.sel{ border-color:var(--primary); background:var(--page); color:var(--primary); font-weight:600; }
.ip-radio.sel .ip-radio-mark{ border-color:var(--primary); }
.ip-radio.sel .ip-radio-mark::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--primary); }

/* removable / addable skill pills */
.jd-tag.removable{ display:inline-flex; align-items:center; gap:.25rem; padding-right:.3rem; }
.jd-tag-x{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; flex:none; border:none; border-radius:50%; background:transparent; color:var(--secondary-2); cursor:pointer; padding:0; transition:background .15s, color .15s; }
.jd-tag-x:hover{ background:var(--red-50); color:var(--red-500); }
.jd-skill-input{ width:90px; min-width:0; border:1px dashed var(--border); border-radius:var(--r-full); background:transparent; font:inherit; font-size:.75rem; font-weight:600; color:var(--primary); padding:.28rem .65rem; outline:none; transition:border-color .15s, box-shadow .15s, width .15s; }
.jd-skill-input:focus{ border-style:solid; border-color:var(--indigo-500); box-shadow:0 0 0 3px var(--indigo-50); width:124px; }
.jd-skill-input::placeholder{ color:var(--secondary-2); font-weight:500; }

/* select resume */
.ip-rs-head{ display:flex; align-items:center; gap:.75rem; margin-bottom:1.2rem; }
.ip-rs-head .ic{ width:40px; height:40px; border-radius:var(--r-lg); background:var(--page); border:1px solid var(--border); display:grid; place-items:center; color:var(--primary); flex:none; }
.ip-rs-head .ic svg{ width:18px; height:18px; }
.ip-rs-head h3{ font-size:1.08rem; font-weight:700; color:var(--primary); }
.ip-upload{ border:1.5px dashed var(--border); border-radius:var(--r-xl); padding:2.2rem 1.5rem; text-align:center; background:var(--page); }
.ip-upload h4{ font-size:.98rem; font-weight:700; color:var(--primary); margin-bottom:.4rem; }
.ip-upload p{ font-size:.85rem; color:var(--secondary); line-height:1.55; max-width:430px; margin:0 auto 1.3rem; }
.ip-resume{ display:flex; align-items:center; gap:.9rem; border:1.5px solid var(--border); border-radius:var(--r-xl); padding:.9rem 1rem; background:var(--surface); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.ip-resume-list{ display:flex; flex-direction:column; gap:.7rem; }
.ip-add-resume{ margin-top:.85rem; width:100%; display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.8rem; border:1.5px dashed var(--border); border-radius:var(--r-xl); background:var(--page); color:var(--secondary); font-family:inherit; font-size:.85rem; font-weight:600; cursor:pointer; transition:border-color .15s, color .15s; }
.ip-add-resume:hover{ border-color:var(--secondary-2); color:var(--primary); }
.ip-add-resume svg{ width:16px; height:16px; }
.ip-resume:hover{ border-color:var(--secondary-2); }
.ip-resume.sel{ border-color:var(--indigo-500); box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.ip-resume .pdf{ width:44px; height:44px; flex:none; border-radius:var(--r-md); background:var(--red-50); color:var(--red-500); display:grid; place-items:center; font-size:.6rem; font-weight:800; letter-spacing:.03em; }
.ip-resume-meta{ flex:1; min-width:0; }
.ip-resume-meta b{ font-size:.92rem; color:var(--primary); display:block; }
.ip-resume-meta span{ font-size:.8rem; color:var(--secondary); }
.ip-resume-acts{ display:flex; align-items:center; gap:.4rem; }
.ip-rbtn{ width:32px; height:32px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--surface); color:var(--secondary); display:grid; place-items:center; cursor:pointer; transition:background .13s,color .13s,border-color .13s; }
.ip-rbtn:hover{ background:var(--page); color:var(--primary); }
.ip-rbtn svg{ width:15px; height:15px; }
.ip-rbtn.pick{ border:none; background:var(--secondary); color:#fff; }

@media(max-width:900px){ .ip-sum-grid{ grid-template-columns:1fr; } .ip-aside{ position:static; } }
/* Job Summary: fill viewport height, scroll the job card internally */
@media(min-width:1024px){
  .shell-main[data-page="interview"] .screen:has(.ip-sum-fill){ overflow:hidden; }
  #pageInterview.page.active:has(.ip-sum-fill){ height:100%; }
  #pageInterview .iv-body:has(.ip-sum-fill){ height:100%; display:flex; flex-direction:column; min-height:0; padding-bottom:0; }
  .ip-wrap.ip-sum-fill{ flex:1; min-height:0; display:flex; flex-direction:column; padding-top:80px; padding-bottom:1.25rem; }
  .ip-wrap.ip-sum-fill .ip-sum-grid{ flex:1; min-height:0; align-items:stretch; }
  .ip-wrap.ip-sum-fill .ip-sum-grid > .iv-card{ min-height:0; overflow-y:auto; }
  /* summary card doesn't scroll itself — its body does, so the header bar stays fixed */
  .ip-wrap.ip-sum-fill .ip-sum-grid > .ip-sum-card{ overflow:hidden; }
  .ip-wrap.ip-sum-fill .ip-sum-grid > .ip-sum-card > .ip-sum-body{ flex:1; min-height:0; overflow-y:auto; }
  .ip-wrap.ip-sum-fill .ip-aside{ position:static; align-self:start; }
}

/* Review screen: full-viewport-height panel with sticky footer */
@media(min-width:1024px){
  .shell-main[data-page="interview"] .screen:has(.iv-panel){ overflow:hidden; }
  #pageInterview:has(.iv-panel){ height:100%; }
  #pageInterview .iv-body:has(.iv-panel){ height:100%; display:flex; flex-direction:column; min-height:0; padding-bottom:0; }
}
.iv-panel{
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-2xl); box-shadow:var(--shadow-sm); overflow:hidden;
}
.iv-panel-head{
  flex-shrink:0; display:flex; align-items:flex-start; gap:.9rem;
  padding:1.1rem 1.4rem; border-bottom:1px solid var(--border);
}
.iv-panel-body{ flex:1; min-height:0; overflow-y:auto; padding:1.4rem; }
.iv-panel-foot{
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:1rem 1.4rem; border-top:1px solid var(--border); background:var(--surface);
}
/* resume preview body scrolls inside the modal */
.iv-resume-preview{ max-height:74vh; overflow-y:auto; }
.iv-resume-preview .resume-doc{ padding:1.5rem 1.75rem; }
@media(max-width:680px){ .iv-fbq-cols{ grid-template-columns:1fr; } }

/* ===== Get Practice — choose mode (6.0) ===== */
.ipw-modes-h{ text-align:center; font-size:1.05rem; font-weight:700; color:var(--primary); margin:1.7rem 0 1.2rem; }
.ipw-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; align-items:stretch; }
.ipw-card{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--r-2xl); background:var(--surface); padding:1.4rem; box-shadow:var(--shadow-sm); }
.ipw-card.pro{ border-color:var(--secondary-2); box-shadow:0 0 0 3px var(--page), var(--shadow-md); }
.ipw-card-top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.1rem; }
.ipw-card-ic{ width:44px; height:44px; border-radius:var(--r-lg); background:var(--page); border:1px solid var(--border); display:grid; place-items:center; color:var(--primary); }
.ipw-card-ic svg{ width:20px; height:20px; }
.ipw-badge{ font-size:.62rem; font-weight:800; letter-spacing:.06em; color:var(--secondary); background:var(--page); border:1px solid var(--border); border-radius:var(--r-full); padding:.34rem .62rem; }
.ipw-card-t{ font-size:1.18rem; font-weight:700; color:var(--primary); line-height:1.25; margin-bottom:.55rem; }
.ipw-card-d{ font-size:.85rem; color:var(--secondary); line-height:1.55; margin-bottom:1rem; }
.ipw-feats{ background:var(--page); border-radius:var(--r-lg); padding:.85rem .9rem; display:flex; flex-direction:column; gap:.5rem; }
.ipw-feat{ display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--secondary); }
.ipw-feat svg{ width:15px; height:15px; color:var(--primary); flex:none; }
.ipw-card-spacer{ flex:1; min-height:.8rem; }
.ipw-price{ display:flex; align-items:center; gap:.4rem; font-size:.92rem; font-weight:700; color:var(--primary); margin:1.1rem 0 .75rem; }
.ipw-price .info{ width:15px; height:15px; color:var(--secondary-2); }
.ipw-card .iv-btn{ width:100%; }
.ipw-note{ font-size:.72rem; color:var(--secondary-2); margin-top:.65rem; text-align:center; }
@media(max-width:900px){ .ipw-cards{ grid-template-columns:1fr; } }

/* ===== Writing Interview Session — setup (7.0) ===== */
.ipw-setup-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:2.2rem; }
.ipw-created{ text-align:right; flex:none; }
.ipw-created span{ display:block; font-size:.8rem; font-weight:700; color:var(--primary); }
.ipw-created b{ display:block; font-size:.82rem; font-weight:500; color:var(--secondary-2); margin-top:.25rem; }
.ipw-setup-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; }
.ipw-guide-col{ border-left:1px solid var(--border); padding-left:2.5rem; }
.ipw-sec-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.4rem; }
.ipw-sec-head .ic{ width:40px; height:40px; border-radius:var(--r-lg); background:var(--page); border:1px solid var(--border); display:grid; place-items:center; color:var(--primary); flex:none; }
.ipw-sec-head .ic svg{ width:18px; height:18px; }
.ipw-sec-head h3{ font-size:1.15rem; font-weight:700; color:var(--primary); }
.ipw-label{ font-size:.82rem; font-weight:700; color:var(--primary); margin-bottom:.7rem; }
.ipw-interviewer{ border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; }
.ipw-iv-top{ display:flex; align-items:center; justify-content:space-between; background:var(--page); padding:.6rem .9rem; }
.ipw-ai-badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.66rem; font-weight:800; letter-spacing:.05em; color:var(--primary); }
.ipw-ai-badge svg{ width:13px; height:13px; }
.ipw-iv-cfg{ width:28px; height:28px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--surface); color:var(--secondary); display:grid; place-items:center; cursor:pointer; }
.ipw-iv-cfg svg{ width:14px; height:14px; }
.ipw-iv-person{ display:flex; align-items:center; gap:.8rem; padding:.9rem; }
.ipw-iv-person b{ font-size:.95rem; color:var(--primary); display:block; }
.ipw-iv-person .r{ font-size:.8rem; color:var(--secondary); }
.ipw-iv-div{ height:1px; background:var(--border); margin:0 .9rem; }
.ipw-interviewer .ipw-label{ padding:.9rem .9rem 0; margin-bottom:.55rem; }
.ipw-skills{ display:flex; flex-wrap:wrap; gap:.45rem; padding:0 .9rem 1rem; }
.ipw-skills span{ font-size:.74rem; color:var(--secondary); background:var(--page); border:1px solid var(--border); border-radius:var(--r-full); padding:.3rem .7rem; }
.ipw-guide{ display:flex; flex-direction:column; gap:1.3rem; margin-bottom:1.6rem; }
.ipw-gstep{ display:flex; gap:.85rem; }
.ipw-gstep-n{ width:24px; height:24px; flex:none; border-radius:50%; background:var(--primary); color:#fff; font-size:.78rem; font-weight:700; display:grid; place-items:center; }
.ipw-gstep b{ font-size:.9rem; color:var(--primary); display:block; margin-bottom:.25rem; }
.ipw-gstep p{ font-size:.83rem; color:var(--secondary); line-height:1.55; }
.ws-avatar{ width:42px; height:42px; flex:none; border-radius:50%; background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; display:grid; place-items:center; font-size:.85rem; font-weight:700; }
.ws-avatar.sm{ width:34px; height:34px; font-size:.72rem; }
@media(max-width:900px){ .ipw-setup-grid{ grid-template-columns:1fr; gap:1.6rem; } .ipw-guide-col{ border-left:none; padding-left:0; } }

/* ===== Generating session (7.1) ===== */
.ipw-gen{ max-width:300px; margin:0 auto; }
.ipw-gen-title{ font-size:1rem; font-weight:700; color:var(--primary); margin-bottom:1.1rem; }
.ipw-gen-step{ display:flex; align-items:center; gap:.7rem; border:1px solid var(--border); border-radius:var(--r-lg); padding:.65rem .8rem; margin-bottom:.6rem; font-size:.85rem; font-weight:600; color:var(--secondary-2); background:var(--surface); transition:.25s; }
.ipw-gen-step.active,.ipw-gen-step.done{ color:var(--primary); }
.ipw-gen-step.pending{ opacity:.4; }
.ipw-gen-ic{ width:18px; height:18px; flex:none; display:grid; place-items:center; }
.ipw-gen-ic svg{ width:18px; height:18px; }
.ipw-spin{ width:15px; height:15px; border-radius:50%; border:2px solid var(--border); border-top-color:var(--primary); animation:ivspin .7s linear infinite; }

/* ===== Live written session (7.2–7.6) ===== */
@media(min-width:1024px){
  .shell-main[data-page="interview"] .screen:has(.ws-shell){ overflow:hidden; }
  #pageInterview.page.active:has(.ws-shell){ height:100%; }
  #pageInterview .iv-body:has(.ws-shell){ height:100%; display:flex; flex-direction:column; min-height:0; padding:0; max-width:none; margin:0; }
}
.ws-shell{ flex:1; min-height:0; display:flex; background:var(--page); }
.ws-main{ flex:1; min-width:0; display:flex; flex-direction:column; min-height:0; padding:1.25rem 1.5rem 0; }
.ws-top{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:.85rem 1.2rem; box-shadow:var(--shadow-sm); }
.ws-top h2{ font-size:1.05rem; font-weight:700; color:var(--primary); }
.ws-top .sub{ font-size:.78rem; color:var(--secondary); margin-top:.15rem; }
.ws-top-right{ display:flex; align-items:center; gap:1.1rem; }
.ws-timer{ display:flex; align-items:center; gap:.4rem; font-size:.9rem; font-weight:600; color:var(--primary); font-variant-numeric:tabular-nums; }
.ws-timer svg{ width:16px; height:16px; color:var(--secondary); }
.ws-end{ display:flex; align-items:center; gap:.5rem; background:var(--primary); color:#fff; border:none; border-radius:var(--r-lg); padding:.6rem 1rem; font-family:inherit; font-size:.85rem; font-weight:700; cursor:pointer; }
.ws-end svg{ width:15px; height:15px; }
.ws-conv{ flex:1; min-height:0; overflow-y:auto; padding:2.5rem 1rem 1rem; }
.ws-conv-inner{ max-width:680px; margin:0 auto; }
.ws-q-card{ display:flex; align-items:center; justify-content:space-between; gap:1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:.7rem 1rem; box-shadow:var(--shadow-sm); margin-bottom:1.7rem; }
.ws-q-int{ display:flex; align-items:center; gap:.6rem; }
.ws-q-int b{ font-size:.85rem; color:var(--primary); display:block; }
.ws-q-int span{ font-size:.72rem; color:var(--secondary-2); }
.ws-q-meta{ text-align:right; }
.ws-q-meta b{ font-size:.82rem; color:var(--primary); display:block; }
.ws-q-meta span{ font-size:.72rem; color:var(--secondary-2); }
.ws-q-text{ font-size:1.7rem; font-weight:600; line-height:1.42; color:var(--primary); margin-bottom:1.5rem; white-space:pre-line; }
.ws-q-text .lead{ color:var(--secondary-2); }
.ws-bubble{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:1.05rem 1.2rem; }
.ws-bubble b{ font-size:.9rem; color:var(--primary); display:block; margin-bottom:.5rem; }
.ws-bubble p{ font-size:.92rem; color:var(--secondary); line-height:1.6; white-space:pre-wrap; }
.ws-think{ display:flex; align-items:center; gap:.55rem; color:var(--secondary-2); font-size:.85rem; margin-top:1.3rem; }
.ws-foot{ flex:none; padding:.4rem 1rem 1.4rem; }
.ws-foot-inner{ max-width:680px; margin:0 auto; }
.ws-controls{ display:flex; align-items:center; justify-content:center; margin-bottom:.85rem; }
.ws-ctrl{ display:flex; align-items:center; gap:.45rem; background:var(--page); border:1px solid var(--border); color:var(--primary); font-family:inherit; font-size:.83rem; font-weight:600; padding:.55rem 1rem; cursor:pointer; }
.ws-ctrl:first-child{ border-radius:var(--r-lg) 0 0 var(--r-lg); border-right:none; }
.ws-ctrl:last-child{ border-radius:0 var(--r-lg) var(--r-lg) 0; }
.ws-ctrl svg{ width:14px; height:14px; }
.ws-ctrl:disabled{ color:var(--secondary-2); cursor:not-allowed; }
.ws-inputbar{ display:flex; align-items:center; gap:.5rem; border:1px solid var(--border); background:var(--surface); border-radius:var(--r-full); padding:.45rem .5rem .45rem 1.2rem; box-shadow:var(--shadow-sm); }
.ws-inputbar.disabled{ opacity:.85; }
.ws-inputbar input{ flex:1; border:none; outline:none; background:none; font-family:inherit; font-size:.92rem; color:var(--primary); }
.ws-send{ display:flex; align-items:center; gap:.4rem; border:none; border-radius:var(--r-full); padding:.55rem 1.1rem; font-family:inherit; font-size:.85rem; font-weight:700; cursor:pointer; background:var(--primary); color:#fff; transition:.15s; }
.ws-send:disabled{ background:var(--page); color:var(--secondary-2); cursor:not-allowed; }
.ws-send svg{ width:15px; height:15px; }
.ws-aside{ flex:none; width:360px; margin:1.25rem 1.5rem 1.25rem 0; border:1px solid var(--border); border-radius:var(--r-xl); background:var(--surface); box-shadow:var(--shadow-sm); overflow-y:auto; padding:1.4rem; }
.ws-aside-h{ font-size:1.05rem; font-weight:700; color:var(--primary); margin-bottom:1.2rem; }
.ws-stage{ border:1px solid var(--border); border-radius:var(--r-xl); padding:.5rem; margin-bottom:.9rem; background:var(--page); }
.ws-stage-head{ display:flex; align-items:center; justify-content:space-between; padding:.5rem .6rem .7rem; }
.ws-stage-head b{ font-size:.88rem; color:var(--primary); }
.ws-stage-head .stg{ font-size:.78rem; color:var(--secondary-2); }
.ws-stage.locked{ display:flex; align-items:center; justify-content:space-between; padding:.95rem 1.05rem; }
.ws-stage.locked b{ font-size:.88rem; color:var(--secondary-2); font-weight:600; }
.ws-stage.locked .stg{ font-size:.78rem; color:var(--secondary-2); }
.ws-item{ display:flex; align-items:center; gap:.6rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:.62rem .75rem; margin-bottom:.4rem; font-size:.82rem; color:var(--secondary); }
.ws-item:last-child{ margin-bottom:0; }
.ws-item.active,.ws-item.done{ color:var(--primary); font-weight:600; }
.ws-item-ic{ width:16px; height:16px; flex:none; display:grid; place-items:center; color:var(--primary); }
.ws-item-ic svg{ width:16px; height:16px; }
.ws-item-dot{ width:13px; height:13px; border-radius:50%; border:1.5px solid var(--secondary-2); }
.ws-item-spin{ width:14px; height:14px; border-radius:50%; border:2px solid var(--border); border-top-color:var(--primary); animation:ivspin .7s linear infinite; }
@media(max-width:1023px){ .ws-aside{ display:none; } .ws-main{ padding:1rem; } }

/* sections */
.jd-section{ margin-bottom:1.3rem; }
.jd-section:last-child{ margin-bottom:0; }
.jd-h{ font-size:.95rem; font-weight:700; color:var(--primary); margin-bottom:.55rem; }
.jd-p{ font-size:.85rem; line-height:1.6; color:var(--secondary); }
.jd-list{ list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.jd-list li{ position:relative; padding-left:1.4rem; font-size:.85rem; line-height:1.5; color:var(--secondary); }
.jd-list li svg{ position:absolute; left:0; top:.15em; width:15px; height:15px; color:var(--emerald-600); flex-shrink:0; }
.jd-tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.jd-tag{ font-size:.75rem; font-weight:600; color:var(--primary); background:var(--page); border:1px solid var(--border); border-radius:var(--r-full); padding:.28rem .65rem; }
.jd-about{ font-size:.85rem; line-height:1.6; color:var(--secondary); }
/* right: journey */
.jd-side-h{ font-size:.95rem; font-weight:700; color:var(--primary); margin-bottom:.2rem; }
.jd-side-note{ font-size:.78rem; color:var(--secondary); line-height:1.5; margin-bottom:1rem; }
.jd-cur{ display:inline-flex; align-items:center; gap:.45rem; font-size:.76rem; font-weight:700; padding:.32rem .65rem; border-radius:var(--r-full); margin-bottom:1.15rem; }
.jd-cur .dot{ width:7px; height:7px; border-radius:50%; }
.jd-journey{ display:flex; flex-direction:column; }
.jd-step{ display:flex; gap:.7rem; }
.jd-rail{ display:flex; flex-direction:column; align-items:center; align-self:stretch; }
.jd-dot{
  width:26px; height:26px; flex-shrink:0; border-radius:50%;
  display:grid; place-items:center;
  border:2px solid var(--border); background:var(--surface); color:var(--secondary-2);
}
.jd-dot svg{ width:13px; height:13px; }
.jd-here{ width:8px; height:8px; border-radius:50%; background:#fff; }
.jd-conn{ flex:1; width:2px; background:var(--border); margin:3px 0; min-height:14px; border-radius:2px; }
.jd-step:last-child .jd-conn{ display:none; }
.jd-step-body{ padding-bottom:1.15rem; padding-top:.15rem; }
.jd-step-title{ font-size:.85rem; font-weight:700; color:var(--primary); }
.jd-step-sub{ font-size:.74rem; color:var(--secondary); margin-top:.12rem; line-height:1.4; }
.jd-step.todo .jd-step-title{ color:var(--secondary-2); }
.jd-step.todo .jd-dot{ border-style:dashed; }
/* responsive: stack columns on narrow screens */
@media(max-width:840px){
  .jd-cols{ grid-template-columns:1fr; }
  .jd-side{ border-left:none; border-top:1px solid var(--border); }
  .jd-head-actions .jd-cta-text{ display:none; }
}

/* Toast */
.toast-wrap{
  position:fixed;
  bottom:1.5rem; right:1.5rem;
  display:flex; flex-direction:column; gap:.5rem;
  z-index:50;
  align-items:flex-end;
}
.toast{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  background:var(--primary);
  color:#fff;
  font-size:.8125rem;
  font-weight:600;
  padding:.6rem .9rem;
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
  animation:toastIn .25s var(--ease-sidebar);
}
.toast svg{ color:var(--emerald-600); }
.toast.out{ animation:toastOut .25s var(--ease-sidebar) forwards; }
@keyframes toastIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
@keyframes toastOut{ to{opacity:0; transform:translateY(8px);} }

@media(max-width:920px){
  .content{ flex-direction:column; }
  .sidebar{ width:100%; position:static; top:auto; }
  .app[data-view="saved"] .sidebar{ margin-right:0; }
}