/* Calibre System 03: the value model. The CEO board's top row, value against exposure, what to fund next, the reviewer's card, the owner's Money page, and the employee's value screens. */

/* ---------- CEO board: the four figures ---------- */
.vb { display: flex; flex-direction: column; gap: 28px; }
.vb-head { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 0; }
.vb-head h2 { max-width: 26ch; }
.vb-head-note { max-width: 62ch; }

/* Not cards. One quiet band between two hairlines, wide for the two money figures, narrow for the two counts. */
.vb-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
.vb-fig { display: flex; flex-direction: column; min-width: 0; padding: 28px 28px 26px; border-left: 1px solid var(--line); }
.vb-fig:first-child { border-left: 0; padding-left: 0; }
.vb-label { margin: 0; font: 600 11px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.vb-main { margin: 14px 0 0; font: 500 34px/1.04 var(--font-display); letter-spacing: -0.018em; font-variant-numeric: lining-nums; font-optical-sizing: auto; overflow-wrap: anywhere; }
.vb-fig.is-major .vb-main { font-size: 46px; letter-spacing: -0.024em; }
.vb-main-unit { font: 400 17px/1 var(--font-display); letter-spacing: 0; color: var(--ink-2); }
.vb-main.is-empty { font: italic 400 22px/1.2 var(--font-display); letter-spacing: 0; color: var(--ink-3); padding-top: 10px; }
.vb-unit { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.vb-trend { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font: 500 12px/1 var(--font-mono); }
.vb-trend.up { color: var(--pine); } .vb-trend.down { color: var(--danger); }
.vb-note { margin: 10px 0 0; max-width: 36ch; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.vb-note strong { color: var(--ink); font-weight: 600; }
.vb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 16px 0 0; list-style: none; }
.vb-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2); font: 500 11.5px/1 var(--font-ui); color: var(--ink-2); white-space: nowrap; }
.vb-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: none; }
.vb-chip .num { color: var(--ink); }
.vb-chip-pine { background: var(--pine-soft); border-color: color-mix(in oklch, var(--pine) 28%, var(--line)); color: var(--ink); }
.vb-chip-pine::before { background: var(--pine); }
.vb-chip-brass { background: var(--brass-soft); border-color: color-mix(in oklch, var(--brass) 45%, var(--line)); color: var(--ink); }
.vb-chip-brass::before { background: var(--brass); }
.vb-books { margin: -12px 0 0; max-width: 90ch; }

@media (max-width: 1080px) {
  .vb-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vb-fig { padding: 24px 24px 22px; }
  .vb-fig:nth-child(odd) { border-left: 0; padding-left: 0; }
  .vb-fig:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .vb-row { grid-template-columns: minmax(0, 1fr); }
  .vb-fig, .vb-fig:nth-child(odd) { border-left: 0; padding: 22px 0 20px; }
  .vb-fig + .vb-fig { border-top: 1px solid var(--line); }
  .vb-fig.is-major .vb-main { font-size: 40px; }
  .vb-head-note { margin-left: 0; }
}

/* ---------- Value against exposure ---------- */
.xf-value-h { width: 220px; }
.xf-value { padding-left: 16px; white-space: nowrap; }
.xf-vr { position: relative; display: inline-block; width: 92px; height: 8px; margin-right: 10px; vertical-align: middle; border-radius: 4px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.xf-vr i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--pine); min-width: 3px; }
.vb-teams .xf { min-width: 820px; }

/* ---------- What to fund next ---------- */
.vb-amb { white-space: nowrap; }
.vb-fund-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vb-fund-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.vb-fund-list li:first-child { border-top: 0; padding-top: 4px; }
.vb-rank { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pine-soft); font-size: 12px; }
.vb-fund-theme { margin: 0; font: 500 20px/1.2 var(--font-display); letter-spacing: -0.008em; text-transform: none; }
.vb-fund-main p { margin-top: 3px; }
.vb-fund-fig { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.vb-fund-value { font: 500 17px/1.2 var(--font-display); letter-spacing: -0.005em; font-variant-numeric: lining-nums; }
.vb-fund-per { font-size: 12px; color: var(--ink-2); font-family: var(--font-ui); font-weight: 400; }
.vb-hours { max-width: 90ch; padding-top: 4px; }
@media (max-width: 640px) {
  .vb-fund-list li { grid-template-columns: 28px minmax(0, 1fr); }
  .vb-fund-fig { grid-column: 2; align-items: flex-start; text-align: left; }
  .vb-fund-list li > .badge { grid-column: 2; justify-self: start; }
}

/* ---------- Reviewer: what it is worth, in case detail ---------- */
.case-value .cv-axes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.cv-axis { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.cv-axis:first-child { border-top: 0; padding-top: 0; }
.cv-axis-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cv-axis-name { font: 600 14px/1.3 var(--font-ui); }
.cv-said { color: var(--ink); }
.cv-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cv-freed { margin-top: 12px; }
.cv-ambition { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.cv-money { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-control); background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; }
.cv-money .num { font-family: var(--font-display); font-size: 16px; letter-spacing: -0.005em; }
.case-value .chips { gap: 6px; }
.case-value .chip { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.link { padding: 0; border: 0; background: none; font: inherit; color: var(--pine); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Owner: Money in the company profile ---------- */
.money { display: flex; flex-direction: column; gap: 20px; max-width: 820px; }
.money-head { display: flex; align-items: flex-start; gap: 16px; }
.money-card { display: flex; flex-direction: column; gap: 12px; }
.money-currency { width: 120px; margin: 0; }
.money-teams { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.money-teams li { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 16px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.money-teams li:first-child { border-top: 0; }
.money-teams .field { margin: 0; }
.money-name { font-size: 14px; font-weight: 500; }
.money-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 480px; margin-top: 8px; }
@media (max-width: 640px) { .money-teams li { grid-template-columns: minmax(0, 1fr); gap: 6px; } .money-pair { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Employee: what it is worth ---------- */
.vs-groups { gap: 28px; }
.vs-group { display: flex; flex-direction: column; gap: 10px; }
.vs-legend { margin: 0; font: 600 15px/1.35 var(--font-ui); color: var(--ink); }
.vs-group .chips-row { gap: 8px; }
.vs-group .chips-row .chip { min-height: 44px; padding: 8px 16px; font-size: 15px; }