/* Ligo hub (standalone) — page base + sign-in/tool-chooser layout.
   ligo-ui.css (shared by every standalone page) styles the hub components;
   this file holds the base the hub had when it lived inside the ShotTrace
   page (the old ShotTrace web plugin-ui.css + styles.css). */

:root {
  --bg-base: #070d17;
  --bg-dark: #0a1019;
  --bg-card: #111a28;
  --border-medium: rgba(91, 127, 194, 0.32);
  --text-primary: #eef4ff;
  --text-muted: #8a9ec4;
  --accent-primary: #ed913a;
  --accent-hover: #f5a85c;
  --st-surface-2: #262a31;
  --st-border: #333844;
  --st-text: #e7e9ec;
  --st-accent: #4f8cff;
  --st-danger: #e6553f;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  padding: 12px;
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.4;
  overscroll-behavior: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

[hidden] { display: none !important; }

button {
  font-family: inherit;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  background-color: var(--accent-primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  transition: all 0.2s ease;
}
button:hover { background-color: var(--accent-hover); }
button:disabled {
  background-color: var(--border-medium);
  cursor: not-allowed;
  opacity: 0.6;
}

input[type="email"], input[type="password"] {
  background: var(--st-surface-2);
  border: 1px solid var(--st-border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--st-text);
  font-size: 0.9rem;
}
input:focus { outline: 1px solid var(--st-accent); }

/* A real browser tab shows the native focus outline after every click; keep a
   ring only for keyboard navigation, as on every standalone page. */
button:focus, a:focus, input:focus { outline: none; }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

#app-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.st-view { display: none; }
.st-view:not([hidden]) { display: block; }
.ligo-screen { padding: 0; }
.ligo-panel { margin-top: 10vh; }
#view-tools.ligo-screen { padding: 24px; min-height: calc(100vh - 24px); }

.st-status {
  position: fixed; bottom: 20px; right: 20px;
  background: var(--st-surface-2); border: 1px solid var(--st-border);
  border-radius: 8px; padding: 10px 16px; font-size: 0.85rem;
  max-width: 360px;
}
.st-status.is-error { border-color: var(--st-danger); color: var(--st-danger); }

@media (max-width: 850px) {
  body { padding: 8px; }
}