/* ===================================================================
   FILE      assets/edgelit-account.css     VERSION  R23  (2026-10-27)
   UPLOAD TO public_html/assets/edgelit-account.css
   The sign-in, welcome and account pages. Loaded after edgelit.css, which
   it leaves untouched: the home page and the privacy notice do not load
   this file, so nothing here can move them.
   CHANGES   R23 (spec 007): the code box's digits bold at 2.1rem, packed closer (.04em; R15's .18em spread them),
             so they read as one number, as in the email. Still Share Tech Mono, which ships in one weight.
             R19: a stray "=======" line, left by the merge of 25 October, removed; it made the browser drop
             the code box's 10px gap (the rule after it). The account page's backlit layout (spec 003;
             RFC-0001, option 1): the summary strip, Your CVs' rows with their score bars, the offers band;
             the cards themselves are edgelit-backlit.css's.
             R15: the Microsoft button in Microsoft's own style; Sign in with a passkey; the code box; the account
             page's passkeys.
             R13: Rajdhani's weights one heavier (AES's typefaces, edgelit.css);
             the Google button keeps Roboto.
             R02: first version. Phase 1.
   ========================================================================== */

/* Roboto Medium, served from this site, for the Google button only: Google's
   brand rules set the button's type. Apache 2.0, licence beside the font. */
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/roboto-latin-500-normal.woff2) format("woff2")}

.signin-page{gap:28px}
.signin-page .lede{font-size:1.06rem}
.signin{gap:14px}
.signin .fine a{color:var(--mute)}
.email-form{gap:10px}

/* Notices */
.notice{max-width:64ch;margin:0;padding:12px 16px;border-radius:8px;border:1px solid var(--line);border-left:3px solid var(--edge);
  background:rgba(220,232,255,.05);color:var(--ink-2);font-size:.95rem}
.notice b{color:#FFFFFF;font-weight:700}
.notice.ok{border-left-color:#7FE3A1}
.notice.err{border-left-color:#FF8A7A;background:rgba(255,138,122,.07);color:#FFD9D3}

/* LinkedIn and Google buttons, in each company's own colours. They keep the
   class btn, so the mouseover atom and its sound still find them. */
.btn.brand-btn{gap:12px;padding:0 18px;box-shadow:none}
.btn.brand-btn .mark{flex:none}
.btn.brand-linkedin{background:#0A66C2;color:#FFFFFF;font-weight:700}
.btn.brand-linkedin:hover{background:#004182;color:#FFFFFF;box-shadow:0 0 22px rgba(10,102,194,.45)}
.btn.brand-google{background:#FFFFFF;color:#1F1F1F;border:1px solid #747775;font:500 .95rem/1 "Roboto", var(--f-body)}
.btn.brand-google:hover{background:#F2F2F2;color:#1F1F1F;box-shadow:0 0 22px rgba(220,232,255,.3)}

/* The account button at the end of the menu */
.nav-links a.nav-account{display:inline-flex;align-items:center;gap:10px;padding-left:8px}
.initials,.avatar{display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--edge-a);background:var(--panel-2);
  color:#FFFFFF;font:600 .7rem/1 var(--f-head);letter-spacing:.04em;text-transform:none;box-shadow:0 0 12px rgba(220,232,255,.22)}
.initials{width:28px;height:28px}
@media (max-width:900px){.nav-links a.nav-account{padding-left:0}}

/* The account page */
.acct-head{display:flex;align-items:center;gap:18px}
.avatar{flex:none;width:64px;height:64px;font-size:1.25rem}
.acct-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:860px){.acct-grid{grid-template-columns:minmax(0,1fr)}}
.acct-grid .box{display:flex;flex-direction:column;gap:14px}
.acct-grid h2{font-size:1.2rem}
.acct-grid form{margin:0}
.acct-grid .btn{align-self:flex-start}
.btn.small{min-height:38px;padding:0 14px;font-size:.88rem}
/* .acct-grid as well, to outrank edgelit.css's ".box ul" indent */
.acct-grid .methods{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.methods li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 0;border-bottom:1px solid var(--line)}
.methods li:last-child{border-bottom:0}
.methods .m-name{min-width:100px;font-weight:700;color:#FFFFFF}
.methods .m-state{flex:1 1 200px;color:var(--ink-2);font-size:.93rem;min-width:0;overflow-wrap:anywhere}
.danger-zone{border-color:rgba(255,138,122,.35)}
.btn.danger{background:transparent;color:#FFC2B8;box-shadow:inset 0 0 0 1px rgba(255,138,122,.7)}
.btn.danger:hover{background:#B3261E;color:#FFFFFF;box-shadow:none}
.panel-form{max-width:520px;gap:18px}

/* R15: passkeys */
/* The page script shows these only where the browser can use passkeys. The hidden attribute alone loses to the
   display that .stack, .cta and .btn set, so it is restated here. */
[data-pk-signin][hidden],[data-pk-add][hidden],[data-pk-msg][hidden],[data-pk-none][hidden]{display:none}
.pk-signin{gap:10px}
/* Sign in with a passkey: EdgelitCV's own button, lit as the site's main buttons are, with a person and a key.
   It keeps the class btn, so the mouseover atom and its sound still find it. */
.btn.brand-passkey{background:var(--edge);color:var(--btn-ink);box-shadow:0 0 0 1px rgba(220,232,255,.35),0 0 22px rgba(220,232,255,.22)}
.btn.brand-passkey:hover{color:var(--btn-ink);box-shadow:0 0 0 1px rgba(220,232,255,.6),0 0 30px rgba(220,232,255,.45)}
.btn.brand-passkey[disabled],.passkeys .btn[disabled]{opacity:.65;cursor:progress}
.pk-msg{max-width:none}

/* R15: Microsoft button */
/* Microsoft, by its Sign in with Microsoft branding guidelines: the dark
   theme (#2F2F2F, white text, Segoe UI semibold), the four squares unchanged,
   12px between logo and title. Segoe UI is used where the computer has it
   (Windows); elsewhere the system's own sans. Nothing is fetched. The
   guidelines' 15px text is for a 41px button; this one is 46px, so 16px. */
.btn.brand-microsoft{gap:12px;background:#2F2F2F;color:#FFFFFF;letter-spacing:normal;text-transform:none;
  font:600 16px/1 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
.btn.brand-microsoft:hover{background:#3B3B3B;color:#FFFFFF;box-shadow:0 0 22px rgba(220,232,255,.3)}

/* R15: the sign-in code; R23: bold, larger, closer */
/* The box for the six digits on "Check your email" (auth/code.php): 56px tall,
   above the 48px a finger needs. R23 (spec 007, FR-6): the digits bold at
   2.1rem and packed closer (.04em; R15's .18em spread them out), so they read
   as one number, as the email now shows it. Still the site's mono face, which
   is served in one weight (400): the bold is the browser's own thickening of
   it. A bold face of its own is Jace's call (CHANGELOG-R23). */
.code-form{gap:10px}
.code-form input[name=code]{min-height:56px;font:700 2.1rem/1 var(--f-mono);letter-spacing:.04em}
.code-form input[aria-invalid=true]{border-color:#FF8A7A}
.code-form .fine{margin:0}
.code-form .btn{margin-top:6px}

/* R19: the account page, backlit (spec 003, FR-17 to FR-22; RFC-0001, Jace's option 1). */
.acct-page .acct-head{gap:18px}
/* The summary strip: two lit figures side by side, on a phone too (FR-18, FR-22). */
.acct-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.acct-summary .acct-fig{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;min-width:0}
.acct-summary .acct-fig .bl-figure{font-size:clamp(2rem,1.4rem + 2vw,3rem);line-height:1}
.acct-summary .acct-fig .bl-figure small{font:700 1rem var(--f-body);margin-left:4px;color:#C9D8E8;text-shadow:none}
.acct-summary .acct-none{font:700 1.3rem/1.2 var(--f-head);color:#FFFFFF}
.acct-summary .acct-fig .btn{align-self:flex-start}
.acct-summary .acct-role{color:#D3DDEE;font-size:.95rem;overflow-wrap:anywhere}
/* A score on a lit bar, as the review panel's (scores.css, .ats-track and .ats-fill). */
.acct-bar{position:relative;display:block;height:12px;border-radius:999px;background:linear-gradient(180deg,#03070F,#060E1B);
  border:1px solid rgba(var(--glow,62,123,245),.3);box-shadow:inset 0 0 10px rgba(var(--glow,62,123,245),.16),inset 0 1px 2px rgba(0,0,0,.8)}
.acct-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;
  background:linear-gradient(90deg,rgba(var(--glow,62,123,245),.35),rgb(var(--glow,62,123,245)) 75%,#FFFFFF);
  box-shadow:0 0 10px rgba(var(--glow,62,123,245),.75),0 0 24px rgba(var(--glow,62,123,245),.32)}
/* Your CVs: each CV a lit row, its role and employer, its date, its score and Open (FR-19). */
.acct-cv-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.acct-cv-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,200px) auto;align-items:center;gap:10px 18px;
  padding:12px 14px;border-radius:10px;background:rgba(var(--glow),.08);border:1px solid rgba(var(--glow),.35);
  box-shadow:0 0 16px rgba(var(--glow),.12)}
.acct-cv-what{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.acct-cv-what b{color:#FFFFFF;font-weight:700}
.acct-cv-what span{color:#D3DDEE}
.acct-cv-what small{color:#C9D8E8;font-size:.9rem}
.acct-cv-score{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 8px;min-width:0}
.acct-cv-score b{font-family:var(--f-display);color:var(--lit,#B9C2FF);font-size:1.3rem;text-shadow:0 0 12px rgba(var(--glow),.6)}
.acct-cv-score b + small{color:#C9D8E8}
.acct-cv-score .acct-bar{grid-column:1 / -1}
@media (max-width:640px){
  .acct-cv-row{grid-template-columns:minmax(0,1fr) auto}
  .acct-cv-score{grid-column:1 / -1;grid-row:2}
}
/* The offers: a gold band of three under Your CVs (FR-20). */
.acct-offer-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.acct-offer{display:flex;flex-direction:column;gap:8px;min-width:0}
.acct-offer h3{margin:0;color:var(--lit,#FFE29A);text-shadow:0 0 12px rgba(var(--glow),.5);font-size:1.1rem}
.acct-offer .btn{align-self:flex-start;margin-top:auto}
@media (max-width:860px){.acct-offer-list{grid-template-columns:minmax(0,1fr)}}
/* The cards keep the account grid's two to a row (one on a phone), as backlit cards. */
.acct-grid.bl-grid .bl-card{gap:14px}