/* PRIMARY ▸ List (primary-listing.js): the one chronological timeline of directions.
 * Colours come from the theme anchors (--bg --sf --pn --bd --ac --a2 --tx --td --tb, and the osiris-tokens --o-* roles);
 * only the four aspect natures add tokens, defined here for dark and light themes (WCAG AA against the panel).
 * Every text is >= 12px; every control is >= 44px high where the pane is narrow (container query) or the pointer is coarse.
 * Aspect nature is never colour alone: the glyph and the word always travel with it. */
:root {
  --asp-soft: #6cc4ff;      /* sextile */
  --asp-trine: #6fe0a0;     /* trine */
  --asp-hard: #ff8c7e;      /* square, opposition, semisquare, sesquiquadrate */
  --asp-conj: #f2cb57;      /* conjunction */
  --asp-par: #c4aeff;       /* parallels */
  --asp-minor: #b4bfd4;
  --pl-stale: .45;
}
html.light {
  --asp-soft: #0a5e9f;
  --asp-trine: #0f6a37;
  --asp-hard: #b0261c;
  --asp-conj: #7d5200;
  --asp-par: #5a3dae;
  --asp-minor: #4a5568;
}
.pl { container-type: inline-size; container-name: pl; display: block; padding: 6px 8px 24px; font-family: var(--o-font, system-ui, sans-serif); font-size: 13px; color: var(--o-ink, var(--tx)); }
.pl *, .pl *::before, .pl *::after { box-sizing: border-box; }
.pl-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── toolbar ── */
.pl-bar { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 8px; border-bottom: 1px solid var(--o-line, var(--bd)); }
.pl-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; }
.pl-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-field > label, .pl-field > .pl-lab { font-size: 12px; font-weight: 600; color: var(--o-ink-muted, var(--td)); letter-spacing: .02em; }
.pl select, .pl input[type="text"], .pl input[type="search"], .pl input[type="number"] {
  font: inherit; font-size: 13px !important; min-height: 32px !important; padding: 3px 8px; color: var(--o-ink, var(--tx)); background: var(--o-surface-sunk, var(--sf));
  border: 1px solid var(--o-line, var(--bd)); border-radius: var(--o-radius-sm, 6px); max-width: 100%;
}
.pl select:focus-visible, .pl input:focus-visible, .pl button:focus-visible, .pl [tabindex]:focus-visible { outline: 2px solid var(--o-focus, var(--a2)); outline-offset: 1px; }
.pl .pl-btn, .pl button.pl-btn.pl-btn { max-width: 100%; font: inherit; font-size: 13px !important; font-weight: 600; min-height: 32px !important; padding: 3px 10px; cursor: pointer; color: var(--o-ink, var(--tx));
  background: var(--o-surface, var(--pn)); border: 1px solid var(--o-line, var(--bd)); border-radius: var(--o-radius-sm, 6px); white-space: nowrap; }
.pl .pl-btn:hover { border-color: var(--o-line-hover, var(--ac)); }
.pl .pl-btn[aria-pressed="true"], .pl .pl-btn[aria-expanded="true"] { background: var(--o-active-bg, var(--tb)); color: var(--o-active-fg, var(--bg)); border-color: transparent; }
.pl .pl-btn[disabled] { opacity: .55; cursor: default; }
.pl-seg { display: inline-flex; border-radius: var(--o-radius-sm, 6px); }
.pl .pl-seg .pl-btn { border-radius: 0; margin-left: -1px; }
.pl .pl-seg .pl-btn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.pl .pl-seg .pl-btn:last-child { border-radius: 0 6px 6px 0; }
.pl-range { display: flex; flex-direction: column; gap: 2px; min-width: 200px; flex: 1 1 220px; }
.pl-range-out { font-size: 12px; font-weight: 600; color: var(--o-ink-muted, var(--td)); }
.pl-dual { position: relative; height: 32px; }
.pl-dual input[type="range"] { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 32px; margin: 0; pointer-events: none; background: transparent; -webkit-appearance: none; appearance: none; accent-color: var(--ac); }
.pl-dual input[type="range"]::-webkit-slider-thumb { pointer-events: auto; cursor: grab; }
.pl-dual input[type="range"]::-moz-range-thumb { pointer-events: auto; cursor: grab; }
.pl-dual::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 4px; border-radius: 2px; background: var(--o-line, var(--bd)); }
.pl-status { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-size: 12px; font-weight: 600; color: var(--o-ink-muted, var(--td)); }
.pl-busy { display: none; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--o-line-hover, var(--ac)); color: var(--o-ink-strong, var(--tb)); }
.pl[data-busy="1"] .pl-busy { display: inline-block; }
.pl-grow { flex: 1 1 auto; }

/* ── popovers (Aspects, Bodies, Columns, Export) ── */
.pl-popwrap { position: relative; display: inline-block; }
.pl-pop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 240px; max-width: min(92vw, 420px); max-height: 60vh; overflow: auto; padding: 8px 10px;
  background: var(--o-surface, var(--pn)); border: 1px solid var(--o-line, var(--bd)); border-radius: var(--o-radius, 8px); box-shadow: var(--o-shadow-pop, 0 10px 28px rgba(0,0,0,.45)); }
.pl-pop[hidden] { display: none; }
.pl-pop h4, .pl-drawer h4 { margin: 6px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--o-ink-muted, var(--td)); }
.pl-pop h4:first-child, .pl-drawer h4:first-child { margin-top: 0; }
.pl-checks { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.pl-check { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 1px 4px; font-size: 13px; cursor: pointer; border-radius: 4px; }
.pl-check:hover { background: var(--o-wash, transparent); }
.pl-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--ac); }
.pl-check small { font-size: 12px; color: var(--o-ink-muted, var(--td)); }
.pl-mini { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }

/* ── drawer (Refinements) ── */
.pl-drawer { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--o-line, var(--bd)); border-radius: var(--o-radius, 8px); background: var(--o-surface-sunk, var(--sf)); }
.pl-drawer[hidden] { display: none; }
.pl-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 16px; }
.pl-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pl-note { margin: 2px 0; font-size: 12px; line-height: 1.4; color: var(--o-ink-muted, var(--td)); }
.pl-note b { color: var(--o-ink, var(--tx)); }
.pl-warn { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--asp-conj); background: var(--o-wash, transparent); font-size: 13px; }
.pl-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; font-size: 12px; color: var(--o-ink-muted, var(--td)); }
.pl-guide { margin: 6px 0; font-size: 13px; line-height: 1.5; }
.pl-guide summary { color: var(--o-ink, var(--tx)); cursor: pointer; font-weight: 600; min-height: 28px; display: flex; align-items: center; }
.pl-guide dl { margin: 4px 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; }
.pl-guide dt { font-weight: 700; }
.pl-guide dd { margin: 0; color: var(--o-ink-muted, var(--td)); }

/* ── table ── */
.pl-scroll { overflow-x: auto; }
.pl-table { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.pl-table caption { text-align: left; padding: 6px 0; font-size: 12px; font-weight: 600; color: var(--o-ink-muted, var(--td)); }
.pl-table thead th { position: sticky; top: 0; z-index: 3; text-align: left; padding: 0; background: var(--o-surface, var(--pn)); border-bottom: 2px solid var(--o-line, var(--bd)); }
.pl button.pl-th.pl-th, .pl-th { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 4px; width: 100%; min-height: 34px; padding: 4px 8px; cursor: pointer; font-size: 12px !important; font-weight: 700; letter-spacing: .03em; color: var(--o-ink-muted, var(--td)); }
.pl-th:hover { color: var(--o-ink-strong, var(--tb)); }
.pl-th:focus-visible { outline: 2px solid var(--o-focus, var(--a2)); outline-offset: -2px; }
.pl-th[data-nosort] { cursor: default; }
.pl-th .pl-arrow { font-size: 12px; opacity: .85; }
.pl-table td { padding: 6px 8px; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--o-line, var(--bd)) 55%, transparent); }
.pl[data-density="compact"] .pl-table td { padding-top: 2px; padding-bottom: 2px; }
.pl-table tbody tr.pl-row { cursor: pointer; }
.pl-table tbody tr.pl-row:hover { background: var(--o-wash, transparent); }
.pl-table tbody tr.pl-row:focus-visible { outline: 2px solid var(--o-focus, var(--a2)); outline-offset: -2px; }
.pl-table tbody tr.pl-row[aria-expanded="true"] { background: var(--o-wash, transparent); }
.pl-table tbody tr.sel-active { box-shadow: inset 3px 0 0 var(--ac); }
.pl-table tbody tr.pd-transport-current td { border-bottom-color: var(--ac); }
.pl-table tbody tr.pl-now td:first-child { box-shadow: inset 3px 0 0 var(--asp-conj); }
.pl[data-stale="1"] .pl-table tbody { opacity: var(--pl-stale); transition: opacity .15s; }
.pl-date { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-age { display: block; font-size: 12px; color: var(--o-ink-muted, var(--td)); font-variant-numeric: tabular-nums; }
.pl-chev { display: inline-block; width: 1em; color: var(--o-ink-muted, var(--td)); }
.pl-pair { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.pl-body { white-space: nowrap; }
.pl-g { font-family: var(--ui-font); font-size: 15px; margin-right: 3px; }
.pl-asp { white-space: nowrap; font-weight: 700; }
.pl-asp[data-nature="soft"] { color: var(--asp-soft); }
.pl-asp[data-nature="soft"][data-name="Tri"] { color: var(--asp-trine); }
.pl-asp[data-nature="hard"] { color: var(--asp-hard); }
.pl-asp[data-nature="conj"] { color: var(--asp-conj); }
.pl-asp[data-nature="parallel"] { color: var(--asp-par); }
.pl-asp[data-nature="minor"] { color: var(--asp-minor); }
.pl-arc { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.pl-mode { display: flex; flex-wrap: wrap; gap: 3px 4px; align-items: center; }
.pl-chip { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; font-size: 12px; font-weight: 600; line-height: 1.5; border-radius: 999px; border: 1px solid var(--o-line, var(--bd)); color: var(--o-ink, var(--tx)); white-space: nowrap; }
.pl-chip[data-dc="D"] { background: var(--o-active-bg, var(--tb)); color: var(--o-active-fg, var(--bg)); border-color: transparent; font-weight: 700; }
.pl-chip[data-dc="C"] { background: transparent; border-color: var(--o-ink, var(--tx)); border-width: 2px; font-weight: 700; }
.pl-chip[data-tone="c3"], .pl-chip[data-tone="c4"] { border-color: var(--asp-hard); }
.pl-chip[data-tone="c2"] { border-color: var(--asp-conj); }
.pl-chip[data-tone="c0"], .pl-chip[data-tone="c1"] { border-color: var(--o-line, var(--bd)); }
.pl-badge-g { margin-right: 3px; }
.pl-uniform { display: none; }
.pl-empty { padding: 24px 8px; text-align: center; color: var(--o-ink-muted, var(--td)); font-size: 13px; }
.pl-more td { text-align: center; padding: 8px; }

/* ── work panel (expanded row) ── */
.pl-work > td { padding: 0 !important; background: var(--o-surface-sunk, var(--sf)); }
.pl-workpanel { padding: 10px 12px 12px; }
.pl-workhead { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-bottom: 8px; }
.pl-workhead strong { font-size: 14px; }
.pl-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 16px; }
.pl-steps > li { counter-increment: step; min-width: 0; }
.pl-steps h5 { margin: 0 0 4px; font-size: 13px; }
.pl-steps h5::before { content: counter(step) ". "; color: var(--o-ink-muted, var(--td)); }
.pl-steps dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1px 10px; font-size: 13px; }
.pl-steps dt { color: var(--o-ink-muted, var(--td)); }
.pl-steps dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.pl-steps dd small { display: block; font-weight: 400; font-size: 12px; color: var(--o-ink-muted, var(--td)); }
.pl-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pl-labmsg { font-size: 12px; color: var(--o-ink-muted, var(--td)); align-self: center; }

/* ── compare ── */
.pl-compare { margin-top: 8px; }
.pl-compare table { border-collapse: collapse; font-size: 13px; width: 100%; }
.pl-compare th, .pl-compare td { padding: 5px 8px; border: 1px solid var(--o-line, var(--bd)); text-align: left; vertical-align: top; }
.pl-compare th[scope="row"] { position: sticky; left: 0; background: var(--o-surface, var(--pn)); white-space: nowrap; }
.pl-compare .pl-cmp-scroll { overflow-x: auto; }
.pl-cmp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; background: var(--ac); border: 1px solid var(--o-line, var(--bd)); }
.pl-timeline { position: relative; height: 34px; margin: 10px 0 4px; }
.pl-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 2px; background: var(--o-line, var(--bd)); }
.pl-timeline i { position: absolute; top: 6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--ac); border: 2px solid var(--o-surface, var(--pn)); }
.pl-timeline span { position: absolute; top: 22px; font-size: 12px; color: var(--o-ink-muted, var(--td)); }

/* ── print ── */
#pl-print-root { display: none; }
@media print {
  body.pl-printing > *:not(#pl-print-root) { display: none !important; }
  body.pl-printing #pl-print-root { display: block !important; position: static; padding: 12mm; color: #000; background: #fff; font: 11pt/1.4 var(--ui-font); }
  body.pl-printing #pl-print-root table { width: 100%; border-collapse: collapse; }
  body.pl-printing #pl-print-root th, body.pl-printing #pl-print-root td { text-align: left; padding: 2pt 6pt; border-bottom: .5pt solid #888; }
  body.pl-printing #pl-print-root thead { display: table-header-group; }
  body.pl-printing #pl-print-root tr { break-inside: avoid; }
}

/* ── narrow / phone: two-line cards (no horizontal scroll), 44px touch targets ── */
@container pl (max-width: 560px) {
  .pl select, .pl input[type="text"], .pl input[type="search"], .pl input[type="number"], .pl .pl-btn { min-height: 44px !important; }
  .pl button.pl-btn.pl-btn { white-space: normal; min-width: 0; }
  .pl .pl-table, .pl .pl-table tbody, .pl .pl-scroll { min-width: 0 !important; max-width: 100%; }
  .pl-check { min-height: 44px; }
  .pl .pl-th { min-height: 44px !important; }
  .pl button.pl-btn.pl-btn { min-height: 44px !important; }
  .pl-guide summary { min-height: 44px; }
  .pl-field { flex: 1 1 140px; }
  .pl-field select { width: 100%; }
  .pl-seg { width: 100%; } .pl .pl-seg .pl-btn { flex: 1; }
  .pl-dual, .pl-dual input[type="range"] { height: 44px; } .pl-dual::before { top: 20px; }
  .pl-scroll { overflow-x: visible; }
  .pl-table, .pl-table tbody { display: block; width: 100%; }
  .pl-table thead { position: static; display: flex; flex-wrap: wrap; border-bottom: 2px solid var(--o-line, var(--bd)); background: var(--o-surface, var(--pn)); z-index: 3; }
  .pl-table thead tr { display: flex; flex-wrap: wrap; width: 100%; }
  .pl-table thead th { position: static; flex: 1 1 auto; border: 0; }
  .pl-uniform { display: block; margin: 4px 0; }
  .pl-chip[data-uniform] { display: none; }
  .pl-table tbody tr.pl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date arc" "pair mode"; gap: 4px 10px; padding: 8px 10px; min-height: 44px; align-items: start;
    border-bottom: 1px solid color-mix(in srgb, var(--o-line, var(--bd)) 55%, transparent); }
  .pl-table tbody tr.pl-row > td { display: block; padding: 0; border: 0; }
  .pl-table td[data-col="date"] { grid-area: date; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .pl-table td[data-col="date"] .pl-date, .pl-table td[data-col="date"] .pl-age { display: inline; }
  .pl-table td[data-col="date"] .pl-age { margin-left: 2px; }
  .pl-table td[data-col="arc"] { grid-area: arc; text-align: right; }
  .pl-table td[data-col="pair"] { grid-area: pair; }
  .pl-table td[data-col="mode"] { grid-area: mode; justify-self: end; }
  .pl-table td[data-extra] { grid-column: 1 / -1; }
  .pl-table tbody tr.pl-work { display: block; }
  .pl-table tbody tr.pl-work > td { display: block; }
  .pl-table tbody tr.pl-more { display: block; } .pl-table tbody tr.pl-more > td { display: block; }
  .pl-pop { position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; max-width: none; max-height: 70vh; }
  .pl-steps dl { grid-template-columns: 1fr; }
  .pl-steps dd { margin-bottom: 4px; }
}
@media (pointer: coarse) {
  .pl select, .pl input[type="text"], .pl input[type="search"], .pl input[type="number"], .pl-btn, .pl-check, .pl-th { min-height: 44px !important; }
}
@media (prefers-reduced-motion: reduce) { .pl[data-stale="1"] .pl-table tbody { transition: none; } }

/* the right panel's glass skin sizes every button (:is(#right-panel, body) .rp-btn.rp-sm, specificity 1,2,0): this list's own
 * controls keep their size (>= 12px text, 32px desktop / 44px narrow or coarse touch targets) */
:is(#right-panel, body) .pl button.pl-btn.pl-btn { font-size: 13px !important; min-height: 32px !important; padding: 3px 10px !important; }
:is(#right-panel, body) .pl button.pl-th.pl-th { font-size: 12px !important; padding: 4px 8px !important; min-height: 34px !important; }
@container pl (max-width: 560px) {
  :is(#right-panel, body) .pl button.pl-btn.pl-btn, :is(#right-panel, body) .pl button.pl-th.pl-th { min-height: 44px !important; }
}
@media (pointer: coarse) {
  :is(#right-panel, body) .pl button.pl-btn.pl-btn, :is(#right-panel, body) .pl button.pl-th.pl-th { min-height: 44px !important; }
}

:is(#right-panel, body) .pl .pl-guide summary, :is(#right-panel, body) .pl .pl-guide dd, :is(#right-panel, body) .pl .pl-guide dt { font-size: 13px !important; }