/* lantern.css — the theme control, drawn as an object instead of an icon.
 *
 * Wireframe turn 25 replaced the round ☾ button: it was "the only circle in a
 * row of rectangles" (25a), and an icon that swaps glyph carries its state in
 * a symbol you have to read. A lantern carries it in the object — unlit is
 * day, lit is night — so the state survives being glanced at.
 *
 * 25f settled the mount after three tries: a lantern hanging from nothing
 * "reads as a glyph, not an object", so it hangs from a gate post, and the ⛩
 * on the language chip beside it has already put a gate in the reader's head.
 * The geometry below is that frame's, to the pixel.
 *
 * The art is 36×34 inside a 40×40 button: the box is the touch target #138
 * bought, and shrinking it to the artwork would re-open that bug. Colours are
 * --play-* only (decision 0008); the lit body is the one ember point on a
 * night page, which is why its glow is a color-mix of the accent rather than
 * a second warm colour.
 */
.top-right-panel .lantern{
  position:relative;flex:none;width:40px;height:40px;padding:0;
  border:0;background:none;color:inherit;cursor:pointer;
}
.top-right-panel .lantern > span{position:absolute;background:var(--play-ink)}

/* The post and its bracket. The frame's 36×34 art sits +2/+3 inside the
   40×40 target, and every offset below carries that shift. */
.top-right-panel .lantern .lantern-post{left:4px;top:3px;width:4px;height:34px}
.top-right-panel .lantern .lantern-arm{left:8px;top:8px;width:11px;height:2px}
.top-right-panel .lantern .lantern-hanger{left:17px;top:8px;width:2px;height:5px}
.top-right-panel .lantern .lantern-foot{left:15px;top:34px;width:8px;height:3px}

/* The paper body. Its ribs are the soft outline in both themes when unlit;
   lit, they have to read on the ember, so they take the accent's own ink —
   the #158 invariant, not white. */
.top-right-panel .lantern .lantern-body{
  left:9px;top:13px;width:18px;height:21px;box-sizing:border-box;
  border:2px solid var(--play-ink);background:var(--play-card);
  transform-origin:8px -5px;
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}
.top-right-panel .lantern .lantern-body i{
  position:absolute;left:0;right:0;border-top:1.5px solid var(--play-soft);
}
.top-right-panel .lantern .lantern-body i:first-child{top:6px}
.top-right-panel .lantern .lantern-body i:last-child{top:11px}

.top-right-panel .lantern.is-lit .lantern-body{
  background:var(--play-accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--play-accent) 28%, transparent),
             0 0 16px 5px color-mix(in srgb, var(--play-accent) 35%, transparent);
}
.top-right-panel .lantern.is-lit .lantern-body i{border-top-color:var(--play-accent-ink)}

/* "Tap swings it 8° on the bracket, then it lights" (25f). The swing is the
   press feedback this control has instead of the kit's ledge — it has no
   ledge to press onto, being an object rather than a button face. */
.top-right-panel .lantern:hover .lantern-body{transform:rotate(4deg)}
.top-right-panel .lantern:active .lantern-body{transform:rotate(8deg)}
.top-right-panel .lantern:focus-visible{outline:3px solid var(--play-link);outline-offset:2px;border-radius:8px}

@media (prefers-reduced-motion: reduce){
  .top-right-panel .lantern .lantern-body{transition:none}
  .top-right-panel .lantern:hover .lantern-body,
  .top-right-panel .lantern:active .lantern-body{transform:none}
}