/* pages/landing/drill-panel.css — drill internals, proof row, intro cards.
   Split from the pre-#149 monolith — rule ORDER preserved; see docs/architecture.md
   ("CSS layers") for the load-order contract each page's <head> follows. */
.dr-top{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--panel2) 68%, transparent);
  position:relative;
  z-index:1;
}
.dots{display:flex;gap:6px}
.dots i{
  width:10px;
  height:10px;
  border-radius:50%;
  opacity:.62;
}
.dots i:nth-child(1){background:var(--bad)}
.dots i:nth-child(2){background:var(--warn)}
.dots i:nth-child(3){background:var(--good)}
.dr-tabs{display:flex;gap:4px;flex-wrap:wrap}
.dr-tab{
  border:1px solid transparent;
  background:none;
  color:var(--mute);
  padding:8px 12px;
  border-radius:999px;
  font:700 12px/1 var(--display);
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.dr-tab:hover{color:var(--ink);background:var(--hover)}
.dr-tab[aria-pressed="true"]{
  color:var(--ink);
  background:var(--panel);
  border-color:var(--line);
}
.streak{
  margin-left:auto;
  font:700 12px/1 var(--display);
  color:var(--accent);
  border:1px solid var(--accent-soft);
  background:var(--accent-soft);
  padding:6px 12px;
  border-radius:999px;
  white-space:nowrap;
}
.dr-body{
  padding:34px 28px 28px;
  min-height:352px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  z-index:1;
}
.glyph{
  font:400 78px/1.05 var(--jp);
  margin-bottom:6px;
}
.dev{
  font:600 22px/1.7 var(--sans);
  color:var(--accent);
  margin:0 0 4px;
  letter-spacing:.02em;
}
.dev[hidden]{display:none}
.dr-prompt{
  font:700 12px/1 var(--display);
  color:var(--mute);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:20px;
}
.dr-input{
  display:flex;
  align-items:center;
  gap:10px;
  width:min(310px,100%);
}
.dr-input input{
  flex:1;
  min-width:0;
  background:var(--bg);
  border:1px solid var(--line2);
  border-radius:14px;
  color:var(--ink);
  font:600 16px var(--display);
  padding:12px 14px;
  text-align:center;
  outline:none;
  transition:border-color .15s ease,background .15s ease;
}
.dr-input input:focus{border-color:var(--accent2);background:var(--panel)}
.dr-check{
  font:700 13px var(--display);
  color:var(--panel);
  border:1px solid transparent;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent2) 32%, var(--accent)));
  cursor:pointer;
  padding:12px 18px;
  border-radius:14px;
}
.dr-check:hover{transform:translateY(-1px)}
.choices{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:min(352px,100%);
}
.choice{
  font:600 14px var(--sans);
  border:1px solid var(--line2);
  border-radius:14px;
  padding:12px 14px;
  background:color-mix(in srgb, var(--panel) 76%, transparent);
  color:var(--ink);
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.choice:hover{border-color:var(--accent);transform:translateY(-1px)}
.choice.right{border-color:var(--good-deep);color:var(--good-deep);background:var(--good-tint)}
.choice.wrong{border-color:var(--bad-deep);color:var(--bad-deep);background:var(--bad-tint)}
.verdict{
  min-height:26px;
  margin-top:18px;
  font:600 14px var(--sans);
}
.verdict.ok{color:var(--good-deep)}
.verdict.no{color:var(--bad-deep)}
.gradebar{
  display:flex;
  gap:10px;
  margin-top:14px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.gradebar.on{opacity:1;pointer-events:auto}
.grade{
  font:700 13px var(--display);
  border:1px solid var(--line2);
  border-radius:14px;
  padding:10px 16px;
  background:color-mix(in srgb, var(--panel) 84%, transparent);
  cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.grade:hover{transform:translateY(-1px);border-color:var(--accent)}
.grade small{
  display:block;
  font:500 11px var(--display);
  color:var(--mute);
  margin-top:2px;
}
.grade.g0{color:var(--bad-deep)}
.grade.g2{color:var(--good-deep)}

.landing section{
  padding:clamp(72px,8vw,104px) 0;
  position:relative;
}
.landing section::before{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}
.landing section > .wrap{position:relative}
.landing h2{
  margin:0 0 10px;
  font:700 clamp(26px,3vw,38px)/1.08 var(--display);
  letter-spacing:-.04em;
  text-wrap:balance;
}
.lede{
  color:var(--dim);
  max-width:46em;
  margin:0 0 40px;
}

.intro-wrap{max-width:1180px}

/* The glow the glass cards sample. Its own stacking context, so the negative
   z-index parks it behind this section's content without falling through to
   the page layers body.landing paints at the same depth. */
#intro{isolation:isolate}