/* Shared auth polish: keeps every PrymeStudy auth surface interactive, role-aware and theme-aware. */

:root {
  --ps-auth-left-bg: #edf8fb;
  --ps-auth-left-surface: rgba(255,255,255,.76);
  --ps-auth-left-surface-strong: rgba(255,255,255,.94);
  --ps-auth-left-text: #0b1426;
  --ps-auth-left-muted: #5e7084;
  --ps-auth-left-line: rgba(10,159,196,.18);
  --ps-auth-left-glow: rgba(10,159,196,.13);
}
html[data-theme="dark"] {
  --ps-auth-left-bg: #07111f;
  --ps-auth-left-surface: rgba(13,25,41,.72);
  --ps-auth-left-surface-strong: rgba(13,25,41,.92);
  --ps-auth-left-text: #f4f8fc;
  --ps-auth-left-muted: #a7b3c5;
  --ps-auth-left-line: rgba(101,216,238,.18);
  --ps-auth-left-glow: rgba(50,199,231,.13);
}

/* Identity shell: do not clip the product scene on laptop-height displays. */
@media (min-width: 981px) {
  .ps-identity-shell { align-items: start; }
  .ps-identity-visual {
    position: sticky;
    top: 0;
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
    color: var(--ps-auth-left-text) !important;
    background:
      radial-gradient(circle at 14% 12%, var(--ps-auth-left-glow), transparent 31rem),
      radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--ps-auth-primary) 7%, transparent), transparent 28rem),
      var(--ps-auth-left-bg) !important;
    border-right-color: var(--ps-auth-left-line) !important;
  }
  .ps-identity-story { margin: 42px 0 28px !important; padding: 0 !important; }
  .ps-identity-visual-foot { margin-top: 22px !important; }
}

.ps-identity-grid {
  background-image:
    linear-gradient(color-mix(in srgb, var(--ps-auth-left-text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ps-auth-left-text) 5%, transparent) 1px, transparent 1px) !important;
}
.ps-identity-secure-pill {
  color: var(--ps-auth-left-muted) !important;
  background: var(--ps-auth-left-surface) !important;
  border-color: var(--ps-auth-left-line) !important;
}
.ps-identity-story > p,
.ps-identity-visual-foot { color: var(--ps-auth-left-muted) !important; }
.ps-identity-story h1 { color: var(--ps-auth-left-text); }
.ps-identity-story h1 strong,
.ps-identity-kicker { color: var(--ps-auth-primary-strong) !important; }
.ps-identity-live {
  min-height: 0 !important;
  background: var(--ps-auth-left-surface) !important;
  border-color: var(--ps-auth-left-line) !important;
  box-shadow: 0 24px 70px color-mix(in srgb, var(--ps-auth-left-text) 10%, transparent) !important;
}
.ps-identity-live-head small,
.ps-identity-live-foot { color: var(--ps-auth-left-muted) !important; }
.ps-identity-live-head b { color: var(--ps-auth-left-text) !important; }
.ps-identity-feature {
  color: var(--ps-auth-left-muted) !important;
  background: var(--ps-auth-left-surface-strong) !important;
  border-color: var(--ps-auth-left-line) !important;
}
.ps-identity-feature small { color: color-mix(in srgb, var(--ps-auth-left-muted) 80%, transparent) !important; }
.ps-identity-feature.is-active {
  color: var(--ps-auth-left-text) !important;
  background: color-mix(in srgb, var(--ps-auth-primary) 12%, var(--ps-auth-left-surface-strong)) !important;
  border-color: color-mix(in srgb, var(--ps-auth-primary) 45%, var(--ps-auth-left-line)) !important;
}
.ps-identity-orb { background: var(--ps-auth-left-surface-strong) !important; }

/* The role selector is a visual intent chooser. Login never changes authority. */
.ps-identity-role-block { margin: -4px 0 20px; }
.ps-identity-role-label {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:8px; color:var(--ps-auth-muted); font-size:10px; line-height:1.4;
}
.ps-identity-role-label b { color:var(--ps-auth-text); font-size:11px; }
.ps-identity-role-tabs {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px;
  padding:5px; border:1px solid var(--ps-auth-border); border-radius:15px;
  background:var(--ps-auth-surface-soft);
}
.ps-identity-role-tabs button {
  min-height:39px; padding:0 8px; border:0; border-radius:11px; cursor:pointer;
  background:transparent; color:var(--ps-auth-muted); font-size:10px; font-weight:790;
  transition:.18s ease;
}
.ps-identity-role-tabs button:hover { color:var(--ps-auth-text); background:color-mix(in srgb,var(--ps-auth-primary) 7%,transparent); }
.ps-identity-role-tabs button[aria-pressed="true"] {
  background:var(--ps-auth-surface); color:var(--ps-auth-text);
  box-shadow:0 3px 12px rgba(18,35,61,.08), inset 0 0 0 1px var(--ps-auth-border);
}

/* Role-aware scene inside the left product panel. */
.ps-identity-role-scene {
  position:relative; z-index:4; min-height:236px; display:grid;
  grid-template-columns:150px minmax(0,1fr); gap:18px; align-items:center; padding:10px 22px 18px;
}
.ps-identity-role-scene__visual { position:relative; width:138px; height:138px; display:grid; place-items:center; }
.ps-identity-role-scene__halo {
  position:absolute; inset:5px; border:1px solid color-mix(in srgb,var(--ps-auth-primary) 35%,var(--ps-auth-left-line));
  border-radius:41% 59% 54% 46% / 56% 43% 57% 44%; animation:ps-identity-role-orbit 8s linear infinite;
}
.ps-identity-role-scene__avatar {
  position:relative; z-index:2; width:96px; height:96px; color:var(--ps-auth-primary-strong);
  filter:drop-shadow(0 14px 24px color-mix(in srgb,var(--ps-auth-primary) 18%,transparent));
  animation:ps-identity-role-float 3.4s ease-in-out infinite;
}
.ps-identity-role-scene__avatar svg { width:100%; height:100%; overflow:visible; }
.ps-identity-role-scene__avatar .body { fill:var(--ps-auth-left-surface-strong); stroke:currentColor; stroke-width:2; }
.ps-identity-role-scene__avatar .soft { fill:color-mix(in srgb,var(--ps-auth-primary) 10%,var(--ps-auth-left-surface-strong)); stroke:currentColor; stroke-width:1.6; }
.ps-identity-role-scene__avatar .line { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ps-identity-role-scene__avatar .eye { fill:currentColor; transform-origin:center; animation:ps-identity-role-blink 5.2s infinite; }
.ps-identity-role-scene__copy small { display:block; color:var(--ps-auth-primary-strong); font-size:9px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.ps-identity-role-scene__copy strong { display:block; margin-top:6px; color:var(--ps-auth-left-text); font-size:20px; line-height:1.14; letter-spacing:-.025em; }
.ps-identity-role-scene__copy p { margin:8px 0 0; color:var(--ps-auth-left-muted); font-size:12px; line-height:1.55; }
.ps-identity-role-scene__steps { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.ps-identity-role-scene__steps span { padding:6px 8px; border:1px solid var(--ps-auth-left-line); border-radius:999px; background:var(--ps-auth-left-surface-strong); color:var(--ps-auth-left-muted); font-size:9px; font-weight:760; }
.ps-identity-live[data-role="lecturer"] .ps-identity-role-scene__avatar { color:#e59a1d; }
.ps-identity-live[data-role="tutor"] .ps-identity-role-scene__avatar { color:#7c5ce7; }
.ps-identity-live[data-role="institution_admin"] .ps-identity-role-scene__avatar { color:#0d9a70; }

/* In local/dev, keep Google visible even when OAuth credentials are not configured. */
.ps-identity-google.ps-identity-google--unavailable { opacity:.72; cursor:not-allowed; }
.ps-identity-google-note { margin:7px 0 14px; text-align:center; color:var(--ps-auth-muted); font-size:10px; }

/* Existing React/Fortify auth pages: same light/dark left panel and no clipped story. */
.ps-auth-story {
  color:var(--ps-auth-left-text) !important;
  background:
    radial-gradient(circle at 14% 12%, var(--ps-auth-left-glow), transparent 31rem),
    var(--ps-auth-left-bg) !important;
  border-right-color:var(--ps-auth-left-line) !important;
}
.ps-auth-story .ps-auth-kicker,
.ps-auth-story h1 strong { color:var(--ps-auth-primary, #0a9fc4) !important; }
.ps-auth-story p { color:var(--ps-auth-left-muted) !important; }
.ps-auth-product,
.ps-auth-role-character { background:var(--ps-auth-left-surface) !important; border-color:var(--ps-auth-left-line) !important; }
.ps-auth-role-character__copy strong { color:var(--ps-auth-left-text) !important; }
.ps-auth-role-character__copy p { color:var(--ps-auth-left-muted) !important; }
.ps-auth-role-character__steps span { background:var(--ps-auth-left-surface-strong) !important; border-color:var(--ps-auth-left-line) !important; color:var(--ps-auth-left-muted) !important; }

@media (max-height: 820px) and (min-width: 981px) {
  .ps-identity-visual { padding-top:22px !important; padding-bottom:22px !important; }
  .ps-identity-story { margin:26px 0 18px !important; }
  .ps-identity-story h1 { font-size:clamp(38px,3.6vw,56px) !important; }
  .ps-identity-story > p { margin-top:14px !important; font-size:14px !important; }
  .ps-identity-live { margin-top:20px !important; }
  .ps-identity-role-scene { min-height:200px; grid-template-columns:126px minmax(0,1fr); }
  .ps-identity-role-scene__visual { width:116px; height:116px; }
  .ps-identity-role-scene__avatar { width:80px; height:80px; }
}
@media (max-width: 1120px) and (min-width: 981px) {
  .ps-identity-role-scene { grid-template-columns:110px minmax(0,1fr); padding-left:14px; padding-right:14px; }
  .ps-identity-role-scene__visual { width:104px; height:104px; }
  .ps-identity-role-scene__avatar { width:76px; height:76px; }
  .ps-identity-role-scene__copy strong { font-size:17px; }
}
@media (max-width: 600px) {
  .ps-identity-role-tabs { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-identity-role-scene__halo,
  .ps-identity-role-scene__avatar,
  .ps-identity-role-scene__avatar .eye { animation:none !important; }
}
@keyframes ps-identity-role-float { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-7px) rotate(1deg)} }
@keyframes ps-identity-role-orbit { to{transform:rotate(360deg)} }
@keyframes ps-identity-role-blink { 0%,46%,49%,100%{transform:scaleY(1)} 47%,48%{transform:scaleY(.08)} }


/* First-party auth context: the same Identity service adapts to the product
   surface that sent the user without changing account authority. */
.ps-identity-shell[data-auth-context="institution"]{
  --ps-auth-primary:#2563eb;
  --ps-auth-primary-strong:#1d4ed8;
  --ps-auth-primary-soft:rgba(37,99,235,.12);
}
.ps-identity-shell[data-auth-context="provider"]{
  --ps-auth-primary:#0a9fc4;
  --ps-auth-primary-strong:#0787a8;
  --ps-auth-primary-soft:rgba(10,159,196,.12);
}
.ps-identity-shell[data-auth-context="provider"] .ps-identity-live[data-role="provider"] .ps-identity-role-scene__avatar{color:#0a9fc4}
.ps-identity-role-tabs.is-contextual{grid-template-columns:1fr}
.ps-identity-role-tabs.is-contextual button{cursor:default;min-height:43px}
.ps-identity-role-tabs.is-contextual button:disabled{opacity:1}