/* File Manager, drawn as a drawing set. The product is where firms keep their
   drawings, and the page is already navy and pale blue, so every chapter after
   the problem borrows one convention from a real sheet: a title block, a
   sign-off, a legend, revision triangles, a revision schedule, a scale bar,
   a structural grid, revision clouds, detail callouts, redlines and a finish
   schedule. Tables and sheets sit on rounded panels with rules between rows.
   Loaded by this page only; the other case studies don't see it. */

.pg {
  --l1: color-mix(in srgb, var(--pfg) 11%, transparent);
  --l2: color-mix(in srgb, var(--pfg) 22%, transparent);
  --l3: color-mix(in srgb, var(--pfg) 42%, transparent);
  --mute: color-mix(in srgb, var(--pfg) 58%, transparent);
  --body: color-mix(in srgb, var(--pfg) 66%, transparent);
  --red: #ff8f78;
  /* tables and sheets sit on a rounded panel, with rules between rows only */
  --soft: color-mix(in srgb, var(--pfg) 4%, transparent);
  /* a revision triangle, outlined, in the markup red and in the accent */
  --dl-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 1.2 18.8 16.8H1.2z' fill='none' stroke='%23ff8f78' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* a revision cloud's scallops, for border-image */
  --cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M6 5A3 3 0 0 1 12 5M13 6A3 3 0 0 1 13 12M12 13A3 3 0 0 1 6 13M5 12A3 3 0 0 1 5 6M5 6A2.5 2.5 0 1 1 6 5M12 5A2.5 2.5 0 1 1 13 6M13 12A2.5 2.5 0 1 1 12 13M6 13A2.5 2.5 0 1 1 5 12' fill='none' stroke='%23ff8f78' stroke-width='.85'/%3E%3C/svg%3E");
  --dl-acc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 1.2 18.8 16.8H1.2z' fill='%239fb2ff' fill-opacity='.16' stroke='%239fb2ff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* a box of cells sharing their hairlines: the gap is the line */
.bx { display: grid; gap: 1px; border: 1px solid var(--l2); background: var(--l2); }
.bx > * { background: var(--pc); }

/* a block that opens on a rule sits as far below it as the rule sits below the block before */
.sec, .kv.blk { margin-top: 7vh; padding-top: 7vh; }

/* ---------- illustrated columns: the FitFare roadmap cards, drawn in this page's blue ---------- */
.cols.rm .col { padding-top: 0; border-top: 0; }
.rm-art { margin-bottom: 22px; }
.rm-art .shot-in { aspect-ratio: 4 / 3; display: grid; place-items: center; }
.rm-svg { width: 100%; height: 100%; overflow: visible; font-family: var(--f); }
.rm-svg .tx { fill: rgba(220, 228, 255, .55); }
.rm-svg .tx.is-dim { fill: rgba(220, 228, 255, .25); }
.rm-svg .crd { stroke-width: 1.5; }
.rm-svg .crd.is-back { fill: rgba(220, 228, 255, .03); stroke: rgba(220, 228, 255, .14); }
.rm-svg .crd.is-mid { fill: rgba(220, 228, 255, .05); stroke: rgba(220, 228, 255, .24); }
.rm-svg .crd.is-front { fill: #1b2552; stroke: rgba(159, 178, 255, .55); }
.rm-svg .ln { fill: none; stroke: rgba(220, 228, 255, .6); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rm-svg .ln.is-faint { stroke: rgba(220, 228, 255, .18); stroke-width: 1.5; }
.rm-svg .flow { fill: none; stroke: rgba(159, 178, 255, .55); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rm-svg .flow.is-dash { stroke-dasharray: 5 6; }
.rm-svg .node { fill: rgba(220, 228, 255, .06); stroke: rgba(220, 228, 255, .32); stroke-width: 1.5; }
.rm-svg .node.is-on { fill: rgba(159, 178, 255, .14); stroke: var(--acc); }
.rm-svg .av { fill: rgba(159, 178, 255, .16); stroke: var(--acc); stroke-width: 1.5; }
.rm-svg .av.is-wait { fill: none; stroke: rgba(220, 228, 255, .35); stroke-dasharray: 4 4; }
.rm-svg .pill { fill: rgba(159, 178, 255, .14); stroke: rgba(159, 178, 255, .5); stroke-width: 1.5; }
.rm-svg .pill.is-dash { fill: none; stroke-dasharray: 5 5; }
.rm-svg .pill.is-red { fill: rgba(255, 143, 120, .1); stroke: rgba(255, 143, 120, .5); }
.rm-svg .tick { fill: none; stroke: var(--acc); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rm-svg .tick.is-sm { stroke-width: 2; }
.rm-svg .warn { fill: none; stroke: var(--red); stroke-width: 1.8; stroke-linejoin: round; }
.rm-svg .ic { fill: none; stroke: var(--pfg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rm-svg .ic.is-acc { stroke: var(--acc); }
.rm-svg .dot, .rm-svg .knob { fill: var(--acc); }
.rm-svg .dot.is-red { fill: var(--red); }
.rm-svg .hole { fill: #121934; }
.rm-svg .sm { fill: rgba(220, 228, 255, .62); font-size: 13px; text-anchor: middle; }
.rm-svg .sm.is-left { text-anchor: start; }
.rm-svg .sm.is-end { text-anchor: end; }
.rm-svg .sm.is-xs { font-size: 11px; }
.rm-svg .sm.is-acc { fill: var(--acc); }
.rm-svg .sm.is-red { fill: var(--red); }
.rm-svg .lbl { fill: var(--pfg); font-size: 15px; font-weight: 600; }
.rm-svg .lbl.is-sm { font-size: 13px; }

/* ---------- 02: the problem opens straight on its statement ---------- */
.ch-n + .say { margin-top: 6vh; }

/* ---------- revision triangle: the number of what goes wrong ---------- */
.dl { flex: none; display: inline-grid; place-items: end center; width: 23px; height: 20.5px; padding-bottom: 2px; font-size: 10.5px; font-style: normal; font-weight: 700; line-height: 1; color: var(--red); background: var(--dl-red) center / contain no-repeat; font-variant-numeric: tabular-nums; }
.dl.is-ok { color: var(--acc); background-image: var(--dl-acc); }

/* the hero facts sit on no rules of their own: the chapter rule is enough */
.ph-facts { border-top: 0; }
.ph-facts div { padding: 0; border-bottom: 0; }

/* ---------- 01: one drawing, annotated ---------- */
/* the sentence and the key on the left, the drawing's card on the right; each word in the
   key is a numbered callout on the card, as a detail callout on a sheet points at its part */
.cx { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: auto 1fr; margin-top: 6vh; }
.cx-sub { grid-column: 1 / 10; grid-row: 1; margin-top: 0; }
.cx-key { grid-column: 1 / 10; grid-row: 2; align-self: end; }
.cx-fig { grid-column: 11 / -1; grid-row: 1 / 3; }
.cx-fig, .uf-fig { display: grid; align-items: center; margin: 0; overflow: hidden; container-type: inline-size; border-radius: clamp(14px, 1.8vw, 30px); background: var(--tile-bg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }

.cx-k { font-size: 13px; color: var(--mute); }
.cx-key ol { display: grid; gap: 4px; margin-top: 16px; padding: 0; list-style: none; }
.cx-key li { display: grid; grid-template-columns: 34px minmax(0, 1fr); margin-left: -12px; padding: 10px 12px; border-radius: 10px; cursor: default; outline: 0; transition: opacity .25s, background-color .25s; }
.cx-key .cx-m { position: static; grid-row: span 2; margin-top: 1px; }
.cx-key b { font-size: 17px; font-weight: 500; }
.cx-key span { margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--body); }

/* the callout: one style on the key and on the card, so the eye can match them */
.cx-m { position: absolute; top: -9px; right: -9px; z-index: 2; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-style: normal; font-weight: 700; line-height: 1; color: var(--pc); background: var(--acc); font-variant-numeric: tabular-nums; transition: transform .25s; }
.cx-card .cx-m { box-shadow: 0 0 0 2px #fff; }

/* the card: drawn like the product, light on the page's navy */
.cx-card, .uf-card { width: min(440px, 100% - 40px); margin: clamp(36px, 9cqw, 84px) auto; padding: 18px; border-radius: 16px; font-size: 13px; color: #1f2533; background: #fff; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .7); }
.cx-card [data-k] { position: relative; transition: box-shadow .25s; }
.cx-top { display: flex; align-items: center; gap: 12px; }
.cx-top p { min-width: 0; flex: 1; }
.cx-top b { display: block; overflow: hidden; font-size: 14.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.cx-top span { display: block; margin-top: 2px; font-size: 12px; color: #8a90a0; }
.cx-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; font-size: 10px; font-style: normal; font-weight: 700; color: #3d5bd9; background: #eaf0ff; }
.cx-v { flex: none; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-style: normal; font-weight: 600; color: #3a4256; background: #eef1f7; }
.cx-plan { position: relative; height: 150px; margin-top: 14px; border-radius: 10px; background: #fff linear-gradient(#eef0f4 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, #eef0f4 1px, transparent 1px) 0 0 / 14px 14px; box-shadow: inset 0 0 0 1px #e6e8ee; }
.cx-plan svg { width: 100%; height: 100%; fill: none; stroke: #2a3040; stroke-width: 2.4; }
.cx-plan .t { stroke-width: 1; }
.cx-card .cx-gfc { position: absolute; right: 14px; bottom: 14px; padding: 4px 9px; border: 1.5px solid #2f68c8; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #2f68c8; background: rgb(232 241 253 / .92); transform: rotate(-6deg); }
.cx-rev { margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: #f6f7fa; }
.cx-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8a90a0; }
.cx-lbl .cx-m { position: static; display: inline-grid; margin-left: 8px; vertical-align: -5px; box-shadow: none; }
.cx-rev ol { margin-top: 6px; padding: 0; list-style: none; }
.cx-rev li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.cx-rev li p { flex: 1; min-width: 0; }
.cx-rev b { display: block; font-size: 13px; font-weight: 600; }
.cx-rev span { display: block; font-size: 11.5px; color: #8a90a0; }
.cx-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 10.5px; font-style: normal; font-weight: 650; color: #2f6a43; background: #d9efe0; }
.cx-ok { flex: none; font-size: 12px; font-style: normal; font-weight: 600; color: #2f7a46; }
.cx-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; margin-top: 16px; font-size: 12px; color: #8a90a0; }
.cx-tag { display: inline-block; margin-left: 6px; padding: 3px 9px; border-radius: 99px; font-weight: 600; text-decoration: none; color: #2f68c8; background: #e8f1fd; }
.cx-tag.is-tr { margin: 0 6px 0 0; color: #3a4256; background: #eef1f7; }

/* point at a word, its part lights up on the card, and the other way round */
#context:has([data-k]:hover, [data-k]:focus-visible) .cx-key ol > * { opacity: .4; }
#context:has([data-k]:hover, [data-k]:focus-visible) .cx-card .cx-m { transform: scale(.8); }
#context:has([data-k="1"]:hover, [data-k="1"]:focus-visible) [data-k="1"],
#context:has([data-k="2"]:hover, [data-k="2"]:focus-visible) [data-k="2"],
#context:has([data-k="3"]:hover, [data-k="3"]:focus-visible) [data-k="3"],
#context:has([data-k="4"]:hover, [data-k="4"]:focus-visible) [data-k="4"],
#context:has([data-k="5"]:hover, [data-k="5"]:focus-visible) [data-k="5"] { opacity: 1; }
#context:has([data-k="1"]:hover, [data-k="1"]:focus-visible) .cx-key [data-k="1"],
#context:has([data-k="2"]:hover, [data-k="2"]:focus-visible) .cx-key [data-k="2"],
#context:has([data-k="3"]:hover, [data-k="3"]:focus-visible) .cx-key [data-k="3"],
#context:has([data-k="4"]:hover, [data-k="4"]:focus-visible) .cx-key [data-k="4"],
#context:has([data-k="5"]:hover, [data-k="5"]:focus-visible) .cx-key [data-k="5"] { background: color-mix(in srgb, var(--acc) 10%, transparent); }
#context:has([data-k="1"]:hover, [data-k="1"]:focus-visible) .cx-card [data-k="1"],
#context:has([data-k="2"]:hover, [data-k="2"]:focus-visible) .cx-card [data-k="2"],
#context:has([data-k="3"]:hover, [data-k="3"]:focus-visible) .cx-card [data-k="3"],
#context:has([data-k="4"]:hover, [data-k="4"]:focus-visible) .cx-card [data-k="4"],
#context:has([data-k="5"]:hover, [data-k="5"]:focus-visible) .cx-card [data-k="5"] { box-shadow: 0 0 0 3px var(--acc); }
#context:has([data-k="1"]:hover, [data-k="1"]:focus-visible) [data-k="1"] .cx-m,
#context:has([data-k="2"]:hover, [data-k="2"]:focus-visible) [data-k="2"] .cx-m,
#context:has([data-k="3"]:hover, [data-k="3"]:focus-visible) [data-k="3"] .cx-m,
#context:has([data-k="4"]:hover, [data-k="4"]:focus-visible) [data-k="4"] .cx-m,
#context:has([data-k="5"]:hover, [data-k="5"]:focus-visible) [data-k="5"] .cx-m { transform: scale(1.15); }

/* ---------- 03 and 05: one drawing's run, as numbered stops on a track ---------- */
/* hollow stops on a broken line, each tagged with what goes wrong there */
.run-l { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); column-gap: 20px; padding: 0; list-style: none; counter-reset: run; }
.run-s { position: relative; padding-top: 46px; counter-increment: run; }
.run-s::before { content: counter(run); position: absolute; top: 0; left: 0; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 12px; font-weight: 600; color: var(--mute); background: var(--pc); box-shadow: inset 0 0 0 1.5px var(--l3); font-variant-numeric: tabular-nums; }
.run-s::after { content: ''; position: absolute; top: 13.5px; left: 36px; right: -12px; height: 1px; background: repeating-linear-gradient(90deg, var(--l3) 0 5px, transparent 5px 10px); }
.run-s:last-child::after { display: none; }
.run-n { font-size: 12.5px; color: var(--mute); }
.run-s h3 { margin-top: 6px; font-size: clamp(17px, 1.3vw, 21px); font-weight: 400; line-height: 1.25; letter-spacing: -.01em; }
.run-f { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--body); text-wrap: pretty; }
.run-dls, .run-x { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 14px; }
.run-v { padding: 3px 9px; border-radius: 99px; font-size: 11.5px; white-space: nowrap; color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); }
.run-fx { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--mute); }
.run-end { max-width: 70ch; margin-top: 7vh; font-size: 15px; line-height: 1.55; color: var(--body); }
.run-end b { font-weight: 500; color: var(--pfg); }

/* ---------- 05: the same run, as the file's own activity log ---------- */
/* the card on the left is the record the product keeps; the steps on the right say
   what each entry fixed. Point at either and its partner lights up */

/* the number is the same mark on the log and in the list */



/* ---------- 03 and 06: revision schedules ---------- */
.rs { overflow-x: auto; }
.rs table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; border-radius: 18px; overflow: hidden; background: var(--soft); }
.rs th, .rs td { padding: 16px 18px; border-top: 1px solid var(--l1); text-align: left; vertical-align: top; }
.rs thead th { padding-block: 14px; border-top: 0; font-size: 12.5px; font-weight: 400; color: var(--mute); }
.rs td { font-size: 16px; line-height: 1.45; }
.rs .rs-n { width: 64px; text-align: center; }
.rs .rs-n .dl { margin-top: 2px; }
.rs .rs-a { color: var(--body); }
.rs .rs-v { width: 150px; font-size: 13px; color: var(--acc); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rs .rs-w { width: 260px; font-size: 13px; color: var(--mute); }
.rs tbody tr { transition: opacity .5s var(--ease), background-color .5s var(--ease); }
.rs.is-dim tbody:hover tr { opacity: .4; }
.rs.is-dim tbody tr:hover { opacity: 1; }

/* 06: the versions, with the screen of the row you're on beside them */
.rv { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
.rv-t { grid-column: 1 / 14; }
.rv-f { grid-column: 14 / -1; position: sticky; top: calc(var(--hd-h) + 5vh); }
.rv .rs table { min-width: 0; }
.rv .rs td { font-size: 14.5px; line-height: 1.55; color: var(--body); }
.rv .rs .rs-n { width: 58px; } .rv .rs td.rs-n { font-size: 14px; color: var(--pfg); }
.rv .rs .rs-y { width: 78px; font-size: 13px; color: var(--mute); white-space: nowrap; }
.rv .rs .rs-c { width: 86px; font-size: 13px; color: var(--mute); white-space: nowrap; }
.rv .rs td b { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 500; color: var(--pfg); }
.rv .rs td small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--mute); }
.rv .rs tbody tr { cursor: default; outline: none; }
.rv .rs tbody tr.is-on > * { background: color-mix(in srgb, var(--acc) 11%, transparent); }
.rv .rs tbody tr.is-on .rs-n { color: var(--acc); }
.rv .rs tbody tr:focus-visible > * { box-shadow: inset 0 0 0 1px var(--acc); }
.rv-f .shot-in { aspect-ratio: 16 / 11; }
.rv-f .win { left: 7cqw; top: 9cqw; width: 100cqw; transition: opacity .6s var(--ease), transform 1s var(--ease); }
.rv-f .win:not(.is-on) { opacity: 0; transform: translate3d(0, 2cqw, 0); }
.rv-f .cap { display: flex; justify-content: space-between; gap: 16px; }

/* the scale bar: one segment per version, as long as its count of screens */
.sb { margin-top: 6vh; }
.sb-k { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--mute); }
.sb-bar { display: flex; margin-top: 30px; height: 10px; border: 1px solid var(--pfg); }
.sb-bar i { position: relative; flex: var(--w) 1 0; min-width: 0; font-style: normal; cursor: default; transition: background-color .4s var(--ease); }
.sb-bar i + i { border-left: 1px solid var(--pfg); }
.sb-bar i:nth-child(odd) { background: var(--pfg); }
.sb-bar i.is-on { background: var(--acc); }
.sb-bar i::before { content: attr(data-v); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); font-size: 12px; color: var(--mute); white-space: nowrap; transition: color .4s; }
.sb-bar i.is-on::before { color: var(--acc); }
.sb-bar i::after { content: attr(data-e); position: absolute; right: -1px; top: calc(100% + 8px); transform: translateX(50%); font-size: 11.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.sb-bar i:first-child > b { position: absolute; left: -1px; top: calc(100% + 8px); transform: translateX(-50%); font-size: 11.5px; font-weight: 400; color: var(--mute); }
.sb-u { margin-top: 34px; font-size: 12.5px; color: var(--mute); }

/* ---------- 04: where each option sits ---------- */
.pm-wrap { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
.pm { grid-column: 1 / 16; }
.pm-key { grid-column: 17 / -1; }
.pm-plot { position: relative; container-type: inline-size; aspect-ratio: 16 / 10.5; margin-left: 74px; border-left: 1px solid var(--l3); border-bottom: 1px solid var(--l3);
  background-image: linear-gradient(90deg, var(--l1) 1px, transparent 1px); background-size: 12.5% 100%; background-position: -1px 0; }
/* the y axis: how many of the four parts of drawing control it has */
.pm-y { position: absolute; left: 0; right: 0; bottom: var(--b); height: 1px; background: var(--l1); }
.pm-y span { position: absolute; right: calc(100% + 12px); top: -.7em; font-size: 12px; color: var(--mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pm-ya { position: absolute; left: -74px; top: -38px; font-size: 12.5px; color: var(--pfg); }
.pm-ya small { margin-left: 8px; font-size: 12px; color: var(--mute); }
.pm-x { position: absolute; top: calc(100% + 12px); left: var(--x); transform: translateX(-50%); font-size: 12px; line-height: 1.35; text-align: center; color: var(--mute); width: 13em; }
/* hatched, as on a plan: the corner nothing else reached */
.pm-zone { position: absolute; left: 0; top: 0; width: 38%; height: 30%; border: 1px dashed color-mix(in srgb, var(--acc) 55%, transparent);
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--acc) 16%, transparent) 0 1px, transparent 1px 9px); }
.pm-zone span { position: absolute; left: 10px; bottom: 8px; max-width: 18em; font-size: 12px; line-height: 1.35; color: var(--acc); }
.pm-p { position: absolute; left: calc(var(--x) * 1%); bottom: calc(var(--y) * 1%); width: 0; height: 0; transition: opacity .5s var(--ease); }
.pm-p > i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border: 1px solid var(--pfg); background: var(--pc); transition: transform .5s var(--ease-back); }
.pm-p > b { position: absolute; left: 14px; top: 0; transform: translateY(-50%); font-size: 14px; font-weight: 500; white-space: nowrap; }
.pm-p.is-t > b { left: -6px; top: auto; bottom: 14px; transform: none; }
.pm-p.is-b > b { left: auto; right: -6px; top: 14px; transform: none; }
.pm-p.is-us > i { left: -8px; top: -8px; width: 16px; height: 16px; border-color: var(--acc); background: var(--acc); }
.pm-p.is-us > b { color: var(--acc); }
.pm-p.is-hot > i { transform: scale(1.35); }
.pm-key li { padding: 16px 0; border-top: 1px solid var(--l1); transition: opacity .5s var(--ease); }
.pm-key li:first-child { padding-top: 0; border-top: 0; }
.pm-key b { font-size: 16px; font-weight: 500; }
.pm-key small { margin-left: 8px; font-size: 12.5px; color: var(--mute); }
.pm-key p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.pm-key li.is-us b { color: var(--acc); }
.has-hot .pm-key li:not(.is-hot), .has-hot .pm-p:not(.is-hot) { opacity: .35; }

/* ---------- general notes: numbered, as on a sheet ---------- */
.nt { counter-reset: nt; }
.nt li { counter-increment: nt; display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 16px 0; border-top: 1px solid var(--l1); font-size: 16.5px; line-height: 1.55; color: var(--body); }
.nt li:first-child { padding-top: 0; border-top: 0; }
.nt li::before { content: counter(nt) '.'; padding-top: 2px; font-size: 13px; color: var(--acc); font-variant-numeric: tabular-nums; }
.nt b { font-weight: 500; color: var(--pfg); }

/* ---------- 07: the states, on a structural grid ---------- */
.states { width: 100%; height: auto; overflow: visible; font-family: var(--f); }
.st-g line { stroke: var(--acc); stroke-opacity: .22; stroke-width: 1; stroke-dasharray: 2 7; }
.st-b circle { fill: var(--pc); stroke: var(--acc); stroke-opacity: .6; stroke-width: 1; }
.st-b text { fill: var(--acc); font-size: 13px; font-weight: 500; text-anchor: middle; }
.st-l path { fill: none; stroke: rgba(236, 235, 230, .6); stroke-width: 1.3; }
.st-l .is-back { stroke-dasharray: 5 6; stroke: rgba(236, 235, 230, .32); }
.st-n rect { fill: color-mix(in srgb, var(--c) 13%, var(--pc)); stroke: var(--c); stroke-width: 1.1; }
.st-n text { fill: var(--c); font-size: 17px; font-weight: 500; text-anchor: middle; }
.st-k { fill: rgba(236, 235, 230, .52); font-size: 13.5px; }
.st-wrap { display: grid; place-items: center; padding: 4cqw 3cqw; }
@media (prefers-reduced-motion: no-preference) {
  .js .states .st-l path { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.6s var(--ease) .5s; }
  .js .is-in .states .st-l path { stroke-dashoffset: 0; }
  .js .is-in .states .st-l .is-back { stroke-dasharray: 5 6; }
  .js .states .st-n { opacity: 0; transition: opacity .8s var(--ease) calc(.3s + var(--k, 0) * 120ms); }
  .js .is-in .states .st-n { opacity: 1; }
}

/* ---------- 08: every case, with the two to read first clouded ---------- */
.es { overflow-x: auto; }
.es table { width: 100%; min-width: 900px; table-layout: fixed; border-collapse: separate; border-spacing: 0; border-radius: 18px; overflow: hidden; background: var(--soft); }
.es th, .es td { padding: 18px 20px; border-top: 1px solid var(--l1); text-align: left; vertical-align: top; font-size: 14.5px; line-height: 1.5; }
.es thead th { padding-block: 14px; border-top: 0; font-size: 12.5px; font-weight: 400; color: var(--mute); }
.es thead th:first-child { width: 15%; }
.es tbody th { font-size: 15px; font-weight: 500; }
.es td { color: color-mix(in srgb, var(--pfg) 72%, transparent); }
.es td.is-na { color: var(--l3); text-align: center; }
.es td.is-key { position: relative; color: var(--pfg); }
/* a revision cloud: scallops drawn by border-image, so it fits any cell */
.es td.is-key::before { content: ''; position: absolute; inset: 2px; border: 9px solid transparent; pointer-events: none;
  border-image: var(--cloud) 6 round; }
.es-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--mute); }
.es-cloud { display: inline-block; width: 54px; height: 27px; border: 9px solid transparent; border-image: var(--cloud) 6 round; }

/* ---------- 08 and 09: detail callouts on a screen, matched to its notes ---------- */
.an-img { position: relative; }
.mk { position: absolute; z-index: 2; display: grid; place-items: center; width: max(22px, 2.6cqw); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); font-size: max(11px, 1.15cqw); font-weight: 600; line-height: 1; color: #fff; background: #141d3d; box-shadow: 0 0 0 max(2px, .2cqw) var(--acc), 0 .6cqw 1.6cqw rgb(0 0 0 / .35); transition: transform .45s var(--ease-back), opacity .4s var(--ease); }
.mk.is-hot { transform: translate(-50%, -50%) scale(1.3); }
.has-hot .mk:not(.is-hot) { opacity: .3; }
.an-notes h3 + p, .an-notes > p { margin-top: 14px; }
.an-notes ol { margin-top: 22px; border-top: 1px solid var(--l2); }
.an-notes li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; padding: 13px 0; border-bottom: 1px solid var(--l1); font-size: 14.5px; line-height: 1.5; color: color-mix(in srgb, var(--pfg) 74%, transparent); transition: opacity .4s var(--ease); }
.an-notes li::before { content: attr(data-k); display: grid; place-items: center; width: 21px; height: 21px; margin-top: 0; border-radius: 50%; font-size: 10.5px; font-weight: 600; color: var(--pfg); box-shadow: inset 0 0 0 1px var(--acc); }
.an-notes li:not([data-k]) { grid-template-columns: minmax(0, 1fr); }
.an-notes li:not([data-k])::before { content: none; }
.an-notes li.is-hot::before { color: #141d3d; background: var(--acc); }
.has-hot .an-notes li:not(.is-hot) { opacity: .4; }
.an-k { display: block; min-height: 0; margin-bottom: 0; font-size: 12.5px; color: var(--acc); }
.an-k + h3 { margin-top: 10px; }

/* redlines: a red box round each problem, numbered at its corner */
.redl-b { position: absolute; z-index: 1; border: max(1.5px, .16cqw) solid #e5482f; transition: opacity .4s var(--ease); }
.redl .mk { background: #e5482f; box-shadow: 0 0 0 max(2px, .2cqw) #fff, 0 .6cqw 1.6cqw rgb(0 0 0 / .3); }
.has-hot .redl-b:not(.is-hot) { opacity: .25; }
.redl { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
.redl > .shot { grid-column: 1 / 15; position: sticky; top: calc(var(--hd-h) + 5vh); }
.redl-notes { grid-column: 16 / -1; }
.redl-notes li { display: grid; grid-template-columns: 38px minmax(0, 1fr); padding: 18px 0; border-top: 1px solid var(--l1); transition: opacity .4s var(--ease); }
.redl-notes li:first-child { padding-top: 0; border-top: 0; }
.redl-notes li::before { content: attr(data-k); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 600; color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.redl-notes li.is-hot::before { color: #fff; background: #e5482f; box-shadow: none; }
.redl-notes h3 { font-size: 17px; font-weight: 500; line-height: 1.3; }
.redl-notes p { grid-column: 2; margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--body); }
.has-hot .redl-notes li:not(.is-hot) { opacity: .4; }

/* ---------- 10: a finish schedule, and the cut ---------- */
.cut { grid-column: 1 / 21; margin-top: 10vh; font-family: var(--fh); font-size: clamp(28px, 3.3vw, 58px); font-weight: 300; line-height: 1.14; letter-spacing: -.035em; text-wrap: balance; }
.cut s { color: color-mix(in srgb, var(--pfg) 40%, transparent); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.cut span { color: var(--pfg); }
/* the palette is the one place that drops the paper corners: it shows the
   product's own system, which is rounded */
.fsch, .prs { display: grid; gap: 12px; }
.fsch { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fsch figure { margin: 0; padding: 8px 8px 18px; border-radius: 22px; background: color-mix(in srgb, var(--pfg) 5%, transparent); }
.fsch i { display: block; aspect-ratio: 1; border-radius: 15px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.fsch figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; margin-top: 14px; padding: 0 8px; font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.fsch figcaption span { grid-row: span 2; color: var(--acc); }
.fsch figcaption b { font-size: 15px; font-weight: 500; color: var(--pfg); }
.prs { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 12px; }
.prs > div { display: grid; justify-items: start; gap: 14px; padding: 18px; border-radius: 22px; font-size: 12px; color: var(--mute); background: color-mix(in srgb, var(--pfg) 5%, transparent); font-variant-numeric: tabular-nums; }
.prs .chip { font-family: Inter, var(--f); }
.fs-h { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 12px; font-size: 12.5px; color: var(--mute); }

/* ---------- 11: four sheets from the set ---------- */
.ss { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gut); }
.ss figure { border-radius: 18px; overflow: hidden; background: var(--soft); }
.ss .shot-in { aspect-ratio: 4 / 3; border-radius: 0; box-shadow: none; }
.ss .win { left: 8cqw; right: 8cqw; top: 8cqw; width: auto; }
.ss figcaption { display: grid; grid-template-columns: 46px minmax(0, 1fr); border-top: 1px solid var(--l1); font-size: 13.5px; line-height: 1.45; color: var(--body); }
.ss figcaption span { display: grid; place-items: center; font-size: 12px; color: var(--acc); font-variant-numeric: tabular-nums; }
.ss figcaption p { padding: 12px 14px 14px; }
.ss figcaption b { display: block; font-weight: 500; color: var(--pfg); }

/* ---------- 13: one file's record, and the notes beside it ---------- */
.oc { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: var(--gut); align-items: start; }
.rec { grid-column: 1 / 12; }
.rec .kv-k { margin-bottom: 18px; }
.rec-t { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 18px; overflow: hidden; background: var(--soft); font-size: 15.5px; line-height: 1.45; }
.rec-t th, .rec-t td { padding: 14px 16px; border-top: 1px solid var(--l1); text-align: left; vertical-align: top; font-weight: 400; }
.rec-t thead th { padding-block: 16px; border-top: 0; font-weight: 500; color: var(--pfg); }
.rec-t thead .rec-r { font-size: 12.5px; font-weight: 400; color: var(--mute); }
.rec-t tbody th { width: 26%; color: var(--mute); }
.rec-t td { color: var(--pfg); }
.rec-ty { display: inline-block; margin-right: 10px; padding: 2px 7px; border-radius: 6px; background: var(--l1); font-size: 11px; font-weight: 400; letter-spacing: .04em; color: var(--mute); vertical-align: 1px; }
.rec-v { margin-left: 10px; font-size: 13px; font-weight: 400; color: var(--acc); }
.rec-t .rec-r { width: 72px; text-align: right; white-space: nowrap; font-size: 13px; color: var(--acc); font-variant-numeric: tabular-nums; }
.oc-n { grid-column: 13 / -1; }
.oc-n .kv-k { margin-bottom: 18px; }
.oc-n .nt + .kv-k { margin-top: 7vh; padding-top: 16px; border-top: 1px solid var(--l2); }

/* ---------- tablet ---------- */
/* ---------- user flow and IA: swimlanes and a tree, in the state map's line ---------- */
.flow { width: 100%; height: auto; overflow: visible; font-family: var(--f); }
.flow-wrap { display: grid; place-items: center; padding: 3cqw; }
.fl-lanes rect { fill: rgba(255, 255, 255, .025); }
.fl-lanes line { stroke: var(--l1); stroke-width: 1; }
.fl-lanes text { fill: var(--acc); font-size: 14px; font-weight: 500; }
.fl-l path { fill: none; stroke: rgba(236, 235, 230, .6); stroke-width: 1.4; }
.fl-l .is-no { stroke: var(--red); stroke-dasharray: 5 6; }
.fl-l .is-back { stroke: rgba(236, 235, 230, .35); stroke-dasharray: 5 6; }
.fl-n rect { fill: rgba(255, 255, 255, .04); stroke: rgba(236, 235, 230, .32); stroke-width: 1.2; }
.fl-n text { fill: var(--pfg); font-size: 14px; text-anchor: middle; }
.fl-n .is-start rect { fill: color-mix(in srgb, var(--acc) 20%, transparent); stroke: var(--acc); }
.fl-n .is-q rect { fill: none; stroke: var(--acc); stroke-dasharray: 4 4; }
.fl-n .is-q text { fill: var(--acc); }
.fl-n .is-no rect { fill: rgba(255, 143, 120, .08); stroke: var(--red); }
.fl-n .is-no text { fill: #ffc9bd; }
.fl-n .fl-lf { fill: color-mix(in srgb, var(--pfg) 62%, transparent); font-size: 13px; }
.fl-n .fl-lf.is-note { fill: var(--acc); font-size: 12px; }
.fl-k { fill: rgba(236, 235, 230, .55); font-size: 12.5px; }
.fl-k.is-no { fill: var(--red); }
.fl-k.is-end { text-anchor: end; }
.fl-dl path { fill: var(--pc); stroke: var(--red); stroke-width: 1.3; stroke-linejoin: round; }
.fl-dl text { fill: var(--red); font-size: 10px; font-weight: 700; text-anchor: middle; }
.fl-key { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; padding: 0; list-style: none; font-size: 13.5px; color: var(--mute); }
.fl-key li { display: flex; align-items: center; gap: 10px; }
.fl-key i { flex: none; width: 26px; height: 14px; border-radius: 7px; border: 1.2px solid; }
.fl-key .fk-start { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 20%, transparent); }
.fl-key .fk-q { border: 1.2px dashed var(--acc); }
.fl-key .fk-no { border-color: var(--red); background: rgba(255, 143, 120, .08); }
.fl-key .dl { width: 23px; height: 20.5px; border: 0; border-radius: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .flow .fl-l path { stroke-dasharray: 2000; stroke-dashoffset: 2000; transition: stroke-dashoffset 1.4s var(--ease) .9s; }
  .js .is-in .flow .fl-l path { stroke-dashoffset: 0; }
  .js .is-in .flow .fl-l .is-no, .js .is-in .flow .fl-l .is-back { stroke-dasharray: 5 6; }
  .js .flow .fl-n { opacity: 0; transition: opacity .8s var(--ease) calc(.3s + var(--k, 0) * 120ms); }
  .js .is-in .flow .fl-n { opacity: 1; }
}

/* ---------- 03: the desk, the things a drawing passed through before ---------- */
/* the shared desk (paper.css) with this page's own artefacts: a folder of PDFs,
   WhatsApp threads with the PDF in them, and the print the site builds from */
.desk { --fm: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --ink: #23201a; --ink-2: rgba(35, 32, 26, .62); --rule: rgba(35, 32, 26, .16); --paper: #f2eee4; }
.desk .art-p { grid-template-columns: 23px minmax(0, 1fr); color: #ffd3c4; }
.desk .art-p i.dl { width: 23px; height: 20.5px; padding-bottom: 2px; border-radius: 0; place-items: end center; color: var(--red); background: var(--dl-red) center / contain no-repeat; }
.a-dir { overflow: hidden; border-radius: 12px; font-size: 12.5px; color: #e6e6e9; background: #1e1e22; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .7); }
.a-dir-h { padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 11.5px; color: rgba(255, 255, 255, .5); }
.a-dir ul { margin: 0; padding: 6px; list-style: none; }
.a-dir li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: 7px; }
.a-dir li b { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.a-dir li span { font-size: 11px; color: rgba(255, 255, 255, .45); }
.a-dir li.is-on { background: #2f5bd3; }
.a-dir li.is-on span { color: rgba(255, 255, 255, .8); }
.a-dir li i, .bub-f i { padding: 4px 0; border-radius: 3px; font-size: 9px; font-style: normal; font-weight: 700; text-align: center; color: #fff; background: #d1453b; }
.a-to { justify-self: center; padding: 3px 10px; border-radius: 7px; font-size: 11px; color: rgba(233, 237, 239, .65); background: #182229; }
.bub-f { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: center; margin: 2px 0 6px; padding: 8px; border-radius: 7px; background: rgba(0, 0, 0, .22); }
.bub-f b { display: block; font-size: 12.5px; font-weight: 500; overflow-wrap: anywhere; }
.bub-f em { display: block; font-size: 11px; font-style: normal; color: rgba(233, 237, 239, .55); }
.bub .fwd { display: block; margin-bottom: 4px; font-size: 11px; font-style: italic; color: rgba(233, 237, 239, .55); }
.a-print { --red: #c4432c; padding: 14px 14px 12px; }
.a-print svg { display: block; width: 100%; height: auto; }
.a-print path, .a-print circle { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.a-print .t { stroke-width: .7; opacity: .6; }
.a-tb { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--ink); font: 10.5px/1.4 var(--fm); }
.a-tb .ring { position: relative; }
.a-tb .ring::after { content: ''; position: absolute; inset: -5px -9px; border: 2px solid var(--red); border-radius: 50%; }
.a-stamp { position: absolute; top: 14px; right: 14px; padding: 3px 8px; border: 1.5px solid var(--red); border-radius: 3px; font: 600 10px/1 var(--fm); letter-spacing: .12em; color: var(--red); transform: rotate(-8deg); opacity: .85; }

@media (max-width: 1100px) {
  .cols.rm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx { grid-template-rows: none; }
  .cx-sub, .cx-key, .cx-fig { grid-column: 1 / -1; grid-row: auto; }
  .cx-fig { margin-top: 5vh; }
  .cx-key { order: 3; margin-top: 5vh; }
  .cx-key ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); }
  .run-l { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .run-s { padding: 2px 0 30px 46px; }
  .run-s::after { top: 36px; bottom: 6px; left: 13.5px; right: auto; width: 1px; height: auto; background: repeating-linear-gradient(180deg, var(--l3) 0 5px, transparent 5px 10px); }
  .run-s h3 { margin-top: 4px; }
  .rv-t, .rv-f { grid-column: 1 / -1; }
  .rv-f { position: relative; top: 0; grid-row: 1; margin-bottom: 5vh; }
  .pm, .pm-key { grid-column: 1 / -1; }
  .pm-key { margin-top: 12vh; }
  .redl > .shot, .redl-notes { grid-column: 1 / -1; }
  .redl > .shot { position: relative; top: 0; }
  .redl-notes { margin-top: 6vh; }
  .fsch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ss { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec { grid-column: 1 / -1; }
  .oc-n { grid-column: 1 / -1; margin-top: 9vh; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .flow { min-width: 900px; }
  .shot-in.flow-wrap { aspect-ratio: auto !important; overflow-x: auto; place-items: start; padding: 24px 20px; }
  .cols.rm { grid-template-columns: minmax(0, 1fr); }
  .cx-key ol { grid-template-columns: minmax(0, 1fr); }
  .cx-card { padding: 14px; }
  .cx-plan { height: 120px; }
  /* schedules stack: one entry per block, the number beside it */
  .rs table, .rv .rs table { min-width: 0; border: 0; }
  .rs thead { display: none; }
  .rs tbody, .rs td { display: block; }
  .rs tr { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 16px 0; border-top: 1px solid var(--l2); }
  .rs td { width: auto !important; padding: 0; border: 0; text-align: left !important; }
  .rs td.rs-n { grid-row: span 3; }
  .rs td + td { grid-column: 2; margin-top: 6px; }
  .rs td.rs-n + td { margin-top: 0; }
  .rv .rs tbody tr.is-on { background: color-mix(in srgb, var(--acc) 11%, transparent); }
  .rv .rs tbody tr.is-on > * { background: none; }
  .pm-plot { margin-left: 30px; aspect-ratio: 1 / 1; }
  .pm-y span { right: calc(100% + 8px); }
  .pm-y span small { display: none; }
  .pm-ya { left: -30px; }
  .pm-ya small { display: none; }
  .rv .rs td.rs-c::after { content: ' screens'; }
  .pm-x { width: 8em; font-size: 11px; }
  .pm-p > b { font-size: 12px; }
  .pm-zone { width: 52%; }
  .pm-zone span { display: none; }
  .fsch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss { grid-template-columns: minmax(0, 1fr); }
  .redl, .oc, .rv, .pm-wrap { column-gap: 0; }
  .rec-t th, .rec-t td { padding: 12px 10px; }
  .rec-t tbody th { width: 30%; }
  .rec-t .rec-r { width: 36px; }
  .cut { grid-column: 1 / -1; }
}