/* Pin High — sign-up + account pages (/register, /register/done, /account).
   Ours, on top of DWCo's global stylesheet (tokens, header, footer, base). Same
   dialect: white page, olive + lime, Satoshi display, Montserrat body, the
   pill-and-arrow button, cloud-colored inputs like the contact page. */

.portal{padding:64px 0 120px;color:var(--olive-soft)}
.portal-layout{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:72px;align-items:start}
.portal-main{min-width:0;max-width:640px}
.portal-side{position:sticky;top:120px}
.portal--single .portal-main{max-width:860px}

/* ---------- type ---------- */
.portal .section-label{margin-bottom:14px}
.portal h1{color:var(--olive);font-family:var(--font-display);font-size:40px;font-weight:700;line-height:1.15;margin:0 0 14px;text-wrap:balance}
.portal h2{color:var(--olive);font-family:var(--font-display);font-size:24px;font-weight:700;line-height:1.2;margin:0}
.portal .lede{font-size:18px;line-height:1.5;margin:0 0 10px;max-width:56ch}
.portal .lede b{color:var(--olive);font-weight:600}
.portal .meter{color:var(--lime);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0 0 34px}
.portal p{margin:0}
.portal a{color:var(--olive);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--lime) 60%,transparent);text-underline-offset:3px}
.portal a:hover{text-decoration-color:var(--lime)}
.portal a.arrow-button,.portal a.arrow-button:hover{color:var(--white);text-decoration:none}
.fine{font-size:13px;line-height:1.55;color:color-mix(in srgb,var(--olive-soft) 82%,transparent);max-width:60ch;margin-top:22px}
.muted{color:color-mix(in srgb,var(--olive-soft) 70%,transparent)}
.ok{color:var(--lime);font-weight:600}
.err{color:var(--alert);font-size:15px;line-height:1.45;margin-top:14px;border-left:3px solid var(--alert);background:var(--cloud);border-radius:12px;padding:12px 16px;max-width:60ch}
.err:empty{display:none}
.note{background:color-mix(in srgb,var(--lime) 16%,var(--cloud));color:var(--olive);border-radius:12px;padding:12px 16px;font-size:15px;font-weight:600;line-height:1.45;margin-top:14px}
.note:empty{display:none}

/* ---------- signed-in chip ---------- */
.who{display:inline-flex;align-items:center;gap:10px;background:var(--cloud);border-radius:999px;padding:6px 8px 6px 14px;font-size:13px;color:var(--olive);margin-bottom:26px}
.who b{font-weight:600}
.who button{background:var(--white);border:0;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;color:var(--olive-soft);cursor:pointer}
.who button:hover{color:var(--olive)}

/* ---------- steps ---------- */
.step[hidden]{display:none}
.sub[hidden]{display:none}

/* ---------- the pill-and-arrow button (DWCo's, minus the scoped attributes) ---------- */
.arrow-button{color:var(--white);transition:transform var(--motion-base) var(--motion-ease),opacity var(--motion-fast) ease;align-items:center;gap:4px;font-size:16px;font-weight:600;display:inline-flex;font-family:var(--font-body);border:0;background:none;padding:0;cursor:pointer;text-decoration:none!important;line-height:1.2}
.arrow-button>span:first-child{background:var(--olive);min-height:56px;transition:background var(--motion-fast) ease,padding var(--motion-base) var(--motion-ease);border-radius:999px;place-items:center;padding:0 32px;display:grid;white-space:nowrap}
.arrow-button .arrow{border:6px solid var(--olive);background:var(--lime);width:56px;height:56px;color:var(--white);transition:transform var(--motion-base) var(--motion-ease),background var(--motion-fast) ease;border-radius:50%;place-items:center;font-size:21px;display:grid;flex:none}
.arrow-button .chevron{width:1em;height:1em;display:block}
.arrow-button:hover{transform:translateY(-2px)}
.arrow-button:hover>span:first-child{background:var(--olive-soft);padding-inline:35px}
.arrow-button:hover .arrow{transform:translate(4px)}
.arrow-button:active{transform:translateY(0)scale(.985)}
.arrow-button.inverse>span:first-child{background:var(--lime)}
.arrow-button.inverse .arrow{border-color:var(--lime);background:var(--olive)}
/* a button that can't work stays on screen, greyed, with its reason beside it */
.arrow-button[aria-disabled=true]{opacity:.42;pointer-events:none;transform:none}
.arrow-button.busy{pointer-events:none}
.arrow-button.busy>span:first-child{background:var(--olive-soft)}
.actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px}
.actions .why{font-size:14px;color:var(--olive-soft);opacity:.85;max-width:34ch;line-height:1.4}
.actions .why:empty{display:none}
.links{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;font-size:15px}
.links button,.linkish{background:none;border:0;padding:0;color:var(--olive);font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--lime) 60%,transparent);text-underline-offset:3px}
.links button:hover,.linkish:hover{text-decoration-color:var(--lime)}
.quiet{background:none;border:0;padding:0;color:var(--olive-soft);font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--olive-soft) 30%,transparent);text-underline-offset:3px}
.quiet:hover{color:var(--olive)}

/* ---------- two doors ---------- */
.doors{display:inline-flex;background:var(--cloud);border-radius:999px;padding:4px;margin:0 0 26px}
.doors button{border:0;background:none;border-radius:999px;padding:0 22px;height:42px;font-size:15px;font-weight:600;color:var(--olive-soft);cursor:pointer;transition:background var(--motion-fast) ease,color var(--motion-fast) ease}
.doors button[aria-pressed=true]{background:var(--white);color:var(--olive);box-shadow:0 1px 0 color-mix(in srgb,var(--olive-soft) 10%,transparent),0 6px 18px -12px #11140680}
.doors button[disabled]{opacity:.5;cursor:not-allowed}
.doors-why{font-size:13px;color:var(--olive-soft);opacity:.8;margin:-16px 0 24px}
.doors-why:empty{display:none}

/* ---------- fields (the contact page's inputs) ---------- */
.field{display:block;min-width:0}
.field>span:not(.hint):not(.verified),.field-label{color:var(--olive);letter-spacing:.05em;text-transform:uppercase;margin:0 0 8px 2px;font-size:12px;font-weight:700;display:block}
.field>span small,.field-label small{text-transform:none;letter-spacing:0;font-weight:600;color:color-mix(in srgb,var(--olive-soft) 70%,transparent)}
.field input,.field select,.field textarea{border:1px solid color-mix(in srgb,var(--olive-soft) 12%,transparent);background:var(--cloud);width:100%;color:var(--olive);transition:border-color var(--motion-fast) ease,background var(--motion-fast) ease;border-radius:16px;outline:0;font-size:16px;font-family:var(--font-body);height:56px;padding:0 18px;appearance:none;-webkit-appearance:none}
.field textarea{height:96px;padding:14px 18px;resize:vertical}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23445218' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px;padding-right:44px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--lime);background:var(--white)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:color-mix(in srgb,var(--lime) 56%,transparent)}
.field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb,var(--olive-soft) 45%,transparent)}
.field input[readonly]{background:var(--white);border-style:dashed;color:var(--olive-soft)}
.field .verified{display:inline-flex;align-items:center;gap:6px;color:var(--lime);font-size:13px;font-weight:700;margin:8px 0 0 2px}
.field .hint{display:block;font-size:13px;color:color-mix(in srgb,var(--olive-soft) 70%,transparent);margin:8px 0 0 2px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:6px}
.fields .span{grid-column:1/-1}
.fields-title{grid-column:1/-1;color:var(--olive);font-family:var(--font-display);font-size:18px;font-weight:700;margin:16px 0 -6px}
.fields-title small{display:block;font-family:var(--font-body);font-size:13px;font-weight:600;color:color-mix(in srgb,var(--olive-soft) 70%,transparent);margin-top:4px}
.code-input{letter-spacing:.32em;font-family:var(--font-board-data);font-size:30px!important;font-weight:600;max-width:320px;height:64px!important;text-align:center}
.prefix{position:relative}
.prefix input{padding-left:36px}
.prefix::after{content:"@";position:absolute;left:18px;bottom:0;height:56px;display:grid;place-items:center;color:color-mix(in srgb,var(--olive-soft) 60%,transparent);font-size:16px;pointer-events:none}

/* ---------- lists / rows ---------- */
.perks{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:10px;max-width:520px}
.perks li{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--olive-soft) 10%,transparent)}
.perks b{color:var(--olive);font-weight:700;font-size:15px}
.perks span{font-size:15px}
.rows{margin:0;display:grid}
.rows>div{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--olive-soft) 10%,transparent);font-size:16px}
.rows>div:last-child{border-bottom:0}
.rows dt{color:var(--olive-soft);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding-top:3px}
.rows dd{margin:0;color:var(--olive);font-weight:600;line-height:1.4}
.rows dd small{display:block;font-weight:500;color:var(--olive-soft);font-size:14px;margin-top:2px}

/* ---------- cards ---------- */
.card{background:var(--white);border:1px solid color-mix(in srgb,var(--olive-soft) 14%,transparent);border-radius:18px;padding:26px 28px;margin-top:26px}
.card.soft{background:var(--cloud);border-color:transparent}
.card-head{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap}
.card-head h2{font-size:22px}
.card-head .amount{font-family:var(--font-display);font-size:26px;color:var(--olive);font-weight:700}
.card-sub{margin-top:6px;font-size:15px;color:var(--olive-soft)}
.card-sub a,.card-sub button{margin-left:6px}
.lines{margin:22px 0 0;display:grid;gap:10px;font-size:16px}
.lines>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--olive-soft) 10%,transparent)}
.lines>div.total{border-top:2px solid color-mix(in srgb,var(--lime) 58%,transparent);color:var(--olive);font-weight:700;font-size:18px}
.lines dd{margin:0;font-weight:600;color:var(--olive)}
.refund{margin-top:18px;font-size:15px;line-height:1.5;color:var(--olive-soft)}
/* ---------- which day? (two-day events: one tap card per playing day + Both days) ---------- */
.day-pick{border:0;padding:0;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.day-pick legend{grid-column:1/-1;font-family:var(--font-display);font-size:22px;color:var(--olive);font-weight:700;margin-bottom:2px;padding:0}
.day-pick .day{position:relative;display:grid;gap:4px;background:var(--white);border:2px solid color-mix(in srgb,var(--olive-soft) 16%,transparent);border-radius:18px;padding:18px 20px 16px;cursor:pointer;color:var(--olive);min-height:118px;transition:border-color .15s,box-shadow .15s}
.day-pick .day:hover{border-color:color-mix(in srgb,var(--lime) 70%,transparent)}
.day-pick .day:has(input:checked){border-color:var(--lime);box-shadow:0 0 0 3px color-mix(in srgb,var(--lime) 30%,transparent)}
.day-pick .day:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--olive) 40%,transparent);outline-offset:2px}
.day-pick .day input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.day-pick .day.is-full{cursor:not-allowed;background:var(--cloud);border-color:transparent;color:var(--olive-soft)}
.day-pick .day.is-full input{cursor:not-allowed}
.day-pick .day-name{font-family:var(--font-display);font-size:24px;font-weight:700;line-height:1.1}
.day-pick .day-date{font-size:14px;font-weight:600;color:var(--olive-soft)}
.day-pick .day-start{font-size:16px;font-weight:600;margin-top:6px}
.day-pick .day-field{font-size:13px;font-weight:600;color:var(--olive-soft);margin-top:2px}
.day-pick .day:has(input:checked) .day-name::after{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--lime);margin-left:10px;vertical-align:middle}
.day-pick .day.is-full .day-field{color:#b8503c}
.day-pick .day.both{grid-column:1/-1;min-height:0;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;padding:14px 20px}
.day-pick .day.both .day-name{font-size:18px;grid-row:1/3;align-self:center}
.day-pick .day.both .day-start{margin-top:0;font-size:15px}
.day-pick .day.both .day-field{margin-top:0}
@media (max-width:520px){.day-pick{grid-template-columns:1fr}}

/* ---------- the event sidebar ---------- */
.event-card{background:var(--cloud);border-radius:18px;padding:28px 28px 26px}
.event-card .side-label{color:var(--lime);letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px;font-size:12px;font-weight:600}
.event-card h2{font-size:26px;line-height:1.15}
.event-card .venue{color:var(--olive-soft);font-size:15px;font-weight:600;margin:6px 0 0}
.event-card dl{margin:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
.event-card dt{color:var(--olive-soft);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.event-card dd{margin:4px 0 0;color:var(--olive);font-weight:600;font-size:15px;line-height:1.35}
.event-card .field-line{margin-top:22px;padding-top:18px;border-top:2px solid color-mix(in srgb,var(--lime) 58%,transparent);font-size:14px;color:var(--olive);font-weight:600}
.event-card .field-line .bar{height:6px;border-radius:3px;background:color-mix(in srgb,var(--olive-soft) 14%,transparent);margin:10px 0 0;overflow:hidden}
.event-card .field-line .bar i{display:block;height:100%;background:var(--lime);border-radius:3px;width:0;transition:width var(--motion-slow) var(--motion-ease)}
/* WHO'S IN (0039) — the field by name, public. The sidebar is sticky, so the list scrolls inside its own box
   rather than growing a 52-name card past the bottom of the screen; the count in the label says how many
   there are, so a scroll never hides the number. */
.event-card .roster{margin-top:18px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--olive-soft) 18%,transparent)}
.event-card .roster-label{margin:0 0 10px;display:flex;align-items:center;gap:8px;color:var(--olive-soft);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.event-card .roster-label span{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:var(--lime);color:var(--olive);font-size:11px;font-weight:700;letter-spacing:0}
.event-card .roster-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;max-height:min(46vh,400px);overflow-y:auto;overscroll-behavior:contain}
.event-card .roster-list li{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.event-card .roster-name{color:var(--olive);font-size:14px;font-weight:600;line-height:1.3}
.event-card .roster-day{color:var(--olive-soft);font-size:11px;font-weight:600;font-style:normal;white-space:nowrap}
.event-card .side-note{margin-top:12px;font-size:13px;color:var(--olive-soft)}
.event-card .side-note:empty{display:none}
.event-card .compact{display:none}
.event-card.loading h2,.event-card.loading dd{color:transparent;background:color-mix(in srgb,var(--olive-soft) 10%,transparent);border-radius:8px}

/* ---------- done ---------- */
.badge{width:64px;height:64px;border-radius:50%;background:var(--lime);color:var(--white);display:grid;place-items:center;margin-bottom:22px}
.badge svg{width:34px;height:34px}
.spinner{display:inline-block;width:18px;height:18px;border:2px solid color-mix(in srgb,var(--olive-soft) 25%,transparent);border-top-color:var(--lime);border-radius:50%;animation:ph-spin .9s linear infinite;vertical-align:-3px;margin-right:10px}
@keyframes ph-spin{to{transform:rotate(360deg)}}
.cta-row{display:flex;gap:14px 26px;align-items:center;flex-wrap:wrap;margin-top:30px}
.app-line{margin-top:44px;font-size:15px;color:var(--olive-soft);padding:16px 18px;background:var(--cloud);border-radius:12px;max-width:56ch}

/* ---------- bring a buddy (portal/invite.js) ---------- */
.invite{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 28px;align-items:start;margin-top:34px;padding:26px 28px 24px;background:var(--white);border:1px solid color-mix(in srgb,var(--olive-soft) 14%,transparent);border-radius:22px}
.invite-card{grid-row:1/3;position:relative;width:156px;aspect-ratio:9/16;border:0;padding:0;border-radius:16px;overflow:hidden;background:var(--board-ink);cursor:pointer;box-shadow:0 22px 44px -26px #111406b3;transition:transform var(--motion-base) var(--motion-ease),box-shadow var(--motion-base) var(--motion-ease)}
.invite-card:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 30px 50px -26px #111406cc}
.invite-card:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.invite-card img{display:block;width:100%;height:100%;object-fit:cover}
.invite-card-skel{position:absolute;inset:0;background:linear-gradient(110deg,var(--board-ink) 30%,var(--board-ink-raised) 50%,var(--board-ink) 70%);background-size:220% 100%;animation:ph-shimmer 1.4s linear infinite}
.card-ready .invite-card-skel,.card-failed .invite-card-skel{display:none}
.card-failed .invite-card{display:none}
.invite-card-tag{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:var(--lime);color:var(--olive-deep);font:700 10.5px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border-radius:999px;white-space:nowrap;opacity:0;transition:opacity var(--motion-fast) ease}
.card-ready .invite-card-tag{opacity:1}
@keyframes ph-shimmer{to{background-position:-120% 0}}
.invite-copy{grid-column:2;min-width:0}
.invite-copy .side-label{color:var(--lime);letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px;font-size:12px;font-weight:600}
.invite-copy h2{font-size:26px;line-height:1.15}
.invite-sub{margin:8px 0 0;font-size:15px;color:var(--olive-soft);font-weight:500}
.invite-acts{grid-column:2;min-width:0}
.invite-ctas{margin-top:0;gap:12px 20px}
.share-row{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:14px 4px;justify-items:center}
.share-row li{min-width:0;width:100%;display:flex;justify-content:center}
.share-btn{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;max-width:64px;background:none;border:0;padding:0;cursor:pointer;color:var(--olive-soft);text-decoration:none!important;font:600 10.5px/1.1 var(--font-body);text-align:center}
.share-btn .ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--cloud);border:1px solid color-mix(in srgb,var(--olive-soft) 12%,transparent);color:var(--olive);transition:background var(--motion-fast) ease,border-color var(--motion-fast) ease,transform var(--motion-base) var(--motion-ease)}
.share-btn .ico svg{width:21px;height:21px;display:block}
.share-btn:hover .ico{background:color-mix(in srgb,var(--lime) 22%,var(--white));border-color:color-mix(in srgb,var(--lime) 60%,transparent);transform:translateY(-2px)}
.share-btn:active .ico{transform:translateY(0) scale(.96)}
.share-btn:focus-visible{outline:0}
.share-btn:focus-visible .ico{outline:3px solid var(--lime);outline-offset:2px}
.share-btn .lbl{color:var(--olive-soft)}
.invite .note{margin-top:16px}
@media (max-width:960px){
  .invite{padding:18px 18px 18px;gap:14px 16px;border-radius:18px}
  .invite-card{width:112px;grid-row:1}
  .invite-copy h2{font-size:22px}
  .invite-acts{grid-column:1/-1}
  .invite-ctas{gap:10px 16px}
  .share-row{margin-top:18px;gap:14px 2px}
  .share-btn{font-size:10.5px}
  .share-btn .ico{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){.invite-card,.invite-card-skel,.share-btn .ico{transition:none;animation:none}}

/* ---------- account ---------- */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap}
.page-head h1{margin-bottom:0}
.page-head .who{margin:0 0 10px}
.account .card{margin-top:22px}
.account .card-head .muted{font-size:14px;font-weight:600}
.account-duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.account-duo .card{margin-top:22px;min-width:0}

/* the tee sheet — the leaderboard's ink + lime, for the one thing you came to see */
.sheet{position:relative;isolation:isolate;overflow:hidden;background:var(--board-ink);color:var(--board-bone);border-radius:24px;padding:28px 34px 30px;margin-top:26px}
.sheet::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' fill='none' stroke='%2387a330' stroke-width='1.1' stroke-opacity='.26'%3E%3Cpath d='M300 40c110-22 232 26 262 122s-46 176-166 188S94 328 84 220 190 62 300 40z'/%3E%3Cpath d='M302 84c84-16 176 24 198 96s-36 132-128 142S166 300 156 216 222 100 302 84z'/%3E%3Cpath d='M306 126c56-11 118 18 130 66s-24 92-88 100-118-28-124-84 44-74 82-82z'/%3E%3Cpath d='M310 168c30-6 64 12 70 38s-14 52-48 56-64-16-68-46 26-44 46-48z'/%3E%3Cpath d='M316 208c12-2 26 6 28 16s-6 22-20 24-26-8-28-20 12-18 20-20z'/%3E%3C/svg%3E") right -120px center / 680px auto no-repeat}
.sheet-top{display:flex;justify-content:space-between;align-items:center;gap:10px 18px;flex-wrap:wrap}
.sheet .status{display:flex;align-items:center;gap:12px;margin:0;color:var(--board-muted);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.sheet .status span{background:var(--board-accent);border-radius:50%;flex:none;width:9px;height:9px}
.sheet.is-pending .status span{background:transparent;box-shadow:inset 0 0 0 2px var(--board-accent)}
.sheet .count{margin:0;color:var(--board-accent-bright);font:600 13px/1 var(--font-board-data);letter-spacing:.14em;text-transform:uppercase}
.sheet-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 28px;align-items:center;margin-top:26px}
.sheet h2{color:var(--board-bone);font-family:var(--font-display);font-size:clamp(28px,2.5vw,36px);font-weight:700;line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
.sheet .venue{color:var(--board-muted);font-size:15px;font-weight:600;line-height:1.4;margin-top:10px}
.nowrap{white-space:nowrap}
.sheet .request{color:var(--board-bone);opacity:.8;font-size:14px;margin-top:12px;font-style:italic}
.start{display:flex;align-items:center;gap:20px}
.disc{flex:none;width:118px;height:118px;border-radius:50%;border:3px solid var(--board-accent);background:var(--board-ink-raised);display:grid;place-content:center;text-align:center;box-shadow:0 0 0 10px #87a33012,0 0 0 1px #87a33024}
.disc b{display:block;font:600 58px/1 var(--font-board-data);color:var(--board-accent-bright);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.disc.long b{font-size:24px;padding:0 8px;line-height:1.1}
.disc.pending{border-style:dashed;border-color:var(--board-rule);box-shadow:none}
.disc.pending small{display:block;font:600 10px/1 var(--font-board-data);letter-spacing:.22em;text-transform:uppercase;color:var(--board-muted);margin-bottom:6px}
.disc.pending b{font-size:24px;color:var(--board-bone)}
.start-copy span{display:block;color:var(--board-muted);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.start-copy b{display:block;color:var(--board-bone);font-size:16px;font-weight:700;margin-top:6px;line-height:1.3}
.start-copy small{display:block;color:var(--board-muted);font-size:13px;line-height:1.45;margin-top:4px;max-width:22ch}
.sheet a{color:var(--board-bone);text-decoration-color:var(--board-rule)}
.sheet a:hover{text-decoration-color:var(--board-accent)}
.sheet .start-copy a{color:var(--board-accent-bright)}
.sheet-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 24px;margin:26px 0 0;padding-top:22px;border-top:1px solid var(--board-rule)}
.sheet-facts>div{min-width:0}
.sheet-facts dt{color:var(--board-muted);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.sheet-facts dd{margin:7px 0 0;color:var(--board-bone);font:600 21px/1.15 var(--font-board-data);letter-spacing:.005em}
.sheet-facts dd small{display:block;font-family:var(--font-body);font-size:12.5px;font-weight:500;color:var(--board-muted);margin-top:5px;line-height:1.4}
.sheet-acts{display:flex;justify-content:space-between;align-items:center;gap:18px 28px;flex-wrap:wrap;margin-top:26px}
.sheet .cta-row{margin-top:0;gap:14px 22px}
.sheet .cta-row a:not(.arrow-button){font-size:15px;font-weight:600}
.sheet .cancel{max-width:40ch;margin-left:auto}
.sheet .cancel .actions{margin-top:0;justify-content:flex-end;gap:14px}
.sheet .quiet{color:var(--board-muted);text-decoration-color:var(--board-rule)}
.sheet .quiet:hover{color:var(--board-bone)}
.sheet .quiet[disabled]{opacity:.55;cursor:not-allowed;text-decoration:none}
.sheet .actions .why{color:var(--board-muted);opacity:1;font-size:13px}
.sheet .refund{margin-top:14px;font-size:13px;line-height:1.45;color:var(--board-muted)}
.sheet .field-line{margin-top:26px;padding-top:18px;border-top:1px solid var(--board-rule);font:600 13px/1.2 var(--font-board-data);letter-spacing:.06em;text-transform:uppercase;color:var(--board-muted)}
.sheet .field-line .bar{height:6px;border-radius:3px;background:#f4f5f014;margin:10px 0 0;overflow:hidden}
.sheet .field-line .bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--board-accent);transition:width var(--motion-slow) var(--motion-ease)}
.sheet .note{background:var(--board-ink-raised);color:var(--board-accent-bright);border:1px solid var(--board-rule);margin-top:18px}
.sheet .err{color:var(--board-bone);background:var(--board-ink-raised);border-left-color:var(--alert)}
.sheet .confirm{background:var(--board-ink-raised);color:var(--board-bone);border:1px solid var(--board-rule)}
.sheet .confirm b{color:var(--board-accent-bright)}
.sheet .confirm .danger{color:#e8a598!important}
.sheet .arrow-button.inverse>span:first-child{color:var(--olive-deep)}
.sheet--loading{min-height:200px;display:grid;align-items:center}
.sheet--loading .status span{animation:ph-pulse 1.2s ease-in-out infinite}
@keyframes ph-pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:no-preference){
  .sheet{animation:ph-rise .55s var(--motion-ease) both}
  .disc{animation:ph-pop .6s var(--motion-ease) .12s both}
  .sheet-facts,.sheet-acts,.sheet .field-line{animation:ph-rise .55s var(--motion-ease) .1s both}
}
@keyframes ph-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ph-pop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}

/* the rest of the card, and past rounds — light rows with the date as a stub */
.more-label{margin:30px 0 0 4px;color:var(--lime);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.more{list-style:none;margin:8px 0 0;padding:0}
.more li{display:grid;grid-template-columns:auto 1fr auto;gap:8px 20px;align-items:center;padding:16px 4px;border-bottom:1px solid color-mix(in srgb,var(--olive-soft) 12%,transparent);font-size:15px;color:var(--olive)}
.more li>div b{display:block;font-weight:600}
.more li>div small{display:block;color:var(--olive-soft);font-size:13px;margin-top:3px}
.more li .actions{margin-top:0;gap:14px}
.more li .confirm,.more li .note,.more li .err,.more li [data-cancel-box]{grid-column:1/-1}
.more li [data-cancel-box]:empty{display:none}
.when{display:grid;justify-items:center;min-width:56px;padding:6px 8px;border-radius:12px;background:var(--cloud);color:var(--olive)}
.when b{font:600 17px/1 var(--font-board-data);letter-spacing:.01em;white-space:nowrap}
.when small{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--olive-soft);margin-top:3px}
.confirm{margin-top:16px;padding:16px 18px;border-radius:12px;background:var(--cloud);font-size:15px;line-height:1.5;color:var(--olive)}
.confirm .actions{margin-top:12px}
.past{list-style:none;margin:16px 0 0;padding:0}
.past li{display:grid;grid-template-columns:auto 1fr auto;gap:6px 18px;align-items:center;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--olive-soft) 10%,transparent);font-size:15px;color:var(--olive)}
.past li:last-child{border-bottom:0}
.past li>div b{display:block;font-weight:600}
.past li>div small{display:block;color:var(--olive-soft);font-size:13px;margin-top:2px}
.past li .right{color:var(--olive-soft);font-size:14px;text-align:right}

/* nothing on the card */
.empty .card-head h2{font-size:26px}
.next-up{margin-top:22px;padding-top:20px;border-top:2px solid color-mix(in srgb,var(--lime) 58%,transparent)}
.next-up .side-label{color:var(--lime);letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px;font-size:12px;font-weight:600}
.next-up h3{margin:0;color:var(--olive);font-family:var(--font-display);font-size:24px;font-weight:700;line-height:1.15}
.next-up .venue{color:var(--olive-soft);font-size:15px;font-weight:600;margin-top:6px}
.next-up .cta-row{margin-top:22px}

/* hammer points · texts · profile */
.stat-row{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-end;margin-top:18px}
.stat b{display:block;font:600 40px/1 var(--font-board-data);color:var(--olive);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat.rank b{font-size:56px;color:var(--olive);padding-bottom:4px;border-bottom:3px solid var(--lime)}
.stat span{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--olive-soft);margin-top:8px}
.big-line{margin-top:14px;font:600 28px/1 var(--font-board-data);color:var(--olive);letter-spacing:.01em}
.pill{display:inline-block;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.pill.on{background:color-mix(in srgb,var(--lime) 22%,var(--cloud));color:var(--olive)}
.pill.off{background:var(--cloud);color:var(--olive-soft)}
.pill.paid{background:var(--olive);color:var(--white)}
.pill.pending{background:color-mix(in srgb,var(--alert) 14%,var(--cloud));color:var(--alert)}
.pill.cancelled{background:var(--cloud);color:var(--olive-soft)}
.me{display:flex;align-items:center;gap:16px;margin-top:16px;color:var(--olive)}
.me .avatar{flex:none;width:52px;height:52px;border-radius:50%;background:var(--olive);color:var(--white);display:grid;place-items:center;font:700 18px/1 var(--font-display);letter-spacing:.02em}
.me b{display:block;font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1.2}
.me small{display:block;color:var(--olive-soft);font-size:14px;margin-top:4px;line-height:1.45;overflow-wrap:anywhere}
#profile-form{margin-top:22px;padding-top:22px;border-top:1px solid color-mix(in srgb,var(--olive-soft) 12%,transparent)}
#profile-form[hidden]{display:none}
.danger{color:var(--alert)!important}
.footer-actions{display:flex;gap:14px 28px;flex-wrap:wrap;align-items:center;margin-top:36px;font-size:15px}
.signin-box{max-width:560px}

/* ---------- phones ---------- */
@media (max-width:960px){
  .portal{padding:36px 0 90px}
  .portal-layout{display:flex;flex-direction:column;gap:30px}
  .portal-main{max-width:none}
  .portal-side{order:-1;position:static;width:100%}
  .portal h1{font-size:32px}
  .fields{grid-template-columns:1fr;gap:18px}
  .event-card{padding:20px 22px}
  .event-card h2{font-size:20px}
  .event-card dl{display:none}
  .event-card .compact{display:block;margin-top:8px;font-size:14px;color:var(--olive-soft);font-weight:600}
  .event-card .field-line{margin-top:14px;padding-top:12px}
  .rows>div{grid-template-columns:1fr;gap:4px}
  .perks li{grid-template-columns:1fr;gap:2px}
  .arrow-button>span:first-child{padding:0 24px}
  .card{padding:20px 20px}
  .page-head{align-items:flex-start;flex-direction:column-reverse;gap:14px}
  .page-head .who{margin:0}
  .account-duo{grid-template-columns:1fr;gap:0}
  .sheet{padding:22px 20px 22px;border-radius:18px;margin-top:22px}
  .sheet::before{background-position:right -200px top -40px;background-size:520px auto}
  .sheet-main{grid-template-columns:1fr;gap:22px;margin-top:22px;align-items:start}
  .sheet h2{font-size:30px}
  .start{gap:16px}
  .disc{width:96px;height:96px}
  .disc b{font-size:46px}
  .disc.long b,.disc.pending b{font-size:20px}
  .sheet-facts{grid-template-columns:1fr 1fr;gap:16px 18px}
  .sheet-facts dd{font-size:19px}
  .sheet-acts{flex-direction:column;align-items:flex-start;gap:16px}
  .sheet .cancel{max-width:none;margin-left:0}
  .sheet .cancel .actions{justify-content:flex-start}
  .more li{grid-template-columns:auto 1fr}
  .more li .actions{grid-column:1/-1}
  .past li{grid-template-columns:auto 1fr}
  .past li .right{grid-column:2;text-align:left}
  .stat-row{gap:22px}
  .stat b{font-size:34px}
  .stat.rank b{font-size:48px}
}
@media (max-width:420px){
  .arrow-button{font-size:15px}
  .arrow-button>span:first-child{padding:0 20px;min-height:52px}
  .arrow-button .arrow{width:52px;height:52px}
}

/* ---------- tee-time texts: the one-tap switch (Review card + the account card) ---------- */
.texts-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--olive) 14%,transparent);border-radius:14px;background:var(--white);transition:background .18s,border-color .18s}
.texts-row.on{border-color:color-mix(in srgb,var(--lime) 60%,transparent);background:color-mix(in srgb,var(--lime) 10%,var(--white))}
.texts-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.texts-copy b{font-size:16px;color:var(--olive)}
.texts-copy small{font-size:13px;color:var(--olive-soft);line-height:1.35}
.switch{flex:none;position:relative;width:56px;height:32px;border-radius:999px;border:0;padding:0;cursor:pointer;background:color-mix(in srgb,var(--olive) 24%,var(--cloud));transition:background .18s}
.switch .knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--white);box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .18s,background .18s}
.switch[aria-checked="true"]{background:var(--olive)}
.switch[aria-checked="true"] .knob{transform:translateX(24px);background:var(--lime)}
.switch[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.switch.busy{opacity:.65;cursor:progress}
.switch:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.texts-open{margin-top:14px}
.texts-open .field{margin-top:10px}
.texts-open .actions{margin-top:12px;flex-wrap:wrap}
.texts-open .card-sub{margin-top:12px}
.texts-fine{margin-top:10px}
@media (prefers-reduced-motion:reduce){.texts-row,.switch,.switch .knob{transition:none}}

/* ---------- preview mode (?preview): the one visible tell, on every preview page ---------- */
.preview-pill{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:10px 16px 10px 14px;border-radius:999px;background:var(--olive);color:var(--white);font-size:13px;line-height:1.3;box-shadow:0 12px 32px -12px rgba(17,20,6,.55)}
.preview-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);flex:none}
.preview-pill b{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.preview-pill span:not(.dot){opacity:.85;white-space:nowrap}
.preview-pill a{color:var(--white);font-weight:700;text-decoration:underline;text-decoration-color:var(--lime);text-underline-offset:3px;margin-left:4px}
@media (max-width:640px){.preview-pill span:not(.dot){display:none}}
body:has(.preview-pill) .portal{padding-bottom:180px}

/* ------------------------------------------------------------ thumb-sized touch areas
   Shipcheck P1-13 (9/12). A thumb needs 44px; these controls are drawn 23–32px tall on purpose (text
   buttons, the pill in the who-bar, the texts switch). The visible control stays exactly as designed —
   only the TOUCH area grows, as a transparent box centered on it. Measured with device emulation at
   320–430 wide: Cancel my spot / Keep my spot / Yes, cancel / Edit / Sign out / Delete my account were
   23px, "Send it again" / "Change email" / "No thanks" 23px, the switch 32px, the Email|Text doors 42px. */
.quiet,.links button,.linkish,.who button{position:relative}
.quiet::after,.links button::after,.linkish::after,.who button::after,.switch::after{content:"";position:absolute;left:50%;top:50%;width:max(calc(100% + 8px),44px);height:44px;transform:translate(-50%,-50%)}
.doors button{height:44px}
/* Yes, cancel / Keep my spot wrap onto two lines under 390: 20px apart, their 44px touch areas met with
   1px to spare the wrong way. 24px keeps two thumbs' worth between them. */
.confirm .actions{row-gap:24px}

/* two quick questions on the done page (0049) */
.q-pills{display:flex;flex-wrap:wrap;gap:8px}.q-pills .pill{cursor:pointer;font-size:13px;padding:8px 14px;text-transform:none;letter-spacing:0}
.q-rows{display:flex;flex-direction:column;gap:6px}.q-row{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:14px;background:var(--cloud);cursor:pointer;font-size:15px;color:var(--olive)}.q-row input{width:20px;height:20px;margin-top:1px;accent-color:var(--olive);flex:none}.q-row span{display:flex;flex-direction:column;gap:2px}.q-row small{font-size:13px;color:var(--olive-soft)}

/* the strip (9/19): the rest of the calendar under a card — Live now · Also open · Coming up, one chip each (PH.stripHtml) */
.ph-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ph-chip{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;max-width:100%;background:var(--warm-white,#fffefc);border:1px solid rgba(36,48,16,.14);border-radius:18px;padding:8px 8px 8px 14px;color:var(--olive,#243010);font-size:13.5px;font-weight:500;line-height:1.3;text-decoration:none;transition:border-color .2s}
a.ph-chip:hover{border-color:var(--lime,#87a330)}
a.ph-chip:focus-visible{outline:2px solid var(--lime,#87a330);outline-offset:3px}
.ph-chip__k{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime,#87a330);white-space:nowrap}
.ph-chip.is-live .ph-chip__k::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime,#87a330);margin-right:6px;vertical-align:1px}
.ph-chip.is-soon .ph-chip__k{color:var(--olive-soft,#445218)}
.ph-chip__t{min-width:0}
.ph-chip__go{display:inline-flex;align-items:center;gap:5px;background:var(--lime,#87a330);color:var(--olive-deep,#111406);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;white-space:nowrap}
.ph-chip__go.is-ghost{background:transparent;box-shadow:inset 0 0 0 1.5px var(--olive,#243010);color:var(--olive,#243010)}
.ph-chip__go svg{width:12px;height:12px;transition:transform .25s}
a.ph-chip:hover .ph-chip__go svg{transform:translateX(3px)}
.sheet + .ph-strip{margin-top:16px}
.ph-strip a.ph-chip,.ph-strip a.ph-chip:hover{text-decoration:none}