/* Auth page: standalone form on the left, promises and deliverables on the right. */
body[data-shell='auth'] { min-height: 100vh; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
@media (max-width: 940px) { body[data-shell='auth'] { grid-template-columns: 1fr; } }

.auth-aside {
  background: var(--pine); color: var(--pine-ink);
  padding: clamp(28px, 4vw, 64px);
  display: flex; flex-direction: column; gap: var(--s-6);
}
.auth-aside .brand { color: var(--pine-ink); }
.auth-aside .brand:hover { color: var(--pine-ink); }
.auth-aside h2 { font-size: clamp(26px, 3vw, 40px); max-width: 22ch; margin-bottom: var(--s-4); }
.auth-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.auth-aside li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); font-size: var(--size-sm); line-height: 1.6; }
.auth-aside li svg { color: var(--ochre); margin-top: 2px; }
.auth-aside__foot { margin-top: auto; font-size: var(--size-xs); color: var(--pine-soft); }
.auth-aside__foot a { color: var(--pine-ink); }
@media (max-width: 940px) { .auth-aside { order: 2; } }

.auth-main { padding: clamp(28px, 4vw, 64px); display: flex; flex-direction: column; gap: var(--s-5); }
.auth-main__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.auth-card { width: min(440px, 100%); margin-inline: auto; display: grid; gap: var(--s-4); }
.auth-card h1 { font-size: clamp(26px, 3vw, 34px); }
.auth-tabs { display: flex; gap: var(--s-4); border-bottom: 1px solid var(--line); }
.auth-tabs button {
  border: 0; background: transparent; cursor: pointer; padding: var(--s-3) 0;
  font-size: var(--size-sm); font-weight: 700; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.auth-tabs button[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--terra); }
.auth-tabs button:hover:not([aria-selected='true']) { color: var(--ink); border-bottom-color: var(--line); }
.auth-form { display: grid; gap: var(--s-4); }
.auth-form .btn { margin-top: var(--s-2); }
/* Turnstile 的 iframe 固定 300×65；窄屏容器会缩到表单宽度，留出上下间距。 */
.turnstile { min-height: 66px; display: flex; align-items: center; overflow: hidden; }
.auth-foot { font-size: var(--size-xs); color: var(--muted); text-align: center; line-height: 1.7; }
.auth-foot a { color: var(--ink-2); }
.otp-row { display: flex; gap: var(--s-3); align-items: flex-end; }
.otp-row .grow { flex: 1 1 auto; }
/* 一屏注册：验证码输入与「发送验证码」按钮同一行，窄屏自动换行。 */
.code-row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.code-row .input { flex: 1 1 130px; min-width: 0; }
.code-row .btn { flex: 0 0 auto; margin-top: 0; white-space: nowrap; }
.pw-meter { height: 4px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.pw-meter i { display: block; height: 100%; background: var(--terra); width: 0; transition: width var(--t-state) var(--ease); }

/* The shell grid lives on <body>; the wrapper must not create a second grid. */
.auth-grid { display: contents; }
.brand--inverse { color: var(--pine-ink); }
.brand--inverse:hover { color: var(--pine-ink); }
.spec-list--inverse { color: var(--pine-ink); }
.spec-list--inverse li { color: var(--pine-soft); }
/* 侧栏列表只有文字、没有图标，不能套用 22px + 1fr 的双列网格：
   否则文本节点落在 22px 那一列，会被压成一行一个字。 */
.auth-aside .spec-list li { grid-template-columns: 1fr; }
/* 侧栏底部这条是链接不是正文：常驻下划线，别只靠悬停变色。 */
.auth-aside__back { margin-top: auto; font-size: var(--size-sm); color: var(--pine-ink); text-decoration: underline; text-underline-offset: 3px; }
.auth-aside__back:hover { color: var(--ochre); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.brand svg, .brand .brand__mark { width: 30px; height: 30px; object-fit: contain; }
/* 松绿侧栏上的 logo 垫一块纸色底，锈红图案才不会糊进深色背景。 */
.brand--inverse .brand__mark { background: var(--canvas); border-radius: 6px; padding: 3px; }
.brand__dot { color: var(--terra); }
.brand--inverse .brand__dot { color: var(--ochre); }