/* ============================================================================
   vespa-managers-dossier — the blocks this document needs and vespa-dossier
   did not.

   `dossier.css` and `drawer.css` are BYTE-IDENTICAL to vespa-dossier's. They are
   the pattern: the theme tokens, the bar, the plate, the tab, the drawer, the
   veil, the no-JS appendix. Editing either here would fork the pattern and the
   two builds would drift a rule at a time, so the shared files stay untouched
   and everything this document alone needs is in this fourth stylesheet.

   What this document owns and the other one did not:

     ledger   three quoted figures with a source, on the peak drawer
     caps     the nine capabilities, label and definition
     goals    the five requirements, each ending in its own goal
     rungs    the three maturity levels, indented into a climb
     audit    the nine assessment questions

   Nothing here invents a token. Every value resolves against dossier.css.
   ========================================================================= */

/* =================================================================== LEDGER
   The integration tax. Three figures quoted verbatim from the sentence printed
   directly beneath them, so a reader can check every one against its source on
   the same screen. On ink, because it is the one register change in the
   document and because a number this large on paper reads as decoration.

   THEY DO NOT COUNT UP. A counter spends a second showing numbers that are not
   true, and these are citations. */
.ledger{
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--hair);border:1px solid var(--hair);
  margin-top:1.5rem;
}
@media (min-width:34rem){ .ledger{grid-template-columns:repeat(3,1fr)} }
/* Three fixed rows, so the numerals share a baseline across all three boxes
   however the labels wrap. `align-content:end` alone bottom-aligned each box
   independently, which put a two-line label out of step with a one-line one. */
.fign{
  background:var(--ink);
  padding:1.1rem 1.1rem 1.25rem;
  display:grid;grid-template-rows:auto auto 1fr;gap:.15rem;
  min-height:7rem;
}
/* SCOPED UNDER .dr__body, and this is not decoration.
   These three are <p> elements, and drawer.css sets `.dr__body p{color:ink-78}`
   at specificity (0,1,1). A bare `.fign__v` is (0,1,0) and LOSES, so all three
   figures rendered dark ink on the dark ink ground: three empty black boxes,
   which is exactly what shipped. Every other block in this file already carried
   an !important for the same reason and the ledger was the one that did not.
   Two classes is (0,2,0), which wins honestly and says where the rule applies. */
.dr__body .fign__o{
  margin:0;font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
  min-height:1em;               /* holds the row when the figure has no qualifier */
}
.dr__body .fign__v{
  margin:0;font-family:var(--sc-font-display);font-weight:500;
  font-size:clamp(1.7rem,1.2rem+1.9vw,2.6rem);line-height:1;
  letter-spacing:-.02em;color:var(--mint);
}
.dr__body .fign__l{
  margin:0;font-size:.76rem;line-height:1.35;
  color:rgba(255,255,255,.78);max-width:18ch;
}

/* The source. Not a footnote: the sentence the figures came out of, set large
   enough to read, with GigaOm named and their report titled. */
.cite{
  margin:1.5rem 0 0;padding-top:1.1rem;
  border-top:1px solid var(--hair);
  display:grid;gap:.7rem;
}
.cite blockquote{margin:0}
.cite blockquote p{
  margin:0!important;font-family:var(--sc-font-display);
  font-size:clamp(1rem,.95rem+.3vw,1.15rem)!important;
  line-height:1.5!important;color:var(--ink)!important;max-width:34rem;
}
.cite figcaption{
  display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:baseline;
  font-size:.8rem;color:rgba(46,47,39,.55);
}
.cite figcaption .mono{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sc-accent);
}
.cite cite{font-style:normal}

/* ===================================================================== CAPS
   The nine capabilities. A register, so a grid. The label is bolded INLINE
   rather than on its own line: set as a block it left the contract's em dash
   dangling at the start of every description. */
.caps{
  list-style:none;margin:1.3rem 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--hair);border:1px solid var(--hair);
}
@media (min-width:40rem){ .caps{grid-template-columns:1fr 1fr} }
.cap{
  background:var(--sc-surface);padding:.85rem .9rem 1rem;
  display:grid;grid-template-columns:auto 1fr;gap:.2rem .6rem;align-content:start;
}
.cap__ic{color:var(--ink);margin-top:.2rem}
.cap p{
  margin:0!important;font-size:.84rem!important;line-height:1.5!important;
  color:rgba(46,47,39,.78)!important;
}
.cap p strong{font-family:var(--sc-font-display);font-weight:500;color:var(--ink)}

/* ==================================================================== GOALS
   The five requirements. Each ends in its own "The goal:" line, which is the
   part a manager acts on, so it is the card's conclusion rather than a
   paragraph that happens to be last. */
.goal{
  margin-top:1.9rem;padding-top:1.3rem;
  border-top:1px solid var(--hair);
}
.goal__t{
  margin:0 0 .7rem;font-family:var(--sc-font-display);font-weight:500;
  font-size:clamp(1.05rem,1rem+.4vw,1.3rem);line-height:1.2;
  letter-spacing:-.015em;color:var(--ink);
}
.goal__t strong{
  display:block;font-weight:500;
  font-size:clamp(1.6rem,1.2rem+1.4vw,2.4rem);line-height:.9;
  letter-spacing:-.03em;color:var(--mint);margin-bottom:.35rem;
}
.goal > p + p{margin-top:1.05rem}
.goal__g{
  margin:1rem 0 0!important;padding:.8rem .95rem;
  background:rgba(97,215,144,.14);border:1px solid var(--hair);
  font-family:var(--sc-font-display);
  font-size:.95rem!important;line-height:1.45!important;color:var(--ink)!important;
}
.goal__g strong{
  display:block;font-family:var(--mono);font-weight:400;
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sc-accent);margin-bottom:.3rem;
}

/* ==================================================================== RUNGS
   The maturity model. Three rungs, indented one step each, so the sequence
   reads as a climb before a word of it is read. */
.rungs{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.9rem}
.rung{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;
  padding:1rem 1.1rem 1.2rem;
  background:var(--sc-surface);
  border:1px solid var(--hair);border-left:3px solid var(--mint);
}
@media (min-width:40rem){
  .rung:nth-child(2){margin-left:1.5rem}
  .rung:nth-child(3){margin-left:3rem}
}
.rung__n{
  margin:0!important;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  color:var(--sc-accent)!important;
}
.rung__t{
  margin:0 0 .5rem;font-family:var(--sc-font-display);font-weight:500;
  font-size:clamp(1rem,.95rem+.35vw,1.2rem);line-height:1.2;color:var(--ink);
}
.rung p{margin:0!important;font-size:.84rem!important;line-height:1.55!important}
.rung p + p{margin-top:.7rem!important}
.rung__p{
  margin-top:.8rem!important;padding-top:.7rem;
  border-top:1px solid var(--hair);color:var(--ink)!important;
}
.rung__p strong{
  display:block;font-family:var(--mono);font-weight:400;
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sc-accent);margin-bottom:.25rem;
}

/* ==================================================================== AUDIT
   The nine questions. Marked VISUAL CALL OUT in the contract. An ordered list,
   because a manager works through them rather than picking from them. */
.audit{
  list-style:none;margin:1.3rem 0 0;padding:0;counter-reset:q;
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--hair);border:1px solid var(--hair);
}
@media (min-width:40rem){ .audit{grid-template-columns:1fr 1fr} }
.q{
  counter-increment:q;background:var(--sc-surface);
  padding:.85rem .9rem 1rem;position:relative;
  display:grid;grid-template-columns:auto 1fr;gap:.2rem .6rem;align-content:start;
}
.q::after{
  content:counter(q,decimal-leading-zero);
  position:absolute;top:.85rem;right:.9rem;
  font-family:var(--mono);font-size:.6rem;color:rgba(46,47,39,.34);
}
.q__ic{color:var(--ink);margin-top:.2rem}
.q p{
  margin:0!important;font-size:.84rem!important;line-height:1.5!important;
  color:rgba(46,47,39,.78)!important;padding-right:1.8rem;
}
.q p strong{
  display:block;font-family:var(--sc-font-display);font-weight:500;
  color:var(--ink);margin-bottom:.15rem;
}

/* ============================================================ small extras */
.dr__lede{
  margin-top:1.4rem!important;
  font-family:var(--sc-font-display);
  font-size:clamp(1rem,.95rem+.3vw,1.12rem)!important;
  color:var(--ink)!important;
}

/* ==================================================================== PRINT
   The film cannot print. The document can. */
@media print{
  .fign{background:#fff!important}
  .fign__v{color:#000!important}
  .fign__o,.fign__l{color:#333!important}
  .ledger{background:#999!important;border-color:#999!important}
  .goal__t strong,.goal__g strong,.rung__n,.rung__p strong{color:#000!important}
  .rung{break-inside:avoid}
  .rung:nth-child(2),.rung:nth-child(3){margin-left:0!important}
  .cap,.q,.goal{break-inside:avoid}
}

/* ====== PORT ADDITION: narrow-width control sizing (mobile/tablet) ======== */
/* Added by docscroll/pipeline/hubspot/port.py, not present in the source
   build. See DOSSIER_CONTROLS in targets.py for the measurements. Appended to
   managers.css because it loads LAST, so these win at equal specificity
   against drawer.css and dossier.css without raising specificity. */
@media (max-width:51.99rem){

  /* The bar CTA yields instead of overflowing. One line, same height, same
     colour, same position. The full label stays in the DOM, so screen readers
     and crawlers still get all 57 characters: text-overflow is visual only. */
  .bar__in > .bar__cta{
    flex:0 1 auto;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* A tab may not be wider than the sheet it hangs off. Stretching it to the
     plate makes all five the same width as each other AND as the CTA above
     them, which is the consistency that was asked for, and it hands the title
     the whole width so fewer titles need to truncate at all. */
  .blk > .tab{ align-self:stretch; }
  /* The title column takes the slack, which also pushes the arrow to the
     trailing edge instead of leaving dead space after it. min-width:0 is
     already set on .tab__in, and it is what lets the ellipsis engage. */
  .blk > .tab .tab__in{ flex:1 1 auto; }
  /* 17rem is 272px, a constant wider than the 265px plate. Let the container
     decide. */
  .blk > .tab .tab__t{ max-width:none; }
}