/* Manu Arcade: the "Report a problem / Suggest an idea" line and its dialog
   (_shared/report.js). The line sits quietly at the foot of a game's colophon,
   or in the hub's footer; the dialog is a parchment card over the game.
   Classes are mgr- prefixed (the shared-kit convention, like mgb-). A NEW file
   rather than lines in an existing _shared sheet: those are edge-cached for 31
   days, and a new URL reaches returning readers at once. Every colour carries
   a fallback so the hub, which does not load palette.css, renders it the same.
   No em dashes in on-screen copy. */

.mgr-foot {
  margin: 6px 0 0;
  font-size: .92em;
  color: var(--ink-light, #6b5a48);
}

.mgr-line { white-space: nowrap; }
.mgr-dot { opacity: .6; }

.mgr-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 2px 0;
  font: inherit;
  color: var(--oxblood, #5a1a1f);
  text-decoration: underline;
  text-decoration-color: rgba(200, 156, 58, .55);
  text-underline-offset: 3px;
  cursor: pointer;
}
.mgr-link:hover { color: var(--oxblood-bright, #7a2228); text-decoration-color: currentColor; }
.mgr-link:focus-visible { outline: 2px solid var(--gold-deep, #9c7826); outline-offset: 2px; border-radius: 2px; }

/* ---- the dialog ---------------------------------------------------------- */

.mgr-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink-soft, #3a2e22);
  overflow: auto;
}
.mgr-dialog::backdrop { background: rgba(18, 13, 9, .62); }

.mgr-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(18px, 4vw, 28px);
  border-radius: 14px;
  text-align: left;
  font-family: var(--body, "EB Garamond", Garamond, Georgia, serif);
  font-size: 17px;
  line-height: 1.4;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .02)), var(--parchment, #f1e6c8);
  box-shadow:
    inset 0 0 0 1px rgba(200, 156, 58, .5),
    inset 0 0 0 4px rgba(122, 104, 80, .12),
    0 18px 50px rgba(0, 0, 0, .35);
}
.mgr-card[hidden] { display: none; }

.mgr-eyebrow {
  margin: 0;
  font-family: var(--caps, "IM Fell English SC", Georgia, serif);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oxblood, #5a1a1f);
}

.mgr-heading {
  margin: -4px 0 2px;
  font-family: var(--display, "Cormorant Garamond", Georgia, serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 5vw, 32px);
  line-height: 1.05;
  color: var(--ink, #1a1410);
}

.mgr-kinds { display: flex; gap: 8px; flex-wrap: wrap; }
.mgr-kind { position: relative; cursor: pointer; }
.mgr-kind input { position: absolute; opacity: 0; pointer-events: none; }
.mgr-kind span {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--caps, "IM Fell English SC", Georgia, serif);
  font-size: 14px;
  letter-spacing: .06em;
  box-shadow: inset 0 0 0 1px rgba(122, 104, 80, .45);
  color: var(--ink-light, #6b5a48);
}
.mgr-kind input:checked + span {
  background: var(--oxblood, #5a1a1f);
  color: var(--parchment, #f1e6c8);
  box-shadow: none;
}
.mgr-kind input:focus-visible + span { outline: 2px solid var(--gold-deep, #9c7826); outline-offset: 2px; }

.mgr-field { display: flex; flex-direction: column; gap: 4px; position: relative; }
.mgr-inline { flex-direction: row; align-items: center; gap: 10px; }
.mgr-label { font-size: 15px; color: var(--ink-soft, #3a2e22); }
.mgr-label em { color: var(--ink-light, #6b5a48); }

.mgr-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  /* 16px minimum: iOS Safari zooms the page into any smaller field. */
  font: 16px/1.4 var(--body, "EB Garamond", Garamond, Georgia, serif);
  color: var(--ink, #1a1410);
  background: var(--cream, #f6eed6);
  box-shadow: inset 0 0 0 1px rgba(122, 104, 80, .45);
}
.mgr-input:focus { outline: 2px solid var(--gold-deep, #9c7826); outline-offset: 1px; }
.mgr-text { resize: vertical; min-height: 7.5em; }
.mgr-select { width: auto; }

.mgr-count {
  align-self: flex-end;
  font-size: 12px;
  color: var(--ink-light, #6b5a48);
  font-variant-numeric: tabular-nums;
}

.mgr-sends { margin: 0; font-size: 14px; color: var(--ink-light, #6b5a48); }
.mgr-status { margin: 0; min-height: 1.2em; font-size: 15px; color: var(--oxblood, #5a1a1f); }
.mgr-status:empty { display: none; }

.mgr-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 4px; }

.mgr-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  font-family: var(--caps, "IM Fell English SC", Georgia, serif);
  font-size: 15px;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
  background: var(--oxblood, #5a1a1f);
  color: var(--parchment, #f1e6c8);
}
.mgr-btn:hover { background: var(--oxblood-bright, #7a2228); }
.mgr-btn:disabled { opacity: .6; cursor: progress; }
.mgr-btn:focus-visible { outline: 2px solid var(--gold-deep, #9c7826); outline-offset: 2px; }
.mgr-btn-quiet {
  background: transparent;
  color: var(--ink-soft, #3a2e22);
  box-shadow: inset 0 0 0 1px rgba(122, 104, 80, .5);
}
.mgr-btn-quiet:hover { background: rgba(122, 104, 80, .1); }

@media (prefers-reduced-motion: no-preference) {
  .mgr-dialog[open] { animation: mgr-in .18s var(--ease, ease-out); }
  @keyframes mgr-in { from { opacity: 0; transform: translateY(8px); } }
}
.mgr-status a { color: inherit; text-underline-offset: 3px; }