/* Java Quiz — archive hub + take + report (+ focus mode, sticky timer, map) */

.jil-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* ---- Archive practice hub ---- */
.jil-quiz-hub{padding-bottom:72px}
.jil-quiz-hub-hero{
  display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:end;
  padding:48px 0 28px;border-bottom:1px solid var(--jil-line)
}
.jil-quiz-hub-hero h1{
  font-family:var(--jil-disp);font-weight:700;font-size:clamp(30px,4.2vw,46px);
  letter-spacing:-1.2px;margin:0 0 10px;line-height:1.08
}
.jil-quiz-hub-lead{margin:0;color:var(--jil-muted);font-size:16px;line-height:1.55;max-width:42ch}
.jil-quiz-hub-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px
}
.jil-quiz-hub-stat{
  padding:14px 12px;border-radius:14px;text-align:center;
  background:var(--jil-panel);border:1px solid var(--jil-line)
}
.jil-quiz-hub-stat-n{
  display:block;font-family:var(--jil-mono);font-size:clamp(20px,2.4vw,26px);
  font-weight:700;color:var(--jil-amber);line-height:1.1
}
.jil-quiz-hub-stat-l{
  display:block;margin-top:6px;font-family:var(--jil-mono);font-size:11px;
  letter-spacing:.4px;text-transform:uppercase;color:var(--jil-faint)
}

.jil-quiz-hub-toolbar-wrap{
  position:sticky;top:calc(var(--jil-promo-h,0px) + var(--jil-nav-h,48px));z-index:35;
  background:color-mix(in srgb,var(--jil-bg) 92%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--jil-line);margin-bottom:28px
}
body.admin-bar .jil-quiz-hub-toolbar-wrap{top:calc(32px + var(--jil-promo-h,0px) + var(--jil-nav-h,48px))}
@media(max-width:782px){
  body.admin-bar .jil-quiz-hub-toolbar-wrap{top:calc(46px + var(--jil-promo-h,0px) + var(--jil-nav-h,48px))}
}
.jil-quiz-hub-toolbar{padding:14px 0 16px;display:flex;flex-direction:column;gap:12px}
.jil-quiz-hub-search{display:block}
.jil-quiz-hub-search input{
  width:100%;max-width:420px;height:42px;padding:0 14px;border-radius:11px;
  border:1px solid var(--jil-line);background:var(--jil-panel);color:var(--jil-text);
  font-family:var(--jil-mono);font-size:13.5px;outline:none
}
.jil-quiz-hub-search input:focus{border-color:var(--jil-amber)}
.jil-quiz-hub-filters{
  display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:thin
}
.jil-quiz-hub-chip{
  appearance:none;cursor:pointer;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--jil-line);background:var(--jil-bg-2);
  font-family:var(--jil-mono);font-size:12px;font-weight:600;color:var(--jil-muted);
  transition:border-color .15s,color .15s,background .15s
}
.jil-quiz-hub-chip:hover{border-color:var(--jil-faint);color:var(--jil-text)}
.jil-quiz-hub-chip.is-active{
  border-color:var(--jil-amber);color:var(--jil-amber);
  background:color-mix(in srgb,var(--jil-amber) 12%,var(--jil-bg-2))
}
.jil-quiz-hub-chip-n{
  font-size:11px;opacity:.75;padding:1px 6px;border-radius:999px;
  background:color-mix(in srgb,var(--jil-text) 8%,transparent)
}

.jil-quiz-hub-body{display:flex;flex-direction:column;gap:34px}
.jil-quiz-hub-section.is-hidden{display:none}
.jil-quiz-hub-section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--jil-line)
}
.jil-quiz-hub-section-head h2{
  margin:0;font-family:var(--jil-disp);font-size:22px;letter-spacing:-.4px;font-weight:700
}
.jil-quiz-hub-section-meta{font-family:var(--jil-mono);font-size:12px;color:var(--jil-faint)}
.jil-quiz-hub-list{display:flex;flex-direction:column;gap:10px}
.jil-quiz-hub-empty{color:var(--jil-muted);font-family:var(--jil-mono);font-size:13.5px;margin:8px 0 0}

.jil-quiz-row{
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  padding:16px 18px;border-radius:14px;text-decoration:none;color:inherit;
  background:var(--jil-panel);border:1px solid var(--jil-line);
  transition:border-color .16s,transform .16s,background .16s
}
.jil-quiz-row:hover{
  border-color:var(--jil-amber);transform:translateY(-1px);color:inherit;
  background:color-mix(in srgb,var(--jil-amber) 4%,var(--jil-panel))
}
.jil-quiz-row.is-hidden{display:none}
.jil-quiz-row-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.jil-quiz-row-timer,.jil-quiz-row-untimed,.jil-quiz-row-score{
  font-family:var(--jil-mono);font-size:11.5px;color:var(--jil-faint)
}
.jil-quiz-row-timer{color:var(--jil-amber)}
.jil-quiz-row-score{
  color:var(--jil-green);border:1px solid color-mix(in srgb,var(--jil-green) 35%,transparent);
  background:color-mix(in srgb,var(--jil-green) 10%,transparent);
  padding:3px 8px;border-radius:999px
}
.jil-quiz-row h3{
  margin:0 0 6px;font-family:var(--jil-disp);font-size:18px;letter-spacing:-.3px;line-height:1.25
}
.jil-quiz-row p{margin:0;color:var(--jil-muted);font-size:14px;line-height:1.45;max-width:62ch}
.jil-quiz-row-side{
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:88px
}
.jil-quiz-row-count{
  font-family:var(--jil-mono);font-size:13px;font-weight:700;color:var(--jil-text);
  padding:6px 10px;border-radius:9px;border:1px solid var(--jil-line);background:var(--jil-bg-2)
}

/* Legacy card grid (kept if used elsewhere) */
.jil-quiz-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;padding-bottom:60px
}
.jil-quiz-card{
  display:flex;flex-direction:column;gap:10px;padding:22px 20px;border-radius:16px;
  background:var(--jil-panel);border:1px solid var(--jil-line);transition:border-color .16s,transform .16s;
  color:inherit;text-decoration:none;min-height:180px
}
.jil-quiz-card:hover{border-color:var(--jil-amber);transform:translateY(-2px);color:inherit}
.jil-quiz-card-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.jil-quiz-badge{
  font-family:var(--jil-mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;
  color:var(--jil-amber);border:1px solid color-mix(in srgb,var(--jil-amber) 40%,transparent);
  background:color-mix(in srgb,var(--jil-amber) 10%,transparent);padding:4px 9px;border-radius:6px
}
.jil-quiz-topic{font-family:var(--jil-mono);font-size:12px;color:var(--jil-faint)}
.jil-quiz-card h3{font-family:var(--jil-disp);font-size:20px;margin:0;letter-spacing:-.3px;line-height:1.25}
.jil-quiz-card p{margin:0;color:var(--jil-muted);font-size:14.5px;line-height:1.5;flex:1}
.jil-quiz-card-foot{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-family:var(--jil-mono);font-size:12.5px;color:var(--jil-faint);margin-top:8px
}
.jil-quiz-start{display:inline-flex;align-items:center;gap:6px;color:var(--jil-amber);font-weight:600}

@media(max-width:900px){
  .jil-quiz-hub-hero{grid-template-columns:1fr;gap:20px}
  .jil-quiz-hub-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .jil-quiz-row{grid-template-columns:1fr;gap:12px}
  .jil-quiz-row-side{flex-direction:row;justify-content:space-between;align-items:center;min-width:0}
  .jil-quiz-hub-search input{max-width:none}
}

/* ---- Single quiz ---- */
.jil-quiz-single{padding:48px 0 70px;max-width:780px}
.jil-quiz-head h1{font-family:var(--jil-disp);font-size:clamp(28px,4vw,40px);letter-spacing:-1px;margin:0 0 12px}
.jil-quiz-intro{color:var(--jil-muted);margin:0 0 16px;line-height:1.55}
.jil-quiz-meta{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--jil-mono);font-size:13px;color:var(--jil-faint);margin-bottom:20px}

/* Sticky progress / timer / mode */
.jil-quiz-sticky{
  position:sticky;top:calc(var(--jil-promo-h,0px) + var(--jil-nav-h,48px));z-index:40;margin:0 0 20px;
  background:color-mix(in srgb,var(--jil-bg) 92%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--jil-line);border-radius:14px;
  box-shadow:0 8px 28px color-mix(in srgb,#000 28%,transparent)
}
.jil-quiz-sticky-submit{
  padding:7px 14px !important;font-size:13px !important;min-height:0 !important
}
.jil-quiz-sticky-inner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 14px
}
.jil-quiz-sticky-left,.jil-quiz-sticky-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.jil-quiz-sticky-progress{
  font-family:var(--jil-mono);font-size:13px;font-weight:600;color:var(--jil-text)
}
.jil-quiz-sticky-answered{
  font-family:var(--jil-mono);font-size:12px;color:var(--jil-faint)
}
.jil-quiz-sticky-timer{
  font-family:var(--jil-mono);font-size:14px;font-weight:700;color:var(--jil-amber);
  padding:6px 10px;border-radius:8px;
  background:color-mix(in srgb,var(--jil-amber) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--jil-amber) 35%,transparent);
  min-width:5.5rem;text-align:center
}
.jil-quiz-sticky-timer.is-low{
  color:#f87171;
  background:color-mix(in srgb,#f87171 12%,transparent);
  border-color:color-mix(in srgb,#f87171 40%,transparent)
}

.jil-quiz-mode{
  display:inline-flex;padding:3px;border-radius:10px;border:1px solid var(--jil-line);
  background:var(--jil-bg-2)
}
.jil-quiz-mode-btn{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--jil-mono);font-size:12px;font-weight:600;color:var(--jil-faint);
  padding:6px 10px;border-radius:7px;transition:background .15s,color .15s
}
.jil-quiz-mode-btn.is-active{
  background:color-mix(in srgb,var(--jil-amber) 18%,transparent);color:var(--jil-amber)
}
.jil-quiz-map-toggle{
  appearance:none;cursor:pointer;
  font-family:var(--jil-mono);font-size:12px;font-weight:600;color:var(--jil-muted);
  padding:7px 12px;border-radius:9px;border:1px solid var(--jil-line);background:var(--jil-panel);
  transition:border-color .15s,color .15s,background .15s
}
.jil-quiz-map-toggle[aria-expanded="true"],.jil-quiz-map-toggle:hover{
  border-color:var(--jil-amber);color:var(--jil-amber)
}

/* Question map */
.jil-quiz-map{
  border-top:1px solid var(--jil-line);padding:12px 14px 14px
}
.jil-quiz-map-head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--jil-mono);font-size:12px;color:var(--jil-faint);margin-bottom:10px
}
.jil-quiz-map-legend{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.jil-quiz-map-legend .is-dot{
  width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:2px;
  background:var(--jil-line);border:1px solid var(--jil-faint);vertical-align:middle
}
.jil-quiz-map-legend .is-dot.is-current{background:var(--jil-amber);border-color:var(--jil-amber)}
.jil-quiz-map-legend .is-dot.is-answered{
  background:color-mix(in srgb,var(--jil-green) 70%,transparent);border-color:var(--jil-green)
}
.jil-quiz-map-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:8px
}
.jil-quiz-map-btn{
  appearance:none;cursor:pointer;aspect-ratio:1;border-radius:10px;
  border:1px solid var(--jil-line);background:var(--jil-bg-2);
  font-family:var(--jil-mono);font-size:12px;font-weight:600;color:var(--jil-muted);
  transition:border-color .15s,background .15s,color .15s,transform .12s
}
.jil-quiz-map-btn:hover{border-color:var(--jil-faint);transform:translateY(-1px)}
.jil-quiz-map-btn.is-answered{
  border-color:color-mix(in srgb,var(--jil-green) 45%,var(--jil-line));
  background:color-mix(in srgb,var(--jil-green) 12%,var(--jil-bg-2));
  color:var(--jil-text)
}
.jil-quiz-map-btn.is-current{
  border-color:var(--jil-amber);
  background:color-mix(in srgb,var(--jil-amber) 16%,var(--jil-bg-2));
  color:var(--jil-amber);box-shadow:0 0 0 1px color-mix(in srgb,var(--jil-amber) 35%,transparent)
}

/* Questions */
.jil-quiz-q{
  background:var(--jil-panel);border:1px solid var(--jil-line);border-radius:14px;
  padding:20px 22px;margin:0 0 16px
}
.jil-quiz-q.is-hidden{display:none}
.jil-quiz-q-num{font-family:var(--jil-mono);font-size:12px;color:var(--jil-amber);margin-bottom:8px}
.jil-quiz-q-prompt{font-size:16.5px;font-weight:600;margin:0 0 14px;line-height:1.4;color:var(--jil-text);white-space:pre-wrap}
.jil-quiz-opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.jil-quiz-opt{
  display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;
  border:1px solid var(--jil-line);background:var(--jil-bg-2);cursor:pointer;transition:border-color .15s,background .15s
}
.jil-quiz-opt:hover{border-color:var(--jil-faint)}
.jil-quiz-opt.is-selected{border-color:var(--jil-amber);background:color-mix(in srgb,var(--jil-amber) 10%,var(--jil-bg-2))}
.jil-quiz-opt input{margin-top:3px;accent-color:var(--jil-amber)}
.jil-quiz-opt span,.jil-quiz-opt-text{flex:1;line-height:1.45;color:var(--jil-muted);white-space:pre-wrap;font-family:var(--jil-mono);font-size:13.5px}

.jil-quiz-focus-nav{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:4px 0 16px
}
.jil-quiz-focus-nav.is-hidden{display:none}
.jil-quiz-focus-nav .jil-btn{min-width:110px;justify-content:center}
.jil-quiz-focus-nav #jil-quiz-next{margin-left:auto}

.jil-quiz-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;padding-top:8px}
.jil-quiz-take.is-focus #jil-quiz-actions{display:none}
.jil-quiz-take.is-focus.is-last #jil-quiz-actions{display:flex}
.jil-quiz-take.is-all .jil-quiz-focus-nav{display:none}

.jil-quiz-report{margin-top:8px}
.jil-quiz-score-card{
  text-align:center;padding:36px 28px;border-radius:18px;margin-bottom:24px;
  background:linear-gradient(150deg,var(--jil-panel),var(--jil-bg-2));border:1px solid var(--jil-line)
}
.jil-quiz-score-card .pct{
  font-family:var(--jil-mono);font-size:clamp(48px,8vw,72px);font-weight:700;color:var(--jil-amber);line-height:1
}
.jil-quiz-score-card .sub{color:var(--jil-muted);margin:10px 0 18px;font-size:15px}
.jil-quiz-result{
  border:1px solid var(--jil-line);border-radius:14px;padding:18px 20px;margin:0 0 12px;background:var(--jil-panel)
}
.jil-quiz-result.is-correct{border-color:color-mix(in srgb,var(--jil-green) 45%,var(--jil-line))}
.jil-quiz-result.is-wrong{border-color:color-mix(in srgb,#f87171 40%,var(--jil-line))}
.jil-quiz-result-flag{
  font-family:var(--jil-mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px
}
.jil-quiz-result.is-correct .jil-quiz-result-flag{color:var(--jil-green)}
.jil-quiz-result.is-wrong .jil-quiz-result-flag{color:#f87171}
.jil-quiz-result .prompt{font-weight:600;margin:0 0 10px;line-height:1.4;white-space:pre-wrap}
.jil-quiz-result .ans{font-size:14px;color:var(--jil-muted);margin:4px 0}
.jil-quiz-result .expl{
  margin-top:10px;padding:10px 12px;border-radius:8px;background:var(--jil-bg-2);
  font-size:14px;color:var(--jil-muted);line-height:1.5
}

/* Account for WP admin bar */
body.admin-bar .jil-quiz-sticky{top:calc(32px + var(--jil-promo-h,0px) + var(--jil-nav-h,48px))}
@media(max-width:782px){
  body.admin-bar .jil-quiz-sticky{top:calc(46px + var(--jil-promo-h,0px) + var(--jil-nav-h,48px))}
}
@media(max-width:560px){
  .jil-quiz-actions{flex-direction:column}
  .jil-quiz-actions .jil-btn{width:100%;justify-content:center}
  .jil-quiz-focus-nav{flex-direction:column}
  .jil-quiz-focus-nav .jil-btn{width:100%;margin-left:0 !important}
  .jil-quiz-sticky-inner{padding:10px 12px}
  .jil-quiz-map-grid{grid-template-columns:repeat(auto-fill,minmax(36px,1fr))}
}