/* THE JAR (/jar; M3-D). Loaded on the jar's page only (tools/render.mjs). The site's own vocabulary from base.css and
   furniture.css (paper tags, camera tape, typewriter paperwork, cut-paper captions); this file adds the room: one
   picture you act on, its three papers, and the phone's framing. Every move is stepped (on twos at 12 fps); nothing
   fades. Without JavaScript the picture is a still and the papers stack down the page after it. */

html[data-place="jar"], html[data-place="jar"] body { background: #0d0a07; }
html[data-place="jar"] #stage { display: none; } /* no world on this page */

/* ------------------------------------------------------------------ the set */
.jar-stage { position: relative; }
.js .jar-stage { position: fixed; z-index: 0; left: 0; top: 0; width: 100vw; height: var(--jar-h, 100dvh); overflow: hidden; background: #0d0a07; }
.js .jar-set { position: absolute; left: 0; top: 0; width: 1920px; height: 1072px; transform-origin: 0 0; }
.js .jar-set img, .jar-set .part { position: absolute; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.js .jar-set .jar-plate { left: 0; top: 0; width: 1920px; height: 1072px; }
/* the phone's framing of the plate (plate x 560..1380), the same test as the script's layout */
@media (max-aspect-ratio: 9/10) { .js .jar-set .jar-plate { left: 560px; width: 820px; } }
.jar-set .coin { width: 54px; height: 54px; transform-origin: 50% 50%; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55)); }
.jar-set .coin.inside { filter: brightness(0.8) contrast(0.92) saturate(0.85); }
.jar-set .slip { width: 120px; height: 34px; background: url(/shell/paper.webp) 0 0 / 80px, #efe6d2; background-blend-mode: multiply;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.5); clip-path: polygon(0 6%, 100% 0, 99% 100%, 1% 94%); }

/* ------------------------------------------------------------------ doors: the object is the hotspot, its tag hangs off it */
.jar-doors, .jar-hot { display: none; }
.js .jar-doors { display: block; position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.js .jar-doors .obj { pointer-events: auto; }
.jar-doors .obj[aria-expanded="true"] .frame { visibility: visible; }
.jar-doors .obj.tag-side .tag { top: 6%; }
.jar-doors .obj.tag-left .tag { top: 8%; }
.jar-doors .obj.tag-left .tag .hole::after { rotate: -100deg; left: auto; right: -40px; bottom: 3px; }
/* M3-D last-repair6 (CDS-04): a tag that would sit under the mark hangs below its object (jar.ts fit) */
.js .jar-doors .obj.tag-low .tag { top: 100%; right: 0; left: auto; margin: 10px 0 0; }
.jar-doors .tag.swing { animation: swing 0.333s steps(1, end) both; }
/* the way back from paying with sound rolled this visit: he holds the coin over the slot until the visitor's press
   (jar.ts waitForPress); the tag hangs by the slot */
.jar-dropin { display: none; }
.js .jar-dropin { display: block; position: fixed; z-index: 6; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.jar-dropin .tag { font-size: 15px; }

/* ------------------------------------------------------------------ the papers (paperwork over the set) */
.jar-paper { color: #1c1813; font: 400 15px/1.5 var(--type); }
.js .jar-paper {
  position: fixed; z-index: 12; display: none; top: calc(var(--padt) + 70px);
  width: min(390px, 34vw); max-height: calc(100dvh - var(--padt) - var(--padb) - 170px); overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 24px 22px;
  background: url(/shell/paper.webp) 0 0 / 160px, var(--paper); background-blend-mode: multiply;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.7);
}
.js .jar-paper.left { left: calc(var(--pad) + 8px); rotate: -0.8deg; }
.js .jar-paper.right { right: calc(var(--padr) + 8px); rotate: 0.7deg; }
.js .jar-paper.open { display: block; animation: jar-in 0.25s steps(1, end) both; }
@keyframes jar-in { 0% { translate: 0 -22px; } 33% { translate: 0 -9px; } 66%, 100% { translate: 0 0; } }
.paper-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 6px; }
.jar-paper h2 { margin: 0; font: 700 17px/1 var(--type); letter-spacing: 0.16em; }
.jar-paper h2:focus { outline: none; }
.jar-paper h2:focus-visible { outline: 2px solid #7a5a12; outline-offset: 4px; }
.paper-say { margin: 0 0 12px; font-style: italic; }
.jar-paper .small { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: #4a3d2c; }
.jar-paper .note:empty { display: none; }
.jar-paper .note { font-weight: 700; color: #6b2a16; }

.often { display: flex; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; }
.often label { position: relative; cursor: pointer; }
.often input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.often span { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 12px 6px; font: 700 12px/1 var(--type); letter-spacing: 0.12em;
  border: 1.5px solid rgba(40, 30, 18, 0.55); background: rgba(255, 252, 240, 0.35); }
.often input:checked + span { background: #f2cf6b; border-color: #5a4210; }
.often input:focus-visible + span { outline: 3px solid #7a5a12; outline-offset: 2px; }

.picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.pick { position: relative; display: grid; grid-template-rows: 54px auto auto; justify-items: center; align-content: start; gap: 4px;
  min-height: 112px; padding: 10px 6px 9px; text-align: center; background: rgba(255, 252, 240, 0.45); border: 1.5px solid rgba(40, 30, 18, 0.35); }
.pick:focus-visible { outline: 3px solid #7a5a12; outline-offset: 2px; }
.pick[aria-pressed="true"] { background: #f2cf6b; border-color: #5a4210; box-shadow: inset 0 0 0 1px #5a4210; }
.pick .heap { position: relative; width: 84px; height: 54px; }
.pick .heap img { position: absolute; width: 34px; height: 34px; filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, 0.5)); }
/* the heaps (no style attributes: the page's policy allows none) */
.heap.h1 .h0 { left: 25px; top: 12px; }
.heap.h2 .h0 { left: 14px; top: 14px; } .heap.h2 .h1 { left: 36px; top: 10px; }
.heap.h3 .h0 { left: 8px; top: 16px; } .heap.h3 .h1 { left: 30px; top: 8px; } .heap.h3 .h2 { left: 46px; top: 18px; }
.heap.h6 .h0 { left: 2px; top: 20px; } .heap.h6 .h1 { left: 22px; top: 12px; } .heap.h6 .h2 { left: 42px; top: 18px; }
.heap.h6 .h3 { left: 12px; top: 2px; } .heap.h6 .h4 { left: 34px; top: 0; } .heap.h6 .h5 { left: 52px; top: 6px; }
.pick .pick-l { font: 700 12.5px/1.1 var(--type); letter-spacing: 0.1em; }
.pick .pick-v { font: 400 22px/1 var(--hand); }
/* a coin with no payment page for the chosen frequency (a typed amount cannot repeat): greyed, and one line says why */
.pick:disabled { cursor: default; color: rgba(28, 24, 19, 0.5); background: rgba(255, 252, 240, 0.2); border-style: dashed; }
.pick:disabled .heap img { filter: grayscale(1) brightness(0.9) opacity(0.45); }
.pick .pick-x { display: none; font: 700 10.5px/1.15 var(--type); letter-spacing: 0.1em; }
.pick:disabled .pick-v { display: none; }
.pick:disabled .pick-x { display: block; }
/* the way to stop a monthly coin: always in sight while the jar takes them */
.jar-manage a { color: #4a2a10; font-weight: 700; letter-spacing: 0.06em; text-decoration: underline; text-underline-offset: 3px; }
.jar-manage a:focus-visible, .jar-plain a:focus-visible { outline: 3px solid #7a5a12; outline-offset: 3px; }
/* the coins as plain links: only without JavaScript (the picks need it) */
.jar-plain { display: none; }
.no-js .jar-plain { display: grid; gap: 10px; list-style: none; margin: 14px 0 0; padding: 0; }
.no-js .jar-plain a { color: #1c1813; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.own { display: flex; align-items: center; gap: 10px; margin: -4px 0 14px; font: 700 12px/1 var(--type); letter-spacing: 0.12em; }
.own-field { display: inline-flex; align-items: center; gap: 4px; font: 400 22px/1 var(--hand); }
.own input, #jar-email { font: 400 16px/1.2 var(--type); color: #1c1813; background: rgba(255, 252, 240, 0.7);
  border: 0; border-bottom: 2px solid #3b2f22; padding: 6px 4px 4px; border-radius: 0; }
.own input { width: 5.5em; }
.own input:focus-visible, #jar-email:focus-visible { outline: 3px solid #7a5a12; outline-offset: 2px; }

.jar-paper .drop, .jar-paper .post { margin: 4px 0 0 4px; }
.jar-paper .drop:disabled { filter: grayscale(0.8) brightness(0.86) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4)); cursor: default; }
.jar-paper .drop:focus-visible, .jar-paper .post:focus-visible, .pegs a.tag:focus-visible { outline: 3px solid #7a5a12; outline-offset: 3px; }
.jar-stamp { position: absolute; right: 18px; bottom: 54px; margin: 0; padding: 6px 10px 4px; rotate: -9deg;
  font: 700 17px/1 'TF Stencil', var(--type); letter-spacing: 0.08em; color: var(--stamp);
  border: 3px solid var(--stamp); border-radius: 3px; mix-blend-mode: multiply; pointer-events: none; }

.letters-form { display: grid; gap: 6px; margin: 0; }
.letters-form label { font: 700 12px/1 var(--type); letter-spacing: 0.12em; }
#jar-email { width: 100%; }
.letters-form .post { justify-self: start; margin-top: 10px; }

.pegs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; }
.pegs li { padding-left: 4px; }
.pegs .off { cursor: default; }
.pegs .off::before { filter: grayscale(0.5) brightness(0.92); }
.pegs .soon { margin-left: 12px; padding: 3px 6px 2px; font: 700 11px/1 'TF Stencil', var(--type); letter-spacing: 0.08em; color: var(--stamp);
  border: 2px solid var(--stamp); rotate: -6deg; }
.jar-paper .jar-novel { display: block; margin: 4px 0 16px; padding-bottom: 14px; border-bottom: 1px dashed rgba(60, 45, 30, 0.45); }

/* M3-D last-repair6 (CDS-04): a short desk-shaped screen (a phone held sideways): the papers use the height, clear of
   the mark */
@media (max-height: 520px) and (min-aspect-ratio: 9/10) {
  .js .jar-paper { top: calc(var(--padt) + 50px); width: min(460px, 52vw); max-height: calc(100dvh - var(--padt) - var(--padb) - 112px); padding: 10px 16px 12px; }
  .js .jar-paper h2 { font-size: 15px; }
  .js .often span { min-height: 30px; padding: 6px 10px 4px; }
  .js .jar-paper .drop { margin-top: 0; }
  .js .paper-say { margin-bottom: 6px; }
  .js .often { margin-bottom: 6px; }
  .js .picks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
  .js .pick { grid-template-rows: 34px auto auto; min-height: 74px; padding: 4px 2px 5px; gap: 2px; }
  .js .pick .heap { scale: 0.7; transform-origin: 50% 0; margin-bottom: -16px; }
  .js .pick .pick-l { font-size: 10px; letter-spacing: 0.04em; }
  .js .pick .pick-v { font-size: 19px; }
  .js .jar-paper .small { margin-top: 6px; }
  .js .jar-stamp { position: relative; right: auto; bottom: auto; display: inline-block; vertical-align: middle; margin: 0 0 0 14px; }
}

/* ------------------------------------------------------------------ the phone: the picture on top, the table below */
.js[data-jar="phone"] body { background: url(/shell/paper.webp) 0 0 / 220px, linear-gradient(180deg, #3a2716, #24170c 40%, #160e07); background-blend-mode: multiply; }
.js[data-jar="phone"] .jar-doors { top: var(--jar-h); bottom: auto; height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; padding: 22px 12px 0; }
.js[data-jar="phone"] .jar-doors .obj { position: relative; min-height: 0; }
.js[data-jar="phone"] .jar-doors .obj .frame { display: none; }
.js[data-jar="phone"] .jar-doors .obj .tag { position: relative; left: auto; right: auto; top: auto; margin: 0; font-size: 16px; min-height: 50px; padding: 12px 18px 12px 34px; }
.js[data-jar="phone"] .jar-doors .obj.tag-left .tag .hole::after { rotate: 14deg; left: 3.5px; right: auto; }
.js[data-jar="phone"] .jar-hot { display: block; position: fixed; z-index: 3; }
.js[data-jar="phone"] .jar-paper { left: 8px; right: 8px; width: auto; top: calc(var(--jar-h) + 8px); max-height: calc(100dvh - var(--jar-h) - var(--padb) - 14px); rotate: 0deg; padding: 14px 16px 16px; }
.js[data-jar="phone"].jar-open .furniture { display: none; }
.js[data-jar="phone"] .paper-say { margin-bottom: 8px; }
.js[data-jar="phone"] .often { margin-bottom: 8px; }
.js[data-jar="phone"] .picks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.js[data-jar="phone"] .pick { grid-template-rows: 38px auto auto; min-height: 92px; padding: 6px 2px 7px; gap: 3px; }
.js[data-jar="phone"] .pick .heap { scale: 0.7; transform-origin: 50% 0; margin-bottom: -16px; }
.js[data-jar="phone"] .pick .pick-l { font-size: 10px; letter-spacing: 0.04em; white-space: normal; }
.js[data-jar="phone"] .pick .pick-v { font-size: 19px; }
.js[data-jar="phone"] .jar-paper .small { margin-top: 6px; }
/* M3-D last-repair6 (CDS-03): on a phone the stamp lands beside DROP IT IN (in the flow), never over a pick */
.js[data-jar="phone"] .jar-stamp { position: relative; right: auto; bottom: auto; display: inline-block; vertical-align: middle; margin: 4px 0 0 14px; }

/* ------------------------------------------------------------------ without JavaScript: the still, then the papers */
.no-js[data-place="jar"] body { display: flex; flex-direction: column; }
.no-js[data-place="jar"] .top { order: 0; }
.no-js[data-place="jar"] #panel { order: 1; }
.no-js[data-place="jar"] #script { order: 2; }
.no-js .jar-set { max-width: 780px; margin: 18px auto 0; padding: 0 16px; }
.no-js .jar-plate { display: block; width: 100%; height: auto; }
.no-js .jar-paper { display: block; max-width: 748px; margin: 18px auto; padding: 22px 24px; position: relative;
  background: url(/shell/paper.webp) 0 0 / 160px, var(--paper); background-blend-mode: multiply; }
.no-js #card-jar .paper-say, .no-js .jar-paper .close, .no-js .jar-paper .drop, .no-js .picks, .no-js .often, .no-js .own, .no-js .jar-stamp, .no-js .letters-form.closed { display: none; }

/* stillness: reduced motion is honoured at once (base.css stops every animation; the parts stand at rest in jar.ts) */
@media (forced-colors: active), (prefers-contrast: more) {
  .jar-paper { background-image: none !important; }
  .pick { border: 2px solid CanvasText; }
}