/* My Constellation — styles for bible/constellation.js (web My Study).
   Everything is scoped under .gcs so it never touches the reader. */
.gcs [hidden]{display:none!important}
.gcs *{box-sizing:border-box}
.gcs :focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* head: the reader's own My Study row, three actions that wrap on a phone */
.gcs .myStudyHead{flex-wrap:wrap}
.gcs-btns{display:inline-flex;gap:8px;flex-wrap:wrap}
.gcs .studyBtn{width:auto;padding:7px 15px}
.gcs .gcs-3dbtn{color:var(--gold);border-color:var(--hairline);background:rgba(232,184,115,.08)}
.gcs .gcs-3dbtn[aria-pressed="true"]{background:rgba(232,184,115,.18)}
.gcs-caption{font-family:var(--font-display);color:var(--gold);font-size:12.5px;letter-spacing:.14em;margin:10px 2px 16px;text-transform:uppercase}

/* the sky fills its column — beside the book rail and the study panel
   on a desktop, the whole width on a phone */
.gcs-stage{width:100%}

/* filters and constellations */
.gcs-bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin:0 0 12px}
.gcs-seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line-faint);border-radius:999px;padding:3px;background:var(--glass-soft)}
.gcs-seg button{border:0;background:transparent;color:var(--faint);font:500 12.5px var(--font-body);padding:6px 12px;border-radius:999px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.gcs-seg button b{font-weight:500;color:rgba(142,153,194,.7);font-variant-numeric:tabular-nums}
.gcs-seg button[aria-pressed="true"]{background:rgba(232,184,115,.14);color:var(--gold)}
.gcs-seg button[aria-pressed="true"] b{color:var(--gold)}
.gcs-stacks{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gcs-stacks .lbl{font:600 10px var(--font-body);letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-right:2px}
.gcs-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--hairline);background:rgba(232,184,115,.05);color:var(--starlight);
  font:500 12.5px var(--font-body);padding:6px 13px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.gcs-chip i{font-style:normal;color:var(--gold)}
.gcs-chip b{font-weight:500;color:var(--faint);font-variant-numeric:tabular-nums}
.gcs-chip:hover{background:rgba(232,184,115,.1)}
.gcs-chip[aria-pressed="true"]{background:rgba(232,184,115,.2);color:#FFF3DC}

/* the sky */
.gcs-wrap{position:relative;border:1px solid var(--hairline);border-radius:20px;overflow:hidden;background:#04060F;
  box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.02)}
/* wide, whatever the column: 16:10, never shorter than 420px or taller than the screen allows */
.gcs-wrap canvas{display:block;width:100%;height:auto;aspect-ratio:16/10;min-height:420px;max-height:min(680px,72vh);cursor:crosshair;touch-action:pan-y}
.gcs-wrap canvas.onStar{cursor:pointer}
.gcs-wrap canvas.panning{cursor:grabbing}
.gcs-wrap.is3d canvas{cursor:grab}
.gcs-wrap.is3d canvas.onStar{cursor:pointer}
.gcs-wrap.is3d canvas.panning{cursor:grabbing}
@media (max-width:560px){.gcs-wrap canvas{aspect-ratio:auto;height:520px;min-height:0;max-height:none}}
.gcs-zoom{position:absolute;right:12px;top:12px;z-index:2;display:flex;flex-direction:column;gap:6px}
.gcs-zoom button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-faint);background:rgba(10,15,34,.72);color:var(--starlight);
  font:400 17px/1 var(--font-body);cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.gcs-zoom button:hover{border-color:var(--hairline);color:var(--gold)}
.gcs-zoom .gcs-b3d{font:600 11px var(--font-body);letter-spacing:.06em;color:var(--gold);border-color:var(--hairline)}
.gcs-zoom .gcs-b3d[aria-pressed="true"]{background:rgba(232,184,115,.18)}
.gcs-hint{position:absolute;left:14px;bottom:12px;right:60px;z-index:2;font-size:11.5px;color:rgba(142,153,194,.75);pointer-events:none;transition:color .3s}
.gcs-hint.flash{color:var(--gold)}
.gcs-tip{position:absolute;z-index:2;pointer-events:none;font:500 11px var(--font-body);letter-spacing:.06em;color:var(--starlight);
  background:rgba(10,15,34,.82);border:1px solid var(--line-faint);border-radius:999px;padding:4px 10px;white-space:nowrap;transform:translate(-50%,-150%)}
.gcs-tip em{font-style:normal;color:var(--faint);margin-left:6px}

/* the star's card */
.gcs-card{position:absolute;z-index:3;width:min(310px,calc(100% - 24px));padding:15px 16px 14px;border-radius:14px;
  background:rgba(10,15,34,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--hairline);
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.gcs-card .top{display:flex;align-items:center;gap:10px}
.gcs-card .ref{font-family:var(--font-display);font-weight:600;letter-spacing:.12em;color:var(--gold);font-size:13.5px;text-transform:uppercase}
.gcs-card .ver{font:600 9px var(--font-body);letter-spacing:.18em;color:var(--faint);border:1px solid var(--line-faint);border-radius:5px;padding:1px 5px}
.gcs-card .x{margin-left:auto;border:0;background:transparent;color:var(--faint);font-size:18px;line-height:1;cursor:pointer;padding:2px 4px}
.gcs-card .kinds{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.gcs-card .kind{font:500 10.5px var(--font-body);letter-spacing:.06em;color:var(--faint);display:inline-flex;align-items:center;gap:5px}
.gcs-card .kind span{width:7px;height:7px;border-radius:50%}
.gcs-card blockquote{margin:10px 0 0;font-size:14px;line-height:1.55;font-weight:300;color:var(--starlight)}
.gcs-card .note{margin-top:11px;padding-top:10px;border-top:1px solid var(--line-faint);font-size:13px;line-height:1.5;color:#CFD6F2;white-space:pre-line}
.gcs-card .stackTag{display:inline-block;font:600 9.5px var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--hairline);border-radius:999px;padding:2px 8px;margin-bottom:6px}
.gcs-card .open{margin-top:12px;width:100%;border:1px solid var(--hairline);background:rgba(232,184,115,.1);color:var(--gold);
  font:600 11px var(--font-body);letter-spacing:.14em;text-transform:uppercase;padding:9px;border-radius:10px;cursor:pointer}
.gcs-card .open:hover{background:rgba(232,184,115,.18)}
@media (max-width:560px){.gcs-card{left:12px!important;right:12px;width:auto;bottom:12px;top:auto!important;max-height:58%;overflow:auto}}

/* legend */
.gcs-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 22px;margin:18px 4px 0}
@media (min-width:820px){.gcs-legend{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gcs-legend div{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--faint);line-height:1.4}
.gcs-legend svg{flex:0 0 auto}
.gcs-legend b{color:var(--starlight);font-weight:500}
.gcs-genres{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 4px 0;font-size:11px;color:rgba(142,153,194,.8);letter-spacing:.04em}
.gcs-genres span{display:inline-flex;align-items:center;gap:6px}
.gcs-genres i{width:14px;height:4px;border-radius:2px}