/* ===========================================================
   portal-login.css
   Shared sign-in page styles for the three Graduate Studies
   portals: Student Portal, GradNet and SGPS Member Portal.

   - Self-contained: needs no Bootstrap and no icon font.
   - Load it on the sign-in page only. It sets the page
     background, root font size and a basic reset.
   - Every class is prefixed pl- so it cannot collide with
     existing site CSS.
   - Keep ONE master copy and copy the identical file to each
     portal so the three sign-in pages cannot drift apart.
   - Root font size is 15px. Sizes below are rem, so they all
     scale from that one value.
=========================================================== */

:root {
  --pl-purple:        #4F2683;
  --pl-purple-mid:    #7148a8;
  --pl-purple-light:  #ede9f6;
  --pl-purple-hover:  #e4def2;
  --pl-purple-border: #c4b5e8;
  --pl-bg:            #eeecea;
  --pl-card:          #ffffff;
  --pl-border:        #dddad4;
  --pl-text:          #1c1c2e;
  --pl-muted:         #6b7280;
  --pl-text-soft:     #4b5563;
  --pl-font:          'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}


/* -----------------------------------------------------------
   Base
----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  font-size: 15px;
  /* Matches the footer. Anything that shows beyond the page on a phone
     (bounce scroll, browser bar tint, a leftover gap) blends into the
     footer instead of showing as a grey strip. The grey page colour is
     set on body and .pl-shell below. */
  background: #fff;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--pl-bg);
  color: var(--pl-text);
  font-family: var(--pl-font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

svg { flex-shrink: 0; }


/* -----------------------------------------------------------
   Page shell: top bar, centred body, footer
----------------------------------------------------------- */
.pl-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--pl-bg);
}

.pl-topbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 52px;
  padding: 0 1rem;
  background: var(--pl-purple);
  color: #fff;
}

.pl-topbar img {
  height: 28px;
  width: auto;
}

/* The sign-in card (.pl-main) is vertically centred in the page.
   .pl-above holds the label and portal cards and grows UPWARD from the
   card. The empty ::after space below takes an equal share, which is
   what keeps the card centred. On a short window that cannot fit, the
   spacing gives way and the page simply scrolls. */
.pl-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
  animation: pl-fade-up 0.35s ease both;
}

.pl-body::after {
  content: "";
  flex: 1 1 0;
}

.pl-above {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  max-width: 400px;
}

.pl-main {
  flex: none;
  width: 100%;
  max-width: 400px;
}

.pl-eyebrow {
  margin-bottom: 0.6rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pl-muted);
  text-align: center;
}


/* -----------------------------------------------------------
   Portal switcher: one card per OTHER portal, above sign-in
   Whole card is a single link.
----------------------------------------------------------- */
.pl-switch {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.pl-switch-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--pl-purple-light);
  border: 1px solid var(--pl-purple-border);
  border-radius: 10px;
  color: var(--pl-text);
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}

.pl-switch-card:hover {
  background: var(--pl-purple-hover);
  border-color: var(--pl-purple);
}

.pl-switch-card:focus-visible {
  outline: 2px solid var(--pl-purple-mid);
  outline-offset: 2px;
}

.pl-switch-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.pl-switch-q {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pl-text);
}

.pl-switch-a {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--pl-text-soft);
}

.pl-switch-name {
  font-weight: 600;
  color: var(--pl-purple);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pl-switch-icon {
  color: var(--pl-purple);
  transition: transform 0.15s;
}

.pl-switch-card:hover .pl-switch-icon {
  transform: translateX(2px);
}


/* -----------------------------------------------------------
   Sign-in card
----------------------------------------------------------- */
.pl-card {
  /* Padding lives in variables so the header band below can reach the
     card edges, and so the phone size only has to change these values. */
  --pl-pad-x: 2rem;
  --pl-pad-top: 2rem;
  --pl-pad-bottom: 1.75rem;

  background: var(--pl-card);
  border: 1px solid var(--pl-border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  padding: var(--pl-pad-top) var(--pl-pad-x) var(--pl-pad-bottom);
}

/* Header band: sits flush against the top and sides of the card. The negative
   margins cancel the card padding, so there is no white gap above the title. */
.pl-title {
  margin: calc(var(--pl-pad-top) * -1) calc(var(--pl-pad-x) * -1) 1.25rem;
  padding: 0.9rem var(--pl-pad-x);
  background: var(--pl-purple);
  border-radius: 11px 11px 0 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  text-wrap: balance;
}

.pl-subtitle {
  margin-bottom: 1.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--pl-muted);
  text-align: center;
}

/* Portal description: a short "who is this for" line, then what it is used for. */
.pl-desc {
  margin-bottom: 1.5rem;
  text-align: center;
}

.pl-desc-lead {
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--pl-text);
  text-wrap: balance;
}

.pl-desc-body {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--pl-muted);
  text-wrap: pretty;
}

.pl-field { margin-bottom: 1rem; }

.pl-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pl-muted);
}

.pl-input {
  display: block;
  width: 100%;
  padding: 0.42rem 0.75rem;
  border: 1px solid var(--pl-border);
  border-radius: 6px;
  background: #fff;
  color: var(--pl-text);
  font-family: var(--pl-font);
  font-size: 0.82rem;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.pl-input:focus {
  border-color: var(--pl-purple-mid);
  box-shadow: 0 0 0 3px rgba(113,72,168,0.12);
}

.pl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 6px;
  background: var(--pl-purple);
  color: #fff;
  font-family: var(--pl-font);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.15s;
}

.pl-btn:hover { background: var(--pl-purple-mid); }

.pl-btn:focus-visible {
  outline: 2px solid var(--pl-purple-mid);
  outline-offset: 2px;
}

.pl-note {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--pl-border);
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--pl-muted);
  text-align: center;
}

.pl-note a { color: var(--pl-purple); }


/* -----------------------------------------------------------
   Help disclosure: collapsible tips inside the sign-in card.
   Used by the Student Portal. Pages can open it automatically
   after a failed sign-in by adding the open attribute.
----------------------------------------------------------- */
.pl-help {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--pl-border);
}

.pl-help summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pl-purple);
}

.pl-help summary::-webkit-details-marker { display: none; }

.pl-help summary:focus-visible {
  outline: 2px solid var(--pl-purple-mid);
  outline-offset: 3px;
  border-radius: 4px;
}

.pl-help-chevron { transition: transform 0.15s; }

.pl-help[open] .pl-help-chevron { transform: rotate(180deg); }

.pl-help-list {
  margin-top: 0.85rem;
  padding-left: 1.1rem;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--pl-muted);
}

.pl-help-list li + li { margin-top: 0.4rem; }

.pl-help-list a { color: var(--pl-purple); }


/* -----------------------------------------------------------
   Alert banners (sign-in errors and service notices)
----------------------------------------------------------- */
.pl-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
  padding: 0.65rem 0.9rem;
  border-radius: 6px;
  font-size: 0.75rem;
}

.pl-alert svg { margin-top: 1px; }

.pl-alert-danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.pl-alert-info {
  background: var(--pl-purple-light);
  border: 1px solid var(--pl-purple-border);
  color: var(--pl-purple);
}


/* -----------------------------------------------------------
   Page footer
----------------------------------------------------------- */
.pl-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.9rem 2rem;
  background: #fff;
  border-top: 1px solid var(--pl-border);
  font-size: 0.68rem;
  color: var(--pl-muted);
}

.pl-footer a {
  color: var(--pl-muted);
  text-decoration: underline;
}

.pl-footer a:hover { color: var(--pl-purple); }


/* -----------------------------------------------------------
   Motion and small screens
----------------------------------------------------------- */
@keyframes pl-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pl-body { animation: none; }
  .pl-switch-card,
  .pl-switch-icon,
  .pl-help-chevron,
  .pl-input,
  .pl-btn { transition: none; }
  .pl-switch-card:hover .pl-switch-icon { transform: none; }
}

@media (max-width: 480px) {
  .pl-card   { --pl-pad-x: 1.25rem; --pl-pad-top: 1.5rem; --pl-pad-bottom: 1.25rem; }
  .pl-footer { padding: 0.9rem 1rem; }
}