/*
  The portal's look, from the client's prototype (frontend/docs/portal-design.md): a blue brand colour, a pale sidebar, large rounded cards on
  hairline borders, bold tight headings. Everything is a class here because the page policy allows no inline style.
  A lender's portal overrides the five brand tokens in /branding.css; nothing else changes.
*/
:root {
  /* the brand: a button's colour (white text on it), the same brand as text and borders on a page, and its tints */
  --lm-primary: #0b58bb;
  --lm-primary-dark: #094a9e;
  --lm-primary-light: #206bc6;
  --lm-accent: var(--lm-primary);
  --lm-tint: #e7f1fe;
  --lm-active: #e2eefe;
  --lm-on-hero: #86cdff;
  --lm-band: var(--lm-primary);
  /* the page: text, surfaces and lines */
  --lm-text: #1a2029;
  --lm-muted: #5b6675;
  --lm-bg: #fafcfe;
  --lm-bg-glass: rgba(250, 252, 254, .92);
  --lm-card: #ffffff;
  --lm-side: #f4f7fb;
  --lm-soft: #eff4fb;
  --lm-line: #e1e8f2;
  --lm-error: #b02a37;
  --lm-warn-bg: #fdecea;
  --lm-good: #1b6e3c;
  --lm-good-bg: #e3f4ea;
  --lm-danger: #b02a37;
  --lm-danger-dark: #8f2230;
  --lm-float-shadow: rgba(9, 40, 90, .25);
  --lm-shadow: 0 1px 2px rgba(16, 36, 70, .06), 0 2px 8px rgba(16, 36, 70, .04);
  --lm-shadow-hover: 0 2px 4px rgba(16, 36, 70, .08), 0 8px 20px rgba(16, 36, 70, .08);
  color-scheme: light;
  --lm-radius: 1.25rem;
  --lm-radius-sm: .75rem;

  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-color: var(--lm-text);
  --bs-body-bg: var(--lm-bg);
  --bs-border-color: var(--lm-line);
  --bs-primary: var(--lm-primary);
  --bs-primary-rgb: 11, 88, 187;
  --bs-link-color-rgb: 11, 88, 187;
  --bs-link-hover-color-rgb: 9, 74, 158;
}

/*
  The dark theme (theme.js sets data-bs-theme on <html>: the person's choice, else the device's). It changes the same tokens and nothing
  else, so a component is written once. Every --lm- token above must be given here too (a test checks this). The button colour stays
  dark enough for white text; the accent is the lighter shade that reads on a dark page. A lender's own colour is adapted in
  /branding.css for this theme.
*/
:root[data-bs-theme="dark"] {
  --lm-primary: #2468c8;
  --lm-primary-dark: #1d56a8;
  --lm-primary-light: #2a70cf;
  --lm-accent: #6aa8ff;
  --lm-tint: #17263b;
  --lm-active: #1c2f4a;
  --lm-on-hero: #bfe3ff;
  --lm-band: #1d56a8;
  --lm-text: #e7ecf3;
  --lm-muted: #9ba8b8;
  --lm-bg: #0f141b;
  --lm-bg-glass: rgba(15, 20, 27, .92);
  --lm-card: #171f2a;
  --lm-side: #131a23;
  --lm-soft: #121a24;
  --lm-line: #263244;
  --lm-error: #ff8a95;
  --lm-warn-bg: #3a1d22;
  --lm-good: #6fd39a;
  --lm-good-bg: #15301f;
  --lm-danger: #b4303f;
  --lm-danger-dark: #96283a;
  --lm-float-shadow: rgba(0, 0, 0, .5);
  --lm-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .2);
  --lm-shadow-hover: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .3);
  color-scheme: dark;

  --bs-primary-rgb: 106, 168, 255;
  --bs-link-color-rgb: 106, 168, 255;
  --bs-link-hover-color-rgb: 154, 196, 255;
}

h1, h2, h3, h4, .brand { font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.muted { color: var(--lm-muted); }
/* no link is underlined, in any state; a plain link in running text is told from its words by weight, which a reader who cannot tell the colours apart still sees (the focus ring is the keyboard's mark) */
a, a:hover, a:focus, a:active { text-decoration: none; }
p a:not([class]), .form-text a:not([class]), .notice a:not([class]), .form-check-label a:not([class]), .auth-links a:not([class]) { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.error { color: var(--lm-error); }
.good { color: var(--lm-good); }
.htmx-request { opacity: .6; }
.go-box { width: 6rem; }
.filter-search { flex: 1 1 14rem; max-width: 22rem; }
.filter-check { margin-bottom: .6rem; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(var(--bs-primary-rgb), .45);
  outline-offset: 2px;
}
.skip { position: absolute; left: -999px; top: .5rem; background: var(--lm-card); color: var(--lm-text); padding: .5rem 1rem; border-radius: var(--lm-radius-sm); z-index: 10; }
.skip:focus { left: .5rem; }

/*
  A dropdown opens under its field: the list starts where the field ends and is as wide as the field, instead of covering it. This is the browser's customisable select
  (Chrome and Edge 135 and later); a browser without it keeps its own list, which it places itself.
*/
@supports (appearance: base-select) {
  select.form-select, select.form-control { appearance: base-select; display: flex; align-items: center; justify-content: space-between; gap: .5rem; background-image: none; padding-right: .75rem; }
  select::picker-icon { content: ""; flex: none; width: .5rem; height: .5rem; margin-top: -.2rem; border-right: 2px solid var(--lm-muted); border-bottom: 2px solid var(--lm-muted); rotate: 45deg; transition: rotate .15s ease, margin .15s ease; }
  select:open::picker-icon { rotate: 225deg; margin-top: .2rem; }
  select::picker(select) {
    appearance: base-select; box-sizing: border-box; inset: auto; position-area: block-end span-inline-end; position-try-fallbacks: flip-block;
    min-width: anchor-size(width); max-height: min(20rem, 45vh); margin: .25rem 0 0; padding: .25rem;
    background: var(--lm-card); color: var(--lm-text); border: 1px solid var(--lm-line); border-radius: var(--lm-radius-sm); box-shadow: var(--lm-shadow-hover);
  }
  select option { padding: .5rem .75rem; border-radius: calc(var(--lm-radius-sm) - .25rem); }
  select option:hover { background: var(--lm-tint); }
  select option:checked { background: var(--lm-active); font-weight: 600; }
}

/* buttons and fields */
.btn { border-radius: var(--lm-radius-sm); font-weight: 600; padding: .6rem 1.1rem; }
.btn-sm { padding: .35rem .75rem; }
.btn-primary {
  --bs-btn-bg: var(--lm-primary); --bs-btn-border-color: var(--lm-primary);
  --bs-btn-hover-bg: var(--lm-primary-dark); --bs-btn-hover-border-color: var(--lm-primary-dark);
  --bs-btn-active-bg: var(--lm-primary-dark); --bs-btn-active-border-color: var(--lm-primary-dark);
}
.btn-outline-primary {
  --bs-btn-color: var(--lm-accent); --bs-btn-border-color: var(--lm-accent);
  --bs-btn-hover-bg: var(--lm-primary); --bs-btn-hover-border-color: var(--lm-primary);
  --bs-btn-active-bg: var(--lm-primary); --bs-btn-active-border-color: var(--lm-primary);
}
.btn-on-hero { display: inline-flex; align-items: center; gap: .6rem; background: var(--lm-on-hero); color: var(--lm-primary-dark); border: 0; margin-top: 1rem; }
.btn-on-hero:hover { background: #fff; color: var(--lm-primary-dark); }
.btn-on-hero-ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .75); margin-left: .5rem; }
.btn-on-hero-ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.btn-outline-secondary {
  --bs-btn-color: var(--lm-muted); --bs-btn-border-color: var(--lm-line);
  --bs-btn-hover-color: var(--lm-text); --bs-btn-hover-bg: var(--lm-active); --bs-btn-hover-border-color: var(--lm-line);
  --bs-btn-active-color: var(--lm-text); --bs-btn-active-bg: var(--lm-active); --bs-btn-active-border-color: var(--lm-line);
  --bs-btn-disabled-color: var(--lm-muted); --bs-btn-disabled-border-color: var(--lm-line);
}
.btn-outline-danger {
  --bs-btn-color: var(--lm-error); --bs-btn-border-color: var(--lm-error);
  --bs-btn-hover-color: var(--lm-card); --bs-btn-hover-bg: var(--lm-error); --bs-btn-hover-border-color: var(--lm-error);
  --bs-btn-active-color: var(--lm-card); --bs-btn-active-bg: var(--lm-error); --bs-btn-active-border-color: var(--lm-error);
}
.btn-danger {
  --bs-btn-bg: var(--lm-danger); --bs-btn-border-color: var(--lm-danger); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--lm-danger-dark); --bs-btn-hover-border-color: var(--lm-danger-dark); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--lm-danger-dark); --bs-btn-active-border-color: var(--lm-danger-dark); --bs-btn-active-color: #fff;
}
.btn-soft {
  display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  background: var(--lm-tint); color: var(--lm-accent); border: 0; font-weight: 600; padding: .7rem; border-radius: var(--lm-radius-sm);
}
.btn-soft:hover { background: var(--lm-active); }
.form-control, .form-select { border-radius: var(--lm-radius-sm); border-color: var(--lm-line); padding: .6rem .85rem; }
.form-control:focus, .form-select:focus { border-color: var(--lm-accent); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2); }
.form-control-sm, .form-select-sm { padding: .35rem .6rem; }
.card { --bs-card-bg: var(--lm-card); border-color: var(--lm-line); border-radius: var(--lm-radius); }
.pill {
  display: inline-flex; align-items: center; padding: .3rem .8rem; border-radius: 999px; white-space: nowrap;
  background: var(--lm-tint); color: var(--lm-accent); font-size: .9rem; font-weight: 500;
}
.pill-warn { background: var(--lm-warn-bg); color: var(--lm-error); }
.pill-good { background: var(--lm-good-bg); color: var(--lm-good); }
.notice { padding: .75rem 1rem; border: 1px solid var(--lm-line); border-radius: var(--lm-radius-sm); background: var(--lm-side); }
.table { --bs-table-striped-bg: var(--lm-side); }
.table th { color: var(--lm-muted); font-weight: 600; font-size: .9rem; }

/* brand mark: the lender's logo, or its name */
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--lm-accent); font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; text-decoration: none; }
.brand:hover { color: var(--lm-text); }
.brand-logo { height: 34px; width: auto; max-width: 11rem; object-fit: contain; }

/* sign-in, code and error pages: one centred card */
.bare { background: var(--lm-bg) linear-gradient(180deg, var(--lm-tint), var(--lm-bg) 60%) fixed no-repeat; min-height: 100vh; }
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.auth-card { width: 100%; max-width: 26rem; background: var(--lm-card); border: 1px solid var(--lm-line); border-radius: var(--lm-radius); padding: 2rem; }

/* signed-in pages: sidebar and content */
.app-shell { display: grid; grid-template-columns: 17rem minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1.5rem;
  padding: 1.25rem 1rem; background: var(--lm-side); border-right: 1px solid var(--lm-line);
}
.nav-list { display: flex; flex-direction: column; gap: .25rem; overflow-y: auto; min-height: 0; }
.nav-item {
  display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: var(--lm-radius-sm);
  color: var(--lm-muted); font-weight: 500; text-decoration: none;
}
.nav-item:hover { background: var(--lm-active); color: var(--lm-text); }
.nav-item.active { background: var(--lm-active); color: var(--lm-accent); font-weight: 600; }
.nav-badge {
  margin-left: auto; min-width: 1.4rem; padding: 0 .45rem; border-radius: 999px; background: var(--lm-primary); color: #fff;
  font-size: .78rem; font-weight: 700; line-height: 1.4rem; text-align: center;
}
.nav-badge:empty { display: none; }
.sidebar-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--lm-line); display: grid; gap: .75rem; }
.who strong { display: block; }
.who small { color: var(--lm-muted); overflow-wrap: anywhere; }
.app-top { padding: 1rem 2rem; border-bottom: 1px solid var(--lm-line); }
/* an operator working inside a lender under a support grant: always said, always one click from leaving */
.support-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .6rem 2rem; background: var(--lm-tint); border-bottom: 1px solid var(--lm-line); color: var(--lm-text);
}
.support-banner form { margin: 0; }
.content { padding: 2rem; width: 100%; max-width: 82rem; margin-inline: auto; }

/* the welcome card and the steps under it */
.hero-card {
  background: linear-gradient(135deg, var(--lm-primary), var(--lm-primary-light)); color: #fff;
  border-radius: 1.75rem; padding: 2.5rem;
}
.hero-card h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: .75rem; }
.hero-card p { max-width: 40rem; font-size: 1.1rem; margin-bottom: 0; opacity: .95; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.step {
  display: flex; gap: 1rem; align-items: flex-start; background: var(--lm-card); border: 1px solid var(--lm-line);
  border-radius: var(--lm-radius); padding: 1.25rem 1.4rem; color: inherit; text-decoration: none;
}
.step-link:hover { border-color: var(--lm-accent); }
.step-done .step-no { background: var(--lm-good-bg); color: var(--lm-good); }
.step-todo .step-no { background: var(--lm-warn-bg); color: var(--lm-error); }
.step .icon { width: 1.2rem; height: 1.2rem; }

/* cards and lists of the borrower's pages */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.stat-card { display: block; background: var(--lm-card); border: 1px solid var(--lm-line); border-radius: var(--lm-radius); padding: 1.25rem 1.4rem; color: inherit; text-decoration: none; box-shadow: var(--lm-shadow); }
a.stat-card:hover { border-color: var(--lm-accent); }
.stat-card h2 { font-size: 1rem; color: var(--lm-muted); font-weight: 600; letter-spacing: 0; margin-bottom: .4rem; }
.stat-card .big { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.attention { border-color: var(--lm-error); background: var(--lm-warn-bg); }
.rows { list-style: none; padding: 0; margin: 0; }
.rows > li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .85rem 0; border-top: 1px solid var(--lm-line); }
.rows > li:first-child { border-top: 0; }
.rows .grow { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.section-card { background: var(--lm-card); border: 1px solid var(--lm-line); border-radius: var(--lm-radius); padding: 1.5rem; margin-bottom: 1.25rem; box-shadow: var(--lm-shadow); }
.section-card > h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.facts { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: .45rem 1rem; margin: 0; }
.facts dt { color: var(--lm-muted); font-weight: 500; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill .icon { width: 1rem; height: 1rem; margin-right: .3rem; }
.unread { font-weight: 700; }
.progress-steps { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.progress-steps li { padding: .35rem .85rem; border-radius: 999px; background: var(--lm-tint); color: var(--lm-muted); font-size: .9rem; font-weight: 500; }
.progress-steps li.here { background: var(--lm-primary); color: #fff; }
.progress-steps li.past { color: var(--lm-accent); }
.table-wrap { overflow-x: auto; }
/* A schedule keeps each figure and date on one line and scrolls inside its card on a phone, instead of breaking "28 Oct 2026" over three lines. */
.table-nowrap th, .table-nowrap td { white-space: nowrap; }
.declaration, .comment-body { white-space: pre-line; overflow-wrap: anywhere; }
fieldset { border: 0; padding: 0; margin: 0; }
summary.btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
summary.btn::-webkit-details-marker { display: none; }
details[open] > summary.btn { margin-bottom: .25rem; }
@media (max-width: 47.99rem) {
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dt { margin-top: .5rem; }
  .section-card { padding: 1.1rem; }
  .btn-on-hero-ghost { margin-left: 0; }
}
.step-no {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--lm-tint); color: var(--lm-accent); font-weight: 600;
}

/* a phone: the sidebar becomes a top bar, the menu a row that scrolls sideways */
@media (max-width: 47.99rem) {
  .app-shell { display: block; }
  .sidebar {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    padding: .75rem 1rem; border-right: 0; border-bottom: 1px solid var(--lm-line);
  }
  .nav-list { order: 3; flex-direction: row; width: 100%; overflow-x: auto; overflow-y: visible; }
  .nav-group { display: none; }
  .nav-item { white-space: nowrap; padding: .5rem .8rem; }
  .sidebar-foot { margin: 0 0 0 auto; padding: 0; border: 0; display: flex; align-items: center; gap: .5rem; }
  .who { display: none; }
  .btn-soft { width: auto; padding: .5rem .9rem; }
  .app-top { padding: .75rem 1rem; }
  .support-banner { padding: .6rem 1rem; }
  .content { padding: 1rem; }
  .hero-card { padding: 1.5rem; border-radius: 1.25rem; }
  .auth-card { padding: 1.5rem; }
}

/* every field of the sign-in family takes the whole width of its card, and the drop-downs are as wide as the fields */
.auth-card .form-control, .auth-card .form-select { width: 100%; max-width: none; }

/* the way back to the website, at the top of every sign-in page */
/* a line of its own (above the brand where the page has one), as wide as its words so the click lands only on it */
.back-to-site { display: flex; width: fit-content; align-items: center; gap: .4rem; margin: 0 0 1.25rem; padding: .25rem 0; color: var(--lm-muted); font-size: .95rem; font-weight: 600; text-decoration: none; }
.back-to-site .icon { width: 1.1rem; height: 1.1rem; transition: transform .15s; }
.back-to-site:hover, .back-to-site:focus-visible { color: var(--lm-accent); }
.back-to-site:hover .icon, .back-to-site:focus-visible .icon { transform: translateX(-3px); }

/* the choice of sign-in (a wider card than the sign-in forms) */
.auth-card-wide { max-width: 32rem; }
.auth-card-form { max-width: 46rem; }
.apply-group { border: 1px solid var(--lm-line); border-radius: var(--lm-radius-sm); padding: 1rem; }
.apply-group legend { float: none; width: auto; padding: 0 .5rem; margin: 0; }
.choice { border-top: 1px solid var(--lm-line); padding-top: 1.25rem; margin-top: 1.25rem; }
.choice h2 { margin-bottom: .35rem; }

/*
  The sign-in family on a desktop screen (a wide window and a mouse): the form on the left, a third of the width, and the rest for what the person is about to do
  and where to turn when it does not work (templates/auth-aside.html). A phone or a tablet, narrow or by touch, gets the form alone: the panel is in the page and
  is not shown. The panel's colours are the brand tokens, so a lender's portal has its own.
*/
.auth-aside { display: none; }
@media (min-width: 75rem) and (hover: hover) and (pointer: fine) {
  .auth-split { grid-template-columns: minmax(28rem, 1fr) 2fr; grid-template-rows: auto 1fr; place-items: stretch; padding: 0; }
  .auth-split .theme-corner { position: static; grid-column: 1; grid-row: 1; justify-self: end; padding: .75rem .75rem 0; }
  .auth-split .auth-card, .auth-split .auth-card-wide {
    grid-column: 1; grid-row: 2; align-self: center; justify-self: center; max-width: 34rem; background: transparent; border: 0; border-radius: 0; padding: 1rem 2.5rem 3rem;
  }
  .auth-aside {
    display: flex; grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 2.5rem clamp(2.5rem, 6vw, 6rem); color: #fff;
    background:
      linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 3rem 3rem,
      linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 3rem 3rem,
      linear-gradient(150deg, var(--lm-primary-dark), var(--lm-primary));
  }
  /* margin auto centres it when there is room and lets the panel scroll from the top when there is not */
  .aside-inner { width: 100%; max-width: 42rem; margin-block: auto; }
  .aside-eyebrow { margin: 0 0 .75rem; color: #cfe2fb; font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .aside-title { margin: 0 0 .75rem; font-size: clamp(1.9rem, 2.6vw, 2.6rem); line-height: 1.1; }
  .aside-lead { max-width: 34rem; margin: 0 0 1.5rem; font-size: 1.1rem; color: rgba(255, 255, 255, .92); }
  .aside-steps { display: grid; gap: .7rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
  .aside-steps li { display: flex; align-items: flex-start; gap: 1rem; padding: .9rem 1.1rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--lm-radius-sm); }
  .aside-steps strong { display: block; margin-bottom: .15rem; }
  .aside-steps span { color: rgba(255, 255, 255, .9); }
  .aside-no { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--lm-on-hero); color: var(--lm-primary-dark); font-weight: 700; }
  .aside-steps .aside-no { color: var(--lm-primary-dark); }
  .aside-help { margin: 0 0 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .28); }
  .aside-help h3 { margin: 0 0 .6rem; font-size: 1rem; letter-spacing: .02em; }
  .aside-help ul { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; color: rgba(255, 255, 255, .92); }
  .aside-help a { color: #fff; }
  .aside-note { display: flex; align-items: center; gap: .6rem; margin: 0; color: rgba(255, 255, 255, .92); font-size: .95rem; }
}

/* the front page (frontend/docs/portal-design.md section 1): sections on a centred column, a blue band for the clients */
.site-wrap { width: min(72rem, 100% - 2rem); margin-inline: auto; }
.site-top { position: sticky; top: 0; z-index: 5; background: var(--lm-bg-glass); backdrop-filter: blur(8px); border-bottom: 1px solid var(--lm-line); }
.site-bar { display: flex; align-items: center; gap: 1.5rem; padding: .8rem 0; }
.site-bar .brand { margin-right: auto; }
.site-nav { display: flex; gap: 1.5rem; }
.site-nav a { color: var(--lm-muted); font-weight: 500; text-decoration: none; }
.site-nav a:hover { color: var(--lm-accent); }
.btn-go { display: inline-flex; align-items: center; gap: .5rem; }

.site-hero {
  padding: 4rem 0 4.5rem;
  background:
    linear-gradient(var(--lm-line) 1px, transparent 1px) 0 0 / 3rem 3rem,
    linear-gradient(90deg, var(--lm-line) 1px, transparent 1px) 0 0 / 3rem 3rem,
    linear-gradient(180deg, var(--lm-tint), var(--lm-bg));
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.site-hero h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); margin: 1.25rem 0; }
.accent { color: var(--lm-accent); }
.lead { font-size: 1.15rem; color: var(--lm-muted); max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero-visual {
  position: relative; min-height: 22rem; border-radius: 1.75rem; padding: 1.25rem;
  background: linear-gradient(135deg, var(--lm-primary), var(--lm-primary-light));
}
.hero-note { position: absolute; top: 1rem; right: 1.25rem; margin: 0; color: #fff; opacity: .8; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.float-card {
  position: absolute; display: flex; align-items: center; gap: .85rem; background: var(--lm-card); border-radius: var(--lm-radius-sm);
  padding: .85rem 1.1rem; box-shadow: 0 10px 30px var(--lm-float-shadow);
}
.float-card small { color: var(--lm-muted); }
.float-icon { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--lm-tint); color: var(--lm-accent); }
.float-a { top: 15%; left: 7%; }
.float-b { top: 44%; right: 7%; }
.float-c { bottom: 12%; left: 12%; }

.site-section { padding: 4.5rem 0; }
.site-soft { background: var(--lm-soft); }
.site-section h2, .site-band h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 2rem; max-width: 40rem; }
.eyebrow { color: var(--lm-accent); font-weight: 700; font-size: .85rem; letter-spacing: .12em; margin-bottom: .75rem; }
.eyebrow-light { color: #cfe2fb; }
.tile { width: 3rem; height: 3rem; border-radius: var(--lm-radius-sm); display: grid; place-items: center; background: var(--lm-tint); color: var(--lm-accent); flex: none; }
.tile-solid { background: var(--lm-primary); color: #fff; }

.cell-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cell { background: var(--lm-card); border: 1px solid var(--lm-line); border-radius: var(--lm-radius); padding: 1.5rem; }
.cell h3 { font-size: 1.1rem; margin: 1rem 0 .4rem; }
.cell p, .why p, .how-grid p { color: var(--lm-muted); margin: 0; }

.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.why { display: flex; gap: 1.1rem; align-items: flex-start; background: var(--lm-card); border: 1px solid var(--lm-line); border-radius: var(--lm-radius); padding: 1.5rem; }
.why h3 { font-size: .95rem; letter-spacing: .08em; margin-bottom: .4rem; }

.how-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.how-grid li { border-top: 3px solid var(--lm-accent); padding-top: 1rem; }
.how-no { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--lm-accent); font-weight: 600; }
.how-grid h3 { font-size: 1.15rem; margin: .5rem 0; }

.site-band { background: var(--lm-band); color: #fff; padding: 4.5rem 0; }
.client-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.client-grid li { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.25rem; border-radius: var(--lm-radius-sm); background: rgba(255, 255, 255, .14); font-weight: 600; }

.regulatory { max-width: 52rem; }
.regulatory h2 { margin: 1rem 0; }
.regulatory blockquote { border-left: 4px solid var(--lm-accent); padding-left: 1.25rem; color: var(--lm-muted); font-size: 1.1rem; margin: 0; }
.site-foot { border-top: 1px solid var(--lm-line); padding: 1.5rem 0; color: var(--lm-muted); }

@media (max-width: 63.99rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .cell-grid, .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  .site-bar { flex-wrap: wrap; gap: .5rem 1rem; }
  .site-nav { order: 3; width: 100%; overflow-x: auto; gap: 1.1rem; white-space: nowrap; padding-bottom: .25rem; }
  .site-hero { padding: 2.5rem 0 3rem; }
  .site-section, .site-band { padding: 3rem 0; }
  .cell-grid, .card-grid, .client-grid, .how-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { min-height: 19rem; }
  .float-a { left: 4%; }
  .float-b { right: 4%; }
  .float-c { left: 6%; }
}

/* the account pages: a link under the card's form, and a lender's terms as plain text */
.auth-links { margin: 1.25rem 0 0; font-size: .95rem; }
.legal { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow-y: auto; }

/* the theme button: one button that goes round automatic, light and dark; theme.js keeps data-theme-choice on <html> */
.theme-toggle {
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border: 1px solid var(--lm-line);
  border-radius: 999px; background: var(--lm-card); color: var(--lm-muted); font-size: .9rem; font-weight: 500; line-height: 1;
}
.theme-toggle:hover { color: var(--lm-text); border-color: var(--lm-accent); }
.theme-opt { display: none; align-items: center; gap: .5rem; }
:root:not([data-theme-choice]) .theme-opt-auto, :root[data-theme-choice="auto"] .theme-opt-auto,
:root[data-theme-choice="light"] .theme-opt-light, :root[data-theme-choice="dark"] .theme-opt-dark { display: inline-flex; }
.theme-corner { position: fixed; top: .75rem; right: .75rem; z-index: 6; }
.sidebar-foot .theme-toggle { justify-content: center; width: 100%; }
@media (max-width: 47.99rem) { .sidebar-foot .theme-toggle { width: auto; } }

/* the back office: the menu's headings, the strip of tabs, lists with their filters, and forms that open under a button */
.nav-group { margin: 1rem .9rem .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lm-muted); }
.back-link { display: inline-block; margin-bottom: .75rem; color: var(--lm-muted); text-decoration: none; font-size: .95rem; }
.back-link:hover { color: var(--lm-accent); }
.tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin: 1rem 0 1.5rem; border-bottom: 1px solid var(--lm-line); }
.tab { padding: .55rem 1rem; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--lm-muted); font-weight: 500; text-decoration: none; }
.tab:hover { color: var(--lm-text); }
.tab.active { color: var(--lm-accent); border-bottom-color: var(--lm-accent); font-weight: 600; }
.card-head { margin-bottom: 1rem; }
.card-head h2 { font-size: 1.15rem; margin-bottom: .15rem; }
.card-head p { margin: 0; }
.console-card { margin-top: 0; margin-bottom: 0; width: 100%; min-width: 0; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin-bottom: 1rem; }
.filter { flex: 0 1 11rem; min-width: 8rem; }
.filter .form-label { font-size: .85rem; margin-bottom: .2rem; color: var(--lm-muted); }
.filter-go { display: flex; gap: .5rem; flex: 0 0 auto; }
.pill-bad { background: var(--lm-warn-bg); color: var(--lm-error); }
.pill-info { background: var(--lm-tint); color: var(--lm-accent); }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions .actions { justify-content: flex-end; }
.act { display: inline-block; }
.act[open] { display: block; flex: 1 1 100%; }
.act-form { margin-top: .75rem; padding: 1rem; border: 1px solid var(--lm-line); border-radius: var(--lm-radius-sm); background: var(--lm-side); text-align: left; white-space: normal; max-width: 40rem; }
.act-inline > summary { display: none; }
.act-inline .act-form { margin-top: 0; border: 0; padding: 0; background: transparent; max-width: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1rem 1.5rem; align-items: start; }
/* a form on a card or a page of its own fills the card in columns; what is long, or a thing in itself, takes the whole row */
.act-inline .act-form > .notice, .act-inline .act-form > .error, .act-inline .act-form > .actions, .act-inline .act-form > fieldset,
.act-inline .act-form > .field:has(textarea), .act-inline .act-form > .field:has(.code-box) { grid-column: 1 / -1; }
.act-inline .act-form > .field:has(textarea) .form-control, .act-inline .act-form > .field:has(.code-box) .form-control { max-width: 52rem; }
.field .form-text { color: var(--lm-muted); font-size: .85rem; }
.rows-field { display: grid; gap: .75rem; }
.row-line { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; padding: .75rem; border: 1px solid var(--lm-line); border-radius: var(--lm-radius-sm); }
.code-box { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; }
.record-part { border-top: 1px solid var(--lm-line); margin-top: 1rem; padding-top: .25rem; }
.facts .fact { display: contents; }
.facts .fact-note dt { display: none; }
.facts .fact-note dd { grid-column: 1 / -1; color: var(--lm-muted); }
/* a table that scrolls sideways is the box its hidden labels sit in, or they stretch the whole page */
.table-responsive { position: relative; }
.facts-tiles { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .75rem; }
.facts-tiles .fact { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: .15rem; padding: .85rem 1.1rem; border: 1px solid var(--lm-line); border-radius: var(--lm-radius-sm); background: var(--lm-side); transition: border-color .15s, box-shadow .15s, background-color .15s; }
.facts-tiles dt { font-size: .85rem; }
.facts-tiles dd { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
/* a tile that is also a filter: the whole tile is the link, and the one the list is filtered by now is marked */
.facts-tiles .fact-link { cursor: pointer; }
.facts-tiles .fact-link:hover { border-color: var(--lm-accent); background: var(--lm-active); box-shadow: var(--lm-shadow-hover); }
.facts-tiles .fact-link:focus-within { outline: 3px solid rgba(var(--bs-primary-rgb), .45); outline-offset: 2px; }
.fact-a { color: inherit; text-decoration: none; }
/* a line that leads to a record (a loan number) reads as a link; a figure that is a filter (a tile) is a box and stays as it is */
.facts:not(.facts-tiles) .fact-a { color: var(--lm-accent); font-weight: 600; }
.facts-tiles .fact-a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.facts-tiles .fact-active { border-color: var(--lm-accent); background: var(--lm-tint); box-shadow: inset 0 0 0 1px var(--lm-accent); }
.facts-tiles .fact-active dd { color: var(--lm-accent); }
.table td.num { white-space: nowrap; }

/* saved filters, reports and dashboards (tables with totals), and boards of cards */
.saved-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .75rem; }
.saved-item { display: inline-flex; align-items: center; gap: .35rem; }
.saved-item .pill { text-decoration: none; }
.saved-bar .act[open] { flex: 1 1 100%; }
.report-facts { margin-bottom: .25rem; }
.report-notes { margin: 0 0 .75rem; padding-left: 1.1rem; }
.sheet + .sheet { margin-top: 1.25rem; }
.table tfoot th { border-top: 2px solid var(--lm-line); font-weight: 700; white-space: nowrap; }
.table tfoot th.num { text-align: right; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
.board-col { background: var(--lm-side); border: 1px solid var(--lm-line); border-radius: var(--lm-radius-sm); padding: .75rem; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.board-col-off { opacity: .65; }
.board-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.board-card { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .75rem; background: var(--lm-card); border: 1px solid var(--lm-line); border-radius: var(--lm-radius-sm); }
.board-title { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
a.board-title:hover { color: var(--lm-accent); }
/* a way in to a few things: each a card with its icon, a line on what it is and an arrow; the whole card is the link, so the page needs no frame of its own */
.console-card-gallery { background: transparent; border: 0; box-shadow: none; padding: 0; }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.gallery-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: 1.4rem; background: var(--lm-card); border: 1px solid var(--lm-line); border-radius: var(--lm-radius); box-shadow: var(--lm-shadow); transition: border-color .15s, box-shadow .15s, transform .15s; }
.gallery-tile:hover { border-color: var(--lm-accent); box-shadow: var(--lm-shadow-hover); transform: translateY(-2px); }
.gallery-tile:focus-within { outline: 3px solid rgba(var(--bs-primary-rgb), .45); outline-offset: 2px; }
.gallery-icon { margin-bottom: .6rem; }
.gallery-title { font-size: 1.15rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.gallery-link { color: inherit; text-decoration: none; }
.gallery-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.gallery-link:hover { color: var(--lm-accent); }
.gallery-link:focus-visible { outline: none; }
.gallery-text { color: var(--lm-muted); margin: 0; line-height: 1.45; }
.gallery-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .4rem; margin: .5rem 0 0; }
.gallery-tags .pill { font-size: .8rem; padding: .15rem .6rem; }
.gallery-open { margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--lm-accent); }
.gallery-open .icon { transition: transform .15s; }
.gallery-tile:hover .gallery-open .icon { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .gallery-tile, .gallery-open .icon { transition: none; } .gallery-tile:hover { transform: none; } .gallery-tile:hover .gallery-open .icon { transform: none; } }
.checks-scroll { max-height: 17rem; overflow-y: auto; padding: .6rem .9rem; border: 1px solid var(--lm-line); border-radius: var(--lm-radius-sm); background: var(--lm-card); }
.checks-scroll:focus-visible { outline: 3px solid rgba(var(--bs-primary-rgb), .45); outline-offset: 2px; }
.console-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 1.25rem; }
.result-card { margin-top: 1.25rem; }
.table td:first-child { white-space: nowrap; }

/* the header of a back-office page: what the page is on the left, what can be done with all of it on the right, large enough to be seen at once */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 1.5rem; }
.page-title { flex: 1 1 22rem; min-width: 0; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem; }
.page-actions form { margin: 0; }
.page-actions .btn-lg { font-size: 1rem; padding: .7rem 1.4rem; box-shadow: var(--lm-shadow); }

/* the facts of a record in a back-office card: as many columns as the width allows, each with its label above it, so a wide card is not mostly blank */
.console-card .facts:not(.facts-tiles) { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.1rem 1.75rem; }
.console-card .facts:not(.facts-tiles) .fact { display: block; min-width: 0; }
.console-card .facts:not(.facts-tiles) dt { font-size: .85rem; margin-bottom: .1rem; }
.console-card .facts:not(.facts-tiles) dd { font-weight: 500; }
.console-card .facts:not(.facts-tiles) .fact-note { grid-column: 1 / -1; }
.console-card .facts:not(.facts-tiles) .fact-note dd { font-weight: 400; }
.console-card .card-head { margin-bottom: 1.1rem; }
.console-card .record-part { margin-top: 1.25rem; padding-top: 1rem; }

/* a list whose rows can be clicked: a hand over the row, and the row marked when the pointer or the keyboard is on it */
.table-click tbody tr.row-click { cursor: pointer; }
.table-click tbody tr.row-click:hover > *, .table-click tbody tr.row-click:focus-visible > * { --bs-table-bg-state: var(--lm-active); }
.table-click tbody tr.row-click:focus-visible { outline: 3px solid rgba(var(--bs-primary-rgb), .45); outline-offset: -3px; }
.table-click tbody tr.row-open > * { --bs-table-bg-state: var(--lm-tint); font-weight: 600; }
.table-responsive[data-scroll]:focus-visible { outline: 3px solid rgba(var(--bs-primary-rgb), .45); outline-offset: 2px; }
.row-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; margin: 0 .35rem 0 -.25rem; padding: 0; border: 0; border-radius: .4rem; background: transparent; color: var(--lm-muted); vertical-align: middle; cursor: pointer; }
.row-toggle::before { content: "\25B8"; display: inline-block; transition: transform .15s; }
.row-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.row-toggle:hover { background: var(--lm-active); color: var(--lm-text); }
.row-toggle:focus-visible { outline: 3px solid rgba(var(--bs-primary-rgb), .45); outline-offset: 1px; }
.row-more > td { background: var(--lm-side); padding: 1rem 1.25rem; white-space: normal; }
.row-more[hidden] { display: none; }
.row-more .facts { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.row-more .facts .fact { display: block; }

/* a filter that picks several things: a box that opens a list of ticks */
.multi-pick { position: relative; }
.multi-pick > summary { list-style: none; cursor: pointer; }
.multi-pick > summary::-webkit-details-marker { display: none; }
.multi-list {
  position: absolute; z-index: 4; top: calc(100% + .25rem); left: 0; min-width: 100%; max-height: 18rem; overflow-y: auto;
  padding: .5rem .75rem; background: var(--lm-card); border: 1px solid var(--lm-line); border-radius: var(--lm-radius-sm); box-shadow: var(--lm-shadow-hover);
}
.multi-list .form-check { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .25rem 0; white-space: nowrap; }
.multi-list .form-check-input { float: none; margin: 0; }

/* the search box for a record (a client, a lead, a loan): a box that offers the few records that answer to what is typed */
.picker { position: relative; }
.picker-list {
  position: absolute; z-index: 5; top: calc(100% + .25rem); left: 0; right: 0; max-height: 16rem; overflow-y: auto; margin: 0; padding: .25rem; list-style: none;
  background: var(--lm-card); border: 1px solid var(--lm-line); border-radius: var(--lm-radius-sm); box-shadow: var(--lm-shadow-hover);
}
.picker-list[hidden] { display: none; }
.picker-option, .picker-note { padding: .5rem .75rem; border-radius: .5rem; overflow-wrap: anywhere; }
.picker-option { cursor: pointer; }
.picker-option:hover, .picker-option.active { background: var(--lm-active); }
.picker-note { color: var(--lm-muted); }
.picker .picked { border-color: var(--lm-good); }

@media (max-width: 47.99rem) {
  .page-actions { width: 100%; justify-content: stretch; }
  .page-actions > *, .page-actions .btn-lg { flex: 1 1 auto; }
  .page-actions form .btn-lg { width: 100%; }
  .console-card .facts:not(.facts-tiles) { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .facts-tiles { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
}

/* the buttons of a row stay in view when a wide list scrolls sideways inside its card */
.table-responsive .row-actions { position: sticky; right: 0; z-index: 1; background-color: var(--lm-card); border-left: 1px solid var(--lm-line); }

/* the setup of an authenticator: the QR code on white whatever the theme (a scanner needs dark on light), the steps, and the key to type */
.enrol-steps { padding-left: 1.2rem; margin-bottom: 1rem; color: var(--lm-muted); font-size: .95rem; }
.qr { display: block; background: #fff; padding: .25rem; border: 1px solid var(--lm-line); border-radius: var(--lm-radius-sm); image-rendering: pixelated; max-width: 100%; height: auto; }
.enrol-key { font-size: 1.05rem; letter-spacing: .06em; overflow-wrap: anywhere; color: var(--lm-text); }

/* the picture of a dashboard table: a box of a set height that the chart fills (the library sizes the canvas to its box) */
.chart-box { position: relative; height: 17rem; margin: .5rem 0 1rem; }
.chart-box canvas { max-width: 100%; }
@media (max-width: 47.99rem) { .chart-box { height: 14rem; } }

/* a dashboard table of one row, shown as figures: wide enough for an amount with its currency */
.facts-tiles.kpis { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); margin-bottom: .5rem; }
.kpis dd { font-size: 1.2rem; overflow-wrap: anywhere; }

/* ---- toasts (js/toast.js; named lm-toast because Bootstrap has a toast of its own that stays hidden): a message that is there wherever the page is scrolled to. Good news fades; a refusal stays until it is closed. */
.lm-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: .6rem; width: min(26rem, calc(100vw - 2rem)); pointer-events: none; }
.lm-toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: .75rem; padding: .8rem .9rem .8rem 1rem;
  background: var(--lm-card); color: var(--lm-text); border: 1px solid var(--lm-line); border-radius: var(--lm-radius-sm); box-shadow: var(--lm-shadow-hover);
  animation: lm-toast-in .18s ease-out;
}
.lm-toast-ok { box-shadow: inset 4px 0 0 var(--lm-good), var(--lm-shadow-hover); }
.lm-toast-error { box-shadow: inset 4px 0 0 var(--lm-error), var(--lm-shadow-hover); }
.lm-toast-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-weight: 700; font-size: .95rem; line-height: 1; }
.lm-toast-ok .lm-toast-mark { background: var(--lm-good-bg); color: var(--lm-good); }
.lm-toast-error .lm-toast-mark { background: var(--lm-warn-bg); color: var(--lm-error); }
.lm-toast-text { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lm-toast-close { flex: none; background: none; border: 0; color: var(--lm-muted); font-size: 1.4rem; line-height: 1; padding: 0 .25rem; border-radius: var(--lm-radius-sm); cursor: pointer; }
.lm-toast-close:hover { color: var(--lm-text); }
.lm-toast-close:focus-visible { outline: 3px solid rgba(var(--bs-primary-rgb), .45); outline-offset: 1px; }
.lm-toast-leaving { opacity: 0; transform: translateY(.4rem); transition: opacity .18s ease, transform .18s ease; }
.lm-toast-again { animation: lm-toast-again .3s ease-out; }
@keyframes lm-toast-in { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }
@keyframes lm-toast-again { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .lm-toast, .lm-toast-again { animation: none; } .lm-toast-leaving { transition: none; } }
@media (max-width: 47.99rem) { .lm-toasts { right: .75rem; left: .75rem; bottom: .75rem; width: auto; } }
@media print { .lm-toasts { display: none; } }

/* ---- forms that say what is wrong (js/forms.js): the star by what is needed, the input that fails, and the words under it */
/* the second content is for a browser that can give the star no words (a screen reader already hears "required"); one that cannot ignores it */
label.is-required::after, legend.is-required::after { content: " *"; content: " *" / ""; color: var(--lm-error); font-weight: 700; }
.form-control.is-invalid, .form-select.is-invalid, .form-check-input.is-invalid { border-color: var(--lm-error); }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { border-color: var(--lm-error); box-shadow: 0 0 0 .2rem var(--lm-warn-bg); }
.form-check-input.is-invalid ~ .form-check-label { color: var(--lm-error); }
fieldset.is-invalid { outline: 2px solid var(--lm-error); outline-offset: .4rem; border-radius: var(--lm-radius-sm); }
.field-error { color: var(--lm-error); font-size: .875rem; margin-top: .3rem; }
fieldset > .field-error { margin: 0 0 .5rem; }
.btn.is-busy { opacity: .75; cursor: progress; }