/*
 * motion.css — supplemental styles for the ShellX Motion manual.
 *
 * Role: the Motion manual reuses the shared docs chrome in `../manual.css`
 * (topbar, tree, shell, hero, section, grid, card, callout, api-table, button).
 * This file adds only the classes the shared sheet does not define: the record
 * list (`.feature-*`), the section headings, the mobile tree toggle, the
 * interface-map extras, and the generated command-reference blocks.
 *
 * Provenance: the record/heading/map rules are lifted from
 * `../shellx/manual.css` so the Motion manual renders identically to the ShellX
 * manual, which uses the same record architecture. The two tokens those rules
 * need (`--accent-soft`, `--visual`) are re-declared here because the shared
 * sheet does not carry them.
 *
 * Dependencies: ../manual.css (loaded first; owns the design tokens).
 * Primary caller: ./index.html (generated by ./build-manual.py).
 */

:root {
  --accent-soft: rgba(200, 66, 58, 0.13);
  --visual: #00c8df;
}

/* ---------- tree: search + mobile toggle ---------- */

.manual-nav-toggle {
  display: none;
}

.manual-tree-navigation {
  display: block;
}

.manual-search-label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.search-status {
  min-height: 18px;
  margin: 5px 0 10px;
  color: var(--ink-2);
  font-size: 11px;
}

.manual-topnav a:focus-visible,
.manual-node:focus-visible,
.feature-heading a:focus-visible,
.manual-surface-link:focus-visible {
  outline: 2px solid var(--accent-hot);
  outline-offset: 3px;
}

/* ---------- hero extras ---------- */

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 22px;
  margin-top: 20px;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
}

.manual-hero .candidate-note {
  margin-top: 20px;
  padding-left: 15px;
  border-left: 3px solid var(--accent);
  color: var(--ink-2);
  font-size: 13px;
}

.manual-overview-visual {
  max-width: 900px;
  margin: 34px 0 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #000;
}

.manual-overview-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.manual-overview-visual figcaption {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 14px;
  align-items: start;
  padding: 11px 13px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 11px;
}

.manual-overview-visual figcaption strong {
  color: var(--visual);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.boundary-strip {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  margin-bottom: 48px;
  padding: 18px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.boundary-strip strong {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.boundary-strip span {
  color: var(--ink-1);
}

/* ---------- section headings ---------- */

.section-heading {
  display: grid;
  grid-template-columns: minmax(180px, 0.65fr) minmax(260px, 1.2fr);
  gap: 8px 36px;
  margin-bottom: 24px;
}

.section-heading > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-heading h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 46px);
  font-variation-settings: "opsz" 144, "SOFT" 18, "wght" 340;
  line-height: 1;
  letter-spacing: -0.025em;
}

.section-heading span {
  align-self: end;
  color: var(--ink-1);
}

/* ---------- records ---------- */

.feature-list {
  border-top: 1px solid var(--line);
}

.feature-detail {
  scroll-margin-top: 78px;
  padding: 26px 0 30px;
  border-bottom: 1px solid var(--line);
  transition: background 150ms var(--ease), box-shadow 150ms var(--ease);
}

.feature-detail.highlighted {
  margin-inline: -16px;
  padding-inline: 16px;
  background: linear-gradient(90deg, var(--accent-soft), transparent 68%);
  box-shadow: inset 3px 0 0 var(--accent);
}

.feature-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.feature-heading p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.feature-heading a {
  flex: 0 0 auto;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
}

.feature-heading a:hover,
.feature-heading a:focus-visible {
  color: var(--accent-hot);
}

.feature-detail h3 {
  margin: 5px 0 7px;
  /* Generated command records use the dotted command id as their title, and the
     longest of them (motion.procedural.relationship.enabled.set) is one
     unbreakable token wider than a 390px viewport's content column. Without this
     the document gains a horizontal scrollbar on a phone. */
  overflow-wrap: anywhere;
  font-size: 19px;
  font-weight: 620;
  letter-spacing: -0.015em;
}

.feature-summary,
.feature-detail ol {
  max-width: 790px;
  color: var(--ink-1);
}

.feature-summary {
  margin: 0;
}

.feature-detail ol {
  margin: 17px 0 0;
  padding-left: 23px;
}

.feature-detail li {
  margin: 7px 0;
  padding-left: 5px;
}

.feature-detail li::marker {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
}

.manual-note {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  max-width: 790px;
  margin: 18px 0 0;
  padding: 13px 14px;
  color: var(--ink-1);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  font-size: 13px;
}

.manual-note strong {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.empty-state {
  margin: 40px 0;
  color: var(--ink-2);
}

/* ---------- interface map ---------- */

.interface-map-section {
  padding-top: 0;
  border-top: 0;
}

.manual-surface {
  position: relative;
  max-width: 900px;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #000;
}

.manual-surface-link {
  position: relative;
  display: block;
  overflow: hidden;
}

.manual-surface img {
  display: block;
  width: 100%;
  height: auto;
}

.manual-highlight {
  position: absolute;
  z-index: 2;
  min-width: 8px;
  min-height: 8px;
  border: 2px solid var(--accent-hot);
  border-radius: 4px;
  background: rgba(200, 66, 58, 0.12);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.34);
  pointer-events: none;
  transition: left 180ms var(--ease), top 180ms var(--ease), width 180ms var(--ease), height 180ms var(--ease);
}

.manual-highlight[hidden] {
  display: none;
}

.manual-highlight::after {
  content: attr(data-label);
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  max-width: min(280px, calc(100vw - 80px));
  overflow: hidden;
  padding: 4px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: rgba(5, 5, 5, 0.92);
  color: var(--ink-0);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-highlight[data-label-side="above"]::after {
  top: auto;
  bottom: calc(100% + 8px);
}

.manual-highlight[data-label-align="end"]::after {
  right: 0;
  left: auto;
}

.manual-detail {
  max-width: 900px;
  padding: 24px 0 0;
}

.manual-detail h3 {
  margin: 6px 0 8px;
  font-size: 22px;
}

.manual-detail > p:not(.manual-eyebrow, .manual-note) {
  max-width: 790px;
  margin: 0;
  color: var(--ink-1);
}

.manual-detail-steps {
  max-width: 790px;
  margin: 18px 0 0;
  padding-left: 23px;
  color: var(--ink-1);
}

.manual-detail-steps li {
  margin: 7px 0;
  padding-left: 5px;
}

.manual-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
}

.manual-detail-actions a {
  color: var(--ink-1);
  font-family: var(--mono);
  font-size: 10px;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  text-transform: uppercase;
}

.manual-detail-actions a:hover,
.manual-detail-actions a:focus-visible {
  color: var(--accent-hot);
}

/* ---------- generated command reference ---------- */

.contract-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.contract-line li {
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-1);
  color: var(--ink-1);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.contract-line li b {
  color: var(--ink-2);
  font-weight: 500;
}

.contract-line li[data-tone="mutates"] {
  border-color: var(--accent-dim);
  color: var(--accent-hot);
}

.arg-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 13px;
}

.arg-table caption {
  margin-bottom: 7px;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
}

.arg-table th,
.arg-table td {
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.arg-table th {
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.arg-table td:first-child,
.arg-table td:nth-child(2) {
  white-space: nowrap;
}

.arg-table code {
  color: var(--ink-0);
  font-family: var(--mono);
  font-size: 12px;
}

.table-scroll {
  max-width: 790px;
  margin-top: 16px;
  overflow-x: auto;
}

.arg-overflow {
  max-width: 790px;
  margin: 12px 0 0;
  color: var(--ink-2);
  font-size: 12px;
}

.arg-overflow code {
  font-family: var(--mono);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.command-block {
  display: grid;
  gap: 6px;
  max-width: 790px;
  margin: 16px 0 0;
  padding: 13px 14px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg-1);
}

.command-block code {
  color: var(--ink-0);
  font-family: var(--mono);
  font-size: 12px;
  white-space: pre;
}

.feature-summary code,
.feature-detail li code,
.manual-note code,
.manual-detail code {
  font-family: var(--mono);
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  .manual-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    color: var(--ink-1);
    background: var(--bg-2);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .manual-nav-toggle:hover,
  .manual-nav-toggle:focus-visible {
    border-color: var(--accent);
    color: var(--ink-0);
    outline: none;
  }

  .manual-tree-navigation {
    display: none;
    margin-top: 16px;
  }

  .manual-tree-navigation.is-open {
    display: block;
  }

  .interface-map-section,
  .feature-detail {
    scroll-margin-top: 118px;
  }
}

@media (max-width: 620px) {
  .boundary-strip,
  .section-heading,
  .manual-note,
  .manual-overview-visual figcaption,
  .detail-meta {
    grid-template-columns: 1fr;
  }

  .feature-detail.highlighted {
    margin-inline: -8px;
    padding-inline: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .manual-folder summary::before,
  .feature-detail,
  .manual-highlight {
    transition: none;
  }
}