/* The client portal: the recap builder's look, with the principal's brand up front. */

body.portal { background: var(--canvas); }

/* ---------- Sign-in card ---------- */

.portal-card { max-width: 420px; }
.portal-card-head {
  padding: 30px 28px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.portal-logo { max-height: 76px; max-width: 230px; object-fit: contain; }
.portal-logo.company { max-height: 46px; }
.portal-card-title { font-size: 20px; font-weight: 700; color: var(--forest-dark); margin-top: 6px; }
.portal-card .auth-body { padding: 18px 28px 24px; }
.portal-card .btn { justify-content: center; }
.portal-card a.btn { text-decoration: none; }
.portal-card .input[readonly] { background: var(--canvas); color: var(--muted); }
.portal-help { margin: 2px 0 0; text-align: center; line-height: 1.45; }
.portal-card-foot {
  border-top: 1px solid var(--card-line); padding: 12px 20px;
  text-align: center; font-size: 11px; color: var(--muted);
}

/* ---------- Signed in ---------- */

.portal-shell { min-height: 100vh; display: flex; flex-direction: column; }
.portal-header { background: #fff; border-bottom: 1px solid var(--card-line); }
.portal-header::before { content: ""; display: block; height: 4px; background: var(--gradient); }
.portal-header-inner {
  max-width: 860px; margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.portal-header-logo { max-height: 50px; max-width: 170px; object-fit: contain; }
.portal-name { font-size: 18px; font-weight: 700; color: var(--forest-dark); }
.portal-account { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.portal-link {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--leaf); font-size: 12px; font-weight: 500;
}
.portal-link:hover { text-decoration: underline; }

.portal-main {
  flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 24px 20px 40px;
  display: flex; flex-direction: column; gap: 14px;
}
.portal-welcome { font-size: 13.5px; line-height: 1.55; white-space: pre-line; }
.portal-empty { color: var(--muted); font-size: 13px; line-height: 1.5; }
.portal-newest { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 22px; }
.portal-newest-title { font-size: 22px; font-weight: 700; color: var(--ink); margin: 4px 0 2px; }
.portal-open { text-decoration: none; }
.portal-recaps-title { margin-bottom: 4px; }
.portal-recap {
  display: flex; align-items: center; gap: 12px; padding: 12px 2px;
  border-top: 1px solid var(--card-line); color: inherit; text-decoration: none;
}
.portal-recaps-title + .portal-recap { border-top: 0; }
.portal-recap:hover .portal-recap-title { color: var(--leaf); }
.portal-recap > svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.portal-footer {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 18px; color: var(--muted); font-size: 11px;
}
.portal-footer img { height: 20px; }

/* ---------- Change password ---------- */

.portal-dialog { max-width: 380px; }
.portal-dialog-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.portal-dialog-form label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 600; color: var(--muted); }
.portal-dialog-buttons { justify-content: flex-end; margin-top: 4px; }

@media (max-width: 560px) {
  .portal-account { width: 100%; }
  .portal-newest-title { font-size: 19px; }
  .portal-card-head { padding: 24px 20px 4px; }
  .portal-card .auth-body { padding: 16px 20px 22px; }
}