/* The Trading Terminal Portal's sign-in screen (src/shared/auth/auth-layout.tsx): a dark brand panel on the
   left, the card on the right over the brand backdrop. Below 64rem the panel is hidden and the card carries
   the lockup. Tokens are the Portal's shadcn "neutral" values; the card is light, the panel dark, in both
   colour schemes, as in the Portal. Inter is listed first so a machine that has it matches the Portal;
   the CSP allows no third-party font host, so others fall back to the system sans. */
:root {
  color-scheme: light;
  font: 16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --panel: #0a0a0a; --panel-text: #fafafa; --panel-muted: #a3a3a3;
  --card: #fff; --text: #0a0a0a; --muted: #737373; --border: #e5e5e5; --hover: #f5f5f5; --ring: #0a0a0a;
  --radius: .5rem;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--panel); color: var(--text); -webkit-font-smoothing: antialiased; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 1rem; top: -5rem; z-index: 1; padding: .5rem .75rem; border-radius: var(--radius); background: var(--card); color: var(--text); }
.skip:focus { top: 1rem; }
[hidden] { display: none !important; }

.layout { display: grid; min-height: 100vh; min-height: 100dvh; }
.panel { display: none; padding: 3rem; background: var(--panel); color: var(--panel-text); }
.panel-column { display: flex; flex-direction: column; width: 100%; max-width: 28rem; margin: 0 auto; }
.panel-brand { margin: auto 0; display: grid; gap: 4rem; }
.headline { margin: 0; font-size: 2.25rem; line-height: 2.5rem; font-weight: 600; letter-spacing: -.025em; }
.legal { margin: 0; font-size: .75rem; line-height: 1rem; color: var(--panel-muted); }
.panel a:focus-visible { outline-color: var(--panel-text); }

/* The Poolder wordmark alone, without a product caption, at the Portal's 28px height. */
.lockup { display: block; width: fit-content; color: inherit; text-decoration: none; border-radius: .25rem; }
.lockup .logo { display: block; height: 1.75rem; width: calc(1.75rem * 304 / 54); }

.hero { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem;
  background: #0b4a5a url('/assets/auth-backdrop.webp') center / cover no-repeat; }
/* Signed out the card is the Portal's centred sign-in card; signed in it reads left to right: greeting, the
   apps as quiet rows, and the account in a footer. */
.card { width: 100%; max-width: 24rem; overflow: hidden; border: 1px solid var(--border); border-radius: .75rem;
  background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); }
.card-lockup { margin: 1.5rem 1.5rem 0; color: var(--text); }
.card-header { padding: 1.5rem 1.5rem 0; }
.card[data-state="signed-out"] .card-lockup { margin-inline: auto; }
.card[data-state="signed-out"] .card-header { text-align: center; }
.card-lockup + .card-header { padding-top: 1.5rem; }
h1 { margin: 0; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -.025em; }
#status { margin: .375rem 0 0; font-size: .875rem; line-height: 1.25rem; color: var(--muted); }
#status:empty { display: none; }
.card-content { display: grid; gap: 1rem; padding: 1.5rem; }
.card[data-state="apps"] .card-content { padding: 1rem .75rem .75rem; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 2.25rem;
  padding: 0 1rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--card);
  color: var(--text); font: inherit; font-size: .875rem; font-weight: 500; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.button:hover { background: var(--hover); }
.microsoft { width: 1rem; height: 1rem; flex: none; }
.note { margin: 0; text-align: center; font-size: .75rem; line-height: 1rem; color: var(--muted); }

.apps { display: grid; gap: .125rem; margin: 0; padding: 0; list-style: none; }
.apps a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .875rem; padding: .625rem .75rem;
  border-radius: var(--radius); color: var(--text); text-decoration: none; }
.apps a:hover { background: var(--hover); }
.apps a:hover .chevron { color: var(--text); }
.icon { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; color: var(--text); }
.icon svg { width: 1.5rem; height: 1.5rem; }
.app-text { display: grid; min-width: 0; }
.app-name { font-size: .875rem; line-height: 1.25rem; font-weight: 500; overflow-wrap: anywhere; }
.app-host { font-size: .75rem; line-height: 1rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chevron { width: 1rem; height: 1rem; color: var(--muted); }
#fallback .apps a { border: 1px solid var(--border); }

#fallback { display: grid; gap: .75rem; }
h2 { margin: 0; font-size: .875rem; line-height: 1.25rem; font-weight: 600; }
#fallback p { margin: 0; font-size: .75rem; line-height: 1rem; color: var(--muted); }

.account { display: flex; align-items: center; gap: .625rem; padding: .75rem 1.5rem; border-top: 1px solid var(--border); }
.avatar { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--panel); color: var(--panel-text); font-size: .6875rem; font-weight: 600; letter-spacing: .02em; }
.avatar:empty { display: none; }
.username { flex: 1; min-width: 0; font-size: .75rem; line-height: 1rem; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sign-out { flex: none; margin-left: auto; }
.sign-out button { padding: .25rem .5rem; margin-right: -.5rem; border: 0; border-radius: .25rem; background: none;
  color: var(--text); font: inherit; font-size: .75rem; font-weight: 500; cursor: pointer; }
.sign-out button:hover { background: var(--hover); }

@media (min-width: 64rem) {
  .layout { grid-template-columns: 1fr 1fr; }
  .panel { display: flex; }
  .card-lockup { display: none; }
}