/* The gallery and the review queue (gallery.html, admin.html), on top of
   styles.css: the same paper, ink, hairlines and one mono face as the app.
   styles.css lays `main` out as the app's stage-and-rail grid on a laptop;
   these pages are a plain column, so that is undone first. */

body.g-page main {
  display: block;
  width: min(1120px, 100%);
  height: auto;
  margin: 0 auto;
  padding: 28px 16px 40px;
}
body.g-page main > footer { text-align: center; margin-top: 36px; }

.g-head { text-align: center; margin-bottom: 22px; }
.g-home { display: inline-block; color: var(--ink); text-decoration: none; }
.g-head .wordmark { margin: 0; }
.g-title { margin: 14px 0 2px; font: 400 20px/1.3 var(--mono); letter-spacing: 0.02em; }

.g-status { text-align: center; color: var(--muted); font-size: 13px; min-height: 1.5em; margin: 0 0 14px; }
.g-status.working { animation: eh-pending 1.2s ease-in-out infinite; }
.g-retry, .a-signout {
  appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0;
  font: inherit; color: var(--ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.g-empty { text-align: center; color: var(--muted); margin: 40px 0; }
.g-empty em { font-style: normal; color: var(--ink); }
.g-empty a { color: var(--ink); text-underline-offset: 3px; }
.g-more { text-align: center; margin: 22px 0 0; }

/* Two columns on a phone, as many ~220px columns as fit on a laptop. Every
   card's frame is 4:5 and the hum keeps its own shape inside it, so a row of
   different pictures still lines up. */
.g-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 18px 12px;
  align-items: start;
}
@media (min-width: 700px) { .g-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 26px 20px; } }

.g-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.g-frame {
  appearance: none; -webkit-appearance: none;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  overflow: hidden;
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
}
.g-frame:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.g-frame:disabled { cursor: default; }
.g-canvas {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  border-radius: 6px;
}
.g-loading .g-frame { animation: eh-pending 1.4s ease-in-out infinite; }
.g-broken .g-frame { opacity: 0.4; }
.g-playing .g-frame { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
/* play / stop, in the corner where a thumb does not cover the drawing */
.g-badge {
  position: absolute; right: 8px; bottom: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--raised); color: var(--ink); border: 1px solid var(--hair);
  pointer-events: none;
}
.g-badge .ic-stop { display: none; }
.g-playing .g-badge { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.g-playing .g-badge .ic-play { display: none; }
.g-playing .g-badge .ic-stop { display: inline; }
@media (prefers-reduced-motion: reduce) { .g-loading .g-frame, .g-status.working { animation: none; } }

.g-meta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.g-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-like {
  appearance: none; -webkit-appearance: none; background: none; border: 0;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 34px; padding: 0 2px;
  font: inherit; color: var(--muted); cursor: pointer;
}
.g-like svg path { fill: transparent; }
.g-like[aria-pressed="true"] { color: var(--ink); }
.g-like[aria-pressed="true"] svg path { fill: currentColor; }
.g-like:focus-visible, .g-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.g-open { color: var(--ink); font-size: 12px; text-underline-offset: 3px; padding: 8px 0; }
.g-credit, .g-song {
  margin: 0; font-size: 11px; line-height: 1.4; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-credit a, .g-song a { color: inherit; }

/* ── the review queue ─────────────────────────────────────────────────── */
.a-gate section { width: min(22rem, 100%); margin: 30px auto 0; }
.a-tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; }
.a-tabs .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.a-signout { margin-left: 8px; font-size: 12px; color: var(--muted); }
.a-info { margin: 0; font-size: 11px; color: var(--muted); }
.a-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.a-actions .chip { height: 32px; padding: 0 12px; font-size: 12px; }
.a-actions .a-approve { background: var(--ink); color: var(--paper); border-color: var(--ink); }