/* Shared account foundation; workspace themes live separately in style.css. */
:root {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f5f3ed;
  background: #111111;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a, input, select { outline-offset: 4px; }
:focus-visible { outline: 2px solid currentColor; }
button { cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
label { display: block; font-size: 13px; font-weight: 600; margin: 20px 0 0; }
input, select {
  width: 100%; min-width: 0; padding: 13px 14px;
  border: 1px solid #666666; border-radius: var(--radius-control,8px); margin-top: 8px;
  background-color: #1b1b1b; color: #f5f3ed;
}
input:focus, select:focus { border-color: #f5f3ed; }
.eyebrow { font-size: 11px; letter-spacing: 2px; font-weight: 700; }
h2 { font-size: 28px; letter-spacing: -1px; margin: 16px 0; }
.muted, .footnote { color: #aaaaaa; line-height: 1.6; }
.muted { font-size: 14px; margin-bottom: 32px; }
.footnote { font-size: 12px; margin-top: 24px; }
.primary, .secondary { padding: 13px 18px; border-radius: var(--radius-control,8px); font-weight: 650; border: 0; }
.primary { width: 100%; background: #f0eee7; color: #171717; display: flex; justify-content: space-between; align-items: center; }
.secondary { background: #303030; color: #eeeeee; border: 1px solid #555555; }
.message { font-size: 13px; color: #f5f3ed; line-height: 1.5; min-height: 20px; overflow-wrap: anywhere; }
[hidden] { display: none !important; }

/* Login: normal document scrolling, no fixed viewport or keyboard positioning. */
.login-page { -webkit-text-size-adjust: 100%; }
.login-layout { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; }
.login-layout > * { min-width: 0; }
.intro {
  padding: clamp(32px, 4.5vw, 72px);
  background: #e7e5da; color: #171717; color-scheme: light;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 40px;
}
/* Baseline alignment follows the visible letterforms, not their unequal line boxes. */
.wordmark { display: inline-flex; align-items: baseline; gap: 15px; align-self: flex-start; }
.wordmark-symbol { font-size: 50px; font-weight: 850; line-height: 1; letter-spacing: -4px; }
.wordmark-name { font-size: 22px; font-weight: 650; line-height: 1; letter-spacing: -.7px; }
.intro-copy { padding-block: 48px; }
.intro h1 { font-size: clamp(40px, 4.8vw, 68px); line-height: 1.08; letter-spacing: -.05em; margin: 0; font-weight: 700; }
.brand-signatures { display: flex; align-items: center; gap: 28px; }
.brand-signatures > div { display: flex; align-items: center; }
.brand-signatures img { display: block; width: 44px; height: 44px; object-fit: contain; }
.mobile-brands { display: none; }
.login-side {
  display: flex; align-items: center; justify-content: center;
  padding: 48px clamp(24px, 4vw, 64px);
}
.login-card { width: 100%; max-width: 360px; }
.login-card h2 { font-size: 32px; line-height: 1.2; letter-spacing: -1px; margin: 0 0 32px; }
.login-card label { margin: 22px 0 8px; font-size: 13px; line-height: 1.4; }
.login-card input {
  display: block; margin: 0; min-height: 50px;
  font-size: 16px; line-height: 1.5; scroll-margin-block: 24px;
}
.login-card input:focus-visible { outline: 2px solid #f5f3ed; outline-offset: 3px; }
.password-row { position: relative; }
.password-row input { padding-right: 74px; }
.quiet { color: #dedbd3; background: transparent; border: 0; border-radius: 5px; }
.password-row .quiet {
  position: absolute; inset-inline-end: 4px; top: 3px; bottom: 3px;
  min-width: 62px; min-height: 44px; padding: 8px; font-size: 13px; font-weight: 600;
}
.login-card .message { margin: 12px 0; min-height: 20px; }
.login-card .primary { min-height: 50px; font-size: 16px; }
.login-card .primary:hover:not(:disabled) { background: #ffffff; }
.login-card .footnote { margin: 20px 0 0; font-size: 12px; }
@media (max-width: 720px) {
  .login-layout { display: block; }
  .intro {
    background: #111111; color: #f5f3ed; color-scheme: dark; gap: 10px;
    max-width: 448px; margin-inline: auto;
    padding: max(28px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
  }
  .wordmark { gap: 12px; }
  .wordmark-symbol { font-size: 38px; letter-spacing: -3px; }
  .wordmark-name { font-size: 22px; }
  .intro-copy, .brand-signatures { display: none; }
  .mobile-brands { display: block; margin: 0; color: #aaaaaa; font-size: 11px; line-height: 1.5; letter-spacing: .025em; font-weight: 500; }
  .login-side {
    display: block;
    padding: 32px max(24px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  }
  .login-card { margin-inline: auto; max-width: 400px; }
  .login-card h2 { font-size: 28px; margin-bottom: 26px; }
  .login-card label { margin-top: 20px; }
  .login-card .footnote { margin-top: 20px; }
}
@media (max-width: 359px) {
  .intro { padding-top: max(20px, env(safe-area-inset-top)); }
  .login-side { padding-top: 28px; }
}
@media (max-height: 520px) and (max-width: 720px) {
  .login-side { padding-top: 24px; }
}

/* Existing account layout. */
.account-wrap{max-width:1060px;margin:auto;padding:32px 24px 80px}.account-header{display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid #353535;padding-bottom:22px}.account-header h1{margin:0;font-size:27px}.account-header nav{display:flex;align-items:center;gap:18px;font-size:14px}.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}.panel{border:1px solid #383838;background:#191919;border-radius:14px;padding:26px}.panel h2{font-size:22px;margin:0 0 12px}.panel .primary{margin-top:22px}.role-help{font-size:13px;color:#aaaaaa;line-height:1.7}.user-list{display:grid;gap:15px;margin-top:18px}.user-card{border:1px solid #414141;border-radius:10px;padding:20px}.user-card header{display:flex;justify-content:space-between;gap:15px}.user-card h3{margin:0 0 4px}.user-card small{color:#b6b6b6}.user-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.user-card button{margin-top:18px}.wide{grid-column:1/-1}[hidden]{display:none!important}
@media (max-width: 720px) {
  .account-grid { grid-template-columns: 1fr; }
  .account-header { align-items: flex-start; flex-direction: column; }
  .user-fields { grid-template-columns: 1fr; gap: 0; }
  .panel { padding: 20px; }
}

/* Account forms share the workspace's touch sizing and safe-area treatment. */
.account-wrap { min-width: 0; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
.account-grid, .account-grid > *, .user-card, .user-fields > * { min-width: 0; }
.account-wrap input, .account-wrap select { min-height: 44px; font-size: 16px; }
.account-wrap button, .account-header a { min-height: 44px; }
.account-header a { display: inline-flex; align-items: center; }
.account-wrap h1, .account-wrap h3, .account-wrap small, .account-wrap .message { overflow-wrap: anywhere; }
.user-card header { flex-wrap: wrap; }
@media (max-width: 400px) {
 .account-wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
 .account-header nav { flex-wrap: wrap; gap: 12px; }
}