/* The Learn views (learn-views.js), shared by praxamark.com and identitypraxis.com. Each site sets the --lv-* colours
   from its own tokens, for light and dark, on .lv-root or above:
   --lv-ink, --lv-ink-2, --lv-muted, --lv-line, --lv-paper, --lv-paper-2, --lv-card, --lv-brand, --lv-brand-ink,
   --lv-focus, --lv-highlight, --lv-land, --lv-active, --lv-acquired, --lv-shut-down, --lv-unknown,
   and optionally --lv-radius, --lv-radius-lg, --lv-shadow, --lv-font-body. */
.lv-root { --lv-radius: 14px; --lv-radius-lg: 22px; }
.lv-muted { color: var(--lv-muted); }
.lv-small { font-size: 0.8rem; }
.lv-strong { font-weight: 600; color: var(--lv-ink-2); }
.lv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Status chart (ecosystem) */
.lv-status { margin: 0 0 1.5rem; display: grid; gap: 12px; background: var(--lv-card); border: 1px solid var(--lv-line); border-radius: var(--lv-radius-lg); padding: clamp(18px, 2.3vw, 26px); box-shadow: var(--lv-shadow, none); }
.lv-status figcaption { font-size: 0.95rem; }
.lv-bar-chart { display: flex; height: 22px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--lv-line); }
.lv-bar-chart span { background: var(--c); }
.lv-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.92rem; }
.lv-legend li { display: inline-flex; align-items: center; gap: 6px; }
.lv-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--c); flex: none; }
.lv-credit { font-size: 0.8rem; margin: 0; }

/* Filters */
.lv-filters { display: grid; gap: 14px; margin-bottom: 1rem; scroll-margin-top: 80px; background: var(--lv-card); border: 1px solid var(--lv-line); border-radius: var(--lv-radius-lg); padding: clamp(18px, 2.3vw, 26px); box-shadow: var(--lv-shadow, none); }
.lv-filters fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.lv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--lv-line); border-radius: 999px; font-size: 0.9rem; cursor: pointer; background: var(--lv-paper); color: var(--lv-ink); }
.lv-chip:has(input:checked) { border-color: var(--c, var(--lv-brand)); background: color-mix(in srgb, var(--c, var(--lv-brand)) 12%, var(--lv-paper)); font-weight: 600; }
.lv-chip input { accent-color: var(--c, var(--lv-brand)); }
.lv-views { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--lv-line); border-radius: 999px; padding: 3px; gap: 2px; background: var(--lv-paper); justify-self: start; }
.lv-views legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lv-views label { padding: 6px 14px; border-radius: 999px; font-size: 0.9rem; font-weight: 600; cursor: pointer; color: var(--lv-ink-2); }
.lv-views label:has(input:checked) { background: var(--lv-brand); color: var(--lv-brand-ink); }
.lv-views label:has(input:focus-visible) { outline: 2px solid var(--lv-focus); outline-offset: 2px; }
.lv-views input { position: absolute; opacity: 0; pointer-events: none; }
.lv-selects { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; }
.lv-selects label { display: grid; gap: 4px; font-size: 0.85rem; font-weight: 600; color: var(--lv-ink-2); }
.lv-selects select, .lv-selects input[type='search'] { font: inherit; font-weight: 400; font-size: 0.93rem; color: var(--lv-ink); background: var(--lv-paper); border: 1px solid var(--lv-line); border-radius: 10px; padding: 8px 10px; min-width: 170px; max-width: 100%; }
.lv-selects .lv-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; padding-bottom: 9px; }
.lv-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin: 0 0 0.75rem; }
.lv-count { font-size: 0.88rem; margin: 0; }
.lv-suggest { font-size: 0.9rem; font-weight: 600; }

/* List */
.lv-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--lv-line); }
.lv-list > li { border-bottom: 1px solid var(--lv-line); padding: 1.1rem 0; scroll-margin-top: 90px; }
.lv-list > li:target { background: var(--lv-highlight); }
.lv-list h3 { margin-bottom: 0.3em; overflow-wrap: anywhere; }
.lv-meta { font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-bottom: 0.35rem; }
.lv-year { font-weight: 700; color: var(--lv-ink); }
.lv-definition { margin-bottom: 0.4rem; max-width: 72ch; }
.lv-sources { font-size: 0.9rem; margin-bottom: 0.3rem; overflow-wrap: anywhere; }
.lv-related { font-size: 0.9rem; margin-bottom: 0.3rem; }
.lv-item details { font-size: 0.88rem; }
.lv-item summary { cursor: pointer; font-weight: 600; color: var(--lv-ink-2); }
.lv-refs { margin: 0.5rem 0 0; padding-left: 1.2em; max-width: 78ch; }
.lv-refs li { margin-bottom: 0.4rem; overflow-wrap: anywhere; }
.lv-to-refs { white-space: nowrap; }
.lv-never, .lv-open { font-weight: 600; color: var(--lv-ink-2); }
.lv-tagline { margin-bottom: 0.3rem; max-width: 72ch; }
.lv-does { font-size: 0.9rem; margin-bottom: 0.3rem; }
.lv-acquired { font-size: 0.93rem; font-weight: 600; margin-bottom: 0.3rem; }
.lv-note { font-size: 0.93rem; margin-bottom: 0.3rem; max-width: 72ch; }
.lv-links { font-size: 0.85rem; margin: 0; overflow-wrap: anywhere; }
.lv-badge { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); white-space: nowrap; }
.lv-meta .lv-badge { white-space: normal; max-width: 100%; }

/* Table */
.lv-table-wrap { overflow-x: auto; border: 1px solid var(--lv-line); border-radius: var(--lv-radius); }
.lv-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 0.92rem; }
.lv-table th, .lv-table td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--lv-line); }
.lv-table th { background: var(--lv-paper-2); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lv-ink-2); white-space: nowrap; }
.lv-table tr:last-child td { border-bottom: 0; }
.lv-table td:first-child { font-weight: 600; min-width: 12ch; }

/* Groups (timeline, by what it does) */
.lv-groups { display: grid; gap: 1.5rem; }
.lv-group h3 { font-size: 1.1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--lv-line); padding-bottom: 0.35rem; margin-bottom: 0.6rem; }
.lv-group h3 span { font-family: var(--lv-font-body, inherit); font-size: 0.85rem; font-weight: 600; color: var(--lv-muted); }
.lv-group ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lv-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--lv-line); background: var(--lv-card); font: inherit; font-size: 0.9rem; text-decoration: none; color: var(--lv-ink); cursor: pointer; }
.lv-pill:hover { border-color: var(--c, var(--lv-brand)); }
.lv-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--lv-muted)); flex: none; }
.lv-pill small { color: var(--lv-muted); font-size: 0.8rem; }

/* Map */
.lv-mapview { display: grid; gap: 1.25rem; }
.lv-mapfig { margin: 0; display: grid; gap: 10px; }
.lv-map { width: 100%; height: auto; display: block; background: var(--lv-paper-2); border: 1px solid var(--lv-line); border-radius: var(--lv-radius); }
.lv-land { fill: var(--lv-land); stroke: var(--lv-paper-2); stroke-width: 0.5; }
.lv-has { fill: var(--shade); cursor: pointer; }
.lv-has:hover, .lv-has:focus-visible { stroke: var(--lv-ink); stroke-width: 1.2; outline: none; }
.lv-has.lv-on { stroke: var(--lv-ink); stroke-width: 1.8; }
.lv-placelist button.lv-pill small { font-weight: 700; }
.lv-zoom { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-zoom .lv-range[aria-pressed='true'] { background: var(--lv-brand); border-color: var(--lv-brand); color: var(--lv-brand-ink); }
.lv-places .lv-legend { margin-top: 0.8rem; font-size: 0.85rem; }
.lv-places p { margin: 0.8rem 0 0; }

/* Pages */
.lv-ranges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 1.25rem; }
.lv-ranges.end { margin: 1.5rem 0 0; }
.lv-ranges[hidden], .lv-empty[hidden] { display: none; }
.lv-range { font: inherit; font-size: 0.88rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--lv-line); background: var(--lv-paper); color: var(--lv-ink); cursor: pointer; }
.lv-range:hover { border-color: var(--lv-brand); }
.lv-range[aria-current='page'] { background: var(--lv-brand); border-color: var(--lv-brand); color: var(--lv-brand-ink); }
.lv-linkish { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }