/* Verdant light mode for every page on the shared template (product page excepted: it has its own). Same look as the product page: a pale page, white cards, dark header and footer bars, Midnight's greens a step darker for text on white. Everything is scoped to html.msl, which /assets/site-theme.js sets before first paint; without it the page is exactly as it was. */ html.msl{--lg:#16a32a;--lgt:#138a24;--lbg:#f3f6f3;--lcard:#ffffff;--lline:#dbe3dc;--lh:#0b1220;--lt:#3d4a5c;--lm:#64748b;color-scheme:light} html.msl body{background:var(--lbg);color:var(--lt)} /* bars stay dark, as in the app */ html.msl body>nav{background:linear-gradient(180deg,#141c14 0%,#0d130d 100%);border-bottom-color:#1f2a1f} html.msl .navmenu,html.msl .moremenu{background:linear-gradient(180deg,#141c14,#0d130d);border-color:#223022} /* the footer's colour runs to the window's edges and bottom, so a short page never ends on a pale band; a shadow (no layout, no extra scroll) clipped so it never paints above the footer */ html.msl footer{background:#111811;border-top-color:#111811;color:#8a9a8a;margin-top:56px;box-shadow:0 0 0 100vmax #111811;clip-path:inset(0 -100vmax -100vmax -100vmax)} html.msl footer a{color:#b5c2b5} /* type */ html.msl h1{color:var(--lh)} html.msl h1::after{background:var(--lg)} html.msl h2{color:var(--lh);border-top-color:var(--lline)} html.msl h3,html.msl h4{color:#1e293b} html.msl strong,html.msl b{color:var(--lh)} html.msl main,html.msl main p,html.msl main li{color:var(--lt)} html.msl main a:not([class]),html.msl main a.lnk{color:#1d63c9} html.msl main p a:not([class]),html.msl main li a:not([class]),html.msl main td a:not([class]){text-decoration-color:rgba(29,99,201,.4)} html.msl .crumb,html.msl .crumb a{color:#64748b} html.msl code{background:#eef2ee;border-color:var(--lline);color:#137a22} html.msl pre{background:#f6f8f6;border-color:var(--lline);color:#1e293b} html.msl hr{border-color:var(--lline);background:var(--lline)} html.msl ::placeholder{color:#94a3b8} /* surfaces */ html.msl .callout,html.msl .gcard,html.msl .sform,html.msl details,html.msl .card,html.msl .tile,html.msl .box,html.msl .panel{background:var(--lcard);border-color:var(--lline);box-shadow:0 1px 2px rgba(15,23,42,.05),0 8px 22px -14px rgba(15,23,42,.18)} html.msl .callout{border-left-color:var(--lg)} html.msl .callout.warn{border-left-color:#d99a0b} html.msl .gcard b{color:var(--lh)} html.msl .gcard span{color:var(--lt)} html.msl .gcard em{color:#475569} html.msl .gcard svg{color:var(--lg)} html.msl main img{border-color:var(--lline)} html.msl th,html.msl td{border-color:var(--lline)} html.msl th{background:#eef2ee;color:var(--lh)} /* forms */ html.msl input,html.msl select,html.msl textarea{background:#fff;border-color:#cfd8d1;color:var(--lh)} html.msl .sform label{color:#475569} html.msl .sform .fnote,html.msl .support-fallback{color:#64748b} html.msl .sform button[type=submit]{color:#fff} /* glows were drawn for a dark ground */ html.msl main *{text-shadow:none!important} /* the visitor's sun / moon switch (test O5, arm a), on the dark nav in both themes */ .msthm{display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin:0 10px 0 auto;border:1px solid #2b3a55;border-radius:50%;background:transparent;color:#94a3b8;cursor:pointer;flex-shrink:0;transition:color .2s ease,border-color .2s ease} .msthm+.navburger{margin-left:0} .msthm:hover{color:#e2e8f0;border-color:#62D230} @media (max-width:640px){.msthm{width:26px;height:26px;margin-right:8px}} /* ---- per page ---- */ /* guides: video cards keep a dark picture well, the frame is a card; the Ask box is a white panel */ html.msl .gvid{background:var(--lcard);border-color:var(--lline);box-shadow:0 1px 2px rgba(15,23,42,.05),0 8px 22px -14px rgba(15,23,42,.18)} html.msl .gvid p,html.msl .gvid span:not(.gvplay):not(.gvlatest){color:var(--lt)} html.msl .gsoon{color:var(--lt)} html.msl .askbox,html.msl .askcard{background:var(--lcard);border-color:var(--lline);border-left-color:var(--lg);box-shadow:0 1px 2px rgba(15,23,42,.05),0 8px 22px -14px rgba(15,23,42,.18)} html.msl .askrow input,html.msl #haskin{background:#fff;border-color:#cfd8d1;color:var(--lh)} html.msl .askchips button{background:#f3f6f3;border-color:var(--lline);color:#334155} html.msl .askchips button:hover{border-color:var(--lg);color:var(--lh)} html.msl .askwhat,html.msl .askfoot,html.msl .askfoot span,html.msl .askcard-note{color:var(--lt)} html.msl .askfoot a{color:#475569} html.msl .askpre,html.msl .askfoot i{color:var(--lgt)} html.msl .askout,html.msl .askans{background:#f6f8f6;border-color:var(--lline);color:var(--lt)} /* download: white platform cards; the outline buttons become the app's dark glass, the lit one stays */ html.msl .osc{background:var(--lcard);border-color:var(--lline);box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 26px -14px rgba(15,23,42,.2)} html.msl .osc.here,html.msl .dlgrid.one .osc.on{background:var(--lcard);border-color:rgba(22,163,42,.6);box-shadow:0 0 0 1px rgba(22,163,42,.18),0 10px 26px -14px rgba(15,23,42,.2)} html.msl .osc h3{color:var(--lh)} html.msl .osc .req,html.msl .osc .what,html.msl .osc .alts,html.msl .osc .alts .manual{color:var(--lt)} html.msl .osc .what b{color:var(--lgt)} html.msl .osc .alts a{color:#1d63c9} html.msl .osc .get{background:#0a0e18;border-color:#0a0e18;color:#3be04d} html.msl .osc .get:hover{background:#111827;border-color:#111827;color:#5ef06d} html.msl .osc.here .get,html.msl .dlgrid.one .osc.on .get{background:#22c534;border-color:#22c534;color:#fff} html.msl .osc.here .get:hover{background:#2fd442;color:#fff} html.msl .tag{background:#111811} html.msl .ostab{color:#475569;border-color:var(--lline);background:#fff} html.msl .ostab.on{color:#fff;background:#22c534;border-color:#22c534} html.msl .ospick{background:#fff;border-color:var(--lline)} html.msl .ospick button{color:#475569} html.msl .ospick button:hover{color:var(--lh)} html.msl .ospick button.on{background:#22c534;color:#fff} html.msl .ospick button.mine.on::after{background:#fff} html.msl .altsd{border-top-color:var(--lline)} html.msl .altsd summary{color:#475569} /* in-page