/* css/student-profile.css - /student/<code>. Loads after css/tutor-profile.css and
   reuses its .tt-tp-* layout; only what a requirement has and a tutor does not. */

.tt-sp-avatar{ flex:none; display:flex; align-items:center; justify-content:center; width:88px; height:88px;
  border-radius:var(--r); background:var(--blue-50); border:1px solid var(--blue-100);
  font:800 32px/1 var(--font-display); color:var(--blue-700); }
@media (min-width:768px){ .tt-sp-avatar{ width:136px; height:136px; font-size:44px; } }

.tt-sp-chip--closed{ background:#F1F3F6; color:var(--ink-700); }                  /* 9.4:1 */
.tt-tp-hero__place + .tt-tp-hero__place{ margin-top:var(--sp-1); }

.tt-sp-alert--ok{ background:var(--green-50); border-color:#A7DDBF; color:var(--green-700); }   /* 4.83:1 */

.tt-sp-phone{ display:flex; align-items:center; gap:var(--sp-3); margin:var(--sp-3) 0 var(--sp-3);
  padding:var(--sp-3) var(--sp-4); border:1px solid #A7DDBF; border-radius:var(--r); background:var(--green-50);
  font:700 22px/1.3 var(--font-display); color:var(--green-700); }
.tt-sp-phone a{ color:inherit; text-decoration:none; letter-spacing:.02em; }
.tt-sp-phone a:hover{ text-decoration:underline; }
.tt-sp-left{ margin:calc(-1 * var(--sp-1)) 0 0; font-size:14px; color:var(--ink-700); text-align:center; }
.tt-tp-side__notes .tt-sp-warn .tt-icon{ color:#B45309; }
/* green marks the OTP note only; tutor-profile.css greens whichever note is first */
.tt-tp-side__notes li:first-child .tt-icon{ color:var(--ink-500); }
.tt-tp-side__notes .tt-sp-otp .tt-icon{ color:var(--green-700); }