/* Ear explorer: additions to the shared explorer layout (/rectal-cancer/explorer.css). */
.facts{margin:0;display:grid;gap:10px}
.facts dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.facts dd{margin:0;font-size:14.5px;line-height:1.55}
.links{margin:0;padding-left:1.1em;display:grid;gap:6px;font-size:14.5px}
.links a{color:var(--accent);font-weight:700}
.summary + .copyrow{margin-top:2px}

/* through the microscope: a round, lit field of view, as the clinician sees it */
.scope{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1;
  background:radial-gradient(circle closest-side at 50% 50%, transparent 0 86%, rgba(6,8,10,.55) 90%, rgba(6,8,10,.94) 96%)}
.scope::after{content:"Through the microscope";position:absolute;left:50%;top:14%;transform:translateX(-50%);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#f3efe9;background:rgba(6,8,10,.55);padding:3px 10px;border-radius:999px}
body.micro .stage{background:#0b0e10}
body.micro .stage-foot .legend{display:none}

/* phones: six views and two tools fit a three-column grid */
@media (max-width:760px){
  .views{grid-template-columns:repeat(3,minmax(0,1fr))}
  .views .btn.tool{grid-column:auto}
  #btn-layers{grid-column:span 2}
  .scope::after{top:10%}
}
.views,.stage-foot,.layers{z-index:2}