/*
 * components/likeness.css — a likeness, an asset in its discovery variant, and
 * the cluster "find similar" opens (book/scripts/modules/likeness.mjs;
 * canon .spw/surfaces/likeness.spw).
 *
 *   [data-discovery="veiled"]    the asset in its palette as a soft duotone, blurred;
 *                                only its seal stays crisp
 *   [data-discovery="glimpsed"]  a window onto a detail, cut in the shape of its
 *                                kind of place ([ ] { } ( ) < >), over the veil; widens a
 *                                little on hover or focus, legible enough to want more
 *   [data-discovery="found"]     whole; settles once, the first time it is seen found
 *
 * dressAsset() sets the palette as --lk-ground/-ink/-accent/-glow/-edge, the
 * duotone filter as --lk-duo, the image as --lk-src and the kind of place as
 * data-likeness-container. Unlayered, like the other component sheets
 * (characters-portraits.css, collection.css): it is the last word on an
 * asset's discovery state, over any page layer. Surfaces mix the page's own
 * panel and ink (hub tokens on the monument pages, binding tokens in chapters),
 * so it reads in every binding, light or dark.
 */

:root {
  --lk-hue-action: var(--room-hue-action, #c0532a);
  --lk-hue-probe: var(--room-hue-probe, #2f6fb0);
  --lk-hue-potential: var(--room-hue-potential, #6a55b0);
  --lk-hue-perspective: var(--room-hue-perspective, #a8436a);
  --lk-hue-confluence: var(--room-hue-confluence, #1f7a6f);
  --lk-hue-value: var(--room-hue-value, #b86e10);
  --lk-hue-integration: var(--room-hue-integration, #a07a12);
  --lk-hue-annotation: var(--room-hue-annotation, #7a5a3a);
  --lk-hue-ground: var(--room-hue-ground, #5b6b3a);
  --lk-hue-lean: var(--room-hue-lean, #4a5f8a);
  --lk-hue-measure: var(--room-hue-measure, #7d7224);
  --lk-hue-substrate: var(--room-hue-substrate, #2f6b45);
}

html:is([data-theme='night'], [data-theme='slate'], [data-binding-tone='dark'], [data-nook-light='lamp']) {
  --lk-hue-action: var(--room-hue-action, #f09a72);
  --lk-hue-probe: var(--room-hue-probe, #8fc1f0);
  --lk-hue-potential: var(--room-hue-potential, #b9a8ee);
  --lk-hue-perspective: var(--room-hue-perspective, #f09cbc);
  --lk-hue-confluence: var(--room-hue-confluence, #6fcfbf);
  --lk-hue-value: var(--room-hue-value, #f2b25e);
  --lk-hue-integration: var(--room-hue-integration, #f0d46a);
  --lk-hue-annotation: var(--room-hue-annotation, #d9b98c);
  --lk-hue-ground: var(--room-hue-ground, #bccf8e);
  --lk-hue-lean: var(--room-hue-lean, #a9bce6);
  --lk-hue-measure: var(--room-hue-measure, #dccf7a);
  --lk-hue-substrate: var(--room-hue-substrate, #8fd3a6);
}

[data-likeness-motion='action'] { --lk-hue: var(--lk-hue-action); }
[data-likeness-motion='probe'] { --lk-hue: var(--lk-hue-probe); }
[data-likeness-motion='potential'] { --lk-hue: var(--lk-hue-potential); }
[data-likeness-motion='perspective'] { --lk-hue: var(--lk-hue-perspective); }
[data-likeness-motion='confluence'] { --lk-hue: var(--lk-hue-confluence); }
[data-likeness-motion='value'] { --lk-hue: var(--lk-hue-value); }
[data-likeness-motion='integration'] { --lk-hue: var(--lk-hue-integration); }
[data-likeness-motion='annotation'] { --lk-hue: var(--lk-hue-annotation); }
[data-likeness-motion='ground'] { --lk-hue: var(--lk-hue-ground); }
[data-likeness-motion='lean'] { --lk-hue: var(--lk-hue-lean); }
[data-likeness-motion='measure'] { --lk-hue: var(--lk-hue-measure); }
[data-likeness-motion='substrate'] { --lk-hue: var(--lk-hue-substrate); }

/* The page's own surfaces, wherever a likeness turns up. */
.likeness-panel,
.likeness-find,
.likeness-atlas-strip,
.likeness-asset {
  --lk-text: var(--hub-ink, var(--text-color-main, #1d2430));
  --lk-muted: var(--hub-muted, color-mix(in srgb, var(--lk-text) 72%, transparent));
  --lk-paper: var(--hub-paper, var(--bg-color-main, #f3ede1));
  --lk-panel: var(--hub-panel, color-mix(in srgb, var(--lk-paper) 92%, #fff));
  --lk-line: var(--hub-line, color-mix(in srgb, var(--lk-text) 22%, transparent));
  --lk-link: var(--hub-accent-deep, var(--accent-color-main, #184456));
  --lk-serif: Georgia, 'Times New Roman', serif;
  --lk-mono: var(--font-family-mono, ui-monospace, 'JetBrains Mono', Menlo, monospace);
}

/* ─── The seal ─────────────────────────────────────────────────────── */

.likeness-mark {
  display: block;
  flex: none;
  overflow: visible;
}

/* ─── Assets in their discovery variant ───────────────────────────── */

.likeness-asset {
  position: relative;
  isolation: isolate;
  --lk-keyhole: circle(31% at 50% 50%);
  --lk-keyhole-open: circle(40% at 50% 50%);
}

figure.likeness-asset {
  overflow: clip;
  background-color: var(--lk-ground, var(--lk-panel));
}

/* The veil under a glimpse: the same picture, duotone and soft, drawn behind the window. */
figure.likeness-asset[data-discovery='glimpsed']::before {
  content: '';
  position: absolute;
  inset: -6%;
  z-index: -1;
  background-image: var(--lk-src, none);
  background-size: cover;
  background-position: center;
  filter: var(--lk-duo, grayscale(1) sepia(0.35)) blur(10px) saturate(0.85);
  opacity: 0.72;
}

:is(img, picture, svg:not(.likeness-mark))[data-discovery='veiled'],
.likeness-asset[data-discovery='veiled'] > :is(img, picture, svg:not(.likeness-mark)) {
  filter: var(--lk-duo, grayscale(1) sepia(0.35)) blur(var(--lk-veil-blur, 7px)) saturate(0.9);
  transform: scale(1.08);
}

/* A portrait is already a silhouette until met: the veil only softens it. */
.lore-portrait.likeness-asset[data-discovery='veiled'] > svg {
  --lk-veil-blur: 1.4px;
  transform: none;
  opacity: 0.82;
}

/* The window onto a detail, cut in the shape of the kind of place. */
.likeness-asset[data-likeness-container='window'] {
  --lk-keyhole: inset(25% 23% 25% 23% round 2%);
  --lk-keyhole-open: inset(17% 15% 17% 15% round 2%);
}
.likeness-asset[data-likeness-container='room'] {
  --lk-keyhole: inset(21% 19% 21% 19% round 34%);
  --lk-keyhole-open: inset(13% 11% 13% 11% round 30%);
}
.likeness-asset[data-likeness-container='gathering'] {
  --lk-keyhole: ellipse(27% 35% at 50% 50%);
  --lk-keyhole-open: ellipse(36% 44% at 50% 50%);
}
.likeness-asset[data-likeness-container='passage'] {
  --lk-keyhole: polygon(50% 15%, 80% 50%, 50% 85%, 20% 50%);
  --lk-keyhole-open: polygon(50% 6%, 90% 50%, 50% 94%, 10% 50%);
}

:is(img, picture, svg:not(.likeness-mark))[data-discovery='glimpsed'],
.likeness-asset[data-discovery='glimpsed'] > :is(img, picture, svg:not(.likeness-mark)) {
  clip-path: var(--lk-keyhole);
  filter: saturate(0.88);
  transition: clip-path 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

:is(a, button, [tabindex]):is(:hover, :focus-visible) .likeness-asset[data-discovery='glimpsed'] > :is(img, picture, svg:not(.likeness-mark)),
.likeness-asset[data-discovery='glimpsed']:is(:hover, :focus-within) > :is(img, picture, svg:not(.likeness-mark)),
:is(img, picture)[data-discovery='glimpsed']:hover {
  clip-path: var(--lk-keyhole-open);
}

/* A glimpsed portrait: the silhouette is already its window; it stands whole, ringed in a dashed line. */
.lore-portrait.likeness-asset[data-discovery='glimpsed'] > svg {
  clip-path: none;
  filter: none;
}
.lore-portrait.likeness-asset[data-discovery='glimpsed'] {
  border-radius: 50%;
  outline: 1.5px dashed color-mix(in srgb, var(--lk-accent, #9a93a0) 70%, transparent);
  outline-offset: 2px;
}

/* The seal over the asset: never veiled, never cut. */
.likeness-asset-seal {
  position: absolute;
  z-index: 2;
  inset-block-end: 0.4rem;
  inset-inline-start: 0.4rem;
  line-height: 0;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.28);
  pointer-events: none;
}

.lore-portrait.likeness-asset > .likeness-asset-seal {
  inset-block-end: -0.2rem;
  inset-inline-start: auto;
  inset-inline-end: -0.25rem;
}

.likeness-asset[data-discovery='found'] > .likeness-asset-seal {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--lk-glow, #fff) 80%, transparent), 0 1px 3px rgb(0 0 0 / 0.28);
}

/* Found, the first time: it settles, once. */
[data-discovery='found'][data-discovery-fresh] {
  animation: likeness-settle 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 1;
}
[data-discovery='found'][data-discovery-fresh] > .likeness-asset-seal {
  animation: likeness-seal-press 900ms cubic-bezier(0.3, 1.4, 0.4, 1) 1;
}

@keyframes likeness-settle {
  0% { transform: scale(0.965); filter: brightness(1.14) saturate(0.6); box-shadow: 0 0 0 0 color-mix(in srgb, var(--lk-accent, #c4922e) 55%, transparent); }
  55% { box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--lk-accent, #c4922e) 0%, transparent); }
  100% { transform: none; filter: none; box-shadow: none; }
}

@keyframes likeness-seal-press {
  0% { transform: scale(1.5) rotate(-12deg); opacity: 0; }
  60% { transform: scale(0.92) rotate(2deg); opacity: 1; }
  100% { transform: none; }
}

/* ─── The find-similar button ──────────────────────────────────────── */

.likeness-find {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.2rem 0.65rem 0.2rem 0.3rem;
  border: 1px solid var(--lk-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--lk-panel) 82%, transparent);
  color: var(--lk-text);
  font: 400 0.72rem/1.2 var(--lk-mono);
  letter-spacing: 0.03em;
  text-transform: none;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.likeness-find:hover,
.likeness-find:focus-visible {
  border-color: color-mix(in srgb, var(--lk-link) 55%, var(--lk-line));
  background: var(--lk-panel);
  color: var(--lk-text);
}

.likeness-find:focus-visible {
  outline: 2px solid var(--lk-link);
  outline-offset: 2px;
}

.likeness-find-seal {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 0;
}

/* ─── The cluster ──────────────────────────────────────────────────── */

.likeness-panel {
  width: min(44rem, calc(100vw - 2rem));
  max-height: min(42rem, calc(100dvh - 2rem));
  padding: 0;
  border: 1px solid var(--lk-line);
  border-radius: 0.6rem;
  background: var(--lk-paper);
  color: var(--lk-text);
  box-shadow: 0 1.2rem 3rem rgb(10 14 20 / 0.32);
  overflow: auto;
  overscroll-behavior: contain;
}

.likeness-panel::backdrop {
  background: rgb(14 18 24 / 0.42);
  backdrop-filter: blur(2px);
}

.likeness-panel[open] {
  animation: likeness-panel-in 220ms ease-out 1;
}

@keyframes likeness-panel-in {
  from { opacity: 0; transform: translateY(0.6rem); }
  to { opacity: 1; transform: none; }
}

.likeness-panel-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1rem 0.85rem 1.1rem;
  border-bottom: 1px solid var(--lk-line);
  background: color-mix(in srgb, var(--lk-paper) 94%, transparent);
  backdrop-filter: blur(6px);
}

.likeness-panel-seal {
  line-height: 0;
}

.likeness-panel-heading {
  min-width: 0;
}

.likeness-panel-kicker,
.likeness-panel-signature,
.likeness-cluster-kind,
.likeness-trail-label {
  margin: 0;
  font: 400 0.7rem/1.35 var(--lk-mono);
  letter-spacing: 0.04em;
  color: var(--lk-muted);
}

.likeness-panel-title {
  margin: 0.15rem 0 0.2rem;
  font: 400 1.3rem/1.2 var(--lk-serif);
  color: var(--lk-text);
  overflow-wrap: anywhere;
}

.likeness-panel-close {
  align-self: start;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid var(--lk-line);
  border-radius: 50%;
  background: transparent;
  color: var(--lk-text);
  font: 400 1.25rem/1 var(--lk-serif);
  cursor: pointer;
  box-shadow: none;
}

.likeness-panel-close:hover,
.likeness-panel-close:focus-visible {
  background: var(--lk-panel);
  color: var(--lk-text);
}

.likeness-cluster {
  list-style: none;
  margin: 0;
  padding: 0.9rem 1rem 0.4rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
  gap: 0.6rem;
}

.likeness-cluster-item {
  position: relative;
  max-width: none;
  margin: 0;
  min-width: 0;
}

.likeness-cluster-link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  height: 100%;
  padding: 0.65rem 2.4rem 0.7rem 0.65rem;
  border: 1px solid var(--lk-line);
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--lk-panel) 75%, transparent);
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.likeness-cluster-link:hover,
.likeness-cluster-link:focus-visible {
  border-color: color-mix(in srgb, var(--lk-link) 50%, var(--lk-line));
  transform: translateY(-1px);
}

.likeness-cluster-link:focus-visible {
  outline: 2px solid var(--lk-link);
  outline-offset: 2px;
}

.likeness-cluster-seal {
  line-height: 0;
}

.likeness-cluster-text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.likeness-cluster-title {
  font: 400 1rem/1.25 var(--lk-serif);
  overflow-wrap: anywhere;
}

.likeness-cluster-why {
  font: italic 400 0.84rem/1.35 var(--lk-serif);
  color: var(--lk-muted);
}

/* Not found yet: the seal is whole (a likeness is never hidden), the words wait. */
.likeness-cluster-item[data-discovery='veiled'] .likeness-cluster-link {
  border-style: dashed;
  background: transparent;
}
.likeness-cluster-item[data-discovery='veiled'] .likeness-cluster-title {
  font-style: italic;
  color: var(--lk-muted);
}
.likeness-cluster-item[data-discovery='glimpsed'] .likeness-cluster-link {
  border-style: dashed;
}

.likeness-cluster-walk {
  position: absolute;
  inset-block-start: 0.45rem;
  inset-inline-end: 0.45rem;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid var(--lk-line);
  border-radius: 50%;
  background: var(--lk-paper);
  color: var(--lk-text);
  font: 400 1rem/1 var(--lk-mono);
  cursor: pointer;
  box-shadow: none;
}

.likeness-cluster-walk:hover,
.likeness-cluster-walk:focus-visible {
  border-color: var(--lk-link);
  background: var(--lk-panel);
  color: var(--lk-text);
}

.likeness-panel-empty,
.likeness-panel-foot {
  margin: 0;
  padding: 0.4rem 1.1rem 1rem;
  font: italic 400 0.86rem/1.45 var(--lk-serif);
  color: var(--lk-muted);
}

.likeness-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 1.1rem 0.2rem;
}

.likeness-trail-step {
  padding: 0.15rem;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  line-height: 0;
  cursor: pointer;
  box-shadow: none;
}

.likeness-trail-step:hover,
.likeness-trail-step:focus-visible,
.likeness-trail-step.is-here {
  border-color: var(--lk-line);
  background: var(--lk-panel);
}

/* A phone: the cluster rises as a sheet from the foot of the screen. */
@media (max-width: 40rem) {
  .likeness-panel {
    width: 100%;
    max-width: 100%;
    max-height: 86dvh;
    margin: auto 0 0;
    border-radius: 0.8rem 0.8rem 0 0;
    border-bottom: 0;
  }
  .likeness-panel-head {
    gap: 0.65rem;
    padding: 0.85rem 0.85rem 0.75rem 1rem;
  }
  .likeness-panel-seal .likeness-mark {
    width: 48px;
    height: 48px;
  }
  .likeness-cluster {
    grid-template-columns: 1fr;
    padding-inline: 0.85rem;
  }
}

/* ─── The atlas strip, from anywhere ───────────────────────────────── */

.likeness-atlas-strip {
  display: grid;
  gap: 0.45rem;
  margin-block: 0.6rem;
}

.likeness-atlas-strip-label {
  justify-self: start;
  font: 400 0.7rem/1.3 var(--lk-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lk-muted);
  text-decoration: none;
}

.likeness-atlas-strip-label:hover,
.likeness-atlas-strip-label:focus-visible {
  color: var(--lk-link);
  text-decoration: underline;
}

.likeness-atlas-strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr));
  gap: 0.55rem;
  max-width: 26rem;
}

.likeness-atlas-strip-item {
  max-width: none;
  margin: 0;
  min-width: 0;
}

.likeness-atlas-seed {
  display: grid;
  gap: 0.3rem;
  color: inherit;
  text-decoration: none;
}

.likeness-atlas-figure {
  margin: 0;
  aspect-ratio: 1;
  border-radius: 0.35rem;
  border: 1px solid var(--lk-line);
}

.likeness-atlas-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.likeness-atlas-seed:focus-visible {
  outline: 2px solid var(--lk-link);
  outline-offset: 3px;
  border-radius: 0.35rem;
}

.likeness-atlas-caption {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font: 400 0.72rem/1.2 var(--lk-mono);
  color: var(--lk-muted);
}

.likeness-atlas-sigil {
  font-weight: 400;
  color: var(--lk-hue, var(--lk-text));
}

/* ─── The calm cut ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-discovery='found'][data-discovery-fresh],
  [data-discovery='found'][data-discovery-fresh] > .likeness-asset-seal,
  .likeness-panel[open] {
    animation: none;
  }
  :is(img, picture, svg)[data-discovery='glimpsed'],
  .likeness-asset[data-discovery='glimpsed'] > :is(img, picture, svg),
  .likeness-cluster-link,
  .likeness-find {
    transition: none;
  }
  .likeness-cluster-link:hover,
  .likeness-cluster-link:focus-visible {
    transform: none;
  }
}