/* 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); }

/* Email-first sign-in (signin.js): the password pane and the SSO pane share one grid cell, so swapping them never
   moves the rest of the page; the switched-off pane fades out and leaves the tab order. Without the script the SSO
   pane keeps its `hidden` attribute and the page is the plain form. */
.hrd { display: grid; }
/* Visibility flips at once when a pane comes in (so it can take focus straight away) and only after the fade when
   it goes out. */
.hrd-pane { grid-area: 1 / 1; min-width: 0; transition: opacity .2s ease, visibility 0s linear 0s; }
.hrd-pane.is-off { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
.hrd-hint { margin: 12px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.45; text-align: center; }
.hrd-alt { margin: 6px 0 0; text-align: center; font-size: .9rem; }
button.link {
  margin: 0; width: auto; padding: 4px 6px; font-weight: 400; color: var(--primary-dark); background: transparent;
  text-decoration: underline; text-underline-offset: 2px;
}
button.link:hover { color: var(--brand-deep); background: transparent; }
@media (prefers-reduced-motion: reduce) { .hrd-pane { transition: none; } }

/* 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; }
}