/*
 * SLOT-WORK-DETAIL screen integration for the Work detail family.
 * The Work detail hierarchy itself (header, narrative, facts, plates,
 * continuation) is styled by work-detail.css and logotype-plate.css; this
 * sheet only seats that article in the screen integration and styles the
 * shared content-end recovery. Every rule is scoped to .work-detail-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 Work detail motion to resolve. Breakpoints stay on the approved
 * 1023/767 set.
 */

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

/* 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. */
.work-detail-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);
}

.work-detail-surface .content-end-recovery:focus,
.work-detail-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: 767px) {
  .work-detail-surface .content-end-recovery:focus,
  .work-detail-surface .content-end-recovery:focus-visible {
    white-space: normal;
  }
}

/* "More work" (UI round 5): the previous and next Work entries in the Work
   grid order, after the case study and before the content-end recovery. UI
   round 9: two Podium wells (as the Work index tiles); hover and keyboard focus
   share one rule and the site focus ring applies. */
:is(.work-detail-surface, .concept-surface) .work-sequence {
  max-width: 76rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

:is(.work-detail-surface, .concept-surface) .work-sequence__list {
  display: grid;
  /* UI round 14: Previous, the way back to the whole list, Next. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  border: 0;
}

:is(.work-detail-surface, .concept-surface) .work-sequence__item {
  display: flex;
  min-width: 0;
}

:is(.work-detail-surface, .concept-surface) .work-sequence__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  width: 100%;
  min-height: 44px;
  padding: 14px 16px 16px;
  border: 1px solid var(--line-lift);
  border-radius: var(--radius-well);
  color: var(--text-hi);
  background: var(--well);
  box-shadow: var(--groove);
  text-decoration: none;
  transition: background-color .25s ease, border-color .25s ease;
}

:is(.work-detail-surface, .concept-surface) [data-work-sequence-item="next"] .work-sequence__link {
  align-items: flex-end;
  text-align: right;
}

:is(.work-detail-surface, .concept-surface) .work-sequence__link:hover,
:is(.work-detail-surface, .concept-surface) .work-sequence__link:focus-visible {
  color: var(--text-hi);
  background: var(--well-hover);
  border-color: var(--line-strong);
}

:is(.work-detail-surface, .concept-surface) .work-sequence__link:hover .work-sequence__name,
:is(.work-detail-surface, .concept-surface) .work-sequence__link:focus-visible .work-sequence__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* Mono direction label (steel, 10px floor) [SPEC 6]. */
:is(.work-detail-surface, .concept-surface) .work-sequence__dir {
  color: var(--text-2);
  font-family: var(--font-meta, "JetBrains Mono", ui-monospace, SFMono-Regular, monospace);
  font-size: var(--label-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

:is(.work-detail-surface, .concept-surface) .work-sequence__name {
  margin: 0;
  font-family: var(--font-body, "Instrument Sans", sans-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
  overflow-wrap: break-word;
}

/* The parent link is a compact key between the two wells; alone (one published
   concept) it is the whole navigation. */
:is(.work-detail-surface, .concept-surface) [data-work-sequence-item="all"] .work-sequence__link {
  align-items: center;
  justify-content: center;
  min-width: 8.5rem;
  padding: 14px 20px;
  text-align: center;
}
:is(.work-detail-surface, .concept-surface) [data-work-sequence-item="all"] .work-sequence__dir { color: var(--text-hi); }
:is(.work-detail-surface, .concept-surface) [data-work-sequence-item="all"] .work-sequence__dir::before { content: "\2190"; margin-right: .6em; letter-spacing: 0; }
:is(.work-detail-surface, .concept-surface) .work-sequence__list[data-sequence-count="1"] { grid-template-columns: max-content; }
.concept-surface .work-sequence { margin-top: clamp(2rem, 4vw, 3rem); }

@media (max-width: 767px) {
  :is(.work-detail-surface, .concept-surface) .work-sequence__list { grid-template-columns: minmax(0, 1fr); }
  :is(.work-detail-surface, .concept-surface) .work-sequence__list[data-sequence-count="1"] { grid-template-columns: minmax(0, 1fr); }
  :is(.work-detail-surface, .concept-surface) [data-work-sequence-item="all"] .work-sequence__link { min-height: 44px; }
  :is(.work-detail-surface, .concept-surface) .work-sequence__link { gap: 0.6rem; }
}