/* Career tools (configurator and switching chart): shared by the talk deck and the website.
   Uses the deck tokens (--sand, --ink, --navy-1, --grid, --font-*); the website page defines them on .career-tools. */
.ax { font-family: var(--font-mono); font-size: 15px; fill: var(--ink-3); }
.lbl { font-family: var(--font-body); font-size: 19px; font-weight: 500; }
.ax.goal-ax { fill: var(--sand); }
/* Configurator */
.cfg { gap: 14px; }
.cfg .assume { margin: 0; font-size: 14px; }
.cfg-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cfg-top .seg:last-child { margin-left: auto; }
.cfg-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.scn-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 11px;
  font: 500 17px var(--font-body); color: var(--ink-3); background: transparent;
  border: 1px solid var(--grid); border-radius: 6px; cursor: pointer;
}
.scn-btn:hover { color: var(--ink); border-color: var(--sand-line); }
.scn-btn.on { color: var(--ink); border-color: var(--sand); background: var(--navy-1); }
.scn-key { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.scn-line { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.cfg-grid { display: grid; grid-template-columns: 330px 1fr; gap: 36px; min-height: 0; }
.cfg-panel { display: flex; flex-direction: column; gap: 14px; }
.grp { display: flex; flex-direction: column; gap: 7px; }
.grp-k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); }
.seg { display: inline-flex; border: 1px solid var(--grid); border-radius: 6px; overflow: hidden; }
.seg-btn { font: 500 15px var(--font-body); color: var(--ink-3); background: transparent; border: 0; padding: 7px 12px; cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--grid); }
.seg-btn:hover { color: var(--ink); }
.seg-btn.on { color: var(--navy-0); background: var(--sand); }
.fld { display: grid; grid-template-columns: 1fr 104px 76px; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-2); }
.fld input {
  width: 100%; padding: 5px 8px; font: 500 15px var(--font-mono); color: var(--ink); text-align: right;
  background: var(--navy-1); border: 1px solid var(--grid); border-radius: 4px;
}
.fld input:focus { outline: none; border-color: var(--sand); }
.fld-u { font-size: 13px; color: var(--ink-3); }
.tgl { display: inline-flex; align-items: center; gap: 10px; font: 500 15px var(--font-body); color: var(--ink-2); background: transparent; border: 0; padding: 2px 0; cursor: pointer; }
.tgl-box { width: 16px; height: 16px; border: 1.5px solid var(--ink-3); border-radius: 4px; }
.tgl.on { color: var(--ink); }
.tgl.on .tgl-box { background: var(--sand); border-color: var(--sand); }
.cfg-chart { position: relative; height: 360px; flex: none; }
.cfg-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.story-chart { height: 470px; }
.cfg-chart-w { height: 280px; }
.ax.phase { fill: var(--ink-2); font-size: 14px; }
.lbl-off { font-weight: 400; font-size: 17px; }
.cfg-note { margin: 0; font-size: 18px; color: var(--ink-2); line-height: 1.45; }
.cfg-note strong { color: var(--sand); font-weight: 500; }
.scn-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.scn-kpi { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--grid); }
.scn-kpi.on { border-top-color: var(--sand); }
.scn-kpi .k { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.scn-kpi .v { font-family: var(--font-body); font-size: 30px; font-weight: 500; color: var(--ink); }
.scn-kpi .d { font-size: 16px; color: var(--ink-3); }
.scn-tip {
  position: absolute; top: 0; z-index: 3; min-width: 230px; padding: 12px 14px; pointer-events: none;
  background: var(--navy-1); border: 1px solid var(--sand-line); border-radius: 6px;
  display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--ink-3);
}
.scn-tip-h { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.scn-tip-r { display: grid; grid-template-columns: 18px 84px 1fr; align-items: center; gap: 10px; }
.scn-tip-r strong { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* Market value: switching interval */
.sw { gap: 14px; }
.sw-k { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.sw-grid { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
.sw-chart { position: relative; height: 330px; }
.sw-kpis { display: flex; flex-direction: column; gap: 12px; }
.sw-note { font-size: 16px; color: var(--ink-3); }

/* Configurator: controls that do not fit the chosen preset */
.locked { opacity: 0.3; pointer-events: none; }
.seg-btn:disabled, .tgl:disabled, .fld input:disabled { cursor: default; }

/* Configurator: total earnings, prominent */
.cfg-total { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; column-gap: 24px; padding: 12px 0 0 100px; border-top: 1px solid var(--sand-line); }
.cfg-total .k { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.cfg-total .v { font-family: var(--font-body); font-size: 38px; font-weight: 700; color: var(--sand); line-height: 1.1; }
.cfg-total .d { font-size: 16px; font-weight: 500; color: var(--ink-2); }


/* Website: the tools outside the deck get the deck tokens and a responsive layout */
.career-tools {
  --navy-0: #0a0f1a; --navy-1: #111827; --navy-2: #1a2234;
  --sand: #d4a574; --sand-light: #e8c9a4; --sand-dim: rgba(212, 165, 116, 0.15); --sand-line: rgba(212, 165, 116, 0.3);
  --ink: #f4f4f5; --ink-2: #a1a1aa; --ink-3: #9ca3af; --grid: rgba(244, 244, 245, 0.08);
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  color: var(--ink); font-family: var(--font-body);
}
.career-tools { max-width: 100%; overflow-x: hidden; }
.career-tools .cfg, .career-tools .sw { display: flex; flex-direction: column; min-width: 0; }
.career-tools .cfg-grid > *, .career-tools .sw-grid > *, .career-tools .cfg-right { min-width: 0; }
.career-tools .cfg-chart, .career-tools .sw-chart { width: 100%; }
.career-tools .chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.career-tools .assume, .career-tools .source { font-size: 14px; color: var(--ink-3); line-height: 1.5; margin: 0; }
.career-tools .source { font-family: var(--font-mono); font-size: 13px; }
@media (max-width: 900px) {
  .career-tools .seg { display: flex; flex-wrap: wrap; max-width: 100%; }
  .career-tools .seg-btn { flex: 1 1 auto; }
  .career-tools .cfg-presets .scn-btn { font-size: 15px; }
  .career-tools .fld { grid-template-columns: 1fr 96px 64px; }
  .career-tools .cfg-grid, .career-tools .sw-grid { grid-template-columns: 1fr; }
  .career-tools .cfg-top { flex-direction: column; align-items: flex-start; }
  .career-tools .cfg-top .seg:last-child { margin-left: 0; }
  .career-tools .cfg-total { grid-template-columns: 1fr; padding-left: 0; }
  .career-tools .scn-kpis { grid-template-columns: 1fr; }
  .career-tools .cfg-chart { height: 300px; }
}