/* Graphite + sage. Shared by the current game and legacy saves. */
:root {
  color-scheme: dark;
  --paper: #252725;
  --white: #1e211f;
  --ink: #f1f2ed;
  --muted: #b6bab2;
  --line: #424740;
  --green: #bfd0a4;
  --lime: #343e2e;
  --orange: #d5b586;
  --red: #f0a198;
  --blue: #d0e2b9;
  --shadow: 0 12px 36px #00000024;
  --surface-raised: #2a2f29;
  --surface-hover: #30382c;
  --surface-accent: #30382b;
  --accent-ink: #171e13;
  --accent-line: #667459;
  --warning-surface: #373025;
  --warning-line: #8d7652;
  --danger-surface: #3b2c2a;
  --workshop-peach: var(--white);
  --workshop-lilac: var(--white);
  --workshop-card: var(--white);
  --workshop-accent: var(--green);
  --workshop-inactive: #292c29;
  --workshop-inactive-line: #454a43;
  --body-copy-size: 17px;
}
html, body { background: var(--paper); color: var(--ink); }
/* Solution carousel: one readable offer and a visible edge of the next. */
.offer-carousel { min-width: 0; max-width: 860px; margin: 24px auto 0; }
.carousel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.carousel-heading h3 { font: inherit; font-size: 20px; font-weight: 700; line-height: 1.3; }
.carousel-counter { flex-shrink: 0; color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.economy-layout .offer-carousel .offers { display: flex; position: relative; align-items: flex-start; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 0; overscroll-behavior-x: contain; scrollbar-width: none; padding: 0 0 8px; margin: 0; }
.offer-carousel .offers::-webkit-scrollbar { display: none; }
.offer-carousel .offers::after { content: ''; flex: 0 0 calc(14% - 16px); }
.economy-layout .offer-carousel .offer { flex: 0 0 86%; box-sizing: border-box; min-width: 0; margin: 0; padding: 24px; scroll-snap-align: start; background: #30352e; border: 1px solid #56624d; border-radius: 22px; box-shadow: 0 8px 20px #00000024; }
.offer-carousel .offer.carousel-active { border-color: #71815f; }
.offer-carousel .offer:only-child { flex-basis: 100%; }
.offer-carousel .offer.expert-offer { background: #333c2d; border-color: #96aa7e; }
.offer-carousel .provider-heading { gap: 12px; margin-bottom: 18px; }
.offer-carousel .provider-heading .person-portrait { width: 48px; height: 48px; }
.offer-carousel .provider-heading .speaker-avatar { width: 48px; height: 48px; flex-basis: 48px; }
.offer-carousel .provider-heading b { font-size: 16px; line-height: 1.4; }
.offer-carousel .provider-heading small { font-size: 14px; line-height: 1.4; }
.offer-carousel .offer-title { font-size: 24px; line-height: 1.25; }
.offer-carousel .contractor-pitch { font-size: 17px; line-height: 1.5; }
.offer-carousel .cost-with-scope { flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.offer-carousel .cost-with-scope > div { flex: 1 1 200px; }
.offer-carousel .cost-with-scope strong { font-size: 26px; }
.offer-carousel .contract-effects { padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.offer-carousel .contract-effects > div { align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); font-size: 16px; gap: 12px; }
.offer-carousel .contract-effects > div > span { flex: 1; min-width: 0; }
.offer-carousel .contract-effects strong { max-width: 55%; white-space: normal; text-align: right; overflow-wrap: anywhere; }
.offer-carousel .cost-explanation { margin-block: 16px; }
.offer-carousel .cost-explanation summary { min-height: 44px; align-content: center; font-size: 16px; }
.offer-carousel .offer-buy { margin-top: 18px; }
.offer-carousel .offer-buy > .button { width: 100%; min-height: 54px; }
.carousel-controls { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 8px; margin-top: 14px; }
.carousel-arrow { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--green); border-radius: 50%; background: transparent; color: var(--green); cursor: pointer; }
.carousel-arrow:disabled { border-color: var(--line); color: var(--muted); opacity: .45; cursor: default; }
.carousel-dots { display: flex; justify-content: center; flex-wrap: wrap; }
.carousel-dot { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; }
.carousel-dot span { width: 8px; height: 8px; border-radius: 10px; background: #848b7f; }
.carousel-dot.active span { width: 26px; background: var(--green); }
.carousel-hint { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 0; font-size: 15px; color: var(--muted); }
.offer-irina.story-note { margin: 20px auto; max-width: 860px; padding: 14px 16px; border: 0; border-radius: 16px; background: var(--surface-raised); }
.offer-irina .speaker-avatar, .offer-irina .person-portrait { width: 44px; height: 44px; }
.offer-irina .story-message { font-size: 17px; line-height: 1.5; }
.offer-irina .speaker-name > span { display: none; }
.expert-row.expert-compact { max-width: 860px; margin: 24px auto 0; padding: 20px 0 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.expert-prompt { display: flex; align-items: center; gap: 12px; font-size: 17px; }
.expert-prompt svg { color: var(--green); flex-shrink: 0; }
@media(max-width:600px) {
  .offer-carousel { margin-top: 20px; }
  .carousel-heading h3 { font-size: 18px; }
  .economy-layout .offer-carousel .offers { gap: 12px; }
  .offer-carousel .offers::after { flex-basis: calc(14% - 12px); }
  .economy-layout .offer-carousel .offer { padding: 18px 16px; border-radius: 18px; }
  .offer-carousel .offer-title { font-size: 22px; }
  .offer-carousel .provider-heading b { font-size: 15px; }
  .offer-carousel .provider-heading .person-portrait, .offer-carousel .provider-heading .speaker-avatar { width: 40px; height: 40px; flex-basis: 40px; }
  .offer-carousel .contract-effects > div { font-size: 15px; }
  .offer-carousel .contract-effects strong { max-width: 50%; }
  .expert-row.expert-compact { align-items: stretch; }
  .expert-compact > .button { width: 100%; }
}
body { min-height: 100dvh; }
.welcome.welcome-text { grid-template-columns: minmax(0,1fr); width: 100%; max-width: 700px; margin-inline: auto; padding-block: 44px 32px; gap: 0; }
.welcome-text .story-note.letter { margin-bottom: 0; }
.welcome-text .story-message { font-family: inherit; font-weight: 400; line-height: 1.55; }
.story-message, .modal-copy, .personal-action-status.compact-action-hint { font-size: var(--body-copy-size); }
.coach-card .story-message { font-size: var(--body-copy-size); line-height: 1.5; }
.coach-card-docked { max-height: min(62dvh,480px); }
::selection { background: var(--green); color: var(--accent-ink); }
button, a, summary { touch-action: manipulation; }
button { line-height: 1.25; }
:where(button,a,input,select,textarea,summary):focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.skip-link { background: var(--green); color: var(--accent-ink); }
.button { border-radius: 14px; }
.button { line-height: 1.25; }
.button:hover:not(:disabled) { transform: none; }
.button > svg, .text-button > svg { display: block; align-self: center; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.25; }
.coach-actions > .button, .coach-actions > .text-button { min-height: 46px; line-height: 20px; }
.close, .coach-dismiss { line-height: 1; }
.button.primary, .decision-context .button {
  background: var(--green); color: var(--accent-ink); border: 1px solid var(--green); box-shadow: none;
}
.button.primary:hover:not(:disabled), .decision-context .button:hover:not(:disabled) { background: #d0dfb9; border-color: #d0dfb9; }
.button.secondary, .button.ghost { background: transparent; color: var(--green); border: 1px solid var(--accent-line); }
.button.secondary:hover:not(:disabled), .button.ghost:hover:not(:disabled) { background: var(--surface-hover); }
.button.danger { background: var(--danger-surface); color: var(--red); border-color: var(--red); }
.button:disabled { opacity: .48; }
.text-button, .inline-link, .back-button, .bookmark, .footer button { color: var(--muted); }
.text-button:hover, .inline-link:hover, .footer button:hover, .bookmark.saved { color: var(--green); }
.back-button, .close, .coach-dismiss { background: var(--surface-raised); border-color: var(--line); color: var(--ink); }
.close:hover, .back-button:hover, .coach-dismiss:hover { background: var(--surface-hover); }
.positive { color: var(--green); }
.negative { color: var(--red); }
.brand-icon { background: var(--surface-accent); color: var(--green); }
.nav button.active, .nav button:hover { background: var(--surface-accent); color: var(--green); }
.dot { background: var(--green); }
.welcome h1 em { color: var(--green); }
.scene-art, .workshop-art { mix-blend-mode: normal; filter: saturate(.78) brightness(.9); }
.scene-art { height: auto; aspect-ratio: 1.5; object-fit: cover; border: 1px solid var(--line); border-radius: 16px; }
.art-frame, .workshop-art, .art-caption { border-color: var(--line); }
.art-stamp { background: var(--surface-accent); color: var(--green); border-color: var(--accent-line); }
.art-caption, .workshop-chapter .round-label, .workshop-title > span,
.workshop-time .timer, .reputation-counter, .speaker-name span { color: var(--muted); }
.month-steps li { border-color: var(--line); color: var(--muted); }
.month-steps .completed { background: var(--surface-accent); border-color: var(--accent-line); color: var(--green); }
.month-steps .current { background: var(--green); border-color: var(--green); color: var(--accent-ink); }
.story-note, .story-note.letter { background: var(--surface-raised); border-color: var(--accent-line); }
.living-story .speaker-name { color: var(--green); }
.story-note.living-story { background: transparent; }
.personal-action-status, .action-meter { background: var(--white); border-color: var(--line); border-left-color: var(--green); }
.personal-action-status strong, .workspace-action-badge { background: var(--green); color: var(--accent-ink); }
.action-meter-heading, .action-meter p { color: var(--ink); }
.action-meter .action-meter-heading strong { background: var(--surface-accent); color: var(--green); }
.action-meter.spent { background: var(--surface-raised); border-color: var(--line); }
.workspace-tabs > button { color: var(--muted); }
.workspace-tabs > button.selected { color: var(--green); }
.workspace-tabs > button.selected::after { background: var(--green); }
.living-game .economy-instruction { color: var(--muted); }
.living-economy { gap: 22px; }
.living-economy .economy-jumps button { background: transparent; color: var(--muted); border-color: var(--line); border-radius: 10px; }
.living-economy .economy-jumps button:hover { background: var(--surface-raised); color: var(--ink); }
.living-economy .economy-jumps button:last-child { background: var(--surface-accent); color: var(--green); border-color: var(--accent-line); }
.living-metric, .conversion-card, .conversion-cv2 { background: var(--white); border-color: var(--line); color: var(--ink); border-radius: 18px; }
.living-economy .living-metric > .economy-row.actionable:hover { background: var(--surface-hover); }
.living-economy .metric-symbol { background: #3b4732; color: var(--green); }
.living-economy .metric-copy b { color: var(--ink); }
.living-economy .metric-copy small, .living-economy .metric-unit { color: var(--muted); }
.living-economy .metric-trigger, .living-economy .metric-trigger.ready { color: var(--green); }
.living-economy .metric-number { color: var(--ink); }
.metric-help, .living-economy .metric-with-help > .metric-help,
.conversion-main > .metric-help, .conversion-cv2 .conversion-main > .metric-help,
.conversion-result > .metric-help, .month-profit .metric-help {
  color: var(--muted); font-weight: 500; width: 44px; min-width: 44px; height: 44px;
}
.metric-help { position: relative; border-radius: 50%; }
.metric-help::before { content: ''; position: absolute; inset: 7px; border: 1px solid currentColor; border-radius: 50%; pointer-events: none; }
.metric-help:hover, .living-economy .metric-help:hover, .month-profit .metric-help:hover { color: var(--ink); background: var(--surface-hover); border-radius: 50%; }
.conversion-card .conversion-code, .conversion-card .conversion-rate { color: var(--green); }
.conversion-title { color: var(--ink); font-weight: 500; }
.conversion-base, .conversion-cv2 .conversion-base, .conversion-result span { color: var(--muted); }
.conversion-choice.actionable:hover { background: var(--surface-hover); }
.conversion-result, .conversion-cv2 .conversion-result { border-color: var(--line); }
.conversion-result strong { color: var(--ink); }
.conversion-rate { font-weight: 650; letter-spacing: -1px; }
.conversion-bridge { color: var(--muted); }
.conversion-bridge::before, .conversion-bridge::after { background: var(--line); }
.sales-capacity { background: var(--surface-accent); border-color: var(--accent-line); border-radius: 18px; }
.production-load { padding: 0 18px 18px; }
.production-load progress { height: 9px; background: #4b5147; }
.production-load progress::-webkit-progress-bar { background: #4b5147; }
.production-load progress::-webkit-progress-value { background: var(--green); }
.production-load progress::-moz-progress-bar { background: var(--green); }
.production-load span { color: var(--muted); margin-top: 10px; }
.capacity-limited { background: var(--warning-surface); border-color: var(--warning-line); }
.capacity-warning { color: var(--orange); }
.living-economy .tutorial-dim, .living-economy.tutorial-board .fact-row { color: var(--muted); }
.living-economy .tutorial-quiet { background: var(--workshop-inactive); border-color: var(--workshop-inactive-line); }
.living-economy .tutorial-quiet .metric-copy b, .living-economy .tutorial-quiet .metric-number,
.living-economy .tutorial-quiet .conversion-title, .living-economy .tutorial-quiet .conversion-base,
.living-economy .tutorial-quiet .metric-copy small, .living-economy .tutorial-quiet .conversion-result,
.living-economy .tutorial-quiet .conversion-result strong, .living-economy .tutorial-quiet .production-load span { color: #bcc1b7; }
.living-economy .living-metric > .economy-row.tutorial-spotlight { background: var(--surface-accent); border-color: var(--green); }
.workshop-receipt { background: var(--white); border-color: var(--line); border-radius: 20px; padding: 22px; }
.receipt-heading { color: var(--green); border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 0; }
.receipt-heading h2 { color: var(--ink); }
.workshop-receipt .living-metric { border-color: var(--line); }
.living-economy .fact-row { display: grid; grid-template-columns: minmax(0,1fr) auto; border-color: var(--line); }
.living-economy .fact-row .metric-copy { grid-column: 1; }
.living-economy .fact-row .metric-number { grid-column: 2; justify-self: end; }
.living-economy .workshop-receipt .living-metric > .economy-row { grid-template-columns: minmax(0,1fr) auto 22px; grid-template-rows: auto; padding: 22px 42px 22px 0; gap: 8px 12px; }
.living-economy .workshop-receipt .metric-copy { grid-column: 1; grid-row: 1; }
.living-economy .workshop-receipt .metric-number { grid-column: 2; grid-row: 1; font-size: 21px; text-align: right; }
.living-economy .workshop-receipt .metric-trigger { grid-column: 3; grid-row: 1; }
.living-economy .workshop-receipt .metric-symbol { display: none; }
.living-expenses { margin-top: 18px; }
.expenses-heading { background: #252a23; color: var(--ink); border-color: #515c47; border-radius: 14px; padding: 16px 14px; }
.expenses-heading:hover { background: var(--surface-hover); }
.expenses-heading > span { font-weight: 500; }
.expenses-heading > svg { color: var(--green); }
.expenses-toggle-hint { color: var(--green); text-decoration: none; font-weight: 500; }
.expenses-toggle-hint > span { display: inline-block; border: 1px solid var(--green); border-radius: 10px; padding: 7px 12px; }
.expenses-toggle-hint > .expenses-hide { display: none; }
.living-expenses[open] .expenses-toggle-hint > .expenses-show { display: none; }
.living-expenses[open] .expenses-toggle-hint > .expenses-hide { display: inline-block; }
.living-economy .month-profit { position: relative; background: var(--surface-accent); border: 1px solid var(--accent-line); border-left: 4px solid var(--green); color: var(--ink); border-radius: 15px; padding: 20px 18px; }
.living-economy .month-profit h3 { color: var(--green); font-weight: 500; padding-right: 40px; }
.month-profit h3 .metric-help { position: absolute; top: 12px; right: 8px; }
.living-economy .month-profit p { color: var(--muted); margin-top: 8px; }
.living-economy .month-profit > strong { color: var(--green); font-size: 36px; font-weight: 600; margin-top: 16px; }
.living-economy .month-profit > strong.negative { color: var(--red); }
.month-profit:has(>strong.negative) { border-left-color: var(--red); }
.account-balance { color: var(--green); }
.account-balance span { color: var(--muted); }
.account-balance strong { color: var(--ink); }
.workshop-cash > .account-balance { padding-block: 8px 20px; }
.living-economy .expected-cash { background: var(--surface-raised); border-color: var(--line); }
.living-economy .expected-cash span, .living-economy .expected-cash strong { color: var(--ink); }
.actions-footer > .button.primary { min-height: 56px; }
.offer, .library-card, .admin-panel, .result-panel { background: var(--white); border-color: var(--line); }
.offer-heading p, .contractor-pitch, .cost-with-scope small, .provider-heading small,
.contract-effects span, .effect-purpose, .cost-explanation, .cost-explanation summary,
.offer-tradeoff, .provider-channel { color: var(--muted); }
.offer-title { color: var(--ink); }
.contract-effects { background: var(--surface-raised); border: 1px solid var(--line); }
.contract-effects strong { color: var(--green); }
.cost-only { border-color: var(--line); }
.cost-only strong { color: var(--ink); }
.decision-context { background: var(--surface-raised); border-color: var(--accent-line); box-shadow: var(--shadow); }
.changes-panel { background: var(--surface-raised); border-color: var(--accent-line); color: var(--ink); }
.changes-panel > summary { color: var(--green); }
.purchase-result .receipt-row, .receipt-row.total { border-color: var(--line); }
.expert-row, .expert-specialty, .expert-offer { background: var(--surface-accent); border-color: var(--accent-line); }
.expert-row p, .expert-specialty .note { color: var(--muted); }
.expert-recommendation { background: #3b4831; color: #d3e3bc; border-color: var(--accent-line); }
.helper-option, .support-button, .hiring-banner { background: var(--surface-raised); border-color: var(--line); color: var(--ink); }
.helper-option:hover, .support-button:hover { background: var(--surface-hover); }
.helper-option small, .support-button small, .team-waiting-count { color: var(--muted); }
.team-project-row { background: var(--white); border-color: var(--line); color: var(--ink); }
.team-project-row.ready:hover { background: var(--surface-hover); border-color: var(--accent-line); }
.team-project-status { background: var(--surface-accent); color: var(--green); }
.team-project-row.completed, .team-action-preserved { background: var(--surface-accent); border-color: var(--accent-line); color: var(--green); }
.team-project-row.completed .team-project-status { color: var(--green); }
.team-project-row.unavailable { background: var(--surface-raised); color: var(--muted); }
.team-proposals-empty > svg { color: var(--green); }
.alert, .paused, .network-banner, .obligations, .diagnosis { background: var(--warning-surface); border-color: var(--warning-line); color: #e2c797; }
.round-bar, .lesson, .evidence, .empty { background: var(--surface-raised); border-color: var(--line); }
.round-bar.score-month, tr.mine { background: var(--surface-accent); border-color: var(--accent-line); }
.result-mark, .status-pill, .slot-chip { background: var(--surface-accent); color: var(--green); border-color: var(--accent-line); }
.effect, .power-badge { background: var(--surface-raised); color: var(--ink); }
.field input, .field select, .field textarea { background: var(--white); border-color: var(--accent-line); color: var(--ink); }
.toast { background: var(--green); color: var(--accent-ink); }
dialog { background: var(--white); border-color: var(--line); box-shadow: 0 24px 80px #00000066; }
dialog::backdrop { background: #090d0bcc; backdrop-filter: blur(3px); }
.coach-card { background: var(--surface-raised); color: var(--ink); border-color: var(--accent-line); box-shadow: var(--shadow); }
.coach-heading span { color: var(--muted); }
.coach-spotlight { border-color: var(--green); box-shadow: 0 0 0 2px #1c2319; }
.coach-point-label { background: var(--surface-accent); color: var(--ink); border-color: var(--accent-line); }
.coach-point-label button { background: #414c36; }
.coach-mask { background: rgba(7,11,8,.7); }
.coach-point .coach-mask { background: rgba(7,11,8,.82); }
@keyframes advertising-frame-pulse {
  0%,100% { border-color: #bfd0a4; box-shadow: 0 0 0 2px #263021; }
  50% { border-color: #e0edcb; box-shadow: 0 0 0 5px #536640; }
}
@keyframes advertising-label-pulse { 0%,100% { background-color: transparent; } 50% { background-color: #415036; } }
@media (max-width:760px) {
  .living-economy .conversion-card { border-radius: 17px; }
  .conversion-rate { font-size: 36px; }
  .living-economy .workshop-receipt .living-metric > .economy-row { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; padding: 18px 38px 18px 0; }
  .living-economy .workshop-receipt .metric-copy { grid-column: 1/-1; grid-row: 1; }
  .living-economy .workshop-receipt .metric-number { grid-column: 1; grid-row: 2; text-align: right; font-size: 23px; }
  .living-economy .workshop-receipt .metric-trigger { grid-column: 2; grid-row: 2; }
  .living-economy .fact-row .metric-copy { grid-column: 1/-1; }
  .living-economy .fact-row .metric-number { grid-column: 1/-1; text-align: right; }
  .expenses-heading { column-gap: 6px; }
  .expenses-heading > span { font-size: 15px; }
  .expenses-heading strong { font-size: 19px; }
  .production-load { padding: 0 16px 18px; }
  .workshop-receipt { padding: 20px 16px; }
  .living-economy .month-profit > strong { font-size: 33px; }
  .actions-footer > .button.primary { width: 100%; min-height: 56px; }
}
@media (max-width:360px) {
  .expenses-heading { grid-template-columns: minmax(0,1fr) 18px; }
  .expenses-heading > strong { grid-column: 1; grid-row: 2; text-align: left; }
  .expenses-heading > svg { grid-column: 2; grid-row: 1/3; }
  .conversion-rate { font-size: 32px; }
  .living-economy .month-profit > strong { font-size: 29px; }
}

/* Approved compact concept: quiet card borders and inline, explicit actions. */
.compact-heading { margin-block: 22px 18px; }
.compact-heading .workshop-chapter { align-items: center; gap: 16px; }
.compact-heading h1 { font-size: 32px; line-height: 1.15; letter-spacing: -.8px; min-width: 0; }
.compact-month { flex: none; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); color: var(--muted); padding: 9px 12px; font-size: 14px; white-space: nowrap; }
.personal-action-status.compact-action-hint { padding: 0; margin: 0 0 18px; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: var(--body-copy-size); line-height: 1.5; }
.workspace-tabs { margin-bottom: 14px; }
.workspace-tabs > button { min-height: 54px; padding-block: 12px; font-size: 19px; }
.workspace-tabs > button.selected::after { height: 3px; background: #91a678; }
.living-metric.metric-can-edit, .conversion-card.metric-can-edit { border-color: #56624d; box-shadow: none; }
.living-metric.metric-can-edit:hover, .conversion-card.metric-can-edit:hover { border-color: #849575; }
.living-economy .living-metric > .economy-row { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; padding: 16px; min-height: 120px; gap: 8px 12px; }
.living-economy .metric-symbol { display: none; }
.living-economy .metric-copy { grid-column: 1/-1; grid-row: 1; padding-right: 30px; }
.living-economy .metric-copy b { font-size: 17px; }
.living-economy .metric-copy small { font-size: 14px; margin-top: 4px; }
.living-economy .metric-number { grid-column: 1; grid-row: 2; min-width: 0; font-size: 30px; line-height: 1.2; }
.living-economy .metric-trigger { grid-column: 2; grid-row: 2; display: inline-flex; gap: 7px; align-items: center; justify-content: flex-end; width: auto; min-height: 44px; height: auto; color: var(--muted); }
.living-economy .metric-trigger.ready, .metric-edit-label { color: var(--green); }
.metric-edit-label { font-size: 15px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.living-economy .living-metric > .economy-row.tutorial-spotlight { padding: 15px; border: 1px solid #637354; background: var(--white); }
.conversion-choice { padding: 14px 14px 0; }
.conversion-code { font-size: 14px; line-height: 24px; }
.conversion-rate { font-size: 44px; line-height: 1.05; font-weight: 650; margin: 8px 0 10px; }
.conversion-title { font-size: 17px; line-height: 1.3; min-height: 0; }
.conversion-base, .conversion-cv2 .conversion-base { font-size: 14px; line-height: 1.4; min-height: 0; margin-top: 5px; padding-bottom: 6px; }
.conversion-trigger { position: static; align-self: flex-end; display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; margin: auto 0 0; padding-block: 8px; min-height: 44px; color: var(--green); }
.conversion-result { min-height: 80px; margin-inline: 14px; padding-block: 12px; }
.conversion-result > div { flex-direction: column; align-items: flex-start; gap: 0; }
.conversion-result strong { font-size: 29px; line-height: 1.15; }
.conversion-result span { font-size: 14px; }
.sales-capacity { background: var(--white); border-color: #56624d; }
.sales-capacity .living-metric { background: transparent; }
.production-load { padding: 0 16px 15px; }
.production-load progress { height: 8px; }
.production-load span { margin-top: 8px; font-size: 13px; }
.capacity-limited { border-color: var(--warning-line); }
.living-economy .fact-row .metric-copy { grid-column: auto; grid-row: auto; padding-right: 0; }
.living-economy .fact-row .metric-number { grid-row: auto; font-size: 22px; }
.living-economy .workshop-receipt .living-metric > .economy-row { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; padding: 18px 0; gap: 7px 12px; }
.living-economy .workshop-receipt .metric-copy { grid-column: 1/-1; grid-row: 1; padding-right: 42px; }
.living-economy .workshop-receipt .metric-number { grid-column: 1; grid-row: 2; font-size: 24px; text-align: left; }
.living-economy .workshop-receipt .metric-trigger { grid-column: 2; grid-row: 2; padding-right: 4px; }
.living-economy .workshop-receipt .living-metric.tutorial-quiet > .economy-row { padding-inline: 12px; }
.team-proposals-title { margin: 0; }
.team-waiting-count { font-size: 14px; margin-bottom: 8px; }
.team-proposals-intro { margin: 0 0 20px; font-size: 16px; }
.employee-proposals { border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.employee-proposals-heading { gap: 14px; margin-bottom: 16px; }
.employee-proposals-heading .person-portrait { width: 62px; height: 72px; }
.employee-proposals-heading h3 { font-size: 25px; margin-bottom: 2px; }
.employee-proposals-heading p { font-size: 16px; }
.team-project-row { grid-template-columns: 25px minmax(0,1fr) auto; grid-template-rows: auto auto; gap: 3px 12px; min-height: 82px; padding: 14px; border-radius: 14px; }
.team-project-row > svg { grid-column: 1; grid-row: 1/3; }
.team-project-label { grid-column: 2; grid-row: 1; font-size: 18px; line-height: 1.3; }
.team-project-status { grid-column: 2; grid-row: 2; justify-content: flex-start; padding: 0; border-radius: 0; background: none; color: var(--muted); font-size: 15px; }
.team-project-open { grid-column: 3; grid-row: 1/3; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--green); font-size: 15px; padding-left: 12px; border-left: 1px solid var(--line); }
.team-project-row.completed .team-project-status { color: var(--green); }
.team-hire-button:disabled { display: none; }
.team-hiring-limit { margin-top: 18px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.living-story .story-message { font-size: 14px; line-height: 1.5; }
@media(max-width:760px) {
  .compact-heading { margin-block: 18px 12px; }
  .compact-heading h1 { font-size: 27px; }
  .compact-heading .workshop-chapter { gap: 12px; flex-wrap: wrap; }
  .compact-month { font-size: 12px; padding: 7px 9px; }
  .workspace-tabs > button { font-size: 16px; min-height: 52px; }
  .living-economy .living-metric > .economy-row { grid-template-columns: minmax(0,1fr) auto; padding: 14px; gap: 7px 10px; }
  .living-economy .living-metric > .economy-row.tutorial-spotlight { padding: 13px; }
  .living-economy .metric-copy b { font-size: 17px; }
  .living-economy .metric-number { font-size: 29px; }
  .conversion-choice { padding: 14px 12px 0; }
  .conversion-rate { font-size: 42px; }
  .conversion-base { min-height: 0; }
  .conversion-title { font-size: 16px; }
  .conversion-result { margin-inline: 12px; }
  .conversion-result strong { font-size: 28px; }
  .conversion-trigger, .metric-edit-label { font-size: 14px; gap: 6px; }
  .production-load { padding: 0 14px 15px; }
  .team-project-row { gap: 3px 9px; padding: 13px 12px; }
  .team-project-label { font-size: 17px; }
  .team-project-open { gap: 5px; font-size: 14px; padding-left: 9px; }
  .living-story .story-message { font-size: 14px; }
}
@media(max-width:360px) {
  .compact-heading h1 { font-size: 25px; }
  .conversion-rate { font-size: 38px; }
  .conversion-choice { padding-inline: 10px; }
  .conversion-title { font-size: 15px; }
  .conversion-base { font-size: 13px; }
  .metric-edit-label { font-size: 13px; }
  .conversion-result strong { font-size: 26px; }
  .team-project-row { column-gap: 8px; grid-template-columns: 21px minmax(0,1fr) auto; }
  .team-project-label { font-size: 16px; }
  .team-project-open { padding-left: 7px; font-size: 13px; }
}

/* The balance belongs above the deck; it must never cover a swiped card. */
.main-panel:has(.offer-carousel) .decision-context { position: static; top: auto; max-width: 860px; margin: 18px auto; }
.offer-carousel .contract-effects > div { flex-direction: row; }

.offer-carousel .cost-with-scope { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 12px; }
.offer-carousel .cost-with-scope > div { display: contents; }
.offer-carousel .cost-with-scope > div > span { grid-column: 1; grid-row: 1; align-self: center; }
.offer-carousel .cost-with-scope > div > small { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 14px; line-height: 1.5; }
.offer-carousel .cost-with-scope > strong { grid-column: 2; grid-row: 1; font-size: 24px; }
/* Match the approved mockup: one heading, compact money row, then the deck. */
.workspace-game:has(.offer-carousel) > .project-heading,
.main-panel:has(.offer-carousel) > .workspace-tabs { display: none; }
.main-panel:has(.offer-carousel) .offer-heading { max-width: 860px; margin: 0 auto 18px; gap: 12px; align-items: center; }
.main-panel:has(.offer-carousel) .offer-heading > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; flex: 1; justify-content: space-between; }
.main-panel:has(.offer-carousel) .offer-heading h2 { font-size: 26px; line-height: 1.2; }
.main-panel:has(.offer-carousel) .offers-context { padding: 0; border: 0; background: transparent; box-shadow: none; display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0 auto 16px; }
.offers-context .account-balance { padding: 12px 16px; gap: 12px; background: var(--surface-raised); border-radius: 12px; margin: 0; }
.offers-context .account-balance > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.offers-context .account-balance span { font-size: 16px; }
.offers-context .account-balance strong { font-size: 22px; line-height: 1.3; }
.offers-context .button { width: 100%; min-height: 50px; margin: 0; border: 1px solid var(--green); background: transparent; color: var(--ink); }
.offers-context .button:hover:not(:disabled) { background: var(--surface-hover); }
.offer-irina.story-note { display: flex; gap: 12px; padding: 0; margin: 16px auto 22px; background: transparent; }
.offer-irina .speaker-avatar { flex: 0 0 44px; }
.offer-irina > div { padding: 10px 14px; border-radius: 14px; background: #343a31; flex: 1; }
.offer-irina .speaker-name { font-size: 15px; line-height: 1.3; margin-bottom: 4px; }
.offer-irina .story-message { margin: 0; line-height: 1.4; }
.offer-carousel .provider-heading { align-items: center; gap: 10px; margin-bottom: 14px; }
.offer-carousel .provider-heading > span:last-child { min-width: 0; }
.offer-carousel .provider-heading b { font-size: 15px; line-height: 1.35; }
.offer-carousel .provider-heading small { margin-top: 4px; font-size: 13px; line-height: 1.35; }
.offer-carousel .offer-title { font-size: 22px; line-height: 1.25; }
.offer-carousel .contractor-pitch { line-height: 1.4; margin-block: 12px; }
.offer-carousel .cost-with-scope { padding: 14px 0; margin-top: 14px; }
.offer-carousel .contract-effects > div { padding: 10px 0; }
.offer-carousel .cost-explanation { margin-block: 10px; }
.offer-carousel .cost-explanation summary { min-height: 40px; }
.offer-carousel .offer-buy { margin-top: 12px; }
/* Keep the number intact; units belong to the label instead of the value. */
.offer-carousel .contract-effects > div { display: grid; grid-template-columns: minmax(0,1fr) max-content; column-gap: 10px; row-gap: 2px; }
.offer-carousel .contract-effects strong { max-width: none; white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
.offer-carousel .effect-unit { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.offer-carousel .effect-purpose { margin-top: 3px; font-size: 13px; line-height: 1.35; }
.offer-carousel .cost-explanation { padding: 0; margin: 6px 0 0; }
.offer-carousel .cost-explanation summary { min-height: 44px; padding: 8px 0; line-height: 1.4; font-size: 15px; }
.offer-carousel .offer-buy { margin-top: 10px; }
.economy-layout .offer-carousel .offer:not(:only-child) { flex-basis: 90%; }
.offer-carousel .offers::after { flex-basis: calc(10% - 16px); }
.offer-carousel .offer { position: relative; }
.offer-carousel .provider-heading { padding-right: 32px; }
.offer-carousel .offer-top .bookmark { position: absolute; top: 10px; right: 10px; }
.offer-carousel .offer-top { display: block; }
@media(max-width:600px) {
 .offer-carousel .offers::after { flex-basis: calc(10% - 12px); }
}
@media(max-width:600px) {
 .main-panel:has(.offer-carousel) .offer-heading h2 { font-size: 23px; }
 .main-panel:has(.offer-carousel) .offer-heading > div { gap: 6px; }
 .offers-context .account-balance > div { display: flex; }
 .offers-context .account-balance strong { font-size: 22px; }
 .offer-carousel .offer-title { font-size: 21px; }
 .offer-carousel .provider-heading .person-portrait,
 .offer-carousel .provider-heading .speaker-avatar { width: 44px; height: 44px; flex-basis: 44px; }
}