/* The Coach tab on the Resume page (js/views/coach.js). Guide and chat stack on a narrow
   screen and sit side by side from 1100px (guide left, chat right). Colour is never the only
   signal: every check carries its state in words. No inline style anywhere (CSP). */
.coach { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1100px) {
  .coach { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .coach-chat { position: sticky; top: calc(var(--sticky-h, 0px) + 12px); max-height: calc(100dvh - var(--sticky-h, 0px) - 24px); overflow-y: auto; }
  /* While the short builder shows (views/coach.js showBuilder), one column: the builder card grows
     with the page, so Done, Write them again and the AI note are never hidden in an inner scroll. */
  .coach.is-building { grid-template-columns: minmax(0, 1fr); }
  .coach.is-building .coach-chat { position: static; max-height: none; overflow: visible; }
}
.coach-guide-fold > summary { cursor: pointer; font-weight: 600; font-size: var(--t-md); padding: 10px 0; min-height: 44px; box-sizing: border-box; }
.coach-guide-fold > .hint { margin: 0 0 8px; }
.coach-guide, .coach-chat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px;
  min-width: 0;
}
.coach h2 { margin: 0 0 4px; font-size: var(--t-md); }
.coach h3 { margin: 12px 0 4px; font-size: var(--t-sm); }

/* The guide. */
.coach-section { border-top: 1px solid var(--line); padding: 8px 0; }
.coach-section > summary { cursor: pointer; font-weight: 600; padding: 10px 0; min-height: 44px; box-sizing: border-box; }
.coach-count { font-weight: 400; color: var(--ink-dim); }
.coach-about { margin: 4px 0 8px; }
.coach-about dt { font-weight: 600; font-size: var(--t-xs); margin-top: 8px; }
.coach-about dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.coach-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.coach-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; }
.coach-check p { margin: 0; overflow-wrap: anywhere; }
.coach-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; font-weight: 700; font-size: var(--t-xs); margin-top: 2px; }
.coach-check.is-done .coach-mark { background: var(--ok-bg); color: var(--ok); }
.coach-check.is-fix .coach-mark { background: var(--danger-soft); color: var(--danger-strong); }
.coach-check.is-look .coach-mark { background: var(--accent-soft); color: var(--accent); }
/* An empty resume: nothing is wrong yet, so the mark is neutral, not the red one. */
.coach-check.is-todo .coach-mark { background: var(--line); color: var(--ink-dim); }
.coach-state { font-weight: 600; }
.coach-line { font-size: var(--t-xs); color: var(--ink-dim); border-left: 3px solid var(--line-strong); padding-left: 8px; margin-top: 4px; }

/* The chat. */
.coach-empty { padding: 8px 0; }
.coach-log { margin: 12px 0; }
.coach-status:empty { display: none; }
.coach-compose { border-top: 1px solid var(--line); padding-top: 12px; }
.coach-cards { display: grid; gap: 8px; margin-top: 8px; white-space: normal; }
.coach-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-control); padding: 10px 12px; }
.coach-card p { margin: 0 0 6px; overflow-wrap: anywhere; }
.coach-kind { font-weight: 600; font-size: var(--t-xs); }
.coach-new { border-left: 3px solid var(--accent); padding-left: 8px; }
.coach-done { font-weight: 600; }
.coach-over-ask { margin-top: 8px; }
.coach-over-ask p { margin: 0 0 6px; }

/* "How we know": a quiet link under each guide section to the evidence page. */
.coach-how { margin: 4px 0 8px; font-size: var(--t-xs); }

/* The ready card (spec B4): the one raised card on the tab while it shows. */
.coach-ready { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-control); padding: 12px 14px; margin: 8px 0 12px; }
.coach-ready h3 { margin: 0 0 6px; font-size: var(--t-sm); }
.coach-ready p { margin: 0 0 8px; overflow-wrap: anywhere; }
.coach-ready-more-h { margin-top: 12px; }

/* The short builder (views/coach-builder.js): the welcome with the face, a progress line, then
   one step at a time. */
.builder-welcome { display: flex; gap: 14px; align-items: center; margin: 8px 0 12px; }
.builder-welcome .face { flex: none; }
.builder-welcome-text p { margin: 0 0 6px; overflow-wrap: anywhere; }
.builder-welcome-lead { font-size: var(--t-md); font-weight: 500; }
.builder-progress { margin: 0 0 4px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-dim); }
.builder-step h3 { margin: 12px 0 4px; font-size: var(--t-md); }
.builder-step > p { margin: 0 0 6px; overflow-wrap: anywhere; }
.builder-example { font-size: var(--t-xs); color: var(--ink-dim); border-left: 3px solid var(--line-strong); padding-left: 8px; }
.builder-example-label { font-weight: 600; }
.builder-how { font-size: var(--t-xs); }
.builder-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 12px; }
.builder-dates[hidden] { display: none; }
.builder-role { font-weight: 600; }
.builder-drafts { margin-top: 12px; }
.builder-actions { margin-top: 12px; }

/* Phone: the chat comes first, and every coach button is a 44px target. */
@media (max-width: 767px) {
  .coach-chat { order: -1; }
  .coach button { min-height: 44px; }
  /* app-flow.css makes every summary in main a flex box on a phone, which drops the disclosure
     marker and the space before "(to add)"; the coach's folds stay list items. */
  .coach-section > summary, .coach-guide-fold > summary { display: list-item; }
  .coach-count { white-space: nowrap; }
  /* The welcome: the face above the words. */
  .builder-welcome { flex-direction: column; align-items: flex-start; }
  /* The step's buttons as a column of full-width buttons, the step button (Next) first. */
  .builder-actions { flex-direction: column; align-items: stretch; }
  .builder-actions button { width: 100%; margin: 0; }
  /* A "How we know" link on its own line is a 44px target. */
  .coach-how a, .builder-how a { display: inline-flex; min-height: 44px; align-items: center; }
}

/* ------------------------------------------------ Resume page header and phone layout
   (2026-10-21 design audit). The page h1 "Your resume" sits above the tabs in the display face,
   like "Your jobs"; the editor bar names the document "Core resume". Under 640px: the tablist
   is a 2 by 2 grid of equal tabs (a sideways scroll cut "Change log" at the edge), the formatting toolbar stays one row (the two indent
   buttons hide; Tab and Shift+Tab, Cmd or Ctrl+] and [ still indent), and the suggestion cards
   come after the resume page instead of between the bar and the page. */
.view.master-view > .master-title { margin: 0 0 12px; }
@media (max-width: 640px) {
  .view.master-view .master-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .view.master-view .master-tabs button.tab { justify-content: center; text-align: center; min-height: 44px; }
  .view.master-view .re-tools { flex-wrap: nowrap; }
  .view.master-view .re-tools .re-btn-outdent,
  .view.master-view .re-tools .re-btn-indent { display: none; }
  .view.master-view .master-editor > .re { display: flex; flex-direction: column; }
  .view.master-view .master-editor > .re > .master-review-list { order: 1; }
}