/* The sign-in, sign-up, invitation and password screens, from the styleguide
   (styleguides/bite/login.html, signup.html + style.css). Every rule is scoped under .au so it
   cannot touch the rest of the application. */
.au *,.au *::before,.au *::after{box-sizing:border-box}
.au{
  --accent:#2093df;--accent-dark:#0f6398;--accent-pale:#eaf6ff;--accent-mid:#93d4ff;
  --ink:#292b31;--muted:#595d6c;--faint:#75798c;--border:#cfd3e5;--border-light:#e4e7f5;--surface:#f7f9fc;
  --ok:#0b6b3a;--ok-bg:#dff5e8;--warn:#785a0b;--warn-bg:#fff3d4;--danger:#ae1800;--danger-bg:#ffe0d9;--agent:#5b3fd1;--agent-bg:#ece8ff;
  --navy:#172c43;--mark-ink:#172c43;--radius:8px;--radius-lg:14px;
  --shadow:0 1px 2px rgba(23,44,67,.06),0 6px 20px rgba(23,44,67,.06);
  --sans:"Inter",system-ui,sans-serif;--display:"Afacad","Inter",system-ui,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,monospace;
}
.au{margin:0;background:#fff;color:var(--ink);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
.au h1,.au h2,.au h3{font-weight:500;letter-spacing:-.02em;margin:0 0 .4em;line-height:1.15}
.au h1{font-family:var(--display);font-size:38px}
.au h2{font-size:20px}
.au h3{font-size:16px}
.au p{margin:0 0 .8em}
.au a{color:var(--accent-dark);text-decoration:none}
.au a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.au :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.au .skip{position:absolute;left:-999px}
.au .skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;z-index:99}
.au .eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark);margin:0 0 6px}
.au .lede{color:var(--muted);font-size:16px;max-width:60ch}
.au .text-link{font-weight:500}
.au kbd{font:500 11px var(--mono);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:0 5px;background:#fff;color:var(--muted)}
.au .brand{display:inline-flex;align-items:center;gap:10px;font:600 22px var(--display);color:var(--navy);letter-spacing:-.02em}
.au .brand:hover{text-decoration:none;color:var(--navy)}
.au .brand .mark{color:var(--accent)}
.au .brand .dot{color:var(--accent)}
.au .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--accent);border-radius:var(--radius);background:transparent;color:var(--accent-dark);font:500 15px var(--sans);padding:10px 18px;cursor:pointer;white-space:nowrap}
.au .btn:hover{background:var(--accent-pale);text-decoration:none;color:var(--accent-dark)}
.au .btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.au .btn.primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.au .btn.quiet{border-color:transparent;color:var(--muted)}
.au .btn.quiet:hover{background:var(--surface)}
.au .btn.lg{padding:14px 24px;font-size:16px}
.au .btn.full{width:100%}
.au .form{padding:24px;display:grid;gap:20px}
.au .field{display:grid;gap:6px;border:0;padding:0;margin:0}
.au .field label,.au .field legend{font-weight:500;font-size:14px;padding:0}
.au .input{width:100%;border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;font:15px var(--sans);background:#fff;color:var(--ink)}
.au .input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.au textarea.input{resize:vertical}
.au .hint{color:var(--faint);font-size:13px;margin:0}
.au .flash{padding:12px 16px;border-radius:var(--radius);font-size:14px}
.au .icon-btn{border:0;background:transparent;color:var(--faint);width:30px;height:30px;border-radius:8px;display:inline-grid;place-items:center;cursor:pointer}
.au .icon-btn:hover{background:var(--surface);color:var(--ink)}
.au .auth-split{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh}
.au .auth-story{background:var(--navy);color:#fff;padding:36px 56px;display:flex;flex-direction:column;gap:32px}
.au .auth-story .brand,.au .auth-story .brand .dot{color:#fff}
.au .auth-story .brand .mark{color:var(--accent-mid)}
.au .story-copy{margin:auto 0}
.au .auth-story .eyebrow{color:var(--accent-mid)}
.au .auth-story h1{font-size:56px;line-height:1}
.au .auth-story h1 em{font-style:normal;color:var(--accent-mid)}
.au .auth-story .lede{color:#b9cde2}
.au .benefits{list-style:none;padding:0;margin:24px 0;display:grid;gap:8px}
.au .benefits span{color:var(--accent-mid);margin-right:10px}
.au blockquote{margin:28px 0 0;border-left:3px solid var(--accent);padding-left:16px;color:#dbe7f3;font-size:18px;font-family:var(--display)}
.au cite{display:block;font:13px var(--sans);color:#9fb6cd;margin-top:8px;font-style:normal}
.au .story-note{color:#7d95ad}
.au .auth-form-side{display:flex;flex-direction:column;padding:28px 56px}
.au .auth-top{margin-bottom:auto}
.au .auth-card{max-width:400px;width:100%;margin:40px auto}
.au .auth-bottom{display:flex;justify-content:space-between;color:var(--faint);font-size:12px;gap:16px}
.au .auth-card .form{padding:0;margin-top:20px}
.au .auth-links{display:flex;justify-content:space-between;margin-top:18px;font-size:14px}
.au .form-note{color:var(--faint);font-size:13px;margin-top:16px}
.au .alt{font-size:14px}
.au .auth-card h1,.au .auth-card h2{font-family:var(--display);font-size:34px}
@media (max-width:900px){.au .auth-split{grid-template-columns:1fr}
.au .auth-story,.au .auth-form-side{padding:28px}}
@container xw (max-width: 639px){
  .xw-tabs{display:flex}.xw-head .long{display:none}
  .xw[data-pane="list"] .xw-main,.xw[data-pane="list"] .xw-caps,.xw[data-pane="main"] .xw-list,.xw[data-pane="main"] .xw-caps,.xw[data-pane="caps"] .xw-list,.xw[data-pane="caps"] .xw-main{display:none}
  .xw-list{border-right:0}
}
@container xw (min-width: 640px) and (max-width: 959px){
  .xw-body{grid-template-columns:280px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"list main" "list caps"}
  .xw-list{grid-area:list}.xw-main{grid-area:main}.xw-caps{grid-area:caps;border-top:1px solid var(--border-light);max-height:236px}
  .xw-caps .gallery-tabs button{padding:6px 2px;font-size:11px}
  .xw-caps .gal{grid-template-columns:200px minmax(0,1fr);align-items:start}
  .xw-caps .meta{gap:6px 10px;padding:8px 10px}
}
@container xw (min-width: 960px){
  .xw-body{grid-template-columns:300px minmax(0,1fr) 380px}
  .xw-caps{border-left:1px solid var(--border-light)}.xw-head{padding:12px 24px}.pane,.pane-scroll{padding:20px}.xw-main .reply{padding:14px 20px}
  .thread-copy p{font-size:18px}
}
@container xw (min-width: 640px) and (max-width: 959px){.proj-cards{grid-template-columns:1fr 1fr}.choose-body{padding:24px}}
@container xw (min-width: 960px){
  .choose-body{grid-template-columns:340px minmax(0,1fr);gap:48px;padding:40px 56px;align-items:start}.choose-intro h2{font-size:30px}.proj-copy strong{font-size:20px}
}

/* Rails' own pieces inside the card: the password field with its show/hide button, error and flash
   messages, the verification code and the invited email. */
.au .password-wrap{position:relative}
.au .password-wrap .input{padding-right:48px}
.au .password-wrap .icon-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%)}
.au .errors{border:1px solid #f2b8aa;background:var(--danger-bg);color:var(--danger);border-radius:var(--radius);padding:12px 14px;font-size:14px}
.au .errors p{margin:0 0 4px;font-weight:500}
.au .errors ul{margin:0;padding-left:18px}
.au .flash-messages[hidden]{display:none}
.au .flash{padding:10px 14px;border-radius:var(--radius);font-size:14px;margin-bottom:16px}
.au .flash-notice{background:var(--ok-bg);color:var(--ok)}
.au .flash-alert{background:var(--danger-bg);color:var(--danger)}
.au .code-input{width:100%;max-width:none;font:500 22px var(--mono);letter-spacing:.3em;text-align:center}
.au .code-input::placeholder{font:400 15px var(--sans);letter-spacing:0}
.au .field-label{font-weight:500;font-size:14px}
.au .invite-email{margin:0;font-size:15px}
.au .resend-code{margin-top:12px}
.au .auth-card .button_to,.au .auth-card form.button_to{margin:0}
.au .story-copy em{font-style:normal;color:var(--accent-mid)}

.au .icon{width:18px;height:18px;flex:none}

/* Small screens: the story panel shrinks to its headline so the form is the first thing you see. */
@media (max-width:900px){
  .au .auth-story{gap:12px;padding:20px 28px}
  .au .auth-story h1{font-size:34px}
  .au .story-copy{margin:0}
  .au .story-copy .benefits,.au .story-copy blockquote,.au .story-note{display:none}
}
.au .btn.secondary{border-color:var(--border);color:#3f424d;background:#fff}
.au .btn.secondary:hover{background:var(--surface);color:var(--ink)}