/* Struinova site theme. Dark is the base look defined in each page; this file adds the light look
   and the toggle button. Loaded by every page with theme.js. */
.theme-toggle{flex:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:rgba(148,180,210,.08);color:var(--text);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:border-color .2s,color .2s,background .2s}
.theme-toggle:hover{border-color:var(--orange);color:var(--orange)}
.theme-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.theme-toggle svg{width:19px;height:19px}
.theme-toggle .i-moon{display:none}
:root[data-theme="light"] .theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-moon{display:inline}
.theme-toggle.floating{position:fixed;top:14px;right:14px;z-index:60}

:root[data-theme="light"]{
  color-scheme:light;
  --ink:#f7f4ee; --text:#17222d; --muted:#4f6174;
  --line:rgba(44,62,80,.16);
  --panel:rgba(255,255,255,.74); --panel-hi:rgba(255,255,255,.94);
  --orange:#b4540d; --burnt:#8f3f08;
}
:root[data-theme="light"] body{background:var(--ink);color:var(--text)}
:root[data-theme="light"] .bg{background:
  radial-gradient(900px 650px at 85% -10%, rgba(248,153,29,.16), transparent 60%),
  radial-gradient(800px 600px at -10% 55%, rgba(127,168,255,.16), transparent 65%),
  radial-gradient(600px 500px at 70% 105%, rgba(248,153,29,.10), transparent 60%),
  linear-gradient(165deg,#fbf9f5 0%,#f3eee6 55%,#f8f5ef 100%)}
:root[data-theme="light"] canvas#net{opacity:.5;filter:invert(1) hue-rotate(180deg) saturate(1.2)}
:root[data-theme="light"] .panel{background:linear-gradient(150deg,#ffffff,rgba(255,255,255,.82));
  box-shadow:0 14px 40px rgba(44,62,80,.11), inset 0 1px 0 #fff;backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-theme="light"] .console::before{background:rgba(44,62,80,.06)}
:root[data-theme="light"] nav,:root[data-theme="light"] .logo-chip,:root[data-theme="light"] nav.open .navlinks{background:#fff;box-shadow:0 12px 34px rgba(44,62,80,.14)}
:root[data-theme="light"] .logo-chip{border-color:var(--line)}
:root[data-theme="light"] .biglogo{filter:drop-shadow(0 0 10px rgba(248,153,29,.35))}
:root[data-theme="light"] nav a{color:var(--muted)}
:root[data-theme="light"] nav a:hover,:root[data-theme="light"] nav a.here{color:var(--orange)}
:root[data-theme="light"] .menu-btn{background:rgba(44,62,80,.05)}
:root[data-theme="light"] h1 em,:root[data-theme="light"] h2 em{background:linear-gradient(100deg,#b4540d,#e98a12);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"] .btn{color:#1a1206;border-color:rgba(180,84,13,.45)}
:root[data-theme="light"] .btn.ghost{background:rgba(255,255,255,.7);color:var(--text);border-color:var(--line)}
:root[data-theme="light"] .btn.ghost:hover{border-color:var(--orange);color:var(--orange)}
:root[data-theme="light"] .steplabel span{color:var(--text);text-shadow:none}
:root[data-theme="light"] .stepnum{color:#fff}
:root[data-theme="light"] .sticky{background:linear-gradient(150deg,#fffaf0,#fdf0d5);color:#4a3517;box-shadow:0 8px 20px rgba(44,62,80,.14)}
:root[data-theme="light"] .sticky.custom{background:rgba(44,62,80,.04)}
:root[data-theme="light"] .sticky.custom textarea{color:#7a4a10}
:root[data-theme="light"] .sticky.custom textarea::placeholder{color:rgba(44,62,80,.4)}
:root[data-theme="light"] .disc{color:rgba(79,97,116,.7);background:rgba(44,62,80,.04)}
:root[data-theme="light"] .disc.on{color:#7a4a10;background:rgba(248,153,29,.14)}
:root[data-theme="light"] .workline,:root[data-theme="light"] .incard,:root[data-theme="light"] .chip-run{color:#4a3517}
:root[data-theme="light"] .incard{background:linear-gradient(150deg,#fffaf0,#fdf0d5);box-shadow:0 6px 14px rgba(44,62,80,.12)}
:root[data-theme="light"] .chip-run{background:#fffaf0;box-shadow:0 6px 18px rgba(44,62,80,.2)}
:root[data-theme="light"] .workmodal{background:rgba(247,244,238,.7)}
:root[data-theme="light"] .ron-ava{color:#fff}
:root[data-theme="light"] .msg.ron .bubble{background:rgba(44,62,80,.05)}
:root[data-theme="light"] .msg.you .bubble{background:linear-gradient(135deg,rgba(248,153,29,.28),rgba(248,153,29,.14))}
:root[data-theme="light"] .scrollcue{color:#fff}
:root[data-theme="light"] .cred,:root[data-theme="light"] .chip,:root[data-theme="light"] .freeline input,:root[data-theme="light"] .form-card input,:root[data-theme="light"] .form-card textarea{background:rgba(255,255,255,.7)}
:root[data-theme="light"] .mm-link{stroke:rgba(44,62,80,.28)}
:root[data-theme="light"] .mm-link.hot{stroke:rgba(180,84,13,.7)}
:root[data-theme="light"] svg text{fill:var(--text)}
:root[data-theme="light"] svg text[fill="#f8991d"],:root[data-theme="light"] svg text[fill="#F8991D"]{fill:var(--orange)}
:root[data-theme="light"] ::selection{background:rgba(248,153,29,.35)}

/* keep a longer nav on one line with the toggle inside the pill */
:root nav .navlinks{gap:16px}
:root nav a{font-size:.8rem}
:root nav .brand{white-space:nowrap}
@media(max-width:1180px){:root nav .brand{display:none}}
@media(max-width:1100px){:root nav .brand{display:inline}}
:root[data-theme="light"] nav.panel{background:#fff}