/* Simple.css already provides nice defaults.
   We add compact alert styles and a tiny spinner. */

#alert[hidden] { display: none !important; }
#alert {
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  border-radius: 0.4rem;
  border: 1px solid transparent;
}
#alert.ok    { background: #e8f7ee; color: #0b5; border-color: #0b5; }
#alert.warn  { background: #fff7e6; color: #a66; border-color: #e6b800; }
#alert.err   { background: #fdecea; color: #b00020; border-color: #f5c2c7; }

/* Disabled button & inline spinner */
button[disabled] { opacity: 0.6; cursor: not-allowed; }
.inline-spinner {
  display: inline-block; width: 1em; height: 1em; margin-left: 0.5em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .75s linear infinite; vertical-align: text-bottom;
}
@keyframes spin { to { transform: rotate(360deg); } }

/*
 * Custom colors for the Simple.css styling
 */

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #fff;
    --accent-bg: #f5f7ff;
    --text: #212121;
    --text-light: #585858;
	--border: #002554;
    --accent: #003594;
    --accent-hover: #0056f0;
    --accent-text: var(--bg);
    --code: #A6192E;
    --preformatted: #444;
    --marked: #FFC72C;
    --disabled: #B2B4B2;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #212121;
    --accent-bg: #222932;
    --text: #dcdcdc;
    --text-light: #ababab;
    --accent: #FFC72C;
    --accent-hover: #ffe499;
    --accent-text: var(--bg);
    --code: #e54d64;
    --preformatted: #ccc;
    --disabled: #111;
  }
}