/* Subscriber Portal (Phase 9A.1b): the organization's reading library, in its theme colours (CSS variables from
   app/services/theme.py). Mobile first; generous reading measure. */
.kms-portal {
  --bs-primary: var(--kms-primary); --bs-primary-rgb: var(--kms-primary-rgb);
  --bs-link-color: var(--kms-primary); --bs-link-color-rgb: var(--kms-primary-rgb);
  --bs-link-hover-color: var(--kms-primary-dark);
  background: var(--kms-page-bg, #f6f4f1); color: var(--kms-page-ink, #222);
  min-height: 100vh; display: flex; flex-direction: column;
}
.kms-portal main { flex: 1 0 auto; }
.portal-container { max-width: 980px; }
.portal-header { background: var(--kms-primary); color: #fff; }
.portal-header .btn-outline-light { --bs-btn-color: #fff; }
.portal-brand { color: #fff; font-weight: 600; font-size: 1.2rem; letter-spacing: .01em; }
.portal-brand-sub { font-weight: 400; opacity: .8; margin-left: .5rem; font-size: .95rem; }
.portal-header .portal-muted { color: rgba(255,255,255,.85); }
.portal-muted { color: color-mix(in srgb, currentColor 65%, transparent); }
.portal-accent { color: var(--kms-primary); }
.portal-title { font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 600; line-height: 1.2; margin-bottom: .6rem; }
.portal-hero { padding: 1.5rem 0 .5rem; }
.portal-article, .portal-legal { max-width: 46rem; }
.portal-summary { font-size: 1.08rem; line-height: 1.7; }
.portal-narrow { max-width: 34rem; margin: 0 auto; }
.portal-card { background: #fff; border-radius: .75rem; padding: 1.1rem 1.2rem; color: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.06); transition: box-shadow .15s, transform .15s; }
.portal-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-1px); }
.portal-card h2 { color: var(--kms-primary-dark, var(--kms-primary)); }
.portal-level { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
  color: var(--kms-primary); border: 1px solid currentColor; border-radius: 99px; padding: .05rem .55rem; }
.portal-chip { font-size: .8rem; background: rgba(var(--kms-primary-rgb), .1); border-radius: 99px; padding: .1rem .6rem; }
.portal-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.portal-reader { width: 100%; height: 80vh; border: 1px solid rgba(0,0,0,.1); border-radius: .5rem; background: #fff; }
.portal-reader-text { height: 70vh; }
.portal-footer { background: rgba(0,0,0,.04); }
.portal-footer a { color: inherit; }
.kms-portal .btn-primary {
  --bs-btn-bg: var(--kms-primary); --bs-btn-border-color: var(--kms-primary); --bs-btn-color: var(--kms-primary-ink);
  --bs-btn-hover-bg: var(--kms-primary-dark); --bs-btn-hover-border-color: var(--kms-primary-dark);
  --bs-btn-hover-color: var(--kms-primary-ink); --bs-btn-active-bg: var(--kms-primary-dark);
  --bs-btn-active-border-color: var(--kms-primary-dark); --bs-btn-active-color: var(--kms-primary-ink);
  --bs-btn-disabled-bg: var(--kms-primary); --bs-btn-disabled-border-color: var(--kms-primary);
  --bs-btn-focus-shadow-rgb: var(--kms-primary-rgb);
}
.kms-portal .btn-outline-primary {
  --bs-btn-color: var(--kms-primary); --bs-btn-border-color: var(--kms-primary);
  --bs-btn-hover-bg: var(--kms-primary); --bs-btn-hover-border-color: var(--kms-primary);
  --bs-btn-hover-color: var(--kms-primary-ink); --bs-btn-active-bg: var(--kms-primary);
  --bs-btn-active-border-color: var(--kms-primary); --bs-btn-active-color: var(--kms-primary-ink);
  --bs-btn-disabled-color: var(--kms-primary); --bs-btn-disabled-border-color: var(--kms-primary);
  --bs-btn-focus-shadow-rgb: var(--kms-primary-rgb);
}
.kms-portal .form-control:focus, .kms-portal .form-check-input:focus { border-color: var(--kms-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--kms-primary-rgb), .25); }
.kms-portal .form-check-input:checked { background-color: var(--kms-primary); border-color: var(--kms-primary); }
.portal-header { color: var(--kms-primary-ink, #fff); }