/* Duplicate event guard — the save warning and the pipeline scan.

   Most colours here are existing theme-aware custom properties
   (--charcoal-soft, --concrete, --glass-border, --bone, --muted, --sand all
   redefine themselves under body.light-theme in index.html's inline
   stylesheet), so those rules need no counterpart.

   The convention for flat accents holds for FILLS and BORDERS only, not for
   text: raw --amber reads about 2:1 on a light card and #E05A4A about 3.2:1,
   both under AA. Every flat accent used as text below therefore carries a
   body.light-theme counterpart, reusing the pair established everywhere else in
   this codebase — #9C5C08 for amber, #B03A2E for red. */

/* --------------------------------------------------------------------------
   The warning modal
   --------------------------------------------------------------------------

   Z-INDEX 700. This is the one number in the file that is not a matter of
   taste. The event form backdrop is z-index 600 (index.html:624) and this modal
   is asked about a save from inside that form, so it has to be above it or the
   owner is answering a question they cannot see. Everything above 700 —
   .theme-toggle at 999, #authGate at 1000, the password-reset overlay at 1200 —
   is mutually exclusive with a half-filled event form. The rail (500) and the
   top bar (550) are below, which is what we want. */

.dup-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(8px);
  z-index: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; overflow-y: auto;
}

.dup-card {
  width: 100%; max-width: 520px;
  background: var(--charcoal-soft);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  overflow: hidden;
  max-height: 92vh;
  display: flex; flex-direction: column;
}

/* The only difference between the two tones is the top edge and the title
   colour. The escalated one is not a different modal — it is the same question
   with the consequence spelled out, and dressing it up further would make the
   ordinary case look safe by comparison. */
.dup-card-danger { border-top: 3px solid #E05A4A; }
.dup-card-warn   { border-top: 3px solid var(--amber); }

.dup-card-head { padding: 1.1rem 1.3rem .2rem; }

.dup-card-title {
  font-family: 'Fraunces', serif;
  font-weight: 700; font-size: 1.05rem;
  line-height: 1.3; margin: 0;
  color: var(--bone);
}
.dup-card-danger .dup-card-title { color: #E05A4A; }
body.light-theme .dup-card-danger .dup-card-title { color: #B03A2E; }
.dup-card-warn .dup-card-title { color: var(--amber); }
body.light-theme .dup-card-warn .dup-card-title { color: #9C5C08; }

.dup-card-body {
  padding: .8rem 1.3rem 1.1rem;
  overflow-y: auto;
}

.dup-lead {
  font-size: .82rem; line-height: 1.6;
  color: var(--sand); margin: 0 0 1rem;
}

.dup-card-label {
  font-family: 'Archivo', sans-serif;
  font-size: .6rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted);
  margin: .9rem 0 .45rem;
}

/* --------------------------------------------------------------------------
   One event, as shown inside the modal and inside a scan pair
   -------------------------------------------------------------------------- */

.dup-match {
  background: var(--concrete);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: .65rem .85rem;
  margin-bottom: .5rem;
}

/* The row for the event being saved, distinguished from what is already in the
   database by a dashed edge — it does not exist yet, and the difference between
   "this is your record" and "this is what you are about to add" is the whole
   comparison the owner is being asked to make. */
.dup-match-new { border-style: dashed; }

.dup-match-name {
  font-family: 'Fraunces', serif;
  font-weight: 600; font-size: .92rem;
  color: var(--bone); line-height: 1.35;
  margin-bottom: .4rem;
}

.dup-match-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem;
  font-size: .72rem; color: var(--muted);
}

/* The status pill is the app's own .ev-detail-status + .ev-chip-status-* fills,
   reused rather than restyled, so a Booked event looks Booked here too. It
   carries margin:0 1.5rem 1rem from the inline stylesheet for its original home
   in the detail card header; the flex gap supplies the spacing here instead.
   css/event-card.css does exactly this, scoped to #evDetailStatusWrap. */
.dup-match-meta .ev-detail-status { margin: 0; }

.dup-match-date { white-space: nowrap; }

.dup-match-loc {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 14rem;
}

/* The score, stated rather than hidden. A warning that will not say why it
   fired is a warning that gets clicked through. */
.dup-match-score {
  font-family: 'Archivo', sans-serif;
  font-size: .64rem; letter-spacing: .5px;
  color: var(--muted);
}

.dup-card-foot {
  display: flex; justify-content: flex-end; gap: .6rem;
  padding: .9rem 1.3rem 1.1rem;
  border-top: 1px solid var(--glass-border);
}

/* The two buttons carry the app's own .btn/.btn-ghost/.btn-primary, which are
   already theme-aware. Only the footer sizing is adjusted, so the pair fits a
   phone without wrapping the labels. */
.dup-card-foot .btn { padding: .65rem 1.1rem; font-size: .66rem; }

@media (max-width: 420px) {
  .dup-card-foot { flex-direction: column-reverse; }
  .dup-card-foot .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   The scan panel
   -------------------------------------------------------------------------- */

.dup-wrap { padding: 0 1.5rem 2rem; }

.dup-bar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px; margin-bottom: .8rem;
}

.dup-summary { font-size: .8rem; color: var(--muted); }
.dup-summary-quiet { color: var(--muted); }

.dup-summary-ok { color: var(--teal-bright); font-weight: 600; }
/* --teal-bright reads about 2.6:1 on the white light-theme background; --teal
   is the darker sibling already used for this purpose in css/event-card.css. */
body.light-theme .dup-summary-ok { color: var(--teal); }

.dup-summary-bad { color: #E05A4A; font-weight: 600; }
body.light-theme .dup-summary-bad { color: #B03A2E; }

.dup-note {
  font-size: .75rem; line-height: 1.55; color: var(--muted);
  background: var(--glass-white); border-left: 2px solid var(--glass-border);
  border-radius: 0 8px 8px 0; padding: .6rem .9rem; margin-bottom: 1rem;
}

.dup-empty {
  font-size: .82rem; line-height: 1.6;
  color: var(--muted); font-style: italic;
  padding: .6rem 0;
}

/* "Nothing was checked" is not the same sentence as "nothing was found", and it
   must not look like it. HANDOFF rule 4. */
.dup-empty-bad {
  font-style: normal;
  color: #E05A4A;
  background: rgba(224,90,74,0.07);
  border-left: 2px solid rgba(224,90,74,0.4);
  border-radius: 0 8px 8px 0;
  padding: .7rem .9rem;
}
body.light-theme .dup-empty-bad { color: #B03A2E; }

.dup-pair {
  background: var(--charcoal-soft);
  border: 1px solid var(--glass-border);
  border-left-width: 3px;
  border-radius: 10px;
  padding: .8rem 1rem;
  margin-bottom: .7rem;
}

/* Severity as a left edge rather than a badge: the list is sorted worst-first,
   so the edge is there to confirm the ordering at a glance, not to be read
   item by item. Border colours, so the flat accents need no override. */
.dup-pair-danger { border-left-color: #E05A4A; }
.dup-pair-warn   { border-left-color: var(--amber); }
.dup-pair-quiet  { border-left-color: var(--muted); }

.dup-pair-head {
  display: flex; justify-content: flex-end;
  margin-bottom: .5rem;
}

.dup-pair-score {
  font-family: 'Archivo', sans-serif;
  font-size: .62rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted);
}

.dup-side { padding: .1rem 0; }

/* A button, not a link: it opens the in-app event card, and an <a> with no href
   would need its own focus and keyboard handling to behave the same way. Styled
   flat so the pair reads as two names, not two controls. */
.dup-side-open {
  display: block; width: 100%;
  background: none; border: 0; padding: 0;
  text-align: left; cursor: pointer;
  font-family: 'Fraunces', serif;
  font-weight: 600; font-size: .95rem; line-height: 1.35;
  color: var(--bone);
  margin-bottom: .35rem;
}
.dup-side-open:hover { color: var(--amber); }
body.light-theme .dup-side-open:hover { color: #9C5C08; }

.dup-pair-join {
  font-family: 'Archivo', sans-serif;
  font-size: .62rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted);
  padding: .5rem 0 .45rem;
}

.dup-pair-verdict {
  font-size: .74rem; line-height: 1.55;
  color: var(--muted);
  border-top: 1px solid var(--glass-border);
  margin-top: .7rem; padding-top: .6rem;
}
/* Only the costly case gets coloured text — if all three verdicts were tinted,
   the one that matters would stop standing out. */
.dup-pair-danger .dup-pair-verdict { color: #E05A4A; }
body.light-theme .dup-pair-danger .dup-pair-verdict { color: #B03A2E; }

/* --------------------------------------------------------------------------
   Two checks on one screen
   --------------------------------------------------------------------------

   The panel now carries the look-alike scan and the unconfirmed-date scan, so
   each gets a heading and its own count. The bar at the top keeps the overall
   figure and the Re-check button. Nothing here is a new visual language — the
   section title is the .task-group-label treatment the rest of the app uses for
   exactly this job. */

.dup-section + .dup-section { margin-top: 2rem; }

.dup-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 8px;
  margin-bottom: .55rem;
}

.dup-section-title {
  font-family: 'Archivo', sans-serif;
  font-size: .64rem; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700;
  color: var(--sand);
}

/* --------------------------------------------------------------------------
   One unconfirmed date
   --------------------------------------------------------------------------

   Deliberately the same card as .dup-pair — same background, same radius, same
   left-edge severity, and it reuses .dup-side-open for the name and
   .dup-pair-verdict for the consequence. The two findings on this screen are the
   same kind of problem and should not look like two different products. */

.dup-date {
  background: var(--charcoal-soft);
  border: 1px solid var(--glass-border);
  border-left-width: 3px;
  border-radius: 10px;
  padding: .8rem 1rem;
  margin-bottom: .7rem;
}

/* Strong = the owner's own name for the event says the date is unsettled.
   Weak = nothing but a distribution, so it gets the quiet edge and no red. */
.dup-date-strong { border-left-color: #E05A4A; }
.dup-date-weak   { border-left-color: var(--muted); }

.dup-date-reasons {
  margin-top: .6rem;
  display: flex; flex-direction: column; gap: .3rem;
}

.dup-date-reason {
  font-size: .74rem; line-height: 1.5;
  color: var(--sand);
}

/* Same rule as .dup-pair-verdict above: only the costly case is tinted. */
.dup-date-strong .dup-pair-verdict { color: #E05A4A; }
body.light-theme .dup-date-strong .dup-pair-verdict { color: #B03A2E; }

.dup-date-footnote {
  font-size: .72rem; line-height: 1.55;
  color: var(--muted); font-style: italic;
  padding-top: .3rem;
}