/* portal.css: student portal prototype. Built on the GlobalPrep tokens and the shared components
   (Button, Input, dots). Designed for computer and iPad first. Parent pages also work on phones. */

body { background: var(--gp-cream); }
.PT { min-height: 100vh; display: flex; flex-direction: column; color: var(--gp-teal); }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.PT_bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  background: var(--color-white);
  border-bottom: 1px solid var(--gp-border-subtle);
}
.PT_logo img { width: 140px; height: auto; display: block; }
.PT_nav { display: flex; gap: 4px; flex: 1; }
.PT_nav a { padding: 8px 12px; border-radius: 500px; font-size: 15px; }
.PT_nav a[aria-current="page"] { background: var(--color-pale-green); }
.PT_roles { display: flex; gap: 4px; padding: 3px; border-radius: 500px; background: var(--gp-cream); border: 1px solid var(--gp-border-subtle); }
.PT_roles a { padding: 6px 12px; border-radius: 500px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.PT_roles a[aria-current="page"] { background: var(--gp-teal); color: var(--gp-cream); }
.PT_demo { font-size: 12px; padding: 4px 10px; border-radius: 500px; background: var(--color-light-yellow); color: var(--gp-amber-dark); border: 1px dashed var(--gp-amber-dark); white-space: nowrap; }
.PT_reset { border: 0; background: none; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; color: var(--gp-teal); }
@media (max-width: 1080px) {
  .PT_bar { flex-wrap: wrap; gap: 10px; }
  .PT_nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .PT_demo { display: none; }
}

.PT_main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 20px 80px; flex: 1; }
.PT_h1 { font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes); font-size: clamp(28px, 4vw, 40px); line-height: 1.15; }
.PT_h1 .handwritten { color: var(--gp-amber-dark); font-size: 1.35em; }
.PT_h2 { font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes); font-size: 22px; margin: 34px 0 14px; }
.PT_muted { opacity: 0.75; font-size: 15px; }
.PT_card { background: var(--color-white); border-radius: var(--gp-radius-card); padding: 20px; border: 1px solid var(--gp-border-subtle); }

/* ── Home ────────────────────────────────────────────────────────────── */
.PT_hero { text-align: center; }
.PT_hero .PT_card { margin-top: 18px; padding: 6px 10px 10px; }
.PT_goalLine { margin-top: 6px; }
.PT_stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 14px; text-align: left; }
.PT_stat { background: var(--color-white); border-radius: 16px; padding: 14px 16px; border: 1px solid var(--gp-border-subtle); }
.PT_stat strong { display: block; font-size: 26px; font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes); }
.PT_stat span { font-size: 14px; opacity: 0.8; }
.PT_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.PT_subject { display: flex; flex-direction: column; gap: 12px; transition: transform 0.2s var(--ffj-ease-snappy), box-shadow 0.2s; }
.PT_subject:hover { transform: translateY(-2px); box-shadow: var(--ffj-shadow-md); }
.PT_subjectTop { display: flex; gap: 12px; align-items: center; }
.PT_subjectIcon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; flex: none; }
.PT_subjectIcon img { width: 40px; }
.PT_subject h3 { font-size: 20px; }
.PT_row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.PT_homework { display: flex; align-items: center; gap: 14px; background: var(--color-light-yellow); border-color: var(--gp-amber); }
.PT_homework img { width: 46px; flex: none; }
.PT_homework div { flex: 1; }

/* ── Progress meters ─────────────────────────────────────────────────── */
.PT_meter { height: 8px; border-radius: 8px; background: rgba(8, 56, 59, 0.12); overflow: hidden; }
.PT_meter i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--gp-teal), var(--gp-teal-mid)); transition: width 0.8s var(--ffj-ease-emphasized); }
.PT_meter_done i { background: linear-gradient(90deg, var(--gp-teal-mid), var(--gp-amber)); }
.PT_pill { display: inline-flex; align-items: center; gap: 4px; min-width: 42px; justify-content: center; padding: 2px 8px; border-radius: 500px; font-size: 12px; background: rgba(8, 56, 59, 0.08); white-space: nowrap; }
.PT_pill_done { background: var(--gp-amber); color: var(--gp-ink); }

/* Mastery dots: three teal dots fill with the streak, the amber dot lights up on mastery (the isotype). */
.PT_mastery { --iso-w: 30px; }
.PT_mastery > i { background: var(--color-white) !important; box-shadow: inset 0 0 0 1.5px var(--gp-teal); transition: background 0.3s ease; }
.PT_mastery > i:nth-child(4) { box-shadow: inset 0 0 0 1.5px var(--gp-amber); }
.PT_mastery > i.on { background: var(--gp-teal) !important; }
.PT_mastery > i:nth-child(4).on { background: var(--gp-amber) !important; }

/* ── Subject page: sidebar + main ────────────────────────────────────── */
.PT_subjectLayout { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .PT_subjectLayout { grid-template-columns: 330px minmax(0, 1fr); align-items: start; } }
.PT_side { padding: 14px 10px; }
@media (min-width: 900px) { .PT_side { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; } }
.PT_sideHead { padding: 4px 8px 12px; border-bottom: 1px solid var(--gp-border-subtle); margin-bottom: 8px; }
.PT_sideHead h1 { font-size: 22px; }
.PT_tree, .PT_tree ul { list-style: none; margin: 0; padding: 0; }
.PT_tree ul { padding-left: 14px; }
.PT_node { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 15px; color: inherit; text-align: left; cursor: pointer; }
.PT_node:hover { background: var(--gp-cream); }
.PT_node[aria-current="true"] { background: var(--color-light-yellow); box-shadow: inset 3px 0 0 var(--gp-amber); }
.PT_node .PT_caret { width: 16px; flex: none; transition: transform 0.2s; opacity: 0.7; }
.PT_node[aria-expanded="true"] .PT_caret { transform: rotate(90deg); }
.PT_node .PT_code { font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes); min-width: 38px; }
.PT_node .PT_title { flex: 1; min-width: 0; }
.PT_lvl0 > .PT_node { font-size: 16px; font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes); }
.PT_point { padding: 4px 8px 4px 30px; font-size: 13px; opacity: 0.85; position: relative; }
.PT_point::before { content: ""; position: absolute; left: 16px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--gp-teal); opacity: 0.5; }
.PT_locked { margin: 12px 8px 2px; font-size: 13px; opacity: 0.7; }

.PT_crumb { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gp-amber-dark); }
.PT_subHead > * { min-width: 0; max-width: 100%; }
.PT_subHead { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.PT_subProgress { min-width: 240px; display: grid; gap: 6px; font-size: 14px; }
.PT_points { margin: 0 0 6px; padding-left: 20px; }
.PT_points li { margin: 4px 0; }
.PT_components { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 18px; }
.PT_component { display: flex; flex-direction: column; gap: 10px; }
.PT_component img { width: 44px; }
.PT_component h3 { font-size: 18px; }
.PT_component p { font-size: 14px; flex: 1; }
.PT_component .PT_actions { display: flex; gap: 8px; flex-wrap: wrap; }
.PT_component_qb { background: var(--gp-teal); color: var(--gp-cream); border-color: var(--gp-teal); }
.PT_lesson { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; padding: 4px 10px; border-radius: 500px; background: var(--color-pale-green); }
.PT_lesson_no { background: var(--color-light-red); color: var(--color-terracotta); }
.Button_button.PT_small { min-height: 38px; padding: 0 16px; font-size: 14px; }

/* ── Question bank ───────────────────────────────────────────────────── */
.PT_qb { margin-top: 22px; display: grid; gap: 16px; }
@media (min-width: 1100px) { .PT_qb { grid-template-columns: 300px minmax(0, 1fr); align-items: start; } }
.PT_skills { display: grid; gap: 6px; }
.PT_skill { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--gp-border-subtle); background: var(--color-white); cursor: pointer; font: inherit; color: inherit; text-align: left; }
.PT_skill:hover { border-color: var(--gp-border); }
.PT_skill[aria-pressed="true"] { border-color: var(--gp-amber); background: var(--color-light-yellow); }
.PT_skill span { flex: 1; font-size: 14px; line-height: 1.3; }
.PT_q { display: flex; flex-direction: column; gap: 14px; }
.PT_qMeta { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; opacity: 0.8; }
.PT_stem { font-size: 21px; line-height: 1.35; font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes); }
.PT_options { display: grid; gap: 8px; }
.PT_option { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--gp-border-subtle); background: var(--color-white); font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.PT_option:hover { border-color: var(--gp-teal); }
.PT_option[aria-pressed="true"] { border-color: var(--gp-teal); background: var(--color-pale-green); }
.PT_option b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--gp-cream); flex: none; font-size: 13px; }
.PT_option.right { border-color: var(--color-success); background: #e5f4ec; }
.PT_option.wrong { border-color: var(--color-terracotta); background: var(--color-light-red); }
.PT_answer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.PT_answer .Input_input { width: 180px; font-size: 20px; text-align: center; }
.PT_unit { font-size: 20px; font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes); }
.PT_keys { display: flex; gap: 6px; }
.PT_key { min-width: 44px; height: 40px; border-radius: 10px; border: 1.5px solid var(--gp-border); background: var(--color-white); font: inherit; font-size: 18px; cursor: pointer; color: inherit; }
.PT_feedback { padding: 12px 14px; border-radius: 14px; font-size: 15px; }
.PT_feedback.ok { background: #e5f4ec; color: #0b5a40; }
.PT_feedback.ko { background: var(--color-light-red); color: var(--color-terracotta); }
.PT_feedback.info { background: var(--color-light-yellow); color: var(--gp-amber-dark); }
.PT_qActions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Celebration overlay (subtopic cleared) ──────────────────────────── */
.PT_celebrate { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(251, 247, 240, 0.92); backdrop-filter: blur(3px); animation: PT-fade 0.3s ease-out; }
@keyframes PT-fade { from { opacity: 0; } }
.PT_celebrate .PT_card { text-align: center; max-width: 420px; display: grid; gap: 10px; justify-items: center; box-shadow: var(--ffj-shadow-lg); }
.PT_celebrate .GPMeta { width: 180px; height: 180px; }

/* ── Tutor and parent views ──────────────────────────────────────────── */
.PT_table { width: 100%; border-collapse: collapse; font-size: 14px; }
.PT_table th, .PT_table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--gp-border-subtle); vertical-align: top; }
.PT_table th { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; font-weight: 400; }
.PT_twoCol { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.PT_twoCol > * { min-width: 0; }
.PT_table { table-layout: fixed; overflow-wrap: anywhere; }
@media (min-width: 960px) { .PT_twoCol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.PT_recap { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.PT_recap li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--gp-cream); }
.PT_recap li .PT_pill { margin-left: auto; }
.PT_select { max-width: 100%; min-height: 44px; border-radius: 40px; border: 1.5px solid var(--gp-border); padding: 0 14px; font: inherit; background: var(--color-white); color: inherit; }
.PT_switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.PT_note { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--color-light-yellow); font-size: 14px; }
.PT_files { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.PT_files li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--color-white); border-radius: 12px; border: 1px solid var(--gp-border-subtle); }
.PT_files li span { flex: 1; font-size: 15px; }

/* modal used for "file not included in the prototype" */
.PT_dialog { border: 0; border-radius: 24px; padding: 26px; max-width: 420px; color: var(--gp-teal); }
.PT_dialog::backdrop { background: var(--ffj-backdrop); backdrop-filter: blur(4px); }

/* Selects inside labels shrink on phones */
.PT_subHead label, .PT_card label.PT_row { flex-wrap: wrap; }
.PT_select { width: 100%; max-width: 300px; }

/* ══════════════════════ Phone-first (v1.1) ══════════════════════
   Under 768px: compact top bar, bottom tab bar, "Me" sheet. Under 900px: the syllabus is a drawer. */
.PT_tabbar, .PT_syllabusBtn, .PT_drawerClose { display: none; }

.PT_sheet {
  border: 0;
  margin: auto auto 0;
  width: 100%;
  max-width: 520px;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  color: var(--gp-teal);
  display: none;
  flex-direction: column;
  gap: 12px;
}
.PT_sheet[open] { display: flex; animation: PT-sheet 0.3s var(--ffj-ease-emphasized); }
@keyframes PT-sheet { from { transform: translateY(100%); } }
.PT_sheet::backdrop { background: var(--ffj-backdrop); }
.PT_sheetGrip { width: 40px; height: 4px; border-radius: 2px; background: var(--gp-border); margin: 0 auto 6px; }
.PT_sheetRoles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; border-radius: 500px; background: var(--gp-cream); }
.PT_sheetRoles a { text-align: center; padding: 10px 0; border-radius: 500px; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.PT_sheetRoles a[aria-current="page"] { background: var(--gp-teal); color: var(--gp-cream); }
.PT_sheetLink { display: block; padding: 12px 0; border: 0; border-bottom: 1px solid var(--gp-border-subtle); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }

@media (max-width: 767px) {
  .PT_bar { position: static; flex-wrap: nowrap; }
  .PT_bar .PT_nav, .PT_bar .PT_roles, .PT_bar .PT_reset { display: none; }
  .PT_demo { display: inline-block; margin-left: auto; }
  .PT_main { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); }

  .PT_tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--color-white);
    border-top: 1px solid var(--gp-border-subtle);
    box-shadow: 0 -4px 16px rgba(8, 56, 59, 0.06);
  }
  .PT_tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 52px;
    padding: 6px 2px;
    border: 0;
    border-radius: 14px;
    background: none;
    font: inherit;
    font-size: 12px;
    color: var(--gp-teal);
    cursor: pointer;
  }
  .PT_tab img { width: 26px; height: 26px; object-fit: contain; }
  .PT_tab[aria-current="page"] { background: var(--color-light-yellow); font-weight: 600; }

  .PT_stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .PT_stat { padding: 12px; }
  .PT_stat strong { font-size: 22px; }
  .PT_grid { grid-template-columns: 1fr; }
  .PT_h1 { font-size: 26px; }

  /* question bank: the main button stays reachable above the tab bar */
  .PT_qActions { position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 2; padding: 10px 0 0; background: linear-gradient(to bottom, transparent, var(--color-white) 30%); }
  .PT_qActions .Button_button { width: 100%; }
  .PT_stem { font-size: 19px; }
  .PT_answer .Input_input { width: 140px; }
  .PT_table { font-size: 13px; }
}

@media (max-width: 899px) {
  .PT_syllabusBtn { display: inline-flex; justify-self: start; position: sticky; top: 10px; z-index: 6; box-shadow: var(--ffj-shadow-sm); }
  .PT_side {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: min(88vw, 380px);
    max-height: none;
    border-radius: 0 20px 20px 0;
    overflow: auto;
    transform: translateX(-105%);
    transition: transform 0.35s var(--ffj-ease-emphasized);
    box-shadow: var(--ffj-shadow-drawer);
    padding-top: 50px;
  }
  .PT_sideOpen { transform: none; }
  .PT_drawerClose { display: grid; place-items: center; position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--gp-cream); cursor: pointer; }
  body.PT_drawerOpen::after { content: ""; position: fixed; inset: 0; z-index: 30; background: var(--ffj-backdrop); }
}

/* Live portal: sign-in card, the signed-in student's name or picker, and save notices */
.PT_signin { max-width: 460px; margin: 48px auto; text-align: center; display: grid; gap: 14px; justify-items: center; }
.PT_signin .PT_h1 { font-size: 30px; }
.PT_gsi { min-height: 44px; }
.PT_who { font-size: 13px; padding: 4px 12px; border-radius: 500px; background: var(--gp-cream); border: 1px solid var(--gp-border-subtle); white-space: nowrap; }
select.PT_who { min-height: 32px; }
.PT_toast { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; max-width: min(92vw, 480px);
  padding: 12px 18px; border-radius: 14px; background: var(--gp-teal); color: var(--gp-cream); font-size: 14px; box-shadow: 0 8px 24px rgba(8, 56, 59, 0.25); }