/* One thread through six documents, on the drawing kit. Load after ../_kit/kit.css and kit-motion.css.
   Only placement, this picture's stage light and its own anatomy live here; paper, stock, shadow, rules,
   route, stations, person stops and marks are the kit's. No colour literals: kit --k-mat-* and system tokens. */
html { color-scheme: light; }
.ht-body { margin: 0; background: var(--color-surface-page); overflow-x: clip; }
.ht-page { width: 1344px; margin: 0 auto; padding: var(--p-space-9) 0 var(--p-space-8); }
.ht-headline { text-wrap: balance; width: 888px; margin: 0 0 var(--p-space-7) !important; font: 400 var(--type-step-4)/var(--type-leading-4) var(--type-display-1-family); letter-spacing: -0.02em; }
.ht-figure { --k-bleed: max(0px, calc((100vw - 1344px) / 2)); width: 1344px; }

/* The stage. One key light from the upper left, its pool on the pack, the far right falling darker. */
.ht-scene { height: 944px; border-radius: var(--p-radius-well) 0 0 var(--p-radius-well); --k-lx: 0.7; --k-pool-x: 30%; --k-pool-y: 44%; --k-pool-w: 44%; --k-pool-h: 78%; }
.ht-field { position: absolute; z-index: 0; }
.ht-field--desktop { left: 744px; top: 56px; width: 648px; height: 696px; }
.ht-field--phone { display: none; }
.ht-corner { z-index: 0; }
.ht-corner--tl { left: 744px; top: 56px; }
.ht-corner--tr { left: 1380px; top: 56px; scale: -1 1; }
.ht-corner--bl { left: 744px; top: 740px; scale: 1 -1; }
.ht-route--desktop { width: 1392px; height: 944px; }
.ht-business { left: 52px; top: 34px; margin: 0; }

/* Stages: the box is the paper's box. Station labels sit in open ground, beside their square on the route. */
.ht-stage { position: absolute; }
.ht-set { position: absolute; inset: 0; }
.ht-station { position: absolute; z-index: 2; }
.ht-station p { text-wrap: balance; color: var(--color-text-secondary); font-size: var(--type-step-0); line-height: var(--type-leading-0); }
.ht-doc { position: absolute; inset: 0; z-index: 1; }
.ht-decide { left: 8px; top: 208px; width: 280px; height: 372px; z-index: 4; }
.ht-build { left: 240px; top: 104px; width: 480px; height: 560px; z-index: 10; }
.ht-run { left: 680px; top: 376px; width: 272px; height: 280px; z-index: 5; }
.ht-grow { left: 792px; top: 84px; width: 300px; height: 232px; z-index: 4; }
.ht-fix { left: 1008px; top: 328px; width: 336px; height: 324px; z-index: 6; }
.ht-learn { left: 1088px; top: 612px; width: 320px; height: 244px; z-index: 7; }
.ht-decide .ht-station { left: 48px; top: -104px; width: 152px; }
.ht-build .ht-station { left: 102px; top: -88px; width: 288px; }
.ht-run .ht-station { left: 118px; top: -44px; width: 176px; display: flex; align-items: baseline; gap: var(--p-space-2); }
.ht-grow .ht-station { left: 8px; top: -76px; width: 172px; }
.ht-fix .ht-station { left: 144px; top: -116px; width: 216px; }
.ht-learn .ht-station { left: -272px; top: 60px; width: 212px; }
.ht-destination { position: absolute; z-index: 12; left: 1194px; top: 874px; }

/* Fit Note. Its right side is left clear: the pack's edge lies there. */
.ht-fit .k-body { padding: 14px 56px 14px 16px; }
.ht-fit .k-note__fields { margin-top: var(--p-space-2); }
.ht-fit .k-note__fields > div { grid-template-columns: 72px 1fr; padding-block: 7px; }
.ht-fit .k-note__fields dt { font-size: 8px; line-height: 11px; }
.ht-fit .k-note__fields dd { font-size: 9px; line-height: 12px; }
.ht-fit .k-date { font-size: 9px; line-height: 12px; }
.ht-fit .k-letterhead, .ht-fit .k-date { margin-right: 8px; }
.ht-fit .k-note__keep { max-width: 150px; color: var(--color-text-secondary); }

/* The bound pack, read scale. Tabs come out from under the cover into the gap before the sprint. */
.ht-pack .k-body { padding: 28px 32px 24px 52px; }
.ht-pack .k-tabs { top: 64px; right: -60px; }
.ht-pack .k-tabs span { width: 72px; padding-left: 26px; }
.ht-pack .ht-accepted { margin-top: var(--p-space-2) !important; font-size: var(--type-step-0); line-height: var(--type-leading-0); }
.ht-pack .k-pack__job { margin-top: 20px; padding-block: var(--p-space-4); }
.ht-pack .ht-addressee { margin-bottom: var(--p-space-1); font: 400 var(--type-step-1)/var(--type-leading-1) var(--p-font-family-display); }
.ht-pack .k-pack__job .k-muted { font-size: var(--type-step-minus-1); line-height: var(--type-leading-minus-1); }
.ht-pack .ht-sources { margin-top: var(--p-space-3); font-size: 11px; line-height: 16px; }
.ht-pack .ht-sources td { padding-block: 6px; }
.ht-pack .ht-sources td:last-child { text-align: right; color: var(--color-text-secondary); }
.ht-pack .ht-sources .k-figure { font-weight: 600; }
.ht-pack .ht-installed { margin-top: var(--p-space-4) !important; font-size: var(--type-step-minus-1); line-height: var(--type-leading-minus-1); }
.ht-pack .k-signature { margin-top: var(--p-space-4) !important; }
.ht-pack .ht-signs { font: 400 var(--type-step-1)/var(--type-leading-1) var(--p-font-family-display); gap: var(--p-space-2); align-items: center; }
.ht-pack .ht-signs::before { width: 10px; height: 10px; }
.ht-pack .k-signature .k-doc-subtitle { margin-left: 18px; font-size: var(--type-step-minus-1); line-height: var(--type-leading-minus-1); }
.ht-pack .k-stamp { top: 22px; }

/* Monthly note on register stock. Its left is under the pack; the ledger margin lies just clear of it. */
.ht-monthly { --k-pad: 64px; --k-body-size: 9px; --k-body-leading: 13px; }
.ht-monthly .k-body { padding: 14px 14px 14px 72px; }
.ht-monthly .k-register td { padding-block: 6px; }
.ht-monthly .k-register th:last-child { width: 58px; }
.ht-monthly .k-period { font-size: 8px; }
.ht-monthly .k-footline { font-size: 8px; line-height: 12px; }

/* Optimisation Sprint: a folded register sheet with one week drawn across five day columns. */
.ht-sprint { --k-pad: 16px; }
.ht-sprint .k-body { padding: 14px 18px; }
.ht-sprint::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, transparent 49.2%, var(--k-mat-shade-070) 49.7%, var(--k-mat-light-900) 50.1%, var(--k-mat-shade-025) 50.7%, transparent 58%); }
.ht-sprint .ht-next-goal { margin-top: var(--p-space-1); }
.ht-sprint__week { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); height: 72px; margin-top: var(--p-space-3); font-size: 8px; line-height: 11px; color: var(--color-text-secondary); box-shadow: inset 0 calc(-1 * var(--k-hair)) 0 var(--k-ink-rule); }
.ht-sprint__week > span { padding: 0 0 0 var(--p-space-1); box-shadow: inset var(--k-hair) 0 0 var(--k-ink-rule); }
.ht-sprint__week > span:first-child { box-shadow: inset var(--line-construction) 0 0 var(--color-text-tertiary); }
.ht-sprint__bar { position: absolute; left: 0; right: 0; top: 30px; height: 16px; padding: 0 var(--p-space-2); background: var(--color-text-secondary); color: var(--color-paper); font-size: 8px; line-height: 16px; font-weight: 500; }
.ht-sprint .k-footline { margin-top: var(--p-space-3) !important; }

/* Prioritised backlog, clipped. No estimate column: no source gives one. */
.ht-backlog { --k-pad: 16px; --k-body-size: 10px; --k-body-leading: 13px; }
.ht-backlog .k-body { padding: 16px 20px; }
.ht-backlog .k-register th:first-child { width: 28px; }
.ht-backlog .k-register td { padding-block: 11px; }
.ht-backlog .k-register td strong { font-size: 11px; line-height: 14px; }
.ht-backlog .k-register td small { font-size: 9px; line-height: 12px; margin-top: 3px; }

/* First week on cardstock. The sheet runs past the well's edge; its contents stay 16 px inside it. */
.ht-week .k-body { padding: 16px 32px 16px 20px; }
.ht-week .k-week__table { margin-top: var(--p-space-3); font-size: 8px; line-height: 11px; }
.ht-week .k-week__table th, .ht-week .k-week__table td { padding: 4px; }
.ht-week .k-week__table .k-inline-person { font-size: 8px; }
.ht-week .k-detail > .k-doc-subtitle:last-child { margin-top: var(--p-space-3) !important; }

/* Ruling for this picture (director, 12 Nov): each of the six papers is a stage the reader reads, so the
   five satellites keep the source's reading sizes (titles 21/28, contents 12/16, fine anatomy 9 to 10 px),
   on the kit's stocks, rules, shadows and marks. The pack is the one lifted paper. */
.ht-fit, .ht-monthly, .ht-sprint, .ht-backlog, .ht-week { --k-title-size: var(--type-step-1); --k-title-leading: var(--type-leading-1); --k-body-size: var(--type-step-minus-1); --k-body-leading: var(--type-leading-minus-1); }
.ht-doc .k-letterhead { font-size: var(--type-step-minus-1); line-height: 16px; padding-bottom: 6px; }
.ht-doc .k-letterhead > span:last-child { font-size: 10px; }
.ht-doc .k-doc-title { margin-top: 6px !important; }
.ht-fit .k-body { padding: 16px 56px 14px 16px; }
.ht-fit .k-note__fields { margin-top: 2px; }
.ht-fit .k-note__fields > div { display: block; padding-block: 4px; }
.ht-fit .k-note__fields dt { font: 400 10px/14px var(--p-font-family-working); color: var(--color-text-secondary); }
.ht-fit .k-note__fields dd { font-size: var(--type-step-minus-1); line-height: 16px; }
.ht-fit .k-note__fields dd strong { font-weight: 500; }
.ht-fit .k-date { padding-block: 4px; font-size: var(--type-step-minus-1); line-height: 16px; }
.ht-fit .k-note__keep { max-width: none; margin-top: 4px !important; font-size: 10px; line-height: 14px; color: var(--color-text-tertiary); }
.ht-pack .ht-sources { font-size: var(--type-step-minus-1); line-height: 16px; }
.ht-monthly .k-body { padding: 14px 14px 12px 66px; }
.ht-monthly .k-doc-subtitle { font-size: var(--type-step-minus-1); }
.ht-monthly .k-period { margin-top: 6px; font-size: 9px; line-height: 12px; }
.ht-monthly .k-register { margin-top: 4px; }
.ht-monthly .k-register th { padding-block: 3px; }
.ht-monthly .k-register td { padding-block: 4px; }
.ht-monthly .k-register th:last-child { width: 66px; }
.ht-monthly .k-footline { margin-top: 6px !important; padding-top: 4px; font-size: 10px; line-height: 16px; }
.ht-sprint .k-body { padding: 14px 24px 12px 20px; }
.ht-sprint .ht-next-goal { margin-top: 2px; font: 400 var(--type-step-0)/20px var(--p-font-family-display); }
.ht-sprint__week { height: 56px; margin-top: 8px; font-size: 10px; line-height: 14px; }
.ht-sprint__bar { top: 22px; height: 18px; font-size: 10px; line-height: 18px; }
.ht-sprint .k-footline { display: block; margin-top: 8px !important; padding-top: 4px; color: var(--color-text-secondary); }
.ht-sprint .k-footline > span { display: block; }
.ht-backlog .k-body { padding: 16px 20px; }
.ht-backlog .k-doc-subtitle { font-size: var(--type-step-minus-1); }
.ht-backlog .k-register { font-size: 10px; line-height: 12px; }
.ht-backlog .k-register td { padding-block: 8px; }
.ht-backlog .k-register td strong { font-size: var(--type-step-minus-1); line-height: 16px; }
.ht-backlog .k-register td small { font-size: 10px; line-height: 12px; margin-top: 2px; }
.ht-week .k-body { padding: 14px 32px 12px 20px; }
.ht-week .k-doc-subtitle { font-size: var(--type-step-minus-1); line-height: 16px; }
.ht-week .k-week__table { margin-top: 8px; font-size: 9px; line-height: 12px; }
.ht-week .k-week__table th, .ht-week .k-week__table td { padding: 3px 4px; }
.ht-week .k-week__table .k-inline-person { font-size: 9px; }
.ht-week .k-detail > .k-doc-subtitle:last-child { margin-top: 6px !important; }

/* Below the wide composition: a descending folio. Station labels move into each paper's head margin;
   their squares stay on the route outside. Each front sheet spans the sheet it covers by 40 px. */
@media (max-width: 1439px) {
  .ht-page { width: auto; max-width: 624px; margin: 0 auto; padding: var(--p-space-7) 16px; }
  .ht-headline { width: auto; max-width: 560px; margin-bottom: 32px !important; font-size: var(--type-step-3); line-height: var(--type-leading-3); }
  .ht-desktop-break { display: none; }
  .ht-figure { --k-bleed: 16px; width: auto; }
  .ht-scene { height: 2652px; border-radius: var(--p-radius-well-phone) 0 0 var(--p-radius-well-phone); --k-pool-x: 52%; --k-pool-y: 30%; --k-pool-w: 96%; --k-pool-h: 34%; }
  .ht-field--desktop, .ht-corner { display: none; }
  .ht-field--phone { display: block; left: 54px; top: 96px; width: 320px; height: 2520px; }
  .ht-business { left: 40px; top: 28px; }
  .ht-decide { left: 72px; top: 76px; width: 250px; height: 492px; }
  .ht-build { left: 32px; top: 528px; width: 290px; height: 704px; }
  .ht-run { left: 80px; top: 1192px; width: 242px; height: 384px; }
  .ht-grow { left: 48px; top: 1536px; width: 304px; height: 336px; z-index: 6; }
  .ht-fix { left: 48px; top: 1832px; width: 310px; height: 408px; z-index: 7; }
  .ht-learn { left: 40px; top: 2200px; width: 320px; height: 340px; z-index: 8; }
  .ht-stage .ht-station { left: 24px; top: 24px; width: calc(100% - 48px); }
  .ht-build .ht-station { left: 40px; width: calc(100% - 64px); }
  .ht-run .ht-station { top: 64px; }
  .ht-destination { left: 154px; top: 2578px; }
  .ht-fit .k-body { padding: 112px 16px 16px; }
  .ht-fit .k-letterhead, .ht-fit .k-date { margin-right: 0; }
  .ht-fit .k-note__fields > div { padding-block: 4px; }
  .ht-fit .k-note__keep { max-width: none; }
  .ht-pack .k-body { padding: 112px 20px 32px 36px; }
  .ht-pack .k-pack__spine { width: 16px; }
  .ht-pack .k-tabs { top: 160px; right: -44px; gap: 6px; }
  .ht-pack .k-tabs span { width: 66px; padding: 6px 3px 6px 35px; font-size: 7px; line-height: 10px; white-space: normal; }
  .ht-pack .k-doc-title { font-size: var(--type-step-2); line-height: var(--type-leading-2); }
  .ht-pack .ht-accepted { font-size: var(--type-step-1); line-height: var(--type-leading-1); }
  .ht-pack .k-pack__job { margin-top: var(--p-space-5); padding-block: var(--p-space-4); }
  .ht-pack .ht-sources td { padding-block: 8px; }
  .ht-pack .k-signature { margin-top: var(--p-space-6) !important; }
  .ht-pack .ht-sources { font-size: 11px; line-height: 16px; }
  .ht-pack .ht-sources td:last-child { width: 112px; }
  .ht-pack .k-stamp { top: 18px; }
  .ht-monthly { --k-pad: 20px; }
  .ht-monthly .k-body { padding: 100px 16px 16px 24px; }
  .ht-monthly .k-register td { padding-block: 4px; }
  .ht-sprint .k-body { padding: 88px 20px 16px 24px; }
  .ht-sprint::before { top: 80px; }
  .ht-sprint__week { height: 60px; }
  .ht-sprint__bar { top: 24px; }
  .ht-backlog .k-body { padding: 108px 20px 16px 24px; }
  .ht-backlog .k-backlog__clip { left: auto; right: 28px; }
  .ht-backlog::before { left: auto; right: 34px; }
  .ht-week .k-body { padding: 104px 24px 16px; }
  .ht-week .k-week__table th, .ht-week .k-week__table td { padding: 3px; }
}
/* Letterheads stay on one line: the monthly note's text column is the narrowest at 194 px. */
.ht-doc .k-letterhead > * { white-space: nowrap; }
.ht-monthly .k-letterhead > span:last-child { font-size: 9px; }