/* Features page: man-page framing, sticky table of contents, section visuals.
   Uses tokens from base.css only. */

/* ---------- man page head ---------- */
.fx-hero { padding-block: 40px 56px; }
@media (min-width: 900px) { .fx-hero { padding-block: 56px 72px; } }

.fx-manhead, .fx-manfoot {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin: 0 0 var(--s-7);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .06em;
  color: var(--text-3);
}
.fx-manfoot { margin: var(--s-8) 0 0; padding: var(--s-3) 0 0; border-bottom: 0; border-top: 1px solid var(--line); }
@media (max-width: 479px) { .fx-manhead__mid { display: none; } }

.fx-hero__grid { display: grid; gap: var(--s-6); }
@media (min-width: 1100px) {
  .fx-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: end; }
}
.fx-hero__copy .display { margin: 0; }
.fx-hero__copy .lead { margin-top: var(--s-5); }

.fx-syn { margin: 0; border-top: 1px solid var(--line); }
.fx-syn > div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--s-4);
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t-fast) ease-out;
}
.fx-syn > div:hover { background: var(--selection); }
.fx-syn dt { padding-top: 2px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.fx-syn dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }

/* ---------- layout + table of contents ---------- */
.fx-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .fx-layout { grid-template-columns: 164px minmax(0, 1fr); gap: var(--s-6); } }
@media (min-width: 1200px) { .fx-layout { grid-template-columns: 156px minmax(0, 1fr); gap: var(--s-7); } }

.fx-toc { position: sticky; top: var(--header-h); z-index: 20; align-self: start; }
.fx-toc__head { margin: 0 0 var(--s-3); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
ol.fx-toc__list { position: relative; list-style: none; margin: 0; padding: 0; }
.fx-toc__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--r-ctl);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--t-fast) ease-out, background-color var(--t-fast) ease-out, border-color var(--t-fast) ease-out, transform 220ms var(--spring);
}
.fx-toc__mark { width: 1ch; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity var(--t-fast) ease-out, transform var(--t) var(--ease-out); }
.fx-toc__label { flex: 1; min-width: 0; }
.fx-toc__n { font-size: 11px; letter-spacing: 0; color: var(--text-3); transition: color var(--t-fast) ease-out; }
.fx-toc__link:hover { color: var(--text); background: var(--highlight); }
.fx-toc__link:hover .fx-toc__mark { opacity: .45; transform: none; }
.fx-toc__link:active { transform: scale(.97); transition-duration: 60ms; }
.fx-toc__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; color: var(--text); }
.fx-toc__link.is-active { color: var(--text); }
.fx-toc__link.is-active .fx-toc__mark { opacity: 1; transform: none; }
.fx-toc__link.is-active .fx-toc__n { color: var(--accent); }

@media (min-width: 900px) {
  .fx-toc { top: calc(var(--header-h) + 40px); padding-top: var(--s-7); }
  ol.fx-toc__list { border-left: 1px solid var(--line); }
  .fx-toc__list li + li { margin-top: 2px; }
  .fx-toc__link { min-height: 32px; padding: 0 10px 0 8px; margin-left: 8px; }
  .fx-toc__link.is-active::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--accent);
  }
}

@media (max-width: 899px) {
  .fx-toc {
    margin-inline: calc(-1 * var(--gutter));
    border-block: 1px solid var(--line);
    background: var(--scrim);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
  }
  .fx-toc__head { display: none; }
  ol.fx-toc__list {
    display: flex;
    gap: 6px;
    padding: 8px var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .fx-toc__list::-webkit-scrollbar { display: none; }
  .fx-toc__list li { flex: none; }
  .fx-toc__link { height: 36px; padding: 0 12px; border: 1px solid var(--border); white-space: nowrap; }
  .fx-toc__link::after { content: ""; position: absolute; inset: -4px 0; }
  .fx-toc__mark { width: 0; overflow: hidden; transition: none; }
  .fx-toc__link.is-active { border-color: var(--accent); background: var(--accent-soft); }
  .fx-toc__link.is-active .fx-toc__mark { width: 1ch; }
  .fx-toc__n { display: none; }
}

/* ---------- sections ---------- */
.fx-body { min-width: 0; }
.fx-sec { padding-block: var(--s-7) var(--s-8); scroll-margin-top: 60px; }
@media (min-width: 900px) { .fx-sec { padding-block: var(--s-7) 80px; scroll-margin-top: 8px; } }

.fx-sec__rule {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--text-2);
}
.fx-sec__rule span + span { color: var(--text-3); letter-spacing: 0; }

.fx-row { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
.fx-row--sub { margin-top: var(--s-8); }
@media (min-width: 1200px) {
  .fx-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-7); align-items: center; margin-top: var(--s-7); }
  .fx-row--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .fx-row--flip > .fx-copy { order: 2; }
  .fx-row--stack { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
  .fx-row--sub { margin-top: var(--s-9); }
}

.fx-copy { max-width: 620px; }
.fx-copy .eyebrow { margin-bottom: var(--s-3); }
.fx-copy .title { font-size: clamp(28px, 3vw, 40px); }
.fx-copy .title + p, .fx-copy .fx-h3 + p { margin-top: var(--s-4); }
.fx-copy p + p { margin-top: var(--s-3); }
.fx-copy .list-term { margin-top: var(--s-5); font-size: 14px; }
.fx-copy .list-term li + li { margin-top: 8px; }
.fx-copy .list-term .kbd { margin-block: -2px; }
.fx-row--stack .fx-copy { max-width: 760px; }
.fx-h3 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: -0.015em; color: var(--text); }

/* figures */
.fx-fig { margin: 0; min-width: 0; }
.fx-fig__gap { margin-top: var(--s-4); }
.fx-row--sub .nx-frag { max-width: 500px; }
@media (max-width: 1199px) {
  .fx-fig { max-width: 640px; }
  .fx-fig .nx-frag { margin-left: 0; }
  .fx-cap { text-align: left; }
}
.fx-cap { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--text-2); text-align: center; }
.fx-cap span { margin-right: 8px; color: var(--accent); }

/* shared bits for hand-built visuals */
.fx-fig .window { font-size: 13px; }
.fx-search { position: relative; display: block; flex: 1 1 260px; min-width: 0; }
.fx-search__ps { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--accent); pointer-events: none; }
.fx-search__in { padding-left: 32px; }
.fx-search__in::-webkit-search-cancel-button { filter: grayscale(1); opacity: .6; cursor: pointer; }
.fx-empty { margin: 0; padding: 0 16px 16px; font-size: 13px; color: var(--text-2); }

/* ---------- work: split schematic ---------- */
.fx-split {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--panel);
  box-shadow: inset 0 1px 0 var(--highlight), 0 30px 60px -30px var(--shadow-deep);
}
.fx-split__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fx-split__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 150px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
}
.fx-split__head { display: flex; justify-content: space-between; gap: 6px; margin: 0 0 4px; font-size: 11px; color: var(--text-2); }
.fx-split__head b { font-weight: 500; color: var(--text); }
.fx-split__col i { display: block; width: var(--w); height: 6px; border-radius: 3px; background: var(--border); }
.fx-split__files { margin: auto 0 0; font-size: 11px; color: var(--text-2); }
.fx-split__files u { margin-left: 6px; color: var(--accent); text-decoration: none; }
.fx-split__files.is-run { display: flex; align-items: center; gap: 6px; }
.fx-split__files.is-run::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: fx-pulse 1.6s ease-in-out infinite; }
.fx-split__bar { display: flex; gap: 8px; margin-top: 8px; }
.fx-split__all, .fx-split__cmp { display: flex; align-items: center; height: 34px; padding: 0 12px; border-radius: var(--r-ctl); font-size: 12px; }
.fx-split__all { flex: 1; min-width: 0; border: 1px solid var(--border); color: var(--text-2); }
.fx-split__cmp { background: var(--raised); color: var(--text); }
@media (max-width: 479px) {
  .fx-split__head span { display: none; }
  .fx-split__col { padding: 10px; min-height: 128px; }
  .fx-split__files u { display: block; margin: 2px 0 0; }
}

/* ---------- assistant: routing ---------- */
.fx-route { margin-top: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--panel); }
.fx-route__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  font-size: 13px;
  transition: background-color var(--t-fast) ease-out;
}
.fx-route__row:hover { background: var(--selection); }
.fx-route__row + .fx-route__row { border-top: 1px solid var(--line); }
.fx-route q { color: var(--text); quotes: "\"" "\""; }
.fx-route q::before, .fx-route q::after { color: var(--text-2); }
.fx-route__arrow { color: var(--text-2); }

/* ---------- tools: call log ---------- */
ol.fx-calls__list { list-style: none; margin: 0; padding: 8px 0; }
.fx-call {
  display: grid;
  grid-template-columns: 62px auto minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 7px 16px;
  transition: background-color var(--t-fast) ease-out;
}
.fx-call:hover { background: var(--selection); }
.fx-call__t { font-size: 12px; color: var(--text-3); }
.fx-fig .fx-call__name { padding: 0; border: 0; background: none; font-size: 13px; color: var(--accent); }
.fx-call__arg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.fx-call__st { font-size: 12px; white-space: nowrap; }
.fx-call__st.is-ok { color: var(--ok); }
.fx-call__st.is-wait { color: var(--warn); }
.fx-call__st.is-deny { color: var(--err); }
.fx-call--ask { margin-block: 4px; padding-block: 12px; border-block: 1px solid var(--line); background: var(--bg-2); }
.fx-call--ask:hover { background: var(--bg-2); }
.fx-call--ask:not([data-state]) .fx-call__t, .fx-call--ask[data-state=""] .fx-call__t { color: var(--warn); }
.fx-call__ask { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; }
.fx-call__q { flex: 1 1 220px; color: var(--text); }
.fx-call__ask .btn[hidden] { display: none; }
@media (max-width: 559px) {
  .fx-call { grid-template-columns: minmax(0, 1fr) auto; }
  .fx-call__t { display: none; }
  .fx-call__arg { grid-column: 1 / -1; grid-row: 2; }
  .fx-call__ask { grid-column: 1 / -1; grid-row: 3; }
  .fx-call__q { flex-basis: 100%; }
}

/* ---------- connections + history: filterable lists ---------- */
.fx-conn__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}
.fx-conn__count { margin: 0; font-size: 12px; color: var(--text-2); white-space: nowrap; }
ul.fx-conn__grid { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 16px; }
.fx-conn__grid li {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  background: var(--bg-2);
  font-size: 13px;
  color: var(--text);
  cursor: default;
  transition: border-color var(--t-fast) ease-out, background-color var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.fx-conn__grid li:hover { border-color: var(--border-strong); background: var(--raised); }
.fx-conn__grid li.is-soon { border-style: dashed; color: var(--text-2); }
.fx-conn__grid li.is-soon::after { content: "soon"; margin-left: 8px; font-size: 11px; color: var(--text-3); }
.fx-conn__grid li[hidden], .fx-hist__list li[hidden] { display: none; }

ul.fx-hist__list { list-style: none; margin: 0; padding: 6px 0; }
.fx-hist__list li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 16px;
  transition: background-color var(--t-fast) ease-out;
}
.fx-hist__list li:hover { background: var(--selection); }
.fx-hist__cli { padding: 3px 0; border: 1px solid var(--border); border-radius: var(--r-tag); font-size: 11px; line-height: 1.2; text-align: center; color: var(--text-2); }
.fx-hist__cli.is-claude { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
.fx-hist__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.fx-hist__m { font-size: 12px; white-space: nowrap; color: var(--text-2); }
@media (max-width: 559px) {
  .fx-hist__list li { grid-template-columns: 58px minmax(0, 1fr); row-gap: 2px; }
  .fx-hist__m { grid-column: 2; }
}

.fx-heat { padding: 16px; border-top: 1px solid var(--line); }
.fx-heat__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0 0 12px; font-size: 12px; color: var(--text-2); }
.fx-heat__legend { display: inline-flex; align-items: center; gap: 3px; }
.fx-heat__legend i { display: block; width: 10px; height: 10px; border-radius: 2px; }
.fx-heat__legend i:first-of-type { margin-left: 4px; }
.fx-heat__legend i:last-of-type { margin-right: 4px; }
.fx-heat__grid { display: grid; grid-template-rows: repeat(7, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.fx-heat__grid i { display: block; aspect-ratio: 1; border-radius: 2px; }
.fx-heat i { background: var(--raised); }
.fx-heat i[data-l="1"] { background: color-mix(in srgb, var(--accent) 22%, var(--raised)); }
.fx-heat i[data-l="2"] { background: color-mix(in srgb, var(--accent) 44%, var(--raised)); }
.fx-heat i[data-l="3"] { background: color-mix(in srgb, var(--accent) 70%, var(--raised)); }
.fx-heat i[data-l="4"] { background: var(--accent); }

/* ---------- autopilot ---------- */
.fx-auto .window__bar { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; }
.fx-auto__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--accent-soft);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
}
.fx-auto__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: fx-pulse 1.6s ease-in-out infinite; }
.fx-auto__goal { padding: 16px; border-bottom: 1px solid var(--line); }
.fx-auto__goal p { margin: 0; color: var(--text); }
.fx-auto__k { margin-right: 12px; color: var(--text-2); }
.fx-auto__meters { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; margin-top: 14px; font-size: 12px; color: var(--text-2); }
.fx-meter { height: 4px; overflow: hidden; border-radius: 2px; background: var(--raised); }
.fx-meter i { display: block; width: calc(var(--v) * 100%); height: 100%; background: var(--accent); }
ol.fx-log { list-style: none; margin: 0; padding: 12px 16px 16px; line-height: 1.55; }
.fx-log li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 4px 0; color: var(--text-2); }
.fx-log__t { font-size: 12px; color: var(--text-3); }
.fx-log q, .fx-log em { font-style: normal; color: var(--text); }
.fx-log .status { font-size: 13px; color: var(--warn); }

/* ---------- remote ---------- */
.fx-ssh__hosts { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.fx-ssh__label { margin: 0 0 8px; font-size: 12px; color: var(--text-2); }
.fx-ssh__hosts ul { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.fx-ssh__hosts li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  border-radius: var(--r-ctl);
  color: var(--text-2);
  transition: background-color var(--t-fast) ease-out;
}
.fx-ssh__hosts li:hover { background: var(--highlight); }
.fx-ssh__hosts li.is-sel { background: var(--selection); }
.fx-ssh__hosts .status { font-size: 13px; color: var(--text); }
.fx-ssh__term {
  margin: 0;
  padding: 16px;
  background: var(--bg-2);
  font: 13px/1.7 var(--mono);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.fx-dim { color: var(--text-2); }
.fx-acc { color: var(--accent); }
.fx-caret { display: inline-block; width: .6em; height: 1.15em; margin-left: 2px; vertical-align: text-bottom; background: var(--accent); animation: fx-blink 1.1s steps(1) infinite; }

/* ---------- privacy + keys tables ---------- */
.fx-priv .table th[scope="row"] { white-space: nowrap; }
.fx-no, .fx-yes, .fx-ask { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.fx-no::before, .fx-yes::before, .fx-ask::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; }
.fx-no { color: var(--ok); }
.fx-no::before { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.fx-ask { color: var(--warn); }
.fx-ask::before { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.fx-yes { color: var(--text); }
.fx-yes::before { box-shadow: inset 0 0 0 1px var(--text-2); }
@media (max-width: 639px) {
  .fx-priv .table th[scope="row"] { white-space: normal; }
  .fx-priv .table thead th:nth-child(3), .fx-priv .table td:nth-child(3) { display: none; }
}
.fx-keys .table { max-width: 760px; }
.fx-keys .table th[scope="row"] { width: 42%; white-space: nowrap; }
.fx-keys .table .kbd { margin-block: -2px; }

/* ---------- see also ---------- */
.fx-cta__inner { display: grid; gap: var(--s-6); align-items: end; }
.fx-cta__inner .title { margin-top: 0; }
.fx-cta__inner .muted { margin-top: var(--s-4); max-width: 60ch; }
@media (min-width: 900px) { .fx-cta__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); } }
.fx-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fx-cta__see { display: flex; flex-wrap: wrap; gap: 16px; flex-basis: 100%; margin: 4px 0 0; font-size: 13px; }
@media (max-width: 479px) { .fx-cta__actions .btn { flex: 1 1 100%; } }

/* ---------- motion ---------- */
@keyframes fx-pulse { 50% { opacity: .35; } }
@keyframes fx-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .fx-split__files.is-run::before, .fx-auto__pill::before, .fx-caret { animation: none; }
  .fx-toc__link, .fx-toc__mark { transition: none; }
}