/* ============================================================
   Buy-in to Buy-in | Elite Advisory skin, unified layout
   Stance colors are data. Color never carries meaning alone:
   every stance-colored element pairs with a text label.
   ============================================================ */

@font-face { font-family: 'Big Shoulders Display'; src: url('../assets/fonts/big-shoulders-display-var.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../assets/fonts/instrument-sans-var.woff2') format('woff2-variations'); font-weight: 400 700; font-display: swap; }

:root {
  --navy: #0B132B; --navy-deep: #060B1C; --cream: #FDFBF7; --gold: #D4AF37;
  --supporter: #00E676; --neutral: #FFB300; --detractor: #FF5252; --unknown: #6C5E53;
  --c14: rgba(253,251,247,.14); --c08: rgba(253,251,247,.08); --c55: rgba(253,251,247,.55);
  --card: rgba(253,251,247,.045);
  --fd: 'Big Shoulders Display','Arial Narrow',sans-serif;
  --fb: 'Instrument Sans','Helvetica Neue',Arial,sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--navy); color:var(--cream); font-family:var(--fb); line-height:1.5; min-height:100vh; }
::selection { background:var(--gold); color:var(--navy); }
:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
h1,h2,h3,h4 { font-family:var(--fd); text-transform:uppercase; letter-spacing:.04em; }

/* ---------- Chrome ---------- */
.tool-header { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:1.4rem; padding:.8rem clamp(1rem,3vw,2rem); background:rgba(11,19,43,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--c08); }
.tool-brand { font-family:var(--fd); font-weight:760; letter-spacing:.28em; font-size:.95rem; color:var(--cream); text-decoration:none; white-space:nowrap; }
.tool-tabs { display:flex; gap:.35rem; margin-inline:auto; }
.tab { font-family:var(--fd); font-weight:680; text-transform:uppercase; letter-spacing:.08em; font-size:.95rem; color:var(--c55); background:transparent; border:1px solid transparent; border-radius:4px; padding:.45rem .95rem; cursor:pointer; transition:color .25s,border-color .25s,background-color .25s; }
.tab:hover { color:var(--cream); }
.tab.is-active { color:var(--navy); background:var(--cream); border-color:var(--cream); }
.quiet-booking { font-size:.78rem; letter-spacing:.04em; color:var(--c55); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.quiet-booking:hover { color:var(--cream); }

.tool-main { max-width:1560px; margin-inline:auto; padding:clamp(1.2rem,3vw,2rem); }

.view { display:none; }
.view.is-active { display:block; animation:fade .35s ease; }
@keyframes fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ---------- Intro ---------- */
.intro { margin-bottom:1.3rem; }
.intro h1 { font-size:clamp(2rem,5vw,2.7rem); font-weight:760; margin-bottom:.5rem; }
.intro .lead { font-size:.98rem; color:var(--cream); opacity:.92; max-width:82ch; }
.intro .lead b { color:var(--gold); font-weight:700; }
.sportnote { font-size:.82rem; color:var(--c55); margin-top:.6rem; font-style:italic; max-width:82ch; }
.retention-note { margin-top:.8rem; font-size:.8rem; color:var(--c55); border-left:2px solid var(--gold); padding-left:.7rem; max-width:70ch; }

/* ---------- Definitions up top ---------- */
.defs { margin-bottom:1.7rem; }
.defs-h { font-size:.8rem; letter-spacing:.12em; color:var(--gold); margin-bottom:.65rem; }
.defs-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; }
.qcard { border:1px solid var(--c08); border-radius:9px; padding:.85rem .9rem; background:var(--card); }
.qcard h4 { font-family:var(--fd); font-size:1.15rem; letter-spacing:.05em; color:var(--gold); line-height:1.05; }
.qcard .qsub { display:block; font-family:var(--fb); font-size:.74rem; letter-spacing:.02em; text-transform:none; color:var(--cream); opacity:.75; margin-top:.15rem; margin-bottom:.4rem; }
.qcard p { font-size:.76rem; color:var(--cream); opacity:.85; line-height:1.45; }

/* ---------- Boards grid ---------- */
.boards { display:grid; grid-template-columns:1fr 1fr 350px; gap:1.4rem; align-items:start; }
.col-rings, .col-map { min-width:0; }
.board-h { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.6rem; }
.board-h h2 { font-size:1.05rem; font-weight:720; letter-spacing:.08em; }
.board-h .sub { font-size:.72rem; color:var(--c55); }

/* ---------- Rings ---------- */
.rings-canvas { position:relative; width:100%; aspect-ratio:1/1; touch-action:none; }
.rings-svg { position:absolute; inset:0; width:100%; height:100%; }
.ring-circle { fill:none; stroke:var(--cream); stroke-opacity:.5; stroke-width:.35; }
.ring-label { fill:var(--cream); opacity:.72; font-family:var(--fb); font-size:2.5px; letter-spacing:.14em; text-transform:uppercase; text-anchor:middle; }

.chip { position:absolute; transform:translate(-50%,-50%); background:rgba(6,11,28,.9); border:1px solid var(--c14); border-radius:8px; padding:.3rem .5rem; cursor:grab; user-select:none; -webkit-user-select:none; max-width:10rem; transition:border-color .2s,box-shadow .2s; }
.chip:hover, .chip:focus-visible { border-color:var(--c55); }
.chip.is-dragging { cursor:grabbing; z-index:30; box-shadow:0 14px 40px rgba(0,0,0,.5); }
.chip .chip-name { font-weight:700; font-size:.74rem; line-height:1.2; }
.chip .chip-title { display:block; font-size:.64rem; color:var(--c55); line-height:1.15; }
.chip .chip-stance { display:flex; align-items:center; gap:.3rem; font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; margin-top:.1rem; }
.stance-dot { width:.55rem; height:.55rem; border-radius:50%; flex:0 0 auto; }
.stance-supporter .stance-dot { background:var(--supporter); }
.stance-neutral .stance-dot { background:var(--neutral); }
.stance-detractor .stance-dot { background:var(--detractor); }
.stance-unknown .stance-dot { background:var(--unknown); }
.group-badge { display:inline-block; font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--c55); border-radius:3px; padding:0 .22rem; margin-top:.12rem; }

/* ring designations */
.ring-desig { margin-top:.7rem; display:flex; flex-direction:column; gap:.3rem; }
.ring-desig div { display:flex; align-items:center; gap:.5rem; font-size:.74rem; color:var(--c55); }
.ring-desig .tgt { width:1.4rem; height:1.4rem; flex:0 0 auto; }
.ring-desig .lab { color:var(--cream); font-weight:600; }
.ring-desig .arw { color:var(--gold); }

/* two lens */
.lens { margin-top:1.1rem; background:var(--card); border:1px solid var(--c08); border-radius:12px; padding:1rem 1.1rem; }
.lens h3 { font-size:.8rem; letter-spacing:.1em; color:var(--gold); margin-bottom:.55rem; }
.lens .row { display:flex; gap:.6rem; align-items:flex-start; font-size:.82rem; margin-bottom:.5rem; }
.swatches { display:flex; gap:.3rem; margin-top:.15rem; }
.sw { width:.7rem; height:.7rem; border-radius:50%; flex:0 0 auto; }
.sw-sup { background:var(--supporter); } .sw-neu { background:var(--neutral); } .sw-det { background:var(--detractor); } .sw-cream { background:var(--cream); margin-top:.2rem; }
.lens .k { font-weight:700; color:var(--cream); }
.gap-note { margin-top:.4rem; font-size:.78rem; color:var(--c55); border-top:1px solid var(--c08); padding-top:.5rem; }
.gap-note b { color:var(--cream); }

/* ---------- 2x2 ---------- */
.grid2-wrap { display:grid; grid-template-columns:1.35rem 1fr; grid-template-rows:auto 1.25rem; gap:.3rem; }
.ax-y { grid-area:1/1; writing-mode:vertical-rl; transform:rotate(180deg); place-self:center; }
.map-canvas { grid-area:1/2; }
.ax-x { grid-area:2/2; place-self:center; }
.ax-y, .ax-x { font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--c55); }

.map-canvas { position:relative; width:100%; aspect-ratio:1/1; border:1px solid var(--c14); border-radius:10px;
  background:linear-gradient(rgba(253,251,247,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(253,251,247,.03) 1px,transparent 1px);
  background-size:12.5% 12.5%; overflow:hidden; touch-action:none; }
.axis-line { position:absolute; background:rgba(253,251,247,.35); }
.axis-x { left:61.25%; top:0; bottom:0; width:1px; }
.axis-y { top:38.75%; left:0; right:0; height:1px; }

.wm { position:absolute; display:flex; flex-direction:column; pointer-events:none; }
.wm-name { font-family:var(--fd); font-weight:780; text-transform:uppercase; letter-spacing:.04em; font-size:1.3rem; color:var(--cream); opacity:.14; line-height:1; }
.wm-play { font-size:.64rem; font-weight:700; line-height:1.3; color:var(--cream); opacity:.4; margin-top:.35rem; }
.wm.tr, .wm.br { align-items:flex-end; text-align:right; max-width:33%; }
.wm.tl, .wm.bl { align-items:flex-start; text-align:left; max-width:44%; }
.wm.tr { top:.7rem; right:.8rem; } .wm.br { bottom:.7rem; right:.8rem; }
.wm.tl { top:.7rem; left:.8rem; } .wm.bl { bottom:.7rem; left:.8rem; }
.wm.tease .wm-play { color:var(--gold); opacity:.58; }

.dot { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; cursor:grab; user-select:none; -webkit-user-select:none; transition:left .9s cubic-bezier(.22,1,.36,1), top .9s cubic-bezier(.22,1,.36,1); }
.dot.no-anim { transition:none; }
.dot.is-dragging { cursor:grabbing; z-index:30; transition:none; }
.dot.is-selected .dot-circle { outline:2px solid var(--gold); outline-offset:2px; }
.dot-circle { border-radius:50%; border:1.5px solid rgba(6,11,28,.75); }
.dot.size-large .dot-circle { width:2.1rem; height:2.1rem; }
.dot.size-medium .dot-circle { width:1.5rem; height:1.5rem; }
.dot.size-small .dot-circle { width:1.05rem; height:1.05rem; }
.stance-supporter .dot-circle { background:var(--supporter); }
.stance-neutral .dot-circle { background:var(--neutral); }
.stance-detractor .dot-circle { background:var(--detractor); }
.stance-unknown .dot-circle { background:var(--unknown); }
.dot.is-traitor .dot-circle { outline:2px dashed var(--cream); outline-offset:2px; }
.dot-label { margin-top:.2rem; font-size:.66rem; line-height:1.2; text-align:center; background:rgba(6,11,28,.85); border-radius:4px; padding:.1rem .35rem; max-width:8.5rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dot-label .stance-word { display:block; font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--c55); }
.dot-badges { display:flex; gap:.2rem; margin-top:.15rem; }
.dot-badge { font-size:.56rem; letter-spacing:.06em; text-transform:uppercase; background:rgba(6,11,28,.92); border:1px solid var(--c55); border-radius:3px; padding:0 .25rem; }
.dot-halo .dot-circle { box-shadow:0 0 0 4px rgba(253,251,247,.22); }

.two-lens-moment { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(88%,26rem); background:rgba(6,11,28,.92); border:1px solid var(--gold); border-radius:12px; padding:1rem 1.15rem; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.5); z-index:40; }
.two-lens-moment p { font-size:.86rem; line-height:1.5; }
.two-lens-moment b { color:var(--gold); }
.two-lens-moment button { margin-top:.7rem; background:var(--cream); color:var(--navy); border:none; border-radius:5px; font-family:var(--fb); font-weight:640; font-size:.78rem; padding:.4rem 1rem; cursor:pointer; }

.map-empty { border:1px dashed var(--c14); border-radius:10px; padding:2.5rem 1.5rem; text-align:center; color:var(--c55); margin-top:.6rem; }

/* trays */
.tray { margin-top:.9rem; border:1px dashed var(--c14); border-radius:10px; padding:.8rem 1rem; }
.tray h3 { font-size:.8rem; letter-spacing:.14em; color:var(--c55); }
.tray-hint { font-size:.72rem; color:var(--c55); margin-top:.2rem; }
.tray-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; min-height:1.4rem; }
.tray-chips .chip { position:static; transform:none; }

/* boundary flag */
.boundary-flag { margin-top:.8rem; border:1px solid var(--gold); border-radius:8px; padding:.7rem .9rem; background:rgba(212,175,55,.08); }
.boundary-flag p { font-size:.82rem; }
.flag-actions { display:flex; gap:.6rem; margin-top:.5rem; }
.flag-actions button { background:none; border:1px solid var(--c55); border-radius:4px; color:var(--cream); font-size:.76rem; padding:.3rem .7rem; cursor:pointer; }
.flag-actions button:hover { border-color:var(--gold); color:var(--gold); }

/* ---------- Panels ---------- */
.col-rail { display:flex; flex-direction:column; gap:1.1rem; position:sticky; top:5rem; }
.panel { background:var(--card); border:1px solid var(--c08); border-radius:10px; padding:1rem 1.05rem; }
.panel h2 { font-size:1rem; font-weight:700; letter-spacing:.08em; margin-bottom:.6rem; }
.col-map .panel, .roster { margin-top:1.1rem; }
.helper { font-size:.78rem; color:var(--c55); margin:.3rem 0 .7rem; }
.opt { font-size:.66rem; color:var(--c55); text-transform:none; letter-spacing:0; }

label { display:block; font-size:.78rem; font-weight:600; letter-spacing:.03em; margin-top:.55rem; }
input[type=text], select, input[type=number] { width:100%; margin-top:.22rem; background:rgba(6,11,28,.6); border:1px solid var(--c14); border-radius:6px; color:var(--cream); font-family:var(--fb); font-size:.86rem; padding:.5rem .6rem; }
input:focus, select:focus { border-color:var(--c55); outline:none; }
.field-row, .detail-row { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.check-row { display:flex; align-items:center; gap:.5rem; font-size:.82rem; font-weight:500; margin-top:.6rem; cursor:pointer; }
.check-row input { accent-color:var(--gold); width:.95rem; height:.95rem; }
.place { border:1px dashed var(--gold); border-radius:6px; }
.place-label { color:var(--gold); }
.more-fields { margin-top:.7rem; }
.more-fields summary { font-size:.76rem; color:var(--c55); cursor:pointer; letter-spacing:.03em; }

.btn-solid { margin-top:.9rem; background:var(--cream); color:var(--navy); border:none; border-radius:5px; font-family:var(--fb); font-weight:640; font-size:.85rem; letter-spacing:.03em; padding:.65rem 1.1rem; cursor:pointer; transition:transform .2s,opacity .2s; }
.btn-solid:hover { transform:translateY(-1px); opacity:.92; }
.btn-solid.danger { background:transparent; color:var(--detractor); border:1px solid rgba(255,82,82,.4); }
.btn-gold { display:inline-block; background:var(--gold); color:var(--navy); font-weight:660; letter-spacing:.04em; text-decoration:none; border-radius:4px; padding:.8rem 1.5rem; transition:transform .2s,box-shadow .2s; }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(212,175,55,.35); }

/* roster */
.roster-group h3 { font-size:.7rem; letter-spacing:.14em; color:var(--c55); margin:.6rem 0 .25rem; }
.roster-item { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.3rem 0; border-bottom:1px solid var(--c08); font-size:.82rem; }
.roster-item .stance-word { font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--c55); }
.roster-item select { width:auto; margin-top:0; font-size:.7rem; padding:.2rem .3rem; }
.roster-item .row-controls { display:flex; align-items:center; gap:.4rem; }
.roster-item .remove-btn { background:none; border:none; color:var(--c55); cursor:pointer; font-size:.72rem; text-decoration:underline; text-underline-offset:2px; }
.roster-item .remove-btn:hover { color:var(--detractor); }
.individuate { font-size:.72rem; color:var(--c55); margin:.15rem 0 .4rem; }
.individuate button { background:none; border:none; color:var(--gold); cursor:pointer; font-size:.72rem; text-decoration:underline; text-underline-offset:2px; }

/* detail / questions */
.detail-name { font-size:1.05rem; font-weight:700; }
.detail-meta { font-size:.74rem; color:var(--c55); margin-bottom:.5rem; }
.question { margin-top:.9rem; }
.question > p { font-size:.85rem; font-weight:600; }
.question .helper { margin:.2rem 0 .35rem; }
.q-options { display:flex; flex-direction:column; gap:.15rem; }
.q-options label { display:flex; gap:.45rem; align-items:baseline; font-weight:400; font-size:.78rem; margin:0; padding:.18rem .3rem; border-radius:4px; cursor:pointer; }
.q-options label:hover { background:var(--c08); }
.q-options label.on { background:rgba(212,175,55,.12); }
.q-options input { accent-color:var(--gold); }
.q-scorehint { font-size:.7rem; color:var(--c55); margin-top:.3rem; }
.q-scorehint b { color:var(--cream); }
.q-tag { font-size:.58rem; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--c55); border-radius:3px; padding:0 .28rem; margin-left:.35rem; color:var(--c55); white-space:nowrap; }
.q-tag-wont { color:var(--detractor); border-color:rgba(255,82,82,.5); }
.q-tag-cant { color:var(--neutral); border-color:rgba(255,179,0,.5); }
.q-tag-unclear { color:var(--c55); }
.q-tag-clear { color:var(--supporter); border-color:rgba(0,230,118,.5); }
.drag-lock { margin-top:.9rem; border:1px solid var(--gold); border-radius:8px; background:rgba(212,175,55,.08); padding:.7rem .8rem; }
.drag-lock p { font-size:.8rem; }
.drag-lock b { color:var(--gold); }
.drag-lock .btn-solid { margin-top:.55rem; }
.dot.is-placed .dot-circle { box-shadow:0 0 0 2px rgba(212,175,55,.5); }
.fallback-pos { margin-top:.8rem; border-top:1px solid var(--c08); padding-top:.7rem; }
.nudge-pos { margin-top:.8rem; border-top:1px solid var(--c08); padding-top:.7rem; }
.nudge-grid { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin-top:.35rem; }
.nudge-btn { background:rgba(6,11,28,.6); border:1px solid var(--c14); border-radius:6px; color:var(--cream); font-family:var(--fb); font-size:.76rem; padding:.42rem .5rem; cursor:pointer; transition:border-color .2s,color .2s; }
.nudge-btn:hover { border-color:var(--gold); color:var(--gold); }
.quadrant-move { margin-top:.9rem; border-left:2px solid var(--gold); padding-left:.7rem; }
.quadrant-move h3 { font-size:.9rem; letter-spacing:.1em; margin-bottom:.25rem; color:var(--gold); }
.quadrant-move.tease h3 { color:var(--gold); }
.quadrant-move p { font-size:.8rem; opacity:.9; }
.quadrant-move.tease p { color:var(--gold); opacity:.85; }
.detail-actions { margin-top:.9rem; display:flex; gap:.7rem; flex-wrap:wrap; }

/* gatekeeper / sequencing */
#gatekeeper-panel h2 { font-size:.9rem; letter-spacing:.06em; opacity:.9; }
#gatekeeper-list { list-style:none; }
#gatekeeper-list li { display:flex; justify-content:space-between; align-items:center; font-size:.82rem; padding:.3rem 0; border-bottom:1px solid var(--c08); }
#gatekeeper-list button { background:none; border:none; color:var(--gold); font-size:.74rem; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.seq-prompt { margin-bottom:.8rem; }
.seq-prompt p { font-size:.82rem; }
.seq-names { font-size:.74rem; color:var(--c55); margin-top:.2rem; }
.standing-line { font-size:.78rem; border-top:1px solid var(--c08); padding-top:.7rem; font-style:italic; }

/* ---------- Readout ---------- */
.readout-col { max-width:56rem; display:flex; flex-direction:column; gap:1.2rem; }
.earned-prompt { border:1px solid var(--gold); border-radius:10px; background:rgba(212,175,55,.07); padding:1.1rem 1.2rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem; justify-content:space-between; }
.earned-prompt p { font-size:.92rem; max-width:34rem; }
.insight { border-left:2px solid var(--gold); padding-left:.8rem; margin-bottom:.9rem; }
.insight p { font-size:.88rem; }
.insight .kind { font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c55); }
.no-insights { font-size:.85rem; color:var(--c55); }
.summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.7rem; }
.summary-cell { border:1px solid var(--c08); border-radius:8px; padding:.6rem .8rem; }
.summary-cell .n { font-family:var(--fd); font-weight:760; font-size:1.6rem; }
.summary-cell .l { font-size:.72rem; color:var(--c55); text-transform:uppercase; letter-spacing:.08em; }
.export-row { display:flex; flex-wrap:wrap; gap:.6rem; }
.export-row .btn-solid { margin-top:0; }

/* ---------- Footer ---------- */
.tool-footer { margin-top:3rem; background:var(--navy-deep); border-top:1px solid var(--c08); text-align:center; padding:2.6rem 1.4rem; display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.tool-footer > p:first-child { max-width:44rem; font-size:1rem; }
.tool-attrib { font-size:.76rem; color:var(--c55); }

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .boards { grid-template-columns:1fr; }
  .defs-grid { grid-template-columns:1fr 1fr; }
  .col-rail { position:static; }
}
@media (max-width:560px){
  .field-row, .detail-row { grid-template-columns:1fr; }
  .chip { max-width:8rem; }
  .dot-label { max-width:6rem; }
  .wm-name { font-size:1rem; }
  .tool-tabs { margin-inline:0; }
  .quiet-booking { margin-left:auto; }
  .tool-header { flex-wrap:wrap; }
}
@media (prefers-reduced-motion: reduce){
  .dot { transition:none; }
  .view.is-active { animation:none; }
}