/* Area: auth (S00 sign-in, sign-out, password change, 403, account, S02 projects, S29 project
   settings). Owned by the auth screen agent. Loaded on every page by base.html, so every rule is
   scoped under .pg-auth. Shared classes (panel, fld, opt, kv, banner, pill, btn) come first; the
   au-* classes below only add what those don't cover. See docs/UI-CONVENTIONS.md. */

/* ---------- Shared bits ---------- */
.pg-auth .au-card{display:flex;flex-direction:column;gap:16px;padding:24px;box-shadow:var(--shadow-pop)}
.pg-auth .au-head{display:flex;flex-direction:column;gap:6px;min-width:0}
.pg-auth .au-head h1,.pg-auth .au-head h2{font-size:24px}
.pg-auth .au-head p{color:var(--text-2)}
.pg-auth .au-head .mono{font-size:12px;color:var(--muted)}
.pg-auth .au-note{font-size:12px;color:var(--muted)}
.pg-auth .au-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.pg-auth .au-actions.start{justify-content:flex-start}
.pg-auth .au-opt{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted);margin-left:4px}
.pg-auth .banner > div:not(.r){flex:1 1 240px;min-width:0}
.pg-auth .banner .ic{align-self:flex-start}
.pg-auth .au-card .banner{padding:10px 12px;gap:12px}
.pg-auth .au-card .banner .ic{width:28px;height:28px}
.pg-auth .avatar.lg{width:44px;height:44px;font-size:16px}
.pg-auth .avatar.xl{width:64px;height:64px;font-size:22px;box-shadow:0 0 0 4px var(--violet-soft)}
.pg-auth .au-sec{display:flex;flex-direction:column;gap:12px}
.pg-auth .au-sec > .sec-h{margin-bottom:0}
.pg-auth .au-ad-ic{width:34px;height:34px;border-radius:var(--radius-ctl);background:var(--raised-2);display:grid;place-items:center;color:var(--text-2);flex:none}
.pg-auth .au-chip{display:inline-flex;align-items:center;gap:5px;font:600 10.5px var(--mono);color:var(--text-2);border:1px solid var(--line-2);border-radius:var(--radius-badge);padding:2px 7px;white-space:nowrap}
.pg-auth .au-chip .i{opacity:.7}

/* ---------- Bare pages: sign-in, sign-out, 403 ---------- */
.pg-auth.pg-auth-login .bare,.pg-auth.pg-auth-logout .bare,.pg-auth.pg-auth-error .bare{
  background:radial-gradient(70% 45% at 50% 0%,rgba(199,255,77,.07),transparent 70%),radial-gradient(60% 50% at 50% 100%,rgba(139,92,246,.06),transparent 70%),var(--surface)}
.pg-auth .bare-panel .lockup{padding-left:2px}
.pg-auth .au-card > .btn.block{margin-top:2px}
.pg-auth .au-card > .au-note{text-align:center;margin-top:-4px}
.pg-auth .au-demo{border:1px dashed var(--line-2);border-radius:var(--radius-panel);padding:12px 14px;display:flex;flex-direction:column;gap:8px;font-size:12px;line-height:1.6;color:var(--text-2);background:rgba(20,24,36,.5)}
.pg-auth .au-demo-h{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pg-auth .au-demo .dev-chip{display:inline-block}
.pg-auth .au-demo b.mono,.pg-auth .au-demo .mono{font-size:11.5px;color:var(--text)}
.pg-auth .au-who{display:flex;gap:14px;align-items:center;min-width:0}
.pg-auth .au-who h1{font-size:22px}
.pg-auth .au-who p{color:var(--text-2);margin-top:2px;overflow-wrap:anywhere}
.pg-auth .au-who .mono{font-size:12px;color:var(--muted)}
.pg-auth .au-error{align-items:flex-start}
.pg-auth .au-err-ic,.pg-auth .au-ok-ic{width:44px;height:44px;border-radius:var(--radius-panel);display:grid;place-items:center;flex:none}
.pg-auth .au-err-ic{background:var(--fail-soft);color:var(--fail);border:1px solid var(--fail-line)}
.pg-auth .au-err-ic.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.pg-auth .au-ok-ic{background:var(--pass-soft);color:var(--pass);border:1px solid var(--pass-line)}
.pg-auth .au-error .au-actions{justify-content:flex-start}
.pg-auth .au-code{font-size:11px;color:var(--faint);letter-spacing:.02em}

/* ---------- Narrow in-app pages: password change and done ---------- */
.pg-auth .au-narrow{max-width:520px}
.pg-auth .au-narrow .au-card{box-shadow:none}
.pg-auth .au-narrow .crumbs{margin-bottom:12px}

/* ---------- S02 projects ---------- */
.pg-auth .au-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.pg-auth .au-proj{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--panel);overflow:hidden;color:var(--text);transition:border-color var(--t-fast) ease,box-shadow var(--t-med) ease,transform var(--t-fast) ease}
.pg-auth .au-proj:hover{border-color:var(--line-2);box-shadow:var(--shadow-pop)}
.pg-auth .au-proj:has(.au-open:focus-visible){outline:2px solid var(--lime);outline-offset:2px}
.pg-auth .au-band{display:flex;height:58px;border-bottom:1px solid var(--line);flex:none}
.pg-auth .au-band i{flex:1;display:block}
.pg-auth .au-band.empty{background:var(--planned-stripes);align-items:center;justify-content:center;font:500 11px var(--mono);color:var(--muted)}
.pg-auth .au-pbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pg-auth .au-ptitle{display:flex;gap:10px;align-items:center;min-width:0}
.pg-auth .au-ptitle h2{font-size:17px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-auth .au-open{color:var(--text)}
.pg-auth .au-open:focus-visible{outline:none}
.pg-auth .au-open::after{content:"";position:absolute;inset:0;z-index:0}
.pg-auth .au-gear{position:relative;z-index:1;align-self:flex-start;color:var(--text-2)}
.pg-auth .au-game{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-auth .au-pmeta{font:500 11px var(--mono);color:var(--muted)}
.pg-auth .au-ptags{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-width:0}
.pg-auth .au-ptags .pill{margin-left:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pg-auth .au-rev{font:500 10.5px var(--mono);color:var(--text-2);border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:1px 8px;white-space:nowrap}
.pg-auth .au-proj.setup .au-band.empty{color:var(--violet-text)}
.pg-auth .au-new{border-style:dashed;background:transparent;align-items:center;justify-content:center;text-align:center;gap:6px;padding:24px;min-height:196px;color:var(--text-2)}
.pg-auth .au-new:hover{border-color:var(--lime-line);color:var(--text);box-shadow:none}
.pg-auth .au-new b{font:600 15px var(--head)}
.pg-auth .au-new small{color:var(--muted);max-width:26ch}
.pg-auth .au-new-ic{width:40px;height:40px;border-radius:var(--radius-panel);background:var(--raised-2);display:grid;place-items:center;margin-bottom:4px}
.pg-auth .au-new:hover .au-new-ic{background:var(--lime);color:var(--lime-ink)}

.pg-auth .au-first{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:36px;align-items:center;padding:44px 44px 40px;margin-top:20px;border:1px solid var(--line);border-radius:var(--radius-lg);background:radial-gradient(90% 120% at 0% 0%,rgba(199,255,77,.08),transparent 60%),var(--panel)}
.pg-auth .au-first-main{display:flex;flex-direction:column;gap:12px;align-items:flex-start;min-width:0}
.pg-auth .au-first-main h1,.pg-auth .au-first-main h2{font-size:30px;line-height:1.1}
.pg-auth .au-first-main p{color:var(--text-2);font-size:14px;max-width:44ch}
.pg-auth .au-first-main .au-actions{margin-top:6px}
.pg-auth .au-first-ic{width:48px;height:48px;border-radius:var(--radius-panel);background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;margin-bottom:4px}
.pg-auth .au-first-steps{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--surface)}
.pg-auth .au-first-steps li{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--radius-box);min-width:0}
.pg-auth .au-first-steps li:first-child{background:var(--lime-soft);box-shadow:inset 0 0 0 1px var(--lime-line)}
.pg-auth .au-first-steps .n{width:24px;height:24px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font:600 11px var(--mono);color:var(--text-2);flex:none}
.pg-auth .au-first-steps li:first-child .n{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.pg-auth .au-first-steps b{display:block;font-weight:600}
.pg-auth .au-first-steps small{color:var(--muted)}

.pg-auth .au-archived{margin-top:32px;border-top:1px solid var(--line);padding-top:16px}
.pg-auth .au-archived summary{display:inline-flex;align-items:center;gap:8px;font:600 10.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:4px 0}
.pg-auth .au-archived summary:hover{color:var(--text-2)}
.pg-auth .au-archived summary .i{width:12px;height:12px;transition:transform var(--t-fast) ease}
.pg-auth .au-archived[open] summary .i{transform:rotate(180deg)}
.pg-auth .au-archived ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;max-width:720px}
.pg-auth .au-arow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);min-width:0}
.pg-auth .au-arow .pdot{filter:grayscale(.7);opacity:.75}
.pg-auth .au-arow b{display:block;font-weight:600}
.pg-auth .au-arow small{color:var(--muted);font:500 11px var(--mono)}

/* ---------- Account ---------- */
.pg-auth .au-hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:24px;min-width:0}
.pg-auth .au-hero h1,.pg-auth .au-hero h2{font-size:28px;line-height:1.1;overflow-wrap:anywhere}
.pg-auth .au-sub{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--muted);margin-top:5px;min-width:0}
.pg-auth .au-sub .mono{color:var(--text-2);font-size:12px}
.pg-auth .au-sub .sep{color:var(--faint)}
.pg-auth .au-role{font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--lime);border:1px solid var(--lime-line);background:var(--lime-soft);border-radius:var(--radius-xs);padding:1px 6px}
.pg-auth .au-hero-r{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.pg-auth .au-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.pg-auth .au-form{display:flex;flex-direction:column;gap:14px;min-width:0}
.pg-auth .au-line{color:var(--text-2)}
.pg-auth .au-line b{color:var(--text)}
.pg-auth .au-adapters{list-style:none;margin:0;padding:0}
.pg-auth .au-ad{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.pg-auth .au-ad:first-child{padding-top:2px}
.pg-auth .au-ad:last-child{border-bottom:0;padding-bottom:0}
.pg-auth .au-ad .k{color:var(--muted);font-size:12px;padding-top:2px}
.pg-auth .au-ad .v{display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0}
.pg-auth .au-ad .v b{font-weight:600}
.pg-auth .au-ad .v small{color:var(--muted);font-size:11.5px;line-height:1.5}
.pg-auth .au-ad .v code{font:500 11px var(--mono);color:var(--text-2);background:var(--raised);border:1px solid var(--line);border-radius:var(--radius-xs);padding:1px 6px;overflow-wrap:anywhere}
.pg-auth .au-ad.muted .v b{color:var(--text-2)}
.pg-auth .au-ledger{font-size:12px;color:var(--muted);border-top:1px dashed var(--line-2);padding-top:12px}
.pg-auth .au-ledger .mono{color:var(--text);font-weight:600}
.pg-auth .au-sample{background:linear-gradient(180deg,rgba(139,92,246,.06),transparent 70%),var(--panel)}
.pg-auth .au-sample p{font-size:12.5px;color:var(--text-2);line-height:1.8}
.pg-auth .au-admin{flex-direction:row;align-items:center;gap:12px;color:var(--text)}
.pg-auth .au-admin:hover{border-color:var(--line-2);background:var(--raised)}
.pg-auth .au-admin b{display:block;font-weight:600}
.pg-auth .au-admin small{display:block;color:var(--muted);font-size:12px}
.pg-auth .au-admin > .i{color:var(--muted)}

/* ---------- S29 project settings ---------- */
.pg-auth .au-settings{max-width:860px;display:flex;flex-direction:column;gap:16px}
.pg-auth .au-settings .page-head .set-head{margin-bottom:0}
.pg-auth .au-kvs{border-top:1px solid var(--line);margin-top:2px}
.pg-auth .au-kvs .kv .v{color:var(--text-2)}
.pg-auth .au-strict{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.pg-auth .au-strict legend{font:600 10.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;padding:0}
.pg-auth .au-strict.err .opt{border-color:var(--fail-line)}
.pg-auth .au-strict .msg{font-size:11.5px;color:var(--fail)}
.pg-auth .au-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.pg-auth .opt{transition:border-color var(--t-fast) ease,background var(--t-fast) ease}
.pg-auth .opt:hover{border-color:var(--line-2)}
.pg-auth .opt input{accent-color:var(--lime);flex:none}
.pg-auth .opt:has(input:checked){border-color:var(--lime-line);background:linear-gradient(180deg,var(--lime-soft),transparent 85%),var(--panel);box-shadow:inset 0 0 0 1px var(--lime-line)}
.pg-auth .opt:has(input:focus-visible){outline:2px solid var(--lime);outline-offset:2px}
.pg-auth .opt b .mono{font-size:11.5px;font-weight:500;color:var(--text-2);margin-left:3px}
.pg-auth .opt small{display:block;line-height:1.45;margin-top:2px}
.pg-auth .au-hint{font-size:12px;color:var(--muted);line-height:1.6}
.pg-auth .au-hint .i{margin-right:4px}
.pg-auth .au-hint b{color:var(--text-2);font-weight:600}
.pg-auth .au-consent{margin-top:2px}
.pg-auth .au-consent.off{opacity:var(--disabled-opacity);cursor:not-allowed}
.pg-auth .au-consent .au-since{font:500 11px var(--mono);color:var(--pass);margin-top:4px}
.pg-auth .au-savebar{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.pg-auth .au-danger{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.pg-auth .au-danger h2{font-size:15px}
.pg-auth .au-danger p{color:var(--muted);font-size:12.5px;margin-top:2px}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  .pg-auth .au-cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .pg-auth .au-card{padding:20px 18px}
  .pg-auth .au-first{grid-template-columns:minmax(0,1fr);padding:24px 20px;gap:24px}
  .pg-auth .au-first-main h1,.pg-auth .au-first-main h2{font-size:24px}
  .pg-auth .au-hero{gap:14px}
  .pg-auth .au-hero-r{margin-left:0;width:100%}
  .pg-auth .avatar.xl{width:52px;height:52px;font-size:18px}
  .pg-auth .au-grid{grid-template-columns:minmax(0,1fr)}
  .pg-auth .au-danger .btn{width:100%}
  .pg-auth .au-savebar .btn{flex:1}
  .pg-auth .au-kvs .kv{flex-direction:column;align-items:flex-start;gap:4px}
  .pg-auth .au-kvs .kv .v{text-align:left}
}

/* ---------- App layout (docs/SHELL-SPEC.md §6, mockup 2 #projects) ----------
   Projects: list = the projects, wide work = the cards. Settings: list = the projects, work = the form,
   stage = the project cover. Account and password: list = the account sections, wide work. The list
   column only shows when a project frames the page (ui.views.auth.frame_with_last_project). */

/* List column: the projects */
.pg-auth .au-prow{gap:10px;padding:8px 10px}
.pg-auth .au-prow .pdot{flex:none}
.pg-auth .au-ptx{display:flex;flex-direction:column;gap:1px;min-width:0}
.pg-auth .au-ptx b,.pg-auth .au-ptx small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-auth .au-ptx b{font-weight:600;color:var(--text)}
.pg-auth .au-ptx small{font-size:11.5px;color:var(--muted)}
.pg-auth .au-ptx small.mono{font:500 10.5px var(--mono)}
.pg-auth .au-pnew{margin-top:10px}
/* List column: the account sections */
.pg-auth .au-signout{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.pg-auth .au-signout button{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border-radius:var(--radius-sm);color:var(--text-2)}
.pg-auth .au-signout button:hover{background:var(--panel);color:var(--text)}
.pg-auth .au-signout .i{width:14px;height:14px;opacity:.7}

/* Work column */
.pg-auth .colbar h1 a{color:inherit}
.pg-auth .colbar h1 a:hover{color:var(--text-2)}
.pg-auth .au-first{margin-top:4px}
.pg-auth .au-account{max-width:1160px}
.pg-auth .au-narrow{margin:12px auto 0}
.pg-auth .au-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:12px 16px 0}
.pg-auth .au-thumbs span{aspect-ratio:4 / 3;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);background:var(--thumb-cool)}
.pg-auth .au-thumbs img{width:100%;height:100%;object-fit:cover}
.pg-auth .au-proj.current{border-color:var(--lime-line)}
.pg-auth .au-cur{color:var(--lime);border-color:var(--lime-line);background:var(--lime-soft)}
.pg-auth-settings .au-settings{max-width:none;gap:14px}
.pg-auth-settings .au-kvs .kv .v{flex:none;white-space:nowrap}
.pg-auth-settings .au-opts{grid-template-columns:minmax(0,1fr)}
.pg-auth-settings .au-danger{margin-top:0}
.pg-auth .au-cover-open,.pg-auth .au-cover-x{display:none}

/* Stage: the project cover; its body scrolls, the bar and the footer stay (flex:none: the bar may wrap) */
.pg-auth .au-cover{overflow:hidden}
.pg-auth .au-cover > .colbar{flex:none}
.pg-auth .au-coverbody{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 16px 24px;position:relative}
.pg-auth .au-coverbody .sec-h{margin:2px 0 10px}
.pg-auth .au-coverbody :is(.au-recent,.au-none) + .sec-h{margin-top:22px}
.pg-auth .au-recent{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pg-auth .au-recent a{display:block;aspect-ratio:4 / 3;border-radius:var(--radius-box);overflow:hidden;border:1px solid var(--line);background:var(--thumb-cool)}
.pg-auth .au-recent a:hover{border-color:var(--line-2)}
.pg-auth .au-recent img{width:100%;height:100%;object-fit:cover}
.pg-auth .au-packs{display:flex;flex-wrap:wrap;gap:6px}
.pg-auth .au-none{font-size:12.5px;color:var(--muted)}
.pg-auth .au-coverft{flex:none}
.pg-auth .au-strip{display:flex;gap:3px;flex:none}
.pg-auth .au-strip i{display:block;width:18px;height:28px;border-radius:var(--radius-xs);border:1px solid rgba(0,0,0,.25)}
.pg-auth .au-facts{display:flex;flex-wrap:wrap;gap:2px 12px;min-width:0;font:500 11px var(--mono);color:var(--muted)}
.pg-auth .au-facts b{font-weight:500;color:var(--text-2)}

/* Below 980px the cover is a sheet: "Cover" opens it (#inspector:target), its close link clears the hash */
@media (max-width:979px){
  .pg-auth .au-cover-open{display:inline-flex}
  .pg-auth .au-cover-x{display:inline-grid}
  .pg-auth .app > .au-cover:target{transform:none;visibility:visible}
}
@media (max-width:767px){
  .pg-auth .au-thumbs{padding:10px 12px 0}
  .pg-auth .au-recent{grid-template-columns:repeat(2,minmax(0,1fr))}
}