/* Entry popups for a gallery's own notices.
   Every flagged notice gets its own card. They sit centred on the page and are
   closed one at a time. Independent of notice-modal.css, which styles the
   platform's standing ops message. */

#notice-popup-root:empty {
  display: none;
}

#notice-popup-root:not(:empty) {
  position: fixed;
  inset: 0;
  z-index: 100;
  /* Dim the page behind: a card over the photo grid otherwise reads as part of
     the gallery rather than something to answer. */
  background: rgba(0, 0, 0, 0.45);
}

.notice-popup {
  /* Cascading from the middle: each card steps down and right from the one
     before, so the newest sits in front and the rest show their corners.
     Every card is the same size regardless of how much it says. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
    translate(calc(var(--i, 0) * 1.5rem), calc(var(--i, 0) * 1.5rem));
  z-index: calc(100 - var(--i, 0));
  width: min(30rem, calc(100vw - 2rem));
  /* Was a fixed 15rem, back when a card held a whole notice body and needed a
     predictable size to scroll inside. It holds a title, a summary and three
     controls now, so a fixed height was just empty space under the text. The
     minimum keeps the cascade legible when one notice is a single short line. */
  min-height: 9rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-md, 0 12px 32px rgba(0, 0, 0, 0.35));
  padding: 1.15rem 1.25rem 1rem;
}

/* Same reasoning as .board__item-title: the display serif carries no Hangul. */
.notice-popup__title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.notice-popup__summary {
  margin: 0.55rem 0 0;
  font-size: 0.9375rem;
  font-weight: 400;
}

.notice-popup__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  /* Pinned to the bottom of the fixed-height card. */
  margin-top: auto;
  padding-top: 1rem;
}

.notice-popup__button {
  padding: 0.4rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.notice-popup__button:hover {
  background: var(--accent-hover, var(--accent));
}

/* Hiding for a week is the quieter of the two: same shape, no fill. */
.notice-popup__button--ghost {
  background: transparent;
  border-color: var(--border-strong, var(--border));
  color: var(--muted);
  font-weight: 400;
}

.notice-popup__button--ghost:hover {
  background: var(--btn-bg-hover, transparent);
  color: var(--fg);
}

/* The one action that goes somewhere sits first and reads as a link, not as a
   third way to dismiss the card. */
.notice-popup__link {
  margin-right: auto;
  text-decoration: none;
  background: transparent;
  border-color: var(--border-strong, var(--border));
  color: var(--fg);
  font-weight: 500;
}

.notice-popup__link:hover {
  background: var(--btn-bg-hover, transparent);
  border-color: var(--accent);
}

.notice-popup__button:focus-visible,
.notice-popup__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}