/* Dossier (docs/design/landing-rev9-dossier.md): the pull side, playing itself. By default (no script, reduced motion) the finished
   dossier in flow: the record panels, the OM truth-check and the memo side by side, the Radar alert. landing-dossier.js adds
   .dz-run, which turns the OM and the memo into sheets over the dossier and hides what the timeline has not reached yet (.on).
   Paper (the OM, the memo) is the page's warm white; red stamps only the two hard flags, amber the soft ones. */
.dossier { position: relative; isolation: isolate; padding: 140px 0 150px; background: var(--g0); border-top: 1px solid var(--line); }
.dossier::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(50% 40% at 60% 62%, rgb(244 233 214 / 5.5%), transparent 70%); }
.dossier > .sec-head, .dz-beats, .dz-frame { max-width: min(1240px, 90%); margin-left: auto; margin-right: auto; }

/* ---------- the four beats: a rail of buttons, each with its progress hairline */
.dz-beats { margin-bottom: 18px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; }
.dz-beats button { position: relative; width: 100%; height: auto; padding: 14px 0 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 4px;
  text-align: left; background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; color: var(--tx-3); font: inherit; cursor: pointer; }
.dz-beats button b { font-weight: 500; font-size: 15px; color: var(--tx-2); }
.dz-beats button > span:not(.dz-bn) { grid-column: 2; font-size: 12.5px; line-height: 1.4; }
.dz-bn { font: 500 11px/1.9 var(--mono); color: var(--tx-4); }
.dz-beats button i { position: absolute; left: 0; top: -1px; height: 1px; width: calc(var(--p, 0) * 100%); background: var(--warm); }
.dz-beats button[aria-pressed="true"] b { color: var(--tx-1); }
.dz-beats button[aria-pressed="true"] .dz-bn { color: var(--warm); }
.dz-beats button:hover b { color: var(--tx-1); }

/* ---------- the terminal */
.dz-frame { position: relative; border: 1px solid var(--line-2); border-radius: 4px; background: var(--g1); overflow: hidden;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 30%), 0 60px 120px -40px rgb(0 0 0 / 80%), 0 0 140px -60px rgb(244 233 214 / 18%); }
.dz-chrome { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); background: var(--g0);
  font: 500 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.dz-dots { display: flex; gap: 6px; }
.dz-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.dz-chrome > b { font-weight: 500; color: var(--tx-1); }
.dz-mode { color: var(--tx-4); }
.dz-tick { margin-left: auto; font-family: var(--mono); letter-spacing: 0; text-transform: none; font-size: 11.5px; color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dz-clock { font: 400 15px/1 var(--mono); letter-spacing: 0; text-transform: none; color: var(--warm); white-space: nowrap; }
.dz-pause { display: none; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line-2); border-radius: 2px; background: none; color: var(--tx-2); cursor: pointer; }
.dz-pause span { display: block; width: 8px; height: 10px; margin: auto; border: solid currentColor; border-width: 0 3px; }
.dz-pause[aria-pressed="true"] span { width: 0; height: 0; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.dz-pause:hover { border-color: var(--line-3); color: var(--tx-1); }
.dz-run .dz-pause { display: block; }

.dz-ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.dz-input { display: flex; align-items: center; gap: 12px; min-width: 0; height: 52px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--g0);
  font: 400 clamp(15px, 1.7vw, 21px)/1 var(--mono); letter-spacing: -.01em; color: var(--tx-1); }
.dz-prompt { color: var(--orange-t); }
.dz-typed { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-caret { display: none; flex: none; width: 9px; height: 1.1em; margin-left: -10px; background: var(--warm); opacity: .85; }
.dz-drop { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border: 1px dashed var(--line-3); border-radius: 2px; font-size: 13px; color: var(--tx-2); }
.dz-pdf { padding: 4px 5px; border-radius: 2px; background: var(--warm); color: var(--g0); font: 600 9.5px/1 var(--mono); }
.dz-drop-hint { color: var(--tx-4); font-size: 12px; }

/* ---------- the dossier itself */
.dz-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; padding: 20px; }
.dz-doc { grid-column: 1 / -1; }
.dz-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 4px 2px 18px; }
.dz-k { font: 500 10.5px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 6px !important; }
#main-landing .dz-head h3 { font: 400 clamp(22px, 2.4vw, 32px)/1.1 var(--sans); letter-spacing: -.03em; color: var(--tx-1); }
.dz-sub { margin-top: 8px !important; font: 400 12px/1.4 var(--mono); color: var(--tx-3); }
.dz-score { display: grid; justify-items: end; }
.dz-score span { font: 500 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.dz-score b { font: 400 52px/1 var(--sans); letter-spacing: -.04em; color: var(--warm); }
.dz-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.dz-p { position: relative; padding: 14px 16px 16px; background: var(--card); font-size: 13px; line-height: 1.45; color: var(--tx-2); min-width: 0; }
.dz-wide { grid-column: span 2; }
#main-landing .dz-p h4 { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 10px; font: 500 10.5px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.dz-p time { font: 400 10.5px/1.4 var(--mono); letter-spacing: 0; text-transform: none; color: var(--tx-4); white-space: nowrap; }
.dz-big { font: 400 22px/1.15 var(--sans); letter-spacing: -.02em; color: var(--tx-1); margin-bottom: 4px !important; }
.dz-big small { font-size: 12px; letter-spacing: 0; color: var(--tx-3); }
.dz-orange { color: var(--orange-t); }
.dz-warm { color: var(--warm); }
.dz-red, .dz-red b { color: var(--red-t) !important; }
.dz-chain { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; color: var(--tx-1); font-size: 13.5px; }
.dz-chain li + li::before { content: "→"; margin-right: 6px; color: var(--tx-4); }
.dz-chain small { color: var(--tx-3); font-size: 12px; }
.dz-contact { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-family: var(--mono); color: var(--tx-1); }
.dz-flag { padding: 3px 7px; border: 1px solid var(--line-2); border-radius: 2px; font: 500 10px/1.3 var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.dz-flag.amber { border-color: rgb(251 179 96 / 45%); color: var(--orange-t); }
.dz-stack { display: flex; height: 8px; margin: 2px 0 12px; gap: 2px; }
.dz-stack i { display: block; height: 100%; }
.s-loan { flex: 69.4; background: var(--cool); }
.s-lien { flex: 2.3; background: var(--red); }
.s-eq { flex: 28.3; background: var(--line-3); }
.dz-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.dz-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.dz-rows b { font-weight: 400; color: var(--tx-2); }
.dz-rows span { color: var(--tx-1); text-align: right; }

/* ---------- paper: the OM truth-check and the memo */
.dz-om, .dz-memo { --ink: #20252c; --ink-2: #4b5360; --rule: #d9cdb8; padding: 22px 24px 24px; border-radius: 2px; background: var(--warm); color: var(--ink);
  box-shadow: 0 30px 70px -20px rgb(0 0 0 / 70%), 0 0 0 1px rgb(0 0 0 / 20%); }
.dz-om header, .dz-memo header { margin-bottom: 14px; }
.dz-om .dz-k, .dz-memo .dz-k { color: var(--ink-2); }
#main-landing .dz-om h3, #main-landing .dz-memo h3 { font: 400 20px/1.2 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.dz-sum { display: flex; gap: 6px; margin-top: 10px !important; }
.dz-sum em, .dz-stamp { font-style: normal; font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.dz-sum em { padding: 4px 6px; border: 1px solid var(--rule); border-radius: 2px; color: var(--ink-2); }
.dz-sum .c-red { border-color: var(--red); color: var(--red); }
.dz-sum .c-amber { border-color: var(--orange); color: #9a5a10; }
.dz-om table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dz-om th, .dz-om td { padding: 9px 8px 9px 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: middle; font-weight: 400; }
.dz-om thead th { padding-top: 0; border-top: 0; font: 500 9.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.dz-om tbody th { font-weight: 500; color: var(--ink); white-space: nowrap; }
.dz-om td:nth-child(2) { font-family: var(--mono); font-size: 12.5px; }
.dz-om td:nth-child(3) { color: var(--ink-2); }
.dz-om td:last-child { text-align: right; padding-right: 0; }
.dz-om .dz-hard td:nth-child(2) { color: var(--red); text-decoration: line-through; text-decoration-color: rgb(205 66 70 / 60%); }
.dz-stamp { display: inline-block; padding: 5px 7px; border: 1.5px solid currentColor; border-radius: 2px; color: #5d7a69; white-space: nowrap; }
.dz-stamp.amber { color: #9a5a10; }
.dz-stamp.red { color: var(--red); border-width: 2px; transform: rotate(-4deg); box-shadow: inset 0 0 0 1px rgb(205 66 70 / 25%); }
.dz-memo p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.dz-memo p + p { margin-top: 10px !important; }
.dz-memo b { font-weight: 600; color: var(--ink); }
.dz-memo .c-red { color: var(--red); }
.dz-memo .c-amber { color: #9a5a10; }

/* ---------- the two actions and the Radar alert */
.dz-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); background: var(--g0); }
.dz-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid var(--line-3); border-radius: 2px; font-size: 13.5px; color: var(--tx-1); }
.dz-memo-btn { background: var(--tx-1); border-color: var(--tx-1); color: var(--g0); }
.dz-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-left: auto !important; padding: 8px 14px 8px 12px; border: 1px solid rgb(244 233 214 / 45%);
  border-radius: 2px; background: rgb(244 233 214 / 7%); font-size: 13px; color: var(--tx-2); }
.dz-alert::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 0 4px rgb(244 233 214 / 15%); }
.dz-alert-k { font: 500 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.dz-alert b { font-weight: 500; color: var(--warm); }
.dz-alert > span:last-child { font: 400 11.5px var(--mono); color: var(--tx-3); }

/* the empty terminal before the first parcel (running only) */
.dz-idle { display: none; }
.dz-run .dz-idle { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 20px; text-align: center; opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 39px, rgb(255 255 255 / 2.5%) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgb(255 255 255 / 2.5%) 39px 40px); }
.dz-run[data-beat="0"] .dz-idle { opacity: 1; }
.dz-idle-k { font: 500 10.5px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-4); }
.dz-idle-h { font: 400 clamp(22px, 2.6vw, 36px)/1.15 var(--sans); letter-spacing: -.03em; color: var(--tx-3); text-wrap: balance; }
.dz-idle-eg { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dz-idle-eg span { padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 2px; font: 400 12px/1.2 var(--mono); color: var(--tx-3); }

/* ---------- running: sheets over the dossier, and only what the timeline has reached */
.dz-run .dz-stage { display: block; min-height: 560px; }
/* the hairlines come from each panel, so panels the timeline has not reached leave no grey block */
.dz-run .dz-grid { background: none; border-color: transparent; }
.dz-run .dz-p { outline: 1px solid var(--line); }
.dz-run .dz-om, .dz-run .dz-memo { position: absolute; z-index: 2; visibility: hidden; opacity: 0; pointer-events: none; }
.dz-run .dz-om { top: 26px; right: 26px; width: min(640px, 62%); transform: translateX(calc(100% + 60px)) rotate(2deg); }
.dz-run .dz-memo { z-index: 3; left: 22%; bottom: 26px; width: min(520px, 48%); transform: translateY(calc(100% + 60px)) rotate(-1.5deg); }
.dz-run .dz-om.on, .dz-run .dz-memo.on { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
.dz-run .dz-memo.on { transform: rotate(-1.2deg); }
.dz-run .dz-doc { transition: opacity .6s, filter .6s; }
.dz-run[data-beat="2"] .dz-doc, .dz-run[data-beat="3"] .dz-doc { opacity: .32; filter: saturate(.6); }
.dz-run[data-beat="3"] .dz-om { filter: brightness(.62) saturate(.7); }
.dz-run .dz-head, .dz-run .dz-p { opacity: 0; transform: translateY(10px); }
.dz-run .dz-head.on, .dz-run .dz-p.on { opacity: 1; transform: none; }
.dz-run .dz-p::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid var(--warm); opacity: 0; }
.dz-run .dz-p.fresh::after { opacity: .7; }
.dz-run .dz-p.fresh time { color: var(--warm); }
.dz-run .dz-om tbody tr { opacity: 0; transform: translateX(14px); }
.dz-run .dz-om tbody tr.on { opacity: 1; transform: none; }
.dz-run .dz-stamp { opacity: 0; transform: scale(2.2) rotate(-14deg); }
.dz-run .dz-om tr.on .dz-stamp { opacity: 1; transform: none; }
.dz-run .dz-om tr.on .dz-stamp.red { transform: rotate(-4deg); }
.dz-run .dz-drop-label, .dz-run .dz-pdf { display: none; }
.dz-run .dz-drop.got { border-style: solid; border-color: var(--warm); background: rgb(244 233 214 / 6%); }
.dz-run .dz-drop.got .dz-drop-label, .dz-run .dz-drop.got .dz-pdf { display: inline; }
.dz-run .dz-drop.got .dz-drop-hint { display: none; }
.dz-run .dz-input.sent { border-color: var(--warm); }
.dz-run .dz-btn.press { transform: scale(.96); box-shadow: 0 0 0 3px rgb(244 233 214 / 30%); }
.dz-run .dz-track-btn.press, .dz-run .dz-track-btn.done { border-color: var(--warm); background: rgb(244 233 214 / 10%); color: var(--warm); }
.dz-run .dz-alert { opacity: 0; transform: translateY(12px) scale(.96); }
.dz-run .dz-alert.on { opacity: 1; transform: none; }
.dz-run .dz-input.typing .dz-caret { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .dz-run .dz-om, .dz-run .dz-memo { transition: transform .75s cubic-bezier(.2, .8, .2, 1), opacity .4s, filter .6s, visibility 0s .75s; }
  .dz-run .dz-om.on, .dz-run .dz-memo.on { transition: transform .75s cubic-bezier(.2, .8, .2, 1), opacity .3s, filter .6s, visibility 0s; }
  .dz-run .dz-idle { transition: opacity .5s; }
  .dz-run .dz-head, .dz-run .dz-p { transition: opacity .45s, transform .45s cubic-bezier(.2, .8, .2, 1); }
  .dz-run .dz-p::after, .dz-run .dz-p time { transition: opacity .9s, color .9s; }
  .dz-run .dz-om tbody tr { transition: opacity .35s, transform .35s; }
  .dz-run .dz-stamp { transition: opacity .12s, transform .28s cubic-bezier(.5, 1.8, .6, 1); }
  .dz-run .dz-btn { transition: transform .15s, box-shadow .3s, border-color .3s, color .3s; }
  .dz-run .dz-alert { transition: opacity .4s, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
  .dz-run .dz-drop.got .dz-pdf { animation: dz-drop .55s cubic-bezier(.3, 1.5, .5, 1); }
  .dz-run .dz-input.typing .dz-caret { animation: dz-blink 1s steps(2) infinite; }
  .dz-beats button i { transition: width .2s linear; }
}
@keyframes dz-drop { from { transform: translateY(-38px) rotate(-12deg) scale(1.4); opacity: 0; } }
@keyframes dz-blink { 50% { opacity: 0; } }

/* ---------- widths */
@media (max-width: 1180px) {
  .dz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dz-run .dz-om { width: min(600px, 74%); }
  .dz-run .dz-memo { left: auto; right: 8%; width: min(500px, 62%); }
}
@media (max-width: 860px) {
  .dossier { padding: 100px 0 110px; }
  .dz-beats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .dz-mode { display: none; }
  .dz-stage { grid-template-columns: minmax(0, 1fr); }
  .dz-run .dz-om, .dz-run .dz-memo { left: 14px; right: 14px; width: auto; }
  .dz-run .dz-om { top: 14px; }
  .dz-run .dz-memo { top: 90px; bottom: auto; }
  .dz-run .dz-idle { place-content: start center; padding-top: 90px; }
}
@media (max-width: 560px) {
  .dossier > .sec-head, .dz-beats, .dz-frame { max-width: calc(100% - 32px); }
  .dz-beats button > span:not(.dz-bn) { display: none; }
  .dz-chrome { gap: 10px; padding-left: 12px; }
  .dz-dots, .dz-chrome > b { display: none; }
  .dz-ask { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 8px; }
  .dz-input, .dz-drop { height: 46px; }
  .dz-stage { padding: 14px; }
  .dz-head { flex-wrap: wrap; align-items: start; }
  .dz-score { justify-items: start; }
  .dz-score b { font-size: 40px; }
  .dz-p { padding: 12px; }
  .dz-big { font-size: 19px; }
  .dz-om, .dz-memo { padding: 16px; }
  /* the truth-check as stacked lines: the claim's line, then what the OM says against the record, and the stamp */
  .dz-om thead { display: none; }
  .dz-om tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--rule); align-items: center; }
  .dz-om th, .dz-om td { padding: 0; border: 0; }
  .dz-om tbody th { grid-column: 1; }
  .dz-om td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .dz-om td:nth-child(3) { grid-column: 1; grid-row: 3; font-size: 12px; }
  .dz-om td:last-child { grid-column: 2; grid-row: 1 / 4; }
  .dz-act { padding: 14px; }
  .dz-btn { flex: 1 1 auto; justify-content: center; }
  .dz-alert { margin-left: 0 !important; width: 100%; }
}