/* portal.css - the contributors' portal's way in (SK-0277), in the brand's style (PR-10).
   FOR THE SERVING UNIT. The three font files below are the site's own, already in the repository. They are referenced by
   a relative URL and never copied, so whoever serves design/portal/ must serve these three paths at the same relative
   place (one level up from this file):
     ../site/fonts/source-serif-4/ChazutSerif-Roman.90c54d7b.woff2
     ../site/fonts/source-serif-4/ChazutSerif-Italic.cc22a432.woff2
     ../site/fonts/jetbrains-mono/JetBrainsMono-Roman.40d30b5b.woff2
   (type font/woff2). Nothing here comes from another host. The tokens that this file shares with
   design/site/_style.part's first :root block (--ground .. --mono) have the same values. */
@font-face{font-family:"Chazut Serif";src:url("../site/fonts/source-serif-4/ChazutSerif-Roman.90c54d7b.woff2") format("woff2");font-style:normal;font-weight:400 600;font-display:swap}
@font-face{font-family:"Chazut Serif";src:url("../site/fonts/source-serif-4/ChazutSerif-Italic.cc22a432.woff2") format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../site/fonts/jetbrains-mono/JetBrainsMono-Roman.40d30b5b.woff2") format("woff2");font-style:normal;font-weight:400 600;font-display:swap}
:root{--ground:#14130F;--ground-2:#1C1A16;--paper:#F7F6F2;--paper-2:#EFEDE6;--ink:#16181D;--muted:#5A6068;
  --onDark:#EDEAE1;--onDark-m:rgba(237,234,225,.58);--primary:#175E63;--lit:#8FB3A9;
  --onDark-line:rgba(237,234,225,.42);--primary-hover:#0F474B;--dark-2nd:#A8A49A;--hair:rgba(22,24,29,.16);--grid:rgba(22,24,29,.052);
  --white:#fff;--onDark-grid:rgba(237,234,225,.05);--onDark-rule:rgba(237,234,225,.13);--onDark-edge:rgba(237,234,225,.28);--onDark-on:rgba(237,234,225,.14);
  --serif:"Chazut Serif",Georgia,serif;--sans:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--mono:"JetBrains Mono",Consolas,monospace}

/* the two grounds. Dark is the way in's sheet; paper is the consent face and the founder's page. A face that is paper says so
   with the class "paper"; the page theme follows the face that shows (:target), with no script. */
body{--bg:var(--ground);--fg:var(--onDark);--fg2:var(--dark-2nd);--kk:var(--lit);--fbg:var(--ground-2);--fline:var(--onDark-line);
  --panel:var(--ground-2);--lnk:var(--lit);--fo:var(--lit);--gridc:var(--onDark-grid);--rl:var(--onDark-rule);--sw:var(--onDark-edge);--swon:var(--onDark-on);--swm:var(--onDark-m)}
body.paper,body:has(.face.paper:target,.face.paper :target){--bg:var(--paper);--fg:var(--ink);--fg2:var(--muted);--kk:var(--primary);--fbg:var(--white);--fline:var(--muted);
  --panel:var(--white);--lnk:var(--primary);--fo:var(--primary);--gridc:var(--grid);--rl:var(--hair);--sw:var(--hair);--swon:var(--paper-2);--swm:var(--muted)}
*{box-sizing:border-box}
body{position:relative;margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shell{min-height:100vh;display:flex;flex-direction:column;
  background-image:linear-gradient(var(--gridc) 1px,transparent 1px),linear-gradient(90deg,var(--gridc) 1px,transparent 1px);background-size:34px 34px}
html{color-scheme:dark}html:has(body.paper),html:has(.face.paper:target,.face.paper :target){color-scheme:light}
/* a skip link per face (AMEND-1): only the shown face's is rendered, so it is the one in the tab order */
.skip{display:none;position:absolute;left:8px;top:-80px;z-index:5;margin:0}
.skip:focus-within{top:8px}
.shell:not(:has(.face:target,.face :target)) .skip:first-child{display:block}
.shell:has(#code-entry:target,#code-entry :target) #skip-code-entry{display:block}
.shell:has(#greeting:target,#greeting :target) #skip-greeting{display:block}
.shell:has(#bind-email:target,#bind-email :target) #skip-bind-email{display:block}
.shell:has(#bind-code:target,#bind-code :target) #skip-bind-code{display:block}
.shell:has(#consent:target,#consent :target) #skip-consent{display:block}
.shell:has(#code-unknown:target,#code-unknown :target) #skip-code-unknown{display:block}
.shell:has(#code-used:target,#code-used :target) #skip-code-used{display:block}
.shell:has(#code-expired:target,#code-expired :target) #skip-code-expired{display:block}
.shell:has(#sign-in:target,#sign-in :target) #skip-sign-in{display:block}
.shell:has(#sign-in-code:target,#sign-in-code :target) #skip-sign-in-code{display:block}
.shell:has(#invite-new:target,#invite-new :target) #skip-invite-new{display:block}
.shell:has(#invite-made:target,#invite-made :target) #skip-invite-made{display:block}
.shell:has(#invite-list:target,#invite-list :target) #skip-invite-list{display:block}
.skip a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--primary);color:var(--white);font-size:14.5px}

/* header: the canonical lockup (front page lines 90-103). The language switch is drawn over its right end. */
.wayhead{display:flex;align-items:center;min-height:72px;padding:0 140px 0 32px;border-bottom:1px solid var(--rl)}
.lk{display:flex;align-items:center;gap:6.2px;line-height:1}
.lk .mk svg{display:block;color:var(--fg);--mark-shade:var(--paper);--mark-dark:var(--ground)}
.lk.md{gap:8.9px}.lk.md .mk svg{width:60.6px;height:52px}.lk.md .n{font-size:21.8px}.lk.md .f{font-size:9.15px}
.lk.lkcard{gap:7.5px}.lk.lkcard .mk svg{width:51.2px;height:44px}.lk.lkcard .n{font-size:18.4px}.lk.nof .f{display:none}
.wm{display:flex;flex-direction:column}
.wm .n{font-family:var(--serif);font-weight:600;letter-spacing:.14em;color:var(--fg)}
.wm .f{font-family:var(--serif);font-weight:400;letter-spacing:.30em;margin-top:.45em;color:var(--fg2)}
.lang{position:absolute;top:14px;right:32px;z-index:4;display:inline-flex;margin:0;padding:0;border:1px solid var(--sw)}
.lang .lgb{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.04em;color:var(--swm);text-decoration:none;white-space:nowrap}
.lang .lgb[aria-current]{background:var(--swon);color:var(--fg);font-weight:500;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.lang .lgb:hover{color:var(--fg)}
.lang .lgb:focus-visible{outline-offset:-3px}

/* the faces: one shows at a time. With no fragment the first shows; <file>#<id> shows that face. */
main{flex:1;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:48px 24px 64px}
.face{display:none;flex-direction:column;gap:12px;width:100%;max-width:440px;padding:34px 36px 36px;background:var(--panel);
  clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%)}
.face.wide{max-width:1040px}
.face{min-width:0}
.face{scroll-margin-top:200px}
main>.face:first-child{display:flex}
main:has(.face:target,.face :target)>.face:first-child:not(:target):not(:has(:target)){display:none}
.face:is(:target,:has(:target)){display:flex}
body.paper .face,body:has(.face.paper:target,.face.paper :target) .face{border:1px solid var(--hair)}

/* type */
.rule{height:1px;width:96px;background:var(--lit);margin:2px 0 4px}
.kick{font-family:var(--mono);font-size:13.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--kk);margin:4px 0 0}
.k{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--kk);margin:10px 0 0;padding:0}
h1{font-family:var(--serif);font-weight:400;margin:4px 0 2px;text-wrap:balance;font-size:36px;line-height:1.05;letter-spacing:-.028em}
h1.mid{font-size:27px;line-height:1.1;letter-spacing:-.022em}
h1.otph{font-size:17px;line-height:1.5;letter-spacing:0}
.lede{font-family:var(--serif);font-size:19px;margin:0}.lede.sm{font-size:17px;line-height:1.5}
.fine{margin:0;font-size:13.5px;color:var(--fg2)}.fine p{margin:0 0 4px}
.lbl{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;margin-top:10px;padding:0;color:var(--fg2)}
.code,.mono{font-family:var(--mono);letter-spacing:.06em;overflow-wrap:anywhere}.code{font-size:19px}
b{font-weight:600;overflow-wrap:anywhere}
@media (min-width:601px){body:not(.paper) .face:not(.paper) h1.mid{font-size:36px;line-height:1.05;letter-spacing:-.028em}}
a{color:var(--lnk);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--fo);outline-offset:2px}

/* controls: the front page's .give and .ghost; focus is a 2 px outline (lit on dark, petrol on paper) */
.frm{display:flex;flex-direction:column;gap:12px}
.inp{width:100%;min-height:44px;padding:10px 12px;font:inherit;font-size:16px;border-radius:0;background:var(--fbg);color:var(--fg);border:1px solid var(--fline)}
.otpw{--cell:min(44px,calc((100vw - 74px)/6));--gap:6px;--p:calc(var(--cell) + var(--gap));--oline:var(--fline);--ofill:var(--fbg);width:calc(var(--cell)*6 + var(--gap)*5);max-width:100%;overflow:hidden}
.otpw:focus-within{outline:2px solid var(--fo);outline-offset:2px}
.otp-field{width:calc(100% + 40px);height:54px;margin:0;padding:0 0 0 calc((var(--cell) - 1ch)/2);border:0;border-radius:0;font-family:var(--mono);font-size:22px;letter-spacing:calc(var(--p) - 1ch);text-align:left;color:var(--fg);background-color:transparent;outline:0;background-image:repeating-linear-gradient(90deg,var(--oline) 0 1px,transparent 1px calc(var(--cell) - 1px),var(--oline) calc(var(--cell) - 1px) var(--cell),transparent var(--cell) var(--p)),repeating-linear-gradient(90deg,var(--oline) 0 var(--cell),transparent var(--cell) var(--p)),repeating-linear-gradient(90deg,var(--oline) 0 var(--cell),transparent var(--cell) var(--p)),repeating-linear-gradient(90deg,var(--ofill) 0 var(--cell),transparent var(--cell) var(--p));background-repeat:no-repeat;background-position:0 0,0 0,0 100%,0 0;background-size:calc(var(--cell)*6 + var(--gap)*5) 100%,calc(var(--cell)*6 + var(--gap)*5) 1px,calc(var(--cell)*6 + var(--gap)*5) 1px,calc(var(--cell)*6 + var(--gap)*5) 100%}
.btn,.act a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;font:inherit;font-size:14.5px;font-weight:600;
  border-radius:0;cursor:pointer;border:1px solid var(--primary);text-decoration:none}
.act{margin:0}
.btn.pri,.act.pri a{background:var(--primary);color:var(--white)}.btn.pri:hover,.act.pri a:hover{background:var(--primary-hover);border-color:var(--primary-hover);text-decoration:none}
.act.ghostbtn a,.act.ghost a{background:transparent;color:var(--fg);border-color:var(--fline)}.act.ghostbtn a:hover,.act.ghost a:hover{border-color:var(--fg);text-decoration:none}
.act a{display:block;box-sizing:border-box;width:100%;padding:11px 20px;line-height:20px;text-align:center}
.act.ghost a{font-weight:400;color:var(--lnk)}
.nb{white-space:nowrap}
.lnkp{margin:0;align-self:flex-start}
.lnkp a{min-height:44px;display:inline-flex;align-items:center;font-size:14.5px}
.lb{min-height:44px;min-width:44px;padding:0 4px;margin-right:14px;border:0;background:none;font:inherit;font-size:14.5px;color:var(--lnk);cursor:pointer}.lb:hover{text-decoration:underline}
.acts{display:flex;flex-wrap:wrap;align-items:center}.acts .lnkp{margin-right:20px}
.msgs{display:contents}
/* a message is told by its words, its triangle and the ground's own ink or petrol - never by a new colour */
.err,.busy,.copied{display:flex;gap:8px;align-items:flex-start;margin:0;padding:8px 10px;border:1px solid var(--kk);font-size:14px;line-height:20px;color:var(--fg)}
.err::before{content:"";flex:none;width:16px;height:14px;margin-top:3px;background:var(--kk);clip-path:polygon(50% 0,100% 100%,0 100%)}
.busy,.copied{border-style:dashed}

/* checkboxes and radios: the input is invisible and covers its whole label (44 px or more); the square is drawn beside it */
.chk{position:relative;display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:10px 0;font-size:15px;line-height:22px}
.chk input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.chk .ck{flex:none;width:24px;height:24px;display:grid;place-items:center;border:2px solid var(--fline);background:var(--fbg)}
.chk input[type=radio]+.ck{border-radius:50%}
.chk input:checked+.ck{background:var(--primary);border-color:var(--primary)}
.chk input:checked+.ck::after{content:"";width:6px;height:11px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.chk input[type=radio]:checked+.ck::after{width:8px;height:8px;border:0;border-radius:50%;background:var(--white);transform:none}
.chk input:focus-visible+.ck{outline:2px solid var(--fo);outline-offset:2px}
.chk.sm{min-height:44px;font-size:14.5px}
.credit-q:has(#cr-none:checked) .chk.opt{display:none}
.frm:has(#c-auth:not(:checked)) button[type=submit],.frm:has(#c-terms:not(:checked)) button[type=submit]{background:transparent;color:var(--muted);border-color:var(--muted);cursor:not-allowed}

/* the consent face */
.legal{border-top:1px solid var(--rl);border-bottom:1px solid var(--rl);padding:6px 0;font-size:15px;font-family:var(--serif)}
.legal p{margin:6px 0}.pending{color:var(--fg2);font-style:italic;font-size:13.5px;margin:4px 0}
.credit-q{border:1px solid var(--rl);padding:8px 12px 10px;margin:4px 0;background:var(--white);min-width:0}.credit-q legend{padding:0 4px}
.credit-q .fine{margin-bottom:2px}
.pv{margin:2px 0 0;font-family:var(--serif);font-size:15px;line-height:20px;min-height:20px}.pv p{display:none;margin:0}
.credit-q:not(:has(input:checked)) .pv .pv-none{display:block}
.credit-q:has(#cr-title:checked) .pv .pv-title,.credit-q:has(#cr-name:checked) .pv .pv-name,.credit-q:has(#cr-spec:checked) .pv .pv-spec,.credit-q:has(#cr-cred:checked) .pv .pv-cred{display:inline}
.credit-q:has(#cr-name:checked) .pv .pv-title::after{content:"\00a0"}
.credit-q:has(#cr-title:checked,#cr-name:checked) .pv .pv-spec::before{content:" \00b7  "}
.credit-q:has(#cr-title:checked,#cr-name:checked,#cr-spec:checked) .pv .pv-cred::before{content:" \00b7  "}
.credit-q:has(#cr-none:checked) .pv p{display:none!important}
.credit-q:has(#cr-none:checked) .pv .pv-hidden{display:block!important}

/* the invitation card: business-card proportions (85 x 55 mm), a 45-degree chamfer from the mark's own angle. It is always dark. */
.card{--bg:var(--ground);--fg:var(--onDark);--fg2:var(--dark-2nd);--kk:var(--lit);--lnk:var(--lit);background:var(--ground);color:var(--onDark);color-scheme:dark;
  width:440px;max-width:100%;min-height:285px;padding:20px 22px;display:grid;grid-template-columns:1fr 96px;gap:14px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.cardtext{display:flex;flex-direction:column;gap:2px;min-width:0}.cardtext p{margin:0}
.card-inv{margin-top:6px!important;font-family:var(--serif);font-size:18px;line-height:1.2}.card-name{font-family:var(--serif);font-weight:600}
.card .k{margin-top:6px}.card .code{font-size:16px}.card .fine{font-size:12px}
.card-where{font-family:var(--sans);font-size:17px}
.qrcol{display:flex;flex-direction:column;justify-content:flex-end;gap:6px}.qrcol .fine{font-size:12px;line-height:1.3}
.qr{width:96px;height:96px;background:repeating-conic-gradient(var(--onDark) 0 25%,var(--ground) 0 50%) 0 0/12px 12px;border:6px solid var(--onDark)}
.bubble{max-width:440px;background:var(--paper);color:var(--ink);border:1px solid var(--hair);padding:12px 14px;font-size:15px;line-height:22px}
.tblwrap{overflow-x:auto}
.tbl{border-collapse:collapse;width:100%;font-size:15px}.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rl);vertical-align:middle;white-space:nowrap}
.tbl th{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--fg2);font-weight:400}
.days{width:120px}.durrow{display:flex;align-items:center;gap:10px}
.chmail{display:grid;gap:8px;max-width:520px;margin-top:8px;padding-top:16px;border-top:1px solid var(--rl)}.chmail .pending{margin:0}
.chmail h2{font-family:var(--serif);font-weight:400;margin:0;font-size:22px;line-height:1.15;letter-spacing:-.02em}
.foot{padding:0 32px 32px}

/* a phone: the same page below 600 px, the phone's measures (the rated mock's @media (max-width:600px)) */
@media (max-width:600px){
  body{font-size:14px;line-height:20px}
  .wayhead{min-height:72px;padding:0 128px 0 22px;border-bottom:0}
  .lk.md{gap:6.2px}.lk.md .mk svg{width:41.9px;height:36px}.lk.md .n{font-size:15.1px}.lk.md .f{display:none}
  .lang{right:16px}
  main{display:block;padding:0}
  .face,.face.wide{max-width:none;padding:12px 22px 28px;background:transparent;clip-path:none}
  body.paper .face,body:has(.face.paper:target,.face.paper :target) .face{border:0}
  h1{font-size:32px;line-height:36px}h1.mid{font-size:22px;line-height:28px}h1.otph{font-size:15px;line-height:20px}
  .otp-field{font-size:16px}
  .lede,.lede.sm{font-size:15px;line-height:20px}.fine{font-size:12px;line-height:16px}.pending{font-size:12px;line-height:16px}
  .kick{font-size:12px}.btn,.act a,.lnkp a,.lb,.chk,.chk.sm{font-size:14px;line-height:20px}.legal{font-size:14px;line-height:20px}
  .card{width:100%;grid-template-columns:1fr;clip-path:none}
  .qrcol{flex-direction:row;align-items:center;gap:12px;justify-content:flex-start}
  .bubble{max-width:none}
  .foot{padding:0 22px 28px}
}
@media (forced-colors:active){
  .face{border:1px solid CanvasText}
  .lang .lgb[aria-current]{border:2px solid Highlight;background:Canvas;color:CanvasText;forced-color-adjust:none}
  .chk .ck{border-color:CanvasText;background:Canvas;forced-color-adjust:none}
  .chk input:checked+.ck{background:Highlight;border-color:Highlight}
  .chk input:checked+.ck::after{border-color:HighlightText}.chk input[type=radio]:checked+.ck::after{background:HighlightText}
  .err,.busy,.copied{border-color:CanvasText}.err::before{background:CanvasText;forced-color-adjust:none}
  .otpw{--oline:CanvasText;--ofill:Canvas}.otp-field{forced-color-adjust:none;color:CanvasText}
  .qr{forced-color-adjust:none}
}
@media print{
  body{background:var(--white)}.shell{background-image:none}
  .skip,.wayhead,.lang,.foot,#invite-made>*:not(.cardwrap){display:none!important}
  main{padding:0;display:block}
  #invite-made{border:0;padding:0;clip-path:none}
  .card{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}
@media print{.tblwrap{overflow:visible}.tbl th,.tbl td{white-space:normal}}