/* atxbbs theme + font size system
 * Redefines the same CSS variables the site already uses (--bg, --tx, --sf, etc.)
 * so every existing page inherits the new theme without touching its own styles.
 */

/* ===== DEFAULT (phosphor CRT) ===== */
html:not(.theme-light):not(.theme-sepia):not(.theme-contrast) {
  /* uses each page's own :root definitions — no override */
}

/* ===== LIGHT (black on white) ===== */
html.theme-light {
  --bg: #f0f8ea !important;
  --sf: #e5eed6 !important;
  --s2: #dbe5c7 !important;
  --bd: #b8c79e !important;
  --tx: #1a1a1a !important;
  --dm: #555 !important;
  --mt: #777 !important;
  --green: #0a7d2d !important;
  --phosphor: #0a7d2d !important;
  --amber: #8a5a00 !important;
  --red: #aa1c30 !important;
  --purple: #6b21a8 !important;
  --cream: #1a1a1a !important;
  --gray-400: #555 !important;
  --gray-600: #777 !important;
  --text: #1a1a1a !important;
  --text-dim: #555 !important;
  --green-dim: rgba(10,125,45,.1) !important;
  background: #f0f8ea !important;
  color: #1a1a1a !important;
}
html.theme-light body { background: #f0f8ea !important; color: #1a1a1a !important; }
html.theme-light a { color: #0a7d2d !important; }
html.theme-light a:hover { color: #8a5a00 !important; }
html.theme-light code, html.theme-light pre {
  background: #dbe5c7 !important; color: #1a1a1a !important;
}

/* ===== SEPIA (warm low-contrast, easy on eyes) ===== */
html.theme-sepia {
  --bg: #f4ecd8 !important;
  --sf: #ece0c8 !important;
  --s2: #e0d3ba !important;
  --bd: #c4b38a !important;
  --tx: #3d2e1a !important;
  --dm: #6d5633 !important;
  --mt: #8a7355 !important;
  --green: #5a6a1a !important;
  --phosphor: #5a6a1a !important;
  --amber: #8a4a00 !important;
  --purple: #5c2f5c !important;
  --cream: #3d2e1a !important;
  --text: #3d2e1a !important;
  --text-dim: #6d5633 !important;
  --green-dim: rgba(90,106,26,.1) !important;
  background: #f4ecd8 !important;
  color: #3d2e1a !important;
}
html.theme-sepia body { background: #f4ecd8 !important; color: #3d2e1a !important; }
html.theme-sepia a { color: #7a4020 !important; }
html.theme-sepia a:hover { color: #aa5030 !important; }

/* ===== HIGH CONTRAST (bright white on pure black for low vision) ===== */
html.theme-contrast {
  --bg: #000000 !important;
  --sf: #0a0a0a !important;
  --s2: #141414 !important;
  --bd: #555 !important;
  --tx: #ffffff !important;
  --dm: #ccc !important;
  --mt: #aaa !important;
  --green: #00ff00 !important;
  --phosphor: #00ff00 !important;
  --amber: #ffe000 !important;
  --red: #ff4040 !important;
  --purple: #d070ff !important;
  --cream: #ffffff !important;
  --text: #ffffff !important;
  --text-dim: #ddd !important;
  --green-dim: rgba(0,255,0,.2) !important;
  background: #000 !important;
  color: #fff !important;
}
html.theme-contrast body { background: #000 !important; color: #fff !important; }
html.theme-contrast a { color: #00ff00 !important; }
html.theme-contrast a:hover { color: #ffe000 !important; }

/* ===== FONT SIZE (applied to html element) ===== */
html.fs-sm { font-size: 13px !important; }
html.fs-md { font-size: 15.5px !important; }   /* default, subtly bigger than 15 */
html.fs-lg { font-size: 18px !important; }
html.fs-xl { font-size: 22px !important; }

/* Boost readability: more line-height + slightly heavier body weight */
html.fs-lg body, html.fs-xl body { line-height: 1.75 !important; }
html.fs-xl body { letter-spacing: 0.01em; }

/* ===== FLOATING TOGGLE WIDGET ===== */
#theme-toggle-btn {
  position: fixed; bottom: 14px; right: 14px; z-index: 9998;
  background: rgba(0,0,0,.85); color: #fff; border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%; width: 42px; height: 42px;
  cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Courier New', monospace;
  transition: transform .15s, background .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
#theme-toggle-btn:hover { transform: scale(1.08); background: rgba(20,20,20,.95); }
html.theme-light #theme-toggle-btn { background: rgba(255,255,255,.9); color: #1a1a1a; border-color: #888; }
html.theme-sepia #theme-toggle-btn { background: rgba(244,236,216,.9); color: #3d2e1a; border-color: #8a7355; }

#theme-toggle-panel {
  position: fixed; bottom: 64px; right: 14px; z-index: 9999;
  background: rgba(15,15,12,.95); color: #fff; border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px; padding: 14px; font-family: 'Courier New', monospace;
  min-width: 220px; box-shadow: 0 4px 16px rgba(0,0,0,.5);
  font-size: 13px !important;  /* widget itself doesn't scale with fs-* */
  line-height: 1.5 !important;
}
#theme-toggle-panel[hidden] { display: none; }
html.theme-light #theme-toggle-panel { background: rgba(255,255,255,.98); color: #1a1a1a; border-color: #888; }
html.theme-sepia #theme-toggle-panel { background: rgba(244,236,216,.98); color: #3d2e1a; border-color: #8a7355; }

#theme-toggle-panel h4 { margin: 0 0 8px; font-size: 11px !important; letter-spacing: 1.5px; text-transform: uppercase; opacity: .7; font-weight: normal; }
#theme-toggle-panel .row { display: flex; gap: 6px; margin-bottom: 12px; }
#theme-toggle-panel .row:last-child { margin-bottom: 0; }
#theme-toggle-panel button {
  flex: 1; padding: 6px 4px; font-family: 'Courier New', monospace; font-size: 12px !important;
  border: 1px solid currentColor; background: transparent; color: inherit;
  border-radius: 4px; cursor: pointer; opacity: .65; transition: opacity .15s;
}
#theme-toggle-panel button:hover { opacity: 1; }
#theme-toggle-panel button.active { opacity: 1; background: currentColor; color: #000; border-color: transparent; font-weight: bold; }
html.theme-light #theme-toggle-panel button.active { background: #1a1a1a; color: #fff; }
html.theme-sepia #theme-toggle-panel button.active { background: #3d2e1a; color: #f4ecd8; }

/* Color swatches for theme buttons */
#tt-phosphor { background: linear-gradient(135deg, #0d1108 50%, #33ff33 50%) !important; }
#tt-light    { background: linear-gradient(135deg, #fff 50%, #1a1a1a 50%) !important; color: transparent !important; }
#tt-sepia    { background: linear-gradient(135deg, #f4ecd8 50%, #5a6a1a 50%) !important; color: transparent !important; }
#tt-contrast { background: linear-gradient(135deg, #000 50%, #00ff00 50%) !important; color: transparent !important; }
#theme-toggle-panel button[id^="tt-"]:hover { opacity: 1; transform: scale(1.05); }
#theme-toggle-panel button[id^="tt-"].active { border: 3px solid #fbbf24 !important; opacity: 1; }

@media (max-width: 640px) {
  #theme-toggle-btn { bottom: 10px; right: 10px; width: 38px; height: 38px; font-size: 16px; }
  #theme-toggle-panel { right: 10px; bottom: 56px; min-width: 200px; }
}


/* ===== MOBILE RESPONSIVE POLISH (#4) ===== */
/* Applies everywhere theme-toggle.css is loaded (3,900+ pages) */

@media (max-width: 720px) {
  /* Tables: allow horizontal scroll with visual hint */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl-wrap { max-height: 60vh; }

  /* Thread post heads: stack vertically */
  .post-head {
    display: flex !important; flex-direction: column !important; align-items: flex-start !important;
    gap: 3px !important; padding-bottom: 6px !important;
  }
  .post-head .post-time, .post-head .post-num { font-size: .78rem !important; }

  /* yapp-nav (archive thread): wrap buttons */
  .yapp-nav { flex-wrap: wrap !important; gap: 4px !important; }
  .yapp-nav .nb { font-size: .82rem !important; padding: 5px 8px !important; flex: 1 1 auto; min-width: 90px; }

  /* Homepage top-login bar: fully stacked */
  #top-login > div { flex-direction: column !important; gap: 8px !important; }
  #top-login form { flex-direction: column !important; align-items: stretch !important; }
  #top-login input[type=text], #top-login input[type=password],
  #top-login input[name=username], #top-login input[name=password] {
    width: 100% !important; min-width: 0 !important;
  }
  #top-login button { width: 100% !important; }

  /* Hero CTAs: single column */
  .hc { flex-direction: column !important; align-items: stretch !important; }
  .hc .btn { width: 100% !important; text-align: center !important; }

  /* Conference/cards grids: single column */
  .conf-grid, .cg, .rg { grid-template-columns: 1fr !important; }

  /* Hero content: tighten padding */
  .hero { padding: 16px 16px 32px !important; }
  .hero-inner { max-width: 100% !important; }
  h1 { font-size: clamp(1.3rem, 5vw, 1.9rem) !important; }

  /* Nav links: compact wrap */
  .nav, .nav-links { flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; }
  .nav-links a { font-size: .78rem !important; padding: 3px 6px !important; }

  /* Mobile tap targets: 44×44 minimum */
  #theme-toggle-btn { width: 48px !important; height: 48px !important; font-size: 18px !important; }
  button, .btn, a.btn, input[type=submit] { min-height: 40px; padding: 8px 14px !important; }

  /* Readability: bump line-height */
  body { line-height: 1.7 !important; }
  .small, .sub, .meta { font-size: .82rem !important; }

  /* Wrap long URLs/code */
  pre, code { white-space: pre-wrap !important; word-break: break-word !important; }

  /* Crumb trails */
  .crumb { flex-wrap: wrap; word-break: break-word; }
}

@media (max-width: 480px) {
  body { font-size: 15px; }
  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.2rem !important; }
  .wrap, .w, .container { padding-left: 14px !important; padding-right: 14px !important; }
  #theme-toggle-panel { right: 8px !important; left: 8px !important; min-width: 0; width: auto !important; }
}