/* INK-UGC-IMGMOD phase 0 — «Report» flag in photo viewers + complaint modal.
   Dark by default; html.light-theme switches the modal to light. */
:root {
  --phr-bg: #17181c;
  --phr-line: #2c2f36;
  --phr-text: #e8eaed;
  --phr-muted: #9aa0a8;
  --phr-accent: #E8C547;
  --phr-ok: #66bb6a;
  --phr-err: #ef5350;
}
html.light-theme {
  --phr-bg: #ffffff;
  --phr-line: #e5e5e5;
  --phr-text: #171717;
  --phr-muted: #6f6f6f;
  --phr-accent: #b08d00;
  --phr-ok: #2e7d32;
  --phr-err: #c62828;
}

/* ---- flag button --------------------------------------------------------------------- */
.phr-flag {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px 0 10px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font: 500 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  cursor: pointer;
  opacity: 0.85;
}
.phr-flag:hover,
.phr-flag:focus-visible { opacity: 1; border-color: var(--phr-accent); outline: none; }
.phr-flag svg { flex: 0 0 auto; }
.phr-flag--lightbox { top: max(16px, env(safe-area-inset-top)); left: 16px; }
.phr-flag--detail { top: 64px; left: 12px; }
@media (min-width: 768px) {
  .phr-flag--detail { top: 12px; left: 12px; }
}
@media (max-width: 380px) {
  .phr-flag__text { display: none; }
  .phr-flag { padding: 0 9px; }
}

/* ---- modal --------------------------------------------------------------------------- */
html.phr-open { overflow: hidden; }
.phr-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;          /* above every viewer (they use --z-modal) */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 0;
}
.phr-modal[hidden] { display: none; }
.phr-box {
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--phr-bg);
  color: var(--phr-text);
  border: 1px solid var(--phr-line);
  border-radius: 14px 14px 0 0;
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  box-sizing: border-box;
}
@media (min-width: 600px) {
  .phr-modal { align-items: center; padding: 16px; }
  .phr-box { border-radius: 14px; }
}
.phr-title { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.phr-lead { margin: 0 0 12px; color: var(--phr-muted); font-size: 13px; }
.phr-form { margin: 0; }
.phr-reasons { border: 0; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.phr-label { display: block; font-size: 12px; color: var(--phr-muted); margin: 10px 0 4px; padding: 0; }
.phr-radio { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 2px 4px; border-radius: 8px; cursor: pointer; }
.phr-radio:hover { background: rgba(127, 127, 127, 0.08); }
.phr-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--phr-accent); }
.phr-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--phr-line);
  border-radius: 8px;
  background: transparent;
  color: var(--phr-text);
  font-family: inherit;
  font-size: 16px;          /* 16px: no iOS zoom on focus */
  line-height: 1.4;
  resize: vertical;
}
.phr-input:focus { outline: none; border-color: var(--phr-accent); }
.phr-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; opacity: 0; }
.phr-msg { min-height: 1.2em; margin: 10px 0 0; font-size: 13px; }
.phr-msg--ok { color: var(--phr-ok); }
.phr-msg--err { color: var(--phr-err); }
.phr-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.phr-btn {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--phr-line);
  background: transparent;
  color: var(--phr-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.phr-btn--primary { background: var(--phr-accent); border-color: var(--phr-accent); color: #111; }
.phr-btn[disabled] { opacity: 0.6; cursor: default; }
.phr-btn[hidden] { display: none; }
.phr-legal { margin: 14px 0 0; font-size: 12px; color: var(--phr-muted); }