.discovery-panel {
  position: relative;
  isolation: isolate;
  margin: 4px 0 16px;
  overflow: visible;
  padding: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}

.discovery-panel[hidden] {
  display: none;
}

/*
 * The animated map, suppressed in the production conversation.
 *
 * APPROVED VISUAL MASTER. The reference draws "how it connects" as the bigger
 * picture inside the result artifact -- the Finding's own map nodes and its
 * own core -- and having both on the page would put two answers to the same
 * question one under the other.
 *
 * Suppressed, not removed, and the difference matters. The panel still renders
 * and still runs its whole ceremony: it is what the continuation panel waits
 * on, through `.map-closing.is-in`, and panel.js falls back to a 390px width
 * when it cannot measure one, so nothing about that handover changes. Every
 * claim, timing and behaviour is intact and a decision to bring it back is one
 * rule away. Scoped to this page for the same reason the guide card's
 * suppression is: map.css is shared and the lab pages are not this decision.
 */
.conversation .discovery-panel {
  display: none;
}

.finding-surface {
  position: relative;
  overflow: hidden;
  padding: 24px 22px 20px;
  border-radius: 30px;
  background:
    radial-gradient(88% 78% at 6% 0%, rgba(255, 226, 164, 0.58), transparent 56%),
    radial-gradient(78% 68% at 100% 10%, rgba(186, 160, 220, 0.42), transparent 58%),
    radial-gradient(70% 48% at 50% 100%, rgba(255, 248, 236, 0.5), transparent 62%),
    linear-gradient(180deg, rgba(255, 250, 242, 0.97), rgba(247, 239, 228, 0.94));
  box-shadow:
    0 18px 44px rgba(90, 68, 48, 0.07),
    0 0 0 1px rgba(255, 255, 255, 0.82) inset,
    0 0 64px rgba(240, 215, 168, 0.28);
}

.finding-bloom {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0;
}

.finding-bloom.is-gold {
  top: -18%;
  left: -12%;
  width: 58%;
  height: 62%;
  background: rgba(240, 215, 168, 0.42);
}

.finding-bloom.is-lavender {
  top: -8%;
  right: -14%;
  width: 54%;
  height: 58%;
  background: rgba(186, 160, 220, 0.32);
}

.finding-surface.is-enter .finding-bloom.is-gold {
  animation: bloom-drift 900ms ease 1 both;
}

.finding-surface.is-enter .finding-bloom.is-lavender {
  animation: bloom-drift 980ms 80ms ease 1 both;
}

.finding-clarity-glint {
  position: absolute;
  top: 46%;
  left: 50%;
  z-index: 4;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  background: #fff8ea;
  opacity: 0;
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  filter: drop-shadow(0 0 10px rgba(255, 248, 234, 1)) drop-shadow(0 0 16px rgba(240, 215, 168, 1));
  pointer-events: none;
}

.finding-clarity-glint.is-on {
  animation: clarity-glint 420ms ease 1 both;
}

.finding-surface::before,
.finding-surface::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.finding-surface::before {
  top: 18px;
  right: 24px;
  width: 8px;
  height: 8px;
  background: #fff8ea;
  box-shadow: 0 0 12px 2px rgba(240, 215, 168, 0.95);
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  opacity: 0.55;
}

.finding-surface.is-enter::before {
  animation: none;
}

.finding-surface::after {
  right: 52px;
  bottom: 36px;
  width: 5px;
  height: 5px;
  background: #f4ecff;
  box-shadow: 0 0 8px 1px rgba(196, 178, 226, 0.9);
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  opacity: 0.45;
}

.finding-surface.is-enter::after {
  animation: none;
}

.finding-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: #c9a56a;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.finding-kicker svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  filter: drop-shadow(0 0 5px rgba(223, 192, 137, 0.9));
}

.finding-insight {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.42rem, 6.1vw, 1.86rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.2;
}

.finding-support {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.52;
}

.finding-orbs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  margin: 8px 0 10px;
}

.finding-orbs.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.finding-orb {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.finding-orb-sphere {
  width: 54px;
  height: 54px;
  border-radius: 50%;
}

.finding-surface.is-restored .finding-orb-sphere,
.finding-surface.is-settled .finding-orb-sphere,
.finding-surface.is-settled .finding-orb.is-open .finding-orb-sphere {
  animation: orb-breathe 8.8s ease-in-out infinite;
}

.finding-orb.is-open .finding-orb-sphere {
  animation-delay: -3.2s;
}

.finding-orb.is-known .finding-orb-sphere {
  background:
    radial-gradient(circle at 34% 30%, #fffaf0 0%, #f3dcab 28%, #d4b06a 70%, #c49a4e 100%);
  box-shadow:
    0 0 16px 5px rgba(240, 215, 168, 0.48),
    0 0 36px 10px rgba(223, 192, 137, 0.24),
    inset 0 -8px 14px rgba(160, 110, 40, 0.1);
}

.finding-orb.is-open .finding-orb-sphere {
  background:
    radial-gradient(circle at 34% 30%, #faf5ff 0%, #ccbae8 30%, #8f6fbe 74%, #6d5a96 100%);
  box-shadow:
    0 0 16px 5px rgba(196, 178, 226, 0.44),
    0 0 36px 12px rgba(143, 111, 190, 0.24),
    inset 0 -8px 14px rgba(70, 50, 110, 0.14);
}

.finding-orb-kicker {
  margin: 0;
  color: #8a8176;
  font-size: 0.68rem;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.finding-orb-name {
  margin: -4px 0 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.finding-bridge {
  position: relative;
  display: grid;
  height: 54px;
  place-items: center;
}

.finding-bridge-line {
  position: absolute;
  top: 50%;
  left: 6%;
  width: 88%;
  height: 1.6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(212, 176, 106, 0.92), rgba(196, 183, 222, 0.92));
  box-shadow: 0 0 8px rgba(240, 215, 168, 0.45);
  transform: translateY(-50%) scaleX(1);
  transform-origin: left center;
}

.finding-surface.is-enter .finding-bridge-line {
  transform: translateY(-50%) scaleX(0);
}

.finding-bridge-svg {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 28px;
  overflow: visible;
}

.finding-bridge-path {
  fill: none;
  stroke: none;
}

.finding-traveler {
  display: none;
  pointer-events: none;
}

.finding-traveler.is-active {
  display: inline;
}

.finding-traveler-core {
  fill: #fff8ea;
  filter: drop-shadow(0 0 2.4px rgba(255, 248, 234, 1)) drop-shadow(0 0 6px rgba(240, 215, 168, 0.9));
}

.finding-traveler-halo {
  fill: rgba(240, 215, 168, 0.55);
}

.finding-traveler-tail {
  fill: rgba(255, 248, 234, 0.5);
}

.finding-surface.is-enter .finding-orb {
  opacity: 0;
}

.finding-surface.is-enter .finding-orb.is-shown {
  opacity: 1;
  animation: orb-arrive 420ms ease both;
}

.finding-surface.is-settled .finding-bridge-line,
.finding-surface.is-restored .finding-bridge-line {
  transform: translateY(-50%) scaleX(1);
}

.finding-surface.is-settled .finding-orb,
.finding-surface.is-restored .finding-orb {
  opacity: 1;
}

.finding-orb.is-open.is-receive .finding-orb-sphere {
  animation: orb-receive 320ms ease 1 both;
}

.finding-surface.is-clarity .finding-bloom.is-gold {
  opacity: 0.55;
}

.finding-surface.is-clarity .finding-bloom.is-lavender {
  opacity: 0.42;
}

.finding-surface.is-clarity {
  animation: finding-click 380ms ease 1 both;
}

.finding-footer {
  margin: 16px 10px 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.48;
  text-align: center;
}

.finding-pages {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
}

.finding-pages i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(139, 122, 168, 0.28);
}

.finding-pages i.is-on {
  background: #c9a56a;
  box-shadow: 0 0 8px rgba(223, 192, 137, 0.85);
}

.finding-spark {
  fill: #fff8ea;
  filter: drop-shadow(0 0 5px rgba(240, 215, 168, 1));
}

.finding-surface.is-enter {
  animation: finding-enter 520ms cubic-bezier(0.22, 0.8, 0.28, 1) both;
}

.finding-surface.is-enter .finding-kicker {
  animation: finding-kicker-in 380ms 180ms ease both;
}

.finding-surface.is-enter .finding-insight {
  animation: finding-insight-in 480ms 360ms ease both;
}

.finding-surface.is-enter .finding-support {
  animation: finding-support-in 400ms 500ms ease both;
}

.finding-surface.is-enter .finding-footer,
.finding-surface.is-enter .finding-pages {
  animation: finding-support-in 360ms 980ms ease both;
}

.finding-surface.is-refine .finding-insight,
.finding-surface.is-refine .finding-orb-name,
.finding-surface.is-refine .finding-support {
  animation: finding-clarify 700ms ease both;
}

.world-root {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.world-head {
  position: relative;
  z-index: 3;
  padding: 4px 8px 10px;
}

.world-kicker {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 5vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.world-scene {
  position: relative;
  z-index: 1;
  min-height: 168px;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(70% 62% at 82% 18%, rgba(196, 178, 226, 0.18), transparent 62%),
    linear-gradient(180deg, rgba(255, 250, 244, 0.55), rgba(246, 239, 230, 0.35));
}

.world-sky {
  display: none;
}

.world-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.world-region.is-loop {
  fill: rgba(196, 178, 226, 0.14);
}

.world-region.is-core {
  fill: rgba(157, 196, 191, 0.16);
}

.world-region.is-tension {
  fill: rgba(223, 192, 137, 0.12);
}

.world-path {
  fill: none;
  stroke: rgba(139, 122, 168, 0.45);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.world-path.is-open,
.world-path.is-unresolved_from {
  stroke: url(#bium-open-fade);
  stroke-dasharray: 3 8;
}

.world-anchor {
  fill: #cbb48a;
}

.world-anchor.is-core {
  fill: #b7a8c9;
}

.world-anchor.is-emotion {
  fill: #d4a07a;
}

.world-spark {
  fill: #f0d7a8;
  filter: drop-shadow(0 0 8px rgba(240, 215, 168, 0.9));
}

.world-labels {
  position: relative;
  z-index: 2;
  height: 100%;
}

.world-label {
  position: absolute;
  box-sizing: border-box;
  padding: 0 2px;
  color: var(--ink);
  font-size: clamp(0.92rem, 2.8vw, 1.02rem);
  font-weight: 500;
  line-height: 1.32;
}

.world-label.is-core {
  font-family: var(--display);
}

.world-finding-text,
.world-caption,
.world-companion {
  position: relative;
  z-index: 2;
  max-width: 38rem;
  margin: 12px 8px 0;
}

.world-caption {
  color: var(--muted);
  line-height: 1.45;
}

.world-companion {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.world-companion-row {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

.world-companion-row span {
  display: block;
  margin-bottom: 2px;
  color: #8b7aa8;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.world-root[data-phase="at-first"] .world-companion-row:not(.is-at-first),
.world-root[data-phase="changed"] .world-companion-row:not(.is-at-first):not(.is-changed),
.world-root[data-phase="now"] .world-companion-row.is-open {
  display: none;
}

@keyframes finding-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes finding-kicker-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@keyframes finding-insight-in {
  from { opacity: 0.12; filter: blur(2px); }
  to { opacity: 1; filter: none; }
}

@keyframes finding-support-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes finding-clarify {
  from { opacity: 0.62; }
  to { opacity: 1; }
}

@keyframes orb-arrive {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes orb-breathe {
  0%,
  100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

@keyframes orb-receive {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.025); filter: brightness(1.08); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes finding-click {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.07); }
  100% { filter: brightness(1); }
}

@keyframes bloom-drift {
  0% { opacity: 0; transform: translate(0, 0) scale(0.92); }
  55% { opacity: 0.55; transform: translate(6%, 8%) scale(1); }
  100% { opacity: 0.22; transform: translate(10%, 12%) scale(1.02); }
}

@keyframes glint-once {
  0% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.12) rotate(12deg); }
  100% { opacity: 0.55; transform: scale(1) rotate(18deg); }
}

@keyframes clarity-glint {
  0% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  35% { opacity: 1; transform: scale(1.18) rotate(16deg); }
  100% { opacity: 0; transform: scale(0.8) rotate(28deg); }
}

@keyframes line-draw {
  from { transform: translateY(-50%) scaleX(0); }
  to { transform: translateY(-50%) scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .finding-surface.is-enter,
  .finding-surface.is-enter .finding-kicker,
  .finding-surface.is-enter .finding-insight,
  .finding-surface.is-enter .finding-support,
  .finding-surface.is-enter .finding-orb,
  .finding-surface.is-enter .finding-footer,
  .finding-surface.is-enter .finding-pages,
  .finding-surface.is-enter .finding-bridge-line,
  .finding-surface.is-enter .finding-bloom,
  .finding-surface.is-enter .finding-bridge-path,
  .finding-surface.is-enter .finding-traveler-core,
  .finding-surface.is-enter .finding-traveler-halo,
  .finding-surface.is-enter .finding-traveler-tail,
  .finding-surface.is-enter .finding-clarity-glint,
  .finding-surface.is-enter::before,
  .finding-surface.is-enter::after,
  .finding-surface.is-refine .finding-insight,
  .finding-spark,
  .finding-orb-sphere,
  .world-spark {
    animation: none !important;
  }

  .finding-surface.is-enter .finding-bridge-line {
    transform: translateY(-50%) scaleX(1);
    opacity: 1;
  }

  .finding-surface.is-enter .finding-orb {
    opacity: 1;
  }
}

html[data-bium-motion="reduce"] .finding-surface.is-enter,
html[data-bium-motion="reduce"] .finding-surface.is-enter .finding-kicker,
html[data-bium-motion="reduce"] .finding-surface.is-enter .finding-insight,
html[data-bium-motion="reduce"] .finding-surface.is-enter .finding-bloom,
html[data-bium-motion="reduce"] .finding-surface.is-enter .finding-bridge-path,
html[data-bium-motion="reduce"] .finding-surface.is-enter .finding-traveler-core,
html[data-bium-motion="reduce"] .finding-clarity-glint,
html[data-bium-motion="reduce"] .finding-spark,
html[data-bium-motion="reduce"] .finding-orb-sphere,
html[data-bium-motion="reduce"] .world-spark {
  animation: none !important;
}

html[data-bium-restore="1"] .finding-traveler,
.finding-surface.is-restored .finding-traveler,
.finding-surface.is-settled .finding-traveler {
  display: none;
}


/*
 * What we found.
 *
 * APPROVED VISUAL MASTER. This section reproduces a reference the product
 * owner approved rather than interpreting it, and it replaced the previous
 * presentation outright rather than being layered over it. One artifact: its
 * own head, one card per semantic level, the bigger picture underneath, and
 * the continuation panel after that -- read top to bottom it is a single
 * composed thing, not a stack of components that happen to be adjacent.
 *
 * Two earlier visual decisions are superseded here and the design decision
 * ledger records both. "Not four cards" forbade any container on a level;
 * "no fill, no border, no card" forbade any surface at all. What those rules
 * were protecting is real and is still protected: the levels are NOT equals.
 * `now` is the only line at full ink, it is the largest, and it is the only
 * one lifted above the rest. A card system is not the failure those rules
 * named -- five identically weighted filed cards is, and this is not that.
 *
 * Every mix below was measured rather than chosen by eye. Each level's label
 * was darkened until it cleared 4.5:1 against its own tint: the reference's
 * hues at reference saturation measured 3.3 to 4.3 and would have made the one
 * word naming each beat the least readable thing on the card.
 */
.finding-ledger {
  /* One shape for the whole artifact. Every rounded thing in this section
   * takes its radius from here or from --card-radius, so nothing can drift
   * into a different card language later. */
  --panel-radius: 30px;
  --card-radius: 26px;
  /* The reference sets its copy in a dark navy, not the warm ink the rest of
   * the application uses. Scoped to the artifact so the palette is unchanged
   * everywhere else. */
  --result-ink: #211f4b;
  --result-muted: #86829a;

  position: relative;
  width: 100%;
  max-width: 30rem;
  margin: 18px auto 6px;
  padding: 0;
  color: var(--result-ink);
  font-family: var(--sans);
}

.finding-ledger[hidden] {
  display: none;
}

/* The ambient wash the reference carries behind the artifact: lavender at the
 * top right, a warmer pink low and left, both very faint. Behind everything
 * and never over it. */
.finding-ledger::before {
  position: absolute;
  z-index: 0;
  inset: -40px -18px -30px;
  background:
    radial-gradient(58% 32% at 88% 4%, rgb(206 186 240 / 30%), transparent 70%),
    radial-gradient(52% 26% at 6% 34%, rgb(245 205 214 / 22%), transparent 72%);
  content: "";
  pointer-events: none;
}

.finding-ledger > * {
  position: relative;
  z-index: 1;
}

.ledger-head,
.ledger-line,
.picture {
  opacity: 0;
  transform: translateY(9px);
  transition:
    opacity 620ms ease,
    transform 620ms ease;
}

.ledger-head.is-in,
.ledger-line.is-in,
.picture.is-in {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------- head */

/*
 * The brand line has the top row; the title and the subtitle have the row
 * under it to themselves. The first track is empty now that the wordmark is
 * gone and is kept rather than collapsed, because it is what holds the brand
 * line off the title -- the row, not the column, is the thing doing the work.
 *
 * The brand line used to be lifted out of the flow and pinned to the head's
 * top-right corner, which is fine while the head is 60rem wide and the title
 * ends 300px short of it. At the conversation's own measure it does not: the
 * title runs to within 36px of where the brand sits and the two are a font
 * fallback away from touching. Two grid rows say the same thing the absolute
 * corner said -- these two are opposite each other, the title is under both
 * -- and cannot be made to collide by a longer title or a wider glyph.
 */
.ledger-head {
  display: grid;
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 16px;
  margin: 0 0 18px;
  padding: 0 4px;
}

/* The line the product says about itself. Two lines in the reference and two
 * here: it is a statement, not a tagline that wraps. It had the wordmark
 * opposite it until the wordmark was removed; the row is still its own, so
 * nothing about where it sits changes. */
.ledger-brand {
  grid-column: 2;
  justify-self: end;
  margin: 0;
  color: color-mix(in srgb, var(--result-muted) 82%, transparent);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  line-height: 1.55;
  text-align: right;
  text-transform: uppercase;
}

.ledger-brand span {
  display: block;
}

/*
 * The section's name, and the most confident thing on the screen.
 *
 * Set in the sans rather than the display serif, which the reference is
 * explicit about: this heading is weight and presence, not editorial voice.
 * The words are the Consumer Experience Constitution's own and are written
 * here in its sentence case -- the reference's title case is done by the
 * stylesheet, so changing how it looks never quietly changes what it says.
 */
.ledger-title {
  grid-column: 1 / -1;
  margin: 14px 0 0;
  color: var(--result-ink);
  font-family: var(--sans);
  font-size: 2.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-transform: capitalize;
}

.ledger-subtitle {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  color: var(--result-muted);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.4;
}

/* ------------------------------------------------------------------ cards */

.ledger-line {
  display: grid;
  position: relative;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  min-height: 104px;
  margin: 14px 0 0;
  padding: 22px 18px;
  border-radius: var(--card-radius);
  background: var(--tint);
  box-shadow:
    0 1px 2px rgb(40 32 64 / 4%),
    0 16px 34px -26px rgb(40 32 64 / 30%);
}

/* The circular mark. Colour never carries the meaning on its own -- the label
 * beside it says which beat this is -- so a reader who cannot separate the
 * hues loses a shortcut and nothing else. */
.ledger-icon {
  display: grid;
  align-self: start;
  flex: none;
  margin-top: 2px;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: var(--halo);
  box-shadow: 0 6px 14px -8px rgb(40 32 64 / 34%);
}

.ledger-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ledger-icon svg .is-solid {
  fill: var(--accent-ink);
  stroke: none;
}

.ledger-body {
  display: block;
  min-width: 0;
  padding-top: 2px;
}

.ledger-label {
  display: block;
  margin-bottom: 5px;
  color: var(--accent-ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.ledger-text {
  display: block;
  font-size: 1.14rem;
  font-weight: 500;
  line-height: 1.42;
  text-wrap: pretty;
}

/* Decorative only. It repeats the order the levels are already in, so nothing
 * is lost to a reader who never sees it, and it may therefore sit at a
 * contrast the body copy never could. */
.ledger-num {
  align-self: start;
  margin-top: 2px;
  color: var(--accent-ink);
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  opacity: 0.26;
  pointer-events: none;
}

/* Where they started. Secondary to the finding and still their own sentence,
 * so it is read, not skimmed past. */
.ledger-line.is-appeared {
  margin-top: 0;
  color: color-mix(in srgb, var(--result-ink) 90%, transparent);
  --tint: #f2edfd;
  --halo: #ddd2f7;
  --accent-ink: #6b4bb4;
}

/* The decisive thing they said. It is what keeps the finding from reading as
 * the assistant's opinion: this is the line that says the conclusion came
 * from them. */
.ledger-line.is-changed {
  color: color-mix(in srgb, var(--result-ink) 90%, transparent);
  --tint: #fdf0e8;
  --halo: #f9d9c4;
  --accent-ink: #b4501f;
}

/*
 * The landing point, and the one thing that has to be found in a couple of
 * seconds.
 *
 * The reference gives every card the same frame, and that is kept: rank is
 * carried by type and ink, not by a component of its own. This is the only
 * level at full ink, the only one set larger, and the only one lifted -- three
 * quiet differences inside one card language, which is what the superseded
 * rule was actually asking for.
 */
.ledger-line.is-now {
  margin-top: 18px;
  color: var(--result-ink, var(--ink));
  --tint: #eaf5ee;
  --halo: #cbe9d5;
  --accent-ink: #217544;
  box-shadow:
    0 1px 2px rgb(33 117 68 / 6%),
    0 20px 40px -24px rgb(33 117 68 / 34%);
}

.ledger-line.is-now .ledger-text {
  font-size: 1.26rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/*
 * What the finding changes, when the conversation earned it. Rendered only
 * when the model wrote an apply, which is a minority of Findings: absent is
 * the ordinary case, nothing stands in for it, and the numbering closes up.
 *
 * Deliberately a step below the finding: this is orientation, not the
 * discovery, and nobody should mistake which of the two was established.
 */
.ledger-line.is-apply {
  color: color-mix(in srgb, var(--result-ink) 90%, transparent);
  --tint: #fdf4e2;
  --halo: #f7e3ba;
  --accent-ink: #8a6210;
}

/* Uncertainty is preserved, not concluded. It ranks below the finding and it
 * is not a footnote: the one part of the screen that says where the evidence
 * stopped used to be the hardest part to read. */
.ledger-line.is-uncertain {
  color: color-mix(in srgb, var(--result-ink) 90%, transparent);
  --tint: #e9f1fb;
  --halo: #cfe0f7;
  --accent-ink: #2b619f;
}

/* --------------------------------------------------------- bigger picture */

/*
 * How it connects, after what it turned out to be.
 *
 * The nodes are the Finding's own `map` and the conclusion beside them is its
 * own `core`. The thread between them is a decoration and says one thing only:
 * these were reached in this order. Nothing here scores, sizes or places a
 * node, and no node is invented -- a Finding whose map has fewer than two
 * entries gets no picture rather than a picture with one thing in it.
 *
 * Not a graph. No arrowheads, no edge labels, no node the person has to decode
 * -- the reference is explicit that the engineering underneath must not
 * surface, and what is drawn is three or four things and where they led.
 */
.picture {
  position: relative;
  margin: 20px 0 0;
  padding: 26px 24px 28px;
  border-radius: var(--panel-radius);
  background:
    radial-gradient(80% 60% at 12% 0%, rgb(255 255 255 / 70%), transparent 62%),
    linear-gradient(168deg, #fdf6ef 0%, #fbf0e8 58%, #f9ece6 100%);
  box-shadow:
    0 1px 2px rgb(40 32 64 / 4%),
    0 18px 40px -28px rgb(40 32 64 / 30%);
}

.picture-title {
  margin: 0;
  color: color-mix(in srgb, var(--result-ink) 78%, transparent);
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.picture-aside {
  margin: 4px 0 0;
  color: color-mix(in srgb, var(--result-muted) 92%, transparent);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

/*
 * The nodes, one per row, in the order they were reached.
 *
 * They were laid out as `repeat(auto-fit, minmax(120px, 1fr))` with a 10px
 * column gap, and that failed the moment the Result stopped being 60rem wide.
 * Two things went wrong together. A grid item's default `min-width: auto`
 * means it cannot shrink below its own content, so a node whose longest word
 * exceeds a 120px track pushes out of that track and lands on top of its
 * neighbour -- which is why words from separate nodes appeared to merge. And
 * five nodes in three columns is two rows, under a `::before` rule drawn once
 * at `top: 30px` for a single row, so the thread stopped meaning anything.
 *
 * Widening the tracks would only move the breakpoint. What the picture is
 * actually saying is "these were reached in this order" -- an order, not a
 * row -- so each node now owns a full line with the orb as a rail marker and
 * the words beside it, and the thread runs down through the orbs. Five nodes
 * or nine, one word or nine, nothing can collide with anything: the only
 * shared axis is vertical and every node has the whole measure to wrap in.
 */
.picture-nodes {
  display: grid;
  position: relative;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

/*
 * The thread, now running down the orbs instead of across them. It says the
 * one thing it always said -- these were reached in this order -- and in a
 * column that is a truer drawing of an order than a row was. Inset by half an
 * orb at each end so it joins the first and last rather than overshooting.
 */
.picture-nodes::before {
  position: absolute;
  top: 17px;
  bottom: 17px;
  left: 16px;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgb(40 32 64 / 14%) 12%,
    rgb(40 32 64 / 14%) 88%,
    transparent
  );
  content: "";
}

.picture-node {
  display: grid;
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  text-align: left;
}

.picture-orb {
  /* A rail marker now rather than the row's centrepiece, so it reads beside
   * the words instead of over them. */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 92%) 0%, transparent 46%),
    var(--orb);
  box-shadow:
    0 10px 20px -12px rgb(40 32 64 / 46%),
    0 0 0 6px rgb(255 255 255 / 46%);
}

/* Three hues, cycling. They are decoration and carry no meaning: which colour
 * a node gets depends on where it sits, never on what it says. */
.picture-node.is-0 .picture-orb {
  --orb: linear-gradient(160deg, #b49ce8, #8f6fbe);
}

.picture-node.is-1 .picture-orb {
  --orb: linear-gradient(160deg, #f3b6c4, #e08fa4);
}

.picture-node.is-2 .picture-orb {
  --orb: linear-gradient(160deg, #f4d79a, #e0b968);
}

.picture-word {
  /* minmax(0,1fr) on the track plus this is what stops a long word forcing
   * the item wider than its column -- the defect that made neighbouring
   * nodes overlap. */
  min-width: 0;
  overflow-wrap: break-word;
  color: color-mix(in srgb, var(--result-ink) 88%, transparent);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.42;
  text-wrap: pretty;
}

/*
 * What those pieces led to, in the model's own words.
 *
 * Its own surface inside the panel, because the reference makes the point
 * spatially: the nodes are on the ground the panel provides and this sits on
 * top of it. "These pieces led to this" is the whole idea and there is no
 * sentence saying so.
 */
.picture-core {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 20px 0 0;
  padding: 20px 22px 22px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgb(255 255 255 / 88%), rgb(250 244 255 / 82%));
  box-shadow:
    0 1px 2px rgb(40 32 64 / 4%),
    0 14px 30px -22px rgb(40 32 64 / 34%);
  color: var(--result-ink);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.44;
  text-align: center;
  text-wrap: pretty;
}

.picture-spark svg {
  display: block;
  width: 26px;
  height: 26px;
  fill: #e0a93f;
  stroke: none;
}

/* ------------------------------------------------------------- wider than a
 *
 * Desktop is the visual master and it is not the phone column stretched. The
 * artifact takes more room than the conversation; the conversation above it
 * keeps the measure it always had, which is set on the shell rather than here.
 *
 * ONE MEASURE FOR THE WHOLE RESULT FAMILY. What we found, the bigger picture
 * inside it, the question underneath and the continuation below that are one
 * artifact and are bounded once, here, rather than three times in three
 * places. They each carried 60rem against a 30rem transcript -- exactly
 * double, which is what made the Result read as a separate dashboard arriving
 * over the conversation rather than as the thing the conversation produced.
 *
 * 36rem was the first correction and it was not enough: 1.2x still reads as a
 * panel widening out of the column it came from. This is now the transcript's
 * own measure, so the Result is the same column the conversation was in and
 * the only thing that changes down the page is what is in it.
 *
 * 30rem is set in styles.css on .transcript and .composer-row and is the
 * conversation's measure, not a number chosen here. If it moves there, it has
 * to move here in the same commit -- the point of this value is that the two
 * are equal, not that it happens to be 30.
 */
:root {
  --result-measure: 30rem;
}

@media (min-width: 900px) {
  .finding-ledger {
    max-width: var(--result-measure);
    margin: 26px auto 10px;
  }

  .ledger-head {
    padding: 0 8px;
  }

  .ledger-title {
    font-size: 3rem;
  }

  .ledger-subtitle {
    font-size: 1.24rem;
  }

  .ledger-brand {
    font-size: 0.66rem;
  }

  .ledger-line {
    column-gap: 22px;
    margin-top: 18px;
    padding: 30px 34px;
  }

  .ledger-line.is-now {
    margin-top: 22px;
  }

  .ledger-icon {
    width: 72px;
    height: 72px;
  }

  .ledger-icon svg {
    width: 36px;
    height: 36px;
  }

  .ledger-text {
    font-size: 1.3rem;
  }

  .ledger-line.is-now .ledger-text {
    font-size: 1.42rem;
  }

  .ledger-num {
    font-size: 2.6rem;
  }

  .picture {
    margin-top: 26px;
    padding: 32px 36px 34px;
  }

  /*
   * The conclusion sat BESIDE the nodes here, in a two-column body whose
   * left track held every node in one row -- `grid-auto-flow: column`. That
   * arrangement was written against a 60rem Result, and it is the actual
   * cause of the broken picture rather than anything in the base rules: at
   * the conversation's own measure the left track is about 150px, so five
   * nodes get 20px each. The orbs land on top of one another and each
   * caption collapses into a one-character-per-line column, which is what
   * made words from separate nodes read as a single merged block.
   *
   * Five nodes cannot be a readable row inside the conversation's measure,
   * so they are not a row. The body is a stack again -- the nodes in the
   * order they were reached, the conclusion under them -- which says the
   * same thing the two-column version was saying, in the direction this
   * column can actually hold. Nothing about which nodes exist or what they
   * say changes here; only where they sit.
   */
  .picture-body {
    display: block;
  }

  .picture-nodes {
    gap: 16px;
    margin-top: 24px;
  }

  /* It sat beside the nodes and so needed no space above it. It is under
   * them now, and zeroing that margin would run it into the last node. */
  .picture-core {
    margin: 24px 0 0;
    padding: 26px 24px;
  }

  .picture-title {
    font-size: 1.3rem;
  }

  /*
   * It was pulled out of the flow and parked in the panel's top-right, which
   * only works while the panel is wide enough for a title and a caption to
   * share a line. At the conversation's measure it is not: "The bigger
   * picture" runs about 60px past where "How it all connects" starts, and
   * the two sets of letters sit on top of each other. It stays where it is
   * on a phone -- under the title, which is where it reads -- and now does
   * the same here.
   */
  .picture-aside {
    margin-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ledger-head,
  .ledger-line,
  .picture {
    transition: none;
  }
}


/* ------------------------------------------------------------------ carry
 *
 * The door back in. Deliberately not a card, not a grid and not a panel of
 * equals: a short list of lines the person already saw, with the plain way
 * past it directly underneath. It has no state of its own to display.
 */
.carry {
  margin: 1.25rem 0 0;
  padding: 0;
}

.carry-lead {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: color-mix(in oklab, var(--ink) 72%, transparent);
}

.carry-list {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.carry-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.carry-pick {
  align-self: flex-start;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.02rem;
  line-height: 1.35;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}

.carry-pick:hover,
.carry-pick:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.carry-open {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: color-mix(in oklab, var(--ink) 52%, transparent);
}

.carry-drop {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  color: color-mix(in oklab, var(--ink) 42%, transparent);
  cursor: pointer;
}

.carry-drop:hover,
.carry-drop:focus-visible {
  color: color-mix(in oklab, var(--ink) 68%, transparent);
}

.carry-skip {
  align-self: flex-start;
}

/* ------------------------------------------------------------ less stuck?
 *
 * The Result's last quiet line.
 *
 * It has to be answerable without feeling asked. So: no card, no ground of its
 * own, no icon, no number, nothing that would put it in the same visual family
 * as the Finding cards above it -- those are the discovery and this is a
 * question about it, and a reader should never have to work out which is
 * which. Type one step below the subtitle, and the whole thing sits in the
 * space between the artifact and the invitation.
 *
 * Deliberately NOT the pastel card language. Everything else in this section
 * earned a surface by being content; this is an instrument, and an instrument
 * that dressed like the content would be the survey the brief rules out.
 */
.unstuck {
  width: 100%;
  max-width: 30rem;
  margin: 22px auto 0;
  padding: 0 4px;
  color: #6f6a86;
  font-family: var(--sans);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 620ms ease,
    transform 620ms ease;
}

.unstuck[hidden] {
  display: none;
}

.unstuck.is-in {
  opacity: 1;
  transform: none;
}

.unstuck-ask {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
}

.unstuck-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/*
 * Three, and they look like what they are: something to press, quietly. The
 * ring rather than a fill, because a filled row of three would read as the
 * loudest thing on the screen at the exact moment the finding above it should
 * still be.
 */
.unstuck-choice {
  /* A 44px band, because this is a real control and thumbs are not precise.
   * The type stays small; the box around it does not. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgb(111 106 134 / 26%);
  border-radius: 999px;
  background: rgb(255 255 255 / 62%);
  color: #56516f;
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.2;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.unstuck-choice:hover {
  border-color: rgb(111 106 134 / 44%);
  background: #fff;
  color: #3b3757;
}

.unstuck-choice:focus-visible {
  outline: 2px solid rgb(124 92 220 / 55%);
  outline-offset: 2px;
}

/* Chosen, and still legible as one of three rather than as a verdict. */
.unstuck-choice.is-chosen {
  border-color: rgb(124 92 220 / 46%);
  background: #f3eeff;
  color: #4b3a86;
}

/*
 * What hit them, in their words. Quieter than everything above it.
 *
 * Deliberately below the choices in weight as well as in order: the Result is
 * the artifact, the question above is the measurement, and this is a place to
 * say something if there is something to say. Nothing here is required, so
 * nothing here is styled to be answered -- no submit button, no counter, no
 * validation state, and it must never read louder than NOW or the bigger
 * picture. Borrowed type sizes and the same muted ink as the line above.
 */
.unstuck-highlight {
  margin: 14px 0 0;
}

.unstuck-highlight-ask {
  display: block;
  margin: 0;
  color: #56516f;
  font-size: 0.84rem;
}

.unstuck-highlight-hint {
  margin: 2px 0 8px;
  color: color-mix(in srgb, #6f6a86 70%, transparent);
  font-size: 0.76rem;
}

.unstuck-highlight-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgb(111 106 134 / 22%);
  border-radius: 14px;
  background: rgb(255 255 255 / 62%);
  color: #3b3757;
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.45;
  resize: vertical;
  transition:
    border-color 180ms ease,
    background 180ms ease;
}

.unstuck-highlight-input::placeholder {
  color: color-mix(in srgb, #6f6a86 52%, transparent);
}

.unstuck-highlight-input:focus {
  border-color: rgb(124 92 220 / 40%);
  background: #fff;
  outline: none;
}

.unstuck-highlight-input:focus-visible {
  outline: 2px solid rgb(124 92 220 / 55%);
  outline-offset: 2px;
}

/* Said once, and never a second question. */
.unstuck-thanks {
  margin: 10px 0 0;
  color: color-mix(in srgb, #6f6a86 78%, transparent);
  font-size: 0.82rem;
}

@media (min-width: 900px) {
  .unstuck {
    max-width: var(--result-measure);
    margin-top: 26px;
    padding: 0 8px;
  }

  .unstuck-ask {
    font-size: 0.98rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .unstuck {
    transition: none;
  }

  .unstuck-choice {
    transition: none;
  }
}

/*
 * One thing off your mind.
 *
 * APPROVED VISUAL MASTER. The last panel of the artifact and the only place a
 * second problem starts from, so it is the one surface allowed to be an
 * invitation rather than a report. It supersedes "visually plain, no card, no
 * fill": that rule was written to stop this competing with the finding, and
 * what actually happened is that it disappeared.
 *
 * The panel's ground runs down behind the page's own composer, so the two read
 * as one thing. The composer is not moved, wrapped or copied -- there is
 * exactly one textarea on the page and it is not in here.
 *
 * The topic words this panel used to carry are gone with the reference that
 * replaced them. See ownership.js and the design decision ledger.
 */
.ownership {
  --panel-radius: 30px;
  --own-ink: #211f4b;
  /*
   * The character's column. It is a real column now rather than a sprite
   * dropped on top of the copy, so its width is the thing that decides how
   * much room the sentence has and it belongs here with the other knobs.
   *
   * The ceiling is the widest the character is ever drawn, on any screen.
   * It used to be overridden upward past the breakpoint, which made the
   * character LARGER on the wide card than on the narrow one -- backwards,
   * and it left the sentence 63% of the card when the composition wants it
   * nearer 70. One number now, and the widest card is where the sentence
   * gets the most room rather than the least.
   */
  --own-guide-size: clamp(72px, 21vw, 100px);

  /*
   * Two zones: what it asks on the left, who is asking on the right.
   *
   * The character used to be absolutely positioned over the copy and put
   * behind it in the stacking order, on the reasoning that text in front of
   * a decoration can never be blocked by it. What that actually produced is
   * a headline with a face across it: the letters win the pixel and both
   * things lose. Neither is decoration you can read through.
   *
   * So it is given a column of its own and nothing is layered on anything.
   * The copy cannot reach the character because there is no track for it to
   * reach into, at any width and for any length of sentence.
   */
  display: grid;
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 18px;
  width: 100%;
  max-width: 30rem;
  margin: 22px auto 0;
  padding: 30px 26px 28px;
  overflow: hidden;
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
  background:
    radial-gradient(74% 58% at 88% 12%, rgb(255 255 255 / 50%), transparent 66%),
    radial-gradient(60% 50% at 4% 96%, rgb(214 226 255 / 52%), transparent 70%),
    linear-gradient(158deg, #efe9fd 0%, #e8e3fb 46%, #e2e1f9 100%);
  color: var(--own-ink);
  font-family: var(--sans);
}

.ownership[hidden] {
  display: none;
}

.own-kicker,
.own-prompt,
.own-sub,
.own-guide,
.own-mark {
  opacity: 0;
  transform: translateY(9px);
  transition:
    opacity 700ms ease,
    transform 700ms ease;
}

.own-kicker.is-in,
.own-prompt.is-in,
.own-sub.is-in,
.own-guide.is-in,
.own-mark.is-in {
  opacity: 1;
  transform: none;
}

/* Quiet by rank, legible by obligation. Measured against the panel's own
 * ground rather than against the page's: a new background is a contrast
 * change and it is paid for here. */
.own-kicker {
  grid-area: 1 / 1;
  margin: 0;
  color: #635e8c;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

/*
 * The way back in, and the strongest thing on this panel.
 *
 * Nothing here competes with the finding above it, but this is the sentence
 * that decides whether there is a second conversation, and the reference sets
 * it accordingly. The accent falls on the two words that make it about them.
 */
.own-prompt {
  grid-area: 2 / 1;
  margin: 12px 0 0;
  color: var(--own-ink);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  text-wrap: pretty;
}

.own-accent {
  color: #6d3fd4;
}

.own-sub {
  grid-area: 3 / 1;
  margin: 12px 0 0;
  max-width: 30rem;
  color: #55516f;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
}

/*
 * The character.
 *
 * The map's own sprite, unchanged -- the same file the map draws. What
 * changed is that it stands in its own column beside the copy instead of
 * being pinned over it, so it is whole and so is the sentence.
 *
 * It spans the three lines of copy and centres against them, which is what
 * makes it read as somebody standing there rather than an image anchored to
 * a corner. It still carries nothing: it is aria-hidden, it takes no
 * pointer, and a browser that never loads it leaves the panel saying
 * exactly what it said before.
 *
 * The width is the one clamp on this panel. It is what gives way when the
 * screen does -- narrow enough and the character gets smaller so the
 * headline keeps its measure, which is the right way round: the sentence is
 * the reason the panel exists.
 */
.own-guide {
  grid-area: 1 / 2 / 4 / 3;
  align-self: center;
  width: var(--own-guide-size);
  height: var(--own-guide-size);
  object-fit: contain;
  opacity: 0;
  /*
   * A contact shadow, not a ground.
   *
   * 22px of blur offset 12px down was written for a sprite lying over the
   * copy, where it fell across whatever was underneath and read as depth.
   * Standing in its own column against the panel's flat lavender it stops
   * being depth: a blur that wide is a fifth of the character's own width,
   * so it fills the negative space around it with a soft purple slab and
   * the character reads as sitting on a panel of its own inside the card.
   * Removing the shadow entirely was the other candidate and it reads as a
   * sticker, so what stays is the smallest amount that still touches the
   * ground -- the same colour, an eighth of the blur.
   */
  filter: drop-shadow(0 4px 8px rgb(80 60 140 / 14%));
  pointer-events: none;
}

.own-guide.is-in {
  opacity: 0.94;
}

.ownership > :not(.own-guide) {
  position: relative;
  z-index: 1;
}

/*
 * The copy stays inside its own column, whatever it says.
 *
 * The track is minmax(0, 1fr), which lets the TRACK shrink; a grid item's
 * own min-width is still auto, which does not let the ITEM shrink below its
 * longest unbreakable run. So one long word does what a whole layout was
 * built to prevent -- pushes out of the track and under the character --
 * and the two-column boundary quietly stops being a boundary.
 *
 * The copy here is a constant and cannot do that today. This is so that the
 * guarantee is a property of the layout rather than of the current sentence,
 * which is the same pair the picture's node captions carry for the same
 * reason.
 */
.own-kicker,
.own-prompt,
.own-sub {
  min-width: 0;
  overflow-wrap: break-word;
}

/* The line the product says about itself, level with the composer it sits
 * above. Decorative repetition of the head's own brand statement. */
.own-mark {
  grid-area: 4 / 1 / 5 / -1;
  margin: 18px 0 0;
  color: color-mix(in srgb, #635e8c 88%, transparent);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  line-height: 1.5;
  text-align: right;
  text-transform: uppercase;
}

.own-mark span {
  display: block;
}

/*
 * The smallest screens, where two full zones stop paying for themselves.
 *
 * At 320px the card has about 214px inside it. Give the character a column
 * beside every line and the sentence is left with 121px: the eyebrow wraps,
 * the supporting line wraps to three, and the card grows by a quarter of its
 * height to hold what is really one short paragraph. That is paying in height
 * for a composition that only reads at width.
 *
 * So at this size the character stands beside the headline only -- which is
 * the line it is there for -- and the eyebrow and the supporting line take
 * the whole measure. Still two zones where it matters, still nothing behind
 * anything, and the character is no smaller than it was.
 */
@media (max-width: 359px) {
  .own-kicker,
  .own-sub {
    grid-column: 1 / -1;
  }

  .own-guide {
    grid-area: 2 / 2 / 3 / 3;
  }
}

/* ------------------------------------------------------------ continuation
 *
 * The panel and the composer, made into one surface.
 *
 * The composer is the page's own form. It is sticky, it lives outside this
 * section, and it is the only thing on the page that can actually send. So it
 * is not moved, not wrapped and not copied: the panel sets one attribute on
 * the document while it is up, and these rules extend its ground down behind
 * the form and finish the panel's bottom corners there.
 *
 * Everything the composer does is untouched -- the pill, the send circle, the
 * mic, the geometry recorded in the design decision ledger, every handler and
 * every focus behaviour. What changes is what it is standing on.
 */
html[data-bium-ownership="1"] .composer::before {
  position: absolute;
  top: -14px;
  bottom: -4px;
  left: 50%;
  z-index: -1;
  width: min(30rem, 100%);
  border-radius: 0 0 var(--panel-radius, 30px) var(--panel-radius, 30px);
  background: linear-gradient(180deg, #e2e1f9 0%, #dfdef7 62%, #dcdcf5 100%);
  content: "";
  transform: translateX(-50%);
}

/* The reference's white pill: taller, rounder and lifted off the lavender, so
 * the one thing on this surface that is a control still reads as one. */
html[data-bium-ownership="1"] .composer-shell {
  min-height: 56px;
  padding-top: 6px;
  padding-bottom: 6px;
  background: #fff;
  box-shadow:
    0 14px 32px -18px rgb(60 46 120 / 40%),
    0 0 0 1px rgb(255 255 255 / 90%) inset;
}

html[data-bium-ownership="1"] .composer-shell:focus-within {
  box-shadow:
    0 14px 32px -18px rgb(60 46 120 / 44%),
    0 0 0 1px rgb(255 255 255 / 96%) inset,
    0 0 0 3px rgb(124 92 220 / 22%);
}

/* The send circle takes the panel's accent while it is on this ground. Filled
 * rather than outlined, which is what the reference shows, and only while the
 * panel is up -- the composer's resting gold is unchanged everywhere else. */
html[data-bium-ownership="1"] .composer-send {
  --control-visual: 42px;
  color: #fff;
}

html[data-bium-ownership="1"] .composer-send::before {
  background: #cfc6ea;
  box-shadow: none;
}

html[data-bium-ownership="1"] .composer-send:not(:disabled)::before {
  background: linear-gradient(160deg, #8b63e0, #6d3fd4);
  box-shadow: 0 8px 18px -8px rgb(80 45 180 / 60%);
}

html[data-bium-ownership="1"] .composer-send:hover:not(:disabled)::before {
  background: linear-gradient(160deg, #7e53da, #5f32c6);
  box-shadow: 0 10px 22px -8px rgb(80 45 180 / 68%);
}

html[data-bium-ownership="1"] .composer-send svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

@media (min-width: 900px) {
  .ownership {
    max-width: var(--result-measure);
    margin-top: 28px;
    padding: 44px 44px 26px;
  }

  .own-prompt {
    font-size: 2.15rem;
  }

  .own-kicker {
    font-size: 0.74rem;
  }

  .own-sub {
    font-size: 1.08rem;
  }

  /*
   * Only the gap. The character is already at its ceiling here, and with a
   * 392px card that leaves the sentence about seven tenths of the usable
   * width and the character about a quarter -- which is the composition,
   * and as close to both halves of it as 392px allows: a wider sentence and
   * a wider character cannot both be bought out of the same row.
   */
  .ownership {
    column-gap: 20px;
  }

  /*
   * It used to be lifted out of the flow here and parked in the panel's
   * bottom-right, so that on a wide panel the mark and the input read as
   * one row. Two things are wrong with that now.
   *
   * The `position: absolute` never actually applied: `.ownership >
   * :not(.own-guide)` gives every child `position: relative` at higher
   * specificity, so `right` and `bottom` were being read as relative
   * offsets -- 46px left and 30px up from where the mark already sat, which
   * is straight onto the line above it. That was invisible at 60rem because
   * the sub ended hundreds of pixels short of the mark, a graze at 36rem,
   * and a 97px overlap of actual letters at the conversation's measure.
   *
   * And the premise is gone with the width: there is no wide panel to put a
   * mark and an input on one row of. Under the sub, which is where the base
   * rule already puts it and where it reads, is the whole of it.
   */
  .own-mark {
    font-size: 0.62rem;
  }

  /*
   * The ground under the composer is the panel's ground, so it is the
   * panel's width. It was three numbers written for a 60rem Result -- a
   * 60rem sheet, a row of `60rem - 190px` and a 44px left margin -- and when
   * the family came down to the conversation's measure the panel followed
   * the token and these did not. The result was a 480px card sitting on a
   * 960px sheet: exactly double, overhanging by 240px on each side, which
   * is what made the composer read as a separate thing under the panel
   * rather than the bottom of it.
   *
   * One number now, and it is the one the panel above already uses.
   */
  html[data-bium-ownership="1"] .composer::before {
    width: min(var(--result-measure), 100%);
  }

  /*
   * And no override of the row itself. It carried `--composer-shift`, which
   * nothing has ever read -- the knob is `--pill-shift` in styles.css -- and
   * a width and a margin that only held the row inside a 60rem sheet. The
   * page's own desktop rule already bounds it at the same 30rem and centres
   * it, which lands the row on the panel's edges and leaves the pill inset
   * inside them by the composer's own geometry. Nothing here needs to say
   * it twice.
   */

  html[data-bium-ownership="1"] .composer-shell {
    min-height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .own-kicker,
  .own-prompt,
  .own-sub,
  .own-guide,
  .own-mark {
    transition: none;
  }
}