Sheet: light/dark switch, slimmer lobby header, remove wide view

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HJhXuLD2Z6hv3Wqeq9UL9K

frontend/src/PaperSheet.jsx

@@ -12,6 +12,7 @@ export function printSheet(root, title) {
   if (!win) { window.alert('Please allow pop-ups for this site to print the sheet.'); return }
   const clone = root.cloneNode(true)
   clone.style.zoom = ''
+  clone.classList.remove('dark') // printed pages are always light
   const head = [...document.querySelectorAll('link[rel=stylesheet], style')].map((n) => n.outerHTML).join('')
   win.document.open()
   win.document.write(`<!doctype html><html><head><meta charset="utf-8"><title>${(title || 'Character').replace(/[<>&]/g, '')}</title>${head}
@@ -27,7 +28,7 @@ export function printSheet(root, title) {
 }
 
 // Scales the A4 pages down when the space is narrower than the paper
-function Fit({ children, rootRef }) {
+function Fit({ children, rootRef, dark }) {
   const wrap = useRef(null)
   const [z, setZ] = useState(1)
   useLayoutEffect(() => {
@@ -37,7 +38,7 @@ function Fit({ children, rootRef }) {
     ro.observe(wrap.current)
     return () => ro.disconnect()
   }, [])
-  return <div ref={wrap} className="paperfit"><div ref={rootRef} className="papers" style={{ zoom: z }}>{children}</div></div>
+  return <div ref={wrap} className="paperfit"><div ref={rootRef} className={`papers${dark ? ' dark' : ''}`} style={{ zoom: z }}>{children}</div></div>
 }
 
 const Pips = ({ n, locked }) => (
@@ -53,6 +54,8 @@ export default function PaperSheet({ data, baseRules, tools }) {
   const c = useMemo(() => compute(ch, rules), [ch, rules])
   const x = { ch, rules, c }
   const root = useRef(null)
+  const [dark, setDark] = useState(() => { try { return localStorage.getItem('aw_sheettheme') === 'dark' } catch { return false } })
+  const pickTheme = (d) => { setDark(d); try { localStorage.setItem('aw_sheettheme', d ? 'dark' : 'light') } catch { /* storage may be blocked */ } }
 
   const prof = rules.professions.find((p) => p.id === ch.profession)
   const cls = rules.classes.find((k) => k.id === ch.class_id)
@@ -72,9 +75,15 @@ export default function PaperSheet({ data, baseRules, tools }) {
     <div className="papersheet">
       <div className="papertools">
         {tools}
-        <button className="ghost" onClick={() => printSheet(root.current, name)}>Print / save as PDF (A4)</button>
+        <span className="toolright">
+          <span className="seg" role="group" aria-label="Sheet colours">
+            <button className={dark ? 'ghost' : 'on'} onClick={() => pickTheme(false)} title="Light sheet">Light</button>
+            <button className={dark ? 'on' : 'ghost'} onClick={() => pickTheme(true)} title="Dark sheet (prints light)">Dark</button>
+          </span>
+          <button className="ghost" onClick={() => printSheet(root.current, name)} title="Opens the pages for printing, choose Save as PDF there">Print / PDF (A4)</button>
+        </span>
       </div>
-      <Fit rootRef={root}>
+      <Fit rootRef={root} dark={dark}>
         <section className="paper">
           <header className="phead">
             <div className="pname">{name}</div>