From e7ae18c4731d5576747679814befd56eadc2d461 Mon Sep 17 00:00:00 2001
From: Craig Jennings <c@cjennings.net>
Date: Wed, 10 Jun 2026 00:57:22 -0500
Subject: style(theme-studio): lay out family strips as vertical columns

Each family now reads top to bottom (dark to light) as a column, with families arranged left to right, rather than horizontal rows stacked down the panel.
---
 scripts/theme-studio/styles.css        | 5 ++---
 scripts/theme-studio/theme-studio.html | 5 ++---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/scripts/theme-studio/styles.css b/scripts/theme-studio/styles.css
index b1962f5b..2a5a9d85 100644
--- a/scripts/theme-studio/styles.css
+++ b/scripts/theme-studio/styles.css
@@ -23,10 +23,9 @@
  .cat{color:#b4b1a2} .ex{font-size:17px}
  .sbtn{width:26px;height:24px;border:1px solid #3a3a3a;border-radius:3px;background:#eaeaea;color:#111;cursor:pointer;font-size:15px;margin-right:2px;padding:0}
  .sbtn.on{background:#0d0b0a;color:#cdced1;border-color:#8a9496}
- .pals{display:flex;flex-direction:column;gap:8px}
- .fstrip{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:5px;border-radius:7px;border:1px solid transparent}
+ .pals{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;align-items:flex-start}
+ .fstrip{display:flex;flex-direction:column;gap:6px;padding:5px;border-radius:7px;border:1px solid transparent}
  .fstrip.ground{border-color:#252321;background:#161412}
- .fstrip .slabel{font:9pt monospace;color:#6f6a5e;min-width:30px;text-align:right;padding-right:4px}
  .palwarn{display:none;margin-top:8px;font:10pt monospace;color:#cb6b4d}
  .palwarn .pwh{font-weight:bold;margin-bottom:2px}
  .palwarn .pwl{opacity:.92}
diff --git a/scripts/theme-studio/theme-studio.html b/scripts/theme-studio/theme-studio.html
index 55c0a1ea..d0f4d2b0 100644
--- a/scripts/theme-studio/theme-studio.html
+++ b/scripts/theme-studio/theme-studio.html
@@ -25,10 +25,9 @@
  .cat{color:#b4b1a2} .ex{font-size:17px}
  .sbtn{width:26px;height:24px;border:1px solid #3a3a3a;border-radius:3px;background:#eaeaea;color:#111;cursor:pointer;font-size:15px;margin-right:2px;padding:0}
  .sbtn.on{background:#0d0b0a;color:#cdced1;border-color:#8a9496}
- .pals{display:flex;flex-direction:column;gap:8px}
- .fstrip{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:5px;border-radius:7px;border:1px solid transparent}
+ .pals{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;align-items:flex-start}
+ .fstrip{display:flex;flex-direction:column;gap:6px;padding:5px;border-radius:7px;border:1px solid transparent}
  .fstrip.ground{border-color:#252321;background:#161412}
- .fstrip .slabel{font:9pt monospace;color:#6f6a5e;min-width:30px;text-align:right;padding-right:4px}
  .palwarn{display:none;margin-top:8px;font:10pt monospace;color:#cb6b4d}
  .palwarn .pwh{font-weight:bold;margin-bottom:2px}
  .palwarn .pwl{opacity:.92}
-- 
cgit v1.2.3