/* ── The plants themselves, in the app ───────────────────────────────────────
   The same two photographs the website opens with: the crusher plant and the ready-mix
   plant. On the sign-in screen they sit behind the welcome panel; on the dashboard a
   thin band of whichever plant this account actually runs sits above the numbers.
   Every word stays real text over a scrim, so nothing is ever read off a picture. */

/* Sign-in */
.login-brand{position:relative;isolation:isolate;overflow:hidden}
.login-plants{position:absolute;inset:0;z-index:-1;display:grid;grid-template-columns:1fr 1fr}
.login-plant{background-position:center;background-size:cover;filter:saturate(.92)}
.login-plant.crusher{background-image:url("/website/img/hero-crusher.webp")}
.login-plant.rmc{background-image:url("/website/img/hero-rmc.webp")}
/* A real element, not a pseudo-element: the industrial stylesheet switches those off. */
.login-scrim{position:absolute;inset:0;grid-column:1 / -1;grid-row:1;background:
  linear-gradient(120deg,rgba(6,20,16,.95) 0%,rgba(6,20,16,.9) 48%,rgba(6,20,16,.78) 100%),
  repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 10px,transparent 10px 22px)}
.login-plants{grid-template-areas:none}
.login-plant{grid-row:1}
.login-plants-caption{margin:1.6rem 0 0;font-size:.85rem;color:#cfe0d7;letter-spacing:.02em}
.login-brand h1 span{color:#3ddc84}

/* Dashboard banner */
.plant-banner{position:relative;isolation:isolate;overflow:hidden;border-radius:16px;margin-bottom:1.1rem;min-height:132px;display:flex;align-items:center;color:#fff}
.plant-banner::before{content:"";position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover;
  background-image:url("/website/img/hero-crusher.webp")}
.plant-banner::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(9,14,18,.93) 0%,rgba(9,14,18,.78) 55%,rgba(9,14,18,.42) 100%)}
body[data-plant-type="RMC"] .plant-banner::before{background-image:url("/website/img/hero-rmc.webp")}
body[data-plant-type="RMC"] .plant-banner::after{background:linear-gradient(90deg,rgba(6,20,12,.93) 0%,rgba(6,20,12,.78) 55%,rgba(6,20,12,.42) 100%)}
.plant-banner-copy{padding:1rem 1.2rem;display:grid;gap:.25rem}
.plant-banner .eyebrow{color:#ff9b6a;margin:0;font-size:.72rem;letter-spacing:.16em}
body[data-plant-type="RMC"] .plant-banner .eyebrow{color:#7ff0b0}
.plant-banner strong{font-size:clamp(1.1rem,2.4vw,1.6rem);line-height:1.1}
.plant-banner small{color:#cfd9dd;font-size:.82rem}
.plant-banner-chips{margin-left:auto;display:flex;gap:.5rem;padding:1rem 1.2rem;flex-wrap:wrap;justify-content:flex-end}
.plant-banner-chips span{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);border-radius:999px;padding:.4rem .75rem;font-size:.76rem;font-weight:650;white-space:nowrap}
@media (max-width:820px){
  .plant-banner{flex-direction:column;align-items:stretch;min-height:0}
  .plant-banner-chips{margin-left:0;justify-content:flex-start;padding-top:0}
}
@media (prefers-reduced-motion:reduce){ .login-plant{filter:none} }

/* ── The signup wizard wears the plant's own colour ─────────────────────────
   The industrial sign-in stylesheet paints every button orange with an id
   selector, so a concrete plant needs at least that much weight to turn green.
   This is the same green the /rmc page uses, and #06301a on it is 8.1:1. */
body[data-plant-type="RMC"] #login-view .primary { background: #3ddc84; border-color: #3ddc84; color: #06301a; box-shadow: 0 5px 18px rgba(15, 122, 61, 0.16); }
body[data-plant-type="RMC"] #login-view .primary:hover:not(:disabled) { background: #5ce79b; }
body[data-plant-type="RMC"] #login-view .text-button { color: #0b6231; }
body[data-plant-type="RMC"] #login-view button:focus-visible,
body[data-plant-type="RMC"] #login-view a:focus-visible { outline-color: #3ddc84; }
body[data-plant-type="RMC"] #login-view .context-panel { background: #e9f6ee; border-color: #c6e6d3; }