/* ==========================================================================
   pr.stevenseboat.org — request form + tracking page.
   Loaded after /shared/tokens.css and /shared/base.css, so this file only
   holds what the two PR pages need beyond the shared components
   (.panel .field .lineitem .ext .chip .notice .kv .empty .skeleton …).
   Sizes come from the --fs-* scale in tokens.css.
   ========================================================================== */

/* ------------------------------------------------------------ page head ---- */
.pagetop { margin-bottom: 16px; }
.pagetop h1 { font-size: var(--fs-2xl); margin-top: 4px; }
.pagetop .lede { margin-top: 8px; }
.pagetop .toolbar { margin-top: 14px; }
.backlink { margin-bottom: 10px; display: inline-flex; }

/* First-paint skeleton: sized here so index.html carries no inline styles. */
.sk-title { height: 24px; width: 46%; margin-top: 12px; }
.sk-line { width: 86%; }
.sk-line.short { width: 54%; }
.sk-block { margin-top: 16px; }

/* -------------------------------------------------------------- honeypot ---
   Parked off-screen rather than display:none — bots that skip hidden inputs
   still fill this one in, while tabindex="-1" keeps real users out of it. */
.honeypot {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ----------------------------------------------------------- parts lines ---- */
.rowgap { margin-top: 12px; }
.grandrow { border-top: 1px solid var(--rule); margin-top: 16px; padding-top: 12px; }
.submitrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.submitrow .hint { font-size: var(--fs-xs); }

/* The submit row is the last thing in its panel, so the panel's own padding is the space
   below the button. Only add a gap above it when something VISIBLE sits there — the
   honeypot is position:absolute and the error box is [hidden], so an unconditional
   margin-top left the button off-centre (31px above, 19px below). */
.panel-bd > .field ~ .submitrow,
.panel-bd > .notice:not([hidden]) + .submitrow { margin-top: 12px; }

/* "Your recent requests" sits in its own <section> after the <form>, so the shared
   `.panel + .panel` rule cannot separate them — they are cousins, not siblings, and the
   two panels ended up flush against each other. The child selector means an empty
   section (nobody has submitted from this device) still adds no phantom space. */
.recenthost > .panel { margin-top: 16px; }

/* the running total keeps one line of height so the panel never jumps */
.ext b { min-height: 1lh; }

/* ------------------------------------------------------------ receipt ------ */
.sumlist { margin-top: 14px; }
.sumrow {
  display: flex; gap: 12px; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--rule-soft);
}
.sumrow:last-child { border-bottom: 0; }
.sumrow .part { overflow-wrap: anywhere; }
.sumrow .meta { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 1px; }
.sumtotal {
  display: flex; gap: 12px; justify-content: space-between; align-items: baseline;
  margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--rule); font-weight: 600;
}

/* tracking link + copy button */
.copyrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copyrow input {
  flex: 1 1 240px; min-width: 0;
  font-family: var(--font-mono); font-size: var(--fs-xs);
}

/* --------------------------------------------------- recent requests ------- */
.recentrow {
  display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--rule-soft);
}
.recentrow:first-child { padding-top: 0; }
.recentrow:last-child { border-bottom: 0; padding-bottom: 0; }
.recentrow .who { flex: 1 1 220px; min-width: 0; }
.recentrow .part { font-weight: 600; overflow-wrap: anywhere; }
.recentrow .meta { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.recentrow .acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.chipset { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.chip .n { font-family: var(--font-mono); font-size: var(--fs-2xs); opacity: .75; }

/* ------------------------------------------------------------ part cards ---- */
.partcard {
  border: 1px solid var(--rule-soft); border-radius: var(--radius);
  background: var(--sunk); padding: 14px;
}
.partcard + .partcard { margin-top: 12px; }
.partcard-hd { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.partcard-hd .name { font-weight: 600; flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.partcard .money-line { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 5px; }
.partcard .dates {
  display: flex; gap: 6px 18px; flex-wrap: wrap;
  margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-3);
}
.partcard .dates b { color: var(--ink-2); font-weight: 600; }
.partcard .notice { margin-top: 12px; }

/* --------------------------------------------------------------- steps -----
   Submitted -> Approved -> Ordered -> Received, or a red terminal state for
   denied / cancelled. Dots are drawn with ::before, connectors with ::after. */
.steps {
  display: flex; list-style: none; margin: 16px 0 2px; padding: 0;
}
.steps li {
  flex: 1 1 0; min-width: 0; position: relative;
  padding: 18px 4px 0; text-align: center;
  font-size: var(--fs-xs); color: var(--ink-3);
}
.steps li::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%; z-index: 1;
  background: var(--surface-2); border: 2px solid var(--rule); box-sizing: border-box;
}
.steps li::after {
  content: ""; position: absolute; top: 5px; left: 50%; width: 100%; height: 2px;
  background: var(--rule-soft);
}
.steps li:last-child::after { display: none; }

.steps li.done { color: var(--ink-2); }
.steps li.done::before { background: var(--ok); border-color: var(--ok); }
.steps li.done::after { background: var(--ok); }
.steps li.now { color: var(--accent-text); font-weight: 600; }
.steps li.now::before { background: var(--accent); border-color: var(--accent); }
.steps li.stopped { color: var(--bad); font-weight: 600; }
.steps li.stopped::before { background: var(--bad); border-color: var(--bad); }
.steps.terminal li.done::after { background: var(--bad); }

/* ------------------------------------------------------------- responsive --- */
@media (max-width: 680px) {
  .pagetop h1 { font-size: var(--fs-xl); }
  .panel-bd { padding: 14px; }
  .panel-hd { padding: 12px 14px; }
}

/* The 46px number gutter costs too much width on a phone: move the line
   number into a corner badge and give the fields the full width. */
@media (max-width: 560px) {
  .lineitem { padding: 32px 12px 12px; }
  .lineitem .idx {
    top: 0; left: 0; bottom: auto; width: 30px; height: 23px;
    padding-top: 0; align-items: center;
    border-bottom: 1px solid var(--rule-soft);
    border-radius: var(--radius) 0 var(--radius) 0;
  }
  .lineitem .drop { top: 1px; right: 4px; }
  .steps li { font-size: var(--fs-2xs); }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv dt { margin-top: 8px; }
}