/*
 * SLOT-CONCEPT-DETAIL composition for the Idea Lab concept detail family.
 * Every rule is scoped to .concept-surface and colours only through the shell's
 * scheme tokens, so the dark and light appearances settle from the same rules.
 * Nothing here animates or hides content: the route arrives settled, and the
 * shell's reduced-motion contract has no concept motion to resolve.
 * Breakpoints stay on the approved 1023/767 set.
 *
 * UI round 9: the Work detail grammar (calmer title, mono crumb eyebrow, stamp
 * as a detail well, the narrative as a reading sheet) and the governed identity
 * plate after the narrative (concept-media augment BX-08) [MAPPING 10].
 */

.concept-surface {
  display: block;
  max-width: 76rem;
}

.concept-surface .entry-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.55fr);
  align-items: end;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.concept-surface .eyebrow {
  margin: 0 0 1rem;
  color: var(--text-label);
}

/* UI round 14: the section word is the way back to the Idea Lab ("← Idea Lab");
   the arrow is drawn here, so the eyebrow's words are unchanged. */
.concept-surface .eyebrow .parent-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -17px;
  color: var(--text-hi);
  text-decoration: none;
}
.concept-surface .eyebrow .parent-link::before { content: "\2190"; margin-right: .6em; letter-spacing: 0; }
.concept-surface .eyebrow .parent-link:hover { text-decoration: underline; text-decoration-thickness: 1px; }

.concept-surface h1 {
  max-width: 22ch;
  margin: 0 0 .85rem;
  color: var(--text-hi);
  font-size: var(--title-size);
  letter-spacing: .005em;
  line-height: 1.08;
}

.concept-surface .lede {
  max-width: 56ch;
  margin: 0;
  color: var(--text-2);
  font-size: var(--lede-size);
  line-height: 1.55;
}

.concept-surface .entry-stamp {
  padding: 4px 16px;
  border: 1px solid var(--line-detail);
  border-radius: var(--radius-well);
  background: var(--well-quiet);
  box-shadow: var(--groove-quiet);
}

/* Labels share the first-line baseline of their values (UI round 5); equal
   row padding keeps it. */
.concept-surface .entry-stamp dl {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0 0.75rem;
  margin: 0;
}

.concept-surface .entry-stamp dt,
.concept-surface .entry-stamp dd {
  padding: 11px 0;
  border-top: 1px solid var(--rule);
}

.concept-surface .entry-stamp dt:first-of-type,
.concept-surface .entry-stamp dd:first-of-type {
  border-top: 0;
}

.concept-surface .entry-stamp dt {
  color: var(--text-2);
  font-size: var(--label-size);
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.concept-surface .entry-stamp dd {
  margin: 0;
  color: var(--text-hi);
  font-size: .875rem;
  line-height: 1.45;
}

/* A concept's maturity reads as in progress (warn gold), never shipped. */
.concept-surface [data-concept-field="statusLabel"] {
  color: var(--warn-word);
}

.concept-surface .narrative {
  display: grid;
  grid-template-columns: minmax(10rem, 0.4fr) minmax(0, 1fr);
  align-items: baseline;
  gap: .5rem clamp(1.5rem, 4vw, 3.5rem);
  max-width: 68rem;
  margin: 0 0 2.75rem;
  padding: 26px 30px 30px;
  border: 1px solid var(--line-sheet);
  border-radius: var(--radius-sheet);
  background: var(--sheet);
  box-shadow: var(--shadow-sheet);
}

.concept-surface .narrative-label {
  margin: 0;
  color: var(--text-2);
  font-family: var(--font-meta, "JetBrains Mono", ui-monospace, monospace);
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}

.concept-surface .narrative-copy {
  color: var(--text-body);
  font-size: var(--body-size);
  line-height: 1.65;
}

.concept-surface .narrative-copy p {
  max-width: 62ch;
  margin: 0;
}

/* UI round 21 (operator decision 2026-10-02): the Lab entry story. A concept
   tells its story in up to four parts, always in this order: the problem, the
   idea, what we have built so far, where it is going. Each part is a story card
   in the Work case-study grammar (UI round 13): a mono label, a marked edge and
   a faint ground on a well. The cards are drawn calm, and colour has one job
   (UI round 17): the cards are neutral ink and hairlines, and the one accent is
   the Lab's own in-progress gold, which already marks the Status value on this
   page and the status on its share card. It is used on exactly one card, the
   one that says where the work stands today. Nothing animates and nothing is
   hidden: the route arrives settled, with or without scripts. */
.concept-surface .lab-story {
  display: grid;
  gap: 14px;
  max-width: 68rem;
  margin: 0 0 2.75rem;
}

.concept-surface .lab-story .narrative {
  max-width: none;
  margin: 0;
  padding: 22px 28px 25px 26px;
  border: 1px solid var(--line-detail);
  border-left: 3px solid var(--role-role-edge);
  border-radius: var(--radius-well);
  background: linear-gradient(var(--role-role-ground), var(--role-role-ground)), var(--well);
  box-shadow: none;
}

.concept-surface .lab-story .narrative-label {
  display: flex;
  align-items: baseline;
  gap: .7em;
  color: var(--role-role);
}

/* The card's marker: a plain dot in the card's own edge colour, in the flow of its label. */
.concept-surface .lab-story .narrative-label::before {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--role-role-edge);
}

/* The one accent: where the work stands today. */
.concept-surface .lab-story .narrative[data-lab-part="built"] {
  border-left-color: var(--status-beta-dot);
  background: linear-gradient(var(--warn-ground), var(--warn-ground)), var(--well);
}

.concept-surface .lab-story .narrative[data-lab-part="built"] .narrative-label {
  color: var(--warn-word);
}

.concept-surface .lab-story .narrative[data-lab-part="built"] .narrative-label::before {
  background: var(--status-beta-dot);
}

.concept-surface .lab-story .narrative-copy p {
  max-width: 66ch;
}

/* The identity frame (BX-08): the Work detail's preview plate. */
.concept-surface .media-frame {
  position: relative;
  margin: 0;
  padding: clamp(.75rem, 2vw, 1.25rem);
  border: 1px solid var(--line-detail);
  border-radius: var(--radius-plate);
  background: var(--plate);
  box-shadow: var(--shadow-plate);
}

/* The last keyboard stop keeps the behind-frame scroll recoverable without
   persistent chrome: clipped until focused, then shown as a 44px control above
   the fixed lower-right Menu at maximum scroll. */
.concept-surface .content-end-recovery {
  position: absolute;
  bottom: calc(var(--content-end-clearance, 118px) - 30px);
  left: var(--page-gutter);
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  scroll-margin-block: var(--content-end-clearance, 118px);
}

.concept-surface .content-end-recovery:focus,
.concept-surface .content-end-recovery:focus-visible {
  z-index: 24;
  display: inline-flex;
  width: auto;
  height: auto;
  max-width: calc(100% - (2 * var(--page-gutter)));
  min-height: 44px;
  align-items: center;
  padding: 0.65rem 0.9rem;
  overflow: visible;
  clip-path: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-hi);
  background: var(--glass);
}

@media (max-width: 1023px) {
  .concept-surface .entry-header {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .concept-surface h1 {
    font-size: var(--title-size);
  }

  .concept-surface .narrative {
    grid-template-columns: minmax(0, 1fr);
    gap: .6rem;
    padding: 20px 17px 24px;
  }

  /* Phones (UI round 17 rhythm): the cards sit 24px apart and keep their own inset. */
  .concept-surface .lab-story {
    gap: 1.5rem;
    margin-bottom: 3rem;
  }

  .concept-surface .lab-story .narrative {
    padding: 18px 17px 21px 16px;
  }

  .concept-surface .content-end-recovery:focus,
  .concept-surface .content-end-recovery:focus-visible {
    white-space: normal;
  }
}