/* pages/landing/jlpt-footer.css — JLPT table tail, start band, footer, breakpoints.
   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. */
.hintlbl{
  margin-left:auto;
  color:var(--accent);
  font:700 11px var(--display);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.jlpt-body{
  padding:0 20px 20px;
  color:var(--dim);
}
.jlpt-body table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:18px;
}
.jlpt-body thead th{
  text-align:left;
  font:700 11px var(--display);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mute);
  padding:14px 0 10px;
  border-bottom:1px solid var(--line);
}
.jlpt-body tbody td{
  padding:16px 0;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.jlpt-body tbody tr:last-child td{border-bottom:0}
.jlpt-body td.m{color:var(--mute)}
.jlpt-body p{
  margin:14px 0 0;
  line-height:1.65;
}
.jlpt-body a{color:var(--accent)}

.band{
  padding:0 0 84px;
}
.band .wrap{
  border:1px solid var(--line);
  border-radius:28px;
  padding:32px 24px;
  background:
    radial-gradient(900px circle at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 48%),
    radial-gradient(900px circle at 100% 0%, color-mix(in srgb, var(--accent2) 14%, transparent), transparent 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 90%, transparent), color-mix(in srgb, var(--panel2) 84%, transparent));
  box-shadow:0 28px 80px var(--shadow1);
}
.band h2{
  max-width:14ch;
  margin-bottom:18px;
  font:700 clamp(30px,4vw,54px)/1 var(--display);
  letter-spacing:-.05em;
}
.band h2 em{
  font-style:normal;
  color:var(--accent);
}

.lfoot{
  padding:0 0 34px;
  color:var(--dim);
}
.fwrap{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.lfoot a{
  color:var(--dim);
  text-decoration:none;
  font:600 13px var(--sans);
  /* 15px of text is the VISUAL size; the hit box must reach 24 (#138). The
     negative margin hands the padding back to the layout, so the footer's
     rhythm is untouched while the tap area grows. */
  padding-block:5px;
  margin-block:-5px;
}
.lfoot a:hover{color:var(--ink)}
.rt{margin-left:auto;font:500 12px var(--sans)}

.viz-tip{
  position:fixed;
  z-index:120;
  pointer-events:none;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .15s ease,transform .15s ease;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:10px;
  padding:8px 10px;
  font:600 12px var(--display);
  box-shadow:0 14px 36px var(--shadow1);
}
.viz-tip.on{opacity:1;transform:translateY(0)}

@media (min-width:961px){
  .drill{margin-top:14px}
}

@media (max-width:1080px){
  .hero,
  .pl-grid,
  .tr-grid,
  .lb-grid{
    grid-template-columns:1fr;
  }
  .hero{padding-bottom:68px}
  .hero > :first-child{max-width:unset}
  .drill{order:-1}
}

@media (max-width:860px){
  .nav-in{
    flex-wrap:wrap;
    padding:14px 0;
    min-height:unset;
  }
  .nav-links{
    order:3;
    width:100%;
    overflow:auto;
    padding-bottom:4px;
  }
  .nav-links::-webkit-scrollbar{height:8px}
  .proof,
  .intro-grid,
  .sets,
  .truth,
  .pl-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:640px){
  .wrap{padding:0 18px}
  .hero{
    padding:52px 18px 56px;
    gap:22px;
  }
  .hero::before{left:-8%;top:10%;width:11rem;height:11rem}
  .landing h1{font-size:clamp(34px,12vw,48px)}
  .sub{font-size:16px}
  .proof,
  .intro-grid,
  .sets,
  .truth,
  .pl-stats{
    grid-template-columns:1fr;
  }
  .dr-body{padding:28px 18px 22px;min-height:0}
  .choices{grid-template-columns:1fr}
  .jlpt-card summary{align-items:flex-start}
  .hintlbl{display:none}
  .band .wrap{padding:24px 18px}
  .band h2{max-width:unset}
  .fwrap{align-items:flex-start}
  .rt{margin-left:0;width:100%}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---- the exam band (wireframe 16c) ------------------------------------ *
 * The exam IS the graphic: one bar in three proportional rounds, then the
 * scoring as three score panels joined by "and" and a door at the end.
 * Board primitives measured off its stylesheet, scoped to .ex so .bx .tag
 * .pill .node cannot reach the rest of the landing.
 */
.ex .bx{
  border:2px solid var(--play-ink);border-radius:12px;padding:10px;
  background:var(--play-card);color:var(--play-ink);
}
.ex .tag{
  font-family:var(--play-display);font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--play-mute);
}
:root[lang="hi"] .ex .tag{text-transform:none;letter-spacing:0}
.ex .node{
  width:70px;height:70px;border-radius:50%;border:3px solid var(--play-ink);
  display:inline-flex;align-items:center;justify-content:center;font-size:28px;
  background:var(--play-card);color:var(--play-ink);flex:none;
}
.ex .node.is-done{background:var(--play-accent);box-shadow:0 6px 0 var(--play-edge)}
.ex .p-tanu{width:34px;height:34px;background:var(--play-lock)}
.ex .bub{
  margin:0;border:2px solid var(--play-ink);border-radius:12px;
  background:var(--play-card);color:var(--play-ink);padding:6px 12px;font-size:13px;
}

.ex{display:flex;flex-direction:column;gap:14px}
.ex-head{display:flex;align-items:center;gap:10px}
.ex-head .eyebrow{margin:0}
.ex-rule{flex:1;border-top:2px dashed var(--play-track);min-width:16px}
.ex-title{margin:0;line-height:1.05}
.ex-sub{margin:0;font-size:17px;color:var(--play-mute)}

/* The bar. Round 2 is literally twice Round 1 — the proportions are the
   point, so the segments carry the frame's own percentages. */
.ex-time{display:flex;flex-direction:column;gap:0;box-shadow:6px 6px 0 var(--play-edge);padding:14px}
.ex-bar{
  display:flex;align-items:stretch;margin-top:8px;height:48px;
  border:3px solid var(--play-ink);border-radius:4px;overflow:hidden;
}
.ex-seg{display:flex;align-items:center;justify-content:center;border-right:3px solid var(--play-ink)}
.ex-seg:last-child{border-right:0}
.ex-seg b{font:700 18px/1 var(--play-display)}
.ex-seg.is-r1{width:22.2%;background:var(--play-accent-soft)}
/* Ink on the ember, never white — #158. The frame sets it too. */
.ex-seg.is-r2{width:44.4%;background:var(--play-accent)}
.ex-seg.is-r2 b{font-size:20px;color:var(--play-accent-ink)}
.ex-seg.is-r3{flex:1;background:var(--play-card)}
.ex-rounds{display:flex;align-items:flex-start;margin-top:6px}
.ex-round{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.ex-round:nth-child(1){width:22.2%}
.ex-round:nth-child(2){width:44.4%}
.ex-round:nth-child(3){flex:1}
.ex-round b{font:700 13px/1.3 var(--play-display)}

/* Three conditions, joined by "and". Never a sum. */
.ex-score{display:flex;align-items:stretch;gap:12px;padding:2px;flex-wrap:wrap}
.ex-panel{width:150px;padding:0;overflow:hidden;box-shadow:0 5px 0 var(--play-edge);flex:none}
.ex-ptitle{
  display:flex;align-items:center;gap:6px;padding:4px 10px;
  background:var(--play-ink);color:var(--play-card);
}
.ex-ptitle b{font:700 12px/1 var(--play-display);margin-left:auto}
.ex-pic{font-size:14px}
.ex-ptitle .jp{font-size:14px}
.ex-pscore{display:flex;align-items:baseline;justify-content:center;gap:4px;padding:10px 0 2px}
.ex-pscore b{font:700 34px/1 var(--play-display)}
.ex-den{font-size:16px;color:var(--play-mute)}
.ex-pcap{display:block;text-align:center;padding-bottom:8px;color:var(--play-ink)}
.ex-panel.is-total{background:var(--play-accent);color:var(--play-accent-ink)}
.ex-panel.is-total .ex-den,.ex-panel.is-total .ex-pcap{color:var(--play-accent-ink)}
.ex-and{align-self:center;font-size:13px}
.ex-link{flex:1;align-self:center;border-top:3px dashed var(--play-ink);min-width:20px}
.ex-door{display:flex;flex-direction:column;align-items:center;gap:4px;align-self:center}
.ex-door b{font:700 13px/1 var(--play-display)}

.ex-says{display:flex;align-items:center;gap:8px}
.ex-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ex-footline{flex:1;text-transform:none;letter-spacing:0;font-size:13px;min-width:200px}
.ex-more{cursor:pointer;font-family:var(--play-display);font-size:12px}
#examDetails[hidden]{display:none}

@media (max-width:760px){
  /* The score panels stop being a row: three 150px tiles plus two "and"s
     and the door do not fit, and the door is the end of the sentence. */
  .ex-score{flex-direction:column;align-items:stretch}
  .ex-panel{width:auto}
  .ex-and{align-self:flex-start}
  .ex-link{display:none}
  .ex-door{flex-direction:row;gap:10px;align-self:flex-start}
  .ex .node{width:52px;height:52px;font-size:22px}
}
@media (max-width:480px){
  .ex-bar{height:40px}
  .ex-seg b{font-size:14px}
  .ex-seg.is-r2 b{font-size:15px}
  .ex-round b{font-size:11px}
  .ex .tag{font-size:.68rem}
}