/* The forms: joining with a code, signing in, your portals, asking for access.

   Shared by both versions of the front page - front/index.html (the basic one)
   and index.html (the full one), which lays the same markup into its last
   panel. Every rule is scoped to .door, the element that holds the forms, so it
   can sit inside the full site's own stylesheet without either restyling the
   other. front.js drives it on both. */

/* ---- buttons ---- */
.door .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;}
.door .btn:hover{background:var(--surface-2);border-color:var(--text-3);}
.door .btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-on);font-weight:600;}
.door .btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-on);}
.door .btn:disabled{opacity:.55;cursor:default;}
.door .btn-lg{padding:15px 20px;font-size:15px;}
.door .choices{display:flex;flex-direction:column;align-items:center;gap:10px;}
.door .choices .btn{width:100%;max-width:290px;}
.door .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. */
.door .reveal{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1),margin-top .4s;}
.door .reveal.open{grid-template-rows:1fr;margin-top:28px;}
.door .reveal-in{min-height:0;overflow:hidden;padding:4px;margin:-4px;}
.door .reveal h2{font-size:24px;margin:0 0 14px;}
@media (prefers-reduced-motion:reduce){.door .reveal{transition:none;}}
.door .back{border:none;background:none;padding:0;font:500 13px/1 var(--font-ui);color:var(--text-3);cursor:pointer;}
.door .back::before{content:'\2190\00a0';}
.door .back:hover{color:var(--text);}
.door .link{border:none;background:none;padding:0;font:inherit;color:var(--text-2);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;}
.door .link:hover{color:var(--text);}
.door .row-links{display:flex;flex-wrap:wrap;gap:22px;margin-top:22px;font-size:14px;}

/* The account: a picture and a name, and the whole of it is the button - the
   same shape every portal wears at the foot of its sidebar. Signing out is
   inside the window it opens, so nothing else sits beside it. */
.door #whoami{padding-left:8px;}   /* the button's own hover padding, given back */
.door .whoami{display:inline-flex;align-items:center;gap:8px;max-width:100%;flex:0 0 auto;
  margin:-4px -8px;padding:4px 8px;border:0;border-radius:var(--r-sm);
  background:none;font:inherit;color:var(--text-2);cursor:pointer;transition:background .1s,color .1s;}
.door .whoami:hover{background:var(--surface-2);color:var(--text);}
.door .whoami-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;}

/* ---- forms ---- */
.door .formbox{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;}
.door .field{display:flex;flex-direction:column;gap:6px;margin:0;border:none;padding:0;min-width:0;}
.door .field > span,.door .field > legend{font-size:12.5px;font-weight:600;color:var(--text-2);padding:0;}
.door .field input,.door .field textarea,.door .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;}
.door .field textarea{resize:vertical;min-height:78px;}
.door .field input:focus,.door .field textarea:focus,.door .field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.door .hint{font-style:normal;font-size:12px;color:var(--text-3);}
.door .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;}

/* A row of choices is the portals' segmented control: one bar, the parts
   flush against each other with hairlines between, the chosen ones filled.
   Several can be on at once - the checkbox itself is hidden, and the fill is
   what says which are picked. */
.door .checks{display:flex;align-items:stretch;border:1px solid var(--border-strong);
  border-radius:var(--r-sm);overflow:hidden;background:var(--surface);margin-top:7px;}
.door .check{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;
  height:36px;padding:0 10px;border:none;border-radius:0;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--text-2);white-space:nowrap;user-select:none;
  transition:background .1s,color .1s;}
.door .check + .check{border-left:1px solid var(--border-strong);}
.door .check input{position:absolute;width:1px;height:1px;opacity:0;margin:0;}
.door .check:hover{background:var(--surface-2);color:var(--text);}
.door .check:has(input:checked){background:var(--accent);color:var(--accent-on);}
.door .check:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-3px;}
.door .check.have{opacity:.5;cursor:default;}
.door .check.have:hover{background:none;color:var(--text-2);}

/* 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 */
.door #req-fields{display:flex;flex-direction:column;gap:14px;}
.door #req-fields:not(:has(.field:not([hidden]))){display:none;}

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

/* what a code opens, before anything is asked for */
.door .opens{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 18px;}
.door .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;}
.door .chip small{font-weight:500;opacity:.8;}

/* ---- portals ----
   A table of cards. Three columns - which portal, what you are in it and what
   that lets you do, and the way in - named once in a header above them.

   Headers only mean anything if the columns line up, so the first is a fixed
   width - the widest portal name and a little room - and the header row
   carries the cards' own padding and border, putting its words exactly over
   theirs. A name longer than that column wraps, which is the price of the
   four of them lining up. The last column is only as wide as its
   button, which differs from card to card, but every button ends at the same
   right edge and the header is set to that edge rather than to a width.

   Each portal wears its own colour on its name - the same four the portals
   themselves wear, and Admin beside them. They are set here because this
   stylesheet is used by both versions of the page and neither one's tokens
   know about them. */
.door{--hue-dev:#D9924A; --hue-art:#6FA3C4; --hue-events:#6FAE80; --hue-play:#D8B14A;}
:root[data-theme="light"] .door{--hue-dev:#B4640E; --hue-art:#4E6A7C; --hue-events:#3E744C; --hue-play:#8A6E12;}
.door .portals{display:flex;flex-direction:column;gap:10px;}
.door .p-head,.door .portal{display:grid;grid-template-columns:112px 1fr auto;gap:14px;align-items:center;}
/* The name sits level with the role beside it rather than halfway down a
   description of whatever length, which is what makes the four read across
   as rows. The button keeps the middle of its card. */
.door .portal{align-items:start;}
.door .portal > .btn{align-self:center;}
.door .p-head{padding:0 19px 2px;font-size:11px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-3);text-align:left;}
/* Each header sits over its column the way the column reads: the portal at
   the left where its name starts, the role across the middle, the way in at
   the right edge every button ends on. Access was centred over the buttons
   for a while; it cost the description sixty pixels on every row whose button
   is short, which is most of them, and the words are worth more. */
.door .p-head span:nth-child(2){text-align:center;}
.door .p-head span:last-child{text-align:right;}
.door .portal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--shadow);}
.door .portal > .btn{grid-column:3;}
.door .portal .p-name{display:block;font-weight:600;font-size:15px;}
.door .portal.p-dev .p-name{color:var(--hue-dev);}
.door .portal.p-art .p-name{color:var(--hue-art);}
.door .portal.p-events .p-name{color:var(--hue-events);}
.door .portal.p-play .p-name{color:var(--hue-play);}
/* The middle column: the role as a line of its own, and under it what the
   role lets this account do - the sentence the letter carries when a portal
   is opened for somebody, written in Admin under Notices. */
.door .portal .p-role{display:block;font-size:13.5px;font-weight:600;color:var(--text);}
.door .portal .p-words{display:block;font-size:13px;line-height:1.45;color:var(--text-2);margin-top:3px;}
.door .portal.off{background:transparent;box-shadow:none;border-style:dashed;border-color:var(--border-strong);}
.door .portal.off .p-name{color:var(--text-2);}

/* A phone has no room for three columns, and nothing for the header to name:
   the portal and what it lets you do stack up the left, and the way in keeps
   the right. */
@media (max-width:640px){
  .door .p-head{display:none;}
  .door .portal{grid-template-columns:1fr auto;gap:7px 14px;}
  /* the top line is the name and the button, and the button is the taller of
     the two: centring the name against it closes the drop to the role below,
     which the row gap alone cannot do */
  .door .portal .p-who{grid-column:1;grid-row:1;align-self:center;}
  /* the role and what it lets you do take the whole width underneath, rather
     than keeping out of the way of a button that is on the line above */
  .door .portal .p-mid{grid-column:1 / -1;grid-row:2;}
  .door .portal > .btn{grid-column:2;grid-row:1;}
}

.door .who-line{margin:-12px 0 20px;font-size:13px;color:var(--text-3);}
.door .aside{font-size:13.5px;color:var(--text-3);margin:16px 0 0;}
.door .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;}

/* ---- what has to be answered ----
   A required question's label is gold. Leaving one empty and pressing the
   button lists it under the button and rings the field in the same gold,
   which clears the moment something is typed in it. */
.door .field.req > span,.door .field.req > legend{color:var(--gold);}
.door legend .hint{color:var(--text-2);font-weight:400;}
.door .field.bad input,.door .field.bad textarea,.door .field.bad select{border-color:var(--gold);}
.door .field.bad .checks{border-color:var(--gold);}
.door .missing{list-style:none;margin:2px 0 0;padding:0;color:var(--gold);font-size:13px;line-height:1.55;}
.door .missing[hidden]{display:none;}
.door .missing li::before{content:'\2022\00a0\00a0';}