/* Part 1 interaction state and relationship filtering. */
#skyFoundationComparison {
  display:grid;
  grid-template-rows:auto auto auto;
  min-width:0;
}

#skyFoundationWheelMount {
  border-bottom:1px solid rgba(31,27,24,.11);
}

.sky-foundation-interactive,
.sky-foundation-focus-piece,
.sky-foundation-sign-glyph {
  transition:opacity .07s ease-out,filter .07s ease-out,stroke-width .07s ease-out;
}

.sky-foundation-interactive,
.sky-foundation-focus-piece {
  will-change:opacity,filter;
}

.sky-foundation-interactive {
  cursor:pointer;
}

.sky-foundation-interactive:focus {
  outline:none;
}

/* Give pointer/focus feedback immediately, before the relationship-preview
   controller finishes applying its broader kept/dimmed state. */
.sky-foundation-wheel:not(.has-isolation) .sky-foundation-house-sector:hover,
.sky-foundation-wheel:not(.has-isolation) .sky-foundation-house-sector:focus-visible,
.sky-foundation-wheel:not(.has-isolation) .sky-foundation-sign-sector:hover,
.sky-foundation-wheel:not(.has-isolation) .sky-foundation-sign-sector:focus-visible {
  filter:brightness(1.09) saturate(1.18) drop-shadow(0 0 3px rgba(255,255,255,.98)) drop-shadow(0 0 7px rgba(126,143,164,.56));
}

.sky-foundation-wheel:not(.has-isolation) .sky-foundation-placement:hover,
.sky-foundation-wheel:not(.has-isolation) .sky-foundation-placement:focus-visible {
  filter:brightness(1.12) saturate(1.22) drop-shadow(0 0 3px rgba(255,255,255,.98)) drop-shadow(0 0 7px rgba(126,143,164,.64));
}

.sky-foundation-wheel:not(.has-isolation) .sky-foundation-aspect:hover,
.sky-foundation-wheel:not(.has-isolation) .sky-foundation-aspect:focus-visible {
  opacity:1;
  stroke-width:4.4;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.96)) drop-shadow(0 0 5px rgba(85,98,116,.52));
}

.sky-foundation-wheel:not(.has-isolation) .sky-foundation-interactive.is-hovered,
.sky-foundation-wheel .sky-foundation-interactive.is-selected,
.sky-foundation-row.is-hovered,
.sky-foundation-row.is-selected {
  filter:drop-shadow(0 0 6px rgba(20,17,14,.38));
}

.sky-foundation-wheel.has-isolation [data-focus-piece] {
  opacity:.08;
}

.sky-foundation-wheel.has-isolation [data-focus-piece].is-kept {
  opacity:1;
}

.sky-foundation-wheel.has-isolation .sky-foundation-aspect.is-kept {
  stroke-width:4.2;
}

.sky-foundation-wheel.has-isolation .sky-foundation-house-sector.is-selected,
.sky-foundation-wheel.has-isolation .sky-foundation-sign-sector.is-selected {
  filter:saturate(1.45) brightness(1.05) drop-shadow(0 0 5px rgba(20,17,14,.28));
}

.sky-foundation-row {
  cursor:pointer;
  transition:opacity .07s ease-out,background-color .07s ease-out,filter .07s ease-out;
}

.sky-foundation-row:hover,
.sky-foundation-row:focus-visible,
.sky-foundation-row.is-selected {
  background:rgba(241,235,226,.68);
  outline:none;
}

.sky-foundation-panel.has-ledger-isolation .sky-foundation-row {
  opacity:.16;
}

.sky-foundation-panel.has-ledger-isolation .sky-foundation-row.is-kept {
  opacity:1;
}

#skyFoundationRelationships {
  min-width:0;
  background:#fffdf8;
}

.sky-foundation-relationships-heading {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto auto;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:0 10px;
  border-bottom:1px solid rgba(31,27,24,.11);
}

.sky-foundation-relationships-heading h2 {
  min-width:0;
  margin:0;
  font:800 .82rem/1.2 system-ui,sans-serif;
}

#skyFoundationRelationshipCount {
  display:grid;
  place-items:center;
  min-width:42px;
  height:25px;
  padding:0 8px;
  border-radius:999px;
  background:#f0ebe4;
  color:#3f3934;
  font:800 .69rem/1 system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  order:1;
}

.sky-foundation-relationships-heading>.sky-relationship-heading-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  min-width:0;
  order:2;
}

#skyFoundationClearIsolation {
  appearance:none;
  border:1px solid rgba(31,27,24,.2);
  border-radius:999px;
  background:#fff;
  color:#241f1b;
  padding:.4rem .68rem;
  font:800 .68rem/1 system-ui,sans-serif;
  cursor:pointer;
  order:3;
}

#skyFoundationClearIsolation[hidden] {
  display:none;
}

#skyFoundationRelationshipList {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  max-height:390px;
  overflow:auto;
  padding:8px;
}

.sky-foundation-relationship-row {
  --relationship-aspect-color:#8b837b;
  position:relative;
  display:grid;
  grid-template-columns:25px minmax(0,1fr) 25px 25px minmax(0,1fr);
  align-items:center;
  gap:5px;
  min-width:0;
  width:100%;
  overflow:hidden;
  padding:7px 8px 7px 12px;
  border:1px solid rgba(31,27,24,.13);
  border-radius:9px;
  background:#fffdfa;
  color:#191613;
  text-align:left;
  cursor:pointer;
  transition:opacity .07s ease-out,background-color .07s ease-out,border-color .07s ease-out,filter .07s ease-out;
}

.sky-foundation-relationship-row::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:var(--relationship-aspect-color);
  pointer-events:none;
}

.sky-foundation-relationship-row[data-aspect="conjunction"] { --relationship-aspect-color:#e53935; }
.sky-foundation-relationship-row[data-aspect="semi-sextile"] { --relationship-aspect-color:#7c9b49; }
.sky-foundation-relationship-row[data-aspect="octile"] { --relationship-aspect-color:#b86d43; }
.sky-foundation-relationship-row[data-aspect="sextile"] { --relationship-aspect-color:#d3b727; }
.sky-foundation-relationship-row[data-aspect="quintile"] { --relationship-aspect-color:#8b6cc2; }
.sky-foundation-relationship-row[data-aspect="square"] { --relationship-aspect-color:#d6534d; }
.sky-foundation-relationship-row[data-aspect="trine"] { --relationship-aspect-color:#4e9e69; }
.sky-foundation-relationship-row[data-aspect="tri-octile"] { --relationship-aspect-color:#9f5944; }
.sky-foundation-relationship-row[data-aspect="bi-quintile"] { --relationship-aspect-color:#7655aa; }
.sky-foundation-relationship-row[data-aspect="quincunx"] { --relationship-aspect-color:#4b8e88; }
.sky-foundation-relationship-row[data-aspect="opposition"] { --relationship-aspect-color:#5961c8; }

.sky-foundation-relationship-row:hover,
.sky-foundation-relationship-row:focus-visible,
.sky-foundation-relationship-row.is-selected {
  border-color:rgba(31,27,24,.4);
  background:#f6f0e8;
  outline:none;
}

.sky-foundation-relationship-row[hidden] {
  display:none;
}

.sky-foundation-relationship-row svg {
  display:block;
  width:25px;
  height:25px;
  overflow:visible;
}

.sky-foundation-relationship-copy {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:700 .65rem/1.2 system-ui,sans-serif;
}

.sky-foundation-relationship-copy small {
  display:block;
  color:#625a53;
  font:650 .59rem/1.2 system-ui,sans-serif;
}

#skyFoundationRelationshipEmpty {
  margin:0;
  padding:18px 12px;
  color:#6d645c;
  text-align:center;
  font:650 .75rem/1.4 system-ui,sans-serif;
}

#skyFoundationRelationshipEmpty[hidden] {
  display:none;
}

@media(prefers-reduced-motion:reduce) {
  .sky-foundation-interactive,
  .sky-foundation-focus-piece,
  .sky-foundation-sign-glyph,
  .sky-foundation-row,
  .sky-foundation-relationship-row { transition:none; }
}

@media(max-width:1120px) {
  #skyFoundationRelationshipList {
    grid-template-columns:1fr;
    max-height:360px;
  }
}

@media(max-width:900px) {
  #skyFoundationRelationshipList {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:620px) {
  .sky-foundation-relationships-heading{
    grid-template-columns:minmax(0,1fr) auto auto auto;
    gap:4px;
    padding-inline:8px;
  }
  #skyFoundationRelationshipCount{min-width:38px;padding-inline:6px}
  #skyFoundationClearIsolation{padding-inline:.55rem}
  #skyFoundationRelationshipList {
    grid-template-columns:1fr;
    max-height:420px;
  }
}