/* The clip glance card (inbox) and the sift. One deck component
   on both surfaces: the phone wraps it in blurred glass over the clip, the
   desktop seats it beside the clip. */

.clip-glance-prose {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 0.95rem;
  line-height: 1.62;
}

.clip-glance-source {
  color: var(--bs-secondary-color);
}

.clip-glance-bar {
  display: flex;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  flex: 1 1 auto;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}

.clip-glance-bar span {
  display: block;
  height: 100%;
}

.clip-glance-look {
  flex: 0 0 6rem;
}

/* ---- sift layout: one component, two frames ---- */

.clip-sift-prose {
  padding: 1.25rem 1.5rem 1.5rem;
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 1.02rem;
  line-height: 1.85;
}

.clip-sift-foot {
  border-top: 1px solid var(--bs-border-color);
  padding: 0.55rem 0.95rem;
  font-size: 0.76rem;
  color: var(--bs-secondary-color);
  min-height: 2.2rem;
}

.clip-sift-keyhint {
  margin-top: 0.7rem;
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.7rem;
}

@media (min-width: 992px) {
  .clip-sift-room {
    display: grid;
    grid-template-columns: 1fr minmax(22rem, 30rem);
    gap: 2.5rem;
    align-items: start;
  }

  .clip-sift-prose {
    font-size: 1.12rem;
    max-height: 33rem;
    overflow-y: auto;
    scroll-behavior: smooth;
  }

  .clip-sift-deck {
    position: sticky;
    top: 1rem;
  }
}

/* ---- the lit prose ---- */

.seg {
  border-radius: 2px;
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.seg.entity-marked {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--suggestion-entity) 32%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.clip-sift-prose.pinned {
  color: color-mix(in srgb, var(--bs-body-color) 36%, transparent);
}

.clip-sift-prose.pinned .seg.entity-marked {
  text-decoration-color: transparent;
}

.seg.hov {
  background-color: color-mix(in srgb, var(--lit, transparent) 11%, transparent);
}

.seg.lit {
  background-color: color-mix(in srgb, var(--lit, transparent) 16%, transparent);
  color: var(--bs-body-color);
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--lit, transparent) 55%, transparent);
}

.seg.lit.valuelit {
  background-color: color-mix(in srgb, var(--lit, transparent) 34%, transparent);
  font-weight: 600;
}

/* ---- the deck ---- */

.clip-sift-deckhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.clip-sift-heading {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.clip-sift-pips {
  display: flex;
  gap: 3px;
  margin-bottom: 0.75rem;
}

.clip-sift-pip {
  flex: 1 1 auto;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bs-body-color) 16%, transparent);
}

.clip-sift-pip.kept { background: color-mix(in srgb, var(--bs-success) 70%, transparent); }
.clip-sift-pip.dropped { background: color-mix(in srgb, var(--bs-secondary-color) 55%, transparent); }
.clip-sift-pip.later { background: color-mix(in srgb, var(--bs-primary) 55%, transparent); }
.clip-sift-pip.now { background: color-mix(in srgb, var(--bs-body-color) 62%, transparent); }

/* No overflow value but visible here: anything else clips the card's shadow
   flush with its bottom edge and the deck reads as a compartment. Tall cards
   are bounded by capping the row list instead. */
.clip-sift-stage {
  overflow: visible;
}

.clip-sift-card {
  position: relative;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.14);
  touch-action: pan-y;
  --fam: var(--suggestion-entity);
}

.clip-sift-card.stacked {
  box-shadow:
    0 10px 30px rgb(0 0 0 / 0.14),
    0 -8px 0 -2px var(--bs-body-bg), 0 -9px 0 -2px var(--bs-border-color),
    0 -15px 0 -4px var(--bs-body-bg), 0 -16px 0 -4px var(--bs-border-color);
}

.clip-sift-card-word { --fam: var(--suggestion-word); }
.clip-sift-card-keepsake { --fam: var(--suggestion-keepsake); }
.clip-sift-card-entity { --fam: var(--suggestion-entity); }
.clip-sift-card-seed { --fam: var(--suggestion-seed); }

.clip-sift-cardhead {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  transition: background-color 0.14s ease;
}

@media (hover: hover) {
  .clip-sift-cardhead:hover {
    background: color-mix(in srgb, var(--fam) 9%, var(--bs-tertiary-bg));
  }
}

.clip-sift-mono {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--fam);
  font-family: Georgia, serif;
}

.clip-sift-name {
  font-weight: 600;
  font-size: 1.03rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
  flex: 1 1 auto;
}

/* A subject that is also a new entity says what kind of thing it is */
.clip-sift-kind {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  flex: 0 0 auto;
  color: var(--fam);
  font-weight: 600;
}

.clip-sift-n {
  font-size: 12px;
  color: var(--bs-secondary-color);
  flex: 0 0 auto;
}

/* ---- eyebrow rows, verdict on the right where the thumb rests ---- */

.clip-sift-rows {
  max-height: 392px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Only when there is genuinely more below: a clipped line should read as
   more to come, not as a rendering fault. */
.clip-sift-rows.scrolls {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}

.clip-sift-row {
  display: flex;
  align-items: stretch;
  min-height: 52px;
  position: relative;
  background: var(--bs-body-bg);
  border-top: 1px solid color-mix(in srgb, var(--bs-border-color) 55%, transparent);
}

.clip-sift-row:first-child {
  border-top: none;
}

.clip-sift-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--fam);
  opacity: 0;
  transition: opacity 0.14s ease;
  z-index: 3;
}

.clip-sift-row.sel::before { opacity: 1; }
.clip-sift-row.sel { background: color-mix(in srgb, var(--fam) 7%, var(--bs-body-bg)); }

@media (hover: hover) {
  .clip-sift-row:not(.sel):hover {
    background: color-mix(in srgb, var(--fam) 4%, var(--bs-body-bg));
  }
}

.clip-sift-rowbody {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  padding: 8px 4px 9px 14px;
  -webkit-tap-highlight-color: transparent;
}

.clip-sift-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bs-secondary-color) 92%, transparent);
  margin-bottom: 1px;
}

.clip-sift-headline {
  display: block;
  font-size: 1.01rem;
  font-weight: 600;
  color: var(--bs-body-color);
  line-height: 1.3;
}

.clip-sift-headline.clip-sift-quote {
  font-family: Georgia, "Iowan Old Style", serif;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* dropped: the row goes quiet and the mark becomes a way back */
.clip-sift-row.out { background: color-mix(in srgb, var(--bs-secondary-color) 7%, var(--bs-body-bg)); }

.clip-sift-row.out .clip-sift-headline {
  text-decoration: line-through;
  color: color-mix(in srgb, var(--bs-body-color) 42%, transparent);
}

.clip-sift-row.out .clip-sift-eyebrow {
  color: color-mix(in srgb, var(--bs-secondary-color) 55%, transparent);
}

/* where the kept rows end and the dropped ones begin */
.clip-sift-row.firstout { border-top: 1px solid var(--bs-border-color); }

.clip-sift-rowdrop {
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  font-size: 15px;
  color: color-mix(in srgb, var(--bs-secondary-color) 38%, transparent);
  transition: color 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .clip-sift-row:hover .clip-sift-rowdrop {
    color: color-mix(in srgb, var(--bs-secondary-color) 72%, transparent);
  }

  .clip-sift-rowdrop:hover {
    color: var(--bs-body-color);
  }
}

.clip-sift-row.out .clip-sift-rowdrop { color: var(--bs-primary); }

.clip-sift-cnote {
  margin: 4px 14px 11px;
  font-size: 0.74rem;
  color: var(--bs-secondary-color);
  display: flex;
  gap: 6px;
  align-items: baseline;
  line-height: 1.45;
}

.clip-sift-cnote b { color: var(--bs-body-color); }

.clip-sift-stamp {
  position: absolute;
  top: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid currentColor;
  border-radius: 8px;
  padding: 3px 9px;
  opacity: 0;
  z-index: 5;
  background: var(--bs-body-bg);
}

.clip-sift-stamp-keep { right: 16px; color: var(--bs-success); transform: rotate(9deg); }
.clip-sift-stamp-drop { left: 16px; color: var(--bs-secondary-color); transform: rotate(-9deg); }

.clip-sift-bar {
  display: flex;
  gap: 10px;
  margin-top: 1rem;
}

.clip-sift-tap {
  min-height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.clip-sift-tap-drop,
.clip-sift-tap-later {
  flex: 0 0 74px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  font-size: 17px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.05);
}

.clip-sift-tap-later { color: var(--bs-body-color); }

.clip-sift-tap-keep {
  flex: 1 1 auto;
  font-weight: 500;
}

/* Glass, not a lid: on a phone the deck hovers over the clip and the prose
   goes out of focus beneath it rather than bleaching out. Last in the file
   so the frame's overrides outrank the component's own display rules. */
@media (max-width: 991.98px) {
  .clip-sift-deck {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    padding: 3.5rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: linear-gradient(
      to bottom,
      transparent 0,
      color-mix(in srgb, var(--bs-body-bg) 55%, transparent) 2.75rem,
      color-mix(in srgb, var(--bs-body-bg) 62%, transparent) 6rem
    );
    -webkit-backdrop-filter: blur(20px) saturate(1.7);
    backdrop-filter: blur(20px) saturate(1.7);
  }

  .clip-sift-foot,
  .clip-sift-keyhint,
  .clip-sift-deckhead {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clip-sift-card,
  .clip-sift-row,
  .seg {
    transition: none !important;
  }
}

/* ---- capturing a clip from prose ----
   The selection menu, the link the clip leaves behind, and the little
   celebration around it. Lives here rather than beside the narrative
   because every surface with clippable prose wears it. */

.clip-intent-menu {
  position: fixed;
  z-index: 1050;
  white-space: nowrap;
  gap: .25rem;
}

/* The sponge absorbs it: a clipped paragraph squishes and rebounds,
   bulging sideways as it compresses, in time with the confetti */
.narrative-clip-squish {
  animation: clipSquish 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes clipSquish {
  35% { transform: scale(1.01, 0.94); }
}

a.narrative-clip {
  background-color: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 2px;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 0.15em;
  cursor: pointer;
  transition: background-color 0.15s;
}

a.narrative-clip:hover {
  background-color: color-mix(in srgb, var(--accent) 25%, transparent);
  color: inherit;
}

/* Clip highlight shimmer */
.narrative-clip-shimmer {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 35%,
    color-mix(in srgb, var(--accent) 40%, transparent) 50%,
    transparent 65%,
    transparent 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  animation: clip-shimmer 1s ease-out;
}

@keyframes clip-shimmer {
  100% {
    background-position: -50% 0;
  }
}

/* Question intent: inline input anchored to the selection */
.narrative-question-box {
  position: fixed;
  z-index: 1050;
  flex-direction: column;
  width: min(440px, calc(100vw - 2rem));
  background: var(--bs-body-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 80%, transparent);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  overflow: hidden;
}

.narrative-question-box input,
.narrative-question-box textarea {
  font-size: 0.9rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: none;
  background: transparent;
  color: var(--bs-body-color);
  outline: none;
}

/* Prediction textareas auto-grow from one line via JS, never by hand;
   the lifted card background sets the field apart from the box around it */
.narrative-question-box textarea {
  resize: none;
  overflow-y: hidden;
  width: auto;
  align-self: stretch;
  margin: 0.4rem 0.65rem 0.1rem;
  padding: 0.4rem 0.55rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
}

.narrative-question-box textarea:focus {
  border-color: var(--accent);
}

.narrative-question-hint {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  padding: 0.3rem 0.65rem;
  border-top: 1px solid var(--bs-border-color);
  background: color-mix(in srgb, var(--bs-emphasis-color) 3%, transparent);
}

.narrative-question-hint kbd {
  font-size: 0.7rem;
}

/* Selection held visible while the question input is open */
.narrative-clip-pending {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 2px;
}

/* Clip confetti */
.clip-confetti {
  position: fixed;
  width: 6px;
  height: 6px;
  pointer-events: none;
  animation: clip-confetti-burst 0.6s ease-out forwards;
}

.clip-confetti-circle {
  border-radius: 50%;
}

.clip-confetti-square {
  border-radius: 1px;
}

.clip-confetti-star {
  width: 0;
  height: 0;
  background: none !important;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 6px solid currentColor;
  color: inherit;
}

@keyframes clip-confetti-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.3);
  }
}