/*
 * web/css/inregistrare.css — the signup page, and ONLY the signup page.
 *
 * WHY THIS FILE EXISTS. A visitor clicking „Începe gratuit" on vtpgo.ro crosses
 * an origin AND, until this file, a typeface, a palette and a type scale. This
 * page is the last step of the marketing funnel, so it wears the marketing
 * site's clothes: IBM Plex, #10264A, the 10px radius, the fluid scale.
 *
 * ⚠ WHY A DEDICATED SHEET AND NOT AN EDIT TO A SHARED ONE. This page used to
 * load totp.css (6 pages) and confirma-email.css (5 pages). Restyling either
 * would have silently restyled login, 2FA, invite, password-reset and
 * confirma-email — five surfaces nobody asked to change. This file replaces
 * both FOR THIS PAGE and defines every one of the twelve classes the markup
 * uses. The markup is unchanged: same ids, same class names, so
 * js/inregistrare.js and js/page-elements.test.mjs are untouched.
 *
 * ⚠ THE [hidden] GUARD AT THE BOTTOM IS LOAD-BEARING. Seven elements ship with
 * the `hidden` attribute and are revealed by the script:
 *   #su-request  #su-request-error  #su-who  #su-confirm  #su-confirm-error
 *   #su-done     #su-login-link
 * Any rule that sets `display` on one of them beats the UA's
 * [hidden]{display:none} and pins it open — the recurring footgun in this repo
 * (see confirma-email.css's own comment about it). Do not delete the guard.
 *
 * ⚠ THE FONTS MUST BE FIRST-PARTY. app.vtpgo.ro sends
 * `Content-Security-Policy: default-src 'self'` with NO font-src, so font-src
 * falls back to 'self'. A @font-face pointing at https://vtpgo.ro/assets/fonts/
 * is blocked by CSP, and vtpgo.ro sends no Access-Control-Allow-Origin, so it
 * would fail the CORS check even if the CSP allowed it. The four .woff2 are
 * copied into web/fonts/ (64 KB, byte-identical to site/assets/fonts/). NO
 * SERVER CHANGE IS NEEDED — do not add font-src to the host Caddy config.
 */

@font-face{font-family:'Plex';src:url('../fonts/plex-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex';src:url('../fonts/plex-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plex';src:url('../fonts/plex-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex';src:url('../fonts/plex-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* The marketing site's palette and scale, copied verbatim from
   site/assets/css/style.css. Namespaced --mk-* so they cannot collide with the
   generated --vtp-* tokens in tokens.css, which this page does not use. */
:root{
  --mk-navy:#10264A;
  --mk-navy-2:#1B3A6B;
  --mk-ground:#F5F7FB;
  --mk-ink:#16202F;
  --mk-slate:#647287;
  --mk-line:#DDE3EC;
  --mk-accent:#D9541E;
  --mk-err:#B4321A;

  /* ⚠ DELIBERATELY NOT the site's --line for a field border. #DDE3EC is 1.29:1
     against white and fails WCAG 1.4.11's 3:1 rule for a control the visitor
     must actually find and fill. #8794A9 measures 3.07:1 at the same blue-grey
     temperature. (The app's own #9ca3af is 2.54:1 — totp.css:157's "3.06:1"
     comment is simply wrong. The site's contact form has the 1.29:1 problem;
     this page does not inherit it.) */
  --mk-field-border:#8794A9;

  --mk-step--1:clamp(.82rem,.79rem + .14vw,.9rem);
  --mk-step-0:clamp(1rem,.96rem + .2vw,1.08rem);
  --mk-step-2:clamp(1.45rem,1.3rem + .7vw,1.85rem);
  --mk-gut:clamp(1.15rem,4vw,2.5rem);
  --mk-r:10px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--mk-ground);
  color:var(--mk-ink);
  font-family:'Plex',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  font-size:var(--mk-step-0);
  line-height:1.6;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ---------- header ------------------------------------------------------- */
/* The markup keeps .logo-circle / .app-name / .app-subtitle — other pages and
   the nav builder use those names, and renaming them here would be a markup
   change for no gain. They are simply restyled into the site's header: white
   with a hairline, a rounded-square mark (the favicon's rx:14/64 ≈ 22%, NOT a
   circle — the site has no circle anywhere), and a baseline-aligned wordmark. */
.topbar{
  /* 2026-10-04 — a white bar: the navy VTP GO mark (brand.css §1 reads this). */
  --vtp-mark: url("../icons/vtpgo-mark-dark-256.png");
  background:#fff;
  border-bottom:1px solid var(--mk-line);
  padding:.85rem var(--mk-gut);
  display:flex;align-items:center;gap:1.5rem;
}
.topbar-brand{
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--mk-ink);
}
/* `> div + div` and not `> div`: the first child IS .logo-circle. */
.topbar-brand > div + div{
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
}
.topbar .logo-circle{
  width:30px;height:30px;flex:none;
  border-radius:7px;
  background:var(--mk-navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;letter-spacing:-.02em;
}
.topbar .app-name{
  font-size:1.12rem;font-weight:700;letter-spacing:-.02em;color:inherit;
}
.topbar .app-subtitle{
  font-size:var(--mk-step--1);font-weight:400;color:inherit;opacity:.72;
}

/* ---------- the card ----------------------------------------------------- */
.ce-main{
  flex:1;
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(2rem,7vh,4rem) var(--mk-gut);
}
.ce-card{
  width:100%;max-width:33rem;
  background:#fff;
  border:1px solid var(--mk-line);
  border-radius:var(--mk-r);
  padding:clamp(1.6rem,4vw,2.6rem);
  box-shadow:0 10px 34px -22px rgba(16,38,74,.5);
  /* ⚠ LEFT, not centred. The old sheet centred everything, which reads as a
     receipt; a four-field form people have to fill in reads left. */
  text-align:left;
}
.ce-card h1{
  margin:0 0 .6rem;
  font-size:var(--mk-step-2);font-weight:600;
  line-height:1.12;letter-spacing:-.018em;color:var(--mk-ink);
}
.ce-detail{
  margin:0 0 1.6rem;
  color:var(--mk-slate);font-size:var(--mk-step--1);line-height:1.5;
  overflow-wrap:anywhere;
}
/* wireConfirm()'s error path sets #su-intro to '' — don't leave its gap behind */
.ce-detail:empty{margin:0}
.ce-status{
  margin:0 0 1rem;
  font-size:var(--mk-step-0);color:var(--mk-ink);line-height:1.6;
}

/* ---------- fields: the site's .field, wearing the app's class names ------ */
.form-group{margin-bottom:1.05rem}
.form-group label{
  display:block;margin-bottom:.34rem;
  font-size:var(--mk-step--1);font-weight:500;color:var(--mk-ink);
}
.form-group input{
  width:100%;
  font:inherit;font-size:var(--mk-step-0);
  padding:.66rem .8rem;
  border:1px solid var(--mk-field-border);
  border-radius:var(--mk-r);
  background:#fff;color:var(--mk-ink);
}
.form-group input:focus{border-color:var(--mk-navy)}
/* #su-email-help and #su-rules are .ce-detail INSIDE a .form-group — tighter. */
.form-group .ce-detail{margin:.34rem 0 0}

/* 2026-09-27 — the privacy/terms line above each submit button. A link inside a
   sentence needs a non-colour cue (WCAG 1.4.1), as on login.html's signup line. */
.su-legal{margin:0 0 1.1rem}
.su-legal a{color:var(--mk-navy);text-decoration:underline;text-underline-offset:3px}

/* ---------- state 2: who the account is being created for ---------------- */
#su-who{
  margin:0 0 1.5rem;padding:.9rem 1rem;
  background:var(--mk-ground);border-radius:var(--mk-r);
  font-size:var(--mk-step--1);
}
#su-who dt{margin-top:.55rem;color:var(--mk-slate)}
#su-who dt:first-child{margin-top:0}
#su-who dd{margin:.1rem 0 0;font-weight:500;color:var(--mk-ink);overflow-wrap:anywhere}

/* ---------- the button: the site's .btn.btn-primary ---------------------- */
/* ⚠ An author `display` beats the UA's `[hidden] { display: none }`, so without
   this a .ce-btn marked hidden renders anyway. confirma-email.html,
   invitatie.html and reset-parola.html get this guard from confirma-email.css;
   inregistrare.html loads THIS sheet instead and never inherited it. */
.ce-btn[hidden]{display:none}
.ce-btn{
  display:inline-block;width:100%;
  border:0;border-radius:var(--mk-r);cursor:pointer;
  font:inherit;font-weight:600;font-size:var(--mk-step--1);
  padding:.72rem 1.15rem;
  background:var(--mk-navy);color:#fff;
  text-align:center;text-decoration:none;
  transition:background-color .15s ease;
}
.ce-btn:hover{background:var(--mk-navy-2)}
.ce-btn:disabled{opacity:.55;cursor:default}
#su-login-link{margin-top:.4rem}

/* ---------- errors ------------------------------------------------------- */
/* No `display` here, on purpose: both alert regions ship `hidden`. */
[role="alert"]{
  margin:0 0 1rem;padding:.7rem .9rem;
  background:#FBEAE5;color:var(--mk-err);
  border-left:3px solid var(--mk-err);
  border-radius:0 6px 6px 0;
  font-size:var(--mk-step--1);
}

/* ---------- focus: the site's orange ring, not the app's navy one -------- */
/* ⚠ SPECIFICITY, NOT SOURCE ORDER. responsive.css carries a global
   `*:focus-visible{outline:2px solid #1a3c8f}` (0,1,0) and is linked AFTER this
   file by the repo's documented convention. These selectors are (0,2,1), so
   they win regardless of load order — do not "fix" this by reordering the
   <link>s, which would break responsive.css's own contract. */
.ce-card a:focus-visible,
.ce-card button:focus-visible,
.ce-card input:focus-visible,
.topbar a:focus-visible{
  outline:3px solid var(--mk-accent);
  outline-offset:3px;
  border-radius:4px;
}
a.skip-link{background:var(--mk-navy)}   /* (0,1,1) beats responsive.css's .skip-link */

/* ---------- ⚠ THE GUARD — read the file header before touching ----------- */
[hidden]{display:none !important}