/* readout-panels.css
   Readout panels: crowd of 100, DDI slider, answer bars, links list, group explorer, chips.
*/

/* ---- extended-window console panels ---- */
.focus-diagnostics-machine button{margin:0;align-self:auto;}
.focus-diagnostics-machine .eq-bar{align-self:flex-end;}
.fd-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.fd-span-2{grid-column:span 2;}
.fd-span-3{grid-column:1 / -1;}
.fd-panel{gap:10px;}
.fd-panel .fd-screen{gap:12px;}
.crowd-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.crowd-tab{
  border:0;border-radius:0;padding:6px 13px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:700;color:var(--fd-dim);
  background:#ffffff;box-shadow:0 2px 0 rgba(54,48,110,.1);
  transition:transform .15s ease,background .15s ease;
}
.crowd-tab:hover{transform:translateY(-1px);}
.crowd-tab.is-active{background:#fff;color:var(--fd-ink);box-shadow:0 3px 0 color-mix(in srgb,var(--fd-tint) 55%,#fff);}
/* crowd of 100 */
.crowd-dots{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;}
.crowd-dots i{
  aspect-ratio:1;border-radius:50%;
  background:rgba(15,26,23,.12);
  transition:background .35s ease,transform .35s cubic-bezier(.3,1.5,.5,1);
  transition-delay:calc(var(--i) * 6ms);
  animation:crowdIn .4s ease both;animation-delay:calc(var(--i) * 7ms);
}
.crowd-dots i.on{background:var(--fd-tint);transform:scale(1.08);box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);}
.crowd-copy{display:flex;align-items:center;gap:12px;font-size:13px;line-height:1.4;font-weight:650;color:var(--fd-dim);}
.crowd-pct{font-size:42px;line-height:1;font-weight:650;letter-spacing:-.02em;color:var(--fd-ink);font-variant-numeric:tabular-nums;}
@keyframes crowdIn{from{opacity:0;transform:scale(.3);}}
/* DDI link simulator */
.link-sim-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px 14px;flex-wrap:wrap;}
.link-sim-copy{flex:1 1 260px;font-size:14px;line-height:1.5;font-weight:650;color:var(--fd-ink);}
.link-sim-copy b{font-size:19px;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--fd-tint) 50%,var(--fd-ink));}
.link-sim-chip{padding:5px 12px;border-radius:0;background:#fff;font-size:11.5px;font-weight:700;color:var(--fd-dim);box-shadow:0 2px 0 rgba(54,48,110,.08);white-space:nowrap;}
.link-sim-chip b{color:var(--fd-ink);}
.link-sim-track{position:relative;height:60px;margin:14px 10px 0;}
.link-sim-zones{position:absolute;left:0;right:0;top:22px;height:10px;border-radius:0;overflow:hidden;background:rgba(15,26,23,.06);}
.link-sim-zones i{position:absolute;top:0;bottom:0;opacity:.5;}
.link-sim-zones i.good{background:var(--fd-good);}
.link-sim-zones i.fair{background:var(--fd-fair);}
.link-sim-zones i.low{background:var(--fd-bad);}
.link-sim-needle{position:absolute;top:8px;width:5px;height:38px;margin-left:-2.5px;border-radius:0;background:#f2b33d;box-shadow:0 0 10px rgba(242,179,61,.6);transition:left .5s cubic-bezier(.3,1.45,.5,1);}
.link-sim-you{position:absolute;top:16px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--fd-ink);border:3px solid #fff;box-shadow:0 3px 8px rgba(15,26,23,.3);animation:fdBlink 2.6s ease-in-out infinite;}
.link-sim-needle em,.link-sim-you em{
  position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-style:normal;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.link-sim-needle em{top:-16px;color:#8a5e0e;}
.link-sim-you em{top:24px;color:var(--fd-ink);}
.link-sim-slider{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--fd-dim);}
.link-sim-slider input{width:100%;accent-color:#f2b33d;cursor:pointer;}
.link-sim-slider b{min-width:32px;text-align:right;font-size:16px;color:var(--fd-ink);font-variant-numeric:tabular-nums;}
.link-sim-note{font-size:12px;line-height:1.4;font-weight:600;color:var(--fd-dim);}
.link-sim.is-text{display:flex;align-items:center;gap:16px;min-height:140px;}
.link-sim-big .dash-icon svg{width:56px;animation:heroBob 4s ease-in-out infinite;}
/* answer equalizer */
.eq-bars{display:flex;align-items:flex-end;justify-content:center;gap:clamp(4px,1vw,10px);height:130px;padding:0 4px;border-bottom:2px solid rgba(15,26,23,.12);}
.eq-bar{
  flex:1 1 0;min-width:6px;max-width:90px;height:var(--h);padding:0;border:0;cursor:pointer;
  border-radius:9px 9px 3px 3px;
  background:color-mix(in srgb,var(--fd-tint) 38%,#fff);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7);
  transform-origin:bottom;
  animation:eqRise .75s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i) * 45ms);
  transition:filter .2s ease,outline-color .2s ease;
}
.eq-bar:hover{filter:brightness(1.06) saturate(1.2);}
.eq-bar.is-top{background:var(--fd-tint);box-shadow:0 0 14px color-mix(in srgb,var(--fd-tint) 55%,transparent),inset 0 2px 0 rgba(255,255,255,.5);}
.eq-bar.is-selected{outline:3px solid var(--fd-ink);outline-offset:2px;}
.eq-bar.ghost{cursor:default;opacity:.4;animation:eqIdle 1.8s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -140ms);}
.eq-readout,.links-readout{display:grid;gap:4px;min-height:52px;align-content:start;}
.eq-readout b,.links-readout b{font-size:14px;font-weight:700;line-height:1.3;color:var(--fd-ink);}
.eq-readout span,.links-readout span{font-size:13px;line-height:1.45;font-weight:600;color:var(--fd-dim);}
.eq-readout.is-changing,.links-readout.is-changing{animation:sartDetailIn .28s ease both;}
@keyframes eqRise{from{transform:scaleY(0);}}
@keyframes eqIdle{to{transform:scaleY(.45);}}
@keyframes sartDetailIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
/* what moves with DDI */
.links-screen{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start;}
.links-list{display:grid;gap:4px;}
.link-row{
  display:grid;grid-template-columns:104px 1fr 62px;align-items:center;gap:10px;
  padding:6px 8px;border:0;border-radius:0;background:transparent;cursor:pointer;
  font:inherit;text-align:left;color:var(--fd-ink);transition:background .15s ease;
}
.link-row:hover,.link-row.is-selected{background:#ffffff;}
.link-name{font-size:12.5px;font-weight:700;}
.link-bar{position:relative;height:10px;border-radius:0;background:rgba(15,26,23,.07);overflow:hidden;}
.link-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:0;background:#f2b33d;transform-origin:left;animation:barGrow .9s cubic-bezier(.3,1.2,.5,1) both;animation-delay:calc(var(--i) * 80ms + .2s);}
.link-row.down .link-bar i{background:#6f8d80;}
.link-dir{font-size:11px;font-weight:700;color:var(--fd-dim);white-space:nowrap;}
.link-row.up .link-dir{color:#8a5e0e;}
.link-row.down .link-dir{color:#1d6e55;}
@keyframes barGrow{from{transform:scaleX(0);}}
/* group explorer */
.group-rows{--name-w:40%;position:relative;display:grid;gap:9px;padding-bottom:18px;}
.group-row{display:grid;grid-template-columns:var(--name-w) 1fr;align-items:center;}
.group-name{padding-right:10px;font-size:12.5px;font-weight:700;line-height:1.2;color:var(--fd-ink);}
.group-name em{margin-left:4px;padding:1px 7px;border-radius:0;background:var(--fd-ink);color:#fff;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.group-bar{position:relative;height:18px;border-radius:0;background:rgba(15,26,23,.07);}
.group-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:0;background:color-mix(in srgb,var(--fd-tint) 40%,#fff);transform-origin:left;animation:barGrow .85s cubic-bezier(.3,1.2,.5,1) both;animation-delay:calc(var(--i) * 70ms);}
.group-row.is-mine .group-bar i{background:var(--fd-tint);box-shadow:0 0 12px color-mix(in srgb,var(--fd-tint) 50%,transparent);}
.group-bar b{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;color:var(--fd-dim);font-variant-numeric:tabular-nums;}
.group-you{position:absolute;top:-4px;bottom:14px;width:3px;margin-left:-1.5px;border-radius:0;background:#f2b33d;box-shadow:0 0 8px rgba(242,179,61,.6);animation:crowdIn .5s .6s both;}
.group-you em{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:2px;white-space:nowrap;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8a5e0e;}
.group-note{font-size:12.5px;line-height:1.45;font-weight:600;color:var(--fd-dim);}
/* shared chips */
.share-chips{display:flex;flex-wrap:wrap;gap:8px;}
.share-chip{display:grid;gap:2px;padding:8px 13px;border-radius:0;background:#fff;box-shadow:0 2px 0 rgba(54,48,110,.1);animation:chipIn .5s cubic-bezier(.3,1.4,.5,1) both;}
.share-chip:nth-child(2){animation-delay:.05s;}
.share-chip:nth-child(3){animation-delay:.1s;}
.share-chip:nth-child(4){animation-delay:.15s;}
.share-chip:nth-child(5){animation-delay:.2s;}
.share-chip:nth-child(6){animation-delay:.25s;}
.share-chip:nth-child(7){animation-delay:.3s;}
.share-chip em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fd-faint);}
.share-chip b{font-size:13px;font-weight:700;color:var(--fd-ink);}
.share-chip.is-empty{opacity:.55;}
.share-note{font-size:12.5px;line-height:1.45;font-weight:600;color:var(--fd-dim);}
@keyframes chipIn{from{opacity:0;transform:translateY(10px) scale(.9);}}
@media (max-width:940px){
  .fd-span-2,.fd-span-3{grid-column:1 / -1;}
  .links-screen{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .fd-grid.cols-2{grid-template-columns:1fr;}
  .link-row{grid-template-columns:86px 1fr 54px;gap:8px;}
  .group-rows{--name-w:46%;}
  .crowd-pct{font-size:34px;}
}
@media (prefers-reduced-motion:reduce){
  .crowd-dots i,.eq-bar,.link-bar i,.group-bar i,.share-chip,.group-you,.link-sim-you,.link-sim-big .dash-icon svg{animation:none;}
  .link-sim-needle,.crowd-dots i{transition:none;}
}
/* survey and task screens: a paper panel on the navy page */
body:has(#screen-survey.active),
body:has(#screen-cognitive.active){
  background:#0f1a17;
}
#screen-survey.active,
#screen-cognitive.active{box-shadow:none;}