/* Geology Explorer — Tutor mode styles. Cool-blue theme, scoped to the tutor.
 * Right-docked panel; matches the .floating-panel / .panel-header look.
 * Owns nothing in style.css. All selectors live under #tutor-panel / .tutor-* /
 * body.tutor-open. (index.html provides #tutor-panel, #tutor-title,
 * #btn-hide-tutor and #tutor-body; this only styles them.)
 */

/* ── docked panel ─────────────────────────────────────────────────────── */
/* Right-docked drawer that sits UNDER the top toolbar (matches geo-explorer).
   top = toolbar height; z below the topbar (50) so the bar + its search stay on top. */
#tutor-panel{
  position:fixed;top:var(--topbar-h,47px);right:0;bottom:0;width:372px;max-width:100vw;z-index:45;
  display:flex;flex-direction:column;
  background:var(--panel);border-left:1px solid var(--panel-border);
  box-shadow:-12px 0 40px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--ink)}
#tutor-panel[hidden]{display:none}

/* the topbar/app can shift left when the tutor is open (optional, harmless) */
body.tutor-open{--tutor-w:372px}

/* header — mirrors .panel-header */
#tutor-panel .tutor-head,
#tutor-panel > .panel-header{
  display:flex;align-items:center;gap:8px;padding:11px 14px;
  border-bottom:1px solid var(--panel-border);background:rgba(0,0,0,.22);flex:0 0 auto}
#tutor-title{font-weight:700;font-size:15px;letter-spacing:.2px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#btn-hide-tutor{appearance:none;cursor:pointer;border:none;background:transparent;
  color:var(--ink-dim);font-size:20px;line-height:1;padding:2px 8px;border-radius:6px}
#btn-hide-tutor:hover{background:var(--row-hover);color:var(--ink)}

/* scrolling body */
#tutor-body{flex:1 1 auto;min-height:0;overflow:auto;padding:14px}

/* ── progress bar ─────────────────────────────────────────────────────── */
.tutor-progress{height:5px;border-radius:999px;background:var(--row);overflow:hidden;margin-bottom:14px}
.tutor-progress-bar{height:100%;background:var(--accent);border-radius:999px;transition:width .3s ease}

/* ── intro + stage list (home) ────────────────────────────────────────── */
.tutor-intro{font-size:13.5px;line-height:1.6;color:var(--ink-dim);margin-bottom:14px}
.tutor-intro strong{color:var(--ink)}
.tutor-stages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.tutor-stage{display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  border:1px solid var(--panel-border);background:var(--row);border-radius:11px;
  padding:11px 12px;transition:background .12s,border-color .12s}
.tutor-stage:hover{background:var(--row-hover);border-color:var(--accent)}
.tutor-stage.done{border-color:rgba(90,168,90,.5)}
.tutor-stage.locked{cursor:default;opacity:.55}
.tutor-stage.locked:hover{background:var(--row);border-color:var(--panel-border)}
.ts-badge{flex:0 0 auto;font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;
  color:var(--accent);border:1px solid var(--panel-border);border-radius:999px;padding:2px 8px;margin-top:2px}
.ts-badge.beginner{color:#7fce82}
.ts-badge.intermediate{color:var(--accent)}
.ts-badge.advanced{color:#e0a96d}
.ts-main{flex:1;min-width:0}
.ts-title{font-weight:600;font-size:13.5px;color:var(--ink)}
.ts-sum{font-size:12px;color:var(--ink-dim);line-height:1.45;margin-top:2px}
.ts-check{color:#7fce82}
.ts-go{flex:0 0 auto;font-size:12px;color:var(--accent);font-weight:600;align-self:center}

/* ── breadcrumb / step counter ────────────────────────────────────────── */
.tutor-bc{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.tutor-link{appearance:none;cursor:pointer;border:none;background:transparent;color:var(--accent);
  font-size:12.5px;font-weight:600;padding:2px 0}
.tutor-link:hover{text-decoration:underline}
.tutor-stepcount{font-size:11.5px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.5px}

/* ── objectives ───────────────────────────────────────────────────────── */
.tutor-objs{border:1px solid var(--panel-border);background:rgba(0,0,0,.16);border-radius:10px;
  padding:10px 12px;margin-bottom:12px}
.tutor-objs-t{font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;
  color:var(--accent);margin-bottom:6px}
.tutor-objs ul{margin:0;padding-left:18px}
.tutor-objs li{font-size:12.5px;line-height:1.5;color:var(--ink-dim);margin-bottom:3px}

/* ── content cards (lesson / task / quiz) ─────────────────────────────── */
.tutor-card{border:1px solid var(--panel-border);background:var(--row);border-radius:11px;
  padding:13px 14px;margin-bottom:14px}
.tutor-card.task{border-color:rgba(68,170,255,.35)}
.tutor-card.quiz{border-color:rgba(224,169,109,.35)}
.tutor-card h3{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--ink)}
.tutor-tag{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.7px;
  font-weight:700;color:var(--accent-ink);background:var(--accent);border-radius:999px;
  padding:2px 9px;margin-bottom:8px}
.tutor-card.quiz .tutor-tag{background:#e0a96d}
.tutor-prose{font-size:13.5px;line-height:1.62;color:var(--ink)}
.tutor-prose p{margin:0 0 9px}
.tutor-prose p:last-child{margin-bottom:0}
.tutor-prose ul{margin:6px 0;padding-left:20px}
.tutor-prose li{margin-bottom:5px;line-height:1.5}
.tutor-prose strong{color:var(--ink)}
.tutor-prose em{color:var(--accent);font-style:normal}

.tutor-hint{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--ink-dim);
  background:rgba(68,170,255,.08);border:1px solid var(--panel-border);border-radius:8px;padding:8px 10px}

/* ── quiz question + choices ──────────────────────────────────────────── */
.tutor-q{font-size:14.5px;font-weight:600;line-height:1.45;color:var(--ink);margin-bottom:11px}
.tutor-choices{display:flex;flex-direction:column;gap:7px}
.tutor-choice{appearance:none;cursor:pointer;text-align:left;border:1px solid var(--panel-border);
  background:var(--row);color:var(--ink);border-radius:8px;padding:9px 11px;font-size:13.5px;
  transition:background .12s,border-color .12s}
.tutor-choice:hover:not(:disabled){background:var(--row-hover);border-color:var(--accent)}
.tutor-choice:disabled{cursor:default;opacity:.9}
.tutor-choice.correct{background:rgba(86,170,90,.22);border-color:#5aa85a;color:#e7f5e7;font-weight:600}
.tutor-choice.wrong{background:rgba(190,70,70,.22);border-color:#c45a5a;color:#f5e7e7}
.tutor-choice.wrong:disabled{opacity:.7}

/* ── typed-answer quiz ────────────────────────────────────────────────── */
.tutor-input-row{display:flex;gap:7px;align-items:stretch}
.tutor-input{flex:1;min-width:0;appearance:none;border:1px solid var(--panel-border);
  background:var(--row);color:var(--ink);border-radius:8px;padding:9px 11px;font-size:13.5px}
.tutor-input:focus{outline:none;border-color:var(--accent)}
.tutor-input:disabled{opacity:.7;cursor:default}
.tutor-input-go{flex:0 0 auto;white-space:nowrap}

/* ── check / feedback message ─────────────────────────────────────────── */
.tutor-checkmsg{margin-top:10px;font-size:12.8px;line-height:1.5;min-height:1px}
.tutor-checkmsg:empty{margin-top:0}
.tutor-checkmsg.ok{color:#7fce82;font-weight:600}
.tutor-checkmsg.no{color:#e98b8b;font-weight:600}

/* ── footer controls ──────────────────────────────────────────────────── */
.tutor-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.tutor-foot.center{flex-direction:column;align-items:stretch;gap:9px;margin-top:14px}
.tutor-btn{appearance:none;cursor:pointer;border:1px solid var(--panel-border);background:var(--row);
  color:var(--ink);border-radius:8px;padding:8px 15px;font-size:13px;font-weight:600;
  transition:background .12s,border-color .12s,opacity .12s}
.tutor-btn:hover:not(.disabled):not(:disabled){background:var(--row-hover);border-color:var(--accent)}
.tutor-btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.tutor-btn.primary:hover:not(.disabled):not(:disabled){filter:brightness(1.08)}
.tutor-btn.disabled,.tutor-btn:disabled{opacity:.4;cursor:default}

/* ── stage complete ───────────────────────────────────────────────────── */
.tutor-done{text-align:center;padding:18px 6px 6px}
.tutor-done-badge{width:54px;height:54px;margin:0 auto 12px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;
  color:var(--accent-ink);background:var(--accent);box-shadow:0 0 0 6px rgba(68,170,255,.18)}
.tutor-done h3{margin:0 0 6px;font-size:18px;font-weight:700;color:var(--ink)}
.tutor-done p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-dim)}
.tutor-done p strong{color:var(--ink)}
.tutor-alldone{font-size:13.5px;line-height:1.6;color:var(--ink);background:rgba(68,170,255,.1);
  border:1px solid var(--panel-border);border-radius:10px;padding:11px 12px}

/* ── responsive ───────────────────────────────────────────────────────── */
@media(max-width:640px){
  #tutor-panel{width:100vw;border-left:none}
}