/* SerixCloud login UI. Served from <base>/static/ (strict CSP: no inline styles). Relative URLs. */
@font-face { font-family: "Trade Gothic"; src: url("fonts/TradeGothicLTStd.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Trade Gothic"; src: url("fonts/TradeGothicLTStd-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Trade Gothic"; src: url("fonts/TradeGothicLTStd-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }

:root {
  --primary: #009fe3;
  --primary-dark: #007bb0;
  --brand-deep: #005f95;
  --text: #1d2939;
  --muted: #667085;
  --border: #d0d5dd;
  --bg: #f4f7fa;
  --surface: #ffffff;
  --error: #b42318;
  --error-bg: #fef3f2;
  --notice: #05603a;
  --notice-bg: #ecfdf3;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: "Trade Gothic", "Segoe UI", Arial, sans-serif; color: var(--text); background: var(--bg); min-height: 100vh; }
a { color: var(--primary-dark); }
a:hover { color: var(--brand-deep); }

/* Split screen: brand panel (~1/3) + form column. */
.auth { display: flex; min-height: 100vh; }
.hero {
  flex: 0 0 34%;
  max-width: 560px;
  display: flex;
  align-items: flex-end;
  padding: 48px;
  color: var(--brand-deep);
  background: linear-gradient(160deg, #e6f6fd 0%, #cdeefb 55%, #a9e1f7 100%);
}
.hero-copy { max-width: 420px; }
.hero-title { font-size: 1.75rem; font-weight: 700; line-height: 1.25; margin: 0 0 12px; }
.hero-body { font-size: 1.05rem; line-height: 1.5; margin: 0; color: #22597d; }

.panel { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; justify-content: flex-end; padding: 16px 24px; }
/* Vertically centred in the panel (auto margins in the flex column); the extra bottom padding
   balances the language bar so the form sits at the optical middle of the window. Content taller
   than the window falls back to top alignment (auto margins collapse to 0). */
.column { width: 100%; max-width: 420px; margin: auto; padding: 24px 16px 88px; flex: 0 0 auto; }

.logo { display: block; width: 240px; max-width: 100%; height: auto; margin: 16px 0 32px; }
h1 { font-weight: 700; font-size: 1.6rem; margin: 0 0 6px; }
.sub { color: var(--muted); margin: 0 0 20px; }

label { display: block; font-size: .9rem; margin: 16px 0 6px; color: var(--muted); }
input[type=email], input[type=password], input[type=text] {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
}
input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
button {
  margin-top: 24px; width: 100%; padding: 12px; font: inherit; font-weight: 700; color: #fff;
  background: var(--primary); border: 0; border-radius: 8px; cursor: pointer;
}
button:hover { background: var(--primary-dark); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 2px; }

.forgot { margin: 8px 0 0; text-align: right; font-size: .9rem; }
.back { margin: 20px 0 0; font-size: .9rem; }
.error { color: var(--error); background: var(--error-bg); border-radius: 8px; padding: 10px 12px; }
.notice, .maintenance { color: var(--notice); background: var(--notice-bg); border-radius: 8px; padding: 10px 12px; }
.muted { color: var(--muted); font-size: .9rem; }
/* E-mail sign-in code: "Send a new code" is a quiet second button under the code form. */
.resend button { margin-top: 12px; color: var(--primary); background: transparent; border: 1px solid var(--border); font-weight: 400; }
.resend button:hover { background: var(--surface); }

/* Organisation picker: one radio row per organisation (names only). */
.orgs { border: 0; margin: 0; padding: 0; min-width: 0; }
.orgs legend { font-size: .9rem; color: var(--muted); margin: 0 0 6px; padding: 0; }
label.org {
  display: flex; align-items: center; gap: 12px; margin: 8px 0 0; padding: 12px 14px; cursor: pointer;
  font-size: 1rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
label.org input { margin: 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--primary); }
label.org span { overflow-wrap: anywhere; }
label.org:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

.divider { border: 0; border-top: 1px solid #e4e7ec; margin: 32px 0 12px; }
.foot { color: var(--muted); font-size: .8rem; }

/* Language picker: <details> with plain links (no script). */
.lang { position: relative; }
.lang summary {
  list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: .9rem;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary img, .lang li img { border-radius: 2px; box-shadow: 0 0 0 1px rgba(16, 24, 40, .12); }
.lang .chev { color: var(--muted); }
.lang[open] .chev { transform: rotate(180deg); }
.lang ul {
  position: absolute; right: 0; z-index: 10; margin: 6px 0 0; padding: 6px; list-style: none; min-width: 180px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}
.lang li a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: .9rem; }
.lang li a:hover, .lang li a[aria-current="true"] { background: var(--bg); }

@media (max-width: 900px) {
  .hero { display: none; }
}