/* Common Era - the front door.

   The simple page that goes up first at tbdtcg.com: join with a code, sign in,
   see your portals, ask for one. The animated site in the repo root carries on
   separately and replaces this page when it is ready.

   Same design system as the portals - identical tokens, Public Sans for the
   interface, DM Serif Display for the name, one grey accent - so moving from
   here into the Artist or Dev Portal never feels like arriving somewhere else.
   The only colour the page introduces is for the two states a form can be in:
   something went wrong, and something worked. */

:root{
  --bg:#ECEBE9; --surface:#FEFEFD; --surface-2:#F4F3F1; --surface-3:#E9E8E5;
  --border:#E3E1DE; --border-strong:#C9C6C1;
  --text:#1B1A18; --text-2:#63615C; --text-3:#918E88;
  --accent:#6E6B65; --accent-hover:#57544F; --accent-soft:rgba(110,107,101,.13); --accent-on:#FFFFFF;
  --danger:#B3402E; --success:#4A6B3A; --success-soft:rgba(74,107,58,.10);
  --shadow:0 1px 2px rgba(28,26,22,.09),0 4px 12px rgba(28,26,22,.07);
  --font-ui:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'DM Serif Display',Georgia,serif;
  --r:6px; --r-sm:4px; --r-lg:8px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#282725; --surface:#2F2E2C; --surface-2:#373533; --surface-3:#403E3B;
    --border:#3F3D3A; --border-strong:#55524D;
    --text:#EAE9E6; --text-2:#A5A39E; --text-3:#7C7A75;
    --accent:#A9A69F; --accent-hover:#BEBBB4; --accent-soft:rgba(169,166,159,.16); --accent-on:#1A1917;
    --danger:#EF8878; --success:#8FC47A; --success-soft:rgba(143,196,122,.12);
    --shadow:0 1px 2px rgba(0,0,0,.45),0 4px 14px rgba(0,0,0,.38);
  }
}
:root[data-theme="dark"]{
  --bg:#282725; --surface:#2F2E2C; --surface-2:#373533; --surface-3:#403E3B;
  --border:#3F3D3A; --border-strong:#55524D;
  --text:#EAE9E6; --text-2:#A5A39E; --text-3:#7C7A75;
  --accent:#A9A69F; --accent-hover:#BEBBB4; --accent-soft:rgba(169,166,159,.16); --accent-on:#1A1917;
  --danger:#EF8878; --success:#8FC47A; --success-soft:rgba(143,196,122,.12);
  --shadow:0 1px 2px rgba(0,0,0,.45),0 4px 14px rgba(0,0,0,.38);
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{background:var(--bg);color:var(--text);font:400 15px/1.6 var(--font-ui);
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;}
[hidden]{display:none!important;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---- header ---- */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 24px;border-bottom:1px solid var(--border);background:var(--surface);}
.brand{font:700 18px/1.2 var(--font-ui);color:var(--text);text-decoration:none;letter-spacing:.01em;}
.top-right{display:flex;align-items:center;gap:14px;min-width:0;}
.who{font-size:12.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32ch;}
.seg{display:flex;gap:2px;padding:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);}
.seg button{border:none;background:none;color:var(--text-3);font:600 12px/1 var(--font-ui);
  padding:6px 10px;border-radius:3px;cursor:pointer;}
.seg button:hover{color:var(--text);}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(28,26,22,.12);}

/* ---- the column ---- */
.door{flex:1;width:100%;max-width:600px;margin:0 auto;padding:56px 24px 64px;}
.view{animation:enter .22s ease;}
@keyframes enter{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.view{animation:none;}}

h1{font:400 56px/1.05 var(--font-display);margin:10px 0 18px;letter-spacing:.005em;}
h2{font:400 30px/1.2 var(--font-display);margin:6px 0 20px;}
.line{font-size:18px;line-height:1.55;color:var(--text);margin:0 0 12px;}
.sub{font-size:15px;line-height:1.6;color:var(--text-2);margin:0 0 30px;}
/* the art and the game, under the opening lines and above the buttons */
.about{border-top:1px solid var(--border);padding-top:26px;margin:18px 0 30px;
  display:flex;flex-direction:column;gap:24px;}
.about p{margin:0;font-size:15px;line-height:1.65;color:var(--text-2);}
/* each point leads with its own line: larger, bold, in the strongest ink */
.point h3{margin:0 0 6px;font:700 15.5px/1.35 var(--font-ui);letter-spacing:.02em;color:var(--text);}
.about .welcome{font:400 29px/1.25 var(--font-display);color:var(--text);}

/* The three points open and close: only the lead line shows until it is
   clicked. visibility follows the height, so a closed point's words can't be
   tabbed into or read out, and the local copy pencils don't show for them. */
/* a hairline between the points; the row reaches a little past the column on
   each side so its hover tint has room around the words */
.about:has(> .fold){gap:0;padding-top:10px;}
.fold + .fold{border-top:1px solid var(--border);}
.fold-head{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 -14px!important;padding:14px;border-radius:var(--r);user-select:none;
  transition:background .18s,color .18s;}
.fold-head:hover,.fold-head:focus-visible{background:var(--surface-2);}
.fold-head::after{content:'';flex:none;width:8px;height:8px;margin-right:6px;
  border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);
  transform:translateY(-3px) rotate(45deg) scale(1);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .18s;}
.fold-head:hover::after,.fold-head:focus-visible::after{border-color:var(--text);
  transform:translateY(-2px) rotate(45deg) scale(1.55);}
.fold.open .fold-head::after{transform:translateY(2px) rotate(-135deg) scale(1);}
.fold.open .fold-head:hover::after{transform:translateY(2px) rotate(-135deg) scale(1.55);}
.fold-body{display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .32s cubic-bezier(.2,.7,.2,1),visibility 0s .32s;}
.fold.open .fold-body{grid-template-rows:1fr;visibility:visible;transition-delay:0s;}
.fold-in{min-height:0;overflow:hidden;}
.fold-in p{padding:0 0 16px;}
@media (prefers-reduced-motion:reduce){.fold-body,.fold-head::after{transition:none;}}
.about + .about{margin-top:0;}
.who-line{margin:-12px 0 20px;font-size:13px;color:var(--text-3);}
.aside{font-size:13.5px;color:var(--text-3);margin:16px 0 0;}
.pending{font-size:13.5px;color:var(--text-2);background:var(--accent-soft);border-radius:var(--r-sm);
  padding:9px 12px;margin:-6px 0 16px;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text);
  font:500 14px/1 var(--font-ui);padding:11px 18px;border-radius:var(--r-sm);cursor:pointer;
  text-decoration:none;transition:background .12s,border-color .12s,color .12s;}
.btn:hover{background:var(--surface-2);border-color:var(--text-3);}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-on);font-weight:600;}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-on);}
.btn:disabled{opacity:.55;cursor:default;}
.btn-lg{padding:15px 20px;font-size:15px;}
.choices{display:flex;flex-direction:column;gap:10px;}
.choices .btn.on{border-color:var(--text-2);box-shadow:0 0 0 1px var(--text-2);}

/* The forms open under the buttons. The rows trick animates to the form's own
   height, whatever it is; the padding lets focus rings and shadows show past
   the clipping edge. */
.reveal{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1),margin-top .4s;}
.reveal.open{grid-template-rows:1fr;margin-top:28px;}
.reveal-in{min-height:0;overflow:hidden;padding:4px;margin:-4px;}
.reveal h2{font-size:24px;margin:0 0 14px;}
@media (prefers-reduced-motion:reduce){.reveal{transition:none;}}
.back{border:none;background:none;padding:0;font:500 13px/1 var(--font-ui);color:var(--text-3);cursor:pointer;}
.back::before{content:'\2190\00a0';}
.back:hover{color:var(--text);}
.link{border:none;background:none;padding:0;font:inherit;color:var(--text-2);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;}
.link:hover{color:var(--text);}
.row-links{display:flex;flex-wrap:wrap;gap:22px;margin-top:22px;font-size:14px;}

/* ---- forms ---- */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:14px;}
.field{display:flex;flex-direction:column;gap:6px;margin:0;border:none;padding:0;min-width:0;}
.field > span,.field > legend{font-size:12.5px;font-weight:600;color:var(--text-2);padding:0;}
.field input,.field textarea,.field select{width:100%;background:var(--surface);color:var(--text);
  border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:10px 12px;
  font:400 14.5px/1.4 var(--font-ui);outline:none;transition:border-color .12s,box-shadow .12s;}
.field textarea{resize:vertical;min-height:78px;}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.hint{font-style:normal;font-size:12px;color:var(--text-3);}
.code-input{font:500 20px/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:14px 12px!important;}

.checks{display:flex;flex-wrap:wrap;gap:8px;}
.check{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--border-strong);
  border-radius:var(--r-sm);cursor:pointer;font-size:14px;user-select:none;white-space:nowrap;flex:0 1 auto;justify-content:flex-start;}
.check input{margin:0;accent-color:var(--accent);}
.check:has(input:checked){border-color:var(--accent);background:var(--accent-soft);}
.check.have{opacity:.5;cursor:default;}

/* the portal-specific questions sit in their own box; give them the same
   rhythm as the fields above so the form reads as one list */
#req-fields{display:flex;flex-direction:column;gap:14px;}
#req-fields:not(:has(.field:not([hidden]))){display:none;}

.msg{margin:0;min-height:1em;font-size:13.5px;line-height:1.5;color:var(--danger);}
.msg:empty{display:none;}
.msg.ok{color:var(--success);}

/* what a code opens, before anything is asked for */
.opens{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 18px;}
.chip{display:inline-flex;align-items:baseline;gap:6px;font-size:13.5px;font-weight:600;
  background:var(--success-soft);color:var(--success);border-radius:99px;padding:6px 12px;}
.chip small{font-weight:500;opacity:.8;}

/* ---- portals ---- */
.portals{display:flex;flex-direction:column;gap:10px;}
.portal{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--shadow);}
.portal .p-name{font-weight:600;font-size:15px;}
.portal .p-role{display:block;font-size:12.5px;color:var(--text-3);margin-top:1px;}
.portal.off{background:transparent;box-shadow:none;border-style:dashed;border-color:var(--border-strong);}
.portal.off .p-name{color:var(--text-2);}

/* ---- the owner's code tools ---- */
.owner{margin-top:44px;padding-top:30px;border-top:1px solid var(--border);}
.owner h3{font:600 13px/1.3 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 12px;}
.owner h3 + .panel{margin-bottom:18px;}
.owner .codes{margin-top:0;}
.check small{font-size:11.5px;color:var(--text-3);}
.made{background:var(--success-soft);border-radius:var(--r-lg);padding:18px 20px;margin:0 0 26px;text-align:center;}
.made-code{font:500 26px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em;
  color:var(--text);user-select:all;margin-bottom:8px;}
.made-info{font-size:13.5px;color:var(--text-2);margin-bottom:6px;}
.codes{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r);
  background:var(--surface);}
.code-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:4px 14px;align-items:center;
  padding:10px 14px;border-top:1px solid var(--border);font-size:13.5px;}
.code-row:first-child{border-top:none;}
.code-hint{font:500 13px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--text-2);}
.code-what small{display:block;font-size:12px;color:var(--text-3);}
.code-st{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);}
.code-st.st-waiting{color:var(--success);}

/* ---- footer ---- */
.foot{padding:20px 24px;text-align:center;font-size:12.5px;color:var(--text-3);}
.foot a{color:inherit;}

@media (max-width:520px){
  .door{padding:36px 18px 48px;}
  h1{font-size:44px;}
  .who{display:none;}
}