/* Editorial welcome, compact accessible forms, shared public downloads. */
.login-layout { display:grid; grid-template-columns:1.1fr 1fr; min-height:100dvh; background:#fff; }
.login-visual { position:relative; display:flex; align-items:center; padding:112px clamp(32px,6vw,96px) 80px; background:#eef3f0; border-right:1px solid #e2eae5; overflow:hidden; }
.login-visual .brand { position:absolute; top:var(--space-8); left:clamp(32px,6vw,96px); font-size:20px; } .login-visual .brand small { display:none; }
.login-editorial { max-width:480px; width:100%; margin:auto; }
.login-story-label { font-size:var(--text-xs); color:var(--color-primary); letter-spacing:.03em; }
.login-visual h1 { font-size:clamp(36px,3.8vw,56px); font-weight:var(--weight-semibold); line-height:1.4; letter-spacing:-.04em; margin:var(--space-6) 0; }
.login-visual h1 span { color:#648375; } .login-editorial>p { color:#62756a; font-size:var(--text-base); line-height:1.8; margin-bottom:var(--space-8); }
.login-story-frame { overflow:hidden; border-radius:var(--radius-card); border:1px solid #d8e3dc; background:#f7faf7; }
.login-story-frame img { display:block; width:100%; height:224px; object-fit:cover; object-position:center 44%; }
.login-story-frame>span { display:block; padding:var(--space-4); color:#63796b; font-size:var(--text-xs); }
.login-visual-footer { position:absolute; left:clamp(32px,6vw,96px); bottom:var(--space-8); color:#7b8d82; font-size:11px; }
.login-form-wrap { display:flex; align-items:center; justify-content:center; padding:var(--space-12); }
.login-form { width:min(100%,368px); }
.login-kicker { font-size:var(--text-xs); color:var(--color-text-muted); }
.login-form h1,.login-form h2 { font-size:32px; margin:var(--space-3) 0 var(--space-2); letter-spacing:-.035em; }
.login-subtitle { color:var(--color-text-muted); font-size:var(--text-sm); margin:0 0 var(--space-8); }
.login-form .p-field { margin:var(--space-6) 0; } .login-form input { min-height:48px; }
.login-form>.btn.primary { margin-top:var(--space-3); min-height:48px; justify-content:space-between; font-size:var(--text-base); }
.foot-hint { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--space-4); padding-top:var(--space-6); margin-top:var(--space-8); border-top:1px solid var(--color-border); font-size:var(--text-xs); color:var(--color-text-muted); }
.code-row { display:flex; align-items:flex-end; gap:var(--space-2); margin:var(--space-6) 0; }
.login-form .code-row .p-field { flex:1; margin:0; min-width:0; } .code-row>.btn { min-height:48px; font-size:var(--text-xs); padding:var(--space-2) var(--space-3); flex-shrink:0; }
.auth-state { min-height:100dvh; display:grid; place-items:center; padding:var(--space-6); }
.auth-state .state-view { max-width:480px; background:#fff; border:0; border-radius:var(--radius-card); box-shadow:var(--shadow-card); }
.cap-modal-backdrop { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:#202a3280; opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--duration-fast),visibility var(--duration-fast); }
.cap-modal-backdrop.open { opacity:1; visibility:visible; pointer-events:auto; }
.cap-modal { width:314px; max-width:calc(100vw - 6px); padding:var(--space-4) var(--space-4) var(--space-6); border:0; border-radius:var(--radius-card); background:#fff; box-shadow:var(--shadow-overlay); }
.cap-modal-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4); }
.cap-modal-title { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); font-weight:var(--weight-semibold); } .cap-shield { color:var(--color-primary); }
.cap-modal-actions { display:flex; gap:var(--space-1); } .cap-refresh-btn,.cap-close-btn { display:grid; place-items:center; width:28px; height:28px; border:0; background:transparent; color:var(--color-text-muted); border-radius:var(--radius-sm); } .cap-refresh-btn:hover,.cap-close-btn:hover { background:var(--color-surface-subtle); }
/* These dimensions match the server's puzzle coordinates. */
.cap-stage { position:relative; width:280px; height:136px; background-size:280px 136px; overflow:hidden; border-radius:var(--radius-sm); }
.cap-stage-tag { position:absolute; left:var(--space-2); bottom:var(--space-2); color:#fff; font-size:10px; padding:2px var(--space-2); border-radius:4px; background:#202a3280; }
.cap-notch { position:absolute; top:28px; width:44px; height:44px; background:#202a3266; border:1px solid #ffffffc0; border-radius:4px; }
.cap-piece { position:absolute; top:28px; left:0; width:44px; height:44px; background-size:280px 136px; border:1px solid #fff; border-radius:4px; box-shadow:0 2px 8px #202a3255; }
.cap-gap { position:absolute; width:48px; height:44px; opacity:0; }
.cap-track { position:relative; width:280px; height:44px; margin-top:var(--space-3); overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface-subtle); touch-action:none; }
.cap-fill { position:absolute; inset:0 auto 0 0; background:var(--color-primary-soft); }
.cap-hint { position:absolute; inset:0; display:grid; place-items:center; color:var(--color-text-muted); font-size:var(--text-xs); }
.cap-knob { position:absolute; top:2px; left:0; width:48px; height:38px; display:grid; place-items:center; padding:0; border:1px solid var(--color-border-strong); border-radius:4px; background:#fff; color:var(--color-primary); touch-action:none; cursor:grab; }
.cap-knob:active { cursor:grabbing; } .cap-knob-icon { display:flex; } .cap-trap { display:none; } .cap-state { margin-top:var(--space-2); font-size:var(--text-xs); color:var(--color-text-muted); }
.cap-box.solved .cap-knob { background:var(--color-primary); color:#fff; } .cap-box.solved .cap-hint { color:var(--color-success); }
.public-shell { min-height:100dvh; background:var(--color-background); }
.dl-navbar { border-bottom:1px solid var(--color-border); background:#fff; }
.download-nav { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); max-width:1120px; margin:auto; padding:var(--space-4) var(--space-6); }
.download-nav .brand { font-size:20px; } .download-nav .brand small { display:none; }
.download-page { max-width:688px; margin:auto; padding:var(--space-12) var(--space-6); }
.download-intro { margin-bottom:var(--space-8); }
.admin-eyebrow { color:var(--color-text-muted); font-size:11px; letter-spacing:.08em; }
.download-intro h1 { margin:var(--space-4) 0; font-size:32px; letter-spacing:-.035em; } .download-intro p { color:var(--color-text-secondary); font-size:var(--text-base); }
.download-card { padding:var(--space-8); border:0; border-radius:var(--radius-card); background:var(--surface-blue); box-shadow:var(--shadow-card); }
.download-product { display:flex; align-items:center; gap:var(--space-4); padding-bottom:var(--space-6); border-bottom:1px solid var(--color-border); }
.download-product-icon { display:grid; place-items:center; width:48px; height:48px; flex-shrink:0; background:var(--color-primary-soft); border:0; color:var(--color-primary); border-radius:var(--radius-control); }
.download-product h2 { font-size:var(--text-lg); } .download-product p { font-size:var(--text-xs); color:var(--color-text-muted); margin-top:var(--space-1); }
.download-version { margin-left:auto; padding:var(--space-1) var(--space-2); font-size:var(--text-xs); color:var(--color-primary); background:var(--color-primary-soft); border-radius:var(--radius-sm); }
.download-card .release-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); padding:var(--space-6) 0; margin:0; }
.download-card .release-facts dt { color:var(--color-text-muted); font-size:var(--text-xs); margin-bottom:var(--space-2); }
.download-card .release-facts dd { font-size:24px; margin:0; font-weight:var(--weight-medium); } .download-card .release-facts .release-date { font-size:var(--text-base); line-height:2; }
.download-main-action { width:100%; min-height:48px; justify-content:flex-start; } .download-main-action .icon:last-child { margin-left:auto; }
.download-caption { font-size:var(--text-xs); color:var(--color-text-muted); margin-top:var(--space-4); }
.download-actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-4); margin-top:var(--space-6); padding-top:var(--space-6); border-top:1px solid var(--color-border); } .download-actions .text-link { font-size:var(--text-xs); }
.download-details { margin-top:var(--space-6); } .download-details details { padding:var(--space-4) 0; border-bottom:1px solid var(--color-border); font-size:var(--text-sm); color:var(--color-text-secondary); }
.download-details summary { cursor:pointer; } .download-details p,.download-details li { margin-top:var(--space-3); line-height:1.8; font-size:var(--text-sm); } .download-details :is(ol,ul) { padding-left:var(--space-6); }
.download-hash { display:block; overflow-wrap:anywhere; margin:var(--space-3) 0; font-size:var(--text-xs); }
.download-footer { color:var(--color-text-muted); font-size:11px; text-align:center; padding-top:var(--space-8); }
.download-unavailable { padding:var(--space-6) 0 0; } .download-unavailable h3 { font-size:var(--text-lg); } .download-unavailable p { color:var(--color-text-muted); font-size:var(--text-sm); margin-top:var(--space-2); }
@media(max-width:760px) {
 .login-layout { display:block; } .login-visual { display:block; padding:var(--space-6); border:0; border-bottom:1px solid var(--color-border); }
 .login-visual .brand { position:static; font-size:20px; } .login-editorial,.login-visual-footer { display:none; }
 .login-form-wrap { padding:var(--space-8) var(--space-6) var(--space-12); } .login-form { max-width:400px; }
 .login-form h1,.login-form h2 { font-size:28px; } .login-form .p-field { margin:var(--space-4) 0; }
 .download-nav { padding:var(--space-4); } .download-nav .brand { font-size:18px; } .download-nav .brand-mark { width:32px; height:32px; } .download-nav .btn { font-size:var(--text-xs); padding:var(--space-2); }
 .download-page { padding:var(--space-8) var(--space-4); } .download-card { padding:var(--space-6); } .download-intro h1 { font-size:28px; }
 .download-card .release-facts { gap:var(--space-3); } .download-card .release-facts dd { font-size:18px; } .download-card .release-facts .release-date { font-size:var(--text-xs); }
}