/* Ellis Client Portal — page styles.
 *
 * The design system (ds/styles.css) owns all tokens, fonts and components.
 * This file carries only what the portal page itself needs on top.
 */

html, body { margin: 0; padding: 0; min-height: 100%; background: #070809; }

a { color: var(--ellis-accent); text-decoration: none; }
a:hover { color: var(--ellis-accent-hover); }

@keyframes ellisFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Views carry inline `display: grid` / `display: flex`, which outrank the user
 * agent's `[hidden] { display: none }`. Without !important here, every hidden
 * view would render on top of every other one. */
[hidden] { display: none !important; }

button:disabled { opacity: .4; cursor: not-allowed; }

/* The header row (wordmark | tier badge + name + log out) is ~400px wide and
 * overflows a phone viewport. The design was only ever laid out at desktop
 * width. Let it wrap onto a second line instead.
 *
 * !important is required: these properties are set inline on the elements,
 * carried over verbatim from the approved design. */
@media (max-width: 560px) {
  .portal-header,
  .portal-header-meta { flex-wrap: wrap !important; }
  .portal-header-meta { gap: var(--ellis-space-3) !important; }
}

/* Visible focus for keyboard users — the design has no focus styling of its
 * own, and this is a login form. */
:where(input, textarea, button, a):focus-visible {
  outline: 2px solid var(--ellis-accent);
  outline-offset: 2px;
}