/* Accounts: header menu, the shared form-control system (inputs, buttons, cards) and the account/sign-in pages.
   Controls are defined once here and reused by every page under .signin, .acc and .card (OAuth consent included).
   Buttons: plain `button` / `.btn` = primary, `.quiet` = secondary, `.danger` = destructive. */

/* header menu */
.acct{margin-left:auto;font-size:14px;position:relative;flex:none;min-height:36px;display:flex;align-items:center}.acct>a{color:var(--ink);font-weight:600;text-decoration:none}.acct>a:hover{color:var(--violet)}
.acct-btn{width:36px;height:36px;padding:0;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:700 13px var(--sans);letter-spacing:.02em}
.acct-btn:hover,.acct-btn[aria-expanded=true]{background:var(--violet);color:#fff}
.acct-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:60;min-width:220px;padding:6px;background:var(--sheet);border:1px solid var(--rule);border-radius:10px;box-shadow:0 12px 32px rgba(10,14,25,.22),0 2px 6px rgba(10,14,25,.1);animation:acct-in .12s ease-out}
.acct-pop[hidden]{display:none}
.acct-pop form{margin:0}
.acct-pop a,.acct-pop button{display:block;width:100%;box-sizing:border-box;margin:0;padding:10px 12px;border:0;border-radius:6px;background:none;color:var(--ink);font:600 14px var(--sans);text-align:left;text-decoration:none;cursor:pointer}
.acct-pop a:hover,.acct-pop button:hover,.acct-pop a:focus-visible,.acct-pop button:focus-visible{background:color-mix(in srgb,var(--violet) 14%,transparent);color:var(--ink);outline:0}
.acct-pop .sep{height:1px;margin:6px 4px;background:var(--rule)}
@keyframes acct-in{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.acct-pop{animation:none}}

/* shared controls */
.signin input[type=email],.signin input[type=text],.acc input[type=email],.acc input[type=text],.input{width:100%;min-height:42px;font:400 15px var(--sans);padding:9px 12px;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink)}
.signin input::placeholder,.acc input::placeholder,.input::placeholder{color:var(--graphite);opacity:1}
.signin input:focus-visible,.acc input:focus-visible,.input:focus-visible{outline:2px solid var(--violet);outline-offset:1px;border-color:var(--violet)}
.signin button,.acc button,.signin .btn,.acc .btn,.card .btn{min-height:42px;padding:9px 18px;border-radius:8px;font:600 15px var(--sans);display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.2}
.signin button:not(.quiet):not(.danger),.acc button:not(.quiet):not(.danger){background:var(--ink);color:var(--paper)}
.signin button:not(.quiet):not(.danger):hover,.acc button:not(.quiet):not(.danger):hover{background:var(--violet);color:#fff}
.signin button.quiet,.acc button.quiet,.card .btn.quiet,.btn.quiet{background:var(--sheet);color:var(--ink);border:1px solid var(--rule)}
.signin button.quiet:hover,.acc button.quiet:hover,.card .btn.quiet:hover{border-color:var(--violet);color:var(--violet);background:var(--sheet)}
.btn.danger,button.danger{background:transparent;color:var(--red);border:1px solid var(--red);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 18px;border-radius:8px;font:600 15px var(--sans);cursor:pointer}
.btn.danger:hover,button.danger:hover{background:var(--red);color:#fff;border-color:var(--red)}
.btn.danger.solid,button.danger.solid{background:var(--red);color:#fff}.btn.danger.solid:hover,button.danger.solid:hover{background:color-mix(in srgb,var(--red) 80%,#000)}
.card{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:20px 22px;margin:0 0 16px}
.card h2{margin:0 0 10px;font:700 17px/1.3 var(--sans)}
.card p{margin:0 0 10px}.card p:last-child,.card form:last-child{margin-bottom:0}
.muted{color:var(--graphite)}
.hint{color:var(--graphite);font-size:13px}
.tag{display:inline-block;margin-left:6px;font-size:12px;border:1px solid var(--rule);border-radius:10px;padding:1px 8px;color:var(--graphite);vertical-align:1px}
.tag.warn{border-color:var(--red);color:var(--red)}
.banner{background:var(--hl);color:var(--ink);padding:12px 16px;border-radius:8px;margin:0 0 16px}

/* sign-in pages: one centred card */
.signin{max-width:440px;margin:32px auto;padding:28px 24px;background:var(--sheet);border:1px solid var(--rule);border-radius:14px}
.signin h1{margin:0 0 12px;font:700 24px/1.25 var(--sans)}
.signin p{margin:0 0 12px}
.signin label{display:block;font-weight:600;margin:14px 0 6px}
.signin form button[type=submit]:not(.quiet){width:100%}.signin form button.quiet{width:100%}
.signin form p{margin:16px 0 0}
.signin .code{font:600 28px/1 ui-monospace,Menlo,monospace;letter-spacing:.3em;text-align:center}
.signin .small{color:var(--graphite);font-size:13px;margin-top:20px;line-height:1.5}.signin .err{color:var(--red);font-weight:600;background:color-mix(in srgb,var(--red) 10%,transparent);padding:10px 12px;border-radius:8px}
.prov{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:8px 0;padding:12px;min-height:46px;border:1px solid var(--rule);border-radius:8px;background:var(--sheet);color:var(--ink);font:600 15px var(--sans);text-decoration:none}
.prov:hover{border-color:var(--violet)}
.prov.big{padding:16px;border-color:var(--ink)}.prov svg,.prov-link svg,.provname svg{width:18px;height:18px;flex:none}
.sep{text-align:center;color:var(--graphite);margin:14px 0;font-size:13px}

/* account page */
.acc h1{margin:0 0 20px}
.acc .plan{font:700 24px/1.2 var(--sans);margin:0 0 6px}
.acc .why{color:var(--graphite);margin:0 0 4px}
.acc .limits{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0 0}
.acc .limits div{background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:10px 12px}
.acc .limits dt{font-size:13px;color:var(--graphite)}.acc .limits dd{margin:2px 0 0;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.acc .rows{list-style:none;margin:0 0 14px;padding:0}
.acc .rows li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 0;border-top:1px solid var(--rule)}.acc .rows li:first-child{border-top:0;padding-top:2px}
.acc .rows .grow{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.acc .acts{display:flex;flex-wrap:wrap;gap:8px}.acc .acts form{margin:0}
.acc .acts button{min-height:36px;padding:6px 14px;font-size:14px}
.acc .provname{display:flex;align-items:center;gap:10px}
.acc .row-form{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}.acc .row-form input{flex:1 1 220px;width:auto}
.acc .actions{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.acc .prov-link{padding:8px 16px}
.acc .rows code{font-size:12px;color:var(--graphite)}
.acc .danger-zone{border-color:color-mix(in srgb,var(--red) 55%,var(--rule))}.acc .danger-zone h2{color:var(--red)}

@media (max-width:560px){
  .signin{margin:16px;padding:22px 16px;border-radius:12px}
  .card{padding:16px}
  .acc .row-form button{flex:1 1 100%}
  .acc .actions .btn{flex:1 1 100%}
}