/* Feature page: The Graph — interactive render-history demo.
   Behaviour lives in js/feature-graph.js (hooks: data-feature-graph, data-fgr-*).
   Mobile-first: base rules are the phone layout; wider screens add via min-width.
   Brand #e13e13 matches base.html `brand`. Head-diamond amber (#fbbf24) mirrors the app's graph panel.
   No glow / blur / shadow bloom — selection is a border, the pulse is a ring outline. */

.fgr {
  --fgr-amber: #fbbf24;
  --fgr-teal: #2dd4bf;
  --fgr-line: rgba(255, 255, 255, 0.16);
  --fgr-border: rgba(255, 255, 255, 0.1);
  --fgr-row-h: 48px;
  --fgr-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fgr-card {
  background: #111113;
  border: 1px solid var(--fgr-border);
  border-radius: 1.25rem;
  padding: 1.25rem;
}

.fgr-lead {
  margin: 0;
  max-width: 41rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #a1a1aa;
}
.fgr-lead strong { color: #fff; font-weight: 600; }
.fgr-try { margin: 0.875rem 0 0; font-size: 0.9375rem; color: #8a8a93; }
.fgr-try b { color: var(--fgr-amber); font-weight: 600; }

/* ---- demo layout: graph panel + image ---- */
.fgr-demo { display: grid; gap: 1.5rem; margin-top: 1.5rem; }

.fgr-panel {
  min-width: 0;
  background: #101010;
  border: 1px solid var(--fgr-border);
  border-radius: 0.875rem;
  padding: 0.75rem 0.75rem 0.5rem;
}
.fgr-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 0.5rem;
}
.fgr-panel-title { display: flex; align-items: center; gap: 0.75rem; }
.fgr-panel-label { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.04em; color: #a1a1aa; }
.fgr-count { font-size: 0.875rem; color: #8a8a93; white-space: nowrap; }

.fgr-seg {
  display: inline-flex; padding: 3px; border-radius: 0.5625rem;
  background: #1b1b1d; border: 1px solid rgba(255, 255, 255, 0.08);
}
.fgr-seg button {
  min-height: 36px; padding: 0 0.875rem; border: 0; border-radius: 0.375rem;
  background: transparent; color: #a1a1aa;
  font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.fgr-seg button[aria-pressed="true"] { background: #3a3a3d; color: #fff; }

/* ---- the list ---- */
.fgr-list { position: relative; overflow: hidden; transition: height 0.6s var(--fgr-ease); }
.fgr-line {
  position: absolute; background: var(--fgr-line);
  transition: top 0.6s var(--fgr-ease), left 0.6s var(--fgr-ease),
              width 0.6s var(--fgr-ease), height 0.6s var(--fgr-ease);
}
.fgr-rowwrap {
  position: absolute; left: 0; right: 0; height: var(--fgr-row-h);
  transition: top 0.6s var(--fgr-ease), opacity 0.4s;
}
.fgr-rowwrap:hover { z-index: 4; }
.fgr-dot {
  position: absolute; top: 20px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--fgr-amber); transition: left 0.6s var(--fgr-ease), opacity 0.4s;
}
.fgr-dot[data-src] { background: #e4e4e7; }

.fgr-row {
  position: absolute; top: 0; right: 2.75rem; height: var(--fgr-row-h);
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0 0.75rem; border: 1.5px solid transparent; border-radius: 0.625rem;
  background: transparent; color: #fff; font: inherit; font-size: 0.9375rem; font-weight: 500;
  text-align: left; cursor: pointer;
  transition: background 0.2s, border-color 0.2s, left 0.6s var(--fgr-ease);
}
.fgr-row:disabled { cursor: default; }
.fgr-row.is-sel { background: #2a2a2c; border-color: rgba(255, 255, 255, 0.55); }
.fgr-row:hover:not(:disabled):not(.is-sel) { background: rgba(255, 255, 255, 0.05); }
.fgr-row > i { flex: none; font-size: 1.375rem; color: var(--fgr-amber); }
.fgr-row > i.is-teal { color: var(--fgr-teal); }
.fgr-row > i.is-src { color: #d4d4d8; }
.fgr-name { white-space: nowrap; }
.fgr-meta {
  display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.8125rem; font-weight: 400; color: #a1a1aa;
}

/* 44px touch target around the diamond */
.fgr-dia {
  position: absolute; right: 0; top: 2px; width: 44px; height: 44px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.4);
}
.fgr-dia:disabled { cursor: default; }
.fgr-dia i { font-size: 1.5rem; }
.fgr-dia.is-head { color: var(--fgr-amber); }
.fgr-dia:hover:not(:disabled):not(.is-head) { color: var(--fgr-amber); }
.fgr-nudge {
  position: absolute; left: 10px; top: 10px; width: 24px; height: 24px;
  border: 2px solid var(--fgr-amber); border-radius: 50%; pointer-events: none;
  animation: fgr-ping 1.8s ease-out infinite;
}
.fgr-tip { display: none; }

.fgr-row:focus-visible, .fgr-dia:focus-visible, .fgr-seg button:focus-visible,
.fgr-mode:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- the image you're working on ---- */
.fgr-pano {
  position: relative; width: 100%; aspect-ratio: 2 / 1; overflow: hidden;
  border: 1px solid var(--fgr-border); border-radius: 0.75rem; background: #0d0d0f;
}
.fgr-scene { position: absolute; inset: 0; transition: background 0.5s, filter 0.5s; }
.fgr-ground { position: absolute; left: 0; right: 0; top: 58%; bottom: 0; transition: background 0.5s; }
.fgr-hills {
  position: absolute; left: 0; right: 0; top: 41%; height: 17%; background: rgba(0, 0, 0, 0.25);
  clip-path: polygon(0 100%, 6% 45%, 15% 75%, 27% 15%, 40% 70%, 53% 30%, 66% 80%, 80% 25%, 92% 70%, 100% 40%, 100% 100%);
}
.fgr-sun {
  position: absolute; top: 16%; width: 7%; aspect-ratio: 1 / 1; border-radius: 50%;
  background: rgba(255, 255, 255, 0.88); transition: left 0.6s var(--fgr-ease);
}
.fgr-patch { position: absolute; aspect-ratio: 1 / 1; border-radius: 50%; animation: fgr-rise 0.5s backwards; }
.fgr-badge, .fgr-step {
  position: absolute; left: 0.625rem; max-width: calc(100% - 1.25rem);
  padding: 0.3125rem 0.75rem; border-radius: 999px;
  background: rgba(10, 10, 11, 0.86); font-size: 0.75rem;
}
.fgr-badge { top: 0.625rem; font-weight: 600; color: #d4d4d8; border: 1px solid rgba(255, 255, 255, 0.18); }
.fgr-badge.is-head { color: var(--fgr-amber); border-color: rgba(251, 191, 36, 0.45); }
.fgr-step { bottom: 0.625rem; color: #d4d4d8; border: 1px solid rgba(255, 255, 255, 0.14); }

.fgr-status { margin-top: 1.25rem; }
.fgr-status-title { font-size: 1rem; font-weight: 600; color: #fff; }
.fgr-status-body { margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.6; color: #a1a1aa; }
.fgr-note { margin-top: 0.625rem; font-size: 0.875rem; line-height: 1.6; color: #d4d4d8; }

/* ---- how to read it ---- */
.fgr-key {
  display: grid; gap: 1.5rem; margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.fgr-key-item { display: flex; gap: 0.875rem; }
.fgr-key-item h3 { margin: 0; font-size: 0.9375rem; font-weight: 600; }
.fgr-key-item p { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.5; color: #a1a1aa; }
.fgr-key-icon { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.fgr-key-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fgr-amber); }
.fgr-key-diamond { font-size: 1.5rem; color: var(--fgr-amber); }
.fgr-key-row { width: 24px; height: 24px; border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: 0.4375rem; background: #2a2a2c; }

/* ---- two views cards ---- */
.fgr-modes { display: grid; gap: 1.5rem; margin-top: 2rem; }
.fgr-mode {
  display: block; width: 100%; text-align: left; color: inherit; font: inherit;
  padding: 1.5rem; border: 1px solid var(--fgr-border); border-radius: 1rem;
  background: rgba(255, 255, 255, 0.03); cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}
.fgr-mode:hover { background: rgba(255, 255, 255, 0.05); }
.fgr-mode[aria-pressed="true"] { border-color: rgba(225, 62, 19, 0.5); }
.fgr-mode h3 { margin: 1.375rem 0 0; font-size: 1.375rem; font-weight: 600; }
.fgr-mode p { margin: 0.625rem 0 0; font-size: 1rem; line-height: 1.6; color: #a1a1aa; }
.fgr-mini { max-width: 20rem; padding: 0.625rem 0.375rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.75rem; background: #101010; }
.fgr-mini-row {
  display: flex; align-items: center; gap: 0.625rem; height: 30px; margin: 2px 0;
  padding: 0 0.625rem; border: 1.5px solid transparent; border-radius: 0.4375rem;
  font-size: 0.8125rem; color: #e4e4e7;
}
.fgr-mini-row.is-sel { background: #2a2a2c; border-color: rgba(255, 255, 255, 0.45); }
.fgr-mini-row .fgr-dot-s { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--fgr-amber); }
.fgr-mini-row .fgr-dot-s.is-dim { opacity: 0.45; }
.fgr-mini-row span.fgr-mini-name { flex: 1; }
.fgr-mini-row i { color: rgba(255, 255, 255, 0.4); font-size: 0.875rem; }
.fgr-mini-row i.is-head { color: var(--fgr-amber); }

/* ---- lower page sections ---- */
.fgr-sec { margin-top: 4rem; }
.fgr-h2 { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.fgr-sub { margin: 0.75rem 0 0; max-width: 40rem; font-size: 1.0625rem; line-height: 1.6; color: #a1a1aa; }

.fgr-steps { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.fgr-steps li { padding: 1.25rem; border: 1px solid var(--fgr-border); border-radius: 1rem; background: rgba(255, 255, 255, 0.03); }
.fgr-num {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border: 1.5px solid rgba(225, 62, 19, 0.6); border-radius: 50%;
  font-size: 0.875rem; font-weight: 600; color: #fff;
}
.fgr-steps h3, .fgr-tile h3 { margin: 0.875rem 0 0; font-size: 1.0625rem; font-weight: 600; }
.fgr-steps p, .fgr-tile p { margin: 0.375rem 0 0; font-size: 0.9375rem; line-height: 1.55; color: #a1a1aa; }

.fgr-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.fgr-chip { padding: 0.3125rem 0.875rem; border: 1px solid var(--fgr-border); border-radius: 999px; font-size: 0.8125rem; color: #d4d4d8; }

.fgr-trio, .fgr-duo { display: grid; gap: 1rem; margin-top: 1.75rem; }
.fgr-duo { margin-top: 0; }
.fgr-tile { padding: 1.5rem; border: 1px solid var(--fgr-border); border-radius: 1rem; background: rgba(255, 255, 255, 0.03); }
.fgr-tile > i { font-size: 1.5rem; color: #e13e13; }
.fgr-tile h3 { margin-top: 1rem; }

/* ---- finale: quote + links ---- */
.fgr-finale { margin: 5rem 0 2rem; padding: 3.5rem 0 0; border-top: 1px solid var(--fgr-border); text-align: center; }
.fgr-quote { margin: 0; }
.fgr-quote blockquote {
  margin: 0; font-size: clamp(2.375rem, 9vw, 5rem); line-height: 1.02;
  letter-spacing: -0.03em; font-weight: 700;
}
.fgr-quote blockquote span { color: #e13e13; }
.fgr-quote figcaption { max-width: 28rem; margin: 1.5rem auto 0; font-size: 1.125rem; line-height: 1.6; color: #a1a1aa; text-wrap: balance; }
.fgr-end { margin: 2.5rem 0 0; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.55); }
.fgr-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.25rem; }

@keyframes fgr-ping { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes fgr-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Hover tips only where hover exists (never on touch) */
@media (hover: hover) {
  .fgr-tip {
    display: block; position: absolute; right: 36px; top: 50%; transform: translateY(-50%);
    padding: 5px 10px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.5rem;
    background: #1d1d20; color: #fff; font-size: 0.75rem; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 6;
  }
  .fgr-dia:hover .fgr-tip, .fgr-dia:focus-visible .fgr-tip { opacity: 1; }
}

@media (min-width: 480px) {
  .fgr-row.is-sel .fgr-meta { display: block; }
}

@media (min-width: 768px) {
  .fgr-card { padding: 2.5rem; }
  .fgr-lead { font-size: 1.1875rem; }
  .fgr-panel { padding: 1rem 1rem 0.75rem; }
  .fgr-key { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .fgr-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fgr-h2 { font-size: 1.875rem; }
  .fgr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fgr-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fgr-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fgr-sec { margin-top: 5rem; }
}

@media (min-width: 1024px) {
  .fgr-card { padding: 3rem; }
  .fgr-demo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .fgr-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .fgr *, .fgr *::before, .fgr *::after { animation: none !important; transition: none !important; }
}