/* Living Workshop: shared palette, readable mobile controls, business metrics as a journey. */
:root {
  --paper: #f7f0e9;
  --white: #fffdf8;
  --ink: #493340;
  --muted: #79666b;
  --line: #dfd2ca;
  --green: #684450;
  --lime: #eaded5;
  --orange: #a46643;
  --red: #ac392e;
  --blue: #3e608a;
  --shadow: 0 8px 28px #4933400b;
  --workshop-peach: #f2e2d7;
  --workshop-lilac: #eee5ef;
  --workshop-card: #fffaf4;
  --workshop-accent: #aa7e65;
  --workshop-touch: 48px;
  --workshop-inactive: #e7e0da;
  --workshop-inactive-line: #d3c7bf;
}
body { background: var(--paper); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.button.primary:hover:not(:disabled) { background: #50313d; }
.button.secondary, .button.ghost { border-color: #d8c8c0; }
.brand-icon { background: var(--green); }
.wordmark.bakery-wordmark { font-size: 22px; line-height: .95; letter-spacing: -.8px; text-align: left; }
.nav button.active, .nav button:hover { background: #eadfd8; color: var(--ink); }
.positive { color: #2c674a; }
.button, .close, .back-button, .power-choice, .support-button { touch-action: manipulation; }
.text-button { color: #705a62; }
.button:focus-visible, .close:focus-visible, .back-button:focus-visible { outline-color: var(--blue); }

/* The month is a chapter in the same workshop, including four-month legacy saves. */
.workshop-heading { margin: 20px auto 16px; max-width: 1000px; }
.workshop-chapter { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.workshop-chapter .round-label { font-size: 12px; letter-spacing: 1px; color: #796468; min-width: 0; overflow-wrap: anywhere; }
.month-steps { display: flex; gap: 7px; list-style: none; margin: 0; padding: 0; }
.month-steps li { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #d4c3c0; border-radius: 50%; font-size: 13px; color: #7d676c; }
.month-steps .completed { background: #e7d9d0; border-color: #e7d9d0; color: #624d54; }
.month-steps .current { background: var(--green); border-color: var(--green); color: white; font-weight: 700; }
.workshop-scene { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 18px; align-items: center; min-height: 190px; }
.workshop-title { min-width: 0; }
.workshop-title h1 { font-size: 42px; line-height: 1.12; letter-spacing: -1.5px; max-width: 430px; }
.workshop-title > span { display: block; font-size: 15px; margin-top: 12px; color: #886c6e; }
.scene-art { display: block; width: 100%; height: 190px; object-fit: contain; mix-blend-mode: multiply; border-radius: 14px; }
.workshop-time { display: flex; gap: 8px; align-items: center; min-height: 42px; }
.workshop-title .workshop-time { margin-top: 6px; min-height: 32px; }
.workshop-time .timer { color: #70585f; font-size: 14px; }
.workshop-time .timer.urgent { color: var(--red); }
.project-heading .workshop-scene { display: block; min-height: 0; margin-top: 20px; }
.project-heading .workshop-title h1 { font-size: 29px; max-width: none; }
.project-heading .workshop-title > span { display: none; }
.project-heading .workshop-time { margin-top: 10px; }
.progression-bar { border-color: var(--line); margin: 8px 0 12px; }
.progression-bar button { color: var(--green); }
.reputation-counter { color: #78676b; }
.reputation-button.ready { background: #e9edf7; border-color: #a1aec5; color: #374d71; }
.story-note { background: #efe5da; border-color: #b38c76; }
.story-note.letter { background: #eee1cd; border-color: #af8060; }
.speaker-name span { color: #806a65; }
.story-note.living-story { padding: 0; border: 0; background: none; margin: 12px 0 20px; grid-template-columns: 48px minmax(0,1fr); gap: 12px; align-items: center; }
.living-story .speaker-avatar { width: 48px; height: 65px; }
.living-story .speaker-name { margin-bottom: 3px; font-size: 14px; color: #8b625d; }
.living-story .speaker-name span { display: none; }
.living-story .story-message { font-size: 15px; line-height: 1.6; max-width: 720px; }
.action-meter { background: #ebdfd5; border: 1px solid #ddcbbf; border-left: 0; border-radius: 12px; padding: 16px; }
.action-meter-heading, .action-meter p { color: #5c453b; }
.action-meter .action-meter-heading strong { background: #fff9f1; color: #694a38; }
.action-meter.spent { background: #eee7e0; border-color: #d9ccc4; }
.support-button { background: #eee1d7; border-color: #d9c4b7; }
.support-button:hover { background: #e8d7ca; }
.support-button small { color: #705d54; }
.living-economy-heading { margin-top: 24px; }
.living-economy-heading h2 { color: var(--ink); }
.living-game .economy-instruction { color: #806b68; margin-top: -6px; margin-bottom: 14px; }

/* Every original metric and help button remains available; searches still use the existing handlers. */
.living-economy { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px; align-items: start; }
.living-economy .economy-jumps { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.living-economy .economy-jumps button { font-size: 14px; min-height: 44px; padding: 9px 12px; background: transparent; border: 1px solid #dcccc2; color: #715b63; }
.living-economy .economy-jumps button:last-child { background: #ede2da; border-color: #d4beb1; margin-left: auto; }
.living-customers, .workshop-receipt { min-width: 0; }
.living-metric { position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--workshop-card); overflow: hidden; }
.living-economy .living-metric > .economy-row { display: grid; grid-template-columns: 44px minmax(0,1fr) 28px; grid-template-rows: auto auto; column-gap: 12px; row-gap: 5px; align-items: center; border: 0; background: transparent; width: 100%; min-height: 110px; padding: 16px 52px 16px 14px; }
.living-economy .living-metric > .economy-row.actionable:hover { background: #f7eade; }
.living-economy .living-metric > .economy-row.tutorial-spotlight { border: 2px solid #b57e49; padding: 14px 50px 14px 12px; box-shadow: none; background: #fff2d6; }
.living-economy .metric-symbol { display: grid; grid-column: 1; grid-row: 1/3; place-items: center; width: 44px; height: 44px; background: #eee2da; border-radius: 12px; color: #8e6555; }
.living-economy .metric-copy { grid-column: 2/4; grid-row: 1; min-width: 0; }
.living-economy .metric-copy b { font-size: 16px; font-weight: 600; line-height: 1.45; }
.living-economy .metric-copy small { font-size: 14px; line-height: 1.5; color: #806d68; margin-top: 5px; }
.living-economy .metric-number { grid-column: 2; grid-row: 2; color: var(--ink); font-size: 24px; text-align: left; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.living-economy .metric-unit { display: inline; font-size: 14px; font-weight: 400; margin-left: 6px; color: #7c6864; }
.living-economy .metric-trigger { grid-column: 3; grid-row: 2; background: transparent; color: #806b68; width: 28px; height: 32px; }
.living-economy .metric-trigger.ready { color: var(--green); background: transparent; }
.living-economy .metric-with-help > .metric-help { width: 48px; min-width: 48px; height: 48px; right: 0; top: 0; transform: none; color: #7c696b; font-size: 18px; }
.living-economy .metric-help:hover { background: #e9dcd5; border-radius: 10px; }
.living-economy .tutorial-dim { opacity: 1; background: transparent; color: #73636b; }
.living-economy .tutorial-quiet { position: relative; background: var(--workshop-inactive); border-color: var(--workshop-inactive-line); }
.living-economy .tutorial-quiet .metric-copy b, .living-economy .tutorial-quiet .conversion-title,
.living-economy .tutorial-quiet .conversion-base, .living-economy .tutorial-quiet .metric-copy small,
.living-economy .tutorial-quiet .production-load span { color: #6f6265; }
.living-economy.tutorial-board .fact-row { background: transparent; color: #73636b; }
.living-economy .tutorial-quiet .conversion-result { color: #6f6265; }
.conversion-bridge { display: flex; align-items: center; gap: 9px; margin: 17px 0; color: #8c7165; font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
.conversion-bridge::before, .conversion-bridge::after { content: ''; height: 1px; flex: 1; background: #dfcfc4; }
.conversion-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.conversion-card { min-width: 0; overflow: hidden; border-radius: 14px; border: 1px solid #dacbdf; background: var(--workshop-lilac); color: #573d60; display: flex; flex-direction: column; }
.conversion-cv2 { background: var(--workshop-peach); border-color: #dfc9b8; color: #925a37; }
.conversion-main { position: relative; flex: 1; }
.conversion-choice { display: flex; flex-direction: column; align-items: start; width: 100%; height: 100%; padding: 17px 14px 30px; background: transparent; text-align: left; position: relative; border: 0; border-radius: 0; color: inherit; font: inherit; }
.conversion-choice.actionable { cursor: pointer; }
.conversion-choice.actionable:hover { background: #ffffff35; }
.conversion-code { display: block; padding-right: 40px; font-size: 13px; font-weight: 700; line-height: 24px; letter-spacing: .5px; }
.conversion-rate { font-size: 35px; line-height: 1.15; letter-spacing: -1px; margin: 7px 0 12px; font-variant-numeric: tabular-nums; }
.conversion-title { display: block; min-height: 46px; color: #4f3b48; font-size: 16px; line-height: 1.45; font-weight: 650; }
.conversion-base { display: block; min-height: 42px; margin-top: 6px; color: #78657a; font-size: 14px; line-height: 1.5; }
.conversion-cv2 .conversion-base { color: #826c61; }
.conversion-trigger { position: absolute; bottom: 8px; right: 10px; }
.conversion-main > .metric-help { position: absolute; right: 0; top: 0; color: #715776; }
.conversion-cv2 .conversion-main > .metric-help { color: #875d47; }
.conversion-result { position: relative; border-top: 1px solid #d9c8db; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 78px; margin: 0 12px; padding: 12px 42px 12px 0; }
.conversion-cv2 .conversion-result { border-color: #dfc7b7; }
.conversion-result > div { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
.conversion-result strong { font-size: 23px; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.conversion-result span { font-size: 14px; line-height: 1.4; color: #735f6d; }
.conversion-result > .metric-help { position: absolute; right: -10px; top: calc(50% - 24px); color: #796175; }
.sales-capacity { border: 1px solid var(--line); background: var(--workshop-card); border-radius: 14px; margin-top: 14px; overflow: hidden; }
.sales-capacity > .living-metric { border: 0; border-radius: 0; background: transparent; }
.living-economy .metric-F > .economy-row { min-height: 112px; padding-bottom: 10px; }
.production-load { padding: 0 52px 17px 70px; }
.production-load progress { display: block; appearance: none; width: 100%; height: 6px; border: 0; border-radius: 5px; background: #e9dfd6; overflow: hidden; }
.production-load progress::-webkit-progress-bar { background: #e9dfd6; border-radius: 5px; }
.production-load progress::-webkit-progress-value { background: #ab8268; border-radius: 5px; }
.production-load progress::-moz-progress-bar { background: #ab8268; border-radius: 5px; }
.production-load span { display: block; font-size: 13px; line-height: 1.5; color: #816d66; margin-top: 8px; }
.capacity-limited { border-color: #c38a3c; background: #fff1d6; border-left: 3px solid #b77c29; }
.capacity-warning { color: #794b17; font-size: 14px; padding: 0 16px 16px; }
.workshop-receipt { background: var(--white); border: 1px solid #e0d3c6; padding: 20px; border-radius: 15px; }
.receipt-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--green); }
.receipt-heading h2 { font-size: 21px; color: var(--ink); }
.workshop-receipt .living-metric { border: 0; border-radius: 0; background: transparent; border-bottom: 1px solid #e4d9d0; }
.living-economy .workshop-receipt .living-metric.tutorial-quiet { background: var(--workshop-inactive); border: 1px solid var(--workshop-inactive-line); border-radius: 14px; margin-block: 10px; }
.living-economy .workshop-receipt .living-metric.tutorial-quiet > .economy-row { padding-left: 14px; }
.living-economy .workshop-receipt .living-metric > .economy-row { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto; gap: 10px; min-height: 96px; padding: 16px 42px 16px 0; }
.workshop-receipt .metric-symbol { display: none; }
.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; font-size: 21px; }
.living-economy .workshop-receipt .metric-trigger { grid-column: 2; grid-row: 2; }
.living-economy .fact-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 82px; padding: 16px 45px 16px 0; border-bottom: 1px solid #e4d9d0; }
.living-economy .fact-row .metric-copy { flex: 1 1 130px; }
.living-economy .fact-row .metric-copy b { font-size: 16px; font-weight: 500; }
.living-economy .fact-row .metric-number { flex: 0 1 auto; font-size: 20px; text-align: right; }
.living-expenses { margin-top: 20px; }
.expenses-heading { display: grid; grid-template-columns: minmax(0,1fr) auto 18px; align-items: center; gap: 8px 10px; min-height: 84px; padding: 14px 12px; background: #f1dfcc; color: #68452e; border: 1px solid #c7a383; border-radius: 10px; cursor: pointer; list-style: none; }
.expenses-heading:hover { background: #ead2b9; }
.expenses-heading::-webkit-details-marker { display: none; }
.expenses-heading > span { flex: 1; font-size: 17px; font-weight: 600; }
.expenses-heading > svg { flex: 0 0 18px; transform: rotate(90deg); }
.living-expenses[open] > .expenses-heading > svg { transform: rotate(-90deg); }
.expenses-toggle-hint { grid-column: 1/-1; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.expenses-hide, .living-expenses[open] .expenses-show { display: none; }
.living-expenses[open] .expenses-hide { display: inline; }
.expenses-heading:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.expenses-help { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; color: var(--muted); font-size: 14px; }
.expenses-heading strong { font-size: 21px; white-space: normal; text-align: right; font-variant-numeric: tabular-nums; }
.living-economy .month-profit { display: block; background: var(--green); padding: 20px; margin: 20px 0; border-radius: 14px; }
.living-economy .month-profit h3 { font-size: 17px; line-height: 1.5; }
.living-economy .month-profit p { font-size: 14px; line-height: 1.5; color: #eee2e7; }
.living-economy .month-profit > strong { display: block; font-size: 32px; margin-top: 10px; white-space: normal; overflow-wrap: anywhere; }
.month-profit strong.positive { color: white; }
.month-profit strong.negative { color: #ffd7c3; }
.workshop-cash > .account-balance { padding: 0 0 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.workshop-cash .account-balance strong { font-size: 24px; }
.living-economy .expected-cash { background: #f3ece4; border: 1px solid #d9c7b8; border-left: 0; border-radius: 12px; margin: 0; padding: 18px 45px 14px 16px; }
.living-economy .expected-cash > div { flex-direction: column; gap: 8px; }
.living-economy .expected-cash span { color: #634d51; font-size: 15px; }
.living-economy .expected-cash strong { font-size: 25px; color: var(--ink); }
.living-economy .expected-cash strong.negative { color: var(--red); }
.living-economy .finance-entry { display: flex; font-size: 14px; flex-wrap: wrap; text-align: left; gap: 7px; }
dialog .living-economy { display: block; }
dialog .living-customers { margin-bottom: 22px; }
dialog .workshop-receipt { padding: 16px; }
dialog .living-economy .economy-jumps { margin-bottom: 18px; }

/* Offer, expert, partner, team and result states share the same palette and type scale. */
.offer { background: var(--white); border-color: #decec3; border-radius: 15px; box-shadow: none; }
.offer-heading p, .contractor-pitch, .cost-with-scope small { color: #715e5b; }
.provider-heading small { color: #7d6868; }
.contract-effects { background: #f2e9e1; }
.contract-effects span, .effect-purpose { color: #715c59; }
.decision-context { background: #f3e9de; border-color: #cfb6a6; box-shadow: 0 4px 14px #4933400b; }
.decision-context .button { background: var(--green); border-color: var(--green); }
.decision-context .button:hover { background: #50313d; }
.account-balance { color: var(--ink); }
.account-balance span { color: #725b62; }
.cost-explanation summary, .story-details summary { color: var(--green); }
.expert-row { background: #f3e7d2; border-color: #d6bb86; border-radius: 12px; }
.expert-unavailable, .offer-availability { padding: 12px; border-left: 3px solid var(--orange); background: #fff9ea; color: var(--ink); }
.expert-row .expert-unavailable { grid-column: 1 / -1; }
.expert-offer { background: #fff9ea; border: 2px solid #bc9142; }
.expert-recommendation { background: #f2dfae; color: #654512; }
.helper-project-tabs button { background: #f6eee5; border-color: #d9c8bc; }
.helper-project-tabs button.active { background: #eadde4; border-color: var(--green); }
.partner-invitation { background: #edf0f9; border-color: #a5b1ce; border-left-color: #526b99; color: #30466b; }
.invitation-heading { color: #4f6998; }
.partner-terms { border-color: #bfcae0; }
.partner-invitation .contract-effects { background: #fafbff; }
.partner-invitation .contract-effects span { color: #455b7b; }
.partner-choices > .partner-invitation { margin-top: 20px; }
.button.partner-accept { background: #526b99; }
.button.partner-accept:hover:not(:disabled) { background: #3d547e; }
.partner-project { background: #edf0f9; border-color: #a5b1ce; }
.partner-project .direction-icon { background: #dce3f0; color: #526b99; }
.feedback .story-note { background: #eee4db; border-color: #b49b88; }
.changes-panel { margin: 16px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--white); overflow: hidden; }
.changes-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; min-height: 56px; font-weight: 650; cursor: pointer; list-style: none; }
.changes-panel > summary::-webkit-details-marker { display: none; }
.changes-panel > summary > svg { transform: rotate(90deg); }
.changes-panel[open] > summary > svg { transform: rotate(-90deg); }
.changes-panel > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.changes-panel .receipt { margin: 0; padding: 0 16px 12px; }
.changes-panel .receipt-row { display: grid; grid-template-columns: minmax(0,1fr); gap: 5px; padding: 12px 0; font-size: 16px; }
.changes-panel .receipt-row strong { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.changes-panel > summary { background: var(--workshop-lilac); color: var(--green); }
.purchase-changes { border: 2px solid var(--workshop-accent); }
.purchase-changes > summary { font-size: 18px; min-height: 60px; }
.purchase-result .receipt-row { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; }
.purchase-result .receipt-row strong { white-space: normal; text-align: left; }
.capacity-warning { margin: 12px 0; padding: 12px; border-left: 3px solid var(--orange); background: var(--workshop-peach); font-size: 15px; line-height: 1.6; }
.living-customers > .conversion-grid { margin-top: 18px; }
.prepared-project .copy small { display: block; margin-top: 5px; line-height: 1.6; }
.effect-flow { border-color: var(--line); }
.power-choice { background: #fbf7f1; border-color: #d9c9bf; }
.power-choice:hover { background: #eee2da; border-color: #b89b8d; }
.helper-option { border-color: var(--line); }
.helper-option:hover:not(:disabled) { background: #f2e6dc; }
.result-panel, .admin-panel { background: var(--white); border-color: var(--line); }
.result-mark { background: #eadce4; color: var(--green); }
.round-bar { background: #f0e6dc; }
.round-bar.score-month { background: #e8dce7; border-color: #ad8da9; }
.lesson, .evidence { border-color: var(--line); }
.library-card { background: var(--white); border-color: var(--line); }
.library-card p { font-size: 15px; line-height: 1.65; }
.library-card a { overflow-wrap: anywhere; }
.field input, .field select, .field textarea { border-color: #cdb9ad; }
.obligations { background: #f1e7dc; }
.network-banner, .paused { background: #f1debd; color: #6a491d; }
.footer { border-color: var(--line); }

@media(max-width:760px) {
  .shell { padding: 0 18px; }
  .topbar { min-height: 74px; padding-block: 10px; }
  .wordmark { font-size: 25px; }
  .brand-icon { width: 29px; height: 31px; background: transparent; color: var(--green); }
  .nav button { padding: 10px; }
  .button, .button.small { min-height: 54px; font-size: 16px; padding: 13px 16px; }
  .story-message, .modal-copy { font-size: 16px; }
  .workshop-heading { margin: 16px 0 8px; }
  .workshop-chapter .round-label { max-width: 155px; font-size: 11px; line-height: 1.5; }
  .month-steps { gap: 5px; }
  .month-steps li { width: 23px; height: 23px; font-size: 12px; }
  .workshop-scene { grid-template-columns: minmax(0,1fr) 46%; gap: 12px; min-height: 138px; }
  .workshop-title h1 { font-size: 29px; letter-spacing: -.9px; overflow-wrap: normal; }
  .workshop-title > span { font-size: 13px; margin-top: 10px; }
  .scene-art { height: 135px; }
  .workshop-time { min-height: 36px; }
  .workshop-time .timer { font-size: 13px; }
  .project-heading .workshop-title h1 { font-size: 26px; }
  .living-game .progression-bar { margin: 0 0 12px; padding: 3px 0; gap: 8px; }
  .progression-bar button, .reputation-counter { font-size: 13px; }
  .story-note.living-story { margin: 7px 0 16px; grid-template-columns: 44px minmax(0,1fr); gap: 10px; }
  .living-story .speaker-avatar { width: 44px; height: 59px; }
  .living-story .story-message { font-size: 15px; }
  .action-meter { margin: 16px 0 18px; padding: 14px; }
  .action-meter-heading b { font-size: 15px; }
  .action-meter .action-meter-heading strong { font-size: 20px; }
  .action-meter p { font-size: 14px; }
  .support-button { padding: 14px; min-height: 76px; }
  .support-button small { font-size: 14px; }
  .living-economy-heading h2, .economy-layout .living-economy-heading h2 { font-size: 20px; }
  .living-economy-heading { align-items: center; margin-top: 20px; }
  .living-economy-heading .text-button { font-size: 13px; }
  .living-game .economy-instruction { font-size: 14px; line-height: 1.5; }
  .living-economy { display: block; }
  .living-economy .economy-jumps { gap: 6px; margin: 0 0 14px; }
  .living-economy .economy-jumps button { padding: 9px 10px; font-size: 13px; }
  .living-economy .economy-jumps button:last-child { margin-left: 0; }
  .living-economy .living-metric > .economy-row { grid-template-columns: 40px minmax(0,1fr) 21px; column-gap: 10px; padding: 14px 43px 14px 12px; min-height: 116px; }
  .living-economy .living-metric > .economy-row.tutorial-spotlight { padding: 12px 41px 12px 10px; }
  .living-economy .metric-symbol { width: 40px; height: 44px; border-radius: 11px; }
  .living-economy .metric-copy b { font-size: 16px; }
  .living-economy .metric-copy small { font-size: 14px; }
  .living-economy .metric-number { font-size: 24px; }
  .living-economy .metric-trigger { width: 22px; height: 30px; }
  .living-economy .metric-with-help > .metric-help { width: 44px; min-width: 44px; right: 0; }
  .conversion-grid { gap: 10px; }
  .conversion-choice { padding: 16px 12px 28px; }
  .conversion-rate { font-size: 34px; }
  .conversion-base { min-height: 42px; }
  .conversion-result { margin-inline: 12px; padding-right: 33px; }
  .conversion-result strong { font-size: 22px; }
  .conversion-result > .metric-help { right: -12px; width: 44px; min-width: 44px; }
  .conversion-result span { font-size: 14px; }
  .production-load { padding: 0 44px 16px 62px; }
  .workshop-receipt { margin-top: 22px; padding: 18px 16px; }
  .receipt-heading h2 { font-size: 21px; }
  .living-economy .workshop-receipt .living-metric > .economy-row { padding-right: 40px; grid-template-columns: minmax(0,1fr) 22px; min-height: 96px; }
  .living-economy .fact-row { min-height: 80px; padding-right: 42px; gap: 6px 12px; }
  .living-economy .fact-row .metric-number { text-align: left; }
  .expenses-heading { flex-wrap: wrap; }
  .expenses-heading strong { font-size: 21px; }
  .living-economy .month-profit { padding: 18px 16px; }
  .living-economy .month-profit h3 { font-size: 17px; }
  .living-economy .month-profit > strong { font-size: 30px; }
  .living-economy .expected-cash { padding: 18px 40px 12px 14px; }
  .living-economy .expected-cash strong { font-size: 26px; }
  .living-economy .finance-entry { font-size: 14px; }
  .decision-context .button { min-height: 52px; font-size: 15px; }
  .decision-context .account-balance strong { font-size: 25px; }
  .decision-context .account-balance > div { display: block; }
  .offer { padding: 20px 18px; }
  .offer-title { font-size: 23px; }
  .contract-effects > div { font-size: 16px; }
  .effect-purpose { font-size: 14px; }
  .helper-project-tabs { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .helper-project-tabs button { padding: 14px 12px; }
  .helper-project-tabs b { font-size: 15px; }
  .helper-project-tabs span { font-size: 14px; }
  .actions-footer { margin-top: 18px; }
  dialog { width: calc(100% - 16px); padding: 22px 18px; }
  dialog .conversion-choice { padding: 15px 10px 28px; }
  dialog .conversion-rate { font-size: 30px; }
  dialog .conversion-title { font-size: 15px; }
  dialog .conversion-base { font-size: 14px; min-height: 63px; }
  dialog .conversion-result { margin-inline: 10px; }
  dialog .workshop-receipt { padding: 16px 12px; }
  .result-panel { padding: 28px 18px; }
  .result-panel .result-amount { font-size: 43px; overflow-wrap: anywhere; }
  .result-panel .progression-bar { justify-content: center; }
}
@media(max-width:360px) {
  .shell { padding-inline: 12px; }
  .brand-icon { display: none; }
  .wordmark { font-size: 24px; }
  .workshop-title h1 { font-size: 25px; }
  .workshop-scene { grid-template-columns: minmax(0,1fr) 43%; min-height: 130px; gap: 8px; }
  .scene-art { height: 122px; }
  .workshop-chapter .round-label { font-size: 10px; max-width: 125px; }
  .month-steps { gap: 4px; }
  .month-steps li { width: 22px; height: 22px; }
  .living-economy .economy-jumps button { padding-inline: 9px; font-size: 12px; }
  .conversion-choice { padding-inline: 10px; }
  .conversion-rate { font-size: 31px; }
  .conversion-base { min-height: 63px; }
  .conversion-result { margin-inline: 10px; padding-right: 29px; }
  .conversion-result strong { font-size: 21px; }
  .conversion-result span { font-size: 13px; }
  .living-economy .living-metric > .economy-row { grid-template-columns: 34px minmax(0,1fr) 18px; column-gap: 8px; }
  .living-economy .metric-symbol { width: 34px; }
  .living-economy .metric-number { font-size: 22px; }
  .production-load { padding-left: 55px; }
  .helper-project-tabs { grid-template-columns: 1fr; }
  .living-economy .month-profit > strong { font-size: 28px; }
  .living-economy .expected-cash strong { font-size: 23px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Personal search and employee proposals have independent ownership and limits. */
.personal-action-status { border: 1px solid #dfcec3; border-left: 5px solid var(--green); border-radius: 12px; padding: 18px 20px; margin: 0 0 12px; background: var(--white); }
.personal-action-status > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.personal-action-status h2 { font-size: 21px; line-height: 1.3; margin: 0; }
.personal-action-status strong { background: var(--green); color: var(--white); border-radius: 8px; padding: 8px 12px; font-size: 18px; white-space: nowrap; }
.personal-action-status p { margin: 10px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.workspace-tabs { display: flex; gap: 12px; border-bottom: 1px solid var(--line); margin: 0 0 24px; }
.workspace-tabs > button { position: relative; flex: 1; display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 62px; min-width: 0; padding: 16px 12px; border: 0; border-radius: 0; color: #806d73; background: transparent; font-size: 20px; line-height: 1.3; }
.workspace-tabs > button > svg { flex-shrink: 0; }
.workspace-tabs > button > span { white-space: nowrap; }
.workspace-tabs > button.selected { color: var(--ink); font-weight: 700; }
.workspace-tabs > button.selected::after { content: ''; position: absolute; height: 3px; background: var(--green); left: 0; right: 0; bottom: -1px; border-radius: 3px; }
.workspace-tabs > button:focus-visible, .team-project-row:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.workspace-action-badge { display: inline-grid; place-items: center; min-width: 25px; height: 25px; border-radius: 50%; background: var(--green); color: var(--white); font-size: 15px; font-weight: 700; }
#workspace-panel:focus { outline: none; }
.team-workspace-heading .workshop-scene { grid-template-columns: 1fr; min-height: 0; }
.team-workspace-heading .workshop-title h1 { max-width: none; }
.team-proposals-title h2 { font-size: 25px; line-height: 1.3; margin: 0 0 8px; }
.team-waiting-count { font-size: 16px; line-height: 1.5; color: #80685e; margin: 0; }
.team-proposals-intro { margin: 14px 0 22px; color: var(--muted); }
.employee-proposals-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 28px; }
.employee-proposals { min-width: 0; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.employee-proposals-heading { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.employee-proposals-heading .person-portrait { width: 72px; height: 84px; flex-shrink: 0; object-fit: contain; object-position: center bottom; }
.employee-proposals-heading h3 { font-size: 23px; line-height: 1.3; margin: 0 0 4px; }
.employee-proposals-heading p { font-size: 15px; line-height: 1.4; color: var(--muted); margin: 0; }
.employee-proposal-rows { display: grid; gap: 10px; }
.team-project-row { display: grid; grid-template-columns: 23px minmax(0,1fr) auto 18px; align-items: center; gap: 10px; min-height: 68px; width: 100%; padding: 14px 12px; text-align: left; border: 1px solid #dfcec3; border-radius: 10px; background: var(--white); color: var(--ink); }
.team-project-row.ready:hover { background: #f2e8df; border-color: #aa8170; }
.team-project-label { font-size: 16px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
.team-project-status { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px; line-height: 1.4; padding: 5px 8px; border-radius: 6px; background: #f1e3d8; }
.team-project-row:disabled { opacity: 1; cursor: default; }
.team-project-row.completed { background: #edf2e7; border-color: #b9c9ac; color: #426142; }
.team-project-row.completed .team-project-status { padding: 0; background: transparent; color: #426142; font-weight: 650; }
.team-project-row.unavailable { color: #7b7272; background: #eee7e1; }
.team-project-row.unavailable .team-project-status { background: transparent; }
.team-action-preserved { display: flex; align-items: center; gap: 10px; background: #edf2e7; border: 1px solid #b9c9ac; color: #426142; border-radius: 9px; padding: 12px 14px; font-size: 15px; line-height: 1.5; margin: 16px 0; }
.team-action-preserved > svg { flex-shrink: 0; }
.team-hire-button { margin-top: 24px; }
.team-proposals-empty { padding: 24px 0 4px; max-width: 470px; }
.team-proposals-empty > svg { color: #a07865; margin-bottom: 10px; }
.team-proposals-empty h3 { font-size: 21px; margin: 0 0 10px; }
.team-proposals-empty p { color: var(--muted); }
.personal-project { margin-bottom: 18px; }
.personal-project > svg { flex-shrink: 0; }
.personal-project .copy b { font-size: 17px; }
.personal-project .copy small { font-size: 14px; line-height: 1.5; }
@media(max-width:760px) {
  .workspace-tabs { gap: 8px; margin-bottom: 22px; }
  .workspace-tabs > button { font-size: 16px; padding: 13px 6px; gap: 5px; min-height: 58px; }
  .workspace-tabs > button > svg { width: 19px; height: 19px; }
  .workspace-action-badge { min-width: 23px; height: 23px; font-size: 14px; }
  .personal-action-status { padding: 16px 15px; }
  .personal-action-status h2 { font-size: 20px; }
  .personal-action-status strong { font-size: 17px; padding: 7px 10px; }
  .employee-proposals-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .team-proposals-title h2 { font-size: 24px; }
  .team-hire-button { width: 100%; }
  .team-project-row { gap: 8px; grid-template-columns: 21px minmax(0,1fr) auto 16px; }
  .team-project-status { padding: 5px 6px; }
}
@media(max-width:360px) {
  .workspace-tabs { gap: 4px; }
  .workspace-tabs > button { font-size: 15px; gap: 3px; padding-inline: 3px; }
  .workspace-tabs > button > svg { width: 16px; height: 16px; }
  .workspace-action-badge { min-width: 21px; height: 21px; font-size: 13px; }
}


/* Guided learning highlights the real control; it never changes game state. */
.coach-layer { position: fixed; inset: 0; z-index: 2000; pointer-events: none; }
.coach-mask { position: fixed; background: rgba(35,25,32,.68); pointer-events: auto; }
.coach-spotlight { position: fixed; border: 3px solid #e9b67c; border-radius: 14px; box-shadow: 0 0 0 2px #fff7e8; pointer-events: none; }
.coach-card { position: fixed; width: min(400px,calc(100vw - 24px)); max-height: min(460px,calc(100dvh - 80px)); overflow: auto; background: #fffaf3; color: #49343f; border: 1px solid #d6b69b; border-radius: 16px; padding: 18px; box-shadow: 0 12px 40px #271d2c40; pointer-events: auto; overscroll-behavior: contain; }
.coach-heading { display: flex; gap: 10px; align-items: center; }
.coach-heading img { object-fit: contain; flex: 0 0 52px; }
.coach-heading strong { display: block; font-size: 16px; }
.coach-heading span { display: block; color: #806b72; font-size: 13px; margin-top: 3px; }
.coach-dismiss { display: grid; place-items: center; margin-left: auto; align-self: flex-start; flex: 0 0 44px; width: 44px; height: 44px; background: #efe8df; color: #49343f; border: 0; border-radius: 50%; font-size: 26px; cursor: pointer; }
.coach-card h2 { font-size: 21px; line-height: 1.25; margin: 14px 0 10px; letter-spacing: -.4px; }
.coach-card .story-message { font-size: 16px; line-height: 1.5; margin: 0; }
.coach-actions { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 16px; }
.coach-actions .button { min-height: 46px; padding: 12px 16px; white-space: normal; }
.coach-actions .text-button { min-height: 44px; font-size: 14px; }
.coach-card button:focus-visible { outline: 3px solid #3d6383; outline-offset: 3px; }
.coach-card-docked { max-height: 52dvh; }
.coach-card-docked .coach-heading img { width: 40px; height: 40px; flex-basis: 40px; }
.coach-card-docked h2 { margin-top: 10px; }
.coach-card-docked .coach-actions { margin-top: 12px; }
body.coach-reading-offers .decision-context { position: static; }
.coach-point .coach-mask { background: rgba(25,17,24,.82); }
.coach-point .coach-spotlight { animation: advertising-frame-pulse 1.8s ease-in-out infinite; }
.coach-point-target :is(.metric-copy, .compact-copy) b { animation: advertising-label-pulse 1.8s ease-in-out infinite; border-radius: 4px; }
.coach-point-label { position: fixed; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 8px 10px 8px 14px; border: 1px solid #d6b69b; border-radius: 10px; background: #fff5e6; color: #49343f; font-size: 15px; pointer-events: auto; }
.coach-point-label button { flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 50%; color: inherit; background: #efe5d8; font-size: 23px; cursor: pointer; }
@keyframes advertising-frame-pulse { 0%,100% { border-color: #e9b67c; box-shadow: 0 0 0 2px #fff7e8; } 50% { border-color: #b9712c; box-shadow: 0 0 0 5px #ffe0a9; } }
@keyframes advertising-label-pulse { 0%,100% { background-color: transparent; } 50% { background-color: #ffe0a9; } }
@media(prefers-reduced-motion:reduce) { .coach-point .coach-spotlight,.coach-point-target :is(.metric-copy, .compact-copy) b { animation: none; } }
@media(max-width:420px) { .coach-card { padding: 14px; } .coach-card h2 { font-size: 19px; } .coach-card .story-message { font-size: 15px; line-height: 1.45; } .coach-actions .button { font-size: 14px; padding: 12px; } }