/* Participation v1 screen (scripts/participation/participation.html). Visual baseline: the approved
   screen image; everything is scoped under .pv1 so the static site styles are untouched. */
.pv1-page{background:#f3f6fb}
.pv1{
  --pv-blue:#1553d6; --pv-blue-dk:#0f43b3; --pv-navy:#0b1f3a; --pv-text:#1d2430; --pv-muted:#5b6678;
  --pv-line:#dde4ef; --pv-card:#fff; --pv-member:#eef4fd; --pv-don:#fdf5e7; --pv-don-line:#f1e2c2; --pv-gold:#d9a441;
  --pv-buy:#eef3fb; --pv-ship:#edf7ef; --pv-ship-dk:#1f7a3a; --pv-danger:#d93025; --pv-radius:14px;
  max-width:1200px; margin:0 auto; padding:24px 16px 48px; color:var(--pv-text); box-sizing:border-box;
}
.pv1 *,.pv1 *::before,.pv1 *::after{box-sizing:border-box}
.pv1 [hidden]{display:none!important}   /* the hidden attribute must win over display:grid/flex below */
.pv1-grid{display:grid; grid-template-columns:minmax(0,0.62fr) minmax(0,1fr); gap:14px; align-items:start}
.pv1-card{background:var(--pv-card); border:1px solid var(--pv-line); border-radius:var(--pv-radius); padding:22px 20px; box-shadow:0 1px 2px rgba(11,31,58,.04)}
.pv1-h{display:flex; align-items:center; gap:12px; margin:0 0 14px; font-size:1.45rem; font-weight:700; color:var(--pv-navy)}
.pv1-h-sub{margin-top:26px; font-size:1.3rem}
.pv1-h3{display:flex; align-items:center; gap:10px; margin:0; font-size:1.2rem; color:var(--pv-navy)}
.pv1-ico{width:26px; height:26px; flex:none; fill:var(--pv-blue); stroke:none}
.pv1-btn .pv1-ico,.pv1-h3 .pv1-ico{width:20px; height:20px}
.pv1-ico-danger{fill:none; stroke:var(--pv-danger); stroke-width:2}
.pv1-submit .pv1-ico{fill:none; stroke:#fff; stroke-width:2.2}
.pv1-btn-primary .pv1-ico{fill:none; stroke:#fff; stroke-width:2}
.pv1-muted{color:var(--pv-muted); font-size:.93rem; line-height:1.55; margin:0 0 10px}
.pv1-lead{margin:-6px 0 14px; color:var(--pv-muted)}
.pv1-lead strong{color:var(--pv-text)}

/* fields */
.pv1-field{display:flex; flex-direction:column; gap:6px; margin:0 0 14px; min-width:0}
.pv1-field label{font-weight:700; font-size:.95rem}
.pv1 input:not([type=checkbox]),.pv1 select,.pv1 textarea{
  width:100%; min-height:42px; padding:9px 12px; font:inherit; color:var(--pv-text); background:#fff;
  border:1px solid #cfd8e5; border-radius:8px; }
.pv1 textarea{min-height:74px; resize:vertical}
.pv1 input:focus,.pv1 select:focus,.pv1 textarea:focus{outline:2px solid rgba(21,83,214,.35); border-color:var(--pv-blue)}
.pv1 [aria-invalid=true]{border-color:var(--pv-danger)!important}
.pv1-err{color:var(--pv-danger); font-size:.85rem; min-height:0}
.pv1-err:empty{display:none}
.pv1-check{width:22px; height:22px; accent-color:var(--pv-blue); flex:none; margin:2px 0 0}

/* consents */
.pv1-consents label{display:flex; gap:12px; align-items:flex-start; margin:0 0 10px; line-height:1.45; font-size:.95rem}
.pv1-consents input{width:20px; height:20px; flex:none; margin-top:2px; accent-color:var(--pv-blue)}
.pv1-safe{display:flex; gap:14px; align-items:center; margin-top:18px; padding:14px 16px; background:var(--pv-member); border-radius:10px; color:var(--pv-muted); font-size:.93rem}
.pv1-safe p{margin:0}
.pv1-ico-lock{fill:#9aa6b8}

/* action options */
.pv1-opt{border-radius:12px; padding:16px 18px; margin:0 0 14px; border:1px solid transparent}
.pv1-opt-member{background:var(--pv-member); border-color:#dfe8f7}
.pv1-opt-donation{background:var(--pv-don); border-color:var(--pv-don-line)}
.pv1-opt-donation > .pv1-opt-head .pv1-check{accent-color:var(--pv-gold)}
.pv1-opt-purchase{background:var(--pv-buy); border-color:#dfe8f7}
.pv1-opt-head{display:flex; gap:14px; align-items:flex-start; cursor:pointer}
.pv1-opt-head > span{display:flex; flex-direction:column; gap:4px}
.pv1-opt-title{font-size:1.3rem; font-weight:700; color:var(--pv-navy)}
.pv1-opt-text{font-size:1rem}
.pv1-opt-note{color:var(--pv-muted); font-size:.9rem; margin:6px 0 0}
.pv1-opt-body{margin:14px 0 0 36px}
.pv1-don-grid{display:grid; grid-template-columns:minmax(150px,190px) minmax(0,1fr); gap:10px 28px; align-items:start}
.pv1-money{display:flex; align-items:stretch}
.pv1-money input{border-top-right-radius:0!important; border-bottom-right-radius:0!important}
.pv1-money span{display:flex; align-items:center; padding:0 12px; border:1px solid #cfd8e5; border-left:0; border-radius:0 8px 8px 0; background:#f6f8fb}
.pv1-inline-check{display:flex; gap:10px; align-items:center; font-weight:700; margin-bottom:8px}
.pv1-row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.pv1-row3{display:grid; grid-template-columns:1.1fr 1.1fr .8fr; gap:14px}

/* purchase picker */
.pv1-picker{display:grid; grid-template-columns:120px minmax(0,1fr); gap:18px; background:#fff; border:1px solid var(--pv-line); border-radius:12px; padding:16px}
.pv1-cover{aspect-ratio:2/3; border-radius:4px; background:linear-gradient(180deg,#c9151b 0,#a50f14 55%,#1b0a0a 100%); color:#fff;
  display:flex; flex-direction:column; justify-content:space-between; padding:10px 8px; box-shadow:0 2px 6px rgba(0,0,0,.25); overflow:hidden}
.pv1-cover-title{font-weight:800; font-size:.8rem; line-height:1.15; text-transform:uppercase}
.pv1-cover-author{font-size:.55rem; text-align:center; letter-spacing:.04em; text-transform:uppercase}
.pv1-cover.pv1-cover-sm{width:30px; padding:2px; font-size:0}
.pv1-cover.pv1-cover-sm span{display:none}
.pv1-pick-foot{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.pv1-price{font-size:1.05rem}
.pv1-empty{color:var(--pv-muted)}

/* buttons */
.pv1-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:8px 18px; font:inherit; font-weight:600; border-radius:8px; border:1px solid transparent; cursor:pointer}
.pv1-btn-primary{background:var(--pv-blue); color:#fff}
.pv1-btn-primary:hover{background:var(--pv-blue-dk)}
.pv1-btn-ghost{background:#fff; border-color:var(--pv-line); color:var(--pv-text)}
.pv1-btn[disabled]{opacity:.6; cursor:progress}
.pv1-btn-lg{min-width:min(100%,260px); min-height:52px; font-size:1.1rem}
.pv1-icon-btn{background:none; border:0; padding:6px; cursor:pointer; line-height:0}

/* cart */
.pv1-cart-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin:22px 0 10px; flex-wrap:wrap}
.pv1-cart-wrap{background:#fff; border:1px solid var(--pv-line); border-radius:10px; overflow:hidden}
.pv1-cart{width:100%; border-collapse:collapse; font-size:.9rem}
.pv1-cart th{background:#f5f7fb; text-align:left; font-weight:700; padding:10px 8px; border-bottom:1px solid var(--pv-line)}
.pv1-cart td{padding:8px; border-bottom:1px solid var(--pv-line); vertical-align:middle}
.pv1-cart tr:last-child td{border-bottom:0}
.pv1-cart .pv1-book{display:flex; gap:8px; align-items:center}
.pv1-cart .pv1-book > span:last-child{min-width:150px; line-height:1.3}
.pv1-cart .pv1-cover-sm{height:42px; aspect-ratio:auto}
.pv1-cart input{width:68px!important; min-height:36px!important}
.pv1-cart-empty td{color:var(--pv-muted); text-align:center; padding:16px}
.pv1-total{display:flex; justify-content:flex-end; align-items:center; gap:16px; margin-top:12px; font-weight:700}
.pv1-total strong{background:#e3edfc; color:var(--pv-blue-dk); font-size:1.5rem; padding:8px 30px; border-radius:10px}
.pv1-fine{text-align:right; color:var(--pv-muted); font-size:.8rem; margin:6px 0 0}

/* shipping */
.pv1-ship{display:flex; gap:16px; background:var(--pv-ship); border:1px solid #d3ead9; border-radius:12px; padding:16px 18px; margin:0 0 18px}
.pv1-ico-truck{fill:var(--pv-ship-dk); width:30px; height:30px}
.pv1-ship-body{flex:1; min-width:0}
.pv1-ship-title{margin:0 0 4px; color:var(--pv-ship-dk); font-size:1.1rem}
.pv1-ship p{margin:0; color:var(--pv-muted); font-size:.92rem}
.pv1-ship-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 14px; margin-top:14px}
.pv1-span2{grid-column:1 / -1}

.pv1-submit{display:flex; justify-content:flex-end}
.pv1-status{max-width:1200px; margin:0 0 14px; padding:12px 16px; border-radius:10px; background:var(--pv-member); border:1px solid #cfdcf3}
.pv1-status[data-kind=error]{background:#fdeceb; border-color:#f3c3bf; color:#8c1d15}
.pv1-status[data-kind=ok]{background:var(--pv-ship); border-color:#bfe0c8; color:#14532b}
.pv1-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.pv1[data-state=INITIALIZING] .pv1-grid{opacity:.4}

/* review (second screen) */
.pv1-review .pv1-card{padding:24px 22px}
.pv1-validity{font-weight:600}
.pv1-rv-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0}
.pv1-rv-block{background:var(--pv-member); border:1px solid #dfe8f7; border-radius:12px; padding:14px 16px; min-width:0}
.pv1-rv-block:empty{display:none}
.pv1-rv-block h3{margin:0 0 8px; font-size:1.05rem; color:var(--pv-navy)}
.pv1-rv-block dl{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0; font-size:.93rem}
.pv1-rv-block dt{color:var(--pv-muted)}
.pv1-rv-block dd{margin:0; overflow-wrap:anywhere}
.pv1-rv-block ul{margin:0; padding-left:18px; font-size:.93rem}
.pv1-rv-money{background:#fff}
.pv1-rv-money table{width:100%; border-collapse:collapse}
.pv1-rv-money td{padding:6px 4px; border-bottom:1px solid var(--pv-line)}
.pv1-rv-money td:last-child{text-align:right; white-space:nowrap}
.pv1-rv-money tr.pv1-rv-total td{font-weight:700; border-bottom:0; font-size:1.1rem}
.pv1-tag{display:inline-block; padding:1px 8px; border-radius:999px; font-size:.78rem; font-weight:700; background:#e3edfc; color:var(--pv-blue-dk)}
.pv1-tag-blocked{background:#fdeceb; color:#8c1d15}
.pv1-tag-ok{background:var(--pv-ship); color:#14532b}
.pv1-blockers{background:#fff7e6; border:1px solid #f1d9a6; border-radius:10px; padding:12px 16px; margin:12px 0}
.pv1-blockers ul{margin:6px 0 0; padding-left:18px}
.pv1-gate{border-radius:10px; padding:12px 16px; margin:0 0 14px; border:1px solid #cfdcf3; background:var(--pv-member)}
.pv1-gate p{margin:0 0 8px}
.pv1-gate p:last-child{margin-bottom:0}
.pv1-gate .pv1-btn{margin-top:4px}
.pv1-gate[data-kind=ok]{background:var(--pv-ship); border-color:#bfe0c8; color:#14532b}
.pv1-gate[data-kind=warn]{background:#fff7e6; border-color:#f1d9a6}
.pv1-gate[data-kind=error]{background:#fdeceb; border-color:#f3c3bf; color:#8c1d15}
.pv1-rv-actions{display:flex; gap:12px; justify-content:space-between; align-items:center; flex-wrap:wrap}
.pv1-rv-actions .pv1-btn-lg{margin-left:auto}

/* result (third screen): one card per action, no global success */
.pv1-res-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.pv1-res h3{margin:0 0 8px; font-size:1.15rem; color:var(--pv-navy)}
.pv1-res dl{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0 0 8px; font-size:.95rem}
.pv1-res dt{color:var(--pv-muted)}
.pv1-res dd{margin:0; overflow-wrap:anywhere}
.pv1-res p{margin:6px 0 0}
.pv1-res ul{margin:6px 0 0; padding-left:18px}
.pv1-res-participation{grid-column:1 / -1}
.pv1-next{font-weight:600}
.pv1-res-grid > .pv1-fine,.pv1-res-grid > .pv1-rv-actions{grid-column:1 / -1}

/* ---- responsive ---- */
@media (max-width: 1024px){
  .pv1-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .pv1{padding:14px 12px 36px}
  .pv1-card{padding:18px 14px}
  .pv1-h{font-size:1.25rem}
  .pv1-opt{padding:14px 12px}
  .pv1-opt-body{margin-left:0}
  .pv1-don-grid,.pv1-ship-grid{grid-template-columns:1fr}
  .pv1-picker{grid-template-columns:72px minmax(0,1fr); gap:12px; padding:12px}
  .pv1-row3{grid-template-columns:1fr 1fr}
  .pv1-row3 .pv1-field:last-child{grid-column:1 / -1}
  .pv1-pick-foot .pv1-btn{width:100%}
  /* cart table becomes stacked rows */
  .pv1-cart thead{display:none}
  .pv1-cart,.pv1-cart tbody,.pv1-cart tr,.pv1-cart td{display:block; width:100%}
  .pv1-cart tr{position:relative; padding:10px 44px 10px 12px; border-bottom:1px solid var(--pv-line)}
  .pv1-cart td{border:0; padding:3px 0}
  .pv1-cart .pv1-book > span:last-child{min-width:0}
  .pv1-cart td[data-label]::before{content:attr(data-label) ": "; color:var(--pv-muted)}
  .pv1-cart td.pv1-cell-n{display:none}
  .pv1-cart td.pv1-cell-del{position:absolute; top:8px; right:6px; width:auto}
  .pv1-total{justify-content:space-between}
  .pv1-total strong{padding:6px 18px; font-size:1.3rem}
  .pv1-submit .pv1-btn{width:100%}
  .pv1-rv-grid,.pv1-res-grid{grid-template-columns:1fr}
  .pv1-rv-actions .pv1-btn,.pv1-gate .pv1-btn{width:100%}
}
@media (max-width: 380px){
  .pv1-row2,.pv1-row3{grid-template-columns:1fr}
}

/* ---- introductory selection cards + summary (visual reference: members-backend/Untitled.png) ---- */
.pv1-intro{grid-column:1 / -1; text-align:center; margin:0 0 4px}
.pv1-intro-title{margin:4px 0 6px; font-size:1.9rem; font-weight:700; color:var(--pv-navy)}
.pv1-intro-lead{margin:0 0 16px; color:var(--pv-muted)}
.pv1-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.pv1-pick-card{display:flex; flex-direction:column; align-items:center; gap:8px; background:var(--pv-card); border:1px solid var(--pv-line);
  border-radius:var(--pv-radius); padding:22px 18px 18px; box-shadow:0 1px 2px rgba(11,31,58,.04)}
.pv1-pick-card.is-selected{border:2px solid var(--pv-blue); background:var(--pv-member); padding:21px 17px 17px}
.pv1-pick-ico{display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:var(--pv-member)}
.pv1-pick-card.is-selected .pv1-pick-ico{background:var(--pv-blue)}
.pv1-pick-card.is-selected .pv1-pick-ico .pv1-ico{fill:#fff}
.pv1-pick-title{margin:4px 0 0; font-size:1.15rem; color:var(--pv-navy)}
.pv1-pick-text{margin:0 0 8px; color:var(--pv-muted); font-size:.93rem; flex:1}
.pv1-pick-btn{width:100%; justify-content:center; min-height:42px; border:1px solid var(--pv-blue); border-radius:8px; background:#fff; color:var(--pv-blue-dk); font-weight:700; cursor:pointer}
.pv1-pick-btn[aria-pressed=true]{background:var(--pv-blue); color:#fff}
.pv1-pick-btn:focus-visible{outline:3px solid rgba(21,83,214,.35); outline-offset:2px}
.pv1-summary{margin:16px 0 0; padding:16px 18px; border:1px solid var(--pv-line); border-radius:var(--pv-radius); background:#fff}
.pv1-sum-list{margin:10px 0 0}
.pv1-sum-row{display:flex; justify-content:space-between; gap:16px; padding:6px 0; border-bottom:1px solid var(--pv-line)}
.pv1-sum-row dt{color:var(--pv-muted)}
.pv1-sum-row dd{margin:0; font-weight:700; text-align:right}
.pv1-sum-empty{margin:10px 0 0; color:var(--pv-muted); font-size:.93rem}
.pv1-sum-total{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:12px; padding:12px 14px; border-radius:10px; background:var(--pv-buy); font-weight:700}
.pv1-sum-total strong{font-size:1.4rem; color:var(--pv-blue)}
@media (max-width: 720px){ .pv1-intro-title{font-size:1.5rem} .pv1-sum-row{flex-wrap:wrap} }