/*
 * LanuBoard login page (redesign of 2026-10-07).
 *
 * Ported from design/login/reference/desktop.html and mobile.html: every
 * value here is theirs. The class names changed where the two references
 * used inline styles; the numbers, colours, durations and curves did not.
 * design/login/README.md is the spec.
 *
 * ONE page, two compositions:
 *   from 1000px wide   the split: navy brand panel left, form right
 *   under 1000px       the phone one: navy header with the hero logo, the
 *                      form on a light sheet below
 * The form is in the DOM once. The brand panel exists only in the first, the
 * header only in the second (display: none in the other, so nothing of it is
 * read, focused or animated there).
 *
 * This file is the page's whole look: login.php loads no other stylesheet.
 * The fonts are files of this site (assets/login/fonts): nothing is asked of
 * Google when the page opens.
 */

/* ---- fonts: Bricolage Grotesque, Instrument Sans (SIL Open Font License 1.1) ----
   Subsets: latin + latin-ext (Romanian ă â î ș ț, German ä ö ü ß). */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(../login/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(../login/fonts/bricolage-grotesque-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(../login/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(../login/fonts/bricolage-grotesque-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(../login/fonts/instrument-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(../login/fonts/instrument-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(../login/fonts/instrument-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(../login/fonts/instrument-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(../login/fonts/instrument-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url(../login/fonts/instrument-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(../login/fonts/instrument-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(../login/fonts/instrument-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- tokens (design/login/tokens.css, as it is) ---- */
:root {
  /* Brand */
  --lb-navy: #0C1B35;          /* brand panel, primary button, active language (desktop), mobile background */
  --lb-blue: #136EB4;          /* LANU blue (exact, from the logo): highlight card, links, focus, checkbox, success button */
  --lb-blue-dark: #0D4A7A;     /* link hover */
  --lb-charcoal: #363636;      /* LANU grey (exact, from the logo): headings, labels, input text */

  /* Neutrals */
  --lb-white: #FFFFFF;
  --lb-page: #F4F6F9;          /* form side / mobile sheet background */
  --lb-text-muted: #5B6470;    /* subtitle, footer, password-toggle icon */
  --lb-placeholder: #7D8691;   /* placeholders, idle field icons */
  --lb-border-input: #8F98A3;  /* inputs, checkbox (≥ 3:1 on white) */
  --lb-border-subtle: #DCE1E7; /* language switcher outline (desktop) */

  /* Error */
  --lb-error-text: #9A3412;
  --lb-error-bg: #FFF4ED;
  --lb-error-border: #F3C3A8;
  --lb-error-field: #C2410C;   /* input border when aria-invalid="true" */

  /* On the navy panel */
  --lb-on-navy-card: rgba(255, 255, 255, 0.10);
  --lb-on-navy-card-border: rgba(255, 255, 255, 0.16);
  --lb-on-navy-line-strong: rgba(255, 255, 255, 0.60);
  --lb-on-navy-line-soft: rgba(255, 255, 255, 0.28);
  --lb-on-navy-outline: rgba(255, 255, 255, 0.50);       /* "LANUBOARD" tag */
  --lb-on-navy-switcher-border: rgba(255, 255, 255, 0.30); /* mobile language switcher */
  --lb-on-navy-switcher-bg: rgba(255, 255, 255, 0.08);

  /* Typography */
  --lb-font-display: 'Bricolage Grotesque', system-ui, sans-serif; /* 700 (600 also loaded) */
  --lb-font-body: 'Instrument Sans', system-ui, sans-serif;        /* 400 / 500 / 600 / 700 */

  /* Radii */
  --lb-radius-check: 6px;
  --lb-radius-lang: 9px;       /* language buttons + sliding pill */
  --lb-radius-control: 10px;   /* inputs, primary button, error alert */
  --lb-radius-card: 12px;      /* language switcher container, panel cards */
  --lb-radius-sheet: 24px;     /* mobile sheet top corners */
  --lb-radius-pill: 999px;

  /* Elevation */
  --lb-focus-ring: 0 0 0 3px rgba(19, 110, 180, 0.20);
  --lb-shadow-card: 0 20px 40px rgba(0, 0, 0, 0.40);
  --lb-shadow-button-hover: 0 10px 24px rgba(12, 27, 53, 0.28);

  /* Sizes */
  --lb-control-h: 48px;        /* inputs */
  --lb-button-h: 52px;         /* primary button */
  --lb-touch: 44px;            /* minimum touch target: language buttons, password toggle, checkbox row */

  /* Motion */
  --lb-ease-out: cubic-bezier(.2, .8, .2, 1);      /* entrances, slides */
  --lb-ease-overshoot: cubic-bezier(.34, 1.56, .64, 1); /* pops: avatars, icons, checkbox */
  --lb-ease-curtain: cubic-bezier(.7, 0, .2, 1);   /* desktop panel reveal */
  --lb-ease-drag: cubic-bezier(.45, 0, .25, 1);    /* card drag loop */
  --lb-ease-hero: cubic-bezier(.65, 0, .25, 1);    /* mobile logo travel */
  --lb-ease-shake: cubic-bezier(.36, .07, .19, .97);

  /* Pattern (isometric cubes, from the LANU cube) */
  --lb-pattern-tile: 51.9615px 90px;
}

/* ================================================================== both compositions */
body { margin: 0; background: var(--lb-page); }
[hidden] { display: none !important; }

.lb {
  font-family: var(--lb-font-body);
  color: var(--lb-charcoal);
  /* which language is on, 0 / 1 / 2: the sliding pill of the switcher goes by it (login.js keeps it) */
  --lb-lang-index: 0;
}
.lb a { color: var(--lb-blue); }
.lb a:hover { color: var(--lb-blue-dark); }
.lb input::placeholder { color: var(--lb-placeholder); }
.lb input:focus { outline: none; border-color: var(--lb-blue); box-shadow: var(--lb-focus-ring); }
.lb a:focus-visible, .lb button:focus-visible { outline: 2px solid var(--lb-blue); outline-offset: 2px; }
.lb-brand a:focus-visible, .lb-band a:focus-visible, .lb-band button:focus-visible { outline-color: var(--lb-white); }
.ic { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* the headline, word by word: each word in its own clipped box */
.lb-word { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em 0 .14em; margin: -.1em .22em -.14em 0; }
.lb-word > span { display: inline-block; }
.lb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lb-headline { margin: 0; font-family: var(--lb-font-display); font-weight: 700; letter-spacing: -0.025em; }
.lb-brandtag { border-radius: var(--lb-radius-pill); border: 1px solid var(--lb-on-navy-outline); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

/* language switcher */
.lb-switch { position: relative; display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--lb-radius-card); }
.lb-pill { position: absolute; top: 3px; left: 3px; height: 44px; border-radius: var(--lb-radius-lang); }
.lb-lang { position: relative; z-index: 1; height: 44px; border: 0; border-radius: var(--lb-radius-lang); background: transparent; font-family: inherit; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; }

/* the form */
.lb-titles { display: flex; flex-direction: column; gap: 8px; }
.lb-title { margin: 0; font-family: var(--lb-font-display); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--lb-charcoal); }
.lb-subtitle { margin: 0; line-height: 1.5; color: var(--lb-text-muted); }
.lb-alert { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--lb-radius-control); background: var(--lb-error-bg); border: 1px solid var(--lb-error-border); color: var(--lb-error-text); font-size: 14px; }
.lb-alert > svg { flex: none; }
.lb-group { display: flex; flex-direction: column; gap: 8px; }
.lb-label { font-size: 14px; font-weight: 600; color: var(--lb-charcoal); }
.lb-field { position: relative; }
.lb-ficon { position: absolute; left: 14px; top: 14px; color: var(--lb-placeholder); pointer-events: none; }
.lb-field:focus-within .lb-ficon { color: var(--lb-blue); }
.lb-input { width: 100%; height: var(--lb-control-h); box-sizing: border-box; border-radius: var(--lb-radius-control); border: 1px solid var(--lb-border-input); background: var(--lb-white); font-family: inherit; font-size: 16px; color: var(--lb-charcoal); padding: 0 14px 0 44px; }
.lb-input.has-toggle { padding: 0 52px 0 44px; }
.lb-input[aria-invalid="true"], .lb-input[aria-invalid="true"]:focus { border-color: var(--lb-error-field); }
.lb-pw-toggle { position: absolute; right: 2px; top: 2px; width: var(--lb-touch); height: var(--lb-touch); display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--lb-text-muted); cursor: pointer; }
.lb-check { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: var(--lb-touch); cursor: pointer; align-self: flex-start; font-size: 14px; color: var(--lb-charcoal); }
.lb-check input { position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin: -10px 0 0; opacity: 0; cursor: pointer; }
.lb-box { flex: none; width: 20px; height: 20px; box-sizing: border-box; border-radius: var(--lb-radius-check); border: 1.5px solid var(--lb-border-input); background: var(--lb-white); display: flex; align-items: center; justify-content: center; color: var(--lb-white); }
.lb-tick { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12; stroke-dashoffset: 12; }
.lb-check input:checked + .lb-box { background: var(--lb-blue); border-color: var(--lb-blue); }
.lb-check input:checked + .lb-box .lb-tick { stroke-dashoffset: 0; }
.lb-check input:focus-visible + .lb-box { outline: 2px solid var(--lb-blue); outline-offset: 2px; }
.lb-btn { position: relative; overflow: hidden; width: 100%; height: var(--lb-button-h); display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: var(--lb-radius-control); background: var(--lb-navy); color: var(--lb-white); font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.lb-btn.is-success { background: var(--lb-blue) !important; }
.lb-btn-st { display: inline-flex; align-items: center; gap: 10px; }
.lb-ok path { stroke-dasharray: 22; stroke-dashoffset: 0; }
.lb-spin { width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: var(--lb-white); animation: lbspin 0.8s linear infinite; }
@keyframes lbspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lb-spin { animation: none !important; } }

/* ---- motion both compositions share ---- */
.lb-anim .lb-in { animation: lbIn .6s var(--lb-ease-out) both; }
@keyframes lbIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lb-anim .lb-wa > span { animation: lbWordA .8s var(--lb-ease-out) both; }
.lb-anim .lb-wb > span { animation: lbWordB .8s var(--lb-ease-out) both; }
/* two names for one movement: a language change swaps them, and that restarts it */
@keyframes lbWordA { from { transform: translateY(110%); } to { transform: none; } }
@keyframes lbWordB { from { transform: translateY(110%); } to { transform: none; } }
.lb-anim .lb-sa { animation: lbSwapA .45s var(--lb-ease-out); }
.lb-anim .lb-sb { animation: lbSwapB .45s var(--lb-ease-out); }
@keyframes lbSwapA { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lbSwapB { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lb-anim .lb-alert { animation: lbShake .45s var(--lb-ease-shake) both; }
@keyframes lbShake { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } 100% { opacity: 1; transform: none; } }
.lb-anim .lb-eye { animation: lbEye .3s var(--lb-ease-overshoot) both; }
@keyframes lbEye { from { opacity: 0; transform: scale(.6) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes lbPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
.lb-anim .lb-okfx { animation: lbPop .4s var(--lb-ease-overshoot) both; }
.lb-anim .lb-ok path { animation: lbDraw .45s ease .12s both; }
@keyframes lbDraw { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }
.lb-anim .lb-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)); transform: skewX(-20deg); opacity: 0; pointer-events: none; }
@keyframes lbSheen { from { opacity: 1; transform: skewX(-20deg) translateX(0); } to { opacity: 1; transform: skewX(-20deg) translateX(600%); } }
.lb-anim input { transition: border-color .15s ease, box-shadow .15s ease; }
.lb-anim .lb-ficon { transition: color .2s ease, transform .25s var(--lb-ease-overshoot); }
.lb-anim .lb-field:focus-within .lb-ficon { transform: scale(1.12); }
.lb-anim .lb-box { transition: background-color .2s ease, border-color .2s ease, transform .2s var(--lb-ease-overshoot); }
.lb-anim .lb-tick { transition: stroke-dashoffset .3s ease .05s; }
.lb-anim .lb-check:active .lb-box { transform: scale(.86); }
.lb-anim .lb-lang { transition: color .25s ease; }

/* ================================================================== from 1000px: the split */
@media (min-width: 1000px) {
  .lb-band { display: none; }

  /* nowrap, where the reference has wrap: under 1000px the two halves must never stack (the phone
     composition takes over there), and a scroll bar at exactly 1000px would otherwise make them */
  .lb { min-height: 100vh; display: flex; flex-wrap: nowrap; background-color: var(--lb-page); }

  /* ---- brand panel ---- */
  .lb-brand { flex: 1 1 520px; min-width: 0; box-sizing: border-box; padding: 40px 56px; background-color: var(--lb-navy); color: var(--lb-white); display: flex; flex-direction: column; justify-content: space-between; gap: 48px; overflow: hidden; background-image: url(../login/pattern-cubes-on-dark.svg); background-size: var(--lb-pattern-tile); }
  .lb-logo { display: inline-flex; align-self: flex-start; }
  .lb-logo img { display: block; height: 104px; width: auto; }

  /* the board drawn on the panel: three columns of cards, decoration only */
  .lb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 540px; align-items: start; }
  .lb-layer { transition: transform .5s var(--lb-ease-out); }            /* moved by the pointer (login.js) */
  .lb-layer.is-over { position: relative; z-index: 2; }                   /* the dragged card passes over the next column */
  .lb-col { display: flex; flex-direction: column; gap: 12px; }
  .lb-col.is-2 { margin-top: 32px; }
  .lb-col.is-3 { margin-top: 64px; }
  .lb-colhead { display: flex; align-items: center; gap: 8px; height: 16px; }
  .lb-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); }
  .lb-dot.lb-ping { position: relative; background: var(--lb-blue); }
  .lb-bar { height: 8px; border-radius: 4px; }
  .lb-bar.is-head { background: rgba(255, 255, 255, 0.45); }
  .lb-bar.is-strong { background: var(--lb-on-navy-line-strong); }
  .lb-bar.is-soft { background: var(--lb-on-navy-line-soft); }
  .lb-bar.is-bright { background: rgba(255, 255, 255, 0.9); }
  .lb-card { padding: 14px; border-radius: var(--lb-radius-card); background: var(--lb-on-navy-card); border: 1px solid var(--lb-on-navy-card-border); display: flex; flex-direction: column; gap: 10px; }
  .lb-card.is-blue { position: relative; border: 0; background: var(--lb-blue); transform: rotate(-3deg); box-shadow: var(--lb-shadow-card); }
  .lb-cardfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
  .lb-cardfoot.is-end { justify-content: flex-end; }
  .lb-chip { width: 40px; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.18); }
  .lb-chip.is-wide { width: 48px; background: rgba(255, 255, 255, 0.22); }
  .lb-avatar { width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
  .lb-avatars { display: flex; }
  .lb-avatars .lb-avatar { box-sizing: content-box; border: 2px solid var(--lb-blue); }
  .lb-avatars .lb-avatar.is-white { background: var(--lb-white); }
  .lb-avatars .lb-avatar.is-navy { background: var(--lb-navy); margin-left: -8px; }
  .lb-thumb { height: 56px; border-radius: 8px; background: rgba(255, 255, 255, 0.12); }
  .lb-cursor { position: absolute; right: 6px; bottom: -24px; display: flex; align-items: flex-start; gap: 2px; opacity: 0; pointer-events: none; }
  .lb-cur { fill: var(--lb-white); stroke: var(--lb-navy); stroke-width: 1.5; stroke-linejoin: round; }
  .lb-cursor-tag { margin-top: 14px; padding: 2px 8px; border-radius: var(--lb-radius-pill); background: var(--lb-white); color: var(--lb-navy); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
  .lb-slot { height: 72px; border-radius: var(--lb-radius-card); border: 1.5px dashed rgba(255, 255, 255, 0.4); }

  .lb-brandline { max-width: 520px; }
  .lb-brandline .lb-layer { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .lb-brand .lb-brandtag { padding: 6px 12px; font-size: 13px; }
  .lb-brand .lb-headline { font-size: 56px; line-height: 1.02; }

  /* ---- form side ---- */
  .lb-side { flex: 1 1 480px; min-width: 0; box-sizing: border-box; padding: 32px 24px; display: flex; flex-direction: column; gap: 32px; }
  .lb-switchrow { display: flex; justify-content: flex-end; }
  .lb-side .lb-switch { border: 1px solid var(--lb-border-subtle); background: var(--lb-white); }
  .lb-side .lb-pill { width: 52px; background: var(--lb-navy); transform: translateX(calc(var(--lb-lang-index) * 54px)); }   /* 52px button + 2px gap */
  .lb-side .lb-lang { min-width: 52px; padding: 0 12px; font-size: 14px; color: var(--lb-charcoal); }
  .lb-side .lb-lang[aria-pressed="true"] { color: var(--lb-white); }
  .lb-formwrap { flex: 1; display: flex; align-items: center; justify-content: center; }
  .lb-form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 24px; }
  .lb-title { font-size: 36px; }
  .lb-subtitle { font-size: 16px; }
  .lb-alert { padding: 12px 14px; line-height: 1.45; }
  .lb-fields { display: flex; flex-direction: column; gap: 16px; }
  .lb-foot { display: flex; justify-content: center; font-size: 13px; color: var(--lb-text-muted); }

  /* ---- motion ---- */
  .lb-anim .lb-brand { animation: lbCurtain .9s var(--lb-ease-curtain) both, lbDrift 80s linear infinite; }
  @keyframes lbCurtain { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes lbDrift { to { background-position: 51.9615px 90px; } }
  .lb-anim .lb-logo { animation: lbLogo .9s var(--lb-ease-out) .25s both; }
  @keyframes lbLogo { from { opacity: 0; transform: scale(.88) translateY(8px); } to { opacity: 1; transform: none; } }
  .lb-anim .lb-line { transform-origin: left center; animation: lbLine .7s var(--lb-ease-out) both; }
  @keyframes lbLine { from { transform: scaleX(0); } to { transform: none; } }
  .lb-anim .lb-pop { animation: lbPop .5s var(--lb-ease-overshoot) both; }
  .lb-anim .lb-float { animation: lbFloat 6s ease-in-out 1s infinite; }
  .lb-anim .lb-float2 { animation: lbFloat 7s ease-in-out 2s infinite; }
  .lb-anim .lb-float3 { animation: lbFloat 8s ease-in-out 1.4s infinite; }
  @keyframes lbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  .lb-anim .lb-ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--lb-blue); animation: lbPing 2.4s cubic-bezier(0, 0, .2, 1) 1s infinite; }
  @keyframes lbPing { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(3); opacity: 0; } }
  .lb-anim .lb-drag { animation: lbDrag 9s var(--lb-ease-drag) 1.6s infinite; }
  @keyframes lbDrag { 0%, 14% { transform: translate(0, 0) rotate(-3deg) scale(1); opacity: 1; } 22% { transform: translate(0, -8px) rotate(-5deg) scale(1.04); opacity: 1; } 40% { transform: translate(calc(100% + 16px), 119px) rotate(2deg) scale(1.04); opacity: 1; } 46%, 64% { transform: translate(calc(100% + 16px), 127px) rotate(0deg) scale(1); opacity: 1; } 72% { transform: translate(calc(100% + 16px), 127px) rotate(0deg) scale(1); opacity: 0; } 73% { transform: translate(0, 0) rotate(-3deg) scale(.96); opacity: 0; } 82%, 100% { transform: translate(0, 0) rotate(-3deg) scale(1); opacity: 1; } }
  .lb-anim .lb-cursor { animation: lbCursor 9s ease-in-out 1.6s infinite; }
  @keyframes lbCursor { 0%, 8% { opacity: 0; transform: translate(16px, 16px); } 15% { opacity: 1; transform: translate(0, 0); } 18% { opacity: 1; transform: scale(.82); } 22% { opacity: 1; transform: scale(1); } 48% { opacity: 1; transform: scale(1); } 52% { opacity: 1; transform: scale(.82); } 56% { opacity: 1; transform: scale(1); } 64%, 100% { opacity: 0; transform: translate(14px, 14px); } }
  .lb-anim .lb-slot { animation: lbSlot 9s ease-in-out 1.6s infinite; }
  @keyframes lbSlot { 0%, 28% { border-color: rgba(255, 255, 255, 0.4); background-color: rgba(19, 110, 180, 0); } 40%, 64% { border-color: rgba(255, 255, 255, 0.85); background-color: rgba(19, 110, 180, 0.18); } 74%, 100% { border-color: rgba(255, 255, 255, 0.4); background-color: rgba(19, 110, 180, 0); } }
  .lb-anim .lb-btn:hover::after { animation: lbSheen .8s ease; }
  .lb-anim .lb-btn { transition: transform .15s ease, box-shadow .2s ease, background-color .3s ease; }
  .lb-anim .lb-btn:hover { transform: translateY(-1px); box-shadow: var(--lb-shadow-button-hover); }
  .lb-anim .lb-btn:active { transform: scale(.99); box-shadow: none; }
  .lb-anim .lb-arrow { transition: transform .2s var(--lb-ease-out); }
  .lb-anim .lb-btn:hover .lb-arrow { transform: translateX(4px); }
  .lb-anim .lb-pill { transition: transform .35s var(--lb-ease-out), background-color .3s ease; }

  /* when each thing comes in: the panel's columns and its headline, the form from top to bottom */
  .lb-anim .lb-d1 { animation-delay: .06s; } .lb-anim .lb-d2 { animation-delay: .12s; } .lb-anim .lb-d3 { animation-delay: .18s; } .lb-anim .lb-d4 { animation-delay: .24s; }
  .lb-anim .lb-s1 { animation-delay: .06s; } .lb-anim .lb-s2 { animation-delay: .12s; } .lb-anim .lb-s3 { animation-delay: .18s; } .lb-anim .lb-s4 { animation-delay: .24s; } .lb-anim .lb-s5 { animation-delay: .3s; }
  .lb-anim .lb-foot { animation-delay: .36s; }
  .lb-anim .lb-t1 { animation-delay: .45s; } .lb-anim .lb-t2 { animation-delay: .55s; } .lb-anim .lb-t3 { animation-delay: .65s; } .lb-anim .lb-t4 { animation-delay: .75s; } .lb-anim .lb-t5 { animation-delay: .85s; } .lb-anim .lb-t6 { animation-delay: .95s; }
  .lb-anim .lb-wa > .lb-k1, .lb-anim .lb-wb > .lb-k1 { animation-delay: .5s; } .lb-anim .lb-wa > .lb-k2, .lb-anim .lb-wb > .lb-k2 { animation-delay: .58s; } .lb-anim .lb-wa > .lb-k3, .lb-anim .lb-wb > .lb-k3 { animation-delay: .66s; } .lb-anim .lb-wa > .lb-k4, .lb-anim .lb-wb > .lb-k4 { animation-delay: .74s; } .lb-anim .lb-wa > .lb-k5, .lb-anim .lb-wb > .lb-k5 { animation-delay: .82s; } .lb-anim .lb-wa > .lb-k6, .lb-anim .lb-wb > .lb-k6 { animation-delay: .9s; }
}

/* ================================================================== under 1000px: the phone composition */
@media (max-width: 999.98px) {
  .lb-brand, .lb-switchrow, .lb-foot { display: none; }
  body { background: var(--lb-navy); }

  .lb {
    width: 100%; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden;
    background-color: var(--lb-navy); background-image: url(../login/pattern-cubes-on-dark.svg); background-size: var(--lb-pattern-tile);
    /* where the hero logo starts from, relative to where it rests: the top-left corner of the header (its
       24px padding), in the middle of the 52px language row, at half size. The logo is 112px tall and
       640:459 wide, and rests centred, 88px from the top. login.php measures the same on the page itself
       and overrides these; they stand for a window that was wide when the page opened and was made
       narrow afterwards, when there was nothing to measure. */
    --hero-dx: calc(24px - (100vw - 156.1656px) / 2);
    --hero-dy: -70px;
  }

  /* ---- navy header ---- */
  .lb-band { box-sizing: border-box; padding: 20px 24px 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--lb-white); text-align: center; }
  .lb-bandrow { align-self: stretch; display: flex; justify-content: flex-end; min-height: 52px; }
  .lb-band .lb-switch { border: 1px solid var(--lb-on-navy-switcher-border); background: var(--lb-on-navy-switcher-bg); }
  .lb-band .lb-pill { width: 44px; background: var(--lb-white); transform: translateX(calc(var(--lb-lang-index) * 46px)); }   /* 44px button + 2px gap */
  .lb-band .lb-lang { min-width: 44px; padding: 0 8px; font-size: 13px; color: var(--lb-white); }
  .lb-band .lb-lang[aria-pressed="true"] { color: var(--lb-navy); }
  .lb-hero { position: relative; display: block; text-decoration: none; }
  .lb-hero img { display: block; height: 112px; width: auto; }
  /* a band of light that crosses the logo, seen only where the logo is */
  .lb-shine { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, rgba(170, 210, 255, 0.55) 44%, rgba(255, 255, 255, 0.95) 50%, rgba(170, 210, 255, 0.55) 56%, rgba(255, 255, 255, 0) 65%); background-size: 300% 100%; background-repeat: no-repeat; background-position: 100% 0; -webkit-mask-image: var(--lb-logo); mask-image: var(--lb-logo); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
  .lb-bandline { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .lb-band .lb-brandtag { padding: 4px 10px; font-size: 12px; }
  .lb-band .lb-headline { max-width: 320px; font-size: 34px; line-height: 1.05; }
  .lb-band .lb-word:last-child { margin-right: 0; }

  /* ---- the sheet with the form ---- */
  .lb-side { flex: 1; box-sizing: border-box; margin-top: -20px; padding: 28px 24px 24px; border-radius: var(--lb-radius-sheet) var(--lb-radius-sheet) 0 0; background-color: var(--lb-page); }
  .lb-form { max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
  .lb-title { font-size: 28px; }
  .lb-subtitle { font-size: 15px; }
  .lb-alert { padding: 10px 12px; line-height: 1.4; }
  .lb-fields { display: contents; }   /* the two fields are the form's own children here, 16px apart like the rest */

  /* ---- motion ---- */
  .lb.lb-anim { animation: lbDrift 80s linear infinite; }
  @keyframes lbDrift { to { background-position: 51.9615px 90px; } }
  .lb-anim .lb-hero { transform-origin: 0 0; animation: lbHero 1.8s .1s both; }
  /* the curve of the travel is written out (it is --lb-ease-hero): a browser does not read a variable as
     the timing function of one keyframe, and the logo then flies with the default curve */
  @keyframes lbHero { 0% { opacity: 0; transform: translate(var(--hero-dx, -92.9px), var(--hero-dy, -70px)) scale(.5); } 15% { opacity: 1; transform: translate(var(--hero-dx, -92.9px), var(--hero-dy, -70px)) scale(.5); } 40% { opacity: 1; transform: translate(var(--hero-dx, -92.9px), var(--hero-dy, -70px)) scale(.5); animation-timing-function: cubic-bezier(.65, 0, .25, 1); } 100% { opacity: 1; transform: none; } }
  .lb-anim .lb-shine { animation: lbShine 6s ease-in-out 1.9s infinite; }
  @keyframes lbShine { 0% { background-position: 100% 0; } 22%, 100% { background-position: 0% 0; } }
  .lb-anim .lb-side { animation: lbSheet .7s var(--lb-ease-out) .15s both; }
  @keyframes lbSheet { from { transform: translateY(80px); } to { transform: none; } }
  .lb-anim .lb-btn:active::after { animation: lbSheen .8s ease; }
  .lb-anim .lb-btn { transition: transform .15s ease, background-color .3s ease; }
  .lb-anim .lb-btn:active { transform: scale(.98); }
  .lb-anim .lb-pill { transition: transform .35s var(--lb-ease-out); }

  /* when each thing comes in */
  .lb-anim .lb-band .lb-switch { animation-delay: .06s; }
  .lb-anim .lb-s1 { animation-delay: .3s; } .lb-anim .lb-s2 { animation-delay: .36s; } .lb-anim .lb-s3 { animation-delay: .42s; } .lb-anim .lb-s4 { animation-delay: .48s; } .lb-anim .lb-s5 { animation-delay: .54s; }
  .lb-anim .lb-band .lb-brandtag { animation-delay: 1.3s; }
  .lb-anim .lb-wa > .lb-k1, .lb-anim .lb-wb > .lb-k1 { animation-delay: 1.40s; } .lb-anim .lb-wa > .lb-k2, .lb-anim .lb-wb > .lb-k2 { animation-delay: 1.48s; } .lb-anim .lb-wa > .lb-k3, .lb-anim .lb-wb > .lb-k3 { animation-delay: 1.56s; } .lb-anim .lb-wa > .lb-k4, .lb-anim .lb-wb > .lb-k4 { animation-delay: 1.64s; } .lb-anim .lb-wa > .lb-k5, .lb-anim .lb-wb > .lb-k5 { animation-delay: 1.72s; } .lb-anim .lb-wa > .lb-k6, .lb-anim .lb-wb > .lb-k6 { animation-delay: 1.80s; }
}

/* Reduced motion: nothing moves, everything is where it ends. */
@media (prefers-reduced-motion: reduce) {
  .lb-anim, .lb-anim *, .lb-anim *::after { animation: none !important; transition: none !important; }
}

/* The firm's own logo („Setările firmei”). One that was made for a white page stands on a white tile, on the brand
   panel and in the phone's header alike; a firm without a logo has its name written where the logo would be. */
.lb-logo-tile img { padding: 10px 14px; border-radius: 14px; background: #FFFFFF; box-sizing: border-box; }
.lb-logo-text { display: block; max-width: 420px; font-weight: 700; font-size: 34px; line-height: 1.1; color: #FFFFFF; overflow-wrap: anywhere; }