/* =============================================================================
   sfc-dialog.css — detail-dialog additions grafted from the current build:
     · .pieceDialog_priv     master-only marker beside a private field's label
     · .pieceDialog_inquire  WhatsApp + Email inquiry block, under the links row

   Same izanami system as styles.css: strict monochrome on ink, hairline rules at
   rgba(217,215,212,.x), Cinzel for micro-labels, gold ONLY on hover. No
   gradients, no shadows, no letter-spacing tricks. Breakpoints and the vw
   rhythm mirror the .pieceDialog blocks in styles.css (≥768 / ≤767).
   Load AFTER styles.css.
============================================================================= */

/* ==========================================================================
   § Master-only field marker (admin view only — app.js privMarked())
   ========================================================================== */
.pieceDialog_priv {
  display: inline-block;
  border: 1px solid rgba(var(--fg-rgb), .3);
  color: var(--color-white);
  opacity: .45;
  font-family: Cinzel, serif;
  font-weight: 400;
  font-size: .7em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: baseline;
}

/* ==========================================================================
   § Inquiry block
   ========================================================================== */
.pieceDialog_inquire { border-block-start: 1px solid rgba(var(--fg-rgb), .12); }
.pieceDialog_inquireTitle { opacity: .55; }
.pieceDialog_inquireBtns { display: flex; flex-wrap: wrap; }
.pieceDialog_inquireBtn {
  display: inline-block;
  border: 1px solid rgba(var(--fg-rgb), .4);
  background-color: transparent;
  color: var(--color-white);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .3s, color .3s;
}

/* ==========================================================================
   § Desktop / tablet (mirrors the ≥768 .pieceDialog rhythm)
   ========================================================================== */
@media (min-width: 768px) {
  .pieceDialog_priv { margin-inline-start: .5rem; padding: .2em .45em; }

  .pieceDialog_inquire { margin-block: 1.875vw; padding-block-start: 1.875vw; }
  .pieceDialog_inquireBtns { gap: .9375vw; margin-block-start: .9375vw; }
  .pieceDialog_inquireBtn { padding: .625vw 1.25vw; }
}

/* ==========================================================================
   § Phone (mirrors the ≤767 .pieceDialog rhythm; full-width, thumb-sized taps)
   ========================================================================== */
@media (max-width: 767px) {
  .pieceDialog_priv { margin-inline-start: .375rem; padding: .2em .4em; }

  .pieceDialog_inquire { margin-block: 4.9751243781vw; padding-block-start: 4.9751243781vw; }
  .pieceDialog_inquireBtns { gap: 2.4875621891vw; margin-block-start: 2.4875621891vw; }
  /* two even columns that wrap to full width on very narrow phones */
  .pieceDialog_inquireBtn { flex: 1 1 8rem; padding: 3.7313432836vw 2.4875621891vw; }
}

/* ==========================================================================
   § Hover / motion (matches .pieceDialog_link:hover in styles.css)
   ========================================================================== */
@media (any-hover: hover) {
  .pieceDialog_inquireBtn:hover { border-color: var(--color-yellow); color: var(--color-yellow); }
}
@media (prefers-reduced-motion: reduce) {
  .pieceDialog_inquireBtn { transition: none; }
}