/* Result Page v2 belongs to the Directions design review only. */
.woa .woa-pass-preview { width: 100%; min-width: 0; }
/* The product canvas has its own height; review chrome lives outside it. */
.woa .woa-phone.woa-pass-scene { height: var(--review-phone-height, 844px); min-height: 0; background: #002664; color: #fff; font-family: "Helvetica Neue", "PingFang TC", -apple-system, BlinkMacSystemFont, "Microsoft JhengHei", sans-serif; overflow: visible; }
.woa .woa-pass-header { display: flex; flex: 0 0 calc(54px + var(--pass-extra) * .102); align-items: flex-start; padding: calc(10px + var(--pass-extra) * .0565) calc(20px + var(--pass-extra) * .0226) 0; }
.woa .woa-pass-logo { display: block; width: calc(156px + var(--pass-extra) * .0452); height: calc(43px + var(--pass-extra) * .0113); }
.woa .woa-pass-logo svg { display: block; width: calc(156px + var(--pass-extra) * .0452); height: calc(43px + var(--pass-extra) * .0113); }
/* One continuous editorial budget from 667 to 844px. Extra phone height first
   opens the ticket's content and controls; it does not switch all internals
   to a dense short profile until a single arbitrary breakpoint. */
.woa .woa-pass-scene { --pass-extra: clamp(0px, calc(100cqh - 667px), 177px); }
.woa .woa-pass-content { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; min-width: 0; min-height: 0; gap: calc(20px + var(--pass-extra) * .0452); padding: calc(8px + var(--pass-extra) * .0565) calc(20px + var(--pass-extra) * .0226) calc(10px + var(--pass-extra) * .0791); }
.woa .woa-listening-pass { position: relative; display: flex; flex: 0 0 auto; flex-direction: column; min-width: 0; padding: calc(16px + var(--pass-extra) * .0226) calc(20px + var(--pass-extra) * .0113) 0; border: 0; border-radius: 19px; background: #fff; color: #002664; text-align: left; box-shadow: none; }
.woa .woa-pass-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: calc(22px + var(--pass-extra) * .0113); }
.woa .woa-pass-label { margin: 0; color: #526078; font-size: 11px; font-weight: 700; line-height: 20px; letter-spacing: .12em; }
.woa .woa-pass-complete { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; color: #16765e; font-size: 12px; font-weight: 650; line-height: 20px; }
.woa .woa-pass-complete svg { display: block; flex: 0 0 15px; width: 15px; height: 15px; }
.woa .woa-pass-score-row { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; height: calc(145px + var(--pass-extra) * .3334); padding: calc(4px + var(--pass-extra) * .0452) 0; }
.woa .woa-pass-score-block { flex: 0 0 auto; }
.woa .woa-pass-score { display: flex; align-items: baseline; margin: 0; color: #002664; line-height: 1; font-variant-numeric: tabular-nums; }
.woa .woa-pass-score > strong { font-size: calc(88px + var(--pass-extra) * .1356); font-weight: 750; line-height: 1; letter-spacing: -.07em; }
.woa .woa-pass-score > span { margin-left: 7px; font-size: 29px; font-weight: 450; letter-spacing: -.04em; }
.woa .woa-pass-score-caption { display: block; margin-top: 3px; color: #526078; font-size: 13px; font-weight: 550; line-height: 20px; }
.woa .woa-pass-name { flex: 1 1 auto; min-width: 0; max-width: 180px; padding: calc(13px + var(--pass-extra) * .0113) calc(10px + var(--pass-extra) * .0113); border-radius: 12px; background: #eaf6fb; }
.woa .woa-pass-name > p { display: flex; align-items: center; gap: 5px; margin: 0 0 8px; color: #526078; font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; }
.woa .woa-pass-wave { display: block; flex: 0 0 15px; width: 15px; height: 18px; color: #00a1d1; }
.woa .woa-pass-name > h3 { margin: 0; font-size: 23px; font-weight: 750; line-height: 1.35; letter-spacing: -.045em; text-wrap: balance; }
.woa .woa-pass-ticket-edge { position: relative; flex: 0 0 auto; height: 1px; margin: 0 calc(-20px - var(--pass-extra) * .0113); border-top: 1px dashed #b7cad9; }
.woa .woa-pass-ticket-edge::before, .woa .woa-pass-ticket-edge::after { position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: #002664; content: ''; }
.woa .woa-pass-ticket-edge::before { left: -8px; }
.woa .woa-pass-ticket-edge::after { right: -8px; }
.woa .woa-pass-message { display: flex; flex-direction: column; gap: calc(10px + var(--pass-extra) * .0113); padding: calc(16px + var(--pass-extra) * .0452) 0 calc(16px + var(--pass-extra) * .0452); text-align: left; }
.woa .woa-pass-message > h3 { margin: 0; color: #002664; font-size: 20px; font-weight: 750; line-height: calc(28px + var(--pass-extra) * .01695); letter-spacing: -.045em; white-space: nowrap; }
.woa .woa-pass-message > p { margin: 0; color: #526078; font-size: 16px; font-weight: 400; line-height: calc(26px + var(--pass-extra) * .00565); letter-spacing: -.025em; }
.woa .woa-pass-message > p > span { display: block; }
.woa .woa-pass-actions { display: grid; flex: 0 0 auto; gap: 12px; }
.woa .woa-pass-action-context { min-width: 0; min-height: calc(40px + var(--pass-extra) * .0226); text-align: center; }
.woa .woa-pass-reward-copy { display: grid; gap: 2px; }
.woa .woa-pass-reward-copy > p { margin: 0; color: #bbd7e9; font-size: 13px; font-weight: 450; line-height: 20px; }
.woa .woa-pass-reward-copy > strong { display: block; color: #fff; font-size: 15px; font-weight: 550; line-height: 22px; letter-spacing: -.02em; }
.woa .woa-pass-action-status { margin: 0; color: #bbd7e9; font-size: 13px; line-height: 22px; text-align: center; }
.woa .woa-pass-action-context [hidden] { display: none; }
/* Equal side tracks keep the label at the geometric centre of the whole
   button; the arrow never participates in its text alignment. */
.woa .woa-pass-actions > .woa-pass-cta { display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; align-items: center; column-gap: 0; width: 100%; height: calc(52px + var(--pass-extra) * .0339); min-height: calc(52px + var(--pass-extra) * .0339); padding: 0 18px; border: 1px solid transparent; border-radius: 16px; font: inherit; font-size: 17px; font-weight: 650; line-height: 1.3; letter-spacing: -.3px; text-align: center; }
.woa .woa-pass-cta::before { display: block; width: 24px; height: 24px; content: ''; }
.woa .woa-pass-cta > span { min-width: 0; text-align: center; white-space: nowrap; }
.woa .woa-pass-cta > svg { display: block; width: 24px; height: 24px; justify-self: end; }
.woa .woa-pass-actions > .woa-pass-cta--share { border-color: #ffca00; background: #ffca00; color: #002664; }
.woa .woa-pass-actions > .woa-pass-cta--share:hover { background: #ffd227; border-color: #ffd227; }
.woa .woa-pass-actions > .woa-pass-cta--booking { border-color: #c3d9ed; background: transparent; color: #fff; }
.woa .woa-pass-actions > .woa-pass-cta--booking:hover { background: rgba(234,246,251,.08); }
.woa .woa-pass-booking-note { margin: 0; color: #9ebbd2; font-size: 11px; font-weight: 400; line-height: 16px; text-align: center; }
.woa .woa-pass-review-control { margin: 16px 0 0; text-align: left; }
.woa .woa-pass-review-control > label { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #002664; font-size: 13px; font-weight: 600; }
.woa .woa-pass-review-control select { min-width: 148px; min-height: 44px; padding: 8px 30px 8px 12px; border: 1px solid #6f819c; border-radius: 8px; background: #fff; color: #002664; font: inherit; }
.woa .woa-pass-review-control select:focus-visible { outline: 3px solid #00a1d1; outline-offset: 3px; }
.woa .woa-pass-review-control > p { margin: 8px 0 0; color: #526078; font-size: 12px; line-height: 1.6; }

/* Width is independent of the continuous height rhythm. */
@container woa-screen (max-width: 365px) {
  .woa .woa-pass-header, .woa .woa-pass-content { padding-inline: 18px; }
  .woa .woa-listening-pass { padding-inline: 18px; }
  .woa .woa-pass-score-row { gap: 8px; }
  .woa .woa-pass-name { padding-inline: 8px; }
  .woa .woa-pass-name > h3 { font-size: 22px; }
  .woa .woa-pass-ticket-edge { margin-inline: -18px; }
  .woa .woa-pass-message > h3 { font-size: 19px; white-space: normal; }
  .woa .woa-pass-message > p > span { display: inline; }
  .woa .woa-pass-cta > span { white-space: normal; }
}

/* Independent round results; no aggregate or ability threshold. */
.woa .woa-pass-q4 { margin:4px 0 0; font-size:13px; line-height:22px; color:#526078; white-space:nowrap; }
.woa .woa-pass-q4 strong { color:#002664; font-size:18px; font-weight:700; }

/* Game UX v1: two honest detail rows replace scattered score captions. */
.woa .woa-pass-v2 .woa-pass-score-row { height:calc(96px + var(--pass-extra) * .20); gap:16px; padding:6px 0; }
.woa .woa-pass-v2 .woa-pass-score > strong { font-size:calc(72px + var(--pass-extra) * .10); }
.woa .woa-pass-v2 .woa-pass-score > span { font-size:26px; }
.woa .woa-pass-v2 .woa-pass-name { padding:10px 12px; border:1px solid #b6e0eb; }
.woa .woa-pass-v2 .woa-pass-name > p { margin-bottom:4px; }
.woa .woa-pass-v2 .woa-pass-name > h3 { font-size:22px; }
.woa .woa-pass-rank { display:flex; gap:5px; margin-top:8px; }
.woa .woa-pass-rank i { height:3px; width:18px; border-radius:2px; background:#d7e2ed; }
.woa .woa-pass-rank i[data-active='true'] { background:#00a1d1; }
.woa [data-result-tier='traveller'] .woa-pass-name { border-color:#007e9f; }
.woa [data-result-tier='detective'] .woa-pass-name { border-color:#d8b642; background:#fff9e5; }
.woa [data-result-tier='detective'] .woa-pass-rank i[data-active='true'],
.woa [data-result-tier='collector'] .woa-pass-rank i[data-active='true'] { background:#9a6900; }
.woa [data-result-tier='collector'] .woa-pass-name { border:2px solid #ffca00; background:#fff5c8; }
.woa .woa-pass-details { display:grid; gap:7px; margin:6px 0 14px; }
.woa .woa-pass-detail-row { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; line-height:21px; }
.woa .woa-pass-detail-row > strong { font-weight:600; color:#526078; white-space:nowrap; }
.woa .woa-pass-detail-row > span { display:flex; gap:8px; }
.woa .woa-pass-item { display:inline-flex; gap:3px; font-size:13px; color:#002664; }
.woa .woa-pass-item b { font-size:14px; color:#9c641b; }
.woa .woa-pass-item[data-correct='true'] b { color:#16765e; }
.woa .woa-pass-v2 .woa-pass-content { gap:calc(16px + var(--pass-extra) * .04); }
.woa .woa-pass-v2 .woa-pass-message { padding-block:14px; gap:8px; }
.woa .woa-pass-v2 .woa-pass-message > p { line-height:25px; }
.woa .woa-pass-v2 .woa-pass-message > h3 { font-size:19px; line-height:27px; }
.woa .woa-pass-v2 .woa-pass-actions { gap:10px; }

.woa .woa-pass-v2 .woa-pass-header { justify-content:space-between; align-items:center; }
.woa .v2-pass-sfx { min-width:90px; height:44px; padding:8px; border:1px solid #5077a2; border-radius:12px; background:transparent; color:#bcd5ea; font-size:12px; font-weight:550; cursor:pointer; }
.woa .v2-pass-sfx:focus-visible { outline:3px solid #00a1d1; outline-offset:2px; }