/* L4-18 Arrivals (/app): head with the builders sticker, what a brief is, the free sample ticket, the "Next briefs" arrivals
   board, prices and the pre-order form. The playbooks list below keeps its workspace.css styles. Tiles: gates.css. */
.arr-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end;gap:24px;padding:24px 0 48px;
  border-bottom:2px solid var(--line)}
.arr-copy .lead{margin:0 0 28px}
.arr-eyebrow{color:var(--ink-3)}
.arr-picto{width:18px;height:18px;color:var(--ember-fill)}
.arr-title{margin-bottom:20px}
.arr-actions{display:flex;flex-wrap:wrap;gap:12px}
.arr-art{width:112%;max-width:none;margin:0 -4% -6px -8%}
.arr-block{padding-top:72px}
.arr-block>.lead{margin-bottom:24px}

/* What is a brief: five numbered columns, top rule only (like "How a verdict is made"). */
.arr-points{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.arr-points li{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:2px solid var(--ink)}
.arr-n{font-size:14px;color:var(--link)}
.arr-points p{margin:0;font-size:16px;color:var(--ink-2)}
.arr-points b{display:block;margin-bottom:4px;font:600 20px/1.25 var(--sans);color:var(--ink)}

/* Free sample: a dark ticket with a perforated stub (dark in both themes, like the boarding pass). */
.ticket{display:grid;grid-template-columns:minmax(0,1fr) 230px;border-radius:24px;background:#0b0907;color:#f4efe6;
  border:1px solid #2a251f;box-shadow:0 24px 50px -24px #000a}
.ticket-main{display:flex;flex-direction:column;gap:18px;padding:34px 38px}
.ticket-k{margin:0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#ffbf47}
.ticket-title{font:800 clamp(28px,3.2vw,40px)/1.05 var(--display);letter-spacing:-.03em;color:#fff4de;max-width:24ch}
.ticket-lines{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticket-lines li{position:relative;padding-left:24px;font-size:17px;line-height:1.5;color:#e6dac4}
.ticket-lines li::before{content:'';position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:2px;background:#ff6a2b}
.ticket-lines a{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;color:#ffbf47;text-decoration:none;white-space:nowrap}
.ticket-lines a:hover{text-decoration:underline}
.ticket-note{margin:0;font-size:14px;color:#a99d88}
.ticket-cta{margin:0}
.ticket-cta .btn{display:inline-flex;align-items:center;gap:6px;--btn:#ffbf47;--on-btn:#241d10} /* amber: the ticket is dark in both themes */
.ticket-stub{position:relative;margin:0;padding:34px 26px;display:grid;align-content:start;gap:18px;border-left:2px dashed #3a342c;
  border-radius:0 23px 23px 0;background:#14110d}
.ticket-stub::before,.ticket-stub::after{content:'';position:absolute;left:-13px;width:24px;height:24px;border-radius:50%;background:var(--bg)}
.ticket-stub::before{top:-13px}
.ticket-stub::after{bottom:-13px}
.ticket-stub dt{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#a99d88}
.ticket-stub dd{margin:2px 0 0;font:700 17px/1.3 var(--sans);color:#fff4de}
.ticket-stub dd a{color:#ffbf47}

/* Next briefs: an ARRIVALS board, the twin of the departures board on the home page. */
.arr-board{padding:22px clamp(18px,2.6vw,34px) 8px;border-radius:24px;background:linear-gradient(#ffffff0a,#0000 120px),#070605;
  color:#ffbf47;border:1px solid #000;box-shadow:inset 0 1px 0 #ffffff14,0 0 0 7px #1d1a16,0 0 0 8px #34302a,0 34px 70px -24px #000d}
.arr-board-head{display:flex;align-items:center;gap:12px;margin:0 0 14px;font:800 clamp(26px,3vw,40px)/1 var(--display);
  letter-spacing:-.03em;color:#fff4de}
.arr-board-picto{width:.85em;height:.85em;color:#ffbf47}
.arr-board-meta{margin-left:auto;font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#a99d88}
.arr-rows{list-style:none;margin:0;padding:0}
.arr-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:20px;padding:16px 0;
  border-top:1px solid #ffffff12;--tw:26px;--g:3px}
.arr-what{display:flex;flex-direction:column;gap:6px;min-width:0}
.arr-what b{font:700 18px/1.3 var(--sans);color:#fff4de}
.arr-events{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:14px;line-height:1.5}
.arr-events a:not(:last-child)::after{content:'·';margin-left:10px;color:#6b6358}
.arr-events a{color:#d9ccb6;text-decoration:none}
.arr-events a:hover{color:#fff;text-decoration:underline;text-decoration-color:#ffbf47}
.arr-count{padding-top:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:#ffbf47}

/* Prices: two fares, then the pre-order form (opened by the fare buttons when checkout is not live). */
.fares{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:880px}
.fare{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:20px;background:var(--bg-2);border:1px solid var(--line);
  border-top:4px solid var(--accent)}
.fare p{margin:0;color:var(--ink-2)}
.fare .fare-k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.fare .fare-price{font-size:17px}
.fare-price b{margin-right:6px;font:500 46px/1 var(--mono);letter-spacing:-.03em;color:var(--ink)}
.fare .btn{align-self:flex-start;margin-top:auto}
.arrivals .preorder{margin-top:24px;max-width:880px}
.preorder.panel{display:grid;gap:10px;padding:28px}
.preorder .h3{margin:0 0 6px}
.preorder label{font-size:15px;font-weight:700}
.preorder input,.preorder select{width:100%}
.po-pay{margin:8px 0 0;padding:0;border:0;display:grid;gap:4px;min-width:0}
.po-pay legend{margin-bottom:6px;padding:0;font-size:15px;font-weight:700}
.preorder .po-choice{display:flex;align-items:center;gap:12px;min-height:44px;font-weight:500}
.preorder .po-choice input{width:20px;height:20px;min-height:0;flex:none;accent-color:var(--accent)}
.preorder .btn{justify-self:start;margin-top:8px}
.preorder .consent{margin:4px 0 0}
.ap-playbooks .ap-head{margin-bottom:20px}
.ap-more{margin-top:16px}
.ap-more summary{display:flex;align-items:center;min-height:48px;font-weight:700;color:var(--link)}
.ap-more[open] summary{margin-bottom:16px}

@media(max-width:1100px) {
  .arr-points{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px) {
  .arr-head{grid-template-columns:1fr;padding-bottom:40px}
  .arr-art{order:-1;width:100%;margin:0}
  .arr-block{padding-top:52px}
  .arr-points{grid-template-columns:1fr 1fr}
  .ticket{grid-template-columns:1fr}
  .ticket-main{padding:26px 22px}
  .ticket-stub{grid-template-columns:1fr 1fr;padding:22px;border-left:0;border-top:2px dashed #3a342c;border-radius:0 0 23px 23px}
  .ticket-stub::before{top:-13px;left:-13px}
  .ticket-stub::after{top:-13px;bottom:auto;left:auto;right:-13px}
  .fares{grid-template-columns:1fr}
}
@media(max-width:560px) {
  .arr-points{grid-template-columns:1fr}
  .arr-row{grid-template-columns:auto minmax(0,1fr);gap:14px;--tw:22px}
  .arr-count{grid-column:2;padding-top:0}
  .arr-events{flex-direction:column;gap:4px}
  .arr-events a:not(:last-child)::after{content:none}
  .arr-board-meta{display:none}
  .preorder.panel{padding:20px}
}