/* Specificity note: every rule is prefixed `html:not(#o)` (= one ID) so these shared controls beat the
 * app's legacy blanket rules (#header button, #sidebar button, …) wherever they are placed. */
/* Wheel cards (left panel) + mini chips — contract §3. Builds on osiris-controls.css.
 * Fits a ~300px left panel (≈260px content) and 390px phones: rows wrap, names ellipsize.
 * Ring dot colours are theme tokens by position; selection = card highlight in that colour.
 * Integrator hooks: .wc-card.is-drop-target while a library chart is dragged over a card;
 * --o-scheme:light on light themes so the native date picker matches. */
html:not(#o) :is(.wc-card,.wc-chip)[data-ring="1"]{--wc-c:var(--a2,#4fd8e8)}
html:not(#o) :is(.wc-card,.wc-chip)[data-ring="2"]{--wc-c:var(--ac,#9d8cff)}
html:not(#o) :is(.wc-card,.wc-chip)[data-ring="3"]{--wc-c:var(--a3,#74e0b4)}
html:not(#o) :is(.wc-card,.wc-chip)[data-ring="4"]{--wc-c:var(--q3,#e0a05a)}
html:not(#o) :is(.wc-card,.wc-chip)[data-ring="5"]{--wc-c:var(--q4,#c78cff)}

/* Compact cards (owner 2026-10-07): 11px body, 10px labels, 22px controls on desktop; phones keep touch-sized targets. */
html:not(#o) .wc-cards{display:flex;flex-direction:column;align-items:stretch;gap:5px;min-width:0;max-width:100%;box-sizing:border-box;
  color:var(--tx,#d6d8ea);font:500 11px/1.3 var(--o-font,system-ui,sans-serif)}
html:not(#o) .wc-cards [hidden]{display:none!important}
html:not(#o) .wc-list{display:flex;flex-direction:column;gap:5px;min-width:0}

html:not(#o) .wc-card{--wc-c:var(--a2,#4fd8e8);position:relative;box-sizing:border-box;min-width:0;padding:6px 8px 7px 10px;
  border:1px solid var(--bd,#2a2348);border-radius:9px;background:color-mix(in srgb,var(--pn,#13111f) 92%,transparent);
  cursor:pointer;transition:border-color .14s,box-shadow .14s,background-color .14s}
html:not(#o) .wc-card:hover{border-color:color-mix(in srgb,var(--wc-c) 45%,var(--bd,#2a2348))}
html:not(#o) .wc-card:focus-visible{outline:2px solid var(--a2,#4fd8e8);outline-offset:2px}
html:not(#o) .wc-card.is-selected{border-color:color-mix(in srgb,var(--wc-c) 75%,var(--bd,#2a2348));
  background:color-mix(in srgb,var(--wc-c) 7%,var(--pn,#13111f));
  box-shadow:inset 3px 0 0 var(--wc-c),0 0 0 1px color-mix(in srgb,var(--wc-c) 22%,transparent)}
/* highlight off (click the selected card again): it looks like the others */
html:not(#o) .wc-quiet .wc-card.is-selected{border-color:var(--bd,#2a2348);background:var(--pn,#13111f);box-shadow:none}
/* A library chart dragged over a card (wheel-workspace.js toggles the class under the pointer). */
html:not(#o) .wc-card.is-drop-target{border-style:dashed;border-color:var(--a2,#4fd8e8);
  background:color-mix(in srgb,var(--a2,#4fd8e8) 9%,var(--pn,#13111f));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--a2,#4fd8e8) 30%,transparent)}
/* The label of a drop (ui.slotHint): the card, the insertion line or the + Add ring pill says what the drop will do. */
html:not(#o) .wc-card[data-drop-label].is-drop-target::after{content:attr(data-drop-label);position:absolute;top:-9px;right:10px;z-index:7;
  padding:1px 8px;border-radius:9px;font-size:var(--fs-caption);font-weight:700;letter-spacing:.04em;line-height:1.5;background:var(--a2,#4fd8e8);color:var(--bg,#0e0c18);pointer-events:none}
html:not(#o) .wc-insert[data-label]::after{content:attr(data-label);position:absolute;right:0;top:-17px;padding:1px 8px;border-radius:9px;font-size:var(--fs-caption);font-weight:700;
  letter-spacing:.04em;line-height:1.5;white-space:nowrap;background:var(--a2,#4fd8e8);color:var(--bg,#0e0c18)}
html:not(#o) .wc-insert.is-full{background:var(--q3,#e0a05a);box-shadow:0 0 8px color-mix(in srgb,var(--q3,#e0a05a) 70%,transparent)}
html:not(#o) .wc-insert.is-full::after{background:var(--q3,#e0a05a)}
html:not(#o) .wc-add.is-drop-target{border-style:solid;border-color:var(--a2,#4fd8e8);background:color-mix(in srgb,var(--a2,#4fd8e8) 18%,var(--pn,#13111f));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--a2,#4fd8e8) 30%,transparent)}
html:not(#o) .wc-add.is-full{border-color:var(--q3,#e0a05a);color:var(--q3,#e0a05a)}
/* While a library chart is dragged the cards stay still: no hover lift, the pointer is the target. */
html:not(#o) .wc-cards.wc-dragging-chart .wc-card{transition:none}
/* The finger-sized ghost that follows a long-press drag from the Library (touch). */
html:not(#o) .wc-drag-ghost{position:fixed;z-index:10050;max-width:70vw;padding:7px 12px;border-radius:12px;font-size:13px;font-weight:650;line-height:1.3;
  pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--a2,#4fd8e8);color:var(--bg,#0e0c18);
  box-shadow:0 8px 24px rgba(0,0,0,.45);transform:translate(-50%,-130%)}
html:not(#o) .lib-press-armed{outline:2px solid var(--a2,#4fd8e8);outline-offset:-2px;-webkit-touch-callout:none;user-select:none}
/* Tap-to-pick (wheel-workspace.js libraryPick): ⇄ armed the Library for this card. */
html:not(#o) .wc-card.is-pick-target{border-style:dashed;border-color:var(--a2,#4fd8e8);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--a2,#4fd8e8) 30%,transparent)}
html:not(#o) .wc-card.is-pick-target [data-wc-source]{color:var(--a2,#4fd8e8);border-color:var(--a2,#4fd8e8)}
html:not(#o) .wc-pick-banner{display:flex;align-items:center;gap:8px;min-width:0;margin:0 0 8px;padding:8px 8px 8px 10px;
  border:1px solid var(--a2,#4fd8e8);border-radius:9px;background:color-mix(in srgb,var(--a2,#4fd8e8) 12%,var(--pn,#13111f));
  color:var(--tb,#eef0fb);font:600 12px/1.35 var(--o-font,system-ui,sans-serif)}
html:not(#o) .wc-pick-text{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
html:not(#o) .wc-pick-banner .wc-pick-cancel{flex:none}
html:not(#o) #sidebar.nw-picking #saved-list :is(.lib-radix-hdr,.lib-child-item){cursor:copy}
html:not(#o) #sidebar.nw-picking #saved-list :is(.lib-radix-hdr,.lib-child-item):hover{background:color-mix(in srgb,var(--a2,#4fd8e8) 10%,transparent)}
html:not(#o) #sidebar.nw-picking #lib-recents{display:none!important}
/* A preset's partner ring with no chart yet (needsSource 'B'): the card reads as a drop target. */
html:not(#o) .wc-card.is-placeholder{border-style:dashed;border-color:color-mix(in srgb,var(--wc-c) 55%,var(--bd,#2a2348));
  background:color-mix(in srgb,var(--pn,#13111f) 70%,transparent)}
html:not(#o) .wc-card.is-placeholder .wc-name{color:var(--td,#aebbd2);font-weight:600}
html:not(#o) .wc-drop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0;margin-top:7px;padding:7px 8px 7px 10px;
  border:1px dashed color-mix(in srgb,var(--wc-c) 50%,var(--bd,#2a2348));border-radius:8px;
  background:color-mix(in srgb,var(--wc-c) 6%,transparent);color:var(--tx,#d6d8ea);font-size:11.5px;font-weight:550;line-height:1.35}
html:not(#o) .wc-drop-text{flex:1 1 140px;min-width:0;overflow-wrap:anywhere}
html:not(#o) .wc-cards .wc-drop-pick{flex:none;gap:5px;margin-left:auto}
html:not(#o) .wc-drop-ic{font-size:13px;line-height:1;color:var(--a2,#4fd8e8)}
html:not(#o) .wc-card.is-drop-target .wc-drop{border-color:var(--a2,#4fd8e8);background:color-mix(in srgb,var(--a2,#4fd8e8) 14%,transparent)}

html:not(#o) .wc-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--wc-c);box-shadow:0 0 6px color-mix(in srgb,var(--wc-c) 70%,transparent)}
html:not(#o) .wc-remove:hover:not(:disabled){color:#ff8b80}

/* Card controls: one compact size (technique, place, D|C, Fix|Dynamic, Edit). */

html:not(#o) .wc-k{flex:none;font-size:var(--fs-caption);font-weight:600;color:var(--td,#aebbd2)}
/* Dates (small type): Displayed on every card, Directed on timing layers. Label column + value; the age sits at the end
 * and wraps under the date rather than clip it. */

html:not(#o) .wc-status{display:flex;align-items:center;gap:6px;min-width:0;margin-top:5px;font-size:var(--fs-caption);font-weight:550;line-height:1.3;color:var(--td,#aebbd2)}
html:not(#o) .wc-status[data-kind=loading]{color:var(--a2,#4fd8e8)}
html:not(#o) .wc-status[data-kind=error]{color:color-mix(in srgb,#ff6b5e 80%,var(--tx,#d6d8ea))}
html:not(#o) .wc-status[data-kind=unavailable]{color:var(--q3,#e0a05a)}
html:not(#o) .wc-status-text{min-width:0;overflow-wrap:anywhere}
html:not(#o) .wc-spin{flex:none;width:10px;height:10px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:wc-spin .8s linear infinite}
@keyframes wc-spin{to{transform:rotate(360deg)}}
html:not(#o) .wc-status.is-quiet{position:absolute;right:10px;bottom:8px;margin:0;padding:1px 6px;border-radius:999px;
  background:color-mix(in srgb,var(--pn,#13111f) 85%,transparent);font-size:var(--fs-caption);pointer-events:none}

html:not(#o) .wc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
html:not(#o) .wc-cards .wc-add{align-self:flex-start;gap:6px;color:var(--tx,#d6d8ea)}
html:not(#o) .wc-cards .wc-presets{gap:5px;color:var(--tx,#d6d8ea)}
html:not(#o) .wc-add-plus{font-size:15px;font-weight:500;line-height:1;color:var(--a2,#4fd8e8)}

/* Time bar: `Time [Fix|Dynamic]` (radix: `Time · Fixed at birth`) … ✎ Edit at its end. */
/* Save to Library: only on an edited (re-cast, unsaved) chart. */
/* The auto card (default biwheel's outer wheel, follows the technique in use). */

/* Drag grip + reorder */
html:not(#o) .wc-cards{position:relative}
html:not(#o) .wc-cards .wc-grip{appearance:none;-webkit-appearance:none;flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:20px;margin:0 -2px 0 -5px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--td,#aebbd2);
  font:500 14px/1 var(--o-font,system-ui,sans-serif);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;opacity:.7}
html:not(#o) .wc-cards .wc-grip:hover{opacity:1;color:var(--tb,#eef0fb);background:color-mix(in srgb,var(--tx,#d6d8ea) 9%,transparent)}
html:not(#o) .wc-cards .wc-grip:focus-visible{outline:2px solid var(--a2,#4fd8e8);outline-offset:1px;opacity:1}
html:not(#o) .wc-cards.wc-reordering,html:not(#o) .wc-cards.wc-reordering *{cursor:grabbing!important}
html:not(#o) .wc-card.is-dragging{z-index:5;transition:none;border-color:var(--wc-c);background:var(--pn,#13111f);
  box-shadow:0 10px 26px rgba(0,0,0,.38),0 0 0 1px color-mix(in srgb,var(--wc-c) 50%,transparent)}
html:not(#o) .wc-insert{position:absolute;left:2px;right:2px;height:4px;margin-top:-2px;border-radius:2px;background:var(--a2,#4fd8e8);
  box-shadow:0 0 8px color-mix(in srgb,var(--a2,#4fd8e8) 70%,transparent);pointer-events:none;z-index:6}
/* The new-ring zone under the last card (only while a card or a library chart is dragged). */
html:not(#o) .wc-newslot{display:flex;align-items:center;gap:8px;min-width:0;min-height:46px;box-sizing:border-box;padding:8px 11px;
  border:1.5px dashed color-mix(in srgb,var(--a2,#4fd8e8) 55%,var(--bd,#2a2348));border-radius:10px;
  background:color-mix(in srgb,var(--a2,#4fd8e8) 5%,transparent);color:var(--tx,#d6d8ea);font-size:12px;font-weight:600;line-height:1.3}
html:not(#o) .wc-newslot-plus{flex:none;font-size:18px;font-weight:500;line-height:1;color:var(--a2,#4fd8e8)}
html:not(#o) .wc-newslot-text{min-width:0;overflow-wrap:anywhere}
html:not(#o) .wc-newslot.is-drop-target{border-style:solid;border-color:var(--a2,#4fd8e8);background:color-mix(in srgb,var(--a2,#4fd8e8) 14%,var(--pn,#13111f));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--a2,#4fd8e8) 28%,transparent)}
html:not(#o) .wc-newslot.is-full{border-color:color-mix(in srgb,var(--q3,#e0a05a) 60%,var(--bd,#2a2348));background:color-mix(in srgb,var(--q3,#e0a05a) 7%,transparent);color:var(--q3,#e0a05a)}
html:not(#o) .wc-newslot.is-full .wc-newslot-plus{display:none}
html:not(#o) .wc-note{padding:0 2px;font-size:11px;font-weight:550;line-height:1.35;color:var(--td,#aebbd2)}

/* Inline time/place editor */
html:not(#o) .wc-ed-title{font-size:11.5px;font-weight:650;color:var(--tb,#eef0fb)}
html:not(#o) .wc-ed-f{display:flex;flex-direction:column;gap:3px;min-width:0}
html:not(#o) :is(.wc-ed-when,.wc-ed-place){width:100%;min-width:0;box-sizing:border-box;height:28px;padding:2px 8px;border:1px solid var(--bd,#2a2348);border-radius:8px;
  background:var(--sf,#0e0c1c);color:var(--tb,#eef0fb);font:500 12px/1 var(--o-font,system-ui,sans-serif);font-variant-numeric:tabular-nums;color-scheme:var(--o-scheme,dark)}
html:not(#o) :is(.wc-ed-when,.wc-ed-place):hover{border-color:var(--ac,#9d8cff)}
html:not(#o) :is(.wc-ed-when,.wc-ed-place):focus-visible{outline:2px solid var(--a2,#4fd8e8);outline-offset:1px}
html:not(#o) :is(.wc-ed-zone,.wc-ed-cur){font-size:var(--fs-caption);font-weight:550;color:var(--td,#aebbd2);overflow-wrap:anywhere}
html:not(#o) .wc-ed-cur.is-new{color:var(--a2,#4fd8e8)}
html:not(#o) .wc-ed-results{display:flex;flex-direction:column;gap:2px;max-height:180px;overflow-y:auto;overscroll-behavior:contain}
html:not(#o) .wc-ed-results:empty{display:none}
html:not(#o) .wc-cards .wc-ed-result{appearance:none;-webkit-appearance:none;display:flex;align-items:baseline;gap:6px;min-width:0;width:100%;margin:0;padding:4px 7px;
  border:1px solid transparent;border-radius:7px;background:transparent;color:var(--tx,#d6d8ea);font:500 11.5px/1.3 var(--o-font,system-ui,sans-serif);text-align:left;cursor:pointer}
html:not(#o) .wc-cards .wc-ed-result:is(:hover,:focus-visible){border-color:var(--bd,#2a2348);background:color-mix(in srgb,var(--tx,#d6d8ea) 7%,transparent);outline:none}
html:not(#o) .wc-ed-result .o-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html:not(#o) .wc-ed-result .o-hint{flex:none;font-size:var(--fs-caption);color:var(--td,#aebbd2)}
html:not(#o) .wc-ed-note{font-size:var(--fs-caption);font-weight:550;color:var(--td,#aebbd2)}
html:not(#o) .wc-ed-note[data-kind=error]{color:color-mix(in srgb,#ff6b5e 85%,var(--tx,#d6d8ea))}
html:not(#o) .wc-ed-note[data-kind=warn]{color:var(--q3,#e0a05a)}
html:not(#o) .wc-ed-note[data-kind=info]{color:var(--a2,#4fd8e8)}
html:not(#o) .wc-ed-actions{display:flex;gap:6px;justify-content:flex-end}

/* Mini chips (left panel closed) */
html:not(#o) .wc-chips{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0}
html:not(#o) .wc-chip{--o-h:26px;gap:6px;padding:2px 9px}
html:not(#o) .wc-chip .wc-dot{width:7px;height:7px}
html:not(#o) .wc-chip.is-placeholder:not([aria-pressed=true]){border-style:dashed;border-color:color-mix(in srgb,var(--wc-c) 55%,var(--bd,#2a2348))}
html:not(#o) .wc-chip-fix{margin-left:3px;font-weight:600;opacity:.75}

/* Menus opened from the cards */
html:not(#o) .wc-place-menu{width:250px}
html:not(#o) .wc-place-results{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow-y:auto;overscroll-behavior:contain}
html:not(#o) .wc-place-results:empty{display:none}
html:not(#o) .wc-preset-menu{width:268px}
html:not(#o) .wc-preset-menu .o-menu-heading{padding-top:5px}
html:not(#o) .wc-preset-menu .o-menu-item.wc-preset-item{flex-direction:column;align-items:flex-start;gap:2px;white-space:normal;padding:5px 11px 6px}
html:not(#o) .wc-preset-menu .wc-preset-item>.o-label{flex:none;max-width:100%}
html:not(#o) .wc-preset-menu .wc-preset-item>.o-hint{flex:none;max-width:100%;white-space:normal;line-height:1.3}
html:not(#o) .wc-preset-menu .wc-ring{white-space:nowrap}
html:not(#o) .wc-preset-row{display:flex;align-items:stretch;gap:4px;min-width:0}
html:not(#o) .wc-preset-menu .wc-preset-row>.wc-preset-item{flex:1 1 auto;width:auto;min-width:0}
html:not(#o) .wc-preset-menu .wc-preset-del{align-self:center;flex:none;font-size:14px;font-weight:500}
html:not(#o) .wc-preset-menu .wc-preset-del.is-armed{padding:2px 9px;font-size:11px;font-weight:700;
  border-color:color-mix(in srgb,#ff6b5e 70%,var(--bd,#2a2348));color:#ff8b80;background:color-mix(in srgb,#ff6b5e 14%,var(--pn,#13111f))}
html:not(#o) .wc-preset-menu .wc-preset-del.is-armed:hover{border-color:#ff6b5e;color:#ffb0a8}
html:not(#o) .wc-preset-note[data-kind=error]{color:color-mix(in srgb,#ff6b5e 85%,var(--tx,#d6d8ea))}
html:not(#o) .wc-preset-note[data-kind=warn]{color:var(--q3,#e0a05a)}

@media (max-width:700px){
  html:not(#o) .wc-card{padding:8px 10px 9px 12px}
  html:not(#o) .wc-cards .wc-grip{width:26px;height:30px;font-size:17px}
  html:not(#o) :is(.wc-ed-when,.wc-ed-place){height:34px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  html:not(#o) .wc-card{transition:none}
  html:not(#o) .wc-spin{animation:none;border-right-color:currentColor;opacity:.6}
}
/* Card roles (card-roles.js): ◉ Focus / Pinned tags on the card head */
/* Transits > Lunations / Eclipses (wheel-moment-lists.js): the row nearest the clock */
html:not(#o) .wc-moment-list .o-menu-item[aria-current=true]{border-color:var(--a2,#4fd8e8);box-shadow:inset 3px 0 0 var(--a2,#4fd8e8)}

/* ── Subsidiary charts (docs/plans/subsidiary-charts.md) ── */
/* rings 6-9 (any number of cards; at most five rings on) */
html:not(#o) :is(.wc-card,.wc-chip)[data-ring="6"]{--wc-c:var(--a2,#4fd8e8)}
html:not(#o) :is(.wc-card,.wc-chip)[data-ring="7"]{--wc-c:var(--ac,#9d8cff)}
html:not(#o) :is(.wc-card,.wc-chip)[data-ring="8"]{--wc-c:var(--a3,#74e0b4)}
html:not(#o) :is(.wc-card,.wc-chip)[data-ring="9"]{--wc-c:var(--q3,#e0a05a)}
/* static / dynamic colour coding (q18): static = amber, dynamic = cyan */
html:not(#o) .wc-card{--wc-static:var(--q3,#e0a05a);--wc-dynamic:var(--a2,#4fd8e8)}
html:not(#o) .wc-card.is-sub[data-motion="static"]{border-top:2px solid color-mix(in srgb,var(--wc-static) 70%,var(--bd,#2a2348))}
html:not(#o) .wc-card.is-sub[data-motion="dynamic"]{border-top:2px solid color-mix(in srgb,var(--wc-dynamic) 70%,var(--bd,#2a2348))}
/* left rail (q36 / q29): ring on / off, focus-pair mark */
html:not(#o) .wc-card.is-ring-off{opacity:.62}
html:not(#o) .wc-card.is-ring-off:hover{opacity:.9}
/* the subsidiary's own moment (q15) with Prev / Next (q21) */
/* wheel options under the cards: house cusps radix / subsidiary (q28), ring highlighting (q31) */
html:not(#o) .wc-viewopts{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:var(--fs-caption)}
html:not(#o) .wc-viewopts .wc-k{margin-right:4px;color:var(--td,#aebbd2)}
/* the "From this chart" menu: search, favourites / recent, the star, year lists */
html:not(#o) .wc-sub-menu{min-width:240px}
html:not(#o) .wc-sub-menu .wc-sub-search{margin:2px 2px 6px;width:calc(100% - 4px)}
html:not(#o) .wc-sub-menu .o-menu-item{position:relative;padding-right:22px}
html:not(#o) .wc-sub-fav{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:11px;line-height:1;color:var(--td,#aebbd2);opacity:.55;cursor:pointer}
html:not(#o) .wc-sub-fav:hover,html:not(#o) .wc-sub-fav.is-on{opacity:1;color:var(--ac,#c9aa6f)}
html:not(#o) .wc-sub-path{margin-left:6px;font-size:var(--fs-caption);color:var(--td,#aebbd2);opacity:.8}
html:not(#o) .wc-year-list .wc-year{font-weight:700;letter-spacing:.03em}
html:not(#o) .wc-year-list .wc-year[aria-expanded="true"]{color:var(--a2,#4fd8e8)}
html:not(#o) .wc-year-rows{display:flex;flex-direction:column;gap:1px;padding-left:8px}

/* ── Card simplification (owner 2026-10-12, docs/plans/subsidiary-charts.md §10): one line per card ──
 *   radix       ring · Name · date time · place      [+ Chart] [more]
 *   subsidiary  ring · Kind · moment                 [prev][next] [more]      indented under its radix
 * Focus = click the card: the focused card wears a clear outline in its ring colour. */
html:not(#o) .wc-editor{display:flex;flex-direction:column;gap:6px;min-width:0;margin-top:8px;padding:8px 9px 9px;cursor:default;
  border:1px solid color-mix(in srgb,var(--wc-c) 45%,var(--bd,#2a2348));border-radius:9px;background:color-mix(in srgb,var(--sf,#0e0c1c) 70%,transparent)}
html:not(#o) .wc-card{padding:5px 6px 5px 7px}
html:not(#o) .wc-head{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;min-width:0;min-height:22px}
html:not(#o) .wc-title{flex:1 1 auto;min-width:0;font-size:11px;line-height:1.3;color:var(--td,#aebbd2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
html:not(#o) .wc-title .wc-name{font-size:12px;font-weight:650;color:var(--tb,#eef0fb);letter-spacing:-.005em}
html:not(#o) .wc-title .wc-sep{color:var(--td,#aebbd2);opacity:.7}
/* Long chart / place names (owner 2026-10-19): the name and the place each keep to one line and ellipsize (the full text is the
 * card's title tip), so a 5-card stack with long names stays the same height and the subsidiary cards line up. */
html:not(#o) .wc-title :is(.wc-name,.wc-where){display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
html:not(#o) .wc-title .wc-sky{color:var(--tx,#d6d8ea);font-weight:550}
html:not(#o) .wc-title .wc-follow{white-space:nowrap}
/* A card's own zodiac (zodiac-everywhere P4): a small frame chip, only on a card that differs from the default frame. */
html:not(#o) .wc-title .wc-zchip{display:inline-block;margin-left:6px;padding:0 5px;border:1px solid var(--a2,var(--ac));border-radius:8px;
  font-size:var(--fs-caption);line-height:14px;letter-spacing:.02em;color:var(--a2,var(--ac));white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis;vertical-align:1px}
html:not(#o) .wc-tools{flex:none;display:inline-flex;align-items:center;gap:2px;margin-left:auto}
html:not(#o) .wc-cards .wc-tools .o-pill{--o-h:22px;font-size:11px}
html:not(#o) .wc-cards .wc-more{font-size:14px;font-weight:600;line-height:1}
/* ◀ ▶ (card face and toolbar): one SVG each way in an identical 22px square, so both are exactly the same size */
html:not(#o) .wc-cards .wc-step,html:not(#o) .wc-cards .wc-clear,html:not(#o) .wc-cards .wc-remove-x,html:not(#o) .wc-cards .wc-tb .wc-tb-pill.o-pill--icon,html:not(#o) .wc-cards .wc-tb .wc-tb-pill[data-wc-tb="prev"],html:not(#o) .wc-cards .wc-tb .wc-tb-pill[data-wc-tb="next"]{
  box-sizing:border-box;width:22px;min-width:22px;max-width:22px;height:22px;min-height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center}
html:not(#o) .wc-cards .wc-ico{display:block;width:14px;height:14px;flex:none;overflow:visible}
html:not(#o) .wc-cards .wc-tb-pill .wc-tb-ic{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;line-height:1}
html:not(#o) .wc-cards .wc-grip .wc-ico{width:14px;height:14px}
html:not(#o) .wc-cards .wc-remove-x:hover{color:var(--bad,#ff6b5e);border-color:var(--bad,#ff6b5e)}
html:not(#o) .wc-cards .wc-clear:hover{color:var(--bad,#ff6b5e);border-color:var(--bad,#ff6b5e)}
html:not(#o) .wc-cards .wc-sub-btn{gap:3px;padding:1px 8px;white-space:nowrap;color:var(--tb,#eef0fb);
  border-color:color-mix(in srgb,var(--a2,#4fd8e8) 45%,var(--bd,#2a2348))}
html:not(#o) .wc-cards .wc-sub-btn .o-caret{font-size:var(--fs-caption);opacity:.8}
/* ring toggle: filled = the ring is on the wheel */
html:not(#o) .wc-cards .wc-ring-toggle{all:unset;box-sizing:border-box;flex:none;display:block;width:13px;height:13px;border-radius:50%;cursor:pointer;
  border:1.5px solid color-mix(in srgb,var(--wc-c) 75%,var(--bd,#2a2348));background:transparent;box-shadow:inset 0 0 0 2px var(--pn,#13111f)}
html:not(#o) .wc-cards .wc-ring-toggle[aria-pressed="true"]{background:var(--wc-c)}
html:not(#o) .wc-cards .wc-ring-toggle:focus-visible{outline:2px solid var(--a2,#4fd8e8);outline-offset:2px}
/* the grip shows on hover / keyboard focus only (drag to reorder stays) */
html:not(#o) .wc-cards .wc-grip{width:10px;margin:0 -4px 0 -4px;opacity:0;transition:opacity .12s}
html:not(#o) .wc-card:is(:hover,:focus-within) .wc-grip,html:not(#o) .wc-cards .wc-grip:focus-visible{opacity:.7}
/* subsidiaries hang under their radix */
html:not(#o) .wc-card.is-sub{margin-left:14px}
html:not(#o) .wc-card.is-sub[data-parent="nested"]{margin-left:26px}
html:not(#o) .wc-card.is-sub::before{content:"";position:absolute;left:-9px;top:-6px;width:7px;height:calc(50% + 6px);pointer-events:none;
  border-left:1px solid var(--bd,#2a2348);border-bottom:1px solid var(--bd,#2a2348);border-bottom-left-radius:4px}
html:not(#o) .wc-card.is-sub[data-motion="static"]{border-top-width:1px;border-left:2px solid color-mix(in srgb,var(--wc-static) 70%,var(--bd,#2a2348))}
html:not(#o) .wc-card.is-sub[data-motion="dynamic"]{border-top-width:1px;border-left:2px solid color-mix(in srgb,var(--wc-dynamic) 70%,var(--bd,#2a2348))}
html:not(#o) .wc-card.is-sub .wc-title .wc-name{font-weight:600}
/* focus: one clear outline */
html:not(#o) .wc-card.is-focus{outline:2px solid var(--wc-c);outline-offset:1px;border-color:color-mix(in srgb,var(--wc-c) 60%,var(--bd,#2a2348))}
html:not(#o) .wc-quiet .wc-card.is-focus{outline:none}
html:not(#o) .wc-card.is-selected{box-shadow:none}
/* aspect pair: a thin mark at the right edge; the card picked first wears a dashed outline until the second is clicked */
html:not(#o) .wc-card.is-pair{background-image:linear-gradient(to left,color-mix(in srgb,var(--ac,#c9aa6f) 55%,transparent) 0 2px,transparent 2px)}
html:not(#o) .wc-card.is-pair-pick{outline:2px dashed var(--ac,#c9aa6f);outline-offset:1px}
html:not(#o) .wc-more-menu{min-width:210px}
html:not(#o) .wc-more-menu .wc-act-remove{color:var(--bad,#ff8b80)}
@media (max-width:700px){
  html:not(#o) .wc-card{padding:7px 8px 7px 9px}
  html:not(#o) .wc-cards .wc-tools .o-pill{--o-h:30px}
  html:not(#o) .wc-cards .wc-ring-toggle{width:18px;height:18px}
  html:not(#o) .wc-cards .wc-grip{width:22px;height:30px;opacity:.7}
}

/* ── Card stack toolbar + drag (owner 2026-10-12, docs/plans/card-stack-toolbar.md) ──
 *   [ Kind · Radix ]  ◀ ▶ · Hold · Pin · Make base · Place · Cusps · Save · Change · + Chart · ✕ · ⋯
 * One toolbar above the stack acts on the selected card; cards carry only grip · ring toggle · text · ◀ ▶.
 * Labels fold to icons when the stack is narrow (container query: no JS measuring). */
html:not(#o) .wc-cards{container-type:inline-size;container-name:wc-stack}
html:not(#o) .wc-tb{--wc-c:var(--a2,#4fd8e8);display:flex;flex-wrap:nowrap;align-items:center;gap:3px 6px;min-width:0;padding:4px 5px 5px 7px;
  border:1px solid color-mix(in srgb,var(--wc-c) 35%,var(--bd,#2a2348));border-radius:9px;
  background:color-mix(in srgb,var(--wc-c) 5%,var(--pn,#13111f))}
html:not(#o) .wc-tb[data-ring="1"],html:not(#o) .wc-tb[data-ring="6"]{--wc-c:var(--a2,#4fd8e8)}
html:not(#o) .wc-tb[data-ring="2"],html:not(#o) .wc-tb[data-ring="7"]{--wc-c:var(--ac,#9d8cff)}
html:not(#o) .wc-tb[data-ring="3"],html:not(#o) .wc-tb[data-ring="8"]{--wc-c:var(--a3,#74e0b4)}
html:not(#o) .wc-tb[data-ring="4"],html:not(#o) .wc-tb[data-ring="9"]{--wc-c:var(--q3,#e0a05a)}
html:not(#o) .wc-tb[data-ring="5"]{--wc-c:var(--q4,#c78cff)}
/* ONE line (owner 2026-10-12: "Transits, then the buttons wrap onto a lower line"): the title takes what the pills leave
 * (ellipsis, at least ~4.5em; the full title on hover) and the pills never wrap - when even the icons do not fit they scroll
 * sideways inside the bar (no scrollbar; wheel / swipe / keyboard focus reach them) and ⋯ always holds the full list. */
html:not(#o) .wc-tb-title{flex:1 1 auto;min-width:4.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11.5px;font-weight:650;color:var(--tb,#eef0fb);box-shadow:inset 3px 0 0 var(--wc-c);padding-left:7px;margin-left:-2px}
html:not(#o) .wc-tb-pills{display:flex;flex-wrap:nowrap;flex:0 1 auto;align-items:center;gap:3px;min-width:0;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;overscroll-behavior-x:contain}
html:not(#o) .wc-tb-pills::-webkit-scrollbar{display:none}
html:not(#o) .wc-cards .wc-tb .wc-tb-pill{flex:none}
/* ⋯ (the full action list) stays in view at the right end while the pills scroll under it */
html:not(#o) .wc-cards .wc-tb .wc-tb-pills [data-wc-more]{position:sticky;right:0;z-index:1;background:var(--pn,#13111f);box-shadow:-6px 0 6px -2px var(--pn,#13111f)}
html:not(#o) .wc-cards .wc-tb .wc-tb-pill{--o-h:22px;gap:4px;padding:1px 7px;font-size:var(--fs-caption);white-space:nowrap}
html:not(#o) .wc-cards .wc-tb .wc-tb-pill.o-pill--icon{padding:1px 5px;min-width:22px;justify-content:center}
html:not(#o) .wc-tb-ic{font-size:11px;line-height:1;opacity:.9}
html:not(#o) .wc-cards .wc-tb .wc-tb-pill[aria-pressed="true"]{border-color:var(--wc-c);color:var(--tb,#eef0fb);
  background:color-mix(in srgb,var(--wc-c) 22%,var(--pn,#13111f))}
html:not(#o) .wc-cards .wc-tb .wc-tb-remove:hover:not(:disabled){color:var(--bad,#ff8b80);border-color:color-mix(in srgb,#ff6b5e 60%,var(--bd,#2a2348))}
@container wc-stack (max-width:380px){
  html:not(#o) .wc-tb .wc-tb-label{display:none}
  html:not(#o) .wc-cards .wc-tb .wc-tb-pill{padding:1px 4px;min-width:21px;justify-content:center}
  html:not(#o) .wc-tb-pills{gap:2px}
  html:not(#o) .wc-tb{gap:5px;padding-right:4px}
}
/* ONE top row (owner 2026-10-12: "the row that names both charts with all the buttons, then below it the named radix tab ...
 * top 2 need to merge into one"): the toolbar docks in the radix card's head (wheel-cards.js dockToolbar), floated right on
 * the radix's first line; the name ellipsizes in the room left (--wc-tb-w, the bar's width); date and place flow on after
 * it and wrap under the buttons. The bar's own title (it repeated the chart names) is hidden; its pills still act on the
 * selected card (outlined in the stack). */
html:not(#o) .wc-card.has-tb>.wc-head{--wc-tb-h:22px;--wc-lead:27px;display:block;min-height:0}
html:not(#o) .wc-card.has-tb>.wc-head::before{content:"";display:inline-block;width:0;height:var(--wc-tb-h);vertical-align:middle}
html:not(#o) .wc-cards .wc-tb.is-docked{float:right;margin:0 0 0 6px;padding:0;border:0;border-radius:0;background:none;
  max-width:calc(100% - var(--wc-lead) - 9px - clamp(4.5em,var(--wc-name-w,5.5em),9em))}
html:not(#o) .wc-tb.is-docked .wc-tb-title{display:none}
html:not(#o) .wc-card.has-tb>.wc-head>.wc-grip{vertical-align:middle;margin:0 2px 0 -4px}
html:not(#o) .wc-card.has-tb>.wc-head>.wc-ring-toggle,html:not(#o) .wc-card.has-tb>.wc-head>.wc-dot{display:inline-block;vertical-align:middle;margin-right:6px}
html:not(#o) .wc-card.has-tb>.wc-head>.wc-title{display:inline}
html:not(#o) .wc-card.has-tb>.wc-head>.wc-title .wc-name{display:inline-block;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:calc(100% - var(--wc-tb-w,0px) - var(--wc-lead) - 7px)}
/* date and place start the radix card's second line, under the name and the buttons (no leading separator) */
html:not(#o) .wc-card.has-tb>.wc-head>.wc-title>.wc-name+.wc-sep{display:block;height:0;overflow:hidden}
/* which card the buttons act on: the selected card's ring colour down their left edge (its name is on the bar's hover title) */
html:not(#o) .wc-cards .wc-tb.is-docked .wc-tb-pills{box-shadow:inset 2px 0 0 var(--wc-c);padding-left:6px}
html:not(#o) .wc-card.has-tb>.wc-head>.wc-tools{float:right;display:inline-flex;gap:3px;margin-left:4px}
/* Clear all is on the docked bar: the radix face's own clear button would be a second copy on the same row */
html:not(#o) .wc-card.has-tb:has(.wc-tb.is-docked [data-wc-tb="clearsubs"])>.wc-head>.wc-tools .wc-clear{display:none}
@media (max-width:700px){
  html:not(#o) .wc-card.has-tb>.wc-head{--wc-tb-h:30px;--wc-lead:46px}
}
/* drop zones while a card is dragged (card-stack-dnd.js): swap / nest / refused labels; off the stack = remove */
html:not(#o) .wc-card.is-drop-nest{border-style:solid;border-width:2px;border-color:var(--a3,#74e0b4);background:color-mix(in srgb,var(--a3,#74e0b4) 16%,var(--pn,#13111f));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--a3,#74e0b4) 32%,transparent),0 0 14px color-mix(in srgb,var(--a3,#74e0b4) 55%,transparent)}
/* a radix a dragged subsidiary can snap to: dashed magnet outline (its drop zone reaches 14px past it) */
html:not(#o) .wc-card.is-snap-target:not(.is-drop-nest){outline:2px dashed color-mix(in srgb,var(--a3,#74e0b4) 70%,transparent);outline-offset:5px}
html:not(#o) .wc-card.is-drop-nest[data-drop-label].is-drop-target::after{background:var(--a3,#74e0b4)}
html:not(#o) .wc-card.is-refused{border-color:var(--q3,#e0a05a);box-shadow:0 0 0 2px color-mix(in srgb,var(--q3,#e0a05a) 30%,transparent)}
html:not(#o) .wc-card.is-refused[data-drop-label].is-drop-target::after{background:var(--q3,#e0a05a)}
html:not(#o) .wc-card.is-dragging{will-change:transform;cursor:grabbing}
html:not(#o) .wc-card.is-dragging.is-removing{opacity:.55;border-color:var(--bad,#ff6b5e);box-shadow:0 10px 26px rgba(0,0,0,.38),0 0 0 2px color-mix(in srgb,#ff6b5e 55%,transparent)}
html:not(#o) .wc-card.is-dragging[data-drag-label]::after{content:attr(data-drag-label);position:absolute;top:-9px;right:10px;z-index:7;padding:1px 8px;border-radius:9px;
  font-size:var(--fs-caption);font-weight:700;letter-spacing:.04em;line-height:1.5;background:var(--bad,#ff6b5e);color:var(--bg,#0e0c18);pointer-events:none}
html:not(#o) .wc-card.is-dragging.is-refused[data-drag-label]::after{background:var(--q3,#e0a05a)}
/* Remove's 5 s Undo toast */
html:not(#o) .wc-note.is-toast{display:flex;align-items:center;gap:8px;padding:4px 5px 4px 9px;border:1px solid var(--bd,#2a2348);border-radius:9px;
  background:color-mix(in srgb,var(--pn,#13111f) 94%,transparent);color:var(--tx,#d6d8ea)}
html:not(#o) .wc-note.is-toast .wc-note-text{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
html:not(#o) .wc-cards .wc-undo{--o-h:22px;flex:none;color:var(--a2,#4fd8e8);border-color:color-mix(in srgb,var(--a2,#4fd8e8) 50%,var(--bd,#2a2348))}
/* the grip is always on the face (drag = arrange; card-stack-toolbar.md §1) */
html:not(#o) .wc-cards .wc-grip{opacity:.7}
html:not(#o) .wc-cards .wc-grip:hover{opacity:1}
@media (prefers-reduced-motion:no-preference){
  html:not(#o) .wc-card.is-drop-target,html:not(#o) .wc-card.is-refused{transition:border-color .12s,box-shadow .12s}
}
@media (max-width:700px){
  html:not(#o) .wc-cards .wc-tb .wc-tb-pill{--o-h:30px;min-width:30px}
  html:not(#o) .wc-cards .wc-step,html:not(#o) .wc-cards .wc-clear,html:not(#o) .wc-cards .wc-remove-x,html:not(#o) .wc-cards .wc-tb .wc-tb-pill.o-pill--icon{width:30px;min-width:30px;max-width:30px;height:30px;min-height:30px}
}