/* The home hero receipt (hero-receipt.js): a real paper receipt. Perforated head, typeset lines with dotted leaders,
   the four check groups ticking in turn, one stamp pressed inside the paper, then a small lock sealing it. The words,
   the example note and the technical receipt are unchanged; only the drawing and the motion are new. The paper stays
   paper in both themes (it sits on the navy hero). Reduced motion shows every end state at once. */
.hr { --hr-ink: #10243A; --hr-ink-2: #4A5E73; --hr-rule: #D5DEE6; --hr-ok: #1E7A4F; --hr-no: #C8102E; --hr-paper: #FFFFFF;
  position: relative; filter: drop-shadow(0 18px 38px rgb(4 14 28 / 0.35)); }
.hr-paper { position: relative; background: var(--hr-paper); color: var(--hr-ink); padding: 26px 26px 30px; font-family: var(--sans);
  /* perforated head, solid body, torn foot: three mask layers, so the navy shows only through the cuts */
  -webkit-mask: radial-gradient(circle 4px at 8px 0, #0000 97%, #000) 0 0 / 16px 10px repeat-x,
                linear-gradient(#000 0 0) 0 10px / 100% calc(100% - 20px) no-repeat,
                conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 16px 10px repeat-x;
          mask: radial-gradient(circle 4px at 8px 0, #0000 97%, #000) 0 0 / 16px 10px repeat-x,
                linear-gradient(#000 0 0) 0 10px / 100% calc(100% - 20px) no-repeat,
                conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 16px 10px repeat-x; }
.hr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1.5px solid var(--hr-ink); }
.hr-title { font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; flex: none; }
.hr-id { font: 500 11.5px/1.4 var(--mono); color: var(--hr-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  /* a fixed, left-anchored box as wide as a receipt id: the id types in rightward and nothing moves (0 layout shifts) */
  width: 26ch; max-width: 100%; margin-left: auto; text-align: left; }
.hr-id.typed { color: var(--hr-ink); }

/* typeset lines: label ...... value */
.hr-rows { margin: 0; display: grid; gap: 9px; }
.hr-rows > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.hr-rows > div::before { content: ""; order: 1; flex: 1 1 12px; min-width: 12px; border-bottom: 1.5px dotted var(--hr-rule); transform: translateY(-4px); }
.hr-rows dt { order: 0; flex: none; color: var(--hr-ink-2); font-size: 13.5px; }
.hr-rows dd { order: 2; margin: 0; font: 600 13px/1.35 var(--mono); text-align: right; overflow-wrap: anywhere; min-width: 0; }
.hr-rows dd.off { color: var(--hr-no); }

/* the checks, in their four groups */
.hr-checks { margin: 18px 0 0; padding-top: 14px; border-top: 1.5px dashed var(--hr-rule); }
.hr-checks-head { display: block; font: 500 11.5px/1.3 var(--mono); color: var(--hr-ink-2); margin-bottom: 10px; }
.hr-groups { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.hr-groups li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--hr-ink-2); transition: color 0.25s; min-width: 0; }
.hr-mark { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px dashed var(--hr-rule); display: grid; place-items: center; transition: background 0.2s, border-color 0.2s; }
.hr-mark svg { width: 12px; height: 12px; }
.hr-mark path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.hr-groups li.pass { color: var(--hr-ink); }
.hr-groups li.pass .hr-mark { background: var(--hr-ok); border: 1.5px solid var(--hr-ok); }
.hr-groups li.fail { color: var(--hr-no); font-weight: 600; }
.hr-groups li.fail .hr-mark { background: var(--hr-no); border: 1.5px solid var(--hr-no); }
.hr-groups li.pass path, .hr-groups li.fail path { animation: hr-draw 320ms cubic-bezier(0.3, 0.8, 0.3, 1) forwards; }
.hr-groups li.skip { color: #9AABBB; text-decoration: line-through; text-decoration-color: #C9D5DE; }
.hr-groups li.on .hr-mark { border-color: var(--hr-ink); border-style: solid; animation: hr-pulse 600ms ease-in-out infinite; }
@keyframes hr-draw { to { stroke-dashoffset: 0; } }
@keyframes hr-pulse { 50% { transform: scale(0.82); } }

/* the verdict: one stamp, pressed inside the paper, and the lock that seals it */
.hr-verdict { margin-top: 18px; padding-top: 16px; border-top: 1.5px solid var(--hr-ink); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 58px; }
.hr-stamp { text-align: center; min-width: 6.2em; font: 800 17px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--hr-ok); border: 2.5px solid currentColor; border-radius: 7px; padding: 9px 12px 8px;
  transform: rotate(-6deg); opacity: 0; position: relative; }
.hr-stamp::after { content: ""; position: absolute; inset: -7px; border-radius: 11px; border: 2px solid currentColor; opacity: 0; }
.hr-stamp.deny { color: var(--hr-no); }
.hr-stamp.on { opacity: 0.94; animation: hr-press 520ms cubic-bezier(0.3, 1.4, 0.5, 1) both; }
.hr-stamp.on::after { animation: hr-ink 640ms ease-out 240ms both; }
@keyframes hr-press { 0% { transform: rotate(-12deg) scale(1.8); opacity: 0; } 60% { transform: rotate(-5deg) scale(0.94); opacity: 0.94; } 100% { transform: rotate(-6deg) scale(1); opacity: 0.94; } }
@keyframes hr-ink { 0% { opacity: 0.5; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.3); } }
.hr-reason { font-size: 12.5px; font-weight: 600; color: var(--hr-no); line-height: 1.35; }
.hr-reason small { display: block; font: 500 11px/1.4 var(--mono); color: var(--hr-ink-2); margin-top: 2px; }
.hr-seal { width: 40px; height: 40px; flex: none; opacity: 0.18; transition: opacity 0.3s; }
.hr-seal svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hr-seal .ring { fill: none; stroke: currentColor; stroke-width: 2; }
.hr-seal .body { fill: currentColor; }
.hr-seal .hole { fill: #fff; }
/* the padlock: open (shackle raised) until the receipt is sealed, then it drops shut */
.hr-seal .shackle { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; transform: translateY(-3.5px); transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1); }
.hr-seal { color: var(--hr-ink); }
.hr-seal.sealed { opacity: 1; color: var(--hr-ok); }
.hr-seal.sealed.deny { color: var(--hr-no); }
.hr-seal.sealed .shackle { transform: none; }
.hr-seal .pulse { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hr-seal.sealed .pulse { animation: hr-ring 700ms ease-out 200ms both; }
@keyframes hr-ring { 0% { opacity: 0.6; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.6); } }

/* under the paper: two buttons at a time, the example note, the technical receipt */
.hr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hr-actions .btn { font-family: var(--sans); }
/* wide enough for its longest label, so relabelling it never moves the button beside it */
.hr-actions #verify { min-width: 15.5em; justify-content: center; }
.hr-actions .btn[hidden] { display: none !important; }
/* on the navy hero the danger button is a light outline, readable, still clearly the "take it away" action */
.hr-actions .btn-danger { background: transparent; color: #FFB3BE; border: 1px solid rgb(255 138 154 / 0.55); }
.hr-actions .btn-danger:hover { background: rgb(255 138 154 / 0.12); }
.hr .ex-note { margin: 12px 0 0; font: 500 11.5px/1.5 var(--mono); color: #B8C7D6; max-width: none; }
.hr details.tech { margin-top: 10px; }
.hr details.tech summary { cursor: pointer; font-weight: 600; font-size: 14px; color: #9DB2FF; }
.hr details.tech[open] { background: var(--hr-paper); color: var(--hr-ink); border-radius: 10px; padding: 14px 16px; }
.hr details.tech[open] summary { color: #2447F0; margin-bottom: 10px; }

@media (max-width: 460px) {
  .hr-paper { padding: 22px 18px 26px; }
  /* phones: the two buttons stack full width, so relabelling Verify still moves nothing */
  .hr-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hr-actions #verify { min-width: 0; }
  .hr-actions .btn { justify-content: center; }
  .hr-groups { grid-template-columns: 1fr; }
  .hr-rows dt { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hr-stamp.on, .hr-stamp.on::after, .hr-seal.sealed .pulse, .hr-groups li.on .hr-mark { animation: none; }
  .hr-groups li.pass path, .hr-groups li.fail path { animation: none; stroke-dashoffset: 0; }
  .hr-seal .shackle { transition: none; }
}