/* Shared by every page. Every colour is a variable from /theme.css. */

* { box-sizing: border-box; }
html { background: var(--color-bg); }
body {
  margin: 0;
  font: 16px/1.45 var(--font-family);
  background: var(--color-bg);
  color: var(--color-text);
}
[hidden] { display: none !important; }
a { color: var(--color-accent); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

button {
  font: inherit;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  cursor: pointer;
}
button:disabled { opacity: 0.6; cursor: default; }
button.secondary { background: var(--color-bg); color: var(--color-text); border-color: var(--color-border); }
button.small { min-height: 36px; padding: 6px 10px; }
.link-button { background: transparent; color: var(--color-accent); border-color: transparent; padding: 8px; }

input, textarea, select {
  font: inherit;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
::placeholder { color: var(--color-text-muted); opacity: 1; }
input:disabled, textarea:disabled, select:disabled { opacity: 0.7; }

.hint { color: var(--color-text-muted); }
.error { color: var(--color-bad); }
.good { color: var(--color-good); }

/* Status chips: neutral outline by default, or one of the solid chips. */
.badge {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge.chip-green { background: var(--chip-green-bg); color: var(--chip-green-text); border-color: transparent; }
.badge.chip-red { background: var(--chip-red-bg); color: var(--chip-red-text); border-color: transparent; }
.badge.chip-amber { background: var(--chip-amber-bg); color: var(--chip-amber-text); border-color: transparent; }
.badge.chip-orange { background: var(--chip-orange-bg); color: var(--chip-orange-text); border-color: transparent; }

/* Styled tooltip (see theme.js). Never the browser's own title tooltip. */
.tooltip {
  position: fixed;
  z-index: 50;
  max-width: min(18rem, calc(100vw - 16px));
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font: 500 0.85rem/1.35 var(--font-family);
  pointer-events: none;
}

.theme-switcher {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-text);
}
.theme-switcher button { min-height: 36px; padding: 6px 12px; background: transparent; color: inherit; border-color: transparent; }
.theme-switcher button[aria-checked="true"] { background: var(--color-accent); color: var(--color-on-accent); }

.notice { max-width: 480px; margin: 15vh auto 24px; padding: 0 16px; }
.page-footer { max-width: 480px; margin: 0 auto; padding: 0 16px 24px; }