/* detail-drawer.css — the per-detection drawer, and the honesty palette it speaks in.
 *
 * Extracted from survey.css so that BOTH surfaces that open a detection can share one
 * definition instead of drifting:
 *   ui/survey.html      — the survey map, the exposure list and the views
 *   ui/cell-aladin.html — the per-cell difference viewer (marker click)
 *   ui/cell.html        — the per-cell page's epoch detection table (row click)
 *
 * Linked explicitly by both pages (not injected from JS): the honesty palette below is
 * also used by row badges outside the drawer, so it must not depend on a script having
 * run. It is the SINGLE definition of these five hues — survey.css no longer carries a
 * copy. Pairs with survey-detail.js, which owns the markup and the honesty wording.
 *
 * Assumes the page's base token sheet is already loaded — theme.css on survey.html and
 * cell-aladin.html, cells.css on cell.html; both define --ink / --line / --card-2 /
 * --ff-m / --shadow / --am / --cy.
 */

:root {
  /* the three honesty categories. Encoded by hue AND by label everywhere - the
     colour is never the only carrier of the distinction. */
  --recovery: #d9c25a;     /* known object, found blind: a validation */
  --candidate: #e0a458;    /* unconfirmed, mostly artifacts */
  --verdict: #4fb3bf;      /* stationary type call */
  --processed: #55617e;    /* looked at, nothing flagged */
  --unchecked: #7d8698;    /* we could not ask. NEVER the candidate colour. */
}

/* Plate (light) theme: the same five hues, darkened until they are legible as
   TEXT on a light card — at the night values the badges read pale-on-pale.
   The map's MARKERS are unaffected: they are painted on a canvas from the hex
   constants in survey-map.js / survey-zoom.js, over a sky that is dark in both
   themes, so in plate a legend swatch sits one shade darker than the marker it
   keys. That is the right trade — an unreadable key matches nothing. */
html[data-theme="plate"] {
  --recovery: #6a4e00;
  --candidate: #8f4a12;
  --verdict: #0f5f68;
  --processed: #4a5266;
  --unchecked: #57606f;
}


/* real/bogus badge in the exposure list + views, matching the map's marker key */
.realness {
  font-family: var(--ff-m); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 5px; border-radius: 999px; border: 1px solid currentColor;
  color: var(--unchecked); white-space: nowrap;
}
.realness[data-real="real"] {
  color: var(--verdict); font-weight: 700;
  background: color-mix(in srgb, var(--verdict) 14%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--verdict) 40%, transparent);
}
.realness[data-real="bogus"] { color: var(--processed); border-style: solid; }
.realness[data-real="unevaluated"] { color: var(--unchecked); border-style: dashed; opacity: .85; }
.realness[data-real="candidate"] { color: var(--candidate); }
.realness[data-real="recovery"]  { color: var(--recovery); font-weight: 700; }


/* ------------------------------------------------------------------ drawer
   The per-detection drawer, in the same glass language as the viewer's
   display panel. */
#svy-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw;
  background: var(--card-2); border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: translateX(102%); transition: transform .18s var(--e-out);
  z-index: 3000; overflow-y: auto; padding: 14px 16px;
  backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25);
  color: var(--ink);
}
#svy-drawer.open { transform: none; }
#svy-drawer h3 { margin: 0 0 2px; font-size: 14px; letter-spacing: -.01em; font-variation-settings: 'wght' 600; }
#svy-close {
  position: absolute; top: 10px; right: 12px; cursor: pointer;
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 2px;
  background: none; color: var(--ink-2); font-size: 13px; line-height: 1;
  transition: border-color .2s, color .2s;
}
#svy-close:hover { border-color: var(--cy); color: var(--cy); }
#svy-thumb {
  width: 100%; image-rendering: pixelated; border: 1px solid var(--line);
  border-radius: 2px; margin: 8px 0 2px; background: #04060c;
}
.chan { font-family: var(--ff-m); font-size: 10px; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 10px; }
.svy-dl { display: grid; grid-template-columns: 44% 56%; gap: 2px 8px; font-size: 12px; margin: 0 0 12px; }
.svy-dl dt { color: var(--ink-2); }
.svy-dl dd { margin: 0; word-break: break-word; color: var(--ink-2); }
.svy-sec {
  font-family: var(--ff-m); font-size: 9px; text-transform: uppercase; letter-spacing: .2em;
  color: var(--am); margin: 12px 0 4px; padding-bottom: 3px;
  border-bottom: 1px solid var(--line-2);
}
.verdict-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 11.5px; color: var(--ink-2); line-height: 1.35;
}
.verdict-head[data-real="real"] { color: var(--ink); }

.banner {
  font-size: 11.5px; padding: 7px 9px; border-radius: 2px; margin-bottom: 10px; line-height: 1.5;
  border: 1px solid var(--line-2); background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: var(--ink-2);
}
.banner[data-cat="recovery"]  { border-color: color-mix(in srgb, var(--recovery) 55%, var(--line)); }
.banner[data-cat="candidate"] { border-color: color-mix(in srgb, var(--candidate) 55%, var(--line)); }
.banner[data-cat="verdict"]   { border-color: color-mix(in srgb, var(--verdict) 55%, var(--line)); }
.strike { text-decoration: line-through; color: var(--ink-3); }

/* The cutout strip. `pixelated` is deliberate: these are 63x63 px CCD cutouts shown
   at ~3x, and smoothing them invents structure that is not in the data. */
#svy-fig { margin: 8px 0 0; }
/* One caption cell per panel, on a grid with the same column count the strip has, so
   each label sits under the panel it names. */
#svy-fig .chan {
  display: grid; gap: 0 3px; margin: 4px 0 0; line-height: 1.35; text-align: center;
}
#svy-fig .chan span { display: block; min-width: 0; }
#svy-fig .chan b { display: block; color: var(--am); font-weight: 400; }
#svy-fig .chan i { display: block; font-style: normal; opacity: .75; font-size: 9px; }
.chan-note {
  font-size: 10.5px; color: var(--ink-3); line-height: 1.45; margin: 7px 0 10px;
}
#svy-nostamp { display: none; margin-top: 8px; }