/* The agreement acceptance card (Pages/Shared/_AgreementAcceptance), used by signup, the reseller application, the
   setup wizard, the distributor offer and the portals' own acceptance pages. Those pages carry different colour
   tokens, so the card declares its own, for both themes, rather than borrowing names that exist on some pages and not
   others. */
.agr {
    --agr-ink: #1b2433;
    --agr-muted: #55617a;
    --agr-faint: #8a93a6;
    --agr-border: #e4e9f0;
    --agr-surface: #f5f8fc;
    --agr-accent: #1668ff;
    --agr-danger: #b91c1c;
    color: var(--agr-ink);
    font-size: 14px;
    line-height: 1.5;
    margin-top: 16px;
}

:root[data-bs-theme="dark"] .agr {
    --agr-ink: #e7ecf3;
    --agr-muted: #9aa6ba;
    --agr-faint: #6b7789;
    --agr-border: #263040;
    --agr-surface: #1a212c;
    --agr-accent: #4d8bff;
    --agr-danger: #f87171;
}

.agr-who { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; color: var(--agr-muted); }
.agr-who strong { color: var(--agr-ink); }
.agr-avatar {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: var(--agr-accent); color: #fff; font-weight: 700; font-size: 13px;
}
.agr-keyterms { background: var(--agr-surface); border: 1px solid var(--agr-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.agr-keyterms h4 { margin: 0 0 6px; font-size: 14px; }
.agr-keyterms ul { margin: 0; padding-left: 18px; }
.agr-keyterms li { margin: 4px 0; }
.agr-docs { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--agr-border); border-radius: 10px; }
.agr-docs li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 9px 12px; }
.agr-docs li + li { border-top: 1px solid var(--agr-border); }
.agr-docs a { color: var(--agr-accent); }
.agr-docs li > a:first-child { font-weight: 600; flex: 1 1 auto; }
.agr-v { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; color: var(--agr-muted); }
.agr-when { font-size: 12.5px; color: var(--agr-faint); }
.agr-pdf { font-size: 12.5px; }
/* Scoped under .agr so a page's own label and input rules, such as the wizard's bold block labels, do not reach them. */
.agr .agr-check { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; font-weight: 400; font-size: 14px; color: var(--agr-ink); margin: 0; }
/* The colour scheme is set rather than inherited: the native box otherwise follows the browser's own preference, not
   the theme chosen on the page, and drew as a solid dark square in the light theme on a dark-preference machine. */
.agr .agr-check input { all: revert; margin: 4px 0 0; flex: 0 0 auto; accent-color: var(--agr-accent); color-scheme: light; }
:root[data-bs-theme="dark"] .agr .agr-check input { color-scheme: dark; }
.agr-error { color: var(--agr-danger); font-size: 13px; margin-top: 6px; }
/* The portals' review page for a change (Pages/Shared/_AgreementChangeReview): one block per new version. */
.agr-change { border: 1px solid var(--agr-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.agr-change-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.agr-change-title { font-weight: 600; color: var(--agr-accent); }
.agr-change-summary { margin: 6px 0 0; color: var(--agr-ink); }
.agr-change-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 13px; }
.agr-change-links a { color: var(--agr-accent); }
.agr-change .agr-small { margin-top: 6px; }
.agr-small { color: var(--agr-faint); font-size: 12.5px; margin: 8px 0 0; }
/* What a version changed, word by word, in the customer and reseller portals (Pages/Shared/_AgreementVersion). Bootstrap's
   own subtle status colours, so it reads in both themes. */
.agr-cmp { font-size: .875rem; }
.agr-cmp-lead { color: var(--bs-secondary-color); margin-bottom: 14px; }
.agr-cmp-group + .agr-cmp-group { margin-top: 18px; }
.agr-cmp-group h3 { font-size: .9375rem; margin: 0 0 8px; }
.agr-cmp-change { border: 1px solid var(--bs-border-color); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.agr-cmp-change p { margin: 6px 0 0; }
.agr-cmp ins { text-decoration: underline; background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.agr-cmp del { text-decoration: line-through; background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }

/* A version of a legal document shown in the customer or reseller portal (Account/Agreements/Version, and the reseller
   portal's Branding Terms): the published markup is the website's, so its own title block and section list are fitted
   to the card, as Admin does for its preview. Uses the portal tokens from theme.css, which both portals load. */
.legal-text .wrap {
  max-width: none;
  padding: 0;
}

.legal-text .legal-head h1 {
  font-size: 1.375rem;
  margin: 4px 0;
}

.legal-text .legal-head .eyebrow {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--f-ink-3);
}

.legal-text .legal-nav {
  display: none;
}

.legal-text .legal-body {
  max-width: 80ch;
}

.legal-text h2 {
  font-size: 1.0625rem;
  margin-top: 22px;
}

.legal-text h3 {
  font-size: .9375rem;
  margin-top: 14px;
}

.legal-text p,
.legal-text li {
  color: var(--f-ink-2);
  font-size: .875rem;
}

.legal-text table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8125rem;
  margin: 10px 0;
}

.legal-text th,
.legal-text td {
  border: 1px solid var(--f-border);
  padding: 6px 9px;
  vertical-align: top;
}