/* ============================================================
   DISPATCH — design signatures
   Royal ink · cool paper · airmail stripe · postage stamps
   ============================================================ */

/* Signature 1 — the airmail stripe.
   A thin band of alternating royal & vermilion hatching, the
   mark of an airmail envelope. Lives under the topbar and on
   accent edges. */
.airmail {
  height: 5px;
  background: repeating-linear-gradient(
    -55deg,
    #2337D6 0 16px,
    #FFFFFF 16px 22px,
    #DE3F2B 22px 38px,
    #FFFFFF 38px 44px
  );
}

/* Signature 2 — the postage stamp.
   KPI cards are cut like stamps: a paper rim perforated with
   punched holes, the metric printed inside. */
.stamp {
  position: relative;
  padding: 9px;
  border-radius: 4px;
  background:
    radial-gradient(circle 4.5px, #F2F4FB 97%, transparent 100%) -9px -9px / 18px 18px round,
    #FFFFFF;
  box-shadow: 0 1px 2px rgba(9, 14, 44, .05), 0 10px 26px -14px rgba(9, 14, 44, .18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.stamp:hover {
  transform: translateY(-3px) rotate(-.4deg);
  box-shadow: 0 2px 4px rgba(9, 14, 44, .06), 0 18px 34px -14px rgba(35, 55, 214, .32);
}
.stamp-inner {
  border: 1px solid #E3E7F4;
  border-radius: 2px;
  padding: 16px 18px;
  background: #fff;
  height: 100%;
}

/* Postmark — faint circular cancellation over featured stamps */
.postmark::after {
  content: "";
  position: absolute;
  top: -14px;
  right: -12px;
  width: 76px;
  height: 76px;
  border: 2px solid rgba(35, 55, 214, .14);
  border-radius: 50%;
  pointer-events: none;
  -webkit-mask: linear-gradient(115deg, #000 55%, transparent 56%);
          mask: linear-gradient(115deg, #000 55%, transparent 56%);
}

/* Ledger timeline rail */
.ledger-row { position: relative; padding-left: 26px; }
.ledger-row::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 22px;
  bottom: -6px;
  width: 1.5px;
  background: #E3E7F4;
}
.ledger-row:last-child::before { display: none; }
.ledger-dot {
  position: absolute;
  left: 2px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1.5px #E3E7F4;
}

/* Forms */
.field {
  width: 100%;
  border: 1.5px solid #E3E7F4;
  border-radius: 10px;
  background: #fff;
  padding: 10px 14px;
  font-size: 14px;
  color: #151B3E;
  transition: border-color .15s, box-shadow .15s;
}
.field::placeholder { color: #9AA1C2; }
.field:focus {
  outline: none;
  border-color: #2337D6;
  box-shadow: 0 0 0 3.5px rgba(35, 55, 214, .14);
}
.field-label {
  display: block;
  font-family: "Spline Sans Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #5C6488;
  margin-bottom: 7px;
}

/* Buttons */
.btn-royal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #2337D6;
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  padding: 10px 18px;
  border-radius: 10px;
  box-shadow: 0 10px 22px -8px rgba(35, 55, 214, .55);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.btn-royal:hover { background: #1626A8; transform: translateY(-1px); }
.btn-royal:active { transform: translateY(0); }
.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid #E3E7F4;
  color: #151B3E;
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 16px;
  border-radius: 10px;
  transition: border-color .15s, background .15s;
}
.btn-quiet:hover { border-color: #C7CEE8; background: #FAFBFE; }
.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid #F3C1BA;
  color: #DE3F2B;
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 16px;
  border-radius: 10px;
  transition: background .15s;
}
.btn-danger:hover { background: #FEF3F1; }

/* Accessibility & polish */
:focus-visible { outline: 2.5px solid #2337D6; outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(35, 55, 214, .18); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #C7CEE8; border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }
aside ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}