/* == THE PINBOARD DIALOG, ITS DROPDOWNS, AND THE DOCKET =====  6 Sep 2026 ==
   Lifted VERBATIM: the dialog and its drawn listbox out of
   `my-jobs.html`, the docket out of `quote.html`. Class names
   unchanged, so collapsing the two inline originals onto this sheet later is a
   delete rather than a rewrite.

   THREE MISSES ON THE WAY HERE, and two of them were the same mistake twice.
   The pattern was `.pjm-`, which does not match `.pjm`, so the dialog shipped
   with no `position:fixed` and hung off the corner of the page. Then `.pjs-`,
   which does not match `.pjs`, so the drawn listbox came with no wrapper rule
   and the native select it replaces was left showing underneath it. And the
   docket's `.dk` and `.tot` live in quote.html and were never asked for.

   The pattern is `(pjm|pjs|pjc)(\b|-)` now. A prefix match that does not
   include the prefix itself is a trap that will keep paying out.

   DEBT: the dashboard and quote.html still carry their own inline copies. */

/* ---- the dialog and its dropdowns ---- */
.pjm{position:fixed; inset:0; z-index:900; display:flex; align-items:center;
  justify-content:center; padding:clamp(12px,3vw,40px)}
.pjm[hidden]{display:none}
.pjm-scrim{position:absolute; inset:0; background:rgba(10,22,40,.58);
  backdrop-filter:blur(2px); animation:pjmFade 200ms cubic-bezier(.25,.1,.25,1)}
.pjm-box{
  position:relative; z-index:1; display:flex; flex-direction:column;
  width:min(560px,100%); max-height:min(88vh,780px);
  background:var(--cream); border-radius:4px;
  box-shadow:0 4px 10px rgba(10,22,40,.10), 0 34px 70px -22px rgba(10,22,40,.55);
  animation:pjmRise 300ms cubic-bezier(.16,1,.3,1);
}
@keyframes pjmFade{from{opacity:0}to{opacity:1}}
@keyframes pjmRise{from{opacity:0; translate:0 14px}to{opacity:1; translate:0 0}}
.pjm-head{position:relative; padding:18px 22px 0; flex:none}
.pjm-t{margin:0 0 14px; font-family:var(--serif-display); font-weight:400;
  font-size:21px; line-height:1.2; color:var(--navy); text-align:center}
.pjm-x{
  position:absolute; top:15px; right:16px; width:32px; height:32px;
  display:grid; place-items:center; border:0; border-radius:50%;
  background:var(--cream-2); color:var(--muted); cursor:pointer;
  transition:background 150ms, color 150ms;
}
.pjm-x:hover{background:var(--line); color:var(--navy)}
.pjm-x svg{width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round}
.pjm-rail{display:flex; gap:5px; list-style:none; margin:0; padding:0}
.pjm-bay{flex:1 1 0; height:3px; border-radius:2px; background:var(--line);
  transition:background 280ms cubic-bezier(.16,1,.3,1)}
.pjm-bay.is-done{background:var(--line-2)}
.pjm-bay.is-on{background:var(--navy)}
.pjm-step{margin:9px 0 0; font-family:var(--sans); font-size:10px;
  font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted)}
.pjm-step b{font-weight:600; color:var(--navy)}
.pjm-step-n{display:block; margin-top:3px; letter-spacing:.17em}
.pjm-body{flex:1 1 auto; overflow-y:auto; padding:18px 22px 6px}
.pjm-pane[hidden]{display:none}
.pjm-pane.is-on{animation:pjmPane 280ms cubic-bezier(.16,1,.3,1)}
@keyframes pjmPane{from{opacity:0; translate:14px 0}to{opacity:1; translate:0 0}}
.pjm-f{margin:0 0 17px}
.pjm-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 14px}
.pjm-f label{display:block; margin:0 0 7px; font-family:var(--sans);
  font-size:9.5px; font-weight:500; letter-spacing:.17em; text-transform:uppercase;
  color:var(--muted)}
.pjm-f input[type=text],.pjm-f select,.pjm-f textarea{
  width:100%; display:block; box-sizing:border-box;
  background:transparent; border:0; border-bottom:1px solid var(--line-2);
  border-radius:0; padding:7px 0 9px;
  font-family:var(--serif); font-size:16px; line-height:24px; color:var(--navy);
  transition:border-color 180ms;
}
.pjm-f textarea{resize:vertical; min-height:120px; font-size:15px; line-height:23px}
.pjm-f select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 11px) 17px, calc(100% - 6px) 17px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  padding-right:26px}
.pjm-f input:focus,.pjm-f select:focus,.pjm-f textarea:focus{
  outline:none; border-bottom-color:var(--navy); border-bottom-width:2px;
  padding-bottom:8px}
.pjm-f ::placeholder{color:var(--muted); opacity:1}
.pjm-hint{margin:8px 0 0; font-family:var(--serif); font-size:12.5px;
  line-height:18px; color:var(--muted)}
.pjm-shots{display:grid; grid-template-columns:2fr 1fr; grid-template-rows:auto auto;
  gap:6px; margin-top:2px}
.pjm-slot{
  grid-row:1 / span 2; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:9px; aspect-ratio:4/3; cursor:pointer;
  background:var(--cream-2); border:1px dashed var(--line-2); border-radius:4px;
  font-family:var(--sans); font-size:12px; font-weight:500; color:var(--muted);
  transition:background 160ms, border-color 160ms, color 160ms;
}
.pjm-slot--sm{grid-row:auto; aspect-ratio:4/3}
.pjm-slot svg{width:22px; height:22px; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.pjm-slot:hover{background:var(--cream); border-color:var(--navy); color:var(--navy)}
/* rp198, 21 Oct 2026: no colour down its side (Mason 62.1; Sir on the settings page, 19 Oct: "the stereotypical AI
   mark where it has a colour on the side of the container"). A soft sheet of its own, edged all round. */
.pjm-note{
  margin:4px 0 0; padding:12px 14px; border:0; box-shadow:inset 0 0 0 1px rgba(10,22,40,.08);
  background:var(--cream-2); border-radius:12px;
  font-family:var(--serif); font-size:13px; line-height:19px; color:var(--ink);
}
.pjm-foot{flex:none; display:flex; align-items:center; gap:10px;
  padding:14px 22px 18px; border-top:1px solid var(--line)}
.pjm-spacer{flex:1 1 auto}
.pjm-back{
  border:0; background:none; cursor:pointer; padding:9px 4px;
  font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); transition:color 150ms;
}
.pjm-back:hover{color:var(--navy)}
.pjm-back[hidden]{display:none}
.pjm-next{
  border:0; cursor:pointer; height:42px; padding:0 26px; border-radius:999px;
  background:var(--navy); color:var(--cream);
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase;
  transition:background 160ms, translate 160ms cubic-bezier(.16,1,.3,1);
}
.pjm-next:hover{background:var(--navy-2); translate:0 -1px}
.pjm-next[hidden]{display:none}
@media (max-width:520px){
.pjm{padding:0; align-items:flex-end}
.pjm-box{width:100%; max-height:94vh; border-radius:4px 4px 0 0}
.pjm-row{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
.pjm-scrim,.pjm-box,.pjm-pane.is-on{animation:none}
.pjm-next:hover,.pjm-back:hover{translate:none}
}
.pjm-board{
  position:relative; display:block; background:var(--navy); border-radius:4px;
  padding:34px 18px 24px; width:min(596px,100%); max-height:min(90vh,820px);
  display:flex; flex-direction:column;
  background-image:
    repeating-linear-gradient(90deg, rgba(250,248,243,.030) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px),
    radial-gradient(130% 96% at 50% -8%, rgba(250,248,243,.085), transparent 60%);
  box-shadow:
    inset 0 2px 0 rgba(250,248,243,.16), inset 0 0 0 1px rgba(0,0,0,.35),
    inset 0 -26px 44px -26px rgba(0,0,0,.92), 0 26px 60px -18px rgba(10,22,40,.60);
  animation:pjmRise 340ms cubic-bezier(.16,1,.3,1);
}
.pjm-board .slip{
  position:absolute; z-index:1; top:38px; right:16px; width:104px; height:74px;
  background:linear-gradient(160deg,#F6F2E6,#E9E3D2); border-radius:1px;
  rotate:4.2deg; box-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 16px -9px rgba(0,0,0,.65);
}
.pjm-board .pin{
  position:absolute; z-index:4; top:24px; left:50%; margin-left:-11px;
  width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 33% 28%, #46536A 0 18%, var(--navy) 52%, #04090F 100%);
  box-shadow:0 1px 0 rgba(250,248,243,.22), 0 6px 9px -3px rgba(0,0,0,.66);
}
.pjm-board .pin::after{
  content:''; position:absolute; left:4px; top:3.5px; width:6px; height:5px;
  border-radius:50%; background:rgba(250,248,243,.62); rotate:-24deg;
}
.pjm-sheet{
  position:relative; z-index:2; flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  width:calc(100% - 26px); margin-left:6px;
  background:#FDFBF5; border-radius:1px; rotate:0deg;
  transform-origin:50% 16px;
  box-shadow:0 1px 2px rgba(0,0,0,.30), 0 16px 30px -14px rgba(0,0,0,.66);
  animation:pjmLay 520ms cubic-bezier(.16,1,.3,1);
}
@keyframes pjmLay{
  0%{rotate:-2.6deg} 55%{rotate:.5deg} 100%{rotate:0deg}
}
.pjm-sheet::after{
  content:''; position:absolute; right:0; bottom:0; width:26px; height:26px;
  background:
    linear-gradient(135deg, transparent 0 49%, rgba(0,0,0,.30) 50%, transparent 51%),
    linear-gradient(315deg, #F2EEE2 0 46%, transparent 47%);
}
.pjm .pjm-x{
  position:absolute; top:18px; right:16px; z-index:5;
  width:30px; height:30px; display:grid; place-items:center;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(250,248,243,.10); color:rgba(250,248,243,.72);
  transition:background 150ms, color 150ms;
}
.pjm .pjm-x:hover{background:rgba(250,248,243,.20); color:var(--cream)}
.pjm-head{padding:26px 26px 0; flex:none}
.pjm-t.sheet-t{
  margin:0 0 18px; padding-bottom:15px; border-bottom:1px solid var(--line-2);
  font-family:var(--serif-display); font-weight:400; font-size:23px;
  line-height:1.238; color:var(--navy); text-align:left;
}
.pjm-head .sheet-k{margin:0 0 6px}
.pjm-body{padding:20px 26px 8px}
.pjm-f{margin:0 0 24px}
.pjm-f:last-child{margin-bottom:6px}
.pjm-hint{margin:9px 0 0}
.pjm-foot{padding:16px 26px 20px; gap:14px}
.pjm-note{margin:8px 0 2px; padding:14px 16px}
.pjm-rail{margin-top:2px}
.pjm-bay{height:4px}
.pjm-bay.is-done{background:var(--green)}
.pjm-bay.is-on{background:var(--gold-soft)}
.pjm-step b{color:var(--navy)}
.pjm-step-n{color:var(--gold-ink)}
.pjm-pane[data-pane="2"] textarea{
  background-image:repeating-linear-gradient(0deg, transparent 0 22px, rgba(10,22,40,.07) 22px 23px);
  background-position:0 6px; line-height:23px; padding-top:6px;
}
.pjm-post{width:auto; min-width:190px; padding:0 30px}
@media (max-width:520px){
.pjm-board{width:100%; max-height:96vh; padding:28px 12px 18px; border-radius:4px 4px 0 0}
.pjm-sheet{width:calc(100% - 16px); margin-left:4px}
.pjm-head{padding:20px 18px 0}
.pjm-body{padding:16px 18px 6px}
.pjm-foot{padding:14px 18px 16px}
.pjm-post{width:100%; min-width:0}
}
@media (prefers-reduced-motion:reduce){
.pjm-board,.pjm-sheet{animation:none}
.pjm-sheet{rotate:0deg}
}
.pjm{perspective:1400px}
.pjm-board{
  rotate:var(--bx,0) var(--by,0) 0 var(--ba,0deg);
  transition:rotate 420ms cubic-bezier(.16,1,.3,1);
  will-change:rotate;
}
.pjm-board.is-live{transition:rotate 90ms linear}
.pjm-sheet{transition:box-shadow 300ms cubic-bezier(.16,1,.3,1)}
.pjm-board:hover .pjm-sheet,
.pjm-board:focus-within .pjm-sheet{
  box-shadow:0 1px 2px rgba(0,0,0,.30), 0 26px 48px -16px rgba(0,0,0,.72);
}
.pjm-board .slip{transition:rotate 420ms cubic-bezier(.16,1,.3,1),
                            translate 420ms cubic-bezier(.16,1,.3,1)}
.pjm-board:hover .slip{rotate:5.4deg; translate:2px -3px}
.pjm-f input[type=text]:hover,.pjm-f select:hover,.pjm-f textarea:hover{
  border-bottom-color:var(--navy); }
.pjm-f input[type=text]:focus:hover,.pjm-f select:focus:hover,.pjm-f textarea:focus:hover{
  border-bottom-color:var(--navy); }
.pjm-slot{transition:background 160ms, border-color 160ms, color 160ms,
                     translate 200ms cubic-bezier(.16,1,.3,1)}
.pjm-slot:hover{translate:0 -1px}
@media (prefers-reduced-motion:reduce){
.pjm-board{rotate:none; transition:none}
.pjm-board .slip,.pjm-slot{transition:none}
.pjm-board:hover .slip{rotate:4.2deg; translate:0 0}
}
.pjm-head .pjm-rail{margin-top:8px}
.pjm-step{margin:13px 0 0; line-height:14px}
.pjm-step-n{margin-top:6px; line-height:14px}
.pjm-t.sheet-t{margin-bottom:20px; padding-bottom:16px}
.pjm-f ::placeholder{
  font-family:var(--sans); font-size:12.5px; font-weight:400;
  letter-spacing:.03em; color:var(--muted); opacity:1;
}
.pjm-f textarea::placeholder{line-height:22px}
.pjm-f{position:relative}
.pjm-f input[type=text],.pjm-f textarea{padding-left:11px}
.pjm-f ::placeholder{padding-left:0}
.pjm-caret{
  position:absolute; left:1px; bottom:12px; width:1.5px; height:17px;
  background:var(--navy); opacity:0; pointer-events:none;
  transition:opacity 160ms cubic-bezier(.25,.1,.25,1);
}
.pjm-caret--top{bottom:auto; top:33px}
.pjm-f input:placeholder-shown:not(:focus) ~ .pjm-caret,
.pjm-f textarea:placeholder-shown:not(:focus) ~ .pjm-caret{
  opacity:1; animation:pjmBlink 1.1s steps(1,end) infinite;
}
@keyframes pjmBlink{0%,55%{opacity:1} 56%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
.pjm-f input:placeholder-shown:not(:focus) ~ .pjm-caret,
  .pjm-f textarea:placeholder-shown:not(:focus) ~ .pjm-caret{animation:none; opacity:1}
}
.pjm-scrim{background:rgba(10,22,40,.46)}
.pjm-board{
  background-color:rgba(10,22,40,.80);
  backdrop-filter:blur(6px) saturate(1.05);
  -webkit-backdrop-filter:blur(6px) saturate(1.05);
}
.pjm-board{
  box-shadow:
    inset 0 2px 0 rgba(250,248,243,.16), inset 0 0 0 1px rgba(0,0,0,.28),
    inset 0 -26px 44px -26px rgba(0,0,0,.70), 0 26px 60px -18px rgba(10,22,40,.50);
}
.pjm-f label{line-height:11px}
.pjm-caret{top:28px; bottom:auto; height:17px}
.pjm-caret--top{top:28px}
.pjm-f textarea ~ .pjm-caret{height:16px; top:29px}
.pjm-f input[type=text],.pjm-f textarea{padding-left:9px}
.pjm-caret{left:3px}
.pjm-hint{
  font-family:var(--sans); font-size:12.5px; font-weight:400;
  line-height:18px; letter-spacing:.03em; color:var(--muted);
}
.pjm-slot{font-size:12.5px; letter-spacing:.03em}
.pjm-f label{letter-spacing:.17em}
.pjm-note{font-size:13px; line-height:20px}
.pjm-f label.pjm-slot{
  font-size:12.5px; font-weight:500; letter-spacing:.03em;
  text-transform:none; color:var(--muted); margin:0; line-height:18px;
}
.pjm-f label.pjm-slot:hover{color:var(--navy)}
.pjm-f select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636976' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1px center;
  background-size:14px 14px;
  padding-right:24px;
  transition:border-color 180ms, background-image 180ms;
}
.pjm-f select:hover,.pjm-f select:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.pjs{position:relative}
.pjs select{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.pjs-t{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; box-sizing:border-box; cursor:pointer; text-align:left;
  background:transparent; border:0; border-bottom:1px solid var(--line-2);
  border-radius:0; padding:7px 1px 9px 9px;
  font-family:var(--serif); font-size:16px; line-height:24px; color:var(--navy);
  transition:border-color 180ms;
}
.pjs-t:hover{border-bottom-color:var(--navy)}
.pjs-t[aria-expanded="true"]{border-bottom-color:var(--navy); border-bottom-width:2px; padding-bottom:8px}
.pjs-t:focus-visible{outline:2px solid var(--navy); outline-offset:3px}
.pjs-c{width:14px; height:14px; flex:none; fill:none; stroke:var(--muted);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:rotate 200ms cubic-bezier(.16,1,.3,1), stroke 180ms}
.pjs-t:hover .pjs-c{stroke:var(--navy)}
.pjs-t[aria-expanded="true"] .pjs-c{rotate:180deg; stroke:var(--navy)}
.pjs-m{
  position:fixed; z-index:1000; margin:0; padding:5px; list-style:none;
  background:var(--cream); border:1px solid var(--line); border-radius:4px;
  box-shadow:0 1px 2px rgba(10,22,40,.06), 0 18px 38px -14px rgba(10,22,40,.55);
  max-height:262px; overflow-y:auto;
  animation:pjsDrop 180ms cubic-bezier(.16,1,.3,1);
}
.pjs-m[hidden]{display:none}
.pjs-o{
  display:flex; align-items:center; gap:9px; width:100%; box-sizing:border-box;
  cursor:pointer; text-align:left; background:none; border:0; border-radius:3px;
  padding:8px 10px;
  font-family:var(--serif); font-size:14.5px; line-height:20px; color:var(--ink);
  transition:background 130ms, color 130ms;
}
.pjs-o:hover,.pjs-o.is-cursor{background:var(--cream-2); color:var(--navy)}
.pjs-o:focus-visible{outline:2px solid var(--navy); outline-offset:-2px}
.pjs-o svg{width:13px; height:13px; flex:none; fill:none; stroke:var(--green);
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; opacity:0}
.pjs-o[aria-selected="true"]{color:var(--navy)}
.pjs-o[aria-selected="true"] svg{opacity:1}
@media (prefers-reduced-motion:reduce){
.pjs-m{animation:none}
.pjs-c{transition:stroke 180ms}
}
.pjs-m{z-index:1100}
.pjm-head .pjm-t.sheet-t{
  margin:0 0 20px; padding-bottom:16px;
  font-family:var(--serif); font-weight:400;
  font-size:22px; line-height:22px; letter-spacing:8px;
  text-transform:uppercase; color:var(--navy); text-align:left;
  border-bottom:1px solid var(--line-2);
}
.pjm-post{
  position:relative; isolation:isolate;
  display:flex; align-items:center; justify-content:center;
  height:46px; min-width:190px; padding:0 30px; border:0; border-radius:999px;
  cursor:pointer; text-decoration:none;
  font-family:var(--sans); font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--navy);
  background:linear-gradient(180deg,#FFFFFF 0%,#FCFBF8 58%,#F4F1E8 100%);
  box-shadow:
    inset 0 0 0 1px var(--navy), inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(10,22,40,.10), 0 1px 2px rgba(10,22,40,.14),
    0 12px 24px -12px rgba(10,22,40,.38);
  transition:background 200ms cubic-bezier(.25,.1,.25,1),
             color 200ms cubic-bezier(.25,.1,.25,1),
             box-shadow 200ms cubic-bezier(.25,.1,.25,1);
}
.pjm-post::before{
  content:''; position:absolute; z-index:-1; inset:1px 1px auto 1px; height:52%;
  border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.55) 0%,
             rgba(255,255,255,.14) 46%, rgba(255,255,255,0) 100%);
  transition:opacity 200ms cubic-bezier(.25,.1,.25,1);
}
.pjm-post:hover::before,.pjm-post:focus-visible::before{opacity:.26}
.pjm-post:hover,.pjm-post:focus-visible{
  background:var(--navy); color:var(--cream);
  box-shadow:
    inset 0 0 0 1px var(--navy), inset 0 1px 0 rgba(250,248,243,.22),
    inset 0 -1px 0 rgba(0,0,0,.24), 0 1px 2px rgba(10,22,40,.18),
    0 16px 30px -14px rgba(10,22,40,.48);
}
.pjm-post[hidden]{display:none}
.pjs select{font:inherit}
.pjm-step{margin-top:14px; font-size:10.5px; letter-spacing:.17em}
.pjm-step b{color:var(--navy)}
.pjm-prevbtn{
  border:0; background:none; cursor:pointer; padding:9px 6px; margin-right:2px;
  font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid transparent; transition:color 160ms, border-color 160ms;
}
.pjm-prevbtn:hover{color:var(--navy); border-bottom-color:var(--line-2)}
.pjm-prevbtn[hidden]{display:none}
.pjm-prev-k{
  margin:0 0 11px; font-family:var(--sans); font-size:9.5px; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--muted);
}
.pjm-prev{
  margin:0; padding:18px 19px 16px; background:var(--cream-2);
  border:1px solid var(--line); border-radius:12px;   /* rp198: no stripe down its side (Mason 62.1) */
}
.pjm-prev-h{margin:0 0 13px; padding:0 0 12px; border-bottom:1px solid var(--line)}
.pjm-prev-t{
  margin:0 0 6px; font-family:var(--serif-display); font-weight:400;
  font-size:19px; line-height:25px; color:var(--navy);
}
.pjm-prev-m{
  margin:0; display:flex; flex-wrap:wrap; gap:0 7px;
  font-family:var(--sans); font-size:12px; line-height:18px; color:var(--muted);
}
.pjm-prev-body{
  margin:0 0 15px; font-family:var(--serif); font-size:14px; line-height:22px;
  color:var(--ink); white-space:pre-wrap;
}
.pjm-prev-facts{list-style:none; margin:0; padding:0}
.pjm-prev-facts li{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:8px 0; border-top:1px solid var(--line);
}
.pjm-prev-facts span{
  font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:.17em;
  text-transform:uppercase; color:var(--muted);
}
.pjm-prev-facts b{font-family:var(--serif); font-size:14px; font-weight:400; color:var(--navy)}
.pjm-prev-ok{color:var(--green) !important}
.pjm-prev-fine{
  margin:13px 0 0; font-family:var(--sans); font-size:11.5px; line-height:17px;
  color:var(--muted);
}
.pjm-shot{
  position:relative; width:100%; overflow:hidden;
  border:1px solid var(--line); border-radius:4px; background:var(--cream-2);
  aspect-ratio:1200/860;
}
.pjm-shot-f{
  position:absolute; top:0; left:0; width:1200px; height:860px; border:0;
  transform-origin:0 0; pointer-events:none; background:var(--cream);
  
  scale:.4017;
}
.pjm-pane--prev .pjm-prev-fine{margin-top:11px}
.pjm-money{display:flex; align-items:baseline; gap:2px;
  border-bottom:1px solid var(--line-2); transition:border-color 180ms}
.pjm-money:hover{border-bottom-color:var(--navy)}
.pjm-money:focus-within{border-bottom-color:var(--navy); border-bottom-width:2px}
.pjm-money-s{
  flex:none; padding:7px 0 9px 9px;
  font-family:var(--serif); font-size:16px; line-height:24px; color:var(--muted);
}
.pjm-f .pjm-money input{
  flex:1 1 auto; min-width:0; border-bottom:0 !important; padding-left:2px;
  font-variant-numeric:tabular-nums;
}
.pjm-f .pjm-money input:focus{padding-bottom:9px}
.pjm-cover{
  display:flex; flex-wrap:wrap; gap:6px; margin:11px 0 0; padding:0;
  list-style:none;
}
.pjm-cover li{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px 4px 8px; border-radius:999px;
  font-family:var(--sans); font-size:10px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
  transition:background 260ms cubic-bezier(.25,.1,.25,1),
             color 260ms cubic-bezier(.25,.1,.25,1);
}
.pjm-cover svg{width:10px; height:10px; flex:none; fill:none;
  stroke:currentColor; stroke-width:2.4; stroke-linecap:round;
  stroke-linejoin:round}
.pjc--in{background:rgba(15,90,79,.10); color:var(--green)}
.pjc--out{background:rgba(212,169,67,.16); color:var(--gold-ink)}
.pjm-prev-k2{
  margin:18px 0 0; font-family:var(--sans); font-size:9.5px; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--muted);
}
.pjm-cover--prev{margin-top:9px}
@media (prefers-reduced-motion:reduce){
.pjm-cover li{transition:none}
}
.pjm-ex{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.pjm-f label.pjm-exi{
  display:flex; align-items:center; gap:11px; margin:0;
  padding:9px 10px 9px 4px; border-radius:3px; cursor:pointer;
  font-family:var(--serif); font-size:14.5px; font-weight:400;
  letter-spacing:0; text-transform:none; line-height:20px; color:var(--navy);
  transition:background 160ms;
}
.pjm-f label.pjm-exi:hover{background:rgba(10,22,40,.035)}
.pjm-exi input{
  appearance:none; -webkit-appearance:none; flex:none; margin:0;
  width:17px; height:17px; border-radius:3px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--cream);
  transition:background 160ms, border-color 160ms;
}
.pjm-exi input:checked{background:var(--green); border-color:var(--green)}
.pjm-exi input:checked + span{color:var(--navy)}
.pjm-exi input:focus-visible{outline:2px solid var(--navy); outline-offset:2px}
.pjm-exi input:checked{
  background-image:
    linear-gradient(45deg, rgba(0,0,0,0) 44%, var(--cream) 45% 55%, rgba(0,0,0,0) 56%),
    linear-gradient(-45deg, rgba(0,0,0,0) 44%, var(--cream) 45% 55%, rgba(0,0,0,0) 56%);
  background-size:9px 2px, 5px 2px;
  background-position:8px 9px, 4.5px 10px;
  background-repeat:no-repeat;
}
@media (prefers-reduced-motion:reduce){
.pjm-f label.pjm-exi, .pjm-exi input{transition:none}
}
.pjm-body{min-height:0}
.pjm-form{display:flex; flex-direction:column; flex:1 1 auto; min-height:0}

/* ---- the docket ---- */
.dk{position:relative; background:#FDFBF5; border-radius:1px; padding:26px 24px 22px;
  box-shadow:0 1px 2px rgba(10,22,40,.20), 0 18px 34px -18px rgba(10,22,40,.42);
  transform:rotate(-.7deg)}
.dk::after{content:''; position:absolute; right:0; bottom:0; width:26px; height:26px;
  background:
    linear-gradient(135deg, transparent 0 49%, rgba(10,22,40,.20) 50%, transparent 51%),
    linear-gradient(315deg, #F2EEE2 0 46%, transparent 47%)}
.dk h2{font-family:var(--serif-display); font-weight:400; font-size:21px; color:var(--navy);
  padding-bottom:13px; border-bottom:1px solid var(--line-2)}
.dk dl{margin:0}
.dk .r{display:flex; justify-content:space-between; gap:14px; padding:11px 0;
  border-bottom:1px dashed var(--line-2)}
.dk dt{font-family:var(--sans); font-size:9.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); flex:none; padding-top:2px}
.dk dd{margin:0; font-family:var(--serif); font-size:14.5px; color:var(--navy); text-align:right}
.dk dd.empty{color:var(--muted); font-style:italic}
.dk .tot{display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  margin:16px -24px -22px; padding:16px 24px 18px; border-top:2px solid var(--navy);
  background:var(--code-money-bg)}
.dk .tot b{font-family:var(--serif-display); font-size:28px; color:var(--green);
  font-variant-numeric:tabular-nums}
.dk .tot .k{color:var(--green-2)}
.dk dd.empty{ padding:0; background:none; border:0; border-radius:0;
  text-align:right; color:var(--muted); font-style:italic; }
.dk .tot b{ color:var(--navy); }
.dk .tot .k{ color:var(--muted); }
.dk.sheet{
    rotate: -1.4deg; transform: none;
    width: calc(100% - 22px); margin-left: 5px;
    transform-origin: 50% 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.30), 0 16px 30px -14px rgba(0,0,0,.66);
    transition: rotate 340ms cubic-bezier(.16,1,.3,1),
                box-shadow 340ms cubic-bezier(.16,1,.3,1);
  }
.docket:hover .dk.sheet{
    rotate: 0deg; transform: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.30), 0 24px 44px -16px rgba(0,0,0,.7);
  }
@media (prefers-reduced-motion: reduce){
.dk.sheet, .docket:hover .dk.sheet{ transition: none; rotate: -1.4deg; }
}
.sheet, .dk.sheet, .tsheet{
    box-shadow: 0 1px 2px rgba(10, 22, 40, .10),
                0 10px 20px -14px rgba(10, 22, 40, .34); }
.docket:hover .dk.sheet, .tboard:hover .tsheet{
    box-shadow: 0 1px 2px rgba(10, 22, 40, .12),
                0 16px 28px -16px rgba(10, 22, 40, .42); }
.sheet::after, .dk::after{
    filter: drop-shadow(-1px -1px 2px rgba(10, 22, 40, .16)); }
.dk .tot b.empty{ padding: 0; background: none; border: 0; border-radius: 0;
    font-family: var(--serif); font-weight: 400;
    font-size: 15px; font-style: italic; color: var(--muted); }
.dk .r, .dk .tot{ position: relative;
    transition: background 420ms cubic-bezier(.25, .1, .25, 1),
                box-shadow 420ms cubic-bezier(.25, .1, .25, 1); }
.dk .r::before, .dk .tot::before{ content: ''; position: absolute;
    left: -14px; top: 6px; bottom: 6px; width: 2px; background: var(--gold);
    opacity: 0; transition: opacity 420ms cubic-bezier(.25, .1, .25, 1); }
.dk .r:has(dd:not(.empty)){ background: color-mix(in srgb, var(--gold-soft) 8%, transparent); }
.dk .r:has(dd:not(.empty))::before,
  .dk .tot:has(b:not(.empty))::before{ opacity: .55; }
.dk .r[data-just]{ background: color-mix(in srgb, var(--gold-soft) 28%, transparent); }
.dk .r[data-just]::before, .dk .tot[data-just]::before{ opacity: 1; width: 3px; }
.dk .tot[data-just]{ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 34%, transparent); }
@media (prefers-reduced-motion: reduce){
.dk .r, .dk .tot, .dk .r::before, .dk .tot::before,
    .qbay .in::before{ transition: none; }
}
.dk .r{ padding-left: 8px; padding-right: 8px;
    margin-left: -8px; margin-right: -8px; }
.dk .r::before, .dk .tot::before{ left: -8px; }
.rc-list .r, .rc-list .tot{
    opacity: 0; translate: 0 6px;
    transition: opacity 300ms cubic-bezier(.16, 1, .3, 1),
                translate 300ms cubic-bezier(.16, 1, .3, 1);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
.rc-list[data-rows] .r, .rc-list[data-rows] .tot{ opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce){
.rc-list .r, .rc-list .tot{ opacity: 1; translate: none; transition: none; }
}
.rc-list .r, .rc-list .tot{ transition-delay: calc(var(--i, 0) * 55ms); }
.dk .tot{ background: color-mix(in srgb, var(--gold-soft) 16%, transparent); }

/* == TWO FIXES TO THE COMPONENT, not lifts ================================
   `.pjm-body` is `flex:1 1 auto; overflow-y:auto` inside a `<form>` that has
   no rule at all, so the form is a block box and the flex chain from the sheet
   to the body was never connected. Nothing showed it on the dashboard because
   every pane there is short. The quote dialog's preview is a full docket and
   the sheet ran 76px past itself, its own footer outside it. */
.pjm-body{min-height:0}
.pjm-form{display:flex; flex-direction:column; flex:1 1 auto; min-height:0}

/* ══ ONE CURSOR, NEVER TWO ════════════════════════════════  24 Sep 2026 ══
   Sir: "The list a service popup for tradesperson has 2 cursors on at the
   same time." The painted caret blinked in EVERY empty field, so a pane with
   a title and a price showed two, and once a field was focused its real
   caret made a third. The painted one is a hint for where to start, so:
   only the first field of a group may show it, and none do while any field
   in the dialog has the real cursor. */
.pjm-f ~ .pjm-f .pjm-caret{display:none}
.pjm-form:focus-within .pjm-caret{opacity:0 !important; animation:none !important}

/* ══ THE POPUPS MATCH THE SIGN-IN ═════════════════════════════  24 Sep 2026 ══
   Sir: "the popup fonts need revamp", and, of three directions, "Match the
   sign-in". The dialogs spoke three voices: a title in widely spaced capitals,
   small Inter for labels and example text, and larger Caslon for what you
   typed, so your own words never looked like the example. Now, as on the
   "Create your account" card:
     title        Libre Caslon Display, 30px, sentence case
     labels       Inter 11px capitals, .12em, #6B7280
     fields       Inter 15px in a white pill with the search bar's #D0CCC4 edge,
                  and the example text in the same face and size, only lighter
     hints/notes  Inter, muted
   The painted blinking caret is retired with the underline fields it was
   invented for: a white pill already reads as a place to type. Scoped to
   `.pjm-board` so it wins over every older rule without !important. */
.pjm-board .pjm-head .pjm-t.sheet-t{
  font-family:"Libre Caslon Display","Libre Caslon Text",Georgia,serif; font-weight:400;
  font-size:30px; line-height:1.15; letter-spacing:0; text-transform:none; text-align:left}
.pjm-board .pjm-f label:not(.pjm-slot){font-family:Inter,sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:#6B7280; margin:0 0 6px; line-height:1.3}
.pjm-board .pjm-f input[type=text],.pjm-board .pjm-f textarea,.pjm-board .pjm-f select,.pjm-board .pjs-t{
  font-family:Inter,sans-serif; font-size:15px; line-height:22px; color:#1B2638;
  background:#fff; border:1px solid #D0CCC4; border-radius:999px; padding:12px 18px;
  transition:border-color .15s ease, box-shadow .15s ease}
.pjm-board .pjm-f textarea{border-radius:22px; padding:14px 18px; min-height:132px}
.pjm-board .pjm-f input[type=text]:focus,.pjm-board .pjm-f textarea:focus,.pjm-board .pjm-f select:focus,
.pjm-board .pjs-t[aria-expanded="true"],.pjm-board .pjs-t:focus-visible{
  border:1px solid #0F5A4F; box-shadow:0 0 0 3px rgba(15,90,79,.08); outline:none; padding-bottom:12px}
.pjm-board .pjm-f textarea:focus{padding-bottom:14px}
.pjm-board .pjs-t:hover{border-color:#0A1628}
.pjm-board .pjm-f ::placeholder{font-family:Inter,sans-serif; font-size:15px; letter-spacing:0; color:#9CA3AF; opacity:1}
.pjm-board .pjm-f textarea::placeholder{line-height:22px}
.pjm-board .pjm-hint{font-family:Inter,sans-serif; font-size:12px; line-height:1.5; color:#6B7280; margin-top:7px}
.pjm-board .pjm-note{font-family:Inter,sans-serif; font-size:13px; line-height:1.55}
.pjm-board .pjs-o{font-family:Inter,sans-serif; font-size:14px}
.pjm-board .pjm-caret{display:none}
/* the empty photograph frame centres its invitation; `.pjm-f label` was making it a block */
/* the photograph frames stay inside the sheet: the columns may shrink */
.pjm-board .pjm-shots{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.pjm-board .pjm-slot{min-width:0; box-sizing:border-box}
.pjm-board .pjm-f label.pjm-slot{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center}
.pjm-board .pjm-money{border:1px solid #D0CCC4; border-radius:999px; background:#fff; padding:0 18px; align-items:center;
  transition:border-color .15s ease, box-shadow .15s ease}
.pjm-board .pjm-money:hover{border-color:#D0CCC4}
.pjm-board .pjm-money:focus-within{border:1px solid #0F5A4F; box-shadow:0 0 0 3px rgba(15,90,79,.08)}
.pjm-board .pjm-money-s{padding:12px 4px 12px 0; font-family:Inter,sans-serif; font-size:15px; line-height:22px; color:#6B7280}
.pjm-board .pjm-f .pjm-money input[type=text],.pjm-board .pjm-f .pjm-money input[type=text]:focus{
  border:0; border-radius:0; background:transparent; box-shadow:none; padding:12px 0}