From b5b0d9b306e180ba0cb813cceb17504b798fd295 Mon Sep 17 00:00:00 2001
From: Joshua Laymon <joshlaymon@icloud.com>
Date: Sat, 6 Sep 2025 18:38:07 +0000
Subject: [PATCH] Update web/static/themes/win95.css

---
 web/static/themes/win95.css | 329 +++++++++++++++++-------------------
 1 file changed, 151 insertions(+), 178 deletions(-)

diff --git a/web/static/themes/win95.css b/web/static/themes/win95.css
index 828651d..0d92213 100644
--- a/web/static/themes/win95.css
+++ b/web/static/themes/win95.css
@@ -1,141 +1,89 @@
 /* ===============================
    Windows 95 — Nostalgia Mode
    =============================== */
-/* Palette + notes:
-   - 3D light:  #FFFFFF
-   - Face:      #C0C0C0
-   - Dark face: #A0A0A0
-   - Shadow:    #808080
-   - Dark:      #000000
-   - Title Bar: #000080
-   - Text:      #000000
+/* Palette:
+   3D light  #FFFFFF
+   Face      #C0C0C0
+   Shadow    #808080
+   Dark      #000000
+   TitleBar  #000080
 */
+html[data-theme="win95"] :root{
+  --win95-face:    #C0C0C0;
+  --win95-face-dk: #B3B3B3;   /* a touch darker for emphasis (username) */
+  --win95-light:   #FFFFFF;
+  --win95-shadow:  #808080;
+  --win95-dark:    #000000;
+  --win95-blue:    #000080;
 
-html[data-theme="win95"] {
-  --w95-face:   #C0C0C0;
-  --w95-face-dark: #A0A0A0;
-  --w95-light:  #FFFFFF;
-  --w95-shadow: #808080;
-  --w95-dark:   #000000;
-  --w95-blue:   #000080;
+  /* keep the top-nav controls consistent everywhere */
+  --win95-nav-h: 36px;
+  --win95-nav-pad-x: 16px;
+  --win95-font: "Tahoma","MS Sans Serif",system-ui,Segoe UI,Arial,sans-serif;
 }
 
+/* Base */
 html[data-theme="win95"] body{
   background:#00808010; /* faint teal tint */
   color:#000;
   min-height:100vh;
-  font-family: "Tahoma","MS Sans Serif",system-ui,Segoe UI,Arial,sans-serif;
+  font-family:var(--win95-font);
 }
 
 /* Selection */
 html[data-theme="win95"] ::selection{
-  background:var(--w95-blue);
+  background:var(--win95-blue);
   color:#fff;
 }
 
-/* ---------- Top bar ---------- */
+/* ---------- Top bar (Title Bar) ---------- */
 html[data-theme="win95"] .topbar-wrap{
-  background:var(--w95-blue);
-  border-bottom:2px solid var(--w95-dark);
+  background:var(--win95-blue);
+  border-bottom:2px solid var(--win95-dark);
   box-shadow:none;
-  position: sticky;
-  top: 0;
-  z-index: 1000;
+  position:sticky; top:0; z-index:1000;
 }
 html[data-theme="win95"] .brand-title,
 html[data-theme="win95"] .brand .tagline,
 html[data-theme="win95"] .version-link{
-  color:#fff !important;
-  text-decoration:none;
-}
-html[data-theme="win95"] .version-link:hover{
-  text-decoration:underline;
+  color:#fff !important; text-decoration:none;
 }
+html[data-theme="win95"] .version-link:hover{ text-decoration:underline; }
 
-/* ---------- Nav Buttons (Find/Create/Insights) ---------- */
-html[data-theme="win95"] .topbar .nav-btn{
-  background:var(--w95-face) !important;
-  color:#000 !important;
-  border:2px solid var(--w95-face) !important;
-  border-top-color:var(--w95-light) !important;
-  border-left-color:var(--w95-light) !important;
-  border-right-color:var(--w95-shadow) !important;
-  border-bottom-color:var(--w95-shadow) !important;
-  border-radius:0 !important;
-  display:inline-flex !important;
-  align-items:center !important;
-  justify-content:center !important;
-  padding:6px 14px !important; /* consistent size */
-  font-size:15px !important;
-  line-height:1 !important;
-  box-shadow: inset -1px -1px 0 var(--w95-dark) !important;
-}
-html[data-theme="win95"] .topbar .nav-btn:active{
-  border-top-color:var(--w95-shadow) !important;
-  border-left-color:var(--w95-shadow) !important;
-  border-right-color:var(--w95-light) !important;
-  border-bottom-color:var(--w95-light) !important;
-  box-shadow: inset 1px 1px 0 var(--w95-dark) !important;
-}
-
-/* ---------- Username Chip ---------- */
-html[data-theme="win95"] .topbar .user-chip{
-  background:var(--w95-face-dark) !important;
-  color:#000 !important;
-  border:2px solid var(--w95-face-dark) !important;
-  border-top-color:var(--w95-light) !important;
-  border-left-color:var(--w95-light) !important;
-  border-right-color:var(--w95-shadow) !important;
-  border-bottom-color:var(--w95-shadow) !important;
-  border-radius:0 !important;
-  display:inline-flex !important;
-  align-items:center !important;
-  justify-content:center !important;
-  padding:6px 14px !important;
-  font-size:15px !important;
-  box-shadow: inset -1px -1px 0 var(--w95-dark) !important;
-}
-
-/* ---------- 3D Windows (cards/panels) ---------- */
+/* ---------- 3D Windows (cards/panels/menus) ---------- */
 html[data-theme="win95"] .card,
 html[data-theme="win95"] .result-card,
 html[data-theme="win95"] .search-form,
 html[data-theme="win95"] .form-card,
 html[data-theme="win95"] .mobile-menu-inner,
 html[data-theme="win95"] .user-menu{
-  background:var(--w95-face);
+  background:var(--win95-face);
   color:#000;
-  border: 2px solid var(--w95-face);
-  border-top-color: var(--w95-light);
-  border-left-color: var(--w95-light);
-  border-right-color: var(--w95-shadow);
-  border-bottom-color: var(--w95-shadow);
-  border-radius: 0;
-  box-shadow: 1px 1px 0 var(--w95-dark) inset;
+  border:2px solid var(--win95-face);
+  border-top-color:var(--win95-light);
+  border-left-color:var(--win95-light);
+  border-right-color:var(--win95-shadow);
+  border-bottom-color:var(--win95-shadow);
+  border-radius:0;
+  box-shadow:1px 1px 0 var(--win95-dark) inset;
 }
 
-/* Section headers */
+/* Section headings & muted text */
 html[data-theme="win95"] .cc-panel-head,
 html[data-theme="win95"] .page-title,
-html[data-theme="win95"] .cc-panel-title{
-  color:#000;
-}
+html[data-theme="win95"] .cc-panel-title{ color:#000; }
 html[data-theme="win95"] .cc-kicker,
 html[data-theme="win95"] .muted,
 html[data-theme="win95"] .page-subtitle,
 html[data-theme="win95"] .meta-label,
-html[data-theme="win95"] .section-label{
-  color:#000;
-  opacity:.75;
-}
+html[data-theme="win95"] .section-label{ color:#000; opacity:.75; }
 
 /* Tables */
 html[data-theme="win95"] table{ border-collapse:collapse; }
 html[data-theme="win95"] th,
 html[data-theme="win95"] td{
-  border:1px solid var(--w95-shadow);
-  background:#DFDFDF;
-  color:#000;
+  border:1px solid var(--win95-shadow);
+  background:#DFDFDF; color:#000;
 }
 
 /* ---------- Inputs ---------- */
@@ -144,80 +92,115 @@ html[data-theme="win95"] .form-control,
 html[data-theme="win95"] .login-input,
 html[data-theme="win95"] .tool-input,
 html[data-theme="win95"] textarea{
-  background:#fff;
-  color:#000;
-  border:2px solid var(--w95-face);
-  border-top-color:var(--w95-light);
-  border-left-color:var(--w95-light);
-  border-right-color:var(--w95-shadow);
-  border-bottom-color:var(--w95-shadow);
-  border-radius:0;
-  box-shadow:none;
+  background:#fff; color:#000;
+  border:2px solid var(--win95-face);
+  border-top-color:var(--win95-light);
+  border-left-color:var(--win95-light);
+  border-right-color:var(--win95-shadow);
+  border-bottom-color:var(--win95-shadow);
+  border-radius:0; box-shadow:none;
 }
 html[data-theme="win95"] .search-input:focus,
 html[data-theme="win95"] .form-control:focus,
 html[data-theme="win95"] .login-input:focus,
 html[data-theme="win95"] .tool-input:focus{
-  outline: 1px dotted #000;
+  outline:1px dotted #000; outline-offset:0;
 }
 
-/* ---------- Pills & Chips ---------- */
+/* Check pills / chips */
 html[data-theme="win95"] .check-pill,
 html[data-theme="win95"] .chip,
 html[data-theme="win95"] .chip-link,
 html[data-theme="win95"] .chip-muted{
-  background:var(--w95-face);
-  color:#000;
-  border:1px solid var(--w95-shadow);
+  background:var(--win95-face); color:#000;
+  border:1px solid var(--win95-shadow);
   border-radius:0;
 }
 
-/* ---------- Buttons ---------- */
+/* ---------- Buttons (3D) ---------- */
 html[data-theme="win95"] .btn{
-  background:var(--w95-face);
-  color:#000;
-  border:2px solid var(--w95-face);
-  border-top-color:var(--w95-light);
-  border-left-color:var(--w95-light);
-  border-right-color:var(--w95-shadow);
-  border-bottom-color:var(--w95-shadow);
+  appearance:none; background:var(--win95-face); color:#000;
+  border:2px solid var(--win95-face);
+  border-top-color:var(--win95-light);
+  border-left-color:var(--win95-light);
+  border-right-color:var(--win95-shadow);
+  border-bottom-color:var(--win95-shadow);
   border-radius:0;
   padding:6px 12px;
-  box-shadow: inset -1px -1px 0 var(--w95-dark);
+  box-shadow: inset -1px -1px 0 var(--win95-dark);
   cursor: default;
 }
+html[data-theme="win95"] .btn:hover{ filter:brightness(1.02); }
 html[data-theme="win95"] .btn:active{
-  border-top-color:var(--w95-shadow);
-  border-left-color:var(--w95-shadow);
-  border-right-color:var(--w95-light);
-  border-bottom-color:var(--w95-light);
-  box-shadow: inset 1px 1px 0 var(--w95-dark);
+  border-top-color:var(--win95-shadow);
+  border-left-color:var(--win95-shadow);
+  border-right-color:var(--win95-light);
+  border-bottom-color:var(--win95-light);
+  box-shadow: inset 1px 1px 0 var(--win95-dark);
 }
+html[data-theme="win95"] .btn-primary{ background:var(--win95-face); color:#000; }
+html[data-theme="win95"] .btn-primary:focus{ outline:1px dotted #000; }
 html[data-theme="win95"] .btn-danger{ color:#8B0000; }
 
+/* ---------- Top-nav controls (Find/Create/Insights + Username) ---------- */
+/* Shared box-model to guarantee SAME HEIGHT */
+html[data-theme="win95"] .nav-btn,
+html[data-theme="win95"] .user-chip{
+  display:inline-flex; align-items:center; justify-content:center;
+  font-size:18px; line-height:1;
+  height:var(--win95-nav-h);
+  padding:0 var(--win95-nav-pad-x);
+  box-sizing:border-box;
+
+  background:var(--win95-face) !important; color:#000 !important;
+  border:2px solid var(--win95-face) !important;
+  border-top-color:var(--win95-light) !important;
+  border-left-color:var(--win95-light) !important;
+  border-right-color:var(--win95-shadow) !important;
+  border-bottom-color:var(--win95-shadow) !important;
+  border-radius:0 !important;
+  text-decoration:none;
+}
+html[data-theme="win95"] .nav-btn:active,
+html[data-theme="win95"] .user-chip:active{
+  border-top-color:var(--win95-shadow) !important;
+  border-left-color:var(--win95-shadow) !important;
+  border-right-color:var(--win95-light) !important;
+  border-bottom-color:var(--win95-light) !important;
+}
+/* Username: slightly darker face to set it apart */
+html[data-theme="win95"] .user-chip{
+  background:var(--win95-face-dk) !important;
+}
+
 /* ---------- Menus ---------- */
+html[data-theme="win95"] .user-menu,
+html[data-theme="win95"] .mobile-menu-inner{ background:var(--win95-face); }
 html[data-theme="win95"] .user-menu .menu-item,
 html[data-theme="win95"] .mobile-link{
-  color:#000;
-  border-radius:0;
+  color:#000; background:transparent; border-radius:0;
 }
 html[data-theme="win95"] .user-menu .menu-item:hover,
 html[data-theme="win95"] .mobile-link:hover{
-  background:var(--w95-blue);
-  color:#fff;
+  background:var(--win95-blue); color:#fff;
 }
 
 /* ---------- Messages ---------- */
 html[data-theme="win95"] .msg{
-  background:#DFDFDF;
-  color:#000;
-  border:2px solid var(--w95-face);
-  border-top-color:var(--w95-light);
-  border-left-color:var(--w95-light);
-  border-right-color:var(--w95-shadow);
-  border-bottom-color:var(--w95-shadow);
+  background:#DFDFDF; color:#000;
+  border:2px solid var(--win95-face);
+  border-top-color:var(--win95-light);
+  border-left-color:var(--win95-light);
+  border-right-color:var(--win95-shadow);
+  border-bottom-color:var(--win95-shadow);
   border-radius:0;
 }
+html[data-theme="win95"] .msg.info    { border-left-color:#0000AA; }
+html[data-theme="win95"] .msg.success { border-left-color:#007A00; }
+html[data-theme="win95"] .msg.warning { border-left-color:#A06A00; }
+html[data-theme="win95"] .msg.error   { border-left-color:#8B0000; }
+
+/* Toned variants to match Win95 feel */
 html[data-theme="win95"] .msg.info    { background:#eaf2ff; border-color:#8aaad6; color:#003366; }
 html[data-theme="win95"] .msg.success { background:#e8f5e8; border-color:#6aa86a; color:#104010; }
 html[data-theme="win95"] .msg.warning { background:#fff7e0; border-color:#d4b96a; color:#5a4100; }
@@ -225,70 +208,60 @@ html[data-theme="win95"] .msg.error   { background:#fff0f0; border-color:#cc6666
 
 /* ---------- Links ---------- */
 html[data-theme="win95"] a{ color:#0000EE; }
-html[data-theme="win95"] a:hover{ color:#551A8B; text-decoration: underline; }
+html[data-theme="win95"] a:hover{ color:#551A8B; text-decoration:underline; }
 
-/* ---------- Command Center ---------- */
+/* ---------- Command Center accents ---------- */
 html[data-theme="win95"] .settings-console .sec-tile{
-  background:var(--w95-face);
-  color:#000;
-  border:2px solid var(--w95-face);
-  border-top-color:var(--w95-light);
-  border-left-color:var(--w95-light);
-  border-right-color:var(--w95-shadow);
-  border-bottom-color:var(--w95-shadow);
+  background:var(--win95-face); color:#000;
+  border:2px solid var(--win95-face);
+  border-top-color:var(--win95-light);
+  border-left-color:var(--win95-light);
+  border-right-color:var(--win95-shadow);
+  border-bottom-color:var(--win95-shadow);
   border-radius:0;
 }
-html[data-theme="win95"] .settings-console .sec-tile:hover{
-  background:#DFDFDF;
-}
+html[data-theme="win95"] .settings-console .sec-tile:hover{ background:#DFDFDF; }
 html[data-theme="win95"] .settings-console .sec-icon{
-  background:#DFDFDF;
-  color:#000;
-  border:1px solid var(--w95-shadow);
-  border-right-color:#fff;
-  border-bottom-color:#fff;
-  border-radius:0;
-}
-html[data-theme="win95"] .settings-console .swatch{
+  background:#DFDFDF; color:#000;
+  border:1px solid var(--win95-shadow);
+  border-right-color:var(--win95-light);
+  border-bottom-color:var(--win95-light);
   border-radius:0;
 }
+/* Swatch tile keeps squared corners in this theme */
+html[data-theme="win95"] .settings-console .swatch{ border-radius:0; }
 
-/* ---------- Highlights & Validation ---------- */
-html[data-theme="win95"] .mark-hit {
-  background: #ffff88;
-  color: #000;
-  padding: 0 2px;
-  border: 1px solid #c0c0c0;
+/* ---------- Highlights & validators ---------- */
+/* Search term highlight */
+html[data-theme="win95"] .mark-hit{
+  background:#ffff88; color:#000; padding:0 2px;
+  border:1px solid #c0c0c0;
 }
+/* Valid/invalid inputs (scripture/source) */
 html[data-theme="win95"] .form-control.scripture-valid,
-html[data-theme="win95"] .search-input.scripture-valid {
-  border: 2px inset #008000;
-  background: #e8f5e8;
+html[data-theme="win95"] .search-input.scripture-valid{
+  border:2px inset #008000; background:#e8f5e8;
 }
 html[data-theme="win95"] .form-control.scripture-invalid,
-html[data-theme="win95"] .search-input.scripture-invalid {
-  border: 2px inset #a00000;
-  background: #fff0f0;
+html[data-theme="win95"] .search-input.scripture-invalid{
+  border:2px inset #a00000; background:#fff0f0;
 }
-html[data-theme="win95"] .scripture-pill-invalid {
-  background: #ffeaea;
-  border: 2px outset #cc6666;
-  color: #7a1d1d;
+/* Invalid “pills” */
+html[data-theme="win95"] .scripture-pill-invalid{
+  background:#ffeaea; border:2px outset #cc6666; color:#7a1d1d;
 }
-html[data-theme="win95"] .scripture-pill-wol {
-  background: #e8f4ff;
-  border: 2px outset #8aaad6;
-  color: #003366;
+/* WOL-valid “pills” */
+html[data-theme="win95"] .scripture-pill-wol{
+  background:#e8f4ff; border:2px outset #8aaad6; color:#003366; text-decoration:none;
 }
 html[data-theme="win95"] a.chip:hover,
-html[data-theme="win95"] .chip-link:hover {
-  filter: brightness(0.96);
-  outline: 1px dotted #000;
-  outline-offset: 1px;
+html[data-theme="win95"] .chip-link:hover{
+  filter:brightness(.96);
+  outline:1px dotted #000; outline-offset:1px;
 }
 
 /* ---------- Misc ---------- */
 html[data-theme="win95"] .topbar-wrap.is-scrolled{
-  box-shadow:none;
-  border-bottom-color:#000;
-}
\ No newline at end of file
+  box-shadow:none; border-bottom-color:var(--win95-dark);
+}
+/* Win95 doesn’t use Classic’s .themed-bg */
\ No newline at end of file