/* page-pass.css: the Pass ready page (#pass), spec/page-pass-landing.md 3.
   One centred column (V249 measures 510; dibs 520), outcome title, one bordered item card, actions, a quiet note.
   Tokens and components only (dibs.css, spec/system.md). */
.pl { width: 520px; max-width: 100%; margin: 72px auto var(--s-12); text-align: center; }
.pl-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto var(--s-4); border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted); }
.pl-mark .icon { width: 28px; height: 28px; stroke-width: 2; }
.pl-mark--ok { background: var(--positive-subtle); color: var(--positive); }
.pl-mark--warn { background: var(--warning-subtle); color: var(--warning); }
.pl-title { margin: 0; font: var(--t-title); outline: none; }
.pl-lead { margin: var(--s-2) auto 0; max-width: 440px; font: var(--t-body); color: var(--muted); }

/* the item card (V249's bordered row, ST171's fact strip) */
.pl-card { margin-top: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); text-align: left; }
.pl-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 52px; padding: var(--s-3) var(--s-4); }
.pl-card-head h2 { margin: 0; font: var(--t-item); min-width: 0; }
.pl-card-head .badge { flex-shrink: 0; }
.pl-card > :not(.pl-card-head) { margin-left: var(--s-4); margin-right: var(--s-4); }
.pl-card > :last-child { margin-bottom: var(--s-4); }
.pl-card-line { margin: 0 0 var(--s-2); font: var(--t-meta); color: var(--ink-2); }
.pl-card-line:first-of-type { margin-top: 0; }
.pl-card-line.pl-ink { font: var(--t-control); color: var(--ink); }
.pl-card-line.pl-muted { color: var(--muted); }
.pl-card-line strong { font-weight: 600; color: var(--ink); }
.pl-facts { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-8); margin-top: 0; margin-bottom: var(--s-3); padding: var(--s-3) 0 0; border-top: 1px solid var(--line); }
.pl-facts > div { min-width: 0; }
.pl-facts dt { font: var(--t-label); font-weight: 400; color: var(--muted); }
.pl-facts dd { margin: 2px 0 0; font: var(--t-control); color: var(--ink); }
.pl-allow { margin-top: 0; margin-bottom: var(--s-3); padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pl-allow li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font: var(--t-meta); color: var(--ink-2); }
.pl-allow li:last-child { border-bottom: 0; }
.pl-num { flex-shrink: 1; min-width: 0; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.pl-allow li > span:first-child { flex-shrink: 0; }

/* actions (ST170: next step solid, the other bordered, side by side) */
.pl-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-6); }
.pl-actions .btn { display: inline-flex; align-items: center; justify-content: center; }
.pl-more { margin: var(--s-3) 0 0; }
.pl-plain { margin-top: var(--s-6); text-align: left; font: var(--t-meta); color: var(--ink-2); }
.pl-plain p { margin: 0; }
.pl-status { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); font: var(--t-meta); color: var(--ink); text-align: left; }
.pl-fine { margin: var(--s-3) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }

/* the quiet note (V249's second box) */
.pl-note { display: flex; gap: var(--s-3); margin-top: var(--s-6); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--bg); text-align: left; }
.pl-note > .icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: var(--muted); }
.pl-note p { margin: 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.pl-note .pl-note-h { margin-bottom: 2px; font: var(--t-label); color: var(--ink); }
.pl-note a, .pl-foot a, .pl-status a { color: var(--accent); }
.pl-free { margin-top: var(--s-6); text-align: left; }
.pl-free > summary { font: var(--t-label); color: var(--muted); }
.pl-free > p { margin: var(--s-2) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.pl-foot { margin: var(--s-6) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.pl-sample { margin: var(--s-3) 0 0; font: var(--t-small); font-weight: 400; color: var(--muted); }

/* the code form (label above, input and button in one row, as Rails) */
.pl-form { margin-top: var(--s-6); text-align: left; }
.pl-form label { display: block; font: var(--t-label); color: var(--ink); }
.pl-inline { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.pl-input { flex: 1 1 auto; min-width: 0; height: 36px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.pl-input[aria-invalid="true"] { border-color: var(--danger); }
.pl-inline > button { flex-shrink: 0; }
.pl-form .field-error:empty { display: none; }
.pl-form .field-error .icon { width: 14px; height: 14px; }
.pl-form + .pl-card { margin-top: var(--s-4); }

@media (max-width: 599px) {
  .pl { margin-top: var(--s-6); }
  .pl-actions { flex-direction: column; align-items: stretch; }
  .pl-actions > * { width: 100%; }
  .pl-facts { flex-direction: column; gap: var(--s-2); }
  .pl-facts > div { display: flex; justify-content: space-between; gap: var(--s-4); }
  .pl-facts dd { margin: 0; text-align: right; }
}
@media (max-width: 379px) {
  .pl-inline { flex-direction: column; }
  .pl-inline > button { width: 100%; }
}