/* ─────────────────────────────────────────────────────────────────────────
   Proms document layer · operational reading patterns
   Loaded AFTER proms-site.css so it inherits the campaign tokens.

   WHY THIS EXISTS
   The four team sites carry long operational documents that people read on a
   phone, backstage, under time pressure, often for the first time. That is a
   different job from marketing pages, and plain prose fails at it.

   SOURCE: the component patterns below are adapted from the GOV.UK Design
   System (https://design-system.service.gov.uk, MIT, alphagov/govuk-frontend),
   which is built and user-tested for exactly this case — high-stakes task
   content read once, correctly, by someone who is not an expert.

   The GOV.UK *visual* styling is deliberately NOT imported: that would override
   the Proms Design Pack and break brand. Only the STRUCTURAL patterns are
   borrowed — summary list, task list, warning text, inset text, details — and
   they are re-skinned onto the Proms tokens already declared in proms-site.css.
   ───────────────────────────────────────────────────────────────────────── */

/* ---- 1. Readable measure -------------------------------------------------
   Prose caps at ~68 characters. Tables, images and grids stay full width. */
.doc p,
.doc li{max-width:68ch}
.doc .full,
.doc table,
.doc .summary,
.doc .tasks{max-width:none}

/* ---- 2. Typographic rhythm ---------------------------------------------- */
.doc{line-height:1.62}
.doc h3{font-size:1.28rem;line-height:1.25;margin:0 0 .2rem}
.doc h4{
  font-family:var(--font-display,inherit);
  font-size:.79rem;text-transform:uppercase;letter-spacing:.13em;
  color:var(--proms-teal,#4A7276);
  margin:1.6rem 0 .55rem;padding-bottom:.3rem;
  border-bottom:1px solid var(--proms-mist,#E2EAE6)
}
.doc h4:first-of-type{margin-top:1.1rem}
.doc p{margin:0 0 .8rem}
.doc ul,.doc ol{margin:0 0 .9rem;padding-left:1.15rem}
.doc li{margin-bottom:.42rem}
.doc li>strong:first-child{color:#22261f}

/* ---- 3. Role header ------------------------------------------------------
   A role opens with an identity block, not a paragraph. */
.rolehead{display:flex;gap:.85rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.15rem}
.rolenum{
  flex:none;display:inline-grid;place-items:center;
  width:2rem;height:2rem;border-radius:50%;
  background:var(--proms-teal,#4A7276);color:#fff;
  font-family:var(--font-display,inherit);font-weight:600;font-size:.95rem;
  transform:translateY(.15rem)
}
.rolehead h3{margin:0}
.rolewho{font-weight:600;color:var(--proms-teal,#4A7276)}
.roleline{
  font-size:1.02rem;font-style:italic;color:#4a5250;
  margin:.15rem 0 1rem;max-width:68ch
}

/* ---- 4. Summary list (GOV.UK pattern) ------------------------------------
   Key/value facts. On phones it stacks; never a wall of commas. */
.summary{border-top:1px solid var(--proms-mist,#E2EAE6);margin:0 0 1.1rem}
.summary div{
  display:grid;grid-template-columns:11rem 1fr;gap:.2rem 1rem;
  padding:.5rem 0;border-bottom:1px solid var(--proms-mist,#E2EAE6)
}
.summary dt{
  font-family:var(--font-display,inherit);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.11em;color:#6b7472;padding-top:.15rem
}
.summary dd{margin:0}
@media (max-width:560px){.summary div{grid-template-columns:1fr;gap:.05rem}}

/* ---- 5. Warning text (GOV.UK pattern) ------------------------------------ */
.warn{
  display:flex;gap:.7rem;align-items:flex-start;
  background:#FDF3F2;border-left:4px solid #B3453A;
  border-radius:0 8px 8px 0;padding:.75rem .95rem;margin:0 0 1rem
}
.warn::before{
  content:"!";flex:none;display:grid;place-items:center;
  width:1.4rem;height:1.4rem;border-radius:50%;
  background:#B3453A;color:#fff;font-weight:700;font-size:.85rem;
  transform:translateY(.1rem)
}
.warn p{margin:0;max-width:64ch}
.warn p+p{margin-top:.5rem}

/* ---- 6. Inset text (GOV.UK pattern) -------------------------------------- */
.inset{
  border-left:4px solid var(--proms-teal-soft,#7FA6A6);
  padding:.15rem 0 .15rem 1rem;margin:0 0 1rem;color:#3f4746
}
.inset p{margin:0;max-width:64ch}

/* ---- 7. Task list (GOV.UK pattern) --------------------------------------
   Tables with class="tasks" get live shared checkboxes from index.html. */
.tasks{margin:.2rem 0 .4rem}
.tasks thead th{
  font-family:var(--font-display,inherit);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.1em
}
.tasks tbody td:nth-child(2){white-space:nowrap;font-variant-numeric:tabular-nums;color:#6b7472}
.tasks tbody tr:hover{background:var(--proms-cream,#F0E9D6)}

/* ---- 8. Details / accordion (GOV.UK pattern) ---------------------------- */
.doc details{
  border:1px solid var(--proms-mist,#E2EAE6);border-radius:8px;
  padding:.55rem .9rem;margin:0 0 .9rem;background:var(--proms-white,#FBFAF6)
}
.doc details[open]{padding-bottom:.9rem}
.doc summary{
  cursor:pointer;font-family:var(--font-display,inherit);font-weight:600;
  font-size:.93rem;color:var(--proms-teal,#4A7276);list-style:none
}
.doc summary::-webkit-details-marker{display:none}
.doc summary::before{content:"▸ ";display:inline-block;transition:transform .15s}
.doc details[open] summary::before{content:"▾ "}
.doc details>*:not(summary){margin-top:.7rem}

/* ---- 9. Role index ------------------------------------------------------- */
.roleindex{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem;padding:0;list-style:none}
.roleindex li{margin:0;max-width:none}
.roleindex a{
  display:block;text-decoration:none;
  border:1px solid var(--proms-mist,#E2EAE6);border-radius:999px;
  padding:.34rem .85rem;font-size:.88rem;background:var(--proms-white,#FBFAF6);
  color:#22261f
}
.roleindex a:hover{border-color:var(--proms-teal,#4A7276);color:var(--proms-teal,#4A7276)}

/* ---- 10. Print -----------------------------------------------------------
   These get printed and handed out. One role per page, no chrome. */
@media print{
  nav,.pubbtn,.sharebar,header img.banner,.factstrip,.roleindex{display:none!important}
  main{max-width:none;padding:0}
  .card{break-inside:avoid;page-break-inside:avoid;border:none;box-shadow:none;padding:0 0 1rem}
  .rolecard{break-before:page;page-break-before:always}
  .rolecard:first-of-type{break-before:auto;page-break-before:auto}
  .doc details{border:none;padding:0}
  .doc details>*:not(summary){display:block!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555}
}

/* ---- 11. Callout cards ---------------------------------------------------
   Whole-card emphasis, distinct from the inline .warn / .inset patterns. */
.card.callout-danger{border-left:5px solid #B3453A}
.card.callout-info{border-left:5px solid var(--proms-teal-soft,#7FA6A6)}
.card.callout-danger>h3:first-child{color:#B3453A}

/* ---- 12. Small print ----------------------------------------------------- */
.doc .small,.doc p.small,.doc .small *{font-size:.86rem;line-height:1.55;color:#5d6663}

/* ---- 13. Tab intro -------------------------------------------------------
   The lead paragraph under each h2 sets context; give it a little more air. */
.doc>h2+p{font-size:1.05rem;color:#3f4746;max-width:68ch}

/* ---- 14. Status block ----------------------------------------------------
   Dated situation reports, newest first, so the top of Overview is scannable. */
.status{margin:0}
.status>div{padding:.7rem 0;border-top:1px solid var(--proms-mist,#E2EAE6)}
.status>div:first-child{border-top:none;padding-top:0}
.status .when{
  font-family:var(--font-display,inherit);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.11em;color:var(--proms-teal,#4A7276);
  display:block;margin-bottom:.3rem
}
.status ul{margin:.4rem 0 0}

/* ---- 15. Tables: quieter, more scannable -------------------------------- */
.doc table{font-size:.92rem}
.doc thead th{
  font-family:var(--font-display,inherit);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.09em;color:#5d6663;
  border-bottom:2px solid var(--proms-mist,#E2EAE6)
}
.doc tbody tr+tr{border-top:1px solid var(--proms-mist,#E2EAE6)}
.doc td,.doc th{padding:.5rem .6rem;vertical-align:top}
.doc td:first-child{font-variant-numeric:tabular-nums}

/* ---- 16. Anchor offset so jump links don't hide under the nav ----------- */
.doc [id]{scroll-margin-top:1.2rem}

/* ---- 17. Panel: a grouped reference block inside a role ------------------ */
.panel{
  border-left:3px solid var(--proms-mist,#E2EAE6);
  padding-left:1rem;margin:0 0 1.1rem
}
.panel>*:last-child{margin-bottom:0}