/* Velotrak website — sign-in and account pages (A1 item 7). Web bible tokens and components from
   site.css; only the page layout, the bible's table (as on the product page) and the form notices
   are added here. No raw colours: every value is a role token. */

.acct{ max-width:880px; margin:0 auto; padding:40px var(--gutter) 0; display:grid; gap:28px; }
.acct.narrow{ max-width:440px; }
.acct-head{ display:grid; gap:8px; }
.acct-sec{ padding:24px; display:grid; gap:16px; }
.acct-sec > .t-h3{ display:flex; align-items:center; gap:10px; }

/* Notices: a single line under the page title (bible tags + text) */
.notice{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-ctrl); font-size:14px; line-height:1.5; }
.notice.ok{ color:var(--pos-text); background:var(--pos-soft); }
.notice.err{ color:var(--neg-text); background:var(--neg-soft); }

/* Forms: the bible's field + input, stacked */
.form{ display:grid; gap:14px; }
.form .btn{ justify-self:start; }
.form.wide .btn{ justify-self:stretch; }
.field .hint{ font-size:12px; color:var(--text-low); margin:0; }
/* Live password-length check without script (same rule as the pre-bible pages) */
.pw-ok, .pw-short{ display:none; }
#new-password:valid ~ .hint .pw-ok{ display:inline; color:var(--pos-text); }
#new-password:invalid:not(:placeholder-shown) ~ .hint .pw-short{ display:inline; color:var(--neg-text); }

/* Tables: the bible table (as on the product page) */
.tbl-wrap{ overflow-x:auto; border-radius:var(--r-ctrl); }
table.tbl{ width:100%; border-collapse:collapse; font-size:14px; }
table.tbl th, table.tbl td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.tbl th{ font-size:12px; font-weight:600; color:var(--text-low); white-space:nowrap; }
table.tbl td{ color:var(--text-mid); }
table.tbl tr:last-child td{ border-bottom:none; }
table.tbl code{ font-family:var(--mono); font-size:12px; color:var(--text-low); }
table.tbl td form{ margin:0; }

/* Machine name: inline rename */
.rename{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.rename .input{ width:160px; height:32px; }
.mcode{ display:block; margin-top:4px; }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.muted{ color:var(--text-low); }

@media (max-width:640px){
  .acct{ padding-top:24px; }
  .acct-sec{ padding:18px; }
}

/* Admin pages and /activate (A1 follow-up): the pre-bible markup (plain tables, stacked forms, plain
   buttons, notices) restyled with the bible's tokens and components, inside .acct.legacy. */
.acct.wide{ max-width:var(--container); }
.legacy h2{ font-size:20px; line-height:1.3; font-weight:600; color:var(--text-hi); margin:12px 0 0; }
.legacy p{ margin:0; color:var(--text-mid); font-size:15px; line-height:1.6; }
.legacy .install{ font-size:13px; color:var(--text-low); }
.legacy .scroll{ overflow-x:auto; border-radius:var(--r-panel); background:var(--panel); box-shadow:var(--shadow-panel), var(--hl-panel); padding:6px 8px; }
.legacy table{ width:100%; border-collapse:collapse; font-size:14px; }
.legacy th, .legacy td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.legacy th{ font-size:12px; font-weight:600; color:var(--text-low); white-space:nowrap; }
.legacy td{ color:var(--text-mid); }
.legacy tr:last-child td{ border-bottom:none; }
.legacy code{ font-family:var(--mono); font-size:12px; color:var(--text-low); white-space:nowrap; }
.legacy .st-validated{ color:var(--pos-text); font-weight:600; }
.legacy .st-revoked{ color:var(--neg-text); font-weight:600; }
.legacy .muted{ color:var(--text-low); }
/* Forms */
.legacy form.stack{ display:grid; gap:14px; max-width:440px; }
.legacy form.stack label, .legacy .field label{ display:grid; gap:6px; font-size:12px; font-weight:600; color:var(--text-low); }
.legacy form.inline, .legacy td form{ display:inline-flex; gap:6px; align-items:center; margin:0; }
.legacy input:not([type=hidden]), .legacy select{
  width:100%; height:38px; padding:0 12px; font-family:var(--font); font-size:14px; color:var(--text-hi);
  background:var(--field); border:1px solid var(--field-border); border-radius:var(--r-ctrl);
  box-shadow:var(--sunken), var(--sunken-edge); outline:none;
}
.legacy td input:not([type=hidden]){ width:auto; height:32px; }
.legacy input:focus, .legacy select:focus{ border-color:var(--accent); box-shadow:var(--sunken), var(--focus-ring); }
/* Buttons: secondary by default; the main action of a stacked form is primary */
.legacy button{
  display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 14px; border:none;
  border-radius:var(--r-ctrl); font-family:var(--font); font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer;
  color:var(--text-hi); background:var(--btn-sec); box-shadow:var(--shadow-ctrl), var(--hl-sec);
}
.legacy button:hover{ background:var(--btn-sec-hov); }
.legacy form.stack > button{ height:40px; padding:0 20px; font-size:14px; color:#fff; background:var(--btn-pri); box-shadow:var(--shadow-ctrl), var(--hl-pri); justify-self:start; }
.legacy form.stack > button:hover{ background:var(--btn-pri-hov); }
.legacy button:focus-visible{ box-shadow:var(--focus-ring); }
/* Admin sub-navigation */
.admin-nav{ display:flex; gap:4px; flex-wrap:wrap; }
.admin-nav a{ padding:6px 12px; border-radius:var(--r-pill); font-size:13px; font-weight:600; color:var(--text-mid); text-decoration:none; }
.admin-nav a:hover{ color:var(--text-hi); background:var(--btn-ghost-hov); }
.admin-nav a.on{ color:var(--text-hi); background:var(--btn-sec); box-shadow:var(--shadow-ctrl), var(--hl-sec); }