/* Relay's public pages: the front page (which is also the way in) and the guest
   ticket pages. Uses the app's colour and type tokens from index.html.
   The front page shows Relay doing its job: small working pieces of the app at
   their real size, marked data-ui, with the sign-off sheet as the one you can try.
   Outside those pieces: no rules, no shadows, colour by fields, red only on the action. */

.land{--gut:max(20px,env(safe-area-inset-left,0px));max-width:1240px;margin:0 auto;padding:24px var(--gut) 32px;font-size:17px}
.land-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.land-top .langbtn{margin-right:-10px}
.land .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.land .btn.primary:hover{background:color-mix(in srgb,var(--accent) 88%,#000);border-color:color-mix(in srgb,var(--accent) 88%,#000)}
.land .ui .btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.land .linkbtn{text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent)}

/* first screen: the title and the way in, then the sheet on a dark stage */
.land-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);grid-template-areas:"copy auth" "stage auth";gap:40px 64px;align-items:start;margin-top:48px}
.land-copy{grid-area:copy;container-type:inline-size}
.auth{grid-area:auth}
.land{--stage:#14161A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .land{--stage:#272A31}}
:root[data-theme="dark"] .land{--stage:#272A31}
.land-stage{grid-area:stage;background:var(--stage);border-radius:14px;padding:clamp(20px,4vw,44px);display:flex;flex-direction:column;gap:14px;align-items:center}
.land-try{color:#B9BDC6;font-size:14px;margin:0;align-self:center}

.land-title{font-family:var(--f-display);font-weight:800;font-size:clamp(40px,10.4cqi,84px);line-height:1;letter-spacing:-.035em;max-width:none;text-wrap:initial}
.land-title .ln{display:block;overflow:hidden;padding:.04em 0 .2em;margin:-.04em 0 -.2em}
.land-title .ln > span{display:inline-block;white-space:nowrap}
html[lang^="fr"] .land-title{font-size:clamp(34px,8.6cqi,72px)}
.land-lede{font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--ink);max-width:54ch;margin-top:24px}

/* the sign-off sheet: a real piece of the app, in the app's own terms */
.ui{font-size:14px;line-height:1.45;color:var(--ink);text-align:left}
.land-sheet{margin:0;width:100%;max-width:640px;background:var(--surface);border-radius:10px;overflow:hidden}
.ls-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:16px 18px 12px}
.ls-head strong{font-family:var(--f-display);font-size:18px;letter-spacing:-.01em}
.ls-head span{color:var(--muted);font-size:13.5px}
.land-sheet table{width:100%;border-collapse:collapse;font-size:14.5px}
.land-sheet th{font-size:12.5px;font-weight:600;color:var(--muted);padding:6px 8px;width:72px;text-align:center}
.land-sheet th:first-child{text-align:left;padding-left:18px;width:auto}
.land-sheet td{border-top:1px solid var(--rule);padding:12px 8px;text-align:center;vertical-align:middle}
.land-sheet td:first-child{text-align:left;padding-left:18px}
.land-sheet .ssmu{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:600;color:var(--accent);background:var(--tint);border-radius:999px;padding:1px 7px;vertical-align:1px}
.tick{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border-radius:50%;border:1.5px dashed var(--control);background:transparent;color:transparent;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .15s}
.tick svg{width:15px;height:15px}
.tick:hover{border-color:var(--ink);transform:scale(1.08)}
.tick:active{transform:scale(.94)}
.tick[aria-pressed="true"]{background:var(--ok);border:1.5px solid var(--ok);color:#fff}
.ls-foot{display:flex;align-items:center;gap:14px;border-top:1px solid var(--rule);padding:14px 18px;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ls-meter{flex:1;height:6px;border-radius:3px;background:var(--active);overflow:hidden}
.ls-meter i{display:block;height:100%;width:50%;background:var(--accent);border-radius:3px;transition:width .5s cubic-bezier(.2,.7,.2,1),background-color .3s}
.land-sheet.complete .ls-meter i{background:var(--ok)}
.land-sheet.complete .ls-foot{color:var(--ok);font-weight:600}

/* sign-in card: a white field on the page ground */
.auth{position:sticky;top:24px;background:var(--surface);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:16px}
.auth h2{font-family:var(--f-display);font-size:28px;letter-spacing:-.02em}
.auth p{color:var(--muted);font-size:15px}
.auth form{display:flex;flex-direction:column;gap:14px}
.auth input{width:100%;min-height:44px;font-size:16px}
.btn.block{width:100%;justify-content:center;min-height:44px;padding:10px 14px;font-size:15px}
.btn.google{gap:10px}
.btn.google svg{width:18px;height:18px;flex:none}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
/* Google's own button draws itself in a frame; keep its space so the card doesn't jump */
.gsi-slot{min-height:44px;display:flex;justify-content:center;align-items:center;color-scheme:normal}
.gsi-slot>div{max-width:100%}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-alt{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:15px}
.auth-new{margin-top:4px;padding:16px;border-radius:10px;background:var(--paper);display:flex;flex-direction:column;gap:10px}
.auth-new p{color:var(--ink);font-weight:600}
.auth .status{font-size:14px;color:var(--ink);min-height:1em}
.auth .status:empty{display:none}
.auth .status.bad{color:var(--accent)}
.auth .small{font-size:14px}
.code-input{font-family:var(--f-mono);letter-spacing:.3em;font-size:22px;text-align:center}

/* what clubs use it for: one use per row, its words beside the piece of Relay that does it */
.land-sec{margin-top:clamp(96px,12vw,168px)}
.land-sec h2{font-family:var(--f-display);font-size:clamp(30px,3.6vw,44px);line-height:1.05;letter-spacing:-.03em;font-weight:800}
.uses{display:flex;flex-direction:column;gap:clamp(56px,7vw,96px);margin-top:56px}
.use{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:center}
.use-copy h3{font-family:var(--f-display);font-size:clamp(22px,2.2vw,28px);line-height:1.15;letter-spacing:-.02em;font-weight:700}
.use-copy p{margin-top:12px;color:var(--ink);line-height:1.6;max-width:44ch}
.use .ui{justify-self:start}
.use-notes .ui{width:min(100%,560px)}
.use-calendar .ui{width:100%}
.use-receipt .ui{width:min(100%,620px)}
.use-files .ui{width:min(100%,460px)}
.use-password .ui{width:min(100%,520px)}
.use-handbook .ui{width:min(100%,600px)}
.uses .use:nth-child(even) .ui{justify-self:end}

/* the pieces of the app */
.ui-panel{background:var(--surface);border-radius:10px;padding:18px}
.ui-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.ui-h strong{font-size:15px}
.ui-h > span{color:var(--muted);font-size:13px}
.ui-sub{color:var(--muted);font-size:13px}
.ui .chip{font-size:12px}
.ui-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--rule);cursor:pointer}
.ui-item:first-of-type{border-top:0}
.ui-item input{width:18px;height:18px;margin-top:2px;accent-color:var(--ink);flex:none;cursor:pointer}
.ui-t{display:flex;flex-direction:column;gap:6px}
.ui-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:13px}
.ui-item.done .ui-t > :first-child,.ui-item.done .ui-t{color:var(--muted)}
.ui-item.done{text-decoration:line-through;text-decoration-color:var(--control)}
.ui-item.done .ui-meta{text-decoration:none}
.ui-week{background:var(--surface);border-radius:10px;overflow:hidden}
.ui-week-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--rule)}
.ui-day{background:var(--surface);min-height:132px;padding:10px 8px;display:flex;flex-direction:column;gap:4px;min-width:0}
.ui-day .dw{font-size:12px;color:var(--muted)}
.ui-day .dn{font-family:var(--f-display);font-weight:700;font-size:20px;line-height:1;font-variant-numeric:tabular-nums}
.ui-day.today .dn{color:var(--accent)}
.ui-day .ev{margin-top:auto;font-size:12px;line-height:1.25;padding:4px 6px;border-radius:4px;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;hyphens:auto}
.ui-receipt{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:16px;align-items:start}
.ui-rc{width:52px;height:64px;border-radius:4px;background:var(--paper);padding:10px 9px;display:flex;flex-direction:column;gap:6px}
.ui-rc i{display:block;height:3px;border-radius:2px;background:var(--control)}
.ui-rc i:nth-child(2){width:70%}
.ui-rc b{display:block;height:4px;width:55%;margin-top:auto;border-radius:2px;background:var(--ink)}
.ui-rc-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.ui-rc-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.ui-amt{font-size:16px;font-variant-numeric:tabular-nums}
.ui-files{padding:8px 18px}
.ui-file{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--rule)}
.ui-file:first-child{border-top:0}
.ui-ext{font-size:11px;font-weight:700;color:var(--muted);background:var(--paper);border-radius:4px;padding:4px 0;text-align:center}
.ui-pw,.ui-approve{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:start}
.ui-mono{width:44px;height:44px;border-radius:10px;background:var(--tint);color:var(--accent);display:grid;place-items:center;font-weight:800;font-family:var(--f-display);font-size:15px}
.ui-pw-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.ui-pw-row{display:flex;align-items:center;gap:10px;margin:8px 0 6px}
.ui-secret{font-family:var(--f-mono);font-size:15px;letter-spacing:.06em;background:var(--paper);border-radius:6px;padding:6px 10px}
.ui-book section{padding:12px 0;border-top:1px solid var(--rule)}
.ui-book section:first-of-type{border-top:0}
.ui-book h4{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--muted)}
.ui-book p{margin:0;line-height:1.5}
.ui-form{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ui-lbl{font-size:13px;font-weight:600}
.ui-input{display:block;width:100%;border:1px solid var(--control);border-radius:6px;padding:9px 11px;font-size:15px}
.ui-fake{pointer-events:none;margin-top:4px}
.ui-code{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ui-codebox{font-size:24px;font-weight:700;letter-spacing:.1em;background:var(--paper);border-radius:8px;padding:8px 14px;font-variant-numeric:tabular-nums}
.ui-approve{align-items:center}
.ui-turn{padding:20px 22px}
.ui-role{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(80px,1.2fr) 44px;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--rule)}
.ui-role:first-of-type{border-top:0}
.ui-bar{height:6px;border-radius:3px;background:var(--active);overflow:hidden}
.ui-bar i{display:block;height:100%;background:var(--ok);border-radius:3px}
.ui-n{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}

/* getting started: what you give, and what comes back */
.steps{list-style:none;padding:0;margin:56px 0 0;display:flex;flex-direction:column;gap:88px;max-width:640px;margin-left:min(25%,300px)}
.step h3{font-family:var(--f-display);font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em;line-height:1.15}
.step > p{margin-top:10px;line-height:1.6;max-width:52ch}
.step-call{margin-top:20px}
.step-call .ui-panel{background:var(--sunk)}
.step-call .ui-input{background:var(--surface)}
.step-resp{margin:16px 0 0 56px}
.step-turnover .step-call{width:min(820px,calc(100vw - 2 * var(--gut)));margin-top:24px}
.step-turnover .step-call .ui-panel{background:var(--surface)}

.land-foot{margin-top:clamp(120px,22svh,240px);color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}

/* overseer invite note */
.land-ov{margin-top:28px;display:flex;flex-direction:column;gap:4px;padding:16px 18px;background:var(--surface);border-radius:12px;max-width:56ch;font-size:15px}

/* motion: the title rises line by line; sections rise as they arrive; the sheet fills in */
@media (prefers-reduced-motion:no-preference){
  .land-title .ln > span{animation:lnUp .9s cubic-bezier(.16,1,.3,1) both}
  .land-title .ln:nth-child(2) > span{animation-delay:.11s}
  .land-lede,.land-ov{animation:fadeUp .6s .2s cubic-bezier(.16,1,.3,1) both}
  .land .auth{animation:fadeUp .6s .25s cubic-bezier(.16,1,.3,1) both}
  .land-stage{animation:fadeUp .7s .35s cubic-bezier(.16,1,.3,1) both}
  .land-sheet tbody tr{animation:fadeUp .5s calc(.55s + var(--i) * 80ms) cubic-bezier(.16,1,.3,1) both}
  .land-sheet.intro .tick[aria-pressed="true"]{animation:tickIn .45s calc(.85s + var(--i,0) * 80ms) cubic-bezier(.34,1.56,.64,1) both}
  .ls-meter i{animation:growIn 1s 1.1s cubic-bezier(.16,1,.3,1) both}
  html.motion [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  html.motion [data-reveal].in{opacity:1;transform:none}
  html.motion .use .ui{transition:transform .9s .12s cubic-bezier(.16,1,.3,1)}
  html.motion .use:not(.in) .ui{transform:translateY(20px)}
}
@keyframes lnUp{from{transform:translateY(105%)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes tickIn{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes growIn{from{transform:scaleX(0);transform-origin:left}to{transform:none;transform-origin:left}}

/* tablet and phone: title, the way in, then the sheet */
@media (max-width:960px){
  .land-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "auth" "stage";gap:32px;margin-top:32px}
  .auth{position:static}
  .use{grid-template-columns:minmax(0,1fr);gap:24px}
  .uses .use:nth-child(even) .ui{justify-self:start}
  .steps{margin-left:0}
}
@media (max-width:560px){
  .land{--gut:16px;font-size:16px}
  .land-title{font-size:clamp(34px,10.6cqi,60px)}
  html[lang^="fr"] .land-title{font-size:clamp(28px,8.8cqi,52px)}
  .land-stage{padding:14px;border-radius:12px}
  .land-sheet th{width:52px}
  .land-sheet td{padding:11px 6px}
  .auth{padding:20px}
  .ui-day{min-height:96px;padding:8px 4px}
  .ui-day .ev{font-size:11px;padding:3px 4px}
  .ui-receipt{grid-template-columns:44px minmax(0,1fr);}
  .ui-amt{grid-column:2}
  .ui-role{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .ui-role .ui-bar{grid-column:1}
  .step-resp{margin-left:0}
  .step-turnover .step-call{width:100%}
  .land-foot{flex-direction:column}
}

/* an event's ticket page */
.tk-hero{align-items:start}
.tk-hero{grid-template-areas:"copy auth"}
.tk-club{font-size:14px;font-weight:600;color:var(--muted)}
.tk-title{margin-top:6px}
.tk-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 18px;margin:22px 0 0;font-size:16px}
.tk-facts dt{color:var(--muted)}
.tk-facts dd{margin:0;font-weight:600}
.tk-note{margin-top:18px;white-space:pre-wrap;padding:12px 14px;border-radius:10px;background:var(--surface);max-width:56ch}
.tk-how{margin-top:18px;color:var(--muted);max-width:52ch}
.tk-page .land-title{font-size:clamp(34px,7cqi,60px);line-height:1.04;text-wrap:balance}
.tk-page .land-lede{color:var(--muted)}
.tk-page .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tk-form select{width:100%;min-height:44px}
.tk-total{font-weight:600;color:var(--ink) !important}
.tk-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.tk-mine{margin-top:22px;font-size:15px;padding:14px 16px;border-radius:12px;background:var(--surface);max-width:56ch}
.tk-mine ul{margin:6px 0 0;padding-left:18px}
.tk-mine a{font-weight:600}
.tk-flash{margin-bottom:22px;padding:14px 16px;border-radius:12px;background:var(--ok-tint);color:var(--ink);max-width:56ch;font-size:15px}
.tk-pay{margin-top:24px;padding:18px 20px;border-radius:12px;background:var(--warn-tint);max-width:56ch}
.tk-pay h2{font-size:19px;margin:0 0 10px}
.tk-pay dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 14px;margin:0 0 10px;align-items:center}
.tk-pay dt{color:var(--muted);font-size:14px}
.tk-pay dd{margin:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.tk-pay .mono{font-size:15px;font-weight:700;word-break:break-all}
.tk-ticket{border-top:6px solid var(--active)}
.tk-ticket.ok{border-top-color:var(--ok)}
.tk-ticket h2{margin:0;font-family:var(--f-display);font-size:22px}
.tk-ticket .tk-facts{margin-top:4px;font-size:15px}
.tk-ticket .tk-big{font-size:32px;color:var(--ink)}
.tk-ticket .tk-note{margin-top:0;background:var(--paper)}
@media (max-width:960px){ .tk-hero{grid-template-areas:"copy" "auth"} }

/* the campus events page: every event clubs chose to list, by day */
.cp-hero{margin-top:48px;max-width:780px;container-type:inline-size}
.cp-sub{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.cp-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:44px}
.cp-search{flex:1;min-width:220px;max-width:380px}
.cp-list{display:flex;flex-direction:column;gap:30px;margin-top:22px}
.cp-day h2{font-family:var(--f-display);font-size:20px;margin:0}
.cp-ev{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:16px;align-items:start;background:var(--surface);border-radius:12px;padding:16px 18px;margin-top:10px}
.cp-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:56px;border-radius:10px;background:var(--paper);line-height:1}
.cp-date .m{font-size:12px;font-weight:700;text-transform:uppercase;color:var(--accent);letter-spacing:.04em}
.cp-date .d{font-family:var(--f-display);font-size:22px;font-weight:800;margin-top:3px}
.cp-main{min-width:0}
.cp-main h3{font-size:18px;line-height:1.25}
.cp-meta{margin-top:4px;font-size:15px}
.cp-club{margin-top:2px;font-size:14px;color:var(--muted);font-weight:600}
.cp-blurb{margin-top:8px;font-size:15px;color:var(--muted);white-space:pre-wrap;max-width:62ch}
.cp-act{align-self:center}
.cp-empty{color:var(--muted);padding:24px 0}
.tk-more{margin-top:22px;font-size:15px}
@media (max-width:640px){
  .cp-ev{grid-template-columns:48px minmax(0,1fr);gap:12px 14px;padding:14px}
  .cp-date{width:48px;height:48px}
  .cp-act{grid-column:2;justify-self:start}
}