/*
 * Infonyx brand colours, taken from infonyx.com.au (Elementor global colours,
 * checked 2026-10-14). Text/background pairs below meet WCAG AA:
 *   navy on white 11.6:1, dark navy on teal 6.3:1, muted on white 6.4:1.
 * White on teal is only 2.95:1, so teal buttons use dark navy text.
 */
:root {
  color-scheme: light dark;

  --navy: #143A60;
  --navy-dark: #0A1F32;
  --navy-deeper: #071522;
  --navy-card: #0E2944;
  --teal: #2BA5B2;
  --mint: #4BE7B7;
  --blue: #245FE5;
  --yellow: #FFB906;
  --grey-50: #F5F5F5;
  --grey-200: #D9DEDF;
  --grey-300: #BCC5C7;

  --bg: var(--grey-50);
  --bar: var(--navy);
  --card: #FFFFFF;
  --text: var(--navy);
  --muted: #4D6178;
  --border: var(--grey-200);
  --field-border: #5A6B7D;
  --focus: var(--blue);
  --link: var(--blue);
  --primary-bg: var(--teal);
  --primary-text: var(--navy-deeper);
  --secondary-bg: var(--navy);
  --secondary-text: #FFFFFF;
  --secondary-border: var(--navy);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--navy-deeper);
    --bar: var(--navy-dark);
    --card: var(--navy-card);
    --text: #FFFFFF;
    --muted: var(--grey-300);
    --border: var(--navy);
    --field-border: var(--grey-300);
    --focus: var(--mint);
    --link: var(--mint);
    --secondary-bg: transparent;
    --secondary-text: #FFFFFF;
    --secondary-border: var(--grey-300);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.brand-bar {
  background: var(--bar);
  padding: 16px;
  display: flex;
  justify-content: center;
}
.brand-bar img { display: block; height: 40px; width: auto; }

.card {
  width: calc(100% - 32px);
  max-width: 440px;
  margin: 32px auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--teal);
  border-radius: 10px;
  padding: 24px;
}

h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; font-weight: 600; margin: 0 0 8px; }

.intro { margin: 0 0 8px; }

label { display: block; font-weight: 600; margin: 16px 0 4px; }

input {
  width: 100%;
  padding: 12px;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--field-border);
  border-radius: 6px;
}

input:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

button {
  font: inherit;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  min-height: 48px;
}

button.primary { background: var(--primary-bg); color: var(--primary-text); border-color: var(--primary-bg); }
button.secondary { background: var(--secondary-bg); color: var(--secondary-text); border-color: var(--secondary-border); }
button.ghost { background: transparent; color: var(--text); border-color: var(--border); }
button:disabled { opacity: 0.4; cursor: not-allowed; }

@media (hover: hover) {
  button.primary:not(:disabled):hover { filter: brightness(1.08); }
  button.secondary:not(:disabled):hover { filter: brightness(1.2); }
}

button.link {
  border: 0;
  padding: 0;
  min-height: 0;
  background: none;
  color: var(--link);
  font-weight: 400;
  text-decoration: underline;
}

#login-form button { width: 100%; margin-top: 24px; }

.status { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; font-weight: 600; margin-top: 8px; }

/* The label beside the dot carries the meaning; colour is a secondary cue. */
.dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: none;
  background: var(--grey-300);
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / 0.15);
}
.dot[data-state="starting"], .dot[data-state="waiting"], .dot[data-state="stopping"] {
  background: var(--yellow);
  animation: pulse 1.4s ease-in-out infinite;
}
.dot[data-state="ready"] { background: var(--mint); box-shadow: inset 0 0 0 2px var(--teal); }

@keyframes pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none !important; } }

.actions { display: flex; gap: 12px; margin-top: 24px; }
.actions button { flex: 1; }

.message { margin: 16px 0 0; }
/* Kept in the DOM (it's a live region) but takes no space while empty. */
.message:empty { margin: 0; }
.muted { color: var(--muted); margin: 4px 0 0; font-size: 0.95rem; }
.footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }

dialog {
  max-width: min(400px, calc(100vw - 32px));
  border: 1px solid var(--border);
  border-top: 4px solid var(--teal);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  padding: 24px;
}
dialog::backdrop { background: rgb(7 21 34 / 0.6); }
dialog p { margin: 0; }