/* ==========================================================================
   Feature pages (features/*). Original HTML/CSS/SVG mini interfaces.
   Loads after main.css. Prefix: fx- (visuals) and cap (capability cards).
   ========================================================================== */

/* ---------- Page chrome ---------- */
.fx-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.fx-jump a {
  font-size: 0.85rem; color: var(--text-2); padding: 7px 14px; border: 1px solid var(--line-2);
  border-radius: 999px; background: rgba(255,255,255,0.02); transition: color .2s, border-color .2s, background .2s;
}
.fx-jump a:hover { color: var(--text); border-color: rgba(196, 255, 77,0.4); background: var(--accent-wash); }
.page-hero .btn-row { margin-top: 30px; }
.fx-anchor { scroll-margin-top: 96px; }
.fx-head-split { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.fx-head-split .section-head { margin-bottom: 0; }
.feature-copy .badge { margin-bottom: 16px; }
.feature-copy .btn-link { margin-top: 18px; display: inline-flex; gap: 6px; align-items: center; }
.feature-copy .btn-link svg { width: 14px; height: 14px; }
.fx-cap { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 0.74rem; color: var(--muted); letter-spacing: 0.02em; }
.fx-cap svg { width: 13px; height: 13px; flex: none; }
.fx-cap.concept { color: var(--violet); }

/* ---------- Plan sheet visuals ---------- */
.fx-plan {
  position: relative; border-top: 1px solid var(--line);
  background:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 24px 24px,
    #0a1015;
}
.fx-plan > svg { width: 100%; height: auto; }
.fx-file { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); font-weight: 500; }
.fx-status {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 9px 14px;
  border-top: 1px solid var(--line); background: var(--panel-2); font-family: var(--mono); font-size: 0.72rem; color: var(--muted);
}
.fx-status b { color: var(--accent-hi); font-weight: 500; }
.fx-status .push { margin-left: auto; }

/* SVG classes (blueprint dark theme, green measurement overlays) */
.bp { fill: none; stroke: rgba(255,255,255,0.34); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bp-w { fill: none; stroke: rgba(255,255,255,0.55); stroke-width: 2.6; stroke-linejoin: round; }
.bp-t { fill: none; stroke: rgba(255,255,255,0.14); stroke-width: 1; }
.bp-d { fill: none; stroke: rgba(255,255,255,0.22); stroke-width: 1; stroke-dasharray: 6 5; }
.bp-fill { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.3); stroke-width: 1.2; }
.bp-bar { fill: rgba(255,255,255,0.12); }
.ms { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ms-fill { fill: rgba(166, 255, 0,0.17); stroke: var(--accent-hi); stroke-width: 2; stroke-linejoin: round; }
.ms-dash { stroke-dasharray: 6 4; }
.ms-dot { fill: #0a1015; stroke: var(--accent-hi); stroke-width: 2; }
.ms-pt { fill: var(--accent-hi); }
.ms-cut { fill: rgba(239,68,68,0.16); stroke: #f87171; stroke-width: 1.8; stroke-dasharray: 5 3; }
.info-ln { fill: none; stroke: var(--info); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.info-fill { fill: rgba(56,189,248,0.14); stroke: var(--info); stroke-width: 1.8; }
.warn-ln { fill: none; stroke: var(--warn); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.warn-fill { fill: rgba(245,158,11,0.1); stroke: var(--warn); stroke-width: 2; }
.red-ln { fill: none; stroke: #ef4444; stroke-width: 2; stroke-linecap: round; }
.blu-ln { fill: none; stroke: #2f7bff; stroke-width: 2; stroke-linecap: round; }
.gry-ln { fill: none; stroke: #8b98a2; stroke-width: 2; stroke-linecap: round; }
.lbl-bg { fill: rgba(9,13,17,0.94); stroke: rgba(196, 255, 77,0.6); stroke-width: 1; }
.lbl-bg.info { stroke: rgba(56,189,248,0.6); }
.lbl-bg.warn { stroke: rgba(245,158,11,0.6); }
.lbl { font-family: var(--mono); font-size: 13px; font-weight: 500; fill: var(--accent-hi); }
.lbl.info { fill: var(--info); }
.lbl.warn { fill: var(--warn); }
.lbl.dim { fill: var(--text-2); }
.txt { font-family: var(--mono); font-size: 10px; fill: rgba(255,255,255,0.42); }
.txt-lg { font-family: var(--font); font-size: 13px; font-weight: 600; fill: rgba(255,255,255,0.6); letter-spacing: 0.04em; }
.txt-sm { font-family: var(--mono); font-size: 9px; fill: rgba(255,255,255,0.3); }

/* draw-on animation (uses pathLength="1" on drawn elements) */
.draw-in { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pop-in { opacity: 0; }
.in .draw-in { animation: fx-draw 1.5s var(--ease) forwards; animation-delay: var(--d, 0s); }
.in .pop-in { animation: fx-pop 0.5s var(--ease) forwards; animation-delay: var(--d, 0.4s); }
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
@keyframes fx-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .draw-in { stroke-dashoffset: 0 !important; animation: none !important; }
  .pop-in { opacity: 1 !important; animation: none !important; }
}

/* ---------- Tool picker (takeoff) ---------- */
.fx-split { display: grid; grid-template-columns: 138px 1fr; }
.fx-toolcol { display: flex; flex-direction: column; gap: 3px; padding: 10px; background: var(--panel-2); border-right: 1px solid var(--line); }
.fx-tool {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; border: 1px solid transparent;
  background: none; color: var(--text-2); font-size: 0.78rem; font-weight: 500; text-align: left; transition: background .15s, color .15s, border-color .15s;
}
.fx-tool svg { width: 15px; height: 15px; color: var(--muted); }
.fx-tool:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.fx-tool.on { background: var(--accent-wash); border-color: rgba(196, 255, 77,0.35); color: var(--accent-hi); }
.fx-tool.on svg { color: var(--accent-hi); }
.fx-live [data-ov] { display: none; }
.fx-live [data-ov].on { display: inline; }
.fx-readout { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.fx-readout b { color: var(--accent-hi); font-weight: 500; }
@media (max-width: 640px) {
  .fx-split { grid-template-columns: 1fr; }
  .fx-toolcol { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .fx-tool { flex: none; }
}

/* ---------- Chips, keys, small UI atoms ---------- */
.fx-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 7px; font-size: 0.72rem; font-weight: 600;
  background: var(--panel-3); color: var(--text-2); border: 1px solid var(--line); white-space: nowrap; line-height: 1.5;
}
.fx-chip.g { background: var(--accent-wash); color: var(--accent-hi); border-color: rgba(196, 255, 77,0.3); }
.fx-chip.b { background: rgba(56,189,248,0.1); color: var(--info); border-color: rgba(56,189,248,0.3); }
.fx-chip.v { background: rgba(167,139,250,0.1); color: var(--violet); border-color: rgba(167,139,250,0.3); }
.fx-chip.w { background: rgba(245,158,11,0.1); color: var(--warn); border-color: rgba(245,158,11,0.3); }
.fx-chip.r { background: rgba(239,68,68,0.1); color: #f87171; border-color: rgba(239,68,68,0.3); }
.fx-chip svg { width: 12px; height: 12px; }
.fx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
kbd {
  font-family: var(--mono); font-size: 0.76rem; padding: 2px 7px; border-radius: 6px; background: var(--panel-3);
  border: 1px solid var(--line-2); border-bottom-width: 2px; color: var(--text); white-space: nowrap;
}
.fx-pad { padding: 16px; }
.fx-pad-sm { padding: 12px 14px; }
.fx-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-sep { border: 0; border-top: 1px solid var(--line); margin: 0; }
.fx-lbl { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; display: block; }
.fx-field {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line-2);
  border-radius: 8px; background: var(--ink-2); font-size: 0.78rem; color: var(--text-2);
}
.fx-field b { font-family: var(--mono); font-weight: 500; color: var(--text); }
.fx-field + .fx-field { margin-top: 8px; }
.fx-check { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text-2); }
.fx-check i { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--line-2); display: inline-grid; place-items: center; background: var(--ink-2); }
.fx-check.on i { background: var(--accent); border-color: var(--accent); }
.fx-check.on i::after { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink); transform: rotate(-45deg) translate(1px, -1px); }
.fx-btn-mini {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--panel-3); font-size: 0.75rem; font-weight: 600; color: var(--text);
}
.fx-btn-mini.p { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.fx-btn-mini svg { width: 13px; height: 13px; }
.fx-slider { position: relative; height: 4px; border-radius: 4px; background: var(--panel-3); margin: 12px 4px; }
.fx-slider i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--accent); }
.fx-slider::after { content: ""; position: absolute; top: 50%; left: var(--v, 70%); width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--accent-glow); }
.fx-list { list-style: none; margin: 0; padding: 0; }
.fx-list li { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 0.8rem; }
.fx-list li:last-child { border-bottom: 0; }
.fx-list li.on { background: var(--accent-wash); color: var(--text); }
.fx-list li .push { margin-left: auto; }
.fx-list svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.fx-list li.on svg { color: var(--accent-hi); }
.fx-two { display: grid; grid-template-columns: 1fr 1fr; }
.fx-two > * + * { border-left: 1px solid var(--line); }
@media (max-width: 560px) { .fx-two { grid-template-columns: 1fr; } .fx-two > * + * { border-left: 0; border-top: 1px solid var(--line); } }

/* extra table row types */
.vtable tr.grp td { background: rgba(255,255,255,0.035); color: var(--text); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.03em; }
.vtable tfoot td { border-top: 1px solid var(--line-2); border-bottom: 0; color: var(--text); font-family: var(--mono); background: rgba(255,255,255,0.02); }
.vtable td.mono { font-family: var(--mono); }
.vtable td.r, .vtable th.r { text-align: right; }

/* ---------- Capability cards (dense grid) ---------- */
.cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.cap {
  padding: 20px; border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, var(--panel), rgba(18,26,33,0.55)); transition: border-color .25s, transform .25s var(--ease);
}
.cap:hover { border-color: var(--line-2); transform: translateY(-2px); }
.cap .ci { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-hi); border: 1px solid rgba(196, 255, 77,0.2); }
.cap .ci svg { width: 18px; height: 18px; }
.cap.plan .ci { background: rgba(56,189,248,0.08); color: var(--info); border-color: rgba(56,189,248,0.25); }
.cap.conc .ci { background: rgba(167,139,250,0.08); color: var(--violet); border-color: rgba(167,139,250,0.25); }
.cap h3 { font-size: 0.98rem; margin: 14px 0 6px; }
.cap p { font-size: 0.88rem; margin: 0; line-height: 1.55; }
.cap .badge { margin-top: 12px; height: 22px; font-size: 0.66rem; }

/* related links */
.related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.related a.card { padding: 22px; }
.related a.card h3 { margin-top: 12px; font-size: 1rem; }
.related a.card p { font-size: 0.86rem; }
@media (max-width: 960px) { .related { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .related { grid-template-columns: 1fr; } }

/* ---------- Keyboard shortcut table ---------- */
.fx-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fx-keygroup { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.fx-keygroup h3 { font-size: 0.95rem; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.fx-keygroup h3 svg { width: 18px; height: 18px; color: var(--accent-hi); }
.krow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; color: var(--text-2); }
.krow:last-child { border-bottom: 0; }
.krow .k { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 960px) { .fx-keys { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .fx-keys { grid-template-columns: 1fr; } }

/* ---------- Overview: groups ---------- */
.fx-groups { display: grid; gap: 20px; }
.fx-group {
  display: grid; grid-template-columns: 340px 1fr; gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 3.5vw, 40px);
  border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, var(--panel), rgba(18,26,33,0.5));
  transition: border-color .25s;
}
.fx-group:hover { border-color: var(--line-2); }
.fx-group .gico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-hi); border: 1px solid rgba(196, 255, 77,0.22); margin-bottom: 18px; }
.fx-group .gico svg { width: 23px; height: 23px; }
.fx-group h3 { font-size: 1.45rem; margin-bottom: 10px; }
.fx-group p { font-size: 0.95rem; }
.fx-group .btn-link { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; }
.fx-group .btn-link svg { width: 14px; height: 14px; }
.fx-group ul.fx-items { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; align-content: start; }
.fx-items li { padding: 10px 0 10px 26px; position: relative; border-bottom: 1px solid var(--line); font-size: 0.9rem; color: var(--text-2); line-height: 1.45; }
.fx-items li strong { color: var(--text); font-weight: 600; }
.fx-items li::before {
  content: ""; position: absolute; left: 0; top: 14px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/9px no-repeat;
  border: 1px solid rgba(196, 255, 77,0.3);
}
.fx-items li.pl::before { background: rgba(56,189,248,0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center/10px no-repeat; border-color: rgba(56,189,248,0.35); }
@media (max-width: 960px) { .fx-group { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .fx-group ul.fx-items { grid-template-columns: 1fr; } }

/* Overview: whole product in one window */
.fx-app { border: 1px solid var(--line-2); border-radius: 16px; background: #0b1116; overflow: hidden; box-shadow: 0 40px 100px -30px rgba(0,0,0,0.85), 0 0 0 1px var(--line); font-size: 0.74rem; }
.fx-app-bar { display: flex; align-items: center; gap: 4px; padding: 8px 12px; background: #05080b; border-bottom: 1px solid var(--line); color: var(--text-2); overflow: hidden; }
.fx-app-bar span.m { padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.fx-app-bar span.m:first-of-type { color: var(--text); font-weight: 600; }
.fx-app-bar .push { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.fx-app-body { display: grid; grid-template-columns: 34px 168px 1fr 34px; min-height: 340px; }
.fx-strip { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 8px 0; background: var(--panel-2); border-right: 1px solid var(--line); }
.fx-strip.r { border-right: 0; border-left: 1px solid var(--line); }
.fx-strip i { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); }
.fx-strip i.on { background: var(--accent-wash); color: var(--accent-hi); }
.fx-strip i svg { width: 14px; height: 14px; }
.fx-strip hr { width: 18px; border: 0; border-top: 1px solid var(--line-2); margin: 3px 0; }
.fx-side { background: var(--panel); border-right: 1px solid var(--line); padding: 10px; }
.fx-side h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 10px; font-weight: 600; }
.fx-tile { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; color: var(--text-2); }
.fx-tile svg { width: 14px; height: 14px; color: var(--accent-hi); }
.fx-tile.on { background: var(--accent-wash); color: var(--text); }
.fx-center { position: relative; background: #0a1015; min-width: 0; }
.fx-center > svg { width: 100%; height: auto; }
.fx-app-table { border-top: 1px solid var(--line-2); background: var(--panel); }
.fx-app-table .vtable { font-size: 0.72rem; }
.fx-app-table .vtable th, .fx-app-table .vtable td { padding: 6px 12px; }
@media (max-width: 860px) {
  .fx-app-body { grid-template-columns: 34px 1fr 34px; }
  .fx-side { display: none; }
  .fx-app-bar span.m:nth-of-type(n+6) { display: none; }
}
@media (max-width: 560px) {
  .fx-app-body { grid-template-columns: 1fr; }
  .fx-strip { display: none; }
  .fx-app-table .hide-s { display: none; }
}

/* In-one-window callouts */
.fx-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.fx-points div { padding-top: 16px; border-top: 1px solid var(--line-2); }
.fx-points strong { display: block; color: var(--text); font-size: 0.95rem; margin-bottom: 4px; }
.fx-points span { color: var(--muted); font-size: 0.86rem; line-height: 1.5; display: block; }
@media (max-width: 860px) { .fx-points { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .fx-points { grid-template-columns: 1fr; } }

/* ---------- Hatches, line styles, stamps ---------- */
.fx-hatch { height: 40px; border-radius: 7px; border: 1px solid var(--line-2); background-color: var(--ink-2); }
.hatch-a { background-image: repeating-linear-gradient(45deg, rgba(196, 255, 77,0.75) 0 1.5px, transparent 1.5px 7px); }
.hatch-b { background-image: repeating-linear-gradient(45deg, rgba(56,189,248,0.7) 0 1.4px, transparent 1.4px 8px), repeating-linear-gradient(-45deg, rgba(56,189,248,0.7) 0 1.4px, transparent 1.4px 8px); }
.hatch-c { background-image: radial-gradient(circle, rgba(245,158,11,0.85) 1.4px, transparent 1.8px); background-size: 9px 9px; }
.hatch-d { background-image: repeating-linear-gradient(0deg, rgba(167,139,250,0.75) 0 1.4px, transparent 1.4px 8px); }
.hatch-e { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.45) 0 1.4px, transparent 1.4px 7px), repeating-linear-gradient(0deg, rgba(255,255,255,0.45) 0 1.4px, transparent 1.4px 7px); }
.hatch-f { background-image: repeating-linear-gradient(135deg, rgba(239,68,68,0.75) 0 1.6px, transparent 1.6px 6px); }
.fx-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fx-swatches figure { margin: 0; }
.fx-swatches figcaption { margin-top: 6px; font-size: 0.7rem; color: var(--muted); font-family: var(--mono); }
.fx-lines { display: grid; gap: 12px; }
.fx-lines svg { width: 100%; height: 14px; }
.fx-stampbox {
  display: inline-block; padding: 8px 16px; border: 3px solid currentColor; border-radius: 8px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; font-size: 1rem; line-height: 1.15; text-align: center; background: rgba(0,0,0,0.25);
}
.fx-stampbox small { display: block; font-family: var(--mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.04em; margin-top: 3px; opacity: 0.85; text-transform: none; }
.fx-stampbox.g { color: #C4FF4D; }
.fx-stampbox.r { color: #f87171; }
.fx-stampbox.w { color: #fbbf24; }
.fx-stampbox.b { color: #38bdf8; }
.fx-tilegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fx-tilegrid .t { aspect-ratio: 1; border-radius: 9px; border: 1px solid var(--line-2); background: var(--panel-2); display: grid; place-items: center; align-content: center; gap: 5px; font-size: 0.64rem; color: var(--text-2); text-align: center; padding: 4px; }
.fx-tilegrid .t svg { width: 20px; height: 20px; color: var(--accent-hi); }
.fx-tilegrid .t.on { border-color: rgba(196, 255, 77,0.5); background: var(--accent-wash); color: var(--text); }
.fx-tabs { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--line); background: var(--panel-2); overflow-x: auto; }
.fx-tabs span { padding: 7px 12px; font-size: 0.74rem; color: var(--muted); border-radius: 8px 8px 0 0; white-space: nowrap; }
.fx-tabs span.on { color: var(--text); background: var(--panel); border: 1px solid var(--line); border-bottom-color: var(--panel); margin-bottom: -1px; }

/* comments / replies */
.fx-thread { display: grid; gap: 0; }
.fx-comment { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.fx-comment:last-child { border-bottom: 0; }
.fx-comment .who { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; color: var(--text); font-weight: 600; font-size: 0.8rem; }
.fx-comment .av { width: 24px; height: 24px; border-radius: 50%; background: var(--panel-3); border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 0.65rem; color: var(--text-2); }
.fx-comment p { margin: 0; font-size: 0.82rem; }
.fx-comment.reply { padding-left: 50px; background: rgba(255,255,255,0.015); }
.fx-comment .meta { color: var(--muted); font-weight: 400; font-family: var(--mono); font-size: 0.68rem; }

/* layers */
.fx-layer { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 0.8rem; color: var(--text-2); }
.fx-layer:last-child { border-bottom: 0; }
.fx-layer .eye { width: 18px; height: 18px; color: var(--accent-hi); }
.fx-layer.off { color: var(--muted); }
.fx-layer.off .eye { color: var(--muted); opacity: 0.5; }
.fx-layer .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.fx-layer .push { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }

/* ---------- Spreadsheet mock ---------- */
.fx-xl { font-family: var(--mono); font-size: 0.72rem; color: var(--text-2); }
.fx-xl table { width: 100%; border-collapse: collapse; }
.fx-xl th { background: var(--panel-2); color: var(--muted); font-weight: 500; padding: 5px 10px; border: 1px solid var(--line); text-align: center; }
.fx-xl td { padding: 5px 10px; border: 1px solid var(--line); white-space: nowrap; }
.fx-xl td.n { text-align: right; }
.fx-xl td.sel { outline: 2px solid var(--accent); outline-offset: -2px; color: var(--text); background: var(--accent-wash); }
.fx-xl tr.h td { background: rgba(255,255,255,0.04); color: var(--text); font-weight: 600; }
.fx-xl tr.t td { color: var(--text); font-weight: 600; background: rgba(255,255,255,0.03); }
.fx-xl .rn { background: var(--panel-2); color: var(--muted); text-align: center; width: 28px; }
.fx-sheets { display: flex; gap: 2px; padding: 0 10px; background: var(--panel-2); border-top: 1px solid var(--line); overflow-x: auto; }
.fx-sheets span { padding: 8px 13px; font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.fx-sheets span.on { color: var(--accent-hi); border-top: 2px solid var(--accent); background: var(--panel); margin-top: -1px; }
.fx-code { font-family: var(--mono); font-size: 0.76rem; line-height: 1.7; color: var(--text-2); margin: 0; padding: 16px; overflow-x: auto; background: var(--ink-2); border-radius: 0 0 var(--radius) var(--radius); white-space: pre; }
.fx-code .k { color: var(--info); }
.fx-code .s { color: var(--accent-hi); }
.fx-code .c { color: var(--muted); }
.fx-formula { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--ink-2); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.78rem; color: var(--text); }
.fx-formula i { font-style: italic; font-family: var(--font); color: var(--accent-hi); padding-right: 10px; border-right: 1px solid var(--line-2); font-weight: 600; }
.fx-formula .ref { color: var(--accent-hi); }
.fx-paper { background: var(--paper); color: var(--paper-ink); padding: 22px 24px; font-size: 0.78rem; }
.fx-paper h4 { color: var(--paper-ink); font-size: 0.9rem; margin: 0 0 2px; }
.fx-paper .sub { color: #5a6975; font-size: 0.7rem; margin-bottom: 14px; }
.fx-paper table { width: 100%; border-collapse: collapse; }
.fx-paper th { text-align: left; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; color: #5a6975; padding: 6px 0; border-bottom: 1.5px solid #0f1820; }
.fx-paper td { padding: 6px 0; border-bottom: 1px solid #dde3e8; font-family: var(--mono); font-size: 0.72rem; }
.fx-paper td.n, .fx-paper th.n { text-align: right; }
.fx-paper tr.t td { font-weight: 700; border-bottom: 0; border-top: 1.5px solid #0f1820; }

/* assemblies concept panel */
.fx-recipe { font-size: 0.8rem; }
.fx-recipe .line { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--line); align-items: baseline; }
.fx-recipe .line:last-child { border-bottom: 0; }
.fx-recipe .line b { color: var(--text); font-weight: 600; display: block; font-size: 0.82rem; }
.fx-recipe .line code { font-family: var(--mono); font-size: 0.72rem; color: var(--info); }
.fx-recipe .line .q { font-family: var(--mono); color: var(--accent-hi); font-size: 0.82rem; text-align: right; white-space: nowrap; }
.fx-recipe .in-q { display: flex; justify-content: space-between; padding: 12px 16px; background: var(--accent-wash); border-bottom: 1px solid var(--line); color: var(--text); font-family: var(--mono); font-size: 0.8rem; }

/* concept images */
.fx-concept { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(167,139,250,0.3); background: var(--panel); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8); position: relative; }
.fx-concept img { width: 100%; height: auto; display: block; }
.fx-concept .tag { position: absolute; top: 12px; left: 12px; }
.fx-concept figcaption { padding: 10px 14px; font-size: 0.74rem; color: var(--violet); border-top: 1px solid rgba(167,139,250,0.2); display: flex; gap: 8px; align-items: center; letter-spacing: 0.02em; background: rgba(167,139,250,0.05); }
.fx-concept figcaption svg { width: 13px; height: 13px; flex: none; }
.fx-coming { border: 1px dashed rgba(56,189,248,0.35); border-radius: 22px; padding: clamp(24px, 4vw, 48px); background: linear-gradient(180deg, rgba(56,189,248,0.04), transparent 60%); }

/* ---------- Sets, thumbnails ---------- */
.fx-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px; }
.fx-thumb { aspect-ratio: 3 / 4; border: 1px solid var(--line-2); border-radius: 6px; background: #0a1015; position: relative; overflow: hidden; display: grid; align-items: end; }
.fx-thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-thumb span { position: relative; padding: 4px 6px; font-family: var(--mono); font-size: 0.62rem; color: var(--text-2); background: rgba(9,13,17,0.85); border-top: 1px solid var(--line); }
.fx-thumb.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
.fx-thumb.x { border-color: rgba(239,68,68,0.5); opacity: 0.6; }

/* ---------- Script Flow designer ---------- */
.fx-flow { padding: 18px; display: grid; gap: 0; background: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px) 0 0 / 18px 18px, #0a1015; }
.fnode { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel-2); font-size: 0.8rem; color: var(--text); font-weight: 500; }
.fnode small { display: block; color: var(--muted); font-weight: 400; font-size: 0.7rem; }
.fnode .n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-hi); flex: none; }
.fnode .n svg { width: 15px; height: 15px; }
.fnode.if { border-color: rgba(56,189,248,0.5); }
.fnode.if .n { background: rgba(56,189,248,0.1); color: var(--info); }
.fnode .ok { margin-left: auto; font-family: var(--mono); font-size: 0.68rem; color: var(--accent-hi); }
.fconn { width: 2px; height: 16px; background: var(--line-2); margin-left: 26px; }
.fbranch { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: relative; padding-top: 14px; margin-top: 0; }
.fbranch::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; border-top: 2px solid var(--line-2); }
.fbranch > div { position: relative; }
.fbranch > div::before { content: ""; position: absolute; top: -14px; left: 50%; height: 14px; border-left: 2px solid var(--line-2); }
.fbranch .tagl { display: inline-block; font-family: var(--mono); font-size: 0.66rem; margin-bottom: 6px; padding: 1px 7px; border-radius: 5px; }
.fbranch .tagl.y { background: var(--accent-wash); color: var(--accent-hi); }
.fbranch .tagl.n { background: rgba(255,255,255,0.06); color: var(--muted); }
@media (max-width: 480px) { .fbranch { grid-template-columns: 1fr; } .fbranch::before, .fbranch > div::before { display: none; } }

/* Session attendees */
.fx-avatars { display: flex; }
.fx-avatars i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--panel); background: var(--panel-3); margin-left: -8px; display: grid; place-items: center; font-style: normal; font-size: 0.62rem; color: var(--text); font-weight: 600; }
.fx-avatars i:first-child { margin-left: 0; }
.fx-avatars i.a { background: #14532d; }
.fx-avatars i.b { background: #0c4a6e; }
.fx-avatars i.c { background: #4c1d95; }
.fx-avatars i.d { background: #713f12; }
.fx-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: fx-pulse 2s infinite; display: inline-block; }
@keyframes fx-pulse { 70% { box-shadow: 0 0 0 8px rgba(166, 255, 0,0); } 100% { box-shadow: 0 0 0 0 rgba(166, 255, 0,0); } }

/* Forms (construction templates) */
.fx-doc { background: var(--paper); color: var(--paper-ink); padding: 22px 24px; font-size: 0.76rem; }
.fx-doc h4 { color: var(--paper-ink); margin: 0; font-size: 1rem; letter-spacing: 0.04em; }
.fx-doc .row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid #dde3e8; align-items: center; }
.fx-doc .row span { color: #5a6975; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; }
.fx-doc .field-box { border: 1.5px solid #A6FF00; background: rgba(166, 255, 0,0.1); border-radius: 3px; padding: 3px 8px; font-family: var(--mono); font-size: 0.72rem; }
.fx-doc .field-box.empty { border-color: #b4c0c8; background: #fff; color: #8a97a1; }
.fx-doc .sig { height: 38px; border-bottom: 1.5px solid #0f1820; position: relative; margin-top: 10px; }
.fx-doc .sig svg { position: absolute; left: 6px; bottom: 2px; width: 120px; height: 34px; }
.fx-doc .lead-t { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #0f1820; padding-bottom: 8px; margin-bottom: 4px; }

/* ---------- Roadmap: kanban ---------- */
.fx-kanban { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 12px; overflow-x: auto; padding: 16px; background: #0a1015; border-top: 1px solid var(--line); }
.kcol { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-width: 200px; }
.kcol h4 { display: flex; justify-content: space-between; align-items: center; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); margin: 2px 4px 10px; font-weight: 600; }
.kcol h4 span { font-family: var(--mono); color: var(--muted); font-weight: 500; letter-spacing: 0; }
.kcard { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 9px; padding: 11px 12px; margin-bottom: 8px; font-size: 0.78rem; }
.kcard b { display: block; color: var(--text); font-weight: 600; margin-bottom: 6px; line-height: 1.3; }
.kcard .meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 0.7rem; font-family: var(--mono); }
.kcard.hot { border-color: rgba(245,158,11,0.45); }
.kcard.won { border-color: rgba(196, 255, 77,0.4); }
.kcard.lost { opacity: 0.65; }
.kcard .ow { width: 20px; height: 20px; border-radius: 50%; background: var(--panel-3); border: 1px solid var(--line-2); display: inline-grid; place-items: center; font-size: 0.58rem; color: var(--text); font-family: var(--font); font-weight: 600; }

/* gates + decision */
.fx-gate { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 0.8rem; color: var(--text-2); }
.fx-gate:last-child { border-bottom: 0; }
.fx-gate .dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; }
.fx-gate.done .dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.fx-gate.done .dot svg { width: 11px; height: 11px; }
.fx-gate.cur .dot { border-color: var(--info); box-shadow: 0 0 0 3px rgba(56,189,248,0.15); }
.fx-gate b { color: var(--text); font-weight: 600; }
.fx-decide { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px; background: var(--ink-2); }
.fx-decide div { padding: 12px; border-radius: 10px; border: 1px solid var(--line-2); text-align: center; font-weight: 600; font-size: 0.82rem; color: var(--text-2); }
.fx-decide div.go { border-color: rgba(196, 255, 77,0.4); color: var(--accent-hi); background: var(--accent-wash); }

.fx-notice-big { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border: 1px solid rgba(56,189,248,0.3); background: rgba(56,189,248,0.06); border-radius: 16px; }
.fx-notice-big svg { width: 22px; height: 22px; color: var(--info); flex: none; margin-top: 2px; }
.fx-notice-big strong { color: var(--text); display: block; margin-bottom: 4px; }
.fx-notice-big p { margin: 0; font-size: 0.92rem; }
.fx-notice-big .btn-row { margin-top: 14px; }

/* markers for the "what runs today vs later" list */
.fx-now-later { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fx-now-later > div { padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.fx-now-later h3 { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; font-size: 1.1rem; }
@media (max-width: 800px) { .fx-now-later { grid-template-columns: 1fr; } }

/* misc helpers */
.fx-box { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.fx-tabbar-left { justify-content: flex-start; padding: 14px 16px 12px; margin-bottom: 0; border-bottom: 1px solid var(--line); }
.fx-tabbar-left button { padding: 7px 14px; font-size: 0.8rem; }
.vtable th small { display: block; font-size: 0.62rem; color: var(--accent-hi); letter-spacing: 0.04em; text-transform: none; font-weight: 500; margin-top: 2px; }
.page-hero.center .fx-jump { justify-content: center; }
.fx-items .badge { height: 20px; font-size: 0.6rem; margin-left: 6px; vertical-align: 1px; }
.vpanel-head { flex-wrap: wrap; gap: 8px 12px; }
.vpanel-head .fx-file { overflow: hidden; text-overflow: ellipsis; }

/* Interactive panels say so and show the demo is playing (owner feedback 2026-10-21 #9). */
.fx-live { position: relative; }
.fx-autoplay { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--text-2); }
.fx-try::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; }
.fx-playing .fx-try::before { animation: fx-ping 1.6s infinite; }
@keyframes fx-ping { 0% { box-shadow: 0 0 0 0 rgba(166, 255, 0, 0.55); } 100% { box-shadow: 0 0 0 9px rgba(166, 255, 0, 0); } }
.fx-pp { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); font-size: 0.7rem; cursor: pointer; }
.fx-live button[data-tool], .fx-live button[data-preset], .fx-live button[data-allpages] { cursor: pointer; }
.fx-live button[data-tool]:hover, .fx-live button[data-preset]:hover { color: var(--accent-hi); }
.fx-box button[data-preset] { all: unset; cursor: pointer; flex: 1; }
.fx-box button[data-preset]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.fx-check { background: none; border: 0; color: inherit; font: inherit; padding: 0; cursor: pointer; }