* { box-sizing: border-box; }
:root {
  --cb-body-bg: #f7f5f2;
  --cb-text: #292524;
  --cb-app-bg: #fdfcfa;
  --cb-border: #e7e5e4;
  --cb-panel-bg: #ffffff;
  --cb-subtle-bg: #f5f3ef;
  --cb-muted: #78716c;
  --cb-accent: #35608c;
  --cb-accent-strong: #294a6f;
  --cb-accent-soft: #e9eef4;
  --cb-secondary: #78716c;
  --cb-danger: #b0433a;
  /* Generative/AI accent — a warm iris, distinct from the steel-blue brand and
     the red danger. One family for every AI-powered action (gen / assist / polish). */
  --cb-ai: #6f4a86;
  --cb-ai-strong: #5a3a6e;
  --cb-ai-soft: #f1ecf6;
  --cb-ai-ink: #5f3d75;
  --cb-input-bg: #ffffff;
  /* Category & skill-level chips: soft pastel fill + ink text (lab-notebook).
     Self-contained light chips — the ink stays readable in both themes; night
     overrides below swap to muted-dark fills so chips don't glare on dark. */
  --cat-technical: #dae4ef;     --cat-technical-ink: #304a64;
  --cat-collaboration: #d6e8e3; --cat-collaboration-ink: #2a513f;
  --cat-impact: #f1e2c6;        --cat-impact-ink: #574423;
  --cat-strategy: #f2dbde;      --cat-strategy-ink: #623b3c;
  --cat-leadership: #e7deee;    --cat-leadership-ink: #4f4060;
  --lvl-ink: #304a64;
  --lvl-developing: #e7edf4;    --lvl-proficient: #c6d5e7;    --lvl-expert: #a6bdd8;
  --cb-shadow: 0 18px 38px rgba(41, 37, 36, 0.06);
  --cb-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cb-font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
}
body {
  margin: 0;
  font-family: var(--cb-font-body);
  background: var(--cb-body-bg);
  color: var(--cb-text);
  font-size: 14px;
  line-height: 1.55;
}
h1, h2, h3 {
  font-family: var(--cb-font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.hidden {
  display: none !important;
}
.page-shell {
  width: min(1600px, 100%);
  margin: 0 auto;
  padding: 20px clamp(12px, 3vw, 36px) 190px;
}
.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100dvh - 40px);
  border: 1px solid color-mix(in srgb, var(--cb-border) 70%, transparent);
  border-radius: 14px;
  overflow: hidden;
  background: var(--cb-app-bg);
  box-shadow: var(--cb-shadow);
}
.sidebar {
  background: var(--cb-subtle-bg);
  color: var(--cb-text);
  padding: 20px 16px;
  border-right: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  display: flex;
  flex-direction: column;
}
.sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--cb-muted);
}
.sidebar-footer p { margin: 0 0 4px; }
body.public-view .sidebar-footer { display: none; }
body.public-view .tour-help-btn { display: none; }
.sidebar h2 { margin: 0 0 4px; font-size: 20px; font-family: var(--cb-font-display); font-weight: 400; letter-spacing: -0.01em; }
.muted { color: var(--cb-muted); font-size: 12px; }
.small { font-size: 12px; }
.usage-line, .job-app-cost, .ingest-sheet-cost { margin-top: 6px; }
.sidebar nav { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group + .nav-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--cb-border) 50%, transparent); }
.nav-group-title { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cb-muted); padding: 0 4px; margin-bottom: 4px; font-weight: 500; }
.sidebar .nav-btn {
  border: 0;
  text-align: left;
  background: transparent;
  color: var(--cb-text);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  transition: background 100ms ease, color 100ms ease;
}
.sidebar .nav-btn:hover { background: rgba(0, 0, 0, 0.04); }
.sidebar .nav-btn.active {
  background: var(--cb-accent-soft);
  color: var(--cb-accent);
  font-weight: 600;
}
.sidebar .nav-btn.nav-btn-logout { color: var(--cb-danger); margin-top: 4px; font-weight: 400; }
.sidebar .nav-btn.nav-btn-logout:hover { background: color-mix(in srgb, var(--cb-danger) 8%, transparent); }
.main { padding: 20px 24px; background: var(--cb-panel-bg); }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.brand-lockup { display: flex; flex-direction: column; gap: 4px; line-height: 1.05; }
.brand-name { font-family: var(--cb-font-display); font-size: 20px; letter-spacing: -0.01em; }
.brand-tagline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--cb-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cb-muted);
}
.brand-tagline-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid var(--cb-accent);
  flex: none;
}
.page-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 28px;
  padding: 14px 4px 0;
  border-top: 1px solid color-mix(in srgb, var(--cb-border) 70%, transparent);
  color: var(--cb-muted);
  font-size: 12px;
}
/* Our legal links belong to the account holder, not to a stranger reading
   someone's published portfolio — the promo line is all a visitor needs. */
body.public-view .page-footer-legal { display: none; }
.page-footer .brand-lockup { flex-direction: row; align-items: center; gap: 10px; }
.page-footer .brand-name { font-size: 17px; }
.page-footer p { margin: 0; }
.page-footer-sep { margin: 0 4px; opacity: 0.6; }
.page-footer a { color: var(--cb-accent); text-decoration: none; }
.page-footer a:hover { text-decoration: underline; }
body.public-view .content[data-section="summary"] .card {
  /* !important: the night theme block (body[data-theme-mode="night"] .card)
     forces background/border-color with !important. */
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.theme-switch {
  font-size: 11px;
  font-weight: 500;
  color: var(--cb-muted);
  letter-spacing: 0.02em;
}
.theme-select {
  min-width: 86px;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
  font-family: var(--cb-font-body);
  font-size: 12px;
}
.nav-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  min-width: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cb-muted);
  border-radius: 8px;
  line-height: 1;
}
.nav-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}
.hamburger-lines {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}
.hamburger-lines::before,
.hamburger-lines::after,
.hamburger-lines span {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2.5px;
  border-radius: 3px;
  background: currentColor;
}
.hamburger-lines::before { top: 0; }
.hamburger-lines span { top: 6.75px; }
.hamburger-lines::after { bottom: 0; }
.content { max-width: 920px; }
.card {
  background: var(--cb-panel-bg);
  border: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  border-radius: 10px;
  box-shadow: none;
  padding: 16px;
  margin-bottom: 14px;
}
.card .card {
  border-color: color-mix(in srgb, var(--cb-border) 40%, transparent);
  background: var(--cb-subtle-bg);
  margin-bottom: 10px;
}
.line { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 11px; color: var(--cb-muted); padding: 3px 9px; border-radius: 999px; background: var(--cb-subtle-bg); border: 1px solid color-mix(in srgb, var(--cb-muted) 22%, transparent); font-weight: 600; letter-spacing: 0.01em; }
.tag.technical{background:var(--cat-technical);color:var(--cat-technical-ink);border-color:color-mix(in srgb,var(--cat-technical-ink) 20%,transparent)}
.tag.collaboration{background:var(--cat-collaboration);color:var(--cat-collaboration-ink);border-color:color-mix(in srgb,var(--cat-collaboration-ink) 20%,transparent)}
.tag.impact{background:var(--cat-impact);color:var(--cat-impact-ink);border-color:color-mix(in srgb,var(--cat-impact-ink) 20%,transparent)}
.tag.strategy{background:var(--cat-strategy);color:var(--cat-strategy-ink);border-color:color-mix(in srgb,var(--cat-strategy-ink) 20%,transparent)}
.tag.leadership{background:var(--cat-leadership);color:var(--cat-leadership-ink);border-color:color-mix(in srgb,var(--cat-leadership-ink) 20%,transparent)}
.tag-btn {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.25;
}
.tag-btn.active {
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);
}
.tag-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cb-accent) 55%, white);
  outline-offset: 2px;
}
.btn {
  border: 0;
  background: var(--cb-accent);
  color: #fff;
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  font-family: var(--cb-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 100ms ease, box-shadow 100ms ease;
}
.btn:hover { background: var(--cb-accent-strong); }
a.btn { display: inline-block; text-decoration: none; }
.btn.hidden { visibility: hidden; }
.btn.icon { padding: 5px 10px; font-size: 12px; }
.btn.secondary { background: color-mix(in srgb, var(--cb-secondary) 85%, black); }
.btn.secondary:hover { background: var(--cb-secondary); }
.btn.danger { background: var(--cb-danger); }
.btn.danger:hover { background: color-mix(in srgb, var(--cb-danger) 85%, black); }
.btn.ghost {
  background: transparent;
  color: var(--cb-text);
  border: 1px solid var(--cb-border);
}
.btn.ghost:hover { background: var(--cb-subtle-bg); }
/* AI actions — themed with the app's AI accent so they read as distinct, filled
   controls instead of blending into the panel. */
.btn.ai { background: var(--cb-ai); color: #fff; }
.btn.ai:hover { background: var(--cb-ai-strong); }
.inline-form { display: grid; gap: 8px; }
.inline-form input, .inline-form textarea, .inline-form select { width: 100%; border: 1px solid var(--cb-border); border-radius: 8px; padding: 9px 10px; background: var(--cb-input-bg); color: var(--cb-text); font-family: var(--cb-font-body); font-size: 13px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form-grid-3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.field-row { display: grid; grid-template-columns: 140px 1fr; gap: 8px; align-items: center; }
.field-pair-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(180px, 1fr);
  gap: 12px;
  align-items: start;
}
.field-stack {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.inline-date-range-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.inline-date-range-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--cb-muted);
  white-space: nowrap;
}
.inline-date-range-picker {
  min-width: 0;
}
.inline-date-range-picker .month-year-control {
  width: 100%;
}
.inline-date-range-current {
  white-space: nowrap;
}
.field-label { font-size: 12px; font-weight: 600; color: var(--cb-muted); }
.field-control { min-width: 0; }
.field-hint { font-size: 11px; color: var(--cb-muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.field-hint--near-limit { color: var(--cb-danger); }
/* AI action buttons — one generative-accent identity across gen / assist / polish.
   `.ai-btn` is a modifier on `.btn` (inherits sizing from .btn / .btn.icon); it
   only recolors and adds a ✦ mark. Solid = generative CTAs; `.quiet` = the lighter
   "refine what's there" action (Polish). Declared after .btn so it wins on ties. */
.ai-btn {
  background: var(--cb-ai);
  color: #fff;
}
.ai-btn:hover {
  background: var(--cb-ai-strong);
}
.ai-btn::before {
  content: "\2726"; /* ✦ four-point star — signals "generative" without emoji drift */
  margin-right: 6px;
  font-size: 0.9em;
  opacity: 0.85;
  vertical-align: baseline;
}
.ai-btn.quiet {
  background: var(--cb-ai-soft);
  color: var(--cb-ai-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cb-ai) 32%, transparent);
}
.ai-btn.quiet:hover {
  background: color-mix(in srgb, var(--cb-ai-soft) 82%, var(--cb-ai));
}
.summary-exp-row { padding: 10px 0; border-bottom: 1px solid var(--cb-border); }
.summary-exp-row:last-child { border-bottom: 0; }
.summary-exp-title { color: var(--cb-text); }
.summary-exp-date { margin-top: 2px; color: var(--cb-muted); font-size: 12px; }
.summary-exp-body { margin-top: 4px; color: var(--cb-text); font-size: 14px; }

/* Working-experience timeline (summary frontpage) */
.work-timeline { padding: 6px 0 2px; }
.wt-entry {
  display: grid;
  grid-template-columns: 108px 26px 1fr;
  column-gap: 10px;
}
/* Dates are metadata, not the headline: kept smaller and quieter than the
   company so the employer stays the anchor of each entry. Display serif so
   they read as a family with the company name rather than as a UI label. */
.wt-years {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3px;
  padding-top: 5px;
  text-align: right;
}
.wt-year-start,
.wt-year-end {
  font-family: var(--cb-font-display);
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--cb-muted);
  white-space: nowrap;
}
.wt-year-end::before { content: "– "; }
.wt-rail { position: relative; display: flex; justify-content: center; }
.wt-rail::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: -8px;
  left: 50%;
  border-left: 2px dotted color-mix(in srgb, var(--cb-accent) 30%, var(--cb-border));
  transform: translateX(-50%);
}
.wt-entry:last-child .wt-rail::before { display: none; }
.wt-dot {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--cb-panel-bg);
  border: 2px solid color-mix(in srgb, var(--cb-accent) 55%, var(--cb-border));
}
.wt-current .wt-dot {
  background: var(--cb-accent);
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cb-accent) 16%, transparent);
}
.wt-body { padding-bottom: 22px; min-width: 0; }
.wt-entry:last-child .wt-body { padding-bottom: 6px; }
/* Sits just under the card's own h3 (16.38px) so the section heading still
   leads. The display serif, not size, is what marks the company as the
   anchor of each entry against the sans roles and summary. */
.wt-company {
  font-family: var(--cb-font-display);
  font-size: 16px;
  line-height: 1.35;
  color: var(--cb-text);
}
.wt-roles { margin-top: 4px; }
.wt-role { padding: 2px 0; }
.wt-role-title { font-weight: 500; color: var(--cb-text); }
.wt-summary { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--cb-muted); }
@media (max-width: 640px) {
  .wt-entry { grid-template-columns: 22px 1fr; }
  .wt-years {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
    text-align: left;
    padding-top: 0;
    padding-bottom: 2px;
  }
  .wt-rail { grid-column: 1; grid-row: 1 / span 2; }
  .wt-body { grid-column: 2; grid-row: 2; }
}

/* Contact strip (public view) */
.contact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 0 0 12px;
}
.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  font-size: 13px;
  color: var(--cb-text);
  background: color-mix(in srgb, var(--cb-border) 35%, transparent);
  border-radius: 20px;
  text-decoration: none;
  transition: background 0.15s ease;
  line-height: 1.3;
}
a.contact-chip:hover {
  background: color-mix(in srgb, var(--cb-accent) 12%, transparent);
  color: var(--cb-accent);
}
.contact-chip svg,
.contact-chip .contact-favicon {
  flex-shrink: 0;
  opacity: 0.7;
}
.contact-favicon {
  border-radius: 2px;
}
a.contact-chip:hover svg,
a.contact-chip:hover .contact-favicon {
  opacity: 1;
}
.contact-chip-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* Contact rows (internal view) */
.contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--cb-border);
}
.contact-row:last-child { border-bottom: 0; }
.contact-row.contact-hidden {
  opacity: 0.5;
}
.contact-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.contact-row-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cb-border) 40%, transparent);
  color: var(--cb-muted);
}
.contact-row-info {
  min-width: 0;
}
.contact-row-value {
  font-size: 14px;
  color: var(--cb-text);
  line-height: 1.3;
}
.contact-value-link {
  color: var(--cb-accent);
  text-decoration: none;
}
.contact-value-link:hover {
  text-decoration: underline;
}
.contact-row-label {
  font-size: 12px;
  color: var(--cb-muted);
  margin-top: 1px;
}
.contact-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.contact-row:hover .contact-row-actions {
  opacity: 1;
}
/* Always show on touch devices */
@media (hover: none) {
  .contact-row-actions { opacity: 1; }
}
.contact-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--cb-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  padding: 0;
}
.contact-action-btn:hover {
  background: color-mix(in srgb, var(--cb-border) 60%, transparent);
  color: var(--cb-text);
}
.contact-action-danger:hover {
  background: color-mix(in srgb, var(--cb-danger, #dc2626) 12%, transparent);
  color: var(--cb-danger, #dc2626);
}
.qualification-link-line {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.35;
}
.qualification-link-line a {
  color: var(--cb-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  word-break: break-all;
}
.terminal-expand { margin-top: 8px; padding: 10px 0 0; border-top: 1px solid var(--cb-border); }
.terminal-expand a { color: var(--cb-accent); text-decoration: underline; }
.terminal-list { margin: 8px 0 0 18px; color: var(--cb-text); }
.terminal-list li { margin-bottom: 4px; }
.experience-card-line {
  align-items: flex-start;
}
.experience-card-body {
  min-width: 0;
  flex: 1 1 auto;
}
.experience-toggle-btn,
.experience-static-head {
  width: 100%;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.experience-toggle-btn {
  cursor: pointer;
}
.experience-toggle-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cb-accent) 55%, white);
  outline-offset: 4px;
  border-radius: 8px;
}
.experience-summary {
  margin-top: 6px;
  color: var(--cb-text);
  font-size: 14px;
  line-height: 1.45;
}
.experience-details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--cb-border);
}
.experience-detail-copy,
.experience-detail-impact {
  color: var(--cb-text);
  font-size: 14px;
  line-height: 1.5;
}
.experience-detail-impact {
  margin-top: 8px;
}


/* The "Move" affordance — accent-tinted so it reads as "send this elsewhere",
   distinct from the neutral Edit and the red Delete beside it. */
.move-btn {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--cb-accent); font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--cb-accent) 40%, transparent);
  background: color-mix(in srgb, var(--cb-accent) 9%, transparent);
}
.move-btn:hover {
  background: color-mix(in srgb, var(--cb-accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--cb-accent) 60%, transparent);
  color: var(--cb-accent);
}
.move-btn-icon { font-size: 14px; line-height: 1; transform: translateY(-1px); }

/* Move dock — right-side destination picker (click-to-move, cross-browser). */
.move-dock {
  position: fixed;
  top: 0;
  right: 0;
  width: min(360px, 94vw);
  height: 100dvh;
  z-index: 1150; /* above content, below modal overlay (1200) so an add-modal opens on top */
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--cb-panel-bg) 86%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-left: 1px solid color-mix(in srgb, var(--cb-accent) 22%, var(--cb-border));
  box-shadow: -18px 0 48px -20px color-mix(in srgb, var(--cb-shadow-color, #000) 55%, transparent);
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.move-dock.open { transform: translateX(0); }
.move-dock.hidden { pointer-events: none; }
/* Accent rail down the leading edge — a small signature that ties it to Move. */
.move-dock::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--cb-accent), color-mix(in srgb, var(--cb-accent) 40%, transparent));
}
.move-dock-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--cb-border) 50%, transparent);
}
.move-dock-title {
  font-weight: 700; font-size: 13px; letter-spacing: 0.01em; color: var(--cb-text);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px;
}
.move-dock-title-icon { color: var(--cb-accent); font-size: 15px; line-height: 1; }
.move-dock-what {
  font-weight: 600; color: var(--cb-accent);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.move-dock-close {
  border: 0; background: transparent; color: var(--cb-muted);
  font-size: 24px; line-height: 0.7; cursor: pointer; padding: 2px 4px; border-radius: 6px;
}
.move-dock-close:hover { color: var(--cb-text); background: color-mix(in srgb, var(--cb-border) 40%, transparent); }
.move-dock-hint {
  padding: 10px 18px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--cb-muted);
}
.move-dock-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 14px 20px; display: flex; flex-direction: column; gap: 6px; }
.move-dock-group-head {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--cb-border) 50%, transparent);
  border-radius: 10px; background: color-mix(in srgb, var(--cb-panel-bg) 55%, transparent);
  color: var(--cb-text); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
  transition: border-color 120ms ease, background 120ms ease;
}
.move-dock-group-head .mdg-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move-dock-group-head::after {
  content: "⌄"; flex: 0 0 auto; color: var(--cb-muted); font-size: 13px;
  transition: transform 180ms ease; transform: translateY(-2px);
}
.move-dock-group:hover .move-dock-group-head,
.move-dock-group.open .move-dock-group-head {
  border-color: color-mix(in srgb, var(--cb-accent) 50%, transparent);
  background: color-mix(in srgb, var(--cb-accent) 7%, transparent);
}
.move-dock-group:hover .move-dock-group-head::after,
.move-dock-group.open .move-dock-group-head::after { transform: translateY(-2px) rotate(180deg); color: var(--cb-accent); }
.mdg-meta { font-size: 11px; font-weight: 500; color: var(--cb-muted); flex: 0 0 auto; }
/* Collapsed by default; expands on hover, keyboard focus, or click (aria-expanded/.open).
   max-height (not grid-rows) so multiple role buttons collapse reliably. */
.move-dock-roles {
  max-height: 0; overflow: hidden;
  transition: max-height 220ms ease-out;
  padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--cb-accent) 20%, transparent);
  margin: 2px 0 2px 12px;
}
.move-dock-group:hover .move-dock-roles,
.move-dock-group:focus-within .move-dock-roles,
.move-dock-group.open .move-dock-roles { max-height: 60vh; overflow-y: auto; }
.move-dock-target {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 4px; padding: 9px 11px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--cb-text); font-size: 13px; cursor: pointer; text-align: left;
  transition: background 120ms ease, border-color 120ms ease;
}
.move-dock-target:hover, .move-dock-target:focus-visible {
  background: color-mix(in srgb, var(--cb-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--cb-accent) 50%, transparent);
  outline: none;
}
.move-dock-target-solo {
  border: 1px solid color-mix(in srgb, var(--cb-border) 50%, transparent);
  background: color-mix(in srgb, var(--cb-panel-bg) 55%, transparent);
  font-weight: 600;
}
.move-dock-target-solo:hover { background: color-mix(in srgb, var(--cb-accent) 10%, transparent); }
.move-dock-go {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--cb-accent); opacity: 0; transform: translateX(-3px);
  transition: opacity 120ms ease, transform 120ms ease; flex: 0 0 auto;
}
.move-dock-target:hover .move-dock-go, .move-dock-target:focus-visible .move-dock-go { opacity: 1; transform: translateX(0); }
.move-dock-empty { padding: 28px 16px; text-align: center; color: var(--cb-muted); font-size: 13px; line-height: 1.5; }
.move-dock-empty .move-dock-add { margin-top: 12px; }

/* Post-move reveal: brief flash on the card that just landed. */
@keyframes just-moved-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cb-accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 6px transparent; }
}
.just-moved {
  animation: just-moved-pulse 1.4s ease-out;
  border-radius: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .move-dock { transition: none; }
  .move-dock-roles { transition: none; }
  .just-moved { animation: none; outline: 2px solid color-mix(in srgb, var(--cb-accent) 55%, transparent); }
}

.exp-filters {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}
.exp-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-status {
  font-size: 12px;
  color: var(--cb-muted);
}
.exp-filter-btn {
  border: 1px solid var(--cb-border);
  background: transparent;
  color: var(--cb-text);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}
.exp-filter-btn:hover { background: var(--cb-subtle-bg); }
.exp-filter-btn.active {
  border-color: var(--cb-accent);
  background: var(--cb-accent-soft);
  color: var(--cb-accent);
  font-weight: 600;
}
.exp-filter-btn.active.technical{background:var(--cat-technical);border-color:var(--cat-technical-ink);color:var(--cat-technical-ink)}
.exp-filter-btn.active.collaboration{background:var(--cat-collaboration);border-color:var(--cat-collaboration-ink);color:var(--cat-collaboration-ink)}
.exp-filter-btn.active.impact{background:var(--cat-impact);border-color:var(--cat-impact-ink);color:var(--cat-impact-ink)}
.exp-filter-btn.active.strategy{background:var(--cat-strategy);border-color:var(--cat-strategy-ink);color:var(--cat-strategy-ink)}
.exp-filter-btn.active.leadership{background:var(--cat-leadership);border-color:var(--cat-leadership-ink);color:var(--cat-leadership-ink)}
.exp-filter-btn.active.developing{background:var(--lvl-developing);border-color:var(--lvl-ink);color:var(--lvl-ink)}
.exp-filter-btn.active.proficient{background:var(--lvl-proficient);border-color:var(--lvl-ink);color:var(--lvl-ink)}
.exp-filter-btn.active.expert{background:var(--lvl-expert);border-color:var(--lvl-ink);color:var(--lvl-ink)}

.self-eval-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 640px) {
  .self-eval-modes { grid-template-columns: 1fr; }
}
.self-eval-mode {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  border: 1px solid var(--cb-border);
  background: transparent;
  color: var(--cb-text);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}
.self-eval-mode:hover { background: var(--cb-subtle-bg); }
.self-eval-mode.active {
  border-color: var(--cb-accent);
  background: var(--cb-accent-soft);
}
.self-eval-mode-title { font-weight: 600; font-size: 14px; }
.self-eval-mode.active .self-eval-mode-title { color: var(--cb-accent); }
.self-eval-mode-desc { font-size: 12px; color: var(--cb-muted); line-height: 1.35; }

.exp-section {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.exp-section:has(.exp-right:empty) {
  grid-template-columns: 1fr;
}
.exp-left {
  background: var(--cb-subtle-bg);
  border: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  border-radius: 10px;
  padding: 10px;
  position: sticky;
  top: 8px;
  align-self: start;
}
.exp-role { font-weight: 700; color: var(--cb-text); }
.exp-affiliation { color: var(--cb-text); margin-top: 2px; }
.exp-period { color: var(--cb-muted); font-size: 12px; margin-top: 4px; }
.edu-summary-body { margin-top: 8px; font-size: 13px; color: var(--cb-text); line-height: 1.5; }
.exp-group-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.exp-add-item-btn,
.exp-edit-group-btn,
.exp-delete-group-btn {
  padding: 5px 8px;
  font-size: 11px;
  border-radius: 8px;
}
.exp-right .card { margin-bottom: 10px; }
.exp-right .card:last-child { margin-bottom: 0; }
.skills-shell {
  display: grid;
  gap: 12px;
}
.skills-toolbar {
  padding: 10px 12px;
  background: var(--cb-panel-bg);
  box-shadow: none;
}
.skills-toolbar .exp-filters {
  margin-bottom: 0;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.skills-toolbar .exp-filter-list {
  flex: 1 1 320px;
}
.skills-toolbar .filter-status {
  flex: 0 0 auto;
}
.skills-sections {
  display: grid;
  gap: 12px;
}
.skills-group {
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--cb-border) 80%, transparent);
}
.skills-group:first-child {
  padding-top: 0;
  border-top: 0;
}
.skills-group-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 10px;
}
.skills-group-head h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.skills-group-count {
  color: var(--cb-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 8px;
  align-items: stretch;
}
.skill-grid-item {
  display: flex;
  min-width: 0;
}
.skill-grid-item.full {
  grid-column: 1 / -1;
}
.skill-card {
  --skill-accent: #44607d;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--cb-border) 70%, var(--skill-accent) 12%);
  border-radius: 8px;
  background: var(--cb-panel-bg);
  box-shadow: none;
  transition: border-color 120ms ease;
}
.skill-card:hover {
  border-color: color-mix(in srgb, var(--cb-border) 40%, var(--skill-accent) 25%);
}
.skill-card.level-developing { --skill-accent: #5f7488; }
.skill-card.level-proficient { --skill-accent: #44607d; }
.skill-card.level-expert { --skill-accent: #2e4258; }
.skill-card-top,
.skill-card-edit-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.skill-card-heading {
  min-width: 0;
  display: block;
}
.skill-card-title {
  display: block;
  font-size: 14px;
  line-height: 1.25;
  color: var(--cb-text);
  word-break: break-word;
}
.skill-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.inline-link-btn.skill-card-evidence-link {
  font-size: 12px;
  color: var(--cb-muted);
  text-decoration: none;
}
.inline-link-btn.skill-card-evidence-link:hover {
  color: var(--cb-text);
  text-decoration: underline;
}
.skill-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.skill-card .btn.icon {
  padding: 4px 7px;
  font-size: 11px;
  border-radius: 8px;
}
.skill-card-empty {
  color: var(--cb-muted);
  font-size: 12px;
  line-height: 1.35;
}
.skill-card.inline-form {
  box-shadow: none;
}
.skill-card-edit-label {
  margin: 0 0 4px;
  color: var(--cb-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skill-level-badge {
  display: inline-block;
  flex-shrink: 0;
  margin-left: 0;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--lvl-ink);
}
.skill-level-badge.level-developing { background: var(--lvl-developing); }
.skill-level-badge.level-proficient { background: var(--lvl-proficient); }
.skill-level-badge.level-expert { background: var(--lvl-expert); }
.exp-date-inline {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}
.exp-date-inline.end-only { grid-template-columns: 1fr auto; }
.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--cb-text);
}
.inline-check input { width: 14px; height: 14px; }
.inline-link-btn {
  border: 0;
  background: transparent;
  color: var(--cb-accent);
  padding: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  font-size: 13px;
}
.inline-link-btn.title-link {
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: 700;
  text-decoration: none;
  line-height: inherit;
}
.inline-link-btn.title-link:hover {
  color: inherit;
  text-decoration: underline;
}
.inline-link-btn.title-link .link-hint {
  color: var(--cb-muted);
  font-size: 12px;
  font-weight: 500;
}
.evidence-header h3 { margin: 0 0 2px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.inline-form select, .modal-form select {
  background: var(--cb-input-bg);
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  padding: 9px 10px;
  outline: none;
  color: var(--cb-text);
}
.inline-form select:focus, .modal-form select:focus {
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-accent) 22%, transparent);
}
.month-year-control {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.month-year-value {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
/* --- Month/Year Picker: Trigger Button --- */
.month-year-trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: var(--cb-input-bg);
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--cb-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  min-height: 36px;
  cursor: pointer;
  transition: border-color 100ms ease, box-shadow 100ms ease;
}
.month-year-trigger:hover {
  border-color: color-mix(in srgb, var(--cb-accent) 50%, var(--cb-border));
}
.month-year-trigger.picker-open {
  border-radius: 8px 8px 0 0;
  border-color: var(--cb-accent);
  border-bottom-color: color-mix(in srgb, var(--cb-border) 30%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cb-accent) 14%, transparent);
  z-index: 890;
  position: relative;
}
.month-year-trigger.picker-open .month-year-trigger-chevron {
  transform: rotate(-135deg) translateY(-1px);
}
.month-year-trigger:focus {
  outline: none;
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cb-accent) 14%, transparent);
}
.month-year-trigger[data-empty="1"] .month-year-trigger-text {
  color: var(--cb-muted);
  font-weight: 400;
}
.month-year-trigger:disabled {
  background: color-mix(in srgb, var(--cb-subtle-bg) 86%, white);
  color: var(--cb-muted);
  cursor: not-allowed;
}
.month-year-trigger:disabled .month-year-trigger-chevron {
  border-color: var(--cb-muted);
  opacity: 0.55;
}
.month-year-trigger-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.month-year-trigger-chevron {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--cb-muted);
  border-bottom: 1.5px solid var(--cb-muted);
  transform: rotate(45deg) translateY(-2px);
  flex: 0 0 auto;
  transition: transform 150ms ease;
}

/* --- Month/Year Picker: Calendar-style popover --- */
.cb-month-year-popover {
  position: fixed;
  z-index: 1300;
  background: var(--cb-input-bg);
  color: var(--cb-text);
  border: 1px solid var(--cb-accent);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(41, 37, 36, 0.12), 0 1px 4px rgba(41, 37, 36, 0.06);
  padding: 8px;
  min-width: 240px;
  user-select: none;
}
.cb-month-year-popover .cb-month-year-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--cb-border) 50%, transparent);
  margin-bottom: 8px;
}
.cb-month-year-popover .cb-year-label {
  font-weight: 600;
  font-size: 14px;
  flex: 1 1 auto;
  text-align: center;
}
.cb-month-year-popover .cb-year-nav {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  background: transparent;
  color: var(--cb-text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 100ms ease, border-color 100ms ease;
}
.cb-month-year-popover .cb-year-nav:hover {
  background: color-mix(in srgb, var(--cb-accent) 8%, transparent);
  border-color: var(--cb-accent);
}
.cb-month-year-popover .cb-year-nav:focus-visible {
  outline: 2px solid var(--cb-accent);
  outline-offset: 1px;
}
.cb-month-year-popover .cb-month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.cb-month-year-popover .cb-month-cell {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--cb-text);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 0;
  cursor: pointer;
  text-align: center;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}
.cb-month-year-popover .cb-month-cell:hover {
  background: color-mix(in srgb, var(--cb-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--cb-accent) 40%, transparent);
}
.cb-month-year-popover .cb-month-cell.is-selected {
  background: var(--cb-accent);
  color: #fff;
  border-color: var(--cb-accent);
}
.cb-month-year-popover .cb-month-cell:focus-visible {
  outline: 2px solid var(--cb-accent);
  outline-offset: 1px;
}

@media (max-width: 900px) {
  .month-year-trigger {
    min-height: 44px;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 10px;
  }
  .month-year-trigger.picker-open {
    border-radius: 10px;
    border-bottom-color: var(--cb-accent);
  }
  .cb-month-year-popover {
    min-width: 280px;
    padding: 10px;
  }
  .cb-month-year-popover .cb-month-cell {
    padding: 12px 0;
    font-size: 14px;
  }
  .cb-month-year-popover .cb-year-nav {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}
.inline-form select[multiple], .modal-form select[multiple] {
  min-height: 130px;
  background: var(--cb-input-bg);
}
.inline-form option, .modal-form option { padding: 4px 6px; }
.multi-select { position: relative; }
.multi-select.open { z-index: 70; }
.multi-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--cb-border);
  background: var(--cb-input-bg);
  color: var(--cb-text);
  border-radius: 12px;
  padding: 9px 10px;
}
.multi-trigger .caret { color: var(--cb-muted); font-size: 12px; }
.multi-trigger:focus {
  outline: none;
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-accent) 22%, transparent);
}
.multi-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--cb-panel-bg);
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(41, 37, 36, 0.12);
  padding: 6px;
  z-index: 120;
}
.multi-menu.hidden { display: none; }
.multi-option {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.multi-option:hover { background: var(--cb-subtle-bg); }
.multi-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.multi-option .checkmark {
  width: 16px;
  font-size: 14px;
  color: var(--cb-accent);
  opacity: 0;
}
.multi-option input:checked + .checkmark { opacity: 1; }
.multi-option .option-text { font-size: 13px; color: var(--cb-text); }
.evidence-select-with-group {
  display: grid;
  gap: 8px;
}
.evidence-filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.evidence-filter-row select {
  width: 100%;
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
}
.evidence-filter-row select:disabled {
  background: color-mix(in srgb, var(--cb-subtle-bg) 86%, white);
  color: var(--cb-muted);
  cursor: not-allowed;
}
.composer {
  position: fixed;
  /* Float above page content (e.g. the summary timeline dots/rail sit in their
     own stacking contexts) but stay below modal/blocking overlays (1200+). */
  z-index: 1000;
  right: 16px;
  bottom: var(--composer-bottom, 16px);
  width: min(420px, calc(100vw - 34px));
  height: min(520px, calc(100vh - 40px));
  min-width: 300px;
  min-height: 200px;
  max-width: calc(100vw - 12px);
  max-height: calc(100vh - 24px);
  background: var(--cb-panel-bg);
  border: 1px solid color-mix(in srgb, var(--cb-border) 70%, transparent);
  border-radius: 14px;
  box-shadow:
    0 1px 0 0 color-mix(in srgb, white 60%, transparent) inset,
    0 18px 40px -12px color-mix(in srgb, var(--cb-accent) 18%, rgba(41, 37, 36, 0.18)),
    0 6px 14px -6px rgba(41, 37, 36, 0.10);
  padding: 10px 14px 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 180ms ease;
}
.composer:hover,
.composer[data-affordance="active"] {
  box-shadow:
    0 1px 0 0 color-mix(in srgb, white 70%, transparent) inset,
    0 22px 48px -14px color-mix(in srgb, var(--cb-accent) 26%, rgba(41, 37, 36, 0.22)),
    0 8px 16px -6px rgba(41, 37, 36, 0.12);
}

/* --- Resize handles: 4 edges + 4 corners --- */
.composer-resize-handle {
  position: absolute;
  z-index: 2;
}
/* Edges: thick hit area, hairline indicator */
.composer-resize-handle--t,
.composer-resize-handle--b {
  left: 18px;
  right: 18px;
  height: 8px;
  cursor: ns-resize;
}
.composer-resize-handle--t { top: -3px; }
.composer-resize-handle--b { bottom: -3px; }
.composer-resize-handle--l,
.composer-resize-handle--r {
  top: 18px;
  bottom: 18px;
  width: 8px;
  cursor: ew-resize;
}
.composer-resize-handle--l { left: -3px; }
.composer-resize-handle--r { right: -3px; }

/* Mid-edge "grip" — 3 small dots, fade in when the composer is hovered.
   Pure affordance hint; the active resize stroke is drawn by .composer::before
   so it follows the rounded corner curvature. */
.composer-resize-handle--t::after,
.composer-resize-handle--b::after,
.composer-resize-handle--l::after,
.composer-resize-handle--r::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease, background-position 160ms ease;
  background-image: radial-gradient(circle, var(--cb-muted) 0 35%, transparent 36%);
  background-repeat: repeat-x;
  background-size: 8px 2px;
}
.composer-resize-handle--t::after,
.composer-resize-handle--b::after {
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
}
.composer-resize-handle--t::after { top: 4px; }
.composer-resize-handle--b::after { bottom: 4px; }
.composer-resize-handle--l::after,
.composer-resize-handle--r::after {
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 28px;
  background-size: 2px 8px;
  background-repeat: repeat-y;
}
.composer-resize-handle--l::after { left: 4px; }
.composer-resize-handle--r::after { right: 4px; }
.composer:hover .composer-resize-handle::after { opacity: 0.55; }
.composer-resize-handle:hover::after {
  opacity: 1;
  background-image: radial-gradient(circle, var(--cb-accent) 0 40%, transparent 41%);
}

/* Curved edge stroke — drawn on the composer itself so border-radius is
   inherited and the stroke naturally follows the rounded corners. */
.composer::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 0 solid var(--cb-accent);
  transition: border-width 160ms ease, opacity 160ms ease;
  opacity: 0.85;
  z-index: 1;
}
.composer:has(.composer-resize-handle--t:hover)::before { border-top-width: 2px; }
.composer:has(.composer-resize-handle--b:hover)::before { border-bottom-width: 2px; }
.composer:has(.composer-resize-handle--l:hover)::before { border-left-width: 2px; }
.composer:has(.composer-resize-handle--r:hover)::before { border-right-width: 2px; }
.composer:has(.composer-resize-handle--tl:hover)::before { border-top-width: 2px; border-left-width: 2px; }
.composer:has(.composer-resize-handle--tr:hover)::before { border-top-width: 2px; border-right-width: 2px; }
.composer:has(.composer-resize-handle--bl:hover)::before { border-bottom-width: 2px; border-left-width: 2px; }
.composer:has(.composer-resize-handle--br:hover)::before { border-bottom-width: 2px; border-right-width: 2px; }
/* Active drag locks the highlight on all edges so the user gets clear
   feedback even if their cursor briefly leaves the handle. */
.composer[data-affordance="active"]::before {
  border-width: 2px;
  opacity: 1;
}
/* Corners: small hit zones with tick marks */
.composer-resize-handle--tl,
.composer-resize-handle--tr,
.composer-resize-handle--bl,
.composer-resize-handle--br {
  width: 16px;
  height: 16px;
  z-index: 3;
}
.composer-resize-handle--tl { top: -2px; left: -2px; cursor: nwse-resize; }
.composer-resize-handle--tr { top: -2px; right: -2px; cursor: nesw-resize; }
.composer-resize-handle--bl { bottom: -2px; left: -2px; cursor: nesw-resize; }
.composer-resize-handle--br { bottom: -2px; right: -2px; cursor: nwse-resize; }
/* Corner caliper: a quarter-arc that mirrors the composer's corner radius
   instead of a flat L-shape. Renders as a partial border on a rounded box. */
.composer-resize-handle--tl::before,
.composer-resize-handle--tr::before,
.composer-resize-handle--bl::before,
.composer-resize-handle--br::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 0 solid var(--cb-muted);
  opacity: 0;
  transition: opacity 160ms ease, border-color 160ms ease;
}
.composer:hover .composer-resize-handle--tl::before,
.composer:hover .composer-resize-handle--tr::before,
.composer:hover .composer-resize-handle--bl::before,
.composer:hover .composer-resize-handle--br::before {
  opacity: 0.6;
}
.composer-resize-handle--tl:hover::before,
.composer-resize-handle--tr:hover::before,
.composer-resize-handle--bl:hover::before,
.composer-resize-handle--br:hover::before {
  opacity: 1;
  border-color: var(--cb-accent);
}
.composer-resize-handle--tl::before {
  top: 4px; left: 4px;
  border-top-width: 1.5px; border-left-width: 1.5px;
  border-radius: 10px 0 0 0;
}
.composer-resize-handle--tr::before {
  top: 4px; right: 4px;
  border-top-width: 1.5px; border-right-width: 1.5px;
  border-radius: 0 10px 0 0;
}
.composer-resize-handle--bl::before {
  bottom: 4px; left: 4px;
  border-bottom-width: 1.5px; border-left-width: 1.5px;
  border-radius: 0 0 0 10px;
}
.composer-resize-handle--br::before {
  bottom: 4px; right: 4px;
  border-bottom-width: 1.5px; border-right-width: 1.5px;
  border-radius: 0 0 10px 0;
}

/* --- Drag bar (header) --- */
.composer-drag-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: -2px -4px 8px;
  padding: 6px 8px 8px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  flex-shrink: 0;
  border-radius: 10px;
  transition: background 140ms ease;
}
.composer-drag-bar:hover {
  background: color-mix(in srgb, var(--cb-accent) 5%, transparent);
}
.composer-drag-bar:active { cursor: grabbing; }
.composer-min-btn {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--cb-border) 80%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--cb-panel-bg) 94%, black 6%);
  color: var(--cb-muted);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.composer-min-icon {
  display: block;
  width: 10px;
  height: 1.5px;
  background: currentColor;
  border-radius: 999px;
}
.composer-min-btn:hover {
  color: var(--cb-text);
  border-color: var(--cb-accent);
  background: color-mix(in srgb, var(--cb-panel-bg) 96%, var(--cb-accent) 4%);
}
.composer-restore-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  background: var(--cb-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(41, 37, 36, 0.14);
  z-index: 1000;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.composer-restore-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 28px rgba(41, 37, 36, 0.2);
}

/* --- Knowledge-graph "career map" floating panel (sibling of the composer) --- */
.kg-panel {
  position: fixed;
  /* Same layer as the chat window: above page content, below modal overlays. */
  z-index: 1000;
  left: 16px;
  bottom: 16px;
  width: min(380px, calc(100vw - 32px));
  height: min(320px, calc(100vh - 40px));
  min-width: 280px;
  min-height: 220px;
  max-width: calc(100vw - 12px);
  max-height: calc(100vh - 24px);
  background: var(--cb-panel-bg);
  border: 1px solid color-mix(in srgb, var(--cb-border) 70%, transparent);
  border-radius: 14px;
  box-shadow:
    0 18px 40px -12px color-mix(in srgb, var(--cb-accent) 18%, rgba(41, 37, 36, 0.18)),
    0 6px 14px -6px rgba(41, 37, 36, 0.10);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Expanded fills the viewport (minus a margin); inline drag/resize sizing is
   cleared in JS so this wins. */
.kg-panel[data-size="expanded"] {
  left: 16px;
  top: 16px;
  right: 16px;
  bottom: 16px;
  width: auto;
  height: auto;
}
.kg-drag-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  cursor: grab;
  border-bottom: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  touch-action: none;
}
.kg-drag-bar:active { cursor: grabbing; }
.kg-title {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 15px;
  color: var(--cb-text);
}
.kg-controls { display: inline-flex; gap: 6px; }
.kg-ctrl-btn {
  border: 1px solid var(--cb-border);
  background: transparent;
  color: var(--cb-muted);
  border-radius: 7px;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.6;
  cursor: pointer;
}
.kg-ctrl-btn:hover {
  color: var(--cb-text);
  border-color: color-mix(in srgb, var(--cb-accent) 40%, var(--cb-border));
}
.kg-ctrl-min { font-size: 15px; padding: 0 9px; }
.kg-body { position: relative; flex: 1; min-height: 0; }
.kg-canvas { position: absolute; inset: 0; }
.kg-legend {
  position: absolute;
  left: 10px;
  bottom: 8px;
  margin: 0;
  font-size: 10px;
  color: var(--cb-muted);
  background: color-mix(in srgb, var(--cb-panel-bg) 82%, transparent);
  padding: 2px 6px;
  border-radius: 6px;
  pointer-events: none;
}
/* Color legend: category swatches, top-left of the canvas. */
.kg-colorlegend {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  max-width: calc(100% - 20px);
  padding: 4px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cb-panel-bg) 82%, transparent);
  pointer-events: none;
}
.kg-colorlegend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--cb-muted);
  white-space: nowrap;
}
.kg-colorlegend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.kg-restore-btn {
  position: fixed;
  left: 20px;
  bottom: 20px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  background: var(--cb-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(41, 37, 36, 0.14);
  z-index: 1000;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.kg-restore-btn:hover { transform: scale(1.05); }
.kg-tooltip {
  position: fixed;
  z-index: 1100;
  max-width: 240px;
  transform: translate(-50%, -100%);
  background: var(--cb-text);
  color: var(--cb-panel-bg);
  font-size: 11px;
  line-height: 1.35;
  padding: 6px 8px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.kg-tooltip.visible { opacity: 0.96; }
@media (prefers-reduced-motion: reduce) {
  .kg-restore-btn, .kg-tooltip { transition: none; }
}

/* Interactive hover card: a nav link + optional summary, just below the cursor. */
.kg-hovercard {
  position: fixed;
  z-index: 1100;
  width: 260px;
  max-height: 220px;
  overflow: auto;
  background: var(--cb-panel-bg);
  color: var(--cb-text);
  border: 1px solid color-mix(in srgb, var(--cb-border) 70%, transparent);
  border-radius: 10px;
  box-shadow: 0 10px 28px -8px rgba(41, 37, 36, 0.35);
  padding: 8px;
}
.kg-hovercard-link {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--cb-accent);
  font-family: var(--cb-font-body, inherit);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.kg-hovercard-link:hover { background: var(--cb-accent-soft); }
.kg-hovercard-summary {
  margin-top: 4px;
  padding: 4px 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--cb-muted);
  border-top: 1px solid color-mix(in srgb, var(--cb-border) 50%, transparent);
}

/* First-load overlay — covers the app until the initial fetch/render finishes. */
#appLoadingOverlay {
  position: fixed;
  inset: 0;
  z-index: 3000; /* above modal/blocking overlays too, since this is boot-time */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cb-panel-bg);
  transition: opacity 300ms ease;
}
#appLoadingOverlay.done {
  opacity: 0;
  pointer-events: none;
}
.app-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.app-loading-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--cb-border) 55%, transparent);
  border-top-color: var(--cb-accent);
  animation: app-loading-spin 0.8s linear infinite;
}
@keyframes app-loading-spin { to { transform: rotate(360deg); } }
.app-loading-brand {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 22px;
  color: var(--cb-text);
}
.app-loading-note {
  font-size: 12px;
  color: var(--cb-muted);
}
@media (prefers-reduced-motion: reduce) {
  .app-loading-spinner { animation: none; }
  #appLoadingOverlay { transition: none; }
}
.composer-drag-rail {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  height: 8px;
  opacity: 0.55;
  transition: opacity 140ms ease;
}
.composer-drag-bar:hover .composer-drag-rail { opacity: 0.95; }
.composer-drag-dot {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--cb-muted);
  transition: background 140ms ease;
}
.composer-drag-bar:hover .composer-drag-dot {
  background: color-mix(in srgb, var(--cb-accent) 70%, var(--cb-muted));
}
.composer-drag-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cb-muted);
}
.composer-drag-pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cb-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--cb-accent) 40%, transparent);
  animation: composerPulse 2.4s ease-in-out infinite;
}
@keyframes composerPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cb-accent) 50%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cb-accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .composer-drag-pulse { animation: none; }
}
.composer-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.chat-thread {
  min-height: 80px;
  flex: 1 1 0;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 0;
  transition: height 140ms ease;
  background: var(--cb-subtle-bg);
}
.msg {
  display: flex;
  font-size: 13px;
  margin-bottom: 12px;
}
.msg:last-child { margin-bottom: 0; }
.msg.user {
  justify-content: flex-end;
}
.msg.user .msg-bubble {
  background: var(--cb-accent-soft);
  border-color: color-mix(in srgb, var(--cb-accent) 18%, transparent);
}
.msg-bubble {
  max-width: min(78ch, 82%);
  border: 1px solid color-mix(in srgb, var(--cb-border) 70%, transparent);
  border-radius: 14px;
  padding: 10px 14px 11px;
  background: var(--cb-panel-bg);
  box-shadow: none;
}
.msg-meta {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cb-muted);
}
.msg-text {
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--cb-text);
}
.typing { letter-spacing: 2px; animation: pulse 1s steps(6,end) infinite; }
.chat-nav-btn {
  display: inline-block;
  margin-top: 6px;
  margin-right: 6px;
  padding: 5px 12px;
  font-size: 0.8rem;
  border: 1px solid var(--cb-border, #ccc);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.chat-nav-btn:hover { background: var(--cb-hover, rgba(0,0,0,.05)); }
@keyframes pulse { 0%{opacity:.25}50%{opacity:1}100%{opacity:.25} }
.composer-input-shell {
  display: grid;
  gap: 10px;
}
.composer-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.composer-input-row textarea { flex: 1 1 0; min-width: 0; }
.composer-send-btn {
  flex: 0 0 auto;
  min-height: 40px;
  border-radius: 999px;
  padding-inline: 16px;
}
.visually-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Informational, not a hazard notice: importing is the point of the product,
   so this reads as muted body copy rather than an alert box. */
.resume-import-note {
  margin: 8px 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--cb-muted);
}
.resume-import-note strong { color: var(--cb-text); }
.resume-import-btn { cursor: pointer; }
.publish-nudge { border-color: color-mix(in srgb, var(--cb-accent) 35%, transparent); }
.publish-nudge p { margin: 8px 0; }
.publish-nudge-actions { margin-top: 12px; }
.chat-char-count {
  font-size: 12px;
  color: var(--cb-muted);
  padding-left: 2px;
}
.chat-char-count.chat-char-count--warn { color: var(--cb-accent); }
.chat-char-count.chat-char-count--over { color: var(--cb-danger, #dc2626); }
.chat-char-hint {
  font-size: 12px;
  color: var(--cb-muted);
  margin: 4px 0 0;
  padding-left: 2px;
  line-height: 1.35;
}
.composer textarea,
textarea {
  width: 100%;
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
  min-height: 68px;
  line-height: 1.5;
  font-family: var(--cb-font-body);
  font-size: 13px;
}
.composer textarea {
  resize: none;
  overflow-y: hidden;
}
.composer textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--cb-accent) 34%, var(--cb-border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cb-accent) 12%, transparent);
}
.task-queue-badge-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.task-queue-badge-wrap.hidden {
  display: none;
}
.task-queue-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--cb-muted);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cb-panel-bg, #f1f5f9);
}
.task-queue-cancel {
  font-size: 12px;
}
.modal-skip-btn {
  margin-right: auto;
}
#modalPolishBtn {
  margin-right: auto;
}
.modal-overlay { position: fixed; inset: 0; background: rgba(41, 37, 36, 0.4); display: flex; align-items: center; justify-content: center; z-index: 1200; backdrop-filter: blur(2px); }
.modal-overlay.hidden { display: none; }
.modal-card { width: min(760px, calc(100vw - 24px)); background: var(--cb-panel-bg); border: 1px solid color-mix(in srgb, var(--cb-border) 70%, transparent); border-radius: 12px; padding: 16px; box-shadow: 0 24px 48px rgba(41, 37, 36, 0.18); }
.saving-overlay {
  z-index: 2600;
  background: rgba(41, 37, 36, 0.18);
  backdrop-filter: blur(2px);
  /* Stack the pill and the (optional) patience hint, centered. */
  flex-direction: column;
  gap: 12px;
}
.saving-hint {
  max-width: min(320px, calc(100vw - 48px));
  text-align: center;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cb-muted);
}
.saving-hint.hidden { display: none; }
.saving-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 40px;
  border: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  background: var(--cb-panel-bg);
  box-shadow: 0 4px 20px rgba(41, 37, 36, 0.10);
  color: var(--cb-text);
}
.saving-card:focus {
  outline: none;
}
.saving-cancel-btn {
  margin-left: 4px;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 999px;
}
.saving-cancel-btn.hidden { display: none; }
.saving-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--cb-muted) 30%, transparent);
  border-top-color: var(--cb-accent);
  border-radius: 50%;
  animation: saving-spin 0.7s linear infinite;
}
.saving-label {
  font-size: 14px;
  font-family: var(--cb-font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cb-text);
}
.saving-overlay-open {
  overflow: hidden;
}
.auth-screen-mode .page-shell,
.auth-screen-mode .composer {
  display: none !important;
}
#devLoginOverlay.auth-screen-mode {
  background: var(--cb-body-bg);
  z-index: 2400;
}
#devLoginOverlay.auth-screen-mode .modal-card {
  border-radius: 14px;
  box-shadow: var(--cb-shadow);
}
.dev-login-card { width: min(520px, calc(100vw - 24px)); }
.dev-login-controls { display: grid; gap: 10px; margin-top: 10px; }
.dev-login-select { width: 100%; border: 1px solid var(--cb-border); border-radius: 8px; padding: 8px; background: var(--cb-input-bg); color: var(--cb-text); }
.dev-login-login-actions { display: flex; gap: 8px; }
.dev-login-login-actions .btn { flex: 1 1 0; }
.dev-login-divider { margin: 12px 0 10px; position: relative; text-align: center; color: var(--cb-muted); font-size: 12px; }
.dev-login-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--cb-border); }
.dev-login-divider span { position: relative; padding: 0 8px; background: var(--cb-panel-bg); }
.dev-login-create { display: grid; gap: 10px; }
.dev-login-create input {
  width: 100%;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 8px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
}
.dev-login-error { margin-top: 10px; color: #b91c1c; font-size: 13px; line-height: 1.4; }
.dev-login-switch { width: 100%; margin: 10px 0 2px; }
.firebase-auth-panel {
  display: grid;
  gap: 12px;
}
.firebase-auth-view {
  display: grid;
  gap: 12px;
}
.firebase-auth-view.hidden {
  display: none;
}
.firebase-auth-header {
  display: grid;
  gap: 6px;
}
.firebase-auth-header h4 {
  margin: 0;
  font-size: 22px;
  font-family: var(--cb-font-display);
  font-weight: 400;
}
.firebase-google-btn {
  width: 100%;
  justify-self: stretch;
  font-weight: 500;
  min-height: 42px;
  background: var(--cb-panel-bg);
  border-color: var(--cb-border);
  color: var(--cb-text);
}
.firebase-auth-fields {
  display: grid;
  gap: 10px;
}
.firebase-auth-field {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--cb-muted);
}
.firebase-auth-field input {
  width: 100%;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
  min-height: 40px;
  font-family: var(--cb-font-body);
  font-size: 13px;
}
.terms-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--cb-muted);
  line-height: 1.45;
  cursor: pointer;
}
.terms-consent input[type="checkbox"] {
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--cb-accent);
}
.firebase-auth-actions {
  display: flex;
  gap: 8px;
}
.firebase-auth-actions .btn {
  flex: 1 1 0;
}
.firebase-password-hint {
  font-size: 12px;
  color: var(--cb-muted);
  margin-top: -2px;
}
.firebase-forgot-password-row {
  text-align: right;
  margin-top: -4px;
}
.btn-link {
  background: none;
  border: none;
  color: var(--cb-accent, #3b82f6);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  text-decoration: underline;
}
.btn-link:hover { opacity: 0.8; }
.firebase-auth-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.admin-settings-card {
  max-width: 780px;
}
/* Per-function hint: the ⓘ dot reveals its description on hover, focus, or
   click (:focus-within covers keyboard + click). Replaces the native `title`
   tooltip, which only appeared after a ~1s stationary hover and never on click. */
.admin-hint-wrap { position: relative; display: inline-flex; align-items: center; }
.admin-hint-dot {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 400;
  line-height: 1;
  color: var(--cb-muted);
  opacity: 0.7;
  cursor: help;
}
.admin-hint-dot:hover { opacity: 1; }
.admin-hint-pop {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 60;
  width: 300px;
  max-width: 72vw;
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  white-space: normal;
  color: var(--cb-text);
  background: var(--cb-panel-bg);
  border: 1px solid color-mix(in srgb, var(--cb-border) 70%, transparent);
  border-radius: 8px;
  box-shadow: 0 10px 28px -8px rgba(41, 37, 36, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 100ms ease;
}
.admin-hint-wrap:hover .admin-hint-pop,
.admin-hint-wrap:focus-within .admin-hint-pop {
  opacity: 1;
  visibility: visible;
}
.admin-setting-toggle {
  margin-top: 12px;
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  padding: 12px;
  background: var(--cb-subtle-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.admin-setting-text {
  display: grid;
  gap: 4px;
}
.admin-setting-text strong {
  font-size: 14px;
  color: var(--cb-text);
}
.admin-setting-text span {
  font-size: 12px;
  color: var(--cb-muted);
}
/* Toggle switch: hide the native checkbox, render .admin-toggle-track as a slider. */
.admin-setting-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.admin-toggle-track {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--cb-border);
  transition: background 0.15s ease;
  cursor: pointer;
}
.admin-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease;
}
.admin-setting-toggle input[type="checkbox"]:checked + .admin-toggle-track {
  background: var(--cb-accent);
}
.admin-setting-toggle input[type="checkbox"]:checked + .admin-toggle-track::after {
  transform: translateX(18px);
}
.admin-setting-toggle input[type="checkbox"]:focus-visible + .admin-toggle-track {
  outline: 2px solid var(--cb-accent);
  outline-offset: 2px;
}
.admin-setting-field {
  margin-top: 12px;
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  padding: 12px;
  background: var(--cb-subtle-bg);
}
.admin-setting-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-text);
}
.admin-setting-field .admin-setting-hint {
  font-size: 12px;
  color: var(--cb-muted);
}
.admin-setting-field .admin-setting-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.admin-users-toolbar {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}
.admin-users-toolbar input {
  width: 100%;
  min-height: 38px;
}
.admin-users-error {
  margin-top: 10px;
  color: #b91c1c;
  font-size: 13px;
}
.admin-users-table-wrap {
  margin-top: 12px;
  max-height: min(56vh, 520px);
  overflow: auto;
  border: 1px solid var(--cb-border);
  border-radius: 10px;
}
.admin-users-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  /* Grouped columns + sticky identity: keep rows single-line, let the wrap scroll */
  min-width: 1040px;
  background: var(--cb-panel-bg);
  font-size: 13px;
}
.admin-users-table thead th.admin-sortable {
  padding: 0;
}
/* Group-label row scrolls away; the sortable sub-row (below) is what sticks. */
.admin-users-table thead tr.admin-grp th {
  position: static;
  top: auto;
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cb-muted);
  padding: 7px 12px;
  background: var(--cb-subtle-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
}
/* Sticky identity column (both header rows + body cells). */
.admin-users-table .admin-id-col,
.admin-users-table td.admin-id-cell {
  position: sticky;
  left: 0;
  background: var(--cb-panel-bg);
  box-shadow: 1px 0 0 var(--cb-border);
  min-width: 210px;
  max-width: 240px;
}
.admin-users-table thead tr.admin-grp th.admin-id-col {
  background: var(--cb-subtle-bg);
  z-index: 3;
}
.admin-users-table thead tr.admin-sub th.admin-id-col {
  z-index: 4; /* top-left corner: above both the sticky row and sticky column */
}
.admin-id-name { font-weight: 600; color: var(--cb-text); }
.admin-id-email {
  color: var(--cb-muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 216px;
}
.admin-uid {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--cb-muted);
  background: var(--cb-subtle-bg);
  border: 1px solid var(--cb-border);
  border-radius: 6px;
  padding: 1px 6px;
  cursor: pointer;
}
.admin-uid:hover { color: var(--cb-text); border-color: var(--cb-accent); }
.admin-uid:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 1px; }
.admin-uid--none { cursor: default; opacity: 0.7; }
.admin-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.admin-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.admin-status--active { color: color-mix(in srgb, var(--cb-accent) 70%, var(--cb-text)); }
.admin-status--disabled { color: var(--cb-danger); font-weight: 600; }
.admin-users-table .admin-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-sub { color: var(--cb-muted); font-size: 11px; }
.admin-sort-btn.is-active { color: var(--cb-text); font-weight: 700; }
.admin-sort-btn {
  all: unset;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.admin-sort-btn:hover {
  color: var(--cb-text);
}
.admin-sort-btn:focus-visible {
  outline: 2px solid var(--cb-accent);
  outline-offset: -2px;
}
.admin-users-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--cb-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--cb-border);
  background: var(--cb-subtle-bg);
}
.admin-users-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--cb-border);
  vertical-align: middle;
}
.admin-users-table tbody tr:last-child td {
  border-bottom: none;
}
.admin-users-empty {
  text-align: center;
  color: var(--cb-muted);
  font-size: 13px;
}
.admin-user-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* Inline editable controls in the packed admin user table. Native <select>s had
   no styling, so the tight columns squeezed them to a chevron-only box and hid
   the selected value. A min-width floor keeps the value visible (the table wrap
   scrolls horizontally, so widening is safe). */
select.admin-inline {
  min-width: 96px;
  padding: 5px 8px;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
  font-family: var(--cb-font-body);
  font-size: 13px;
  cursor: pointer;
}
select.admin-inline:disabled { opacity: 0.6; cursor: default; }
input.admin-inline {
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
  font-size: 13px;
  padding: 5px 6px;
}
/* Admin sections: tabbed shell (reuses .job-app-tabs), users toolbar, panels. */
.admin-shell { display: flex; flex-direction: column; }
.admin-panel { display: block; }
.admin-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}
.admin-users-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.admin-search { display: flex; gap: 8px; flex: 1 1 auto; min-width: 260px; }
.admin-search input[type="search"] {
  flex: 1 1 auto;
  border: 1px solid var(--cb-border);
  border-radius: 9px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
  font-family: var(--cb-font-body);
  font-size: 14px;
  padding: 8px 12px;
}
.admin-search input[type="search"]:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 1px; }
.admin-result-count { font-size: 12px; color: var(--cb-muted); white-space: nowrap; }
.admin-users-error {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--cb-danger);
  background: color-mix(in srgb, var(--cb-danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cb-danger) 30%, transparent);
}
.admin-users-empty {
  text-align: center;
  color: var(--cb-muted);
  font-size: 13px;
  line-height: 1.6;
  padding: 32px 24px;
}
.admin-users-table tbody tr:hover td { background: color-mix(in srgb, var(--cb-accent-soft) 45%, transparent); }
.admin-users-table tbody tr:hover td.admin-id-cell { background: color-mix(in srgb, var(--cb-accent-soft) 55%, var(--cb-panel-bg)); }
body[data-theme-mode="night"] .admin-users-table .admin-id-col,
body[data-theme-mode="night"] .admin-users-table td.admin-id-cell { background: var(--cb-input-bg); }
body[data-theme-mode="night"] .admin-users-table thead tr.admin-grp th,
body[data-theme-mode="night"] .admin-users-table thead tr.admin-grp th.admin-id-col { background: color-mix(in srgb, var(--cb-input-bg) 78%, black); }
.admin-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.admin-pill.role-admin {
  background: color-mix(in srgb, var(--cb-accent) 14%, transparent);
  color: var(--cb-accent);
}
.admin-pill.role-user {
  background: color-mix(in srgb, var(--cb-border) 45%, transparent);
  color: var(--cb-text);
}
.admin-pill.status-active {
  background: color-mix(in srgb, #22c55e 18%, transparent);
  color: #15803d;
}
.admin-pill.status-disabled {
  background: color-mix(in srgb, #ef4444 18%, transparent);
  color: #b91c1c;
}
.tool-modal-card { width: min(980px, calc(100vw - 24px)); }
.tool-modal-body { max-height: 72vh; overflow-y: auto; padding-right: 4px; background: var(--cb-panel-bg) !important; }
.ui-dialog {
  display: grid;
  gap: 12px;
  max-width: 680px;
}
.ui-dialog-message {
  font-size: 14px;
  line-height: 1.5;
  color: var(--cb-text);
}
.ui-dialog-danger .ui-dialog-message {
  color: #991b1b;
}
.ui-dialog-copy {
  width: 100%;
  min-height: 88px;
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  padding: 10px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}
.ui-dialog-copy-status {
  font-size: 12px;
  color: var(--cb-muted);
}
.ui-dialog-actions {
  justify-content: flex-end;
}
.account-delete-modal { display: grid; gap: 12px; max-width: 640px; }
.account-delete-banner {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--cb-danger) 40%, var(--cb-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--cb-danger) 9%, transparent);
}
.account-delete-banner strong { color: var(--cb-danger); }
.account-delete-banner span { font-size: 13px; color: var(--cb-text); }
.account-delete-instruction { font-size: 13px; color: var(--cb-muted); }
.account-delete-input {
  width: 100%;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
}
.account-delete-error { color: #b91c1c; font-size: 13px; min-height: 18px; }
.account-delete-actions { justify-content: flex-end; margin-top: 2px; }
.tools-grid { display: grid; gap: 12px; }
.tool-card h3 { margin-top: 0; margin-bottom: 8px; }
.tool-card textarea { min-height: 120px; }
.tool-card input {
  width: 100%;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 8px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
}
.tool-card select {
  width: 100%;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 8px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
}
.tool-card .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* --- Settings Page --- */
.settings-page {
  max-width: 640px;
  display: grid;
  gap: 0;
}
.settings-section {
  padding: 18px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--cb-border) 50%, transparent);
}
.settings-section:first-child { padding-top: 0; }
.settings-section:last-child { border-bottom: none; }
.settings-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cb-muted);
  margin-bottom: 10px;
}
.settings-identity {
  display: grid;
  gap: 2px;
}
.settings-identity-name {
  font-family: var(--cb-font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--cb-text);
}
.settings-identity-meta {
  font-size: 12px;
  color: var(--cb-muted);
}
.settings-form {
  display: grid;
  gap: 10px;
}
.settings-field {
  display: grid;
  gap: 4px;
}
.settings-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--cb-muted);
  letter-spacing: 0.01em;
}
.settings-field input {
  width: 100%;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
  font-family: var(--cb-font-body);
  font-size: 13px;
}
.settings-field input:focus {
  outline: none;
  border-color: var(--cb-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cb-accent) 14%, transparent);
}
.settings-field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.settings-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.settings-stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--cb-border) 50%, transparent);
  border-radius: 6px;
  background: var(--cb-subtle-bg);
}
.settings-stat-count {
  font-size: 15px;
  font-weight: 600;
  color: var(--cb-text);
  font-variant-numeric: tabular-nums;
}
.settings-stat-label {
  font-size: 11px;
  color: var(--cb-muted);
}
.settings-usage-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.settings-usage-item {
  display: grid;
  gap: 2px;
}
.settings-usage-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-text);
  font-variant-numeric: tabular-nums;
}
.settings-usage-label {
  font-size: 11px;
  color: var(--cb-muted);
}
.settings-danger-zone {
  padding-top: 20px;
}
.settings-danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--cb-danger) 25%, var(--cb-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--cb-danger) 3%, transparent);
}
.settings-danger-row + .settings-danger-row {
  margin-top: 8px;
}
.settings-danger-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--cb-text);
}
.settings-danger-desc {
  font-size: 12px;
  color: var(--cb-muted);
  margin-top: 2px;
}
@media (max-width: 900px) {
  .settings-field-pair { grid-template-columns: 1fr; }
  .settings-danger-row { flex-direction: column; align-items: flex-start; }
  .settings-danger-row .btn { width: 100%; }
}

/* Settings → Plan tab: status, rolling-cycle line, usage meter, action groups. */
.plan-status { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-name {
  font-family: var(--cb-font-display);
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--cb-text);
}
.plan-pill {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; border: 1px solid transparent;
  background: var(--cb-subtle-bg); color: var(--cb-muted);
}
.plan-pill.is-trial { background: var(--cb-accent-soft); color: var(--cb-accent-strong); border-color: color-mix(in srgb, var(--cb-accent) 28%, transparent); }
.plan-pill.is-paid { background: color-mix(in srgb, var(--cb-accent) 14%, transparent); color: var(--cb-accent-strong); border-color: color-mix(in srgb, var(--cb-accent) 30%, transparent); }
.plan-pill.is-free { background: var(--cb-subtle-bg); color: var(--cb-muted); border-color: color-mix(in srgb, var(--cb-border) 70%, transparent); }
.plan-pill.is-ended { background: color-mix(in srgb, var(--cb-danger) 10%, transparent); color: var(--cb-danger); border-color: color-mix(in srgb, var(--cb-danger) 32%, transparent); }
.plan-detail { font-size: 13px; color: var(--cb-muted); margin-top: 6px; }
.plan-cycle, .plan-visits { font-size: 12px; color: var(--cb-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.plan-meter { margin-top: 12px; }
.meter {
  height: 7px; border-radius: 999px; overflow: hidden;
  background: var(--cb-subtle-bg);
  border: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
}
.meter-fill {
  height: 100%; border-radius: inherit; background: var(--cb-accent);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.meter-fill.is-high { background: var(--cb-danger); }
.plan-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--cb-muted); font-variant-numeric: tabular-nums; }
.plan-legend-strong { color: var(--cb-text); font-weight: 600; }
.plan-actions { margin-top: 14px; display: grid; gap: 8px; }
.plan-action-row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .meter-fill { transition: none; } }

.loading-shell {
  display: grid;
  gap: 14px;
}
.loading-card {
  display: grid;
  gap: 10px;
  min-height: 140px;
}
.loading-line {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cb-border) 50%, transparent),
    color-mix(in srgb, var(--cb-subtle-bg) 90%, white 10%),
    color-mix(in srgb, var(--cb-border) 50%, transparent)
  );
  background-size: 220% 100%;
  animation: loading-shimmer 1.5s ease-in-out infinite;
}
.loading-line-title {
  width: 180px;
  height: 16px;
}
.mutation-status-bar {
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: var(--cb-text-muted);
  background: var(--cb-input-bg);
  border-radius: 8px;
  border-left: 3px solid var(--cb-primary);
}
.loading-line-wide {
  width: min(100%, 760px);
}
.loading-line-medium {
  width: min(72%, 520px);
}
.loading-line-short {
  width: min(48%, 320px);
}
@keyframes loading-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -20% 0; }
}
@keyframes saving-spin {
  to { transform: rotate(360deg); }
}
.tool-history-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.tool-history-section-head h3 { margin: 0 0 4px 0; }
.tool-history-list { display: grid; gap: 10px; }
.tool-history-card {
  border: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  background: var(--cb-subtle-bg);
}
.tool-history-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.tool-history-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.tool-history-toggle {
  text-align: left;
  width: fit-content;
}
.tool-history-subtitle {
  font-size: 13px;
  font-weight: 600;
}
.tool-history-meta {
  line-height: 1.5;
}
.tool-history-preview {
  margin-top: 8px;
  color: var(--cb-muted);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.tool-history-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.primary-badge {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--cb-accent);
}
.tool-history-body {
  margin-top: 10px;
}
.tool-history-pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.55;
}
.tool-history-question-label {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cb-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tool-history-empty {
  color: var(--cb-muted);
  font-size: 13px;
}
.tool-history-editor {
  display: grid;
  gap: 12px;
}
.tool-history-editor-textarea {
  width: 100%;
  min-height: 220px;
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  padding: 10px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
}
/* Career board detail fields: revealed under the opt-in toggle once it is on. */
.career-board-fields {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 12px;
  margin: 10px 0 2px;
  padding: 12px;
  background: var(--cb-subtle-bg);
  border: 1px solid var(--cb-border);
  border-radius: 10px;
}
.career-board-fields input,
.career-board-fields select {
  font: inherit;
  padding: 7px 9px;
  color: var(--cb-text);
  background: var(--cb-input-bg);
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  min-width: 0;
}
.publish-toggle-row {
  margin-top: 10px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.publish-status {
  font-size: 13px;
  font-weight: 700;
}
.publish-status.enabled { color: #15803d; }
.publish-status.disabled { color: #b91c1c; }
.publish-toggle-switch {
  display: inline-block;
  align-items: center;
  cursor: pointer;
  user-select: none;
  line-height: 0;
}
.publish-toggle-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.publish-toggle-track {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 32px;
  border-radius: 999px;
  background: #e5e5ea;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: background-color 180ms cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 180ms ease;
}
.publish-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.16),
    0 1px 2px rgba(0, 0, 0, 0.1),
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  transition: transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.publish-toggle-switch input:checked + .publish-toggle-track {
  background: #34c759;
  box-shadow: inset 0 0 0 1px rgba(52, 199, 89, 0.18);
}
.publish-toggle-switch input:checked + .publish-toggle-track::after {
  transform: translateX(20px);
}
.publish-toggle-switch input:focus-visible + .publish-toggle-track {
  outline: 3px solid color-mix(in srgb, #0a84ff 45%, transparent);
  outline-offset: 3px;
}
.publish-toggle-switch input:disabled + .publish-toggle-track {
  opacity: 0.6;
}
.public-link-panel {
  margin-top: 10px;
  border: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  border-radius: 10px;
  background: var(--cb-subtle-bg);
  padding: 14px;
}
.public-link-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cb-muted);
  margin-bottom: 6px;
}
.public-link-value {
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--cb-text);
  word-break: break-all;
}
.public-link-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--cb-muted);
}
.public-link-meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: var(--cb-text);
}
.publish-modal-preview .publish-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--cb-text);
}
.publish-modal-preview .publish-modal-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--cb-muted);
}
.share-message-card {
  margin-top: 10px;
  border: 1px solid var(--cb-border);
  border-radius: 12px;
  background: var(--cb-subtle-bg);
  padding: 12px;
}
.share-message-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--cb-text);
}
.share-message-text a {
  color: var(--cb-accent);
  text-decoration: underline;
  word-break: break-all;
}
.btn.disabled, .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.resume-editor-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.resume-top-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.resume-top-controls-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  width: 100%;
}
.resume-top-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.resume-top-field:first-child { flex: 1; }
.resume-top-field input {
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
}
.resume-top-controls .resume-label {
  margin: 0;
  white-space: nowrap;
  font-size: 12px;
  color: var(--cb-muted);
}
.resume-top-controls select {
  width: 220px;
  max-width: 100%;
  border: 1px solid var(--cb-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--cb-input-bg);
  color: var(--cb-text);
}
.resume-rich-editor .ql-container {
  border: 1px solid var(--cb-border) !important;
  border-radius: 0 0 10px 10px;
  background: var(--cb-panel-bg);
  min-height: 76vh;
}
.resume-rich-editor .ql-toolbar {
  border: 1px solid var(--cb-border) !important;
  border-radius: 10px 10px 0 0;
  background: var(--cb-panel-bg) !important;
}
.resume-rich-editor .ql-toolbar .ql-stroke { stroke: var(--cb-text) !important; }
.resume-rich-editor .ql-toolbar .ql-fill { fill: var(--cb-text) !important; }
.resume-rich-editor .ql-toolbar .ql-picker-label { color: var(--cb-text) !important; }
/* The editor body is a faithful preview of the WeasyPrint output. Every
   metric below intentionally mirrors api/backend_db_service/resume_pdf.py
   _build_css() so the WYSIWYG matches the downloaded PDF. */
/* Preview stylesheet — must stay in lockstep with _build_css() in
   api/backend_db_service/resume_pdf.py. The editor HTML is sent verbatim to
   WeasyPrint, so any rule that exists here and not there (or vice versa) shows
   up as "the PDF doesn't match the preview". */
.resume-rich-editor .ql-editor {
  /* Unquoted: wrapping the whole stack in quotes makes it a single bogus
     family name, so the preview silently rendered in the browser default
     until the JS font picker overwrote this. */
  --resume-pdf-font: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  /* Page geometry mirrors @page Letter, 0.75in margins. 9.5in content height
     per page (11in - 2×0.75in) drives the page-break guides below. */
  width: 8.5in;
  max-width: 8.5in;
  min-height: 11in;
  margin: 24px auto;
  padding: 0.75in;
  background: #ffffff !important;
  border: 1px solid #e7e5e4 !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
  font-family: var(--resume-pdf-font);
  font-size: 11pt;
  line-height: 1.6;
  color: #1a1a1a !important;
  /* Page-break guides: a dashed horizontal line every 9.5in of content
     marks where WeasyPrint will start a new page. background-origin/clip
     are content-box so the gradient is anchored to the content area
     (after the 0.75in padding). */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(9.5in - 1px),
    #cbd5e1 calc(9.5in - 1px),
    #cbd5e1 9.5in
  );
  background-origin: content-box;
  background-clip: content-box;
  background-repeat: repeat-y;
  background-attachment: local;
}
.resume-rich-editor .ql-editor *,
.resume-rich-editor .ql-editor *::before,
.resume-rich-editor .ql-editor *::after {
  border-color: #bdc3c7;
}
.resume-rich-editor .ql-editor h1 {
  font-size: 22pt;
  font-weight: 700;
  margin: 0 0 0.3em 0;
  color: #000000;
  letter-spacing: 0.5pt;
  border-bottom: 2px solid #2c3e50;
  padding-bottom: 0.25em;
}
.resume-rich-editor .ql-editor h1 + p {
  font-size: 10pt;
  margin: 0.25em 0 1em 0;
  color: #333333;
  line-height: 1.5;
}
.resume-rich-editor .ql-editor h2 {
  font-size: 13pt;
  font-weight: 700;
  margin: 1.2em 0 0.7em 0;
  color: #1a1a1a;
  letter-spacing: 0.5pt;
  border-bottom: 1.5px solid #bdc3c7;
  padding-bottom: 0.3em;
}
.resume-rich-editor .ql-editor h2:first-of-type { margin-top: 0.8em; }
.resume-rich-editor .ql-editor h3 {
  font-size: 11pt;
  font-weight: 700;
  margin: 0.75em 0 0.25em 0;
  color: #000000;
}
.resume-rich-editor .ql-editor h3 + p {
  margin: 0.15em 0 0.4em 0;
  font-size: 10pt;
  color: #555555;
}
.resume-rich-editor .ql-editor p {
  margin: 0.35em 0;
  text-align: left;
}
/* A long URL or unbroken token is wider than the 7in content box; without
   this it overflows the right margin and WeasyPrint clips it off the page. */
.resume-rich-editor .ql-editor p,
.resume-rich-editor .ql-editor li,
.resume-rich-editor .ql-editor h1,
.resume-rich-editor .ql-editor h2,
.resume-rich-editor .ql-editor h3,
.resume-rich-editor .ql-editor a {
  overflow-wrap: break-word;
}
.resume-rich-editor .ql-editor table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.resume-rich-editor .ql-editor th,
.resume-rich-editor .ql-editor td {
  border: 1px solid #bdc3c7;
  padding: 0.3em 0.5em;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}
.resume-rich-editor .ql-editor strong { font-weight: 700; color: #1a1a1a; }
.resume-rich-editor .ql-editor em { font-style: italic; color: #333333; }
.resume-rich-editor .ql-editor a {
  color: #0066cc;
  text-decoration: underline;
}
.resume-rich-editor .ql-editor ul,
.resume-rich-editor .ql-editor ol {
  margin: 0.5em 0;
  /* Quill's own `.ql-editor li` adds 1.5em, so 0.25em here puts list text at
     1.75em — the same place the PDF puts it. */
  padding-left: 0.25em;
}
.resume-rich-editor .ql-editor li {
  margin: 0.3em 0;
  line-height: 1.55;
  color: #1a1a1a;
}
.resume-rich-editor .ql-editor hr {
  border: 0;
  border-top: 1px solid #bdc3c7;
  margin: 0.5em 0;
}
.resume-rich-editor .ql-editor pre.ql-syntax {
  background: #f5f5f4 !important;
  color: #1a1a1a !important;
  border: 1px solid #e7e5e4 !important;
}
.resume-rich-editor .ql-editor ::selection {
  background: rgba(0, 102, 204, 0.18);
  color: #1a1a1a;
}
.resume-editor-hint {
  font-size: 12px;
  color: var(--cb-muted);
}
.resume-editor-error {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
  border-radius: 8px;
  padding: 10px;
}
.tool-result-box {
  border: 1px solid var(--cb-border);
  border-radius: 10px;
  background: var(--cb-subtle-bg);
  padding: 10px;
  white-space: pre-wrap;
}
.tool-result-title { font-weight: 700; margin-bottom: 8px; }
.cover-letter-preview {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--cb-text);
  padding: 20px;
  max-height: 60vh;
  overflow-y: auto;
  white-space: pre-wrap;
}
.cover-letter-preview p { margin-bottom: 12px; }
.research-report {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 4px 2px;
}
/* Lead summary reads as prose, not a preformatted block. Blank-line breaks in
   the model output become separate paragraphs with real spacing. */
.research-summary {
  margin: 0 0 12px;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--cb-text);
}
.research-summary:last-child { margin-bottom: 0; }
.research-axes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Each finding hangs off a light accent rule instead of a boxed card —
   editorial, and lets the eye move down the axes without card-in-card noise. */
.research-axis {
  padding: 1px 0 1px 15px;
  border-left: 3px solid var(--cb-accent);
}
.research-axis-title {
  margin-bottom: 5px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cb-accent);
}
.research-axis-findings {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--cb-text);
}
.research-axis-findings:last-child { margin-bottom: 0; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.modal-form { display: grid; gap: 8px; }
.modal-form input, .modal-form textarea, .modal-form select { width: 100%; border: 1px solid var(--cb-border); border-radius: 8px; padding: 9px 10px; background: var(--cb-input-bg); color: var(--cb-text); font-family: var(--cb-font-body); font-size: 13px; }
.modal-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 10px; }
/* Explains why AI-gen is disabled; takes the free space so buttons stay right-aligned. */
.modal-ai-hint { flex: 1 1 auto; font-size: 12px; line-height: 1.35; color: var(--cb-muted); }
.modal-ai-hint.hidden { display: none; }
body.nav-collapsed .layout { grid-template-columns: 1fr; }
body.nav-collapsed .sidebar { display: none; }
/* --- Action button --- */
.chat-action-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--cb-font-body);
  color: white;
  background: var(--cb-accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease;
}
.chat-action-btn:hover {
  background: var(--cb-accent-strong);
}
.chat-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* --- Multi-item notice --- */
.msg-multi-item-notice {
  border-left: 3px solid color-mix(in srgb, var(--cb-accent) 50%, var(--cb-border));
}
.msg-multi-item-notice .upload-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--cb-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.msg-multi-item-notice .upload-hint:hover {
  color: var(--cb-accent-strong);
}
/* --- Guard notice --- */
.msg-guard-notice .msg-bubble {
  background: transparent;
  border: 1px dashed var(--cb-border);
  padding: 6px 12px;
  font-size: 12px;
  color: var(--cb-muted);
}
/* --- Resolving indicator --- */
.resolving {
  font-size: 12px;
  color: var(--cb-muted);
  font-style: italic;
  animation: pulse 1.2s ease-in-out infinite;
}
body[data-theme-mode="night"] {
  --cb-body-bg: #141210;
  --cb-text: #e7e5e4;
  --cb-app-bg: #1a1816;
  --cb-border: #302c28;
  --cb-panel-bg: #1f1d1a;
  --cb-subtle-bg: #262320;
  --cb-muted: #a8a29e;
  --cb-accent: #7f9dc4;
  --cb-accent-strong: #9ab2d3;
  --cb-accent-soft: #223049;
  --cb-secondary: #a8a29e;
  --cb-danger: #cf7f74;
  /* Generative/AI accent (night): mid-tone fill, hover lightens; soft = dark tint. */
  --cb-ai: #9773bd;
  --cb-ai-strong: #ac8fce;
  --cb-ai-soft: #2c2438;
  --cb-ai-ink: #cbb4e2;
  --cb-input-bg: #232019;
  --cat-technical: #1e3246;     --cat-technical-ink: #afc7e1;
  --cat-collaboration: #193729; --cat-collaboration-ink: #abcebb;
  --cat-impact: #3c2e14;        --cat-impact-ink: #d4c2a4;
  --cat-strategy: #442728;      --cat-strategy-ink: #e0b9b9;
  --cat-leadership: #362a43;    --cat-leadership-ink: #cbbddc;
  --lvl-ink: #afc7e1;
  --lvl-developing: #24384c;    --lvl-proficient: #1b2f42;    --lvl-expert: #142536;
  --cb-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
}
body[data-theme-mode="night"] .main,
body[data-theme-mode="night"] .content {
  background: var(--cb-panel-bg);
  color: var(--cb-text);
}
body[data-theme-mode="night"] .sidebar {
  background: var(--cb-subtle-bg);
  border-right-color: var(--cb-border);
}
body[data-theme-mode="night"] .sidebar .nav-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}
body[data-theme-mode="night"] .sidebar .nav-btn.active {
  background: var(--cb-accent-soft);
  color: var(--cb-accent);
}
body[data-theme-mode="night"] .sidebar .nav-btn.nav-btn-logout:hover {
  background: color-mix(in srgb, var(--cb-danger) 18%, transparent);
}
body[data-theme-mode="night"] .theme-switch,
body[data-theme-mode="night"] .muted,
body[data-theme-mode="night"] .field-label,
body[data-theme-mode="night"] .resume-editor-hint {
  color: var(--cb-muted);
}
body[data-theme-mode="night"] .theme-select,
body[data-theme-mode="night"] .card,
body[data-theme-mode="night"] .chat-thread,
body[data-theme-mode="night"] .composer,
body[data-theme-mode="night"] .modal-card,
body[data-theme-mode="night"] .tool-result-box,
body[data-theme-mode="night"] .exp-left,
body[data-theme-mode="night"] .resume-top-controls select,
body[data-theme-mode="night"] .resume-top-field input,
body[data-theme-mode="night"] .resume-rich-editor .ql-toolbar,
body[data-theme-mode="night"] .resume-rich-editor .ql-container,
body[data-theme-mode="night"] .inline-form input,
body[data-theme-mode="night"] .inline-form textarea,
body[data-theme-mode="night"] .inline-form select,
body[data-theme-mode="night"] .modal-form input,
body[data-theme-mode="night"] .modal-form textarea,
body[data-theme-mode="night"] .modal-form select,
body[data-theme-mode="night"] textarea,
body[data-theme-mode="night"] .msg-bubble {
  background: var(--cb-input-bg) !important;
  color: var(--cb-text) !important;
  border-color: var(--cb-border) !important;
}
body[data-theme-mode="night"] .chat-nav-btn {
  border-color: var(--cb-border) !important;
  color: var(--cb-text) !important;
}
body[data-theme-mode="night"] .chat-nav-btn:hover {
  background: rgba(255,255,255,.08) !important;
}
body[data-theme-mode="night"] .saving-overlay {
  background: rgba(10, 8, 6, 0.35);
}
body[data-theme-mode="night"] .saving-card {
  border-color: var(--cb-border);
  background: var(--cb-panel-bg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
body[data-theme-mode="night"] .composer-drag-dot { background: color-mix(in srgb, var(--cb-muted) 50%, transparent); }
body[data-theme-mode="night"] .composer { box-shadow: 0 1px 0 0 color-mix(in srgb, white 6%, transparent) inset, 0 22px 48px -14px rgba(0, 0, 0, 0.55), 0 8px 16px -6px rgba(0, 0, 0, 0.35); }
body[data-theme-mode="night"] .msg.user .msg-bubble {
  background: var(--cb-accent-soft) !important;
  border-color: color-mix(in srgb, var(--cb-accent) 20%, transparent) !important;
}
body[data-theme-mode="night"] .contact-chip {
  background: color-mix(in srgb, var(--cb-border) 50%, transparent);
}
body[data-theme-mode="night"] .contact-row-icon {
  background: color-mix(in srgb, var(--cb-border) 55%, transparent);
}
body[data-theme-mode="night"] .exp-period,
body[data-theme-mode="night"] .summary-exp-date {
  color: var(--cb-muted);
}
body[data-theme-mode="night"] .summary-exp-title,
body[data-theme-mode="night"] .summary-exp-body,
body[data-theme-mode="night"] .exp-role,
body[data-theme-mode="night"] .line strong,
body[data-theme-mode="night"] .tool-result-title {
  color: var(--cb-text);
}
body[data-theme-mode="night"] .skills-toolbar {
  background: var(--cb-input-bg) !important;
}
body[data-theme-mode="night"] .skills-group {
  border-top-color: color-mix(in srgb, var(--cb-border) 72%, transparent);
}
body[data-theme-mode="night"] .skills-group-count {
  color: var(--cb-muted);
}
body[data-theme-mode="night"] .skill-card {
  background: var(--cb-input-bg);
  border-color: color-mix(in srgb, var(--cb-border) 88%, var(--skill-accent) 12%);
}
body[data-theme-mode="night"] .skill-card-evidence-link,
body[data-theme-mode="night"] .skill-card-empty,
body[data-theme-mode="night"] .skill-card-edit-label {
  color: var(--cb-muted);
}
body[data-theme-mode="night"] .btn.ghost {
  background: var(--cb-subtle-bg);
  color: var(--cb-text);
  border-color: var(--cb-border);
}
body[data-theme-mode="night"] .public-link-panel {
  background: linear-gradient(180deg, #221f1a 0%, #1e1b17 100%);
}
body[data-theme-mode="night"] .share-message-card {
  background: color-mix(in srgb, var(--cb-subtle-bg) 86%, black);
}
body[data-theme-mode="night"] .publish-status.enabled { color: #4ade80; }
body[data-theme-mode="night"] .publish-status.disabled { color: #f87171; }
body[data-theme-mode="night"] .publish-toggle-track {
  background: #3a3630;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
body[data-theme-mode="night"] .publish-toggle-switch input:checked + .publish-toggle-track {
  background: #22c55e;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.2);
}
body[data-theme-mode="night"] .admin-users-table {
  background: var(--cb-input-bg);
}
body[data-theme-mode="night"] .admin-users-table thead th {
  background: color-mix(in srgb, var(--cb-input-bg) 78%, black);
}
body[data-theme-mode="night"] .admin-pill.role-admin {
  color: var(--cb-accent);
}
body[data-theme-mode="night"] .admin-pill.status-active {
  color: #6ee7b7;
}
body[data-theme-mode="night"] .admin-pill.status-disabled {
  color: #fca5a5;
}
body[data-theme-mode="night"] .cb-month-year-popover {
  background: var(--cb-input-bg);
  color: var(--cb-text);
  border-color: var(--cb-accent);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}
body[data-theme-mode="night"] .cb-month-year-popover .cb-month-cell {
  color: var(--cb-text);
}
body[data-theme-mode="night"] .cb-month-year-popover .cb-month-cell.is-selected {
  background: var(--cb-accent);
  color: #fff;
}
@media (max-width: 900px) {
  .page-shell { padding: 10px 8px 174px; }
  .layout { grid-template-columns: 1fr; min-height: calc(100dvh - 20px); }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .nav-toggle-btn { min-width: 40px; width: 40px; }
  .main { padding: 16px 14px; }
  .content { max-height: none; padding-right: 0; }
  .composer { right: 6px; width: calc(100vw - 12px); height: min(480px, calc(100vh - 24px)); bottom: var(--composer-bottom, 8px); }
  .composer-input-row { flex-wrap: wrap; }
  .composer-send-btn { width: auto; }
  .evidence-filter-row { grid-template-columns: 1fr; }
  .field-pair-row { grid-template-columns: 1fr; gap: 8px; }
  .inline-date-range-control { grid-template-columns: auto minmax(0, 1fr); }
  .inline-date-range-current { grid-column: 2; }
  .msg-bubble { max-width: calc(100vw - 96px); }
  .form-grid-2 { grid-template-columns: 1fr; }
  .form-grid-3 { grid-template-columns: 1fr; }
  .resume-top-controls { flex-direction: column; align-items: flex-start; }
  .resume-top-controls select { width: 100%; }
  .resume-top-controls-row { flex-direction: column; align-items: stretch; }
  .resume-rich-editor .ql-toolbar { border-radius: 8px 8px 0 0; }
  .resume-rich-editor .ql-container { min-height: 66vh; }
  .resume-rich-editor .ql-editor { min-height: 720px; margin: 10px auto; padding: 28px 20px; }
  .firebase-auth-grid-2 { grid-template-columns: 1fr; }
  .admin-users-toolbar { grid-template-columns: 1fr; }
  .admin-user-actions { flex-direction: column; align-items: stretch; }
  .admin-users-table-wrap { max-height: min(50vh, 460px); }
  .field-row { grid-template-columns: 1fr; align-items: stretch; }
  .exp-section { grid-template-columns: 1fr; }
  .exp-left { position: static; }
  .exp-date-inline { grid-template-columns: 1fr; }
  .skills-toolbar { padding: 10px 12px; }
  .skills-group-head { align-items: flex-start; }
  .skills-grid { grid-template-columns: 1fr; }
  .skill-card-footer,
  .skill-card-actions { width: 100%; }
  .skill-card-actions { margin-left: 0; }
  .publish-toggle-row { flex-direction: column; align-items: flex-start; }

  /* Touch-friendly button sizing */
  .btn { padding: 9px 16px; font-size: 13.5px; }
  .btn.icon { padding: 7px 12px; }
  .btn.ghost { padding: 9px 16px; }

  /* Tool card actions — stack vertically on narrow screens */
  .tool-card .actions { flex-direction: column; }
  .tool-card .actions .btn { width: 100%; text-align: center; }
  .tool-card textarea { min-height: 100px; font-size: 14px; }
  .tool-card select { font-size: 14px; padding: 10px; }
  .tool-card input { font-size: 14px; padding: 10px; }

  /* Tool modal — full width on mobile */
  .tool-modal-card { width: calc(100vw - 12px); }
  .tool-modal-body { max-height: 78vh; -webkit-overflow-scrolling: touch; }

  /* Resume editor action buttons — wrap into grid */
  .resume-editor-layout + .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .resume-editor-layout + .actions .btn { width: 100%; text-align: center; font-size: 12.5px; padding: 8px 6px; }

  /* Contact chips — allow more text on mobile */
  .contact-chip-text { max-width: 180px; }
  .contact-chip { padding: 6px 12px 6px 10px; }

  /* Scoring grid — prevent label overflow */
  .scoring-label { min-width: 100px; font-size: 0.82em; }
  .scoring-value { min-width: 30px; }

  /* Match eval table — horizontal scroll */
  .req-mapping-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Topbar — compact on mobile */
  .topbar { flex-wrap: wrap; gap: 6px; }
  .topbar h2 { font-size: 18px; }

  /* Sidebar nav buttons — bigger touch targets */
  .sidebar .nav-btn { padding: 10px 12px; font-size: 14px; }
  .sidebar nav { gap: 2px; }

  /* Tool history cards — tighter on mobile */
  .tool-history-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tool-history-actions { align-self: flex-end; }
  .tool-history-pre { font-size: 12px; }
}

/* Extra-small screens (phones in portrait) */
@media (max-width: 480px) {
  .page-shell { padding: 6px 4px 170px; }
  .layout { border-radius: 10px; }
  .main { padding: 12px 10px; }
  .card { padding: 12px; margin-bottom: 10px; }
  h2 { font-size: 18px; }
  h3 { font-size: 15px; }

  /* Single-column tool buttons */
  .tool-card .actions { grid-template-columns: 1fr; }
  .resume-editor-layout + .actions { grid-template-columns: 1fr; }

  /* Composer fills the screen */
  .composer { right: 0; width: 100vw; border-radius: 16px 16px 0 0; bottom: 0 !important; }
  .composer-input-row textarea { font-size: 16px; /* prevents iOS zoom on focus */ }

  /* Nav collapses tighter */
  .sidebar { padding: 12px 10px; }
  .sidebar .nav-btn { padding: 8px 10px; font-size: 13px; }

  /* Contact strip wraps naturally */
  .contact-chip-text { max-width: 140px; }
}

/* Enhanced match eval modal */
/* Fit tones: one palette for match badges, Job Search status tags/rails and bars. */
/* Aliases of the site's category pairs (muted stone palette, night-aware): green =
   strong / active, amber = partial, rose = gap / expired. */
:root {
  --tone-strong-bg: var(--cat-collaboration); --tone-strong-ink: var(--cat-collaboration-ink);
  --tone-partial-bg: var(--cat-impact);       --tone-partial-ink: var(--cat-impact-ink);
  --tone-gap-bg: var(--cat-strategy);         --tone-gap-ink: var(--cat-strategy-ink);
}
.match-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:0.82em; font-weight:500; }
.match-strong { background:var(--tone-strong-bg); color:var(--tone-strong-ink); }
.match-partial { background:var(--tone-partial-bg); color:var(--tone-partial-ink); }
.match-gap { background:var(--tone-gap-bg); color:var(--tone-gap-ink); }
.match-mitigation { font-size:0.85em; color:var(--muted); margin-top:2px; }
.req-mapping-table { width:100%; border-collapse:collapse; font-size:0.9em; }
.req-mapping-table th, .req-mapping-table td { padding:6px 8px; text-align:left; border-bottom:1px solid var(--border); }
.req-mapping-table th { font-weight:600; font-size:0.85em; color:var(--muted); }
.scoring-grid { display:flex; flex-direction:column; gap:6px; }
.scoring-row { display:flex; align-items:center; gap:8px; }
.scoring-label { min-width:140px; font-size:0.88em; }
.scoring-bar-bg { flex:1; height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.scoring-bar-fill { height:100%; background:var(--cb-accent); border-radius:4px; transition:width 0.3s; }
.scoring-value { min-width:36px; font-size:0.85em; text-align:right; color:var(--muted); }

/* ---------------------------------------------------------------------
 * Resume ingest overlay — editorial workshop treatment.
 *
 * A calm, paper-like surface with a refined serif heading, a numbered
 * step ladder (not a generic progress bar), and monoline SVG glyphs
 * per phase. Reuses the app's existing .modal-overlay backdrop so it
 * layers with the rest of the modal stack.
 *
 * The overlay defines its own surface colours via --ingest-* custom
 * properties so both light and dark themes can be tuned independently
 * of the app's chrome. Accent / foreground come from the app's existing
 * variables so brand identity stays consistent.
 * --------------------------------------------------------------------- */

/* Default (light) surface tokens — warm off-white paper, deep ink. */
.ingest-overlay {
  --ingest-paper: oklch(98.5% 0.008 85);
  --ingest-paper-tint: oklch(95.5% 0.012 85);
  --ingest-ink: oklch(22% 0.02 60);
  --ingest-muted: oklch(52% 0.02 70);
  --ingest-line: oklch(88% 0.01 75);
  --ingest-accent: var(--cb-accent, oklch(52% 0.18 250));
  --ingest-on-accent: oklch(99% 0.003 85);
  --ingest-shadow: 0 30px 60px -24px oklch(22% 0.05 60 / 0.22), 0 8px 20px -10px oklch(22% 0.04 60 / 0.12);
}

body[data-theme-mode="night"] .ingest-overlay {
  --ingest-paper: oklch(21% 0.022 260);
  --ingest-paper-tint: oklch(25% 0.025 260);
  --ingest-ink: oklch(94% 0.015 85);
  --ingest-muted: oklch(68% 0.02 250);
  --ingest-line: oklch(32% 0.025 260);
  --ingest-shadow: 0 30px 70px -20px oklch(0% 0 0 / 0.55), 0 8px 24px -10px oklch(0% 0 0 / 0.35);
}

/* Sheet container — feels like a printed card, not a web modal */
.ingest-sheet {
  width: min(540px, calc(100vw - 24px));
  background: var(--ingest-paper);
  color: var(--ingest-ink);
  border: 1px solid var(--ingest-line);
  border-radius: 6px;
  padding: clamp(24px, 3.2vw, 40px);
  box-shadow: var(--ingest-shadow);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  animation: ingest-sheet-in 420ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
@keyframes ingest-sheet-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ingest-sheet { animation: none; }
}

/* Header: eyebrow + serif title + elapsed pill */
.ingest-sheet-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 20px;
  row-gap: 4px;
  align-items: baseline;
  margin-bottom: clamp(20px, 2.4vw, 28px);
}
.ingest-sheet-eyebrow {
  grid-column: 1;
  grid-row: 1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ingest-muted);
}
.ingest-sheet-title {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ingest-ink);
}
.ingest-sheet-elapsed {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ingest-muted);
  padding: 5px 12px;
  background: var(--ingest-paper-tint);
  border: 1px solid var(--ingest-line);
  border-radius: 999px;
  white-space: nowrap;
}

/* Step ladder with a vertical spine running through the markers */
.ingest-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.ingest-steps::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--ingest-line) 0,
    var(--ingest-line) 50%,
    color-mix(in oklab, var(--ingest-line) 50%, transparent) 100%
  );
}
.ingest-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 16px;
  padding: 10px 0;
  align-items: start;
}
.ingest-step-marker {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ingest-paper);
  border: 1px solid var(--ingest-line);
  color: var(--ingest-muted);
  transition: background 320ms ease, border-color 320ms ease, color 320ms ease, box-shadow 320ms ease;
}
.ingest-step-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 240ms ease;
}
.ingest-step-glyph svg { display: block; }
.ingest-step-glyph-check {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* Upcoming (default) — hollow ring, muted glyph */
.ingest-step[data-state="upcoming"] .ingest-step-glyph-check { opacity: 0; }
.ingest-step[data-state="upcoming"] .ingest-step-glyph-phase { opacity: 0.55; }

/* Active — accent-filled marker with concentric halo + gentle pulse */
.ingest-step[data-state="active"] .ingest-step-marker {
  background: var(--ingest-accent);
  border-color: var(--ingest-accent);
  color: var(--ingest-on-accent);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--ingest-accent) 18%, transparent),
    0 0 0 8px color-mix(in oklab, var(--ingest-accent) 6%, transparent);
  animation: ingest-pulse 2.2s ease-in-out infinite;
}
.ingest-step[data-state="active"] .ingest-step-glyph-phase { opacity: 1; }
.ingest-step[data-state="active"] .ingest-step-glyph-check { opacity: 0; }
@keyframes ingest-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px color-mix(in oklab, var(--ingest-accent) 20%, transparent),
      0 0 0 8px color-mix(in oklab, var(--ingest-accent) 6%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 5px color-mix(in oklab, var(--ingest-accent) 14%, transparent),
      0 0 0 12px color-mix(in oklab, var(--ingest-accent) 4%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ingest-step[data-state="active"] .ingest-step-marker { animation: none; }
}

/* Complete — ink-filled marker, check glyph crossfades in */
.ingest-step[data-state="complete"] .ingest-step-marker {
  background: var(--ingest-ink);
  border-color: var(--ingest-ink);
  color: var(--ingest-paper);
}
.ingest-step[data-state="complete"] .ingest-step-glyph-phase { opacity: 0; }
.ingest-step[data-state="complete"] .ingest-step-glyph-check { opacity: 1; }

/* Step body: number + title + current message (message only on active) */
.ingest-step-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 3px;
}
.ingest-step-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.ingest-step-number {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ingest-muted);
  min-width: 20px;
}
.ingest-step-title {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ingest-muted);
  transition: color 280ms ease, font-weight 280ms ease;
}
.ingest-step[data-state="active"] .ingest-step-number,
.ingest-step[data-state="complete"] .ingest-step-number {
  color: var(--ingest-ink);
}
.ingest-step[data-state="active"] .ingest-step-title {
  color: var(--ingest-ink);
  font-weight: 600;
}
.ingest-step[data-state="complete"] .ingest-step-title {
  color: var(--ingest-ink);
}
.ingest-step-current {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  color: var(--ingest-muted);
  line-height: 1.5;
  min-height: 0;
}
.ingest-step[data-state="active"] .ingest-step-current:not(:empty) {
  /* subtle fade-in when the current-phase message updates */
  animation: ingest-current-in 260ms ease both;
}
@keyframes ingest-current-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}

/* Footer: expectation hint + "Continue in background" text-link */
.ingest-sheet-foot {
  margin-top: clamp(24px, 2.8vw, 32px);
  padding-top: 20px;
  border-top: 1px solid var(--ingest-line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ingest-sheet-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ingest-muted);
  max-width: 42em;
}
.ingest-sheet-note strong {
  color: var(--ingest-ink);
  font-weight: 600;
}
.ingest-sheet-actions {
  display: flex;
  justify-content: flex-end;
}
.ingest-sheet-dismiss {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 2px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ingest-accent);
  cursor: pointer;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 180ms ease, gap 220ms ease;
}
.ingest-sheet-dismiss:hover {
  color: color-mix(in oklab, var(--ingest-accent) 70%, var(--ingest-ink));
  gap: 9px;
}
.ingest-sheet-dismiss:focus-visible {
  outline: 2px solid var(--ingest-accent);
  outline-offset: 4px;
  border-radius: 2px;
}
.ingest-sheet-dismiss-arrow {
  transition: transform 220ms ease;
}
.ingest-sheet-dismiss:hover .ingest-sheet-dismiss-arrow {
  transform: translateX(2px);
}

/* --- Compact "applying changes" variant, shared visual language --- */
.ingest-sheet-compact { max-width: 460px; width: min(460px, calc(100vw - 24px)); }
.ingest-apply-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0 4px;
}
.ingest-apply-pulse {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ingest-accent);
  flex-shrink: 0;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--ingest-accent) 20%, transparent),
    0 0 0 8px color-mix(in oklab, var(--ingest-accent) 6%, transparent);
  animation: ingest-pulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ingest-apply-pulse { animation: none; }
}
.ingest-apply-message {
  margin: 0;
  font-size: 14.5px;
  color: var(--ingest-ink);
  line-height: 1.5;
}

/* Responsive — on narrow widths keep the elapsed pill on its own line
   instead of fighting the title for horizontal space. */
@media (max-width: 480px) {
  .ingest-sheet-head {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .ingest-sheet-eyebrow { grid-row: 1; }
  .ingest-sheet-elapsed { grid-column: 1; grid-row: 3; justify-self: start; }
  .ingest-sheet-title   { grid-row: 2; font-size: 22px; }
}

/* ---------------------------------------------------------------------------
 * Skill discovery — review variant of the ingest sheet
 *
 * Reuses .modal-overlay / .ingest-overlay / .ingest-sheet / .ingest-sheet-head
 * / .ingest-sheet-eyebrow / .ingest-sheet-title / .ingest-sheet-foot from the
 * resume ingest treatment so both flows share tokens, dark-mode handling, and
 * animation. This block only adds what the ingest overlay doesn't have: a
 * scrollable list of selectable items with per-section select-all and a
 * sticky action bar at the top of the sheet.
 * --------------------------------------------------------------------------- */

/* Wider sheet variant with a fixed action bar + scrollable body. The default
 * .ingest-sheet is fine for status views but caps at 540px and doesn't scroll. */
.ingest-sheet-review {
  width: min(640px, calc(100vw - 24px));
  max-height: min(86vh, 760px);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ingest-sheet-review-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 14px clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--ingest-line);
  background: var(--ingest-paper);
  flex: 0 0 auto;
}
.ingest-sheet-review-scroll {
  padding: 24px clamp(20px, 3vw, 32px) 28px;
  overflow-y: auto;
  flex: 1 1 auto;
  display: grid;
  gap: 24px;
}
.ingest-sheet-review-scroll .ingest-sheet-head { margin-bottom: 0; }

/* Tab strip — two underlined buttons, active gets an ink rule + ink colour. */
.ingest-sheet-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--ingest-line);
  margin-bottom: -8px;
}
.ingest-sheet-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 0 12px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  position: relative;
  font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ingest-muted);
  transition: color 200ms ease;
}
.ingest-sheet-tab:hover:not([disabled]) {
  color: color-mix(in oklab, var(--ingest-ink) 80%, transparent);
}
.ingest-sheet-tab[aria-selected="true"] {
  color: var(--ingest-ink);
}
.ingest-sheet-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ingest-ink);
}
.ingest-sheet-tab[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.ingest-sheet-tab-count {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ingest-muted);
}
.ingest-sheet-tab[aria-selected="true"] .ingest-sheet-tab-count {
  color: var(--ingest-ink);
}

/* Pane: select-all row + flat item list. */
.ingest-sheet-pane { display: grid; gap: 10px; }
.ingest-sheet-pane[hidden] { display: none; }
.ingest-sheet-selectall {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ingest-muted);
  padding: 4px 0 8px;
}
.ingest-sheet-list { display: grid; gap: 0; }

.ingest-sheet-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in oklab, var(--ingest-line) 60%, transparent);
  cursor: pointer;
}
.ingest-sheet-item:last-child { border-bottom: 0; }
.ingest-sheet-item-body { display: grid; gap: 4px; min-width: 0; }
.ingest-sheet-item-name {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ingest-ink);
}
.ingest-sheet-item-meta {
  font-size: 12px;
  color: var(--ingest-muted);
  letter-spacing: 0.01em;
}
.ingest-sheet-item-arrow {
  display: inline-block;
  margin: 0 5px;
  color: color-mix(in oklab, var(--ingest-muted) 70%, transparent);
}
.ingest-sheet-dup-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  vertical-align: middle;
  color: #92400e;
  background: color-mix(in oklab, #f59e0b 22%, transparent);
}
/* Review tabs: New / Update / Optional */
.ingest-sheet-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--ingest-border, color-mix(in oklab, currentColor 14%, transparent));
  margin: 8px 0 6px;
}
.ingest-sheet-tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ingest-muted, #6b7280);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ingest-sheet-tab[aria-selected="true"] {
  color: inherit;
  border-bottom-color: currentColor;
}
.ingest-sheet-tab-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  text-align: center;
  background: color-mix(in oklab, currentColor 12%, transparent);
}
.ingest-sheet-tab-hint {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ingest-muted, #6b7280);
}
/* Update-tab before -> after diff */
.ingest-sheet-diff {
  margin-top: 6px;
  display: grid;
  gap: 3px;
}
.ingest-sheet-diff-row {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
}
.ingest-sheet-diff-field {
  flex: 0 0 auto;
  min-width: 92px;
  color: var(--ingest-muted, #6b7280);
}
.ingest-sheet-diff-from {
  text-decoration: line-through;
  color: var(--ingest-muted, #6b7280);
}
.ingest-sheet-diff-to,
.ingest-sheet-diff-add {
  color: #166534;
}
.ingest-sheet-item--update .ingest-sheet-item-name {
  font-weight: 500;
}
.ingest-sheet-evidence-list {
  list-style: none;
  padding: 4px 0 0;
  margin: 0;
  display: grid;
  gap: 4px;
}
.ingest-sheet-evidence-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--ingest-ink) 78%, transparent);
}
.ingest-sheet-evidence-plus {
  flex: 0 0 auto;
  font-weight: 600;
  font-size: 13px;
  color: var(--ingest-accent);
  font-variant-numeric: tabular-nums;
  width: 10px;
  text-align: center;
}
.ingest-sheet-evidence-text {
  flex: 1 1 auto;
  font-style: italic;
  min-width: 0;
}
.ingest-sheet-evidence-tag {
  flex: 0 0 auto;
  padding: 1px 6px 2px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ingest-muted);
  border: 1px solid var(--ingest-line);
  border-radius: 999px;
}

.ingest-sheet-empty {
  font-style: italic;
  font-size: 13px;
  color: var(--ingest-muted);
  padding: 8px 0;
}

/* Custom checkbox in the ingest-paper palette. */
.ingest-sheet-check {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 4px 0 0;
  border: 1px solid color-mix(in oklab, var(--ingest-ink) 35%, transparent);
  background: var(--ingest-paper);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
  transition: border-color 160ms ease, background 160ms ease;
}
.ingest-sheet-check:hover {
  border-color: color-mix(in oklab, var(--ingest-ink) 60%, transparent);
}
.ingest-sheet-check:checked,
.ingest-sheet-check:indeterminate {
  background: var(--ingest-ink);
  border-color: var(--ingest-ink);
}
.ingest-sheet-check:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--ingest-paper);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
.ingest-sheet-check:indeterminate::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 6.5px;
  height: 1.6px;
  background: var(--ingest-paper);
}
.ingest-sheet-check:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--ingest-accent) 60%, transparent);
  outline-offset: 2px;
}

/* Primary apply button styled in the ingest accent. */
.ingest-sheet-apply {
  appearance: none;
  border: 0;
  padding: 9px 18px;
  background: var(--ingest-accent);
  color: var(--ingest-on-accent);
  font: 500 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.06em;
  cursor: pointer;
  border-radius: 999px;
  transition: transform 200ms ease, background 200ms ease, opacity 200ms ease;
}
.ingest-sheet-apply:hover { transform: translateY(-1px); }
.ingest-sheet-apply[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* Disable the toolbar trigger while extraction is in flight or pending review.
 * Body attribute survives any re-render of the skills section. */
body[data-skx-busy="true"] [data-action="skill-extract-open"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .ingest-sheet-review { max-height: 92vh; }
  .ingest-sheet-review-actions { padding: 12px 18px; }
  .ingest-sheet-review-scroll { padding: 18px 18px 22px; }
}

/* Resume ingest review modal — subsection rows inside the .ingest-sheet-pane.
   The pane itself is reused from skill discovery; subsections are an extra
   layer of grouping (e.g. Experiences, Education, Training, Skills) within
   each tab so the user can batch-select by category. */
.ingest-sheet-subsection { display: grid; gap: 8px; margin-top: 18px; }
.ingest-sheet-subsection:first-child { margin-top: 0; }
.ingest-sheet-subsection-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ingest-line);
}
.ingest-sheet-subsection-head .ingest-sheet-selectall {
  padding: 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ingest-ink);
}

/* Tab-level select-all sits between the tabs and the pane subsections. */
.ingest-sheet-selectall--top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 4px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ingest-muted);
  user-select: none;
}

/* Experience AI-assist dialog: memory pane (top) + conversation (bottom).
 * Reuses .modal-overlay / .modal-card / .chat-thread / .msg-bubble. */
.exp-assist-card { width: min(640px, calc(100vw - 24px)); display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.exp-assist-memory { border: 1px solid color-mix(in srgb, var(--cb-border) 70%, transparent); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: color-mix(in srgb, var(--cb-panel-bg) 92%, var(--cb-border)); max-height: 34vh; overflow-y: auto; }
.exp-assist-memory-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }
.exp-assist-memory-body > * { margin: 2px 0; }
.exp-assist-thread { flex: 1 1 auto; min-height: 120px; max-height: 40vh; overflow-y: auto; margin: 0 0 10px; }
.exp-assist-input { display: flex; gap: 8px; align-items: flex-end; }
.exp-assist-input textarea { flex: 1 1 auto; border: 1px solid var(--cb-border); border-radius: 8px; padding: 9px 10px; background: var(--cb-input-bg); color: var(--cb-text); font-family: var(--cb-font-body); font-size: 13px; resize: vertical; max-height: 30vh; }
/* Fixed compact greeting under the draft — not an accumulating chat bubble. */
.exp-assist-greeting, .doc-assist-greeting { font-size: 12px; line-height: 1.4; margin: 0 0 8px; }
.exp-assist-greeting:empty, .doc-assist-greeting:empty { display: none; }

/* Draft memory: each content field clearly labeled and separated. */
.exp-assist-mem-head { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; color: var(--cb-muted); font-size: 12px; }
.exp-assist-mem-period::before { content: "· "; }
.exp-assist-field { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 6px 0; }
.exp-assist-field + .exp-assist-field { border-top: 1px solid color-mix(in srgb, var(--cb-border) 55%, transparent); }
.exp-assist-field-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cb-muted); padding-top: 2px; }
.exp-assist-field-value { font-size: 13px; line-height: 1.45; color: var(--cb-text); min-width: 0; overflow-wrap: anywhere; }
.exp-assist-empty { color: color-mix(in srgb, var(--cb-muted) 75%, transparent); font-style: italic; }
/* Dismissible "split into several experiences" coaching note in the assist thread. */
.exp-assist-split-note { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--cb-accent) 30%, var(--cb-border)); background: color-mix(in srgb, var(--cb-accent) 8%, transparent); }
.exp-assist-split-note-text { font-size: 12px; line-height: 1.45; color: var(--cb-text); flex: 1 1 auto; }
.exp-assist-split-note-dismiss { flex: 0 0 auto; border: none; background: none; cursor: pointer; color: var(--cb-muted); font-size: 12px; line-height: 1; padding: 2px; }
/* Shared "what changed" trace for every AI-assist surface (experience, summary,
   resume, cover letter, self-eval). Small edits render inline; large ones collapse
   into a <details> review panel; a no-op shows "No changes". */
.assist-change { margin: 2px 0 10px; padding: 8px 10px; border-radius: 8px; border: 1px dashed color-mix(in srgb, var(--cb-border) 70%, transparent); background: color-mix(in srgb, var(--cb-accent) 5%, transparent); }
.assist-change--collapsible { padding: 0; }
.assist-change-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cb-muted); margin-bottom: 4px; }
.assist-change-summary { cursor: pointer; font-size: 12px; padding: 7px 10px; color: var(--cb-muted); user-select: none; }
.assist-change--collapsible[open] .assist-change-summary { border-bottom: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent); }

/* Polish-field before→after trace + Revert (inline under a polished field). */
.polish-trace { margin: 6px 0 2px; padding: 7px 9px; border-radius: 8px; border: 1px dashed color-mix(in srgb, var(--cb-border) 70%, transparent); background: color-mix(in srgb, var(--cb-accent) 5%, transparent); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.polish-trace .polish-trace-revert { align-self: flex-end; }
.ingest-sheet-diff-removed { color: color-mix(in srgb, var(--cb-danger) 80%, var(--cb-text)); font-style: italic; }

/* Line-level document body (resume / cover letter / summary / self-eval assist).
   A modified line (.doc-diff-mod) renders an inline word diff so only the changed
   words are highlighted instead of the whole line being struck and re-added.
   No inner scroll or monospace: the diff is prose (a resume/letter), so it reads
   in the panel's body font and lets the chat thread be the single scroll surface
   — a nested scroll box inside the thread is a scroll trap in the 400px panel. */
.doc-diff { padding: 8px 10px; font-size: 13px; line-height: 1.55; }
.doc-diff-line { white-space: pre-wrap; overflow-wrap: anywhere; padding: 0 4px; border-radius: 3px; }
.doc-diff-add { background: color-mix(in srgb, #166534 14%, transparent); color: #166534; }
.doc-diff-del { background: color-mix(in srgb, var(--cb-danger) 12%, transparent); color: color-mix(in srgb, var(--cb-danger) 80%, var(--cb-text)); text-decoration: line-through; }
.doc-diff-same { color: var(--cb-muted); }

/* Night theme: the light-mode diff greens/reds are too dark on the dark panel.
   Lift text toward --cb-text and strengthen the wash so changes stay legible.
   Covers both the line body (.doc-diff-*) and the inline word spans
   (.ingest-sheet-diff-*) shared with the experience/field trace. */
body[data-theme-mode="night"] .doc-diff-add,
body[data-theme-mode="night"] .ingest-sheet-diff-to,
body[data-theme-mode="night"] .ingest-sheet-diff-add {
  background: color-mix(in srgb, #22c55e 20%, transparent);
  color: color-mix(in srgb, #22c55e 55%, var(--cb-text));
}
body[data-theme-mode="night"] .doc-diff-del,
body[data-theme-mode="night"] .ingest-sheet-diff-from {
  color: color-mix(in srgb, var(--cb-danger) 55%, var(--cb-text));
}
body[data-theme-mode="night"] .doc-diff-del {
  background: color-mix(in srgb, var(--cb-danger) 18%, transparent);
}

/* Accept / Reject a proposed AI edit (resume / cover letter / self-eval). The
   editor changes only on Accept; the row sits under the change-trace in-thread. */
.doc-assist-proposal { margin: 2px 0 10px; }
.doc-assist-proposal-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.doc-assist-proposal-status { font-size: 12px; }

/* Reusable document-assist steer panel (summary / resume / cover / merit). */
/* AI-assist: a floating, draggable, resizable window pinned to the viewport so
   its height is independent of the host card/modal — the thread gets real room. */
.doc-assist-floating {
  position: fixed; right: 24px; bottom: 24px;
  width: 400px; height: min(72vh, 620px);
  min-width: 300px; min-height: 320px; max-width: 92vw; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--cb-panel-bg);
  border: 1px solid color-mix(in srgb, var(--cb-border) 80%, transparent);
  border-radius: 14px; box-shadow: 0 24px 60px rgba(41, 37, 36, 0.28);
  z-index: 1300;
}
/* Phone: a 400px window floating mid-screen buries the resume/letter it edits.
   Dock it as a full-width bottom sheet so the document stays visible above it. */
@media (max-width: 640px) {
  .doc-assist-floating {
    right: 0; left: 0; bottom: 0;
    width: 100%; max-width: 100%;
    height: min(78vh, 560px);
    border-radius: 14px 14px 0 0;
  }
}
/* Native-window-style resize grips: four edges + four corners. Thin strips that
   sit in the panel's padding gutter, so they never cover the content. */
.doc-assist-resize { position: absolute; z-index: 2; }
.doc-assist-resize-n { top: 0; left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.doc-assist-resize-s { bottom: 0; left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.doc-assist-resize-e { top: 8px; bottom: 8px; right: 0; width: 6px; cursor: ew-resize; }
.doc-assist-resize-w { top: 8px; bottom: 8px; left: 0; width: 6px; cursor: ew-resize; }
.doc-assist-resize-ne { top: 0; right: 0; width: 13px; height: 13px; cursor: nesw-resize; }
.doc-assist-resize-nw { top: 0; left: 0; width: 13px; height: 13px; cursor: nwse-resize; }
.doc-assist-resize-se { bottom: 0; right: 0; width: 15px; height: 15px; cursor: nwse-resize; }
.doc-assist-resize-sw { bottom: 0; left: 0; width: 13px; height: 13px; cursor: nesw-resize; }
.doc-assist-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; flex-shrink: 0; cursor: grab; user-select: none;
  border-bottom: 1px solid color-mix(in srgb, var(--cb-border) 70%, transparent);
  background: color-mix(in srgb, var(--cb-ai-soft) 60%, var(--cb-panel-bg));
}
.doc-assist-header:active { cursor: grabbing; }
.doc-assist-title { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--cb-ai-ink); }
.doc-assist-close { border: 0; background: transparent; color: var(--cb-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 5px; border-radius: 6px; }
.doc-assist-close:hover { background: color-mix(in srgb, var(--cb-muted) 18%, transparent); color: var(--cb-text); }
.doc-assist-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; overflow: hidden; }
.doc-assist-footer { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid color-mix(in srgb, var(--cb-border) 70%, transparent); }
/* Context (job requirements + guiding principles) is pinned at the top and
   divided from the conversation below by a rule, so the two never blur together. */
.doc-assist-context { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--cb-border) 85%, transparent); }
.doc-assist-context.hidden { display: none; }
.doc-assist-convo { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.doc-assist-ref { border: 1px solid color-mix(in srgb, var(--cb-border) 70%, transparent); border-radius: 10px; padding: 8px 10px; background: color-mix(in srgb, var(--cb-panel-bg) 92%, var(--cb-border)); max-height: 130px; overflow-y: auto; flex-shrink: 0; }
.doc-assist-ref-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; }
.doc-assist-ref-q { font-weight: 600; margin-bottom: 6px; }
.doc-assist-ref-list { margin: 0; padding-left: 18px; font-size: 12px; }
.doc-assist-ref-list li { margin: 3px 0; }
.doc-assist-principles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.doc-assist-principles-label { font-size: 11px; }
.doc-assist-principle { display: inline-flex; align-items: center; gap: 4px; }
.doc-assist-principle-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 2px; }
.doc-assist-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.doc-assist-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.doc-assist-chip.chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.doc-assist-input { display: flex; gap: 8px; align-items: flex-end; }
/* Cap the resizable input so dragging its grip can't grow it past the panel and
   push Send off-screen — the whole window looked like it vanished (#AI-assist). */
.doc-assist-input textarea { flex: 1 1 auto; border: 1px solid var(--cb-border); border-radius: 8px; padding: 9px 10px; background: var(--cb-input-bg); color: var(--cb-text); font-family: var(--cb-font-body); font-size: 13px; resize: vertical; max-height: 30vh; }
/* Summary AI-assist: the running draft pinned at the top of the window (mirrors
   .exp-assist-memory), plus the AI-gen / apply action row in the footer. */
.doc-assist-draft { flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--cb-border) 70%, transparent); border-radius: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--cb-panel-bg) 92%, var(--cb-border)); max-height: 34vh; overflow-y: auto; }
.doc-assist-draft-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }
.doc-assist-draft-body { font-size: 13px; line-height: 1.5; color: var(--cb-text); overflow-wrap: anywhere; }
.doc-assist-draft-body p { margin: 0; }
.doc-assist-draft-body p + p { margin-top: 0.9em; }
.doc-assist-actions { display: flex; gap: 8px; justify-content: space-between; align-items: center; }
/* 2–4 paragraph summaries read as distinct blocks with a real blank line between. */
.summary-para + .summary-para { margin-top: 0.9em; }

/* Job Application suite: tabbed match → resume → cover (+ optional research). */
.job-app-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--cb-border); margin-bottom: 16px; }
.job-app-tab { appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--cb-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: color 120ms ease, border-color 120ms ease; }
.job-app-tab:hover:not(:disabled) { color: var(--cb-text); }
.job-app-tab.active { color: var(--cb-text); border-bottom-color: var(--cb-accent, currentColor); }
.job-app-tab:disabled { opacity: 0.38; cursor: not-allowed; }
.job-app-tab-num { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; background: color-mix(in srgb, var(--cb-muted) 22%, transparent); color: var(--cb-text); }
.job-app-tab.active .job-app-tab-num { background: var(--cb-accent, currentColor); color: #fff; }
.job-app-tab-optional { font-weight: 600; }
.job-app-tab-optional:not(.active) { font-style: italic; }
.job-app-tab-opt { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; padding: 2px 6px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cb-border) 80%, transparent); color: var(--cb-muted); }
.job-app-pane { display: flex; flex-direction: column; gap: 12px; }
.job-app-pane-lede { margin: 0; font-size: 13px; color: var(--cb-muted); line-height: 1.5; }
.job-app-hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--cb-muted); border-left: 2px solid var(--cb-accent, currentColor); padding: 6px 0 6px 10px; }
/* Skip-match option: a real bordered row so the box and its label read as one control. */
.job-app-bypass { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--cb-border) 75%, transparent); border-radius: 10px; background: var(--cb-subtle-bg); cursor: pointer; }
.job-app-bypass:hover { border-color: color-mix(in srgb, var(--cb-accent, currentColor) 45%, var(--cb-border)); }
.job-app-bypass input[type="checkbox"] { margin: 1px 0 0; width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.job-app-bypass-text { line-height: 1.45; color: var(--cb-muted); }
.job-app-bypass-text strong { color: var(--cb-text); }
.job-app-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid color-mix(in srgb, var(--cb-border) 70%, transparent); border-radius: 10px; padding: 10px 12px; }
.job-app-artifact { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.job-app-artifact .research-report { max-height: 46vh; overflow-y: auto; }
/* Resume artifact renders the PDF-faithful page (.resume-rich-editor .ql-editor,
   in lockstep with resume_pdf.py); the fixed 8.5in page scrolls inside the tab. */
.job-app-resume-preview { max-height: 60vh; overflow: auto; border-radius: 10px; background: color-mix(in srgb, var(--cb-panel-bg) 92%, var(--cb-border)); }

.job-app-head-actions { display: flex; gap: 8px; align-items: center; }
.job-app-save { display: flex; flex-direction: column; gap: 10px; }
.job-app-save-summary { font-size: 13px; color: var(--cb-muted); }
.job-app-save-summary strong { color: var(--cb-text); }

/* Resume Upload page — the isolated ingestion entry point. */
.resume-upload-card { max-width: 620px; }
.ru-eyebrow { margin: 0 0 4px; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; color: var(--cb-accent, currentColor); }
.ru-lede { margin: 6px 0 18px; line-height: 1.55; max-width: 52ch; }
.ru-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 30px 20px; border: 1.5px dashed color-mix(in srgb, var(--cb-accent, currentColor) 45%, var(--cb-border)); border-radius: 14px; background: color-mix(in srgb, var(--cb-accent, currentColor) 5%, transparent); cursor: pointer; transition: border-color 140ms ease, background 140ms ease; }
.ru-drop:hover, .ru-drop:focus-visible { border-color: var(--cb-accent, currentColor); background: color-mix(in srgb, var(--cb-accent, currentColor) 10%, transparent); outline: none; }
.ru-drop-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cb-accent, currentColor); color: #fff; font-size: 20px; font-weight: 700; }
.ru-drop-primary { font-size: 15px; font-weight: 700; color: var(--cb-text); }
.ru-drop-secondary { font-size: 12.5px; color: var(--cb-muted); }
.ru-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.ru-step { display: flex; gap: 12px; align-items: flex-start; }
.ru-step-num { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--cb-muted) 20%, transparent); color: var(--cb-text); }
.ru-step-title { display: block; font-size: 13.5px; font-weight: 700; color: var(--cb-text); }
.ru-step-body { display: block; font-size: 13px; color: var(--cb-muted); line-height: 1.45; }

/* ---------------------------------------------------------------------------
   Onboarding tour (onboarding-tour.js): full-screen click-blocker, a
   box-shadow "spotlight" cutout over the highlighted control, and a positioned
   tooltip card that points at the target with an arrow. Kept below the boot
   overlay (z-index 3000). Uses the shared --cb-* tokens so it themes (day/night).
--------------------------------------------------------------------------- */
.tour-blocker { position: fixed; inset: 0; z-index: 2500; background: transparent; }
.tour-blocker--dim { background: rgba(20, 18, 16, 0.55); }
.tour-spotlight {
  position: fixed; z-index: 2505; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(20, 18, 16, 0.55), 0 0 0 4px var(--cb-ai-soft);
  outline: 3px solid var(--cb-ai); outline-offset: 2px;
  transition: left 0.18s ease, top 0.18s ease, width 0.18s ease, height 0.18s ease;
}
.tour-card {
  position: fixed; z-index: 2520; width: 320px; max-width: calc(100vw - 24px);
  background: var(--cb-panel-bg); color: var(--cb-text);
  border: 1px solid var(--cb-border); border-radius: 14px;
  box-shadow: var(--cb-shadow); padding: 16px 18px 14px;
}
/* Arrow: a small triangle on the edge facing the spotlight. Two stacked
   triangles fake a 1px border matching the card (border tri sits 1px outside). */
.tour-card::before, .tour-card::after {
  content: ""; position: absolute; width: 0; height: 0; border: 9px solid transparent;
}
.tour-card:not([data-arrow])::before, .tour-card:not([data-arrow])::after { display: none; }
.tour-card[data-arrow="left"]::before  { left: -18px; top: 22px; border-right-color: var(--cb-border); }
.tour-card[data-arrow="left"]::after   { left: -16px; top: 22px; border-right-color: var(--cb-panel-bg); }
.tour-card[data-arrow="right"]::before { right: -18px; top: 22px; border-left-color: var(--cb-border); }
.tour-card[data-arrow="right"]::after  { right: -16px; top: 22px; border-left-color: var(--cb-panel-bg); }
.tour-card[data-arrow="up"]::before    { top: -18px; left: 24px; border-bottom-color: var(--cb-border); }
.tour-card[data-arrow="up"]::after     { top: -16px; left: 24px; border-bottom-color: var(--cb-panel-bg); }
.tour-card[data-arrow="down"]::before  { bottom: -18px; left: 24px; border-top-color: var(--cb-border); }
.tour-card[data-arrow="down"]::after   { bottom: -16px; left: 24px; border-top-color: var(--cb-panel-bg); }

.tour-card-top { display: flex; align-items: center; justify-content: space-between; }
.tour-card-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cb-ai-ink);
}
.tour-card-glyph { display: inline-flex; color: var(--cb-ai); }
.tour-card-glyph svg { display: block; }
.tour-card-close {
  border: none; background: transparent; color: var(--cb-muted); cursor: pointer;
  font-size: 22px; line-height: 1; padding: 0 2px;
}
.tour-card-close:hover { color: var(--cb-text); }
.tour-card-title { font-family: var(--cb-font-display); font-size: 21px; margin: 10px 0 6px; }
.tour-card-body { font-size: 13.5px; line-height: 1.55; color: var(--cb-muted); margin: 0 0 14px; }
.tour-card-body strong { color: var(--cb-text); font-weight: 700; }
.tour-progress { display: flex; gap: 6px; align-items: center; margin: 0 0 14px; }
.tour-dot { width: 6px; height: 6px; border-radius: 999px; background: transparent; border: 1px solid color-mix(in srgb, var(--cb-muted) 55%, transparent); transition: width 0.2s ease, background 0.2s ease; }
.tour-dot.is-done { background: color-mix(in srgb, var(--cb-ai) 55%, transparent); border-color: transparent; }
.tour-dot.is-active { width: 18px; background: var(--cb-ai); border-color: transparent; }
.tour-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-card-dsa { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cb-muted); cursor: pointer; }
.tour-card-dsa input { accent-color: var(--cb-ai); }
.tour-card-nav { display: flex; gap: 8px; }

/* Entrance reveal, restarted each step (see renderCard). */
@keyframes tourCardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.tour-card--in { animation: tourCardIn 0.26s cubic-bezier(0.22, 1, 0.36, 1); }

/* Topbar "?" tour activator — accent pill so it reads as "start here", not a
   grey ghost button lost among the chrome. */
.tour-help-btn {
  border: 1px solid color-mix(in srgb, var(--cb-ai) 55%, transparent);
  background: var(--cb-ai-soft); color: var(--cb-ai-ink);
  font-weight: 700; border-radius: 999px;
}
.tour-help-btn:hover { background: color-mix(in srgb, var(--cb-ai) 22%, var(--cb-ai-soft)); color: var(--cb-ai-strong); }

@media (prefers-reduced-motion: reduce) {
  .tour-card--in { animation: none; }
  .tour-spotlight { transition: none; }
  .tour-dot { transition: none; }
}

/* Job Search: saved-search rail (left) + form / run results (main). */
.job-search-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 12px; align-items: start; }
.job-search-rail { display: grid; gap: 8px; }
@media (max-width: 900px) {
  .job-search-layout { grid-template-columns: 1fr; }
  /* Keep the form near the top: saved searches scroll sideways instead of stacking. */
  .job-search-rail { grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); overflow-x: auto; padding-bottom: 4px; }
}
.job-search-rail-card { margin: 0; padding: 10px 12px; cursor: pointer; display: grid; gap: 2px; text-align: left; width: 100%; font: inherit; color: inherit; }
.job-search-rail-card:hover { border-color: color-mix(in srgb, var(--cb-accent) 45%, var(--cb-border)); }
.job-search-rail-card.active { border-color: var(--cb-accent); box-shadow: 0 0 0 1px var(--cb-accent); }
.job-search-rail-item { position: relative; }
.job-search-rail-item .job-search-rail-card { padding-right: 34px; }
.job-search-rail-x { position: absolute; top: 6px; right: 6px; border: 0; background: transparent; color: var(--cb-muted); cursor: pointer; width: 26px; height: 26px; border-radius: 999px; font-size: 16px; line-height: 1; }
.job-search-rail-x:hover, .job-search-rail-x:focus-visible { color: var(--cb-danger); background: color-mix(in srgb, var(--cb-danger) 12%, transparent); outline: none; }
.job-search-rail-card:focus-visible, .job-search-chip-x:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cb-accent) 55%, white);
  outline-offset: 2px;
}
.job-search-form .field-row { align-items: start; }
.job-search-form .tags, .job-search-filters .tags { margin-top: 0; align-items: center; }
.job-search-form input[type="checkbox"], .job-search-filters input[type="checkbox"] { width: auto; margin-right: 4px; }
.job-search-chip { display: inline-flex; align-items: center; gap: 4px; }
.job-search-chip small { font-weight: 500; opacity: 0.75; }
.job-search-chip-x { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 4px; min-width: 20px; min-height: 20px; font-size: 14px; line-height: 1; border-radius: 999px; }
.job-search-chip-removed { opacity: 0.55; text-decoration: line-through; }
.job-search-run-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.job-search-run-head h3 { margin: 0; }
.job-search-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; font-size: 13px; }
.job-search-filters input[type="search"] { width: auto; flex: 1 1 180px; }
.job-search-errors { margin: 0 0 10px; padding-left: 18px; font-size: 12.5px; color: var(--cb-muted); }
.job-search-status-unverified { background: color-mix(in srgb, var(--cb-muted) 18%, transparent); color: var(--cb-muted); }
.job-search-status-refreshing { font-size: 12px; }
.job-search-batch label { display: inline-flex; align-items: center; gap: 6px; }
.job-search-location-chips { margin-top: 6px; min-height: 24px; }
.job-search-locked-note { margin-top: 8px; font-size: 12.5px; }
.job-search-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; margin-top: 12px; font-size: 13px; }
.job-search-pager .btn { min-width: 34px; font-size: 15px; line-height: 1; }
.job-search-pager-label { padding: 0 6px; font-variant-numeric: tabular-nums; }
.job-search-pager select { width: auto; font-size: 12.5px; }
.job-search-remote-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; }
.job-search-form .job-search-remote-toggle input[type="checkbox"] { width: auto; margin: 0; }
.tag.match-strong, .tag.match-gap { border-color: color-mix(in srgb, currentColor 25%, transparent); }
.job-search-batch-spacer { flex: 1 1 auto; }
.job-search-batch-progress { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cb-muted); }
.job-search-batch-bar { display: inline-block; width: 120px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--cb-muted) 18%, transparent); overflow: hidden; }
.job-search-batch-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--cb-accent); transition: width 0.3s ease; }
@media (prefers-reduced-motion: reduce) { .job-search-batch-bar > span { transition: none; } }

/* Persistent crawl banner: shown while a Run / Run again is in flight; survives a
 * page refresh via the active-jobs reconnect. Indeterminate bar (no known total). */
.job-search-run-progress { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--cb-muted); }
.job-search-run-progress-bar { flex: 0 0 140px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--cb-muted) 18%, transparent); overflow: hidden; }
.job-search-run-progress-bar > span { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--cb-accent); animation: job-search-indeterminate 1.1s ease-in-out infinite; }
@keyframes job-search-indeterminate { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { .job-search-run-progress-bar > span { animation: none; width: 100%; } }

/* Posting card (.jsr): select · content · actions on one grid so titles, meta,
   match strips and buttons line up across every card. The left rail carries
   status (green / grey / red) in step with the tag. */
.jsr {
  --jsr-rail: var(--tone-strong-ink);
  --jsr-select-w: 24px;   /* checkbox column = its 24px hit target */
  --jsr-actions-w: 164px; /* fits the widest button, "✦ Evaluate match" (.ai-btn adds the star), at .btn.icon size */
  display: grid;
  grid-template-columns: var(--jsr-select-w) minmax(0, 1fr) var(--jsr-actions-w);
  gap: 4px 14px;
  align-items: start;
  padding: 12px 14px 12px 10px;
  border: 1px solid color-mix(in srgb, var(--cb-border) 60%, transparent);
  border-left: 3px solid var(--jsr-rail);
  background: var(--cb-subtle-bg);
}
/* `.card .card` (styles.css ~229) outranks `.jsr` for border-color; re-assert the rail there. */
.card .jsr { margin: 0; border-color: color-mix(in srgb, var(--cb-border) 60%, transparent); border-left-color: var(--jsr-rail); }
.jsr-unverified { --jsr-rail: var(--cb-muted); }
.jsr-expired { --jsr-rail: var(--tone-gap-ink); opacity: 0.72; }
.jsr-expired .jsr-title { text-decoration: line-through; text-decoration-thickness: 1px; }
.jsr-select { display: flex; justify-content: center; padding-top: 1px; }
.jsr-select .job-search-select { display: inline-flex; align-items: center; justify-content: center; min-width: var(--jsr-select-w); min-height: var(--jsr-select-w); margin: 0; cursor: pointer; }
.jsr-select .job-search-select input[type="checkbox"] { width: auto; margin: 0; }
.jsr-main { display: grid; gap: 3px; min-width: 0; }
.jsr-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.jsr-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.jsr-title a { color: inherit; text-decoration: none; }
.jsr-title a:hover, .jsr-title a:focus-visible { text-decoration: underline; }
.jsr-tags { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap; }
.jsr-tags .primary-badge { margin: 0; }
.jsr-meta { display: flex; flex-wrap: wrap; gap: 0 14px; font-size: 13px; color: var(--cb-muted); }
.jsr-company { color: var(--cb-text); font-weight: 600; }
.jsr-trail { font-size: 12px; color: var(--cb-muted); }
.jsr-actions { display: grid; gap: 6px; align-content: start; }
.jsr-actions .btn { width: 100%; justify-content: center; white-space: nowrap; }
.jsr-match {
  display: grid;
  grid-template-columns: auto minmax(60px, 160px) 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--cb-border) 80%, transparent);
  font-size: 12.5px;
  color: var(--cb-muted);
}
.jsr-match-pct { font-size: 16px; font-weight: 700; color: var(--cb-text); font-variant-numeric: tabular-nums; min-width: 3.2ch; }
.jsr-match-pct small { font-size: 11px; font-weight: 600; color: var(--cb-muted); margin-left: 1px; }
.jsr-match-bar { display: block; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--cb-muted) 18%, transparent); overflow: hidden; }
.jsr-match-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--jsr-match); }
.jsr-match.is-strong { --jsr-match: var(--tone-strong-ink); }
.jsr-match.is-partial { --jsr-match: var(--tone-partial-ink); }
.jsr-match.is-gap { --jsr-match: var(--tone-gap-ink); }
.jsr-match .btn { justify-self: end; }
@media (max-width: 900px) {
  .jsr { grid-template-columns: var(--jsr-select-w) minmax(0, 1fr); }
  .jsr-actions { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; }
  .jsr-actions .btn { width: auto; }
  .jsr-match { grid-template-columns: auto 1fr auto; }
  .jsr-match-note { grid-column: 1 / -1; order: 3; }
}

/* Fit summary modal: one verdict, then three theme columns. Accents are mixed with
   the theme text color so they stay legible in night mode. */
.fit-summary { display: grid; gap: 14px; white-space: normal; }
.fit-verdict { border-left: 3px solid var(--cb-accent); padding: 4px 0 4px 14px; }
.fit-verdict p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; max-width: 72ch; }
.fit-meta { font-size: 12.5px; }
.fit-stale { color: color-mix(in srgb, var(--tone-partial-ink) 65%, var(--cb-text)); }
.btn .fit-stale { margin-left: 6px; }
.fit-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 800px) { .fit-cols { grid-template-columns: 1fr; } }
.fit-col { border: 1px solid var(--cb-border); border-radius: 10px; background: var(--cb-subtle-bg); padding: 10px 12px; min-width: 0; }
.fit-col h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-size: 13px; }
.fit-themes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fit-theme-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; }
.fit-count { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--cb-panel-bg); border: 1px solid var(--cb-border); color: var(--cb-muted); }
.fit-detail { font-size: 13px; line-height: 1.45; color: var(--cb-text); margin-top: 2px; }
.fit-close { font-size: 13px; line-height: 1.45; margin-top: 4px; color: color-mix(in srgb, var(--tone-partial-ink) 65%, var(--cb-text)); }
.fit-close-label { font-weight: 600; }
.fit-empty { font-size: 13px; }