/* Practice Studio Teacher Portal
   Scoped to #teacher / .teacherPortal so the rest of the website remains unchanged. */

#teacher .teacherPortalPagehead { margin-bottom: 24px; }
#teacher .teacherPortal { --tp-border:#d8dee8; --tp-soft:#f6f8fb; --tp-ink:#111827; --tp-muted:#5f6f86; --tp-gold:#f4c95d; --tp-gold-soft:#fff5d7; }
#teacher .teacherPortalLoading { padding:48px; text-align:center; color:var(--tp-muted); }
#teacher .tpLayout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(310px,.72fr); gap:22px; align-items:start; }
#teacher .tpPanel, #teacher .tpAssignment {
  background:#fff; border:1px solid var(--tp-border); border-radius:16px;
  box-shadow:0 12px 34px rgba(15,23,42,.08);
}
#teacher .tpPanel { padding:24px; }
#teacher .tpAssignment { padding:22px; position:sticky; top:18px; }
#teacher .tpSection + .tpSection { margin-top:26px; }
#teacher .tpStepTitle { font-size:18px; margin:0 0 12px; color:var(--tp-ink); }
#teacher .tpLabel { display:block; font-size:12px; font-weight:800; letter-spacing:.04em; color:#394861; margin:0 0 6px; }
#teacher .tpFieldGrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#teacher .tpFieldGrid.tpThree { grid-template-columns:1fr 1fr 1fr; }
#teacher .tpField { min-width:0; }
#teacher .tpField input, #teacher .tpField select, #teacher .tpSearch {
  width:100%; box-sizing:border-box; min-height:44px; padding:10px 12px;
  border:1px solid #cbd5e1; border-radius:10px; background:#fff; color:#111827; font:inherit;
}
#teacher .tpField input:focus, #teacher .tpField select:focus, #teacher .tpSearch:focus {
  outline:2px solid rgba(244,201,93,.45); border-color:#d7a92d;
}
#teacher .tpPrivacy {
  display:flex; gap:8px; align-items:flex-start; margin-top:8px; padding:9px 11px;
  border-radius:10px; background:#f8fafc; color:var(--tp-muted); font-size:12px; line-height:1.4;
}
#teacher .tpPrivacy strong { color:#334155; white-space:nowrap; }
#teacher .tpPrivacy a { color:#725611; text-decoration:underline; }
#teacher .tpStudentHistory { margin-bottom:12px; }
#teacher .tpFeatureChips { display:flex; flex-wrap:wrap; gap:8px; }
#teacher .tpFeatureChip {
  border:1px solid #cbd5e1; background:#f3f6fa; color:#22324a; border-radius:9px;
  padding:8px 10px; font-weight:700; font-size:13px; cursor:pointer;
}
#teacher .tpFeatureChip:hover { border-color:#d7a92d; background:#fff8e7; }
#teacher .tpFeatureChip.active { background:var(--tp-gold); border-color:var(--tp-gold); color:#111827; }
#teacher .tpContextHint { margin-top:10px; color:var(--tp-muted); font-size:12px; line-height:1.4; }
#teacher .tpSkillPicker { min-height:160px; border:1px solid var(--tp-border); border-radius:12px; padding:14px; background:#fff; }
#teacher .tpPickerHeader { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; margin-bottom:10px; }
#teacher .tpPickerHeader h4 { margin:0 0 4px; font-size:17px; }
#teacher .tpPickerHeader p { margin:0; color:var(--tp-muted); font-size:13px; }
#teacher .tpPickerActions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
#teacher .tpButton {
  border:0; border-radius:9px; background:var(--tp-gold); color:#111827; font-weight:800;
  padding:9px 13px; cursor:pointer; font:inherit;
}
#teacher .tpButton:hover { filter:brightness(.98); transform:translateY(-1px); }
#teacher .tpButton.secondary { background:#edf2f7; border:1px solid #cbd5e1; color:#22324a; }
#teacher .tpButton.text { background:transparent; border:0; color:#6b5420; padding:7px 4px; }
#teacher .tpButton.danger { background:#fff1f1; color:#9b1c1c; border:1px solid #f0b9b9; }
#teacher .tpButton:disabled { opacity:.48; cursor:default; transform:none; }
#teacher .tpGuidedToolbar { display:flex; align-items:center; gap:10px; margin:12px 0 8px; }
#teacher .tpGuidedToolbar .tpSearch { flex:1; }
#teacher .tpSkillList { border-top:1px solid #e5eaf0; }
#teacher .tpSkillRow {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:12px 4px; border-bottom:1px solid #e5eaf0;
}
#teacher .tpSkillTitle { font-weight:750; color:#172033; line-height:1.25; }
#teacher .tpSkillSub { color:var(--tp-muted); font-size:12px; margin-top:4px; line-height:1.4; }
#teacher .tpBadge {
  display:inline-flex; align-items:center; border-radius:999px; padding:3px 7px; font-size:10px;
  font-weight:850; text-transform:uppercase; letter-spacing:.05em; background:#eef2f7; color:#536174;
}
#teacher .tpBadge.explore { background:#fff3c7; color:#785a00; }
#teacher .tpBadge.guided { background:#e7f5ec; color:#17633a; }
#teacher .tpAssignment .eyebrow { display:block; margin-bottom:12px; }
#teacher .tpAssignment h2 { margin:0 0 5px; font-size:22px; }
#teacher .tpAssignmentMeta { color:var(--tp-muted); font-size:12px; margin-bottom:14px; }
#teacher .tpAssignmentEmpty { color:var(--tp-muted); padding:12px 0 18px; }
#teacher .tpAssignmentGroup { border-top:1px solid #e5eaf0; padding-top:12px; margin-top:12px; }
#teacher .tpAssignmentGroupHead { display:flex; justify-content:space-between; gap:8px; align-items:baseline; margin-bottom:4px; }
#teacher .tpAssignmentGroupHead strong { font-size:14px; }
#teacher .tpAssignedItem { padding:9px 0; border-top:1px dashed #e0e6ed; }
#teacher .tpAssignedItem:first-of-type { border-top:0; }
#teacher .tpAssignedTop { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
#teacher .tpAssignedTitle { font-size:13px; font-weight:750; color:#1d2738; line-height:1.3; }
#teacher .tpAssignedSub { color:var(--tp-muted); font-size:11px; line-height:1.35; margin-top:3px; }
#teacher .tpRemove {
  border:0; background:transparent; color:#8b2635; cursor:pointer; font-weight:700; padding:2px 0 2px 7px;
}
#teacher .tpAssignmentFoot { border-top:1px solid #e5eaf0; margin-top:16px; padding-top:14px; display:grid; gap:9px; }
#teacher .tpCountLine { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#teacher .tpShareResult { padding:10px; border-radius:9px; background:#f8fafc; font-size:12px; word-break:break-all; color:#445268; }
#teacher .tpStatus { min-height:18px; color:#536174; font-size:12px; line-height:1.35; }
#teacher .tpStatus.error { color:#a32626; }
#teacher .tpStatus.success { color:#17633a; }
#teacher .tpExploreOverlay {
  position:fixed; inset:0; z-index:10010; background:rgba(4,8,18,.78);
  display:none; align-items:flex-start; justify-content:center; overflow:auto; padding:24px;
}
#teacher .tpExploreOverlay.open { display:flex; }
#teacher .tpExploreDialog {
  width:min(980px,100%); min-height:calc(100vh - 48px); background:#f7f8fb; border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.35); overflow:hidden;
}
#teacher .tpExploreTop {
  position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; background:#07101f; color:#fff; border-bottom:1px solid rgba(255,255,255,.12);
}
#teacher .tpExploreTop h2 { margin:0; font-size:20px; }
#teacher .tpExploreBody { padding:20px; }
#teacher .tpConfigIntro { color:var(--tp-muted); margin:0 0 15px; }
#teacher .tpConfigGrid { display:grid; gap:12px; }
#teacher .tpConfigCard { background:#fff; border:1px solid var(--tp-border); border-radius:12px; padding:14px; }
#teacher .tpConfigCard h3 { margin:0 0 4px; font-size:15px; }
#teacher .tpConfigCard p { margin:0 0 10px; color:var(--tp-muted); font-size:12px; line-height:1.4; }
#teacher .tpOptions { display:flex; flex-wrap:wrap; gap:7px; }
#teacher .tpOption {
  border:1px solid #cbd5e1; background:#f7f9fc; color:#27364d; border-radius:9px;
  padding:7px 9px; font-size:12px; font-weight:650; cursor:pointer;
}
#teacher .tpOption.selected { background:#fff0b9; border-color:#d2a52d; color:#3e3007; }
#teacher .tpConfigSelect { width:100%; min-height:42px; border:1px solid #cbd5e1; border-radius:9px; padding:8px 10px; background:#fff; }
#teacher .tpConfigNumber { display:flex; gap:10px; align-items:center; }
#teacher .tpConfigNumber input[type=range] { flex:1; }
#teacher .tpConfigFooter { display:flex; justify-content:flex-end; gap:9px; padding-top:14px; }
#teacher .tpExploreResults { margin-top:16px; background:#fff; border:1px solid var(--tp-border); border-radius:12px; padding:14px; }
#teacher .tpExploreResultRow {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start;
  padding:10px 0; border-bottom:1px solid #e7ebf0;
}
#teacher .tpExploreResultRow:last-child { border-bottom:0; }
#teacher .tpExploreResultRow input { margin-top:3px; }
#teacher .tpPayloadDialog { position:fixed; inset:0; z-index:10020; background:rgba(4,8,18,.78); display:none; align-items:center; justify-content:center; padding:20px; }
#teacher .tpPayloadDialog.open { display:flex; }
#teacher .tpPayloadCard { width:min(820px,100%); max-height:85vh; background:#fff; border-radius:14px; padding:18px; overflow:auto; }
#teacher .tpPayloadCard pre { white-space:pre-wrap; font-size:11px; background:#0b1220; color:#e6edf7; padding:14px; border-radius:9px; overflow:auto; }
#teacher .tpTiny { font-size:11px; color:var(--tp-muted); line-height:1.4; }
#teacher .tpDivider { height:1px; background:#e5eaf0; margin:10px 0; }
#teacher .tpHidden { display:none !important; }

@media (max-width: 900px) {
  #teacher .tpLayout { grid-template-columns:1fr; }
  #teacher .tpAssignment { position:static; }
}
@media (max-width: 650px) {
  #teacher .tpPanel { padding:16px; }
  #teacher .tpFieldGrid, #teacher .tpFieldGrid.tpThree { grid-template-columns:1fr; }
  #teacher .tpPickerHeader { display:block; }
  #teacher .tpPickerActions { justify-content:flex-start; margin-top:10px; }
  #teacher .tpExploreOverlay { padding:0; }
  #teacher .tpExploreDialog { min-height:100vh; border-radius:0; }
}

/* v0.4.1 — app-parity Explore selectors */
#teacher .tpPianoSelector{position:relative;max-width:660px;margin:12px 0 4px;padding-top:46px}
#teacher .tpPianoNaturals{display:grid;grid-template-columns:repeat(7,1fr);height:112px}
#teacher .tpPianoWhite{position:relative;border:1px solid #8893a4;border-right:0;background:linear-gradient(#fff,#f2f2ef);color:#1b2433;border-radius:0 0 5px 5px;cursor:pointer;padding:0}
#teacher .tpPianoWhite:first-child{border-radius:5px 0 0 5px}
#teacher .tpPianoWhite:last-child{border-right:1px solid #8893a4;border-radius:0 5px 5px 0}
#teacher .tpPianoWhite span{position:absolute;bottom:9px;left:0;right:0;font-weight:800;font-size:12px}
#teacher .tpPianoWhite.selected{background:linear-gradient(#fff7d0,#f4c95d);box-shadow:inset 0 0 0 2px #d6a62d}
#teacher .tpPianoWhite.disabled{opacity:.3}
#teacher .tpPianoAccidentals{position:absolute;top:0;left:0;right:0;height:82px;display:grid;grid-template-columns:repeat(5,1fr);padding-left:7.1%;padding-right:7.1%;pointer-events:none}
#teacher .tpPianoBlackSlot{position:relative;pointer-events:none}
#teacher .tpPianoBlackPair{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:3px;pointer-events:auto}
#teacher .tpPianoBlack{width:42px;min-height:70px;border:1px solid #080b11;background:linear-gradient(#222b37,#05070b);color:#fff;border-radius:0 0 5px 5px;font-weight:800;font-size:10px;cursor:pointer;padding:42px 2px 4px}
#teacher .tpPianoBlack.selected{background:linear-gradient(#725c1e,#1d180a);box-shadow:inset 0 0 0 2px #f4c95d;color:#ffe99f}
#teacher .tpSelectionLinks{display:flex;gap:12px;margin-top:7px}
#teacher .tpExploreResultRow.duplicate{background:#fafbfd;border-radius:8px;padding-left:8px;padding-right:8px}
#teacher .tpAlreadyInFocus{display:inline-flex;align-items:center;justify-content:center;min-width:118px;padding:5px 8px;border-radius:999px;background:#e7f5ec;color:#17633a;font-size:11px;font-weight:800}
@media(max-width:650px){
  #teacher .tpPianoBlack{width:34px;font-size:9px}
  #teacher .tpPianoSelector{padding-top:40px}
  #teacher .tpPianoNaturals{height:100px}
}

/* v0.4.4 — required-field validation, layered on the stable v0.4.2 Teacher Portal */
#teacher .tpRequired{color:#b42318;font-weight:900}
#teacher .tpFieldError{margin-top:5px;color:#b42318;font-size:12px;font-weight:650}
#teacher input.invalid{border-color:#b42318;box-shadow:0 0 0 1px #b42318}
#teacher .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}

/* v0.4.6 targeted Guided UX fixes */
#teacher .tpLevelStepper{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;gap:7px;align-items:center}
#teacher .tpLevelStepper select{width:100%}
#teacher .tpLevelArrow{height:38px;border:1px solid #c8ced8;border-radius:8px;background:#fff;color:#172033;font-size:20px;line-height:1;cursor:pointer}
#teacher .tpLevelArrow:hover:not(:disabled){background:#f3f5f8}
#teacher .tpLevelArrow:disabled{opacity:.32;cursor:default}
#teacher .tpSkillRow[hidden]{display:none!important}

/* Public Explore intentionally reuses Teacher Portal presentation rules. */

/* Practice Studio Teacher Portal
   Scoped to #exploreDetail / .teacherPortal so the rest of the website remains unchanged. */

#exploreDetail .teacherPortalPagehead { margin-bottom: 24px; }
#exploreDetail .teacherPortal { --tp-border:#d8dee8; --tp-soft:#f6f8fb; --tp-ink:#111827; --tp-muted:#5f6f86; --tp-gold:#f4c95d; --tp-gold-soft:#fff5d7; }
#exploreDetail .teacherPortalLoading { padding:48px; text-align:center; color:var(--tp-muted); }
#exploreDetail .tpLayout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(310px,.72fr); gap:22px; align-items:start; }
#exploreDetail .tpPanel, #exploreDetail .tpAssignment {
  background:#fff; border:1px solid var(--tp-border); border-radius:16px;
  box-shadow:0 12px 34px rgba(15,23,42,.08);
}
#exploreDetail .tpPanel { padding:24px; }
#exploreDetail .tpAssignment { padding:22px; position:sticky; top:18px; }
#exploreDetail .tpSection + .tpSection { margin-top:26px; }
#exploreDetail .tpStepTitle { font-size:18px; margin:0 0 12px; color:var(--tp-ink); }
#exploreDetail .tpLabel { display:block; font-size:12px; font-weight:800; letter-spacing:.04em; color:#394861; margin:0 0 6px; }
#exploreDetail .tpFieldGrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#exploreDetail .tpFieldGrid.tpThree { grid-template-columns:1fr 1fr 1fr; }
#exploreDetail .tpField { min-width:0; }
#exploreDetail .tpField input, #exploreDetail .tpField select, #exploreDetail .tpSearch {
  width:100%; box-sizing:border-box; min-height:44px; padding:10px 12px;
  border:1px solid #cbd5e1; border-radius:10px; background:#fff; color:#111827; font:inherit;
}
#exploreDetail .tpField input:focus, #exploreDetail .tpField select:focus, #exploreDetail .tpSearch:focus {
  outline:2px solid rgba(244,201,93,.45); border-color:#d7a92d;
}
#exploreDetail .tpPrivacy {
  display:flex; gap:8px; align-items:flex-start; margin-top:8px; padding:9px 11px;
  border-radius:10px; background:#f8fafc; color:var(--tp-muted); font-size:12px; line-height:1.4;
}
#exploreDetail .tpPrivacy strong { color:#334155; white-space:nowrap; }
#exploreDetail .tpPrivacy a { color:#725611; text-decoration:underline; }
#exploreDetail .tpStudentHistory { margin-bottom:12px; }
#exploreDetail .tpFeatureChips { display:flex; flex-wrap:wrap; gap:8px; }
#exploreDetail .tpFeatureChip {
  border:1px solid #cbd5e1; background:#f3f6fa; color:#22324a; border-radius:9px;
  padding:8px 10px; font-weight:700; font-size:13px; cursor:pointer;
}
#exploreDetail .tpFeatureChip:hover { border-color:#d7a92d; background:#fff8e7; }
#exploreDetail .tpFeatureChip.active { background:var(--tp-gold); border-color:var(--tp-gold); color:#111827; }
#exploreDetail .tpContextHint { margin-top:10px; color:var(--tp-muted); font-size:12px; line-height:1.4; }
#exploreDetail .tpSkillPicker { min-height:160px; border:1px solid var(--tp-border); border-radius:12px; padding:14px; background:#fff; }
#exploreDetail .tpPickerHeader { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; margin-bottom:10px; }
#exploreDetail .tpPickerHeader h4 { margin:0 0 4px; font-size:17px; }
#exploreDetail .tpPickerHeader p { margin:0; color:var(--tp-muted); font-size:13px; }
#exploreDetail .tpPickerActions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
#exploreDetail .tpButton {
  border:0; border-radius:9px; background:var(--tp-gold); color:#111827; font-weight:800;
  padding:9px 13px; cursor:pointer; font:inherit;
}
#exploreDetail .tpButton:hover { filter:brightness(.98); transform:translateY(-1px); }
#exploreDetail .tpButton.secondary { background:#edf2f7; border:1px solid #cbd5e1; color:#22324a; }
#exploreDetail .tpButton.text { background:transparent; border:0; color:#6b5420; padding:7px 4px; }
#exploreDetail .tpButton.danger { background:#fff1f1; color:#9b1c1c; border:1px solid #f0b9b9; }
#exploreDetail .tpButton:disabled { opacity:.48; cursor:default; transform:none; }
#exploreDetail .tpGuidedToolbar { display:flex; align-items:center; gap:10px; margin:12px 0 8px; }
#exploreDetail .tpGuidedToolbar .tpSearch { flex:1; }
#exploreDetail .tpSkillList { border-top:1px solid #e5eaf0; }
#exploreDetail .tpSkillRow {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:12px 4px; border-bottom:1px solid #e5eaf0;
}
#exploreDetail .tpSkillTitle { font-weight:750; color:#172033; line-height:1.25; }
#exploreDetail .tpSkillSub { color:var(--tp-muted); font-size:12px; margin-top:4px; line-height:1.4; }
#exploreDetail .tpBadge {
  display:inline-flex; align-items:center; border-radius:999px; padding:3px 7px; font-size:10px;
  font-weight:850; text-transform:uppercase; letter-spacing:.05em; background:#eef2f7; color:#536174;
}
#exploreDetail .tpBadge.explore { background:#fff3c7; color:#785a00; }
#exploreDetail .tpBadge.guided { background:#e7f5ec; color:#17633a; }
#exploreDetail .tpAssignment .eyebrow { display:block; margin-bottom:12px; }
#exploreDetail .tpAssignment h2 { margin:0 0 5px; font-size:22px; }
#exploreDetail .tpAssignmentMeta { color:var(--tp-muted); font-size:12px; margin-bottom:14px; }
#exploreDetail .tpAssignmentEmpty { color:var(--tp-muted); padding:12px 0 18px; }
#exploreDetail .tpAssignmentGroup { border-top:1px solid #e5eaf0; padding-top:12px; margin-top:12px; }
#exploreDetail .tpAssignmentGroupHead { display:flex; justify-content:space-between; gap:8px; align-items:baseline; margin-bottom:4px; }
#exploreDetail .tpAssignmentGroupHead strong { font-size:14px; }
#exploreDetail .tpAssignedItem { padding:9px 0; border-top:1px dashed #e0e6ed; }
#exploreDetail .tpAssignedItem:first-of-type { border-top:0; }
#exploreDetail .tpAssignedTop { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
#exploreDetail .tpAssignedTitle { font-size:13px; font-weight:750; color:#1d2738; line-height:1.3; }
#exploreDetail .tpAssignedSub { color:var(--tp-muted); font-size:11px; line-height:1.35; margin-top:3px; }
#exploreDetail .tpRemove {
  border:0; background:transparent; color:#8b2635; cursor:pointer; font-weight:700; padding:2px 0 2px 7px;
}
#exploreDetail .tpAssignmentFoot { border-top:1px solid #e5eaf0; margin-top:16px; padding-top:14px; display:grid; gap:9px; }
#exploreDetail .tpCountLine { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#exploreDetail .tpShareResult { padding:10px; border-radius:9px; background:#f8fafc; font-size:12px; word-break:break-all; color:#445268; }
#exploreDetail .tpStatus { min-height:18px; color:#536174; font-size:12px; line-height:1.35; }
#exploreDetail .tpStatus.error { color:#a32626; }
#exploreDetail .tpStatus.success { color:#17633a; }
#exploreDetail .tpExploreOverlay {
  position:fixed; inset:0; z-index:10010; background:rgba(4,8,18,.78);
  display:none; align-items:flex-start; justify-content:center; overflow:auto; padding:24px;
}
#exploreDetail .tpExploreOverlay.open { display:flex; }
#exploreDetail .tpExploreDialog {
  width:min(980px,100%); min-height:calc(100vh - 48px); background:#f7f8fb; border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.35); overflow:hidden;
}
#exploreDetail .tpExploreTop {
  position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; background:#07101f; color:#fff; border-bottom:1px solid rgba(255,255,255,.12);
}
#exploreDetail .tpExploreTop h2 { margin:0; font-size:20px; }
#exploreDetail .tpExploreBody { padding:20px; }
#exploreDetail .tpConfigIntro { color:var(--tp-muted); margin:0 0 15px; }
#exploreDetail .tpConfigGrid { display:grid; gap:12px; }
#exploreDetail .tpConfigCard { background:#fff; border:1px solid var(--tp-border); border-radius:12px; padding:14px; }
#exploreDetail .tpConfigCard h3 { margin:0 0 4px; font-size:15px; }
#exploreDetail .tpConfigCard p { margin:0 0 10px; color:var(--tp-muted); font-size:12px; line-height:1.4; }
#exploreDetail .tpOptions { display:flex; flex-wrap:wrap; gap:7px; }
#exploreDetail .tpOption {
  border:1px solid #cbd5e1; background:#f7f9fc; color:#27364d; border-radius:9px;
  padding:7px 9px; font-size:12px; font-weight:650; cursor:pointer;
}
#exploreDetail .tpOption.selected { background:#fff0b9; border-color:#d2a52d; color:#3e3007; }
#exploreDetail .tpConfigSelect { width:100%; min-height:42px; border:1px solid #cbd5e1; border-radius:9px; padding:8px 10px; background:#fff; }
#exploreDetail .tpConfigNumber { display:flex; gap:10px; align-items:center; }
#exploreDetail .tpConfigNumber input[type=range] { flex:1; }
#exploreDetail .tpConfigFooter { display:flex; justify-content:flex-end; gap:9px; padding-top:14px; }
#exploreDetail .tpExploreResults { margin-top:16px; background:#fff; border:1px solid var(--tp-border); border-radius:12px; padding:14px; }
#exploreDetail .tpExploreResultRow {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start;
  padding:10px 0; border-bottom:1px solid #e7ebf0;
}
#exploreDetail .tpExploreResultRow:last-child { border-bottom:0; }
#exploreDetail .tpExploreResultRow input { margin-top:3px; }
#exploreDetail .tpPayloadDialog { position:fixed; inset:0; z-index:10020; background:rgba(4,8,18,.78); display:none; align-items:center; justify-content:center; padding:20px; }
#exploreDetail .tpPayloadDialog.open { display:flex; }
#exploreDetail .tpPayloadCard { width:min(820px,100%); max-height:85vh; background:#fff; border-radius:14px; padding:18px; overflow:auto; }
#exploreDetail .tpPayloadCard pre { white-space:pre-wrap; font-size:11px; background:#0b1220; color:#e6edf7; padding:14px; border-radius:9px; overflow:auto; }
#exploreDetail .tpTiny { font-size:11px; color:var(--tp-muted); line-height:1.4; }
#exploreDetail .tpDivider { height:1px; background:#e5eaf0; margin:10px 0; }
#exploreDetail .tpHidden { display:none !important; }

@media (max-width: 900px) {
  #exploreDetail .tpLayout { grid-template-columns:1fr; }
  #exploreDetail .tpAssignment { position:static; }
}
@media (max-width: 650px) {
  #exploreDetail .tpPanel { padding:16px; }
  #exploreDetail .tpFieldGrid, #exploreDetail .tpFieldGrid.tpThree { grid-template-columns:1fr; }
  #exploreDetail .tpPickerHeader { display:block; }
  #exploreDetail .tpPickerActions { justify-content:flex-start; margin-top:10px; }
  #exploreDetail .tpExploreOverlay { padding:0; }
  #exploreDetail .tpExploreDialog { min-height:100vh; border-radius:0; }
}

/* v0.4.1 — app-parity Explore selectors */
#exploreDetail .tpPianoSelector{position:relative;max-width:660px;margin:12px 0 4px;padding-top:46px}
#exploreDetail .tpPianoNaturals{display:grid;grid-template-columns:repeat(7,1fr);height:112px}
#exploreDetail .tpPianoWhite{position:relative;border:1px solid #8893a4;border-right:0;background:linear-gradient(#fff,#f2f2ef);color:#1b2433;border-radius:0 0 5px 5px;cursor:pointer;padding:0}
#exploreDetail .tpPianoWhite:first-child{border-radius:5px 0 0 5px}
#exploreDetail .tpPianoWhite:last-child{border-right:1px solid #8893a4;border-radius:0 5px 5px 0}
#exploreDetail .tpPianoWhite span{position:absolute;bottom:9px;left:0;right:0;font-weight:800;font-size:12px}
#exploreDetail .tpPianoWhite.selected{background:linear-gradient(#fff7d0,#f4c95d);box-shadow:inset 0 0 0 2px #d6a62d}
#exploreDetail .tpPianoWhite.disabled{opacity:.3}
#exploreDetail .tpPianoAccidentals{position:absolute;top:0;left:0;right:0;height:82px;display:grid;grid-template-columns:repeat(5,1fr);padding-left:7.1%;padding-right:7.1%;pointer-events:none}
#exploreDetail .tpPianoBlackSlot{position:relative;pointer-events:none}
#exploreDetail .tpPianoBlackPair{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:3px;pointer-events:auto}
#exploreDetail .tpPianoBlack{width:42px;min-height:70px;border:1px solid #080b11;background:linear-gradient(#222b37,#05070b);color:#fff;border-radius:0 0 5px 5px;font-weight:800;font-size:10px;cursor:pointer;padding:42px 2px 4px}
#exploreDetail .tpPianoBlack.selected{background:linear-gradient(#725c1e,#1d180a);box-shadow:inset 0 0 0 2px #f4c95d;color:#ffe99f}
#exploreDetail .tpSelectionLinks{display:flex;gap:12px;margin-top:7px}
#exploreDetail .tpExploreResultRow.duplicate{background:#fafbfd;border-radius:8px;padding-left:8px;padding-right:8px}
#exploreDetail .tpAlreadyInFocus{display:inline-flex;align-items:center;justify-content:center;min-width:118px;padding:5px 8px;border-radius:999px;background:#e7f5ec;color:#17633a;font-size:11px;font-weight:800}
@media(max-width:650px){
  #exploreDetail .tpPianoBlack{width:34px;font-size:9px}
  #exploreDetail .tpPianoSelector{padding-top:40px}
  #exploreDetail .tpPianoNaturals{height:100px}
}

/* v0.4.4 — required-field validation, layered on the stable v0.4.2 Teacher Portal */
#exploreDetail .tpRequired{color:#b42318;font-weight:900}
#exploreDetail .tpFieldError{margin-top:5px;color:#b42318;font-size:12px;font-weight:650}
#exploreDetail input.invalid{border-color:#b42318;box-shadow:0 0 0 1px #b42318}
#exploreDetail .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}

/* v0.4.6 targeted Guided UX fixes */
#exploreDetail .tpLevelStepper{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;gap:7px;align-items:center}
#exploreDetail .tpLevelStepper select{width:100%}
#exploreDetail .tpLevelArrow{height:38px;border:1px solid #c8ced8;border-radius:8px;background:#fff;color:#172033;font-size:20px;line-height:1;cursor:pointer}
#exploreDetail .tpLevelArrow:hover:not(:disabled){background:#f3f5f8}
#exploreDetail .tpLevelArrow:disabled{opacity:.32;cursor:default}
#exploreDetail .tpSkillRow[hidden]{display:none!important}

/* Keep curriculum controls compact so the Guided/Explore action remains easy to reach. */
#teacher .tpFieldGrid{grid-template-columns:minmax(220px,.85fr) minmax(250px,1.15fr)}
#teacher .tpLevelStepper{grid-template-columns:34px minmax(150px,1fr) 34px;gap:6px}
#teacher .tpLevelArrow{width:34px}
#teacher .tpPickerActions #tpExploreOpen{white-space:nowrap}
@media(max-width:720px){#teacher .tpFieldGrid{grid-template-columns:1fr}}

/* v0.5.1 permanent Explore access in Skill Areas */
#teacher .tpSectionHeadingRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
#teacher .tpSectionHeadingRow .tpStepTitle{margin:0}
#teacher #tpExploreOpenTop{white-space:nowrap;flex:0 0 auto}
@media(max-width:640px){#teacher .tpSectionHeadingRow{align-items:flex-start;flex-direction:column}}