/* The customer application site.
   Not a Salesforce-looking page and not a form wizard. The seller's logo sits
   in a white bar; under it a band in the seller's color introduces the page and
   holds the customer's trade account as a card that is already filled in. The
   customer confirms four tiles instead of typing through steps, each tile is
   verified on the spot, and the decision lands on the card. In the product this
   is an Experience Cloud LWR site built from custom components.
   Everything is scoped under .portal and tinted by --brand (Setup > Branding). */

.portal {
  --ink: #101828;
  --muted: #5b6577;
  --line: #e4e7ee;
  --paper: #f7f6f2;
  --ok: #17824a;
  --tint: color-mix(in srgb, var(--brand) 9%, white);
  --brand-deep: color-mix(in srgb, var(--brand) 76%, black);
  min-height: 100%;
  display: flex; flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.portal a { color: var(--brand); }
.portal .slds-text-color_weak { color: var(--muted); }

/* Logo bar */
.portal__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem clamp(1.25rem, 4vw, 3.5rem); background: #fff; border-bottom: 1px solid var(--line); }
.portal__logo { display: inline-flex; align-items: center; }
.brand-logo { display: block; width: auto; max-width: 20rem; }
.brand-logo--image { object-fit: contain; }
.portal__meta { display: inline-flex; align-items: center; gap: 1.25rem; font-size: 0.82rem; color: var(--muted); }
.portal__secure { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--ink); }
.portal__secure::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px #d9f2e3; }
.portal__main { flex: 1 0 auto; padding-bottom: 2rem; }
.portal__foot { padding: 1.25rem; text-align: center; font-size: 0.8rem; color: var(--muted); }
.portal__narrow { max-width: 34rem; margin: 3.5rem auto 0; padding: 0 1.25rem; }

/* Type */
.portal__eyebrow { margin: 0 0 0.5rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); }
.portal__h1 { margin: 0 0 0.9rem; font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; }
.portal__h2 { margin: 0 0 0.85rem; font-size: 1.05rem; font-weight: 700; }
.portal__lead { margin: 0 0 1.5rem; font-size: 1.1rem; color: var(--muted); max-width: 36rem; }

/* The band: introduction on the left, the trade account card on the right */
.board__hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem); gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3.5rem) clamp(3.5rem, 6vw, 4.75rem);
  color: #fff;
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--brand) 55%, #8fb4ff) 0%, transparent 55%),
    linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%);
}
.board__hero .portal__eyebrow { color: rgba(255, 255, 255, 0.78); }
.board__hero .portal__lead { color: rgba(255, 255, 255, 0.86); }
.board__hero a { color: #fff; text-decoration: underline; }
.board__hint { margin: 0.75rem 0 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); }
.board__meter { display: flex; align-items: center; gap: 0.4rem; }
.board__meter span { width: 3.25rem; height: 0.45rem; border-radius: 999px; background: rgba(255, 255, 255, 0.25); }
.board__meter span.is-on { background: #fff; }
.board__meter strong { margin-left: 0.6rem; font-size: 0.9rem; }

/* The trade account card */
.tcard {
  position: relative; overflow: hidden;
  padding: 1.35rem 1.5rem 1.3rem; border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transform: rotate(-1.5deg);
  transition: transform 0.4s ease, background 0.4s ease;
}
.tcard::after { content: ''; position: absolute; right: -3.5rem; top: -3.5rem; width: 10rem; height: 10rem; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.tcard__top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.tcard__status { padding: 0.15rem 0.6rem; border-radius: 999px; background: rgba(255, 255, 255, 0.2); letter-spacing: 0.02em; text-transform: none; font-size: 0.76rem; color: #fff; white-space: nowrap; }
.tcard__name { margin-top: 1.25rem; font-size: 1.05rem; font-weight: 650; }
.tcard__amount { min-height: 2.6rem; font-size: 2.6rem; line-height: 1.1; font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.tcard__terms { font-size: 0.85rem; color: rgba(255, 255, 255, 0.82); }
.tcard__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.tcard__chips li { padding: 0.15rem 0.65rem; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, 0.5); font-size: 0.75rem; color: rgba(255, 255, 255, 0.75); }
.tcard__chips li.is-on { border-style: solid; border-color: transparent; background: #fff; color: var(--brand-deep); font-weight: 700; }
.tcard__chips li.is-on::before { content: '✓ '; }
.tcard--approved { background: #fff; color: var(--ink); border-color: #fff; transform: rotate(0deg); }
.tcard--approved .tcard__top, .tcard--approved .tcard__terms { color: var(--muted); }
.tcard--approved .tcard__status { background: var(--ok); color: #fff; }
.tcard--approved .tcard__amount { color: var(--ok); }
.tcard--approved .tcard__chips li.is-on { background: #e7f6ee; color: #0e5a31; }
.tcard--declined .tcard__status { background: rgba(0, 0, 0, 0.4); }

/* Tiles: pulled up over the band */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; margin: -2.25rem clamp(1.25rem, 4vw, 3.5rem) 0; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 1.25rem 1.4rem 1.35rem; box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06); }
.tile__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.85rem; }
.tile__num { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--tint); color: var(--brand); font-size: 0.9rem; font-weight: 800; }
.tile__title { margin: 0; flex: 1; font-size: 1.15rem; font-weight: 750; letter-spacing: -0.01em; }
.tile__pill { padding: 0.1rem 0.6rem; border-radius: 999px; background: #f1f2f6; color: var(--muted); font-size: 0.74rem; font-weight: 700; }
.tile--done { border-color: #bfe5cf; }
.tile--done .tile__num { background: var(--ok); }
.tile--done .tile__pill { background: #e7f6ee; color: #0e5a31; }
.tile--open, .tile--busy { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent), 0 10px 30px rgba(16, 24, 40, 0.06); }
.tile--open .tile__pill, .tile--busy .tile__pill { background: var(--tint); color: var(--brand); }
.tile--locked { opacity: 0.7; }
.tile--plain .tile__head { margin-bottom: 0.6rem; }
.tile__body > p { margin: 0 0 0.75rem; }
.tile__sub { font-weight: 700; }
.tile__fine { font-size: 0.82rem; color: var(--muted); }
.tile__lock { width: 0.8rem; height: 0.8rem; fill: var(--muted); vertical-align: -1px; }
.tile__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.tile__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 1.25rem; margin: 0; }
.tile__facts dt { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.03em; color: var(--muted); }
.tile__facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.tile__verified { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.9rem 0 0 !important; padding: 0.6rem 0.8rem; border-radius: 12px; background: #e7f6ee; color: #0e5a31; font-size: 0.92rem; font-weight: 600; }
.tile__busy { display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0 0 !important; font-weight: 600; color: var(--brand); }
.tile__spinner { flex: none; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--brand) 25%, transparent); border-top-color: var(--brand); animation: tile-spin 0.8s linear infinite; }
@keyframes tile-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tile__spinner { animation: none; } .tcard { transition: none; } }
.tick { width: 0.95rem; height: 0.95rem; fill: #fff; }
.tile__verified .tick, .tick--inline { flex: none; margin-top: 0.2rem; fill: var(--ok); }
.tick--inline { width: 0.8rem; height: 0.8rem; margin: 0; vertical-align: -1px; }
.tile__list, .tile__docs { margin: 0; padding: 0; list-style: none; }
.tile__list li { display: flex; flex-direction: column; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.tile__list li:last-child { border-bottom: 0; }
.tile__list span, .tile__doc span { font-size: 0.86rem; color: var(--muted); }
.tile__doc { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.tile__doc > div:first-child { display: flex; flex-direction: column; }
.tile__doc--sign { display: block; }
.tile__doc--sign > div:first-child { margin-bottom: 0.6rem; }
.tile__banks { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.tile__bank { padding: 0.7rem 0.8rem; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; text-align: left; font: inherit; font-size: 0.92rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.tile__bank:hover, .tile__bank:focus-visible { border-color: var(--brand); background: var(--tint); outline: none; }

/* Submit bar */
.board__submit { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem clamp(1.25rem, 4vw, 3.5rem) 0; padding: 1rem 1.4rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.board__submit.is-ready { border-color: var(--ink); color: var(--ink); }

/* Decision checks */
.checks { margin: -2.25rem clamp(1.25rem, 4vw, 3.5rem) 0; padding: 0.5rem 1.4rem; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06); }
.checks li { display: grid; grid-template-columns: 1.9rem 1fr auto; align-items: center; gap: 0.8rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.checks li:last-child { border-bottom: 0; }
.checks__mark { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #f1f2f6; }
.checks__label { font-weight: 600; }
.checks__by { font-size: 0.85rem; }
.checks li.is-done { color: var(--ink); }
.checks li.is-done .checks__mark { background: var(--ok); }
.checks li.is-active { color: var(--ink); }
.checks li.is-active .checks__mark { background: var(--tint); }

/* Invitation extras */
.portal__needs { margin: 2rem clamp(1.25rem, 4vw, 3.5rem) 0; }
.portal__needs ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.portal__need { display: flex; gap: 0.8rem; padding: 1rem 1.1rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); font-size: 0.92rem; color: var(--muted); }
.portal__need strong { color: var(--ink); }
.portal__need-icon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--tint); }
.portal__need-svg { width: 1.1rem; height: 1.1rem; fill: var(--brand); }

/* Form controls: underlined fields, not boxed inputs */
.portal .slds-form-element { margin-bottom: 1.1rem; }
.portal .slds-form-element__label, .portal .slds-form-element__legend { padding: 0; margin-bottom: 0.1rem; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.02em; color: var(--muted); }
.portal .slds-input, .portal .slds-select, .portal .slds-textarea {
  min-height: 2.4rem; padding: 0 0.1rem; border: 0; border-bottom: 2px solid #cfd5e1; border-radius: 0; background: transparent;
  font-size: 1.05rem; font-weight: 550; color: var(--ink); box-shadow: none;
}
.portal .slds-select { height: 2.4rem; }
.portal .slds-input:focus, .portal .slds-select:focus, .portal .slds-textarea:focus { border-bottom-color: var(--brand); box-shadow: 0 2px 0 0 var(--brand); outline: none; }
.portal .slds-input[readonly] { color: var(--muted); }
.portal .slds-form-element__help { font-size: 0.8rem; color: var(--muted); }
.portal .slds-checkbox .slds-form-element__label { font-size: 0.9rem; font-weight: 500; letter-spacing: 0; color: var(--ink); }
.portal .slds-checkbox .slds-checkbox_faux { width: 1.3rem; height: 1.3rem; border-radius: 7px; }
.portal .slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox_faux { background: var(--brand); border-color: var(--brand); }
.portal .slds-checkbox [type='checkbox']:checked + .slds-checkbox__label .slds-checkbox_faux::after { border-color: #fff; }

/* Buttons */
.portal .slds-button { height: auto; padding: 0.6rem 1.3rem; border-radius: 12px; font-size: 0.95rem; font-weight: 650; line-height: 1.4; }
.portal .slds-button_brand, .portal .slds-button_brand:link, .portal .slds-button_brand:visited { background: var(--ink); border-color: var(--ink); color: #fff; }
.portal .slds-button_brand:hover, .portal .slds-button_brand:focus { background: var(--brand); border-color: var(--brand); color: #fff; }
.portal .slds-button_brand[disabled] { background: #c4cad6; border-color: #c4cad6; color: #fff; }
.portal .slds-button_neutral { background: #fff; border: 1.5px solid #cfd5e1; color: var(--ink); }
.portal .slds-button_neutral:hover { border-color: var(--ink); }
.portal .slds-button:not(.slds-button_brand):not(.slds-button_neutral):not(.slds-button_reset) { padding-left: 0.2rem; padding-right: 0.2rem; color: var(--brand); }
.portal .slds-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 40%, white); outline-offset: 2px; }
.portal__cta { padding: 0.85rem 2.2rem !important; font-size: 1.05rem !important; }
.board__hero .portal__cta { background: #fff; border-color: #fff; color: var(--brand-deep); }
.board__hero .portal__cta:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Notices */
.portal .slds-scoped-notification { border-radius: 14px; padding: 0.8rem 1rem; }
.portal .slds-scoped-notification.slds-theme_error { background: #fdecea; color: #8a1c13; }
.portal .slds-scoped-notification.slds-theme_error .slds-icon { fill: #c23934; }

@media (max-width: 1100px) {
  .tiles, .portal__needs ul { grid-template-columns: 1fr; }
}

/* The simulated Plaid window inside the bank tile */
.tile__window { padding: 0.9rem 1rem 1rem; border: 1.5px solid var(--line); border-radius: 14px; background: #fafbfc; margin-bottom: 0.75rem; }
.tile__window-bar { margin: 0 0 0.75rem !important; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* Every tile has the same skeleton: header, body that grows, actions pinned to the bottom. */
.tiles { align-items: stretch; }
.tile { display: flex; flex-direction: column; }
.tile__body { display: flex; flex-direction: column; flex: 1; }
.tile__body > form { display: flex; flex-direction: column; flex: 1; }
.tile__actions { margin-top: auto; padding-top: 1rem; }
.tile__verified + .tile__actions:empty { display: none; }
.tile__ref { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 1rem; }
.tile__ref > div { display: flex; flex-direction: column; }
.tile__ref-letter { color: var(--ok) !important; font-weight: 600; }
.board__hero { align-items: start; }
.board__card { padding-top: 0.5rem; }

/* Step-by-step: one tile at a time, and a labelled step meter in the band */
.tiles--single { grid-template-columns: minmax(0, 46rem); }
.smeter { display: flex; gap: 1.1rem; margin: 0.25rem 0 0; padding: 0; list-style: none; font-size: 0.82rem; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.smeter li { display: inline-flex; align-items: center; gap: 0.4rem; }
.smeter__dot { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.45); font-size: 0.72rem; }
.smeter li.is-current { color: #fff; }
.smeter li.is-current .smeter__dot { background: #fff; border-color: #fff; color: var(--brand-deep); }
.smeter li.is-done { color: rgba(255, 255, 255, 0.9); }
.smeter li.is-done .smeter__dot { background: rgba(255, 255, 255, 0.25); border-color: transparent; }
.board__submit { max-width: 46rem; }
.tile__pill--link { text-decoration: none; color: var(--brand); background: var(--tint); }
.portal a.slds-button[disabled] { pointer-events: none; }

/* Legal text on the documents step: readable, scrollable, clearly marked as sample */
.legal { max-height: 15rem; overflow: auto; margin: 0.6rem 0 0.9rem; padding: 0.9rem 1rem; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font-size: 0.85rem; line-height: 1.5; color: var(--ink); }
.legal:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 40%, white); outline-offset: 2px; }
.legal p { margin: 0 0 0.6rem; }
.legal__notice { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.legal__title { font-weight: 800; letter-spacing: 0.04em; }