@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap");

/* Theme variables (always light) */
:root {
  /* Force light UI for built-in components (scrollbars, controls, etc.) */
  color-scheme: light;

  /* Base palette (light) */
  --bg: #ffffff;
  --fg: #222222;
  --muted: #666666;
  --accent: #005bbb;
  --box: #f7f7f7;
  --border-weak: #dddddd;

  /* Layout vars */
  --font-sans: "Montserrat", "Segoe UI", Arial, Helvetica, sans-serif;
  --page-gap: 24px;
  --tips-indent: 16px;
  --text-color: var(--fg);
}

/* Global reset and typography */
* { box-sizing: border-box; }
html { height: 100%; }
body {
  min-height: 100%;
  margin: 0;
  background-color: #ffffff; /* explicit white to avoid UA defaults */
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: 1.5;
}

/* Header */
.site-header {
  background-color: var(--box);
  color: var(--fg);
  text-align: center;
  padding: 16px 12px;
  border-bottom: 1px solid var(--border-weak);
}
.site-header h1,
.site-header .brand-title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(20px, 2.5vw, 24px);
  line-height: 1.2;
}
.site-header p {
  margin: 6px 0 0;
  font-size: clamp(14px, 1.8vw, 16px);
  color: var(--muted);
}

/* Main content wrapper */
main {
  padding: 1rem;
  max-width: 64rem;
  margin: 0 auto;
}

/* Responsive iframe container */
.iframe-container {
  width: min(1100px, 100%);
  margin: 24px auto;
}
.iframe-container iframe {
  display: block;
  width: 100%;
  height: 600px;
  border: 0;
}
@media (max-width: 480px) {
  .iframe-container iframe {
    height: 500px;
  }
}

/* Tips section */
.page-tips {
  margin-block: var(--page-gap);
  padding-inline-start: var(--tips-indent);
}
.page-tips .tips-list {
  list-style: disc;
  padding-inline-start: calc(var(--tips-indent) + 8px);
  margin: 0;
}
.page-tips .tips-list li {
  margin-block: 6px;
  color: var(--text-color);
}

/* Generic tips styles (if used elsewhere) */
.tips ul {
  line-height: 1.6;
  padding-left: 1.25rem;
}
.tips a {
  color: var(--accent);
  text-decoration: underline;
}

/* Status section — make everything much smaller/compact */
.status {
  font-size: 0.6875rem;;       /* ~11px */
  margin-top: 0.5rem;
}
#status-title {
  font-size: 0.8125rem;     /* ~13px heading */
  margin: 0 0 0.25rem 0;
  color: var(--muted);
}
.status-box {
  padding: 0.25rem 0.375rem;
  border: 1px solid var(--border-weak);
  border-radius: 3px;
  background: var(--box);
  font-size: 0.6875rem;;       /* ~11px text */
  line-height: 1.3;        /* tighter line height */
}

/* Footer */
.page-footer {
  padding: 1rem;
  background: var(--box);
  border-top: 1px solid var(--border-weak);
  text-align: center;
}
.page-footer small { color: var(--muted); }

/* Links and focus visibility */
a { color: var(--accent); }
a:hover { text-decoration: underline; }
:focus-visible {
  outline: 2px dotted var(--accent);
  outline-offset: 2px;
}

/* No-JS warning (always light) */
.nojs-warning {
  padding: 1rem;
  background: #ffeeee;
  color: #222222;
}