/* Account access: the same paper, ink, and acid as the product network. */
.auth-shell { padding-block: 28px 72px; }
.auth-index { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); font: 9px/1.6 var(--mono); color: var(--muted); }
.auth-index a { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); }
.auth-index svg { width: 13px; height: 13px; }
.auth-index a:hover, .auth-switch a:hover, .auth-panel-footer a:hover { background: var(--acid); }
.auth-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding-top: 46px; }
.auth-intro, .auth-panel { min-width: 0; }
.auth-intro { padding-top: 12px; }
.auth-intro h1 { margin: 28px 0 24px; font-size: clamp(48px, 5.5vw, 80px); line-height: .98; letter-spacing: -.065em; }
.auth-intro > p:not(.auth-signoff) { max-width: 360px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.auth-toolkit { margin-top: 36px; max-width: 440px; border: 1px solid var(--ink); background: var(--acid); }
.auth-toolkit-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--ink); font: 9px/1.6 var(--mono); }
.auth-toolkit-heading svg { width: 16px; height: 16px; }
.auth-toolkit-row { display: grid; grid-template-columns: 22px 24px minmax(0, 1fr); gap: 16px; align-items: center; margin-inline: 18px; padding-block: 16px; }
.auth-toolkit-row + .auth-toolkit-row { border-top: 1px solid #191a1733; }
.auth-toolkit-number { align-self: start; padding-top: 2px; font: 9px/1.6 var(--mono); }
.auth-toolkit-row h2 { font-size: 15px; line-height: 1.4; letter-spacing: -.3px; font-weight: 600; }
.auth-toolkit-row p { margin-top: 3px; font-size: 11px; line-height: 1.7; }
.auth-intro .auth-signoff { display: flex; gap: 24px; align-items: center; margin-top: 22px; font: 8px/1.6 var(--mono); color: var(--muted); }
.auth-signoff span { color: var(--ink); font-size: 23px; }
.auth-panel { border: 1px solid var(--ink); background: #f7f7f1; }
.auth-tabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--ink); }
.auth-tabs a { display: flex; align-items: center; gap: 12px; min-height: 53px; padding: 15px 20px; font: 10px/1.5 var(--mono); text-transform: uppercase; }
.auth-tabs a + a { border-left: 1px solid var(--ink); }
.auth-tabs a[aria-current="page"] { background: var(--acid); }
.auth-tabs a:not([aria-current]):hover { background: var(--paper); }
.auth-tabs a:focus-visible { position: relative; outline-offset: -5px; }
.auth-tabs span { font-size: 8px; }
.auth-form-body { padding: clamp(24px, 3vw, 42px); }
.auth-form-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.auth-form-heading .eyebrow { font-size: 8px; color: var(--muted); }
.auth-form-heading svg { width: 20px; height: 20px; flex-shrink: 0; }
.auth-form-body > h2 { margin-top: 16px; font-size: clamp(27px, 2.7vw, 39px); line-height: 1.08; letter-spacing: -.05em; }
.auth-form-description { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.8; max-width: 340px; }
.auth-form-body form { display: grid; gap: 20px; margin-top: 28px; }
.auth-field { display: grid; gap: 8px; min-width: 0; }
.auth-field label { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; font-weight: 600; }
.auth-field label span { color: var(--muted); font: 7px/1.6 var(--mono); }
.auth-field input { width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); }
.auth-field input:hover { border-color: var(--ink); }
.auth-field input:focus { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 2px; background: #fffef8; }
.auth-field input[aria-invalid="true"] { border-color: #973a26; }
.auth-errors { margin-top: 22px; padding: 12px 14px; border-left: 3px solid #973a26; background: #f3e5dc; font-size: 12px; }
.auth-field-error { font-size: 12px; color: #973a26; overflow-wrap: anywhere; }
.auth-remember { display: flex; align-items: center; gap: 10px; width: fit-content; min-height: 28px; font-size: 12px; cursor: pointer; }
.auth-remember input { width: 17px; height: 17px; margin: 0; accent-color: var(--ink); flex-shrink: 0; }
.auth-submit { width: 100%; min-height: 52px; margin-top: 4px; }
.auth-switch { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 24px; color: var(--muted); font-size: 11px; }
.auth-switch a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); border-bottom: 1px solid var(--ink); }
.auth-panel-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 20px; border-top: 1px solid var(--ink); font: 7px/1.7 var(--mono); color: var(--muted); }
.auth-panel-footer a { display: inline-flex; gap: 10px; color: var(--ink); font-size: 9px; }
@media (prefers-reduced-motion: no-preference) {
  .auth-intro, .auth-panel { animation: enter .6s ease-out backwards; }
  .auth-panel { animation-delay: .1s; }
}
@media (max-width: 1000px) {
  .auth-layout { gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .auth-tabs a { gap: 8px; padding-inline: 14px; font-size: 9px; }
}
@media (max-width: 800px) {
  .auth-shell { max-width: 600px; padding-block: 22px 48px; }
  .auth-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 26px; }
  .auth-intro { padding-top: 0; }
  .auth-intro h1 { margin-block: 20px 16px; font-size: clamp(44px, 9vw, 64px); }
  .auth-intro > p:not(.auth-signoff) { max-width: none; font-size: 13px; }
  .auth-toolkit, .auth-intro .auth-signoff { display: none; }
  .auth-form-body > h2 { font-size: 32px; }
}
@media (max-width: 400px) {
  .auth-index { font-size: 8px; gap: 12px; }
  .auth-index a { gap: 8px; }
  .auth-form-body { padding: 24px 20px; }
  .auth-form-body > h2 { font-size: 29px; }
  .auth-tabs a { font-size: 8px; gap: 8px; }
}