/* fix_portals.css — public portals + CSR + supply chain (fix batch 3, area A6b).
   NOTE: this file is linked from the view's `yield :head`, which renders BEFORE application.css in the
   layout, so selectors here are prefixed (.auth-container …) to win on specificity. */

/* ---- U01-3 · news carousel: one whole card per view, arrows live in the side padding ---- */
.auth-container .auth-news-list{padding:10px 60px;scroll-padding-inline:60px;scroll-snap-type:x mandatory}
.auth-container .auth-news-item{flex:0 0 100%;min-width:0;max-width:none;width:100%;height:auto;min-height:260px;
  scroll-snap-align:start;overflow-wrap:anywhere;hyphens:auto}
.auth-container .auth-news-item:hover{transform:none}
.auth-container .auth-carousel-prev{left:8px}
.auth-container .auth-carousel-next{right:8px}

/* ---- U01-2 / R1-6 · inline sign-in alerts ---- */
.auth-inline-alert{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:10px;margin-bottom:18px;
  border:1px solid var(--rs-line,#DBE7DE);font-size:.92rem;line-height:1.45}
.auth-inline-alert > i{font-size:1.1rem;margin-top:2px}
.auth-inline-alert strong{display:block}
.auth-inline-alert--error{background:var(--rs-crit-bg,#F8E7E2);border-color:var(--rs-crit,#BF5340);color:#7a2a1d}
.auth-inline-alert--error > i{color:var(--rs-crit,#BF5340)}
.auth-inline-alert--takeover{background:var(--rs-warn-bg,#F7EFDD);border-color:var(--rs-warn,#B5832B);color:#5c4210}
.auth-inline-alert--takeover > i{color:var(--rs-warn,#B5832B)}
.auth-inline-alert--info{background:var(--rs-info-bg,#E6EEF3);border-color:var(--rs-info,#3F6F8F);color:#24475f}
.auth-inline-alert--info > i{color:var(--rs-info,#3F6F8F)}

/* ---- U01-5 · phones: stack Remember me / Forgot password, centre the logo ---- */
@media (max-width:575.98px){
  .auth-container .auth-remember-row{flex-direction:column;align-items:flex-start !important;gap:12px}
  .auth-container .auth-brand-row{flex-direction:column;justify-content:center !important;align-items:center}
  .auth-container .auth-brand-row > span:empty{display:none}
  .auth-container .auth-set-logo{text-align:center}
  .auth-container .auth-set-logo img{position:static !important;display:inline-block}
}

/* ---- W8-3 · set-password rules checklist ---- */
.pw-rules{list-style:none;margin:10px 0 0;padding:0;font-size:.85rem;color:var(--rs-muted,#5B6E63)}
.pw-rules li{display:flex;gap:8px;align-items:center;padding:2px 0}
.pw-rules li.is-met{color:var(--rs-ok,#2F8F5B);font-weight:600}
.pw-match{margin:8px 0 0;font-size:.85rem;color:var(--rs-crit,#BF5340);font-weight:600}
.pw-match[hidden]{display:none}

/* ═══ ESG+ sign-in (Stitch "Sign in", DESIGN.md Calm Corporate ESG, Kevin go 20261004) — every auth page ═══
   Left: calm dark brand panel (#132A30 = the globe illustration's own background) — no gradients, grid texture,
   news carousel or glass. Right: flat white card on the #F5F7FA canvas; one solid green primary. */
.auth-container { background: #F5F7FA !important; }
.auth-container .auth-brand-panel { background: #132A30 !important; padding: 48px 56px; color: #E6EEF0; }
.auth-container .auth-brand-panel::before { display: none !important; }
.auth-brand-inner { display: flex; flex-direction: column; width: 100%; max-width: 640px; margin: 0 auto; height: 100%; }
.auth-brand-top { display: flex; align-items: center; gap: 10px; }
.auth-brand-mark { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.auth-brand-mark sup { font-size: 10px; top: -1em; }
.auth-brand-tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #fff; background: #1D4ED8; border-radius: 6px; padding: 2px 7px; }
.auth-brand-art { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 24px 0; }
.auth-brand-img { width: 100%; max-width: 460px; height: auto; display: block; }
.auth-brand-headline { margin: 0 0 12px; font-size: 40px; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.auth-brand-headline sup { font-size: .4em; top: -1.2em; }
.auth-brand-lead { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: #C9D6DA; }
.auth-brand-foot { margin-top: 32px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: #A9BCC1; }
.auth-brand-foot strong { color: #fff; font-weight: 600; }

.auth-container .auth-form-section { background: #F5F7FA !important; }
.auth-container .auth-form-container { background: #fff !important; border: 1px solid #E5E7EB !important; border-radius: 16px !important;
  box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 40px 40px 32px !important; max-width: 460px; width: 100%; }
.auth-container .auth-form-container::before { display: none !important; }
.auth-container .auth-form-title { font-size: 26px !important; line-height: 34px; font-weight: 700 !important; color: #14213D !important; letter-spacing: -.015em; margin: 0 0 4px; background: none !important; -webkit-text-fill-color: currentColor !important; }
.auth-container .auth-form-subtitle { font-size: 15px !important; color: #4B5563 !important; margin: 0; }
.auth-container .auth-form-header { text-align: left !important; }
.auth-container .auth-form-label { font-size: 13px !important; font-weight: 600 !important; color: #14213D !important; margin-bottom: 6px; }
.auth-container .auth-form-label .bi { display: none; }
.auth-container .auth-form-control { height: 44px; border: 1px solid #D1D5DB !important; border-radius: 8px !important; background: #fff !important;
  color: #14213D !important; font-size: 15px !important; box-shadow: none !important; padding: 0 14px !important; }
.auth-container .auth-form-control::placeholder { color: #9CA3AF; }
.auth-container .auth-form-control:focus { border-color: #1D4ED8 !important; outline: 2px solid rgba(29,78,216,.18); outline-offset: 0; }
.auth-container .auth-submit-btn { height: 46px; border: 0 !important; border-radius: 8px !important; background: #14213D !important; color: #fff !important;
  font-size: 15px !important; font-weight: 600 !important; box-shadow: none !important; transform: none !important; background-image: none !important; }
.auth-container .auth-submit-btn:hover { background: #065F46 !important; }
.auth-container .auth-submit-btn:focus-visible { outline: 2px solid #1D4ED8; outline-offset: 2px; }
.auth-container .auth-forgot-link { color: #1D4ED8 !important; font-weight: 600; font-size: 13px; }
.auth-container .auth-checkbox-label { color: #4B5563 !important; font-size: 14px; }
.auth-container .auth-checkbox:checked { background-color: #14213D; border-color: #14213D; }
.auth-container .auth-brand-row { margin-bottom: 28px !important; }
@media (max-width: 991.98px) { .auth-container .auth-form-container { padding: 28px 22px !important; border-radius: 12px !important; } }
/* forgot password / unlock / confirm: their logo was position:absolute (inline) → it hung off the card's edge; keep it in the card, top-right like sign-in */
.auth-container .auth-form-container > .mb-5 > img { position: static !important; display: block; margin-left: auto; max-height: 40px !important; }
.auth-container .auth-form-container > .mb-5 { margin-bottom: 24px !important; }
.auth-treeni-logo { height: 40px; width: auto; display: block; }
.auth-brand-foot { display: flex; align-items: center; gap: 10px; }
.auth-resustain-chip { display: inline-flex; align-items: center; background: #fff; border-radius: 8px; padding: 6px 10px; }
.auth-resustain-chip img { height: 22px; width: auto; display: block; }
/* Kevin 20261004 logos: wordmark in the sign-in cards, the powered-by badge at the foot of the brand panel */
.auth-container .auth-card-logo { height: 28px !important; width: auto !important; max-width: 180px; display: block; margin-left: auto; position: static !important; }
.auth-container .auth-form-container > .mb-5 > .auth-card-logo { max-height: 28px !important; }
.auth-powered-badge { height: 36px; width: auto; display: block; }
/* Treeni logo on a light plate — same warm light grey + radius as the "powered by resustAIn" badge (20261005) */
.auth-treeni-plate { display: inline-flex; align-items: center; background: #ECEBE5; border-radius: 10px; padding: 8px 14px; }
.auth-treeni-plate .auth-treeni-logo { height: 30px; width: auto; display: block; }
/* 20261005 (Kevin): logos with no background, content aligned further left; the globe never overlaps the logo */
.auth-container .auth-brand-panel { padding: 40px 48px; }
.auth-brand-inner { margin: 0; max-width: 620px; }
.auth-brand-top { position: relative; z-index: 2; }
.auth-treeni-logo { height: 38px; width: auto; display: block; }
.auth-brand-art { overflow: hidden; padding: 16px 0; }
.auth-brand-img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.auth-brand-foot { border-top: 0; padding-top: 4px; margin-top: 20px; }
.auth-powered-badge { height: 24px; width: auto; display: block; }
.auth-brand-art { flex: 1 1 0 !important; min-height: 0 !important; } .auth-brand-art .auth-brand-img { height: 100%; }
/* 20261005 (Kevin): ONLY the two logos sit at the left edge; the globe is centred in the panel and the welcome text
   keeps its original centred column (640px, as before) */
.auth-brand-inner { max-width: none; width: 100%; margin: 0; }
.auth-brand-art { justify-content: center; }
.auth-brand-copy { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }