/* ==============================================================
 * TEAM BOOK — the book surface (Stage 2)
 *
 * The warm light "book", exactly as approved in the mock
 * (playbook-mock.html, surfaces 3 "The book the team keeps" and
 * 4 "A person's chapter"). Values are the mock's own, not
 * inferred from the design tokens.
 *
 * Everything is scoped under `.tb-book`, which declares its own
 * palette locally. That is what lets the SAME stylesheet render
 * the book inside the dark admin (admin.html) and on the light
 * participant page (teambook.html) without either surface's
 * variables leaking into the other. The book reads the same for
 * David as it does for the team, which is the point — he is
 * reading their book, not an admin report of it.
 *
 * Loaded by admin.html and teambook.html. No JS depends on it.
 * ============================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=switzer@400,500,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&display=swap');

.tb-book {
  /* the mock's light "world / book" palette */
  --l-bg: #f4f2ec;
  --l-paper: #fbfaf6;
  --l-ink: #20221c;
  --l-body: #63655c;
  --l-mut: #9a978c;
  --l-sage: #55613f;
  --l-sage-soft: #7c8a5f;
  --l-wash: #eaeade;
  --l-line: rgba(32, 34, 28, .10);
  --l-line2: rgba(32, 34, 28, .16);
  /* The one amber on paper. Used for a single thing: saying out loud that a
     gap is provisional because somebody has not answered yet. */
  --l-amber: #8a6a1e;
  --l-amber-wash: rgba(138, 106, 30, .09);
  --tb-sans: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tb-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  background: var(--l-paper);
  color: var(--l-ink);
  font-family: var(--tb-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--l-line2);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 18px 40px -22px rgba(0, 0, 0, .4);
}
.tb-book *, .tb-book *::before, .tb-book *::after { box-sizing: border-box; margin: 0; padding: 0; }

.tb-book .kick { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-weight: 600; }

/* ─── Cover ─── */
.tb-book .cover { background: var(--l-ink); color: var(--l-bg); padding: 30px 30px 26px; }
.tb-book .cover .kick { color: var(--l-sage-soft); }
.tb-book .cover h3 {
  font-family: var(--tb-serif); font-size: 30px; font-weight: 600;
  letter-spacing: -.01em; margin: 9px 0 5px;
}
.tb-book .cover .who { font-family: var(--tb-serif); font-size: 14px; color: rgba(244, 242, 236, .7); }

.tb-book .cbody { padding: 22px 26px 26px; }

/* ─── Book home: search + roster ─── */
.tb-book .searchbar {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--l-line2); border-radius: 10px; padding: 9px 13px;
  color: var(--l-mut); font-family: var(--tb-serif); font-size: 13.5px; margin-bottom: 16px;
}
.tb-book .searchbar input {
  flex: 1; border: 0; outline: none; background: transparent;
  font-family: var(--tb-serif); font-size: 13.5px; color: var(--l-ink);
}
.tb-book .searchbar input::placeholder { color: var(--l-mut); }

.tb-book .roster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tb-book .pcard {
  border: 1px solid var(--l-line); border-radius: 12px; padding: 13px 14px; background: #fff;
  display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.tb-book .pcard:hover { border-color: var(--l-line2); }
.tb-book .pcard b { font-weight: 600; font-size: 14.5px; }
.tb-book .pcard .role { font-family: var(--tb-serif); font-size: 12.5px; color: var(--l-mut); margin: 1px 0 9px; }
.tb-book .pcard .approach { font-family: var(--tb-serif); font-size: 12.5px; color: var(--l-body); }
/* Somebody with no role recorded: the approach block takes the space the role
   line would have held, so the card keeps its rhythm either way. */
.tb-book .pcard > b + .approach { margin-top: 9px; }
.tb-book .pcard .approach em {
  color: var(--l-sage); font-style: normal; font-weight: 600; font-family: var(--tb-sans);
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; display: block; margin-bottom: 2px;
}

/* Somebody who has not answered yet. Admin only — the team never sees a
   half-written chapter. Deliberately NOT the mock's dashed sage `.pcard.empty`,
   which is the Stage-3 "open position" and means something else entirely. */
.tb-book .pcard.pending { background: var(--l-wash); border-style: dashed; border-color: var(--l-line2); cursor: default; }
.tb-book .pcard.pending:hover { border-color: var(--l-line2); }
.tb-book .pcard.pending b { color: var(--l-mut); }
.tb-book .pcard.pending .approach { color: var(--l-mut); font-style: italic; }

/* ─── Chapter ─── */
.tb-book .chap .chead {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 4px; gap: 14px; flex-wrap: wrap;
}
.tb-book .chap .chead .nm { font-family: var(--tb-serif); font-size: 24px; font-weight: 600; }
.tb-book .chap .chead .rl { font-family: var(--tb-serif); font-size: 13px; color: var(--l-mut); }
.tb-book .chap .living { font-size: 11px; color: var(--l-sage); font-weight: 600; letter-spacing: .03em; white-space: nowrap; }

.tb-book .pin-block {
  background: var(--l-wash); border: 1px solid rgba(85, 97, 63, .35);
  border-radius: 14px; padding: 17px 18px; margin: 14px 0 18px;
}
.tb-book .pin-block .plab {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--l-sage);
  font-weight: 600; display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
}
.tb-book .pin-block p { font-family: var(--tb-serif); font-size: 15px; color: var(--l-ink); line-height: 1.5; }
.tb-book .fb2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tb-book .fb2 .fbk {
  font-family: var(--tb-sans); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--l-sage); font-weight: 600; display: block; margin-bottom: 3px;
}
.tb-book .fb2 p { font-size: 14px; }

.tb-book .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tb-book .col h5 {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--l-sage);
  font-weight: 600; margin-bottom: 9px; padding-bottom: 7px; border-bottom: 1px solid var(--l-line);
}
.tb-book .qa { margin-bottom: 13px; }
.tb-book .qa .ql { font-size: 12px; color: var(--l-mut); font-family: var(--tb-serif); margin-bottom: 2px; }

/* pre-wrap on every verbatim answer: people write in paragraphs, and "verbatim"
   has to mean the line breaks too. */
.tb-book .qa .qv { font-family: var(--tb-serif); font-size: 14px; color: var(--l-ink); white-space: pre-wrap; }
.tb-book .pin-block p, .tb-book .pcard .approach span { white-space: pre-wrap; }

/* ─── The analysis (Stage 3) ───────────────────────────────────────────
   Laid out as the mock's team sheet (surface 5), because in Stage 4 this
   becomes a page of the export and should be lifted rather than rebuilt. */

/* How much of the roster this is based on. A gap is "needed by somebody and
   provided by nobody" — while anybody is missing, that can simply mean the
   person who provides it has not answered yet, and this is the number that
   turns into "hire someone to do this". So it is stated, not buried. */
.tb-book .astat {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--l-line2); border-radius: 11px; padding: 12px 15px; margin-bottom: 20px;
}
.tb-book .astat .n { font-weight: 600; font-size: 15px; }
.tb-book .astat .t { font-family: var(--tb-serif); font-size: 13.5px; color: var(--l-body); }
.tb-book .astat.provisional { border-color: rgba(138, 106, 30, .4); background: var(--l-amber-wash); }
.tb-book .astat.provisional .n, .tb-book .astat.provisional .t strong { color: var(--l-amber); }

.tb-book .asec { margin-bottom: 26px; }
.tb-book .asec > h4 {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--l-sage);
  font-weight: 600; margin-bottom: 3px;
}
.tb-book .asec > .lede { font-family: var(--tb-serif); font-size: 13px; color: var(--l-mut); margin-bottom: 10px; }

.tb-book .srow {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--l-line); align-items: baseline;
}
.tb-book .srow.head { border-top: 0; padding-top: 0; padding-bottom: 7px; }
.tb-book .srow.head span {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--l-mut); font-weight: 600;
}
.tb-book .srow .pos { font-weight: 600; font-size: 14px; }
.tb-book .srow .pos small { display: block; font-family: var(--tb-serif); font-weight: 400; font-size: 12px; color: var(--l-mut); }
.tb-book .srow .fill { font-family: var(--tb-serif); font-size: 13.5px; color: var(--l-body); }
.tb-book .srow .fill.none { color: var(--l-mut); font-style: italic; }

/* A gap is the loudest thing on the page — it is the next hire. */
.tb-book .srow.gap {
  border-top: 0; background: var(--l-wash); border-radius: 10px;
  padding: 13px 14px; margin-top: 8px; align-items: center;
}
.tb-book .srow.gap .pos { color: var(--l-sage); font-size: 15px; }
.tb-book .srow.gap .fill.none { color: var(--l-sage); font-style: normal; font-weight: 600; }

.tb-book .callout {
  background: var(--l-ink); color: var(--l-bg); border-radius: 12px; padding: 15px 18px; margin-top: 18px;
  font-family: var(--tb-serif); font-size: 14px; line-height: 1.5;
}
.tb-book .callout b { font-family: var(--tb-sans); font-weight: 600; color: #fff; }

/* ─── Getting back out of a chapter, and the empty case ─── */
.tb-book .bnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tb-book .bback {
  background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--tb-sans);
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--l-sage);
}
.tb-book .bback:hover { color: var(--l-ink); }
.tb-book .bempty { font-family: var(--tb-serif); font-size: 13.5px; color: var(--l-mut); padding: 30px 0; text-align: center; }

@media (max-width: 600px) { .tb-book .fb2 { grid-template-columns: 1fr; gap: 11px; } }
@media (max-width: 720px) {
  .tb-book .two, .tb-book .roster { grid-template-columns: 1fr; }
  .tb-book .srow { grid-template-columns: 1fr; gap: 4px; }
  .tb-book .srow.head { display: none; }
  .tb-book .cover { padding: 24px 20px 22px; }
  .tb-book .cover h3 { font-size: 25px; }
  .tb-book .cbody { padding: 18px 18px 22px; }
}