/* The look menu: the same on all five Frizzy G sites (Mbao, Stretcher, Earshot, frizzy-g.com, Sir Mucksalot).
   A burger in the top-right corner opens a small panel with the looks (the four, then the
   16-bit themes a site wears: Spooky in October and Christmas from 1 December to 6 January, everywhere;
   One Piece and Harry Potter on Mbao, for Tom and Sam; then Unslop,
   Mbao's own, for anyone). It's a <details>, so
   it opens without any script; each site's script closes it after a pick, a tap outside or Esc.
   Styled here for every look (html[data-look]), so it's identical wherever it is.
   MASTER COPY: Claude Code\lookmenu.css. Edit this one, then run sync-lookmenu.cmd, which copies
   it into each site (and into Earshot's single file).
   Markup:
     <details class="look-menu">
       <summary class="look-burger" aria-label="Look" title="Look"><i></i><i></i><i></i></summary>
       <div class="look-panel">  (Mbao: a <form class="look-panel" ...>)
         <span class="look-panel-label" id="...">Look</span>
         <div class="lm-opts" role="group" aria-labelledby="...">
           <button class="lm-opt lm-night" aria-pressed="true">Night</button> ...Frizzy G, Tom mode, Castle
           (lm-<key> per look: lm-night, lm-frizzy, lm-tom, lm-castle, lm-unslop, lm-onepiece, lm-potter,
           lm-spooky, lm-christmas; the seasonal two carry `hidden` out of season: see the 16-bit themes)
   It sits in a .top-end (the right end of a site's header), or a .top-end.corner pinned to the
   page's top-right corner where there's no header. */

.top-end { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.top-end.corner { position: absolute; z-index: 50; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
.look-menu { position: relative; flex: none; }
/* While it's open, the header it sits in comes to the front: a look may give the header a
   transform (an entrance animation, say), which makes the header its own layer and would keep the
   panel underneath whatever follows it on the page. :where() leaves a look's own position alone */
:where(:has(> .top-end > .look-menu[open])) { position: relative; }
:has(> .top-end > .look-menu[open]) { z-index: 100; }
.joined .look-menu { display: none; } /* Earshot: the look can't change in the middle of a call */

.look-burger {
  display: grid; place-content: center; gap: 4px; box-sizing: border-box; width: 44px; height: 44px; border-radius: 50%;
  list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.look-burger::-webkit-details-marker { display: none; }
.look-burger::marker { content: ""; }
.look-burger i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease; }
.look-menu[open] .look-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.look-menu[open] .look-burger i:nth-child(2) { opacity: 0; }
.look-menu[open] .look-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.look-panel {
  position: absolute; z-index: 60; top: calc(100% + 10px); right: 0; box-sizing: border-box; width: max-content; min-width: 210px;
  margin: 0; padding: 10px; display: grid; gap: 4px; text-align: left;
}
.look-panel-label { display: block; padding: 4px 8px 6px; font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; }
.lm-opts { display: grid; gap: 4px; }
.lm-opt {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; margin: 0; padding: 0 14px 0 12px; border: 0; border-radius: 12px;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1; color: inherit; text-align: left; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lm-opt::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; }
.lm-night::before { background: conic-gradient(from 210deg, #ff4fa3, #8b6cff, #2fe5ef, #ff4fa3); }
.lm-frizzy::before { background: linear-gradient(135deg, #2b322b 0 50%, #55ff00 50% 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
.lm-tom::before { background: conic-gradient(from 20deg, #ff00d4, #ffe600, #00e5ff, #ff00d4); }
.lm-castle::before { background: radial-gradient(circle at 50% 62%, #ffd84a 0 22%, #e0441c 23% 42%, #5d5447 43%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55); }
.lm-onepiece::before { background: radial-gradient(circle, #ffd84a 0 24%, #d8342a 25% 36%, #ffd84a 37% 56%, #1460c4 57%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55); }
.lm-potter::before { background: repeating-linear-gradient(135deg, #7f1416 0 3px, #f5c242 3px 6px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55); }
.lm-spooky::before { background: linear-gradient(#4d7a2a, #4d7a2a) 50% 0 / 3px 4px no-repeat, radial-gradient(circle at 50% 60%, #ffd84a 0 16%, #ff8a1f 17% 50%, #2c1240 51%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55); } /* a pumpkin */
.lm-christmas::before { background: linear-gradient(#ffd24a, #ffd24a) 50% 0 / 4px 3px no-repeat, radial-gradient(circle at 40% 44%, #ffd0d0 0 10%, #e0242a 11% 56%, #1e8a40 57%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55); } /* a bauble on the tree */
.lm-unslop::before { background: radial-gradient(circle, #f2b24c 0 3px, #232325 3.5px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.lm-opt[aria-pressed="true"]::after { /* a tick: this one's on */
  content: ""; flex: none; margin-left: auto; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.6 3.6L13.5 4.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.6 3.6L13.5 4.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.look-burger:focus-visible, .lm-opt:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---- Night: glass, a neon rim, a violet glow ---- */
html[data-look="night"] .look-burger { color: #f6f3ff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .24), 0 10px 26px -14px rgba(0, 0, 0, .9); }
@media (hover: hover) { html[data-look="night"] .look-burger:hover { background: rgba(255, 255, 255, .12); } }
html[data-look="night"] .look-menu[open] .look-burger { background: rgba(255, 79, 163, .2); box-shadow: inset 0 0 0 1px rgba(255, 150, 205, .6), 0 0 20px rgba(255, 79, 163, .35); }
html[data-look="night"] .look-panel {
  color: #f6f3ff; border-radius: 18px;
  background: radial-gradient(90% 70% at 0% 0%, rgba(255, 79, 163, .16), rgba(255, 79, 163, 0) 70%), linear-gradient(180deg, #1e1752, #130e35);
  box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .2), 0 26px 60px -22px rgba(0, 0, 0, .95), 0 0 44px -14px rgba(139, 108, 255, .55);
}
html[data-look="night"] .look-panel-label { color: rgba(222, 214, 255, .72); }
@media (hover: hover) { html[data-look="night"] .lm-opt:hover { background: rgba(255, 255, 255, .07); } }
html[data-look="night"] .lm-opt[aria-pressed="true"] { background: rgba(139, 108, 255, .22); box-shadow: inset 0 0 0 1px rgba(203, 187, 255, .38); }

/* ---- Unslop (Mbao only): Night after a redline review. Neutral surfaces, hairlines, no glow,
   sentence case; the amber is kept for the one thing to press ---- */
html[data-look="unslop"] .look-burger { color: #eef0f5; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background-color .15s ease, box-shadow .15s ease; }
@media (hover: hover) { html[data-look="unslop"] .look-burger:hover, html[data-look="unslop"] .lm-opt:hover { background: rgba(255, 255, 255, .06); } }
html[data-look="unslop"] .look-menu[open] .look-burger { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
html[data-look="unslop"] .look-panel { color: #eef0f5; border-radius: 14px; padding: 6px; background: #1a1e28; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 16px 40px -12px rgba(0, 0, 0, .7); }
html[data-look="unslop"] .look-panel-label { padding: 8px 10px 6px; color: #868ea0; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
html[data-look="unslop"] .lm-opts { gap: 2px; }
html[data-look="unslop"] .lm-opt { gap: 10px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 500; transition: background-color .15s ease; }
html[data-look="unslop"] .lm-opt::before { width: 14px; height: 14px; }
html[data-look="unslop"] .lm-opt[aria-pressed="true"] { background: rgba(255, 255, 255, .08); }
@media (prefers-reduced-motion: reduce) { html[data-look="unslop"] :is(.look-burger, .lm-opt) { transition: none; } }

/* ---- Frizzy G: the brand's stickers (grey #808080, lime #55FF00, black): cut out with a 3px black
   outline and slapped down on a hard black shadow; black text on grey, black on lime ---- */
html[data-look="frizzy"] .look-burger { color: #000; background: #9b9b9b; box-shadow: inset 0 0 0 3px #000, 4px 4px 0 #000; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
@media (hover: hover) { html[data-look="frizzy"] .look-burger:hover { background: #b4b4b4; } }
html[data-look="frizzy"] .look-burger i { height: 3px; }
html[data-look="frizzy"] .look-menu[open] .look-burger { background: #55ff00; transform: translate(2px, 2px); box-shadow: inset 0 0 0 3px #000, 2px 2px 0 #000; }
html[data-look="frizzy"] .look-panel { color: #000; border-radius: 22px; background: #9b9b9b; box-shadow: inset 0 0 0 3px #000, 6px 6px 0 #000; padding: 12px; }
html[data-look="frizzy"] .look-panel-label { color: #000; font-weight: 900; }
html[data-look="frizzy"] .lm-opt { border-radius: 999px; font-weight: 800; }
@media (hover: hover) { html[data-look="frizzy"] .lm-opt:hover { background: #b4b4b4; } }
html[data-look="frizzy"] .lm-opt[aria-pressed="true"] { background: #55ff00; box-shadow: inset 0 0 0 3px #000, 3px 3px 0 #000; font-style: italic; }
html[data-look="frizzy"] .lm-opt::before { box-shadow: 0 0 0 2px #000; }
html[data-look="frizzy"] .lm-pin { border-top: 3px solid #000; }
html[data-look="frizzy"] :is(.lm-pin-input, .pin-input) { color: #000; background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 3px #000; }
html[data-look="frizzy"] :is(.lm-pin-go, .pin-go) { color: #000; border-radius: 999px; background: #55ff00; box-shadow: inset 0 0 0 3px #000, 4px 4px 0 #000; font-style: italic; font-weight: 900; }
html[data-look="frizzy"] :is(.lm-pin-go, .pin-go):active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 3px #000, 2px 2px 0 #000; }
html[data-look="frizzy"] :is(.lm-pin-wrong, .pin-wrong) { color: #000; background: #ff5d6e; border-radius: 999px; padding: 4px 12px; box-shadow: inset 0 0 0 2px #000; }
html[data-look="frizzy"] .pin-card { color: #000; border-radius: 22px; background: #9b9b9b; box-shadow: inset 0 0 0 3px #000, 7px 7px 0 #000; }
html[data-look="frizzy"] .pin-kicker, html[data-look="frizzy"] .pin-label { color: #000; }
html[data-look="frizzy"] .pin-title { color: #55ff00; font-style: italic; font-weight: 900; -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 3px 3px 0 #000; }
@media (prefers-reduced-motion: reduce) { html[data-look="frizzy"] .look-burger { transition: none; } }

/* ---- Tom mode: a Windows 95 button and window, obviously ---- */
html[data-look="tom"] .look-burger {
  border-radius: 0; color: #000; background: #c0c0c0;
  box-shadow: inset -2px -2px 0 #404040, inset 2px 2px 0 #fff, 3px 3px 0 #000;
}
html[data-look="tom"] .look-menu[open] .look-burger { box-shadow: inset 2px 2px 0 #404040, inset -2px -2px 0 #fff, 1px 1px 0 #000; }
html[data-look="tom"] .look-panel {
  padding: 3px 3px 10px; border-radius: 0; color: #000; background: #c0c0c0;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  box-shadow: inset -2px -2px 0 #404040, inset 2px 2px 0 #fff, 5px 5px 0 #000;
}
html[data-look="tom"] .look-panel-label { /* the title bar */
  margin: 0 0 8px; padding: 4px 8px; color: #fff; background: linear-gradient(90deg, #000080, #1084d0);
  font: 700 13px/1.2 Tahoma, "MS Sans Serif", Verdana, sans-serif; letter-spacing: 0; text-transform: none;
}
html[data-look="tom"] .look-panel-label::after { content: ".exe"; content: ".exe" / ""; }
html[data-look="tom"] .lm-opts { gap: 6px; padding: 0 8px; }
html[data-look="tom"] .lm-opt {
  border-radius: 0; color: #000; font: 700 15px/1 "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive; background: #c0c0c0;
  box-shadow: inset -2px -2px 0 #404040, inset 2px 2px 0 #fff;
}
html[data-look="tom"] .lm-opt[aria-pressed="true"] { background: #ffff00; box-shadow: inset 2px 2px 0 #404040, inset -2px -2px 0 #fff; }

/* ---- Castle: a bevelled stone button, and the menu an old fantasy MMO pops up on a right-click
   (black "Choose Option" bar, white pixel letters, yellow for the one that's on). The pixel font
   comes from the Castle look's own stylesheet (the castle kit). ---- */
html[data-look="castle"] .look-burger {
  border-radius: 0; color: #ffcf3f; background: #5d5447; border: 2px solid #000;
  box-shadow: inset 2px 2px 0 #8c7f6a, inset -2px -2px 0 #2b241b, 3px 3px 0 rgba(0, 0, 0, .55);
  transition: none;
}
html[data-look="castle"] .look-burger i { height: 3px; border-radius: 0; box-shadow: 1px 1px 0 #000; }
@media (hover: hover) { html[data-look="castle"] .look-burger:hover { color: #ffff00; } }
html[data-look="castle"] .look-menu[open] .look-burger { color: #ffff00; box-shadow: inset 2px 2px 0 #2b241b, inset -2px -2px 0 #8c7f6a; }
html[data-look="castle"] .look-panel {
  padding: 0 0 6px; border-radius: 0; color: #fff; background: #5d5447; border: 2px solid #000;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .6);
}
html[data-look="castle"] .look-panel-label { /* the black title bar; "Look" stays the menu's name for screen readers */
  margin: 0 0 4px; padding: 7px 10px 5px; color: #5d5447; background: #000;
  font: 0/1 "Castle Pixel", "Lucida Console", monospace; letter-spacing: 0; text-transform: none;
}
html[data-look="castle"] .look-panel-label::after { content: "Choose Option"; content: "Choose Option" / ""; font-size: 20px; }
html[data-look="castle"] .lm-opts { gap: 0; padding: 0 4px; }
html[data-look="castle"] .lm-opt {
  min-height: 44px; border-radius: 0; color: #fff; text-shadow: 2px 2px 0 #000;
  font: 20px/1 "Castle Pixel", "Lucida Console", monospace;
}
@media (hover: hover) { html[data-look="castle"] .lm-opt:hover { color: #ffff00; } }
html[data-look="castle"] .lm-opt[aria-pressed="true"] { color: #ffff00; }
html[data-look="castle"] .lm-opt::before { border-radius: 0; box-shadow: 0 0 0 2px #000; }

/* ---- The 16-bit themes (Claude Code\castle-look\themes): Spooky and Christmas (every site, in season),
   One Piece and Harry Potter (Mbao). Castle's bevelled button and its "Choose Option" menu, each in
   its own colours. The seasonal two are offered only in season (Spooky through October, Christmas
   from 1 December to 6 January: castle-look\fx\sky.js): out of it a site's look script (Mbao: its
   server) gives their buttons the hidden attribute, which needs saying, as .lm-opt sets display. ---- */
.lm-opt[hidden] { display: none; }
/* The shape, shared: */
:is(html[data-look="spooky"], html[data-look="christmas"], html[data-look="onepiece"], html[data-look="potter"]) .look-burger { border-radius: 0; border: 2px solid #000; transition: none; }
:is(html[data-look="spooky"], html[data-look="christmas"], html[data-look="onepiece"], html[data-look="potter"]) .look-burger i { height: 3px; border-radius: 0; box-shadow: 1px 1px 0 #000; }
:is(html[data-look="spooky"], html[data-look="christmas"], html[data-look="onepiece"], html[data-look="potter"]) .look-panel { padding: 0 0 6px; border-radius: 0; border: 2px solid #000; box-shadow: 4px 4px 0 rgba(0, 0, 0, .6); }
:is(html[data-look="spooky"], html[data-look="christmas"], html[data-look="onepiece"], html[data-look="potter"]) .look-panel-label { margin: 0 0 4px; padding: 7px 10px 5px; font: 0/1 "Castle Pixel", "Lucida Console", monospace; letter-spacing: 0; text-transform: none; }
:is(html[data-look="spooky"], html[data-look="christmas"], html[data-look="onepiece"], html[data-look="potter"]) .look-panel-label::after { content: "Choose Option"; content: "Choose Option" / ""; font-size: 20px; }
:is(html[data-look="spooky"], html[data-look="christmas"], html[data-look="onepiece"], html[data-look="potter"]) .lm-opts { gap: 0; padding: 0 4px; }
:is(html[data-look="spooky"], html[data-look="christmas"], html[data-look="onepiece"], html[data-look="potter"]) .lm-opt { min-height: 44px; border-radius: 0; text-shadow: 2px 2px 0 #000; font: 20px/1 "Castle Pixel", "Lucida Console", monospace; }
:is(html[data-look="spooky"], html[data-look="christmas"], html[data-look="onepiece"], html[data-look="potter"]) .lm-opt::before { border-radius: 0; box-shadow: 0 0 0 2px #000; }
/* One Piece: deck planks, treasure-gold letters, "Choose Option" in sand on a night-sea bar */
html[data-look="onepiece"] .look-burger { color: #ffd23f; background: #8a5a2e; box-shadow: inset 2px 2px 0 #c08a4e, inset -2px -2px 0 #3d2410, 3px 3px 0 rgba(0, 0, 0, .5); }
@media (hover: hover) { html[data-look="onepiece"] .look-burger:hover, html[data-look="onepiece"] .lm-opt:hover { color: #ffe14a; } }
html[data-look="onepiece"] .look-menu[open] .look-burger { color: #ffe14a; box-shadow: inset 2px 2px 0 #3d2410, inset -2px -2px 0 #c08a4e; }
html[data-look="onepiece"] .look-panel { color: #fff; background: #8a5a2e; }
html[data-look="onepiece"] .look-panel-label { color: #e8c98a; background: #04112a; }
html[data-look="onepiece"] .lm-opt { color: #fff; }
html[data-look="onepiece"] .lm-opt[aria-pressed="true"] { color: #ffe14a; }
/* Harry Potter: the house colours, scarlet with gold letters, "Choose Option" in gold */
html[data-look="potter"] .look-burger { color: #f5c242; background: #7a1f24; box-shadow: inset 2px 2px 0 #b8434a, inset -2px -2px 0 #3d0c10, 3px 3px 0 rgba(0, 0, 0, .55); }
@media (hover: hover) { html[data-look="potter"] .look-burger:hover, html[data-look="potter"] .lm-opt:hover { color: #ffd75e; } }
html[data-look="potter"] .look-menu[open] .look-burger { color: #ffd75e; box-shadow: inset 2px 2px 0 #3d0c10, inset -2px -2px 0 #b8434a; }
html[data-look="potter"] .look-panel { color: #fffaf0; background: #7a1f24; }
html[data-look="potter"] .look-panel-label { color: #f5c242; background: #2a080b; }
html[data-look="potter"] .lm-opt { color: #fffaf0; }
html[data-look="potter"] .lm-opt[aria-pressed="true"] { color: #ffd75e; }
/* Spooky: crypt stone, pumpkin letters, "Choose Option" in lilac on black */
html[data-look="spooky"] .look-burger { color: #ff9a1f; background: #4a3d5c; box-shadow: inset 2px 2px 0 #7a6a90, inset -2px -2px 0 #1e1529, 3px 3px 0 rgba(0, 0, 0, .55); }
@media (hover: hover) { html[data-look="spooky"] .look-burger:hover, html[data-look="spooky"] .lm-opt:hover { color: #ffcf5a; } }
html[data-look="spooky"] .look-menu[open] .look-burger { color: #ffcf5a; box-shadow: inset 2px 2px 0 #1e1529, inset -2px -2px 0 #7a6a90; }
html[data-look="spooky"] .look-panel { color: #f6f2ff; background: #4a3d5c; }
html[data-look="spooky"] .look-panel-label { color: #9a7ad0; background: #000; }
html[data-look="spooky"] .lm-opt { color: #f6f2ff; }
html[data-look="spooky"] .lm-opt[aria-pressed="true"] { color: #ffcf5a; }
/* Christmas: an iced gingerbread button (white icing piped round its black edge), tinsel-gold
   letters, "Choose Option" in snow white on a pine-green bar */
html[data-look="christmas"] .look-burger { color: #ffd24a; background: #8a4e22; box-shadow: inset 2px 2px 0 #b8783e, inset -2px -2px 0 #40220c, 0 0 0 2px #fff8f0, 4px 4px 0 1px rgba(0, 0, 0, .5); }
@media (hover: hover) { html[data-look="christmas"] .look-burger:hover, html[data-look="christmas"] .lm-opt:hover { color: #ffe066; } }
html[data-look="christmas"] .look-menu[open] .look-burger { color: #ffe066; box-shadow: inset 2px 2px 0 #40220c, inset -2px -2px 0 #b8783e, 0 0 0 2px #fff8f0; }
html[data-look="christmas"] .look-panel { color: #fff; background: #8a4e22; box-shadow: 0 0 0 2px #fff8f0, 4px 4px 0 2px rgba(0, 0, 0, .6); }
html[data-look="christmas"] .look-panel-label { color: #fff8f0; background: #06180f; }
html[data-look="christmas"] .lm-opt { color: #fff; }
html[data-look="christmas"] .lm-opt[aria-pressed="true"] { color: #ffe066; }

/* ==== The PIN (George, 23 Oct 2026: Mbao, Tom mode, Sir Mucksalot and the new things behind a
   PIN). Styled here for every look, in two places:
   1. In the burger. A look that needs the PIN (Tom mode, on a site that isn't itself behind it)
      has data-pin on its button (a padlock) and opens this form when tapped; the site's look
      script checks it and then forgets the form:
        <form class="lm-pin" hidden>
          <label class="lm-pin-label" for="lookPin">PIN for Tom mode</label>
          <span class="lm-pin-row"><input class="lm-pin-input" id="lookPin" type="password" inputmode="numeric"
            maxlength="4" autocomplete="off"><button class="lm-pin-go" type="submit">OK</button></span>
          <span class="lm-pin-wrong" role="alert" hidden>Wrong PIN</span>
        </form>
   2. The page a locked site shows first (pin\gate-worker.js on the static sites, Mbao's own):
        <body class="pin-page"><main class="pin-gate"><form class="pin-card" method="post" action="/pin">
          <p class="pin-kicker">Friends only</p> <h1 class="pin-title">Site name</h1>
          <label class="pin-label" for="pin">PIN</label> <input class="pin-input" id="pin" name="pin" ...>
          <button class="pin-go" type="submit">Let me in</button>
          <p class="pin-wrong" role="alert">Wrong PIN. Have another go.</p> (only after a wrong one)
        </form></main></body>
   ==== */
.lm-opt[data-pin]:not([aria-pressed="true"])::after { /* a padlock: this one needs the PIN */
  content: ""; flex: none; margin-left: auto; width: 13px; height: 13px; background: currentColor; opacity: .8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7.5V5a3.5 3.5 0 0 1 7 0v2.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Crect x='2' y='7' width='12' height='8.5' rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 7.5V5a3.5 3.5 0 0 1 7 0v2.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Crect x='2' y='7' width='12' height='8.5' rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lm-pin { display: grid; gap: 7px; margin: 8px 0 0; padding: 12px 8px 4px; }
.lm-pin[hidden], .lm-pin-wrong[hidden] { display: none; }
.lm-pin-label { font-size: 13px; font-weight: 700; line-height: 1.2; }
.lm-pin-row { display: flex; gap: 8px; }
.lm-pin-input {
  flex: 1; min-width: 0; height: 44px; box-sizing: border-box; margin: 0; padding: 0 12px; border: 0;
  font: 700 20px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .4em; color: inherit;
}
.lm-pin-go { flex: none; min-width: 56px; height: 44px; margin: 0; padding: 0 14px; border: 0; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.lm-pin-wrong { font-size: 13px; font-weight: 700; }

/* (a site's own rules for a bare `main` also reach main.pin-gate: scope those to the site's own main) */
.pin-gate { box-sizing: border-box; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; align-content: center; margin: 0; padding: 24px 16px; }
.pin-card { box-sizing: border-box; width: min(100%, 360px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 28px 22px; text-align: center; }
.pin-kicker { margin: 0; font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; }
.pin-title { margin: 0 0 10px; font-size: 32px; line-height: 1.1; }
.pin-label { font-size: 14px; font-weight: 700; }
.pin-input {
  box-sizing: border-box; width: 100%; min-width: 0; height: 58px; margin: 0; padding: 0 0 0 .5em; border: 0; text-align: center; color: inherit;
  font: 700 28px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .5em;
}
.pin-go { min-height: 50px; margin: 4px 0 0; padding: 0 18px; border: 0; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.pin-wrong { margin: 0; font-weight: 700; }
.lm-pin-input:focus-visible, .lm-pin-go:focus-visible, .pin-input:focus-visible, .pin-go:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Night */
html[data-look="night"] .lm-pin { border-top: 1px solid rgba(214, 200, 255, .2); }
html[data-look="night"] :is(.lm-pin-input, .pin-input) { color: #fff; background: rgba(255, 255, 255, .08); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .32); }
html[data-look="night"] :is(.lm-pin-go, .pin-go) { color: #1a0b22; border-radius: 12px; background: linear-gradient(135deg, #ff4fa3, #ffb547); box-shadow: 0 10px 26px -12px rgba(255, 79, 163, .8); }
html[data-look="night"] :is(.lm-pin-wrong, .pin-wrong) { color: #ff8a96; }
html[data-look="night"] .pin-card {
  color: #f6f3ff; border-radius: 24px;
  background: radial-gradient(90% 70% at 0% 0%, rgba(255, 79, 163, .16), rgba(255, 79, 163, 0) 70%), linear-gradient(180deg, rgba(30, 23, 82, .94), rgba(19, 14, 53, .94));
  box-shadow: inset 0 0 0 1px rgba(214, 200, 255, .22), 0 30px 70px -26px rgba(0, 0, 0, .95), 0 0 50px -16px rgba(139, 108, 255, .6);
}
html[data-look="night"] .pin-kicker, html[data-look="night"] .pin-label { color: rgba(222, 214, 255, .75); }
html[data-look="night"] .pin-title { color: #fff; text-shadow: 0 0 18px rgba(255, 79, 163, .55); }

/* Frizzy G: with its burger above (the stickers) */

/* Unslop: a plain sign-in card, left-aligned, one amber button */
html[data-look="unslop"] .lm-pin { margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, .08); }
html[data-look="unslop"] :is(.lm-pin-label, .pin-label) { color: #a3a9b8; font-weight: 500; }
html[data-look="unslop"] :is(.lm-pin-input, .pin-input) { color: #eef0f5; background: #0b0d14; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); caret-color: #f2b24c; font-weight: 500; }
html[data-look="unslop"] :is(.lm-pin-go, .pin-go) { color: #1c1305; background: #f2b24c; border-radius: 8px; font-weight: 600; transition: background-color .15s ease; }
@media (hover: hover) { html[data-look="unslop"] :is(.lm-pin-go, .pin-go):hover { background: #f7c46e; } }
html[data-look="unslop"] :is(.lm-pin-wrong, .pin-wrong) { color: #f2867f; font-weight: 500; }
html[data-look="unslop"] .pin-card { gap: 8px; padding: 24px; color: #eef0f5; text-align: left; border-radius: 16px; background: #11141c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
html[data-look="unslop"] .pin-kicker { color: #868ea0; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
html[data-look="unslop"] .pin-title { margin-bottom: 12px; color: #eef0f5; font-size: 24px; font-weight: 600; }
html[data-look="unslop"] .pin-input { height: 52px; font-size: 24px; }
html[data-look="unslop"] .pin-go { min-height: 44px; font-size: 15px; }

@media (prefers-reduced-motion: reduce) { html[data-look="unslop"] :is(.lm-pin-go, .pin-go) { transition: none; } }

/* Tom mode: "Enter Network Password", obviously */
html[data-look="tom"] .lm-pin { padding: 8px; }
html[data-look="tom"] .lm-pin-label, html[data-look="tom"] .pin-label { font-family: Tahoma, "MS Sans Serif", Verdana, sans-serif; }
html[data-look="tom"] :is(.lm-pin-input, .pin-input) { color: #000; background: #fff; border-radius: 0; box-shadow: inset 2px 2px 0 #404040, inset -2px -2px 0 #dfdfdf; }
html[data-look="tom"] :is(.lm-pin-go, .pin-go) { color: #000; border-radius: 0; background: #c0c0c0; font-family: Tahoma, "MS Sans Serif", Verdana, sans-serif; box-shadow: inset -2px -2px 0 #404040, inset 2px 2px 0 #fff, 2px 2px 0 #000; }
html[data-look="tom"] :is(.lm-pin-go, .pin-go):active { box-shadow: inset 2px 2px 0 #404040, inset -2px -2px 0 #fff; }
html[data-look="tom"] :is(.lm-pin-wrong, .pin-wrong) { color: #ff0000; font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive; }
html[data-look="tom"] .pin-card { padding: 3px 3px 22px; gap: 12px; color: #000; background: #c0c0c0; box-shadow: inset -2px -2px 0 #404040, inset 2px 2px 0 #fff, 6px 6px 0 #000; }
html[data-look="tom"] .pin-card > :not(.pin-kicker) { margin-left: 18px; margin-right: 18px; }
html[data-look="tom"] .pin-input { width: auto; min-width: 0; } /* stretched by the grid, inside its margins (min-width: a field asks for ~20 characters otherwise) */
html[data-look="tom"] .pin-kicker { /* the title bar */
  padding: 5px 8px; color: #fff; text-align: left; letter-spacing: 0; text-transform: none; background: linear-gradient(90deg, #000080, #1084d0);
  font: 700 13px/1.2 Tahoma, "MS Sans Serif", Verdana, sans-serif;
}
html[data-look="tom"] .pin-kicker::after { content: " - Enter Network Password"; content: " - Enter Network Password" / ""; }
html[data-look="tom"] .pin-title { font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive; color: #ff00d4; text-shadow: 2px 2px 0 #ffe600; }

/* Castle: the login box of an old fantasy MMO ("PIN:" in orange, a sunk well, a stone button) */
html[data-look="castle"] .lm-pin { border-top: 2px solid #000; margin: 6px -4px 0; padding: 10px 8px 4px; }
html[data-look="castle"] :is(.lm-pin-label, .pin-label) { color: #ff981f; font: 20px/1 "Castle Pixel", "Lucida Console", monospace; text-shadow: 2px 2px 0 #000; }
html[data-look="castle"] :is(.lm-pin-input, .pin-input) {
  color: #fff; background: #0d0b08; border-radius: 0; box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #463e33; caret-color: #ffff00;
  font-family: "Castle Pixel", "Lucida Console", monospace; font-weight: 400; text-shadow: 2px 2px 0 #000;
}
html[data-look="castle"] .pin-input { font-size: 30px; }
html[data-look="castle"] :is(.lm-pin-go, .pin-go) {
  color: #ffcf3f; border: 2px solid #000; border-radius: 0; background: #5d5447; text-shadow: 2px 2px 0 #000;
  font: 20px/1 "Castle Pixel", "Lucida Console", monospace; box-shadow: inset 2px 2px 0 #8c7f6a, inset -2px -2px 0 #2b241b;
}
@media (hover: hover) { html[data-look="castle"] :is(.lm-pin-go, .pin-go):hover { color: #ffff00; } }
html[data-look="castle"] :is(.lm-pin-go, .pin-go):active { box-shadow: inset 2px 2px 0 #2b241b, inset -2px -2px 0 #8c7f6a; }
html[data-look="castle"] :is(.lm-pin-wrong, .pin-wrong) { color: #ff3a2a; font: 20px/1.2 "Castle Pixel", "Lucida Console", monospace; text-shadow: 2px 2px 0 #000; }
html[data-look="castle"] .pin-card {
  border: 12px solid transparent; border-image: var(--ck-art-frame) 4 / 12px; background: var(--ck-panel, rgba(18, 14, 10, .92)) padding-box;
  color: #fff; gap: 12px; box-shadow: 4px 4px 0 rgba(0, 0, 0, .55);
}
html[data-look="castle"] .pin-kicker { color: #ff981f; font: 20px/1 "Castle Pixel", "Lucida Console", monospace; letter-spacing: 0; text-transform: none; text-shadow: 2px 2px 0 #000; }
html[data-look="castle"] .pin-title { color: #ffcf3f; font: 40px/1.1 "Castle Pixel", "Lucida Console", monospace; text-shadow: var(--ck-outline, 4px 4px 0 #000); }

/* The 16-bit themes: Castle's login box in each theme's colours (the frame is the theme's own art) */
:is(html[data-look="spooky"], html[data-look="christmas"], html[data-look="onepiece"], html[data-look="potter"]) .lm-pin { border-top: 2px solid #000; margin: 6px -4px 0; padding: 10px 8px 4px; }
:is(html[data-look="spooky"], html[data-look="christmas"], html[data-look="onepiece"], html[data-look="potter"]) :is(.lm-pin-label, .pin-label) { font: 20px/1 "Castle Pixel", "Lucida Console", monospace; text-shadow: 2px 2px 0 #000; }
:is(html[data-look="spooky"], html[data-look="christmas"], html[data-look="onepiece"], html[data-look="potter"]) :is(.lm-pin-input, .pin-input) { border-radius: 0; font-family: "Castle Pixel", "Lucida Console", monospace; font-weight: 400; text-shadow: 2px 2px 0 #000; }
:is(html[data-look="spooky"], html[data-look="christmas"], html[data-look="onepiece"], html[data-look="potter"]) .pin-input { font-size: 30px; }
:is(html[data-look="spooky"], html[data-look="christmas"], html[data-look="onepiece"], html[data-look="potter"]) :is(.lm-pin-go, .pin-go) { border: 2px solid #000; border-radius: 0; text-shadow: 2px 2px 0 #000; font: 20px/1 "Castle Pixel", "Lucida Console", monospace; }
:is(html[data-look="spooky"], html[data-look="christmas"], html[data-look="onepiece"], html[data-look="potter"]) :is(.lm-pin-wrong, .pin-wrong) { font: 20px/1.2 "Castle Pixel", "Lucida Console", monospace; text-shadow: 2px 2px 0 #000; }
:is(html[data-look="spooky"], html[data-look="christmas"], html[data-look="onepiece"], html[data-look="potter"]) .pin-card { border: 12px solid transparent; border-image: var(--ck-art-frame) 4 / 12px; gap: 12px; box-shadow: 4px 4px 0 rgba(0, 0, 0, .55); }
:is(html[data-look="spooky"], html[data-look="christmas"], html[data-look="onepiece"], html[data-look="potter"]) .pin-kicker { font: 20px/1 "Castle Pixel", "Lucida Console", monospace; letter-spacing: 0; text-transform: none; text-shadow: 2px 2px 0 #000; }
:is(html[data-look="spooky"], html[data-look="christmas"], html[data-look="onepiece"], html[data-look="potter"]) .pin-title { font: 40px/1.1 "Castle Pixel", "Lucida Console", monospace; text-shadow: var(--ck-outline, 4px 4px 0 #000); }
html[data-look="onepiece"] :is(.lm-pin-label, .pin-label, .pin-kicker) { color: #ffc06a; }
html[data-look="onepiece"] :is(.lm-pin-input, .pin-input) { color: #fff; background: #04112a; box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #0f2a55; caret-color: #ffe14a; }
html[data-look="onepiece"] :is(.lm-pin-go, .pin-go) { color: #ffd23f; background: #8a5a2e; box-shadow: inset 2px 2px 0 #c08a4e, inset -2px -2px 0 #3d2410; }
html[data-look="onepiece"] :is(.lm-pin-go, .pin-go):active { box-shadow: inset 2px 2px 0 #3d2410, inset -2px -2px 0 #c08a4e; }
html[data-look="onepiece"] :is(.lm-pin-wrong, .pin-wrong) { color: #ff4a3a; }
html[data-look="onepiece"] .pin-card { color: #fff; background: var(--ck-panel, rgba(7, 26, 60, .93)) padding-box; }
html[data-look="onepiece"] .pin-title { color: #ffd23f; }
html[data-look="potter"] :is(.lm-pin-label, .pin-label, .pin-kicker) { color: #f2b45a; }
html[data-look="potter"] :is(.lm-pin-input, .pin-input) { color: #fffaf0; background: #08080e; box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #2c2f3c; caret-color: #ffd75e; }
html[data-look="potter"] :is(.lm-pin-go, .pin-go) { color: #f5c242; background: #7a1f24; box-shadow: inset 2px 2px 0 #b8434a, inset -2px -2px 0 #3d0c10; }
html[data-look="potter"] :is(.lm-pin-go, .pin-go):active { box-shadow: inset 2px 2px 0 #3d0c10, inset -2px -2px 0 #b8434a; }
html[data-look="potter"] :is(.lm-pin-wrong, .pin-wrong) { color: #ff4a3d; }
html[data-look="potter"] .pin-card { color: #fffaf0; background: var(--ck-panel, rgba(12, 12, 22, .92)) padding-box; }
html[data-look="potter"] .pin-title { color: #f5c242; }
html[data-look="spooky"] :is(.lm-pin-label, .pin-label, .pin-kicker) { color: #c49bff; }
html[data-look="spooky"] :is(.lm-pin-input, .pin-input) { color: #f6f2ff; background: #08050e; box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #352a45; caret-color: #ffcf5a; }
html[data-look="spooky"] :is(.lm-pin-go, .pin-go) { color: #ff9a1f; background: #4a3d5c; box-shadow: inset 2px 2px 0 #7a6a90, inset -2px -2px 0 #1e1529; }
html[data-look="spooky"] :is(.lm-pin-go, .pin-go):active { box-shadow: inset 2px 2px 0 #1e1529, inset -2px -2px 0 #7a6a90; }
html[data-look="spooky"] :is(.lm-pin-wrong, .pin-wrong) { color: #ff4d3d; }
html[data-look="spooky"] .pin-card { color: #f6f2ff; background: var(--ck-panel, rgba(14, 8, 22, .92)) padding-box; }
html[data-look="spooky"] .pin-title { color: #ff9a1f; }
/* Christmas: "PIN:" in holly-berry pink, a pine-dark well, a gingerbread button; the card is iced
   gingerbread (the theme's frame) round the pine panel */
html[data-look="christmas"] :is(.lm-pin-label, .pin-label, .pin-kicker) { color: #ff8f8f; }
html[data-look="christmas"] :is(.lm-pin-input, .pin-input) { color: #fff; background: #03120c; box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #16362a; caret-color: #ffe066; }
html[data-look="christmas"] :is(.lm-pin-go, .pin-go) { color: #ffd24a; background: #8a4e22; box-shadow: inset 2px 2px 0 #b8783e, inset -2px -2px 0 #40220c; }
html[data-look="christmas"] :is(.lm-pin-go, .pin-go):active { box-shadow: inset 2px 2px 0 #40220c, inset -2px -2px 0 #b8783e; }
html[data-look="christmas"] :is(.lm-pin-wrong, .pin-wrong) { color: #ff5a5a; }
html[data-look="christmas"] .pin-card { color: #fff; background: var(--ck-panel, rgba(6, 24, 18, .93)) padding-box; }
html[data-look="christmas"] .pin-title { color: #ffd24a; }
@media (hover: hover) {
  html[data-look="onepiece"] :is(.lm-pin-go, .pin-go):hover { color: #ffe14a; }
  html[data-look="potter"] :is(.lm-pin-go, .pin-go):hover { color: #ffd75e; }
  html[data-look="spooky"] :is(.lm-pin-go, .pin-go):hover { color: #ffcf5a; }
  html[data-look="christmas"] :is(.lm-pin-go, .pin-go):hover { color: #ffe066; }
}

@media (prefers-reduced-motion: reduce) { .look-burger, .look-burger i { transition: none; } }
@media (forced-colors: active) {
  .look-burger, .look-panel, .lm-opt { border: 1px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }
  .lm-opt[aria-pressed="true"] { outline: 2px solid Highlight; }
}