/* PALBON: the login page in the look of the public PALBON-Suites website (midnight navy, royal
   blue, burnished gold; no green). Loaded by www/login.html after login.bundle.css and scoped to
   body[data-path="login"], so nothing else on the site changes. Served as-is, no build step.
   Only presentation: every form, field id and button of upstream's page is left as it is, so
   password sign-in, reset, e-mail link, sign-up, social sign-in and two-factor keep working. */

/* The Inter face, the sans stack, the brand constants, radii and weights come from the master theme,
   palbon_tokens.css, linked before this file in www/login.html. The brand panel keeps its display type. */

body[data-path="login"]{
--plg-bg:var(--pb-bg-main);--plg-card:var(--pb-bg-card);--plg-ink:var(--pb-text-primary);--plg-muted:var(--pb-text-muted);--plg-faint:var(--pb-text-soft);
--plg-line:var(--pb-border-subtle);--plg-line-2:var(--pb-border-strong);--plg-input:var(--pb-bg-control);--plg-primary:var(--pb-text-link);--plg-soft:var(--pb-bg-raised);
--plg-shadow:var(--pb-shadow-elevation-3);
margin:0;background:var(--plg-bg)!important;color:var(--plg-ink);font-family:var(--pb-font-sans);-webkit-font-smoothing:antialiased}

/* the website wrapper must not constrain the split layout */
body[data-path="login"] .page-content-wrapper,
body[data-path="login"] main,
body[data-path="login"] .page_content{max-width:none;width:100%;margin:0!important;padding:0!important}
body[data-path="login"] .page-breadcrumbs,body[data-path="login"] .page-header-wrapper{display:none}

/* ---------- Layout ---------- */
.plg{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:calc(100vh - var(--header-h,72px))}
/* the public header carries the brand now: the panel's own logo line would repeat it */
.plg-brand .plg-id{display:none}
.plg-forms{display:grid;align-content:center;justify-items:center;padding:clamp(28px,5vw,64px) 24px;background:var(--plg-bg)}
.plg-forms>section{width:100%;max-width:440px}

/* ---------- Brand panel ---------- */
.plg-brand{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:clamp(28px,4vw,56px);color:var(--pb-band-text);background:
radial-gradient(820px 520px at 92% 0%,color-mix(in srgb,var(--pb-glow-1) 48%,transparent),transparent 62%),
radial-gradient(640px 460px at 0% 38%,color-mix(in srgb,var(--pb-glow-2) 30%,transparent),transparent 60%),
radial-gradient(560px 340px at 60% 112%,color-mix(in srgb,var(--pb-glow-3) 22%,transparent),transparent 62%),
linear-gradient(180deg,var(--pb-band-deep) 0%,var(--pb-band-rail) 58%,var(--pb-band-bg) 100%)}
.plg-brand::before{content:"";position:absolute;inset:0;z-index:-1;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='45'%3E%3Cpath d='M13 0 26 7.5v15L13 30 0 22.5v-15ZM13 30v15' fill='none' stroke='%238FA8FF' stroke-opacity='.17'/%3E%3C/svg%3E");
-webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 30%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 60% 30%,#000 20%,transparent 80%)}
.plg-brand::after{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--pb-glow-3) 55%,transparent),transparent)}
.plg-brand a{color:inherit;text-decoration:none}
.plg-id{display:inline-flex;align-items:center;gap:12px}
.plg-id__mark{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--pb-logo-plate);box-shadow:0 8px 20px -10px color-mix(in srgb,var(--pb-band-deep) 70%,transparent)}
.plg-id__mark img{width:30px;height:30px;object-fit:contain}
.plg-id__name{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--pb-band-text)}
.plg-id__name b{font-weight:800;color:var(--pb-sky)}
.plg-id__tag{display:block;margin-top:4px;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pb-band-soft)}
.plg-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pb-band-highlight)}
.plg-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--pb-gold-deep),var(--pb-gold-soft))}
.plg-brand__title{margin:18px 0 0;font-size:clamp(2rem,3.6vw,3.2rem);font-weight:800;line-height:1.06;letter-spacing:-.035em;color:var(--pb-band-text)}
.plg-brand__title em{font-style:normal;background:linear-gradient(100deg,var(--pb-band-accent) 0%,var(--pb-band-highlight) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.plg-brand__lead{margin:18px 0 0;max-width:30em;font-size:1.05rem;line-height:1.65;color:var(--pb-band-muted)}
.plg-marks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:560px;margin:32px 0 0;padding:0;list-style:none}
.plg-marks li{display:flex;align-items:center;gap:10px;padding:9px 12px 9px 9px;border-radius:var(--pb-radius-lg);border:1px solid color-mix(in srgb,var(--pb-band-text) 20%,transparent);background:color-mix(in srgb,var(--pb-band-text) 8%,transparent);font-size:13px;font-weight:600;color:var(--pb-band-text);white-space:nowrap;overflow:hidden}
.plg-marks li b{font-weight:800;color:var(--acc-d)}
.plg-mark{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--pb-radius-md);background:var(--pb-logo-plate);overflow:hidden}
.plg-mark img{width:24px;height:24px;object-fit:contain}
.plg-mark--glyph{background:linear-gradient(135deg,var(--acc-d),var(--acc-l));color:var(--pb-text-on-kpi);font-size:14px;font-weight:800}
.plg-back{font-size:14px;color:var(--pb-band-soft)!important;transition:color .2s}
.plg-back:hover{color:var(--pb-band-highlight)!important}

/* ---------- The card (upstream markup) ---------- */
body[data-path="login"] .page-card-head{padding:0 0 22px;text-align:center}
body[data-path="login"] .page-card-head img.app-logo{max-height:none;width:60px;height:60px;padding:11px;border-radius:18px;background:var(--pb-logo-plate);object-fit:contain;box-shadow:0 0 0 1px var(--pb-border-subtle),var(--pb-shadow-elevation-2)}
body[data-path="login"] .page-card-head h4{margin:18px 0 0;font-size:1.6rem;font-weight:var(--pb-weight-strong);letter-spacing:var(--pb-tracking-title);line-height:1.15;color:var(--plg-ink)}
body[data-path="login"] .page-card{max-width:none;margin:0;padding:34px 30px 30px;border-radius:22px;border:1px solid var(--plg-line);background:var(--plg-card);box-shadow:var(--plg-shadow)}
body[data-path="login"] .page-card form{max-width:none}
body[data-path="login"] .page-card .page-card-body{color:var(--plg-muted)}
body[data-path="login"] .page-card .form-group{margin-bottom:14px}
body[data-path="login"] .page-card .page-card-body input[type="text"],
body[data-path="login"] .page-card .page-card-body input[type="email"],
body[data-path="login"] .page-card .page-card-body input[type="password"]{height:50px;margin:0;padding-left:44px;padding-right:16px;border:1px solid var(--plg-line-2);border-radius:13px;background:var(--plg-input);color:var(--plg-ink);font-size:15px;box-shadow:none;transition:border-color .2s,box-shadow .2s}
body[data-path="login"] .page-card .page-card-body .password-field input{padding-right:64px}
body[data-path="login"] .page-card .page-card-body input::placeholder{color:var(--plg-faint)}
body[data-path="login"] .page-card .page-card-body input:hover{border-color:var(--plg-faint)}
body[data-path="login"] .page-card .page-card-body input:focus{border-color:var(--plg-primary);box-shadow:0 0 0 4px var(--pb-focus-ring);outline:none}
body[data-path="login"] .page-card .page-card-body .field-icon{left:15px;top:17px;color:var(--plg-faint)}
body[data-path="login"] .page-card .page-card-body .password-field .toggle-password{right:16px;top:50%;transform:translateY(-50%);line-height:1;font-size:12.5px;font-weight:600;color:var(--plg-primary)!important}
body[data-path="login"] .page-card .page-card-body .forgot-password-message{margin:14px 0 0;line-height:1.2}
body[data-path="login"] .page-card .page-card-body .forgot-password-message>*{font-size:13.5px;font-weight:600;color:var(--plg-primary)}
body[data-path="login"] .page-card .page-card-actions{margin-top:22px}
body[data-path="login"] .page-card .btn{height:50px;border-radius:13px;font-size:15px;font-weight:var(--pb-weight-medium);display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s,border-color .2s,color .2s}
body[data-path="login"] .page-card .btn+.btn,body[data-path="login"] .page-card .login-button-wrapper+.login-button-wrapper{margin-top:10px}
body[data-path="login"] .page-card .btn-primary{border:0;color:var(--pb-text-on-accent);background:var(--pb-grad);box-shadow:var(--pb-shadow-glow),inset 0 1px 0 var(--pb-sheen)}
body[data-path="login"] .page-card .btn-primary:hover{transform:translateY(-1px);box-shadow:var(--pb-shadow-glow),inset 0 1px 0 var(--pb-sheen)}
body[data-path="login"] .page-card .btn-primary:focus-visible,body[data-path="login"] .page-card .btn-default:focus-visible{outline:2px solid var(--plg-primary);outline-offset:3px}
body[data-path="login"] .page-card .btn-default,body[data-path="login"] .page-card .page-card-body .btn-login-option{border:1px solid var(--plg-line-2);background:transparent;color:var(--plg-ink);box-shadow:none}
body[data-path="login"] .page-card .btn-default:hover,body[data-path="login"] .page-card .page-card-body .btn-login-option:hover{border-color:var(--plg-primary);color:var(--plg-primary)}
body[data-path="login"] .login-divider{position:relative;margin:20px 0;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--plg-faint)!important}
body[data-path="login"] .login-divider::before,body[data-path="login"] .login-divider::after{content:"";position:absolute;top:50%;width:calc(50% - 24px);height:1px;background:var(--plg-line)}
body[data-path="login"] .login-divider::before{left:0}
body[data-path="login"] .login-divider::after{right:0}
body[data-path="login"] .sign-up-message,body[data-path="login"] .page-card p,body[data-path="login"] .page-card .text-muted{color:var(--plg-muted)!important}
body[data-path="login"] .sign-up-message{margin-top:20px;font-size:14px}
body[data-path="login"] .plg-forms a{color:var(--plg-primary)}
body[data-path="login"] .page-card .page-card-body.invalid input{border-color:var(--pb-text-danger)}
body[data-path="login"] .page-card .indicator,body[data-path="login"] .page-card .login-message{color:var(--plg-muted)}

/* ---------- Narrow screens: the brand panel becomes a header ---------- */
@media (max-width:920px){
.plg{grid-template-columns:1fr;min-height:0}
.plg-brand{gap:0;padding:22px 20px 26px}
.plg-brand::after{top:auto;left:0;width:auto;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--pb-glow-3) 55%,transparent),transparent)}
.plg-brand__body{margin-top:22px}
.plg-brand__title{font-size:1.7rem}
.plg-brand__lead,.plg-marks,.plg-eyebrow{display:none}
.plg-back{display:inline-block;margin-top:14px;font-size:13px}
.plg-forms{padding:32px 18px 48px;min-height:calc(100vh - 170px);align-content:start}
}
@media (prefers-reduced-motion:reduce){body[data-path="login"] *{transition:none!important}}