/* The kindred constellation belongs to the same quiet blue profile surface. */
.kindred-map { position: relative; margin-top: 1.25rem; }
.kindred-map__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.kindred-map__head h2 { margin: 0; color: var(--blue-thread); font: .75rem/1.5 Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.kindred-map__scope { color: #93adbf; font: .75rem/1.5 Arial, sans-serif; }
/* An object, not a card: no box, fill, caption or controls. The sphere itself answers the pointer (kindred.js). */
.kindred-map__open { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; color: var(--blue-light); cursor: pointer; }
.kindred-map__canvas { display: block; width: 100%; height: clamp(13rem, 19vw, 17.5rem); }
.kindred-map button:focus-visible, .kindred-focus :is(button, a, canvas):focus-visible { outline: 2px solid #a7d3ee; outline-offset: 4px; }
.kindred-map .kindred-map__open:focus-visible { outline: none; }
.kindred-map__empty { position: absolute; top: 44%; left: 10%; right: 10%; color: #bbcfdd; font: italic 1rem/1.6 Georgia, serif; text-align: center; }
.is-kindred-focusing { overflow: hidden; }
/* Lines from your sphere to your kindreds' posts (kindred.js). Clicks pass through. */
.kindred-threads { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.kindred-focus { width: min(76rem, calc(100% - 3rem)); max-width: none; max-height: calc(100svh - 3rem); padding: 0; border: 1px solid rgb(138 186 213 / 25%); border-radius: 1.25rem; background: radial-gradient(ellipse at 35% 35%, #102d46, #061627 68%); color: var(--text-primary); box-shadow: 0 40px 140px #020914; overflow: auto; overscroll-behavior: contain; }
.kindred-focus::backdrop { background: rgb(2 9 19 / 78%); backdrop-filter: blur(18px); }
.kindred-focus[open] { animation: kindred-arrive 260ms ease both; }
.kindred-focus__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 1.7rem 2rem 1.25rem; border-bottom: 1px solid var(--border-quiet); }
.kindred-focus__eyebrow { margin: 0 0 .5rem; color: var(--blue-thread); font: .75rem/1.4 Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.kindred-focus__title { margin: 0; color: #dbe9f3; font: 400 clamp(1.6rem, 3vw, 2.2rem)/1.2 Georgia, serif; }
.kindred-focus__subtitle { margin: .65rem 0 0; color: #9fb8ca; font: .875rem/1.5 Arial, sans-serif; }
.kindred-focus__close { flex: 0 0 auto; }
.kindred-focus__body { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; }
.kindred-focus__space { position: relative; min-width: 0; display: flex; flex-direction: column; }
.kindred-focus__canvas { display: block; width: 100%; height: min(55svh, 36rem); min-height: 18rem; touch-action: none; cursor: grab; }
.kindred-focus__canvas:active { cursor: grabbing; }
.kindred-focus__aside { padding: 1.6rem 1.5rem; border-left: 1px solid var(--border-quiet); background: rgb(3 11 23 / 22%); font-family: Arial, sans-serif; }
.kindred-focus__aside h3 { margin: 0 0 1rem; color: #99b9ce; font: .75rem/1.5 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.kindred-focus__list { display: grid; gap: .4rem; padding: 0; margin: 0; list-style: none; }
.kindred-person { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3rem; padding: .55rem .65rem; border: 1px solid transparent; border-radius: .65rem; background: none; color: #bccfdd; font: .875rem/1.5 Arial, sans-serif; text-align: left; cursor: pointer; }
.kindred-person:hover { background: rgb(138 186 213 / 7%); }
.kindred-person[aria-pressed="true"] { border-color: #6795b3; background: rgb(68 113 145 / 18%); color: #e1eff8; }
.kindred-person__avatar { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border: 1px solid rgb(138 186 213 / 25%); border-radius: 50%; background: #17364e; color: #c9e1ef; font: italic .875rem Georgia, serif; }
.kindred-focus__detail { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-quiet); color: #aac1d2; font: .875rem/1.65 Arial, sans-serif; }
.kindred-focus__detail h4 { margin: 0 0 .35rem; color: #d4e6f1; font: 1.3rem/1.3 Georgia, serif; }
.kindred-focus__detail p { margin: .5rem 0; }
.kindred-focus__detail a { display: inline-block; min-height: 2.75rem; padding-top: .75rem; color: #c4e1f4; text-underline-offset: 4px; }
.kindred-focus__footer { padding: 1rem 2rem; border-top: 1px solid var(--border-quiet); color: #92adbf; font: .8125rem/1.6 Arial, sans-serif; }
.kindred-focus__footer p { margin: 0; }
/* Consent for apps inside Wyrd that ask to bring your kindred (kindred.js). */
.kindred-consent { width: min(26rem, calc(100% - 2rem)); padding: 1.75rem 1.75rem 1.4rem; border: 1px solid rgb(138 186 213 / 25%); border-radius: 1.1rem; background: radial-gradient(ellipse at 30% 0%, #10304a, #061627 70%); box-shadow: 0 30px 80px rgb(2 9 19 / 60%); color: var(--blue-light); font-family: Arial, sans-serif; }
.kindred-consent::backdrop { background: rgb(2 9 19 / 70%); backdrop-filter: blur(10px); }
.kindred-consent[open] { animation: kindred-arrive 260ms ease both; }
.kindred-consent__eyebrow { margin: 0 0 0.6rem; color: var(--blue-thread); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; }
.kindred-consent__title { margin: 0; color: #e3eef5; font: italic 400 1.45rem/1.3 Georgia, serif; }
.kindred-consent__text { margin: 0.8rem 0 0; color: #9fb8ca; font-size: 0.875rem; line-height: 1.65; }
.kindred-consent__buttons { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin-top: 1.4rem; }
.kindred-consent .kindred-consent__yes { width: 100%; margin: 0; }
.kindred-consent__no { min-height: 2.75rem; padding: 0 0.75rem; border: 0; background: none; color: #a6c9df; cursor: pointer; font: 0.8125rem Arial, sans-serif; text-underline-offset: 0.3em; }
.kindred-consent__no:hover { color: #e0eef7; text-decoration: underline; }
.kindred-consent button:focus-visible { outline: 1px solid var(--blue-thread); outline-offset: 3px; }
.kindred-consent__foot { margin: 0.6rem 0 0; color: #6f879a; font-size: 0.6875rem; text-align: center; }
@keyframes kindred-arrive { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  .kindred-focus { width: calc(100% - 1rem); max-height: calc(100svh - 1rem); border-radius: 1rem; }
  .kindred-focus__header { padding: 1.25rem; }
  .kindred-focus__body { grid-template-columns: 1fr; }
  .kindred-focus__canvas { height: 42svh; min-height: 16rem; }
  .kindred-focus__aside { padding: 1.25rem; border-left: 0; border-top: 1px solid var(--border-quiet); }
  .kindred-focus__list { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
  .kindred-focus__footer { padding: 1rem 1.25rem; }
  .kindred-map__canvas { height: 16rem; }
}
@media (prefers-reduced-motion: reduce) { .kindred-focus[open], .kindred-consent[open] { animation: none; } }