/* docket.css — the scroll-driven sample job: one document that becomes a quote,
   a job, an invoice and finally paid as the page scrolls.

   Markup: templates/components/docket.html (the document) inside a page's own
   section, whose stage copy is the left column. Behaviour:
   static/js/controllers/esm/docket_controller.js. Used by the home page
   (templates/landing.html) and the trade pages (templates/solutions/page.html).

   Desktop: the stage copy scrolls on the left while the document stays pinned
   on the right and changes with the stage read. Phones (the 880px block): the
   copy is a short prelude, then the document pins full screen over a tall rail
   whose scroll plays the stages. 880px must match STACKED in the controller.

   Two measurements belong to the page, not to the docket, and are set there:
     --docket-gutter  the page wrapper's side padding, which the phone rail's
                      negative margins undo so the document runs edge to edge
     --docket-bar     the height of anything fixed to the bottom of the screen
                      on phones, which the full-screen document stops above:
                      the home page sets its call bar's; on the SEO pages it
                      falls back to the page bar's own --page-bar-h
   Colours and easing are the public tokens (chippie-marketing.css,
   tokens/semantic.css), which every public page loads. */

.lp-docket__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 80px; }
.lp-docket__stages { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0; }
.lp-docket__rail { grid-column: 2; grid-row: 1; }
.docket-stage { min-height: 86vh; display: flex; flex-direction: column; justify-content: center;
  scroll-margin-top: 12vh; }
.docket-stage:last-child { min-height: 72vh; }
.docket-stage h3 { font-size: 30px; margin: 0 0 10px; }
.docket-stage p { font-size: 18px; max-width: 44ch; }
.docket-stage__shot { width: 100%; max-width: 460px; height: auto; margin-top: 14px;
  border-radius: 12px; display: block; }
.docket-stage__integrations { list-style: none; padding: 0; margin: 10px 0 0; display: flex; gap: 28px; }
.docket-stage__integrations li { display: flex; align-items: center; gap: 10px;
  font-family: var(--font-family-mono); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-2); }
.docket-stage__wordmark { font-family: var(--font-family-heading); font-weight: var(--font-weight-heading);
  font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--text-2); }

/* The document itself: markup styled after the app's own detail screen.
   It sits inside other pages' prose (the SEO pages' `.seo-section p`, `ul`,
   `li` add paragraph gaps and list indents), so it resets its own paragraphs
   and lists, one step more specific than those, before styling them. The two
   blocks below that do want a margin restate it at the same weight. */
.docket :is(p, ul, ol, li) { margin: 0; }
.docket :is(ul, ol) { padding: 0; }
.docket .docket__label { margin: 0 0 6px; }
.docket .docket__total { margin: 10px 0 0; }
.docket {
  position: sticky; top: max(24px, calc(50vh - 310px));
  max-width: 440px; margin: 0 0 0 auto; overflow: clip;
  background: var(--white); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.06), 0 28px 56px -20px rgba(31, 61, 44, 0.35);
}
.docket__tabs { display: flex; gap: 4px; padding: 6px; background: var(--sandstone);
  border-bottom: 1px solid var(--border); }
.docket__tabs a { flex: 1; text-align: center; padding: 8px 4px; border-radius: 9px;
  font-family: var(--font-family-mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none; color: var(--text-2);
  transition: background-color 0.2s var(--ease-settle), color 0.2s var(--ease-settle); }
.docket__tabs a[aria-current] { background: var(--green-deep); color: var(--white); }
.docket__tabs a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.docket__head { background: var(--green-deep); color: var(--sandstone); padding: 20px 22px 18px; }
.docket__head p { margin: 0; }
.docket__title { font-family: var(--font-family-heading); font-weight: var(--font-weight-heading);
  font-size: 32px; line-height: 1.1; color: var(--white); }
.docket__head .docket__client { font-style: italic; font-weight: 600; margin-top: 6px; }
.docket__site { font-size: 14px; opacity: 0.8; }
.docket__head .docket__status { margin-top: 12px; min-height: 26px; }
.docket__pill { display: inline-block; padding: 4px 10px; border-radius: 6px;
  font-family: var(--font-family-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; }
.docket__pill--pending, .docket__pill--progress { background: var(--orange); color: var(--white); }
.docket__pill--ok { background: var(--green-paid); color: var(--white); }
.docket__pill--ready { background: var(--c-tint-info-bg); color: var(--c-tint-info-text); }
.docket__pill--due { background: var(--yellow); color: var(--black); }
.docket__pill--sent { background: var(--c-brand-100); color: var(--c-brand-800); }
.docket__body { padding: 18px 22px 8px; }
.docket__block + .docket__block, .docket__block + .docket__synced { margin-top: 16px; }
.docket__label { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2); margin: 0 0 6px; }
/* A trade's job description is the full one from its app screen; four lines
   say what the job is (the home page's fits in them), and the line items say
   the rest. */
.docket__desc { font-size: 15px; line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.docket__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.docket__photos img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 8px; display: block; }
.docket__lines { list-style: none; padding: 0; margin: 0; }
.docket__line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
  border-bottom: 1px dashed var(--border); font-size: 15px; font-variant-numeric: tabular-nums;
  transition: opacity 0.3s var(--ease-settle), transform 0.3s var(--ease-settle); }
.docket.is-live .docket__line:not(.is-shown) { opacity: 0; transform: translateY(6px); }
.docket__total { display: flex; justify-content: space-between; margin: 10px 0 0;
  font-family: var(--font-family-heading); font-weight: var(--font-weight-heading);
  font-size: 22px; font-variant-numeric: tabular-nums; }
.docket__synced { display: flex; align-items: center; gap: 8px; margin: 0;
  font-family: var(--font-family-mono); font-size: 12px; color: var(--green-paid); }
.docket__foot { margin: 0; padding: 12px 22px 16px; font-size: 12.5px; color: var(--text-2); }
.docket__stamp {
  position: absolute; right: 26px; top: 200px; margin: 0; pointer-events: none;
  font-family: var(--font-family-heading); font-weight: var(--font-weight-heading);
  font-size: 60px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green-paid); border: 5px solid currentColor; border-radius: 12px;
  padding: 4px 16px 2px; rotate: -9deg; opacity: 0.88; mix-blend-mode: multiply;
}

/* Which stage's pieces show. Everything tagged data-for is hidden unless its
   stage is current; pills also have to match the step. */
.docket [data-for] { display: none; }
.docket[data-stage="quote"] [data-for~="quote"],
.docket[data-stage="job"] [data-for~="job"],
.docket[data-stage="invoice"] [data-for~="invoice"],
.docket[data-stage="paid"] [data-for~="paid"] { display: revert; }
.docket[data-step="0"] .docket__pill[data-step="1"],
.docket[data-step="1"] .docket__pill[data-step="0"] { display: none; }
/* A piece swapping in arrives rather than blinks. */
.docket__title [data-for], .docket__pill, .docket__block[data-for], .docket__synced {
  animation: docket-swap 0.35s var(--ease-settle); }
.docket__stamp { animation: docket-stamp 0.42s var(--ease-overshoot); }
@keyframes docket-swap { from { opacity: 0; translate: 0 6px; } }
@keyframes docket-stamp { from { opacity: 0; scale: 1.7; } }
/* Every state still changes under reduced motion; nothing travels. */
@media (prefers-reduced-motion: reduce) {
  .docket__title [data-for], .docket__pill, .docket__block[data-for], .docket__synced,
  .docket__stamp { animation: none; }
  .docket__line { transition: none; }
  .docket.is-live .docket__line:not(.is-shown) { transform: none; }
}

@media (max-width: 880px) {
  /* The stage copy is a prelude, read before the document, with no
     screenshots. Then the rail runs about 80svh of scroll per stage while the
     document holds the whole screen above any bottom bar, edge to edge. */
  .lp-docket__grid { display: block; margin-top: 24px; }
  .docket-stage { min-height: 0; display: block; padding: 0 0 22px; scroll-margin-top: 24px; }
  .docket-stage:last-child { min-height: 0; padding-bottom: 0; }
  .docket-stage h3 { font-size: 22px; margin: 0 0 6px; }
  .docket-stage p { font-size: 16px; margin: 0; }
  .docket-stage__shot { display: none; }
  .docket-stage__integrations { margin-top: 12px; }
  .lp-docket__rail { height: 420svh; margin: 32px calc(-1 * var(--docket-gutter, 24px)) 0; }
  .docket { top: 0; height: calc(100svh - var(--docket-bar, var(--page-bar-h, 0px))); max-width: none; margin: 0;
    border-radius: 0; border-width: 1px 0; box-shadow: none;
    display: flex; flex-direction: column; }
  .docket__head { padding: 16px 18px; }
  .docket__title { font-size: 26px; }
  .docket__body { flex: 1; min-height: 0; overflow: hidden; padding: 16px 18px 6px; }
  .docket__photos img { aspect-ratio: 4 / 3; }
  .docket__foot { padding: 10px 18px 12px; font-size: 12px; }
  .docket__stamp { font-size: 48px; right: 18px; top: 170px; border-width: 4px; }
}