/* Login: the front desk at opening time. The navy brand panel holds a pinned
   duty note and rubber-stamped capabilities; the sign-in card is a taped page
   out of the day book — ruled red margin, stacked paper edge, pencil note for
   the demo accounts. Carbon bones (square corners, mono labels, the 8px grid),
   physical skin, and every colour mixed from the venhims.css tokens so the
   form side follows light and dark themes. No images, no network assets. */

/* Paper grain over the navy panel, layered into its background so content
   stays above it. A three-stripe flag band runs along the panel's top edge:
   this is a Government of Malawi deployment and every entry point says so. */
.vh-login__brand {position:relative;background:repeating-linear-gradient(87deg,rgba(255,255,255,.03) 0 1px,transparent 1px 7px),linear-gradient(160deg,var(--navy),#123a63)}
.vh-login__brand:before {content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(to bottom,#000 0 33.4%,#CE1126 33.4% 66.7%,#339E35 66.7% 100%)}

/* The government mark above the product brand: flag at left, two-line
   wordmark, separated from the VENHIMS brand below by clear air. */
.login-gov {display:flex;align-items:center;gap:12px;margin-bottom:36px}
.login-gov .vh-flag-mw {border:1px solid rgba(255,255,255,.3);border-radius:1px}
.login-gov__text {display:flex;flex-direction:column;line-height:1.3}
.login-gov__text strong {color:#fff;font-size:.9rem;letter-spacing:.02em}
.login-gov__text span {font:600 .62rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.vh-login__brand p {color:rgba(255,255,255,.82);max-width:26rem;font-size:var(--t-lg);line-height:1.6}

/* The duty note: a slip of real paper pinned to the navy, same family as the
   records desk's date card. Deliberately light in both themes — paper is paper. */
.login-note {position:relative;display:inline-grid;gap:.4rem;width:max-content;margin-top:var(--sp-6);padding:1rem 1.6rem;background:linear-gradient(105deg,#fdfdfa,#f1f3f6);color:#1e2e3c;transform:rotate(-1.5deg);box-shadow:0 5px 12px rgba(0,0,0,.35);border-radius:2px}
.login-note:before {content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(2deg);width:2.4rem;height:.85rem;background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.38)}
.login-note span {font:600 .65rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#5a6b73}
.login-note strong {font:600 1.05rem var(--mono);color:#0A2540}

/* What the old feature bullets said, re-inked as rubber stamps. */
.login-stamps {display:flex;gap:.7rem;flex-wrap:wrap;margin-top:var(--sp-7)}
.login-stamp {font:600 .65rem var(--mono);letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.75);border:1.5px solid rgba(255,255,255,.32);border-radius:2px;padding:.32rem .6rem;transform:rotate(-1.2deg)}
.login-stamp:nth-child(2) {transform:rotate(1.1deg)}
.login-stamp:nth-child(3) {transform:rotate(-.5deg)}

/* The form side is the desk surface; the card is today's page in the day
   book, taped down, red margin ruled. */
.vh-login__form {background:repeating-linear-gradient(87deg,color-mix(in srgb,var(--text) 3%,transparent) 0 1px,transparent 1px 7px),var(--bg)}
.vh-login__form .card {position:relative;background:linear-gradient(90deg,transparent 1.1rem,color-mix(in srgb,var(--support-error) 16%,transparent) 1.1rem calc(1.1rem + 1px),transparent calc(1.1rem + 1px)),var(--layer);border:1px solid var(--border);border-radius:3px;box-shadow:0 2px 0 var(--border),var(--shadow-md);padding:2rem 2rem 2rem 2.3rem}
.vh-login__form .card:before {content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-1.5deg);width:3rem;height:1rem;background:color-mix(in srgb,var(--interactive) 14%,var(--layer));border:1px solid color-mix(in srgb,var(--interactive) 27%,var(--border));opacity:.85}
.login-eyebrow {font:600 .67rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:var(--sp-2)}
.vh-login__form .card h2 {letter-spacing:-.03em}
.login-demo {font-size:12px;color:var(--text-muted);border-top:1px dashed var(--border-strong);padding-top:var(--sp-4);margin-top:var(--sp-6)}

@media (max-width:1024px) {.vh-login__form .card {padding:1.4rem 1.4rem 1.4rem 1.7rem}}