/* atxbbs palette — single wholetech.com-style midnight theme
 * No picker — palette is baked in site-wide.
 * The font-size toggle (fs-sm/md/lg/xl) is the only preference.
 */

:root, html {
  --bg:        #06080d !important;
  --sf:        #0d1017 !important;
  --s2:        #131820 !important;
  --bd:        #1e2535 !important;
  --tx:        #e4e4e7 !important;
  --dm:        #b2b5c0 !important;
  --mt:        #9aa0b0 !important;

  --green:     #34d399 !important;
  --green-dim: rgba(52,211,153,.10) !important;
  --teal:      #22d3ee !important;
  --teal-dim:  rgba(34,211,238,.08) !important;
  --purple:    #a78bfa !important;
  --purple-dim:rgba(167,139,250,.08) !important;
  --rose:      #f43f5e !important;
  --rose-dim:  rgba(244,63,94,.08) !important;
  --amber:     #fbbf24 !important;
  --amber-dim: rgba(251,191,36,.08) !important;
  --blue:      #60a5fa !important;
  --blue-dim:  rgba(96,165,250,.08) !important;
  --orange:    #fb923c !important;
  --orange-dim:rgba(251,146,60,.08) !important;

  /* legacy aliases so existing spring.css rules keep working */
  --phosphor:  #34d399 !important;
  --red:       #f43f5e !important;
  --cream:     #e4e4e7 !important;
  --text:      #e4e4e7 !important;
  --text-dim:  #8b8d98 !important;
  --gray-400:  #8b8d98 !important;
  --gray-600:  #505468 !important;
}

body {
  background: #06080d !important;
  color:      #e4e4e7 !important;
}
a        { color: #22d3ee !important; }
a:hover  { color: #34d399 !important; text-decoration: underline; }
code, pre {
  background: #131820 !important; color: #e4e4e7 !important;
  border-color: #1e2535 !important;
}

/* ===== FONT SIZE (the only toggle) ===== */
html.fs-sm { font-size: 13px !important; }
html.fs-md { font-size: 15.5px !important; }
html.fs-lg { font-size: 18px !important; }
html.fs-xl { font-size: 22px !important; }
html.fs-lg body, html.fs-xl body { line-height: 1.75 !important; }
html.fs-xl body { letter-spacing: 0.01em; }


/* ===== FLOATING FONT-SIZE WIDGET ===== */
#theme-toggle-btn {
  position: fixed; bottom: 18px; right: 18px; z-index: 9998;
  background: #0d1017; color: #34d399;
  border: 1px solid #1e2535;
  border-radius: 22px; height: 40px; padding: 0 16px;
  cursor: pointer; font-size: 13px; font-weight: 600; letter-spacing: 1px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  text-transform: uppercase;
}
#theme-toggle-btn:before { content: 'Aa'; font-size: 15px; font-family:'JetBrains Mono',monospace; }
#theme-toggle-btn:after  { content: 'Size'; }
#theme-toggle-btn:hover  { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.55); }

#theme-toggle-panel {
  position: fixed; bottom: 116px; right: 18px; z-index: 9999;
  background: #0d1017; color: #e4e4e7;
  border: 1px solid #1e2535;
  border-radius: 10px; padding: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  min-width: 220px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  font-size: 13px !important; line-height: 1.5 !important;
}
#theme-toggle-panel[hidden] { display: none; }
#theme-toggle-panel h4 {
  margin: 0 0 8px; font-size: 10px !important; letter-spacing: 2px;
  text-transform: uppercase; color: #505468; font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}
#theme-toggle-panel .row { display: flex; gap: 6px; }
#theme-toggle-panel button {
  flex: 1; padding: 10px 4px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600; color: #8b8d98;
  border: 1px solid #1e2535; background: transparent;
  border-radius: 6px; cursor: pointer; transition: all .15s;
}
#theme-toggle-panel button:hover { color: #e4e4e7; border-color: #34d399; }
#theme-toggle-panel button.active {
  background: rgba(52,211,153,.10); color: #34d399; border-color: #34d399;
}

@media (max-width: 640px) {
  #theme-toggle-btn { bottom: 12px; right: 12px; height: 40px; padding: 0 14px; }
  #theme-toggle-panel { right: 12px; bottom: 110px; min-width: 200px; }
}


/* ===== MOBILE RESPONSIVE POLISH (preserved) ===== */
@media (max-width: 720px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl-wrap { max-height: 60vh; }
  .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 { 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; }
  #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; }
  .hc { flex-direction: column !important; align-items: stretch !important; }
  .hc .btn { width: 100% !important; text-align: center !important; }
  .conf-grid, .cg, .rg { grid-template-columns: 1fr !important; }
  .hero { padding: 16px 16px 32px !important; }
  .hero-inner { max-width: 100% !important; }
  h1 { font-size: clamp(1.3rem, 5vw, 1.9rem) !important; }
  .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; }
  button, .btn, a.btn, input[type=submit] { min-height: 40px; padding: 8px 14px !important; }
  body { line-height: 1.7 !important; }
  .small, .sub, .meta { font-size: .82rem !important; }
  pre, code { white-space: pre-wrap !important; word-break: break-word !important; }
  .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; }
}


/* ===== wholetech.com-style theme picker ===== */
/* Default: no class — uses the baked-in wholetech midnight palette above.
   .wt-midnight: deeper black variant.
   .wt-warm:     cream paper, dark nav. */

html.wt-midnight body { background: #02030a !important; }
html.wt-midnight .screen { background: #05060d !important; }
html.wt-midnight .nav    { background: rgba(2,3,10,.95) !important; }

/* WARM — Moleskine cafe: vintage paper + walnut nav + burnt-orange accents */
html.wt-warm {
  --bg: #efe4cb !important;          /* warm vintage paper (deeper than pale cream) */
  --sf: #e4d5b3 !important;          /* card surface */
  --s2: #d8c59a !important;          /* elevated surface */
  --bd: #b8a27a !important;          /* subtle brown border */
  --tx: #221610 !important;          /* rich espresso */
  --dm: #3d2d17 !important;
  --mt: #3a2d17 !important;

  --green:     #5c7a2e !important;   /* olive accent */
  --green-dim: rgba(92,122,46,.10) !important;
  --teal:      #0f6b7d !important;
  --teal-dim:  rgba(15,107,125,.08) !important;
  --amber:     #b8590b !important;   /* burnt orange — primary accent */
  --amber-dim: rgba(184,89,11,.10) !important;
  --rose:      #a41f35 !important;
  --rose-dim:  rgba(164,31,53,.08) !important;
  --purple:    #6b3a72 !important;
  --purple-dim:rgba(107,58,114,.08) !important;

  --phosphor:  #5c7a2e !important;
  --red:       #a41f35 !important;
  --cream:     #221610 !important;
  --text:      #221610 !important;
  --text-dim:  #5b4529 !important;
}
html.wt-warm body {
  background: #efe4cb !important; color: #221610 !important;
  background-image: radial-gradient(ellipse at 15% 10%, rgba(184,89,11,.04), transparent 55%),
                    radial-gradient(ellipse at 85% 90%, rgba(92,122,46,.04), transparent 50%);
}

/* Terminal chrome: walnut with gold accent */
html.wt-warm .terminal  { box-shadow: 0 6px 32px rgba(43,24,12,.18); border-radius: 10px; }
html.wt-warm .titlebar  { background: linear-gradient(180deg,#3a2417,#2b1911) !important; border-radius: 10px 10px 0 0; }
html.wt-warm .titlebar span { color: #e4d5b3 !important; }

/* Screen: pale reading surface, restful */
html.wt-warm .screen {
  background: #f7ecd2 !important; color: #221610 !important;
  border-color: #b8a27a !important;
  border-radius: 0 0 10px 10px;
}

/* Nav: walnut with cream text, amber hover */
html.wt-warm .nav {
  background: #2b1911 !important; color: #e4d5b3 !important;
  border-bottom: 1px solid #4a2f1f !important;
  padding: 10px 16px !important;
  border-radius: 0 !important;
}
html.wt-warm .nav a        { color: #e4d5b3 !important; }
html.wt-warm .nav a:hover  { color: #f5c26b !important; }
html.wt-warm .nav .admin   { color: #ef8154 !important; }
html.wt-warm .nav .ruser   { color: #f5c26b !important; }
html.wt-warm .nav .signup  { color: #f5c26b !important; border-color: #f5c26b !important; }
html.wt-warm .nav .lo button { color: #e4d5b3 !important; border-color: #876d4a !important; }
html.wt-warm .nav .lo button:hover { color: #f5c26b !important; border-color: #f5c26b !important; }

html.wt-warm .footer { background: transparent !important; color: #876d4a !important; border-top: 1px dashed #b8a27a; margin-top: 20px; padding-top: 14px; }
html.wt-warm .footer .mt { color: #876d4a !important; }

/* Links + prose */
html.wt-warm a           { color: #b8590b !important; }
html.wt-warm a:hover     { color: #8a4208 !important; text-decoration: underline; }
html.wt-warm .heading    { color: #221610 !important; border-bottom-color: #b8a27a !important; }
html.wt-warm .crumb a    { color: #b8590b !important; }
html.wt-warm .prose      { color: #221610 !important; }
html.wt-warm .sub,
html.wt-warm .small,
html.wt-warm .meta       { color: #5b4529 !important; }

/* Posts: card-like on paper */
html.wt-warm .post {
  background: #fef4dc !important;
  border: 1px solid #b8a27a !important;
  box-shadow: 0 1px 3px rgba(43,24,12,.06);
}
html.wt-warm .post-head {
  background: #e4d5b3 !important;
  border-bottom: 1px dashed #b8a27a !important;
  color: #221610 !important;
}
html.wt-warm .post-user     { color: #b8590b !important; }
html.wt-warm .post-user:hover{ color: #8a4208 !important; }
html.wt-warm .post-time,
html.wt-warm .post-num      { color: #876d4a !important; }
html.wt-warm .post-body     { color: #221610 !important; }
html.wt-warm .post-body a   { color: #b8590b !important; }
html.wt-warm .post-body a:hover { color: #8a4208 !important; }
html.wt-warm .post-body h1,
html.wt-warm .post-body h2,
html.wt-warm .post-body h3 { color: #2b1911 !important; }
html.wt-warm .post-body blockquote { border-left-color: #b8590b !important; color: #5b4529 !important; }
html.wt-warm .post-body pre  { background: #e4d5b3 !important; border-left: 3px solid #b8590b !important; color: #221610 !important; }

/* Code */
html.wt-warm code, html.wt-warm pre {
  background: #e4d5b3 !important; color: #221610 !important;
  border-color: #b8a27a !important;
}

/* Forms */
html.wt-warm .form input,
html.wt-warm .form textarea {
  background: #fef4dc !important; color: #221610 !important;
  border: 1px solid #b8a27a !important;
}
html.wt-warm .form input:focus,
html.wt-warm .form textarea:focus { border-color: #b8590b !important; box-shadow: 0 0 0 3px rgba(184,89,11,.15); }
html.wt-warm .form button {
  background: #b8590b !important; border: 1px solid #8a4208 !important; color: #fef4dc !important;
}
html.wt-warm .form button:hover { background: #8a4208 !important; }
html.wt-warm .form label span { color: #5b4529 !important; }

/* Thread list and conferences */
html.wt-warm .threadlist a { color: #221610 !important; }
html.wt-warm .threadlist a:hover { color: #b8590b !important; }
html.wt-warm .threadlist .meta { color: #876d4a !important; }
html.wt-warm .conf .desc { color: #5b4529 !important; }

/* Flashes */
html.wt-warm .flash.ok  { background: rgba(92,122,46,.12) !important; border-color: #5c7a2e !important; color: #3d5414 !important; }
html.wt-warm .flash.err { background: rgba(164,31,53,.10) !important; border-color: #a41f35 !important; color: #7c1527 !important; }

/* Stats / numbers */
html.wt-warm .stat .n { color: #b8590b !important; }
html.wt-warm .stat .l { color: #876d4a !important; }

/* Tables */
html.wt-warm table th { background: #e4d5b3 !important; color: #221610 !important; }
html.wt-warm table td { border-color: #b8a27a !important; }

/* Theme button in nav */
html.wt-warm html.wt-warm

html.wt-midnight html.wt-warm html.wt-warm @media (max-width: 640px) {
  }


/* ===== EMBER — burnt-orange theme (4th option) =====
   Deep charcoal bg, warm orange primary, amber highlights.
   Think: blacksmith's forge at dusk. */
html.wt-ember {
  --bg: #14100c !important;          /* warm charcoal */
  --sf: #1e1813 !important;
  --s2: #2a2118 !important;
  --bd: #3d2f22 !important;
  --tx: #f4e4d0 !important;          /* cream */
  --dm: #d7b894 !important;
  --mt: #c2a58c !important;

  --green:     #7ab83b !important;
  --green-dim: rgba(122,184,59,.10) !important;
  --teal:      #2fb8a0 !important;
  --teal-dim:  rgba(47,184,160,.08) !important;
  --amber:     #ff8c42 !important;   /* burnt orange — primary */
  --amber-dim: rgba(255,140,66,.12) !important;
  --rose:      #e8536c !important;
  --rose-dim:  rgba(232,83,108,.10) !important;
  --purple:    #c084fc !important;
  --purple-dim:rgba(192,132,252,.08) !important;

  --phosphor:  #ff8c42 !important;
  --red:       #e8536c !important;
  --cream:     #f4e4d0 !important;
  --text:      #f4e4d0 !important;
  --text-dim:  #b89878 !important;
}
html.wt-ember body {
  background: #14100c !important; color: #f4e4d0 !important;
  background-image: radial-gradient(ellipse at 20% 10%, rgba(255,140,66,.08), transparent 60%),
                    radial-gradient(ellipse at 80% 90%, rgba(232,83,108,.05), transparent 55%);
}
html.wt-ember .terminal { box-shadow: 0 6px 40px rgba(255,140,66,.08); }
html.wt-ember .titlebar { background: linear-gradient(180deg,#2a2118,#1e1813) !important; }
html.wt-ember .titlebar span { color: #f4e4d0 !important; }
html.wt-ember .screen   { background: #1a1510 !important; color: #f4e4d0 !important; border-color: #3d2f22 !important; }
html.wt-ember .nav      { background: transparent !important; border-bottom: 1px dashed #3d2f22 !important; }
html.wt-ember .nav a    { color: #f4e4d0 !important; }
html.wt-ember .nav a:hover { color: #ff8c42 !important; }
html.wt-ember .nav .ruser  { color: #ff8c42 !important; }
html.wt-ember .nav .signup { color: #ff8c42 !important; border-color: #ff8c42 !important; }
html.wt-ember .nav .admin  { color: #e8536c !important; }
html.wt-ember .nav .lo button { color: #f4e4d0 !important; border-color: #8a6f55 !important; }
html.wt-ember .nav .lo button:hover { color: #ff8c42 !important; border-color: #ff8c42 !important; }
html.wt-ember a         { color: #ff8c42 !important; }
html.wt-ember a:hover   { color: #ffb47a !important; text-decoration: underline; }
html.wt-ember .heading  { color: #ff8c42 !important; border-bottom-color: #3d2f22 !important; }
html.wt-ember .crumb a  { color: #ff8c42 !important; }
html.wt-ember .post     { background: #1a1510 !important; border-color: #3d2f22 !important; }
html.wt-ember .post-head{ background: #221a13 !important; border-bottom-color: #3d2f22 !important; }
html.wt-ember .post-user{ color: #ff8c42 !important; }
html.wt-ember .post-time, html.wt-ember .post-num { color: #8a6f55 !important; }
html.wt-ember .post-body { color: #f4e4d0 !important; }
html.wt-ember .post-body a { color: #ff8c42 !important; }
html.wt-ember .post-body a:hover { color: #ffb47a !important; }
html.wt-ember .post-body h1, html.wt-ember .post-body h2, html.wt-ember .post-body h3 { color: #ff8c42 !important; }
html.wt-ember .post-body blockquote { border-left-color: #ff8c42 !important; color: #b89878 !important; }
html.wt-ember .post-body pre { background: #0d0a07 !important; border-left: 3px solid #ff8c42 !important; color: #f4e4d0 !important; }
html.wt-ember code, html.wt-ember pre { background: #0d0a07 !important; color: #f4e4d0 !important; border-color: #3d2f22 !important; }
html.wt-ember .form input, html.wt-ember .form textarea { background: #0d0a07 !important; color: #f4e4d0 !important; border-color: #3d2f22 !important; }
html.wt-ember .form input:focus, html.wt-ember .form textarea:focus { border-color: #ff8c42 !important; box-shadow: 0 0 0 3px rgba(255,140,66,.2) !important; }
html.wt-ember .form button { background: #ff8c42 !important; color: #14100c !important; border: 1px solid #ff8c42 !important; }
html.wt-ember .form button:hover { background: #ffb47a !important; }
html.wt-ember .stat .n { color: #ff8c42 !important; }


/* ===== Floating Theme button (stacked ABOVE the Aa SIZE pill) ===== */
/* Aa SIZE sits at bottom:18px right:18px — Theme sits at bottom:66px right:18px */
button#wt-tb {
  position: fixed !important;
  left: auto !important;
  right: 18px !important;
  bottom: 66px !important;
  top: auto !important;
  z-index: 9998 !important;
  width: auto !important;
  height: 40px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  background: #22d3ee !important;
  color: #05060d !important;
  border: 2px solid #34d399 !important;
  border-radius: 22px !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 0 0 3px rgba(34,211,233,.25), 0 4px 18px rgba(0,0,0,.5) !important;
  transition: transform .15s, box-shadow .15s !important;
}
button#wt-tb:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 0 0 3px rgba(34,211,233,.4), 0 6px 22px rgba(0,0,0,.6) !important;
}
html.wt-midnight button#wt-tb { background: #22d3ee !important; color: #000 !important; }
html.wt-warm button#wt-tb     { background: #b8590b !important; color: #fef4dc !important; border-color: #f5c26b !important; box-shadow: 0 0 0 3px rgba(245,194,107,.35), 0 4px 18px rgba(0,0,0,.3) !important; }
html.wt-ember button#wt-tb    { background: #ff8c42 !important; color: #14100c !important; border-color: #ffb47a !important; box-shadow: 0 0 0 3px rgba(255,140,66,.4), 0 4px 18px rgba(0,0,0,.5) !important; }

@media (max-width: 640px) {
  button#wt-tb { right: 12px !important; bottom: 60px !important; height: 38px !important; padding: 0 14px !important; font-size: 12px !important; }
}


/* ===== AI agent badges on post-user links =====
   Pure CSS — no template changes needed. Works because post-user is an <a>
   with href ending in /u/<handle>. */

.post-user[href$="/u/sage"]::after,
.post-user[href$="/u/sage/"]::after {
  content: "AI Sage";
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(167,139,250,.18);
  color: #c4b5fd;
  border: 1px solid rgba(167,139,250,.35);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
  font-family: 'JetBrains Mono','Source Code Pro',monospace;
}

.post-user[href$="/u/sysop"]::after,
.post-user[href$="/u/sysop/"]::after {
  content: "auto-announcer";
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(96,165,250,.15);
  color: #93c5fd;
  border: 1px solid rgba(96,165,250,.30);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
  font-family: 'JetBrains Mono','Source Code Pro',monospace;
}

/* Warm/Ember/Paper theme adjustments */
html.wt-warm .post-user[href$="/u/sage"]::after  { background: rgba(139,69,19,.15); color: #8b4513; border-color: rgba(139,69,19,.35); }
html.wt-warm .post-user[href$="/u/sysop"]::after { background: rgba(92,122,46,.15); color: #5c7a2e; border-color: rgba(92,122,46,.35); }
html.wt-ember .post-user[href$="/u/sage"]::after { background: rgba(192,132,252,.18); color: #c084fc; border-color: rgba(192,132,252,.35); }