/* InternDoor accounts: sign in, sign up, welcome, account settings, the
 * leaderboard and public profiles (18 Oct 2026).
 *
 * Loaded by those pages only, through head()'s `scripts`, so page.css's
 * version (carried by every generated page) does not move. Hand-committed,
 * not in the publish allowlist. Built only from the site's tokens: lime is the
 * main action, --hot an error, pills for anything pressed and 16px for
 * anything holding content, and nothing lifts on hover (his 9 Oct rule).
 */

.acct-page .wrap { padding-top: 8px; padding-bottom: 56px; }

/* The form and, beside it on a wide screen, what an account keeps. On a phone
   the form comes first and the list follows it. */
.acct-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 960px) {
  .acct-split { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 64px; padding-top: 24px; }
}

.acct-card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-2);
  padding: 28px 24px;
}
@media (max-width: 520px) { .acct-card { padding: 22px 18px; } }
.page .acct-card h1 { font-size: 26px; line-height: 1.15; letter-spacing: -.03em; margin: 0 0 6px; font-weight: 600; color: var(--ink); }
.acct-lede { margin: 0 0 22px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* ---- sign in with a provider ---- */
.acct-providers { display: grid; gap: 10px; }
.acct-prov {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 44px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1px solid var(--rule-2); background: var(--bg); color: var(--ink);
  font: inherit; font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; cursor: pointer;
  transition: border-color .16s, background .16s, transform .45s var(--spring);
}
.acct-prov svg { flex: none; width: 18px; height: 18px; }
.acct-prov:active { transform: scale(.98); transition-duration: .12s; }
.acct-prov:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.acct-prov:disabled { cursor: progress; color: var(--ink-3); }
.acct-prov[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .acct-prov:hover { border-color: var(--ink-3); background: var(--card-2); }
}
.acct-gh { color: var(--ink); }

.acct-or {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
  margin: 22px 0; font-size: 12.5px; color: var(--ink-3);
}
.acct-or::before, .acct-or::after { content: ''; height: 1px; background: var(--rule); }

/* ---- fields ---- */
.acct-form { display: grid; gap: 16px; }
.acct-form[hidden] { display: none; }
.acct-f { display: grid; gap: 7px; min-width: 0; }
.acct-lrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.acct-l { font-size: 14px; font-weight: 600; color: var(--ink); }
.acct-opt { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--ink-2); }
.acct-lrow a, .acct-link {
  font-size: 13px; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-2);
}
.acct-lrow a:hover, .acct-link:hover { color: var(--ink); text-decoration-color: var(--ink-3); }
.acct-input {
  box-sizing: border-box; width: 100%; min-width: 0; height: 46px; padding: 0 14px;
  border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--bg); color: var(--ink);
  font: 400 16px/1.25 var(--ui);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
select.acct-input { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.acct-input::placeholder { color: var(--ink-3); opacity: 1; }
@media (hover: hover) and (pointer: fine) { .acct-input:hover { border-color: var(--ink-3); } }
.acct-input:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink) 22%, transparent); }
.acct-input[aria-invalid="true"] { border-color: var(--hot); }
.acct-input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--hot) 28%, transparent); }
.acct-input:disabled { color: var(--ink-3); cursor: not-allowed; }

/* A username: the @ is drawn beside the field, not typed into it. */
.acct-handle { position: relative; display: flex; align-items: center; }
.acct-handle > span { position: absolute; left: 14px; color: var(--ink-3); font-size: 16px; pointer-events: none; }
.acct-handle .acct-input { padding-left: 32px; }

/* A password, with a Show button inside the field. */
.acct-pw { position: relative; }
.acct-pw .acct-input { padding-right: 70px; }
.acct-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  height: 34px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: none;
  color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.acct-eye:hover { color: var(--ink); background: var(--card-2); }
.acct-eye:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.acct-hint, .acct-err, .acct-ok { margin: 0; font-size: 13px; line-height: 1.45; }
.acct-hint { color: var(--ink-2); }
.acct-err { color: var(--hot); }
.acct-ok { color: var(--accent); }
.acct-err:empty, .acct-ok:empty, .acct-hint:empty { display: none; }
:root[data-theme="light"] .acct-err { color: #9a3412; }
:root[data-theme="light"] .acct-ok { color: #3f6212; }

.acct-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--ink-15); }
.acct-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cta); }
.acct-check a { color: var(--ink); }

.acct-msg { margin: 0; padding: 12px 14px; border-radius: var(--r); font-size: 14px; line-height: 1.5; border: 1px solid var(--rule-2); color: var(--ink-15); background: var(--card-2); }
.acct-msg:empty { display: none; }
.acct-msg.is-bad { border-color: color-mix(in oklab, var(--hot) 55%, var(--rule)); color: var(--ink); }
.acct-msg.is-good { border-color: color-mix(in oklab, var(--accent) 45%, var(--rule)); color: var(--ink); }

.acct-form .go { height: 46px; font-size: 15px; }
.acct-alt { margin: 22px 0 0; font-size: 14px; color: var(--ink-2); text-align: center; }
.acct-alt a { color: var(--ink); font-weight: 500; }
.acct-fine { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); text-align: center; }
.acct-fine a { color: var(--ink-2); }

/* "Check your email" and other results that replace the form. */
.acct-done { display: grid; gap: 12px; }
.acct-done[hidden] { display: none; }
.page .acct-done h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; font-weight: 600; color: var(--ink); }
.acct-done p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.acct-done b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.acct-done .acct-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* ---- what an account keeps ---- */
.acct-why { padding-top: 6px; }
.page .acct-why h2 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 18px; letter-spacing: -.01em; }
.acct-why ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: why; }
.acct-why li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 14px; counter-increment: why; }
.acct-why li::before {
  content: counter(why); grid-row: 1 / span 2; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule-2);
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-2);
}
.acct-why b { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.acct-why span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 959px) { .acct-why { border-top: 1px solid var(--rule); padding-top: 24px; } }

/* The callback and confirm pages hold one short card. */
.acct-narrow { max-width: 480px; margin: 32px auto 0; }
.page .acct-gap { display: block; margin: 22px 0 0; }

/* ---- the callback and confirm pages: one line while it works ---- */
.acct-wait { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-2); }
.acct-wait::before {
  content: ''; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--rule-2); border-top-color: var(--ink); animation: acct-spin .8s linear infinite;
}
.acct-wait[hidden] { display: none; }
@keyframes acct-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .acct-wait::before { animation: none; } }

/* ---- account settings ---- */
.acct-settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 760px; }
.acct-head { display: flex; align-items: center; gap: 16px; margin: 6px 0 22px; }
.acct-face {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--card-2); border: 1px solid var(--rule-2); color: var(--ink);
  font-size: 19px; font-weight: 600; letter-spacing: .02em;
}
.acct-head h1 { margin: 0; font-size: 26px; letter-spacing: -.03em; font-weight: 600; overflow-wrap: anywhere; }
.acct-head p { margin: 4px 0 0; font-size: 14px; color: var(--ink-3); overflow-wrap: anywhere; }
.acct-sec { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-2); padding: 22px; }
@media (max-width: 520px) { .acct-sec { padding: 18px 16px; } }
.page .acct-sec h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); margin: 0 0 4px; }
.acct-sec > p.acct-hint { margin-bottom: 16px; }
.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .acct-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .acct-span { grid-column: 1 / -1; } }
.acct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Rows of "what it is" and "what you can do about it". */
.acct-rows { list-style: none; margin: 14px 0 0; padding: 0; display: grid; }
.acct-rows > li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--rule); min-width: 0; }
.acct-rows > li:first-child { border-top: 0; padding-top: 4px; }
.acct-rows .acct-what { display: grid; gap: 3px; min-width: 0; }
.acct-rows .acct-what b { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.acct-rows .acct-what b svg { flex: none; width: 18px; height: 18px; }
.acct-rows .acct-what span { font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
.acct-rows .alt, .acct-rows .bare, .acct-rows .go { flex: none; height: 36px; padding: 0 14px; font-size: 13.5px; }
.acct-sub { display: grid; gap: 14px; margin-top: 4px; padding: 16px 0 4px; border-top: 1px solid var(--rule); }
.acct-sub[hidden] { display: none; }

.acct-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; color: var(--ink-2); border: 1px solid var(--rule-2); }
.acct-tag.is-on { color: var(--ink); border-color: color-mix(in oklab, var(--accent) 50%, var(--rule)); }

.acct-danger { border-color: color-mix(in oklab, var(--hot) 30%, var(--rule)); }
.danger { background: none; border: 1px solid color-mix(in oklab, var(--hot) 60%, transparent); color: var(--hot); }
.danger:hover { background: color-mix(in oklab, var(--hot) 10%, transparent); color: var(--hot); }
:root[data-theme="light"] .danger { color: #9a3412; border-color: #c2410c; }

.acct-tailored { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.acct-tailored li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r); min-width: 0; }
.acct-tailored a { display: grid; gap: 2px; min-width: 0; color: var(--ink); text-decoration: none; }
.acct-tailored a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.acct-tailored b { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.acct-tailored span { font-size: 12.5px; color: var(--ink-3); }

/* ---- leaderboard ---- */
.lb-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 18px; border: 1px solid var(--rule); border-radius: var(--r-pill); background: var(--card); }
.lb-tab {
  height: 34px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: none;
  color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background .16s, color .16s;
}
.lb-tab:hover { color: var(--ink); }
.lb-tab[aria-selected="true"] { background: var(--card-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2); }
.lb-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lb-me { margin: 0 0 14px; font-size: 14px; color: var(--ink-2); }
.lb-me:empty { display: none; }
.lb-me b { color: var(--ink); font-weight: 600; }
.lb-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--card); overflow: hidden; }
.lb-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--rule); font-size: 14.5px; }
.lb-row:first-child { border-top: 0; }
.lb-row.is-me { background: color-mix(in oklab, var(--accent) 6%, var(--card)); }
.lb-rank { font-family: var(--mono); font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lb-row:nth-child(-n+3) .lb-rank { color: var(--ink); font-weight: 500; }
.lb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); text-decoration: none; font-weight: 500; }
a.lb-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.lb-score { font-variant-numeric: tabular-nums; color: var(--ink-15); white-space: nowrap; }
.lb-score small { margin-left: 8px; font-size: 12.5px; color: var(--ink-3); }
.lb-empty { padding: 22px 16px; font-size: 14.5px; color: var(--ink-2); }
.lb-skel { display: grid; gap: 1px; }
.lb-skel i { display: block; height: 47px; background: var(--card); border-top: 1px solid var(--rule); }
.lb-join { margin: 18px 0 0; }
.lb-join[hidden] { display: none; }

/* ---- public profile ---- */
.up-head { display: flex; align-items: center; gap: 18px; margin: 6px 0 24px; }
.up-head .acct-face { width: 72px; height: 72px; font-size: 24px; }
.up-head h1 { margin: 0; font-size: 28px; letter-spacing: -.03em; font-weight: 600; overflow-wrap: anywhere; }
.up-head p { margin: 4px 0 0; font-size: 14px; color: var(--ink-3); }
.up-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 760px; }
@media (min-width: 720px) { .up-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.up-stat { padding: 16px 18px; border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--card); }
.up-stat dt { font-size: 12.5px; color: var(--ink-3); }
.up-stat dd { margin: 6px 0 0; font-size: 28px; line-height: 1; letter-spacing: -.03em; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.up-cta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }

/* Member parts of the dashboard. */
.db-me { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.db-me[hidden] { display: none; }
.db-me .acct-face { width: 44px; height: 44px; font-size: 15px; }
.db-me b { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.db-me span { font-size: 13px; color: var(--ink-3); }
.db-me a { color: var(--ink-2); }