/* =====================================================================
   VeriKit auth. Loads after verikit.css and reuses its tokens.
   Both panels are light: a sheet-coloured brand panel on the left, the paper room on the right.
   ===================================================================== */

.auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100vh; background: var(--paper); }

/* ---------- Brand panel (light) ---------- */
.auth-art {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 36px 44px; background: var(--paper); color: var(--ink);
}
.auth-art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px; opacity: .55;
  -webkit-mask-image: radial-gradient(120% 80% at 100% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(120% 80% at 100% 0%, #000 0%, transparent 70%);
}
.auth-art > * { position: relative; }
.art-rosette { position: absolute !important; right: -230px; top: -230px; width: 680px; height: 680px; color: var(--brand); opacity: .13; pointer-events: none; }
.art-rosette.is-low { right: auto; left: -260px; top: auto; bottom: -330px; opacity: .07; }

.auth-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.auth-brand .vk-mark { width: 38px; height: 38px; }
.auth-brand .vk-brandword b { font-size: 19px; }

.art-copy { max-width: 30rem; }
.art-kicker { font: 500 12px/1 var(--f-mono); color: var(--brand); letter-spacing: .02em; }
.art-title { margin-top: 18px; font: 700 clamp(34px, 3.6vw, 52px)/1.02 var(--f-display); letter-spacing: -.035em; text-wrap: balance; }
.art-title em { font-style: normal; color: var(--brand); }
.art-sub { margin-top: 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 27rem; }

/* Specimen: a verification, as the console would show it */
.specimen { margin-top: 34px; max-width: 29rem; padding: 20px 22px 18px; border: 1px solid var(--line-2); border-radius: var(--r2); background: #fff; box-shadow: 0 30px 60px -38px rgba(18, 21, 18, .32); }
.spec-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 16px; border-bottom: 1px dashed var(--line-2); }
.spec-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.spec-who .initials { background: var(--brand-tint); color: var(--brand-ink); }
.spec-who b { display: block; font-weight: 600; line-height: 1.25; }
.spec-who span { display: block; font: 400 11.5px var(--f-mono); color: var(--ink-4); }
.spec-rows { padding: 12px 0 4px; }
.spec-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 8px 0; font-size: 13px; }
.spec-row .tick { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--pass-tint); color: var(--pass); }
.spec-row .tick .ico { width: 11px; height: 11px; stroke-width: 3; }
.spec-row .tick.is-weak { background: var(--review-tint); color: var(--review); }
.spec-row .bar { position: relative; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.spec-row .bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 999px; background: var(--pass); }
.spec-row .bar.is-weak i { background: var(--review); }
.spec-row .nm { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: var(--ink-2); font-weight: 500; }
.spec-row .nm span { font: 500 11.5px var(--f-mono); color: var(--ink-3); }
.spec-row .res { font: 600 11.5px var(--f-mono); color: var(--pass); }
.spec-row .res.is-weak { color: var(--review); }
.spec-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); font: 400 11.5px var(--f-mono); color: var(--ink-3); }

.art-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 400 12px var(--f-mono); color: var(--ink-3); }
.art-foot span { display: inline-flex; align-items: center; gap: 7px; }
.art-foot .ico { width: 14px; height: 14px; color: var(--brand); }

/* ---------- Paper panel ---------- */
.auth-pane { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; padding: 28px 44px; position: relative; }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth-top .auth-brand { display: none; }
.auth-switch { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.auth-switch a { margin-left: 6px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px; transition: background-color .15s ease, border-color .15s ease; }
.auth-switch a:hover { background: var(--sheet); border-color: var(--ink-3); }

.auth-main { flex: 1; display: grid; place-items: center; padding: 28px 0; }
.auth-card { position: relative; width: min(100%, 468px); animation: vk-in .45s ease both; }
.auth-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--f-mono); color: var(--ink-3); }
.auth-eyebrow i { width: 18px; height: 1px; background: var(--ink-4); }
.auth-card h1 { margin-top: 14px; font: 700 36px/1.04 var(--f-display); letter-spacing: -.03em; }
.auth-card .lede { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }

.auth-form { display: grid; gap: 18px; margin-top: 30px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 0; min-width: 0; }
.field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.field .aux { font-size: 12px; font-weight: 500; color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: color .15s ease, text-decoration-color .15s ease; }
.field .aux:hover { color: var(--brand); text-decoration-color: var(--brand); }
.field .hint { font: 400 11.5px var(--f-mono); color: var(--ink-2); }

.control { position: relative; display: flex; align-items: center; }
.control > .ico { position: absolute; left: 17px; width: 16px; height: 16px; color: var(--ink-4); pointer-events: none; transition: color .15s ease; }
.control input, .control select {
  width: 100%; height: 48px; padding: 0 20px 0 46px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--sheet); color: var(--ink); font-size: 14.5px; outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.control.no-ico input { padding-left: 20px; }
.control input::placeholder { color: var(--ink-4); }
.control input:hover, .control select:hover { border-color: var(--ink-3); }
.control input:focus, .control select:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.control:focus-within > .ico { color: var(--brand); }
.control select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 46px; }
.control select:invalid { color: var(--ink-4); }
.control select option { color: var(--ink); }
.control .chev { left: auto; right: 18px; }

/* Validation: the message sits directly under its field */
.field.has-error .control input, .field.has-error .control select { border-color: var(--fail); background: color-mix(in srgb, var(--fail-tint) 35%, var(--sheet)); }
.field.has-error .control input:focus, .field.has-error .control select:focus { border-color: var(--fail); box-shadow: 0 0 0 4px var(--fail-tint); }
.field.has-error .control > .ico:not(.chev) { color: var(--fail); }
.field-error { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 12.5px; line-height: 1.45; font-weight: 500; color: var(--fail); animation: vk-in .2s ease both; }
.field-error .ico { width: 14px; height: 14px; margin-top: 1px; stroke-width: 2.2; }

.auth-submit { display: flex; width: 100%; height: 50px; margin-top: 6px; font-size: 14.5px; border-radius: 999px; background: var(--ink); color: var(--paper); box-shadow: 0 14px 28px -18px rgba(18, 21, 18, .6); }
.auth-submit:hover { background: var(--ink-2); }
.auth-submit .ico { width: 16px; height: 16px; transition: transform .15s ease; }
.auth-submit:hover .ico { transform: translateX(3px); }
.fine { margin-top: 4px; text-align: center; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.fine a { color: var(--ink-2); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.fine a:hover { color: var(--brand); }

.auth-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; font: 400 11.5px var(--f-mono); color: var(--ink-4); }
.auth-legal nav { display: flex; gap: 18px; }
.auth-legal a { text-decoration: none; }
.auth-legal a:hover { color: var(--ink); }

/* ---------- Login: plain page, symbol only ---------- */
.auth-solo { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; background: var(--paper); }
.solo-card { position: relative; overflow: hidden; width: min(100%, 440px); padding: 42px 38px 32px; text-align: center; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: 0 40px 70px -50px rgba(18, 21, 18, .35); animation: vk-in .45s ease both; }
.solo-card > *:not(.solo-rose) { position: relative; }
.solo-rose { position: absolute; right: -130px; top: -150px; width: 380px; height: 380px; color: var(--brand); opacity: .13; pointer-events: none; }
.solo-card .control input, .solo-card .control select { background: var(--paper); }
.solo-card .control input:focus, .solo-card .control select:focus { background: var(--sheet); }
.vk-mark.solo-mark { display: inline-block; width: 58px; height: 58px; }
.solo-card h1 { margin-top: 22px; font: 700 30px/1.1 var(--f-display); letter-spacing: -.03em; }
.solo-card .lede { margin-top: 8px; font-size: 14.5px; color: var(--ink-3); }
.solo-card .auth-form { margin-top: 28px; text-align: left; }
.solo-card .fine { text-align: center; }

/* ---------- Signup: the long form ---------- */
.field > * + * { margin-top: 7px; }
.field > .msg:empty { margin-top: 0; }
.field .lbl { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.field .opt { margin-left: 6px; font-weight: 400; color: var(--ink-2); }
.field .help { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }

.auth-card.is-wide { width: min(100%, 540px); }
.auth-card.is-wide h1 { max-width: none; }
.auth-form.is-long { gap: 28px; }
.group { margin: 0; padding: 0; min-width: 0; }
.group + .group { padding-top: 26px; border-top: 1px dashed var(--line-2); }
.group-title { margin: 0 0 16px; font: 500 12px/1 var(--f-mono); color: var(--ink-2); letter-spacing: .02em; }
.group-body { display: grid; gap: 18px; }

/* Textarea */
.control textarea {
  width: 100%; min-height: 96px; padding: 14px 20px; border: 1px solid var(--line-2); border-radius: 20px;
  background: var(--sheet); color: var(--ink); font: inherit; font-size: 14.5px; line-height: 1.5; resize: vertical; outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.control textarea::placeholder { color: var(--ink-4); }
.control textarea:hover { border-color: var(--ink-3); }
.control textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.field.has-error .control textarea { border-color: var(--fail); background: color-mix(in srgb, var(--fail-tint) 35%, var(--sheet)); }

/* Show / hide password */
.control.has-toggle input { padding-right: 80px; }
.pw-toggle { position: absolute; right: 8px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.pw-toggle:hover { background: var(--sunk); color: var(--ink); }

/* Password hint: never leaves the page */
.strength-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.strength-bars i { height: 4px; border-radius: 999px; background: var(--line-2); transition: background-color .2s ease; }
.strength[data-level="1"] i:nth-child(-n+1) { background: var(--fail); }
.strength[data-level="2"] i:nth-child(-n+2) { background: var(--review); }
.strength[data-level="3"] i:nth-child(-n+3) { background: var(--pass); }
.strength[data-level="4"] i { background: var(--pass); }
.strength-text { margin-top: 7px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }

/* Choice pills: native radios and checkboxes underneath, so keyboard and screen readers just work */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; display: block; }
.pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pill span {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--sheet);
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pill input:hover + span { border-color: var(--ink-3); }
.pill input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pill input[type="checkbox"]:checked + span::before { content: "\2713"; margin-right: 8px; font-weight: 700; }
.pill input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.pills.is-split .pill { flex: 1; }
.pills.is-split .pill span { width: 100%; }
.field.has-error .pill span { border-color: var(--fail); }

/* Terms */
.consent { display: grid; gap: 2px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r2); background: var(--sheet); }
.consent-head { margin: 8px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.check { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); cursor: pointer; }
.check a { color: var(--ink); text-underline-offset: 3px; }
.check.is-main { padding-bottom: 12px; margin-bottom: 2px; border-bottom: 1px dashed var(--line-2); font-weight: 600; color: var(--ink); }
.field.has-error .consent { border-color: var(--fail); }

/* Submit area and form-level message */
.submit-zone { margin-top: 2px; }
.form-alert { font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--fail); }
.form-alert.is-on {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 13px 16px;
  border: 1px solid color-mix(in srgb, var(--fail) 35%, transparent); border-radius: var(--r2); background: var(--fail-tint);
}
.form-alert .ico { width: 16px; height: 16px; margin-top: 1px; }
.auth-submit[aria-busy="true"] { cursor: progress; }
noscript .form-alert { display: flex; margin-top: 22px; padding: 13px 16px; border: 1px solid var(--fail); border-radius: var(--r2); background: var(--fail-tint); }

@media (max-width: 480px) {
  .pills.is-split { flex-wrap: nowrap; }
  .pill span { padding: 0 15px; }
  .consent { padding: 12px 14px; }
}

/* ---------- Responsive ---------- */
@media (max-height: 760px) { .art-sub { display: none; } .specimen { margin-top: 24px; } }
@media (max-width: 1100px) {
  .auth { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); }
  .auth-art { padding: 30px 32px; }
  .auth-pane { padding: 24px 32px; }
}
@media (max-width: 860px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-art { display: none; }
  .auth-top .auth-brand { display: inline-flex; }
  .auth-pane { padding: 20px 20px 24px; }
}
@media (max-width: 480px) {
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .auth-card h1 { font-size: 30px; }
  .auth-switch { font-size: 0; }
  .auth-switch a { font-size: 13px; margin: 0; }
}