/* The Nation's Refrigerator Door: the toy's styles on top of the site's /styles.css. The door,
   the magnets and the tray keep the toy's own look; everything around them follows the site.
   Fridge-only values are prefixed so they never override the site's tokens. */
[hidden] { display: none !important; }

.fridge-page {
  --tray-h: 112px;
  --steel: #e9ebea;
  --tile: #fffdf7;
  --tile-ink: #2a2a2a;
  --tile-font: "Courier Prime", "Courier New", Courier, "Nimbus Mono PS", monospace;
  overflow-x: hidden;
}

/* Buttons and the code box, in the site's pill style */
.fridge-top button, .tray button, .sheet button {
  padding: 6px 14px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: #fff; color: var(--ink);
  font: 500 .9rem var(--sans);
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.fridge-top button:hover, .tray button:hover, .sheet button:hover { border-color: var(--ink); }
.fridge-top button[type="submit"], .sheet button[type="submit"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.fridge-top button[type="submit"]:hover, .sheet button[type="submit"]:hover { background: #000; }
.sheet button.quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.fridge-page button:focus-visible, .fridge-page input:focus-visible { outline: 2px solid var(--butter); outline-offset: 2px; }

/* The top of the toy: the door's name and its buttons. The page's intro and "Things to try" come
   from the site's Test Kitchen template. */
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.door-name { color: var(--ink-2); font-size: .95rem; }
.door-name b { color: var(--ink); font-family: var(--tile-font); font-size: 1.05rem; letter-spacing: .08em; }
.buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.open-door { display: inline-flex; gap: 4px; }
.open-door input {
  width: 5.6em; padding: 5px 10px;
  border: 1px solid var(--rule); border-radius: 999px; background: #fff;
  color: var(--ink); font: .95rem var(--tile-font); letter-spacing: .12em; text-transform: uppercase;
}
.fridge-status { min-height: 1.3em; margin-top: 6px; color: var(--ink-3); font-size: .9rem; }

/* The door: a 600 by 800 sheet that js/door.js scales to fit between the buttons and the tray */
.fridge-stage { display: flex; align-items: flex-start; justify-content: center; min-height: 320px; padding: 8px 0 12px; }
.door-frame { position: relative; flex: none; width: 600px; height: 800px; }
.door {
  position: absolute; top: 0; left: 0; width: 600px; height: 800px;
  overflow: hidden; transform-origin: 0 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #f6f6f3 0%, #e8eae9 45%, #eef0ee 70%, #e3e6e5 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .7),
    inset 0 -2px 10px rgba(0, 0, 0, .06),
    0 18px 40px rgba(43, 33, 24, .18);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.door::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .45) 46%, rgba(255, 255, 255, 0) 58%);
}
.door::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity 2s ease;
  background:
    radial-gradient(circle at 12% 18%, rgba(140, 170, 190, .18) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(140, 170, 190, .16) 0 3px, transparent 4px),
    radial-gradient(circle at 40% 62%, rgba(140, 170, 190, .18) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 80%, rgba(140, 170, 190, .15) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 88%, rgba(140, 170, 190, .17) 0 2px, transparent 3px),
    radial-gradient(circle at 58% 12%, rgba(140, 170, 190, .15) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(120, 150, 170, .04), rgba(120, 150, 170, .12));
}
.door.damp::after { opacity: 1; }
.door.lifting { overflow: visible; }
.door-empty { position: absolute; top: 46%; right: 0; left: 0; color: #9a9a95; font-size: 15px; text-align: center; pointer-events: none; }

/* The magnets */
.magnet {
  position: absolute; padding: 6px 11px;
  border-radius: 3px; background: var(--tile); color: var(--tile-ink);
  font-family: var(--tile-font); font-size: 19px; line-height: 1.3; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 3px 8px rgba(0, 0, 0, .12);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: left 160ms ease, top 160ms ease, transform 160ms ease, box-shadow 120ms ease;
  will-change: transform;
}
.magnet.pushed, .magnet.remote, .magnet.slipping { transition: none; }
.magnet.lifted { box-shadow: 0 3px 5px rgba(0, 0, 0, .16), 0 10px 20px rgba(0, 0, 0, .18); }
.magnet.dragging {
  z-index: 10000 !important; cursor: grabbing; transition: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .18), 0 14px 28px rgba(0, 0, 0, .2);
}
.magnet.frosted {
  background: linear-gradient(160deg, #ffffff, #eef3f6 70%, #e7eef2); color: #4a5257;
  box-shadow: inset 0 0 0 1px rgba(185, 205, 218, .7), 0 1px 2px rgba(0, 0, 0, .12), 0 3px 8px rgba(0, 0, 0, .08);
}
.magnet.house { background: #f8f2dc; }
.magnet.ghost { position: fixed; z-index: 20000; transform-origin: 0 0; transition: none; pointer-events: none; }
.magnet.wobble { animation: fridge-wobble 320ms ease; }
@keyframes fridge-wobble {
  0% { translate: 0 0; }
  25% { translate: -2px 0; }
  50% { translate: 2px 0; }
  75% { translate: -1px 0; }
  100% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .magnet { transition: none; }
  .magnet.wobble { animation: none; }
  .door::after { transition: none; }
}

/* The tray, a shelf right under the door. It sticks to the bottom of the screen while the door is
   in view, so words can always be dragged up, and scrolls away with the toy, above the tips. */
.tray {
  position: sticky; bottom: 0; z-index: 100;
  display: flex; align-items: center; gap: 10px;
  height: calc(var(--tray-h) + env(safe-area-inset-bottom)); padding: 0 16px env(safe-area-inset-bottom);
  border: 1px solid #CFC6B6; border-radius: 12px;
  background: linear-gradient(180deg, #E6DFD2, #D9D0C0);
  box-shadow: 0 -8px 24px rgba(43, 33, 24, .14);
}
.tray .shuffle { flex: none; background: rgba(255, 255, 255, .75); font-size: .85rem; }
.tray-tiles { flex: 1; display: flex; align-items: center; gap: 12px; padding: 14px 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.tray-tiles .magnet { position: relative; flex: none; transition: none; }
.tray-tiles .magnet.empty { background: #ecebe6; opacity: .35; cursor: not-allowed; }
.tray-tiles .magnet .count {
  position: absolute; top: -8px; right: -8px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--ink); color: #fff;
  font: 11px/18px var(--sans); text-align: center;
}

/* The two sheets: a new door, and the gallery */
.sheet {
  width: min(92vw, 440px); padding: 22px 24px;
  border: 0; border-radius: 14px;
  color: var(--ink); font-family: var(--sans);
  box-shadow: 0 24px 60px rgba(26, 23, 20, .3);
}
.sheet.wide { width: min(94vw, 900px); }
.sheet::backdrop { background: rgba(26, 23, 20, .45); }
.sheet h2 { margin-bottom: 4px; font-size: 1.3rem; font-weight: 500; letter-spacing: -.02em; }
.sheet-hint { margin-bottom: 14px; color: var(--ink-2); font-size: .92rem; }
.choices { display: grid; gap: 8px; }
.choices label {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 2px 10px;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; cursor: pointer;
}
.choices label:has(input:checked) { border-color: var(--ink); background: #FFF6CC; }
.choices input { margin-top: 4px; accent-color: var(--ink); }
.choices .name { font-weight: 600; }
.choices .line { grid-column: 2; color: var(--ink-2); font-size: .88rem; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; max-height: 60vh; overflow-y: auto; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; background: var(--steel); box-shadow: 0 6px 16px rgba(43, 33, 24, .18); }
.gallery figcaption { margin-top: 6px; color: var(--ink-2); font-size: .85rem; }
.gallery .none { grid-column: 1 / -1; color: var(--ink-2); }

@media (max-width: 640px) {
  .fridge-page { --tray-h: 104px; }
  .bar { gap: 6px; }
  .fridge-top button, .open-door input { padding: 4px 10px; font-size: .82rem; }
  .fridge-stage { min-height: 260px; padding: 4px 0 8px; }
  .tray { margin-inline: calc(12px - var(--gutter)); } /* as wide as the door, 12px from each edge */
}