/*
  Portals — the shell, the persona tabs, and the three portal bodies.

  Scoped entirely under .portal-* / .sp-* / .tp-* / .tu-* so it can be
  loaded on any page without touching the library or quiz layouts.
  Reuses .modal-overlay and .btn from assets/styles.css rather than
  restating them.
*/

.portal-overlay {
  align-items: flex-start;
  overflow-y: auto;
  padding: 34px 18px;
}

.portal-shell {
  background: #fff;
  border-radius: 16px;
  width: min(1080px, 100%);
  max-height: calc(100vh - 68px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 70px rgba(20, 12, 40, 0.28);
  overflow: hidden;
}

.portal-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid #ece9f5;
}
.portal-title { flex: 1 1 auto; min-width: 0; }
.portal-title-main {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1b1630;
}
.portal-title-sub {
  display: block;
  font-size: 12.5px;
  color: #6c6788;
  margin-top: 2px;
}

/* ---- Persona tabs ---- */

.portal-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px 22px;
  border-bottom: 1px solid #ece9f5;
  background: #faf9fe;
}
.portal-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 10px 12px;
  border: 1.5px solid #e4e0f0;
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.portal-tab:hover { border-color: #c9bff0; }
.portal-tab.active {
  border-color: #A020F0;
  background: #f7f0ff;
  box-shadow: 0 0 0 3px rgba(160, 32, 240, 0.1);
}
.portal-tab-icon { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.portal-tab-text { min-width: 0; }
.portal-tab-label {
  display: block;
  font-weight: 650;
  font-size: 14px;
  color: #241c40;
}
.portal-tab-blurb {
  display: block;
  font-size: 11.5px;
  color: #726d90;
  line-height: 1.35;
}

/* ---- Body ---- */

.portal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 22px 8px;
}
.portal-foot {
  padding: 12px 22px 16px;
  border-top: 1px solid #ece9f5;
  font-size: 11.5px;
  color: #7b7699;
  line-height: 1.5;
}

.portal-section { margin-bottom: 26px; }
.portal-h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #241c40;
}
.portal-sub {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: #6c6788;
  line-height: 1.5;
}
.portal-note {
  font-size: 12px;
  color: #726d90;
  line-height: 1.55;
  margin: 8px 0 0;
}
.portal-empty { padding: 30px 4px; color: #55506e; }
.portal-empty-detail { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

.portal-callout {
  background: #fff8ec;
  border: 1px solid #f0d9ae;
  border-left: 3px solid #E27A1E;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #5a4526;
  margin-bottom: 22px;
}

/* ==================================================================
   Student portal
   ================================================================== */

.sp-wheel-wrap {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.sp-wheel { flex: 0 0 auto; }
.sp-seg { cursor: pointer; transition: opacity 0.12s; }
.sp-seg:hover, .sp-seg:focus { opacity: 0.65; outline: none; }
.sp-wheel-big { font-size: 40px; font-weight: 700; fill: #241c40; }
.sp-wheel-of { font-size: 19px; fill: #8d88a8; }
.sp-wheel-cap { font-size: 11px; fill: #6c6788; letter-spacing: 0.02em; }
.sp-wheel-sub { font-size: 10.5px; fill: #9a95b4; }

.sp-legend {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12.5px;
  color: #4a4560;
}
.sp-legend-item { display: flex; align-items: center; gap: 8px; }
.sp-legend-item i {
  width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: 0 0 auto;
}
.sp-legend-item b { margin-left: auto; color: #241c40; }

.sp-note { font-size: 12.5px; color: #726d90; }

/* XP */
.sp-xp {
  background: linear-gradient(135deg, #f7f0ff, #f3f6ff);
  border: 1px solid #e5ddf7;
  border-radius: 12px;
  padding: 15px 17px;
}
.sp-xp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sp-xp-level { font-size: 17px; font-weight: 750; color: #5b1d97; }
.sp-xp-points { font-size: 12.5px; color: #6c6788; }
.sp-xp-stats { display: flex; gap: 16px; font-size: 12px; color: #55506e; flex-wrap: wrap; }
.sp-xp-stats b { color: #241c40; }
.sp-xp-bar {
  height: 8px; border-radius: 99px; background: #e6dff6; margin: 12px 0 6px; overflow: hidden;
}
.sp-xp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #A020F0, #6f5bf0); }
.sp-xp-next { font-size: 11.5px; color: #7b7699; }

/* Tiles */
.sp-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 11px;
}
.sp-tile {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  text-align: left; padding: 14px 15px;
  border: 1.5px solid #e4e0f0; border-radius: 12px; background: #fff;
  cursor: pointer; font: inherit; transition: border-color 0.12s, transform 0.12s;
}
.sp-tile:hover { border-color: #A020F0; transform: translateY(-1px); }
.sp-tile-quiet { opacity: 0.62; }
.sp-tile-quiet:hover { border-color: #e4e0f0; transform: none; cursor: default; }
.sp-tile-icon { font-size: 22px; }
.sp-tile-title { font-weight: 650; font-size: 14px; color: #241c40; }
.sp-tile-blurb { font-size: 11.8px; color: #6c6788; line-height: 1.45; }

/* The "what should this cover?" picker that opens under the tiles. */
.sp-picker {
  margin-top: 11px; padding: 13px 15px;
  background: #f8f6fe; border: 1px solid #e0d9f5; border-radius: 11px;
}
.sp-picker-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #4a4560; margin-bottom: 11px;
}
.sp-picker-head strong { color: #241c40; }
.sp-picker-x {
  margin-left: auto; border: none; background: none; cursor: pointer;
  color: #8d88a8; font-size: 19px; line-height: 1; padding: 0 3px;
}
.sp-picker-x:hover { color: #C0392B; }
.sp-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px;
}
.sp-picker-grid label {
  display: block; font-size: 11.5px; font-weight: 600; color: #55506e;
}
.sp-picker-grid select, .sp-picker-grid input {
  display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 12.5px;
  padding: 6px 8px; border: 1px solid #ddd8ec; border-radius: 7px;
  background: #fff; color: #241c40;
}
.sp-picker-grid select:focus, .sp-picker-grid input:focus {
  outline: 2px solid #cdb6f5; outline-offset: -1px;
}
.sp-picker-acts {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px;
}
.sp-picker-note { font-size: 12px; color: #C0392B; margin: 8px 0 0; }
.sp-picker-note:empty { display: none; }

/* Weakest shelves */
.sp-weak { display: flex; flex-direction: column; gap: 6px; }
.sp-weak-row {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 11px; border: 1px solid #ece9f5; border-radius: 9px;
  background: #fff; cursor: pointer; font: inherit; text-align: left;
}
.sp-weak-row:hover { border-color: #c9bff0; background: #faf8ff; }
.sp-weak-num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: #f0ecfb; color: #5b1d97; font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}
.sp-weak-title { flex: 1 1 auto; font-size: 13px; color: #241c40; min-width: 0; }
.sp-weak-bar { flex: 0 0 90px; height: 6px; border-radius: 99px; background: #eceaf4; overflow: hidden; }
.sp-weak-bar i { display: block; height: 100%; }
.sp-weak-pct { flex: 0 0 auto; font-size: 12px; font-weight: 650; color: #4a4560; width: 34px; text-align: right; }

/* Badges */
.sp-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 9px; }
.sp-badge {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 8px; border: 1px solid #ece9f5; border-radius: 11px;
  background: #fbfaff; opacity: 0.55; text-align: center;
}
.sp-badge.earned { opacity: 1; border-color: #d8c9f5; background: #f8f2ff; }
.sp-badge-icon { font-size: 22px; }
.sp-badge-title { font-size: 12px; font-weight: 650; color: #241c40; }
.sp-badge-progress { font-size: 10.5px; color: #7b7699; }

/* ==================================================================
   Teacher portal
   ================================================================== */

.tp-classbar { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.tp-classchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border: 1.5px solid #e4e0f0; border-radius: 99px;
  background: #fff; cursor: pointer; font: inherit; font-size: 12.5px; color: #241c40;
}
.tp-classchip.active { border-color: #A020F0; background: #f7f0ff; }
.tp-classchip-n {
  font-size: 10.5px; background: #efeaf9; color: #5b1d97;
  border-radius: 99px; padding: 1px 6px; font-weight: 700;
}
.tp-newclass, .tp-newstudent, .tp-newasg, .tu-newsession {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.tp-newclass input, .tp-newstudent input, .tp-newasg input,
.tu-newsession input, .ws-pick-field input, .ws-pick-field select, .tp-bank-search {
  font: inherit; font-size: 12.5px; padding: 6px 9px;
  border: 1px solid #ddd8ec; border-radius: 7px; background: #fff; color: #241c40;
}
.tp-newclass input:focus, .tp-newstudent input:focus, .tp-newasg input:focus,
.tu-newsession input:focus, .tp-bank-search:focus { outline: 2px solid #cdb6f5; outline-offset: -1px; }
.tu-newsession label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #55506e; }
.tu-ses-topic-field input { min-width: 170px; }

.tp-mini {
  font: inherit; font-size: 12px; padding: 5px 10px;
  border: 1px solid #ddd8ec; border-radius: 7px; background: #fff;
  color: #4a4560; cursor: pointer;
}
.tp-mini:hover { border-color: #A020F0; color: #5b1d97; }
.tp-mini-danger:hover { border-color: #C0392B; color: #C0392B; }

.tp-classhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.tp-roster { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.tp-student {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 6px 4px 10px; border-radius: 99px;
  background: #f3f1fa; font-size: 12.5px; color: #241c40;
}
.tp-q-x {
  border: none; background: none; cursor: pointer; color: #8d88a8;
  font-size: 15px; line-height: 1; padding: 0 3px;
}
.tp-q-x:hover { color: #C0392B; }

/* Scheduler */
.tp-sched { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.3fr); gap: 16px; }
@media (max-width: 780px) { .tp-sched { grid-template-columns: 1fr; } }

.tp-bank-search { width: 100%; margin-bottom: 8px; }
.tp-bank-list {
  max-height: 320px; overflow-y: auto;
  border: 1px solid #ece9f5; border-radius: 10px; padding: 6px; background: #fbfaff;
}
.tp-bank-item {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 8px;
  padding: 7px 9px; border-radius: 7px; background: #fff;
  border: 1px solid #ece9f5; margin-bottom: 5px; cursor: grab;
}
.tp-bank-item:hover { border-color: #c9bff0; }
.tp-bank-item.dragging { opacity: 0.45; }
.tp-bank-grip { color: #b9b4cc; font-size: 12px; line-height: 1.3; grid-row: span 2; }
.tp-bank-stem { font-size: 12.2px; color: #241c40; line-height: 1.4; }
.tp-bank-meta { font-size: 10.5px; color: #8d88a8; grid-column: 2; }

.tp-asg-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 10px; }
.tp-asg {
  border: 1.5px solid #e4e0f0; border-radius: 11px; padding: 11px 12px; background: #fff; cursor: grab;
}
.tp-asg.dragging { opacity: 0.5; }
.tp-asg.drop-hot, .tp-asg-empty.drop-hot {
  border-color: #A020F0; border-style: dashed; background: #faf5ff;
}
.tp-asg-head { display: flex; align-items: center; gap: 8px; }
.tp-asg-grip { color: #b9b4cc; font-size: 12px; }
.tp-asg-title { flex: 1 1 auto; font-weight: 650; font-size: 13.5px; color: #241c40; min-width: 0; }
.tp-asg-count {
  font-size: 10.5px; background: #efeaf9; color: #5b1d97;
  border-radius: 99px; padding: 2px 7px; font-weight: 700;
}
.tp-asg-due {
  margin-top: 7px; font-size: 11.5px; color: #6c6788;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tp-asg-selfpaced {
  font-size: 10.5px; color: #6b6488;
  background: #f1eff7; border-radius: 99px; padding: 2px 8px;
}
.tp-asg-dueclear {
  font: inherit; font-size: 10.5px; color: #7b7699;
  border: none; background: none; cursor: pointer; text-decoration: underline;
  padding: 0;
}
.tp-asg-dueclear:hover { color: #C0392B; }
.tp-date { font: inherit; font-size: 11.5px; padding: 3px 6px; border: 1px solid #ddd8ec; border-radius: 6px; }
.tp-asg-qs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tp-asg-q {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; background: #f5f3fc; border-radius: 6px;
  padding: 3px 4px 3px 8px; color: #3d3757; max-width: 100%;
}
.tp-asg-q.missing { background: #fdeceb; color: #8d3227; }
.tp-asg-hint, .tp-asg-empty {
  font-size: 12px; color: #8d88a8; margin-top: 8px;
}
.tp-asg-empty {
  border: 1.5px dashed #ddd8ec; border-radius: 11px;
  padding: 22px 14px; text-align: center; margin-bottom: 10px;
}

/* Diagnostic matrix */
.tp-matrix { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tp-matrix th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: #8d88a8; font-weight: 700; padding: 0 8px 6px 0; border-bottom: 1px solid #ece9f5;
}
.tp-matrix td { padding: 7px 8px 7px 0; border-bottom: 1px solid #f4f2f9; vertical-align: middle; }
.tp-mx-num { color: #8d88a8; font-size: 11px; width: 26px; }
.tp-mx-title { color: #241c40; }
.tp-mx-bar { width: 120px; }
.tp-mx-bar span { display: block; height: 7px; border-radius: 99px; background: #eceaf4; overflow: hidden; }
.tp-mx-bar i { display: block; height: 100%; }
.tp-mx-pct { font-weight: 650; width: 44px; }
.tp-mx-n, .tp-mx-att { color: #726d90; font-size: 11.5px; width: 62px; }
.tp-mastered .tp-mx-bar i { background: #2E7D32; }
.tp-developing .tp-mx-bar i { background: #E27A1E; }
.tp-struggling .tp-mx-bar i { background: #C0392B; }
.tp-untouched .tp-mx-bar i { background: #d8d8e0; }

/* ==================================================================
   Tutor portal
   ================================================================== */

.tu-summary {
  display: flex; flex-wrap: wrap; gap: 18px;
  font-size: 12.5px; color: #55506e; margin-top: 8px;
}
.tu-summary b { color: #241c40; }

.tu-studio { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 11px; }
.tu-studio-btn {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px 15px; border: 1.5px solid #e4e0f0; border-radius: 12px;
  background: #fff; cursor: pointer; font: inherit;
}
.tu-studio-btn:hover { border-color: #A020F0; background: #faf5ff; }
.tu-studio-icon { font-size: 24px; }
.tu-studio-btn strong { display: block; font-size: 13.5px; color: #241c40; }
.tu-studio-btn em { display: block; font-style: normal; font-size: 11.5px; color: #6c6788; }

.tu-sessions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.tu-session { border: 1px solid #ece9f5; border-radius: 10px; padding: 10px 12px; background: #fff; }
.tu-session-main { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 12.5px; }
.tu-session-date { font-weight: 650; color: #241c40; }
.tu-session-mins { color: #6c6788; }
.tu-session-topic {
  font-size: 11.5px; background: #f0ecfb; color: #5b1d97;
  border-radius: 99px; padding: 2px 9px;
}
.tu-session-notes {
  margin-top: 7px; font-size: 12px; color: #55506e;
  white-space: pre-wrap; line-height: 1.5;
  border-left: 2px solid #e4e0f0; padding-left: 9px;
}
.tu-session-acts { display: flex; gap: 6px; margin-top: 9px; }

.tu-recap-shell { width: min(680px, 100%); }
.tu-recap-facts { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: #55506e; margin-bottom: 6px; }
.tu-recap-facts b { color: #241c40; }
.tu-recap-label { display: block; font-size: 12.5px; color: #4a4560; margin-top: 13px; font-weight: 600; }
.tu-recap-label textarea {
  display: block; width: 100%; margin-top: 5px; font: inherit; font-size: 13px;
  padding: 9px 11px; border: 1px solid #ddd8ec; border-radius: 8px; resize: vertical;
  line-height: 1.5; color: #241c40;
}
.tu-recap-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; }

/* ==================================================================
   Sidebar entries
   ================================================================== */

.sidebar-portal-btn, .sidebar-ws-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: none; border-radius: 9px;
  background: none; cursor: pointer; font: inherit; text-align: left;
  color: #3d3757;
}
.sidebar-portal-btn:hover, .sidebar-ws-btn:hover { background: #f3f0fb; }
.sidebar-portal-icon { font-size: 16px; line-height: 1; }
.sidebar-portal-text { min-width: 0; }
.sidebar-portal-label { display: block; font-size: 13px; font-weight: 600; }
.sidebar-portal-persona { display: block; font-size: 11px; color: #8d88a8; }
.sidebar-ws-icon { display: inline-flex; color: #7a6f9c; }
.sidebar-ws-label { font-size: 13px; font-weight: 600; }