/* ============================================================================
   profile_panel.css -- the avatar's account panel (templates/navbar_v5.html #profile-slide),
   parent and student, 2026-09-22. Replaces the legacy Bootstrap slide-out (bright #007bff head,
   five button colours, a green "Quiz Mode" box). Reads tokens.css only: the panel carries
   .qv-tokens because it is a child of <body>, outside every scoped container.

   Anatomy: a right-hand sheet over a scrim; a slate head (avatar, who, role) with the coral seam
   the footer band uses; sections on the page colour, each a paper card of rows; the primary
   action (Sign out) pinned to the foot. index.css's old .profile-slide rules still load; every
   selector here is more specific so nothing of the old look bleeds through.
   ============================================================================ */
.qv-profile-scrim{ position:fixed; inset:0; z-index:1049; background:rgba(20,32,48,.38); opacity:0; pointer-events:none;
  transition:opacity .24s ease; }
.qv-profile-scrim.is-on{ opacity:1; pointer-events:auto; }
body.qv-profile-open{ overflow:hidden; }

.profile-slide.qv-profile{
  position:fixed; top:0; right:0; bottom:0; left:auto; width:min(380px, 100%); height:100dvh; z-index:1050;
  display:flex; flex-direction:column; margin:0; padding:0; border:0; border-left:1px solid var(--rule);
  background:var(--page); color:var(--ink); font-family:var(--sans); text-align:left;
  box-shadow:-2px 0 4px rgba(20,32,48,.06), -18px 0 48px -18px rgba(20,32,48,.30);
  transform:translateX(102%); visibility:hidden;
  transition:transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s linear .32s;
}
.profile-slide.qv-profile.open{ transform:none; visibility:visible; transition:transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s; }
/* the sheet's content settles a beat after the sheet itself */
.qv-profile .qvp-head, .qv-profile .qvp-body, .qv-profile .qvp-foot{ opacity:0; transform:translateY(6px);
  transition:opacity .28s ease .10s, transform .32s cubic-bezier(.2,.8,.2,1) .10s; }
.qv-profile.open .qvp-head, .qv-profile.open .qvp-body, .qv-profile.open .qvp-foot{ opacity:1; transform:none; }

/* ---- head: the role and the close on one line, the avatar and the name with the full width under it ---- */
.qv-profile .qvp-head{ flex:none; display:flex; flex-direction:column; gap:12px; padding:14px 14px 20px 22px;
  background:var(--nav); color:var(--paper); border-bottom:3px solid var(--vidya); }
.qv-profile .qvp-head-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:40px; }
.qv-profile .qvp-role{ display:block; font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#c9d4e2; }
.qv-profile .qvp-who{ display:flex; align-items:center; gap:14px; min-width:0; padding-right:8px; }
.qv-profile .qvp-avatar.user-initial-circle{ flex:none; width:52px; height:52px; border-radius:50%; background:var(--paper); color:var(--ink);
  border:2px solid var(--vidya); font-size:1.45rem; font-weight:700; line-height:1; display:grid; place-items:center; margin:0; }
.qv-profile .qvp-name{ flex:1 1 auto; min-width:0; margin:0; display:flex; align-items:baseline; font-size:1rem; font-weight:700; line-height:1.3; color:var(--paper); letter-spacing:-.005em;
  white-space:nowrap; }   /* one line always; the full value is the title */
.qv-profile .qvp-name-local{ flex:0 1 auto; min-width:2ch; overflow:hidden; text-overflow:ellipsis; }
.qv-profile .qvp-name-domain{ flex:none; color:#d8e1ec; font-weight:600; }
.qv-profile .qvp-close.close-btn{ flex:none; width:40px; height:40px; border-radius:11px; border:0;
  background:transparent; color:#d8e1ec; display:grid; place-items:center; cursor:pointer; font-size:0; line-height:0;
  transition:background-color .18s ease, color .18s ease, transform .18s ease; }
.qv-profile .qvp-close svg{ width:20px; height:20px; }
.qv-profile .qvp-close:hover{ background:rgba(255,255,255,.10); color:var(--paper); }
.qv-profile .qvp-close:active{ transform:scale(.94); }

/* ---- body ---- */
.qv-profile .qvp-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:18px 18px 8px; }
.qv-profile .qvp-section{ padding:0; margin:0; background:transparent; border:0; }   /* index.css's page sections (padding:80px 0) do not reach in here */
.qv-profile .qvp-section + .qvp-section{ margin-top:18px; }
.qv-profile .qvp-label{ margin:0 0 9px 4px; font-size:.8rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink2); }
.qv-profile .qvp-card{ background:var(--paper); border:1px solid var(--rule); border-radius:14px; overflow:hidden;
  box-shadow:0 1px 2px rgba(20,32,48,.04); }

/* rows: one control per line, 52px, an icon in a tint square, a chevron that leads on hover */
.qv-profile .qvp-row{ display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:10px 14px 10px 12px;
  background:transparent; border:0; border-top:1px solid var(--rule); color:var(--ink); font:inherit; font-size:1rem; font-weight:700;
  line-height:1.3; text-align:left; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color .16s ease; }
.qv-profile .qvp-row:first-child{ border-top:0; }
.qv-profile .qvp-row:hover{ background:var(--page); color:var(--ink); text-decoration:none; }
.qv-profile .qvp-row:active{ background:var(--tint); }
.qv-profile .qvp-row-ic{ flex:none; width:34px; height:34px; border-radius:10px; background:var(--tint); color:var(--action-deep);
  display:grid; place-items:center; transition:transform .2s cubic-bezier(.2,.8,.2,1); }
.qv-profile .qvp-row-ic svg{ width:17px; height:17px; }
.qv-profile .qvp-row-tx{ flex:1 1 auto; min-width:0; }
.qv-profile .qvp-row-tx small{ display:block; margin-top:3px; font-size:.88rem; font-weight:500; color:var(--ink2); line-height:1.4; }
.qv-profile .qvp-row-ch{ flex:none; width:18px; height:18px; color:var(--ink3); transition:transform .2s cubic-bezier(.2,.8,.2,1); }
.qv-profile .qvp-row:hover .qvp-row-ch{ transform:translateX(3px); }
.qv-profile .qvp-row:hover .qvp-row-ic{ transform:translateY(-1px); }
.qv-profile .qvp-row[aria-expanded="true"] .qvp-row-ch{ transform:rotate(90deg); }
.qv-profile .qvp-row[aria-expanded="true"]:hover .qvp-row-ch{ transform:rotate(90deg); }

/* the account-data disclosure (parent): opens under its row, on the page colour */
.qv-profile .data-controls-panel{ margin:0; padding:12px 14px 14px; border-top:1px solid var(--rule); background:var(--page); }
.qv-profile .data-controls-panel p{ margin:0 0 12px; font-size:.92rem; font-weight:500; line-height:1.5; color:var(--ink2); }
.qv-profile .qvp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 20px;
  border-radius:12px; font:inherit; font-size:1rem; font-weight:700; line-height:1; text-decoration:none; cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1), background-color .18s ease, border-color .18s ease, color .18s ease; }
.qv-profile .qvp-btn--danger{ width:100%; background:var(--paper); border:1.5px solid var(--rule2); color:#b2423f; }
.qv-profile .qvp-btn--danger:hover{ border-color:#b2423f; background:#fdf1f0; color:#9a3532; }
.qv-profile .qvp-btn:active{ transform:translateY(0) scale(.98); box-shadow:none; }
.qv-profile .qvp-btn:focus-visible, .qv-profile .qvp-row:focus-visible, .qv-profile .qvp-close:focus-visible{ outline:3px solid var(--action-deep); outline-offset:2px; }
.qv-profile .qvp-close:focus-visible{ outline-color:var(--paper); }

/* quiz mode (student): one row that IS the switch; the legacy ids stay for the script */
.qv-profile .quiz-mode-setting{ border:0; border-radius:0; padding:14px 14px 14px; background:transparent; margin:0; }
.qv-profile .qvp-mode-title{ margin:0 0 10px; font-size:1rem; font-weight:700; color:var(--ink); line-height:1.3; white-space:nowrap; }
.qv-profile .qvp-mode-row{ display:flex; align-items:center; }
.qv-profile .mode-toggle-container-navbar{ display:flex; align-items:center; gap:10px; justify-content:flex-start; }
.qv-profile .mode-label-navbar{ font-size:.92rem; font-weight:600; color:var(--ink3); transition:color .2s ease; }
.qv-profile .mode-label-navbar.active{ color:var(--ink); font-weight:700; }
.qv-profile .mode-toggle-switch-navbar{ position:relative; width:46px; height:26px; margin:0; flex:none; }
.qv-profile .mode-toggle-switch-navbar input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.qv-profile .mode-toggle-slider-navbar{ position:absolute; inset:0; border-radius:999px; background:var(--rule2); cursor:pointer;
  transition:background-color .22s ease; box-shadow:inset 0 1px 2px rgba(20,32,48,.12); }
.qv-profile .mode-toggle-slider-navbar::before{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:var(--paper); box-shadow:0 1px 3px rgba(20,32,48,.25); transition:transform .24s cubic-bezier(.2,.8,.2,1); }
.qv-profile .mode-toggle-switch-navbar input:checked + .mode-toggle-slider-navbar{ background:var(--nav); }
.qv-profile .mode-toggle-switch-navbar input:checked + .mode-toggle-slider-navbar::before{ transform:translateX(20px); }
.qv-profile .mode-toggle-switch-navbar input:focus-visible + .mode-toggle-slider-navbar{ outline:3px solid var(--action-deep); outline-offset:2px; }
.qv-profile .toggle-text-navbar{ display:none; }              /* the old NORMAL / QUIET print inside the knob */
.qv-profile #mode-description-navbar{ margin:10px 0 0; font-size:.9rem; font-weight:500; line-height:1.45; color:var(--ink2); }

/* ---- foot ---- */
.qv-profile .qvp-foot{ flex:none; padding:14px 18px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--rule); background:var(--page); }
.qv-profile .qvp-btn--primary{ width:100%; height:50px; font-size:1.02rem; background:var(--nav); border:1.5px solid var(--nav); color:var(--paper);
  box-shadow:0 1px 2px rgba(20,32,48,.22), 0 8px 18px -6px rgba(20,32,48,.45); }
.qv-profile .qvp-btn--primary:hover{ background:#36495d; border-color:#36495d; color:var(--paper); transform:translateY(-2px);
  box-shadow:0 2px 3px rgba(20,32,48,.2), 0 14px 26px -8px rgba(20,32,48,.55); text-decoration:none; }
.qv-profile .qvp-btn--primary svg{ width:18px; height:18px; transition:transform .2s cubic-bezier(.2,.8,.2,1); }
.qv-profile .qvp-btn--primary:hover svg{ transform:translateX(3px); }

/* ---- phones: the sheet takes the width; taller rows for thumbs ---- */
@media (max-width:480px){
  .profile-slide.qv-profile{ width:100%; border-left:0; }
  .qv-profile .qvp-head{ padding:12px 12px 18px 18px; }
  .qv-profile .qvp-avatar.user-initial-circle{ width:48px; height:48px; font-size:1.3rem; }
  .qv-profile .qvp-body{ padding:16px 14px 8px; }
  .qv-profile .qvp-row{ min-height:56px; }
  .qv-profile .qvp-foot{ padding-left:14px; padding-right:14px; }
}
@media (hover:none){
  .qv-profile .qvp-row:hover{ background:transparent; }
  .qv-profile .qvp-row:hover .qvp-row-ch, .qv-profile .qvp-row:hover .qvp-row-ic, .qv-profile .qvp-btn--primary:hover{ transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .qv-profile-scrim, .profile-slide.qv-profile, .qv-profile .qvp-head, .qv-profile .qvp-body, .qv-profile .qvp-foot,
  .qv-profile .qvp-row, .qv-profile .qvp-row-ic, .qv-profile .qvp-row-ch, .qv-profile .qvp-btn, .qv-profile .qvp-btn svg,
  .qv-profile .mode-toggle-slider-navbar, .qv-profile .mode-toggle-slider-navbar::before, .qv-profile .qvp-close{ transition:none; }
  .qv-profile .qvp-row:hover .qvp-row-ch, .qv-profile .qvp-row:hover .qvp-row-ic, .qv-profile .qvp-btn--primary:hover{ transform:none; }
}

/* ============================================================================
   #deleteParentModal -- the account-deletion request dialog the sheet opens (2026-09-22). A
   Bootstrap modal for its open/close, the sheet's own look inside: a head with an icon and a
   plain-words subtitle, what happens as three lines, one confirmation, Cancel and the request.
   ============================================================================ */
.qvd .modal-dialog{ max-width:520px; margin:1.25rem auto; }
.qvd .qvd-card{ border:1px solid var(--rule); border-radius:18px; background:var(--paper); color:var(--ink); font-family:var(--sans);
  box-shadow:0 2px 6px rgba(20,32,48,.08), 0 30px 70px -20px rgba(20,32,48,.35); overflow:hidden; }
.qvd.fade .modal-dialog{ transform:translateY(10px) scale(.985); transition:transform .28s cubic-bezier(.2,.8,.2,1); }
.qvd.show .modal-dialog{ transform:none; }
.qvd .qvd-head{ display:flex; align-items:flex-start; gap:14px; padding:20px 20px 16px 22px; border-bottom:1px solid var(--rule); }
.qvd .qvd-ic{ flex:none; width:44px; height:44px; border-radius:14px; background:var(--tint); color:var(--action-deep); display:grid; place-items:center; }
.qvd .qvd-ic svg{ width:22px; height:22px; }
.qvd .qvd-head-tx{ flex:1 1 auto; min-width:0; padding-top:1px; }
.qvd .qvd-title{ margin:0; font-family:var(--brand); font-weight:400; font-size:1.36rem; line-height:1.25; color:var(--ink); letter-spacing:.1px; }
.qvd .qvd-sub{ margin:3px 0 0; font-size:.95rem; line-height:1.4; color:var(--ink2); font-weight:500; }
.qvd .qvd-close{ flex:none; width:40px; height:40px; margin:-6px -6px 0 0; border:0; border-radius:11px; background:transparent; color:var(--ink3); display:grid; place-items:center; cursor:pointer;
  transition:background-color .18s ease, color .18s ease; }
.qvd .qvd-close svg{ width:20px; height:20px; }
.qvd .qvd-close:hover{ background:var(--page); color:var(--ink); }
.qvd .qvd-body{ padding:18px 22px 6px; }
.qvd .qvd-lead{ margin:0 0 14px; font-size:1rem; line-height:1.55; color:var(--ink); font-weight:500; }
.qvd .qvd-list{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:8px; }
.qvd .qvd-list li{ display:flex; align-items:flex-start; gap:10px; font-size:.95rem; line-height:1.45; color:var(--ink2); font-weight:600; }
.qvd .qvd-list svg{ flex:none; width:18px; height:18px; color:var(--go); margin-top:2px; }
.qvd .qvd-check{ display:flex; align-items:flex-start; gap:12px; margin:0 0 14px; padding:14px; border-radius:12px; background:var(--page); border:1px solid var(--rule); cursor:pointer;
  font-size:.97rem; line-height:1.45; font-weight:600; color:var(--ink); transition:border-color .18s ease, background-color .18s ease; }
.qvd .qvd-check:hover{ border-color:var(--rule2); }
.qvd .qvd-check:has(input:checked){ border-color:var(--nav); background:var(--paper); }
.qvd .qvd-check input{ flex:none; width:20px; height:20px; margin:2px 0 0; border:1.5px solid var(--rule2); border-radius:6px; cursor:pointer; accent-color:var(--nav); }
.qvd .qvd-check input:checked{ background-color:var(--nav); border-color:var(--nav); }
.qvd .qvd-check input:focus-visible{ outline:3px solid var(--action-deep); outline-offset:2px; box-shadow:none; }
.qvd .qvd-foot{ display:flex; justify-content:flex-end; gap:10px; padding:12px 22px 20px; }
.qvd .qvd-btn{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 22px; border-radius:12px; font:inherit; font-size:.97rem; font-weight:700; line-height:1; cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1), background-color .18s ease, border-color .18s ease, color .18s ease; }
.qvd .qvd-btn--ghost{ background:var(--paper); border:1.5px solid var(--rule2); color:var(--nav); }
.qvd .qvd-btn--ghost:hover{ background:var(--page); border-color:var(--nav); }
.qvd .qvd-btn--danger{ min-width:150px; background:#b2423f; border:1.5px solid #b2423f; color:var(--paper); box-shadow:0 1px 2px rgba(20,32,48,.2), 0 8px 18px -6px rgba(178,66,63,.45); }
.qvd .qvd-btn--danger:hover:not(:disabled){ background:#9a3532; border-color:#9a3532; transform:translateY(-2px); box-shadow:0 2px 3px rgba(20,32,48,.2), 0 14px 26px -8px rgba(178,66,63,.5); }
.qvd .qvd-btn--danger:disabled{ background:var(--rule2); border-color:var(--rule2); color:var(--paper); box-shadow:none; cursor:not-allowed; }
.qvd .qvd-btn:active:not(:disabled){ transform:translateY(0) scale(.98); box-shadow:none; }
.qvd .qvd-btn:focus-visible, .qvd .qvd-close:focus-visible{ outline:3px solid var(--action-deep); outline-offset:2px; }
@media (max-width:480px){
  .qvd .modal-dialog{ margin:.75rem; }
  .qvd .qvd-head{ padding:16px 16px 14px 18px; }
  .qvd .qvd-body{ padding:16px 18px 4px; }
  .qvd .qvd-foot{ flex-direction:column-reverse; padding:10px 18px 18px; }
  .qvd .qvd-btn{ width:100%; height:48px; }
}
@media (prefers-reduced-motion:reduce){ .qvd.fade .modal-dialog, .qvd .qvd-btn, .qvd .qvd-close, .qvd .qvd-check{ transition:none; } }