/* ===========================================================================
 * Toolbar engine — LOGIN SKINS styling.
 * Full-screen WebGL background behind the login form + graceful CSS-gradient
 * fallback. Namespaced tbeng-login-*. Injected only on login pages (pre-auth,
 * brand-standalone), so the skin palettes below are intentional design colours,
 * not admin-theme tokens.
 * ======================================================================== */
.tbeng-login-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.tbeng-login-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tbeng-login-bg.is-live .tbeng-login-canvas { animation: tbengLoginFade 1.1s ease both; }
@keyframes tbengLoginFade { from { opacity: 0; } to { opacity: 1; } }

/* Fallback / reduced-motion: hide canvas, show a CSS gradient in the skin's palette */
.tbeng-login-bg--fallback .tbeng-login-canvas, .tbeng-login-bg--static .tbeng-login-canvas { display: none; }
.tbeng-login-bg--fallback, .tbeng-login-bg--static { background: linear-gradient(135deg, #3a3f66, #4a4a8a, #2f6b7d); background-size: 300% 300%; }
.tbeng-login-bg--fallback { animation: tbengLoginShift 20s ease infinite; }

/* ── Custom media background (chosen image or stock video) ──────────────────
   A fixed, full-bleed layer behind the sign-in card, own namespace. The image
   or video is referenced directly (no server streaming); object-fit keeps it
   crisp at any size. The dark base only shows for the instant before it paints. */
.tbeng-loginmedia { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #0b1020; }
.tbeng-loginmedia-img,
.tbeng-loginmedia-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tbeng-loginmedia-vid { z-index: 1; }
/* Tint overlay over the media — above the image/video, below the sign-in card. */
.tbeng-loginmedia-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
@keyframes tbengLoginShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.tbeng-login-bg--aurora.tbeng-login-bg--fallback, .tbeng-login-bg--aurora.tbeng-login-bg--static { background: linear-gradient(135deg, #3a3f66, #4a4a8a, #2f6b7d); background-size: 300% 300%; }
.tbeng-login-bg--midnight.tbeng-login-bg--fallback, .tbeng-login-bg--midnight.tbeng-login-bg--static { background: linear-gradient(135deg, #1c2036, #2a2c50, #1f2f4a); background-size: 300% 300%; }
.tbeng-login-bg--sunset.tbeng-login-bg--fallback, .tbeng-login-bg--sunset.tbeng-login-bg--static { background: linear-gradient(135deg, #6b3b52, #a1495a, #d08a4a); background-size: 300% 300%; }
.tbeng-login-bg--forest.tbeng-login-bg--fallback, .tbeng-login-bg--forest.tbeng-login-bg--static { background: linear-gradient(135deg, #2a4636, #35664a, #2f6b6b); background-size: 300% 300%; }
.tbeng-login-bg--ember.tbeng-login-bg--fallback, .tbeng-login-bg--ember.tbeng-login-bg--static { background: linear-gradient(135deg, #3a2230, #6b2f2f, #a1533a); background-size: 300% 300%; }

/* ── Theme-accent aliases (colours follow the enabled admin theme; the token
 *    injector publishes the compiled --at-color-* onto :root, with hex
 *    fallbacks so the card stays polished if they're unavailable) ── */
html.tbeng-authskin {
  --tbeng-login-accent: var(--at-color-primary, #3b5bdb);
  --tbeng-login-ring:   var(--at-color-ring, var(--at-color-primary, #3b5bdb));
  --tbeng-login-font: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── Card entrance is driven by the 3D physics tornado (toolbar_login_tornado.js).
 *    Until it runs, the "arm" class holds the card hidden (structural selectors,
 *    so it works before the element tagger runs); the script reveals it and a
 *    hard failsafe always clears the arm. Default entrance; the effects popup
 *    can switch it off. ── */
html.tbeng-tornado-arm [class*="authentication-form-wrapp"] > div:last-child,
html.tbeng-tornado-arm .panel_s { opacity: 0; }

/* Logo + heading reveal */
@keyframes tbengLoginLogoIn { from { opacity: 0; transform: translate3d(0, -30px, 0) scale(.88); } to { opacity: 1; transform: none; } }
@keyframes tbengLoginRiseIn { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }

/* Lift every auth piece above the fixed background canvas (works whatever the
 * page's container nesting is). */
html.tbeng-authskin .tbeng-auth-wrap,
html.tbeng-authskin .tbeng-auth-card,
html.tbeng-authskin .tbeng-auth-title,
html.tbeng-authskin .tbeng-auth-sub,
html.tbeng-authskin .company-logo { position: relative; z-index: 20; }

/* headings + subtitle: legible over the animation, modern display font */
.tbeng-auth-title { color: #ffffff; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); font-family: var(--tbeng-login-font); animation: tbengLoginRiseIn .7s ease both; animation-delay: .22s; }
.tbeng-auth-sub   { color: rgba(255, 255, 255, .88); text-shadow: 0 1px 10px rgba(0, 0, 0, .45); animation: tbengLoginRiseIn .7s ease both; animation-delay: .36s; }
.company-logo     { animation: tbengLoginLogoIn .8s cubic-bezier(.16, .84, .3, 1) both; animation-delay: .05s; }

/* frosted-glass logo plate (gated by the logo effect setting) */
html.tbeng-login-logo-frost .tbeng-auth-logo {
  padding: 14px 26px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .3));
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 18px;
  box-shadow: 0 20px 55px -24px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* modern frosted-glass card that lifts off the animated background */
.tbeng-auth-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .6));
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 22px;
  box-shadow: 0 34px 90px -28px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .75);
}
.tbeng-auth-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 22px 22px 0 0; pointer-events: none; opacity: .9;
  background: linear-gradient(90deg, transparent, var(--tbeng-login-accent), transparent);
}
.tbeng-auth-card .form-control {
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.tbeng-auth-card .form-control:focus {
  background: rgba(255, 255, 255, .92);
  border-color: var(--tbeng-login-ring);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .28);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tbeng-login-ring) 32%, transparent);
}
.tbeng-auth-card .btn-primary {
  border-radius: 12px;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .4);
}
.tbeng-auth-card .btn-primary:hover {
  transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 18px 38px -12px rgba(0, 0, 0, .45);
}

/* ── Hover-flip fields: modern centred label by default; rotates to reveal the
 *    input on hover / focus / when filled. Built by toolbar_login_fields.js. ── */
.tbeng-lf-front { font-family: var(--tbeng-login-font); }
.tbeng-lf-scene { perspective: 950px; }
.tbeng-lf-inner {
  position: relative;
  min-height: 46px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.tbeng-lf-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.tbeng-lf-front {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 600; font-size: 15px; letter-spacing: .05em;
  color: var(--at-color-heading, #1c2340);
  cursor: text; border-radius: 12px;
  background: rgba(255, 255, 255, .26);
  border: 1px dashed rgba(120, 130, 150, .38);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.tbeng-lf-front:hover { background: rgba(255, 255, 255, .44); border-color: var(--tbeng-login-ring); color: var(--tbeng-login-ring); }
.tbeng-lf-back { transform: rotateY(180deg); }
/* Flip to reveal the input ONLY on hover or while focused/typing — a filled or
 * browser-autofilled field stays in its closed label position until touched. */
.tbeng-lf:hover .tbeng-lf-inner,
.tbeng-lf:focus-within .tbeng-lf-inner { transform: rotateY(180deg); }

@media (prefers-reduced-motion: reduce) {
  .tbeng-login-bg.is-live .tbeng-login-canvas { animation: none; }
  .tbeng-login-bg--fallback { animation: none; }
  .tbeng-auth-card { animation: tbengLoginFade 1.1s ease both; transform: none; filter: none; }
  .company-logo, .tbeng-auth-title, .tbeng-auth-sub { animation: none; }
  /* Show the input outright — no flip gimmick when motion is reduced. */
  .tbeng-lf-inner { transform: rotateY(180deg); transition: none; }
}

/* ── Immersive scene controls (play / scrub-rewind / autoplay) ── */
.tbeng-imm-ctl { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 20px; }
.tbeng-imm-play { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; transition: background .16s ease, border-color .16s ease; }
.tbeng-imm-play:hover { border-color: rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .5); }
.tbeng-imm-play::before { content: '\25B6'; margin-left: 2px; }
.tbeng-imm-play[data-auto="1"]::before { content: '\275A\275A'; letter-spacing: -3px; margin-left: 0; }
.tbeng-imm-scrub { position: relative; width: min(440px, 56vw); height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .16); cursor: pointer; }
.tbeng-imm-prog { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: rgba(255, 255, 255, .88); }
.tbeng-imm-head { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .55); pointer-events: none; }
.tbeng-imm-tc { flex: none; min-width: 58px; font-size: 11px; letter-spacing: .04em; color: rgba(255, 255, 255, .82); font-variant-numeric: tabular-nums; }

/* ── Timeline caption "beats" — story text that changes as the scene plays.
 *    Accent follows the chosen scene colour (falls back to the admin theme). ── */
.tbeng-imm-beat {
  /* Mobile-first base (xs): sits in the normal flow, inserted directly under the
   * login card, so card + caption stack and centre together as one group (per the
   * page-layout formula). No overlap, no fixed positioning on small screens. */
  position: static; z-index: 20; pointer-events: none; box-sizing: border-box;
  width: 100%; max-width: 28rem; margin: 16px auto 0; text-align: center;
  background: rgba(20, 18, 17, .72); padding: 14px 18px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #f3f2f2; text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
  border-top: 2px solid var(--tbeng-imm-accent, var(--tbeng-login-accent, #ec3013));
}
.tbeng-imm-beat-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tbeng-imm-accent, var(--tbeng-login-accent, #ec3013)); margin-bottom: 8px; }
.tbeng-imm-beat-title { font-family: var(--tbeng-login-font); font-size: clamp(19px, 2.3vw, 34px); line-height: 1.08; letter-spacing: -.01em; margin-bottom: 8px; }
.tbeng-imm-beat-text  { font-size: 13px; line-height: 1.6; opacity: .74; max-width: 34ch; margin: 0 auto; }

/* Tablet and up (≥768px): the caption lifts out of the flow to the corner / side
 * placement chosen in the popup — there's room beside the centred card. */
@media (min-width: 768px) {
  .tbeng-imm-beat {
    position: fixed; z-index: 55; pointer-events: none;
    width: auto; max-width: min(400px, 42vw); margin: 0; text-align: left;
    border-top: 0; border-left: 2px solid var(--tbeng-imm-accent, var(--tbeng-login-accent, #ec3013));
  }
  .tbeng-imm-beat-text { margin: 0; }
  html.tbeng-cap-bl .tbeng-imm-beat { left: clamp(20px, 5vw, 64px); bottom: 96px; }
  html.tbeng-cap-br .tbeng-imm-beat { right: clamp(20px, 5vw, 64px); bottom: 96px; }
  html.tbeng-cap-tl .tbeng-imm-beat { left: clamp(20px, 5vw, 64px); top: 92px; }
  html.tbeng-cap-tr .tbeng-imm-beat { right: clamp(20px, 5vw, 64px); top: 92px; }
  html.tbeng-cap-ml .tbeng-imm-beat { left: clamp(20px, 5vw, 64px); top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; height: max-content; }
  html.tbeng-cap-mr .tbeng-imm-beat { right: clamp(20px, 5vw, 64px); top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; height: max-content; }
}
.tbeng-imm-beat.is-in { animation: tbengBeatIn .6s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes tbengBeatIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tbeng-imm-beat.is-in { animation: none; } }

/* ── Login panel placement (default = centred; left / right shift the whole
 *    logo + heading + card column). Outspecifies the centring utility without
 *    !important via the html-scoped selector. ── */
/* Left/right placement only from tablet up; on phones the panel always centres. */
@media (min-width: 768px) {
  html.tbeng-pos-left .tbeng-auth-wrap  { margin-left: clamp(20px, 6vw, 120px); margin-right: auto; }
  html.tbeng-pos-right .tbeng-auth-wrap { margin-right: clamp(20px, 6vw, 120px); margin-left: auto; }
}

/* Vertically centre the sign-in column in the viewport (the admin login body is
 * only as tall as its content by default, leaving the card near the top). Fixed
 * background/control layers are out of flow, so they're unaffected. */
/* The customer's own sign-in page is named differently by the platform, so
   it was never matched here and its card sat high on the page while the
   staff one was centred — the single visible difference between two pages
   that are meant to be the same. Both names now, one rule. */
html.tbeng-authskin body.login_admin,
html.tbeng-authskin body.customers_login { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }

/* ⚠ The customer page carries a bar across the top; the staff page does not.
   Centring the BODY therefore centres the bar and the sign-in column
   together, which lifts the panel about half the bar's height above true
   centre — 26px, and the single reason the two pages did not agree once
   everything else matched.
   The bar keeps its own height, and the space left under it does the
   centring instead, so the panel sits dead centre of the area a person is
   actually looking at. */
html.tbeng-authskin body.customers_login > #wrapper { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
html.tbeng-authskin body.customers_login > #wrapper > #content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
html.tbeng-authskin body.customers_login .navbar { flex: 0 0 auto; }
html.tbeng-authskin body.login_admin .authentication-form-wrapper,
html.tbeng-authskin body.customers_login .tbeng-auth-wrap { padding-top: 0; }

/* ══ Heading + intro bound INSIDE the card (relocated by the tagger) ══
 * They lose the over-artwork white treatment and become legible on the card. */
html.tbeng-auth-textin .tbeng-auth-title { color: var(--at-color-heading, #1c2340); text-shadow: none; margin: 0 0 4px; }
html.tbeng-auth-textin .tbeng-auth-sub   { color: var(--at-color-subtext, #5a6478); text-shadow: none; margin: 0 0 18px; }
html.tbeng-auth-textin .tbeng-auth-logo  { display: block; margin: 0 auto 12px; }

/* ══ Logo placement ══ */
/* Small brand mark fixed in a top corner (container leaves the column so no gap). */
html.tbeng-logo-tl .company-logo, html.tbeng-logo-tr .company-logo { position: fixed; top: 20px; margin: 0; z-index: 40; }
html.tbeng-logo-tl .company-logo { left: 26px; }
html.tbeng-logo-tr .company-logo { right: 26px; }
/* Fixed corner size — override Bootstrap .img-responsive (max-width:100%), which
 * otherwise collapses the logo to the shrink-wrapped fixed container's width. */
html.tbeng-logo-tl .tbeng-auth-logo, html.tbeng-logo-tr .tbeng-auth-logo { display: block; height: 34px; width: auto; max-width: none; max-height: none; }
html.tbeng-logo-tl.tbeng-login-logo-frost .tbeng-auth-logo,
html.tbeng-logo-tr.tbeng-login-logo-frost .tbeng-auth-logo { padding: 8px 14px; border-radius: 12px; }
/* Logo dropped inside the card, sized to sit above the heading. */
html.tbeng-logo-card .tbeng-auth-logo { max-height: 46px; width: auto; }

/* ══════════════════════════════════════════════════════════════════════
 *  PANEL STYLE PRESETS (login-card looks ported from the reference designs)
 *  Default = Frosted (the rounded glass card above). Classical + Modernist
 *  restyle the card, its fields, button and heading. html-scoped so they win
 *  over the frosted defaults without !important.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Classical: light editorial paper, hard dark border, square, serif head ── */
html.tbeng-card-classical .tbeng-auth-card {
  background: #f6f5f2; color: #201e1d;
  border: 2px solid #201e1d; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 30px 74px -30px rgba(0, 0, 0, .62);
}
html.tbeng-card-classical .tbeng-auth-card::before { display: none; }
html.tbeng-card-classical .tbeng-auth-title { font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif; font-weight: 600; letter-spacing: -.01em; color: #201e1d; }
html.tbeng-card-classical .tbeng-auth-sub   { color: #5c574f; }
html.tbeng-card-classical .tbeng-auth-card .form-control { background: #fff; border: 1px solid #201e1d; border-radius: 0; color: #201e1d; }
html.tbeng-card-classical .tbeng-auth-card .form-control:focus { border-color: var(--tbeng-login-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tbeng-login-ring) 24%, transparent); }
html.tbeng-card-classical .tbeng-auth-card .btn-primary { border-radius: 0; }
html.tbeng-card-classical .tbeng-lf-front { background: #fff; border: 1px solid rgba(32, 30, 29, .4); border-radius: 0; color: #201e1d; }
html.tbeng-card-classical .tbeng-lf-front:hover { background: #efeae0; border-color: var(--tbeng-login-ring); color: var(--tbeng-login-ring); }

/* ── Modernist: dark frosted glass, thin border, square, underline fields ── */
html.tbeng-card-modernist .tbeng-auth-card {
  background: rgba(24, 22, 21, .46);
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(243, 242, 242, .16); border-radius: 0; color: #f3f2f2;
  box-shadow: 0 34px 92px -30px rgba(0, 0, 0, .72);
}
html.tbeng-card-modernist .tbeng-auth-title { color: #f3f2f2; }
html.tbeng-card-modernist .tbeng-auth-sub   { color: rgba(243, 242, 242, .68); }
html.tbeng-card-modernist .tbeng-auth-card label { color: rgba(243, 242, 242, .72); }
html.tbeng-card-modernist .tbeng-auth-card .form-control {
  background: transparent; border: 0; border-bottom: 1px solid rgba(243, 242, 242, .28);
  border-radius: 0; color: #f3f2f2;
}
html.tbeng-card-modernist .tbeng-auth-card .form-control:focus { background: transparent; border-bottom-color: var(--tbeng-login-ring); box-shadow: none; }
html.tbeng-card-modernist .tbeng-lf-front { background: rgba(243, 242, 242, .06); border: 1px solid rgba(243, 242, 242, .18); border-radius: 0; color: rgba(243, 242, 242, .82); }
html.tbeng-card-modernist .tbeng-lf-front:hover { background: rgba(243, 242, 242, .12); border-color: var(--tbeng-login-ring); color: #fff; }
html.tbeng-card-modernist .tbeng-auth-card .btn-primary {
  background: transparent; border: 1px solid var(--tbeng-login-accent); color: #f3f2f2;
  border-radius: 0; text-transform: uppercase; letter-spacing: .12em; font-size: 13px;
}
html.tbeng-card-modernist .tbeng-auth-card .btn-primary:hover { background: var(--tbeng-login-accent); color: #fff; }

/* ══ The customer sign-in page's masthead ═════════════════════════════════
 * The logo and intro line the engine adds to that page so it matches the
 * staff one. Both are then moved into the card by the engine's own script,
 * exactly as the staff pair are — these rules only make the intro read the
 * same as its staff counterpart. No colour is written: both follow the
 * theme labels the card already uses. */
html.tbeng-auth-textin .tbeng-auth-intro { color: var(--at-color-subtext, #5a6478); text-shadow: none; margin: 0 0 18px; }
html.tbeng-authskin .tbeng-auth-masthead { margin: 0 0 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   THE CUSTOMER'S OWN SIGN-IN PAGE, MADE TO MATCH THE STAFF ONE

   Both pages are given the same skin and the same settings — this workspace
   has "left" set for both — yet the customer's panel sat in the middle of
   the page and looked cramped. Two reasons, neither of them the settings:

   1. PLACEMENT. The platform builds the customer sign-in column with a
      Bootstrap offset — a third of the row pushed in from the left — which
      centres it before our own placement gets a say. Our left margin WAS
      being applied; it simply had nowhere to move to inside an already
      centred third of the page. The column is now full width with no
      offset, so the panel is placed by the setting alone, as it is for staff.

   2. SPACING. The staff card carries its own padding. The customer card is
      one of the platform's panels, whose padding lives on an inner box and
      is smaller — so the same card looked tighter. Matched to the staff card.

   The placement half applies only from 768px up: below that the whole page
   centres anyway and the platform's own stacking is right.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
  /* Let the column be full width so the panel can actually be placed.
     Matched on the column classes themselves, NOT as a child of the row:
     the platform puts a spacing div in between, so a child combinator here
     quietly matches nothing — which is exactly what happened first time. */
  html.tbeng-authskin body.customers_login [class*="col-md-"],
  html.tbeng-authskin body.customers_login [class*="col-sm-"] {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    float: none;
  }

  /* The platform wraps this page in a container that is inset from the edge
     of the screen, and that inset was being ADDED to our own placement — so
     the customer's card sat 27px further in than the staff card, which has
     no container around it. The inset is removed here so both cards are
     measured from the same place.
     ⚠ Only the content container. The bar across the top has one of its own
     and must keep it. */
  html.tbeng-authskin body.customers_login #content > .container {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  html.tbeng-authskin body.customers_login #content > .container > .row {
    margin-left: 0;
    margin-right: 0;
  }
  html.tbeng-authskin body.customers_login #content [class*="col-md-"],
  html.tbeng-authskin body.customers_login #content [class*="col-sm-"] {
    padding-left: 0;
    padding-right: 0;
  }

  /* Now the same shape as the staff column: a 398px column holding a 350px
     card with 24px either side of it, exactly as the staff page has. */
  /* The same cap the staff column has, so the card is sized the same way
     rather than to a number copied from one measurement — a copied number
     was 2px out the moment a style with a thicker border was chosen. */
  html.tbeng-authskin body.customers_login .tbeng-auth-wrap {
    /* 398px, which is what the staff column settles at. It has to be stated
       rather than derived: the staff column sizes itself to its content, and
       this page's content is not the same — it carries a language picker and
       a Register button the staff page has no equivalent of, so left to size
       itself this card comes out far wider.
       ⚠ One consequence, measured and accepted: the staff card grows by 2px
       under the "classical" style, whose fields have thicker borders. This
       one is fixed, so under that single style the customer card is 2px
       narrower. Two of the three styles match to the pixel. */
    max-width: 398px;
    margin-left: auto;
    margin-right: auto;
  }
  html.tbeng-authskin body.customers_login .tbeng-auth-card {
    margin-left: 24px;
    margin-right: 24px;
  }
  html.tbeng-pos-left.tbeng-authskin body.customers_login .tbeng-auth-wrap {
    margin-left: clamp(20px, 6vw, 120px);
    margin-right: auto;
  }
  html.tbeng-pos-right.tbeng-authskin body.customers_login .tbeng-auth-wrap {
    margin-right: clamp(20px, 6vw, 120px);
    margin-left: auto;
  }
}

/* The same room inside the card as the staff one has, at every width. */
html.tbeng-authskin body.customers_login .tbeng-auth-card > .panel-body {
  padding: 32px;
}

/* The heading and its line of intro. The tagger moves both INTO the card on
   every auth page. On the staff page the card carries its own padding, so
   they land properly inset. On the customer page the padding lives on an
   inner box that the heading is not inside — so it sat hard against the
   card's edges while the form below it was comfortably inset, which is what
   made the panel look cramped even once it was the right size.

   They are given the same inset here, and the inner box loses its top
   padding so the gap under the intro is not counted twice. */
html.tbeng-authskin body.customers_login .tbeng-auth-card > .tbeng-auth-title,
html.tbeng-authskin body.customers_login .tbeng-auth-card > .tbeng-auth-sub {
  padding-left: 32px;
  padding-right: 32px;
}
html.tbeng-authskin body.customers_login .tbeng-auth-card > .tbeng-auth-title {
  padding-top: 32px;
}
html.tbeng-authskin body.customers_login .tbeng-auth-card > .panel-body {
  padding: 4px 32px 32px;
}

/* The inner box the platform puts inside its panel carries a solid fill of
   its own — so even once the card was ours, the form half of the customer's
   panel stayed opaque while the heading half showed the chosen style. It is
   made see-through here so the card's own style is the only thing painting
   it, whichever of the three is picked. */
html.tbeng-authskin .tbeng-auth-card > .panel-body,
html.tbeng-authskin .tbeng-auth-card .panel-body {
  background: transparent;
}