/* Sign-in, administration and API key dialog. Tokens and shared components live in theme.css. */

/* Sign-in */
.account-page{display:flex;flex-direction:column}
.account-page .account-header-note{display:block}
.login-layout{display:grid;flex:1;grid-template-columns:minmax(0,1.6fr) minmax(340px,.8fr)}
.login-intro{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(140px,14vw,220px) 0 0;overflow:clip}
.login-intro .ghost{top:-12px;left:24px}
.login-intro .title-a,.login-intro>p{position:relative;margin:0 48px}
.login-intro .title-a h1{font-size:40px}
.login-intro>p{max-width:420px;margin-top:16px;margin-bottom:48px;color:var(--ink-secondary);font-size:14px;line-height:1.8}
.login-band{position:relative;margin-top:auto;padding:28px 48px 32px;background:var(--action);color:var(--ink);text-transform:uppercase}
.login-band span{display:block;font:300 20px/1.2 var(--font-latin);letter-spacing:.02em}
.login-band strong{display:block;font:500 40px/1.1 var(--font-latin)}
.login-card{display:flex;flex-direction:column;border-width:0 0 0 1px;box-shadow:var(--shadow-rail)}
.login-card .panel-band{min-height:64px;padding-right:24px;background-image:var(--hatch-dark)}
.login-card .panel-band h2{font-size:20px;font-weight:400}
.login-body{padding:32px 24px}
.login-body label{margin-bottom:20px}
.login-body .account-hint{margin-bottom:24px}
.account-submit{width:100%}
.login-passkey{margin-top:20px}
.login-divider{display:flex;align-items:center;gap:12px;margin-bottom:20px;color:var(--ink-secondary);font-size:12px}
.login-divider::before,.login-divider::after{content:"";flex:1;border-top:1px solid var(--line)}
.login-passkey .account-hint{margin:12px 0 0}
.login-body .account-message{margin-top:20px}
.account-footer{padding:10px 16px;border-top:1px solid var(--line);background-color:var(--surface-muted);background-image:var(--hatch);color:var(--ink-secondary);font-size:12px}

/* Administration */
.admin-workspace{min-width:0;padding:24px 16px}
.admin-workspace.account-message{margin:0 16px 24px;padding:8px 12px}
.admin-heading{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin-bottom:32px}
.admin-heading .title-a>p{margin-top:8px;color:var(--ink-secondary);font-size:13px}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;margin-bottom:32px}
.stat-card{min-width:0;padding-left:12px;border-left:4px solid var(--ink)}
.stat-card span{display:block;color:var(--ink-secondary);font-size:12px}
.stat-card span::before{content:"// "}
.stat-card strong{display:block;margin-top:4px;font:500 40px/1 var(--font-tech);font-variant-numeric:tabular-nums}
.admin-tabs{overflow-x:auto;scrollbar-width:none}
.admin-section{padding:24px 0 0}
.admin-section-heading{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;margin-bottom:16px}
.admin-section-heading h2{padding-left:10px;border-left:4px solid var(--ink);font-size:16px;font-weight:700;line-height:1.25}
.admin-section-heading p{margin-top:8px;color:var(--ink-secondary);font-size:13px}
.table-scroll{max-width:100%;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.admin-table{width:100%;border-collapse:collapse;font-size:13px;text-align:left}
.admin-table th{height:32px;padding:0 12px;background:var(--surface-inverse);color:var(--ink-inverse);font-weight:500;white-space:nowrap}
.admin-table td{height:44px;padding:6px 12px;border-bottom:1px solid var(--line);vertical-align:middle;overflow-wrap:anywhere}
.table-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;min-width:90px}
.table-actions a{font-weight:500;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.table-status{display:inline-block;padding:0 10px;border-radius:999px;background:var(--surface-inverse);color:var(--ink-inverse);font-size:12px;font-weight:500;line-height:20px;white-space:nowrap}
.table-status.off{background:var(--surface-muted);color:var(--ink-secondary)}
.table-muted{color:var(--ink-tertiary);font-size:12px}
.table-filename{min-width:125px;max-width:210px}
.table-time{font-family:var(--font-tech);font-variant-numeric:tabular-nums;white-space:nowrap}
.table-sha{max-width:160px;color:var(--ink-secondary);font:12px/1.5 var(--font-mono)}
.table-empty{height:96px!important;color:var(--ink-secondary);text-align:center}
.admin-notice{margin-top:16px;color:var(--ink-secondary);font-size:12px}
.admin-user-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.hazard{height:6px;background:repeating-linear-gradient(-45deg,var(--action) 0 12px,var(--ink) 12px 24px)}

/* API key dialog */
.apikey-dialog{width:min(92vw,640px)}
.apikey-state{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px}
.badge.active{border-color:#38383a;background:#38383a;color:#fff}
.apikey-state code{font-size:13px;overflow-wrap:anywhere}
.apikey-count{margin-left:auto;color:var(--ink-secondary);font:500 12px/1.6 var(--font-tech);font-variant-numeric:tabular-nums}
.apikey-revocation-hint{margin-top:12px}
.apikey-metadata{margin-bottom:20px;font-size:13px}
.apikey-metadata>div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line)}
.apikey-metadata>div:first-child{border-top:1px solid var(--line)}
.apikey-metadata dt{color:var(--ink-secondary)}
.apikey-metadata dd{font:500 13px/1.6 var(--font-tech);font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}
.apikey-secret-box,.apikey-confirm{margin-bottom:20px;padding:16px;border-left:4px solid var(--ink);background:var(--surface-sunken)}
.apikey-secret-box label{margin-bottom:12px}
.apikey-secret-box input{background:var(--surface);font-family:var(--font-mono);font-size:13px}
.apikey-secret-box p{margin-top:12px;color:var(--ink-secondary);font-size:12px}
.apikey-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:20px}
.apikey-confirm{border-left-color:var(--danger)}
.apikey-confirm h3{margin-bottom:4px;font-size:15px;font-weight:700}
.apikey-confirm p{color:var(--ink-secondary);font-size:13px}
.apikey-confirm .dialog-actions{margin-top:16px}
.apikey-dialog .account-message{margin-bottom:12px}
.apikey-docs{margin-top:20px;font-size:13px}
.apikey-docs p{margin:12px 0 8px}
.apikey-docs code{font-size:12px;overflow-wrap:anywhere}
.apikey-docs pre{margin:0;padding:12px 16px;overflow-x:auto;background:var(--surface-inverse);color:var(--ink-inverse);font-size:12px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.apikey-docs ul{padding-left:18px;list-style:square;color:var(--ink-secondary);font-size:12px;line-height:1.8}
.apikey-docs li+li{margin-top:4px}

/* Passkey account management */
.passkey-dialog{width:min(92vw,600px)}
.passkey-list{margin:0 0 24px;padding:0;list-style:none}
.passkey-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.passkey-list li:first-child{border-top:1px solid var(--line)}
.passkey-list strong{display:block;overflow-wrap:anywhere;font-size:14px}
.passkey-list .account-hint{margin-top:4px}
.passkey-list .text-button{flex:none}
.passkey-list .passkey-empty{display:block;color:var(--ink-secondary);font-size:13px}
.passkey-count{margin-bottom:12px;color:var(--ink-secondary);font-size:12px}
.passkey-dialog h3{margin-bottom:12px;font-size:15px;font-weight:700}
.passkey-dialog label{margin-bottom:16px}
.passkey-dialog .account-message{margin-top:16px}
.passkey-dialog .account-hint{font-size:12px}
.passkey-support{margin-bottom:16px;padding:12px;border-left:4px solid var(--line-strong);background:var(--surface-sunken);color:var(--ink-secondary);font-size:13px}
.passkey-delete{padding:16px;border-left:4px solid var(--danger);background:var(--surface-sunken)}
.passkey-delete .account-description{margin-bottom:16px}

@media(hover:hover){
  .admin-table tbody tr:hover td{background:rgba(25,25,25,.05)}
  .table-actions a:hover{text-decoration-color:var(--ink)}
}
@media(max-width:880px){
  .login-layout{grid-template-columns:minmax(0,1fr)}
  .login-intro{padding-top:32px}
  .login-intro .ghost{display:none}
  .login-intro .title-a,.login-intro>p{margin-right:16px;margin-left:16px}
  .login-intro .title-a h1{font-size:28px}
  .login-intro>p{margin-bottom:24px}
  .login-band{padding:16px}
  .login-band span{font-size:14px}
  .login-band strong{font-size:24px}
  .login-card{border-width:0;box-shadow:none}
  .login-body{padding:24px 16px}
}
@media(max-width:540px){
  .account-page .account-header-note{display:none}
  .stat-card strong{font-size:32px}
  .admin-user-form-grid{grid-template-columns:1fr}
  .dialog-title{padding:8px 16px}
  .dialog-body{padding:16px}
}
@media(min-width:881px){
  .admin-workspace{padding:32px 24px}
  .admin-workspace.account-message{margin:0 24px 24px}
  .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:1360px){
  .admin-workspace{padding:32px}
  .admin-workspace.account-message{margin:0 32px 24px}
}