/* PC-001 · PDF pages 31–32. Layout baseline: 1440 × 1000 CSS px. */
html.login-page { --login-wallpaper-filter:none; --login-art-panel:rgba(226,226,221,.92); color-scheme:light; }
html.login-page[data-login-mode="night"] { --login-wallpaper-filter:grayscale(1) brightness(.38); --login-art-panel:#d4d4ce; color-scheme:dark; }
.login-page *, .login-page *::before, .login-page *::after { box-sizing:border-box; }
.login-page body { margin:0; position:relative; isolation:isolate; min-height:100svh; color:var(--sg-ink); background:var(--sg-page); font:400 14px/22px var(--sg-font); -webkit-font-smoothing:antialiased; }
.login-page body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:url("../img/login-pc-glass-background.png") center/cover no-repeat; filter:var(--login-wallpaper-filter); }
.login-page a { color:inherit; text-decoration:none; }.login-page button,.login-page input { font:inherit; }
.login-shell { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 480px; gap:clamp(64px,8vw,160px); align-items:center; width:100%; max-width:1568px; min-height:max(100svh,1000px); margin:0 auto; padding:160px 44px 112px; }
.topbar { position:absolute; top:32px; left:44px; right:44px; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:48px; }
.wordmark { display:grid; grid-template-columns:30px auto; grid-template-rows:28px 18px; column-gap:12px; align-items:center; }
.wordmark-logo { grid-row:1/3; width:30px; height:30px; object-fit:contain; }.login-page[data-login-mode="night"] .wordmark-logo { filter:invert(1); }
.wordmark b { font-size:20px; line-height:28px; font-weight:600; letter-spacing:.04em; }.pc-brand-tagline { grid-column:2; font-size:11px; line-height:18px; color:var(--sg-muted); }
.pc-workspace-mark,.brand-kicker { font-size:11px; line-height:18px; letter-spacing:.16em; font-weight:500; }.pc-workspace-mark { color:var(--sg-muted); }
.hero { min-width:0; }.brand-kicker { margin:0 0 20px; }
.hero-copy h2 { margin:0 0 24px; font-size:56px; line-height:68px; font-weight:600; letter-spacing:0; }.hero-copy p { margin:0; color:var(--sg-muted); font-size:16px; line-height:28px; }
.pc-work-art { position:relative; width:520px; max-width:100%; height:266px; margin:34px 0 0; pointer-events:none; }
.pc-art-orbit { position:absolute; left:12px; top:10px; width:444px; height:225px; border:1px solid rgba(240,240,232,.7); border-radius:50%; }.pc-art-orbit-one { transform:rotate(18deg); }.pc-art-orbit-two { transform:rotate(-24deg); }
.pc-art-sphere { position:absolute; top:26px; left:15px; width:32px; height:32px; border-radius:50%; background:radial-gradient(circle at 30% 24%,#fffff0 0%,#dbdfce 34%,#818b79 100%); box-shadow:3px 7px 14px rgba(28,37,22,.12); }
/* Restore the original 40-second route: one lap of each ellipse, joined
   at their intersection. Match the current border centre (234, 122.5),
   radii (221.5, 112) and rotations (18deg, -24deg), including when scaled. */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference) {
  @supports (offset-path:path("M 0 0 L 1 1")) {
    html.login-page:is([data-login-skin="glass"],[data-glass-page="account-forgotpassword"]) .pc-art-sphere {
      top:0; left:0; z-index:0;
      offset-path:path("M 227.836379 4.891099 A 221.5 112 18 1 1 240.163621 240.108901 A 221.5 112 18 1 1 227.836379 4.891099 A 221.5 112 -24 1 1 240.163621 240.108901 A 221.5 112 -24 1 1 227.836379 4.891099 Z");
      offset-anchor:center; offset-rotate:0deg;
      animation:bfg-account-sphere-orbit 40s linear infinite;
    }
  }
}
@keyframes bfg-account-sphere-orbit { from { offset-distance:0%; } to { offset-distance:100%; } }
.pc-art-card { position:absolute; display:flex; flex-direction:column; gap:0; padding:24px; border:1px solid rgba(255,255,255,.65); border-radius:24px; color:#282b28; background:var(--login-art-panel); box-shadow:inset 0 1px 1px rgba(255,255,255,.65),0 20px 32px rgba(0,0,0,.1); font-size:11px; line-height:18px; }
.pc-art-card-front { left:28px; top:58px; width:292px; height:190px; transform:rotate(-8deg); z-index:2; }.pc-art-card-back { left:302px; top:14px; width:202px; height:214px; transform:rotate(14deg); z-index:1; }
.pc-art-caption { display:flex; gap:8px; align-items:center; }.pc-art-card strong { display:block; margin:16px 0 24px; font-size:18px; line-height:26px; font-weight:600; white-space:nowrap; }.pc-art-card-back strong { margin:16px 0 30px; }
.pc-art-progress { display:block; height:5px; border-radius:3px; background:linear-gradient(to right,#64715c 68%,rgba(122,128,115,.2) 68%); }.pc-art-next { display:flex; gap:8px; align-items:center; margin-top:18px; color:#596156; }
.pc-art-line { display:block; height:4px; border-radius:2px; width:120px; margin:0 0 12px; background:rgba(94,102,89,.3); }.pc-art-line-short { width:84px; }
.pc-capabilities { display:flex; gap:20px; margin:24px 0 0; font-size:12px; line-height:20px; color:var(--sg-muted); }.pc-capabilities i { font-style:normal; }
.auth { min-width:0; }.auth-card { width:100%; padding:32px 36px; min-height:550px; border:1px solid var(--sg-edge); border-radius:24px; background:var(--sg-panel); box-shadow:inset 0 1px 1px rgba(255,255,255,.16),var(--sg-shadow); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.intro { margin:0 0 30px; }.eyebrow { margin:0 0 12px; color:var(--sg-muted); font-size:11px; line-height:18px; letter-spacing:.02em; }.intro h1 { margin:0; font-size:30px; line-height:40px; font-weight:600; }.intro-note { margin:12px 0 0; color:var(--sg-muted); font-size:14px; line-height:22px; }
.field { margin:0 0 20px; }.label-row { margin:0 0 8px; }.label-row label { font-size:13px; line-height:20px; font-weight:500; }.label-row label span { color:var(--sg-muted); }
.input-shell { height:48px; display:flex; border:1px solid var(--sg-control-line); border-radius:12px; background:var(--sg-solid); }.input-shell input { width:100%; min-width:0; height:100%; padding:0 14px; border:0; border-radius:inherit; outline:none; color:var(--sg-ink); background:transparent; font-size:14px; line-height:22px; }.input-shell input::placeholder { color:var(--sg-quiet); opacity:1; }.input-shell:focus-within { outline:2px solid var(--sg-ink); outline-offset:2px; }.input-shell:has(.input-validation-error) { outline:1px solid #b05b52; }
.form-options { display:flex; position:relative; justify-content:space-between; align-items:center; min-height:24px; margin:0 0 42px; gap:12px; }.remember { display:flex; align-items:center; gap:10px; font-size:12px; line-height:20px; cursor:pointer; }
.remember input[type="checkbox"] { appearance:none; display:grid; place-items:center; width:16px; height:16px; padding:0; margin:0; border:1px solid var(--sg-control-line); border-radius:2px; background:var(--sg-solid); cursor:pointer; }.remember input:checked { background:var(--sg-primary); border-color:var(--sg-primary); }.remember input:checked::after { content:""; width:8px; height:5px; border-left:2px solid var(--sg-on-primary); border-bottom:2px solid var(--sg-on-primary); transform:translateY(-1px) rotate(-45deg); }
.text-link { font-size:12px; line-height:20px; color:var(--sg-muted); }.caps-hint { display:none; position:absolute; top:28px; font-size:12px; color:var(--sg-muted); }.caps-hint.visible { display:block; }
.submit { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; height:48px; padding:0 16px; border:0; border-radius:12px; color:var(--sg-on-primary); background:var(--sg-primary); font-size:14px; line-height:22px; font-weight:500; cursor:pointer; }.submit:disabled { opacity:.65; cursor:wait; }.signup { margin:24px 0 0; text-align:center; font-size:12px; line-height:20px; color:var(--sg-muted); }.signup a { font-weight:500; }
.form-message { padding:12px; margin:0 0 20px; border:1px solid currentColor; border-radius:12px; font-size:13px; line-height:22px; overflow-wrap:anywhere; }.form-message.error { color:#a64135; }.login-page[data-login-mode="night"] .form-message.error { color:#f0aaa1; }.form-message.success { color:#365a46; }.login-page[data-login-mode="night"] .form-message.success { color:#b5d4bd; }.form-message ul { margin:0; padding:0; list-style:none; }
.login-footer { position:absolute; bottom:28px; left:44px; right:44px; display:flex; justify-content:space-between; gap:24px; color:var(--sg-muted); font-size:11px; line-height:20px; }.login-footer nav { display:flex; gap:20px; }
.login-page a:focus-visible,.login-page button:focus-visible,.login-page input[type="checkbox"]:focus-visible { outline:2px solid var(--sg-ink); outline-offset:4px; }.login-page a:hover { text-decoration:underline; text-underline-offset:3px; }
@media(min-width:1024px) and (max-width:1279px) { .login-shell { grid-template-columns:minmax(0,1fr) 420px; gap:40px; padding-left:32px; padding-right:32px; }.topbar,.login-footer { left:32px; right:32px; }.pc-work-art { transform:scale(.82); transform-origin:left top; margin-bottom:-48px; }.auth-card { padding:32px; } }
@media(max-width:1023px) { .login-shell { grid-template-columns:minmax(0,480px); gap:32px; justify-content:center; min-height:100svh; padding:124px 24px 40px; }.topbar { top:24px; left:24px; right:24px; }.pc-workspace-mark { display:none; }.hero-copy h2 { font-size:40px; line-height:52px; margin-bottom:12px; }.hero-copy h2 br { display:none; }.hero-copy p { font-size:14px; line-height:24px; }.brand-kicker { margin-bottom:12px; }.pc-work-art { display:none; }.pc-capabilities { margin-top:16px; }.auth-card { min-height:0; padding:32px; }.login-footer { position:static; flex-wrap:wrap; justify-content:center; text-align:center; }.input-shell input { font-size:16px; } }
@media(max-width:480px) { .login-shell { padding:112px 16px 28px; gap:24px; }.auth-card { padding:24px; }.hero { padding:0 8px; }.hero-copy h2 { font-size:36px; line-height:48px; }.form-options { margin-bottom:32px; }.login-footer { gap:12px; }.login-footer nav { justify-content:center; width:100%; } }
@media(prefers-reduced-transparency:reduce) { .auth-card { background:var(--sg-solid); backdrop-filter:none; } }
@supports not (backdrop-filter:blur(20px)) { .auth-card { background:var(--sg-solid); } }

/* Login alone fits the live viewport. Register and password-recovery forms
   share the artwork stylesheet but keep their own document-flow layout. */
html[data-login-skin="glass"] .login-shell {
  min-height:100svh;
  padding-top:clamp(96px,calc(32svh - 160px),160px);
  padding-bottom:clamp(52px,calc(20svh - 88px),112px);
}
html[data-login-skin="glass"] .label-row { line-height:20px; }
@media(min-width:1024px) and (max-height:800px) {
  html[data-login-skin="glass"] .hero-copy h2 { font-size:48px; line-height:58px; margin-bottom:20px; }
  html[data-login-skin="glass"] .hero-copy p { font-size:15px; line-height:26px; }
  html[data-login-skin="glass"] .brand-kicker { margin-bottom:16px; }
  html[data-login-skin="glass"] .pc-work-art { transform:scale(.82); transform-origin:left top; margin-top:24px; margin-bottom:-48px; }
  html[data-login-skin="glass"] .pc-capabilities { margin-top:20px; }
}
@media(min-width:1024px) and (max-height:720px) {
  html[data-login-skin="glass"] .login-shell { padding-top:88px; padding-bottom:44px; }
  html[data-login-skin="glass"] .topbar { top:24px; }
  html[data-login-skin="glass"] .login-footer { bottom:20px; }
  html[data-login-skin="glass"] .auth-card { min-height:0; padding-top:24px; padding-bottom:24px; }
  html[data-login-skin="glass"] .intro { margin-bottom:20px; }
  html[data-login-skin="glass"] .field { margin-bottom:16px; }
  html[data-login-skin="glass"] .form-options { margin-bottom:24px; }
  html[data-login-skin="glass"] .signup { margin-top:20px; }
  html[data-login-skin="glass"] .hero-copy h2 { font-size:44px; line-height:54px; }
  html[data-login-skin="glass"] .pc-work-art { transform:scale(.7); margin-bottom:-80px; }
}
@media(min-width:1024px) and (max-height:640px) {
  html[data-login-skin="glass"] .login-shell { padding-top:80px; padding-bottom:40px; }
  html[data-login-skin="glass"] .eyebrow { display:none; }
  html[data-login-skin="glass"] .intro h1 { font-size:28px; line-height:36px; }
  html[data-login-skin="glass"] .hero-copy h2 { font-size:40px; line-height:48px; margin-bottom:16px; }
  html[data-login-skin="glass"] .pc-work-art { transform:scale(.62); margin-top:16px; margin-bottom:-101px; }
  html[data-login-skin="glass"] .pc-capabilities { margin-top:16px; }
}
@media(max-width:1023px) {
  html[data-login-skin="glass"] .login-shell {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto 1fr auto;
    gap:24px;
    padding:24px;
  }
  html[data-login-skin="glass"] .topbar { position:static; width:100%; }
  html[data-login-skin="glass"] .hero { display:none; }
  html[data-login-skin="glass"] .auth { width:100%; max-width:480px; justify-self:center; }
  html[data-login-skin="glass"] .auth-card { min-height:0; }
  html[data-login-skin="glass"] .login-footer { position:static; width:100%; align-items:center; gap:8px 24px; }
}
@media(max-width:1023px) and (max-height:800px) {
  html[data-login-skin="glass"] .login-shell { gap:20px; padding:20px 24px; }
  html[data-login-skin="glass"] .auth-card { padding:24px 32px; }
  html[data-login-skin="glass"] .intro { margin-bottom:24px; }
  html[data-login-skin="glass"] .form-options { margin-bottom:28px; }
  html[data-login-skin="glass"] .signup { margin-top:20px; }
}
@media(max-width:1023px) and (max-height:680px) {
  html[data-login-skin="glass"] .login-shell { gap:16px; padding-block:16px; }
  html[data-login-skin="glass"] .auth-card { padding-block:20px; }
  html[data-login-skin="glass"] .eyebrow { display:none; }
  html[data-login-skin="glass"] .intro { margin-bottom:20px; }
  html[data-login-skin="glass"] .intro h1 { font-size:28px; line-height:36px; }
  html[data-login-skin="glass"] .field { margin-bottom:16px; }
  html[data-login-skin="glass"] .form-options { margin-bottom:20px; }
  html[data-login-skin="glass"] .signup { margin-top:16px; }
}
@media(max-width:480px) {
  html[data-login-skin="glass"] .login-shell { padding-inline:16px; }
  html[data-login-skin="glass"] .auth-card { padding-inline:24px; }
  html[data-login-skin="glass"] .login-footer nav { width:100%; }
}